@nldd/design-system 0.8.53 → 0.8.55

package/dist/components/status-and-feedback/progress/progress.js

@@ -1,137 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-/**
- * Nederlandse Digitale Dienst Progress Component (Lit + TypeScript)
- *
- * Layout placeholder that fills its parent and centres an indeterminate
- * progress indicator. Holds the indicator back for 1000ms so brief loading
- * states don't flash a spinner; once the delay passes the indicator fades in.
- *
- * Default is an indeterminate `<nldd-progress-circle>` with the translated
- * "Laden" label. Drop anything in the slot (a progress-bar, a customised
- * progress-circle, etc.) to override.
- *
- * Reconnect behaviour: every `connectedCallback` resets the timer and hides
- * the indicator again. If a consumer toggles the element via a conditional
- * render (remove + re-insert) the spinner will disappear and re-fade after
- * another 1000ms. Keep the element mounted and toggle visibility / `hidden`
- * instead if you want the timer to run only once.
- *
- * Accessibility: the host element carries `aria-busy="true"` for as long as
- * it is connected and not marked `complete`, including the silent 1000 ms
- * pre-spinner window. AT users landing on the region during that window are
- * told loading is in progress, even before the visual spinner appears.
- *
- * Two patterns to signal "done":
- *   1. (Preferred.) Unmount `<nldd-progress>` entirely. aria-busy goes away
- *      with the element, and the indicator's `progressbar` role disappears
- *      from the AT tree.
- *   2. Set the boolean `complete` attribute. aria-busy is cleared and the
- *      indicator is hidden, but the element stays in the DOM. Use this when
- *      you want a CSS transition out, or when the wrapper sits in a layout
- *      slot that would collapse if unmounted.
- *
- * @element nldd-progress
- *
- * @attr {string} text - Label under the default indicator. Falls back to the
- *   translated "Laden" string when unset. Ignored when the slot is filled.
- * @attr {boolean} no-label - Suppress the label under the default indicator
- *   entirely. Use when the surrounding UI already conveys "loading" and an
- *   extra "Laden" caption would be redundant noise.
- * @attr {boolean} complete - Mark the loader as finished while keeping the
- *   element mounted; clears aria-busy and hides the indicator.
- * @attr {object} translations - Override translation keys; unset keys fall back to Dutch
- *
- * @slot - Optional custom indicator; overrides the default progress-circle.
- *   The host carries `aria-busy="true"` for AT users, but the default ARIA
- *   semantics on the visible indicator (role="progressbar", aria-valuetext)
- *   come from the built-in `<nldd-progress-circle>`. Consumers replacing the
- *   slot are responsible for supplying their own progressbar role / label
- *   on the custom indicator.
- */
-import { LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { progressStyles } from './progress.styles.js';
-import { progressTemplate } from './progress.template.js';
-import { nlddProgressTranslations } from './progress.i18n.js';
-import '../progress-circle/progress-circle.js';
-/** Delay before the indicator fades in. Brief loading states finish within
- *  this window and the spinner is never shown — avoids a jarring flash. */
-const DELAY_MS = 1000;
-let NLDDProgress = class NLDDProgress extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.text = '';
-        /** Suppress the indicator's label entirely. The component still
-         *  renders the spinner and announces aria-busy; only the visible
-         *  "Laden" caption is hidden. Replaces the old text=" " sentinel. */
-        this.noLabel = false;
-        /** Mark the loader as finished while keeping the element mounted.
-         *  Clears aria-busy and hides the indicator. Default false. */
-        this.complete = false;
-        this.translations = {};
-        this._visible = false;
-    }
-    _t(key) {
-        return this.translations[key] ?? nlddProgressTranslations[key];
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        // aria-busy signals "loading in progress" to AT users immediately,
-        // even during the silent 1000 ms window before the visual indicator
-        // fades in. Set unless the consumer connected the element already
-        // marked complete (rare but valid — e.g. server-rendered "done" state).
-        if (!this.complete)
-            this.setAttribute('aria-busy', 'true');
-        this._visible = false;
-        this._delayTimeout = setTimeout(() => {
-            this._visible = true;
-            this._delayTimeout = undefined;
-        }, DELAY_MS);
-    }
-    willUpdate(changed) {
-        if (changed.has('complete')) {
-            if (this.complete) {
-                this.removeAttribute('aria-busy');
-            }
-            else {
-                this.setAttribute('aria-busy', 'true');
-            }
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        if (this._delayTimeout) {
-            clearTimeout(this._delayTimeout);
-            this._delayTimeout = undefined;
-        }
-    }
-    render() {
-        return progressTemplate(this);
-    }
-};
-NLDDProgress.styles = progressStyles;
-__decorate([
-    property({ type: String, reflect: true })
-], NLDDProgress.prototype, "text", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'no-label' })
-], NLDDProgress.prototype, "noLabel", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], NLDDProgress.prototype, "complete", void 0);
-__decorate([
-    property({ type: Object })
-], NLDDProgress.prototype, "translations", void 0);
-__decorate([
-    state()
-], NLDDProgress.prototype, "_visible", void 0);
-NLDDProgress = __decorate([
-    customElement('nldd-progress')
-], NLDDProgress);
-export { NLDDProgress };
-//# sourceMappingURL=progress.js.map

