@getflip/swirl-components 0.38.2 → 0.39.0

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

@@ -4,6 +4,7 @@ import { EventEmitter } from "../../stencil-public-runtime";
  * custom-header - Optional custom header; should be used hidden label
  */
 export declare class SwirlModal {
+  el: HTMLElement;
   closeButtonLabel?: string;
   hideCloseButton?: boolean;
   hideLabel?: boolean;
@@ -16,18 +17,20 @@ export declare class SwirlModal {
   modalOpen: EventEmitter<void>;
   primaryAction: EventEmitter<MouseEvent>;
   secondaryAction: EventEmitter<MouseEvent>;
+  isOpen: boolean;
   closing: boolean;
   hasCustomHeader: boolean;
   scrollable: boolean;
   scrolled: boolean;
   scrolledDown: boolean;
   private customHeaderSlot;
-  private modal;
+  private focusTrap;
   private modalEl;
   private scrollContainer;
   componentDidLoad(): void;
   disconnectedCallback(): void;
   onWindowResize(): void;
+  watchIsOpen(): void;
   /**
    * Open the modal.
    */

package/dist/types/components.d.ts

@@ -24,6 +24,7 @@ import { SwirlDescriptionListItemOrientation } from "./components/swirl-descript
 import { SwirlDialogIntent } from "./components/swirl-dialog/swirl-dialog";
 import { SwirlFileViewerPdfViewMode, SwirlFileViewerPdfZoom } from "./components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf";
 import { SwirlFileViewerPdfViewMode as SwirlFileViewerPdfViewMode1, SwirlFileViewerPdfZoom as SwirlFileViewerPdfZoom1 } from "./components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf";
+import { SwirlFormControlLabelPosition } from "./components/swirl-form-control/swirl-form-control";
 import { SwirlFormGroupOrientation } from "./components/swirl-form-group/swirl-form-group";
 import { SwirlHeadingAlign, SwirlHeadingLevel, SwirlHeadingTag } from "./components/swirl-heading/swirl-heading";
 import { SwirlIconSize } from "./components/swirl-icon/swirl-icon.types";
@@ -71,6 +72,7 @@ export { SwirlDescriptionListItemOrientation } from "./components/swirl-descript
 export { SwirlDialogIntent } from "./components/swirl-dialog/swirl-dialog";
 export { SwirlFileViewerPdfViewMode, SwirlFileViewerPdfZoom } from "./components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf";
 export { SwirlFileViewerPdfViewMode as SwirlFileViewerPdfViewMode1, SwirlFileViewerPdfZoom as SwirlFileViewerPdfZoom1 } from "./components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf";
+export { SwirlFormControlLabelPosition } from "./components/swirl-form-control/swirl-form-control";
 export { SwirlFormGroupOrientation } from "./components/swirl-form-group/swirl-form-group";
 export { SwirlHeadingAlign, SwirlHeadingLevel, SwirlHeadingTag } from "./components/swirl-heading/swirl-heading";
 export { SwirlIconSize } from "./components/swirl-icon/swirl-icon.types";
@@ -491,6 +493,7 @@ export namespace Components {
         "inline"?: boolean;
         "invalid"?: boolean;
         "label": string;
+        "labelPosition"?: SwirlFormControlLabelPosition;
     }
     interface SwirlFormGroup {
         "orientation": SwirlFormGroupOrientation;
@@ -3029,6 +3032,7 @@ declare namespace LocalJSX {
         "inline"?: boolean;
         "invalid"?: boolean;
         "label": string;
+        "labelPosition"?: SwirlFormControlLabelPosition;
     }
     interface SwirlFormGroup {
         "orientation"?: SwirlFormGroupOrientation;

package/package.json

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

package/vscode-data.json

@@ -1868,6 +1868,18 @@
         {
           "name": "label",
           "description": ""
+        },
+        {
+          "name": "label-position",
+          "description": "",
+          "values": [
+            {
+              "name": "inside"
+            },
+            {
+              "name": "outside"
+            }
+          ]
         }
       ]
     },

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

@@ -1 +0,0 @@
-import{r as o,h as r,H as t,g as s}from"./p-05c15d47.js";import{c as l}from"./p-b7898321.js";const i=class{constructor(r){o(this,r),this.descriptionId=`form-control-description-${Math.round(1e5*Math.random())}`,this.listenToInputValueChanges=()=>{this.inputEl.addEventListener("valueChange",this.checkInputValue)},this.checkInputValue=()=>{var o;this.inputValue=null===(o=this.inputEl)||void 0===o?void 0:o.value},this.onFocusIn=()=>{this.hasFocus=!0},this.onFocusOut=()=>{this.hasFocus&&(this.hasFocus=!1)},this.description=void 0,this.disabled=void 0,this.errorMessage=void 0,this.inline=void 0,this.invalid=void 0,this.label=void 0,this.hasFocus=void 0,this.inputValue=void 0}componentWillLoad(){this.inputEl=this.el.children[0],this.associateDescriptionWithInputElement(),this.setInputElementDisabledState(),this.setInputElementInlineState(),this.setInputElementInvalidState(),this.setInputElementLabel(),this.checkInputValue(),this.listenToInputValueChanges()}associateDescriptionWithInputElement(){Boolean(this.description)&&Boolean(this.inputEl)&&this.inputEl.setAttribute("swirl-aria-describedby",this.descriptionId)}setInputElementDisabledState(){Boolean(this.inputEl)&&(this.disabled?this.inputEl.setAttribute("disabled","true"):this.inputEl.removeAttribute("disabled"))}setInputElementInlineState(){Boolean(this.inputEl)&&(this.inline?this.inputEl.setAttribute("inline","true"):this.inputEl.removeAttribute("inline"))}setInputElementInvalidState(){Boolean(this.inputEl)&&(this.invalid?this.inputEl.setAttribute("invalid","true"):this.inputEl.removeAttribute("invalid"))}setInputElementLabel(){Boolean(this.inputEl)&&this.inputEl.setAttribute("label",this.label)}onWindowClick(o){this.hasFocus&&(this.el.contains(o.target)||(this.hasFocus=!1))}render(){const o=Boolean(this.errorMessage),s=Boolean(this.description)&&!o,i=Array.isArray(this.inputValue)?this.inputValue.length>0:Boolean(this.inputValue),e=l("form-control",{"form-control--disabled":this.disabled,"form-control--inline":this.inline,"form-control--has-focus":this.hasFocus,"form-control--has-value":i,"form-control--invalid":this.invalid,"form-control--is-select":"SWIRL-SELECT"===this.inputEl.tagName});return r(t,{onFocusin:this.onFocusIn,onFocusout:this.onFocusOut},r("div",{class:e,role:"group"},r("label",{class:"form-control__label"},r("span",{class:"form-control__label-text"},this.label),r("span",{class:"form-control__input"},r("slot",null))),s&&r("span",{class:"form-control__description",id:this.descriptionId},this.description),o&&r("span",{"aria-live":"polite",class:"form-control__error-message",id:this.descriptionId},r("swirl-inline-error",{message:this.errorMessage,size:"s"}))))}get el(){return s(this)}static get watchers(){return{description:["associateDescriptionWithInputElement"],disabled:["setInputElementDisabledState"],inline:["setInputElementInlineState"],invalid:["setInputElementInvalidState"],label:["setInputElementLabel"]}}};i.style=".sc-swirl-form-control-h{display:block;width:100%}.sc-swirl-form-control-h *.sc-swirl-form-control{box-sizing:border-box}.form-control.sc-swirl-form-control{display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select) .form-control__input.sc-swirl-form-control{overflow:hidden;max-height:0}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select) .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .select__label.sc-swirl-form-control{overflow:hidden;max-height:0;pointer-events:none}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control--invalid.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-disabled);color:var(--s-text-disabled)}.form-control--disabled.sc-swirl-form-control .form-control__description.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--inline.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{right:var(--s-space-12);left:var(--s-space-12);transition:none;opacity:0}.form-control__label.sc-swirl-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2)}.form-control__label-text.sc-swirl-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__description.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4)}";export{i as swirl_form_control}

package/dist/swirl-components/p-4f7f5e02.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as s,H as e}from"./p-05c15d47.js";import{c as n}from"./p-b7898321.js";import{g as r}from"./p-438b3941.js";const o=class{constructor(s){t(this,s),this.inputBlur=i(this,"inputBlur",7),this.inputFocus=i(this,"inputFocus",7),this.valueChange=i(this,"valueChange",7),this.desktopMediaQuery=r(),this.desktopMediaQueryHandler=t=>{this.updateIconSize(t.matches)},this.clear=()=>{this.inputEl.value="",this.value="",this.valueChange.emit(""),this.inputEl.focus()},this.onChange=t=>{const i=t.target;this.value=i.value,this.valueChange.emit(i.value)},this.onBlur=t=>{this.inputBlur.emit(t)},this.onFocus=t=>{this.inputFocus.emit(t),this.handleAutoSelect(t)},this.onInput=t=>{this.onChange(t)},this.onKeyPress=t=>{"number"===this.type&&["+","-","e"].includes(t.key)&&t.preventDefault()},this.decreaseValue=()=>{if("number"!==this.type)return;const t=this.step||1;let i=this.inputEl.valueAsNumber;isNaN(this.inputEl.valueAsNumber)&&(i=void 0!==this.min?this.min+1:1),this.value=String(Math.max(this.min||-1/0,i-t)),this.valueChange.emit(this.value)},this.increaseValue=()=>{if("number"!==this.type)return;const t=this.step||1;let i=this.inputEl.valueAsNumber;isNaN(this.inputEl.valueAsNumber)&&(i=void 0!==this.min?this.min-1:-1),this.value=String(Math.min(this.max||1/0,i+t)),this.valueChange.emit(this.value)},this.togglePassword=()=>{"password"===this.type&&(this.showPassword=!this.showPassword)},this.autoComplete="on",this.autoFocus=void 0,this.autoSelect=void 0,this.clearable=void 0,this.clearButtonLabel="Clear input",this.disabled=void 0,this.disableDynamicWidth=void 0,this.swirlAriaAutocomplete=void 0,this.swirlAriaControls=void 0,this.swirlAriaDescribedby=void 0,this.swirlAriaExpanded=void 0,this.swirlRole=void 0,this.inline=void 0,this.invalid=void 0,this.maxLength=void 0,this.max=void 0,this.min=void 0,this.mode=void 0,this.prefixLabel=void 0,this.required=void 0,this.rows=1,this.showCharacterCounter=void 0,this.spellCheck=void 0,this.suffixLabel=void 0,this.step=void 0,this.passwordToggleLabel="Toggle password display",this.type="text",this.value=void 0,this.iconSize=24,this.showPassword=!1}componentDidLoad(){var t,i;this.updateIconSize(this.desktopMediaQuery.matches),null===(i=(t=this.desktopMediaQuery).addEventListener)||void 0===i||i.call(t,"change",this.desktopMediaQueryHandler)}componentDidRender(){this.adjustInputSize()}disconnectedCallback(){var t,i;null===(i=(t=this.desktopMediaQuery).removeEventListener)||void 0===i||i.call(t,"change",this.desktopMediaQueryHandler)}updateIconSize(t){this.iconSize=t?20:24}adjustInputSize(){this.rows>1&&(this.inputEl.style.width="",this.inputEl.style.height="",this.inputEl.style.height=this.inputEl.scrollHeight/16+"rem"),1===this.rows&&(this.inputEl.style.height="",this.inputEl.style.width="","password"===this.type||this.disableDynamicWidth||(this.inputEl.style.width=this.inputEl.scrollWidth/16+"rem"))}handleAutoSelect(t){this.autoSelect&&t.target.select()}render(){var t;const i=1===this.rows?"input":"textarea",r=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,o="number"===this.type&&!this.disabled,h="password"===this.type&&!this.disabled,p=this.clearable&&!this.disabled&&Boolean(this.value)&&!h&&!o&&!this.showCharacterCounter,u="password"===this.type&&this.showPassword?"text":this.type,a=n("text-input",`text-input--type-${this.type}`,{"text-input--clearable":this.clearable,"text-input--disabled":this.disabled,"text-input--disable-dynamic-width":this.disableDynamicWidth,"text-input--inline":this.inline,"text-input--show-password":"password"===this.type&&this.showPassword});return s(e,null,s("div",{class:a},this.prefixLabel&&s("span",{class:"text-input__prefix"},this.prefixLabel),s(i,{"aria-autocomplete":this.swirlAriaAutocomplete,"aria-controls":this.swirlAriaControls,"aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-expanded":this.swirlAriaExpanded,"aria-invalid":r,autoComplete:this.autoComplete,autoFocus:this.autoFocus,class:"text-input__input",disabled:this.disabled,inputMode:this.mode,maxLength:this.maxLength,max:"number"===this.type?this.max:void 0,min:"number"===this.type?this.min:void 0,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,onKeyPress:this.onKeyPress,ref:t=>this.inputEl=t,required:this.required,role:this.swirlRole,rows:this.rows>1?this.rows:void 0,spellcheck:this.spellCheck,step:"number"===this.type?this.step:void 0,type:u,value:1===this.rows?this.value:void 0},this.rows>1&&this.value),this.suffixLabel&&s("span",{class:"text-input__suffix"},this.suffixLabel),p&&s("button",{"aria-label":this.clearButtonLabel,class:"text-input__clear-button",onClick:this.clear,type:"button"},s("swirl-icon-cancel",{size:this.iconSize})),h&&s("button",{"aria-label":this.passwordToggleLabel,class:"text-input__password-toggle",onClick:this.togglePassword,type:"button"},s(this.showPassword?"swirl-icon-visibility-off":"swirl-icon-visibility",{size:this.iconSize})),o&&s("span",{class:"text-input__stepper"},s("button",{"aria-hidden":"true",class:"text-input__step-button",onClick:this.increaseValue,tabIndex:-1,type:"button"},s("swirl-icon-expand-less",{size:this.iconSize})),s("button",{"aria-hidden":"true",class:"text-input__step-button",onClick:this.decreaseValue,tabIndex:-1,type:"button"},s("swirl-icon-expand-more",{size:this.iconSize}))),this.showCharacterCounter&&s("span",{class:"text-input__character-counter"},(null===(t=this.value)||void 0===t?void 0:t.length)||0," ",Boolean(this.maxLength)?`/ ${this.maxLength}`:"")))}};o.style='.sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm)}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--disabled.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{color:var(--s-text-disabled)}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{display:none}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:0}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;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);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-disabled);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type="number"].sc-swirl-text-input{-moz-appearance:textfield}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}input.text-input__input.sc-swirl-text-input:not([type="password"]){width:0.25rem;min-width:0.25rem}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-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}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}';export{o as swirl_text_input}

package/dist/swirl-components/p-66782dbd.entry.js

@@ -1 +0,0 @@
-import{r as o,c as a,h as i,H as s}from"./p-05c15d47.js";import{A as t}from"./p-fe0b5250.js";import{d,e}from"./p-33c168b3.js";import{c as l}from"./p-b7898321.js";const r=class{constructor(i){o(this,i),this.modalClose=a(this,"modalClose",7),this.modalOpen=a(this,"modalOpen",7),this.primaryAction=a(this,"primaryAction",7),this.secondaryAction=a(this,"secondaryAction",7),this.onKeyDown=o=>{"Escape"===o.code&&this.close()},this.onBackdropClick=()=>{this.close()},this.onCloseButtonClick=()=>{this.close()},this.onPrimaryAction=o=>{this.primaryAction.emit(o)},this.onSecondaryAction=o=>{this.secondaryAction.emit(o)},this.onCustomHeaderSlotChange=()=>{this.hasCustomHeader=this.customHeaderSlot.assignedElements().length>0},this.determineScrollStatus=()=>{var o,a,i,s,t,d;const e=(null===(o=this.scrollContainer)||void 0===o?void 0:o.scrollTop)>0,l=Math.ceil((null===(a=this.scrollContainer)||void 0===a?void 0:a.scrollTop)+(null===(i=this.scrollContainer)||void 0===i?void 0:i.offsetHeight))>=(null===(s=this.scrollContainer)||void 0===s?void 0:s.scrollHeight),r=(null===(t=this.scrollContainer)||void 0===t?void 0:t.scrollHeight)>(null===(d=this.scrollContainer)||void 0===d?void 0:d.offsetHeight);e!==this.scrolled&&(this.scrolled=e),l!==this.scrolledDown&&(this.scrolledDown=l),r!==this.scrollable&&(this.scrollable=r)},this.closeButtonLabel="Close modal",this.hideCloseButton=void 0,this.hideLabel=void 0,this.label=void 0,this.maxWidth=void 0,this.padded=!0,this.primaryActionLabel=void 0,this.secondaryActionLabel=void 0,this.closing=!1,this.hasCustomHeader=void 0,this.scrollable=!1,this.scrolled=!1,this.scrolledDown=!1}componentDidLoad(){this.modal=new t(this.modalEl),this.determineScrollStatus()}disconnectedCallback(){var o;null===(o=this.modal)||void 0===o||o.destroy(),this.unlockBodyScroll()}onWindowResize(){this.determineScrollStatus()}async open(){this.modal.show(),this.modalOpen.emit(),this.lockBodyScroll(),this.determineScrollStatus()}async close(){this.closing||(this.closing=!0,this.unlockBodyScroll(),setTimeout((()=>{this.modal.hide(),this.modalClose.emit(),this.closing=!1}),150))}lockBodyScroll(){d(this.scrollContainer)}unlockBodyScroll(){e(this.scrollContainer)}render(){const o=Boolean(this.primaryActionLabel)||Boolean(this.secondaryActionLabel),a=l("modal",{"modal--closing":this.closing,"modal--has-custom-header":this.hasCustomHeader,"modal--padded":this.padded,"modal--scrollable":this.scrollable,"modal--scrolled":this.scrolled,"modal--scrolled-down":this.scrolledDown});return i(s,null,i("section",{"aria-hidden":"true","aria-label":this.label,class:a,id:"modal",onKeyDown:this.onKeyDown,ref:o=>this.modalEl=o},i("div",{class:"modal__backdrop",onClick:this.onBackdropClick}),i("div",{class:"modal__body",role:"document",style:{maxWidth:this.maxWidth}},!this.hideCloseButton&&i("swirl-button",{class:"modal__close-button",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.closeButtonLabel,onClick:this.onCloseButtonClick}),i("header",{class:"modal__custom-header"},i("slot",{name:"custom-header",onSlotchange:this.onCustomHeaderSlotChange,ref:o=>this.customHeaderSlot=o})),!this.hideLabel&&i("header",{class:"modal__header"},i("swirl-heading",{as:"h2",class:"modal__heading",level:3,text:this.label})),i("div",{class:"modal__content",onScroll:this.determineScrollStatus,ref:o=>this.scrollContainer=o},i("slot",null)),o&&i("footer",{class:"modal__controls"},i("swirl-button-group",{wrap:!0},this.secondaryActionLabel&&i("swirl-button",{label:this.secondaryActionLabel,onClick:this.onSecondaryAction}),this.primaryActionLabel&&i("swirl-button",{intent:"primary",label:this.primaryActionLabel,onClick:this.onPrimaryAction,variant:"flat"}))))))}};r.style=':host{--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);display:block}:host *{box-sizing:border-box}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0}.modal[aria-hidden="true"]{display:none}.modal:not(.modal--closing) .modal__backdrop{-webkit-animation:0.15s modal-backdrop-fade-in;animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal:not(.modal--closing) .modal__backdrop{-webkit-animation:none;animation:none}}.modal:not(.modal--closing) .modal__body{-webkit-animation:0.15s modal-scale-in;animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal:not(.modal--closing) .modal__body{-webkit-animation:none;animation:none}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--closing{-webkit-animation:0.15s modal-fade-out;animation:0.15s modal-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--closing{-webkit-animation:none;animation:none}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal--scrolled .modal__header{border-bottom-color:var(--s-border-default)}}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{position:relative;z-index:var(--s-z-40);display:flex;overflow:hidden;width:100vw;max-width:40rem;height:100vh;background-color:var(--s-surface-overlay-default);flex-direction:column}@media (min-width: 768px){.modal__body{width:90vw;height:auto;max-height:90vh;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}.modal__close-button{position:absolute;top:var(--s-space-8);left:var(--s-space-8)}@media (min-width: 768px){.modal__close-button{top:var(--s-space-16);right:var(--s-space-16);left:auto}}.modal__header{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-8) + 2.5rem + var(--s-space-8));flex-shrink:0;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-16)}@media (min-width: 768px){.modal__header{height:4.125rem;padding-top:var(--s-space-24);padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-8));padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);border-bottom:var(--s-border-width-default) solid transparent}}.modal__custom-header{flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content{overflow-x:hidden;overflow-y:auto;flex-grow:1;line-height:var(--s-line-height-base)}.modal__content ::slotted(*){margin:0}.modal__controls{display:flex;padding-top:var(--s-space-16);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);flex-shrink:0;justify-content:flex-end}@-webkit-keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}';export{r as swirl_modal}