@xplortech/apollo-core 2.5.0 → 2.7.0

package/dist/collection/components/xpl-progress-indicator/xpl-progress-indicator.js

@@ -0,0 +1,171 @@
+import { Host, h } from "@stencil/core";
+export class ProgressIndicator {
+    constructor() {
+        this.currentStep = 0;
+        this.layout = 'horizontal';
+        this.showLabels = true;
+        this.showNumbers = true;
+    }
+    validateCurrentStep() {
+        if (!this.steps || this.steps.length === 0)
+            return;
+        const max = this.steps.length;
+        if (this.currentStep < 0) {
+            this.currentStep = 0;
+        }
+        else if (this.currentStep > max) {
+            this.currentStep = max;
+        }
+    }
+    renderStepContent(index, isFinished) {
+        if (isFinished) {
+            return (h("xpl-icon", { icon: "check-2", size: 20, class: "xpl-progress-indicator-step-checkmark" }));
+        }
+        if (!this.showNumbers) {
+            return h("span", { class: "xpl-progress-indicator-step-dot" });
+        }
+        return h("span", { class: "xpl-progress-indicator-step-number" }, index + 1);
+    }
+    renderStep(step, index) {
+        const isFinished = this.currentStep > index;
+        const isActive = this.currentStep === index;
+        const isHorizontal = this.layout === 'horizontal';
+        const circle = (h("div", { class: "xpl-progress-indicator-step-circle" }, this.renderStepContent(index, isFinished)));
+        const label = this.showLabels && h("div", { class: "xpl-progress-indicator-step-text" }, step);
+        const content = isHorizontal ? (h("div", { class: "xpl-progress-indicator-step-content" }, circle, label)) : ([circle, label]);
+        return (h("div", { class: {
+                'xpl-progress-indicator-step': true,
+                'xpl-progress-indicator-step-active': isActive,
+                'xpl-progress-indicator-step-finished': isFinished,
+            }, role: "listitem", "aria-label": `${step}, ${isFinished ? 'completed' : isActive ? 'current' : 'upcoming'}`, "aria-current": isActive ? 'step' : undefined }, content));
+    }
+    render() {
+        const steps = this.steps || [];
+        const hostClasses = {
+            'xpl-progress-indicator': true,
+            'xpl-progress-indicator-horizontal': this.layout === 'horizontal',
+            'xpl-progress-indicator-vertical': this.layout === 'vertical',
+            'xpl-progress-indicator-no-labels': !this.showLabels,
+        };
+        const totalSteps = steps.length;
+        const allComplete = this.currentStep >= totalSteps;
+        const currentStepNumber = Math.min(this.currentStep + 1, totalSteps);
+        const ariaLabel = totalSteps > 0
+            ? allComplete
+                ? `Progress: all ${totalSteps} ${totalSteps === 1 ? 'step' : 'steps'} complete`
+                : `Progress: step ${currentStepNumber} of ${totalSteps}`
+            : 'Progress';
+        return (h(Host, { key: '44ac526c3954f688007573bf53c771b30518b9c7', class: hostClasses, role: "group", "aria-label": ariaLabel }, h("div", { key: '1ab86e3777ded2737ed5dd3c5ec759211a1087a7', class: "xpl-progress-indicator-container", role: "list" }, steps.map((step, index) => this.renderStep(step, index)))));
+    }
+    static get is() { return "xpl-progress-indicator"; }
+    static get properties() {
+        return {
+            "currentStep": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current step index. Steps with index < currentStep are \"finished\",\nthe step at currentStep is \"active\", and steps beyond are \"waiting\".\nSet to steps.length to mark all steps as finished.\nAutomatically clamped to [0, steps.length]."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-step",
+                "defaultValue": "0"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout direction - 'horizontal' or 'vertical'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "layout",
+                "defaultValue": "'horizontal'"
+            },
+            "showLabels": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show step labels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-labels",
+                "defaultValue": "true"
+            },
+            "showNumbers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show step numbers inside circles"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-numbers",
+                "defaultValue": "true"
+            },
+            "steps": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The steps is an array of the steps name."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "steps",
+                "methodName": "validateCurrentStep"
+            }, {
+                "propName": "currentStep",
+                "methodName": "validateCurrentStep"
+            }];
+    }
+}

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

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { v4 as uuid } from "uuid";
-export class XplRadio {
+export class Radio {
     constructor() {
         this.id = uuid();
         this.onChange = (event) => {
@@ -14,14 +14,14 @@ export class XplRadio {
         };
     }
     render() {
-        return (h(Host, { key: 'cc375ac47add5a4fddc8744186d1600431cb998d', class: {
+        return (h(Host, { key: 'a96ab55137fedbfe00d68b660bd2d935208dc6c6', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: this.styled,
                 disabled: this.disabled,
-            } }, h("input", { key: 'ccc9a14ec86cf5d455558298f367dd1eb2835399', class: "xpl-radio", type: "radio", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), h("label", { key: '5c0661fded4424d6b758ef55953cfde8da1f2af5', class: {
+            } }, h("input", { key: 'ee385d0976d065fee4f72f75faea0ddbe33c0e81', class: "xpl-radio", type: "radio", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), h("label", { key: '04e74e08a20b229f2d45b8fce80fa65ab3bf0954', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, h("slot", { key: '9e203d6010f049c74294f543c75b091c129a323d' }), this.description && (h("small", { key: '15447fa65dff82fda1cb7981bbf3160b7f526c53', class: {
+            }, htmlFor: this.id }, h("slot", { key: 'b9fe3e13de64776a9cc1afcd8f7c10f84be8c8bb' }), this.description && (h("small", { key: '6ecd217342fbfa9bb5022bb1298683ff87af1713', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
             } }, this.description)))));

package/dist/collection/components/xpl-secondary-nav/xpl-secondary-nav.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
-export class XplSecondaryNav {
+export class SecondaryNav {
     render() {
-        return (h(Host, { key: '86273edf300aa07f9d95d602eba079a3e5585d63', class: "xpl-secondary-nav" }, h("nav", { key: '1756c028fe605e00683b6fa07e7235a6e18c1f68', "aria-label": "Secondary Nav" }, h("slot", { key: '74d5e209c31456877c40267d16d4020faac7ca33' }))));
+        return (h(Host, { key: 'bf9cbd4351297a28d6d98d3bf1e0612fac1f5136', class: "xpl-secondary-nav" }, h("nav", { key: '764de50287c88f53f19005d50b177e85f71f7f43', "aria-label": "Secondary Nav" }, h("slot", { key: 'd7fe629382a06f62dde9f08db082854e986ba406' }))));
     }
     static get is() { return "xpl-secondary-nav"; }
 }

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

@@ -12,7 +12,7 @@ function getDisplayValue(choice) {
 function flattenChoices(choices) {
     return choices.reduce((acc, curr) => [...acc, ...(curr.groupName ? curr.options : [curr])], []);
 }
-export class XplSelect {
+export class Select {
     constructor() {
         this.choices = [];
         this.selectIcon = 'chevron-down';
@@ -222,21 +222,21 @@ export class XplSelect {
             this.truncate &&
             !this.customDisplayValue;
         const truncatedText = `+ ${Math.abs(this.choicesState.filter((a) => a.isSelected).length - this.visibleChoices)} more`;
-        return (h(Host, { key: '90390e373035b7915dd5ca7c6bcbb5269b3059ea', class: {
+        return (h(Host, { key: 'c02b59988eee5073103958a24061c46aa286ea50', class: {
                 'xpl-select': true,
                 'xpl-select--disabled': this.disabled,
                 'xpl-select--no-truncate': !this.truncate,
                 [(_c = this.classNames) !== null && _c !== void 0 ? _c : '']: !!this.classNames,
             }, onKeyDown: this.handleTabKeyDown, ref: (el) => {
                 this.container = el;
-            } }, this.renderLabel(), h("div", { key: '399f1b864db799c42fa973ae3907e22c2cd95098', class: {
+            } }, this.renderLabel(), h("div", { key: '189c9d2e3370876b6289ee16ee1b8927e5bfc0ee', class: {
                 'xpl-input': true,
                 'xpl-input--disabled': this.disabled,
                 'xpl-input--error': ((_d = this.error) === null || _d === void 0 ? void 0 : _d.length) >= 0,
-            } }, h("div", { key: '4e9842f8a6ff0916af58dd4a6bc9dbb330d79a29', class: "xpl-input-wrapper" }, h("button", { key: 'a5719a38fdd7b3819cb1d68f887260f3eaf41c5e', class: "xpl-select__trigger", disabled: this.disabled, id: this.id, onKeyDown: this.handleTabKeyDown, onClick: (e) => {
+            } }, h("div", { key: 'a8df7de958be97becd2a9f6a2db761702e2066c3', class: "xpl-input-wrapper" }, h("button", { key: 'f00119d930d49b241d5160bfe7a70ee56ac598d8', class: "xpl-select__trigger", disabled: this.disabled, id: this.id, onKeyDown: this.handleTabKeyDown, onClick: (e) => {
                 e.preventDefault();
                 this.handleDropdownTrigger();
-            }, type: "button" }, h("div", { key: '7c0d8f94dc5b6afe38b1ab0b4a1cb1572255d640', class: {
+            }, type: "button" }, h("div", { key: '141643ae007e8f5827d4aeb8fdd2a95b14b003ff', class: {
                 'xpl-select-value': true,
                 'xpl-select-value--active': this.mode === 'multi' && this.value.length > 0,
                 'has-value': this.value.length > 0,
@@ -256,7 +256,7 @@ export class XplSelect {
                 return this.renderSelectedTags();
             }
             return this.placeholder;
-        })(), isTextTruncated && truncatedText), h("xpl-icon", { key: '8002d17b99c8b53d47ed3a3139c4a18bcce7baba', class: "xpl-select__chevron-down", icon: this.selectIcon }))), !this.disabled && (h("xpl-dropdown", { key: '87bbe302cbf364c6e3592699e93eb03523e16833', ref: (el) => {
+        })(), isTextTruncated && truncatedText), h("xpl-icon", { key: '05f6ba660e21584017715d3afc14d7bd8b8d536a', class: "xpl-select__chevron-down", icon: this.selectIcon }))), !this.disabled && (h("xpl-dropdown", { key: '9a452cf4c62cca5ba4279ddd8da09c9d24797dcf', ref: (el) => {
                 this.dropdown = el;
             }, isOpen: this.dropdownOpenState, options: this.choicesState, selectedValues: this.selectedValues, mode: this.mode, triggerId: this.id, update: (_e, { component }) => {
                 const { options } = component;
@@ -265,7 +265,7 @@ export class XplSelect {
                 }
             }, onIsOpenChange: (e) => {
                 this.dropdownOpenState = e.detail;
-            }, onWheel: this.handleDropdownScroll, anchorToTrigger: true })), this.renderError()), h("input", { key: '3ef234a4953e9133c3817ba14d0336c0cb8de8f9', type: "hidden", name: this.name, value: this.value })));
+            }, onWheel: this.handleDropdownScroll, anchorToTrigger: true })), this.renderError()), h("input", { key: 'd9d6cbc69fc5fc688b2dda6ea1ef99435d90fc94', type: "hidden", name: this.name, value: this.value })));
     }
     static get is() { return "xpl-select"; }
     static get properties() {