xv-webcomponents 0.1.20 → 0.1.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/README.md +129 -129
- package/package.json +51 -51
- package/dist/types/components/xv-accordion/xv-accordion.d.ts +0 -20
- package/dist/types/components/xv-accordion-item/xv-accordion-item.d.ts +0 -15
- package/dist/types/components/xv-breadcrumbs/xv-breadcrumbs.d.ts +0 -3
- package/dist/types/components/xv-button/xv-button.d.ts +0 -16
- package/dist/types/components/xv-card/xv-card.d.ts +0 -8
- package/dist/types/components/xv-checkbox/xv-checkbox.d.ts +0 -70
- package/dist/types/components/xv-link/xv-link.d.ts +0 -9
- package/dist/types/components/xv-progress-indicator/xv-progress-indicator.d.ts +0 -7
- package/dist/types/components/xv-progress-indicator-item/xv-progress-indicator-item.d.ts +0 -5
- package/dist/types/components/xv-table/defs.d.ts +0 -16
- package/dist/types/components/xv-table/xv-table-col/xv-table-col.d.ts +0 -3
- package/dist/types/components/xv-table/xv-table-header-row/xv-table-header-row.d.ts +0 -25
- package/dist/types/components/xv-table/xv-table-row/xv-table-row.d.ts +0 -59
- package/dist/types/components/xv-table/xv-table.d.ts +0 -40
- package/dist/types/components/xv-tag/xv-tag.d.ts +0 -11
- package/dist/types/components/xv-tooltip/xv-tooltip.d.ts +0 -11
- package/dist/types/components.d.ts +0 -679
- package/dist/types/index.d.ts +0 -11
- package/dist/types/stencil-public-runtime.d.ts +0 -1680
- package/dist/types/types/enum.d.ts +0 -7
- package/dist/types/utils/utils.d.ts +0 -9
- package/dist/xv-webcomponents/app-globals-0f993ce5.js +0 -5
- package/dist/xv-webcomponents/app-globals-0f993ce5.js.map +0 -1
- package/dist/xv-webcomponents/index-90b82796.js +0 -3971
- package/dist/xv-webcomponents/index-90b82796.js.map +0 -1
- package/dist/xv-webcomponents/index.esm.js +0 -13
- package/dist/xv-webcomponents/index.esm.js.map +0 -1
- package/dist/xv-webcomponents/utils-e6dc0550.js +0 -17
- package/dist/xv-webcomponents/utils-e6dc0550.js.map +0 -1
- package/dist/xv-webcomponents/xv-accordion-v2-item.entry.js +0 -35
- package/dist/xv-webcomponents/xv-accordion-v2-item.entry.js.map +0 -1
- package/dist/xv-webcomponents/xv-accordion-v2.entry.js +0 -40
- package/dist/xv-webcomponents/xv-accordion-v2.entry.js.map +0 -1
- package/dist/xv-webcomponents/xv-breadcrumbs-v2.entry.js +0 -17
- package/dist/xv-webcomponents/xv-breadcrumbs-v2.entry.js.map +0 -1
- package/dist/xv-webcomponents/xv-button-v2.entry.js +0 -33
- package/dist/xv-webcomponents/xv-button-v2.entry.js.map +0 -1
- package/dist/xv-webcomponents/xv-card-v2.entry.js +0 -18
- package/dist/xv-webcomponents/xv-card-v2.entry.js.map +0 -1
- package/dist/xv-webcomponents/xv-checkbox-v2.entry.js +0 -99
- package/dist/xv-webcomponents/xv-checkbox-v2.entry.js.map +0 -1
- package/dist/xv-webcomponents/xv-link-v2.entry.js +0 -26
- package/dist/xv-webcomponents/xv-link-v2.entry.js.map +0 -1
- package/dist/xv-webcomponents/xv-progress-indicator-v2-item.entry.js +0 -19
- package/dist/xv-webcomponents/xv-progress-indicator-v2-item.entry.js.map +0 -1
- package/dist/xv-webcomponents/xv-progress-indicator-v2.entry.js +0 -39
- package/dist/xv-webcomponents/xv-progress-indicator-v2.entry.js.map +0 -1
- package/dist/xv-webcomponents/xv-table-v2-col.entry.js +0 -17
- package/dist/xv-webcomponents/xv-table-v2-col.entry.js.map +0 -1
- package/dist/xv-webcomponents/xv-table-v2-header-row.entry.js +0 -34
- package/dist/xv-webcomponents/xv-table-v2-header-row.entry.js.map +0 -1
- package/dist/xv-webcomponents/xv-table-v2-row.entry.js +0 -112
- package/dist/xv-webcomponents/xv-table-v2-row.entry.js.map +0 -1
- package/dist/xv-webcomponents/xv-table-v2.entry.js +0 -114
- package/dist/xv-webcomponents/xv-table-v2.entry.js.map +0 -1
- package/dist/xv-webcomponents/xv-tag-v2.entry.js +0 -28
- package/dist/xv-webcomponents/xv-tag-v2.entry.js.map +0 -1
- package/dist/xv-webcomponents/xv-tooltip-v2.entry.js +0 -23
- package/dist/xv-webcomponents/xv-tooltip-v2.entry.js.map +0 -1
- package/dist/xv-webcomponents/xv-webcomponents.esm.js +0 -49
- package/dist/xv-webcomponents/xv-webcomponents.esm.js.map +0 -1
- package/loader/cdn.js +0 -1
- package/loader/index.cjs.js +0 -1
- package/loader/index.d.ts +0 -24
- package/loader/index.es2017.js +0 -1
- package/loader/index.js +0 -2
- package/loader/package.json +0 -11
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, a as createEvent, h, d as Host, g as getElement } from './index-90b82796.js';
|
|
2
|
-
import { u as uidGenerator } from './utils-e6dc0550.js';
|
|
3
|
-
|
|
4
|
-
const xvTableRowCss = ":host(xv-table-v2-row){display:grid;padding:16px;align-items:center;transition:height 0.15s cubic-bezier(0.2, 0, 0.38, 0.9), padding 0.15s ease-in-out, background-color 0.2ms ease-in-out;background:var(--layer-02, #FFF);box-shadow:0 0 0 1px #E3E3E3 inset}:host(xv-table-v2-row) .left-container{height:100%;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 16px}:host(xv-table-v2-row) .expand-btn{outline:none;background-color:transparent;display:block;margin:0 auto;border:solid black;border-width:0 2px 2px 0;padding:5px;transform:rotate(45deg);cursor:pointer;transition:opacity 300ms ease-in-out, transform 200ms ease-in-out}:host(xv-table-v2-row) .expand-btn:active{opacity:0.5}:host(xv-table-v2-row) .expand-btn.expanded{transform:rotate(225deg)}:host([expanded]){block-size:auto}:host([collapsed]){block-size:0;overflow:hidden;padding-top:0;padding-bottom:0}:host([odd]){background-color:var(--layer-selected-01, #E3E3E3)}:host([even]){background-color:#fff}";
|
|
5
|
-
|
|
6
|
-
const XvTableRow = class {
|
|
7
|
-
constructor(hostRef) {
|
|
8
|
-
registerInstance(this, hostRef);
|
|
9
|
-
this.checkedChange = createEvent(this, "checkedChange", 7);
|
|
10
|
-
/**
|
|
11
|
-
* Is row will be expandable
|
|
12
|
-
* If it's true then the next row will be collapsed
|
|
13
|
-
*/
|
|
14
|
-
this.expandable = false;
|
|
15
|
-
/**
|
|
16
|
-
* Default state of expandable
|
|
17
|
-
*/
|
|
18
|
-
this.expanded = false;
|
|
19
|
-
this.prevRowExpanded = false;
|
|
20
|
-
this.cols = 1;
|
|
21
|
-
this.checkboxChange = (e) => {
|
|
22
|
-
this.checked = e.detail;
|
|
23
|
-
this.checkedChange.emit({
|
|
24
|
-
name: this.selectionName,
|
|
25
|
-
value: this.value,
|
|
26
|
-
checked: e.detail
|
|
27
|
-
});
|
|
28
|
-
};
|
|
29
|
-
}
|
|
30
|
-
/**
|
|
31
|
-
* Called from outside (From expandable row)
|
|
32
|
-
*/
|
|
33
|
-
async setExpandRelation(id, expanded) {
|
|
34
|
-
this.expandId = id;
|
|
35
|
-
this.prevRowExpanded = !!expanded;
|
|
36
|
-
return this.prevRowExpanded;
|
|
37
|
-
}
|
|
38
|
-
/**
|
|
39
|
-
* Called from outside (From expandable row)
|
|
40
|
-
* to change then expand or collapse
|
|
41
|
-
*/
|
|
42
|
-
async toggleExpand(id, expanded) {
|
|
43
|
-
if (this.expandId !== id)
|
|
44
|
-
return;
|
|
45
|
-
this.prevRowExpanded = expanded !== undefined ? expanded : !this.prevRowExpanded;
|
|
46
|
-
}
|
|
47
|
-
/**
|
|
48
|
-
* Watch for expandable
|
|
49
|
-
* When it's false needs to remove unnecessary properties
|
|
50
|
-
*/
|
|
51
|
-
setExpandableRelationHandle() {
|
|
52
|
-
const nextEl = this.el.nextElementSibling;
|
|
53
|
-
if (!nextEl || nextEl.tagName !== this.el.tagName)
|
|
54
|
-
this.expandable = false;
|
|
55
|
-
if (!this.expandable)
|
|
56
|
-
return;
|
|
57
|
-
if (!this.id)
|
|
58
|
-
this.id = this.el.id || uidGenerator();
|
|
59
|
-
return nextEl.setExpandRelation(this.id, this.expanded);
|
|
60
|
-
}
|
|
61
|
-
/**
|
|
62
|
-
* When user press on the expand button
|
|
63
|
-
*/
|
|
64
|
-
changeExpandHandle() {
|
|
65
|
-
const nextRow = this.el.nextElementSibling;
|
|
66
|
-
if (!nextRow || nextRow.tagName !== this.el.tagName)
|
|
67
|
-
return;
|
|
68
|
-
this.expanded = !this.expanded;
|
|
69
|
-
// Call method from new row
|
|
70
|
-
nextRow.toggleExpand(this.id, this.expanded);
|
|
71
|
-
}
|
|
72
|
-
/**
|
|
73
|
-
* Highlight the expanded row on hover
|
|
74
|
-
*/
|
|
75
|
-
hoverHandle(active) {
|
|
76
|
-
const prevRow = this.el.previousElementSibling;
|
|
77
|
-
const nextRow = this.el.nextElementSibling;
|
|
78
|
-
if ((nextRow === null || nextRow === void 0 ? void 0 : nextRow.tagName) === this.el.tagName && this.expandable) {
|
|
79
|
-
if (active) {
|
|
80
|
-
nextRow.setAttribute('highlighted', '');
|
|
81
|
-
}
|
|
82
|
-
else {
|
|
83
|
-
nextRow.removeAttribute('highlighted');
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
if ((prevRow === null || prevRow === void 0 ? void 0 : prevRow.tagName) === this.el.tagName && prevRow.hasAttribute('expandable')) {
|
|
87
|
-
if (active) {
|
|
88
|
-
prevRow.setAttribute('highlighted', '');
|
|
89
|
-
}
|
|
90
|
-
else {
|
|
91
|
-
prevRow.removeAttribute('highlighted');
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
async componentWillLoad() {
|
|
96
|
-
this.id = this.el.id;
|
|
97
|
-
this.cols = this.el.childElementCount;
|
|
98
|
-
await this.setExpandableRelationHandle();
|
|
99
|
-
}
|
|
100
|
-
render() {
|
|
101
|
-
return (h(Host, { key: '4548026e127e69cbeb7e76efd39cf9720ca662df', onMouseEnter: () => this.hoverHandle(true), onMouseLeave: () => this.hoverHandle(false), cols: this.cols, expanded: this.expandId && this.prevRowExpanded, collapsed: this.expandId && !this.prevRowExpanded }, h("div", { key: '83cabc7800ccd192fde7a7e90470bf08b7e9a87f', class: "left-container" }, this.expandable && (h("button", { key: '6ecbe6f244267d32c78f9b6d6e89722eb9407bd7', class: `expand-btn ${this.expanded ? 'expanded' : ''}`, onClick: () => this.changeExpandHandle() })), this.selectionName && (h("xv-checkbox-v2", { key: '5d3b1d92781437b03e8327ea7484adaed70a5081', name: this.selectionName, value: this.value, checked: this.checked, onEventChange: this.checkboxChange }))), h("slot", { key: '251b1e9bdaf5d0028d80a3ec80d8a1363070a8fe' })));
|
|
102
|
-
}
|
|
103
|
-
get el() { return getElement(this); }
|
|
104
|
-
static get watchers() { return {
|
|
105
|
-
"expandable": ["setExpandableRelationHandle"]
|
|
106
|
-
}; }
|
|
107
|
-
};
|
|
108
|
-
XvTableRow.style = xvTableRowCss;
|
|
109
|
-
|
|
110
|
-
export { XvTableRow as xv_table_v2_row };
|
|
111
|
-
|
|
112
|
-
//# sourceMappingURL=xv-table-v2-row.entry.js.map
|
|
@@ -1 +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":["@import \"../vars\";\r\n\r\n:host(#{$tag-name}-row) {\r\n display: grid;\r\n padding: $space-md;\r\n align-items: center;\r\n transition: height .15s cubic-bezier(.2,0,.38,.9), padding .15s ease-in-out, background-color 0.2ms ease-in-out;\r\n background: var(--layer-02, #FFF);\r\n box-shadow: 0 0 0 1px #E3E3E3 inset;\r\n\r\n .left-container {\r\n @include left-container-styles;\r\n }\r\n\r\n .expand-btn {\r\n @include expand-btn-styles;\r\n }\r\n}\r\n\r\n:host([expanded]) {\r\n block-size: auto;\r\n}\r\n\r\n:host([collapsed]) {\r\n block-size: 0;\r\n overflow: hidden;\r\n padding-top: 0;\r\n padding-bottom: 0;\r\n}\r\n\r\n:host([odd]) {\r\n background-color: var(--layer-selected-01, #E3E3E3);\r\n}\r\n\r\n:host([even]) {\r\n background-color: #fff;\r\n}\r\n","import { Component, Host, h, Element, Prop, State, Watch, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { 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 /**\r\n * Is row will be expandable\r\n * If it's true then the next row will be collapsed\r\n */\r\n @Prop({ mutable: true }) expandable: boolean = false;\r\n /**\r\n * Default state of expandable\r\n */\r\n @Prop({ reflect: true, mutable: true }) expanded: boolean = false;\r\n /**\r\n * Checkbox row name\r\n */\r\n @Prop({ reflect: true, attribute: 'selection-name' }) selectionName?: string;\r\n /**\r\n * Checkbox row value\r\n */\r\n @Prop({ reflect: true }) value?: string;\r\n /**\r\n * Checkbox row status\r\n */\r\n @Prop({ reflect: true, mutable: true }) checked?: boolean;\r\n\r\n @State() prevRowExpanded: boolean = false;\r\n @State() expandId?: string;\r\n @State() id?: string;\r\n @State() cols: number = 1;\r\n\r\n @Event() checkedChange: EventEmitter<{ name: string, value?: string; checked: boolean }>;\r\n\r\n /**\r\n * Called from outside (From expandable row)\r\n */\r\n @Method()\r\n async setExpandRelation(id?: string, expanded?: boolean) {\r\n this.expandId = id;\r\n this.prevRowExpanded = !!expanded;\r\n return this.prevRowExpanded;\r\n }\r\n\r\n /**\r\n * Called from outside (From expandable row)\r\n * to change then expand or collapse\r\n */\r\n @Method()\r\n async toggleExpand(id?: string, expanded?: boolean) {\r\n if (this.expandId !== id) return;\r\n this.prevRowExpanded = expanded !== undefined ? expanded : !this.prevRowExpanded;\r\n }\r\n\r\n /**\r\n * Watch for expandable\r\n * When it's false needs to remove unnecessary properties\r\n */\r\n @Watch('expandable')\r\n setExpandableRelationHandle(): Promise<any> {\r\n const nextEl = this.el.nextElementSibling;\r\n\r\n if (!nextEl || nextEl.tagName !== this.el.tagName) this.expandable = false;\r\n\r\n if (!this.expandable) return;\r\n\r\n if (!this.id) this.id = this.el.id || uidGenerator();\r\n\r\n return (nextEl as any).setExpandRelation(this.id, this.expanded);\r\n }\r\n\r\n /**\r\n * When user press on the expand button\r\n */\r\n private changeExpandHandle() {\r\n const nextRow = this.el.nextElementSibling;\r\n\r\n if (!nextRow || nextRow.tagName !== this.el.tagName) return;\r\n\r\n this.expanded = !this.expanded;\r\n // Call method from new row\r\n (nextRow as any).toggleExpand(this.id, this.expanded);\r\n }\r\n\r\n /**\r\n * Highlight the expanded row on hover\r\n */\r\n private hoverHandle(active: boolean) {\r\n const prevRow = this.el.previousElementSibling as HTMLElement | null;\r\n const nextRow = this.el.nextElementSibling as HTMLElement | null;\r\n\r\n if (nextRow?.tagName === this.el.tagName && this.expandable) {\r\n if (active) {\r\n nextRow.setAttribute('highlighted', '');\r\n } else {\r\n nextRow.removeAttribute('highlighted');\r\n }\r\n }\r\n\r\n if (prevRow?.tagName === this.el.tagName && prevRow.hasAttribute('expandable')) {\r\n if (active) {\r\n prevRow.setAttribute('highlighted', '');\r\n } else {\r\n prevRow.removeAttribute('highlighted');\r\n }\r\n }\r\n }\r\n\r\n private checkboxChange = (e: CustomEvent<boolean>) => {\r\n this.checked = e.detail;\r\n this.checkedChange.emit({\r\n name: this.selectionName,\r\n value: this.value,\r\n checked: e.detail\r\n });\r\n }\r\n\r\n async componentWillLoad(){\r\n this.id = this.el.id;\r\n this.cols = this.el.childElementCount;\r\n await this.setExpandableRelationHandle();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n onMouseEnter={() => this.hoverHandle(true)}\r\n onMouseLeave={() => this.hoverHandle(false)}\r\n cols={this.cols}\r\n expanded={this.expandId && this.prevRowExpanded}\r\n collapsed={this.expandId && !this.prevRowExpanded}\r\n >\r\n <div class=\"left-container\">\r\n {this.expandable && (\r\n <button\r\n class={`expand-btn ${this.expanded ? 'expanded' : ''}`}\r\n onClick={() => this.changeExpandHandle()}\r\n />\r\n )}\r\n {this.selectionName && (\r\n <xv-checkbox-v2\r\n name={this.selectionName}\r\n value={this.value}\r\n checked={this.checked}\r\n onEventChange={this.checkboxChange}\r\n />\r\n )}\r\n </div>\r\n <slot />\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, a as createEvent, h, d as Host, g as getElement } from './index-90b82796.js';
|
|
2
|
-
|
|
3
|
-
var TABLE_COLOR_SCHEMA;
|
|
4
|
-
(function (TABLE_COLOR_SCHEMA) {
|
|
5
|
-
TABLE_COLOR_SCHEMA["DEF"] = "";
|
|
6
|
-
TABLE_COLOR_SCHEMA["ZEBRA"] = "zebra";
|
|
7
|
-
})(TABLE_COLOR_SCHEMA || (TABLE_COLOR_SCHEMA = {}));
|
|
8
|
-
var TABLE_SIZE;
|
|
9
|
-
(function (TABLE_SIZE) {
|
|
10
|
-
TABLE_SIZE["EXTRA_SMALL"] = "xs";
|
|
11
|
-
TABLE_SIZE["SMALL"] = "sm";
|
|
12
|
-
TABLE_SIZE["MEDIUM"] = "md";
|
|
13
|
-
TABLE_SIZE["LARGE"] = "lg";
|
|
14
|
-
TABLE_SIZE["EXTRA_LARGE"] = "xl";
|
|
15
|
-
})(TABLE_SIZE || (TABLE_SIZE = {}));
|
|
16
|
-
|
|
17
|
-
const xvTableCss = ":host ::slotted(xv-table-v2-header-row[cols=\"1\"]),:host ::slotted(xv-table-v2-row[cols=\"1\"]){--xv-table-cols:1}:host ::slotted(xv-table-v2-header-row[cols=\"2\"]),:host ::slotted(xv-table-v2-row[cols=\"2\"]){--xv-table-cols:2}:host ::slotted(xv-table-v2-header-row[cols=\"3\"]),:host ::slotted(xv-table-v2-row[cols=\"3\"]){--xv-table-cols:3}:host ::slotted(xv-table-v2-header-row[cols=\"4\"]),:host ::slotted(xv-table-v2-row[cols=\"4\"]){--xv-table-cols:4}:host ::slotted(xv-table-v2-header-row[cols=\"5\"]),:host ::slotted(xv-table-v2-row[cols=\"5\"]){--xv-table-cols:5}:host ::slotted(xv-table-v2-header-row[cols=\"6\"]),:host ::slotted(xv-table-v2-row[cols=\"6\"]){--xv-table-cols:6}:host ::slotted(xv-table-v2-header-row[cols=\"7\"]),:host ::slotted(xv-table-v2-row[cols=\"7\"]){--xv-table-cols:7}:host ::slotted(xv-table-v2-header-row[cols=\"8\"]),:host ::slotted(xv-table-v2-row[cols=\"8\"]){--xv-table-cols:8}:host ::slotted(xv-table-v2-header-row[cols=\"9\"]),:host ::slotted(xv-table-v2-row[cols=\"9\"]){--xv-table-cols:9}:host ::slotted(xv-table-v2-header-row[cols=\"10\"]),:host ::slotted(xv-table-v2-row[cols=\"10\"]){--xv-table-cols:10}:host ::slotted(xv-table-v2-header-row[cols=\"11\"]),:host ::slotted(xv-table-v2-row[cols=\"11\"]){--xv-table-cols:11}:host ::slotted(xv-table-v2-header-row[cols=\"12\"]),:host ::slotted(xv-table-v2-row[cols=\"12\"]){--xv-table-cols:12}:host ::slotted(xv-table-v2-header-row[cols=\"13\"]),:host ::slotted(xv-table-v2-row[cols=\"13\"]){--xv-table-cols:13}:host ::slotted(xv-table-v2-header-row[cols=\"14\"]),:host ::slotted(xv-table-v2-row[cols=\"14\"]){--xv-table-cols:14}:host ::slotted(xv-table-v2-header-row[cols=\"15\"]),:host ::slotted(xv-table-v2-row[cols=\"15\"]){--xv-table-cols:15}:host ::slotted(xv-table-v2-header-row[cols=\"16\"]),:host ::slotted(xv-table-v2-row[cols=\"16\"]){--xv-table-cols:16}:host ::slotted(xv-table-v2-header-row[cols=\"17\"]),:host ::slotted(xv-table-v2-row[cols=\"17\"]){--xv-table-cols:17}:host ::slotted(xv-table-v2-header-row[cols=\"18\"]),:host ::slotted(xv-table-v2-row[cols=\"18\"]){--xv-table-cols:18}:host ::slotted(xv-table-v2-header-row[cols=\"19\"]),:host ::slotted(xv-table-v2-row[cols=\"19\"]){--xv-table-cols:19}:host ::slotted(xv-table-v2-header-row[cols=\"20\"]),:host ::slotted(xv-table-v2-row[cols=\"20\"]){--xv-table-cols:20}:host([size=xs]) ::slotted(xv-table-v2-row),:host([size=xs]) ::slotted(xv-table-v2-header-row){padding:2px}:host([size=sm]) ::slotted(xv-table-v2-row),:host([size=sm]) ::slotted(xv-table-v2-header-row){padding:8px}:host([size=md]) ::slotted(xv-table-v2-row),:host([size=md]) ::slotted(xv-table-v2-header-row){padding:16px}:host([size=lg]) ::slotted(xv-table-v2-row),:host([size=lg]) ::slotted(xv-table-v2-header-row){padding:18px}:host([size=xl]) ::slotted(xv-table-v2-row),:host([size=xl]) ::slotted(xv-table-v2-header-row){padding:20px}:host([hoverable]) ::slotted(xv-table-v2-row:hover),:host([hoverable]) ::slotted([highlighted]){background-color:var(--layer-hover-01, #E3E3E3)}:host(xv-table-v2) ::slotted(xv-table-v2-row),:host(xv-table-v2) ::slotted(xv-table-v2-header-row){grid-template-columns:0 repeat(var(--xv-table-cols, 1), 1fr)}:host(xv-table-v2) ::slotted(xv-table-v2-row[collapsed]){padding-top:0;padding-bottom:0}:host(xv-table-v2) .caption{padding:16px 16px 18px}:host(xv-table-v2) .caption_title,:host(xv-table-v2) .caption_description{color:var(--text-primary, #333);margin:0}:host(xv-table-v2) .caption_title{font-family:var(--ff-heading, \"Gill Sans\");font-size:21px}:host(xv-table-v2) .caption_description{font-family:var(--ff-body, Tahoma);font-size:14px;line-height:128.571%;letter-spacing:0.16px}:host([expandable]) ::slotted(xv-table-v2-row),:host([expandable]) ::slotted(xv-table-v2-header-row){position:relative;grid-template-columns:48px repeat(var(--xv-table-cols, 1), 1fr)}:host([selectable]) ::slotted(xv-table-v2-row),:host([selectable]) ::slotted(xv-table-v2-header-row){position:relative;grid-template-columns:50px repeat(var(--xv-table-cols, 1), 1fr)}:host([expandable][selectable]) ::slotted(xv-table-v2-row),:host([expandable][selectable]) ::slotted(xv-table-v2-header-row){position:relative;grid-template-columns:98px repeat(var(--xv-table-cols, 1), 1fr)}";
|
|
18
|
-
|
|
19
|
-
const XvTable = class {
|
|
20
|
-
constructor(hostRef) {
|
|
21
|
-
registerInstance(this, hostRef);
|
|
22
|
-
this.changeSelection = createEvent(this, "changeSelection", 7);
|
|
23
|
-
/**
|
|
24
|
-
* Set current color schema type of enum TABLE_COLOR_SCHEMA
|
|
25
|
-
* Possible options 'zebra'
|
|
26
|
-
*/
|
|
27
|
-
this.colorSchema = TABLE_COLOR_SCHEMA.DEF;
|
|
28
|
-
/**
|
|
29
|
-
* If table is expandable fields
|
|
30
|
-
*/
|
|
31
|
-
this.expandable = false;
|
|
32
|
-
/**
|
|
33
|
-
* Table size
|
|
34
|
-
* enum TABLE_SIZE
|
|
35
|
-
*/
|
|
36
|
-
this.size = TABLE_SIZE.MEDIUM;
|
|
37
|
-
/**
|
|
38
|
-
* Add checkbox selection to the table
|
|
39
|
-
*/
|
|
40
|
-
this.selectable = false;
|
|
41
|
-
this.selectedRows = new Map();
|
|
42
|
-
this.handleCheckedChange = (e) => {
|
|
43
|
-
const { name, value, checked } = e.detail;
|
|
44
|
-
if (checked) {
|
|
45
|
-
this.selectedRows.set(name, { name, value });
|
|
46
|
-
}
|
|
47
|
-
else {
|
|
48
|
-
this.selectedRows.delete(name);
|
|
49
|
-
}
|
|
50
|
-
this.changeSelection.emit(Array.from(this.selectedRows.values()));
|
|
51
|
-
};
|
|
52
|
-
}
|
|
53
|
-
setRowPropsHandler() {
|
|
54
|
-
const rows = Array
|
|
55
|
-
.from(this.el.childNodes)
|
|
56
|
-
.filter((node) => node.nodeType === Node.ELEMENT_NODE &&
|
|
57
|
-
((node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-ROW` || (node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-HEADER-ROW`));
|
|
58
|
-
let visualIndex = 0;
|
|
59
|
-
rows.forEach((node, i) => {
|
|
60
|
-
var _a;
|
|
61
|
-
const row = node;
|
|
62
|
-
const isHeaderRow = (node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-HEADER-ROW`;
|
|
63
|
-
if (this.selectable) {
|
|
64
|
-
let name = row.getAttribute('selection-name');
|
|
65
|
-
if (!name) {
|
|
66
|
-
name = isHeaderRow ? 'header' : `xv-table-row-${i}`;
|
|
67
|
-
row.setAttribute('selection-name', name);
|
|
68
|
-
}
|
|
69
|
-
if (row.hasAttribute('checked')) {
|
|
70
|
-
this.selectedRows.set(name, {
|
|
71
|
-
name,
|
|
72
|
-
value: (_a = row.getAttribute('value')) !== null && _a !== void 0 ? _a : undefined,
|
|
73
|
-
});
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
if (isHeaderRow)
|
|
77
|
-
return;
|
|
78
|
-
switch (this.colorSchema) {
|
|
79
|
-
case TABLE_COLOR_SCHEMA.ZEBRA:
|
|
80
|
-
const stripe = visualIndex % 2 === 0 ? 'even' : 'odd';
|
|
81
|
-
if (row.hasAttribute('expandable') && rows[i + 1]) {
|
|
82
|
-
row.setAttribute(stripe, '');
|
|
83
|
-
}
|
|
84
|
-
else {
|
|
85
|
-
visualIndex++;
|
|
86
|
-
row.setAttribute(stripe, '');
|
|
87
|
-
}
|
|
88
|
-
break;
|
|
89
|
-
default:
|
|
90
|
-
row.removeAttribute('odd');
|
|
91
|
-
row.removeAttribute('even');
|
|
92
|
-
}
|
|
93
|
-
});
|
|
94
|
-
}
|
|
95
|
-
render() {
|
|
96
|
-
return (h(Host, { key: '2a3ae7c8db5aade4d64c9a2b57235859b7fbc8e5', size: this.size, selectable: this.selectable }, (this.el.title || this.description) && (h("div", { key: '795ad5b8a0c030ee9f11994bb766bb1cd546743f', class: "caption" }, this.el.title && h("h5", { key: 'dd6baa438bf9bd83e0983e9053c3734b8d8aff92', class: "caption_title" }, this.el.title), this.description && h("p", { key: 'e05e97cf899cd1ede185d035ef65b1d75b21962c', class: "caption_description" }, this.description))), h("slot", { key: '8e5f044d71350c3b52a1ab004bc8e4a3fadd53f0' })));
|
|
97
|
-
}
|
|
98
|
-
componentWillLoad() {
|
|
99
|
-
this.setRowPropsHandler();
|
|
100
|
-
this.el.addEventListener('checkedChange', this.handleCheckedChange);
|
|
101
|
-
}
|
|
102
|
-
disconnectedCallback() {
|
|
103
|
-
this.el.removeEventListener('checkedChange', this.handleCheckedChange);
|
|
104
|
-
}
|
|
105
|
-
get el() { return getElement(this); }
|
|
106
|
-
static get watchers() { return {
|
|
107
|
-
"colorSchema": ["setRowPropsHandler"]
|
|
108
|
-
}; }
|
|
109
|
-
};
|
|
110
|
-
XvTable.style = xvTableCss;
|
|
111
|
-
|
|
112
|
-
export { XvTable as xv_table_v2 };
|
|
113
|
-
|
|
114
|
-
//# sourceMappingURL=xv-table-v2.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"xv-table-v2.entry.esm.js","mappings":"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","names":[],"sources":["src/components/xv-table/defs.ts","src/components/xv-table/xv-table.scss?tag=xv-table-v2&encapsulation=shadow","src/components/xv-table/xv-table.tsx"],"sourcesContent":["export enum TABLE_COLOR_SCHEMA {\r\n DEF = '',\r\n ZEBRA = 'zebra',\r\n}\r\n\r\nexport enum TABLE_SIZE {\r\n EXTRA_SMALL = 'xs',\r\n SMALL = 'sm',\r\n MEDIUM = 'md',\r\n LARGE = 'lg',\r\n EXTRA_LARGE = 'xl',\r\n}\r\n\r\nexport type TableSelectionEvent = CustomEvent<{\r\n name: string;\r\n checked: boolean;\r\n value?: string;\r\n}>;\r\n","@import \"vars\";\r\n\r\n:host {\r\n @for $i from 1 through 20 {\r\n ::slotted(#{$tag-name}-header-row[cols=\"#{$i}\"]),\r\n ::slotted(#{$tag-name}-row[cols=\"#{$i}\"]) {\r\n --xv-table-cols: #{$i};\r\n }\r\n }\r\n}\r\n\r\n:host([size=\"xs\"]) {\r\n ::slotted(#{$tag-name}-row),\r\n ::slotted(#{$tag-name}-header-row) {\r\n padding: $space-xs;\r\n }\r\n}\r\n:host([size=\"sm\"]) {\r\n ::slotted(#{$tag-name}-row),\r\n ::slotted(#{$tag-name}-header-row) {\r\n padding: $space-sm;\r\n }\r\n}\r\n:host([size=\"md\"]) {\r\n ::slotted(#{$tag-name}-row),\r\n ::slotted(#{$tag-name}-header-row) {\r\n padding: $space-md;\r\n }\r\n}\r\n:host([size=\"lg\"]) {\r\n ::slotted(#{$tag-name}-row),\r\n ::slotted(#{$tag-name}-header-row) {\r\n padding: $space-lg;\r\n }\r\n}\r\n:host([size=\"xl\"]) {\r\n ::slotted(#{$tag-name}-row),\r\n ::slotted(#{$tag-name}-header-row) {\r\n padding: $space-xl\r\n }\r\n}\r\n\r\n:host([hoverable]) {\r\n ::slotted(#{$tag-name}-row:hover),\r\n ::slotted([highlighted]) {\r\n background-color: var(--layer-hover-01, #E3E3E3);\r\n }\r\n}\r\n\r\n:host(#{$tag-name}) {\r\n ::slotted(#{$tag-name}-row),\r\n ::slotted(#{$tag-name}-header-row) {\r\n grid-template-columns: 0 repeat(var(--xv-table-cols, 1), 1fr);\r\n }\r\n\r\n ::slotted(#{$tag-name}-row[collapsed]) {\r\n padding-top: 0;\r\n padding-bottom: 0;\r\n }\r\n\r\n .caption {\r\n padding: $space-md $space-md $space-lg;\r\n &_title,\r\n &_description {\r\n color: $color;\r\n margin: 0;\r\n }\r\n\r\n &_title {\r\n font-family: var(--ff-heading, \"Gill Sans\");\r\n font-size: 21px;\r\n }\r\n\r\n &_description {\r\n font-family: var(--ff-body, Tahoma);\r\n font-size: $font-size-content;\r\n line-height: 128.571%;\r\n letter-spacing: 0.16px;\r\n }\r\n }\r\n}\r\n\r\n:host([expandable]) {\r\n ::slotted(#{$tag-name}-row),\r\n ::slotted(#{$tag-name}-header-row) {\r\n position: relative;\r\n grid-template-columns: $expand-size repeat(var(--xv-table-cols, 1), 1fr);\r\n }\r\n}\r\n:host([selectable]) {\r\n ::slotted(#{$tag-name}-row),\r\n ::slotted(#{$tag-name}-header-row) {\r\n position: relative;\r\n grid-template-columns: $select-size repeat(var(--xv-table-cols, 1), 1fr);\r\n }\r\n}\r\n:host([expandable][selectable]) {\r\n ::slotted(#{$tag-name}-row),\r\n ::slotted(#{$tag-name}-header-row) {\r\n position: relative;\r\n grid-template-columns: $expand-size + $select-size repeat(var(--xv-table-cols, 1), 1fr);\r\n }\r\n}\r\n","import { Component, Host, h, Element, Prop, Watch, Event, EventEmitter, State } from '@stencil/core';\r\nimport { TABLE_COLOR_SCHEMA, TABLE_SIZE, TableSelectionEvent } from './defs';\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 /**\r\n * Table caption description\r\n */\r\n @Prop() description: string;\r\n /**\r\n * Set current color schema type of enum TABLE_COLOR_SCHEMA\r\n * Possible options 'zebra'\r\n */\r\n @Prop({ attribute: 'color-schema' }) colorSchema: TABLE_COLOR_SCHEMA = TABLE_COLOR_SCHEMA.DEF;\r\n /**\r\n * If table is expandable fields\r\n */\r\n @Prop() expandable: boolean = false;\r\n /**\r\n * Table size\r\n * enum TABLE_SIZE\r\n */\r\n @Prop() size: TABLE_SIZE = TABLE_SIZE.MEDIUM;\r\n /**\r\n * Add checkbox selection to the table\r\n */\r\n @Prop() selectable: boolean = false;\r\n\r\n @State() selectedRows = new Map<string, { name: string, value?: string }>();\r\n\r\n @Event() changeSelection: EventEmitter<{ name: string, value?: any }[]>;\r\n\r\n @Watch('colorSchema')\r\n setRowPropsHandler() {\r\n const rows = Array\r\n .from(this.el.childNodes)\r\n .filter((node) =>\r\n node.nodeType === Node.ELEMENT_NODE &&\r\n ((node as any)?.tagName === `${this.el.tagName}-ROW` || (node as any)?.tagName === `${this.el.tagName}-HEADER-ROW`)\r\n );\r\n let visualIndex = 0;\r\n\r\n rows.forEach((node, i) => {\r\n const row = (node as HTMLElement);\r\n const isHeaderRow = (node as any)?.tagName === `${this.el.tagName}-HEADER-ROW`;\r\n\r\n if (this.selectable) {\r\n let name = row.getAttribute('selection-name');\r\n\r\n if (!name) {\r\n name = isHeaderRow ? 'header' : `xv-table-row-${i}`;\r\n row.setAttribute('selection-name', name);\r\n }\r\n\r\n if (row.hasAttribute('checked')) {\r\n this.selectedRows.set(name, {\r\n name,\r\n value: row.getAttribute('value') ?? undefined,\r\n })\r\n }\r\n }\r\n\r\n if (isHeaderRow) return;\r\n\r\n switch (this.colorSchema) {\r\n case TABLE_COLOR_SCHEMA.ZEBRA:\r\n const stripe = visualIndex % 2 === 0 ? 'even' : 'odd';\r\n if (row.hasAttribute('expandable') && rows[i + 1]) {\r\n row.setAttribute(stripe, '');\r\n } else {\r\n visualIndex++;\r\n row.setAttribute(stripe, '');\r\n }\r\n break;\r\n default:\r\n row.removeAttribute('odd');\r\n row.removeAttribute('even');\r\n }\r\n });\r\n }\r\n\r\n private handleCheckedChange = (e: TableSelectionEvent) => {\r\n const { name, value, checked } = e.detail;\r\n\r\n if (checked) {\r\n this.selectedRows.set(name, { name, value });\r\n } else {\r\n this.selectedRows.delete(name);\r\n }\r\n\r\n this.changeSelection.emit(Array.from(this.selectedRows.values()));\r\n }\r\n\r\n render() {\r\n return (\r\n <Host size={this.size} selectable={this.selectable}>\r\n {(this.el.title || this.description) && (\r\n <div class=\"caption\">\r\n {this.el.title && <h5 class=\"caption_title\">{this.el.title}</h5>}\r\n {this.description && <p class=\"caption_description\">{this.description}</p>}\r\n </div>\r\n )}\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n\r\n componentWillLoad() {\r\n this.setRowPropsHandler();\r\n this.el.addEventListener('checkedChange', this.handleCheckedChange as any);\r\n }\r\n\r\n disconnectedCallback() {\r\n this.el.removeEventListener('checkedChange', this.handleCheckedChange as any);\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, a as createEvent, h, d as Host } from './index-90b82796.js';
|
|
2
|
-
|
|
3
|
-
const xvTagCss = "@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:space-between;border-radius:1000px;background-color:var(--background);color:var(--text-primary);font-family:var(--ff-body, inherit)}:host .xv-tag_content{padding-left:8px;padding-right:8px;color:inherit;font-family:var(--ff-body);font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .xv-tag_close{box-sizing:border-box;text-decoration:none;border:none;background-color:inherit;outline:none;border-spacing:0;list-style:none outside none;margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:62px;width:15px;height:15px;text-align:left;color:inherit;text-indent:0;transition:opacity 300ms ease-in-out, filter 300ms ease-in-out}:host .xv-tag_close:hover{cursor:pointer;filter:brightness(80%)}:host .xv-tag_close:active{opacity:0.7}:host .xv-tag_close:focus{outline:1px solid currentColor}:host .xv-tag_close:after{overflow:hidden;width:inherit;height:inherit;color:inherit;font-size:16px;display:inline-flex;align-items:center;justify-content:center;content:\"×\"}:host(.sm){font-size:var(--fz-sm)}:host(.md){font-size:var(--fz-md)}:host(.md) .xv-tag_content{line-height:24px}:host(.md) .xv-tag_close{height:24px;width:24px}:host(.lg){font-size:var(--fz-lg)}:host(.lg) .xv-tag_content{line-height:26px}:host(.lg) .xv-tag_close{height:26px;width:26px}:host(.disabled){pointer-events:none;background-color:var(--layer-01);color:var(--text-disabled)}";
|
|
4
|
-
|
|
5
|
-
const XvTag = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.closeClick = createEvent(this, "closeClick", 7);
|
|
9
|
-
this.size = 'md';
|
|
10
|
-
this.color = '';
|
|
11
|
-
this.bg = '';
|
|
12
|
-
this.disabled = false;
|
|
13
|
-
this.closeable = false;
|
|
14
|
-
}
|
|
15
|
-
closeHandler(e) {
|
|
16
|
-
if (this.disabled)
|
|
17
|
-
return;
|
|
18
|
-
this.closeClick.emit(e);
|
|
19
|
-
}
|
|
20
|
-
render() {
|
|
21
|
-
return (h(Host, { key: '66e5db3e66bad59650ad130dfc2163d4f32cd813', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '86608a5f63de3aaea3f40e596b69d615ecb92b64', class: "xv-tag_content" }, h("slot", { key: '143129ff39073a027a4ba1790a9bfaf4ed34b6d0' })), this.closeable && (h("button", { key: '31915db387c4f610007a61b2b677a9019a158f47', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
|
|
22
|
-
}
|
|
23
|
-
};
|
|
24
|
-
XvTag.style = xvTagCss;
|
|
25
|
-
|
|
26
|
-
export { XvTag as xv_tag_v2 };
|
|
27
|
-
|
|
28
|
-
//# sourceMappingURL=xv-tag-v2.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"xv-tag-v2.entry.esm.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,+gDAA+gD;;MCOnhD,KAAK;IALlB;;;QAMU,SAAI,GAAuB,IAAI,CAAC;QAChC,UAAK,GAAW,EAAE,CAAC;QACnB,OAAE,GAAW,EAAE,CAAC;QAChB,aAAQ,GAAY,KAAK,CAAC;QAC1B,cAAS,GAAY,KAAK,CAAC;KAwBpC;IArBC,YAAY,CAAC,CAAe;QAC1B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;KACzB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,EACjD,KAAK,EAAE,UAAU,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,IAE/D,4DAAK,KAAK,EAAC,gBAAgB,IACzB,8DAAa,CACT,EACL,IAAI,CAAC,SAAS,KACb,+DAAQ,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,EAAC,cAAc,GAAU,CAC9E,CACI,EACP;KACH;;;;;;","names":[],"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"],"version":3}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, d as Host } from './index-90b82796.js';
|
|
2
|
-
|
|
3
|
-
const xvTooltipCss = ":host{position:relative;display:inline-block;cursor:pointer;line-height:0.5}:host::before,:host::after{position:absolute;opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;z-index:10}:host::before{content:attr(tooltip);background:var(--background-inverse, #333);color:var(--icon-inverse, #fff);padding:var(--gap-sm, 5px) var(--gap-md, 16px);border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw;font-family:var(--fz-body, Tahoma);font-size:var(fz-md, 14px);font-weight:400;line-height:18px;letter-spacing:0.16px}:host::after{content:\"\";border:6px solid transparent}:host(:hover)::before,:host(:hover)::after,:host(:focus)::before,:host(:focus)::after{opacity:1;visibility:visible}:host(.xv-tooltip_top)::before{bottom:100%;left:50%;transform:translateX(-50%) translateY(-5px)}:host(.xv-tooltip_top)::after{bottom:100%;left:50%;border-top-color:var(--background-inverse, #333);transform:translateX(-50%) translateY(5px)}:host(.xv-tooltip_top-left)::before{bottom:100%;left:0;transform:translateY(-5px)}:host(.xv-tooltip_top-left)::after{bottom:100%;left:10px;border-top-color:black;transform:translateY(5px)}:host(.xv-tooltip_top-right)::before{bottom:100%;right:0;transform:translateY(-5px)}:host(.xv-tooltip_top-right)::after{bottom:100%;right:10px;border-top-color:var(--background-inverse, #333);transform:translateY(5px)}:host(.xv-tooltip_bottom)::before{top:100%;left:50%;transform:translateX(-50%) translateY(5px)}:host(.xv-tooltip_bottom)::after{top:100%;left:50%;border-bottom-color:black;transform:translateX(-50%) translateY(-5px)}:host(.xv-tooltip_bottom-left)::before{top:100%;left:0;transform:translateY(5px)}:host(.xv-tooltip_bottom-left)::after{top:100%;left:10px;border-bottom-color:var(--background-inverse, #333);transform:translateY(-5px)}:host(.xv-tooltip_bottom-right)::before{top:100%;right:0;transform:translateY(5px)}:host(.xv-tooltip_bottom-right)::after{top:100%;right:10px;border-bottom-color:var(--background-inverse, #333);transform:translateY(-5px)}:host(.xv-tooltip_left)::before{right:100%;top:50%;transform:translateY(-50%) translateX(-5px)}:host(.xv-tooltip_left)::after{right:100%;top:50%;border-left-color:var(--background-inverse, #333);transform:translateY(-50%) translateX(5px)}:host(.xv-tooltip_right)::before{left:100%;top:50%;transform:translateY(-50%) translateX(5px)}:host(.xv-tooltip_right)::after{left:100%;top:50%;border-right-color:var(--background-inverse, #333);transform:translateY(-50%) translateX(-5px)}";
|
|
4
|
-
|
|
5
|
-
const XvTooltip = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
/**
|
|
9
|
-
* Tooltip and arrow position related to element
|
|
10
|
-
* possible options: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right'.
|
|
11
|
-
* By default, "top"
|
|
12
|
-
*/
|
|
13
|
-
this.position = 'top';
|
|
14
|
-
}
|
|
15
|
-
render() {
|
|
16
|
-
return (h(Host, { key: '435431800bcf1fd6cc25a3715956cea636fa829d', tooltip: this.message, class: `xv-tooltip_${this.position}` }, h("slot", { key: 'c9fe9b1b177acf603ac8b99d08b7baa55c3a00f1' }, h("svg", { key: 'e114bdafc56acaf928cc800224b43f211a7524dd', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: 'edb0690dc5736a05956504efa46b4ee8eadc59fd', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))));
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
XvTooltip.style = xvTooltipCss;
|
|
20
|
-
|
|
21
|
-
export { XvTooltip as xv_tooltip_v2 };
|
|
22
|
-
|
|
23
|
-
//# sourceMappingURL=xv-tooltip-v2.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"xv-tooltip-v2.entry.esm.js","mappings":";;AAAA,MAAM,YAAY,GAAG,0+EAA0+E;;MCOl/E,SAAS;IALtB;;;;;;;QAaU,aAAQ,GAAoG,KAAK,CAAC;KAgB3H;IAdC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,cAAc,IAAI,CAAC,QAAQ,EAAE,IAC/D,+DACE,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,IACjF,6DACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,yTAAyT,GAC3T,CACE,CACD,CACF,EACP;KACH;;;;;;","names":[],"sources":["src/components/xv-tooltip/xv-tooltip.scss?tag=xv-tooltip-v2&encapsulation=shadow","src/components/xv-tooltip/xv-tooltip.tsx"],"sourcesContent":[":host {\r\n position: relative;\r\n display: inline-block;\r\n cursor: pointer;\r\n line-height: 0.5;\r\n}\r\n\r\n/* General styles for tooltip */\r\n:host::before,\r\n:host::after {\r\n position: absolute;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\r\n z-index: 10;\r\n}\r\n\r\n/* Tooltip */\r\n:host::before {\r\n content: attr(tooltip);\r\n background: var(--background-inverse, #333);\r\n color: var(--icon-inverse, #fff);\r\n padding: var(--gap-sm, 5px) var(--gap-md, 16px);\r\n border-radius: 2px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n max-width: max(70vw);\r\n font-family: var(--fz-body, Tahoma);\r\n font-size: var(fz-md, 14px);\r\n font-weight: 400;\r\n line-height: 18px;\r\n letter-spacing: 0.16px;\r\n}\r\n\r\n/* Arrow */\r\n:host::after {\r\n content: \"\";\r\n border: 6px solid transparent;\r\n}\r\n\r\n/* Show Tooltip and arrow */\r\n:host(:hover)::before,\r\n:host(:hover)::after,\r\n:host(:focus)::before,\r\n:host(:focus)::after {\r\n opacity: 1;\r\n visibility: visible;\r\n}\r\n\r\n/* Tooltip positions */\r\n:host(.xv-tooltip_top)::before {\r\n bottom: 100%;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(-5px);\r\n}\r\n:host(.xv-tooltip_top)::after {\r\n bottom: 100%;\r\n left: 50%;\r\n border-top-color: var(--background-inverse, #333);\r\n transform: translateX(-50%) translateY(5px);\r\n}\r\n\r\n:host(.xv-tooltip_top-left)::before {\r\n bottom: 100%;\r\n left: 0;\r\n transform: translateY(-5px);\r\n}\r\n:host(.xv-tooltip_top-left)::after {\r\n bottom: 100%;\r\n left: 10px;\r\n border-top-color: black;\r\n transform: translateY(5px);\r\n}\r\n\r\n:host(.xv-tooltip_top-right)::before {\r\n bottom: 100%;\r\n right: 0;\r\n transform: translateY(-5px);\r\n}\r\n:host(.xv-tooltip_top-right)::after {\r\n bottom: 100%;\r\n right: 10px;\r\n border-top-color: var(--background-inverse, #333);\r\n transform: translateY(5px);\r\n}\r\n\r\n:host(.xv-tooltip_bottom)::before {\r\n top: 100%;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(5px);\r\n}\r\n:host(.xv-tooltip_bottom)::after {\r\n top: 100%;\r\n left: 50%;\r\n border-bottom-color: black;\r\n transform: translateX(-50%) translateY(-5px);\r\n}\r\n\r\n:host(.xv-tooltip_bottom-left)::before {\r\n top: 100%;\r\n left: 0;\r\n transform: translateY(5px);\r\n}\r\n:host(.xv-tooltip_bottom-left)::after {\r\n top: 100%;\r\n left: 10px;\r\n border-bottom-color: var(--background-inverse, #333);\r\n transform: translateY(-5px);\r\n}\r\n\r\n:host(.xv-tooltip_bottom-right)::before {\r\n top: 100%;\r\n right: 0;\r\n transform: translateY(5px);\r\n}\r\n:host(.xv-tooltip_bottom-right)::after {\r\n top: 100%;\r\n right: 10px;\r\n border-bottom-color: var(--background-inverse, #333);\r\n transform: translateY(-5px);\r\n}\r\n\r\n:host(.xv-tooltip_left)::before {\r\n right: 100%;\r\n top: 50%;\r\n transform: translateY(-50%) translateX(-5px);\r\n}\r\n:host(.xv-tooltip_left)::after {\r\n right: 100%;\r\n top: 50%;\r\n border-left-color: var(--background-inverse, #333);\r\n transform: translateY(-50%) translateX(5px);\r\n}\r\n\r\n:host(.xv-tooltip_right)::before {\r\n left: 100%;\r\n top: 50%;\r\n transform: translateY(-50%) translateX(5px);\r\n}\r\n:host(.xv-tooltip_right)::after {\r\n left: 100%;\r\n top: 50%;\r\n border-right-color: var(--background-inverse, #333);\r\n transform: translateY(-50%) translateX(-5px);\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-tooltip-v2',\r\n styleUrl: 'xv-tooltip.scss',\r\n shadow: true,\r\n})\r\nexport class XvTooltip {\r\n /** Message what will be shown for tooltip **/\r\n @Prop() message: string;\r\n /**\r\n * Tooltip and arrow position related to element\r\n * possible options: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right'.\r\n * By default, \"top\"\r\n */\r\n @Prop() position: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right' = 'top';\r\n\r\n render() {\r\n return (\r\n <Host tooltip={this.message} class={`xv-tooltip_${this.position}`}>\r\n <slot>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" width={16} height={16}>\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"\r\n />\r\n </svg>\r\n </slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { B as BUILD, c as consoleDevInfo, H, w as win, N as NAMESPACE, p as promiseResolve, b as bootstrapLazy } from './index-90b82796.js';
|
|
2
|
-
export { s as setNonce } from './index-90b82796.js';
|
|
3
|
-
import { g as globalScripts } from './app-globals-0f993ce5.js';
|
|
4
|
-
|
|
5
|
-
/*
|
|
6
|
-
Stencil Client Patch Browser v4.27.1 | MIT Licensed | https://stenciljs.com
|
|
7
|
-
*/
|
|
8
|
-
var patchBrowser = () => {
|
|
9
|
-
if (BUILD.isDev && !BUILD.isTesting) {
|
|
10
|
-
consoleDevInfo("Running in development mode.");
|
|
11
|
-
}
|
|
12
|
-
if (BUILD.cloneNodeFix) {
|
|
13
|
-
patchCloneNodeFix(H.prototype);
|
|
14
|
-
}
|
|
15
|
-
const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll("script")).find(
|
|
16
|
-
(s) => new RegExp(`/${NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) || s.getAttribute("data-stencil-namespace") === NAMESPACE
|
|
17
|
-
) : null;
|
|
18
|
-
const importMeta = import.meta.url;
|
|
19
|
-
const opts = BUILD.scriptDataOpts ? (scriptElm || {})["data-opts"] || {} : {};
|
|
20
|
-
if (importMeta !== "") {
|
|
21
|
-
opts.resourcesUrl = new URL(".", importMeta).href;
|
|
22
|
-
}
|
|
23
|
-
return promiseResolve(opts);
|
|
24
|
-
};
|
|
25
|
-
var patchCloneNodeFix = (HTMLElementPrototype) => {
|
|
26
|
-
const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;
|
|
27
|
-
HTMLElementPrototype.cloneNode = function(deep) {
|
|
28
|
-
if (this.nodeName === "TEMPLATE") {
|
|
29
|
-
return nativeCloneNodeFn.call(this, deep);
|
|
30
|
-
}
|
|
31
|
-
const clonedNode = nativeCloneNodeFn.call(this, false);
|
|
32
|
-
const srcChildNodes = this.childNodes;
|
|
33
|
-
if (deep) {
|
|
34
|
-
for (let i = 0; i < srcChildNodes.length; i++) {
|
|
35
|
-
if (srcChildNodes[i].nodeType !== 2) {
|
|
36
|
-
clonedNode.appendChild(srcChildNodes[i].cloneNode(true));
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
return clonedNode;
|
|
41
|
-
};
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
patchBrowser().then(async (options) => {
|
|
45
|
-
await globalScripts();
|
|
46
|
-
return bootstrapLazy([["xv-table-v2-header-row",[[1,"xv-table-v2-header-row",{"selectionName":[513,"selection-name"],"partial":[516],"checked":[1540],"cols":[32]}]]],["xv-table-v2-row",[[1,"xv-table-v2-row",{"expandable":[1028],"expanded":[1540],"selectionName":[513,"selection-name"],"value":[513],"checked":[1540],"prevRowExpanded":[32],"expandId":[32],"id":[32],"cols":[32],"setExpandRelation":[64],"toggleExpand":[64]},null,{"expandable":["setExpandableRelationHandle"]}]]],["xv-accordion-v2",[[1,"xv-accordion-v2",{"multiple":[4],"xvId":[1,"xv-id"],"value":[1025],"opened":[32],"toggleItem":[64]}]]],["xv-accordion-v2-item",[[1,"xv-accordion-v2-item",{"disabled":[4],"label":[1],"value":[1],"isOpen":[32]},[[16,"accordionChange","handleAccordionChange"]]]]],["xv-breadcrumbs-v2",[[1,"xv-breadcrumbs-v2"]]],["xv-button-v2",[[1,"xv-button-v2",{"label":[1],"block":[4],"variant":[1],"disabled":[4]}]]],["xv-card-v2",[[1,"xv-card-v2",{"variant":[1],"media":[1],"header":[1],"body":[1],"footer":[1]}]]],["xv-link-v2",[[1,"xv-link-v2",{"href":[1],"target":[1],"disabled":[4],"size":[1],"variant":[1]}]]],["xv-progress-indicator-v2",[[1,"xv-progress-indicator-v2",{"progress":[2]},null,{"progress":["updateChildItems"]}]]],["xv-progress-indicator-v2-item",[[1,"xv-progress-indicator-v2-item",{"done":[4]}]]],["xv-table-v2",[[1,"xv-table-v2",{"description":[1],"colorSchema":[1,"color-schema"],"expandable":[4],"size":[1],"selectable":[4],"selectedRows":[32]},null,{"colorSchema":["setRowPropsHandler"]}]]],["xv-table-v2-col",[[1,"xv-table-v2-col"]]],["xv-tag-v2",[[1,"xv-tag-v2",{"size":[1],"color":[1],"bg":[1],"disabled":[4],"closeable":[4]}]]],["xv-tooltip-v2",[[1,"xv-tooltip-v2",{"message":[1],"position":[1]}]]],["xv-checkbox-v2",[[65,"xv-checkbox-v2",{"checked":[1540],"indeterminate":[516],"disabled":[516],"name":[513],"value":[513],"required":[516],"partial":[516],"label":[1],"size":[513],"error":[520],"hasFocus":[32]},null,{"checked":["onCheckedChange"]}]]]], options);
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
//# sourceMappingURL=xv-webcomponents.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"xv-webcomponents.esm.js","mappings":";;;;AAAA;AACA;AACA;AAKA,IAAI,YAAY,GAAG,MAAM;AACzB,EAAE,IAAI,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;AACvC,IAAI,cAAc,CAAC,8BAA8B,CAAC,CAAC;AACnD,GAAG;AACH,EAAE,IAAI,KAAK,CAAC,YAAY,EAAE;AAC1B,IAAI,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;AACnC,GAAG;AACH,EAAE,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,GAAG,GAAG,CAAC,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI;AACnH,IAAI,CAAC,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,wBAAwB,CAAC,KAAK,SAAS;AACnI,GAAG,GAAG,IAAI,CAAC;AACX,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;AACrC,EAAE,MAAM,IAAI,GAAG,KAAK,CAAC,cAAc,GAAG,CAAC,SAAS,IAAI,EAAE,EAAE,WAAW,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC;AAChF,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AACtD,GAAG;AACH,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC,CAAC;AACF,IAAI,iBAAiB,GAAG,CAAC,oBAAoB,KAAK;AAClD,EAAE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,SAAS,CAAC;AAC3D,EAAE,oBAAoB,CAAC,SAAS,GAAG,SAAS,IAAI,EAAE;AAClD,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE;AACtC,MAAM,OAAO,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AAChD,KAAK;AACL,IAAI,MAAM,UAAU,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAC3D,IAAI,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC;AAC1C,IAAI,IAAI,IAAI,EAAE;AACd,MAAM,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACrD,QAAQ,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,EAAE;AAC7C,UAAU,UAAU,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;AACnE,SAAS;AACT,OAAO;AACP,KAAK;AACL,IAAI,OAAO,UAAU,CAAC;AACtB,GAAG,CAAC;AACJ,CAAC;;ACrCD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE,CAAC;AACxB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC","names":[],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.27.1 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}
|
package/loader/cdn.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
module.exports = require('../dist/cjs/loader.cjs.js');
|
package/loader/index.cjs.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
module.exports = require('../dist/cjs/loader.cjs.js');
|
package/loader/index.d.ts
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
export * from '../dist/types/components';
|
|
2
|
-
export interface CustomElementsDefineOptions {
|
|
3
|
-
exclude?: string[];
|
|
4
|
-
resourcesUrl?: string;
|
|
5
|
-
syncQueue?: boolean;
|
|
6
|
-
jmp?: (c: Function) => any;
|
|
7
|
-
raf?: (c: FrameRequestCallback) => number;
|
|
8
|
-
ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
|
|
9
|
-
rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
|
|
10
|
-
}
|
|
11
|
-
export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
|
|
12
|
-
/**
|
|
13
|
-
* @deprecated
|
|
14
|
-
*/
|
|
15
|
-
export declare function applyPolyfills(): Promise<void>;
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* Used to specify a nonce value that corresponds with an application's CSP.
|
|
19
|
-
* When set, the nonce will be added to all dynamically created script and style tags at runtime.
|
|
20
|
-
* Alternatively, the nonce value can be set on a meta tag in the DOM head
|
|
21
|
-
* (<meta name="csp-nonce" content="{ nonce value here }" />) which
|
|
22
|
-
* will result in the same behavior.
|
|
23
|
-
*/
|
|
24
|
-
export declare function setNonce(nonce: string): void;
|
package/loader/index.es2017.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from '../dist/esm/loader.js';
|
package/loader/index.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
|
|
2
|
-
export * from '../dist/esm/loader.js';
|
package/loader/package.json
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "xv-webcomponents-loader",
|
|
3
|
-
"private": true,
|
|
4
|
-
"typings": "./index.d.ts",
|
|
5
|
-
"module": "./index.js",
|
|
6
|
-
"main": "./index.cjs.js",
|
|
7
|
-
"jsnext:main": "./index.es2017.js",
|
|
8
|
-
"es2015": "./index.es2017.js",
|
|
9
|
-
"es2017": "./index.es2017.js",
|
|
10
|
-
"unpkg": "./cdn.js"
|
|
11
|
-
}
|