@ds-autonomie/web-components 2.6.0 → 2.7.0

package/cdn/internal/components/checkbox-box/checkbox-box.styles.js

@@ -28,7 +28,8 @@ export default css `
     border-radius: var(--dsa-wc-checkbox-border-radius);
     background-color: var(--dsa-wc-checkbox-background-color);
     color: var(--dsa-wc-checkbox-icon-color);
-    transition: var(--dsa-wc-transition-fast) border-color,
+    transition:
+      var(--dsa-wc-transition-fast) border-color,
       var(--dsa-wc-transition-fast) background-color,
       var(--dsa-wc-transition-fast) color,
       var(--dsa-wc-transition-fast) box-shadow;

package/cdn/internal/components/date-field/date-field.d.ts

@@ -27,6 +27,7 @@ export default class DSAInternalDateField extends ShoelaceElement implements Sho
     private delimiter;
     private lastPressedKey;
     private internalValueChange;
+    private previousTentativeDate;
     /** The parent element accessible name */
     parentName: string;
     /** A description for accessibility */
@@ -70,6 +71,7 @@ export default class DSAInternalDateField extends ShoelaceElement implements Sho
     set valueAsDate(newValue: Date | null);
     /** Gets or sets the current value as a number. Returns `NaN` if the value can't be converted. */
     get valueAsNumber(): number;
+    set valueAsNumber(newValue: number);
     /** Gets the validity state object */
     get validity(): ValidityState;
     /** Gets the validation message */

package/cdn/internal/components/date-field/date-field.js

@@ -54,6 +54,7 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
         this.delimiter = '/';
         this.lastPressedKey = '';
         this.internalValueChange = false;
+        this.previousTentativeDate = '';
         /** The parent element accessible name */
         this.parentName = '';
         /** A description for accessibility */
@@ -96,6 +97,10 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
         var _a;
         return (_a = this.hiddenInput.valueAsNumber) !== null && _a !== void 0 ? _a : parseFloat(this.value);
     }
+    set valueAsNumber(newValue) {
+        this.hiddenInput.valueAsNumber = newValue;
+        this.value = this.hiddenInput.value;
+    }
     /** Gets the validity state object */
     get validity() {
         return this.hiddenInput.validity;
@@ -150,16 +155,17 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
     }
     handleChange() {
         const previousValue = this.value;
-        let tempSelectedDay = this.dayInput.value;
+        const tempSelectedDay = this.dayInput.value;
         const tempSelectedMonth = this.monthInput.value;
         const tempSelectedYear = this.yearInput.value;
-        if (tempSelectedDay > this.dayInput.max) {
-            tempSelectedDay = this.dayInput.max;
-        }
         const tentativeDate = `${tempSelectedYear}-${tempSelectedMonth}-${tempSelectedDay}`;
-        if (tempSelectedDay === '' &&
+        const allFilled = tempSelectedDay !== '' &&
+            tempSelectedMonth !== '' &&
+            tempSelectedYear !== '';
+        const allEmpty = tempSelectedDay === '' &&
             tempSelectedMonth === '' &&
-            tempSelectedYear === '') {
+            tempSelectedYear === '';
+        if (allEmpty) {
             this.setCustomValidity('');
             this.value = '';
         }
@@ -173,8 +179,14 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
         }
         this.internalValueChange = true;
         this.formControlController.updateValidity();
-        if (this.value !== previousValue) {
+        if (!isValidDate(tentativeDate)) {
+            this.formControlController.emitInvalidEvent(event);
+        }
+        // Emit change event if the value has changed, or if the individual inputs have changed AND they are all filled or all empty (if the date is invalid the value will be reset to an empty string)
+        if (this.value !== previousValue ||
+            (tentativeDate !== this.previousTentativeDate && (allFilled || allEmpty))) {
             this.emit('dsa-change');
+            this.previousTentativeDate = tentativeDate;
         }
     }
     handleFocus(event) {
@@ -211,6 +223,9 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
             event.preventDefault();
             this.focusNextSpinbutton(currentInput);
         }
+        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+            setTimeout(() => currentInput.select());
+        }
         if (event.key === 'Enter') {
             this.handleChange();
         }

package/cdn/internal/components/date-field/date-field.styles.js

@@ -56,10 +56,10 @@ export default css `
 
   .input-date__day,
   .input-date__month {
-    width: 1.5rem;
+    width: 1.7em;
   }
   .input-date__year {
-    width: 2.5rem;
+    width: 2.6em;
   }
 
   #description {

