@ds-autonomie/web-components 1.0.1

package/dist/events/dsa-lazy-change.js

@@ -0,0 +1 @@
+export {};

package/dist/events/dsa-lazy-load.d.ts

@@ -0,0 +1,7 @@
+type DSALazyLoadEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'dsa-lazy-load': DSALazyLoadEvent;
+    }
+}
+export default DSALazyLoadEvent;

package/dist/events/dsa-lazy-load.js

@@ -0,0 +1 @@
+export {};

package/dist/events/dsa-load.d.ts

@@ -0,0 +1,7 @@
+type DSALoadEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'dsa-load': DSALoadEvent;
+    }
+}
+export default DSALoadEvent;

package/dist/events/dsa-load.js

@@ -0,0 +1 @@
+export {};

package/dist/events/dsa-mutation.d.ts

@@ -0,0 +1,9 @@
+type DSAMutationEvent = CustomEvent<{
+    mutationList: MutationRecord[];
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'dsa-mutation': DSAMutationEvent;
+    }
+}
+export default DSAMutationEvent;

package/dist/events/dsa-mutation.js

@@ -0,0 +1 @@
+export {};

package/dist/events/dsa-remove.d.ts

@@ -0,0 +1,7 @@
+type DSARemoveEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'dsa-remove': DSARemoveEvent;
+    }
+}
+export default DSARemoveEvent;

package/dist/events/dsa-remove.js

@@ -0,0 +1 @@
+export {};

package/dist/events/dsa-reposition.d.ts

@@ -0,0 +1,7 @@
+type DSARepositionEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'dsa-reposition': DSARepositionEvent;
+    }
+}
+export default DSARepositionEvent;

package/dist/events/dsa-reposition.js

@@ -0,0 +1 @@
+export {};

package/dist/events/dsa-request-close.d.ts

@@ -0,0 +1,9 @@
+type DSARequestCloseEvent = CustomEvent<{
+    source: 'close-button' | 'keyboard' | 'overlay';
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'dsa-request-close': DSARequestCloseEvent;
+    }
+}
+export default DSARequestCloseEvent;

package/dist/events/dsa-request-close.js

@@ -0,0 +1 @@
+export {};

package/dist/events/dsa-resize.d.ts

@@ -0,0 +1,9 @@
+type DSAResizeEvent = CustomEvent<{
+    entries: ResizeObserverEntry[];
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'dsa-resize': DSAResizeEvent;
+    }
+}
+export default DSAResizeEvent;

package/dist/events/dsa-resize.js

@@ -0,0 +1 @@
+export {};

package/dist/events/dsa-select.d.ts

@@ -0,0 +1,10 @@
+import type DSAMenuItem from '../components/menu-item/menu-item';
+type DSASelectEvent = CustomEvent<{
+    item: DSAMenuItem;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'dsa-select': DSASelectEvent;
+    }
+}
+export default DSASelectEvent;

package/dist/events/dsa-select.js

@@ -0,0 +1 @@
+export {};

package/dist/events/dsa-selection-change.d.ts

@@ -0,0 +1,10 @@
+import type DSATreeItem from '../components/tree-item/tree-item';
+type DSASelectionChangeEvent = CustomEvent<{
+    selection: DSATreeItem[];
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'dsa-selection-change': DSASelectionChangeEvent;
+    }
+}
+export default DSASelectionChangeEvent;

package/dist/events/dsa-selection-change.js

@@ -0,0 +1 @@
+export {};

package/dist/events/dsa-show.d.ts

@@ -0,0 +1,7 @@
+type DSAShowEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'dsa-show': DSAShowEvent;
+    }
+}
+export default DSAShowEvent;

package/dist/events/dsa-show.js

@@ -0,0 +1 @@
+export {};

package/dist/events/dsa-start.d.ts

@@ -0,0 +1,7 @@
+type DSAStartEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'dsa-start': DSAStartEvent;
+    }
+}
+export default DSAStartEvent;

package/dist/events/dsa-start.js

@@ -0,0 +1 @@
+export {};

package/dist/events/dsa-tab-hide.d.ts

@@ -0,0 +1,9 @@
+type DSATabHideEvent = CustomEvent<{
+    name: string;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'dsa-tab-hide': DSATabHideEvent;
+    }
+}
+export default DSATabHideEvent;

