@kyndryl-design-system/shidoka-applications 1.4.0 → 1.5.0

package/components/reusable/checkbox/checkbox.js

@@ -17,5 +17,5 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
           .indeterminate=${this.indeterminate}
         />
       </label>
-    `}handleChange(e){const t=new CustomEvent("on-checkbox-change",{bubbles:!0,composed:!0,detail:{checked:e.target.checked,value:e.target.value,origEvent:e}});this.dispatchEvent(t)}};n.styles=d,n.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},e([s({type:String})],n.prototype,"value",void 0),e([s({type:String})],n.prototype,"name",void 0),e([s({type:Boolean})],n.prototype,"checked",void 0),e([s({type:Boolean})],n.prototype,"required",void 0),e([s({type:Boolean})],n.prototype,"disabled",void 0),e([s({type:Boolean})],n.prototype,"invalid",void 0),e([s({type:Boolean})],n.prototype,"visiblyHidden",void 0),e([s({type:Boolean})],n.prototype,"indeterminate",void 0),n=e([o("kyn-checkbox")],n);export{n as Checkbox};
+    `}handleChange(e){const t=new CustomEvent("on-checkbox-change",{bubbles:!0,composed:!0,detail:{checked:e.target.checked,value:e.target.value,origEvent:e}});this.dispatchEvent(t)}};n.styles=d,n.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},e([s({type:String})],n.prototype,"value",void 0),e([s({type:String})],n.prototype,"name",void 0),e([s({type:Boolean,reflect:!0})],n.prototype,"checked",void 0),e([s({type:Boolean})],n.prototype,"required",void 0),e([s({type:Boolean})],n.prototype,"disabled",void 0),e([s({type:Boolean})],n.prototype,"invalid",void 0),e([s({type:Boolean})],n.prototype,"visiblyHidden",void 0),e([s({type:Boolean})],n.prototype,"indeterminate",void 0),n=e([o("kyn-checkbox")],n);export{n as Checkbox};
 //# sourceMappingURL=checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../../src/components/reusable/checkbox/checkbox.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport CheckboxScss from './checkbox.scss';\n\n/**\n * Checkbox.\n * @fires on-checkbox-change - Captures the change event and emits the selected value and original event details.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-checkbox')\nexport class Checkbox extends LitElement {\n  static override styles = CheckboxScss;\n\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /** Checkbox value. */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * Checkbox name, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Checkbox checked state, inherited from the parent group if value matches.\n   */\n  @property({ type: Boolean })\n  checked = false;\n\n  /**\n   * Makes the input required, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Checkbox disabled state, inherited from the parent group.\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Checkbox group invalid state, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: Boolean })\n  invalid = false;\n\n  /**\n   * Determines whether the label should be hidden from visual view but remain accessible\n   * to screen readers for accessibility purposes.\n   */\n  @property({ type: Boolean })\n  visiblyHidden = false;\n\n  /** Determines whether the checkbox is in an indeterminate state. */\n  @property({ type: Boolean })\n  indeterminate = false;\n\n  override render() {\n    return html`\n      <label ?disabled=${this.disabled} ?invalid=${this.invalid}>\n        <span class=${classMap({ 'sr-only': this.visiblyHidden })}>\n          <slot></slot>\n        </span>\n\n        <input\n          type=\"checkbox\"\n          name=${this.name}\n          value=${this.value}\n          .checked=${this.checked}\n          ?checked=${this.checked}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          ?invalid=${this.invalid}\n          @change=${(e: any) => this.handleChange(e)}\n          .indeterminate=${this.indeterminate}\n        />\n      </label>\n    `;\n  }\n\n  private handleChange(e: any) {\n    // emit selected value, bubble so it can be captured by the checkbox group\n    const event = new CustomEvent('on-checkbox-change', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        checked: e.target.checked,\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-checkbox': Checkbox;\n  }\n}\n"],"names":["Checkbox","LitElement","constructor","this","value","name","checked","required","disabled","invalid","visiblyHidden","indeterminate","render","html","classMap","e","handleChange","event","CustomEvent","bubbles","composed","detail","target","origEvent","dispatchEvent","styles","CheckboxScss","shadowRootOptions","delegatesFocus","__decorate","property","type","String","prototype","Boolean","customElement"],"mappings":"sqBAWO,IAAMA,EAAN,cAAuBC,EAAvBC,kCAULC,KAAKC,MAAG,GAORD,KAAIE,KAAG,GAMPF,KAAOG,SAAG,EAOVH,KAAQI,UAAG,EAMXJ,KAAQK,UAAG,EAOXL,KAAOM,SAAG,EAOVN,KAAaO,eAAG,EAIhBP,KAAaQ,eAAG,CAsCjB,CApCUC,SACP,OAAOC,CAAI;yBACUV,KAAKK,qBAAqBL,KAAKM;sBAClCK,EAAS,CAAE,UAAWX,KAAKO;;;;;;iBAMhCP,KAAKE;kBACJF,KAAKC;qBACFD,KAAKG;qBACLH,KAAKG;sBACJH,KAAKI;sBACLJ,KAAKK;qBACNL,KAAKM;oBACLM,GAAWZ,KAAKa,aAAaD;2BACvBZ,KAAKQ;;;KAI7B,CAEOK,aAAaD,GAEnB,MAAME,EAAQ,IAAIC,YAAY,qBAAsB,CAClDC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACNf,QAASS,EAAEO,OAAOhB,QAClBF,MAAOW,EAAEO,OAAOlB,MAChBmB,UAAWR,KAGfZ,KAAKqB,cAAcP,EACpB,GA1FejB,EAAMyB,OAAGC,EAET1B,EAAA2B,kBAAoB,IAC/B1B,EAAW0B,kBACdC,gBAAgB,GAKlBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACPhC,EAAAiC,UAAA,aAAA,GAOXJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACRhC,EAAAiC,UAAA,YAAA,GAMVJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACFlC,EAAAiC,UAAA,eAAA,GAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDlC,EAAAiC,UAAA,gBAAA,GAMjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDlC,EAAAiC,UAAA,gBAAA,GAOjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACFlC,EAAAiC,UAAA,eAAA,GAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACIlC,EAAAiC,UAAA,qBAAA,GAItBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACIlC,EAAAiC,UAAA,qBAAA,GAtDXjC,EAAQ6B,EAAA,CADpBM,EAAc,iBACFnC"}
