@nldd/design-system 0.8.69 → 0.8.71

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

@@ -0,0 +1,246 @@
+import { css, unsafeCSS } from 'lit';
+import { inheritedTextReset } from '../../../assets/styles/style-resets.js';
+import { breakpoints } from '../../../assets/styles/breakpoints.js';
+const mdMin = unsafeCSS(breakpoints.mdMin);
+export const dateFieldStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
+
+
+	/* # Host */
+
+	:host {
+		/* Ruimer dan de tekst meet. Niet om afkappen te voorkomen (de cijfers zijn
+		   tabulair, dus elke datum meet hetzelfde), maar als lucht rond de datum en
+		   als greep om te selecteren en te slepen. */
+		--_date-width: 10.5ch;
+		/* Ruimte gereserveerd voor het scheidingsteken. Het teken zelf krijgt zijn
+		   eigen breedte, want het is vertaalbaar en zou in een vast vak afkappen; wat
+		   die reservering misgokt, vangt het einddatumveld op. */
+		--_separator-width: 3.5ch;
+		--_separator-padding-right: var(--primitives-space-6);
+		/* Linkerkant van het veld: het is een border-box, en padding-left trekt er al
+		   een rand vanaf, dus tellen beide randen samen voor één rand extra. */
+		--_edge-width: calc(var(--_inline-padding) + var(--semantics-input-fields-border-width));
+		/* Alles wat niet kan krimpen. Enkel het laatste datumveld rekt mee, dus dit is
+		   tevens de ondergrens: eronder zou de kalenderknop het veld uit lopen. */
+		--_fixed-width: calc(var(--_edge-width) + var(--_trailing-width));
+		--_width: calc(var(--_fixed-width) + var(--_date-width));
+		--_corner-radius: var(--semantics-controls-md-corner-radius);
+		--_background-color: var(--semantics-input-fields-background-color);
+		--_min-size: var(--semantics-controls-md-min-size);
+		--_inline-padding: var(--semantics-controls-md-inline-padding);
+		--_text-font: var(--semantics-input-fields-md-text-font);
+		--_validation-icon-size: var(--semantics-input-fields-md-validation-icon-size);
+		/* Even veel lucht rechts van de knop als erboven en eronder, dus afgeleid van
+		   het hoogteverschil tussen veld en knop in plaats van een vaste waarde. */
+		--_end-padding-right: calc((var(--_min-size) - var(--_button-size)) / 2 - var(--semantics-input-fields-border-width));
+		--_button-size: var(--semantics-controls-sm-min-size);
+		--_validation-icon-area-width: calc(var(--_min-size) - var(--semantics-input-fields-border-width) * 2);
+		--_trailing-width: calc(var(--_validation-icon-area-width) + var(--_button-size) + var(--_end-padding-right));
+
+		${inheritedTextReset}
+		display: block;
+		width: var(--_width);
+		min-width: var(--_fixed-width);
+		max-width: 100%;
+		font: var(--_text-font);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	/* The default width reserves a slot for both the picker button and the
+	   validation icon, so the field never resizes when a validation state appears.
+	   Without the button one slot is enough. */
+	:host([no-picker]) {
+		--_fixed-width: calc(var(--_edge-width) + var(--_inline-padding) + var(--_validation-icon-area-width));
+	}
+
+	:host([range]) {
+		--_fixed-width: calc(var(--_edge-width) + var(--_date-width) + var(--_separator-width) + var(--_trailing-width));
+	}
+
+	:host([range][no-picker]) {
+		--_fixed-width: calc(var(--_edge-width) + var(--_inline-padding) + var(--_date-width) + var(--_separator-width) + var(--_validation-icon-area-width));
+	}
+
+	:host([size="sm"]) {
+		--_corner-radius: var(--semantics-controls-sm-corner-radius);
+		--_min-size: var(--semantics-controls-sm-min-size);
+		--_inline-padding: var(--semantics-controls-sm-inline-padding);
+		--_text-font: var(--semantics-input-fields-sm-text-font);
+		--_validation-icon-size: var(--semantics-input-fields-sm-validation-icon-size);
+		--_button-size: var(--semantics-controls-xs-min-size);
+	}
+
+
+	/* # Block */
+
+	.date-field {
+		box-sizing: border-box;
+		display: flex;
+		border: var(--semantics-input-fields-border);
+		border-radius: var(--_corner-radius);
+		background-color: var(--_background-color);
+		min-height: var(--_min-size);
+		overflow: hidden;
+		padding-left: calc(var(--_inline-padding) - var(--semantics-input-fields-border-width));
+		flex-direction: row;
+		align-items: center;
+	}
+
+	:host([valid]) .date-field {
+		border-color: var(--semantics-input-fields-is-valid-border-color);
+	}
+
+	:host([invalid]) .date-field {
+		border-color: var(--semantics-input-fields-is-invalid-border-color);
+	}
+
+	:host([readonly]) .date-field {
+		--_background-color: var(--semantics-input-fields-is-read-only-background-color);
+		border-color: var(--semantics-input-fields-is-read-only-border-color);
+	}
+
+	:host([disabled]) .date-field {
+		opacity: var(--primitives-opacity-disabled);
+	}
+
+	.date-field:has(input:-webkit-autofill),
+	.date-field:has(input:autofill) {
+		--_background-color: var(--semantics-input-fields-is-autofill-background-color);
+	}
+
+	/* Keyed on the text input, not :focus-within: the calendar button and the
+	   popover live inside this box too, so focus-within would draw a second ring
+	   around the whole field while the button already has its own. */
+	.date-field:has(.date-field__input:focus) {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+
+	/* # Elements */
+
+	.date-field__input {
+		box-sizing: border-box;
+		margin: 0;
+		outline: none;
+		border: none;
+		background: transparent;
+		min-width: 0;
+		min-height: calc(var(--_min-size) - var(--semantics-input-fields-border-width) * 2);
+		overflow: hidden;
+		padding: 0;
+		flex-grow: 1;
+		color: var(--semantics-content-color);
+		font: var(--_text-font);
+		appearance: none;
+	}
+
+	:host([disabled]) .date-field__input {
+		pointer-events: none;
+	}
+
+	.date-field__input::placeholder {
+		color: var(--semantics-input-fields-placeholder-color);
+	}
+
+	.date-field__input:-webkit-autofill,
+	.date-field__input:autofill,
+	.date-field__input:-webkit-autofill:disabled,
+	.date-field__input:autofill:disabled {
+		box-shadow: 0 0 0 999px var(--_background-color) inset;
+		-webkit-text-fill-color: var(--semantics-input-fields-is-autofill-content-color);
+	}
+
+	/* Vaste maat: groeit of krimpt het startveld mee, dan verspringen het
+	   scheidingsteken en de einddatum zodra het validatie-icoon zijn ruimte opeist
+	   of het veld smaller wordt gezet. */
+	:host([range]) .date-field__input {
+		width: var(--_date-width);
+		flex-grow: 0;
+		flex-shrink: 0;
+	}
+
+	/* De einddatum rekt en krimpt wel mee, net als in een gewoon datumveld: hij
+	   staat na de scheiding, dus daarvoor verschuift er niets. */
+	:host([range]) .date-field__input:last-of-type {
+		flex-grow: 1;
+		flex-shrink: 1;
+	}
+
+	/* Alleen ruimte erná: het startveld is iets ruimer dan zijn tekst, en die
+	   speling levert de ruimte ervóór al. Aan beide kanten padding zetten maakt het
+	   op het scherm juist scheef. */
+	.date-field__separator {
+		flex-shrink: 0;
+		padding-right: var(--_separator-padding-right);
+		color: var(--semantics-content-secondary-color);
+	}
+
+	.date-field__input-fade {
+		position: relative;
+		width: 0;
+		flex-shrink: 0;
+		align-self: stretch;
+	}
+
+	.date-field__input-fade::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		border-radius: var(--_corner-radius);
+		background: linear-gradient(90deg, color-mix(in oklch, var(--_background-color) 0%, transparent) 0%, var(--_background-color) 100%);
+		pointer-events: none;
+		width: var(--primitives-space-8);
+	}
+
+	.date-field__validation-icon-area {
+		display: flex;
+		width: var(--_validation-icon-area-width);
+		height: 100%;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+	}
+
+	:host([valid]) .date-field__validation-icon-area {
+		color: var(--semantics-input-fields-is-valid-icon-color);
+	}
+
+	:host([invalid]) .date-field__validation-icon-area {
+		color: var(--semantics-input-fields-is-invalid-icon-color);
+	}
+
+	.date-field__validation-icon {
+		display: flex;
+		width: var(--_validation-icon-size);
+		height: var(--_validation-icon-size);
+	}
+
+	.date-field__picker-button {
+		position: relative;
+		flex-shrink: 0;
+		padding-right: var(--_end-padding-right);
+		display: flex;
+		align-items: center;
+	}
+
+
+	/* The sheet's title bar only makes sense on a small screen, where the popover
+	   becomes a bottom sheet. It shows by default and is hidden from md up. */
+	@media (min-width: ${mdMin}) {
+		.date-field__picker-button nldd-top-title-bar {
+			display: none;
+		}
+	}
+`;
+//# sourceMappingURL=date-field.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-field.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/date-field/date-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsC9B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAqMA,KAAK;;;;;CAK1B,CAAC"}

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

@@ -0,0 +1,17 @@
+import { TemplateResult } from 'lit';
+import type { NLDDDateField } from './date-field.js';
+import './../../actions/icon-button/icon-button.js';
+import './../../content/icon/icon.js';
+import './../../layout/popover/popover.js';
+import './../../layout/container/container.js';
+import './../../navigation/top-title-bar/top-title-bar.js';
+import './../date-picker/date-picker.js';
+/**
+ * The popover pins both its left and right edge, so an `auto` width collapses to
+ * nothing and the calendar hangs outside a zero-wide box. Stated instead, from
+ * the same token the calendar sizes its columns with, plus the container padding
+ * on both sides - so the two stay in step if that token ever moves.
+ */
+export declare const PICKER_POPOVER_WIDTH = "calc(var(--semantics-controls-md-min-size) * 7 + var(--primitives-space-16) * 2)";
+export declare function dateFieldTemplate(component: NLDDDateField): TemplateResult;
+//# sourceMappingURL=date-field.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-field.template.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/date-field/date-field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,4CAA4C,CAAC;AACpD,OAAO,8BAA8B,CAAC;AACtC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,mDAAmD,CAAC;AAC3D,OAAO,iCAAiC,CAAC;AAEzC;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,qFAAqF,CAAC;AA4GvH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,aAAa,GAAG,cAAc,CAqB1E"}

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

@@ -0,0 +1,141 @@
+import { html, nothing } from 'lit';
+import './../../actions/icon-button/icon-button.js';
+import './../../content/icon/icon.js';
+import './../../layout/popover/popover.js';
+import './../../layout/container/container.js';
+import './../../navigation/top-title-bar/top-title-bar.js';
+import './../date-picker/date-picker.js';
+/**
+ * The popover pins both its left and right edge, so an `auto` width collapses to
+ * nothing and the calendar hangs outside a zero-wide box. Stated instead, from
+ * the same token the calendar sizes its columns with, plus the container padding
+ * on both sides - so the two stay in step if that token ever moves.
+ */
+export const PICKER_POPOVER_WIDTH = 'calc(var(--semantics-controls-md-min-size) * 7 + var(--primitives-space-16) * 2)';
+/** One branch for both states: two near-identical copies drifted apart before. */
+function renderValidationIcon(component) {
+    const name = component.invalid ? 'invalid' : (component.valid ? 'valid' : '');
+    if (!name)
+        return nothing;
+    return html `
+		<div class="date-field__validation-icon-area">
+			<span class="date-field__validation-icon">
+				<nldd-icon
+					name=${name}
+					aria-hidden="true"
+				></nldd-icon>
+			</span>
+		</div>
+	`;
+}
+/* eslint-disable lit-a11y/no-autofocus -- Not autofocus on page load: nldd-popover
+   reads this attribute to pick its focus target inside an overlay the user just
+   opened. Without it focus stops on the popover itself and the arrow keys do
+   nothing until you have tabbed into the grid yourself. */
+/**
+ * The calendar is nldd-date-picker in a popover rather than the browser's own.
+ * The native one could not be closed in Safari: it ties dismissal to the input,
+ * and that input has to be invisible for the button beside it to be the only
+ * control.
+ */
+function renderPicker(component) {
+    if (component.noPicker)
+        return nothing;
+    const buttonSize = component.size === 'sm' ? 'xs' : 'sm';
+    return html `
+		<div class="date-field__picker-button">
+			<nldd-icon-button
+				variant="neutral-tinted"
+				size=${buttonSize}
+				icon="calendar"
+				text=${component._t('components.date-field.to-pick-date-action')}
+				tooltip-timing="never"
+				?disabled=${component.disabled || component.readonly}
+				@click=${component._handlePickerClick}
+			></nldd-icon-button>
+			<nldd-popover
+				accessible-label=${component._pickerLabel}
+				width=${component._pickerPopoverWidth}
+				@toggle=${component._handlePopoverToggle}
+			>
+				<nldd-top-title-bar
+					text=${component._pickerLabel}
+					dismiss-text=${component._t('components.date-field.cancel-action')}
+					@dismiss=${component._handlePickerDismiss}
+				></nldd-top-title-bar>
+				<nldd-container padding="16"
+					@change=${component._handlePickerChange}
+				>
+					<slot name="picker"
+						@slotchange=${component._handlePickerSlotChange}
+					></slot>
+					${component._hasSlottedPicker ? nothing : html `
+						<nldd-date-picker
+							autofocus
+							?range=${component.range}
+							value=${!component.range ? (component.value || nothing) : nothing}
+							start=${component.range ? (component._startValue || nothing) : nothing}
+							end=${component.range ? (component._endValue || nothing) : nothing}
+							min=${component.min || nothing}
+							max=${component.max || nothing}
+						></nldd-date-picker>
+					`}
+				</nldd-container>
+			</nldd-popover>
+		</div>
+	`;
+}
+/**
+ * One input per end. The field keeps a single accessible name for the group and
+ * distinguishes the two inputs itself ("Periode, van"), so nldd-form-field can
+ * go on setting one label and one id without knowing about periods.
+ */
+function renderInput(component, end) {
+    const label = component.range
+        ? [component._fieldLabel, component._t(end
+                ? 'components.date-field.range-to-lowercase-label'
+                : 'components.date-field.range-from-lowercase-label')].join(', ')
+        : component._fieldLabel;
+    return html `
+		<input class="date-field__input"
+			id=${!end ? (component.inputId || nothing) : nothing}
+			type="text"
+			inputmode="numeric"
+			.value=${end ? component._displayEndValue : component._displayValue}
+			placeholder=${component.placeholder || nothing}
+			?disabled=${component.disabled}
+			?readonly=${component.readonly}
+			?required=${component.required}
+			autocomplete=${!end ? (component.autocomplete || nothing) : nothing}
+			aria-label=${label || nothing}
+			aria-describedby=${component.errorMessageIds || nothing}
+			aria-invalid=${component.invalid ? 'true' : nothing}
+			@keydown=${(e) => component._handleInputKeydown(e, end)}
+			@input=${(e) => component._handleInput(e, end)}
+			@change=${(e) => component._handleChange(e, end)}
+		>
+	`;
+}
+export function dateFieldTemplate(component) {
+    return html `
+		<div class="date-field"
+			role=${component.range ? 'group' : nothing}
+			aria-label=${component.range ? component._fieldLabel : nothing}
+			@focusout=${component._handleFieldBlur}
+		>
+			${renderInput(component, false)}
+			${component.range ? html `
+				<span class="date-field__separator"
+					aria-hidden="true"
+				>
+					${component._t('components.date-field.range-to-short-lowercase-label')}
+				</span>
+				${renderInput(component, true)}
+			` : nothing}
+			<div class="date-field__input-fade"></div>
+			${renderValidationIcon(component)}
+			${renderPicker(component)}
+		</div>
+	`;
+}
+//# sourceMappingURL=date-field.template.js.map

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

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