@nldd/design-system 0.8.87 → 0.8.88
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/custom-elements.json +2 -2
- package/dist/components/components.js +123 -30
- package/dist/components/layout/page/page.d.ts +23 -5
- package/dist/components/layout/page/page.d.ts.map +1 -1
- package/dist/components/layout/page/page.js +39 -34
- package/dist/components/layout/page/page.js.map +1 -1
- package/dist/components/layout/page/page.styles.d.ts.map +1 -1
- package/dist/components/layout/page/page.styles.js +2 -0
- package/dist/components/layout/page/page.styles.js.map +1 -1
- package/dist/components/layout/sheet/sheet.template.d.ts.map +1 -1
- package/dist/components/layout/sheet/sheet.template.js +3 -0
- package/dist/components/layout/sheet/sheet.template.js.map +1 -1
- package/dist/components/layout/window/window.template.d.ts.map +1 -1
- package/dist/components/layout/window/window.template.js +3 -0
- package/dist/components/layout/window/window.template.js.map +1 -1
- package/dist/components/navigation/menu-bar/menu-bar.d.ts +4 -2
- package/dist/components/navigation/menu-bar/menu-bar.d.ts.map +1 -1
- package/dist/components/navigation/menu-bar/menu-bar.js +4 -2
- package/dist/components/navigation/menu-bar/menu-bar.js.map +1 -1
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.template.d.ts.map +1 -1
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.template.js +3 -0
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.template.js.map +1 -1
- package/dist/components/status-and-feedback/notification/notification-region.d.ts.map +1 -1
- package/dist/components/status-and-feedback/notification/notification-region.js +74 -1
- package/dist/components/status-and-feedback/notification/notification-region.js.map +1 -1
- package/dist/components/status-and-feedback/notification/notification.d.ts +11 -0
- package/dist/components/status-and-feedback/notification/notification.d.ts.map +1 -1
- package/dist/components/status-and-feedback/notification/notification.js +13 -0
- package/dist/components/status-and-feedback/notification/notification.js.map +1 -1
- package/dist/nldd.min.js +33 -22
- package/dist/types/vue.d.ts +2 -2
- package/package.json +1 -1
package/dist/nldd.min.js
CHANGED
|
@@ -15236,6 +15236,7 @@ else:
|
|
|
15236
15236
|
--_outer-inset-bottom: var(--context-inset-bottom, 0px);
|
|
15237
15237
|
--_header-height: 0px;
|
|
15238
15238
|
--_footer-height: 0px;
|
|
15239
|
+
--_header-full-height: 0px;
|
|
15239
15240
|
/* Set from JS while the page owns the scroller. initial, not a length, so
|
|
15240
15241
|
the fallback stands when the document scrolls instead. */
|
|
15241
15242
|
--_scroll-height: initial;
|
|
@@ -15389,6 +15390,7 @@ else:
|
|
|
15389
15390
|
:host(:not([data-scroll="root"])) .page__scroll {
|
|
15390
15391
|
--context-inset-top: var(--_header-height);
|
|
15391
15392
|
--context-inset-bottom: var(--_footer-height);
|
|
15393
|
+
padding-top: var(--_header-full-height);
|
|
15392
15394
|
}
|
|
15393
15395
|
|
|
15394
15396
|
:host([sticky-header]) .page__scroll {
|
|
@@ -15450,7 +15452,7 @@ else:
|
|
|
15450
15452
|
</footer>
|
|
15451
15453
|
</div>
|
|
15452
15454
|
</div>
|
|
15453
|
-
`}var AK=n((()=>{w()})),jK=r({NLDDPage:()=>NK}),MK,NK,PK=n((()=>{w(),O(),UG(),OK(),AK(),M(),NK=(MK=class extends C{constructor(...e){super(...e),this.stickyHeader=!1,this.stickyFooter=!1,this.background=`inherit`,this._scrolled=!1,this._scrollMode=`nested`,this._scrollTarget=null,this._scrollProvider=null,this.
|
|
15455
|
+
`}var AK=n((()=>{w()})),jK=r({NLDDPage:()=>NK}),MK,NK,PK=n((()=>{w(),O(),UG(),OK(),AK(),M(),NK=(MK=class extends C{constructor(...e){super(...e),this.stickyHeader=!1,this.stickyFooter=!1,this.background=`inherit`,this._scrolled=!1,this._scrollMode=`nested`,this._scrollTarget=null,this._scrollProvider=null,this._insetObserver=null,this._headerFullHeight=0,this._mainSlot=null,this._resizeRaf=0,this._onResize=()=>{this._resizeRaf||(this._resizeRaf=requestAnimationFrame(()=>{this._resizeRaf=0,this._readScrollMode()&&this._configureScroll()}))},this._onScroll=()=>{this._scrolled=this._isRoot?window.scrollY>0:((this.stickyHeader?this._scrollEl:this)?.scrollTop??0)>0},this._updateMainItems=()=>{let e=this._mainSlot;if(!e)return;let t=e.assignedElements(),n=t.filter(e=>!e.hasAttribute(`hidden`)),r=n[n.length-1];t.forEach(e=>e.classList.toggle(`is-last`,e===r))}}get _isRoot(){return this._scrollMode===`root`}get scrollTarget(){return this._isRoot?document.scrollingElement??document.documentElement:this.stickyHeader?this._scrollEl??this:this}get scrollEventTarget(){return this._isRoot?window:this.stickyHeader?this._scrollEl??this:this}get _headerEl(){return this.shadowRoot?.querySelector(`.page__header`)??null}get _scrollEl(){return this.shadowRoot?.querySelector(`.page__scroll`)??null}get _footerEl(){return this.shadowRoot?.querySelector(`.page__footer`)??null}connectedCallback(){super.connectedCallback(),this.style.containerType=`inline-size`,this.style.containerName=`layout-container`,this._scrollProvider=BG(this),this._scrollProvider?(this._scrollProvider.registerScrollConsumer(this),this.hasUpdated&&this._configureScroll()):(window.addEventListener(`resize`,this._onResize,{passive:!0}),this.hasUpdated&&(this._readScrollMode(),this._configureScroll()))}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener(`resize`,this._onResize),this._scrollProvider?.unregisterScrollConsumer(this),this._scrollProvider=null,this._resizeRaf&&cancelAnimationFrame(this._resizeRaf),this._teardownScrollListener(),this._teardownInsetObserver(),this._teardownMainSlotListener()}firstUpdated(){this._scrollProvider||this._readScrollMode(),this._configureScroll(),this._setupMainSlotListener()}updated(e){e.has(`stickyHeader`)&&this._configureScroll()}readScrollMode(e){this._readScrollMode(e)&&this._configureScroll()}_readScrollMode(e){let t=e??(getComputedStyle(this).getPropertyValue(`--context-scroll-mode`).trim()===`root`?`root`:`nested`);return t!==this._scrollMode&&(this._scrollMode=t,this.dataset.scroll=t,!0)}_configureScroll(){this._teardownScrollListener(),this._setupScrollListener(),this._headerFullHeight=0,this._setupInsetObserver(),this._onScroll()}_setupInsetObserver(){this._teardownInsetObserver();let e=this._headerEl,t=this._footerEl;if(!e||!t)return;let n=()=>{this._publish(`--_header-height`,`${this.stickyHeader?e.offsetHeight:0}px`),this._publish(`--_footer-height`,`${this.stickyFooter?t.offsetHeight:0}px`),this._publish(`--_header-full-height`,`${this._measureHeaderFullHeight(e)}px`),this._isRoot?this.style.removeProperty(`--_scroll-height`):this._publish(`--_scroll-height`,`${this._scrollEl?.clientHeight??0}px`)};n(),this._insetObserver=new ResizeObserver(n),this._insetObserver.observe(e),this._insetObserver.observe(t),this._scrollEl&&this._insetObserver.observe(this._scrollEl)}_teardownInsetObserver(){this._insetObserver&&(this._insetObserver.disconnect(),this._insetObserver=null)}_publish(e,t){this.style.getPropertyValue(e)!==t&&this.style.setProperty(e,t)}_measureHeaderFullHeight(e){return this.stickyHeader?(this.scrollTarget.scrollTop===0&&(this._headerFullHeight=e.offsetHeight),this._headerFullHeight):0}_setupScrollListener(){let e=this.scrollEventTarget;e.addEventListener(`scroll`,this._onScroll,{passive:!0}),this._scrollTarget=e}_teardownScrollListener(){this._scrollTarget&&(this._scrollTarget.removeEventListener(`scroll`,this._onScroll),this._scrollTarget=null)}_setupMainSlotListener(){this._teardownMainSlotListener();let e=this.shadowRoot?.querySelector(`slot:not([name])`)??null;this._mainSlot=e,e&&(e.addEventListener(`slotchange`,this._updateMainItems),this._updateMainItems())}_teardownMainSlotListener(){this._mainSlot&&(this._mainSlot.removeEventListener(`slotchange`,this._updateMainItems),this._mainSlot=null)}render(){return kK(this)}},MK.styles=DK,MK),j([E({type:Boolean,reflect:!0,attribute:`sticky-header`})],NK.prototype,`stickyHeader`,void 0),j([E({type:Boolean,reflect:!0,attribute:`sticky-footer`})],NK.prototype,`stickyFooter`,void 0),j([E({type:String,reflect:!0})],NK.prototype,`background`,void 0),j([D()],NK.prototype,`_scrolled`,void 0),NK=j([T(`nldd-page`)],NK)}));function FK(e){return e===void 0||e===``?null:e===`0`?`0`:`var(--primitives-space-${e})`}function IK(e){class t extends e{constructor(...e){super(...e),this.background=`inherit`,this.scheme=`inherit`}connectedCallback(){super.connectedCallback(),this._unsubScheme=zP(()=>{this.scheme===`inverted`&&this._applyScheme()})}disconnectedCallback(){super.disconnectedCallback(),this._unsubScheme?.(),this._unsubScheme=void 0}updated(e){super.updated(e),e.has(`background`)&&this._applyBackground(),e.has(`scheme`)&&this._applyScheme(),zK.some(t=>e.has(t))&&this._applyPadding(),e.has(`height`)&&this._applyHeight()}_onSlotChange(e){let t=e.target,n=t.parentElement;n&&(n.hidden=t.assignedElements().length===0)}_applyBackground(){if(this.background===`base`||this.background===`tinted`){let e=LK[this.background];this.style.backgroundColor=e,this.style.setProperty(`--context-parent-background-color`,e)}else this.style.backgroundColor=``,this.style.removeProperty(`--context-parent-background-color`)}_applyScheme(){this.scheme===`light`||this.scheme===`dark`?this.style.colorScheme=this.scheme:this.scheme===`inverted`?this.style.colorScheme=this._resolveActiveScheme()===`dark`?`light`:`dark`:this.style.removeProperty(`color-scheme`)}_resolveActiveScheme(){let e=document.documentElement.getAttribute(`data-scheme`);if(e===`light`||e===`dark`)return e;let t=this.parentElement;for(;t;){let e=getComputedStyle(t).colorScheme,n=e.includes(`light`),r=e.includes(`dark`);if(r&&!n)return`dark`;if(n&&!r)return`light`;t=t.parentElement}return window.matchMedia?.(`(prefers-color-scheme: dark)`).matches?`dark`:`light`}_applyPadding(){let e=this;for(let t of RK){let n=e=>t?`${t}Padding${e}`:`padding${e}`,r=e[n(`Block`)],i=e[n(`Top`)],a=e[n(`Bottom`)],o=t?`${t}-`:``;this._setVar(`--_${o}padding-top`,FK(i??r)),this._setVar(`--_${o}padding-bottom`,FK(a??r))}}_applyHeight(){let e=this.height;e&&typeof CSS<`u`&&CSS.supports(`min-height`,e)?this.style.minHeight=e:this.style.removeProperty(`min-height`)}_setVar(e,t){t===null?this.style.removeProperty(e):this.style.setProperty(e,t)}}return j([E({type:String,reflect:!0})],t.prototype,`background`,void 0),j([E({type:String,reflect:!0})],t.prototype,`scheme`,void 0),j([E({type:String,reflect:!0,attribute:`padding-block`})],t.prototype,`paddingBlock`,void 0),j([E({type:String,reflect:!0,attribute:`padding-top`})],t.prototype,`paddingTop`,void 0),j([E({type:String,reflect:!0,attribute:`padding-bottom`})],t.prototype,`paddingBottom`,void 0),j([E({type:String,reflect:!0,attribute:`sm-padding-block`})],t.prototype,`smPaddingBlock`,void 0),j([E({type:String,reflect:!0,attribute:`sm-padding-top`})],t.prototype,`smPaddingTop`,void 0),j([E({type:String,reflect:!0,attribute:`sm-padding-bottom`})],t.prototype,`smPaddingBottom`,void 0),j([E({type:String,reflect:!0,attribute:`md-padding-block`})],t.prototype,`mdPaddingBlock`,void 0),j([E({type:String,reflect:!0,attribute:`md-padding-top`})],t.prototype,`mdPaddingTop`,void 0),j([E({type:String,reflect:!0,attribute:`md-padding-bottom`})],t.prototype,`mdPaddingBottom`,void 0),j([E({type:String,reflect:!0,attribute:`lg-padding-block`})],t.prototype,`lgPaddingBlock`,void 0),j([E({type:String,reflect:!0,attribute:`lg-padding-top`})],t.prototype,`lgPaddingTop`,void 0),j([E({type:String,reflect:!0,attribute:`lg-padding-bottom`})],t.prototype,`lgPaddingBottom`,void 0),j([E({type:String,reflect:!0})],t.prototype,`height`,void 0),t}var LK,RK,zK,BK=n((()=>{O(),UP(),M(),LK={base:`var(--semantics-surfaces-base-background-color)`,tinted:`var(--semantics-surfaces-tinted-background-color)`},RK=[``,`sm`,`md`,`lg`],zK=[`paddingBlock`,`paddingTop`,`paddingBottom`,`smPaddingBlock`,`smPaddingTop`,`smPaddingBottom`,`mdPaddingBlock`,`mdPaddingTop`,`mdPaddingBottom`,`lgPaddingBlock`,`lgPaddingTop`,`lgPaddingBottom`]})),VK,HK,UK,WK,GK,KK=n((()=>{w(),L(),VK=l(I.smMax),HK=l(I.mdMin),UK=l(I.mdMax),WK=l(I.lgMin),GK=u`
|
|
15454
15456
|
:host {
|
|
15455
15457
|
box-sizing: border-box;
|
|
15456
15458
|
}
|
|
@@ -17000,6 +17002,9 @@ else:
|
|
|
17000
17002
|
<div class="sheet__body">
|
|
17001
17003
|
<slot></slot>
|
|
17002
17004
|
</div>
|
|
17005
|
+
<!-- Inside the dialog, so it escapes the inertness a modal imposes on
|
|
17006
|
+
everything outside it. Plumbing, not consumer API. -->
|
|
17007
|
+
<slot name="notifications"></slot>
|
|
17003
17008
|
</dialog>
|
|
17004
17009
|
`}var Qq=n((()=>{w()}));function $q(e){let t=e.querySelector(`[autofocus]`);if(!t)return!1;t.focus();let n=t.updateComplete;return n&&typeof n.then==`function`&&n.then(()=>{(!e.contains(document.activeElement)||document.activeElement===e)&&t.focus()}),!0}var eJ=n((()=>{}));function tJ(e){return e.composedPath().some(e=>e instanceof Element&&e.tagName.toLowerCase()===`nldd-top-title-bar`)}var nJ=n((()=>{}));function rJ(e,t,n){let r=!1;return e.updateComplete.then(()=>{r||!t()||n()}),()=>{r=!0}}var iJ=n((()=>{})),aJ=r({NLDDSheet:()=>cJ}),oJ,sJ,cJ,lJ=n((()=>{w(),O(),P(),Xq(),Qq(),xi(),eJ(),nJ(),iJ(),M(),sJ=1e3,cJ=(oJ=class extends C{constructor(...e){super(...e),this.placement=`right`,this.height=``,this.accessibleLabel=`Venster`,this.width=``,this._hasWarnedLabel=!1,this._hasWarnedHeight=!1,this._closing=!1,this._cancelPendingOpen=null,this._closeFallback=0,this._pointerDownOnBackdrop=!1,this._closeEmitted=!1,this._handleDismiss=e=>{tJ(e)&&(e.stopPropagation(),this.hide())}}updated(e){if(e.has(`width`)&&(this.width?this.style.setProperty(`--_width`,this.width):this.style.removeProperty(`--_width`)),e.has(`height`)){let e=this.height;e&&e!==`full`&&CSS.supports(`height`,e)?this.style.setProperty(`--_height`,e):this.style.removeProperty(`--_height`)}}get _dialog(){return this.shadowRoot?.querySelector(`dialog`)??null}connectedCallback(){super.connectedCallback(),this.style.containerType=`inline-size`,this.style.containerName=`layout-container`,this.addEventListener(`dismiss`,this._handleDismiss)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`dismiss`,this._handleDismiss)}show(){let e=this._dialog;if(!e){this._cancelPendingOpen?.(),this._cancelPendingOpen=rJ(this,()=>this._dialog,()=>this.show());return}this._cancelPendingOpen?.(),this._cancelPendingOpen=null,this._closeEmitted=!1,e.showModal(),this._manageFocus(),this.dispatchEvent(new CustomEvent(`open`,{bubbles:!0,composed:!0}))}_manageFocus(){if($q(this))return;let e=this._dialog;e&&(e.classList.toggle(`is-pointer-focus`,gi()),e.focus())}hide(){this._cancelPendingOpen?.(),this._cancelPendingOpen=null;let e=this._dialog;if(!e||!e.open||this._closing)return;this._closing=!0,e.classList.add(`is-closing`);let t=()=>{this._closing&&(window.clearTimeout(this._closeFallback),e.classList.remove(`is-closing`),this._closing=!1,e.close(),this._emitClose())};e.addEventListener(`animationend`,t,{once:!0}),requestAnimationFrame(()=>{this._closing&&getComputedStyle(e).animationName===`none`&&t()}),this._closeFallback=window.setTimeout(t,sJ)}_handleDialogPointerDown(e){this._pointerDownOnBackdrop=e.target===this._dialog}_handleDialogClick(e){e.target===this._dialog&&this._pointerDownOnBackdrop&&this.hide()}_emitClose(){this._closeEmitted||(this._closeEmitted=!0,this.dispatchEvent(new CustomEvent(`close`,{bubbles:!1,composed:!0})))}_handleDialogClose(e){e.target===this._dialog&&(this._closing=!1,this._dialog?.classList.remove(`is-closing`),this._emitClose())}_handleCancel(e){e.preventDefault(),this.hide()}render(){return Zq(this)}},oJ.styles=Yq,oJ),j([E({reflect:!0,converter:N(`right`)})],cJ.prototype,`placement`,void 0),j([E({type:String,reflect:!0})],cJ.prototype,`height`,void 0),j([E({type:String,attribute:`accessible-label`})],cJ.prototype,`accessibleLabel`,void 0),j([E({type:String,reflect:!0})],cJ.prototype,`width`,void 0),cJ=j([T(`nldd-sheet`)],cJ)}));w(),O(),BK(),L(),lJ(),bz(),M();var uJ,dJ=(uJ=class extends IK(C){constructor(...e){super(...e),this.width=``,this.stickyTop=``,this.stickyBottom=``,this.sidebarLabel=``,this.noCollapse=!1,this.translations={},this.collapsed=!1,this._lgMin=parseInt(I.lgMin,10),this._hasMeasured=!1,this._sheetOpen=!1,this._onResize=e=>{let t=e[0],n=t.contentBoxSize?.[0]?.inlineSize??t.contentRect.width,r=this._hasMeasured;this._hasMeasured=!0,this._applyCollapsed(n,r)},this._onSheetOpen=()=>{this._sheetOpen=!0},this._onSheetClose=()=>{this._sheetOpen=!1}}get _resolvedSidebarLabel(){return this.sidebarLabel||this._t(`components.sidebar-section.sidebar-label`)}get _sheetDismissText(){return this._t(`components.sidebar-section.sheet-dismiss-action`)}_t(e){return this.translations[e]??Gq[e]}connectedCallback(){super.connectedCallback(),this._ro=new ResizeObserver(this._onResize),this._ro.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this._ro?.disconnect(),this._ro=void 0,this._hasMeasured=!1}firstUpdated(){this._applyCollapsed(this.clientWidth,!1)}_applyCollapsed(e,t){let n=e<this._lgMin&&!this.noCollapse;n!==this.collapsed&&(this.collapsed=n,t&&this.dispatchEvent(new CustomEvent(`collapse-change`,{detail:{collapsed:n},bubbles:!0,composed:!0})))}updated(e){if(super.updated(e),e.has(`width`)){let e=this.width;e&&e!==`full`&&CSS.supports(`max-width`,e)?this.style.setProperty(`--_max-width`,e):this.style.removeProperty(`--_max-width`)}e.has(`stickyTop`)&&this._applyInset(`--_sticky-top`,this.stickyTop),e.has(`stickyBottom`)&&this._applyInset(`--_sticky-bottom`,this.stickyBottom),e.has(`noCollapse`)&&this._applyCollapsed(this.clientWidth,!1),e.has(`collapsed`)&&!this.collapsed&&this._sheet?.hide()}_applyInset(e,t){t&&CSS.supports(`top`,t)?this.style.setProperty(e,t):this.style.removeProperty(e)}show(){this.collapsed&&this._sheet?.show()}hide(){this._sheet?.hide()}toggle(){this.collapsed&&(this._sheetOpen?this._sheet?.hide():this._sheet?.show())}render(){return Wq(this)}},uJ.styles=Uq,uJ);j([E({type:String,reflect:!0})],dJ.prototype,`width`,void 0),j([E({type:String,reflect:!0,attribute:`sticky-top`})],dJ.prototype,`stickyTop`,void 0),j([E({type:String,reflect:!0,attribute:`sticky-bottom`})],dJ.prototype,`stickyBottom`,void 0),j([E({type:String,attribute:`sidebar-label`})],dJ.prototype,`sidebarLabel`,void 0),j([E({type:Boolean,reflect:!0,attribute:`no-collapse`})],dJ.prototype,`noCollapse`,void 0),j([E({type:Object})],dJ.prototype,`translations`,void 0),j([E({type:Boolean,reflect:!0})],dJ.prototype,`collapsed`,void 0),j([lt(`.sidebar-section__sheet`)],dJ.prototype,`_sheet`,void 0),dJ=j([T(`nldd-sidebar-section`)],dJ),w();var fJ=u`
|
|
17005
17010
|
:host {
|
|
@@ -17564,6 +17569,9 @@ else:
|
|
|
17564
17569
|
<div class="window__body">
|
|
17565
17570
|
<slot></slot>
|
|
17566
17571
|
</div>
|
|
17572
|
+
<!-- Inside the dialog, so it escapes the inertness a modal imposes on
|
|
17573
|
+
everything outside it. Plumbing, not consumer API. -->
|
|
17574
|
+
<slot name="notifications"></slot>
|
|
17567
17575
|
</dialog>
|
|
17568
17576
|
`}var IJ={"components.window.accessible-label":`Venster`};w(),O(),xi(),eJ(),nJ(),M();var LJ,RJ=(LJ=class extends C{constructor(...e){super(...e),this.noLightDismiss=!1,this.accessibleLabel=``,this.translations={},this.centered=!1,this.scheme=`inherit`,this._closing=!1,this._hasWarnedLabel=!1,this._closeEmitted=!1,this._handleDialogClose=e=>{e.target===this._dialog&&(this._closing=!1,this._emitClose())},this._pointerDownOnBackdrop=!1,this._handleDialogPointerDown=e=>{this._pointerDownOnBackdrop=this._isOnBackdrop(e)},this._handleDialogClick=e=>{this.noLightDismiss||this._isOnBackdrop(e)&&this._pointerDownOnBackdrop&&this.hide()},this._handleCancel=e=>{e.preventDefault(),this.hide()},this._handleDismiss=e=>{tJ(e)&&(e.stopPropagation(),this.hide())}}get _dialog(){return this.shadowRoot?.querySelector(`dialog`)??null}connectedCallback(){super.connectedCallback(),this.style.containerType=`inline-size`,this.style.containerName=`layout-container`,this.addEventListener(`dismiss`,this._handleDismiss)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`dismiss`,this._handleDismiss)}firstUpdated(){this._applyScheme()}updated(e){this._applyPositionStyles(),e.has(`scheme`)&&this._applyScheme()}_applyScheme(){let e=this._dialog;this.scheme===`light`||this.scheme===`dark`?(this.style.colorScheme=this.scheme,e&&(e.style.colorScheme=this.scheme)):(this.style.removeProperty(`color-scheme`),e&&e.style.removeProperty(`color-scheme`))}_t(e){return this.translations[e]??IJ[e]}get _resolvedAccessibleLabel(){return this.accessibleLabel||this._t(`components.window.accessible-label`)}show(){let e=this._dialog;e&&(this._closeEmitted=!1,e.showModal(),this._applyPositionStyles(),this._manageFocus(),this.dispatchEvent(new CustomEvent(`open`,{bubbles:!0,composed:!0})))}hide(){let e=this._dialog;!e||!e.open||this._closing||(this._closing=!0,e.close(),this._closing=!1,this._emitClose())}_emitClose(){this._closeEmitted||(this._closeEmitted=!0,this.dispatchEvent(new CustomEvent(`close`,{bubbles:!1,composed:!0})))}_manageFocus(){if($q(this))return;let e=this._dialog;e&&(e.classList.toggle(`is-pointer-focus`,gi()),e.focus())}_applyPositionStyles(){let e=this._dialog;if(!e)return;let t=this.top!==void 0||this.left!==void 0||this.right!==void 0||this.bottom!==void 0||this.centered,n=this.centered&&this.top===void 0&&this.bottom===void 0,r=this.centered&&this.left===void 0&&this.right===void 0;e.style.top=this.top??(n?`50%`:this.bottom===void 0?``:`auto`),e.style.bottom=this.bottom??(this.top===void 0?``:`auto`),e.style.left=this.left??(r?`50%`:this.right===void 0?``:`auto`),e.style.right=this.right??(this.left===void 0?``:`auto`),e.style.width=this.width??``,e.style.height=this.height??``,e.style.transform=r||n?`translate(${r?`-50%`:`0`}, ${n?`-50%`:`0`})`:``,e.style.margin=t?`0`:``}_isOnBackdrop(e){let t=this._dialog;if(!t||e.composedPath()[0]!==t)return!1;let n=t.getBoundingClientRect();return e.clientX<n.left||e.clientX>n.right||e.clientY<n.top||e.clientY>n.bottom}render(){return FJ(this)}},LJ.styles=PJ,LJ);j([E({type:Boolean,reflect:!0,attribute:`no-light-dismiss`})],RJ.prototype,`noLightDismiss`,void 0),j([E({type:String,attribute:`accessible-label`})],RJ.prototype,`accessibleLabel`,void 0),j([E({type:Object})],RJ.prototype,`translations`,void 0),j([E({type:String,reflect:!0})],RJ.prototype,`top`,void 0),j([E({type:String,reflect:!0})],RJ.prototype,`left`,void 0),j([E({type:String,reflect:!0})],RJ.prototype,`right`,void 0),j([E({type:String,reflect:!0})],RJ.prototype,`bottom`,void 0),j([E({type:Boolean,reflect:!0})],RJ.prototype,`centered`,void 0),j([E({type:String,reflect:!0})],RJ.prototype,`width`,void 0),j([E({type:String,reflect:!0})],RJ.prototype,`height`,void 0),j([E({type:String,reflect:!0})],RJ.prototype,`scheme`,void 0),RJ=j([T(`nldd-window`)],RJ),w(),L(),A();var zJ=l(I.smMax),BJ=l(I.mdMin),VJ=l(I.mdMax),HJ=l(I.lgMin),UJ=u`
|
|
17569
17577
|
:host {
|
|
@@ -21320,6 +21328,9 @@ else:
|
|
|
21320
21328
|
<slot></slot>
|
|
21321
21329
|
<slot slot="actions" name="actions"></slot>
|
|
21322
21330
|
</nldd-inline-dialog>
|
|
21331
|
+
<!-- Inside the dialog, so it escapes the inertness a modal imposes on
|
|
21332
|
+
everything outside it. Plumbing, not consumer API. -->
|
|
21333
|
+
<slot name="notifications"></slot>
|
|
21323
21334
|
</dialog>
|
|
21324
21335
|
`}w(),M(),O(),P(),xi(),eJ(),iJ(),$a();var rZ,iZ=1e3,aZ=(rZ=class extends C{constructor(...e){super(...e),this.variant=``,this.icon=``,this.text=``,this.supportingText=``,this.horizontalAlignment=``,this.accessibleLabel=``,this._closing=!1,this._cancelPendingOpen=null,this._closeFallback=0,this._pointerDownOnBackdrop=!1,this._handleDialogPointerDown=e=>{this._pointerDownOnBackdrop=this._isOnBackdrop(e)},this._handleBackdropClick=e=>{this._isOnBackdrop(e)&&this._pointerDownOnBackdrop&&this.hide()}}get _dialog(){return this.shadowRoot?.querySelector(`dialog`)??null}show(){let e=this._dialog;if(!e){this._cancelPendingOpen?.(),this._cancelPendingOpen=rJ(this,()=>this._dialog,()=>this.show());return}this._cancelPendingOpen?.(),this._cancelPendingOpen=null,!e.open&&(e.showModal(),this._manageFocus(),this.dispatchEvent(new CustomEvent(`open`,{bubbles:!0,composed:!0})))}_manageFocus(){if($q(this))return;let e=this._dialog;e&&(e.classList.toggle(`is-pointer-focus`,gi()),e.focus())}hide(){this._cancelPendingOpen?.(),this._cancelPendingOpen=null;let e=this._dialog;if(!e||!e.open||this._closing)return;this._closing=!0,e.classList.add(`is-closing`);let t=()=>{this._closing&&(window.clearTimeout(this._closeFallback),e.classList.remove(`is-closing`),this._closing=!1,e.close(),this.dispatchEvent(new CustomEvent(`close`,{bubbles:!1,composed:!0})))};e.addEventListener(`animationend`,t,{once:!0}),requestAnimationFrame(()=>{this._closing&&getComputedStyle(e).animationName===`none`&&t()}),this._closeFallback=window.setTimeout(t,iZ)}_isOnBackdrop(e){let t=this._dialog;if(!t||e.composedPath()[0]!==t)return!1;let n=t.getBoundingClientRect();return e.clientX<n.left||e.clientX>n.right||e.clientY<n.top||e.clientY>n.bottom}_handleCancel(e){e.preventDefault(),this.hide()}render(){return nZ(this)}},rZ.styles=tZ,rZ);j([E({reflect:!0,converter:N(``)})],aZ.prototype,`variant`,void 0),j([E({type:String,reflect:!0})],aZ.prototype,`icon`,void 0),j([E({reflect:!0,converter:N(``)})],aZ.prototype,`text`,void 0),j([E({reflect:!0,attribute:`supporting-text`,converter:N(``)})],aZ.prototype,`supportingText`,void 0),j([E({reflect:!0,attribute:`horizontal-alignment`,converter:N(``)})],aZ.prototype,`horizontalAlignment`,void 0),j([E({type:String,attribute:`accessible-label`})],aZ.prototype,`accessibleLabel`,void 0),aZ=j([T(`nldd-modal-dialog`)],aZ),w(),A();var oZ=u`
|
|
21325
21336
|
:host {
|
|
@@ -21748,7 +21759,7 @@ else:
|
|
|
21748
21759
|
></nldd-icon-button>
|
|
21749
21760
|
</div>
|
|
21750
21761
|
</div>
|
|
21751
|
-
`}var hZ=`nldd-notification-region`,gZ=2,_Z=null,vZ=!1;function yZ(e){return Array.from(e.querySelectorAll(`:scope > nldd-notification`))}function
|
|
21762
|
+
`}var hZ=`nldd-notification-region`,gZ=2,_Z=null,vZ=!1,yZ=[],bZ=!1;function xZ(e){let t=e.shadowRoot?.querySelector(`dialog`)??null;return t?.matches(`:modal`)?t:null}function SZ(){for(;yZ.length;){let e=yZ[yZ.length-1];if(e.isConnected&&xZ(e))return e;yZ.pop()}return document.body}function CZ(e){let t=SZ();if(e.parentElement===t)return;t===document.body?e.removeAttribute(`slot`):e.setAttribute(`slot`,`notifications`);let n=EZ(e);n.forEach(e=>e._setMoving?.(!0)),t.appendChild(e),n.forEach(e=>e._setMoving?.(!1))}function wZ(){let e=document.getElementById(hZ);e&&CZ(e)}function TZ(){bZ||(bZ=!0,document.addEventListener(`open`,e=>{let t=e.target;!t?.shadowRoot||!xZ(t)||(yZ.includes(t)||yZ.push(t),wZ())}),document.addEventListener(`close`,e=>{let t=e.target,n=t?yZ.indexOf(t):-1;n!==-1&&(yZ.splice(n,1),wZ())},!0))}function EZ(e){return Array.from(e.querySelectorAll(`:scope > nldd-notification`))}function DZ(e){return e.querySelector(`:scope > [data-expander]`)}function OZ(e){let t=document.getElementById(hZ);if(t)return t;let n=document.createElement(`div`);return n.id=hZ,n.style.cssText=[`box-sizing: border-box`,`position: fixed`,`z-index: 1000`,`top: max(var(--semantics-overlays-inset), env(safe-area-inset-top))`,`right: max(var(--semantics-overlays-inset), env(safe-area-inset-right))`,`left: auto`,`display: grid`,`align-items: start`,`pointer-events: none`,`max-height: calc(100dvh - 2 * var(--semantics-overlays-inset))`].join(`;`),n.addEventListener(`pointerdown`,()=>{},{passive:!0}),n.addEventListener(`focusin`,()=>FZ(n,!0)),n.addEventListener(`focusout`,e=>{n.contains(e.relatedTarget)||FZ(n,!1)}),n.setAttribute(`role`,`region`),n.setAttribute(`aria-label`,e),n.appendChild(kZ(n)),CZ(n),n}function kZ(e){let t=document.createElement(`div`);return t.dataset.expander=``,t.style.cssText=[`position: absolute`,`z-index: 1000`,`top: 100%`,`right: 0`,`left: 0`,`display: none`,`height: var(--primitives-space-24)`,`pointer-events: auto`].join(`;`),t.addEventListener(`pointerenter`,()=>LZ(e,!0)),t.addEventListener(`pointerleave`,()=>LZ(e,!1)),t.addEventListener(`click`,()=>FZ(e,!0)),t}function AZ(e,t){TZ();let n=OZ(t);CZ(n),e.style.pointerEvents=`auto`,n.prepend(e),MZ(n)}function jZ(e){let t=document.getElementById(hZ);if(t){if(e.parentElement===t&&t.removeChild(e),EZ(t).length===0){zZ(),document.removeEventListener(`pointerdown`,IZ,!0),vZ=!1,t.remove();return}MZ(t)}}function MZ(e){let t=EZ(e);if(t.length<2&&(vZ=!1),e.style.display=vZ?`flex`:`grid`,e.style.flexDirection=vZ?`column`:``,e.style.gap=vZ?`var(--primitives-space-12)`:``,DZ(e).style.display=!vZ&&t.length>1?`block`:`none`,t.forEach((e,n)=>{e.style.gridArea=vZ?``:`1 / 1`,e.style.setProperty(`--_stack-depth`,vZ?`0`:String(Math.min(n,gZ))),e.style.zIndex=String(vZ?n+1:t.length-n),e.style.visibility=!vZ&&n>gZ?`hidden`:``,e._setFront?.(!vZ&&n===0)}),vZ){zZ(),t.forEach(e=>{e.style.height=``}),NZ(e);return}NZ(e),RZ(e,t[0])}function NZ(e){PZ(e,!1),vZ&&(e.scrollHeight<=e.clientHeight||PZ(e,!0))}function PZ(e,t){let n=`var(--semantics-overlays-inset)`,r=`var(--primitives-space-48)`;e.style.overflow=t?`auto`:``,e.style.overscrollBehavior=t?`contain`:``,e.style.padding=t?`${n} ${n} ${r} ${r}`:``,e.style.margin=t?`calc(-1 * ${n}) calc(-1 * ${n}) 0 calc(-1 * ${r})`:``,e.style.maxHeight=t?`100dvh`:`calc(100dvh - 2 * ${n})`}function FZ(e,t){vZ!==t&&(t&&EZ(e).length<2||(vZ=t,t?(LZ(e,!1),document.addEventListener(`pointerdown`,IZ,!0)):document.removeEventListener(`pointerdown`,IZ,!0),MZ(e)))}function IZ(e){let t=document.getElementById(hZ);t&&(e.composedPath().includes(t)||FZ(t,!1))}function LZ(e,t){EZ(e).forEach(e=>{e.style.setProperty(`--_stack-fanned`,t?`1`:`0`)})}function RZ(e,t){zZ(),t&&(typeof ResizeObserver<`u`&&(_Z=new ResizeObserver(()=>BZ(e,t.offsetHeight)),_Z.observe(t)),BZ(e,t.offsetHeight))}function zZ(){_Z?.disconnect(),_Z=null}function BZ(e,t){EZ(e).forEach((e,n)=>{e.style.height=n===0?``:`${t}px`})}var VZ={"components.notification.dismiss-action":`Sluit`,"components.notification.region-label":`Meldingen`};w(),O(),P(),St(),F(),Ii(),M();var HZ,UZ={neutral:`info-circle-filled`,accent:`info-circle-filled`,success:`check-circle-filled`,warning:`exclamation-triangle-filled`,critical:`exclamation-circle-filled`},WZ=1e4,GZ=(HZ=class extends xt(C,VZ){constructor(...e){super(...e),this.variant=`neutral`,this.icon=``,this.text=``,this.supportingText=``,this.duration=WZ,this._hasActions=!1,this._isFront=!1,this._timer=null,this._timerStartedAt=0,this._pointerInside=!1,this._focusInside=!1,this._moving=!1,this._remainingDuration=WZ,this._onActionsSlotChange=e=>{let t=e.target.assignedElements();this._hasActions=t.length>0},this._onPointerMove=()=>{this._pointerInside||(this._pointerInside=!0,this._clearTimer())},this._onPointerLeave=()=>{this._pointerInside=!1,this._resumeTimer()},this._onFocusIn=()=>{this._focusInside=!0,this._clearTimer()},this._onFocusOut=e=>{this.contains(e.relatedTarget)||(this._focusInside=!1,this._resumeTimer())},this._resumeTimer=()=>{!this._isFront||!this._leavesOnItsOwn||this._timer!==null||this._pointerInside||this._focusInside||(this._timerStartedAt=Date.now(),this._timer=window.setTimeout(()=>{this._timer=null,this._dismiss()},this._remainingDuration))},this._onKeyDown=e=>{e.key===`Escape`&&(e.stopPropagation(),this._dismiss())},this._handleDismiss=()=>{this._dismiss()}}get _resolvedIcon(){return this.icon||UZ[this.variant]}get _leavesOnItsOwn(){return this.variant!==`critical`&&this.duration>0}connectedCallback(){super.connectedCallback(),this.setAttribute(`role`,this.variant===`critical`?`alert`:`status`),this._remainingDuration=this.duration,this.addEventListener(`pointermove`,this._onPointerMove),this.addEventListener(`pointerleave`,this._onPointerLeave),this.addEventListener(`focusin`,this._onFocusIn),this.addEventListener(`focusout`,this._onFocusOut),this.addEventListener(`keydown`,this._onKeyDown),queueMicrotask(()=>{if(!this.isConnected||this._moving)return;let e=document.getElementById(`nldd-notification-region`);this.parentElement!==e&&(this._moving=!0,AZ(this,this._t(`components.notification.region-label`)),this._moving=!1)})}disconnectedCallback(){super.disconnectedCallback(),!this._moving&&(this._clearTimer(),this.removeEventListener(`pointermove`,this._onPointerMove),this.removeEventListener(`pointerleave`,this._onPointerLeave),this.removeEventListener(`focusin`,this._onFocusIn),this.removeEventListener(`focusout`,this._onFocusOut),this.removeEventListener(`keydown`,this._onKeyDown),jZ(this))}willUpdate(e){super.willUpdate(e),e.has(`variant`)&&this.setAttribute(`role`,this.variant===`critical`?`alert`:`status`),e.has(`duration`)&&(this._remainingDuration=this.duration)}_setMoving(e){this._moving=e}_setFront(e){this._isFront!==e&&(this._isFront=e,e?this._resumeTimer():this._clearTimer())}_clearTimer(){this._timer!==null&&(window.clearTimeout(this._timer),this._timer=null,this._remainingDuration=Math.max(0,this._remainingDuration-(Date.now()-this._timerStartedAt)))}_dismiss(){this._clearTimer(),this.dispatchEvent(new CustomEvent(`dismiss`,{bubbles:!0,composed:!0}))}render(){return mZ(this)}},HZ.styles=pZ,HZ);j([E({reflect:!0,converter:N(`neutral`)})],GZ.prototype,`variant`,void 0),j([E({reflect:!0,converter:N(``)})],GZ.prototype,`icon`,void 0),j([E({type:String,reflect:!0})],GZ.prototype,`text`,void 0),j([E({type:String,reflect:!0,attribute:`supporting-text`})],GZ.prototype,`supportingText`,void 0),j([E({reflect:!0,converter:N(WZ)})],GZ.prototype,`duration`,void 0),j([D()],GZ.prototype,`_hasActions`,void 0),j([D()],GZ.prototype,`_isFront`,void 0),GZ=j([T(`nldd-notification`)],GZ),w(),A();var KZ=u`
|
|
21752
21763
|
:host {
|
|
21753
21764
|
box-sizing: border-box;
|
|
21754
21765
|
}
|
|
@@ -22079,7 +22090,7 @@ else:
|
|
|
22079
22090
|
color: var(--_content-color);
|
|
22080
22091
|
display: inline-block;
|
|
22081
22092
|
}
|
|
22082
|
-
`;w();function
|
|
22093
|
+
`;w();function qZ(e){let t=[];e._isDot&&t.push(`badge--dot`),e._isIconOnly&&t.push(`badge--icon-only`);let n=[`badge`,...t].join(` `),r=!e.decorative&&(e._isDot||e._isIconOnly);return x`
|
|
22083
22094
|
<span class=${n}
|
|
22084
22095
|
role=${r?`img`:S}
|
|
22085
22096
|
aria-label=${r?e._ariaLabel:S}
|
|
@@ -22093,7 +22104,7 @@ else:
|
|
|
22093
22104
|
`:``}
|
|
22094
22105
|
${e._hasText?x`<span class="badge__text">${e._displayValue}</span>`:``}
|
|
22095
22106
|
</span>
|
|
22096
|
-
`}var
|
|
22107
|
+
`}var JZ={"components.badge.notification-label":`Notificatie`};w(),O(),P(),St(),F(),M();var YZ,XZ=(YZ=class extends xt(C,JZ){constructor(...e){super(...e),this.size=`md`,this.color=`critical`,this.customColor=``,this.pulse=!1,this.text=``,this.number=void 0,this.max=99,this.icon=``,this.accessibleLabel=``,this.decorative=!1}updated(e){e.has(`customColor`)&&(this.customColor?this.style.setProperty(`--_custom-color`,this.customColor):this.style.removeProperty(`--_custom-color`))}get _hasText(){return!!this.text||typeof this.number==`number`}get _isDot(){return!this._hasText&&!this.icon}get _isIconOnly(){return!!this.icon&&!this._hasText}get _displayValue(){return this.text?this.text:typeof this.number==`number`?this.number>this.max?`${this.max}+`:String(this.number):``}get _ariaLabel(){return this.accessibleLabel?this.accessibleLabel:this._hasText?this._displayValue:this._t(`components.badge.notification-label`)}render(){return qZ(this)}},YZ.styles=KZ,YZ);j([E({reflect:!0,converter:N(`md`)})],XZ.prototype,`size`,void 0),j([E({reflect:!0,converter:N(`critical`)})],XZ.prototype,`color`,void 0),j([E({reflect:!0,attribute:`custom-color`,converter:N(``)})],XZ.prototype,`customColor`,void 0),j([E({type:Boolean,reflect:!0})],XZ.prototype,`pulse`,void 0),j([E({reflect:!0,converter:N(``)})],XZ.prototype,`text`,void 0),j([E({type:Number,reflect:!0})],XZ.prototype,`number`,void 0),j([E({reflect:!0,converter:N(99)})],XZ.prototype,`max`,void 0),j([E({type:String})],XZ.prototype,`icon`,void 0),j([E({type:String,attribute:`accessible-label`})],XZ.prototype,`accessibleLabel`,void 0),j([E({type:Boolean,reflect:!0})],XZ.prototype,`decorative`,void 0),XZ=j([T(`nldd-badge`)],XZ),w(),A();var ZZ=u`
|
|
22097
22108
|
:host {
|
|
22098
22109
|
box-sizing: border-box;
|
|
22099
22110
|
}
|
|
@@ -22301,7 +22312,7 @@ else:
|
|
|
22301
22312
|
border: 1px solid CanvasText;
|
|
22302
22313
|
}
|
|
22303
22314
|
}
|
|
22304
|
-
`,
|
|
22315
|
+
`,QZ=u`
|
|
22305
22316
|
|
|
22306
22317
|
|
|
22307
22318
|
/* # Host */
|
|
@@ -22507,7 +22518,7 @@ else:
|
|
|
22507
22518
|
border: 1px solid CanvasText;
|
|
22508
22519
|
}
|
|
22509
22520
|
}
|
|
22510
|
-
`;w(),Ds(),Qt();function
|
|
22521
|
+
`;w(),Ds(),Qt();function $Z(e){let t=e._effectiveTooltip;return t?x`
|
|
22511
22522
|
<div class="progress-bar__segment-indicator">
|
|
22512
22523
|
<nldd-tooltip text=${t}
|
|
22513
22524
|
timing="instant"
|
|
@@ -22523,7 +22534,7 @@ else:
|
|
|
22523
22534
|
<div class="progress-bar__segment-indicator">
|
|
22524
22535
|
<span class="progress-bar__segment-indicator-tooltip-area"></span>
|
|
22525
22536
|
</div>
|
|
22526
|
-
`}function
|
|
22537
|
+
`}function eQ(e,t){let n=e._hasCaption,r=e._indeterminateExiting,i=e._indeterminateEntering,a=(e.indeterminate||r)&&!e._hasSegmentIndicators,o=!e._hasSegmentIndicators&&e.value!==null&&e.value>0&&(!e.indeterminate||i),s=e.indeterminate?void 0:Math.round(e._totalValue),c=e.text||e._t(`components.progress-bar.accessible-label`);return x`
|
|
22527
22538
|
${n?x`
|
|
22528
22539
|
<div class="progress-bar__caption">
|
|
22529
22540
|
<span class="progress-bar__text">${e.text}</span>
|
|
@@ -22549,7 +22560,7 @@ else:
|
|
|
22549
22560
|
<div class=${Xt({"progress-bar__indeterminate-indicator":!0,"is-fading-out":r&&!e.indeterminate,"is-fading-in":i&&e.indeterminate})}></div>
|
|
22550
22561
|
`:S}
|
|
22551
22562
|
</div>
|
|
22552
|
-
`}var
|
|
22563
|
+
`}var tQ={"components.progress-bar.completed-suffix-text":`voltooid`,"components.progress-bar.total-prefix-text":`Totaal`,"components.progress-bar.loading-label":`Aan het laden`,"components.progress-bar.accessible-label":`Voortgang`};w(),O(),P(),Oi(),M();var nQ,rQ,iQ=(nQ=class extends C{constructor(...e){super(...e),this.value=0,this.color=`accent`,this.name=``,this.tooltipText=``,this._autoTooltipText=``}get _effectiveTooltip(){return this.tooltipText||this._autoTooltipText||``}render(){return $Z(this)}},nQ.styles=QZ,nQ);j([E({type:Number,reflect:!0})],iQ.prototype,`value`,void 0),j([E({reflect:!0,converter:N(`accent`)})],iQ.prototype,`color`,void 0),j([E({type:String,reflect:!0})],iQ.prototype,`name`,void 0),j([E({reflect:!0,attribute:`tooltip-text`,converter:N(``)})],iQ.prototype,`tooltipText`,void 0),j([D()],iQ.prototype,`_autoTooltipText`,void 0),iQ=j([T(`nldd-progress-bar-segment-indicator`)],iQ);var aQ=(rQ=class extends C{constructor(...e){super(...e),this.mode=`progress`,this.max=100,this.value=null,this.color=`accent`,this.size=`md`,this.text=``,this.valueFormat=`percentage`,this.valueText=``,this.valueDisplay=`inline`,this.accessibleLabel=``,this.indeterminate=!1,this.translations={},this._segmentIndicators=[],this._indeterminateExiting=!1,this._indeterminateEntering=!1,this._onSlotChangeBound=this._onSlotChange.bind(this)}_t(e){return this.translations[e]??tQ[e]}get _hasSegmentIndicators(){return this._segmentIndicators.length>0}get _totalValue(){return this._hasSegmentIndicators?this._segmentIndicators.reduce((e,t)=>e+Math.max(0,t.value),0):Math.max(0,this.value??0)}get _percentage(){return this.max<=0?0:Math.min(100,this._totalValue/this.max*100)}get _displayValue(){if(this.valueText)return this.valueText;if(this.indeterminate)return``;let e=this._totalValue;switch(this.valueFormat){case`absolute`:return`${e}`;case`fraction`:return`${e} / ${this.max}`;default:return`${Math.round(this._percentage)}%`}}get _ariaValueText(){if(this.accessibleLabel)return this.accessibleLabel;if(this.indeterminate)return this._t(`components.progress-bar.loading-label`);let e=this._t(`components.progress-bar.completed-suffix-text`),t=this._t(`components.progress-bar.total-prefix-text`);if(!this._hasSegmentIndicators)return`${Math.round(this._percentage)}% ${e}`;let n=this._segmentIndicators.filter(e=>e.name).length===this._segmentIndicators.length&&this._segmentIndicators.length>0,r=this._segmentIndicators.filter(e=>e.value>0).map(e=>{let t=this.max>0?Math.round(e.value/this.max*100):0;return e.name?`${e.name}: ${t}%`:`${t}%`});if(this.mode===`distribution`)return r.join(`, `);let i=Math.round(this._percentage);return n?`${r.join(`, `)}. ${t} ${i}% ${e}.`:`${i}% ${e}`}get _hasCaption(){return!!this.text||this.valueDisplay===`inline`&&!!this._displayValue}firstUpdated(){this._syncSegmentIndicators()}willUpdate(e){if(e.has(`indeterminate`)){let t=e.get(`indeterminate`);t===!0&&!this.indeterminate?this._beginIndeterminateExit():t===!1&&this.indeterminate&&this._beginIndeterminateEnter()}}updated(){this._syncSegmentIndicators()}_beginIndeterminateExit(){this._cancelIndeterminateEnter(),this._indeterminateExiting=!0,this._exitTimeout=setTimeout(()=>{this._indeterminateExiting=!1,this._exitTimeout=void 0},300)}_beginIndeterminateEnter(){this._cancelIndeterminateExit(),this._indeterminateEntering=!0,this._enterTimeout=setTimeout(()=>{this._indeterminateEntering=!1,this._enterTimeout=void 0},300)}_cancelIndeterminateExit(){this._exitTimeout&&(clearTimeout(this._exitTimeout),this._exitTimeout=void 0),this._indeterminateExiting=!1}_cancelIndeterminateEnter(){this._enterTimeout&&(clearTimeout(this._enterTimeout),this._enterTimeout=void 0),this._indeterminateEntering=!1}_formatSegmentIndicatorTooltip(e){if(this.valueDisplay===`none`)return e.name??``;let t=Math.max(0,e.value),n=this.max>0?Math.round(t/this.max*100):0,r;switch(this.valueFormat){case`absolute`:r=`${t}`;break;case`fraction`:r=`${t} / ${this.max}`;break;default:r=`${n}%`}return e.name?`${e.name}: ${r}`:r}disconnectedCallback(){super.disconnectedCallback(),this._cancelIndeterminateExit(),this._cancelIndeterminateEnter(),this._attributeObserver?.disconnect()}_onSlotChange(){let e=(this.shadowRoot?.querySelector(`slot:not([name])`))?.assignedElements({flatten:!0})??[];this._segmentIndicators=e.filter(e=>e instanceof iQ),this._attributeObserver?.disconnect(),this._attributeObserver=new MutationObserver(()=>this.requestUpdate());for(let e of this._segmentIndicators)this._attributeObserver.observe(e,{attributes:!0,attributeFilter:[`value`,`color`,`name`,`tooltip-text`]})}_syncSegmentIndicators(){let e=this._totalValue,t=e>this.max?e:this.max,n=this.shadowRoot?.querySelector(`nldd-progress-bar-segment-indicator`)??null,r=n?[n,...this._segmentIndicators]:[...this._segmentIndicators],i=r.filter(e=>Math.max(0,e.value)>0).length<=1&&this.valueDisplay!==`tooltip`,a=this._indeterminateExiting,o=this._indeterminateEntering;for(let e of r){let n=Math.max(0,e.value);if(n<=0){e.hidden=!0,e.removeAttribute(`data-mode`),e._autoTooltipText=``;continue}e.hidden=!1;let r=t>0?n/t*100:0;e.style.setProperty(`--context-progress-bar-segment-indicator-width`,`${r}%`),e.setAttribute(`data-mode`,this.mode),e._autoTooltipText=i?``:this._formatSegmentIndicatorTooltip(e),e.toggleAttribute(`data-grow`,a),e.toggleAttribute(`data-shrink`,o)}}render(){return eQ(this,this._onSlotChangeBound)}},rQ.styles=ZZ,rQ);j([E({reflect:!0,converter:N(`progress`)})],aQ.prototype,`mode`,void 0),j([E({type:Number,reflect:!0})],aQ.prototype,`max`,void 0),j([E({type:Number,reflect:!0})],aQ.prototype,`value`,void 0),j([E({reflect:!0,converter:N(`accent`)})],aQ.prototype,`color`,void 0),j([E({reflect:!0,converter:N(`md`)})],aQ.prototype,`size`,void 0),j([E({reflect:!0,converter:N(``)})],aQ.prototype,`text`,void 0),j([E({reflect:!0,attribute:`value-format`,converter:N(`percentage`)})],aQ.prototype,`valueFormat`,void 0),j([E({type:String,reflect:!0,attribute:`value-text`})],aQ.prototype,`valueText`,void 0),j([E({reflect:!0,attribute:`value-display`,converter:N(`inline`)})],aQ.prototype,`valueDisplay`,void 0),j([E({type:String,reflect:!0,attribute:`accessible-label`})],aQ.prototype,`accessibleLabel`,void 0),j([E({type:Boolean,reflect:!0})],aQ.prototype,`indeterminate`,void 0),j([E({type:Object})],aQ.prototype,`translations`,void 0),j([D()],aQ.prototype,`_segmentIndicators`,void 0),j([D()],aQ.prototype,`_indeterminateExiting`,void 0),j([D()],aQ.prototype,`_indeterminateEntering`,void 0),aQ=j([T(`nldd-progress-bar`)],aQ),w(),A();var oQ=u`
|
|
22553
22564
|
:host {
|
|
22554
22565
|
box-sizing: border-box;
|
|
22555
22566
|
}
|
|
@@ -22819,11 +22830,11 @@ else:
|
|
|
22819
22830
|
stroke: CanvasText;
|
|
22820
22831
|
}
|
|
22821
22832
|
}
|
|
22822
|
-
`,
|
|
22833
|
+
`,sQ=u`
|
|
22823
22834
|
:host {
|
|
22824
22835
|
display: none;
|
|
22825
22836
|
}
|
|
22826
|
-
`;w(),Ds();function
|
|
22837
|
+
`;w(),Ds();function cQ(e){return e<=16?3:e<=28?4:e<=40?5:e<=48?6:e<=64?7:8}function lQ(e){return 50-cQ(e)*100/e/2}function uQ(e){return 2*Math.PI*lQ(e)}function dQ(e){return 100/e}function fQ(e,t){let n=e._tooltipText,r=e._ariaValueText,i=e.indeterminate?void 0:Math.round(e._totalValue),a=e._indeterminateExiting,o=(e.indeterminate||a)&&!e._hasSegmentIndicators,s=!e.indeterminate||e._indeterminateEntering?e._buildArcs():[],c=Number(e.size)||28,l=lQ(c),u=uQ(c),d=dQ(c).toFixed(3),f=[...new Set(s.map(e=>e.color))],p=e._uid,m=e.text||e._t(`components.progress-circle.accessible-label`),h=x`
|
|
22827
22838
|
<div class="progress-circle__circle"
|
|
22828
22839
|
role="progressbar"
|
|
22829
22840
|
aria-label=${m}
|
|
@@ -22909,7 +22920,7 @@ else:
|
|
|
22909
22920
|
${e.valueDisplay===`inline`&&e._displayValue?x`<span class="progress-circle__supporting-text">${e._displayValue}</span>`:S}
|
|
22910
22921
|
</div>
|
|
22911
22922
|
`:S}
|
|
22912
|
-
`}var
|
|
22923
|
+
`}var pQ={"components.progress-circle.completed-suffix-text":`voltooid`,"components.progress-circle.total-prefix-text":`Totaal`,"components.progress-circle.loading-label":`Aan het laden`,"components.progress-circle.accessible-label":`Voortgang`};w(),O(),P(),Oi(),M();var mQ,hQ,gQ,_Q=(mQ=class extends C{constructor(...e){super(...e),this.value=0,this.color=`accent`,this.name=``}render(){return S}},mQ.styles=sQ,mQ);j([E({type:Number,reflect:!0})],_Q.prototype,`value`,void 0),j([E({reflect:!0,converter:N(`accent`)})],_Q.prototype,`color`,void 0),j([E({type:String,reflect:!0})],_Q.prototype,`name`,void 0),_Q=j([T(`nldd-progress-circle-segment-indicator`)],_Q);var vQ=(hQ=class extends C{constructor(...e){super(...e),this.mode=`progress`,this.max=100,this.value=null,this.color=`accent`,this.size=`28`,this.text=``,this.valueFormat=`percentage`,this.valueText=``,this.valueDisplay=`tooltip`,this.accessibleLabel=``,this.indeterminate=!1,this.translations={},this._segmentIndicators=[],this._indeterminateExiting=!1,this._indeterminateEntering=!1,this._arcsAtZero=!1,this._uid=`pc-${gQ._idCounter++}`,this._onSlotChangeBound=this._onSlotChange.bind(this)}_t(e){return this.translations[e]??pQ[e]}get _hasSegmentIndicators(){return this._segmentIndicators.length>0}get _totalValue(){return this._hasSegmentIndicators?this._segmentIndicators.reduce((e,t)=>e+Math.max(0,t.value),0):Math.max(0,this.value??0)}get _percentage(){return this.max<=0?0:Math.min(100,this._totalValue/this.max*100)}get _displayValue(){return this.valueText?this.valueText:this.indeterminate?``:this._formatValuePart(this._totalValue,Math.round(this._percentage))}get _tooltipText(){if(this.valueDisplay!==`tooltip`)return``;if(this.indeterminate)return this._t(`components.progress-circle.loading-label`);if(this.valueText)return this.valueText;if(!this._hasSegmentIndicators){let e=Math.max(0,this.value??0),t=this.max>0?Math.round(e/this.max*100):0;return this._formatValuePart(e,t)}let e=this._segmentIndicators.filter(e=>e.name).length===this._segmentIndicators.length&&this._segmentIndicators.length>0,t=this._segmentIndicators.filter(e=>e.value>0).map(e=>{let t=this.max>0?Math.round(e.value/this.max*100):0,n=this._formatValuePart(e.value,t);return e.name?`${e.name}: ${n}`:n});if(this.mode===`distribution`)return t.join(`, `);let n=Math.round(this._percentage),r=this._formatValuePart(this._totalValue,n);if(e){let e=this._t(`components.progress-circle.total-prefix-text`);return`${t.join(`, `)}. ${e} ${r}`}return r}get _ariaValueText(){if(this.accessibleLabel)return this.accessibleLabel;if(this.indeterminate)return this._t(`components.progress-circle.loading-label`);let e=this._t(`components.progress-circle.completed-suffix-text`),t=this._t(`components.progress-circle.total-prefix-text`);if(!this._hasSegmentIndicators)return`${Math.round(this._percentage)}% ${e}`;let n=this._segmentIndicators.filter(e=>e.name).length===this._segmentIndicators.length&&this._segmentIndicators.length>0,r=this._segmentIndicators.filter(e=>e.value>0).map(e=>{let t=this.max>0?Math.round(e.value/this.max*100):0,n=this._formatValuePart(e.value,t);return e.name?`${e.name}: ${n}`:n});if(this.mode===`distribution`)return r.join(`, `);let i=Math.round(this._percentage);return n?`${r.join(`, `)}. ${t} ${i}% ${e}.`:`${i}% ${e}`}_formatValuePart(e,t){switch(this.valueFormat){case`absolute`:return`${e}`;case`fraction`:return`${e} / ${this.max}`;default:return`${t}%`}}willUpdate(e){if(e.has(`indeterminate`)){let t=e.get(`indeterminate`);t===!0&&!this.indeterminate?this._beginIndeterminateExit():t===!1&&this.indeterminate&&this._beginIndeterminateEnter()}}disconnectedCallback(){super.disconnectedCallback(),this._cancelIndeterminateExit(),this._cancelIndeterminateEnter(),this._attributeObserver?.disconnect()}_beginIndeterminateExit(){this._cancelIndeterminateEnter(),this._indeterminateExiting=!0,this._arcsAtZero=!0,this.updateComplete.then(()=>{this._growRafId=requestAnimationFrame(()=>{this._growRafId=void 0,this._arcsAtZero=!1})}),this._exitTimeout=setTimeout(()=>{this._indeterminateExiting=!1,this._exitTimeout=void 0},300)}_beginIndeterminateEnter(){this._cancelIndeterminateExit(),this._indeterminateEntering=!0,this._enterTimeout=setTimeout(()=>{this._indeterminateEntering=!1,this._enterTimeout=void 0},300)}_cancelIndeterminateExit(){this._exitTimeout&&(clearTimeout(this._exitTimeout),this._exitTimeout=void 0),this._growRafId!==void 0&&(cancelAnimationFrame(this._growRafId),this._growRafId=void 0),this._indeterminateExiting=!1,this._arcsAtZero=!1}_cancelIndeterminateEnter(){this._enterTimeout&&(clearTimeout(this._enterTimeout),this._enterTimeout=void 0),this._indeterminateEntering=!1}_onSlotChange(){let e=(this.shadowRoot?.querySelector(`slot:not([name])`))?.assignedElements({flatten:!0})??[];this._segmentIndicators=e.filter(e=>e instanceof _Q),this._attributeObserver?.disconnect(),this._attributeObserver=new MutationObserver(()=>this.requestUpdate());for(let e of this._segmentIndicators)this._attributeObserver.observe(e,{attributes:!0,attributeFilter:[`value`,`color`,`name`]})}_buildArcs(){let e=[],t=this._hasSegmentIndicators?this._segmentIndicators.map(e=>({value:Math.max(0,e.value),color:e.color})):this.value===null?[]:[{value:Math.max(0,this.value),color:this.color}],n=Number(this.size)||28,r=cQ(n),i=t.length>1||this.mode===`distribution`,a=this.mode!==`distribution`,o=((i?a?1:2:0)+(a&&i?r:0))*(100/n),s=uQ(n),c=this._totalValue,l=c>this.max?c:this.max,u=0;for(let n of t){let t=(l>0?n.value/l:0)*s,r=this._arcsAtZero||n.value<=0?0:Math.max(0,t-o);e.push({length:r,offset:u,color:n.color}),u+=t}return e}render(){return fQ(this,this._onSlotChangeBound)}updated(e){(e.has(`_indeterminateEntering`)||e.has(`_indeterminateExiting`))&&this._syncDynamicAttributes()}_syncDynamicAttributes(){let e=this.shadowRoot?.querySelectorAll(`.progress-circle__segment-indicator`);if(e)for(let t of e)this._indeterminateEntering?t.setAttribute(`data-shrink`,``):t.removeAttribute(`data-shrink`);let t=this.shadowRoot?.querySelector(`.progress-circle__indeterminate-indicator`);t&&(this._indeterminateExiting&&!this.indeterminate?t.setAttribute(`data-fade`,`out`):t.removeAttribute(`data-fade`))}},gQ=hQ,hQ.styles=oQ,hQ._idCounter=0,hQ);j([E({reflect:!0,converter:N(`progress`)})],vQ.prototype,`mode`,void 0),j([E({type:Number,reflect:!0})],vQ.prototype,`max`,void 0),j([E({type:Number,reflect:!0})],vQ.prototype,`value`,void 0),j([E({reflect:!0,converter:N(`accent`)})],vQ.prototype,`color`,void 0),j([E({reflect:!0,converter:N(`28`)})],vQ.prototype,`size`,void 0),j([E({reflect:!0,converter:N(``)})],vQ.prototype,`text`,void 0),j([E({reflect:!0,attribute:`value-format`,converter:N(`percentage`)})],vQ.prototype,`valueFormat`,void 0),j([E({type:String,reflect:!0,attribute:`value-text`})],vQ.prototype,`valueText`,void 0),j([E({reflect:!0,attribute:`value-display`,converter:N(`tooltip`)})],vQ.prototype,`valueDisplay`,void 0),j([E({type:String,reflect:!0,attribute:`accessible-label`})],vQ.prototype,`accessibleLabel`,void 0),j([E({type:Boolean,reflect:!0})],vQ.prototype,`indeterminate`,void 0),j([E({type:Object})],vQ.prototype,`translations`,void 0),j([D()],vQ.prototype,`_segmentIndicators`,void 0),j([D()],vQ.prototype,`_indeterminateExiting`,void 0),j([D()],vQ.prototype,`_indeterminateEntering`,void 0),j([D()],vQ.prototype,`_arcsAtZero`,void 0),vQ=gQ=j([T(`nldd-progress-circle`)],vQ);var yQ={"components.step-indicator.accessible-label":`Voortgang`,"components.step-indicator.status-past-label":`Afgerond`,"components.step-indicator.status-current-label":`Huidige stap`,"components.step-indicator.status-future-label":`Nog te doen`,"components.step-indicator.compact-text":`Stap {current} van {total}`};w(),L(),A();var bQ=l(I.smMax),xQ=u`
|
|
22913
22924
|
:host {
|
|
22914
22925
|
box-sizing: border-box;
|
|
22915
22926
|
}
|
|
@@ -22960,7 +22971,7 @@ else:
|
|
|
22960
22971
|
|
|
22961
22972
|
/* Stays in the DOM for assistive tech when the compact view takes over.
|
|
22962
22973
|
Standard visually-hidden recipe. */
|
|
22963
|
-
@container (max-width: ${
|
|
22974
|
+
@container (max-width: ${bQ}) {
|
|
22964
22975
|
position: absolute;
|
|
22965
22976
|
width: 1px;
|
|
22966
22977
|
height: 1px;
|
|
@@ -22979,7 +22990,7 @@ else:
|
|
|
22979
22990
|
color: var(--_compact-text-color);
|
|
22980
22991
|
font: var(--primitives-font-body-md-regular-flat);
|
|
22981
22992
|
|
|
22982
|
-
@container (max-width: ${
|
|
22993
|
+
@container (max-width: ${bQ}) {
|
|
22983
22994
|
display: flex;
|
|
22984
22995
|
}
|
|
22985
22996
|
}
|
|
@@ -22995,7 +23006,7 @@ else:
|
|
|
22995
23006
|
margin-top: var(--_compact-bar-gap);
|
|
22996
23007
|
gap: var(--_compact-bar-segment-gap);
|
|
22997
23008
|
|
|
22998
|
-
@container (max-width: ${
|
|
23009
|
+
@container (max-width: ${bQ}) {
|
|
22999
23010
|
display: flex;
|
|
23000
23011
|
}
|
|
23001
23012
|
}
|
|
@@ -23010,7 +23021,7 @@ else:
|
|
|
23010
23021
|
.step-indicator__compact-bar-segment[data-filled] {
|
|
23011
23022
|
background-color: var(--_progress-color);
|
|
23012
23023
|
}
|
|
23013
|
-
`,
|
|
23024
|
+
`,SQ=u`
|
|
23014
23025
|
:host {
|
|
23015
23026
|
box-sizing: border-box;
|
|
23016
23027
|
}
|
|
@@ -23196,7 +23207,7 @@ else:
|
|
|
23196
23207
|
background-color: var(--_control-hover-background-color);
|
|
23197
23208
|
}
|
|
23198
23209
|
}
|
|
23199
|
-
`;w();function
|
|
23210
|
+
`;w();function CQ(e){let t=e.accessibleLabel||e._t(`components.step-indicator.accessible-label`),n=e.resolvedCurrent,r=e.total,i=e.currentItem?.text??``,a=e._t(`components.step-indicator.compact-text`,{current:n,total:r});return x`
|
|
23200
23211
|
<nav class="step-indicator"
|
|
23201
23212
|
aria-label=${t||S}
|
|
23202
23213
|
>
|
|
@@ -23223,7 +23234,7 @@ else:
|
|
|
23223
23234
|
</div>
|
|
23224
23235
|
`:S}
|
|
23225
23236
|
</nav>
|
|
23226
|
-
`}function
|
|
23237
|
+
`}function wQ(e){let t=e.resolvedStatus,n=e.icon?x`<nldd-icon class="step-indicator__item-icon" name=${e.icon}></nldd-icon>`:t===`past`?x`<nldd-icon class="step-indicator__item-icon" name="check-mark"></nldd-icon>`:x`<span class="step-indicator__item-number">${e._index}</span>`,r=x`
|
|
23227
23238
|
<span class="step-indicator__item-marker"
|
|
23228
23239
|
aria-hidden="true"
|
|
23229
23240
|
>${n}</span>
|
|
@@ -23243,7 +23254,7 @@ else:
|
|
|
23243
23254
|
>${r}</button>
|
|
23244
23255
|
`:r}
|
|
23245
23256
|
</div>
|
|
23246
|
-
`}w(),O(),P(),St(),F(),M();var
|
|
23257
|
+
`}w(),O(),P(),St(),F(),M();var TQ,EQ,DQ=class extends C{constructor(...e){super(...e),this.text=``,this.icon=``,this.href=``,this.button=!1,this._derivedStatus=`future`,this._index=1,this._statusText=``}get resolvedStatus(){return this.status??this._derivedStatus}connectedCallback(){super.connectedCallback(),this.hasAttribute(`role`)||this.setAttribute(`role`,`listitem`)}updated(e){(e.has(`status`)||e.has(`_derivedStatus`))&&(this.resolvedStatus===`current`?this.setAttribute(`aria-current`,`step`):this.removeAttribute(`aria-current`))}render(){return wQ(this)}};TQ=DQ,TQ.styles=SQ,j([E({type:String,reflect:!0})],DQ.prototype,`status`,void 0),j([E({reflect:!0,converter:N(``)})],DQ.prototype,`text`,void 0),j([E({type:String})],DQ.prototype,`icon`,void 0),j([E({type:String,reflect:!0})],DQ.prototype,`href`,void 0),j([E({type:Boolean,reflect:!0})],DQ.prototype,`button`,void 0),j([D()],DQ.prototype,`_derivedStatus`,void 0),j([D()],DQ.prototype,`_index`,void 0),j([D()],DQ.prototype,`_statusText`,void 0),customElements.get(`nldd-step-indicator-item`)||customElements.define(`nldd-step-indicator-item`,DQ);var OQ=(EQ=class extends xt(C,yQ){constructor(...e){super(...e),this.accessibleLabel=``,this.current=1,this._items=[],this._onSlotChange=e=>{let t=e.target;this._items=t.assignedElements({flatten:!0}).filter(e=>e.localName===`nldd-step-indicator-item`)}}get total(){return this._items.length}get resolvedCurrent(){return this.total===0?this.current:Math.min(Math.max(this.current,1),this.total)}get currentItem(){return this._items.find(e=>e.resolvedStatus===`current`)??this._items[this.resolvedCurrent-1]}willUpdate(e){super.willUpdate(e),(e.has(`current`)||e.has(`_items`))&&this._syncItems()}_syncItems(){let e=this.resolvedCurrent;this._items.forEach((t,n)=>{let r=n+1;t._index=r,t._derivedStatus=r<e?`past`:r===e?`current`:`future`,t._statusText=this._t(`components.step-indicator.status-${t.resolvedStatus}-label`)})}render(){return CQ(this)}},EQ.styles=xQ,EQ);j([E({type:String,attribute:`accessible-label`})],OQ.prototype,`accessibleLabel`,void 0),j([E({type:Number,reflect:!0})],OQ.prototype,`current`,void 0),j([D()],OQ.prototype,`_items`,void 0),OQ=j([T(`nldd-step-indicator`)],OQ),w(),A();var kQ=u`
|
|
23247
23258
|
:host {
|
|
23248
23259
|
box-sizing: border-box;
|
|
23249
23260
|
}
|
|
@@ -23384,7 +23395,7 @@ else:
|
|
|
23384
23395
|
flex-shrink: 0;
|
|
23385
23396
|
width: var(--_action-icon-size);
|
|
23386
23397
|
}
|
|
23387
|
-
`;w();function
|
|
23398
|
+
`;w();function AQ(e){let t=!!(e.href||e.button),n=x`
|
|
23388
23399
|
<span class="status-bar__text">${e.text}</span>
|
|
23389
23400
|
${t?x`
|
|
23390
23401
|
<span class="status-bar__action-icon"
|
|
@@ -23403,7 +23414,7 @@ else:
|
|
|
23403
23414
|
<button class="status-bar"
|
|
23404
23415
|
type="button"
|
|
23405
23416
|
>${n}</button>
|
|
23406
|
-
`:x`<div class="status-bar">${n}</div>`}w(),O(),P(),F(),M();var
|
|
23417
|
+
`:x`<div class="status-bar">${n}</div>`}w(),O(),P(),F(),M();var jQ,MQ=(jQ=class extends C{constructor(...e){super(...e),this.variant=`neutral`,this.text=``,this.href=``,this.target=``,this.rel=``,this.button=!1}connectedCallback(){super.connectedCallback(),this._applyAriaForVariant(this.variant)}_resolvedRel(){return this.rel?this.rel:this.target===`_blank`?`noopener noreferrer`:``}updated(e){e.has(`variant`)&&this._applyAriaForVariant(this.variant)}_applyAriaForVariant(e){e===`critical`?(this.setAttribute(`role`,`alert`),this.removeAttribute(`aria-live`)):(this.setAttribute(`role`,`status`),this.setAttribute(`aria-live`,`polite`)),this.setAttribute(`aria-atomic`,`true`)}render(){return AQ(this)}},jQ.styles=kQ,jQ);j([E({reflect:!0,converter:N(`neutral`)})],MQ.prototype,`variant`,void 0),j([E({reflect:!0,converter:N(``)})],MQ.prototype,`text`,void 0),j([E({type:String})],MQ.prototype,`href`,void 0),j([E({type:String})],MQ.prototype,`target`,void 0),j([E({type:String})],MQ.prototype,`rel`,void 0),j([E({type:Boolean,reflect:!0})],MQ.prototype,`button`,void 0),MQ=j([T(`nldd-status-bar`)],MQ),w(),A();var NQ=u`
|
|
23407
23418
|
:host {
|
|
23408
23419
|
box-sizing: border-box;
|
|
23409
23420
|
}
|
|
@@ -23730,7 +23741,7 @@ else:
|
|
|
23730
23741
|
white-space: nowrap;
|
|
23731
23742
|
clip-path: inset(50%);
|
|
23732
23743
|
}
|
|
23733
|
-
`;w();function
|
|
23744
|
+
`;w();function PQ(e){return x`
|
|
23734
23745
|
<slot
|
|
23735
23746
|
@slotchange=${e._handleSlotChange}
|
|
23736
23747
|
@focusin=${e._handleAdvisedInteraction}
|
|
@@ -23797,4 +23808,4 @@ else:
|
|
|
23797
23808
|
</svg>
|
|
23798
23809
|
`}
|
|
23799
23810
|
</div>
|
|
23800
|
-
`}var OQ={"components.just-in-time-education.accessible-label":`Uitleg`,"components.just-in-time-education.dismiss-action":`Verberg`};w(),O(),ci(),St(),P(),xi(),Ii(),M();var kQ,AQ,jQ=0,MQ=(kQ=class extends xt(C,OQ){constructor(...e){super(...e),this.active=!1,this.text=``,this.supportingText=``,this.placement=`auto`,this.dismissable=!1,this.arrowLength=``,this.noArrow=!1,this._cleanupAutoUpdate=null,this._attachTimeout=null,this._revealTimeout=null,this._attributeObserver=null,this._boundDocumentInteraction=e=>this._handleDocumentInteraction(e),this._resolvedSide=null,this._lastViewportWidth=0,this._lastViewportHeight=0,this._arrowMarkerId=`nldd-jite-arrow-${++jQ}`}updated(e){if(e.has(`arrowLength`)&&(this.arrowLength&&CSS.supports(`width`,this.arrowLength)?this.style.setProperty(`--_arrow-length`,this.arrowLength):this.style.removeProperty(`--_arrow-length`)),e.has(`active`))this.active?this._open():this._closePopover();else if(this.active&&(e.has(`placement`)||e.has(`text`)||e.has(`supportingText`)||e.has(`arrowLength`)||e.has(`noArrow`))){this._resolvedSide=null;let e=this._getControl(),t=this._containerEl;e&&t&&this._updatePosition(e,t)}}get _containerEl(){return this.shadowRoot?.querySelector(`.just-in-time-education`)??null}get _cardEl(){return this.shadowRoot?.querySelector(`.just-in-time-education__main`)??null}get _announcerEl(){return this.shadowRoot?.querySelector(`.just-in-time-education__announcer`)??null}_getControl(){return(this.shadowRoot?.querySelector(`slot`))?.assignedElements({flatten:!0})?.[0]??null}_getControls(){return(this.shadowRoot?.querySelector(`slot`))?.assignedElements({flatten:!0})??[]}_forwardAttribute(e){if(AQ._ownAttributes.has(e))return;let t=this.hasAttribute(e),n=this.getAttribute(e)??``;for(let r of this._getControls())t?r.setAttribute(e,n):r.removeAttribute(e)}_handleSlotChange(){for(let e of Array.from(this.attributes))this._forwardAttribute(e.name)}_open(){let e=this._containerEl;if(!e)return;e.matches(`:popover-open`)||(e.removeAttribute(`positioned`),e.showPopover()),this._startPositioning(),this._getControl()?(this._revealTimeout&&clearTimeout(this._revealTimeout),this._revealTimeout=setTimeout(()=>{this._revealTimeout=null,this.active&&e.setAttribute(`positioned`,``)},200)):e.setAttribute(`positioned`,``);let t=this._announcerEl;t&&(t.textContent=[this.text,this.supportingText].filter(Boolean).join(`. `)),this.dismissable&&(e.classList.toggle(`is-pointer-focus`,gi()),e.focus(),this._attachTimeout&&clearTimeout(this._attachTimeout),this._attachTimeout=setTimeout(()=>{this._attachTimeout=null,this.active&&(document.addEventListener(`click`,this._boundDocumentInteraction,!0),document.addEventListener(`keydown`,this._boundDocumentInteraction,!0))},0))}_closePopover(){let e=this._containerEl,t=e?.matches(`:focus-within`)??!1;e?.matches(`:popover-open`)&&e.hidePopover(),this._stopPositioning();let n=this._announcerEl;n&&(n.textContent=``),t&&this._getControl()?.focus(),this._attachTimeout&&(clearTimeout(this._attachTimeout),this._attachTimeout=null),this._revealTimeout&&(clearTimeout(this._revealTimeout),this._revealTimeout=null),document.removeEventListener(`click`,this._boundDocumentInteraction,!0),document.removeEventListener(`keydown`,this._boundDocumentInteraction,!0)}_startPositioning(){let e=this._getControl(),t=this._containerEl;!e||!t||(this._stopPositioning(),this._cleanupAutoUpdate=Qr(e,t,()=>this._updatePosition(e,t)))}_stopPositioning(){this._cleanupAutoUpdate?.(),this._cleanupAutoUpdate=null,this._resolvedSide=null}async _updatePosition(e,t){let n=getComputedStyle(this),r=parseInt(n.getPropertyValue(`--_offset`),10),i=parseInt(n.getPropertyValue(`--_shift-padding`),10),a=window.innerWidth,o=window.innerHeight;(this._resolvedSide===null||a!==this._lastViewportWidth||o!==this._lastViewportHeight)&&(this._resolvedSide=this._chooseSide(e),this._lastViewportWidth=a,this._lastViewportHeight=o);let s=this._resolvedSide;this.getAttribute(`data-arrow-side`)!==s&&this.setAttribute(`data-arrow-side`,s);let c=this._cardEl?.getBoundingClientRect().height??0,l=e.getBoundingClientRect(),u=`9999px`;s===`top`?u=`${Math.max(0,l.top+window.scrollY-c)}px`:s===`bottom`?u=`${Math.max(0,document.documentElement.scrollHeight-(l.bottom+window.scrollY)-c)}px`:s===`left`?u=`${Math.max(0,l.left)}px`:s===`right`&&(u=`${Math.max(0,window.innerWidth-l.right)}px`),this.style.setProperty(`--_available-distance`,u);let d=s===`top`||s===`bottom`,f=parseFloat(n.getPropertyValue(`--primitives-space-40`))||40,p=parseFloat(u);if(!d){let e=(parseFloat(n.getPropertyValue(`--_text-width`))||320)+(this.dismissable?parseFloat(n.getPropertyValue(`--_dismiss-width`))||44:0);p-=e}let m=!this.noArrow&&p<f;this.toggleAttribute(`data-arrow-collapsed`,m);let{x:h,y:g}=await si(e,t,{placement:s,middleware:d?[ri(r),ii({padding:i})]:[ri(r)]});t.style.left=`${h}px`,t.style.top=`${g}px`,this._revealTimeout&&(clearTimeout(this._revealTimeout),this._revealTimeout=null),t.setAttribute(`positioned`,``),this._updateArrow(e,t,s)}_chooseSide(e){if(this.placement!==`auto`)return this.placement;let t=e.getBoundingClientRect(),n=document.documentElement.scrollHeight,r={top:t.top+window.scrollY,bottom:n-(t.bottom+window.scrollY),left:t.left,right:window.innerWidth-t.right},i=`bottom`;for(let e of[`top`,`bottom`,`left`,`right`])r[e]>r[i]&&(i=e);return i}_updateArrow(e,t,n){let r=this.shadowRoot?.querySelector(`.just-in-time-education__arrow`),i=this.shadowRoot?.querySelector(`.just-in-time-education__arrow-path`),a=this._cardEl;if(!r||!i||!a||this.hasAttribute(`data-arrow-collapsed`))return;let o=t.getBoundingClientRect(),s=a.getBoundingClientRect(),c=e.getBoundingClientRect(),l=s.left+s.width/2,u=s.top+s.height/2,d=c.left+c.width/2,f=c.top+c.height/2,p=n.split(`-`)[0],m,h,g,_,v,y;p===`top`?(m=l,h=s.bottom,g=d,_=c.top-6,v=0,y=1):p===`bottom`?(m=l,h=s.top,g=d,_=c.bottom+6,v=0,y=-1):p===`left`?(m=s.right,h=u,g=c.left-6,_=f,v=1,y=0):(m=s.left,h=u,g=c.right+6,_=f,v=-1,y=0);let ee=g-10*v,b=_-10*y,te=.25,ne=ee-m,re=b-h,ie=p===`top`||p===`bottom`,ae=Math.min(Math.hypot(ne,re)*.18,9),oe=(m+ee)/2+(ie?ae:0),se=(h+b)/2+(ie?0:ae),ce,le,ue,de,fe,pe,me,he;ie?(ce=m,le=h+re*te,ue=oe,de=se-re*te,fe=oe,pe=se+re*te,me=ee,he=b-re*te):(ce=m+ne*te,le=h,ue=oe-ne*te,de=se,fe=oe+ne*te,pe=se,me=ee-ne*te,he=b);let ge=[m,oe,ee,g,ce,ue,fe,me],_e=[h,se,b,_,le,de,pe,he],ve=Math.min(...ge)-4,ye=Math.min(..._e)-4,be=Math.max(...ge)+4-ve,xe=Math.max(..._e)+4-ye;r.style.left=`${ve-o.left}px`,r.style.top=`${ye-o.top}px`,r.setAttribute(`width`,`${be}`),r.setAttribute(`height`,`${xe}`),r.setAttribute(`viewBox`,`0 0 ${be} ${xe}`),i.setAttribute(`d`,`M ${m-ve} ${h-ye} C ${ce-ve} ${le-ye}, ${ue-ve} ${de-ye}, ${oe-ve} ${se-ye} C ${fe-ve} ${pe-ye}, ${me-ve} ${he-ye}, ${ee-ve} ${b-ye}`)}_handleAdvisedInteraction(){!this.active||!this.dismissable||this._close(`completed`)}_handleDocumentInteraction(e){!this.active||!this.dismissable||e.composedPath().includes(this)||this._close(`ignored`)}_handleDismiss(){this._close(`dismissed`)}_handleCalloutKeydown(e){e.key!==`Escape`||!this.dismissable||(e.stopPropagation(),this._handleDismiss())}complete(){this.active&&this._close(`completed`)}_close(e){this.active=!1,this.dispatchEvent(new CustomEvent(`nldd-close`,{detail:{reason:e},bubbles:!0,composed:!0}))}connectedCallback(){super.connectedCallback(),this._attributeObserver||(this._attributeObserver=new MutationObserver(e=>{for(let t of e)t.attributeName&&this._forwardAttribute(t.attributeName)})),this._attributeObserver.observe(this,{attributes:!0})}disconnectedCallback(){super.disconnectedCallback(),this._closePopover(),this._attributeObserver?.disconnect()}render(){return DQ(this)}},AQ=kQ,kQ.styles=EQ,kQ._ownAttributes=new Set([`active`,`text`,`supporting-text`,`placement`,`dismissable`,`arrow-length`,`no-arrow`,`translations`,`data-arrow-side`,`data-arrow-collapsed`,`style`,`class`,`id`,`role`,`slot`,`hidden`]),kQ);return j([E({type:Boolean,reflect:!0})],MQ.prototype,`active`,void 0),j([E({reflect:!0,converter:N(``)})],MQ.prototype,`text`,void 0),j([E({reflect:!0,attribute:`supporting-text`,converter:N(``)})],MQ.prototype,`supportingText`,void 0),j([E({reflect:!0,converter:N(`auto`)})],MQ.prototype,`placement`,void 0),j([E({type:Boolean,reflect:!0})],MQ.prototype,`dismissable`,void 0),j([E({type:String,reflect:!0,attribute:`arrow-length`})],MQ.prototype,`arrowLength`,void 0),j([E({type:Boolean,reflect:!0,attribute:`no-arrow`})],MQ.prototype,`noArrow`,void 0),MQ=AQ=j([T(`nldd-just-in-time-education`)],MQ),mn(),Ii(),Xa(),F(),Oi(),PK(),lJ(),Is(),tc(),_a(),ja(),bz(),$a(),sn(),Object.defineProperty(e,"NLDDActivityIndicator",{enumerable:!0,get:function(){return on}}),Object.defineProperty(e,"NLDDAppView",{enumerable:!0,get:function(){return YG}}),Object.defineProperty(e,"NLDDAvatar",{enumerable:!0,get:function(){return Jo}}),Object.defineProperty(e,"NLDDAvatarGroup",{enumerable:!0,get:function(){return cc}}),Object.defineProperty(e,"NLDDBadge",{enumerable:!0,get:function(){return UZ}}),Object.defineProperty(e,"NLDDBanner",{enumerable:!0,get:function(){return dZ}}),Object.defineProperty(e,"NLDDBarSplitView",{enumerable:!0,get:function(){return aK}}),Object.defineProperty(e,"NLDDBlockquote",{enumerable:!0,get:function(){return $o}}),Object.defineProperty(e,"NLDDBox",{enumerable:!0,get:function(){return hJ}}),Object.defineProperty(e,"NLDDBreadcrumbs",{enumerable:!0,get:function(){return QY}}),e.NLDDBreadcrumbsItem=ZY,Object.defineProperty(e,"NLDDButton",{enumerable:!0,get:function(){return pn}}),Object.defineProperty(e,"NLDDButtonBar",{enumerable:!0,get:function(){return Oo}}),Object.defineProperty(e,"NLDDButtonGroup",{enumerable:!0,get:function(){return Ya}}),Object.defineProperty(e,"NLDDCard",{enumerable:!0,get:function(){return bJ}}),Object.defineProperty(e,"NLDDCell",{enumerable:!0,get:function(){return ac}}),Object.defineProperty(e,"NLDDCheckbox",{enumerable:!0,get:function(){return fI}}),Object.defineProperty(e,"NLDDCheckboxField",{enumerable:!0,get:function(){return gI}}),Object.defineProperty(e,"NLDDCodeEditor",{enumerable:!0,get:function(){return qR}}),Object.defineProperty(e,"NLDDCodeViewer",{enumerable:!0,get:function(){return qP}}),Object.defineProperty(e,"NLDDCollection",{enumerable:!0,get:function(){return kJ}}),Object.defineProperty(e,"NLDDComboBox",{enumerable:!0,get:function(){return iz}}),Object.defineProperty(e,"NLDDContainer",{enumerable:!0,get:function(){return R}}),Object.defineProperty(e,"NLDDDateField",{enumerable:!0,get:function(){return rB}}),Object.defineProperty(e,"NLDDDatePicker",{enumerable:!0,get:function(){return Kz}}),Object.defineProperty(e,"NLDDDescriptionCell",{enumerable:!0,get:function(){return jY}}),Object.defineProperty(e,"NLDDDivider",{enumerable:!0,get:function(){return NJ}}),Object.defineProperty(e,"NLDDDocumentTabBar",{enumerable:!0,get:function(){return JX}}),Object.defineProperty(e,"NLDDDragHandleCell",{enumerable:!0,get:function(){return RY}}),Object.defineProperty(e,"NLDDDropdown",{enumerable:!0,get:function(){return cB}}),Object.defineProperty(e,"NLDDFileField",{enumerable:!0,get:function(){return mB}}),e.NLDDForm=DF,Object.defineProperty(e,"NLDDFormActions",{enumerable:!0,get:function(){return MF}}),Object.defineProperty(e,"NLDDFormField",{enumerable:!0,get:function(){return GF}}),e.NLDDFormSection=oI,Object.defineProperty(e,"NLDDFullBleedSection",{enumerable:!0,get:function(){return mq}}),Object.defineProperty(e,"NLDDHero",{enumerable:!0,get:function(){return oq}}),Object.defineProperty(e,"NLDDIcon",{enumerable:!0,get:function(){return qt}}),Object.defineProperty(e,"NLDDIconButton",{enumerable:!0,get:function(){return Fi}}),Object.defineProperty(e,"NLDDIconCell",{enumerable:!0,get:function(){return ga}}),Object.defineProperty(e,"NLDDIdentity",{enumerable:!0,get:function(){return pc}}),Object.defineProperty(e,"NLDDImage",{enumerable:!0,get:function(){return tF}}),Object.defineProperty(e,"NLDDInlineDialog",{enumerable:!0,get:function(){return Qa}}),Object.defineProperty(e,"NLDDJustInTimeEducation",{enumerable:!0,get:function(){return MQ}}),Object.defineProperty(e,"NLDDKeyboardShortcut",{enumerable:!0,get:function(){return za}}),Object.defineProperty(e,"NLDDLink",{enumerable:!0,get:function(){return fX}}),Object.defineProperty(e,"NLDDList",{enumerable:!0,get:function(){return Fs}}),Object.defineProperty(e,"NLDDListItem",{enumerable:!0,get:function(){return ec}}),Object.defineProperty(e,"NLDDListItemSegment",{enumerable:!0,get:function(){return aY}}),e.NLDDMenu=co,Object.defineProperty(e,"NLDDMenuBar",{enumerable:!0,get:function(){return sX}}),Object.defineProperty(e,"NLDDMenuBarItem",{enumerable:!0,get:function(){return aX}}),Object.defineProperty(e,"NLDDModalDialog",{enumerable:!0,get:function(){return aZ}}),Object.defineProperty(e,"NLDDMultiLineTextField",{enumerable:!0,get:function(){return yB}}),Object.defineProperty(e,"NLDDNavigationSplitView",{enumerable:!0,get:function(){return pK}}),Object.defineProperty(e,"NLDDNotification",{enumerable:!0,get:function(){return RZ}}),Object.defineProperty(e,"NLDDNumberField",{enumerable:!0,get:function(){return wB}}),Object.defineProperty(e,"NLDDOneHalfOneHalfSection",{enumerable:!0,get:function(){return Rq}}),Object.defineProperty(e,"NLDDOneThirdTwoThirdsSection",{enumerable:!0,get:function(){return Sq}}),Object.defineProperty(e,"NLDDPage",{enumerable:!0,get:function(){return NK}}),Object.defineProperty(e,"NLDDPageFooter",{enumerable:!0,get:function(){return tY}}),e.NLDDPageFooterLegalBar=eY,e.NLDDPageFooterLegalBarItem=$J,Object.defineProperty(e,"NLDDPagination",{enumerable:!0,get:function(){return $X}}),Object.defineProperty(e,"NLDDPasswordField",{enumerable:!0,get:function(){return AB}}),Object.defineProperty(e,"NLDDPopover",{enumerable:!0,get:function(){return ls}}),Object.defineProperty(e,"NLDDProgressBar",{enumerable:!0,get:function(){return QZ}}),Object.defineProperty(e,"NLDDProgressBarSegmentIndicator",{enumerable:!0,get:function(){return ZZ}}),Object.defineProperty(e,"NLDDProgressCircle",{enumerable:!0,get:function(){return dQ}}),Object.defineProperty(e,"NLDDProgressCircleSegmentIndicator",{enumerable:!0,get:function(){return uQ}}),Object.defineProperty(e,"NLDDRadioButton",{enumerable:!0,get:function(){return PB}}),Object.defineProperty(e,"NLDDRadioButtonField",{enumerable:!0,get:function(){return RB}}),Object.defineProperty(e,"NLDDRadioButtonGroup",{enumerable:!0,get:function(){return HB}}),Object.defineProperty(e,"NLDDRichText",{enumerable:!0,get:function(){return iF}}),Object.defineProperty(e,"NLDDSearchField",{enumerable:!0,get:function(){return qB}}),Object.defineProperty(e,"NLDDSegmentedControl",{enumerable:!0,get:function(){return nV}}),Object.defineProperty(e,"NLDDSheet",{enumerable:!0,get:function(){return cJ}}),Object.defineProperty(e,"NLDDSideBySideSplitView",{enumerable:!0,get:function(){return _K}}),Object.defineProperty(e,"NLDDSidebarSection",{enumerable:!0,get:function(){return dJ}}),Object.defineProperty(e,"NLDDSimpleSection",{enumerable:!0,get:function(){return ZK}}),Object.defineProperty(e,"NLDDSkipLink",{enumerable:!0,get:function(){return _X}}),Object.defineProperty(e,"NLDDSpacer",{enumerable:!0,get:function(){return YW}}),Object.defineProperty(e,"NLDDSpacerCell",{enumerable:!0,get:function(){return ba}}),Object.defineProperty(e,"NLDDSplitButton",{enumerable:!0,get:function(){return uo}}),Object.defineProperty(e,"NLDDSplitViewDivider",{enumerable:!0,get:function(){return eK}}),Object.defineProperty(e,"NLDDSplitViewPane",{enumerable:!0,get:function(){return EK}}),Object.defineProperty(e,"NLDDStackedSplitView",{enumerable:!0,get:function(){return xK}}),Object.defineProperty(e,"NLDDStatusBar",{enumerable:!0,get:function(){return TQ}}),Object.defineProperty(e,"NLDDStepIndicator",{enumerable:!0,get:function(){return xQ}}),e.NLDDStepIndicatorItem=bQ,Object.defineProperty(e,"NLDDStepper",{enumerable:!0,get:function(){return sV}}),Object.defineProperty(e,"NLDDSwitch",{enumerable:!0,get:function(){return fV}}),Object.defineProperty(e,"NLDDSwitchField",{enumerable:!0,get:function(){return gV}}),Object.defineProperty(e,"NLDDTabBar",{enumerable:!0,get:function(){return IX}}),Object.defineProperty(e,"NLDDTable",{enumerable:!0,get:function(){return hY}}),Object.defineProperty(e,"NLDDTableRow",{enumerable:!0,get:function(){return gY}}),Object.defineProperty(e,"NLDDTag",{enumerable:!0,get:function(){return cF}}),Object.defineProperty(e,"NLDDText",{enumerable:!0,get:function(){return fF}}),Object.defineProperty(e,"NLDDTextCell",{enumerable:!0,get:function(){return Aa}}),Object.defineProperty(e,"NLDDTextEditor",{enumerable:!0,get:function(){return MW}}),Object.defineProperty(e,"NLDDTextField",{enumerable:!0,get:function(){return BW}}),Object.defineProperty(e,"NLDDTimeField",{enumerable:!0,get:function(){return xG}}),Object.defineProperty(e,"NLDDTimePicker",{enumerable:!0,get:function(){return sG}}),Object.defineProperty(e,"NLDDTimelineTrackCell",{enumerable:!0,get:function(){return HY}}),Object.defineProperty(e,"NLDDTitle",{enumerable:!0,get:function(){return bF}}),Object.defineProperty(e,"NLDDTitleCell",{enumerable:!0,get:function(){return DY}}),Object.defineProperty(e,"NLDDToggleButton",{enumerable:!0,get:function(){return TG}}),Object.defineProperty(e,"NLDDToggleButtonGroup",{enumerable:!0,get:function(){return kG}}),Object.defineProperty(e,"NLDDToken",{enumerable:!0,get:function(){return wF}}),Object.defineProperty(e,"NLDDTokenField",{enumerable:!0,get:function(){return zG}}),Object.defineProperty(e,"NLDDToolbar",{enumerable:!0,get:function(){return Vo}}),Object.defineProperty(e,"NLDDTooltip",{enumerable:!0,get:function(){return Di}}),Object.defineProperty(e,"NLDDTopNavigationBar",{enumerable:!0,get:function(){return OX}}),Object.defineProperty(e,"NLDDTopTitleBar",{enumerable:!0,get:function(){return yz}}),Object.defineProperty(e,"NLDDTwoThirdsOneThirdSection",{enumerable:!0,get:function(){return Aq}}),Object.defineProperty(e,"NLDDValidationList",{enumerable:!0,get:function(){return eI}}),Object.defineProperty(e,"NLDDWindow",{enumerable:!0,get:function(){return RJ}}),e})({});
|
|
23811
|
+
`}var FQ={"components.just-in-time-education.accessible-label":`Uitleg`,"components.just-in-time-education.dismiss-action":`Verberg`};w(),O(),ci(),St(),P(),xi(),Ii(),M();var IQ,LQ,RQ=0,zQ=(IQ=class extends xt(C,FQ){constructor(...e){super(...e),this.active=!1,this.text=``,this.supportingText=``,this.placement=`auto`,this.dismissable=!1,this.arrowLength=``,this.noArrow=!1,this._cleanupAutoUpdate=null,this._attachTimeout=null,this._revealTimeout=null,this._attributeObserver=null,this._boundDocumentInteraction=e=>this._handleDocumentInteraction(e),this._resolvedSide=null,this._lastViewportWidth=0,this._lastViewportHeight=0,this._arrowMarkerId=`nldd-jite-arrow-${++RQ}`}updated(e){if(e.has(`arrowLength`)&&(this.arrowLength&&CSS.supports(`width`,this.arrowLength)?this.style.setProperty(`--_arrow-length`,this.arrowLength):this.style.removeProperty(`--_arrow-length`)),e.has(`active`))this.active?this._open():this._closePopover();else if(this.active&&(e.has(`placement`)||e.has(`text`)||e.has(`supportingText`)||e.has(`arrowLength`)||e.has(`noArrow`))){this._resolvedSide=null;let e=this._getControl(),t=this._containerEl;e&&t&&this._updatePosition(e,t)}}get _containerEl(){return this.shadowRoot?.querySelector(`.just-in-time-education`)??null}get _cardEl(){return this.shadowRoot?.querySelector(`.just-in-time-education__main`)??null}get _announcerEl(){return this.shadowRoot?.querySelector(`.just-in-time-education__announcer`)??null}_getControl(){return(this.shadowRoot?.querySelector(`slot`))?.assignedElements({flatten:!0})?.[0]??null}_getControls(){return(this.shadowRoot?.querySelector(`slot`))?.assignedElements({flatten:!0})??[]}_forwardAttribute(e){if(LQ._ownAttributes.has(e))return;let t=this.hasAttribute(e),n=this.getAttribute(e)??``;for(let r of this._getControls())t?r.setAttribute(e,n):r.removeAttribute(e)}_handleSlotChange(){for(let e of Array.from(this.attributes))this._forwardAttribute(e.name)}_open(){let e=this._containerEl;if(!e)return;e.matches(`:popover-open`)||(e.removeAttribute(`positioned`),e.showPopover()),this._startPositioning(),this._getControl()?(this._revealTimeout&&clearTimeout(this._revealTimeout),this._revealTimeout=setTimeout(()=>{this._revealTimeout=null,this.active&&e.setAttribute(`positioned`,``)},200)):e.setAttribute(`positioned`,``);let t=this._announcerEl;t&&(t.textContent=[this.text,this.supportingText].filter(Boolean).join(`. `)),this.dismissable&&(e.classList.toggle(`is-pointer-focus`,gi()),e.focus(),this._attachTimeout&&clearTimeout(this._attachTimeout),this._attachTimeout=setTimeout(()=>{this._attachTimeout=null,this.active&&(document.addEventListener(`click`,this._boundDocumentInteraction,!0),document.addEventListener(`keydown`,this._boundDocumentInteraction,!0))},0))}_closePopover(){let e=this._containerEl,t=e?.matches(`:focus-within`)??!1;e?.matches(`:popover-open`)&&e.hidePopover(),this._stopPositioning();let n=this._announcerEl;n&&(n.textContent=``),t&&this._getControl()?.focus(),this._attachTimeout&&(clearTimeout(this._attachTimeout),this._attachTimeout=null),this._revealTimeout&&(clearTimeout(this._revealTimeout),this._revealTimeout=null),document.removeEventListener(`click`,this._boundDocumentInteraction,!0),document.removeEventListener(`keydown`,this._boundDocumentInteraction,!0)}_startPositioning(){let e=this._getControl(),t=this._containerEl;!e||!t||(this._stopPositioning(),this._cleanupAutoUpdate=Qr(e,t,()=>this._updatePosition(e,t)))}_stopPositioning(){this._cleanupAutoUpdate?.(),this._cleanupAutoUpdate=null,this._resolvedSide=null}async _updatePosition(e,t){let n=getComputedStyle(this),r=parseInt(n.getPropertyValue(`--_offset`),10),i=parseInt(n.getPropertyValue(`--_shift-padding`),10),a=window.innerWidth,o=window.innerHeight;(this._resolvedSide===null||a!==this._lastViewportWidth||o!==this._lastViewportHeight)&&(this._resolvedSide=this._chooseSide(e),this._lastViewportWidth=a,this._lastViewportHeight=o);let s=this._resolvedSide;this.getAttribute(`data-arrow-side`)!==s&&this.setAttribute(`data-arrow-side`,s);let c=this._cardEl?.getBoundingClientRect().height??0,l=e.getBoundingClientRect(),u=`9999px`;s===`top`?u=`${Math.max(0,l.top+window.scrollY-c)}px`:s===`bottom`?u=`${Math.max(0,document.documentElement.scrollHeight-(l.bottom+window.scrollY)-c)}px`:s===`left`?u=`${Math.max(0,l.left)}px`:s===`right`&&(u=`${Math.max(0,window.innerWidth-l.right)}px`),this.style.setProperty(`--_available-distance`,u);let d=s===`top`||s===`bottom`,f=parseFloat(n.getPropertyValue(`--primitives-space-40`))||40,p=parseFloat(u);if(!d){let e=(parseFloat(n.getPropertyValue(`--_text-width`))||320)+(this.dismissable?parseFloat(n.getPropertyValue(`--_dismiss-width`))||44:0);p-=e}let m=!this.noArrow&&p<f;this.toggleAttribute(`data-arrow-collapsed`,m);let{x:h,y:g}=await si(e,t,{placement:s,middleware:d?[ri(r),ii({padding:i})]:[ri(r)]});t.style.left=`${h}px`,t.style.top=`${g}px`,this._revealTimeout&&(clearTimeout(this._revealTimeout),this._revealTimeout=null),t.setAttribute(`positioned`,``),this._updateArrow(e,t,s)}_chooseSide(e){if(this.placement!==`auto`)return this.placement;let t=e.getBoundingClientRect(),n=document.documentElement.scrollHeight,r={top:t.top+window.scrollY,bottom:n-(t.bottom+window.scrollY),left:t.left,right:window.innerWidth-t.right},i=`bottom`;for(let e of[`top`,`bottom`,`left`,`right`])r[e]>r[i]&&(i=e);return i}_updateArrow(e,t,n){let r=this.shadowRoot?.querySelector(`.just-in-time-education__arrow`),i=this.shadowRoot?.querySelector(`.just-in-time-education__arrow-path`),a=this._cardEl;if(!r||!i||!a||this.hasAttribute(`data-arrow-collapsed`))return;let o=t.getBoundingClientRect(),s=a.getBoundingClientRect(),c=e.getBoundingClientRect(),l=s.left+s.width/2,u=s.top+s.height/2,d=c.left+c.width/2,f=c.top+c.height/2,p=n.split(`-`)[0],m,h,g,_,v,y;p===`top`?(m=l,h=s.bottom,g=d,_=c.top-6,v=0,y=1):p===`bottom`?(m=l,h=s.top,g=d,_=c.bottom+6,v=0,y=-1):p===`left`?(m=s.right,h=u,g=c.left-6,_=f,v=1,y=0):(m=s.left,h=u,g=c.right+6,_=f,v=-1,y=0);let ee=g-10*v,b=_-10*y,te=.25,ne=ee-m,re=b-h,ie=p===`top`||p===`bottom`,ae=Math.min(Math.hypot(ne,re)*.18,9),oe=(m+ee)/2+(ie?ae:0),se=(h+b)/2+(ie?0:ae),ce,le,ue,de,fe,pe,me,he;ie?(ce=m,le=h+re*te,ue=oe,de=se-re*te,fe=oe,pe=se+re*te,me=ee,he=b-re*te):(ce=m+ne*te,le=h,ue=oe-ne*te,de=se,fe=oe+ne*te,pe=se,me=ee-ne*te,he=b);let ge=[m,oe,ee,g,ce,ue,fe,me],_e=[h,se,b,_,le,de,pe,he],ve=Math.min(...ge)-4,ye=Math.min(..._e)-4,be=Math.max(...ge)+4-ve,xe=Math.max(..._e)+4-ye;r.style.left=`${ve-o.left}px`,r.style.top=`${ye-o.top}px`,r.setAttribute(`width`,`${be}`),r.setAttribute(`height`,`${xe}`),r.setAttribute(`viewBox`,`0 0 ${be} ${xe}`),i.setAttribute(`d`,`M ${m-ve} ${h-ye} C ${ce-ve} ${le-ye}, ${ue-ve} ${de-ye}, ${oe-ve} ${se-ye} C ${fe-ve} ${pe-ye}, ${me-ve} ${he-ye}, ${ee-ve} ${b-ye}`)}_handleAdvisedInteraction(){!this.active||!this.dismissable||this._close(`completed`)}_handleDocumentInteraction(e){!this.active||!this.dismissable||e.composedPath().includes(this)||this._close(`ignored`)}_handleDismiss(){this._close(`dismissed`)}_handleCalloutKeydown(e){e.key!==`Escape`||!this.dismissable||(e.stopPropagation(),this._handleDismiss())}complete(){this.active&&this._close(`completed`)}_close(e){this.active=!1,this.dispatchEvent(new CustomEvent(`nldd-close`,{detail:{reason:e},bubbles:!0,composed:!0}))}connectedCallback(){super.connectedCallback(),this._attributeObserver||(this._attributeObserver=new MutationObserver(e=>{for(let t of e)t.attributeName&&this._forwardAttribute(t.attributeName)})),this._attributeObserver.observe(this,{attributes:!0})}disconnectedCallback(){super.disconnectedCallback(),this._closePopover(),this._attributeObserver?.disconnect()}render(){return PQ(this)}},LQ=IQ,IQ.styles=NQ,IQ._ownAttributes=new Set([`active`,`text`,`supporting-text`,`placement`,`dismissable`,`arrow-length`,`no-arrow`,`translations`,`data-arrow-side`,`data-arrow-collapsed`,`style`,`class`,`id`,`role`,`slot`,`hidden`]),IQ);return j([E({type:Boolean,reflect:!0})],zQ.prototype,`active`,void 0),j([E({reflect:!0,converter:N(``)})],zQ.prototype,`text`,void 0),j([E({reflect:!0,attribute:`supporting-text`,converter:N(``)})],zQ.prototype,`supportingText`,void 0),j([E({reflect:!0,converter:N(`auto`)})],zQ.prototype,`placement`,void 0),j([E({type:Boolean,reflect:!0})],zQ.prototype,`dismissable`,void 0),j([E({type:String,reflect:!0,attribute:`arrow-length`})],zQ.prototype,`arrowLength`,void 0),j([E({type:Boolean,reflect:!0,attribute:`no-arrow`})],zQ.prototype,`noArrow`,void 0),zQ=LQ=j([T(`nldd-just-in-time-education`)],zQ),mn(),Ii(),Xa(),F(),Oi(),PK(),lJ(),Is(),tc(),_a(),ja(),bz(),$a(),sn(),Object.defineProperty(e,"NLDDActivityIndicator",{enumerable:!0,get:function(){return on}}),Object.defineProperty(e,"NLDDAppView",{enumerable:!0,get:function(){return YG}}),Object.defineProperty(e,"NLDDAvatar",{enumerable:!0,get:function(){return Jo}}),Object.defineProperty(e,"NLDDAvatarGroup",{enumerable:!0,get:function(){return cc}}),Object.defineProperty(e,"NLDDBadge",{enumerable:!0,get:function(){return XZ}}),Object.defineProperty(e,"NLDDBanner",{enumerable:!0,get:function(){return dZ}}),Object.defineProperty(e,"NLDDBarSplitView",{enumerable:!0,get:function(){return aK}}),Object.defineProperty(e,"NLDDBlockquote",{enumerable:!0,get:function(){return $o}}),Object.defineProperty(e,"NLDDBox",{enumerable:!0,get:function(){return hJ}}),Object.defineProperty(e,"NLDDBreadcrumbs",{enumerable:!0,get:function(){return QY}}),e.NLDDBreadcrumbsItem=ZY,Object.defineProperty(e,"NLDDButton",{enumerable:!0,get:function(){return pn}}),Object.defineProperty(e,"NLDDButtonBar",{enumerable:!0,get:function(){return Oo}}),Object.defineProperty(e,"NLDDButtonGroup",{enumerable:!0,get:function(){return Ya}}),Object.defineProperty(e,"NLDDCard",{enumerable:!0,get:function(){return bJ}}),Object.defineProperty(e,"NLDDCell",{enumerable:!0,get:function(){return ac}}),Object.defineProperty(e,"NLDDCheckbox",{enumerable:!0,get:function(){return fI}}),Object.defineProperty(e,"NLDDCheckboxField",{enumerable:!0,get:function(){return gI}}),Object.defineProperty(e,"NLDDCodeEditor",{enumerable:!0,get:function(){return qR}}),Object.defineProperty(e,"NLDDCodeViewer",{enumerable:!0,get:function(){return qP}}),Object.defineProperty(e,"NLDDCollection",{enumerable:!0,get:function(){return kJ}}),Object.defineProperty(e,"NLDDComboBox",{enumerable:!0,get:function(){return iz}}),Object.defineProperty(e,"NLDDContainer",{enumerable:!0,get:function(){return R}}),Object.defineProperty(e,"NLDDDateField",{enumerable:!0,get:function(){return rB}}),Object.defineProperty(e,"NLDDDatePicker",{enumerable:!0,get:function(){return Kz}}),Object.defineProperty(e,"NLDDDescriptionCell",{enumerable:!0,get:function(){return jY}}),Object.defineProperty(e,"NLDDDivider",{enumerable:!0,get:function(){return NJ}}),Object.defineProperty(e,"NLDDDocumentTabBar",{enumerable:!0,get:function(){return JX}}),Object.defineProperty(e,"NLDDDragHandleCell",{enumerable:!0,get:function(){return RY}}),Object.defineProperty(e,"NLDDDropdown",{enumerable:!0,get:function(){return cB}}),Object.defineProperty(e,"NLDDFileField",{enumerable:!0,get:function(){return mB}}),e.NLDDForm=DF,Object.defineProperty(e,"NLDDFormActions",{enumerable:!0,get:function(){return MF}}),Object.defineProperty(e,"NLDDFormField",{enumerable:!0,get:function(){return GF}}),e.NLDDFormSection=oI,Object.defineProperty(e,"NLDDFullBleedSection",{enumerable:!0,get:function(){return mq}}),Object.defineProperty(e,"NLDDHero",{enumerable:!0,get:function(){return oq}}),Object.defineProperty(e,"NLDDIcon",{enumerable:!0,get:function(){return qt}}),Object.defineProperty(e,"NLDDIconButton",{enumerable:!0,get:function(){return Fi}}),Object.defineProperty(e,"NLDDIconCell",{enumerable:!0,get:function(){return ga}}),Object.defineProperty(e,"NLDDIdentity",{enumerable:!0,get:function(){return pc}}),Object.defineProperty(e,"NLDDImage",{enumerable:!0,get:function(){return tF}}),Object.defineProperty(e,"NLDDInlineDialog",{enumerable:!0,get:function(){return Qa}}),Object.defineProperty(e,"NLDDJustInTimeEducation",{enumerable:!0,get:function(){return zQ}}),Object.defineProperty(e,"NLDDKeyboardShortcut",{enumerable:!0,get:function(){return za}}),Object.defineProperty(e,"NLDDLink",{enumerable:!0,get:function(){return fX}}),Object.defineProperty(e,"NLDDList",{enumerable:!0,get:function(){return Fs}}),Object.defineProperty(e,"NLDDListItem",{enumerable:!0,get:function(){return ec}}),Object.defineProperty(e,"NLDDListItemSegment",{enumerable:!0,get:function(){return aY}}),e.NLDDMenu=co,Object.defineProperty(e,"NLDDMenuBar",{enumerable:!0,get:function(){return sX}}),Object.defineProperty(e,"NLDDMenuBarItem",{enumerable:!0,get:function(){return aX}}),Object.defineProperty(e,"NLDDModalDialog",{enumerable:!0,get:function(){return aZ}}),Object.defineProperty(e,"NLDDMultiLineTextField",{enumerable:!0,get:function(){return yB}}),Object.defineProperty(e,"NLDDNavigationSplitView",{enumerable:!0,get:function(){return pK}}),Object.defineProperty(e,"NLDDNotification",{enumerable:!0,get:function(){return GZ}}),Object.defineProperty(e,"NLDDNumberField",{enumerable:!0,get:function(){return wB}}),Object.defineProperty(e,"NLDDOneHalfOneHalfSection",{enumerable:!0,get:function(){return Rq}}),Object.defineProperty(e,"NLDDOneThirdTwoThirdsSection",{enumerable:!0,get:function(){return Sq}}),Object.defineProperty(e,"NLDDPage",{enumerable:!0,get:function(){return NK}}),Object.defineProperty(e,"NLDDPageFooter",{enumerable:!0,get:function(){return tY}}),e.NLDDPageFooterLegalBar=eY,e.NLDDPageFooterLegalBarItem=$J,Object.defineProperty(e,"NLDDPagination",{enumerable:!0,get:function(){return $X}}),Object.defineProperty(e,"NLDDPasswordField",{enumerable:!0,get:function(){return AB}}),Object.defineProperty(e,"NLDDPopover",{enumerable:!0,get:function(){return ls}}),Object.defineProperty(e,"NLDDProgressBar",{enumerable:!0,get:function(){return aQ}}),Object.defineProperty(e,"NLDDProgressBarSegmentIndicator",{enumerable:!0,get:function(){return iQ}}),Object.defineProperty(e,"NLDDProgressCircle",{enumerable:!0,get:function(){return vQ}}),Object.defineProperty(e,"NLDDProgressCircleSegmentIndicator",{enumerable:!0,get:function(){return _Q}}),Object.defineProperty(e,"NLDDRadioButton",{enumerable:!0,get:function(){return PB}}),Object.defineProperty(e,"NLDDRadioButtonField",{enumerable:!0,get:function(){return RB}}),Object.defineProperty(e,"NLDDRadioButtonGroup",{enumerable:!0,get:function(){return HB}}),Object.defineProperty(e,"NLDDRichText",{enumerable:!0,get:function(){return iF}}),Object.defineProperty(e,"NLDDSearchField",{enumerable:!0,get:function(){return qB}}),Object.defineProperty(e,"NLDDSegmentedControl",{enumerable:!0,get:function(){return nV}}),Object.defineProperty(e,"NLDDSheet",{enumerable:!0,get:function(){return cJ}}),Object.defineProperty(e,"NLDDSideBySideSplitView",{enumerable:!0,get:function(){return _K}}),Object.defineProperty(e,"NLDDSidebarSection",{enumerable:!0,get:function(){return dJ}}),Object.defineProperty(e,"NLDDSimpleSection",{enumerable:!0,get:function(){return ZK}}),Object.defineProperty(e,"NLDDSkipLink",{enumerable:!0,get:function(){return _X}}),Object.defineProperty(e,"NLDDSpacer",{enumerable:!0,get:function(){return YW}}),Object.defineProperty(e,"NLDDSpacerCell",{enumerable:!0,get:function(){return ba}}),Object.defineProperty(e,"NLDDSplitButton",{enumerable:!0,get:function(){return uo}}),Object.defineProperty(e,"NLDDSplitViewDivider",{enumerable:!0,get:function(){return eK}}),Object.defineProperty(e,"NLDDSplitViewPane",{enumerable:!0,get:function(){return EK}}),Object.defineProperty(e,"NLDDStackedSplitView",{enumerable:!0,get:function(){return xK}}),Object.defineProperty(e,"NLDDStatusBar",{enumerable:!0,get:function(){return MQ}}),Object.defineProperty(e,"NLDDStepIndicator",{enumerable:!0,get:function(){return OQ}}),e.NLDDStepIndicatorItem=DQ,Object.defineProperty(e,"NLDDStepper",{enumerable:!0,get:function(){return sV}}),Object.defineProperty(e,"NLDDSwitch",{enumerable:!0,get:function(){return fV}}),Object.defineProperty(e,"NLDDSwitchField",{enumerable:!0,get:function(){return gV}}),Object.defineProperty(e,"NLDDTabBar",{enumerable:!0,get:function(){return IX}}),Object.defineProperty(e,"NLDDTable",{enumerable:!0,get:function(){return hY}}),Object.defineProperty(e,"NLDDTableRow",{enumerable:!0,get:function(){return gY}}),Object.defineProperty(e,"NLDDTag",{enumerable:!0,get:function(){return cF}}),Object.defineProperty(e,"NLDDText",{enumerable:!0,get:function(){return fF}}),Object.defineProperty(e,"NLDDTextCell",{enumerable:!0,get:function(){return Aa}}),Object.defineProperty(e,"NLDDTextEditor",{enumerable:!0,get:function(){return MW}}),Object.defineProperty(e,"NLDDTextField",{enumerable:!0,get:function(){return BW}}),Object.defineProperty(e,"NLDDTimeField",{enumerable:!0,get:function(){return xG}}),Object.defineProperty(e,"NLDDTimePicker",{enumerable:!0,get:function(){return sG}}),Object.defineProperty(e,"NLDDTimelineTrackCell",{enumerable:!0,get:function(){return HY}}),Object.defineProperty(e,"NLDDTitle",{enumerable:!0,get:function(){return bF}}),Object.defineProperty(e,"NLDDTitleCell",{enumerable:!0,get:function(){return DY}}),Object.defineProperty(e,"NLDDToggleButton",{enumerable:!0,get:function(){return TG}}),Object.defineProperty(e,"NLDDToggleButtonGroup",{enumerable:!0,get:function(){return kG}}),Object.defineProperty(e,"NLDDToken",{enumerable:!0,get:function(){return wF}}),Object.defineProperty(e,"NLDDTokenField",{enumerable:!0,get:function(){return zG}}),Object.defineProperty(e,"NLDDToolbar",{enumerable:!0,get:function(){return Vo}}),Object.defineProperty(e,"NLDDTooltip",{enumerable:!0,get:function(){return Di}}),Object.defineProperty(e,"NLDDTopNavigationBar",{enumerable:!0,get:function(){return OX}}),Object.defineProperty(e,"NLDDTopTitleBar",{enumerable:!0,get:function(){return yz}}),Object.defineProperty(e,"NLDDTwoThirdsOneThirdSection",{enumerable:!0,get:function(){return Aq}}),Object.defineProperty(e,"NLDDValidationList",{enumerable:!0,get:function(){return eI}}),Object.defineProperty(e,"NLDDWindow",{enumerable:!0,get:function(){return RJ}}),e})({});
|
package/dist/types/vue.d.ts
CHANGED
|
@@ -3719,7 +3719,7 @@ declare module 'vue' {
|
|
|
3719
3719
|
'nldd-multi-line-text-field': DefineComponent<NLDDMultiLineTextFieldProps>;
|
|
3720
3720
|
/** A four-column layout with a primary sidebar, secondary sidebar, main content area, and inspector. The sidebars show navigation or lists, the main area shows primary content, and the inspector shows additional details or properties of the selection. Panes are shown automatically when content is slotted into them. */
|
|
3721
3721
|
'nldd-navigation-split-view': DefineComponent<NLDDNavigationSplitViewProps>;
|
|
3722
|
-
/** A short message that arrives over the interface and leaves on its own: a save that worked, a request that failed. Not a banner, which stands in the page and stays there — this one floats, stacks, and goes away. It places itself. Write it wherever it belongs in your code and it moves to one shared region: top right from md, full width across the top below that. Nothing about the position is settable, so notifications from anywhere in an application land in the same place and stack in the same order. More than one is a deck, not a list: the front one is readable and the older ones peek out below it, so a burst of messages takes the room of roughly one. The newest is in front. Behind it a notification is a bare surface, cut to the height of the one in front; dismiss the front and it slides up into the place that came free while its message fades in, because it was standing there all along. Under the front notification sits a strip as wide as the deck and as tall as the deck is when it fans out. Pointing at it fans the deck out to fill it, which is the only hint that there is more here than the message you can read; clicking it, or moving focus into the region, lays the whole deck out as a list. Clicking or tabbing away puts it back. The notification itself is not a button: a click on the message you are reading does nothing. Only the front of the deck counts down, and only while the deck is closed: open means someone is reading. The rest wait, so nothing disappears from under the one you are reading. `critical` never leaves on its own: a failure is worth reading, and the count-down would take it away while you were. That also keeps this within WCAG 2.2.1, which allows a time limit when what disappears is not essential. The clock pauses while a pointer moves over the notification and while focus is inside it, and resumes where it left off rather than starting over. A pointer that merely happens to rest where the notification appears does not count: it never moved, so nobody is reading. role follows the variant: `critical` becomes role="alert", the rest role="status". Focus never moves on its own. Escape dismisses the notification that focus is in. */
|
|
3722
|
+
/** A short message that arrives over the interface and leaves on its own: a save that worked, a request that failed. Not a banner, which stands in the page and stays there — this one floats, stacks, and goes away. It places itself. Write it wherever it belongs in your code and it moves to one shared region: top right from md, full width across the top below that. Nothing about the position is settable, so notifications from anywhere in an application land in the same place and stack in the same order. A modal overlay is the one thing that moves it. An nldd-sheet, nldd-window or nldd-modal-dialog paints in the browser's top layer, above the whole page and out of reach of any z-index, and while one is open everything outside it is inert. So the region goes in: into the topmost overlay that is open, and back down as they close. A notification already on screen travels with it, and one raised from inside a sheet is readable and reachable where it is raised. More than one is a deck, not a list: the front one is readable and the older ones peek out below it, so a burst of messages takes the room of roughly one. The newest is in front. Behind it a notification is a bare surface, cut to the height of the one in front; dismiss the front and it slides up into the place that came free while its message fades in, because it was standing there all along. Under the front notification sits a strip as wide as the deck and as tall as the deck is when it fans out. Pointing at it fans the deck out to fill it, which is the only hint that there is more here than the message you can read; clicking it, or moving focus into the region, lays the whole deck out as a list. Clicking or tabbing away puts it back. The notification itself is not a button: a click on the message you are reading does nothing. Only the front of the deck counts down, and only while the deck is closed: open means someone is reading. The rest wait, so nothing disappears from under the one you are reading. `critical` never leaves on its own: a failure is worth reading, and the count-down would take it away while you were. That also keeps this within WCAG 2.2.1, which allows a time limit when what disappears is not essential. The clock pauses while a pointer moves over the notification and while focus is inside it, and resumes where it left off rather than starting over. A pointer that merely happens to rest where the notification appears does not count: it never moved, so nobody is reading. role follows the variant: `critical` becomes role="alert", the rest role="status". Focus never moves on its own. Escape dismisses the notification that focus is in. */
|
|
3723
3723
|
'nldd-notification': DefineComponent<NLDDNotificationProps>;
|
|
3724
3724
|
/** A numeric input field with decrement and increment buttons. */
|
|
3725
3725
|
'nldd-number-field': DefineComponent<NLDDNumberFieldProps>;
|
|
@@ -3727,7 +3727,7 @@ declare module 'vue' {
|
|
|
3727
3727
|
'nldd-one-half-one-half-section': DefineComponent<NLDDOneHalfOneHalfSectionProps>;
|
|
3728
3728
|
/** A section with a 1/3 sidebar on the left and 2/3 main content on the right. The columns wrap automatically when they become smaller than 280px. Padding and gap adjust via container queries. */
|
|
3729
3729
|
'nldd-one-third-two-thirds-section': DefineComponent<NLDDOneThirdTwoThirdsSectionProps>;
|
|
3730
|
-
/** A page layout with optional sticky header and footer. Without sticky-header, the host is the scroll container and the header is in normal flow. With sticky-header, the header becomes absolute and .page__scroll takes over scrolling
|
|
3730
|
+
/** A page layout with optional sticky header and footer. Without sticky-header, the host is the scroll container and the header is in normal flow. With sticky-header, the header becomes absolute and .page__scroll takes over scrolling, padded by the measured header height. That padding freezes once you scroll, so a collapsing bar cannot drag the content up under the cursor. In root-scroll mode (--context-scroll-mode: root, derived upstream by nldd-app-view) the page stops owning a scroller: the document scrolls and the sticky header/footer stick against the document, offset by --context-inset-top/bottom. The mode is read on connect/resize and reflected to [data-scroll] so the CSS can branch. The page passes those insets on to its own content, with its sticky header and footer added: anything sticky inside (an nldd-sidebar-section, a sticky table head) reads --context-inset-top / --context-inset-bottom and clears every bar above and below it without being told a number. The heights are measured, because a top title bar shrinks as you scroll past its anchor. While the page owns the scroller, only its own bars count: the chrome above the page sits outside that scroller and does not push sticky content down. */
|
|
3731
3731
|
'nldd-page': DefineComponent<NLDDPageProps>;
|
|
3732
3732
|
/** The footer band at the bottom of a page. Hosts three optional rows in a fixed order: breadcrumbs (top), consumer-defined main content (middle), and a legal-bar (bottom). Dividers are drawn automatically between non-empty rows. Establishes its own container query (`page-footer-container`) so the responsive padding and gap react to the footer's own width, not the viewport. The host has `id="page-footer"` so a skip-link can target it directly. Use the sub-components `nldd-page-footer-legal-bar` and `nldd-page-footer-legal-bar-item` for the bottom row. */
|
|
3733
3733
|
'nldd-page-footer': DefineComponent<NLDDPageFooterProps>;
|