@nldd/design-system 0.8.37

package/dist/components/inputs/search-field/search-field.js

@@ -0,0 +1,155 @@
+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 Search Field Component (Lit + TypeScript)
+ *
+ * A search input with a leading search icon, an optional dismiss button,
+ * and an optional search button.
+ *
+ * @element nldd-search-field
+ * @attr {string}  value               - The search value
+ * @attr {string}  placeholder         - Placeholder text for the input
+ * @attr {string}  accessible-label    - Accessible label (aria-label) for the native input.
+ *                                       Falls back to placeholder when not set.
+ *                                       Set explicitly when a value is already present
+ *                                       and the placeholder is no longer visible.
+ * @attr {string}  size                - Field size: 'sm' | 'md' (default: 'md')
+ * @attr {boolean} disabled            - Disabled state
+ * @attr {string}  name                - Input name for form submission
+ * @attr {boolean} show-search-button - When set, shows a search button on the right
+ * @attr {object}  translations        - Override translation keys; unset keys fall back to Dutch
+ * @attr {string}  width               - Optional fixed width (any CSS length, e.g. "240px"). Default: full-width.
+ *
+ * @fires input  - When the input value changes; detail: { value: string }
+ * @fires change - When the input value is committed; detail: { value: string }
+ * @fires search - When search is submitted via Enter or the search button; detail: { value: string }
+ */
+import { LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { searchFieldStyles } from './search-field.styles.js';
+import { searchFieldTemplate } from './search-field.template.js';
+import { nlddSearchFieldTranslations } from './search-field.i18n.js';
+import './../../actions/icon-button/icon-button.js';
+import './../../actions/button/button.js';
+import './../../content/icon/icon.js';
+let NLDDSearchField = class NLDDSearchField extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this.placeholder = 'Zoeken';
+        /** Accessible label forwarded as aria-label to the native input.
+         *  Use to describe what is being searched, e.g. "Zoek een document".
+         *  When not set, the placeholder value is used as aria-label automatically.
+         *  Set an explicit accessible-label when a value is already present and the
+         *  placeholder is no longer visible, to ensure screen readers still have context. */
+        this.accessibleLabel = '';
+        this.size = 'md';
+        this.disabled = false;
+        this.name = '';
+        this.showSearchButton = false;
+        /** Override one or more translation keys. Unset keys fall back to Dutch. */
+        this.translations = {};
+        /** Optional fixed width (any CSS length). When unset, the field stretches to fill its container. */
+        this.width = '';
+    }
+    updated(changed) {
+        if (changed.has('width')) {
+            this.style.width = this.width || '';
+        }
+    }
+    // — i18n ——————————————————————————————————————————————————————————————————
+    _t(key) {
+        return this.translations[key] ?? nlddSearchFieldTranslations[key];
+    }
+    // — Handlers ————————————————————————————————————————————————————————————
+    _handleInput(e) {
+        const input = e.target;
+        this.value = input.value;
+        this.dispatchEvent(new CustomEvent('input', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _handleChange(e) {
+        const input = e.target;
+        this.value = input.value;
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _handleKeydown(e) {
+        if (e.key === 'Enter') {
+            this._dispatchSearch();
+        }
+    }
+    _handleClear() {
+        this.value = '';
+        this.dispatchEvent(new CustomEvent('input', {
+            detail: { value: '' },
+            bubbles: true,
+            composed: true,
+        }));
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value: '' },
+            bubbles: true,
+            composed: true,
+        }));
+        this._input?.focus();
+    }
+    _handleSearch() {
+        this._dispatchSearch();
+    }
+    _dispatchSearch() {
+        this.dispatchEvent(new CustomEvent('search', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return searchFieldTemplate(this);
+    }
+};
+NLDDSearchField.styles = searchFieldStyles;
+__decorate([
+    property({ type: String })
+], NLDDSearchField.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], NLDDSearchField.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String, attribute: 'accessible-label' })
+], NLDDSearchField.prototype, "accessibleLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDSearchField.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDSearchField.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], NLDDSearchField.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'show-search-button' })
+], NLDDSearchField.prototype, "showSearchButton", void 0);
+__decorate([
+    property({ type: Object })
+], NLDDSearchField.prototype, "translations", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDSearchField.prototype, "width", void 0);
+__decorate([
+    query('.search-field__input')
+], NLDDSearchField.prototype, "_input", void 0);
+NLDDSearchField = __decorate([
+    customElement('nldd-search-field')
+], NLDDSearchField);
+export { NLDDSearchField };
+//# sourceMappingURL=search-field.js.map

