q2-tecton-elements 1.71.4 → 1.73.0

package/dist/types/global.d.ts

@@ -16,6 +16,7 @@ declare global {
             showOverpanel: ShowOverpanelFn;
             showActionSheet?: ShowActionSheetFn;
             beta?: boolean;
+            platformScrollChanged?: (callback: (data: PlatformDimensions) => void) => () => void;
         };
         Tecton?: {
             inMobileApp: boolean;

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components';
 export * from 'q2-tecton-common/lib/types/elements';
+export type { DatePickerChangeDetail, DatePickerCloseDetail, DatePickerDay, DatePickerDisplayFormat, DatePickerErrorDetail, DatePickerMode, DatePickerMomentLike, DatePickerNavigationAction, DatePickerSuccessDetail, DatePickerValidationError, DatePickerValue, } from './utils/date-picker/date-picker-types';

package/dist/types/utils/chart-keyboard.d.ts

@@ -0,0 +1,16 @@
+import type { ECharts } from 'echarts/core';
+import type { ChartData } from 'q2-tecton-common/lib/types/elements';
+/** Localized feedback shared by chart keyboard controls. */
+export declare function chartPointDescription(name: string, value: string, index: number, count: number): string;
+/** Coordinates keyboard exploration with ECharts emphasis without changing chart data. */
+export declare function createChartKeyboardNavigation(options: {
+    getChart: () => ECharts;
+    getData: () => ChartData[];
+    onChange: (index: number | null) => void;
+    getOrder?: () => number[];
+}): {
+    onFocus: () => void;
+    onBlur: () => void;
+    onKeyDown: (event: KeyboardEvent) => void;
+    refresh: () => void;
+};

package/dist/types/utils/date-picker/date-picker-helpers.d.ts

@@ -0,0 +1,47 @@
+import type { DatePickerDateValidators, DatePickerDisplayFormat, DatePickerSelectedMonthYear, DatePickerValue } from './date-picker-types';
+export interface DatePickerConstraints {
+    cutoffTime?: string;
+    daysOfWeekChecksum?: number;
+    endDate?: string;
+    invalidDates?: string[];
+    startDate?: string;
+    validDates?: string[];
+}
+/** Determines a year for a month and day when typeable input omits the year. */
+export declare function buildInputDate(input: string, assume: 'current' | 'future' | 'past'): Date | undefined;
+/** Formats a valid date as an ISO calendar date. */
+export declare function formatDateISO(value: Date): string | undefined;
+/** Formats a date for an accessible day label. */
+export declare function formatDateFull(value: Date): string | undefined;
+/** Returns localized abbreviated day names beginning with Sunday. */
+export declare function getDays(): string[];
+/** Returns localized full day names beginning with Sunday. */
+export declare function getDaysOfWeek(): string[];
+/** Parses the date picker's public ISO-only value contract. */
+export declare function parseDatePickerValue(value?: string | null): Date | undefined;
+/** Normalizes a legacy string or Moment-like value for the date picker's ISO-only calendar. */
+export declare function normalizeDatePickerValue(value?: DatePickerValue | Date | null): string | undefined;
+/** Returns the month and year used to initialize the date picker grid. */
+export declare function setupMonthYear(value?: Date): DatePickerSelectedMonthYear;
+/** Returns the enabled day indexes represented by a calendar checksum. */
+export declare function getValidDaysOfWeek(checksum?: number): number[];
+/** Determines whether a date satisfies the configured bounds and cutoff. */
+export declare function baseValidation(dateValidators: DatePickerDateValidators, now: Date, newDate: Date): boolean;
+/** Determines whether a date's weekday is enabled. */
+export declare function validateAgainstChecksum(validDaysOfWeek: number[], date: Date): boolean;
+/** Determines whether a date is absent from a blacklist. */
+export declare function validateAgainstBlacklist(invalidDates: Date[], date: Date): boolean;
+/** Determines whether a date is present in a whitelist. */
+export declare function validateAgainstWhitelist(validDates: Date[], date: Date): boolean;
+/** Formats a date using one of the date picker's supported numeric display formats. */
+export declare function formatDisplayDate(date: Date, displayFormat: DatePickerDisplayFormat): string;
+/** Formats a date using the legacy Moment-style tokens accepted by q2-calendar. */
+export declare function formatLegacyDisplayDate(date: Date, displayFormat: string): string;
+/** Determines whether a date satisfies every configured selection constraint. */
+export declare function isDateSelectable(date: Date, constraints: DatePickerConstraints): boolean;
+/** Determines whether every date in an inclusive range is selectable. */
+export declare function isRangeSelectable(start: Date, end: Date, constraints: DatePickerConstraints): boolean;
+/** Resolves a date-picker localization key or mapped default string. */
+export declare function localizeDatePickerString(value: string, substitutions?: Record<string, string>): string;
+/** Returns a supported display format, falling back to the date-picker default. */
+export declare function normalizeDisplayFormat(displayFormat?: string): DatePickerDisplayFormat;

package/dist/types/utils/date-picker/date-picker-types.d.ts

@@ -0,0 +1,42 @@
+export interface DatePickerDay {
+    classList: string;
+    date: Date;
+    isOutside: boolean;
+    isSelected: boolean;
+    isToday: boolean;
+    isValid: boolean;
+}
+export interface DatePickerChangeDetail {
+    value?: string | null;
+    rangeStart?: string | null;
+    rangeEnd?: string | null;
+}
+export interface DatePickerCloseDetail {
+    error?: string;
+}
+export interface DatePickerErrorDetail {
+    errors: DatePickerValidationError[];
+}
+export interface DatePickerSuccessDetail {
+    value: string;
+}
+export interface DatePickerValidationError {
+    errorCode: string;
+    message: string;
+}
+export interface DatePickerDateValidators {
+    startDate?: Date;
+    endDate?: Date;
+    cutOffTime?: Date;
+}
+export interface DatePickerSelectedMonthYear {
+    monthIndex: number;
+    selectedYear: number;
+}
+export interface DatePickerMomentLike {
+    toDate(): Date;
+}
+export type DatePickerDisplayFormat = 'MM/DD/YYYY' | 'DD/MM/YYYY' | 'MM-DD-YYYY' | 'DD-MM-YYYY' | 'YYYY-MM-DD';
+export type DatePickerMode = 'single' | 'range' | 'single-typeable' | 'range-typeable';
+export type DatePickerValue = string | DatePickerMomentLike;
+export type DatePickerNavigationAction = 'previousYear' | 'previousMonth' | 'nextMonth' | 'nextYear';

package/dist/types/utils/test/vr-helpers.d.ts

@@ -7,6 +7,8 @@ export declare const FONT_SCALE_PX = 17;
 export declare const FONT_SCALE_SUFFIX = "scaled-font-size";
 export interface SetupPageOptions {
     theme?: Theme;
+    /** Controls component motion during the test. Defaults to reduced for stable screenshots. */
+    motion?: 'normal' | 'reduced';
     /**
      * Bootstrap the localization system before Stencil hydrates. Pass `true` to install
      * a loc() that resolves the default en-US strings (accurate for components like

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "q2-tecton-elements",
-    "version": "1.71.4",
+    "version": "1.73.0",
     "description": "Q2 Tecton Custom Elements",
     "license": "MIT",
     "author": "Q2 Tecton Team",
@@ -63,7 +63,7 @@
     },
     "dependencies": {
         "@stencil/core": "~4.43.0",
-        "q2-tecton-common": "1.71.4",
+        "q2-tecton-common": "1.73.0",
         "swiper": "^12.1.2"
     },
     "devDependencies": {
@@ -85,5 +85,5 @@
         "rollup-plugin-istanbul": "^5.0.0"
     },
     "packageManager": "pnpm@10.27.0",
-    "gitHead": "4fa4c7ad2ac445af639ed0a3728f33cd5c70a6b3"
+    "gitHead": "d3616049752e07b046929bd7009e437b924cba84"
 }

package/dist/cjs/q2-optgroup.cjs.entry.js

@@ -1,70 +0,0 @@
-'use strict';
-
-var index = require('./index-DUaTw_1N.js');
-var component = require('./component-iASoq6gx.js');
-var index$1 = require('./index-SpDCZABA.js');
-
-const q2OptgroupCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{display:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--t-base, #FFFFFF))));color:var(--tct-optgroup-header-color, inherit);font-size:var(--tct-optgroup-header-font-size, var(--const-px-14, 14px));font-weight:var(--tct-optgroup-header-font-weight, 600);letter-spacing:var(--tct-optgroup-header-letter-spacing, inherit);position:var(--tct-optgroup-header-position, sticky);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, none));top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}`;
-
-const Q2Optgroup = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        // #region Own Properties
-        this.guid = index$1.createGuid();
-        // #endregion
-        // #region State Properties
-        this.hidden = false;
-        // #endregion
-        // #region Public Property API
-        /** Determines whether all nested options are disabled. */
-        this.disabled = false;
-        this.setHidden = () => {
-            this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);
-        };
-    }
-    // #endregion
-    // #region Component Lifecycle Events
-    disconnectedCallback() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.mutationObserver = null;
-    }
-    componentWillLoad() {
-        component.hasValidAncestor(this.hostElement, 'q2-option-list, q2-select, q2-dropdown, q2-pill');
-        const observer = new MutationObserver(this.setHidden);
-        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });
-        this.mutationObserver = observer;
-        // set initially
-        this.setHidden();
-        this.disabledWatcher(this.disabled);
-    }
-    // #endregion
-    // #region Watchers
-    disabledWatcher(disabled) {
-        this.options.forEach(opt => {
-            opt.disabledGroup = !!disabled;
-        });
-    }
-    // #endregion
-    // #region Local Methods
-    get headerId() {
-        return `q2-optgroup-header-${this.guid}`;
-    }
-    get options() {
-        return Array.from(this.hostElement.querySelectorAll('q2-option'));
-    }
-    // #endregion
-    // #region Render Methods
-    render() {
-        return (index.h("div", { key: '4271765f1422cd33d73e1ed66b967994395bb4e1', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, index.h("div", { key: 'f5efb564a7049f7e8d78c0b6fa5749e239ea5133', class: "q2-optgroup-header", id: this.headerId }, (this.label && index$1.loc(this.label)) || ''), index.h("div", { key: '9f932967082554e86e8048bba66a1493258f6d06', class: "q2-optgroup-options" }, index.h("slot", { key: 'd58e647529d66c50b6e0c9a79705128f0ffdf806' }))));
-    }
-    get hostElement() { return index.getElement(this); }
-    static get watchers() { return {
-        "disabled": [{
-                "disabledWatcher": 0
-            }]
-    }; }
-};
-Q2Optgroup.style = q2OptgroupCss();
-
-exports.q2_optgroup = Q2Optgroup;

