@mustib/web-components 0.0.0-alpha.5 → 0.0.0-alpha.7

package/components/mu-range-thumb.js

@@ -1,8 +1,9 @@
-import { M as MuElement, _ as __decorate, g as getElementBoundaries } from '../mu-element-CEvBHYiI.js';
+import { M as MuElement, _ as __decorate, g as getElementBoundaries } from '../mu-element-yEZ17QUl.js';
 import { css, html } from 'lit';
 import { state, property, query } from 'lit/decorators.js';
 import { MuTransparent } from './mu-transparent.js';
 import { MuRangeThumbValue } from './mu-range-thumb-value.js';
+import '../common-BBjg-zl9.js';
 
 class MuRangeThumb extends MuElement {
     get range() {

package/components/mu-range.d.ts

@@ -29,6 +29,24 @@ type RangeFill = {
 };
 type ChangeEventSrc = 'pointerdown' | 'pointerup' | 'pointermove' | 'keydown' | 'insert';
 type Events = {
+    /**
+     * Emitted before change event
+     */
+    'mu-range-start': CustomEvent<{
+        /**
+         * The source of start event
+         */
+        src: 'pointerdown' | 'keydown';
+    }>;
+    /**
+     * Emitted at the end of change event
+     */
+    'mu-range-end': CustomEvent<{
+        /**
+         * The source of end event
+         */
+        src: 'pointerup' | 'keyup';
+    }>;
     /**
      * Emitted when pointerdown on a non-thumb element and empty-area attribute has a value of "dispatch".
      *
@@ -45,6 +63,9 @@ type Events = {
             name: string;
             value: number;
         }[];
+        /**
+         * The source of change event
+         */
         src: ChangeEventSrc;
     }>;
     /**
@@ -132,11 +153,28 @@ declare class MuRange extends MuElement {
     /**
      * 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;
+    protected get _isPointerDownStart(): boolean;
+    protected get _isKeyDownStart(): boolean;
+    /**
+     * the event that started change event
+     */
+    protected _startEvent?: 'pointerdown' | 'keydown';
+    protected get _hasStarted(): boolean;
     set activeThumb(thumb: RangeThumb | undefined);
     get activeThumb(): RangeThumb | undefined;
     constructor();
     disconnectedCallback(): void;
+    /**
+     * start thumb move
+     */
+    protected _start(data: {
+        activeThumb?: RangeThumb;
+        src: 'pointerdown' | 'keydown';
+    }): void;
+    /**
+     * end thumb move
+     */
+    protected _end(): void;
     /**
      *
      * @returns an array of objects containing the name and value of each thumb
@@ -153,6 +191,12 @@ declare class MuRange extends MuElement {
      * Switches the active thumb for keyboard navigation
      */
     switchNavigationActiveItem(direction: 'next' | 'prev'): boolean;
+    dispatchStartEvent(data: {
+        src: Events['mu-range-start']['detail']['src'];
+    }): void;
+    dispatchEndEvent(data: {
+        src: Events['mu-range-end']['detail']['src'];
+    }): void;
     dispatchChangeEvent(thumbs: {
         name: string;
         value: number;
@@ -202,6 +246,7 @@ declare class MuRange extends MuElement {
      */
     setValueFromString(valueString: string): Promise<void>;
     _keydownHandler: (e: KeyboardEvent) => void;
+    _documentKeyupHandler: () => void;
     _pointerdownHandler: (e: PointerEvent) => void;
     _documentPointerupHandler: (e: PointerEvent) => void;
     _pointermoveHandler: (e: PointerEvent) => void;

package/components/mu-range.js

@@ -1,15 +1,28 @@
-import { M as MuElement, _ as __decorate, t as throttle, d as debounce, w as wait, g as getElementBoundaries } from '../mu-element-CEvBHYiI.js';
+import { M as MuElement, _ as __decorate, g as getElementBoundaries } from '../mu-element-yEZ17QUl.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { MuTransparent } from './mu-transparent.js';
 import { MuRangeFill } from './mu-range-fill.js';
 import { MuRangeThumb } from './mu-range-thumb.js';
+import { t as throttle, d as debounce, w as wait } from '../common-BBjg-zl9.js';
 import './mu-range-thumb-value.js';
 
 class MuRange extends MuElement {
     get isControlled() {
         return this.value !== 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
+     */
+    get _isPointerDownStart() {
+        return this._startEvent === 'pointerdown';
+    }
+    get _isKeyDownStart() {
+        return this._startEvent === 'keydown';
+    }
+    get _hasStarted() {
+        return this._startEvent !== undefined;
+    }
     set activeThumb(thumb) {
         if (thumb &&
             (thumb.element.transparent ||
@@ -64,10 +77,6 @@ class MuRange extends MuElement {
         this._thumbs = [];
         this._thumbsElementsMap = new Map();
         this._thumbsNamesMap = new Map();
-        /**
-         * 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
-         */
-        this._isPointerDown = false;
         this._slotChangeHandler = async () => {
             const previousThumbsElementsMap = new Map(this._thumbsElementsMap);
             this._thumbs = [];
@@ -188,6 +197,7 @@ class MuRange extends MuElement {
             const thumb = this.activeThumb;
             if (this.disabled || this.readonly || !thumb || e.defaultPrevented)
                 return;
+            this.dispatchStartEvent({ src: 'keydown' });
             let increaseKey = 'ArrowRight';
             let decreaseKey = 'ArrowLeft';
             switch (this.axis) {
@@ -212,7 +222,15 @@ class MuRange extends MuElement {
                     break;
             }
             const setValue = (value) => {
+                if (this._hasStarted && !this._isKeyDownStart)
+                    return;
                 e.preventDefault();
+                if (!this._isKeyDownStart) {
+                    this._start({
+                        activeThumb: thumb,
+                        src: 'keydown',
+                    });
+                }
                 this.focus();
                 thumb.element.focused = true;
                 this._setThumbValue({ thumb, value, src: 'keydown' });
@@ -246,19 +264,25 @@ class MuRange extends MuElement {
                     break;
             }
         };
+        this._documentKeyupHandler = () => {
+            this._end();
+        };
         this._pointerdownHandler = (e) => {
-            if (this.disabled || this.readonly || e.defaultPrevented)
+            if (this.disabled ||
+                this.readonly ||
+                e.defaultPrevented ||
+                this._hasStarted)
                 return;
-            this._isPointerDown = true;
-            document.addEventListener('pointermove', this._documentPointermoveHandler);
-            document.addEventListener('pointerup', this._documentPointerupHandler);
             const thumbEl = MuElement.closestPierce('mu-range-thumb', e.target);
             if ((thumbEl && (thumbEl.disabled || thumbEl.readonly)) ||
                 this.emptyArea === 'prevent')
                 return;
             if (thumbEl && !thumbEl.transparent) {
                 const activeThumb = this._thumbsElementsMap.get(thumbEl);
-                this.activeThumb = activeThumb;
+                this._start({
+                    activeThumb,
+                    src: 'pointerdown',
+                });
                 return;
             }
             if (this.emptyArea === 'dispatch') {
@@ -317,18 +341,19 @@ class MuRange extends MuElement {
                         : rightThumb;
             }
             if (candidateThumb) {
+                this._start({
+                    activeThumb: candidateThumb,
+                    src: 'pointerdown',
+                });
                 this._setThumbValue({ thumb: candidateThumb, value, src: 'pointerdown' });
-                this.activeThumb = candidateThumb;
             }
         };
         this._documentPointerupHandler = (e) => {
-            this._isPointerDown = false;
-            document.removeEventListener('pointermove', this._documentPointermoveHandler);
-            document.removeEventListener('pointerup', this._documentPointerupHandler);
-            if (!this.activeThumb)
-                return;
-            const { value } = this._getValuesFromEvent(e);
-            this._setThumbValue({ thumb: this.activeThumb, value, src: 'pointerup' });
+            if (this.activeThumb) {
+                const { value } = this._getValuesFromEvent(e);
+                this._setThumbValue({ thumb: this.activeThumb, value, src: 'pointerup' });
+            }
+            this._end();
         };
         this._pointermoveHandler = (e) => {
             if (!this.activeThumb)
@@ -349,7 +374,7 @@ class MuRange extends MuElement {
                 }
             });
             this.addEventListener('focus', (e) => {
-                if (this._isPointerDown ||
+                if (this._isPointerDownStart ||
                     this.disabled ||
                     this.readonly ||
                     e.defaultPrevented)
@@ -369,6 +394,41 @@ class MuRange extends MuElement {
     disconnectedCallback() {
         document.removeEventListener('pointermove', this._documentPointermoveHandler);
         document.removeEventListener('pointerup', this._documentPointerupHandler);
+        document.removeEventListener('keyup', this._documentKeyupHandler);
+    }
+    /**
+     * start thumb move
+     */
+    _start(data) {
+        if (this._hasStarted)
+            return;
+        this._activeThumb = data.activeThumb;
+        if (!data.activeThumb)
+            return;
+        this._startEvent = data.src;
+        this.dispatchStartEvent({ src: data.src });
+        if (data.src === 'pointerdown') {
+            document.addEventListener('pointermove', this._documentPointermoveHandler);
+            document.addEventListener('pointerup', this._documentPointerupHandler);
+        }
+        if (data.src === 'keydown') {
+            document.addEventListener('keyup', this._documentKeyupHandler);
+        }
+    }
+    /**
+     * end thumb move
+     */
+    _end() {
+        document.removeEventListener('pointermove', this._documentPointermoveHandler);
+        document.removeEventListener('pointerup', this._documentPointerupHandler);
+        document.removeEventListener('keyup', this._documentKeyupHandler);
+        if (this._startEvent === 'pointerdown') {
+            this.dispatchEndEvent({ src: 'pointerup' });
+        }
+        if (this._startEvent === 'keydown') {
+            this.dispatchEndEvent({ src: 'keyup' });
+        }
+        this._startEvent = undefined;
     }
     /**
      *
@@ -414,6 +474,24 @@ class MuRange extends MuElement {
         navigationThumb.element.focused = true;
         return true;
     }
+    dispatchStartEvent(data) {
+        const eventName = 'mu-range-start';
+        this.dispatchEvent(new CustomEvent(eventName, {
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+            detail: data,
+        }));
+    }
+    dispatchEndEvent(data) {
+        const eventName = 'mu-range-end';
+        this.dispatchEvent(new CustomEvent(eventName, {
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+            detail: data,
+        }));
+    }
     dispatchChangeEvent(thumbs = this._thumbs, src) {
         const eventName = 'mu-range-change';
         const data = thumbs.map((thumb) => ({ name: thumb.name, value: thumb.value }));

package/components/mu-select-item.js

@@ -1,6 +1,7 @@
-import { M as MuElement, _ as __decorate } from '../mu-element-CEvBHYiI.js';
+import { M as MuElement, _ as __decorate } from '../mu-element-yEZ17QUl.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
+import '../common-BBjg-zl9.js';
 
 /**
  * This element is designed to be stateless, its purpose is to provide a means of adding custom markup and attributes

package/components/mu-select-items.js

@@ -1,8 +1,9 @@
-import { M as MuElement, E as EventAction, _ as __decorate, g as getElementBoundaries, d as debounce, a as disableElementScroll, e as enableElementScroll } from '../mu-element-CEvBHYiI.js';
+import { M as MuElement, E as EventAction, _ as __decorate, g as getElementBoundaries, d as disableElementScroll, e as enableElementScroll } from '../mu-element-yEZ17QUl.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { MuTransparent } from './mu-transparent.js';
 import { MuSelectItem } from './mu-select-item.js';
+import { d as debounce } from '../common-BBjg-zl9.js';
 
 class MuSelectItems extends MuElement {
     constructor() {

package/components/mu-select-label-content.js

@@ -1,7 +1,8 @@
-import { M as MuElement, _ as __decorate } from '../mu-element-CEvBHYiI.js';
+import { M as MuElement, _ as __decorate } from '../mu-element-yEZ17QUl.js';
 import { css, nothing, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
+import '../common-BBjg-zl9.js';
 
 const types = ['label', 'value', 'autocomplete', 'template'];
 const contentSelector = '[data-is="content"]';

package/components/mu-select-label.js

@@ -1,10 +1,11 @@
-import { M as MuElement, _ as __decorate } from '../mu-element-CEvBHYiI.js';
+import { M as MuElement, _ as __decorate } from '../mu-element-yEZ17QUl.js';
 import { css, html, nothing } from 'lit';
 import './mu-trigger.js';
 import { property, state } from 'lit/decorators.js';
 import { MuTransparent } from './mu-transparent.js';
 import { MuSelectLabelContent } from './mu-select-label-content.js';
 import './mu-icon.js';
+import '../common-BBjg-zl9.js';
 import 'lit/directives/repeat.js';
 
 class MuSelectLabel extends MuElement {

package/components/mu-select.js

@@ -1,9 +1,10 @@
-import { M as MuElement, E as EventAction, _ as __decorate } from '../mu-element-CEvBHYiI.js';
+import { M as MuElement, E as EventAction, _ as __decorate } from '../mu-element-yEZ17QUl.js';
 import { css, html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { MuTransparent } from './mu-transparent.js';
 import { MuSelectItems } from './mu-select-items.js';
 import { MuSelectLabel } from './mu-select-label.js';
+import '../common-BBjg-zl9.js';
 import './mu-select-item.js';
 import './mu-trigger.js';
 import './mu-select-label-content.js';

package/components/mu-sortable-item.js

@@ -1,8 +1,9 @@
-import { M as MuElement, _ as __decorate } from '../mu-element-CEvBHYiI.js';
+import { M as MuElement, _ as __decorate } from '../mu-element-yEZ17QUl.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { MuTransparent } from './mu-transparent.js';
 import { MuSortableTrigger } from './mu-sortable-trigger.js';
+import '../common-BBjg-zl9.js';
 import './mu-icon.js';
 
 class MuSortableItem extends MuElement {

package/components/mu-sortable-trigger.js

@@ -1,6 +1,7 @@
 import { css, html } from 'lit';
-import { M as MuElement } from '../mu-element-CEvBHYiI.js';
+import { M as MuElement } from '../mu-element-yEZ17QUl.js';
 import './mu-icon.js';
+import '../common-BBjg-zl9.js';
 import 'lit/decorators.js';
 
 class MuSortableTrigger extends MuElement {

package/components/mu-sortable.js

@@ -1,9 +1,10 @@
-import { M as MuElement, E as EventAction, t as throttle, _ as __decorate } from '../mu-element-CEvBHYiI.js';
+import { M as MuElement, E as EventAction, _ as __decorate } from '../mu-element-yEZ17QUl.js';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { MuTransparent } from './mu-transparent.js';
 import { MuSortableItem } from './mu-sortable-item.js';
 import { MuSortableTrigger } from './mu-sortable-trigger.js';
+import { t as throttle } from '../common-BBjg-zl9.js';
 import './mu-icon.js';
 
 class MuSortable extends MuElement {

package/components/mu-toast-item.d.ts

@@ -0,0 +1,6 @@
+import 'lit';
+import './mu-element.js';
+import './mu-icon.js';
+export { c as MuToastItem, a as MuToastItemComponent } from '../mu-toast-DfNHcc7U.js';
+import '@mustib/utils/browser';
+import '@mustib/utils';

package/components/mu-toast-item.js

@@ -0,0 +1,229 @@
+import { M as MuElement, _ as __decorate } from '../mu-element-yEZ17QUl.js';
+import { css, nothing, html } from 'lit';
+import './mu-icon.js';
+import { query } from 'lit/decorators.js';
+import { isTemplateResult } from 'lit/directive-helpers.js';
+import { T as TOAST_LOCK_SYMBOL } from '../constants-DPnKJ57t.js';
+import '../common-BBjg-zl9.js';
+
+class MuToastItem extends MuElement {
+    constructor() {
+        super(...arguments);
+        this.eventActionData = undefined;
+        this._addEventActionAttributes = undefined;
+        this.pausedByEvents = new Set();
+    }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        this.toast.emitter.dispatch('state.toast-item.first.rendered', {
+            element: this,
+        }, {
+            lockSymbol: TOAST_LOCK_SYMBOL,
+        });
+    }
+    render() {
+        const pauseHandler = this.toast.interactingBehavior === 'nothing'
+            ? nothing
+            : async (e) => {
+                this.pausedByEvents.add(e.type);
+                await this.toast.pauseProgress();
+                if (this.toast.interactingBehavior === 'reset-progress')
+                    await this.toast.resetProgress();
+            };
+        const resumeHandler = this.toast.interactingBehavior === 'nothing'
+            ? nothing
+            : (e) => {
+                if (e.type === 'pointerleave')
+                    this.pausedByEvents.delete('pointerenter');
+                if (e.type === 'focusout')
+                    this.pausedByEvents.delete('focusin');
+                if (this.pausedByEvents.size === 0) {
+                    this.toast.resumeProgress();
+                }
+            };
+        let spinner = nothing;
+        if (isTemplateResult(this.toast.spinner))
+            spinner = this.toast.spinner;
+        else if (this.toast.spinner)
+            spinner = html `<span id="spinner" part="spinner"></span>`;
+        let labelIcon = nothing;
+        if (isTemplateResult(this.toast.labelIcon))
+            labelIcon = this.toast.labelIcon;
+        else if (typeof this.toast.labelIcon === 'string' &&
+            this.toast.labelIcon !== '')
+            labelIcon = html `
+        <mu-icon
+          id="label-icon"
+          part="label-icon"
+          name="${this.toast.labelIcon}"
+        >
+        </mu-icon>
+      `;
+        let label = nothing;
+        if (isTemplateResult(this.toast.label))
+            label = this.toast.label;
+        else if (this.toast.label)
+            label = html `<span id="label" part="label">${this.toast.label}</span>`;
+        let message = nothing;
+        if (isTemplateResult(this.toast.message))
+            message = this.toast.message;
+        else if (this.toast.message)
+            message = html `<span id="message" part="message"
+        >${this.toast.message}</span
+      >`;
+        let closeBtn = nothing;
+        if (isTemplateResult(this.toast.closeBtn))
+            closeBtn = this.toast.closeBtn;
+        else if (this.toast.closeBtn)
+            closeBtn = html `
+      <button 
+        id="close-btn"
+        part="close-btn"
+        type="button"
+        aria-label="Close notification"
+        @click=${() => this.toast.gracefulRemove()}
+        >
+        <mu-icon name="close"></mu-icon>
+      </button
+    `;
+        let action = nothing;
+        if (typeof this.toast.action === 'function')
+            action = this.toast.action(this.toast);
+        else if (this.toast.action)
+            action = html `
+        <button
+          id="action-btn"
+          part="action-btn"
+          type="button"
+          @click=${() => this.toast.action.onClick(this.toast)}
+        >
+          ${this.toast.action.label}
+        </button>
+      `;
+        return html `
+      <div
+        id="container"
+        part="container"
+        style="
+          --hue: ${this.toast.colorHue};
+        "
+        role=${this.toast.role}
+        aria-atomic="true"
+        aria-live=${this.toast.role === 'alert' ? 'assertive' : 'polite'}
+        @pointerenter=${pauseHandler}
+        @pointerleave=${resumeHandler}
+        @focusin=${pauseHandler}
+        @focusout=${resumeHandler}
+      >
+        ${labelIcon}
+
+        <p id="content" part="content">
+          ${label} ${message} ${spinner} ${action}
+        </p>
+
+        ${closeBtn}
+
+        <div id="progress" part="progress"></div>
+      </div>
+    `;
+    }
+}
+MuToastItem.styles = [
+    MuElement.cssBase,
+    css `
+      #container {
+        --color: hsl(var(--hue), 100%, 75%);
+        --bg: hsl(var(--hue), 50%, 20%);
+        position: relative;
+        box-shadow: 0 0 5px 0 var(--color);
+        pointer-events: auto;
+        padding: var(--mu-base-rem);
+        display: flex;
+        gap: var(--mu-base-rem);
+        align-items: center;
+        transition: all 0.3s;
+        transform-origin: 100%;
+        border-radius: var(--mu-base-rem);
+        overflow: hidden;
+        color: var(--color);
+        --mu-icon-fill: var(--color);
+        background-color: var(--bg);
+      }
+
+      #progress {
+        position: absolute;
+        pointer-events: none;
+        visibility: hidden;
+        inset: 0;
+        top: unset;
+        height: 2px;
+        background-color: var(--color);
+        user-select: none;
+      }
+
+      #action-btn {
+        margin-inline: 0.5ch;
+        background-color: transparent;
+        outline: 1px solid var(--color);
+        color: var(--color);
+        padding: 0 0.5ch;
+        border-radius: 0.5ch;
+        transition: inherit;
+        cursor: pointer;
+      }
+
+      #action-btn:hover,
+      #action-btn:focus-visible {
+        background-color: var(--color);
+        color: var(--bg);
+      }
+
+      #close-btn {
+        margin-inline-start: auto;
+        background-color: transparent;
+        display: grid;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
+
+      #close-btn:focus-visible {
+        outline: 1px solid var(--color);
+        outline-offset: 2px;
+      }
+
+      #label {
+        font-weight: bold;
+      }
+
+      #spinner {
+        animation: spin 1s linear infinite;
+        display: inline-grid;
+        border-top: 2px solid;
+        border-left: 2px solid;
+        width: 1rem;
+        translate: 0 12.5%;
+        aspect-ratio: 1;
+        border-radius: 50%;
+      }
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      @media (prefers-color-scheme: light) {
+        #container {
+          --bg: hsl(var(--hue), 100%, 75%);
+          --color: hsl(var(--hue), 50%, 20%);
+        }
+      }
+    `,
+];
+__decorate([
+    query('#progress', true)
+], MuToastItem.prototype, "progressElement", void 0);
+MuToastItem.register('mu-toast-item');
+
+export { MuToastItem };

package/components/mu-toast.d.ts

@@ -0,0 +1,6 @@
+import 'lit';
+import './mu-element.js';
+export { b as MuToast, M as MuToastComponent } from '../mu-toast-DfNHcc7U.js';
+import '@mustib/utils/browser';
+import './mu-icon.js';
+import '@mustib/utils';