q2-tecton-elements 1.47.0 → 1.47.1

package/dist/q2-tecton-elements/{p-3fe532bc.entry.js → p-cb8e7ebb.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,h as t,F as r,g as e}from"./p-a5f18e27.js";import{t as a,l as c,h as n,u as i,o as d,i as b,p as s}from"./p-84190698.js";import{s as v}from"./p-3090d72d.js";const l='*{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 #0066cc)}: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}*{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 #0066cc)}: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-font-weight:600;--comp-border-radius:var(--tct-btn-border-radius, var(--app-border-radius-1, 3px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-background-alternative:#ebf8ff}:host .btn-height-wrapper{height:var(--comp-btn-min-height, 44px);cursor:pointer}:host .btn-height-wrapper:active{box-shadow:none}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);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([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="1"]) button{padding:var(--tct-scale-1, var(--app-scale-1x, 5px))}: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{font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit));border-radius:var(--tct-btn-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-letter-spacing, var(--comp-letter-spacing))}:host([size=small]) button{padding:var(--tct-btn-padding-size-small, var(--t-btn-padding-size-small, 4px 16px));font-size:var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 14px))}:host([size=medium]) button{padding:var(--tct-btn-padding-size-medium, var(--t-btn-padding-size-medium, 12px 24px));font-size:var(--tct-btn-font-size-medium, var(--t-btn-font-size-medium, 16px))}:host([size=large]) button{padding:var(--tct-btn-padding-size-large, var(--t-btn-padding-size-large, 16px 32px));font-size:var(--tct-btn-font-size-large, var(--t-btn-font-size-large, 20px))}:host([color=primary]) button,:host([intent=workflow-primary]) button{--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)));--comp-hover-background:var(--tct-btn-primary-hover-background, var(--tct-btn-primary-hover-bg));--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-primary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-background:var(--tct-btn-primary-active-background, #0063a0);--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-primary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-primary-focus-visible-inner-ring-color, var(--comp-font-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-primary-border-style, var(--comp-border-style));border-width:var(--tct-btn-primary-border-width, var(--comp-border-width));font-weight:var(--tct-btn-primary-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-primary-border-color, var(--comp-border-color));background:var(--tct-btn-primary-background, var(--comp-background));color:var(--tct-btn-primary-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-primary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=primary]) button:enabled:hover,:host([intent=workflow-primary]) button:enabled:hover{border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:enabled:focus,:host([intent=workflow-primary]) button:enabled:focus{border-color:var(--tct-btn-primary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-primary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=primary]) button:enabled:focus-visible,:host([intent=workflow-primary]) button:enabled:focus-visible{border-color:var(--tct-btn-primary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-primary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=primary]) button:enabled:active,:host([intent=workflow-primary]) button:enabled:active{border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:focus-visible,:host([color=primary]) button:focus-visible:hover:enabled,:host([color=primary]) button:focus,:host([color=primary]) button:focus:hover:enabled,:host([intent=workflow-primary]) button:focus-visible,:host([intent=workflow-primary]) button:focus-visible:hover:enabled,:host([intent=workflow-primary]) button:focus,:host([intent=workflow-primary]) button:focus:hover:enabled{border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:focus-visible:active:enabled,:host([color=primary]) button:focus:active:enabled,:host([intent=workflow-primary]) button:focus-visible:active:enabled,:host([intent=workflow-primary]) button:focus:active:enabled{border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:disabled,:host([intent=workflow-primary]) button:disabled{border-color:var(--tct-btn-primary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-primary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=primary]) button ::slotted(q2-icon),:host([intent=workflow-primary]) button ::slotted(q2-icon){--t-text:var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-font-color, currentcolor)))}:host([color=secondary]) button,:host([intent=workflow-secondary]) button{--comp-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-hover-background:var(--tct-btn-secondary-hover-background, var(--tct-btn-secondary-hover-bg, var(--t-a11y-active-gray-color-AA, #404040)));--comp-hover-font-color:var(--app-white, #ffffff);--comp-box-shadow:var(--tct-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-secondary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-secondary-hover-outer-ring-color, var(--comp-hover-background));--comp-hover-inner-ring-color:var(--tct-btn-secondary-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-secondary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-secondary-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-secondary-border-style, var(--comp-border-style));border-width:var(--tct-btn-secondary-border-width, var(--comp-border-width));font-weight:var(--tct-btn-secondary-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-secondary-border-color, var(--comp-border-color));background:var(--tct-btn-secondary-background, var(--comp-background));color:var(--tct-btn-secondary-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-secondary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=secondary]) button:enabled:hover,:host([intent=workflow-secondary]) button:enabled:hover{border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:enabled:focus,:host([intent=workflow-secondary]) button:enabled:focus{border-color:var(--tct-btn-secondary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=secondary]) button:enabled:focus-visible,:host([intent=workflow-secondary]) button:enabled:focus-visible{border-color:var(--tct-btn-secondary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=secondary]) button:enabled:active,:host([intent=workflow-secondary]) button:enabled:active{border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:focus-visible,:host([color=secondary]) button:focus-visible:hover:enabled,:host([color=secondary]) button:focus,:host([color=secondary]) button:focus:hover:enabled,:host([intent=workflow-secondary]) button:focus-visible,:host([intent=workflow-secondary]) button:focus-visible:hover:enabled,:host([intent=workflow-secondary]) button:focus,:host([intent=workflow-secondary]) button:focus:hover:enabled{border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:focus-visible:active:enabled,:host([color=secondary]) button:focus:active:enabled,:host([intent=workflow-secondary]) button:focus-visible:active:enabled,:host([intent=workflow-secondary]) button:focus:active:enabled{border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:disabled,:host([intent=workflow-secondary]) button:disabled{border-color:var(--tct-btn-secondary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-secondary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=secondary]) button ::slotted(q2-icon),:host([intent=workflow-secondary]) button ::slotted(q2-icon){--t-text:var(--tct-btn-secondary-icon-color, var(--t-btn-secondary-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=workflow-destroy]) button{--comp-background:var(--tct-btn-destroy-background, var(--const-stoplight-alert, #d20a0a));--comp-font-color:var(--tct-btn-destroy-font-color, var(--app-white));--comp-box-shadow:var(--tct-btn-destroy-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-destroy-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-destroy-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-destroy-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-destroy-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-destroy-focus-visible-inner-ring-color, var(--comp-font-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-destroy-border-style, var(--comp-border-style));border-width:var(--tct-btn-destroy-border-width, var(--comp-border-width));font-weight:var(--tct-btn-destroy-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-destroy-border-color, var(--comp-border-color));background:var(--tct-btn-destroy-background, var(--comp-background));color:var(--tct-btn-destroy-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-destroy-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-destroy]) button:enabled:hover{border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus{border-color:var(--tct-btn-destroy-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus-visible{border-color:var(--tct-btn-destroy-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-destroy]) button:enabled:active{border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible,:host([intent=workflow-destroy]) button:focus-visible:hover:enabled,:host([intent=workflow-destroy]) button:focus,:host([intent=workflow-destroy]) button:focus:hover:enabled{border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible:active:enabled,:host([intent=workflow-destroy]) button:focus:active:enabled{border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:disabled{border-color:var(--tct-btn-destroy-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-destroy-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-destroy]) button ::slotted(q2-icon){--t-text:var(--tct-btn-destroy-icon-color, var(--t-btn-destroy-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=workflow-escape]) button{--comp-background:var(--tct-btn-escape-background, var(--app-white, #ffffff));--comp-font-color:var(--tct-btn-escape-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-escape-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-box-shadow:var(--tct-btn-escape-hover-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-escape-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-background:var(--tct-btn-escape-hover-background, var(--comp-background-alternative));--comp-active-background:var(--tct-btn-escape-active-background, var(--comp-background-alternative));--comp-focus-background:var(--tct-btn-escape-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-escape-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-escape-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-escape-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-escape-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-escape-border-style, var(--comp-border-style));border-width:var(--tct-btn-escape-border-width, var(--comp-border-width));font-weight:var(--tct-btn-escape-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-escape-border-color, var(--comp-border-color));background:var(--tct-btn-escape-background, var(--comp-background));color:var(--tct-btn-escape-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-escape-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-escape]) button:enabled:hover{border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus{border-color:var(--tct-btn-escape-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-escape-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus-visible{border-color:var(--tct-btn-escape-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-escape-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-escape]) button:enabled:active{border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:focus-visible,:host([intent=workflow-escape]) button:focus-visible:hover:enabled,:host([intent=workflow-escape]) button:focus,:host([intent=workflow-escape]) button:focus:hover:enabled{border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:focus-visible:active:enabled,:host([intent=workflow-escape]) button:focus:active:enabled{border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:disabled{border-color:var(--tct-btn-escape-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-escape-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-escape]) button ::slotted(q2-icon){--t-text:var(--tct-btn-escape-icon-color, var(--t-btn-escape-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=neutral]) button{--comp-background:var(--tct-btn-neutral-background, var(--app-white, #ffffff));--comp-font-color:var(--tct-btn-neutral-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-neutral-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-border-width:1px;--comp-border-style:solid;--comp-border-color:var(--comp-font-color);--comp-hover-outer-ring-color:var(--tct-btn-neutral-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-neutral-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-border-width, var(--comp-border-width));font-weight:var(--tct-btn-neutral-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-neutral-border-color, var(--comp-border-color));background:var(--tct-btn-neutral-background, var(--comp-background));color:var(--tct-btn-neutral-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-neutral-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral]) button:enabled:hover{border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:enabled:focus{border-color:var(--tct-btn-neutral-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral]) button:enabled:focus-visible{border-color:var(--tct-btn-neutral-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral]) button:enabled:active{border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:focus-visible,:host([intent=neutral]) button:focus-visible:hover:enabled,:host([intent=neutral]) button:focus,:host([intent=neutral]) button:focus:hover:enabled{border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:focus-visible:active:enabled,:host([intent=neutral]) button:focus:active:enabled{border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:disabled{border-color:var(--tct-btn-neutral-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral]) button ::slotted(q2-icon){--t-text:var(--tct-btn-neutral-icon-color, var(--t-btn-neutral-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=neutral-text]) button{--comp-background:var(--tct-btn-neutral-text-background, var(--tct-btn-neutral-text-bg, var(--app-white, #ffffff)));--comp-font-color:var(--tct-btn-neutral-text-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-neutral-text-box-shadow);--comp-hover-text-decoration:underline;--comp-focus-background:var(--tct-btn-neutral-text-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-neutral-text-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-text-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-text-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-text-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-neutral-text-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-text-border-width, var(--comp-border-width));font-weight:var(--tct-btn-neutral-text-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-neutral-text-border-color, var(--comp-border-color));background:var(--tct-btn-neutral-text-background, var(--comp-background));color:var(--tct-btn-neutral-text-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-neutral-text-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral-text]) button:enabled:hover{border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:enabled:focus{border-color:var(--tct-btn-neutral-text-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral-text]) button:enabled:focus-visible{border-color:var(--tct-btn-neutral-text-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral-text]) button:enabled:active{border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:focus-visible,:host([intent=neutral-text]) button:focus-visible:hover:enabled,:host([intent=neutral-text]) button:focus,:host([intent=neutral-text]) button:focus:hover:enabled{border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:focus-visible:active:enabled,:host([intent=neutral-text]) button:focus:active:enabled{border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:disabled{border-color:var(--tct-btn-neutral-text-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-text-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral-text]) button ::slotted(q2-icon){--t-text:var(--tct-btn-neutral-text-icon-color, var(--t-btn-neutral-text-icon-color, var(--comp-font-color, currentcolor)))}:host(:not([size])) 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)))}button :host(:not([color]):not([intent])):hover,button :host(:not([color]):not([intent])):focus,button.icon-only:hover,button.icon-only:focus{background: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(:not([intent])) button:not(.icon-only){height:var(--tct-btn-height, auto);padding-inline:var(--tct-btn-padding-inline, 0);font-weight:var(--tct-btn-font-weight);border-radius:var(--tct-btn-border-radius, 0)}:host(:not([intent])) button:not(.icon-only):hover,:host(:not([intent])) button:not(.icon-only):focus{background:var(--tct-btn-hover-background)}: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)))}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 p=l;const u=class{constructor(e){o(this,e);this.handleButtonSize=()=>{if(Number(this.size)<=4){a(this,"size","prop")}};this.handleSlotChange=()=>{this.handleIcons()};this.handleIcons=()=>{const o=Array.from(this.hostElement.querySelectorAll(":scope > q2-icon")).reduce(((o,t)=>{if(o)t.remove();else o=t;return o}),null);const t=!!o;const r=!!this.hostElement.querySelector("q2-loc");const e=!!this.hostElement.textContent.trim();const a=(r||e)&&t&&this.hostElement.firstElementChild===o;const c=(r||e)&&t&&this.hostElement.lastElementChild===o;const n=!a&&!c&&t;let i;if(n)i="only";else if(a)i="left";else if(c)i="right";this.iconPosition=i};this.renderButton=()=>{const{ariaExpanded:o,ariaHasPopup:e,ariaSelected:a,ariaPressed:n,description:i,disabled:d,type:b,tabindex:s}=this.buttonAttributes;const{iconPosition:v,loading:l,badge:p,label:u,hideLabel:h}=this;const m=v||l;const f=!v||p;return t(r,null,t("button",{ref:o=>this.primaryBtn=o!==null&&o!==void 0?o:this.primaryBtn,"aria-expanded":o,"aria-haspopup":e,"aria-label":h&&c(u),"aria-selected":a,"aria-pressed":n,disabled:d,type:b,tabindex:s,"test-id":"q2BtnInnerButton",class:v?`icon-${v}`:"","aria-describedby":!!i?"hidden-description":undefined,role:this._role||undefined},t("div",null,m&&t("q2-loading",{hidden:!l,modifiers:f?"inline":undefined}),!h&&u?c(u):t("slot",{onSlotchange:this.handleSlotChange}))),!!i&&t("div",{id:"hidden-description","aria-hidden":"true",class:"sr"},i))};this.render=()=>this.size==="small"?t("div",{class:"btn-height-wrapper",ref:o=>this.primaryBtnWrapper=o!==null&&o!==void 0?o:this.primaryBtnWrapper,tabIndex:-1},this.renderButton()):this.renderButton();this.ariaExpanded=undefined;this.ariaHasPopup=undefined;this.ariaControls=undefined;this.ariaSelected=undefined;this.ariaPressed=undefined;this.description=undefined;this.tabIndex=undefined;this.active=undefined;this.badge=undefined;this.block=undefined;this.disabled=undefined;this.hideLabel=undefined;this.intent=undefined;this.label=undefined;this.loading=undefined;this.type="button";this._role=undefined;this.size=undefined;this.color=undefined;this.fab=undefined;this.ariaLabel=undefined;this.iconPosition=undefined}componentWillLoad(){this.handleIcons();n(this);i(this)}componentDidLoad(){this.handleButtonSize();d(this.hostElement)}disable(o){if(this.disabled){o.stopImmediatePropagation()}this.primaryBtn.focus()}handleClick(o){if(this.loading){o.stopImmediatePropagation()}this.primaryBtn.focus()}delegateFocus(o){if(!b(o,this.hostElement))return;this.primaryBtn.focus()}ariaLabelObserver(){n(this)}sizeObserver(){this.handleButtonSize()}get buttonAttributes(){return{ariaExpanded:s(this.ariaExpanded,["true","false"]),ariaHasPopup:s(this.ariaHasPopup,["true","false","menu","listbox","tree","grid","dialog"]),ariaLabel:this.label&&this.hideLabel?c(this.label):undefined,ariaSelected:s(this.ariaSelected,["true","false"]),ariaPressed:s(this.ariaPressed,["true","false"]),description:this.description!==undefined?this.description:undefined,disabled:this.disabled||false,type:this.type,tabindex:this.tabIndex||undefined}}get hostElement(){return e(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"],size:["sizeObserver"]}}};u.style=p;const h="*{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 #0066cc)}: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(--t-gray-8, #808080)))}.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 m=h;const f=class{constructor(r){o(this,r);this.halfCircleSpinner=()=>t("div",{class:"q2-loading-animation half-circle-spinner","aria-label":this.localizedLabel},t("div",{class:"circle circle-1"}),t("div",{class:"circle circle-2"}));this.spinner=()=>this.halfCircleSpinner();this.skeletonLoader=()=>t("div",{class:"q2-loading-skeleton","aria-label":this.localizedLabel},this.shape==="custom"?t("slot",null):this.skeletonShape,t("div",{class:"q2-loading-skeleton-shimmer"}));this.counts=undefined;this.inline=undefined;this.label=undefined;this.modifiers=undefined;this.shape=undefined;this.type=undefined;this.ariaLabel=undefined}get loader(){const o={default:this.spinner,spinner:this.spinner,skeleton:this.skeletonLoader};return o[this.type]||o.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 o,t;return(t=(o=v[this.shape])===null||o===void 0?void 0:o.call(v,this.countsArray,this.modifiersSet))!==null&&t!==void 0?t:""}get spinnerShape(){const o={default:this.halfCircleSpinner,"half-circle":this.halfCircleSpinner};return o[this.type]||o.default}get localizedLabel(){return c(this.label||"tecton.element.loading.ariaLabel")}componentWillLoad(){n(this)}ariaLabelObserver(){n(this)}render(){return this.loader()}get hostElement(){return e(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};f.style=m;export{u as q2_btn,f as q2_loading};
-//# sourceMappingURL=p-3fe532bc.entry.js.map
+import{r as o,h as t,F as r,g as e}from"./p-a5f18e27.js";import{t as c,l as a,h as n,u as i,o as d,i as b,p as s}from"./p-84190698.js";import{s as l}from"./p-3090d72d.js";const v='*{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 #0066cc)}: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}*{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 #0066cc)}: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-font-weight:600;--comp-border-radius:var(--tct-btn-border-radius, var(--app-border-radius-1, 3px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-background-alternative:#ebf8ff}:host .btn-height-wrapper{height:var(--comp-btn-min-height, 44px);cursor:pointer}:host .btn-height-wrapper:active{box-shadow:none}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);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([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="1"]) button{padding:var(--tct-scale-1, var(--app-scale-1x, 5px))}: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{font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit));border-radius:var(--tct-btn-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-letter-spacing, var(--comp-letter-spacing))}:host([size=small]) button{padding:var(--tct-btn-padding-size-small, var(--t-btn-padding-size-small, 4px 16px));font-size:var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 14px))}:host([size=medium]) button{padding:var(--tct-btn-padding-size-medium, var(--t-btn-padding-size-medium, 12px 24px));font-size:var(--tct-btn-font-size-medium, var(--t-btn-font-size-medium, 16px))}:host([size=large]) button{padding:var(--tct-btn-padding-size-large, var(--t-btn-padding-size-large, 16px 32px));font-size:var(--tct-btn-font-size-large, var(--t-btn-font-size-large, 20px))}:host([color=primary]) button,:host([intent=workflow-primary]) button{--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)));--comp-hover-background:var(--tct-btn-primary-hover-background, var(--tct-btn-primary-hover-bg));--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-primary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-background:var(--tct-btn-primary-active-background, #0063a0);--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-primary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-primary-focus-visible-inner-ring-color, var(--comp-font-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-primary-border-style, var(--comp-border-style));border-width:var(--tct-btn-primary-border-width, var(--comp-border-width));font-weight:var(--tct-btn-primary-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-primary-border-color, var(--comp-border-color));background:var(--tct-btn-primary-background, var(--comp-background));color:var(--tct-btn-primary-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-primary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=primary]) button:enabled:hover,:host([intent=workflow-primary]) button:enabled:hover{border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:enabled:focus,:host([intent=workflow-primary]) button:enabled:focus{border-color:var(--tct-btn-primary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-primary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=primary]) button:enabled:focus-visible,:host([intent=workflow-primary]) button:enabled:focus-visible{border-color:var(--tct-btn-primary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-primary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=primary]) button:enabled:active,:host([intent=workflow-primary]) button:enabled:active{border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:focus-visible,:host([color=primary]) button:focus-visible:hover:enabled,:host([color=primary]) button:focus,:host([color=primary]) button:focus:hover:enabled,:host([intent=workflow-primary]) button:focus-visible,:host([intent=workflow-primary]) button:focus-visible:hover:enabled,:host([intent=workflow-primary]) button:focus,:host([intent=workflow-primary]) button:focus:hover:enabled{border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:focus-visible:active:enabled,:host([color=primary]) button:focus:active:enabled,:host([intent=workflow-primary]) button:focus-visible:active:enabled,:host([intent=workflow-primary]) button:focus:active:enabled{border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:disabled,:host([intent=workflow-primary]) button:disabled{border-color:var(--tct-btn-primary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-primary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=primary]) button ::slotted(q2-icon),:host([intent=workflow-primary]) button ::slotted(q2-icon){--t-text:var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-font-color, currentcolor)))}:host([color=secondary]) button,:host([intent=workflow-secondary]) button{--comp-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-hover-background:var(--tct-btn-secondary-hover-background, var(--tct-btn-secondary-hover-bg, var(--t-a11y-active-gray-color-AA, #404040)));--comp-hover-font-color:var(--app-white, #ffffff);--comp-box-shadow:var(--tct-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-secondary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-secondary-hover-outer-ring-color, var(--comp-hover-background));--comp-hover-inner-ring-color:var(--tct-btn-secondary-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-secondary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-secondary-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-secondary-border-style, var(--comp-border-style));border-width:var(--tct-btn-secondary-border-width, var(--comp-border-width));font-weight:var(--tct-btn-secondary-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-secondary-border-color, var(--comp-border-color));background:var(--tct-btn-secondary-background, var(--comp-background));color:var(--tct-btn-secondary-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-secondary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=secondary]) button:enabled:hover,:host([intent=workflow-secondary]) button:enabled:hover{border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:enabled:focus,:host([intent=workflow-secondary]) button:enabled:focus{border-color:var(--tct-btn-secondary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=secondary]) button:enabled:focus-visible,:host([intent=workflow-secondary]) button:enabled:focus-visible{border-color:var(--tct-btn-secondary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=secondary]) button:enabled:active,:host([intent=workflow-secondary]) button:enabled:active{border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:focus-visible,:host([color=secondary]) button:focus-visible:hover:enabled,:host([color=secondary]) button:focus,:host([color=secondary]) button:focus:hover:enabled,:host([intent=workflow-secondary]) button:focus-visible,:host([intent=workflow-secondary]) button:focus-visible:hover:enabled,:host([intent=workflow-secondary]) button:focus,:host([intent=workflow-secondary]) button:focus:hover:enabled{border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:focus-visible:active:enabled,:host([color=secondary]) button:focus:active:enabled,:host([intent=workflow-secondary]) button:focus-visible:active:enabled,:host([intent=workflow-secondary]) button:focus:active:enabled{border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:disabled,:host([intent=workflow-secondary]) button:disabled{border-color:var(--tct-btn-secondary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-secondary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=secondary]) button ::slotted(q2-icon),:host([intent=workflow-secondary]) button ::slotted(q2-icon){--t-text:var(--tct-btn-secondary-icon-color, var(--t-btn-secondary-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=workflow-destroy]) button{--comp-background:var(--tct-btn-destroy-background, var(--const-stoplight-alert, #d20a0a));--comp-font-color:var(--tct-btn-destroy-font-color, var(--app-white));--comp-box-shadow:var(--tct-btn-destroy-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-destroy-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-destroy-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-destroy-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-destroy-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-destroy-focus-visible-inner-ring-color, var(--comp-font-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-destroy-border-style, var(--comp-border-style));border-width:var(--tct-btn-destroy-border-width, var(--comp-border-width));font-weight:var(--tct-btn-destroy-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-destroy-border-color, var(--comp-border-color));background:var(--tct-btn-destroy-background, var(--comp-background));color:var(--tct-btn-destroy-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-destroy-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-destroy]) button:enabled:hover{border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus{border-color:var(--tct-btn-destroy-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus-visible{border-color:var(--tct-btn-destroy-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-destroy]) button:enabled:active{border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible,:host([intent=workflow-destroy]) button:focus-visible:hover:enabled,:host([intent=workflow-destroy]) button:focus,:host([intent=workflow-destroy]) button:focus:hover:enabled{border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible:active:enabled,:host([intent=workflow-destroy]) button:focus:active:enabled{border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:disabled{border-color:var(--tct-btn-destroy-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-destroy-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-destroy]) button ::slotted(q2-icon){--t-text:var(--tct-btn-destroy-icon-color, var(--t-btn-destroy-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=workflow-escape]) button{--comp-background:var(--tct-btn-escape-background, var(--app-white, #ffffff));--comp-font-color:var(--tct-btn-escape-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-escape-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-box-shadow:var(--tct-btn-escape-hover-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-escape-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-background:var(--tct-btn-escape-hover-background, var(--comp-background-alternative));--comp-active-background:var(--tct-btn-escape-active-background, var(--comp-background-alternative));--comp-focus-background:var(--tct-btn-escape-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-escape-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-escape-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-escape-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-escape-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-escape-border-style, var(--comp-border-style));border-width:var(--tct-btn-escape-border-width, var(--comp-border-width));font-weight:var(--tct-btn-escape-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-escape-border-color, var(--comp-border-color));background:var(--tct-btn-escape-background, var(--comp-background));color:var(--tct-btn-escape-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-escape-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-escape]) button:enabled:hover{border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus{border-color:var(--tct-btn-escape-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-escape-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus-visible{border-color:var(--tct-btn-escape-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-escape-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-escape]) button:enabled:active{border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:focus-visible,:host([intent=workflow-escape]) button:focus-visible:hover:enabled,:host([intent=workflow-escape]) button:focus,:host([intent=workflow-escape]) button:focus:hover:enabled{border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:focus-visible:active:enabled,:host([intent=workflow-escape]) button:focus:active:enabled{border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:disabled{border-color:var(--tct-btn-escape-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-escape-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-escape]) button ::slotted(q2-icon){--t-text:var(--tct-btn-escape-icon-color, var(--t-btn-escape-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=neutral]) button{--comp-background:var(--tct-btn-neutral-background, var(--app-white, #ffffff));--comp-font-color:var(--tct-btn-neutral-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-neutral-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-border-width:1px;--comp-border-style:solid;--comp-border-color:var(--comp-font-color);--comp-hover-outer-ring-color:var(--tct-btn-neutral-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-neutral-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-border-width, var(--comp-border-width));font-weight:var(--tct-btn-neutral-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-neutral-border-color, var(--comp-border-color));background:var(--tct-btn-neutral-background, var(--comp-background));color:var(--tct-btn-neutral-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-neutral-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral]) button:enabled:hover{border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:enabled:focus{border-color:var(--tct-btn-neutral-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral]) button:enabled:focus-visible{border-color:var(--tct-btn-neutral-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral]) button:enabled:active{border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:focus-visible,:host([intent=neutral]) button:focus-visible:hover:enabled,:host([intent=neutral]) button:focus,:host([intent=neutral]) button:focus:hover:enabled{border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:focus-visible:active:enabled,:host([intent=neutral]) button:focus:active:enabled{border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:disabled{border-color:var(--tct-btn-neutral-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral]) button ::slotted(q2-icon){--t-text:var(--tct-btn-neutral-icon-color, var(--t-btn-neutral-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=neutral-text]) button{--comp-background:var(--tct-btn-neutral-text-background, var(--tct-btn-neutral-text-bg, var(--app-white, #ffffff)));--comp-font-color:var(--tct-btn-neutral-text-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-neutral-text-box-shadow);--comp-hover-text-decoration:underline;--comp-focus-background:var(--tct-btn-neutral-text-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-neutral-text-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-text-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-text-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-text-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-neutral-text-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-text-border-width, var(--comp-border-width));font-weight:var(--tct-btn-neutral-text-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-neutral-text-border-color, var(--comp-border-color));background:var(--tct-btn-neutral-text-background, var(--comp-background));color:var(--tct-btn-neutral-text-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-neutral-text-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral-text]) button:enabled:hover{border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:enabled:focus{border-color:var(--tct-btn-neutral-text-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral-text]) button:enabled:focus-visible{border-color:var(--tct-btn-neutral-text-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral-text]) button:enabled:active{border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:focus-visible,:host([intent=neutral-text]) button:focus-visible:hover:enabled,:host([intent=neutral-text]) button:focus,:host([intent=neutral-text]) button:focus:hover:enabled{border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:focus-visible:active:enabled,:host([intent=neutral-text]) button:focus:active:enabled{border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:disabled{border-color:var(--tct-btn-neutral-text-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-text-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral-text]) button ::slotted(q2-icon){--t-text:var(--tct-btn-neutral-text-icon-color, var(--t-btn-neutral-text-icon-color, var(--comp-font-color, currentcolor)))}:host(:not([size])) 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)))}button :host(:not([color]):not([intent])):hover,button :host(:not([color]):not([intent])):focus,button.icon-only:hover,button.icon-only:focus{background: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(:not([intent])) button:not(.icon-only){height:var(--tct-btn-height, auto);padding-inline:var(--tct-btn-padding-inline, 0);font-weight:var(--tct-btn-font-weight);border-radius:var(--tct-btn-border-radius, 0)}:host(:not([intent])) button:not(.icon-only):hover,:host(:not([intent])) button:not(.icon-only):focus{background:var(--tct-btn-hover-background)}: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)))}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 p=v;const u=class{constructor(e){o(this,e);this.handleButtonSize=()=>{if(Number(this.size)<=4){c(this,"size","prop")}};this.handleSlotChange=()=>{this.handleIcons()};this.handleIcons=()=>{const o=Array.from(this.hostElement.querySelectorAll(":scope > q2-icon")).reduce(((o,t)=>{if(o)t.remove();else o=t;return o}),null);const t=!!o;const r=!!this.hostElement.querySelector("q2-loc");const e=!!this.hostElement.textContent.trim();const c=(r||e)&&t&&this.hostElement.firstElementChild===o;const a=(r||e)&&t&&this.hostElement.lastElementChild===o;const n=!c&&!a&&t;let i;if(n)i="only";else if(c)i="left";else if(a)i="right";this.iconPosition=i};this.renderButton=()=>{const{ariaExpanded:o,ariaHasPopup:e,ariaSelected:c,ariaPressed:n,description:i,disabled:d,type:b,tabindex:s}=this.buttonAttributes;const{iconPosition:l,loading:v,badge:p,label:u,hideLabel:h}=this;const m=l||v;const f=!l||p;return t(r,null,t("button",{ref:o=>this.primaryBtn=o!==null&&o!==void 0?o:this.primaryBtn,"aria-expanded":o,"aria-haspopup":e,"aria-label":h&&a(u),"aria-selected":c,"aria-pressed":n,disabled:d,type:b,tabindex:s,"test-id":"q2BtnInnerButton",class:l?`icon-${l}`:"","aria-describedby":!!i?"hidden-description":undefined,role:this._role||undefined},t("div",null,m&&t("q2-loading",{hidden:!v,modifiers:f?"inline":undefined}),!h&&u?a(u):t("slot",{onSlotchange:this.handleSlotChange}))),!!i&&t("div",{id:"hidden-description","aria-hidden":"true",class:"sr"},i))};this.render=()=>this.size==="small"?t("div",{class:"btn-height-wrapper",ref:o=>this.primaryBtnWrapper=o!==null&&o!==void 0?o:this.primaryBtnWrapper,tabIndex:-1},this.renderButton()):this.renderButton();this.ariaExpanded=undefined;this.ariaHasPopup=undefined;this.ariaControls=undefined;this.ariaSelected=undefined;this.ariaPressed=undefined;this.description=undefined;this.tabIndex=undefined;this.active=undefined;this.badge=undefined;this.block=undefined;this.disabled=undefined;this.hideLabel=undefined;this.intent=undefined;this.label=undefined;this.loading=undefined;this.type="button";this._role=undefined;this.size=undefined;this.color=undefined;this.fab=undefined;this.ariaLabel=undefined;this.iconPosition=undefined}componentWillLoad(){this.handleIcons();n(this);i(this)}componentDidLoad(){this.handleButtonSize();d(this.hostElement)}disconnectedCallback(){this.primaryBtn=null;this.primaryBtnWrapper=null}disable(o){if(this.disabled){o.stopImmediatePropagation()}this.primaryBtn.focus()}handleClick(o){if(this.loading){o.stopImmediatePropagation()}this.primaryBtn.focus()}delegateFocus(o){if(!b(o,this.hostElement))return;this.primaryBtn.focus()}ariaLabelObserver(){n(this)}sizeObserver(){this.handleButtonSize()}get buttonAttributes(){return{ariaExpanded:s(this.ariaExpanded,["true","false"]),ariaHasPopup:s(this.ariaHasPopup,["true","false","menu","listbox","tree","grid","dialog"]),ariaLabel:this.label&&this.hideLabel?a(this.label):undefined,ariaSelected:s(this.ariaSelected,["true","false"]),ariaPressed:s(this.ariaPressed,["true","false"]),description:this.description!==undefined?this.description:undefined,disabled:this.disabled||false,type:this.type,tabindex:this.tabIndex||undefined}}get hostElement(){return e(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"],size:["sizeObserver"]}}};u.style=p;const h="*{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 #0066cc)}: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(--t-gray-8, #808080)))}.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 m=h;const f=class{constructor(r){o(this,r);this.halfCircleSpinner=()=>t("div",{class:"q2-loading-animation half-circle-spinner","aria-label":this.localizedLabel},t("div",{class:"circle circle-1"}),t("div",{class:"circle circle-2"}));this.spinner=()=>this.halfCircleSpinner();this.skeletonLoader=()=>t("div",{class:"q2-loading-skeleton","aria-label":this.localizedLabel},this.shape==="custom"?t("slot",null):this.skeletonShape,t("div",{class:"q2-loading-skeleton-shimmer"}));this.counts=undefined;this.inline=undefined;this.label=undefined;this.modifiers=undefined;this.shape=undefined;this.type=undefined;this.ariaLabel=undefined}get loader(){const o={default:this.spinner,spinner:this.spinner,skeleton:this.skeletonLoader};return o[this.type]||o.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 o,t;return(t=(o=l[this.shape])===null||o===void 0?void 0:o.call(l,this.countsArray,this.modifiersSet))!==null&&t!==void 0?t:""}get spinnerShape(){const o={default:this.halfCircleSpinner,"half-circle":this.halfCircleSpinner};return o[this.type]||o.default}get localizedLabel(){return a(this.label||"tecton.element.loading.ariaLabel")}componentWillLoad(){n(this)}ariaLabelObserver(){n(this)}render(){return this.loader()}get hostElement(){return e(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};f.style=m;export{u as q2_btn,f as q2_loading};
+//# sourceMappingURL=p-cb8e7ebb.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["q2BtnCss","Q2BtnStyle0","Q2Btn","this","handleButtonSize","Number","size","handleDeprecationWarning","handleSlotChange","handleIcons","icon","Array","from","hostElement","querySelectorAll","reduce","acc","element","remove","hasIcon","hasLoc","querySelector","hasText","textContent","trim","hasIconLeft","firstElementChild","hasIconRight","lastElementChild","hasIconOnly","iconPosition","renderButton","ariaExpanded","ariaHasPopup","ariaSelected","ariaPressed","description","disabled","type","tabindex","buttonAttributes","loading","badge","label","hideLabel","renderLoadingSpinner","isLoadingSpinnerInline","h","Fragment","ref","el","primaryBtn","loc","class","undefined","role","_role","hidden","modifiers","onSlotchange","id","render","primaryBtnWrapper","tabIndex","componentWillLoad","handleAriaLabel","handleColor","componentDidLoad","overrideFocus","disconnectedCallback","disable","ev","stopImmediatePropagation","focus","handleClick","delegateFocus","event","isEventFromElement","ariaLabelObserver","sizeObserver","getAriaValueFromProp","ariaLabel","q2LoadingCss","Q2LoadingStyle0","Q2Loading","halfCircleSpinner","localizedLabel","spinner","skeletonLoader","shape","skeletonShape","loader","loaderMap","default","skeleton","modifiersSet","Set","split","countsArray","counts","map","_b","_a","skeletonShapes","call","shapes","spinnerShape","spinnerMap"],"sources":["src/components/q2-btn/q2-btn.scss?tag=q2-btn&encapsulation=shadow","src/components/q2-btn/q2-btn.tsx","src/components/q2-loading/q2-loading.scss?tag=q2-loading&encapsulation=shadow","src/components/q2-loading/q2-loading.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './q2-btn-mixins';\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-font-weight: 600;\n    --comp-border-radius: #{var-list(--tct-btn-border-radius, --app-border-radius-1, 3px)};\n    --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\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-background-alternative: #ebf8ff;\n    .btn-height-wrapper {\n        height: var(--comp-btn-min-height, 44px);\n        cursor: pointer;\n        &:active {\n            box-shadow: none;\n        }\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);\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([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    :host([size='1']) & {\n        padding: var-list(--tct-scale-1, --app-scale-1x, 5px);\n    }\n    :host([size='2']) & {\n        padding: var-list(--tct-scale-2, --app-scale-2x, 10px);\n    }\n    :host([size='3']) & {\n        padding: var-list(--tct-scale-3, --app-scale-3x, 15px);\n    }\n    :host([size='4x']) & {\n        padding: var-list(--tct-scale-4x, --app-scale-4x, 20px);\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        font-size: var-list(var-prefixer(btn-font-size), inherit);\n        border-radius: var-list(--tct-btn-border-radius, --comp-border-radius);\n        text-transform: var-list(--tct-btn-text-transform, --comp-text-transform);\n        letter-spacing: var-list(--tct-btn-letter-spacing, --comp-letter-spacing);\n    }\n\n    :host([size='small']) & {\n        padding: var-list(var-prefixer(btn-padding-size-small), '4px 16px');\n        font-size: var-list(var-prefixer(btn-font-size-small), 14px);\n    }\n    :host([size='medium']) & {\n        padding: var-list(var-prefixer(btn-padding-size-medium), '12px 24px');\n        font-size: var-list(var-prefixer(btn-font-size-medium), 16px);\n    }\n    :host([size='large']) & {\n        padding: var-list(var-prefixer(btn-padding-size-large), '16px 32px');\n        font-size: var-list(var-prefixer(btn-font-size-large), 20px);\n    }\n\n    :host([color='primary']) &,\n    :host([intent='workflow-primary']) & {\n        --comp-background: #{var-list(\n                --tct-btn-primary-background,\n                --tct-btn-primary-bg,\n                --t-a11y-active-gray-color-AA,\n                #404040\n            )};\n        --comp-hover-background: #{var-list(--tct-btn-primary-hover-background, --tct-btn-primary-hover-bg)};\n        --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n        --comp-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-focus-box-shadow: #{var-list(--tct-btn-primary-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n        // different background for active\n        --comp-active-background: var(--tct-btn-primary-active-background, #0063a0);\n        @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n        @include btn-ring(primary, active, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(primary, disabled, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(primary, focus-visible, --const-focus-color, --comp-font-color, null);\n        @include btn-intent(primary);\n        @include btn-icon-color(primary, --comp-font-color);\n    }\n\n    :host([color='secondary']) &,\n    :host([intent='workflow-secondary']) & {\n        --comp-background: #{var-list(\n                --tct-btn-secondary-background,\n                --tct-btn-secondary-bg,\n                --t-button-default-bg,\n                #cccccc\n            )};\n        --comp-hover-background: #{var-list(\n                --tct-btn-secondary-hover-background,\n                --tct-btn-secondary-hover-bg,\n                --t-a11y-active-gray-color-AA,\n                #404040\n            )};\n        --comp-hover-font-color: var(--app-white, #ffffff);\n        --comp-box-shadow: #{var-list(--tct-btn-secondary-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-focus-box-shadow: #{var-list(--tct-btn-secondary-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n        @include btn-ring(secondary, hover, --comp-hover-background, --app-white, null);\n        @include btn-ring(secondary, active, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(secondary, disabled, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(secondary, focus-visible, --const-focus-color, --app-white, null);\n        @include btn-intent(secondary);\n        @include btn-icon-color(secondary, --comp-font-color);\n    }\n\n    :host([intent='workflow-destroy']) & {\n        --comp-background: #{var-list(--tct-btn-destroy-background, --const-stoplight-alert, #d20a0a)};\n        --comp-font-color: #{var-list(--tct-btn-destroy-font-color, --app-white)};\n        --comp-box-shadow: #{var-list(--tct-btn-destroy-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-focus-box-shadow: #{var-list(--tct-btn-destroy-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n        @include btn-ring(destroy, hover, --comp-background, --comp-font-color, null);\n        @include btn-ring(destroy, active, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(destroy, disabled, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(destroy, focus-visible, --const-focus-color, --comp-font-color, null);\n        @include btn-intent(destroy);\n        @include btn-icon-color(destroy, --comp-font-color);\n    }\n\n    :host([intent='workflow-escape']) & {\n        --comp-background: #{var-list(--tct-btn-escape-background, --app-white, #ffffff)};\n        --comp-font-color: #{var-list(\n                --tct-btn-escape-font-color,\n                --tct-btn-primary-background,\n                --tct-btn-primary-bg,\n                --t-a11y-active-gray-color-AA,\n                #404040\n            )};\n        --comp-box-shadow: #{var-list(--tct-btn-escape-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-hover-box-shadow: #{var-list(--tct-btn-escape-hover-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-focus-box-shadow: #{var-list(--tct-btn-escape-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n        // different background for hover/active/focus\n        --comp-hover-background: #{var-list(--tct-btn-escape-hover-background, --comp-background-alternative)};\n        --comp-active-background: #{var-list(--tct-btn-escape-active-background, --comp-background-alternative)};\n        --comp-focus-background: #{var-list(--tct-btn-escape-focus-background, --comp-background-alternative)};\n        @include btn-ring(escape, hover, --comp-font-color, --comp-background, null);\n        @include btn-ring(escape, active, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(escape, disabled, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(escape, focus-visible, --const-focus-color, --comp-background, null);\n        @include btn-intent(escape);\n        @include btn-icon-color(escape, --comp-font-color);\n    }\n\n    :host([intent='neutral']) & {\n        --comp-background: #{var-list(--tct-btn-neutral-background, --app-white, #ffffff)};\n        --comp-font-color: #{var-list(\n                --tct-btn-neutral-font-color,\n                --tct-btn-primary-background,\n                --tct-btn-primary-bg,\n                --t-a11y-active-gray-color-AA,\n                #404040\n            )};\n        --comp-box-shadow: #{var-list(--tct-btn-neutral-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-focus-box-shadow: #{var-list(--tct-btn-neutral-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n        // use outline instead border: because on/off border makes the button shaking on hover/focus/active\n        --comp-border-width: 1px;\n        --comp-border-style: solid;\n        --comp-border-color: var(--comp-font-color);\n        @include btn-ring(neutral, hover, --comp-font-color, --app-white, null);\n        @include btn-ring(neutral, active, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(neutral, disabled, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(neutral, focus-visible, --const-focus-color, --comp-background, null);\n        @include btn-intent(neutral);\n        @include btn-icon-color(neutral, --comp-font-color);\n    }\n\n    :host([intent='neutral-text']) & {\n        --comp-background: #{var-list(\n                --tct-btn-neutral-text-background,\n                --tct-btn-neutral-text-bg,\n                --app-white,\n                #ffffff\n            )};\n        --comp-font-color: #{var-list(\n                --tct-btn-neutral-text-font-color,\n                --tct-btn-primary-background,\n                --tct-btn-primary-bg,\n                --t-a11y-active-gray-color-AA,\n                #404040\n            )};\n        --comp-box-shadow: var(--tct-btn-neutral-text-box-shadow);\n        --comp-hover-text-decoration: underline;\n        // different background for focus\n        --comp-focus-background: #{var-list(--tct-btn-neutral-text-focus-background, --comp-background-alternative)};\n        @include btn-ring(neutral-text, hover, --comp-font-color, --comp-background, null);\n        @include btn-ring(neutral-text, active, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(neutral-text, disabled, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(neutral-text, focus-visible, --const-focus-color, --app-white, null);\n        @include btn-intent(neutral-text);\n        @include btn-icon-color(neutral-text, --comp-font-color);\n    }\n\n    // Icons\n    :host(:not([size])) &.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\n    :host(:not([color]):not([intent])),\n    &.icon-only {\n        &:hover,\n        &:focus {\n            background: 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    // Plain\n    :host(:not([intent])) &:not(.icon-only) {\n        height: var-list(--tct-btn-height, auto);\n        padding-inline: var-list(--tct-btn-padding-inline, 0);\n        font-weight: var-list(--tct-btn-font-weight);\n        border-radius: var-list(--tct-btn-border-radius, 0);\n\n        &:hover,\n        &:focus {\n            background: var(--tct-btn-hover-background);\n        }\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\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, Fragment } from '@stencil/core';\nimport {\n    getAriaValueFromProp,\n    handleAriaLabel,\n    handleColor,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    handleDeprecationWarning,\n} from 'src/utils';\n\n@Component({ tag: 'q2-btn', shadow: true, styleUrl: 'q2-btn.scss' })\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() description: string;\n    @Prop() tabIndex: number;\n\n    /**\n     * Displays the component in an active state.\n     *\n     * @info\n     * Only intended for use with the `badge` property.\n     * @deprecated\n     */\n    @Prop({ reflect: true }) active: boolean;\n\n    /**\n     * Displays the component in a smaller, badge style.\n     * @deprecated\n     */\n    @Prop({ reflect: true }) badge: boolean;\n\n    /** The component expands to fill the width of its parent element. */\n    @Prop({ reflect: true }) block: boolean;\n\n    /** Marks the component as disabled and displays a `not-allowed` cursor on hover. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /**\n     * Hides the `label`, and assigns its value to the `aria-label` attribute on the `<button>` element.\n     */\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n    /**\n     * Indicates the role of the component in the workflow, which will apply appropriate styling to the component.\n     */\n    @Prop({ reflect: true, mutable: true }) intent:\n        | 'workflow-primary'\n        | 'workflow-secondary'\n        | 'workflow-destroy'\n        | 'workflow-escape'\n        | 'neutral'\n        | 'neutral-text';\n\n    /**\n     * Defines the text content of the button if it is not provided in the `<slot>` of the element.\n     * Also used for the `aria-label` of the `<button>` element when only displaying an icon.\n     *\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string;\n\n    /** Displays the button with a loading spinner to indicate something is happening in the background and the user should not click again. */\n    @Prop({ reflect: true }) loading: boolean;\n\n    /** The default behavior of the button. */\n    @Prop({ reflect: true }) type: string = 'button';\n\n    /**\n     * @private\n     * Role attribute for better semantic accessibility support\n     */\n    @Prop({ reflect: true }) _role: string;\n\n    /**\n     * Defines the size of q2-btn, it renders as default size if not provided.\n     */\n    @Prop({ reflect: true }) size: 'small' | 'medium' | 'large';\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) color: string; // deprecated but need it to use utils/handleColor\n    /** @deprecated */\n    @Prop({ reflect: true }) fab: boolean;\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @State() iconPosition: 'left' | 'right' | 'only';\n\n    @Element() hostElement: HTMLElement;\n\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n    ////////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        this.handleIcons();\n        handleAriaLabel(this);\n        handleColor(this);\n    }\n\n    componentDidLoad(): void {\n        this.handleButtonSize();\n        overrideFocus(this.hostElement);\n    }\n\n    disconnectedCallback(): void {\n        this.primaryBtn = null;\n        this.primaryBtnWrapper = null;\n    }\n\n    @Listen('click', { capture: true })\n    disable(ev: Event) {\n        if (this.disabled) {\n            ev.stopImmediatePropagation();\n        }\n        this.primaryBtn.focus();\n    }\n\n    @Listen('click', { capture: true })\n    handleClick(ev: Event) {\n        if (this.loading) {\n            ev.stopImmediatePropagation();\n        }\n        this.primaryBtn.focus();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn.focus();\n    }\n\n    //////// Method //////////\n\n    ////////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('size')\n    sizeObserver() {\n        this.handleButtonSize();\n    }\n\n    handleButtonSize = () => {\n        if (Number(this.size) <= 4) {\n            handleDeprecationWarning(this, 'size', 'prop');\n        }\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    renderButton = () => {\n        const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, description, 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        return (\n            <Fragment>\n                <button\n                    ref={el => (this.primaryBtn = el ?? this.primaryBtn)}\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                    aria-describedby={!!description ? 'hidden-description' : undefined}\n                    role={this._role || undefined}\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                {!!description && (\n                    <div\n                        id=\"hidden-description\"\n                        aria-hidden=\"true\"\n                        class=\"sr\"\n                    >\n                        {description}\n                    </div>\n                )}\n            </Fragment>\n        );\n    };\n\n    render = () => {\n        return this.size === 'small' ? (\n            // wrap only for small sized\n            <div\n                class=\"btn-height-wrapper\"\n                ref={el => (this.primaryBtnWrapper = el ?? this.primaryBtnWrapper)}\n                tabIndex={-1}\n            >\n                {this.renderButton()}\n            </div>\n        ) : (\n            this.renderButton()\n        );\n    };\n\n    get buttonAttributes() {\n        return {\n            ariaExpanded: getAriaValueFromProp(this.ariaExpanded, ['true', 'false']),\n            ariaHasPopup: getAriaValueFromProp(this.ariaHasPopup, [\n                'true',\n                'false',\n                'menu',\n                'listbox',\n                'tree',\n                'grid',\n                'dialog',\n            ]),\n            ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,\n            ariaSelected: getAriaValueFromProp(this.ariaSelected, ['true', 'false']),\n            ariaPressed: getAriaValueFromProp(this.ariaPressed, ['true', 'false']),\n            description: this.description !== undefined ? this.description : undefined,\n            disabled: this.disabled || false,\n            type: this.type,\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({ tag: 'q2-loading', shadow: true, styleUrl: 'q2-loading.scss' })\nexport class Q2Loading implements ComponentInterface {\n    /**\n     * Numeric adjustments are available for specific `type` and `shape` combinations.\n     * These may impact the number of items, columns, and/or rows that display.\n     *\n     * When `shape=\"text\"`, `shape=\"detailed-item\"`, or `shape=\"label-value\"`, the `counts` attribute determines the number of rows to display.\n     *\n     * When `shape=\"table\"`, the `counts` attribute can be used in two ways:\n     *\n     * 1. `counts=\"CxR\"` = Provides a skeleton table of `C` columns and `R` rows. The default value is `\"5x5\"\n     * 2. `counts=\"N\"` - Provides a skeleton table of `N` columns and 5 rows.\n     *\n     * When `shape=\"form\"`, the `counts` attribute can be used in two ways:\n     *\n     * 1. `count=\"CxR\" - Provides a skeleton form of `C` columns and `R` rows of fields. The default value is `\"1x1\"`.\n     * 2. `count=\"N\"` - Provides a skeleton form of `N` fields stacked in single columns.\n     */\n    @Prop({ reflect: true }) counts: string;\n\n    /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n    @Prop({ reflect: true }) inline: boolean;\n\n    /**\n     * The label that is associated with the component. This is not displayed visually but is presented by screen readers.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string;\n\n    /**\n     * Visual adjustments available to specific type and shape combinations, written as a hyphen (`-`) separated string.\n     *\n     * Supported values depend on the type and shape selected, and are listed in detail in the shape sections above.\n     */\n    @Prop({ reflect: true }) modifiers: string;\n\n    /**\n     * The specific visual presentation of a loading element `type`.\n     * @snippet\n     * // when type=\"spinner\"\n     * type ShapeValues = \"half-circle\";\n     * // when type=\"skeleton\"\n     * type ShapeValues = \"circle | \"rectangle\" | \"text\" | \"table\" | \"field\" | \"form\" | \"detailed-item\" | \"label-value\";\n     */\n    @Prop({ reflect: true }) shape: string;\n\n    /** The type of loading element to display. */\n    @Prop({ reflect: true }) type: 'spinner' | 'skeleton';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\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":"2KAAA,MAAMA,EAAW,m95CACjB,MAAAC,EAAeD,E,MCWFE,EAAK,M,yBAyIdC,KAAAC,iBAAmB,KACf,GAAIC,OAAOF,KAAKG,OAAS,EAAG,CACxBC,EAAyBJ,KAAM,OAAQ,O,GAI/CA,KAAAK,iBAAmB,KACfL,KAAKM,aAAa,EAGtBN,KAAAM,YAAc,KAEV,MAAMC,EAAOC,MAAMC,KAAKT,KAAKU,YAAYC,iBAAiB,qBAAqBC,QAAO,CAACC,EAAKC,KACxF,GAAID,EAAKC,EAAQC,cACZF,EAAMC,EACX,OAAOD,CAAG,GACX,MAEH,MAAMG,IAAYT,EAClB,MAAMU,IAAWjB,KAAKU,YAAYQ,cAAc,UAChD,MAAMC,IAAYnB,KAAKU,YAAYU,YAAYC,OAC/C,MAAMC,GAAeL,GAAUE,IAAYH,GAAWhB,KAAKU,YAAYa,oBAAsBhB,EAC7F,MAAMiB,GAAgBP,GAAUE,IAAYH,GAAWhB,KAAKU,YAAYe,mBAAqBlB,EAC7F,MAAMmB,GAAeJ,IAAgBE,GAAgBR,EAErD,IAAIW,EACJ,GAAID,EAAaC,EAAe,YAC3B,GAAIL,EAAaK,EAAe,YAChC,GAAIH,EAAcG,EAAe,QACtC3B,KAAK2B,aAAeA,CAAY,EAGpC3B,KAAA4B,aAAe,KACX,MAAMC,aAAEA,EAAYC,aAAEA,EAAYC,aAAEA,EAAYC,YAAEA,EAAWC,YAAEA,EAAWC,SAAEA,EAAQC,KAAEA,EAAIC,SAAEA,GACxFpC,KAAKqC,iBACT,MAAMV,aAAEA,EAAYW,QAAEA,EAAOC,MAAEA,EAAKC,MAAEA,EAAKC,UAAEA,GAAczC,KAC3D,MAAM0C,EAAuBf,GAAgBW,EAC7C,MAAMK,GAA0BhB,GAAgBY,EAChD,OACIK,EAACC,EAAQ,KACLD,EAAA,UACIE,IAAKC,GAAO/C,KAAKgD,WAAaD,IAAE,MAAFA,SAAE,EAAFA,EAAM/C,KAAKgD,WAAW,gBACrCnB,EAAY,gBACZC,EAAY,aACfW,GAAaQ,EAAIT,GAAM,gBACpBT,EAAY,eACbC,EACdE,SAAUA,EACVC,KAAMA,EACNC,SAAUA,EAAQ,UACV,mBACRc,MAAOvB,EAAe,QAAQA,IAAiB,GAAE,qBAC7BM,EAAc,qBAAuBkB,UACzDC,KAAMpD,KAAKqD,OAASF,WAEpBP,EAAA,WACKF,GACGE,EAAA,cACIU,QAAShB,EACTiB,UAAWZ,EAAyB,SAAWQ,aAGrDV,GAAaD,EAAQS,EAAIT,GAASI,EAAA,QAAMY,aAAcxD,KAAKK,uBAGlE4B,GACCW,EAAA,OACIa,GAAG,qBAAoB,cACX,OACZP,MAAM,MAELjB,GAGF,EAInBjC,KAAA0D,OAAS,IACE1D,KAAKG,OAAS,QAEjByC,EAAA,OACIM,MAAM,qBACNJ,IAAKC,GAAO/C,KAAK2D,kBAAoBZ,IAAE,MAAFA,SAAE,EAAFA,EAAM/C,KAAK2D,kBAChDC,UAAW,GAEV5D,KAAK4B,gBAGV5B,KAAK4B,e,2XAxK2B,S,sIA2BxC,iBAAAiC,GACI7D,KAAKM,cACLwD,EAAgB9D,MAChB+D,EAAY/D,K,CAGhB,gBAAAgE,GACIhE,KAAKC,mBACLgE,EAAcjE,KAAKU,Y,CAGvB,oBAAAwD,GACIlE,KAAKgD,WAAa,KAClBhD,KAAK2D,kBAAoB,I,CAI7B,OAAAQ,CAAQC,GACJ,GAAIpE,KAAKkC,SAAU,CACfkC,EAAGC,0B,CAEPrE,KAAKgD,WAAWsB,O,CAIpB,WAAAC,CAAYH,GACR,GAAIpE,KAAKsC,QAAS,CACd8B,EAAGC,0B,CAEPrE,KAAKgD,WAAWsB,O,CAIpB,aAAAE,CAAcC,GACV,IAAKC,EAAmBD,EAAOzE,KAAKU,aAAc,OAClDV,KAAKgD,WAAWsB,O,CAQpB,iBAAAK,GACIb,EAAgB9D,K,CAIpB,YAAA4E,GACI5E,KAAKC,kB,CAgGT,oBAAIoC,GACA,MAAO,CACHR,aAAcgD,EAAqB7E,KAAK6B,aAAc,CAAC,OAAQ,UAC/DC,aAAc+C,EAAqB7E,KAAK8B,aAAc,CAClD,OACA,QACA,OACA,UACA,OACA,OACA,WAEJgD,UAAW9E,KAAKwC,OAASxC,KAAKyC,UAAYQ,EAAIjD,KAAKwC,OAASW,UAC5DpB,aAAc8C,EAAqB7E,KAAK+B,aAAc,CAAC,OAAQ,UAC/DC,YAAa6C,EAAqB7E,KAAKgC,YAAa,CAAC,OAAQ,UAC7DC,YAAajC,KAAKiC,cAAgBkB,UAAYnD,KAAKiC,YAAckB,UACjEjB,SAAUlC,KAAKkC,UAAY,MAC3BC,KAAMnC,KAAKmC,KACXC,SAAUpC,KAAK4D,UAAYT,U,kICpQvC,MAAM4B,EAAe,w2IACrB,MAAAC,EAAeD,E,MCIFE,EAAS,M,yBA6GlBjF,KAAAkF,kBAAoB,IAEZtC,EAAA,OACIM,MAAM,2CAA0C,aACpClD,KAAKmF,gBAEjBvC,EAAA,OAAKM,MAAM,oBACXN,EAAA,OAAKM,MAAM,qBAKvBlD,KAAAoF,QAAU,IACCpF,KAAKkF,oBAGhBlF,KAAAqF,eAAiB,IAETzC,EAAA,OACIM,MAAM,sBAAqB,aACflD,KAAKmF,gBAEhBnF,KAAKsF,QAAU,SAAW1C,EAAA,aAAW5C,KAAKuF,cAC3C3C,EAAA,OAAKM,MAAM,iC,4JA/EvB,UAAIsC,GACA,MAAMC,EAAY,CACdC,QAAS1F,KAAKoF,QACdA,QAASpF,KAAKoF,QACdO,SAAU3F,KAAKqF,gBAGnB,OAAOI,EAAUzF,KAAKmC,OAASsD,EAAUC,O,CAG7C,gBAAIE,GACA,GAAI5F,KAAKmC,OAAS,aAAenC,KAAKuD,UAAW,CAC7C,OAAOJ,S,CAGX,OAAO,IAAI0C,IAAI7F,KAAKuD,UAAUuC,MAAM,K,CAGxC,eAAIC,GACA,GAAI/F,KAAKmC,OAAS,aAAenC,KAAKgG,OAAQ,CAC1C,OAAO7C,S,CAGX,OAAOnD,KAAKgG,OAAOF,MAAM,KAAKG,IAAI/F,O,CAGtC,iBAAIqF,G,QACA,OAAOW,GAAAC,EAAAC,EAAepG,KAAKsF,UAAM,MAAAa,SAAA,SAAAA,EAAAE,KAAAC,EAAGtG,KAAK+F,YAAa/F,KAAK4F,iBAAa,MAAAM,SAAA,EAAAA,EAAI,E,CAGhF,gBAAIK,GACA,MAAMC,EAAa,CACfd,QAAS1F,KAAKkF,kBACd,cAAelF,KAAKkF,mBAGxB,OAAOsB,EAAWxG,KAAKmC,OAASqE,EAAWd,O,CAG/C,kBAAIP,GACA,OAAOlC,EAAIjD,KAAKwC,OAAS,mC,CAG7B,iBAAAqB,GACIC,EAAgB9D,K,CAIpB,iBAAA2E,GACIb,EAAgB9D,K,CAGpB,MAAA0D,GACI,OAAO1D,KAAKwF,Q"}

