q2-tecton-elements 1.72.0 → 1.73.0

package/dist/collection/components/q2-tag/q2-tag.js

@@ -132,11 +132,14 @@ export class Q2Tag {
         this.dropdownBtn.focus();
     }
     popoverStateHandler({ detail: { open } }) {
-        if (this.open !== open)
-            this.open = open;
+        var _a;
+        if (this.open === open)
+            return;
+        this.open = open;
         if (open)
             return;
         this.optionList.setActiveElement(null);
+        (_a = this.dropdownBtn) === null || _a === void 0 ? void 0 : _a.focus();
     }
     // #endregion
     // #region Public Methods API
@@ -194,7 +197,7 @@ export class Q2Tag {
         if (this.optionCount)
             wrapperClassNames.push('has-options');
         const shouldShowOptions = this.optionCount > 0;
-        return (h(Host, { key: 'da6dc23ff4f250b18242a49db02eccc16210b043' }, h("click-elsewhere", { key: 'ee1da442ffd5aa53e55ae95f95b3ac51e2f5c71e', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": loc(this.label) }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" })), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: '578989b60b19f6f5e01c1cbc49a83e87fc74c5a9', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: 'd21abcd1fe11241e14b4f411d9559c12c139c18a', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: 'd46ec7dad47e40cec883205d6fb2424abcdd1038' })))))));
+        return (h(Host, { key: 'a18af83301ac8bf08d1638b05d4dd8795f11cd46' }, h("click-elsewhere", { key: '130d173a4bf53dd6eec1775944d910c630e704ae', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": loc(this.label) }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" })), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: '07bf52f6b4d8c4bbf42e90e69ff9a9deec82810b', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: 'eefdf7202c269194a9753e438b4c6060984ba33e', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '3067ac9beee239562c410d7dfe4af04c651ef8ae' })))))));
     }
     static get is() { return "q2-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-textarea/q2-textarea.js

@@ -277,7 +277,7 @@ export class Q2Textarea {
         ]))));
     }
     render() {
-        return (h("div", { key: '9b3eb74c84edd99af52a0ec71ba8b2fd8adbd1f2', class: this.wrapperClasses }, renderLabel(this), h("div", { key: 'a00772502ea6c1fde5af5bf4c12f0606a629252a', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', renderMessages(this))));
+        return (h("div", { key: '21a303feabd0c8fc09d9cc7f0de8b9b50081a56a', class: this.wrapperClasses }, renderLabel(this), h("div", { key: '58b5be24312fe523d09efe176b1ecf42b884166a', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', renderMessages(this))));
     }
     static get is() { return "q2-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -364,9 +364,9 @@ export class Q2Textarea {
                 "docs": {
                     "tags": [{
                             "name": "warning",
-                            "text": "Only use when a visible label is impractical."
+                            "text": "Hides the label visually. `label` text is still required for screenreader compliance."
                         }],
-                    "text": "Hide's the field's `<label>` element from view."
+                    "text": "Hides the field's `<label>` element from view."
                 },
                 "getter": false,
                 "setter": false,
@@ -427,6 +427,9 @@ export class Q2Textarea {
                 "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "warning",
+                            "text": "Required for screen reader compliance even when `hideLabel` is `true`."
+                        }, {
                             "name": "localizable",
                             "text": undefined
                         }],

package/dist/collection/components/q2-tooltip/test/q2-tooltip-test.vr.js

@@ -1,7 +1,7 @@
 import { expect } from "@playwright/test";
 import { test } from "@stencil/playwright";
 import { setupPage, THEMES, FONT_SCALE_PX, FONT_SCALE_SUFFIX } from "../../../utils/test/vr-helpers";
-const TRIGGER = `<q2-btn intent="workflow-primary"><span>Trigger</span></q2-btn>`;
+const TRIGGER = `<q2-btn intent="primary"><span>Trigger</span></q2-btn>`;
 // Pad the wrapper so the tooltip has room to render in any direction without clipping.
 const wrap = (inner) => `<div style="padding: 80px; display: inline-block;">${inner}</div>`;
 // Use `immediate` so hover doesn't have to wait through the 1s delay before the

package/dist/collection/components/tecton-tab-pane/tecton-tab-pane.js

@@ -51,9 +51,9 @@ export class TectonTabPane {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '6c0524ab1981900cc7a37803fd9426c6397049c4', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (h("div", { key: '10cc2712e1ccefa6a9bb3b657830636da4d81980' }, h("slot", { key: 'cde7112d4035c6f118e9c50b0fe5d9d91c70ee7d', name: "loading-wrapper" }), h("iframe", { key: '851972991feb3b8f6c7f569e92ff2e624d94e221', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
+        return (h("div", { key: 'b55643965ef49af2e41a683686db00b97e1c90b7', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (h("div", { key: 'f04f1594eba66d962d9adbab48bf3559f658c650' }, h("slot", { key: '08804102412a6b57ac9b9db2002d1608f8b22c19', name: "loading-wrapper" }), h("iframe", { key: 'a2524435de8072fb27ebdcc9762a1f20367df098', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
             return (h("input", { type: "hidden", value: element.value, name: element.key }));
-        }))) : (''))), h("div", { key: '741c6f2c89dc15493f165428929f589425aa4d75', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", { key: '17100ec2dc0ea2d1e27628d36e9e6e1139f293a9' }))));
+        }))) : (''))), h("div", { key: '59e9d5ddbabadb0e66615d998403d267c259f937', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", { key: '450c5724cf32ba05a2fc93b8adeba83b08e871e4' }))));
     }
     static get is() { return "tecton-tab-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/chart-keyboard.js

@@ -0,0 +1,76 @@
+import { loc } from "./index";
+/** Localized feedback shared by chart keyboard controls. */
+export function chartPointDescription(name, value, index, count) {
+    return loc('tecton.element.chart.pointDescription', [loc(name) || '', value, `${index + 1}`, `${count}`]);
+}
+/** Coordinates keyboard exploration with ECharts emphasis without changing chart data. */
+export function createChartKeyboardNavigation(options) {
+    let index = null;
+    let focused = false;
+    const clear = () => {
+        var _a;
+        if (index !== null) {
+            (_a = options.getChart()) === null || _a === void 0 ? void 0 : _a.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: index });
+        }
+        index = null;
+        options.onChange(null);
+    };
+    const select = (next) => {
+        var _a;
+        if (!options.getData()[next] || next === index)
+            return;
+        clear();
+        index = next;
+        (_a = options.getChart()) === null || _a === void 0 ? void 0 : _a.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index });
+        options.onChange(index);
+    };
+    const order = () => { var _a, _b; return (_b = (_a = options.getOrder) === null || _a === void 0 ? void 0 : _a.call(options)) !== null && _b !== void 0 ? _b : options.getData().map((_, i) => i); };
+    return {
+        onFocus: () => {
+            focused = true;
+            select(order()[0]);
+        },
+        onBlur: () => {
+            focused = false;
+            clear();
+        },
+        onKeyDown: (event) => {
+            if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+                return;
+            const indices = order();
+            if (!indices.length)
+                return;
+            const position = index === null ? -1 : indices.indexOf(index);
+            let next;
+            switch (event.key) {
+                case 'ArrowRight':
+                case 'ArrowDown':
+                    next = Math.min(position + 1, indices.length - 1);
+                    break;
+                case 'ArrowLeft':
+                case 'ArrowUp':
+                    next = Math.max(position - 1, 0);
+                    break;
+                case 'Home':
+                    next = 0;
+                    break;
+                case 'End':
+                    next = indices.length - 1;
+                    break;
+                case 'Escape':
+                    event.preventDefault();
+                    clear();
+                    return;
+                default:
+                    return;
+            }
+            event.preventDefault();
+            select(indices[next]);
+        },
+        refresh: () => {
+            clear();
+            if (focused)
+                select(order()[0]);
+        },
+    };
+}

package/dist/collection/utils/date-picker/date-picker-helpers.js

@@ -0,0 +1,239 @@
+import { addDays, format as formatDate, formatISO, isAfter, isBefore, isSameDay, isValid as isValidDate, } from "date-fns";
+import { loc } from "../index";
+const defaultDisplayFormat = 'MM/DD/YYYY';
+const supportedDisplayFormats = [
+    defaultDisplayFormat,
+    'DD/MM/YYYY',
+    'MM-DD-YYYY',
+    'DD-MM-YYYY',
+    'YYYY-MM-DD',
+];
+const defaultDatePickerStringKeys = {
+    'Choose a date': 'tecton.element.datePicker.calendarLabel',
+    'Dates are shown in your local time zone.': 'tecton.element.datePicker.disclaimer.localTimeZone',
+};
+const isoDatePattern = /^\d{4}-\d{2}-\d{2}$/;
+const isoLikeDatePattern = /^(\d{4})-(\d{1,2})-(\d{1,2})(?:T.*)?$/;
+const slashDatePattern = /^(\d{1,2})\/(\d{1,2})\/(\d{2}|\d{4})$/;
+/** Determines a year for a month and day when typeable input omits the year. */
+export function buildInputDate(input, assume) {
+    const [month, day, year] = input.split('/');
+    if (!month)
+        return;
+    if (!day)
+        return new Date(new Date().getFullYear(), Number(month) - 1, 1);
+    if (Number(day) <= 0)
+        return;
+    const selectedYear = (year === null || year === void 0 ? void 0 : year.length) === 4 ? Number(year) : Number(assumeYear(month, day, assume));
+    const date = new Date(selectedYear, Number(month) - 1, Number(day));
+    return isValidDate(date) ? date : undefined;
+}
+/** Formats a valid date as an ISO calendar date. */
+export function formatDateISO(value) {
+    if (!isValidDate(value))
+        return;
+    return formatISO(value, { representation: 'date' });
+}
+/** Formats a date for an accessible day label. */
+export function formatDateFull(value) {
+    if (!isValidDate(value))
+        return;
+    return new Intl.DateTimeFormat('en-US', {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+        weekday: 'long',
+        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    }).format(value);
+}
+/** Returns localized abbreviated day names beginning with Sunday. */
+export function getDays() {
+    return [
+        loc('tecton.element.calendar.days.short.Sunday'),
+        loc('tecton.element.calendar.days.short.Monday'),
+        loc('tecton.element.calendar.days.short.Tuesday'),
+        loc('tecton.element.calendar.days.short.Wednesday'),
+        loc('tecton.element.calendar.days.short.Thursday'),
+        loc('tecton.element.calendar.days.short.Friday'),
+        loc('tecton.element.calendar.days.short.Saturday'),
+    ];
+}
+/** Returns localized full day names beginning with Sunday. */
+export function getDaysOfWeek() {
+    return [
+        loc('tecton.element.calendar.days.Sunday'),
+        loc('tecton.element.calendar.days.Monday'),
+        loc('tecton.element.calendar.days.Tuesday'),
+        loc('tecton.element.calendar.days.Wednesday'),
+        loc('tecton.element.calendar.days.Thursday'),
+        loc('tecton.element.calendar.days.Friday'),
+        loc('tecton.element.calendar.days.Saturday'),
+    ];
+}
+/** Parses the date picker's public ISO-only value contract. */
+export function parseDatePickerValue(value) {
+    if (!value || !isoDatePattern.test(value))
+        return;
+    const [year, month, day] = value.split('-').map(Number);
+    return dateFromParts(year, month, day);
+}
+/** Normalizes a legacy string or Moment-like value for the date picker's ISO-only calendar. */
+export function normalizeDatePickerValue(value) {
+    if (!value)
+        return;
+    let date;
+    if (value instanceof Date) {
+        date = value;
+    }
+    else if (isMomentLike(value)) {
+        try {
+            date = value.toDate();
+        }
+        catch (_a) {
+            return;
+        }
+    }
+    else {
+        const input = value.trim();
+        if (!input)
+            return;
+        date = parseDatePickerValue(input);
+        if (!date) {
+            const isoLikeParts = input.match(isoLikeDatePattern);
+            const slashParts = input.match(slashDatePattern);
+            if (isoLikeParts) {
+                date = dateFromParts(Number(isoLikeParts[1]), Number(isoLikeParts[2]), Number(isoLikeParts[3]));
+            }
+            else if (slashParts) {
+                const parsedYear = Number(slashParts[3]);
+                const year = parsedYear < 100 ? (parsedYear >= 69 ? 1900 : 2000) + parsedYear : parsedYear;
+                date = dateFromParts(year, Number(slashParts[1]), Number(slashParts[2]));
+            }
+            else {
+                const parsedDate = new Date(input);
+                date = isValidDate(parsedDate)
+                    ? dateFromParts(parsedDate.getFullYear(), parsedDate.getMonth() + 1, parsedDate.getDate())
+                    : undefined;
+            }
+        }
+    }
+    return formatDateISO(date);
+}
+/** Returns the month and year used to initialize the date picker grid. */
+export function setupMonthYear(value = new Date()) {
+    return {
+        monthIndex: value.getMonth(),
+        selectedYear: value.getFullYear(),
+    };
+}
+/** Returns the enabled day indexes represented by a calendar checksum. */
+export function getValidDaysOfWeek(checksum = 127) {
+    const validDays = [];
+    for (let day = 0; day < 7; day++) {
+        if (checksum & (1 << day))
+            validDays.push(day);
+    }
+    return checksum > 0 ? validDays : [];
+}
+/** Determines whether a date satisfies the configured bounds and cutoff. */
+export function baseValidation(dateValidators, now, newDate) {
+    const isNewDateBeforeStartDate = isAfter(dateValidators === null || dateValidators === void 0 ? void 0 : dateValidators.startDate, newDate);
+    const isNewDateAfterEndDate = isBefore(dateValidators === null || dateValidators === void 0 ? void 0 : dateValidators.endDate, newDate);
+    const isNowAfterCutoffTime = isSameDay(now, newDate) && isAfter(now, dateValidators === null || dateValidators === void 0 ? void 0 : dateValidators.cutOffTime);
+    return !(isNewDateBeforeStartDate || isNowAfterCutoffTime || isNewDateAfterEndDate);
+}
+/** Determines whether a date's weekday is enabled. */
+export function validateAgainstChecksum(validDaysOfWeek, date) {
+    return validDaysOfWeek.includes(date.getDay());
+}
+/** Determines whether a date is absent from a blacklist. */
+export function validateAgainstBlacklist(invalidDates, date) {
+    return !validateAgainstWhitelist(invalidDates, date);
+}
+/** Determines whether a date is present in a whitelist. */
+export function validateAgainstWhitelist(validDates, date) {
+    return validDates.some(validDate => isSameDay(validDate, date));
+}
+function assumeYear(month, day, assume) {
+    const monthDay = `${month.padStart(2, '0')}/${day.padStart(2, '0')}`;
+    const now = new Date();
+    const currentMonthDay = `${now.getMonth() + 1}`.padStart(2, '0') + `/${now.getDate()}`.padStart(2, '0');
+    let year = now.getFullYear();
+    if (assume === 'future' && currentMonthDay > monthDay)
+        year++;
+    if (assume === 'past' && currentMonthDay < monthDay)
+        year--;
+    return `${year}`;
+}
+function parseDatePickerValues(values) {
+    return (values || []).map(parseDatePickerValue).filter((date) => !!date);
+}
+function dateFromParts(year, month, day) {
+    const date = new Date(0);
+    date.setFullYear(year, month - 1, day);
+    date.setHours(0, 0, 0, 0);
+    if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day)
+        return;
+    return date;
+}
+function isMomentLike(value) {
+    return typeof value !== 'string' && typeof (value === null || value === void 0 ? void 0 : value.toDate) === 'function';
+}
+/** Formats a date using one of the date picker's supported numeric display formats. */
+export function formatDisplayDate(date, displayFormat) {
+    const separator = displayFormat.includes('-') ? '-' : '/';
+    const month = `${date.getMonth() + 1}`.padStart(2, '0');
+    const day = `${date.getDate()}`.padStart(2, '0');
+    const year = `${date.getFullYear()}`;
+    const dateParts = displayFormat.startsWith('YYYY')
+        ? [year, month, day]
+        : displayFormat.startsWith('DD')
+            ? [day, month, year]
+            : [month, day, year];
+    return dateParts.join(separator);
+}
+/** Formats a date using the legacy Moment-style tokens accepted by q2-calendar. */
+export function formatLegacyDisplayDate(date, displayFormat) {
+    const dateFnsFormat = displayFormat
+        .replace(/[d]/g, 'E')
+        .replace(/[D]/g, 'd')
+        .replace(/[Y]/g, 'y')
+        .replace(/[l]/g, 'P')
+        .replace(/[W]/g, 'I');
+    return formatDate(date, dateFnsFormat);
+}
+/** Determines whether a date satisfies every configured selection constraint. */
+export function isDateSelectable(date, constraints) {
+    const cutoffTime = new Date(constraints.cutoffTime || '');
+    const withinBounds = baseValidation({
+        startDate: parseDatePickerValue(constraints.startDate),
+        endDate: parseDatePickerValue(constraints.endDate),
+        cutOffTime: isValidDate(cutoffTime) ? cutoffTime : undefined,
+    }, new Date(), date);
+    const validDates = parseDatePickerValues(constraints.validDates);
+    const matchesAllowedDates = (validDates === null || validDates === void 0 ? void 0 : validDates.length)
+        ? validateAgainstWhitelist(validDates, date)
+        : validateAgainstChecksum(getValidDaysOfWeek(constraints.daysOfWeekChecksum), date);
+    return (withinBounds &&
+        matchesAllowedDates &&
+        validateAgainstBlacklist(parseDatePickerValues(constraints.invalidDates), date));
+}
+/** Determines whether every date in an inclusive range is selectable. */
+export function isRangeSelectable(start, end, constraints) {
+    for (let date = start; date.getTime() <= end.getTime(); date = addDays(date, 1)) {
+        if (!isDateSelectable(date, constraints))
+            return false;
+    }
+    return true;
+}
+/** Resolves a date-picker localization key or mapped default string. */
+export function localizeDatePickerString(value, substitutions = {}) {
+    if (!value)
+        return '';
+    return loc(defaultDatePickerStringKeys[value] || value, substitutions);
+}
+/** Returns a supported display format, falling back to the date-picker default. */
+export function normalizeDisplayFormat(displayFormat) {
+    const normalizedFormat = displayFormat === null || displayFormat === void 0 ? void 0 : displayFormat.toUpperCase();
+    return supportedDisplayFormats.includes(normalizedFormat) ? normalizedFormat : defaultDisplayFormat;
+}

package/dist/collection/utils/date-picker/date-picker-types.js

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

package/dist/collection/utils/index.js

@@ -336,7 +336,7 @@ export const resizeIframe = () => {
 // Handling color attribute (deprecated)
 export const handleColor = (target) => {
     if (!target.intent && ['primary', 'secondary'].includes(target.color)) {
-        target.intent = `workflow-${target.color}`;
+        target.intent = target.color;
         target.color = undefined;
     }
 };