package/dist/components/status-and-feedback/progress/progress.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress/progress.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAE9D,OAAO,uCAAuC,CAAC;AAE/C;2EAC2E;AAC3E,MAAM,QAAQ,GAAG,IAAI,CAAC;AAGf,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAIN,SAAI,GAAG,EAAE,CAAC;QAEV;;6EAEqE;QAErE,YAAO,GAAG,KAAK,CAAC;QAEhB;uEAC+D;QAE/D,aAAQ,GAAG,KAAK,CAAC;QAGjB,iBAAY,GAAsC,EAAE,CAAC;QAGrD,aAAQ,GAAG,KAAK,CAAC;IA2ClB,CAAC;IAvCO,EAAE,CAAC,GAAmC;QAC5C,OAAO,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,wBAAwB,CAAC,GAAG,CAAC,CAAC;IAChE,CAAC;IAEQ,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,mEAAmE;QACnE,oEAAoE;QACpE,kEAAkE;QAClE,wEAAwE;QACxE,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;QAC3D,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,GAAG,EAAE;YACpC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;QAChC,CAAC,EAAE,QAAQ,CAAC,CAAC;IACd,CAAC;IAEQ,UAAU,CAAC,OAA6B;QAChD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YAC7B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;YACnC,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;YACxC,CAAC;QACF,CAAC;IACF,CAAC;IAEQ,oBAAoB;QAC5B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACxB,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;QAChC,CAAC;IACF,CAAC;IAEQ,MAAM;QACd,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;;AA9De,mBAAM,GAAG,cAAc,AAAjB,CAAkB;AAGxC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAChC;AAMV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;6CAClD;AAKhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAC0B;AAGrD;IADC,KAAK,EAAE;8CACS;AArBL,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAgExB"}

package/dist/components/status-and-feedback/progress/progress.styles.d.ts

@@ -1,2 +0,0 @@
-export declare const progressStyles: import("lit").CSSResult;
-//# sourceMappingURL=progress.styles.d.ts.map

package/dist/components/status-and-feedback/progress/progress.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"progress.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress/progress.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,yBAuD1B,CAAC"}

package/dist/components/status-and-feedback/progress/progress.styles.js

