q2-tecton-elements 1.11.4-alpha.0 → 1.12.0

package/dist/types/components.d.ts

@@ -6,6 +6,8 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { IEventDetail } from "./components/q2-input/types";
+import { IOptionValue } from "./components/q2-option-list/index";
+import { IOptionValue as IOptionValue1 } from "./components/q2-option-list";
 export namespace Components {
     interface ClickElsewhere {
     }
@@ -219,12 +221,29 @@ export namespace Components {
         "display": string;
         "hidden": boolean;
         "multiline": boolean;
+        "noSelect": boolean;
         "optionId": string;
         "role": string;
         "selected": boolean;
         "tabindex": string;
         "value": string;
     }
+    interface Q2OptionList {
+        "align": 'left' | 'right';
+        "customSearch": boolean;
+        "direction": 'up' | 'down';
+        "disabled": boolean;
+        "handleExternalKeydown": (event: KeyboardEvent) => Promise<void>;
+        "multiple": boolean;
+        "noSelect": boolean;
+        "open": boolean;
+        "role": 'listbox' | 'menu';
+        "selectedOptions": IOptionValue[];
+        "setActiveElement": (index: number) => Promise<void>;
+        "setDefaultActiveElement": () => Promise<void>;
+        "toggle": () => Promise<void>;
+        "type": 'menu' | 'listbox';
+    }
     interface Q2Pagination {
         "page": number;
         "pages": number;
@@ -234,6 +253,16 @@ export namespace Components {
         "recordsOnly": boolean;
         "total": number;
     }
+    interface Q2Pill {
+        "active": boolean;
+        "disabled": boolean;
+        "label": string;
+        "multiple": boolean;
+        "open": boolean;
+        "selectedOptions": IOptionValue[];
+        "theme": 'primary' | 'secondary' | 'tertiary';
+        "value": string;
+    }
     interface Q2Radio {
         "ariaLabel": string;
         "checked": boolean;
@@ -305,6 +334,12 @@ export namespace Components {
         "selected": boolean;
         "value": string;
     }
+    interface Q2Tag {
+        "label": string;
+        "open": boolean;
+        "role": string;
+        "theme": 'primary' | 'secondary' | 'tertiary';
+    }
     interface Q2Textarea {
         "cols": number;
         "disabled": boolean;
@@ -458,12 +493,24 @@ declare global {
         prototype: HTMLQ2OptionElement;
         new (): HTMLQ2OptionElement;
     };
+    interface HTMLQ2OptionListElement extends Components.Q2OptionList, HTMLStencilElement {
+    }
+    var HTMLQ2OptionListElement: {
+        prototype: HTMLQ2OptionListElement;
+        new (): HTMLQ2OptionListElement;
+    };
     interface HTMLQ2PaginationElement extends Components.Q2Pagination, HTMLStencilElement {
     }
     var HTMLQ2PaginationElement: {
         prototype: HTMLQ2PaginationElement;
         new (): HTMLQ2PaginationElement;
     };
+    interface HTMLQ2PillElement extends Components.Q2Pill, HTMLStencilElement {
+    }
+    var HTMLQ2PillElement: {
+        prototype: HTMLQ2PillElement;
+        new (): HTMLQ2PillElement;
+    };
     interface HTMLQ2RadioElement extends Components.Q2Radio, HTMLStencilElement {
     }
     var HTMLQ2RadioElement: {
@@ -512,6 +559,12 @@ declare global {
         prototype: HTMLQ2TabPaneElement;
         new (): HTMLQ2TabPaneElement;
     };
+    interface HTMLQ2TagElement extends Components.Q2Tag, HTMLStencilElement {
+    }
+    var HTMLQ2TagElement: {
+        prototype: HTMLQ2TagElement;
+        new (): HTMLQ2TagElement;
+    };
     interface HTMLQ2TextareaElement extends Components.Q2Textarea, HTMLStencilElement {
     }
     var HTMLQ2TextareaElement: {
@@ -545,7 +598,9 @@ declare global {
         "q2-message": HTMLQ2MessageElement;
         "q2-optgroup": HTMLQ2OptgroupElement;
         "q2-option": HTMLQ2OptionElement;
+        "q2-option-list": HTMLQ2OptionListElement;
         "q2-pagination": HTMLQ2PaginationElement;
+        "q2-pill": HTMLQ2PillElement;
         "q2-radio": HTMLQ2RadioElement;
         "q2-radio-group": HTMLQ2RadioGroupElement;
         "q2-section": HTMLQ2SectionElement;
@@ -554,6 +609,7 @@ declare global {
         "q2-stepper-pane": HTMLQ2StepperPaneElement;
         "q2-tab-container": HTMLQ2TabContainerElement;
         "q2-tab-pane": HTMLQ2TabPaneElement;
+        "q2-tag": HTMLQ2TagElement;
         "q2-textarea": HTMLQ2TextareaElement;
         "tecton-tab-pane": HTMLTectonTabPaneElement;
     }
@@ -783,13 +839,27 @@ declare namespace LocalJSX {
         "display"?: string;
         "hidden"?: boolean;
         "multiline"?: boolean;
-        "onClick"?: (event: CustomEvent<any>) => void;
+        "noSelect"?: boolean;
         "optionId"?: string;
         "role"?: string;
         "selected"?: boolean;
         "tabindex"?: string;
         "value"?: string;
     }
+    interface Q2OptionList {
+        "align"?: 'left' | 'right';
+        "customSearch"?: boolean;
+        "direction"?: 'up' | 'down';
+        "disabled"?: boolean;
+        "multiple"?: boolean;
+        "noSelect"?: boolean;
+        "onChange"?: (event: CustomEvent<{ value: string; values: IOptionValue[] }>) => void;
+        "onOptionListState"?: (event: CustomEvent<{ open: boolean }>) => void;
+        "open"?: boolean;
+        "role"?: 'listbox' | 'menu';
+        "selectedOptions"?: IOptionValue[];
+        "type"?: 'menu' | 'listbox';
+    }
     interface Q2Pagination {
         "onChange"?: (event: CustomEvent<any>) => void;
         "page"?: number;
@@ -800,6 +870,17 @@ declare namespace LocalJSX {
         "recordsOnly"?: boolean;
         "total"?: number;
     }
+    interface Q2Pill {
+        "active"?: boolean;
+        "disabled"?: boolean;
+        "label"?: string;
+        "multiple"?: boolean;
+        "onChange"?: (event: CustomEvent<{ value: string; values: IOptionValue[]; active: boolean }>) => void;
+        "open"?: boolean;
+        "selectedOptions"?: IOptionValue[];
+        "theme"?: 'primary' | 'secondary' | 'tertiary';
+        "value"?: string;
+    }
     interface Q2Radio {
         "ariaLabel"?: string;
         "checked"?: boolean;
@@ -879,6 +960,13 @@ declare namespace LocalJSX {
         "selected"?: boolean;
         "value"?: string;
     }
+    interface Q2Tag {
+        "label"?: string;
+        "onClick"?: (event: CustomEvent<{ value: string }>) => void;
+        "open"?: boolean;
+        "role"?: string;
+        "theme"?: 'primary' | 'secondary' | 'tertiary';
+    }
     interface Q2Textarea {
         "cols"?: number;
         "disabled"?: boolean;
@@ -933,7 +1021,9 @@ declare namespace LocalJSX {
         "q2-message": Q2Message;
         "q2-optgroup": Q2Optgroup;
         "q2-option": Q2Option;
+        "q2-option-list": Q2OptionList;
         "q2-pagination": Q2Pagination;
+        "q2-pill": Q2Pill;
         "q2-radio": Q2Radio;
         "q2-radio-group": Q2RadioGroup;
         "q2-section": Q2Section;
@@ -942,6 +1032,7 @@ declare namespace LocalJSX {
         "q2-stepper-pane": Q2StepperPane;
         "q2-tab-container": Q2TabContainer;
         "q2-tab-pane": Q2TabPane;
+        "q2-tag": Q2Tag;
         "q2-textarea": Q2Textarea;
         "tecton-tab-pane": TectonTabPane;
     }
@@ -970,7 +1061,9 @@ declare module "@stencil/core" {
             "q2-message": LocalJSX.Q2Message & JSXBase.HTMLAttributes<HTMLQ2MessageElement>;
             "q2-optgroup": LocalJSX.Q2Optgroup & JSXBase.HTMLAttributes<HTMLQ2OptgroupElement>;
             "q2-option": LocalJSX.Q2Option & JSXBase.HTMLAttributes<HTMLQ2OptionElement>;
+            "q2-option-list": LocalJSX.Q2OptionList & JSXBase.HTMLAttributes<HTMLQ2OptionListElement>;
             "q2-pagination": LocalJSX.Q2Pagination & JSXBase.HTMLAttributes<HTMLQ2PaginationElement>;
+            "q2-pill": LocalJSX.Q2Pill & JSXBase.HTMLAttributes<HTMLQ2PillElement>;
             "q2-radio": LocalJSX.Q2Radio & JSXBase.HTMLAttributes<HTMLQ2RadioElement>;
             "q2-radio-group": LocalJSX.Q2RadioGroup & JSXBase.HTMLAttributes<HTMLQ2RadioGroupElement>;
             "q2-section": LocalJSX.Q2Section & JSXBase.HTMLAttributes<HTMLQ2SectionElement>;
@@ -979,6 +1072,7 @@ declare module "@stencil/core" {
             "q2-stepper-pane": LocalJSX.Q2StepperPane & JSXBase.HTMLAttributes<HTMLQ2StepperPaneElement>;
             "q2-tab-container": LocalJSX.Q2TabContainer & JSXBase.HTMLAttributes<HTMLQ2TabContainerElement>;
             "q2-tab-pane": LocalJSX.Q2TabPane & JSXBase.HTMLAttributes<HTMLQ2TabPaneElement>;
+            "q2-tag": LocalJSX.Q2Tag & JSXBase.HTMLAttributes<HTMLQ2TagElement>;
             "q2-textarea": LocalJSX.Q2Textarea & JSXBase.HTMLAttributes<HTMLQ2TextareaElement>;
             "tecton-tab-pane": LocalJSX.TectonTabPane & JSXBase.HTMLAttributes<HTMLTectonTabPaneElement>;
         }

package/dist/types/workspace/workspace/Tecton_tecton-production_master/packages/q2-tecton-elements/.stencil/test/elements/q2-tag-test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/workspace/workspace/{_production_release_1.11.4-alpha → Tecton_tecton-production_master}/packages/q2-tecton-elements/.stencil/test/helpers.d.ts

@@ -11,3 +11,4 @@ export declare function setWindowHeight(height: number): void;
 export declare function makeDomRect(customAttributes: any): any;
 export declare const base64Image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=";
 export declare function getActiveElementTestId(page: E2EPage): Promise<string>;
+export declare function getFocusedAttribute(page: E2EPage, attribute: string): Promise<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "q2-tecton-elements",
-    "version": "1.11.4-alpha.0",
+    "version": "1.12.0",
     "description": "Q2 Tecton Custom Elements",
     "main": "dist/index.js",
     "module": "dist/index.mjs",
@@ -48,5 +48,5 @@
         "smoothscroll-polyfill": "^0.4.4",
         "swiper": "7.4.1"
     },
-    "gitHead": "1dfc0e8fac6cb795a0c9576c4ebe036efc361f2b"
+    "gitHead": "1834b21162acd0914c9cb7322022a56803730e7a"
 }

package/dist/q2-tecton-elements/p-6702eb4d.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as e,H as o,g as a}from"./p-080839ed.js";const n=class{constructor(e){t(this,e),this.click=i(this,"click",7),this.role="option",this.tabindex="-1",this._multiSelectHidden=!1,this.onClick=t=>{t.stopImmediatePropagation();const{disabled:i,disabledGroup:e}=this;i||e||this.click.emit()}}render(){const{disabled:t,disabledGroup:i,selected:a,_multiSelectHidden:n}=this;return e(o,{"aria-disabled":t||i?"true":void 0,"aria-selected":a?"true":void 0,"aria-hidden":n?"true":void 0},this.selected&&e("q2-icon",{type:"checkmark"}),e("div",{class:"content",onClick:this.onClick},e("slot",null)))}get hostElement(){return a(this)}};n.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{padding:0 var(--tct-scale-2, var(--app-scale-2, 10px));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--tct-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3, 15px))) 1fr;align-items:center;grid-template-areas:"icon content";gap:var(--tct-scale-1, var(--app-scale-1, 5px))}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host(:not([aria-disabled]):hover),:host([active]),:host(:focus){background-color:var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))}q2-icon{grid-area:icon;--tct-icon-size:var(--tct-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3, 15px)))}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}';export{n as q2_option}

package/dist/q2-tecton-elements/p-841ec108.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,h as c,g as o}from"./p-080839ed.js";import{c as r,h as a,o as i,i as l,l as s}from"./p-f85da2a8.js";const h=class{constructor(c){t(this,c),this.change=e(this,"change",7),this.checked=!1,this.id=`checkbox-${r()}`,this.onInputChange=t=>{t.stopPropagation(),this.disabled||this.readonly||t.target instanceof HTMLInputElement&&(this.change.emit({value:t.target.value,checked:t.target.checked}),this.inputElement.focus())},this.onControlClick=t=>{t.stopPropagation(),this.readonly||this.inputElement.click()},this.onKeyDown=t=>{this.readonly&&"Space"===t.code&&t.preventDefault()}}componentWillLoad(){a(this)}componentDidLoad(){i(this.hostElement)}defaultChangeHandler(t){this.readonly||t.target!==this.hostElement||this.hostElement.onchange||!t.detail||(this.checked=t.detail.checked)}delegateFocus(t){l(t,this.hostElement)&&this.hostElement.shadowRoot.querySelector("input").focus()}ariaLabelObserver(){a(this)}render(){return c("div",{class:"checkbox-container"},c("input",{ref:t=>this.inputElement=t,id:this.id,type:"checkbox",checked:this.indeterminate||this.checked||!1,disabled:!!this.disabled||!!this.groupDisabled,class:"sr",value:this.value,name:this.name||this.id,"aria-label":this.label&&this.hideLabel?s(this.label):void 0,"test-id":"q2CheckboxInnerCheckBox",onKeyDown:this.onKeyDown,onChange:this.onInputChange}),c("label",{"test-id":"checkboxButton"},this.generateCheckboxSVG(),!this.hideLabel&&c("div",{class:"q2-checkbox-label-content"},c("span",{class:"label-text",onClick:this.onControlClick},s(this.label)),c("slot",null))))}generateCheckboxSVG(){return"favorite"===this.type?c("q2-icon",{type:"star",class:"checkbox-icon",onClick:this.onControlClick}):"toggle"===this.type?this.generateToggleSVG():c("svg",{"aria-hidden":"true",width:"20",height:"20",viewBox:"0 0 20 20",class:"checkbox-icon",focusable:"false",onClick:this.onControlClick},c("rect",{x:"1",y:"1",width:"18",height:"18",rx:"3"}),(this.checked||this.indeterminate)&&this.generateCheckBoxSVGFill())}generateCheckBoxSVGFill(){return this.indeterminate?c("line",{class:"checkbox-fill indeterminate-fill",x1:"4",y1:"10",x2:"16",y2:"10"}):c("polyline",{class:"checkbox-fill checked-fill",points:"5 11 8.5 14.5 15 6"})}generateToggleSVG(){return c("div",{class:"toggle-svg",onClick:this.onControlClick},c("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 46 14",class:"toggle-track"},c("rect",{width:"36",height:"14",rx:"7",x:"5"})),c("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 30 30",class:"toggle-indicator"},c("circle",{class:"toggle-circle",width:"20",height:"20",cx:"15",cy:"15",r:"10"}),c("line",{class:"off checked-fill",x1:"12",y1:"18",x2:"18",y2:"12"}),c("line",{class:"off checked-fill",x1:"12",y1:"12",x2:"18",y2:"18"}),c("polyline",{class:"on checked-fill",points:"11,16 14,19 18,12 14,19"})))}get hostElement(){return o(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};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;padding:var(--tct-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2, 10px))) 0}label{display:flex;align-items:center;--comp-checkbox-outer-stroke-color:var(\n      --tct-checkbox-outer-stroke-color,\n      var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))\n  );--comp-checkbox-outer-fill-color:var(\n      --tct-checkbox-outer-fill-color,\n      var(--tct-white, var(--app-white, #ffffff))\n  );--comp-checkbox-checked-color:var(\n      --tct-checkbox-check-stroke-color,\n      var(\n          --t-checkbox-fill,\n          var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))\n      )\n  )}input:disabled+label{opacity:var(--tct-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)))}.checkbox-icon{height:var(--tct-checkbox-size, 20px);width:var(--tct-checkbox-size, 20px);border-radius:var(--tct-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));stroke:var(--comp-checkbox-outer-stroke-color);color:var(--comp-checkbox-outer-stroke-color);--t-icon-stroke-primary:var(--comp-checkbox-outer-stroke-color);stroke-width:var(--tct-checkbox-outer-stroke-width, 2);fill:var(--comp-checkbox-outer-fill-color);flex-shrink:0}.checkbox-icon,.label-text{cursor:pointer}input:focus+label .checkbox-icon{box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}.checkbox-fill{stroke:var(--comp-checkbox-checked-color)}input:checked+label .checkbox-icon{fill:var(--tct-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color));stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color))}input:focus+label .checkbox-icon{stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color))}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, 2.5);stroke-linecap:round;stroke-linejoin:round}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, 3.5)}.q2-checkbox-label-content{font-weight:var(--tct-checkbox-font-weight, 400);width:calc( 100% - var(--tct-checkbox-size, 20px) - var(--tct-scale-2, var(--app-scale-2, 10px)) );cursor:inherit}input:checked+label .q2-checkbox-label-content{font-weight:var(--tct-checkbox-selected-font-weight, 600);letter-spacing:var(--tct-checkbox-selected-letter-spacing, 0.25)}:host([type=favorite]){--scoped-checkbox-favorite-stroke-color:var(\n      --tct-checkbox-favorite-stroke-color,\n      var(--t-textA, rgba(77, 77, 77, 0.77))\n  );--scoped-checkbox-favorite-fill-color:var(\n      --tct-checkbox-favorite-fill-color,\n      var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))\n  )}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, 1);--tct-icon-stroke-primary:var(--scoped-checkbox-favorite-stroke-color);width:var(--tct-checkbox-size, 20px);height:var(--tct-checkbox-size, 20px);transition:fill var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), stroke var(--tct-tween-2, var(--app-tween-2, 0.4s ease))}:host([type=favorite]:focus-within) input+label .checkbox-icon,:host([type=favorite]:hover) input+label .checkbox-icon{--tct-icon-stroke-primary:var(--scoped-checkbox-favorite-fill-color);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, 2)}:host([type=favorite]) input:checked+label .checkbox-icon{--tct-icon-stroke-primary:var(--scoped-checkbox-favorite-fill-color);fill:var(--scoped-checkbox-favorite-fill-color);transition:fill var(--tct-tween-1, var(--app-tween-1, 0.2s ease)), color var(--tct-tween-1, var(--app-tween-1, 0.2s ease)), stroke var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type=favorite]:focus-within) input:checked+label .checkbox-icon,:host([type=favorite]:hover) input:checked+label .checkbox-icon{--tct-icon-stroke-primary:var(--scoped-checkbox-favorite-stroke-color)}:host([alignment=right]) label,:host([type=toggle]:not([alignment=left])) label{flex-flow:row-reverse}.checkbox-icon,:host([type=toggle][alignment=left]) .toggle-svg{margin-right:var(--tct-scale-2, var(--app-scale-2, 10px));margin-left:0}:host([alignment=right]) .checkbox-icon,.toggle-svg{cursor:pointer;margin-right:0;margin-left:var(--tct-scale-2, var(--app-scale-2, 10px))}:host([type=toggle]) .toggle-svg{height:30px;width:46px;position:relative}:host([type=toggle]) .toggle-track,:host([type=toggle]) .toggle-indicator{position:absolute;top:50%;transform:translateY(-50%)}:host([type=toggle]) .toggle-track{fill:var(--tct-checkbox-toggle-track-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));height:14px;width:46px}:host([type=toggle]) input:checked+label .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color));opacity:0.5}:host([type=toggle]) .toggle-indicator{transition:left var(--tct-tween-1, var(--app-tween-1, 0.2s ease));height:30px;width:30px;left:0;border-radius:50%}:host([type=toggle]) input:checked+label .toggle-indicator{left:21px}:host([type=toggle]) .toggle-circle{fill:var(--tct-checkbox-toggle-circle-color, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999)))))}:host([type=toggle]) input:checked+label .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color))}:host([type=toggle]) input:checked+label .off,:host([type=toggle]) input:not(:checked)+label .on{opacity:0}:host([type=toggle]) input:focus+label .toggle-circle{stroke:var(--tct-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color));stroke-width:10px;stroke-opacity:0.5}:host([type=toggle]) input:not(:checked):focus+label .toggle-circle{stroke:var(--tct-checkbox-toggle-circle-color, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999)))))}:host([type=toggle]) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff)));transition:opacity var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type=toggle]) input:checked+label .checked-fill{stroke:var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff))))}";export{h as q2_checkbox}

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

@@ -1 +0,0 @@
-import{r as t,c as a,h as i,F as r,g as e}from"./p-080839ed.js";import{b as o,c as s,l as n,i as c,o as l}from"./p-f85da2a8.js";o();const h=class{constructor(i){t(this,i),this.change=a(this,"change",7),this.settled=a(this,"settled",7),this.noPrint=!1,this.guid=s(),this.scheduledAfterRender=[],this.lastScrolled=new Date(null).getTime(),this.hasLeft=!1,this.hasRight=!1,this.scrollEnabled=!1,this.showScrollLeft=!1,this.showScrollRight=!1,this.updateTabData=()=>{this.updateTabPaneProps(),this.setTabs()},this.updateTabPaneProps=()=>{this.tabPanes.forEach(((t,a)=>{t.selected=t.value===this.selectedTabValue,t.guid=this.guid,t.index=a}))},this.setTabs=()=>{this.tabs=this.tabPanes.map((({label:t,value:a})=>({label:t&&n(t)||"",value:a})))},this.onTabClick=t=>{this.value===t.target.dataset.value||this.change.emit({value:t.target.dataset.value})},this.onTabKeyDown=t=>{const a=t.target.dataset.value;switch(t.key){case"ArrowRight":t.preventDefault(),this.moveToAdjacentTab(a,"next");break;case"ArrowLeft":t.preventDefault(),this.moveToAdjacentTab(a,"prev");break;case"Home":t.preventDefault(),this.moveToAdjacentTab(a,"first");break;case"End":t.preventDefault(),this.moveToAdjacentTab(a,"last");break;case"Space":case"Enter":t.preventDefault(),this.change.emit({value:a})}},this.moveToAdjacentTab=(t,a)=>{let i,r=this.tabs.map((({value:t})=>t)).indexOf(t);switch(a){case"next":i=Math.min(r+1,this.tabs.length-1);break;case"prev":i=Math.max(r-1,0);break;case"first":i=0;break;case"last":i=this.tabs.length-1}r!==i&&this.moveFocus(i,!1)},this.moveFocus=(t,a=!0)=>{const i=this.listElement.querySelector(`[data-value="${this.tabs[t].value}"]`);return i.focus({preventScroll:a}),this.listElement.scrollTo({left:i.offsetLeft-this.listElement.clientWidth/2,behavior:"smooth"}),i},this.checkScrollState=()=>{if(!this.listElement)return;const{scrollLeft:t,scrollWidth:a,clientWidth:i}=this.listElement;this.scrollEnabled=a>i,this.showScrollLeft=!!t,this.showScrollRight=a!==t+i},this.onScrollBtnClick=t=>{const a=Math.floor(this.listElement.clientWidth/2);this.listElement.scrollBy({left:"left"===t?-a:a,behavior:"smooth"})},this.onSlotChange=()=>{this.checkScrollState()}}resizeIframe(){var t,a;return null===(a=null===(t=window.TectonElements)||void 0===t?void 0:t.resizeIframe)||void 0===a?void 0:a.call(t)}get tabPanes(){const t=this.hostElement.querySelectorAll("q2-tab-pane, tecton-tab-pane");return 0===t.length?[]:Array.from(t).filter((t=>t.name===this.name))}get selectedTabValue(){return this.value||this.tabPanes[0].value||""}get tabList(){return this.hostElement.shadowRoot.querySelector(".tab-list")}defaultChangeHandler(t){t.target!==this.hostElement||this.hostElement.onchange||(this.value=t.detail.value)}onResize(){this.checkScrollState()}onFocus(t){if(!c(t,this.hostElement))return;const a=this.tabs.findIndex((t=>t.value===this.selectedTabValue));this.moveFocus(a)}componentWillLoad(){const t=new MutationObserver(this.updateTabData);t.observe(this.hostElement,{childList:!0,attributes:!0}),this.mutationObserver=t,this.resizeObserver=new ResizeObserver((()=>this.checkScrollState())),this.updateTabData()}componentDidRender(){this.scheduledAfterRender.forEach((t=>t())),this.scheduledAfterRender=[],this.settled.emit()}componentDidLoad(){this.resizeObserver.observe(this.listElement),this.checkScrollState(),l(this.hostElement);const t=this.tabs.findIndex((t=>t.value===this.value));this.scheduledAfterRender.push((()=>{const a=this.moveFocus(Math.max(t,0));this.value=a.dataset.value,a.blur()}))}disconnectedCallback(){this.resizeObserver.disconnect(),this.mutationObserver.disconnect(),this.mutationObserver=null}valueObserver(){this.updateTabData(),this.scheduledAfterRender.push(this.resizeIframe);const t=this.tabs.findIndex((t=>t.value===this.value));t>-1&&this.scheduledAfterRender.push((()=>this.moveFocus(t,!1)))}nameObserver(){this.updateTabData()}render(){return i(r,null,i("div",{class:"tab-container"},this.scrollEnabled&&i(r,null,i("div",{class:"gradient-left",hidden:!this.showScrollLeft}),i("div",{class:"gradient-right",hidden:!this.showScrollRight}),i("q2-btn",{class:"btn-left",hidden:!this.showScrollLeft,onClick:()=>this.onScrollBtnClick("left")},i("q2-icon",{type:"chevron-left"})),i("q2-btn",{class:"btn-right",hidden:!this.showScrollRight,onClick:()=>this.onScrollBtnClick("right")},i("q2-icon",{type:"chevron-right"}))),i("ul",{onScroll:this.checkScrollState,ref:t=>this.listElement=t,class:this.noPrint?"no-print":null,role:"tablist"},this.tabs.map(((t,a)=>this.generateTab(t,a))))),i("div",{class:"tab-content"},i("slot",{onSlotchange:()=>this.onSlotChange()})))}generateTab(t,a){const{label:r,value:e}=t,o=this.selectedTabValue===e;return i("li",{role:"presentation"},i("button",{id:`tab-${this.guid}-${a}`,"data-value":e,"test-id":"tabLink",tabIndex:o?0:-1,role:"tab","aria-selected":o?"true":void 0,"aria-controls":`tab-pane-${this.guid}-${a}`,onClick:this.onTabClick,onKeyDown:this.onTabKeyDown},r))}get hostElement(){return e(this)}static get watchers(){return{value:["valueObserver"],name:["nameObserver"]}}};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;position:relative}button{cursor:pointer;margin:0}.tab-container{position:relative}ul{--comp-container-padding:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-1, var(--app-scale-1, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1, 5px))));list-style:none;border-bottom:1px solid var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));overflow-x:auto;align-items:center;scrollbar-width:none;scrollbar-color:transparent}ul::-webkit-scrollbar{width:0;height:0}ul::-webkit-scrollbar-thumb{background:transparent}ul::-webkit-scrollbar-track{background:transparent}@media print{ul.no-print{display:none}}li{flex:0 0 auto}li button{background:var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent));border-width:var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));border-color:var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));border-style:var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));border-radius:var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));width:var(--tct-tab-width, var(--t-tab-width, 100%));text-align:var(--tct-tab-text-align, var(--t-tab-text-align, center));text-decoration:var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));padding:var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2, 10px))));color:var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));display:block;transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type=section]) li button{--comp-tab-section-padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));font-size:inherit;padding:var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)))}li button:hover{color:var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));background-color:var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}li button[aria-selected=true]{color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentColor));border-style:var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background-color:var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit))}:host([color=alt]) li button{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit))}:host([color=alt]) li button:hover,:host([color=alt]) li button[aria-selected=true]{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}@media screen and (max-width: 767px){li button{--comp-tab-padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));font-size:inherit;padding:var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)))}}.tab-content{--comp-tab-content-padding:var(--tct-scale-2, var(--app-scale-2, 10px)) 0;padding:var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding)))}.tab-content:focus{outline:none;box-shadow:none}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:44px}.gradient-left{background-image:linear-gradient(to right, var(--t-base), var(--t-base-a0));left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base));right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-bg:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left{left:0}.btn-right{right:0}";export{h as q2_tab_container}