@odx/foundation 1.0.0-alpha.4 → 1.0.0-alpha.40

package/dist/components/rail-navigation/rail-navigation.component.js

@@ -1,71 +0,0 @@
-import { IsTranslatable, CustomElement, getAssignedElements, customElement } from '@odx/foundation';
-import { html } from 'lit';
-import { queryAssignedElements, property } from 'lit/decorators.js';
-import styles from './rail-navigation.component.css.js';
-import { OdxNavigationItemComponent } from '../navigation-item/navigation-item.component.js';
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleSlotChange, _handleControlClick;
-let OdxRailNavigationComponent = class extends IsTranslatable(CustomElement) {
-  constructor() {
-    super(...arguments);
-    this.collapsed = false;
-    __privateAdd(this, _handleSlotChange, () => {
-      for (const item of getAssignedElements(this)) {
-        item.size = "lg";
-      }
-    });
-    __privateAdd(this, _handleControlClick, () => {
-      this.collapsed = !this.collapsed;
-    });
-  }
-  render() {
-    const controlLabel = this._translate(this.collapsed ? "controlLabelCollapsed" : "controlLabelExpanded") || null;
-    return html`
-      <slot @slotchange=${__privateGet(this, _handleSlotChange)}></slot>
-      <odx-navigation-item class="toggle-control" size="lg" @click=${__privateGet(this, _handleControlClick)}>
-        <odx-icon class="toggle-icon" name="core::chevron-left" slot="prefix"></odx-icon>
-        <odx-visually-hidden>${controlLabel}</odx-visually-hidden>
-      </odx-navigation-item>
-    `;
-  }
-  getItems() {
-    return this.navigationItems;
-  }
-  _getTranslations() {
-    return {
-      en: {
-        controlLabelExpanded: "Collapse navigation",
-        controlLabelCollapsed: "Expand navigation"
-      }
-    };
-  }
-};
-_handleSlotChange = new WeakMap();
-_handleControlClick = new WeakMap();
-__decorateClass([
-  queryAssignedElements({ selector: OdxNavigationItemComponent.selector, flatten: true })
-], OdxRailNavigationComponent.prototype, "navigationItems", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], OdxRailNavigationComponent.prototype, "collapsed", 2);
-OdxRailNavigationComponent = __decorateClass([
-  customElement("odx-rail-navigation", [styles])
-], OdxRailNavigationComponent);
-
-export { OdxRailNavigationComponent };

package/dist/components/search-bar/search-bar.component.css.js

@@ -1,3 +0,0 @@
-const styles = ":host{--odx-search-max-inline-size: 35em;display:block;max-width:var(--odx-search-max-inline-size)}";
-
-export { styles as default };

package/dist/components/search-bar/search-bar.component.js

