@getflip/swirl-components 0.516.0 → 0.517.1

package/dist/swirl-components/p-0eb845e5.entry.js

@@ -1 +0,0 @@
-import{r as i,c,h as s,a as r,d as e}from"./p-BdGaOt5L.js";import{c as a}from"./p-orsBiyT_.js";import{D as t}from"./p-Bfn7CHM9.js";import"./p-CCck-DTo.js";const h=class{constructor(s){i(this,s),this.chipClick=c(this,"chipClick",7),this.removeChip=c(this,"remove",7),this.borderRadius="pill",this.iconColor="default",this.intent="default",this.interactive=!1,this.progressBarLabel="Loading progress",this.removeButtonLabel="Remove",this.size="m",this.variant="outline",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.mediaQueryUnsubscribe=t.subscribe((i=>{this.isDesktop=i,this.forceIconProps()}))}componentDidRender(){this.forceIconProps()}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(){if(!Boolean(this.iconEl)&&!Boolean(this.trailingIconEl))return;const i="s"===this.size?"16":this.isDesktop?"20":"24";if(this.iconEl){const c=this.iconEl.children[0];c?.setAttribute("size",i)}if(this.trailingIconEl){const c=this.trailingIconEl.children[0];c?.setAttribute("size",i)}}render(){const i=this.interactive||void 0!==this.pressed?"button":"span",c=Boolean(this.el.querySelector('[slot="avatar"]')),e=!c&&Boolean(this.icon),t=Boolean(this.el.querySelector('[slot="trailing-content"]')),h=a("chip",`chip--border-radius-${this.borderRadius}`,`chip--icon-color-${this.iconColor}`,`chip--intent-${this.intent}`,`chip--size-${this.size}`,`chip--variant-${this.variant}`,{"chip--pressed":this.pressed,"chip--has-progress":void 0!==this.progress,"chip--interactive":this.interactive||void 0!==this.pressed,"chip--removable":this.removable});return s(r,{key:"a143d32603ecf2843a8b1291dfcad7c9a59fb6dc"},s(i,{key:"a6ec7b1554b4b53317da9e4f4174eeb37fa71292","aria-disabled":this.interactive&&this.disabled?"true":void 0,"aria-pressed":void 0!==this.pressed?String(this.pressed):void 0,class:h,disabled:this.interactive?this.disabled:void 0,onClick:this.chipClick.emit,type:this.interactive?"button":void 0},s("span",{key:"06290531c4484d1d40350190cca4e28fb9554701",class:"chip__inner"},c&&s("span",{key:"fb1586360058ce70836b0d9abb16fb2ffb4ffbf3",class:"chip__avatar"},s("slot",{key:"cbea43f4ad440ca2d59b56dbef167a0197930544",name:"avatar"})),e&&s("span",{key:"82b15edc910565d8b8d2d494f1e061771aeaa0a2",class:"chip__icon",innerHTML:this.icon,ref:i=>this.iconEl=i}),s("span",{key:"6c5882703ac0a24145ccce4063d89f1ebaea5f41",class:"chip__label"},this.label),this.trailingIcon&&s("span",{key:"1dd62bebc93bcf530cd049084c0c9f867d803c84",class:"chip__trailing-icon",innerHTML:this.trailingIcon,ref:i=>this.trailingIconEl=i}),t&&s("span",{key:"dea6309c1dd6d1648c5abbf353270da7d272d9a6",class:"chip__trailing-content"},s("slot",{key:"c8de705b65639aca3758e81fb6f0547b35a6b485",name:"trailing-content"}))),void 0!==this.progress&&s("span",{key:"1cb286d6d821e9dcb1f0cb33d0daf1601909a5ab",class:"chip__progress-indicator"},s("swirl-progress-indicator",{key:"5fa7db1e4452a036fc3e2bb2190996bd6e4bdf50",label:this.progressBarLabel,value:this.progress}))),this.removable&&s("button",{key:"f48ecfa4f1d207cd9202af9206478d59c176a096","aria-disabled":this.disabled?"true":void 0,"aria-label":this.removeButtonLabel,class:"chip__remove-button",disabled:this.disabled,onClick:this.removeChip.emit,type:"button"},s("swirl-icon-close",{key:"c143ebba597808238fd7bb07fd356d85333d8c5c",size:20})))}get el(){return e(this)}};h.style='.sc-swirl-chip-h{position:relative;display:inline-flex;max-width:100%}.sc-swirl-chip-h *.sc-swirl-chip{box-sizing:border-box}.chip.sc-swirl-chip{display:inline-flex;overflow:hidden;max-width:100%;height:2.25rem;padding:0;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:transparent;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);flex-direction:column}.chip--size-s.sc-swirl-chip{height:2rem}.chip--size-s.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.5rem + var(--s-space-12))}.chip--size-s.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.chip--size-s.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:var(--s-space-4);width:1.5rem;height:1.5rem}.chip--interactive.sc-swirl-chip{cursor:pointer}.chip--interactive.sc-swirl-chip:disabled{cursor:default;color:var(--s-text-disabled)}.chip--interactive.sc-swirl-chip:disabled .chip__icon.sc-swirl-chip{color:var(--s-icon-disabled)}.chip--interactive.sc-swirl-chip:hover:not(:disabled){background-color:var(--s-state-hovered)}.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:active:not(:disabled){background-color:var(--s-state-pressed)}.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--icon-color-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.875rem + var(--s-space-12))}.chip--intent-critical.sc-swirl-chip:not(:disabled){border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip{color:var(--s-icon-critical)}.chip--border-radius-sm.sc-swirl-chip{border-radius:var(--s-border-radius-sm)}.chip--intent-success.sc-swirl-chip:not(:disabled){border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip{color:var(--s-icon-success)}.chip--intent-highlight.sc-swirl-chip:not(:disabled){border-color:var(--s-border-highlight);color:var(--s-text-highlight)}.chip--intent-highlight.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default);border-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip{color:var(--s-text-on-action-primary)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled):hover:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled):hover:not(:disabled){background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled):active:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled):active:not(:disabled){background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip:hover:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip:hover:not(:disabled){background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip:active:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip:active:not(:disabled){background-color:var(--s-action-primary-pressed)}.chip--variant-translucent.sc-swirl-chip{background:var(--s-translucent-medium-default);-webkit-backdrop-filter:blur(var(--s-blur-s));backdrop-filter:blur(var(--s-blur-s))}.chip--variant-translucent.chip--interactive.sc-swirl-chip:hover:not(:disabled){background:var(--s-translucent-medium-hovered)}.chip--variant-translucent.chip--interactive.sc-swirl-chip:active:not(:disabled){background:var(--s-translucent-medium-pressed)}.chip--variant-plain.sc-swirl-chip{height:auto;border:none;border-radius:0;background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover:not(:disabled){background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip::part(avatar),.chip--variant-plain.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--variant-plain.chip--interactive.sc-swirl-chip:active:not(:disabled){background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip::part(avatar),.chip--variant-plain.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--variant-plain.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12)}.chip--variant-plain.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{position:relative;top:0;right:auto}.chip--variant-plain.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:0;padding-left:0}.chip--variant-plain.sc-swirl-chip .chip__icon.sc-swirl-chip,.chip--variant-plain.sc-swirl-chip .chip__avatar.sc-swirl-chip{margin-left:0}.chip--has-progress.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:0.1875rem}.chip--has-progress.sc-swirl-chip:not(.chip--size-s)+.chip__remove-button.sc-swirl-chip{top:0.0625rem}.chip__inner.sc-swirl-chip{display:inline-flex;max-width:100%;height:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center}.chip__avatar.sc-swirl-chip,.chip__icon.sc-swirl-chip{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar.sc-swirl-chip{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon.sc-swirl-chip{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__trailing-icon.sc-swirl-chip,.chip__trailing-content.sc-swirl-chip{display:inline-flex;flex-shrink:0;margin-left:var(--s-space-8)}.chip__label.sc-swirl-chip{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.chip__progress-indicator.sc-swirl-chip{width:100%}.chip__remove-button.sc-swirl-chip{position:absolute;top:0.1875rem;right:var(--s-space-4);display:inline-flex;width:1.875rem;height:1.875rem;padding:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.chip__remove-button.sc-swirl-chip:disabled{cursor:default}.chip__remove-button.sc-swirl-chip:disabled>*.sc-swirl-chip::part(icon),.chip__remove-button.sc-swirl-chip:disabled>*.sc-swirl-chip [part~="icon"]{color:var(--s-icon-disabled)}.chip__remove-button.sc-swirl-chip:hover:not(:disabled){background-color:var(--s-state-hovered)}.chip__remove-button.sc-swirl-chip:active:not(:disabled){background-color:var(--s-state-pressed)}';export{h as swirl_chip}