q2-tecton-elements 1.55.2 → 1.55.4

package/dist/q2-tecton-elements/q2-stepper.entry.js

@@ -222,8 +222,8 @@ const p = class {
     const b = this.getPaneSlotOrProperty(c, "label");
     const h = this.getPaneSlotOrProperty(c, "description");
     const v = t + 1;
-    const f = v === a;
-    const u = !!b && `label-${p}`;
+    const u = v === a;
+    const f = !!b && `label-${p}`;
     const g = !!b && !!h && `description-${p}`;
     const m = !b && l("tecton.element.stepper.number", [ `${v}`, `${s}` ]);
     let w;
@@ -237,13 +237,13 @@ const p = class {
     }, r("button", {
       class: x.join(" "),
       type: "button",
-      "aria-labelledby": u,
+      "aria-labelledby": f,
       "aria-describedBy": g,
       "aria-label": m,
-      "aria-selected": f,
+      "aria-selected": u,
       "aria-disabled": y ? "true" : null,
       role: "tab",
-      tabIndex: f ? 0 : -1,
+      tabIndex: u ? 0 : -1,
       onKeyDown: t => this.onStepKeyDown(t, v),
       onClick: t => !k && this.onStepClick(t, v)
     }, r(i, null, w ? r("div", {
@@ -252,11 +252,11 @@ const p = class {
       type: w
     })) : r("div", {
       class: "step-bubble"
-    }, v), u && r("div", {
+    }, v), f && r("div", {
       class: "step-label",
-      id: u,
+      id: f,
       innerHTML: b
-    }), u && g && r("div", {
+    }), f && g && r("div", {
       class: "step-description",
       id: g,
       innerHTML: h
@@ -269,50 +269,50 @@ const p = class {
     const a = [ "step-container" ];
     if (e) a.push("has-scroll");
     return r(i, {
-      key: "21459e973c382d566ad74cfa1079bcede3bc4bb4"
+      key: "6e2394578ce0afca6f8664baf75d7a62e292baea"
     }, r("div", {
-      key: "fb74e21ddf7346d79668b47f926ed3cf3473d6ce",
+      key: "77c6b861e4ba9869422e8d0c941cd6b04af3a03b",
       class: a.join(" ")
     }, e && r(i, {
-      key: "6b4ba9451964d04c22e162d3b06b4dd493e6acdc"
+      key: "166afc15044285df0056d39e27f5bc475a8abf7e"
     }, r("div", {
-      key: "317d4dd68f295878cf2b27508f882dbbf41c660d",
+      key: "d79d172b808dac80bf32fd4419bde85b42083cc2",
       class: "gradient-left",
       hidden: !o
     }), r("div", {
-      key: "ddb5edf2ba557d5a7d2b19d48f5c11fba7c9fecc",
+      key: "095ea5e0944710606263c6216d1bb88f4535e1ed",
       class: "gradient-right",
       hidden: !s
     }), r("q2-btn", {
-      key: "2c2d7a851f2e089b64d1884cc5109b6bed07138b",
+      key: "efefd1eced2e7e8f4d1f4e8744183307a066a4f5",
       class: "btn-left",
       hideLabel: true,
       hidden: !this.showScrollLeft,
       label: l("tecton.element.stepper.scrollLeft"),
       onClick: () => this.onScrollBtnClick("left")
     }, r("q2-icon", {
-      key: "8752b1fa6b71189a513088998bad57e9cd372c02",
+      key: "a72bd965e27344f5ad8ba460f49922f98808d560",
       type: "chevron-left"
     })), r("q2-btn", {
-      key: "6299ffdbaee72154f91f75bad7fdecac49f1f491",
+      key: "27feb6ba412296483dd990658f4ccd0704456821",
       class: "btn-right",
       hideLabel: true,
       hidden: !this.showScrollRight,
       label: l("tecton.element.stepper.scrollRight"),
       onClick: () => this.onScrollBtnClick("right")
     }, r("q2-icon", {
-      key: "9ddface0e855a5c6af58e6415ddc13a327a50e06",
+      key: "8ee4b6790296d9a82db9b1fdc2d420b3d5249a0f",
       type: "chevron-right"
     }))), r("ul", {
-      key: "18d55fe631add203b41784d7e10b60c6d587702a",
+      key: "a25d2c222123d68c7274376dc49a51249732d000",
       onScroll: this.checkScrollState,
       ref: t => this.listElement = t,
       role: "tablist"
     }, t > 0 && [ ...Array(t).keys() ].map((t => this.renderStepBtn(t))))), r("div", {
-      key: "29141e95496abf8d409ce8ccdc71010f8cb6efdd",
+      key: "e1999ed9bff7ae2158a81029e0b9b1148b9d22c9",
       role: "list"
     }, r("slot", {
-      key: "f4cace12ffe8239c98ea12daee44fa3ff1369354",
+      key: "80e239e0484809834c7e096d7df50e68b4ff7c85",
       onSlotchange: () => this.onSlotChange()
     })));
   }

package/dist/q2-tecton-elements/q2-textarea.entry.js

@@ -335,10 +335,10 @@ const b = class {
   }
   render() {
     return a("div", {
-      key: "9e15d586cc11ac73ce92f35a0d1a05dc6101e064",
+      key: "ece9138953ebdde47af2559b2f10c3edc8b73c91",
       class: this.wrapperClasses
     }, v(this), a("div", {
-      key: "f0836c51dbeba1895d11a5bd20bfbaf3b5d22ad8",
+      key: "34c8ce254d131b4c0aefa5ff772c00e0d4b495b6",
       class: "content-container",
       ref: t => this.contentContainer = t
     }, this.renderInput(), this.maxlength ? this.renderMaxLength() : "", d(this)));

package/dist/types/components/q2-action-group/q2-action-group.d.ts

@@ -1,4 +1,3 @@
-import { Q2ResizeObserverCustomEvent } from "../../components";
 import { ComponentInterface } from '../../stencil-public-runtime';
 export declare class Q2ActionGroup implements ComponentInterface {
     container: HTMLDivElement;

package/dist/types/components/q2-loading/skeleton/shapes.d.ts

@@ -1,4 +1,3 @@
-import { JSX } from './../../../components';
 interface AtomOptions {
     width?: string;
     height?: string;

package/dist/types/components/q2-optgroup/q2-optgroup.d.ts

@@ -12,7 +12,7 @@ export declare class Q2Optgroup implements ComponentInterface {
     componentWillLoad(): void;
     disabledWatcher(disabled: boolean): void;
     get headerId(): string;
-    get options(): HTMLQ2OptionElement[];
+    get options(): Element[];
     setHidden: () => void;
     render(): any;
 }

package/dist/types/components/q2-tab-container/q2-tab-container.d.ts

@@ -67,9 +67,9 @@ export declare class Q2TabContainer implements ComponentInterface {
     onResize(): void;
     nameObserver(): void;
     valueObserver(): void;
-    get selectedTabValue(): string;
+    get selectedTabValue(): any;
     get tabList(): Element;
-    get tabPanes(): (HTMLQ2TabPaneElement | HTMLTectonTabPaneElement)[];
+    get tabPanes(): any[];
     checkScrollState: () => void;
     moveToAdjacentTab: (value: string, direction: 'next' | 'prev' | 'first' | 'last') => void;
     moveToTab: (index: number, shouldFocus?: boolean) => HTMLButtonElement;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "q2-tecton-elements",
-    "version": "1.55.2",
+    "version": "1.55.4",
     "description": "Q2 Tecton Custom Elements",
     "license": "MIT",
     "author": "Q2 Tecton Team",
@@ -36,7 +36,7 @@
     },
     "dependencies": {
         "@stencil/core": "4.18.0",
-        "q2-tecton-common": "1.55.2",
+        "q2-tecton-common": "1.55.4",
         "swiper": "8.4.4"
     },
     "devDependencies": {
@@ -60,6 +60,5 @@
         "puppeteer": "^20.9.0",
         "typescript": "5.4.5",
         "typescript-eslint": "^7.11.0"
-    },
-    "gitHead": "dba281737a6f17bda3b78ded24e7f26532699256"
+    }
 }

package/dist/collection/components/q2-loc/q2-loc.css

@@ -1,70 +0,0 @@
-* {
-  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;
-}

package/dist/types/components/q2-action-sheet/q2-action-sheet.d.ts

@@ -1,60 +0,0 @@
-import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import { Q2OptionListCustomEvent } from "../../components";
-import { ActionSheetListCloseData, ActionSheetData, ActionSheetListData, ActionSheetMessageData, ActionSheetSelectedOption, ActionSheetListOption, ActionSheetListOptgroup } from 'q2-tecton-common/lib/utility/action-sheet';
-export declare class Q2ActionSheet implements ComponentInterface {
-    contentElement: HTMLDivElement;
-    dialogElement: HTMLDialogElement;
-    initialSelectedOptions: ActionSheetSelectedOption[];
-    maxHeight: number;
-    minHeight: number;
-    optionListElement: HTMLQ2OptionListElement;
-    selectedOptions: {
-        values: ActionSheetSelectedOption[];
-        value: string;
-    };
-    hostElement: HTMLElement;
-    isScrollable: boolean;
-    renderStatus: 'is-open' | 'is-closing' | 'is-opening';
-    data: ActionSheetData;
-    hideClose: boolean;
-    title: string;
-    /**
-     * Emitted when the action sheet is closed.
-     */
-    close: EventEmitter<ActionSheetListCloseData>;
-    /**
-     * Emitted when the component has finished rendering.
-     * @private
-     */
-    ready: EventEmitter;
-    disconnectedCallback(): void;
-    componentDidLoad(): void;
-    hide(data?: ActionSheetListCloseData): Promise<void>;
-    show(): Promise<void>;
-    focusContent(): void;
-    generateOptgroup: (option: ActionSheetListOptgroup) => HTMLQ2OptgroupElement;
-    generateOption: (option: ActionSheetListOption) => HTMLQ2OptionElement;
-    hidePostHook(): void;
-    onCancel: (event: Event) => void;
-    onClick: (event: MouseEvent) => void;
-    onListChange: (event: Q2OptionListCustomEvent<{
-        value: string;
-        values: ActionSheetSelectedOption[];
-    }>) => void;
-    onListDone: () => void;
-    onListPopoverStateChange: (event: Q2OptionListCustomEvent<{
-        open: boolean;
-        action: 'close' | 'select' | 'open';
-    }>) => void;
-    showPreHook(): void;
-    storeInitialValues(): void;
-    updateDialogMinMaxHeight(): void;
-    renderList: ({ data }: {
-        data: ActionSheetListData;
-    }) => any;
-    renderMessage: ({ data }: {
-        data: ActionSheetMessageData;
-    }) => any;
-    renderSlot: () => any;
-    render(): any;
-}

package/dist/types/components/q2-calendar/q2-calendar.d.ts

@@ -1,327 +0,0 @@
-import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import { ISelectedMonthYear, CalendarDay, IDateValidators } from './q2-calendar-types';
-import { IMomentLikeObject } from './q2-calendar-helpers';
-import { DateList } from './q2-calendar-validation';
-import { IEventDetail } from '../q2-input/q2-input-types';
-import { Q2InputCustomEvent } from "../../components";
-export declare class Q2Calendar implements ComponentInterface {
-    btnCalendarToggle: HTMLQ2BtnElement;
-    btnNextMonth: HTMLQ2BtnElement;
-    btnNextYear: HTMLQ2BtnElement;
-    btnPrevMonth: HTMLQ2BtnElement;
-    btnPrevYear: HTMLQ2BtnElement;
-    calendarBody: HTMLDivElement;
-    calendarTable: HTMLTableElement;
-    controlElement: HTMLQ2InputElement;
-    dayAbbrStrings: string[];
-    dayStrings: string[];
-    defaultFormatString: string;
-    formatModifier: string;
-    hintMessageElement: HTMLQ2MessageElement;
-    internalError: string;
-    monthStrings: string[];
-    popoverElement?: HTMLQ2PopoverElement;
-    scheduledAfterRender: (() => void)[];
-    selectedMonthYear: ISelectedMonthYear;
-    valueOnBlur: string | {
-        toDate(): Date;
-    };
-    hostElement: HTMLElement;
-    dateList: CalendarDay[];
-    hintMessage: string;
-    hintMessageType: 'info' | 'error';
-    keyboardSelection: boolean;
-    typedValue: string;
-    /** @deprecated */
-    ariaLabel: string;
-    /**
-     * Detects the year automatically based on today's date when the user presses the `Escape` key or the `Blur` mouse event occurs.
-     * Setting `future` or `past` as the value will increase or decrease the year by one, respectively.
-     */
-    assume: 'current' | 'future' | 'past';
-    /** @deprecated */
-    buttonLabel: string;
-    /** A label shown at the top of the popover date picker. */
-    calendarLabel: string;
-    /** Display a button in the input field allowing the user to clear their selection. */
-    clearable: boolean;
-    /**
-     * Specifies a time of day after which a date is no longer valid.
-     *
-     * @warning
-     * Must be a valid ISO date string.
-     */
-    cutoffTime: string;
-    /**
-     * The most concise way to define valid days of the week for calendar. Each day of the week has a checksum value:
-     *
-     * - Sunday = 1
-     * - Monday = 2
-     * - Tuesday = 4
-     * - Wednesday = 8
-     * - Thursday = 16
-     * - Friday = 32
-     * - Saturday = 64
-     *
-     * Add the checksum values of your desired valid days together, and set `daysOfWeekChecksum` to that summed value.
-     *
-     * **Example:**
-     * @snippet
-     * element.daysOfWeekChecksum = 127 // All days of the week are valid
-     * element.daysOfWeekChecksum = 62; // Only weekdays are valid
-     * element.daysOfWeekChecksum = 65; // Only Saturday and Sunday are valid
-     *
-     */
-    daysOfWeekChecksum: number;
-    /** Disable the input field. */
-    disabled: boolean;
-    /**
-     * Text that displays as the placeholder when the field is marked `disabled`.
-     * @localizable
-     */
-    disabledMsg: string;
-    /** Text that appears at the bottom of the popover date picker. */
-    disclaimer: string;
-    /**
-     * Determines the display format of the date field value.
-     *
-     * Must follow the [date-fns](https://date-fns.org/v2.28.0/docs/format) token specification.
-     */
-    displayFormat: string;
-    /**
-     * Defines the last selectable date in the date picker popover.
-     *
-     * @warning
-     * Must be a valid ISO date string.
-     */
-    endDate: string;
-    /**
-     * Each item in the `errors` array will appear below the input field when the field is focused and `typeable` is `true`.
-     * @localizable
-     */
-    errors: string[];
-    /** Hide the input field's ` <label> ` element from view. */
-    hideLabel: boolean;
-    /**
-     * Each item in the `hints` array will appear below the input field when the field is focused and `typeable` is true.
-     * @localizable
-     */
-    hints: string[];
-    /** Show error styles when the calendar is in an errant state. */
-    invalid: boolean;
-    /**
-     * Defines an explicit date blacklist.
-     *
-     * @warning
-     * Must be a valid ISO date string.
-     *
-     * @info
-     * When explicit date definitions like `invalidDates` is used, other date validity methods like `daysOfWeekChecksum` are overriden.
-     */
-    invalidDates: string[];
-    /** The visible label for the `q2-calendar` input field. */
-    label: string;
-    /** @deprecated */
-    onsuccess: (e: CustomEvent) => void;
-    /**
-     * Determine whether the popover is open or closed.
-     *
-     * @readonly
-     */
-    open: boolean;
-    /** Appends "(optional)" to the label and sets `aria-required="false"`. */
-    optional: boolean;
-    /**
-     * Text that appears within the input field when it is blurred and empty.
-     * Placeholder text disappears when the user focuses on the field and provides input.
-     */
-    placeholder: string;
-    /** @deprecated */
-    popDirection: 'up' | 'down';
-    /** Aligns the popover date picker to the left or right side of the input field. */
-    popoverAlignment: 'left' | 'right';
-    /**
-     * Force the direction of the popover date picker when it opens.
-     * If no value is passed, the component will auto-detect the direction based on available space.
-     */
-    popoverDirection: 'up' | 'down';
-    /** @deprecated */
-    popoverMinHeight: number;
-    /**
-     * Determines the display mode of the popover.
-     *
-     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.
-     *
-     * @info
-     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover
-     * when nested inside of elements with transform properties. This will be removed once the popover API is available
-     * for use.
-     */
-    popoverMode: 'legacy';
-    /**
-     * The field's content is not editable, but the field remains focusable.
-     *
-     * Appends "(readonly)" to the field label. Supersedes `optional` if both are `true`.
-     */
-    readonly: boolean;
-    /**
-     * Defines the first selectabe date in the date picker popover.
-     *
-     * @warning
-     * Must be a valid ISO date string.
-     */
-    startDate: string;
-    /** The user can type in the field. Only available in desktop browsers. */
-    typeable: boolean;
-    /**
-     * Defines an explicit date whitelist.
-     *
-     * @warning
-     * Must be a valid ISO date string.
-     *
-     * @info
-     * When explicit date definitions like `validDates` is used, other date validity methods like `daysOfWeekChecksum` are overriden.
-     */
-    validDates: string[];
-    /**
-     * The value of the `q2-calendar` element, e.g. the selected date.
-     *
-     * **How to change or clear the value with javascript:**
-     * @snippet
-     * // change date
-     * element.value = '2022-12-21';
-     * // clear date
-     * element.value = null;
-     */
-    value: string | {
-        toDate(): Date;
-    };
-    /**
-     * Emitted when a date is selected or typed in the input field.
-     * @legacyEvent
-     */
-    change: EventEmitter<{
-        value: string | null;
-    }>;
-    /**
-     * Emitted when an invalid date is entered into the field.
-     */
-    error: EventEmitter<{
-        errors: {
-            message: string;
-            errorCode: string;
-        }[];
-    }>;
-    /**
-     * Emitted when a valid date is entered or selected.
-     */
-    success: EventEmitter<{
-        value: string;
-    }>;
-    connectedCallback(): void;
-    componentWillLoad(): void;
-    componentDidLoad(): void;
-    componentDidRender(): void;
-    defaultChangeHandler(event: CustomEvent): void;
-    handleClear(): void;
-    defaultErrorHandler(event: CustomEvent): void;
-    delegateFocus(event: FocusEvent): void;
-    popoverStateHandler({ detail: { open } }: CustomEvent<{
-        open: boolean;
-    }>): void;
-    defaultSuccessHandler(event: CustomEvent): void;
-    /**
-     * Emulates clicking the `<input>` to hide the popover if it is visible.
-     *
-     * @testOnly
-     */
-    closePopover(): Promise<void>;
-    /**
-     * Emulates clicking the `<input>` to display the popover if it is hidden.
-     *
-     * @testOnly
-     */
-    openPopover(): Promise<void>;
-    /**
-     * Emulates clicking the `<input>` to display the popover, moving to the correct month and year, and clicking the
-     * provided date.
-     *
-     * While a `string` value can be passed, we recommended passing a `Date` object. If the value is invalid, the method
-     * will not select the date.
-     *
-     * @testOnly
-     */
-    setValue(value: string | Date): Promise<void>;
-    /**
-     * Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.
-     *
-     * While a `string` value can be passed, we recommended passing a `Date` object. If the value is invalid, the method
-     * will not select the date.
-     *
-     * @warning
-     * Only applicable when the input is typeable.
-     *
-     * @testOnly
-     */
-    typeValue(value: string | Date): Promise<void>;
-    ariaLabelObserver(): void;
-    cutoffTimeObserver(): void;
-    daysOfWeekChecksumObserver(): void;
-    endDateObserver(): void;
-    invalidDatesObserver(): void;
-    popDirectionHandler(): void;
-    startDateObserver(): void;
-    typeableChanged(): void;
-    validDatesObserver(): void;
-    valueObserver(newValue: string | IMomentLikeObject): void;
-    get canClear(): boolean;
-    get computedPlaceholder(): string;
-    get currentWeeks(): CalendarDay[][];
-    get dateValidators(): IDateValidators;
-    get dateValue(): Date | undefined;
-    get defaultHintMessage(): string;
-    get errorList(): any[];
-    get formattedValue(): string;
-    get hintList(): string[];
-    get innerInputContainer(): HTMLElement;
-    get innerInputField(): HTMLInputElement | HTMLButtonElement;
-    get isTypeable(): boolean;
-    get selectedDate(): Date;
-    _togglePopover(): void;
-    activateDay(date: Date): void;
-    buildDateList(monthYear: ISelectedMonthYear): DateList;
-    calendarDays(): any;
-    renderCalendarPopover(): any;
-    checkActiveCellForBlankness(): void;
-    closeCalendar: () => void;
-    focusDay(date: Date): Promise<void>;
-    focusInput(): void;
-    generateDateFromDay(day: number): Date;
-    goToMonthYear: (monthIndex: number, year: number) => void;
-    renderHintField(): any;
-    renderInputField(): any;
-    onClickElsewhere: (event: CustomEvent) => void;
-    onDateKeydown: (event: KeyboardEvent) => void;
-    onDateSelection: (event: MouseEvent) => void;
-    onHeaderControlKeydown: (event: KeyboardEvent) => void;
-    onInputBlur: () => void;
-    onInputChange: (event: Event) => void;
-    onInputClick: () => void;
-    onInputFocus: (event: FocusEvent) => void;
-    onInputInput: ({ detail: { value } }: Q2InputCustomEvent<IEventDetail> & InputEvent) => void;
-    onInputKeydown: (event: KeyboardEvent) => void;
-    onInputKeyup: (event: KeyboardEvent) => void;
-    onPopupKeyup: (event: KeyboardEvent) => void;
-    onRefocus: () => void;
-    openCalendar: () => void;
-    selectDate: (newDate: Date) => void;
-    setCompleteInput(inputDate: Date): void;
-    setHints({ isValid, message, messageType }: {
-        isValid: any;
-        message: any;
-        messageType: any;
-    }): Promise<void>;
-    toggleCalendar: () => void;
-    validateDate(): void;
-    render(): any;
-}