+{"version":3,"file":"checkbox.js","sources":["../../../../src/components/reusable/checkbox/checkbox.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport CheckboxScss from './checkbox.scss';\n\n/**\n * Checkbox.\n * @fires on-checkbox-change - Captures the change event and emits the selected value and original event details.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-checkbox')\nexport class Checkbox extends LitElement {\n  static override styles = CheckboxScss;\n\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /** Checkbox value. */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * Checkbox name, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Checkbox checked state, inherited from the parent group if value matches.\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * Makes the input required, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Checkbox disabled state, inherited from the parent group.\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Checkbox group invalid state, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: Boolean })\n  invalid = false;\n\n  /**\n   * Determines whether the label should be hidden from visual view but remain accessible\n   * to screen readers for accessibility purposes.\n   */\n  @property({ type: Boolean })\n  visiblyHidden = false;\n\n  /** Determines whether the checkbox is in an indeterminate state. */\n  @property({ type: Boolean })\n  indeterminate = false;\n\n  override render() {\n    return html`\n      <label ?disabled=${this.disabled} ?invalid=${this.invalid}>\n        <span class=${classMap({ 'sr-only': this.visiblyHidden })}>\n          <slot></slot>\n        </span>\n\n        <input\n          type=\"checkbox\"\n          name=${this.name}\n          value=${this.value}\n          .checked=${this.checked}\n          ?checked=${this.checked}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          ?invalid=${this.invalid}\n          @change=${(e: any) => this.handleChange(e)}\n          .indeterminate=${this.indeterminate}\n        />\n      </label>\n    `;\n  }\n\n  private handleChange(e: any) {\n    // emit selected value, bubble so it can be captured by the checkbox group\n    const event = new CustomEvent('on-checkbox-change', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        checked: e.target.checked,\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-checkbox': Checkbox;\n  }\n}\n"],"names":["Checkbox","LitElement","constructor","this","value","name","checked","required","disabled","invalid","visiblyHidden","indeterminate","render","html","classMap","e","handleChange","event","CustomEvent","bubbles","composed","detail","target","origEvent","dispatchEvent","styles","CheckboxScss","shadowRootOptions","delegatesFocus","__decorate","property","type","String","prototype","Boolean","reflect","customElement"],"mappings":"sqBAWO,IAAMA,EAAN,cAAuBC,EAAvBC,kCAULC,KAAKC,MAAG,GAORD,KAAIE,KAAG,GAMPF,KAAOG,SAAG,EAOVH,KAAQI,UAAG,EAMXJ,KAAQK,UAAG,EAOXL,KAAOM,SAAG,EAOVN,KAAaO,eAAG,EAIhBP,KAAaQ,eAAG,CAsCjB,CApCUC,SACP,OAAOC,CAAI;yBACUV,KAAKK,qBAAqBL,KAAKM;sBAClCK,EAAS,CAAE,UAAWX,KAAKO;;;;;;iBAMhCP,KAAKE;kBACJF,KAAKC;qBACFD,KAAKG;qBACLH,KAAKG;sBACJH,KAAKI;sBACLJ,KAAKK;qBACNL,KAAKM;oBACLM,GAAWZ,KAAKa,aAAaD;2BACvBZ,KAAKQ;;;KAI7B,CAEOK,aAAaD,GAEnB,MAAME,EAAQ,IAAIC,YAAY,qBAAsB,CAClDC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACNf,QAASS,EAAEO,OAAOhB,QAClBF,MAAOW,EAAEO,OAAOlB,MAChBmB,UAAWR,KAGfZ,KAAKqB,cAAcP,EACpB,GA1FejB,EAAMyB,OAAGC,EAET1B,EAAA2B,kBAAoB,IAC/B1B,EAAW0B,kBACdC,gBAAgB,GAKlBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACPhC,EAAAiC,UAAA,aAAA,GAOXJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACRhC,EAAAiC,UAAA,YAAA,GAMVJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,QAASC,SAAS,KACpBnC,EAAAiC,UAAA,eAAA,GAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDlC,EAAAiC,UAAA,gBAAA,GAMjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDlC,EAAAiC,UAAA,gBAAA,GAOjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACFlC,EAAAiC,UAAA,eAAA,GAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACIlC,EAAAiC,UAAA,qBAAA,GAItBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACIlC,EAAAiC,UAAA,qBAAA,GAtDXjC,EAAQ6B,EAAA,CADpBO,EAAc,iBACFpC"}

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

