@kyndryl-design-system/shidoka-applications 1.41.2 → 1.42.0

package/common/scss/form-input.scss

@@ -127,3 +127,14 @@ textarea {
     margin-right: 8px;
   }
 }
+
+.description-text {
+  @include typography.type-body-02;
+  color: var(--kd-color-text-primary);
+  margin-top: -4px;
+  margin-bottom: 8px;
+
+  [disabled] & {
+    color: var(--kd-color-text-disabled);
+  }
+}

package/components/reusable/checkbox/checkboxGroup.d.ts

@@ -10,6 +10,7 @@ declare const CheckboxGroup_base: (new (...args: any[]) => import("../../../comm
  * @fires on-limit-toggle - Captures the show more/less click and emits the expanded state.
  * @slot unnamed - Slot for individual checkboxes.
  * @slot label - Slot for label text.
+ * @slot description - Slot for description text.
  */
 export declare class CheckboxGroup extends CheckboxGroup_base {
     static styles: any;

package/components/reusable/checkbox/checkboxGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,cAAc,CAAC;AACtB,OAAO,YAAY,CAAC;AACpB,OAAO,2DAA2D,CAAC;;AAYnE;;;;;;;GAOG;AACH,qBACa,aAAc,SAAQ,kBAAqB;IACtD,OAAgB,MAAM,MAAqB;IAE3C,sCAAsC;IAE7B,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAM;IAEhC,yCAAyC;IAEzC,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,UAAS;IAEjB,uCAAuC;IAEvC,UAAU,UAAS;IAEnB,4DAA4D;IAE5D,SAAS,UAAS;IAElB;;OAEG;IAEH,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,sBAAsB,UAAS;IAE/B,4CAA4C;IAE5C,UAAU,UAAS;IAEnB,6DAA6D;IAE7D,UAAU,UAAS;IAEnB;;OAEG;IAEH,UAAU,SAAM;IAEhB,4DAA4D;IAE5D,eAAe,UAAS;IAExB;;OAEG;IAEH,WAAW,SAAK;IAEhB;;OAEG;IAEH,aAAa,UAAS;IAEtB,iCAAiC;IAEjC,WAAW;;;;;;;MAAuB;IAElC;;OAEG;IAEH,YAAY;;;;;;;MAAuB;IAUnC,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,CAAM;IAG5B,kBAAkB,EAAE,KAAK,CAAC,GAAG,CAAC,CAAM;IAE3B,MAAM;IA2FN,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,OAAO,CAAC,YAAY,EAAE,GAAG;IAyElC,OAAO,CAAC,SAAS;IA+BjB,OAAO,CAAC,qBAAqB;IA6B7B,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,aAAa;IAuCrB,OAAO,CAAC,eAAe;IAuBvB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,qBAAqB;IAiEpB,iBAAiB;IAiBjB,oBAAoB;CAc9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,aAAa,CAAC;KACrC;CACF"}
+{"version":3,"file":"checkboxGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,cAAc,CAAC;AACtB,OAAO,YAAY,CAAC;AACpB,OAAO,2DAA2D,CAAC;;AAYnE;;;;;;;;GAQG;AACH,qBACa,aAAc,SAAQ,kBAAqB;IACtD,OAAgB,MAAM,MAAqB;IAE3C,sCAAsC;IAE7B,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAM;IAEhC,yCAAyC;IAEzC,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,UAAS;IAEjB,uCAAuC;IAEvC,UAAU,UAAS;IAEnB,4DAA4D;IAE5D,SAAS,UAAS;IAElB;;OAEG;IAEH,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,sBAAsB,UAAS;IAE/B,4CAA4C;IAE5C,UAAU,UAAS;IAEnB,6DAA6D;IAE7D,UAAU,UAAS;IAEnB;;OAEG;IAEH,UAAU,SAAM;IAEhB,4DAA4D;IAE5D,eAAe,UAAS;IAExB;;OAEG;IAEH,WAAW,SAAK;IAEhB;;OAEG;IAEH,aAAa,UAAS;IAEtB,iCAAiC;IAEjC,WAAW;;;;;;;MAAuB;IAElC;;OAEG;IAEH,YAAY;;;;;;;MAAuB;IAUnC,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,CAAM;IAG5B,kBAAkB,EAAE,KAAK,CAAC,GAAG,CAAC,CAAM;IAE3B,MAAM;IA6FN,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,OAAO,CAAC,YAAY,EAAE,GAAG;IAyElC,OAAO,CAAC,SAAS;IA+BjB,OAAO,CAAC,qBAAqB;IA6B7B,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,aAAa;IAuCrB,OAAO,CAAC,eAAe;IAuBvB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,qBAAqB;IAiEpB,iBAAiB;IAiBjB,oBAAoB;CAc9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,aAAa,CAAC;KACrC;CACF"}

package/components/reusable/checkbox/checkboxGroup.js

@@ -250,6 +250,44 @@ textarea::placeholder {
   margin-right: 8px;
 }
 
+.description-text {
+  font-family: var(--kd-font-family-secondary);
+  font-size: var(--kd-font-size-body-2-sm);
+  line-height: var(--kd-line-height-body-2-sm);
+  font-weight: var(--kd-font-weight-regular);
+  letter-spacing: var(--kd-letter-spacing-4);
+  color: var(--kd-color-text-primary);
+  margin-top: -4px;
+  margin-bottom: 8px;
+}
+@media (min-width: 42rem) {
+  .description-text {
+    font-size: var(--kd-font-size-body-2-md);
+    line-height: var(--kd-line-height-body-2-md);
+  }
+}
+@media (min-width: 74rem) {
+  .description-text {
+    font-size: var(--kd-font-size-body-2-lg);
+    line-height: var(--kd-line-height-body-2-lg);
+  }
+}
+@media (min-width: 82rem) {
+  .description-text {
+    font-size: var(--kd-font-size-body-2-xlg);
+    line-height: var(--kd-line-height-body-2-xlg);
+  }
+}
+@media (min-width: 99rem) {
+  .description-text {
+    font-size: var(--kd-font-size-body-2-max);
+    line-height: var(--kd-line-height-body-2-max);
+  }
+}
+[disabled] .description-text {
+  color: var(--kd-color-text-disabled);
+}
+
 :host {
   display: block;
 }
@@ -309,7 +347,7 @@ fieldset {
 
 .error {
   order: 1;
-}`;const c={selectAll:"Select all",showMore:"Show more",showLess:"Show less",search:"Search",required:"Required",error:"Error"};let p=class extends(n(s)){constructor(){super(...arguments),this.value=[],this.required=!1,this.disabled=!1,this.horizontal=!1,this.selectAll=!1,this.selectAllChecked=!1,this.selectAllIndeterminate=!1,this.hideLegend=!1,this.filterable=!1,this.searchTerm="",this.limitCheckboxes=!1,this._limitCount=4,this.limitRevealed=!1,this.textStrings=c,this._textStrings=c,this.checkboxes=[],this.filteredCheckboxes=[]}render(){return r`
+}`;const c={selectAll:"Select all",showMore:"Show more",showLess:"Show less",search:"Search",required:"Required",error:"Error"};let m=class extends(n(s)){constructor(){super(...arguments),this.value=[],this.required=!1,this.disabled=!1,this.horizontal=!1,this.selectAll=!1,this.selectAllChecked=!1,this.selectAllIndeterminate=!1,this.hideLegend=!1,this.filterable=!1,this.searchTerm="",this.limitCheckboxes=!1,this._limitCount=4,this.limitRevealed=!1,this.textStrings=c,this._textStrings=c,this.checkboxes=[],this.filteredCheckboxes=[]}render(){return r`
       <div>
         ${this.filterable?r`
               <kyn-text-input
@@ -339,7 +377,9 @@ fieldset {
                 `:null}
             <slot name="label"></slot>
           </legend>
-
+          <div class="description-text">
+            <slot name="description"></slot>
+          </div>
           ${this._isInvalid?r`
                 <div class="error">
                   <kd-icon
@@ -382,5 +422,5 @@ fieldset {
           </div>
         </fieldset>
       </div>
-    `}willUpdate(e){e.has("textStrings")&&(this._textStrings=a(c,this.textStrings))}updated(e){if(this._onUpdated(e),e.has("name")&&this.checkboxes.forEach((e=>{e.name=this.name})),e.has("value")){this.checkboxes.forEach((e=>{e.checked=this.value.includes(e.value)}));const e=this.checkboxes.filter((e=>e.checked)).length;this.selectAllChecked=this.checkboxes.length>0&&e===this.checkboxes.length,this.selectAllIndeterminate=e<this.checkboxes.length&&e>0;const t=new FormData;this.value.forEach((e=>{t.append(this.name,e)})),this._internals.setFormValue(t)}e.has("required")&&this.checkboxes.forEach((e=>{e.required=this.required})),e.has("disabled")&&void 0!==e.get("disabled")&&this.checkboxes.forEach((e=>{e.disabled=this.disabled})),(e.has("invalidText")||e.has("internalValidationMsg"))&&this.checkboxes.forEach((e=>{e.invalid=this._isInvalid})),e.has("limitCheckboxes")&&void 0!==e.get("limitCheckboxes")&&this._toggleRevealed(!1)}_validate(e,t){const i={customError:""!==this.invalidText,valueMissing:this.required&&!this.value.length},o=this.required&&!this.value.length?"A selection is required.":"",l=""!==this.invalidText?this.invalidText:o;this._internals.setValidity(i,l,this.checkboxes[0]),e&&(this._internalValidationMsg=o),t&&this._internals.reportValidity()}_handleCheckboxChange(e){const t=e.detail.value;if("selectAll"===t)e.detail.checked?this.value=this.checkboxes.filter((e=>!e.disabled)).map((e=>e.value)):this.value=[];else{const e=[...this.value];if(e.includes(t)){const i=e.indexOf(t);e.splice(i,1)}else e.push(t);this.value=e}this._validate(!0,!1),this._emitChangeEvent()}_emitChangeEvent(){const e=new CustomEvent("on-checkbox-group-change",{detail:{value:this.value}});this.dispatchEvent(e)}_handleFilter(e){let t=0;this.searchTerm=e.detail.value.toLowerCase(),this.filteredCheckboxes=this.checkboxes.filter((e=>e.textContent.toLowerCase().includes(this.searchTerm))),this.checkboxes.forEach((e=>{const i=e.textContent.toLowerCase();this.limitCheckboxes&&!this.limitRevealed?i.includes(this.searchTerm)&&t<this._limitCount?(e.style.display="block",t++):e.style.display="none":i.includes(this.searchTerm)?e.style.display="block":e.style.display="none"}));const i=new CustomEvent("on-search",{detail:{searchTerm:this.searchTerm}});this.dispatchEvent(i)}_toggleRevealed(e){this.limitRevealed=e,this.filteredCheckboxes.forEach(((e,t)=>{!this.limitCheckboxes||this.limitRevealed||t<this._limitCount?e.style.display="block":e.style.display="none"}));const t=new CustomEvent("on-limit-toggle",{detail:{expanded:this.limitRevealed}});this.dispatchEvent(t)}_handleSlotChange(){this.checkboxes=Array.from(this.querySelectorAll("kyn-checkbox")),this.filteredCheckboxes=this.checkboxes,this._updateChildren(),this._toggleRevealed(this.limitRevealed),this.requestUpdate()}_updateChildren(){this.checkboxes.forEach((e=>{e.disabled=this.disabled,e.checked=this.value.includes(e.value)}));const e=this.checkboxes.filter((e=>e.checked)).length;this.selectAllChecked=this.checkboxes.length>0&&e===this.checkboxes.length,this.selectAllIndeterminate=e<this.checkboxes.length&&e>0}_handleSubgroupChange(e){const t=[...this.value],{isParent:i,parentChecked:o,parentValue:l,value:r,checked:s,childValues:a}=e.detail;if(i)if(s)t.includes(r)||t.push(r),a.forEach((e=>{t.includes(e)||t.push(e)}));else{const e=t.indexOf(r);t.splice(e,1),a.forEach((e=>{const i=t.indexOf(e);-1!==i&&t.splice(i,1)}))}else{if(s)t.includes(r)||t.push(r);else{const e=t.indexOf(r);-1!==e&&t.splice(e,1)}if(o)t.includes(l)||t.push(l);else{const e=t.indexOf(l);-1!==e&&t.splice(e,1)}}console.log(t),this.value=t,this._validate(!0,!1),this._emitChangeEvent()}connectedCallback(){super.connectedCallback(),this._onConnected(),this.addEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.addEventListener("on-checkbox-subgroup-change",(e=>this._handleSubgroupChange(e)))}disconnectedCallback(){this._onDisconnected(),this.removeEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.removeEventListener("on-checkbox-subgroup-change",(e=>this._handleSubgroupChange(e))),super.disconnectedCallback()}};p.styles=h,e([t({type:Array})],p.prototype,"value",void 0),e([t({type:Boolean})],p.prototype,"required",void 0),e([t({type:Boolean})],p.prototype,"disabled",void 0),e([t({type:Boolean})],p.prototype,"horizontal",void 0),e([t({type:Boolean})],p.prototype,"selectAll",void 0),e([t({type:Boolean})],p.prototype,"selectAllChecked",void 0),e([t({type:Boolean})],p.prototype,"selectAllIndeterminate",void 0),e([t({type:Boolean})],p.prototype,"hideLegend",void 0),e([t({type:Boolean})],p.prototype,"filterable",void 0),e([i()],p.prototype,"searchTerm",void 0),e([t({type:Boolean})],p.prototype,"limitCheckboxes",void 0),e([i()],p.prototype,"_limitCount",void 0),e([i()],p.prototype,"limitRevealed",void 0),e([t({type:Object})],p.prototype,"textStrings",void 0),e([i()],p.prototype,"_textStrings",void 0),e([i()],p.prototype,"checkboxes",void 0),e([i()],p.prototype,"filteredCheckboxes",void 0),p=e([o("kyn-checkbox-group")],p);export{p as CheckboxGroup};
+    `}willUpdate(e){e.has("textStrings")&&(this._textStrings=a(c,this.textStrings))}updated(e){if(this._onUpdated(e),e.has("name")&&this.checkboxes.forEach((e=>{e.name=this.name})),e.has("value")){this.checkboxes.forEach((e=>{e.checked=this.value.includes(e.value)}));const e=this.checkboxes.filter((e=>e.checked)).length;this.selectAllChecked=this.checkboxes.length>0&&e===this.checkboxes.length,this.selectAllIndeterminate=e<this.checkboxes.length&&e>0;const t=new FormData;this.value.forEach((e=>{t.append(this.name,e)})),this._internals.setFormValue(t)}e.has("required")&&this.checkboxes.forEach((e=>{e.required=this.required})),e.has("disabled")&&void 0!==e.get("disabled")&&this.checkboxes.forEach((e=>{e.disabled=this.disabled})),(e.has("invalidText")||e.has("internalValidationMsg"))&&this.checkboxes.forEach((e=>{e.invalid=this._isInvalid})),e.has("limitCheckboxes")&&void 0!==e.get("limitCheckboxes")&&this._toggleRevealed(!1)}_validate(e,t){const i={customError:""!==this.invalidText,valueMissing:this.required&&!this.value.length},o=this.required&&!this.value.length?"A selection is required.":"",l=""!==this.invalidText?this.invalidText:o;this._internals.setValidity(i,l,this.checkboxes[0]),e&&(this._internalValidationMsg=o),t&&this._internals.reportValidity()}_handleCheckboxChange(e){const t=e.detail.value;if("selectAll"===t)e.detail.checked?this.value=this.checkboxes.filter((e=>!e.disabled)).map((e=>e.value)):this.value=[];else{const e=[...this.value];if(e.includes(t)){const i=e.indexOf(t);e.splice(i,1)}else e.push(t);this.value=e}this._validate(!0,!1),this._emitChangeEvent()}_emitChangeEvent(){const e=new CustomEvent("on-checkbox-group-change",{detail:{value:this.value}});this.dispatchEvent(e)}_handleFilter(e){let t=0;this.searchTerm=e.detail.value.toLowerCase(),this.filteredCheckboxes=this.checkboxes.filter((e=>e.textContent.toLowerCase().includes(this.searchTerm))),this.checkboxes.forEach((e=>{const i=e.textContent.toLowerCase();this.limitCheckboxes&&!this.limitRevealed?i.includes(this.searchTerm)&&t<this._limitCount?(e.style.display="block",t++):e.style.display="none":i.includes(this.searchTerm)?e.style.display="block":e.style.display="none"}));const i=new CustomEvent("on-search",{detail:{searchTerm:this.searchTerm}});this.dispatchEvent(i)}_toggleRevealed(e){this.limitRevealed=e,this.filteredCheckboxes.forEach(((e,t)=>{!this.limitCheckboxes||this.limitRevealed||t<this._limitCount?e.style.display="block":e.style.display="none"}));const t=new CustomEvent("on-limit-toggle",{detail:{expanded:this.limitRevealed}});this.dispatchEvent(t)}_handleSlotChange(){this.checkboxes=Array.from(this.querySelectorAll("kyn-checkbox")),this.filteredCheckboxes=this.checkboxes,this._updateChildren(),this._toggleRevealed(this.limitRevealed),this.requestUpdate()}_updateChildren(){this.checkboxes.forEach((e=>{e.disabled=this.disabled,e.checked=this.value.includes(e.value)}));const e=this.checkboxes.filter((e=>e.checked)).length;this.selectAllChecked=this.checkboxes.length>0&&e===this.checkboxes.length,this.selectAllIndeterminate=e<this.checkboxes.length&&e>0}_handleSubgroupChange(e){const t=[...this.value],{isParent:i,parentChecked:o,parentValue:l,value:r,checked:s,childValues:a}=e.detail;if(i)if(s)t.includes(r)||t.push(r),a.forEach((e=>{t.includes(e)||t.push(e)}));else{const e=t.indexOf(r);t.splice(e,1),a.forEach((e=>{const i=t.indexOf(e);-1!==i&&t.splice(i,1)}))}else{if(s)t.includes(r)||t.push(r);else{const e=t.indexOf(r);-1!==e&&t.splice(e,1)}if(o)t.includes(l)||t.push(l);else{const e=t.indexOf(l);-1!==e&&t.splice(e,1)}}console.log(t),this.value=t,this._validate(!0,!1),this._emitChangeEvent()}connectedCallback(){super.connectedCallback(),this._onConnected(),this.addEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.addEventListener("on-checkbox-subgroup-change",(e=>this._handleSubgroupChange(e)))}disconnectedCallback(){this._onDisconnected(),this.removeEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.removeEventListener("on-checkbox-subgroup-change",(e=>this._handleSubgroupChange(e))),super.disconnectedCallback()}};m.styles=h,e([t({type:Array})],m.prototype,"value",void 0),e([t({type:Boolean})],m.prototype,"required",void 0),e([t({type:Boolean})],m.prototype,"disabled",void 0),e([t({type:Boolean})],m.prototype,"horizontal",void 0),e([t({type:Boolean})],m.prototype,"selectAll",void 0),e([t({type:Boolean})],m.prototype,"selectAllChecked",void 0),e([t({type:Boolean})],m.prototype,"selectAllIndeterminate",void 0),e([t({type:Boolean})],m.prototype,"hideLegend",void 0),e([t({type:Boolean})],m.prototype,"filterable",void 0),e([i()],m.prototype,"searchTerm",void 0),e([t({type:Boolean})],m.prototype,"limitCheckboxes",void 0),e([i()],m.prototype,"_limitCount",void 0),e([i()],m.prototype,"limitRevealed",void 0),e([t({type:Object})],m.prototype,"textStrings",void 0),e([i()],m.prototype,"_textStrings",void 0),e([i()],m.prototype,"checkboxes",void 0),e([i()],m.prototype,"filteredCheckboxes",void 0),m=e([o("kyn-checkbox-group")],m);export{m as CheckboxGroup};
 //# sourceMappingURL=checkboxGroup.js.map

package/components/reusable/checkbox/checkboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxGroup.js","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { deepmerge } from 'deepmerge-ts';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport CheckboxGroupScss from './checkboxGroup.scss';\n\nimport '../textInput';\nimport './checkbox';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/16';\n\nconst _defaultTextStrings = {\n  selectAll: 'Select all',\n  showMore: 'Show more',\n  showLess: 'Show less',\n  search: 'Search',\n  required: 'Required',\n  error: 'Error',\n};\n\n/**\n * Checkbox group container.\n * @fires on-checkbox-group-change - Captures the change event and emits the selected values.\n * @fires on-search - Captures the search input event and emits the search term.\n * @fires on-limit-toggle - Captures the show more/less click and emits the expanded state.\n * @slot unnamed - Slot for individual checkboxes.\n * @slot label - Slot for label text.\n */\n@customElement('kyn-checkbox-group')\nexport class CheckboxGroup extends FormMixin(LitElement) {\n  static override styles = CheckboxGroupScss;\n\n  /** Checkbox group selected values. */\n  @property({ type: Array })\n  override value: Array<any> = [];\n\n  /** Makes a single selection required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Checkbox group disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Checkbox group horizontal style. */\n  @property({ type: Boolean })\n  horizontal = false;\n\n  /** Adds a \"Select All\" checkbox to the top of the group. */\n  @property({ type: Boolean })\n  selectAll = false;\n\n  /** Is \"Select All\" box checked.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllChecked = false;\n\n  /** Is \"Select All\" indeterminate.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllIndeterminate = false;\n\n  /** Hide the group legend/label visually. */\n  @property({ type: Boolean })\n  hideLegend = false;\n\n  /** Adds a search input to enable filtering of checkboxes. */\n  @property({ type: Boolean })\n  filterable = false;\n\n  /** Filter text input value.\n   * @internal\n   */\n  @state()\n  searchTerm = '';\n\n  /** Limits visible checkboxes behind a \"Show all\" button. */\n  @property({ type: Boolean })\n  limitCheckboxes = false;\n\n  /** Number of checkboxes visible when limited.\n   * @internal\n   */\n  @state()\n  _limitCount = 4;\n\n  /** Checkbox limit visibility.\n   * @internal\n   */\n  @state()\n  limitRevealed = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = _defaultTextStrings;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  _textStrings = _defaultTextStrings;\n\n  // /**\n  //  * Queries for slotted checkboxes.\n  //  * @ignore\n  //  */\n  // @queryAssignedElements()\n  // checkboxes!: Array<any>;\n\n  @state()\n  checkboxes: Array<any> = [];\n\n  @state()\n  filteredCheckboxes: Array<any> = [];\n\n  override render() {\n    return html`\n      <div>\n        ${this.filterable\n          ? html`\n              <kyn-text-input\n                class=\"search\"\n                type=\"search\"\n                size=\"sm\"\n                placeholder=${this._textStrings.search}\n                hideLabel\n                value=${this.searchTerm}\n                ?disabled=${this.disabled}\n                @on-input=${(e: Event) => this._handleFilter(e)}\n              >\n                ${this._textStrings.search}\n              </kyn-text-input>\n            `\n          : null}\n\n        <fieldset ?disabled=${this.disabled}>\n          <legend class=\"label-text ${this.hideLegend ? 'sr-only' : ''}\">\n            ${this.required\n              ? html`\n                  <abbr\n                    class=\"required\"\n                    title=${this._textStrings.required}\n                    aria-label=${this._textStrings.required}\n                  >\n                    *\n                  </abbr>\n                `\n              : null}\n            <slot name=\"label\"></slot>\n          </legend>\n\n          ${this._isInvalid\n            ? html`\n                <div class=\"error\">\n                  <kd-icon\n                    .icon=\"${errorIcon}\"\n                    title=${this._textStrings.error}\n                    aria-label=${this._textStrings.error}\n                  ></kd-icon>\n                  ${this.invalidText || this._internalValidationMsg}\n                </div>\n              `\n            : null}\n\n          <div class=\"${this.horizontal ? 'horizontal' : ''}\">\n            ${this.selectAll\n              ? html`\n                  <kyn-checkbox\n                    class=\"select-all\"\n                    value=\"selectAll\"\n                    ?checked=${this.selectAllChecked}\n                    ?indeterminate=${this.selectAllIndeterminate}\n                    ?required=${this.required}\n                    ?disabled=${this.disabled}\n                    ?invalid=${this.invalidText !== '' ||\n                    this._internalValidationMsg !== ''}\n                  >\n                    ${this._textStrings.selectAll}\n                  </kyn-checkbox>\n                `\n              : null}\n\n            <slot @slotchange=${this._handleSlotChange}></slot>\n\n            ${this.limitCheckboxes &&\n            this.filteredCheckboxes.length > this._limitCount\n              ? html`\n                  <button\n                    class=\"reveal-toggle\"\n                    @click=${() => this._toggleRevealed(!this.limitRevealed)}\n                  >\n                    ${this.limitRevealed\n                      ? this._textStrings.showLess\n                      : html`\n                          ${this._textStrings.showMore}\n                          (${this.filteredCheckboxes.length})\n                        `}\n                  </button>\n                `\n              : null}\n          </div>\n        </fieldset>\n      </div>\n    `;\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n    }\n  }\n\n  override updated(changedProps: any) {\n    // preserve FormMixin updated function\n    this._onUpdated(changedProps);\n\n    if (changedProps.has('name')) {\n      // set name for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.name = this.name;\n      });\n    }\n\n    if (changedProps.has('value')) {\n      // set checked state for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.checked = this.value.includes(checkbox.value);\n      });\n\n      const CheckedBoxesCount = this.checkboxes.filter(\n        (checkbox) => checkbox.checked\n      ).length;\n\n      // sync \"Select All\" checkbox state\n      this.selectAllChecked =\n        this.checkboxes.length > 0 &&\n        CheckedBoxesCount === this.checkboxes.length;\n\n      // sync \"Select All\" indeterminate state\n      this.selectAllIndeterminate =\n        CheckedBoxesCount < this.checkboxes.length && CheckedBoxesCount > 0;\n\n      // set form data value\n      const entries = new FormData();\n      this.value.forEach((value) => {\n        entries.append(this.name, value);\n      });\n      this._internals.setFormValue(entries);\n    }\n\n    if (changedProps.has('required')) {\n      // set required for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.required = this.required;\n      });\n    }\n\n    if (\n      changedProps.has('disabled') &&\n      changedProps.get('disabled') !== undefined\n    ) {\n      // set disabled for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.disabled = this.disabled;\n      });\n    }\n\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      // set invalid state for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.invalid = this._isInvalid;\n      });\n    }\n\n    if (\n      changedProps.has('limitCheckboxes') &&\n      changedProps.get('limitCheckboxes') !== undefined\n    ) {\n      this._toggleRevealed(false);\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // set validity flags\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing: this.required && !this.value.length,\n    };\n\n    // set validationMessage\n    const InternalMsg =\n      this.required && !this.value.length ? 'A selection is required.' : '';\n    const ValidationMessage =\n      this.invalidText !== '' ? this.invalidText : InternalMsg;\n\n    // set validity on custom element, anchor to first checkbox\n    this._internals.setValidity(\n      Validity,\n      ValidationMessage,\n      this.checkboxes[0]\n    );\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this._internalValidationMsg = InternalMsg;\n    }\n\n    // focus the first checkbox to show validity\n    if (report) {\n      this._internals.reportValidity();\n    }\n  }\n\n  private _handleCheckboxChange(e: any) {\n    const value = e.detail.value;\n\n    if (value === 'selectAll') {\n      if (e.detail.checked) {\n        this.value = this.checkboxes\n          .filter((checkbox) => !checkbox.disabled)\n          .map((checkbox) => {\n            return checkbox.value;\n          });\n      } else {\n        this.value = [];\n      }\n    } else {\n      const newValues = [...this.value];\n      if (newValues.includes(value)) {\n        const index = newValues.indexOf(value);\n        newValues.splice(index, 1);\n      } else {\n        newValues.push(value);\n      }\n      this.value = newValues;\n    }\n\n    this._validate(true, false);\n\n    this._emitChangeEvent();\n  }\n\n  private _emitChangeEvent() {\n    const event = new CustomEvent('on-checkbox-group-change', {\n      detail: { value: this.value },\n    });\n    this.dispatchEvent(event);\n  }\n\n  // override _handleFormdata = (e: any) => {\n  //   this.value.forEach((value) => {\n  //     e.formData.append(this.name, value);\n  //   });\n  // }\n\n  private _handleFilter(e: any) {\n    let visibleCount = 0;\n\n    this.searchTerm = e.detail.value.toLowerCase();\n\n    this.filteredCheckboxes = this.checkboxes.filter((checkboxEl) => {\n      return checkboxEl.textContent.toLowerCase().includes(this.searchTerm);\n    });\n\n    this.checkboxes.forEach((checkboxEl) => {\n      // get checkbox label text\n      const checkboxText = checkboxEl.textContent.toLowerCase();\n\n      // hide checkbox if no match to search term\n      if (this.limitCheckboxes && !this.limitRevealed) {\n        if (\n          checkboxText.includes(this.searchTerm) &&\n          visibleCount < this._limitCount\n        ) {\n          checkboxEl.style.display = 'block';\n          visibleCount++;\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      } else {\n        if (checkboxText.includes(this.searchTerm)) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n\n    const event = new CustomEvent('on-search', {\n      detail: { searchTerm: this.searchTerm },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _toggleRevealed(revealed: boolean) {\n    this.limitRevealed = revealed;\n\n    // this.searchTerm = '';\n\n    this.filteredCheckboxes.forEach((checkboxEl, index) => {\n      if (!this.limitCheckboxes || this.limitRevealed) {\n        checkboxEl.style.display = 'block';\n      } else {\n        if (index < this._limitCount) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n\n    const event = new CustomEvent('on-limit-toggle', {\n      detail: { expanded: this.limitRevealed },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleSlotChange() {\n    this.checkboxes = Array.from(this.querySelectorAll('kyn-checkbox'));\n    this.filteredCheckboxes = this.checkboxes;\n    this._updateChildren();\n    this._toggleRevealed(this.limitRevealed);\n    this.requestUpdate();\n  }\n\n  private _updateChildren() {\n    this.checkboxes.forEach((checkbox) => {\n      checkbox.disabled = this.disabled;\n      checkbox.checked = this.value.includes(checkbox.value);\n    });\n\n    const CheckedBoxesCount = this.checkboxes.filter(\n      (checkbox) => checkbox.checked\n    ).length;\n\n    // sync \"Select All\" checkbox state\n    this.selectAllChecked =\n      this.checkboxes.length > 0 &&\n      CheckedBoxesCount === this.checkboxes.length;\n\n    // sync \"Select All\" indeterminate state\n    this.selectAllIndeterminate =\n      CheckedBoxesCount < this.checkboxes.length && CheckedBoxesCount > 0;\n  }\n\n  private _handleSubgroupChange(e: any) {\n    const newValues = [...this.value];\n    const {\n      isParent,\n      parentChecked,\n      parentValue,\n      value,\n      checked,\n      childValues,\n    } = e.detail;\n\n    if (isParent) {\n      if (checked) {\n        if (!newValues.includes(value)) {\n          newValues.push(value);\n        }\n\n        childValues.forEach((value: string) => {\n          if (!newValues.includes(value)) {\n            newValues.push(value);\n          }\n        });\n      } else {\n        const index = newValues.indexOf(value);\n        newValues.splice(index, 1);\n\n        childValues.forEach((value: string) => {\n          const index = newValues.indexOf(value);\n          if (index !== -1) {\n            newValues.splice(index, 1);\n          }\n        });\n      }\n    } else {\n      if (checked) {\n        if (!newValues.includes(value)) {\n          newValues.push(value);\n        }\n      } else {\n        const index = newValues.indexOf(value);\n        if (index !== -1) {\n          newValues.splice(index, 1);\n        }\n      }\n\n      if (parentChecked) {\n        if (!newValues.includes(parentValue)) {\n          newValues.push(parentValue);\n        }\n      } else {\n        const index = newValues.indexOf(parentValue);\n        if (index !== -1) {\n          newValues.splice(index, 1);\n        }\n      }\n    }\n    console.log(newValues);\n\n    this.value = newValues;\n\n    this._validate(true, false);\n\n    this._emitChangeEvent();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // preserve FormMixin connectedCallback function\n    this._onConnected();\n\n    // capture child checkboxes change event\n    this.addEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    // capture subgroup change event\n    this.addEventListener('on-checkbox-subgroup-change', (e: any) =>\n      this._handleSubgroupChange(e)\n    );\n  }\n\n  override disconnectedCallback() {\n    // preserve FormMixin disconnectedCallback function\n    this._onDisconnected();\n\n    this.removeEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    this.removeEventListener('on-checkbox-subgroup-change', (e: any) =>\n      this._handleSubgroupChange(e)\n    );\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-checkbox-group': CheckboxGroup;\n  }\n}\n"],"names":["_defaultTextStrings","selectAll","showMore","showLess","search","required","error","CheckboxGroup","FormMixin","LitElement","constructor","this","value","disabled","horizontal","selectAllChecked","selectAllIndeterminate","hideLegend","filterable","searchTerm","limitCheckboxes","_limitCount","limitRevealed","textStrings","_textStrings","checkboxes","filteredCheckboxes","render","html","e","_handleFilter","_isInvalid","errorIcon","invalidText","_internalValidationMsg","_handleSlotChange","length","_toggleRevealed","willUpdate","changedProps","has","deepmerge","updated","_onUpdated","forEach","checkbox","name","checked","includes","CheckedBoxesCount","filter","entries","FormData","append","_internals","setFormValue","undefined","get","invalid","_validate","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","setValidity","reportValidity","_handleCheckboxChange","detail","map","newValues","index","indexOf","splice","push","_emitChangeEvent","event","CustomEvent","dispatchEvent","visibleCount","toLowerCase","checkboxEl","textContent","checkboxText","style","display","revealed","expanded","Array","from","querySelectorAll","_updateChildren","requestUpdate","_handleSubgroupChange","isParent","parentChecked","parentValue","childValues","console","log","connectedCallback","super","_onConnected","addEventListener","disconnectedCallback","_onDisconnected","removeEventListener","styles","CheckboxGroupScss","__decorate","property","type","prototype","Boolean","state","Object","customElement"],"mappings":"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"}
+{"version":3,"file":"checkboxGroup.js","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { deepmerge } from 'deepmerge-ts';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport CheckboxGroupScss from './checkboxGroup.scss';\n\nimport '../textInput';\nimport './checkbox';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/16';\n\nconst _defaultTextStrings = {\n  selectAll: 'Select all',\n  showMore: 'Show more',\n  showLess: 'Show less',\n  search: 'Search',\n  required: 'Required',\n  error: 'Error',\n};\n\n/**\n * Checkbox group container.\n * @fires on-checkbox-group-change - Captures the change event and emits the selected values.\n * @fires on-search - Captures the search input event and emits the search term.\n * @fires on-limit-toggle - Captures the show more/less click and emits the expanded state.\n * @slot unnamed - Slot for individual checkboxes.\n * @slot label - Slot for label text.\n * @slot description - Slot for description text.\n */\n@customElement('kyn-checkbox-group')\nexport class CheckboxGroup extends FormMixin(LitElement) {\n  static override styles = CheckboxGroupScss;\n\n  /** Checkbox group selected values. */\n  @property({ type: Array })\n  override value: Array<any> = [];\n\n  /** Makes a single selection required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Checkbox group disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Checkbox group horizontal style. */\n  @property({ type: Boolean })\n  horizontal = false;\n\n  /** Adds a \"Select All\" checkbox to the top of the group. */\n  @property({ type: Boolean })\n  selectAll = false;\n\n  /** Is \"Select All\" box checked.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllChecked = false;\n\n  /** Is \"Select All\" indeterminate.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllIndeterminate = false;\n\n  /** Hide the group legend/label visually. */\n  @property({ type: Boolean })\n  hideLegend = false;\n\n  /** Adds a search input to enable filtering of checkboxes. */\n  @property({ type: Boolean })\n  filterable = false;\n\n  /** Filter text input value.\n   * @internal\n   */\n  @state()\n  searchTerm = '';\n\n  /** Limits visible checkboxes behind a \"Show all\" button. */\n  @property({ type: Boolean })\n  limitCheckboxes = false;\n\n  /** Number of checkboxes visible when limited.\n   * @internal\n   */\n  @state()\n  _limitCount = 4;\n\n  /** Checkbox limit visibility.\n   * @internal\n   */\n  @state()\n  limitRevealed = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = _defaultTextStrings;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  _textStrings = _defaultTextStrings;\n\n  // /**\n  //  * Queries for slotted checkboxes.\n  //  * @ignore\n  //  */\n  // @queryAssignedElements()\n  // checkboxes!: Array<any>;\n\n  @state()\n  checkboxes: Array<any> = [];\n\n  @state()\n  filteredCheckboxes: Array<any> = [];\n\n  override render() {\n    return html`\n      <div>\n        ${this.filterable\n          ? html`\n              <kyn-text-input\n                class=\"search\"\n                type=\"search\"\n                size=\"sm\"\n                placeholder=${this._textStrings.search}\n                hideLabel\n                value=${this.searchTerm}\n                ?disabled=${this.disabled}\n                @on-input=${(e: Event) => this._handleFilter(e)}\n              >\n                ${this._textStrings.search}\n              </kyn-text-input>\n            `\n          : null}\n\n        <fieldset ?disabled=${this.disabled}>\n          <legend class=\"label-text ${this.hideLegend ? 'sr-only' : ''}\">\n            ${this.required\n              ? html`\n                  <abbr\n                    class=\"required\"\n                    title=${this._textStrings.required}\n                    aria-label=${this._textStrings.required}\n                  >\n                    *\n                  </abbr>\n                `\n              : null}\n            <slot name=\"label\"></slot>\n          </legend>\n          <div class=\"description-text\">\n            <slot name=\"description\"></slot>\n          </div>\n          ${this._isInvalid\n            ? html`\n                <div class=\"error\">\n                  <kd-icon\n                    .icon=\"${errorIcon}\"\n                    title=${this._textStrings.error}\n                    aria-label=${this._textStrings.error}\n                  ></kd-icon>\n                  ${this.invalidText || this._internalValidationMsg}\n                </div>\n              `\n            : null}\n\n          <div class=\"${this.horizontal ? 'horizontal' : ''}\">\n            ${this.selectAll\n              ? html`\n                  <kyn-checkbox\n                    class=\"select-all\"\n                    value=\"selectAll\"\n                    ?checked=${this.selectAllChecked}\n                    ?indeterminate=${this.selectAllIndeterminate}\n                    ?required=${this.required}\n                    ?disabled=${this.disabled}\n                    ?invalid=${this.invalidText !== '' ||\n                    this._internalValidationMsg !== ''}\n                  >\n                    ${this._textStrings.selectAll}\n                  </kyn-checkbox>\n                `\n              : null}\n\n            <slot @slotchange=${this._handleSlotChange}></slot>\n\n            ${this.limitCheckboxes &&\n            this.filteredCheckboxes.length > this._limitCount\n              ? html`\n                  <button\n                    class=\"reveal-toggle\"\n                    @click=${() => this._toggleRevealed(!this.limitRevealed)}\n                  >\n                    ${this.limitRevealed\n                      ? this._textStrings.showLess\n                      : html`\n                          ${this._textStrings.showMore}\n                          (${this.filteredCheckboxes.length})\n                        `}\n                  </button>\n                `\n              : null}\n          </div>\n        </fieldset>\n      </div>\n    `;\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n    }\n  }\n\n  override updated(changedProps: any) {\n    // preserve FormMixin updated function\n    this._onUpdated(changedProps);\n\n    if (changedProps.has('name')) {\n      // set name for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.name = this.name;\n      });\n    }\n\n    if (changedProps.has('value')) {\n      // set checked state for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.checked = this.value.includes(checkbox.value);\n      });\n\n      const CheckedBoxesCount = this.checkboxes.filter(\n        (checkbox) => checkbox.checked\n      ).length;\n\n      // sync \"Select All\" checkbox state\n      this.selectAllChecked =\n        this.checkboxes.length > 0 &&\n        CheckedBoxesCount === this.checkboxes.length;\n\n      // sync \"Select All\" indeterminate state\n      this.selectAllIndeterminate =\n        CheckedBoxesCount < this.checkboxes.length && CheckedBoxesCount > 0;\n\n      // set form data value\n      const entries = new FormData();\n      this.value.forEach((value) => {\n        entries.append(this.name, value);\n      });\n      this._internals.setFormValue(entries);\n    }\n\n    if (changedProps.has('required')) {\n      // set required for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.required = this.required;\n      });\n    }\n\n    if (\n      changedProps.has('disabled') &&\n      changedProps.get('disabled') !== undefined\n    ) {\n      // set disabled for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.disabled = this.disabled;\n      });\n    }\n\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      // set invalid state for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.invalid = this._isInvalid;\n      });\n    }\n\n    if (\n      changedProps.has('limitCheckboxes') &&\n      changedProps.get('limitCheckboxes') !== undefined\n    ) {\n      this._toggleRevealed(false);\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // set validity flags\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing: this.required && !this.value.length,\n    };\n\n    // set validationMessage\n    const InternalMsg =\n      this.required && !this.value.length ? 'A selection is required.' : '';\n    const ValidationMessage =\n      this.invalidText !== '' ? this.invalidText : InternalMsg;\n\n    // set validity on custom element, anchor to first checkbox\n    this._internals.setValidity(\n      Validity,\n      ValidationMessage,\n      this.checkboxes[0]\n    );\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this._internalValidationMsg = InternalMsg;\n    }\n\n    // focus the first checkbox to show validity\n    if (report) {\n      this._internals.reportValidity();\n    }\n  }\n\n  private _handleCheckboxChange(e: any) {\n    const value = e.detail.value;\n\n    if (value === 'selectAll') {\n      if (e.detail.checked) {\n        this.value = this.checkboxes\n          .filter((checkbox) => !checkbox.disabled)\n          .map((checkbox) => {\n            return checkbox.value;\n          });\n      } else {\n        this.value = [];\n      }\n    } else {\n      const newValues = [...this.value];\n      if (newValues.includes(value)) {\n        const index = newValues.indexOf(value);\n        newValues.splice(index, 1);\n      } else {\n        newValues.push(value);\n      }\n      this.value = newValues;\n    }\n\n    this._validate(true, false);\n\n    this._emitChangeEvent();\n  }\n\n  private _emitChangeEvent() {\n    const event = new CustomEvent('on-checkbox-group-change', {\n      detail: { value: this.value },\n    });\n    this.dispatchEvent(event);\n  }\n\n  // override _handleFormdata = (e: any) => {\n  //   this.value.forEach((value) => {\n  //     e.formData.append(this.name, value);\n  //   });\n  // }\n\n  private _handleFilter(e: any) {\n    let visibleCount = 0;\n\n    this.searchTerm = e.detail.value.toLowerCase();\n\n    this.filteredCheckboxes = this.checkboxes.filter((checkboxEl) => {\n      return checkboxEl.textContent.toLowerCase().includes(this.searchTerm);\n    });\n\n    this.checkboxes.forEach((checkboxEl) => {\n      // get checkbox label text\n      const checkboxText = checkboxEl.textContent.toLowerCase();\n\n      // hide checkbox if no match to search term\n      if (this.limitCheckboxes && !this.limitRevealed) {\n        if (\n          checkboxText.includes(this.searchTerm) &&\n          visibleCount < this._limitCount\n        ) {\n          checkboxEl.style.display = 'block';\n          visibleCount++;\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      } else {\n        if (checkboxText.includes(this.searchTerm)) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n\n    const event = new CustomEvent('on-search', {\n      detail: { searchTerm: this.searchTerm },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _toggleRevealed(revealed: boolean) {\n    this.limitRevealed = revealed;\n\n    // this.searchTerm = '';\n\n    this.filteredCheckboxes.forEach((checkboxEl, index) => {\n      if (!this.limitCheckboxes || this.limitRevealed) {\n        checkboxEl.style.display = 'block';\n      } else {\n        if (index < this._limitCount) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n\n    const event = new CustomEvent('on-limit-toggle', {\n      detail: { expanded: this.limitRevealed },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleSlotChange() {\n    this.checkboxes = Array.from(this.querySelectorAll('kyn-checkbox'));\n    this.filteredCheckboxes = this.checkboxes;\n    this._updateChildren();\n    this._toggleRevealed(this.limitRevealed);\n    this.requestUpdate();\n  }\n\n  private _updateChildren() {\n    this.checkboxes.forEach((checkbox) => {\n      checkbox.disabled = this.disabled;\n      checkbox.checked = this.value.includes(checkbox.value);\n    });\n\n    const CheckedBoxesCount = this.checkboxes.filter(\n      (checkbox) => checkbox.checked\n    ).length;\n\n    // sync \"Select All\" checkbox state\n    this.selectAllChecked =\n      this.checkboxes.length > 0 &&\n      CheckedBoxesCount === this.checkboxes.length;\n\n    // sync \"Select All\" indeterminate state\n    this.selectAllIndeterminate =\n      CheckedBoxesCount < this.checkboxes.length && CheckedBoxesCount > 0;\n  }\n\n  private _handleSubgroupChange(e: any) {\n    const newValues = [...this.value];\n    const {\n      isParent,\n      parentChecked,\n      parentValue,\n      value,\n      checked,\n      childValues,\n    } = e.detail;\n\n    if (isParent) {\n      if (checked) {\n        if (!newValues.includes(value)) {\n          newValues.push(value);\n        }\n\n        childValues.forEach((value: string) => {\n          if (!newValues.includes(value)) {\n            newValues.push(value);\n          }\n        });\n      } else {\n        const index = newValues.indexOf(value);\n        newValues.splice(index, 1);\n\n        childValues.forEach((value: string) => {\n          const index = newValues.indexOf(value);\n          if (index !== -1) {\n            newValues.splice(index, 1);\n          }\n        });\n      }\n    } else {\n      if (checked) {\n        if (!newValues.includes(value)) {\n          newValues.push(value);\n        }\n      } else {\n        const index = newValues.indexOf(value);\n        if (index !== -1) {\n          newValues.splice(index, 1);\n        }\n      }\n\n      if (parentChecked) {\n        if (!newValues.includes(parentValue)) {\n          newValues.push(parentValue);\n        }\n      } else {\n        const index = newValues.indexOf(parentValue);\n        if (index !== -1) {\n          newValues.splice(index, 1);\n        }\n      }\n    }\n    console.log(newValues);\n\n    this.value = newValues;\n\n    this._validate(true, false);\n\n    this._emitChangeEvent();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // preserve FormMixin connectedCallback function\n    this._onConnected();\n\n    // capture child checkboxes change event\n    this.addEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    // capture subgroup change event\n    this.addEventListener('on-checkbox-subgroup-change', (e: any) =>\n      this._handleSubgroupChange(e)\n    );\n  }\n\n  override disconnectedCallback() {\n    // preserve FormMixin disconnectedCallback function\n    this._onDisconnected();\n\n    this.removeEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    this.removeEventListener('on-checkbox-subgroup-change', (e: any) =>\n      this._handleSubgroupChange(e)\n    );\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-checkbox-group': CheckboxGroup;\n  }\n}\n"],"names":["_defaultTextStrings","selectAll","showMore","showLess","search","required","error","CheckboxGroup","FormMixin","LitElement","constructor","this","value","disabled","horizontal","selectAllChecked","selectAllIndeterminate","hideLegend","filterable","searchTerm","limitCheckboxes","_limitCount","limitRevealed","textStrings","_textStrings","checkboxes","filteredCheckboxes","render","html","e","_handleFilter","_isInvalid","errorIcon","invalidText","_internalValidationMsg","_handleSlotChange","length","_toggleRevealed","willUpdate","changedProps","has","deepmerge","updated","_onUpdated","forEach","checkbox","name","checked","includes","CheckedBoxesCount","filter","entries","FormData","append","_internals","setFormValue","undefined","get","invalid","_validate","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","setValidity","reportValidity","_handleCheckboxChange","detail","map","newValues","index","indexOf","splice","push","_emitChangeEvent","event","CustomEvent","dispatchEvent","visibleCount","toLowerCase","checkboxEl","textContent","checkboxText","style","display","revealed","expanded","Array","from","querySelectorAll","_updateChildren","requestUpdate","_handleSubgroupChange","isParent","parentChecked","parentValue","childValues","console","log","connectedCallback","super","_onConnected","addEventListener","disconnectedCallback","_onDisconnected","removeEventListener","styles","CheckboxGroupScss","__decorate","property","type","prototype","Boolean","state","Object","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAWA,MAAMA,EAAsB,CAC1BC,UAAW,aACXC,SAAU,YACVC,SAAU,YACVC,OAAQ,SACRC,SAAU,WACVC,MAAO,SAaI,IAAAC,EAAN,cAA4BC,EAAUC,IAAtC,WAAAC,uBAKIC,KAAKC,MAAe,GAI7BD,KAAQN,UAAG,EAIXM,KAAQE,UAAG,EAIXF,KAAUG,YAAG,EAIbH,KAASV,WAAG,EAMZU,KAAgBI,kBAAG,EAMnBJ,KAAsBK,wBAAG,EAIzBL,KAAUM,YAAG,EAIbN,KAAUO,YAAG,EAMbP,KAAUQ,WAAG,GAIbR,KAAeS,iBAAG,EAMlBT,KAAWU,YAAG,EAMdV,KAAaW,eAAG,EAIhBX,KAAWY,YAAGvB,EAMdW,KAAYa,aAAGxB,EAUfW,KAAUc,WAAe,GAGzBd,KAAkBe,mBAAe,EAiblC,CA/aU,MAAAC,GACP,OAAOC,CAAI;;UAELjB,KAAKO,WACHU,CAAI;;;;;8BAKcjB,KAAKa,aAAapB;;wBAExBO,KAAKQ;4BACDR,KAAKE;4BACJgB,GAAalB,KAAKmB,cAAcD;;kBAE3ClB,KAAKa,aAAapB;;cAGxB;;8BAEkBO,KAAKE;sCACGF,KAAKM,WAAa,UAAY;cACtDN,KAAKN,SACHuB,CAAI;;;4BAGQjB,KAAKa,aAAanB;iCACbM,KAAKa,aAAanB;;;;kBAKnC;;;;;;YAMJM,KAAKoB,WACHH,CAAI;;;6BAGWI;4BACDrB,KAAKa,aAAalB;iCACbK,KAAKa,aAAalB;;oBAE/BK,KAAKsB,aAAetB,KAAKuB;;gBAG/B;;wBAEUvB,KAAKG,WAAa,aAAe;cAC3CH,KAAKV,UACH2B,CAAI;;;;+BAIWjB,KAAKI;qCACCJ,KAAKK;gCACVL,KAAKN;gCACLM,KAAKE;+BACe,KAArBF,KAAKsB,aACgB,KAAhCtB,KAAKuB;;sBAEHvB,KAAKa,aAAavB;;kBAGxB;;gCAEgBU,KAAKwB;;cAEvBxB,KAAKS,iBACPT,KAAKe,mBAAmBU,OAASzB,KAAKU,YAClCO,CAAI;;;6BAGS,IAAMjB,KAAK0B,iBAAiB1B,KAAKW;;sBAExCX,KAAKW,cACHX,KAAKa,aAAarB,SAClByB,CAAI;4BACAjB,KAAKa,aAAatB;6BACjBS,KAAKe,mBAAmBU;;;kBAIrC;;;;KAKb,CAEQ,UAAAE,CAAWC,GACdA,EAAaC,IAAI,iBACnB7B,KAAKa,aAAeiB,EAAUzC,EAAqBW,KAAKY,aAE3D,CAEQ,OAAAmB,CAAQH,GAWf,GATA5B,KAAKgC,WAAWJ,GAEZA,EAAaC,IAAI,SAEnB7B,KAAKc,WAAWmB,SAASC,IACvBA,EAASC,KAAOnC,KAAKmC,IAAI,IAIzBP,EAAaC,IAAI,SAAU,CAE7B7B,KAAKc,WAAWmB,SAASC,IACvBA,EAASE,QAAUpC,KAAKC,MAAMoC,SAASH,EAASjC,MAAM,IAGxD,MAAMqC,EAAoBtC,KAAKc,WAAWyB,QACvCL,GAAaA,EAASE,UACvBX,OAGFzB,KAAKI,iBACHJ,KAAKc,WAAWW,OAAS,GACzBa,IAAsBtC,KAAKc,WAAWW,OAGxCzB,KAAKK,uBACHiC,EAAoBtC,KAAKc,WAAWW,QAAUa,EAAoB,EAGpE,MAAME,EAAU,IAAIC,SACpBzC,KAAKC,MAAMgC,SAAShC,IAClBuC,EAAQE,OAAO1C,KAAKmC,KAAMlC,EAAM,IAElCD,KAAK2C,WAAWC,aAAaJ,EAC9B,CAEGZ,EAAaC,IAAI,aAEnB7B,KAAKc,WAAWmB,SAASC,IACvBA,EAASxC,SAAWM,KAAKN,QAAQ,IAKnCkC,EAAaC,IAAI,kBACgBgB,IAAjCjB,EAAakB,IAAI,aAGjB9C,KAAKc,WAAWmB,SAASC,IACvBA,EAAShC,SAAWF,KAAKE,QAAQ,KAKnC0B,EAAaC,IAAI,gBACjBD,EAAaC,IAAI,2BAGjB7B,KAAKc,WAAWmB,SAASC,IACvBA,EAASa,QAAU/C,KAAKoB,UAAU,IAKpCQ,EAAaC,IAAI,yBACuBgB,IAAxCjB,EAAakB,IAAI,oBAEjB9C,KAAK0B,iBAAgB,EAExB,CAEO,SAAAsB,CAAUC,EAAqBC,GAErC,MAAMC,EAAW,CACfC,YAAkC,KAArBpD,KAAKsB,YAClB+B,aAAcrD,KAAKN,WAAaM,KAAKC,MAAMwB,QAIvC6B,EACJtD,KAAKN,WAAaM,KAAKC,MAAMwB,OAAS,2BAA6B,GAC/D8B,EACiB,KAArBvD,KAAKsB,YAAqBtB,KAAKsB,YAAcgC,EAG/CtD,KAAK2C,WAAWa,YACdL,EACAI,EACAvD,KAAKc,WAAW,IAIdmC,IACFjD,KAAKuB,uBAAyB+B,GAI5BJ,GACFlD,KAAK2C,WAAWc,gBAEnB,CAEO,qBAAAC,CAAsBxC,GAC5B,MAAMjB,EAAQiB,EAAEyC,OAAO1D,MAEvB,GAAc,cAAVA,EACEiB,EAAEyC,OAAOvB,QACXpC,KAAKC,MAAQD,KAAKc,WACfyB,QAAQL,IAAcA,EAAShC,WAC/B0D,KAAK1B,GACGA,EAASjC,QAGpBD,KAAKC,MAAQ,OAEV,CACL,MAAM4D,EAAY,IAAI7D,KAAKC,OAC3B,GAAI4D,EAAUxB,SAASpC,GAAQ,CAC7B,MAAM6D,EAAQD,EAAUE,QAAQ9D,GAChC4D,EAAUG,OAAOF,EAAO,EACzB,MACCD,EAAUI,KAAKhE,GAEjBD,KAAKC,MAAQ4D,CACd,CAED7D,KAAKgD,WAAU,GAAM,GAErBhD,KAAKkE,kBACN,CAEO,gBAAAA,GACN,MAAMC,EAAQ,IAAIC,YAAY,2BAA4B,CACxDT,OAAQ,CAAE1D,MAAOD,KAAKC,SAExBD,KAAKqE,cAAcF,EACpB,CAQO,aAAAhD,CAAcD,GACpB,IAAIoD,EAAe,EAEnBtE,KAAKQ,WAAaU,EAAEyC,OAAO1D,MAAMsE,cAEjCvE,KAAKe,mBAAqBf,KAAKc,WAAWyB,QAAQiC,GACzCA,EAAWC,YAAYF,cAAclC,SAASrC,KAAKQ,cAG5DR,KAAKc,WAAWmB,SAASuC,IAEvB,MAAME,EAAeF,EAAWC,YAAYF,cAGxCvE,KAAKS,kBAAoBT,KAAKW,cAE9B+D,EAAarC,SAASrC,KAAKQ,aAC3B8D,EAAetE,KAAKU,aAEpB8D,EAAWG,MAAMC,QAAU,QAC3BN,KAEAE,EAAWG,MAAMC,QAAU,OAGzBF,EAAarC,SAASrC,KAAKQ,YAC7BgE,EAAWG,MAAMC,QAAU,QAE3BJ,EAAWG,MAAMC,QAAU,MAE9B,IAGH,MAAMT,EAAQ,IAAIC,YAAY,YAAa,CACzCT,OAAQ,CAAEnD,WAAYR,KAAKQ,cAE7BR,KAAKqE,cAAcF,EACpB,CAEO,eAAAzC,CAAgBmD,GACtB7E,KAAKW,cAAgBkE,EAIrB7E,KAAKe,mBAAmBkB,SAAQ,CAACuC,EAAYV,MACtC9D,KAAKS,iBAAmBT,KAAKW,eAG5BmD,EAAQ9D,KAAKU,YAFjB8D,EAAWG,MAAMC,QAAU,QAKzBJ,EAAWG,MAAMC,QAAU,MAE9B,IAGH,MAAMT,EAAQ,IAAIC,YAAY,kBAAmB,CAC/CT,OAAQ,CAAEmB,SAAU9E,KAAKW,iBAE3BX,KAAKqE,cAAcF,EACpB,CAEO,iBAAA3C,GACNxB,KAAKc,WAAaiE,MAAMC,KAAKhF,KAAKiF,iBAAiB,iBACnDjF,KAAKe,mBAAqBf,KAAKc,WAC/Bd,KAAKkF,kBACLlF,KAAK0B,gBAAgB1B,KAAKW,eAC1BX,KAAKmF,eACN,CAEO,eAAAD,GACNlF,KAAKc,WAAWmB,SAASC,IACvBA,EAAShC,SAAWF,KAAKE,SACzBgC,EAASE,QAAUpC,KAAKC,MAAMoC,SAASH,EAASjC,MAAM,IAGxD,MAAMqC,EAAoBtC,KAAKc,WAAWyB,QACvCL,GAAaA,EAASE,UACvBX,OAGFzB,KAAKI,iBACHJ,KAAKc,WAAWW,OAAS,GACzBa,IAAsBtC,KAAKc,WAAWW,OAGxCzB,KAAKK,uBACHiC,EAAoBtC,KAAKc,WAAWW,QAAUa,EAAoB,CACrE,CAEO,qBAAA8C,CAAsBlE,GAC5B,MAAM2C,EAAY,IAAI7D,KAAKC,QACrBoF,SACJA,EAAQC,cACRA,EAAaC,YACbA,EAAWtF,MACXA,EAAKmC,QACLA,EAAOoD,YACPA,GACEtE,EAAEyC,OAEN,GAAI0B,EACF,GAAIjD,EACGyB,EAAUxB,SAASpC,IACtB4D,EAAUI,KAAKhE,GAGjBuF,EAAYvD,SAAShC,IACd4D,EAAUxB,SAASpC,IACtB4D,EAAUI,KAAKhE,EAChB,QAEE,CACL,MAAM6D,EAAQD,EAAUE,QAAQ9D,GAChC4D,EAAUG,OAAOF,EAAO,GAExB0B,EAAYvD,SAAShC,IACnB,MAAM6D,EAAQD,EAAUE,QAAQ9D,IACjB,IAAX6D,GACFD,EAAUG,OAAOF,EAAO,EACzB,GAEJ,KACI,CACL,GAAI1B,EACGyB,EAAUxB,SAASpC,IACtB4D,EAAUI,KAAKhE,OAEZ,CACL,MAAM6D,EAAQD,EAAUE,QAAQ9D,IACjB,IAAX6D,GACFD,EAAUG,OAAOF,EAAO,EAE3B,CAED,GAAIwB,EACGzB,EAAUxB,SAASkD,IACtB1B,EAAUI,KAAKsB,OAEZ,CACL,MAAMzB,EAAQD,EAAUE,QAAQwB,IACjB,IAAXzB,GACFD,EAAUG,OAAOF,EAAO,EAE3B,CACF,CACD2B,QAAQC,IAAI7B,GAEZ7D,KAAKC,MAAQ4D,EAEb7D,KAAKgD,WAAU,GAAM,GAErBhD,KAAKkE,kBACN,CAEQ,iBAAAyB,GACPC,MAAMD,oBAGN3F,KAAK6F,eAGL7F,KAAK8F,iBAAiB,sBAAuB5E,GAC3ClB,KAAK0D,sBAAsBxC,KAI7BlB,KAAK8F,iBAAiB,+BAAgC5E,GACpDlB,KAAKoF,sBAAsBlE,IAE9B,CAEQ,oBAAA6E,GAEP/F,KAAKgG,kBAELhG,KAAKiG,oBAAoB,sBAAuB/E,GAC9ClB,KAAK0D,sBAAsBxC,KAG7BlB,KAAKiG,oBAAoB,+BAAgC/E,GACvDlB,KAAKoF,sBAAsBlE,KAG7B0E,MAAMG,sBACP,GArgBenG,EAAMsG,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMvB,SACcnF,EAAA2G,UAAA,aAAA,GAIhCH,EAAA,CADCC,EAAS,CAAEC,KAAME,WACD5G,EAAA2G,UAAA,gBAAA,GAIjBH,EAAA,CADCC,EAAS,CAAEC,KAAME,WACD5G,EAAA2G,UAAA,gBAAA,GAIjBH,EAAA,CADCC,EAAS,CAAEC,KAAME,WACC5G,EAAA2G,UAAA,kBAAA,GAInBH,EAAA,CADCC,EAAS,CAAEC,KAAME,WACA5G,EAAA2G,UAAA,iBAAA,GAMlBH,EAAA,CADCC,EAAS,CAAEC,KAAME,WACO5G,EAAA2G,UAAA,wBAAA,GAMzBH,EAAA,CADCC,EAAS,CAAEC,KAAME,WACa5G,EAAA2G,UAAA,8BAAA,GAI/BH,EAAA,CADCC,EAAS,CAAEC,KAAME,WACC5G,EAAA2G,UAAA,kBAAA,GAInBH,EAAA,CADCC,EAAS,CAAEC,KAAME,WACC5G,EAAA2G,UAAA,kBAAA,GAMnBH,EAAA,CADCK,KACe7G,EAAA2G,UAAA,kBAAA,GAIhBH,EAAA,CADCC,EAAS,CAAEC,KAAME,WACM5G,EAAA2G,UAAA,uBAAA,GAMxBH,EAAA,CADCK,KACe7G,EAAA2G,UAAA,mBAAA,GAMhBH,EAAA,CADCK,KACqB7G,EAAA2G,UAAA,qBAAA,GAItBH,EAAA,CADCC,EAAS,CAAEC,KAAMI,UACgB9G,EAAA2G,UAAA,mBAAA,GAMlCH,EAAA,CADCK,KACkC7G,EAAA2G,UAAA,oBAAA,GAUnCH,EAAA,CADCK,KAC2B7G,EAAA2G,UAAA,kBAAA,GAG5BH,EAAA,CADCK,KACmC7G,EAAA2G,UAAA,0BAAA,GAtFzB3G,EAAawG,EAAA,CADzBO,EAAc,uBACF/G"}

