@odx/foundation 1.0.0-alpha.16 → 1.0.0-alpha.18

package/dist/components/input/input.component.d.ts

@@ -14,6 +14,7 @@ export declare class OdxInputComponent extends OdxInputComponent_base {
     placeholder: string;
     type: HTMLInputElement['type'];
     variant?: InputVariant | null;
+    clear(): void;
     protected render(): TemplateResult;
 }
 export {};

package/dist/components/search-bar/search-bar.component.d.ts

@@ -17,6 +17,7 @@ export declare class OdxSearchBarComponent extends CustomElement {
     behavior: SearchBarBehavior;
     debounceTime?: number;
     placeholder: string;
+    get value(): string;
     search(value: string, options?: Partial<SearchOptions>): void;
     connectedCallback(): void;
     protected updated(props: PropertyValues<this>): void;

package/dist/components.js

@@ -1,4 +1,4 @@
-import { WithAriaControls, CustomElement, toAriaBooleanAttribute, fromAriaBooleanAttribute, customElement, getKeyboardEventInfo, CanBeDisabled, requestUpdateOnAriaChange, optionalAttr, createIntersectionObserver, createMutationObserver, getElementFromEvent, WithLoadingState, getAssignedElements, optionalSlot, CheckboxGroupFormControl, CheckboxFormControl, toggleAttribute, SharedResizeObserver, getUniqueId, parseDate, searchTextContent, FormControl, waitForAnimations, FocusTrapController, OptionControl, toPx, RadioGroupFormControl, SelectFormControl, emptySlotFallbackFix, NumberControl } from '@odx/foundation';
+import { WithAriaControls, CustomElement, toAriaBooleanAttribute, fromAriaBooleanAttribute, customElement, getKeyboardEventInfo, CanBeDisabled, requestUpdateOnAriaChange, optionalAttr, createIntersectionObserver, createMutationObserver, getElementFromEvent, WithLoadingState, getAssignedElements, optionalSlot, CheckboxGroupFormControl, CheckboxFormControl, toggleAttribute, SharedResizeObserver, getUniqueId, parseDate, searchTextContent, FormControl, forwardEvent, waitForAnimations, FocusTrapController, OptionControl, toPx, RadioGroupFormControl, SelectFormControl, emptySlotFallbackFix, NumberControl } from '@odx/foundation';
 import { html, isServer, unsafeCSS, nothing, css } from 'lit';
 import { property, queryAssignedElements, query, queryAll } from 'lit/decorators.js';
 import { signal, computed, SignalWatcher } from '@lit-labs/signals';
@@ -1876,29 +1876,29 @@ var __decorateClass$L = (decorators, target, key, kind) => {
 var __accessCheck$h = (obj, member, msg) => member.has(obj) || __typeError$h("Cannot " + msg);
 var __privateGet$e = (obj, member, getter) => (__accessCheck$h(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$h = (obj, member, value) => member.has(obj) ? __typeError$h("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleInput, _clearInput;
+var _handleInput$1, _handleClear$1;
 let OdxInputComponent = class extends FormControl(CustomElement) {
   constructor() {
     super(...arguments);
     this.clearable = true;
     this.placeholder = "";
     this.type = "text";
-    __privateAdd$h(this, _handleInput, (event) => {
+    __privateAdd$h(this, _handleInput$1, (event) => {
       this.value = event.target.value;
-      this.emit(event.type);
     });
-    __privateAdd$h(this, _clearInput, () => {
-      this.value = "";
-      this.emit("input");
-      if (this.type === "search") {
-        this.emit("search");
-      }
+    __privateAdd$h(this, _handleClear$1, (event) => {
+      event.stopPropagation();
+      this.clear();
     });
   }
+  clear() {
+    this.value = "";
+    this.emit("clear", { composed: false });
+  }
   render() {
     const clearButton = when(
       this.clearable && this.value,
-      () => html`<odx-icon-button icon="core::error"  @click=${__privateGet$e(this, _clearInput)} variant="ghost" tabindex="-1"></odx-icon-button>`
+      () => html`<odx-icon-button icon="core::error"  @click=${__privateGet$e(this, _handleClear$1)} variant="ghost" tabindex="-1"></odx-icon-button>`
     );
     return html`
       <div class="base">
@@ -1910,9 +1910,9 @@ let OdxInputComponent = class extends FormControl(CustomElement) {
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
           .value=${this.value}
-          @input=${__privateGet$e(this, _handleInput)}
-          @search=${__privateGet$e(this, _handleInput)}
-          @change=${__privateGet$e(this, _handleInput)}
+          @change=${forwardEvent}
+          @input=${__privateGet$e(this, _handleInput$1)}
+          @search=${forwardEvent}
         />
         ${clearButton}
         <slot name="suffix"></slot>
@@ -1920,8 +1920,8 @@ let OdxInputComponent = class extends FormControl(CustomElement) {
     `;
   }
 };
-_handleInput = new WeakMap();
-_clearInput = new WeakMap();
+_handleInput$1 = new WeakMap();
+_handleClear$1 = new WeakMap();
 OdxInputComponent.formAssociated = true;
 __decorateClass$L([
   property({ type: Boolean })
@@ -2801,7 +2801,7 @@ const ProgressState = {
   ERROR: "error"
 };
 
-const styles$q = ":host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-stroke-width: var(--odx-border-width-thin);--_label-color-foreground: var(--odx-color-foreground);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);padding:var(--_indicator-space)}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;border-radius:var(--odx-border-radius-circle);background-color:var(--_indicator-color-background);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-color:var(--_indicator-color-stroke);border-width:var(--_indicator-stroke-width);transition-property:background-color,border-color,outline-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}.label{display:inline-block}.content{color:var(--_label-color-foreground);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:hover){--_indicator-color-background: var(--odx-color-selection-control-fill-hover);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-focus-ring-color)}:host([aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-readonly);--_indicator-color-foreground: var(--odx-color-selection-control-foreground-readonly);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-readonly);cursor:default}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-foreground: var(--odx-color-disabled-foreground);--_indicator-color-stroke: var(--odx-color-disabled-stroke);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-checked=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-stroke-selected);--_indicator-color-foreground: var(--odx-color-foreground-light);--_indicator-color-stroke: var(--odx-color-selection-control-fill-selected);--_indicator-stroke-width: var(--odx-size-25)}:host([aria-checked=\"true\"]:not(:is([aria-readonly],[aria-disabled])):hover){--_indicator-color-stroke: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-checked=\"true\"][aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-color-stroke: var(--odx-color-background-main);--_indicator-stroke-width: var(--odx-size-50);.indicator{outline-color:var(--odx-color-selection-control-fill-selected)}}:host([aria-checked=\"true\"][aria-disabled=\"true\"]){--_indicator-color-stroke: var(--odx-color-disabled-fill-selected);--_indicator-color-foreground: var(--odx-color-disabled-foreground-selected)}";
+const styles$q = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-stroke-width: var(--odx-border-width-thin);--_label-color-foreground: var(--odx-color-foreground);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);padding:var(--_indicator-space)}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;border-radius:var(--odx-border-radius-circle);background-color:var(--_indicator-color-background);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-color:var(--_indicator-color-stroke);border-width:var(--_indicator-stroke-width);transition-property:background-color,border-color,outline-color,border-width,box-shadow;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}.label{display:inline-block}.content{color:var(--_label-color-foreground);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}}@layer state{:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:hover){--_indicator-color-background: var(--odx-color-selection-control-fill-hover);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-focus-ring-color)}:host([aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-readonly);--_indicator-color-foreground: var(--odx-color-selection-control-foreground-readonly);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-readonly);cursor:default}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-foreground: var(--odx-color-disabled-foreground);--_indicator-color-stroke: var(--odx-color-disabled-stroke);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-checked=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-stroke-selected);--_indicator-color-foreground: var(--odx-color-foreground-light);--_indicator-color-stroke: var(--odx-color-selection-control-fill-selected);--_indicator-stroke-width: var(--odx-size-25)}:host([aria-checked=\"true\"]:not(:is([aria-readonly],[aria-disabled])):hover){--_indicator-color-stroke: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-checked=\"true\"][aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-foreground-light) inset}}:host([aria-checked=\"true\"][aria-disabled=\"true\"]){--_indicator-color-stroke: var(--odx-color-disabled-fill-selected);--_indicator-color-background: var(--odx-color-disabled-fill-selected);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-disabled-foreground-selected) inset}}}";
 
 var __defProp$r = Object.defineProperty;
 var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
@@ -2960,7 +2960,7 @@ var __privateGet$8 = (obj, member, getter) => (__accessCheck$a(obj, member, "rea
 var __privateAdd$a = (obj, member, value) => member.has(obj) ? __typeError$a("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$a(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod$7 = (obj, member, method) => (__accessCheck$a(obj, member, "access private method"), method);
-var _value, _search, _OdxSearchBarComponent_instances, inputValue_get, _handleInputSearch, _handleInputChange, updateValue_fn;
+var _value, _search, _OdxSearchBarComponent_instances, inputValue_get, _handleSearch, _handleInput, _handleClear, updateValue_fn;
 let OdxSearchBarComponent = class extends CustomElement {
   constructor() {
     super(...arguments);
@@ -2969,17 +2969,24 @@ let OdxSearchBarComponent = class extends CustomElement {
     __privateAdd$a(this, _search, this.search.bind(this));
     this.behavior = SearchBarBehavior.SUBMIT;
     this.placeholder = "";
-    __privateAdd$a(this, _handleInputSearch, (event) => {
+    __privateAdd$a(this, _handleSearch, (event) => {
       event.preventDefault();
       event.stopPropagation();
       this.search(__privateGet$8(this, _OdxSearchBarComponent_instances, inputValue_get));
     });
-    __privateAdd$a(this, _handleInputChange, (event) => {
+    __privateAdd$a(this, _handleInput, (event) => {
       if (this.behavior !== SearchBarBehavior.INSTANT) return;
       event.preventDefault();
       event.stopPropagation();
       __privateGet$8(this, _search).call(this, __privateGet$8(this, _OdxSearchBarComponent_instances, inputValue_get));
     });
+    __privateAdd$a(this, _handleClear, (event) => {
+      event.stopPropagation();
+      this.search("");
+    });
+  }
+  get value() {
+    return __privateGet$8(this, _value) ?? "";
   }
   search(value, options) {
     if (__privateGet$8(this, _value) === value && options?.forceUpdate !== true) return;
@@ -2998,7 +3005,16 @@ let OdxSearchBarComponent = class extends CustomElement {
   }
   render() {
     return html`
-      <odx-input class="input" spellcheck="false" autocomplete="off" placeholder=${this.placeholder} @search=${__privateGet$8(this, _handleInputSearch)} @input=${__privateGet$8(this, _handleInputChange)} type="search">
+      <odx-input
+        class="input"
+        spellcheck="false"
+        autocomplete="off"
+        placeholder=${this.placeholder}
+        type="search"
+        @clear=${__privateGet$8(this, _handleClear)}
+        @input=${__privateGet$8(this, _handleInput)}
+        @search=${__privateGet$8(this, _handleSearch)}
+      >
         <odx-icon name="core::search" slot="prefix"></odx-icon>
       </odx-input>
     `;
@@ -3010,8 +3026,9 @@ _OdxSearchBarComponent_instances = new WeakSet();
 inputValue_get = function() {
   return (this.inputElement.value ?? "").replace(/\s\s+/g, " ").trim();
 };
-_handleInputSearch = new WeakMap();
-_handleInputChange = new WeakMap();
+_handleSearch = new WeakMap();
+_handleInput = new WeakMap();
+_handleClear = new WeakMap();
 updateValue_fn = function(value, updateInput = false) {
   __privateSet$1(this, _value, value);
   if (!updateInput) return;

package/dist/lib/utils/dom.d.ts

@@ -11,4 +11,5 @@ export declare function findClosestDocument(node: Node): ShadowRoot | Document |
 export declare function toPx(value?: string | number | null): string | null;
 export declare function getAssignedElements<T extends HTMLElement = HTMLElement>(host: HTMLElement, ...slots: string[]): T[];
 export declare function waitForAnimations(element?: Element | null, subtree?: boolean): Promise<Animation[]>;
+export declare function forwardEvent(this: HTMLElement, event: Event): void;
 //# sourceMappingURL=dom.d.ts.map

package/dist/main.js

@@ -48,6 +48,10 @@ async function waitForAnimations(element, subtree = false) {
   }
   return Promise.all(element.getAnimations({ subtree }).map((animation) => animation.finished)).catch(() => []);
 }
+function forwardEvent(event) {
+  event.stopPropagation();
+  this.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true, cancelable: true }));
+}
 
 function createOptions(defaultOptions) {
   return (options) => toMerged(defaultOptions, options ?? {});
@@ -1109,4 +1113,4 @@ class SharedResizeObserverInstance {
 }
 const SharedResizeObserver = new SharedResizeObserverInstance();
 
-export { CanBeDisabled, CanBeReadonly, CanBeRequired, CanBeValidated, CheckboxFormControl, CheckboxGroupFormControl, CustomElement, FocusTrapController, FormControl, KeyboardKey, NumberControl, OptionControl, RadioGroupFormControl, SelectFormControl, SharedIntersectionObserver, SharedResizeObserver, WithAriaControls, WithLoadingState, clearUniqueIdCache, createIntersectionObserver, createMutationObserver, createOptions, createResizeObserver, customElement, dedupeMixin, effect, emptySlotFallbackFix, findClosestDocument, fromAriaBooleanAttribute, getAssignedElements, getElementFromEvent, getKeyboardEventInfo, getUniqueId, optionalAttr, optionalSlot, parseDate, requestUpdateOnAriaChange, searchTextContent, toAriaBooleanAttribute, toPx, toggleAttribute, waitForAnimations };
+export { CanBeDisabled, CanBeReadonly, CanBeRequired, CanBeValidated, CheckboxFormControl, CheckboxGroupFormControl, CustomElement, FocusTrapController, FormControl, KeyboardKey, NumberControl, OptionControl, RadioGroupFormControl, SelectFormControl, SharedIntersectionObserver, SharedResizeObserver, WithAriaControls, WithLoadingState, clearUniqueIdCache, createIntersectionObserver, createMutationObserver, createOptions, createResizeObserver, customElement, dedupeMixin, effect, emptySlotFallbackFix, findClosestDocument, forwardEvent, fromAriaBooleanAttribute, getAssignedElements, getElementFromEvent, getKeyboardEventInfo, getUniqueId, optionalAttr, optionalSlot, parseDate, requestUpdateOnAriaChange, searchTextContent, toAriaBooleanAttribute, toPx, toggleAttribute, waitForAnimations };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@odx/foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-alpha.16",
+  "version": "1.0.0-alpha.18",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",