xv-webcomponents 0.1.42 → 0.1.43

package/dist/xv-webcomponents/xv-progress-indicator-v2.entry.js.map

@@ -0,0 +1 @@
+{"file":"xv-progress-indicator-v2.entry.esm.js","mappings":";;;;;AAAA,MAAM,sBAAsB,GAAG,i8BAAi8B;;MCUn9B,mBAAmB,GAAA,MAAA;AALhC,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAW,CAAC;AAC7C;;;;AAIG;AACK,QAAA,IAAA,CAAA,OAAO,GAAsB,iBAAiB,CAAC,OAAO;AAC9D;;;;AAIG;AACK,QAAA,IAAA,CAAA,IAAI,GAAa,QAAQ,CAAC,EAAE;AA+CrC;;IA3CC,gBAAgB,GAAA;AACd,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ;AAC9B,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,iBAAiB;AAC5C,QAAA,MAAM,eAAe,GAAG,GAAG,GAAG,UAAU;AAExC,QAAA,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,UAAU;YAAE;QAElC,OAAO,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,KAAK,KAAI;;AAC7B,YAAA,MAAM,iBAAiB,GAAG,KAAK,GAAG,eAAe;AACjD,YAAA,IAAI,MAA4B;YAChC,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAC5B,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,iBAAiB,IAAI,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,CACtE,GAAG,GAAG;AAEP,YAAA,IAAI,aAAa,IAAI,GAAG,EAAE;AACxB,gBAAA,MAAM,GAAG,oBAAoB,CAAC,IAAI;;AAC7B,iBAAA,IAAI,aAAa,GAAG,CAAC,EAAE;AAC5B,gBAAA,MAAM,GAAG,oBAAoB,CAAC,WAAW;;iBACpC;AACL,gBAAA,MAAM,GAAG,oBAAoB,CAAC,UAAU;;;AAIzC,YAAA,IAAoB,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC;;YAGpD,MAAM,IAAI,GAAG,CAAC,EAAA,GAAA,IAAoB,aAApB,IAAI,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAJ,IAAI,CAAkB,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,aAAa,CAAC,OAAO,CAAgB;AACrF,YAAA,IAAI,IAAI;gBAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAG,EAAA,aAAa,GAAG;AAClD,SAAC,CAAC;;;IAIJ,gBAAgB,GAAA;QACd,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,uBAAuB,EAAE,IAAI,EAAE,EAAA,EACpF,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;","names":[],"sources":["src/components/xv-progress-indicator/xv-progress-indicator.scss?tag=xv-progress-indicator-v2&encapsulation=shadow","src/components/xv-progress-indicator/xv-progress-indicator.tsx"],"sourcesContent":["$prefix: xv-progress-indicator-v2;\r\n\r\n:host {\r\n  --progress-indicator-icon-size: 22px;\r\n  --progress-indicator-font-size: var(--fz-md, 14px);\r\n\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: space-between;\r\n  font-family: var(--ff-body, inherit);\r\n  overflow-x: auto;\r\n}\r\n\r\n:host([variant=\"horizontal\"]) {\r\n  ::slotted(#{$prefix}-item) {\r\n    flex-direction: row;\r\n    column-gap: var(--gap-xs, 8px);\r\n    justify-content: flex-start;\r\n    padding-left: 0;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    text-align: left;\r\n  }\r\n}\r\n\r\n:host([size=\"xs\"]) {\r\n  --progress-indicator-icon-size: 14px;\r\n  --progress-indicator-font-size: var(--fz-md, 14px);\r\n}\r\n:host([size=\"sm\"]) {\r\n  --progress-indicator-icon-size: 16px;\r\n  --progress-indicator-font-size: var(--fz-md, 14px);\r\n}\r\n:host([size=\"md\"]) {\r\n  --progress-indicator-icon-size: 22px;\r\n  --progress-indicator-font-size: var(--fz-md, 14px);\r\n}\r\n:host([size=\"lg\"]) {\r\n  --progress-indicator-icon-size: 24px;\r\n  --progress-indicator-font-size: var(--fz-lg, 18px);\r\n}\r\n:host([size=\"xl\"]) {\r\n  --progress-indicator-icon-size: 32px;\r\n  --progress-indicator-font-size: var(--fz-xl, 20px);\r\n}\r\n","import { Component, Host, h, Prop, Watch, Element } from '@stencil/core';\r\nimport { PROGRESS_ITEM_STATUS, PROGRESS_VARIANTS } from './_vars';\r\nimport { SIZE_VAR } from '../../types/enum';\r\nimport { forEach } from '../../utils/utils';\r\n\r\n@Component({\r\n  tag: 'xv-progress-indicator-v2',\r\n  styleUrl: 'xv-progress-indicator.scss',\r\n  shadow: true,\r\n})\r\nexport class XvProgressIndicator {\r\n  @Element() el: HTMLElement;\r\n  /**\r\n   * Current progress\r\n   * from 0 to 100\r\n   */\r\n  @Prop({ reflect: true }) progress: number = 0;\r\n  /**\r\n   * Progress variant\r\n   * enum PROGRESS_VARIANTS\r\n   * possible option `horizontal`\r\n   */\r\n  @Prop() variant: PROGRESS_VARIANTS = PROGRESS_VARIANTS.DEFAULT;\r\n  /**\r\n   * Size of progress\r\n   * enum SIZE_VAR\r\n   * possible options `XS | SM | MD | LG | XL`\r\n   */\r\n  @Prop() size: SIZE_VAR = SIZE_VAR.MD;\r\n\r\n  // Update 'xv-progress-indicator-item' done status\r\n  @Watch('progress')\r\n  updateChildItems() {\r\n    const items = this.el.children;\r\n    const itemsCount = this.el.childElementCount;\r\n    const progressPerItem = 100 / itemsCount;\r\n\r\n    if (!items.length || !itemsCount) return;\r\n\r\n    forEach(items, (item, index) => {\r\n      const itemProgressStart = index * progressPerItem;\r\n      let status: PROGRESS_ITEM_STATUS;\r\n      const localProgress = Math.min(\r\n        Math.max((this.progress - itemProgressStart) / progressPerItem, 0), 1\r\n      ) * 100;\r\n\r\n      if (localProgress >= 100) {\r\n        status = PROGRESS_ITEM_STATUS.DONE;\r\n      } else if (localProgress > 0) {\r\n        status = PROGRESS_ITEM_STATUS.IN_PROGRESS;\r\n      } else {\r\n        status = PROGRESS_ITEM_STATUS.NO_STARTED;\r\n      }\r\n\r\n      // Set item current status\r\n      (item as HTMLElement).setAttribute('status', status);\r\n\r\n      // Update progress line\r\n      const line = (item as HTMLElement)?.shadowRoot?.querySelector('.line') as HTMLElement;\r\n      if (line) line.style.width = `${localProgress}%`;\r\n    });\r\n  }\r\n\r\n  // Load initial done status\r\n  componentDidLoad() {\r\n    this.updateChildItems()\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host variant={this.variant} size={this.size} class={{ 'xv-progress-indicator': true }}>\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/xv-webcomponents/xv-tab-v2.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-tab-v2.entry.esm.js","sources":["src/components/xv-tabs/xv-tab/xv-tab.scss?tag=xv-tab-v2&encapsulation=shadow","src/components/xv-tabs/xv-tab/xv-tab.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n\r\n:host([loading]) {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: 200px;\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\nimport { SIZE_VAR } from '../../../types/enum';\r\n\r\n@Component({\r\n  tag: 'xv-tab-v2',\r\n  styleUrl: 'xv-tab.scss',\r\n  shadow: true,\r\n})\r\nexport class XvTab {\r\n  @Prop({ reflect: true }) label: string;\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  @Prop({ reflect: true }) loading: boolean = false;\r\n  @Prop() name?: number | string;\r\n\r\n  render() {\r\n    return (\r\n    <Host disabled={this.disabled} name={this.name}>\r\n      {this.loading ? <xv-loader-v2 size={SIZE_VAR.LG} /> : <slot />}\r\n    </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;;AAAA,MAAM,QAAQ,GAAG,+GAA+G;;MCQnH,KAAK,GAAA,MAAA;AALlB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAO2B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAUlD;IAPC,MAAM,GAAA;QACJ,QACA,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAC3C,EAAA,IAAI,CAAC,OAAO,GAAG,CAAc,CAAA,cAAA,EAAA,EAAA,IAAI,EAAE,QAAQ,CAAC,EAAE,EAAA,CAAI,GAAG,CAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,CACzD;;;;;;;"}

package/dist/xv-webcomponents/xv-tab-v2.entry.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h, d as Host } from './index-rZAC0WRb.js';
+import { S as SIZE_VAR } from './enum-DTBL51oP.js';
+
+const xvTabCss = ":host{display:block}:host([loading]){display:flex;align-items:center;justify-content:center;min-height:200px}";
+
+const XvTab = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.disabled = false;
+        this.loading = false;
+    }
+    render() {
+        return (h(Host, { key: 'ab5626ca8b1b80041239573393b4a7c0b67fed1f', disabled: this.disabled, name: this.name }, this.loading ? h("xv-loader-v2", { size: SIZE_VAR.LG }) : h("slot", null)));
+    }
+};
+XvTab.style = xvTabCss;
+
+export { XvTab as xv_tab_v2 };
+//# sourceMappingURL=xv-tab-v2.entry.esm.js.map
+
+//# sourceMappingURL=xv-tab-v2.entry.js.map

package/dist/xv-webcomponents/xv-tab-v2.entry.js.map

