@xplortech/apollo-core 1.0.0-beta.7 → 1.0.0-beta.8
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/build/style.css +4 -55
- package/dist/apollo-core/apollo-core.css +5 -5
- package/dist/apollo-core/apollo-core.esm.js +1 -1
- package/dist/apollo-core/p-10f00380.entry.js +1 -0
- package/dist/apollo-core/p-26ec64fe.entry.js +1 -0
- package/dist/apollo-core/p-2f90296c.js +2 -2
- package/dist/apollo-core/p-31acfdb4.entry.js +1 -0
- package/dist/apollo-core/p-4184ac44.entry.js +1 -0
- package/dist/apollo-core/{p-dad11011.entry.js → p-4fa14839.entry.js} +1 -1
- package/dist/apollo-core/p-55b87345.js +2 -0
- package/dist/apollo-core/p-63a6c98a.entry.js +1 -0
- package/dist/apollo-core/p-68c33b77.entry.js +1 -0
- package/dist/apollo-core/{p-a7cc4114.entry.js → p-78d07caf.entry.js} +1 -1
- package/dist/apollo-core/p-796957d3.entry.js +1 -0
- package/dist/apollo-core/p-88160d68.entry.js +1 -0
- package/dist/apollo-core/p-9ec318bb.entry.js +1 -0
- package/dist/apollo-core/p-a2a34e44.entry.js +1 -0
- package/dist/apollo-core/p-beea2502.entry.js +1 -0
- package/dist/apollo-core/p-d499e43f.entry.js +1 -0
- package/dist/apollo-core/{p-c8af4ed6.entry.js → p-d8a3d94c.entry.js} +1 -1
- package/dist/apollo-core/p-e047b446.entry.js +1 -0
- package/dist/cjs/apollo-core.cjs.js +6 -2
- package/dist/cjs/{index-acf3dd7a.js → index-2ab4832e.js} +592 -215
- package/dist/cjs/loader.cjs.js +3 -2
- package/dist/cjs/xpl-application-shell.cjs.entry.js +2 -13
- package/dist/cjs/xpl-avatar_12.cjs.entry.js +72 -38
- package/dist/cjs/xpl-backdrop.cjs.entry.js +1 -5
- package/dist/cjs/xpl-button-row.cjs.entry.js +4 -1
- package/dist/cjs/xpl-choicelist.cjs.entry.js +8 -1
- package/dist/cjs/xpl-divider.cjs.entry.js +2 -1
- package/dist/cjs/xpl-dropdown-group_3.cjs.entry.js +7 -1
- package/dist/cjs/xpl-dropdown_2.cjs.entry.js +8 -9
- 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-input.cjs.entry.js +615 -501
- package/dist/cjs/xpl-list.cjs.entry.js +1 -23
- package/dist/cjs/xpl-main-nav.cjs.entry.js +1 -4
- package/dist/cjs/xpl-pagination.cjs.entry.js +5 -2
- package/dist/cjs/xpl-select.cjs.entry.js +7 -22
- package/dist/cjs/xpl-toggle.cjs.entry.js +7 -4
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/xpl-application-shell/xpl-application-shell.js +118 -132
- package/dist/collection/components/xpl-avatar/xpl-avatar.js +150 -144
- package/dist/collection/components/xpl-backdrop/xpl-backdrop.js +26 -28
- package/dist/collection/components/xpl-badge/xpl-badge.js +43 -39
- package/dist/collection/components/xpl-breadcrumbs/xpl-breadcrumb-item/xpl-breadcrumb-item.js +2 -5
- package/dist/collection/components/xpl-breadcrumbs/xpl-breadcrumbs/xpl-breadcrumbs.js +2 -5
- package/dist/collection/components/xpl-button/xpl-button.js +204 -205
- package/dist/collection/components/xpl-button-row/xpl-button-row.js +105 -104
- package/dist/collection/components/xpl-checkbox/xpl-checkbox.js +181 -171
- package/dist/collection/components/xpl-choicelist/xpl-choicelist.js +133 -126
- package/dist/collection/components/xpl-content-area/xpl-content-area.js +27 -31
- package/dist/collection/components/xpl-divider/xpl-divider.js +26 -23
- package/dist/collection/components/xpl-dropdown/xpl-dropdown-group/xpl-dropdown-group.js +46 -42
- package/dist/collection/components/xpl-dropdown/xpl-dropdown-heading/xpl-dropdown-heading.js +26 -22
- package/dist/collection/components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option.js +60 -54
- package/dist/collection/components/xpl-dropdown/xpl-dropdown.js +170 -167
- package/dist/collection/components/xpl-grid/xpl-grid.js +1 -1
- package/dist/collection/components/xpl-grid-item/xpl-grid-item.js +75 -74
- package/dist/collection/components/xpl-input/xpl-input.js +404 -417
- package/dist/collection/components/xpl-list/xpl-list.js +42 -75
- package/dist/collection/components/xpl-main-nav/xpl-main-nav.js +47 -54
- package/dist/collection/components/xpl-nav-item/xpl-nav-item.js +47 -49
- package/dist/collection/components/xpl-pagination/xpl-pagination.js +116 -128
- package/dist/collection/components/xpl-radio/xpl-radio.js +157 -148
- package/dist/collection/components/xpl-secondary-nav/xpl-secondary-nav.js +2 -4
- package/dist/collection/components/xpl-select/xpl-select.js +212 -238
- package/dist/collection/components/xpl-table/xpl-table.js +168 -151
- package/dist/collection/components/xpl-tag/xpl-tag.js +24 -25
- package/dist/collection/components/xpl-toggle/xpl-toggle.js +137 -135
- package/dist/collection/components/xpl-utility-bar/xpl-utility-bar.js +73 -70
- package/dist/custom-elements/index.js +756 -641
- package/dist/esm/apollo-core.js +3 -2
- package/dist/esm/{index-e3c4bb97.js → index-392b5b96.js} +592 -216
- package/dist/esm/loader.js +3 -2
- package/dist/esm/polyfills/css-shim.js +1 -1
- package/dist/esm/xpl-application-shell.entry.js +2 -13
- package/dist/esm/xpl-avatar_12.entry.js +72 -38
- package/dist/esm/xpl-backdrop.entry.js +1 -5
- package/dist/esm/xpl-button-row.entry.js +4 -1
- package/dist/esm/xpl-choicelist.entry.js +8 -1
- package/dist/esm/xpl-divider.entry.js +2 -1
- package/dist/esm/xpl-dropdown-group_3.entry.js +7 -1
- package/dist/esm/xpl-dropdown_2.entry.js +8 -9
- package/dist/esm/xpl-grid-item.entry.js +1 -1
- package/dist/esm/xpl-grid.entry.js +1 -1
- package/dist/esm/xpl-input.entry.js +615 -501
- package/dist/esm/xpl-list.entry.js +1 -23
- package/dist/esm/xpl-main-nav.entry.js +1 -4
- package/dist/esm/xpl-pagination.entry.js +5 -2
- package/dist/esm/xpl-select.entry.js +7 -22
- package/dist/esm/xpl-toggle.entry.js +7 -4
- package/dist/types/components/xpl-dropdown/dropdownoption.d.ts +1 -1
- package/dist/types/components/xpl-table/xpl-table.d.ts +2 -0
- package/dist/types/components.d.ts +47 -11
- package/dist/types/stencil-public-runtime.d.ts +85 -11
- package/loader/index.d.ts +9 -1
- package/loader/package.json +1 -0
- package/package.json +1 -1
- package/dist/apollo-core/p-25f84d39.entry.js +0 -1
- package/dist/apollo-core/p-2ce2fe5c.entry.js +0 -1
- package/dist/apollo-core/p-3ff1ff38.entry.js +0 -1
- package/dist/apollo-core/p-63dd9a65.entry.js +0 -1
- package/dist/apollo-core/p-6c3c1e3d.entry.js +0 -1
- package/dist/apollo-core/p-81a6ce4c.entry.js +0 -1
- package/dist/apollo-core/p-918b0731.entry.js +0 -1
- package/dist/apollo-core/p-a43e2d1f.entry.js +0 -1
- package/dist/apollo-core/p-b6d1b135.entry.js +0 -1
- package/dist/apollo-core/p-bc0ebed2.entry.js +0 -1
- package/dist/apollo-core/p-d4aa2fa9.js +0 -1
- package/dist/apollo-core/p-d4e5d3aa.entry.js +0 -1
- package/dist/apollo-core/p-db74c99c.entry.js +0 -1
- package/dist/apollo-core/p-ee16942f.entry.js +0 -1
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/application-shell.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/avatar.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/backdrop.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/badge.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/breadcrumbs.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/button-row.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/button.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/checkbox.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/choicelist.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/content-area.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/divider.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/dropdown.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/grid.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/input.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/list.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/main-nav.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/pagination.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/radio.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/secondary-nav.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/select.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/table.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/tabs.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/toggle.stories.d.ts +0 -0
- /package/dist/types/Users/{roc/Sites → fernandogelin/Xplor}/apollo/.stencil/stories/utility-bar.stories.d.ts +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, F as Fragment } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host, F as Fragment } from './index-392b5b96.js';
|
|
2
2
|
import './regular-86225e9d.js';
|
|
3
3
|
|
|
4
4
|
const ListItemCpt = ({ avatar, avatars, badges, href, title, subtext, metadata, }) => {
|
|
@@ -25,28 +25,6 @@ const ListItemCpt = ({ avatar, avatars, badges, href, title, subtext, metadata,
|
|
|
25
25
|
const XplList = class {
|
|
26
26
|
constructor(hostRef) {
|
|
27
27
|
registerInstance(this, hostRef);
|
|
28
|
-
/**
|
|
29
|
-
* `items` should be an array of objects with the following signature:
|
|
30
|
-
* {
|
|
31
|
-
* avatar?: string; // The URL of the avatar, or the placeholder initials (ex. "SPD").
|
|
32
|
-
* avatars?: string[]; // The URLs of multiple avatars to be displayed in a group on the right.
|
|
33
|
-
* badges?: string[] | { // An array of strings or badge-like objects to be displayed as badges
|
|
34
|
-
* dot?: boolean; // in a group on the right. See <xpl-badge> for more details.
|
|
35
|
-
* text: string;
|
|
36
|
-
* variant?: string;
|
|
37
|
-
* }[];
|
|
38
|
-
* href?: string; // A URL, if this list item is meant to link somewhere.
|
|
39
|
-
* title: string; // The text to be displayed for the list item.
|
|
40
|
-
* metadata?: string[] | { // An array of strings or strings with icons (reference the allowed
|
|
41
|
-
* icon: string; // Font Awesome icons) to be displayed as metadata below the title.
|
|
42
|
-
* text: string;
|
|
43
|
-
* }[];
|
|
44
|
-
* subtext?: string; // Subtext to be displayed on the right.
|
|
45
|
-
* }
|
|
46
|
-
*
|
|
47
|
-
* - Note that you should *only use one of* `avatars`, `badges`, or `subtext`, to avoid cluttering
|
|
48
|
-
* the right-hand side of the list item.
|
|
49
|
-
*/
|
|
50
28
|
this.items = [];
|
|
51
29
|
}
|
|
52
30
|
render() {
|
|
@@ -1,12 +1,9 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host } from './index-392b5b96.js';
|
|
2
2
|
|
|
3
3
|
const XplMainNav = class {
|
|
4
4
|
constructor(hostRef) {
|
|
5
5
|
registerInstance(this, hostRef);
|
|
6
6
|
this.navWidth = createEvent(this, "navWidth", 7);
|
|
7
|
-
/**
|
|
8
|
-
* @property {string} width - The width of the Main Nav.
|
|
9
|
-
*/
|
|
10
7
|
this.width = 'default';
|
|
11
8
|
}
|
|
12
9
|
navWidthHandler() {
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host } from './index-392b5b96.js';
|
|
2
2
|
|
|
3
3
|
const XplPagination = class {
|
|
4
4
|
constructor(hostRef) {
|
|
5
5
|
registerInstance(this, hostRef);
|
|
6
6
|
this.page = createEvent(this, "page", 7);
|
|
7
|
-
this.current = 1;
|
|
8
7
|
/**
|
|
9
8
|
* Private `_goto` method respects the `waitForCallback` prop --
|
|
10
9
|
* it will always emit the `page` event, but won't actually update
|
|
@@ -26,6 +25,10 @@ const XplPagination = class {
|
|
|
26
25
|
if (this.current < numPages)
|
|
27
26
|
this._goto(this.current + 1);
|
|
28
27
|
};
|
|
28
|
+
this.total = undefined;
|
|
29
|
+
this.perPage = undefined;
|
|
30
|
+
this.waitForCallback = undefined;
|
|
31
|
+
this.current = 1;
|
|
29
32
|
}
|
|
30
33
|
/**
|
|
31
34
|
* Calling `goto` with a page number (which should probably be
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host } from './index-392b5b96.js';
|
|
2
2
|
import { v as v4 } from './v4-929670b7.js';
|
|
3
3
|
|
|
4
4
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
@@ -452,35 +452,20 @@ function tagWidth(text) {
|
|
|
452
452
|
const XplSelect = class {
|
|
453
453
|
constructor(hostRef) {
|
|
454
454
|
registerInstance(this, hostRef);
|
|
455
|
-
/**
|
|
456
|
-
* An array of choices for the user to choose from.
|
|
457
|
-
* Each choice should be of the form:
|
|
458
|
-
* {
|
|
459
|
-
* label: string;
|
|
460
|
-
* href?: string;
|
|
461
|
-
* value?: string;
|
|
462
|
-
* isGroupHeading?: boolean;
|
|
463
|
-
* }
|
|
464
|
-
*/
|
|
465
455
|
this.choices = [];
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
456
|
+
this.description = undefined;
|
|
457
|
+
this.disabled = undefined;
|
|
458
|
+
this.error = undefined;
|
|
459
|
+
this.label = undefined;
|
|
469
460
|
this.mode = 'single';
|
|
470
|
-
|
|
471
|
-
* Only used in multi-choice selects. If `true`,
|
|
472
|
-
* badges representing selections that would overflow the
|
|
473
|
-
* container are replaced with "+x more" (where x is the
|
|
474
|
-
* number not shown). If `false`, the container's height will
|
|
475
|
-
* adjust to show all badges representing selections.
|
|
476
|
-
*/
|
|
461
|
+
this.placeholder = undefined;
|
|
477
462
|
this.truncate = true;
|
|
478
463
|
this.active = false;
|
|
479
464
|
this.id = v4();
|
|
480
465
|
this.keepFocus = false;
|
|
466
|
+
this.selected = undefined;
|
|
481
467
|
this.value = '';
|
|
482
468
|
this.displayValue = '';
|
|
483
|
-
// infinity isn't real, it's just a mathematical construct, it can't hurt you
|
|
484
469
|
this.visibleChoices = Infinity;
|
|
485
470
|
}
|
|
486
471
|
componentWillLoad() {
|
|
@@ -1,12 +1,15 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host } from './index-392b5b96.js';
|
|
2
2
|
import { v as v4 } from './v4-929670b7.js';
|
|
3
3
|
|
|
4
4
|
const XplToggle = class {
|
|
5
5
|
constructor(hostRef) {
|
|
6
6
|
registerInstance(this, hostRef);
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
this.checked = undefined;
|
|
8
|
+
this.description = undefined;
|
|
9
|
+
this.disabled = undefined;
|
|
10
|
+
this.heading = undefined;
|
|
11
|
+
this.label = undefined;
|
|
12
|
+
this.name = undefined;
|
|
10
13
|
this.variant = 'default';
|
|
11
14
|
this.id = v4();
|
|
12
15
|
}
|
|
@@ -3,7 +3,7 @@ export interface DropdownOption {
|
|
|
3
3
|
isSelected?: boolean;
|
|
4
4
|
isDisabled?: boolean;
|
|
5
5
|
}
|
|
6
|
-
export
|
|
6
|
+
export type DropdownItem = Partial<DropdownOption & DropdownOptionGroup>;
|
|
7
7
|
export interface DropdownOptionGroup {
|
|
8
8
|
groupName: string;
|
|
9
9
|
options: DropdownItem[];
|
|
@@ -400,6 +400,42 @@ export namespace Components {
|
|
|
400
400
|
"navControl"?: boolean;
|
|
401
401
|
}
|
|
402
402
|
}
|
|
403
|
+
export interface XplButtonRowCustomEvent<T> extends CustomEvent<T> {
|
|
404
|
+
detail: T;
|
|
405
|
+
target: HTMLXplButtonRowElement;
|
|
406
|
+
}
|
|
407
|
+
export interface XplCheckboxCustomEvent<T> extends CustomEvent<T> {
|
|
408
|
+
detail: T;
|
|
409
|
+
target: HTMLXplCheckboxElement;
|
|
410
|
+
}
|
|
411
|
+
export interface XplMainNavCustomEvent<T> extends CustomEvent<T> {
|
|
412
|
+
detail: T;
|
|
413
|
+
target: HTMLXplMainNavElement;
|
|
414
|
+
}
|
|
415
|
+
export interface XplNavItemCustomEvent<T> extends CustomEvent<T> {
|
|
416
|
+
detail: T;
|
|
417
|
+
target: HTMLXplNavItemElement;
|
|
418
|
+
}
|
|
419
|
+
export interface XplPaginationCustomEvent<T> extends CustomEvent<T> {
|
|
420
|
+
detail: T;
|
|
421
|
+
target: HTMLXplPaginationElement;
|
|
422
|
+
}
|
|
423
|
+
export interface XplRadioCustomEvent<T> extends CustomEvent<T> {
|
|
424
|
+
detail: T;
|
|
425
|
+
target: HTMLXplRadioElement;
|
|
426
|
+
}
|
|
427
|
+
export interface XplTableCustomEvent<T> extends CustomEvent<T> {
|
|
428
|
+
detail: T;
|
|
429
|
+
target: HTMLXplTableElement;
|
|
430
|
+
}
|
|
431
|
+
export interface XplTagCustomEvent<T> extends CustomEvent<T> {
|
|
432
|
+
detail: T;
|
|
433
|
+
target: HTMLXplTagElement;
|
|
434
|
+
}
|
|
435
|
+
export interface XplUtilityBarCustomEvent<T> extends CustomEvent<T> {
|
|
436
|
+
detail: T;
|
|
437
|
+
target: HTMLXplUtilityBarElement;
|
|
438
|
+
}
|
|
403
439
|
declare global {
|
|
404
440
|
interface HTMLXplApplicationShellElement extends Components.XplApplicationShell, HTMLStencilElement {
|
|
405
441
|
}
|
|
@@ -704,15 +740,15 @@ declare namespace LocalJSX {
|
|
|
704
740
|
/**
|
|
705
741
|
* Fires on the primary button. If not set, the button can act as a standard submit button for a form.
|
|
706
742
|
*/
|
|
707
|
-
"onClickPrimary"?: (event:
|
|
743
|
+
"onClickPrimary"?: (event: XplButtonRowCustomEvent<any>) => void;
|
|
708
744
|
/**
|
|
709
745
|
* Adds an event listener to the secondary button.
|
|
710
746
|
*/
|
|
711
|
-
"onClickSecondary"?: (event:
|
|
747
|
+
"onClickSecondary"?: (event: XplButtonRowCustomEvent<any>) => void;
|
|
712
748
|
/**
|
|
713
749
|
* Adds an event listener to the tertiary button.
|
|
714
750
|
*/
|
|
715
|
-
"onClickTertiary"?: (event:
|
|
751
|
+
"onClickTertiary"?: (event: XplButtonRowCustomEvent<any>) => void;
|
|
716
752
|
/**
|
|
717
753
|
* The text for the primary button.
|
|
718
754
|
*/
|
|
@@ -735,7 +771,7 @@ declare namespace LocalJSX {
|
|
|
735
771
|
/**
|
|
736
772
|
* @private
|
|
737
773
|
*/
|
|
738
|
-
"onCheckboxChange"?: (event:
|
|
774
|
+
"onCheckboxChange"?: (event: XplCheckboxCustomEvent<any>) => void;
|
|
739
775
|
"required"?: boolean;
|
|
740
776
|
"styled"?: boolean;
|
|
741
777
|
"value"?: string;
|
|
@@ -921,7 +957,7 @@ declare namespace LocalJSX {
|
|
|
921
957
|
/**
|
|
922
958
|
* @event {string} navWidth - Emits the `nav-width` prop set by the user when the component is attached to the DOM and when the component is updated.
|
|
923
959
|
*/
|
|
924
|
-
"onNavWidth"?: (event:
|
|
960
|
+
"onNavWidth"?: (event: XplMainNavCustomEvent<string>) => void;
|
|
925
961
|
/**
|
|
926
962
|
* @property {string} width - The width of the Main Nav.
|
|
927
963
|
*/
|
|
@@ -935,10 +971,10 @@ declare namespace LocalJSX {
|
|
|
935
971
|
/**
|
|
936
972
|
* @event {boolean} - Emits the desired state of the navigation bar (open: true/false)
|
|
937
973
|
*/
|
|
938
|
-
"onNavOpen"?: (event:
|
|
974
|
+
"onNavOpen"?: (event: XplNavItemCustomEvent<boolean>) => void;
|
|
939
975
|
}
|
|
940
976
|
interface XplPagination {
|
|
941
|
-
"onPage"?: (event:
|
|
977
|
+
"onPage"?: (event: XplPaginationCustomEvent<any>) => void;
|
|
942
978
|
"perPage"?: number;
|
|
943
979
|
"total"?: number;
|
|
944
980
|
"waitForCallback"?: boolean;
|
|
@@ -951,7 +987,7 @@ declare namespace LocalJSX {
|
|
|
951
987
|
/**
|
|
952
988
|
* @private
|
|
953
989
|
*/
|
|
954
|
-
"onRadioChange"?: (event:
|
|
990
|
+
"onRadioChange"?: (event: XplRadioCustomEvent<any>) => void;
|
|
955
991
|
"required"?: boolean;
|
|
956
992
|
"styled"?: boolean;
|
|
957
993
|
"value"?: string;
|
|
@@ -988,11 +1024,11 @@ declare namespace LocalJSX {
|
|
|
988
1024
|
"data"?: string[][];
|
|
989
1025
|
"freeze"?: boolean;
|
|
990
1026
|
"multiselect"?: boolean;
|
|
991
|
-
"onTableSelect"?: (event:
|
|
1027
|
+
"onTableSelect"?: (event: XplTableCustomEvent<any>) => void;
|
|
992
1028
|
"striped"?: boolean;
|
|
993
1029
|
}
|
|
994
1030
|
interface XplTag {
|
|
995
|
-
"onClose"?: (event:
|
|
1031
|
+
"onClose"?: (event: XplTagCustomEvent<any>) => void;
|
|
996
1032
|
}
|
|
997
1033
|
interface XplToggle {
|
|
998
1034
|
"checked"?: boolean;
|
|
@@ -1027,7 +1063,7 @@ declare namespace LocalJSX {
|
|
|
1027
1063
|
/**
|
|
1028
1064
|
* @event {boolean} - Emits the desired state of the navigation bar (open: true/false)
|
|
1029
1065
|
*/
|
|
1030
|
-
"onNavOpen"?: (event:
|
|
1066
|
+
"onNavOpen"?: (event: XplUtilityBarCustomEvent<boolean>) => void;
|
|
1031
1067
|
}
|
|
1032
1068
|
interface IntrinsicElements {
|
|
1033
1069
|
"xpl-application-shell": XplApplicationShell;
|
|
@@ -133,7 +133,7 @@ export interface ListenOptions {
|
|
|
133
133
|
*/
|
|
134
134
|
passive?: boolean;
|
|
135
135
|
}
|
|
136
|
-
export
|
|
136
|
+
export type ListenTargetOptions = 'body' | 'document' | 'window';
|
|
137
137
|
export interface StateDecorator {
|
|
138
138
|
(): PropertyDecorator;
|
|
139
139
|
}
|
|
@@ -214,14 +214,16 @@ export declare const State: StateDecorator;
|
|
|
214
214
|
* https://stenciljs.com/docs/reactive-data#watch-decorator
|
|
215
215
|
*/
|
|
216
216
|
export declare const Watch: WatchDecorator;
|
|
217
|
-
export
|
|
218
|
-
export
|
|
217
|
+
export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
|
|
218
|
+
export type ErrorHandler = (err: any, element?: HTMLElement) => void;
|
|
219
219
|
/**
|
|
220
220
|
* `setMode()` is used for libraries which provide multiple "modes" for styles.
|
|
221
221
|
*/
|
|
222
222
|
export declare const setMode: (handler: ResolutionHandler) => void;
|
|
223
223
|
/**
|
|
224
|
-
* getMode
|
|
224
|
+
* `getMode()` is used for libraries which provide multiple "modes" for styles.
|
|
225
|
+
* @param ref a reference to the node to get styles for
|
|
226
|
+
* @returns the current mode or undefined, if not found
|
|
225
227
|
*/
|
|
226
228
|
export declare function getMode<T = string | undefined>(ref: any): T;
|
|
227
229
|
export declare function setPlatformHelpers(helpers: {
|
|
@@ -234,6 +236,9 @@ export declare function setPlatformHelpers(helpers: {
|
|
|
234
236
|
/**
|
|
235
237
|
* Get the base path to where the assets can be found. Use `setAssetPath(path)`
|
|
236
238
|
* if the path needs to be customized.
|
|
239
|
+
* @param path the path to use in calculating the asset path. this value will be
|
|
240
|
+
* used in conjunction with the base asset path
|
|
241
|
+
* @returns the base path
|
|
237
242
|
*/
|
|
238
243
|
export declare function getAssetPath(path: string): string;
|
|
239
244
|
/**
|
|
@@ -246,22 +251,38 @@ export declare function getAssetPath(path: string): string;
|
|
|
246
251
|
* `setAssetPath(document.currentScript.src)`, or using a bundler's replace plugin to
|
|
247
252
|
* dynamically set the path at build time, such as `setAssetPath(process.env.ASSET_PATH)`.
|
|
248
253
|
* But do note that this configuration depends on how your script is bundled, or lack of
|
|
249
|
-
*
|
|
254
|
+
* bundling, and where your assets can be loaded from. Additionally custom bundling
|
|
250
255
|
* will have to ensure the static assets are copied to its build directory.
|
|
256
|
+
* @param path the asset path to set
|
|
257
|
+
* @returns the set path
|
|
251
258
|
*/
|
|
252
259
|
export declare function setAssetPath(path: string): string;
|
|
253
260
|
/**
|
|
254
|
-
*
|
|
261
|
+
* Used to specify a nonce value that corresponds with an application's
|
|
262
|
+
* [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
|
|
263
|
+
* When set, the nonce will be added to all dynamically created script and style tags at runtime.
|
|
264
|
+
* Alternatively, the nonce value can be set on a `meta` tag in the DOM head
|
|
265
|
+
* (<meta name="csp-nonce" content="{ nonce value here }" />) and will result in the same behavior.
|
|
266
|
+
* @param nonce The value to be used for the nonce attribute.
|
|
267
|
+
*/
|
|
268
|
+
export declare function setNonce(nonce: string): void;
|
|
269
|
+
/**
|
|
270
|
+
* Retrieve a Stencil element for a given reference
|
|
271
|
+
* @param ref the ref to get the Stencil element for
|
|
272
|
+
* @returns a reference to the element
|
|
255
273
|
*/
|
|
256
274
|
export declare function getElement(ref: any): HTMLStencilElement;
|
|
257
275
|
/**
|
|
258
276
|
* Schedules a new render of the given instance or element even if no state changed.
|
|
259
277
|
*
|
|
260
|
-
* Notice `forceUpdate()` is not
|
|
278
|
+
* Notice `forceUpdate()` is not synchronous and might perform the DOM render in the next frame.
|
|
279
|
+
*
|
|
280
|
+
* @param ref the node/element to force the re-render of
|
|
261
281
|
*/
|
|
262
282
|
export declare function forceUpdate(ref: any): void;
|
|
263
283
|
/**
|
|
264
284
|
* getRenderingRef
|
|
285
|
+
* @returns the rendering ref
|
|
265
286
|
*/
|
|
266
287
|
export declare function getRenderingRef(): any;
|
|
267
288
|
export interface HTMLStencilElement extends HTMLElement {
|
|
@@ -272,6 +293,8 @@ export interface HTMLStencilElement extends HTMLElement {
|
|
|
272
293
|
* in the best moment to perform DOM mutation without causing layout thrashing.
|
|
273
294
|
*
|
|
274
295
|
* For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
|
|
296
|
+
*
|
|
297
|
+
* @param task the DOM-write to schedule
|
|
275
298
|
*/
|
|
276
299
|
export declare function writeTask(task: RafCallback): void;
|
|
277
300
|
/**
|
|
@@ -279,6 +302,8 @@ export declare function writeTask(task: RafCallback): void;
|
|
|
279
302
|
* in the best moment to perform DOM reads without causing layout thrashing.
|
|
280
303
|
*
|
|
281
304
|
* For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
|
|
305
|
+
*
|
|
306
|
+
* @param task the DOM-read to schedule
|
|
282
307
|
*/
|
|
283
308
|
export declare function readTask(task: RafCallback): void;
|
|
284
309
|
/**
|
|
@@ -417,13 +442,57 @@ interface HostAttributes {
|
|
|
417
442
|
ref?: (el: HTMLElement | null) => void;
|
|
418
443
|
[prop: string]: any;
|
|
419
444
|
}
|
|
445
|
+
/**
|
|
446
|
+
* Utilities for working with functional Stencil components. An object
|
|
447
|
+
* conforming to this interface is passed by the Stencil runtime as the third
|
|
448
|
+
* argument to a functional component, allowing component authors to work with
|
|
449
|
+
* features like children.
|
|
450
|
+
*
|
|
451
|
+
* The children of a functional component will be passed as the second
|
|
452
|
+
* argument, so a functional component which uses these utils to transform its
|
|
453
|
+
* children might look like the following:
|
|
454
|
+
*
|
|
455
|
+
* ```ts
|
|
456
|
+
* export const AddClass: FunctionalComponent = (_, children, utils) => (
|
|
457
|
+
* utils.map(children, child => ({
|
|
458
|
+
* ...child,
|
|
459
|
+
* vattrs: {
|
|
460
|
+
* ...child.vattrs,
|
|
461
|
+
* class: `${child.vattrs.class} add-class`
|
|
462
|
+
* }
|
|
463
|
+
* }))
|
|
464
|
+
* );
|
|
465
|
+
* ```
|
|
466
|
+
*
|
|
467
|
+
* For more see the Stencil documentation, here:
|
|
468
|
+
* https://stenciljs.com/docs/functional-components
|
|
469
|
+
*/
|
|
420
470
|
export interface FunctionalUtilities {
|
|
471
|
+
/**
|
|
472
|
+
* Utility for reading the children of a functional component at runtime.
|
|
473
|
+
* Since the Stencil runtime uses a different interface for children it is
|
|
474
|
+
* not recommendeded to read the children directly, and is preferable to use
|
|
475
|
+
* this utility to, for instance, perform a side effect for each child.
|
|
476
|
+
*/
|
|
421
477
|
forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
|
|
478
|
+
/**
|
|
479
|
+
* Utility for transforming the children of a functional component. Given an
|
|
480
|
+
* array of children and a callback this will return a list of the results of
|
|
481
|
+
* passing each child to the supplied callback.
|
|
482
|
+
*/
|
|
422
483
|
map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
|
|
423
484
|
}
|
|
424
485
|
export interface FunctionalComponent<T = {}> {
|
|
425
486
|
(props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[];
|
|
426
487
|
}
|
|
488
|
+
/**
|
|
489
|
+
* A Child VDOM node
|
|
490
|
+
*
|
|
491
|
+
* This has most of the same properties as {@link VNode} but friendlier names
|
|
492
|
+
* (i.e. `vtag` instead of `$tag$`, `vchildren` instead of `$children$`) in
|
|
493
|
+
* order to provide a friendlier public interface for users of the
|
|
494
|
+
* {@link FunctionalUtilities}).
|
|
495
|
+
*/
|
|
427
496
|
export interface ChildNode {
|
|
428
497
|
vtag?: string | number | Function;
|
|
429
498
|
vkey?: string | number;
|
|
@@ -470,6 +539,9 @@ export declare function h(sel: any, children: Array<VNode | undefined | null>):
|
|
|
470
539
|
export declare function h(sel: any, data: VNodeData | null, text: string): VNode;
|
|
471
540
|
export declare function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
|
|
472
541
|
export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
|
|
542
|
+
/**
|
|
543
|
+
* A virtual DOM node
|
|
544
|
+
*/
|
|
473
545
|
export interface VNode {
|
|
474
546
|
$flags$: number;
|
|
475
547
|
$tag$: string | number | Function;
|
|
@@ -666,7 +738,7 @@ export declare namespace JSXBase {
|
|
|
666
738
|
use: JSXBase.SVGAttributes;
|
|
667
739
|
view: JSXBase.SVGAttributes;
|
|
668
740
|
}
|
|
669
|
-
interface SlotAttributes {
|
|
741
|
+
interface SlotAttributes extends JSXAttributes {
|
|
670
742
|
name?: string;
|
|
671
743
|
slot?: string;
|
|
672
744
|
onSlotchange?: (event: Event) => void;
|
|
@@ -1427,9 +1499,7 @@ export declare namespace JSXBase {
|
|
|
1427
1499
|
z?: number | string;
|
|
1428
1500
|
zoomAndPan?: string;
|
|
1429
1501
|
}
|
|
1430
|
-
interface DOMAttributes<T
|
|
1431
|
-
key?: string | number;
|
|
1432
|
-
ref?: (elm?: T) => void;
|
|
1502
|
+
interface DOMAttributes<T> extends JSXAttributes<T> {
|
|
1433
1503
|
slot?: string;
|
|
1434
1504
|
part?: string;
|
|
1435
1505
|
exportparts?: string;
|
|
@@ -1550,6 +1620,10 @@ export declare namespace JSXBase {
|
|
|
1550
1620
|
onTransitionEndCapture?: (event: TransitionEvent) => void;
|
|
1551
1621
|
}
|
|
1552
1622
|
}
|
|
1623
|
+
export interface JSXAttributes<T = Element> {
|
|
1624
|
+
key?: string | number;
|
|
1625
|
+
ref?: (elm?: T) => void;
|
|
1626
|
+
}
|
|
1553
1627
|
export interface CustomElementsDefineOptions {
|
|
1554
1628
|
exclude?: string[];
|
|
1555
1629
|
resourcesUrl?: string;
|
package/loader/index.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
|
|
2
1
|
export * from '../dist/types/components';
|
|
3
2
|
export interface CustomElementsDefineOptions {
|
|
4
3
|
exclude?: string[];
|
|
@@ -11,3 +10,12 @@ export interface CustomElementsDefineOptions {
|
|
|
11
10
|
}
|
|
12
11
|
export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
|
|
13
12
|
export declare function applyPolyfills(): Promise<void>;
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Used to specify a nonce value that corresponds with an application's CSP.
|
|
16
|
+
* When set, the nonce will be added to all dynamically created script and style tags at runtime.
|
|
17
|
+
* Alternatively, the nonce value can be set on a meta tag in the DOM head
|
|
18
|
+
* (<meta name="csp-nonce" content="{ nonce value here }" />) which
|
|
19
|
+
* will result in the same behavior.
|
|
20
|
+
*/
|
|
21
|
+
export declare function setNonce(nonce: string): void;
|
package/loader/package.json
CHANGED
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as l,h as i,H as s}from"./p-d4aa2fa9.js";const t=class{constructor(i){l(this,i),this.withSubnav=!1,this.withUtility=!0,this.navWidth="default",this.navOpen=!0}closeNavOnMobile(){window.innerWidth<=640&&(this.navOpen=!1)}navToggleHandler(){this.navOpen=!this.navOpen}navWithHandler(l){this.navWidth=l.detail}onWindowResize(){this.closeNavOnMobile()}connectedCallback(){this.closeNavOnMobile()}componentWillLoad(){this.navOpen=void 0!==this.isNavOpenAtStartup?this.isNavOpenAtStartup:this.navOpen}render(){let l="xpl-application-shell";this.withUtility&&(l+=" xpl-application-shell--with_utility");let t="xpl-application-shell__nav";return t+=this.navOpen?` xpl-application-shell__nav--${this.navWidth}--open`:` xpl-application-shell__nav--${this.navWidth}`,i(s,{class:l},i("div",{class:t},i("slot",{name:"nav"})),i("div",{class:"xpl-application-shell__subnav"},i("slot",{name:"subnav"})),i("div",{class:"xpl-application-shell__utility"},i("slot",{name:"utility"})),i("div",{class:"xpl-application-shell__content"},i("slot",{name:"content"})),i("xpl-backdrop",{onClick:()=>this.navToggleHandler(),class:{"xpl-application-shell__backdrop--open":this.navOpen},relative:!0}))}};export{t as xpl_application_shell}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as s,h as i,H as o}from"./p-d4aa2fa9.js";const r=class{constructor(i){t(this,i),this.clickPrimary=s(this,"clickPrimary",7),this.clickSecondary=s(this,"clickSecondary",7),this.clickTertiary=s(this,"clickTertiary",7),this.onPrimary=()=>this.clickPrimary.emit(),this.onSecondary=()=>this.clickSecondary.emit(),this.onTertiary=()=>this.clickTertiary.emit()}render(){return i(o,{class:"xpl-button-row"},i("div",{class:"xpl-button-row-inner"},i("div",{class:"xpl-button-row__left"},this.secondary&&i("xpl-button",{variant:"secondary",type:"button",onClick:this.onSecondary},this.secondary)),i("div",{class:"xpl-button-row__right"},this.tertiary&&i("xpl-button",{variant:"subtle",type:"button",onClick:this.onTertiary},this.tertiary),this.secondary&&i("xpl-button",{variant:"secondary",type:"button",onClick:this.onSecondary},this.secondary),this.primary&&i("xpl-button",{class:"xpl-button-row__primary",onClick:this.onPrimary},this.primary))))}};export{r as xpl_button_row}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as s,h as t,H as l}from"./p-d4aa2fa9.js";import{v as i}from"./p-ad90fe4d.js";const e=class{constructor(t){s(this,t),this.variant="default",this.id=i()}render(){let s="xpl-toggle-container";this.disabled&&(s+=" xpl-toggle-container--disabled");let i="xpl-toggle";return"small"===this.variant&&(i+=" xpl-toggle--small"),t(l,{class:s},(this.heading||this.description)&&t("label",{class:{"xpl-label":!0,"xpl-label--disabled":this.disabled},htmlFor:this.id},this.heading,this.description&&t("small",{class:{"xpl-description":!0,"xpl-description--disabled":this.disabled}},this.description)),t("input",{class:i,type:"checkbox",checked:this.checked,disabled:this.disabled,id:this.id,name:this.name}),this.label&&t("label",{htmlFor:this.id},this.label))}};export{e as xpl_toggle}
|