@@ -1,100 +0,0 @@
-import { CustomElement, customElement } from '@odx/foundation';
-import { debounce } from 'es-toolkit';
-import { html } from 'lit';
-import { query, property } from 'lit/decorators.js';
-import styles from './search-bar.component.css.js';
-import { SearchEvent } from './search-bar.events.js';
-import { SearchBarBehavior } from './search-bar.models.js';
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _value, _search, _OdxSearchBarComponent_instances, inputValue_get, _handleInputSearch, _handleInputChange, updateValue_fn;
-let OdxSearchBarComponent = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _OdxSearchBarComponent_instances);
-    __privateAdd(this, _value);
-    __privateAdd(this, _search, this.search.bind(this));
-    this.behavior = SearchBarBehavior.SUBMIT;
-    this.placeholder = "";
-    __privateAdd(this, _handleInputSearch, (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      this.search(__privateGet(this, _OdxSearchBarComponent_instances, inputValue_get));
-    });
-    __privateAdd(this, _handleInputChange, (event) => {
-      if (this.behavior !== SearchBarBehavior.INSTANT) return;
-      event.preventDefault();
-      event.stopPropagation();
-      __privateGet(this, _search).call(this, __privateGet(this, _OdxSearchBarComponent_instances, inputValue_get));
-    });
-  }
-  search(value, options) {
-    if (__privateGet(this, _value) === value && options?.forceUpdate !== true) return;
-    __privateMethod(this, _OdxSearchBarComponent_instances, updateValue_fn).call(this, value, options?.updateInput);
-    if (options?.dispatchEvent === false) return;
-    this.dispatchEvent(new SearchEvent(value, this.inputElement.value));
-  }
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.role = "presentation";
-  }
-  updated(props) {
-    if (props.has("debounceTime")) {
-      __privateSet(this, _search, typeof this.debounceTime === "number" ? debounce(this.search.bind(this), this.debounceTime) : this.search.bind(this));
-    }
-  }
-  render() {
-    return html`
-      <odx-input class="input" spellcheck="false" autocomplete="off" placeholder=${this.placeholder} @search=${__privateGet(this, _handleInputSearch)} @input=${__privateGet(this, _handleInputChange)} type="search">
-        <odx-icon name="core::search" slot="prefix"></odx-icon>
-      </odx-input>
-    `;
-  }
-};
-_value = new WeakMap();
-_search = new WeakMap();
-_OdxSearchBarComponent_instances = new WeakSet();
-inputValue_get = function() {
-  return (this.inputElement.value ?? "").replace(/\s\s+/g, " ").trim();
-};
-_handleInputSearch = new WeakMap();
-_handleInputChange = new WeakMap();
-updateValue_fn = function(value, updateInput = false) {
-  __privateSet(this, _value, value);
-  if (!updateInput) return;
-  this.inputElement.value = value;
-};
-__decorateClass([
-  query(".input", true)
-], OdxSearchBarComponent.prototype, "inputElement", 2);
-__decorateClass([
-  property()
-], OdxSearchBarComponent.prototype, "behavior", 2);
-__decorateClass([
-  property({ type: Number })
-], OdxSearchBarComponent.prototype, "debounceTime", 2);
-__decorateClass([
-  property()
-], OdxSearchBarComponent.prototype, "placeholder", 2);
-OdxSearchBarComponent = __decorateClass([
-  customElement("odx-search-bar", [styles])
-], OdxSearchBarComponent);
-
-export { OdxSearchBarComponent };

package/dist/components/search-bar/search-bar.events.js

@@ -1,7 +0,0 @@
-class SearchEvent extends CustomEvent {
-  constructor(value, rawValue) {
-    super("search", { detail: { rawValue, value } });
-  }
-}
-
-export { SearchEvent };

package/dist/components/search-bar/search-bar.models.js

@@ -1,6 +0,0 @@
-const SearchBarBehavior = {
-  INSTANT: "instant",
-  SUBMIT: "submit"
-};
-
-export { SearchBarBehavior };

package/dist/components/select/select.component.css.js

@@ -1,3 +0,0 @@
-const styles = ":host{display:block;--_color-background: var(--odx-color-input-control-fill);--_color-foreground: var(--odx-color-foreground);--_color-stroke: var(--odx-color-input-control-stroke);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);border-radius:var(--odx-border-radius-controls);color:var(--_color-foreground);max-inline-size:320px}.base{display:flex;cursor:pointer;text-align:left;padding:var(--_padding-block) var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background);min-width:200px;min-block-size:var(--odx-size-225);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,outline-color;gap:var(--odx-padding-inline);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);user-select:none;overflow:hidden;&:focus-visible{outline-color:var(--odx-color-outline-focus)}}.value{display:flex;gap:var(--_padding-block)}.indicator{font-size:var(--odx-size-150);margin-left:auto}odx-chip{--_border-radius: var(--odx-border-radius-controls);--_padding-inline: var(--_padding-block)}:host(:hover){--_color-background: var(--odx-color-input-control-fill-hover);--_color-stroke: var(--odx-color-input-control-stroke-hover)}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}slot[name=placeholder]{color:var(--odx-color-foreground-muted)}";
-
-export { styles as default };

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