package/dist/q2-tecton-elements/{p-a3d58a50.entry.js → p-ccbc168f.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as s,H as i,g as n}from"./p-a5f18e27.js";import{n as o,l as h,o as a,w as c,q as r,i as l}from"./p-84190698.js";const d="*{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 #0066cc)}: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{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";const f=d;const p=class{constructor(s){t(this,s);this.change=e(this,"change",7);this.popoverState=e(this,"popoverState",7);this.ready=e(this,"ready",3);this.scheduledAfterRender=[];this.keyStore={queue:[],lastPressedAt:new Date};this.searchAndFocus=(t,e)=>{const s=()=>{this.pivotIndex=this.pivotIndex===undefined?0:(this.activeIndex||0)+1;const t=this.allOptions.map(((t,e)=>({element:t,index:e})));return[...t.slice(this.pivotIndex),...t.slice(0,this.pivotIndex)]};const i=()=>{const e=new Date;if(e.getTime()-this.keyStore.lastPressedAt.getTime()>1e3){this.keyStore.queue.length=0}if(this.keyStore.queue.length!==1||this.keyStore.queue[0]!==t){this.keyStore.queue.push(t)}this.keyStore.lastPressedAt=e};const n=t=>{const e=this.keyStore.queue.join("");return t.find((t=>!t.element.disabled&&t.element.display&&(t.element.display.match(new RegExp(`^${e}`,"i"))||t.element.display.replace(/\s/g,"").match(new RegExp(`^${e}`,"i")))))};const o=({index:t})=>{if(this.multiple){this.openDropdownWithActiveElement(t)}else{this.activeIndex=t;if(e){this.selectOption(this.allOptions[t]);this.popoverState.emit({open:false,action:"select"})}else this.setActiveElement(t)}};i();const h=n(s());if(h){o(h)}};this.externalKeydownHandler=t=>{t.stopPropagation();const{activeIndex:e,customSearch:s,allOptions:i}=this;const{key:n}=t;let h;switch(n){case" ":if(this.searchString){if(s)break;this.searchOptions(n,true);break}else if(this.type==="menu"){this.activeIndex=0;this.openDropdownWithActiveElement(0)}else{this.setDefaultActiveElement();o((()=>this.popoverState.emit({open:true,action:"open"})))}break;case"Enter":if(this.type==="menu"){this.activeIndex=0;this.openDropdownWithActiveElement(0)}else{this.setDefaultActiveElement();o((()=>this.popoverState.emit({open:true,action:"open"})))}break;case"ArrowUp":t.preventDefault();this.activeIndex=0;h=!!this.selectedOptions.length?this.getDefaultActiveIndex():this.getNextVisibleIndex(-1);if(h===-1)break;this.openDropdownWithActiveElement(h);break;case"ArrowDown":t.preventDefault();this.activeIndex=0;h=!!this.selectedOptions.length?this.getDefaultActiveIndex():this.getNextVisibleIndex(0);if(h===-1)break;this.openDropdownWithActiveElement(h);break;case"Home":t.preventDefault();this.openDropdownWithActiveElement(0);break;case"End":t.preventDefault();this.openDropdownWithActiveElement(i.length-1);break;case"PageUp":t.preventDefault();this.openDropdownWithActiveElement(Math.max((e||0)-10,0));break;case"PageDown":t.preventDefault();this.openDropdownWithActiveElement(Math.min((e||0)+10,i.length-1));break;case"Tab":this.popoverState.emit({open:false,action:"close"});break;case"Esc":case"Escape":if(this.noSelect)this.setActiveElement(null);this.popoverState.emit({open:false,action:"close"});break;default:if(s)break;if(!n.match(/^[\w]$/))break;this.searchOptions(n,true);break}};this.internalKeydownHandler=t=>{t.stopPropagation();const{activeIndex:e,customSearch:s,allOptions:i,multiple:n}=this;const{key:o,shiftKey:h}=t;let a;switch(o){case" ":if(this.searchString&&!this.multiple){if(s)break;this.searchOptions(o,false);break}t.preventDefault();a=i.find((t=>t.active));if(!a||a.disabled)break;this.selectOption(a);if(n)break;this.popoverState.emit({open:false,action:"select"});break;case"Enter":t.preventDefault();a=i.find((t=>t.active));if(!a||a.disabled)break;this.selectOption(a);if(n)break;this.popoverState.emit({open:false,action:"select"});break;case"ArrowUp":t.preventDefault();const c=e===0;if(c)break;if(e===undefined){this.setDefaultActiveElement();break}else{const t=this.getNextVisibleIndex(-1);if(t===-1)break;this.adjustActiveOptionAndScroll(t-e);break}case"ArrowDown":t.preventDefault();const r=e===i.length-1;if(r)break;if(e===undefined){this.setDefaultActiveElement();break}else{const t=this.getNextVisibleIndex(1);if(t===-1)break;this.adjustActiveOptionAndScroll(t-e);break}case"Home":t.preventDefault();this.openDropdownWithActiveElement(0);break;case"End":t.preventDefault();this.openDropdownWithActiveElement(i.length-1);break;case"PageUp":t.preventDefault();this.openDropdownWithActiveElement(Math.max(e-10,0));break;case"PageDown":t.preventDefault();this.openDropdownWithActiveElement(Math.min(e+10,i.length-1));break;case"Tab":if(h)break;if(this.multiple&&this.type==="listbox")break;a=i.find((t=>t.active));if(!a||a.disabled)return;this.selectOption(a);break;case"Esc":case"Escape":if(this.noSelect)this.setActiveElement(null);this.popoverState.emit({open:false,action:"close"});break;default:if(s)break;if(!o.match(/^[\w]$/))break;this.searchOptions(o,false);break}};this.focusoutHandler=t=>{const{relatedTarget:e}=t;const s=this.allOptions.includes(e);const i=!s&&this.hostElement.contains(e);if(s||i){t.stopPropagation()}};this.clickHandler=t=>{const e=t.target;const s=e.closest("q2-option");this.selectOption(s);if(this.multiple)return;this.popoverState.emit({open:false,action:"select"})};this.align=undefined;this.customSearch=undefined;this.disabled=undefined;this.label=h("tecton.element.optionList.label");this.multiple=undefined;this.noSelect=undefined;this.selectedOptions=[];this.showSelected=undefined;this.type="listbox";this.hasOptions=undefined}componentWillLoad(){this.hasOptions=!!this.hostElement.querySelectorAll("q2-option").length}componentDidLoad(){a(this.hostElement);this.checkOptions();this.selectedOptionsUpdated();this.ready.emit()}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}get allContents(){const t=this.getRootSlot(this.hostElement);const e=["Q2-OPTGROUP","Q2-OPTION"];return t.filter((t=>e.includes(t.tagName)))}get allOptions(){const t=this.allContents;const e=t=>t.reduce(((t,s)=>{if(s.tagName==="Q2-OPTGROUP"){return[...t,...e(Array.from(s.children))]}else if(s.tagName==="Q2-OPTION"){return[...t,s]}else{return t}}),[]);return e(t)}get allVisibleOptions(){return this.allOptions.filter((t=>!t.hidden&&!t._multiSelectHidden&&!t.disabled&&!t.disabledGroup))}async checkOptions(){const{type:t}=this;const e=await this.getOptions();if(!t)return;const s=t==="menu"?"menuitem":"option";e.forEach((t=>{t.role=s}))}getRootSlot(t){var e;const s=t.querySelector("slot");const i=(e=s===null||s===void 0?void 0:s.assignedElements())!==null&&e!==void 0?e:Array.from(t.children);const n=!!i.length&&i[0].tagName==="SLOT";if(n){return this.getRootSlot(i[0])}else{return i}}scrollToActiveOption(){const t=this.allOptions[this.activeIndex];t===null||t===void 0?void 0:t.scrollIntoView({block:"nearest"})}async openDropdownWithActiveElement(t){if(this.disabled)return;this.activeIndex=t;this.popoverState.emit({open:true,action:"open"});await c();this.setActiveOption();await c();this.setFocusedOption();this.scrollToActiveOption()}getDefaultActiveIndex(){const{allOptions:t}=this;const e=t.findIndex((t=>t.selected));if(e>-1)return e;const s=t.findIndex((t=>!t.hidden));if(s>-1)return s;return 0}updateSingleOptionAttrs(){var t;const{allOptions:e,selectedOptions:s}=this;const i=((t=s[0])===null||t===void 0?void 0:t.value)||undefined;e.forEach((t=>{t.selected=t.value===i}))}updateMultipleOptionAttrs(){const{allOptions:t,selectedOptions:e}=this;const s=e.map((({value:t})=>t));t.forEach((t=>{t.selected=s.includes(t.value)}))}setActiveOption(){const t=this.activeIndex;this.allOptions.forEach(((e,s)=>{e.active=t===s}))}setFocusedOption(){const t=this.allOptions[this.activeIndex];if(!t)return;const e=r(t);if(e)t.focus();else o((()=>t.focus()))}getNextVisibleIndex(t){const{allVisibleOptions:e,allOptions:s,activeIndex:i}=this;const n=s[i];const o=e.indexOf(n);let h=o+t;if(h<0){h=e.length-1}else if(h>e.length-1){h=0}const a=e[h];return s.indexOf(a)}focusSelectedSibling(t){const{allVisibleOptions:e,allOptions:s}=this;const i=e.length<2;if(i){this.showSelected=false;return}const n=e.indexOf(t);const o=n?n-1:n+1;const h=e[o];const a=s.indexOf(h);this.activeIndex=a;this.setFocusedOption();this.scheduledAfterRender.push((()=>{t._multiSelectHidden=!t.selected}))}selectOption(t){const{multiple:e,noSelect:s,showSelected:i}=this;if(!t||t.disabled||t.disabledGroup)return;const n=t.value;const o={value:n,display:t.display||t.innerText.trim()};let h=[];if(e){const{selectedOptions:e}=this;const s=e.find((t=>t.value===n));if(s){h=e.filter((({value:t})=>t!==n))}else{h=[...e,o]}if(i)this.focusSelectedSibling(t)}else{h=[o]}if(s)this.setActiveElement(null);else this.selectedOptions=h;this.change.emit({value:n,values:h})}adjustActiveOptionAndScroll(t){this.activeIndex+=t;this.setActiveOption();this.setFocusedOption();this.scrollToActiveOption()}resetTimer(){if(this.searchStringTimer){clearTimeout(this.searchStringTimer)}this.searchStringTimer=window.setTimeout((()=>{this.searchString=null}),2e3)}searchOptions(t,e){this.searchString=t;this.searchAndFocus(t,e)}showSelectedUpdated(t){if(t&&this.selectedOptions.length===0){this.showSelected=false;return}this.allOptions.forEach((e=>e._multiSelectHidden=t?!e.selected:false))}selectedOptionsUpdated(){if(this.multiple){this.updateMultipleOptionAttrs()}else{this.updateSingleOptionAttrs()}}delegateFocus(t){if(!l(t,this.hostElement))return;this.popoverState.emit({open:true,action:"open"});const{activeIndex:e}=this;if(typeof e==="number"&&e>-1){this.setActiveOption();this.setFocusedOption()}else{this.setDefaultActiveElement()}}handleClick(t){t.stopPropagation()}async setDefaultActiveElement(){this.activeIndex=this.getDefaultActiveIndex();this.setActiveOption();this.setFocusedOption()}async setActiveElement(t){this.activeIndex=t;this.setActiveOption();this.setFocusedOption()}async handleExternalKeydown(t){this.externalKeydownHandler(t)}async getContents(){return this.allContents}async getOptions(){return this.allOptions}render(){return s(i,{key:"c3c1aa149c1696c2025e7be8d0185a500cdc40e1"},s("div",{key:"0788af1766ce408de56b8d56f87898c048dfd618",class:"content",ref:t=>this.contentElement=t,onFocusout:this.focusoutHandler},s("div",{key:"04341860dc01b4c64905bdead1125adc03c3d036",class:"options","aria-label":h("tecton.element.optionList.label",[this.label]),"aria-multiselectable":`${!!this.multiple}`,role:this.type||"listbox",onKeyDown:this.internalKeydownHandler,onClick:this.clickHandler},s("slot",{key:"e1fa1fc07a9dd268a84491177a6c8e15632f3afa"}))))}get hostElement(){return n(this)}static get watchers(){return{showSelected:["showSelectedUpdated"],selectedOptions:["selectedOptionsUpdated"]}}};p.style=f;export{p as q2_option_list};
-//# sourceMappingURL=p-a3d58a50.entry.js.map
+import{r as t,c as e,h as s,H as i,g as n}from"./p-a5f18e27.js";import{n as o,l as h,o as a,w as c,q as r,i as l}from"./p-84190698.js";const d="*{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 #0066cc)}: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{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";const f=d;const p=class{constructor(s){t(this,s);this.change=e(this,"change",7);this.popoverState=e(this,"popoverState",7);this.ready=e(this,"ready",3);this.scheduledAfterRender=[];this.keyStore={queue:[],lastPressedAt:new Date};this.searchAndFocus=(t,e)=>{const s=()=>{this.pivotIndex=this.pivotIndex===undefined?0:(this.activeIndex||0)+1;const t=this.allOptions.map(((t,e)=>({element:t,index:e})));return[...t.slice(this.pivotIndex),...t.slice(0,this.pivotIndex)]};const i=()=>{const e=new Date;if(e.getTime()-this.keyStore.lastPressedAt.getTime()>1e3){this.keyStore.queue.length=0}if(this.keyStore.queue.length!==1||this.keyStore.queue[0]!==t){this.keyStore.queue.push(t)}this.keyStore.lastPressedAt=e};const n=t=>{const e=this.keyStore.queue.join("");return t.find((t=>!t.element.disabled&&t.element.display&&(t.element.display.match(new RegExp(`^${e}`,"i"))||t.element.display.replace(/\s/g,"").match(new RegExp(`^${e}`,"i")))))};const o=({index:t})=>{if(this.multiple){this.openDropdownWithActiveElement(t)}else{this.activeIndex=t;if(e){this.selectOption(this.allOptions[t]);this.popoverState.emit({open:false,action:"select"})}else this.setActiveElement(t)}};i();const h=n(s());if(h){o(h)}};this.externalKeydownHandler=t=>{t.stopPropagation();const{activeIndex:e,customSearch:s,allOptions:i}=this;const{key:n}=t;let h;switch(n){case" ":if(this.searchString){if(s)break;this.searchOptions(n,true);break}else if(this.type==="menu"){this.activeIndex=0;this.openDropdownWithActiveElement(0)}else{this.setDefaultActiveElement();o((()=>this.popoverState.emit({open:true,action:"open"})))}break;case"Enter":if(this.type==="menu"){this.activeIndex=0;this.openDropdownWithActiveElement(0)}else{this.setDefaultActiveElement();o((()=>this.popoverState.emit({open:true,action:"open"})))}break;case"ArrowUp":t.preventDefault();this.activeIndex=0;h=!!this.selectedOptions.length?this.getDefaultActiveIndex():this.getNextVisibleIndex(-1);if(h===-1)break;this.openDropdownWithActiveElement(h);break;case"ArrowDown":t.preventDefault();this.activeIndex=0;h=!!this.selectedOptions.length?this.getDefaultActiveIndex():this.getNextVisibleIndex(0);if(h===-1)break;this.openDropdownWithActiveElement(h);break;case"Home":t.preventDefault();this.openDropdownWithActiveElement(0);break;case"End":t.preventDefault();this.openDropdownWithActiveElement(i.length-1);break;case"PageUp":t.preventDefault();this.openDropdownWithActiveElement(Math.max((e||0)-10,0));break;case"PageDown":t.preventDefault();this.openDropdownWithActiveElement(Math.min((e||0)+10,i.length-1));break;case"Tab":this.popoverState.emit({open:false,action:"close"});break;case"Esc":case"Escape":if(this.noSelect)this.setActiveElement(null);this.popoverState.emit({open:false,action:"close"});break;default:if(s)break;if(!n.match(/^[\w]$/))break;this.searchOptions(n,true);break}};this.internalKeydownHandler=t=>{t.stopPropagation();const{activeIndex:e,customSearch:s,allOptions:i,multiple:n}=this;const{key:o,shiftKey:h}=t;let a;switch(o){case" ":if(this.searchString&&!this.multiple){if(s)break;this.searchOptions(o,false);break}t.preventDefault();a=i.find((t=>t.active));if(!a||a.disabled)break;this.selectOption(a);if(n)break;this.popoverState.emit({open:false,action:"select"});break;case"Enter":t.preventDefault();a=i.find((t=>t.active));if(!a||a.disabled)break;this.selectOption(a);if(n)break;this.popoverState.emit({open:false,action:"select"});break;case"ArrowUp":t.preventDefault();const c=e===0;if(c)break;if(e===undefined){this.setDefaultActiveElement();break}else{const t=this.getNextVisibleIndex(-1);if(t===-1)break;this.adjustActiveOptionAndScroll(t-e);break}case"ArrowDown":t.preventDefault();const r=e===i.length-1;if(r)break;if(e===undefined){this.setDefaultActiveElement();break}else{const t=this.getNextVisibleIndex(1);if(t===-1)break;this.adjustActiveOptionAndScroll(t-e);break}case"Home":t.preventDefault();this.openDropdownWithActiveElement(0);break;case"End":t.preventDefault();this.openDropdownWithActiveElement(i.length-1);break;case"PageUp":t.preventDefault();this.openDropdownWithActiveElement(Math.max(e-10,0));break;case"PageDown":t.preventDefault();this.openDropdownWithActiveElement(Math.min(e+10,i.length-1));break;case"Tab":if(h)break;if(this.multiple&&this.type==="listbox")break;a=i.find((t=>t.active));if(!a||a.disabled)return;this.selectOption(a);break;case"Esc":case"Escape":if(this.noSelect)this.setActiveElement(null);this.popoverState.emit({open:false,action:"close"});break;default:if(s)break;if(!o.match(/^[\w]$/))break;this.searchOptions(o,false);break}};this.focusoutHandler=t=>{const{relatedTarget:e}=t;const s=this.allOptions.includes(e);const i=!s&&this.hostElement.contains(e);if(s||i){t.stopPropagation()}};this.clickHandler=t=>{const e=t.target;const s=e.closest("q2-option");this.selectOption(s);if(this.multiple)return;this.popoverState.emit({open:false,action:"select"})};this.align=undefined;this.customSearch=undefined;this.disabled=undefined;this.label=h("tecton.element.optionList.label");this.multiple=undefined;this.noSelect=undefined;this.selectedOptions=[];this.showSelected=undefined;this.type="listbox";this.hasOptions=undefined}componentWillLoad(){this.hasOptions=!!this.hostElement.querySelectorAll("q2-option").length}componentDidLoad(){a(this.hostElement);this.checkOptions();this.selectedOptionsUpdated();this.ready.emit()}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}get allContents(){const t=this.getRootSlot(this.hostElement);const e=["Q2-OPTGROUP","Q2-OPTION"];return t.filter((t=>e.includes(t.tagName)))}get allOptions(){const t=this.allContents;const e=t=>t.reduce(((t,s)=>{if(s.tagName==="Q2-OPTGROUP"){return[...t,...e(Array.from(s.children))]}else if(s.tagName==="Q2-OPTION"){return[...t,s]}else{return t}}),[]);return e(t)}get allVisibleOptions(){return this.allOptions.filter((t=>!t.hidden&&!t._multiSelectHidden&&!t.disabled&&!t.disabledGroup))}async checkOptions(){const{type:t}=this;const e=await this.getOptions();if(!t)return;const s=t==="menu"?"menuitem":"option";e.forEach((t=>{t.role=s}))}getRootSlot(t){var e;const s=t.querySelector("slot");const i=(e=s===null||s===void 0?void 0:s.assignedElements())!==null&&e!==void 0?e:Array.from(t.children);const n=!!i.length&&i[0].tagName==="SLOT";if(n){return this.getRootSlot(i[0])}else{return i}}scrollToActiveOption(){const t=this.allOptions[this.activeIndex];t===null||t===void 0?void 0:t.scrollIntoView({block:"nearest"})}async openDropdownWithActiveElement(t){if(this.disabled)return;this.activeIndex=t;this.popoverState.emit({open:true,action:"open"});await c();this.setActiveOption();await c();this.setFocusedOption();this.scrollToActiveOption()}getDefaultActiveIndex(){const{allOptions:t}=this;const e=t.findIndex((t=>t.selected));if(e>-1)return e;const s=t.findIndex((t=>!t.hidden));if(s>-1)return s;return 0}updateSingleOptionAttrs(){var t;const{allOptions:e,selectedOptions:s}=this;const i=((t=s[0])===null||t===void 0?void 0:t.value)||undefined;e.forEach((t=>{t.selected=t.value===i}))}updateMultipleOptionAttrs(){const{allOptions:t,selectedOptions:e}=this;const s=e.map((({value:t})=>t));t.forEach((t=>{t.selected=s.includes(t.value)}))}setActiveOption(){const t=this.activeIndex;this.allOptions.forEach(((e,s)=>{e.active=t===s}))}setFocusedOption(){const t=this.allOptions[this.activeIndex];if(!t)return;const e=r(t);if(e)t.focus();else o((()=>t.focus()))}getNextVisibleIndex(t){const{allVisibleOptions:e,allOptions:s,activeIndex:i}=this;const n=s[i];const o=e.indexOf(n);let h=o+t;if(h<0){h=e.length-1}else if(h>e.length-1){h=0}const a=e[h];return s.indexOf(a)}focusSelectedSibling(t){const{allVisibleOptions:e,allOptions:s}=this;const i=e.length<2;if(i){this.showSelected=false;return}const n=e.indexOf(t);const o=n?n-1:n+1;const h=e[o];const a=s.indexOf(h);this.activeIndex=a;this.setFocusedOption();this.scheduledAfterRender.push((()=>{t._multiSelectHidden=!t.selected}))}selectOption(t){const{multiple:e,noSelect:s,showSelected:i}=this;if(!t||t.disabled||t.disabledGroup)return;const n=t.value;const o={value:n,display:t.display||t.innerText.trim()};let h=[];if(e){const{selectedOptions:e}=this;const s=e.find((t=>t.value===n));if(s){h=e.filter((({value:t})=>t!==n))}else{h=[...e,o]}if(i)this.focusSelectedSibling(t)}else{h=[o]}if(s)this.setActiveElement(null);else this.selectedOptions=h;this.change.emit({value:n,values:h})}adjustActiveOptionAndScroll(t){this.activeIndex+=t;this.setActiveOption();this.setFocusedOption();this.scrollToActiveOption()}resetTimer(){if(this.searchStringTimer){clearTimeout(this.searchStringTimer)}this.searchStringTimer=window.setTimeout((()=>{this.searchString=null}),2e3)}searchOptions(t,e){this.searchString=t;this.searchAndFocus(t,e)}showSelectedUpdated(t){if(t&&this.selectedOptions.length===0){this.showSelected=false;return}this.allOptions.forEach((e=>e._multiSelectHidden=t?!e.selected:false))}selectedOptionsUpdated(){if(this.multiple){this.updateMultipleOptionAttrs()}else{this.updateSingleOptionAttrs()}}delegateFocus(t){if(!l(t,this.hostElement))return;this.popoverState.emit({open:true,action:"open"});const{activeIndex:e}=this;if(typeof e==="number"&&e>-1){this.setActiveOption();this.setFocusedOption()}else{this.setDefaultActiveElement()}}handleClick(t){t.stopPropagation()}async setDefaultActiveElement(){this.activeIndex=this.getDefaultActiveIndex();this.setActiveOption();this.setFocusedOption()}async setActiveElement(t){this.activeIndex=t;this.setActiveOption();this.setFocusedOption()}async handleExternalKeydown(t){this.externalKeydownHandler(t)}async getContents(){return this.allContents}async getOptions(){return this.allOptions}render(){return s(i,{key:"d506ec65b607d11ce3131fb4084c2a9a1ae93aab"},s("div",{key:"a2fa4b5d44ce4c2682831a9f08ff5e2bca0bde9d",class:"content",ref:t=>this.contentElement=t,onFocusout:this.focusoutHandler},s("div",{key:"75f5729faf1ad67eb678903e7f77d6b26523292a",class:"options","aria-label":h("tecton.element.optionList.label",[this.label]),"aria-multiselectable":`${!!this.multiple}`,role:this.type||"listbox",onKeyDown:this.internalKeydownHandler,onClick:this.clickHandler},s("slot",{key:"64fb06204cfc686108fdcbc1d395fe9d89dafd1a"}))))}get hostElement(){return n(this)}static get watchers(){return{showSelected:["showSelectedUpdated"],selectedOptions:["selectedOptionsUpdated"]}}};p.style=f;export{p as q2_option_list};
+//# sourceMappingURL=p-ccbc168f.entry.js.map