package/dist/components/inputs/search-field/search-field.js.map

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

package/dist/components/inputs/search-field/search-field.styles.d.ts

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

package/dist/components/inputs/search-field/search-field.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/search-field/search-field.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBA+K7B,CAAC"}

package/dist/components/inputs/search-field/search-field.styles.js

@@ -0,0 +1,178 @@
+import { css } from 'lit';
+export const searchFieldStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: block;
+		--_background-color: var(--semantics-input-fields-background-color);
+		--_z-index-button-focus: 1;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host([disabled]) {
+		opacity: var(--primitives-opacity-disabled);
+		pointer-events: none;
+	}
+
+
+	/* # Block */
+
+	.search-field {
+		position: relative;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		box-sizing: border-box;
+		width: 100%;
+		background-color: var(--_background-color);
+		border: var(--semantics-input-fields-border);
+	}
+
+	:host([size='sm']) .search-field {
+		min-height: var(--semantics-controls-sm-min-size);
+		border-radius: var(--semantics-controls-sm-corner-radius);
+	}
+
+	:host([size='md']) .search-field,
+	:host(:not([size])) .search-field {
+		min-height: var(--semantics-controls-md-min-size);
+		border-radius: var(--semantics-controls-md-corner-radius);
+	}
+
+	.search-field:has(.search-field__input:focus-visible) {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+	.search-field:has(input:-webkit-autofill),
+	.search-field:has(input:autofill) {
+		--_background-color: var(--semantics-input-fields-is-autofill-background-color);
+	}
+
+
+	/* # Search icon */
+
+	.search-field__search-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		color: var(--semantics-content-secondary-color);
+	}
+
+	:host([size='sm']) .search-field__search-icon {
+		width: var(--primitives-space-20);
+		height: var(--primitives-space-20);
+		margin-inline: calc((var(--semantics-controls-sm-min-size) - var(--primitives-space-20)) / 2 - var(--semantics-input-fields-border-thickness));
+	}
+
+	:host([size='md']) .search-field__search-icon,
+	:host(:not([size])) .search-field__search-icon {
+		width: var(--primitives-space-24);
+		height: var(--primitives-space-24);
+		margin-inline: calc((var(--semantics-controls-md-min-size) - var(--primitives-space-24)) / 2 - var(--semantics-input-fields-border-thickness));
+	}
+
+
+	/* # Input */
+
+	.search-field__input {
+		appearance: none;
+		border: none;
+		background: transparent;
+		margin: 0;
+		padding: 0;
+		outline: none;
+		box-sizing: border-box;
+		flex: 1;
+		min-width: 0;
+		color: var(--semantics-content-color);
+	}
+
+	:host([size='sm']) .search-field__input {
+		font: var(--semantics-input-fields-sm-text-font);
+	}
+
+	:host([size='md']) .search-field__input,
+	:host(:not([size])) .search-field__input {
+		font: var(--semantics-input-fields-md-text-font);
+	}
+
+	.search-field__input::placeholder {
+		color: var(--semantics-input-fields-placeholder-color);
+	}
+
+	.search-field__input:-webkit-autofill,
+	.search-field__input:autofill {
+		box-shadow: 0 0 0 999px var(--_background-color) inset;
+	}
+
+	.search-field__input::-webkit-search-cancel-button {
+		-webkit-appearance: none;
+	}
+
+
+	/* # Input fade */
+
+	.search-field__input-fade {
+		position: relative;
+		flex-shrink: 0;
+		align-self: stretch;
+		width: 0;
+	}
+
+	.search-field__input-fade::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		width: var(--primitives-space-8);
+		background: linear-gradient(90deg, color-mix(in oklch, var(--_background-color) 0%, transparent) 0%, var(--_background-color) 100%);
+		pointer-events: none;
+	}
+
+	:host([size='sm']) .search-field__input-fade::after {
+		border-radius: var(--semantics-controls-sm-corner-radius);
+	}
+
+	:host([size='md']) .search-field__input-fade::after,
+	:host(:not([size])) .search-field__input-fade::after {
+		border-radius: var(--semantics-controls-md-corner-radius);
+	}
+
+
+	/* # End */
+
+	.search-field__end {
+		display: flex;
+		flex-shrink: 0;
+		align-items: center;
+		position: relative;
+	}
+
+	:host([size='sm']) .search-field__end {
+		padding-right: calc((var(--semantics-controls-sm-min-size) - var(--semantics-controls-xs-min-size)) / 2 - var(--semantics-input-fields-border-thickness));
+		gap: var(--primitives-space-4);
+	}
+
+	:host([size='md']) .search-field__end,
+	:host(:not([size])) .search-field__end {
+		padding-right: calc((var(--semantics-controls-md-min-size) - var(--semantics-controls-sm-min-size)) / 2 - var(--semantics-input-fields-border-thickness));
+		gap: var(--primitives-space-6);
+	}
+
+	.search-field__clear-button:focus-within,
+	.search-field__search-button:focus-within {
+		position: relative;
+		z-index: var(--_z-index-button-focus);
+	}
+`;
+//# sourceMappingURL=search-field.styles.js.map

package/dist/components/inputs/search-field/search-field.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-field.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/search-field/search-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+KnC,CAAC"}

package/dist/components/inputs/search-field/search-field.template.d.ts

@@ -0,0 +1,7 @@
+import { TemplateResult } from 'lit';
+import type { NLDDSearchField } from './search-field.js';
+import './../../actions/icon-button/icon-button.js';
+import './../../actions/button/button.js';
+import './../../content/icon/icon.js';
+export declare function searchFieldTemplate(component: NLDDSearchField): TemplateResult;
+//# sourceMappingURL=search-field.template.d.ts.map

package/dist/components/inputs/search-field/search-field.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-field.template.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/search-field/search-field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,4CAA4C,CAAC;AACpD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,8BAA8B,CAAC;AAEtC,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,eAAe,GAAG,cAAc,CA6C9E"}

package/dist/components/inputs/search-field/search-field.template.js

@@ -0,0 +1,50 @@
+import { html, nothing } from 'lit';
+import './../../actions/icon-button/icon-button.js';
+import './../../actions/button/button.js';
+import './../../content/icon/icon.js';
+export function searchFieldTemplate(component) {
+    const buttonSize = component.size === 'sm' ? 'xs' : 'sm';
+    return html `
+		<div class="search-field">
+			<div class="search-field__search-icon">
+				<nldd-icon name="search"></nldd-icon>
+			</div>
+			<input class="search-field__input"
+				type="search"
+				.value=${component.value}
+				placeholder=${component.placeholder}
+				aria-label=${component.accessibleLabel || component.placeholder || nothing}
+				?disabled=${component.disabled}
+				name=${component.name || nothing}
+				@input=${component._handleInput}
+				@change=${component._handleChange}
+				@keydown=${component._handleKeydown}
+			>
+			<div class="search-field__input-fade"></div>
+			<div class="search-field__end">
+				${component.value ? html `
+					<div class="search-field__clear-button">
+						<nldd-icon-button
+							variant="neutral-transparent"
+							size=${buttonSize}
+							icon="dismiss"
+							text=${component._t('components.search-field.clear-action')}
+							@click=${component._handleClear}
+						></nldd-icon-button>
+					</div>
+				` : nothing}
+				${component.showSearchButton ? html `
+					<div class="search-field__search-button">
+						<nldd-button
+							variant="neutral-tinted"
+							size=${buttonSize}
+							text=${component._t('components.search-field.search-action')}
+							@click=${component._handleSearch}
+						></nldd-button>
+					</div>
+				` : nothing}
+			</div>
+		</div>
+	`;
+}
+//# sourceMappingURL=search-field.template.js.map

package/dist/components/inputs/search-field/search-field.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-field.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/search-field/search-field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAEpD,OAAO,4CAA4C,CAAC;AACpD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,8BAA8B,CAAC;AAEtC,MAAM,UAAU,mBAAmB,CAAC,SAA0B;IAC7D,MAAM,UAAU,GAAG,SAAS,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAEzD,OAAO,IAAI,CAAA;;;;;;;aAOC,SAAS,CAAC,KAAK;kBACV,SAAS,CAAC,WAAW;iBACtB,SAAS,CAAC,eAAe,IAAI,SAAS,CAAC,WAAW,IAAI,OAAO;gBAC9D,SAAS,CAAC,QAAQ;WACvB,SAAS,CAAC,IAAI,IAAI,OAAO;aACvB,SAAS,CAAC,YAAY;cACrB,SAAS,CAAC,aAAa;eACtB,SAAS,CAAC,cAAc;;;;MAIjC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA;;;;cAId,UAAU;;cAEV,SAAS,CAAC,EAAE,CAAC,sCAAsC,CAAC;gBAClD,SAAS,CAAC,YAAY;;;KAGjC,CAAC,CAAC,CAAC,OAAO;MACT,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAA;;;;cAIzB,UAAU;cACV,SAAS,CAAC,EAAE,CAAC,uCAAuC,CAAC;gBACnD,SAAS,CAAC,aAAa;;;KAGlC,CAAC,CAAC,CAAC,OAAO;;;EAGb,CAAC;AACH,CAAC"}

package/dist/components/inputs/segmented-control/segmented-control.d.ts

@@ -0,0 +1,109 @@
+/**
+ * Nederlandse Digitale Dienst Segmented Control Component (Lit + TypeScript)
+ *
+ * A horizontal group of mutually exclusive (radio) or multi-select (checkbox) options.
+ * Exports both NLDDSegmentedControl and NLDDSegmentedControlItem.
+ *
+ * @element nldd-segmented-control
+ * @attr {string}  value         - Selected value for radio type
+ * @prop {string[]} values        - Selected values for checkbox type (property binding only, not an attribute)
+ * @attr {string}  size          - Control size: 'sm' | 'md' (default: 'md')
+ * @attr {string}  type          - Input type: 'radio' | 'checkbox' (default: 'radio')
+ * @attr {string}  variant       - Content type for all items: 'text' | 'icon' (default: 'text')
+ * @attr {boolean} disabled      - Disabled state for all items
+ * @attr {boolean} full-width    - Stretches to fill the container width
+ * @attr {string}  name          - Name for form submission, forwarded to native inputs
+ *
+ * @fires change - When selection changes; detail: { value: string } for radio,
+ *                 detail: { values: string[] } for checkbox
+ *
+ * @slot - nldd-segmented-control-item elements
+ *
+ * ---
+ *
+ * @element nldd-segmented-control-item
+ * @attr {string}  value        - Value for this item
+ * @attr {boolean} selected     - Whether this item is selected (set by parent)
+ * @attr {boolean} disabled     - Disabled state
+ * @attr {string}  text         - Text label (shown when parent variant="text",
+ *                                always used as aria-label and tooltip for icon items)
+ * @attr {string}  icon         - Icon name for nldd-icon
+ *
+ * @slot icon    - Slot for a custom icon (e.g. custom SVG). Only used when icon attribute is not set.
+ *
+ * @fires item-change - When item is activated; detail: { value: string, checked: boolean }
+ */
+import { LitElement } from 'lit';
+import './../../content/icon/icon.js';
+export type SegmentedControlSize = 'sm' | 'md';
+export type SegmentedControlType = 'radio' | 'checkbox';
+export type SegmentedControlVariant = 'text' | 'icon';
+export declare class NLDDSegmentedControlItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    value: string;
+    selected: boolean;
+    disabled: boolean;
+    /** Set by nldd-segmented-control. Not part of the public API. */
+    size: SegmentedControlSize;
+    /** Set by nldd-segmented-control. Not part of the public API. */
+    variant: SegmentedControlVariant;
+    /** Set by nldd-segmented-control. Not part of the public API. */
+    inputType: SegmentedControlType;
+    /** Set by nldd-segmented-control. Not part of the public API. */
+    groupName: string;
+    /** Text label for the item. Used as visible text and as aria-label/tooltip for icon variant. */
+    text: string;
+    /** Icon name for nldd-icon. When not set, the icon slot is used. */
+    icon: string;
+    _handleChange(e: Event): void;
+    render(): import("lit-html").TemplateResult;
+}
+export declare class NLDDSegmentedControl extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Selected value for radio type. */
+    value: string;
+    /**
+     * Selected values for checkbox type.
+     * Use property binding: .values=${['New York', 'Amsterdam']}
+     * Does not reflect to an attribute — safe for values containing spaces or special characters.
+     */
+    values: string[];
+    size: SegmentedControlSize;
+    type: SegmentedControlType;
+    /** Content type applied to all items. Mixing text and icon items is not supported. */
+    variant: SegmentedControlVariant;
+    disabled: boolean;
+    fullWidth: boolean;
+    name: string;
+    /** Accessible name for the group (aria-label). */
+    accessibleLabel: string;
+    /** ID of an external label element (aria-labelledby). */
+    accessibleLabelledBy: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _getItems;
+    private _getSelectedValues;
+    private _syncItems;
+    private static _idCounter;
+    private get _autoName();
+    private _generatedName;
+    private _handleItemChange;
+    /**
+     * Handles arrow key navigation for radio type.
+     * For checkbox type, keyboard navigation is intentionally omitted —
+     * each native checkbox input is individually Tab-focusable and
+     * Space-toggleable per the native checkbox interaction pattern.
+     */
+    private _handleKeydown;
+    _onSlotChange(): void;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-segmented-control': NLDDSegmentedControl;
+        'nldd-segmented-control-item': NLDDSegmentedControlItem;
+    }
+}
+//# sourceMappingURL=segmented-control.d.ts.map

package/dist/components/inputs/segmented-control/segmented-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/segmented-control/segmented-control.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAUjC,OAAO,8BAA8B,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,CAAC;AAC/C,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,MAAM,CAAC;AAKtD,qBACa,wBAAyB,SAAQ,UAAU;IACvD,OAAgB,MAAM,0BAA8B;IAGpD,KAAK,SAAM;IAGX,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB,iEAAiE;IAEjE,IAAI,EAAE,oBAAoB,CAAQ;IAElC,iEAAiE;IAEjE,OAAO,EAAE,uBAAuB,CAAU;IAE1C,iEAAiE;IAEjE,SAAS,EAAE,oBAAoB,CAAW;IAE1C,iEAAiE;IAEjE,SAAS,SAAM;IAEf,gGAAgG;IAEhG,IAAI,SAAM;IAEV,oEAAoE;IAEpE,IAAI,SAAM;IAEH,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAS3B,MAAM;CAGf;AAKD,qBACa,oBAAqB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BAA0B;IAEhD,qCAAqC;IAErC,KAAK,SAAM;IAEX;;;;OAIG;IAEH,MAAM,EAAE,MAAM,EAAE,CAAM;IAGtB,IAAI,EAAE,oBAAoB,CAAQ;IAGlC,IAAI,EAAE,oBAAoB,CAAW;IAErC,sFAAsF;IAEtF,OAAO,EAAE,uBAAuB,CAAU;IAG1C,QAAQ,UAAS;IAGjB,SAAS,UAAS;IAGlB,IAAI,SAAM;IAEV,kDAAkD;IAElD,eAAe,SAAM;IAErB,yDAAyD;IAEzD,oBAAoB,SAAM;IAIjB,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAM5B,YAAY,IAAI,IAAI;IAOpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAiC/D,OAAO,CAAC,SAAS;IAUjB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,UAAU;IA+BlB,OAAO,CAAC,MAAM,CAAC,UAAU,CAAK;IAE9B,OAAO,KAAK,SAAS,GAKpB;IAED,OAAO,CAAC,cAAc,CAAM;IAI5B,OAAO,CAAC,iBAAiB,CA0BvB;IAEF;;;;;OAKG;IACH,OAAO,CAAC,cAAc,CA2CpB;IAEK,aAAa,IAAI,IAAI;IAInB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,wBAAwB,EAAE,oBAAoB,CAAC;QAC/C,6BAA6B,EAAE,wBAAwB,CAAC;KACxD;CACD"}