xv-webcomponents 0.1.43 → 0.1.46

package/dist/collection/components/xv-dropdown/xv-dropdown.js

@@ -0,0 +1,443 @@
+import { Host, h } from "@stencil/core";
+import { SIZE_VAR } from "../../types/enum";
+import { DropdownItemSelector } from "./_vars";
+import { forEach, setAttr } from "../../utils/utils";
+export class XvDropdown {
+    constructor() {
+        this.size = SIZE_VAR.MD;
+        this.selected = [];
+        this.selectedMap = new Map();
+        this.setSelected = (selectedMap, optionNodes) => {
+            const values = Array.from(selectedMap.values());
+            const options = optionNodes || this.el.querySelectorAll(DropdownItemSelector);
+            this.selected = values.length === options.length ?
+                ['Alle ausgewählt'] : values.length > 2 ?
+                [`${values.length} ausgewählt`] : values.map((v) => v.text);
+            return values;
+        };
+        this.handleOpen = () => {
+            if (this.disabled || this.open || this.loading)
+                return;
+            this.open = true;
+        };
+        this.handleClickOutside = (ev) => {
+            if (!this.open || this.el.contains(ev.target))
+                return;
+            if (this.open)
+                this.open = false;
+        };
+        this.addListeners = () => {
+            document.body.addEventListener('click', this.handleClickOutside);
+        };
+        this.removeListeners = () => {
+            document.body.removeEventListener('click', this.handleClickOutside);
+        };
+        this.setDefaultValues = () => {
+            if (!this.defaultValue)
+                return;
+            // Needs to wait next Javascript tik
+            setTimeout(() => {
+                const options = this.el.querySelectorAll(DropdownItemSelector);
+                forEach(options, (option) => {
+                    const dropdownItemData = {
+                        value: option.getAttribute('value'),
+                        text: option.innerText,
+                        selected: `${this.defaultValue}` === option.getAttribute('value'),
+                    };
+                    if (dropdownItemData.selected) {
+                        setAttr(option, 'selected', dropdownItemData.selected);
+                        this.selectedMap.set(dropdownItemData.value, dropdownItemData);
+                    }
+                });
+                this.setSelected(this.selectedMap, options);
+            });
+        };
+    }
+    openChangeHandle() {
+        if (this.disabled)
+            return;
+        if (this.open) {
+            this.addListeners();
+        }
+        else {
+            this.removeListeners();
+        }
+    }
+    handleItemSelected({ detail }) {
+        const hasItem = this.selectedMap.has(detail.value);
+        if (this.multiple) {
+            if (detail.selected) {
+                if (!hasItem)
+                    this.selectedMap.set(detail.value, detail);
+            }
+            else {
+                if (hasItem) {
+                    if (this.required && this.selectedMap.size === 1)
+                        return;
+                    this.selectedMap.delete(detail.value);
+                }
+            }
+        }
+        else {
+            if (detail.selected) {
+                this.selectedMap.clear();
+                this.selectedMap.set(detail.value, detail);
+            }
+            else {
+                if (!this.required)
+                    this.selectedMap.clear();
+            }
+            this.open = false;
+        }
+        const optionElements = this.el.querySelectorAll(DropdownItemSelector);
+        forEach(optionElements, (option) => setAttr(option, 'selected', this.selectedMap.has(option.getAttribute('value'))));
+        this.changeSelection.emit(this.setSelected(this.selectedMap, optionElements));
+    }
+    render() {
+        return (h(Host, { key: '2c5ea06ed7caeb3eb112f0421439d83666c71c0f', class: "xv-dropdown", role: "combobox", size: this.size, open: this.open, error: this.error, disabled: this.disabled, tabindex: this.disabled ? -1 : false }, h("label", { key: '1c57d5005bbf6e4419f5b4b55ea76a97d0bd6223', class: "label" }, h("slot", { key: '2ce3f332265b9e4dfa1b884d3bb869640d78b25f', name: "label" }, this.label), this.info && h("xv-tooltip-v2", { key: 'a46c73b62c3a2074a64ceeb0334ac0c55eef60fd', class: "label_info", message: this.info })), h("div", { key: '6711f988978aa4c1773f905c974aeadd3d23eba2', class: "xv-dropdown-control control", onClick: this.handleOpen }, this.selected.length ? (h("p", { class: "control_value" }, this.selected.join(', '))) : (h("p", { class: "control_placeholder" }, this.placeholder || '')), this.renderIcon(), h("svg", { key: 'dbd8ac8a724266322bf6a69c3b51aa0e653fce82', class: "control_arrow", focusable: "false", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16" }, h("path", { key: '9d41c7560755d88a502e3ea0024d021fcb467e6e', d: "M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" }))), this.open && h("div", { key: '2fbd336e60ad52321b571b2e369dfd0b0a14925f', class: "options" }, h("slot", { key: "xv-dropdown-options" })), (this.helper || this.error || this.warning) && (h("p", { key: '89dac505b3b1617eed4fe4ddfd2a088efb88ebbc', class: "helper" }, this.error || this.warning || this.helper))));
+    }
+    componentWillLoad() {
+        this.setDefaultValues();
+    }
+    componentDidLoad() {
+        this.openChangeHandle();
+    }
+    disconnectedCallback() {
+        this.removeListeners();
+    }
+    renderIcon() {
+        if (this.loading) {
+            return h("xv-loader-v2", { class: "control_icon error", size: SIZE_VAR.XS });
+        }
+        if (this.error) {
+            return (h("svg", { class: "control_icon error", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" })));
+        }
+        if (!this.error && !!this.warning) {
+            return (h("svg", { class: "control_icon warning", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { fill: "currentColor", d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" })));
+        }
+        return undefined;
+    }
+    static get is() { return "xv-dropdown-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-dropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "multiple": {
+                "type": "boolean",
+                "attribute": "multiple",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "required": {
+                "type": "boolean",
+                "attribute": "required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "loading": {
+                "type": "boolean",
+                "attribute": "loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "open": {
+                "type": "boolean",
+                "attribute": "open",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "error": {
+                "type": "string",
+                "attribute": "error",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "helper": {
+                "type": "string",
+                "attribute": "helper",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "warning": {
+                "type": "string",
+                "attribute": "warning",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "info": {
+                "type": "string",
+                "attribute": "info",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "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,
+                "reflect": false,
+                "defaultValue": "SIZE_VAR.MD"
+            },
+            "defaultValue": {
+                "type": "any",
+                "attribute": "default-value",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownItemData['value']",
+                    "resolved": "number | string",
+                    "references": {
+                        "DropdownItemData": {
+                            "location": "import",
+                            "path": "./_vars",
+                            "id": "src/components/xv-dropdown/_vars.ts::DropdownItemData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selected": {},
+            "selectedMap": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changeSelection",
+                "name": "changeSelection",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "DropdownItemData[]",
+                    "resolved": "DropdownItemData[]",
+                    "references": {
+                        "DropdownItemData": {
+                            "location": "import",
+                            "path": "./_vars",
+                            "id": "src/components/xv-dropdown/_vars.ts::DropdownItemData"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "openChangeHandle"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "itemSelected",
+                "method": "handleItemSelected",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=xv-dropdown.js.map

package/dist/collection/components/xv-dropdown/xv-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-dropdown.js","sourceRoot":"","sources":["../../../src/components/xv-dropdown/xv-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Element, Watch, Listen, Event, EventEmitter } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\nimport { DropdownItemData, DropdownItemSelector } from './_vars';\nimport { forEach, setAttr } from '../../utils/utils';\n\n@Component({\n  tag: 'xv-dropdown-v2',\n  styleUrl: 'xv-dropdown.scss',\n  shadow: true,\n})\nexport class XvDropdown {\n  @Element() el: HTMLElement;\n  @Prop({ reflect: true }) disabled?: boolean;\n  @Prop({ reflect: true }) multiple?: boolean;\n  @Prop({ reflect: true }) required?: boolean;\n  @Prop({ reflect: true }) loading?: boolean;\n  @Prop({ reflect: true, mutable: true }) open?: boolean;\n  @Prop({ reflect: true }) error?: string;\n  @Prop({ reflect: true }) label?: string;\n  @Prop({ reflect: true }) helper?: string;\n  @Prop({ reflect: true }) warning?: string;\n  @Prop({ reflect: true }) placeholder?: string;\n  @Prop({ reflect: false }) info?: string;\n  @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n  @Prop({ attribute: 'default-value'}) defaultValue?: DropdownItemData['value'];\n\n  @State() selected: DropdownItemData['text'][] = [];\n  @State() selectedMap: Map<DropdownItemData['value'], DropdownItemData> = new Map();\n\n  @Event() changeSelection: EventEmitter<DropdownItemData[]>;\n\n  @Watch('open')\n  openChangeHandle() {\n    if (this.disabled) return;\n\n    if (this.open) {\n      this.addListeners();\n    } else {\n      this.removeListeners();\n    }\n  }\n\n  @Listen('itemSelected')\n  handleItemSelected({ detail }: CustomEvent<DropdownItemData>) {\n    const hasItem = this.selectedMap.has(detail.value);\n\n    if (this.multiple) {\n      if (detail.selected) {\n        if (!hasItem) this.selectedMap.set(detail.value, detail);\n      } else {\n        if (hasItem) {\n          if (this.required && this.selectedMap.size === 1) return;\n          this.selectedMap.delete(detail.value);\n        }\n      }\n    } else {\n      if (detail.selected) {\n        this.selectedMap.clear();\n        this.selectedMap.set(detail.value, detail);\n      } else {\n        if (!this.required) this.selectedMap.clear();\n      }\n      this.open = false;\n    }\n\n    const optionElements = this.el.querySelectorAll(DropdownItemSelector);\n\n    forEach(\n      optionElements,\n      (option) => setAttr(option, 'selected', this.selectedMap.has(option.getAttribute('value')))\n    );\n\n    this.changeSelection.emit(this.setSelected(this.selectedMap, optionElements));\n  }\n\n  private setSelected = (selectedMap: typeof this.selectedMap, optionNodes?: NodeListOf<Element>): DropdownItemData[] => {\n    const values = Array.from(selectedMap.values());\n    const options = optionNodes || this.el.querySelectorAll(DropdownItemSelector);\n\n    this.selected = values.length === options.length ?\n      ['Alle ausgewählt'] : values.length > 2 ?\n        [`${values.length} ausgewählt`] : values.map((v) => v.text);\n\n    return values;\n  };\n\n  private handleOpen = () => {\n    if (this.disabled || this.open || this.loading) return;\n    this.open = true;\n  };\n\n  private handleClickOutside = (ev: MouseEvent) => {\n    if (!this.open || this.el.contains(ev.target as Node)) return;\n\n    if (this.open) this.open = false;\n  }\n\n  private addListeners = () => {\n    document.body.addEventListener('click', this.handleClickOutside);\n  }\n\n  private removeListeners = () => {\n    document.body.removeEventListener('click', this.handleClickOutside);\n  }\n\n  private setDefaultValues = () => {\n    if (!this.defaultValue) return;\n\n    // Needs to wait next Javascript tik\n    setTimeout(() => {\n      const options = this.el.querySelectorAll(DropdownItemSelector);\n\n      forEach(\n        options,\n        (option) => {\n          const dropdownItemData: DropdownItemData = {\n            value: option.getAttribute('value'),\n            text: (option as any).innerText,\n            selected: `${this.defaultValue}` === option.getAttribute('value'),\n          };\n\n          if (dropdownItemData.selected) {\n            setAttr(option, 'selected', dropdownItemData.selected);\n            this.selectedMap.set(dropdownItemData.value, dropdownItemData);\n          }\n        }\n      );\n\n      this.setSelected(this.selectedMap, options);\n    });\n  };\n\n  render() {\n    return (\n      <Host\n        class=\"xv-dropdown\"\n        role=\"combobox\"\n        size={this.size}\n        open={this.open}\n        error={this.error}\n        disabled={this.disabled}\n        tabindex={this.disabled ? -1 : false}>\n        <label class=\"label\">\n          <slot name=\"label\">{this.label}</slot>\n          {this.info && <xv-tooltip-v2 class=\"label_info\" message={this.info}></xv-tooltip-v2>}\n        </label>\n\n        <div class=\"xv-dropdown-control control\" onClick={this.handleOpen}>\n          {this.selected.length ? (\n            <p class=\"control_value\">{this.selected.join(', ')}</p>\n          ) : (\n            <p class=\"control_placeholder\">{this.placeholder || ''}</p>\n          )}\n\n          {this.renderIcon()}\n\n          <svg class=\"control_arrow\" focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\"\n               xmlns=\"http://www.w3.org/2000/svg\"\n               fill=\"currentColor\" aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n            <path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n          </svg>\n        </div>\n\n        {this.open && <div class=\"options\">\n          <slot key=\"xv-dropdown-options\" />\n        </div>}\n\n        {(this.helper || this.error || this.warning) && (\n          <p class=\"helper\">{this.error || this.warning || this.helper}</p>\n        )}\n      </Host>\n    );\n  }\n\n  componentWillLoad() {\n    this.setDefaultValues();\n  }\n\n  componentDidLoad() {\n    this.openChangeHandle();\n  }\n\n  disconnectedCallback() {\n    this.removeListeners();\n  }\n\n  private renderIcon(): undefined | HTMLElement {\n    if (this.loading) {\n      return <xv-loader-v2 class=\"control_icon error\" size={SIZE_VAR.XS} />\n    }\n\n    if (this.error) {\n      return (\n        <svg class=\"control_icon error\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n          <path fill=\"currentColor\"\n                d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z\" />\n        </svg>\n      )\n    }\n\n    if (!this.error && !!this.warning) {\n      return (\n        <svg class=\"control_icon warning\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n          <path fill=\"currentColor\" d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\" />\n        </svg>\n      );\n    }\n\n    return undefined;\n  }\n}\n"]}

package/dist/collection/components/xv-file-uploader/_vars.js

@@ -0,0 +1,6 @@
+export var XvFileUploaderVariants;
+(function (XvFileUploaderVariants) {
+    XvFileUploaderVariants["BUTTON"] = "button";
+    XvFileUploaderVariants["DRAG_DROP"] = "drag-drop";
+})(XvFileUploaderVariants || (XvFileUploaderVariants = {}));
+//# sourceMappingURL=_vars.js.map

package/dist/collection/components/xv-file-uploader/_vars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_vars.js","sourceRoot":"","sources":["../../../src/components/xv-file-uploader/_vars.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,sBAGX;AAHD,WAAY,sBAAsB;IAChC,2CAAiB,CAAA;IACjB,iDAAuB,CAAA;AACzB,CAAC,EAHW,sBAAsB,KAAtB,sBAAsB,QAGjC","sourcesContent":["export enum XvFileUploaderVariants {\n  BUTTON = 'button',\n  DRAG_DROP = 'drag-drop'\n}\n"]}