@@ -1,18 +0,0 @@
-import { SelectFormControl } from '@odx/foundation';
-import { PropertyValues, TemplateResult } from 'lit';
-import { OdxDropdownComponent } from '../dropdown';
-import { OdxOptionComponent } from '../option';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-select': OdxSelectComponent;
-    }
-}
-export declare class OdxSelectComponent extends SelectFormControl {
-    #private;
-    protected options: OdxOptionComponent[];
-    protected dropdownElement: OdxDropdownComponent;
-    protected render(): TemplateResult;
-    protected renderSelectedOptions(): TemplateResult;
-    protected willUpdate(changes: PropertyValues<this>): void;
-}
-//# sourceMappingURL=select.component.d.ts.map

package/dist/components/select/select.component.js

@@ -1,100 +0,0 @@
-import { SelectFormControl, customElement } from '@odx/foundation';
-import { html } from 'lit';
-import { queryAssignedElements, query } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { when } from 'lit/directives/when.js';
-import styles from './select.component.css.js';
-import { OdxOptionComponent } from '../option/option.component.js';
-import { OdxDropdownComponent } from '../dropdown/dropdown.component.js';
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _OdxSelectComponent_instances, handleMultipleChange_fn, _handleDropdownToggle, _removeChip;
-let OdxSelectComponent = class extends SelectFormControl {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _OdxSelectComponent_instances);
-    __privateAdd(this, _handleDropdownToggle, (event) => {
-      if (event.newState === "open") {
-        this.options[0]?.setActive();
-      }
-    });
-    __privateAdd(this, _removeChip, async (option) => {
-      this.toggle(option, false, true);
-    });
-  }
-  render() {
-    return html`
-      <div class="base" id="select-trigger" tabindex="0">
-        <div class="value" odxPreventTextOverflow>
-          ${when(
-      Array.from(this.selectedOptions).length,
-      () => this.renderSelectedOptions(),
-      () => html`<slot name="placeholder">Select options</slot>`
-    )}
-        </div>
-        <odx-icon class="indicator" name="core::chevron-down"></odx-icon>
-      </div>
-      <odx-dropdown part="dropdown" anchor="select-trigger" role="listbox" tabindex="-1" ?disabled=${this.disabled} matchReferenceWidth @toggle=${__privateGet(this, _handleDropdownToggle)}>
-        <slot @slotchange=${__privateMethod(this, _OdxSelectComponent_instances, handleMultipleChange_fn)}></slot>
-      </odx-dropdown>
-    `;
-  }
-  renderSelectedOptions() {
-    const selectedOptions = Array.from(this.selectedOptions);
-    if (this.multiple) {
-      const maxOptions = 2;
-      const visibleOptions = selectedOptions.slice(0, maxOptions);
-      const showExtra = selectedOptions.length > maxOptions;
-      return html`
-        ${repeat(
-        visibleOptions,
-        (option) => html`<odx-chip @remove=${() => __privateGet(this, _removeChip).call(this, option)} removable tabindex="-1">${option.getTextLabel()}</odx-chip>`
-      )}
-        ${when(showExtra, () => html`<odx-chip>+${selectedOptions.length - maxOptions}</odx-chip>`)}
-      `;
-    }
-    this.dropdownElement.hidePopover();
-    return html`${selectedOptions[0]?.getTextLabel()}`;
-  }
-  willUpdate(changes) {
-    super.willUpdate?.(changes);
-    if (changes.has("multiple")) {
-      __privateMethod(this, _OdxSelectComponent_instances, handleMultipleChange_fn).call(this);
-    }
-  }
-};
-_OdxSelectComponent_instances = new WeakSet();
-handleMultipleChange_fn = function() {
-  for (const option of this.options) {
-    option.type = this.multiple ? "checkbox" : null;
-  }
-};
-_handleDropdownToggle = new WeakMap();
-_removeChip = new WeakMap();
-__decorateClass([
-  queryAssignedElements({ selector: OdxOptionComponent.selector, flatten: true })
-], OdxSelectComponent.prototype, "options", 2);
-__decorateClass([
-  query(OdxDropdownComponent.selector, true)
-], OdxSelectComponent.prototype, "dropdownElement", 2);
-OdxSelectComponent = __decorateClass([
-  customElement("odx-select", [styles])
-], OdxSelectComponent);
-
-export { OdxSelectComponent };

