@mustib/web-components 0.0.0-alpha.0

package/components/mu-range-thumb.js

@@ -0,0 +1,305 @@
+import { M as MUElement, _ as __decorate, g as getElementBoundaries } from '../mu-element-CZDI_RCY.js';
+import { css, html } from 'lit';
+import { state, property, query } from 'lit/decorators.js';
+import { MuRangeThumbValue } from './mu-range-thumb-value.js';
+import { MuTransparent } from './mu-transparent.js';
+import '../decorators.js';
+
+class MuRangeThumb extends MUElement {
+    get range() {
+        return this._range;
+    }
+    set range(value) {
+        if (this._isRangeReady.resolved && (value[0] > this.minValue || value[1] < this.maxValue)) {
+            console.warn(`range must not be less than max value (${this.maxValue}) or greater than min value (${this.minValue}), but got (${value})`, this);
+            return;
+        }
+        if (!this._isRangeReady.resolved)
+            this._isRangeReady.resolve();
+        this._range = value;
+    }
+    constructor() {
+        super();
+        this.eventActionData = undefined;
+        this._addEventActionAttributes = undefined;
+        /**
+         * A set of related mu-range-thumb-value elements
+         */
+        this._valueElements = new Set();
+        this._isRangeReady = this.generateIsReadyPromise({
+            onTimeout: () => {
+                console.warn('range not set for mu-range-thumb, switching to default value [0, 100]', this);
+                this.range = [0, 100];
+            },
+        });
+        this.axis = 'x';
+        /**
+         * The current value of the thumb.
+         */
+        this.value = 0;
+        this.step = 1;
+        /**
+         * A boolean indicates if the thumb is focused.
+         *
+         * for internal use only by mu-range
+         */
+        this.focused = false;
+        /**
+         * A string indicates how range handles other thumbs intersecting with with thumb.
+         *
+         * `prevent` is the default behavior, and it means do not allow other thumbs intersecting this thumb to pass.
+         *
+         * `pass-over` means allow other thumbs to pass over this thumb so they can have a free movement.
+         */
+        this.intersectBehavior = 'prevent';
+        /**
+         * A boolean indicates if the thumb should be completely ignored when interacting with the range.
+         *
+         * When `true`, the thumb will not be active when the user interacts with the range, and other non-transparent thumbs will be active instead.
+         *
+         * It's like setting `readonly` or `disabled` on the thumb, but instead of nothing being active, other thumbs will be active.
+         */
+        this.transparent = false;
+        /**
+         * A boolean indicates if the thumb should force the step when interacting with the range.
+         */
+        this.forceStep = false;
+        this._slotChangeHandler = () => {
+            this._valueElements.clear();
+            const addElement = (el) => {
+                if (el instanceof MuRangeThumbValue) {
+                    this._valueElements.add(el);
+                }
+            };
+            this.renderRoot.querySelector('slot')?.assignedElements({ flatten: true }).forEach(el => {
+                if (el instanceof MuTransparent) {
+                    el.contents.forEach(addElement);
+                }
+                else {
+                    addElement(el);
+                }
+            });
+            this._updateValueElements();
+            this.updateValueElementsAxis();
+        };
+        this.updateComplete.then(() => {
+            this.setAttribute('role', 'slider');
+            this.addEventListener('mu-transparent-slotchange', this._slotChangeHandler);
+        });
+    }
+    /**
+     * returns an object containing the width and height of the thumb
+     */
+    get size() {
+        const { container } = this;
+        let width = 0;
+        let height = 0;
+        if (container) {
+            const boundaries = getElementBoundaries(container);
+            width = boundaries.width;
+            height = boundaries.height;
+        }
+        return { width, height };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._isRangeReady.promise.then(() => {
+            if (this.minValue === undefined) {
+                this.minValue = this.range[0];
+            }
+            if (this.maxValue === undefined) {
+                this.maxValue = this.range[1];
+            }
+            if (this.value === undefined) {
+                this.setValueFromPercentage(50);
+            }
+        });
+    }
+    /**
+     * Updates the value of related mu-range-thumb-value elements
+     */
+    _updateValueElements() {
+        if (this._valueElements.size === 0)
+            return;
+        this._valueElements.forEach(el => {
+            el.setValue({
+                value: this.value,
+                percentage: this.getPercentageFromValue(this.value)
+            });
+        });
+    }
+    async getUpdateComplete() {
+        const result = await super.getUpdateComplete();
+        await this._isRangeReady.promise;
+        return result;
+    }
+    /**
+     * Returns a boolean indicating if the value is valid to be set.
+     */
+    isValidValue(value) {
+        const isValid = value <= this.maxValue && value >= this.minValue;
+        return isValid;
+    }
+    /**
+     * Sets the value of the thumb and returns a boolean indicating if the value was changed.
+     * @param value The value to set
+     * @returns A boolean indicating if the value was changed
+     */
+    setValue(value) {
+        if (this.isValidValue(value)) {
+            this.value = value;
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Sets the value of the thumb from a percentage and returns a boolean indicating if the value was changed.
+     * @param percentage The percentage to set
+     * @returns A boolean indicating if the value was changed
+     */
+    setValueFromPercentage(percentage) {
+        const value = ((percentage / 100) * (this.range[1] - this.range[0])) + this.range[0];
+        return this.setValue(value);
+    }
+    /**
+     * Converts a given value to a percentage based on the current range and returns it.
+     */
+    getPercentageFromValue(value) {
+        return ((value) / (this.range[1] - this.range[0])) * 100;
+    }
+    /**
+     * Updates the axis of related mu-range-thumb-value elements
+     */
+    updateValueElementsAxis() {
+        this._valueElements.forEach(el => el.setAxis(this.axis === 'x' || this.axis === '-x' ? 'x' : 'y'));
+    }
+    async updated(_changedProperties) {
+        await this.updateComplete;
+        if (_changedProperties.has('axis')) {
+            this.updateValueElementsAxis();
+            this.ariaOrientation = this.axis === '-y' || this.axis === 'y' ? 'vertical' : 'horizontal';
+        }
+        if (_changedProperties.has('value')) {
+            if (!this.isValidValue(this.value)) {
+                console.warn(`value attribute must not be greater than max value (${this.maxValue}) or less than min value (${this.minValue}), but got (${this.value})`, this);
+            }
+            this.style.setProperty('--mu-range-thumb-percentage', `${this.getPercentageFromValue(this.value)}%`);
+            this.setAttribute('aria-valuenow', `${this.value}`);
+            this._updateValueElements();
+        }
+        if (_changedProperties.has('minValue') || _changedProperties.has('maxValue')) {
+            this.setAttribute('aria-valuemin', `${this.minValue}`);
+            this.setAttribute('aria-valuemax', `${this.maxValue}`);
+            if (this.minValue > this.maxValue) {
+                console.warn(`minValue attribute must not be greater than maxValue attribute, but got (${this.minValue}, ${this.maxValue})`, this);
+            }
+            else if (this.minValue < this.range[0] || this.maxValue > this.range[1]) {
+                console.warn(`minValue (${this.minValue}) and maxValue (${this.maxValue}) attributes must be equal to or in the range of range property (${this.range})`, this);
+            }
+        }
+    }
+    render() {
+        return html `
+      <div id='container' part='container' axis='${this.axis}'>
+        <slot @slotchange=${this._slotChangeHandler}></slot>
+      </div>
+    `;
+    }
+}
+MuRangeThumb.styles = [MUElement.cssBase, css `
+    #container {
+      --thumb-size: var(--mu-range-thumb-size, calc(var(--range-thickness) * 3));
+      --range-thumb-background-color: var(--mu-range-thumb-background-color, var(--mu-color-500));
+      --range-thumb-shadow: var(--mu-range-thumb-shadow, 0 0 calc(var(--thumb-size) * .2) hsl(from var(--range-thumb-background-color) h s calc(l * .25)));
+      --position: clamp(0px, calc(var(--mu-range-thumb-percentage) - (var(--thumb-size) / 2)) , calc(100% - var(--thumb-size))) !important;
+      position: absolute;
+      border-radius: 9999px;
+      transition: all 50ms ease-in;
+      width: var(--thumb-size);
+      aspect-ratio: 1;
+      background-color: var(--range-thumb-background-color);
+      user-select: none;
+      box-shadow: var(--range-thumb-shadow);
+      z-index: 1;
+    }
+
+
+    :host([focused]) #container {
+      ${MUElement.css.focus};
+    }
+
+    #container[axis='x'] {
+      left: var(--position);
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    
+    #container[axis='-x'] {
+      left: unset;
+      top: 50%;
+      right: var(--position);
+      transform: translateY(-50%);
+    }
+
+    #container[axis='y'] {
+      top: unset;
+      bottom: var(--position);
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    
+    #container[axis='-y'] {
+      bottom: unset;
+      top: var(--position);
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  `];
+__decorate([
+    state()
+], MuRangeThumb.prototype, "axis", void 0);
+__decorate([
+    property({
+        reflect: true,
+        type: Number,
+        attribute: 'min-value'
+    })
+], MuRangeThumb.prototype, "minValue", void 0);
+__decorate([
+    property({
+        reflect: true,
+        type: Number,
+        attribute: 'max-value'
+    })
+], MuRangeThumb.prototype, "maxValue", void 0);
+__decorate([
+    property({
+        reflect: true,
+        type: Number,
+        attribute: 'value'
+    })
+], MuRangeThumb.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true, type: Number, })
+], MuRangeThumb.prototype, "step", void 0);
+__decorate([
+    property()
+], MuRangeThumb.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MuRangeThumb.prototype, "focused", void 0);
+__decorate([
+    property({ attribute: 'intersect-behavior' })
+], MuRangeThumb.prototype, "intersectBehavior", void 0);
+__decorate([
+    property()
+], MuRangeThumb.prototype, "transparent", void 0);
+__decorate([
+    property({ attribute: 'force-step', type: Boolean })
+], MuRangeThumb.prototype, "forceStep", void 0);
+__decorate([
+    query('#container', true)
+], MuRangeThumb.prototype, "container", void 0);
+MuRangeThumb.register('mu-range-thumb');
+
+export { MuRangeThumb };

