@fluid-topics/ft-chip 1.1.53 → 1.1.54
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/build/ft-chip.js
CHANGED
|
@@ -49,9 +49,10 @@ class FtChip extends FtLitElement {
|
|
|
49
49
|
<div class="${classMap(classes)}"
|
|
50
50
|
aria-label="${this.getLabel()}"
|
|
51
51
|
tabindex="${this.interactionsOnChip ? 0 : -1}"
|
|
52
|
-
@keyup=${this.onKeyUp}
|
|
52
|
+
@keyup=${this.onKeyUp}
|
|
53
|
+
part="chip">
|
|
53
54
|
<ft-ripple ?disabled=${!this.interactionsOnChip}></ft-ripple>
|
|
54
|
-
<ft-typography variant="body2" element="span" class="ft-chip--label">
|
|
55
|
+
<ft-typography variant="body2" element="span" class="ft-chip--label" part="label">
|
|
55
56
|
<slot @slotchange=${this.onSlotchange}></slot>
|
|
56
57
|
</ft-typography>
|
|
57
58
|
${this.internalIcon ? this.renderIcon() : null}
|
|
@@ -73,11 +74,12 @@ class FtChip extends FtLitElement {
|
|
|
73
74
|
.iconVariant=${this.iconVariant}
|
|
74
75
|
icon="${this.internalIcon}"
|
|
75
76
|
label="${this.iconLabel}"
|
|
77
|
+
part="icon-button"
|
|
76
78
|
></ft-button>
|
|
77
79
|
`
|
|
78
80
|
: html `
|
|
79
|
-
<div class="ft-chip--icon-container ft-no-text-select">
|
|
80
|
-
<ft-icon .variant=${this.iconVariant} .value="${this.internalIcon}"></ft-icon>
|
|
81
|
+
<div class="ft-chip--icon-container ft-no-text-select" part="icon-container">
|
|
82
|
+
<ft-icon .variant=${this.iconVariant} .value="${this.internalIcon}" part="icon"></ft-icon>
|
|
81
83
|
</div>
|
|
82
84
|
`;
|
|
83
85
|
}
|
package/build/ft-chip.light.js
CHANGED
|
@@ -798,7 +798,7 @@ const Q=Symbol.for(""),tt=t=>{if(t?.r===Q)return t?._$litStatic$},ot=t=>({_$litS
|
|
|
798
798
|
width: ${ft.smallIconOnlyWidth};
|
|
799
799
|
padding: unset;
|
|
800
800
|
}
|
|
801
|
-
`,o.noTextSelect];var ar=function(t,o,e,r){for(var i,a=arguments.length,n=a<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(a<3?i(n):a>3?i(o,e,n):i(o,e))||n);return a>3&&n&&Object.defineProperty(o,e,n),n};class nr extends or{constructor(){super(...arguments),this.primary=!1,this.secondary=!1,this.tertiary=!1,this.neutral=!1,this.small=!1}get buttonClasses(){return{"ft-button":!0,"ft-button--primary":this.primary,"ft-button--secondary":this.secondary,"ft-button--tertiary":this.tertiary||!this.primary&&!this.secondary&&!this.neutral,"ft-button--neutral":this.neutral,"ft-button--large":!this.small,"ft-button--small":this.small,"ft-button--icon-only":!this.hasTextContent(),"ft-button--trailing-icon":this.trailingIcon,"ft-button--loading":this.trailingIcon,"ft-no-text-select":!0,"ft-button--no-icon":!this.icon}}get typographyVariant(){return this.small?it.caption1medium:it.body2medium}}nr.styles=[o.safariEllipsisFix,ir],ar([r.property({type:Boolean})],nr.prototype,"primary",void 0),ar([r.property({type:Boolean})],nr.prototype,"secondary",void 0),ar([r.property({type:Boolean})],nr.prototype,"tertiary",void 0),ar([r.property({type:Boolean})],nr.prototype,"neutral",void 0),ar([r.property({type:Boolean})],nr.prototype,"small",void 0),o.customElement("ft-button")(rr),o.customElement("ftds-button")(nr);const lr=o.FtCssVariableFactory.extend("--ft-chip-color","",o.designSystemVariables.colorOnSurface),cr={backgroundColor:o.FtCssVariableFactory.extend("--ft-chip-background-color","",o.designSystemVariables.colorSurface),color:lr,fontSize:o.FtCssVariableFactory.extend("--ft-chip-font-size","",jt.fontSize),iconSize:o.FtCssVariableFactory.create("--ft-chip-icon-size","","SIZE","18px"),rippleColor:o.FtCssVariableFactory.extend("--ft-chip-ripple-color","",lr),horizontalPadding:o.FtCssVariableFactory.create("--ft-chip-horizontal-padding","","SIZE","6px"),verticalPadding:o.FtCssVariableFactory.create("--ft-chip-vertical-padding","","SIZE","6px"),colorOutline:o.FtCssVariableFactory.external(o.designSystemVariables.colorOutline,"Design system"),opacityDisabled:o.FtCssVariableFactory.external(o.designSystemVariables.colorOpacityDisabled,"Design system")},pr=o.FtCssVariableFactory.extend("--ft-chip-highlighted-color","",o.FtCssVariableFactory.extend("--ft-chip-color","",o.designSystemVariables.colorOnPrimary)),fr={backgroundColor:o.FtCssVariableFactory.extend("--ft-chip-highlighted-background-color","",o.FtCssVariableFactory.extend("--ft-chip-background-color","",o.designSystemVariables.colorPrimary)),color:pr,rippleColor:o.FtCssVariableFactory.extend("--ft-chip-highlighted-ripple-color","",pr)},sr={horizontalPadding:o.FtCssVariableFactory.create("--ft-chip-dense-horizontal-padding","","SIZE","4px"),verticalPadding:o.FtCssVariableFactory.create("--ft-chip-dense-vertical-padding","","SIZE","4px")},dr=[o.noTextSelect,e.css`
|
|
801
|
+
`,o.noTextSelect];var ar=function(t,o,e,r){for(var i,a=arguments.length,n=a<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(a<3?i(n):a>3?i(o,e,n):i(o,e))||n);return a>3&&n&&Object.defineProperty(o,e,n),n};class nr extends or{constructor(){super(...arguments),this.primary=!1,this.secondary=!1,this.tertiary=!1,this.neutral=!1,this.small=!1}get buttonClasses(){return{"ft-button":!0,"ft-button--primary":this.primary,"ft-button--secondary":this.secondary,"ft-button--tertiary":this.tertiary||!this.primary&&!this.secondary&&!this.neutral,"ft-button--neutral":this.neutral,"ft-button--large":!this.small,"ft-button--small":this.small,"ft-button--icon-only":!this.hasTextContent(),"ft-button--trailing-icon":this.trailingIcon,"ft-button--loading":this.trailingIcon,"ft-no-text-select":!0,"ft-button--no-icon":!this.icon}}get typographyVariant(){return this.small?it.caption1medium:it.body2medium}}nr.styles=[o.safariEllipsisFix,ir],ar([r.property({type:Boolean})],nr.prototype,"primary",void 0),ar([r.property({type:Boolean})],nr.prototype,"secondary",void 0),ar([r.property({type:Boolean})],nr.prototype,"tertiary",void 0),ar([r.property({type:Boolean})],nr.prototype,"neutral",void 0),ar([r.property({type:Boolean})],nr.prototype,"small",void 0),o.customElement("ft-button")(rr),o.customElement("ftds-button")(nr);const lr=o.FtCssVariableFactory.extend("--ft-chip-color","",o.designSystemVariables.colorOnSurface),cr={backgroundColor:o.FtCssVariableFactory.extend("--ft-chip-background-color","",o.designSystemVariables.colorSurface),color:lr,fontSize:o.FtCssVariableFactory.extend("--ft-chip-font-size","",jt.fontSize),iconSize:o.FtCssVariableFactory.create("--ft-chip-icon-size","","SIZE","18px"),borderRadius:o.FtCssVariableFactory.create("--ft-chip-border-radius","","SIZE",""),rippleColor:o.FtCssVariableFactory.extend("--ft-chip-ripple-color","",lr),horizontalPadding:o.FtCssVariableFactory.create("--ft-chip-horizontal-padding","","SIZE","6px"),verticalPadding:o.FtCssVariableFactory.create("--ft-chip-vertical-padding","","SIZE","6px"),colorOutline:o.FtCssVariableFactory.external(o.designSystemVariables.colorOutline,"Design system"),opacityDisabled:o.FtCssVariableFactory.external(o.designSystemVariables.colorOpacityDisabled,"Design system")},pr=o.FtCssVariableFactory.extend("--ft-chip-highlighted-color","",o.FtCssVariableFactory.extend("--ft-chip-color","",o.designSystemVariables.colorOnPrimary)),fr={backgroundColor:o.FtCssVariableFactory.extend("--ft-chip-highlighted-background-color","",o.FtCssVariableFactory.extend("--ft-chip-background-color","",o.designSystemVariables.colorPrimary)),color:pr,rippleColor:o.FtCssVariableFactory.extend("--ft-chip-highlighted-ripple-color","",pr)},sr={horizontalPadding:o.FtCssVariableFactory.create("--ft-chip-dense-horizontal-padding","","SIZE","4px"),verticalPadding:o.FtCssVariableFactory.create("--ft-chip-dense-vertical-padding","","SIZE","4px")},dr=[o.noTextSelect,e.css`
|
|
802
802
|
:host {
|
|
803
803
|
display: inline-block;
|
|
804
804
|
max-width: 100%;
|
|
@@ -825,7 +825,7 @@ const Q=Symbol.for(""),tt=t=>{if(t?.r===Q)return t?._$litStatic$},ot=t=>({_$litS
|
|
|
825
825
|
border: 1px solid ${cr.colorOutline};
|
|
826
826
|
color: ${cr.color};
|
|
827
827
|
${o.setVariable(l.color,cr.rippleColor)};
|
|
828
|
-
border-radius: calc(var(--ft-chip-internal-content-height) / 2 + var(--ft-chip-internal-vertical-padding));
|
|
828
|
+
border-radius: var(${e.unsafeCSS(cr.borderRadius.name)}, calc(var(--ft-chip-internal-content-height) / 2 + var(--ft-chip-internal-vertical-padding)));
|
|
829
829
|
padding: calc(var(--ft-chip-internal-vertical-padding) - 1px) calc(var(--ft-chip-internal-horizontal-padding) - 1px);
|
|
830
830
|
background-color: ${cr.backgroundColor};
|
|
831
831
|
line-height: var(--ft-chip-internal-content-height);
|
|
@@ -939,9 +939,10 @@ const Q=Symbol.for(""),tt=t=>{if(t?.r===Q)return t?._$litStatic$},ot=t=>({_$litS
|
|
|
939
939
|
<div class="${i.classMap(t)}"
|
|
940
940
|
aria-label="${this.getLabel()}"
|
|
941
941
|
tabindex="${this.interactionsOnChip?0:-1}"
|
|
942
|
-
@keyup=${this.onKeyUp}
|
|
942
|
+
@keyup=${this.onKeyUp}
|
|
943
|
+
part="chip">
|
|
943
944
|
<ft-ripple ?disabled=${!this.interactionsOnChip}></ft-ripple>
|
|
944
|
-
<ft-typography variant="body2" element="span" class="ft-chip--label">
|
|
945
|
+
<ft-typography variant="body2" element="span" class="ft-chip--label" part="label">
|
|
945
946
|
<slot @slotchange=${this.onSlotchange}></slot>
|
|
946
947
|
</ft-typography>
|
|
947
948
|
${this.internalIcon?this.renderIcon():null}
|
|
@@ -953,9 +954,10 @@ const Q=Symbol.for(""),tt=t=>{if(t?.r===Q)return t?._$litStatic$},ot=t=>({_$litS
|
|
|
953
954
|
.iconVariant=${this.iconVariant}
|
|
954
955
|
icon="${this.internalIcon}"
|
|
955
956
|
label="${this.iconLabel}"
|
|
957
|
+
part="icon-button"
|
|
956
958
|
></ft-button>
|
|
957
959
|
`:e.html`
|
|
958
|
-
<div class="ft-chip--icon-container ft-no-text-select">
|
|
959
|
-
<ft-icon .variant=${this.iconVariant} .value="${this.internalIcon}"></ft-icon>
|
|
960
|
+
<div class="ft-chip--icon-container ft-no-text-select" part="icon-container">
|
|
961
|
+
<ft-icon .variant=${this.iconVariant} .value="${this.internalIcon}" part="icon"></ft-icon>
|
|
960
962
|
</div>
|
|
961
963
|
`}onKeyUp(t){this.interactionsOnChip&&["Enter"," "].includes(t.key)&&t.target.click()}onIconKeyUp(t){this.interactionsOnIcon&&["Enter"," "].includes(t.key)&&(t.stopPropagation(),this.dispatchEvent(new gr))}onIconClick(t){this.interactionsOnIcon&&(t.stopPropagation(),this.dispatchEvent(new gr))}getLabel(){return this.label||this.textContent}get textContent(){var t,o;return null!==(o=null===(t=this.slottedContent)||void 0===t?void 0:t.assignedNodes().map((t=>t.textContent)).join("").trim())&&void 0!==o?o:""}hasTextContent(){return this.textContent.length>0}onSlotchange(){this.requestUpdate()}get internalIcon(){return this.icon||(this.removable?"close":void 0)}}yr.elementDefinitions={"ft-ripple":b,"ft-typography":$o,"ft-icon":ko,"ft-button":rr},yr.styles=dr,hr([r.property({type:Boolean})],yr.prototype,"highlighted",void 0),hr([r.property({type:Boolean})],yr.prototype,"removable",void 0),hr([r.property({type:Boolean})],yr.prototype,"disabled",void 0),hr([r.property({type:Boolean})],yr.prototype,"clickable",void 0),hr([r.property({type:Boolean})],yr.prototype,"iconClickable",void 0),hr([r.property({type:Boolean})],yr.prototype,"dense",void 0),hr([r.property({type:Boolean})],yr.prototype,"multiLine",void 0),hr([r.property()],yr.prototype,"label",void 0),hr([r.property()],yr.prototype,"iconLabel",void 0),hr([r.property()],yr.prototype,"icon",void 0),hr([r.property()],yr.prototype,"iconVariant",void 0),hr([r.property({type:Boolean})],yr.prototype,"trailingIcon",void 0),hr([r.query("ft-typography slot")],yr.prototype,"slottedContent",void 0),o.customElement("ft-chip")(yr),t.FtChip=yr,t.FtChipCssVariables=cr,t.FtChipDenseCssVariables=sr,t.FtChipHighlightedCssVariables=fr,t.IconClickEvent=gr,t.styles=dr}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litClassMap,ftGlobals.litUnsafeHTML);
|
package/build/ft-chip.min.js
CHANGED
|
@@ -968,7 +968,7 @@ const vl=Symbol.for(""),xl=t=>{if(t?.r===vl)return t?._$litStatic$},Ol=t=>({_$li
|
|
|
968
968
|
width: ${qo.smallIconOnlyWidth};
|
|
969
969
|
padding: unset;
|
|
970
970
|
}
|
|
971
|
-
`,Gi];var bs=function(t,e,o,r){for(var i,n=arguments.length,a=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r,l=t.length-1;l>=0;l--)(i=t[l])&&(a=(n<3?i(a):n>3?i(e,o,a):i(e,o))||a);return n>3&&a&&Object.defineProperty(e,o,a),a};class ms extends hs{constructor(){super(...arguments),this.primary=!1,this.secondary=!1,this.tertiary=!1,this.neutral=!1,this.small=!1}get buttonClasses(){return{"ft-button":!0,"ft-button--primary":this.primary,"ft-button--secondary":this.secondary,"ft-button--tertiary":this.tertiary||!this.primary&&!this.secondary&&!this.neutral,"ft-button--neutral":this.neutral,"ft-button--large":!this.small,"ft-button--small":this.small,"ft-button--icon-only":!this.hasTextContent(),"ft-button--trailing-icon":this.trailingIcon,"ft-button--loading":this.trailingIcon,"ft-no-text-select":!0,"ft-button--no-icon":!this.icon}}get typographyVariant(){return this.small?Cl.caption1medium:Cl.body2medium}}ms.styles=[qi,ys],bs([we({type:Boolean})],ms.prototype,"primary",void 0),bs([we({type:Boolean})],ms.prototype,"secondary",void 0),bs([we({type:Boolean})],ms.prototype,"tertiary",void 0),bs([we({type:Boolean})],ms.prototype,"neutral",void 0),bs([we({type:Boolean})],ms.prototype,"small",void 0),ho("ft-button")(gs),ho("ftds-button")(ms);const vs=mo.extend("--ft-chip-color","",xr.colorOnSurface),xs={backgroundColor:mo.extend("--ft-chip-background-color","",xr.colorSurface),color:vs,fontSize:mo.extend("--ft-chip-font-size","",ic.fontSize),iconSize:mo.create("--ft-chip-icon-size","","SIZE","18px"),rippleColor:mo.extend("--ft-chip-ripple-color","",vs),horizontalPadding:mo.create("--ft-chip-horizontal-padding","","SIZE","6px"),verticalPadding:mo.create("--ft-chip-vertical-padding","","SIZE","6px"),colorOutline:mo.external(xr.colorOutline,"Design system"),opacityDisabled:mo.external(xr.colorOpacityDisabled,"Design system")},Os=mo.extend("--ft-chip-highlighted-color","",mo.extend("--ft-chip-color","",xr.colorOnPrimary)),ws={backgroundColor:mo.extend("--ft-chip-highlighted-background-color","",mo.extend("--ft-chip-background-color","",xr.colorPrimary)),color:Os,rippleColor:mo.extend("--ft-chip-highlighted-ripple-color","",Os)},Ss={horizontalPadding:mo.create("--ft-chip-dense-horizontal-padding","","SIZE","4px"),verticalPadding:mo.create("--ft-chip-dense-vertical-padding","","SIZE","4px")},Cs=[Gi,dt`
|
|
971
|
+
`,Gi];var bs=function(t,e,o,r){for(var i,n=arguments.length,a=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r,l=t.length-1;l>=0;l--)(i=t[l])&&(a=(n<3?i(a):n>3?i(e,o,a):i(e,o))||a);return n>3&&a&&Object.defineProperty(e,o,a),a};class ms extends hs{constructor(){super(...arguments),this.primary=!1,this.secondary=!1,this.tertiary=!1,this.neutral=!1,this.small=!1}get buttonClasses(){return{"ft-button":!0,"ft-button--primary":this.primary,"ft-button--secondary":this.secondary,"ft-button--tertiary":this.tertiary||!this.primary&&!this.secondary&&!this.neutral,"ft-button--neutral":this.neutral,"ft-button--large":!this.small,"ft-button--small":this.small,"ft-button--icon-only":!this.hasTextContent(),"ft-button--trailing-icon":this.trailingIcon,"ft-button--loading":this.trailingIcon,"ft-no-text-select":!0,"ft-button--no-icon":!this.icon}}get typographyVariant(){return this.small?Cl.caption1medium:Cl.body2medium}}ms.styles=[qi,ys],bs([we({type:Boolean})],ms.prototype,"primary",void 0),bs([we({type:Boolean})],ms.prototype,"secondary",void 0),bs([we({type:Boolean})],ms.prototype,"tertiary",void 0),bs([we({type:Boolean})],ms.prototype,"neutral",void 0),bs([we({type:Boolean})],ms.prototype,"small",void 0),ho("ft-button")(gs),ho("ftds-button")(ms);const vs=mo.extend("--ft-chip-color","",xr.colorOnSurface),xs={backgroundColor:mo.extend("--ft-chip-background-color","",xr.colorSurface),color:vs,fontSize:mo.extend("--ft-chip-font-size","",ic.fontSize),iconSize:mo.create("--ft-chip-icon-size","","SIZE","18px"),borderRadius:mo.create("--ft-chip-border-radius","","SIZE",""),rippleColor:mo.extend("--ft-chip-ripple-color","",vs),horizontalPadding:mo.create("--ft-chip-horizontal-padding","","SIZE","6px"),verticalPadding:mo.create("--ft-chip-vertical-padding","","SIZE","6px"),colorOutline:mo.external(xr.colorOutline,"Design system"),opacityDisabled:mo.external(xr.colorOpacityDisabled,"Design system")},Os=mo.extend("--ft-chip-highlighted-color","",mo.extend("--ft-chip-color","",xr.colorOnPrimary)),ws={backgroundColor:mo.extend("--ft-chip-highlighted-background-color","",mo.extend("--ft-chip-background-color","",xr.colorPrimary)),color:Os,rippleColor:mo.extend("--ft-chip-highlighted-ripple-color","",Os)},Ss={horizontalPadding:mo.create("--ft-chip-dense-horizontal-padding","","SIZE","4px"),verticalPadding:mo.create("--ft-chip-dense-vertical-padding","","SIZE","4px")},Cs=[Gi,dt`
|
|
972
972
|
:host {
|
|
973
973
|
display: inline-block;
|
|
974
974
|
max-width: 100%;
|
|
@@ -995,7 +995,7 @@ const vl=Symbol.for(""),xl=t=>{if(t?.r===vl)return t?._$litStatic$},Ol=t=>({_$li
|
|
|
995
995
|
border: 1px solid ${xs.colorOutline};
|
|
996
996
|
color: ${xs.color};
|
|
997
997
|
${vo(sl.color,xs.rippleColor)};
|
|
998
|
-
border-radius: calc(var(--ft-chip-internal-content-height) / 2 + var(--ft-chip-internal-vertical-padding));
|
|
998
|
+
border-radius: var(${pt(xs.borderRadius.name)}, calc(var(--ft-chip-internal-content-height) / 2 + var(--ft-chip-internal-vertical-padding)));
|
|
999
999
|
padding: calc(var(--ft-chip-internal-vertical-padding) - 1px) calc(var(--ft-chip-internal-horizontal-padding) - 1px);
|
|
1000
1000
|
background-color: ${xs.backgroundColor};
|
|
1001
1001
|
line-height: var(--ft-chip-internal-content-height);
|
|
@@ -1109,9 +1109,10 @@ const vl=Symbol.for(""),xl=t=>{if(t?.r===vl)return t?._$litStatic$},Ol=t=>({_$li
|
|
|
1109
1109
|
<div class="${Ke(t)}"
|
|
1110
1110
|
aria-label="${this.getLabel()}"
|
|
1111
1111
|
tabindex="${this.interactionsOnChip?0:-1}"
|
|
1112
|
-
@keyup=${this.onKeyUp}
|
|
1112
|
+
@keyup=${this.onKeyUp}
|
|
1113
|
+
part="chip">
|
|
1113
1114
|
<ft-ripple ?disabled=${!this.interactionsOnChip}></ft-ripple>
|
|
1114
|
-
<ft-typography variant="body2" element="span" class="ft-chip--label">
|
|
1115
|
+
<ft-typography variant="body2" element="span" class="ft-chip--label" part="label">
|
|
1115
1116
|
<slot @slotchange=${this.onSlotchange}></slot>
|
|
1116
1117
|
</ft-typography>
|
|
1117
1118
|
${this.internalIcon?this.renderIcon():null}
|
|
@@ -1123,9 +1124,10 @@ const vl=Symbol.for(""),xl=t=>{if(t?.r===vl)return t?._$litStatic$},Ol=t=>({_$li
|
|
|
1123
1124
|
.iconVariant=${this.iconVariant}
|
|
1124
1125
|
icon="${this.internalIcon}"
|
|
1125
1126
|
label="${this.iconLabel}"
|
|
1127
|
+
part="icon-button"
|
|
1126
1128
|
></ft-button>
|
|
1127
1129
|
`:Jt`
|
|
1128
|
-
<div class="ft-chip--icon-container ft-no-text-select">
|
|
1129
|
-
<ft-icon .variant=${this.iconVariant} .value="${this.internalIcon}"></ft-icon>
|
|
1130
|
+
<div class="ft-chip--icon-container ft-no-text-select" part="icon-container">
|
|
1131
|
+
<ft-icon .variant=${this.iconVariant} .value="${this.internalIcon}" part="icon"></ft-icon>
|
|
1130
1132
|
</div>
|
|
1131
1133
|
`}onKeyUp(t){this.interactionsOnChip&&["Enter"," "].includes(t.key)&&t.target.click()}onIconKeyUp(t){this.interactionsOnIcon&&["Enter"," "].includes(t.key)&&(t.stopPropagation(),this.dispatchEvent(new Es))}onIconClick(t){this.interactionsOnIcon&&(t.stopPropagation(),this.dispatchEvent(new Es))}getLabel(){return this.label||this.textContent}get textContent(){var t,e;return null!==(e=null===(t=this.slottedContent)||void 0===t?void 0:t.assignedNodes().map((t=>t.textContent)).join("").trim())&&void 0!==e?e:""}hasTextContent(){return this.textContent.length>0}onSlotchange(){this.requestUpdate()}get internalIcon(){return this.icon||(this.removable?"close":void 0)}}$s.elementDefinitions={"ft-ripple":ml,"ft-typography":_c,"ft-icon":Dc,"ft-button":gs},$s.styles=Cs,Ns([we({type:Boolean})],$s.prototype,"highlighted",void 0),Ns([we({type:Boolean})],$s.prototype,"removable",void 0),Ns([we({type:Boolean})],$s.prototype,"disabled",void 0),Ns([we({type:Boolean})],$s.prototype,"clickable",void 0),Ns([we({type:Boolean})],$s.prototype,"iconClickable",void 0),Ns([we({type:Boolean})],$s.prototype,"dense",void 0),Ns([we({type:Boolean})],$s.prototype,"multiLine",void 0),Ns([we()],$s.prototype,"label",void 0),Ns([we()],$s.prototype,"iconLabel",void 0),Ns([we()],$s.prototype,"icon",void 0),Ns([we()],$s.prototype,"iconVariant",void 0),Ns([we({type:Boolean})],$s.prototype,"trailingIcon",void 0),Ns([Ee("ft-typography slot")],$s.prototype,"slottedContent",void 0),ho("ft-chip")($s),t.FtChip=$s,t.FtChipCssVariables=xs,t.FtChipDenseCssVariables=Ss,t.FtChipHighlightedCssVariables=ws,t.IconClickEvent=Es,t.styles=Cs}({});
|
|
@@ -3,6 +3,7 @@ export declare const FtChipCssVariables: {
|
|
|
3
3
|
color: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
4
4
|
fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
5
5
|
iconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
6
|
+
borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
6
7
|
rippleColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
7
8
|
horizontalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
8
9
|
verticalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
package/build/ft-chip.styles.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { css, } from "lit";
|
|
1
|
+
import { css, unsafeCSS, } from "lit";
|
|
2
2
|
import { designSystemVariables, FtCssVariableFactory, noTextSelect, setVariable } from "@fluid-topics/ft-wc-utils";
|
|
3
3
|
import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.styles";
|
|
4
4
|
import { FtTypographyBody2CssVariables } from "@fluid-topics/ft-typography/build/ft-typography.styles";
|
|
@@ -10,6 +10,7 @@ export const FtChipCssVariables = {
|
|
|
10
10
|
color: chipColor,
|
|
11
11
|
fontSize: FtCssVariableFactory.extend("--ft-chip-font-size", "", FtTypographyBody2CssVariables.fontSize),
|
|
12
12
|
iconSize: FtCssVariableFactory.create("--ft-chip-icon-size", "", "SIZE", "18px"),
|
|
13
|
+
borderRadius: FtCssVariableFactory.create("--ft-chip-border-radius", "", "SIZE", ""),
|
|
13
14
|
rippleColor: FtCssVariableFactory.extend("--ft-chip-ripple-color", "", chipColor),
|
|
14
15
|
horizontalPadding: FtCssVariableFactory.create("--ft-chip-horizontal-padding", "", "SIZE", "6px"),
|
|
15
16
|
verticalPadding: FtCssVariableFactory.create("--ft-chip-vertical-padding", "", "SIZE", "6px"),
|
|
@@ -56,7 +57,7 @@ export const styles = [
|
|
|
56
57
|
border: 1px solid ${FtChipCssVariables.colorOutline};
|
|
57
58
|
color: ${FtChipCssVariables.color};
|
|
58
59
|
${setVariable(FtRippleCssVariables.color, FtChipCssVariables.rippleColor)};
|
|
59
|
-
border-radius: calc(var(--ft-chip-internal-content-height) / 2 + var(--ft-chip-internal-vertical-padding));
|
|
60
|
+
border-radius: var(${unsafeCSS(FtChipCssVariables.borderRadius.name)}, calc(var(--ft-chip-internal-content-height) / 2 + var(--ft-chip-internal-vertical-padding)));
|
|
60
61
|
padding: calc(var(--ft-chip-internal-vertical-padding) - 1px) calc(var(--ft-chip-internal-horizontal-padding) - 1px);
|
|
61
62
|
background-color: ${FtChipCssVariables.backgroundColor};
|
|
62
63
|
line-height: var(--ft-chip-internal-content-height);
|
|
@@ -120,8 +121,8 @@ export const styles = [
|
|
|
120
121
|
|
|
121
122
|
.ft-chip--icon-button {
|
|
122
123
|
${setVariable(FtButtonCssVariables.iconSize, FtChipCssVariables.iconSize)};
|
|
123
|
-
${setVariable(FtButtonCssVariables.horizontalPadding,
|
|
124
|
-
${setVariable(FtButtonCssVariables.verticalPadding,
|
|
124
|
+
${setVariable(FtButtonCssVariables.horizontalPadding, "var(--ft-chip-internal-icon-padding)")};
|
|
125
|
+
${setVariable(FtButtonCssVariables.verticalPadding, "var(--ft-chip-internal-icon-padding)")};
|
|
125
126
|
margin: calc((-1) * var(--ft-chip-internal-icon-padding));
|
|
126
127
|
}
|
|
127
128
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-chip",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.54",
|
|
4
4
|
"description": "A generic Fluid Topics chip",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -19,11 +19,11 @@
|
|
|
19
19
|
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluid-topics/ft-icon": "1.1.
|
|
23
|
-
"@fluid-topics/ft-ripple": "1.1.
|
|
24
|
-
"@fluid-topics/ft-typography": "1.1.
|
|
25
|
-
"@fluid-topics/ft-wc-utils": "1.1.
|
|
22
|
+
"@fluid-topics/ft-icon": "1.1.54",
|
|
23
|
+
"@fluid-topics/ft-ripple": "1.1.54",
|
|
24
|
+
"@fluid-topics/ft-typography": "1.1.54",
|
|
25
|
+
"@fluid-topics/ft-wc-utils": "1.1.54",
|
|
26
26
|
"lit": "3.1.0"
|
|
27
27
|
},
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "b8c7a07061df6fb5c3c03d96879eda48fb73e5c8"
|
|
29
29
|
}
|