package/dist/events/dsa-tab-hide.js

@@ -0,0 +1 @@
+export {};

package/dist/events/dsa-tab-show.d.ts

@@ -0,0 +1,9 @@
+type DSATabShowEvent = CustomEvent<{
+    name: string;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'dsa-tab-show': DSATabShowEvent;
+    }
+}
+export default DSATabShowEvent;

package/dist/events/dsa-tab-show.js

@@ -0,0 +1 @@
+export {};

package/dist/events/events.d.ts

@@ -0,0 +1,32 @@
+export type { default as DSAAfterCollapseEvent } from './dsa-after-collapse';
+export type { default as DSAAfterExpandEvent } from './dsa-after-expand';
+export type { default as DSAAfterHideEvent } from './dsa-after-hide';
+export type { default as DSAAfterShowEvent } from './dsa-after-show';
+export type { default as DSABlurEvent } from './dsa-blur';
+export type { default as DSACancelEvent } from './dsa-cancel';
+export type { default as DSAChangeEvent } from './dsa-change';
+export type { default as DSAClearEvent } from './dsa-clear';
+export type { default as DSACloseEvent } from './dsa-close';
+export type { default as DSACollapseEvent } from './dsa-collapse';
+export type { default as DSAErrorEvent } from './dsa-error';
+export type { default as DSAExpandEvent } from './dsa-expand';
+export type { default as DSAFinishEvent } from './dsa-finish';
+export type { default as DSAFocusEvent } from './dsa-focus';
+export type { default as DSAHideEvent } from './dsa-hide';
+export type { default as DSAHoverEvent } from './dsa-hover';
+export type { default as DSAInitialFocusEvent } from './dsa-initial-focus';
+export type { default as DSAInputEvent } from './dsa-input';
+export type { default as DSAInvalidEvent } from './dsa-invalid';
+export type { default as DSALazyChangeEvent } from './dsa-lazy-change';
+export type { default as DSALazyLoadEvent } from './dsa-lazy-load';
+export type { default as DSALoadEvent } from './dsa-load';
+export type { default as DSAMutationEvent } from './dsa-mutation';
+export type { default as DSARemoveEvent } from './dsa-remove';
+export type { default as DSARepositionEvent } from './dsa-reposition';
+export type { default as DSARequestCloseEvent } from './dsa-request-close';
+export type { default as DSAResizeEvent } from './dsa-resize';
+export type { default as DSASelectionChangeEvent } from './dsa-selection-change';
+export type { default as DSAShowEvent } from './dsa-show';
+export type { default as DSAStartEvent } from './dsa-start';
+export type { default as DSATabHideEvent } from './dsa-tab-hide';
+export type { default as DSATabShowEvent } from './dsa-tab-show';

package/dist/events/events.js

@@ -0,0 +1 @@
+export {};

package/dist/internal/animate.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Animates an element using keyframes. Returns a promise that resolves after the animation completes or gets canceled.
+ */
+export declare function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions): Promise<unknown>;
+/** Parses a CSS duration and returns the number of milliseconds. */
+export declare function parseDuration(delay: number | string): number;
+/** Tells if the user has enabled the "reduced motion" setting in their browser or OS. */
+export declare function prefersReducedMotion(): boolean;
+/**
+ * Stops all active animations on the target element. Returns a promise that resolves after all animations are canceled.
+ */
+export declare function stopAnimations(el: HTMLElement): Promise<unknown[]>;
+/**
+ * We can't animate `height: auto`, but we can calculate the height and shim keyframes by replacing it with the
+ * element's scrollHeight before the animation.
+ */
+export declare function shimKeyframesHeightAuto(keyframes: Keyframe[], calculatedHeight: number): {
+    height: string | number | null | undefined;
+    composite?: CompositeOperationOrAuto | undefined;
+    easing?: string | undefined;
+    offset?: number | null | undefined;
+}[];

package/dist/internal/animate.js