package/dist/components/separator/separator.component.css.js

@@ -1,3 +0,0 @@
-const styles = "@layer base{:host{--color: var(--odx-color-separator);--size: var(--odx-size-px);--min-size: var(--odx-size-75);--inline-space: var(--odx-size-12);--block-space: var(--odx-size-75);display:block;margin-block:calc(var(--block-space) - .5 * var(--size));margin-inline:var(--inline-space)}.base{display:flex;align-items:center;column-gap:var(--odx-size-37);&:before,&:after{content:\"\";display:block;flex:1 1 auto;block-size:var(--size);background-color:var(--color);pointer-events:none}}}@layer variants{:host([vertical]){margin-block:var(--block-space);margin-inline:calc(var(--inline-space) - .5 * var(--size));.base{flex-direction:column;&:after,&:before{min-block-size:calc(var(--min-size) / 2);block-size:calc(100% - var(--block-space) * 2);inline-size:var(--size)}}}:host(:not([vertical])){.base{&:after,&:before{min-inline-size:calc(var(--min-size) / 2)}}}:host([highlight]){--color: var(--odx-color-separator-strong)}:host([align=\"start\"]){.base:before{flex:0 0 var(--min-size)}}:host([align=\"end\"]){.base:after{flex:0 0 var(--min-size)}}:host([empty-slot]) .base{gap:0}}";
-
-export { styles as default };

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

@@ -1,16 +0,0 @@
-import { CustomElement } from '@odx/foundation';
-import { TemplateResult } from 'lit';
-import { SeparatorAlign } from './separator.models';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-separator': OdxSeparatorComponent;
-    }
-}
-export declare class OdxSeparatorComponent extends CustomElement {
-    align?: SeparatorAlign;
-    highlight: boolean;
-    vertical: boolean;
-    connectedCallback(): void;
-    protected render(): TemplateResult;
-}
-//# sourceMappingURL=separator.component.d.ts.map

package/dist/components/separator/separator.component.js

@@ -1,49 +0,0 @@
-import { CustomElement, emptySlotFallbackFix, customElement } from '@odx/foundation';
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import styles from './separator.component.css.js';
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let OdxSeparatorComponent = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.highlight = false;
-    this.vertical = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role = "separator";
-  }
-  render() {
-    return html`
-      <div class="base">
-        <div class="content">
-          <slot ${emptySlotFallbackFix()} @slotchange=${() => this.requestUpdate()}></slot>
-        </div>
-      </div>
-    `;
-  }
-};
-__decorateClass([
-  property({ reflect: true })
-], OdxSeparatorComponent.prototype, "align", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], OdxSeparatorComponent.prototype, "highlight", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], OdxSeparatorComponent.prototype, "vertical", 2);
-OdxSeparatorComponent = __decorateClass([
-  customElement("odx-separator", [styles])
-], OdxSeparatorComponent);
-
-export { OdxSeparatorComponent };

package/dist/components/skeleton/skeleton.component.css.js

@@ -1,3 +0,0 @@
-const styles = ":host{--_color-fill: var(--odx-color-disabled-fill);display:block;block-size:var(--odx-size-150);inline-size:100%;background:linear-gradient(90deg,var(--_color-fill) 33%,var(--odx-color-disabled-foreground) 50%,var(--_color-fill) 66%);background-size:200% 100%;animation:odx-skeleton-loading 2s infinite linear}:host([rounded]:not([rounded=\"false\"])){border-radius:var(--odx-border-radius-md)}@keyframes odx-skeleton-loading{0%{background-position:100% 100%}to{background-position:-100% 100%}}";
-
-export { styles as default };

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

@@ -1,12 +0,0 @@
-import { CustomElement } from '@odx/foundation';
-import { TemplateResult } from 'lit';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-skeleton': OdxSkeletonComponent;
-    }
-}
-export declare class OdxSkeletonComponent extends CustomElement {
-    rounded: boolean;
-    protected render(): TemplateResult;
-}
-//# sourceMappingURL=skeleton.component.d.ts.map

package/dist/components/skeleton/skeleton.component.js