package/components/reusable/datePicker/datepicker.js

@@ -1,4 +1,4 @@
-import{_ as t}from"../../../vendor/tslib-958f81aa.js";import{o as i,b as e,n as r,t as o,i as a,e as d}from"../../../vendor/lit-52eb9e23.js";import{i as n,x as l,s}from"../../../vendor/lit-element-3185f710.js";import{DATE_PICKER_TYPES as p}from"./defs.js";import{FormMixin as h}from"../../../common/mixins/form-input.js";import{d as c}from"../../../vendor/deepmerge-ts-0394e16f.js";var m=n`*,
+import{_ as i}from"../../../vendor/tslib-958f81aa.js";import{o as t,b as e,n as r,t as o,i as a,e as d}from"../../../vendor/lit-52eb9e23.js";import{i as n,x as l,s}from"../../../vendor/lit-element-3185f710.js";import{DATE_PICKER_TYPES as h}from"./defs.js";import{FormMixin as p}from"../../../common/mixins/form-input.js";import{d as m}from"../../../vendor/deepmerge-ts-0394e16f.js";var c=n`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -250,6 +250,44 @@ textarea::placeholder {
   margin-right: 8px;
 }
 
+.description-text {
+  font-family: var(--kd-font-family-secondary);
+  font-size: var(--kd-font-size-body-2-sm);
+  line-height: var(--kd-line-height-body-2-sm);
+  font-weight: var(--kd-font-weight-regular);
+  letter-spacing: var(--kd-letter-spacing-4);
+  color: var(--kd-color-text-primary);
+  margin-top: -4px;
+  margin-bottom: 8px;
+}
+@media (min-width: 42rem) {
+  .description-text {
+    font-size: var(--kd-font-size-body-2-md);
+    line-height: var(--kd-line-height-body-2-md);
+  }
+}
+@media (min-width: 74rem) {
+  .description-text {
+    font-size: var(--kd-font-size-body-2-lg);
+    line-height: var(--kd-line-height-body-2-lg);
+  }
+}
+@media (min-width: 82rem) {
+  .description-text {
+    font-size: var(--kd-font-size-body-2-xlg);
+    line-height: var(--kd-line-height-body-2-xlg);
+  }
+}
+@media (min-width: 99rem) {
+  .description-text {
+    font-size: var(--kd-font-size-body-2-max);
+    line-height: var(--kd-line-height-body-2-max);
+  }
+}
+[disabled] .description-text {
+  color: var(--kd-color-text-disabled);
+}
+
 :host {
   display: inline-block;
 }