@@ -0,0 +1,56 @@
+function hasNoAnimations() {
+    return !!document.querySelector('.no-animations');
+}
+/**
+ * Animates an element using keyframes. Returns a promise that resolves after the animation completes or gets canceled.
+ */
+export function animateTo(el, keyframes, options) {
+    return new Promise((resolve) => {
+        if ((options === null || options === void 0 ? void 0 : options.duration) === Infinity) {
+            throw new Error('Promise-based animations must be finite.');
+        }
+        const animation = el.animate(keyframes, Object.assign(Object.assign({}, options), { duration: prefersReducedMotion() || hasNoAnimations() ? 0 : options.duration }));
+        animation.addEventListener('cancel', resolve, { once: true });
+        animation.addEventListener('finish', resolve, { once: true });
+    });
+}
+/** Parses a CSS duration and returns the number of milliseconds. */
+export function parseDuration(delay) {
+    delay = delay.toString().toLowerCase();
+    if (delay.indexOf('ms') > -1) {
+        return parseFloat(delay);
+    }
+    if (delay.indexOf('s') > -1) {
+        return parseFloat(delay) * 1000;
+    }
+    return parseFloat(delay);
+}
+/** Tells if the user has enabled the "reduced motion" setting in their browser or OS. */
+export function prefersReducedMotion() {
+    const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+    return query.matches;
+}
+/**
+ * Stops all active animations on the target element. Returns a promise that resolves after all animations are canceled.
+ */
+export function stopAnimations(el) {
+    return Promise.all(el.getAnimations().map((animation) => {
+        return new Promise((resolve) => {
+            const handleAnimationEvent = requestAnimationFrame(resolve);
+            animation.addEventListener('cancel', () => handleAnimationEvent, {
+                once: true,
+            });
+            animation.addEventListener('finish', () => handleAnimationEvent, {
+                once: true,
+            });
+            animation.cancel();
+        });
+    }));
+}
+/**
+ * We can't animate `height: auto`, but we can calculate the height and shim keyframes by replacing it with the
+ * element's scrollHeight before the animation.
+ */
+export function shimKeyframesHeightAuto(keyframes, calculatedHeight) {
+    return keyframes.map((keyframe) => (Object.assign(Object.assign({}, keyframe), { height: keyframe.height === 'auto' ? `${calculatedHeight}px` : keyframe.height })));
+}

package/dist/internal/components/button-group/button-group.d.ts

@@ -0,0 +1,34 @@
+import type { CSSResultGroup } from 'lit';
+import { ShoelaceElement } from '../../shoelace-element';
+/**
+ * @summary Button groups can be used to group related buttons into sections.
+ * @documentation https://shoelace.style/components/button-group
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - One or more `<dsa-button>` elements to display in the button group.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+export default class DSAInternalButtonGroup extends ShoelaceElement {
+    static styles: CSSResultGroup;
+    defaultSlot: HTMLSlotElement;
+    disableRole: boolean;
+    /**
+     * A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive
+     * devices when interacting with the control and is strongly recommended.
+     */
+    label: string;
+    squeezed: boolean;
+    private handleFocus;
+    private handleBlur;
+    private handleMouseOver;
+    private handleMouseOut;
+    private handleSlotChange;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsa-internal-button-group': DSAInternalButtonGroup;
+    }
+}

package/dist/internal/components/button-group/button-group.js