package/dist/q2-tecton-elements/{p-f18caa3f.entry.js → p-d6c8d94d.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as e,g as a}from"./p-a5f18e27.js";import{k as s,o,n as r,i,l as n}from"./p-84190698.js";const c="*{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 #0066cc)}: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){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}: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){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}: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, #d20a0a))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}";const p=c;const d=class{constructor(e){t(this,e);this.appearance="standard";this.description=false;this.type="info";this.presentToggle=undefined}get isFirefox(){return s()}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 a=t&&this.presentToggle;const s=!t&&this.presentToggle;const{description:o}=this;const r=n(`tecton.element.message.type.${this.type?this.type:"info"}`);return e("div",{key:"48c08c15096e1787af65a9d847a191f5b7ee7100",tabindex:"-1",class:"message",role:o?undefined:"alert","aria-live":o?undefined:"assertive","aria-atomic":o?undefined:"true","aria-relevant":o&&a?undefined:"all","test-id":"messageContainer"},this.appearance==="standard"?this.messageIcon(this.type):"",s&&e("div",{key:"4d673d2bdf92f56606ab1075d8af807992982a57",class:"sr"}),e("div",{key:"c31396c4d2aaed7b2d6ee96e33697e7c14c814af",class:"sr message-label"},r),e("div",{key:"9bedced6017fa3da2024ce713688e4b5b006f563",class:"message-content","aria-hidden":a?"true":undefined},e("slot",{key:"b3d452032ef55d3aca7ea63768f820a522241ba6"})))}messageIcon(t){const a={success:"success",warning:"warning",danger:"error",error:"error",info:"info"};const s=a[t]||a.info;return e("q2-icon",{type:s,class:"message-icon"})}get hostElement(){return a(this)}};d.style=p;export{d as q2_message};
-//# sourceMappingURL=p-f18caa3f.entry.js.map
+import{r as t,h as e,g as a}from"./p-a5f18e27.js";import{k as s,o,n as r,i,l as n}from"./p-84190698.js";const c="*{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 #0066cc)}: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){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}: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){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}: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, #d20a0a))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}";const p=c;const d=class{constructor(e){t(this,e);this.appearance="standard";this.description=false;this.type="info";this.presentToggle=undefined}get isFirefox(){return s()}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 a=t&&this.presentToggle;const s=!t&&this.presentToggle;const{description:o}=this;const r=n(`tecton.element.message.type.${this.type?this.type:"info"}`);return e("div",{key:"7803d7b21356ca0c70883387b8add4a6babd192c",tabindex:"-1",class:"message",role:o?undefined:"alert","aria-live":o?undefined:"assertive","aria-atomic":o?undefined:"true","aria-relevant":o&&a?undefined:"all","test-id":"messageContainer"},this.appearance==="standard"?this.messageIcon(this.type):"",s&&e("div",{key:"18bc8892294dc16d5668a2c10b80e2b3c21bf94c",class:"sr"}),e("div",{key:"00c9adcd0ce6a0021baf03041443a12d3673908a",class:"sr message-label"},r),e("div",{key:"6d697ed20f5ceef552d819f2b22212ee750f06a6",class:"message-content","aria-hidden":a?"true":undefined},e("slot",{key:"789fd82fdd39c79b1ca48f3e353c7ebd3abe82b7"})))}messageIcon(t){const a={success:"success",warning:"warning",danger:"error",error:"error",info:"info"};const s=a[t]||a.info;return e("q2-icon",{type:s,class:"message-icon"})}get hostElement(){return a(this)}};d.style=p;export{d as q2_message};
+//# sourceMappingURL=p-d6c8d94d.entry.js.map

