@kyndryl-design-system/shidoka-applications 1.12.2 → 1.12.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.
- package/components/reusable/checkbox/checkboxGroup.d.ts +2 -0
- package/components/reusable/checkbox/checkboxGroup.d.ts.map +1 -1
- package/components/reusable/checkbox/checkboxGroup.js +1 -1
- package/components/reusable/checkbox/checkboxGroup.js.map +1 -1
- package/components/reusable/tabs/tab.d.ts +4 -0
- package/components/reusable/tabs/tab.d.ts.map +1 -1
- package/components/reusable/tabs/tab.js +1 -1
- package/components/reusable/tabs/tab.js.map +1 -1
- package/package.json +1 -1
|
@@ -5,6 +5,8 @@ import '@kyndryl-design-system/shidoka-foundation/components/icon';
|
|
|
5
5
|
/**
|
|
6
6
|
* Checkbox group container.
|
|
7
7
|
* @fires on-checkbox-group-change - Captures the change event and emits the selected values.
|
|
8
|
+
* @fires on-search - Captures the search input event and emits the search term.
|
|
9
|
+
* @fires on-limit-toggle - Captures the show more/less click and emits the expanded state.
|
|
8
10
|
* @slot unnamed - Slot for individual checkboxes.
|
|
9
11
|
* @slot label - Slot for label text.
|
|
10
12
|
*/
|
|
@@ -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;AASvC,OAAO,cAAc,CAAC;AACtB,OAAO,YAAY,CAAC;AACpB,OAAO,2DAA2D,CAAC;AAGnE
|
|
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;;;;;;;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,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;IAmFlC,OAAO,CAAC,SAAS;IA2BjB,OAAO,CAAC,qBAAqB;IA6B7B,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,aAAa;IAyCrB,OAAO,CAAC,eAAe;IAyBvB,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"}
|
|
@@ -53,5 +53,5 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
53
53
|
</div>
|
|
54
54
|
`:null}
|
|
55
55
|
</fieldset>
|
|
56
|
-
`}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")&&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<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._validate(!0,!1)}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};
|
|
56
|
+
`}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<4?(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?e.style.display="block":e.style.display=t<4?"block":"none"}));const t=new CustomEvent("on-limit-toggle",{detail:{expanded:this.limitRevealed}});this.dispatchEvent(t)}_handleSlotChange(){this.requestUpdate()}_handleInvalid(){this._validate(!0,!1)}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};
|
|
57
57
|
//# 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 {\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 =\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 (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 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 < 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._validate(true, false);\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","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","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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"}
|
|
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 * @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 (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 =\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 < 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 const event = new CustomEvent('on-search', {\n detail: { searchTerm: this.searchTerm },\n });\n this.dispatchEvent(event);\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 const event = new CustomEvent('on-limit-toggle', {\n detail: { expanded: this.limitRevealed },\n });\n this.dispatchEvent(event);\n }\n\n private _handleSlotChange() {\n this.requestUpdate();\n }\n\n private _handleInvalid() {\n this._validate(true, false);\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","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","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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"}
|
|
@@ -39,6 +39,10 @@ export declare class Tab extends LitElement {
|
|
|
39
39
|
* @internal
|
|
40
40
|
*/
|
|
41
41
|
'aria-controls': string;
|
|
42
|
+
/** aria-disabled.
|
|
43
|
+
* @internal
|
|
44
|
+
*/
|
|
45
|
+
'aria-disabled': string;
|
|
42
46
|
render(): import("lit-html").TemplateResult<1>;
|
|
43
47
|
connectedCallback(): void;
|
|
44
48
|
disconnectedCallback(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tabs/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;GAGG;AACH,qBACa,GAAI,SAAQ,UAAU;IACjC,OAAgB,MAAM,+BAAW;IAEjC,wBAAwB;IAEf,EAAE,SAAM;IAEjB,8DAA8D;IAE9D,QAAQ,UAAS;IAEjB,0BAA0B;IAE1B,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,CAAC,KAAK,CAAQ;IAErB;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAS;IAE1B;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAe;IAEhC;;OAEG;IAEM,IAAI,SAAS;IAEtB;;OAEG;IAEM,QAAQ,SAAK;IAEtB;;OAEG;IAEH,eAAe,SAAW;IAE1B;;OAEG;IAEH,eAAe,SAAM;
|
|
1
|
+
{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tabs/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;GAGG;AACH,qBACa,GAAI,SAAQ,UAAU;IACjC,OAAgB,MAAM,+BAAW;IAEjC,wBAAwB;IAEf,EAAE,SAAM;IAEjB,8DAA8D;IAE9D,QAAQ,UAAS;IAEjB,0BAA0B;IAE1B,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,CAAC,KAAK,CAAQ;IAErB;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAS;IAE1B;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAe;IAEhC;;OAEG;IAEM,IAAI,SAAS;IAEtB;;OAEG;IAEM,QAAQ,SAAK;IAEtB;;OAEG;IAEH,eAAe,SAAW;IAE1B;;OAEG;IAEH,eAAe,SAAM;IAErB;;OAEG;IAEH,eAAe,SAAW;IAEjB,MAAM;IAgBN,iBAAiB;IAKjB,oBAAoB;IAK7B;;;;;;OAMG;IACM,UAAU,CAAC,YAAY,EAAE,GAAG;IAerC;;;;;OAKG;IACH,OAAO,CAAC,YAAY;CAUrB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,GAAG,CAAC;KAChB;CACF"}
|
|
@@ -1,2 +1,2 @@
|
|
|
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
|
|
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{classMap as a}from'./../../../external/lit-html/directives/class-map.js';import d from"./tab.scss.js";let r=class extends i{constructor(){super(...arguments),this.id="",this.selected=!1,this.disabled=!1,this._size="md",this._vertical=!1,this._tabStyle="contained",this.role="tab",this.tabIndex=0,this["aria-selected"]="false",this["aria-controls"]="",this["aria-disabled"]="false"}render(){const e={tab:!0,contained:"contained"===this._tabStyle,line:"line"===this._tabStyle,"size--sm":"sm"===this._size,"size--md":"md"===this._size,vertical:this._vertical,selected:this.selected,disabled:this.disabled};return t` <div class=${a(e)}><slot></slot></div> `}connectedCallback(){super.connectedCallback(),this.addEventListener("click",(e=>this._handleClick(e)))}disconnectedCallback(){this.removeEventListener("click",(e=>this._handleClick(e))),super.disconnectedCallback()}willUpdate(e){e.has("id")&&(this["aria-controls"]=this.id+"-panel"),e.has("selected")&&(this["aria-selected"]=this.selected.toString(),this.tabIndex=this.selected?0:-1),e.has("disabled")&&(this["aria-disabled"]=this.disabled.toString())}_handleClick(e){if(!this.selected&&!this.disabled){const t=new CustomEvent("tab-activated",{bubbles:!0,composed:!0,detail:{origEvent:e,tabId:this.id}});this.dispatchEvent(t)}}};r.styles=d,e([l({type:String,reflect:!0})],r.prototype,"id",void 0),e([l({type:Boolean,reflect:!0})],r.prototype,"selected",void 0),e([l({type:Boolean})],r.prototype,"disabled",void 0),e([o()],r.prototype,"_size",void 0),e([o()],r.prototype,"_vertical",void 0),e([o()],r.prototype,"_tabStyle",void 0),e([l({type:String,reflect:!0})],r.prototype,"role",void 0),e([l({type:Number,reflect:!0})],r.prototype,"tabIndex",void 0),e([l({type:String,reflect:!0})],r.prototype,"aria-selected",void 0),e([l({type:String,reflect:!0})],r.prototype,"aria-controls",void 0),e([l({type:String,reflect:!0})],r.prototype,"aria-disabled",void 0),r=e([s("kyn-tab")],r);export{r as Tab};
|
|
2
2
|
//# sourceMappingURL=tab.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.js","sources":["../../../../src/components/reusable/tabs/tab.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TabScss from './tab.scss';\n\n/**\n * Tabs.\n * @slot unnamed - Slot for tab button text.\n */\n@customElement('kyn-tab')\nexport class Tab extends LitElement {\n static override styles = TabScss;\n\n /** Tab ID, required. */\n @property({ type: String, reflect: true })\n override id = '';\n\n /** Tab selected state. Must match Tab Panel visible state. */\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /** Tab disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Size of the tab buttons. Inherited.\n * @internal\n */\n @state()\n private _size = 'md';\n\n /** Vertical orientation. Inherited.\n * @internal\n */\n @state()\n private _vertical = false;\n\n /** Tab style. Inherited.\n * @internal\n */\n @state()\n private _tabStyle = 'contained';\n\n /** aria role.\n * @internal\n */\n @property({ type: String, reflect: true })\n override role = 'tab';\n\n /** Make host tabbable.\n * @internal\n */\n @property({ type: Number, reflect: true })\n override tabIndex = 0;\n\n /** aria-controls.\n * @internal\n */\n @property({ type: String, reflect: true })\n 'aria-selected' = 'false';\n\n /** aria-controls.\n * @internal\n */\n @property({ type: String, reflect: true })\n 'aria-controls' = '';\n\n override render() {\n const classes = {\n tab: true,\n contained: this._tabStyle === 'contained',\n line: this._tabStyle === 'line',\n 'size--sm': this._size === 'sm',\n 'size--md': this._size === 'md',\n // 'size--lg': this._size === 'lg',\n vertical: this._vertical,\n selected: this.selected,\n disabled: this.disabled,\n };\n\n return html` <div class=${classMap(classes)}><slot></slot></div> `;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('click', (e) => this._handleClick(e));\n }\n\n override disconnectedCallback() {\n this.removeEventListener('click', (e) => this._handleClick(e));\n super.disconnectedCallback();\n }\n\n /**\n * Updates the 'aria-controls' and 'aria-selected' attributes based on changes to the\n * 'id' and 'selected' properties, respectively.\n * @param {any} changedProps - The `changedProps` parameter is an object that contains the properties\n * that have changed in the component. It is used to determine which properties have been updated and\n * perform specific actions based on those changes.\n */\n override willUpdate(changedProps: any) {\n if (changedProps.has('id')) {\n this['aria-controls'] = this.id + '-panel';\n }\n\n if (changedProps.has('selected')) {\n this['aria-selected'] = this.selected.toString();\n this.tabIndex = this.selected ? 0 : -1;\n }\n }\n\n /**\n * Dispatches a custom event called 'tab-activated' with the original event and tabId as details,\n * if the tab is not selected.\n * @param {any} e - The parameter \"e\" is an event object that represents the event that triggered the\n * click event handler.\n */\n private _handleClick(e: any) {\n if (!this.selected && !this.disabled) {\n const event = new CustomEvent('tab-activated', {\n bubbles: true,\n composed: true,\n detail: { origEvent: e, tabId: this.id },\n });\n this.dispatchEvent(event);\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-tab': Tab;\n }\n}\n"],"names":["Tab","LitElement","constructor","this","id","selected","disabled","_size","_vertical","_tabStyle","role","tabIndex","render","classes","tab","contained","line","vertical","html","classMap","connectedCallback","super","addEventListener","e","_handleClick","disconnectedCallback","removeEventListener","willUpdate","changedProps","has","toString","event","CustomEvent","bubbles","composed","detail","origEvent","tabId","dispatchEvent","styles","TabScss","__decorate","property","type","String","reflect","prototype","Boolean","state","Number","customElement"],"mappings":"yvBAUO,IAAMA,EAAN,cAAkBC,EAAlB,WAAAC,uBAKIC,KAAEC,GAAG,GAIdD,KAAQE,UAAG,EAIXF,KAAQG,UAAG,EAMHH,KAAKI,MAAG,KAMRJ,KAASK,WAAG,EAMZL,KAASM,UAAG,YAMXN,KAAIO,KAAG,MAMPP,KAAQQ,SAAG,EAMpBR,KAAe,iBAAG,QAMlBA,KAAe,iBAAG,
|
|
1
|
+
{"version":3,"file":"tab.js","sources":["../../../../src/components/reusable/tabs/tab.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TabScss from './tab.scss';\n\n/**\n * Tabs.\n * @slot unnamed - Slot for tab button text.\n */\n@customElement('kyn-tab')\nexport class Tab extends LitElement {\n static override styles = TabScss;\n\n /** Tab ID, required. */\n @property({ type: String, reflect: true })\n override id = '';\n\n /** Tab selected state. Must match Tab Panel visible state. */\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /** Tab disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Size of the tab buttons. Inherited.\n * @internal\n */\n @state()\n private _size = 'md';\n\n /** Vertical orientation. Inherited.\n * @internal\n */\n @state()\n private _vertical = false;\n\n /** Tab style. Inherited.\n * @internal\n */\n @state()\n private _tabStyle = 'contained';\n\n /** aria role.\n * @internal\n */\n @property({ type: String, reflect: true })\n override role = 'tab';\n\n /** Make host tabbable.\n * @internal\n */\n @property({ type: Number, reflect: true })\n override tabIndex = 0;\n\n /** aria-controls.\n * @internal\n */\n @property({ type: String, reflect: true })\n 'aria-selected' = 'false';\n\n /** aria-controls.\n * @internal\n */\n @property({ type: String, reflect: true })\n 'aria-controls' = '';\n\n /** aria-disabled.\n * @internal\n */\n @property({ type: String, reflect: true })\n 'aria-disabled' = 'false';\n\n override render() {\n const classes = {\n tab: true,\n contained: this._tabStyle === 'contained',\n line: this._tabStyle === 'line',\n 'size--sm': this._size === 'sm',\n 'size--md': this._size === 'md',\n // 'size--lg': this._size === 'lg',\n vertical: this._vertical,\n selected: this.selected,\n disabled: this.disabled,\n };\n\n return html` <div class=${classMap(classes)}><slot></slot></div> `;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('click', (e) => this._handleClick(e));\n }\n\n override disconnectedCallback() {\n this.removeEventListener('click', (e) => this._handleClick(e));\n super.disconnectedCallback();\n }\n\n /**\n * Updates the 'aria-controls' and 'aria-selected' attributes based on changes to the\n * 'id' and 'selected' properties, respectively.\n * @param {any} changedProps - The `changedProps` parameter is an object that contains the properties\n * that have changed in the component. It is used to determine which properties have been updated and\n * perform specific actions based on those changes.\n */\n override willUpdate(changedProps: any) {\n if (changedProps.has('id')) {\n this['aria-controls'] = this.id + '-panel';\n }\n\n if (changedProps.has('selected')) {\n this['aria-selected'] = this.selected.toString();\n this.tabIndex = this.selected ? 0 : -1;\n }\n\n if (changedProps.has('disabled')) {\n this['aria-disabled'] = this.disabled.toString();\n }\n }\n\n /**\n * Dispatches a custom event called 'tab-activated' with the original event and tabId as details,\n * if the tab is not selected.\n * @param {any} e - The parameter \"e\" is an event object that represents the event that triggered the\n * click event handler.\n */\n private _handleClick(e: any) {\n if (!this.selected && !this.disabled) {\n const event = new CustomEvent('tab-activated', {\n bubbles: true,\n composed: true,\n detail: { origEvent: e, tabId: this.id },\n });\n this.dispatchEvent(event);\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-tab': Tab;\n }\n}\n"],"names":["Tab","LitElement","constructor","this","id","selected","disabled","_size","_vertical","_tabStyle","role","tabIndex","render","classes","tab","contained","line","vertical","html","classMap","connectedCallback","super","addEventListener","e","_handleClick","disconnectedCallback","removeEventListener","willUpdate","changedProps","has","toString","event","CustomEvent","bubbles","composed","detail","origEvent","tabId","dispatchEvent","styles","TabScss","__decorate","property","type","String","reflect","prototype","Boolean","state","Number","customElement"],"mappings":"yvBAUO,IAAMA,EAAN,cAAkBC,EAAlB,WAAAC,uBAKIC,KAAEC,GAAG,GAIdD,KAAQE,UAAG,EAIXF,KAAQG,UAAG,EAMHH,KAAKI,MAAG,KAMRJ,KAASK,WAAG,EAMZL,KAASM,UAAG,YAMXN,KAAIO,KAAG,MAMPP,KAAQQ,SAAG,EAMpBR,KAAe,iBAAG,QAMlBA,KAAe,iBAAG,GAMlBA,KAAe,iBAAG,OAkEnB,CAhEU,MAAAS,GACP,MAAMC,EAAU,CACdC,KAAK,EACLC,UAA8B,cAAnBZ,KAAKM,UAChBO,KAAyB,SAAnBb,KAAKM,UACX,WAA2B,OAAfN,KAAKI,MACjB,WAA2B,OAAfJ,KAAKI,MAEjBU,SAAUd,KAAKK,UACfH,SAAUF,KAAKE,SACfC,SAAUH,KAAKG,UAGjB,OAAOY,CAAI,eAAeC,EAASN,yBACpC,CAEQ,iBAAAO,GACPC,MAAMD,oBACNjB,KAAKmB,iBAAiB,SAAUC,GAAMpB,KAAKqB,aAAaD,IACzD,CAEQ,oBAAAE,GACPtB,KAAKuB,oBAAoB,SAAUH,GAAMpB,KAAKqB,aAAaD,KAC3DF,MAAMI,sBACP,CASQ,UAAAE,CAAWC,GACdA,EAAaC,IAAI,QACnB1B,KAAK,iBAAmBA,KAAKC,GAAK,UAGhCwB,EAAaC,IAAI,cACnB1B,KAAK,iBAAmBA,KAAKE,SAASyB,WACtC3B,KAAKQ,SAAWR,KAAKE,SAAW,GAAK,GAGnCuB,EAAaC,IAAI,cACnB1B,KAAK,iBAAmBA,KAAKG,SAASwB,WAEzC,CAQO,YAAAN,CAAaD,GACnB,IAAKpB,KAAKE,WAAaF,KAAKG,SAAU,CACpC,MAAMyB,EAAQ,IAAIC,YAAY,gBAAiB,CAC7CC,SAAS,EACTC,UAAU,EACVC,OAAQ,CAAEC,UAAWb,EAAGc,MAAOlC,KAAKC,MAEtCD,KAAKmC,cAAcP,EACpB,CACF,GA7He/B,EAAMuC,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAClB7C,EAAA8C,UAAA,UAAA,GAIjBL,EAAA,CADCC,EAAS,CAAEC,KAAMI,QAASF,SAAS,KACnB7C,EAAA8C,UAAA,gBAAA,GAIjBL,EAAA,CADCC,EAAS,CAAEC,KAAMI,WACD/C,EAAA8C,UAAA,gBAAA,GAMjBL,EAAA,CADCO,KACoBhD,EAAA8C,UAAA,aAAA,GAMrBL,EAAA,CADCO,KACyBhD,EAAA8C,UAAA,iBAAA,GAM1BL,EAAA,CADCO,KAC+BhD,EAAA8C,UAAA,iBAAA,GAMhCL,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KACb7C,EAAA8C,UAAA,YAAA,GAMtBL,EAAA,CADCC,EAAS,CAAEC,KAAMM,OAAQJ,SAAS,KACb7C,EAAA8C,UAAA,gBAAA,GAMtBL,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KACT7C,EAAA8C,UAAA,qBAAA,GAM1BL,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KACd7C,EAAA8C,UAAA,qBAAA,GAMrBL,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KACT7C,EAAA8C,UAAA,qBAAA,GA7Df9C,EAAGyC,EAAA,CADfS,EAAc,YACFlD"}
|