@@ -0,0 +1,110 @@
+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;
+};
+import { html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ShoelaceElement } from '../../shoelace-element';
+import styles from './button-group.styles';
+/**
+ * @summary Button groups can be used to group related buttons into sections.
+ * @documentation https://shoelace.style/components/button-group
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - One or more `<dsa-button>` elements to display in the button group.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+let DSAInternalButtonGroup = class DSAInternalButtonGroup extends ShoelaceElement {
+    constructor() {
+        super(...arguments);
+        this.disableRole = false;
+        /**
+         * A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive
+         * devices when interacting with the control and is strongly recommended.
+         */
+        this.label = '';
+        this.squeezed = false;
+    }
+    handleFocus(event) {
+        const button = findButton(event.target);
+        button === null || button === void 0 ? void 0 : button.classList.add('dsa-button-group__button--focus');
+    }
+    handleBlur(event) {
+        const button = findButton(event.target);
+        button === null || button === void 0 ? void 0 : button.classList.remove('dsa-button-group__button--focus');
+    }
+    handleMouseOver(event) {
+        const button = findButton(event.target);
+        button === null || button === void 0 ? void 0 : button.classList.add('dsa-button-group__button--hover');
+    }
+    handleMouseOut(event) {
+        const button = findButton(event.target);
+        button === null || button === void 0 ? void 0 : button.classList.remove('dsa-button-group__button--hover');
+    }
+    handleSlotChange() {
+        const slottedElements = [
+            ...this.defaultSlot.assignedElements({ flatten: true }),
+        ];
+        slottedElements.forEach((el) => {
+            const index = slottedElements.indexOf(el);
+            const button = findButton(el);
+            if (button !== null) {
+                button.classList.add('dsa-button-group__button');
+                if (this.squeezed) {
+                    button.classList.toggle('dsa-button-group__button--first', index === 0);
+                    button.classList.toggle('dsa-button-group__button--inner', index > 0 && index < slottedElements.length - 1);
+                    button.classList.toggle('dsa-button-group__button--last', index === slottedElements.length - 1);
+                }
+                button.classList.toggle('dsa-button-group__button--radio', button.tagName.toLowerCase() === 'dsa-radio-button');
+            }
+        });
+    }
+    render() {
+        // eslint-disable-next-line lit-a11y/mouse-events-have-key-events
+        return html `
+      <div
+        part="base"
+        class=${classMap({
+            'button-group': true,
+            'button-group--squeezed': this.squeezed,
+        })}
+        role="${this.disableRole ? 'presentation' : 'group'}"
+        aria-label=${this.label}
+        @focusout=${this.handleBlur}
+        @focusin=${this.handleFocus}
+        @mouseover=${this.handleMouseOver}
+        @mouseout=${this.handleMouseOut}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+    }
+};
+DSAInternalButtonGroup.styles = styles;
+__decorate([
+    query('slot')
+], DSAInternalButtonGroup.prototype, "defaultSlot", void 0);
+__decorate([
+    state()
+], DSAInternalButtonGroup.prototype, "disableRole", void 0);
+__decorate([
+    property()
+], DSAInternalButtonGroup.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], DSAInternalButtonGroup.prototype, "squeezed", void 0);
+DSAInternalButtonGroup = __decorate([
+    customElement('dsa-internal-button-group')
+], DSAInternalButtonGroup);
+export default DSAInternalButtonGroup;
+function findButton(el) {
+    var _a;
+    const selector = 'dsa-button, dsa-radio-button';
+    // The button could be the target element or a child of it (e.g. a dropdown or tooltip anchor)
+    return (_a = el.closest(selector)) !== null && _a !== void 0 ? _a : el.querySelector(selector);
+}

package/dist/internal/components/button-group/button-group.styles.d.ts

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

package/dist/internal/components/button-group/button-group.styles.js

@@ -0,0 +1,19 @@
+import { css } from 'lit';
+import componentStyles from '../../../styles/component.styles';
+export default css `
+  ${componentStyles}
+
+  :host {
+    display: inline-block;
+  }
+
+  .button-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--dsa-spacing-8);
+  }
+
+  .button-group--squeezed {
+    gap: 0;
+  }
+`;

package/dist/internal/debounce.d.ts

@@ -0,0 +1 @@
+export declare const debounce: (delay: number) => <T>(_target: T, _propertyKey: string, descriptor: PropertyDescriptor) => void;

package/dist/internal/debounce.js

@@ -0,0 +1,26 @@
+// @debounce decorator
+//
+// Delays the execution until the provided delay in milliseconds has
+// passed since the last time the function has been called.
+//
+//
+// Usage:
+//
+//  @debounce(1000)
+//  handleInput() {
+//    ...
+//  }
+//
+// Each class instance will need to store its timer id, so this unique symbol will be used as property key.
+const TIMER_ID_KEY = Symbol();
+export const debounce = (delay) => {
+    return (_target, _propertyKey, descriptor) => {
+        const fn = descriptor.value;
+        descriptor.value = function (...args) {
+            clearTimeout(this[TIMER_ID_KEY]);
+            this[TIMER_ID_KEY] = window.setTimeout(() => {
+                fn.apply(this, args);
+            }, delay);
+        };
+    };
+};

package/dist/internal/default-value.d.ts

@@ -0,0 +1,2 @@
+import type { ReactiveElement } from 'lit';
+export declare const defaultValue: (propertyName?: string) => (proto: ReactiveElement, key: string) => void;

package/dist/internal/default-value.js

@@ -0,0 +1,38 @@
+// @defaultValue decorator
+//
+// Runs when the corresponding attribute of the observed property changes, e.g. after calling Element.setAttribute or after updating
+// the observed property.
+//
+// The decorator checks whether the value of the attribute is different from the value of the property and in that case
+// it saves the new value.
+//
+//
+// Usage:
+//
+//  @property({ type: Boolean, reflect: true }) checked = false;
+//
+//  @defaultValue('checked') defaultChecked = false;
+//
+import { defaultConverter } from 'lit';
+export const defaultValue = (propertyName = 'value') => (proto, key) => {
+    const ctor = proto.constructor;
+    const attributeChangedCallback = ctor.prototype.attributeChangedCallback;
+    ctor.prototype.attributeChangedCallback = function (name, old, value) {
+        var _a;
+        const options = ctor.getPropertyOptions(propertyName);
+        const attributeName = typeof options.attribute === 'string'
+            ? options.attribute
+            : propertyName;
+        if (name === attributeName) {
+            const converter = options.converter || defaultConverter;
+            const fromAttribute = typeof converter === 'function'
+                ? converter
+                : (_a = converter === null || converter === void 0 ? void 0 : converter.fromAttribute) !== null && _a !== void 0 ? _a : defaultConverter.fromAttribute;
+            const newValue = fromAttribute(value, options.type);
+            if (this[propertyName] !== newValue) {
+                this[key] = newValue;
+            }
+        }
+        attributeChangedCallback.call(this, name, old, value);
+    };
+};

package/dist/internal/drag.d.ts

@@ -0,0 +1,15 @@
+interface DragOptions {
+    /** Callback that runs as dragging occurs. */
+    onMove: (x: number, y: number) => void;
+    /** Callback that runs when dragging stops. */
+    onStop: () => void;
+    /**
+     * When an initial event is passed, the first drag will be triggered immediately using the coordinates therein. This
+     * is useful when the drag is initiated by a mousedown/touchstart event but you want the initial "click" to activate
+     * a drag (e.g. positioning a handle initially at the click target).
+     */
+    initialEvent: PointerEvent;
+}
+/** Begins listening for dragging. */
+export declare function drag(container: HTMLElement, options?: Partial<DragOptions>): void;
+export {};

package/dist/internal/drag.js

@@ -0,0 +1,27 @@
+/** Begins listening for dragging. */
+export function drag(container, options) {
+    function move(pointerEvent) {
+        const dims = container.getBoundingClientRect();
+        const defaultView = container.ownerDocument.defaultView;
+        const offsetX = dims.left + defaultView.pageXOffset;
+        const offsetY = dims.top + defaultView.pageYOffset;
+        const x = pointerEvent.pageX - offsetX;
+        const y = pointerEvent.pageY - offsetY;
+        if (options === null || options === void 0 ? void 0 : options.onMove) {
+            options.onMove(x, y);
+        }
+    }
+    function stop() {
+        document.removeEventListener('pointermove', move);
+        document.removeEventListener('pointerup', stop);
+        if (options === null || options === void 0 ? void 0 : options.onStop) {
+            options.onStop();
+        }
+    }
+    document.addEventListener('pointermove', move, { passive: true });
+    document.addEventListener('pointerup', stop);
+    // If an initial event is set, trigger the first drag immediately
+    if ((options === null || options === void 0 ? void 0 : options.initialEvent) instanceof PointerEvent) {
+        move(options.initialEvent);
+    }
+}

package/dist/internal/event.d.ts

@@ -0,0 +1,2 @@
+/** Waits for a specific event to be emitted from an element. Ignores events that bubble up from child elements. */
+export declare function waitForEvent(el: HTMLElement, eventName: string): Promise<void>;

package/dist/internal/event.js

@@ -0,0 +1,12 @@
+/** Waits for a specific event to be emitted from an element. Ignores events that bubble up from child elements. */
+export function waitForEvent(el, eventName) {
+    return new Promise((resolve) => {
+        function done(event) {
+            if (event.target === el) {
+                el.removeEventListener(eventName, done);
+                resolve();
+            }
+        }
+        el.addEventListener(eventName, done);
+    });
+}