@nldd/design-system 0.8.37

package/dist/components/layout/collection/collection.i18n.js

@@ -0,0 +1,6 @@
+export const nlddCollectionTranslations = {
+    'components.collection.previous-action': 'Vorige',
+    'components.collection.next-action': 'Volgende',
+    'components.collection.load-more-action': 'Toon meer',
+};
+//# sourceMappingURL=collection.i18n.js.map

package/dist/components/layout/collection/collection.i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection.i18n.js","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACzC,uCAAuC,EAAE,QAAQ;IACjD,mCAAmC,EAAE,UAAU;IAC/C,wCAAwC,EAAE,WAAW;CACrD,CAAC"}

package/dist/components/layout/collection/collection.js

@@ -0,0 +1,193 @@
+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 Collection Component (Lit + TypeScript)
+ *
+ * A container for displaying collections of items.
+ * Supports grid, list, and horizontal scroll layouts.
+ * In grid and list modes, items are paginated via a load-more button.
+ * With `lazy-load`, the next items are automatically loaded when
+ * the load-more button comes into view.
+ *
+ * @element nldd-collection
+ *
+ * @attr {string} layout - Layout mode: 'grid' | 'list' | 'horizontal-scroll' (default: 'grid')
+ * @attr {boolean} show-load-more - Show load-more button in grid/list (default: false)
+ * @attr {number} max-items - Number of visible items per page (default: 24)
+ * @attr {boolean} lazy-load - Automatically load more items when the button becomes visible
+ * @attr {string}  item-width - Preferred width for each item (e.g. '280px', '20rem'). In grid
+ *                              layout used as the minimum column width (columns will be at
+ *                              least this wide; 1fr if container allows more). In horizontal
+ *                              scroll used as flex-basis. Never forces horizontal overflow —
+ *                              the value is clamped to container width.
+ * @attr {object} translations - Translation overrides; unset keys fall back to Dutch.
+ *                               Available keys: 'components.collection.previous-action',
+ *                               'components.collection.next-action', 'components.collection.load-more-action'
+ *
+ * @migration The `load-more-label` attribute has been removed.
+ *            Use `translations` property instead: `.translations=${{ 'components.collection.load-more-action': 'Show more' }}`
+ *
+ * @slot - Default slot for collection items
+ * @slot footer - Slot for custom footer content
+ *
+ * @fires load-more - When the load-more button is clicked
+ */
+import { LitElement } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { collectionStyles } from './collection.styles.js';
+import { collectionTemplate } from './collection.template.js';
+import { nlddCollectionTranslations } from './collection.i18n.js';
+import '../../actions/button/button.js';
+import '../../actions/button-bar/button-bar.js';
+import '../../actions/icon-button/icon-button.js';
+import '../../content/icon/icon.js';
+let NLDDCollection = class NLDDCollection extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.layout = 'grid';
+        this.showLoadMore = false;
+        this.maxItems = 24;
+        this.lazyLoad = false;
+        this.translations = {};
+        this._visibleCount = 0;
+        this._totalCount = 0;
+        this._atStart = true;
+        this._atEnd = false;
+        this._scrollListener = () => {
+            const el = this._itemsEl;
+            if (!el)
+                return;
+            this._atStart = el.scrollLeft < 1;
+            this._atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1;
+        };
+        this._scrollListenerAttached = false;
+    }
+    // — i18n —————————————————————————————————————————————————————————————————
+    _t(key) {
+        return this.translations[key] ?? nlddCollectionTranslations[key];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._visibleCount = this.maxItems;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._intersectionObserver?.disconnect();
+        this._teardownScrollListeners();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('layout')) {
+            this._setupScrollListeners();
+        }
+        if (changedProperties.has('itemWidth')) {
+            if (this.itemWidth) {
+                this.style.setProperty('--_item-width', this.itemWidth);
+            }
+            else {
+                this.style.removeProperty('--_item-width');
+            }
+        }
+        if (this.lazyLoad && this._loadMoreBtn && !this._intersectionObserver) {
+            this._intersectionObserver = new IntersectionObserver(([entry]) => { if (entry.isIntersecting)
+                this._loadMore(); }, { threshold: 0.1 });
+            this._intersectionObserver.observe(this._loadMoreBtn);
+        }
+        else if (!this._loadMoreBtn) {
+            this._intersectionObserver?.disconnect();
+            this._intersectionObserver = undefined;
+        }
+    }
+    _setupScrollListeners() {
+        this._teardownScrollListeners();
+        if (this.layout === 'horizontal-scroll' && this._itemsEl) {
+            this._itemsEl.addEventListener('scroll', this._scrollListener, { passive: true });
+            this._resizeObserver = new ResizeObserver(() => this._scrollListener());
+            this._resizeObserver.observe(this._itemsEl);
+            this._scrollListenerAttached = true;
+        }
+    }
+    _teardownScrollListeners() {
+        this._itemsEl?.removeEventListener('scroll', this._scrollListener);
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = undefined;
+        this._scrollListenerAttached = false;
+    }
+    _onSlotChange(e) {
+        const slot = e.target;
+        const items = slot.assignedElements();
+        this._totalCount = items.length;
+        if (this.layout !== 'horizontal-scroll') {
+            this._applyVisibility(items);
+        }
+    }
+    _applyVisibility(items) {
+        const slot = this._itemsEl?.querySelector('slot');
+        const elements = items ?? (slot?.assignedElements() ?? []);
+        elements.forEach((el, i) => {
+            el.hidden = i >= this._visibleCount;
+        });
+    }
+    _loadMore() {
+        this._visibleCount = Math.min(this._visibleCount + this.maxItems, this._totalCount);
+        this._applyVisibility();
+        this.dispatchEvent(new CustomEvent('load-more', { bubbles: true, composed: true }));
+    }
+    get _hasMore() {
+        return this._visibleCount < this._totalCount;
+    }
+    _scrollBy(direction) {
+        const slot = this._itemsEl?.querySelector('slot');
+        const firstItem = slot?.assignedElements()[0];
+        const itemWidth = firstItem?.offsetWidth ?? 280;
+        this._itemsEl?.scrollBy({ left: direction * (itemWidth + 16), behavior: 'smooth' });
+    }
+    render() {
+        return collectionTemplate(this);
+    }
+};
+NLDDCollection.styles = collectionStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDCollection.prototype, "layout", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'show-load-more' })
+], NLDDCollection.prototype, "showLoadMore", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-items' })
+], NLDDCollection.prototype, "maxItems", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'lazy-load' })
+], NLDDCollection.prototype, "lazyLoad", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'item-width' })
+], NLDDCollection.prototype, "itemWidth", void 0);
+__decorate([
+    property({ type: Object })
+], NLDDCollection.prototype, "translations", void 0);
+__decorate([
+    state()
+], NLDDCollection.prototype, "_visibleCount", void 0);
+__decorate([
+    state()
+], NLDDCollection.prototype, "_totalCount", void 0);
+__decorate([
+    state()
+], NLDDCollection.prototype, "_atStart", void 0);
+__decorate([
+    state()
+], NLDDCollection.prototype, "_atEnd", void 0);
+__decorate([
+    query('.collection__items')
+], NLDDCollection.prototype, "_itemsEl", void 0);
+__decorate([
+    query('nldd-button.load-more')
+], NLDDCollection.prototype, "_loadMoreBtn", void 0);
+NLDDCollection = __decorate([
+    customElement('nldd-collection')
+], NLDDCollection);
+export { NLDDCollection };
+//# sourceMappingURL=collection.js.map