package/dist/esm/q2-optgroup.entry.js

@@ -1,68 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index-Cqkz7Bnm.js';
-import { b as hasValidAncestor } from './component-DaQM9u3s.js';
-import { c as createGuid, l as loc } from './index-Cps4jSQM.js';
-
-const q2OptgroupCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{display:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--t-base, #FFFFFF))));color:var(--tct-optgroup-header-color, inherit);font-size:var(--tct-optgroup-header-font-size, var(--const-px-14, 14px));font-weight:var(--tct-optgroup-header-font-weight, 600);letter-spacing:var(--tct-optgroup-header-letter-spacing, inherit);position:var(--tct-optgroup-header-position, sticky);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, none));top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}`;
-
-const Q2Optgroup = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        // #region Own Properties
-        this.guid = createGuid();
-        // #endregion
-        // #region State Properties
-        this.hidden = false;
-        // #endregion
-        // #region Public Property API
-        /** Determines whether all nested options are disabled. */
-        this.disabled = false;
-        this.setHidden = () => {
-            this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);
-        };
-    }
-    // #endregion
-    // #region Component Lifecycle Events
-    disconnectedCallback() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.mutationObserver = null;
-    }
-    componentWillLoad() {
-        hasValidAncestor(this.hostElement, 'q2-option-list, q2-select, q2-dropdown, q2-pill');
-        const observer = new MutationObserver(this.setHidden);
-        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });
-        this.mutationObserver = observer;
-        // set initially
-        this.setHidden();
-        this.disabledWatcher(this.disabled);
-    }
-    // #endregion
-    // #region Watchers
-    disabledWatcher(disabled) {
-        this.options.forEach(opt => {
-            opt.disabledGroup = !!disabled;
-        });
-    }
-    // #endregion
-    // #region Local Methods
-    get headerId() {
-        return `q2-optgroup-header-${this.guid}`;
-    }
-    get options() {
-        return Array.from(this.hostElement.querySelectorAll('q2-option'));
-    }
-    // #endregion
-    // #region Render Methods
-    render() {
-        return (h("div", { key: '4271765f1422cd33d73e1ed66b967994395bb4e1', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: 'f5efb564a7049f7e8d78c0b6fa5749e239ea5133', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '9f932967082554e86e8048bba66a1493258f6d06', class: "q2-optgroup-options" }, h("slot", { key: 'd58e647529d66c50b6e0c9a79705128f0ffdf806' }))));
-    }
-    get hostElement() { return getElement(this); }
-    static get watchers() { return {
-        "disabled": [{
-                "disabledWatcher": 0
-            }]
-    }; }
-};
-Q2Optgroup.style = q2OptgroupCss();
-
-export { Q2Optgroup as q2_optgroup };

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