@@ -272,7 +310,7 @@ input.size--sm {
 input.size--lg {
   height: 56px;
   padding: 14px 16px;
-}`;const u={requiredText:"Required"};let v=class extends(h(s)){constructor(){super(...arguments),this.size="md",this.caption="",this.value="",this.required=!1,this.disabled=!1,this.warnText="",this.datePickerType=p.SINGLE,this.textStrings=u,this._textStrings=u}render(){return l`
+}`;const v={requiredText:"Required"};let g=class extends(p(s)){constructor(){super(...arguments),this.size="md",this.caption="",this.value="",this.required=!1,this.disabled=!1,this.warnText="",this.datePickerType=h.SINGLE,this.textStrings=v,this._textStrings=v}render(){return l`
       <div class="date-picker" ?disabled=${this.disabled}>
         <label class="label-text" for=${this.name} ?disabled=${this.disabled}>
           ${this.required?l`<abbr
@@ -285,12 +323,12 @@ input.size--lg {
         </label>
 
         <div
-          class="${i({"input-wrapper":!0})}"
+          class="${t({"input-wrapper":!0})}"
         >
           <input
-            class="${i({"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
+            class="${t({"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
             datePickerType=${this.datePickerType}
-            type=${this.datePickerType===p.WITHITIME?"datetime-local":"date"}
+            type=${this.datePickerType===h.WITHITIME?"datetime-local":"date"}
             id=${this.name?this.name:"datepicker-1"}
             name=${this.name}
             value=${this.value}
@@ -302,7 +340,7 @@ input.size--lg {
             min=${e(this.minDate)}
             max=${e(this.maxDate)}
             step=${e(this.step)}
-            @input=${t=>this.handleInput(t)}
+            @input=${i=>this.handleInput(i)}
           />
         </div>
         ${""!==this.caption?l` <div class="caption">${this.caption}</div> `:null}
@@ -313,5 +351,5 @@ input.size--lg {
             `:null}
         ${""===this.warnText||this._isInvalid?null:l`<div id="warning" class="warn">${this.warnText}</div>`}
       </div>
