@umbraco-ui/uui 1.17.0 → 2.0.0-alpha.1

package/dist/components/radio/radio.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.element.js","sources":["../../../src/components/radio/radio.element.ts"],"sourcesContent":["import {\n  UUIHorizontalShakeAnimationValue,\n  UUIHorizontalShakeKeyframes,\n} from '../../internal/animations/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport { UUIRadioEvent } from './UUIRadioEvent.js';\n\n/**\n *  @element uui-radio\n *  @description - a single radio, should never be use as a stand-alone. Must be wrapped in `<uui-radio-group></uui-radio-group>` element.\n *  @slot - slot to set the label if no `label` attribute is set.\n *  @cssprop --uui-radio-button-size - Sets the size of the radio button.\n *  @fires change - on input change\n */\nexport class UUIRadioElement extends LitElement {\n  @query('#input')\n  private readonly _inputElement!: HTMLInputElement;\n\n  /**\n   * This is a name property of the `<uui-radio>` component. It reflects the behaviour of the native `<input />` element and its name attribute.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String })\n  public name = '';\n\n  /**\n   * This is a value property of the `<uui-radio>`.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String })\n  public value = '';\n\n  @property({ type: String })\n  public label = '';\n\n  @property({ type: Boolean, reflect: true })\n  public checked = false;\n\n  /**\n   * Disables the input.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  constructor() {\n    super();\n    this.addEventListener('keydown', this.#onKeyDown);\n  }\n\n  #onKeyDown(e: KeyboardEvent): void {\n    if (e.key === ' ') {\n      e.preventDefault();\n      if (!this.disabled && !this.readonly) {\n        this._inputElement?.click();\n      }\n    }\n  }\n\n  public focus() {\n    this._inputElement.focus();\n  }\n  public click() {\n    this._inputElement.click();\n  }\n\n  /**\n   * Call to uncheck the element\n   * @method uncheck\n   */\n  public uncheck() {\n    this.checked = false;\n  }\n\n  /**\n   * Call to check the element.\n   * @method uncheck\n   */\n  public check() {\n    this.checked = true;\n  }\n  /**\n   * Call to make the element focusable, this sets tabindex to 0.\n   * @method makeFocusable\n   */\n  public makeFocusable() {\n    if (!this.disabled) {\n      this.removeAttribute('tabindex');\n    }\n  }\n  /**\n   * Call to make the element focusable, this sets tabindex to -1.\n   * @method makeUnfocusable\n   */\n  public makeUnfocusable() {\n    if (!this.disabled) {\n      this.setAttribute('tabindex', '-1');\n    }\n  }\n\n  #onChange(e: Event) {\n    e.stopPropagation();\n    const checked = this._inputElement.checked;\n    this.checked = checked;\n    if (checked) {\n      this.focus();\n    }\n    this.dispatchEvent(new UUIRadioEvent(UUIRadioEvent.CHANGE));\n  }\n\n  render() {\n    return html` <label>\n      <input\n        id=\"input\"\n        type=\"radio\"\n        name=${this.name}\n        value=${this.value}\n        .checked=${this.checked}\n        .disabled=${this.disabled || this.readonly}\n        @change=${this.#onChange} />\n      <div id=\"button\"></div>\n      <div id=\"label\">\n        ${this.label ? html`<span>${this.label}</span>` : html`<slot></slot>`}\n      </div>\n    </label>`;\n  }\n\n  static override readonly styles = [\n    UUIHorizontalShakeKeyframes,\n    css`\n      :host {\n        display: block;\n        box-sizing: border-box;\n        font-family: inherit;\n        color: currentColor;\n        --uui-radio-button-size: var(--uui-size-6);\n        margin: var(--uui-size-2) 0;\n      }\n\n      label {\n        position: relative;\n        box-sizing: border-box;\n        user-select: none;\n        display: flex;\n        align-items: center;\n        cursor: pointer;\n        line-height: 18px;\n      }\n\n      :host([readonly]) label {\n        cursor: default;\n      }\n\n      #input {\n        width: 0;\n        height: 0;\n        opacity: 0;\n        margin: 0;\n      }\n\n      .label {\n        margin-top: 2px;\n      }\n\n      #button {\n        box-sizing: border-box;\n        display: inline-block;\n        width: var(--uui-radio-button-size, 18px);\n        height: var(--uui-radio-button-size, 18px);\n        background-color: var(--uui-color-surface);\n        border: 1px solid var(--uui-color-border-standalone);\n        border-radius: 100%;\n        margin-right: calc(var(--uui-size-2) * 2);\n        position: relative;\n        flex: 0 0 var(--uui-radio-button-size);\n        transition: border-color 120ms;\n      }\n\n      #button::after {\n        content: '';\n        width: calc(var(--uui-radio-button-size) / 2);\n        height: calc(var(--uui-radio-button-size) / 2);\n        background-color: var(--uui-color-selected);\n        opacity: 0.5;\n        border-radius: 100%;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%) scale(0);\n        transition:\n          transform 240ms cubic-bezier(0.175, 0.885, 0.32, 1.275),\n          opacity 120ms,\n          background-color 120ms;\n      }\n\n      :host(:not([disabled]):not([readonly]):hover) #button {\n        border-color: var(--uui-color-border-emphasis);\n      }\n\n      :host(:focus) {\n        outline: none;\n      }\n      :host(:focus-within) input:focus-visible + #button {\n        outline: 2px solid var(--uui-color-focus);\n      }\n\n      :host(:not([disabled]):not([readonly]):hover) input ~ #button::after {\n        transform: translate(-50%, -50%) scale(1);\n        opacity: 0.2;\n      }\n      :host(:not([disabled]):not([readonly]):active) input ~ #button::after {\n        transform: translate(-50%, -50%) scale(1.2);\n        opacity: 1;\n      }\n      input:checked ~ #button::after,\n      :host(:not([disabled]):not([readonly]):hover)\n        input:checked\n        ~ #button::after {\n        transform: translate(-50%, -50%) scale(1);\n      }\n\n      input:checked ~ #button {\n        border-color: var(--uui-color-selected);\n      }\n      input:checked ~ #button::after {\n        opacity: 1 !important;\n      }\n\n      :host(:not([disabled]):not([readonly]):hover) input:checked ~ #button {\n        border-color: var(--uui-color-selected-emphasis);\n      }\n\n      :host([disabled]) label {\n        cursor: not-allowed;\n        opacity: 0.5;\n      }\n      :host([disabled]) .label {\n        color: var(--uui-color-disabled-contrast);\n      }\n\n      :host([disabled]) input ~ #button {\n        border-color: var(--uui-color-disabled-contrast);\n      }\n\n      :host([disabled]) input:checked ~ #button {\n        border-color: var(--uui-color-disabled-contrast);\n      }\n\n      :host([disabled]) input:checked ~ #button::after {\n        background-color: var(--uui-color-disabled-contrast);\n      }\n\n      :host([disabled]:active) #button {\n        animation: ${UUIHorizontalShakeAnimationValue};\n      }\n\n      @media (prefers-reduced-motion) {\n        :host([disabled]:active) #button {\n          animation: none;\n        }\n\n        #button::after {\n          transition: none;\n        }\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/radio/radio.js