@@ -0,0 +1 @@
+{"file":"xv-tab-v2.entry.esm.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,+GAA+G;;MCQnH,KAAK,GAAA,MAAA;AALlB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAO2B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAUlD;IAPC,MAAM,GAAA;QACJ,QACA,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAC3C,EAAA,IAAI,CAAC,OAAO,GAAG,CAAc,CAAA,cAAA,EAAA,EAAA,IAAI,EAAE,QAAQ,CAAC,EAAE,EAAA,CAAI,GAAG,CAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,CACzD;;;;;;;","names":[],"sources":["src/components/xv-tabs/xv-tab/xv-tab.scss?tag=xv-tab-v2&encapsulation=shadow","src/components/xv-tabs/xv-tab/xv-tab.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n\r\n:host([loading]) {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: 200px;\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\nimport { SIZE_VAR } from '../../../types/enum';\r\n\r\n@Component({\r\n  tag: 'xv-tab-v2',\r\n  styleUrl: 'xv-tab.scss',\r\n  shadow: true,\r\n})\r\nexport class XvTab {\r\n  @Prop({ reflect: true }) label: string;\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  @Prop({ reflect: true }) loading: boolean = false;\r\n  @Prop() name?: number | string;\r\n\r\n  render() {\r\n    return (\r\n    <Host disabled={this.disabled} name={this.name}>\r\n      {this.loading ? <xv-loader-v2 size={SIZE_VAR.LG} /> : <slot />}\r\n    </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/xv-webcomponents/xv-table-v2-cell.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-table-v2-cell.entry.esm.js","sources":["src/components/xv-table/xv-table-cell/xv-table-cell.scss?tag=xv-table-v2-cell&encapsulation=shadow","src/components/xv-table/xv-table-cell/xv-table-cell.tsx"],"sourcesContent":[":host {\r\n  white-space: nowrap;\r\n\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  padding: var(--xv-table-padding-y) var(--xv-table-padding-x);\r\n  color: var(--text-primary, #333);\r\n  font-family: var(--ff-body, Tahoma);\r\n  font-size: 14px;\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: 1.2;\r\n  letter-spacing: 0.16px;\r\n  transition: .25s ease-in-out background-color;\r\n}\r\n\r\n:host([multiline]) {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  -webkit-box-orient: vertical;\r\n  white-space: initial;\r\n  padding-bottom: 1px; // overflow some symbols on bottom\r\n  padding-top: 0;\r\n  line-height: 1.2;\r\n}\r\n\r\n// region Cell Align\r\n:host([align=\"left\"]) {\r\n  text-align: left;\r\n}\r\n:host([align=\"right\"]) {\r\n  text-align: right;\r\n}\r\n:host([align=\"center\"]) {\r\n  text-align: center;\r\n}\r\n// endregion\r\n\r\n// region Sorting styles\r\n:host([sort]) {\r\n  position: relative;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  &:before, &:after {\r\n    font-size: 12px;\r\n    line-height: 10px;\r\n    display: inline-flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    position: absolute;\r\n    right: 8px;\r\n    pointer-events: none;\r\n    transition: 350ms ease-in-out opacity;\r\n    opacity: 0;\r\n  }\r\n\r\n  &:before {\r\n    content: \"▲\";\r\n    top: 50%;\r\n    transform: translateY(calc(-50% - 5px));\r\n  }\r\n\r\n  &::after {\r\n    content: \"▼\";\r\n    top: 50%;\r\n    transform: translateY(calc(-50% + 5px));\r\n  }\r\n}\r\n:host([sort]:hover) {\r\n  background-color: var(--layer-accent-hover-01, #E3E3E3);\r\n  &::before, &::after {\r\n    opacity: 1;\r\n  }\r\n}\r\n:host([sort=\"asc\"]) {\r\n  background-color: var(--layer-accent-active-01, #D1D1D1);\r\n  &::before {\r\n    opacity: 1;\r\n  }\r\n\r\n  &::after {\r\n    display: none;\r\n  }\r\n}\r\n:host([sort=\"desc\"]) {\r\n  background-color: var(--layer-accent-active-01, #D1D1D1);\r\n  &::before {\r\n    display: none;\r\n  }\r\n\r\n  &::after {\r\n    opacity: 1;\r\n  }\r\n}\r\n// endregion\r\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core';\r\nimport { XV_SORT_DIR, XVTableSortDto } from '../_vars';\r\nimport { forEach, uidGenerator } from '../../../utils/utils';\r\n\r\n@Component({\r\n  tag: 'xv-table-v2-cell',\r\n  styleUrl: 'xv-table-cell.scss',\r\n  shadow: true,\r\n})\r\nexport class XvTableCell {\r\n  @Element() el: HTMLElement;\r\n  @Prop({ reflect: true }) multiline?: boolean;\r\n  @Prop({ reflect: true, mutable: true }) name?: string;\r\n  @Prop({ reflect: true }) align?: 'left' | 'right' | 'center';\r\n  @Prop({ reflect: true, mutable: true }) sort?: XV_SORT_DIR | '';\r\n  @Event({ eventName: 'sortChange' }) sortChange: EventEmitter<XVTableSortDto>;\r\n\r\n  @Listen('click')\r\n  handleSort() {\r\n    if (this.sort === undefined) return;\r\n    let sort: XV_SORT_DIR | '' = this.sort;\r\n    if (this.sort === '') sort = XV_SORT_DIR.NONE;\r\n\r\n    this.sort = sort === XV_SORT_DIR.NONE ?\r\n      XV_SORT_DIR.ASC : sort === XV_SORT_DIR.ASC ?\r\n        XV_SORT_DIR.DESC : XV_SORT_DIR.NONE;\r\n\r\n    forEach(this.el.parentElement.children, (cell) => {\r\n      if (cell !== this.el && cell.hasAttribute('sort')) {\r\n        cell.setAttribute('sort', 'none');\r\n      }\r\n    });\r\n\r\n    if (!this.name) this.name = uidGenerator();\r\n    this.sortChange.emit({ name: this.name, value: this.sort });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host><slot /></Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;;;AAAA,MAAM,cAAc,GAAG,+/CAA+/C;;MCSzgD,WAAW,GAAA,MAAA;;;;;IAStB,UAAU,GAAA;AACR,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;YAAE;AAC7B,QAAA,IAAI,IAAI,GAAqB,IAAI,CAAC,IAAI;AACtC,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;AAAE,YAAA,IAAI,GAAG,WAAW,CAAC,IAAI;QAE7C,IAAI,CAAC,IAAI,GAAG,IAAI,KAAK,WAAW,CAAC,IAAI;YACnC,WAAW,CAAC,GAAG,GAAG,IAAI,KAAK,WAAW,CAAC,GAAG;YACxC,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,IAAI;AAEvC,QAAA,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC,IAAI,KAAI;AAC/C,YAAA,IAAI,IAAI,KAAK,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;AACjD,gBAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC;;AAErC,SAAC,CAAC;QAEF,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,YAAA,IAAI,CAAC,IAAI,GAAG,YAAY,EAAE;AAC1C,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;;;IAG7D,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CAAO;;;;;;;;"}

package/dist/xv-webcomponents/xv-table-v2-cell.entry.js

@@ -0,0 +1,41 @@
+import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-rZAC0WRb.js';
+import { b as XV_SORT_DIR } from './_vars-FbbDWn6g.js';
+import { a as forEach, u as uidGenerator } from './utils-1tk8kwKx.js';
+
+const xvTableCellCss = "@charset \"UTF-8\";:host{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:var(--xv-table-padding-y) var(--xv-table-padding-x);color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:14px;font-style:normal;font-weight:400;line-height:1.2;letter-spacing:0.16px;transition:0.25s ease-in-out background-color}:host([multiline]){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:initial;padding-bottom:1px;padding-top:0;line-height:1.2}:host([align=left]){text-align:left}:host([align=right]){text-align:right}:host([align=center]){text-align:center}: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}";
+
+const XvTableCell = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sortChange = createEvent(this, "sortChange", 7);
+    }
+    handleSort() {
+        if (this.sort === undefined)
+            return;
+        let sort = this.sort;
+        if (this.sort === '')
+            sort = XV_SORT_DIR.NONE;
+        this.sort = sort === XV_SORT_DIR.NONE ?
+            XV_SORT_DIR.ASC : sort === XV_SORT_DIR.ASC ?
+            XV_SORT_DIR.DESC : XV_SORT_DIR.NONE;
+        forEach(this.el.parentElement.children, (cell) => {
+            if (cell !== this.el && cell.hasAttribute('sort')) {
+                cell.setAttribute('sort', 'none');
+            }
+        });
+        if (!this.name)
+            this.name = uidGenerator();
+        this.sortChange.emit({ name: this.name, value: this.sort });
+    }
+    ;
+    render() {
+        return (h(Host, { key: '3b51796954b9cab437fb8ae086c821ea2b89924a' }, h("slot", { key: '8e51e4891bc18dfd86e51ad0de0fadd2dd2b150e' })));
+    }
+    get el() { return getElement(this); }
+};
+XvTableCell.style = xvTableCellCss;
+
+export { XvTableCell as xv_table_v2_cell };
+//# sourceMappingURL=xv-table-v2-cell.entry.esm.js.map
+
+//# sourceMappingURL=xv-table-v2-cell.entry.js.map

package/dist/xv-webcomponents/xv-table-v2-cell.entry.js.map

@@ -0,0 +1 @@
+{"file":"xv-table-v2-cell.entry.esm.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,+/CAA+/C;;MCSzgD,WAAW,GAAA,MAAA;;;;;IAStB,UAAU,GAAA;AACR,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;YAAE;AAC7B,QAAA,IAAI,IAAI,GAAqB,IAAI,CAAC,IAAI;AACtC,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;AAAE,YAAA,IAAI,GAAG,WAAW,CAAC,IAAI;QAE7C,IAAI,CAAC,IAAI,GAAG,IAAI,KAAK,WAAW,CAAC,IAAI;YACnC,WAAW,CAAC,GAAG,GAAG,IAAI,KAAK,WAAW,CAAC,GAAG;YACxC,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,IAAI;AAEvC,QAAA,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC,IAAI,KAAI;AAC/C,YAAA,IAAI,IAAI,KAAK,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;AACjD,gBAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC;;AAErC,SAAC,CAAC;QAEF,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,YAAA,IAAI,CAAC,IAAI,GAAG,YAAY,EAAE;AAC1C,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;;;IAG7D,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CAAO;;;;;;;;","names":[],"sources":["src/components/xv-table/xv-table-cell/xv-table-cell.scss?tag=xv-table-v2-cell&encapsulation=shadow","src/components/xv-table/xv-table-cell/xv-table-cell.tsx"],"sourcesContent":[":host {\r\n  white-space: nowrap;\r\n\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  padding: var(--xv-table-padding-y) var(--xv-table-padding-x);\r\n  color: var(--text-primary, #333);\r\n  font-family: var(--ff-body, Tahoma);\r\n  font-size: 14px;\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: 1.2;\r\n  letter-spacing: 0.16px;\r\n  transition: .25s ease-in-out background-color;\r\n}\r\n\r\n:host([multiline]) {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  -webkit-box-orient: vertical;\r\n  white-space: initial;\r\n  padding-bottom: 1px; // overflow some symbols on bottom\r\n  padding-top: 0;\r\n  line-height: 1.2;\r\n}\r\n\r\n// region Cell Align\r\n:host([align=\"left\"]) {\r\n  text-align: left;\r\n}\r\n:host([align=\"right\"]) {\r\n  text-align: right;\r\n}\r\n:host([align=\"center\"]) {\r\n  text-align: center;\r\n}\r\n// endregion\r\n\r\n// region Sorting styles\r\n:host([sort]) {\r\n  position: relative;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  &:before, &:after {\r\n    font-size: 12px;\r\n    line-height: 10px;\r\n    display: inline-flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    position: absolute;\r\n    right: 8px;\r\n    pointer-events: none;\r\n    transition: 350ms ease-in-out opacity;\r\n    opacity: 0;\r\n  }\r\n\r\n  &:before {\r\n    content: \"▲\";\r\n    top: 50%;\r\n    transform: translateY(calc(-50% - 5px));\r\n  }\r\n\r\n  &::after {\r\n    content: \"▼\";\r\n    top: 50%;\r\n    transform: translateY(calc(-50% + 5px));\r\n  }\r\n}\r\n:host([sort]:hover) {\r\n  background-color: var(--layer-accent-hover-01, #E3E3E3);\r\n  &::before, &::after {\r\n    opacity: 1;\r\n  }\r\n}\r\n:host([sort=\"asc\"]) {\r\n  background-color: var(--layer-accent-active-01, #D1D1D1);\r\n  &::before {\r\n    opacity: 1;\r\n  }\r\n\r\n  &::after {\r\n    display: none;\r\n  }\r\n}\r\n:host([sort=\"desc\"]) {\r\n  background-color: var(--layer-accent-active-01, #D1D1D1);\r\n  &::before {\r\n    display: none;\r\n  }\r\n\r\n  &::after {\r\n    opacity: 1;\r\n  }\r\n}\r\n// endregion\r\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core';\r\nimport { XV_SORT_DIR, XVTableSortDto } from '../_vars';\r\nimport { forEach, uidGenerator } from '../../../utils/utils';\r\n\r\n@Component({\r\n  tag: 'xv-table-v2-cell',\r\n  styleUrl: 'xv-table-cell.scss',\r\n  shadow: true,\r\n})\r\nexport class XvTableCell {\r\n  @Element() el: HTMLElement;\r\n  @Prop({ reflect: true }) multiline?: boolean;\r\n  @Prop({ reflect: true, mutable: true }) name?: string;\r\n  @Prop({ reflect: true }) align?: 'left' | 'right' | 'center';\r\n  @Prop({ reflect: true, mutable: true }) sort?: XV_SORT_DIR | '';\r\n  @Event({ eventName: 'sortChange' }) sortChange: EventEmitter<XVTableSortDto>;\r\n\r\n  @Listen('click')\r\n  handleSort() {\r\n    if (this.sort === undefined) return;\r\n    let sort: XV_SORT_DIR | '' = this.sort;\r\n    if (this.sort === '') sort = XV_SORT_DIR.NONE;\r\n\r\n    this.sort = sort === XV_SORT_DIR.NONE ?\r\n      XV_SORT_DIR.ASC : sort === XV_SORT_DIR.ASC ?\r\n        XV_SORT_DIR.DESC : XV_SORT_DIR.NONE;\r\n\r\n    forEach(this.el.parentElement.children, (cell) => {\r\n      if (cell !== this.el && cell.hasAttribute('sort')) {\r\n        cell.setAttribute('sort', 'none');\r\n      }\r\n    });\r\n\r\n    if (!this.name) this.name = uidGenerator();\r\n    this.sortChange.emit({ name: this.name, value: this.sort });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host><slot /></Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/xv-webcomponents/xv-table-v2-expand.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-table-v2-expand.entry.esm.js","sources":["src/components/xv-table/xv-table-expand/xv-table-expand.scss?tag=xv-table-v2-expand&encapsulation=shadow","src/components/xv-table/xv-table-expand/xv-table-expand.tsx"],"sourcesContent":["$tag-name: xv-table-v2;\r\n\r\n:host {\r\n  display: block;\r\n  position: relative;\r\n  transition: .25s ease-in-out background-color;\r\n\r\n  .expand-btn {\r\n    z-index: 9;\r\n    position: absolute;\r\n    left: max(10px, var(--xv-table-padding-x));\r\n    top: max(2px, calc(var(--xv-table-padding-y) + 2px));\r\n    background-color: transparent;\r\n    cursor: pointer;\r\n    outline: none;\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n    display: block;\r\n    width: 8.5px;\r\n    height: 8.5px;\r\n    border-top: none;\r\n    border-left: none;\r\n    border-right: 2px solid var(--icon-primary, #333);\r\n    border-bottom: 2px solid var(--icon-primary, #333);\r\n    transform: rotate(45deg);\r\n    transform-origin: center center;\r\n    transition: .2s ease-in-out transform;\r\n    &:disabled {\r\n      cursor: not-allowed;\r\n      opacity: 0.5;\r\n    }\r\n    &.open {\r\n      transform: rotate(-135deg);\r\n    }\r\n  }\r\n\r\n  .expandableContent {\r\n    overflow: hidden;\r\n    margin: 0;\r\n    padding: 0;\r\n    max-height: 0;\r\n    transition: 250ms ease max-height;\r\n    &.open {\r\n      max-height: 600px;\r\n    }\r\n  }\r\n\r\n  ::slotted([slot=\"expandable\"]) {\r\n    display: grid;\r\n    align-items: center;\r\n  }\r\n\r\n  ::slotted(#{$tag-name}-row),\r\n  ::slotted([slot=\"expandable\"]) {\r\n    padding-inline-start: calc((max(10px, var(--xv-table-padding-x)) * 2) + 10px);\r\n  }\r\n\r\n  ::slotted([disabled]) {\r\n    pointer-events: none;\r\n    opacity: 0.4;\r\n    cursor: not-allowed;\r\n    user-select: none;\r\n  }\r\n}\r\n","import { Component, Host, h, Element, Prop } from '@stencil/core';\r\nimport { XV_EXPANDABLE_KEY } from '../_vars';\r\nimport { setAttr } from '../../../utils/utils';\r\n\r\n@Component({\r\n  tag: 'xv-table-v2-expand',\r\n  styleUrl: 'xv-table-expand.scss',\r\n  shadow: true,\r\n})\r\nexport class XvTableExpand {\r\n  @Element() el: HTMLElement;\r\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  private handleExpand = () => {\r\n    this.open = !this.open;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button\r\n          class={{ 'expand-btn': true, open: this.open }}\r\n          disabled={this.disabled}\r\n          onClick={this.handleExpand}\r\n        />\r\n        <slot name={XV_EXPANDABLE_KEY} />\r\n\r\n        <div class={{ expandableContent: true, open: this.open }}><slot /></div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  componentDidLoad() {\r\n    setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);\r\n  }\r\n}\r\n"],"names":[],"mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,4nCAA4nC;;MCSxoC,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAO0C,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AACpC,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAE1C,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAC1B,YAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;AACxB,SAAC;AAoBF;IAlBC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,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,EAC1B,CAAA,EACF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,iBAAiB,EAAI,CAAA,EAEjC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAA,EAAE,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CAAM,CACnE;;IAIX,gBAAgB,GAAA;QACd,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,iBAAiB,EAAE,IAAI,CAAC;;;;;;;;"}

package/dist/xv-webcomponents/xv-table-v2-expand.entry.js

@@ -0,0 +1,29 @@
+import { r as registerInstance, h, d as Host, e as getElement } from './index-rZAC0WRb.js';
+import { X as XV_EXPANDABLE_KEY } from './_vars-FbbDWn6g.js';
+import { s as setAttr } from './utils-1tk8kwKx.js';
+
+const xvTableExpandCss = ":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}";
+
+const XvTableExpand = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.open = false;
+        this.disabled = false;
+        this.handleExpand = () => {
+            this.open = !this.open;
+        };
+    }
+    render() {
+        return (h(Host, { key: '5748c96eacb85192d08c2aa8fcf235d404d79221' }, h("button", { key: 'da8dfde6a041cc0e6f69e3b3cd8974731e583d1d', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: '7f8c9de9e8d6562b34f10844cc5f90f17ce301bc', name: XV_EXPANDABLE_KEY }), h("div", { key: '0742764a8badfb38c7ea2fffca5c601904b62353', class: { expandableContent: true, open: this.open } }, h("slot", { key: 'f8156b47f9feeb64005aef91b606ebb4a66072fb' }))));
+    }
+    componentDidLoad() {
+        setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);
+    }
+    get el() { return getElement(this); }
+};
+XvTableExpand.style = xvTableExpandCss;
+
+export { XvTableExpand as xv_table_v2_expand };
+//# sourceMappingURL=xv-table-v2-expand.entry.esm.js.map
+
+//# sourceMappingURL=xv-table-v2-expand.entry.js.map