@@ -1,32 +0,0 @@
-import { CustomElement, customElement } from '@odx/foundation';
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import styles from './skeleton.component.css.js';
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let OdxSkeletonComponent = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.rounded = false;
-  }
-  render() {
-    return html``;
-  }
-};
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], OdxSkeletonComponent.prototype, "rounded", 2);
-OdxSkeletonComponent = __decorateClass([
-  customElement("odx-skeleton", [styles])
-], OdxSkeletonComponent);
-
-export { OdxSkeletonComponent };

package/dist/components/slider/slider-handle.component.css.js

@@ -1,3 +0,0 @@
-const styles = "*{margin:0;padding:0;box-sizing:border-box}:host{--_thumb-color: var(--_track-color);--_thumb-size: var(--odx-size-150);--_previous-position: 0%;--_position: 0%;--_next-position: 0%;display:contents}:host::part(track),:host::part(thumb),:host::part(label){position:absolute}:host::part(track),:host::part(label){pointer-events:none}:host::part(thumb),:host::part(label){background-color:var(--_thumb-color);inset-inline-start:var(--_position)}:host::part(track){background-color:var(--_track-color);border-radius:var(--_track-size);inset:0 calc(100% - var(--_position)) 0 var(--_previous-position);z-index:var(--_layer-background)}:host::part(thumb){display:flex;place-content:center;place-items:center;border-radius:50%;block-size:var(--_thumb-size);inline-size:var(--_thumb-size);inset-block-start:50%;cursor:grab;transform:translate(-50%,-50%);z-index:var(--_layer-interactive);box-shadow:var(--odx-shadow-level-0);outline:0 solid var(--odx-palette-cyan-50-15)}:host::part(label){inset-block-end:100%;transform:translate(-50%) translateY(calc(-1 * var(--odx-size-75))) scale(0);opacity:0;border-radius:var(--odx-border-radius-sm);color:var(--odx-color-foreground-light);padding-inline:var(--odx-size-50);line-height:var(--odx-size-150);z-index:var(--_layer-foreground)}:host::part(with-motion){transition:var(--odx-transition-reduced)}:host([odx-drag-active])::part(with-motion){transition-property:outline}:host::part(thumb):active,:host(:active)::part(thumb){outline-width:var(--odx-size-75)}:host(:hover),:host(:focus-within){--_thumb-color: var(--odx-color-highlight-rest)}:host(:focus-within)::part(label),:host(:hover)::part(label){opacity:1;transform:translate(-50%) translateY(calc(-1 * var(--odx-size-75))) scale(1)}:host([aria-disabled=\"true\"]){pointer-events:none}:host([aria-disabled=\"true\"])::part(thumb){--_thumb-color: var(--odx-color-disabled-fill);z-index:var(--_layer-interactive-disabled)}";
-
-export { styles as default };

package/dist/components/slider/slider-handle.component.js

