xv-webcomponents 0.1.43 → 0.1.46

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

@@ -0,0 +1,402 @@
+import { h, Host } from "@stencil/core";
+export class XvCheckbox {
+    constructor() {
+        var _a, _b;
+        /**
+         * Default checked status
+         */
+        this.checked = false;
+        /**
+         * Using for forms
+         */
+        this.indeterminate = false;
+        /**
+         * Disabled status
+         */
+        this.disabled = false;
+        /**
+         * Input value
+         */
+        this.value = 'on';
+        /**
+         * Input readonly
+         */
+        this.readonly = false;
+        /**
+         * The same like default checkbox prop
+         */
+        this.required = false;
+        /**
+         * Change checkmark icon to minus
+         */
+        this.partial = false;
+        this.hasFocus = false;
+        this.onInput = (e) => {
+            const target = e.target;
+            this.checked = target.checked;
+            this.inputEvent.emit(this.checked);
+        };
+        this.onChange = (e) => {
+            if (this.disabled || this.readonly)
+                return;
+            const target = e.target;
+            this.checked = target.checked;
+            this.changeEvent.emit(this.checked);
+        };
+        this.onFocus = () => {
+            this.hasFocus = true;
+            this.focusEvent.emit();
+        };
+        this.onBlur = () => {
+            this.hasFocus = false;
+            this.blurEvent.emit();
+        };
+        this.internals = ((_b = (_a = this.el).attachInternals) === null || _b === void 0 ? void 0 : _b.call(_a)) || {};
+    }
+    connectedCallback() {
+        var _a;
+        if ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) {
+            this.internals.setFormValue(this.checked ? this.value : null);
+        }
+    }
+    onCheckedChange(newValue) {
+        var _a;
+        if ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) {
+            this.internals.setFormValue(newValue ? this.value : null);
+        }
+    }
+    render() {
+        return (h(Host, { key: '9eb988ec6a7a02392b4ed77685eed2bc5814c137' }, h("label", { key: '3e4c7112c959897c5b61cbcff890eaf437e476fc', class: { 'xv-checkbox': true, disabled: this.disabled, readonly: this.readonly } }, h("input", { key: '3a2e68b5780ae3951f86d30f9b2e8d9af1805e97', ref: el => (this.inputEl = el), type: "checkbox", readonly: this.readonly, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, indeterminate: this.indeterminate, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }), h("span", { key: 'b57f073a258a1ea15d04969a68eab7c36023e596', class: `checkmark ${this.partial ? 'checkmark-partial' : ''}` }), h("div", { key: '1abe0c133bf203b228b86bd68053856b79cdf170', class: "label" }, h("slot", { key: '155a80701f1a050a73a0079308de0b932407549e' }, this.label && h("span", { key: 'f9d493bfb663fcf91712b754b4c1b841d10beb05', class: "label_str" }, this.label)))), h("slot", { key: 'fae7055dc73235126a633a705b6e8f045a20954c', name: "info" }), !!this.error && h("span", { key: '5c3bb7d31289862bf421614ee9906671e65c1b7c', class: "error" }, this.error)));
+    }
+    componentDidLoad() {
+        if (this.indeterminate) {
+            this.inputEl.indeterminate = true;
+        }
+    }
+    componentDidUpdate() {
+        if (this.inputEl) {
+            this.inputEl.indeterminate = this.indeterminate;
+        }
+    }
+    formResetCallback() {
+        this.checked = false;
+    }
+    formStateRestoreCallback(state) {
+        this.checked = state === this.value;
+    }
+    static get is() { return "xv-checkbox-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-checkbox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "attribute": "checked",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default checked status"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "attribute": "indeterminate",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Using for forms"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled status"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'on'"
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input readonly"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "attribute": "required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The same like default checkbox prop"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "partial": {
+                "type": "boolean",
+                "attribute": "partial",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Change checkmark icon to minus"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Can be used like property or like slot"
+                },
+                "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": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "error": {
+                "type": "any",
+                "attribute": "error",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changeEvent",
+                "name": "eventChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "event 'onEventChange'"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "inputEvent",
+                "name": "eventInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "event 'onEventInput'"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "focusEvent",
+                "name": "eventFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "event 'onEventFocus'"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "blurEvent",
+                "name": "eventBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "event 'onEventBlur'"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "onCheckedChange"
+            }];
+    }
+}
+//# sourceMappingURL=xv-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-checkbox.js","sourceRoot":"","sources":["../../../src/components/xv-checkbox/xv-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, State, Event, EventEmitter, Watch, Host } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n  tag: 'xv-checkbox-v2',\n  styleUrl: 'xv-checkbox.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class XvCheckbox {\n  private inputEl: HTMLInputElement;\n  private internals: ElementInternals;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * Default checked status\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /**\n   * Using for forms\n   */\n  @Prop({ reflect: true }) indeterminate: boolean = false;\n  /**\n   * Disabled status\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n   * Input name\n   */\n  @Prop({ reflect: true }) name: string;\n  /**\n   * Input value\n   */\n  @Prop({ reflect: true }) value: string = 'on';\n  /**\n   * Input readonly\n   */\n  @Prop({ reflect: true }) readonly: boolean = false;\n  /**\n   * The same like default checkbox prop\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n  /**\n   * Change checkmark icon to minus\n   */\n  @Prop({ reflect: true }) partial: boolean = false;\n  /**\n   * Can be used like property or like slot\n   */\n  @Prop() label: string;\n\n  @Prop({ reflect: true }) size?: SIZE_VAR;\n  @Prop({ reflect: true }) error?: string | boolean;\n\n  @State() hasFocus: boolean = false;\n  /**\n   * event 'onEventChange'\n   */\n  @Event({ eventName: 'eventChange' }) changeEvent: EventEmitter<boolean>;\n  /**\n   * event 'onEventInput'\n   */\n  @Event({ eventName: 'eventInput' }) inputEvent: EventEmitter<boolean>;\n  /**\n   * event 'onEventFocus'\n   */\n  @Event({ eventName: 'eventFocus' }) focusEvent: EventEmitter<void>;\n  /**\n   * event 'onEventBlur'\n   */\n  @Event({ eventName: 'eventBlur' }) blurEvent: EventEmitter<void>;\n\n  constructor() {\n    this.internals = (this.el as any).attachInternals?.() || {};\n  }\n\n  connectedCallback() {\n    if (this.internals?.setFormValue) {\n      this.internals.setFormValue(this.checked ? this.value : null);\n    }\n  }\n\n  @Watch('checked')\n  onCheckedChange(newValue: boolean) {\n    if (this.internals?.setFormValue) {\n      this.internals.setFormValue(newValue ? this.value : null);\n    }\n  }\n\n  private onInput = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.inputEvent.emit(this.checked);\n  };\n\n  private onChange = (e: Event) => {\n    if (this.disabled || this.readonly) return;\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.changeEvent.emit(this.checked);\n  };\n\n  private onFocus = () => {\n    this.hasFocus = true;\n    this.focusEvent.emit();\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n    this.blurEvent.emit();\n  };\n\n  render() {\n    return (\n      <Host>\n        <label class={{ 'xv-checkbox': true, disabled: this.disabled, readonly: this.readonly }}>\n          <input\n            ref={el => (this.inputEl = el)}\n            type=\"checkbox\"\n            readonly={this.readonly}\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            disabled={this.disabled || this.readonly}\n            required={this.required}\n            indeterminate={this.indeterminate}\n            onInput={this.onInput}\n            onChange={this.onChange}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          />\n          <span class={`checkmark ${this.partial ? 'checkmark-partial' : ''}`} />\n          <div class=\"label\">\n            <slot>{this.label && <span class=\"label_str\">{this.label}</span>}</slot>\n          </div>\n        </label>\n        <slot name=\"info\" />\n        {!!this.error && <span class=\"error\">{this.error}</span>}\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    if (this.indeterminate) {\n      this.inputEl.indeterminate = true;\n    }\n  }\n\n  componentDidUpdate() {\n    if (this.inputEl) {\n      this.inputEl.indeterminate = this.indeterminate;\n    }\n  }\n\n  formResetCallback() {\n    this.checked = false;\n  }\n\n  formStateRestoreCallback(state: string) {\n    this.checked = state === this.value;\n  }\n}\n"]}

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

