xv-webcomponents 0.1.26 → 0.1.28

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-overflow-menu-item.js","sourceRoot":"","sources":["../../../../src/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACtF,OAAO,EAAqB,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAOlE,MAAM,OAAO,kBAAkB;IAL/B;QAM2B,aAAQ,GAAY,KAAK,CAAC;QAE3C,YAAO,GAAwB,mBAAmB,CAAC,OAAO,CAAC;KAqBpE;IAjBC,WAAW,CAAC,KAAmB;QAC7B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACpD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Listen, Event, EventEmitter } from '@stencil/core';\nimport { OverflowMenuEvent, OverflowMenuVariant } from '../_vars';\n\n@Component({\n  tag: 'xv-overflow-menu-v2-item',\n  styleUrl: 'xv-overflow-menu-item.scss',\n  shadow: true,\n})\nexport class XvOverflowMenuItem {\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) value: OverflowMenuEvent['value'];\n  @Prop() variant: OverflowMenuVariant = OverflowMenuVariant.DEFAULT;\n  @Event() itemClick: EventEmitter<OverflowMenuEvent>;\n\n  @Listen('click')\n  handleClick(event: PointerEvent) {\n    if (this.disabled) return;\n\n    this.itemClick.emit({ event, value: this.value });\n  }\n\n  render() {\n    return (\n      <Host\n        class=\"xv-overflow-menu-item\"\n        role=\"menuitem\"\n        disabled={this.disabled}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.css

@@ -0,0 +1,102 @@
+:host {
+  --overflow-menu-size: 40px;
+  --overflow-menu-item-padding: 11px 16px;
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+}
+:host .btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--overflow-menu-size);
+  height: var(--overflow-menu-size);
+  background-color: transparent;
+  border: 1px solid transparent;
+  transition: 300ms ease-in-out color, 300ms ease-in-out background-color, 200ms ease box-shadow;
+  font-size: calc(var(--overflow-menu-size) / 2);
+  color: var(--icon-primary);
+  border-radius: 5%;
+  margin: 0;
+  padding: 0;
+}
+:host .btn:hover {
+  cursor: pointer;
+  color: var(--link-primary-hover);
+  background-color: var(--background-hover);
+}
+:host .btn:active {
+  background-color: var(--background-active);
+  color: var(--icon-disabled);
+}
+:host .btn:disabled {
+  background-color: transparent;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+:host .list {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+  background-color: var(--layer-01);
+  position: absolute;
+  top: 100%;
+  left: 0;
+  max-height: 0;
+  overflow: hidden;
+  border-radius: 3px;
+  transition: 200ms ease-in-out max-height, 100ms ease box-shadow;
+  min-width: 128px;
+  max-width: 50vw;
+  width: max-content;
+}
+:host .list ::slotted(xv-overflow-menu-v2-item) {
+  padding: var(--overflow-menu-item-padding);
+}
+:host .list.position-right {
+  left: initial;
+  right: 0;
+  border-top-right-radius: 0;
+}
+:host .list.position-left {
+  border-top-left-radius: 0;
+}
+
+:host([size=xs]) {
+  --overflow-menu-item-padding: 4px 16px;
+  --overflow-menu-size: 24px;
+}
+
+:host([size=sm]) {
+  --overflow-menu-size: 32px;
+  --overflow-menu-item-padding: 7px 16px;
+}
+
+:host([size=md]) {
+  --overflow-menu-size: 40px;
+  --overflow-menu-item-padding: 11px 16px;
+}
+
+:host([size=lg]) {
+  --overflow-menu-size: 48px;
+  --overflow-menu-item-padding: 16px;
+}
+
+:host([size=xl]) {
+  --overflow-menu-size: 56px;
+  --overflow-menu-item-padding: 16px;
+}
+
+:host([open]) .btn {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  background-color: var(--layer-01);
+  box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.1);
+  z-index: 1;
+}
+:host([open]) .list {
+  max-height: 500px;
+  z-index: 2;
+  box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.1);
+}

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.js