package/cdn/internal/components/filter-base/filter-base-stories.d.ts

@@ -0,0 +1,2 @@
+import type { ArgTypes } from '@storybook/web-components-vite';
+export declare const filterBaseArgTypes: ArgTypes;

package/cdn/internal/components/filter-base/filter-base-stories.js

@@ -0,0 +1,76 @@
+import { updateCompleteArgTypes } from '../../../utilities/storybook';
+export const filterBaseArgTypes = {
+    label: {
+        name: 'label',
+        description: "The filter's label, displayed inside the button",
+        table: {
+            category: 'Filters common',
+            defaultValue: { summary: "''" },
+            type: {
+                summary: 'string',
+            },
+        },
+        control: { type: 'text' },
+    },
+    '?open': {
+        name: 'open',
+        description: "Indicates whether or not the filter panel is open. You can toggle this attribute to show and hide the menu, or you can use the show() and hide() methods and this attribute will reflect the filter's open state",
+        table: {
+            category: 'Filters common',
+            defaultValue: { summary: 'false' },
+            type: {
+                summary: 'boolean',
+            },
+        },
+        control: { type: 'boolean' },
+    },
+    '?disabled': {
+        name: 'disabled',
+        description: 'Disables the dropdown so the panel will not open',
+        table: {
+            category: 'Filters common',
+            defaultValue: { summary: 'false' },
+            type: {
+                summary: 'boolean',
+            },
+        },
+        control: { type: 'boolean' },
+    },
+    '?readonly': {
+        name: 'readonly',
+        description: 'Sets the filter to readonly mode',
+        table: {
+            category: 'Filters common',
+            defaultValue: { summary: 'false' },
+            type: {
+                summary: 'boolean',
+            },
+        },
+        control: { type: 'boolean' },
+    },
+    '?hoist': {
+        name: 'hoist',
+        description: 'Enable this option to prevent the panel from being clipped when the component is placed inside a container with overflow: auto|scroll. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios',
+        table: {
+            category: 'Filters common',
+            defaultValue: { summary: 'false' },
+            type: {
+                summary: 'boolean',
+            },
+        },
+        control: { type: 'boolean' },
+    },
+    '?drawer': {
+        name: 'drawer',
+        description: 'Set to true if used in a drawer',
+        table: {
+            category: 'Filters common',
+            defaultValue: { summary: 'false' },
+            type: {
+                summary: 'boolean',
+            },
+        },
+        control: { type: 'boolean' },
+    },
+    updateComplete: updateCompleteArgTypes,
+};

package/cdn/{components → internal/components}/filter-base/filter-base.d.ts

