@taiga-ui/kit
Version:
Taiga UI Angular main components kit
90 lines (84 loc) • 11 kB
JavaScript
import { TuiLabel } from '@taiga-ui/core/components/label';
import { TuiTextfieldContent, TuiTextfieldComponent, TuiTextfieldOptionsDirective } from '@taiga-ui/core/components/textfield';
import { TuiDropdownContent } from '@taiga-ui/core/portals/dropdown';
import * as i0 from '@angular/core';
import { inject, HostAttributeToken, computed, input, ChangeDetectionStrategy, ViewEncapsulation, Component } 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 { maskitoAddOnFocusPlugin, maskitoRemoveOnBlurPlugin, maskitoPrefixPostprocessorGenerator } from '@maskito/kit';
import { TuiControl, tuiAsControl } from '@taiga-ui/cdk/classes';
import '@taiga-ui/cdk/constants';
import { tuiFallbackValueProvider } from '@taiga-ui/cdk/tokens';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import * as i2 from '@taiga-ui/core/components/input';
import { TuiWithInput } from '@taiga-ui/core/components/input';
import * as i4 from '@taiga-ui/core/components/slider';
import { TuiSlider } from '@taiga-ui/core/components/slider';
import { TuiIcons, tuiIconStart } from '@taiga-ui/core/directives/icons';
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: 'start',
});
const REGEX = /[0-9a-f]/i;
const EMPTY = '"data:image/svg+xml;utf8,<svg xmlns=http://www.w3.org/2000/svg></svg>"';
class TuiInputColorComponent extends TuiControl {
constructor() {
super(...arguments);
this.options = inject(TUI_INPUT_COLOR_OPTIONS);
this.el = tuiInjectElement();
this.list = inject(new HostAttributeToken('list'), { optional: true });
this.start = inject(TuiIcons).iconStart() || '';
this.icon = tuiIconStart(computed(() => (this.align() === 'start' ? EMPTY : this.start)), {});
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);
this.format = input(this.options.format);
this.align = input(this.options.align);
}
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: "19.2.21", ngImport: i0, type: TuiInputColorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiInputColorComponent, isStandalone: true, selector: "input[tuiInputColor]", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "ngSkipHydration": "true", "spellcheck": "false" }, listeners: { "input": "onChange($event.target.value)" }, properties: { "attr.list": "null", "disabled": "disabled()", "value": "value()" } }, providers: [tuiAsControl(TuiInputColorComponent), tuiFallbackValueProvider('')], usesInheritance: true, hostDirectives: [{ directive: i1.MaskitoDirective }, { directive: i2.TuiWithInput }], 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_start]=\"align() === 'start'\"\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 @if (format() === 'hexa' && interactive()) {\n <input\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 }\n</ng-container>\n", styles: ["tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .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;pointer-events:auto;order:100;background:repeating-conic-gradient(var(--tui-border-normal) 0% 25%,transparent 0% 50%);box-shadow:0 0 0 1px var(--tui-border-normal)}tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .tui-input-color_picker.tui-input-color_picker:disabled{cursor:default}tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .tui-input-color_picker.tui-input-color_start{position:absolute;inset-block-start:50%;inset-inline-start:calc(var(--t-height) / 4);transform:translateY(-50%)}tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .tui-input-color_picker::-webkit-color-swatch-wrapper{padding:0}tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .tui-input-color_picker::-webkit-color-swatch{border:none;opacity:var(--t-opacity)}tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .tui-input-color_picker::-moz-color-swatch{border:none;opacity:var(--t-opacity)}tui-textfield:where(*[data-tui-version=\"5.7.0\"])[data-size=s] .tui-input-color_picker{margin-inline-end:.25rem}tui-textfield:where(*[data-tui-version=\"5.7.0\"])[data-size=l] .tui-input-color_picker{margin-inline-end:-.25rem}\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: "component", type: i4.TuiSliderComponent, selector: "input[type=range][tuiSlider]", inputs: ["segments"] }, { kind: "directive", type: TuiTextfieldContent, selector: "ng-template[tuiTextfieldContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputColorComponent, decorators: [{
type: Component,
args: [{ selector: 'input[tuiInputColor]', imports: [FormsModule, TuiSlider, TuiTextfieldContent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAsControl(TuiInputColorComponent), tuiFallbackValueProvider('')], hostDirectives: [MaskitoDirective, TuiWithInput], host: {
ngSkipHydration: 'true',
spellcheck: 'false',
'[attr.list]': 'null',
'[disabled]': 'disabled()',
'[value]': 'value()',
'(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_start]=\"align() === 'start'\"\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 @if (format() === 'hexa' && interactive()) {\n <input\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 }\n</ng-container>\n", styles: ["tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .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;pointer-events:auto;order:100;background:repeating-conic-gradient(var(--tui-border-normal) 0% 25%,transparent 0% 50%);box-shadow:0 0 0 1px var(--tui-border-normal)}tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .tui-input-color_picker.tui-input-color_picker:disabled{cursor:default}tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .tui-input-color_picker.tui-input-color_start{position:absolute;inset-block-start:50%;inset-inline-start:calc(var(--t-height) / 4);transform:translateY(-50%)}tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .tui-input-color_picker::-webkit-color-swatch-wrapper{padding:0}tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .tui-input-color_picker::-webkit-color-swatch{border:none;opacity:var(--t-opacity)}tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .tui-input-color_picker::-moz-color-swatch{border:none;opacity:var(--t-opacity)}tui-textfield:where(*[data-tui-version=\"5.7.0\"])[data-size=s] .tui-input-color_picker{margin-inline-end:.25rem}tui-textfield:where(*[data-tui-version=\"5.7.0\"])[data-size=l] .tui-input-color_picker{margin-inline-end:-.25rem}\n"] }]
}] });
function toHex(value) {
return value.toString(16).padStart(2, '0');
}
const TuiInputColor = [
TuiInputColorComponent,
TuiLabel,
TuiTextfieldComponent,
TuiTextfieldOptionsDirective,
TuiDropdownContent,
];
/**
* Generated bundle index. Do not edit.
*/
export { TUI_INPUT_COLOR_OPTIONS, TuiInputColor, TuiInputColorComponent, tuiInputColorOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-input-color.mjs.map