@@ -1,168 +0,0 @@
-import { consume } from '@lit/context';
-import { NumberControl, CustomElement, customElement } from '@odx/foundation';
-import { IsDraggable, IS_DRAG_ACTIVE_ATTRIBUTE } from '@odx/foundation/cdk';
-import { round, clamp } from 'es-toolkit';
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { when } from 'lit/directives/when.js';
-import styles from './slider-handle.component.css.js';
-import { sliderContext, SliderLabelVisibility, SliderTrackVisibility } from './slider.models.js';
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _previousHandle, _nextHandle, _OdxSliderHandleComponent_instances, isLabelVisible_fn, isTrackVisible_fn, findClosestValue_fn, updatePosition_fn, getValueFromPosition_fn, calculateValue_fn, limitValue_fn, findPreviousHandle_fn, findNextHandle_fn;
-let OdxSliderHandleComponent = class extends IsDraggable(NumberControl(CustomElement)) {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _OdxSliderHandleComponent_instances);
-    this.context = sliderContext.defaultValue;
-    __privateAdd(this, _previousHandle, null);
-    __privateAdd(this, _nextHandle, null);
-  }
-  get minRange() {
-    return Math.ceil(this.context.minRange / this.context.step) * this.context.step;
-  }
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.role = "slider";
-    this.slot = "thumbs";
-    this.tabIndex = 0;
-  }
-  beforeDragStart(event) {
-    super.beforeDragStart?.(event);
-    __privateGet(this, _nextHandle)?.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, true);
-    this.value = __privateMethod(this, _OdxSliderHandleComponent_instances, findClosestValue_fn).call(this, __privateMethod(this, _OdxSliderHandleComponent_instances, getValueFromPosition_fn).call(this, event.position));
-    this.focus();
-  }
-  dragStart(event) {
-    super.dragStart?.(event);
-    __privateMethod(this, _OdxSliderHandleComponent_instances, updatePosition_fn).call(this, __privateMethod(this, _OdxSliderHandleComponent_instances, getValueFromPosition_fn).call(this, event.position));
-  }
-  dragMove(event) {
-    super.dragMove?.(event);
-    const value = __privateMethod(this, _OdxSliderHandleComponent_instances, getValueFromPosition_fn).call(this, event.position);
-    const closestValue = __privateMethod(this, _OdxSliderHandleComponent_instances, findClosestValue_fn).call(this, value);
-    if (this.value !== closestValue) {
-      this.value = closestValue;
-    }
-    __privateMethod(this, _OdxSliderHandleComponent_instances, updatePosition_fn).call(this, value);
-  }
-  afterDragEnd(event) {
-    super.afterDragEnd?.(event);
-    __privateGet(this, _nextHandle)?.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, false);
-    __privateMethod(this, _OdxSliderHandleComponent_instances, updatePosition_fn).call(this, __privateMethod(this, _OdxSliderHandleComponent_instances, findClosestValue_fn).call(this, this.value));
-  }
-  getDistance(containerElement, event) {
-    const rect = containerElement.getBoundingClientRect();
-    const relativePosition = round((event.x - rect.x) / rect.width) * 100;
-    return Math.abs(this.value - __privateMethod(this, _OdxSliderHandleComponent_instances, calculateValue_fn).call(this, relativePosition));
-  }
-  getValueText() {
-    return this.context.unit ? `${this.value}${this.context.unit}` : super.getValueText();
-  }
-  willUpdate(props) {
-    super.willUpdate(props);
-    if (props.has("value")) {
-      this.value = __privateMethod(this, _OdxSliderHandleComponent_instances, limitValue_fn).call(this, this.value);
-      this.ariaValueNow = String(this.value);
-    }
-    if (props.has("disabled")) {
-      this.dragDisabled = this.disabled;
-    }
-  }
-  updated(props) {
-    super.updated(props);
-    if (this.isDragActive) return;
-    __privateSet(this, _previousHandle, __privateMethod(this, _OdxSliderHandleComponent_instances, findPreviousHandle_fn).call(this));
-    __privateSet(this, _nextHandle, __privateMethod(this, _OdxSliderHandleComponent_instances, findNextHandle_fn).call(this));
-    __privateMethod(this, _OdxSliderHandleComponent_instances, updatePosition_fn).call(this, __privateMethod(this, _OdxSliderHandleComponent_instances, findClosestValue_fn).call(this, this.value));
-  }
-  render() {
-    const label = this.getValueText() || this.value;
-    return html`
-      ${when(__privateMethod(this, _OdxSliderHandleComponent_instances, isTrackVisible_fn).call(this), () => html`<div part="track with-motion"></div>`)}
-      <div part="thumb with-motion" tabindex="0"></div>
-      ${when(__privateMethod(this, _OdxSliderHandleComponent_instances, isLabelVisible_fn).call(this), () => html`<odx-text part="label with-motion" size="sm">${label}</odx-text>`)}
-    `;
-  }
-};
-_previousHandle = new WeakMap();
-_nextHandle = new WeakMap();
-_OdxSliderHandleComponent_instances = new WeakSet();
-isLabelVisible_fn = function() {
-  return this.context.labelVisibility !== SliderLabelVisibility.HIDDEN;
-};
-isTrackVisible_fn = function() {
-  if (this.trackVisibility === SliderTrackVisibility.VISIBLE) {
-    return true;
-  }
-  if (this.trackVisibility === SliderTrackVisibility.HIDDEN) {
-    return false;
-  }
-  return !!__privateGet(this, _previousHandle) || !__privateGet(this, _previousHandle) && !__privateGet(this, _nextHandle);
-};
-findClosestValue_fn = function(value) {
-  const closestValue = value - value % this.context.step;
-  const isNextValue = value - closestValue > this.context.step / 2;
-  return __privateMethod(this, _OdxSliderHandleComponent_instances, limitValue_fn).call(this, closestValue + (isNextValue ? this.context.step : 0));
-};
-updatePosition_fn = function(value) {
-  const valuePercentage = `${round(clamp((value - this.context.min) / this.context.range, 0, 1) * 100, 3)}%`;
-  this.style.setProperty("--_position", valuePercentage);
-  __privateGet(this, _nextHandle)?.style.setProperty("--_previous-position", valuePercentage);
-  __privateGet(this, _previousHandle)?.style.setProperty("--_next-position", valuePercentage);
-};
-getValueFromPosition_fn = function(position) {
-  return __privateMethod(this, _OdxSliderHandleComponent_instances, limitValue_fn).call(this, __privateMethod(this, _OdxSliderHandleComponent_instances, calculateValue_fn).call(this, position.x));
-};
-calculateValue_fn = function(relativePosition) {
-  return clamp(relativePosition / 100, 0, 1) * this.context.range + this.context.min;
-};
-limitValue_fn = function(value) {
-  const startLimit = __privateGet(this, _previousHandle) ? Math.max(__privateGet(this, _previousHandle).value, this.min - this.minRange) + this.minRange : this.min;
-  const endLimit = __privateGet(this, _nextHandle) ? Math.min(__privateGet(this, _nextHandle).value, this.max + this.minRange) - this.minRange : this.max;
-  return clamp(value, startLimit, endLimit);
-};
-findPreviousHandle_fn = function() {
-  let sibling = this.previousElementSibling;
-  while (sibling) {
-    if (sibling instanceof OdxSliderHandleComponent) return sibling;
-    sibling = sibling.previousElementSibling;
-  }
-  return null;
-};
-findNextHandle_fn = function() {
-  let sibling = this.nextElementSibling;
-  while (sibling) {
-    if (sibling instanceof OdxSliderHandleComponent) return sibling;
-    sibling = sibling.nextElementSibling;
-  }
-  return null;
-};
-__decorateClass([
-  consume({ context: sliderContext.context, subscribe: true })
-], OdxSliderHandleComponent.prototype, "context", 2);
-__decorateClass([
-  property()
-], OdxSliderHandleComponent.prototype, "trackVisibility", 2);
-OdxSliderHandleComponent = __decorateClass([
-  customElement("odx-slider-handle", [styles])
-], OdxSliderHandleComponent);
-
-export { OdxSliderHandleComponent };

package/dist/components/slider/slider-marks.component.css.js

@@ -1,3 +0,0 @@
-const styles = ":host{--_mark-color: var(--odx-slider-mark-color, var(--odx-palette-coolgray-40));--_mark-tick-block-size: var(--odx-size-75);--_mark-tick-inline-size: var(--odx-size-12);display:flex;align-items:center;flex-direction:row;position:absolute;inset:0;z-index:-1;pointer-events:none}[part~=mark]{flex:1 0 auto;position:relative}[part~=mark][last]{flex:0 0 0}[part~=mark-tick]{display:block;width:2px;inset-inline-end:0;transform:translate(calc(-.5 * var(--_mark-tick-inline-size)));height:var(--_mark-tick-block-size);background-color:var(--_mark-color)}[part~=mark][last] [part~=mark-tick]{transform:none}[part~=mark-label]{text-align:center;transform:translate(-50%) translateY(var(--odx-size-100));position:absolute;inset-block-start:0;line-height:inherit}[part~=mark]:not(:last-of-type){border-inline-end-color:var(--_mark-color)}[part~=mark][active]:not([active=false]){border-inline-end-color:red}";
-
-export { styles as default };