xv-webcomponents 0.1.42 → 0.1.43

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: '85ba648d8281168521c1ed8c4b0b861fb428ce8e', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, h("slot", { key: '6c303d085e23e1ecfa433aefa22f02be1cd5711f' }), this.selected && h("span", { key: 'c555912f9727a0e42b09279b31fe3b3b740bf7eb', 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;
-}