xv-webcomponents 0.1.43 → 0.1.44

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

@@ -0,0 +1,153 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,232 @@
+: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;
+}