xv-webcomponents 0.1.43 → 0.1.46

package/dist/collection/components/xv-table/xv-table-expand/xv-table-expand.css

@@ -0,0 +1,153 @@
+.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: block;
+  position: relative;
+  transition: 0.25s ease-in-out background-color;
+}
+:host .expand-btn {
+  z-index: 9;
+  position: absolute;
+  left: max(10px, var(--xv-table-padding-x));
+  top: max(2px, var(--xv-table-padding-y) + 2px);
+  background-color: transparent;
+  cursor: pointer;
+  outline: none;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  display: block;
+  width: 8.5px;
+  height: 8.5px;
+  border-top: none;
+  border-left: none;
+  border-right: 2px solid var(--icon-primary, #333);
+  border-bottom: 2px solid var(--icon-primary, #333);
+  transform: rotate(45deg);
+  transform-origin: center center;
+  transition: 0.2s ease-in-out transform;
+}
+:host .expand-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+:host .expand-btn.open {
+  transform: rotate(-135deg);
+}
+:host .expandableContent {
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  max-height: 0;
+  transition: 250ms ease max-height;
+}
+:host .expandableContent.open {
+  max-height: 600px;
+}
+:host ::slotted([slot=expandable]) {
+  display: grid;
+  align-items: center;
+}
+:host ::slotted(xv-table-v2-row),
+:host ::slotted([slot=expandable]) {
+  padding-inline-start: calc(max(10px, var(--xv-table-padding-x)) * 2 + 10px);
+}
+:host ::slotted([disabled]) {
+  pointer-events: none;
+  opacity: 0.4;
+  cursor: not-allowed;
+  user-select: none;
+}

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

@@ -0,0 +1,76 @@
+import { Host, h } from "@stencil/core";
+import { XV_EXPANDABLE_KEY } from "../_vars";
+import { setAttr } from "../../../utils/utils";
+export class XvTableExpand {
+    constructor() {
+        this.open = false;
+        this.disabled = false;
+        this.handleExpand = () => {
+            this.open = !this.open;
+        };
+    }
+    render() {
+        return (h(Host, { key: 'd55e1a6bd3573bec454ec5f4d8d9706c6f44ac64' }, h("button", { key: 'a5dccc1e72ed26619dffbebe370994a318fa8c2c', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: '8c34a4660f90e5a7a48652125ab57308c06f605d', name: XV_EXPANDABLE_KEY }), h("div", { key: '01ab808711bd4848fbca87ea357886cfb4a9e318', class: { expandableContent: true, open: this.open } }, h("slot", { key: '6c52826625e7cdfdb8aa117763bd5fcb0fe8bbf6' }))));
+    }
+    componentDidLoad() {
+        setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);
+    }
+    static get is() { return "xv-table-v2-expand"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-table-expand.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-table-expand.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "attribute": "open",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=xv-table-expand.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-table-expand.js","sourceRoot":"","sources":["../../../../src/components/xv-table/xv-table-expand/xv-table-expand.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAO/C,MAAM,OAAO,aAAa;IAL1B;QAO0C,SAAI,GAAY,KAAK,CAAC;QACrC,aAAQ,GAAY,KAAK,CAAC;QAE3C,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACzB,CAAC,CAAC;KAoBH;IAlBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,+DACE,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAC9C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,GAC1B;YACF,6DAAM,IAAI,EAAE,iBAAiB,GAAI;YAEjC,4DAAK,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;gBAAE,8DAAQ,CAAM,CACnE,CACR,CAAC;IACJ,CAAC;IAED,gBAAgB;QACd,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,iBAAiB,EAAE,IAAI,CAAC,CAAC;IAC1D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop } from '@stencil/core';\nimport { XV_EXPANDABLE_KEY } from '../_vars';\nimport { setAttr } from '../../../utils/utils';\n\n@Component({\n  tag: 'xv-table-v2-expand',\n  styleUrl: 'xv-table-expand.scss',\n  shadow: true,\n})\nexport class XvTableExpand {\n  @Element() el: HTMLElement;\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  private handleExpand = () => {\n    this.open = !this.open;\n  };\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={{ 'expand-btn': true, open: this.open }}\n          disabled={this.disabled}\n          onClick={this.handleExpand}\n        />\n        <slot name={XV_EXPANDABLE_KEY} />\n\n        <div class={{ expandableContent: true, open: this.open }}><slot /></div>\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);\n  }\n}\n"]}

package/dist/collection/components/xv-table/xv-table-row/xv-table-row.css

@@ -0,0 +1,134 @@
+.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: grid;
+  grid-template-columns: var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));
+  border-bottom: 1px solid #E3E3E3;
+  border-right: 1px solid #E3E3E3;
+  border-left: 1px solid #E3E3E3;
+  min-height: var(--xv-table-min-height);
+  align-items: center;
+  align-content: center;
+  transition: 0.25s ease-in-out background-color;
+}
+:host .cell-control {
+  min-height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:host([variant]) {
+  grid-template-columns: minmax(47.97px, min-content) var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));
+}
+
+:host([hover]:not([header]):hover) {
+  background-color: var(--layer-hover-01, #E9E9E9);
+}
+
+:host([checked]) {
+  background-color: var(--layer-selected-01, #E3E3E3);
+}
+
+:host([checked]:hover) {
+  background-color: var(--layer-selected-hover-01, #DADADA);
+}
+
+:host([header]) {
+  background-color: var(--layer-accent-01, #F7F7F7);
+  box-shadow: 0 0 0 1px #E3E3E3 inset;
+  border-bottom: none;
+}