@kyndryl-design-system/shidoka-applications 2.69.13 → 2.70.0
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/tag/tag.d.ts +5 -0
- package/components/reusable/tag/tag.d.ts.map +1 -1
- package/components/reusable/tag/tag.js +8 -8
- package/components/reusable/tag/tag.js.map +1 -1
- package/components/reusable/tag/tagGroup.d.ts +2 -1
- package/components/reusable/tag/tagGroup.d.ts.map +1 -1
- package/components/reusable/tag/tagGroup.js +5 -5
- package/components/reusable/tag/tagGroup.js.map +1 -1
- package/package.json +1 -1
|
@@ -23,6 +23,11 @@ export declare class Tag extends LitElement {
|
|
|
23
23
|
* Determine if Tag state is filter.
|
|
24
24
|
*/
|
|
25
25
|
accessor filter: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* When true, tag-group visibility limiting will never hide this tag.
|
|
28
|
+
* Note: this should primarily for the `Clear All` tag.
|
|
29
|
+
*/
|
|
30
|
+
accessor persistentTag: boolean;
|
|
26
31
|
/**
|
|
27
32
|
* Removes label text truncation.
|
|
28
33
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tag/tag.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAMlD;;;;;GAKG;AAEH,qBACa,GAAI,SAAQ,UAAU;IACjC,OAAgB,MAAM,0BAAsB;IAE5C;;OAEG;IAEH,QAAQ,CAAC,KAAK,SAAM;IAEpB;;OAEG;IAEH,QAAQ,CAAC,OAAO,SAAQ;IAExB;;OAEG;IAEH,QAAQ,CAAC,QAAQ,UAAS;IAE1B;;OAEG;IAEH,QAAQ,CAAC,MAAM,UAAS;IAExB;;OAEG;IAEH,QAAQ,CAAC,YAAY,UAAS;IAE9B;;;;OAIG;IAEH,QAAQ,CAAC,SAAS,UAAS;IAE3B;;OAEG;IAEH,QAAQ,CAAC,QAAQ,EAAE,SAAS,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,IAAI,GAAG,KAAK,CAC5D;IAEZ;;OAEG;IAEH,QAAQ,CAAC,YAAY,SAAe;IAE3B,OAAO;IAIP,MAAM;IAiGf,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,mBAAmB;IAc3B,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,cAAc;CAgBvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,GAAG,CAAC;KAChB;CACF"}
|
|
1
|
+
{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tag/tag.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAMlD;;;;;GAKG;AAEH,qBACa,GAAI,SAAQ,UAAU;IACjC,OAAgB,MAAM,0BAAsB;IAE5C;;OAEG;IAEH,QAAQ,CAAC,KAAK,SAAM;IAEpB;;OAEG;IAEH,QAAQ,CAAC,OAAO,SAAQ;IAExB;;OAEG;IAEH,QAAQ,CAAC,QAAQ,UAAS;IAE1B;;OAEG;IAEH,QAAQ,CAAC,MAAM,UAAS;IAExB;;;OAGG;IAEH,QAAQ,CAAC,aAAa,UAAS;IAE/B;;OAEG;IAEH,QAAQ,CAAC,YAAY,UAAS;IAE9B;;;;OAIG;IAEH,QAAQ,CAAC,SAAS,UAAS;IAE3B;;OAEG;IAEH,QAAQ,CAAC,QAAQ,EAAE,SAAS,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,IAAI,GAAG,KAAK,CAC5D;IAEZ;;OAEG;IAEH,QAAQ,CAAC,YAAY,SAAe;IAE3B,OAAO;IAIP,MAAM;IAiGf,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,mBAAmB;IAc3B,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,cAAc;CAgBvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,GAAG,CAAC;KAChB;CACF"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{__setFunctionName as t,__esDecorate as e,__runInitializers as a,__classPrivateFieldGet as
|
|
1
|
+
import{__setFunctionName as t,__esDecorate as e,__runInitializers as a,__classPrivateFieldGet as s,__classPrivateFieldSet as i}from"tslib";import{unsafeSVG as l}from"lit-html/directives/unsafe-svg.js";import{LitElement as n,unsafeCSS as r,html as c}from"lit";import{customElement as o,property as h}from"lit/decorators.js";import{classMap as g}from"lit-html/directives/class-map.js";import{c as d}from"../../../vendor/@kyndryl-design-system/shidoka-icons-oqOblwTK.js";import{c as b}from"../../../tag-ehM901IX.js";let u=(()=>{var u,m,p,k,T,f,$,v,C;let w,y,S,z,E,_,x,M,W,j,P,F=[o("kyn-tag")],N=[],B=n,O=[],q=[],A=[],D=[],G=[],H=[],I=[],J=[],K=[],L=[],Q=[],R=[],U=[],V=[],X=[],Y=[],Z=[],tt=[];return y=class extends B{get label(){return s(this,u,"f")}set label(t){i(this,u,t,"f")}get tagSize(){return s(this,m,"f")}set tagSize(t){i(this,m,t,"f")}get disabled(){return s(this,p,"f")}set disabled(t){i(this,p,t,"f")}get filter(){return s(this,k,"f")}set filter(t){i(this,k,t,"f")}get persistentTag(){return s(this,T,"f")}set persistentTag(t){i(this,T,t,"f")}get noTruncation(){return s(this,f,"f")}set noTruncation(t){i(this,f,t,"f")}get clickable(){return s(this,$,"f")}set clickable(t){i(this,$,t,"f")}get tagColor(){return s(this,v,"f")}set tagColor(t){i(this,v,t,"f")}get clearTagText(){return s(this,C,"f")}set clearTagText(t){i(this,C,t,"f")}updated(){this.label=this.label.trim()}render(){const t=`tag-${this.tagColor}`,e="md"===this.tagSize?"tag-medium":"tag-small",a={tags:!0,"tag-disable":this.disabled,"tag-clickable":this.clickable,[`tag-clickable-${this.tagColor}`]:this.clickable,[`${t}`]:!0,[`${e}`]:!0,[`${e}-filter`]:this.filter},s=`${t}-close-btn`,i=`tag-close-btn-${this.tagSize}`,n={"tag-close-btn":!0,[`${s}`]:!0,[`${i}`]:!0},r={"tag-label":!0,"no-truncation":this.noTruncation,[`${e}-label`]:!0,[`${e}-label-filter`]:this.filter},o=`tag--new-${this.tagColor}`,h="md"===this.tagSize?"tag--new-medium":"tag--new-small",b={"tags--new":!0,"no-truncation":this.noTruncation,"tag--new-disable":this.disabled,"tag--new-clickable":this._isTagClickable(),[`tag--new-clickable-${this.tagColor}`]:this._isTagClickable(),[`${o}`]:!0,[`${h}`]:!0},u=`${o}-close-btn`,m=`tag-close-btn--new-${this.tagSize}`,p={"tag-close-btn--new":!0,[`${u}`]:!0,[`${m}`]:!0};return c`
|
|
2
2
|
<div
|
|
3
|
-
class="${
|
|
3
|
+
class="${g(this._chechForNewTag()?b:a)}"
|
|
4
4
|
tagSize="${this.tagSize}"
|
|
5
5
|
?disabled="${this.disabled}"
|
|
6
6
|
?filter=${this.filter}
|
|
@@ -10,24 +10,24 @@ import{__setFunctionName as t,__esDecorate as e,__runInitializers as a,__classPr
|
|
|
10
10
|
@click=${t=>this.handleTagClick(t,this.label)}
|
|
11
11
|
@keydown=${t=>this.handleTagPress(t,this.label)}
|
|
12
12
|
>
|
|
13
|
-
${this._chechForNewTag()?
|
|
13
|
+
${this._chechForNewTag()?c`<slot></slot>`:""}
|
|
14
14
|
<span
|
|
15
|
-
class="${
|
|
15
|
+
class="${g(this._chechForNewTag()?{"tag-label--new":!0}:r)}"
|
|
16
16
|
aria-disabled=${this.disabled}
|
|
17
17
|
>${this.label}</span
|
|
18
18
|
>
|
|
19
|
-
${this.filter?
|
|
19
|
+
${this.filter?c`
|
|
20
20
|
<button
|
|
21
|
-
class="${
|
|
21
|
+
class="${g(this._chechForNewTag()?p:n)}"
|
|
22
22
|
?disabled="${this.disabled}"
|
|
23
23
|
title="${this.clearTagText} ${this.label}"
|
|
24
24
|
aria-label="${this.clearTagText} ${this.label}"
|
|
25
25
|
@click=${t=>this.handleTagClear(t,this.label)}
|
|
26
26
|
@keydown=${t=>this.handleTagClearPress(t,this.label)}
|
|
27
27
|
>
|
|
28
|
-
<span>${l(
|
|
28
|
+
<span>${l(d)}</span>
|
|
29
29
|
</button>
|
|
30
30
|
`:""}
|
|
31
31
|
</div>
|
|
32
|
-
`}_chechForNewTag(){return!!["default","spruce","sea","lilac","ai","red"].includes(this.tagColor)}_isTagClickable(){return this._chechForNewTag()?!this.filter:this.clickable}handleTagClear(t,e){if(t.stopPropagation(),t.pointerType&&!this.disabled){const a=new CustomEvent("on-close",{detail:{value:e,origEvent:t}});this.dispatchEvent(a)}}handleTagClearPress(t,e){if(t.stopPropagation(),(32===t.keyCode||13===t.keyCode)&&!this.disabled){const a=new CustomEvent("on-close",{detail:{value:e,origEvent:t}});this.dispatchEvent(a)}}handleTagClick(t,e){if(!this.disabled&&this._isTagClickable()){const a=new CustomEvent("on-click",{detail:{value:e,origEvent:t}});this.dispatchEvent(a)}}handleTagPress(t,e){if((32===t.keyCode||13===t.keyCode)&&!this.disabled&&this._isTagClickable()){const a=new CustomEvent("on-click",{detail:{value:e,origEvent:t}});this.dispatchEvent(a)}}constructor(){super(...arguments),u.set(this,a(this,
|
|
32
|
+
`}_chechForNewTag(){return!!["default","spruce","sea","lilac","ai","red"].includes(this.tagColor)}_isTagClickable(){return this._chechForNewTag()?!this.filter:this.clickable}handleTagClear(t,e){if(t.stopPropagation(),t.pointerType&&!this.disabled){const a=new CustomEvent("on-close",{detail:{value:e,origEvent:t}});this.dispatchEvent(a)}}handleTagClearPress(t,e){if(t.stopPropagation(),(32===t.keyCode||13===t.keyCode)&&!this.disabled){const a=new CustomEvent("on-close",{detail:{value:e,origEvent:t}});this.dispatchEvent(a)}}handleTagClick(t,e){if(!this.disabled&&this._isTagClickable()){const a=new CustomEvent("on-click",{detail:{value:e,origEvent:t}});this.dispatchEvent(a)}}handleTagPress(t,e){if((32===t.keyCode||13===t.keyCode)&&!this.disabled&&this._isTagClickable()){const a=new CustomEvent("on-click",{detail:{value:e,origEvent:t}});this.dispatchEvent(a)}}constructor(){super(...arguments),u.set(this,a(this,O,"")),m.set(this,(a(this,q),a(this,A,"md"))),p.set(this,(a(this,D),a(this,G,!1))),k.set(this,(a(this,H),a(this,I,!1))),T.set(this,(a(this,J),a(this,K,!1))),f.set(this,(a(this,L),a(this,Q,!1))),$.set(this,(a(this,R),a(this,U,!1))),v.set(this,(a(this,V),a(this,X,"default"))),C.set(this,(a(this,Y),a(this,Z,"Clear Tag"))),a(this,tt)}},u=new WeakMap,m=new WeakMap,p=new WeakMap,k=new WeakMap,T=new WeakMap,f=new WeakMap,$=new WeakMap,v=new WeakMap,C=new WeakMap,t(y,"Tag"),(()=>{var t;const a="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(t=B[Symbol.metadata])&&void 0!==t?t:null):void 0;S=[h({type:String})],z=[h({type:String})],E=[h({type:Boolean})],_=[h({type:Boolean})],x=[h({type:Boolean})],M=[h({type:Boolean})],W=[h({type:Boolean})],j=[h({type:String})],P=[h({type:String})],e(y,null,S,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:t=>"label"in t,get:t=>t.label,set:(t,e)=>{t.label=e}},metadata:a},O,q),e(y,null,z,{kind:"accessor",name:"tagSize",static:!1,private:!1,access:{has:t=>"tagSize"in t,get:t=>t.tagSize,set:(t,e)=>{t.tagSize=e}},metadata:a},A,D),e(y,null,E,{kind:"accessor",name:"disabled",static:!1,private:!1,access:{has:t=>"disabled"in t,get:t=>t.disabled,set:(t,e)=>{t.disabled=e}},metadata:a},G,H),e(y,null,_,{kind:"accessor",name:"filter",static:!1,private:!1,access:{has:t=>"filter"in t,get:t=>t.filter,set:(t,e)=>{t.filter=e}},metadata:a},I,J),e(y,null,x,{kind:"accessor",name:"persistentTag",static:!1,private:!1,access:{has:t=>"persistentTag"in t,get:t=>t.persistentTag,set:(t,e)=>{t.persistentTag=e}},metadata:a},K,L),e(y,null,M,{kind:"accessor",name:"noTruncation",static:!1,private:!1,access:{has:t=>"noTruncation"in t,get:t=>t.noTruncation,set:(t,e)=>{t.noTruncation=e}},metadata:a},Q,R),e(y,null,W,{kind:"accessor",name:"clickable",static:!1,private:!1,access:{has:t=>"clickable"in t,get:t=>t.clickable,set:(t,e)=>{t.clickable=e}},metadata:a},U,V),e(y,null,j,{kind:"accessor",name:"tagColor",static:!1,private:!1,access:{has:t=>"tagColor"in t,get:t=>t.tagColor,set:(t,e)=>{t.tagColor=e}},metadata:a},X,Y),e(y,null,P,{kind:"accessor",name:"clearTagText",static:!1,private:!1,access:{has:t=>"clearTagText"in t,get:t=>t.clearTagText,set:(t,e)=>{t.clearTagText=e}},metadata:a},Z,tt),e(null,w={value:y},F,{kind:"class",name:y.name,metadata:a},null,N),y=w.value,a&&Object.defineProperty(y,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:a})})(),y.styles=r(b),a(y,N),y})();export{u as Tag};
|
|
33
33
|
//# sourceMappingURL=tag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag.js","sources":["../../../../src/components/reusable/tag/tag.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport clearIcon16 from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\nimport TagScss from './tag.scss?inline';\n\n/**\n * Tag.\n * @fires on-close - Captures the close event and emits the Tag value. Works with filterable tags. `detail:{ origEvent: PointerEvent,value: string }`\n * @fires on-click - Captures the click event and emits the Tag value. Works with clickable tags. `detail:{ origEvent: PointerEvent,value: string }`\n * @slot unnamed - Slot for icon.\n */\n\n@customElement('kyn-tag')\nexport class Tag extends LitElement {\n static override styles = unsafeCSS(TagScss);\n\n /**\n * Tag name (Required).\n */\n @property({ type: String })\n accessor label = '';\n\n /**\n * Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.\n */\n @property({ type: String })\n accessor tagSize = 'md';\n\n /**\n * Specify if the Tag is disabled.\n */\n @property({ type: Boolean })\n accessor disabled = false;\n\n /**\n * Determine if Tag state is filter.\n */\n @property({ type: Boolean })\n accessor filter = false;\n\n /**\n * Removes label text truncation.\n */\n @property({ type: Boolean })\n accessor noTruncation = false;\n\n /**\n * Determine if Tag is clickable(applicable for old tags only).\n * <br>\n * **NOTE**: New tags are **clickable** by **default**.\n */\n @property({ type: Boolean })\n accessor clickable = false;\n\n /**\n * Color variants.\n */\n @property({ type: String })\n accessor tagColor: 'default' | 'spruce' | 'sea' | 'lilac' | 'ai' | 'red' =\n 'default';\n\n /**\n * Clear Tag Text to improve accessibility\n */\n @property({ type: String })\n accessor clearTagText = 'Clear Tag';\n\n override updated() {\n this.label = this.label.trim();\n }\n\n override render() {\n /* --------------------- DEPRECATED --------------------- */\n const baseColorClass = `tag-${this.tagColor}`;\n const sizeClass = this.tagSize === 'md' ? 'tag-medium' : 'tag-small';\n\n const tagClasses = {\n tags: true,\n 'tag-disable': this.disabled,\n 'tag-clickable': this.clickable,\n [`tag-clickable-${this.tagColor}`]: this.clickable,\n [`${baseColorClass}`]: true,\n [`${sizeClass}`]: true,\n [`${sizeClass}-filter`]: this.filter,\n };\n\n const iconOutlineClasses = `${baseColorClass}-close-btn`;\n const iconOutlineOffsetClass = `tag-close-btn-${this.tagSize}`;\n const iconClasses = {\n 'tag-close-btn': true,\n [`${iconOutlineClasses}`]: true,\n [`${iconOutlineOffsetClass}`]: true,\n };\n\n const labelClasses = {\n 'tag-label': true,\n 'no-truncation': this.noTruncation,\n [`${sizeClass}-label`]: true,\n [`${sizeClass}-label-filter`]: this.filter,\n };\n /* --------------------- DEPRECATED --------------------- */\n\n const newBaseColorClass = `tag--new-${this.tagColor}`;\n const newSizeClass =\n this.tagSize === 'md' ? 'tag--new-medium' : 'tag--new-small';\n\n const newTagClasses = {\n 'tags--new': true,\n 'no-truncation': this.noTruncation,\n 'tag--new-disable': this.disabled,\n 'tag--new-clickable': this._isTagClickable(),\n [`tag--new-clickable-${this.tagColor}`]: this._isTagClickable(),\n [`${newBaseColorClass}`]: true,\n [`${newSizeClass}`]: true,\n };\n\n const newIconOutlineClasses = `${newBaseColorClass}-close-btn`;\n const newIconOutlineOffsetClass = `tag-close-btn--new-${this.tagSize}`;\n const newIconClasses = {\n 'tag-close-btn--new': true,\n [`${newIconOutlineClasses}`]: true,\n [`${newIconOutlineOffsetClass}`]: true,\n };\n\n const newLabelClasses = {\n 'tag-label--new': true,\n };\n\n return html`\n <div\n class=\"${classMap(this._chechForNewTag() ? newTagClasses : tagClasses)}\"\n tagSize=\"${this.tagSize}\"\n ?disabled=\"${this.disabled}\"\n ?filter=${this.filter}\n tagColor=${this.tagColor}\n title=\"${this.label}\"\n tabindex=\"${this._isTagClickable() ? '0' : '-1'}\"\n @click=${(e: any) => this.handleTagClick(e, this.label)}\n @keydown=${(e: any) => this.handleTagPress(e, this.label)}\n >\n ${this._chechForNewTag() ? html`<slot></slot>` : ''}\n <span\n class=\"${classMap(\n this._chechForNewTag() ? newLabelClasses : labelClasses\n )}\"\n aria-disabled=${this.disabled}\n >${this.label}</span\n >\n ${this.filter\n ? html`\n <button\n class=\"${classMap(\n this._chechForNewTag() ? newIconClasses : iconClasses\n )}\"\n ?disabled=\"${this.disabled}\"\n title=\"${this.clearTagText} ${this.label}\"\n aria-label=\"${this.clearTagText} ${this.label}\"\n @click=${(e: any) => this.handleTagClear(e, this.label)}\n @keydown=${(e: any) => this.handleTagClearPress(e, this.label)}\n >\n <span>${unsafeSVG(clearIcon16)}</span>\n </button>\n `\n : ''}\n </div>\n `;\n }\n\n private _chechForNewTag() {\n const newTags = ['default', 'spruce', 'sea', 'lilac', 'ai', 'red'];\n if (newTags.includes(this.tagColor)) {\n return true;\n } else {\n return false;\n }\n }\n\n private _isTagClickable() {\n if (this._chechForNewTag()) {\n return !this.filter;\n } else {\n return this.clickable;\n }\n }\n\n private handleTagClear(e: any, value: string) {\n e.stopPropagation();\n if (e.pointerType && !this.disabled) {\n const event = new CustomEvent('on-close', {\n detail: {\n value,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n }\n\n private handleTagClearPress(e: any, value: string) {\n e.stopPropagation();\n // Keyboard key codes: 32 = SPACE | 13 = ENTER\n if ((e.keyCode === 32 || e.keyCode === 13) && !this.disabled) {\n const event = new CustomEvent('on-close', {\n detail: {\n value,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n }\n\n private handleTagClick(e: any, value: string) {\n if (!this.disabled && this._isTagClickable()) {\n const event = new CustomEvent('on-click', {\n detail: {\n value,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n }\n\n private handleTagPress(e: any, value: string) {\n // Keyboard key codes: 32 = SPACE | 13 = ENTER\n if (\n (e.keyCode === 32 || e.keyCode === 13) &&\n !this.disabled &&\n this._isTagClickable()\n ) {\n const event = new CustomEvent('on-click', {\n detail: {\n value,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-tag': Tag;\n }\n}\n"],"names":["Tag","customElement","LitElement","_classThis","_classSuper","label","__classPrivateFieldGet","this","_Tag_label_accessor_storage","value","__classPrivateFieldSet","tagSize","_Tag_tagSize_accessor_storage","disabled","_Tag_disabled_accessor_storage","filter","_Tag_filter_accessor_storage","noTruncation","_Tag_noTruncation_accessor_storage","clickable","_Tag_clickable_accessor_storage","tagColor","_Tag_tagColor_accessor_storage","clearTagText","_Tag_clearTagText_accessor_storage","updated","trim","render","baseColorClass","sizeClass","tagClasses","tags","iconOutlineClasses","iconOutlineOffsetClass","iconClasses","labelClasses","newBaseColorClass","newSizeClass","newTagClasses","_isTagClickable","newIconOutlineClasses","newIconOutlineOffsetClass","newIconClasses","html","classMap","_chechForNewTag","e","handleTagClick","handleTagPress","handleTagClear","handleTagClearPress","unsafeSVG","clearIcon16","includes","stopPropagation","pointerType","event","CustomEvent","detail","origEvent","dispatchEvent","keyCode","set","__runInitializers","_label_initializers","_label_extraInitializers","_tagSize_initializers","_tagSize_extraInitializers","_disabled_initializers","_disabled_extraInitializers","_filter_initializers","_filter_extraInitializers","_noTruncation_initializers","_noTruncation_extraInitializers","_clickable_initializers","_clickable_extraInitializers","_tagColor_initializers","_tagColor_extraInitializers","_clearTagText_initializers","_label_decorators","property","type","String","_tagSize_decorators","_disabled_decorators","Boolean","_filter_decorators","_noTruncation_decorators","_clickable_decorators","_tagColor_decorators","_clearTagText_decorators","__esDecorate","kind","name","static","private","access","has","obj","get","metadata","_metadata","_clearTagText_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","TagScss"],"mappings":"qgBAeaA,EAAG,qDADfC,EAAc,mBACUC,yFAARC,EAAA,cAAQC,EAOvB,SAASC,GAAK,OAAAC,EAAAC,KAAAC,EAAA,IAAA,CAAd,SAASH,CAAKI,GAAAC,EAAAH,KAAAC,EAAAC,EAAA,IAAA,CAMd,WAASE,GAAO,OAAAL,EAAAC,KAAAK,EAAA,IAAA,CAAhB,WAASD,CAAOF,GAAAC,EAAAH,KAAAK,EAAAH,EAAA,IAAA,CAMhB,YAASI,GAAQ,OAAAP,EAAAC,KAAAO,EAAA,IAAA,CAAjB,YAASD,CAAQJ,GAAAC,EAAAH,KAAAO,EAAAL,EAAA,IAAA,CAMjB,UAASM,GAAM,OAAAT,EAAAC,KAAAS,EAAA,IAAA,CAAf,UAASD,CAAMN,GAAAC,EAAAH,KAAAS,EAAAP,EAAA,IAAA,CAMf,gBAASQ,GAAY,OAAAX,EAAAC,KAAAW,EAAA,IAAA,CAArB,gBAASD,CAAYR,GAAAC,EAAAH,KAAAW,EAAAT,EAAA,IAAA,CAQrB,aAASU,GAAS,OAAAb,EAAAC,KAAAa,EAAA,IAAA,CAAlB,aAASD,CAASV,GAAAC,EAAAH,KAAAa,EAAAX,EAAA,IAAA,CAMlB,YAASY,GAAQ,OAAAf,EAAAC,KAAAe,EAAA,IAAA,CAAjB,YAASD,CAAQZ,GAAAC,EAAAH,KAAAe,EAAAb,EAAA,IAAA,CAOjB,gBAASc,GAAY,OAAAjB,EAAAC,KAAAiB,EAAA,IAAA,CAArB,gBAASD,CAAYd,GAAAC,EAAAH,KAAAiB,EAAAf,EAAA,IAAA,CAEZ,OAAAgB,GACPlB,KAAKF,MAAQE,KAAKF,MAAMqB,OAGjB,MAAAC,GAEP,MAAMC,EAAiB,OAAOrB,KAAKc,WAC7BQ,EAA6B,OAAjBtB,KAAKI,QAAmB,aAAe,YAEnDmB,EAAa,CACjBC,MAAM,EACN,cAAexB,KAAKM,SACpB,gBAAiBN,KAAKY,UACtB,CAAC,iBAAiBZ,KAAKc,YAAad,KAAKY,UACzC,CAAC,GAAGS,MAAmB,EACvB,CAAC,GAAGC,MAAc,EAClB,CAAC,GAAGA,YAAqBtB,KAAKQ,QAG1BiB,EAAqB,GAAGJ,cACxBK,EAAyB,iBAAiB1B,KAAKI,UAC/CuB,EAAc,CAClB,iBAAiB,EACjB,CAAC,GAAGF,MAAuB,EAC3B,CAAC,GAAGC,MAA2B,GAG3BE,EAAe,CACnB,aAAa,EACb,gBAAiB5B,KAAKU,aACtB,CAAC,GAAGY,YAAoB,EACxB,CAAC,GAAGA,kBAA2BtB,KAAKQ,QAIhCqB,EAAoB,YAAY7B,KAAKc,WACrCgB,EACa,OAAjB9B,KAAKI,QAAmB,kBAAoB,iBAExC2B,EAAgB,CACpB,aAAa,EACb,gBAAiB/B,KAAKU,aACtB,mBAAoBV,KAAKM,SACzB,qBAAsBN,KAAKgC,kBAC3B,CAAC,sBAAsBhC,KAAKc,YAAad,KAAKgC,kBAC9C,CAAC,GAAGH,MAAsB,EAC1B,CAAC,GAAGC,MAAiB,GAGjBG,EAAwB,GAAGJ,cAC3BK,EAA4B,sBAAsBlC,KAAKI,UACvD+B,EAAiB,CACrB,sBAAsB,EACtB,CAAC,GAAGF,MAA0B,EAC9B,CAAC,GAAGC,MAA8B,GAOpC,OAAOE,CAAI;;iBAEEC,EAASrC,KAAKsC,kBAAoBP,EAAgBR;mBAChDvB,KAAKI;qBACHJ,KAAKM;kBACRN,KAAKQ;mBACJR,KAAKc;iBACPd,KAAKF;oBACFE,KAAKgC,kBAAoB,IAAM;iBACjCO,GAAWvC,KAAKwC,eAAeD,EAAGvC,KAAKF;mBACrCyC,GAAWvC,KAAKyC,eAAeF,EAAGvC,KAAKF;;UAEjDE,KAAKsC,kBAAoBF,CAAI,gBAAkB;;mBAEtCC,EACPrC,KAAKsC,kBAnBW,CACtB,kBAAkB,GAkB+BV;0BAE7B5B,KAAKM;aAClBN,KAAKF;;UAERE,KAAKQ,OACH4B,CAAI;;yBAESC,EACPrC,KAAKsC,kBAAoBH,EAAiBR;6BAE/B3B,KAAKM;yBACTN,KAAKgB,gBAAgBhB,KAAKF;8BACrBE,KAAKgB,gBAAgBhB,KAAKF;yBAC9ByC,GAAWvC,KAAK0C,eAAeH,EAAGvC,KAAKF;2BACrCyC,GAAWvC,KAAK2C,oBAAoBJ,EAAGvC,KAAKF;;wBAEhD8C,EAAUC;;cAGtB;;MAKF,eAAAP,GAEN,QADgB,CAAC,UAAW,SAAU,MAAO,QAAS,KAAM,OAChDQ,SAAS9C,KAAKc,UAOpB,eAAAkB,GACN,OAAIhC,KAAKsC,mBACCtC,KAAKQ,OAENR,KAAKY,UAIR,cAAA8B,CAAeH,EAAQrC,GAE7B,GADAqC,EAAEQ,kBACER,EAAES,cAAgBhD,KAAKM,SAAU,CACnC,MAAM2C,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CACNjD,QACAkD,UAAWb,KAGfvC,KAAKqD,cAAcJ,IAIf,mBAAAN,CAAoBJ,EAAQrC,GAGlC,GAFAqC,EAAEQ,mBAEiB,KAAdR,EAAEe,SAAgC,KAAdf,EAAEe,WAAoBtD,KAAKM,SAAU,CAC5D,MAAM2C,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CACNjD,QACAkD,UAAWb,KAGfvC,KAAKqD,cAAcJ,IAIf,cAAAT,CAAeD,EAAQrC,GAC7B,IAAKF,KAAKM,UAAYN,KAAKgC,kBAAmB,CAC5C,MAAMiB,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CACNjD,QACAkD,UAAWb,KAGfvC,KAAKqD,cAAcJ,IAIf,cAAAR,CAAeF,EAAQrC,GAE7B,IACiB,KAAdqC,EAAEe,SAAgC,KAAdf,EAAEe,WACtBtD,KAAKM,UACNN,KAAKgC,kBACL,CACA,MAAMiB,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CACNjD,QACAkD,UAAWb,KAGfvC,KAAKqD,cAAcJ,sCAzNdhD,EAAAsD,IAAAvD,KAAAwD,EAAAxD,KAAAyD,EAAQ,KAMRpD,EAAAkD,IAAAvD,MAAAwD,EAAAxD,KAAA0D,GAAAF,EAAAxD,KAAA2D,EAAU,QAMVpD,EAAAgD,IAAAvD,MAAAwD,EAAAxD,KAAA4D,GAAAJ,EAAAxD,KAAA6D,GAAW,KAMXpD,EAAA8C,IAAAvD,MAAAwD,EAAAxD,KAAA8D,GAAAN,EAAAxD,KAAA+D,GAAS,KAMTpD,EAAA4C,IAAAvD,MAAAwD,EAAAxD,KAAAgE,GAAAR,EAAAxD,KAAAiE,GAAe,KAQfpD,EAAA0C,IAAAvD,MAAAwD,EAAAxD,KAAAkE,GAAAV,EAAAxD,KAAAmE,GAAY,KAMZpD,EAAAwC,IAAAvD,MAAAwD,EAAAxD,KAAAoE,GAAAZ,EAAAxD,KAAAqE,EACP,aAMOpD,EAAAsC,IAAAvD,MAAAwD,EAAAxD,KAAAsE,GAAAd,EAAAxD,KAAAuE,EAAe,4RA9CvBC,EAAA,CAAAC,EAAS,CAAEC,KAAMC,UAMjBC,EAAA,CAAAH,EAAS,CAAEC,KAAMC,UAMjBE,EAAA,CAAAJ,EAAS,CAAEC,KAAMI,WAMjBC,EAAA,CAAAN,EAAS,CAAEC,KAAMI,WAMjBE,EAAA,CAAAP,EAAS,CAAEC,KAAMI,WAQjBG,EAAA,CAAAR,EAAS,CAAEC,KAAMI,WAMjBI,EAAA,CAAAT,EAAS,CAAEC,KAAMC,UAOjBQ,EAAA,CAAAV,EAAS,CAAEC,KAAMC,UA5ClBS,EAAAxF,EAAA,KAAA4E,EAAA,CAAAa,KAAA,WAAAC,KAAA,QAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAC,IAAAC,GAAA,UAAAA,EAAAC,IAAAD,GAAAA,EAAS7F,MAAKyD,IAAA,CAAAoC,EAAAzF,KAAAyF,EAAL7F,MAAKI,CAAA,GAAA2F,SAAAC,GAAArC,EAAAC,GAMd0B,EAAAxF,EAAA,KAAAgF,EAAA,CAAAS,KAAA,WAAAC,KAAA,UAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAC,IAAAC,GAAA,YAAAA,EAAAC,IAAAD,GAAAA,EAASvF,QAAOmD,IAAA,CAAAoC,EAAAzF,KAAAyF,EAAPvF,QAAOF,CAAA,GAAA2F,SAAAC,GAAAnC,EAAAC,GAMhBwB,EAAAxF,EAAA,KAAAiF,EAAA,CAAAQ,KAAA,WAAAC,KAAA,WAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAC,IAAAC,GAAA,aAAAA,EAAAC,IAAAD,GAAAA,EAASrF,SAAQiD,IAAA,CAAAoC,EAAAzF,KAAAyF,EAARrF,SAAQJ,CAAA,GAAA2F,SAAAC,GAAAjC,EAAAC,GAMjBsB,EAAAxF,EAAA,KAAAmF,EAAA,CAAAM,KAAA,WAAAC,KAAA,SAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAC,IAAAC,GAAA,WAAAA,EAAAC,IAAAD,GAAAA,EAASnF,OAAM+C,IAAA,CAAAoC,EAAAzF,KAAAyF,EAANnF,OAAMN,CAAA,GAAA2F,SAAAC,GAAA/B,EAAAC,GAMfoB,EAAAxF,EAAA,KAAAoF,EAAA,CAAAK,KAAA,WAAAC,KAAA,eAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAC,IAAAC,GAAA,iBAAAA,EAAAC,IAAAD,GAAAA,EAASjF,aAAY6C,IAAA,CAAAoC,EAAAzF,KAAAyF,EAAZjF,aAAYR,CAAA,GAAA2F,SAAAC,GAAA7B,EAAAC,GAQrBkB,EAAAxF,EAAA,KAAAqF,EAAA,CAAAI,KAAA,WAAAC,KAAA,YAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAC,IAAAC,GAAA,cAAAA,EAAAC,IAAAD,GAAAA,EAAS/E,UAAS2C,IAAA,CAAAoC,EAAAzF,KAAAyF,EAAT/E,UAASV,CAAA,GAAA2F,SAAAC,GAAA3B,EAAAC,GAMlBgB,EAAAxF,EAAA,KAAAsF,EAAA,CAAAG,KAAA,WAAAC,KAAA,WAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAC,IAAAC,GAAA,aAAAA,EAAAC,IAAAD,GAAAA,EAAS7E,SAAQyC,IAAA,CAAAoC,EAAAzF,KAAAyF,EAAR7E,SAAQZ,CAAA,GAAA2F,SAAAC,GAAAzB,EAAAC,GAOjBc,EAAAxF,EAAA,KAAAuF,EAAA,CAAAE,KAAA,WAAAC,KAAA,eAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAC,IAAAC,GAAA,iBAAAA,EAAAC,IAAAD,GAAAA,EAAS3E,aAAYuC,IAAA,CAAAoC,EAAAzF,KAAAyF,EAAZ3E,aAAYd,CAAA,GAAA2F,SAAAC,GAAAvB,EAAAwB,GApDvBX,EAAA,KAAAY,EAAA,CAAA9F,MAAAN,GAAAqG,EAAA,CAAAZ,KAAA,QAAAC,KAAA1F,EAAA0F,KAAAO,SAAAC,GAAA,KAAAI,iHACkBtG,EAAAuG,OAASC,EAAUC,GADxB7C,EAAA5D,EAAAsG,MAAG"}
|
|
1
|
+
{"version":3,"file":"tag.js","sources":["../../../../src/components/reusable/tag/tag.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport clearIcon16 from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\nimport TagScss from './tag.scss?inline';\n\n/**\n * Tag.\n * @fires on-close - Captures the close event and emits the Tag value. Works with filterable tags. `detail:{ origEvent: PointerEvent,value: string }`\n * @fires on-click - Captures the click event and emits the Tag value. Works with clickable tags. `detail:{ origEvent: PointerEvent,value: string }`\n * @slot unnamed - Slot for icon.\n */\n\n@customElement('kyn-tag')\nexport class Tag extends LitElement {\n static override styles = unsafeCSS(TagScss);\n\n /**\n * Tag name (Required).\n */\n @property({ type: String })\n accessor label = '';\n\n /**\n * Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.\n */\n @property({ type: String })\n accessor tagSize = 'md';\n\n /**\n * Specify if the Tag is disabled.\n */\n @property({ type: Boolean })\n accessor disabled = false;\n\n /**\n * Determine if Tag state is filter.\n */\n @property({ type: Boolean })\n accessor filter = false;\n\n /**\n * When true, tag-group visibility limiting will never hide this tag.\n * Note: this should primarily for the `Clear All` tag.\n */\n @property({ type: Boolean })\n accessor persistentTag = false;\n\n /**\n * Removes label text truncation.\n */\n @property({ type: Boolean })\n accessor noTruncation = false;\n\n /**\n * Determine if Tag is clickable(applicable for old tags only).\n * <br>\n * **NOTE**: New tags are **clickable** by **default**.\n */\n @property({ type: Boolean })\n accessor clickable = false;\n\n /**\n * Color variants.\n */\n @property({ type: String })\n accessor tagColor: 'default' | 'spruce' | 'sea' | 'lilac' | 'ai' | 'red' =\n 'default';\n\n /**\n * Clear Tag Text to improve accessibility\n */\n @property({ type: String })\n accessor clearTagText = 'Clear Tag';\n\n override updated() {\n this.label = this.label.trim();\n }\n\n override render() {\n /* --------------------- DEPRECATED --------------------- */\n const baseColorClass = `tag-${this.tagColor}`;\n const sizeClass = this.tagSize === 'md' ? 'tag-medium' : 'tag-small';\n\n const tagClasses = {\n tags: true,\n 'tag-disable': this.disabled,\n 'tag-clickable': this.clickable,\n [`tag-clickable-${this.tagColor}`]: this.clickable,\n [`${baseColorClass}`]: true,\n [`${sizeClass}`]: true,\n [`${sizeClass}-filter`]: this.filter,\n };\n\n const iconOutlineClasses = `${baseColorClass}-close-btn`;\n const iconOutlineOffsetClass = `tag-close-btn-${this.tagSize}`;\n const iconClasses = {\n 'tag-close-btn': true,\n [`${iconOutlineClasses}`]: true,\n [`${iconOutlineOffsetClass}`]: true,\n };\n\n const labelClasses = {\n 'tag-label': true,\n 'no-truncation': this.noTruncation,\n [`${sizeClass}-label`]: true,\n [`${sizeClass}-label-filter`]: this.filter,\n };\n /* --------------------- DEPRECATED --------------------- */\n\n const newBaseColorClass = `tag--new-${this.tagColor}`;\n const newSizeClass =\n this.tagSize === 'md' ? 'tag--new-medium' : 'tag--new-small';\n\n const newTagClasses = {\n 'tags--new': true,\n 'no-truncation': this.noTruncation,\n 'tag--new-disable': this.disabled,\n 'tag--new-clickable': this._isTagClickable(),\n [`tag--new-clickable-${this.tagColor}`]: this._isTagClickable(),\n [`${newBaseColorClass}`]: true,\n [`${newSizeClass}`]: true,\n };\n\n const newIconOutlineClasses = `${newBaseColorClass}-close-btn`;\n const newIconOutlineOffsetClass = `tag-close-btn--new-${this.tagSize}`;\n const newIconClasses = {\n 'tag-close-btn--new': true,\n [`${newIconOutlineClasses}`]: true,\n [`${newIconOutlineOffsetClass}`]: true,\n };\n\n const newLabelClasses = {\n 'tag-label--new': true,\n };\n\n return html`\n <div\n class=\"${classMap(this._chechForNewTag() ? newTagClasses : tagClasses)}\"\n tagSize=\"${this.tagSize}\"\n ?disabled=\"${this.disabled}\"\n ?filter=${this.filter}\n tagColor=${this.tagColor}\n title=\"${this.label}\"\n tabindex=\"${this._isTagClickable() ? '0' : '-1'}\"\n @click=${(e: any) => this.handleTagClick(e, this.label)}\n @keydown=${(e: any) => this.handleTagPress(e, this.label)}\n >\n ${this._chechForNewTag() ? html`<slot></slot>` : ''}\n <span\n class=\"${classMap(\n this._chechForNewTag() ? newLabelClasses : labelClasses\n )}\"\n aria-disabled=${this.disabled}\n >${this.label}</span\n >\n ${this.filter\n ? html`\n <button\n class=\"${classMap(\n this._chechForNewTag() ? newIconClasses : iconClasses\n )}\"\n ?disabled=\"${this.disabled}\"\n title=\"${this.clearTagText} ${this.label}\"\n aria-label=\"${this.clearTagText} ${this.label}\"\n @click=${(e: any) => this.handleTagClear(e, this.label)}\n @keydown=${(e: any) => this.handleTagClearPress(e, this.label)}\n >\n <span>${unsafeSVG(clearIcon16)}</span>\n </button>\n `\n : ''}\n </div>\n `;\n }\n\n private _chechForNewTag() {\n const newTags = ['default', 'spruce', 'sea', 'lilac', 'ai', 'red'];\n if (newTags.includes(this.tagColor)) {\n return true;\n } else {\n return false;\n }\n }\n\n private _isTagClickable() {\n if (this._chechForNewTag()) {\n return !this.filter;\n } else {\n return this.clickable;\n }\n }\n\n private handleTagClear(e: any, value: string) {\n e.stopPropagation();\n if (e.pointerType && !this.disabled) {\n const event = new CustomEvent('on-close', {\n detail: {\n value,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n }\n\n private handleTagClearPress(e: any, value: string) {\n e.stopPropagation();\n // Keyboard key codes: 32 = SPACE | 13 = ENTER\n if ((e.keyCode === 32 || e.keyCode === 13) && !this.disabled) {\n const event = new CustomEvent('on-close', {\n detail: {\n value,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n }\n\n private handleTagClick(e: any, value: string) {\n if (!this.disabled && this._isTagClickable()) {\n const event = new CustomEvent('on-click', {\n detail: {\n value,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n }\n\n private handleTagPress(e: any, value: string) {\n // Keyboard key codes: 32 = SPACE | 13 = ENTER\n if (\n (e.keyCode === 32 || e.keyCode === 13) &&\n !this.disabled &&\n this._isTagClickable()\n ) {\n const event = new CustomEvent('on-click', {\n detail: {\n value,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-tag': Tag;\n }\n}\n"],"names":["Tag","customElement","LitElement","_classThis","_classSuper","label","__classPrivateFieldGet","this","_Tag_label_accessor_storage","value","__classPrivateFieldSet","tagSize","_Tag_tagSize_accessor_storage","disabled","_Tag_disabled_accessor_storage","filter","_Tag_filter_accessor_storage","persistentTag","_Tag_persistentTag_accessor_storage","noTruncation","_Tag_noTruncation_accessor_storage","clickable","_Tag_clickable_accessor_storage","tagColor","_Tag_tagColor_accessor_storage","clearTagText","_Tag_clearTagText_accessor_storage","updated","trim","render","baseColorClass","sizeClass","tagClasses","tags","iconOutlineClasses","iconOutlineOffsetClass","iconClasses","labelClasses","newBaseColorClass","newSizeClass","newTagClasses","_isTagClickable","newIconOutlineClasses","newIconOutlineOffsetClass","newIconClasses","html","classMap","_chechForNewTag","e","handleTagClick","handleTagPress","handleTagClear","handleTagClearPress","unsafeSVG","clearIcon16","includes","stopPropagation","pointerType","event","CustomEvent","detail","origEvent","dispatchEvent","keyCode","set","__runInitializers","_label_initializers","_label_extraInitializers","_tagSize_initializers","_tagSize_extraInitializers","_disabled_initializers","_disabled_extraInitializers","_filter_initializers","_filter_extraInitializers","_persistentTag_initializers","_persistentTag_extraInitializers","_noTruncation_initializers","_noTruncation_extraInitializers","_clickable_initializers","_clickable_extraInitializers","_tagColor_initializers","_tagColor_extraInitializers","_clearTagText_initializers","_label_decorators","property","type","String","_tagSize_decorators","_disabled_decorators","Boolean","_filter_decorators","_persistentTag_decorators","_noTruncation_decorators","_clickable_decorators","_tagColor_decorators","_clearTagText_decorators","__esDecorate","kind","name","static","private","access","has","obj","get","metadata","_metadata","_clearTagText_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","TagScss"],"mappings":"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"}
|
|
@@ -29,8 +29,9 @@ export declare class TagGroup extends LitElement {
|
|
|
29
29
|
* @ignore
|
|
30
30
|
*/
|
|
31
31
|
accessor tags: Array<any>;
|
|
32
|
+
private readonly limitCount;
|
|
32
33
|
render(): import("lit-html").TemplateResult<1>;
|
|
33
|
-
updated(changedProps:
|
|
34
|
+
updated(changedProps: Map<string, unknown>): void;
|
|
34
35
|
private _handleSlotChange;
|
|
35
36
|
private _updateChildren;
|
|
36
37
|
private _toggleRevealed;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tagGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tag/tagGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAQlD,OAAO,OAAO,CAAC;AAEf,OAAO,SAAS,CAAC;AAEjB;;;GAGG;AAEH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAA2B;IAEjD,iCAAiC;IAEjC,QAAQ,CAAC,WAAW;;;MAGlB;IAEF,8FAA8F;IAE9F,QAAQ,CAAC,SAAS,UAAS;IAE3B;;OAEG;IAEH,QAAQ,CAAC,aAAa,UAAS;IAE/B,uBAAuB;IAEvB,QAAQ,CAAC,MAAM,UAAS;IAExB;;OAEG;IAEH,QAAQ,CAAC,OAAO,SAAQ;IAExB;;;OAGG;IAEH,QAAQ,CAAC,IAAI,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"tagGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tag/tagGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAQlD,OAAO,OAAO,CAAC;AAEf,OAAO,SAAS,CAAC;AAEjB;;;GAGG;AAEH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAA2B;IAEjD,iCAAiC;IAEjC,QAAQ,CAAC,WAAW;;;MAGlB;IAEF,8FAA8F;IAE9F,QAAQ,CAAC,SAAS,UAAS;IAE3B;;OAEG;IAEH,QAAQ,CAAC,aAAa,UAAS;IAE/B,uBAAuB;IAEvB,QAAQ,CAAC,MAAM,UAAS;IAExB;;OAEG;IAEH,QAAQ,CAAC,OAAO,SAAQ;IAExB;;;OAGG;IAEH,QAAQ,CAAC,IAAI,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAE3B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAK;IAEvB,MAAM;IAgCN,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAUnD,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,eAAe;CAoCxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,QAAQ,CAAC;KAC3B;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__setFunctionName as t,__esDecorate as e,__runInitializers as i,__classPrivateFieldGet as
|
|
1
|
+
import{__setFunctionName as t,__esDecorate as e,__runInitializers as i,__classPrivateFieldGet as s,__classPrivateFieldSet as a}from"tslib";import{css as l,LitElement as r,unsafeCSS as n,html as h}from"lit";import{customElement as o,property as g,state as m,queryAssignedElements as d}from"lit/decorators.js";import{classMap as c}from"lit-html/directives/class-map.js";import"./tag.js";import"../link/link.js";import"lit-html/directives/unsafe-svg.js";import"../../../vendor/@kyndryl-design-system/shidoka-icons-oqOblwTK.js";import"../../../tag-ehM901IX.js";import"../link/defs.js";var p=l`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -50,19 +50,19 @@ import{__setFunctionName as t,__esDecorate as e,__runInitializers as i,__classPr
|
|
|
50
50
|
}
|
|
51
51
|
.tag-reveal-toggle-sm {
|
|
52
52
|
height: 20px;
|
|
53
|
-
}`;let
|
|
53
|
+
}`;let f=(()=>{var l,f,u,v,k,y;let S,b,w,x,R,T,j,z,C=[o("kyn-tag-group")],A=[],_=r,$=[],E=[],M=[],W=[],O=[],B=[],L=[],q=[],G=[],P=[],U=[],D=[];return b=class extends _{constructor(){super(...arguments),l.set(this,i(this,$,{showAll:"Show all",showLess:"Show less"})),f.set(this,(i(this,E),i(this,M,!1))),u.set(this,(i(this,W),i(this,O,!1))),v.set(this,(i(this,B),i(this,L,!1))),k.set(this,(i(this,q),i(this,G,"md"))),y.set(this,(i(this,P),i(this,U,void 0))),this.limitCount=(i(this,D),5)}get textStrings(){return s(this,l,"f")}set textStrings(t){a(this,l,t,"f")}get limitTags(){return s(this,f,"f")}set limitTags(t){a(this,f,t,"f")}get limitRevealed(){return s(this,u,"f")}set limitRevealed(t){a(this,u,t,"f")}get filter(){return s(this,v,"f")}set filter(t){a(this,v,t,"f")}get tagSize(){return s(this,k,"f")}set tagSize(t){a(this,k,t,"f")}get tags(){return s(this,y,"f")}set tags(t){a(this,y,t,"f")}render(){const t={"tag-reveal-toggle":!0,[`tag-reveal-toggle-${this.tagSize}`]:!0},e=this.limitTags&&Array.isArray(this.tags)&&this.tags.length>this.limitCount;return h`
|
|
54
54
|
<div class="tags-container">
|
|
55
55
|
<slot @slotchange=${this._handleSlotChange}></slot>
|
|
56
56
|
|
|
57
|
-
${
|
|
57
|
+
${e?h`
|
|
58
58
|
<kyn-link
|
|
59
59
|
class="${c(t)}"
|
|
60
60
|
standalone
|
|
61
61
|
@on-click=${()=>this._toggleRevealed(!this.limitRevealed)}
|
|
62
62
|
>
|
|
63
|
-
${this.limitRevealed?this.textStrings.showLess:
|
|
63
|
+
${this.limitRevealed?this.textStrings.showLess:h` ${this.textStrings.showAll}`}
|
|
64
64
|
</kyn-link>
|
|
65
65
|
`:null}
|
|
66
66
|
</div>
|
|
67
|
-
`}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
|
|
67
|
+
`}updated(t){(t.has("filter")||t.has("tagSize")||t.has("limitTags"))&&this._updateChildren()}_handleSlotChange(){this._updateChildren(),this.requestUpdate()}_updateChildren(){Array.isArray(this.tags)&&(this.tags.forEach((t=>{t.filter=this.filter})),this.tags.forEach((t=>{t.tagSize=this.tagSize})),this._toggleRevealed(this.limitRevealed))}_toggleRevealed(t){if(this.limitRevealed=t,!Array.isArray(this.tags)||0===this.tags.length)return;if(!this.limitTags||this.limitRevealed)return void this.tags.forEach((t=>{t.style.display="inline-block"}));const e=this.tags.filter((t=>t.persistentTag)),i=this.tags.filter((t=>!t.persistentTag));i.length<=this.limitCount?this.tags.forEach((t=>{t.style.display="inline-block"})):(i.forEach(((t,e)=>{t.style.display=e<this.limitCount?"inline-block":"none"})),e.forEach((t=>{t.style.display="inline-block"})))}},l=new WeakMap,f=new WeakMap,u=new WeakMap,v=new WeakMap,k=new WeakMap,y=new WeakMap,t(b,"TagGroup"),(()=>{var t;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(t=_[Symbol.metadata])&&void 0!==t?t:null):void 0;w=[g({type:Object})],x=[g({type:Boolean})],R=[m()],T=[g({type:Boolean})],j=[g({type:String})],z=[d()],e(b,null,w,{kind:"accessor",name:"textStrings",static:!1,private:!1,access:{has:t=>"textStrings"in t,get:t=>t.textStrings,set:(t,e)=>{t.textStrings=e}},metadata:i},$,E),e(b,null,x,{kind:"accessor",name:"limitTags",static:!1,private:!1,access:{has:t=>"limitTags"in t,get:t=>t.limitTags,set:(t,e)=>{t.limitTags=e}},metadata:i},M,W),e(b,null,R,{kind:"accessor",name:"limitRevealed",static:!1,private:!1,access:{has:t=>"limitRevealed"in t,get:t=>t.limitRevealed,set:(t,e)=>{t.limitRevealed=e}},metadata:i},O,B),e(b,null,T,{kind:"accessor",name:"filter",static:!1,private:!1,access:{has:t=>"filter"in t,get:t=>t.filter,set:(t,e)=>{t.filter=e}},metadata:i},L,q),e(b,null,j,{kind:"accessor",name:"tagSize",static:!1,private:!1,access:{has:t=>"tagSize"in t,get:t=>t.tagSize,set:(t,e)=>{t.tagSize=e}},metadata:i},G,P),e(b,null,z,{kind:"accessor",name:"tags",static:!1,private:!1,access:{has:t=>"tags"in t,get:t=>t.tags,set:(t,e)=>{t.tags=e}},metadata:i},U,D),e(null,S={value:b},C,{kind:"class",name:b.name,metadata:i},null,A),b=S.value,i&&Object.defineProperty(b,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),b.styles=n(p),i(b,A),b})();export{f as TagGroup};
|
|
68
68
|
//# sourceMappingURL=tagGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tagGroup.js","sources":["../../../../src/components/reusable/tag/tagGroup.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } 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?inline';\nimport '../link';\n\n/**\n * Tag & Tag Group\n * @slot unnamed - Slot for individual tags and tagsskeleton.\n */\n\n@customElement('kyn-tag-group')\nexport class TagGroup extends LitElement {\n static override styles = unsafeCSS(TagGroupScss);\n\n /** Text string customization. */\n @property({ type: Object })\n accessor 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 accessor limitTags = false;\n\n /** Tag limit visibility.\n * @internal\n */\n @state()\n accessor limitRevealed = false;\n\n /** Tag group filter */\n @property({ type: Boolean })\n accessor filter = false;\n\n /**\n * Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.\n */\n @property({ type: String })\n accessor tagSize = 'md';\n\n /**\n * Queries for slotted tags.\n * @ignore\n */\n @queryAssignedElements()\n accessor 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 ${
|
|
1
|
+
{"version":3,"file":"tagGroup.js","sources":["../../../../src/components/reusable/tag/tagGroup.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } 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?inline';\nimport '../link';\n\n/**\n * Tag & Tag Group\n * @slot unnamed - Slot for individual tags and tagsskeleton.\n */\n\n@customElement('kyn-tag-group')\nexport class TagGroup extends LitElement {\n static override styles = unsafeCSS(TagGroupScss);\n\n /** Text string customization. */\n @property({ type: Object })\n accessor 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 accessor limitTags = false;\n\n /** Tag limit visibility.\n * @internal\n */\n @state()\n accessor limitRevealed = false;\n\n /** Tag group filter */\n @property({ type: Boolean })\n accessor filter = false;\n\n /**\n * Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.\n */\n @property({ type: String })\n accessor tagSize = 'md';\n\n /**\n * Queries for slotted tags.\n * @ignore\n */\n @queryAssignedElements()\n accessor tags!: Array<any>;\n\n private readonly limitCount = 5;\n\n override render() {\n const toggleBtnClasses = {\n 'tag-reveal-toggle': true,\n [`tag-reveal-toggle-${this.tagSize}`]: true,\n };\n\n const hasOverflow =\n this.limitTags &&\n Array.isArray(this.tags) &&\n this.tags.length > this.limitCount;\n\n return html`\n <div class=\"tags-container\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n\n ${hasOverflow\n ? html`\n <kyn-link\n class=\"${classMap(toggleBtnClasses)}\"\n standalone\n @on-click=${() => this._toggleRevealed(!this.limitRevealed)}\n >\n ${this.limitRevealed\n ? this.textStrings.showLess\n : html` ${this.textStrings.showAll}`}\n </kyn-link>\n `\n : null}\n </div>\n `;\n }\n\n override updated(changedProps: Map<string, unknown>) {\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 if (!Array.isArray(this.tags)) {\n return;\n }\n\n // set filter for each tag\n this.tags.forEach((tag) => {\n tag.filter = this.filter;\n });\n\n // set tag size for each tag\n this.tags.forEach((tag) => {\n tag.tagSize = this.tagSize;\n });\n\n this._toggleRevealed(this.limitRevealed);\n }\n\n private _toggleRevealed(revealed: boolean) {\n this.limitRevealed = revealed;\n\n if (!Array.isArray(this.tags) || this.tags.length === 0) {\n return;\n }\n\n // default behavior when not limiting or fully revealed: show everything.\n if (!this.limitTags || this.limitRevealed) {\n this.tags.forEach((t) => {\n t.style.display = 'inline-block';\n });\n return;\n }\n\n // split tags into persistent vs non-persistent.\n const persistentTags = this.tags.filter((t) => t.persistentTag);\n const nonPersistentTags = this.tags.filter((t) => !t.persistentTag);\n\n if (nonPersistentTags.length <= this.limitCount) {\n this.tags.forEach((t) => {\n t.style.display = 'inline-block';\n });\n return;\n }\n\n // legacy limiting logic\n nonPersistentTags.forEach((t, index) => {\n t.style.display = index < this.limitCount ? 'inline-block' : 'none';\n });\n\n // persistent tags are always visible\n persistentTags.forEach((t) => {\n t.style.display = 'inline-block';\n });\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-tag-group': TagGroup;\n }\n}\n"],"names":["TagGroup","customElement","LitElement","_classThis","_classSuper","_TagGroup_textStrings_accessor_storage","set","this","__runInitializers","_textStrings_initializers","showAll","showLess","_TagGroup_limitTags_accessor_storage","_textStrings_extraInitializers","_limitTags_initializers","_TagGroup_limitRevealed_accessor_storage","_limitTags_extraInitializers","_limitRevealed_initializers","_TagGroup_filter_accessor_storage","_limitRevealed_extraInitializers","_filter_initializers","_TagGroup_tagSize_accessor_storage","_filter_extraInitializers","_tagSize_initializers","_TagGroup_tags_accessor_storage","_tagSize_extraInitializers","_tags_initializers","limitCount","_tags_extraInitializers","textStrings","__classPrivateFieldGet","value","__classPrivateFieldSet","limitTags","limitRevealed","filter","tagSize","tags","render","toggleBtnClasses","hasOverflow","Array","isArray","length","html","_handleSlotChange","classMap","_toggleRevealed","updated","changedProps","has","_updateChildren","requestUpdate","forEach","tag","revealed","t","style","display","persistentTags","persistentTag","nonPersistentTags","index","_textStrings_decorators","property","type","Object","_limitTags_decorators","Boolean","_limitRevealed_decorators","state","_filter_decorators","_tagSize_decorators","String","_tags_decorators","queryAssignedElements","__esDecorate","kind","name","static","private","access","obj","get","metadata","_metadata","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","TagGroupScss"],"mappings":"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"}
|