@xplortech/apollo-core 2.7.0 → 2.7.1
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/.typings/apollo-components.html-data.json +97 -180
- package/build/style.css +220 -951
- package/dist/apollo-core/apollo-core.css +5 -35
- package/dist/apollo-core/apollo-core.esm.js +1 -1
- package/dist/apollo-core/{p-6c956d4e.entry.js → p-0bf50890.entry.js} +1 -1
- package/dist/apollo-core/p-1947e7a8.entry.js +1 -0
- package/dist/apollo-core/p-27928cb0.entry.js +1 -0
- package/dist/apollo-core/p-34438721.entry.js +1 -0
- package/dist/apollo-core/p-35c2f72d.entry.js +1 -0
- package/dist/apollo-core/p-368c81f1.entry.js +1 -0
- package/dist/apollo-core/p-36ba29da.entry.js +1 -0
- package/dist/apollo-core/p-406b27a8.entry.js +1 -0
- package/dist/apollo-core/p-5d63b4ce.entry.js +1 -0
- package/dist/apollo-core/{p-7eb86c63.entry.js → p-6a15f1e0.entry.js} +1 -1
- package/dist/apollo-core/p-8d692d05.entry.js +1 -0
- package/dist/apollo-core/{p-28d12fd3.entry.js → p-b61d7952.entry.js} +1 -1
- package/dist/apollo-core/{p-084d26ed.entry.js → p-ca127ee8.entry.js} +1 -1
- package/dist/apollo-core/p-d1c9c233.entry.js +1 -0
- package/dist/apollo-core/p-dc205893.entry.js +1 -0
- package/dist/apollo-core/p-e2a5d41c.entry.js +1 -0
- package/dist/cjs/apollo-core.cjs.js +1 -1
- package/dist/cjs/index-BQ97-AWw.js +10 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/xpl-accordion.cjs.entry.js +2 -2
- package/dist/cjs/xpl-application-shell.cjs.entry.js +1 -1
- package/dist/cjs/{xpl-avatar_61.cjs.entry.js → xpl-avatar_54.cjs.entry.js} +238 -1683
- package/dist/cjs/xpl-button-row.cjs.entry.js +1 -1
- package/dist/cjs/xpl-calendar.cjs.entry.js +1 -1
- package/dist/cjs/xpl-dynamic-table-cell.cjs.entry.js +2 -2
- package/dist/cjs/xpl-dynamic-table-row.cjs.entry.js +2 -2
- package/dist/cjs/xpl-dynamic-table.cjs.entry.js +1 -1
- package/dist/cjs/xpl-grid-item.cjs.entry.js +1 -1
- package/dist/cjs/xpl-grid.cjs.entry.js +1 -1
- package/dist/cjs/xpl-large-card.cjs.entry.js +1 -1
- package/dist/cjs/xpl-main-nav.cjs.entry.js +1 -1
- package/dist/cjs/xpl-table-header-cell.cjs.entry.js +57 -0
- package/dist/cjs/xpl-table-header.cjs.entry.js +14 -0
- package/dist/cjs/xpl-toggle.cjs.entry.js +3 -3
- package/dist/cjs/xpl-toolbar.cjs.entry.js +2 -2
- package/dist/collection/collection-manifest.json +2 -7
- package/dist/collection/components/xpl-accordion/xpl-accordion.js +2 -2
- package/dist/collection/components/xpl-application-shell/xpl-application-shell.js +1 -1
- package/dist/collection/components/xpl-backdrop/xpl-backdrop.js +1 -1
- package/dist/collection/components/xpl-badge/xpl-badge.js +1 -1
- package/dist/collection/components/xpl-banner/xpl-banner.js +2 -2
- package/dist/collection/components/xpl-breadcrumbs/xpl-breadcrumb-item/xpl-breadcrumb-item.js +1 -1
- package/dist/collection/components/xpl-breadcrumbs/xpl-breadcrumbs/xpl-breadcrumbs.js +1 -1
- package/dist/collection/components/xpl-button/xpl-button.js +1 -1
- package/dist/collection/components/xpl-button-row/xpl-button-row.js +1 -1
- package/dist/collection/components/xpl-calendar/xpl-calendar.js +1 -1
- package/dist/collection/components/xpl-checkbox/xpl-checkbox.js +25 -25
- package/dist/collection/components/xpl-choicelist/xpl-choicelist.js +1 -1
- package/dist/collection/components/xpl-content-area/xpl-content-area.js +1 -1
- package/dist/collection/components/xpl-dashboard/xpl-dashboard.js +1 -1
- package/dist/collection/components/xpl-data-card/xpl-data-card.js +2 -2
- package/dist/collection/components/xpl-divider/xpl-divider.js +1 -1
- package/dist/collection/components/xpl-dropdown/xpl-dropdown-group/xpl-dropdown-group.js +1 -1
- package/dist/collection/components/xpl-dropdown/xpl-dropdown-heading/xpl-dropdown-heading.js +1 -1
- package/dist/collection/components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option.js +2 -2
- package/dist/collection/components/xpl-dropdown/xpl-dropdown.js +77 -7
- package/dist/collection/components/xpl-dynamic-table/xpl-dynamic-table.js +1 -1
- package/dist/collection/components/xpl-dynamic-table-cell/xpl-dynamic-table-cell.js +2 -2
- package/dist/collection/components/xpl-dynamic-table-row/xpl-dynamic-table-row.js +2 -2
- package/dist/collection/components/xpl-grid/xpl-grid.js +1 -1
- package/dist/collection/components/xpl-grid-item/xpl-grid-item.js +1 -1
- package/dist/collection/components/xpl-header-accordion/xpl-header-accordion.js +53 -46
- package/dist/collection/components/xpl-icon/xpl-icon.js +2 -2
- package/dist/collection/components/xpl-input/xpl-input-color/xpl-input-color.js +8 -8
- package/dist/collection/components/xpl-input/xpl-input-date/xpl-input-date.js +3 -3
- package/dist/collection/components/xpl-input/xpl-input-file/xpl-input-file.js +4 -4
- package/dist/collection/components/xpl-input/xpl-input-phone/xpl-input-phone.js +5 -5
- package/dist/collection/components/xpl-input/xpl-input-search/xpl-input-search.js +1 -1
- package/dist/collection/components/xpl-input/xpl-input-time/xpl-input-time.js +2 -2
- package/dist/collection/components/xpl-input/xpl-input.js +2 -2
- package/dist/collection/components/xpl-large-card/xpl-large-card.js +1 -1
- package/dist/collection/components/xpl-list/xpl-list.js +2 -2
- package/dist/collection/components/xpl-main-nav/xpl-main-nav.js +1 -1
- package/dist/collection/components/xpl-modal/xpl-modal.js +1 -1
- package/dist/collection/components/xpl-nav-item/xpl-nav-item.js +2 -2
- package/dist/collection/components/xpl-pagination/pagination.stories.js +18 -0
- package/dist/collection/components/xpl-pagination/xpl-pagination.js +7 -3
- package/dist/collection/components/xpl-panel/xpl-panel.js +2 -2
- package/dist/collection/components/xpl-popover/xpl-popover.js +4 -4
- package/dist/collection/components/xpl-progress-bar/xpl-progress-bar.js +2 -2
- package/dist/collection/components/xpl-progress-indicator/xpl-progress-indicator.js +1 -1
- package/dist/collection/components/xpl-radio/xpl-radio.js +3 -3
- package/dist/collection/components/xpl-secondary-nav/xpl-secondary-nav.js +1 -1
- package/dist/collection/components/xpl-select/xpl-select.js +58 -6
- package/dist/collection/components/xpl-side-nav/xpl-side-nav-item/xpl-side-nav-item.js +2 -2
- package/dist/collection/components/xpl-side-nav/xpl-side-nav.js +2 -2
- package/dist/collection/components/xpl-skeleton/xpl-skeleton.js +1 -1
- package/dist/collection/components/xpl-slideout/xpl-slideout.js +1 -1
- package/dist/collection/components/xpl-tab-panel/xpl-tab-panel.js +2 -2
- package/dist/collection/components/xpl-table/table.stories.js +67 -319
- package/dist/collection/components/xpl-table/xpl-table.js +151 -1456
- package/dist/collection/components/xpl-table-header/table-header.stories.js +126 -0
- package/dist/collection/components/xpl-table-header/xpl-table-header.js +7 -0
- package/dist/collection/components/xpl-table-header-cell/table-header-cell.stories.js +75 -0
- package/dist/collection/components/xpl-table-header-cell/xpl-table-header-cell.js +188 -0
- package/dist/collection/components/xpl-tabs/xpl-tabs.js +5 -5
- package/dist/collection/components/xpl-tag/xpl-tag.js +2 -2
- package/dist/collection/components/xpl-toast/xpl-toast.js +2 -2
- package/dist/collection/components/xpl-toggle/xpl-toggle.js +3 -3
- package/dist/collection/components/xpl-toolbar/xpl-toolbar.js +2 -2
- package/dist/collection/components/xpl-tooltip/xpl-tooltip.js +1 -1
- package/dist/collection/components/xpl-top-nav/xpl-nav-header-menu/xpl-nav-header-menu.js +2 -2
- package/dist/collection/components/xpl-top-nav/xpl-top-nav-item/xpl-top-nav-item.js +2 -2
- package/dist/collection/components/xpl-top-nav/xpl-top-nav.js +5 -5
- package/dist/collection/components/xpl-utility-bar/xpl-utility-bar.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/xpl-accordion.js +1 -1
- package/dist/components/xpl-application-shell.js +1 -1
- package/dist/components/xpl-backdrop2.js +1 -1
- package/dist/components/xpl-badge2.js +1 -1
- package/dist/components/xpl-banner.js +1 -1
- package/dist/components/xpl-breadcrumb-item.js +1 -1
- package/dist/components/xpl-breadcrumbs.js +1 -1
- package/dist/components/xpl-button-row.js +1 -1
- package/dist/components/xpl-button2.js +1 -1
- package/dist/components/xpl-calendar.js +1 -1
- package/dist/components/xpl-checkbox2.js +1 -1
- package/dist/components/xpl-choicelist.js +1 -1
- package/dist/components/xpl-content-area.js +1 -1
- package/dist/components/xpl-dashboard.js +1 -1
- package/dist/components/xpl-data-card.js +1 -1
- package/dist/components/xpl-divider2.js +1 -1
- package/dist/components/xpl-dropdown-group2.js +1 -1
- package/dist/components/xpl-dropdown-heading2.js +1 -1
- package/dist/components/xpl-dropdown-option2.js +1 -1
- package/dist/components/xpl-dropdown2.js +1 -1
- package/dist/components/xpl-dynamic-table-cell.js +1 -1
- package/dist/components/xpl-dynamic-table-row.js +1 -1
- package/dist/components/xpl-dynamic-table.js +1 -1
- package/dist/components/xpl-grid-item.js +1 -1
- package/dist/components/xpl-grid.js +1 -1
- package/dist/components/xpl-header-accordion.js +1 -1
- package/dist/components/xpl-icon2.js +1 -1
- package/dist/components/xpl-input-date2.js +1 -1
- package/dist/components/xpl-input-file2.js +1 -1
- package/dist/components/xpl-input-search2.js +1 -1
- package/dist/components/xpl-input2.js +1 -1
- package/dist/components/xpl-large-card.js +1 -1
- package/dist/components/xpl-list.js +1 -1
- package/dist/components/xpl-main-nav.js +1 -1
- package/dist/components/xpl-modal.js +1 -1
- package/dist/components/xpl-nav-header-menu.js +1 -1
- package/dist/components/xpl-nav-item.js +1 -1
- package/dist/components/xpl-pagination.js +1 -1
- package/dist/components/xpl-panel.js +1 -1
- package/dist/components/xpl-popover2.js +1 -1
- package/dist/components/xpl-progress-bar.js +1 -1
- package/dist/components/xpl-progress-indicator.js +1 -1
- package/dist/components/xpl-radio2.js +1 -1
- package/dist/components/xpl-secondary-nav.js +1 -1
- package/dist/components/xpl-select2.js +1 -1
- package/dist/components/xpl-side-nav-item.js +1 -1
- package/dist/components/xpl-side-nav.js +1 -1
- package/dist/components/xpl-skeleton.js +1 -1
- package/dist/components/xpl-slideout.js +1 -1
- package/dist/components/xpl-tab-panel.js +1 -1
- package/dist/components/xpl-table-header-cell.js +1 -1
- package/dist/components/xpl-table-header.js +1 -1
- package/dist/components/xpl-table.js +1 -1
- package/dist/components/xpl-tabs.js +1 -1
- package/dist/components/xpl-tag2.js +1 -1
- package/dist/components/xpl-toast.js +1 -1
- package/dist/components/xpl-toggle.js +1 -1
- package/dist/components/xpl-toolbar.js +1 -1
- package/dist/components/xpl-tooltip2.js +1 -1
- package/dist/components/xpl-top-nav-item2.js +1 -1
- package/dist/components/xpl-top-nav.js +1 -1
- package/dist/components/xpl-utility-bar.js +1 -1
- package/dist/docs/xpl-checkbox/readme.md +5 -7
- package/dist/docs/xpl-dropdown/readme.md +13 -11
- package/dist/docs/xpl-dynamic-table/readme.md +19 -22
- package/dist/docs/xpl-dynamic-table-cell/readme.md +18 -20
- package/dist/docs/xpl-dynamic-table-row/readme.md +19 -21
- package/dist/docs/xpl-icon/readme.md +1 -1
- package/dist/docs/xpl-select/readme.md +17 -15
- package/dist/docs/xpl-table/readme.md +46 -110
- package/dist/docs/{xpl-table/xpl-table-header → xpl-table-header}/readme.md +13 -13
- package/dist/docs/xpl-table-header-cell/readme.md +47 -0
- package/dist/esm/apollo-core.js +1 -1
- package/dist/esm/index-C7bgJs6C.js +10 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/xpl-accordion.entry.js +2 -2
- package/dist/esm/xpl-application-shell.entry.js +1 -1
- package/dist/esm/{xpl-avatar_61.entry.js → xpl-avatar_54.entry.js} +239 -1677
- package/dist/esm/xpl-button-row.entry.js +1 -1
- package/dist/esm/xpl-calendar.entry.js +1 -1
- package/dist/esm/xpl-dynamic-table-cell.entry.js +2 -2
- package/dist/esm/xpl-dynamic-table-row.entry.js +2 -2
- package/dist/esm/xpl-dynamic-table.entry.js +1 -1
- package/dist/esm/xpl-grid-item.entry.js +1 -1
- package/dist/esm/xpl-grid.entry.js +1 -1
- package/dist/esm/xpl-large-card.entry.js +1 -1
- package/dist/esm/xpl-main-nav.entry.js +1 -1
- package/dist/esm/xpl-table-header-cell.entry.js +55 -0
- package/dist/esm/xpl-table-header.entry.js +12 -0
- package/dist/esm/xpl-toggle.entry.js +3 -3
- package/dist/esm/xpl-toolbar.entry.js +2 -2
- package/dist/types/components/xpl-checkbox/xpl-checkbox.d.ts +2 -2
- package/dist/types/components/xpl-dropdown/xpl-dropdown.d.ts +5 -0
- package/dist/types/components/xpl-header-accordion/xpl-header-accordion.d.ts +10 -9
- package/dist/types/components/xpl-pagination/pagination.stories.d.ts +13 -0
- package/dist/types/components/xpl-select/xpl-select.d.ts +3 -0
- package/dist/types/components/xpl-table/table.stories.d.ts +19 -161
- package/dist/types/components/xpl-table/xpl-table.d.ts +21 -123
- package/dist/types/components/{xpl-table/xpl-table-header → xpl-table-header}/table-header.stories.d.ts +16 -13
- package/dist/types/components/{xpl-table/xpl-table-header-cell → xpl-table-header-cell}/table-header-cell.stories.d.ts +20 -24
- package/dist/types/components/xpl-table-header-cell/xpl-table-header-cell.d.ts +13 -0
- package/dist/types/components.d.ts +89 -391
- package/package.json +10 -1
- package/dist/apollo-core/p-146d5d55.entry.js +0 -1
- package/dist/apollo-core/p-16742606.entry.js +0 -1
- package/dist/apollo-core/p-3eb5eb7c.entry.js +0 -1
- package/dist/apollo-core/p-4882f0bd.entry.js +0 -1
- package/dist/apollo-core/p-64b34268.entry.js +0 -1
- package/dist/apollo-core/p-71b75f36.entry.js +0 -1
- package/dist/apollo-core/p-84254a24.entry.js +0 -1
- package/dist/apollo-core/p-9f2a0321.entry.js +0 -1
- package/dist/apollo-core/p-cde83ab0.entry.js +0 -1
- package/dist/apollo-core/p-e7363036.entry.js +0 -1
- package/dist/collection/components/xpl-table/utils/move-row-dom.js +0 -50
- package/dist/collection/components/xpl-table/utils/table-internal.js +0 -58
- package/dist/collection/components/xpl-table/xpl-table-body/xpl-table-body.js +0 -7
- package/dist/collection/components/xpl-table/xpl-table-cell/xpl-table-cell.js +0 -155
- package/dist/collection/components/xpl-table/xpl-table-footer/xpl-table-footer.js +0 -7
- package/dist/collection/components/xpl-table/xpl-table-footer-cell/xpl-table-footer-cell.js +0 -37
- package/dist/collection/components/xpl-table/xpl-table-header/table-header.stories.js +0 -131
- package/dist/collection/components/xpl-table/xpl-table-header/xpl-table-header.js +0 -7
- package/dist/collection/components/xpl-table/xpl-table-header-cell/table-header-cell.stories.js +0 -105
- package/dist/collection/components/xpl-table/xpl-table-header-cell/xpl-table-header-cell.js +0 -402
- package/dist/collection/components/xpl-table/xpl-table-row/xpl-table-row.js +0 -121
- package/dist/components/lifecycle.js +0 -1
- package/dist/components/xpl-table-body.d.ts +0 -11
- package/dist/components/xpl-table-body.js +0 -1
- package/dist/components/xpl-table-cell.d.ts +0 -11
- package/dist/components/xpl-table-cell.js +0 -1
- package/dist/components/xpl-table-cell2.js +0 -1
- package/dist/components/xpl-table-footer-cell.d.ts +0 -11
- package/dist/components/xpl-table-footer-cell.js +0 -1
- package/dist/components/xpl-table-footer-cell2.js +0 -1
- package/dist/components/xpl-table-footer.d.ts +0 -11
- package/dist/components/xpl-table-footer.js +0 -1
- package/dist/components/xpl-table-header-cell2.js +0 -1
- package/dist/components/xpl-table-row.d.ts +0 -11
- package/dist/components/xpl-table-row.js +0 -1
- package/dist/docs/xpl-table/xpl-table-body/readme.md +0 -10
- package/dist/docs/xpl-table/xpl-table-cell/readme.md +0 -33
- package/dist/docs/xpl-table/xpl-table-footer/readme.md +0 -10
- package/dist/docs/xpl-table/xpl-table-footer-cell/readme.md +0 -30
- package/dist/docs/xpl-table/xpl-table-header-cell/readme.md +0 -66
- package/dist/docs/xpl-table/xpl-table-row/readme.md +0 -19
- package/dist/types/components/xpl-table/utils/move-row-dom.d.ts +0 -3
- package/dist/types/components/xpl-table/utils/table-internal.d.ts +0 -8
- package/dist/types/components/xpl-table/xpl-table-body/xpl-table-body.d.ts +0 -3
- package/dist/types/components/xpl-table/xpl-table-cell/xpl-table-cell.d.ts +0 -11
- package/dist/types/components/xpl-table/xpl-table-footer/xpl-table-footer.d.ts +0 -3
- package/dist/types/components/xpl-table/xpl-table-footer-cell/xpl-table-footer-cell.d.ts +0 -4
- package/dist/types/components/xpl-table/xpl-table-header-cell/xpl-table-header-cell.d.ts +0 -32
- package/dist/types/components/xpl-table/xpl-table-row/xpl-table-row.d.ts +0 -13
- /package/dist/types/components/{xpl-table/xpl-table-header → xpl-table-header}/xpl-table-header.d.ts +0 -0
|
@@ -11,23 +11,26 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
return t;
|
|
12
12
|
};
|
|
13
13
|
import { h, Host, } from "@stencil/core";
|
|
14
|
-
import { autoUpdate, computePosition, flip, hide, offset, size } from "@floating-ui/dom";
|
|
14
|
+
import { autoUpdate, computePosition, flip, hide, offset, size, } from "@floating-ui/dom";
|
|
15
15
|
export class Dropdown {
|
|
16
16
|
constructor() {
|
|
17
17
|
this.isOpen = false;
|
|
18
18
|
this.closeOnSelect = true;
|
|
19
19
|
this.mode = 'single';
|
|
20
20
|
this.anchorToTrigger = false;
|
|
21
|
+
this.placement = 'bottom-start';
|
|
21
22
|
this.selectOnFocus = false;
|
|
22
23
|
this.cleanupAutoUpdate = null;
|
|
23
24
|
this.updateDropdownPosition = async (triggerEl) => {
|
|
24
|
-
var _a;
|
|
25
|
+
var _a, _b;
|
|
25
26
|
const { x, y, placement, middlewareData } = await computePosition(triggerEl, this.hostElement, {
|
|
26
27
|
strategy: 'fixed',
|
|
27
|
-
placement:
|
|
28
|
+
placement: this.placement,
|
|
28
29
|
middleware: [
|
|
29
30
|
offset(4),
|
|
30
|
-
flip()
|
|
31
|
+
flip(((_a = this.flipFallbackPlacements) === null || _a === void 0 ? void 0 : _a.length)
|
|
32
|
+
? { fallbackPlacements: this.flipFallbackPlacements }
|
|
33
|
+
: {}),
|
|
31
34
|
size({
|
|
32
35
|
apply: ({ availableHeight, rects }) => {
|
|
33
36
|
const listEl = this.hostElement.querySelector('.xpl-dropdown-list');
|
|
@@ -63,7 +66,7 @@ export class Dropdown {
|
|
|
63
66
|
});
|
|
64
67
|
if (!this.cleanupAutoUpdate)
|
|
65
68
|
return;
|
|
66
|
-
if ((
|
|
69
|
+
if ((_b = middlewareData.hide) === null || _b === void 0 ? void 0 : _b.referenceHidden) {
|
|
67
70
|
this.isOpen = false;
|
|
68
71
|
return;
|
|
69
72
|
}
|
|
@@ -95,6 +98,16 @@ export class Dropdown {
|
|
|
95
98
|
this.startPositioning();
|
|
96
99
|
}
|
|
97
100
|
}
|
|
101
|
+
onFlipFallbackPlacementsChanged() {
|
|
102
|
+
if (this.isOpen && this.anchorToTrigger) {
|
|
103
|
+
this.startPositioning();
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
onPlacementChanged() {
|
|
107
|
+
if (this.isOpen && this.anchorToTrigger) {
|
|
108
|
+
this.startPositioning();
|
|
109
|
+
}
|
|
110
|
+
}
|
|
98
111
|
onTriggerIdChanged() {
|
|
99
112
|
if (this.isOpen) {
|
|
100
113
|
this.startPositioning();
|
|
@@ -222,12 +235,12 @@ export class Dropdown {
|
|
|
222
235
|
var { groupName, options: opts, subtitle } = _a, properties = __rest(_a, ["groupName", "options", "subtitle"]);
|
|
223
236
|
return groupName ? (h("xpl-dropdown-group", Object.assign({ groupName: groupName, options: opts }, properties))) : (h("xpl-dropdown-option", Object.assign({ subtitle: subtitle }, properties)));
|
|
224
237
|
});
|
|
225
|
-
return (h(Host, { key: '
|
|
238
|
+
return (h(Host, { key: '1ef465611f9a8501af41c17523352714a7921f29', "aria-expanded": isOpen ? 'true' : 'false', class: {
|
|
226
239
|
'xpl-dropdown': true,
|
|
227
240
|
'xpl-dropdown--multi': mode === 'multi',
|
|
228
241
|
'xpl-dropdown--open': isOpen,
|
|
229
242
|
'xpl-dropdown--anchor-to-trigger': this.anchorToTrigger,
|
|
230
|
-
}, role: "listbox" }, h("slot", { key: '
|
|
243
|
+
}, role: "listbox" }, h("slot", { key: '118c8b34e72aa6ab018e6fa9ff29a18ae540b89e', name: "header" }), h("ul", { key: '01544e6aa8d785c48b4f677de102efe4ecc7b53a', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'f70619995bed02540cef11deaeb6c3e5704165ff', name: "options" }))));
|
|
231
244
|
}
|
|
232
245
|
static get is() { return "xpl-dropdown"; }
|
|
233
246
|
static get properties() {
|
|
@@ -336,6 +349,57 @@ export class Dropdown {
|
|
|
336
349
|
"attribute": "anchor-to-trigger",
|
|
337
350
|
"defaultValue": "false"
|
|
338
351
|
},
|
|
352
|
+
"flipFallbackPlacements": {
|
|
353
|
+
"type": "unknown",
|
|
354
|
+
"mutable": false,
|
|
355
|
+
"complexType": {
|
|
356
|
+
"original": "Placement[]",
|
|
357
|
+
"resolved": "Placement[]",
|
|
358
|
+
"references": {
|
|
359
|
+
"Placement": {
|
|
360
|
+
"location": "import",
|
|
361
|
+
"path": "@floating-ui/dom",
|
|
362
|
+
"id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.mts::Placement",
|
|
363
|
+
"referenceLocation": "Placement"
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
},
|
|
367
|
+
"required": false,
|
|
368
|
+
"optional": true,
|
|
369
|
+
"docs": {
|
|
370
|
+
"tags": [],
|
|
371
|
+
"text": "When `anchorToTrigger` is true, additional placements to try when the\ndefault `placement` does not fit (passed to Floating UI `flip`)."
|
|
372
|
+
},
|
|
373
|
+
"getter": false,
|
|
374
|
+
"setter": false
|
|
375
|
+
},
|
|
376
|
+
"placement": {
|
|
377
|
+
"type": "string",
|
|
378
|
+
"mutable": false,
|
|
379
|
+
"complexType": {
|
|
380
|
+
"original": "Placement",
|
|
381
|
+
"resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
|
|
382
|
+
"references": {
|
|
383
|
+
"Placement": {
|
|
384
|
+
"location": "import",
|
|
385
|
+
"path": "@floating-ui/dom",
|
|
386
|
+
"id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.mts::Placement",
|
|
387
|
+
"referenceLocation": "Placement"
|
|
388
|
+
}
|
|
389
|
+
}
|
|
390
|
+
},
|
|
391
|
+
"required": false,
|
|
392
|
+
"optional": false,
|
|
393
|
+
"docs": {
|
|
394
|
+
"tags": [],
|
|
395
|
+
"text": "Floating UI placement when `anchorToTrigger` is true (e.g. `bottom-start`, `top-start`)."
|
|
396
|
+
},
|
|
397
|
+
"getter": false,
|
|
398
|
+
"setter": false,
|
|
399
|
+
"reflect": false,
|
|
400
|
+
"attribute": "placement",
|
|
401
|
+
"defaultValue": "'bottom-start'"
|
|
402
|
+
},
|
|
339
403
|
"selectedValues": {
|
|
340
404
|
"type": "string",
|
|
341
405
|
"mutable": false,
|
|
@@ -480,6 +544,12 @@ export class Dropdown {
|
|
|
480
544
|
return [{
|
|
481
545
|
"propName": "anchorToTrigger",
|
|
482
546
|
"methodName": "onAnchorToTriggerChanged"
|
|
547
|
+
}, {
|
|
548
|
+
"propName": "flipFallbackPlacements",
|
|
549
|
+
"methodName": "onFlipFallbackPlacementsChanged"
|
|
550
|
+
}, {
|
|
551
|
+
"propName": "placement",
|
|
552
|
+
"methodName": "onPlacementChanged"
|
|
483
553
|
}, {
|
|
484
554
|
"propName": "triggerId",
|
|
485
555
|
"methodName": "onTriggerIdChanged"
|
|
@@ -51,7 +51,7 @@ export class DynamicTable {
|
|
|
51
51
|
this.updateColumnCount();
|
|
52
52
|
}
|
|
53
53
|
render() {
|
|
54
|
-
return (h("div", { key: '
|
|
54
|
+
return (h("div", { key: '8f33da5fa8815400447b1690172bdaddd1079c1a', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: '221aced83acf1fc4c904533eaedb1cd79914c5d3', name: "header" }), h("slot", { key: '6087119ce1499e94a30d09a1917d9371331f6add', name: "body" })));
|
|
55
55
|
}
|
|
56
56
|
static get is() { return "xpl-dynamic-table"; }
|
|
57
57
|
static get states() {
|
|
@@ -19,9 +19,9 @@ export class DynamicTableCell {
|
|
|
19
19
|
}
|
|
20
20
|
render() {
|
|
21
21
|
const colIndex = Array.from(this.el.parentElement.children).indexOf(this.el) + 1;
|
|
22
|
-
return (h(Host, { key: '
|
|
22
|
+
return (h(Host, { key: '7cfa2d58f634e41ccf1604a581fcc83a2b51676f', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
|
|
23
23
|
this.hostElement = el;
|
|
24
|
-
} }, h("slot", { key: '
|
|
24
|
+
} }, h("slot", { key: 'c6a04082cb8aa1089d9f6cb82f3db8d7f0addf6e' })));
|
|
25
25
|
}
|
|
26
26
|
static get is() { return "xpl-dynamic-table-cell"; }
|
|
27
27
|
static get properties() {
|
|
@@ -24,9 +24,9 @@ export class DynamicTableRow {
|
|
|
24
24
|
const classList = `xpl-dynamic-table-row
|
|
25
25
|
${this.isDisabled ? 'disabled' : ''}
|
|
26
26
|
${this.selected ? 'selected' : ''}`;
|
|
27
|
-
return (h(Host, { key: '
|
|
27
|
+
return (h(Host, { key: '0d099456d2016263a2bdcd42b46794e08adb64cf', role: "row", class: classList, ref: (el) => {
|
|
28
28
|
this.hostElement = el;
|
|
29
|
-
} }, h("slot", { key: '
|
|
29
|
+
} }, h("slot", { key: 'c923f7f8dc4bb8a4527693259d1a8b5932bb6c10' })));
|
|
30
30
|
}
|
|
31
31
|
static get is() { return "xpl-dynamic-table-row"; }
|
|
32
32
|
static get properties() {
|
|
@@ -22,7 +22,7 @@ export class Grid {
|
|
|
22
22
|
});
|
|
23
23
|
}
|
|
24
24
|
render() {
|
|
25
|
-
return h(Host, { key: '
|
|
25
|
+
return h(Host, { key: 'aeee950fb242a14f50ceda1d199cf427597b70f6', class: "xpl-grid" });
|
|
26
26
|
}
|
|
27
27
|
static get is() { return "xpl-grid"; }
|
|
28
28
|
static get elementRef() { return "container"; }
|
|
@@ -12,7 +12,7 @@ export class GridItem {
|
|
|
12
12
|
className += ` xpl-grid-item-sm-${this.sm}`;
|
|
13
13
|
className += ` xpl-grid-item-md-${this.md}`;
|
|
14
14
|
className += ` xpl-grid-item-lg-${this.lg}`;
|
|
15
|
-
return (h(Host, { key: '
|
|
15
|
+
return (h(Host, { key: '43cf6dd21d3d06e2d8012b716e5db5aeee676aac', class: className }, h("slot", { key: 'e08e03e4152007df7158d7122f883da1050dfde7' })));
|
|
16
16
|
}
|
|
17
17
|
static get is() { return "xpl-grid-item"; }
|
|
18
18
|
static get properties() {
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
2
|
export class HeaderAccordion {
|
|
3
3
|
constructor() {
|
|
4
|
-
this.expanded = false;
|
|
5
|
-
this.parentChecked = false;
|
|
6
|
-
this.parentIndeterminate = false;
|
|
7
|
-
this.disabled = false;
|
|
8
|
-
this.hasCheckbox = true;
|
|
9
4
|
this.initialExpanded = false;
|
|
5
|
+
this.disabled = false;
|
|
10
6
|
this.selectedCount = -1;
|
|
7
|
+
this.hasCheckbox = true;
|
|
8
|
+
this.expanded = this.initialExpanded;
|
|
9
|
+
this.parentChecked = false;
|
|
10
|
+
this.parentIndeterminate = false;
|
|
11
11
|
this.toggleAccordion = () => {
|
|
12
12
|
this.expanded = !this.expanded;
|
|
13
13
|
};
|
|
@@ -21,24 +21,19 @@ export class HeaderAccordion {
|
|
|
21
21
|
});
|
|
22
22
|
};
|
|
23
23
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
applyBorderRadiusToLastRow() {
|
|
25
|
+
var _a;
|
|
26
|
+
if (this.expanded) {
|
|
27
|
+
const rows = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('xpl-dynamic-table-row');
|
|
28
|
+
const lastRow = rows[rows.length - 1];
|
|
29
|
+
const cells = lastRow === null || lastRow === void 0 ? void 0 : lastRow.querySelectorAll('xpl-dynamic-table-cell');
|
|
30
|
+
cells[0].style.borderBottomLeftRadius = '0.5rem';
|
|
31
|
+
cells[cells.length - 1].style.borderBottomRightRadius = '0.5rem';
|
|
27
32
|
}
|
|
28
33
|
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
componentDidLoad() {
|
|
33
|
-
const initialCheckboxesValue = this.selectedCount > -1 ? this.selectedCount : 0;
|
|
34
|
-
this.updateParentCheckbox(initialCheckboxesValue);
|
|
35
|
-
}
|
|
36
|
-
handleChildCheckboxChange() {
|
|
37
|
-
var _a;
|
|
38
|
-
if (this.selectedCount === -1) {
|
|
39
|
-
const childCheckboxes = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
|
|
40
|
-
const checkedCount = Array.from(childCheckboxes).filter((checkbox) => checkbox.checked).length;
|
|
41
|
-
this.updateParentCheckbox(checkedCount);
|
|
34
|
+
watchSelectedCount(selectedCount, _previousCount) {
|
|
35
|
+
if (selectedCount > -1) {
|
|
36
|
+
this.updateParentCheckbox(selectedCount);
|
|
42
37
|
}
|
|
43
38
|
}
|
|
44
39
|
updateParentCheckbox(selectedCount) {
|
|
@@ -57,11 +52,23 @@ export class HeaderAccordion {
|
|
|
57
52
|
this.parentIndeterminate = true;
|
|
58
53
|
}
|
|
59
54
|
}
|
|
55
|
+
handleChildCheckboxChange() {
|
|
56
|
+
var _a;
|
|
57
|
+
if (this.selectedCount === -1) {
|
|
58
|
+
const childCheckboxes = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
|
|
59
|
+
const checkedCount = Array.from(childCheckboxes).filter((checkbox) => checkbox.checked).length;
|
|
60
|
+
this.updateParentCheckbox(checkedCount);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
componentDidLoad() {
|
|
64
|
+
const initialCheckoxesValue = this.selectedCount > -1 ? this.selectedCount : 0;
|
|
65
|
+
this.updateParentCheckbox(initialCheckoxesValue);
|
|
66
|
+
}
|
|
67
|
+
componentWillRender() {
|
|
68
|
+
this.applyBorderRadiusToLastRow();
|
|
69
|
+
}
|
|
60
70
|
render() {
|
|
61
|
-
return (h(Host, { key: '
|
|
62
|
-
'xpl-header-accordion': true,
|
|
63
|
-
'xpl-header-accordion--expanded': this.expanded,
|
|
64
|
-
} }, h("div", { key: '41cbb9358a5d76f44f135d76c945fe801cafc474', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: 'c939d100f687b14455424ee3f0b6bdfd7de785bb', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: '4d98d8d75b4c7c7ba8e50ce6d43ed3b83919d624', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: 'd9c993b7e8e6cf0b46014d6c535a52c84386b8ed', name: "title" }), h("xpl-icon", { key: '58d114ae4dd93c9ec15e3d74cfb2d33c6c1b57cb', size: 20, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: '46a98c094621ec02c9416bcfa7a2d33e6ce468d4', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: '7966e352ec17125afa59a7590dbc8e9372a39f41', name: "content" }))));
|
|
71
|
+
return (h(Host, { key: '33b59f238ef5eabce7a83dec5e189459038ac2e0', class: "xpl-header-accordion" }, h("div", { key: '1269fe93be898a0300a1c840ad8919608c86bbff', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: '16a93cbaab64072990502ed7d1bc2a496ad31425', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: '00e7024adcd3c8cef52cc5d11be8e4dc6319c1a8', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: '16fc847fff7d27f73c589bff9670fdbdec9f58cc', name: "title" }), h("xpl-icon", { key: '44e27d19feb130c0903949d24a9c71f19f8475b6', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: 'aa8bd514da7666ed09c72c5b271ea0eeda729ef8', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: 'b8adf0af8ea58edad1036fc45277ef6621bc8fbb', name: "content" }))));
|
|
65
72
|
}
|
|
66
73
|
static get is() { return "xpl-header-accordion"; }
|
|
67
74
|
static get properties() {
|
|
@@ -85,7 +92,7 @@ export class HeaderAccordion {
|
|
|
85
92
|
"reflect": false,
|
|
86
93
|
"attribute": "content-id"
|
|
87
94
|
},
|
|
88
|
-
"
|
|
95
|
+
"initialExpanded": {
|
|
89
96
|
"type": "boolean",
|
|
90
97
|
"mutable": false,
|
|
91
98
|
"complexType": {
|
|
@@ -97,15 +104,15 @@ export class HeaderAccordion {
|
|
|
97
104
|
"optional": false,
|
|
98
105
|
"docs": {
|
|
99
106
|
"tags": [],
|
|
100
|
-
"text": "Whether the accordion is
|
|
107
|
+
"text": "Whether the accordion is expanded initially."
|
|
101
108
|
},
|
|
102
109
|
"getter": false,
|
|
103
110
|
"setter": false,
|
|
104
111
|
"reflect": false,
|
|
105
|
-
"attribute": "
|
|
112
|
+
"attribute": "initial-expanded",
|
|
106
113
|
"defaultValue": "false"
|
|
107
114
|
},
|
|
108
|
-
"
|
|
115
|
+
"disabled": {
|
|
109
116
|
"type": "boolean",
|
|
110
117
|
"mutable": false,
|
|
111
118
|
"complexType": {
|
|
@@ -117,53 +124,53 @@ export class HeaderAccordion {
|
|
|
117
124
|
"optional": false,
|
|
118
125
|
"docs": {
|
|
119
126
|
"tags": [],
|
|
120
|
-
"text": "Whether
|
|
127
|
+
"text": "Whether the accordion is disabled."
|
|
121
128
|
},
|
|
122
129
|
"getter": false,
|
|
123
130
|
"setter": false,
|
|
124
131
|
"reflect": false,
|
|
125
|
-
"attribute": "
|
|
126
|
-
"defaultValue": "
|
|
132
|
+
"attribute": "disabled",
|
|
133
|
+
"defaultValue": "false"
|
|
127
134
|
},
|
|
128
|
-
"
|
|
129
|
-
"type": "
|
|
135
|
+
"selectedCount": {
|
|
136
|
+
"type": "number",
|
|
130
137
|
"mutable": false,
|
|
131
138
|
"complexType": {
|
|
132
|
-
"original": "
|
|
133
|
-
"resolved": "
|
|
139
|
+
"original": "number",
|
|
140
|
+
"resolved": "number",
|
|
134
141
|
"references": {}
|
|
135
142
|
},
|
|
136
143
|
"required": false,
|
|
137
144
|
"optional": false,
|
|
138
145
|
"docs": {
|
|
139
146
|
"tags": [],
|
|
140
|
-
"text": "
|
|
147
|
+
"text": "The number of selected child items, or -1 to auto-calculate."
|
|
141
148
|
},
|
|
142
149
|
"getter": false,
|
|
143
150
|
"setter": false,
|
|
144
151
|
"reflect": false,
|
|
145
|
-
"attribute": "
|
|
146
|
-
"defaultValue": "
|
|
152
|
+
"attribute": "selected-count",
|
|
153
|
+
"defaultValue": "-1"
|
|
147
154
|
},
|
|
148
|
-
"
|
|
149
|
-
"type": "
|
|
155
|
+
"hasCheckbox": {
|
|
156
|
+
"type": "boolean",
|
|
150
157
|
"mutable": false,
|
|
151
158
|
"complexType": {
|
|
152
|
-
"original": "
|
|
153
|
-
"resolved": "
|
|
159
|
+
"original": "boolean",
|
|
160
|
+
"resolved": "boolean",
|
|
154
161
|
"references": {}
|
|
155
162
|
},
|
|
156
163
|
"required": false,
|
|
157
164
|
"optional": false,
|
|
158
165
|
"docs": {
|
|
159
166
|
"tags": [],
|
|
160
|
-
"text": "
|
|
167
|
+
"text": "Whether to display a parent checkbox in the accordion header."
|
|
161
168
|
},
|
|
162
169
|
"getter": false,
|
|
163
170
|
"setter": false,
|
|
164
171
|
"reflect": false,
|
|
165
|
-
"attribute": "
|
|
166
|
-
"defaultValue": "
|
|
172
|
+
"attribute": "has-checkbox",
|
|
173
|
+
"defaultValue": "true"
|
|
167
174
|
}
|
|
168
175
|
};
|
|
169
176
|
}
|
|
@@ -16,10 +16,10 @@ export class Icon {
|
|
|
16
16
|
let wrapperClasses = 'xpl-icon__wrapper ';
|
|
17
17
|
if (this.backgroundColor)
|
|
18
18
|
wrapperClasses += `xpl-icon__wrapper--with-background xpl-icon__wrapper--with-background--${this.backgroundColor}`;
|
|
19
|
-
return (h(Host, { key: '
|
|
19
|
+
return (h(Host, { key: '07522771501e6e67b0ae91bbee9cc8699d79fb8b' }, h("figure", { key: '2acf41e3e20ff3998050c948fcae5d0990cb706a', class: wrapperClasses }, h("span", { key: '560b2e62366ee0842442c29280a7e37b53edf2be', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
|
|
20
20
|
width: `${options.width}px`,
|
|
21
21
|
height: `${options.height}px`,
|
|
22
|
-
}, innerHTML: (_a = apolloIcons.getIcon(this.icon)) === null || _a === void 0 ? void 0 : _a.toSVG(options) }), h("figcaption", { key: '
|
|
22
|
+
}, innerHTML: (_a = apolloIcons.getIcon(this.icon)) === null || _a === void 0 ? void 0 : _a.toSVG(options) }), h("figcaption", { key: '256c0d05be8026b24a139f8bfff4f00c65112030' }, this.icon, " icon"))));
|
|
23
23
|
}
|
|
24
24
|
static get is() { return "xpl-icon"; }
|
|
25
25
|
static get originalStyleUrls() {
|
|
@@ -193,16 +193,16 @@ export class InputColor {
|
|
|
193
193
|
top: `${y}px`,
|
|
194
194
|
background: `rgb(${r}, ${g}, ${b})`,
|
|
195
195
|
};
|
|
196
|
-
return (h(Host, { key: '
|
|
196
|
+
return (h(Host, { key: 'f665a747f8938212d0c9ada4f251a9fc880ba82c', class: "xpl-input-color" }, h("xpl-popover", { key: 'eac77d1e9f350b3b0dd66001a7a596d156a75a53', disabled: this.disabled, display: "menu" }, h("div", { key: '73d1468c4261fd9a8e957189129cc660757d849f', slot: "trigger" }, h("div", { key: 'fa098788863247a7c87e4efe628b5b47f0bb3113', class: {
|
|
197
197
|
'xpl-input-color__display': true,
|
|
198
198
|
'xpl-input-color__display--disabled': this.disabled,
|
|
199
199
|
'xpl-input-color__display--error': !!this.hasErrorState,
|
|
200
|
-
} }, h("span", { key: '
|
|
200
|
+
} }, h("span", { key: 'd471146ff3ba7b026dba1424599361d0aa0fe49c', class: "xpl-input-color__color", style: {
|
|
201
201
|
background: objectToStringColor(this.colorValues),
|
|
202
|
-
} }), this.colorValues.hex ? (h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (h("xpl-icon", { key: '
|
|
202
|
+
} }), this.colorValues.hex ? (h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (h("xpl-icon", { key: '5cd87456ef093611b6be8906c24b235ea7f19524', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
|
|
203
203
|
e.stopPropagation();
|
|
204
204
|
this.openEyeDropper();
|
|
205
|
-
} })))), h("div", { key: '
|
|
205
|
+
} })))), h("div", { key: 'df7bdf567c9a697f8a5e737e5a8cb1b1b962dbb9', class: "xpl-input-color__menu" }, h("div", { key: 'ae630752b48e9d211273da6f3dadda8ace603ba2', class: "xpl-input-color__sl-grid", ref: (el) => {
|
|
206
206
|
this.colorInputElements.slGrid = el;
|
|
207
207
|
}, style: {
|
|
208
208
|
background: [
|
|
@@ -210,9 +210,9 @@ export class InputColor {
|
|
|
210
210
|
`linear-gradient(to right, #fff, #fff0)`,
|
|
211
211
|
`rgb(${hueBaseColor.r} ${hueBaseColor.g} ${hueBaseColor.b})`,
|
|
212
212
|
].join(', '),
|
|
213
|
-
}, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, h("div", { key: '
|
|
213
|
+
}, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, h("div", { key: '25ffc6bb94f0e861a3bc5a6da5c01e0901d1779e', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: '7d256baab084f96c56724b4eede835a13bee7055', class: "xpl-input-color__grid" }, h("input", { key: '227309d4590722c24c2d053c013a6d473e44a3ee', type: "range", min: "0", max: "360", value: this.hue, class: "xpl-input-color__slider xpl-input-color__hue", name: "color-hue-slider", ref: (el) => {
|
|
214
214
|
this.colorInputElements.hue = el;
|
|
215
|
-
} }), h("input", { key: '
|
|
215
|
+
} }), h("input", { key: '2d43e7c9f98fd5cdcccde7206c0cf4e5ae6bde6d', type: "range", min: "0", max: "1", step: "0.01", value: a, class: "xpl-input-color__slider xpl-input-color__alpha", name: "color-alpha-slider", ref: (el) => {
|
|
216
216
|
this.colorInputElements.alpha = el;
|
|
217
217
|
}, style: {
|
|
218
218
|
backgroundImage: [
|
|
@@ -222,9 +222,9 @@ export class InputColor {
|
|
|
222
222
|
`linear-gradient(45deg, transparent 75%, #ccc 75%)`,
|
|
223
223
|
`linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
|
|
224
224
|
].join(', '),
|
|
225
|
-
} }), h("div", { key: '
|
|
225
|
+
} }), h("div", { key: '26a562a220b2458e0ee99906d27d8a11e38f2d02', class: "xpl-input-color__preview", style: {
|
|
226
226
|
background: `rgba(${r}, ${g}, ${b}, ${a})`,
|
|
227
|
-
} })), h("div", { key: '
|
|
227
|
+
} })), h("div", { key: 'a77a7325f72ef73e6aa2d6968ae4afd1e010cf2c', class: "xpl-input-color__inputs" }, Object.entries(this.colorInputElements)
|
|
228
228
|
.filter(([key]) => ['hex', 'r', 'g', 'b', 'a'].includes(key))
|
|
229
229
|
.map(([key]) => (h("xpl-input", { key: key, label: key.toLocaleUpperCase(), name: `color-${key}-input`, placeholder: key === 'hex' ? '793EF7' : '0', value: this.colorValues[key], ref: (elRef) => {
|
|
230
230
|
this.colorInputElements[key] = elRef;
|
|
@@ -78,16 +78,16 @@ export class InputDate {
|
|
|
78
78
|
parent.removeChild(wrapper);
|
|
79
79
|
}
|
|
80
80
|
render() {
|
|
81
|
-
return (h(Host, { key: '
|
|
81
|
+
return (h(Host, { key: '35b39ed37afa33603772cdd0dce79cf7533d36ec', class: {
|
|
82
82
|
'xpl-input-date': true,
|
|
83
83
|
[`xpl-input-date--mode-${this.mode}`]: true,
|
|
84
84
|
'xpl-input-date--error': !!this.hasErrorState,
|
|
85
85
|
'xpl-input-date--flatpickr-static': this.flatpickrStaticLayout,
|
|
86
|
-
} }, h("div", { key: '
|
|
86
|
+
} }, h("div", { key: '14940421a3f9fb4e7a5acbd5abb222d927a701cf', class: "xpl-input-wrapper" }, this.pre && (h("label", { key: '108b33b4f0a87bacff90480633327dd221f6b1d4', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), h("input", { key: '00633c5b69d25a94d7cd8501bde70459e8ebf2ce', type: "date", id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, ref: (el) => {
|
|
87
87
|
this.input = el;
|
|
88
88
|
}, onChange: (event) => {
|
|
89
89
|
this.valueChanged(event);
|
|
90
|
-
} }), h("xpl-icon", { key: '
|
|
90
|
+
} }), h("xpl-icon", { key: 'ba0d694b7ace1359d6901c0110dce40a78805f74', class: "xpl-input-calendar", icon: "calendar-month", size: 24 }), this.post && (h("label", { key: '5ca7564e2096b697a75ebfb573654c0c23125245', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
|
|
91
91
|
}
|
|
92
92
|
static get is() { return "xpl-input-date"; }
|
|
93
93
|
static get properties() {
|
|
@@ -33,18 +33,18 @@ export class InputFile {
|
|
|
33
33
|
}
|
|
34
34
|
render() {
|
|
35
35
|
var _a, _b;
|
|
36
|
-
return (h(Host, { key: '
|
|
36
|
+
return (h(Host, { key: 'ec1645e7d48cf2b146727a6c131dbd7572468f17', class: {
|
|
37
37
|
'xpl-input-file': true,
|
|
38
38
|
'xpl-input-file--hide-trigger-on-select': this.hideTriggerOnSelect,
|
|
39
39
|
'xpl-input-file--disabled': this.disabled,
|
|
40
|
-
} }, h("span", { key: '
|
|
40
|
+
} }, h("span", { key: '8dc3e290dcddba706316ec41443e2e87aa82f79f', class: {
|
|
41
41
|
'xpl-input-file__trigger-wrapper': true,
|
|
42
42
|
'xpl-input-file__trigger-wrapper--hidden': this.hideTriggerOnSelect && ((_a = this.files) === null || _a === void 0 ? void 0 : _a.length) > 0,
|
|
43
|
-
}, role: "button", tabIndex: 0, onClick: this.openFileDialog }, h("slot", { key: '
|
|
43
|
+
}, role: "button", tabIndex: 0, onClick: this.openFileDialog }, h("slot", { key: '2d2391a2ccca22170bfa0b9ace50a42fdba54284', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (h("ul", { key: 'c302bbbb5c1977c513dba82db70da1615f39a217', class: "xpl-input-file__file-list" }, this.files.map((file, fileIndex) => (h("li", { class: "xpl-input-file__file-item" }, h("span", { class: "xpl-text-callout" }, file.name), h("xpl-icon", { icon: "x-circle", size: 24, onClick: (e) => {
|
|
44
44
|
e.preventDefault();
|
|
45
45
|
e.stopPropagation();
|
|
46
46
|
this.onRemoveFileByIndex(fileIndex);
|
|
47
|
-
}, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (h("span", { key: '
|
|
47
|
+
}, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (h("span", { key: '9252c5450f32e8d2ed478af9f84eef4a26cee49f', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), h("input", { key: 'd44213b6fd075bfb12c7857d3a56e06f78ef0fdc', onChange: this.handleFileChange, type: "file", ref: (el) => {
|
|
48
48
|
this.fileInput = el;
|
|
49
49
|
}, hidden: true, accept: this.accept, multiple: this.multiple, name: this.name })));
|
|
50
50
|
}
|
|
@@ -196,21 +196,21 @@ export class InputPhone {
|
|
|
196
196
|
}
|
|
197
197
|
render() {
|
|
198
198
|
var _a;
|
|
199
|
-
return (h(Host, { key: '
|
|
199
|
+
return (h(Host, { key: '4a55afb3d85dc5882eca2cab0a23b11374cc053e', class: {
|
|
200
200
|
'xpl-input-phone': true,
|
|
201
201
|
'xpl-input-phone--error': !!this.hasErrorState,
|
|
202
202
|
'xpl-input-phone--open': this.dropdownOpen,
|
|
203
203
|
'xpl-input-phone--domestic': !this.isInternational,
|
|
204
|
-
} }, h("div", { key: '
|
|
204
|
+
} }, h("div", { key: 'c7e46df1b58b6e76dda47b3b32f5a6abe29f048c', class: "xpl-input-wrapper" }, this.isInternational && (h("button", { key: 'ef1bedb4bad96760c81ad4dbf2cadb5a29d4abb9', type: "button", id: this.triggerId, class: "xpl-input-phone__trigger", disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpen ? 'true' : 'false', "aria-label": "Select country", onClick: this.handleTriggerClick }, ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.name) && (h("xpl-icon", { key: 'a307f620c2815d63b17dbeb6c270d2972884e9d9', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), h("xpl-icon", { key: 'c16e66d315877cec35e322a1164f765cd387931f', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), h("div", { key: '7a33b994588e4c5ea868a4e092709b8acd50a36f', class: "xpl-input-phone__input-wrap" }, this.isInternational && (h("span", { key: '5a39cfd472f5287fc8cf0648ce618e21dabf5e97', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), h("input", { key: 'dfb25910769594bc9b9d1c861049605d7bdd9d0e', ref: (el) => {
|
|
205
205
|
this.inputEl = el;
|
|
206
|
-
}, type: "tel", id: this.inputId, class: "xpl-input-phone__input", name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, "aria-invalid": this.hasErrorState ? 'true' : 'false', placeholder: this.effectivePlaceholder, autocomplete: this.isInternational ? 'tel-national' : 'tel', inputmode: "numeric", maxlength: this.maxInputLength, value: this.displayValue, onInput: this.handleNumberInput }), this.nationalNumber && this.isEditable && (h("button", { key: '
|
|
206
|
+
}, type: "tel", id: this.inputId, class: "xpl-input-phone__input", name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, "aria-invalid": this.hasErrorState ? 'true' : 'false', placeholder: this.effectivePlaceholder, autocomplete: this.isInternational ? 'tel-national' : 'tel', inputmode: "numeric", maxlength: this.maxInputLength, value: this.displayValue, onInput: this.handleNumberInput }), this.nationalNumber && this.isEditable && (h("button", { key: '8db932d94550aa6d947e2564d8a94a12bef43bce', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, h("xpl-icon", { key: '87e55c3a5ae6b8774d3ce64af843b7e63448fe25', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (h("xpl-dropdown", { key: '467b0e2fde23a45b2c36138affa26467e0b6c9d0', ref: (el) => {
|
|
207
207
|
this.dropdownRef = el;
|
|
208
208
|
}, isOpen: this.dropdownOpen, triggerId: this.triggerId, anchorToTrigger: true, closeOnSelect: true, mode: "single", options: this.dropdownOptions, update: this.handleDropdownUpdate, onIsOpenChange: (e) => {
|
|
209
209
|
this.dropdownOpen = e.detail;
|
|
210
|
-
}, "aria-label": "Country" }, h("div", { key: '
|
|
210
|
+
}, "aria-label": "Country" }, h("div", { key: 'f4f3665ab8286faed45c3a3a510bd247c7a31842', slot: "header", class: "xpl-input-phone__search-wrap" }, h("xpl-input", { key: '659875e60e85bac085deb8f6648623eccc76d560', class: "xpl-input-phone__search", type: "text", label: "", placeholder: "Search", value: this.searchQuery, autocomplete: "off", onInputEvent: (e) => {
|
|
211
211
|
var _a;
|
|
212
212
|
this.searchQuery = (_a = e.detail) !== null && _a !== void 0 ? _a : '';
|
|
213
|
-
} }, h("xpl-icon", { key: '
|
|
213
|
+
} }, h("xpl-icon", { key: '987941768e8494d9c898fc93e531da03bd57ad71', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
|
|
214
214
|
}
|
|
215
215
|
static get is() { return "xpl-input-phone"; }
|
|
216
216
|
static get properties() {
|
|
@@ -96,7 +96,7 @@ export class InputSearch {
|
|
|
96
96
|
return shell;
|
|
97
97
|
}
|
|
98
98
|
render() {
|
|
99
|
-
return (h(Host, { key: '
|
|
99
|
+
return (h(Host, { key: 'c8f0c2b1c96cc8c6d9a2c390e791977b031adb9b', class: {
|
|
100
100
|
'xpl-input-search': true,
|
|
101
101
|
'xpl-input-search--disabled': this.disabled,
|
|
102
102
|
'xpl-input-search--error': this.hasError,
|
|
@@ -105,11 +105,11 @@ export class InputTime {
|
|
|
105
105
|
}));
|
|
106
106
|
}
|
|
107
107
|
render() {
|
|
108
|
-
return (h(Host, { key: '
|
|
108
|
+
return (h(Host, { key: 'a48ebfd7cd0578b33bd11059f9bebb342bf954f7', class: {
|
|
109
109
|
'xpl-input-time': true,
|
|
110
110
|
[`xpl-input-time--mode-${this.mode}`]: true,
|
|
111
111
|
'xpl-input-time--error': !!this.hasErrorState,
|
|
112
|
-
} }, h("xpl-input", { key: '
|
|
112
|
+
} }, h("xpl-input", { key: '68089e0bd5b0ed7d88917094eafe529637947380', pre: h("xpl-icon", { class: "xpl-input-time__clock-icon", icon: "clock", size: 24 }), post: this.timeFormat === '12h' ? this.amPm || 'AM' : null, type: "text", _id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, onInput: this.handleInput, value: this.formattedValue, onFocusEvent: this.handleFocus, onBlurEvent: this.handleBlur, onClick: this.handleClick }), !this.readonly && !this.disabled && (h("xpl-dropdown", { key: '1bbe4a3a42c02ff985a26e7547c54f0bbdc92ce0', options: this.options, isOpen: this.showOptions, ref: (el) => {
|
|
113
113
|
this.dropdown = el;
|
|
114
114
|
}, class: "xpl-input-time__dropdown" }))));
|
|
115
115
|
}
|
|
@@ -147,13 +147,13 @@ export class Input {
|
|
|
147
147
|
if (type === 'password' && this.passwordVisible) {
|
|
148
148
|
type = 'text';
|
|
149
149
|
}
|
|
150
|
-
return (h(Host, { key: '
|
|
150
|
+
return (h(Host, { key: '4b60d50e8b88f905777d76197afe181026ae5a94', class: {
|
|
151
151
|
'xpl-input': true,
|
|
152
152
|
'xpl-input--disabled': this.disabled,
|
|
153
153
|
'xpl-input--error': hasError,
|
|
154
154
|
'xpl-input--readonly': this.readonly,
|
|
155
155
|
[`xpl-input--${this.type}`]: true,
|
|
156
|
-
} }, this.label && (h("label", { key: '
|
|
156
|
+
} }, this.label && (h("label", { key: '8b0dc01150607c2943ccc541b9acd3a7fa5d2143', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && h("small", { key: '8d1f988983fd54e3bc231c0a8091b4fe83ed8ab8' }, this.description))), this.renderInput(), ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("label", { key: '349492ed192e6105dd549634da1ce2c0371f5b9d', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, h("xpl-icon", { key: '7903d2f35033ceefcf94eff8081997b4aec3c1a9', icon: "alert-circle", size: 16 }), h("span", { key: 'e3d557f705647eb304b4bf38151dcf01c17fce15' }, this.error)))));
|
|
157
157
|
}
|
|
158
158
|
static get is() { return "xpl-input"; }
|
|
159
159
|
static get properties() {
|
|
@@ -13,7 +13,7 @@ export class LargeCard {
|
|
|
13
13
|
render() {
|
|
14
14
|
const contentSlot = 'graph-content';
|
|
15
15
|
const hasContentSlot = this.el.querySelector(`[slot="${contentSlot}"]`);
|
|
16
|
-
return (h(Host, { key: '
|
|
16
|
+
return (h(Host, { key: '9b45179112de8d1ac309520425a1a5c340493487', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '4838c93a72df9ea794b3bbbd7f78f3e84a606109', class: "xpl-large-card__header" }, h("header", { key: 'eb4b2e8515be1e0763595e1cf646dc2b25bfb739' }, h("slot", { key: '62fdafe4b8ce03af5ff353c3ffa377fa547b572b', name: "title" }, this.name), this.link && (h("span", { key: 'ac0086a3402af5f12668a560ad418aaf40a56357', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '74eaffc571098a88d69d7248166889671ba441a2', icon: "chevron-right", size: 16 })))), this.description && (h("div", { key: 'd7d2499b7d8da9c09062ea5a456b588e52df2d82', class: "xpl-large-card__description" }, this.description))), h("dd", { key: '652e32e8b200e783f03608f97cbbcc70f59421e3', class: "xpl-large-card__body" }, hasContentSlot && h("slot", { key: '9d9f285d34bd8e2b6666577bd2023ae474636c4c', name: contentSlot }))));
|
|
17
17
|
}
|
|
18
18
|
static get is() { return "xpl-large-card"; }
|
|
19
19
|
static get properties() {
|