xv-webcomponents 0.1.41 → 0.1.43

package/dist/collection/components/xv-data-table/xv-data-table.js

@@ -1,130 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { SIZE_VAR } from "../../types/enum";
-export class XvDataTable {
-    constructor() {
-        this.size = SIZE_VAR.MD;
-        this.columnWidths = [];
-    }
-    render() {
-        return (h(Host, { key: '3a2756875f87f6567ff283eea651938490687cdd', class: "xv-data-table" }, h("table", { key: '1a19f09a2fdd28eee4428e0a4de23dea10fa81b6', role: "table" }, (this.label || this.description) && (h("caption", { key: 'cbedfcf8303442fa5b9f7464edc723deecf9fa90' }, this.label || this.description)), this.columnWidths.length > 0 && (h("colgroup", { key: '54761e043642758379753ac03c8066684b0dee0e' }, this.columnWidths.map((width = 'auto') => h("col", { style: { width } })))), h("slot", { key: 'b7c01a7fc0ae0f078ba796635214c32eb15977ad' }))));
-    }
-    static get is() { return "xv-data-table"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["xv-data-table.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["xv-data-table.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "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"
-            },
-            "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": false
-            },
-            "description": {
-                "type": "string",
-                "attribute": "description",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "block": {
-                "type": "boolean",
-                "attribute": "block",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "columnWidths": {
-                "type": "unknown",
-                "attribute": "column-widths",
-                "mutable": false,
-                "complexType": {
-                    "original": "(string | null)[]",
-                    "resolved": "string[]",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            }
-        };
-    }
-}
-//# sourceMappingURL=xv-data-table.js.map

package/dist/collection/components/xv-data-table/xv-data-table.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"xv-data-table.js","sourceRoot":"","sources":["../../../src/components/xv-data-table/xv-data-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAO5C,MAAM,OAAO,WAAW;IALxB;QAMU,SAAI,GAAa,QAAQ,CAAC,EAAE,CAAC;QAI7B,iBAAY,GAAsB,EAAE,CAAC;KAoB9C;IAlBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe;YACzB,8DAAO,IAAI,EAAC,OAAO;gBAChB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CACnC,kEAAU,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAW,CACpD;gBACA,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAC/B,mEACG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,MAAM,EAAE,EAAE,CAAC,WAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAI,CAAC,CAC5D,CACZ;gBAED,8DAAQ,CACF,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n  tag: 'xv-data-table',\n  styleUrl: 'xv-data-table.scss',\n  shadow: true,\n})\nexport class XvDataTable {\n  @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n  @Prop() label?: string;\n  @Prop() description?: string;\n  @Prop() block?: boolean;\n  @Prop() columnWidths: (string | null)[] = [];\n\n  render() {\n    return (\n      <Host class=\"xv-data-table\">\n        <table role=\"table\">\n          {(this.label || this.description) && (\n            <caption>{this.label || this.description}</caption>\n          )}\n          {this.columnWidths.length > 0 && (\n            <colgroup>\n              {this.columnWidths.map((width = 'auto') => <col style={{ width }} />)}\n            </colgroup>\n          )}\n\n          <slot />\n        </table>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,2 +0,0 @@
-export const DropdownItemSelector = '.xv-dropdown-item';
-//# sourceMappingURL=_vars.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"_vars.js","sourceRoot":"","sources":["../../../src/components/xv-dropdown/_vars.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,oBAAoB,GAAG,mBAAmB,CAAC","sourcesContent":["export interface DropdownItemData {\n  value: string | number;\n  text: string;\n  selected: boolean;\n}\n\nexport const DropdownItemSelector = '.xv-dropdown-item';\n"]}

package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.css

@@ -1,14 +0,0 @@
-:host {
-  display: block;
-}
-:host .checkmark {
-  position: absolute;
-  right: 12px;
-  top: var(--dropdown-padding-y, 10px);
-  width: 5px;
-  height: 10px;
-  border: solid var(--icon-primary, #333);
-  border-width: 0 2px 2px 0;
-  transform: rotate(45deg);
-  transition: opacity 0.2s;
-}

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

@@ -1,153 +0,0 @@
-import { Host, h } from "@stencil/core";
-/**
- * xv-dropdown-item — custom dropdown list item
- * if you want to create new dropdown list item you need to extend current class properties and
- * events
- * should be created and emitted 'itemSelected' event
- */
-export class XvDropdownItem {
-    constructor() {
-        this.disabled = false;
-        this.value = '';
-        this.selected = false;
-    }
-    handleClick() {
-        if (this.disabled)
-            return;
-        this.itemSelected.emit({
-            selected: !this.selected,
-            value: this.value,
-            text: this.el.innerText
-        });
-    }
-    render() {
-        return (h(Host, { key: '74a8a783a58af3d074bf888e3f520214910761e7', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, h("slot", { key: '7b404292d6992ca6c260c488ba8668f214741399' }), this.selected && h("span", { key: '46ab6ec0b6b699af0325924a42b51166640d079a', class: "checkmark" })));
-    }
-    componentWillLoad() {
-        if (!this.value)
-            this.value = this.el.innerText;
-    }
-    static get is() { return "xv-dropdown-v2-item"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["xv-dropdown-item.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["xv-dropdown-item.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "disabled": {
-                "type": "boolean",
-                "attribute": "disabled",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "value": {
-                "type": "any",
-                "attribute": "value",
-                "mutable": true,
-                "complexType": {
-                    "original": "DropdownItemData['value']",
-                    "resolved": "number | string",
-                    "references": {
-                        "DropdownItemData": {
-                            "location": "import",
-                            "path": "../_vars",
-                            "id": "src/components/xv-dropdown/_vars.ts::DropdownItemData"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "defaultValue": "''"
-            },
-            "selected": {
-                "type": "boolean",
-                "attribute": "selected",
-                "mutable": true,
-                "complexType": {
-                    "original": "DropdownItemData['selected']",
-                    "resolved": "boolean",
-                    "references": {
-                        "DropdownItemData": {
-                            "location": "import",
-                            "path": "../_vars",
-                            "id": "src/components/xv-dropdown/_vars.ts::DropdownItemData"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "itemSelected",
-                "name": "itemSelected",
-                "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 listeners() {
-        return [{
-                "name": "click",
-                "method": "handleClick",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
-}
-//# sourceMappingURL=xv-dropdown-item.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"xv-dropdown-item.js","sourceRoot":"","sources":["../../../../src/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAG/F;;;;;GAKG;AAMH,MAAM,OAAO,cAAc;IAL3B;QAOU,aAAQ,GAAY,KAAK,CAAC;QACM,UAAK,GAA8B,EAAE,CAAC;QACtC,aAAQ,GAAiC,KAAK,CAAC;KA4BxF;IAxBC,WAAW;QACT,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ;YACxB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,SAAS;SACxB,CAAC,CAAC;IACL,CAAC;IAGD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,kBAAkB,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK;YAClG,8DAAa;YAEZ,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,WAAW,GAAG,CACvC,CACR,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC;IAClD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Event, EventEmitter, Listen, Prop, Element } from '@stencil/core';\nimport { DropdownItemData } from '../_vars';\n\n/**\n * xv-dropdown-item — custom dropdown list item\n * if you want to create new dropdown list item you need to extend current class properties and\n * events\n * should be created and emitted 'itemSelected' event\n */\n@Component({\n  tag: 'xv-dropdown-v2-item',\n  styleUrl: 'xv-dropdown-item.scss',\n  shadow: true,\n})\nexport class XvDropdownItem {\n  @Element() el: HTMLElement;\n  @Prop() disabled: boolean = false;\n  @Prop({ reflect: true, mutable: true }) value: DropdownItemData['value'] = '';\n  @Prop({ reflect: true, mutable: true }) selected: DropdownItemData['selected'] = false;\n  @Event() itemSelected: EventEmitter<DropdownItemData>;\n\n  @Listen('click')\n  handleClick() {\n    if (this.disabled) return;\n\n    this.itemSelected.emit({\n      selected: !this.selected,\n      value: this.value,\n      text: this.el.innerText\n    });\n  }\n\n\n  render() {\n    return (\n      <Host class=\"xv-dropdown-item\" value={this.value} role=\"option\" tabindex={this.disabled ? -1 : false}>\n        <slot></slot>\n\n        {this.selected && <span class=\"checkmark\" />}\n      </Host>\n    );\n  }\n\n  componentWillLoad() {\n    if (!this.value) this.value = this.el.innerText;\n  }\n}\n"]}

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

@@ -1,232 +0,0 @@
-:host {
-  --dropdown-padding-x: 16px;
-  --dropdown-padding-y: 11px;
-  --dropdown-max-width: 300px;
-  display: block;
-  position: relative;
-  text-align: left;
-  max-width: min(var(--dropdown-max-width), 100%);
-}
-:host .label {
-  display: block;
-  color: var(--text-secondary, #515151);
-  font-family: var(--ff-body, Tahoma);
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 16px;
-  letter-spacing: 0.32px;
-  margin-bottom: 8px;
-}
-:host .label ::slotted([slot=label]) {
-  color: var(--text-secondary, #515151);
-  font-family: var(--ff-body, Tahoma);
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 16px;
-  letter-spacing: 0.32px;
-}
-:host .label_info {
-  margin-left: var(--spacing-02);
-}
-:host .control {
-  background-blend-mode: multiply;
-  border-radius: 3px;
-  box-shadow: 0 0 0 1px #8B8B8B inset;
-  transition: 0.2s ease-in-out background-color;
-  cursor: pointer;
-  margin: 0;
-  box-sizing: border-box;
-  font-family: inherit;
-  font-size: 100%;
-  padding: 0;
-  border: 0;
-  appearance: none;
-  background-color: var(--field-02, #FFF);
-  text-align: start;
-  inline-size: 100%;
-  position: relative;
-  display: inline-flex;
-  overflow: hidden;
-  align-items: center;
-  block-size: calc(100% + 1px);
-  outline: none;
-  padding-block: var(--dropdown-padding-y);
-  padding-inline: var(--dropdown-padding-x);
-  text-overflow: ellipsis;
-  vertical-align: top;
-  white-space: nowrap;
-}
-:host .control_value, :host .control_placeholder {
-  flex: 1;
-  margin: 0;
-  overflow: hidden;
-  color: var(--text-primary, #333);
-  user-select: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: var(--fz-body, Tahoma);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 18px;
-  letter-spacing: 0.16px;
-  padding-inline: 0 1rem;
-}
-:host .control_placeholder {
-  color: var(--text-placeholder, #ACACAC);
-}
-:host .control_icon {
-  width: 18px;
-  height: 18px;
-}
-:host .control_icon.error {
-  color: var(--support-error, #F1290E);
-}
-:host .control_icon.warning {
-  color: var(--support-warning, #FF7F04);
-}
-:host .control_arrow {
-  box-sizing: border-box;
-  margin: 0;
-  font-size: 100%;
-  vertical-align: baseline;
-  padding: 0;
-  border: 0;
-  appearance: none;
-  background: none;
-  text-align: start;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  block-size: 1.5rem;
-  inline-size: 1.5rem;
-  inset-inline-end: 0.75rem;
-  outline: none;
-  transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
-}
-:host .control:hover {
-  background-color: var(--field-hover-02, #E9E9E9);
-}
-:host .control:active {
-  background-color: var(--layer-selected-02, #E3E3E3);
-}
-:host .options {
-  inset-block-start: 100%;
-  margin-block-start: 1px;
-  display: block;
-  max-block-size: 13.75rem;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-  position: absolute;
-  z-index: 10;
-  inline-size: 100%;
-  inset-inline: 0;
-  overflow-y: auto;
-  transition: max-height 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
-  border-radius: 3px;
-  background-color: var(--field-02, #FFF);
-  scrollbar-width: thin;
-  scrollbar-color: var(--layer-accent-03) transparent;
-}
-:host .options ::slotted(.xv-dropdown-item) {
-  display: block;
-  max-block-size: 13.75rem;
-  inset-inline: 0;
-  box-sizing: border-box;
-  padding: var(--dropdown-padding-y) calc(var(--dropdown-padding-x) + 16px) var(--dropdown-padding-y) var(--dropdown-padding-x);
-  position: relative;
-  cursor: pointer;
-  overflow: hidden;
-  color: var(--text-secondary, #515151);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: var(--ff-body, Tahoma);
-  font-size: var(--fz-md, 14px);
-  font-style: normal;
-  font-weight: 400;
-  line-height: 18px;
-  letter-spacing: 0.16px;
-  transition: 0.2s ease-in-out background-color;
-  user-select: none;
-}
-:host .options ::slotted(.xv-dropdown-item):after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  height: 1px;
-  left: 10px;
-  width: calc(100% - 20px);
-  background-color: var(--border-subtle-01);
-}
-:host .options ::slotted(.xv-dropdown-item:hover) {
-  background-color: var(--layer-hover-02, #F7F7F7);
-}
-:host .options ::slotted(.xv-dropdown-item:active) {
-  background-color: var(--layer-selected-hover-02, #DADADA);
-}
-:host .options ::slotted(.xv-dropdown-item[selected]) {
-  background-color: var(--layer-selected-02, #E3E3E3);
-}
-:host .options ::slotted(.xv-dropdown-item[selected]:hover) {
-  background-color: var(--layer-selected-hover-02, #DADADA);
-}
-:host .options ::slotted(.xv-dropdown-item[disabled]) {
-  background-color: transparent;
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-:host .helper {
-  color: var(--text-helper, #646464);
-  font-family: var(--ff-heading, "IBM Plex Sans");
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 16px;
-  letter-spacing: 0.32px;
-  margin: 4px 0 0;
-  padding: 0;
-}
-
-:host([open]) .control_arrow {
-  transform: rotate(180deg);
-}
-
-:host([disabled]) {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-:host([disabled]) .control {
-  cursor: inherit;
-}
-:host([disabled]) .control:hover, :host([disabled]) .control:active, :host([disabled]) .control:focus-within {
-  background-color: transparent;
-}
-
-:host([error]) .control {
-  box-shadow: none;
-  outline: 2px solid var(--support-support-error, #F1290E);
-}
-:host([error]) .helper {
-  color: var(--text-error, #D62512);
-}
-
-:host([size=xs]) {
-  --dropdown-padding-y: 4px;
-}
-
-:host([size=sm]) {
-  --dropdown-padding-y: 7px;
-}
-
-:host([size=md]) {
-  --dropdown-padding-y: 11px;
-}
-
-:host([size=lg]) {
-  --dropdown-padding-y: 15px;
-}
-
-:host([size=xl]) {
-  --dropdown-padding-y: 16px;
-}