@@ -27,6 +27,14 @@ export declare class CheckboxGroup extends LitElement {
     horizontal: boolean;
     /** Adds a "Select All" checkbox to the top of the group. */
     selectAll: boolean;
+    /** Is "Select All" box checked.
+     * @internal
+     */
+    selectAllChecked: boolean;
+    /** Is "Select All" indeterminate.
+     * @internal
+     */
+    selectAllIndeterminate: boolean;
     /** Hide the group legend/label visually. */
     hideLegend: boolean;
     /** Adds a search input to enable filtering of checkboxes. */
@@ -77,6 +85,7 @@ export declare class CheckboxGroup extends LitElement {
     private _handleFormdata;
     private _handleFilter;
     private _toggleRevealed;
+    private _handleSlotChange;
     private _handleInvalid;
     connectedCallback(): void;
     disconnectedCallback(): void;

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;AASvC,OAAO,cAAc,CAAC;AACtB,OAAO,YAAY,CAAC;AACpB,OAAO,2DAA2D,CAAC;AAGnE;;;;;GAKG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,+BAAqB;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,4CAA4C;IAE5C,UAAU,UAAS;IAEnB,6DAA6D;IAE7D,UAAU,UAAS;IAEnB;;OAEG;IAEH,UAAU,SAAM;IAEhB,gEAAgE;IAEhE,eAAe,UAAS;IAExB;;OAEG;IAEH,aAAa,UAAS;IAEtB,iCAAiC;IAEjC,WAAW;;;;MAIT;IAEF,mCAAmC;IAEnC,WAAW,SAAM;IAEjB;;;OAGG;IAEH,UAAU,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAExB;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAoEN,OAAO,CAAC,YAAY,EAAE,GAAG;IAgElC,OAAO,CAAC,SAAS;IA6BjB,OAAO,CAAC,qBAAqB;IA6B7B,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,aAAa;IAoCrB,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,cAAc;IAIb,iBAAiB;IAmBjB,oBAAoB;CAiB9B;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;AASvC,OAAO,cAAc,CAAC;AACtB,OAAO,YAAY,CAAC;AACpB,OAAO,2DAA2D,CAAC;AAGnE;;;;;GAKG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,+BAAqB;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,gEAAgE;IAEhE,eAAe,UAAS;IAExB;;OAEG;IAEH,aAAa,UAAS;IAEtB,iCAAiC;IAEjC,WAAW;;;;MAIT;IAEF,mCAAmC;IAEnC,WAAW,SAAM;IAEjB;;;OAGG;IAEH,UAAU,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAExB;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAsEN,OAAO,CAAC,YAAY,EAAE,GAAG;IA2ElC,OAAO,CAAC,SAAS;IA6BjB,OAAO,CAAC,qBAAqB;IA6B7B,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,aAAa;IAoCrB,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,cAAc;IAIb,iBAAiB;IAmBjB,oBAAoB;CAiB9B;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"../../../_virtual/_tslib.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 a}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as o}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import n from"./checkboxGroup.scss.js";import"../textInput/textInput.js";import"./checkbox.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import h from'./../../../external/@carbon/icons/es/warning--filled/16.js';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.hideLegend=!1,this.filterable=!1,this.searchTerm="",this.limitCheckboxes=!1,this.limitRevealed=!1,this.textStrings={selectAll:"Select all",showMore:"Show more",showLess:"Show less"},this.invalidText="",this.internals=this.attachInternals(),this.internalValidationMsg="",this.isInvalid=!1}render(){return t`
+import{__decorate as e}from"../../../_virtual/_tslib.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{queryAssignedElements as a}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import n from"./checkboxGroup.scss.js";import"../textInput/textInput.js";import"./checkbox.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import h from'./../../../external/@carbon/icons/es/warning--filled/16.js';let d=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.limitRevealed=!1,this.textStrings={selectAll:"Select all",showMore:"Show more",showLess:"Show less"},this.invalidText="",this.internals=this.attachInternals(),this.internalValidationMsg="",this.isInvalid=!1}render(){return t`
       <fieldset ?disabled=${this.disabled}>
         ${this.filterable?t`
               <kyn-text-input
@@ -22,6 +22,8 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
                 <kyn-checkbox
                   class="select-all"
                   value="selectAll"
+                  ?checked=${this.selectAllChecked}
+                  ?indeterminate=${this.selectAllIndeterminate}
                   ?required=${this.required}
                   ?disabled=${this.disabled}
                   ?invalid=${""!==this.invalidText||""!==this.internalValidationMsg}
@@ -30,7 +32,7 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
                 </kyn-checkbox>
               `:null}
 
-          <slot></slot>
+          <slot @slotchange=${this._handleSlotChange}></slot>
 
           ${this.limitCheckboxes?t`
                 <button
@@ -51,5 +53,5 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
               </div>
             `:null}
       </fieldset>
-    `}updated(e){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)}))),e.has("required")&&this.checkboxes.forEach((e=>{e.required=this.required})),e.has("disabled")&&this.checkboxes.forEach((e=>{e.disabled=this.disabled})),e.has("invalidText")&&void 0!==e.get("invalidText")&&this._validate(!1,!0),(e.has("invalidText")||e.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg,this.checkboxes.forEach((e=>{e.invalid=this.isInvalid}))),e.has("limitCheckboxes")&&this._toggleRevealed(!1)}_validate(e,t){const i={customError:""!==this.invalidText,valueMissing:this.required&&!this.value.length},s=""!==this.invalidText?this.invalidText:this.required&&!this.value.length?"A selection is required.":"";this.internals.setValidity(i,s,this.checkboxes[0]),e&&(this.internalValidationMsg=this.internals.validationMessage),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.checkboxes.forEach((e=>{const i=e.shadowRoot.querySelector("slot").assignedNodes({flatten:!0});let s="";for(let e=0;e<i.length;e++)s+=i[e].textContent.trim();this.limitCheckboxes&&!this.limitRevealed?s.toLowerCase().includes(this.searchTerm)&&t<4?(e.style.display="block",t++):e.style.display="none":s.toLowerCase().includes(this.searchTerm)?e.style.display="block":e.style.display="none"}))}_toggleRevealed(e){this.limitRevealed=e,this.searchTerm="",this.checkboxes.forEach(((e,t)=>{!this.limitCheckboxes||this.limitRevealed?e.style.display="block":e.style.display=t<4?"block":"none"}))}_handleInvalid(){this.internalValidationMsg=this.internals.validationMessage}connectedCallback(){super.connectedCallback(),this.addEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(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.internals.form&&(this.internals.form.removeEventListener("formdata",(e=>this._handleFormdata(e))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};r.styles=n,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,"hideLegend",void 0),e([l({type:Boolean})],r.prototype,"filterable",void 0),e([a()],r.prototype,"searchTerm",void 0),e([l({type:Boolean})],r.prototype,"limitCheckboxes",void 0),e([a()],r.prototype,"limitRevealed",void 0),e([l({type:Object})],r.prototype,"textStrings",void 0),e([l({type:String})],r.prototype,"invalidText",void 0),e([o()],r.prototype,"checkboxes",void 0),e([a()],r.prototype,"internals",void 0),e([a()],r.prototype,"internalValidationMsg",void 0),e([a()],r.prototype,"isInvalid",void 0),r=e([s("kyn-checkbox-group")],r);export{r as CheckboxGroup};
+    `}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=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")&&this.checkboxes.forEach((e=>{e.disabled=this.disabled})),e.has("invalidText")&&void 0!==e.get("invalidText")&&this._validate(!1,!0),(e.has("invalidText")||e.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg,this.checkboxes.forEach((e=>{e.invalid=this.isInvalid}))),e.has("limitCheckboxes")&&this._toggleRevealed(!1)}_validate(e,t){const i={customError:""!==this.invalidText,valueMissing:this.required&&!this.value.length},s=""!==this.invalidText?this.invalidText:this.required&&!this.value.length?"A selection is required.":"";this.internals.setValidity(i,s,this.checkboxes[0]),e&&(this.internalValidationMsg=this.internals.validationMessage),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.checkboxes.forEach((e=>{const i=e.shadowRoot.querySelector("slot").assignedNodes({flatten:!0});let s="";for(let e=0;e<i.length;e++)s+=i[e].textContent.trim();this.limitCheckboxes&&!this.limitRevealed?s.toLowerCase().includes(this.searchTerm)&&t<4?(e.style.display="block",t++):e.style.display="none":s.toLowerCase().includes(this.searchTerm)?e.style.display="block":e.style.display="none"}))}_toggleRevealed(e){this.limitRevealed=e,this.searchTerm="",this.checkboxes.forEach(((e,t)=>{!this.limitCheckboxes||this.limitRevealed?e.style.display="block":e.style.display=t<4?"block":"none"}))}_handleSlotChange(){this.requestUpdate()}_handleInvalid(){this.internalValidationMsg=this.internals.validationMessage}connectedCallback(){super.connectedCallback(),this.addEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(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.internals.form&&(this.internals.form.removeEventListener("formdata",(e=>this._handleFormdata(e))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};d.styles=n,d.formAssociated=!0,e([l({type:String})],d.prototype,"name",void 0),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,"limitRevealed",void 0),e([l({type:Object})],d.prototype,"textStrings",void 0),e([l({type:String})],d.prototype,"invalidText",void 0),e([a()],d.prototype,"checkboxes",void 0),e([o()],d.prototype,"internals",void 0),e([o()],d.prototype,"internalValidationMsg",void 0),e([o()],d.prototype,"isInvalid",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 {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\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\n/**\n * Checkbox group container.\n * @fires on-checkbox-group-change - Captures the change event and emits the selected values.\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  /** 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 (4) behind a \"Show all\" button. */\n  @property({ type: Boolean })\n  limitCheckboxes = false;\n\n  /** Checkbox limit visibility.\n   * @internal\n   */\n  @state()\n  limitRevealed = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = {\n    selectAll: 'Select all',\n    showMore: 'Show more',\n    showLess: 'Show less',\n  };\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  /**\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      <fieldset ?disabled=${this.disabled}>\n        ${this.filterable\n          ? html`\n              <kyn-text-input\n                class=\"search\"\n                type=\"search\"\n                size=\"sm\"\n                placeholder=\"Search\"\n                hideLabel\n                value=${this.searchTerm}\n                @on-input=${(e: Event) => this._handleFilter(e)}\n              ></kyn-text-input>\n            `\n          : null}\n\n        <div class=\"${this.horizontal ? 'horizontal' : ''}\">\n          <legend class=\"${this.hideLegend ? 'sr-only' : ''}\">\n            ${this.required ? html`<span class=\"required\">*</span>` : null}\n            <slot name=\"label\"></slot>\n          </legend>\n\n          ${this.selectAll\n            ? html`\n                <kyn-checkbox\n                  class=\"select-all\"\n                  value=\"selectAll\"\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></slot>\n\n          ${this.limitCheckboxes\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} (${this.checkboxes.length})\n                      `}\n                </button>\n              `\n            : null}\n        </div>\n\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                <kd-icon .icon=\"${errorIcon}\"></kd-icon>\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n      </fieldset>\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      // 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 (changedProps.has('disabled')) {\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, true);\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 (changedProps.has('limitCheckboxes')) {\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 ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this.required && !this.value.length\n        ? 'A selection is required.'\n        : '';\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 = this.internals.validationMessage;\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.checkboxes.forEach((checkboxEl) => {\n      // get checkbox label text\n      const nodes = checkboxEl.shadowRoot.querySelector('slot').assignedNodes({\n        flatten: true,\n      });\n      let checkboxText = '';\n      for (let i = 0; i < nodes.length; i++) {\n        checkboxText += nodes[i].textContent.trim();\n      }\n\n      // hide checkbox if no match to search term\n      if (this.limitCheckboxes && !this.limitRevealed) {\n        if (\n          checkboxText.toLowerCase().includes(this.searchTerm) &&\n          visibleCount < 4\n        ) {\n          checkboxEl.style.display = 'block';\n          visibleCount++;\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      } else {\n        if (checkboxText.toLowerCase().includes(this.searchTerm)) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n  }\n\n  private _toggleRevealed(revealed: boolean) {\n    const Limit = 4;\n\n    this.limitRevealed = revealed;\n\n    this.searchTerm = '';\n\n    this.checkboxes.forEach((checkboxEl, index) => {\n      if (!this.limitCheckboxes || this.limitRevealed) {\n        checkboxEl.style.display = 'block';\n      } else {\n        if (index < Limit) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n  }\n\n  private _handleInvalid() {\n    this.internalValidationMsg = this.internals.validationMessage;\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    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    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":["CheckboxGroup","LitElement","constructor","this","name","value","required","disabled","horizontal","selectAll","hideLegend","filterable","searchTerm","limitCheckboxes","limitRevealed","textStrings","showMore","showLess","invalidText","internals","attachInternals","internalValidationMsg","isInvalid","render","html","e","_handleFilter","_toggleRevealed","checkboxes","length","errorIcon","updated","changedProps","has","forEach","checkbox","_validate","checked","includes","undefined","get","invalid","interacted","report","Validity","customError","valueMissing","ValidationMessage","setValidity","validationMessage","reportValidity","_handleCheckboxChange","detail","filter","map","newValues","index","indexOf","splice","push","_emitChangeEvent","event","CustomEvent","dispatchEvent","_handleFormdata","formData","append","visibleCount","toLowerCase","checkboxEl","nodes","shadowRoot","querySelector","assignedNodes","flatten","checkboxText","i","textContent","trim","style","display","revealed","_handleInvalid","connectedCallback","super","addEventListener","form","disconnectedCallback","removeEventListener","styles","CheckboxGroupScss","formAssociated","__decorate","property","type","String","prototype","Array","Boolean","state","Object","queryAssignedElements","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 {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\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\n/**\n * Checkbox group container.\n * @fires on-checkbox-group-change - Captures the change event and emits the selected values.\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 (4) behind a \"Show all\" button. */\n  @property({ type: Boolean })\n  limitCheckboxes = false;\n\n  /** Checkbox limit visibility.\n   * @internal\n   */\n  @state()\n  limitRevealed = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = {\n    selectAll: 'Select all',\n    showMore: 'Show more',\n    showLess: 'Show less',\n  };\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  /**\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      <fieldset ?disabled=${this.disabled}>\n        ${this.filterable\n          ? html`\n              <kyn-text-input\n                class=\"search\"\n                type=\"search\"\n                size=\"sm\"\n                placeholder=\"Search\"\n                hideLabel\n                value=${this.searchTerm}\n                @on-input=${(e: Event) => this._handleFilter(e)}\n              ></kyn-text-input>\n            `\n          : null}\n\n        <div class=\"${this.horizontal ? 'horizontal' : ''}\">\n          <legend class=\"${this.hideLegend ? 'sr-only' : ''}\">\n            ${this.required ? html`<span class=\"required\">*</span>` : null}\n            <slot name=\"label\"></slot>\n          </legend>\n\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            ? 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} (${this.checkboxes.length})\n                      `}\n                </button>\n              `\n            : null}\n        </div>\n\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                <kd-icon .icon=\"${errorIcon}\"></kd-icon>\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n      </fieldset>\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 = 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 (changedProps.has('disabled')) {\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, true);\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 (changedProps.has('limitCheckboxes')) {\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 ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this.required && !this.value.length\n        ? 'A selection is required.'\n        : '';\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 = this.internals.validationMessage;\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.checkboxes.forEach((checkboxEl) => {\n      // get checkbox label text\n      const nodes = checkboxEl.shadowRoot.querySelector('slot').assignedNodes({\n        flatten: true,\n      });\n      let checkboxText = '';\n      for (let i = 0; i < nodes.length; i++) {\n        checkboxText += nodes[i].textContent.trim();\n      }\n\n      // hide checkbox if no match to search term\n      if (this.limitCheckboxes && !this.limitRevealed) {\n        if (\n          checkboxText.toLowerCase().includes(this.searchTerm) &&\n          visibleCount < 4\n        ) {\n          checkboxEl.style.display = 'block';\n          visibleCount++;\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      } else {\n        if (checkboxText.toLowerCase().includes(this.searchTerm)) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n  }\n\n  private _toggleRevealed(revealed: boolean) {\n    const Limit = 4;\n\n    this.limitRevealed = revealed;\n\n    this.searchTerm = '';\n\n    this.checkboxes.forEach((checkboxEl, index) => {\n      if (!this.limitCheckboxes || this.limitRevealed) {\n        checkboxEl.style.display = 'block';\n      } else {\n        if (index < Limit) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n  }\n\n  private _handleSlotChange() {\n    this.requestUpdate();\n  }\n\n  private _handleInvalid() {\n    this.internalValidationMsg = this.internals.validationMessage;\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    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    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":["CheckboxGroup","LitElement","constructor","this","name","value","required","disabled","horizontal","selectAll","selectAllChecked","selectAllIndeterminate","hideLegend","filterable","searchTerm","limitCheckboxes","limitRevealed","textStrings","showMore","showLess","invalidText","internals","attachInternals","internalValidationMsg","isInvalid","render","html","e","_handleFilter","_handleSlotChange","_toggleRevealed","checkboxes","length","errorIcon","updated","changedProps","has","forEach","checkbox","_validate","checked","includes","CheckedBoxesCount","filter","undefined","get","invalid","interacted","report","Validity","customError","valueMissing","ValidationMessage","setValidity","validationMessage","reportValidity","_handleCheckboxChange","detail","map","newValues","index","indexOf","splice","push","_emitChangeEvent","event","CustomEvent","dispatchEvent","_handleFormdata","formData","append","visibleCount","toLowerCase","checkboxEl","nodes","shadowRoot","querySelector","assignedNodes","flatten","checkboxText","i","textContent","trim","style","display","revealed","requestUpdate","_handleInvalid","connectedCallback","super","addEventListener","form","disconnectedCallback","removeEventListener","styles","CheckboxGroupScss","formAssociated","__decorate","property","type","String","prototype","Array","Boolean","state","Object","queryAssignedElements","customElement"],"mappings":"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"}

package/components/reusable/dropdown/dropdown.d.ts

@@ -52,6 +52,14 @@ export declare class Dropdown extends LitElement {
     selectAll: boolean;
     /** "Select all" text customization. */
     selectAllText: string;
+    /** Is "Select All" box checked.
+     * @internal
+     */
+    selectAllChecked: boolean;
+    /** Is "Select All" indeterminate.
+     * @internal
+     */
+    selectAllIndeterminate: boolean;
     /**
      * Selected option value.
      * @ignore

package/components/reusable/dropdown/dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,2DAA2D,CAAC;AAMnE;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,iDAAiD;IAEjD,IAAI,SAAQ;IAEZ,kCAAkC;IAElC,MAAM,UAAS;IAEf,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4BAA4B;IAE5B,WAAW,SAAM;IAEjB,qBAAqB;IAErB,IAAI,SAAM;IAEV,iCAAiC;IAEjC,IAAI,UAAS;IAEb,qCAAqC;IAErC,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,QAAQ,UAAS;IAEjB,mCAAmC;IAEnC,QAAQ,UAAS;IAEjB,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,WAAW,SAAM;IAEjB,wCAAwC;IAExC,QAAQ,UAAS;IAEjB,wEAAwE;IAExE,SAAS,UAAS;IAElB,uCAAuC;IAEvC,aAAa,SAAgB;IAE7B;;;OAGG;IAEH,KAAK,EAAE,GAAG,CAAM;IAEhB;;;OAGG;IAEH,IAAI,SAAM;IAEV;;;OAGG;IAEH,UAAU,SAAM;IAEhB;;;OAGG;IAEH,aAAa,SAA4B;IAEzC;;;OAGG;IAEH,OAAO,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAErB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAE7B;;;OAGG;IAEH,QAAQ,EAAG,gBAAgB,CAAC;IAE5B;;;OAGG;IAEH,QAAQ,EAAG,WAAW,CAAC;IAEvB;;;OAGG;IAEH,SAAS,EAAG,WAAW,CAAC;IAExB;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAwLN,YAAY;IAerB,OAAO,CAAC,gBAAgB;IAIxB;;;OAGG;IACI,cAAc;IAKrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,cAAc;IAsHtB,OAAO,CAAC,mBAAmB;IAe3B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,YAAY;IAwBpB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IAIb,iBAAiB;IAoBjB,oBAAoB;IAiB7B,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,SAAS;IAiCjB,OAAO,CAAC,SAAS;IASR,OAAO,CAAC,YAAY,EAAE,GAAG;IAwFlC,OAAO,CAAC,eAAe;CA4BxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,2DAA2D,CAAC;AAMnE;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,iDAAiD;IAEjD,IAAI,SAAQ;IAEZ,kCAAkC;IAElC,MAAM,UAAS;IAEf,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4BAA4B;IAE5B,WAAW,SAAM;IAEjB,qBAAqB;IAErB,IAAI,SAAM;IAEV,iCAAiC;IAEjC,IAAI,UAAS;IAEb,qCAAqC;IAErC,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,QAAQ,UAAS;IAEjB,mCAAmC;IAEnC,QAAQ,UAAS;IAEjB,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,WAAW,SAAM;IAEjB,wCAAwC;IAExC,QAAQ,UAAS;IAEjB,wEAAwE;IAExE,SAAS,UAAS;IAElB,uCAAuC;IAEvC,aAAa,SAAgB;IAE7B;;OAEG;IAEH,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,sBAAsB,UAAS;IAE/B;;;OAGG;IAEH,KAAK,EAAE,GAAG,CAAM;IAEhB;;;OAGG;IAEH,IAAI,SAAM;IAEV;;;OAGG;IAEH,UAAU,SAAM;IAEhB;;;OAGG;IAEH,aAAa,SAA4B;IAEzC;;;OAGG;IAEH,OAAO,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAErB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAE7B;;;OAGG;IAEH,QAAQ,EAAG,gBAAgB,CAAC;IAE5B;;;OAGG;IAEH,QAAQ,EAAG,WAAW,CAAC;IAEvB;;;OAGG;IAEH,SAAS,EAAG,WAAW,CAAC;IAExB;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IA0LN,YAAY;IAerB,OAAO,CAAC,gBAAgB;IAIxB;;;OAGG;IACI,cAAc;IAKrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,cAAc;IAsHtB,OAAO,CAAC,mBAAmB;IAe3B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,YAAY;IAwBpB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IAIb,iBAAiB;IAoBjB,oBAAoB;IAiB7B,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,SAAS;IAiCjB,OAAO,CAAC,SAAS;IASR,OAAO,CAAC,YAAY,EAAE,GAAG;IAiGlC,OAAO,CAAC,eAAe;CA4BxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}

package/components/reusable/dropdown/dropdown.js

@@ -1,4 +1,4 @@
-import{__decorate as t}from"../../../_virtual/_tslib.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 l}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as o}from'./../../../external/@lit/reactive-element/decorators/state.js';import{query as a}from'./../../../external/@lit/reactive-element/decorators/query.js';import{queryAssignedElements as n}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as h}from'./../../../external/lit-html/directives/class-map.js';import d from"./dropdown.scss.js";import"./dropdownOption.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import r from'./../../../external/@carbon/icons/es/chevron--down/24.js';import p from'./../../../external/@carbon/icons/es/warning--filled/24.js';import c from'./../../../external/@carbon/icons/es/close/24.js';import u from'./../../../external/@carbon/icons/es/close/16.js';let v=class extends i{constructor(){super(...arguments),this.internals=this.attachInternals(),this.size="md",this.inline=!1,this.caption="",this.placeholder="",this.name="",this.open=!1,this.searchable=!1,this.multiple=!1,this.required=!1,this.disabled=!1,this.invalidText="",this.hideTags=!1,this.selectAll=!1,this.selectAllText="Select all",this.value="",this.text="",this.searchText="",this.assistiveText="Dropdown menu options.",this.internalValidationMsg="",this.isInvalid=!1}render(){return e`
+import{__decorate as e}from"../../../_virtual/_tslib.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{query as a}from'./../../../external/@lit/reactive-element/decorators/query.js';import{queryAssignedElements as n}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as h}from'./../../../external/lit-html/directives/class-map.js';import d from"./dropdown.scss.js";import"./dropdownOption.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import r from'./../../../external/@carbon/icons/es/chevron--down/24.js';import p from'./../../../external/@carbon/icons/es/warning--filled/24.js';import c from'./../../../external/@carbon/icons/es/close/24.js';import u from'./../../../external/@carbon/icons/es/close/16.js';let v=class extends i{constructor(){super(...arguments),this.internals=this.attachInternals(),this.size="md",this.inline=!1,this.caption="",this.placeholder="",this.name="",this.open=!1,this.searchable=!1,this.multiple=!1,this.required=!1,this.disabled=!1,this.invalidText="",this.hideTags=!1,this.selectAll=!1,this.selectAllText="Select all",this.selectAllChecked=!1,this.selectAllIndeterminate=!1,this.value="",this.text="",this.searchText="",this.assistiveText="Dropdown menu options.",this.internalValidationMsg="",this.isInvalid=!1}render(){return t`
       <div
         class="dropdown"
         ?disabled=${this.disabled}
@@ -7,7 +7,7 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
         ?searchable=${this.searchable}
       >
         <label for=${this.name} id="label-${this.name}" class="label-text">
-          ${this.required?e`<span class="required">*</span>`:null}
+          ${this.required?t`<span class="required">*</span>`:null}
           <slot name="label"></slot>
         </label>
 
@@ -24,33 +24,33 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
               ?invalid=${this.isInvalid}
               tabindex=${this.searchable?"-1":"0"}
               @click=${()=>this.handleClick()}
-              @keydown=${t=>this.handleButtonKeydown(t)}
-              @mousedown=${t=>{this.searchable||t.preventDefault()}}
-              @blur=${t=>this.handleButtonBlur(t)}
+              @keydown=${e=>this.handleButtonKeydown(e)}
+              @mousedown=${e=>{this.searchable||e.preventDefault()}}
+              @blur=${e=>this.handleButtonBlur(e)}
             >
-              ${this.multiple&&this.value.length?e`
+              ${this.multiple&&this.value.length?t`
                     <button
                       class="clear-multiple"
                       aria-label="Clear selections"
-                      @click=${t=>this.handleClearMultiple(t)}
+                      @click=${e=>this.handleClearMultiple(e)}
                     >
                       ${this.value.length}
                       <kd-icon .icon=${u}></kd-icon>
                     </button>
                   `:null}
-              ${this.searchable?e`
+              ${this.searchable?t`
                     <input
                       class="search"
                       type="text"
                       placeholder=${this.placeholder}
                       value=${this.searchText}
                       ?disabled=${this.disabled}
-                      @keydown=${t=>this.handleSearchKeydown(t)}
-                      @input=${t=>this.handleSearchInput(t)}
-                      @blur=${t=>this.handleSearchBlur(t)}
-                      @click=${t=>this.handleSearchClick(t)}
+                      @keydown=${e=>this.handleSearchKeydown(e)}
+                      @input=${e=>this.handleSearchInput(e)}
+                      @blur=${e=>this.handleSearchBlur(e)}
+                      @click=${e=>this.handleSearchClick(e)}
                     />
-                  `:e`
+                  `:t`
                     <span>
                       ${this.multiple||""===this.value?this.placeholder:this.text}
                     </span>
@@ -65,14 +65,16 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
               tabindex="0"
               aria-expanded=${this.open}
               aria-hidden=${!this.open}
-              @keydown=${t=>this.handleListKeydown(t)}
-              @blur=${t=>this.handleListBlur(t)}
+              @keydown=${e=>this.handleListKeydown(e)}
+              @blur=${e=>this.handleListBlur(e)}
             >
-              ${this.multiple&&this.selectAll?e`
+              ${this.multiple&&this.selectAll?t`
                     <kyn-dropdown-option
                       class="select-all"
                       value="selectAll"
                       multiple
+                      ?selected=${this.selectAllChecked}
+                      ?indeterminate=${this.selectAllIndeterminate}
                       ?disabled=${this.disabled}
                     >
                       ${this.selectAllText}
@@ -86,21 +88,21 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
             </ul>
           </div>
 
-          ${this.searchable&&this.searchEl&&""!==this.searchText?e`
+          ${this.searchable&&this.searchEl&&""!==this.searchText?t`
                 <button
                   class="clear"
                   aria-label="Clear search text"
-                  @click=${t=>this.handleClear(t)}
+                  @click=${e=>this.handleClear(e)}
                 >
                   <kd-icon .icon=${c}></kd-icon>
                 </button>
               `:null}
-          ${this.isInvalid?e` <kd-icon class="error-icon" .icon=${p}></kd-icon> `:null}
+          ${this.isInvalid?t` <kd-icon class="error-icon" .icon=${p}></kd-icon> `:null}
         </div>
 
-        ${this.multiple&&!this.hideTags&&this.value.length?e`
+        ${this.multiple&&!this.hideTags&&this.value.length?t`
               <div class="tags">
-                ${this.value.map((t=>{const i=this.options.find((e=>e.value===t)),s=i.shadowRoot.querySelector("slot").assignedNodes({flatten:!0});let l="";for(let t=0;t<s.length;t++)l+=s[t].textContent.trim();return e`
+                ${this.value.map((e=>{const i=this.options.find((t=>t.value===e)),s=i.shadowRoot.querySelector("slot").assignedNodes({flatten:!0});let l="";for(let e=0;e<s.length;e++)l+=s[e].textContent.trim();return t`
                     <button
                       class="tag"
                       aria-label="Deselect ${l}"
@@ -112,8 +114,8 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
                   `}))}
               </div>
             `:null}
-        ${""!==this.caption?e` <div class="caption">${this.caption}</div> `:null}
-        ${this.isInvalid?e`
+        ${""!==this.caption?t` <div class="caption">${this.caption}</div> `:null}
+        ${this.isInvalid?t`
               <div class="error">
                 ${this.invalidText||this.internalValidationMsg}
               </div>
@@ -128,5 +130,5 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
           ${this.assistiveText}
         </div>
       </div>
-    `}firstUpdated(){""===this.placeholder&&(this.searchable?this.placeholder="Search":this.multiple?this.placeholder="Select items":this.placeholder="Select an option")}handleSlotChange(){this.resetSelection()}resetSelection(){this._updateChildren(),this.emitValue()}handleClick(){this.disabled||(this.open=!this.open,this.searchable&&this.searchEl.focus())}handleButtonKeydown(t){this.handleKeyboard(t,t.keyCode,"button")}handleListKeydown(t){9!==t.keyCode&&t.preventDefault(),this.handleKeyboard(t,t.keyCode,"list")}handleListBlur(t){this.options.forEach((t=>t.highlighted=!1)),(!t.relatedTarget||t.relatedTarget&&"kyn-dropdown-option"!==t.relatedTarget.localName)&&(this.open=!1),this.assistiveText="Dropdown menu options."}handleKeyboard(t,e,i){const s=[0,32],l=this.options.find((t=>t.highlighted)),o=this.options.find((t=>t.selected)),a=l?this.options.indexOf(l):this.options.find((t=>t.selected))?this.options.indexOf(o):0;if(s.includes(e)&&t.preventDefault(),"button"===i){(s.includes(e)||13===e||40==e||38==e)&&(this.open=!0,this.options[a].highlighted=!0,this.multiple||""===this.value||this.options[a].scrollIntoView({block:"nearest"}))}switch(e){case 13:return void("list"===i&&(this.updateValue(this.options[a].value,!this.options[a].selected),this.assistiveText="Selected an item."));case 40:{let t=l||o?a===this.options.length-1?0:a+1:0;return this.options[t].disabled&&(t=t===this.options.length-1?0:t+1),this.options[a].highlighted=!1,this.options[t].highlighted=!0,this.options[t].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[t].text)}case 38:{let t=0===a?this.options.length-1:a-1;return this.options[t].disabled&&(t=0===t?this.options.length-1:t-1),this.options[a].highlighted=!1,this.options[t].highlighted=!0,this.options[t].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[t].text)}case 27:return this.open=!1,this.searchable?this.searchEl.focus():this.buttonEl.focus(),void(this.assistiveText="Dropdown menu options.");default:return}}handleClearMultiple(t){t.stopPropagation(),this.multiple?this.value=[]:this.value="",this._validate(!0,!1),this.emitValue()}handleTagClear(t){this.updateValue(t,!1),this.emitValue()}handleClear(t){t.stopPropagation(),this.text="",this.searchText="",this.searchEl.value="",this.multiple||(this.value="",this.emitValue())}handleSearchClick(t){t.stopPropagation(),this.open=!0}handleButtonBlur(t){var e,i;(null===(e=t.relatedTarget)||void 0===e?void 0:e.classList.contains("options"))||(null===(i=t.relatedTarget)||void 0===i?void 0:i.classList.contains("search"))||(this.open=!1)}handleSearchBlur(t){var e,i;t.relatedTarget&&("kyn-dropdown-option"===t.relatedTarget.localName||(null===(e=t.relatedTarget)||void 0===e?void 0:e.classList.contains("options"))||(null===(i=t.relatedTarget)||void 0===i?void 0:i.classList.contains("select")))||(this.open=!1)}handleSearchKeydown(t){t.stopPropagation();const e=this.options.find((t=>t.highlighted));13===t.keyCode&&e&&(this.updateValue(e.value,e.selected),this.assistiveText="Selected an item."),27===t.keyCode&&(this.open=!1,this.buttonEl.focus())}handleSearchInput(t){const e=t.target.value;this.searchText=e,this.open=!0;const i=this.options.filter((t=>t.text.toLowerCase().startsWith(e.toLowerCase())));this.options.forEach((t=>t.highlighted=!1)),""!==e&&i.length&&(i[0].highlighted=!0,i[0].scrollIntoView({block:"nearest"}))}_handleClick(t){"selectAll"===t.detail.value?(t.detail.selected?(this.value=this.options.filter((t=>!t.disabled)).map((t=>t.value)),this.assistiveText="Selected all items."):(this.value=[],this.assistiveText="Deselected all items."),this._validate(!0,!1)):(this.updateValue(t.detail.value,t.detail.selected),this.assistiveText="Selected an item."),this.emitValue()}_handleBlur(t){const e=t.detail.origEvent.relatedTarget;(!e||"kyn-dropdown-option"!==e.localName&&"kyn-dropdown"!==e.localName)&&(this.open=!1)}_handleFormdata(t){this.multiple?this.value.forEach((e=>{t.formData.append(this.name,e)})):t.formData.append(this.name,this.value)}_handleInvalid(){this.internalValidationMsg=this.internals.validationMessage}connectedCallback(){super.connectedCallback(),this.addEventListener("on-click",(t=>this._handleClick(t))),this.addEventListener("on-blur",(t=>this._handleBlur(t))),this.internals.form&&(this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.addEventListener("on-click",(t=>this._handleClick(t))),this.addEventListener("on-blur",(t=>this._handleBlur(t))),this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}updateValue(t,e=!1){const i=JSON.parse(JSON.stringify(this.value));if(this.multiple){if(e)i.push(t);else{const e=i.indexOf(t);i.splice(e,1)}this.value=i}else this.value=t;this._validate(!0,!1),this.multiple||(this.searchable?this.searchEl.focus():this.buttonEl.focus())}_validate(t,e){const i={customError:""!==this.invalidText,valueMissing:this.required&&(!this.value||this.multiple&&!this.value.length||!this.multiple&&""===this.value)},s=""!==this.invalidText?this.invalidText:this.required&&!this.value.length?"Please fill out this field.":"";this.internals.setValidity(i,s,this.buttonEl),t&&(this.internalValidationMsg=this.internals.validationMessage),e&&this.internals.reportValidity()}emitValue(){const t=new CustomEvent("on-change",{detail:{value:this.value}});this.dispatchEvent(t)}updated(t){if((t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!0),t.has("value")&&(this._validate(!1,!1),this.multiple||(this.open=!1),this.options.forEach((t=>{this.multiple?t.selected=this.value.includes(t.value):t.selected=this.value===t.value})),!this.multiple)){if(this.options.length&&""!==this.value){const t=this.options.find((t=>t.value===this.value)).shadowRoot.querySelector("slot").assignedNodes({flatten:!0});let e="";for(let i=0;i<t.length;i++)e+=t[i].textContent.trim();this.text=e}this.searchText=this.text===this.placeholder?"":this.text,this.searchEl&&(this.searchEl.value=this.searchText)}t.has("open")&&this.open&&!this.searchable&&(this.listboxEl.focus({preventScroll:!0}),this.assistiveText="Selecting items. Use up and down arrow keys to navigate."),t.has("multiple")&&this.options.forEach((t=>{t.multiple=this.multiple}))}_updateChildren(){var t;const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("slot#children"),i=null==e?void 0:e.assignedElements();if(i){const t=[];let e="";i.forEach((i=>{i.multiple=this.multiple,i.selected&&(this.multiple?t.push(i.value):e=i.value)})),this.multiple?this.value=t:this.value=e}}};v.styles=d,v.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},v.formAssociated=!0,t([o()],v.prototype,"internals",void 0),t([l({type:String})],v.prototype,"size",void 0),t([l({type:Boolean})],v.prototype,"inline",void 0),t([l({type:String})],v.prototype,"caption",void 0),t([l({type:String})],v.prototype,"placeholder",void 0),t([l({type:String})],v.prototype,"name",void 0),t([l({type:Boolean})],v.prototype,"open",void 0),t([l({type:Boolean})],v.prototype,"searchable",void 0),t([l({type:Boolean})],v.prototype,"multiple",void 0),t([l({type:Boolean})],v.prototype,"required",void 0),t([l({type:Boolean})],v.prototype,"disabled",void 0),t([l({type:String})],v.prototype,"invalidText",void 0),t([l({type:Boolean})],v.prototype,"hideTags",void 0),t([l({type:Boolean})],v.prototype,"selectAll",void 0),t([l({type:String})],v.prototype,"selectAllText",void 0),t([o()],v.prototype,"value",void 0),t([o()],v.prototype,"text",void 0),t([o()],v.prototype,"searchText",void 0),t([o()],v.prototype,"assistiveText",void 0),t([n({selector:"kyn-dropdown-option"})],v.prototype,"options",void 0),t([n({selector:"kyn-dropdown-option[selected]"})],v.prototype,"selectedOptions",void 0),t([a(".search")],v.prototype,"searchEl",void 0),t([a(".select")],v.prototype,"buttonEl",void 0),t([a(".options")],v.prototype,"listboxEl",void 0),t([o()],v.prototype,"internalValidationMsg",void 0),t([o()],v.prototype,"isInvalid",void 0),v=t([s("kyn-dropdown")],v);export{v as Dropdown};
+    `}firstUpdated(){""===this.placeholder&&(this.searchable?this.placeholder="Search":this.multiple?this.placeholder="Select items":this.placeholder="Select an option")}handleSlotChange(){this.resetSelection()}resetSelection(){this._updateChildren(),this.emitValue()}handleClick(){this.disabled||(this.open=!this.open,this.searchable&&this.searchEl.focus())}handleButtonKeydown(e){this.handleKeyboard(e,e.keyCode,"button")}handleListKeydown(e){9!==e.keyCode&&e.preventDefault(),this.handleKeyboard(e,e.keyCode,"list")}handleListBlur(e){this.options.forEach((e=>e.highlighted=!1)),(!e.relatedTarget||e.relatedTarget&&"kyn-dropdown-option"!==e.relatedTarget.localName)&&(this.open=!1),this.assistiveText="Dropdown menu options."}handleKeyboard(e,t,i){const s=[0,32],l=this.options.find((e=>e.highlighted)),o=this.options.find((e=>e.selected)),a=l?this.options.indexOf(l):this.options.find((e=>e.selected))?this.options.indexOf(o):0;if(s.includes(t)&&e.preventDefault(),"button"===i){(s.includes(t)||13===t||40==t||38==t)&&(this.open=!0,this.options[a].highlighted=!0,this.multiple||""===this.value||this.options[a].scrollIntoView({block:"nearest"}))}switch(t){case 13:return void("list"===i&&(this.updateValue(this.options[a].value,!this.options[a].selected),this.assistiveText="Selected an item."));case 40:{let e=l||o?a===this.options.length-1?0:a+1:0;return this.options[e].disabled&&(e=e===this.options.length-1?0:e+1),this.options[a].highlighted=!1,this.options[e].highlighted=!0,this.options[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[e].text)}case 38:{let e=0===a?this.options.length-1:a-1;return this.options[e].disabled&&(e=0===e?this.options.length-1:e-1),this.options[a].highlighted=!1,this.options[e].highlighted=!0,this.options[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[e].text)}case 27:return this.open=!1,this.searchable?this.searchEl.focus():this.buttonEl.focus(),void(this.assistiveText="Dropdown menu options.");default:return}}handleClearMultiple(e){e.stopPropagation(),this.multiple?this.value=[]:this.value="",this._validate(!0,!1),this.emitValue()}handleTagClear(e){this.updateValue(e,!1),this.emitValue()}handleClear(e){e.stopPropagation(),this.text="",this.searchText="",this.searchEl.value="",this.multiple||(this.value="",this.emitValue())}handleSearchClick(e){e.stopPropagation(),this.open=!0}handleButtonBlur(e){var t,i;(null===(t=e.relatedTarget)||void 0===t?void 0:t.classList.contains("options"))||(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("search"))||(this.open=!1)}handleSearchBlur(e){var t,i;e.relatedTarget&&("kyn-dropdown-option"===e.relatedTarget.localName||(null===(t=e.relatedTarget)||void 0===t?void 0:t.classList.contains("options"))||(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("select")))||(this.open=!1)}handleSearchKeydown(e){e.stopPropagation();const t=this.options.find((e=>e.highlighted));13===e.keyCode&&t&&(this.updateValue(t.value,t.selected),this.assistiveText="Selected an item."),27===e.keyCode&&(this.open=!1,this.buttonEl.focus())}handleSearchInput(e){const t=e.target.value;this.searchText=t,this.open=!0;const i=this.options.filter((e=>e.text.toLowerCase().startsWith(t.toLowerCase())));this.options.forEach((e=>e.highlighted=!1)),""!==t&&i.length&&(i[0].highlighted=!0,i[0].scrollIntoView({block:"nearest"}))}_handleClick(e){"selectAll"===e.detail.value?(e.detail.selected?(this.value=this.options.filter((e=>!e.disabled)).map((e=>e.value)),this.assistiveText="Selected all items."):(this.value=[],this.assistiveText="Deselected all items."),this._validate(!0,!1)):(this.updateValue(e.detail.value,e.detail.selected),this.assistiveText="Selected an item."),this.emitValue()}_handleBlur(e){const t=e.detail.origEvent.relatedTarget;(!t||"kyn-dropdown-option"!==t.localName&&"kyn-dropdown"!==t.localName)&&(this.open=!1)}_handleFormdata(e){this.multiple?this.value.forEach((t=>{e.formData.append(this.name,t)})):e.formData.append(this.name,this.value)}_handleInvalid(){this.internalValidationMsg=this.internals.validationMessage}connectedCallback(){super.connectedCallback(),this.addEventListener("on-click",(e=>this._handleClick(e))),this.addEventListener("on-blur",(e=>this._handleBlur(e))),this.internals.form&&(this.internals.form.addEventListener("formdata",(e=>this._handleFormdata(e))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.addEventListener("on-click",(e=>this._handleClick(e))),this.addEventListener("on-blur",(e=>this._handleBlur(e))),this.internals.form&&(this.internals.form.removeEventListener("formdata",(e=>this._handleFormdata(e))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}updateValue(e,t=!1){const i=JSON.parse(JSON.stringify(this.value));if(this.multiple){if(t)i.push(e);else{const t=i.indexOf(e);i.splice(t,1)}this.value=i}else this.value=e;this._validate(!0,!1),this.multiple||(this.searchable?this.searchEl.focus():this.buttonEl.focus())}_validate(e,t){const i={customError:""!==this.invalidText,valueMissing:this.required&&(!this.value||this.multiple&&!this.value.length||!this.multiple&&""===this.value)},s=""!==this.invalidText?this.invalidText:this.required&&!this.value.length?"Please fill out this field.":"";this.internals.setValidity(i,s,this.buttonEl),e&&(this.internalValidationMsg=this.internals.validationMessage),t&&this.internals.reportValidity()}emitValue(){const e=new CustomEvent("on-change",{detail:{value:this.value}});this.dispatchEvent(e)}updated(e){if((e.has("invalidText")||e.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),e.has("invalidText")&&void 0!==e.get("invalidText")&&this._validate(!1,!0),e.has("value")&&(this._validate(!1,!1),this.selectAllChecked=this.selectedOptions.length===this.options.length,this.selectAllIndeterminate=this.selectedOptions.length<this.options.length&&this.selectedOptions.length>0,this.multiple||(this.open=!1),!this.multiple)){if(this.options.length&&""!==this.value){const e=this.options.find((e=>e.value===this.value)).shadowRoot.querySelector("slot").assignedNodes({flatten:!0});let t="";for(let i=0;i<e.length;i++)t+=e[i].textContent.trim();this.text=t}this.searchText=this.text===this.placeholder?"":this.text,this.searchEl&&(this.searchEl.value=this.searchText)}e.has("open")&&this.open&&!this.searchable&&(this.listboxEl.focus({preventScroll:!0}),this.assistiveText="Selecting items. Use up and down arrow keys to navigate."),e.has("multiple")&&this.options.forEach((e=>{e.multiple=this.multiple}))}_updateChildren(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("slot#children"),i=null==t?void 0:t.assignedElements();if(i){const e=[];let t="";i.forEach((i=>{i.multiple=this.multiple,i.selected&&(this.multiple?e.push(i.value):t=i.value)})),this.multiple?this.value=e:this.value=t}}};v.styles=d,v.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},v.formAssociated=!0,e([o()],v.prototype,"internals",void 0),e([l({type:String})],v.prototype,"size",void 0),e([l({type:Boolean})],v.prototype,"inline",void 0),e([l({type:String})],v.prototype,"caption",void 0),e([l({type:String})],v.prototype,"placeholder",void 0),e([l({type:String})],v.prototype,"name",void 0),e([l({type:Boolean})],v.prototype,"open",void 0),e([l({type:Boolean})],v.prototype,"searchable",void 0),e([l({type:Boolean})],v.prototype,"multiple",void 0),e([l({type:Boolean})],v.prototype,"required",void 0),e([l({type:Boolean})],v.prototype,"disabled",void 0),e([l({type:String})],v.prototype,"invalidText",void 0),e([l({type:Boolean})],v.prototype,"hideTags",void 0),e([l({type:Boolean})],v.prototype,"selectAll",void 0),e([l({type:String})],v.prototype,"selectAllText",void 0),e([l({type:Boolean})],v.prototype,"selectAllChecked",void 0),e([l({type:Boolean})],v.prototype,"selectAllIndeterminate",void 0),e([o()],v.prototype,"value",void 0),e([o()],v.prototype,"text",void 0),e([o()],v.prototype,"searchText",void 0),e([o()],v.prototype,"assistiveText",void 0),e([n({selector:"kyn-dropdown-option"})],v.prototype,"options",void 0),e([n({selector:"kyn-dropdown-option[selected]"})],v.prototype,"selectedOptions",void 0),e([a(".search")],v.prototype,"searchEl",void 0),e([a(".select")],v.prototype,"buttonEl",void 0),e([a(".options")],v.prototype,"listboxEl",void 0),e([o()],v.prototype,"internalValidationMsg",void 0),e([o()],v.prototype,"isInvalid",void 0),v=e([s("kyn-dropdown")],v);export{v as Dropdown};
 //# sourceMappingURL=dropdown.js.map