@cute-widgets/base 20.0.1

package/fesm2022/cute-widgets-base-sort.mjs

@@ -0,0 +1,639 @@
+import { SPACE, ENTER } from '@angular/cdk/keycodes';
+import * as i0 from '@angular/core';
+import { InjectionToken, isDevMode, EventEmitter, booleanAttribute, Output, Input, Optional, Inject, Directive, Injectable, SkipSelf, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { ReplaySubject, Subject, merge } from 'rxjs';
+import { trigger, transition, query, animateChild, state, animate, keyframes, style } from '@angular/animations';
+import { AnimationDurations, AnimationCurves } from '@cute-widgets/base/core';
+import * as i3 from '@angular/cdk/a11y';
+import { CommonModule } from '@angular/common';
+
+/** @docs-private */
+function getSortDuplicateSortableIdError(id) {
+    return Error(`Cannot have two CuteSortables with the same id (${id}).`);
+}
+/** @docs-private */
+function getSortHeaderNotContainedWithinSortError() {
+    return Error(`MatSortHeader must be placed within a parent element with the CuteSort directive.`);
+}
+/** @docs-private */
+function getSortHeaderMissingIdError() {
+    return Error(`CuteSortHeader must be provided with a unique id.`);
+}
+/** @docs-private */
+function getSortInvalidDirectionError(direction) {
+    return Error(`${direction} is not a valid sort direction ('asc' or 'desc').`);
+}
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+/** Injection token to be used to override the default options for `mat-sort`. */
+const CUTE_SORT_DEFAULT_OPTIONS = new InjectionToken('CUTE_SORT_DEFAULT_OPTIONS');
+/** Container for MatSortables to manage the sort state and provide default sort parameters. */
+class CuteSort {
+    /** The sort direction of the currently active CuteSortable. */
+    get direction() { return this._direction; }
+    set direction(direction) {
+        if (direction &&
+            direction !== 'asc' &&
+            direction !== 'desc' &&
+            isDevMode()) {
+            throw getSortInvalidDirectionError(direction);
+        }
+        this._direction = direction;
+    }
+    constructor(_defaultOptions) {
+        this._defaultOptions = _defaultOptions;
+        this._initializedStream = new ReplaySubject(1);
+        /** Collection of all registered sortables that this directive manages. */
+        this.sortables = new Map();
+        /** Used to notify any child components listening to state changes. */
+        this._stateChanges = new Subject();
+        /**
+         * The direction to set when a CuteSortable is initially sorted.
+         * May be overridden by the CuteSortable's sort start.
+         */
+        this.start = 'asc';
+        this._direction = '';
+        /**
+         * Whether to disable the user from clearing the sort by finishing the sort direction cycle.
+         * May be overridden by the CuteSortable's disable clear input.
+         */
+        this.disableClear = false;
+        /** Whether the sortable is disabled. */
+        this.disabled = false;
+        /** Event emitted when the user changes either the active sort or sort direction. */
+        this.sortChange = new EventEmitter();
+        /** Emits when the paginator is initialized. */
+        this.initialized$ = this._initializedStream;
+    }
+    /**
+     * Register function to be used by the contained CuteSortables. Adds the CuteSortable to the
+     * collection of CuteSortables.
+     */
+    register(sortable) {
+        if (isDevMode()) {
+            if (!sortable.id) {
+                throw getSortHeaderMissingIdError();
+            }
+            if (this.sortables.has(sortable.id)) {
+                throw getSortDuplicateSortableIdError(sortable.id);
+            }
+        }
+        this.sortables.set(sortable.id, sortable);
+    }
+    /**
+     * Unregister function to be used by the contained CuteSortables. Removes the CuteSortable from the
+     * collection of contained CuteSortables.
+     */
+    deregister(sortable) {
+        this.sortables.delete(sortable.id);
+    }
+    /** Sets the active sort id and determines the new sort direction. */
+    sort(sortable) {
+        if (this.active != sortable.id) {
+            this.active = sortable.id;
+            this.direction = sortable.start ? sortable.start : this.start;
+        }
+        else {
+            this.direction = this.getNextSortDirection(sortable);
+        }
+        this.sortChange.emit({ active: this.active, direction: this.direction });
+    }
+    /** Returns the next sort direction of the active sortable, checking for potential overrides. */
+    getNextSortDirection(sortable) {
+        if (!sortable) {
+            return '';
+        }
+        // Get the sort direction cycle with the potential sortable overrides.
+        const disableClear = sortable?.disableClear ?? this.disableClear ?? !!this._defaultOptions?.disableClear;
+        let sortDirectionCycle = getSortDirectionCycle(sortable.start || this.start, disableClear);
+        // Get and return the next direction in the cycle
+        let nextDirectionIndex = sortDirectionCycle.indexOf(this.direction) + 1;
+        if (nextDirectionIndex >= sortDirectionCycle.length) {
+            nextDirectionIndex = 0;
+        }
+        return sortDirectionCycle[nextDirectionIndex];
+    }
+    ngOnInit() {
+        this._initializedStream.next();
+    }
+    ngOnChanges(changes) {
+        this._stateChanges.next();
+    }
+    ngOnDestroy() {
+        this._stateChanges.complete();
+        this._initializedStream.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteSort, deps: [{ token: CUTE_SORT_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.15", type: CuteSort, isStandalone: true, selector: "[cuteSort]", inputs: { active: ["cuteSortActive", "active"], start: ["cuteSortStart", "start"], direction: ["cuteSortDirection", "direction"], disableClear: ["cuteSortDisableClear", "disableClear", booleanAttribute], disabled: ["cuteSortDisabled", "disabled", booleanAttribute] }, outputs: { sortChange: "cuteSortChange" }, host: { classAttribute: "cute-sort" }, exportAs: ["cuteSort"], usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteSort, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cuteSort]',
+                    exportAs: 'cuteSort',
+                    host: {
+                        'class': 'cute-sort',
+                    },
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CUTE_SORT_DEFAULT_OPTIONS]
+                }] }], propDecorators: { active: [{
+                type: Input,
+                args: ['cuteSortActive']
+            }], start: [{
+                type: Input,
+                args: ['cuteSortStart']
+            }], direction: [{
+                type: Input,
+                args: ['cuteSortDirection']
+            }], disableClear: [{
+                type: Input,
+                args: [{ alias: 'cuteSortDisableClear', transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ alias: 'cuteSortDisabled', transform: booleanAttribute }]
+            }], sortChange: [{
+                type: Output,
+                args: ['cuteSortChange']
+            }] } });
+/** Returns the sort direction cycle to use given the provided parameters of order and clear. */
+function getSortDirectionCycle(start, disableClear) {
+    let sortOrder = ['asc', 'desc'];
+    if (start == 'desc') {
+        sortOrder.reverse();
+    }
+    if (!disableClear) {
+        sortOrder.push('');
+    }
+    return sortOrder;
+}
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+const SORT_ANIMATION_TRANSITION = AnimationDurations.ENTERING + ' ' + AnimationCurves.STANDARD_CURVE;
+/**
+ * Animations used by CuteSort.
+ * @docs-private
+ */
+const cuteSortAnimations = {
+    /** Animation that moves the sort indicator. */
+    indicator: trigger('indicator', [
+        state('active-asc, asc', style({ transform: 'translateY(0px)' })),
+        // 10px is the height of the sort indicator, minus the width of the pointers
+        state('active-desc, desc', style({ transform: 'translateY(10px)' })),
+        transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION)),
+    ]),
+    /** Animation that rotates the left pointer of the indicator based on the sorting direction. */
+    leftPointer: trigger('leftPointer', [
+        state('active-asc, asc', style({ transform: 'rotate(-45deg)' })),
+        state('active-desc, desc', style({ transform: 'rotate(45deg)' })),
+        transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION)),
+    ]),
+    /** Animation that rotates the right pointer of the indicator based on the sorting direction. */
+    rightPointer: trigger('rightPointer', [
+        state('active-asc, asc', style({ transform: 'rotate(45deg)' })),
+        state('active-desc, desc', style({ transform: 'rotate(-45deg)' })),
+        transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION)),
+    ]),
+    /** Animation that controls the arrow opacity. */
+    arrowOpacity: trigger('arrowOpacity', [
+        state('desc-to-active, asc-to-active, active', style({ opacity: 1 })),
+        state('desc-to-hint, asc-to-hint, hint', style({ opacity: 0.54 })),
+        state('hint-to-desc, active-to-desc, desc, hint-to-asc, active-to-asc, asc, void', style({ opacity: 0 })),
+        // Transition between all states except for immediate transitions
+        transition('* => asc, * => desc, * => active, * => hint, * => void', animate('0ms')),
+        transition('* <=> *', animate(SORT_ANIMATION_TRANSITION)),
+    ]),
+    /**
+     * Animation for the translation of the arrow as a whole. States are separated into two
+     * groups: ones with animations and others that are immediate. Immediate states are asc, desc,
+     * peek, and active. The other states define a specific animation (source-to-destination)
+     * and are determined as a function of their prev user-perceived state and what the next state
+     * should be.
+     */
+    arrowPosition: trigger('arrowPosition', [
+        // Hidden Above => Hint Center
+        transition('* => desc-to-hint, * => desc-to-active', animate(SORT_ANIMATION_TRANSITION, keyframes([style({ transform: 'translateY(-25%)' }), style({ transform: 'translateY(0)' })]))),
+        // Hint Center => Hidden Below
+        transition('* => hint-to-desc, * => active-to-desc', animate(SORT_ANIMATION_TRANSITION, keyframes([style({ transform: 'translateY(0)' }), style({ transform: 'translateY(25%)' })]))),
+        // Hidden Below => Hint Center
+        transition('* => asc-to-hint, * => asc-to-active', animate(SORT_ANIMATION_TRANSITION, keyframes([style({ transform: 'translateY(25%)' }), style({ transform: 'translateY(0)' })]))),
+        // Hint Center => Hidden Above
+        transition('* => hint-to-asc, * => active-to-asc', animate(SORT_ANIMATION_TRANSITION, keyframes([style({ transform: 'translateY(0)' }), style({ transform: 'translateY(-25%)' })]))),
+        state('desc-to-hint, asc-to-hint, hint, desc-to-active, asc-to-active, active', style({ transform: 'translateY(0)' })),
+        state('hint-to-desc, active-to-desc, desc', style({ transform: 'translateY(-25%)' })),
+        state('hint-to-asc, active-to-asc, asc', style({ transform: 'translateY(25%)' })),
+    ]),
+    /** Necessary trigger that calls animate on children animations. */
+    allowChildren: trigger('allowChildren', [
+        transition('* <=> *', [query('@*', animateChild(), { optional: true })]),
+    ]),
+};
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+/**
+ * To modify the labels and text displayed, create a new instance of CuteSortHeaderIntl and
+ * include it in a custom provider.
+ */
+class CuteSortHeaderIntl {
+    constructor() {
+        /**
+         * Stream that emits whenever the labels here are changed. Use this to notify
+         * components if the labels have changed after initialization.
+         */
+        this.changes = new Subject();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteSortHeaderIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteSortHeaderIntl, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteSortHeaderIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/** @docs-private */
+function CUTE_SORT_HEADER_INTL_PROVIDER_FACTORY(parentIntl) {
+    return parentIntl || new CuteSortHeaderIntl();
+}
+/** @docs-private */
+const CUTE_SORT_HEADER_INTL_PROVIDER = {
+    // If there is already an MatSortHeaderIntl available, use that. Otherwise, provide a new one.
+    provide: CuteSortHeaderIntl,
+    deps: [[new Optional(), new SkipSelf(), CuteSortHeaderIntl]],
+    useFactory: CUTE_SORT_HEADER_INTL_PROVIDER_FACTORY,
+};
+
+/**
+ * Applies sorting behavior (click to change sort) and styles to an element, including an
+ * arrow to display the current sort direction.
+ *
+ * Must be provided with an id and contained within a parent `CuteSort` directive.
+ *
+ * If used on header cells in a CdkTable, it will automatically default its id from its containing
+ * column definition.
+ */
+class CuteSortHeader {
+    /**
+     * Description applied to MatSortHeader's button element with aria-describedby. This text should
+     * describe the action that will occur when the user clicks the sort header.
+     */
+    get sortActionDescription() {
+        return this._sortActionDescription;
+    }
+    set sortActionDescription(value) {
+        this._updateSortActionDescription(value);
+    }
+    constructor(
+    /**
+     * @deprecated `_intl` parameter isn't being used anymore, and it'll be removed.
+     * @breaking-change 13.0.0
+     */
+    _intl, _changeDetectorRef, 
+    // `CuteSort` is not optionally injected, but just asserted manually w/ better error.
+    // tslint:disable-next-line: lightweight-tokens
+    _sort, _columnDef, _focusMonitor, _elementRef, 
+    /** @breaking-change 14.0.0 _ariaDescriber will be required. */
+    _ariaDescriber, defaultOptions) {
+        this._intl = _intl;
+        this._changeDetectorRef = _changeDetectorRef;
+        this._sort = _sort;
+        this._columnDef = _columnDef;
+        this._focusMonitor = _focusMonitor;
+        this._elementRef = _elementRef;
+        this._ariaDescriber = _ariaDescriber;
+        /**
+         * The element with role="button" inside this component's view. We need this to apply
+         * a description with AriaDescriber.
+         */
+        this._sortButton = null;
+        /**
+         * Flag set to true when the indicator should be displayed while the sort is not active. Used to
+         * provide an affordance that the header is sortable by showing on focus and hover.
+         */
+        this._showIndicatorHint = false;
+        /**
+         * The view transition state of the arrow (translation/ opacity) - indicates its `from` and `to`
+         * position through the animation. If animations are currently disabled, the `fromState` is removed
+         * so that there is no animation displayed.
+         */
+        this._viewState = {};
+        /** The direction the arrow should be facing, according to the current state. */
+        this._arrowDirection = '';
+        /**
+         * Whether the view state animation should show the transition between the `from` and `to` states.
+         */
+        this._disableViewStateAnimation = false;
+        /**
+         * ID of this sort header. If used within the context of a CdkColumnDef, this will default to
+         * the column's name.
+         */
+        this.id = "";
+        /** Sets the position of the arrow that displays when sorted. */
+        this.arrowPosition = 'after';
+        /** Overrides the sort start value of the containing CuteSort for this CuteSortable. */
+        this.start = "";
+        /** whether the sort header is disabled. */
+        this.disabled = false;
+        // Default the action description to "Sort" because it's better than nothing.
+        // Without a description, the button's label comes from the sort header text content,
+        // which doesn't give any indication that it performs a sorting operation.
+        this._sortActionDescription = 'Sort';
+        /** Overrides the disable clear value of the containing CuteSort for this CuteSortable. */
+        this.disableClear = false;
+        // Note that we use a string token for the `_columnDef`, because the value is provided both by
+        // `material/table` and `cdk/table` and we can't have the CDK depending on Material,
+        // and we want to avoid having the sort header depending on the CDK table because
+        // of this single reference.
+        if (!_sort && isDevMode()) {
+            throw getSortHeaderNotContainedWithinSortError();
+        }
+        if (defaultOptions?.arrowPosition) {
+            this.arrowPosition = defaultOptions?.arrowPosition;
+        }
+        this._handleStateChanges();
+    }
+    ngOnInit() {
+        if (!this.id && this._columnDef) {
+            this.id = this._columnDef.name;
+        }
+        // Initialize the direction of the arrow and set the view state to be immediately that state.
+        this._updateArrowDirection();
+        this._setAnimationTransitionState({
+            toState: this._isSorted() ? 'active' : this._arrowDirection,
+        });
+        this._sort.register(this);
+        this._sortButton = this._elementRef.nativeElement.querySelector('.cute-sort-header-container');
+        this._updateSortActionDescription(this._sortActionDescription);
+    }
+    ngAfterViewInit() {
+        // We use the focus monitor because we also want to style
+        // things differently based on the focus origin.
+        this._focusMonitor.monitor(this._elementRef, true).subscribe(origin => {
+            const newState = !!origin;
+            if (newState !== this._showIndicatorHint) {
+                this._setIndicatorHintVisible(newState);
+                this._changeDetectorRef.markForCheck();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._focusMonitor.stopMonitoring(this._elementRef);
+        this._sort.deregister(this);
+        this._rerenderSubscription?.unsubscribe();
+    }
+    /**
+     * Sets the "hint" state such that the arrow will be semi-transparently displayed as a hint to the
+     * user showing what the active sort will become. If set to false, the arrow will fade away.
+     */
+    _setIndicatorHintVisible(visible) {
+        // No-op if the sort header is disabled - should not make the hint visible.
+        if (this._isDisabled() && visible) {
+            return;
+        }
+        this._showIndicatorHint = visible;
+        if (!this._isSorted()) {
+            this._updateArrowDirection();
+            if (this._showIndicatorHint) {
+                this._setAnimationTransitionState({ fromState: this._arrowDirection, toState: 'hint' });
+            }
+            else {
+                this._setAnimationTransitionState({ fromState: 'hint', toState: this._arrowDirection });
+            }
+        }
+    }
+    /**
+     * Sets the animation transition view state for the arrow's position and opacity. If the
+     * `disableViewStateAnimation` flag is set to true, the `fromState` will be ignored so that
+     * no animation appears.
+     */
+    _setAnimationTransitionState(viewState) {
+        this._viewState = viewState || {};
+        // If the animation for arrow position state (opacity/translation) should be disabled,
+        // remove the fromState so that it jumps right to the toState.
+        if (this._disableViewStateAnimation) {
+            this._viewState = { toState: viewState.toState };
+        }
+    }
+    /** Triggers the sort on this sort header and removes the indicator hint. */
+    _toggleOnInteraction() {
+        this._sort.sort(this);
+        // Do not show the animation if the header was already shown in the right position.
+        if (this._viewState.toState === 'hint' || this._viewState.toState === 'active') {
+            this._disableViewStateAnimation = true;
+        }
+    }
+    _handleClick() {
+        if (!this._isDisabled()) {
+            this._sort.sort(this);
+        }
+    }
+    _handleKeydown(event) {
+        if (!this._isDisabled() && (event.keyCode === SPACE || event.keyCode === ENTER)) {
+            event.preventDefault();
+            this._toggleOnInteraction();
+        }
+    }
+    /** Whether this MatSortHeader is currently sorted in either ascending or descending order. */
+    _isSorted() {
+        return (this._sort.active == this.id &&
+            (this._sort.direction === 'asc' || this._sort.direction === 'desc'));
+    }
+    /** Returns the animation state for the arrow direction (indicator and pointers). */
+    _getArrowDirectionState() {
+        return `${this._isSorted() ? 'active-' : ''}${this._arrowDirection}`;
+    }
+    /** Returns the arrow position state (opacity, translation). */
+    _getArrowViewState() {
+        const fromState = this._viewState.fromState;
+        return (fromState ? `${fromState}-to-` : '') + this._viewState.toState;
+    }
+    /**
+     * Updates the direction the arrow should be pointing. If it is not sorted, the arrow should be
+     * facing the start direction. Otherwise, if it is sorted, the arrow should point in the currently
+     * active sorted direction. The reason this is updated through a function is because the direction
+     * should only be changed at specific times - when deactivated but the hint is displayed and when
+     * the sort is active and the direction changes. Otherwise, the arrow's direction should linger
+     * in cases such as the sort becoming deactivated but we want to animate the arrow away while
+     * preserving its direction, even though the next sort direction is actually different and should
+     * only be changed once the arrow displays again (hint or activation).
+     */
+    _updateArrowDirection() {
+        this._arrowDirection = this._isSorted() ? this._sort.direction : this.start || this._sort.start;
+    }
+    _isDisabled() {
+        return this._sort.disabled || this.disabled;
+    }
+    /**
+     * Gets the aria-sort attribute that should be applied to this sort header. If this header
+     * is not sorted, returns null so that the attribute is removed from the host element. Aria spec
+     * says that the aria-sort property should only be present on one header at a time, so removing
+     * ensures this is true.
+     */
+    _getAriaSortAttribute() {
+        if (!this._isSorted()) {
+            return 'none';
+        }
+        return this._sort.direction == 'asc' ? 'ascending' : 'descending';
+    }
+    /** Whether the arrow inside the sort header should be rendered. */
+    _renderArrow() {
+        return !this._isDisabled() || this._isSorted();
+    }
+    _updateSortActionDescription(newDescription) {
+        // We use AriaDescriber for the sort button instead of setting an `aria-label` because some
+        // screen readers (notably VoiceOver) will read both the column header *and* the button's label
+        // for every *cell* in the table, creating a lot of unnecessary noise.
+        // If _sortButton is undefined, the component hasn't been initialized yet so there's
+        // nothing to update in the DOM.
+        if (this._sortButton) {
+            // removeDescription will no-op if there is no existing message.
+            // TODO(jelbourn): remove optional chaining when AriaDescriber is required.
+            this._ariaDescriber?.removeDescription(this._sortButton, this._sortActionDescription);
+            this._ariaDescriber?.describe(this._sortButton, newDescription);
+        }
+        this._sortActionDescription = newDescription;
+    }
+    /** Handles changes in the sorting state. */
+    _handleStateChanges() {
+        this._rerenderSubscription = merge(this._sort.sortChange, this._sort._stateChanges, this._intl.changes).subscribe(() => {
+            if (this._isSorted()) {
+                this._updateArrowDirection();
+                // Do not show the animation if the header was already shown in the right position.
+                if (this._viewState.toState === 'hint' || this._viewState.toState === 'active') {
+                    this._disableViewStateAnimation = true;
+                }
+                this._setAnimationTransitionState({ fromState: this._arrowDirection, toState: 'active' });
+                this._showIndicatorHint = false;
+            }
+            // If this header was recently active and now no longer sorted, animate away the arrow.
+            if (!this._isSorted() && this._viewState && this._viewState.toState === 'active') {
+                this._disableViewStateAnimation = false;
+                this._setAnimationTransitionState({ fromState: 'active', toState: this._arrowDirection });
+            }
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteSortHeader, deps: [{ token: CuteSortHeaderIntl }, { token: i0.ChangeDetectorRef }, { token: CuteSort, optional: true }, { token: 'CUTE_SORT_HEADER_COLUMN_DEF', optional: true }, { token: i3.FocusMonitor }, { token: i0.ElementRef }, { token: i3.AriaDescriber, optional: true }, { token: CUTE_SORT_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CuteSortHeader, isStandalone: true, selector: "[cute-sort-header]", inputs: { id: ["cute-sort-header", "id"], arrowPosition: "arrowPosition", start: "start", disabled: ["disabled", "disabled", booleanAttribute], sortActionDescription: "sortActionDescription", disableClear: ["disableClear", "disableClear", booleanAttribute] }, host: { listeners: { "click": "_handleClick()", "keydown": "_handleKeydown($event)", "mouseenter": "_setIndicatorHintVisible(true)", "mouseleave": "_setIndicatorHintVisible(false)" }, properties: { "attr.aria-sort": "_getAriaSortAttribute()", "class.cute-sort-header-disabled": "_isDisabled()" }, classAttribute: "cute-sort-header" }, exportAs: ["cuteSortHeader"], ngImport: i0, template: "<!--\r\n  We set the `tabindex` on an element inside the table header, rather than the header itself,\r\n  because of a bug in NVDA where having a `tabindex` on a `th` breaks keyboard navigation in the\r\n  table (see https://github.com/nvaccess/nvda/issues/7718). This allows for the header to both\r\n  be focusable, and have screen readers read out its `aria-sort` state. We prefer this approach\r\n  over having a button with an `aria-label` inside the header, because the button's `aria-label`\r\n  will be read out as the user is navigating the table's cell (see #13012).\r\n\r\n  The approach is based off of: https://dequeuniversity.com/library/aria/tables/sf-sortable-grid\r\n-->\r\n<div class=\"cute-sort-header-container cute-focus-indicator\"\r\n     [class.cute-sort-header-sorted]=\"_isSorted()\"\r\n     [class.cute-sort-header-position-before]=\"arrowPosition === 'before'\"\r\n     [attr.tabindex]=\"_isDisabled() ? null : 0\"\r\n     [attr.role]=\"_isDisabled() ? null : 'button'\">\r\n\r\n  <!--\r\n    TODO(crisbeto): this div isn't strictly necessary, but we have to keep it due to a large\r\n    number of screenshot diff failures. It should be removed eventually. Note that the difference\r\n    isn't visible with a shorter header, but once it breaks up into multiple lines, this element\r\n    causes it to be center-aligned, whereas removing it will keep the text to the left.\r\n  -->\r\n  <div class=\"cute-sort-header-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <!-- Disable animations while a current animation is running -->\r\n  @if (_renderArrow()) {\r\n    <div class=\"cute-sort-header-arrow\"\r\n         [@arrowOpacity]=\"_getArrowViewState()\"\r\n         [@arrowPosition]=\"_getArrowViewState()\"\r\n         [@allowChildren]=\"_getArrowDirectionState()\"\r\n         (@arrowPosition.start)=\"_disableViewStateAnimation = true\"\r\n         (@arrowPosition.done)=\"_disableViewStateAnimation = false\">\r\n      <div class=\"cute-sort-header-stem\"></div>\r\n      <div class=\"cute-sort-header-indicator\" [@indicator]=\"_getArrowDirectionState()\">\r\n        <div class=\"cute-sort-header-pointer-left\" [@leftPointer]=\"_getArrowDirectionState()\"></div>\r\n        <div class=\"cute-sort-header-pointer-right\" [@rightPointer]=\"_getArrowDirectionState()\"></div>\r\n        <div class=\"cute-sort-header-pointer-middle\"></div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".cute-sort-header-container{display:flex;cursor:pointer;align-items:center;letter-spacing:normal;outline:0}[cute-sort-header].cdk-keyboard-focused .cute-sort-header-container,[cute-sort-header].cdk-program-focused .cute-sort-header-container{border-bottom:solid 1px currentColor}.cute-sort-header-disabled .cute-sort-header-container{cursor:default}.cute-sort-header-container:before{margin:calc(calc(var(--cute-focus-indicator-border-width, 1px) + 2px) * -1)}.cute-sort-header-content{text-align:center;display:flex;align-items:center}.cute-sort-header-position-before{flex-direction:row-reverse}.cute-sort-header-arrow{height:12px;width:12px;min-width:12px;position:relative;display:flex;opacity:0}.cute-sort-header-arrow,[dir=rtl] .cute-sort-header-position-before .cute-sort-header-arrow{margin:0 0 0 6px}.cute-sort-header-position-before .cute-sort-header-arrow,[dir=rtl] .cute-sort-header-arrow{margin:0 6px 0 0}.cute-sort-header-stem{background:currentColor;height:10px;width:2px;margin:auto;display:flex;align-items:center}@media (forced-colors: active){.cute-sort-header-stem{width:0;border-left:solid 2px}}.cute-sort-header-indicator{width:100%;height:2px;display:flex;align-items:center;position:absolute;top:0;left:0}.cute-sort-header-pointer-middle{margin:auto;height:2px;width:2px;background:currentColor;transform:rotate(45deg)}@media (forced-colors: active){.cute-sort-header-pointer-middle{width:0;height:0;border-top:solid 2px;border-left:solid 2px}}.cute-sort-header-pointer-left,.cute-sort-header-pointer-right{background:currentColor;width:6px;height:2px;position:absolute;top:0}@media (forced-colors: active){.cute-sort-header-pointer-left,.cute-sort-header-pointer-right{width:0;height:0;border-left:solid 6px;border-top:solid 2px}}.cute-sort-header-pointer-left{transform-origin:right;left:0}.cute-sort-header-pointer-right{transform-origin:left;right:0}\n"], animations: [
+            cuteSortAnimations.indicator,
+            cuteSortAnimations.leftPointer,
+            cuteSortAnimations.rightPointer,
+            cuteSortAnimations.arrowOpacity,
+            cuteSortAnimations.arrowPosition,
+            cuteSortAnimations.allowChildren,
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteSortHeader, decorators: [{
+            type: Component,
+            args: [{ selector: '[cute-sort-header]', exportAs: 'cuteSortHeader', host: {
+                        'class': 'cute-sort-header',
+                        '(click)': '_handleClick()',
+                        '(keydown)': '_handleKeydown($event)',
+                        '(mouseenter)': '_setIndicatorHintVisible(true)',
+                        '(mouseleave)': '_setIndicatorHintVisible(false)',
+                        '[attr.aria-sort]': '_getAriaSortAttribute()',
+                        '[class.cute-sort-header-disabled]': '_isDisabled()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        cuteSortAnimations.indicator,
+                        cuteSortAnimations.leftPointer,
+                        cuteSortAnimations.rightPointer,
+                        cuteSortAnimations.arrowOpacity,
+                        cuteSortAnimations.arrowPosition,
+                        cuteSortAnimations.allowChildren,
+                    ], standalone: true, template: "<!--\r\n  We set the `tabindex` on an element inside the table header, rather than the header itself,\r\n  because of a bug in NVDA where having a `tabindex` on a `th` breaks keyboard navigation in the\r\n  table (see https://github.com/nvaccess/nvda/issues/7718). This allows for the header to both\r\n  be focusable, and have screen readers read out its `aria-sort` state. We prefer this approach\r\n  over having a button with an `aria-label` inside the header, because the button's `aria-label`\r\n  will be read out as the user is navigating the table's cell (see #13012).\r\n\r\n  The approach is based off of: https://dequeuniversity.com/library/aria/tables/sf-sortable-grid\r\n-->\r\n<div class=\"cute-sort-header-container cute-focus-indicator\"\r\n     [class.cute-sort-header-sorted]=\"_isSorted()\"\r\n     [class.cute-sort-header-position-before]=\"arrowPosition === 'before'\"\r\n     [attr.tabindex]=\"_isDisabled() ? null : 0\"\r\n     [attr.role]=\"_isDisabled() ? null : 'button'\">\r\n\r\n  <!--\r\n    TODO(crisbeto): this div isn't strictly necessary, but we have to keep it due to a large\r\n    number of screenshot diff failures. It should be removed eventually. Note that the difference\r\n    isn't visible with a shorter header, but once it breaks up into multiple lines, this element\r\n    causes it to be center-aligned, whereas removing it will keep the text to the left.\r\n  -->\r\n  <div class=\"cute-sort-header-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <!-- Disable animations while a current animation is running -->\r\n  @if (_renderArrow()) {\r\n    <div class=\"cute-sort-header-arrow\"\r\n         [@arrowOpacity]=\"_getArrowViewState()\"\r\n         [@arrowPosition]=\"_getArrowViewState()\"\r\n         [@allowChildren]=\"_getArrowDirectionState()\"\r\n         (@arrowPosition.start)=\"_disableViewStateAnimation = true\"\r\n         (@arrowPosition.done)=\"_disableViewStateAnimation = false\">\r\n      <div class=\"cute-sort-header-stem\"></div>\r\n      <div class=\"cute-sort-header-indicator\" [@indicator]=\"_getArrowDirectionState()\">\r\n        <div class=\"cute-sort-header-pointer-left\" [@leftPointer]=\"_getArrowDirectionState()\"></div>\r\n        <div class=\"cute-sort-header-pointer-right\" [@rightPointer]=\"_getArrowDirectionState()\"></div>\r\n        <div class=\"cute-sort-header-pointer-middle\"></div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".cute-sort-header-container{display:flex;cursor:pointer;align-items:center;letter-spacing:normal;outline:0}[cute-sort-header].cdk-keyboard-focused .cute-sort-header-container,[cute-sort-header].cdk-program-focused .cute-sort-header-container{border-bottom:solid 1px currentColor}.cute-sort-header-disabled .cute-sort-header-container{cursor:default}.cute-sort-header-container:before{margin:calc(calc(var(--cute-focus-indicator-border-width, 1px) + 2px) * -1)}.cute-sort-header-content{text-align:center;display:flex;align-items:center}.cute-sort-header-position-before{flex-direction:row-reverse}.cute-sort-header-arrow{height:12px;width:12px;min-width:12px;position:relative;display:flex;opacity:0}.cute-sort-header-arrow,[dir=rtl] .cute-sort-header-position-before .cute-sort-header-arrow{margin:0 0 0 6px}.cute-sort-header-position-before .cute-sort-header-arrow,[dir=rtl] .cute-sort-header-arrow{margin:0 6px 0 0}.cute-sort-header-stem{background:currentColor;height:10px;width:2px;margin:auto;display:flex;align-items:center}@media (forced-colors: active){.cute-sort-header-stem{width:0;border-left:solid 2px}}.cute-sort-header-indicator{width:100%;height:2px;display:flex;align-items:center;position:absolute;top:0;left:0}.cute-sort-header-pointer-middle{margin:auto;height:2px;width:2px;background:currentColor;transform:rotate(45deg)}@media (forced-colors: active){.cute-sort-header-pointer-middle{width:0;height:0;border-top:solid 2px;border-left:solid 2px}}.cute-sort-header-pointer-left,.cute-sort-header-pointer-right{background:currentColor;width:6px;height:2px;position:absolute;top:0}@media (forced-colors: active){.cute-sort-header-pointer-left,.cute-sort-header-pointer-right{width:0;height:0;border-left:solid 6px;border-top:solid 2px}}.cute-sort-header-pointer-left{transform-origin:right;left:0}.cute-sort-header-pointer-right{transform-origin:left;right:0}\n"] }]
+        }], ctorParameters: () => [{ type: CuteSortHeaderIntl }, { type: i0.ChangeDetectorRef }, { type: CuteSort, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['CUTE_SORT_HEADER_COLUMN_DEF']
+                }, {
+                    type: Optional
+                }] }, { type: i3.FocusMonitor }, { type: i0.ElementRef }, { type: i3.AriaDescriber, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CUTE_SORT_DEFAULT_OPTIONS]
+                }] }], propDecorators: { id: [{
+                type: Input,
+                args: ['cute-sort-header']
+            }], arrowPosition: [{
+                type: Input
+            }], start: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], sortActionDescription: [{
+                type: Input
+            }], disableClear: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+const TYPES = [CuteSort, CuteSortHeader];
+class CuteSortModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteSortModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: CuteSortModule, imports: [CommonModule, CuteSort, CuteSortHeader], exports: [CuteSort, CuteSortHeader] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteSortModule, providers: [CUTE_SORT_HEADER_INTL_PROVIDER], imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteSortModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ...TYPES],
+                    exports: TYPES,
+                    providers: [CUTE_SORT_HEADER_INTL_PROVIDER],
+                    declarations: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CUTE_SORT_DEFAULT_OPTIONS, CUTE_SORT_HEADER_INTL_PROVIDER, CUTE_SORT_HEADER_INTL_PROVIDER_FACTORY, CuteSort, CuteSortHeader, CuteSortHeaderIntl, CuteSortModule, cuteSortAnimations };
+//# sourceMappingURL=cute-widgets-base-sort.mjs.map