@taiga-ui/kit
Version:
Taiga UI Angular main components kit
101 lines (96 loc) • 10.4 kB
JavaScript
import { NgIf } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, signal, computed, Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
import * as i3 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i1 from '@maskito/angular';
import { MaskitoDirective } from '@maskito/angular';
import { maskitoPrefixPostprocessorGenerator, maskitoAddOnFocusPlugin, maskitoRemoveOnBlurPlugin } from '@maskito/kit';
import { TuiControl, tuiAsControl } from '@taiga-ui/cdk/classes';
import { tuiFallbackValueProvider } from '@taiga-ui/cdk/tokens';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiDirectiveBinding } from '@taiga-ui/cdk/utils/miscellaneous';
import * as i2 from '@taiga-ui/core/components/textfield';
import { TuiTextfieldContent, TuiWithTextfield } from '@taiga-ui/core/components/textfield';
import { TuiIcons } from '@taiga-ui/core/directives/icons';
import * as i4 from '@taiga-ui/kit/components/slider';
import { tuiSliderOptionsProvider, TuiSlider } from '@taiga-ui/kit/components/slider';
import { tuiMaskito } from '@taiga-ui/kit/utils';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
const [TUI_INPUT_COLOR_OPTIONS, tuiInputColorOptionsProvider] = tuiCreateOptions({
format: 'hex',
align: 'left',
});
const REGEX = /[0-9a-fA-F]/;
class TuiInputColor extends TuiControl {
constructor() {
super(...arguments);
this.options = inject(TUI_INPUT_COLOR_OPTIONS);
this.el = tuiInjectElement();
this.list = this.el.getAttribute('list');
this.format = signal(this.options.format);
this.align = signal(this.options.align);
this.icon = tuiDirectiveBinding(TuiIcons, 'iconStart', computed(() => this.align() === 'left'
? '"data:image/svg+xml;utf8,<svg xmlns=http://www.w3.org/2000/svg></svg>"'
: ''), {});
this.maskito = tuiMaskito(computed((length = this.format().length * 2) => ({
mask: ['#', ...Array.from({ length }).fill(REGEX)],
postprocessors: [maskitoPrefixPostprocessorGenerator('#')],
plugins: [maskitoAddOnFocusPlugin('#'), maskitoRemoveOnBlurPlugin('#')],
overwriteMode: 'replace',
})));
this.filled = computed(() => this.format() === 'hex' ? this.value().length === 7 : this.value().length === 9);
this.opacity = computed(() => this.filled() && this.format() === 'hexa'
? Number.parseInt(this.value().slice(-2), 16)
: 255);
}
set alignSetter(align) {
this.align.set(align);
}
set formatSetter(mode) {
this.format.set(mode);
}
onInput(value) {
this.onChange(this.format() === 'hex' ? value : `${value}${toHex(this.opacity())}`);
}
onOpacity(opacity) {
const value = this.filled() ? this.value().slice(0, 7) : '#000000';
this.onChange(`${value}${toHex(opacity)}`);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputColor, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputColor, isStandalone: true, selector: "input[tuiInputColor]", inputs: { alignSetter: ["align", "alignSetter"], formatSetter: ["format", "formatSetter"] }, host: { attributes: { "ngSkipHydration": "true", "inputmode": "numeric", "spellcheck": "false" }, listeners: { "input": "onChange($event.target.value)" }, properties: { "disabled": "disabled()", "value": "value()", "attr.list": "null" } }, providers: [
tuiAsControl(TuiInputColor),
tuiFallbackValueProvider(''),
tuiSliderOptionsProvider({ trackColor: 'transparent' }),
], usesInheritance: true, hostDirectives: [{ directive: i1.MaskitoDirective }, { directive: i2.TuiWithTextfield }], ngImport: i0, template: "<ng-container *tuiTextfieldContent>\n <input\n #input\n tabindex=\"-1\"\n type=\"color\"\n class=\"tui-input-color_picker\"\n [attr.list]=\"list\"\n [class.tui-input-color_left]=\"align() === 'left'\"\n [disabled]=\"!interactive()\"\n [style.--t-opacity]=\"filled() ? opacity() / 255 : 0\"\n [value]=\"value().length > 6 ? value().slice(0, 7) : ''\"\n (input)=\"onInput(input.value)\"\n />\n <input\n *ngIf=\"format() === 'hexa' && interactive()\"\n max=\"255\"\n tuiSlider\n type=\"range\"\n [ngModel]=\"opacity()\"\n [ngModelOptions]=\"{standalone: true}\"\n (ngModelChange)=\"onOpacity($event)\"\n (pointerdown.stop)=\"el.focus()\"\n />\n</ng-container>\n", styles: [".tui-input-color_picker.tui-input-color_picker{position:relative;font-size:1rem;inline-size:calc(var(--t-height) / 2);block-size:calc(var(--t-height) / 2);border:none;border-radius:100%;padding:0!important;overflow:hidden;cursor:pointer;background:repeating-conic-gradient(var(--tui-border-normal) 0% 25%,transparent 0% 50%);box-shadow:0 0 0 1px var(--tui-border-normal)}.tui-input-color_picker.tui-input-color_picker:disabled{cursor:default}tui-textfield[data-size=s] .tui-input-color_picker{margin-inline-end:.25rem}tui-textfield[data-size=l] .tui-input-color_picker{margin-inline-end:-.25rem}.tui-input-color_picker.tui-input-color_left{position:absolute;top:50%;left:calc(var(--t-height) / 4);inset-inline-start:calc(var(--t-height) / 4);transform:translateY(-50%)}.tui-input-color_picker::-webkit-color-swatch-wrapper{padding:0}.tui-input-color_picker::-webkit-color-swatch{border:none;opacity:var(--t-opacity)}.tui-input-color_picker::-moz-color-swatch{border:none;opacity:var(--t-opacity)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TuiSliderComponent, selector: "input[type=range][tuiSlider]", inputs: ["size", "segments"] }, { kind: "directive", type: TuiTextfieldContent, selector: "ng-template[tuiTextfieldContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputColor, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'input[tuiInputColor]', imports: [FormsModule, NgIf, TuiSlider, TuiTextfieldContent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
tuiAsControl(TuiInputColor),
tuiFallbackValueProvider(''),
tuiSliderOptionsProvider({ trackColor: 'transparent' }),
], hostDirectives: [MaskitoDirective, TuiWithTextfield], host: {
ngSkipHydration: 'true',
inputmode: 'numeric',
spellcheck: 'false',
'[disabled]': 'disabled()',
'[value]': 'value()',
'[attr.list]': 'null',
'(input)': 'onChange($event.target.value)',
}, template: "<ng-container *tuiTextfieldContent>\n <input\n #input\n tabindex=\"-1\"\n type=\"color\"\n class=\"tui-input-color_picker\"\n [attr.list]=\"list\"\n [class.tui-input-color_left]=\"align() === 'left'\"\n [disabled]=\"!interactive()\"\n [style.--t-opacity]=\"filled() ? opacity() / 255 : 0\"\n [value]=\"value().length > 6 ? value().slice(0, 7) : ''\"\n (input)=\"onInput(input.value)\"\n />\n <input\n *ngIf=\"format() === 'hexa' && interactive()\"\n max=\"255\"\n tuiSlider\n type=\"range\"\n [ngModel]=\"opacity()\"\n [ngModelOptions]=\"{standalone: true}\"\n (ngModelChange)=\"onOpacity($event)\"\n (pointerdown.stop)=\"el.focus()\"\n />\n</ng-container>\n", styles: [".tui-input-color_picker.tui-input-color_picker{position:relative;font-size:1rem;inline-size:calc(var(--t-height) / 2);block-size:calc(var(--t-height) / 2);border:none;border-radius:100%;padding:0!important;overflow:hidden;cursor:pointer;background:repeating-conic-gradient(var(--tui-border-normal) 0% 25%,transparent 0% 50%);box-shadow:0 0 0 1px var(--tui-border-normal)}.tui-input-color_picker.tui-input-color_picker:disabled{cursor:default}tui-textfield[data-size=s] .tui-input-color_picker{margin-inline-end:.25rem}tui-textfield[data-size=l] .tui-input-color_picker{margin-inline-end:-.25rem}.tui-input-color_picker.tui-input-color_left{position:absolute;top:50%;left:calc(var(--t-height) / 4);inset-inline-start:calc(var(--t-height) / 4);transform:translateY(-50%)}.tui-input-color_picker::-webkit-color-swatch-wrapper{padding:0}.tui-input-color_picker::-webkit-color-swatch{border:none;opacity:var(--t-opacity)}.tui-input-color_picker::-moz-color-swatch{border:none;opacity:var(--t-opacity)}\n"] }]
}], propDecorators: { alignSetter: [{
type: Input,
args: ['align']
}], formatSetter: [{
type: Input,
args: ['format']
}] } });
function toHex(value) {
return value.toString(16).padStart(2, '0');
}
/**
* Generated bundle index. Do not edit.
*/
export { TUI_INPUT_COLOR_OPTIONS, TuiInputColor, tuiInputColorOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-input-color.mjs.map