@xplortech/apollo-core 2.11.0 → 2.12.0

package/dist/collection/components/xpl-header-accordion/xpl-header-accordion.js

@@ -12,38 +12,26 @@ export class HeaderAccordion {
             this.expanded = !this.expanded;
         };
         this.handleParentCheckboxChange = (checked) => {
-            var _a;
             this.parentChecked = checked;
             this.parentIndeterminate = false;
-            const childCheckboxes = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
-            childCheckboxes.forEach((checkbox) => {
+            const childCheckboxes = this.el?.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
+            childCheckboxes?.forEach((checkbox) => {
                 checkbox.checked = checked;
             });
         };
     }
-    applyBorderRadiusToLastRow() {
-        var _a;
-        if (this.expanded) {
-            const rows = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('xpl-dynamic-table-row');
-            const lastRow = rows[rows.length - 1];
-            const cells = lastRow === null || lastRow === void 0 ? void 0 : lastRow.querySelectorAll('xpl-dynamic-table-cell');
-            cells[0].style.borderBottomLeftRadius = '0.5rem';
-            cells[cells.length - 1].style.borderBottomRightRadius = '0.5rem';
-        }
-    }
     watchSelectedCount(selectedCount, _previousCount) {
         if (selectedCount > -1) {
             this.updateParentCheckbox(selectedCount);
         }
     }
     updateParentCheckbox(selectedCount) {
-        var _a;
-        const childCheckboxes = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
+        const childCheckboxes = this.el?.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
         if (selectedCount === 0) {
             this.parentChecked = false;
             this.parentIndeterminate = false;
         }
-        else if (selectedCount === childCheckboxes.length) {
+        else if (selectedCount === (childCheckboxes?.length ?? 0)) {
             this.parentChecked = true;
             this.parentIndeterminate = false;
         }
@@ -53,10 +41,9 @@ export class HeaderAccordion {
         }
     }
     handleChildCheckboxChange() {
-        var _a;
         if (this.selectedCount === -1) {
-            const childCheckboxes = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
-            const checkedCount = Array.from(childCheckboxes).filter((checkbox) => checkbox.checked).length;
+            const childCheckboxes = this.el?.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
+            const checkedCount = Array.from(childCheckboxes ?? []).filter((checkbox) => checkbox.checked).length;
             this.updateParentCheckbox(checkedCount);
         }
     }
@@ -64,11 +51,8 @@ export class HeaderAccordion {
         const initialCheckoxesValue = this.selectedCount > -1 ? this.selectedCount : 0;
         this.updateParentCheckbox(initialCheckoxesValue);
     }
-    componentWillRender() {
-        this.applyBorderRadiusToLastRow();
-    }
     render() {
-        return (h(Host, { key: '5a1f1085ff8351162fc87a30e939035ec81795fc', class: "xpl-header-accordion" }, h("div", { key: 'dd3e3b0a441b380e28fb898283e93d53d7347866', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: '6550eb878d0f55262beb1ee114ea54801037ad16', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: '80e0b49c5d52866293eac2aef91bbe97d4a8ad96', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: '9a29e3496f29f6179aae2c122e17db09943e2067', name: "title" }), h("xpl-icon", { key: 'c3fddf66a6c41353240adb706da7faf6231caa57', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: 'e1ffea5a3a456b5556d67f42326ec17eb80fe305', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: '7c4e2677463ad9bbd1adcafc95692bdd95a09c0b', name: "content" }))));
+        return (h(Host, { key: '8c5bd1f9f7d6aecc5e06f41e68377bb309053261', class: "xpl-header-accordion" }, h("div", { key: 'ecfe39b4e1cc03dede4b717fbb68f2976bcd34fd', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: '2cedb69a9d43daf53faff359a9d6ee9cab4b455c', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: 'bccadcd6f1c9a498fcd54441d70b95bd33827e60', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: 'a19fdea8dff5d5513f433bbdac6a05d96671308b', name: "title" }), h("xpl-icon", { key: '0191d698f5a41c60043e0da9751bf23f0d1fc7b7', size: 16, icon: "chevron-down", class: this.expanded ? 'rotate' : undefined }))), h("div", { key: '3d0e91436da03f0c1151df754855f365ae72b3f2', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: 'f88cfc51ae9bcdfebf10545085643f87f90e3369', name: "content" }))));
     }
     static get is() { return "xpl-header-accordion"; }
     static get properties() {

package/dist/collection/components/xpl-icon/icons.stories.js

@@ -1,9 +1,10 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
 import apolloIcons from "@xplortech/apollo-icons";
 const iconNames = Object.keys(apolloIcons);
 const allTags = new Set();
 iconNames.forEach((name) => {
-    var _a;
-    const keywords = ((_a = apolloIcons[name]) === null || _a === void 0 ? void 0 : _a.keywords) || [];
+    const icon = apolloIcons[name];
+    const keywords = icon?.keywords || [];
     keywords.forEach((keyword) => allTags.add(keyword));
 });
 const tagToIconsMap = {};
@@ -128,6 +129,24 @@ Icon.parameters = {
         render: Icon(Icon.args),
     },
 };
