@fluid-topics/ft-file-drop 1.1.53 → 1.1.55

package/build/ft-file-drop.light.js

@@ -798,7 +798,7 @@ const Q=Symbol.for(""),tt=t=>{if(t?.r===Q)return t?._$litStatic$},ot=t=>({_$litS
             width: ${ft.smallIconOnlyWidth};
             padding: unset;
         }
-    `,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","",Pt.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=o.FtCssVariableFactory.create("--ft-chip-dense-horizontal-padding","","SIZE","4px"),dr=o.FtCssVariableFactory.create("--ft-chip-dense-vertical-padding","","SIZE","4px"),hr=[o.noTextSelect,e.css`
+    `,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","",Pt.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=o.FtCssVariableFactory.create("--ft-chip-dense-horizontal-padding","","SIZE","4px"),dr=o.FtCssVariableFactory.create("--ft-chip-dense-vertical-padding","","SIZE","4px"),hr=[o.noTextSelect,e.css`
         :host {
             display: inline-block;
             max-width: 100%;
@@ -825,7 +825,7 @@ const Q=Symbol.for(""),tt=t=>{if(t?.r===Q)return t?._$litStatic$},ot=t=>({_$litS
             border: 1px solid ${cr.colorOutline};
             color: ${cr.color};
             ${o.setVariable(l.color,cr.rippleColor)};
-            border-radius: calc(var(--ft-chip-internal-content-height) / 2 + var(--ft-chip-internal-vertical-padding));
+            border-radius: var(${e.unsafeCSS(cr.borderRadius.name)}, calc(var(--ft-chip-internal-content-height) / 2 + var(--ft-chip-internal-vertical-padding)));
             padding: calc(var(--ft-chip-internal-vertical-padding) - 1px) calc(var(--ft-chip-internal-horizontal-padding) - 1px);
             background-color: ${cr.backgroundColor};
             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
             <div class="${i.classMap(t)}"
                  aria-label="${this.getLabel()}"
                  tabindex="${this.interactionsOnChip?0:-1}"
-                 @keyup=${this.onKeyUp}>
+                 @keyup=${this.onKeyUp}
+                 part="chip">
                 <ft-ripple ?disabled=${!this.interactionsOnChip}></ft-ripple>
-                <ft-typography variant="body2" element="span" class="ft-chip--label">
+                <ft-typography variant="body2" element="span" class="ft-chip--label" part="label">
                     <slot @slotchange=${this.onSlotchange}></slot>
                 </ft-typography>
                 ${this.internalIcon?this.renderIcon():null}
@@ -953,10 +954,11 @@ const Q=Symbol.for(""),tt=t=>{if(t?.r===Q)return t?._$litStatic$},ot=t=>({_$litS
                                .iconVariant=${this.iconVariant}
                                icon="${this.internalIcon}"
                                label="${this.iconLabel}"
+                               part="icon-button"
                     ></ft-button>
             `:e.html`
-                    <div class="ft-chip--icon-container ft-no-text-select">
-                        <ft-icon .variant=${this.iconVariant} .value="${this.internalIcon}"></ft-icon>
+                    <div class="ft-chip--icon-container ft-no-text-select" part="icon-container">
+                        <ft-icon .variant=${this.iconVariant} .value="${this.internalIcon}" part="icon"></ft-icon>
                     </div>
             `}onKeyUp(t){this.interactionsOnChip&&["Enter"," "].includes(t.key)&&t.target.click()}onIconKeyUp(t){this.interactionsOnIcon&&["Enter"," "].includes(t.key)&&(t.stopPropagation(),this.dispatchEvent(new yr))}onIconClick(t){this.interactionsOnIcon&&(t.stopPropagation(),this.dispatchEvent(new yr))}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)}}br.elementDefinitions={"ft-ripple":b,"ft-typography":Co,"ft-icon":ko,"ft-button":rr},br.styles=hr,gr([r.property({type:Boolean})],br.prototype,"highlighted",void 0),gr([r.property({type:Boolean})],br.prototype,"removable",void 0),gr([r.property({type:Boolean})],br.prototype,"disabled",void 0),gr([r.property({type:Boolean})],br.prototype,"clickable",void 0),gr([r.property({type:Boolean})],br.prototype,"iconClickable",void 0),gr([r.property({type:Boolean})],br.prototype,"dense",void 0),gr([r.property({type:Boolean})],br.prototype,"multiLine",void 0),gr([r.property()],br.prototype,"label",void 0),gr([r.property()],br.prototype,"iconLabel",void 0),gr([r.property()],br.prototype,"icon",void 0),gr([r.property()],br.prototype,"iconVariant",void 0),gr([r.property({type:Boolean})],br.prototype,"trailingIcon",void 0),gr([r.query("ft-typography slot")],br.prototype,"slottedContent",void 0),o.customElement("ft-chip")(br);const ur={zIndex:o.FtCssVariableFactory.create("--ft-file-drop-z-index","","NUMBER","10"),hintBackgroundColor:o.FtCssVariableFactory.extend("--ft-file-drop-hint-background-color","",o.designSystemVariables.colorSurface),hintColor:o.FtCssVariableFactory.extend("--ft-file-drop-hint-color","",o.designSystemVariables.colorPrimary),errorColor:o.FtCssVariableFactory.extend("--ft-file-drop-error-color","",o.designSystemVariables.colorError),borderRadius:o.FtCssVariableFactory.extend("--ft-file-drop-border-radius","",o.designSystemVariables.borderRadiusL),borderWidth:o.FtCssVariableFactory.create("--ft-file-drop-border-width","","SIZE","4px"),borderColor:o.FtCssVariableFactory.create("--ft-file-drop-border-color","","COLOR","transparent"),visibleBorderColor:o.FtCssVariableFactory.extend("--ft-file-drop-visible-border-color","",o.designSystemVariables.colorOutline),activeBorderColor:o.FtCssVariableFactory.extend("--ft-file-drop-active-border-color","",o.designSystemVariables.colorPrimary)},mr=e.css`
     :host {