xv-webcomponents 0.1.39 → 0.1.42

package/dist/collection/components/xv-text-input/xv-text-input.js

@@ -1,6 +1,5 @@
 import { h, Host } from "@stencil/core";
 import { SIZE_VAR } from "../../types/enum";
-import { TextInputStatus } from "./_vars";
 /**
  * xv-text-input — custom input
  * ti get data you can use default Input event
@@ -8,38 +7,25 @@ import { TextInputStatus } from "./_vars";
  */
 export class XvTextInput {
     constructor() {
-        this.helper = '';
-        this.size = SIZE_VAR.MD;
-        this.status = TextInputStatus.DEF;
+        this.type = 'text';
         this.value = '';
-        this.disabled = false;
-        this.readonly = false;
         this.loading = false;
+        this.size = SIZE_VAR.MD;
         this.handleInput = (e) => {
             const target = e.target;
             this.value = target.value;
             this.valueChange.emit(this.value);
             this.internals.setFormValue(target.value);
         };
-        this.getControlIcon = (status) => {
-            if (this.loading) {
-                return h("xv-loader-v2", { class: "control_icon", size: SIZE_VAR.XS });
-            }
-            switch (status) {
-                case TextInputStatus.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" })));
-                }
-                case TextInputStatus.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" })));
-                default: return null;
-            }
-        };
     }
     render() {
-        return (h(Host, { key: 'ff06aea5ae7498aaf2c855da8ee0f7a0522456e4', name: this.name, class: "xv-text-input", role: "textbox", tabindex: this.disabled ? -1 : false }, this.label && h("label", { key: 'cf8084b9c0aab74c87297e1af0ea6d069cb6b8f1', class: "label" }, this.label), h("div", { key: '9ebc989deb41e835f30c72f4777d94cadd68a023', class: "control" }, h("input", { key: '82b18d350f325ae32daad68552ac083dd2c3b157', type: "text", class: { withIcon: this.status !== TextInputStatus.DEF }, readonly: this.readonly, value: this.value, disabled: this.disabled, onInput: this.handleInput, placeholder: this.placeholder }), this.getControlIcon(this.status)), this.helper && h("p", { key: '070097a66e9a21872b8245305a24070fc5b8f443', class: "helper" }, this.helper)));
-    }
-    componentWillLoad() {
-        this.internals.setFormValue(this.value);
+        return (h(Host, { key: 'b9c4820d1f0ba4e6baf9cd405c42380577f5379d', class: { disabled: !!this.disabled } }, h("label", { key: 'e331f40fc28c74833276e75c8376270589a17279', class: "control" }, this.label && h("span", { key: '4d48b122402bd36b98495a9bfdf991512126049d', class: "control_label" }, this.label), h("div", { key: '7c4f26d5a943417b54500a54b993108a70a5ed83', class: {
+                'control_input': true,
+                readonly: !!this.readonly,
+                [this.size]: true,
+                error: !!this.error,
+                warning: !!this.warning,
+            } }, h("input", { key: 'b6e5cf7ed95c5649b7c1aff16fe7668c2a05c71b', type: this.type, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, name: this.name, value: this.value }), h("div", { key: '739c31f7939b0baaa3e8d49ec61b016005c427ad', class: "control_input__icons" }, this.loading && h("xv-loader-v2", { key: '8aaa989d7ad0fe3b9f86908c648fe2e01c551bc9', size: SIZE_VAR.XS }), !!this.error ? (h("span", { class: "status-icon error", "aria-hidden": "true" }, "!")) : !!this.warning ? (h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0")) : null))), this.helper && h("p", { key: '7d613edeffa7c6d8e2a76bc69217347187a3b008', class: "message" }, this.helper), typeof this.error === 'string' ? (h("p", { class: "message error" }, this.error)) : typeof this.warning === 'string' ? (h("p", { class: "message warning" }, this.warning)) : null));
     }
     static get is() { return "xv-text-input-v2"; }
     static get encapsulation() { return "shadow"; }
@@ -56,6 +42,26 @@ export class XvTextInput {
     }
     static get properties() {
         return {
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "'text' | 'email' | 'password' | 'url' | 'tel'",
+                    "resolved": "\"email\" | \"password\" | \"tel\" | \"text\" | \"url\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
             "label": {
                 "type": "string",
                 "attribute": "label",
@@ -66,14 +72,14 @@ export class XvTextInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": false
             },
             "placeholder": {
                 "type": "string",
@@ -94,9 +100,9 @@ export class XvTextInput {
                 "setter": false,
                 "reflect": true
             },
-            "helper": {
+            "name": {
                 "type": "string",
-                "attribute": "helper",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -111,12 +117,31 @@ export class XvTextInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
+                "reflect": true
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
                 "defaultValue": "''"
             },
-            "name": {
+            "helper": {
                 "type": "string",
-                "attribute": "name",
+                "attribute": "helper",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -131,79 +156,64 @@ export class XvTextInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": false
             },
-            "size": {
-                "type": "string",
-                "attribute": "size",
+            "error": {
+                "type": "any",
+                "attribute": "error",
                 "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"
-                        }
-                    }
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "defaultValue": "SIZE_VAR.MD"
+                "reflect": false
             },
-            "status": {
-                "type": "string",
-                "attribute": "status",
+            "warning": {
+                "type": "any",
+                "attribute": "warning",
                 "mutable": false,
                 "complexType": {
-                    "original": "TextInputStatus",
-                    "resolved": "TextInputStatus.DEF | TextInputStatus.ERROR | TextInputStatus.WARNING",
-                    "references": {
-                        "TextInputStatus": {
-                            "location": "import",
-                            "path": "./_vars",
-                            "id": "src/components/xv-text-input/_vars.ts::TextInputStatus"
-                        }
-                    }
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "defaultValue": "TextInputStatus.DEF"
+                "reflect": false
             },
-            "value": {
-                "type": "string",
-                "attribute": "value",
-                "mutable": true,
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "defaultValue": "''"
+                "reflect": false
             },
             "disabled": {
                 "type": "boolean",
@@ -215,19 +225,18 @@ export class XvTextInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "defaultValue": "false"
+                "reflect": false
             },
-            "readonly": {
+            "loading": {
                 "type": "boolean",
-                "attribute": "readonly",
+                "attribute": "loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -242,12 +251,12 @@ export class XvTextInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "false"
             },
-            "loading": {
+            "block": {
                 "type": "boolean",
-                "attribute": "loading",
+                "attribute": "block",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -255,6 +264,31 @@ export class XvTextInput {
                     "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": [],
@@ -263,7 +297,7 @@ export class XvTextInput {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "defaultValue": "false"
+                "defaultValue": "SIZE_VAR.MD"
             }
         };
     }
@@ -285,7 +319,6 @@ export class XvTextInput {
                 }
             }];
     }
-    static get elementRef() { return "el"; }
     static get attachInternalsMemberName() { return "internals"; }
 }
 //# sourceMappingURL=xv-text-input.js.map

package/dist/collection/components/xv-text-input/xv-text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"xv-text-input.js","sourceRoot":"","sources":["../../../src/components/xv-text-input/xv-text-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, h, Host, Element, Prop, Event, EventEmitter } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\nimport { TextInputStatus } from './_vars';\n\n/**\n * xv-text-input — custom input\n * ti get data you can use default Input event\n * Angular - (input), React - (onInput), Pure - addEventListener('input', e => ...)\n */\n@Component({\n  tag: 'xv-text-input-v2',\n  styleUrl: 'xv-text-input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class XvTextInput {\n  @Element() el: HTMLElement;\n  @Prop({ reflect: true }) label?: string;\n  @Prop({ reflect: true }) placeholder?: string;\n  @Prop({ reflect: true }) helper: string = '';\n  @Prop({ reflect: true }) name?: string;\n  @Prop({ reflect: true }) size: SIZE_VAR = SIZE_VAR.MD;\n  @Prop({ reflect: true }) status: TextInputStatus = TextInputStatus.DEF;\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n  @Event({ eventName: 'valueChange' }) valueChange: EventEmitter<string>;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) readonly: boolean = false;\n  @Prop({ reflect: true }) loading: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n  private handleInput = (e: InputEvent) => {\n    const target = e.target as HTMLInputElement;\n    this.value = target.value;\n    this.valueChange.emit(this.value);\n    this.internals.setFormValue(target.value);\n  }\n\n  render() {\n    return (\n      <Host name={this.name} class=\"xv-text-input\" role=\"textbox\" tabindex={this.disabled ? -1 : false}>\n        {this.label && <label class=\"label\">{this.label}</label>}\n\n        <div class=\"control\">\n          <input\n            type=\"text\"\n            class={{ withIcon: this.status !== TextInputStatus.DEF }}\n            readonly={this.readonly}\n            value={this.value}\n            disabled={this.disabled}\n            onInput={this.handleInput}\n            placeholder={this.placeholder}\n          />\n\n          {this.getControlIcon(this.status)}\n        </div>\n\n        {this.helper && <p class=\"helper\">{this.helper}</p>}\n      </Host>\n    );\n  }\n\n  componentWillLoad() {\n    this.internals.setFormValue(this.value);\n  }\n\n  private getControlIcon = (status: TextInputStatus) => {\n    if (this.loading) {\n      return <xv-loader-v2 class=\"control_icon\" size={SIZE_VAR.XS} />\n    }\n    switch (status) {\n      case TextInputStatus.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      case TextInputStatus.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\"\n                  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      default: return null;\n    }\n  };\n}\n"]}
+{"version":3,"file":"xv-text-input.js","sourceRoot":"","sources":["../../../src/components/xv-text-input/xv-text-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, h, Host, Prop, Event, EventEmitter } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\n\n/**\n * xv-text-input — custom input\n * ti get data you can use default Input event\n * Angular - (input), React - (onInput), Pure - addEventListener('input', e => ...)\n */\n@Component({\n  tag: 'xv-text-input-v2',\n  styleUrl: 'xv-text-input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class XvTextInput {\n  @Prop() type: 'text' | 'email' | 'password' | 'url' | 'tel' = 'text';\n  @Prop() label: string;\n  @Prop({ reflect: true }) placeholder?: string;\n  @Prop({ reflect: true }) name: string;\n  @Prop({ mutable: true }) value: string = '';\n  @Event({ eventName: 'valueChange' }) valueChange: EventEmitter<string>;\n  @Prop() helper?: string;\n  @Prop() error?: string | boolean;\n  @Prop() warning?: string | boolean;\n  @Prop() readonly?: boolean;\n  @Prop() disabled?: boolean;\n  @Prop() loading: boolean = false;\n  @Prop() block?: boolean;\n  @Prop({ reflect: true }) size: SIZE_VAR = SIZE_VAR.MD;\n\n  @AttachInternals() internals: ElementInternals;\n\n  private handleInput = (e: InputEvent) => {\n    const target = e.target as HTMLInputElement;\n    this.value = target.value;\n    this.valueChange.emit(this.value);\n    this.internals.setFormValue(target.value);\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: !!this.disabled }}>\n        <label class=\"control\">\n          {this.label && <span class=\"control_label\">{this.label}</span>}\n\n          <div class={{\n            'control_input': true,\n            readonly: !!this.readonly,\n            [this.size]: true,\n            error: !!this.error,\n            warning: !!this.warning,\n          }}>\n            <input\n              type={this.type}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              readonly={this.readonly}\n              onInput={this.handleInput}\n              name={this.name}\n              value={this.value}\n            />\n\n            <div class=\"control_input__icons\">\n              {this.loading && <xv-loader-v2 size={SIZE_VAR.XS} />}\n              {!!this.error ? (\n                <span class=\"status-icon error\" aria-hidden=\"true\">!</span>\n              ) : !!this.warning ? (\n                <span class=\"status-icon warning\" aria-hidden=\"true\">⚠</span>\n              ) : null}\n            </div>\n          </div>\n        </label>\n\n\n        {this.helper && <p class=\"message\">{this.helper}</p>}\n        {typeof this.error === 'string' ? (\n          <p class=\"message error\">{this.error}</p>\n        ) : typeof this.warning === 'string' ? (\n          <p class=\"message warning\">{this.warning}</p>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xv-toggle-tip/xv-toggle-tip.css

@@ -0,0 +1,95 @@
+:host {
+  display: inline-block;
+  font-family: inherit;
+}
+:host .trigger {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  transition: 250ms ease-in-out color;
+  color: var(--icon-secondary);
+}
+:host .trigger_icon {
+  color: inherit;
+}
+:host .trigger ::slotted([slot=trigger]) {
+  transition: 250ms ease-in-out color;
+  color: var(--icon-secondary);
+}
+:host .trigger:hover, :host .trigger:active,
+:host .trigger ::slotted([slot=trigger]:hover),
+:host .trigger ::slotted([slot=trigger]:active) {
+  color: var(--icon-primary);
+}
+:host .trigger:focus,
+:host .trigger ::slotted([slot=trigger]:focus) {
+  color: var(--focus);
+}
+:host .popover {
+  opacity: 1;
+  z-index: 1000;
+  position: absolute;
+  background-color: var(--background-inverse);
+  color: var(--text-inverse);
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  max-width: 288px;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  margin-top: 8px;
+  flex-direction: column;
+  display: flex;
+}
+:host .popover[data-popper-placement^=top] .popover-tip {
+  bottom: -4px;
+}
+:host .popover[data-popper-placement^=bottom] .popover-tip {
+  top: -4px;
+}
+:host .popover[data-popper-placement^=left] .popover-tip {
+  right: -4px;
+}
+:host .popover[data-popper-placement^=right] .popover-tip {
+  left: -4px;
+}
+:host .popover .popover-tip {
+  width: 10px;
+  height: 10px;
+  background-color: transparent;
+  z-index: -1;
+}
+:host .popover .popover-tip:before {
+  content: "";
+  transform: rotate(45deg);
+  background-color: var(--background-inverse);
+  width: inherit;
+  height: inherit;
+  display: inline-block;
+}
+:host .popover .popover-content {
+  padding: var(--gap-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-04);
+}
+:host .popover .popover-content ::slotted([slot=header]) {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+:host .popover .popover-content ::slotted([slot=body]) {
+  font-size: 0.875rem;
+  color: var(--text-inverse);
+}
+:host .popover .popover-content ::slotted([slot=footer]) {
+  font-size: 0.75rem;
+  color: var(--text-inverse);
+  opacity: 0.8;
+}
+
+:host(:not([open])) .popover {
+  opacity: 0;
+  z-index: -1;
+  user-select: none;
+  pointer-events: none;
+}