package/dist/xv-webcomponents/xv-table-v2-expand.entry.js.map

@@ -0,0 +1 @@
+{"file":"xv-table-v2-expand.entry.esm.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,4nCAA4nC;;MCSxoC,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAO0C,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AACpC,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAE1C,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAC1B,YAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;AACxB,SAAC;AAoBF;IAlBC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,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,EAC1B,CAAA,EACF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,iBAAiB,EAAI,CAAA,EAEjC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAA,EAAE,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CAAM,CACnE;;IAIX,gBAAgB,GAAA;QACd,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,iBAAiB,EAAE,IAAI,CAAC;;;;;;;;","names":[],"sources":["src/components/xv-table/xv-table-expand/xv-table-expand.scss?tag=xv-table-v2-expand&encapsulation=shadow","src/components/xv-table/xv-table-expand/xv-table-expand.tsx"],"sourcesContent":["$tag-name: xv-table-v2;\r\n\r\n:host {\r\n  display: block;\r\n  position: relative;\r\n  transition: .25s ease-in-out background-color;\r\n\r\n  .expand-btn {\r\n    z-index: 9;\r\n    position: absolute;\r\n    left: max(10px, var(--xv-table-padding-x));\r\n    top: max(2px, calc(var(--xv-table-padding-y) + 2px));\r\n    background-color: transparent;\r\n    cursor: pointer;\r\n    outline: none;\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n    display: block;\r\n    width: 8.5px;\r\n    height: 8.5px;\r\n    border-top: none;\r\n    border-left: none;\r\n    border-right: 2px solid var(--icon-primary, #333);\r\n    border-bottom: 2px solid var(--icon-primary, #333);\r\n    transform: rotate(45deg);\r\n    transform-origin: center center;\r\n    transition: .2s ease-in-out transform;\r\n    &:disabled {\r\n      cursor: not-allowed;\r\n      opacity: 0.5;\r\n    }\r\n    &.open {\r\n      transform: rotate(-135deg);\r\n    }\r\n  }\r\n\r\n  .expandableContent {\r\n    overflow: hidden;\r\n    margin: 0;\r\n    padding: 0;\r\n    max-height: 0;\r\n    transition: 250ms ease max-height;\r\n    &.open {\r\n      max-height: 600px;\r\n    }\r\n  }\r\n\r\n  ::slotted([slot=\"expandable\"]) {\r\n    display: grid;\r\n    align-items: center;\r\n  }\r\n\r\n  ::slotted(#{$tag-name}-row),\r\n  ::slotted([slot=\"expandable\"]) {\r\n    padding-inline-start: calc((max(10px, var(--xv-table-padding-x)) * 2) + 10px);\r\n  }\r\n\r\n  ::slotted([disabled]) {\r\n    pointer-events: none;\r\n    opacity: 0.4;\r\n    cursor: not-allowed;\r\n    user-select: none;\r\n  }\r\n}\r\n","import { Component, Host, h, Element, Prop } from '@stencil/core';\r\nimport { XV_EXPANDABLE_KEY } from '../_vars';\r\nimport { setAttr } from '../../../utils/utils';\r\n\r\n@Component({\r\n  tag: 'xv-table-v2-expand',\r\n  styleUrl: 'xv-table-expand.scss',\r\n  shadow: true,\r\n})\r\nexport class XvTableExpand {\r\n  @Element() el: HTMLElement;\r\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  private handleExpand = () => {\r\n    this.open = !this.open;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button\r\n          class={{ 'expand-btn': true, open: this.open }}\r\n          disabled={this.disabled}\r\n          onClick={this.handleExpand}\r\n        />\r\n        <slot name={XV_EXPANDABLE_KEY} />\r\n\r\n        <div class={{ expandableContent: true, open: this.open }}><slot /></div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  componentDidLoad() {\r\n    setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);\r\n  }\r\n}\r\n"],"version":3}

package/dist/xv-webcomponents/xv-table-v2-row.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-table-v2-row.entry.esm.js","sources":["src/components/xv-table/xv-table-row/xv-table-row.scss?tag=xv-table-v2-row&encapsulation=shadow","src/components/xv-table/xv-table-row/xv-table-row.tsx"],"sourcesContent":[":host {\r\n  display: grid;\r\n  grid-template-columns: var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));\r\n  border-bottom: 1px solid #E3E3E3;\r\n  border-right: 1px solid #E3E3E3;\r\n  border-left: 1px solid #E3E3E3;\r\n  min-height: var(--xv-table-min-height);\r\n  align-items: center;\r\n  align-content: center;\r\n  transition: .25s ease-in-out background-color;\r\n  .cell-control {\r\n    min-height: 20px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n}\r\n\r\n:host([variant]) {\r\n  grid-template-columns: minmax(47.97px, min-content) var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));\r\n}\r\n\r\n:host([hover]:not([header]):hover) {\r\n  background-color: var(--layer-hover-01, #E9E9E9);\r\n}\r\n:host([checked]) {\r\n  background-color: var(--layer-selected-01, #E3E3E3);\r\n}\r\n:host([checked]:hover) {\r\n  background-color: var(--layer-selected-hover-01, #DADADA);\r\n}\r\n\r\n:host([header]) {\r\n  background-color: var(--layer-accent-01, #F7F7F7);\r\n  box-shadow: 0 0 0 1px #E3E3E3 inset;\r\n  border-bottom: none;\r\n}\r\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Watch } from '@stencil/core';\r\nimport { SelectRowDto, XV_EXPANDABLE_KEY, XV_TABLE_TAG } from '../_vars';\r\nimport { setAttr, uidGenerator } from '../../../utils/utils';\r\n\r\n@Component({\r\n  tag: 'xv-table-v2-row',\r\n  styleUrl: 'xv-table-row.scss',\r\n  shadow: true,\r\n})\r\nexport class XvTableRow {\r\n  @Element() el: HTMLElement;\r\n  @Prop({ reflect: true, mutable: true }) checked?: SelectRowDto['checked'];\r\n  @Event({ eventName: 'checkedChange' }) checkedChange: EventEmitter<SelectRowDto>;\r\n  @Prop({ reflect: true, mutable: true }) partial?: SelectRowDto['partial'];\r\n  @Prop({ reflect: true, mutable: true }) name?: SelectRowDto['name'];\r\n  @Prop({ reflect: true }) value?: SelectRowDto['value'];\r\n  @Prop({ reflect: true, mutable: true }) hover?: boolean;\r\n  @Prop({ reflect: true }) readonly?: boolean;\r\n  @Prop({ reflect: true }) required?: boolean;\r\n  @Prop({ reflect: true }) disabled?: boolean;\r\n  @Prop({ reflect: true }) header?: boolean;\r\n  @Prop({ reflect: true, mutable: true }) variant?: 'checkbox' | 'radio' | '';\r\n\r\n  @Event({ eventName: 'selectRow' }) selectRow: EventEmitter<SelectRowDto>;\r\n\r\n  @Watch('checked')\r\n  checkedChangeHandle() {\r\n    if (!this.name) this.name = uidGenerator();\r\n    this.checkedChange.emit({\r\n      name: this.name,\r\n      value: this.value,\r\n      checked: this.checked,\r\n      partial: this.partial,\r\n      header: this.header,\r\n      expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,\r\n    });\r\n  }\r\n\r\n  private checkHandle = ({ detail: checked }: CustomEvent<boolean>) => {\r\n    if (!checked && this.partial) this.partial = checked;\r\n\r\n    if (!this.name) this.name = uidGenerator();\r\n    this.selectRow.emit({\r\n      name: this.name,\r\n      value: this.value,\r\n      checked: checked,\r\n      partial: this.partial,\r\n      header: this.header,\r\n      expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,\r\n    });\r\n  };\r\n\r\n  private setInitialAttrs() {\r\n    if (this.variant || !this.hover) {\r\n      const tableEl = this.el.closest(XV_TABLE_TAG);\r\n      if (!this.hover) {\r\n        this.hover = tableEl.hasAttribute('hover');\r\n      }\r\n      if (this.variant) {\r\n        setAttr(this.el.closest(XV_TABLE_TAG), `variant-${this.variant}`, !!this.variant);\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        {this.variant !== undefined && (\r\n          <xv-table-v2-cell class=\"cell-control\">\r\n            {this.variant === 'checkbox' && (\r\n              <xv-checkbox-v2\r\n                name={this.name}\r\n                partial={this.partial}\r\n                checked={this.checked || this.partial}\r\n                disabled={this.disabled}\r\n                required={this.required}\r\n                readonly={this.readonly}\r\n                onEventChange={this.checkHandle}\r\n              />\r\n            )}\r\n            {this.variant === 'radio' && (\r\n              <input\r\n                type=\"radio\"\r\n                name={this.name}\r\n                checked={this.checked || this.partial}\r\n                disabled={this.disabled}\r\n                required={this.required}\r\n                readonly={this.readonly}\r\n              />\r\n            )}\r\n          </xv-table-v2-cell>\r\n        )}\r\n\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.setInitialAttrs();\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/xv-webcomponents/xv-table-v2-row.entry.js