package/dist/components/layout/collection/collection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection.js","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.ts"],"names":[],"mappings":"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"}

package/dist/components/layout/collection/collection.styles.d.ts

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

package/dist/components/layout/collection/collection.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,gBAAgB,yBA0I5B,CAAC"}

package/dist/components/layout/collection/collection.styles.js

@@ -0,0 +1,144 @@
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../assets/styles/breakpoints.js';
+const mdMin = unsafeCSS(breakpoints.mdMin);
+const lgMin = unsafeCSS(breakpoints.lgMin);
+export const collectionStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		min-width: 0;
+		gap: var(--components-collection-sm-gap);
+		--_item-width: var(--primitives-area-280);
+
+		@media (min-width: ${mdMin}) {
+			gap: var(--components-collection-md-gap);
+		}
+
+		@media (min-width: ${lgMin}) {
+			gap: var(--components-collection-lg-gap);
+		}
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Items */
+
+	.collection__items {
+		display: flex;
+		width: 100%;
+		gap: var(--components-collection-sm-gap);
+
+		@media (min-width: ${mdMin}) {
+			gap: var(--components-collection-md-gap);
+		}
+
+		@media (min-width: ${lgMin}) {
+			gap: var(--components-collection-lg-gap);
+		}
+	}
+
+
+	/* # Grid */
+
+	:host([layout='grid']) .collection__items,
+	:host(:not([layout])) .collection__items {
+		display: grid;
+		/* min(item-width, 100%) clamps the track min to the container width so
+		   a single column never forces horizontal overflow on narrow screens. */
+		grid-template-columns: repeat(auto-fill, minmax(min(var(--_item-width), 100%), 1fr));
+	}
+
+
+	/* # List */
+
+	:host([layout='list']) .collection__items {
+		flex-direction: column;
+	}
+
+
+	/* # Horizontal scroll */
+
+	:host([layout='horizontal-scroll']) .collection__items {
+		flex-direction: row;
+		flex-wrap: nowrap;
+		overflow-x: auto;
+		scroll-snap-type: x mandatory;
+		scroll-behavior: smooth;
+		-webkit-overflow-scrolling: touch;
+		scrollbar-width: none;
+		margin-inline-start: calc(var(--primitives-space-16) * -1);
+		padding-inline-start: var(--primitives-space-16);
+		scroll-padding-inline-start: var(--primitives-space-16);
+		padding-block: var(--primitives-space-16);
+		margin-block: calc(var(--primitives-space-16) * -1);
+		mask-image: linear-gradient(
+			to right,
+			transparent 0,
+			black var(--primitives-space-16),
+			black calc(100% - var(--primitives-space-48)),
+			transparent 100%
+		);
+	}
+
+	:host([layout='horizontal-scroll']) .collection__items::after {
+		content: '';
+		flex: 0 0 var(--primitives-space-48);
+	}
+
+	:host([layout='horizontal-scroll']) .collection__items::-webkit-scrollbar {
+		display: none;
+	}
+
+	:host([layout='horizontal-scroll']) .collection__items ::slotted(*) {
+		flex-grow: 1;
+		flex-shrink: 0;
+		flex-basis: var(--_item-width);
+		scroll-snap-align: start;
+	}
+
+
+	/* # Footer */
+
+	.collection__footer {
+		display: flex;
+		width: 100%;
+	}
+
+
+	/* # Load more (grid/list) */
+
+	:host([layout='grid']) .collection__footer,
+	:host([layout='list']) .collection__footer,
+	:host(:not([layout])) .collection__footer {
+		justify-content: stretch;
+	}
+
+	:host([layout='grid']) .collection__footer nldd-button,
+	:host([layout='list']) .collection__footer nldd-button,
+	:host(:not([layout])) .collection__footer nldd-button {
+		width: 100%;
+	}
+
+	:host([layout='grid']) .collection__footer nldd-button::part(button),
+	:host([layout='list']) .collection__footer nldd-button::part(button),
+	:host(:not([layout])) .collection__footer nldd-button::part(button) {
+		width: 100%;
+	}
+
+
+	/* # Scroll navigation (horizontal scroll) */
+
+	:host([layout='horizontal-scroll']) .collection__footer {
+		justify-content: flex-end;
+		gap: var(--primitives-space-16);
+	}
+`;
+//# sourceMappingURL=collection.styles.js.map

package/dist/components/layout/collection/collection.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;uBAaZ,KAAK;;;;uBAIL,KAAK;;;;;;;;;;;;;;;;;uBAiBL,KAAK;;;;uBAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoG3B,CAAC"}

package/dist/components/layout/collection/collection.template.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import type { NLDDCollection } from './collection.js';
+export declare function collectionTemplate(component: NLDDCollection): TemplateResult;
+//# sourceMappingURL=collection.template.d.ts.map

package/dist/components/layout/collection/collection.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection.template.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,cAAc,GAAG,cAAc,CAqC5E"}

package/dist/components/layout/collection/collection.template.js

@@ -0,0 +1,39 @@
+import { html, nothing } from 'lit';
+export function collectionTemplate(component) {
+    const isHorizontal = component.layout === 'horizontal-scroll';
+    const showLoadMore = !isHorizontal && component.showLoadMore && component._hasMore;
+    return html `
+		<div class="collection__items">
+			<slot @slotchange=${(e) => component._onSlotChange(e)}></slot>
+		</div>
+		<footer class="collection__footer">
+			<slot name="footer">
+				${isHorizontal ? html `
+					<nldd-button-bar>
+						<nldd-icon-button
+							icon="chevron-left"
+							text=${component._t('components.collection.previous-action')}
+							?disabled=${component._atStart}
+							@click=${() => component._scrollBy(-1)}
+						></nldd-icon-button>
+						<nldd-button-bar-divider></nldd-button-bar-divider>
+						<nldd-icon-button
+							icon="chevron-right"
+							text=${component._t('components.collection.next-action')}
+							?disabled=${component._atEnd}
+							@click=${() => component._scrollBy(1)}
+						></nldd-icon-button>
+					</nldd-button-bar>
+				` : nothing}
+				${showLoadMore ? html `
+					<nldd-button
+						variant="neutral-tinted"
+						text=${component._t('components.collection.load-more-action')}
+						@click=${() => component._loadMore()}
+					></nldd-button>
+				` : nothing}
+			</slot>
+		</footer>
+	`;
+}
+//# sourceMappingURL=collection.template.js.map

package/dist/components/layout/collection/collection.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection.template.js","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAGpD,MAAM,UAAU,kBAAkB,CAAC,SAAyB;IAC3D,MAAM,YAAY,GAAG,SAAS,CAAC,MAAM,KAAK,mBAAmB,CAAC;IAC9D,MAAM,YAAY,GAAG,CAAC,YAAY,IAAI,SAAS,CAAC,YAAY,IAAI,SAAS,CAAC,QAAQ,CAAC;IAEnF,OAAO,IAAI,CAAA;;uBAEW,CAAC,CAAQ,EAAE,EAAE,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC;;;;MAIzD,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA;;;;cAIX,SAAS,CAAC,EAAE,CAAC,uCAAuC,CAAC;mBAChD,SAAS,CAAC,QAAQ;gBACrB,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;;;;;cAK/B,SAAS,CAAC,EAAE,CAAC,mCAAmC,CAAC;mBAC5C,SAAS,CAAC,MAAM;gBACnB,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;;;KAGvC,CAAC,CAAC,CAAC,OAAO;MACT,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA;;;aAGZ,SAAS,CAAC,EAAE,CAAC,wCAAwC,CAAC;eACpD,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE;;KAErC,CAAC,CAAC,CAAC,OAAO;;;EAGb,CAAC;AACH,CAAC"}

package/dist/components/layout/container/container.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Nederlandse Digitale Dienst Container Component (Lit + TypeScript)
+ *
+ * A generic container with configurable padding.
+ * Padding can be set for all sides, per axis (inline/block),
+ * or per individual side (top, right, bottom, left).
+ * More specific settings take precedence: sides > axis > all sides.
+ *
+ * Responsive padding is supported via viewport breakpoints (sm-, md-, lg-)
+ * and container queries (layout-area-sm-, layout-area-md-, layout-area-lg-).
+ * Cascade order: base → viewport breakpoints → container queries.
+ *
+ * @element nldd-container
+ *
+ * @attr {string} padding              - Padding for all sides
+ * @attr {string} padding-inline       - Padding for left and right
+ * @attr {string} padding-block        - Padding for top and bottom
+ * @attr {string} padding-top          - Padding for top
+ * @attr {string} padding-right        - Padding for right
+ * @attr {string} padding-bottom       - Padding for bottom
+ * @attr {string} padding-left         - Padding for left
+ * @attr {string} sm-padding           - Padding for all sides at sm viewport breakpoint
+ * @attr {string} md-padding           - Padding for all sides at md viewport breakpoint
+ * @attr {string} lg-padding           - Padding for all sides at lg viewport breakpoint
+ * @attr {string} layout-area-sm-padding - Padding for all sides at sm container size
+ * @attr {string} layout-area-md-padding - Padding for all sides at md container size
+ * @attr {string} layout-area-lg-padding - Padding for all sides at lg container size
+ * (and equivalents for all padding directions)
+ *
+ * @slot - Container content
+ */
+import { LitElement } from 'lit';
+type PaddingSize = '0' | '2' | '4' | '6' | '8' | '10' | '12' | '16' | '20' | '24' | '28' | '32' | '40' | '44' | '48' | '56' | '64' | '80' | '96';
+export declare class NLDDContainer extends LitElement {
+    static styles: import("lit").CSSResult;
+    padding: PaddingSize | undefined;
+    paddingInline: PaddingSize | undefined;
+    paddingBlock: PaddingSize | undefined;
+    paddingTop: PaddingSize | undefined;
+    paddingRight: PaddingSize | undefined;
+    paddingBottom: PaddingSize | undefined;
+    paddingLeft: PaddingSize | undefined;
+    smPadding: PaddingSize | undefined;
+    smPaddingInline: PaddingSize | undefined;
+    smPaddingBlock: PaddingSize | undefined;
+    smPaddingTop: PaddingSize | undefined;
+    smPaddingRight: PaddingSize | undefined;
+    smPaddingBottom: PaddingSize | undefined;
+    smPaddingLeft: PaddingSize | undefined;
+    mdPadding: PaddingSize | undefined;
+    mdPaddingInline: PaddingSize | undefined;
+    mdPaddingBlock: PaddingSize | undefined;
+    mdPaddingTop: PaddingSize | undefined;
+    mdPaddingRight: PaddingSize | undefined;
+    mdPaddingBottom: PaddingSize | undefined;
+    mdPaddingLeft: PaddingSize | undefined;
+    lgPadding: PaddingSize | undefined;
+    lgPaddingInline: PaddingSize | undefined;
+    lgPaddingBlock: PaddingSize | undefined;
+    lgPaddingTop: PaddingSize | undefined;
+    lgPaddingRight: PaddingSize | undefined;
+    lgPaddingBottom: PaddingSize | undefined;
+    lgPaddingLeft: PaddingSize | undefined;
+    layoutAreaSmPadding: PaddingSize | undefined;
+    layoutAreaSmPaddingInline: PaddingSize | undefined;
+    layoutAreaSmPaddingBlock: PaddingSize | undefined;
+    layoutAreaSmPaddingTop: PaddingSize | undefined;
+    layoutAreaSmPaddingRight: PaddingSize | undefined;
+    layoutAreaSmPaddingBottom: PaddingSize | undefined;
+    layoutAreaSmPaddingLeft: PaddingSize | undefined;
+    layoutAreaMdPadding: PaddingSize | undefined;
+    layoutAreaMdPaddingInline: PaddingSize | undefined;
+    layoutAreaMdPaddingBlock: PaddingSize | undefined;
+    layoutAreaMdPaddingTop: PaddingSize | undefined;
+    layoutAreaMdPaddingRight: PaddingSize | undefined;
+    layoutAreaMdPaddingBottom: PaddingSize | undefined;
+    layoutAreaMdPaddingLeft: PaddingSize | undefined;
+    layoutAreaLgPadding: PaddingSize | undefined;
+    layoutAreaLgPaddingInline: PaddingSize | undefined;
+    layoutAreaLgPaddingBlock: PaddingSize | undefined;
+    layoutAreaLgPaddingTop: PaddingSize | undefined;
+    layoutAreaLgPaddingRight: PaddingSize | undefined;
+    layoutAreaLgPaddingBottom: PaddingSize | undefined;
+    layoutAreaLgPaddingLeft: PaddingSize | undefined;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-container': NLDDContainer;
+    }
+}
+export {};
+//# sourceMappingURL=container.d.ts.map

package/dist/components/layout/container/container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/container/container.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,KAAK,WAAW,GACb,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,CAAC;AAER,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAAmB;IAIzC,OAAO,EAAE,WAAW,GAAG,SAAS,CAAa;IAG7C,aAAa,EAAE,WAAW,GAAG,SAAS,CAAa;IAGnD,YAAY,EAAE,WAAW,GAAG,SAAS,CAAa;IAGlD,UAAU,EAAE,WAAW,GAAG,SAAS,CAAa;IAGhD,YAAY,EAAE,WAAW,GAAG,SAAS,CAAa;IAGlD,aAAa,EAAE,WAAW,GAAG,SAAS,CAAa;IAGnD,WAAW,EAAE,WAAW,GAAG,SAAS,CAAa;IAGjD,SAAS,EAAE,WAAW,GAAG,SAAS,CAAa;IAG/C,eAAe,EAAE,WAAW,GAAG,SAAS,CAAa;IAGrD,cAAc,EAAE,WAAW,GAAG,SAAS,CAAa;IAGpD,YAAY,EAAE,WAAW,GAAG,SAAS,CAAa;IAGlD,cAAc,EAAE,WAAW,GAAG,SAAS,CAAa;IAGpD,eAAe,EAAE,WAAW,GAAG,SAAS,CAAa;IAGrD,aAAa,EAAE,WAAW,GAAG,SAAS,CAAa;IAGnD,SAAS,EAAE,WAAW,GAAG,SAAS,CAAa;IAG/C,eAAe,EAAE,WAAW,GAAG,SAAS,CAAa;IAGrD,cAAc,EAAE,WAAW,GAAG,SAAS,CAAa;IAGpD,YAAY,EAAE,WAAW,GAAG,SAAS,CAAa;IAGlD,cAAc,EAAE,WAAW,GAAG,SAAS,CAAa;IAGpD,eAAe,EAAE,WAAW,GAAG,SAAS,CAAa;IAGrD,aAAa,EAAE,WAAW,GAAG,SAAS,CAAa;IAGnD,SAAS,EAAE,WAAW,GAAG,SAAS,CAAa;IAG/C,eAAe,EAAE,WAAW,GAAG,SAAS,CAAa;IAGrD,cAAc,EAAE,WAAW,GAAG,SAAS,CAAa;IAGpD,YAAY,EAAE,WAAW,GAAG,SAAS,CAAa;IAGlD,cAAc,EAAE,WAAW,GAAG,SAAS,CAAa;IAGpD,eAAe,EAAE,WAAW,GAAG,SAAS,CAAa;IAGrD,aAAa,EAAE,WAAW,GAAG,SAAS,CAAa;IAGnD,mBAAmB,EAAE,WAAW,GAAG,SAAS,CAAa;IAGzD,yBAAyB,EAAE,WAAW,GAAG,SAAS,CAAa;IAG/D,wBAAwB,EAAE,WAAW,GAAG,SAAS,CAAa;IAG9D,sBAAsB,EAAE,WAAW,GAAG,SAAS,CAAa;IAG5D,wBAAwB,EAAE,WAAW,GAAG,SAAS,CAAa;IAG9D,yBAAyB,EAAE,WAAW,GAAG,SAAS,CAAa;IAG/D,uBAAuB,EAAE,WAAW,GAAG,SAAS,CAAa;IAG7D,mBAAmB,EAAE,WAAW,GAAG,SAAS,CAAa;IAGzD,yBAAyB,EAAE,WAAW,GAAG,SAAS,CAAa;IAG/D,wBAAwB,EAAE,WAAW,GAAG,SAAS,CAAa;IAG9D,sBAAsB,EAAE,WAAW,GAAG,SAAS,CAAa;IAG5D,wBAAwB,EAAE,WAAW,GAAG,SAAS,CAAa;IAG9D,yBAAyB,EAAE,WAAW,GAAG,SAAS,CAAa;IAG/D,uBAAuB,EAAE,WAAW,GAAG,SAAS,CAAa;IAG7D,mBAAmB,EAAE,WAAW,GAAG,SAAS,CAAa;IAGzD,yBAAyB,EAAE,WAAW,GAAG,SAAS,CAAa;IAG/D,wBAAwB,EAAE,WAAW,GAAG,SAAS,CAAa;IAG9D,sBAAsB,EAAE,WAAW,GAAG,SAAS,CAAa;IAG5D,wBAAwB,EAAE,WAAW,GAAG,SAAS,CAAa;IAG9D,yBAAyB,EAAE,WAAW,GAAG,SAAS,CAAa;IAG/D,uBAAuB,EAAE,WAAW,GAAG,SAAS,CAAa;IAEpD,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}