@kyndryl-design-system/shidoka-applications 1.34.0 → 1.34.2

package/common/mixins/form-input.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+type Constructor<T> = new (...args: any[]) => T;
+export declare class FormMixinInterface {
+    _internals: any;
+    name: string;
+    value: any;
+    invalidText: string;
+    _internalValidationMsg: string;
+    _isInvalid: boolean;
+    _handleInvalid: Function;
+    _handleFormdata: Function;
+    _onUpdated: Function;
+    _onConnected: Function;
+    _onDisconnected: Function;
+}
+export declare const FormMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<FormMixinInterface> & T;
+export {};
+//# sourceMappingURL=form-input.d.ts.map

package/common/mixins/form-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-input.d.ts","sourceRoot":"","sources":["../../../src/common/mixins/form-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGjC,KAAK,WAAW,CAAC,CAAC,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAEhD,MAAM,CAAC,OAAO,OAAO,kBAAkB;IACrC,UAAU,EAAE,GAAG,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,QAAQ,CAAC;IACzB,eAAe,EAAE,QAAQ,CAAC;IAC1B,UAAU,EAAE,QAAQ,CAAC;IACrB,YAAY,EAAE,QAAQ,CAAC;IACvB,eAAe,EAAE,QAAQ,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS,2FAuIrB,CAAC"}

package/common/mixins/form-input.js

@@ -0,0 +1,2 @@
+import{__decorate as t}from'./../../external/tslib/tslib.es6.js';import'./../../external/@lit/reactive-element/reactive-element.js';import'./../../external/lit-html/lit-html.js';import{LitElement as e}from'./../../external/lit-element/lit-element.js';import{property as i}from'./../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../external/@lit/reactive-element/decorators/state.js';import'./../../external/@lit/reactive-element/decorators/query-assigned-elements.js';const s=s=>{class o extends s{constructor(){super(...arguments),this._internals=this.attachInternals(),this.value="",this.name="",this.invalidText="",this._internalValidationMsg="",this._isInvalid=!1,this._handleInvalid=()=>{this._validate(!0,!1)}}_onUpdated(t){t.has("value")&&(this._internals.setFormValue(this.value),this._validate(!1,!1)),(t.has("invalidText")||t.has("_internalValidationMsg"))&&(this._isInvalid=""!==this.invalidText||""!==this._internalValidationMsg),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!1)}updated(t){this._onUpdated(t)}_onConnected(){this._internals.form&&this.addEventListener("invalid",this._handleInvalid)}connectedCallback(){super.connectedCallback(),this._onConnected()}_onDisconnected(){this._internals.form&&this.removeEventListener("invalid",this._handleInvalid)}disconnectedCallback(){this._onDisconnected(),super.disconnectedCallback()}}return o.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},o.formAssociated=!0,t([n()],o.prototype,"_internals",void 0),t([i({type:String})],o.prototype,"value",void 0),t([i({type:String})],o.prototype,"name",void 0),t([i({type:String})],o.prototype,"invalidText",void 0),t([n()],o.prototype,"_internalValidationMsg",void 0),t([n()],o.prototype,"_isInvalid",void 0),o};export{s as FormMixin};
+//# sourceMappingURL=form-input.js.map