@@ -0,0 +1,66 @@
+import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-rZAC0WRb.js';
+import { X as XV_EXPANDABLE_KEY, a as XV_TABLE_TAG } from './_vars-FbbDWn6g.js';
+import { u as uidGenerator, s as setAttr } from './utils-1tk8kwKx.js';
+
+const xvTableRowCss = ":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}";
+
+const XvTableRow = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.checkedChange = createEvent(this, "checkedChange", 7);
+        this.selectRow = createEvent(this, "selectRow", 7);
+        this.checkHandle = ({ detail: checked }) => {
+            if (!checked && this.partial)
+                this.partial = checked;
+            if (!this.name)
+                this.name = uidGenerator();
+            this.selectRow.emit({
+                name: this.name,
+                value: this.value,
+                checked: checked,
+                partial: this.partial,
+                header: this.header,
+                expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,
+            });
+        };
+    }
+    checkedChangeHandle() {
+        if (!this.name)
+            this.name = uidGenerator();
+        this.checkedChange.emit({
+            name: this.name,
+            value: this.value,
+            checked: this.checked,
+            partial: this.partial,
+            header: this.header,
+            expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,
+        });
+    }
+    setInitialAttrs() {
+        if (this.variant || !this.hover) {
+            const tableEl = this.el.closest(XV_TABLE_TAG);
+            if (!this.hover) {
+                this.hover = tableEl.hasAttribute('hover');
+            }
+            if (this.variant) {
+                setAttr(this.el.closest(XV_TABLE_TAG), `variant-${this.variant}`, !!this.variant);
+            }
+        }
+    }
+    render() {
+        return (h(Host, { key: 'ab205cfccf9f9b4a468b68e50fa8f0e7449460cb' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: 'ff9994f4fda7f7aee4f0f2bad78539e0ef964812', class: "cell-control" }, this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: 'b79936b69449328baec1403c9ef7769eb3d1b6a5', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly, onEventChange: this.checkHandle })), this.variant === 'radio' && (h("input", { key: 'd1826b08cf52e17e145cf31701492aecc848281d', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: '09cb29d10905b365a7510efa1f88496b3e03ed02' })));
+    }
+    componentWillLoad() {
+        this.setInitialAttrs();
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "checked": ["checkedChangeHandle"]
+    }; }
+};
+XvTableRow.style = xvTableRowCss;
+
+export { XvTableRow as xv_table_v2_row };
+//# sourceMappingURL=xv-table-v2-row.entry.esm.js.map
+
+//# sourceMappingURL=xv-table-v2-row.entry.js.map

package/dist/xv-webcomponents/xv-table-v2-row.entry.js.map

@@ -0,0 +1 @@
+{"file":"xv-table-v2-row.entry.esm.js","mappings":"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","names":[],"sources":["src/components/xv-table/xv-table-row/xv-table-row.scss?tag=xv-table-v2-row&encapsulation=shadow","src/components/xv-table/xv-table-row/xv-table-row.tsx"],"sourcesContent":[":host {\r\n  display: grid;\r\n  grid-template-columns: var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));\r\n  border-bottom: 1px solid #E3E3E3;\r\n  border-right: 1px solid #E3E3E3;\r\n  border-left: 1px solid #E3E3E3;\r\n  min-height: var(--xv-table-min-height);\r\n  align-items: center;\r\n  align-content: center;\r\n  transition: .25s ease-in-out background-color;\r\n  .cell-control {\r\n    min-height: 20px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n}\r\n\r\n:host([variant]) {\r\n  grid-template-columns: minmax(47.97px, min-content) var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));\r\n}\r\n\r\n:host([hover]:not([header]):hover) {\r\n  background-color: var(--layer-hover-01, #E9E9E9);\r\n}\r\n:host([checked]) {\r\n  background-color: var(--layer-selected-01, #E3E3E3);\r\n}\r\n:host([checked]:hover) {\r\n  background-color: var(--layer-selected-hover-01, #DADADA);\r\n}\r\n\r\n:host([header]) {\r\n  background-color: var(--layer-accent-01, #F7F7F7);\r\n  box-shadow: 0 0 0 1px #E3E3E3 inset;\r\n  border-bottom: none;\r\n}\r\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Watch } from '@stencil/core';\r\nimport { SelectRowDto, XV_EXPANDABLE_KEY, XV_TABLE_TAG } from '../_vars';\r\nimport { setAttr, uidGenerator } from '../../../utils/utils';\r\n\r\n@Component({\r\n  tag: 'xv-table-v2-row',\r\n  styleUrl: 'xv-table-row.scss',\r\n  shadow: true,\r\n})\r\nexport class XvTableRow {\r\n  @Element() el: HTMLElement;\r\n  @Prop({ reflect: true, mutable: true }) checked?: SelectRowDto['checked'];\r\n  @Event({ eventName: 'checkedChange' }) checkedChange: EventEmitter<SelectRowDto>;\r\n  @Prop({ reflect: true, mutable: true }) partial?: SelectRowDto['partial'];\r\n  @Prop({ reflect: true, mutable: true }) name?: SelectRowDto['name'];\r\n  @Prop({ reflect: true }) value?: SelectRowDto['value'];\r\n  @Prop({ reflect: true, mutable: true }) hover?: boolean;\r\n  @Prop({ reflect: true }) readonly?: boolean;\r\n  @Prop({ reflect: true }) required?: boolean;\r\n  @Prop({ reflect: true }) disabled?: boolean;\r\n  @Prop({ reflect: true }) header?: boolean;\r\n  @Prop({ reflect: true, mutable: true }) variant?: 'checkbox' | 'radio' | '';\r\n\r\n  @Event({ eventName: 'selectRow' }) selectRow: EventEmitter<SelectRowDto>;\r\n\r\n  @Watch('checked')\r\n  checkedChangeHandle() {\r\n    if (!this.name) this.name = uidGenerator();\r\n    this.checkedChange.emit({\r\n      name: this.name,\r\n      value: this.value,\r\n      checked: this.checked,\r\n      partial: this.partial,\r\n      header: this.header,\r\n      expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,\r\n    });\r\n  }\r\n\r\n  private checkHandle = ({ detail: checked }: CustomEvent<boolean>) => {\r\n    if (!checked && this.partial) this.partial = checked;\r\n\r\n    if (!this.name) this.name = uidGenerator();\r\n    this.selectRow.emit({\r\n      name: this.name,\r\n      value: this.value,\r\n      checked: checked,\r\n      partial: this.partial,\r\n      header: this.header,\r\n      expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,\r\n    });\r\n  };\r\n\r\n  private setInitialAttrs() {\r\n    if (this.variant || !this.hover) {\r\n      const tableEl = this.el.closest(XV_TABLE_TAG);\r\n      if (!this.hover) {\r\n        this.hover = tableEl.hasAttribute('hover');\r\n      }\r\n      if (this.variant) {\r\n        setAttr(this.el.closest(XV_TABLE_TAG), `variant-${this.variant}`, !!this.variant);\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        {this.variant !== undefined && (\r\n          <xv-table-v2-cell class=\"cell-control\">\r\n            {this.variant === 'checkbox' && (\r\n              <xv-checkbox-v2\r\n                name={this.name}\r\n                partial={this.partial}\r\n                checked={this.checked || this.partial}\r\n                disabled={this.disabled}\r\n                required={this.required}\r\n                readonly={this.readonly}\r\n                onEventChange={this.checkHandle}\r\n              />\r\n            )}\r\n            {this.variant === 'radio' && (\r\n              <input\r\n                type=\"radio\"\r\n                name={this.name}\r\n                checked={this.checked || this.partial}\r\n                disabled={this.disabled}\r\n                required={this.required}\r\n                readonly={this.readonly}\r\n              />\r\n            )}\r\n          </xv-table-v2-cell>\r\n        )}\r\n\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.setInitialAttrs();\r\n  }\r\n}\r\n"],"version":3}

