cmat 0.0.17 → 0.0.18

package/fesm2022/cmat-components-knob-input.mjs

@@ -0,0 +1,404 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { DOCUMENT, NgStyle } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Self, Inject, ViewChild, HostBinding, Input, Output, HostListener } from '@angular/core';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { isNil } from 'lodash-es';
+import { Subject } from 'rxjs';
+import * as i1 from '@angular/forms';
+
+/* eslint-disable @typescript-eslint/member-ordering */
+let NEXT_ID = 0;
+class CmatKnobInputComponent {
+    constructor(ngControl, _document, _renderer, _changeDetectorRef, _el) {
+        this.ngControl = ngControl;
+        this._document = _document;
+        this._renderer = _renderer;
+        this._changeDetectorRef = _changeDetectorRef;
+        this._el = _el;
+        this.id = `cmat-knob-input-${NEXT_ID++}`;
+        this.valueColor = 'var(--cmat-primary)';
+        this.rangeColor = 'var(--cmat-border)';
+        this.textColor = 'var(--cmat-text-default)';
+        this.valueTemplate = '{value}';
+        this.size = 100;
+        this.step = 1;
+        this.min = 0;
+        this.max = 100;
+        this.strokeWidth = 14;
+        this.showValue = true;
+        this.valueChange = new EventEmitter();
+        this.radius = 40;
+        this.midX = 50;
+        this.midY = 50;
+        this.minRadians = (4 * Math.PI) / 3;
+        this.maxRadians = -Math.PI / 3;
+        this.stateChanges = new Subject();
+        this.focused = false;
+        this.touched = false;
+        this._placeholder = '';
+        this._required = false;
+        this._disabled = false;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this._onModelChange = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this._onTouchedChange = () => { };
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+    }
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(value) {
+        this._placeholder = value;
+        this.stateChanges.next();
+    }
+    get value() {
+        return this._value ?? this.min;
+    }
+    set value(value) {
+        if (value !== this.value) {
+            this._value = value;
+            this.stateChanges.next();
+            this._onModelChange(value);
+        }
+    }
+    get empty() {
+        return !this._value;
+    }
+    get errorState() {
+        if (this.ngControl == null)
+            return false;
+        return (this.touched && this.ngControl?.invalid) ?? false;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get required() { return this._required; }
+    set required(value) {
+        this._required = coerceBooleanProperty(value);
+        this.stateChanges.next();
+    }
+    get disabled() {
+        if (!isNil(this.ngControl?.disabled)) {
+            return this.ngControl.disabled;
+        }
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        if (this.focused) {
+            this.focused = false;
+            this.stateChanges.next();
+        }
+    }
+    onKeyDown(event) {
+        if (!this.disabled) {
+            switch (event.code) {
+                case 'ArrowRight':
+                case 'ArrowUp': {
+                    event.preventDefault();
+                    this.updateModelValue(this.value + 1);
+                    break;
+                }
+                case 'ArrowLeft':
+                case 'ArrowDown': {
+                    event.preventDefault();
+                    this.updateModelValue(this.value - 1);
+                    break;
+                }
+                case 'Home': {
+                    event.preventDefault();
+                    this.updateModelValue(this.min);
+                    break;
+                }
+                case 'End': {
+                    event.preventDefault();
+                    this.updateModelValue(this.max);
+                    break;
+                }
+                case 'PageUp': {
+                    event.preventDefault();
+                    this.updateModelValue(this.value + 10);
+                    break;
+                }
+                case 'PageDown': {
+                    event.preventDefault();
+                    this.updateModelValue(this.value - 10);
+                    break;
+                }
+            }
+        }
+    }
+    onMouseDown(event) {
+        if (!this.disabled) {
+            const window = this._document.defaultView ?? 'window';
+            this.windowMouseMoveListener = this._renderer.listen(window, 'mousemove', this.onMouseMove.bind(this));
+            this.windowMouseUpListener = this._renderer.listen(window, 'mouseup', this.onMouseUp.bind(this));
+            event.preventDefault();
+        }
+    }
+    onMouseUp(event) {
+        if (!this.disabled) {
+            if (this.windowMouseMoveListener) {
+                this.windowMouseMoveListener();
+                this.windowMouseUpListener = null;
+            }
+            if (this.windowMouseUpListener) {
+                this.windowMouseUpListener();
+                this.windowMouseMoveListener = null;
+            }
+            event.preventDefault();
+        }
+    }
+    onTouchStart(event) {
+        if (!this.disabled) {
+            const window = this._document.defaultView ?? 'window';
+            this.windowTouchMoveListener = this._renderer.listen(window, 'touchmove', this.onTouchMove.bind(this));
+            this.windowTouchEndListener = this._renderer.listen(window, 'touchend', this.onTouchEnd.bind(this));
+            event.preventDefault();
+        }
+    }
+    onTouchEnd(event) {
+        if (!this.disabled) {
+            if (this.windowTouchMoveListener) {
+                this.windowTouchMoveListener();
+            }
+            if (this.windowTouchEndListener) {
+                this.windowTouchEndListener();
+            }
+            this.windowTouchMoveListener = null;
+            this.windowTouchEndListener = null;
+            event.preventDefault();
+        }
+    }
+    mapRange(x, inMin, inMax, outMin, outMax) {
+        return ((x - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
+    }
+    onClick(event) {
+        if (!this.disabled) {
+            this.updateValue(event.offsetX, event.offsetY);
+        }
+    }
+    onFocusIn() {
+        if (!this.focused) {
+            this.focused = true;
+            this.stateChanges.next();
+        }
+    }
+    onFocusOut(event) {
+        if (!this._knobElementRef.nativeElement.contains(event.relatedTarget)) {
+            this.touched = true;
+            this.focused = false;
+            this._onTouchedChange();
+            this.stateChanges.next();
+        }
+    }
+    setDescribedByIds(ids) {
+        if (ids.length) {
+            this._knobElementRef?.nativeElement.setAttribute('aria-describedby', ids.join(' '));
+        }
+        else {
+            this._knobElementRef?.nativeElement.removeAttribute('aria-describedby');
+        }
+    }
+    onContainerClick() {
+        if (!this.focused) {
+            this._knobElementRef.nativeElement.focus();
+        }
+    }
+    updateValue(offsetX, offsetY) {
+        let dx = offsetX - this.size / 2;
+        let dy = this.size / 2 - offsetY;
+        let angle = Math.atan2(dy, dx);
+        let start = -Math.PI / 2 - Math.PI / 6;
+        this.updateModel(angle, start);
+    }
+    updateModel(angle, start) {
+        let mappedValue;
+        if (angle > this.maxRadians)
+            mappedValue = this.mapRange(angle, this.minRadians, this.maxRadians, this.min, this.max);
+        else if (angle < start)
+            mappedValue = this.mapRange(angle + 2 * Math.PI, this.minRadians, this.maxRadians, this.min, this.max);
+        else
+            return;
+        let newValue = Math.round((mappedValue - this.min) / this.step) * this.step + this.min;
+        this.value = newValue;
+        this._onModelChange(this.value);
+        this.valueChange.emit(this.value);
+    }
+    onMouseMove(event) {
+        if (!this.disabled) {
+            this.updateValue(event.offsetX, event.offsetY);
+            event.preventDefault();
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    onTouchMove(event) {
+        if (!this.disabled && event instanceof TouchEvent && event.touches.length === 1) {
+            const rect = this._el.nativeElement.children[0].getBoundingClientRect();
+            const touch = event.targetTouches.item(0);
+            if (touch) {
+                const offsetX = touch.clientX - rect.left;
+                const offsetY = touch.clientY - rect.top;
+                this.updateValue(offsetX, offsetY);
+                this._changeDetectorRef.markForCheck();
+            }
+        }
+    }
+    updateModelValue(newValue) {
+        if (newValue > this.max)
+            this.value = this.max;
+        else if (newValue < this.min)
+            this.value = this.min;
+        else
+            this.value = newValue;
+        this._onModelChange(this.value);
+        this.valueChange.emit(this.value);
+    }
+    writeValue(value) {
+        this.value = value;
+        this._changeDetectorRef.markForCheck();
+    }
+    registerOnChange(fn) {
+        this._onModelChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouchedChange = fn;
+    }
+    setDisabledState(val) {
+        this.disabled = val;
+        this._changeDetectorRef.markForCheck();
+    }
+    rangePath() {
+        return `M ${this.minX()} ${this.minY()} A ${this.radius} ${this.radius} 0 1 1 ${this.maxX()} ${this.maxY()}`;
+    }
+    valuePath() {
+        return `M ${this.zeroX()} ${this.zeroY()} A ${this.radius} ${this.radius} 0 ${this.largeArc()} ${this.sweep()} ${this.valueX()} ${this.valueY()}`;
+    }
+    zeroRadians() {
+        if (this.min > 0 && this.max > 0)
+            return this.mapRange(this.min, this.min, this.max, this.minRadians, this.maxRadians);
+        else
+            return this.mapRange(0, this.min, this.max, this.minRadians, this.maxRadians);
+    }
+    valueRadians() {
+        return this.mapRange(this.value, this.min, this.max, this.minRadians, this.maxRadians);
+    }
+    minX() {
+        return this.midX + Math.cos(this.minRadians) * this.radius;
+    }
+    minY() {
+        return this.midY - Math.sin(this.minRadians) * this.radius;
+    }
+    maxX() {
+        return this.midX + Math.cos(this.maxRadians) * this.radius;
+    }
+    maxY() {
+        return this.midY - Math.sin(this.maxRadians) * this.radius;
+    }
+    zeroX() {
+        return this.midX + Math.cos(this.zeroRadians()) * this.radius;
+    }
+    zeroY() {
+        return this.midY - Math.sin(this.zeroRadians()) * this.radius;
+    }
+    valueX() {
+        return this.midX + Math.cos(this.valueRadians()) * this.radius;
+    }
+    valueY() {
+        return this.midY - Math.sin(this.valueRadians()) * this.radius;
+    }
+    largeArc() {
+        return Math.abs(this.zeroRadians() - this.valueRadians()) < Math.PI ? 0 : 1;
+    }
+    sweep() {
+        return this.valueRadians() > this.zeroRadians() ? 0 : 1;
+    }
+    valueToDisplay() {
+        return this.valueTemplate.replace('{value}', this.value.toString());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CmatKnobInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: CmatKnobInputComponent, isStandalone: true, selector: "cmat-knob-input", inputs: { id: "id", valueColor: "valueColor", rangeColor: "rangeColor", textColor: "textColor", valueTemplate: "valueTemplate", name: "name", size: "size", step: "step", min: "min", max: "max", strokeWidth: "strokeWidth", showValue: "showValue", placeholder: "placeholder", value: "value", required: "required", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "mousedown": "onMouseDown($event)", "mouseup": "onMouseUp($event)", "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd($event)" }, properties: { "attr.id": "this.id" } }, providers: [
+            { provide: MatFormFieldControl, useExisting: CmatKnobInputComponent }
+        ], viewQueries: [{ propertyName: "_knobElementRef", first: true, predicate: ["knob"], descendants: true }], exportAs: ["cmatKnobInput"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\r\n<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div #knob [class.cmat-knob-disabled]=\"disabled\" (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut($event)\">\r\n    <svg  viewBox=\"0 0 100 100\" role=\"slider\" [style.width]=\"size + 'px'\" [style.height]=\"size + 'px'\"\r\n        [attr.aria-valuemin]=\"min\" [attr.aria-valuemax]=\"max\" [attr.aria-valuenow]=\"value\"\r\n        [attr.tabindex]=\"disabled ? -1 : 0\" (click)=\"onClick($event)\">\r\n        <path class=\"knob-range\" [attr.d]=\"rangePath()\" [attr.stroke-width]=\"strokeWidth\" [attr.stroke]=\"rangeColor\">\r\n        </path>\r\n        <path class=\"knob-value\" [attr.d]=\"valuePath()\" [attr.stroke-width]=\"strokeWidth\" [attr.stroke]=\"valueColor\">\r\n        </path>\r\n        @if(showValue){\r\n        <text text-anchor=\"middle\" class=\"knob-text\" [attr.x]=\"50\" [attr.y]=\"57\" [attr.fill]=\"textColor\"\r\n            [attr.name]=\"name\">{{ valueToDisplay() }}</text>\r\n        }\r\n    </svg>\r\n</div>", styles: ["cmat-knob-input .knob-range{fill:none;transition:stroke .1s ease-in}cmat-knob-input .knob-value{animation-name:dash-frame;animation-fill-mode:forwards;fill:none}cmat-knob-input .knob-text{font-size:1.3rem;text-align:center}cmat-knob-input .cmat-knob-disabled{opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CmatKnobInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-knob-input', providers: [
+                        { provide: MatFormFieldControl, useExisting: CmatKnobInputComponent }
+                    ], exportAs: 'cmatKnobInput', imports: [NgStyle], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\r\n<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div #knob [class.cmat-knob-disabled]=\"disabled\" (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut($event)\">\r\n    <svg  viewBox=\"0 0 100 100\" role=\"slider\" [style.width]=\"size + 'px'\" [style.height]=\"size + 'px'\"\r\n        [attr.aria-valuemin]=\"min\" [attr.aria-valuemax]=\"max\" [attr.aria-valuenow]=\"value\"\r\n        [attr.tabindex]=\"disabled ? -1 : 0\" (click)=\"onClick($event)\">\r\n        <path class=\"knob-range\" [attr.d]=\"rangePath()\" [attr.stroke-width]=\"strokeWidth\" [attr.stroke]=\"rangeColor\">\r\n        </path>\r\n        <path class=\"knob-value\" [attr.d]=\"valuePath()\" [attr.stroke-width]=\"strokeWidth\" [attr.stroke]=\"valueColor\">\r\n        </path>\r\n        @if(showValue){\r\n        <text text-anchor=\"middle\" class=\"knob-text\" [attr.x]=\"50\" [attr.y]=\"57\" [attr.fill]=\"textColor\"\r\n            [attr.name]=\"name\">{{ valueToDisplay() }}</text>\r\n        }\r\n    </svg>\r\n</div>", styles: ["cmat-knob-input .knob-range{fill:none;transition:stroke .1s ease-in}cmat-knob-input .knob-value{animation-name:dash-frame;animation-fill-mode:forwards;fill:none}cmat-knob-input .knob-text{font-size:1.3rem;text-align:center}cmat-knob-input .cmat-knob-disabled{opacity:.6}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { _knobElementRef: [{
+                type: ViewChild,
+                args: ['knob', { static: false }]
+            }], id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }, {
+                type: Input
+            }], valueColor: [{
+                type: Input
+            }], rangeColor: [{
+                type: Input
+            }], textColor: [{
+                type: Input
+            }], valueTemplate: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], strokeWidth: [{
+                type: Input
+            }], showValue: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], placeholder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], onMouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ['mouseup', ['$event']]
+            }], onTouchStart: [{
+                type: HostListener,
+                args: ['touchstart', ['$event']]
+            }], onTouchEnd: [{
+                type: HostListener,
+                args: ['touchend', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CmatKnobInputComponent };
+//# sourceMappingURL=cmat-components-knob-input.mjs.map

package/fesm2022/cmat-components-knob-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cmat-components-knob-input.mjs","sources":["../../../projects/cmat/components/knob-input/knob-input.component.ts","../../../projects/cmat/components/knob-input/knob-input.component.html","../../../projects/cmat/components/knob-input/cmat-components-knob-input.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/member-ordering */\r\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\r\nimport { DOCUMENT, NgStyle } from '@angular/common';\r\nimport {\r\n    ChangeDetectionStrategy,\r\n    ChangeDetectorRef,\r\n    Component,\r\n    ElementRef,\r\n    EventEmitter,\r\n    HostBinding,\r\n    HostListener,\r\n    Inject,\r\n    Input,\r\n    OnDestroy,\r\n    Optional,\r\n    Output,\r\n    Renderer2,\r\n    Self,\r\n    ViewChild,\r\n    ViewEncapsulation,\r\n} from '@angular/core';\r\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\r\nimport { MatFormFieldControl } from '@angular/material/form-field';\r\nimport { isNil } from 'lodash-es';\r\nimport { Subject } from 'rxjs';\r\n\r\nlet NEXT_ID = 0;\r\n\r\n@Component({\r\n    selector: 'cmat-knob-input',\r\n    templateUrl: './knob-input.component.html',\r\n    styleUrls: ['./knob-input.component.scss'],\r\n    providers: [\r\n        { provide: MatFormFieldControl, useExisting: CmatKnobInputComponent }\r\n    ],\r\n    exportAs: 'cmatKnobInput',\r\n    imports: [NgStyle],\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class CmatKnobInputComponent implements MatFormFieldControl<any>, OnDestroy, ControlValueAccessor {\r\n    @ViewChild('knob', { static: false }) private _knobElementRef: ElementRef<HTMLDivElement>;\r\n\r\n    @HostBinding('attr.id')\r\n    @Input()\r\n    public id = `cmat-knob-input-${NEXT_ID++}`;\r\n\r\n    @Input() valueColor: string = 'var(--cmat-primary)';\r\n\r\n    @Input() rangeColor: string = 'var(--cmat-border)';\r\n\r\n    @Input() textColor: string = 'var(--cmat-text-default)';\r\n    @Input() valueTemplate: string = '{value}';\r\n    @Input() name: string | undefined;\r\n\r\n    @Input() size: number = 100;\r\n    @Input() step: number = 1;\r\n    @Input() min: number = 0;\r\n    @Input() max: number = 100;\r\n    @Input() strokeWidth: number = 14;\r\n    @Input() showValue: boolean = true;\r\n\r\n    @Output() valueChange: EventEmitter<number | null> = new EventEmitter<number | null>();\r\n\r\n    radius: number = 40;\r\n\r\n    midX: number = 50;\r\n\r\n    midY: number = 50;\r\n\r\n    minRadians: number = (4 * Math.PI) / 3;\r\n\r\n    maxRadians: number = -Math.PI / 3;\r\n\r\n    windowMouseMoveListener: VoidFunction | null;\r\n\r\n    windowMouseUpListener: VoidFunction | null;\r\n\r\n    windowTouchMoveListener: VoidFunction | null;\r\n\r\n    windowTouchEndListener: VoidFunction | null;\r\n\r\n    readonly stateChanges: Subject<void> = new Subject<void>();\r\n    focused: boolean = false;\r\n    touched: boolean = false;\r\n\r\n    constructor(\r\n        @Optional() @Self() public ngControl: NgControl,\r\n        @Inject(DOCUMENT) private _document: Document,\r\n        private _renderer: Renderer2,\r\n        private _changeDetectorRef: ChangeDetectorRef,\r\n        private _el: ElementRef\r\n    ) {\r\n        if (this.ngControl != null) {\r\n            this.ngControl.valueAccessor = this;\r\n        }\r\n    }\r\n\r\n    ngOnDestroy(): void {\r\n        this.stateChanges.complete();\r\n    }\r\n\r\n    @Input()\r\n    get placeholder(): string {\r\n        return this._placeholder;\r\n    }\r\n    set placeholder(value: string) {\r\n        this._placeholder = value;\r\n        this.stateChanges.next();\r\n    }\r\n    private _placeholder: string = '';\r\n\r\n    @Input()\r\n    get value(): number {\r\n        return this._value ?? this.min;\r\n    }\r\n    set value(value: number) {\r\n        if (value !== this.value) {\r\n            this._value = value;\r\n\r\n            this.stateChanges.next();\r\n\r\n            this._onModelChange(value);\r\n        }\r\n    }\r\n    protected _value: number | null;\r\n\r\n    get empty(): boolean {\r\n        return !this._value;\r\n    }\r\n\r\n    get errorState(): boolean {\r\n        if (this.ngControl == null)\r\n            return false;\r\n\r\n        return (this.touched && this.ngControl?.invalid) ?? false;\r\n    }\r\n\r\n    get shouldLabelFloat(): boolean {\r\n        return this.focused || !this.empty;\r\n    }\r\n\r\n    @Input()\r\n    get required(): boolean { return this._required; }\r\n    set required(value: boolean) {\r\n        this._required = coerceBooleanProperty(value);\r\n        this.stateChanges.next();\r\n    }\r\n    protected _required = false;\r\n\r\n    @Input()\r\n    get disabled(): boolean {\r\n        if (!isNil(this.ngControl?.disabled)) {\r\n            return this.ngControl.disabled;\r\n        }\r\n        return this._disabled;\r\n    }\r\n    set disabled(value: BooleanInput) {\r\n        this._disabled = coerceBooleanProperty(value);\r\n\r\n        if (this.focused) {\r\n            this.focused = false;\r\n            this.stateChanges.next();\r\n        }\r\n    }\r\n    protected _disabled = false;\r\n\r\n    @HostListener('keydown', ['$event'])\r\n    onKeyDown(event: KeyboardEvent): void {\r\n        if (!this.disabled) {\r\n            switch (event.code) {\r\n                case 'ArrowRight':\r\n                case 'ArrowUp': {\r\n                    event.preventDefault();\r\n                    this.updateModelValue(this.value + 1);\r\n                    break;\r\n                }\r\n                case 'ArrowLeft':\r\n                case 'ArrowDown': {\r\n                    event.preventDefault();\r\n                    this.updateModelValue(this.value - 1);\r\n                    break;\r\n                }\r\n                case 'Home': {\r\n                    event.preventDefault();\r\n                    this.updateModelValue(this.min);\r\n                    break;\r\n                }\r\n                case 'End': {\r\n                    event.preventDefault();\r\n                    this.updateModelValue(this.max);\r\n                    break;\r\n                }\r\n                case 'PageUp': {\r\n                    event.preventDefault();\r\n                    this.updateModelValue(this.value + 10);\r\n                    break;\r\n                }\r\n                case 'PageDown': {\r\n                    event.preventDefault();\r\n                    this.updateModelValue(this.value - 10);\r\n                    break;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    @HostListener('mousedown', ['$event'])\r\n    onMouseDown(event: MouseEvent): void {\r\n        if (!this.disabled) {\r\n            const window = this._document.defaultView ?? 'window';\r\n            this.windowMouseMoveListener = this._renderer.listen(window, 'mousemove', this.onMouseMove.bind(this));\r\n            this.windowMouseUpListener = this._renderer.listen(window, 'mouseup', this.onMouseUp.bind(this));\r\n            event.preventDefault();\r\n        }\r\n    }\r\n\r\n    @HostListener('mouseup', ['$event'])\r\n    onMouseUp(event: MouseEvent): void {\r\n        if (!this.disabled) {\r\n            if (this.windowMouseMoveListener) {\r\n                this.windowMouseMoveListener();\r\n                this.windowMouseUpListener = null;\r\n            }\r\n\r\n            if (this.windowMouseUpListener) {\r\n                this.windowMouseUpListener();\r\n                this.windowMouseMoveListener = null;\r\n            }\r\n            event.preventDefault();\r\n        }\r\n    }\r\n\r\n    @HostListener('touchstart', ['$event'])\r\n    onTouchStart(event: TouchEvent): void {\r\n        if (!this.disabled) {\r\n            const window = this._document.defaultView ?? 'window';\r\n            this.windowTouchMoveListener = this._renderer.listen(window, 'touchmove', this.onTouchMove.bind(this));\r\n            this.windowTouchEndListener = this._renderer.listen(window, 'touchend', this.onTouchEnd.bind(this));\r\n            event.preventDefault();\r\n        }\r\n    }\r\n\r\n    @HostListener('touchend', ['$event'])\r\n    onTouchEnd(event: TouchEvent): void {\r\n        if (!this.disabled) {\r\n            if (this.windowTouchMoveListener) {\r\n                this.windowTouchMoveListener();\r\n            }\r\n            if (this.windowTouchEndListener) {\r\n                this.windowTouchEndListener();\r\n            }\r\n            this.windowTouchMoveListener = null;\r\n            this.windowTouchEndListener = null;\r\n            event.preventDefault();\r\n        }\r\n    }\r\n\r\n    mapRange(x: number, inMin: number, inMax: number, outMin: number, outMax: number): number {\r\n        return ((x - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;\r\n    }\r\n\r\n    onClick(event: MouseEvent): void {\r\n        if (!this.disabled) {\r\n            this.updateValue(event.offsetX, event.offsetY);\r\n        }\r\n    }\r\n\r\n    onFocusIn(): void {\r\n        if (!this.focused) {\r\n            this.focused = true;\r\n            this.stateChanges.next();\r\n        }\r\n    }\r\n\r\n    onFocusOut(event: FocusEvent): void {\r\n        if (!this._knobElementRef.nativeElement.contains(event.relatedTarget as Element)) {\r\n            this.touched = true;\r\n            this.focused = false;\r\n            this._onTouchedChange();\r\n            this.stateChanges.next();\r\n        }\r\n    }\r\n\r\n    setDescribedByIds(ids: string[]): void {\r\n        if (ids.length) {\r\n            this._knobElementRef?.nativeElement.setAttribute('aria-describedby', ids.join(' '));\r\n        } else {\r\n            this._knobElementRef?.nativeElement.removeAttribute('aria-describedby');\r\n        }\r\n    }\r\n\r\n    onContainerClick(): void {\r\n        if (!this.focused) {\r\n            this._knobElementRef.nativeElement.focus();\r\n        }\r\n    }\r\n\r\n    updateValue(offsetX: number, offsetY: number): void {\r\n        let dx = offsetX - this.size / 2;\r\n        let dy = this.size / 2 - offsetY;\r\n        let angle = Math.atan2(dy, dx);\r\n        let start = -Math.PI / 2 - Math.PI / 6;\r\n        this.updateModel(angle, start);\r\n    }\r\n\r\n    updateModel(angle: number, start: number): void {\r\n        let mappedValue;\r\n        if (angle > this.maxRadians) mappedValue = this.mapRange(angle, this.minRadians, this.maxRadians, this.min, this.max);\r\n        else if (angle < start) mappedValue = this.mapRange(angle + 2 * Math.PI, this.minRadians, this.maxRadians, this.min, this.max);\r\n        else return;\r\n\r\n        let newValue = Math.round((mappedValue - this.min) / this.step) * this.step + this.min;\r\n        this.value = newValue;\r\n\r\n        this._onModelChange(this.value);\r\n        this.valueChange.emit(this.value);\r\n    }\r\n\r\n    onMouseMove(event: MouseEvent): void {\r\n        if (!this.disabled) {\r\n            this.updateValue(event.offsetX, event.offsetY);\r\n            event.preventDefault();\r\n\r\n            this._changeDetectorRef.markForCheck();\r\n        }\r\n    }\r\n\r\n    onTouchMove(event: Event): void {\r\n        if (!this.disabled && event instanceof TouchEvent && event.touches.length === 1) {\r\n            const rect = this._el.nativeElement.children[0].getBoundingClientRect();\r\n            const touch = event.targetTouches.item(0);\r\n            if (touch) {\r\n                const offsetX = touch.clientX - rect.left;\r\n                const offsetY = touch.clientY - rect.top;\r\n                this.updateValue(offsetX, offsetY);\r\n\r\n                this._changeDetectorRef.markForCheck();\r\n            }\r\n        }\r\n    }\r\n\r\n    updateModelValue(newValue: number): void {\r\n        if (newValue > this.max) this.value = this.max;\r\n        else if (newValue < this.min) this.value = this.min;\r\n        else this.value = newValue;\r\n\r\n        this._onModelChange(this.value);\r\n        this.valueChange.emit(this.value);\r\n    }\r\n\r\n\r\n\r\n    writeValue(value: any): void {\r\n        this.value = value;\r\n        this._changeDetectorRef.markForCheck();\r\n    }\r\n\r\n    registerOnChange(fn: any): void {\r\n        this._onModelChange = fn;\r\n    }\r\n\r\n    registerOnTouched(fn: any): void {\r\n        this._onTouchedChange = fn;\r\n    }\r\n\r\n    setDisabledState(val: boolean): void {\r\n        this.disabled = val;\r\n        this._changeDetectorRef.markForCheck();\r\n    }\r\n\r\n    rangePath(): string {\r\n        return `M ${this.minX()} ${this.minY()} A ${this.radius} ${this.radius} 0 1 1 ${this.maxX()} ${this.maxY()}`;\r\n    }\r\n\r\n    valuePath(): string {\r\n        return `M ${this.zeroX()} ${this.zeroY()} A ${this.radius} ${this.radius} 0 ${this.largeArc()} ${this.sweep()} ${this.valueX()} ${this.valueY()}`;\r\n    }\r\n\r\n    zeroRadians(): number {\r\n        if (this.min > 0 && this.max > 0) return this.mapRange(this.min, this.min, this.max, this.minRadians, this.maxRadians);\r\n        else return this.mapRange(0, this.min, this.max, this.minRadians, this.maxRadians);\r\n    }\r\n\r\n    valueRadians(): number {\r\n        return this.mapRange(this.value, this.min, this.max, this.minRadians, this.maxRadians);\r\n    }\r\n\r\n    minX(): number {\r\n        return this.midX + Math.cos(this.minRadians) * this.radius;\r\n    }\r\n\r\n    minY(): number {\r\n        return this.midY - Math.sin(this.minRadians) * this.radius;\r\n    }\r\n\r\n    maxX(): number {\r\n        return this.midX + Math.cos(this.maxRadians) * this.radius;\r\n    }\r\n\r\n    maxY(): number {\r\n        return this.midY - Math.sin(this.maxRadians) * this.radius;\r\n    }\r\n\r\n    zeroX(): number {\r\n        return this.midX + Math.cos(this.zeroRadians()) * this.radius;\r\n    }\r\n\r\n    zeroY(): number {\r\n        return this.midY - Math.sin(this.zeroRadians()) * this.radius;\r\n    }\r\n\r\n    valueX(): number {\r\n        return this.midX + Math.cos(this.valueRadians()) * this.radius;\r\n    }\r\n\r\n    valueY(): number {\r\n        return this.midY - Math.sin(this.valueRadians()) * this.radius;\r\n    }\r\n\r\n    largeArc(): number {\r\n        return Math.abs(this.zeroRadians() - this.valueRadians()) < Math.PI ? 0 : 1;\r\n    }\r\n\r\n    sweep(): number {\r\n        return this.valueRadians() > this.zeroRadians() ? 0 : 1;\r\n    }\r\n\r\n    valueToDisplay(): string {\r\n        return this.valueTemplate.replace('{value}', this.value.toString());\r\n    }\r\n\r\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\r\n    private _onModelChange: (value: any) => void = () => { };\r\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\r\n    private _onTouchedChange: () => any = () => { };\r\n}","<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\r\n<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div #knob [class.cmat-knob-disabled]=\"disabled\" (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut($event)\">\r\n    <svg  viewBox=\"0 0 100 100\" role=\"slider\" [style.width]=\"size + 'px'\" [style.height]=\"size + 'px'\"\r\n        [attr.aria-valuemin]=\"min\" [attr.aria-valuemax]=\"max\" [attr.aria-valuenow]=\"value\"\r\n        [attr.tabindex]=\"disabled ? -1 : 0\" (click)=\"onClick($event)\">\r\n        <path class=\"knob-range\" [attr.d]=\"rangePath()\" [attr.stroke-width]=\"strokeWidth\" [attr.stroke]=\"rangeColor\">\r\n        </path>\r\n        <path class=\"knob-value\" [attr.d]=\"valuePath()\" [attr.stroke-width]=\"strokeWidth\" [attr.stroke]=\"valueColor\">\r\n        </path>\r\n        @if(showValue){\r\n        <text text-anchor=\"middle\" class=\"knob-text\" [attr.x]=\"50\" [attr.y]=\"57\" [attr.fill]=\"textColor\"\r\n            [attr.name]=\"name\">{{ valueToDisplay() }}</text>\r\n        }\r\n    </svg>\r\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/cmat-components-masonry.mjs

@@ -37,12 +37,12 @@ class CmatMasonryComponent {
             this.distributedColumns[i % this.columns].items.push(this.items[i]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: CmatMasonryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: CmatMasonryComponent, isStandalone: true, selector: "cmat-masonry", inputs: { columnsTemplate: "columnsTemplate", columns: "columns", items: "items" }, exportAs: ["cmatMasonry"], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex p-2\">\r\n    <ng-container *ngTemplateOutlet=\"columnsTemplate; context: { $implicit: distributedColumns }\"></ng-container>\r\n</div>", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CmatMasonryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: CmatMasonryComponent, isStandalone: true, selector: "cmat-masonry", inputs: { columnsTemplate: "columnsTemplate", columns: "columns", items: "items" }, exportAs: ["cmatMasonry"], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex p-2\">\r\n    <ng-container *ngTemplateOutlet=\"columnsTemplate; context: { $implicit: distributedColumns }\"></ng-container>\r\n</div>", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: CmatMasonryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CmatMasonryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-masonry', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: cmatAnimations, exportAs: 'cmatMasonry', standalone: true, imports: [NgTemplateOutlet], template: "<div class=\"flex p-2\">\r\n    <ng-container *ngTemplateOutlet=\"columnsTemplate; context: { $implicit: distributedColumns }\"></ng-container>\r\n</div>" }]
+            args: [{ selector: 'cmat-masonry', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: cmatAnimations, exportAs: 'cmatMasonry', imports: [NgTemplateOutlet], template: "<div class=\"flex p-2\">\r\n    <ng-container *ngTemplateOutlet=\"columnsTemplate; context: { $implicit: distributedColumns }\"></ng-container>\r\n</div>" }]
         }], propDecorators: { columnsTemplate: [{
                 type: Input,
                 args: [{ required: true }]

package/fesm2022/cmat-components-masonry.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cmat-components-masonry.mjs","sources":["../../../projects/cmat/components/masonry/masonry.component.ts","../../../projects/cmat/components/masonry/masonry.component.html","../../../projects/cmat/components/masonry/cmat-components-masonry.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\r\nimport {AfterViewInit, ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges, TemplateRef, ViewEncapsulation} from '@angular/core';\r\nimport {cmatAnimations} from 'cmat/animations';\r\n\r\n@Component({\r\n    selector: 'cmat-masonry',\r\n    templateUrl: './masonry.component.html',\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    animations: cmatAnimations,\r\n    exportAs: 'cmatMasonry',\r\n    standalone: true,\r\n    imports: [NgTemplateOutlet]\r\n})\r\nexport class CmatMasonryComponent implements OnChanges, AfterViewInit {\r\n    @Input({ required: true }) columnsTemplate: TemplateRef<any>;\r\n    @Input({ required: true }) columns: number;\r\n    @Input() items: any[] = [];\r\n    distributedColumns: any[] = [];\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        // Columns\r\n        if ('columns' in changes) {\r\n            // Distribute the items\r\n            this._distributeItems();\r\n        }\r\n\r\n        // Items\r\n        if ('items' in changes) {\r\n            // Distribute the items\r\n            this._distributeItems();\r\n        }\r\n    }\r\n\r\n    ngAfterViewInit(): void {\r\n        // Distribute the items for the first time\r\n        this._distributeItems();\r\n    }\r\n\r\n    private _distributeItems(): void {\r\n        // Return an empty array if there are no items\r\n        if (this.items.length === 0) {\r\n            this.distributedColumns = [];\r\n            return;\r\n        }\r\n\r\n        // Prepare the distributed columns array\r\n        this.distributedColumns = Array.from(Array(this.columns), () => ({items: []}));\r\n\r\n        // Distribute the items to columns\r\n        for (let i = 0; i < this.items.length; i++) {\r\n            this.distributedColumns[i % this.columns].items.push(this.items[i]);\r\n        }\r\n    }\r\n}\r\n","<div class=\"flex p-2\">\r\n    <ng-container *ngTemplateOutlet=\"columnsTemplate; context: { $implicit: distributedColumns }\"></ng-container>\r\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAca,oBAAoB,CAAA;AAVjC,IAAA,WAAA,GAAA;QAaa,IAAK,CAAA,KAAA,GAAU,EAAE,CAAC;QAC3B,IAAkB,CAAA,kBAAA,GAAU,EAAE,CAAC;AAoClC,KAAA;AAlCG,IAAA,WAAW,CAAC,OAAsB,EAAA;;AAE9B,QAAA,IAAI,SAAS,IAAI,OAAO,EAAE;;YAEtB,IAAI,CAAC,gBAAgB,EAAE,CAAC;SAC3B;;AAGD,QAAA,IAAI,OAAO,IAAI,OAAO,EAAE;;YAEpB,IAAI,CAAC,gBAAgB,EAAE,CAAC;SAC3B;KACJ;IAED,eAAe,GAAA;;QAEX,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAC3B;IAEO,gBAAgB,GAAA;;QAEpB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AACzB,YAAA,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC;YAC7B,OAAO;SACV;;QAGD,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,OAAO,EAAC,KAAK,EAAE,EAAE,EAAC,CAAC,CAAC,CAAC;;AAG/E,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACxC,IAAI,CAAC,kBAAkB,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;SACvE;KACJ;+GAvCQ,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,oBAAoB,ECdjC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,SAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,2JAEM,EDUQ,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,gBAAgB,sIAHd,cAAc,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;4FAKjB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAVhC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,iBAET,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EACnC,UAAA,EAAA,cAAc,YAChB,aAAa,EAAA,UAAA,EACX,IAAI,EACP,OAAA,EAAA,CAAC,gBAAgB,CAAC,EAAA,QAAA,EAAA,2JAAA,EAAA,CAAA;8BAGA,eAAe,EAAA,CAAA;sBAAzC,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;gBACE,OAAO,EAAA,CAAA;sBAAjC,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;gBAChB,KAAK,EAAA,CAAA;sBAAb,KAAK;;;AEjBV;;AAEG;;;;"}
+{"version":3,"file":"cmat-components-masonry.mjs","sources":["../../../projects/cmat/components/masonry/masonry.component.ts","../../../projects/cmat/components/masonry/masonry.component.html","../../../projects/cmat/components/masonry/cmat-components-masonry.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\r\nimport {AfterViewInit, ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges, TemplateRef, ViewEncapsulation} from '@angular/core';\r\nimport {cmatAnimations} from 'cmat/animations';\r\n\r\n@Component({\r\n    selector: 'cmat-masonry',\r\n    templateUrl: './masonry.component.html',\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    animations: cmatAnimations,\r\n    exportAs: 'cmatMasonry',\r\n    imports: [NgTemplateOutlet]\r\n})\r\nexport class CmatMasonryComponent implements OnChanges, AfterViewInit {\r\n    @Input({ required: true }) columnsTemplate: TemplateRef<any>;\r\n    @Input({ required: true }) columns: number;\r\n    @Input() items: any[] = [];\r\n    distributedColumns: any[] = [];\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        // Columns\r\n        if ('columns' in changes) {\r\n            // Distribute the items\r\n            this._distributeItems();\r\n        }\r\n\r\n        // Items\r\n        if ('items' in changes) {\r\n            // Distribute the items\r\n            this._distributeItems();\r\n        }\r\n    }\r\n\r\n    ngAfterViewInit(): void {\r\n        // Distribute the items for the first time\r\n        this._distributeItems();\r\n    }\r\n\r\n    private _distributeItems(): void {\r\n        // Return an empty array if there are no items\r\n        if (this.items.length === 0) {\r\n            this.distributedColumns = [];\r\n            return;\r\n        }\r\n\r\n        // Prepare the distributed columns array\r\n        this.distributedColumns = Array.from(Array(this.columns), () => ({items: []}));\r\n\r\n        // Distribute the items to columns\r\n        for (let i = 0; i < this.items.length; i++) {\r\n            this.distributedColumns[i % this.columns].items.push(this.items[i]);\r\n        }\r\n    }\r\n}\r\n","<div class=\"flex p-2\">\r\n    <ng-container *ngTemplateOutlet=\"columnsTemplate; context: { $implicit: distributedColumns }\"></ng-container>\r\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAaa,oBAAoB,CAAA;AATjC,IAAA,WAAA,GAAA;QAYa,IAAK,CAAA,KAAA,GAAU,EAAE;QAC1B,IAAkB,CAAA,kBAAA,GAAU,EAAE;AAoCjC;AAlCG,IAAA,WAAW,CAAC,OAAsB,EAAA;;AAE9B,QAAA,IAAI,SAAS,IAAI,OAAO,EAAE;;YAEtB,IAAI,CAAC,gBAAgB,EAAE;;;AAI3B,QAAA,IAAI,OAAO,IAAI,OAAO,EAAE;;YAEpB,IAAI,CAAC,gBAAgB,EAAE;;;IAI/B,eAAe,GAAA;;QAEX,IAAI,CAAC,gBAAgB,EAAE;;IAGnB,gBAAgB,GAAA;;QAEpB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AACzB,YAAA,IAAI,CAAC,kBAAkB,GAAG,EAAE;YAC5B;;;QAIJ,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,OAAO,EAAC,KAAK,EAAE,EAAE,EAAC,CAAC,CAAC;;AAG9E,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACxC,IAAI,CAAC,kBAAkB,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;;;8GArClE,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,ECbjC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,SAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,2JAEM,EDSQ,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,gBAAgB,sIAFd,cAAc,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAIjB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAThC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAET,aAAA,EAAA,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,EAAA,UAAA,EACnC,cAAc,EAChB,QAAA,EAAA,aAAa,EACd,OAAA,EAAA,CAAC,gBAAgB,CAAC,EAAA,QAAA,EAAA,2JAAA,EAAA;8BAGA,eAAe,EAAA,CAAA;sBAAzC,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBACE,OAAO,EAAA,CAAA;sBAAjC,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBAChB,KAAK,EAAA,CAAA;sBAAb;;;AEhBL;;AAEG;;;;"}

package/fesm2022/cmat-components-material-color-picker.mjs

@@ -142,12 +142,12 @@ class CmatMaterialColorPickerComponent {
             this.view = 'hues';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: CmatMaterialColorPickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: CmatMaterialColorPickerComponent, isStandalone: true, selector: "cmat-material-color-picker", inputs: { color: "color", title: "title", readonly: "readonly" }, outputs: { colorChanged: "colorChanged" }, providers: [CMAT_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR], exportAs: ["cmatMaterialColorPicker"], ngImport: i0, template: "<div class=\"rounded\" [ngClass]=\"selectedColor.color\">\r\n  <mat-select value=\"init\" panelClass=\"min-w-64\" [disableOptionCentering]=\"true\" [hideSingleSelectionIndicator]=\"true\"\r\n    [disabled]=\"readonly\" (openedChange)=\"onMenuOpen($event)\">\r\n    <mat-select-trigger class=\"flex p-1\">\r\n      <mat-icon [svgIcon]=\"'heroicons_outline:paint-brush'\"></mat-icon>\r\n    </mat-select-trigger>\r\n\r\n    <header class=\"shadow flex flex-row content-between justify-between p-2\" [ngClass]=\"'accent'\">\r\n      <button type=\"button\" mat-icon-button class=\"secondary-text\" aria-label=\"\u8C03\u8272\u677F\"\r\n        [class.invisible]=\"view === 'palettes'\" (click)=\"goToPalettesView()\">\r\n        <mat-icon svgIcon=\"mat_outline:arrow_back\"></mat-icon>\r\n      </button>\r\n      <span class=\"align-middle leading-loose text-xl font-bold\">{{title}}</span>\r\n      <button type=\"button\" mat-icon-button class=\"remove-color-button secondary-text\" aria-label=\"\u79FB\u9664\u989C\u8272\"\r\n        matTooltip=\"\u79FB\u9664\u989C\u8272\" (click)=\"removeColor()\">\r\n        <mat-icon color=\"warn\" [svgIcon]=\"'mat_outline:cleaning_services'\"></mat-icon>\r\n      </button>\r\n    </header>\r\n\r\n    <div class=\"flex flex-wrap w-60 m-2\">\r\n      <mat-option value=\"init\" class=\"hidden\">\u521D\u59CB\u5316</mat-option>\r\n      <div>\r\n        @switch (view) {\r\n          @case ('palettes') {\r\n            <div>\r\n              <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\r\n                @for (palette of palettes; track $index) {\r\n                  <div role=\"presentation\"\r\n                    class=\"cursor-pointer\" (click)=\"selectPalette(palette)\">\r\n                    <mat-option\r\n                      class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent hover:opacity-50\"\r\n                      [value]=\"selectedPalette\">\r\n                      @if (selectedColor.color===palette + '-' + selectedHue) {\r\n                        <mat-icon class=\"absolute m-3 text-white\"\r\n                        [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n                      }\r\n                      <span class=\"flex w-10 h-10 m-1 rounded-full\"\r\n                      [ngClass]=\"palette + '-' + selectedHue\"></span>\r\n                    </mat-option>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n          @case ('hues') {\r\n            <div>\r\n              <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\r\n                @for (hue of hues; track $index) {\r\n                  <div role=\"presentation\" class=\"cursor-pointer\"\r\n                    (click)=\"selectHue(hue)\">\r\n                    <mat-option\r\n                      class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent hover:opacity-50\"\r\n                      [value]=\"selectedHue\">\r\n                      @if (selectedColor.color===selectedPalette + '-' + hue) {\r\n                        <mat-icon class=\"absolute m-3 text-white\"\r\n                        [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n                      }\r\n                      <span class=\"flex w-10 h-10 m-1 rounded-full\"\r\n                      [ngClass]=\"selectedPalette + '-' + hue\"></span>\r\n                    </mat-option>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  </mat-select>\r\n</div>", styles: ["cmat-material-color-picker .mat-mdc-select-arrow-wrapper{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CmatMaterialColorPickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: CmatMaterialColorPickerComponent, isStandalone: true, selector: "cmat-material-color-picker", inputs: { color: "color", title: "title", readonly: "readonly" }, outputs: { colorChanged: "colorChanged" }, providers: [CMAT_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR], exportAs: ["cmatMaterialColorPicker"], ngImport: i0, template: "<div class=\"rounded\" [ngClass]=\"selectedColor.color\">\r\n  <mat-select value=\"init\" panelClass=\"min-w-64\" [disableOptionCentering]=\"true\" [hideSingleSelectionIndicator]=\"true\"\r\n    [disabled]=\"readonly\" (openedChange)=\"onMenuOpen($event)\">\r\n    <mat-select-trigger class=\"flex p-1\">\r\n      <mat-icon [svgIcon]=\"'heroicons_outline:paint-brush'\"></mat-icon>\r\n    </mat-select-trigger>\r\n\r\n    <header class=\"shadow flex flex-row content-between justify-between p-2\" [ngClass]=\"'accent'\">\r\n      <button type=\"button\" mat-icon-button class=\"secondary-text\" aria-label=\"\u8C03\u8272\u677F\"\r\n        [class.invisible]=\"view === 'palettes'\" (click)=\"goToPalettesView()\">\r\n        <mat-icon svgIcon=\"mat_outline:arrow_back\"></mat-icon>\r\n      </button>\r\n      <span class=\"align-middle leading-loose text-xl font-bold\">{{title}}</span>\r\n      <button type=\"button\" mat-icon-button class=\"remove-color-button secondary-text\" aria-label=\"\u79FB\u9664\u989C\u8272\"\r\n        matTooltip=\"\u79FB\u9664\u989C\u8272\" (click)=\"removeColor()\">\r\n        <mat-icon color=\"warn\" [svgIcon]=\"'mat_outline:cleaning_services'\"></mat-icon>\r\n      </button>\r\n    </header>\r\n\r\n    <div class=\"flex flex-wrap w-60 m-2\">\r\n      <mat-option value=\"init\" class=\"hidden\">\u521D\u59CB\u5316</mat-option>\r\n      <div>\r\n        @switch (view) {\r\n          @case ('palettes') {\r\n            <div>\r\n              <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\r\n                @for (palette of palettes; track $index) {\r\n                  <div role=\"presentation\"\r\n                    class=\"cursor-pointer\" (click)=\"selectPalette(palette)\">\r\n                    <mat-option\r\n                      class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent hover:opacity-50\"\r\n                      [value]=\"selectedPalette\">\r\n                      @if (selectedColor.color===palette + '-' + selectedHue) {\r\n                        <mat-icon class=\"absolute m-3 text-white\"\r\n                        [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n                      }\r\n                      <span class=\"flex w-10 h-10 m-1 rounded-full\"\r\n                      [ngClass]=\"palette + '-' + selectedHue\"></span>\r\n                    </mat-option>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n          @case ('hues') {\r\n            <div>\r\n              <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\r\n                @for (hue of hues; track $index) {\r\n                  <div role=\"presentation\" class=\"cursor-pointer\"\r\n                    (click)=\"selectHue(hue)\">\r\n                    <mat-option\r\n                      class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent hover:opacity-50\"\r\n                      [value]=\"selectedHue\">\r\n                      @if (selectedColor.color===selectedPalette + '-' + hue) {\r\n                        <mat-icon class=\"absolute m-3 text-white\"\r\n                        [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n                      }\r\n                      <span class=\"flex w-10 h-10 m-1 rounded-full\"\r\n                      [ngClass]=\"selectedPalette + '-' + hue\"></span>\r\n                    </mat-option>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  </mat-select>\r\n</div>", styles: ["cmat-material-color-picker .mat-mdc-select-arrow-wrapper{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: CmatMaterialColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CmatMaterialColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-material-color-picker', animations: cmatAnimations, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatMaterialColorPicker', providers: [CMAT_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR], standalone: true, imports: [NgClass, MatSelectModule, MatIconModule, MatButtonModule, MatTooltipModule], template: "<div class=\"rounded\" [ngClass]=\"selectedColor.color\">\r\n  <mat-select value=\"init\" panelClass=\"min-w-64\" [disableOptionCentering]=\"true\" [hideSingleSelectionIndicator]=\"true\"\r\n    [disabled]=\"readonly\" (openedChange)=\"onMenuOpen($event)\">\r\n    <mat-select-trigger class=\"flex p-1\">\r\n      <mat-icon [svgIcon]=\"'heroicons_outline:paint-brush'\"></mat-icon>\r\n    </mat-select-trigger>\r\n\r\n    <header class=\"shadow flex flex-row content-between justify-between p-2\" [ngClass]=\"'accent'\">\r\n      <button type=\"button\" mat-icon-button class=\"secondary-text\" aria-label=\"\u8C03\u8272\u677F\"\r\n        [class.invisible]=\"view === 'palettes'\" (click)=\"goToPalettesView()\">\r\n        <mat-icon svgIcon=\"mat_outline:arrow_back\"></mat-icon>\r\n      </button>\r\n      <span class=\"align-middle leading-loose text-xl font-bold\">{{title}}</span>\r\n      <button type=\"button\" mat-icon-button class=\"remove-color-button secondary-text\" aria-label=\"\u79FB\u9664\u989C\u8272\"\r\n        matTooltip=\"\u79FB\u9664\u989C\u8272\" (click)=\"removeColor()\">\r\n        <mat-icon color=\"warn\" [svgIcon]=\"'mat_outline:cleaning_services'\"></mat-icon>\r\n      </button>\r\n    </header>\r\n\r\n    <div class=\"flex flex-wrap w-60 m-2\">\r\n      <mat-option value=\"init\" class=\"hidden\">\u521D\u59CB\u5316</mat-option>\r\n      <div>\r\n        @switch (view) {\r\n          @case ('palettes') {\r\n            <div>\r\n              <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\r\n                @for (palette of palettes; track $index) {\r\n                  <div role=\"presentation\"\r\n                    class=\"cursor-pointer\" (click)=\"selectPalette(palette)\">\r\n                    <mat-option\r\n                      class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent hover:opacity-50\"\r\n                      [value]=\"selectedPalette\">\r\n                      @if (selectedColor.color===palette + '-' + selectedHue) {\r\n                        <mat-icon class=\"absolute m-3 text-white\"\r\n                        [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n                      }\r\n                      <span class=\"flex w-10 h-10 m-1 rounded-full\"\r\n                      [ngClass]=\"palette + '-' + selectedHue\"></span>\r\n                    </mat-option>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n          @case ('hues') {\r\n            <div>\r\n              <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\r\n                @for (hue of hues; track $index) {\r\n                  <div role=\"presentation\" class=\"cursor-pointer\"\r\n                    (click)=\"selectHue(hue)\">\r\n                    <mat-option\r\n                      class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent hover:opacity-50\"\r\n                      [value]=\"selectedHue\">\r\n                      @if (selectedColor.color===selectedPalette + '-' + hue) {\r\n                        <mat-icon class=\"absolute m-3 text-white\"\r\n                        [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n                      }\r\n                      <span class=\"flex w-10 h-10 m-1 rounded-full\"\r\n                      [ngClass]=\"selectedPalette + '-' + hue\"></span>\r\n                    </mat-option>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  </mat-select>\r\n</div>", styles: ["cmat-material-color-picker .mat-mdc-select-arrow-wrapper{display:none!important}\n"] }]
+            args: [{ selector: 'cmat-material-color-picker', animations: cmatAnimations, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatMaterialColorPicker', providers: [CMAT_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR], imports: [NgClass, MatSelectModule, MatIconModule, MatButtonModule, MatTooltipModule], template: "<div class=\"rounded\" [ngClass]=\"selectedColor.color\">\r\n  <mat-select value=\"init\" panelClass=\"min-w-64\" [disableOptionCentering]=\"true\" [hideSingleSelectionIndicator]=\"true\"\r\n    [disabled]=\"readonly\" (openedChange)=\"onMenuOpen($event)\">\r\n    <mat-select-trigger class=\"flex p-1\">\r\n      <mat-icon [svgIcon]=\"'heroicons_outline:paint-brush'\"></mat-icon>\r\n    </mat-select-trigger>\r\n\r\n    <header class=\"shadow flex flex-row content-between justify-between p-2\" [ngClass]=\"'accent'\">\r\n      <button type=\"button\" mat-icon-button class=\"secondary-text\" aria-label=\"\u8C03\u8272\u677F\"\r\n        [class.invisible]=\"view === 'palettes'\" (click)=\"goToPalettesView()\">\r\n        <mat-icon svgIcon=\"mat_outline:arrow_back\"></mat-icon>\r\n      </button>\r\n      <span class=\"align-middle leading-loose text-xl font-bold\">{{title}}</span>\r\n      <button type=\"button\" mat-icon-button class=\"remove-color-button secondary-text\" aria-label=\"\u79FB\u9664\u989C\u8272\"\r\n        matTooltip=\"\u79FB\u9664\u989C\u8272\" (click)=\"removeColor()\">\r\n        <mat-icon color=\"warn\" [svgIcon]=\"'mat_outline:cleaning_services'\"></mat-icon>\r\n      </button>\r\n    </header>\r\n\r\n    <div class=\"flex flex-wrap w-60 m-2\">\r\n      <mat-option value=\"init\" class=\"hidden\">\u521D\u59CB\u5316</mat-option>\r\n      <div>\r\n        @switch (view) {\r\n          @case ('palettes') {\r\n            <div>\r\n              <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\r\n                @for (palette of palettes; track $index) {\r\n                  <div role=\"presentation\"\r\n                    class=\"cursor-pointer\" (click)=\"selectPalette(palette)\">\r\n                    <mat-option\r\n                      class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent hover:opacity-50\"\r\n                      [value]=\"selectedPalette\">\r\n                      @if (selectedColor.color===palette + '-' + selectedHue) {\r\n                        <mat-icon class=\"absolute m-3 text-white\"\r\n                        [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n                      }\r\n                      <span class=\"flex w-10 h-10 m-1 rounded-full\"\r\n                      [ngClass]=\"palette + '-' + selectedHue\"></span>\r\n                    </mat-option>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n          @case ('hues') {\r\n            <div>\r\n              <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\r\n                @for (hue of hues; track $index) {\r\n                  <div role=\"presentation\" class=\"cursor-pointer\"\r\n                    (click)=\"selectHue(hue)\">\r\n                    <mat-option\r\n                      class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent hover:opacity-50\"\r\n                      [value]=\"selectedHue\">\r\n                      @if (selectedColor.color===selectedPalette + '-' + hue) {\r\n                        <mat-icon class=\"absolute m-3 text-white\"\r\n                        [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n                      }\r\n                      <span class=\"flex w-10 h-10 m-1 rounded-full\"\r\n                      [ngClass]=\"selectedPalette + '-' + hue\"></span>\r\n                    </mat-option>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  </mat-select>\r\n</div>", styles: ["cmat-material-color-picker .mat-mdc-select-arrow-wrapper{display:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { colorChanged: [{
                 type: Output
             }], color: [{