-    `}handleInput(t){this.value=t.target.value,this._validate(!0,!1);const i=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(i)}updated(t){this._onUpdated(t),t.has("value")&&(this._inputEl.value=this.value)}_validate(t,i){const e=""!==this.invalidText?{...this._inputEl.validity,customError:!0}:this._inputEl.validity,r=""!==this.invalidText?this.invalidText:this._inputEl.validationMessage;this._internals.setValidity(e,r,this._inputEl),t&&(this._internalValidationMsg=this._inputEl.validationMessage),i&&this._internals.reportValidity()}willUpdate(t){t.has("textStrings")&&(this._textStrings=c(u,this.textStrings))}};v.styles=m,t([r({type:String})],v.prototype,"size",void 0),t([r({type:String})],v.prototype,"caption",void 0),t([r({type:String})],v.prototype,"value",void 0),t([r({type:Boolean})],v.prototype,"required",void 0),t([r({type:Boolean})],v.prototype,"disabled",void 0),t([r({type:String})],v.prototype,"warnText",void 0),t([r({type:String})],v.prototype,"maxDate",void 0),t([r({type:String})],v.prototype,"minDate",void 0),t([r({type:String})],v.prototype,"step",void 0),t([r({type:String})],v.prototype,"datePickerType",void 0),t([r({type:Object})],v.prototype,"textStrings",void 0),t([o()],v.prototype,"_textStrings",void 0),t([a("input")],v.prototype,"_inputEl",void 0),v=t([d("kyn-date-picker")],v);export{v as DatePicker};
+    `}handleInput(i){this.value=i.target.value,this._validate(!0,!1);const t=new CustomEvent("on-input",{detail:{value:i.target.value,origEvent:i}});this.dispatchEvent(t)}updated(i){this._onUpdated(i),i.has("value")&&(this._inputEl.value=this.value)}_validate(i,t){const e=""!==this.invalidText?{...this._inputEl.validity,customError:!0}:this._inputEl.validity,r=""!==this.invalidText?this.invalidText:this._inputEl.validationMessage;this._internals.setValidity(e,r,this._inputEl),i&&(this._internalValidationMsg=this._inputEl.validationMessage),t&&this._internals.reportValidity()}willUpdate(i){i.has("textStrings")&&(this._textStrings=m(v,this.textStrings))}};g.styles=c,i([r({type:String})],g.prototype,"size",void 0),i([r({type:String})],g.prototype,"caption",void 0),i([r({type:String})],g.prototype,"value",void 0),i([r({type:Boolean})],g.prototype,"required",void 0),i([r({type:Boolean})],g.prototype,"disabled",void 0),i([r({type:String})],g.prototype,"warnText",void 0),i([r({type:String})],g.prototype,"maxDate",void 0),i([r({type:String})],g.prototype,"minDate",void 0),i([r({type:String})],g.prototype,"step",void 0),i([r({type:String})],g.prototype,"datePickerType",void 0),i([r({type:Object})],g.prototype,"textStrings",void 0),i([o()],g.prototype,"_textStrings",void 0),i([a("input")],g.prototype,"_inputEl",void 0),g=i([d("kyn-date-picker")],g);export{g as DatePicker};
 //# sourceMappingURL=datepicker.js.map