package/common/mixins/form-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-input.js","sources":["../../../src/common/mixins/form-input.ts"],"sourcesContent":["import { LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\ntype Constructor<T> = new (...args: any[]) => T;\n\nexport declare class FormMixinInterface {\n  _internals: any;\n  name: string;\n  value: any;\n  invalidText: string;\n  _internalValidationMsg: string;\n  _isInvalid: boolean;\n  _handleInvalid: Function;\n  _handleFormdata: Function;\n  _onUpdated: Function;\n  _onConnected: Function;\n  _onDisconnected: Function;\n}\n\nexport const FormMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  abstract class FormMixinClass extends superClass {\n    /**\n     * Delegate focus internally.\n     * @ignore */\n    static shadowRootOptions = {\n      ...LitElement.shadowRootOptions,\n      delegatesFocus: true,\n    };\n\n    /**\n     * Associate the component with forms.\n     * @ignore\n     */\n    static formAssociated = true;\n\n    /**\n     * Attached internals for form association.\n     * @ignore\n     */\n    @state()\n    _internals = this.attachInternals();\n\n    /** Input value. */\n    @property({ type: String })\n    value = '';\n\n    /** Input name. */\n    @property({ type: String })\n    name = '';\n\n    /** Input invalid text. */\n    @property({ type: String })\n    invalidText = '';\n\n    /**\n     * Internal validation message.\n     * @ignore\n     */\n    @state()\n    _internalValidationMsg = '';\n\n    /**\n     * isInvalid when internalValidationMsg or invalidText is non-empty.\n     * @ignore\n     */\n    @state()\n    _isInvalid = false;\n\n    // /** Handles the form element formdata event and appends the name/value. Alternative solution to internals.setFormValue.\n    //  * @internal\n    // */\n    // private _handleFormdata = (e: any) => {\n    //   e.formData.append(this.name, this.value);\n    // };\n\n    /** Handles the invalid event, triggered on form submit, and runs validation.\n     * @internal\n     */\n    private _handleInvalid = () => {\n      this._validate(true, false);\n    };\n\n    /** Component _validate function reference. */\n    abstract _validate(interacted: Boolean, report: Boolean): void;\n\n    private _onUpdated(changedProps: any) {\n      if (changedProps.has('value')) {\n        // set form value on element internals\n        this._internals.setFormValue(this.value);\n\n        // trigger validation\n        this._validate(false, false);\n      }\n\n      if (\n        changedProps.has('invalidText') ||\n        changedProps.has('_internalValidationMsg')\n      ) {\n        // set _isInvalid prop based on internal or external invalid message presence\n        this._isInvalid =\n          this.invalidText !== '' || this._internalValidationMsg !== ''\n            ? true\n            : false;\n      }\n\n      if (\n        changedProps.has('invalidText') &&\n        changedProps.get('invalidText') !== undefined\n      ) {\n        this._validate(false, false);\n      }\n    }\n\n    override updated(changedProps: any) {\n      this._onUpdated(changedProps);\n    }\n\n    private _onConnected() {\n      // attach event listeners if within a form\n      if (this._internals.form) {\n        // this._internals.form.addEventListener('formdata', (e) =>\n        //   this._handleFormdata(e)\n        // );\n\n        this.addEventListener('invalid', this._handleInvalid);\n      }\n    }\n\n    override connectedCallback(): void {\n      super.connectedCallback();\n\n      this._onConnected();\n    }\n\n    private _onDisconnected() {\n      // detach event listeners if within a form\n      if (this._internals.form) {\n        // this._internals.form.removeEventListener('formdata', (e) =>\n        //   this._handleFormdata(e)\n        // );\n\n        this.removeEventListener('invalid', this._handleInvalid);\n      }\n    }\n\n    override disconnectedCallback(): void {\n      this._onDisconnected();\n\n      super.disconnectedCallback();\n    }\n  }\n\n  // @ts-ignore\n  return FormMixinClass as Constructor<FormMixinInterface> & T;\n};\n"],"names":["FormMixin","superClass","FormMixinClass","constructor","this","_internals","attachInternals","value","name","invalidText","_internalValidationMsg","_isInvalid","_handleInvalid","_validate","_onUpdated","changedProps","has","setFormValue","undefined","get","updated","_onConnected","form","addEventListener","connectedCallback","super","_onDisconnected","removeEventListener","disconnectedCallback","shadowRootOptions","LitElement","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String"],"mappings":"0gBAmBa,MAAAA,EAAgDC,IAC3D,MAAeC,UAAuBD,EAAtC,WAAAE,uBAoBEC,KAAAC,WAAaD,KAAKE,kBAIlBF,KAAKG,MAAG,GAIRH,KAAII,KAAG,GAIPJ,KAAWK,YAAG,GAOdL,KAAsBM,uBAAG,GAOzBN,KAAUO,YAAG,EAYLP,KAAcQ,eAAG,KACvBR,KAAKS,WAAU,GAAM,EAAM,CAuE9B,CAjES,UAAAC,CAAWC,GACbA,EAAaC,IAAI,WAEnBZ,KAAKC,WAAWY,aAAab,KAAKG,OAGlCH,KAAKS,WAAU,GAAO,KAItBE,EAAaC,IAAI,gBACjBD,EAAaC,IAAI,6BAGjBZ,KAAKO,WACkB,KAArBP,KAAKK,aAAsD,KAAhCL,KAAKM,wBAMlCK,EAAaC,IAAI,qBACmBE,IAApCH,EAAaI,IAAI,gBAEjBf,KAAKS,WAAU,GAAO,EAEzB,CAEQ,OAAAO,CAAQL,GACfX,KAAKU,WAAWC,EACjB,CAEO,YAAAM,GAEFjB,KAAKC,WAAWiB,MAKlBlB,KAAKmB,iBAAiB,UAAWnB,KAAKQ,eAEzC,CAEQ,iBAAAY,GACPC,MAAMD,oBAENpB,KAAKiB,cACN,CAEO,eAAAK,GAEFtB,KAAKC,WAAWiB,MAKlBlB,KAAKuB,oBAAoB,UAAWvB,KAAKQ,eAE5C,CAEQ,oBAAAgB,GACPxB,KAAKsB,kBAELD,MAAMG,sBACP,EAIH,OAjIS1B,EAAA2B,kBAAoB,IACtBC,EAAWD,kBACdE,gBAAgB,GAOX7B,EAAc8B,gBAAG,EAOxBC,EAAA,CADCC,KACmChC,EAAAiC,UAAA,kBAAA,GAIpCF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACPpC,EAAAiC,UAAA,aAAA,GAIXF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACRpC,EAAAiC,UAAA,YAAA,GAIVF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACDpC,EAAAiC,UAAA,mBAAA,GAOjBF,EAAA,CADCC,KAC2BhC,EAAAiC,UAAA,8BAAA,GAO5BF,EAAA,CADCC,KACkBhC,EAAAiC,UAAA,kBAAA,GAuFdjC,CAAqD"}

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

@@ -2,6 +2,7 @@ import { LitElement } from 'lit';
 import '../textInput';
 import './checkbox';
 import '@kyndryl-design-system/shidoka-foundation/components/icon';
+declare const CheckboxGroup_base: (new (...args: any[]) => import("../../../common/mixins/form-input").FormMixinInterface) & typeof LitElement;
 /**
  * Checkbox group container.
  * @fires on-checkbox-group-change - Captures the change event and emits the selected values.
@@ -10,15 +11,8 @@ import '@kyndryl-design-system/shidoka-foundation/components/icon';
  * @slot unnamed - Slot for individual checkboxes.
  * @slot label - Slot for label text.
  */
-export declare class CheckboxGroup extends LitElement {
+export declare class CheckboxGroup extends CheckboxGroup_base {
     static styles: any;
-    /**
-     * Associate the component with forms.
-     * @ignore
-     */
-    static formAssociated: boolean;
-    /** Checkbox input name attribute. */
-    name: string;
     /** Checkbox group selected values. */
     value: Array<any>;
     /** Makes a single selection required. */
@@ -75,36 +69,17 @@ export declare class CheckboxGroup extends LitElement {
         required: string;
         error: string;
     };
-    /** Checkbox group invalid text. */
-    invalidText: string;
     checkboxes: Array<any>;
     filteredCheckboxes: Array<any>;
-    /**
-     * Attached internals for form association.
-     * @ignore
-     */
-    internals: ElementInternals;
-    /**
-     * Internal validation message.
-     * @ignore
-     */
-    internalValidationMsg: string;
-    /**
-     * isInvalid when internalValidationMsg or invalidText is non-empty.
-     * @ignore
-     */
-    isInvalid: boolean;
     render(): import("lit-html").TemplateResult<1>;
     willUpdate(changedProps: any): void;
     updated(changedProps: any): void;
     private _validate;
     private _handleCheckboxChange;
     private _emitChangeEvent;
-    private _handleFormdata;
     private _handleFilter;
     private _toggleRevealed;
     private _handleSlotChange;
-    private _handleInvalid;
     private _updateChildren;
     private _handleSubgroupChange;
     connectedCallback(): void;
@@ -115,4 +90,5 @@ declare global {
         'kyn-checkbox-group': CheckboxGroup;
     }
 }
+export {};
 //# sourceMappingURL=checkboxGroup.d.ts.map

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;AAKvC,OAAO,cAAc,CAAC;AACtB,OAAO,YAAY,CAAC;AACpB,OAAO,2DAA2D,CAAC;AAYnE;;;;;;;GAOG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,MAAqB;IAE3C;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B,qCAAqC;IAErC,IAAI,SAAM;IAEV,sCAAsC;IAEtC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAM;IAEvB,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;IAEnC,mCAAmC;IAEnC,WAAW,SAAM;IAUjB,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,CAAM;IAG5B,kBAAkB,EAAE,KAAK,CAAC,GAAG,CAAC,CAAM;IAEpC;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IA2FN,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,OAAO,CAAC,YAAY,EAAE,GAAG;IAmFlC,OAAO,CAAC,SAAS;IA2BjB,OAAO,CAAC,qBAAqB;IA6B7B,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,aAAa;IAuCrB,OAAO,CAAC,eAAe;IAuBvB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,qBAAqB;IAiEpB,iBAAiB;IAwBjB,oBAAoB;CAqB9B;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;;;;;;;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"}

package/components/reusable/checkbox/checkboxGroup.js

@@ -1,4 +1,4 @@
-import{__decorate as e}from'./../../../external/tslib/tslib.es6.js';import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as l}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as o}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{deepmerge as h}from'./../../../external/deepmerge-ts/dist/node/index.js';import a from"./checkboxGroup.scss.js";import"../textInput/textInput.js";import"./checkbox.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import n from'./../../../external/@carbon/icons/es/warning--filled/16.js';const d={selectAll:"Select all",showMore:"Show more",showLess:"Show less",search:"Search",required:"Required",error:"Error"};let r=class extends i{constructor(){super(...arguments),this.name="",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=d,this._textStrings=d,this.invalidText="",this.checkboxes=[],this.filteredCheckboxes=[],this.internals=this.attachInternals(),this.internalValidationMsg="",this.isInvalid=!1}render(){return t`
+import{__decorate as e}from'./../../../external/tslib/tslib.es6.js';import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as l}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as o}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{deepmerge as h}from'./../../../external/deepmerge-ts/dist/node/index.js';import{FormMixin as n}from"../../../common/mixins/form-input.js";import a from"./checkboxGroup.scss.js";import"../textInput/textInput.js";import"./checkbox.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import r from'./../../../external/@carbon/icons/es/warning--filled/16.js';const c={selectAll:"Select all",showMore:"Show more",showLess:"Show less",search:"Search",required:"Required",error:"Error"};let d=class extends(n(i)){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 t`
       <div>
         ${this.filterable?t`
               <kyn-text-input
@@ -29,14 +29,14 @@ import{__decorate as e}from'./../../../external/tslib/tslib.es6.js';import'./../
             <slot name="label"></slot>
           </legend>
 
-          ${this.isInvalid?t`
+          ${this._isInvalid?t`
                 <div class="error">
                   <kd-icon
-                    .icon="${n}"
+                    .icon="${r}"
                     title=${this._textStrings.error}
                     aria-label=${this._textStrings.error}
                   ></kd-icon>
-                  ${this.invalidText||this.internalValidationMsg}
+                  ${this.invalidText||this._internalValidationMsg}
                 </div>
               `:null}
 
@@ -49,7 +49,7 @@ import{__decorate as e}from'./../../../external/tslib/tslib.es6.js';import'./../
                     ?indeterminate=${this.selectAllIndeterminate}
                     ?required=${this.required}
                     ?disabled=${this.disabled}
-                    ?invalid=${""!==this.invalidText||""!==this.internalValidationMsg}
+                    ?invalid=${""!==this.invalidText||""!==this._internalValidationMsg}
                   >
                     ${this._textStrings.selectAll}
                   </kyn-checkbox>
@@ -71,5 +71,5 @@ import{__decorate as e}from'./../../../external/tslib/tslib.es6.js';import'./../
           </div>
         </fieldset>
       </div>
-    `}willUpdate(e){e.has("textStrings")&&(this._textStrings=h(d,this.textStrings))}updated(e){if(e.has("name")&&this.checkboxes.forEach((e=>{e.name=this.name})),e.has("value")){this._validate(!1,!1),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}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")&&void 0!==e.get("invalidText")&&this._validate(!1,!1),(e.has("invalidText")||e.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.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},s=this.required&&!this.value.length?"A selection is required.":"",l=""!==this.invalidText?this.invalidText:s;this.internals.setValidity(i,l,this.checkboxes[0]),e&&(this.internalValidationMsg=s),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)}_handleFormdata(e){this.value.forEach((t=>{e.formData.append(this.name,t)}))}_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()}_handleInvalid(){this._validate(!0,!1)}_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:s,parentValue:l,value:o,checked:h,childValues:a}=e.detail;if(i)if(h)t.includes(o)||t.push(o),a.forEach((e=>{t.includes(e)||t.push(e)}));else{const e=t.indexOf(o);t.splice(e,1),a.forEach((e=>{const i=t.indexOf(e);-1!==i&&t.splice(i,1)}))}else{if(h)t.includes(o)||t.push(o);else{const e=t.indexOf(o);-1!==e&&t.splice(e,1)}if(s)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.addEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.addEventListener("on-checkbox-subgroup-change",(e=>this._handleSubgroupChange(e))),this.internals.form&&(this.internals.form.addEventListener("formdata",(e=>this._handleFormdata(e))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.removeEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.removeEventListener("on-checkbox-subgroup-change",(e=>this._handleSubgroupChange(e))),this.internals.form&&(this.internals.form.removeEventListener("formdata",(e=>this._handleFormdata(e))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};r.styles=a,r.formAssociated=!0,e([l({type:String})],r.prototype,"name",void 0),e([l({type:Array})],r.prototype,"value",void 0),e([l({type:Boolean})],r.prototype,"required",void 0),e([l({type:Boolean})],r.prototype,"disabled",void 0),e([l({type:Boolean})],r.prototype,"horizontal",void 0),e([l({type:Boolean})],r.prototype,"selectAll",void 0),e([l({type:Boolean})],r.prototype,"selectAllChecked",void 0),e([l({type:Boolean})],r.prototype,"selectAllIndeterminate",void 0),e([l({type:Boolean})],r.prototype,"hideLegend",void 0),e([l({type:Boolean})],r.prototype,"filterable",void 0),e([o()],r.prototype,"searchTerm",void 0),e([l({type:Boolean})],r.prototype,"limitCheckboxes",void 0),e([o()],r.prototype,"_limitCount",void 0),e([o()],r.prototype,"limitRevealed",void 0),e([l({type:Object})],r.prototype,"textStrings",void 0),e([o()],r.prototype,"_textStrings",void 0),e([l({type:String})],r.prototype,"invalidText",void 0),e([o()],r.prototype,"checkboxes",void 0),e([o()],r.prototype,"filteredCheckboxes",void 0),e([o()],r.prototype,"internals",void 0),e([o()],r.prototype,"internalValidationMsg",void 0),e([o()],r.prototype,"isInvalid",void 0),r=e([s("kyn-checkbox-group")],r);export{r as CheckboxGroup};
+    `}willUpdate(e){e.has("textStrings")&&(this._textStrings=h(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},s=this.required&&!this.value.length?"A selection is required.":"",l=""!==this.invalidText?this.invalidText:s;this._internals.setValidity(i,l,this.checkboxes[0]),e&&(this._internalValidationMsg=s),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:s,parentValue:l,value:o,checked:h,childValues:n}=e.detail;if(i)if(h)t.includes(o)||t.push(o),n.forEach((e=>{t.includes(e)||t.push(e)}));else{const e=t.indexOf(o);t.splice(e,1),n.forEach((e=>{const i=t.indexOf(e);-1!==i&&t.splice(i,1)}))}else{if(h)t.includes(o)||t.push(o);else{const e=t.indexOf(o);-1!==e&&t.splice(e,1)}if(s)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()}};d.styles=a,e([l({type:Array})],d.prototype,"value",void 0),e([l({type:Boolean})],d.prototype,"required",void 0),e([l({type:Boolean})],d.prototype,"disabled",void 0),e([l({type:Boolean})],d.prototype,"horizontal",void 0),e([l({type:Boolean})],d.prototype,"selectAll",void 0),e([l({type:Boolean})],d.prototype,"selectAllChecked",void 0),e([l({type:Boolean})],d.prototype,"selectAllIndeterminate",void 0),e([l({type:Boolean})],d.prototype,"hideLegend",void 0),e([l({type:Boolean})],d.prototype,"filterable",void 0),e([o()],d.prototype,"searchTerm",void 0),e([l({type:Boolean})],d.prototype,"limitCheckboxes",void 0),e([o()],d.prototype,"_limitCount",void 0),e([o()],d.prototype,"limitRevealed",void 0),e([l({type:Object})],d.prototype,"textStrings",void 0),e([o()],d.prototype,"_textStrings",void 0),e([o()],d.prototype,"checkboxes",void 0),e([o()],d.prototype,"filteredCheckboxes",void 0),d=e([s("kyn-checkbox-group")],d);export{d 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 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 LitElement {\n  static override styles = CheckboxGroupScss;\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /** Checkbox input name attribute. */\n  @property({ type: String })\n  name = '';\n\n  /** Checkbox group selected values. */\n  @property({ type: Array })\n  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  /** Checkbox group invalid text. */\n  @property({ type: String })\n  invalidText = '';\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  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\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    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      this._validate(false, false);\n\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.get('invalidText') !== undefined\n    ) {\n      this._validate(false, false);\n    }\n\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\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(Validity, ValidationMessage, this.checkboxes[0]);\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  private _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 _handleInvalid() {\n    this._validate(true, false);\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    // 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    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.addEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n  }\n\n  override disconnectedCallback() {\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    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\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","LitElement","constructor","this","name","value","disabled","horizontal","selectAllChecked","selectAllIndeterminate","hideLegend","filterable","searchTerm","limitCheckboxes","_limitCount","limitRevealed","textStrings","_textStrings","invalidText","checkboxes","filteredCheckboxes","internals","attachInternals","internalValidationMsg","isInvalid","render","html","e","_handleFilter","errorIcon","_handleSlotChange","length","_toggleRevealed","willUpdate","changedProps","has","deepmerge","updated","forEach","checkbox","_validate","checked","includes","CheckedBoxesCount","filter","undefined","get","invalid","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","setValidity","reportValidity","_handleCheckboxChange","detail","map","newValues","index","indexOf","splice","push","_emitChangeEvent","event","CustomEvent","dispatchEvent","_handleFormdata","formData","append","visibleCount","toLowerCase","checkboxEl","textContent","checkboxText","style","display","revealed","expanded","Array","from","querySelectorAll","_updateChildren","requestUpdate","_handleInvalid","_handleSubgroupChange","isParent","parentChecked","parentValue","childValues","console","log","connectedCallback","super","addEventListener","form","disconnectedCallback","removeEventListener","styles","CheckboxGroupScss","formAssociated","__decorate","property","type","String","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 */\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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"}

package/components/reusable/datePicker/datepicker.d.ts

@@ -1,5 +1,6 @@
 import { LitElement, PropertyValues } from 'lit';
 import { DATE_PICKER_TYPES } from './defs';
+declare const DatePicker_base: (new (...args: any[]) => import("../../../common/mixins/form-input").FormMixinInterface) & typeof LitElement;
 /**
  * Datepicker.
  * @fires on-input - Captures the input event and emits the selected value and original event details.
@@ -7,38 +8,18 @@ import { DATE_PICKER_TYPES } from './defs';
  * @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
  * @slot unnamed - Slot for label text.
  */
-export declare class DatePicker extends LitElement {
+export declare class DatePicker extends DatePicker_base {
     static styles: any;
-    /** @ignore */
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
-    };
-    /**
-     * Associate the component with forms.
-     * @ignore
-     */
-    static formAssociated: boolean;
-    /**
-     * Attached internals for form association.
-     * @ignore
-     */
-    internals: ElementInternals;
     /** Datepicker size. "sm", "md", or "lg". */
     size: string;
     /** Optional text beneath the input. */
     caption: string;
     /** Datepicker value in YYYY-MM-DD or YYYY-MM-DDThh:mm format. */
     value: string;
-    /** Datepicker name. */
-    name: string;
     /** Makes the date required. */
     required: boolean;
     /** Date disabled state. */
     disabled: boolean;
-    /** Date invalid text. */
-    invalidText: string;
     /** Date warning text */
     warnText: string;
     /** Maximum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format.
@@ -59,29 +40,16 @@ export declare class DatePicker extends LitElement {
      * Queries the <input> DOM element.
      * @ignore
      */
-    inputEl: HTMLInputElement;
-    /**
-     * Internal validation message.
-     * @ignore
-     */
-    internalValidationMsg: string;
-    /**
-     * isInvalid when internalValidationMsg or invalidText is non-empty.
-     * @ignore
-     */
-    isInvalid: boolean;
+    _inputEl: HTMLInputElement;
     render(): import("lit-html").TemplateResult<1>;
     private handleInput;
     updated(changedProps: PropertyValues): void;
     private _validate;
-    private _handleFormdata;
-    private _handleInvalid;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'kyn-date-picker': DatePicker;
     }
 }
+export {};
 //# sourceMappingURL=datepicker.d.ts.map

package/components/reusable/datePicker/datepicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/datePicker/datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAG3C;;;;;;GAMG;AAEH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,MAAkB;IAExC,cAAc;IACd,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,4CAA4C;IAE5C,IAAI,SAAQ;IAEZ,uCAAuC;IAEvC,OAAO,SAAM;IAEb,iEAAiE;IAEjE,KAAK,SAAM;IAEX,uBAAuB;IAEvB,IAAI,SAAM;IAEV,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,2BAA2B;IAE3B,QAAQ,UAAS;IAEjB,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,wBAAwB;IAExB,QAAQ,SAAM;IAEd;;OAEG;IAEH,OAAO,EAAG,MAAM,CAAC;IAEjB;;OAEG;IAEH,OAAO,EAAG,MAAM,CAAC;IAEjB;;0DAEsD;IAEtD,IAAI,EAAG,MAAM,CAAC;IAEd,0CAA0C;IAE1C,cAAc,EAAE,iBAAiB,CAA4B;IAE7D;;;OAGG;IAEH,OAAO,EAAG,gBAAgB,CAAC;IAE3B;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAoDf,OAAO,CAAC,WAAW;IAeV,OAAO,CAAC,YAAY,EAAE,cAAc;IA4B7C,OAAO,CAAC,SAAS;IA0BjB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,cAAc;IAIb,iBAAiB,IAAI,IAAI;IAczB,oBAAoB,IAAI,IAAI;CAatC;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;KAC/B;CACF"}
+{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/datePicker/datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;;AAI3C;;;;;;GAMG;AAEH,qBACa,UAAW,SAAQ,eAAqB;IACnD,OAAgB,MAAM,MAAkB;IAExC,4CAA4C;IAE5C,IAAI,SAAQ;IAEZ,uCAAuC;IAEvC,OAAO,SAAM;IAEb,iEAAiE;IAExD,KAAK,SAAM;IAEpB,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,2BAA2B;IAE3B,QAAQ,UAAS;IAEjB,wBAAwB;IAExB,QAAQ,SAAM;IAEd;;OAEG;IAEH,OAAO,EAAG,MAAM,CAAC;IAEjB;;OAEG;IAEH,OAAO,EAAG,MAAM,CAAC;IAEjB;;0DAEsD;IAEtD,IAAI,EAAG,MAAM,CAAC;IAEd,0CAA0C;IAE1C,cAAc,EAAE,iBAAiB,CAA4B;IAE7D;;;OAGG;IAEH,QAAQ,EAAG,gBAAgB,CAAC;IAEnB,MAAM;IAoDf,OAAO,CAAC,WAAW;IAeV,OAAO,CAAC,YAAY,EAAE,cAAc;IAU7C,OAAO,CAAC,SAAS;CAyBlB;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;KAC/B;CACF"}

package/components/reusable/datePicker/datepicker.js

@@ -1,4 +1,4 @@
-import{__decorate as t}from'./../../../external/tslib/tslib.es6.js';import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as e}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as a}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{query as l}from'./../../../external/@lit/reactive-element/decorators/query.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{ifDefined as d}from'./../../../external/lit-html/directives/if-defined.js';import{classMap as o}from'./../../../external/lit-html/directives/class-map.js';import{DATE_PICKER_TYPES as r}from"./defs.js";import p from"./datepicker.scss.js";let h=class extends i{constructor(){super(...arguments),this.internals=this.attachInternals(),this.size="md",this.caption="",this.value="",this.name="",this.required=!1,this.disabled=!1,this.invalidText="",this.warnText="",this.datePickerType=r.SINGLE,this.internalValidationMsg="",this.isInvalid=!1}render(){return e`
+import{__decorate as t}from'./../../../external/tslib/tslib.es6.js';import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as e}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as a}from'./../../../external/@lit/reactive-element/decorators/property.js';import{query as l}from'./../../../external/@lit/reactive-element/decorators/query.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{ifDefined as o}from'./../../../external/lit-html/directives/if-defined.js';import{classMap as r}from'./../../../external/lit-html/directives/class-map.js';import{DATE_PICKER_TYPES as d}from"./defs.js";import{FormMixin as n}from"../../../common/mixins/form-input.js";import p from"./datepicker.scss.js";let m=class extends(n(i)){constructor(){super(...arguments),this.size="md",this.caption="",this.value="",this.required=!1,this.disabled=!1,this.warnText="",this.datePickerType=d.SINGLE}render(){return e`
       <div class="date-picker" ?disabled=${this.disabled}>
         <label class="label-text" for=${this.name} ?disabled=${this.disabled}>
           ${this.required?e`<span class="required">*</span>`:null}
