@ds-autonomie/web-components 1.0.1

package/dist/internal/test.js

@@ -0,0 +1,71 @@
+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 { sendMouse } from '@web/test-runner-commands';
+function determineMousePosition(el, position, offsetX, offsetY) {
+    const { x, y, width, height } = el.getBoundingClientRect();
+    const centerX = Math.floor(x + window.pageXOffset + width / 2);
+    const centerY = Math.floor(y + window.pageYOffset + height / 2);
+    let clickX;
+    let clickY;
+    switch (position) {
+        case 'top':
+            clickX = centerX;
+            clickY = y;
+            break;
+        case 'right':
+            clickX = x + width - 1;
+            clickY = centerY;
+            break;
+        case 'bottom':
+            clickX = centerX;
+            clickY = y + height - 1;
+            break;
+        case 'left':
+            clickX = x;
+            clickY = centerY;
+            break;
+        default:
+            clickX = centerX;
+            clickY = centerY;
+    }
+    clickX += offsetX;
+    clickY += offsetY;
+    return { clickX, clickY };
+}
+/** A testing utility that measures an element's position and clicks on it. */
+export function clickOnElement(
+/** The element to click */
+el, 
+/** The location of the element to click */
+position = 'center', 
+/** The horizontal offset to apply to the position when clicking */
+offsetX = 0, 
+/** The vertical offset to apply to the position when clicking */
+offsetY = 0) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { clickX, clickY } = determineMousePosition(el, position, offsetX, offsetY);
+        yield sendMouse({ type: 'click', position: [clickX, clickY] });
+    });
+}
+/** A testing utility that moves the mouse onto an element. */
+export function moveMouseOnElement(
+/** The element to click */
+el, 
+/** The location of the element to click */
+position = 'center', 
+/** The horizontal offset to apply to the position when clicking */
+offsetX = 0, 
+/** The vertical offset to apply to the position when clicking */
+offsetY = 0) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { clickX, clickY } = determineMousePosition(el, position, offsetX, offsetY);
+        yield sendMouse({ type: 'move', position: [clickX, clickY] });
+    });
+}

package/dist/internal/watch.d.ts

@@ -0,0 +1,26 @@
+import type { LitElement } from 'lit';
+type UpdateHandler = (prev?: unknown, next?: unknown) => void;
+type NonUndefined<A> = A extends undefined ? never : A;
+type UpdateHandlerFunctionKeys<T extends object> = {
+    [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;
+}[keyof T];
+interface WatchOptions {
+    /**
+     * If true, will only start watching after the initial update/render
+     */
+    waitUntilFirstUpdate?: boolean;
+}
+/**
+ * Runs when observed properties change, e.g. @property or @state, but before the component updates. To wait for an
+ * update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the
+ * initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
+ *
+ * Usage:
+ *
+ * @watch('propName')
+ * handlePropChange(oldValue, newValue) {
+ *   ...
+ * }
+ */
+export declare function watch(propertyName: string | string[], options?: WatchOptions): <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys<ElemClass>) => void;
+export {};

package/dist/internal/watch.js

@@ -0,0 +1,38 @@
+/**
+ * Runs when observed properties change, e.g. @property or @state, but before the component updates. To wait for an
+ * update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the
+ * initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
+ *
+ * Usage:
+ *
+ * @watch('propName')
+ * handlePropChange(oldValue, newValue) {
+ *   ...
+ * }
+ */
+export function watch(propertyName, options) {
+    const resolvedOptions = Object.assign({ waitUntilFirstUpdate: false }, options);
+    return (proto, decoratedFnName) => {
+        // @ts-expect-error - update is a protected property
+        const { update } = proto;
+        const watchedProperties = Array.isArray(propertyName)
+            ? propertyName
+            : [propertyName];
+        // @ts-expect-error - update is a protected property
+        proto.update = function (changedProps) {
+            watchedProperties.forEach((property) => {
+                const key = property;
+                if (changedProps.has(key)) {
+                    const oldValue = changedProps.get(key);
+                    const newValue = this[key];
+                    if (oldValue !== newValue) {
+                        if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+                            this[decoratedFnName](oldValue, newValue);
+                        }
+                    }
+                }
+            });
+            update.call(this, changedProps);
+        };
+    };
+}

package/dist/styles/component.styles.d.ts

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

package/dist/styles/component.styles.js