@@ -0,0 +1,202 @@
+import { h, Host } from "@stencil/core";
+import { SIZE_VAR } from "../../types/enum";
+export class XvOverflowMenu {
+    constructor() {
+        this.open = false;
+        this.disabled = false;
+        this.position = 'left';
+        this.size = SIZE_VAR.MD;
+        this.handleClose = () => {
+            if (this.open)
+                this.open = false;
+        };
+        this.removeListeners = () => {
+            this.el.removeEventListener('itemClick', this.handleSelectItem);
+            document.body.removeEventListener('click', this.handleClick);
+        };
+        this.handleClick = (ev) => {
+            if (!this.open || this.el.contains(ev.target))
+                return;
+            ev.stopPropagation();
+            ev.preventDefault();
+            this.handleClose();
+        };
+        this.onOpenToggle = () => {
+            this.open = !this.open;
+        };
+        this.handleSelectItem = ({ detail }) => {
+            this.selectItem.emit(detail);
+            this.handleClose();
+        };
+    }
+    handleKeyDown(ev) {
+        if (ev.key === 'Escape') {
+            ev.stopPropagation();
+            ev.preventDefault();
+            this.handleClose();
+        }
+    }
+    openChangeHandle() {
+        if (this.disabled)
+            return;
+        if (this.open) {
+            this.el.addEventListener('itemClick', this.handleSelectItem);
+            document.body.addEventListener('click', this.handleClick);
+        }
+        else {
+            this.removeListeners();
+        }
+    }
+    render() {
+        return (h(Host, { key: '38ab189c178b27de9de8cbd0174bc96b0beea5e6', class: "xv-overflow-menu", size: this.size, role: "menu", tabindex: -1 }, h("button", { key: '62a4ca90c866339ae4efeeb9579c5077ffed4f64', class: { btn: true, open: this.open }, onClick: this.onOpenToggle, disabled: this.disabled }, h("svg", { key: 'b46f8ca4e1073a1cca0c4c22c6e4d29f6f45b24c', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, h("path", { key: '8a9f8d9b2e717a997d07ad3fb77c2ff9afbf2ac6', d: "M64 368a48 48 0 1 0 0 96 48 48 0 1 0 0-96zm0-160a48 48 0 1 0 0 96 48 48 0 1 0 0-96zM112 96A48 48 0 1 0 16 96a48 48 0 1 0 96 0z" }))), h("div", { key: 'cee611c895bb7386fe154b033c3c0da53e1ee493', class: { list: true, open: this.open, [`position-${this.position}`]: true } }, h("slot", { key: '9caf0adb12c16e7937df82c6bac4385be883ea22' }))));
+    }
+    componentDidLoad() {
+        this.openChangeHandle();
+    }
+    disconnectedCallback() {
+        this.removeListeners();
+    }
+    static get is() { return "xv-overflow-menu-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-overflow-menu.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-overflow-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "position",
+                "reflect": false,
+                "defaultValue": "'left'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SIZE_VAR",
+                    "resolved": "SIZE_VAR.LG | SIZE_VAR.MD | SIZE_VAR.SM | SIZE_VAR.XL | SIZE_VAR.XS",
+                    "references": {
+                        "SIZE_VAR": {
+                            "location": "import",
+                            "path": "../../types/enum",
+                            "id": "src/types/enum.ts::SIZE_VAR"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "SIZE_VAR.MD"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "selectItem",
+                "name": "selectItem",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "OverflowMenuEvent",
+                    "resolved": "OverflowMenuEvent",
+                    "references": {
+                        "OverflowMenuEvent": {
+                            "location": "import",
+                            "path": "./_vars",
+                            "id": "src/components/xv-overflow-menu/_vars.ts::OverflowMenuEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "openChangeHandle"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=xv-overflow-menu.js.map

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-overflow-menu.js","sourceRoot":"","sources":["../../../src/components/xv-overflow-menu/xv-overflow-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Listen, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\nimport { OverflowMenuEvent } from './_vars';\n\n@Component({\n  tag: 'xv-overflow-menu-v2',\n  styleUrl: 'xv-overflow-menu.scss',\n  shadow: true,\n})\nexport class XvOverflowMenu {\n  @Element() el: HTMLElement;\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop() position: 'left' | 'right' = 'left';\n  @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n  @Event() selectItem: EventEmitter<OverflowMenuEvent>;\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Escape'){\n      ev.stopPropagation();\n      ev.preventDefault();\n      this.handleClose();\n    }\n  }\n\n  @Watch('open')\n  openChangeHandle() {\n    if (this.disabled) return;\n\n    if (this.open) {\n      this.el.addEventListener('itemClick', this.handleSelectItem);\n      document.body.addEventListener('click', this.handleClick);\n    } else {\n      this.removeListeners();\n    }\n  }\n\n  private handleClose = () => {\n    if (this.open) this.open = false;\n  }\n\n  private removeListeners = () => {\n    this.el.removeEventListener('itemClick', this.handleSelectItem);\n    document.body.removeEventListener('click', this.handleClick);\n  }\n\n  private handleClick = (ev: MouseEvent) => {\n    if (!this.open || this.el.contains(ev.target as Node)) return;\n\n    ev.stopPropagation();\n    ev.preventDefault();\n    this.handleClose()\n  }\n\n  private onOpenToggle = () => {\n    this.open = !this.open;\n  };\n\n  private handleSelectItem = ({ detail }: CustomEvent<OverflowMenuEvent>) => {\n    this.selectItem.emit(detail);\n    this.handleClose();\n  }\n\n  render() {\n    return (\n      <Host\n        class=\"xv-overflow-menu\"\n        size={this.size}\n        role=\"menu\"\n        tabindex={-1}\n      >\n        <button class={{ btn: true, open: this.open }} onClick={this.onOpenToggle} disabled={this.disabled}>\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 128 512\">\n            <path\n              d=\"M64 368a48 48 0 1 0 0 96 48 48 0 1 0 0-96zm0-160a48 48 0 1 0 0 96 48 48 0 1 0 0-96zM112 96A48 48 0 1 0 16 96a48 48 0 1 0 96 0z\" />\n          </svg>\n        </button>\n        <div class={{list: true, open: this.open, [`position-${this.position}`]: true }}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    this.openChangeHandle();\n  }\n\n  disconnectedCallback() {\n    this.removeListeners();\n  }\n}\n"]}

package/dist/collection/components/xv-progress-indicator/_vars.js

@@ -0,0 +1,12 @@
+export var PROGRESS_VARIANTS;
+(function (PROGRESS_VARIANTS) {
+    PROGRESS_VARIANTS["DEFAULT"] = "";
+    PROGRESS_VARIANTS["HORIZONTAL"] = "horizontal";
+})(PROGRESS_VARIANTS || (PROGRESS_VARIANTS = {}));
+export var PROGRESS_ITEM_STATUS;
+(function (PROGRESS_ITEM_STATUS) {
+    PROGRESS_ITEM_STATUS["DONE"] = "done";
+    PROGRESS_ITEM_STATUS["NO_STARTED"] = "not_started";
+    PROGRESS_ITEM_STATUS["IN_PROGRESS"] = "in_progress";
+})(PROGRESS_ITEM_STATUS || (PROGRESS_ITEM_STATUS = {}));
+//# sourceMappingURL=_vars.js.map

package/dist/collection/components/xv-progress-indicator/_vars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_vars.js","sourceRoot":"","sources":["../../../src/components/xv-progress-indicator/_vars.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IAC3B,iCAAY,CAAA;IACZ,8CAAyB,CAAA;AAC3B,CAAC,EAHW,iBAAiB,KAAjB,iBAAiB,QAG5B;AAED,MAAM,CAAN,IAAY,oBAIX;AAJD,WAAY,oBAAoB;IAC9B,qCAAa,CAAA;IACb,kDAA0B,CAAA;IAC1B,mDAA2B,CAAA;AAC7B,CAAC,EAJW,oBAAoB,KAApB,oBAAoB,QAI/B","sourcesContent":["export enum PROGRESS_VARIANTS {\n  DEFAULT = '',\n  HORIZONTAL = 'horizontal'\n}\n\nexport enum PROGRESS_ITEM_STATUS {\n  DONE = 'done',\n  NO_STARTED = 'not_started',\n  IN_PROGRESS = 'in_progress',\n}\n"]}

package/dist/collection/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.css

@@ -0,0 +1,96 @@
+:host(.xv-progress-indicator-item) {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding: 10px 16px;
+  row-gap: var(--gap-sm, 10px);
+}
+:host(.xv-progress-indicator-item):before {
+  width: 100%;
+}
+:host(.xv-progress-indicator-item):before, :host(.xv-progress-indicator-item) .line {
+  content: "";
+  z-index: 1;
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  color: inherit;
+  background-color: var(--border-subtle-01, grey);
+}
+:host(.xv-progress-indicator-item) .line {
+  width: 0;
+  color: inherit;
+  transition: width 250ms ease;
+  background-color: var(--background-brand, currentColor);
+}
+:host(.xv-progress-indicator-item) .icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--progress-indicator-icon-size, 22px);
+  height: var(--progress-indicator-icon-size, 22px);
+  min-width: var(--progress-indicator-icon-size, 22px);
+  min-height: var(--progress-indicator-icon-size, 22px);
+  max-width: var(--progress-indicator-icon-size, 22px);
+  max-height: var(--progress-indicator-icon-size, 22px);
+  border: 2px dashed var(--icon-primary, currentColor);
+  border-radius: 50%;
+}
+:host(.xv-progress-indicator-item) .icon svg {
+  width: calc(var(--progress-indicator-icon-size, 22px) * 0.637);
+  height: calc(var(--progress-indicator-icon-size, 22px) * 0.637);
+  opacity: 0;
+  transition: opacity 500ms ease-in-out;
+}
+:host(.xv-progress-indicator-item) .label {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: var(--progress-indicator-font-size, 14px);
+  line-height: 1.1;
+  letter-spacing: 0.16px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+:host([status=done]) .icon,
+:host([status=in_progress]) .icon {
+  border-color: var(--background-brand, currentColor);
+  color: var(--background-brand, inherit);
+  border-style: solid;
+}
+:host([status=done]) .icon svg,
+:host([status=in_progress]) .icon svg {
+  opacity: 1;
+}
+:host([status=done]) .line,
+:host([status=in_progress]) .line {
+  width: 100%;
+  background-color: var(--background-brand, currentColor);
+}
+
+:host([status=in_progress]) .icon {
+  border-color: var(--background-brand, currentColor);
+  color: var(--background-brand, inherit);
+  border-style: solid;
+  position: relative;
+}
+:host([status=in_progress]) .icon:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50%;
+  height: 100%;
+  background-color: var(--background-brand, currentColor);
+  border-top-left-radius: 50% 100%;
+  border-bottom-left-radius: 50% 100%;
+}
+:host([status=in_progress]) .icon svg {
+  opacity: 0;
+}

package/dist/collection/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.js

@@ -0,0 +1,54 @@
+import { Host, h } from "@stencil/core";
+import { PROGRESS_ITEM_STATUS } from "../_vars";
+export class XvProgressIndicatorItem {
+    constructor() {
+        this.status = PROGRESS_ITEM_STATUS.NO_STARTED;
+    }
+    render() {
+        return (h(Host, { key: 'b1ab45057fee17bc449648e1c127239ada00f9c5', status: this.status, class: { 'xv-progress-indicator-item': true } }, h("span", { key: 'b933ea361bf3f97c4d50a08e15c6bb57c7ef1aaf', class: "line" }), h("span", { key: '267e7a12e4536b7b8ac9a102ebbbf4f072cb6302', class: "icon" }, h("svg", { key: '21694dc47b94fbbbbe3f6f864d8c500b6e9b0310', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, h("path", { key: '03e39da95382ddc05bbd41d9768f30cdf0d3de6e', fill: "currentColor", d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }))), h("p", { key: '12399f0c9a664804e014db0e7be6b3c117a560ef', class: "label" }, h("slot", { key: 'b2fc1af75b062c83063530923de8621dd38a4572' }))));
+    }
+    static get is() { return "xv-progress-indicator-v2-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-progress-indicator-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-progress-indicator-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PROGRESS_ITEM_STATUS",
+                    "resolved": "PROGRESS_ITEM_STATUS.DONE | PROGRESS_ITEM_STATUS.IN_PROGRESS | PROGRESS_ITEM_STATUS.NO_STARTED",
+                    "references": {
+                        "PROGRESS_ITEM_STATUS": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-progress-indicator/_vars.ts::PROGRESS_ITEM_STATUS"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "status",
+                "reflect": false,
+                "defaultValue": "PROGRESS_ITEM_STATUS.NO_STARTED"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=xv-progress-indicator-item.js.map

package/dist/collection/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-progress-indicator-item.js","sourceRoot":"","sources":["../../../../src/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAOhD,MAAM,OAAO,uBAAuB;IALpC;QAO4B,WAAM,GAAyB,oBAAoB,CAAC,UAAU,CAAC;KAqB1F;IAnBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,EAAC,4BAA4B,EAAE,IAAI,EAAC;YAE3C,6DAAM,KAAK,EAAC,MAAM,GAAE;YACpB,6DAAM,KAAK,EAAC,MAAM;gBAChB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa;oBACvD,6DACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,sLAAsL,GACxL,CACF,CACD;YACP,0DAAG,KAAK,EAAC,OAAO;gBAAC,8DAAO,CAAI,CACvB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop } from '@stencil/core';\nimport { PROGRESS_ITEM_STATUS } from '../_vars';\n\n@Component({\n  tag: 'xv-progress-indicator-v2-item',\n  styleUrl: 'xv-progress-indicator-item.scss',\n  shadow: true,\n})\nexport class XvProgressIndicatorItem {\n  @Element() el: HTMLElement;\n  @Prop({ reflect: false }) status: PROGRESS_ITEM_STATUS = PROGRESS_ITEM_STATUS.NO_STARTED;\n\n  render() {\n    return (\n      <Host\n        status={this.status}\n        class={{'xv-progress-indicator-item': true}}\n      >\n        <span class=\"line\"/>\n        <span class=\"icon\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\n                <path\n                  fill=\"currentColor\"\n                  d=\"M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"\n                />\n          </svg>\n        </span>\n        <p class=\"label\"><slot/></p>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.css

@@ -0,0 +1,45 @@
+:host {
+  --progress-indicator-icon-size: 22px;
+  --progress-indicator-font-size: var(--fz-md, 14px);
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  font-family: var(--ff-body, inherit);
+  overflow-x: auto;
+}
+
+:host([variant=horizontal]) ::slotted(xv-progress-indicator-v2-item) {
+  flex-direction: row;
+  column-gap: var(--gap-xs, 8px);
+  justify-content: flex-start;
+  padding-left: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+}
+
+:host([size=xs]) {
+  --progress-indicator-icon-size: 14px;
+  --progress-indicator-font-size: var(--fz-md, 14px);
+}
+
+:host([size=sm]) {
+  --progress-indicator-icon-size: 16px;
+  --progress-indicator-font-size: var(--fz-md, 14px);
+}
+
+:host([size=md]) {
+  --progress-indicator-icon-size: 22px;
+  --progress-indicator-font-size: var(--fz-md, 14px);
+}
+
+:host([size=lg]) {
+  --progress-indicator-icon-size: 24px;
+  --progress-indicator-font-size: var(--fz-lg, 18px);
+}
+
+:host([size=xl]) {
+  --progress-indicator-icon-size: 32px;
+  --progress-indicator-font-size: var(--fz-xl, 20px);
+}