package/dist/q2-tecton-elements/{p-a03c29f3.entry.js → p-def9be7b.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,g as r}from"./p-a5f18e27.js";import{c as o,e as s}from"./p-84190698.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 #0066cc)}: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{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:var(--tct-input-error-padding, 0);margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))), var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgb(255, 255, 255))))}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));color:var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}";const a=n;const d=class{constructor(i){t(this,i);this.change=e(this,"change",7);this._id=`checkbox-group-${o()}`;this.onMutationObserved=()=>{this.updateValue();this.updateDisabled();this.updateReadonly()};this.onInnerCheckboxChange=t=>{t.stopImmediatePropagation();const e={};setTimeout((()=>{this.checkboxElements.forEach((t=>{e[t.value]=!!t.checked}));this.change.emit(e)}),0)};this.disabled=undefined;this.hasError=undefined;this.hideLabel=undefined;this.label=undefined;this.optional=undefined;this.readonly=undefined;this.value=undefined}get inputId(){return this._id}get checkboxElements(){return Array.from(this.hostElement.querySelectorAll("q2-checkbox"))}get protectedValue(){return this.value||{}}updateValue(){if(this.readonly)return;this.checkboxElements.forEach((t=>{if(this.protectedValue.hasOwnProperty(t.value)){t.checked=this.value[t.value]}}))}updateDisabled(){const t=this.disabled;this.checkboxElements.forEach((e=>{e.groupDisabled=t}))}updateReadonly(){const t=this.readonly;this.checkboxElements.forEach((e=>{e.slotReadonly=t}))}componentWillLoad(){this.updateReadonly()}componentDidLoad(){const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:true,subtree:true});this.mutationObserver=t;this.onMutationObserved()}disconnectedCallback(){if(this.mutationObserver){this.mutationObserver.disconnect();this.mutationObserver=null}}valueObserver(){this.updateValue()}disabledObserver(){this.updateDisabled()}readonlyObserver(){this.updateReadonly()}setValue(t){const e=new Set(Array.isArray(t)?t:[t]);this.checkboxElements.forEach((t=>{if(e.has(t.value))t.click()}))}onHostElementChange(t){if(t.target===this.hostElement&&!this.hostElement.onchange){this.value=t.detail}}render(){const t=this.label||this.optional||this.readonly;return i("div",{key:"6b4c836a5d3c97b6271a5feeac64dfe58b692b25"},t&&!this.hideLabel&&i("div",{key:"09840d56ff72f32cb1bf3fc9fce63e8565aa5ea7",class:"group-legend"},s(this)),i("fieldset",{key:"d7307cee9962d82e242547ab15d275832be3424f",class:`q2-checkbox-fieldset ${this.hasError?"has-error":""}`,onChange:this.onInnerCheckboxChange,"aria-invalid":`${this.hasError}`},this.label||this.optional?i("legend",{class:"sr-only"},s(this)):"",this.hasError?i("div",{class:`error-icon-container ${this.label||this.optional?"":"no-label"}`},i("q2-icon",{class:"h(4) w(4) mrg-b(2)",type:"error"})):"",this.inputDom()))}inputDom(){return i("slot",null)}get hostElement(){return r(this)}static get watchers(){return{value:["valueObserver"],disabled:["disabledObserver"],readonly:["readonlyObserver"]}}};d.style=a;export{d as q2_checkbox_group};
-//# sourceMappingURL=p-a03c29f3.entry.js.map
+import{r as t,c as e,h as i,g as r}from"./p-a5f18e27.js";import{c as o,e as s}from"./p-84190698.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 #0066cc)}: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{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:var(--tct-input-error-padding, 0);margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))), var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgb(255, 255, 255))))}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));color:var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}";const a=n;const d=class{constructor(i){t(this,i);this.change=e(this,"change",7);this._id=`checkbox-group-${o()}`;this.onMutationObserved=()=>{this.updateValue();this.updateDisabled();this.updateReadonly()};this.onInnerCheckboxChange=t=>{t.stopImmediatePropagation();const e={};setTimeout((()=>{this.checkboxElements.forEach((t=>{e[t.value]=!!t.checked}));this.change.emit(e)}),0)};this.disabled=undefined;this.hasError=undefined;this.hideLabel=undefined;this.label=undefined;this.optional=undefined;this.readonly=undefined;this.value=undefined}get inputId(){return this._id}get checkboxElements(){return Array.from(this.hostElement.querySelectorAll("q2-checkbox"))}get protectedValue(){return this.value||{}}updateValue(){if(this.readonly)return;this.checkboxElements.forEach((t=>{if(this.protectedValue.hasOwnProperty(t.value)){t.checked=this.value[t.value]}}))}updateDisabled(){const t=this.disabled;this.checkboxElements.forEach((e=>{e.groupDisabled=t}))}updateReadonly(){const t=this.readonly;this.checkboxElements.forEach((e=>{e.slotReadonly=t}))}componentWillLoad(){this.updateReadonly()}componentDidLoad(){const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:true,subtree:true});this.mutationObserver=t;this.onMutationObserved()}disconnectedCallback(){if(this.mutationObserver){this.mutationObserver.disconnect();this.mutationObserver=null}}valueObserver(){this.updateValue()}disabledObserver(){this.updateDisabled()}readonlyObserver(){this.updateReadonly()}setValue(t){const e=new Set(Array.isArray(t)?t:[t]);this.checkboxElements.forEach((t=>{if(e.has(t.value))t.click()}))}onHostElementChange(t){if(t.target===this.hostElement&&!this.hostElement.onchange){this.value=t.detail}}render(){const t=this.label||this.optional||this.readonly;return i("div",{key:"d0fa41150bdb303b163c5b8385108a9f175ce545"},t&&!this.hideLabel&&i("div",{key:"f44bcb6210a8a4e54b163e31c955c03f7b10e6f6",class:"group-legend"},s(this)),i("fieldset",{key:"356ef2a2f1501a1f6eecfe2419580c93a46ae7d9",class:`q2-checkbox-fieldset ${this.hasError?"has-error":""}`,onChange:this.onInnerCheckboxChange,"aria-invalid":`${this.hasError}`},this.label||this.optional?i("legend",{class:"sr-only"},s(this)):"",this.hasError?i("div",{class:`error-icon-container ${this.label||this.optional?"":"no-label"}`},i("q2-icon",{class:"h(4) w(4) mrg-b(2)",type:"error"})):"",this.inputDom()))}inputDom(){return i("slot",null)}get hostElement(){return r(this)}static get watchers(){return{value:["valueObserver"],disabled:["disabledObserver"],readonly:["readonlyObserver"]}}};d.style=a;export{d as q2_checkbox_group};
+//# sourceMappingURL=p-def9be7b.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,g as s}from"./p-a5f18e27.js";import{l as n,h as a,o as d,i as h,w as r}from"./p-84190698.js";const l="*{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 #0066cc)}: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;max-width:100%}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}:host([block]){display:block;width:100%}:host([block]) .q2-editable-field-wrapper:not([hidden]){display:grid;grid-template-columns:1fr auto auto}q2-input,.text-wrapper{margin:0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0}q2-input{flex:1 1 auto;min-width:170px}.text-wrapper{flex:0 auto;align-self:center;display:inline-block}:host([truncated]) .text-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}q2-btn{flex:0 0 44px}dl{margin:var(--tct-scale-0, var(--app-scale-0x, 0))}dt{font-weight:600}dd{margin-left:var(--tct-scale-0, var(--app-scale-0x, 0));display:flex;align-items:center}";const o=l;const c=class{constructor(e){t(this,e);this.input=i(this,"input",7);this.change=i(this,"change",7);this.scheduledAfterRender=[];this.defaultValue=this.value;this.inputInput=t=>{t.stopPropagation();this.input.emit(t.detail);this.formattedValue=t.detail.formattedValue;this.innerValue=t.detail.value};this.inputChange=t=>{t.stopPropagation()};this.inputKeyDown=t=>{if(t.key==="Escape"||t.key==="Esc"){t.preventDefault();this.cancelClick();return}if(t.key==="Enter"){t.preventDefault();this.saveClick();return}};this.inputClick=t=>{t.stopPropagation()};this.saveClick=t=>{t&&t.stopPropagation();const i=this.hostElement.shadowRoot.querySelector("q2-input").value;this.defaultValue=i;this.change.emit({editing:false,name:"save",value:this.innerValue||i,formattedValue:this.formattedValue||i});setTimeout((()=>{const{errors:t=[]}=this;if(!t.length)return;this.hostElement.focus()}),1)};this.editClick=t=>{t===null||t===void 0?void 0:t.stopPropagation();this.change.emit({editing:true,name:"edit"})};this.cancelClick=t=>{t===null||t===void 0?void 0:t.stopPropagation();this.change.emit({editing:false,name:"cancel"});this.inputElement.setValue(this.defaultValue)};this.block=undefined;this.disabled=undefined;this.editing=false;this.errors=undefined;this.formatModifier=undefined;this.hideLabel=undefined;this.hints=undefined;this.label="";this.maxlength=undefined;this.persistentLabel=undefined;this.truncated=undefined;this.type=undefined;this.value="";this.ariaLabel=undefined;this.formattedValue=undefined}get locLabel(){return this.label&&n(this.label)||""}componentWillLoad(){a(this)}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}componentDidLoad(){d(this.hostElement)}errorsObserver(){var t;const{editing:i,errors:e=[]}=this;const s=this.hostElement.shadowRoot.activeElement;const n=(t=(s===null||s===void 0?void 0:s.tagName)==="Q2-INPUT")!==null&&t!==void 0?t:false;const a=e.length;if(n||!s||!i||!a)return;this.inputElement.focus()}ariaLabelObserver(){a(this)}observesEditing(t,i){if(t===i)return;this.scheduledAfterRender.push(this.hostElement.focus)}get wrapperClass(){return`q2-editable-field-wrapper ${this.editing?"editing":""}`}onHostElementChange(t){if(!h(t,this.hostElement)||this.hostElement.onchange)return;switch(t.detail.name){case"save":this.value=t.detail.value;break;case"cancel":this.inputElement.value=this.value;break}this.editing=t.detail.editing}delegateFocus(t){if(!h(t,this.hostElement))return;this.hostElement.shadowRoot.querySelector(this.editing?"q2-input":"q2-btn.begin-edit").focus()}inputFormatted(t){this.formattedValue=t.detail.formattedValue}clickEdit(){var t;if(this.editing)return;(t=this.editBtnElement)===null||t===void 0?void 0:t.click()}clickCancel(){var t;if(!this.editing)return;(t=this.cancelBtnElement)===null||t===void 0?void 0:t.click()}clickSave(){var t;if(!this.editing)return;(t=this.saveBtnElement)===null||t===void 0?void 0:t.click()}async setValue(t,i={clickSave:true}){await this.clickEdit();await r();await this.inputElement.setValue(t);if(i.clickSave){await this.clickSave();await r()}}render(){return e("div",{key:"60701f0ac8d1e21088503aca7d6496f506036065"},this.generateEditStateDOM(),this.generateReadStateDOM())}generateEditStateDOM(){return e("div",{class:this.wrapperClass,hidden:!this.editing},e("q2-input",{ref:t=>this.inputElement=t,label:this.locLabel,hideLabel:this.hideLabel,value:this.value,hints:Array.isArray(this.hints)&&this.hints.map((t=>n(t)))||undefined,errors:Array.isArray(this.errors)&&this.errors.map((t=>n(t)))||undefined,type:this.type,disabled:this.disabled,formatModifier:this.formatModifier,maxlength:this.maxlength,"test-id":"editableInput",onInput:this.inputInput,onChange:this.inputChange,onKeyDown:this.inputKeyDown,onClick:this.inputClick}),e("q2-btn",{ref:t=>this.cancelBtnElement=t,class:"cancel-edit",label:`${n("tecton.element.editableField.cancel")} ${this.locLabel}`,"hide-label":true,"test-id":"cancelButton",onClick:this.cancelClick},e("q2-icon",{type:"close"})),e("q2-btn",{ref:t=>this.saveBtnElement=t,class:"save-edit",label:`${n("tecton.element.editableField.save")} ${this.locLabel}`,"hide-label":true,"test-id":"saveButton",onClick:this.saveClick},e("q2-icon",{type:"checkmark"})))}generateReadStateDOM(){if(this.persistentLabel&&this.locLabel){return e("div",{class:this.wrapperClass,hidden:this.editing},e("dl",null,e("dt",{class:"read-state-label"},this.locLabel),e("dd",null,e("span",{class:"text-wrapper"},this.formattedValue||this.value),e("q2-btn",{ref:t=>this.editBtnElement=t,class:"begin-edit",label:`${n("tecton.element.editableField.edit")} ${this.locLabel}`,"hide-label":true,disabled:this.disabled,"test-id":"editButton",onClick:this.editClick},e("q2-icon",{type:"edit"})))))}return e("div",{class:this.wrapperClass,hidden:this.editing},e("div",{class:"text-wrapper"},this.formattedValue||this.value),e("q2-btn",{ref:t=>this.editBtnElement=t,class:"begin-edit",label:`${n("tecton.element.editableField.edit")} ${this.locLabel}`,"hide-label":true,disabled:this.disabled,"test-id":"editButton",onClick:this.editClick},e("q2-icon",{type:"edit"})))}generateEditBtn(){return e("q2-btn",{ref:t=>this.editBtnElement=t,class:"begin-edit",label:`${n("tecton.element.editableField.edit")} ${this.locLabel}`,"hide-label":true,disabled:this.disabled,"test-id":"editButton",onClick:this.editClick},e("q2-icon",{type:"edit"}))}get hostElement(){return s(this)}static get watchers(){return{errors:["errorsObserver"],ariaLabel:["ariaLabelObserver"],editing:["observesEditing"]}}};c.style=o;export{c as q2_editable_field};
+//# sourceMappingURL=p-e1c642fa.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["q2EditableFieldCss","Q2EditableFieldStyle0","Q2EditableField","this","scheduledAfterRender","defaultValue","value","inputInput","event","stopPropagation","input","emit","detail","formattedValue","innerValue","inputChange","e","inputKeyDown","key","preventDefault","cancelClick","saveClick","inputClick","valueFromInputProp","hostElement","shadowRoot","querySelector","change","editing","name","setTimeout","errors","length","focus","editClick","inputElement","setValue","locLabel","label","loc","componentWillLoad","handleAriaLabel","componentDidRender","forEach","fn","componentDidLoad","overrideFocus","errorsObserver","focusedElement","activeElement","isInputFocused","_a","tagName","hasErrors","ariaLabelObserver","observesEditing","newValue","oldValue","push","wrapperClass","onHostElementChange","isEventFromElement","onchange","delegateFocus","inputFormatted","clickEdit","editBtnElement","click","clickCancel","cancelBtnElement","clickSave","saveBtnElement","options","waitForNextPaint","render","h","generateEditStateDOM","generateReadStateDOM","class","hidden","ref","el","hideLabel","hints","Array","isArray","map","str","undefined","type","disabled","formatModifier","maxlength","onInput","onChange","onKeyDown","onClick","persistentLabel","generateEditBtn"],"sources":["src/components/q2-editable-field/q2-editable-field.scss?tag=q2-editable-field&encapsulation=shadow","src/components/q2-editable-field/q2-editable-field.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n    display: inline-block;\n    max-width: 100%;\n}\n\n.q2-editable-field-wrapper:not([hidden]) {\n    display: flex;\n}\n\n.q2-editable-field-wrapper.editing {\n    align-items: flex-end;\n}\n\n:host([block]) {\n    display:block;\n    width: 100%;\n    .q2-editable-field-wrapper:not([hidden]) {\n        display: grid;\n        grid-template-columns: 1fr auto auto;\n    }\n}\n\nq2-input,\n.text-wrapper {\n    margin: 0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0;\n}\n\nq2-input {\n    flex: 1 1 auto;\n    min-width: 170px;\n}\n\n.text-wrapper {\n    flex: 0 auto;\n    align-self: center;\n    display: inline-block;\n}\n\n:host([truncated]) .text-wrapper {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\nq2-btn {\n    flex: 0 0 44px;\n}\n\ndl {\n    margin: var(--tct-scale-0, var(--app-scale-0x, 0));\n}\n\ndt {\n    font-weight: 600;\n}\n\ndd {\n    margin-left: var(--tct-scale-0, var(--app-scale-0x, 0));\n    display: flex;\n    align-items: center;\n}\n","import { Component, State, Prop, h, Listen, Element, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent } from 'src/components';\nimport { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { Q2Input } from '../q2-input/q2-input';\nimport { IFormatterValueObject } from '../q2-input/q2-input-types';\n\n@Component({ tag: 'q2-editable-field', shadow: true, styleUrl: 'q2-editable-field.scss' })\nexport class Q2EditableField {\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true }) block: boolean;\n\n    /** Disables the edit button and field. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** Controls the edit state of the element. */\n    @Prop({ reflect: true, mutable: true }) editing: boolean = false;\n\n    /**\n     * Determines the `errors` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/ui/q2-input/) for more information.\n     */\n    @Prop() errors: string[];\n\n    /**\n     * Determines the `formatModifier` applied to the `q2-input` element.\n     * @info\n     * Only applicable when `type=\"currency\"`.\n     *\n     * See [q2-input](https://tecton.q2developer.com/ui/q2-input/) for more information.\n     */\n    @Prop({ reflect: true }) formatModifier: string;\n\n    /** Hide's the field's `<label>` element from view. */\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n    /**\n     * Determines the `hints` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/ui/q2-input/) for more information.\n     */\n    @Prop() hints: string[];\n\n    /**\n     * The visible descriptor for the element.\n     * Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string = '';\n\n    /**\n     * Determines the `maxLength` applied to the `q2-input`.\n     *\n     * See [q2-input](https://tecton.q2developer.com/ui/q2-input/) for more information.\n     */\n    @Prop({ reflect: true }) maxlength: number;\n\n    /** Displays the provided label in the read state. */\n    @Prop({ reflect: true }) persistentLabel: boolean;\n\n    /** Shortens long values with ellipses instead of splitting into multiple lines. */\n    @Prop({ reflect: true }) truncated: boolean;\n\n    /**\n     * Determines the `type` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/ui/q2-input/) for all `type` values.\n     */\n    @Prop({ reflect: true }) type: Q2Input['type'];\n\n    /** Serves as the visible text while in the read state, and the default value of the input while in the edit state. */\n    @Prop({ reflect: true, mutable: true }) value: string = '';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    scheduledAfterRender: (() => void)[] = [];\n\n    @Element() hostElement: HTMLElement;\n    inputElement: HTMLQ2InputElement;\n    editBtnElement: HTMLQ2BtnElement;\n    cancelBtnElement: HTMLQ2BtnElement;\n    saveBtnElement: HTMLQ2BtnElement;\n\n    @State() formattedValue: string;\n    innerValue: string;\n    defaultValue: string = this.value;\n\n    get locLabel() {\n        return (this.label && loc(this.label)) || '';\n    }\n\n    /////// LIFECYCLE HOOKS ///////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n    }\n\n    //////// OBSERVERS ////////\n\n    @Watch('errors')\n    errorsObserver() {\n        const { editing, errors = [] } = this;\n        const focusedElement = this.hostElement.shadowRoot.activeElement;\n        const isInputFocused = focusedElement?.tagName === 'Q2-INPUT' ?? false;\n        const hasErrors = errors.length;\n        if (isInputFocused || !focusedElement || !editing || !hasErrors) return;\n        this.inputElement.focus();\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('editing')\n    observesEditing(newValue: boolean, oldValue: boolean) {\n        if (newValue === oldValue) return;\n        this.scheduledAfterRender.push(this.hostElement.focus);\n    }\n\n    get wrapperClass() {\n        return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;\n    }\n\n    ///////// HOST ELEMENT EVENTS //////\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (!isEventFromElement(event, this.hostElement) || this.hostElement.onchange) return;\n        switch (event.detail.name) {\n            case 'save':\n                this.value = event.detail.value;\n                break;\n\n            case 'cancel':\n                this.inputElement.value = this.value;\n                break;\n        }\n\n        this.editing = event.detail.editing;\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();\n    }\n\n    @Listen('formatted')\n    inputFormatted(event: CustomEvent<IFormatterValueObject>) {\n        this.formattedValue = event.detail.formattedValue;\n    }\n\n    ///////// EVENTS /////////\n\n    /**\n     * Emitted when the user updates the `q2-input` element in the editing state.\n     */\n    @Event() input: EventEmitter<{ formattedValue: string; value: string }>;\n\n    /**\n     * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n     *\n     * The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n     */\n    @Event() change: EventEmitter<{\n        editing: boolean;\n        name: 'edit' | 'cancel' | 'save';\n        value?: string;\n        formattedValue?: string;\n    }>;\n\n    /// Methods ///\n    /**\n     * Emulates clicking the edit button, which will display the `<q2-input>` field.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickEdit() {\n        if (this.editing) return;\n        this.editBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the cancel button, which will hide the `<q2-input>` field.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickCancel() {\n        if (!this.editing) return;\n        this.cancelBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the save button, saving value in the `<q2-input>` field, and emitting a `change` event.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickSave() {\n        if (!this.editing) return;\n        this.saveBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the edit button, and setting the value of the `<q2-input>` field.\n     *\n     * If the `clickSave` argument is `true` (default), the save button will be clicked after the value is set, and a\\\n     * `change` event will be emitted.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(value: string, options: { clickSave?: boolean } = { clickSave: true }) {\n        await this.clickEdit();\n        await waitForNextPaint();\n\n        await this.inputElement.setValue(value);\n\n        if (options.clickSave) {\n            await this.clickSave();\n            await waitForNextPaint();\n        }\n    }\n\n    //////// ACTIONS /////////\n\n    inputInput = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n        event.stopPropagation();\n        this.input.emit(event.detail);\n        this.formattedValue = event.detail.formattedValue;\n        this.innerValue = event.detail.value;\n    };\n\n    inputChange = (e: CustomEvent) => {\n        e.stopPropagation();\n    };\n\n    inputKeyDown = (e: KeyboardEvent) => {\n        if (e.key === 'Escape' || e.key === 'Esc') {\n            e.preventDefault();\n            this.cancelClick();\n            return;\n        }\n\n        if (e.key === 'Enter') {\n            e.preventDefault();\n            this.saveClick();\n            return;\n        }\n    };\n\n    inputClick = (event: MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    saveClick = (event?: MouseEvent) => {\n        event && event.stopPropagation();\n        const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;\n        this.defaultValue = valueFromInputProp;\n        this.change.emit({\n            editing: false,\n            name: 'save',\n            value: this.innerValue || valueFromInputProp,\n            formattedValue: this.formattedValue || valueFromInputProp,\n        });\n\n        setTimeout(() => {\n            const { errors = [] } = this;\n            if (!errors.length) return;\n            this.hostElement.focus();\n        }, 1);\n    };\n\n    editClick = (event: MouseEvent) => {\n        event?.stopPropagation();\n        this.change.emit({ editing: true, name: 'edit' });\n    };\n\n    cancelClick = (event?: MouseEvent) => {\n        event?.stopPropagation();\n        this.change.emit({ editing: false, name: 'cancel' });\n        this.inputElement.setValue(this.defaultValue);\n    };\n\n    render() {\n        return (\n            <div>\n                {this.generateEditStateDOM()}\n                {this.generateReadStateDOM()}\n            </div>\n        );\n    }\n\n    generateEditStateDOM() {\n        return (\n            <div\n                class={this.wrapperClass}\n                hidden={!this.editing}\n            >\n                <q2-input\n                    ref={el => (this.inputElement = el)}\n                    label={this.locLabel}\n                    hideLabel={this.hideLabel}\n                    value={this.value}\n                    hints={(Array.isArray(this.hints) && this.hints.map(str => loc(str))) || undefined}\n                    errors={(Array.isArray(this.errors) && this.errors.map(str => loc(str))) || undefined}\n                    type={this.type}\n                    disabled={this.disabled}\n                    formatModifier={this.formatModifier}\n                    maxlength={this.maxlength}\n                    test-id=\"editableInput\"\n                    onInput={this.inputInput}\n                    onChange={this.inputChange}\n                    onKeyDown={this.inputKeyDown}\n                    onClick={this.inputClick}\n                />\n                <q2-btn\n                    ref={el => (this.cancelBtnElement = el)}\n                    class=\"cancel-edit\"\n                    label={`${loc('tecton.element.editableField.cancel')} ${this.locLabel}`}\n                    hide-label\n                    test-id=\"cancelButton\"\n                    onClick={this.cancelClick}\n                >\n                    <q2-icon type=\"close\" />\n                </q2-btn>\n                <q2-btn\n                    ref={el => (this.saveBtnElement = el)}\n                    class=\"save-edit\"\n                    label={`${loc('tecton.element.editableField.save')} ${this.locLabel}`}\n                    hide-label\n                    test-id=\"saveButton\"\n                    onClick={this.saveClick}\n                >\n                    <q2-icon type=\"checkmark\" />\n                </q2-btn>\n            </div>\n        );\n    }\n\n    generateReadStateDOM() {\n        if (this.persistentLabel && this.locLabel) {\n            return (\n                <div\n                    class={this.wrapperClass}\n                    hidden={this.editing}\n                >\n                    <dl>\n                        <dt class=\"read-state-label\">{this.locLabel}</dt>\n                        <dd>\n                            <span class=\"text-wrapper\">{this.formattedValue || this.value}</span>\n                            <q2-btn\n                                ref={el => (this.editBtnElement = el)}\n                                class=\"begin-edit\"\n                                label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n                                hide-label\n                                disabled={this.disabled}\n                                test-id=\"editButton\"\n                                onClick={this.editClick}\n                            >\n                                <q2-icon type=\"edit\" />\n                            </q2-btn>\n                        </dd>\n                    </dl>\n                </div>\n            );\n        }\n        return (\n            <div\n                class={this.wrapperClass}\n                hidden={this.editing}\n            >\n                <div class=\"text-wrapper\">{this.formattedValue || this.value}</div>\n                <q2-btn\n                    ref={el => (this.editBtnElement = el)}\n                    class=\"begin-edit\"\n                    label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n                    hide-label\n                    disabled={this.disabled}\n                    test-id=\"editButton\"\n                    onClick={this.editClick}\n                >\n                    <q2-icon type=\"edit\" />\n                </q2-btn>\n            </div>\n        );\n    }\n\n    generateEditBtn() {\n        return (\n            <q2-btn\n                ref={el => (this.editBtnElement = el)}\n                class=\"begin-edit\"\n                label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n                hide-label\n                disabled={this.disabled}\n                test-id=\"editButton\"\n                onClick={this.editClick}\n            >\n                <q2-icon type=\"edit\" />\n            </q2-btn>\n        );\n    }\n}\n"],"mappings":"yHAAA,MAAMA,EAAqB,+4CAC3B,MAAAC,EAAeD,E,MCMFE,EAAe,M,qFAqExBC,KAAAC,qBAAuC,GAUvCD,KAAAE,aAAuBF,KAAKG,MAyJ5BH,KAAAI,WAAcC,IACVA,EAAMC,kBACNN,KAAKO,MAAMC,KAAKH,EAAMI,QACtBT,KAAKU,eAAiBL,EAAMI,OAAOC,eACnCV,KAAKW,WAAaN,EAAMI,OAAON,KAAK,EAGxCH,KAAAY,YAAeC,IACXA,EAAEP,iBAAiB,EAGvBN,KAAAc,aAAgBD,IACZ,GAAIA,EAAEE,MAAQ,UAAYF,EAAEE,MAAQ,MAAO,CACvCF,EAAEG,iBACFhB,KAAKiB,cACL,M,CAGJ,GAAIJ,EAAEE,MAAQ,QAAS,CACnBF,EAAEG,iBACFhB,KAAKkB,YACL,M,GAIRlB,KAAAmB,WAAcd,IACVA,EAAMC,iBAAiB,EAG3BN,KAAAkB,UAAab,IACTA,GAASA,EAAMC,kBACf,MAAMc,EAAqBpB,KAAKqB,YAAYC,WAAWC,cAAc,YAAYpB,MACjFH,KAAKE,aAAekB,EACpBpB,KAAKwB,OAAOhB,KAAK,CACbiB,QAAS,MACTC,KAAM,OACNvB,MAAOH,KAAKW,YAAcS,EAC1BV,eAAgBV,KAAKU,gBAAkBU,IAG3CO,YAAW,KACP,MAAMC,OAAEA,EAAS,IAAO5B,KACxB,IAAK4B,EAAOC,OAAQ,OACpB7B,KAAKqB,YAAYS,OAAO,GACzB,EAAE,EAGT9B,KAAA+B,UAAa1B,IACTA,IAAK,MAALA,SAAK,SAALA,EAAOC,kBACPN,KAAKwB,OAAOhB,KAAK,CAAEiB,QAAS,KAAMC,KAAM,QAAS,EAGrD1B,KAAAiB,YAAeZ,IACXA,IAAK,MAALA,SAAK,SAALA,EAAOC,kBACPN,KAAKwB,OAAOhB,KAAK,CAAEiB,QAAS,MAAOC,KAAM,WACzC1B,KAAKgC,aAAaC,SAASjC,KAAKE,aAAa,E,0DAvRU,M,6GAiCH,G,gHAuBA,G,uDAiBxD,YAAIgC,GACA,OAAQlC,KAAKmC,OAASC,EAAIpC,KAAKmC,QAAW,E,CAK9C,iBAAAE,GACIC,EAAgBtC,K,CAGpB,kBAAAuC,GACIvC,KAAKC,qBAAqBuC,SAAQC,GAAMA,MACxCzC,KAAKC,qBAAuB,E,CAGhC,gBAAAyC,GACIC,EAAc3C,KAAKqB,Y,CAMvB,cAAAuB,G,MACI,MAAMnB,QAAEA,EAAOG,OAAEA,EAAS,IAAO5B,KACjC,MAAM6C,EAAiB7C,KAAKqB,YAAYC,WAAWwB,cACnD,MAAMC,GAAiBC,GAAAH,IAAc,MAAdA,SAAc,SAAdA,EAAgBI,WAAY,cAAU,MAAAD,SAAA,EAAAA,EAAI,MACjE,MAAME,EAAYtB,EAAOC,OACzB,GAAIkB,IAAmBF,IAAmBpB,IAAYyB,EAAW,OACjElD,KAAKgC,aAAaF,O,CAItB,iBAAAqB,GACIb,EAAgBtC,K,CAIpB,eAAAoD,CAAgBC,EAAmBC,GAC/B,GAAID,IAAaC,EAAU,OAC3BtD,KAAKC,qBAAqBsD,KAAKvD,KAAKqB,YAAYS,M,CAGpD,gBAAI0B,GACA,MAAO,6BAA6BxD,KAAKyB,QAAU,UAAY,I,CAMnE,mBAAAgC,CAAoBpD,GAChB,IAAKqD,EAAmBrD,EAAOL,KAAKqB,cAAgBrB,KAAKqB,YAAYsC,SAAU,OAC/E,OAAQtD,EAAMI,OAAOiB,MACjB,IAAK,OACD1B,KAAKG,MAAQE,EAAMI,OAAON,MAC1B,MAEJ,IAAK,SACDH,KAAKgC,aAAa7B,MAAQH,KAAKG,MAC/B,MAGRH,KAAKyB,QAAUpB,EAAMI,OAAOgB,O,CAIhC,aAAAmC,CAAcvD,GACV,IAAKqD,EAAmBrD,EAAOL,KAAKqB,aAAc,OAClDrB,KAAKqB,YAAYC,WAAWC,cAA2BvB,KAAKyB,QAAU,WAAa,qBAAqBK,O,CAI5G,cAAA+B,CAAexD,GACXL,KAAKU,eAAiBL,EAAMI,OAAOC,c,CA6BvC,SAAAoD,G,MACI,GAAI9D,KAAKyB,QAAS,QAClBuB,EAAAhD,KAAK+D,kBAAc,MAAAf,SAAA,SAAAA,EAAEgB,O,CASzB,WAAAC,G,MACI,IAAKjE,KAAKyB,QAAS,QACnBuB,EAAAhD,KAAKkE,oBAAgB,MAAAlB,SAAA,SAAAA,EAAEgB,O,CAS3B,SAAAG,G,MACI,IAAKnE,KAAKyB,QAAS,QACnBuB,EAAAhD,KAAKoE,kBAAc,MAAApB,SAAA,SAAAA,EAAEgB,O,CAYzB,cAAM/B,CAAS9B,EAAekE,EAAmC,CAAEF,UAAW,aACpEnE,KAAK8D,kBACLQ,UAEAtE,KAAKgC,aAAaC,SAAS9B,GAEjC,GAAIkE,EAAQF,UAAW,OACbnE,KAAKmE,kBACLG,G,EAgEd,MAAAC,GACI,OACIC,EAAA,OAAAzD,IAAA,4CACKf,KAAKyE,uBACLzE,KAAK0E,uB,CAKlB,oBAAAD,GACI,OACID,EAAA,OACIG,MAAO3E,KAAKwD,aACZoB,QAAS5E,KAAKyB,SAEd+C,EAAA,YACIK,IAAKC,GAAO9E,KAAKgC,aAAe8C,EAChC3C,MAAOnC,KAAKkC,SACZ6C,UAAW/E,KAAK+E,UAChB5E,MAAOH,KAAKG,MACZ6E,MAAQC,MAAMC,QAAQlF,KAAKgF,QAAUhF,KAAKgF,MAAMG,KAAIC,GAAOhD,EAAIgD,MAAUC,UACzEzD,OAASqD,MAAMC,QAAQlF,KAAK4B,SAAW5B,KAAK4B,OAAOuD,KAAIC,GAAOhD,EAAIgD,MAAUC,UAC5EC,KAAMtF,KAAKsF,KACXC,SAAUvF,KAAKuF,SACfC,eAAgBxF,KAAKwF,eACrBC,UAAWzF,KAAKyF,UAAS,UACjB,gBACRC,QAAS1F,KAAKI,WACduF,SAAU3F,KAAKY,YACfgF,UAAW5F,KAAKc,aAChB+E,QAAS7F,KAAKmB,aAElBqD,EAAA,UACIK,IAAKC,GAAO9E,KAAKkE,iBAAmBY,EACpCH,MAAM,cACNxC,MAAO,GAAGC,EAAI,0CAA0CpC,KAAKkC,WAAU,4BAE/D,eACR2D,QAAS7F,KAAKiB,aAEduD,EAAA,WAASc,KAAK,WAElBd,EAAA,UACIK,IAAKC,GAAO9E,KAAKoE,eAAiBU,EAClCH,MAAM,YACNxC,MAAO,GAAGC,EAAI,wCAAwCpC,KAAKkC,WAAU,4BAE7D,aACR2D,QAAS7F,KAAKkB,WAEdsD,EAAA,WAASc,KAAK,e,CAM9B,oBAAAZ,GACI,GAAI1E,KAAK8F,iBAAmB9F,KAAKkC,SAAU,CACvC,OACIsC,EAAA,OACIG,MAAO3E,KAAKwD,aACZoB,OAAQ5E,KAAKyB,SAEb+C,EAAA,UACIA,EAAA,MAAIG,MAAM,oBAAoB3E,KAAKkC,UACnCsC,EAAA,UACIA,EAAA,QAAMG,MAAM,gBAAgB3E,KAAKU,gBAAkBV,KAAKG,OACxDqE,EAAA,UACIK,IAAKC,GAAO9E,KAAK+D,eAAiBe,EAClCH,MAAM,aACNxC,MAAO,GAAGC,EAAI,wCAAwCpC,KAAKkC,WAAU,kBAErEqD,SAAUvF,KAAKuF,SAAQ,UACf,aACRM,QAAS7F,KAAK+B,WAEdyC,EAAA,WAASc,KAAK,Y,CAOtC,OACId,EAAA,OACIG,MAAO3E,KAAKwD,aACZoB,OAAQ5E,KAAKyB,SAEb+C,EAAA,OAAKG,MAAM,gBAAgB3E,KAAKU,gBAAkBV,KAAKG,OACvDqE,EAAA,UACIK,IAAKC,GAAO9E,KAAK+D,eAAiBe,EAClCH,MAAM,aACNxC,MAAO,GAAGC,EAAI,wCAAwCpC,KAAKkC,WAAU,kBAErEqD,SAAUvF,KAAKuF,SAAQ,UACf,aACRM,QAAS7F,KAAK+B,WAEdyC,EAAA,WAASc,KAAK,U,CAM9B,eAAAS,GACI,OACIvB,EAAA,UACIK,IAAKC,GAAO9E,KAAK+D,eAAiBe,EAClCH,MAAM,aACNxC,MAAO,GAAGC,EAAI,wCAAwCpC,KAAKkC,WAAU,kBAErEqD,SAAUvF,KAAKuF,SAAQ,UACf,aACRM,QAAS7F,KAAK+B,WAEdyC,EAAA,WAASc,KAAK,S"}