@@ -1,11 +1,11 @@
-import { ShoelaceElement } from '../../internal/shoelace-element';
-import { LocalizeController } from '../../utilities/localize';
-import type DSAButton from '../button/button';
-import type DSAFilterButton from '../filter-button/filter-button';
-import '../filter-button/filter-button';
-import type DSAIconButton from '../icon-button/icon-button';
-import type DSAPopup from '../popup/popup';
-import '../popup/popup';
+import type DSAButton from '../../../components/button/button';
+import type DSAFilterButton from '../../../components/filter-button/filter-button';
+import '../../../components/filter-button/filter-button';
+import type DSAIconButton from '../../../components/icon-button/icon-button';
+import type DSAPopup from '../../../components/popup/popup';
+import '../../../components/popup/popup';
+import { LocalizeController } from '../../../utilities/localize';
+import { ShoelaceElement } from '../../shoelace-element';
 export declare class FilterBase extends ShoelaceElement {
     protected readonly localize: LocalizeController;
     popup: DSAPopup;

package/cdn/internal/components/filter-base/filter-base.js

@@ -0,0 +1,362 @@
+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;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { html } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { renderFormElementErrors } from '../../../components/error-text/error-text.utils';
+import '../../../components/filter-button/filter-button';
+import '../../../components/popup/popup';
+import { getAnimation, setDefaultAnimation, } from '../../../utilities/animation-registry';
+import { LocalizeController } from '../../../utilities/localize';
+import { a11yWarning } from '../../a11y-warning';
+import { animateTo, stopAnimations, shimKeyframesHeightAuto, } from '../../animate';
+import { waitForEvent } from '../../event';
+import { ShoelaceElement } from '../../shoelace-element';
+import { watch } from '../../watch';
+export class FilterBase extends ShoelaceElement {
+    constructor() {
+        super(...arguments);
+        this.localize = new LocalizeController(this);
+        this.errorMessages = [];
+        /*
+         * The current value of the filter.
+         */
+        this.value = '';
+        /*
+         * The filter's label
+         */
+        this.label = '';
+        /**
+         * Indicates whether or not the filter panel is open. You can toggle this attribute to show and hide the menu, or you can
+         * use the `show()` and `hide()` methods and this attribute will reflect the filter's open state.
+         */
+        this.open = false;
+        /**
+         * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+         * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
+         */
+        this.hoist = false;
+        /* If `true`, disables the filter  */
+        this.disabled = false;
+        /* If `true`, set the filter to readonly mode  */
+        this.readonly = false;
+        /* Set to true if used in a drawer  */
+        this.drawer = false;
+        /* (For internal DSA use only)  */
+        this.placement = 'bottom-start';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
+        this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+    }
+    firstUpdated() {
+        if (this.drawer) {
+            this.filterPanel.hidden = !this.open;
+            this.filterPanel.style.height = this.open ? 'auto' : '0';
+        }
+    }
+    addOpenListeners() {
+        document.addEventListener('focusin', this.handleDocumentFocusIn);
+        document.addEventListener('mousedown', this.handleDocumentMouseDown);
+    }
+    removeOpenListeners() {
+        document.removeEventListener('focusin', this.handleDocumentFocusIn);
+        document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+    }
+    handleFocus() {
+        this.emit('dsa-focus');
+    }
+    handleBlur() {
+        this.emit('dsa-blur');
+    }
+    handleDocumentFocusIn(event) {
+        // Close when focusing out of the panel
+        const path = event.composedPath();
+        if (this && !this.drawer && !path.includes(this)) {
+            this.hide();
+            this.filterTrigger.focus({ preventScroll: true });
+        }
+    }
+    handleKeyDown(event) {
+        if (event.key !== 'Escape') {
+            event.stopPropagation();
+        }
+        // Close when pressing escape
+        if (!this.drawer && this.open && event.key === 'Escape') {
+            event.stopPropagation();
+            event.preventDefault();
+            this.hide();
+            this.filterTrigger.focus({ preventScroll: true });
+        }
+        // Handle tabbing
+        if (!this.drawer && this.open && event.key === 'Tab') {
+            // Tabbing outside of the containing element closes the panel
+            setTimeout(() => {
+                var _a, _b;
+                const activeElement = (this === null || this === void 0 ? void 0 : this.getRootNode()) instanceof ShadowRoot
+                    ? (_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement
+                    : document.activeElement;
+                if (!this ||
+                    (activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest(this.tagName.toLowerCase())) !== this) {
+                    this.hide();
+                }
+            });
+        }
+        // Handle enter and space. When pressing space, we allow for type to select behaviors so if there's anything in the buffer we _don't_ close it.
+        const path = event.composedPath();
+        const isFilterTrigger = path.some((el) => el === this.filterTrigger);
+        if (isFilterTrigger && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            // If it's not open, open it
+            if (!this.open) {
+                this.show();
+                return;
+            }
+            // If it is open, and the focus is on the trigger, close it
+            if (isFilterTrigger) {
+                this.hide();
+            }
+        }
+    }
+    handleDocumentMouseDown(event) {
+        // Close when clicking outside of the filter
+        const path = event.composedPath();
+        if (this && !this.drawer && !path.includes(this)) {
+            this.hide();
+        }
+    }
+    handleFilterTriggerMouseDown(event) {
+        event.preventDefault();
+        this.filterTrigger.focus({ preventScroll: true });
+        this.open = !this.open;
+    }
+    handleDisabledChange() {
+        if (this.disabled || this.readonly) {
+            this.open = false;
+            this.handleOpenChange();
+        }
+    }
+    handleOpenChange() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.open) {
+                // Show
+                this.emit('dsa-show');
+                this.addOpenListeners();
+                yield stopAnimations(this);
+                if (this.drawer) {
+                    const { keyframes, options } = getAnimation(this, 'accordion.show', {
+                        dir: this.localize.dir(),
+                    });
+                    this.filterPanel.hidden = false;
+                    yield animateTo(this.filterPanel, shimKeyframesHeightAuto(keyframes, this.filterPanel.scrollHeight), options);
+                    this.filterPanel.style.height = 'auto';
+                }
+                else {
+                    const { keyframes, options } = getAnimation(this, 'filter.show', {
+                        dir: this.localize.dir(),
+                    });
+                    this.popup.active = true;
+                    yield animateTo(this.popup.popup, keyframes, options);
+                }
+                this.emit('dsa-after-show');
+            }
+            else {
+                // Hide
+                this.emit('dsa-hide');
+                this.removeOpenListeners();
+                yield stopAnimations(this);
+                if (this.drawer) {
+                    const { keyframes, options } = getAnimation(this, 'accordion.hide', {
+                        dir: this.localize.dir(),
+                    });
+                    yield animateTo(this.filterPanel, shimKeyframesHeightAuto(keyframes, this.filterPanel.scrollHeight), options);
+                    this.filterPanel.hidden = true;
+                    this.filterPanel.style.height = 'auto';
+                }
+                else {
+                    const { keyframes, options } = getAnimation(this, 'filter.hide', {
+                        dir: this.localize.dir(),
+                    });
+                    yield animateTo(this.popup.popup, keyframes, options);
+                    this.popup.active = false;
+                }
+                this.emit('dsa-after-hide');
+            }
+        });
+    }
+    /** Shows the listbox. */
+    show() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.disabled || this.readonly) {
+                return undefined;
+            }
+            if (this.open) {
+                this.open = false;
+                return undefined;
+            }
+            this.open = true;
+            return yield waitForEvent(this, 'dsa-after-show');
+        });
+    }
+    /** Hides the listbox. */
+    hide() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.open) {
+                this.open = false;
+                return undefined;
+            }
+            this.open = false;
+            return yield waitForEvent(this, 'dsa-after-hide');
+        });
+    }
+    /** Sets focus on the control. */
+    focus(options) {
+        this.filterTrigger.focus(options);
+    }
+    /** Removes focus from the control. */
+    blur() {
+        this.filterTrigger.blur();
+    }
+    // To be implemented by subclasses
+    renderPanelContent() {
+        return html ``;
+    }
+    // Common render methods
+    renderTrigger() {
+        if (!this.label) {
+            a11yWarning('Filters require a label attribute for accessibility');
+        }
+        return html ` <dsa-filter-button
+      slot="anchor"
+      class="filter__trigger"
+      label=${this.label}
+      selected-option=${this.value}
+      selection-count=${this.value !== '' ? 1 : 0}
+      aria-expanded=${this.open ? 'true' : 'false'}
+      aria-controls="filter__panel"
+      ?disabled=${this.disabled}
+      ?readonly=${this.readonly}
+      ?drawer=${this.drawer}
+      @focus=${this.handleFocus}
+      @blur=${this.handleBlur}
+      @mousedown=${this.handleFilterTriggerMouseDown}
+    ></dsa-filter-button>`;
+    }
+    render() {
+        if (this.drawer) {
+            return html `
+        <div class="filter--drawer" @keydown=${this.handleKeyDown}>
+          ${this.renderTrigger()}
+          <div id="filter__panel" class="filter__panel">
+            ${this.renderPanelContent()}
+          </div>
+        </div>
+      `;
+        }
+        return html `
+      <dsa-popup
+        class="filter"
+        part="popup"
+        placement=${this.placement}
+        strategy=${this.hoist ? 'fixed' : 'absolute'}
+        distance="4"
+        flip
+        shift
+        auto-size="vertical"
+        auto-size-padding="10"
+        @keydown=${this.handleKeyDown}
+      >
+        ${this.renderTrigger()}
+        <div id="filter__panel" class="filter__panel">
+          ${this.renderPanelContent()}
+        </div>
+      </dsa-popup>
+      ${this.errorMessages.length > 0
+            ? renderFormElementErrors(this.errorMessages)
+            : ''}
+    `;
+    }
+}
+__decorate([
+    query('.filter')
+], FilterBase.prototype, "popup", void 0);
+__decorate([
+    query('.filter__trigger')
+], FilterBase.prototype, "filterTrigger", void 0);
+__decorate([
+    query('.filter__panel')
+], FilterBase.prototype, "filterPanel", void 0);
+__decorate([
+    state()
+], FilterBase.prototype, "errorMessages", void 0);
+__decorate([
+    property({ reflect: true })
+], FilterBase.prototype, "value", void 0);
+__decorate([
+    property()
+], FilterBase.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FilterBase.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean })
+], FilterBase.prototype, "hoist", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FilterBase.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FilterBase.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FilterBase.prototype, "drawer", void 0);
+__decorate([
+    property()
+], FilterBase.prototype, "placement", void 0);
+__decorate([
+    watch(['disabled', 'readonly'], { waitUntilFirstUpdate: true })
+], FilterBase.prototype, "handleDisabledChange", null);
+__decorate([
+    watch('open', { waitUntilFirstUpdate: true })
+], FilterBase.prototype, "handleOpenChange", null);
+setDefaultAnimation('filter.show', {
+    keyframes: [
+        { opacity: 0, scale: 0.9 },
+        { opacity: 1, scale: 1 },
+    ],
+    options: { duration: 100, easing: 'ease' },
+});
+setDefaultAnimation('filter.hide', {
+    keyframes: [
+        { opacity: 1, scale: 1 },
+        { opacity: 0, scale: 0.9 },
+    ],
+    options: { duration: 100, easing: 'ease' },
+});
+setDefaultAnimation('accordion.show', {
+    keyframes: [
+        { height: '0', opacity: '0' },
+        { height: 'auto', opacity: '1' },
+    ],
+    options: { duration: 250, easing: 'linear' },
+});
+setDefaultAnimation('accordion.hide', {
+    keyframes: [
+        { height: 'auto', opacity: '1' },
+        { height: '0', opacity: '0' },
+    ],
+    options: { duration: 250, easing: 'linear' },
+});