package/components/mu-range.d.ts

@@ -0,0 +1,206 @@
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { MUElement } from './mu-element.js';
+import { MuRangeThumb } from './mu-range-thumb.js';
+import { MuRangeFill } from './mu-range-fill.js';
+import '@mustib/utils/browser';
+import './mu-range-thumb-value.js';
+
+type RangeThumb = {
+    element: MuRangeThumb;
+    linkedFillElements: RangeFill[] | undefined;
+    value: number;
+    index: number;
+    name: string;
+};
+type RangeFill = {
+    element: MuRangeFill;
+    linkedThumbs: RangeThumb[];
+};
+type Events = {
+    /**
+     * Emitted when pointerdown on a non-thumb element and empty-area attribute has a value of "dispatch".
+     *
+     * This can be used to dynamically add thumbs.
+     */
+    'mu-range-empty-area': CustomEvent<{
+        values: ReturnType<MuRange['_getValuesFromEvent']>;
+    }>;
+    /**
+     * Emitted when the value of the range changes.
+     */
+    'mu-range-change': CustomEvent<{
+        data: {
+            name: string;
+            value: number;
+        }[];
+    }>;
+    /**
+     * Emitted when new thumbs are added after the initial render.
+     */
+    'mu-range-added-thumbs': CustomEvent<{
+        data: {
+            name: string;
+            value: number;
+        }[];
+    }>;
+    /**
+     * Emitted when thumbs are removed after the initial render.
+     */
+    'mu-range-removed-thumbs': CustomEvent<{
+        data: {
+            name: string;
+            value: number;
+        }[];
+    }>;
+};
+declare class MuRange extends MUElement {
+    static styles?: CSSResultGroup | undefined;
+    eventActionData: undefined;
+    _addEventActionAttributes: undefined;
+    /**
+     * The axis of the range.
+     *
+     * `x` - horizontal axis auto matching the direction
+     *
+     * `-x` - horizontal axis reversed
+     *
+     * `y` - vertical axis
+     *
+     * `-y` - vertical axis reversed
+     */
+    axis: 'x' | 'y' | '-x' | '-y';
+    /**
+     * The minimum value of the range.
+     */
+    min: number;
+    /**
+     * The maximum value of the range.
+     */
+    max: number;
+    /**
+     * The value of the range for the controlled mode.
+     *
+     * @see {@link MuRange.setValueFromString}
+     *
+     * @default undefined
+     */
+    value?: string;
+    /**
+     * The initial render value of the range for the uncontrolled mode.
+     *
+     * @see {@link MuRange.setValueFromString}
+     *
+     * @default undefined
+     */
+    defaultValue?: string;
+    /**
+     * Thumb behavior when pointerdown on a non-thumb element.
+     *
+     * - `prevent` - don't do anything
+     *
+     * - `dispatch` - dispatch the {@link Events['mu-range-empty-area']} event
+     *
+     * - `nearest` - move the nearest thumb to the pointer position
+     *
+     * @default `nearest`
+     */
+    emptyArea: 'prevent' | 'dispatch' | 'nearest';
+    protected _isReadyPromise: Readonly<{
+        status: "success" | "fail" | "pending";
+        resolved: boolean;
+        promise: Promise<boolean>;
+        resolve: () => void;
+    }>;
+    get isControlled(): boolean;
+    _thumbs: RangeThumb[];
+    _thumbsElementsMap: Map<MuRangeThumb, RangeThumb>;
+    _thumbsNamesMap: Map<string, RangeThumb>;
+    _activeThumb: RangeThumb | undefined;
+    /**
+     * this is used to prevent focus listener from running when the pointer is down otherwise active thumb will gain focus when the pointer is down
+     */
+    protected _isPointerDown: boolean;
+    set activeThumb(thumb: RangeThumb | undefined);
+    get activeThumb(): RangeThumb | undefined;
+    constructor();
+    disconnectedCallback(): void;
+    /**
+     *
+     * @returns an array of objects containing the name and value of each thumb
+     */
+    getValue(): {
+        name: string;
+        value: number;
+    }[];
+    /**
+     * Programmatically insert a thumb element
+     */
+    insertThumbElement(thumbEl: MuRangeThumb): Promise<void>;
+    /**
+     * Switches the active thumb for keyboard navigation
+     */
+    switchNavigationActiveItem(direction: 'next' | 'prev'): boolean;
+    dispatchChangeEvent(thumbs?: {
+        name: string;
+        value: number;
+    }[]): void;
+    _setThumbValue(thumb: RangeThumb, value: number): void;
+    /**
+     * Updates the range fill element
+     */
+    updateRangeFill(range: RangeFill): Promise<void>;
+    /**
+     * Takes a thumb and a value and returns the step value to be set
+     */
+    _getThumbStepValue(thumb: RangeThumb, value: number): number;
+    /**
+     * gets the value and percentage from pointer event
+     */
+    _getValuesFromEvent(e: {
+        clientX: number;
+        clientY: number;
+    }): {
+        roundedPercentage: number;
+        value: number;
+        percentage: number;
+        rawPercentage: number;
+    };
+    /**
+     * sorts the thumbs
+     */
+    sortThumbs(): void;
+    _slotChangeHandler: () => Promise<void>;
+    /**
+     * @param valueString
+     *
+     * a comma separated string without spaces of (thumb values) or (an optional thumb name followed by a colon then the value) or a mix of both
+     *
+     * make sure to only use one format where all has names or no names, because if there is no names, the order of the values will be the same as the order of the thumbs.
+     * so you might end up with a thumb with a different value (named and not named).
+     *
+     * @example "0,50,100"
+     * @example "thumb1:0,thumb2:50,thumb3:100"
+     * @example "0,thumb2:50,100"
+     *
+     */
+    setValueFromString(valueString: string): Promise<void>;
+    _keydownHandler: (e: KeyboardEvent) => void;
+    _pointerdownHandler: (e: PointerEvent) => void;
+    _documentPointerupHandler: (e: PointerEvent) => void;
+    _pointermoveHandler: (e: PointerEvent) => void;
+    _documentPointermoveHandler: (e: PointerEvent) => void;
+    _debouncedPointermoveHandler: (e: PointerEvent) => void;
+    protected getUpdateComplete(): Promise<boolean>;
+    protected firstUpdated(_changedProperties: PropertyValues<this>): Promise<void>;
+    protected updated(_changedProperties: PropertyValues<this>): Promise<void>;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mu-range': MuRange;
+    }
+    interface GlobalEventHandlersEventMap extends Events {
+    }
+}
+
+export { MuRange };