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,13 +0,0 @@
|
|
|
1
|
-
export { f as format } from './utils-e6dc0550.js';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* @fileoverview entry point for your component library
|
|
5
|
-
*
|
|
6
|
-
* This is the entry point for your component library. Use this file to export utilities,
|
|
7
|
-
* constants or data structure that accompany your components.
|
|
8
|
-
*
|
|
9
|
-
* DO NOT use this file to export your components. Instead, use the recommended approaches
|
|
10
|
-
* to consume components of this package as outlined in the `README.md`.
|
|
11
|
-
*/
|
|
12
|
-
|
|
13
|
-
//# sourceMappingURL=index.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"index.esm.js","mappings":";;AAAA;;;;;;;;","names":[],"sources":["src/index.ts"],"sourcesContent":["/**\r\n * @fileoverview entry point for your component library\r\n *\r\n * This is the entry point for your component library. Use this file to export utilities,\r\n * constants or data structure that accompany your components.\r\n *\r\n * DO NOT use this file to export your components. Instead, use the recommended approaches\r\n * to consume components of this package as outlined in the `README.md`.\r\n */\r\n\r\nexport { format } from './utils/utils';\r\nexport type * from './components.d.ts';\r\n"],"version":3}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
function format(first, middle, last) {
|
|
2
|
-
return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
|
|
3
|
-
}
|
|
4
|
-
function uidGenerator() {
|
|
5
|
-
return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c => (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16));
|
|
6
|
-
}
|
|
7
|
-
/**
|
|
8
|
-
* Walks through the given DOM collection and runs the given callback.
|
|
9
|
-
* @param a A DOM collection.
|
|
10
|
-
* @param predicate The callback function.
|
|
11
|
-
* @param [thisObject] The context object for the given callback function.
|
|
12
|
-
*/
|
|
13
|
-
const forEach = (a, predicate, thisObject) => Array.prototype.forEach.call(a, predicate, thisObject);
|
|
14
|
-
|
|
15
|
-
export { format as f, uidGenerator as u };
|
|
16
|
-
|
|
17
|
-
//# sourceMappingURL=utils-e6dc0550.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"utils-e6dc0550.js","mappings":"SAAgB,MAAM,CAAC,KAAc,EAAE,MAAe,EAAE,IAAa;IACnE,OAAO,CAAC,KAAK,IAAI,EAAE,KAAK,MAAM,GAAG,IAAI,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,IAAI,GAAG,IAAI,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;AACjF,CAAC;SAEe,YAAY;IAC1B,OAAO,sCAAsC,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,IAC/D,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,eAAe,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,CAChF,CAAC;AACJ,CAAC;AAED;;;;;;AAMO,MAAM,OAAO,GAAG,CACrB,CAA+C,EAC/C,SAAoD,EACpD,UAAgB,KACb,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,SAAS,EAAE,UAAU,CAAC;;;;","names":[],"sources":["src/utils/utils.ts"],"sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\r\n return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\r\n}\r\n\r\nexport function uidGenerator() {\r\n return \"10000000-1000-4000-8000-100000000000\".replace(/[018]/g, c =>\r\n (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)\r\n );\r\n}\r\n\r\n/**\r\n * Walks through the given DOM collection and runs the given callback.\r\n * @param a A DOM collection.\r\n * @param predicate The callback function.\r\n * @param [thisObject] The context object for the given callback function.\r\n */\r\nexport const forEach = (\r\n a: NodeListOf<Node> | HTMLCollectionOf<Element>,\r\n predicate: (search: Element, index?: number) => void,\r\n thisObject?: any\r\n) => Array.prototype.forEach.call(a, predicate, thisObject);\r\n"],"version":3}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, a as createEvent, h, d as Host, g as getElement } from './index-90b82796.js';
|
|
2
|
-
|
|
3
|
-
const xvAccordionItemCss = ":host{border-top:1px solid var(--border-subtle-01);display:flex;flex-direction:column;font-family:var(--ff-body, inherit)}:host(.disabled) .label{color:var(--text-disabled)}:host(.disabled) .label:hover{cursor:initial;background-color:transparent}.label{padding:14px 16px;display:inline-flex;align-items:center;column-gap:20px;justify-content:space-between;text-align:left;color:var(--text-primary);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:0.16px;background-color:transparent;transition:background-color 200ms ease-in-out}.label>span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.label:hover{cursor:pointer;background-color:var(--layer-hover-01)}.label:after{content:\"\";border:solid black;border-width:0 2px 2px 0;display:inline-block;padding:4.66px;transition:transform 100ms ease-in-out;transform:rotate(45deg)}.label.opened:after{transform:rotate(-135deg)}.content{padding:0 16px;text-align:left;color:var(--text-primary);font-size:14px;overflow:hidden;max-height:0;transition:max-height 300ms ease-in-out, padding 250ms ease 50ms}.content.opened{padding:14px 16px;max-height:500px}";
|
|
4
|
-
|
|
5
|
-
const XvAccordionItem = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.itemToggle = createEvent(this, "itemToggle", 7);
|
|
9
|
-
this.disabled = false;
|
|
10
|
-
this.isOpen = false;
|
|
11
|
-
}
|
|
12
|
-
handleAccordionChange(event) {
|
|
13
|
-
var _a;
|
|
14
|
-
const parentAccordionId = (_a = this.el.closest('[data-id]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-id');
|
|
15
|
-
if (event.detail.id !== parentAccordionId)
|
|
16
|
-
return;
|
|
17
|
-
this.isOpen = event.detail.opened.has(this.value);
|
|
18
|
-
}
|
|
19
|
-
toggle() {
|
|
20
|
-
var _a, _b;
|
|
21
|
-
if (this.disabled)
|
|
22
|
-
return;
|
|
23
|
-
this.isOpen = !this.isOpen;
|
|
24
|
-
(_b = (_a = this.el.closest('xv-accordion-v2')) === null || _a === void 0 ? void 0 : _a.toggleItem) === null || _b === void 0 ? void 0 : _b.call(_a, this.value);
|
|
25
|
-
}
|
|
26
|
-
render() {
|
|
27
|
-
return (h(Host, { key: '1b35eb9e285cb2a28aa56b5acd2caa31cd682a0b', class: `${this.disabled ? 'disabled' : ''}` }, h("label", { key: '521f0b41ec79577ebd532094ab48e8964c12e1ef', class: `label ${this.isOpen ? 'opened' : 'closed'}`, onClick: this.toggle.bind(this) }, h("span", { key: '3fd163c1926102da4c71fe6defae5dcfe3f35fbf' }, this.label)), h("div", { key: '351629135c93719bcca862ce17176c60d2e99f41', class: `content ${this.isOpen ? 'opened' : 'closed'}` }, h("slot", { key: '221b2fdff4f2f84956e07bb0bb86be7cf9c9aba5' }))));
|
|
28
|
-
}
|
|
29
|
-
get el() { return getElement(this); }
|
|
30
|
-
};
|
|
31
|
-
XvAccordionItem.style = xvAccordionItemCss;
|
|
32
|
-
|
|
33
|
-
export { XvAccordionItem as xv_accordion_v2_item };
|
|
34
|
-
|
|
35
|
-
//# sourceMappingURL=xv-accordion-v2-item.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"xv-accordion-v2-item.entry.esm.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,wqCAAwqC;;MCOtrC,eAAe;IAL5B;;;QAOU,aAAQ,GAAY,KAAK,CAAC;QAGzB,WAAM,GAAY,KAAK,CAAC;KA4BlC;IAxBC,qBAAqB,CAAC,KAAuD;;QAC3E,MAAM,iBAAiB,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,0CAAE,YAAY,CAAC,SAAS,CAAC,CAAC;QAChF,IAAI,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,iBAAiB;YAAE,OAAO;QAClD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACnD;IAED,MAAM;;QACJ,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,MAAA,MAAA,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC,0CAAE,UAAU,mDAAG,IAAI,CAAC,KAAK,CAAC,CAAC;KAC9D;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAC/C,8DAAO,KAAK,EAAE,SAAS,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IACzF,+DAAO,IAAI,CAAC,KAAK,CAAQ,CACnB,EACR,4DAAK,KAAK,EAAE,WAAW,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,QAAQ,EAAE,IACxD,8DAAQ,CACJ,CACD,EACP;KACH;;;;;;;","names":[],"sources":["src/components/xv-accordion-item/xv-accordion-item.scss?tag=xv-accordion-v2-item&encapsulation=shadow","src/components/xv-accordion-item/xv-accordion-item.tsx"],"sourcesContent":[":host {\r\n border-top: 1px solid var(--border-subtle-01);\r\n display: flex;\r\n flex-direction: column;\r\n font-family: var(--ff-body, inherit);\r\n}\r\n\r\n:host(.disabled) {\r\n .label {\r\n color: var(--text-disabled);\r\n &:hover {\r\n cursor: initial;\r\n background-color: transparent;\r\n }\r\n }\r\n}\r\n\r\n.label {\r\n padding: 14px 16px;\r\n display: inline-flex;\r\n align-items: center;\r\n column-gap: 20px;\r\n justify-content: space-between;\r\n text-align: left;\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n letter-spacing: 0.16px;\r\n background-color: transparent;\r\n transition: background-color 200ms ease-in-out;\r\n &>span {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 1;\r\n -webkit-box-orient: vertical;\r\n }\r\n\r\n &:hover {\r\n cursor: pointer;\r\n background-color: var(--layer-hover-01);\r\n }\r\n\r\n &:after {\r\n content: '';\r\n border: solid black;\r\n border-width: 0 2px 2px 0;\r\n display: inline-block;\r\n padding: 4.66px;\r\n transition: transform 100ms ease-in-out;\r\n transform: rotate(45deg);\r\n }\r\n\r\n &.opened:after {\r\n transform: rotate(-135deg);\r\n }\r\n}\r\n\r\n.content {\r\n padding: 0 16px;\r\n text-align: left;\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n overflow: hidden;\r\n max-height: 0;\r\n transition: max-height 300ms ease-in-out, padding 250ms ease 50ms;\r\n &.opened {\r\n padding: 14px 16px;\r\n max-height: 500px;\r\n }\r\n}\r\n","import { Component, Host, h, Element, Prop, State, Listen, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-accordion-v2-item',\r\n styleUrl: 'xv-accordion-item.scss',\r\n shadow: true,\r\n})\r\nexport class XvAccordionItem {\r\n @Element() el: HTMLElement;\r\n @Prop() disabled: boolean = false;\r\n @Prop() label: string;\r\n @Prop() value: string;\r\n @State() isOpen: boolean = false;\r\n @Event() itemToggle: EventEmitter;\r\n\r\n @Listen('accordionChange', { target: 'body' })\r\n handleAccordionChange(event: CustomEvent<{ opened: Set<string>, id: string }>) {\r\n const parentAccordionId = this.el.closest('[data-id]')?.getAttribute('data-id');\r\n if (event.detail.id !== parentAccordionId) return;\r\n this.isOpen = event.detail.opened.has(this.value);\r\n }\r\n\r\n toggle() {\r\n if (this.disabled) return;\r\n this.isOpen = !this.isOpen;\r\n this.el.closest('xv-accordion-v2')?.toggleItem?.(this.value);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class={`${this.disabled ? 'disabled' : ''}`}>\r\n <label class={`label ${this.isOpen ? 'opened' : 'closed'}`} onClick={this.toggle.bind(this)}>\r\n <span>{this.label}</span>\r\n </label>\r\n <div class={`content ${this.isOpen ? 'opened' : 'closed'}`}>\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, a as createEvent, h, d as Host } from './index-90b82796.js';
|
|
2
|
-
import { u as uidGenerator } from './utils-e6dc0550.js';
|
|
3
|
-
|
|
4
|
-
const xvAccordionCss = ":host{display:block}";
|
|
5
|
-
|
|
6
|
-
const XvAccordion = class {
|
|
7
|
-
constructor(hostRef) {
|
|
8
|
-
registerInstance(this, hostRef);
|
|
9
|
-
this.accordionChange = createEvent(this, "accordionChange", 7);
|
|
10
|
-
this.multiple = false;
|
|
11
|
-
this.xvId = uidGenerator();
|
|
12
|
-
this.opened = new Set();
|
|
13
|
-
}
|
|
14
|
-
async toggleItem(value) {
|
|
15
|
-
if (this.opened.has(value)) {
|
|
16
|
-
this.opened.delete(value);
|
|
17
|
-
}
|
|
18
|
-
else {
|
|
19
|
-
if (!this.multiple)
|
|
20
|
-
this.opened.clear();
|
|
21
|
-
this.value = value;
|
|
22
|
-
this.opened.add(this.value);
|
|
23
|
-
}
|
|
24
|
-
this.accordionChange.emit({ opened: this.opened, id: this.xvId });
|
|
25
|
-
return { opened: this.opened, id: this.xvId };
|
|
26
|
-
}
|
|
27
|
-
componentWillLoad() {
|
|
28
|
-
if (this.value) {
|
|
29
|
-
return this.toggleItem(this.value);
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
render() {
|
|
33
|
-
return (h(Host, { key: '6b539eab63d10cc42de359385c81757b921829eb', class: "xv-accordion", "data-id": this.xvId }, h("slot", { key: '2f5bb22ac2343cac1eae5931720a9b62cd3a383f' })));
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
XvAccordion.style = xvAccordionCss;
|
|
37
|
-
|
|
38
|
-
export { XvAccordion as xv_accordion_v2 };
|
|
39
|
-
|
|
40
|
-
//# sourceMappingURL=xv-accordion-v2.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"xv-accordion-v2.entry.esm.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,sBAAsB;;MCQhC,WAAW;IALxB;;;QAMU,aAAQ,GAAY,KAAK,CAAC;QAC1B,SAAI,GAAW,YAAY,EAAE,CAAC;QAE7B,WAAM,GAAgB,IAAI,GAAG,EAAE,CAAC;KA+B1C;IA3BC,MAAM,UAAU,CAAC,KAAa;QAC5B,IAAI,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YAC1B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAC3B;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YACxC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC7B;QAED,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAElE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;KAC/C;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACpC;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,cAAc,aAAU,IAAI,CAAC,IAAI,IAC3C,8DAAQ,CACH,EACP;KACH;;;;;;","names":[],"sources":["src/components/xv-accordion/xv-accordion.scss?tag=xv-accordion-v2&encapsulation=shadow","src/components/xv-accordion/xv-accordion.tsx"],"sourcesContent":[":host {\r\n display: block;\r\n}\r\n","import { Component, Host, h, Event, EventEmitter, Method, State, Prop } from '@stencil/core';\r\nimport { uidGenerator } from '../../utils/utils';\r\n\r\n@Component({\r\n tag: 'xv-accordion-v2',\r\n styleUrl: 'xv-accordion.scss',\r\n shadow: true,\r\n})\r\nexport class XvAccordion {\r\n @Prop() multiple: boolean = false;\r\n @Prop() xvId: string = uidGenerator();\r\n @Prop({ mutable: true }) value: string;\r\n @State() opened: Set<string> = new Set();\r\n @Event() accordionChange: EventEmitter<{ opened: Set<string>, id: string }>;\r\n\r\n @Method()\r\n async toggleItem(value: string) {\r\n if (this.opened.has(value)) {\r\n this.opened.delete(value);\r\n } else {\r\n if (!this.multiple) this.opened.clear();\r\n this.value = value;\r\n this.opened.add(this.value);\r\n }\r\n\r\n this.accordionChange.emit({ opened: this.opened, id: this.xvId });\r\n\r\n return { opened: this.opened, id: this.xvId };\r\n }\r\n\r\n componentWillLoad() {\r\n if (this.value) {\r\n return this.toggleItem(this.value);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class=\"xv-accordion\" data-id={this.xvId}>\r\n <slot />\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, d as Host } from './index-90b82796.js';
|
|
2
|
-
|
|
3
|
-
const xvBreadcrumbsCss = ":host{display:block}";
|
|
4
|
-
|
|
5
|
-
const XvBreadcrumbs = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
}
|
|
9
|
-
render() {
|
|
10
|
-
return (h(Host, { key: 'cd2a64d2cdd1002b6d0779cea916a71299bc155c' }, h("slot", { key: '8b888b9c0dd5f34d7122668b42875986cd416e95' })));
|
|
11
|
-
}
|
|
12
|
-
};
|
|
13
|
-
XvBreadcrumbs.style = xvBreadcrumbsCss;
|
|
14
|
-
|
|
15
|
-
export { XvBreadcrumbs as xv_breadcrumbs_v2 };
|
|
16
|
-
|
|
17
|
-
//# sourceMappingURL=xv-breadcrumbs-v2.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"xv-breadcrumbs-v2.entry.esm.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,sBAAsB;;MCOlC,aAAa;;;;IACxB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/xv-breadcrumbs/xv-breadcrumbs.scss?tag=xv-breadcrumbs-v2&encapsulation=shadow","src/components/xv-breadcrumbs/xv-breadcrumbs.tsx"],"sourcesContent":[":host {\r\n display: block;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-breadcrumbs-v2',\r\n styleUrl: 'xv-breadcrumbs.scss',\r\n shadow: true,\r\n})\r\nexport class XvBreadcrumbs {\r\n render() {\r\n return (\r\n <Host>\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, a as createEvent, h } from './index-90b82796.js';
|
|
2
|
-
|
|
3
|
-
const xvButtonV2Css = "@charset \"UTF-8\";:host{--focus-border-width:2px;--focus-border-style:solid;--button-ghost:tarnsparent;--text-disabled-opacity:0.25;--button-border-radius:3px;--button-border-width:1px;--button-border-style:solid;--button-border-color-accent:#97BF0D;--button-border-color-primary:#273435;--button-border-color-secondary:#D1D1D1;--button-border-color-ghost:tarnsparent;--button-ghost-hover:tarnsparent;--button-ghost-active:rgba(139, 139, 139, 0.5);--button-accent-disabled:#D1D1D1;--button-primary-disabled:#D1D1D1;--button-secondary-disabled:#D1D1D1;--button-tertiary-disabled:tarnsparent;--button-ghost-disabled:tarnsparent}:host button{font-family:inherit;font-size:16px;font-weight:700;padding:0 20px;min-height:40px;line-height:40px;cursor:pointer;box-sizing:border-box;transition:background-color 0.2s ease-in-out, filter 0.2s ease-in-out, transform 0.1s ease-in-out, border-color 0.2s ease-in-out, border-width 0.2s ease-in-out, box-shadow 0.2s ease-in-out}:host button.xv-button-block{width:100%}.xv-button{}.xv-button.accent{background-color:var(--button-accent);color:var(--text-on-color);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-accent);border-radius:var(--button-border-radius)}.xv-button.accent:hover{background-color:var(--button-accent-hover)}.xv-button.accent:active{background-color:var(--button-accent-active);color:var(--text-on-color)}.xv-button.accent:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.accent:disabled{background-color:var(--button-accent-disabled);color:var(--text-on-color-disabled);border:var(--button-border-width) var(--button-border-style) var(--button-accent-disabled)}.xv-button.primary{background-color:var(--button-primary);color:var(--text-on-color);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-primary);border-radius:var(--button-border-radius)}.xv-button.primary:hover{background-color:var(--button-primary-hover)}.xv-button.primary:active{background-color:var(--button-primary-active)}.xv-button.primary:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.primary:disabled{background-color:var(--button-primary-disabled);color:var(--text-on-color-disabled);border:var(--button-border-width) var(--button-border-style) var(--button-primary-disabled)}.xv-button.secondary{background-color:var(--button-secondary);color:var(--text-primary);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-secondary);border-radius:var(--button-border-radius)}.xv-button.secondary:hover{background-color:var(--button-secondary-hover)}.xv-button.secondary:active{background-color:var(--button-secondary-active)}.xv-button.secondary:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.secondary:disabled{background-color:var(--button-secondary-disabled);color:var(--text-on-color-disabled)}.xv-button.tertiary{background-color:var(--button-ghost);color:var(--text-primary);border:var(--button-border-width) var(--button-border-style) var(--button-tertiary);border-radius:var(--button-border-radius)}.xv-button.tertiary:hover{background-color:var(--button-tertiary-hover)}.xv-button.tertiary:active{background-color:var(--button-tertiary-active)}.xv-button.tertiary:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.tertiary:disabled{background-color:var(--button-tertiary-disabled);color:var(--text-disabled);opacity:var(--text-disabled-opacity)}.xv-button.ghost{background-color:var(--button-ghost);color:var(--text-primary);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-ghost);border-radius:var(--button-border-radius)}.xv-button.ghost:hover{background-color:var(--button-ghost-hover)}.xv-button.ghost:active{background-color:var(--button-ghost-active)}.xv-button.ghost:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out}.xv-button.ghost:disabled{background-color:var(--button-ghost-disabled);color:var(--text-disabled);opacity:var(--text-disabled-opacity)}";
|
|
4
|
-
|
|
5
|
-
const XvButton = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.buttonClick = createEvent(this, "buttonClick", 7);
|
|
9
|
-
/** Button label */
|
|
10
|
-
this.label = '';
|
|
11
|
-
/** Container width Button */
|
|
12
|
-
this.block = false;
|
|
13
|
-
/** Variant */
|
|
14
|
-
this.variant = 'primary';
|
|
15
|
-
/** Disabled state */
|
|
16
|
-
this.disabled = false;
|
|
17
|
-
/** Handle click only if not disabled */
|
|
18
|
-
this.handleClick = () => {
|
|
19
|
-
if (this.disabled) {
|
|
20
|
-
return;
|
|
21
|
-
}
|
|
22
|
-
this.buttonClick.emit();
|
|
23
|
-
};
|
|
24
|
-
}
|
|
25
|
-
render() {
|
|
26
|
-
return (h("button", { key: '4b6d2d71bd297a7b1e2a00ba36c8e4380395e696', class: `xv-button ${this.variant} ${this.block ? 'xv-button-block' : ''}`, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '2934a04fa4aae539014f0a283444903dc9807888', name: "icon-left" }), h("slot", { key: '7139fa048b1f6e10f45853f7d1ff3b8cef1b9db6' }, this.label), h("slot", { key: 'ff326b3d02d3c4102f85132b890a595fcfec08d4', name: "icon-right" })));
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
XvButton.style = xvButtonV2Css;
|
|
30
|
-
|
|
31
|
-
export { XvButton as xv_button_v2 };
|
|
32
|
-
|
|
33
|
-
//# sourceMappingURL=xv-button-v2.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"xv-button-v2.entry.esm.js","mappings":";;AAAA,MAAM,aAAa,GAAG,06IAA06I;;MCQn7I,QAAQ;IALrB;;;;QAOU,UAAK,GAAW,EAAE,CAAC;;QAGnB,UAAK,GAAY,KAAK,CAAC;;QAGvB,YAAO,GAA8D,SAAS,CAAC;;QAG/E,aAAQ,GAAY,KAAK,CAAC;;QAM1B,gBAAW,GAAG;YACpB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YACD,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;SACzB,CAAC;KAmBH;IAjBC,MAAM;QACJ,QACE,+DACE,KAAK,EAAE,aAAa,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,GAAG,iBAAiB,GAAG,EAAE,EAAE,EACzE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,IAEzB,6DAAM,IAAI,EAAC,WAAW,GAAQ,EAE9B,+DACG,IAAI,CAAC,KAAK,CACN,EAEP,6DAAM,IAAI,EAAC,YAAY,GAAQ,CACxB,EACT;KACH;;;;;;","names":[],"sources":["src/components/xv-button/xv-button-v2.scss?tag=xv-button-v2&encapsulation=shadow","src/components/xv-button/xv-button.tsx"],"sourcesContent":[":host {\r\n --focus-border-width: 2px;\r\n --focus-border-style: solid;\r\n --button-ghost: tarnsparent;\r\n --text-disabled-opacity: 0.25;\r\n --button-border-radius: 3px;\r\n --button-border-width: 1px;\r\n --button-border-style: solid;\r\n --button-border-color-accent: #97BF0D;\r\n --button-border-color-primary: #273435;\r\n --button-border-color-secondary: #D1D1D1;\r\n --button-border-color-ghost: tarnsparent;\r\n --button-ghost-hover: tarnsparent;\r\n --button-ghost-active: rgba(139, 139, 139, 0.5);\r\n --button-accent-disabled: #D1D1D1;\r\n --button-primary-disabled: #D1D1D1;\r\n --button-secondary-disabled: #D1D1D1;\r\n --button-tertiary-disabled: tarnsparent;\r\n --button-ghost-disabled: tarnsparent;\r\n\r\n button {\r\n font-family: inherit;\r\n font-size: 16px;\r\n font-weight: 700;\r\n padding: 0 20px;\r\n min-height: 40px;\r\n line-height: 40px;\r\n cursor: pointer;\r\n box-sizing: border-box;\r\n transition:\r\n background-color 0.2s ease-in-out,\r\n filter 0.2s ease-in-out,\r\n transform 0.1s ease-in-out,\r\n border-color 0.2s ease-in-out,\r\n border-width 0.2s ease-in-out,\r\n box-shadow 0.2s ease-in-out;\r\n\r\n &.xv-button-block {\r\n width: 100%;\r\n }\r\n }\r\n}\r\n\r\n.xv-button {\r\n /* ✅ Accent Button */\r\n &.accent {\r\n background-color: var(--button-accent);\r\n color: var(--text-on-color);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-accent);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-accent-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-accent-active);\r\n color: var(--text-on-color);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-accent-disabled);\r\n color: var(--text-on-color-disabled);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-accent-disabled);\r\n }\r\n\r\n }\r\n\r\n /* ✅ Primary Button */\r\n &.primary {\r\n background-color: var(--button-primary);\r\n color: var(--text-on-color);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-primary);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-primary-hover)\r\n }\r\n &:active {\r\n background-color: var(--button-primary-active)\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-primary-disabled);\r\n color: var(--text-on-color-disabled);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-primary-disabled);\r\n }\r\n }\r\n\r\n /* ✅ Secondary Button */\r\n &.secondary {\r\n background-color: var(--button-secondary);\r\n color: var(--text-primary);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-secondary);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-secondary-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-secondary-active);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-secondary-disabled);\r\n color: var(--text-on-color-disabled);\r\n }\r\n }\r\n\r\n /* ✅ Tertiary Button */\r\n &.tertiary {\r\n background-color: var(--button-ghost);\r\n color: var(--text-primary);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-tertiary);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-tertiary-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-tertiary-active);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-tertiary-disabled);\r\n color: var(--text-disabled);\r\n opacity: var(--text-disabled-opacity);\r\n }\r\n }\r\n\r\n /* ✅ Ghost Button */\r\n &.ghost {\r\n background-color: var(--button-ghost);\r\n color: var(--text-primary);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-ghost);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-ghost-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-ghost-active);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-ghost-disabled);\r\n color: var(--text-disabled);\r\n opacity: var(--text-disabled-opacity);\r\n }\r\n }\r\n}\r\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\r\n\r\n\r\n@Component({\r\n tag: 'xv-button-v2',\r\n styleUrl: 'xv-button-v2.scss',\r\n shadow: true,\r\n})\r\nexport class XvButton {\r\n /** Button label */\r\n @Prop() label: string = '';\r\n\r\n /** Container width Button */\r\n @Prop() block: boolean = false;\r\n\r\n /** Variant */\r\n @Prop() variant: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'ghost' = 'primary';\r\n\r\n /** Disabled state */\r\n @Prop() disabled: boolean = false;\r\n\r\n /** Emits when the button is clicked */\r\n @Event() buttonClick!: EventEmitter<void>;\r\n\r\n /** Handle click only if not disabled */\r\n private handleClick = () => {\r\n if (this.disabled) {\r\n return;\r\n }\r\n this.buttonClick.emit();\r\n };\r\n\r\n render() {\r\n return (\r\n <button\r\n class={`xv-button ${this.variant} ${this.block ? 'xv-button-block' : ''}`}\r\n disabled={this.disabled}\r\n onClick={this.handleClick}\r\n >\r\n <slot name=\"icon-left\"></slot>\r\n\r\n <slot>\r\n {this.label}\r\n </slot>\r\n\r\n <slot name=\"icon-right\"></slot>\r\n </button>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, d as Host } from './index-90b82796.js';
|
|
2
|
-
|
|
3
|
-
const xvCardCss = ":host{display:flex;flex-direction:column;border-radius:8px;border:1px solid var(--border-subtle-00);background:var(--layer-layer-02);box-shadow:0 1px 3px 1px rgba(39, 52, 53, 0.15), 0 1px 2px 0 rgba(39, 52, 53, 0.3);font-family:var(--ff-body, inherit);overflow:visible !important}:host(.xv-card_vertical){width:100% !important}:host(.xv-card_horizontal){flex-direction:row;display:flex;width:max-content}:host(.xv-card_horizontal) .xv-card_media__content,:host(.xv-card_horizontal) .xv-card_media ::slotted([slot=media]){min-height:100%;max-height:100%;max-width:160px;min-width:160px}.xv-card_content{padding:16px;display:flex;flex-direction:column;flex:1;text-align:left}.xv-card_media__content,.xv-card_media ::slotted([slot=media]){max-width:100%;min-width:100%;min-height:199px;max-height:199px;object-fit:cover;object-position:center}.xv-card_header__content,.xv-card_header ::slotted([slot=header]){margin:0 0 8px;color:var(--text-primary);font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:-0.6px}.xv-card_body{flex:1}.xv-card_body__content,.xv-card_body ::slotted([slot=body]){margin:0 0 8px;color:var(--text-secondary);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:-0.1px}";
|
|
4
|
-
|
|
5
|
-
const XvCard = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.variant = 'vertical';
|
|
9
|
-
}
|
|
10
|
-
render() {
|
|
11
|
-
return (h(Host, { key: '3fdd414c3ca982b59e824fdc5e7e7b29e64e86af', class: `xv-card xv-card_${this.variant}`, part: this.variant }, h("div", { key: 'cbcdeeb4478684a62284f1117b958419b8bf3c85', class: "xv-card_media" }, h("slot", { key: '8f1dfba6d6857a56104f025b853ab7e0eda904ac', name: "media" }, this.media && h("img", { key: 'cffec805d1be5621af7f31f0011d8bf85cbde14c', class: "xv-card_media__content", src: this.media, alt: this.header }))), h("div", { key: 'd145688646a6b28558a356223fa513bc4b647b05', class: "xv-card_content" }, h("div", { key: 'a24d5400de24e07f988a70f4c53097b8b890e4ea', class: "xv-card_header" }, h("slot", { key: '91ef62b994ea0718b1d25c92dd54890c531d12e6', name: "header" }, this.header && h("p", { key: '65dded3b31a4791c25e16d99657006d3602a5184', class: "xv-card_header__content" }, this.header))), h("div", { key: '2ec7a6d441629b1f3c168b071ac9fcda69d074ce', class: "xv-card_body" }, h("slot", { key: '8a4c90c328b3ddc5c465ef47340e8fa04081d2e9', name: "body" }, this.body && h("p", { key: '613f98fddb84e57f8f0088cda701da76d63f4946', class: "xv-card_body__content" }, this.header))), h("div", { key: '51d8b0d621f41768f2baf1adb80289efb644bf29', class: "xv-card_footer" }, h("slot", { key: 'b5df708c75f4445936230be35ce8f95566cafa2b', name: "footer" }, this.footer)))));
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
XvCard.style = xvCardCss;
|
|
15
|
-
|
|
16
|
-
export { XvCard as xv_card_v2 };
|
|
17
|
-
|
|
18
|
-
//# sourceMappingURL=xv-card-v2.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"xv-card-v2.entry.esm.js","mappings":";;AAAA,MAAM,SAAS,GAAG,iuCAAiuC;;MCOtuC,MAAM;IALnB;;QAMU,YAAO,GAA8B,UAAU,CAAC;KAgCzD;IA3BC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,IAChE,4DAAK,KAAK,EAAC,eAAe,IACxB,6DAAM,IAAI,EAAC,OAAO,IACf,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,wBAAwB,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,GAAI,CACnF,CACH,EAEN,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,4DAAK,KAAK,EAAC,gBAAgB,IACzB,6DAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,MAAM,IAAI,0DAAG,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,MAAM,CAAK,CAC/D,CACH,EACN,4DAAK,KAAK,EAAC,cAAc,IACvB,6DAAM,IAAI,EAAC,MAAM,IACd,IAAI,CAAC,IAAI,IAAI,0DAAG,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,MAAM,CAAK,CAC3D,CACH,EACN,4DAAK,KAAK,EAAC,gBAAgB,IACzB,6DAAM,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CACpC,CACF,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/xv-card/xv-card.scss?tag=xv-card-v2&encapsulation=shadow","src/components/xv-card/xv-card.tsx"],"sourcesContent":[":host {\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 8px;\r\n border: 1px solid var(--border-subtle-00);\r\n background: var(--layer-layer-02);\r\n box-shadow: 0 1px 3px 1px rgba(39, 52, 53, 0.15), 0 1px 2px 0 rgba(39, 52, 53, 0.30);\r\n font-family: var(--ff-body, inherit);\r\n overflow: visible !important;\r\n}\r\n\r\n:host(.xv-card_vertical) {\r\n //max-width: 298px;\r\n // TODO: wright down correct styling for card size\r\n width: 100%!important;\r\n}\r\n\r\n:host(.xv-card_horizontal) {\r\n flex-direction: row;\r\n display: flex;\r\n width: max-content;\r\n\r\n .xv-card_media {\r\n &__content, ::slotted([slot=\"media\"]) {\r\n min-height: 100%;\r\n max-height: 100%;\r\n max-width: 160px;\r\n min-width: 160px;\r\n }\r\n }\r\n}\r\n\r\n.xv-card {\r\n &_content {\r\n padding: 16px;\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n text-align: left;\r\n }\r\n\r\n &_media {\r\n &__content, ::slotted([slot=\"media\"]) {\r\n max-width: 100%;\r\n min-width: 100%;\r\n min-height: 199px;\r\n max-height: 199px;\r\n object-fit: cover;\r\n object-position: center;\r\n }\r\n }\r\n\r\n &_header {\r\n &__content, ::slotted([slot=\"header\"]) {\r\n margin: 0 0 8px;\r\n color: var(--text-primary);\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n line-height: 24px;\r\n letter-spacing: -0.6px;\r\n }\r\n }\r\n\r\n &_body {\r\n flex: 1;\r\n &__content, ::slotted([slot=\"body\"]) {\r\n margin: 0 0 8px;\r\n color: var(--text-secondary);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n letter-spacing: -0.1px;\r\n }\r\n }\r\n\r\n &_footer {}\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-card-v2',\r\n styleUrl: 'xv-card.scss',\r\n shadow: true,\r\n})\r\nexport class XvCard {\r\n @Prop() variant: 'horizontal' | 'vertical' = 'vertical';\r\n @Prop() media: string;\r\n @Prop() header: string;\r\n @Prop() body: string;\r\n @Prop() footer: string;\r\n render() {\r\n return (\r\n <Host class={`xv-card xv-card_${this.variant}`} part={this.variant}>\r\n <div class=\"xv-card_media\">\r\n <slot name=\"media\">\r\n {this.media && <img class=\"xv-card_media__content\" src={this.media} alt={this.header} />}\r\n </slot>\r\n </div>\r\n\r\n <div class=\"xv-card_content\">\r\n <div class=\"xv-card_header\">\r\n <slot name=\"header\">\r\n {this.header && <p class=\"xv-card_header__content\">{this.header}</p>}\r\n </slot>\r\n </div>\r\n <div class=\"xv-card_body\">\r\n <slot name=\"body\">\r\n {this.body && <p class=\"xv-card_body__content\">{this.header}</p>}\r\n </slot>\r\n </div>\r\n <div class=\"xv-card_footer\">\r\n <slot name=\"footer\">{this.footer}</slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, a as createEvent, h, d as Host, g as getElement } from './index-90b82796.js';
|
|
2
|
-
|
|
3
|
-
const xvCheckboxCss = ":host{--checkbox-size:20px;box-sizing:border-box;display:inline-flex;flex-direction:column}:host([error]) .xv-checkbox .checkmark{border-color:var(--text-error, #D62512)}.error,[name=info]{display:inline-flex;align-items:center;justify-content:flex-start;font-size:var(--fz-sm, 12px);font-family:var(--ff-body, Tahoma);line-height:133.333%;letter-spacing:0.32px}.error{margin-top:var(--gap-xs, 5px);color:var(--text-error, #D62512)}.error::before{margin-right:var(--gap-xs, 5px);content:\"!\";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:var(--fz-sm, 12px);font-weight:bold;color:white;background-color:var(--text-error, #D62512);border-radius:50%}.xv-checkbox{display:inline-flex;align-items:center;cursor:pointer;user-select:none}.xv-checkbox.disabled{cursor:not-allowed;opacity:0.6}.xv-checkbox input[type=checkbox]{position:absolute;width:var(--checkbox-size);height:var(--checkbox-size);margin:0;padding:0;opacity:0;pointer-events:none;box-sizing:border-box}.xv-checkbox .checkmark{width:var(--checkbox-size);min-width:var(--checkbox-size);height:var(--checkbox-size);min-height:var(--checkbox-size);box-sizing:border-box;margin:0;padding:0;border:2px solid var(--border-subtle-03, #D1D1D1);border-radius:4px;background-color:var(--background, #FFF);transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center}.xv-checkbox input:checked+.checkmark{background-color:var(--background-brand, #97BF0D);border-color:var(--background-brand, #97BF0D)}.xv-checkbox input:checked+.checkmark:not(.checkmark-partial)::after{content:\"\";width:calc(var(--checkbox-size) / 4);height:calc(var(--checkbox-size) / 2.5);border:solid var(--background, #FFF);margin-bottom:calc(var(--checkbox-size) / 10);border-width:0 2px 2px 0;transform:rotate(45deg);display:block}.xv-checkbox input:checked+.checkmark.checkmark-partial::after{content:\"\";width:calc(var(--checkbox-size) / 3);height:calc(var(--checkbox-size) / 10);background-color:var(--background, #FFF)}.xv-checkbox input:focus+.checkmark{outline:1px solid var(--border-strong-01, #8B8B8B)}.xv-checkbox .label{margin-left:8px;color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:128.571%;letter-spacing:0.16px}";
|
|
4
|
-
|
|
5
|
-
const XvCheckbox = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.changeEvent = createEvent(this, "eventChange", 7);
|
|
9
|
-
this.inputEvent = createEvent(this, "eventInput", 7);
|
|
10
|
-
this.focusEvent = createEvent(this, "eventFocus", 7);
|
|
11
|
-
this.blurEvent = createEvent(this, "eventBlur", 7);
|
|
12
|
-
var _a, _b;
|
|
13
|
-
/**
|
|
14
|
-
* Default checked status
|
|
15
|
-
*/
|
|
16
|
-
this.checked = false;
|
|
17
|
-
/**
|
|
18
|
-
* Using for forms
|
|
19
|
-
*/
|
|
20
|
-
this.indeterminate = false;
|
|
21
|
-
/**
|
|
22
|
-
* Disabled status
|
|
23
|
-
*/
|
|
24
|
-
this.disabled = false;
|
|
25
|
-
/**
|
|
26
|
-
* Input value
|
|
27
|
-
*/
|
|
28
|
-
this.value = 'on';
|
|
29
|
-
/**
|
|
30
|
-
* The same like default checkbox prop
|
|
31
|
-
*/
|
|
32
|
-
this.required = false;
|
|
33
|
-
/**
|
|
34
|
-
* Change checkmark icon to minus
|
|
35
|
-
*/
|
|
36
|
-
this.partial = false;
|
|
37
|
-
this.hasFocus = false;
|
|
38
|
-
this.onInput = (e) => {
|
|
39
|
-
const target = e.target;
|
|
40
|
-
this.checked = target.checked;
|
|
41
|
-
this.inputEvent.emit(this.checked);
|
|
42
|
-
};
|
|
43
|
-
this.onChange = (e) => {
|
|
44
|
-
const target = e.target;
|
|
45
|
-
this.checked = target.checked;
|
|
46
|
-
this.changeEvent.emit(this.checked);
|
|
47
|
-
};
|
|
48
|
-
this.onFocus = () => {
|
|
49
|
-
this.hasFocus = true;
|
|
50
|
-
this.focusEvent.emit();
|
|
51
|
-
};
|
|
52
|
-
this.onBlur = () => {
|
|
53
|
-
this.hasFocus = false;
|
|
54
|
-
this.blurEvent.emit();
|
|
55
|
-
};
|
|
56
|
-
this.internals = ((_b = (_a = this.el).attachInternals) === null || _b === void 0 ? void 0 : _b.call(_a)) || {};
|
|
57
|
-
}
|
|
58
|
-
connectedCallback() {
|
|
59
|
-
var _a;
|
|
60
|
-
if ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) {
|
|
61
|
-
this.internals.setFormValue(this.checked ? this.value : null);
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
onCheckedChange(newValue) {
|
|
65
|
-
var _a;
|
|
66
|
-
if ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) {
|
|
67
|
-
this.internals.setFormValue(newValue ? this.value : null);
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
render() {
|
|
71
|
-
return (h(Host, { key: 'ac276d5c3fd650eb0253986d49114005853dd6e3' }, h("label", { key: '42b697e56e09077521dd240cda3634e64ad32c4c', class: { 'xv-checkbox': true, disabled: this.disabled } }, h("input", { key: 'ca3cda2a03db5e4f5e92bba03c9aa52349b6aa74', ref: el => (this.inputEl = el), type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, indeterminate: this.indeterminate, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }), h("span", { key: '40f9add2230681ad01b3eaf95d18965aac0be936', class: `checkmark ${this.partial ? 'checkmark-partial' : ''}` }), h("div", { key: '0dc9d9dad7e4f86931ab0b367c1fd621004a867e', class: "label" }, h("slot", { key: 'd7cf291cc49e3613a6b1631d758e9faa69e32621' }, this.label))), h("slot", { key: '9a173a733b1fcfd23cdd39c2cf38a9cbe1df995b', name: "info" }), !!this.error && h("span", { key: 'ca9bfcfa30ceb9073ac98d6032af002a8c3e6049', class: "error" }, this.error)));
|
|
72
|
-
}
|
|
73
|
-
componentDidLoad() {
|
|
74
|
-
if (this.indeterminate) {
|
|
75
|
-
this.inputEl.indeterminate = true;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
componentDidUpdate() {
|
|
79
|
-
if (this.inputEl) {
|
|
80
|
-
this.inputEl.indeterminate = this.indeterminate;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
formResetCallback() {
|
|
84
|
-
this.checked = false;
|
|
85
|
-
}
|
|
86
|
-
formStateRestoreCallback(state) {
|
|
87
|
-
this.checked = state === this.value;
|
|
88
|
-
}
|
|
89
|
-
static get formAssociated() { return true; }
|
|
90
|
-
get el() { return getElement(this); }
|
|
91
|
-
static get watchers() { return {
|
|
92
|
-
"checked": ["onCheckedChange"]
|
|
93
|
-
}; }
|
|
94
|
-
};
|
|
95
|
-
XvCheckbox.style = xvCheckboxCss;
|
|
96
|
-
|
|
97
|
-
export { XvCheckbox as xv_checkbox_v2 };
|
|
98
|
-
|
|
99
|
-
//# sourceMappingURL=xv-checkbox-v2.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"xv-checkbox-v2.entry.esm.js","mappings":";;AAAA,MAAM,aAAa,GAAG,gvEAAgvE;;MCSzvE,UAAU;IA4DrB;;;;;;;;;;QAnDwC,YAAO,GAAY,KAAK,CAAC;;;;QAIxC,kBAAa,GAAY,KAAK,CAAC;;;;QAI/B,aAAQ,GAAY,KAAK,CAAC;;;;QAQ1B,UAAK,GAAW,IAAI,CAAC;;;;QAIrB,aAAQ,GAAY,KAAK,CAAC;;;;QAI1B,YAAO,GAAY,KAAK,CAAC;QASzC,aAAQ,GAAY,KAAK,CAAC;QAmC3B,YAAO,GAAG,CAAC,CAAQ;YACzB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;YAC9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SACpC,CAAC;QAEM,aAAQ,GAAG,CAAC,CAAQ;YAC1B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;YAC9B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SACrC,CAAC;QAEM,YAAO,GAAG;YAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;SACxB,CAAC;QAEM,WAAM,GAAG;YACf,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;SACvB,CAAC;QApCA,IAAI,CAAC,SAAS,GAAG,CAAA,MAAA,MAAC,IAAI,CAAC,EAAU,EAAC,eAAe,kDAAI,KAAI,EAAE,CAAC;KAC7D;IAED,iBAAiB;;QACf,IAAI,MAAA,IAAI,CAAC,SAAS,0CAAE,YAAY,EAAE;YAChC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;SAC/D;KACF;IAGD,eAAe,CAAC,QAAiB;;QAC/B,IAAI,MAAA,IAAI,CAAC,SAAS,0CAAE,YAAY,EAAE;YAChC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;SAC3D;KACF;IAwBD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAO,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC5D,8DACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAC9B,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACnB,EACF,6DAAM,KAAK,EAAE,aAAa,IAAI,CAAC,OAAO,GAAG,mBAAmB,GAAG,EAAE,EAAE,GAAI,EACvE,4DAAK,KAAK,EAAC,OAAO,IAChB,+DAAO,IAAI,CAAC,KAAK,CAAQ,CACrB,CACA,EACR,6DAAM,IAAI,EAAC,MAAM,GAAG,EACnB,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CACnD,EACP;KACH;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC;SACnC;KACF;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;SACjD;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;IAED,wBAAwB,CAAC,KAAa;QACpC,IAAI,CAAC,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;KACrC;;;;;;;;;;;","names":[],"sources":["src/components/xv-checkbox/xv-checkbox.scss?tag=xv-checkbox-v2&encapsulation=shadow","src/components/xv-checkbox/xv-checkbox.tsx"],"sourcesContent":["\r\n:host {\r\n --checkbox-size: 20px;\r\n box-sizing: border-box;\r\n display: inline-flex;\r\n flex-direction: column;\r\n}\r\n\r\n:host([error]) {\r\n .xv-checkbox {\r\n .checkmark {\r\n border-color: var(--text-error, #D62512);\r\n }\r\n }\r\n}\r\n\r\n.error,\r\n[name=\"info\"] {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n font-size: var(--fz-sm, 12px);\r\n font-family: var(--ff-body, Tahoma);\r\n line-height: 133.333%;\r\n letter-spacing: 0.32px;\r\n}\r\n\r\n.error {\r\n margin-top: var(--gap-xs, 5px);\r\n color: var(--text-error, #D62512);\r\n &::before {\r\n margin-right: var(--gap-xs, 5px);\r\n content: \"!\";\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 20px;\r\n height: 20px;\r\n font-size: var(--fz-sm, 12px);\r\n font-weight: bold;\r\n color: white;\r\n background-color: var(--text-error, #D62512);\r\n border-radius: 50%;\r\n }\r\n}\r\n\r\n.xv-checkbox {\r\n display: inline-flex;\r\n align-items: center;\r\n cursor: pointer;\r\n user-select: none;\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n }\r\n\r\n input[type='checkbox'] {\r\n position: absolute;\r\n width: var(--checkbox-size);\r\n height: var(--checkbox-size);\r\n margin: 0;\r\n padding: 0;\r\n opacity: 0;\r\n pointer-events: none;\r\n box-sizing: border-box;\r\n }\r\n\r\n .checkmark {\r\n width: var(--checkbox-size);\r\n min-width: var(--checkbox-size);\r\n height: var(--checkbox-size);\r\n min-height: var(--checkbox-size);\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n border: 2px solid var(--border-subtle-03, #D1D1D1);\r\n border-radius: 4px;\r\n background-color: var(--background, #FFF);\r\n transition: all 0.2s ease;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n input:checked + .checkmark {\r\n background-color: var(--background-brand, #97BF0D);\r\n border-color: var(--background-brand, #97BF0D);\r\n &:not(.checkmark-partial)::after {\r\n content: '';\r\n width: calc(var(--checkbox-size) / 4);\r\n height: calc(var(--checkbox-size) / 2.5);\r\n border: solid var(--background, #FFF);\r\n margin-bottom: calc(var(--checkbox-size) / 10);\r\n border-width: 0 2px 2px 0;\r\n transform: rotate(45deg);\r\n display: block;\r\n }\r\n &.checkmark-partial::after {\r\n content: '';\r\n width: calc(var(--checkbox-size) / 3);\r\n height: calc(var(--checkbox-size) / 10);\r\n background-color: var(--background, #FFF);\r\n }\r\n }\r\n\r\n input:focus + .checkmark {\r\n outline: 1px solid var(--border-strong-01, #8B8B8B);\r\n }\r\n\r\n .label {\r\n margin-left: 8px;\r\n color: var(--text-primary, #333);\r\n font-family: var(--ff-body, Tahoma);\r\n font-size: var(--fz-md, 14px);\r\n line-height: 128.571%;\r\n letter-spacing: 0.16px;\r\n }\r\n}\r\n","import { Component, h, Element, Prop, State, Event, EventEmitter, Watch, Host } from '@stencil/core';\r\nimport { SIZE_VAR } from '../../types/enum';\r\n\r\n@Component({\r\n tag: 'xv-checkbox-v2',\r\n styleUrl: 'xv-checkbox.scss',\r\n shadow: true,\r\n formAssociated: true,\r\n})\r\nexport class XvCheckbox {\r\n private inputEl: HTMLInputElement;\r\n private internals: ElementInternals;\r\n\r\n @Element() el!: HTMLElement;\r\n\r\n /**\r\n * Default checked status\r\n */\r\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\r\n /**\r\n * Using for forms\r\n */\r\n @Prop({ reflect: true }) indeterminate: boolean = false;\r\n /**\r\n * Disabled status\r\n */\r\n @Prop({ reflect: true }) disabled: boolean = false;\r\n /**\r\n * Input name\r\n */\r\n @Prop({ reflect: true }) name: string;\r\n /**\r\n * Input value\r\n */\r\n @Prop({ reflect: true }) value: string = 'on';\r\n /**\r\n * The same like default checkbox prop\r\n */\r\n @Prop({ reflect: true }) required: boolean = false;\r\n /**\r\n * Change checkmark icon to minus\r\n */\r\n @Prop({ reflect: true }) partial: boolean = false;\r\n /**\r\n * Can be used like property or like slot\r\n */\r\n @Prop() label: string;\r\n\r\n @Prop({ reflect: true }) size?: SIZE_VAR;\r\n @Prop({ reflect: true }) error?: string | boolean;\r\n\r\n @State() hasFocus: boolean = false;\r\n /**\r\n * event 'onEventChange'\r\n */\r\n @Event({ eventName: 'eventChange' }) changeEvent: EventEmitter<boolean>;\r\n /**\r\n * event 'onEventInput'\r\n */\r\n @Event({ eventName: 'eventInput' }) inputEvent: EventEmitter<boolean>;\r\n /**\r\n * event 'onEventFocus'\r\n */\r\n @Event({ eventName: 'eventFocus' }) focusEvent: EventEmitter<void>;\r\n /**\r\n * event 'onEventBlur'\r\n */\r\n @Event({ eventName: 'eventBlur' }) blurEvent: EventEmitter<void>;\r\n\r\n constructor() {\r\n this.internals = (this.el as any).attachInternals?.() || {};\r\n }\r\n\r\n connectedCallback() {\r\n if (this.internals?.setFormValue) {\r\n this.internals.setFormValue(this.checked ? this.value : null);\r\n }\r\n }\r\n\r\n @Watch('checked')\r\n onCheckedChange(newValue: boolean) {\r\n if (this.internals?.setFormValue) {\r\n this.internals.setFormValue(newValue ? this.value : null);\r\n }\r\n }\r\n\r\n private onInput = (e: Event) => {\r\n const target = e.target as HTMLInputElement;\r\n this.checked = target.checked;\r\n this.inputEvent.emit(this.checked);\r\n };\r\n\r\n private onChange = (e: Event) => {\r\n const target = e.target as HTMLInputElement;\r\n this.checked = target.checked;\r\n this.changeEvent.emit(this.checked);\r\n };\r\n\r\n private onFocus = () => {\r\n this.hasFocus = true;\r\n this.focusEvent.emit();\r\n };\r\n\r\n private onBlur = () => {\r\n this.hasFocus = false;\r\n this.blurEvent.emit();\r\n };\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <label class={{ 'xv-checkbox': true, disabled: this.disabled }}>\r\n <input\r\n ref={el => (this.inputEl = el)}\r\n type=\"checkbox\"\r\n name={this.name}\r\n value={this.value}\r\n checked={this.checked}\r\n disabled={this.disabled}\r\n required={this.required}\r\n indeterminate={this.indeterminate}\r\n onInput={this.onInput}\r\n onChange={this.onChange}\r\n onFocus={this.onFocus}\r\n onBlur={this.onBlur}\r\n />\r\n <span class={`checkmark ${this.partial ? 'checkmark-partial' : ''}`} />\r\n <div class=\"label\">\r\n <slot>{this.label}</slot>\r\n </div>\r\n </label>\r\n <slot name=\"info\" />\r\n {!!this.error && <span class=\"error\">{this.error}</span>}\r\n </Host>\r\n );\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.indeterminate) {\r\n this.inputEl.indeterminate = true;\r\n }\r\n }\r\n\r\n componentDidUpdate() {\r\n if (this.inputEl) {\r\n this.inputEl.indeterminate = this.indeterminate;\r\n }\r\n }\r\n\r\n formResetCallback() {\r\n this.checked = false;\r\n }\r\n\r\n formStateRestoreCallback(state: string) {\r\n this.checked = state === this.value;\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, d as Host } from './index-90b82796.js';
|
|
2
|
-
|
|
3
|
-
const xvLinkCss = ":host{font-family:var(--ff-body, inherit)}:host(.xv-link_inline){display:inline-block}:host(.xv-link_inline) .xv-link{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}:host(.xv-link_standalone){display:block}:host(.xv-link_standalone) .xv-link{text-decoration-line:none}.xv-link{display:inline-flex;gap:8px;align-items:center;color:var(--link-primary);font-family:var(--ff-body);font-style:normal;font-weight:400;transition:color 200ms ease-in-out}.xv-link:active{color:var(--text-primary)}.xv-link:visited{color:var(--link-visted)}.xv-link:hover{color:var(--link-primary-hover);cursor:pointer}.xv-link:disabled,.xv-link_disabled,.xv-link::part(disabled){color:var(--text-disabled);pointer-events:none;cursor:initial}.xv-link.sm{font-size:var(--fz-sm);line-height:137.5%}.xv-link.md{font-size:var(--fz-md);line-height:128.571%}.xv-link.lg{font-size:var(--fz-lg);line-height:133.333%}";
|
|
4
|
-
|
|
5
|
-
const XvLink = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.disabled = false;
|
|
9
|
-
this.size = 'md';
|
|
10
|
-
this.variant = 'inline';
|
|
11
|
-
}
|
|
12
|
-
preventLinkHandler(e) {
|
|
13
|
-
if (!this.disabled)
|
|
14
|
-
return;
|
|
15
|
-
e.preventDefault();
|
|
16
|
-
e.stopPropagation();
|
|
17
|
-
}
|
|
18
|
-
render() {
|
|
19
|
-
return (h(Host, { key: '7d9d3712613743e2ba28f3eabe258d60b4bdb3f9', class: `xv-link_${this.variant}` }, h("a", { key: 'ace5c19f02a7e0219661e035cb1b9f85ad2ac1bb', href: this.href, onClick: this.preventLinkHandler.bind(this), class: `xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`, target: this.target }, h("slot", { key: 'f6ee71ccddfdf9d1a77f70882e7b17203624a06f', name: "icon-left" }), h("slot", { key: '959444cbc1431e39ac6366ee7efe017dd77e822e' }), h("slot", { key: '0795b9dec91600fb52412284a492035cee3712f8', name: "icon-right" }))));
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
|
-
XvLink.style = xvLinkCss;
|
|
23
|
-
|
|
24
|
-
export { XvLink as xv_link_v2 };
|
|
25
|
-
|
|
26
|
-
//# sourceMappingURL=xv-link-v2.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"xv-link-v2.entry.esm.js","mappings":";;AAAA,MAAM,SAAS,GAAG,y/BAAy/B;;MCO9/B,MAAM;IALnB;;QAQU,aAAQ,GAAY,KAAK,CAAC;QAC1B,SAAI,GAAuB,IAAI,CAAC;QAChC,YAAO,GAA4B,QAAQ,CAAC;KA2BrD;IAzBC,kBAAkB,CAAC,CAAe;QAChC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE3B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;KACrB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,WAAW,IAAI,CAAC,OAAO,EAAE,IACpC,0DACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC3C,KAAK,EAAE,WAAW,IAAI,CAAC,QAAQ,GAAG,kBAAkB,GAAG,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,EACxE,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,6DAAM,IAAI,EAAC,WAAW,GAAQ,EAE9B,8DAAa,EAEb,6DAAM,IAAI,EAAC,YAAY,GAAQ,CAC7B,CACC,EACP;KACH;;;;;;","names":[],"sources":["src/components/xv-link/xv-link.scss?tag=xv-link-v2&encapsulation=shadow","src/components/xv-link/xv-link.tsx"],"sourcesContent":[":host {\r\n font-family: var(--ff-body, inherit);\r\n}\r\n\r\n:host(.xv-link_inline) {\r\n display: inline-block;\r\n .xv-link {\r\n text-decoration-line: underline;\r\n text-decoration-style: solid;\r\n text-decoration-skip-ink: none;\r\n text-decoration-thickness: auto;\r\n text-underline-offset: auto;\r\n text-underline-position: from-font;\r\n }\r\n}\r\n\r\n:host(.xv-link_standalone) {\r\n display: block;\r\n .xv-link {\r\n text-decoration-line: none;\r\n }\r\n}\r\n\r\n.xv-link {\r\n display: inline-flex;\r\n gap: 8px;\r\n align-items: center;\r\n color: var(--link-primary);\r\n font-family: var(--ff-body);\r\n font-style: normal;\r\n font-weight: 400;\r\n transition: color 200ms ease-in-out;\r\n\r\n &:active {\r\n color: var(--text-primary);\r\n }\r\n\r\n &:visited {\r\n color: var(--link-visted);\r\n }\r\n\r\n &:hover {\r\n color: var(--link-primary-hover);\r\n cursor: pointer;\r\n }\r\n\r\n &:disabled, &_disabled, &::part(disabled) {\r\n color: var(--text-disabled);\r\n pointer-events: none;\r\n cursor: initial;\r\n }\r\n\r\n &.sm {\r\n font-size: var(--fz-sm);\r\n line-height: 137.5%;\r\n }\r\n\r\n &.md {\r\n font-size: var(--fz-md);\r\n line-height: 128.571%;\r\n }\r\n\r\n &.lg {\r\n font-size: var(--fz-lg);\r\n line-height: 133.333%;\r\n }\r\n}\r\n","import { Component, h, Host, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-link-v2',\r\n styleUrl: 'xv-link.scss',\r\n shadow: true,\r\n})\r\nexport class XvLink {\r\n @Prop() href: string;\r\n @Prop() target: '_self' | '_blank' | '_parent' | '_top';\r\n @Prop() disabled: boolean = false;\r\n @Prop() size: 'sm' | 'md' | 'lg' = 'md';\r\n @Prop() variant: 'standalone' | 'inline' = 'inline';\r\n\r\n preventLinkHandler(e: PointerEvent) {\r\n if (!this.disabled) return;\r\n\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class={`xv-link_${this.variant}`}>\r\n <a\r\n href={this.href}\r\n onClick={this.preventLinkHandler.bind(this)}\r\n class={`xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`}\r\n target={this.target}\r\n >\r\n <slot name=\"icon-left\"></slot>\r\n\r\n <slot></slot>\r\n\r\n <slot name=\"icon-right\"></slot>\r\n </a>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, d as Host, g as getElement } from './index-90b82796.js';
|
|
2
|
-
|
|
3
|
-
const xvProgressIndicatorItemCss = ":host(.xv-progress-indicator-item){display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:10px 16px}:host(.xv-progress-indicator-item):before{width:100%}:host(.xv-progress-indicator-item):before,:host(.xv-progress-indicator-item) .line{content:\"\";z-index:1;display:inline-block;position:absolute;top:0;left:0;right:0;height:2px;color:inherit;background-color:var(--border-subtle-01, grey)}:host(.xv-progress-indicator-item) .line{width:0;color:inherit;transition:width 250ms ease;background-color:var(--background-brand, currentColor)}:host(.xv-progress-indicator-item) .icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;max-width:22px;max-height:22px;border:2px dashed var(--icon-primary, currentColor);border-radius:50%}:host(.xv-progress-indicator-item) .icon svg{opacity:0;transition:opacity 500ms ease-in-out}:host(.xv-progress-indicator-item) .label{color:var(--text-primary);font-size:14px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:0.16px}:host(.done) .icon{border-color:var(--background-brand, currentColor);color:var(--background-brand, inherit);border-style:solid}:host(.done) .icon svg{opacity:1}:host(.done) .line{width:100% !important;background-color:var(--background-brand, currentColor)}";
|
|
4
|
-
|
|
5
|
-
const XvProgressIndicatorItem = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.done = false;
|
|
9
|
-
}
|
|
10
|
-
render() {
|
|
11
|
-
return (h(Host, { key: '4c220b139a67248550a218ed23037fdd6996d21b', class: `xv-progress-indicator-item ${this.done ? 'done' : ''}` }, h("span", { key: 'ebd866d31241a068c9d0d16a02bee9bbac86336b', class: "line" }), h("span", { key: '3e3149b483bb881df3daac244c6ae9589a86a852', class: "icon" }, h("svg", { key: '7eb1fa65e05bd27ef5747ccdb8d2b7081030a6c3', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", width: 14, height: 14 }, h("path", { key: '3bd956a1758290669848edd0ae8f7067579cf3bd', fill: "currentColor", d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }))), h("p", { key: '1cfb30cb3a8709f2568a08d79e705d48d048f8d5', class: "label" }, h("slot", { key: 'd509b9f71274bc2d69cef5df467bc48610f19651' }))));
|
|
12
|
-
}
|
|
13
|
-
get el() { return getElement(this); }
|
|
14
|
-
};
|
|
15
|
-
XvProgressIndicatorItem.style = xvProgressIndicatorItemCss;
|
|
16
|
-
|
|
17
|
-
export { XvProgressIndicatorItem as xv_progress_indicator_v2_item };
|
|
18
|
-
|
|
19
|
-
//# sourceMappingURL=xv-progress-indicator-v2-item.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"xv-progress-indicator-v2-item.entry.esm.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,uyCAAuyC;;MCO7zC,uBAAuB;IALpC;;QAO4B,SAAI,GAAY,KAAK,CAAC;KAuBjD;IArBC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,8BAA8B,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,EAAE,EAAE,IAClE,6DAAM,KAAK,EAAC,MAAM,GAAE,EACpB,6DAAM,KAAK,EAAC,MAAM,IAChB,4DACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,IAEN,6DACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,sLAAsL,GACxL,CACF,CACD,EACP,0DAAG,KAAK,EAAC,OAAO,IAAC,8DAAO,CAAI,CACvB,EACP;KACH;;;;;;;","names":[],"sources":["src/components/xv-progress-indicator-item/xv-progress-indicator-item.scss?tag=xv-progress-indicator-v2-item&encapsulation=shadow","src/components/xv-progress-indicator-item/xv-progress-indicator-item.tsx"],"sourcesContent":[":host(.xv-progress-indicator-item) {\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n padding: 10px 16px;\r\n &:before {\r\n width: 100%;\r\n }\r\n\r\n &:before, .line {\r\n content: '';\r\n z-index: 1;\r\n display: inline-block;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n color: inherit;\r\n background-color: var(--border-subtle-01, grey);\r\n }\r\n\r\n .line {\r\n width: 0;\r\n color: inherit;\r\n transition: width 250ms ease;\r\n background-color: var(--background-brand, currentColor);\r\n }\r\n\r\n .icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 22px;\r\n height: 22px;\r\n max-width: 22px;\r\n max-height: 22px;\r\n border: 2px dashed var(--icon-primary, currentColor);\r\n border-radius: 50%;\r\n svg {\r\n opacity: 0;\r\n transition: opacity 500ms ease-in-out;\r\n }\r\n }\r\n\r\n .label {\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 18px;\r\n letter-spacing: 0.16px;\r\n }\r\n}\r\n\r\n:host(.done) {\r\n .icon {\r\n border-color: var(--background-brand, currentColor);\r\n color: var(--background-brand, inherit);\r\n border-style: solid;\r\n svg {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .line {\r\n width: 100% !important;\r\n background-color: var(--background-brand, currentColor);\r\n }\r\n}\r\n","import { Component, Host, h, Element, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-progress-indicator-v2-item',\r\n styleUrl: 'xv-progress-indicator-item.scss',\r\n shadow: true,\r\n})\r\nexport class XvProgressIndicatorItem {\r\n @Element() el: HTMLElement;\r\n @Prop({ reflect: false }) done: boolean = false;\r\n\r\n render() {\r\n return (\r\n <Host class={`xv-progress-indicator-item ${this.done ? 'done' : ''}`}>\r\n <span class=\"line\"/>\r\n <span class=\"icon\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 448 512\"\r\n width={14}\r\n height={14}\r\n >\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"\r\n />\r\n </svg>\r\n </span>\r\n <p class=\"label\"><slot/></p>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, d as Host, g as getElement } from './index-90b82796.js';
|
|
2
|
-
|
|
3
|
-
const xvProgressIndicatorCss = ":host{display:flex;align-items:flex-start;justify-content:space-between;font-family:var(--ff-body, inherit);overflow-x:auto}";
|
|
4
|
-
|
|
5
|
-
const XvProgressIndicator = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.progress = 0;
|
|
9
|
-
}
|
|
10
|
-
// Update 'xv-progress-indicator-item' done status
|
|
11
|
-
updateChildItems() {
|
|
12
|
-
const items = this.el.children;
|
|
13
|
-
const itemsCount = this.el.childElementCount;
|
|
14
|
-
const progressPerItem = 100 / itemsCount;
|
|
15
|
-
if (!items.length || !itemsCount)
|
|
16
|
-
return;
|
|
17
|
-
Array.from(items).forEach((item, index) => {
|
|
18
|
-
const itemProgress = (index + 1) * progressPerItem;
|
|
19
|
-
const done = this.progress >= itemProgress;
|
|
20
|
-
item.setAttribute('done', done ? 'true' : 'false');
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
// Load initial done status
|
|
24
|
-
componentDidLoad() {
|
|
25
|
-
this.updateChildItems();
|
|
26
|
-
}
|
|
27
|
-
render() {
|
|
28
|
-
return (h(Host, { key: '999d9a8b290d17ad1cb0003e712f01199800ecf7', class: "xv-progress-indicator" }, h("slot", { key: '587403366e0546de55e0227538f1158c8fd5e6ae' })));
|
|
29
|
-
}
|
|
30
|
-
get el() { return getElement(this); }
|
|
31
|
-
static get watchers() { return {
|
|
32
|
-
"progress": ["updateChildItems"]
|
|
33
|
-
}; }
|
|
34
|
-
};
|
|
35
|
-
XvProgressIndicator.style = xvProgressIndicatorCss;
|
|
36
|
-
|
|
37
|
-
export { XvProgressIndicator as xv_progress_indicator_v2 };
|
|
38
|
-
|
|
39
|
-
//# sourceMappingURL=xv-progress-indicator-v2.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"xv-progress-indicator-v2.entry.esm.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,8HAA8H;;MCOhJ,mBAAmB;IALhC;;QAOU,aAAQ,GAAW,CAAC,CAAC;KA8B9B;;IA1BC,gBAAgB;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;QAC/B,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,iBAAiB,CAAC;QAC7C,MAAM,eAAe,GAAG,GAAG,GAAG,UAAU,CAAC;QAEzC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,UAAU;YAAE,OAAO;QAEzC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK;YACpC,MAAM,YAAY,GAAG,CAAC,KAAK,GAAG,CAAC,IAAI,eAAe,CAAC;YACnD,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,IAAI,YAAY,CAAC;YAC1C,IAAoB,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;SACrE,CAAC,CAAC;KACJ;;IAGD,gBAAgB;QACd,IAAI,CAAC,gBAAgB,EAAE,CAAA;KACxB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,uBAAuB,IACjC,8DAAa,CACR,EACP;KACH;;;;;;;;;;","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":[":host {\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","import { Component, Host, h, Prop, Watch, Element } from '@stencil/core';\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 @Prop() progress: number = 0;\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 Array.from(items).forEach((item, index) => {\r\n const itemProgress = (index + 1) * progressPerItem;\r\n const done = this.progress >= itemProgress;\r\n (item as HTMLElement).setAttribute('done', done ? 'true' : 'false');\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 class=\"xv-progress-indicator\">\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, d as Host } from './index-90b82796.js';
|
|
2
|
-
|
|
3
|
-
const xvTableColCss = ":host{display:block;color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:14px;line-height:128.571%;letter-spacing:0.16px}";
|
|
4
|
-
|
|
5
|
-
const XvTableCol = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
}
|
|
9
|
-
render() {
|
|
10
|
-
return (h(Host, { key: 'e3cdb11672f3a49a70667a1e3a99e4ee8d4f128e' }, h("slot", { key: '3170422ec4cfd62056a51f324f38892629640a1d' })));
|
|
11
|
-
}
|
|
12
|
-
};
|
|
13
|
-
XvTableCol.style = xvTableColCss;
|
|
14
|
-
|
|
15
|
-
export { XvTableCol as xv_table_v2_col };
|
|
16
|
-
|
|
17
|
-
//# sourceMappingURL=xv-table-v2-col.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"xv-table-v2-col.entry.esm.js","mappings":";;AAAA,MAAM,aAAa,GAAG,mJAAmJ;;MCO5J,UAAU;;;;IACrB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/xv-table/xv-table-col/xv-table-col.scss?tag=xv-table-v2-col&encapsulation=shadow","src/components/xv-table/xv-table-col/xv-table-col.tsx"],"sourcesContent":["@import \"../vars\";\r\n\r\n:host {\r\n display: block;\r\n color: $color;\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","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-table-v2-col',\r\n styleUrl: 'xv-table-col.scss',\r\n shadow: true,\r\n})\r\nexport class XvTableCol {\r\n render() {\r\n return (\r\n <Host>\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, a as createEvent, h, d as Host, g as getElement } from './index-90b82796.js';
|
|
2
|
-
|
|
3
|
-
const xvTableHeaderRowCss = ":host{display:grid;padding:16px 16px 32px;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-accent-01, #F7F7F7);color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:14px;font-weight:700;line-height:128.571%;letter-spacing:0.16px}:host .left-container{height:100%;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 16px}";
|
|
4
|
-
|
|
5
|
-
const XvTableHeaderRow = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.checkedChange = createEvent(this, "checkedChange", 7);
|
|
9
|
-
/**
|
|
10
|
-
* Checkbox row checked
|
|
11
|
-
*/
|
|
12
|
-
this.checked = false;
|
|
13
|
-
this.cols = 1;
|
|
14
|
-
this.slotChangeHandle = () => {
|
|
15
|
-
this.cols = this.el.childElementCount;
|
|
16
|
-
};
|
|
17
|
-
this.checkboxChange = (e) => {
|
|
18
|
-
this.checked = e.detail;
|
|
19
|
-
this.checkedChange.emit({
|
|
20
|
-
name: this.selectionName,
|
|
21
|
-
checked: e.detail
|
|
22
|
-
});
|
|
23
|
-
};
|
|
24
|
-
}
|
|
25
|
-
render() {
|
|
26
|
-
return (h(Host, { key: '1ee1243753a2aa19d61f18774b1b24868364957f', cols: this.cols }, h("div", { key: '6762b8044395ea2be90446aef2ab980f47d3b135', class: "left-container" }, this.selectionName !== undefined && (h("xv-checkbox-v2", { key: 'c48e1abb9c012123d9136b7329f3568af0fead44', partial: true, name: this.selectionName, checked: this.checked, onEventChange: this.checkboxChange }))), h("slot", { key: '01ad8c410a222c7fbd683efaf8798aff024ad452', onSlotchange: this.slotChangeHandle })));
|
|
27
|
-
}
|
|
28
|
-
get el() { return getElement(this); }
|
|
29
|
-
};
|
|
30
|
-
XvTableHeaderRow.style = xvTableHeaderRowCss;
|
|
31
|
-
|
|
32
|
-
export { XvTableHeaderRow as xv_table_v2_header_row };
|
|
33
|
-
|
|
34
|
-
//# sourceMappingURL=xv-table-v2-header-row.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"xv-table-v2-header-row.entry.esm.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,ieAAie;;MCOhf,gBAAgB;IAL7B;;;;;;QAkB0C,YAAO,GAAa,KAAK,CAAC;QAEzD,SAAI,GAAW,CAAC,CAAC;QAIlB,qBAAgB,GAAG;YACzB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,iBAAiB,CAAC;SACvC,CAAA;QAEO,mBAAc,GAAG,CAAC,CAAuB;YAC/C,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC;YACxB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;gBACtB,IAAI,EAAE,IAAI,CAAC,aAAa;gBACxB,OAAO,EAAE,CAAC,CAAC,MAAM;aAClB,CAAC,CAAC;SACJ,CAAA;KAmBF;IAjBC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACnB,4DAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,aAAa,KAAK,SAAS,KAC/B,uEACE,OAAO,EAAE,IAAI,EACb,IAAI,EAAE,IAAI,CAAC,aAAa,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,aAAa,EAAE,IAAI,CAAC,cAAc,GAClC,CACH,CACG,EACN,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC7C,EACP;KACH;;;;;;;","names":[],"sources":["src/components/xv-table/xv-table-header-row/xv-table-header-row.scss?tag=xv-table-v2-header-row&encapsulation=shadow","src/components/xv-table/xv-table-header-row/xv-table-header-row.tsx"],"sourcesContent":["@import \"../vars\";\r\n\r\n\r\n:host {\r\n display: grid;\r\n padding: $space-md $space-md $space-md * 2;\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-accent-01, #F7F7F7);\r\n color: $color;\r\n font-family: var(--ff-body, Tahoma);\r\n font-size: $font-size-header;\r\n font-weight: 700;\r\n line-height: 128.571%;\r\n letter-spacing: 0.16px;\r\n\r\n .left-container {\r\n @include left-container-styles;\r\n }\r\n}\r\n","import { Component, Host, h, Element, Prop, State, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-table-v2-header-row',\r\n styleUrl: 'xv-table-header-row.scss',\r\n shadow: true,\r\n})\r\nexport class XvTableHeaderRow {\r\n @Element() el: HTMLElement;\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 selected partially\r\n */\r\n @Prop({ reflect: true }) partial?: boolean;\r\n /**\r\n * Checkbox row checked\r\n */\r\n @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\r\n\r\n @State() cols: number = 1;\r\n\r\n @Event() checkedChange: EventEmitter<{ name: string, value?: string; checked: boolean }>;\r\n\r\n private slotChangeHandle = () => {\r\n this.cols = this.el.childElementCount;\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 checked: e.detail\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n <Host cols={this.cols}>\r\n <div class=\"left-container\">\r\n {this.selectionName !== undefined && (\r\n <xv-checkbox-v2\r\n partial={true}\r\n name={this.selectionName}\r\n checked={this.checked}\r\n onEventChange={this.checkboxChange}\r\n />\r\n )}\r\n </div>\r\n <slot onSlotchange={this.slotChangeHandle}></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|