@@ -0,0 +1,16 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    box-sizing: border-box;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+`;

package/dist/styles/form-control.styles.d.ts

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

package/dist/styles/form-control.styles.js

@@ -0,0 +1,142 @@
+import { css } from 'lit';
+export default css `
+  .form-control {
+    display: grid;
+    align-content: start;
+    grid-template:
+      'label tooltip .'
+      'field field field' 1fr
+      'helpText helpText helpText'
+      'errorText errorText errorText'
+      / auto auto minmax(0, 1fr);
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .form-control .form-control__label {
+    grid-area: label;
+    display: none;
+    color: var(--dsa-color-input-label-on-base-default);
+  }
+
+  .form-control .form-control__tooltip {
+    display: inline-block;
+    grid-area: tooltip;
+  }
+
+  .form-control .form-control__field {
+    grid-area: field;
+  }
+
+  .form-control .form-control__options {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-wc-toggle-group-spacing);
+  }
+
+  .form-control--options-horizontal .form-control__options {
+    flex-direction: row;
+  }
+
+  .form-control .form-control__help-text {
+    grid-area: helpText;
+    display: none;
+  }
+
+  .form-control .form-control__error-text {
+    grid-area: errorText;
+  }
+
+  .form-control--has-label .form-control__label {
+    display: inline-block;
+  }
+
+  .form-control__label-required {
+    color: var(--dsa-wc-form-required-content-color);
+  }
+
+  .form-control--has-help-text .form-control__help-text {
+    display: block;
+    color: var(--dsa-color-input-label-on-base-helper);
+  }
+
+  .form-control--error .form-control__label {
+    color: var(--dsa-wc-error-text-color);
+  }
+
+  /* Small */
+  .form-control--has-label.form-control--small .form-control__label {
+    font: var(--dsa-wc-form-font-small);
+    padding-bottom: var(--dsa-spacing-4);
+  }
+
+  .form-control.form-control--small .form-control__tooltip {
+    font: var(--dsa-wc-form-font-small);
+    margin-left: var(--dsa-spacing-4);
+    --dsa-wc-internal-icon-button-padding: var(--dsa-spacing-2);
+  }
+
+  .form-control--small .form-control__help-text,
+  .form-control--small .form-control__error-text {
+    font: var(--dsa-wc-error-text-font-small);
+  }
+
+  .form-control.form-control--small .form-control__help-text {
+    padding-top: var(--dsa-spacing-4);
+  }
+
+  .form-control.form-control--small .form-control__error-text {
+    padding-top: var(--dsa-spacing-8);
+  }
+
+  /* Medium */
+  .form-control--has-label.form-control--medium .form-control__label {
+    font: var(--dsa-wc-form-font);
+    padding-bottom: var(--dsa-spacing-8);
+  }
+
+  .form-control.form-control--medium .form-control__tooltip {
+    font: var(--dsa-wc-form-font);
+    margin-left: var(--dsa-spacing-4);
+    --dsa-wc-internal-icon-button-padding: var(--dsa-spacing-2);
+  }
+
+  .form-control--medium .form-control__help-text,
+  .form-control--medium .form-control__error-text {
+    font: var(--dsa-wc-error-text-font);
+  }
+
+  .form-control.form-control--medium .form-control__help-text {
+    padding-top: var(--dsa-spacing-8);
+  }
+
+  .form-control.form-control--medium .form-control__error-text {
+    padding-top: var(--dsa-spacing-12);
+  }
+
+  /* Large */
+  .form-control--has-label.form-control--large .form-control__label {
+    font: var(--dsa-wc-form-font-large);
+    padding-bottom: var(--dsa-spacing-8);
+  }
+
+  .form-control.form-control--large .form-control__tooltip {
+    font: var(--dsa-wc-form-font-large);
+    margin-left: var(--dsa-spacing-4);
+    --dsa-wc-internal-icon-button-padding: var(--dsa-spacing-2);
+  }
+
+  .form-control--large .form-control__help-text,
+  .form-control--large .form-control__error-text {
+    font: var(--dsa-wc-error-text-font-large);
+  }
+
+  .form-control.form-control--large .form-control__help-text {
+    padding-top: var(--dsa-spacing-8);
+  }
+
+  .form-control.form-control--large .form-control__error-text {
+    padding-top: var(--dsa-spacing-12);
+  }
+`;