+const ACCENT_HUES = ['orange', 'purple', 'red', 'yellow', 'gray'];
+export const AccentBackgrounds = () => ACCENT_HUES.map((hue) => `<xpl-icon icon="rocket" size="24" background-color="${hue}"></xpl-icon>`).join('');
+AccentBackgrounds.args = {};
+AccentBackgrounds.tags = ['vrt'];
+AccentBackgrounds.beforeEach = () => {
+    setAutoSnapshotOptions({ enable: true });
+};
+AccentBackgrounds.parameters = {
+    layout: 'centered',
+    docs: {
+        description: {
+            story: 'Icon accent backgrounds for every hue. The subtle per-hue tints use primitive color tokens and retain `.dark` overrides (documented Foundation-token exception — see TECH_DEBT.md).',
+        },
+    },
+    'web-component': {
+        render: AccentBackgrounds(AccentBackgrounds.args),
+    },
+};
 Icons.args = {
     size: 24,
     color: '#201e29',

package/dist/collection/components/xpl-icon/xpl-icon.js

@@ -2,7 +2,6 @@ import { Host, h } from "@stencil/core";
 import apolloIcons from "@xplortech/apollo-icons";
 export class Icon {
     render() {
-        var _a;
         let options = {};
         if (this.size !== undefined) {
             if (typeof this.size === 'number') {
@@ -16,10 +15,10 @@ export class Icon {
         let wrapperClasses = 'xpl-icon__wrapper ';
         if (this.backgroundColor)
             wrapperClasses += `xpl-icon__wrapper--with-background xpl-icon__wrapper--with-background--${this.backgroundColor}`;
-        return (h(Host, { key: '81c2fcdfacbdb3cc34b1bd870a13041a3b3720c8' }, h("figure", { key: 'd8bc04651492fb705fdc6a10cc44a19013da078b', class: wrapperClasses }, h("span", { key: '8c9d18ade708bbf3caf4e1fce9779680ee9f6892', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
+        return (h(Host, { key: '3d37d0047746e887defd4b3b614a0279e661bfd5' }, h("figure", { key: '45f00585d6916dc4a57921b323f6a3c2c14a1837', class: wrapperClasses }, h("span", { key: '01d1f8ff2a2db80c0fdb8078e6308d0e22a8ddef', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
                 width: `${options.width}px`,
                 height: `${options.height}px`,
-            }, innerHTML: (_a = apolloIcons.getIcon(this.icon)) === null || _a === void 0 ? void 0 : _a.toSVG(options) }), h("figcaption", { key: 'd26da1d1df59a9aa414c50bcfb9861d860a6ae65' }, this.icon, " icon"))));
+            }, innerHTML: apolloIcons.getIcon(this.icon)?.toSVG(options) }), h("figcaption", { key: '3979091cfb488cca62b8143d1f597bec480d3ed2' }, this.icon, " icon"))));
     }
     static get is() { return "xpl-icon"; }
     static get originalStyleUrls() {

package/dist/collection/components/xpl-input/input.stories.js

@@ -1,5 +1,10 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
 export default {
     title: 'Components/Input',
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
     parameters: {
         actions: {
             handles: [
@@ -50,6 +55,18 @@ export default {
         },
     },
 };
+const inputArgs = {
+    label: 'Input',
+    description: 'A brief description',
+    disabled: false,
+    error: false,
+    errorMessage: '',
+    pre: '',
+    post: '',
+    type: 'text',
+    defaultCountry: 'US',
+    isInternational: true,
+};
 export const Input = ({ label, description, disabled, error, errorMessage, pre, post, type, defaultCountry, isInternational, }) => {
     let attrs = '';
     if (label)
@@ -72,18 +89,7 @@ export const Input = ({ label, description, disabled, error, errorMessage, pre,
         attrs += ` is-international="false"`;
     return `<xpl-input${attrs} name="input-name" placeholder="Placeholder"></xpl-input>`;
 };
-Input.args = {
-    label: 'Input',
-    description: 'A brief description',
-    disabled: false,
-    error: false,
-    errorMessage: '',
-    pre: '',
-    post: '',
-    type: 'text',
-    defaultCountry: 'US',
-    isInternational: true,
-};
+Input.args = inputArgs;
 Input.argTypes = {
     defaultCountry: {
         control: { type: 'text' },
@@ -137,6 +143,14 @@ Input.parameters = {
         url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=16215-5412&p=f&t=vVY2x58f7oPprNSr-11',
     },
 };
+const multilineArgs = {
+    label: 'Multiline Input',
+    description: 'A brief description',
+    disabled: false,
+    error: false,
+    errorMessage: '',
+    maxCharacterCount: 50,
+};
 export const Multiline = ({ label, description, disabled, error, errorMessage, maxCharacterCount, }) => {
     let attrs = ' multiline';
     if (label)
@@ -151,14 +165,7 @@ export const Multiline = ({ label, description, disabled, error, errorMessage, m
         attrs += ` max-character-count="${maxCharacterCount}"`;
     return `<xpl-input${attrs} name="input-name" placeholder="Placeholder"></xpl-input>`;
 };
-Multiline.args = {
-    label: 'Multiline Input',
-    description: 'A brief description',
-    disabled: false,
-    error: false,
-    errorMessage: '',
-    maxCharacterCount: 50,
-};
+Multiline.args = multilineArgs;
 Multiline.parameters = {
     layout: 'centered',
     'web-component': {
@@ -198,6 +205,19 @@ reflect the additional markup and interactivity.`);
         })(Multiline.args),
     },
 };
+const datepickerArgs = {
+    mode: 'single',
+    label: 'Datepicker',
+    dateFormat: 'm/d/Y',
+    description: 'A brief description',
+    disabled: false,
+    error: false,
+    errorMessage: '',
+    min: '01/01/2000',
+    max: '12/31/2099',
+    required: false,
+    type: 'date',
+};
 export const Datepicker = ({ label, dateFormat, description, disabled, error, errorMessage, min, mode, max, required, type, }) => {
     let attrs = ` type="${type}"`;
     if (label)
@@ -234,19 +254,7 @@ Datepicker.argTypes = {
         },
     },
 };
-Datepicker.args = {
-    mode: 'single',
-    label: 'Datepicker',
-    dateFormat: 'm/d/Y',
-    description: 'A brief description',
-    disabled: false,
-    error: false,
-    errorMessage: '',
-    min: '01/01/2000',
-    max: '12/31/2099',
-    required: false,
-    type: 'date',
-};
+Datepicker.args = datepickerArgs;
 Datepicker.parameters = {
     layout: 'centered',
     'web-component': {
@@ -283,6 +291,22 @@ Datepicker.parameters = {
         })(Datepicker.args),
     },
 };
+const timepickerArgs = {
+    label: 'Timepicker',
+    description: 'A brief description',
+    disabled: false,
+    error: false,
+    errorMessage: 'This field is required.',
+    required: true,
+    readonly: false,
+    value: '15:30',
+    step: 30,
+    timeFormat: '12h',
+    allowCustomOption: false,
+    min: '10:00',
+    max: '18:00',
+    type: 'time',
+};
 export const Timepicker = ({ label, description, disabled, error, errorMessage, required, readonly, value, step, timeFormat, allowCustomOption, min, max, type, }) => {
     let attrs = '';
     if (label)
@@ -313,22 +337,7 @@ export const Timepicker = ({ label, description, disabled, error, errorMessage,
         attrs += ` type="${type}"`;
     return `<xpl-input ${attrs} name="input-name"></xpl-input>`;
 };
-Timepicker.args = {
-    label: 'Timepicker',
-    description: 'A brief description',
-    disabled: false,
-    error: false,
-    errorMessage: 'This field is required.',
-    required: true,
-    readonly: false,
-    value: '15:30',
-    step: 30,
-    timeFormat: '12h',
-    allowCustomOption: false,
-    min: '10:00',
-    max: '18:00',
-    type: 'time',
-};
+Timepicker.args = timepickerArgs;
 Timepicker.argTypes = {
     timeFormat: {
         control: { type: 'select' },
@@ -395,6 +404,15 @@ Timepicker.parameters = {
         })(Timepicker.args),
     },
 };
+const passwordArgs = {
+    label: 'Password',
+    description: 'Enter a password:',
+    disabled: false,
+    error: false,
+    errorMessage: '',
+    pre: '',
+    post: '',
+};
 export const Password = ({ label, description, disabled, error, errorMessage, pre, post, }) => {
     let attrs = '';
     if (label)
@@ -411,13 +429,7 @@ export const Password = ({ label, description, disabled, error, errorMessage, pr
         attrs += ` post="${post}"`;
     return `<xpl-input type="password"${attrs} name="input-name"></xpl-input>`;
 };
-Password.args = {
-    label: 'Password',
-    description: 'Enter a password:',
-    disabled: false,
-    error: false,
-    errorMessage: '',
-};
+Password.args = passwordArgs;
 Password.parameters = {
     layout: 'centered',
     'web-component': {
@@ -427,6 +439,20 @@ Password.parameters = {
         render: ((_) => `Sorry, the Password Input only supports web component usage.`)(Password.args),
     },
 };
+const fileArgs = {
+    accept: 'image/png, image/jpeg',
+    multiple: false,
+    hideTriggerOnSelect: false,
+    hideFileNames: false,
+    hideAcceptText: false,
+    label: 'Upload File',
+    triggerContent: `<xpl-button slot="trigger"><xpl-icon icon="upload" size="24"></xpl-icon>Upload File</xpl-button>`,
+    description: '',
+    disabled: false,
+    error: false,
+    errorMessage: 'This field is required.',
+    type: 'file',
+};
 export const File = ({ accept, multiple, hideTriggerOnSelect, hideFileNames, hideAcceptText, label, triggerContent, description, disabled, error, errorMessage, }) => {
     const renderFileUpload = () => `
         <xpl-input
@@ -447,20 +473,7 @@ export const File = ({ accept, multiple, hideTriggerOnSelect, hideFileNames, hid
     `;
     return renderFileUpload();
 };
-File.args = {
-    accept: 'image/png, image/jpeg',
-    multiple: false,
-    hideTriggerOnSelect: false,
-    hideFileNames: false,
-    hideAcceptText: false,
-    label: 'Upload File',
-    triggerContent: `<xpl-button slot="trigger"><xpl-icon icon="upload" size="24"></xpl-icon>Upload File</xpl-button>`,
-    description: '',
-    disabled: false,
-    error: false,
-    errorMessage: 'This field is required.',
-    type: 'file',
-};
+File.args = fileArgs;
 File.parameters = {
     layout: 'centered',
     'web-component': {
@@ -492,6 +505,15 @@ File.parameters = {
         })(File.args),
     },
 };
+const colorArgs = {
+    label: 'Select Color',
+    placeholder: 'Choose color',
+    value: '#ffff00',
+    disabled: false,
+    required: false,
+    requiredErrorMessage: 'This field is required.',
+    hideEyeDropper: false,
+};
 export const Color = ({ value, label, placeholder, disabled, required, requiredErrorMessage, hideEyeDropper, }) => {
     const renderFileUpload = () => `
         <xpl-input
@@ -508,15 +530,7 @@ export const Color = ({ value, label, placeholder, disabled, required, requiredE
     `;
     return renderFileUpload();
 };
-Color.args = {
-    label: 'Select Color',
-    placeholder: 'Choose color',
-    value: '#ffff00',
-    disabled: false,
-    required: false,
-    requiredErrorMessage: 'This field is required.',
-    hideEyeDropper: false,
-};
+Color.args = colorArgs;
 Color.parameters = {
     layout: 'centered',
     'web-component': {
@@ -562,6 +576,17 @@ Color.parameters = {
         })(Color.args),
     },
 };
+const phoneArgs = {
+    defaultCountry: 'US',
+    description: 'Enter your phone number with country code',
+    disabled: false,
+    error: false,
+    errorMessage: '',
+    isInternational: true,
+    label: 'Phone number',
+    placeholder: 'Enter number',
+    value: '+0000000000',
+};
 export const Phone = ({ label, description, placeholder, disabled, defaultCountry, isInternational, value, }) => {
     let attrs = ` type="phone" label="${label}" name="phone" placeholder="${placeholder}"`;
     if (description)
@@ -576,17 +601,7 @@ export const Phone = ({ label, description, placeholder, disabled, defaultCountr
         attrs += ` value="${value}"`;
     return `<xpl-input${attrs}></xpl-input>`;
 };
-Phone.args = {
-    defaultCountry: 'US',
-    description: 'Enter your phone number with country code',
-    disabled: false,
-    error: false,
-    errorMessage: '',
-    isInternational: true,
-    label: 'Phone number',
-    placeholder: 'Enter number',
-    value: '+0000000000',
-};
+Phone.args = phoneArgs;
 Phone.argTypes = {
     isInternational: {
         control: { type: 'boolean' },
@@ -610,6 +625,20 @@ Phone.parameters = {
                 </div>`)(),
     },
 };
+const searchArgs = {
+    ariaLabel: '',
+    autocomplete: '',
+    description: '',
+    disabled: false,
+    error: false,
+    errorMessage: '',
+    label: '',
+    readonly: false,
+    name: '',
+    placeholder: 'Search…',
+    shape: 'rounded',
+    value: '',
+};
 export const Search = ({ label, description, disabled, error, readonly, errorMessage, placeholder, value, name, shape, autocomplete, ariaLabel, }) => {
     let attrs = ' type="search"';
     if (label !== undefined && label !== '')
@@ -636,20 +665,7 @@ export const Search = ({ label, description, disabled, error, readonly, errorMes
         attrs += ` readonly`;
     return `<xpl-input${attrs}></xpl-input>`;
 };
-Search.args = {
-    ariaLabel: '',
-    autocomplete: '',
-    description: '',
-    disabled: false,
-    error: false,
-    errorMessage: '',
-    label: '',
-    readonly: false,
-    name: '',
-    placeholder: 'Search…',
-    shape: 'rounded',
-    value: '',
-};
+Search.args = searchArgs;
 Search.argTypes = {
     ariaLabel: {
         control: { type: 'text' },

package/dist/collection/components/xpl-input/xpl-input-color/color-utils.js

@@ -110,15 +110,17 @@ export const rgbToHsv = (r, g, b, fixedHue) => {
     const s = max === 0 ? 0 : delta / max;
     const v = max;
     return {
-        h: fixedHue !== null && fixedHue !== void 0 ? fixedHue : h,
+        h: fixedHue ?? h,
         s,
         v,
     };
 };
-export const hexToRgb = (hex) => hex ? hex.match(/\w\w/g).map((x) => parseInt(x, 16)) : [0, 0, 0];
+export const hexToRgb = (hex) => {
+    const pairs = hex?.match(/\w\w/g);
+    return pairs ? pairs.map((x) => parseInt(x, 16)) : [0, 0, 0];
+};
 export const rgbToHex = (r, g, b) => [r, g, b].map((x) => x.toString(16).padStart(2, '0')).join('');
 export const stringToObjectColor = (input) => {
-    var _a, _b;
     if (input.startsWith('#')) {
         if (!/^#([a-fA-F\d]{6})$/.test(input)) {
             throw new Error('Only 6-digit hex format supported (e.g. #aabbcc)');
@@ -130,7 +132,7 @@ export const stringToObjectColor = (input) => {
         return { hex, r, g, b, a: 1 };
     }
     if (input.startsWith('rgba') || input.startsWith('rgb')) {
-        const match = (_a = input.match(/[\d.]+/g)) === null || _a === void 0 ? void 0 : _a.map(Number);
+        const match = input.match(/[\d.]+/g)?.map(Number);
         if (!match || match.length < 3) {
             throw new Error('Invalid rgba/rgb format');
         }
@@ -140,13 +142,17 @@ export const stringToObjectColor = (input) => {
         return { hex: hex.toLowerCase(), r, g, b, a };
     }
     if (input.startsWith('hsla') || input.startsWith('hsl')) {
-        const match = (_b = input.match(/[\d.]+/g)) === null || _b === void 0 ? void 0 : _b.map(Number);
+        const match = input.match(/[\d.]+/g)?.map(Number);
         if (!match || match.length < 3) {
             throw new Error('Invalid hsla/hsl format');
         }
         const [hue, saturation, lightness, alpha = 1] = match;
         const rgba = hslaToRgba(hue, saturation, lightness, alpha);
-        const [r, g, b] = rgba.match(/[\d.]+/g).map(Number);
+        const rgbaParts = rgba.match(/[\d.]+/g)?.map(Number);
+        if (!rgbaParts || rgbaParts.length < 3) {
+            throw new Error('Invalid hsla/hsl format');
+        }
+        const [r, g, b] = rgbaParts;
         const hex = rgbToHex(r, g, b);
         return { hex: hex.toLowerCase(), r, g, b, a: alpha };
     }