package/dist/xv-webcomponents/xv-table-v2.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-table-v2.entry.esm.js","sources":["src/components/xv-table/xv-table.scss?tag=xv-table-v2&encapsulation=shadow","src/components/xv-table/xv-table.tsx"],"sourcesContent":["$tag-name: xv-table-v2;\r\n\r\n:host {\r\n  --xv-table-min-height: 51.11px;\r\n  --xv-table-padding-x: 16px;\r\n  --xv-table-padding-y: 15px;\r\n  --xv-table-cols-template: repeat(auto-fit, minmax(0, 1fr));\r\n\r\n  display: block;\r\n  .batch-actions {\r\n    user-select: none;\r\n    pointer-events: none;\r\n    position: absolute;\r\n    left: 0;\r\n    bottom: 100%;\r\n    width: 0;\r\n    min-height: 48px;\r\n    overflow: hidden;\r\n    border-radius: 3px 3px 0 0;\r\n    background-color: var(--interactive-01, #273435);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    column-gap: var(--spacing-04);\r\n    flex-wrap: nowrap;\r\n    box-sizing: border-box;\r\n    transition: 250ms ease-in-out height, 250ms ease-in-out width, 250ms ease-in-out padding-inline;\r\n\r\n    color:  var(--text-on-color, #fff);\r\n\r\n    &_content {\r\n      display: block;\r\n      overflow: hidden;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    &_count {\r\n      margin: 0;\r\n      white-space: nowrap;\r\n      font-family: var(--ff-body, Tahoma);\r\n      font-size: var(--fz-md, 14px);\r\n      font-style: normal;\r\n      font-weight: 400;\r\n      line-height: var(--fz-lg, 18px);\r\n      letter-spacing: 0.16px;\r\n    }\r\n  }\r\n\r\n  .xv-table {\r\n    display: flex;\r\n    flex-direction: column;\r\n    position: relative;\r\n    &_wrapper {\r\n      display: flex;\r\n      flex-direction: column;\r\n      position: relative;\r\n      overflow-x: auto;\r\n      scrollbar-width: thin;\r\n      scrollbar-color: var(--layer-accent-03) transparent;\r\n      ::slotted(*) {\r\n        min-width: 1000px;\r\n      }\r\n    }\r\n    ::slotted([checked]) {\r\n      background-color: var(--layer-selected-01, #E3E3E3);\r\n    }\r\n    ::slotted([checked]:not([header]):hover) {\r\n      background-color: var(--layer-selected-hover-01, #DADADA);\r\n    }\r\n\r\n    ::slotted(#{$tag-name}-row[disabled]) {\r\n      pointer-events: none;\r\n      opacity: 0.4;\r\n      cursor: not-allowed;\r\n      user-select: none;\r\n    }\r\n\r\n    ::slotted([slot=\"footer\"]:hover),\r\n    ::slotted([slot=\"footer\"]) {\r\n      background-color: var(--layer-accent-02, #E3E3E3);\r\n    }\r\n\r\n    &_loading {\r\n      z-index: 10;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      min-height: var(--xv-table-min-height, 51.11px);\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      background-color: rgba(255, 255, 255, 0.8);\r\n    }\r\n  }\r\n\r\n  .xv-table-title,\r\n  ::slotted([slot=\"title\"]) {\r\n    color: var(--text-primary, #333)!important;\r\n    font-size: var(--fz-xl, 21px)!important;\r\n    margin-top: var(--spacing-05, 16px)!important;\r\n    margin-bottom: var(--spacing-06, 24px)!important;\r\n    font-family: var(--ff-heading, \"Gill Sans\");\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: normal;\r\n  }\r\n}\r\n\r\n:host([hover]) {\r\n  .xv-table {\r\n    ::slotted(:hover:not([header])) {\r\n      background-color: var(--layer-hover-01, #E9E9E9);\r\n    }\r\n  }\r\n}\r\n\r\n:host(.batchVisible) {\r\n  .batch-actions {\r\n    pointer-events: initial;\r\n    user-select: initial;\r\n    width: 100%;\r\n    padding-inline: var(--xv-table-padding-x);\r\n  }\r\n}\r\n\r\n:host([expandable]) {\r\n  ::slotted(#{$tag-name}-row) {\r\n    padding-inline-start: calc((max(10px, var(--xv-table-padding-x)) * 2) + 10px);\r\n  }\r\n}\r\n\r\n:host([variant-checkbox]) {\r\n  ::slotted([slot=\"footer\"]:not([variant])) {\r\n    padding-inline-start: calc((max(10px, var(--xv-table-padding-x)) * 2) + 57.97px);\r\n  }\r\n}\r\n\r\n// region Size Vars\r\n:host([size=\"xs\"]) {\r\n  --xv-table-padding-y: 7px;\r\n  --xv-table-min-height: 35.1px;\r\n}\r\n:host([size=\"sm\"]) {\r\n  --xv-table-padding-y: 10px;\r\n  --xv-table-min-height: 41.11px;\r\n}\r\n:host([size=\"lg\"]) {\r\n  --xv-table-padding-y: 21px;\r\n  --xv-table-min-height: 63.09px;\r\n}\r\n:host([size=\"xl\"]) {\r\n  --xv-table-padding-y: 31px;\r\n  --xv-table-min-height: 78.77px;\r\n}\r\n// endregion\r\n","import { Component, Host, h, Element, Prop, State, Listen, Fragment, Watch } from '@stencil/core';\r\nimport { SIZE_VAR } from '../../types/enum';\r\nimport { SelectRowDto } from './_vars';\r\n\r\n@Component({\r\n  tag: 'xv-table-v2',\r\n  styleUrl: 'xv-table.scss',\r\n  shadow: true,\r\n})\r\nexport class XvTable {\r\n  @Element() el: HTMLElement;\r\n  @Prop({ reflect: true }) size?: SIZE_VAR;\r\n  @Prop({ reflect: true }) hover?: boolean;\r\n  @Prop({ reflect: true }) loading?: boolean;\r\n  @Prop({ reflect: true, attribute: 'colsSize' }) colsSize?: (string | null)[];\r\n  @State() selected: Map<string, SelectRowDto> = new Map();\r\n  @State() selectedCount: number = 0;\r\n\r\n  @Listen('checkedChange')\r\n  handleCheckedChange({ detail }: CustomEvent<SelectRowDto>) {\r\n    if (detail.header || detail.expandable) return;\r\n    if (detail.checked) {\r\n      this.selected.set(detail.name, detail);\r\n    } else {\r\n      this.selected.delete(detail.name);\r\n    }\r\n\r\n    this.selectedCount = this.selected.size;\r\n  }\r\n\r\n  @Watch('colsSize')\r\n  private setColsSizeTemplate() {\r\n    if (!this.colsSize || !this.colsSize?.length) return;\r\n\r\n    this.el.style.setProperty(\r\n      '--xv-table-cols-template',\r\n      this.colsSize\r\n        .map((v) => {\r\n          if (!v) return 'minmax(0, 1fr)';\r\n          if (v === 'auto') return 'minmax(0, auto)';\r\n          return `calc(${v} - ${50 / this.colsSize.length}px)`;\r\n        })\r\n        .join(' ') + ' repeat(auto-fit, minmax(0, 1fr))',\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host class={{ batchVisible: !!this.selectedCount }}>\r\n        <slot name=\"title\">\r\n          {!!this.el.title && <h2 class=\"xv-table-title\">{this.el.title}</h2>}\r\n        </slot>\r\n\r\n        <slot name=\"toolbar\" />\r\n\r\n        <div class=\"xv-table\">\r\n          <div class=\"batch-actions\">\r\n            <Fragment>\r\n              <div class=\"batch-actions_content\">\r\n                <slot name=\"batch\" />\r\n              </div>\r\n              <p class=\"batch-actions_count\">\r\n                {!!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`}\r\n              </p>\r\n            </Fragment>\r\n          </div>\r\n\r\n          <div class=\"xv-table_wrapper\">\r\n            <slot />\r\n\r\n            <slot name=\"footer\" />\r\n          </div>\r\n\r\n          {!!this.loading && (\r\n            <div class=\"xv-table_loading\">\r\n              <xv-loader-v2 size={SIZE_VAR.LG} />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.setColsSizeTemplate();\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/xv-webcomponents/xv-table-v2.entry.js

@@ -0,0 +1,53 @@
+import { r as registerInstance, h, d as Host, F as Fragment, e as getElement } from './index-rZAC0WRb.js';
+import { S as SIZE_VAR } from './enum-DTBL51oP.js';
+
+const xvTableCss = ":host{--xv-table-min-height:51.11px;--xv-table-padding-x:16px;--xv-table-padding-y:15px;--xv-table-cols-template:repeat(auto-fit, minmax(0, 1fr));display:block}:host .batch-actions{user-select:none;pointer-events:none;position:absolute;left:0;bottom:100%;width:0;min-height:48px;overflow:hidden;border-radius:3px 3px 0 0;background-color:var(--interactive-01, #273435);display:flex;align-items:center;justify-content:space-between;column-gap:var(--spacing-04);flex-wrap:nowrap;box-sizing:border-box;transition:250ms ease-in-out height, 250ms ease-in-out width, 250ms ease-in-out padding-inline;color:var(--text-on-color, #fff)}:host .batch-actions_content{display:block;overflow:hidden;white-space:nowrap}:host .batch-actions_count{margin:0;white-space:nowrap;font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);font-style:normal;font-weight:400;line-height:var(--fz-lg, 18px);letter-spacing:0.16px}:host .xv-table{display:flex;flex-direction:column;position:relative}:host .xv-table_wrapper{display:flex;flex-direction:column;position:relative;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--layer-accent-03) transparent}:host .xv-table_wrapper ::slotted(*){min-width:1000px}:host .xv-table ::slotted([checked]){background-color:var(--layer-selected-01, #E3E3E3)}:host .xv-table ::slotted([checked]:not([header]):hover){background-color:var(--layer-selected-hover-01, #DADADA)}:host .xv-table ::slotted(xv-table-v2-row[disabled]){pointer-events:none;opacity:0.4;cursor:not-allowed;user-select:none}:host .xv-table ::slotted([slot=footer]:hover),:host .xv-table ::slotted([slot=footer]){background-color:var(--layer-accent-02, #E3E3E3)}:host .xv-table_loading{z-index:10;display:flex;align-items:center;justify-content:center;min-height:var(--xv-table-min-height, 51.11px);position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8)}:host .xv-table-title,:host ::slotted([slot=title]){color:var(--text-primary, #333) !important;font-size:var(--fz-xl, 21px) !important;margin-top:var(--spacing-05, 16px) !important;margin-bottom:var(--spacing-06, 24px) !important;font-family:var(--ff-heading, \"Gill Sans\");font-style:normal;font-weight:400;line-height:normal}:host([hover]) .xv-table ::slotted(:hover:not([header])){background-color:var(--layer-hover-01, #E9E9E9)}:host(.batchVisible) .batch-actions{pointer-events:initial;user-select:initial;width:100%;padding-inline:var(--xv-table-padding-x)}:host([expandable]) ::slotted(xv-table-v2-row){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 10px)}:host([variant-checkbox]) ::slotted([slot=footer]:not([variant])){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 57.97px)}:host([size=xs]){--xv-table-padding-y:7px;--xv-table-min-height:35.1px}:host([size=sm]){--xv-table-padding-y:10px;--xv-table-min-height:41.11px}:host([size=lg]){--xv-table-padding-y:21px;--xv-table-min-height:63.09px}:host([size=xl]){--xv-table-padding-y:31px;--xv-table-min-height:78.77px}";
+
+const XvTable = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.selected = new Map();
+        this.selectedCount = 0;
+    }
+    handleCheckedChange({ detail }) {
+        if (detail.header || detail.expandable)
+            return;
+        if (detail.checked) {
+            this.selected.set(detail.name, detail);
+        }
+        else {
+            this.selected.delete(detail.name);
+        }
+        this.selectedCount = this.selected.size;
+    }
+    setColsSizeTemplate() {
+        var _a;
+        if (!this.colsSize || !((_a = this.colsSize) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        this.el.style.setProperty('--xv-table-cols-template', this.colsSize
+            .map((v) => {
+            if (!v)
+                return 'minmax(0, 1fr)';
+            if (v === 'auto')
+                return 'minmax(0, auto)';
+            return `calc(${v} - ${50 / this.colsSize.length}px)`;
+        })
+            .join(' ') + ' repeat(auto-fit, minmax(0, 1fr))');
+    }
+    render() {
+        return (h(Host, { key: 'ded26282229fc649b97e1dad8477c126db4f5252', class: { batchVisible: !!this.selectedCount } }, h("slot", { key: '4b9363a86f3f9ca70dac18d626e35dd4e18cdf42', name: "title" }, !!this.el.title && h("h2", { key: '200d896aa49713d4e91a5731f70800793b2221d1', class: "xv-table-title" }, this.el.title)), h("slot", { key: '826e0be7b4888df6a230681c1721e3286ea1e1bc', name: "toolbar" }), h("div", { key: 'be6602b79e2ecbff1bfeb3e32e3ce3bc8ad09884', class: "xv-table" }, h("div", { key: '285299cc4b985fab3e6af4f0b0e497057ca7ff8c', class: "batch-actions" }, h(Fragment, { key: '581d27ee589290cc99511a77cc9db13471346d12' }, h("div", { key: 'f30f483266952a3397bace47c5612fc2b18c9498', class: "batch-actions_content" }, h("slot", { key: 'd998f2f69d9c3590c41a7ea451014c98b715c426', name: "batch" })), h("p", { key: 'ccf80d7318bd7aa88d4e8686baa720e6ac96a252', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), h("div", { key: 'a37e270d3fb63e30be07177582844e462f6e6d16', class: "xv-table_wrapper" }, h("slot", { key: 'cb64636af34961f6c9dab919eb4a83e30e2e19df' }), h("slot", { key: '1a6a0e7a3d8abeefc1de319cde2ad47545c0413d', name: "footer" })), !!this.loading && (h("div", { key: '3a17bfec878f53278ede3d8150821d90779ddf44', class: "xv-table_loading" }, h("xv-loader-v2", { key: 'a187734b679af1fc937cec803bd194b8d470f290', size: SIZE_VAR.LG }))))));
+    }
+    componentWillLoad() {
+        this.setColsSizeTemplate();
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "colsSize": ["setColsSizeTemplate"]
+    }; }
+};
+XvTable.style = xvTableCss;
+
+export { XvTable as xv_table_v2 };
+//# sourceMappingURL=xv-table-v2.entry.esm.js.map
+
+//# sourceMappingURL=xv-table-v2.entry.js.map

package/dist/xv-webcomponents/xv-table-v2.entry.js.map

@@ -0,0 +1 @@
+{"file":"xv-table-v2.entry.esm.js","mappings":"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","names":[],"sources":["src/components/xv-table/xv-table.scss?tag=xv-table-v2&encapsulation=shadow","src/components/xv-table/xv-table.tsx"],"sourcesContent":["$tag-name: xv-table-v2;\r\n\r\n:host {\r\n  --xv-table-min-height: 51.11px;\r\n  --xv-table-padding-x: 16px;\r\n  --xv-table-padding-y: 15px;\r\n  --xv-table-cols-template: repeat(auto-fit, minmax(0, 1fr));\r\n\r\n  display: block;\r\n  .batch-actions {\r\n    user-select: none;\r\n    pointer-events: none;\r\n    position: absolute;\r\n    left: 0;\r\n    bottom: 100%;\r\n    width: 0;\r\n    min-height: 48px;\r\n    overflow: hidden;\r\n    border-radius: 3px 3px 0 0;\r\n    background-color: var(--interactive-01, #273435);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    column-gap: var(--spacing-04);\r\n    flex-wrap: nowrap;\r\n    box-sizing: border-box;\r\n    transition: 250ms ease-in-out height, 250ms ease-in-out width, 250ms ease-in-out padding-inline;\r\n\r\n    color:  var(--text-on-color, #fff);\r\n\r\n    &_content {\r\n      display: block;\r\n      overflow: hidden;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    &_count {\r\n      margin: 0;\r\n      white-space: nowrap;\r\n      font-family: var(--ff-body, Tahoma);\r\n      font-size: var(--fz-md, 14px);\r\n      font-style: normal;\r\n      font-weight: 400;\r\n      line-height: var(--fz-lg, 18px);\r\n      letter-spacing: 0.16px;\r\n    }\r\n  }\r\n\r\n  .xv-table {\r\n    display: flex;\r\n    flex-direction: column;\r\n    position: relative;\r\n    &_wrapper {\r\n      display: flex;\r\n      flex-direction: column;\r\n      position: relative;\r\n      overflow-x: auto;\r\n      scrollbar-width: thin;\r\n      scrollbar-color: var(--layer-accent-03) transparent;\r\n      ::slotted(*) {\r\n        min-width: 1000px;\r\n      }\r\n    }\r\n    ::slotted([checked]) {\r\n      background-color: var(--layer-selected-01, #E3E3E3);\r\n    }\r\n    ::slotted([checked]:not([header]):hover) {\r\n      background-color: var(--layer-selected-hover-01, #DADADA);\r\n    }\r\n\r\n    ::slotted(#{$tag-name}-row[disabled]) {\r\n      pointer-events: none;\r\n      opacity: 0.4;\r\n      cursor: not-allowed;\r\n      user-select: none;\r\n    }\r\n\r\n    ::slotted([slot=\"footer\"]:hover),\r\n    ::slotted([slot=\"footer\"]) {\r\n      background-color: var(--layer-accent-02, #E3E3E3);\r\n    }\r\n\r\n    &_loading {\r\n      z-index: 10;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      min-height: var(--xv-table-min-height, 51.11px);\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      background-color: rgba(255, 255, 255, 0.8);\r\n    }\r\n  }\r\n\r\n  .xv-table-title,\r\n  ::slotted([slot=\"title\"]) {\r\n    color: var(--text-primary, #333)!important;\r\n    font-size: var(--fz-xl, 21px)!important;\r\n    margin-top: var(--spacing-05, 16px)!important;\r\n    margin-bottom: var(--spacing-06, 24px)!important;\r\n    font-family: var(--ff-heading, \"Gill Sans\");\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: normal;\r\n  }\r\n}\r\n\r\n:host([hover]) {\r\n  .xv-table {\r\n    ::slotted(:hover:not([header])) {\r\n      background-color: var(--layer-hover-01, #E9E9E9);\r\n    }\r\n  }\r\n}\r\n\r\n:host(.batchVisible) {\r\n  .batch-actions {\r\n    pointer-events: initial;\r\n    user-select: initial;\r\n    width: 100%;\r\n    padding-inline: var(--xv-table-padding-x);\r\n  }\r\n}\r\n\r\n:host([expandable]) {\r\n  ::slotted(#{$tag-name}-row) {\r\n    padding-inline-start: calc((max(10px, var(--xv-table-padding-x)) * 2) + 10px);\r\n  }\r\n}\r\n\r\n:host([variant-checkbox]) {\r\n  ::slotted([slot=\"footer\"]:not([variant])) {\r\n    padding-inline-start: calc((max(10px, var(--xv-table-padding-x)) * 2) + 57.97px);\r\n  }\r\n}\r\n\r\n// region Size Vars\r\n:host([size=\"xs\"]) {\r\n  --xv-table-padding-y: 7px;\r\n  --xv-table-min-height: 35.1px;\r\n}\r\n:host([size=\"sm\"]) {\r\n  --xv-table-padding-y: 10px;\r\n  --xv-table-min-height: 41.11px;\r\n}\r\n:host([size=\"lg\"]) {\r\n  --xv-table-padding-y: 21px;\r\n  --xv-table-min-height: 63.09px;\r\n}\r\n:host([size=\"xl\"]) {\r\n  --xv-table-padding-y: 31px;\r\n  --xv-table-min-height: 78.77px;\r\n}\r\n// endregion\r\n","import { Component, Host, h, Element, Prop, State, Listen, Fragment, Watch } from '@stencil/core';\r\nimport { SIZE_VAR } from '../../types/enum';\r\nimport { SelectRowDto } from './_vars';\r\n\r\n@Component({\r\n  tag: 'xv-table-v2',\r\n  styleUrl: 'xv-table.scss',\r\n  shadow: true,\r\n})\r\nexport class XvTable {\r\n  @Element() el: HTMLElement;\r\n  @Prop({ reflect: true }) size?: SIZE_VAR;\r\n  @Prop({ reflect: true }) hover?: boolean;\r\n  @Prop({ reflect: true }) loading?: boolean;\r\n  @Prop({ reflect: true, attribute: 'colsSize' }) colsSize?: (string | null)[];\r\n  @State() selected: Map<string, SelectRowDto> = new Map();\r\n  @State() selectedCount: number = 0;\r\n\r\n  @Listen('checkedChange')\r\n  handleCheckedChange({ detail }: CustomEvent<SelectRowDto>) {\r\n    if (detail.header || detail.expandable) return;\r\n    if (detail.checked) {\r\n      this.selected.set(detail.name, detail);\r\n    } else {\r\n      this.selected.delete(detail.name);\r\n    }\r\n\r\n    this.selectedCount = this.selected.size;\r\n  }\r\n\r\n  @Watch('colsSize')\r\n  private setColsSizeTemplate() {\r\n    if (!this.colsSize || !this.colsSize?.length) return;\r\n\r\n    this.el.style.setProperty(\r\n      '--xv-table-cols-template',\r\n      this.colsSize\r\n        .map((v) => {\r\n          if (!v) return 'minmax(0, 1fr)';\r\n          if (v === 'auto') return 'minmax(0, auto)';\r\n          return `calc(${v} - ${50 / this.colsSize.length}px)`;\r\n        })\r\n        .join(' ') + ' repeat(auto-fit, minmax(0, 1fr))',\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host class={{ batchVisible: !!this.selectedCount }}>\r\n        <slot name=\"title\">\r\n          {!!this.el.title && <h2 class=\"xv-table-title\">{this.el.title}</h2>}\r\n        </slot>\r\n\r\n        <slot name=\"toolbar\" />\r\n\r\n        <div class=\"xv-table\">\r\n          <div class=\"batch-actions\">\r\n            <Fragment>\r\n              <div class=\"batch-actions_content\">\r\n                <slot name=\"batch\" />\r\n              </div>\r\n              <p class=\"batch-actions_count\">\r\n                {!!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`}\r\n              </p>\r\n            </Fragment>\r\n          </div>\r\n\r\n          <div class=\"xv-table_wrapper\">\r\n            <slot />\r\n\r\n            <slot name=\"footer\" />\r\n          </div>\r\n\r\n          {!!this.loading && (\r\n            <div class=\"xv-table_loading\">\r\n              <xv-loader-v2 size={SIZE_VAR.LG} />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.setColsSizeTemplate();\r\n  }\r\n}\r\n"],"version":3}

package/dist/xv-webcomponents/xv-tabs-v2.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-tabs-v2.entry.esm.js","sources":["src/components/xv-tabs/_vars.ts","src/components/xv-tabs/xv-tabs.scss?tag=xv-tabs-v2&encapsulation=shadow","src/components/xv-tabs/xv-tabs.tsx"],"sourcesContent":["export enum TAB_TAGS {\r\n  TABS = 'xv-tabs-v2',\r\n  TAB = 'xv-tab-v2'\r\n}\r\n\r\nexport enum TABS_VATIANT {\r\n  DEFAULT = '',\r\n  // other variants will be here\r\n}\r\n","$tab-tag: xv-tab-v2;\r\n$tab-text-active-color: var(--text-primary, #333);\r\n$tab-text-color: var(--text-secondary, #515151);\r\n$tab-border-active-color: var(--interactive-01, #273435);\r\n$tab-border-color: var(--border-border-subtle-01, #D1D1D1);\r\n\r\n:host(.xv-tabs) {\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  .tab-headers {\r\n    position: relative;\r\n    display: flex;\r\n    flex-wrap: nowrap;\r\n    &_container {\r\n      display: flex;\r\n      flex: 1 1 auto;\r\n      white-space: nowrap;\r\n      overflow-x: auto;\r\n      scroll-behavior: smooth;\r\n      &::-webkit-scrollbar {\r\n        display: none;\r\n      }\r\n    }\r\n\r\n    &_tab {\r\n      background: none;\r\n      padding: 11px var(--gap-md, 16px);\r\n      cursor: pointer;\r\n      font: inherit;\r\n      transition: border-color 0.3s ease, font-weight 0.3s ease, color 0.3s ease;\r\n      position: relative;\r\n      border: 2px solid transparent;\r\n      border-bottom-color: $tab-border-color;\r\n      background-blend-mode: multiply;\r\n      color: $tab-text-color;\r\n      font-family: var(--ff-body, Tahoma);\r\n      font-size: var(--fz-md, 14px);\r\n      line-height: 18px;\r\n      letter-spacing: 0.16px;\r\n      height: 40px;\r\n      white-space: nowrap;\r\n\r\n      &:after {\r\n        content: '';\r\n        position: absolute;\r\n        transition: background-color 0.3s ease, width 0.3s ease;\r\n        top: 100%;\r\n        left: 0;\r\n        right: 0;\r\n        width: 0;\r\n        height: 2px;\r\n        background-color: $tab-border-active-color;\r\n      }\r\n\r\n      &:focus {\r\n        outline: none;\r\n        border: 2px solid $tab-border-color;\r\n      }\r\n\r\n      &:hover {\r\n        border-bottom-color: var(--border-strong-01, #8B8B8B);\r\n      }\r\n\r\n      &.active {\r\n        color: $tab-text-active-color;\r\n        font-weight: 700;\r\n        &:after {\r\n          width: 100%;\r\n        }\r\n\r\n        &:focus {\r\n          border-color: $tab-border-active-color;\r\n        }\r\n      }\r\n\r\n      &:disabled {\r\n        color: var(--text-on-color-disabled, #8B8B8B);\r\n        border-bottom-color: var(--border-disabled, #D1D1D1);\r\n        cursor: not-allowed;\r\n        &:after {\r\n          background-color: var(--border-disabled, #D1D1D1);\r\n        }\r\n      }\r\n    }\r\n\r\n    &_btn {\r\n      outline: none;\r\n      width: 40px;\r\n      height: 40px;\r\n      background: none;\r\n      border: none;\r\n      cursor: pointer;\r\n      position: relative;\r\n      transition: 0.25s ease-in-out opacity;\r\n\r\n      &:before {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        width: 0;\r\n        height: 0;\r\n        border: solid currentColor;\r\n        border-width: 0 2px 2px 0;\r\n        display: inline-block;\r\n        padding: 5px;\r\n        transform: translate(-50%, -50%) rotate(45deg);\r\n      }\r\n\r\n      &:active {\r\n        opacity: 0.3;\r\n      }\r\n\r\n      &.prev:before {\r\n        transform: translate(-50%, -50%) rotate(135deg);\r\n      }\r\n      &.next:before {\r\n        transform: translate(-50%, -50%) rotate(-45deg);\r\n      }\r\n    }\r\n  }\r\n\r\n  .tab-content-wrapper {\r\n    position: relative;\r\n    overflow: hidden;\r\n    padding: var(--gap-md, 16px) 0;\r\n  }\r\n\r\n  ::slotted(#{$tab-tag}) {\r\n    position: absolute;\r\n    opacity: 0;\r\n    max-height: 0;\r\n    transition: max-height 0.5s ease;\r\n    width: 100%;\r\n    pointer-events: none;\r\n  }\r\n\r\n  ::slotted(#{$tab-tag}.active) {\r\n    position: relative;\r\n    opacity: 1;\r\n    overflow-y: auto;\r\n    pointer-events: auto;\r\n    max-height: 1000px;\r\n  }\r\n\r\n  .xv-tabs_empty {\r\n    display: block;\r\n    text-align: center;\r\n    margin: 20px auto;\r\n    font-size: var(--fz-xl);\r\n    color: var(--text-primary);\r\n  }\r\n}\r\n\r\n:host([loading]) {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: 300px;\r\n}\r\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, State, Listen } from '@stencil/core';\r\nimport { TAB_TAGS, TABS_VATIANT } from './_vars';\r\nimport { SIZE_VAR } from '../../types/enum';\r\n\r\n@Component({\r\n  tag: 'xv-tabs-v2',\r\n  styleUrl: 'xv-tabs.scss',\r\n  shadow: true,\r\n})\r\nexport class XvTabs {\r\n  @Element() el: HTMLElement;\r\n  /**\r\n   * Index of active tab\r\n   */\r\n  @Prop({ reflect: true, mutable: true }) active: number | string = 0;\r\n  /**\r\n   * Emit event to outside\r\n   */\r\n  @Event() activeChange: EventEmitter<number | string>;\r\n  /**\r\n   * Show loader\r\n   */\r\n  @Prop({ reflect: true }) loading?: boolean;\r\n  /**\r\n   * Variant of tabs from TABS_VATIANT enum\r\n   */\r\n  @Prop() variant: TABS_VATIANT = TABS_VATIANT.DEFAULT;\r\n  /**\r\n   * Message when have no tabs\r\n   */\r\n  @Prop() emptyMessage?: string;\r\n  /**\r\n   * local variable for tab labels collection\r\n   */\r\n  @State() tabElements: HTMLElement[] = [];\r\n  /**\r\n   * Is show arrows for scroll\r\n   */\r\n  @State() showArrows: boolean = false;\r\n\r\n  @Listen('resize', { target: 'window' })\r\n  updateArrowVisibility() {\r\n    const container = this.el.shadowRoot?.querySelector('.tab-headers_container') as HTMLElement | null;\r\n    if (!container) return;\r\n\r\n    this.showArrows = container.scrollWidth > container.clientWidth;\r\n  }\r\n\r\n  private collectTabs = () => {\r\n    if (!this.tabElements.length) {\r\n      this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));\r\n      this.tabElements.forEach((tab) => {\r\n        if (tab.hasAttribute('name') && !this.active) {\r\n          this.active = tab.getAttribute('name');\r\n        }\r\n      })\r\n\r\n      setTimeout(() => this.updateArrowVisibility(), 100);\r\n    }\r\n  }\r\n\r\n  private updateTabClasses() {\r\n    this.tabElements.forEach((tab, i) => {\r\n      tab.classList.toggle(\r\n        'active',\r\n        (tab.getAttribute('name') || `${i}`) === `${this.active}`\r\n      );\r\n    });\r\n  }\r\n\r\n  private handleTabClick(active: string | number) {\r\n    if (active === this.active) return;\r\n\r\n    this.active = active;\r\n    this.activeChange.emit(Number(this.active) || this.active);\r\n    this.scrollToActiveTab();\r\n  }\r\n\r\n  private scrollToActiveTab() {\r\n    if (!this.showArrows) return;\r\n\r\n    // wait next JS tik\r\n    setTimeout(() => {\r\n      this.el.shadowRoot\r\n        .querySelector('.tab-headers_tab.active')\r\n        .scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\r\n    });\r\n  }\r\n\r\n  private setTab(count: number = 1) {\r\n    const currentIdx = this.tabElements.findIndex(\r\n      (tab, i) =>\r\n        (tab.getAttribute('name') || `${i}`) === `${this.active}`\r\n      );\r\n    const nextIdx = currentIdx + count;\r\n\r\n    if (nextIdx < 0 || nextIdx >= this.tabElements.length) return;\r\n\r\n    const nextTab = this.tabElements[nextIdx];\r\n\r\n    if (!nextTab || nextTab.hasAttribute('disabled')) return;\r\n\r\n    this.active = nextTab.getAttribute('name') || `${nextIdx}`;\r\n    this.scrollToActiveTab();\r\n  }\r\n\r\n  render() {\r\n    if (this.loading) {\r\n      return (\r\n        <Host class=\"xv-tabs\" variant={this.variant}>\r\n          <xv-loader-v2 size={SIZE_VAR.XL} />\r\n        </Host>\r\n      )\r\n    }\r\n\r\n    return (\r\n      <Host class=\"xv-tabs\" variant={this.variant}>\r\n        <div class=\"tab-headers\" role=\"tablist\">\r\n          <button\r\n            hidden={!this.showArrows || !this.tabElements?.length}\r\n            aria-label=\"Previous\"\r\n            class=\"tab-headers_btn prev\"\r\n            onClick={() => this.setTab(-1)}\r\n          />\r\n          <div class=\"tab-headers_container\">\r\n            {this.tabElements?.length ? this.tabElements.map((tab, index) => (\r\n              <button\r\n                role=\"tab\"\r\n                disabled={!!tab.getAttribute('disabled') || !!(tab as any)?.disabled}\r\n                class={{\r\n                  'tab-headers_tab': true,\r\n                  active: (tab.getAttribute('name') || `${index}`) === `${this.active}`,\r\n                }}\r\n                onClick={() => this.handleTabClick(tab.getAttribute('name') || `${index}`)}\r\n              >\r\n                {tab.getAttribute('label') || `Tab ${index + 1}`}\r\n              </button>\r\n            )) : this.emptyMessage && <p class=\"xv-tabs_empty\">{this.emptyMessage}</p>}\r\n          </div>\r\n          <button\r\n            aria-label=\"Next\"\r\n            hidden={!this.showArrows || !this.tabElements?.length}\r\n            class=\"tab-headers_btn next\"\r\n            onClick={() => this.setTab(1)}\r\n          />\r\n        </div>\r\n\r\n        <div\r\n          class=\"tab-content-wrapper\"\r\n          role=\"tabpanel\"\r\n          tabindex={-1}\r\n        >\r\n          <slot onSlotchange={this.collectTabs} />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.updateTabClasses();\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/xv-webcomponents/xv-tabs-v2.entry.js

@@ -0,0 +1,109 @@
+import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-rZAC0WRb.js';
+import { S as SIZE_VAR } from './enum-DTBL51oP.js';
+
+var TAB_TAGS;
+(function (TAB_TAGS) {
+    TAB_TAGS["TABS"] = "xv-tabs-v2";
+    TAB_TAGS["TAB"] = "xv-tab-v2";
+})(TAB_TAGS || (TAB_TAGS = {}));
+var TABS_VATIANT;
+(function (TABS_VATIANT) {
+    TABS_VATIANT["DEFAULT"] = "";
+    // other variants will be here
+})(TABS_VATIANT || (TABS_VATIANT = {}));
+
+const xvTabsCss = ":host(.xv-tabs){display:flex;flex-direction:column}:host(.xv-tabs) .tab-headers{position:relative;display:flex;flex-wrap:nowrap}:host(.xv-tabs) .tab-headers_container{display:flex;flex:1 1 auto;white-space:nowrap;overflow-x:auto;scroll-behavior:smooth}:host(.xv-tabs) .tab-headers_container::-webkit-scrollbar{display:none}:host(.xv-tabs) .tab-headers_tab{background:none;padding:11px var(--gap-md, 16px);cursor:pointer;font:inherit;transition:border-color 0.3s ease, font-weight 0.3s ease, color 0.3s ease;position:relative;border:2px solid transparent;border-bottom-color:var(--border-border-subtle-01, #D1D1D1);background-blend-mode:multiply;color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:18px;letter-spacing:0.16px;height:40px;white-space:nowrap}:host(.xv-tabs) .tab-headers_tab:after{content:\"\";position:absolute;transition:background-color 0.3s ease, width 0.3s ease;top:100%;left:0;right:0;width:0;height:2px;background-color:var(--interactive-01, #273435)}:host(.xv-tabs) .tab-headers_tab:focus{outline:none;border:2px solid var(--border-border-subtle-01, #D1D1D1)}:host(.xv-tabs) .tab-headers_tab:hover{border-bottom-color:var(--border-strong-01, #8B8B8B)}:host(.xv-tabs) .tab-headers_tab.active{color:var(--text-primary, #333);font-weight:700}:host(.xv-tabs) .tab-headers_tab.active:after{width:100%}:host(.xv-tabs) .tab-headers_tab.active:focus{border-color:var(--interactive-01, #273435)}:host(.xv-tabs) .tab-headers_tab:disabled{color:var(--text-on-color-disabled, #8B8B8B);border-bottom-color:var(--border-disabled, #D1D1D1);cursor:not-allowed}:host(.xv-tabs) .tab-headers_tab:disabled:after{background-color:var(--border-disabled, #D1D1D1)}:host(.xv-tabs) .tab-headers_btn{outline:none;width:40px;height:40px;background:none;border:none;cursor:pointer;position:relative;transition:0.25s ease-in-out opacity}:host(.xv-tabs) .tab-headers_btn:before{content:\"\";position:absolute;top:50%;left:50%;width:0;height:0;border:solid currentColor;border-width:0 2px 2px 0;display:inline-block;padding:5px;transform:translate(-50%, -50%) rotate(45deg)}:host(.xv-tabs) .tab-headers_btn:active{opacity:0.3}:host(.xv-tabs) .tab-headers_btn.prev:before{transform:translate(-50%, -50%) rotate(135deg)}:host(.xv-tabs) .tab-headers_btn.next:before{transform:translate(-50%, -50%) rotate(-45deg)}:host(.xv-tabs) .tab-content-wrapper{position:relative;overflow:hidden;padding:var(--gap-md, 16px) 0}:host(.xv-tabs) ::slotted(xv-tab-v2){position:absolute;opacity:0;max-height:0;transition:max-height 0.5s ease;width:100%;pointer-events:none}:host(.xv-tabs) ::slotted(xv-tab-v2.active){position:relative;opacity:1;overflow-y:auto;pointer-events:auto;max-height:1000px}:host(.xv-tabs) .xv-tabs_empty{display:block;text-align:center;margin:20px auto;font-size:var(--fz-xl);color:var(--text-primary)}:host([loading]){display:flex;align-items:center;justify-content:center;min-height:300px}";
+
+const XvTabs = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.activeChange = createEvent(this, "activeChange", 7);
+        /**
+         * Index of active tab
+         */
+        this.active = 0;
+        /**
+         * Variant of tabs from TABS_VATIANT enum
+         */
+        this.variant = TABS_VATIANT.DEFAULT;
+        /**
+         * local variable for tab labels collection
+         */
+        this.tabElements = [];
+        /**
+         * Is show arrows for scroll
+         */
+        this.showArrows = false;
+        this.collectTabs = () => {
+            if (!this.tabElements.length) {
+                this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));
+                this.tabElements.forEach((tab) => {
+                    if (tab.hasAttribute('name') && !this.active) {
+                        this.active = tab.getAttribute('name');
+                    }
+                });
+                setTimeout(() => this.updateArrowVisibility(), 100);
+            }
+        };
+    }
+    updateArrowVisibility() {
+        var _a;
+        const container = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tab-headers_container');
+        if (!container)
+            return;
+        this.showArrows = container.scrollWidth > container.clientWidth;
+    }
+    updateTabClasses() {
+        this.tabElements.forEach((tab, i) => {
+            tab.classList.toggle('active', (tab.getAttribute('name') || `${i}`) === `${this.active}`);
+        });
+    }
+    handleTabClick(active) {
+        if (active === this.active)
+            return;
+        this.active = active;
+        this.activeChange.emit(Number(this.active) || this.active);
+        this.scrollToActiveTab();
+    }
+    scrollToActiveTab() {
+        if (!this.showArrows)
+            return;
+        // wait next JS tik
+        setTimeout(() => {
+            this.el.shadowRoot
+                .querySelector('.tab-headers_tab.active')
+                .scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
+        });
+    }
+    setTab(count = 1) {
+        const currentIdx = this.tabElements.findIndex((tab, i) => (tab.getAttribute('name') || `${i}`) === `${this.active}`);
+        const nextIdx = currentIdx + count;
+        if (nextIdx < 0 || nextIdx >= this.tabElements.length)
+            return;
+        const nextTab = this.tabElements[nextIdx];
+        if (!nextTab || nextTab.hasAttribute('disabled'))
+            return;
+        this.active = nextTab.getAttribute('name') || `${nextIdx}`;
+        this.scrollToActiveTab();
+    }
+    render() {
+        var _a, _b, _c;
+        if (this.loading) {
+            return (h(Host, { class: "xv-tabs", variant: this.variant }, h("xv-loader-v2", { size: SIZE_VAR.XL })));
+        }
+        return (h(Host, { class: "xv-tabs", variant: this.variant }, h("div", { class: "tab-headers", role: "tablist" }, h("button", { hidden: !this.showArrows || !((_a = this.tabElements) === null || _a === void 0 ? void 0 : _a.length), "aria-label": "Previous", class: "tab-headers_btn prev", onClick: () => this.setTab(-1) }), h("div", { class: "tab-headers_container" }, ((_b = this.tabElements) === null || _b === void 0 ? void 0 : _b.length) ? this.tabElements.map((tab, index) => (h("button", { role: "tab", disabled: !!tab.getAttribute('disabled') || !!(tab === null || tab === void 0 ? void 0 : tab.disabled), class: {
+                'tab-headers_tab': true,
+                active: (tab.getAttribute('name') || `${index}`) === `${this.active}`,
+            }, onClick: () => this.handleTabClick(tab.getAttribute('name') || `${index}`) }, tab.getAttribute('label') || `Tab ${index + 1}`))) : this.emptyMessage && h("p", { class: "xv-tabs_empty" }, this.emptyMessage)), h("button", { "aria-label": "Next", hidden: !this.showArrows || !((_c = this.tabElements) === null || _c === void 0 ? void 0 : _c.length), class: "tab-headers_btn next", onClick: () => this.setTab(1) })), h("div", { class: "tab-content-wrapper", role: "tabpanel", tabindex: -1 }, h("slot", { onSlotchange: this.collectTabs }))));
+    }
+    componentDidRender() {
+        this.updateTabClasses();
+    }
+    get el() { return getElement(this); }
+};
+XvTabs.style = xvTabsCss;
+
+export { XvTabs as xv_tabs_v2 };
+//# sourceMappingURL=xv-tabs-v2.entry.esm.js.map
+
+//# sourceMappingURL=xv-tabs-v2.entry.js.map

package/dist/xv-webcomponents/xv-tabs-v2.entry.js.map

@@ -0,0 +1 @@
+{"file":"xv-tabs-v2.entry.esm.js","mappings":"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","names":[],"sources":["src/components/xv-tabs/_vars.ts","src/components/xv-tabs/xv-tabs.scss?tag=xv-tabs-v2&encapsulation=shadow","src/components/xv-tabs/xv-tabs.tsx"],"sourcesContent":["export enum TAB_TAGS {\r\n  TABS = 'xv-tabs-v2',\r\n  TAB = 'xv-tab-v2'\r\n}\r\n\r\nexport enum TABS_VATIANT {\r\n  DEFAULT = '',\r\n  // other variants will be here\r\n}\r\n","$tab-tag: xv-tab-v2;\r\n$tab-text-active-color: var(--text-primary, #333);\r\n$tab-text-color: var(--text-secondary, #515151);\r\n$tab-border-active-color: var(--interactive-01, #273435);\r\n$tab-border-color: var(--border-border-subtle-01, #D1D1D1);\r\n\r\n:host(.xv-tabs) {\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  .tab-headers {\r\n    position: relative;\r\n    display: flex;\r\n    flex-wrap: nowrap;\r\n    &_container {\r\n      display: flex;\r\n      flex: 1 1 auto;\r\n      white-space: nowrap;\r\n      overflow-x: auto;\r\n      scroll-behavior: smooth;\r\n      &::-webkit-scrollbar {\r\n        display: none;\r\n      }\r\n    }\r\n\r\n    &_tab {\r\n      background: none;\r\n      padding: 11px var(--gap-md, 16px);\r\n      cursor: pointer;\r\n      font: inherit;\r\n      transition: border-color 0.3s ease, font-weight 0.3s ease, color 0.3s ease;\r\n      position: relative;\r\n      border: 2px solid transparent;\r\n      border-bottom-color: $tab-border-color;\r\n      background-blend-mode: multiply;\r\n      color: $tab-text-color;\r\n      font-family: var(--ff-body, Tahoma);\r\n      font-size: var(--fz-md, 14px);\r\n      line-height: 18px;\r\n      letter-spacing: 0.16px;\r\n      height: 40px;\r\n      white-space: nowrap;\r\n\r\n      &:after {\r\n        content: '';\r\n        position: absolute;\r\n        transition: background-color 0.3s ease, width 0.3s ease;\r\n        top: 100%;\r\n        left: 0;\r\n        right: 0;\r\n        width: 0;\r\n        height: 2px;\r\n        background-color: $tab-border-active-color;\r\n      }\r\n\r\n      &:focus {\r\n        outline: none;\r\n        border: 2px solid $tab-border-color;\r\n      }\r\n\r\n      &:hover {\r\n        border-bottom-color: var(--border-strong-01, #8B8B8B);\r\n      }\r\n\r\n      &.active {\r\n        color: $tab-text-active-color;\r\n        font-weight: 700;\r\n        &:after {\r\n          width: 100%;\r\n        }\r\n\r\n        &:focus {\r\n          border-color: $tab-border-active-color;\r\n        }\r\n      }\r\n\r\n      &:disabled {\r\n        color: var(--text-on-color-disabled, #8B8B8B);\r\n        border-bottom-color: var(--border-disabled, #D1D1D1);\r\n        cursor: not-allowed;\r\n        &:after {\r\n          background-color: var(--border-disabled, #D1D1D1);\r\n        }\r\n      }\r\n    }\r\n\r\n    &_btn {\r\n      outline: none;\r\n      width: 40px;\r\n      height: 40px;\r\n      background: none;\r\n      border: none;\r\n      cursor: pointer;\r\n      position: relative;\r\n      transition: 0.25s ease-in-out opacity;\r\n\r\n      &:before {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        width: 0;\r\n        height: 0;\r\n        border: solid currentColor;\r\n        border-width: 0 2px 2px 0;\r\n        display: inline-block;\r\n        padding: 5px;\r\n        transform: translate(-50%, -50%) rotate(45deg);\r\n      }\r\n\r\n      &:active {\r\n        opacity: 0.3;\r\n      }\r\n\r\n      &.prev:before {\r\n        transform: translate(-50%, -50%) rotate(135deg);\r\n      }\r\n      &.next:before {\r\n        transform: translate(-50%, -50%) rotate(-45deg);\r\n      }\r\n    }\r\n  }\r\n\r\n  .tab-content-wrapper {\r\n    position: relative;\r\n    overflow: hidden;\r\n    padding: var(--gap-md, 16px) 0;\r\n  }\r\n\r\n  ::slotted(#{$tab-tag}) {\r\n    position: absolute;\r\n    opacity: 0;\r\n    max-height: 0;\r\n    transition: max-height 0.5s ease;\r\n    width: 100%;\r\n    pointer-events: none;\r\n  }\r\n\r\n  ::slotted(#{$tab-tag}.active) {\r\n    position: relative;\r\n    opacity: 1;\r\n    overflow-y: auto;\r\n    pointer-events: auto;\r\n    max-height: 1000px;\r\n  }\r\n\r\n  .xv-tabs_empty {\r\n    display: block;\r\n    text-align: center;\r\n    margin: 20px auto;\r\n    font-size: var(--fz-xl);\r\n    color: var(--text-primary);\r\n  }\r\n}\r\n\r\n:host([loading]) {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: 300px;\r\n}\r\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, State, Listen } from '@stencil/core';\r\nimport { TAB_TAGS, TABS_VATIANT } from './_vars';\r\nimport { SIZE_VAR } from '../../types/enum';\r\n\r\n@Component({\r\n  tag: 'xv-tabs-v2',\r\n  styleUrl: 'xv-tabs.scss',\r\n  shadow: true,\r\n})\r\nexport class XvTabs {\r\n  @Element() el: HTMLElement;\r\n  /**\r\n   * Index of active tab\r\n   */\r\n  @Prop({ reflect: true, mutable: true }) active: number | string = 0;\r\n  /**\r\n   * Emit event to outside\r\n   */\r\n  @Event() activeChange: EventEmitter<number | string>;\r\n  /**\r\n   * Show loader\r\n   */\r\n  @Prop({ reflect: true }) loading?: boolean;\r\n  /**\r\n   * Variant of tabs from TABS_VATIANT enum\r\n   */\r\n  @Prop() variant: TABS_VATIANT = TABS_VATIANT.DEFAULT;\r\n  /**\r\n   * Message when have no tabs\r\n   */\r\n  @Prop() emptyMessage?: string;\r\n  /**\r\n   * local variable for tab labels collection\r\n   */\r\n  @State() tabElements: HTMLElement[] = [];\r\n  /**\r\n   * Is show arrows for scroll\r\n   */\r\n  @State() showArrows: boolean = false;\r\n\r\n  @Listen('resize', { target: 'window' })\r\n  updateArrowVisibility() {\r\n    const container = this.el.shadowRoot?.querySelector('.tab-headers_container') as HTMLElement | null;\r\n    if (!container) return;\r\n\r\n    this.showArrows = container.scrollWidth > container.clientWidth;\r\n  }\r\n\r\n  private collectTabs = () => {\r\n    if (!this.tabElements.length) {\r\n      this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));\r\n      this.tabElements.forEach((tab) => {\r\n        if (tab.hasAttribute('name') && !this.active) {\r\n          this.active = tab.getAttribute('name');\r\n        }\r\n      })\r\n\r\n      setTimeout(() => this.updateArrowVisibility(), 100);\r\n    }\r\n  }\r\n\r\n  private updateTabClasses() {\r\n    this.tabElements.forEach((tab, i) => {\r\n      tab.classList.toggle(\r\n        'active',\r\n        (tab.getAttribute('name') || `${i}`) === `${this.active}`\r\n      );\r\n    });\r\n  }\r\n\r\n  private handleTabClick(active: string | number) {\r\n    if (active === this.active) return;\r\n\r\n    this.active = active;\r\n    this.activeChange.emit(Number(this.active) || this.active);\r\n    this.scrollToActiveTab();\r\n  }\r\n\r\n  private scrollToActiveTab() {\r\n    if (!this.showArrows) return;\r\n\r\n    // wait next JS tik\r\n    setTimeout(() => {\r\n      this.el.shadowRoot\r\n        .querySelector('.tab-headers_tab.active')\r\n        .scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\r\n    });\r\n  }\r\n\r\n  private setTab(count: number = 1) {\r\n    const currentIdx = this.tabElements.findIndex(\r\n      (tab, i) =>\r\n        (tab.getAttribute('name') || `${i}`) === `${this.active}`\r\n      );\r\n    const nextIdx = currentIdx + count;\r\n\r\n    if (nextIdx < 0 || nextIdx >= this.tabElements.length) return;\r\n\r\n    const nextTab = this.tabElements[nextIdx];\r\n\r\n    if (!nextTab || nextTab.hasAttribute('disabled')) return;\r\n\r\n    this.active = nextTab.getAttribute('name') || `${nextIdx}`;\r\n    this.scrollToActiveTab();\r\n  }\r\n\r\n  render() {\r\n    if (this.loading) {\r\n      return (\r\n        <Host class=\"xv-tabs\" variant={this.variant}>\r\n          <xv-loader-v2 size={SIZE_VAR.XL} />\r\n        </Host>\r\n      )\r\n    }\r\n\r\n    return (\r\n      <Host class=\"xv-tabs\" variant={this.variant}>\r\n        <div class=\"tab-headers\" role=\"tablist\">\r\n          <button\r\n            hidden={!this.showArrows || !this.tabElements?.length}\r\n            aria-label=\"Previous\"\r\n            class=\"tab-headers_btn prev\"\r\n            onClick={() => this.setTab(-1)}\r\n          />\r\n          <div class=\"tab-headers_container\">\r\n            {this.tabElements?.length ? this.tabElements.map((tab, index) => (\r\n              <button\r\n                role=\"tab\"\r\n                disabled={!!tab.getAttribute('disabled') || !!(tab as any)?.disabled}\r\n                class={{\r\n                  'tab-headers_tab': true,\r\n                  active: (tab.getAttribute('name') || `${index}`) === `${this.active}`,\r\n                }}\r\n                onClick={() => this.handleTabClick(tab.getAttribute('name') || `${index}`)}\r\n              >\r\n                {tab.getAttribute('label') || `Tab ${index + 1}`}\r\n              </button>\r\n            )) : this.emptyMessage && <p class=\"xv-tabs_empty\">{this.emptyMessage}</p>}\r\n          </div>\r\n          <button\r\n            aria-label=\"Next\"\r\n            hidden={!this.showArrows || !this.tabElements?.length}\r\n            class=\"tab-headers_btn next\"\r\n            onClick={() => this.setTab(1)}\r\n          />\r\n        </div>\r\n\r\n        <div\r\n          class=\"tab-content-wrapper\"\r\n          role=\"tabpanel\"\r\n          tabindex={-1}\r\n        >\r\n          <slot onSlotchange={this.collectTabs} />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.updateTabClasses();\r\n  }\r\n}\r\n"],"version":3}

package/dist/xv-webcomponents/xv-tag-v2.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-tag-v2.entry.esm.js","sources":["src/components/xv-tag/xv-tag.scss?tag=xv-tag-v2&encapsulation=shadow","src/components/xv-tag/xv-tag.tsx"],"sourcesContent":[":host {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  border-radius: 1000px;\r\n  background-color: var(--background);\r\n  color: var(--text-primary);\r\n  font-family: var(--ff-body, inherit);\r\n\r\n  .xv-tag_content {\r\n    padding-left: 8px;\r\n    padding-right: 8px;\r\n    color: inherit;\r\n    font-family: var(--ff-body);\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 16px;\r\n    letter-spacing: 0.32px;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n  }\r\n\r\n  .xv-tag_close {\r\n    box-sizing: border-box;\r\n    text-decoration: none;\r\n    border: none;\r\n    background-color: inherit;\r\n    outline: none;\r\n    border-spacing: 0;\r\n    list-style: none outside none;\r\n    margin: 0;\r\n    padding: 0;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border-radius: 62px;\r\n    width: 15px;\r\n    height: 15px;\r\n    text-align: left;\r\n    color: inherit;\r\n    text-indent: 0;\r\n    transition: opacity 300ms ease-in-out, filter 300ms ease-in-out;\r\n    &:hover {\r\n      cursor: pointer;\r\n      filter: brightness(80%);\r\n    }\r\n\r\n    &:active {\r\n      opacity: 0.7;\r\n    }\r\n\r\n    &:focus {\r\n      outline: 1px solid currentColor;\r\n    }\r\n\r\n    &:after {\r\n      overflow: hidden;\r\n      width: inherit;\r\n      height: inherit;\r\n      color: inherit;\r\n      font-size: 16px;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      content: \"\\00d7\";\r\n    }\r\n  }\r\n}\r\n\r\n:host(.sm) {\r\n  font-size: var(--fz-sm);\r\n}\r\n\r\n:host(.md) {\r\n  font-size: var(--fz-md);\r\n  .xv-tag_content {\r\n    line-height: 24px;\r\n  }\r\n\r\n  .xv-tag_close {\r\n    height: 24px;\r\n    width: 24px;\r\n  }\r\n}\r\n\r\n:host(.lg) {\r\n  font-size: var(--fz-lg);\r\n  .xv-tag_content {\r\n    line-height: 26px;\r\n  }\r\n\r\n  .xv-tag_close {\r\n    height: 26px;\r\n    width: 26px;\r\n  }\r\n}\r\n\r\n:host(.disabled) {\r\n  pointer-events: none;\r\n  background-color: var(--layer-01);\r\n  color: var(--text-disabled);\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'xv-tag-v2',\r\n  styleUrl: 'xv-tag.scss',\r\n  shadow: true,\r\n})\r\nexport class XvTag {\r\n  @Prop() size: 'sm' | 'md' | 'lg' = 'md';\r\n  @Prop() color: string = '';\r\n  @Prop() bg: string = '';\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() closeable: boolean = false;\r\n  @Event() closeClick: EventEmitter<PointerEvent>;\r\n\r\n  closeHandler(e: PointerEvent) {\r\n    if (this.disabled) return;\r\n\r\n    this.closeClick.emit(e);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        style={{ color: this.color, background: this.bg }}\r\n        class={`xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}`}\r\n      >\r\n        <div class=\"xv-tag_content\">\r\n          <slot></slot>\r\n        </div>\r\n        {this.closeable && (\r\n          <button onClick={this.closeHandler.bind(this)} class=\"xv-tag_close\"></button>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,+gDAA+gD;;MCOnhD,KAAK,GAAA,MAAA;AALlB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAuB,IAAI;AAC/B,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAClB,QAAA,IAAE,CAAA,EAAA,GAAW,EAAE;AACf,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAwBnC;AArBC,IAAA,YAAY,CAAC,CAAe,EAAA;QAC1B,IAAI,IAAI,CAAC,QAAQ;YAAE;AAEnB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;;IAGzB,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EACH,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,EACjD,KAAK,EAAE,CAAU,OAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,EAAA,EAE/D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACL,IAAI,CAAC,SAAS,KACb,+DAAQ,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,EAAC,cAAc,EAAU,CAAA,CAC9E,CACI;;;;;;;"}