@@ -0,0 +1,15 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUIRadioGroupElement } from "./radio-group.element.js";
+import { UUIRadioElement } from "./radio.element.js";
+import { UUIRadioEvent } from "./UUIRadioEvent.js";
+import { UUIRadioGroupEvent } from "./UUIRadioGroupEvent.js";
+defineElement("uui-radio-group", UUIRadioGroupElement);
+defineElement("uui-radio", UUIRadioElement);
+export {
+  UUIRadioElement,
+  UUIRadioEvent,
+  UUIRadioGroupElement,
+  UUIRadioGroupEvent,
+  UUIRadioElement as default
+};
+//# sourceMappingURL=radio.js.map

package/dist/components/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sources":["../../../src/components/radio/radio.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIRadioGroupElement } from './radio-group.element.js';\nimport { UUIRadioElement } from './radio.element.js';\n\ndefineElement('uui-radio-group', UUIRadioGroupElement);\ndefineElement('uui-radio', UUIRadioElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-radio-group': UUIRadioGroupElement;\n    'uui-radio': UUIRadioElement;\n  }\n}\n\nexport * from './radio-group.element.js';\nexport * from './radio.element.js';\nexport * from './UUIRadioEvent.js';\nexport * from './UUIRadioGroupEvent.js';\nexport { UUIRadioElement as default } from './radio.element.js';\n"],"names":[],"mappings":";;;;;AAIA,cAAc,mBAAmB,oBAAoB;AACrD,cAAc,aAAa,eAAe;"}

package/dist/components/range-slider/UUIRangeSliderEvent.d.ts

@@ -0,0 +1,7 @@
+import { UUIEvent } from '../../internal/events/index.js';
+import type { UUIRangeSliderElement } from './range-slider.element.js';
+export declare class UUIRangeSliderEvent extends UUIEvent<{}, UUIRangeSliderElement> {
+    static readonly INPUT = "input";
+    static readonly CHANGE = "change";
+    constructor(evName: string, eventInit?: any);
+}

package/dist/components/range-slider/UUIRangeSliderEvent.js

@@ -0,0 +1,16 @@
+import { UUIEvent } from "../../internal/events/UUIEvent.js";
+const _UUIRangeSliderEvent = class _UUIRangeSliderEvent extends UUIEvent {
+  constructor(evName, eventInit = {}) {
+    super(evName, {
+      bubbles: true,
+      ...eventInit
+    });
+  }
+};
+_UUIRangeSliderEvent.INPUT = "input";
+_UUIRangeSliderEvent.CHANGE = "change";
+let UUIRangeSliderEvent = _UUIRangeSliderEvent;
+export {
+  UUIRangeSliderEvent
+};
+//# sourceMappingURL=UUIRangeSliderEvent.js.map

package/dist/components/range-slider/UUIRangeSliderEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UUIRangeSliderEvent.js","sources":["../../../src/components/range-slider/UUIRangeSliderEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIRangeSliderElement } from './range-slider.element.js';\n\nexport class UUIRangeSliderEvent extends UUIEvent<{}, UUIRangeSliderElement> {\n  public static readonly INPUT = 'input';\n  public static readonly CHANGE = 'change';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      ...eventInit,\n    });\n  }\n}\n"],"names":[],"mappings":";AAGO,MAAM,uBAAN,MAAM,6BAA4B,SAAoC;AAAA,EAI3E,YAAY,QAAgB,YAAiB,IAAI;AAC/C,UAAM,QAAQ;AAAA,MACZ,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AACF;AATE,qBAAuB,QAAQ;AAC/B,qBAAuB,SAAS;AAF3B,IAAM,sBAAN;"}

