@kyndryl-design-system/shidoka-applications 1.22.1 → 1.22.2
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.
|
@@ -11,5 +11,5 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
11
11
|
</button>
|
|
12
12
|
`:null}
|
|
13
13
|
</div>
|
|
14
|
-
`}updated(t){(t.has("filter")||t.has("tagSize")||t.has("limitTags"))&&this._updateChildren()}_handleSlotChange(){this._updateChildren(),this.requestUpdate()}_updateChildren(){this.tags.forEach((t=>{t.filter=this.filter})),this.tags.forEach((t=>{t.tagSize=this.tagSize})),this._toggleRevealed(
|
|
14
|
+
`}updated(t){(t.has("filter")||t.has("tagSize")||t.has("limitTags"))&&this._updateChildren()}_handleSlotChange(){this._updateChildren(),this.requestUpdate()}_updateChildren(){this.tags.forEach((t=>{t.filter=this.filter})),this.tags.forEach((t=>{t.tagSize=this.tagSize})),this._toggleRevealed(this.limitRevealed)}_toggleRevealed(t){this.limitRevealed=t,this.tags.forEach(((t,e)=>{!this.limitTags||this.limitRevealed?t.style.display="inline-block":t.style.display=e<5?"inline-block":"none"}))}};d.styles=m,t([l({type:Object})],d.prototype,"textStrings",void 0),t([l({type:Boolean})],d.prototype,"limitTags",void 0),t([o()],d.prototype,"limitRevealed",void 0),t([l({type:Boolean})],d.prototype,"filter",void 0),t([l({type:String})],d.prototype,"tagSize",void 0),t([a()],d.prototype,"tags",void 0),d=t([i("kyn-tag-group")],d);export{d as TagGroup};
|
|
15
15
|
//# sourceMappingURL=tagGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tagGroup.js","sources":["../../../../src/components/reusable/tag/tagGroup.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n customElement,\n property,\n state,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport './tag';\nimport TagGroupScss from './tagGroup.scss';\n\n/**\n * Tag & Tag Group\n * @slot unnamed - Slot for individual tags.\n */\n\n@customElement('kyn-tag-group')\nexport class TagGroup extends LitElement {\n static override styles = TagGroupScss;\n\n /** Text string customization. */\n @property({ type: Object })\n textStrings = {\n showAll: 'Show all',\n showLess: 'Show less',\n };\n\n /** Limits visible tags (5) behind a \"Show all\" button. Use only if having more than 5 tags.*/\n @property({ type: Boolean })\n limitTags = false;\n\n /** Tag limit visibility.\n * @internal\n */\n @state()\n limitRevealed = false;\n\n /** Tag group filter */\n @property({ type: Boolean })\n filter = false;\n\n /**\n * Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.\n */\n @property({ type: String })\n tagSize = 'md';\n\n /**\n * Queries for slotted tags.\n * @ignore\n */\n @queryAssignedElements()\n tags!: Array<any>;\n\n override render() {\n const toggleBtnClasses = {\n 'tag-reveal-toggle': true,\n [`tag-reveal-toggle-${this.tagSize}`]: true,\n };\n\n return html`\n <div class=\"tags-container\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n\n ${this.limitTags && this.tags.length > 5\n ? html`\n <button\n class=\"${classMap(toggleBtnClasses)}\"\n @click=${() => this._toggleRevealed(!this.limitRevealed)}\n >\n ${this.limitRevealed\n ? this.textStrings.showLess\n : html` ${this.textStrings.showAll}`}\n </button>\n `\n : null}\n </div>\n `;\n }\n override updated(changedProps: any) {\n if (\n changedProps.has('filter') ||\n changedProps.has('tagSize') ||\n changedProps.has('limitTags')\n ) {\n this._updateChildren();\n }\n }\n\n private _handleSlotChange() {\n this._updateChildren();\n this.requestUpdate();\n }\n\n private _updateChildren() {\n // set filter for each tag\n this.tags.forEach((tag: any) => {\n tag.filter = this.filter;\n });\n\n // set tag size for each tag\n this.tags.forEach((tag: any) => {\n tag.tagSize = this.tagSize;\n });\n\n this._toggleRevealed(
|
|
1
|
+
{"version":3,"file":"tagGroup.js","sources":["../../../../src/components/reusable/tag/tagGroup.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n customElement,\n property,\n state,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport './tag';\nimport TagGroupScss from './tagGroup.scss';\n\n/**\n * Tag & Tag Group\n * @slot unnamed - Slot for individual tags.\n */\n\n@customElement('kyn-tag-group')\nexport class TagGroup extends LitElement {\n static override styles = TagGroupScss;\n\n /** Text string customization. */\n @property({ type: Object })\n textStrings = {\n showAll: 'Show all',\n showLess: 'Show less',\n };\n\n /** Limits visible tags (5) behind a \"Show all\" button. Use only if having more than 5 tags.*/\n @property({ type: Boolean })\n limitTags = false;\n\n /** Tag limit visibility.\n * @internal\n */\n @state()\n limitRevealed = false;\n\n /** Tag group filter */\n @property({ type: Boolean })\n filter = false;\n\n /**\n * Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.\n */\n @property({ type: String })\n tagSize = 'md';\n\n /**\n * Queries for slotted tags.\n * @ignore\n */\n @queryAssignedElements()\n tags!: Array<any>;\n\n override render() {\n const toggleBtnClasses = {\n 'tag-reveal-toggle': true,\n [`tag-reveal-toggle-${this.tagSize}`]: true,\n };\n\n return html`\n <div class=\"tags-container\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n\n ${this.limitTags && this.tags.length > 5\n ? html`\n <button\n class=\"${classMap(toggleBtnClasses)}\"\n @click=${() => this._toggleRevealed(!this.limitRevealed)}\n >\n ${this.limitRevealed\n ? this.textStrings.showLess\n : html` ${this.textStrings.showAll}`}\n </button>\n `\n : null}\n </div>\n `;\n }\n override updated(changedProps: any) {\n if (\n changedProps.has('filter') ||\n changedProps.has('tagSize') ||\n changedProps.has('limitTags')\n ) {\n this._updateChildren();\n }\n }\n\n private _handleSlotChange() {\n this._updateChildren();\n this.requestUpdate();\n }\n\n private _updateChildren() {\n // set filter for each tag\n this.tags.forEach((tag: any) => {\n tag.filter = this.filter;\n });\n\n // set tag size for each tag\n this.tags.forEach((tag: any) => {\n tag.tagSize = this.tagSize;\n });\n\n this._toggleRevealed(this.limitRevealed);\n }\n\n private _toggleRevealed(revealed: boolean) {\n const Limit = 5;\n this.limitRevealed = revealed;\n this.tags.forEach((tagEl, index) => {\n if (!this.limitTags || this.limitRevealed) {\n tagEl.style.display = 'inline-block';\n } else {\n if (index < Limit) {\n tagEl.style.display = 'inline-block';\n } else {\n tagEl.style.display = 'none';\n }\n }\n });\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-tag-group': TagGroup;\n }\n}\n"],"names":["TagGroup","LitElement","constructor","this","textStrings","showAll","showLess","limitTags","limitRevealed","filter","tagSize","render","toggleBtnClasses","html","_handleSlotChange","tags","length","classMap","_toggleRevealed","updated","changedProps","has","_updateChildren","requestUpdate","forEach","tag","revealed","tagEl","index","style","display","styles","TagGroupScss","__decorate","property","type","Object","prototype","Boolean","state","String","queryAssignedElements","customElement"],"mappings":"+yBAiBO,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAKLC,KAAAC,YAAc,CACZC,QAAS,WACTC,SAAU,aAKZH,KAASI,WAAG,EAMZJ,KAAaK,eAAG,EAIhBL,KAAMM,QAAG,EAMTN,KAAOO,QAAG,IA8EX,CArEU,MAAAC,GACP,MAAMC,EAAmB,CACvB,qBAAqB,EACrB,CAAC,qBAAqBT,KAAKO,YAAY,GAGzC,OAAOG,CAAI;;4BAEaV,KAAKW;;UAEvBX,KAAKI,WAAaJ,KAAKY,KAAKC,OAAS,EACnCH,CAAI;;yBAESI,EAASL;yBACT,IAAMT,KAAKe,iBAAiBf,KAAKK;;kBAExCL,KAAKK,cACHL,KAAKC,YAAYE,SACjBO,CAAI,IAAIV,KAAKC,YAAYC;;cAGjC;;KAGT,CACQ,OAAAc,CAAQC,IAEbA,EAAaC,IAAI,WACjBD,EAAaC,IAAI,YACjBD,EAAaC,IAAI,eAEjBlB,KAAKmB,iBAER,CAEO,iBAAAR,GACNX,KAAKmB,kBACLnB,KAAKoB,eACN,CAEO,eAAAD,GAENnB,KAAKY,KAAKS,SAASC,IACjBA,EAAIhB,OAASN,KAAKM,MAAM,IAI1BN,KAAKY,KAAKS,SAASC,IACjBA,EAAIf,QAAUP,KAAKO,OAAO,IAG5BP,KAAKe,gBAAgBf,KAAKK,cAC3B,CAEO,eAAAU,CAAgBQ,GAEtBvB,KAAKK,cAAgBkB,EACrBvB,KAAKY,KAAKS,SAAQ,CAACG,EAAOC,MACnBzB,KAAKI,WAAaJ,KAAKK,cAC1BmB,EAAME,MAAMC,QAAU,eAGpBH,EAAME,MAAMC,QADVF,EANM,EAOc,eAEA,MAEzB,GAEJ,GAxGe5B,EAAM+B,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAIhBpC,EAAAqC,UAAA,mBAAA,GAIFJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACAtC,EAAAqC,UAAA,iBAAA,GAMlBJ,EAAA,CADCM,KACqBvC,EAAAqC,UAAA,qBAAA,GAItBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACHtC,EAAAqC,UAAA,cAAA,GAMfJ,EAAA,CADCC,EAAS,CAAEC,KAAMK,UACHxC,EAAAqC,UAAA,eAAA,GAOfJ,EAAA,CADCQ,KACiBzC,EAAAqC,UAAA,YAAA,GAnCPrC,EAAQiC,EAAA,CADpBS,EAAc,kBACF1C"}
|