Update to Kirki 4.2.0

functions/kirki/kirki-packages/control-date/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 kirki-framework
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

functions/kirki/kirki-packages/control-date/dist/control.css

@@ -0,0 +1,2 @@
+.kirki-datepicker-popup{background-color:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 12px 15px 0 rgba(0,0,0,.09);margin-top:15px;max-width:275px;overflow:hidden;padding-bottom:10px;z-index:500001!important}.kirki-datepicker-popup .ui-datepicker-header{background-color:#eee;padding:10px}.kirki-datepicker-popup .ui-datepicker-header .ui-datepicker-next,.kirki-datepicker-popup .ui-datepicker-header .ui-datepicker-prev{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:30px;justify-content:center;overflow:hidden;position:absolute;transition:all .2s;width:30px}.kirki-datepicker-popup .ui-datepicker-header .ui-datepicker-next:active,.kirki-datepicker-popup .ui-datepicker-header .ui-datepicker-next:focus,.kirki-datepicker-popup .ui-datepicker-header .ui-datepicker-next:hover,.kirki-datepicker-popup .ui-datepicker-header .ui-datepicker-prev:active,.kirki-datepicker-popup .ui-datepicker-header .ui-datepicker-prev:focus,.kirki-datepicker-popup .ui-datepicker-header .ui-datepicker-prev:hover{background-color:#2271b1;color:#fff}.kirki-datepicker-popup .ui-datepicker-header .ui-datepicker-next:after,.kirki-datepicker-popup .ui-datepicker-header .ui-datepicker-next:before,.kirki-datepicker-popup .ui-datepicker-header .ui-datepicker-prev:after,.kirki-datepicker-popup .ui-datepicker-header .ui-datepicker-prev:before{font-family:dashicons}.kirki-datepicker-popup .ui-datepicker-header .ui-datepicker-next .ui-icon,.kirki-datepicker-popup .ui-datepicker-header .ui-datepicker-prev .ui-icon{display:none}.kirki-datepicker-popup .ui-datepicker-header .ui-datepicker-prev{left:10px}.kirki-datepicker-popup .ui-datepicker-header .ui-datepicker-prev:before{content:"\f341"}.kirki-datepicker-popup .ui-datepicker-header .ui-datepicker-next{right:10px}.kirki-datepicker-popup .ui-datepicker-header .ui-datepicker-next:after{content:"\f345"}.kirki-datepicker-popup .ui-datepicker-header .ui-datepicker-title{align-items:center;display:flex;font-size:16px;height:30px;justify-content:center;text-align:center;width:100%}.kirki-datepicker-popup .ui-datepicker-calendar{border-collapse:collapse;padding-bottom:20px;width:100%}.kirki-datepicker-popup .ui-datepicker-calendar thead{background-color:#ddd;padding-left:5px;padding-right:5px}.kirki-datepicker-popup .ui-datepicker-calendar thead th{font-size:13px;font-weight:600;padding-bottom:5px;padding-top:5px;text-align:center}.kirki-datepicker-popup .ui-datepicker-calendar tbody{padding:5px}.kirki-datepicker-popup .ui-datepicker-calendar tbody td{padding:2px;text-align:center}.kirki-datepicker-popup .ui-datepicker-calendar tbody a{color:#333;text-decoration:none}.kirki-datepicker-popup .ui-datepicker-calendar tbody .ui-datepicker-today .ui-state-default{background-color:#eee}.kirki-datepicker-popup .ui-datepicker-calendar tbody .ui-datepicker-today .ui-state-active,.kirki-datepicker-popup .ui-datepicker-calendar tbody .ui-datepicker-today .ui-state-active:active,.kirki-datepicker-popup .ui-datepicker-calendar tbody .ui-datepicker-today .ui-state-active:focus,.kirki-datepicker-popup .ui-datepicker-calendar tbody .ui-datepicker-today .ui-state-active:hover{background-color:#2271b1}.kirki-datepicker-popup .ui-datepicker-calendar tbody .ui-state-default{align-items:center;border-radius:50%;display:inline-flex;height:30px;justify-content:center;width:30px}.kirki-datepicker-popup .ui-datepicker-calendar tbody .ui-state-default:active,.kirki-datepicker-popup .ui-datepicker-calendar tbody .ui-state-default:hover{background-color:#eee}.kirki-datepicker-popup .ui-datepicker-calendar tbody .ui-state-active,.kirki-datepicker-popup .ui-datepicker-calendar tbody .ui-state-default:focus{background-color:#2271b1;color:#fff}.kirki-datepicker-popup .ui-datepicker-calendar tbody .ui-state-active:active,.kirki-datepicker-popup .ui-datepicker-calendar tbody .ui-state-active:focus,.kirki-datepicker-popup .ui-datepicker-calendar tbody .ui-state-active:hover{background-color:#2271b1}
+/*# sourceMappingURL=control.css.map */

functions/kirki/kirki-packages/control-date/dist/control.js

@@ -0,0 +1,2 @@
+wp.customize.controlConstructor["kirki-date"]=wp.customize.kirkiDynamicControl.extend({handleWidth:function(e){document.querySelector("#kirki-style-datepicker").innerHTML=".kirki-datepicker-popup {width: "+e.clientWidth.toString()+"px;}"},initKirkiControl:function(e){var t;t=(e=e||this).selector+" input.datepicker";var i=document.querySelector("#kirki-style-datepicker");i||((i=document.createElement("style")).id="kirki-style-datepicker",document.head.appendChild(i)),jQuery(t).datepicker({dateFormat:"yy-mm-dd",duration:200,beforeShow:function(t,i){i.dpDiv[0].classList.add("kirki-datepicker-popup"),e.handleWidth(t)}}),this.container.on("change keyup paste","input.datepicker",(function(){e.setting.set(jQuery(this).val())}))}});
+//# sourceMappingURL=control.js.map

functions/kirki/kirki-packages/control-date/dist/control.js.map

@@ -0,0 +1 @@
+{"mappings":"AAEAA,GAAGC,UAAUC,mBAAkB,cAAiBF,GAAGC,UAAUE,oBAAoBC,OAAM,CAEtFC,YAAW,SAAGC,GACEC,SAASC,cAAa,2BAC5BC,UAAS,mCAAwCH,EAAMI,YAAYC,WAAQ,QAGrFC,iBAAgB,SAAYC,GAC3B,IAAIC,EAGJA,GADAD,EAAUA,GAAOE,MACED,SAAQ,oBAE3B,IAAIE,EAAWT,SAASC,cAAa,2BAEhCQ,KACJA,EAAWT,SAASU,cAAa,UACxBC,GAAE,yBACXX,SAASY,KAAKC,YAAYJ,IAI3BK,OAAOP,GAAUQ,WAAU,CAC1BC,WAAU,WACVC,SAAU,IACVC,WAAU,SAAYnB,EAAOoB,GAC5BA,EAAKC,MAAM,GAAGC,UAAUC,IAAG,0BAC3BhB,EAAQR,YAAYC,WAKjBwB,UAAUC,GAAE,qBAAqB,oBAAoB,WACzDlB,EAAQmB,QAAQC,IAAIZ,OAAMN,MAAOmB","sources":["src/control.js"],"sourcesContent":["import \"./control.scss\";\n\nwp.customize.controlConstructor['kirki-date'] = wp.customize.kirkiDynamicControl.extend({\n\n\thandleWidth: (input) => {\n\t\tvar styleTag = document.querySelector('#kirki-style-datepicker');\n\t\tstyleTag.innerHTML = '.kirki-datepicker-popup {width: ' + input.clientWidth.toString() + 'px;}';\n\t},\n\n\tinitKirkiControl: function (control) {\n\t\tvar selector;\n\n\t\tcontrol = control || this;\n\t\tselector = control.selector + ' input.datepicker';\n\n\t\tvar styleTag = document.querySelector('#kirki-style-datepicker');\n\n\t\tif (!styleTag) {\n\t\t\tstyleTag = document.createElement('style');\n\t\t\tstyleTag.id = 'kirki-style-datepicker';\n\t\t\tdocument.head.appendChild(styleTag);\n\t\t}\n\n\t\t// Init the datepicker.\n\t\tjQuery(selector).datepicker({\n\t\t\tdateFormat: 'yy-mm-dd',\n\t\t\tduration: 200,\n\t\t\tbeforeShow: function (input, inst) {\n\t\t\t\tinst.dpDiv[0].classList.add('kirki-datepicker-popup');\n\t\t\t\tcontrol.handleWidth(input);\n\t\t\t}\n\t\t});\n\n\t\t// Save the changes\n\t\tthis.container.on('change keyup paste', 'input.datepicker', function () {\n\t\t\tcontrol.setting.set(jQuery(this).val());\n\t\t});\n\t}\n});\n"],"names":["wp","customize","controlConstructor","kirkiDynamicControl","extend","handleWidth","input","document","querySelector","innerHTML","clientWidth","toString","initKirkiControl","control","selector","this","styleTag","createElement","id","head","appendChild","jQuery","datepicker","dateFormat","duration","beforeShow","inst","dpDiv","classList","add","container","on","setting","set","val"],"version":3,"file":"control.js.map"}

functions/kirki/kirki-packages/control-date/src/Control/Date.php

@@ -0,0 +1,82 @@
+<?php
+/**
+ * Customizer Control: kirki-date.
+ *
+ * @package   kirki-framework/control-date
+ * @copyright Copyright (c) 2023, Themeum
+ * @license   https://opensource.org/licenses/MIT
+ * @since     1.0
+ */
+
+namespace Kirki\Control;
+
+use Kirki\URL;
+use Kirki\Control\Base;
+
+/**
+ * A simple date control, using jQuery UI.
+ *
+ * @since 1.0
+ */
+class Date extends Base {
+
+	/**
+	 * The control type.
+	 *
+	 * @access public
+	 * @since 1.0
+	 * @var string
+	 */
+	public $type = 'kirki-date';
+
+	/**
+	 * The version. Used in scripts & styles for cache-busting.
+	 *
+	 * @static
+	 * @access public
+	 * @since 1.0
+	 * @var string
+	 */
+	public static $control_ver = '1.0';
+
+	/**
+	 * Enqueue control related scripts/styles.
+	 *
+	 * @access public
+	 * @since 1.0
+	 * @return void
+	 */
+	public function enqueue() {
+		parent::enqueue();
+
+		// Enqueue the script.
+		wp_enqueue_script( 'kirki-control-date', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/control.js' ), [ 'jquery', 'customize-base', 'kirki-control-base', 'jquery-ui-datepicker' ], self::$control_ver, false );
+
+		// Enqueue the style.
+		wp_enqueue_style( 'kirki-control-date-style', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/control.css' ), [], self::$control_ver );
+	}
+
+	/**
+	 * An Underscore (JS) template for this control's content (but not its container).
+	 *
+	 * Class variables for this control class are available in the `data` JS object;
+	 * export custom variables by overriding {@see WP_Customize_Control::to_json()}.
+	 *
+	 * @see WP_Customize_Control::print_template()
+	 *
+	 * @access protected
+	 * @since 1.0
+	 * @return void
+	 */
+	protected function content_template() {
+		?>
+		<label>
+			<# if ( data.label ) { #><span class="customize-control-title">{{{ data.label }}}</span><# } #>
+			<# if ( data.description ) { #><span class="description customize-control-description">{{{ data.description }}}</span><# } #>
+			<div class="customize-control-content">
+				<input {{{ data.inputAttrs }}} class="datepicker" type="text" id="{{ data.id }}" value="{{ data.value }}" {{{ data.link }}} />
+			</div>
+		</label>
+		<?php
+	}
+}

functions/kirki/kirki-packages/control-date/src/Field/Date.php

@@ -0,0 +1,86 @@
+<?php
+/**
+ * Override field methods
+ *
+ * @package   kirki-framework/control-date
+ * @copyright Copyright (c) 2023, Themeum
+ * @license   https://opensource.org/licenses/MIT
+ * @since     1.0
+ */
+
+namespace Kirki\Field;
+
+use Kirki\Field;
+
+/**
+ * Field overrides.
+ *
+ * @since 1.0
+ */
+class Date extends Field {
+
+	/**
+	 * The field type.
+	 *
+	 * @access public
+	 * @since 1.0
+	 * @var string
+	 */
+	public $type = 'kirki-date';
+
+	/**
+	 * The control class-name.
+	 *
+	 * @access protected
+	 * @since 0.1
+	 * @var string
+	 */
+	protected $control_class = '\Kirki\Control\Date';
+
+	/**
+	 * Whether we should register the control class for JS-templating or not.
+	 *
+	 * @access protected
+	 * @since 0.1
+	 * @var bool
+	 */
+	protected $control_has_js_template = true;
+
+	/**
+	 * Filter arguments before creating the setting.
+	 *
+	 * @access public
+	 * @since 0.1
+	 * @param array                $args         The field arguments.
+	 * @param WP_Customize_Manager $wp_customize The customizer instance.
+	 * @return array
+	 */
+	public function filter_setting_args( $args, $wp_customize ) {
+		if ( $args['settings'] === $this->args['settings'] ) {
+			$args = parent::filter_setting_args( $args, $wp_customize );
+
+			// Set the sanitize-callback if none is defined.
+			if ( ! isset( $args['sanitize_callback'] ) || ! $args['sanitize_callback'] ) {
+				$args['sanitize_callback'] = 'sanitize_text_field';
+			}
+		}
+		return $args;
+	}
+
+	/**
+	 * Filter arguments before creating the control.
+	 *
+	 * @access public
+	 * @since 0.1
+	 * @param array                $args         The field arguments.
+	 * @param WP_Customize_Manager $wp_customize The customizer instance.
+	 * @return array
+	 */
+	public function filter_control_args( $args, $wp_customize ) {
+		if ( $args['settings'] === $this->args['settings'] ) {
+			$args         = parent::filter_control_args( $args, $wp_customize );
+			$args['type'] = 'kirki-date';
+		}
+		return $args;
+	}
+}

functions/kirki/kirki-packages/control-date/src/control.js

@@ -0,0 +1,39 @@
+import "./control.scss";
+
+wp.customize.controlConstructor['kirki-date'] = wp.customize.kirkiDynamicControl.extend({
+
+	handleWidth: (input) => {
+		var styleTag = document.querySelector('#kirki-style-datepicker');
+		styleTag.innerHTML = '.kirki-datepicker-popup {width: ' + input.clientWidth.toString() + 'px;}';
+	},
+
+	initKirkiControl: function (control) {
+		var selector;
+
+		control = control || this;
+		selector = control.selector + ' input.datepicker';
+
+		var styleTag = document.querySelector('#kirki-style-datepicker');
+
+		if (!styleTag) {
+			styleTag = document.createElement('style');
+			styleTag.id = 'kirki-style-datepicker';
+			document.head.appendChild(styleTag);
+		}
+
+		// Init the datepicker.
+		jQuery(selector).datepicker({
+			dateFormat: 'yy-mm-dd',
+			duration: 200,
+			beforeShow: function (input, inst) {
+				inst.dpDiv[0].classList.add('kirki-datepicker-popup');
+				control.handleWidth(input);
+			}
+		});
+
+		// Save the changes
+		this.container.on('change keyup paste', 'input.datepicker', function () {
+			control.setting.set(jQuery(this).val());
+		});
+	}
+});

functions/kirki/kirki-packages/control-date/src/control.scss

@@ -0,0 +1,153 @@
+$date-hover-color: #eee;
+$date-active-color: #2271b1;
+
+.kirki-datepicker-popup {
+  padding-bottom: 10px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  box-shadow: rgba(0, 0, 0, 0.09) 0 12px 15px 0;
+  border-radius: 6px;
+  z-index: 500001 !important;
+  margin-top: 15px;
+  overflow: hidden;
+  max-width: 275px;
+
+  .ui-datepicker-header {
+    padding: 10px;
+    background-color: $date-hover-color;
+
+    .ui-datepicker-next,
+    .ui-datepicker-prev {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      cursor: pointer;
+      overflow: hidden;
+      transition: all .2s;
+
+      &:hover, &:active, &:focus {
+        color: #fff;
+        background-color: $date-active-color;
+      }
+
+      &:after,
+      &:before {
+        font-family: dashicons;
+      }
+
+      .ui-icon {
+        display: none;
+      }
+    }
+
+    .ui-datepicker-prev {
+      left: 10px;
+
+      &:before {
+        content: "\f341";
+      }
+    }
+
+    .ui-datepicker-next {
+      right: 10px;
+
+      &:after {
+        content: "\f345";
+      }
+    }
+
+    .ui-datepicker-title {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      justify-content: center;
+      height: 30px;
+      font-size: 16px;
+      text-align: center;
+    }
+  }
+
+  .ui-datepicker-calendar {
+    border-collapse: collapse;
+    padding-bottom: 20px;
+    width: 100%;
+
+    thead {
+      background-color: #ddd;
+      padding-left: 5px;
+      padding-right: 5px;
+
+      th {
+        padding-top: 5px;
+        padding-bottom: 5px;
+        text-align: center;
+        font-weight: 600;
+        font-size: 13px;
+      }
+    }
+
+    tbody {
+      padding: 5px;
+
+      td {
+        padding: 2px;
+        text-align: center;
+      }
+
+      a {
+        text-decoration: none;
+        color: #333;
+      }
+
+      .ui-datepicker-today {
+        .ui-state-default {
+          background-color: $date-hover-color;
+        }
+
+        .ui-state-active {
+          background-color: $date-active-color;
+
+          &:hover,
+          &:active,
+          &:focus {
+            background-color: $date-active-color;
+          }
+        }
+      }
+
+      .ui-state-default {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+
+        &:hover,
+        &:active {
+          background-color: $date-hover-color;
+        }
+
+        &:focus {
+          color: #fff;
+          background-color: $date-active-color;
+        }
+      }
+
+      .ui-state-active {
+        background-color: $date-active-color;
+        color: #fff;
+
+        &:hover,
+        &:active,
+        &:focus {
+          background-color: $date-active-color;
+        }
+      }
+    }
+  }
+}