package/dist/q2-tecton-elements/{p-aed969d4.entry.js → p-e654d2d6.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as a,g as r}from"./p-a5f18e27.js";const i="*{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 #0066cc)}: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}.avatar-img,.avatar-img-default{object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, var(--tct-avatar-border-radius, 50%)))}.avatar-img-default{background:var(--tct-avatar-background, var(--tct-avatar-bg, #9e9e9e))}.avatar-initials{height:var(--tct-avatar-height, 44px);width:var(--tct-avatar-width, 44px);background:var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)));border-radius:var(--tct-avatar-br, 50%)}.size-1{--tct-avatar-font-size:var(--tct-avatar-size-1, 60px)}.size-2{--tct-avatar-font-size:var(--tct-avatar-size-2, 48px)}.size-3{--tct-avatar-font-size:var(--tct-avatar-size-3, 40px)}.size-4{--tct-avatar-font-size:var(--tct-avatar-size-4, 30px)}text{fill:var(--tct-avatar-text-color, var(--tct-avatar-color, #ffffff));font-weight:var(--tct-avatar-font-weight, 200);font-size:var(--tct-avatar-font-size, 40px)}.fallback{height:var(--tct-avatar-fallback-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-fallback-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-fallback-border-radius, var(--tct-avatar-fallback-br, var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, 50%))));background:var(--tct-avatar-fallback-background, var(--tct-avatar-fallback-bg, var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)))));display:inline-flex;align-items:center;justify-content:center}q2-icon{--t-icon-size:var(--tct-avatar-icon-size, var(--tct-avatar-fallback-icon-size, 65%));--t-icon-stroke-primary:var(--tct-avatar-icon-stroke-primary, var(--tct-avatar-fallback-stroke-primary, currentcolor));--t-icon-stroke-secondary:var(--tct-avatar-icon-stroke-secondary, var(--tct-avatar-fallback-stroke-secondary, currentcolor));--tct-icon-fill:var(--tct-avatar-icon-fill, var(--tct-avatar-fallback-fill));color:var(--tct-avatar-icon-color, var(--tct-avatar-fallback-color, var(--tct-avatar-color, var(--t-base, #ffffff))));width:var(--tct-avatar-icon-size, var(--t-icon-size));height:var(--tct-avatar-icon-size, var(--t-icon-size))}";const e=i;const c=class{constructor(a){t(this,a);this.onError=()=>{this.badSrc=true};this.onLoad=()=>{this.isLoaded=true};this.icon="person";this.initials=undefined;this.name=undefined;this.src=undefined;this.badSrc=false;this.isLoaded=false}srcDidUpdate(){this.badSrc=false}get computedInitials(){const{initials:t,name:a}=this;if(!t&&!a)return;let r="";if(t){r=t.substr(0,4)}else if(a){const t=a.split(" ");const i=t[0][0];const e=t.length>1?t[t.length-1][0]:undefined;r+=i;if(e)r+=e}r=r===null||r===void 0?void 0:r.toUpperCase();return r}render(){const{computedInitials:t}=this;const r=this.src&&!this.badSrc;const i=this.isLoaded;const e=(this.name||this.initials)&&(!this.src||this.badSrc);const c=!this.name&&!this.initials&&(!this.src||this.badSrc);return a("div",{key:"40f7061e1f9d697594afaee38c047d428c4ad1ec"},r&&a("img",{key:"f4cd6e36e9cb369708cd11d33949313c0953f5bc",class:i?"avatar-img":"avatar-img-default","test-id":"userImage",src:this.src,onError:this.onError,onLoad:this.onLoad,alt:this.name||""}),e&&a("svg",{key:"3598be173d93b0b281b1135ea6f588275163269d",viewBox:"0 0 100 100",preserveAspectRatio:"xMidYMid meet","test-id":"userInitials",class:`avatar-initials size-${t.length}`,"aria-label":this.name,"aria-hidden":!this.name&&"true"},a("text",{key:"259ee67504f57470175c0ffc6e8b0b6057f9cd64",x:"50",y:"50","dominant-baseline":"central","text-anchor":"middle","aria-hidden":"true"},t)),c&&a("div",{key:"bc08abd0494d88c6626d0fd58f5d2440563ead53","test-id":"fallbackIcon",class:"fallback"},a("q2-icon",{key:"3205d7a5d917687d4142aa81c031599fe820ada0",type:this.icon})))}get el(){return r(this)}static get watchers(){return{src:["srcDidUpdate"]}}};c.style=e;export{c as q2_avatar};
-//# sourceMappingURL=p-aed969d4.entry.js.map
+import{r as t,h as a,g as r}from"./p-a5f18e27.js";const i="*{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 #0066cc)}: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}.avatar-img,.avatar-img-default{object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, var(--tct-avatar-border-radius, 50%)))}.avatar-img-default{background:var(--tct-avatar-background, var(--tct-avatar-bg, #9e9e9e))}.avatar-initials{height:var(--tct-avatar-height, 44px);width:var(--tct-avatar-width, 44px);background:var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)));border-radius:var(--tct-avatar-br, 50%)}.size-1{--tct-avatar-font-size:var(--tct-avatar-size-1, 60px)}.size-2{--tct-avatar-font-size:var(--tct-avatar-size-2, 48px)}.size-3{--tct-avatar-font-size:var(--tct-avatar-size-3, 40px)}.size-4{--tct-avatar-font-size:var(--tct-avatar-size-4, 30px)}text{fill:var(--tct-avatar-text-color, var(--tct-avatar-color, #ffffff));font-weight:var(--tct-avatar-font-weight, 200);font-size:var(--tct-avatar-font-size, 40px)}.fallback{height:var(--tct-avatar-fallback-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-fallback-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-fallback-border-radius, var(--tct-avatar-fallback-br, var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, 50%))));background:var(--tct-avatar-fallback-background, var(--tct-avatar-fallback-bg, var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)))));display:inline-flex;align-items:center;justify-content:center}q2-icon{--t-icon-size:var(--tct-avatar-icon-size, var(--tct-avatar-fallback-icon-size, 65%));--t-icon-stroke-primary:var(--tct-avatar-icon-stroke-primary, var(--tct-avatar-fallback-stroke-primary, currentcolor));--t-icon-stroke-secondary:var(--tct-avatar-icon-stroke-secondary, var(--tct-avatar-fallback-stroke-secondary, currentcolor));--tct-icon-fill:var(--tct-avatar-icon-fill, var(--tct-avatar-fallback-fill));color:var(--tct-avatar-icon-color, var(--tct-avatar-fallback-color, var(--tct-avatar-color, var(--t-base, #ffffff))));width:var(--tct-avatar-icon-size, var(--t-icon-size));height:var(--tct-avatar-icon-size, var(--t-icon-size))}";const e=i;const c=class{constructor(a){t(this,a);this.onError=()=>{this.badSrc=true};this.onLoad=()=>{this.isLoaded=true};this.icon="person";this.initials=undefined;this.name=undefined;this.src=undefined;this.badSrc=false;this.isLoaded=false}srcDidUpdate(){this.badSrc=false}get computedInitials(){const{initials:t,name:a}=this;if(!t&&!a)return;let r="";if(t){r=t.substr(0,4)}else if(a){const t=a.split(" ");const i=t[0][0];const e=t.length>1?t[t.length-1][0]:undefined;r+=i;if(e)r+=e}r=r===null||r===void 0?void 0:r.toUpperCase();return r}render(){const{computedInitials:t}=this;const r=this.src&&!this.badSrc;const i=this.isLoaded;const e=(this.name||this.initials)&&(!this.src||this.badSrc);const c=!this.name&&!this.initials&&(!this.src||this.badSrc);return a("div",{key:"64e5f5d66dd11f1afcb0893f8c24d039bd34379b"},r&&a("img",{key:"587f8875ee9c4bafadc110df1ceb54344f0cff39",class:i?"avatar-img":"avatar-img-default","test-id":"userImage",src:this.src,onError:this.onError,onLoad:this.onLoad,alt:this.name||""}),e&&a("svg",{key:"e53fb8646363b44b92c415306202b3f4b5f6fd06",viewBox:"0 0 100 100",preserveAspectRatio:"xMidYMid meet","test-id":"userInitials",class:`avatar-initials size-${t.length}`,"aria-label":this.name,"aria-hidden":!this.name&&"true"},a("text",{key:"2f9d08ce9303d0cb7c82bb75700e3c48b0d820e0",x:"50",y:"50","dominant-baseline":"central","text-anchor":"middle","aria-hidden":"true"},t)),c&&a("div",{key:"9b9ff7477e053d074f8856e0eeec3c576029cd2f","test-id":"fallbackIcon",class:"fallback"},a("q2-icon",{key:"8cfd4e34897dd9979c1a6ee6d4d61ddc8b97a484",type:this.icon})))}get el(){return r(this)}static get watchers(){return{src:["srcDidUpdate"]}}};c.style=e;export{c as q2_avatar};
+//# sourceMappingURL=p-e654d2d6.entry.js.map