@@ -1,59 +0,0 @@
-import { css } from 'lit';
-import { inheritedTextReset } from '../../../assets/styles/slotted-reset.js';
-export const progressStyles = css `
-
-
-	/* # Host */
-
-	:host {
-		--_fade-duration: var(--primitives-transition-duration-slow);
-		--_indicator-max-width: var(--primitives-area-240);
-
-		${inheritedTextReset}
-		box-sizing: border-box;
-		display: flex;
-		flex-grow: 1;
-		flex-shrink: 1;
-		flex-basis: auto;
-		width: 100%;
-		height: 100%;
-		align-items: center;
-		justify-content: center;
-	}
-
-	:host([hidden]) {
-		display: none;
-	}
-
-
-	/* # Indicator
-	   Wrapper around the slot so we can fade the indicator in once the delay
-	   has passed. The host itself stays visible from mount to take up its
-	   layout space; only the indicator inside fades.
-	   width:100% + max-width gives the bar a concrete width to fill (without
-	   this it has no containing block reference and collapses to 0). The
-	   inner flex centring keeps a small circle aligned in the middle of that
-	   width. */
-
-	.progress__indicator {
-		display: flex;
-		justify-content: center;
-		width: 100%;
-		max-width: var(--_indicator-max-width);
-		animation: progress-fade-in var(--_fade-duration) ease-out;
-	}
-
-	@keyframes progress-fade-in {
-		from { opacity: 0; }
-	}
-
-
-	/* # Accessibility */
-
-	@media (prefers-reduced-motion: reduce) {
-		.progress__indicator {
-			animation: none;
-		}
-	}
-`;
-//# sourceMappingURL=progress.styles.js.map

package/dist/components/status-and-feedback/progress/progress.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"progress.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress/progress.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;IAS7B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CrB,CAAC"}

package/dist/components/status-and-feedback/progress/progress.template.d.ts

@@ -1,4 +0,0 @@
-import { nothing } from 'lit';
-import type { NLDDProgress } from './progress.js';
-export declare function progressTemplate(component: NLDDProgress): import("lit-html").TemplateResult<1> | typeof nothing;
-//# sourceMappingURL=progress.template.d.ts.map

package/dist/components/status-and-feedback/progress/progress.template.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"progress.template.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress/progress.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,YAAY,yDAsBvD"}

package/dist/components/status-and-feedback/progress/progress.template.js

@@ -1,26 +0,0 @@
-import { html, nothing } from 'lit';
-export function progressTemplate(component) {
-    // Render nothing while the delay window is open so the indicator doesn't
-    // even flash for sub-second loads, or once `complete` is set so the
-    // element stays mounted but ARIA / visuals reflect the finished state.
-    if (!component._visible || component.complete)
-        return nothing;
-    // `text` attribute overrides the translated default. To suppress the
-    // label entirely use the `no-label` boolean attribute — passing
-    // text="" leaves the translated fallback in place by design.
-    const text = component.noLabel
-        ? ''
-        : (component.text || component._t('components.progress.loading-text'));
-    return html `
-		<div class="progress__indicator">
-			<slot>
-				<nldd-progress-circle
-					size="28"
-					indeterminate
-					.text=${text}
-				></nldd-progress-circle>
-			</slot>
-		</div>
-	`;
-}
-//# sourceMappingURL=progress.template.js.map

package/dist/components/status-and-feedback/progress/progress.template.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"progress.template.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress/progress.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,UAAU,gBAAgB,CAAC,SAAuB;IACvD,yEAAyE;IACzE,oEAAoE;IACpE,uEAAuE;IACvE,IAAI,CAAC,SAAS,CAAC,QAAQ,IAAI,SAAS,CAAC,QAAQ;QAAE,OAAO,OAAO,CAAC;IAC9D,qEAAqE;IACrE,gEAAgE;IAChE,6DAA6D;IAC7D,MAAM,IAAI,GAAG,SAAS,CAAC,OAAO;QAC7B,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,IAAI,SAAS,CAAC,EAAE,CAAC,kCAAkC,CAAC,CAAC,CAAC;IACxE,OAAO,IAAI,CAAA;;;;;;aAMC,IAAI;;;;EAIf,CAAC;AACH,CAAC"}