q2-tecton-elements 1.47.0 → 1.48.1-alpha.0

package/dist/types/components.d.ts

@@ -799,9 +799,9 @@ export namespace Components {
     }
     interface Q2DataTable {
         /**
-          * Adds a border between each row for the table.
+          * Adds borders between rows and/or columns in the table.
          */
-        "bordered": boolean;
+        "bordered": boolean | 'horizontal' | 'vertical' | 'grid';
         /**
           * Provides a caption for the data table.
          */
@@ -859,6 +859,10 @@ export namespace Components {
           * Adds a shadow to the table
          */
         "shadowed": boolean;
+        /**
+          * Enables alternating background colors for the table rows
+         */
+        "striped": boolean;
     }
     interface Q2Detail {
         /**
@@ -978,11 +982,12 @@ export namespace Components {
         "disabled": boolean;
         /**
           * The text that appears within the dropdown item.
+          * @info This will be used as the `aria-label` for this item.
           * @localizable
          */
         "label": string;
         /**
-          * Renders an icon button in the item. Clicking on this button will change the `type` emitting on the item's click event detail to "remove".
+          * Renders an icon button in the item. Clicking on this button will change the `type` on the item's click event detail to "remove".
          */
         "removable": boolean;
         /**
@@ -1074,6 +1079,12 @@ export namespace Components {
          */
         "value": string;
     }
+    interface Q2Form {
+        /**
+          * Changes the vertical spacing of the form-fields contained within the component's slot
+         */
+        "spacing": 'none' | 'compact' | 'normal' | 'comfortable';
+    }
     interface Q2Icon {
         /**
           * Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text.
@@ -1211,6 +1222,10 @@ export namespace Components {
           * Appends "(optional)" to the field label, and sets `aria-required` on the nested input tag to `false`.
          */
         "optional": boolean;
+        /**
+          * The pattern string of the input field, regular expression string is expected. This allows us to check the validity user's input. For instance, <q2-input label="My input" pattern="[a-zA-Z0-9]{3,5}" id="myInput">  - Allows only 3~5 alphanumeric letters  In Javascript, you can check the validity object in your q2-input Type "abcdefgh", then access the validity object
+          * @snippet const myInput = document.querySelector('#myInput'); console.log(myInput.validity);
+         */
         "pattern": string;
         /**
           * Text that appears within the field when it is blurred and empty. Placeholder text disappears when the user focuses on the field and provides input.
@@ -1710,13 +1725,13 @@ export namespace Components {
     }
     interface Q2RelativeTime {
         /**
-          * If you want to compare two specific dates, you can provide a valid `date` and `baseDate`, and the component will tell you the elapsed time between the two dates. If `baseDate` is not provided, the date and time at render will be used instead and - if `sync` is true - updated every second to reflect the time between the `date` value and now.
-          * @warning - Requires a valid `date` value. - Providing a valid `baseDate` will disable `sync` and remove the "in"/"ago" suffixes in the time message. - Must be a valid ISO date string.
+          * If you want to display the length of time between two specific dates, you can provide a valid `date` and `baseDate`, and the component will display the length of time between the two dates.  If `baseDate` is not provided, the date and time at render will be used instead and - if `sync` is true - updated every second to reflect the time between the `date` value and the time at render.
+          * @warning - Requires a valid `date` value. - If the provided `baseDate` is invalid, the component will display "Invalid Date" and a warning message will be printed in the console. - Providing a valid `baseDate` will disable `sync` and remove the "in"/"ago" suffixes in the time message. - Must be a valid ISO date string.
          */
         "baseDate": Date | string;
         /**
           * The date you want to calculate relative time from.
-          * @warning Must be a valid ISO date string.
+          * @warning - Must be a valid ISO date string. - If the provided `date` is invalid, the component will display "Invalid Date" and a warning message will be printed in the console.
          */
         "date": Date | string;
         /**
@@ -1724,8 +1739,8 @@ export namespace Components {
          */
         "displayedMessageValue": () => Promise<string>;
         /**
-          * The language used for the relative time message.
-          * @info It is recommended to use the BCP 47 Language Tags in the ['language-extlang' format](https://www.w3.org/International/articles/language-tags/).
+          * The language used for the displayed message.
+          * @info It is recommended to use the BCP 47 Language Tags in the ["language-extlang" format](https://www.w3.org/International/articles/language-tags/).
          */
         "locale": string;
         /**
@@ -1733,7 +1748,8 @@ export namespace Components {
          */
         "messageFormat": 'long' | 'short' | 'narrow';
         /**
-          * Set this to `always` to force the use of numeric values (e.g. "1 day ago") rather than relative ones (e.g. "yesterday") in the time message.
+          * Determines if the displayed message will use numeric or relative values.
+          * @info  Set this property to `always` to force the use of numeric values (e.g. "1 day ago") rather than relative ones (e.g. "yesterday").
          */
         "numeric": 'always' | 'auto';
         /**
@@ -1742,9 +1758,17 @@ export namespace Components {
          */
         "sync": boolean;
         /**
-          * Force the unit of measurement.
+          * Enforces the use of the provided unit of measurement in the displayed message.
          */
         "unit": 'second' | 'minute' | 'hour' | 'day' | 'month' | 'quarter' | 'year';
+        /**
+          * Checks the provided baseDate prop is a valid date.
+         */
+        "validBaseDateProp": () => Promise<boolean>;
+        /**
+          * Checks the provided date prop is a valid date.
+         */
+        "validDateProp": () => Promise<boolean>;
     }
     interface Q2Section {
         /**
@@ -1756,7 +1780,8 @@ export namespace Components {
          */
         "expanded": boolean;
         /**
-          * The text to display above the `q2-section`. Renders as an `<h2>` element.
+          * The text to display above the `q2-section`. Renders as an `<h2>` element.  It is also used to provided an `aria-label` for the toggle button when the component is collapsible.
+          * @warning If you are providing a custom header, setting this property is still strongly encouraged for the purposes of accessibility.
          */
         "label": string;
         /**
@@ -2564,6 +2589,12 @@ declare global {
         prototype: HTMLQ2EditableFieldElement;
         new (): HTMLQ2EditableFieldElement;
     };
+    interface HTMLQ2FormElement extends Components.Q2Form, HTMLStencilElement {
+    }
+    var HTMLQ2FormElement: {
+        prototype: HTMLQ2FormElement;
+        new (): HTMLQ2FormElement;
+    };
     interface HTMLQ2IconElement extends Components.Q2Icon, HTMLStencilElement {
     }
     var HTMLQ2IconElement: {
@@ -3009,6 +3040,7 @@ declare global {
         "q2-dropdown": HTMLQ2DropdownElement;
         "q2-dropdown-item": HTMLQ2DropdownItemElement;
         "q2-editable-field": HTMLQ2EditableFieldElement;
+        "q2-form": HTMLQ2FormElement;
         "q2-icon": HTMLQ2IconElement;
         "q2-input": HTMLQ2InputElement;
         "q2-item": HTMLQ2ItemElement;
@@ -3832,9 +3864,9 @@ declare namespace LocalJSX {
     }
     interface Q2DataTable {
         /**
-          * Adds a border between each row for the table.
+          * Adds borders between rows and/or columns in the table.
          */
-        "bordered"?: boolean;
+        "bordered"?: boolean | 'horizontal' | 'vertical' | 'grid';
         /**
           * Provides a caption for the data table.
          */
@@ -3916,6 +3948,10 @@ declare namespace LocalJSX {
           * Adds a shadow to the table
          */
         "shadowed"?: boolean;
+        /**
+          * Enables alternating background colors for the table rows
+         */
+        "striped"?: boolean;
     }
     interface Q2Detail {
         /**
@@ -4035,11 +4071,12 @@ declare namespace LocalJSX {
         "disabled"?: boolean;
         /**
           * The text that appears within the dropdown item.
+          * @info This will be used as the `aria-label` for this item.
           * @localizable
          */
         "label"?: string;
         /**
-          * Renders an icon button in the item. Clicking on this button will change the `type` emitting on the item's click event detail to "remove".
+          * Renders an icon button in the item. Clicking on this button will change the `type` on the item's click event detail to "remove".
          */
         "removable"?: boolean;
         /**
@@ -4096,6 +4133,7 @@ declare namespace LocalJSX {
         "maxlength"?: number;
         /**
           * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.  The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.
+          * @info  If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.
          */
         "onChange"?: (event: Q2EditableFieldCustomEvent<{
         editing: boolean;
@@ -4124,6 +4162,12 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface Q2Form {
+        /**
+          * Changes the vertical spacing of the form-fields contained within the component's slot
+         */
+        "spacing"?: 'none' | 'compact' | 'normal' | 'comfortable';
+    }
     interface Q2Icon {
         /**
           * Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text.
@@ -4274,6 +4318,10 @@ declare namespace LocalJSX {
           * Appends "(optional)" to the field label, and sets `aria-required` on the nested input tag to `false`.
          */
         "optional"?: boolean;
+        /**
+          * The pattern string of the input field, regular expression string is expected. This allows us to check the validity user's input. For instance, &lt;q2-input label="My input" pattern="[a-zA-Z0-9]{3,5}" id="myInput"&gt;  - Allows only 3~5 alphanumeric letters  In Javascript, you can check the validity object in your q2-input Type "abcdefgh", then access the validity object
+          * @snippet const myInput = document.querySelector('#myInput'); console.log(myInput.validity);
+         */
         "pattern"?: string;
         /**
           * Text that appears within the field when it is blurred and empty. Placeholder text disappears when the user focuses on the field and provides input.
@@ -4799,18 +4847,18 @@ declare namespace LocalJSX {
     }
     interface Q2RelativeTime {
         /**
-          * If you want to compare two specific dates, you can provide a valid `date` and `baseDate`, and the component will tell you the elapsed time between the two dates. If `baseDate` is not provided, the date and time at render will be used instead and - if `sync` is true - updated every second to reflect the time between the `date` value and now.
-          * @warning - Requires a valid `date` value. - Providing a valid `baseDate` will disable `sync` and remove the "in"/"ago" suffixes in the time message. - Must be a valid ISO date string.
+          * If you want to display the length of time between two specific dates, you can provide a valid `date` and `baseDate`, and the component will display the length of time between the two dates.  If `baseDate` is not provided, the date and time at render will be used instead and - if `sync` is true - updated every second to reflect the time between the `date` value and the time at render.
+          * @warning - Requires a valid `date` value. - If the provided `baseDate` is invalid, the component will display "Invalid Date" and a warning message will be printed in the console. - Providing a valid `baseDate` will disable `sync` and remove the "in"/"ago" suffixes in the time message. - Must be a valid ISO date string.
          */
         "baseDate"?: Date | string;
         /**
           * The date you want to calculate relative time from.
-          * @warning Must be a valid ISO date string.
+          * @warning - Must be a valid ISO date string. - If the provided `date` is invalid, the component will display "Invalid Date" and a warning message will be printed in the console.
          */
         "date"?: Date | string;
         /**
-          * The language used for the relative time message.
-          * @info It is recommended to use the BCP 47 Language Tags in the ['language-extlang' format](https://www.w3.org/International/articles/language-tags/).
+          * The language used for the displayed message.
+          * @info It is recommended to use the BCP 47 Language Tags in the ["language-extlang" format](https://www.w3.org/International/articles/language-tags/).
          */
         "locale"?: string;
         /**
@@ -4818,7 +4866,8 @@ declare namespace LocalJSX {
          */
         "messageFormat"?: 'long' | 'short' | 'narrow';
         /**
-          * Set this to `always` to force the use of numeric values (e.g. "1 day ago") rather than relative ones (e.g. "yesterday") in the time message.
+          * Determines if the displayed message will use numeric or relative values.
+          * @info  Set this property to `always` to force the use of numeric values (e.g. "1 day ago") rather than relative ones (e.g. "yesterday").
          */
         "numeric"?: 'always' | 'auto';
         /**
@@ -4827,7 +4876,7 @@ declare namespace LocalJSX {
          */
         "sync"?: boolean;
         /**
-          * Force the unit of measurement.
+          * Enforces the use of the provided unit of measurement in the displayed message.
          */
         "unit"?: 'second' | 'minute' | 'hour' | 'day' | 'month' | 'quarter' | 'year';
     }
@@ -4841,7 +4890,8 @@ declare namespace LocalJSX {
          */
         "expanded"?: boolean;
         /**
-          * The text to display above the `q2-section`. Renders as an `<h2>` element.
+          * The text to display above the `q2-section`. Renders as an `<h2>` element.  It is also used to provided an `aria-label` for the toggle button when the component is collapsible.
+          * @warning If you are providing a custom header, setting this property is still strongly encouraged for the purposes of accessibility.
          */
         "label"?: string;
         /**
@@ -5310,6 +5360,7 @@ declare namespace LocalJSX {
         "q2-dropdown": Q2Dropdown;
         "q2-dropdown-item": Q2DropdownItem;
         "q2-editable-field": Q2EditableField;
+        "q2-form": Q2Form;
         "q2-icon": Q2Icon;
         "q2-input": Q2Input;
         "q2-item": Q2Item;
@@ -5367,6 +5418,7 @@ declare module "@stencil/core" {
             "q2-dropdown": LocalJSX.Q2Dropdown & JSXBase.HTMLAttributes<HTMLQ2DropdownElement>;
             "q2-dropdown-item": LocalJSX.Q2DropdownItem & JSXBase.HTMLAttributes<HTMLQ2DropdownItemElement>;
             "q2-editable-field": LocalJSX.Q2EditableField & JSXBase.HTMLAttributes<HTMLQ2EditableFieldElement>;
+            "q2-form": LocalJSX.Q2Form & JSXBase.HTMLAttributes<HTMLQ2FormElement>;
             "q2-icon": LocalJSX.Q2Icon & JSXBase.HTMLAttributes<HTMLQ2IconElement>;
             "q2-input": LocalJSX.Q2Input & JSXBase.HTMLAttributes<HTMLQ2InputElement>;
             "q2-item": LocalJSX.Q2Item & JSXBase.HTMLAttributes<HTMLQ2ItemElement>;

package/dist/types/workspace/workspace/{_Gitlab_tecton-production_master → on-production_release_1.48.0-pre}/packages/q2-tecton-elements/.stencil/test/helpers.d.ts

@@ -41,5 +41,5 @@ export declare const evaluateA11y: (page: any, ...args: string[]) => Promise<{}>
  * @note This function should be called before the component is rendered.
  * @note Be sure to call `jest.restoreAllMocks()` after the test to restore the original fetch function.
  */
-export declare const mockIconFetch: (iconMarkup?: string) => jest.SpyInstance<Promise<Response>, [input: URL | RequestInfo, init?: RequestInit], any>;
+export declare const mockIconFetch: (iconMarkup?: string) => jest.SpyInstance<Promise<Response>, [input: string | URL | Request, init?: RequestInit], any>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "q2-tecton-elements",
-    "version": "1.47.0",
+    "version": "1.48.1-alpha.0",
     "description": "Q2 Tecton Custom Elements",
     "license": "MIT",
     "author": "Q2 Tecton Team",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@stencil/core": "4.18.0",
-        "q2-tecton-common": "1.47.0",
+        "q2-tecton-common": "1.48.1-alpha.0",
         "swiper": "8.4.4"
     },
     "devDependencies": {
@@ -54,5 +54,5 @@
         "typescript": "5.4.5",
         "typescript-eslint": "^7.11.0"
     },
-    "gitHead": "c94c06f4129a0105b8104934ba5282934364b775"
+    "gitHead": "fbfef34e93cf28d89547bbf7c4f2fe3af9e24441"
 }

package/dist/q2-tecton-elements/p-0e27ea75.entry.js

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2EditableFieldCss","Q2EditableFieldStyle0","Q2EditableField","this","scheduledAfterRender","defaultValue","value","inputInput","event","stopPropagation","input","emit","detail","formattedValue","innerValue","inputChange","e","inputKeyDown","key","preventDefault","cancelClick","saveClick","inputClick","valueFromInputProp","hostElement","shadowRoot","querySelector","change","editing","name","setTimeout","errors","length","focus","editClick","inputElement","setValue","locLabel","label","loc","componentWillLoad","handleAriaLabel","componentDidRender","forEach","fn","componentDidLoad","overrideFocus","errorsObserver","focusedElement","activeElement","isInputFocused","_a","tagName","hasErrors","ariaLabelObserver","observesEditing","newValue","oldValue","push","wrapperClass","onHostElementChange","isEventFromElement","onchange","delegateFocus","clickEdit","editBtnElement","click","clickCancel","cancelBtnElement","clickSave","saveBtnElement","options","waitForNextPaint","render","h","generateEditStateDOM","generateReadStateDOM","class","hidden","ref","el","hideLabel","hints","Array","isArray","map","str","undefined","type","disabled","formatModifier","maxlength","onInput","onChange","onKeyDown","onClick","persistentLabel","generateEditBtn"],"sources":["src/components/q2-editable-field/q2-editable-field.scss?tag=q2-editable-field&encapsulation=shadow","src/components/q2-editable-field/q2-editable-field.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n    display: inline-block;\n    max-width: 100%;\n}\n\n.q2-editable-field-wrapper:not([hidden]) {\n    display: flex;\n}\n\n.q2-editable-field-wrapper.editing {\n    align-items: flex-end;\n}\n\n:host([block]) {\n    display:block;\n    width: 100%;\n    .q2-editable-field-wrapper:not([hidden]) {\n        display: grid;\n        grid-template-columns: 1fr auto auto;\n    }\n}\n\nq2-input,\n.text-wrapper {\n    margin: 0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0;\n}\n\nq2-input {\n    flex: 1 1 auto;\n    min-width: 170px;\n}\n\n.text-wrapper {\n    flex: 0 auto;\n    align-self: center;\n    display: inline-block;\n}\n\n:host([truncated]) .text-wrapper {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\nq2-btn {\n    flex: 0 0 44px;\n}\n\ndl {\n    margin: var(--tct-scale-0, var(--app-scale-0x, 0));\n}\n\ndt {\n    font-weight: 600;\n}\n\ndd {\n    margin-left: var(--tct-scale-0, var(--app-scale-0x, 0));\n    display: flex;\n    align-items: center;\n}\n","import { Component, State, Prop, h, Listen, Element, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent } from 'src/components';\nimport { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { Q2Input } from '../q2-input/q2-input';\nimport { IFormatterValueObject } from '../q2-input/q2-input-types';\n\ninterface IExtendedQ2InputElement extends HTMLQ2InputElement {\n    formattedValue: IFormatterValueObject['formattedValue'];\n}\n\n@Component({ tag: 'q2-editable-field', shadow: true, styleUrl: 'q2-editable-field.scss' })\nexport class Q2EditableField {\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true }) block: boolean;\n\n    /** Disables the edit button and field. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** Controls the edit state of the element. */\n    @Prop({ reflect: true, mutable: true }) editing: boolean = false;\n\n    /**\n     * Determines the `errors` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/ui/q2-input/) for more information.\n     */\n    @Prop() errors: string[];\n\n    /**\n     * Determines the `formatModifier` applied to the `q2-input` element.\n     * @info\n     * Only applicable when `type=\"currency\"`.\n     *\n     * See [q2-input](https://tecton.q2developer.com/ui/q2-input/) for more information.\n     */\n    @Prop({ reflect: true }) formatModifier: string;\n\n    /** Hide's the field's `<label>` element from view. */\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n    /**\n     * Determines the `hints` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/ui/q2-input/) for more information.\n     */\n    @Prop() hints: string[];\n\n    /**\n     * The visible descriptor for the element.\n     * Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string = '';\n\n    /**\n     * Determines the `maxLength` applied to the `q2-input`.\n     *\n     * See [q2-input](https://tecton.q2developer.com/ui/q2-input/) for more information.\n     */\n    @Prop({ reflect: true }) maxlength: number;\n\n    /** Displays the provided label in the read state. */\n    @Prop({ reflect: true }) persistentLabel: boolean;\n\n    /** Shortens long values with ellipses instead of splitting into multiple lines. */\n    @Prop({ reflect: true }) truncated: boolean;\n\n    /**\n     * Determines the `type` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/ui/q2-input/) for all `type` values.\n     */\n    @Prop({ reflect: true }) type: Q2Input['type'];\n\n    /** Serves as the visible text while in the read state, and the default value of the input while in the edit state. */\n    @Prop({ reflect: true, mutable: true }) value: string = '';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    scheduledAfterRender: (() => void)[] = [];\n\n    @Element() hostElement: HTMLElement;\n    inputElement: HTMLQ2InputElement;\n    editBtnElement: HTMLQ2BtnElement;\n    cancelBtnElement: HTMLQ2BtnElement;\n    saveBtnElement: HTMLQ2BtnElement;\n\n    @State() formattedValue: string;\n    innerValue: string;\n    defaultValue: string = this.value;\n\n    get locLabel() {\n        return (this.label && loc(this.label)) || '';\n    }\n\n    /////// LIFECYCLE HOOKS ///////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.formattedValue = (this.inputElement as IExtendedQ2InputElement).formattedValue;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n    }\n\n    //////// OBSERVERS ////////\n\n    @Watch('errors')\n    errorsObserver() {\n        const { editing, errors = [] } = this;\n        const focusedElement = this.hostElement.shadowRoot.activeElement;\n        const isInputFocused = focusedElement?.tagName === 'Q2-INPUT' ?? false;\n        const hasErrors = errors.length;\n        if (isInputFocused || !focusedElement || !editing || !hasErrors) return;\n        this.inputElement.focus();\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('editing')\n    observesEditing(newValue: boolean, oldValue: boolean) {\n        if (newValue === oldValue) return;\n        this.scheduledAfterRender.push(this.hostElement.focus);\n    }\n\n    get wrapperClass() {\n        return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;\n    }\n\n    ///////// HOST ELEMENT EVENTS //////\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (!isEventFromElement(event, this.hostElement) || this.hostElement.onchange) return;\n        switch (event.detail.name) {\n            case 'save':\n                this.value = event.detail.value;\n                break;\n\n            case 'cancel':\n                this.inputElement.value = this.value;\n                break;\n        }\n\n        this.editing = event.detail.editing;\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();\n    }\n\n    ///////// EVENTS /////////\n\n    /**\n     * Emitted when the user updates the `q2-input` element in the editing state.\n     */\n    @Event() input: EventEmitter<{ formattedValue: string; value: string }>;\n\n    /**\n     * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n     *\n     * The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n     */\n    @Event() change: EventEmitter<{\n        editing: boolean;\n        name: 'edit' | 'cancel' | 'save';\n        value?: string;\n        formattedValue?: string;\n    }>;\n\n    /// Methods ///\n    /**\n     * Emulates clicking the edit button, which will display the `<q2-input>` field.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickEdit() {\n        if (this.editing) return;\n        this.editBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the cancel button, which will hide the `<q2-input>` field.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickCancel() {\n        if (!this.editing) return;\n        this.cancelBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the save button, saving value in the `<q2-input>` field, and emitting a `change` event.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickSave() {\n        if (!this.editing) return;\n        this.saveBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the edit button, and setting the value of the `<q2-input>` field.\n     *\n     * If the `clickSave` argument is `true` (default), the save button will be clicked after the value is set, and a\\\n     * `change` event will be emitted.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(value: string, options: { clickSave?: boolean } = { clickSave: true }) {\n        await this.clickEdit();\n        await waitForNextPaint();\n\n        await this.inputElement.setValue(value);\n\n        if (options.clickSave) {\n            await this.clickSave();\n            await waitForNextPaint();\n        }\n    }\n\n    //////// ACTIONS /////////\n\n    inputInput = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n        event.stopPropagation();\n        this.input.emit(event.detail);\n        this.formattedValue = event.detail.formattedValue;\n        this.innerValue = event.detail.value;\n    };\n\n    inputChange = (e: CustomEvent) => {\n        e.stopPropagation();\n    };\n\n    inputKeyDown = (e: KeyboardEvent) => {\n        if (e.key === 'Escape' || e.key === 'Esc') {\n            e.preventDefault();\n            this.cancelClick();\n            return;\n        }\n\n        if (e.key === 'Enter') {\n            e.preventDefault();\n            this.saveClick();\n            return;\n        }\n    };\n\n    inputClick = (event: MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    saveClick = (event?: MouseEvent) => {\n        event && event.stopPropagation();\n        const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;\n        this.defaultValue = valueFromInputProp;\n        this.change.emit({\n            editing: false,\n            name: 'save',\n            value: this.innerValue || valueFromInputProp,\n            formattedValue: this.formattedValue || valueFromInputProp,\n        });\n\n        setTimeout(() => {\n            const { errors = [] } = this;\n            if (!errors.length) return;\n            this.hostElement.focus();\n        }, 1);\n    };\n\n    editClick = (event: MouseEvent) => {\n        event?.stopPropagation();\n        this.change.emit({ editing: true, name: 'edit' });\n    };\n\n    cancelClick = (event?: MouseEvent) => {\n        event?.stopPropagation();\n        this.change.emit({ editing: false, name: 'cancel' });\n        this.inputElement.setValue(this.defaultValue);\n    };\n\n    render() {\n        return (\n            <div>\n                {this.generateEditStateDOM()}\n                {this.generateReadStateDOM()}\n            </div>\n        );\n    }\n\n    generateEditStateDOM() {\n        return (\n            <div\n                class={this.wrapperClass}\n                hidden={!this.editing}\n            >\n                <q2-input\n                    ref={el => (this.inputElement = el)}\n                    label={this.locLabel}\n                    hideLabel={this.hideLabel}\n                    value={this.value}\n                    hints={(Array.isArray(this.hints) && this.hints.map(str => loc(str))) || undefined}\n                    errors={(Array.isArray(this.errors) && this.errors.map(str => loc(str))) || undefined}\n                    type={this.type}\n                    disabled={this.disabled}\n                    formatModifier={this.formatModifier}\n                    maxlength={this.maxlength}\n                    test-id=\"editableInput\"\n                    onInput={this.inputInput}\n                    onChange={this.inputChange}\n                    onKeyDown={this.inputKeyDown}\n                    onClick={this.inputClick}\n                />\n                <q2-btn\n                    ref={el => (this.cancelBtnElement = el)}\n                    class=\"cancel-edit\"\n                    label={`${loc('tecton.element.editableField.cancel')} ${this.locLabel}`}\n                    hide-label\n                    test-id=\"cancelButton\"\n                    onClick={this.cancelClick}\n                >\n                    <q2-icon type=\"close\" />\n                </q2-btn>\n                <q2-btn\n                    ref={el => (this.saveBtnElement = el)}\n                    class=\"save-edit\"\n                    label={`${loc('tecton.element.editableField.save')} ${this.locLabel}`}\n                    hide-label\n                    test-id=\"saveButton\"\n                    onClick={this.saveClick}\n                >\n                    <q2-icon type=\"checkmark\" />\n                </q2-btn>\n            </div>\n        );\n    }\n\n    generateReadStateDOM() {\n        if (this.persistentLabel && this.locLabel) {\n            return (\n                <div\n                    class={this.wrapperClass}\n                    hidden={this.editing}\n                >\n                    <dl>\n                        <dt class=\"read-state-label\">{this.locLabel}</dt>\n                        <dd>\n                            <span class=\"text-wrapper\">{this.formattedValue || this.value}</span>\n                            {this.generateEditBtn()}\n                        </dd>\n                    </dl>\n                </div>\n            );\n        }\n        return (\n            <div\n                class={this.wrapperClass}\n                hidden={this.editing}\n            >\n                <div class=\"text-wrapper\">{this.formattedValue || this.value}</div>\n                {this.generateEditBtn()}\n            </div>\n        );\n    }\n\n    generateEditBtn() {\n        return (\n            <q2-btn\n                ref={el => (this.editBtnElement = el)}\n                class=\"begin-edit\"\n                label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n                hide-label\n                disabled={this.disabled}\n                test-id=\"editButton\"\n                onClick={this.editClick}\n            >\n                <q2-icon type=\"edit\" />\n            </q2-btn>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-24d96969.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as i,g as n}from"./p-a5f18e27.js";import{d as a}from"./p-3c42c90f.js";import{l as s,h as r,o,i as d,w as l,a as c}from"./p-84190698.js";function h(e){const t=new Date(e);if(!a.isValid(t))return;return a.formatISO(t,{representation:"date"})}let u;function f(e){const t=new Date(e);if(!a.isValid(t))return;const i=t.toISOString();if(!u){u=new Intl.DateTimeFormat("en-US",{month:"2-digit",day:"2-digit",year:"numeric",timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone})}return u.format(new Date(i))}let v;function p(e){const t=new Date(e);if(!a.isValid(t))return;if(!v){v=new Intl.DateTimeFormat("en-US",{month:"short",day:"numeric",year:"numeric"})}return v.format(t)}let b;function y(e){if(!e)return;const t=new Date(e);if(!a.isValid(t))return;if(!b){b=new Intl.DateTimeFormat("en-US",{month:"long",day:"numeric",year:"numeric",weekday:"long",timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone})}return b.format(t)}function m(e){return e.replace(/[d]/g,"E").replace(/[D]/g,"d").replace(/[Y]/g,"y").replace(/[l]/g,"P").replace(/[W]/g,"I")}function g(e){const t=typeof e==="string";if(!t&&e&&a.isValid(new Date(e||undefined))){e=h(e)}else if(!e||!a.isValid(new Date(e))){return undefined}let i;const n=e.split(/[\/\-]/).map((e=>e.padStart(2,"0")));const s=t&&e.length>=24&&e[10]==="T";const r=n.length===3;const o=n.length<3;if(s){e=e.split("T")[0];i=new Date(e)}else if(r){const t=e.includes("/")&&n[2].length===4;if(t)n.unshift(n.pop());i=new Date(Date.UTC(parseInt(n[0]),parseInt(n[1])-1,parseInt(n[2])))}else if(o){const e=new Date;let t;let a;let s;switch(n.length){case 1:t=e.getFullYear();a=n[0];s="01";break;case 2:t=e.getFullYear();a=n[0];s=n[1];break}i=new Date(`${t}-${a}-${s}`)}if(!a.isValid(i))return undefined;i=w(i);return a.isValid(i)?i:undefined}function w(e){const t=e.getTimezoneOffset();return a.setMinutes(e,t+Math.abs(t%60))}function D(e){if(!Array.isArray(e)||e.length===0){return[]}return e.map((e=>g(e)))}function x(e=new Date){return{monthIndex:e.getMonth(),selectedYear:e.getFullYear()}}function k(e="",t=[],i=[],n=[],r,o,d="mm/dd/yyyy",l){let c=true;let u=false;let f="info";let v=`${s("tecton.element.calendar.hint.format")}: ${d}`;if(!e){return{isValid:c,inputDate:new Date(""),isAvailable:u,messageType:f,message:v}}const b=$(e,l);const y=b.getMonth()+1;const m=b.getDate();const g=b.getFullYear();const w=[y,m,g];if(a.isValid(b)){const a=C()[b.getMonth()];if(e.length===10){c=true;f=null;v=null}u=t.includes(b.getDay());const l=h(b);if(u){const e=i.length&&!i.includes(l);const t=n.length&&n.includes(l);const a=r&&r>l;const s=o&&o<l;if(e||t||a||s){u=false}}if(e.length>=5&&!u){c=false;f="error";const e=!a||!m||!g;v=e?`${s("tecton.element.calendar.hint.invalidDate")}: ${d}`:s("tecton.element.calendar.hint.notAvailableDate",[p(b)])}}else{c=false;f="error";v=`${s("tecton.element.calendar.hint.invalidDate")}: ${d}`}return{isValid:c,messageType:f,message:v,inputDate:b,isAvailable:u,calendarPosition:w}}function $(e,t){const i=new Date;let[n,a,s]=e.split("/");if(n==="0")n="01";if(a==="0")a="01";if(e.length===10){return new Date(e)}else if(n&&a&&Number(a)>0){const e=Number(a)<10?`0${Number(a)}`:a;const i=!s||s.length<4?I(n,a,t):s;return new Date(`${n}/${e}/${i}`)}else if(n){return new Date(`${n}/01/${i.getFullYear()}`)}}function I(e,t,i){const n=`${e}/${t}`;const a=new Date;const s=a.getMonth()<9?`0${a.getMonth()+1}`:`${a.getMonth()+1}`;const r=a.getDate()<10?`0${a.getDate()}`:`${a.getDate()}`;const o=`${s}/${r}/${a.getFullYear()}`;let d=a.getFullYear();if(i==="future"&&o.slice(0,5)>n){d=a.getFullYear()+1}else if(i==="past"&&o.slice(0,5)<n){d=a.getFullYear()-1}return d.toString()}function T(e){if(!e){return""}if(e.match(/^[1-9]\/$/)){return`0${e}/`}else if(e.match(/^[0-9]{2}\/[1-9]{1}\/$/)){const t=e.split("/");return`${t[0]}/0${t[1]}/`}return e}function E(e){const t=(e||"").split("-");if(t.length!==3)return"";return`${t[1]}/${t[2]}/${t[0]}`}function O(e,t){return new Date(t,e,1,1,1,1,1).getDay()}function V(){return[s("tecton.element.calendar.days.short.Sunday"),s("tecton.element.calendar.days.short.Monday"),s("tecton.element.calendar.days.short.Tuesday"),s("tecton.element.calendar.days.short.Wednesday"),s("tecton.element.calendar.days.short.Thursday"),s("tecton.element.calendar.days.short.Friday"),s("tecton.element.calendar.days.short.Saturday")]}function A(){return[s("tecton.element.calendar.days.Sunday"),s("tecton.element.calendar.days.Monday"),s("tecton.element.calendar.days.Tuesday"),s("tecton.element.calendar.days.Wednesday"),s("tecton.element.calendar.days.Thursday"),s("tecton.element.calendar.days.Friday"),s("tecton.element.calendar.days.Saturday")]}function C(){return[s("tecton.element.calendar.months.January"),s("tecton.element.calendar.months.February"),s("tecton.element.calendar.months.March"),s("tecton.element.calendar.months.April"),s("tecton.element.calendar.months.May"),s("tecton.element.calendar.months.June"),s("tecton.element.calendar.months.July"),s("tecton.element.calendar.months.August"),s("tecton.element.calendar.months.September"),s("tecton.element.calendar.months.October"),s("tecton.element.calendar.months.November"),s("tecton.element.calendar.months.December")]}function z(e,t){const i=a.getDaysInMonth(new Date(t,e));return[...Array(i).keys()].reduce(((i,n)=>{i.push(new Date(t,e,n+1));return i}),[])}function q(e=127){const t=e&1;const i=e&2;const n=e&4;const a=e&8;const s=e&16;const r=e&32;const o=e&64;const d=[];if(e<=0)return d;if(t)d.push(0);if(i)d.push(1);if(n)d.push(2);if(a)d.push(3);if(s)d.push(4);if(r)d.push(5);if(o)d.push(6);return d}function S(e,t){return e.includes(t.getDay())}function Y(e,t){return!F(e,t)}function F(e,t){return e.some((e=>a.isSameDay(e,t)))}function M(e,t,i,n,a,s,r){const o=[H.bind(null,s,new Date)];if(t===null||t===void 0?void 0:t.length){o.push(F.bind(null,t))}else{o.push(S.bind(null,e))}o.push(Y.bind(null,i));return L(n,a,s,o,r)}function L({monthIndex:e,selectedYear:t},i,n,s,r){const o=!a.isValid(new Date(r));const d=z(e,t).map(((e,t)=>{const a=s.some((t=>!t(e)));const r=P(e,n,i);const d=j(Object.assign(Object.assign({},r),{isInvalid:a,isIncompleteDate:o}));return Object.assign(Object.assign({},r),{isValid:!a,date:e,integer:t+1,isEmpty:false,isActivity:false,classList:d})}));const l=B(O(e,t));const c=U((l.length+d.length)%7);return[...l,...d,...c]}function H(e,t,i){const n=a.isAfter(e===null||e===void 0?void 0:e.startDate,i);const s=a.isBefore(e===null||e===void 0?void 0:e.endDate,i);const r=a.isSameDay(t,i)&&a.isAfter(t,e===null||e===void 0?void 0:e.cutOffTime);return!(n||r||s)}function P(e,t,i){if(!i)i=new Date;const n=i&&a.isSameDay(i,e);const s=a.isSameDay(e,new Date);const r=a.isSameDay(e,t===null||t===void 0?void 0:t.startDate);const o=a.isSameDay(e,t===null||t===void 0?void 0:t.endDate);return{isSelected:n,isToday:s,isStartDate:r,isEndDate:o}}function j({isInvalid:e,isSelected:t,isEndDate:i,isStartDate:n,isToday:a,isIncompleteDate:s}){const r=[];if(!e)r.push("is-valid");if(t)r.push("is-selected");if(i)r.push("is-end-date");if(n)r.push("is-start-date");if(a)r.push("is-today");if(t&&e&&!s)r.push("is-unavailable");return r.join(" ")}function B(e){return K(0,e)}function U(e){if(e===0)return[];return K(e,7)}const W={date:null,integer:null,isActivity:false,isEmpty:true,isValid:false,isToday:false,isSelected:false,isStartDate:false,isEndDate:false,classList:""};function K(e,t){if(e===7)e=0;return[...Array(t-e).keys()].map((()=>Object.assign({},W)))}const N="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host[hidden]{display:none}click-elsewhere{position:relative;display:block}q2-input{margin:0;cursor:pointer}q2-popover{--comp-min-tappable-size:44px;--comp-table-border-spacing:2px;--comp-min-tappable-size-and-spacing:calc(var(--comp-min-tappable-size) + var(--comp-table-border-spacing));--comp-popover-padding:var(--tct-calendar-popover-padding, var(--t-calendar-popover-padding, var(--app-scale-1x, 5px)));--comp-min-table-width:calc(var(--comp-min-tappable-size-and-spacing) * 7);--comp-table-container-border-spacing:calc(var(--comp-table-border-spacing) * 2);--comp-popover-total-padding:calc(var(--comp-popover-padding) * 2);--tct-popover-min-width:calc(\n      var(--comp-min-table-width) + var(--comp-table-container-border-spacing) + var(--comp-popover-total-padding)\n  )}.calendar-field-popup{padding:var(--comp-popover-padding)}.calendar-label{--comp-label-padding:var(--tct-calendar-label-padding, var(--tct-calendar-label-vertical-padding, var(--t-calendar-label-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0);font-size:var(--tct-calendar-label-font-size, var(--t-calendar-label-font-size, 16px));flex:1 1;flex-basis:calc(100% - var(--tct-btn-icon-width, 44px));margin:0;padding:var(--comp-label-padding)}.cal-month-heading{padding:0 0 0.75rem;display:flex;justify-content:center;align-items:center;font-size:var(--tct-calendar-month-font-size, var(--t-calendar-month-font-size, 16px));font-weight:var(--tct-calendar-month-font-weight, var(--t-calendar-month-font-weight, 600));text-align:center}.cal-month-text{min-width:82px;display:inline-block}.cal-year-text{min-width:50px;display:inline-block}table{width:100%;margin-bottom:2px;text-align:center;border-spacing:var(--comp-table-border-spacing)}th{font-size:var(--tct-calendar-day-heading-font-size, var(--t-calendar-day-heading-font-size, inherit));font-weight:var(--tct-calendar-day-heading-font-weight, var(--t-calendar-day-heading-font-weight, 600));width:14.285714%}td{height:var(--comp-min-tappable-size);cursor:pointer;border:var(--tct-calendar-day-border, var(--t-calendar-day-border, 0));border-radius:var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))}td.is-unavailable{border:1px solid var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a))}td.is-valid:hover{border:var(--tct-calendar-day-hover-border, var(--t-calendar-day-hover-border, var(--tct-calendar-day-border, var(--t-calendar-day-border, 0))));border-radius:var(--tct-calendar-day-hover-border-radius, var(--t-calendar-day-hover-border-radius, var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))));background:var(--tct-calendar-day-hover-background, var(--tct-calendar-day-hover-bg, var(--t-calendar-day-hover-bg, var(--tct-gray-14, var(--app-gray14, var(--tct-gray-l4, var(--app-gray-l4, #f2f2f2)))))));color:var(--tct-calendar-day-hover-font-color, var(--t-calendar-day-hover-font-color, inherit))}td[aria-hidden],td[aria-disabled]{pointer-events:none;cursor:not-allowed}td[aria-disabled]{opacity:var(--tct-calendar-day-disabled-opacity, var(--t-calendar-day-disabled-opacity, var(--app-disabled-opacity, 0.4)))}td[aria-selected]{border:var(--tct-calendar-day-selected-border, var(--t-calendar-day-selected-border, var(--tct-calendar-day-border, var(--t-calendar-day-border, 0))));border-radius:var(--tct-calendar-day-selected-border-radius, var(--t-calendar-day-selected-border-radius, var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))));background:var(--tct-calendar-day-selected-background, var(--tct-calendar-day-selected-bg, var(--t-calendar-day-selected-bg, var(--tct-calendar-day-hover-background, var(--tct-calendar-day-hover-bg, var(--t-calendar-day-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l4, var(--app-gray-l4, #f2f2f2))))))))));color:var(--tct-calendar-day-selected-font-color, var(--t-calendar-day-selected-font-color, var(--tct-calendar-day-hover-font-color, var(--t-calendar-day-hover-font-color, inherit))));box-shadow:0 0 0 2px var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}td[aria-selected]:focus{box-shadow:0 0 0 2px var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1)))), 0 0 0 4px var(--const-focus-color, #0066cc)}.today-decorator{text-transform:uppercase;font-weight:700;font-size:10px;height:12px}.calendar-disclaimer{font-size:var(--tct-calendar-disclaimer-font-size, var(--t-calendar-disclaimer-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));border-style:solid;border-width:var(--tct-calendar-disclaimer-border-width, var(--t-calendar-disclaimer-border-width, 1px 0 0 0));border-color:var(--tct-calendar-disclaimer-border-color, var(--t-calendar-disclaimer-border-color, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #e6e6e6))))));padding:var(--tct-calendar-disclaimer-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)));text-align:left}";const _=N;const J=class{constructor(i){e(this,i);this.change=t(this,"change",7);this.error=t(this,"error",7);this.success=t(this,"success",7);this.formatModifier="M/D/YYYY";this.defaultFormatString="mm/dd/yyyy";this.scheduledAfterRender=[];this.internalError="";this.dayAbbrStrings=V();this.dayStrings=A();this.monthStrings=C();this.closeCalendar=()=>{if(!this.open)return;this.open=false;this.focusInput()};this.openCalendar=()=>{if(this.readonly||this.open)return;this.selectedMonthYear=x(this.dateValue);this.dateList=this.buildDateList(this.selectedMonthYear);this.open=true};this.toggleCalendar=()=>{if(this.readonly)return;if(this.open){this.closeCalendar()}else{this.openCalendar()}};this.onClickElsewhere=e=>{const t=e.target;if(t.localName==="click-elsewhere"){e.stopPropagation();this.closeCalendar()}};this.onPopupKeyup=e=>{if(e.key==="Escape"||e.key==="Esc"){this.onInputBlur();this.closeCalendar()}};this.onInputInput=({detail:{value:e}})=>{this.typedValue=e};this.onInputKeydown=e=>{const{dateValue:t}=this;switch(e.key){case"ArrowDown":e.preventDefault();this.openCalendar();this.activateDay(t||new Date);break;case"Enter":case" ":if(this.typeable)break;e.preventDefault();if(this.open){this.closeCalendar()}else{this.openCalendar();this.activateDay(t||new Date)}break}};this.onInputKeyup=e=>{if(this.disabled){return}switch(e.key){case"Escape":this.onInputBlur();this.closeCalendar();break}if(!this.isTypeable)return;this.typedValue=T(this.typedValue);const{typedValue:t}=this;const i=q(this.daysOfWeekChecksum);const{isValid:n,message:s,messageType:r,inputDate:o,isAvailable:d,calendarPosition:l}=k(t,i,this.validDates,this.invalidDates,this.startDate,this.endDate,this.defaultFormatString,this.assume);if(l){const[e,t,i]=l;const n=new Date(i,e-1,t);if(a.isValid(n)){this.selectedMonthYear=x(n);this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}}if(e.key==="Enter"){if(n||t&&t.length>4&&o&&a.isValid(o)&&d){this.setCompleteInput(o)}else if(this.value){this.value=null;this.change.emit({value:null});this.typedValue=t}if(this.keyboardSelection){this.keyboardSelection=false;this.closeCalendar()}else{this.toggleCalendar()}}else{this.setHints({isValid:n,message:s,messageType:r})}};this.onInputChange=e=>{e.stopPropagation()};this.onInputBlur=()=>{if(!this.isTypeable)return;const e=q(this.daysOfWeekChecksum);const{typedValue:t}=this;const{isValid:i,inputDate:n,isAvailable:s}=k(this.typedValue,e,this.validDates,this.invalidDates,this.startDate,this.endDate,this.defaultFormatString,this.assume);if(!t&&(n===null||n===void 0?void 0:n.toString())==="Invalid Date"){this.setHints({isValid:true,message:this.defaultHintMessage,messageType:"info"})}else if(i||t&&t.length>4&&n&&a.isValid(n)&&s){this.setCompleteInput(n)}else if(this.value){this.valueOnBlur=this.value;this.value=null;this.change.emit({value:null});this.typedValue=t}};this.onInputFocus=e=>{if(!this.isTypeable)return;if(e.target===this.controlElement){if(this.valueOnBlur&&!this.value){const e=this.typedValue;this.value=this.valueOnBlur;this.typedValue=e;this.valueOnBlur=null}this.closeCalendar()}};this.onInputClick=()=>{if(this.disabled)return;this.toggleCalendar()};this.onRefocus=()=>{var e;(e=this.btnPrevMonth)===null||e===void 0?void 0:e.dispatchEvent(new FocusEvent("focus"))};this.goToMonthYear=(e,t)=>{if(e<0){e=11;t--}else if(e>11){e=0;t++}this.selectedMonthYear={monthIndex:e,selectedYear:t};this.dateList=this.buildDateList(this.selectedMonthYear);this.scheduledAfterRender.push((()=>this.checkActiveCellForBlankness()))};this.selectDate=e=>{const{isValid:t}=this.dateList.find((({date:t})=>a.isSameDay(t,e)));if(!t)return;this.change.emit({value:h(e)});this.typedValue=f(e);this.invalid=false;this.success.emit({value:h(e)})};this.onDateSelection=e=>{const t=e.target.closest("td:not([aria-hidden])");if(!t)return;const i=w(new Date(t.dataset.date));this.selectDate(i);this.closeCalendar()};this.onHeaderControlKeydown=e=>{var t;const i=this.generateDateFromDay(1);const n=(t=this.calendarBody)===null||t===void 0?void 0:t.querySelector('[aria-selected="true"]');if(e.key==="Tab"&&!n){e.preventDefault();this.activateDay(i)}};this.onDateKeydown=e=>{const{monthIndex:t,selectedYear:i}=this.selectedMonthYear;const n=parseInt(e.target.dataset.day);const s=this.generateDateFromDay(n);switch(e.key){case"ArrowUp":e.preventDefault();this.activateDay(a.addDays(s,-7));break;case"ArrowDown":e.preventDefault();this.activateDay(a.addDays(s,7));break;case"ArrowRight":e.preventDefault();this.activateDay(a.addDays(s,1));break;case"ArrowLeft":e.preventDefault();this.activateDay(a.addDays(s,-1));break;case"PageUp":e.preventDefault();if(e.shiftKey)this.goToMonthYear(t,i-1);else this.goToMonthYear(t-1,i);break;case"PageDown":e.preventDefault();if(e.shiftKey)this.goToMonthYear(t,i+1);else this.goToMonthYear(t+1,i);break;case"Home":e.preventDefault();this.activateDay(a.addDays(s,-s.getDay()));break;case"End":e.preventDefault();this.activateDay(a.addDays(s,6-s.getDay()));break;case"Escape":e.preventDefault();this.closeCalendar();this.focusInput();break;case"Enter":e.preventDefault();if(!this.dateList.find((({date:e})=>a.isSameDay(e,s))).isValid)return;this.selectDate(s);this.closeCalendar();this.focusInput();break;case" ":e.preventDefault();if(!this.dateList.find((({date:e})=>a.isSameDay(e,s))).isValid)return;this.selectDate(s);this.closeCalendar();this.focusInput();break}};this.assume="current";this.calendarLabel=undefined;this.clearable=undefined;this.cutoffTime=undefined;this.daysOfWeekChecksum=undefined;this.disabled=undefined;this.disabledMsg=undefined;this.disclaimer=undefined;this.displayFormat=undefined;this.endDate=undefined;this.errors=undefined;this.hideLabel=undefined;this.hints=undefined;this.invalid=undefined;this.invalidDates=undefined;this.label=undefined;this.open=undefined;this.optional=undefined;this.placeholder=undefined;this.popoverAlignment=undefined;this.popoverDirection=undefined;this.popoverMode=null;this.popoverMinHeight=355;this.readonly=undefined;this.startDate=undefined;this.typeable=undefined;this.validDates=undefined;this.value=undefined;this.popDirection=undefined;this.onsuccess=undefined;this.buttonLabel=undefined;this.ariaLabel=undefined;this.keyboardSelection=false;this.typedValue="";this.dateList=undefined;this.hintMessage=this.defaultHintMessage;this.hintMessageType="info"}connectedCallback(){this.selectedMonthYear=x(this.dateValue);this.dateList=this.buildDateList(this.selectedMonthYear);if(this.value&&this.isTypeable&&!this.typedValue){this.typedValue=E(this.value)}this.validateDate()}componentWillLoad(){this.popDirectionHandler();r(this)}componentDidRender(){setTimeout((()=>{this.scheduledAfterRender.forEach((e=>e()));this.scheduledAfterRender=[]}),25)}componentDidLoad(){o(this.hostElement)}get selectedDate(){var e;const t=(e=this.calendarBody)===null||e===void 0?void 0:e.querySelector('[aria-selected="true"]');return t?w(new Date(t.dataset.date)):null}get innerInputField(){var e,t;return(t=(e=this.controlElement)===null||e===void 0?void 0:e.shadowRoot)===null||t===void 0?void 0:t.querySelector(".input-field")}get innerInputContainer(){var e,t;return(t=(e=this.controlElement)===null||e===void 0?void 0:e.shadowRoot)===null||t===void 0?void 0:t.querySelector(".input-container")}get defaultHintMessage(){return this.typeable?s("tecton.element.calendar.hint.format")+": "+this.defaultFormatString:s("tecton.element.calendar.hint.select")}get canClear(){if(this.isTypeable){return this.clearable&&!!this.typedValue}else{return this.clearable&&!!this.value}}get currentWeeks(){const e=this.dateList.reduce(((e,t,i)=>{const n=Math.floor(i/7);if(!e[n]){e[n]=[]}e[n].push(t);return e}),[]);return e}get formattedValue(){const{typedValue:e,dateValue:t,displayFormat:i,isTypeable:n}=this;if(n)return e;if(t===undefined)return"";if(i)return a.format(t,m(i));return new Intl.DateTimeFormat("en-US",{year:"numeric",month:"2-digit",day:"2-digit",timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}).format(t)}get computedPlaceholder(){if(this.disabled&&this.disabledMsg){return s(this.disabledMsg)}if(this.buttonLabel&&(this.disabled||this.placeholder)){return s(this.buttonLabel)}return this.placeholder&&s(this.placeholder)||""}get dateValue(){if(this.isTypeable){return g(this.typedValue)}else{let{value:e}=this;const t=e&&typeof e!=="string"&&"toDate"in e;if(t)return e.toDate();const i=typeof e==="string"&&e.split(" ").length===6&&/GMT-\d{4}/g.test(e);if(i){e=h(e)}return g(e)}}get dateValidators(){const e=new Date(this.cutoffTime||"");return{startDate:g(this.startDate),endDate:g(this.endDate),cutOffTime:a.isValid(e)?e:undefined}}get isTypeable(){return this.typeable}get errorList(){const{errors:e,internalError:t,invalid:i}=this;let n=[];if(t){n=[t]}if(Array.isArray(e)&&e.length){n=e.filter((e=>!!e)).map((e=>s(e))).concat(n)}else if(!t&&i){return["tecton.element.calendar.invalid"]}return n}get hintList(){const{hints:e,hintMessageType:t,hintMessage:i}=this;if(Array.isArray(e)&&e.length)return e.filter((e=>!!e)).map((e=>s(e)));if(t==="info"&&i)return[i];return[]}defaultChangeHandler(e){if(e.target===this.hostElement&&!this.hostElement.onchange&&!!e.detail){this.value=e.detail.value}}defaultErrorHandler(e){if(e.target===this.hostElement&&!this.hostElement.onerror){if(this.hintMessageType==="error"&&this.hintMessage){this.internalError=this.hintMessage}else{this.internalError=s("tecton.element.calendar.hint.invalidDate")}}}defaultSuccessHandler(e){if(e.target!==this.hostElement){return}if(typeof this.onsuccess==="function"){this.onsuccess(e)}else{this.internalError="";if(this.hintMessageType==="error"&&this.hintMessage){this.hintMessage=null;this.hintMessageType=null;this.invalid=false}}}delegateFocus(e){if(!d(e,this.hostElement))return;this.controlElement.shadowRoot.querySelector(".input-field").focus()}handleClear(){this.change.emit({value:null});this.value=null;this.typedValue=""}popoverStateHandler({detail:{open:e}}){if(this.open!==e)this.open=e}_togglePopover(){const e=this.typeable?this.btnCalendarToggle:this.innerInputField;e===null||e===void 0?void 0:e.click();e===null||e===void 0?void 0:e.focus();e.dispatchEvent(new FocusEvent("focus"))}async openPopover(){if(this.open)return;this._togglePopover()}async closePopover(){if(!this.open)return;this._togglePopover()}async setValue(e){var t;const i=typeof e==="string"?g(e):e;if(!a.isValid(i))return;await this.openPopover();await l();this.goToMonthYear(i.getMonth(),i.getFullYear());await l();const n=(t=this.calendarTable)===null||t===void 0?void 0:t.querySelector(`td[data-date="${h(i)}"]`);n===null||n===void 0?void 0:n.click()}async typeValue(e){if(!this.typeable)return;const t=typeof e==="string"?g(e):e;const i=f(t);if(!a.isValid(t))return;const{innerInputField:n,controlElement:s}=this;n.focus();n.dispatchEvent(new FocusEvent("focus"));n.value=i;n.dispatchEvent(new InputEvent("input"));s.dispatchEvent(new KeyboardEvent("keyup"))}popDirectionHandler(){c(this,"popDirection","popoverDirection")}ariaLabelObserver(){r(this)}typeableChanged(){this.valueObserver(this.value)}valueObserver(e){if(e===""){this.value=undefined;this.setHints({isValid:true,message:this.defaultHintMessage,messageType:"info"});return}const t=e&&typeof e!=="string"&&"toDate"in e;const i=t?e.toDate():g(e);const n=f(i);if(this.isTypeable){this.typedValue=n}else{this.controlElement.value=n;this.selectedMonthYear=x(i);this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}if(this.invalid)return;if(n){this.setHints({isValid:true,message:null,messageType:null})}else{this.setHints({isValid:true,message:this.defaultHintMessage,messageType:"info"})}}daysOfWeekChecksumObserver(){this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}validDatesObserver(){this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}invalidDatesObserver(){this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}startDateObserver(){this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}endDateObserver(){this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}cutoffTimeObserver(){this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}buildDateList(e){const t=D(this.invalidDates);const i=q(this.daysOfWeekChecksum);const n=D(this.validDates);return M(i,n,t,e,this.dateValue,this.dateValidators,this.typedValue)}validateDate(){var e,t,i;try{if(!!this.value){const{dateValue:n}=this;const a=(e=n===null||n===void 0?void 0:n.getMonth())!==null&&e!==void 0?e:undefined;const s=(t=n===null||n===void 0?void 0:n.getFullYear())!==null&&t!==void 0?t:undefined;const{monthIndex:r,selectedYear:o}=this.selectedMonthYear;const d=a===r&&s===o;let l=[];if(!n){l=[]}else if(d){l=this.dateList}else{l=this.buildDateList({monthIndex:a,selectedYear:s})}const c=(i=n===null||n===void 0?void 0:n.getDate())!==null&&i!==void 0?i:undefined;const u=c?!l.find((({integer:e})=>e===c)).isValid:true;if(u){this.error.emit({errors:[{message:`Value passed is invalid: The date ${this.value} is not valid`,errorCode:"generalInvalid"}]})}else{this.success.emit({value:h(n)})}}}catch(e){console.warn("Invalid moment value ",this.dateValue)}}focusInput(){var e;(e=this.controlElement)===null||e===void 0?void 0:e.focus()}checkActiveCellForBlankness(){const e=this.hostElement.shadowRoot.activeElement;if(!e||e.tagName!=="TD"||!e.hasAttribute("aria-hidden"))return;const{calendarBody:t}=this;const i=Array.from(t.querySelectorAll("td"));const n=Array.from(i).indexOf(e);const a=n<15?1:i.filter((e=>!e.hasAttribute("aria-hidden"))).length;this.focusDay(this.generateDateFromDay(a))}generateDateFromDay(e){const{monthIndex:t,selectedYear:i}=this.selectedMonthYear;return new Date(i,t,e)}activateDay(e){this.goToMonthYear(e.getMonth(),e.getFullYear());this.scheduledAfterRender.push((()=>this.focusDay(e)))}async focusDay(e){var t;if(!e)return;await l();(t=this.calendarBody.querySelector(`td[data-day="${e.getDate()}"]`))===null||t===void 0?void 0:t.focus()}render(){return i("click-elsewhere",{key:"cbd000d038a867afb1f969592c616d917a54854a",class:this.open?"dropdown-open":undefined,onChange:this.onClickElsewhere},this.inputField(),i("q2-popover",{key:"ad590a2a5e41167ad631d805be1748402fd64c74",ref:e=>this.popoverElement=e,controlElement:this.innerInputContainer,open:this.open,direction:this.popoverDirection,minHeight:this.popoverMinHeight,align:this.popoverAlignment,mode:this.popoverMode||undefined,block:true},this.hintField(),this.calendarPopover()))}hintField(){if(!this.hintMessage)return;return i("q2-message",{class:"calendar-hint sr",ref:e=>this.hintMessageElement=e,type:this.hintMessageType},this.hintMessage)}setHints({isValid:e,message:t,messageType:i}){var n;if(t===this.hintMessage)return(n=this.hintMessageElement)===null||n===void 0?void 0:n.present();this.invalid=!e;this.hintMessage=t;this.hintMessageType=i;if(i==="error"&&t){this.internalError=t;this.error.emit({errors:[{message:t,errorCode:"generalInvalid"}]})}}setCompleteInput(e){const t=f(e);this.change.emit({value:h(e)});this.typedValue=t;this.internalError=null;this.setHints({isValid:true,message:null,messageType:null})}inputField(){const{isTypeable:e}=this;return i("q2-input",{ref:e=>this.controlElement=e,class:"calendar-input-field",value:this.formattedValue,label:s(this.label),hideLabel:this.hideLabel,disabled:!!this.disabled,readonly:!!this.readonly,clearable:this.canClear,placeholder:this.computedPlaceholder,optional:!!this.optional,ariaExpanded:`${!!this.open}`,hints:this.hintList,errors:this.errorList,onClick:e?undefined:this.onInputClick,onChange:this.onInputChange,onInput:this.onInputInput,onKeyDown:this.onInputKeydown,onKeyUp:this.onInputKeyup,onBlur:this.onInputBlur,onFocus:this.onInputFocus,"icon-right":e?undefined:"calendar","format-modifier":e?this.formatModifier:this.displayFormat||this.formatModifier,type:"date","hide-messages":!e,"test-id":"inputAndCalendarToggle",_role:"combobox",_preventEntry:!e},e&&i("q2-btn",{ref:e=>this.btnCalendarToggle=e,slot:"input-right",onClick:this.onInputClick,"test-id":"calendarToggle",label:"tecton.element.calendar.toggleAriaLabel","hide-label":true},i("q2-icon",{type:"calendar"})))}calendarPopover(){const{monthIndex:e,selectedYear:t}=this.selectedMonthYear;return i("div",{class:"calendar-field-popup",onKeyUp:this.onPopupKeyup},this.calendarLabel&&i("p",{class:"calendar-label"},s(this.calendarLabel)),i("div",{class:"cal-month-heading"},i("q2-btn",{label:s("tecton.element.calendar.previousMonth"),"hide-label":true,ref:e=>this.btnPrevMonth=e,class:"cal-nav-btn prev-month","test-id":"previousMonthButton",onClick:()=>this.goToMonthYear(e-1,t)},i("q2-icon",{type:"chevron-left"})),i("span",{class:"cal-month-text"},this.monthStrings[e]),i("q2-btn",{label:s("tecton.element.calendar.nextMonth"),"hide-label":true,class:"cal-nav-btn next-month",ref:e=>this.btnNextMonth=e,"test-id":"nextMonthButton",onClick:()=>this.goToMonthYear(e+1,t)},i("q2-icon",{type:"chevron-right"})),i("q2-btn",{label:s("tecton.element.calendar.previousYear"),"hide-label":true,class:"cal-nav-btn prev-year",ref:e=>this.btnPrevYear=e,"test-id":"previousYearButton",onClick:()=>this.goToMonthYear(e,t-1)},i("q2-icon",{type:"chevron-left"})),i("span",{class:"cal-year-text"},this.selectedMonthYear.selectedYear),i("q2-btn",{label:s("tecton.element.calendar.nextYear"),"hide-label":true,class:"cal-nav-btn next-year",ref:e=>this.btnNextYear=e,"test-id":"nextYearButton",onClick:()=>this.goToMonthYear(e,t+1),onKeyDown:this.onHeaderControlKeydown},i("q2-icon",{type:"chevron-right"}))),i("div",{class:"sr","aria-live":"polite",id:"table-label"},`${this.monthStrings[e]} ${t}`),this.calendarDays(),this.disclaimer&&i("div",{class:"calendar-disclaimer"},s(this.disclaimer)),i("q2-btn",{class:"sr refocus-popup",onFocus:this.onRefocus}))}calendarDays(){return i("table",{role:"grid","aria-labelledby":"table-label",ref:e=>this.calendarTable=e},i("thead",null,i("tr",null,[...Array(7).keys()].map((e=>i("th",{scope:"col","aria-label":this.dayStrings[e]},this.dayAbbrStrings[e]))))),i("tbody",{onClick:this.onDateSelection,onKeyDown:this.onDateKeydown,ref:e=>this.calendarBody=e,"test-id":"calendarTableBody"},this.currentWeeks.map((e=>i("tr",null,e.map((e=>{var t;let n="";if(e.isToday)n=`${s("tecton.element.calendar.today")}, `;n+=y(e.date);if(e.isSelected)n+=` (${s("tecton.element.calendar.selected")})`;return i("td",{class:e.classList,"aria-hidden":e.isEmpty?"true":undefined,tabindex:e.isSelected?0:-1,role:e.isSelected?"gridcell":undefined,"aria-selected":e.isSelected?"true":undefined,"aria-disabled":e.isValid?undefined:"true","data-day":e.integer||undefined,"data-date":e.date?h(e.date):undefined},(e===null||e===void 0?void 0:e.isToday)&&i("div",{class:"today-decorator","aria-hidden":"true"},s("tecton.element.calendar.today")),i("div",{"aria-label":n},(t=e===null||e===void 0?void 0:e.integer)!==null&&t!==void 0?t:""))})))))))}get hostElement(){return n(this)}static get watchers(){return{popDirection:["popDirectionHandler"],ariaLabel:["ariaLabelObserver"],typeable:["typeableChanged"],value:["valueObserver"],daysOfWeekChecksum:["daysOfWeekChecksumObserver"],validDates:["validDatesObserver"],invalidDates:["invalidDatesObserver"],startDate:["startDateObserver"],endDate:["endDateObserver"],cutoffTime:["cutoffTimeObserver"]}}};J.style=_;export{J as q2_calendar};
-//# sourceMappingURL=p-24d96969.entry.js.map