@@ -1,88 +0,0 @@
-import { r as t, h as o, g as e } from "./index-Cqkz7Bnm.js";
-
-import { b as r } from "./component-DaQM9u3s.js";
-
-import { c as i, l as a } from "./index-Cps4jSQM.js";
-
-const n = class {
-  constructor(o) {
-    t(this, o), 
-    // #region Own Properties
-    this.guid = i(), 
-    // #endregion
-    // #region State Properties
-    this.hidden = !1, 
-    // #endregion
-    // #region Public Property API
-    /** Determines whether all nested options are disabled. */
-    this.disabled = !1, this.setHidden = () => {
-      this.hidden = this.options.every((t => t.hidden || t._multiSelectHidden));
-    };
-  }
-  // #endregion
-  // #region Component Lifecycle Events
-  disconnectedCallback() {
-    var t;
-    null === (t = this.mutationObserver) || void 0 === t || t.disconnect(), this.mutationObserver = null;
-  }
-  componentWillLoad() {
-    r(this.hostElement, "q2-option-list, q2-select, q2-dropdown, q2-pill");
-    const t = new MutationObserver(this.setHidden);
-    t.observe(this.hostElement, {
-      childList: !0,
-      attributes: !0,
-      subtree: !0
-    }), this.mutationObserver = t, 
-    // set initially
-    this.setHidden(), this.disabledWatcher(this.disabled);
-  }
-  // #endregion
-  // #region Watchers
-  disabledWatcher(t) {
-    this.options.forEach((o => {
-      o.disabledGroup = !!t;
-    }));
-  }
-  // #endregion
-  // #region Local Methods
-  get headerId() {
-    return `q2-optgroup-header-${this.guid}`;
-  }
-  get options() {
-    return Array.from(this.hostElement.querySelectorAll("q2-option"));
-  }
-  // #endregion
-  // #region Render Methods
-  render() {
-    return o("div", {
-      key: "4271765f1422cd33d73e1ed66b967994395bb4e1",
-      class: "q2-optgroup-container",
-      hidden: this.hidden,
-      "aria-labelledby": this.headerId,
-      role: "group"
-    }, o("div", {
-      key: "f5efb564a7049f7e8d78c0b6fa5749e239ea5133",
-      class: "q2-optgroup-header",
-      id: this.headerId
-    }, this.label && a(this.label) || ""), o("div", {
-      key: "9f932967082554e86e8048bba66a1493258f6d06",
-      class: "q2-optgroup-options"
-    }, o("slot", {
-      key: "d58e647529d66c50b6e0c9a79705128f0ffdf806"
-    })));
-  }
-  get hostElement() {
-    return e(this);
-  }
-  static get watchers() {
-    return {
-      disabled: [ {
-        disabledWatcher: 0
-      } ]
-    };
-  }
-};
-
-n.style = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{display:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--t-base, #FFFFFF))));color:var(--tct-optgroup-header-color, inherit);font-size:var(--tct-optgroup-header-font-size, var(--const-px-14, 14px));font-weight:var(--tct-optgroup-header-font-weight, 600);letter-spacing:var(--tct-optgroup-header-letter-spacing, inherit);position:var(--tct-optgroup-header-position, sticky);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, none));top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}';
-
-export { n as q2_optgroup }