package/components/reusable/datePicker/datepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.js","sources":["../../../../src/components/reusable/datePicker/datepicker.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { DATE_PICKER_TYPES } from './defs';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport DatePickerScss from './datepicker.scss';\nimport { deepmerge } from 'deepmerge-ts';\n\nconst _defaultTextStrings = {\n  requiredText: 'Required',\n};\n\n/**\n * Datepicker.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {string} minDate - Mimimum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format. If the value isn't a possible date string in the format, then the element has no minimum date value.\n * @prop {string} maxDate - Maximum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format. If the value isn't a possible date string in the format, then the element has no maximum date value\n * @slot unnamed - Slot for label text.\n */\n\n@customElement('kyn-date-picker')\nexport class DatePicker extends FormMixin(LitElement) {\n  static override styles = DatePickerScss;\n\n  /** Datepicker size. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Datepicker value in YYYY-MM-DD or YYYY-MM-DDThh:mm format. */\n  @property({ type: String })\n  override value = '';\n\n  /** Makes the date required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Date disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Date warning text */\n  @property({ type: String })\n  warnText = '';\n\n  /** Maximum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format.\n   * If the value isn't a possible date string in the format, then the element has no maximum date value\n   */\n  @property({ type: String })\n  maxDate!: string;\n\n  /** Minimum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format,\n   * If the value isn't a possible date string in the format, then the element has no minimum date value.\n   */\n  @property({ type: String })\n  minDate!: string;\n\n  /** Specifies the granularity that the value must adhere to, or the special value any,\n   * For date inputs, the value of step is given in days; and is treated as a number of milliseconds equal to 86,400,000 times the step value.\n   * The default value of step is 1, indicating 1 day.*/\n  @property({ type: String })\n  step!: string;\n\n  /** Date picker types. Default 'single' */\n  @property({ type: String })\n  datePickerType: DATE_PICKER_TYPES = DATE_PICKER_TYPES.SINGLE;\n\n  /** Customizable text strings. */\n  @property({ type: Object })\n  textStrings = _defaultTextStrings;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  _textStrings = _defaultTextStrings;\n\n  /**\n   * Queries the <input> DOM element.\n   * @ignore\n   */\n  @query('input')\n  _inputEl!: HTMLInputElement;\n\n  override render() {\n    return html`\n      <div class=\"date-picker\" ?disabled=${this.disabled}>\n        <label class=\"label-text\" for=${this.name} ?disabled=${this.disabled}>\n          ${this.required\n            ? html`<abbr\n                class=\"required\"\n                title=${this._textStrings.requiredText}\n                aria-label=${this._textStrings.requiredText}\n                >*</abbr\n              >`\n            : null}\n          <slot></slot>\n        </label>\n\n        <div\n          class=\"${classMap({\n            'input-wrapper': true,\n          })}\"\n        >\n          <input\n            class=\"${classMap({\n              'size--sm': this.size === 'sm',\n              'size--lg': this.size === 'lg',\n            })}\"\n            datePickerType=${this.datePickerType}\n            type=${this.datePickerType === DATE_PICKER_TYPES.WITHITIME\n              ? 'datetime-local'\n              : 'date'}\n            id=${this.name ? this.name : 'datepicker-1'}\n            name=${this.name}\n            value=${this.value}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?invalid=${this._isInvalid}\n            aria-invalid=${this._isInvalid}\n            aria-describedby=${this._isInvalid\n              ? 'error'\n              : this.warnText !== '' && !this._isInvalid\n              ? 'warning'\n              : ''}\n            min=${ifDefined(this.minDate)}\n            max=${ifDefined(this.maxDate)}\n            step=${ifDefined(this.step)}\n            @input=${(e: any) => this.handleInput(e)}\n          />\n        </div>\n        ${this.caption !== ''\n          ? html` <div class=\"caption\">${this.caption}</div> `\n          : null}\n        ${this._isInvalid\n          ? html`\n              <div id=\"error\" class=\"error\">\n                ${this.invalidText || this._internalValidationMsg}\n              </div>\n            `\n          : null}\n        ${this.warnText !== '' && !this._isInvalid\n          ? html`<div id=\"warning\" class=\"warn\">${this.warnText}</div>`\n          : null}\n      </div>\n    `;\n  }\n\n  // calls when start date or value change\n  private handleInput(e: any) {\n    this.value = e.target.value;\n\n    this._validate(true, false);\n\n    // emit selected value\n    const event = new CustomEvent('on-input', {\n      detail: {\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: PropertyValues) {\n    // preserve FormMixin updated function\n    this._onUpdated(changedProps);\n\n    if (changedProps.has('value')) {\n      // set value on input element\n      this._inputEl.value = this.value;\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // get validity state from inputEl, combine customError flag if invalidText is provided\n    const Validity =\n      this.invalidText !== ''\n        ? { ...this._inputEl.validity, customError: true }\n        : this._inputEl.validity;\n    // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n    const ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this._inputEl.validationMessage;\n\n    // set validity on custom element, anchor to inputEl\n    this._internals.setValidity(Validity, ValidationMessage, this._inputEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this._internalValidationMsg = this._inputEl.validationMessage;\n    }\n\n    // focus the form field to show validity\n    if (report) {\n      this._internals.reportValidity();\n    }\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n    }\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-date-picker': DatePicker;\n  }\n}\n"],"names":["_defaultTextStrings","requiredText","DatePicker","FormMixin","LitElement","constructor","this","size","caption","value","required","disabled","warnText","datePickerType","DATE_PICKER_TYPES","SINGLE","textStrings","_textStrings","render","html","name","classMap","WITHITIME","_isInvalid","ifDefined","minDate","maxDate","step","e","handleInput","invalidText","_internalValidationMsg","target","_validate","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","_onUpdated","has","_inputEl","interacted","report","Validity","validity","customError","ValidationMessage","validationMessage","_internals","setValidity","reportValidity","willUpdate","deepmerge","styles","DatePickerScss","__decorate","property","type","String","prototype","Boolean","Object","state","query","customElement"],"mappings":"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"}
+{"version":3,"file":"datepicker.js","sources":["../../../../src/components/reusable/datePicker/datepicker.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { DATE_PICKER_TYPES } from './defs';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport DatePickerScss from './datepicker.scss';\nimport { deepmerge } from 'deepmerge-ts';\n\nconst _defaultTextStrings = {\n  requiredText: 'Required',\n};\n\n/**\n * Datepicker.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {string} minDate - Mimimum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format. If the value isn't a possible date string in the format, then the element has no minimum date value.\n * @prop {string} maxDate - Maximum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format. If the value isn't a possible date string in the format, then the element has no maximum date value\n * @slot unnamed - Slot for label text.\n */\n\n@customElement('kyn-date-picker')\nexport class DatePicker extends FormMixin(LitElement) {\n  static override styles = DatePickerScss;\n\n  /** Datepicker size. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Datepicker value in YYYY-MM-DD or YYYY-MM-DDThh:mm format. */\n  @property({ type: String })\n  override value = '';\n\n  /** Makes the date required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Date disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Date warning text */\n  @property({ type: String })\n  warnText = '';\n\n  /** Maximum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format.\n   * If the value isn't a possible date string in the format, then the element has no maximum date value\n   */\n  @property({ type: String })\n  maxDate!: string;\n\n  /** Minimum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format,\n   * If the value isn't a possible date string in the format, then the element has no minimum date value.\n   */\n  @property({ type: String })\n  minDate!: string;\n\n  /** Specifies the granularity that the value must adhere to, or the special value any,\n   * For date inputs, the value of step is given in days; and is treated as a number of milliseconds equal to 86,400,000 times the step value.\n   * The default value of step is 1, indicating 1 day.*/\n  @property({ type: String })\n  step!: string;\n\n  /** Date picker types. Default 'single' */\n  @property({ type: String })\n  datePickerType: DATE_PICKER_TYPES = DATE_PICKER_TYPES.SINGLE;\n\n  /** Customizable text strings. */\n  @property({ type: Object })\n  textStrings = _defaultTextStrings;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  _textStrings = _defaultTextStrings;\n\n  /**\n   * Queries the <input> DOM element.\n   * @ignore\n   */\n  @query('input')\n  _inputEl!: HTMLInputElement;\n\n  override render() {\n    return html`\n      <div class=\"date-picker\" ?disabled=${this.disabled}>\n        <label class=\"label-text\" for=${this.name} ?disabled=${this.disabled}>\n          ${this.required\n            ? html`<abbr\n                class=\"required\"\n                title=${this._textStrings.requiredText}\n                aria-label=${this._textStrings.requiredText}\n                >*</abbr\n              >`\n            : null}\n          <slot></slot>\n        </label>\n\n        <div\n          class=\"${classMap({\n            'input-wrapper': true,\n          })}\"\n        >\n          <input\n            class=\"${classMap({\n              'size--sm': this.size === 'sm',\n              'size--lg': this.size === 'lg',\n            })}\"\n            datePickerType=${this.datePickerType}\n            type=${this.datePickerType === DATE_PICKER_TYPES.WITHITIME\n              ? 'datetime-local'\n              : 'date'}\n            id=${this.name ? this.name : 'datepicker-1'}\n            name=${this.name}\n            value=${this.value}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?invalid=${this._isInvalid}\n            aria-invalid=${this._isInvalid}\n            aria-describedby=${this._isInvalid\n              ? 'error'\n              : this.warnText !== '' && !this._isInvalid\n              ? 'warning'\n              : ''}\n            min=${ifDefined(this.minDate)}\n            max=${ifDefined(this.maxDate)}\n            step=${ifDefined(this.step)}\n            @input=${(e: any) => this.handleInput(e)}\n          />\n        </div>\n        ${this.caption !== ''\n          ? html` <div class=\"caption\">${this.caption}</div> `\n          : null}\n        ${this._isInvalid\n          ? html`\n              <div id=\"error\" class=\"error\">\n                ${this.invalidText || this._internalValidationMsg}\n              </div>\n            `\n          : null}\n        ${this.warnText !== '' && !this._isInvalid\n          ? html`<div id=\"warning\" class=\"warn\">${this.warnText}</div>`\n          : null}\n      </div>\n    `;\n  }\n\n  // calls when start date or value change\n  private handleInput(e: any) {\n    this.value = e.target.value;\n\n    this._validate(true, false);\n\n    // emit selected value\n    const event = new CustomEvent('on-input', {\n      detail: {\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: PropertyValues) {\n    // preserve FormMixin updated function\n    this._onUpdated(changedProps);\n\n    if (changedProps.has('value')) {\n      // set value on input element\n      this._inputEl.value = this.value;\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // get validity state from inputEl, combine customError flag if invalidText is provided\n    const Validity =\n      this.invalidText !== ''\n        ? { ...this._inputEl.validity, customError: true }\n        : this._inputEl.validity;\n    // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n    const ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this._inputEl.validationMessage;\n\n    // set validity on custom element, anchor to inputEl\n    this._internals.setValidity(Validity, ValidationMessage, this._inputEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this._internalValidationMsg = this._inputEl.validationMessage;\n    }\n\n    // focus the form field to show validity\n    if (report) {\n      this._internals.reportValidity();\n    }\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n    }\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-date-picker': DatePicker;\n  }\n}\n"],"names":["_defaultTextStrings","requiredText","DatePicker","FormMixin","LitElement","constructor","this","size","caption","value","required","disabled","warnText","datePickerType","DATE_PICKER_TYPES","SINGLE","textStrings","_textStrings","render","html","name","classMap","WITHITIME","_isInvalid","ifDefined","minDate","maxDate","step","e","handleInput","invalidText","_internalValidationMsg","target","_validate","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","_onUpdated","has","_inputEl","interacted","report","Validity","validity","customError","ValidationMessage","validationMessage","_internals","setValidity","reportValidity","willUpdate","deepmerge","styles","DatePickerScss","__decorate","property","type","String","prototype","Boolean","Object","state","query","customElement"],"mappings":"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"}