@@ -6,31 +6,31 @@ import{__decorate as t}from'./../../../external/tslib/tslib.es6.js';import'./../
         </label>
 
         <div
-          class="${o({"input-wrapper":!0})}"
+          class="${r({"input-wrapper":!0})}"
         >
           <input
-            class="${o({"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
+            class="${r({"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
             datePickerType=${this.datePickerType}
-            type=${this.datePickerType===r.WITHITIME?"datetime-local":"date"}
+            type=${this.datePickerType===d.WITHITIME?"datetime-local":"date"}
             id=${this.name?this.name:"datepicker-1"}
             name=${this.name}
             value=${this.value}
             ?required=${this.required}
             ?disabled=${this.disabled}
-            ?invalid=${this.isInvalid}
-            min=${d(this.minDate)}
-            max=${d(this.maxDate)}
-            step=${d(this.step)}
+            ?invalid=${this._isInvalid}
+            min=${o(this.minDate)}
+            max=${o(this.maxDate)}
+            step=${o(this.step)}
             @input=${t=>this.handleInput(t)}
           />
         </div>
         ${""!==this.caption?e` <div class="caption">${this.caption}</div> `:null}
-        ${this.isInvalid?e`
+        ${this._isInvalid?e`
               <div class="error">
-                ${this.invalidText||this.internalValidationMsg}
+                ${this.invalidText||this._internalValidationMsg}
               </div>
             `:null}
-        ${""===this.warnText||this.isInvalid?null:e`<div class="warn">${this.warnText}</div>`}
+        ${""===this.warnText||this._isInvalid?null:e`<div class="warn">${this.warnText}</div>`}
       </div>
-    `}handleInput(t){this.value=t.target.value,this._validate(!0,!1);const e=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(e)}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!1),t.has("value")&&(this.inputEl.value=this.value,this._validate(!1,!1))}_validate(t,e){const i=""!==this.invalidText?{...this.inputEl.validity,customError:!0}:this.inputEl.validity,s=""!==this.invalidText?this.invalidText:this.inputEl.validationMessage;this.internals.setValidity(i,s,this.inputEl),t&&(this.internalValidationMsg=this.inputEl.validationMessage),e&&this.internals.reportValidity()}_handleFormdata(t){t.formData.append(this.name,this.value)}_handleInvalid(){this._validate(!0,!1)}connectedCallback(){super.connectedCallback(),this.internals.form&&(this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};h.styles=p,h.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},h.formAssociated=!0,t([n()],h.prototype,"internals",void 0),t([a({type:String})],h.prototype,"size",void 0),t([a({type:String})],h.prototype,"caption",void 0),t([a({type:String})],h.prototype,"value",void 0),t([a({type:String})],h.prototype,"name",void 0),t([a({type:Boolean})],h.prototype,"required",void 0),t([a({type:Boolean})],h.prototype,"disabled",void 0),t([a({type:String})],h.prototype,"invalidText",void 0),t([a({type:String})],h.prototype,"warnText",void 0),t([a({type:String})],h.prototype,"maxDate",void 0),t([a({type:String})],h.prototype,"minDate",void 0),t([a({type:String})],h.prototype,"step",void 0),t([a({type:String})],h.prototype,"datePickerType",void 0),t([l("input")],h.prototype,"inputEl",void 0),t([n()],h.prototype,"internalValidationMsg",void 0),t([n()],h.prototype,"isInvalid",void 0),h=t([s("kyn-date-picker")],h);export{h as DatePicker};
+    `}handleInput(t){this.value=t.target.value,this._validate(!0,!1);const e=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(e)}updated(t){this._onUpdated(t),t.has("value")&&(this._inputEl.value=this.value)}_validate(t,e){const i=""!==this.invalidText?{...this._inputEl.validity,customError:!0}:this._inputEl.validity,s=""!==this.invalidText?this.invalidText:this._inputEl.validationMessage;this._internals.setValidity(i,s,this._inputEl),t&&(this._internalValidationMsg=this._inputEl.validationMessage),e&&this._internals.reportValidity()}};m.styles=p,t([a({type:String})],m.prototype,"size",void 0),t([a({type:String})],m.prototype,"caption",void 0),t([a({type:String})],m.prototype,"value",void 0),t([a({type:Boolean})],m.prototype,"required",void 0),t([a({type:Boolean})],m.prototype,"disabled",void 0),t([a({type:String})],m.prototype,"warnText",void 0),t([a({type:String})],m.prototype,"maxDate",void 0),t([a({type:String})],m.prototype,"minDate",void 0),t([a({type:String})],m.prototype,"step",void 0),t([a({type:String})],m.prototype,"datePickerType",void 0),t([l("input")],m.prototype,"_inputEl",void 0),m=t([s("kyn-date-picker")],m);export{m 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, state, query } 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 DatePickerScss from './datepicker.scss';\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 LitElement {\n  static override styles = DatePickerScss;\n\n  /** @ignore */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\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  value = '';\n\n  /** Datepicker name. */\n  @property({ type: String })\n  name = '';\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 invalid text. */\n  @property({ type: String })\n  invalidText = '';\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  /**\n   * Queries the <input> DOM element.\n   * @ignore\n   */\n  @query('input')\n  inputEl!: HTMLInputElement;\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\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 ? html`<span class=\"required\">*</span>` : 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            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 class=\"error\">\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n        ${this.warnText !== '' && !this.isInvalid\n          ? html`<div 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    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      //check if any (internal / external )error msg. present then isInvalid is true\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n\n    if (\n      changedProps.has('invalidText') &&\n      changedProps.get('invalidText') !== undefined\n    ) {\n      this._validate(false, false);\n    }\n\n    if (changedProps.has('value')) {\n      this.inputEl.value = this.value;\n      // set form data value\n      // this.internals.setFormValue(this.value);\n\n      this._validate(false, false);\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  private _handleFormdata(e: any) {\n    e.formData.append(this.name, this.value);\n  }\n\n  private _handleInvalid() {\n    this._validate(true, false);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.addEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n  }\n\n  override disconnectedCallback(): void {\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n\n    super.disconnectedCallback();\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-date-picker': DatePicker;\n  }\n}\n"],"names":["DatePicker","LitElement","constructor","this","internals","attachInternals","size","caption","value","name","required","disabled","invalidText","warnText","datePickerType","DATE_PICKER_TYPES","SINGLE","internalValidationMsg","isInvalid","render","html","classMap","WITHITIME","ifDefined","minDate","maxDate","step","e","handleInput","target","_validate","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","undefined","get","inputEl","interacted","report","Validity","validity","customError","ValidationMessage","validationMessage","setValidity","reportValidity","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","DatePickerScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String","Boolean","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 } 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';\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  /**\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 ? html`<span class=\"required\">*</span>` : 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            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 class=\"error\">\n                ${this.invalidText || this._internalValidationMsg}\n              </div>\n            `\n          : null}\n        ${this.warnText !== '' && !this._isInvalid\n          ? html`<div 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}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-date-picker': DatePicker;\n  }\n}\n"],"names":["DatePicker","FormMixin","LitElement","constructor","this","size","caption","value","required","disabled","warnText","datePickerType","DATE_PICKER_TYPES","SINGLE","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","styles","DatePickerScss","__decorate","property","type","String","prototype","Boolean","query","customElement"],"mappings":"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"}