@nanoporetech-digital/components 8.11.2 → 8.11.4
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/dist/cjs/nano-avatar_5.cjs.entry.js +3 -0
- package/dist/cjs/nano-datalist_3.cjs.entry.js +5 -5
- package/dist/cjs/nano-masked-overflow.cjs.entry.js +7 -5
- package/dist/collection/components/badge/badge.css +42 -0
- package/dist/collection/components/badge/badge.js +10 -0
- package/dist/collection/components/breadcrumb/breadcrumb.js +1 -1
- package/dist/collection/components/datalist/datalist.js +9 -5
- package/dist/collection/components/masked-overflow/masked-overflow.js +7 -5
- package/dist/components/badge.js +3 -0
- package/dist/components/datalist.js +5 -5
- package/dist/components/masked-overflow.js +7 -5
- package/dist/esm/nano-avatar_5.entry.js +3 -0
- package/dist/esm/nano-datalist_3.entry.js +5 -5
- package/dist/esm/nano-masked-overflow.entry.js +7 -5
- package/dist/nano-components/nano-avatar_5.entry.js +1 -1
- package/dist/nano-components/nano-components.css +31 -20
- package/dist/nano-components/nano-datalist_3.entry.js +1 -1
- package/dist/nano-components/nano-masked-overflow.entry.js +1 -1
- package/dist/style/components.css +1 -1
- package/dist/style/components.css.map +1 -1
- package/dist/style/nano.css +1 -1
- package/dist/style/nano.css.map +1 -1
- package/dist/types/components/datalist/datalist.d.ts +4 -0
- package/docs-json.json +29 -6
- package/hydrate/index.js +19 -10
- package/hydrate/index.mjs +19 -10
- package/package.json +2 -2
- /package/dist/types/builds/{-v_1b6Vq → scdfPYwW}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/generate-vue-component.d.ts +0 -0
- /package/dist/types/builds/{-v_1b6Vq → scdfPYwW}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/index.d.ts +0 -0
- /package/dist/types/builds/{-v_1b6Vq → scdfPYwW}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/output-vue.d.ts +0 -0
- /package/dist/types/builds/{-v_1b6Vq → scdfPYwW}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/plugin.d.ts +0 -0
- /package/dist/types/builds/{-v_1b6Vq → scdfPYwW}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/types.d.ts +0 -0
- /package/dist/types/builds/{-v_1b6Vq → scdfPYwW}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/utils.d.ts +0 -0
- /package/dist/types/builds/{-v_1b6Vq → scdfPYwW}/0/Digital/nano-components/packages/components/.stencil/stencil.config.d.ts +0 -0
- /package/dist/types/builds/{-v_1b6Vq → scdfPYwW}/0/Digital/nano-components/packages/components/.stencil/stencil.config.prod.d.ts +0 -0
- /package/dist/types/builds/{-v_1b6Vq → scdfPYwW}/0/Digital/nano-components/packages/components/.stencil/testing/mocks/intersection-observer.d.ts +0 -0
- /package/dist/types/builds/{-v_1b6Vq → scdfPYwW}/0/Digital/nano-components/packages/components/.stencil/wdio.conf.d.ts +0 -0
|
@@ -30,6 +30,8 @@ const NanoAvatar = class {
|
|
|
30
30
|
};
|
|
31
31
|
NanoAvatar.style = avatarCss;
|
|
32
32
|
|
|
33
|
+
const badgeCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";
|
|
34
|
+
|
|
33
35
|
const NanoBadge = class {
|
|
34
36
|
constructor(hostRef) {
|
|
35
37
|
index.registerInstance(this, hostRef);
|
|
@@ -41,6 +43,7 @@ const NanoBadge = class {
|
|
|
41
43
|
/** Use pulse to draw attention to the badge with an animation */
|
|
42
44
|
pulse;
|
|
43
45
|
};
|
|
46
|
+
NanoBadge.style = badgeCss;
|
|
44
47
|
|
|
45
48
|
const drawerCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--size:25rem;--min-size:25rem;--max-size:50%;--panel-background:var(--nano-color-surface-300);--panel-shadow:var(--nano-shadow-l3);--scrim-color:var(--nano-overlay-background-color);--header-button-color:var(--nano-color-primary-1200);--header-button-size:1.375rem;--footer-background:var(--panel-background);--header-background:var(--panel-background);--header-spacing:var(--nano-spacing-l) var(--nano-spacing-l1-default);--body-spacing:var(--nano-spacing-l1-default);--footer-spacing:var(--nano-spacing-l) var(--nano-spacing-l1-default);--dir:1}:host([placement=top]),:host([placement=bottom]){--max-size:80%}:host(:dir(rtl)){--dir:-1}:host-context([dir=rtl]){--dir:-1}.drawer{inset-block-start:0;inset-inline-start:0;pointer-events:none;overflow:hidden;border:none;inline-size:100%;block-size:100%;color:unset;background-color:unset}.drawer::backdrop{display:none}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--nano-z-index-modal)}.drawer__panel{position:absolute;max-inline-size:100%;max-block-size:100%;background-color:var(--panel-background);box-shadow:var(--panel-shadow);pointer-events:all;transition:var(--nano-transition-fast) opacity, var(--nano-transition-fast) transform;display:flex}.drawer--top .drawer__panel,.drawer--bottom .drawer__panel{flex-direction:column}@media (forced-colors: active){.drawer__panel{border:solid 1px var(--nano-color-base-1000)}}.drawer__panel:focus{outline:none}.drawer--nodismiss .drawer__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{scale:1}50%{scale:1.08}100%{scale:1}}.drawer--top .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(-100%)}.drawer--bottom .drawer__panel{inset-block:auto 0;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(100%)}.drawer--top.drawer--open .drawer__panel,.drawer--bottom.drawer--open .drawer__panel{opacity:1;transform:translateY(0)}.drawer--start .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * -100%))}.drawer--end .drawer__panel{inset-block:0 auto;inset-inline:auto 0;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * 100%))}.drawer--start.drawer--open .drawer__panel,.drawer--end.drawer--open .drawer__panel{opacity:1;transform:translateX(0)}.drawer__resize-handle{display:flex;align-items:center;justify-content:center;position:absolute;z-index:var(--nano-z-index-dropdown);color:var(--nano-color-primary-1200);background-color:var(--nano-color-neutral-75)}.drawer__resize-handle:focus{outline:none}.drawer__resize-handle:focus-visible{background-color:var(--nano-focus-ring-color)}.drawer__resize-handle:active{color:var(--nano-color-primary-800)}.drawer--top .drawer__resize-handle,.drawer--bottom .drawer__resize-handle{cursor:row-resize;inset-inline:0}.drawer--end .drawer__resize-handle,.drawer--start .drawer__resize-handle{cursor:col-resize;inset-block:0}.drawer--end .drawer__resize-handle{inset-inline-start:0}.drawer--start .drawer__resize-handle{inset-inline-end:0}.drawer--top .drawer__resize-handle{inset-block-end:0}.drawer--bottom .drawer__resize-handle{inset-block-start:0}.drawer__header{inline-size:100%;display:flex;background-color:var(--header-background);align-items:center;padding:var(--header-spacing)}[stuck] .drawer__header{box-shadow:var(--nano-shadow-l0)}.drawer__title{flex:1 1 auto;margin:0;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser);text-wrap:balance}.drawer__header-actions{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nano-spacing-sm);color:var(--header-button-color);inset-inline-end:calc(var(--nano-spacing-l1-default) / 2 * -1);position:relative}.drawer__header-actions .drawer__close,.drawer__header-actions ::slotted(.nano-icon-button){flex:0 0 auto;display:flex;align-items:center;font-size:var(--header-button-size)}.drawer__main{display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}.drawer__body{display:block;flex:1 1 auto;padding:var(--body-spacing);padding-block:0 var(--body-spacing);padding-inline:var(--body-spacing)}.drawer:not(.drawer--has-header) .drawer__body{padding-block-start:var(--body-spacing)}.drawer__footer{inline-size:100%;text-align:end;padding:var(--footer-spacing);background:var(--footer-background);inset-block-start:1px;position:relative;border-block-start:1px solid var(--nano-color-neutral-300);gap:var(--nano-spacing-md);display:inline-flex}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;inset:0;background-color:var(--scrim-color);pointer-events:all;opacity:0;transition:var(--nano-transition-fast) opacity}.drawer--open .drawer__overlay{opacity:1}.drawer--contained .drawer__overlay{display:none}";
|
|
46
49
|
|
|
@@ -527,18 +527,18 @@ const DataList = class {
|
|
|
527
527
|
}
|
|
528
528
|
}
|
|
529
529
|
render() {
|
|
530
|
-
return (renderer.h(index.Host, { key: '
|
|
530
|
+
return (renderer.h(index.Host, { key: '269f57e6eccd251685f84a94d53f380d6545a3cb', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
|
|
531
531
|
? 'Select options from the list below'
|
|
532
|
-
: undefined }, renderer.h("nano-dropdown", { key: '
|
|
532
|
+
: undefined }, renderer.h("nano-dropdown", { key: 'ee6398b356dc1a0ff9fa35e84955314fc95435b6', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
|
|
533
533
|
dlist__dropdown: true,
|
|
534
534
|
'dlist--isfiltered': this.isFiltered,
|
|
535
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, renderer.h("nano-menu", { key: '
|
|
535
|
+
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, renderer.h("nano-menu", { key: 'f80006a5ba62c227094da52672b4abf6ee6335dc', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
|
|
536
536
|
dlist__menu: true,
|
|
537
537
|
'dlist__menu--open': this.dropwdownOpen,
|
|
538
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, renderer.h("slot", { key: '
|
|
538
|
+
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, renderer.h("slot", { key: '8a2d3160b990c99baeaf4fd9bdd7bb04229d642c', name: "list-top" }), renderer.h("slot", { key: '2230e4458be0998d59d18250e1d22188baf2f6b1' }), renderer.h("slot", { key: 'fca84cbd01495e4b62ba95c4c07681f506939d3f', name: "internal-opts" }), renderer.h("slot", { key: '076fd81c15f5ac6590e5311503262a07f60e8454', name: "list-bottom" })), renderer.h("nano-menu", { key: 'd4878bc502b4fcc0de01f67b5065ad017f445f75', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
|
|
539
539
|
dlist__menu: true,
|
|
540
540
|
'dlist__menu--open': this.dropwdownOpen,
|
|
541
|
-
} }, renderer.h("slot", { key: '
|
|
541
|
+
} }, renderer.h("slot", { key: '2ac583af3ac8b24ace627637ab86471999df9465', name: "no-result" })), !!this.actvOptEles && (renderer.h("div", { key: '4971780255baf694fcc447756ca02e1115ece871', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
|
|
542
542
|
}
|
|
543
543
|
static get watchers() { return {
|
|
544
544
|
"open": ["openWatcher"],
|
|
@@ -300,14 +300,16 @@ const MaskedOverflow = class {
|
|
|
300
300
|
this.ro.disconnect();
|
|
301
301
|
this.ro = undefined;
|
|
302
302
|
}
|
|
303
|
-
const
|
|
304
|
-
|
|
303
|
+
const ro = (this.ro = new ResizeObserver(this.recalculatePositions));
|
|
304
|
+
ro.observe(this.host);
|
|
305
305
|
}
|
|
306
306
|
componentWillLoad() {
|
|
307
307
|
this.watchHideScrollbars();
|
|
308
308
|
}
|
|
309
309
|
componentDidLoad() {
|
|
310
310
|
this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
|
|
311
|
+
this.hideStartBtn();
|
|
312
|
+
this.hideEndBtn();
|
|
311
313
|
requestAnimationFrame(() => (this.instantReCalc = false));
|
|
312
314
|
}
|
|
313
315
|
disconnectedCallback() {
|
|
@@ -317,7 +319,7 @@ const MaskedOverflow = class {
|
|
|
317
319
|
}
|
|
318
320
|
}
|
|
319
321
|
render() {
|
|
320
|
-
return (renderer.h(index.Host, { key: '
|
|
322
|
+
return (renderer.h(index.Host, { key: 'e5c6238730817f0c7036060faa8c344d514a3924', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, renderer.h("div", { key: '4027acd51b80fd1bf2bb9d66a05ec051802732f3', part: "base", class: {
|
|
321
323
|
onav: true,
|
|
322
324
|
[`onav--${this.orientation}`]: true,
|
|
323
325
|
'onav--has-scroll-controls': this.hasScrollControls,
|
|
@@ -326,12 +328,12 @@ const MaskedOverflow = class {
|
|
|
326
328
|
'onav--no-transitions': this.instantReCalc,
|
|
327
329
|
'onnav--has-indicator': this.showIndicator,
|
|
328
330
|
'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
|
|
329
|
-
}, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, renderer.h("div", { key: '
|
|
331
|
+
}, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, renderer.h("div", { key: 'a552b2e3cdf9f84249655b21ce6f2acb5c330a75', class: "onav__nav" }, this.scrollControls && (renderer.h("nano-icon-button", { key: '5aca29990db29b3d0d00e6bca317cd3870d06d6b', part: "scroll-button scroll-button-prev", class: {
|
|
330
332
|
'onav__scroll-button': true,
|
|
331
333
|
'onav__scroll-button--start': true,
|
|
332
334
|
}, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
|
|
333
335
|
? 'light/chevron-left'
|
|
334
|
-
: 'light/chevron-up' })), renderer.h("div", { key: '
|
|
336
|
+
: 'light/chevron-up' })), renderer.h("div", { key: '9c2b4c91859b5c6c132ab2eecc01cf56eeec18b9', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, renderer.h("div", { key: 'a77097f7b9a70e08f9a1eb980948c5c92dff760d', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (renderer.h("div", { key: 'b8661b042f9e195850a33ce3570b75c9bed25d7e', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), renderer.h("slot", { key: '54af572f6ef591d8d3cb34221e048ac0e32140bb', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (renderer.h("nano-icon-button", { key: 'e27a06cc2cec7ed373c527e3c6db5a0a56a90b71', part: "scroll-button scroll-button-next", class: {
|
|
335
337
|
'onav__scroll-button': true,
|
|
336
338
|
'onav__scroll-button--end': true,
|
|
337
339
|
}, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
:host,
|
|
2
|
+
*,
|
|
3
|
+
*::before,
|
|
4
|
+
*::after {
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
}
|
|
7
|
+
[hidden] {
|
|
8
|
+
display: none !important;
|
|
9
|
+
}
|
|
10
|
+
@media (prefers-reduced-motion: reduce) {
|
|
11
|
+
:host,
|
|
12
|
+
*,
|
|
13
|
+
*::before,
|
|
14
|
+
*::after {
|
|
15
|
+
animation-duration: 0.01ms !important;
|
|
16
|
+
animation-iteration-count: 1 !important;
|
|
17
|
+
transition-duration: 0.01ms !important;
|
|
18
|
+
scroll-behavior: auto !important;
|
|
19
|
+
}
|
|
20
|
+
}:host,
|
|
21
|
+
*,
|
|
22
|
+
*::before,
|
|
23
|
+
*::after {
|
|
24
|
+
box-sizing: border-box;
|
|
25
|
+
}
|
|
26
|
+
[hidden] {
|
|
27
|
+
display: none !important;
|
|
28
|
+
}
|
|
29
|
+
@media (prefers-reduced-motion: reduce) {
|
|
30
|
+
:host,
|
|
31
|
+
*,
|
|
32
|
+
*::before,
|
|
33
|
+
*::after {
|
|
34
|
+
animation-duration: 0.01ms !important;
|
|
35
|
+
animation-iteration-count: 1 !important;
|
|
36
|
+
transition-duration: 0.01ms !important;
|
|
37
|
+
scroll-behavior: auto !important;
|
|
38
|
+
}
|
|
39
|
+
}/**
|
|
40
|
+
* @prop --bg: Background color of the badge. Defaults to a colour defined by the `theme` and `strength` attributes;
|
|
41
|
+
* @prop --color: Text color of the badge. Defaults to being dynamically calculated based on the best contrast with `--bg` color;
|
|
42
|
+
*/
|
|
@@ -14,6 +14,16 @@ export class NanoBadge {
|
|
|
14
14
|
/** Use pulse to draw attention to the badge with an animation */
|
|
15
15
|
pulse;
|
|
16
16
|
static get is() { return "nano-badge"; }
|
|
17
|
+
static get originalStyleUrls() {
|
|
18
|
+
return {
|
|
19
|
+
"$": ["badge.scss"]
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
static get styleUrls() {
|
|
23
|
+
return {
|
|
24
|
+
"$": ["badge.css"]
|
|
25
|
+
};
|
|
26
|
+
}
|
|
17
27
|
static get properties() {
|
|
18
28
|
return {
|
|
19
29
|
"theme": {
|
|
@@ -89,7 +89,7 @@ export class NanoBreadcrumb {
|
|
|
89
89
|
"references": {
|
|
90
90
|
"Breadcrumb": {
|
|
91
91
|
"location": "local",
|
|
92
|
-
"path": "/builds
|
|
92
|
+
"path": "/builds/scdfPYwW/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
|
|
93
93
|
"id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
|
|
94
94
|
}
|
|
95
95
|
}
|
|
@@ -27,6 +27,10 @@ let listIds = 0;
|
|
|
27
27
|
* @slot list-top - shows at the top of the list when there are options present
|
|
28
28
|
* @slot list-bottom - shows at the bottom of the list when there are options present
|
|
29
29
|
* @slot no-result - shown when there are no results otherwise nothing will be shown
|
|
30
|
+
*
|
|
31
|
+
* @part dropdown - the wrapping `nano-dropdown` element
|
|
32
|
+
* @part main-menu - the main `nano-menu` element that holds the options
|
|
33
|
+
* @part no-result-menu - the `nano-menu` element that holds the no results content
|
|
30
34
|
*/
|
|
31
35
|
export class DataList {
|
|
32
36
|
// Private State
|
|
@@ -529,18 +533,18 @@ export class DataList {
|
|
|
529
533
|
}
|
|
530
534
|
}
|
|
531
535
|
render() {
|
|
532
|
-
return (h(Host, { key: '
|
|
536
|
+
return (h(Host, { key: '269f57e6eccd251685f84a94d53f380d6545a3cb', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
|
|
533
537
|
? 'Select options from the list below'
|
|
534
|
-
: undefined }, h("nano-dropdown", { key: '
|
|
538
|
+
: undefined }, h("nano-dropdown", { key: 'ee6398b356dc1a0ff9fa35e84955314fc95435b6', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
|
|
535
539
|
dlist__dropdown: true,
|
|
536
540
|
'dlist--isfiltered': this.isFiltered,
|
|
537
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '
|
|
541
|
+
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'f80006a5ba62c227094da52672b4abf6ee6335dc', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
|
|
538
542
|
dlist__menu: true,
|
|
539
543
|
'dlist__menu--open': this.dropwdownOpen,
|
|
540
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '
|
|
544
|
+
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '8a2d3160b990c99baeaf4fd9bdd7bb04229d642c', name: "list-top" }), h("slot", { key: '2230e4458be0998d59d18250e1d22188baf2f6b1' }), h("slot", { key: 'fca84cbd01495e4b62ba95c4c07681f506939d3f', name: "internal-opts" }), h("slot", { key: '076fd81c15f5ac6590e5311503262a07f60e8454', name: "list-bottom" })), h("nano-menu", { key: 'd4878bc502b4fcc0de01f67b5065ad017f445f75', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
|
|
541
545
|
dlist__menu: true,
|
|
542
546
|
'dlist__menu--open': this.dropwdownOpen,
|
|
543
|
-
} }, h("slot", { key: '
|
|
547
|
+
} }, h("slot", { key: '2ac583af3ac8b24ace627637ab86471999df9465', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '4971780255baf694fcc447756ca02e1115ece871', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
|
|
544
548
|
}
|
|
545
549
|
static get is() { return "nano-datalist"; }
|
|
546
550
|
static get encapsulation() { return "shadow"; }
|
|
@@ -310,14 +310,16 @@ export class MaskedOverflow {
|
|
|
310
310
|
this.ro.disconnect();
|
|
311
311
|
this.ro = undefined;
|
|
312
312
|
}
|
|
313
|
-
const
|
|
314
|
-
|
|
313
|
+
const ro = (this.ro = new ResizeObserver(this.recalculatePositions));
|
|
314
|
+
ro.observe(this.host);
|
|
315
315
|
}
|
|
316
316
|
componentWillLoad() {
|
|
317
317
|
this.watchHideScrollbars();
|
|
318
318
|
}
|
|
319
319
|
componentDidLoad() {
|
|
320
320
|
this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
|
|
321
|
+
this.hideStartBtn();
|
|
322
|
+
this.hideEndBtn();
|
|
321
323
|
requestAnimationFrame(() => (this.instantReCalc = false));
|
|
322
324
|
}
|
|
323
325
|
disconnectedCallback() {
|
|
@@ -327,7 +329,7 @@ export class MaskedOverflow {
|
|
|
327
329
|
}
|
|
328
330
|
}
|
|
329
331
|
render() {
|
|
330
|
-
return (h(Host, { key: '
|
|
332
|
+
return (h(Host, { key: 'e5c6238730817f0c7036060faa8c344d514a3924', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: '4027acd51b80fd1bf2bb9d66a05ec051802732f3', part: "base", class: {
|
|
331
333
|
onav: true,
|
|
332
334
|
[`onav--${this.orientation}`]: true,
|
|
333
335
|
'onav--has-scroll-controls': this.hasScrollControls,
|
|
@@ -336,12 +338,12 @@ export class MaskedOverflow {
|
|
|
336
338
|
'onav--no-transitions': this.instantReCalc,
|
|
337
339
|
'onnav--has-indicator': this.showIndicator,
|
|
338
340
|
'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
|
|
339
|
-
}, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '
|
|
341
|
+
}, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'a552b2e3cdf9f84249655b21ce6f2acb5c330a75', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '5aca29990db29b3d0d00e6bca317cd3870d06d6b', part: "scroll-button scroll-button-prev", class: {
|
|
340
342
|
'onav__scroll-button': true,
|
|
341
343
|
'onav__scroll-button--start': true,
|
|
342
344
|
}, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
|
|
343
345
|
? 'light/chevron-left'
|
|
344
|
-
: 'light/chevron-up' })), h("div", { key: '
|
|
346
|
+
: 'light/chevron-up' })), h("div", { key: '9c2b4c91859b5c6c132ab2eecc01cf56eeec18b9', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: 'a77097f7b9a70e08f9a1eb980948c5c92dff760d', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'b8661b042f9e195850a33ce3570b75c9bed25d7e', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '54af572f6ef591d8d3cb34221e048ac0e32140bb', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'e27a06cc2cec7ed373c527e3c6db5a0a56a90b71', part: "scroll-button scroll-button-next", class: {
|
|
345
347
|
'onav__scroll-button': true,
|
|
346
348
|
'onav__scroll-button--end': true,
|
|
347
349
|
}, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'
|
package/dist/components/badge.js
CHANGED
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
|
|
5
5
|
|
|
6
|
+
const badgeCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";
|
|
7
|
+
|
|
6
8
|
const NanoBadge = /*@__PURE__*/ proxyCustomElement(class NanoBadge extends HTMLElement {
|
|
7
9
|
constructor() {
|
|
8
10
|
super();
|
|
@@ -14,6 +16,7 @@ const NanoBadge = /*@__PURE__*/ proxyCustomElement(class NanoBadge extends HTMLE
|
|
|
14
16
|
strength;
|
|
15
17
|
/** Use pulse to draw attention to the badge with an animation */
|
|
16
18
|
pulse;
|
|
19
|
+
static get style() { return badgeCss; }
|
|
17
20
|
}, [0, "nano-badge", {
|
|
18
21
|
"theme": [513],
|
|
19
22
|
"strength": [513],
|
|
@@ -529,18 +529,18 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
|
|
|
529
529
|
}
|
|
530
530
|
}
|
|
531
531
|
render() {
|
|
532
|
-
return (h(Host, { key: '
|
|
532
|
+
return (h(Host, { key: '269f57e6eccd251685f84a94d53f380d6545a3cb', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
|
|
533
533
|
? 'Select options from the list below'
|
|
534
|
-
: undefined }, h("nano-dropdown", { key: '
|
|
534
|
+
: undefined }, h("nano-dropdown", { key: 'ee6398b356dc1a0ff9fa35e84955314fc95435b6', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
|
|
535
535
|
dlist__dropdown: true,
|
|
536
536
|
'dlist--isfiltered': this.isFiltered,
|
|
537
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '
|
|
537
|
+
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'f80006a5ba62c227094da52672b4abf6ee6335dc', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
|
|
538
538
|
dlist__menu: true,
|
|
539
539
|
'dlist__menu--open': this.dropwdownOpen,
|
|
540
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '
|
|
540
|
+
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '8a2d3160b990c99baeaf4fd9bdd7bb04229d642c', name: "list-top" }), h("slot", { key: '2230e4458be0998d59d18250e1d22188baf2f6b1' }), h("slot", { key: 'fca84cbd01495e4b62ba95c4c07681f506939d3f', name: "internal-opts" }), h("slot", { key: '076fd81c15f5ac6590e5311503262a07f60e8454', name: "list-bottom" })), h("nano-menu", { key: 'd4878bc502b4fcc0de01f67b5065ad017f445f75', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
|
|
541
541
|
dlist__menu: true,
|
|
542
542
|
'dlist__menu--open': this.dropwdownOpen,
|
|
543
|
-
} }, h("slot", { key: '
|
|
543
|
+
} }, h("slot", { key: '2ac583af3ac8b24ace627637ab86471999df9465', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '4971780255baf694fcc447756ca02e1115ece871', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
|
|
544
544
|
}
|
|
545
545
|
static get watchers() { return {
|
|
546
546
|
"open": ["openWatcher"],
|
|
@@ -303,14 +303,16 @@ const MaskedOverflow = /*@__PURE__*/ proxyCustomElement(class MaskedOverflow ext
|
|
|
303
303
|
this.ro.disconnect();
|
|
304
304
|
this.ro = undefined;
|
|
305
305
|
}
|
|
306
|
-
const
|
|
307
|
-
|
|
306
|
+
const ro = (this.ro = new ResizeObserver(this.recalculatePositions));
|
|
307
|
+
ro.observe(this.host);
|
|
308
308
|
}
|
|
309
309
|
componentWillLoad() {
|
|
310
310
|
this.watchHideScrollbars();
|
|
311
311
|
}
|
|
312
312
|
componentDidLoad() {
|
|
313
313
|
this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
|
|
314
|
+
this.hideStartBtn();
|
|
315
|
+
this.hideEndBtn();
|
|
314
316
|
requestAnimationFrame(() => (this.instantReCalc = false));
|
|
315
317
|
}
|
|
316
318
|
disconnectedCallback() {
|
|
@@ -320,7 +322,7 @@ const MaskedOverflow = /*@__PURE__*/ proxyCustomElement(class MaskedOverflow ext
|
|
|
320
322
|
}
|
|
321
323
|
}
|
|
322
324
|
render() {
|
|
323
|
-
return (h(Host, { key: '
|
|
325
|
+
return (h(Host, { key: 'e5c6238730817f0c7036060faa8c344d514a3924', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: '4027acd51b80fd1bf2bb9d66a05ec051802732f3', part: "base", class: {
|
|
324
326
|
onav: true,
|
|
325
327
|
[`onav--${this.orientation}`]: true,
|
|
326
328
|
'onav--has-scroll-controls': this.hasScrollControls,
|
|
@@ -329,12 +331,12 @@ const MaskedOverflow = /*@__PURE__*/ proxyCustomElement(class MaskedOverflow ext
|
|
|
329
331
|
'onav--no-transitions': this.instantReCalc,
|
|
330
332
|
'onnav--has-indicator': this.showIndicator,
|
|
331
333
|
'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
|
|
332
|
-
}, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '
|
|
334
|
+
}, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'a552b2e3cdf9f84249655b21ce6f2acb5c330a75', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '5aca29990db29b3d0d00e6bca317cd3870d06d6b', part: "scroll-button scroll-button-prev", class: {
|
|
333
335
|
'onav__scroll-button': true,
|
|
334
336
|
'onav__scroll-button--start': true,
|
|
335
337
|
}, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
|
|
336
338
|
? 'light/chevron-left'
|
|
337
|
-
: 'light/chevron-up' })), h("div", { key: '
|
|
339
|
+
: 'light/chevron-up' })), h("div", { key: '9c2b4c91859b5c6c132ab2eecc01cf56eeec18b9', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: 'a77097f7b9a70e08f9a1eb980948c5c92dff760d', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'b8661b042f9e195850a33ce3570b75c9bed25d7e', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '54af572f6ef591d8d3cb34221e048ac0e32140bb', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'e27a06cc2cec7ed373c527e3c6db5a0a56a90b71', part: "scroll-button scroll-button-next", class: {
|
|
338
340
|
'onav__scroll-button': true,
|
|
339
341
|
'onav__scroll-button--end': true,
|
|
340
342
|
}, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'
|
|
@@ -28,6 +28,8 @@ const NanoAvatar = class {
|
|
|
28
28
|
};
|
|
29
29
|
NanoAvatar.style = avatarCss;
|
|
30
30
|
|
|
31
|
+
const badgeCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";
|
|
32
|
+
|
|
31
33
|
const NanoBadge = class {
|
|
32
34
|
constructor(hostRef) {
|
|
33
35
|
registerInstance(this, hostRef);
|
|
@@ -39,6 +41,7 @@ const NanoBadge = class {
|
|
|
39
41
|
/** Use pulse to draw attention to the badge with an animation */
|
|
40
42
|
pulse;
|
|
41
43
|
};
|
|
44
|
+
NanoBadge.style = badgeCss;
|
|
42
45
|
|
|
43
46
|
const drawerCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--size:25rem;--min-size:25rem;--max-size:50%;--panel-background:var(--nano-color-surface-300);--panel-shadow:var(--nano-shadow-l3);--scrim-color:var(--nano-overlay-background-color);--header-button-color:var(--nano-color-primary-1200);--header-button-size:1.375rem;--footer-background:var(--panel-background);--header-background:var(--panel-background);--header-spacing:var(--nano-spacing-l) var(--nano-spacing-l1-default);--body-spacing:var(--nano-spacing-l1-default);--footer-spacing:var(--nano-spacing-l) var(--nano-spacing-l1-default);--dir:1}:host([placement=top]),:host([placement=bottom]){--max-size:80%}:host(:dir(rtl)){--dir:-1}:host-context([dir=rtl]){--dir:-1}.drawer{inset-block-start:0;inset-inline-start:0;pointer-events:none;overflow:hidden;border:none;inline-size:100%;block-size:100%;color:unset;background-color:unset}.drawer::backdrop{display:none}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--nano-z-index-modal)}.drawer__panel{position:absolute;max-inline-size:100%;max-block-size:100%;background-color:var(--panel-background);box-shadow:var(--panel-shadow);pointer-events:all;transition:var(--nano-transition-fast) opacity, var(--nano-transition-fast) transform;display:flex}.drawer--top .drawer__panel,.drawer--bottom .drawer__panel{flex-direction:column}@media (forced-colors: active){.drawer__panel{border:solid 1px var(--nano-color-base-1000)}}.drawer__panel:focus{outline:none}.drawer--nodismiss .drawer__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{scale:1}50%{scale:1.08}100%{scale:1}}.drawer--top .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(-100%)}.drawer--bottom .drawer__panel{inset-block:auto 0;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(100%)}.drawer--top.drawer--open .drawer__panel,.drawer--bottom.drawer--open .drawer__panel{opacity:1;transform:translateY(0)}.drawer--start .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * -100%))}.drawer--end .drawer__panel{inset-block:0 auto;inset-inline:auto 0;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * 100%))}.drawer--start.drawer--open .drawer__panel,.drawer--end.drawer--open .drawer__panel{opacity:1;transform:translateX(0)}.drawer__resize-handle{display:flex;align-items:center;justify-content:center;position:absolute;z-index:var(--nano-z-index-dropdown);color:var(--nano-color-primary-1200);background-color:var(--nano-color-neutral-75)}.drawer__resize-handle:focus{outline:none}.drawer__resize-handle:focus-visible{background-color:var(--nano-focus-ring-color)}.drawer__resize-handle:active{color:var(--nano-color-primary-800)}.drawer--top .drawer__resize-handle,.drawer--bottom .drawer__resize-handle{cursor:row-resize;inset-inline:0}.drawer--end .drawer__resize-handle,.drawer--start .drawer__resize-handle{cursor:col-resize;inset-block:0}.drawer--end .drawer__resize-handle{inset-inline-start:0}.drawer--start .drawer__resize-handle{inset-inline-end:0}.drawer--top .drawer__resize-handle{inset-block-end:0}.drawer--bottom .drawer__resize-handle{inset-block-start:0}.drawer__header{inline-size:100%;display:flex;background-color:var(--header-background);align-items:center;padding:var(--header-spacing)}[stuck] .drawer__header{box-shadow:var(--nano-shadow-l0)}.drawer__title{flex:1 1 auto;margin:0;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser);text-wrap:balance}.drawer__header-actions{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nano-spacing-sm);color:var(--header-button-color);inset-inline-end:calc(var(--nano-spacing-l1-default) / 2 * -1);position:relative}.drawer__header-actions .drawer__close,.drawer__header-actions ::slotted(.nano-icon-button){flex:0 0 auto;display:flex;align-items:center;font-size:var(--header-button-size)}.drawer__main{display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}.drawer__body{display:block;flex:1 1 auto;padding:var(--body-spacing);padding-block:0 var(--body-spacing);padding-inline:var(--body-spacing)}.drawer:not(.drawer--has-header) .drawer__body{padding-block-start:var(--body-spacing)}.drawer__footer{inline-size:100%;text-align:end;padding:var(--footer-spacing);background:var(--footer-background);inset-block-start:1px;position:relative;border-block-start:1px solid var(--nano-color-neutral-300);gap:var(--nano-spacing-md);display:inline-flex}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;inset:0;background-color:var(--scrim-color);pointer-events:all;opacity:0;transition:var(--nano-transition-fast) opacity}.drawer--open .drawer__overlay{opacity:1}.drawer--contained .drawer__overlay{display:none}";
|
|
44
47
|
|
|
@@ -525,18 +525,18 @@ const DataList = class {
|
|
|
525
525
|
}
|
|
526
526
|
}
|
|
527
527
|
render() {
|
|
528
|
-
return (h(Host, { key: '
|
|
528
|
+
return (h(Host, { key: '269f57e6eccd251685f84a94d53f380d6545a3cb', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
|
|
529
529
|
? 'Select options from the list below'
|
|
530
|
-
: undefined }, h("nano-dropdown", { key: '
|
|
530
|
+
: undefined }, h("nano-dropdown", { key: 'ee6398b356dc1a0ff9fa35e84955314fc95435b6', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
|
|
531
531
|
dlist__dropdown: true,
|
|
532
532
|
'dlist--isfiltered': this.isFiltered,
|
|
533
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '
|
|
533
|
+
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'f80006a5ba62c227094da52672b4abf6ee6335dc', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
|
|
534
534
|
dlist__menu: true,
|
|
535
535
|
'dlist__menu--open': this.dropwdownOpen,
|
|
536
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '
|
|
536
|
+
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '8a2d3160b990c99baeaf4fd9bdd7bb04229d642c', name: "list-top" }), h("slot", { key: '2230e4458be0998d59d18250e1d22188baf2f6b1' }), h("slot", { key: 'fca84cbd01495e4b62ba95c4c07681f506939d3f', name: "internal-opts" }), h("slot", { key: '076fd81c15f5ac6590e5311503262a07f60e8454', name: "list-bottom" })), h("nano-menu", { key: 'd4878bc502b4fcc0de01f67b5065ad017f445f75', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
|
|
537
537
|
dlist__menu: true,
|
|
538
538
|
'dlist__menu--open': this.dropwdownOpen,
|
|
539
|
-
} }, h("slot", { key: '
|
|
539
|
+
} }, h("slot", { key: '2ac583af3ac8b24ace627637ab86471999df9465', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '4971780255baf694fcc447756ca02e1115ece871', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
|
|
540
540
|
}
|
|
541
541
|
static get watchers() { return {
|
|
542
542
|
"open": ["openWatcher"],
|
|
@@ -298,14 +298,16 @@ const MaskedOverflow = class {
|
|
|
298
298
|
this.ro.disconnect();
|
|
299
299
|
this.ro = undefined;
|
|
300
300
|
}
|
|
301
|
-
const
|
|
302
|
-
|
|
301
|
+
const ro = (this.ro = new ResizeObserver(this.recalculatePositions));
|
|
302
|
+
ro.observe(this.host);
|
|
303
303
|
}
|
|
304
304
|
componentWillLoad() {
|
|
305
305
|
this.watchHideScrollbars();
|
|
306
306
|
}
|
|
307
307
|
componentDidLoad() {
|
|
308
308
|
this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
|
|
309
|
+
this.hideStartBtn();
|
|
310
|
+
this.hideEndBtn();
|
|
309
311
|
requestAnimationFrame(() => (this.instantReCalc = false));
|
|
310
312
|
}
|
|
311
313
|
disconnectedCallback() {
|
|
@@ -315,7 +317,7 @@ const MaskedOverflow = class {
|
|
|
315
317
|
}
|
|
316
318
|
}
|
|
317
319
|
render() {
|
|
318
|
-
return (h(Host, { key: '
|
|
320
|
+
return (h(Host, { key: 'e5c6238730817f0c7036060faa8c344d514a3924', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: '4027acd51b80fd1bf2bb9d66a05ec051802732f3', part: "base", class: {
|
|
319
321
|
onav: true,
|
|
320
322
|
[`onav--${this.orientation}`]: true,
|
|
321
323
|
'onav--has-scroll-controls': this.hasScrollControls,
|
|
@@ -324,12 +326,12 @@ const MaskedOverflow = class {
|
|
|
324
326
|
'onav--no-transitions': this.instantReCalc,
|
|
325
327
|
'onnav--has-indicator': this.showIndicator,
|
|
326
328
|
'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
|
|
327
|
-
}, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '
|
|
329
|
+
}, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'a552b2e3cdf9f84249655b21ce6f2acb5c330a75', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '5aca29990db29b3d0d00e6bca317cd3870d06d6b', part: "scroll-button scroll-button-prev", class: {
|
|
328
330
|
'onav__scroll-button': true,
|
|
329
331
|
'onav__scroll-button--start': true,
|
|
330
332
|
}, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
|
|
331
333
|
? 'light/chevron-left'
|
|
332
|
-
: 'light/chevron-up' })), h("div", { key: '
|
|
334
|
+
: 'light/chevron-up' })), h("div", { key: '9c2b4c91859b5c6c132ab2eecc01cf56eeec18b9', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: 'a77097f7b9a70e08f9a1eb980948c5c92dff760d', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'b8661b042f9e195850a33ce3570b75c9bed25d7e', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '54af572f6ef591d8d3cb34221e048ac0e32140bb', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'e27a06cc2cec7ed373c527e3c6db5a0a56a90b71', part: "scroll-button scroll-button-next", class: {
|
|
333
335
|
'onav__scroll-button': true,
|
|
334
336
|
'onav__scroll-button--end': true,
|
|
335
337
|
}, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'
|