@@ -0,0 +1,3 @@
+export const XV_DATA_TABLE_TAG = 'xv-data-table';
+export const XV_DATA_TABLE_ROW_TAG = 'xv-data-table-row';
+//# sourceMappingURL=_vars.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"_vars.js","sourceRoot":"","sources":["../../../src/components/xv-data-table/_vars.ts"],"names":[],"mappings":"AAWA,MAAM,CAAC,MAAM,iBAAiB,GAAG,eAAe,CAAC;AACjD,MAAM,CAAC,MAAM,qBAAqB,GAAG,mBAAmB,CAAC","sourcesContent":["\nexport interface XvDataTableCheck {\n  name: string;\n  checked: boolean;\n  value?: string | number | object;\n  partial?: boolean;\n  header?: boolean;\n  footer?: boolean;\n  expandable?: boolean;\n}\n\nexport const XV_DATA_TABLE_TAG = 'xv-data-table';\nexport const XV_DATA_TABLE_ROW_TAG = 'xv-data-table-row';\n"]}

package/dist/collection/components/xv-data-table/xv-data-table-cell/xv-data-table-cell.css

@@ -0,0 +1,185 @@
+@charset "UTF-8";
+.xv-tooltip[role=tooltip] {
+  position: absolute;
+  background-color: var(--background-inverse, #333333);
+  color: var(--text-on-color);
+  padding: var(--spacing-03) var(--spacing-04);
+  border-radius: 3px;
+  font-size: var(--fz-sm);
+  z-index: 999;
+  min-width: min(150px, 90vw);
+  max-width: min(400px, 90vw);
+}
+.xv-tooltip[role=tooltip]::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
+  bottom: -5px;
+  left: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
+  bottom: -5px;
+  right: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
+  top: -5px;
+  left: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
+  top: -5px;
+  right: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
+  top: 50%;
+  right: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
+  top: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
+  bottom: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
+  top: 50%;
+  left: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
+  top: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
+  bottom: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+
+:host {
+  display: table-cell;
+  border-style: solid;
+  border-left-width: 0;
+  border-right-width: 0;
+  border-top-width: var(--xv-data-table-border-width, 0);
+  border-bottom-width: var(--xv-data-table-border-width, 0);
+  border-color: var(--xv-data-table-border-color, transparent);
+  padding-inline: var(--xv-data-table-padding-x, 0);
+  padding-block: var(--xv-data-table-padding-y, 0);
+  vertical-align: middle;
+  word-break: break-all;
+  font-style: normal;
+  font-weight: 400;
+}
+:host .line-clamp {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:host(:not(.multiline)) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+:host(:not(.multiline)) ::slotted(*) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:host([sort]) {
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+}
+:host([sort]):before, :host([sort]):after {
+  font-size: 12px;
+  line-height: 10px;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 8px;
+  pointer-events: none;
+  transition: 350ms ease-in-out opacity;
+  opacity: 0;
+}
+:host([sort]):before {
+  content: "▲";
+  top: 50%;
+  transform: translateY(calc(-50% - 5px));
+}
+:host([sort])::after {
+  content: "▼";
+  top: 50%;
+  transform: translateY(calc(-50% + 5px));
+}
+
+:host([sort]:hover) {
+  background-color: var(--layer-accent-hover-01, #E3E3E3);
+}
+:host([sort]:hover)::before, :host([sort]:hover)::after {
+  opacity: 1;
+}
+
+:host([sort=asc]) {
+  background-color: var(--layer-accent-active-01, #D1D1D1);
+}
+:host([sort=asc])::before {
+  opacity: 1;
+}
+:host([sort=asc])::after {
+  display: none;
+}
+
+:host([sort=desc]) {
+  background-color: var(--layer-accent-active-01, #D1D1D1);
+}
+:host([sort=desc])::before {
+  display: none;
+}
+:host([sort=desc])::after {
+  opacity: 1;
+}