@getflip/swirl-components 0.69.4 → 0.70.1

package/dist/types/components/swirl-tag/swirl-tag.d.ts

@@ -1,6 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 export type SwirlTagIntent = "default" | "critical" | "warning" | "success" | "info";
 export declare class SwirlTag {
+  el: HTMLElement;
   intent?: SwirlTagIntent;
   label: string;
   removable?: boolean;

package/dist/typings.d.ts

@@ -0,0 +1 @@
+declare module "balance-text";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getflip/swirl-components",
-  "version": "0.69.4",
+  "version": "0.70.1",
   "description": "Swirl Design System Web Component Library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/swirl-components/p-058621f1.entry.js

@@ -1 +0,0 @@
-import{r as s,c as e,h as i,H as t,g as l}from"./p-3fca9a05.js";import{c as o}from"./p-b7898321.js";import{q as r}from"./p-646e00de.js";const c=class{constructor(i){s(this,i),this.valueChange=e(this,"valueChange",7),this.select=s=>{this.value=s.detail,this.valueChange.emit(this.value),this.multiSelect||this.popover.close()},this.onSlotChange=()=>{this.updateOptions()},this.onOpen=s=>{this.placement=s.detail.position.placement,this.open=!0},this.onClose=()=>{this.open=!1},this.onKeyDown=s=>{"Space"!==s.code&&"Enter"!==s.code||(s.preventDefault(),this.popover.open())},this.disabled=void 0,this.inline=void 0,this.invalid=void 0,this.label=void 0,this.multiSelect=void 0,this.required=void 0,this.selectId=Math.round(1e6*Math.random()).toString(),this.swirlAriaDescribedby=void 0,this.value=void 0,this.options=[],this.open=void 0,this.placement=void 0}componentWillLoad(){queueMicrotask((()=>{this.updateOptions()}))}onWindowFocusIn(s){s.target===this.el.querySelector("input")&&s.stopImmediatePropagation()}updateOptions(){this.options=r(this.el,"swirl-option-list-item")}render(){const s=Boolean(this.value)?this.value.map((s=>{var e;return null===(e=this.options.find((e=>e.value===s)))||void 0===e?void 0:e.label})).join(", "):"",e=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,l=o("select",`select--placement-${this.placement}`,{"select--disabled":this.disabled,"select--inline":this.inline});return i(t,{onKeyDown:this.onKeyDown},i("div",{class:l},i("input",{"aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":e,class:"select__label",disabled:this.disabled,id:`trigger-${this.selectId}`,readOnly:!0,type:"text",value:s}),i("span",{class:"select__indicator"},i(this.open?"swirl-icon-expand-less":"swirl-icon-expand-more",null)),i("swirl-popover",{animation:"scale-in-y",class:"select__popover",label:this.label,offset:[0,-16],onPopoverClose:this.onClose,onPopoverOpen:this.onOpen,popoverId:`select-options-${this.selectId}`,ref:s=>this.popover=s,trigger:`trigger-${this.selectId}`,useContainerWidth:"swirl-form-control"},i("swirl-option-list",{onValueChange:this.select,multiSelect:this.multiSelect,value:this.value},i("slot",{onSlotchange:this.onSlotChange})))))}get el(){return l(this)}};c.style=".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:var(--s-space-16)}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:-2.25rem}.select--disabled.sc-swirl-select .select__label.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{top:0}.select__label.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.375rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__label.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__label.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__indicator.sc-swirl-select{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;color:var(--s-icon-default)}";export{c as swirl_select}

package/dist/swirl-components/p-317f16d1.entry.js

@@ -1 +0,0 @@
-import{r as t,c as a,h as o,H as r}from"./p-3fca9a05.js";import{c as s}from"./p-b7898321.js";const i=class{constructor(o){t(this,o),this.remove=a(this,"remove",7),this.onRemove=t=>{var a;null===(a=this.remove)||void 0===a||a.emit(t)},this.intent="default",this.label=void 0,this.removable=void 0,this.removalButtonLabel="Remove"}render(){const t=s("tag",`tag--intent-${this.intent}`);return o(r,null,o("span",{class:t},this.label,this.removable&&o("button",{"aria-label":this.removalButtonLabel,class:"tag__removal-button",onClick:this.onRemove,type:"button"},o("swirl-icon-close",{size:16}))))}};i.style=":host{display:inline-flex}:host *{box-sizing:border-box}.tag{display:inline-flex;padding:var(--s-space-2) var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--s-surface-neutral-subdued);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;gap:var(--s-space-4)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--icon-info)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--icon-critical)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--icon-warning)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--icon-success)}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}";export{i as swirl_tag}