@ikilote/magma
Version:
Magma: personal components for Angular.
602 lines (593 loc) • 334 kB
JavaScript
import * as i0 from '@angular/core';
import { ChangeDetectionStrategy, Component, Injectable, input, model, contentChildren, viewChild, output, signal, booleanAttribute, HostListener, Input, Directive, inject, ElementRef, ChangeDetectorRef, computed, HostBinding, Injector, viewChildren, forwardRef, Pipe, numberAttribute, RendererFactory2, NgModule, Renderer2 } from '@angular/core';
import { CdkDrag } from '@angular/cdk/drag-drop';
import * as i1 from '@angular/forms';
import { FormsModule, NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule, NgModel, FormBuilder, Validators, FormGroup, FormRecord, FormArray, FormControl } from '@angular/forms';
import Color from 'colorjs.io';
import { Overlay } from '@angular/cdk/overlay';
import * as i2 from '@angular/cdk/portal';
import { ComponentPortal, CdkPortal, PortalModule } from '@angular/cdk/portal';
import * as i1$1 from '@angular/common';
import { NgComponentOutlet, DatePipe, CommonModule } from '@angular/common';
import { Subscription, Subject, fromEvent, debounceTime, skip, distinctUntilChanged, firstValueFrom } from 'rxjs';
import { NumFormatter } from '@ikilote/num-formatter';
import { Select2 } from 'ng-select2-component';
import autosize from 'autosize';
import { RouterLink } from '@angular/router';
import Bowser from 'bowser';
class MagmaBlock {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MagmaBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.2", type: MagmaBlock, isStandalone: true, selector: "mg-block", ngImport: i0, template: "<div><ng-content></ng-content></div>\n", styles: [":host{display:block;box-shadow:var(--block-shadow);border:var(--block-border);border-radius:var(--block-radius)}:host>div{margin:var(--block-margin)}:host[tabindex]:not(button,a[href]):hover{background:var(--click-enter-block-hover-background)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MagmaBlock, decorators: [{
type: Component,
args: [{ selector: 'mg-block', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div><ng-content></ng-content></div>\n", styles: [":host{display:block;box-shadow:var(--block-shadow);border:var(--block-border);border-radius:var(--block-radius)}:host>div{margin:var(--block-margin)}:host[tabindex]:not(button,a[href]):hover{background:var(--click-enter-block-hover-background)}\n"] }]
}] });
var LoggerLevel;
(function (LoggerLevel) {
LoggerLevel[LoggerLevel["log"] = 0] = "log";
LoggerLevel[LoggerLevel["info"] = 1] = "info";
LoggerLevel[LoggerLevel["debug"] = 2] = "debug";
LoggerLevel[LoggerLevel["warn"] = 3] = "warn";
LoggerLevel[LoggerLevel["error"] = 4] = "error";
})(LoggerLevel || (LoggerLevel = {}));
/**
* For persistence during the session of use
*/
class Logger {
static { this.minLogLevel = 'info'; }
static { this.suffix = ''; }
log(value, level = LoggerLevel.log, ...values) {
if (level < LoggerLevel[Logger.minLogLevel || 'info'] || 0) {
return;
}
switch (level) {
case LoggerLevel.log:
console.log(Logger.suffix + value, ...values);
break;
case LoggerLevel.info:
console.info(Logger.suffix + value, ...values);
break;
case LoggerLevel.debug:
console.debug(Logger.suffix + value, ...values);
break;
case LoggerLevel.warn:
console.warn(Logger.suffix + value, ...values);
break;
case LoggerLevel.error:
console.error(Logger.suffix + value, ...values);
break;
}
}
error(value, ...values) {
this.log(value, LoggerLevel.error, ...values);
}
info(value, ...values) {
this.log(value, LoggerLevel.info, ...values);
}
debug(value, ...values) {
this.log(value, LoggerLevel.debug, ...values);
}
warn(value, ...values) {
this.log(value, LoggerLevel.warn, ...values);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: Logger, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: Logger, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: Logger, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
class MagmaTabContent {
constructor() {
// input
this.id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
this.selected = model(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MagmaTabContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: MagmaTabContent, isStandalone: true, selector: "mg-tab-content", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, host: { properties: { "attr.id": "id()" } }, ngImport: i0, template: "@if (selected()) {\n <ng-content></ng-content>\n}\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MagmaTabContent, decorators: [{
type: Component,
args: [{ selector: 'mg-tab-content', host: {
'[attr.id]': 'id()',
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (selected()) {\n <ng-content></ng-content>\n}\n" }]
}] });
class MagmaTabs {
constructor() {
// content/view
this.titles = contentChildren(MagmaTabTitle, ...(ngDevMode ? [{ debugName: "titles" }] : []));
this.content = contentChildren(MagmaTabContent, ...(ngDevMode ? [{ debugName: "content" }] : []));
this.tablist = viewChild.required('tablist');
this.tabpanel = viewChild('tabpanel', ...(ngDevMode ? [{ debugName: "tabpanel" }] : []));
// input
this.returnTabsLabel = input('Return to tabs', ...(ngDevMode ? [{ debugName: "returnTabsLabel" }] : []));
// output
this.tabChange = output();
this.prev = signal(false, ...(ngDevMode ? [{ debugName: "prev" }] : []));
this.next = signal(false, ...(ngDevMode ? [{ debugName: "next" }] : []));
}
ngAfterContentInit() {
if (this.titles()?.length) {
const ids = {};
let selected = false;
this.titles().forEach(e => {
const id = e.id();
if (id) {
ids[id] = e.selected();
if (ids[id]) {
selected = true;
}
}
});
if (!selected) {
const first = this.titles()[0];
first.selected.set(true);
ids[first.id()] = true;
}
this.content().forEach(e => {
const id = e.id();
if (id) {
e.selected.set(ids[id]);
}
});
}
}
ngAfterViewChecked() {
const div = this.tablist().nativeElement;
const clientWidth = div.clientWidth;
const scrollWidth = div.scrollWidth;
const scrollLeft = div.scrollLeft;
if (clientWidth < scrollWidth) {
if (scrollLeft > 15 && !this.prev()) {
this.prev.set(true);
}
else if (scrollLeft === 0 && this.prev()) {
this.prev.set(false);
}
if (scrollLeft + clientWidth < scrollWidth - 15 && !this.next()) {
this.next.set(true);
}
else if (scrollLeft + clientWidth === scrollWidth && this.next()) {
this.next.set(false);
}
}
else {
if (this.prev()) {
this.prev.set(false);
}
if (this.next()) {
this.next.set(false);
}
}
}
update(id, emit = true) {
this.titles()?.forEach(e => {
if (e.id()) {
e.selected.set(e.id() === id);
}
});
this.ngAfterContentInit();
if (emit) {
this.tabChange.emit(id);
}
}
returnTabs() {
this.titles().forEach(e => {
if (e.selected()) {
e.element.nativeElement.focus();
}
});
}
moveTabs(update, dist) {
if (update && dist) {
this.tablist().nativeElement.scrollLeft += dist;
this.updateInterval = setInterval(() => {
this.tablist().nativeElement.scrollLeft += dist;
}, 50);
}
else {
clearInterval(this.updateInterval);
this.updateInterval = undefined;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MagmaTabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.2", type: MagmaTabs, isStandalone: true, selector: "mg-tabs", inputs: { returnTabsLabel: { classPropertyName: "returnTabsLabel", publicName: "returnTabsLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, queries: [{ propertyName: "titles", predicate: MagmaTabTitle, isSignal: true }, { propertyName: "content", predicate: MagmaTabContent, isSignal: true }], viewQueries: [{ propertyName: "tablist", first: true, predicate: ["tablist"], descendants: true, isSignal: true }, { propertyName: "tabpanel", first: true, predicate: ["tabpanel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tabs\" role=\"tablist\">\n <div><!-- not remove for align --></div>\n <button\n class=\"prev\"\n [class.show]=\"prev()\"\n (mousedown)=\"moveTabs(true, -10)\"\n (mouseup)=\"moveTabs(false)\"\n (mouseout)=\"moveTabs(false)\"\n >\n \u00AB\n </button>\n <nav #tablist (scroll)=\"ngAfterViewChecked()\">\n <ng-content select=\"mg-tab-title\"></ng-content>\n </nav>\n <button\n class=\"next\"\n [class.show]=\"next()\"\n (mousedown)=\"moveTabs(true, 10)\"\n (mouseup)=\"moveTabs(false)\"\n (mouseout)=\"moveTabs(false)\"\n >\n \u00BB\n </button>\n</div>\n<div class=\"content\" role=\"tabpanel\" tabindex=\"-1\" #tabpanel>\n <ng-content select=\"mg-tab-content\"></ng-content>\n</div>\n<div class=\"visually-hidden-focusable\">\n <button (click)=\"returnTabs()\">{{ returnTabsLabel() }}</button>\n</div>\n", styles: [":host div{all:unset}:host .tabs{display:flex;position:relative;align-items:stretch;margin-bottom:5px;min-height:42px}:host .tabs nav{display:flex;flex:1 1 auto;gap:10px;border-bottom:1px solid var(--tabs-line-color);overflow-y:auto}:host .tabs button{display:none;margin:0 3px;padding:6px}:host .tabs button.show{display:block}:host .content{display:block;width:100%}:host .visually-hidden-focusable button{margin-top:15px}:host.compact>.tabs{gap:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MagmaTabs, decorators: [{
type: Component,
args: [{ selector: 'mg-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tabs\" role=\"tablist\">\n <div><!-- not remove for align --></div>\n <button\n class=\"prev\"\n [class.show]=\"prev()\"\n (mousedown)=\"moveTabs(true, -10)\"\n (mouseup)=\"moveTabs(false)\"\n (mouseout)=\"moveTabs(false)\"\n >\n \u00AB\n </button>\n <nav #tablist (scroll)=\"ngAfterViewChecked()\">\n <ng-content select=\"mg-tab-title\"></ng-content>\n </nav>\n <button\n class=\"next\"\n [class.show]=\"next()\"\n (mousedown)=\"moveTabs(true, 10)\"\n (mouseup)=\"moveTabs(false)\"\n (mouseout)=\"moveTabs(false)\"\n >\n \u00BB\n </button>\n</div>\n<div class=\"content\" role=\"tabpanel\" tabindex=\"-1\" #tabpanel>\n <ng-content select=\"mg-tab-content\"></ng-content>\n</div>\n<div class=\"visually-hidden-focusable\">\n <button (click)=\"returnTabs()\">{{ returnTabsLabel() }}</button>\n</div>\n", styles: [":host div{all:unset}:host .tabs{display:flex;position:relative;align-items:stretch;margin-bottom:5px;min-height:42px}:host .tabs nav{display:flex;flex:1 1 auto;gap:10px;border-bottom:1px solid var(--tabs-line-color);overflow-y:auto}:host .tabs button{display:none;margin:0 3px;padding:6px}:host .tabs button.show{display:block}:host .content{display:block;width:100%}:host .visually-hidden-focusable button{margin-top:15px}:host.compact>.tabs{gap:5px}\n"] }]
}] });
class MagmaClickEnterDirective {
constructor() {
// don't change: https://github.com/angular/angular/issues/50510
this.disabled = false;
this.clickEnter = output();
}
onClick(event) {
if (!this.disabled) {
this.clickEnter.emit(event);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MagmaClickEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.1.2", type: MagmaClickEnterDirective, isStandalone: true, selector: "[clickEnter]", inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { clickEnter: "clickEnter" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)" }, properties: { "class.click-enter": "true", "attr.tabindex": "!disabled ? 0 : null", "role": "!disabled ? 'button' : null" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MagmaClickEnterDirective, decorators: [{
type: Directive,
args: [{
selector: '[clickEnter]',
host: {
'[class.click-enter]': 'true',
'[attr.tabindex]': '!disabled ? 0 : null',
'[role]': "!disabled ? 'button' : null",
},
}]
}], propDecorators: { disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}, {
type: HostListener,
args: ['keydown.enter', ['$event']]
}] } });
class MagmaTabTitle {
constructor() {
// inject
this.tabs = inject(MagmaTabs, { host: true });
this.click = inject(MagmaClickEnterDirective);
this.element = inject((ElementRef));
// input
this.id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
this.selected = model(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
this.click.clickEnter.subscribe(() => {
this.onclick();
});
}
focusLeft() {
this.tabs.titles()[Math.max(0, this.tabs.titles().indexOf(this) - 1)].element.nativeElement.focus();
}
focusRight() {
this.tabs
.titles()[Math.min(this.tabs.titles().length - 1, this.tabs.titles().indexOf(this) + 1)].element.nativeElement.focus();
}
ngOnInit() {
if (this.selected()) {
this.onclick();
}
}
ngOnChanges(changes) {
if (changes['selected']?.currentValue) {
this.onclick();
}
}
onclick() {
if (this.tabs && this.id()) {
setTimeout(() => {
this.tabs.update(this.id());
this.tabs.tabpanel()?.nativeElement.focus();
});
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MagmaTabTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.2", type: MagmaTabTitle, isStandalone: true, selector: "mg-tab-title", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown.ArrowLeft": "focusLeft()", "keydown.ArrowRight": "focusRight()" }, properties: { "attr.id": "id()", "class.selected": "selected()" } }, usesOnChanges: true, hostDirectives: [{ directive: MagmaClickEnterDirective }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;cursor:pointer;border-bottom:5px solid var(--tab-border-color);padding:5px 20px;font-weight:700;font-size:20px}:host:not(.selected){color:var(--tab-text-color)}:host.selected{border-color:var(--tab-select-border-color)}:host:hover{border-color:var(--tab-hover-border-color);color:var(--tab-text-border-color)}.compact>.tabs>:host{border-bottom:3px solid var(--tab-border-color);padding:3px 10px;font-weight:500;font-size:14px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MagmaTabTitle, decorators: [{
type: Component,
args: [{ selector: 'mg-tab-title', host: {
'[attr.id]': 'id()',
'[class.selected]': 'selected()',
tabindex: '0',
}, hostDirectives: [MagmaClickEnterDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:block;cursor:pointer;border-bottom:5px solid var(--tab-border-color);padding:5px 20px;font-weight:700;font-size:20px}:host:not(.selected){color:var(--tab-text-color)}:host.selected{border-color:var(--tab-select-border-color)}:host:hover{border-color:var(--tab-hover-border-color);color:var(--tab-text-border-color)}.compact>.tabs>:host{border-bottom:3px solid var(--tab-border-color);padding:3px 10px;font-weight:500;font-size:14px}\n"] }]
}], ctorParameters: () => [], propDecorators: { focusLeft: [{
type: HostListener,
args: ['keydown.ArrowLeft']
}], focusRight: [{
type: HostListener,
args: ['keydown.ArrowRight']
}] } });
const magmaColorPickerPalette = [
// line 1
'#99c1f1',
'#8ff0a4',
'#f9f06b',
'#ffbe6f',
'#f66151',
'#dc8add',
'#cdab8f',
'#fff',
'#777',
// line 2
'#62a0ea',
'#57e389',
'#f8e45c',
'#ffa348',
'#ed333b',
'#c061cb',
'#b5835a',
'#f6f6f6',
'#5e5e5e',
// line 3
'#3584e4',
'#33d17a',
'#f6d32d',
'#ff7800',
'#e01b24',
'#9141ac',
'#986a44',
'#ddd',
'#3d3d3d',
// line 4
'#1c71d8',
'#2ec27e',
'#f5c211',
'#e66100',
'#c01c28',
'#813d9c',
'#865e3c',
'#c0c0c0',
'#313131',
// line 5
'#1a5fb4',
'#26a269',
'#e5a50a',
'#c64600',
'#a51d2d',
'#613583',
'#63452c',
'#9a9a9a',
'#000',
];
class MagmaColorPickerComponent {
constructor() {
this.logger = inject(Logger);
this.cd = inject(ChangeDetectorRef);
this.zone = viewChild.required('cursorZone');
this.drag = viewChild.required(CdkDrag);
this.color = input('', ...(ngDevMode ? [{ debugName: "color" }] : []));
this.embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
this.alpha = input(false, ...(ngDevMode ? [{ debugName: "alpha", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
this.clearButton = input(false, ...(ngDevMode ? [{ debugName: "clearButton", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
this.texts = input({}, ...(ngDevMode ? [{ debugName: "texts" }] : []));
this.palette = input(...(ngDevMode ? [undefined, { debugName: "palette" }] : []));
this.datalist = input(...(ngDevMode ? [undefined, { debugName: "datalist" }] : []));
this.colorChange = output();
this.rangeHue = 0;
this.rangeAlpha = 1;
this.rangeLight = 0;
this.rangeSature = 0;
this.hsla = '';
this.rgba = '';
this.hexa = '';
this.pos = { x: 0, y: 0 };
this._palette = computed(() => (this.palette()?.length ? this.palette() : magmaColorPickerPalette), ...(ngDevMode ? [{ debugName: "_palette" }] : []));
this.startDrag = false;
}
ngOnChanges(changes) {
if (changes['color'] && changes['color'].currentValue) {
try {
const colorObject = new Color(changes['color'].currentValue);
if (!this.alpha()) {
colorObject.alpha = 1;
}
this.updateWithHLS(colorObject);
}
catch (e) {
this.logger.log('[MagmaColorPickerComponent] Invalid color');
}
}
else if (changes['alpha'] && !changes['alpha'].currentValue && this.rangeAlpha !== 1) {
const color = this.hexa || this.color();
if (color) {
const colorObject = new Color(color);
if (!this.alpha()) {
colorObject.alpha = 1;
}
this.updateWithHLS(colorObject);
}
}
}
ngAfterViewInit() {
setTimeout(() => {
const color = this.color();
if (color) {
const colorObject = new Color(color);
if (!this.alpha()) {
colorObject.alpha = 1;
}
this.updateWithHLS(colorObject);
this.cd.detectChanges();
}
}, 0);
}
clear() {
this.rangeHue = 0;
this.rangeAlpha = 1;
this.rangeLight = 0;
this.rangeSature = 0;
this.hsla = '';
this.rgba = '';
this.hexa = '';
this.pos = { x: 0, y: 0 };
this.colorChange.emit(this.hexa);
}
dragStart() {
this.startDrag = true;
}
dragEnd(event) {
const { x, y } = event.source._dragRef['_activeTransform'];
const { clientWidth, clientHeight } = this.zone().nativeElement;
this.rangeLight = Math.round((x / (clientWidth - 10)) * 100);
this.rangeSature = Math.round((y / (clientHeight - 10)) * 100);
this.updateColor();
setTimeout(() => {
this.startDrag = false;
}, 10);
}
tabChange(id) {
if (id === 'hsl') {
setTimeout(() => {
this.updateHex(this.hexa);
this.cd.detectChanges();
}, 10);
}
}
updateHex(value) {
try {
const colorObject = new Color(value);
if (!this.alpha()) {
colorObject.alpha = 1;
}
this.updateWithHLS(colorObject);
}
catch (e) {
this.logger.log('[MagmaColorPickerComponent] Invalid color');
}
}
click(event) {
if (!this.startDrag && !this.readonly()) {
const { layerX, layerY } = event;
const { clientWidth, clientHeight } = this.zone().nativeElement;
this.rangeLight = Math.round((layerX / (clientWidth - 10)) * 100);
this.rangeSature = Math.round((layerY / (clientHeight - 10)) * 100);
this.drag().setFreeDragPosition({ x: layerX - 5, y: layerY - 5 });
this.updateColor();
}
}
updateWithHLS(color) {
const hls = color.toGamut({ space: 'hsl' }).to('hsl');
// value calculation
this.rangeHue = 360 - (hls.h || 0);
this.rangeAlpha = hls.alpha;
this.rangeSature = 100 - hls.s;
this.rangeLight = 100 - (100 * hls.l) / (100 - hls.s / 2);
// position calculation
const { clientWidth, clientHeight } = this.zone().nativeElement;
this.pos = {
x: ((clientWidth - 10) * (this.rangeLight > 0 ? this.rangeLight : 0)) / 100,
y: ((clientHeight - 10) * (this.rangeLight > 0 ? this.rangeSature : this.rangeSature - this.rangeLight)) /
100,
};
this.updateColor();
}
updateColor() {
const color = new Color('hsl', [
360 - this.rangeHue,
100 - this.rangeSature,
(50 + this.rangeSature / 2) * ((100 - this.rangeLight) / 100),
], this.alpha() ? this.rangeAlpha : 1);
this.hexa = color.toGamut({ space: 'srgb' }).to('srgb').toString({ format: 'hex' });
this.rgba = color.to('srgb').toString({ precision: 1 });
this.hsla = color.to('hsl').toString();
this.colorChange.emit(this.hexa);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MagmaColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: MagmaColorPickerComponent, isStandalone: true, selector: "color-picker", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, clearButton: { classPropertyName: "clearButton", publicName: "clearButton", isSignal: true, isRequired: false, transformFunction: null }, texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, datalist: { classPropertyName: "datalist", publicName: "datalist", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChange: "colorChange" }, host: { properties: { "style.--hue": "rangeHue", "style.--alpha.%": "rangeAlpha * 100", "class.embedded": "embedded()", "class.on-drag": "startDrag", "class.readonly": "readonly()" } }, viewQueries: [{ propertyName: "zone", first: true, predicate: ["cursorZone"], descendants: true, isSignal: true }, { propertyName: "drag", first: true, predicate: CdkDrag, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<mg-tabs (tabChange)=\"tabChange($event)\" class=\"compact\">\n <mg-tab-title id=\"hsl\">{{ texts()?.hsl ?? 'HSL' }}</mg-tab-title>\n <mg-tab-content id=\"hsl\" class=\"tab-hsl\">\n <div class=\"value\">\n <div class=\"gradient\">\n <div class=\"cursor-zone\" #cursorZone (click)=\"click($event)\">\n <div\n class=\"cursor\"\n cdkDrag\n cdkDragBoundary=\".cursor-zone\"\n (cdkDragStarted)=\"dragStart()\"\n (cdkDragEnded)=\"dragEnd($event)\"\n [cdkDragFreeDragPosition]=\"pos\"\n [cdkDragDisabled]=\"readonly()\"\n (click)=\"$event.stopPropagation()\"\n ></div>\n </div>\n </div>\n </div>\n <div class=\"hue\">\n <input\n type=\"range\"\n [(ngModel)]=\"rangeHue\"\n (ngModelChange)=\"updateColor()\"\n [disabled]=\"readonly()\"\n min=\"0\"\n max=\"360\"\n orient=\"vertical\"\n />\n </div>\n @if (alpha()) {\n <div class=\"alpha\">\n <input\n type=\"range\"\n [(ngModel)]=\"rangeAlpha\"\n (ngModelChange)=\"updateColor()\"\n [disabled]=\"readonly()\"\n min=\"0\"\n max=\"1\"\n step=\"0.001\"\n orient=\"vertical\"\n />\n </div>\n }\n </mg-tab-content>\n <mg-tab-title id=\"palette\">{{ texts()?.palette ?? 'Palette' }}</mg-tab-title>\n <mg-tab-content id=\"palette\">\n <div class=\"palette\">\n @for (color of _palette(); track $index) {\n <button (click)=\"updateHex(color)\" [style.--color]=\"color\" [class.selected]=\"color === hexa\"></button>\n }\n </div>\n @if (datalist()?.length) {\n <div class=\"palette\">\n @for (color of datalist(); track $index) {\n <button (click)=\"updateHex(color)\" [style.--color]=\"color\" [class.selected]=\"color === hexa\"></button>\n }\n </div>\n }\n </mg-tab-content>\n</mg-tabs>\n@if (hexa) {\n <div class=\"values\">\n <div class=\"color-view\" [style.--background]=\"hsla\"></div>\n <div class=\"hsla\">\n {{ hsla }}\n </div>\n <div class=\"rgba\">\n {{ rgba }}\n </div>\n <div class=\"input-zone\">\n <input type=\"text\" [ngModel]=\"hexa\" (ngModelChange)=\"updateHex($event)\" [disabled]=\"readonly()\" />\n @if (clearButton()) {\n <button (click)=\"clear()\">\u00D7</button>\n }\n </div>\n </div>\n}\n", styles: [":host{--thumb-height: 18px;--thumb-width: 18px}:host .tab-hsl{display:grid;grid-template:\"value hue alpha . \" \"values values values values\"/340px 1fr 1fr 0;gap:10px 30px}:host.embedded{transition-duration:0s;box-shadow:2px 2px 5px;background-color:var(--neutralA);padding:10px}:host.readonly .cursor-zone,:host.readonly .cursor{cursor:default}.value{display:flex;grid-area:value}.hue{display:flex;grid-area:hue;justify-content:center;align-items:center}.alpha{display:flex;grid-area:alpha;justify-content:center;align-items:center}.values{display:grid;grid-area:values;grid-template:\"color-view hsla\" \"color-view rgba\" \"color-view hexa\"/auto 1fr;gap:5px 30px}.input-zone{display:flex;align-items:center}.color-view{position:relative;grid-area:color-view;border:1px solid var(--neutral);background:conic-gradient(#ccc .25turn,#aaa .25turn .5turn,#ccc .5turn .75turn,#aaa .75turn) top left/15px 15px repeat;width:150px}.color-view:before{display:block;background:var(--background);height:100%;content:\"\"}.gradient{--margin: 10px;margin:var(--margin);background:linear-gradient(to left,black,transparent),linear-gradient(hsl(calc(360 - var(--hue, 0)),100%,50%),hsl(calc(360 - var(--hue, 0)),100%,100%));width:calc(100% - var(--margin) * 2);height:calc(100% - var(--margin) * 2)}.cursor-zone{--cursor-size: 10px;position:relative;cursor:crosshair;margin:calc((var(--cursor-size) - 2px) / -2);outline:1px solid var(--neutral);outline-offset:-3px;width:calc(100% + var(--cursor-size) - 2px);height:calc(100% + var(--cursor-size) - 2px)}:host.on-drag .cursor-zone{cursor:pointer}.cursor{position:absolute;cursor:pointer;margin:-1px 0 0 -1px;outline:2px solid black;border:1px solid white;border-radius:50%;width:var(--cursor-size);height:var(--cursor-size)}.hsla,.rgba{font-size:13px}input[type=range]{cursor:pointer;outline:none;border:0;background:transparent;--hue-background: linear-gradient( to bottom in hsl, hsl(0, 100%, 50%) 0%, hsl(90, 100%, 50%) 25%, hsl(180, 100%, 50%) 50%, hsl(270, 100%, 50%) 75%, hsl(360, 100%, 50%) 100% );--alpha-background: linear-gradient(to bottom, black 0%, transparent 100%), conic-gradient(#ccc .25turn, #aaa .25turn .5turn, #ccc .5turn .75turn, #aaa .75turn) top left / 5px 5px repeat}input[type=range]:focus{outline:none}@supports selector(::-webkit-slider-runnable-track){input[type=range]{appearance:none;height:150px}input[type=range]::-webkit-slider-runnable-track{appearance:none;border:1px solid var(--neutral);border-radius:0;background-color:transparent;width:20px;height:100%}.alpha>::-webkit-slider-runnable-track{background:var(--alpha-background);background-color:transparent}.hue>input::-webkit-slider-runnable-track{background-image:var(--hue-background);background-color:transparent}input[type=range]::-webkit-slider-thumb{appearance:none;margin-left:-6px;border:1px solid var(--neutral);border-radius:0;width:30px;height:5px}.alpha>input::-webkit-slider-thumb{background:hsl(0,0%,calc(100% - var(--alpha, 0%)))}.hue>input::-webkit-slider-thumb{background:hsl(calc(360 - var(--hue, 0)),100%,50%)}}@supports (background: -webkit-named-image(i)){input[type=range][orient=vertical]{appearance:slider-vertical;width:8px}input[type=range]::-webkit-slider-thumb{appearance:none}}@supports selector(::-moz-range-track){input[type=range]::-moz-range-track{border:1px solid var(--neutral);border-radius:0;width:20px;height:100%}.alpha>::-moz-range-track{background:var(--alpha-background)}.hue>::-moz-range-track{background:var(--hue-background)}input[type=range]::-moz-range-thumb{appearance:none;border:1px solid var(--neutral);border-radius:0;width:30px;height:5px}.alpha>::-moz-range-thumb{background:hsl(0,0%,calc(100% - var(--alpha, 0%)))}.hue>::-moz-range-thumb{background:hsl(calc(360 - var(--hue, 0)),100%,50%)}}.palette{display:grid;grid-template-columns:repeat(9,1fr);gap:1px;margin-bottom:10px}.palette button{all:revert;cursor:pointer;margin:0;border:1px solid var(--neutral);background-color:var(--color);padding:0;height:30px}.palette button:hover{border:1px solid var(--neutral5)}.palette button.selected{z-index:1;outline:3px solid #040404;outline-offset:-1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: MagmaTabs, selector: "mg-tabs", inputs: ["returnTabsLabel"], outputs: ["tabChange"] }, { kind: "component", type: MagmaTabTitle, selector: "mg-tab-title", inputs: ["id", "selected"], outputs: ["selectedChange"] }, { kind: "component", type: MagmaTabContent, selector: "mg-tab-content", inputs: ["id", "selected"], outputs: ["selectedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MagmaColorPickerComponent, decorators: [{
type: Component,
args: [{ selector: 'color-picker', imports: [FormsModule, CdkDrag, MagmaTabs, MagmaTabTitle, MagmaTabContent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[style.--hue]': 'rangeHue',
'[style.--alpha.%]': 'rangeAlpha * 100',
'[class.embedded]': 'embedded()',
'[class.on-drag]': 'startDrag',
'[class.readonly]': 'readonly()',
}, template: "<mg-tabs (tabChange)=\"tabChange($event)\" class=\"compact\">\n <mg-tab-title id=\"hsl\">{{ texts()?.hsl ?? 'HSL' }}</mg-tab-title>\n <mg-tab-content id=\"hsl\" class=\"tab-hsl\">\n <div class=\"value\">\n <div class=\"gradient\">\n <div class=\"cursor-zone\" #cursorZone (click)=\"click($event)\">\n <div\n class=\"cursor\"\n cdkDrag\n cdkDragBoundary=\".cursor-zone\"\n (cdkDragStarted)=\"dragStart()\"\n (cdkDragEnded)=\"dragEnd($event)\"\n [cdkDragFreeDragPosition]=\"pos\"\n [cdkDragDisabled]=\"readonly()\"\n (click)=\"$event.stopPropagation()\"\n ></div>\n </div>\n </div>\n </div>\n <div class=\"hue\">\n <input\n type=\"range\"\n [(ngModel)]=\"rangeHue\"\n (ngModelChange)=\"updateColor()\"\n [disabled]=\"readonly()\"\n min=\"0\"\n max=\"360\"\n orient=\"vertical\"\n />\n </div>\n @if (alpha()) {\n <div class=\"alpha\">\n <input\n type=\"range\"\n [(ngModel)]=\"rangeAlpha\"\n (ngModelChange)=\"updateColor()\"\n [disabled]=\"readonly()\"\n min=\"0\"\n max=\"1\"\n step=\"0.001\"\n orient=\"vertical\"\n />\n </div>\n }\n </mg-tab-content>\n <mg-tab-title id=\"palette\">{{ texts()?.palette ?? 'Palette' }}</mg-tab-title>\n <mg-tab-content id=\"palette\">\n <div class=\"palette\">\n @for (color of _palette(); track $index) {\n <button (click)=\"updateHex(color)\" [style.--color]=\"color\" [class.selected]=\"color === hexa\"></button>\n }\n </div>\n @if (datalist()?.length) {\n <div class=\"palette\">\n @for (color of datalist(); track $index) {\n <button (click)=\"updateHex(color)\" [style.--color]=\"color\" [class.selected]=\"color === hexa\"></button>\n }\n </div>\n }\n </mg-tab-content>\n</mg-tabs>\n@if (hexa) {\n <div class=\"values\">\n <div class=\"color-view\" [style.--background]=\"hsla\"></div>\n <div class=\"hsla\">\n {{ hsla }}\n </div>\n <div class=\"rgba\">\n {{ rgba }}\n </div>\n <div class=\"input-zone\">\n <input type=\"text\" [ngModel]=\"hexa\" (ngModelChange)=\"updateHex($event)\" [disabled]=\"readonly()\" />\n @if (clearButton()) {\n <button (click)=\"clear()\">\u00D7</button>\n }\n </div>\n </div>\n}\n", styles: [":host{--thumb-height: 18px;--thumb-width: 18px}:host .tab-hsl{display:grid;grid-template:\"value hue alpha . \" \"values values values values\"/340px 1fr 1fr 0;gap:10px 30px}:host.embedded{transition-duration:0s;box-shadow:2px 2px 5px;background-color:var(--neutralA);padding:10px}:host.readonly .cursor-zone,:host.readonly .cursor{cursor:default}.value{display:flex;grid-area:value}.hue{display:flex;grid-area:hue;justify-content:center;align-items:center}.alpha{display:flex;grid-area:alpha;justify-content:center;align-items:center}.values{display:grid;grid-area:values;grid-template:\"color-view hsla\" \"color-view rgba\" \"color-view hexa\"/auto 1fr;gap:5px 30px}.input-zone{display:flex;align-items:center}.color-view{position:relative;grid-area:color-view;border:1px solid var(--neutral);background:conic-gradient(#ccc .25turn,#aaa .25turn .5turn,#ccc .5turn .75turn,#aaa .75turn) top left/15px 15px repeat;width:150px}.color-view:before{display:block;background:var(--background);height:100%;content:\"\"}.gradient{--margin: 10px;margin:var(--margin);background:linear-gradient(to left,black,transparent),linear-gradient(hsl(calc(360 - var(--hue, 0)),100%,50%),hsl(calc(360 - var(--hue, 0)),100%,100%));width:calc(100% - var(--margin) * 2);height:calc(100% - var(--margin) * 2)}.cursor-zone{--cursor-size: 10px;position:relative;cursor:crosshair;margin:calc((var(--cursor-size) - 2px) / -2);outline:1px solid var(--neutral);outline-offset:-3px;width:calc(100% + var(--cursor-size) - 2px);height:calc(100% + var(--cursor-size) - 2px)}:host.on-drag .cursor-zone{cursor:pointer}.cursor{position:absolute;cursor:pointer;margin:-1px 0 0 -1px;outline:2px solid black;border:1px solid white;border-radius:50%;width:var(--cursor-size);height:var(--cursor-size)}.hsla,.rgba{font-size:13px}input[type=range]{cursor:pointer;outline:none;border:0;background:transparent;--hue-background: linear-gradient( to bottom in hsl, hsl(0, 100%, 50%) 0%, hsl(90, 100%, 50%) 25%, hsl(180, 100%, 50%) 50%, hsl(270, 100%, 50%) 75%, hsl(360, 100%, 50%) 100% );--alpha-background: linear-gradient(to bottom, black 0%, transparent 100%), conic-gradient(#ccc .25turn, #aaa .25turn .5turn, #ccc .5turn .75turn, #aaa .75turn) top left / 5px 5px repeat}input[type=range]:focus{outline:none}@supports selector(::-webkit-slider-runnable-track){input[type=range]{appearance:none;height:150px}input[type=range]::-webkit-slider-runnable-track{appearance:none;border:1px solid var(--neutral);border-radius:0;background-color:transparent;width:20px;height:100%}.alpha>::-webkit-slider-runnable-track{background:var(--alpha-background);background-color:transparent}.hue>input::-webkit-slider-runnable-track{background-image:var(--hue-background);background-color:transparent}input[type=range]::-webkit-slider-thumb{appearance:none;margin-left:-6px;border:1px solid var(--neutral);border-radius:0;width:30px;height:5px}.alpha>input::-webkit-slider-thumb{background:hsl(0,0%,calc(100% - var(--alpha, 0%)))}.hue>input::-webkit-slider-thumb{background:hsl(calc(360 - var(--hue, 0)),100%,50%)}}@supports (background: -webkit-named-image(i)){input[type=range][orient=vertical]{appearance:slider-vertical;width:8px}input[type=range]::-webkit-slider-thumb{appearance:none}}@supports selector(::-moz-range-track){input[type=range]::-moz-range-track{border:1px solid var(--neutral);border-radius:0;width:20px;height:100%}.alpha>::-moz-range-track{background:var(--alpha-background)}.hue>::-moz-range-track{background:var(--hue-background)}input[type=range]::-moz-range-thumb{appearance:none;border:1px solid var(--neutral);border-radius:0;width:30px;height:5px}.alpha>::-moz-range-thumb{background:hsl(0,0%,calc(100% - var(--alpha, 0%)))}.hue>::-moz-range-thumb{background:hsl(calc(360 - var(--hue, 0)),100%,50%)}}.palette{display:grid;grid-template-columns:repeat(9,1fr);gap:1px;margin-bottom:10px}.palette button{all:revert;cursor:pointer;margin:0;border:1px solid var(--neutral);background-color:var(--color);padding:0;height:30px}.palette button:hover{border:1px solid var(--neutral5)}.palette button.selected{z-index:1;outline:3px solid #040404;outline-offset:-1px}\n"] }]
}] });
const connectedPosition$1 = [
{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
{ originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
{ originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
];
class MagmaColorPicker {
constructor() {
this.overlay = inject(Overlay);
this.element = inject((ElementRef));
this.click = inject(MagmaClickEnterDirective);
this.colorPicker = input(...(ngDevMode ? [undefined, { debugName: "colorPicker" }] : []));
this.colorPickerAlpha = input(false, ...(ngDevMode ? [{ debugName: "colorPickerAlpha", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
this.colorPickerDisabled = input(false, ...(ngDevMode ? [{ debugName: "colorPickerDisabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
this.colorPickerReadonly = input(false, ...(ngDevMode ? [{ debugName: "colorPickerReadonly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
this.colorPickerClearButton = input(false, ...(ngDevMode ? [{ debugName: "colorPickerClearButton", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
this.colorPickerTexts = input(...(ngDevMode ? [undefined, { debugName: "colorPickerTexts" }] : []));
this.colorPickerPalette = input(...(ngDevMode ? [undefined, { debugName: "colorPickerPalette" }] : []));
this.colorPickerDatalist = input(...(ngDevMode ? [undefined, { debugName: "colorPickerDatalist" }] : []));
this.colorChange = output();
this.colorClose = output();
this.click.clickEnter.subscribe(event => {
this.open(event);
});
}
ngOnChanges(changes) {
if (changes['colorPickerAlpha']) {
MagmaColorPicker._component?.setInput('alpha', changes['colorPickerAlpha'].currentValue);
}
}
async open(event) {
if (this.colorPickerDisabled()) {
return;
}
const overlayRef = this.overlay.create({
hasBackdrop: true,
backdropClass: 'overlay-backdrop',
panelClass: 'overlay-panel',
scrollStrategy: this.overlay.scrollStrategies.block(),
positionStrategy: this.overlay
.position()
.flexibleConnectedTo(this.element)
.withPositions(connectedPosition$1),
});
const userProfilePortal = new ComponentPortal(MagmaColorPickerComponent);
let color = this.colorPicker();
let initColor = color;
const component = overlayRef.attach(userProfilePortal);
component.setInput('color', this.colorPicker());
component.setInput('alpha', this.colorPickerAlpha());
component.setInput('readonly', this.colorPickerReadonly());
component.setInput('clearButton', this.colorPickerClearButton());
component.setInput('palette', this.colorPickerPalette());
component.setInput('texts', this.colorPickerTexts());
component.setInput('datalist', this.colorPickerDatalist());
component.setInput('embedded', true);
this.updateEmit = component.instance.colorChange.subscribe(value => {
color = value;
this.colorChange.emit(value);
});
overlayRef.backdropClick().subscribe(() => {
this.close();
if (color !== undefined && color !== initColor) {
this.colorClose.emit(color);
}
});
MagmaColorPicker._overlayRef = overlayRef;
MagmaColorPicker._component = component;
event?.preventDefault();
event?.stopPropagation();
}
ngOnDestroy() {
this.updateEmit?.unsubscribe();
}
openKeyboard() {
this.open();
}
escape() {
this.close();
}
close() {
MagmaColorPicker._overlayRef?.dispose();
MagmaColorPicker._overlayRef = undefined;
MagmaColorPicker._component = undefined;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MagmaColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.2", type: MagmaColorPicker, isStandalone: true, selector: "[colorPicker]", inputs: { colorPicker: { classPropertyName: "colorPicker", publicName: "colorPicker", isSignal: true, isRequired: false, transformFunction: null }, colorPickerAlpha: { classPropertyName: "colorPickerAlpha", publicName: "colorPickerAlpha", isSignal: true, isRequired: false, transformFunction: null }, colorPickerDisabled: { classPropertyName: "colorPickerDisabled", publicName: "colorPickerDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorPickerReadonly: { classPropertyName: "colorPickerReadonly", publicName: "colorPickerReadonly", isSignal: true, isRequired: false, transformFunction: null }, colorPickerClearButton: { classPropertyName: "colorPickerClearButton", publicName: "colorPickerClearButton", isSignal: true, isRequired: false, transformFunction: null }, colorPickerTexts: { classPropertyName: "colorPickerTexts", publicName: "colorPickerTexts", isSignal: true, isRequired: false, transformFunction: null }, colorPickerPalette: { classPropertyName: "colorPickerPalette", publicName: "colorPickerPalette", isSignal: true, isRequired: false, transformFunction: null }, colorPickerDatalist: { classPropertyName: "colorPickerDatalist", publicName: "colorPickerDatalist", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChange: "colorChange", colorClose: "colorClose" }, host: { listeners: { "keydown.space": "openKeyboard($event)", "document:keydown.escape": "escape($event)" }, properties: { "class.color-picker": "true", "tabIndex": "colorPickerDisabled() ? -1 : 0" } }, usesOnChanges: true, hostDirectives: [{ directive: MagmaClickEnterDirective }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MagmaColorPicker, decorators: [{
type: Directive,
args: [{
selector: '[colorPicker]',
host: {
'[class.color-picker]': 'true',
'[tabIndex]': 'colorPickerDisabled() ? -1 : 0',