package/cdn/internal/components/filter-base/filter-base.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/cdn/internal/components/filter-base/filter-base.styles.js

@@ -0,0 +1,61 @@
+import { css } from 'lit';
+import componentStyles from '../../../styles/component.styles';
+export default css `
+  ${componentStyles}
+
+  :host {
+    display: block;
+  }
+
+  /** The popup */
+  .filter {
+    flex: 1 1 auto;
+    display: inline-flex;
+    width: 100%;
+    position: relative;
+    vertical-align: middle;
+  }
+
+  .filter::part(popup) {
+    z-index: var(--dsa-wc-z-index-dropdown);
+  }
+
+  /* Panel */
+  .filter .filter__panel {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    font: var(--dsa-wc-input-text-field-font);
+    box-shadow: var(--dsa-wc-shadow-small);
+    background: var(--dsa-wc-select-listbox-background-color);
+    border: solid var(--dsa-wc-select-listbox-border-width)
+      var(--dsa-wc-select-listbox-border-color);
+    border-radius: var(--dsa-wc-select-listbox-border-radius);
+    padding-inline: 0;
+    overflow: auto;
+    overscroll-behavior: none;
+
+    /* Make sure it adheres to the popup's auto size */
+    /* stylelint-disable-next-line */
+    max-width: var(--auto-size-available-width);
+    /* stylelint-disable-next-line */
+    max-height: min(
+      var(--auto-size-available-height),
+      var(--dsa-filter-panel-max-height)
+    );
+  }
+
+  .filter--drawer .filter__panel {
+    border-bottom: 1px solid var(--dsa-color-border-default);
+    background-color: var(--dsa-color-surface-layer);
+  }
+
+  /* Error messages */
+  .form-control__error-text {
+    margin-top: var(--dsa-spacing-4);
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-spacing-4);
+    font: var(--dsa-wc-error-text-font);
+  }
+`;

package/cdn/internal/components/form-control/form-control-layout-stories.d.ts

@@ -0,0 +1,2 @@
+import type { ArgTypes } from '@storybook/web-components-vite';
+export declare const formControlLayoutArgTypes: ArgTypes;