package/components/reusable/daterangepicker/daterangepicker.js

@@ -1,4 +1,4 @@
-import{_ as t}from"../../../vendor/tslib-958f81aa.js";import{o as i,b as e,n as a,i as r,t as n,e as d}from"../../../vendor/lit-52eb9e23.js";import{i as s,x as o,s as l}from"../../../vendor/lit-element-3185f710.js";import{DATE_PICKER_TYPES as h}from"../datePicker/defs.js";import{FormMixin as p}from"../../../common/mixins/form-input.js";import{d as c}from"../../../vendor/deepmerge-ts-0394e16f.js";var m=s`*,
+import{_ as t}from"../../../vendor/tslib-958f81aa.js";import{o as i,b as e,n as a,i as r,t as d,e as n}from"../../../vendor/lit-52eb9e23.js";import{i as o,x as s,s as l}from"../../../vendor/lit-element-3185f710.js";import{DATE_PICKER_TYPES as h}from"../datePicker/defs.js";import{FormMixin as p}from"../../../common/mixins/form-input.js";import{d as m}from"../../../vendor/deepmerge-ts-0394e16f.js";var c=o`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -250,6 +250,44 @@ textarea::placeholder {
   margin-right: 8px;
 }
 
+.description-text {
+  font-family: var(--kd-font-family-secondary);
+  font-size: var(--kd-font-size-body-2-sm);
+  line-height: var(--kd-line-height-body-2-sm);
+  font-weight: var(--kd-font-weight-regular);
+  letter-spacing: var(--kd-letter-spacing-4);
+  color: var(--kd-color-text-primary);
+  margin-top: -4px;
+  margin-bottom: 8px;
+}
+@media (min-width: 42rem) {
+  .description-text {
+    font-size: var(--kd-font-size-body-2-md);
+    line-height: var(--kd-line-height-body-2-md);
+  }
+}
+@media (min-width: 74rem) {
+  .description-text {
+    font-size: var(--kd-font-size-body-2-lg);
+    line-height: var(--kd-line-height-body-2-lg);
+  }
+}
+@media (min-width: 82rem) {
+  .description-text {
+    font-size: var(--kd-font-size-body-2-xlg);
+    line-height: var(--kd-line-height-body-2-xlg);
+  }
+}
+@media (min-width: 99rem) {
+  .description-text {
+    font-size: var(--kd-font-size-body-2-max);
+    line-height: var(--kd-line-height-body-2-max);
+  }
+}
+[disabled] .description-text {
+  color: var(--kd-color-text-disabled);
+}
+
 :host {
   display: inline-block;
 }
