@getflip/swirl-components 0.22.0 → 0.23.1

package/vscode-data.json

@@ -83,6 +83,43 @@
         }
       ]
     },
+    {
+      "name": "swirl-app-bar",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "back-button-label",
+          "description": ""
+        },
+        {
+          "name": "close-button-label",
+          "description": ""
+        },
+        {
+          "name": "show-back-button",
+          "description": ""
+        },
+        {
+          "name": "show-close-button",
+          "description": ""
+        },
+        {
+          "name": "show-stepper-controls",
+          "description": ""
+        },
+        {
+          "name": "step-down-button-label",
+          "description": ""
+        },
+        {
+          "name": "step-up-button-label",
+          "description": ""
+        }
+      ]
+    },
     {
       "name": "swirl-app-layout",
       "description": {
@@ -1502,6 +1539,10 @@
         {
           "name": "text",
           "description": ""
+        },
+        {
+          "name": "truncate",
+          "description": ""
         }
       ]
     },
@@ -2946,6 +2987,10 @@
           "name": "label",
           "description": ""
         },
+        {
+          "name": "max-width",
+          "description": ""
+        },
         {
           "name": "padded",
           "description": ""

package/dist/swirl-components/p-13740092.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.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.padded=!0,this.primaryActionLabel=void 0,this.secondaryActionLabel=void 0,this.closing=!1,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--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"},!this.hideCloseButton&&i("swirl-button",{class:"modal__close-button",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.closeButtonLabel,onClick:this.onCloseButtonClick}),!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--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;height:100vh;background-color:var(--s-surface-overlay-default);flex-direction:column}@media (min-width: 768px){.modal__body{width:90vw;max-width:33.75rem;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__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}

package/dist/swirl-components/p-5044fc33.entry.js

@@ -1 +0,0 @@
-import{r as i,h as e,H as s}from"./p-05c15d47.js";import{c as t}from"./p-b7898321.js";import{b as n}from"./p-f83a5757.js";const h=class{constructor(e){i(this,e),this.align="start",this.as=void 0,this.balance=!0,this.headingId=void 0,this.level=1,this.text=void 0}componentDidRender(){this.rebalance()}onWindowResize(){this.rebalance()}rebalance(){this.balance&&Boolean(this.headingEl)&&n(this.headingEl)}render(){const i=this.as||`h${this.level}`,n=t("heading",`heading--align-${this.align}`,`heading--level-${this.level}`);return e(s,null,e(i,{class:n,id:this.headingId,ref:i=>this.headingEl=i},this.text))}};h.style=".sc-swirl-heading-h{display:block;width:100%}.sc-swirl-heading-h *.sc-swirl-heading{box-sizing:border-box}.heading.sc-swirl-heading{display:block;width:100%;margin:0;padding:0;text-align:start}.heading--align-start.sc-swirl-heading{text-align:start}.heading--align-center.sc-swirl-heading{text-align:center}.heading--align-end.sc-swirl-heading{text-align:end}.heading--level-1.sc-swirl-heading{font-size:var(--s-font-size-2xl);font-weight:var(--s-font-weight-bold);line-height:var(--s-line-height-2xl);letter-spacing:var(--s-letter-spacing-tight)}.heading--level-2.sc-swirl-heading{font-size:var(--s-font-size-xl);font-weight:var(--s-font-weight-bold);line-height:var(--s-line-height-xl)}.heading--level-3.sc-swirl-heading{font-size:var(--s-font-size-lg);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-lg)}.heading--level-4.sc-swirl-heading{font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-base)}.heading--level-5.sc-swirl-heading,.heading--level-6.sc-swirl-heading{font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-sm)}";export{h as swirl_heading}