q2-tecton-elements 1.32.1 → 1.34.0

package/dist/q2-tecton-elements/p-c74e8aaa.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as r,g as o}from"./p-277dc8cd.js";import{h as a,p as n,o as e,a as i,l as c}from"./p-e6268528.js";import{s as d}from"./p-f7ebeeb0.js";const s='*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host([hidden]){display:none}:host([block]){display:block;width:100%}::slotted(q2-icon){pointer-events:none}:host{--comp-btn-primary-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));--comp-btn-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-btn-fallback-hover-box-shadow:0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23);--comp-btn-neutral-fallback-hover-box-shadow:0 5px 10px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.36);--comp-btn-primary-box-shadow:var(--tct-btn-primary-box-shadow, var(--t-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-primary-hover-box-shadow:var(--tct-btn-primary-hover-box-shadow, var(--t-btn-primary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow)));--comp-btn-secondary-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-btn-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)));--comp-btn-secondary-box-shadow:var(--tct-btn-secondary-box-shadow, var(--t-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-secondary-hover-box-shadow:var(--tct-btn-secondary-hover-box-shadow, var(--t-btn-secondary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow)));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-neutral-background:var(--tct-btn-neutral-background, var(--tct-btn-neutral-bg, transparent));--comp-btn-neutral-font-color:var(--tct-btn-neutral-font-color, var(--t-btn-neutral-font-color, var(--t-button-default-font-color, #2e2e2e)));--comp-btn-neutral-box-shadow:var(--tct-btn-neutral-box-shadow, var(--t-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-neutral-hover-box-shadow:var(--tct-btn-neutral-hover-box-shadow, var(--t-btn-neutral-hover-box-shadow, var(--comp-btn-neutral-fallback-hover-box-shadow)))}button{margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));display:inline-block;width:100%;hyphens:auto;border:var(--tct-btn-border, 0);border-radius:var(--tct-btn-border-radius);background:transparent;box-shadow:none;border-radius:0;font-weight:400;color:inherit;cursor:pointer;transition:var(--comp-btn-tween);transition-property:background, color, box-shadow, fill, border-color, border-width;outline:0}button:disabled{opacity:var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}:host([size="1"]) button{padding:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host([color]:not([size])) button,:host([intent]:not([size])) button{padding:var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))))}:host([size="2"]) button{padding:var(--tct-scale-2, var(--app-scale-2x, 10px))}:host([size="3"]) button{padding:var(--tct-scale-3, var(--app-scale-3x, 15px))}:host([size="4x"]) button{padding:var(--tct-scale-4x, var(--app-scale-4x, 20px))}:host([size="4"]) button{padding:var(--tct-scale-6x, var(--app-scale-6x, 30px))}:host([color]) button,:host([intent]) button{border-style:solid;font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit))}:host([color=primary]) button,:host([intent=workflow-primary]) button{--comp-btn-primary-border:var(--tct-btn-primary-border-width, var(--t-btn-primary-border-width, 0)) var(--tct-btn-primary-border-color, var(--t-btn-primary-border-color, transparent)) var(--tct-btn-primary-border-style, var(--t-btn-primary-border-style, solid));border:var(--tct-btn-primary-border, var(--comp-btn-primary-border));background:var(--comp-btn-primary-background);color:var(--comp-btn-primary-font-color);border-radius:var(--tct-btn-primary-border-radius, var(--t-btn-primary-border-radius, var(--tct-btn-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)))));box-shadow:var(--comp-btn-primary-box-shadow);font-weight:var(--tct-btn-primary-font-weight, var(--t-btn-primary-font-weight, 600));text-transform:var(--tct-btn-primary-text-transform, var(--t-btn-primary-text-transform, none));letter-spacing:var(--tct-btn-primary-letter-spacing, var(--t-btn-primary-letter-spacing, normal))}:host([color=primary]) button:enabled:hover,:host([color=primary]) button:enabled:focus,:host([color=primary]) button:enabled:active,:host([intent=workflow-primary]) button:enabled:hover,:host([intent=workflow-primary]) button:enabled:focus,:host([intent=workflow-primary]) button:enabled:active{background:var(--tct-btn-primary-hover-background, var(--tct-btn-primary-hover-bg, var(--t-btn-primary-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040)))))));color:var(--tct-btn-primary-hover-font-color, var(--t-btn-primary-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));border-color:var(--tct-btn-primary-hover-border-color, var(--t-btn-primary-hover-border-color, var(--tct-btn-primary-border-color, var(--t-btn-primary-border-color, transparent))))}:host([color=primary]) button:hover:enabled,:host([color=primary]) button:active:enabled,:host([intent=workflow-primary]) button:hover:enabled,:host([intent=workflow-primary]) button:active:enabled{box-shadow:var(--comp-btn-primary-hover-box-shadow)}:host([color=primary]) button:focus,:host([color=primary]) button:focus:hover:enabled,:host([color=primary]) button:focus:active:enabled,:host([intent=workflow-primary]) button:focus,:host([intent=workflow-primary]) button:focus:hover:enabled,:host([intent=workflow-primary]) button:focus:active:enabled{box-shadow:var(--const-double-focus-ring), var(--comp-btn-primary-hover-box-shadow)}:host([color=primary]) button:disabled,:host([intent=workflow-primary]) button:disabled{background:var(--tct-btn-primary-disabled-background, var(--tct-btn-primary-disabled-bg, var(--t-btn-primary-disabled-bg, var(--comp-btn-primary-background))));color:var(--tct-btn-primary-disabled-font-color, var(--t-btn-primary-disabled-font-color, var(--comp-btn-primary-font-color)));box-shadow:var(--tct-btn-primary-disabled-box-shadow, var(--t-btn-primary-disabled-box-shadow, var(--comp-btn-primary-box-shadow)))}:host([color=secondary]) button,:host([intent=workflow-secondary]) button{--comp-btn-secondary-border:var(--tct-btn-secondary-border-width, var(--t-btn-secondary-border-width, 0)) var(--tct-btn-secondary-border-color, var(--t-btn-secondary-border-color, transparent)) var(--tct-btn-secondary-border-style, var(--t-btn-secondary-border-style, solid));border:var(--tct-btn-secondary-border, var(--comp-btn-secondary-border));background:var(--comp-btn-secondary-background);color:var(--comp-btn-secondary-font-color, var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--tct-white, var(--app-white, #ffffff)))));border-radius:var(--tct-btn-secondary-border-radius, var(--t-btn-secondary-border-radius, var(--tct-btn-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)))));box-shadow:var(--comp-btn-secondary-box-shadow);font-weight:var(--tct-btn-secondary-font-weight, var(--t-btn-secondary-font-weight, 600));text-transform:var(--tct-btn-secondary-text-transform, var(--t-btn-secondary-text-transform, none));letter-spacing:var(--tct-btn-secondary-letter-spacing, var(--t-btn-secondary-letter-spacing, normal))}:host([color=secondary]) button:enabled:hover,:host([color=secondary]) button:enabled:focus,:host([color=secondary]) button:enabled:active,:host([intent=workflow-secondary]) button:enabled:hover,:host([intent=workflow-secondary]) button:enabled:focus,:host([intent=workflow-secondary]) button:enabled:active{background:var(--tct-btn-secondary-hover-background, var(--tct-btn-secondary-hover-bg, var(--t-btn-secondary-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040)))))));color:var(--tct-btn-secondary-hover-font-color, var(--t-btn-secondary-hover-font-color, var(--t-button-default-hover-font-color, var(--tct-white, var(--app-white, #ffffff)))));border-color:var(--tct-btn-secondary-hover-border-color, var(--t-btn-secondary-hover-border-color, var(--tct-btn-secondary-border-color, var(--t-btn-secondary-border-color, transparent))))}:host([color=secondary]) button:hover:enabled,:host([color=secondary]) button:active:enabled,:host([intent=workflow-secondary]) button:hover:enabled,:host([intent=workflow-secondary]) button:active:enabled{box-shadow:var(--comp-btn-secondary-hover-box-shadow)}:host([color=secondary]) button:focus,:host([color=secondary]) button:focus:hover:enabled,:host([color=secondary]) button:focus:active:enabled,:host([intent=workflow-secondary]) button:focus,:host([intent=workflow-secondary]) button:focus:hover:enabled,:host([intent=workflow-secondary]) button:focus:active:enabled{box-shadow:var(--const-double-focus-ring), var(--comp-btn-secondary-hover-box-shadow)}:host([color=secondary]) button:disabled,:host([intent=workflow-secondary]) button:disabled{background:var(--tct-btn-secondary-disabled-background, var(--tct-btn-secondary-disabled-bg, var(--t-btn-secondary-disabled-bg, var(--comp-btn-primary-background))));color:var(--tct-btn-secondary-disabled-font-color, var(--t-btn-secondary-disabled-font-color, var(--comp-btn-secondary-font-color)));box-shadow:var(--tct-btn-secondary-disabled-box-shadow, var(--t-btn-secondary-disabled-box-shadow, var(--comp-btn-secondary-box-shadow)))}:host([intent=neutral]) button{--comp-btn-neutral-border:var(--tct-btn-neutral-border-width, var(--t-btn-neutral-border-width, 0)) var(--tct-btn-neutral-border-color, var(--t-btn-neutral-border-color, transparent)) var(--tct-btn-neutral-border-style, var(--t-btn-neutral-border-style, solid));border:var(--tct-btn-neutral-border, var(--comp-btn-neutral-border));background:var(--comp-btn-neutral-background, transparent);color:var(--comp-btn-neutral-font-color, var(--tct-btn-neutral-font-color, var(--t-btn-neutral-font-color, var(--tct-gray-1, var(--t-gray-1, var(--tct-black, var(--app-black, #0d0d0d)))))));border-radius:var(--tct-btn-neutral-border-radius, var(--t-btn-neutral-border-radius, var(--tct-btn-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)))));box-shadow:var(--comp-btn-neutral-box-shadow);font-weight:var(--tct-btn-neutral-font-weight, var(--t-btn-neutral-font-weight, 600));text-transform:var(--tct-btn-neutral-text-transform, var(--t-btn-neutral-text-transform, none));letter-spacing:var(--tct-btn-neutral-letter-spacing, var(--t-btn-neutral-letter-spacing, normal))}:host([intent=neutral]) button:enabled:hover,:host([intent=neutral]) button:enabled:focus,:host([intent=neutral]) button:enabled:active{background:var(--tct-btn-neutral-hover-background, var(--tct-btn-neutral-hover-bg, var(--t-btn-neutral-hover-bg, transparent)));color:var(--tct-btn-neutral-hover-font-color, var(--t-btn-neutral-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));border-color:var(--tct-btn-neutral-hover-border-color, var(--t-btn-neutral-hover-border-color, var(--tct-btn-neutral-border-color, var(--t-btn-neutral-border-color, transparent))))}:host([intent=neutral]) button:hover:enabled,:host([intent=neutral]) button:active:enabled{box-shadow:var(--comp-btn-neutral-hover-box-shadow)}:host([intent=neutral]) button:focus,:host([intent=neutral]) button:focus:hover:enabled,:host([intent=neutral]) button:focus:active:enabled{box-shadow:var(--const-double-focus-ring), var(--comp-btn-neutral-hover-box-shadow)}:host([intent=neutral]) button:disabled{background:var(--tct-btn-neutral-disabled-background, var(--tct-btn-neutral-disabled-bg, var(--t-btn-neutral-disabled-bg, var(--comp-btn-neutral-background))));color:var(--tct-btn-neutral-disabled-font-color, var(--t-btn-neutral-disabled-font-color, var(--comp-btn-neutral-font-color)));box-shadow:var(--tct-btn-neutral-disabled-box-shadow, var(--comp-btn-neutral-box-shadow))}:host button.icon-only{width:var(--tct-btn-icon-width, var(--t-btn-icon-width, 44px));height:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));border-radius:var(--tct-btn-icon-border-radius, var(--t-btn-icon-border-radius, var(--tct-btn-border-radius, 0)))}:host button.icon-only:hover,:host button.icon-only:focus{background-color:var(--tct-btn-icon-hover-background, var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}:host(:not([intent])[active]) button.icon-only{background-color:var(--tct-btn-icon-active-background, var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}:host(:not([intent])) button.icon-only:hover *,:host(:not([intent])) button.icon-only:focus *,:host(:not([intent])[active]) button.icon-only *{color:var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))))}:host([badge]) button{padding:var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));font-size:var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct-btn-font-size, var(--t-btn-font-size, inherit))));border-radius:var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));background-color:var(--tct-btn-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent)));color:var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))}:host([badge]) button ::slotted(q2-icon){--tct-icon-size:1em}:host([badge]:hover) button:enabled{background-color:var(--tct-btn-badge-hover-background, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))))}:host(.selected[badge]) button,:host([active][badge]) button{background-color:var(--tct-btn-badge-active-background, var(--tct-btn-badge-active-bg, var(--t-btn-badge-active-bg, var(--comp-btn-primary-background))));color:var(--tct-btn-badge-active-font-color, var(--t-btn-badge-active-font-color, var(--comp-btn-primary-font-color)))}:host([color=primary]) ::slotted(q2-icon),:host([intent=workflow-primary]) ::slotted(q2-icon){color:var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-btn-primary-font-color, red)))}:host([color=secondary]) ::slotted(q2-icon),:host([intent=workflow-secondary]) ::slotted(q2-icon){color:var(--tct-btn-secondary-icon-color, var(--t-btn-secondary-icon-color, var(--comp-btn-secondary-font-color, red)))}:host([intent=neutral]) ::slotted(q2-icon){color:var(--tct-btn-neutral-icon-color, var(--t-btn-neutral-icon-color, var(--comp-btn-neutral-font-color, red)))}div{display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px)}:host([loading]) .icon-right div{flex-direction:row-reverse}q2-loading{--tct-loading-primary-color:currentColor;--tct-loading-secondary-color:currentColor;--tct-loading-spinner-size:24px}:host([loading]) ::slotted(q2-icon){display:none}:host([loading]) button{pointer-events:none}:host([block]) button,:host([block]) button.icon-only{display:block;width:100%}';const l=class{constructor(r){t(this,r);this.handleSlotChange=()=>{this.handleIcons()};this.ariaExpanded=undefined;this.ariaHasPopup=undefined;this.ariaControls=undefined;this.ariaSelected=undefined;this.ariaPressed=undefined;this.label=undefined;this.hideLabel=undefined;this.tabIndex=undefined;this.intent=undefined;this.disabled=undefined;this.type=undefined;this.loading=undefined;this.badge=undefined;this.active=undefined;this.block=undefined;this.color=undefined;this.fab=undefined;this.ariaLabel=undefined;this.iconPosition=undefined}componentWillLoad(){this.handleIcons();a(this);n(this)}componentDidLoad(){e(this.hostElement)}disable(t){if(this.disabled){t.stopImmediatePropagation()}}delegateFocus(t){if(!i(t,this.hostElement))return;this.hostElement.shadowRoot.querySelector("button").focus()}ariaLabelObserver(){a(this)}handleIcons(){const t=Array.from(this.hostElement.querySelectorAll(":scope > q2-icon")).reduce(((t,r)=>{if(t)r.remove();else t=r;return t}),null);const r=!!t;const o=!!this.hostElement.querySelector("q2-loc");const a=!!this.hostElement.textContent.trim();const n=(o||a)&&r&&this.hostElement.firstElementChild===t;const e=(o||a)&&r&&this.hostElement.lastElementChild===t;const i=!n&&!e&&r;let c;if(i)c="only";else if(n)c="left";else if(e)c="right";this.iconPosition=c}render(){const{ariaExpanded:t,ariaHasPopup:o,ariaSelected:a,ariaPressed:n,disabled:e,type:i,tabindex:d}=this.buttonAttributes;const{iconPosition:s,loading:l,badge:b,label:h,hideLabel:v}=this;const p=s||l;const u=!s||b;return r("button",{"aria-expanded":t,"aria-haspopup":o,"aria-label":v&&c(h),"aria-selected":a,"aria-pressed":n,disabled:e,type:i,tabindex:d,"test-id":"q2BtnInnerButton",class:s?`icon-${s}`:""},r("div",null,p&&r("q2-loading",{hidden:!l,modifiers:u?"inline":undefined}),!v&&h?c(h):r("slot",{onSlotchange:this.handleSlotChange})))}get buttonAttributes(){var t,r,o,a;return{ariaExpanded:this.ariaExpanded!==undefined?`${((t=this.ariaExpanded)===null||t===void 0?void 0:t.toString())==="true"}`:undefined,ariaHasPopup:this.ariaHasPopup!==undefined?`${((r=this.ariaHasPopup)===null||r===void 0?void 0:r.toString())==="true"}`:undefined,ariaLabel:this.label&&this.hideLabel?c(this.label):undefined,ariaSelected:this.ariaSelected!==undefined?`${((o=this.ariaSelected)===null||o===void 0?void 0:o.toString())==="true"}`:undefined,ariaPressed:this.ariaPressed!==undefined?`${((a=this.ariaPressed)===null||a===void 0?void 0:a.toString())==="true"}`:undefined,disabled:this.disabled||false,type:this.type||"button",tabindex:this.tabIndex||undefined}}get hostElement(){return o(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};l.style=s;const b="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.flex{display:flex}.flex-center{justify-content:center}.flex-left{justify-content:flex-start}.flex-right{justify-content:flex-end}.flex-v-center{align-items:center}.no-margin{margin:0}:host{display:block}:host([inline]),:host([modifiers*=inline]){display:inline-block}:host([hidden]){display:none}:host(:not([inline]):not([modifiers*=inline])){font-size:var(--tct-loading-spinner-size, var(--t-loading-spinner-size, var(--app-scale-12x, 60px)))}.q2-loading-animation{height:1em;width:1em}.half-circle-spinner,.half-circle-spinner *{box-sizing:border-box}.half-circle-spinner{border-radius:100%;position:relative}.half-circle-spinner .circle{position:absolute;width:100%;height:100%;border-radius:100%;border:0.0833333333em solid transparent}.half-circle-spinner .circle.circle-1{border-top-color:var(--tct-loading-primary-color, var(--t-loading-primary-color, var(--t-primary, #0079c1)));animation:half-circle-spinner-animation 1s infinite}.half-circle-spinner .circle.circle-2{border-bottom-color:var(--tct-loading-secondary-color, var(--t-loading-secondary-color, #9ddd4f));animation:half-circle-spinner-animation 1s infinite alternate}@keyframes half-circle-spinner-animation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.q2-loading-skeleton{position:relative;width:100%;height:100%;overflow:hidden;--comp-loading-skeleton-shimmer-color:var(--tct-loading-skeleton-shimmer-color, var(--t-base, rgba(255, 255, 255, 0.5)));--comp-loading-skeleton-vertical-gap:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px));--comp-loading-skeleton-horizontal-gap:var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.q2-loading-skeleton-shimmer{position:absolute;width:1rem;height:100%;top:0;left:-100px;animation:skeletonShimmer 3s ease-in-out infinite;background-color:var(--comp-loading-skeleton-shimmer-color);box-shadow:0 0 25px 20px var(--comp-loading-skeleton-shimmer-color);transform:rotate(10deg)}.skeleton-shape.rectangle:not(.no-margin){margin:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px)) var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background:var(--tct-loading-skeleton-element-background, var(--tct-loading-skeleton-element-bg, var(--tct-gray-l3, var(--t-gray-14, #f2f2f2))))}.skeleton-shape.rectangle{min-height:var(--tct-loading-skeleton-rectangle-min-height, 20px)}.skeleton-shape.circle{border-radius:50%;padding-top:100%}.flex .rectangle{flex-grow:1}.skeleton-table-row .rectangle{margin:var(--comp-loading-skeleton-vertical-gap) var(--comp-loading-skeleton-horizontal-gap)}.skeleton-table-row .rectangle:not(:first-child):not(:last-child){flex-grow:2}.skeleton-table-row-border .skeleton-shape{margin:0 var(--comp-loading-skeleton-horizontal-gap)}.form{flex-wrap:wrap}.form .field{margin:var(--comp-loading-skeleton-vertical-gap) 0}.form.columns-1 .field{flex-basis:100%}.form.columns-2 .field{flex-basis:50%}.form.columns-3 .field{flex-basis:33.3333%}.form.columns-4 .field{flex-basis:25%}.form.columns-5 .field{flex-basis:20%}.text .rectangle{margin-bottom:0}.text .header.center{margin:0 auto}.text .header.right{margin-left:auto}.text .header{height:1.5rem}.text .header.smaller{height:1rem}.detailed-item{flex-wrap:wrap}.detailed-item.right{flex-flow:row-reverse}.detailed-item-image{flex:0 0 auto;display:inline-flex}.center .detailed-item-image{flex-basis:100%;display:flex}.detailed-item-image .rectangle{flex-grow:0}.detailed-item-text>div{width:100%}.detailed-item-text{flex:1 1 auto}.detailed-item-text .text{margin-top:0;margin-bottom:0}.label-value{flex-wrap:wrap}.label-value .rectangle{flex-basis:calc(50% - 2 * var(--comp-loading-skeleton-horizontal-gap))}@keyframes skeletonShimmer{0%{left:-100px;opacity:1}70%{opacity:1}100%{left:800px;opacity:0}}";const h=class{constructor(o){t(this,o);this.halfCircleSpinner=()=>r("div",{class:"q2-loading-animation half-circle-spinner","aria-label":this.localizedLabel},r("div",{class:"circle circle-1"}),r("div",{class:"circle circle-2"}));this.spinner=()=>this.halfCircleSpinner();this.skeletonLoader=()=>r("div",{class:"q2-loading-skeleton","aria-label":this.localizedLabel},this.shape==="custom"?r("slot",null):this.skeletonShape,r("div",{class:"q2-loading-skeleton-shimmer"}));this.type=undefined;this.shape=undefined;this.modifiers=undefined;this.counts=undefined;this.label=undefined;this.inline=undefined;this.ariaLabel=undefined}get loader(){const t={default:this.spinner,spinner:this.spinner,skeleton:this.skeletonLoader};return t[this.type]||t.default}get modifiersSet(){if(this.type!=="skeleton"||!this.modifiers){return undefined}return new Set(this.modifiers.split("-"))}get countsArray(){if(this.type!=="skeleton"||!this.counts){return undefined}return this.counts.split("x").map(Number)}get skeletonShape(){var t,r;return(r=(t=d[this.shape])===null||t===void 0?void 0:t.call(d,this.countsArray,this.modifiersSet))!==null&&r!==void 0?r:""}get spinnerShape(){const t={default:this.halfCircleSpinner,"half-circle":this.halfCircleSpinner};return t[this.type]||t.default}get localizedLabel(){return c(this.label||"tecton.element.loading.ariaLabel")}componentWillLoad(){a(this)}ariaLabelObserver(){a(this)}render(){return this.loader()}get hostElement(){return o(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};h.style=b;export{l as q2_btn,h as q2_loading};
-//# sourceMappingURL=p-c74e8aaa.entry.js.map

package/dist/q2-tecton-elements/p-c74e8aaa.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","Q2Btn","this","handleSlotChange","handleIcons","componentWillLoad","handleAriaLabel","handleColor","componentDidLoad","overrideFocus","hostElement","disable","ev","disabled","stopImmediatePropagation","delegateFocus","event","isEventFromElement","shadowRoot","querySelector","focus","ariaLabelObserver","icon","Array","from","querySelectorAll","reduce","acc","element","remove","hasIcon","hasLoc","hasText","textContent","trim","hasIconLeft","firstElementChild","hasIconRight","lastElementChild","hasIconOnly","iconPosition","render","ariaExpanded","ariaHasPopup","ariaSelected","ariaPressed","type","tabindex","buttonAttributes","loading","badge","label","hideLabel","renderLoadingSpinner","isLoadingSpinnerInline","h","loc","class","hidden","modifiers","undefined","onSlotchange","_a","toString","_b","ariaLabel","_c","_d","tabIndex","Q2Loading","halfCircleSpinner","localizedLabel","spinner","skeletonLoader","shape","skeletonShape","loader","loaderMap","default","skeleton","modifiersSet","Set","split","countsArray","counts","map","Number","skeletonShapes","call","shapes","spinnerShape","spinnerMap"],"sources":["./src/components/q2-btn/styles.scss?tag=q2-btn&encapsulation=shadow","./src/components/q2-btn/index.tsx","./src/components/q2-loading/styles.scss?tag=q2-loading&encapsulation=shadow","./src/components/q2-loading/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n:host([block]) {\n    display: block;\n    width: 100%;\n}\n\n::slotted(q2-icon) {\n    pointer-events: none;\n}\n\n:host {\n    --comp-btn-primary-background: #{var-list(--tct-btn-primary-background, var-prefixer(btn-primary-bg), #2e2e2e)};\n    --comp-btn-primary-font-color: #{var-list(var-prefixer(btn-primary-font-color), --tct-white, --app-white, #ffffff)};\n    --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n    --comp-btn-fallback-hover-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23);\n    --comp-btn-neutral-fallback-hover-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.36);\n    --comp-btn-primary-box-shadow: #{var-list(var-prefixer(btn-primary-box-shadow), --comp-btn-fallback-box-shadow)};\n    --comp-btn-primary-hover-box-shadow: #{var-list(\n            var-prefixer(btn-primary-hover-box-shadow),\n            --comp-btn-fallback-hover-box-shadow\n        )};\n    --comp-btn-secondary-background: #{var-list(\n            --tct-btn-secondary-background,\n            --tct-btn-secondary-bg,\n            --t-button-default-bg,\n            #cccccc\n        )};\n    --comp-btn-secondary-font-color: #{var-list(\n            var-prefixer(btn-secondary-font-color),\n            --t-button-default-font-color,\n            #2e2e2e\n        )};\n    --comp-btn-secondary-box-shadow: #{var-list(var-prefixer(btn-secondary-box-shadow), --comp-btn-fallback-box-shadow)};\n    --comp-btn-secondary-hover-box-shadow: #{var-list(\n            var-prefixer(btn-secondary-hover-box-shadow),\n            --comp-btn-fallback-hover-box-shadow\n        )};\n    --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-btn-neutral-background: #{var-list(--tct-btn-neutral-background, --tct-btn-neutral-bg, transparent)};\n    --comp-btn-neutral-font-color: #{var-list(\n            var-prefixer(btn-neutral-font-color),\n            --t-button-default-font-color,\n            #2e2e2e\n        )};\n    --comp-btn-neutral-box-shadow: #{var-list(var-prefixer(btn-neutral-box-shadow), --comp-btn-fallback-box-shadow)};\n    --comp-btn-neutral-hover-box-shadow: #{var-list(\n            var-prefixer(btn-neutral-hover-box-shadow),\n            --comp-btn-neutral-fallback-hover-box-shadow\n        )};\n}\n\nbutton {\n    margin: var-list(--tct-scale-0, --app-scale-0x, 0);\n    padding: var-list(--tct-scale-0, --app-scale-0x, 0);\n    display: inline-block;\n    width: 100%;\n    hyphens: auto;\n    border: var(--tct-btn-border, 0);\n    border-radius: var(--tct-btn-border-radius);\n    background: transparent;\n    box-shadow: none;\n    border-radius: 0;\n    font-weight: 400;\n    color: inherit;\n    cursor: pointer;\n    transition: var(--comp-btn-tween);\n    transition-property: background, color, box-shadow, fill, border-color, border-width;\n    outline: 0;\n    &:disabled {\n        opacity: var-list(var-prefixer(btn-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n\n    // Sizes\n    :host([size='1']) & {\n        padding: var-list(--tct-scale-1, --app-scale-1x, 5px);\n    }\n\n    :host([color]:not([size])) &,\n    :host([intent]:not([size])) & {\n        padding: var-list(var-prefixer(btn-padding), --tct-scale-2, --app-scale-2x, 10px);\n    }\n\n    :host([size='2']) & {\n        padding: var-list(--tct-scale-2, --app-scale-2x, 10px);\n    }\n\n    :host([size='3']) & {\n        padding: var-list(--tct-scale-3, --app-scale-3x, 15px);\n    }\n\n    :host([size='4x']) & {\n        padding: var-list(--tct-scale-4x, --app-scale-4x, 20px);\n    }\n\n    :host([size='4']) & {\n        padding: var-list(--tct-scale-6x, --app-scale-6x, 30px);\n    }\n\n    // Colors\n    :host([color]) &,\n    :host([intent]) & {\n        border-style: solid;\n        font-size: var-list(var-prefixer(btn-font-size), inherit);\n    }\n\n    :host([color='primary']) &,\n    :host([intent='workflow-primary']) & {\n        --comp-btn-primary-border: #{var-list(var-prefixer(btn-primary-border-width), 0)\n            var-list(var-prefixer(btn-primary-border-color), transparent)\n            var-list(var-prefixer(btn-primary-border-style), solid)};\n        border: var-list(--tct-btn-primary-border, --comp-btn-primary-border);\n        background: var-list(--comp-btn-primary-background);\n        color: var-list(--comp-btn-primary-font-color);\n        border-radius: var-list(\n            var-prefixer(btn-primary-border-radius),\n            --tct-btn-border-radius,\n            --tct-border-radius-1,\n            --app-border-radius-1,\n            3px\n        );\n        box-shadow: var-list(--comp-btn-primary-box-shadow);\n        font-weight: var-list(var-prefixer(btn-primary-font-weight), 600);\n        text-transform: var-list(var-prefixer(btn-primary-text-transform), none);\n        letter-spacing: var-list(var-prefixer(btn-primary-letter-spacing), normal);\n\n        &:enabled:hover,\n        &:enabled:focus,\n        &:enabled:active {\n            background: var-list(\n                --tct-btn-primary-hover-background,\n                var-prefixer(btn-primary-hover-bg),\n                var-prefixer(gray-5),\n                --tct-gray-d2,\n                --app-gray-d2,\n                #404040\n            );\n            color: var-list(var-prefixer(btn-primary-hover-font-color), --tct-white, --app-white, #ffffff);\n            border-color: var-list(\n                var-prefixer(btn-primary-hover-border-color),\n                var-prefixer(btn-primary-border-color),\n                transparent\n            );\n        }\n\n        &:hover:enabled,\n        &:active:enabled {\n            box-shadow: var-list(--comp-btn-primary-hover-box-shadow);\n        }\n\n        &:focus {\n            &,\n            &:hover:enabled,\n            &:active:enabled {\n                box-shadow: var(--const-double-focus-ring), var(--comp-btn-primary-hover-box-shadow);\n            }\n        }\n\n        &:disabled {\n            background: var-list(\n                --tct-btn-primary-disabled-background,\n                var-prefixer(btn-primary-disabled-bg),\n                --comp-btn-primary-background\n            );\n            color: var-list(var-prefixer(btn-primary-disabled-font-color), --comp-btn-primary-font-color);\n            box-shadow: var-list(var-prefixer(btn-primary-disabled-box-shadow), --comp-btn-primary-box-shadow);\n        }\n    }\n\n    :host([color='secondary']) &,\n    :host([intent='workflow-secondary']) & {\n        --comp-btn-secondary-border: #{var-list(var-prefixer(btn-secondary-border-width), 0)\n            var-list(var-prefixer(btn-secondary-border-color), transparent)\n            var-list(var-prefixer(btn-secondary-border-style), solid)};\n        border: var-list(--tct-btn-secondary-border, --comp-btn-secondary-border);\n        background: var(--comp-btn-secondary-background);\n        color: var-list(\n            --comp-btn-secondary-font-color,\n            var-prefixer(btn-secondary-font-color),\n            --tct-white,\n            --app-white,\n            #ffffff\n        );\n        border-radius: var-list(\n            var-prefixer(btn-secondary-border-radius),\n            --tct-btn-border-radius,\n            --tct-border-radius-1,\n            --app-border-radius-1,\n            3px\n        );\n        box-shadow: var(--comp-btn-secondary-box-shadow);\n        font-weight: var-list(var-prefixer(btn-secondary-font-weight), 600);\n        text-transform: var-list(var-prefixer(btn-secondary-text-transform), none);\n        letter-spacing: var-list(var-prefixer(btn-secondary-letter-spacing), normal);\n\n        &:enabled:hover,\n        &:enabled:focus,\n        &:enabled:active {\n            background: var-list(\n                --tct-btn-secondary-hover-background,\n                var-prefixer(btn-secondary-hover-bg),\n                var-prefixer(gray-5),\n                --tct-gray-d2,\n                --app-gray-d2,\n                #404040\n            );\n            color: var-list(\n                var-prefixer(btn-secondary-hover-font-color),\n                --t-button-default-hover-font-color,\n                --tct-white,\n                --app-white,\n                #ffffff\n            );\n            border-color: var-list(\n                var-prefixer(btn-secondary-hover-border-color),\n                var-prefixer(btn-secondary-border-color),\n                transparent\n            );\n        }\n\n        &:hover:enabled,\n        &:active:enabled {\n            box-shadow: var(--comp-btn-secondary-hover-box-shadow);\n        }\n\n        &:focus {\n            &,\n            &:hover:enabled,\n            &:active:enabled {\n                box-shadow: var(--const-double-focus-ring), var(--comp-btn-secondary-hover-box-shadow);\n            }\n        }\n\n        &:disabled {\n            background: var-list(\n                --tct-btn-secondary-disabled-background,\n                var-prefixer(btn-secondary-disabled-bg),\n                --comp-btn-primary-background\n            );\n            color: var-list(var-prefixer(btn-secondary-disabled-font-color), --comp-btn-secondary-font-color);\n            box-shadow: var-list(var-prefixer(btn-secondary-disabled-box-shadow), --comp-btn-secondary-box-shadow);\n        }\n    }\n\n    :host([intent='neutral']) & {\n        --comp-btn-neutral-border: #{var-list(var-prefixer(btn-neutral-border-width), 0)\n            var-list(var-prefixer(btn-neutral-border-color), transparent)\n            var-list(var-prefixer(btn-neutral-border-style), solid)};\n        border: var-list(--tct-btn-neutral-border, --comp-btn-neutral-border);\n        background: var-list(--comp-btn-neutral-background, transparent);\n        color: var-list(\n            --comp-btn-neutral-font-color,\n            var-prefixer(btn-neutral-font-color),\n            var-prefixer(gray-1),\n            --tct-black,\n            --app-black,\n            #0d0d0d\n        );\n        border-radius: var-list(\n            var-prefixer(btn-neutral-border-radius),\n            --tct-btn-border-radius,\n            --tct-border-radius-1,\n            --app-border-radius-1,\n            3px\n        );\n        box-shadow: var(--comp-btn-neutral-box-shadow);\n        font-weight: var-list(var-prefixer(btn-neutral-font-weight), 600);\n        text-transform: var-list(var-prefixer(btn-neutral-text-transform), none);\n        letter-spacing: var-list(var-prefixer(btn-neutral-letter-spacing), normal);\n\n        &:enabled:hover,\n        &:enabled:focus,\n        &:enabled:active {\n            background: var-list(--tct-btn-neutral-hover-background, var-prefixer(btn-neutral-hover-bg), transparent);\n            color: var-list(var-prefixer(btn-neutral-hover-font-color), --tct-white, --app-white, #ffffff);\n            border-color: var-list(\n                var-prefixer(btn-neutral-hover-border-color),\n                var-prefixer(btn-neutral-border-color),\n                transparent\n            );\n        }\n\n        &:hover:enabled,\n        &:active:enabled {\n            box-shadow: var(--comp-btn-neutral-hover-box-shadow);\n        }\n\n        &:focus {\n            &,\n            &:hover:enabled,\n            &:active:enabled {\n                box-shadow: var(--const-double-focus-ring), var(--comp-btn-neutral-hover-box-shadow);\n            }\n        }\n\n        &:disabled {\n            background: var-list(\n                --tct-btn-neutral-disabled-background,\n                var-prefixer(btn-neutral-disabled-bg),\n                --comp-btn-neutral-background\n            );\n            color: var-list(var-prefixer(btn-neutral-disabled-font-color), --comp-btn-neutral-font-color);\n            box-shadow: var-list(\n                var-prefixer(btn-neutral-disabled-box-shadow),\n                --tct-btn-neutral-disabled-box-shadow,\n                --comp-btn-neutral-box-shadow\n            );\n        }\n    }\n\n    // Icons\n    :host &.icon-only {\n        width: var-list(var-prefixer(btn-icon-width), 44px);\n        height: var-list(var-prefixer(btn-icon-height), 44px);\n        border-radius: var-list(var-prefixer(btn-icon-border-radius), --tct-btn-border-radius, 0);\n\n        &:hover,\n        &:focus {\n            background-color: var-list(\n                --tct-btn-icon-hover-background,\n                var-prefixer(btn-icon-hover-bg),\n                var-prefixer(gray-13),\n                --tct-gray-l3,\n                --app-gray-l3,\n                #f2f2f2\n            );\n        }\n    }\n\n    :host(:not([intent])[active]) &.icon-only {\n        background-color: var-list(\n            --tct-btn-icon-active-background,\n            var-prefixer(btn-icon-active-bg),\n            var-prefixer(gray-14),\n            --tct-gray-l3,\n            --app-gray-l3,\n            #f2f2f2\n        );\n    }\n\n    :host(:not([intent])) &.icon-only:hover *,\n    :host(:not([intent])) &.icon-only:focus *,\n    :host(:not([intent])[active]) &.icon-only * {\n        color: var-list(var-prefixer(btn-icon-hover-color), var-prefixer(link-hover-color), #080808);\n    }\n\n    // Badges\n    :host([badge]) & {\n        padding: var-list(var-prefixer(btn-badge-padding), unquote('2px 5px'));\n        font-size: var-list(var-prefixer(btn-badge-font-size), var-prefixer(btn-font-size), inherit);\n        border-radius: var-list(\n            var-prefixer(btn-badge-border-radius),\n            --tct-border-radius-1,\n            --app-border-radius-1,\n            3px\n        );\n        background-color: var-list(--tct-btn-badge-background, var-prefixer(btn-badge-bg), transparent);\n        color: var-list(var-prefixer(btn-badge-font-color), inherit);\n\n        ::slotted(q2-icon) {\n            --tct-icon-size: 1em;\n        }\n    }\n\n    :host([badge]:hover) &:enabled {\n        background-color: var-list(\n            --tct-btn-badge-hover-background,\n            var-prefixer(btn-badge-hover-bg),\n            var-prefixer(gray-14),\n            --tct-gray-l3,\n            --app-gray-l3,\n            #f2f2f2\n        );\n        color: var-list(\n            var-prefixer(btn-badge-hover-font-color),\n            var-prefixer(gray-5),\n            --tct-gray-d2,\n            --app-gray-d2,\n            #404040\n        );\n    }\n\n    :host(.selected[badge]) &,\n    :host([active][badge]) & {\n        background-color: var-list(\n            --tct-btn-badge-active-background,\n            var-prefixer(btn-badge-active-bg),\n            --comp-btn-primary-background\n        );\n        color: var-list(var-prefixer(btn-badge-active-font-color), --comp-btn-primary-font-color);\n    }\n}\n\n// Allow for custom icon colors based on intent\n:host([color='primary']),\n:host([intent='workflow-primary']) {\n    & ::slotted(q2-icon) {\n        color: var-list(var-prefixer(btn-primary-icon-color), --comp-btn-primary-font-color, red);\n    }\n}\n\n:host([color='secondary']),\n:host([intent='workflow-secondary']) {\n    & ::slotted(q2-icon) {\n        color: var-list(var-prefixer(btn-secondary-icon-color), --comp-btn-secondary-font-color, red);\n    }\n}\n\n:host([intent='neutral']) {\n    & ::slotted(q2-icon) {\n        color: var-list(var-prefixer(btn-neutral-icon-color), --comp-btn-neutral-font-color, red);\n    }\n}\n\ndiv {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var-list(--app-scale-1x, 5px);\n\n    :host([loading]) .icon-right & {\n        flex-direction: row-reverse;\n    }\n}\n\nq2-loading {\n    --tct-loading-primary-color: currentColor;\n    --tct-loading-secondary-color: currentColor;\n    --tct-loading-spinner-size: 24px;\n}\n\n:host([loading]) ::slotted(q2-icon) {\n    display: none;\n}\n:host([loading]) button {\n    pointer-events: none;\n}\n\n:host([block]) button,\n:host([block]) button.icon-only {\n    display: block;\n    width: 100%;\n}\n","import { Component, State, Prop, h, ComponentInterface, Watch, Listen, Element } from '@stencil/core';\nimport { handleAriaLabel, handleColor, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-btn',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Btn implements ComponentInterface {\n    @Prop() ariaExpanded: string;\n    @Prop() ariaHasPopup: string;\n    @Prop() ariaControls: string;\n    @Prop() ariaSelected: string;\n    @Prop() ariaPressed: string;\n    @Prop({ reflect: true, mutable: true }) label: string;\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n    @Prop() tabIndex: number;\n    @Prop({ reflect: true, mutable: true }) intent: 'workflow-primary' | 'workflow-secondary' | 'neutral';\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true }) type: string;\n    @Prop({ reflect: true }) loading: boolean;\n    @Prop({ reflect: true }) badge: boolean;\n    @Prop({ reflect: true }) active: boolean;\n    @Prop({ reflect: true }) block: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) color: string; // deprecated but need it to use utils/handleColor\n\n    /** @deprecated */\n    @Prop({ reflect: true }) fab: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @State() iconPosition: 'left' | 'right' | 'only';\n\n    @Element() hostElement: HTMLElement;\n    ////////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        this.handleIcons();\n        handleAriaLabel(this);\n        handleColor(this);\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    @Listen('click', { capture: true })\n    disable(ev: Event) {\n        if (this.disabled) {\n            ev.stopImmediatePropagation();\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector('button').focus();\n    }\n\n    //////// Method //////////\n\n    ////////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    handleSlotChange = () => {\n        this.handleIcons();\n    };\n\n    handleIcons() {\n        // Only allow one icon in the button\n        const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {\n            if (acc) element.remove();\n            else acc = element;\n            return acc;\n        }, null);\n\n        const hasIcon = !!icon;\n        const hasLoc = !!this.hostElement.querySelector('q2-loc');\n        const hasText = !!this.hostElement.textContent.trim();\n        const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;\n        const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;\n        const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;\n\n        let iconPosition;\n        if (hasIconOnly) iconPosition = 'only';\n        else if (hasIconLeft) iconPosition = 'left';\n        else if (hasIconRight) iconPosition = 'right';\n        this.iconPosition = iconPosition;\n    }\n\n    render() {\n        const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, disabled, type, tabindex } =\n            this.buttonAttributes;\n        const { iconPosition, loading, badge, label, hideLabel } = this;\n        const renderLoadingSpinner = iconPosition || loading;\n        const isLoadingSpinnerInline = !iconPosition || badge;\n\n        return (\n            <button\n                aria-expanded={ariaExpanded}\n                aria-haspopup={ariaHasPopup}\n                aria-label={hideLabel && loc(label)}\n                aria-selected={ariaSelected}\n                aria-pressed={ariaPressed}\n                disabled={disabled}\n                type={type}\n                tabindex={tabindex}\n                test-id=\"q2BtnInnerButton\"\n                class={iconPosition ? `icon-${iconPosition}` : ''}\n            >\n                <div>\n                    {renderLoadingSpinner && (\n                        <q2-loading\n                            hidden={!loading}\n                            modifiers={isLoadingSpinnerInline ? 'inline' : undefined}\n                        />\n                    )}\n                    {!hideLabel && label ? loc(label) : <slot onSlotchange={this.handleSlotChange} />}\n                </div>\n            </button>\n        );\n    }\n\n    get buttonAttributes() {\n        return {\n            ariaExpanded: this.ariaExpanded !== undefined ? `${this.ariaExpanded?.toString() === 'true'}` : undefined,\n            ariaHasPopup: this.ariaHasPopup !== undefined ? `${this.ariaHasPopup?.toString() === 'true'}` : undefined,\n            ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,\n            ariaSelected: this.ariaSelected !== undefined ? `${this.ariaSelected?.toString() === 'true'}` : undefined,\n            ariaPressed: this.ariaPressed !== undefined ? `${this.ariaPressed?.toString() === 'true'}` : undefined,\n            disabled: this.disabled || false,\n            type: this.type || 'button',\n            tabindex: this.tabIndex || undefined,\n        };\n    }\n}\n","@import '../../styles/host.scss';\n@import '../../styles/utility.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n:host([inline]),\n:host([modifiers*='inline']) {\n    display: inline-block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n:host(:not([inline]):not([modifiers*='inline'])) {\n    font-size: var-list(var-prefixer(loading-spinner-size), --app-scale-12x, 60px);\n}\n\n.q2-loading-animation {\n    height: 1em;\n    width: 1em;\n}\n\n@import './spinners/half-circle-spinner.scss';\n@import './skeleton/skeleton.scss';\n","import { Component, Prop, h, ComponentInterface, Element, Watch } from '@stencil/core';\nimport { handleAriaLabel, loc } from 'src/utils';\nimport skeletonShapes from './skeleton/shapes';\n\n@Component({\n    tag: 'q2-loading',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Loading implements ComponentInterface {\n    @Element() hostElement: HTMLElement;\n\n    @Prop({ reflect: true }) type: 'spinner' | 'skeleton';\n    @Prop({ reflect: true }) shape: string;\n    @Prop({ reflect: true }) modifiers: string;\n    @Prop({ reflect: true }) counts: string;\n    @Prop({ reflect: true, mutable: true }) label: string;\n    @Prop({ reflect: true }) inline: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    get loader() {\n        const loaderMap = {\n            default: this.spinner,\n            spinner: this.spinner,\n            skeleton: this.skeletonLoader,\n        };\n\n        return loaderMap[this.type] || loaderMap.default;\n    }\n\n    get modifiersSet(): Set<string> {\n        if (this.type !== 'skeleton' || !this.modifiers) {\n            return undefined;\n        }\n\n        return new Set(this.modifiers.split('-'));\n    }\n\n    get countsArray(): number[] {\n        if (this.type !== 'skeleton' || !this.counts) {\n            return undefined;\n        }\n\n        return this.counts.split('x').map(Number);\n    }\n\n    get skeletonShape() {\n        return skeletonShapes[this.shape]?.(this.countsArray, this.modifiersSet) ?? '';\n    }\n\n    get spinnerShape() {\n        const spinnerMap = {\n            default: this.halfCircleSpinner,\n            'half-circle': this.halfCircleSpinner,\n        };\n\n        return spinnerMap[this.type] || spinnerMap.default;\n    }\n\n    get localizedLabel() {\n        return loc(this.label || 'tecton.element.loading.ariaLabel');\n    }\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    render() {\n        return this.loader();\n    }\n\n    halfCircleSpinner = () => {\n        return (\n            <div\n                class=\"q2-loading-animation half-circle-spinner\"\n                aria-label={this.localizedLabel}\n            >\n                <div class=\"circle circle-1\"></div>\n                <div class=\"circle circle-2\"></div>\n            </div>\n        );\n    };\n\n    spinner = () => {\n        return this.halfCircleSpinner();\n    };\n\n    skeletonLoader = () => {\n        return (\n            <div\n                class=\"q2-loading-skeleton\"\n                aria-label={this.localizedLabel}\n            >\n                {this.shape === 'custom' ? <slot /> : this.skeletonShape}\n                <div class=\"q2-loading-skeleton-shimmer\"></div>\n            </div>\n        );\n    };\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-d50df20d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ClickElsewhere","constructor","hostRef","this","mouseEventList","isCurrentlyFocused","mouseHandler","event","shadowContains","findActiveElement","aboutToBeFocused","shadowEventTarget","originatesInSlots","target","change","emit","windowBlurHandler","activeElement","document","body","tagName","componentWillLoad","connectedCallback","forEach","eventName","addEventListener","window","disconnectedCallback","removeEventListener","workingElement","shadowRoot","composedPath","child","hostElement","parentNode","host","slots","querySelectorAll","currentSlot","Array","from","lightNodes","assignedNodes","childNodes","currentNode","contains","stylesCss","Q2Popover","scheduledAfterRender","viewPortChanged","open","determinePopDirection","undefined","componentDidLoad","componentDidRender","setTimeout","fn","removeViewportListeners","async","options","containerElement","scrollTo","openChanged","popoverStateChanged","push","resizeIframe","addViewportListeners","currentDirection","style","removeProperty","show","popoverStateHandler","detail","stopPropagation","visualViewport","direction","determinePopOffset","contentElement","controlElement","maxHeight","currentOrStatedDirection","setProperty","waitForNextPaint","top","topOffset","height","_a","getBoundingClientRect","contentHeight","clientHeight","scrollY","_c","_b","Tecton","platformDimensions","_d","offsetTop","outletOffset","_f","_e","innerHeight","_h","_g","_j","bottomOffset","canShowFullSizeBelow","canShowFullSizeAbove","determinedDirection","setDirectionAndShow","minHeight","displayBuffer","canShowMinHeightBelow","Math","max","dropdownHeight","render","containerClasses","h","ref","el","class","join"],"sources":["./src/components/click-elsewhere/index.tsx","./src/components/q2-popover/styles.scss?tag=q2-popover&encapsulation=shadow","./src/components/q2-popover/index.tsx"],"sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n    tag: 'click-elsewhere',\n    shadow: false,\n})\nexport class ClickElsewhere implements ComponentInterface {\n    /**\n     * Listens for mouse and window events that happen outside this click-elsewhere element so we can close popovers when users click outside them\n     */\n    mouseEventList: string[] = ['mousedown', 'dragstart', 'touchstart'];\n    isCurrentlyFocused: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n    @Event() change: EventEmitter;\n\n    /* TODO: Stencil/Rollup is having issues compiling without this here. Will try to remove in future Stencil upgrade. */\n    /* tslint:disable:no-empty */\n    componentWillLoad() {}\n    /* tslint:enable:no-empty */\n\n    connectedCallback() {\n        this.mouseEventList.forEach((eventName: string) => {\n            document.addEventListener(eventName, this.mouseHandler);\n        });\n        window.addEventListener('blur', this.windowBlurHandler);\n    }\n\n    disconnectedCallback() {\n        this.mouseEventList.forEach((eventName: string) => {\n            document.removeEventListener(eventName, this.mouseHandler);\n        });\n        window.removeEventListener('blur', this.windowBlurHandler);\n    }\n\n    findActiveElement(): Element | null {\n        let workingElement = document.activeElement!;\n        while (true) {\n            if (!workingElement || !workingElement.shadowRoot) {\n                return workingElement;\n            }\n            workingElement = workingElement.shadowRoot.activeElement;\n        }\n    }\n\n    shadowEventTarget(event: any): Element {\n        return event.composedPath()[0] || event.target;\n    }\n\n    shadowContains(child: any): boolean {\n        /**\n         * shadow-dom enabled version of Node.contains()\n         */\n\n        while (true) {\n            if (child === this.hostElement) {\n                return true;\n            }\n            if (!child) {\n                return false;\n            }\n\n            child = child.parentNode || child.host;\n        }\n    }\n\n    originatesInSlots(target: Element): boolean {\n        const slots = this.hostElement.querySelectorAll('slot');\n\n        for (const currentSlot of Array.from(slots)) {\n            const lightNodes =\n                (currentSlot && currentSlot.assignedNodes && currentSlot.assignedNodes()) ||\n                this.hostElement.childNodes;\n\n            for (const currentNode of Array.from(lightNodes)) {\n                if (currentNode.contains(target)) {\n                    return true;\n                }\n            }\n        }\n\n        return false;\n    }\n\n    mouseHandler = (event: Event): void => {\n        const isCurrentlyFocused = this.shadowContains(this.findActiveElement());\n        const aboutToBeFocused =\n            this.shadowContains(this.shadowEventTarget(event)) || this.originatesInSlots(event.target as Element);\n\n        if (!aboutToBeFocused && (this.isCurrentlyFocused || isCurrentlyFocused)) {\n            this.isCurrentlyFocused = false;\n            this.change.emit();\n            return;\n        }\n        this.isCurrentlyFocused = aboutToBeFocused || isCurrentlyFocused;\n    };\n\n    windowBlurHandler = (): void => {\n        const activeElement = this.findActiveElement();\n        if (\n            (activeElement === document.body && this.isCurrentlyFocused) || // clicked parent frame\n            (activeElement !== document.body && activeElement?.tagName === 'IFRAME') // clicked child frame\n        ) {\n            this.isCurrentlyFocused = false;\n            this.change.emit();\n            return;\n        }\n    };\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    width: 100%;\n}\n\n:host([align='right']) {\n    display: block;\n    position: absolute;\n    right: 0;\n    text-align: end;\n    left: unset;\n}\n\n.container {\n    display: none;\n    overflow: hidden;\n    opacity: 0;\n    height: 0;\n    position: absolute;\n    top: var-list(var-prefixer(popover-top), initial);\n    visibility: hidden;\n    background: var-list(--tct-popover-background, var-prefixer(popover-background-color), --app-white, #ffffff);\n    color: var-list(var-prefixer(popover-text-color), --t-text, #4d4d4d);\n    z-index: var-list(var-prefixer(popover-z-index), 100);\n    width: max-content;\n    min-width: var-list(var-prefixer(popover-min-width), 135px);\n    box-shadow: var-list(var-prefixer(popover-box-shadow), --app-shadow-1, unquote('0 2px 4px rgba(0, 0, 0, 0.3)'));\n    text-align: start;\n    left: 0;\n    border-radius: var-list(var-prefixer(popover-border-radius), 0);\n\n    // --comp-pop-max-height is set via JS\n    max-height: var(--comp-pop-max-height);\n\n    @include tiny-scrollbar();\n\n    :host([block]) & {\n        left: unset;\n        right: unset;\n        width: 100%;\n        min-width: var-list(var-prefixer(popover-min-width), unset);\n    }\n\n    :host([align='right']) & {\n        right: 0;\n        text-align: end;\n        left: unset;\n    }\n    :host([open]) {\n        display: block;\n    }\n\n    :host([open]) &.show {\n        height: auto;\n        overflow: auto;\n        opacity: 1;\n        visibility: visible;\n    }\n\n    &.up {\n        bottom: var(--comp-pop-offset);\n    }\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n\n.content {\n    height: auto;\n}\n","import {\n    Component,\n    Prop,\n    h,\n    ComponentInterface,\n    Element,\n    Watch,\n    Method,\n    Listen,\n    EventEmitter,\n    Event,\n    State,\n} from '@stencil/core';\nimport { resizeIframe, waitForNextPaint } from '../../utils';\n\n@Component({\n    tag: 'q2-popover',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Popover implements ComponentInterface {\n    @Prop({ reflect: true }) direction: 'up' | 'down';\n    @Prop({ reflect: true }) align: 'left' | 'right';\n    @Prop({ reflect: true, mutable: true }) open: boolean;\n    @Prop({ reflect: true }) block: boolean;\n    @Prop() minHeight: number;\n    @Prop() controlElement: HTMLElement;\n\n    @Element() hostElement: HTMLElement;\n    @Event() popoverStateChanged: EventEmitter<{ open: boolean }>;\n\n    @State() currentDirection: 'down' | 'up' = undefined;\n    @State() show: boolean = false;\n    containerElement: HTMLDivElement;\n    contentElement: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    /// Lifecycle hooks ///\n    componentDidLoad() {\n        if (this.open) this.determinePopDirection();\n    }\n\n    componentDidRender() {\n        setTimeout(() => {\n            this.scheduledAfterRender.forEach(fn => fn());\n            this.scheduledAfterRender = [];\n        }, 25);\n    }\n\n    disconnectedCallback() {\n        this.removeViewportListeners();\n    }\n\n    /// Methods ///\n    @Method()\n    async toggle() {\n        this.open = !this.open;\n    }\n\n    @Method()\n    async scrollContainerTo(options: ScrollToOptions) {\n        this.containerElement.scrollTo(options);\n    }\n\n    /// Watchers ///\n    @Watch('open')\n    openChanged(open) {\n        this.popoverStateChanged.emit({ open });\n        this.scheduledAfterRender.push(resizeIframe);\n        if (open) {\n            this.addViewportListeners();\n            this.determinePopDirection();\n        } else {\n            this.removeViewportListeners();\n            this.currentDirection = undefined;\n            this.containerElement.style.removeProperty('display');\n            this.containerElement.style.removeProperty('--comp-pop-max-height');\n            this.show = false;\n        }\n    }\n\n    /// Listeners ///\n    @Listen('popoverState')\n    popoverStateHandler(event: CustomEvent<{ open: boolean }>) {\n        const {\n            detail: { open },\n        } = event;\n        if (open === this.open) return;\n\n        this.open = open;\n        event.stopPropagation();\n    }\n\n    /// Helpers ///\n    viewPortChanged = () => {\n        if (!this.open) return;\n        this.determinePopDirection();\n    };\n\n    addViewportListeners() {\n        // window.visualViewport.addEventListener('scroll', this.viewPortChanged);\n        window.visualViewport.addEventListener('resize', this.viewPortChanged);\n    }\n\n    removeViewportListeners() {\n        // window.visualViewport.removeEventListener('scroll', this.viewPortChanged);\n        window.visualViewport.removeEventListener('resize', this.viewPortChanged);\n    }\n\n    async setDirectionAndShow(direction: 'up' | 'down') {\n        if (direction === 'up') {\n            this.determinePopOffset();\n        }\n\n        this.currentDirection = direction;\n        this.show = true;\n    }\n\n    async determinePopDirection() {\n        const { containerElement, contentElement, direction, controlElement, currentDirection } = this;\n        if (containerElement) containerElement.style.maxHeight = null;\n\n        // If the direction is already set then use it, otherwise use the current direction\n        const currentOrStatedDirection = direction ?? currentDirection;\n\n        // Set the container to block so we can get the height\n        containerElement.style.setProperty('display', 'block');\n        await waitForNextPaint();\n\n        // Determine the dimensions of the control element\n        const { top: topOffset, height } = controlElement?.getBoundingClientRect() ?? {\n            top: 0,\n            height: 0,\n        };\n\n        const contentHeight = contentElement.clientHeight;\n        const scrollY =\n            window.Tecton?.platformDimensions?.scrollY ||\n            window.visualViewport?.offsetTop || // Only Android Chrome provides this which we need when scrolled\n            0;\n        const outletOffset = scrollY + (window.Tecton?.platformDimensions?.outletOffset || 0);\n        const innerHeight =\n            window.Tecton?.platformDimensions?.innerHeight || window.visualViewport?.height || window.innerHeight;\n        const bottomOffset = scrollY + innerHeight - topOffset - height - outletOffset;\n        const canShowFullSizeBelow = bottomOffset > contentHeight;\n        const canShowFullSizeAbove = contentHeight <= topOffset;\n        let determinedDirection: 'up' | 'down';\n\n        // Show the full-size popover below or above if it will fit\n        if (currentOrStatedDirection === 'down' && canShowFullSizeBelow) return this.setDirectionAndShow('down');\n        else if (currentOrStatedDirection === 'up' && canShowFullSizeAbove) return this.setDirectionAndShow('up');\n        else if (currentOrStatedDirection === undefined && canShowFullSizeBelow) determinedDirection = 'down';\n        else if (currentOrStatedDirection === undefined && canShowFullSizeAbove) determinedDirection = 'up';\n\n        if (determinedDirection) return this.setDirectionAndShow(determinedDirection);\n\n        // If full size will not fit then make it as tall as possible\n        const { minHeight = 150 } = this;\n        const displayBuffer = 5;\n        const canShowMinHeightBelow = bottomOffset >= minHeight + displayBuffer;\n\n        let maxHeight;\n        if (currentOrStatedDirection === 'down') {\n            maxHeight = Math.max(bottomOffset - displayBuffer, minHeight);\n            determinedDirection = 'down';\n        } else if (currentOrStatedDirection === 'up') {\n            maxHeight = Math.max(topOffset - displayBuffer, minHeight);\n            determinedDirection = 'up';\n        } else if (canShowMinHeightBelow) {\n            maxHeight = Math.max(bottomOffset - displayBuffer, minHeight);\n            determinedDirection = 'down';\n        } else {\n            maxHeight = Math.max(topOffset - scrollY - displayBuffer, minHeight);\n            determinedDirection = 'up';\n        }\n        containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);\n        return this.setDirectionAndShow(determinedDirection);\n    }\n\n    determinePopOffset() {\n        const { controlElement, containerElement } = this;\n        const dropdownHeight = controlElement?.getBoundingClientRect().height ?? 0;\n        containerElement.style.setProperty('--comp-pop-offset', `${dropdownHeight}px`);\n    }\n\n    /// DOM ///\n    render() {\n        const containerClasses = ['container', this.currentDirection];\n        if (this.show) containerClasses.push('show');\n\n        return (\n            <div\n                ref={el => (this.containerElement = el)}\n                class={containerClasses.join(' ')}\n                test-id=\"outerContainer\"\n            >\n                <div\n                    ref={el => (this.contentElement = el)}\n                    class=\"content\"\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-d651e8ab.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as s,g as e}from"./p-277dc8cd.js";import{k as a,o,n as r,a as i}from"./p-e6268528.js";const n="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){padding-left:var(--tct-scale-l3, var(--app-scale-3x, 15px))}:host(:not([appearance])),:host([appearance=standard]){margin:var(--tct-scale-l3, var(--app-scale-3x, 15px)) 0}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){margin:var(--tct-scale-l3, var(--app-scale-3x, 15px)) 0}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #C35500))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #C35500));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #C35500))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}";const c=class{constructor(s){t(this,s);this.type="info";this.appearance="standard";this.description=false;this.presentToggle=undefined}get isFirefox(){return a()}componentDidLoad(){o(this.hostElement)}async present(){const{isFirefox:t}=this;this.presentToggle=!this.presentToggle;if(!t)return;r((()=>{this.presentToggle=false}))}delegateFocus(t){if(!i(t,this.hostElement))return;this.hostElement.shadowRoot.querySelector(".message").focus()}render(){const{isFirefox:t}=this;const e=t&&this.presentToggle;const a=!t&&this.presentToggle;const{description:o}=this;return s("div",{tabindex:"-1",class:"message",role:o?undefined:"alert","aria-live":o?undefined:"assertive","aria-atomic":o?undefined:"true","aria-relevant":o?undefined:"all","test-id":"messageContainer"},this.appearance==="standard"?p(this.type):"",a&&s("div",{class:"sr"}),s("div",{class:"message-content","aria-hidden":e?"true":undefined},s("slot",null)))}get hostElement(){return e(this)}};function p(t){const e={success:"success",warning:"warning",danger:"error",error:"error",info:"info"};const a=e[t]||e.info;return s("q2-icon",{type:a,class:"message-icon"})}c.style=n;export{c as q2_message};
-//# sourceMappingURL=p-d651e8ab.entry.js.map

package/dist/q2-tecton-elements/p-dedcab55.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","Q2Badge","badgeText","maxValue","Math","pow","this","maxLength","value","isNaN","Number","toLocaleString","render","badgeClass","size","push","h","Fragment","class","join"],"sources":["./src/components/q2-badge/styles.scss?tag=q2-badge&encapsulation=shadow","./src/components/q2-badge/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n.badge-wrapper {\n    --comp-badge-background: #{var-list(--tct-badge-background, --t-gray8, #61c4ff)};\n    --comp-badge-color: #{var-list(--tct-badge-color, --t-base, #ffffff)};\n    --comp-badge-border-style: #{var-list(--tct-badge-border-style, solid)};\n    --comp-badge-border-color: #{var-list(--tct-badge-border-color, --t-secondary-l1, #9a9898)};\n\n    :host([status='info']) & {\n        --comp-badge-background: #{var-list(--tct-badge-info-background, --const-stoplight-info, #0079c1)};\n        --comp-badge-color: #{var-list(--tct-badge-info-color, --const-stoplight-info-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-info-border-color, --const-stoplight-info-l1, #3a9bd6)};\n    }\n\n    :host([status='alert']) & {\n        --comp-badge-background: #{var-list(--tct-badge-alert-background, --const-stoplight-alert, #c30000)};\n        --comp-badge-color: #{var-list(--tct-badge-alert-color, --const-stoplight-alert-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-alert-border-color, --const-stoplight-alert-l1, #e42929)};\n    }\n\n    :host([status='warning']) & {\n        --comp-badge-background: #{var-list(--tct-badge-warning-background, --const-stoplight-warning, #c35500)};\n        --comp-badge-color: #{var-list(--tct-badge-warning-color, --const-stoplight-warning-text, #423535)};\n        --comp-badge-border-color: #{var-list(--tct-badge-warning-border-color, --const-stoplight-warning-l1, #f9ce4c)};\n    }\n\n    :host([status='success']) & {\n        --comp-badge-background: #{var-list(--tct-badge-success-background, --const-stoplight-success, #57fc45)};\n        --comp-badge-color: #{var-list(--tct-badge-success-color, --const-stoplight-success-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-success-border-color, --const-stoplight-success-l1, #2eaa21)};\n    }\n\n    :host([theme='primary']) & {\n        --comp-badge-background: #{var-list(--tct-badge-primary-background, --t-primary, #0079c2)};\n        --comp-badge-color: #{var-list(--tct-badge-primary-color, --t-primary-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-primary-border-color, --t-primary-l1, #3a9bd6)};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-badge-background: #{var-list(--tct-badge-secondary-background, --t-secondary, #b4c2cd)};\n        --comp-badge-color: #{var-list(--tct-badge-secondary-color, --t-secondary-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-secondary-border-color, --t-secondary-l1, #c6d1db)};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-badge-background: #{var-list(--tct-badge-tertiary-background, --t-tertiary, #e9f5fc)};\n        --comp-badge-color: #{var-list(--tct-badge-tertiary-color, --t-tertiary-text, #000000)};\n        --comp-badge-border-color: #{var-list(--tct-badge-tertiary-border-color, --t-tertiary-l1, #f3f4f5)};\n    }\n}\n\n.badge {\n    font-size: var-list(--tct-badge-font-size, 10px);\n    line-height: var-list(--tct-badge-line-height, 14px);\n    height: var-list(--tct-badge-height, 16px);\n    min-width: var-list(--tct-badge-min-width, 16px);\n    text-align: center;\n    padding: var-list(--tct-badge-padding, unquote('0 4px'));\n    color: var(--comp-badge-color);\n    background: var(--comp-badge-background);\n    border-style: var(--comp-badge-border-style);\n    border-color: var(--comp-badge-border-color);\n    border-width: var-list(var-prefixer(badge-border-width), 1px);\n    border-radius: var-list(var-prefixer(badge-border-radius), 8px);\n}\n\n.badge.size-large {\n    font-size: var-list(--tct-badge-large-font-size, 14px);\n    line-height: var-list(--tct-badge-large-line-height, 20px);\n    height: var-list(--tct-badge-large-height, 22px);\n    min-width: var-list(--tct-badge-large-min-width, 22px);\n    border-radius: var-list(--tct-badge-large-border-radius, 11px);\n    padding: var-list(--tct-badge-large-padding, unquote('0 6px'));\n}\n\n.badge-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n","import { Component, Prop, h, ComponentInterface, Element, Fragment } from '@stencil/core';\n\n@Component({\n    tag: 'q2-badge',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Badge implements ComponentInterface {\n    @Prop({ reflect: true }) value: number = 0;\n    @Prop({ reflect: true }) maxLength: number | undefined; // number of digits allowed to show\n    @Prop({ reflect: true }) size: 'default' | 'large' | undefined;\n    @Prop({ reflect: true }) theme: 'primary' | 'secondary' | 'tertiary' | undefined;\n    @Prop({ reflect: true }) status: 'info' | 'alert' | 'warning' | 'success' | undefined;\n\n    @Element() hostElement: HTMLElement;\n\n    get badgeText(): string {\n        const maxValue = Math.pow(10, this.maxLength || 2) - 1;\n        let value: string | number = this.value || 0;\n        if (isNaN(value) || value <= 0) {\n            value = '';\n        } else if (value <= maxValue) {\n            value = Number(value).toLocaleString();\n        } else {\n            value = Number(maxValue).toLocaleString() + '+';\n        }\n        return value;\n    }\n\n    render() {\n        const badgeClass = ['badge'];\n        if (this.size === 'large') badgeClass.push('size-large');\n        return !this.badgeText ? (\n            <Fragment />\n        ) : (\n            <div class=\"badge-wrapper\">\n                <div class={badgeClass.join(' ')}>\n                    <span class=\"badge-text\">\n                        <slot>{this.badgeText}</slot>\n                    </span>\n                </div>\n            </div>\n        );\n    }\n}\n"],"mappings":"oDAAA,MAAMA,EAAY,+mI,MCOLC,EAAO,M,oCACyB,E,wFAQrCC,gBACA,MAAMC,EAAWC,KAAKC,IAAI,GAAIC,KAAKC,WAAa,GAAK,EACrD,IAAIC,EAAyBF,KAAKE,OAAS,EAC3C,GAAIC,MAAMD,IAAUA,GAAS,EAAG,CAC5BA,EAAQ,E,MACL,GAAIA,GAASL,EAAU,CAC1BK,EAAQE,OAAOF,GAAOG,gB,KACnB,CACHH,EAAQE,OAAOP,GAAUQ,iBAAmB,G,CAEhD,OAAOH,C,CAGXI,SACI,MAAMC,EAAa,CAAC,SACpB,GAAIP,KAAKQ,OAAS,QAASD,EAAWE,KAAK,cAC3C,OAAQT,KAAKJ,UACTc,EAACC,EAAQ,MAETD,EAAA,OAAKE,MAAM,iBACPF,EAAA,OAAKE,MAAOL,EAAWM,KAAK,MACxBH,EAAA,QAAME,MAAM,cACRF,EAAA,YAAOV,KAAKJ,a"}