@@ -285,10 +323,10 @@ input.size--lg {
 
 .range-span {
   margin: 0 5px;
-}`;const u={requiredText:"Required"};let v=class extends(p(l)){constructor(){super(...arguments),this.caption="",this.size="md",this.startDate="",this.endDate="",this.required=!1,this.disabled=!1,this.datePickerType=h.SINGLE,this.warnText="",this.textStrings=u,this._textStrings=u}render(){var t,a,r,n;return o`
+}`;const v={requiredText:"Required"};let u=class extends(p(l)){constructor(){super(...arguments),this.caption="",this.size="md",this.startDate="",this.endDate="",this.required=!1,this.disabled=!1,this.datePickerType=h.SINGLE,this.warnText="",this.textStrings=v,this._textStrings=v}render(){var t,a,r,d;return s`
       <div class="daterange-picker" ?disabled=${this.disabled}>
         <label class="label-text" for=${this.name} ?disabled=${this.disabled}>
-          ${this.required?o`<abbr
+          ${this.required?s`<abbr
                 class="required"
                 title=${this._textStrings.requiredText}
                 aria-label=${this._textStrings.requiredText}
@@ -332,7 +370,7 @@ input.size--lg {
               ?invalid=${this._isInvalid}
               aria-invalid=${this._isInvalid}
               aria-describedby=${this._isInvalid?"error":""===this.warnText||this._isInvalid?"":"warning"}
-              min=${e(null!==(n=null!==(r=this.startDate)&&void 0!==r?r:this.minDate)&&void 0!==n?n:"")}
+              min=${e(null!==(d=null!==(r=this.startDate)&&void 0!==r?r:this.minDate)&&void 0!==d?d:"")}
               max=${e(this.maxDate)}
               step=${e(this.step)}
               @input=${t=>this.handleEndDate(t)}
@@ -340,13 +378,13 @@ input.size--lg {
           </div>
         </div>
 
-        ${""!==this.caption?o` <div class="caption">${this.caption}</div> `:null}
-        ${this._isInvalid?o`
+        ${""!==this.caption?s` <div class="caption">${this.caption}</div> `:null}
+        ${this._isInvalid?s`
               <div id="error" class="error">
                 ${this.invalidText||this._internalValidationMsg}
               </div>
             `:null}
-        ${""===this.warnText||this._isInvalid?null:o`<div id="warning" class="warn">${this.warnText}</div>`}
+        ${""===this.warnText||this._isInvalid?null:s`<div id="warning" class="warn">${this.warnText}</div>`}
       </div>
-    `}updated(t){if(this._onUpdated(t),t.has("startDate")&&(this.inputElStart.value=this.startDate),t.has("endDate")&&(this.inputElEnd.value=this.endDate),t.has("startDate")||t.has("endDate")){this._validate(!1,!1);const t=""!==this.startDate&&""!==this.endDate?`${this.startDate}:${this.endDate}`:"";this._internals.setFormValue(t)}}async handleStartDate(t){this.startDate=t.target.value,await this.updateComplete,this._validate(!0,!1),this._emitValue(t)}async handleEndDate(t){this.endDate=t.target.value,await this.updateComplete,this._validate(!0,!1),this._emitValue(t)}_validate(t,i){const e=this.inputElStart.checkValidity(),a=this.inputElEnd.checkValidity();if(e&&a)this._internals.setValidity({});else if(e){if(!a){const t=""!==this.invalidText?{...this.inputElEnd.validity,customError:!0}:this.inputElEnd.validity,i=""!==this.invalidText?this.invalidText:this.inputElEnd.validationMessage;this._internals.setValidity(t,i,this.inputElEnd)}}else{const t=""!==this.invalidText?{...this.inputElStart.validity,customError:!0}:this.inputElStart.validity,i=""!==this.invalidText?this.invalidText:this.inputElStart.validationMessage;this._internals.setValidity(t,i,this.inputElStart)}t&&(this._internalValidationMsg=this.inputElStart.validationMessage||this.inputElEnd.validationMessage),i&&this._internals.reportValidity()}_emitValue(t){const i=new CustomEvent("on-input",{detail:{startDate:this.startDate,endDate:this.endDate,origEvent:t}});this.dispatchEvent(i)}willUpdate(t){t.has("textStrings")&&(this._textStrings=c(u,this.textStrings))}};v.styles=m,t([a({type:String})],v.prototype,"caption",void 0),t([a({type:String})],v.prototype,"size",void 0),t([a({type:String})],v.prototype,"startDate",void 0),t([a({type:String})],v.prototype,"endDate",void 0),t([a({type:Boolean})],v.prototype,"required",void 0),t([a({type:Boolean})],v.prototype,"disabled",void 0),t([a({type:String})],v.prototype,"datePickerType",void 0),t([a({type:String})],v.prototype,"warnText",void 0),t([a({type:String})],v.prototype,"maxDate",void 0),t([a({type:String})],v.prototype,"minDate",void 0),t([a({type:String})],v.prototype,"step",void 0),t([r("input.date-start")],v.prototype,"inputElStart",void 0),t([a({type:Object})],v.prototype,"textStrings",void 0),t([n()],v.prototype,"_textStrings",void 0),t([r("input.date-end")],v.prototype,"inputElEnd",void 0),v=t([d("kyn-date-range-picker")],v);export{v as DateRangePicker};
+    `}updated(t){if(this._onUpdated(t),t.has("startDate")&&(this.inputElStart.value=this.startDate),t.has("endDate")&&(this.inputElEnd.value=this.endDate),t.has("startDate")||t.has("endDate")){this._validate(!1,!1);const t=""!==this.startDate&&""!==this.endDate?`${this.startDate}:${this.endDate}`:"";this._internals.setFormValue(t)}}async handleStartDate(t){this.startDate=t.target.value,await this.updateComplete,this._validate(!0,!1),this._emitValue(t)}async handleEndDate(t){this.endDate=t.target.value,await this.updateComplete,this._validate(!0,!1),this._emitValue(t)}_validate(t,i){const e=this.inputElStart.checkValidity(),a=this.inputElEnd.checkValidity();if(e&&a)this._internals.setValidity({});else if(e){if(!a){const t=""!==this.invalidText?{...this.inputElEnd.validity,customError:!0}:this.inputElEnd.validity,i=""!==this.invalidText?this.invalidText:this.inputElEnd.validationMessage;this._internals.setValidity(t,i,this.inputElEnd)}}else{const t=""!==this.invalidText?{...this.inputElStart.validity,customError:!0}:this.inputElStart.validity,i=""!==this.invalidText?this.invalidText:this.inputElStart.validationMessage;this._internals.setValidity(t,i,this.inputElStart)}t&&(this._internalValidationMsg=this.inputElStart.validationMessage||this.inputElEnd.validationMessage),i&&this._internals.reportValidity()}_emitValue(t){const i=new CustomEvent("on-input",{detail:{startDate:this.startDate,endDate:this.endDate,origEvent:t}});this.dispatchEvent(i)}willUpdate(t){t.has("textStrings")&&(this._textStrings=m(v,this.textStrings))}};u.styles=c,t([a({type:String})],u.prototype,"caption",void 0),t([a({type:String})],u.prototype,"size",void 0),t([a({type:String})],u.prototype,"startDate",void 0),t([a({type:String})],u.prototype,"endDate",void 0),t([a({type:Boolean})],u.prototype,"required",void 0),t([a({type:Boolean})],u.prototype,"disabled",void 0),t([a({type:String})],u.prototype,"datePickerType",void 0),t([a({type:String})],u.prototype,"warnText",void 0),t([a({type:String})],u.prototype,"maxDate",void 0),t([a({type:String})],u.prototype,"minDate",void 0),t([a({type:String})],u.prototype,"step",void 0),t([r("input.date-start")],u.prototype,"inputElStart",void 0),t([a({type:Object})],u.prototype,"textStrings",void 0),t([d()],u.prototype,"_textStrings",void 0),t([r("input.date-end")],u.prototype,"inputElEnd",void 0),u=t([n("kyn-date-range-picker")],u);export{u as DateRangePicker};
 //# sourceMappingURL=daterangepicker.js.map

package/components/reusable/daterangepicker/daterangepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"daterangepicker.js","sources":["../../../../src/components/reusable/daterangepicker/daterangepicker.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { DATE_PICKER_TYPES } from '../datePicker/defs';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport DateRangePickerScss from './daterangepicker.scss';\nimport { deepmerge } from 'deepmerge-ts';\n\nconst _defaultTextStrings = {\n  requiredText: 'Required',\n};\n\n/**\n * Date-Range picker\n * @fires on-input - Captures the input event and emits the selected values and original event details. (Only if startDate <= endDate)\n * @prop {string} minDate - Mimimum date in YYYY-MM-DD format. If the value isn't a possible date string in the format, then the element has no minimum date value.\n * @prop {string} maxDate - Maximum date in YYYY-MM-DD format. If the value isn't a possible date string in the format, then the element has no maximum date value.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-date-range-picker')\nexport class DateRangePicker extends FormMixin(LitElement) {\n  static override styles = DateRangePickerScss;\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Datepicker size. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Datepicker Start date in YYYY-MM-DD format. */\n  @property({ type: String })\n  startDate = '';\n\n  /** Datepicker End date in YYYY-MM-DD format. */\n  @property({ type: String })\n  endDate = '';\n\n  /** Makes the date required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Date disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Date range picker types. Default 'single' */\n  @property({ type: String })\n  datePickerType: DATE_PICKER_TYPES = DATE_PICKER_TYPES.SINGLE;\n\n  /** Date warning text */\n  @property({ type: String })\n  warnText = '';\n\n  /** Maximum date in YYYY-MM-DD format.\n   * If the value isn't a possible date string in the format, then the element has no maximum date value\n   */\n  @property({ type: String })\n  maxDate!: string;\n\n  /** Minimum date in YYYY-MM-DD format,\n   * If the value isn't a possible date string in the format, then the element has no minimum date value.\n   */\n  @property({ type: String })\n  minDate!: string;\n\n  /** Specifies the granularity that the value must adhere to, or the special value any,\n   * For date inputs, the value of step is given in days; and is treated as a number of milliseconds equal to 86,400,000 times the step value.\n   * The default value of step is 1, indicating 1 day.*/\n  @property({ type: String })\n  step!: string;\n\n  /**\n   * Queries the Start Date <input> DOM element.\n   * @ignore\n   */\n  @query('input.date-start')\n  inputElStart!: HTMLInputElement;\n\n  /** Customizable text strings. */\n  @property({ type: Object })\n  textStrings = _defaultTextStrings;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  _textStrings = _defaultTextStrings;\n\n  /**\n   * Queries the End Date <input> DOM element.\n   * @ignore\n   */\n  @query('input.date-end')\n  inputElEnd!: HTMLInputElement;\n\n  override render() {\n    return html`\n      <div class=\"daterange-picker\" ?disabled=${this.disabled}>\n        <label class=\"label-text\" for=${this.name} ?disabled=${this.disabled}>\n          ${this.required\n            ? html`<abbr\n                class=\"required\"\n                title=${this._textStrings.requiredText}\n                aria-label=${this._textStrings.requiredText}\n                >*</abbr\n              >`\n            : null}\n          <slot></slot>\n        </label>\n\n        <div class=\"wrapper\">\n          <div class=\"input-wrapper\">\n            <input\n              class=\"${classMap({\n                'date-start': true,\n                'size--sm': this.size === 'sm',\n                'size--lg': this.size === 'lg',\n              })}\"\n              type=${this.datePickerType === DATE_PICKER_TYPES.WITHITIME\n                ? 'datetime-local'\n                : 'date'}\n              id=\"${this.name}-start\"\n              name=\"${this.name}-end\"\n              aria-label=\"Start Date\"\n              value=${this.startDate}\n              ?required=${this.required}\n              ?disabled=${this.disabled}\n              ?invalid=${this._isInvalid}\n              aria-invalid=${this._isInvalid}\n              aria-describedby=${this._isInvalid\n                ? 'error'\n                : this.warnText !== '' && !this._isInvalid\n                ? 'warning'\n                : ''}\n              min=${ifDefined(this.minDate)}\n              max=${ifDefined(this.endDate ?? this.maxDate ?? '')}\n              step=${ifDefined(this.step)}\n              @input=${(e: any) => this.handleStartDate(e)}\n            />\n          </div>\n\n          <span class=\"range-span\">—</span>\n          <div class=\"input-wrapper\">\n            <input\n              class=\"${classMap({\n                'date-end': true,\n                'size--sm': this.size === 'sm',\n                'size--lg': this.size === 'lg',\n              })}\"\n              type=${this.datePickerType === DATE_PICKER_TYPES.WITHITIME\n                ? 'datetime-local'\n                : 'date'}\n              id=\"${this.name}-end\"\n              name=\"${this.name}-end\"\n              aria-label=\"End Date\"\n              value=${this.endDate}\n              ?required=${this.required}\n              ?disabled=${this.disabled}\n              ?invalid=${this._isInvalid}\n              aria-invalid=${this._isInvalid}\n              aria-describedby=${this._isInvalid\n                ? 'error'\n                : this.warnText !== '' && !this._isInvalid\n                ? 'warning'\n                : ''}\n              min=${ifDefined(this.startDate ?? this.minDate ?? '')}\n              max=${ifDefined(this.maxDate)}\n              step=${ifDefined(this.step)}\n              @input=${(e: any) => this.handleEndDate(e)}\n            />\n          </div>\n        </div>\n\n        ${this.caption !== ''\n          ? html` <div class=\"caption\">${this.caption}</div> `\n          : null}\n        ${this._isInvalid\n          ? html`\n              <div id=\"error\" class=\"error\">\n                ${this.invalidText || this._internalValidationMsg}\n              </div>\n            `\n          : null}\n        ${this.warnText !== '' && !this._isInvalid\n          ? html`<div id=\"warning\" class=\"warn\">${this.warnText}</div>`\n          : null}\n      </div>\n    `;\n  }\n\n  override updated(changedProps: PropertyValues) {\n    // preserve FormMixin updated function\n    this._onUpdated(changedProps);\n\n    if (changedProps.has('startDate')) {\n      this.inputElStart.value = this.startDate;\n    }\n\n    if (changedProps.has('endDate')) {\n      this.inputElEnd.value = this.endDate;\n    }\n\n    if (changedProps.has('startDate') || changedProps.has('endDate')) {\n      this._validate(false, false);\n\n      const combineVals =\n        this.startDate !== '' && this.endDate !== ''\n          ? `${this.startDate}:${this.endDate}`\n          : '';\n      // set form value on element internals\n      this._internals.setFormValue(combineVals);\n    }\n  }\n\n  // on-change start date\n  private async handleStartDate(e: any) {\n    this.startDate = e.target.value;\n\n    await this.updateComplete;\n    this._validate(true, false);\n    this._emitValue(e);\n  }\n\n  // on-change end date\n  private async handleEndDate(e: any) {\n    this.endDate = e.target.value;\n\n    await this.updateComplete;\n    this._validate(true, false);\n    this._emitValue(e);\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    const StartValid = this.inputElStart.checkValidity();\n    const EndValid = this.inputElEnd.checkValidity();\n\n    if (StartValid && EndValid) {\n      // clear validation errors\n      this._internals.setValidity({});\n    } else if (!StartValid) {\n      // validate start date\n\n      // get validity state from inputEl, combine customError flag if invalidText is provided\n      const Validity =\n        this.invalidText !== ''\n          ? { ...this.inputElStart.validity, customError: true }\n          : this.inputElStart.validity;\n\n      // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n      const ValidationMessage =\n        this.invalidText !== ''\n          ? this.invalidText\n          : this.inputElStart.validationMessage;\n\n      this._internals.setValidity(\n        Validity,\n        ValidationMessage,\n        this.inputElStart\n      );\n    } else if (!EndValid) {\n      // validate end date\n\n      // get validity state from inputEl, combine customError flag if invalidText is provided\n      const Validity =\n        this.invalidText !== ''\n          ? { ...this.inputElEnd.validity, customError: true }\n          : this.inputElEnd.validity;\n\n      // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n      const ValidationMessage =\n        this.invalidText !== ''\n          ? this.invalidText\n          : this.inputElEnd.validationMessage;\n\n      this._internals.setValidity(Validity, ValidationMessage, this.inputElEnd);\n    }\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this._internalValidationMsg =\n        this.inputElStart.validationMessage ||\n        this.inputElEnd.validationMessage;\n    }\n\n    // focus the form field to show validity\n    if (report) {\n      this._internals.reportValidity();\n    }\n  }\n\n  private _emitValue(e: any) {\n    const event = new CustomEvent('on-input', {\n      detail: {\n        startDate: this.startDate,\n        endDate: this.endDate,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n    }\n  }\n\n  // private _handleFormdata(e: any) {\n  //   const combineVals =\n  //     this.startDate !== '' && this.endDate !== ''\n  //       ? `${this.startDate}:${this.endDate}`\n  //       : '';\n  //   e.formData.append(this.name, combineVals);\n  // }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-date-range-picker': DateRangePicker;\n  }\n}\n"],"names":["_defaultTextStrings","requiredText","DateRangePicker","FormMixin","LitElement","constructor","this","caption","size","startDate","endDate","required","disabled","datePickerType","DATE_PICKER_TYPES","SINGLE","warnText","textStrings","_textStrings","render","html","name","classMap","WITHITIME","_isInvalid","ifDefined","minDate","_b","_a","maxDate","step","e","handleStartDate","_d","_c","handleEndDate","invalidText","_internalValidationMsg","updated","changedProps","_onUpdated","has","inputElStart","value","inputElEnd","_validate","combineVals","_internals","setFormValue","target","updateComplete","_emitValue","interacted","report","StartValid","checkValidity","EndValid","setValidity","Validity","validity","customError","ValidationMessage","validationMessage","reportValidity","event","CustomEvent","detail","origEvent","dispatchEvent","willUpdate","deepmerge","styles","DateRangePickerScss","__decorate","property","type","String","prototype","Boolean","query","Object","state","customElement"],"mappings":"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"}
+{"version":3,"file":"daterangepicker.js","sources":["../../../../src/components/reusable/daterangepicker/daterangepicker.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { DATE_PICKER_TYPES } from '../datePicker/defs';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport DateRangePickerScss from './daterangepicker.scss';\nimport { deepmerge } from 'deepmerge-ts';\n\nconst _defaultTextStrings = {\n  requiredText: 'Required',\n};\n\n/**\n * Date-Range picker\n * @fires on-input - Captures the input event and emits the selected values and original event details. (Only if startDate <= endDate)\n * @prop {string} minDate - Mimimum date in YYYY-MM-DD format. If the value isn't a possible date string in the format, then the element has no minimum date value.\n * @prop {string} maxDate - Maximum date in YYYY-MM-DD format. If the value isn't a possible date string in the format, then the element has no maximum date value.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-date-range-picker')\nexport class DateRangePicker extends FormMixin(LitElement) {\n  static override styles = DateRangePickerScss;\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Datepicker size. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Datepicker Start date in YYYY-MM-DD format. */\n  @property({ type: String })\n  startDate = '';\n\n  /** Datepicker End date in YYYY-MM-DD format. */\n  @property({ type: String })\n  endDate = '';\n\n  /** Makes the date required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Date disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Date range picker types. Default 'single' */\n  @property({ type: String })\n  datePickerType: DATE_PICKER_TYPES = DATE_PICKER_TYPES.SINGLE;\n\n  /** Date warning text */\n  @property({ type: String })\n  warnText = '';\n\n  /** Maximum date in YYYY-MM-DD format.\n   * If the value isn't a possible date string in the format, then the element has no maximum date value\n   */\n  @property({ type: String })\n  maxDate!: string;\n\n  /** Minimum date in YYYY-MM-DD format,\n   * If the value isn't a possible date string in the format, then the element has no minimum date value.\n   */\n  @property({ type: String })\n  minDate!: string;\n\n  /** Specifies the granularity that the value must adhere to, or the special value any,\n   * For date inputs, the value of step is given in days; and is treated as a number of milliseconds equal to 86,400,000 times the step value.\n   * The default value of step is 1, indicating 1 day.*/\n  @property({ type: String })\n  step!: string;\n\n  /**\n   * Queries the Start Date <input> DOM element.\n   * @ignore\n   */\n  @query('input.date-start')\n  inputElStart!: HTMLInputElement;\n\n  /** Customizable text strings. */\n  @property({ type: Object })\n  textStrings = _defaultTextStrings;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  _textStrings = _defaultTextStrings;\n\n  /**\n   * Queries the End Date <input> DOM element.\n   * @ignore\n   */\n  @query('input.date-end')\n  inputElEnd!: HTMLInputElement;\n\n  override render() {\n    return html`\n      <div class=\"daterange-picker\" ?disabled=${this.disabled}>\n        <label class=\"label-text\" for=${this.name} ?disabled=${this.disabled}>\n          ${this.required\n            ? html`<abbr\n                class=\"required\"\n                title=${this._textStrings.requiredText}\n                aria-label=${this._textStrings.requiredText}\n                >*</abbr\n              >`\n            : null}\n          <slot></slot>\n        </label>\n\n        <div class=\"wrapper\">\n          <div class=\"input-wrapper\">\n            <input\n              class=\"${classMap({\n                'date-start': true,\n                'size--sm': this.size === 'sm',\n                'size--lg': this.size === 'lg',\n              })}\"\n              type=${this.datePickerType === DATE_PICKER_TYPES.WITHITIME\n                ? 'datetime-local'\n                : 'date'}\n              id=\"${this.name}-start\"\n              name=\"${this.name}-end\"\n              aria-label=\"Start Date\"\n              value=${this.startDate}\n              ?required=${this.required}\n              ?disabled=${this.disabled}\n              ?invalid=${this._isInvalid}\n              aria-invalid=${this._isInvalid}\n              aria-describedby=${this._isInvalid\n                ? 'error'\n                : this.warnText !== '' && !this._isInvalid\n                ? 'warning'\n                : ''}\n              min=${ifDefined(this.minDate)}\n              max=${ifDefined(this.endDate ?? this.maxDate ?? '')}\n              step=${ifDefined(this.step)}\n              @input=${(e: any) => this.handleStartDate(e)}\n            />\n          </div>\n\n          <span class=\"range-span\">—</span>\n          <div class=\"input-wrapper\">\n            <input\n              class=\"${classMap({\n                'date-end': true,\n                'size--sm': this.size === 'sm',\n                'size--lg': this.size === 'lg',\n              })}\"\n              type=${this.datePickerType === DATE_PICKER_TYPES.WITHITIME\n                ? 'datetime-local'\n                : 'date'}\n              id=\"${this.name}-end\"\n              name=\"${this.name}-end\"\n              aria-label=\"End Date\"\n              value=${this.endDate}\n              ?required=${this.required}\n              ?disabled=${this.disabled}\n              ?invalid=${this._isInvalid}\n              aria-invalid=${this._isInvalid}\n              aria-describedby=${this._isInvalid\n                ? 'error'\n                : this.warnText !== '' && !this._isInvalid\n                ? 'warning'\n                : ''}\n              min=${ifDefined(this.startDate ?? this.minDate ?? '')}\n              max=${ifDefined(this.maxDate)}\n              step=${ifDefined(this.step)}\n              @input=${(e: any) => this.handleEndDate(e)}\n            />\n          </div>\n        </div>\n\n        ${this.caption !== ''\n          ? html` <div class=\"caption\">${this.caption}</div> `\n          : null}\n        ${this._isInvalid\n          ? html`\n              <div id=\"error\" class=\"error\">\n                ${this.invalidText || this._internalValidationMsg}\n              </div>\n            `\n          : null}\n        ${this.warnText !== '' && !this._isInvalid\n          ? html`<div id=\"warning\" class=\"warn\">${this.warnText}</div>`\n          : null}\n      </div>\n    `;\n  }\n\n  override updated(changedProps: PropertyValues) {\n    // preserve FormMixin updated function\n    this._onUpdated(changedProps);\n\n    if (changedProps.has('startDate')) {\n      this.inputElStart.value = this.startDate;\n    }\n\n    if (changedProps.has('endDate')) {\n      this.inputElEnd.value = this.endDate;\n    }\n\n    if (changedProps.has('startDate') || changedProps.has('endDate')) {\n      this._validate(false, false);\n\n      const combineVals =\n        this.startDate !== '' && this.endDate !== ''\n          ? `${this.startDate}:${this.endDate}`\n          : '';\n      // set form value on element internals\n      this._internals.setFormValue(combineVals);\n    }\n  }\n\n  // on-change start date\n  private async handleStartDate(e: any) {\n    this.startDate = e.target.value;\n\n    await this.updateComplete;\n    this._validate(true, false);\n    this._emitValue(e);\n  }\n\n  // on-change end date\n  private async handleEndDate(e: any) {\n    this.endDate = e.target.value;\n\n    await this.updateComplete;\n    this._validate(true, false);\n    this._emitValue(e);\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    const StartValid = this.inputElStart.checkValidity();\n    const EndValid = this.inputElEnd.checkValidity();\n\n    if (StartValid && EndValid) {\n      // clear validation errors\n      this._internals.setValidity({});\n    } else if (!StartValid) {\n      // validate start date\n\n      // get validity state from inputEl, combine customError flag if invalidText is provided\n      const Validity =\n        this.invalidText !== ''\n          ? { ...this.inputElStart.validity, customError: true }\n          : this.inputElStart.validity;\n\n      // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n      const ValidationMessage =\n        this.invalidText !== ''\n          ? this.invalidText\n          : this.inputElStart.validationMessage;\n\n      this._internals.setValidity(\n        Validity,\n        ValidationMessage,\n        this.inputElStart\n      );\n    } else if (!EndValid) {\n      // validate end date\n\n      // get validity state from inputEl, combine customError flag if invalidText is provided\n      const Validity =\n        this.invalidText !== ''\n          ? { ...this.inputElEnd.validity, customError: true }\n          : this.inputElEnd.validity;\n\n      // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n      const ValidationMessage =\n        this.invalidText !== ''\n          ? this.invalidText\n          : this.inputElEnd.validationMessage;\n\n      this._internals.setValidity(Validity, ValidationMessage, this.inputElEnd);\n    }\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this._internalValidationMsg =\n        this.inputElStart.validationMessage ||\n        this.inputElEnd.validationMessage;\n    }\n\n    // focus the form field to show validity\n    if (report) {\n      this._internals.reportValidity();\n    }\n  }\n\n  private _emitValue(e: any) {\n    const event = new CustomEvent('on-input', {\n      detail: {\n        startDate: this.startDate,\n        endDate: this.endDate,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n    }\n  }\n\n  // private _handleFormdata(e: any) {\n  //   const combineVals =\n  //     this.startDate !== '' && this.endDate !== ''\n  //       ? `${this.startDate}:${this.endDate}`\n  //       : '';\n  //   e.formData.append(this.name, combineVals);\n  // }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-date-range-picker': DateRangePicker;\n  }\n}\n"],"names":["_defaultTextStrings","requiredText","DateRangePicker","FormMixin","LitElement","constructor","this","caption","size","startDate","endDate","required","disabled","datePickerType","DATE_PICKER_TYPES","SINGLE","warnText","textStrings","_textStrings","render","html","name","classMap","WITHITIME","_isInvalid","ifDefined","minDate","_b","_a","maxDate","step","e","handleStartDate","_d","_c","handleEndDate","invalidText","_internalValidationMsg","updated","changedProps","_onUpdated","has","inputElStart","value","inputElEnd","_validate","combineVals","_internals","setFormValue","target","updateComplete","_emitValue","interacted","report","StartValid","checkValidity","EndValid","setValidity","Validity","validity","customError","ValidationMessage","validationMessage","reportValidity","event","CustomEvent","detail","origEvent","dispatchEvent","willUpdate","deepmerge","styles","DateRangePickerScss","__decorate","property","type","String","prototype","Boolean","query","Object","state","customElement"],"mappings":"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"}