@getflip/swirl-components 0.167.0 → 0.167.2

package/dist/types/utils.d.ts

@@ -8,6 +8,7 @@ export interface SwirlFormInput<ValueType = string> {
   valueChange: EventEmitter<ValueType>;
 }
 export declare function closestPassShadow(node: any, selector: any): any;
+export declare function isDescendantOf(element: Element, potentialParent: Element): boolean;
 export declare function getActiveElement(root?: Document | ShadowRoot): Element | undefined;
 export declare const getDesktopMediaQuery: () => MediaQueryList;
 export declare function debounce(func: Function, wait: number, immediate?: boolean): any;

package/package.json

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

package/vscode-data.json

@@ -1885,6 +1885,18 @@
           "name": "placeholder",
           "description": ""
         },
+        {
+          "name": "preferred-input-mode",
+          "description": "",
+          "values": [
+            {
+              "name": "input"
+            },
+            {
+              "name": "pick"
+            }
+          ]
+        },
         {
           "name": "required",
           "description": ""

package/dist/swirl-components/p-6e4e9ae0.js

@@ -1 +0,0 @@
-function n(t,o){return t?t instanceof ShadowRoot?n(t.host,o):t instanceof HTMLElement&&t.matches(o)?t:n(t.parentNode,o):null}function t(n=document){const o=n.activeElement;if(Boolean(o))return Boolean(o.shadowRoot)?t(o.shadowRoot):o}const o=()=>document.documentElement.classList.contains("disable-desktop-style-tweaks")?window.matchMedia(null):window.matchMedia("(min-width: 992px) and (max-width: 1439px) and (hover: hover), (min-width: 1440px)");function e(n,t,o=!1){let e;return async function(){const i=this,a=arguments,r=o&&!Boolean(e);clearTimeout(e),e=setTimeout((function(){e=null,o||n.apply(i,a)}),t),r&&n.apply(i,a)}}function i(n,t){const o=t.scrollTop,e=o+t.clientHeight,i=t.getBoundingClientRect(),a=n.getBoundingClientRect().top-i.top+o,r=a+n.offsetHeight;return(r>e?e:r)-(a<o?o:a)}function a(){return!window.matchMedia("(min-width: 768px)").matches}function r(n,t,o=[]){return n?n instanceof ShadowRoot?r(n.host,t,o):n instanceof HTMLElement&&n.matches(t)?r(n.parentNode,t,[...o,n]):r(n.parentNode,t,o):o}function c(n,t){const o=function n(t,o){if(!Boolean(o))return[];const e=Array.from(o.querySelectorAll(t)),i=Boolean(window.HTMLSlotElement)&&o instanceof HTMLSlotElement?o.assignedElements():[],a=[...Array.from(o.children),...i],r=n(t,o.shadowRoot);return[...e,...a.map((o=>n(t,o))).flat(),...r]}(t,n).filter(((n,t,o)=>!o.some(((o,e)=>o.isSameNode(n)&&e>t))));return o}function s(n){const t=new Date(n);return t.setMinutes(t.getMinutes()+t.getTimezoneOffset()),t}export{t as a,i as b,n as c,e as d,o as g,a as i,r as p,c as q,s as r}

package/dist/swirl-components/p-c8124672.entry.js

@@ -1 +0,0 @@
-import{r as i,c as a,h as o,H as t}from"./p-e5528e8a.js";import{A as s}from"./p-fe0b5250.js";import{c as e}from"./p-b7898321.js";const d=class{constructor(o){i(this,o),this.primaryAction=a(this,"primaryAction",7),this.secondaryAction=a(this,"secondaryAction",7),this.onKeyDown=i=>{"Escape"===i.code&&(i.stopImmediatePropagation(),this.close())},this.onBackdropClick=()=>{this.close()},this.onPrimaryAction=i=>{this.primaryAction.emit(i),this.close()},this.onSecondaryAction=i=>{this.secondaryAction.emit(i),this.close()},this.hideLabel=void 0,this.intent="primary",this.label=void 0,this.primaryActionLabel=void 0,this.secondaryActionLabel=void 0,this.closing=!1}componentDidLoad(){this.dialog=new s(this.dialogEl),this.dialog.on("show",(()=>{this.controlsContainerEl.querySelector("swirl-button button")?.focus()}))}disconnectedCallback(){this.dialog?.destroy()}async open(){this.dialog.show()}async close(){this.closing||(this.closing=!0,setTimeout((()=>{this.dialog.hide(),this.closing=!1}),150))}render(){const i=e("dialog",{"dialog--closing":this.closing});return o(t,null,o("div",{"aria-describedby":"content","aria-hidden":"true","aria-labelledby":this.hideLabel?void 0:"label","aria-label":this.hideLabel?this.label:void 0,"aria-modal":"true",class:i,onKeyDown:this.onKeyDown,ref:i=>this.dialogEl=i,role:"alertdialog"},o("div",{class:"dialog__backdrop",onClick:this.onBackdropClick}),o("div",{class:"dialog__body",part:"dialog__body",role:"document"},!this.hideLabel&&o("h2",{class:"dialog__heading",part:"dialog__heading",id:"label"},this.label),o("div",{class:"dialog__content",part:"dialog__content",id:"content"},o("slot",null)),o("div",{class:"dialog__controls",ref:i=>this.controlsContainerEl=i},this.secondaryActionLabel&&o("swirl-button",{label:this.secondaryActionLabel,onClick:this.onSecondaryAction}),this.primaryActionLabel&&o("swirl-button",{intent:this.intent,label:this.primaryActionLabel,onClick:this.onPrimaryAction,variant:"critical"===this.intent?"ghost":"flat"})))))}};d.style=':host{display:block}:host *{box-sizing:border-box}.dialog{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0}.dialog[aria-hidden="true"]{display:none}.dialog:not(.dialog--closing) .dialog__backdrop{animation:0.15s dialog-backdrop-fade-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__backdrop{animation:none}}.dialog:not(.dialog--closing) .dialog__body{animation:0.15s dialog-scale-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__body{animation:none}}.dialog--closing{animation:0.15s dialog-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.dialog--closing{animation:none}}.dialog__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.dialog__body{z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;width:18.5rem;max-height:90vh;padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-16);padding-left:var(--s-space-16);border-radius:var(--s-border-radius-l);background-color:var(--s-surface-overlay-default);text-align:center;box-shadow:var(--s-shadow-level-3)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.dialog__body{width:25rem;border-radius:var(--s-border-radius-base)}}@media (min-width: 992px){.dialog__body{text-align:start}}.dialog__heading{margin:0;margin-bottom:var(--s-space-8);padding-right:var(--s-space-8);padding-left:var(--s-space-8);font-size:var(--s-font-size-lg);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.dialog__heading{line-height:var(--s-line-height-base)}}.dialog__content{margin-bottom:var(--s-space-20);padding-right:var(--s-space-8);padding-left:var(--s-space-8);line-height:var(--s-line-height-base)}.dialog__content ::slotted(*){margin:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.dialog__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}@media (min-width: 992px){.dialog__content{margin-bottom:var(--s-space-24)}}.dialog__controls{display:flex;flex-wrap:wrap;justify-content:stretch;gap:var(--s-space-8)}.dialog__controls>*{flex-grow:1}@media (min-width: 992px){.dialog__controls>*{flex-grow:0}}@media (min-width: 992px){.dialog__controls{justify-content:flex-end}}@keyframes dialog-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes dialog-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes dialog-fade-out{from{opacity:1}to{opacity:0}}';export{d as swirl_dialog}

package/dist/swirl-components/p-d21b53db.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as s,H as e,g as a}from"./p-e5528e8a.js";import{c as n}from"./p-b7898321.js";import{p as o,i as d,f as r,m as h}from"./p-6339561b.js";import{g as p}from"./p-6e4e9ae0.js";const l="yyyy-MM-dd",u=class{constructor(s){t(this,s),this.invalidInput=i(this,"invalidInput",7),this.valueChange=i(this,"valueChange",7),this.desktopMediaQuery=p(),this.desktopMediaQueryHandler=t=>{this.updateIconSize(t.matches)},this.onChange=t=>{const i=t.target.value;""===i&&(this.value=void 0,this.valueChange.emit(void 0));const s=o(i,this.format,new Date),e=this.format.replace(/\\/g,"\\\\"),a=new RegExp(`^${e.replace(/[ydM]/g,"\\d")}$`);if(!Boolean(i.match(a)))return;if(!d(s))return void this.invalidInput.emit(i);const n=r(s,l);this.value=n,this.valueChange.emit(n)},this.onInput=t=>{this.onChange(t)},this.onClick=t=>{t.preventDefault()},this.onFocus=t=>{this.handleAutoSelect(t)},this.onPickDate=t=>{const i=r(t.detail,l);this.value=i,this.valueChange.emit(i),this.pickerPopover.close()},this.autoFocus=void 0,this.autoSelect=void 0,this.datePickerDisableDate=()=>!1,this.datePickerLabel="Date picker",this.datePickerTriggerLabel="Open date picker",this.disabled=void 0,this.firstDayOfWeek=0,this.format="yyyy-MM-dd",this.inline=void 0,this.invalid=void 0,this.labels=void 0,this.locale="en-US",this.placeholder="yyyy-mm-dd",this.required=void 0,this.swirlAriaDescribedby=void 0,this.value=void 0,this.iconSize=24}componentWillLoad(){const t=Array.from(document.querySelectorAll("swirl-date-input")).indexOf(this.el);this.id=`swirl-date-input-${t}`}componentDidLoad(){this.setupMask(),this.updateIconSize(this.desktopMediaQuery.matches),this.desktopMediaQuery.onchange=this.desktopMediaQueryHandler,this.autoFocus&&setTimeout((()=>{this.inputEl.focus()}))}disconnectedCallback(){this.mask?.destroy(),this.desktopMediaQuery.removeEventListener?.("change",this.desktopMediaQueryHandler)}watchFormat(){this.setupMask()}updateIconSize(t){this.iconSize=t?20:24}handleAutoSelect(t){this.autoSelect&&t.target.select()}setupMask(){this.mask?.destroy(),this.mask=h.create(`#${this.id}`,{mask:this.format.replace(/[ydM]/g,"#")})}render(){const t=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,i=Boolean(this.value)?o(this.value,l,new Date):void 0,a=d(i)?r(i,this.format):void 0,h=n("date-input",{"date-input--inline":this.inline});return s(e,null,s("div",{class:h},s("input",{"aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":t,autoFocus:this.autoFocus,class:"date-input__input",disabled:this.disabled,id:this.id,onClick:this.onClick,onFocus:this.onFocus,onInput:this.onInput,placeholder:this.placeholder,ref:t=>this.inputEl=t,required:this.required,type:"text",value:a}),s("swirl-popover-trigger",{popover:`popover-${this.id}`},s("button",{"aria-label":this.datePickerTriggerLabel,class:"date-input__date-picker-button",disabled:this.disabled,type:"button"},s("swirl-icon-today",{size:this.iconSize})))),!this.disabled&&s("swirl-popover",{animation:"scale-in-y",id:`popover-${this.id}`,label:this.datePickerLabel,placement:"bottom-end",ref:t=>this.pickerPopover=t},s("swirl-date-picker",{disableDate:this.datePickerDisableDate,firstDayOfWeek:this.firstDayOfWeek,labels:this.labels,locale:this.locale,onValueChange:this.onPickDate,value:i})))}get el(){return a(this)}static get watchers(){return{format:["watchFormat"]}}};u.style=".sc-swirl-date-input-h{display:flex;width:100%}.sc-swirl-date-input-h *.sc-swirl-date-input{box-sizing:border-box}.date-input.sc-swirl-date-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:0}}.date-input__input.sc-swirl-date-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.date-input__input.sc-swirl-date-input:focus{outline:none}.date-input__input.sc-swirl-date-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__input.sc-swirl-date-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-input__date-picker-button.sc-swirl-date-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.date-input__date-picker-button.sc-swirl-date-input:focus:not(:focus-visible){outline:none}.date-input__date-picker-button.sc-swirl-date-input:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-input__date-picker-button.sc-swirl-date-input:disabled{color:var(--s-icon-disabled);cursor:default}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__date-picker-button.sc-swirl-date-input{top:-0.625rem}}";export{u as swirl_date_input}