package/dist/components/range-slider/range-slider.d.ts

@@ -0,0 +1,9 @@
+import { UUIRangeSliderElement } from './range-slider.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-range-slider': UUIRangeSliderElement;
+    }
+}
+export * from './range-slider.element.js';
+export * from './UUIRangeSliderEvent.js';
+export { UUIRangeSliderElement as default } from './range-slider.element.js';

package/dist/components/range-slider/range-slider.element.d.ts

@@ -0,0 +1,149 @@
+import { LitElement } from 'lit';
+declare const UUIRangeSliderElement_base: (new (...args: any[]) => import("../../index.js").UUIFormControlWithBasicsMixinElement<FormDataEntryValue | FormData>) & typeof LitElement;
+/**
+ * @element uui-range-slider
+ * @description - Range slider with two handles. Use uui-slider for a single handle.
+ * @fires UUIRangeSliderEvent#input on input
+ * @fires UUIRangeSliderEvent#change on change
+ * @extends UUIFormControlMixin
+ */
+export declare class UUIRangeSliderElement extends UUIRangeSliderElement_base {
+    #private;
+    static readonly formAssociated = true;
+    /**
+     * Label to be used for aria-label and eventually as visual label. Adds "low-end value" and "high-end value" endings for the two values.
+     * @type {string}
+     * @attr
+     */
+    label: string;
+    /**
+     * Disables the input.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
+    /**
+     * Sets the minimum allowed value.
+     * @type {number}
+     * @attr min
+     * @default 0
+     */
+    get min(): number;
+    set min(newVal: number);
+    _min: number;
+    /**
+     * Sets the maximum allowed value.
+     * @type {number}
+     * @attr max
+     * @default 100
+     */
+    get max(): number;
+    set max(newVal: number);
+    _max: number;
+    /**
+     * Hides the numbers representing the value of each steps. Dots will still be visible
+     * @type {boolean}
+     * @attr 'hide-step-values'
+     * @default false
+     */
+    hideStepValues: boolean;
+    /**
+     * This reflects the behavior of a native input step attribute.
+     * @type {number}
+     * @attr
+     * @default 1
+     */
+    get step(): number;
+    set step(newVal: number);
+    _step: number;
+    /**
+     * Minimum value gap between the the two picked values. Cannot be lower than the step value and cannot be higher than the maximum gap
+     * @type {number}
+     * @attr min-gap
+     * @default undefined
+     */
+    get minGap(): number | undefined;
+    set minGap(newVal: number | undefined);
+    _minGap?: number;
+    /**
+     * Maximum value gap between the the two picked values. Cannot be lower than the minimum gap.
+     * @type {number}
+     * @attr max-gap
+     * @default undefined
+     */
+    get maxGap(): number | undefined;
+    set maxGap(newVal: number | undefined);
+    _maxGap?: number;
+    /**
+     * This is a value property of the uui-range-slider. Split the two values with comma, for example 10,50 sets the values to 10 and 50.
+     * @type {string}
+     * @attr
+     * @default 0,0
+     */
+    get value(): FormDataEntryValue | FormData;
+    set value(newVal: FormDataEntryValue | FormData);
+    private _currentFocus?;
+    private _movement;
+    private startPoint;
+    private _lowInputValue;
+    private _highInputValue;
+    private _trackWidth;
+    _lowValuePercentStart: number;
+    _highValuePercentEnd: number;
+    protected setValueLow(low: number): void;
+    protected setValueHigh(high: number): void;
+    protected setValue(low: number, high: number, lockValueRange?: boolean): void;
+    protected getFormElement(): HTMLInputElement;
+    focus(): Promise<void>;
+    blur(): Promise<void>;
+    /** Elements */
+    private readonly _outerTrack;
+    private readonly _inputLow;
+    private readonly _inputHigh;
+    private readonly _innerColor;
+    private readonly _innerColorThumb;
+    /** Constructor and Validator */
+    constructor();
+    connectedCallback(): void;
+    firstUpdated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private _runPropertiesChecks;
+    private _runGapChecks;
+    private _updateInnerColor;
+    private _getClickedValue;
+    /** Touch Event */
+    private readonly _onTouchStart;
+    private readonly _onTouchMove;
+    private readonly _onTouchEnd;
+    /** Mouse Event */
+    private readonly _onMouseDown;
+    private readonly _onMouseMove;
+    private readonly _onMouseUp;
+    /** Drag both thumbs logics */
+    private _saveStartPoints;
+    private _dragBothValuesByMousePos;
+    /** Input Events */
+    private _onLowInput;
+    private _onHighInput;
+    /** Change Events */
+    private _onLowChange;
+    private _onHighChange;
+    protected onChanged(): void;
+    /** Render */
+    render(): import("lit-html").TemplateResult<1>;
+    private _renderThumbValues;
+    private _renderSteps;
+    private _renderStepValues;
+    private _renderStepCircles;
+    private _renderNativeInputs;
+    /** Style */
+    static readonly styles: import("lit").CSSResult[];
+}
+export {};