@kyndryl-design-system/shidoka-applications 1.27.2 → 1.27.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -65,6 +65,7 @@ export declare class CheckboxGroup extends LitElement {
65
65
  /** Checkbox group invalid text. */
66
66
  invalidText: string;
67
67
  checkboxes: Array<any>;
68
+ filteredCheckboxes: Array<any>;
68
69
  /**
69
70
  * Attached internals for form association.
70
71
  * @ignore
@@ -1 +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;AAIvC,OAAO,cAAc,CAAC;AACtB,OAAO,YAAY,CAAC;AACpB,OAAO,2DAA2D,CAAC;AAGnE;;;;;;;GAOG;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,4DAA4D;IAE5D,eAAe,UAAS;IAExB;;OAEG;IAEH,WAAW,SAAK;IAEhB;;OAEG;IAEH,aAAa,UAAS;IAEtB,iCAAiC;IAEjC,WAAW;;;;;MAKT;IAEF,mCAAmC;IAEnC,WAAW,SAAM;IAUjB,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,CAAM;IAE5B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IA4EN,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;IAyCrB,OAAO,CAAC,eAAe;IAuBvB,OAAO,CAAC,iBAAiB;IAOzB,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"}
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;AAIvC,OAAO,cAAc,CAAC;AACtB,OAAO,YAAY,CAAC;AACpB,OAAO,2DAA2D,CAAC;AAGnE;;;;;;;GAOG;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,4DAA4D;IAE5D,eAAe,UAAS;IAExB;;OAEG;IAEH,WAAW,SAAK;IAEhB;;OAEG;IAEH,aAAa,UAAS;IAEtB,iCAAiC;IAEjC,WAAW;;;;;MAKT;IAEF,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;IA6EN,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"}
@@ -1,4 +1,4 @@
1
- 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'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import h from"./checkboxGroup.scss.js";import"../textInput/textInput.js";import"./checkbox.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import a from'./../../../external/@carbon/icons/es/warning--filled/16.js';let n=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={selectAll:"Select all",showMore:"Show more",showLess:"Show less",search:"Search"},this.invalidText="",this.checkboxes=[],this.internals=this.attachInternals(),this.internalValidationMsg="",this.isInvalid=!1}render(){return t`
1
+ 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'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import h from"./checkboxGroup.scss.js";import"../textInput/textInput.js";import"./checkbox.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import a from'./../../../external/@carbon/icons/es/warning--filled/16.js';let n=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={selectAll:"Select all",showMore:"Show more",showLess:"Show less",search:"Search"},this.invalidText="",this.checkboxes=[],this.filteredCheckboxes=[],this.internals=this.attachInternals(),this.internalValidationMsg="",this.isInvalid=!1}render(){return t`
2
2
  <div>
3
3
  ${this.filterable?t`
4
4
  <kyn-text-input
@@ -38,14 +38,14 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
38
38
 
39
39
  <slot @slotchange=${this._handleSlotChange}></slot>
40
40
 
41
- ${this.limitCheckboxes&&this.checkboxes.length>this._limitCount?t`
41
+ ${this.limitCheckboxes&&this.filteredCheckboxes.length>this._limitCount?t`
42
42
  <button
43
43
  class="reveal-toggle"
44
44
  @click=${()=>this._toggleRevealed(!this.limitRevealed)}
45
45
  >
46
46
  ${this.limitRevealed?this.textStrings.showLess:t`
47
47
  ${this.textStrings.showMore}
48
- (${this.checkboxes.length})
48
+ (${this.filteredCheckboxes.length})
49
49
  `}
50
50
  </button>
51
51
  `:null}
@@ -59,5 +59,5 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
59
59
  `:null}
60
60
  </fieldset>
61
61
  </div>
62
- `}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.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<this._limitCount?(e.style.display="block",t++):e.style.display="none":s.toLowerCase().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.searchTerm="",this.checkboxes.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._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()}};n.styles=h,n.formAssociated=!0,e([l({type:String})],n.prototype,"name",void 0),e([l({type:Array})],n.prototype,"value",void 0),e([l({type:Boolean})],n.prototype,"required",void 0),e([l({type:Boolean})],n.prototype,"disabled",void 0),e([l({type:Boolean})],n.prototype,"horizontal",void 0),e([l({type:Boolean})],n.prototype,"selectAll",void 0),e([l({type:Boolean})],n.prototype,"selectAllChecked",void 0),e([l({type:Boolean})],n.prototype,"selectAllIndeterminate",void 0),e([l({type:Boolean})],n.prototype,"hideLegend",void 0),e([l({type:Boolean})],n.prototype,"filterable",void 0),e([o()],n.prototype,"searchTerm",void 0),e([l({type:Boolean})],n.prototype,"limitCheckboxes",void 0),e([o()],n.prototype,"_limitCount",void 0),e([o()],n.prototype,"limitRevealed",void 0),e([l({type:Object})],n.prototype,"textStrings",void 0),e([l({type:String})],n.prototype,"invalidText",void 0),e([o()],n.prototype,"checkboxes",void 0),e([o()],n.prototype,"internals",void 0),e([o()],n.prototype,"internalValidationMsg",void 0),e([o()],n.prototype,"isInvalid",void 0),n=e([s("kyn-checkbox-group")],n);export{n as CheckboxGroup};
62
+ `}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()}};n.styles=h,n.formAssociated=!0,e([l({type:String})],n.prototype,"name",void 0),e([l({type:Array})],n.prototype,"value",void 0),e([l({type:Boolean})],n.prototype,"required",void 0),e([l({type:Boolean})],n.prototype,"disabled",void 0),e([l({type:Boolean})],n.prototype,"horizontal",void 0),e([l({type:Boolean})],n.prototype,"selectAll",void 0),e([l({type:Boolean})],n.prototype,"selectAllChecked",void 0),e([l({type:Boolean})],n.prototype,"selectAllIndeterminate",void 0),e([l({type:Boolean})],n.prototype,"hideLegend",void 0),e([l({type:Boolean})],n.prototype,"filterable",void 0),e([o()],n.prototype,"searchTerm",void 0),e([l({type:Boolean})],n.prototype,"limitCheckboxes",void 0),e([o()],n.prototype,"_limitCount",void 0),e([o()],n.prototype,"limitRevealed",void 0),e([l({type:Object})],n.prototype,"textStrings",void 0),e([l({type:String})],n.prototype,"invalidText",void 0),e([o()],n.prototype,"checkboxes",void 0),e([o()],n.prototype,"filteredCheckboxes",void 0),e([o()],n.prototype,"internals",void 0),e([o()],n.prototype,"internalValidationMsg",void 0),e([o()],n.prototype,"isInvalid",void 0),n=e([s("kyn-checkbox-group")],n);export{n as CheckboxGroup};
63
63
  //# sourceMappingURL=checkboxGroup.js.map
@@ -1 +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 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 * @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 = {\n selectAll: 'Select all',\n showMore: 'Show more',\n showLess: 'Show less',\n search: 'Search',\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 @state()\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 <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=\"${this.hideLegend ? 'sr-only' : ''}\">\n ${this.required ? html`<span class=\"required\">*</span>` : null}\n <slot name=\"label\"></slot>\n </legend>\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 && this.checkboxes.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.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 </div>\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.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 < this._limitCount\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 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.checkboxes.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._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":["CheckboxGroup","LitElement","constructor","this","name","value","required","disabled","horizontal","selectAll","selectAllChecked","selectAllIndeterminate","hideLegend","filterable","searchTerm","limitCheckboxes","_limitCount","limitRevealed","textStrings","showMore","showLess","search","invalidText","checkboxes","internals","attachInternals","internalValidationMsg","isInvalid","render","html","e","_handleFilter","_handleSlotChange","length","_toggleRevealed","errorIcon","updated","changedProps","has","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","nodes","shadowRoot","querySelector","assignedNodes","flatten","checkboxText","i","textContent","trim","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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"}
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 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 * @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 = {\n selectAll: 'Select all',\n showMore: 'Show more',\n showLess: 'Show less',\n search: 'Search',\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 @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=\"${this.hideLegend ? 'sr-only' : ''}\">\n ${this.required ? html`<span class=\"required\">*</span>` : null}\n <slot name=\"label\"></slot>\n </legend>\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\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 </div>\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":["CheckboxGroup","LitElement","constructor","this","name","value","required","disabled","horizontal","selectAll","selectAllChecked","selectAllIndeterminate","hideLegend","filterable","searchTerm","limitCheckboxes","_limitCount","limitRevealed","textStrings","showMore","showLess","search","invalidText","checkboxes","filteredCheckboxes","internals","attachInternals","internalValidationMsg","isInvalid","render","html","e","_handleFilter","_handleSlotChange","length","_toggleRevealed","errorIcon","updated","changedProps","has","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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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kyndryl-design-system/shidoka-applications",
3
- "version": "1.27.2",
3
+ "version": "1.27.3",
4
4
  "description": "Shidoka Web Components for Applications",
5
5
  "main": "index.js",
6
6
  "type": "module",