q2-tecton-elements 1.9.8 → 1.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{icons-077ed9b7.js → icons-fa5f4367.js} +22 -22
- package/dist/cjs/index-14348270.js +557 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/q2-avatar.cjs.entry.js +1 -1
- package/dist/cjs/q2-btn_2.cjs.entry.js +3 -3
- package/dist/cjs/q2-calendar.cjs.entry.js +2 -2
- package/dist/cjs/q2-carousel-pane.cjs.entry.js +1 -1
- package/dist/cjs/q2-carousel.cjs.entry.js +1 -1
- package/dist/cjs/q2-checkbox-group.cjs.entry.js +2 -2
- package/dist/cjs/q2-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/q2-dropdown-item.cjs.entry.js +1 -1
- package/dist/cjs/q2-dropdown.cjs.entry.js +2 -2
- package/dist/cjs/q2-editable-field.cjs.entry.js +1 -1
- package/dist/cjs/q2-icon.cjs.entry.js +23 -10
- package/dist/cjs/q2-input.cjs.entry.js +8 -3
- package/dist/cjs/q2-loc.cjs.entry.js +1 -1
- package/dist/cjs/q2-optgroup.cjs.entry.js +1 -1
- package/dist/cjs/q2-option.cjs.entry.js +43 -5
- package/dist/cjs/q2-radio-group.cjs.entry.js +1 -1
- package/dist/cjs/q2-radio.cjs.entry.js +1 -1
- package/dist/cjs/q2-section.cjs.entry.js +1 -1
- package/dist/cjs/q2-select.cjs.entry.js +104 -62
- package/dist/cjs/q2-stepper-pane.cjs.entry.js +27 -0
- package/dist/cjs/q2-stepper.cjs.entry.js +187 -0
- package/dist/cjs/q2-tab-container.cjs.entry.js +12 -464
- package/dist/cjs/q2-tecton-elements.cjs.js +1 -1
- package/dist/cjs/q2-textarea.cjs.entry.js +1 -1
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/q2-btn/index.js +2 -2
- package/dist/collection/components/q2-calendar/styles.css +18 -0
- package/dist/collection/components/q2-checkbox-group/styles.css +12 -2
- package/dist/collection/components/q2-dropdown/styles.css +18 -0
- package/dist/collection/components/q2-icon/icons.js +22 -22
- package/dist/collection/components/q2-icon/index.js +41 -9
- package/dist/collection/components/q2-icon/styles.css +57 -50
- package/dist/collection/components/q2-input/index.js +7 -2
- package/dist/collection/components/q2-option/index.js +104 -8
- package/dist/collection/components/q2-option/styles.css +31 -37
- package/dist/collection/components/q2-select/index.js +106 -62
- package/dist/collection/components/q2-select/styles.css +18 -0
- package/dist/collection/components/q2-stepper/index.js +283 -0
- package/dist/collection/components/q2-stepper/styles.css +253 -0
- package/dist/collection/components/q2-stepper-pane/index.js +76 -0
- package/dist/collection/components/q2-stepper-pane/styles.css +70 -0
- package/dist/collection/components/q2-tab-container/index.js +2 -9
- package/dist/collection/utils/index.js +23 -2
- package/dist/esm/{icons-5506a72c.js → icons-17612675.js} +22 -22
- package/dist/esm/index-da24669a.js +548 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/q2-avatar.entry.js +1 -1
- package/dist/esm/q2-btn_2.entry.js +3 -3
- package/dist/esm/q2-calendar.entry.js +2 -2
- package/dist/esm/q2-carousel-pane.entry.js +1 -1
- package/dist/esm/q2-carousel.entry.js +1 -1
- package/dist/esm/q2-checkbox-group.entry.js +2 -2
- package/dist/esm/q2-checkbox.entry.js +1 -1
- package/dist/esm/q2-dropdown-item.entry.js +1 -1
- package/dist/esm/q2-dropdown.entry.js +2 -2
- package/dist/esm/q2-editable-field.entry.js +1 -1
- package/dist/esm/q2-icon.entry.js +23 -10
- package/dist/esm/q2-input.entry.js +8 -3
- package/dist/esm/q2-loc.entry.js +1 -1
- package/dist/esm/q2-optgroup.entry.js +1 -1
- package/dist/esm/q2-option.entry.js +44 -6
- package/dist/esm/q2-radio-group.entry.js +1 -1
- package/dist/esm/q2-radio.entry.js +1 -1
- package/dist/esm/q2-section.entry.js +1 -1
- package/dist/esm/q2-select.entry.js +104 -62
- package/dist/esm/q2-stepper-pane.entry.js +23 -0
- package/dist/esm/q2-stepper.entry.js +183 -0
- package/dist/esm/q2-tab-container.entry.js +2 -454
- package/dist/esm/q2-tecton-elements.js +1 -1
- package/dist/esm/q2-textarea.entry.js +1 -1
- package/dist/q2-tecton-elements/{p-f1ec7948.entry.js → p-2a28baa9.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-9f328dbd.entry.js → p-2c2a5d58.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-93799868.entry.js → p-2f2bbed9.entry.js} +3 -3
- package/dist/q2-tecton-elements/p-37d281b7.entry.js +1 -0
- package/dist/q2-tecton-elements/{p-dfe693e9.entry.js → p-3f2590c0.entry.js} +1 -1
- package/dist/q2-tecton-elements/p-4d283b84.entry.js +1 -0
- package/dist/q2-tecton-elements/p-5289f040.entry.js +1 -0
- package/dist/q2-tecton-elements/{p-54cbd826.entry.js → p-576509e6.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-c6d4933e.entry.js → p-64eef8d1.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-89ae4f7b.entry.js → p-65894494.entry.js} +1 -1
- package/dist/q2-tecton-elements/p-6ed006a7.entry.js +1 -0
- package/dist/q2-tecton-elements/p-6f570344.js +1 -0
- package/dist/q2-tecton-elements/{p-0c23d50a.entry.js → p-7520656d.entry.js} +1 -1
- package/dist/q2-tecton-elements/p-792d1170.entry.js +1 -0
- package/dist/q2-tecton-elements/{p-ccb8126f.entry.js → p-82b24667.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-ec245511.entry.js → p-86116f5c.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-ed433950.entry.js → p-891ca6f8.entry.js} +1 -1
- package/dist/q2-tecton-elements/p-8b4f6d3f.entry.js +1 -0
- package/dist/q2-tecton-elements/{p-0e9e5b53.entry.js → p-9b420e22.entry.js} +1 -1
- package/dist/q2-tecton-elements/p-aaa55918.js +1 -0
- package/dist/q2-tecton-elements/{p-915ce8d8.entry.js → p-c14e0622.entry.js} +1 -1
- package/dist/q2-tecton-elements/p-c92e3bc2.entry.js +1 -0
- package/dist/q2-tecton-elements/{p-7a952b02.entry.js → p-d0d605dc.entry.js} +1 -1
- package/dist/q2-tecton-elements/p-e3a27b97.entry.js +1 -0
- package/dist/q2-tecton-elements/{p-72f9686c.entry.js → p-ebee91e2.entry.js} +1 -1
- package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
- package/dist/types/components/q2-icon/index.d.ts +1 -0
- package/dist/types/components/q2-option/index.d.ts +9 -2
- package/dist/types/components/q2-select/index.d.ts +4 -1
- package/dist/types/components/q2-stepper/index.d.ts +33 -0
- package/dist/types/components/q2-stepper-pane/index.d.ts +9 -0
- package/dist/types/components.d.ts +46 -0
- package/dist/types/global.d.ts +1 -0
- package/dist/types/utils/index.d.ts +5 -2
- package/dist/types/workspace/workspace/{_tecton-production_release_1.9.x → Tecton_tecton-production_master}/packages/q2-tecton-elements/.stencil/test/helpers.d.ts +0 -0
- package/package.json +2 -2
- package/dist/cjs/index-2dcb1a72.js +0 -99
- package/dist/esm/index-f3de8cee.js +0 -91
- package/dist/q2-tecton-elements/p-031a8f06.js +0 -1
- package/dist/q2-tecton-elements/p-0feefe56.js +0 -1
- package/dist/q2-tecton-elements/p-1022a1c6.entry.js +0 -1
- package/dist/q2-tecton-elements/p-12f6dc10.entry.js +0 -1
- package/dist/q2-tecton-elements/p-5da60194.entry.js +0 -1
- package/dist/q2-tecton-elements/p-b0cb8867.entry.js +0 -1
- package/dist/q2-tecton-elements/p-d93abdce.entry.js +0 -1
- package/dist/q2-tecton-elements/p-e5e8eac3.entry.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,h as o,g as r}from"./p-8e863fbc.js";import{h as a,l as e}from"./p-0feefe56.js";import{s as n}from"./p-fa6e46e2.js";const i=class{constructor(o){t(this,o),this.handleSlotChange=()=>{this.handleIcons()}}componentWillLoad(){this.handleIcons(),a(this)}disable(t){this.disabled&&t.stopImmediatePropagation()}delegateFocus(t){t.target===this.hostElement&&this.hostElement.shadowRoot.querySelector("button").focus()}ariaLabelObserver(){a(this)}handleIcons(){const t=Array.from(this.hostElement.querySelectorAll(":scope > q2-icon")).reduce(((t,o)=>(t?o.remove():t=o,t)),null),o=!!t,r=!!this.hostElement.querySelector("q2-loc"),a=!!this.hostElement.textContent.trim(),e=(r||a)&&o&&this.hostElement.firstElementChild===t,n=(r||a)&&o&&this.hostElement.lastElementChild===t;let i;e||n||!o?e?i="left":n&&(i="right"):i="only",this.iconPosition=i}render(){const{ariaExpanded:t,ariaHasPopup:r,ariaLabel:a,ariaSelected:n,disabled:i,type:l,tabindex:c}=this.buttonAttributes,{iconPosition:s,loading:b,badge:d,label:h,hideLabel:p}=this;return o("button",{"aria-expanded":t,"aria-haspopup":r,"aria-label":a,"aria-selected":n,disabled:i,type:l,tabindex:c,"test-id":"q2BtnInnerButton",class:s&&`icon-${s}`},o("div",null,(s||b)&&o("q2-loading",{hidden:!b,modifiers:!s||d?"inline":void 0}),!p&&h?e(h):o("slot",{onSlotchange:this.handleSlotChange})))}get buttonAttributes(){return{ariaExpanded:void 0!==this.ariaExpanded?`${!!this.ariaExpanded}`:void 0,ariaHasPopup:this.ariaHasPopup?`${this.ariaHasPopup}`:void 0,ariaLabel:this.label&&this.hideLabel?e(this.label):void 0,ariaSelected:this.ariaSelected?`${this.ariaSelected}`:void 0,disabled:this.disabled||!1,type:this.type||"button",tabindex:this.tabIndex||void 0}}get hostElement(){return r(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};i.style='*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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%}:host{--comp-btn-primary-bg:var(--tct-btn-primary-bg, var(--t-button-primary-bg, #2e2e2e));--comp-btn-primary-font-color:var(--tct-btn-primary-font-color, var(--t-button-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-btn-fallback-hover-box-shadow:0 5px 10px rgba(0, 0, 0, 0.19),\n 0 3px 3px rgba(0, 0, 0, 0.23);--comp-btn-neutral-fallback-hover-box-shadow:0 5px 10px rgba(0, 0, 0, 0.24),\n 0 3px 3px rgba(0, 0, 0, 0.36);--comp-btn-primary-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-btn-primary-hover-box-shadow:var(--tct-btn-primary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow));--comp-btn-secondary-bg:var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc));--comp-btn-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e));--comp-btn-secondary-box-shadow:var(--tct-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-btn-secondary-hover-box-shadow:var(--tct-btn-secondary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow));--comp-btn-tween:var(--tct-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));--comp-btn-neutral-bg:var(--tct-btn-neutral-bg, transparent);--comp-btn-neutral-font-color:var(--tct-btn-neutral-font-color, var(--t-button-default-font-color, #2e2e2e));--comp-btn-neutral-box-shadow:var(--tct-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-btn-neutral-hover-box-shadow:var(--tct-btn-neutral-hover-box-shadow, var(--comp-btn-neutral-fallback-hover-box-shadow))}button{margin:var(--tct-scale-0, var(--app-scale-0, 0));padding:var(--tct-scale-0, var(--app-scale-0, 0));display:inline-block;width:100%;border:0;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(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}:host([size="1"]) button{padding:var(--tct-scale-1, var(--app-scale-1, 5px))}:host([color]:not([size])) button,:host([intent]:not([size])) button{padding:var(--tct-btn-padding, var(--tct-scale-2, var(--app-scale-2, 10px)))}:host([size="2"]) button{padding:var(--tct-scale-2, var(--app-scale-2, 10px))}:host([size="3"]) button{padding:var(--tct-scale-3, var(--app-scale-3, 15px))}:host([size="4x"]) button{padding:var(--tct-scale-4x, var(--app-scale-4x, 20px))}:host([size="4"]) button{padding:var(--tct-scale-6x, var(--app-scale-6x, 30px))}:host([color]) button,:host([intent]) button{border-style:solid;font-size:var(--tct-btn-font-size, inherit)}:host([color=primary]) button,:host([intent=workflow-primary]) button{background:var(--comp-btn-primary-bg);color:var(--comp-btn-primary-font-color);border-color:var(--tct-btn-primary-border-color, transparent);border-width:var(--tct-btn-primary-border-width, 0);border-radius:var(--tct-btn-primary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));box-shadow:var(--comp-btn-primary-box-shadow);font-weight:var(--tct-btn-primary-font-weight, 600);text-transform:var(--tct-btn-primary-text-transform, none);letter-spacing:var(--tct-btn-primary-letter-spacing, normal)}:host([color=primary]) button:enabled:hover,:host([color=primary]) button:enabled:focus,:host([color=primary]) button:enabled:active,:host([intent=workflow-primary]) button:enabled:hover,:host([intent=workflow-primary]) button:enabled:focus,:host([intent=workflow-primary]) button:enabled:active{background:var(--tct-btn-primary-hover-bg, var(--t-button-primary-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))));color:var(--tct-btn-primary-hover-font-color, var(--t-button-primary-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));border-color:var(--tct-btn-primary-hover-border-color, var(--tct-btn-primary-border-color, transparent))}:host([color=primary]) button:hover:enabled,:host([color=primary]) button:active:enabled,:host([intent=workflow-primary]) button:hover:enabled,:host([intent=workflow-primary]) button:active:enabled{box-shadow:var(--comp-btn-primary-hover-box-shadow)}:host([color=primary]) button:focus,:host([intent=workflow-primary]) button:focus{box-shadow:var(--tct-global-focus, var(--const-global-focus, var(--comp-btn-primary-hover-box-shadow, 0 0 0 2px #33b4ff)))}:host([color=primary]) button:disabled,:host([intent=workflow-primary]) button:disabled{background:var(--tct-btn-primary-disabled-bg, var(--comp-btn-primary-bg));color:var(--tct-btn-primary-disabled-font-color, var(--comp-btn-primary-font-color));box-shadow:var(--tct-btn-primary-disabled-box-shadow, var(--comp-btn-primary-box-shadow))}:host([color=secondary]) button,:host([intent=workflow-secondary]) button{background:var(--comp-btn-secondary-bg);color:var(--comp-btn-secondary-font-color, var(--tct-btn-secondary-font-color, var(--t-button-secondary-font-color, var(--tct-white, var(--app-white, #ffffff)))));border-color:var(--tct-btn-secondary-border-color, transparent);border-width:var(--tct-btn-secondary-border-width, 0);border-radius:var(--tct-btn-secondary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));box-shadow:var(--comp-btn-secondary-box-shadow);font-weight:var(--tct-btn-secondary-font-weight, 600);text-transform:var(--tct-btn-secondary-text-transform, none);letter-spacing:var(--tct-btn-secondary-letter-spacing, normal)}:host([color=secondary]) button:enabled:hover,:host([color=secondary]) button:enabled:focus,:host([color=secondary]) button:enabled:active,:host([intent=workflow-secondary]) button:enabled:hover,:host([intent=workflow-secondary]) button:enabled:focus,:host([intent=workflow-secondary]) button:enabled:active{background:var(--tct-btn-secondary-hover-bg, var(--t-button-default-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))));color:var(--tct-btn-secondary-hover-font-color, var(--t-button-default-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));border-color:var(--tct-btn-secondary-hover-border-color, var(--tct-btn-secondary-border-color, transparent))}:host([color=secondary]) button:hover:enabled,:host([color=secondary]) button:active:enabled,:host([intent=workflow-secondary]) button:hover:enabled,:host([intent=workflow-secondary]) button:active:enabled{box-shadow:var(--comp-btn-secondary-hover-box-shadow)}:host([color=secondary]) button:focus,:host([intent=workflow-secondary]) button:focus{box-shadow:var(--tct-global-focus, var(--const-global-focus, var(--comp-btn-secondary-hover-box-shadow)))}:host([color=secondary]) button:disabled,:host([intent=workflow-secondary]) button:disabled{background:var(--tct-btn-secondary-disabled-bg, var(--comp-btn-secondary-bg));color:var(--tct-btn-secondary-disabled-font-color, var(--comp-btn-secondary-font-color));box-shadow:var(--tct-btn-secondary-disabled-box-shadow, var(--comp-btn-secondary-box-shadow))}:host([intent=neutral]) button{background:var(--comp-btn-neutral-bg, var(--tct-btn-neutral-bg, transparent));color:var(--comp-btn-neutral-font-color, var(--tct-btn-neutral-font-color, var(--t-button-neutral-font-color, var(--tct-gray-1, var(--t-gray-1, var(--tct-black, var(--app-black, #0d0d0d)))))));border-color:var(--tct-btn-neutral-border-color, transparent);border-width:var(--tct-btn-neutral-border-width, 0);border-radius:var(--tct-btn-neutral-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));box-shadow:var(--comp-btn-neutral-box-shadow);font-weight:var(--tct-btn-neutral-font-weight, 600);text-transform:var(--tct-btn-neutral-text-transform, none);letter-spacing:var(--tct-btn-neutral-letter-spacing, normal)}:host([intent=neutral]) button:enabled:hover,:host([intent=neutral]) button:enabled:focus,:host([intent=neutral]) button:enabled:active{background:var(--tct-btn-neutral-hover-bg, transparent);color:var(--tct-btn-neutral-hover-font-color, var(--t-button-default-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));border-color:var(--tct-btn-neutral-hover-border-color, var(--tct-btn-neutral-border-color, transparent))}:host([intent=neutral]) button:hover:enabled,:host([intent=neutral]) button:active:enabled{box-shadow:var(--comp-btn-neutral-hover-box-shadow)}:host([intent=neutral]) button:focus{box-shadow:var(--tct-global-focus, var(--const-global-focus, var(--comp-btn-neutral-hover-box-shadow)))}:host([intent=neutral]) button:disabled{background:var(--tct-btn-neutral-disabled-bg, var(--comp-btn-neutral-bg));color:var(--tct-btn-neutral-disabled-font-color, var(--comp-btn-neutral-font-color));box-shadow:var(--tct-btn-neutral-disabled-box-shadow, var(--comp-btn-neutral-box-shadow))}:host button.icon-only{width:var(--tct-btn-icon-width, 44px);height:var(--tct-btn-icon-height, 44px);border-radius:var(--tct-btn-icon-border-radius, 0)}:host button.icon-only:hover,:host button.icon-only:focus{background-color:var(--tct-btn-icon-hover-bg, var(--tct-gray-14, 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-bg, var(--tct-btn-icon-hover-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(--tct-link-hover-color, var(--t-link-hover-color, #080808)))}:host([badge]) button{padding:var(--tct-btn-badge-padding, 2px 5px);font-size:var(--tct-btn-badge-font-size, var(--tct-btn-font-size, inherit));border-radius:var(--tct-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));background-color:var(--tct-btn-badge-bg, transparent);color:var(--tct-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-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(--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-bg, var(--comp-btn-primary-bg));color:var(--tct-btn-badge-active-font-color, var(--comp-btn-primary-font-color))}div{display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1, 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}';const l=class{constructor(r){t(this,r),this.halfCircleSpinner=()=>o("div",{class:"q2-loading-animation half-circle-spinner","aria-label":this.localizedLabel},o("div",{class:"circle circle-1"}),o("div",{class:"circle circle-2"})),this.spinner=()=>this.halfCircleSpinner(),this.skeletonLoader=()=>o("div",{class:"q2-loading-skeleton","aria-label":this.localizedLabel},"custom"===this.shape?o("slot",null):this.skeletonShape,o("div",{class:"q2-loading-skeleton-shimmer"}))}get loader(){const t={default:this.spinner,spinner:this.spinner,skeleton:this.skeletonLoader};return t[this.type]||t.default}get modifiersSet(){if("skeleton"===this.type&&this.modifiers)return new Set(this.modifiers.split("-"))}get countsArray(){if("skeleton"===this.type&&this.counts)return this.counts.split("x").map(Number)}get skeletonShape(){var t,o;return null!==(o=null===(t=n[this.shape])||void 0===t?void 0:t.call(n,this.countsArray,this.modifiersSet))&&void 0!==o?o:""}get spinnerShape(){const t={default:this.halfCircleSpinner,"half-circle":this.halfCircleSpinner};return t[this.type]||t.default}get localizedLabel(){return e(this.label||"tecton.element.loading.ariaLabel")}componentWillLoad(){a(this)}ariaLabelObserver(){a(this)}render(){return this.loader()}get hostElement(){return r(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};l.style="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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(--tct-scale-5, var(--app-scale-5, 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:calc(1em / 12) solid transparent}.half-circle-spinner .circle.circle-1{border-top-color:var(--tct-loading-primary-color, var(--t-loading-primary-color, #2e2e2e));animation:half-circle-spinner-animation 1s infinite}.half-circle-spinner .circle.circle-2{border-bottom-color:var(\n --tct-loading-secondary-color,\n var(--t-loading-secondary-color, #cccccc)\n );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))\n var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background-color:var(--tct-loading-skeleton-element-bg, var(--tct-gray-l3, var(--t-gray-14, #f2f2f2)))}.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}}";export{i as q2_btn,l as q2_loading}
|
|
1
|
+
import{r as t,h as o,g as r}from"./p-8e863fbc.js";import{h as a,l as e}from"./p-6f570344.js";import{s as n}from"./p-fa6e46e2.js";const i=class{constructor(o){t(this,o),this.handleSlotChange=()=>{this.handleIcons()}}componentWillLoad(){this.handleIcons(),a(this)}disable(t){this.disabled&&t.stopImmediatePropagation()}delegateFocus(t){t.target===this.hostElement&&this.hostElement.shadowRoot.querySelector("button").focus()}ariaLabelObserver(){a(this)}handleIcons(){const t=Array.from(this.hostElement.querySelectorAll(":scope > q2-icon")).reduce(((t,o)=>(t?o.remove():t=o,t)),null),o=!!t,r=!!this.hostElement.querySelector("q2-loc"),a=!!this.hostElement.textContent.trim(),e=(r||a)&&o&&this.hostElement.firstElementChild===t,n=(r||a)&&o&&this.hostElement.lastElementChild===t;let i;e||n||!o?e?i="left":n&&(i="right"):i="only",this.iconPosition=i}render(){const{ariaExpanded:t,ariaHasPopup:r,ariaSelected:a,disabled:n,type:i,tabindex:c}=this.buttonAttributes,{iconPosition:l,loading:s,badge:b,label:d,hideLabel:h}=this,p=l||s,v=!l||b;return o("button",{"aria-expanded":t,"aria-haspopup":r,"aria-label":h&&e(d),"aria-selected":a,disabled:n,type:i,tabindex:c,"test-id":"q2BtnInnerButton",class:l&&`icon-${l}`},o("div",null,p&&o("q2-loading",{hidden:!s,modifiers:v?"inline":void 0}),!h&&d?e(d):o("slot",{onSlotchange:this.handleSlotChange})))}get buttonAttributes(){return{ariaExpanded:void 0!==this.ariaExpanded?`${!!this.ariaExpanded}`:void 0,ariaHasPopup:this.ariaHasPopup?`${this.ariaHasPopup}`:void 0,ariaLabel:this.label&&this.hideLabel?e(this.label):void 0,ariaSelected:this.ariaSelected?`${this.ariaSelected}`:void 0,disabled:this.disabled||!1,type:this.type||"button",tabindex:this.tabIndex||void 0}}get hostElement(){return r(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};i.style='*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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%}:host{--comp-btn-primary-bg:var(--tct-btn-primary-bg, var(--t-button-primary-bg, #2e2e2e));--comp-btn-primary-font-color:var(--tct-btn-primary-font-color, var(--t-button-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-btn-fallback-hover-box-shadow:0 5px 10px rgba(0, 0, 0, 0.19),\n 0 3px 3px rgba(0, 0, 0, 0.23);--comp-btn-neutral-fallback-hover-box-shadow:0 5px 10px rgba(0, 0, 0, 0.24),\n 0 3px 3px rgba(0, 0, 0, 0.36);--comp-btn-primary-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-btn-primary-hover-box-shadow:var(--tct-btn-primary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow));--comp-btn-secondary-bg:var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc));--comp-btn-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e));--comp-btn-secondary-box-shadow:var(--tct-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-btn-secondary-hover-box-shadow:var(--tct-btn-secondary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow));--comp-btn-tween:var(--tct-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));--comp-btn-neutral-bg:var(--tct-btn-neutral-bg, transparent);--comp-btn-neutral-font-color:var(--tct-btn-neutral-font-color, var(--t-button-default-font-color, #2e2e2e));--comp-btn-neutral-box-shadow:var(--tct-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-btn-neutral-hover-box-shadow:var(--tct-btn-neutral-hover-box-shadow, var(--comp-btn-neutral-fallback-hover-box-shadow))}button{margin:var(--tct-scale-0, var(--app-scale-0, 0));padding:var(--tct-scale-0, var(--app-scale-0, 0));display:inline-block;width:100%;border:0;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(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}:host([size="1"]) button{padding:var(--tct-scale-1, var(--app-scale-1, 5px))}:host([color]:not([size])) button,:host([intent]:not([size])) button{padding:var(--tct-btn-padding, var(--tct-scale-2, var(--app-scale-2, 10px)))}:host([size="2"]) button{padding:var(--tct-scale-2, var(--app-scale-2, 10px))}:host([size="3"]) button{padding:var(--tct-scale-3, var(--app-scale-3, 15px))}:host([size="4x"]) button{padding:var(--tct-scale-4x, var(--app-scale-4x, 20px))}:host([size="4"]) button{padding:var(--tct-scale-6x, var(--app-scale-6x, 30px))}:host([color]) button,:host([intent]) button{border-style:solid;font-size:var(--tct-btn-font-size, inherit)}:host([color=primary]) button,:host([intent=workflow-primary]) button{background:var(--comp-btn-primary-bg);color:var(--comp-btn-primary-font-color);border-color:var(--tct-btn-primary-border-color, transparent);border-width:var(--tct-btn-primary-border-width, 0);border-radius:var(--tct-btn-primary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));box-shadow:var(--comp-btn-primary-box-shadow);font-weight:var(--tct-btn-primary-font-weight, 600);text-transform:var(--tct-btn-primary-text-transform, none);letter-spacing:var(--tct-btn-primary-letter-spacing, normal)}:host([color=primary]) button:enabled:hover,:host([color=primary]) button:enabled:focus,:host([color=primary]) button:enabled:active,:host([intent=workflow-primary]) button:enabled:hover,:host([intent=workflow-primary]) button:enabled:focus,:host([intent=workflow-primary]) button:enabled:active{background:var(--tct-btn-primary-hover-bg, var(--t-button-primary-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))));color:var(--tct-btn-primary-hover-font-color, var(--t-button-primary-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));border-color:var(--tct-btn-primary-hover-border-color, var(--tct-btn-primary-border-color, transparent))}:host([color=primary]) button:hover:enabled,:host([color=primary]) button:active:enabled,:host([intent=workflow-primary]) button:hover:enabled,:host([intent=workflow-primary]) button:active:enabled{box-shadow:var(--comp-btn-primary-hover-box-shadow)}:host([color=primary]) button:focus,:host([intent=workflow-primary]) button:focus{box-shadow:var(--tct-global-focus, var(--const-global-focus, var(--comp-btn-primary-hover-box-shadow, 0 0 0 2px #33b4ff)))}:host([color=primary]) button:disabled,:host([intent=workflow-primary]) button:disabled{background:var(--tct-btn-primary-disabled-bg, var(--comp-btn-primary-bg));color:var(--tct-btn-primary-disabled-font-color, var(--comp-btn-primary-font-color));box-shadow:var(--tct-btn-primary-disabled-box-shadow, var(--comp-btn-primary-box-shadow))}:host([color=secondary]) button,:host([intent=workflow-secondary]) button{background:var(--comp-btn-secondary-bg);color:var(--comp-btn-secondary-font-color, var(--tct-btn-secondary-font-color, var(--t-button-secondary-font-color, var(--tct-white, var(--app-white, #ffffff)))));border-color:var(--tct-btn-secondary-border-color, transparent);border-width:var(--tct-btn-secondary-border-width, 0);border-radius:var(--tct-btn-secondary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));box-shadow:var(--comp-btn-secondary-box-shadow);font-weight:var(--tct-btn-secondary-font-weight, 600);text-transform:var(--tct-btn-secondary-text-transform, none);letter-spacing:var(--tct-btn-secondary-letter-spacing, normal)}:host([color=secondary]) button:enabled:hover,:host([color=secondary]) button:enabled:focus,:host([color=secondary]) button:enabled:active,:host([intent=workflow-secondary]) button:enabled:hover,:host([intent=workflow-secondary]) button:enabled:focus,:host([intent=workflow-secondary]) button:enabled:active{background:var(--tct-btn-secondary-hover-bg, var(--t-button-default-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))));color:var(--tct-btn-secondary-hover-font-color, var(--t-button-default-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));border-color:var(--tct-btn-secondary-hover-border-color, var(--tct-btn-secondary-border-color, transparent))}:host([color=secondary]) button:hover:enabled,:host([color=secondary]) button:active:enabled,:host([intent=workflow-secondary]) button:hover:enabled,:host([intent=workflow-secondary]) button:active:enabled{box-shadow:var(--comp-btn-secondary-hover-box-shadow)}:host([color=secondary]) button:focus,:host([intent=workflow-secondary]) button:focus{box-shadow:var(--tct-global-focus, var(--const-global-focus, var(--comp-btn-secondary-hover-box-shadow)))}:host([color=secondary]) button:disabled,:host([intent=workflow-secondary]) button:disabled{background:var(--tct-btn-secondary-disabled-bg, var(--comp-btn-secondary-bg));color:var(--tct-btn-secondary-disabled-font-color, var(--comp-btn-secondary-font-color));box-shadow:var(--tct-btn-secondary-disabled-box-shadow, var(--comp-btn-secondary-box-shadow))}:host([intent=neutral]) button{background:var(--comp-btn-neutral-bg, var(--tct-btn-neutral-bg, transparent));color:var(--comp-btn-neutral-font-color, var(--tct-btn-neutral-font-color, var(--t-button-neutral-font-color, var(--tct-gray-1, var(--t-gray-1, var(--tct-black, var(--app-black, #0d0d0d)))))));border-color:var(--tct-btn-neutral-border-color, transparent);border-width:var(--tct-btn-neutral-border-width, 0);border-radius:var(--tct-btn-neutral-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));box-shadow:var(--comp-btn-neutral-box-shadow);font-weight:var(--tct-btn-neutral-font-weight, 600);text-transform:var(--tct-btn-neutral-text-transform, none);letter-spacing:var(--tct-btn-neutral-letter-spacing, normal)}:host([intent=neutral]) button:enabled:hover,:host([intent=neutral]) button:enabled:focus,:host([intent=neutral]) button:enabled:active{background:var(--tct-btn-neutral-hover-bg, transparent);color:var(--tct-btn-neutral-hover-font-color, var(--t-button-default-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));border-color:var(--tct-btn-neutral-hover-border-color, var(--tct-btn-neutral-border-color, transparent))}:host([intent=neutral]) button:hover:enabled,:host([intent=neutral]) button:active:enabled{box-shadow:var(--comp-btn-neutral-hover-box-shadow)}:host([intent=neutral]) button:focus{box-shadow:var(--tct-global-focus, var(--const-global-focus, var(--comp-btn-neutral-hover-box-shadow)))}:host([intent=neutral]) button:disabled{background:var(--tct-btn-neutral-disabled-bg, var(--comp-btn-neutral-bg));color:var(--tct-btn-neutral-disabled-font-color, var(--comp-btn-neutral-font-color));box-shadow:var(--tct-btn-neutral-disabled-box-shadow, var(--comp-btn-neutral-box-shadow))}:host button.icon-only{width:var(--tct-btn-icon-width, 44px);height:var(--tct-btn-icon-height, 44px);border-radius:var(--tct-btn-icon-border-radius, 0)}:host button.icon-only:hover,:host button.icon-only:focus{background-color:var(--tct-btn-icon-hover-bg, var(--tct-gray-14, 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-bg, var(--tct-btn-icon-hover-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(--tct-link-hover-color, var(--t-link-hover-color, #080808)))}:host([badge]) button{padding:var(--tct-btn-badge-padding, 2px 5px);font-size:var(--tct-btn-badge-font-size, var(--tct-btn-font-size, inherit));border-radius:var(--tct-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));background-color:var(--tct-btn-badge-bg, transparent);color:var(--tct-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-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(--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-bg, var(--comp-btn-primary-bg));color:var(--tct-btn-badge-active-font-color, var(--comp-btn-primary-font-color))}div{display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1, 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}';const c=class{constructor(r){t(this,r),this.halfCircleSpinner=()=>o("div",{class:"q2-loading-animation half-circle-spinner","aria-label":this.localizedLabel},o("div",{class:"circle circle-1"}),o("div",{class:"circle circle-2"})),this.spinner=()=>this.halfCircleSpinner(),this.skeletonLoader=()=>o("div",{class:"q2-loading-skeleton","aria-label":this.localizedLabel},"custom"===this.shape?o("slot",null):this.skeletonShape,o("div",{class:"q2-loading-skeleton-shimmer"}))}get loader(){const t={default:this.spinner,spinner:this.spinner,skeleton:this.skeletonLoader};return t[this.type]||t.default}get modifiersSet(){if("skeleton"===this.type&&this.modifiers)return new Set(this.modifiers.split("-"))}get countsArray(){if("skeleton"===this.type&&this.counts)return this.counts.split("x").map(Number)}get skeletonShape(){var t,o;return null!==(o=null===(t=n[this.shape])||void 0===t?void 0:t.call(n,this.countsArray,this.modifiersSet))&&void 0!==o?o:""}get spinnerShape(){const t={default:this.halfCircleSpinner,"half-circle":this.halfCircleSpinner};return t[this.type]||t.default}get localizedLabel(){return e(this.label||"tecton.element.loading.ariaLabel")}componentWillLoad(){a(this)}ariaLabelObserver(){a(this)}render(){return this.loader()}get hostElement(){return r(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};c.style="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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(--tct-scale-5, var(--app-scale-5, 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:calc(1em / 12) solid transparent}.half-circle-spinner .circle.circle-1{border-top-color:var(--tct-loading-primary-color, var(--t-loading-primary-color, #2e2e2e));animation:half-circle-spinner-animation 1s infinite}.half-circle-spinner .circle.circle-2{border-bottom-color:var(\n --tct-loading-secondary-color,\n var(--t-loading-secondary-color, #cccccc)\n );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))\n var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background-color:var(--tct-loading-skeleton-element-bg, var(--tct-gray-l3, var(--t-gray-14, #f2f2f2)))}.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}}";export{i as q2_btn,c as q2_loading}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,c as r,h as a,g as e}from"./p-8e863fbc.js";import{c as o,a as i,m as n,b as s,l as c}from"./p-0feefe56.js";const h=class{constructor(a){t(this,a),this.input=r(this,"input",7),this.change=r(this,"change",7),this.scheduledAfterRender=[],this.guid=o(),this.resize="vertical",this.checkRows=()=>{const{contentContainer:t,rows:r,textareaField:a,resize:e}=this;r&&!["none","horizontal"].includes(e)&&(t.style.height=`${t.offsetHeight}px`,a.removeAttribute("rows"))},this.checkCols=()=>{const{contentContainer:t,cols:r,textareaField:a,resize:e}=this;r&&!["none","vertical"].includes(e)&&(t.style.width=`${t.offsetWidth}px`,a.removeAttribute("cols"))},this.onTextareaFocus=()=>{this.hasFocus=!0,this.valueOnFocus=this.value,i(this)},this.onTextareaBlur=()=>{const{valueOnFocus:t,textareaField:{value:r}}=this;this.hasFocus=!1,i(this),t!==r&&this.change.emit({value:r})},this.onTextareaInput=t=>{t.stopPropagation(),this.input.emit({value:t.target.value})},this.onTextareaChange=t=>{t.stopPropagation(),this.change.emit({value:t.target.value})},this.onMouseDown=t=>{const{contentContainer:r}=this;this.downParams={width:r.offsetWidth,height:r.offsetHeight,x:t.clientX,y:t.clientY},document.addEventListener("mousemove",this.onMouseMove),document.addEventListener("mouseup",this.onMouseUp)},this.onMouseMove=t=>{this.setHeight(t),this.setWidth(t)},this.onTouchStart=t=>{if(1!==t.touches.length)return;t.preventDefault();const{contentContainer:r}=this,a=t.touches[0];this.downParams={width:r.offsetWidth,height:r.offsetHeight,x:a.pageX,y:a.pageY},document.addEventListener("touchmove",this.onTouchMove),document.addEventListener("touchend",this.onTouchMove)},this.onTouchMove=t=>{this.setHeight(t),this.setWidth(t)},this.onMouseUp=()=>{document.removeEventListener("mousemove",this.onMouseMove),this.downParams=null}}componentWillLoad(){isNaN(this.maxlength)&&(this.maxlength=void 0)}componentDidRender(){this.scheduledAfterRender.push(this.checkRows,this.checkCols),this.scheduledAfterRender.forEach((t=>t())),this.scheduledAfterRender=[]}get hasError(){return Array.isArray(this.errors)&&this.errors.length>0}get messages(){return this.errors&&this.errors.length>0&&this.errors||this.hints&&this.hints.length>0&&this.hints||[]}get showMessages(){return this.messages.length>0&&!this.hideMessages}get inputId(){return`input-guid-${this.guid}`}get inputDescribedBy(){return this.showMessages?`${this.inputId}-description`:void 0}get wrapperClasses(){return`field-container${this.hasError?" has-error":""}${this.value?" has-value":""}${this.hasFocus?" has-focus":""}`}get showResize(){const{resize:t}=this;return t&&"none"!==t}valueObserver(){const{maxlength:t,value:r=""}=this;if(!t)return;const a=r.substr(0,t);a!==r&&this.change.emit({value:a})}rowsObserver(){this.contentContainer.style.height=null}colsObserver(){this.contentContainer.style.width=null}hintsObserver(){this.hasFocus&&this.scheduledAfterRender.push((()=>i(this)))}errorsObserver(){this.hasFocus&&this.scheduledAfterRender.push((()=>i(this)))}onHostElementFocus(){this.textareaField.focus(),this.textareaField.dispatchEvent(new FocusEvent("focus",{bubbles:!1}))}onHostElementChange(t){t.target!==this.hostElement||this.hostElement.onchange||(this.value=t.detail.value)}setWidth(t){var r,a;const{contentContainer:e,resize:o,downParams:{width:i,x:n}}=this;if(!["both","horizontal"].includes(o))return;const s=t instanceof MouseEvent?t.clientX:null!==(a=null===(r=t.touches[0])||void 0===r?void 0:r.pageX)&&void 0!==a?a:0;e.style.width=i-(n-s)+"px"}setHeight(t){var r,a;const{contentContainer:e,resize:o,downParams:{height:i,y:n}}=this;if(!["both","vertical"].includes(o))return;const s=t instanceof MouseEvent?t.clientY:null!==(a=null===(r=t.touches[0])||void 0===r?void 0:r.pageY)&&void 0!==a?a:0;e.style.height=i-(n-s)+"px"}render(){return a("div",{class:this.wrapperClasses},s(this),a("div",{class:"content-container",ref:t=>this.contentContainer=t},this.inputDOM(),this.maxlength?this.maxLengthDOM():"",n(this)))}maxLengthDOM(){var t;return a("div",{class:"max-length","aria-hidden":"true"},(null===(t=this.value)||void 0===t?void 0:t.length)||0,"/",this.maxlength)}inputDOM(){return a("div",{class:"input-container"},a("textarea",{id:this.inputId,placeholder:this.placeholder&&c(this.placeholder)||void 0,"test-id":"inputField",maxLength:this.maxlength,"aria-describedby":this.inputDescribedBy,"aria-invalid":`${this.hasError}`,"aria-required":`${!this.optional}`,"aria-label":this.hideLabel&&this.label,spellcheck:this.spellcheck,rows:this.rows||3,cols:this.cols,value:this.value,ref:t=>this.textareaField=t,readonly:!!this.readonly,disabled:!!this.disabled,maxlength:this.maxlength,onInput:this.onTextareaInput,onChange:this.onTextareaChange,onFocus:this.onTextareaFocus,onBlur:this.onTextareaBlur}),this.hasError?a("q2-icon",{type:"error",class:"icon-error"}):"",this.showResize&&a("button",{onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart,class:"btn-resize","aria-label":c("tecton.element.input.resize"),tabIndex:-1},a("svg",{"aria-hidden":"true",viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg"},a("path",{d:"M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11",fill:"none","stroke-stroke-linecap":"square"}))))}get hostElement(){return e(this)}static get watchers(){return{value:["valueObserver"],rows:["rowsObserver"],cols:["colsObserver"],hints:["hintsObserver"],errors:["errorsObserver"]}}};h.style="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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;margin-top:var(--tct-textarea-margin-top, var(--app-scale-6x, 30px));margin-bottom:var(--tct-textarea-margin-bottom, var(--app-scale-6x, 30px));font-size:var(--tct-textarea-font-size, var(--app-font-size, inherit))}:host([hidden]){display:none}label{display:block;padding-left:var(--tct-textarea-label-padding-left, 0);padding-right:var(--tct-textarea-label-padding-right, 0);margin-top:var(--tct-textarea-label-margin-top, 0);margin-bottom:var(\n --tct-textarea-label-margin-bottom,\n var(--tct-scale-1x, var(--app-scale-1x, 5px))\n );color:var(--tct-textarea-label-font-color, inherit);font-size:var(--tct-textarea-label-font-size, inherit);font-weight:var(--tct-textarea-label-font-weight, 600);text-transform:var(--tct-textarea-label-text-transform, none);letter-spacing:var(--tct-textarea-label-letter-spacing, normal);transition:color var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}.optional-tag{margin-left:var(\n --tct-textarea-label-optional-margin-left,\n var(--tct-scale-1x, var(--app-scale-1x, 5px))\n );color:var(\n --tct-textarea-label-optional-font-color,\n var(--tct-a11y-color, var(--t-a11y-gray-color, #767676))\n );font-size:var(--tct-textarea-label-optional-font-size, 12px);font-weight:var(--tct-textarea-label-optional-font-weight, 400)}.input-container{min-height:var(--comp-textarea-min-height, var(--tct-textarea-min-height));height:100%;--comp-textarea-border-top-left-radius:var(\n --tct-textarea-border-top-left-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-textarea-border-top-right-radius:var(\n --tct-textarea-border-top-right-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-textarea-border-bottom-right-radius:var(\n --tct-textarea-border-bottom-right-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-textarea-border-bottom-left-radius:var(\n --tct-textarea-border-bottom-left-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-textarea-border-radius:var(--comp-textarea-border-top-left-radius)\n var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n var(--comp-textarea-border-bottom-left-radius);--comp-textarea-border-width:var(--tct-textarea-border-top-width, 1px)\n var(--tct-textarea-border-right-width, 1px) var(--tct-textarea-border-bottom-width, 1px)\n var(--tct-textarea-border-left-width, 1px);--comp-textarea-focus-border-width:var(--tct-textarea-focus-border-top-width, 1px)\n var(--tct-textarea-focus-border-right-width, 1px)\n var(--tct-textarea-focus-border-bottom-width, 1px)\n var(--tct-textarea-focus-border-left-width, 1px);--comp-textarea-icon-clearance:34px}.content-container{--comp-textarea-min-height:44px;--comp-textarea-min-width:150px;position:relative;display:inline-block;min-height:var(--comp-textarea-min-height, var(--tct-textarea-min-height, 44px));min-width:var(--comp-textarea-min-width, var(--tct-textarea-min-width, 150px))}:host(:not([cols])) .content-container{width:100%}textarea{resize:none;height:100%;-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;min-height:var(--comp-textarea-min-height, var(--tct-textarea-min-height));padding:var(--tct-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))\n var(--tct-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)));background-color:var(\n --tct-textarea-bg,\n var(--t-input-bg, var(--tct-gray-14, var(--app-gray-14, #f2f2f2)))\n );color:var(--tct-textarea-font-color, var(--t-input-font-color, inherit));border-width:var(--comp-textarea-border-width);border-style:solid;border-color:var(\n --tct-textarea-border-color,\n var(--t-input-border, var(--tct-gray-11, var(--app-gray-11, #cccccc)))\n );border-radius:var(--comp-textarea-border-radius);box-shadow:var(--tct-textarea-box-shadow, none);scrollbar-width:thin;scrollbar-color:var(--t-a11y-gray-color) transparent;transition:border-width\n var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n border-color var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n box-shadow var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}textarea::-webkit-scrollbar{width:var(--app-scale-1x);height:var(--app-scale-1x);margin:var(--app-scale-1x)}textarea::-webkit-scrollbar-thumb{background:var(--t-a11y-gray-color);border-radius:2px}textarea::-webkit-scrollbar-track{background:transparent}textarea:not([cols]){width:100%}textarea:focus{border-width:var(--comp-textarea-focus-border-width, 1px);border-color:var(\n --tct-textarea-focus-border-color,\n var(--t-input-focus, var(--tct-gray-9, var(--app-gray-9, #999999)))\n );box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)),\n var(--tct-textarea-focus-box-shadow, 0 0 transparent)}textarea::placeholder{color:var(\n --tct-textarea-placeholder-font-color,\n var(\n --t-input-placeholder-font-color,\n var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n )\n )}q2-icon{margin-top:calc(var(--tct-textarea-border-top-width, 1px) / 2);margin-bottom:calc(var(--tct-textarea-border-bottom-width, 1px) / 2);pointer-events:none;position:absolute;top:var(--tct-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)));color:var(\n --tct-textarea-icon-stroke-primary,\n var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))\n );right:0;margin-right:var(--tct-scale-2x, var(--app-scale-2x, 10px));--tct-icon-stroke-primary:var(\n --tct-textarea-icon-stroke-primary,\n var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n );--t-icon-stroke-primary:var(\n --tct-textarea-icon-stroke-primary,\n var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n )}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--t-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}.messages-container{height:0px;overflow:hidden;background-color:var(\n --tct-message-bg,\n var(--tct-gray-14, var(--app-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))\n );box-shadow:var(\n --tct-textarea-message-box-shadow,\n var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))\n );transition:height\n var(--tct-textarea-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));margin-top:2px;z-index:1;position:absolute;width:100%;color:var(--tct-textarea-messages-font-color, inherit)}:host([disabled]) .input-container{cursor:not-allowed;opacity:var(\n --tct-textarea-disabled-opacity,\n var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))\n )}textarea[disabled]{cursor:not-allowed}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance)}.has-error label{color:var(\n --tct-textarea-error-label-font-color,\n var(--tct-textarea-label-font-color, inherit)\n )}.has-error textarea:not(:focus){border-color:var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #c30000))}.max-length{color:var(--tct-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77)));font-size:var(\n --tct-textarea-max-length-font-size,\n var(--tct-font-size-small, var(--app-font-size-small, 12px))\n );position:absolute;right:0}.btn-resize{--tct-textarea-resize-icon-padding:calc(\n calc(\n var(--tct-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px)) -\n var(--tct-textarea-resize-icon-size, 12px)\n ) / 2\n );width:var(--tct-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px));height:var(--tct-textarea-resize-btn-height, var(--tct-btn-icon-height, 44px));background:var(--tct-textarea-resize-btn-background, transparent);stroke:var(--tct-textarea-resize-color, var(--t-textA, rgba(77, 77, 77, 0.77)));border:0;position:absolute;right:calc(var(--tct-textarea-resize-icon-padding) * -1 + 2px);bottom:calc(var(--tct-textarea-resize-icon-padding) * -1 + 2px);display:block;padding:var(--tct-textarea-resize-icon-padding);font-size:0}.btn-resize:focus{outline:none;box-shadow:none}:host([resize='both']) .btn-resize{cursor:se-resize}:host([resize='vertical']) .btn-resize{cursor:s-resize}:host([resize='horizontal']) .btn-resize{cursor:e-resize}";export{h as q2_textarea}
|
|
1
|
+
import{r as t,c as r,h as a,g as e}from"./p-8e863fbc.js";import{c as o,b as i,m as n,d as s,l as c}from"./p-6f570344.js";const h=class{constructor(a){t(this,a),this.input=r(this,"input",7),this.change=r(this,"change",7),this.scheduledAfterRender=[],this.guid=o(),this.resize="vertical",this.checkRows=()=>{const{contentContainer:t,rows:r,textareaField:a,resize:e}=this;r&&!["none","horizontal"].includes(e)&&(t.style.height=`${t.offsetHeight}px`,a.removeAttribute("rows"))},this.checkCols=()=>{const{contentContainer:t,cols:r,textareaField:a,resize:e}=this;r&&!["none","vertical"].includes(e)&&(t.style.width=`${t.offsetWidth}px`,a.removeAttribute("cols"))},this.onTextareaFocus=()=>{this.hasFocus=!0,this.valueOnFocus=this.value,i(this)},this.onTextareaBlur=()=>{const{valueOnFocus:t,textareaField:{value:r}}=this;this.hasFocus=!1,i(this),t!==r&&this.change.emit({value:r})},this.onTextareaInput=t=>{t.stopPropagation(),this.input.emit({value:t.target.value})},this.onTextareaChange=t=>{t.stopPropagation(),this.change.emit({value:t.target.value})},this.onMouseDown=t=>{const{contentContainer:r}=this;this.downParams={width:r.offsetWidth,height:r.offsetHeight,x:t.clientX,y:t.clientY},document.addEventListener("mousemove",this.onMouseMove),document.addEventListener("mouseup",this.onMouseUp)},this.onMouseMove=t=>{this.setHeight(t),this.setWidth(t)},this.onTouchStart=t=>{if(1!==t.touches.length)return;t.preventDefault();const{contentContainer:r}=this,a=t.touches[0];this.downParams={width:r.offsetWidth,height:r.offsetHeight,x:a.pageX,y:a.pageY},document.addEventListener("touchmove",this.onTouchMove),document.addEventListener("touchend",this.onTouchMove)},this.onTouchMove=t=>{this.setHeight(t),this.setWidth(t)},this.onMouseUp=()=>{document.removeEventListener("mousemove",this.onMouseMove),this.downParams=null}}componentWillLoad(){isNaN(this.maxlength)&&(this.maxlength=void 0)}componentDidRender(){this.scheduledAfterRender.push(this.checkRows,this.checkCols),this.scheduledAfterRender.forEach((t=>t())),this.scheduledAfterRender=[]}get hasError(){return Array.isArray(this.errors)&&this.errors.length>0}get messages(){return this.errors&&this.errors.length>0&&this.errors||this.hints&&this.hints.length>0&&this.hints||[]}get showMessages(){return this.messages.length>0&&!this.hideMessages}get inputId(){return`input-guid-${this.guid}`}get inputDescribedBy(){return this.showMessages?`${this.inputId}-description`:void 0}get wrapperClasses(){return`field-container${this.hasError?" has-error":""}${this.value?" has-value":""}${this.hasFocus?" has-focus":""}`}get showResize(){const{resize:t}=this;return t&&"none"!==t}valueObserver(){const{maxlength:t,value:r=""}=this;if(!t)return;const a=r.substr(0,t);a!==r&&this.change.emit({value:a})}rowsObserver(){this.contentContainer.style.height=null}colsObserver(){this.contentContainer.style.width=null}hintsObserver(){this.hasFocus&&this.scheduledAfterRender.push((()=>i(this)))}errorsObserver(){this.hasFocus&&this.scheduledAfterRender.push((()=>i(this)))}onHostElementFocus(){this.textareaField.focus(),this.textareaField.dispatchEvent(new FocusEvent("focus",{bubbles:!1}))}onHostElementChange(t){t.target!==this.hostElement||this.hostElement.onchange||(this.value=t.detail.value)}setWidth(t){var r,a;const{contentContainer:e,resize:o,downParams:{width:i,x:n}}=this;if(!["both","horizontal"].includes(o))return;const s=t instanceof MouseEvent?t.clientX:null!==(a=null===(r=t.touches[0])||void 0===r?void 0:r.pageX)&&void 0!==a?a:0;e.style.width=i-(n-s)+"px"}setHeight(t){var r,a;const{contentContainer:e,resize:o,downParams:{height:i,y:n}}=this;if(!["both","vertical"].includes(o))return;const s=t instanceof MouseEvent?t.clientY:null!==(a=null===(r=t.touches[0])||void 0===r?void 0:r.pageY)&&void 0!==a?a:0;e.style.height=i-(n-s)+"px"}render(){return a("div",{class:this.wrapperClasses},s(this),a("div",{class:"content-container",ref:t=>this.contentContainer=t},this.inputDOM(),this.maxlength?this.maxLengthDOM():"",n(this)))}maxLengthDOM(){var t;return a("div",{class:"max-length","aria-hidden":"true"},(null===(t=this.value)||void 0===t?void 0:t.length)||0,"/",this.maxlength)}inputDOM(){return a("div",{class:"input-container"},a("textarea",{id:this.inputId,placeholder:this.placeholder&&c(this.placeholder)||void 0,"test-id":"inputField",maxLength:this.maxlength,"aria-describedby":this.inputDescribedBy,"aria-invalid":`${this.hasError}`,"aria-required":`${!this.optional}`,"aria-label":this.hideLabel&&this.label,spellcheck:this.spellcheck,rows:this.rows||3,cols:this.cols,value:this.value,ref:t=>this.textareaField=t,readonly:!!this.readonly,disabled:!!this.disabled,maxlength:this.maxlength,onInput:this.onTextareaInput,onChange:this.onTextareaChange,onFocus:this.onTextareaFocus,onBlur:this.onTextareaBlur}),this.hasError?a("q2-icon",{type:"error",class:"icon-error"}):"",this.showResize&&a("button",{onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart,class:"btn-resize","aria-label":c("tecton.element.input.resize"),tabIndex:-1},a("svg",{"aria-hidden":"true",viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg"},a("path",{d:"M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11",fill:"none","stroke-stroke-linecap":"square"}))))}get hostElement(){return e(this)}static get watchers(){return{value:["valueObserver"],rows:["rowsObserver"],cols:["colsObserver"],hints:["hintsObserver"],errors:["errorsObserver"]}}};h.style="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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;margin-top:var(--tct-textarea-margin-top, var(--app-scale-6x, 30px));margin-bottom:var(--tct-textarea-margin-bottom, var(--app-scale-6x, 30px));font-size:var(--tct-textarea-font-size, var(--app-font-size, inherit))}:host([hidden]){display:none}label{display:block;padding-left:var(--tct-textarea-label-padding-left, 0);padding-right:var(--tct-textarea-label-padding-right, 0);margin-top:var(--tct-textarea-label-margin-top, 0);margin-bottom:var(\n --tct-textarea-label-margin-bottom,\n var(--tct-scale-1x, var(--app-scale-1x, 5px))\n );color:var(--tct-textarea-label-font-color, inherit);font-size:var(--tct-textarea-label-font-size, inherit);font-weight:var(--tct-textarea-label-font-weight, 600);text-transform:var(--tct-textarea-label-text-transform, none);letter-spacing:var(--tct-textarea-label-letter-spacing, normal);transition:color var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}.optional-tag{margin-left:var(\n --tct-textarea-label-optional-margin-left,\n var(--tct-scale-1x, var(--app-scale-1x, 5px))\n );color:var(\n --tct-textarea-label-optional-font-color,\n var(--tct-a11y-color, var(--t-a11y-gray-color, #767676))\n );font-size:var(--tct-textarea-label-optional-font-size, 12px);font-weight:var(--tct-textarea-label-optional-font-weight, 400)}.input-container{min-height:var(--comp-textarea-min-height, var(--tct-textarea-min-height));height:100%;--comp-textarea-border-top-left-radius:var(\n --tct-textarea-border-top-left-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-textarea-border-top-right-radius:var(\n --tct-textarea-border-top-right-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-textarea-border-bottom-right-radius:var(\n --tct-textarea-border-bottom-right-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-textarea-border-bottom-left-radius:var(\n --tct-textarea-border-bottom-left-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-textarea-border-radius:var(--comp-textarea-border-top-left-radius)\n var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n var(--comp-textarea-border-bottom-left-radius);--comp-textarea-border-width:var(--tct-textarea-border-top-width, 1px)\n var(--tct-textarea-border-right-width, 1px) var(--tct-textarea-border-bottom-width, 1px)\n var(--tct-textarea-border-left-width, 1px);--comp-textarea-focus-border-width:var(--tct-textarea-focus-border-top-width, 1px)\n var(--tct-textarea-focus-border-right-width, 1px)\n var(--tct-textarea-focus-border-bottom-width, 1px)\n var(--tct-textarea-focus-border-left-width, 1px);--comp-textarea-icon-clearance:34px}.content-container{--comp-textarea-min-height:44px;--comp-textarea-min-width:150px;position:relative;display:inline-block;min-height:var(--comp-textarea-min-height, var(--tct-textarea-min-height, 44px));min-width:var(--comp-textarea-min-width, var(--tct-textarea-min-width, 150px))}:host(:not([cols])) .content-container{width:100%}textarea{resize:none;height:100%;-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;min-height:var(--comp-textarea-min-height, var(--tct-textarea-min-height));padding:var(--tct-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))\n var(--tct-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)));background-color:var(\n --tct-textarea-bg,\n var(--t-input-bg, var(--tct-gray-14, var(--app-gray-14, #f2f2f2)))\n );color:var(--tct-textarea-font-color, var(--t-input-font-color, inherit));border-width:var(--comp-textarea-border-width);border-style:solid;border-color:var(\n --tct-textarea-border-color,\n var(--t-input-border, var(--tct-gray-11, var(--app-gray-11, #cccccc)))\n );border-radius:var(--comp-textarea-border-radius);box-shadow:var(--tct-textarea-box-shadow, none);scrollbar-width:thin;scrollbar-color:var(--t-a11y-gray-color) transparent;transition:border-width\n var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n border-color var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n box-shadow var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}textarea::-webkit-scrollbar{width:var(--app-scale-1x);height:var(--app-scale-1x);margin:var(--app-scale-1x)}textarea::-webkit-scrollbar-thumb{background:var(--t-a11y-gray-color);border-radius:2px}textarea::-webkit-scrollbar-track{background:transparent}textarea:not([cols]){width:100%}textarea:focus{border-width:var(--comp-textarea-focus-border-width, 1px);border-color:var(\n --tct-textarea-focus-border-color,\n var(--t-input-focus, var(--tct-gray-9, var(--app-gray-9, #999999)))\n );box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)),\n var(--tct-textarea-focus-box-shadow, 0 0 transparent)}textarea::placeholder{color:var(\n --tct-textarea-placeholder-font-color,\n var(\n --t-input-placeholder-font-color,\n var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n )\n )}q2-icon{margin-top:calc(var(--tct-textarea-border-top-width, 1px) / 2);margin-bottom:calc(var(--tct-textarea-border-bottom-width, 1px) / 2);pointer-events:none;position:absolute;top:var(--tct-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)));color:var(\n --tct-textarea-icon-stroke-primary,\n var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))\n );right:0;margin-right:var(--tct-scale-2x, var(--app-scale-2x, 10px));--tct-icon-stroke-primary:var(\n --tct-textarea-icon-stroke-primary,\n var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n );--t-icon-stroke-primary:var(\n --tct-textarea-icon-stroke-primary,\n var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n )}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--t-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}.messages-container{height:0px;overflow:hidden;background-color:var(\n --tct-message-bg,\n var(--tct-gray-14, var(--app-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))\n );box-shadow:var(\n --tct-textarea-message-box-shadow,\n var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))\n );transition:height\n var(--tct-textarea-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));margin-top:2px;z-index:1;position:absolute;width:100%;color:var(--tct-textarea-messages-font-color, inherit)}:host([disabled]) .input-container{cursor:not-allowed;opacity:var(\n --tct-textarea-disabled-opacity,\n var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))\n )}textarea[disabled]{cursor:not-allowed}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance)}.has-error label{color:var(\n --tct-textarea-error-label-font-color,\n var(--tct-textarea-label-font-color, inherit)\n )}.has-error textarea:not(:focus){border-color:var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #c30000))}.max-length{color:var(--tct-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77)));font-size:var(\n --tct-textarea-max-length-font-size,\n var(--tct-font-size-small, var(--app-font-size-small, 12px))\n );position:absolute;right:0}.btn-resize{--tct-textarea-resize-icon-padding:calc(\n calc(\n var(--tct-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px)) -\n var(--tct-textarea-resize-icon-size, 12px)\n ) / 2\n );width:var(--tct-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px));height:var(--tct-textarea-resize-btn-height, var(--tct-btn-icon-height, 44px));background:var(--tct-textarea-resize-btn-background, transparent);stroke:var(--tct-textarea-resize-color, var(--t-textA, rgba(77, 77, 77, 0.77)));border:0;position:absolute;right:calc(var(--tct-textarea-resize-icon-padding) * -1 + 2px);bottom:calc(var(--tct-textarea-resize-icon-padding) * -1 + 2px);display:block;padding:var(--tct-textarea-resize-icon-padding);font-size:0}.btn-resize:focus{outline:none;box-shadow:none}:host([resize='both']) .btn-resize{cursor:se-resize}:host([resize='vertical']) .btn-resize{cursor:s-resize}:host([resize='horizontal']) .btn-resize{cursor:e-resize}";export{h as q2_textarea}
|