@progress/kendo-angular-inputs/esm2022/colorpicker/flatcolorpicker-header.component.mjs

Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, Te

/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
/* eslint-disable @typescript-eslint/no-explicit-any */
import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ViewChildren, QueryList, ElementRef, Renderer2 } from '@angular/core';
import { dropletSlashIcon, dropletSliderIcon, paletteIcon } from '@progress/kendo-svg-icons';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { NgIf, NgFor, NgClass } from '@angular/common';
import { ButtonComponent } from '@progress/kendo-angular-buttons';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
/**
 * @hidden
 */
export class FlatColorPickerHeaderComponent {
    localizationService;
    renderer;
    hostClasses = true;
    clearButton;
    activeView;
    views;
    preview;
    innerTabIndex = -1;
    value;
    selection;
    size;
    viewChange = new EventEmitter();
    valuePaneClick = new EventEmitter();
    clearButtonClick = new EventEmitter();
    tabOut = new EventEmitter();
    viewButtonsCollection;
    clearButtonElement;
    dropletSliderIcon = dropletSliderIcon;
    paletteIcon = paletteIcon;
    dropletSlashIcon = dropletSlashIcon;
    constructor(localizationService, renderer) {
        this.localizationService = localizationService;
        this.renderer = renderer;
    }
    ngAfterViewInit() {
        if (this.viewButtonsCollection.length > 0) {
            this.viewButtonsCollection.forEach((button) => {
                const buttonElem = button.nativeElement;
                const isViewActive = buttonElem.getAttribute('aria-pressed') === 'true';
                if (isViewActive) {
                    this.renderer.addClass(buttonElem, 'k-selected');
                }
            });
        }
    }
    onViewButtonClick(view) {
        this.activeView = view;
        this.viewChange.emit(view);
    }
    get viewButtons() {
        return this.views && this.views.indexOf('gradient') >= 0 && this.views.indexOf('palette') >= 0;
    }
    getViewButtonIcon(view) {
        return view === 'gradient' ? 'color-canvas' : 'palette';
    }
    getViewButtonsSVGIcon(view) {
        return view === 'gradient' ? this.dropletSliderIcon : this.paletteIcon;
    }
    getText(text) {
        return this.localizationService.get(text);
    }
    onHeaderTabOut(ev, index) {
        if (index === 0) {
            ev.preventDefault();
            this.tabOut.emit(ev);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlatColorPickerHeaderComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FlatColorPickerHeaderComponent, isStandalone: true, selector: "[kendoFlatColorPickerHeader]", inputs: { clearButton: "clearButton", activeView: "activeView", views: "views", preview: "preview", innerTabIndex: "innerTabIndex", value: "value", selection: "selection", size: "size" }, outputs: { viewChange: "viewChange", valuePaneClick: "valuePaneClick", clearButtonClick: "clearButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-header": "this.hostClasses", "class.k-hstack": "this.hostClasses" } }, viewQueries: [{ propertyName: "clearButtonElement", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef }, { propertyName: "viewButtonsCollection", predicate: ["viewButtons"], descendants: true, read: ElementRef }], ngImport: i0, template: `
        <div class="k-coloreditor-header-actions k-hstack">
            <div 
                *ngIf="viewButtons" 
                class="k-button-group k-button-group-flat"
                role="group"
            >
                <button 
                    *ngFor="let view of views; let i = index;"
                    kendoButton
                    type="button"
                    #viewButtons
                    fillMode="flat"
                    [tabindex]="innerTabIndex.toString()"
                    (click)="onViewButtonClick(view)"
                    [icon]="getViewButtonIcon(view)"
                    [svgIcon]="getViewButtonsSVGIcon(view)"
                    (keydown.shift.tab)="onHeaderTabOut($event, i)"
                    [size]="size"
                    [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                    [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                    [attr.aria-pressed]="activeView === view"
                    [ngClass]="activeView === view ? 'k-selected' : ''">
                </button>
            </div>
        </div>
        <div class="k-spacer"></div>
        <div class="k-coloreditor-header-actions k-hstack">
            <button
                kendoButton
                type="button"
                [tabindex]="innerTabIndex.toString()"
                *ngIf="clearButton"
                #clearButton
                [size]="size"
                fillMode="flat"
                icon="reset-color"
                [svgIcon]="dropletSlashIcon"
                class="k-coloreditor-reset"
                [attr.aria-label]="getText('clearButton')"
                [attr.title]="getText('clearButton')"
                (click)="clearButtonClick.emit()">
            </button>
            <div class="k-coloreditor-preview k-vstack" *ngIf="preview" aria-hidden="true">
                <span
                    class="k-coloreditor-preview-color k-color-preview"
                    [attr.title]="getText('previewColor')"
                    [style.background-color]="selection">
                </span>
                <span class="k-coloreditor-current-color k-color-preview"
                    [style.background-color]="value"
                    [attr.title]="getText('revertSelection')"
                    (click)="valuePaneClick.emit($event)">
                </span>
            </div>
        </div>
    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlatColorPickerHeaderComponent, decorators: [{
            type: Component,
            args: [{
                    // eslint-disable-next-line @angular-eslint/component-selector
                    selector: '[kendoFlatColorPickerHeader]',
                    template: `
        <div class="k-coloreditor-header-actions k-hstack">
            <div 
                *ngIf="viewButtons" 
                class="k-button-group k-button-group-flat"
                role="group"
            >
                <button 
                    *ngFor="let view of views; let i = index;"
                    kendoButton
                    type="button"
                    #viewButtons
                    fillMode="flat"
                    [tabindex]="innerTabIndex.toString()"
                    (click)="onViewButtonClick(view)"
                    [icon]="getViewButtonIcon(view)"
                    [svgIcon]="getViewButtonsSVGIcon(view)"
                    (keydown.shift.tab)="onHeaderTabOut($event, i)"
                    [size]="size"
                    [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                    [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                    [attr.aria-pressed]="activeView === view"
                    [ngClass]="activeView === view ? 'k-selected' : ''">
                </button>
            </div>
        </div>
        <div class="k-spacer"></div>
        <div class="k-coloreditor-header-actions k-hstack">
            <button
                kendoButton
                type="button"
                [tabindex]="innerTabIndex.toString()"
                *ngIf="clearButton"
                #clearButton
                [size]="size"
                fillMode="flat"
                icon="reset-color"
                [svgIcon]="dropletSlashIcon"
                class="k-coloreditor-reset"
                [attr.aria-label]="getText('clearButton')"
                [attr.title]="getText('clearButton')"
                (click)="clearButtonClick.emit()">
            </button>
            <div class="k-coloreditor-preview k-vstack" *ngIf="preview" aria-hidden="true">
                <span
                    class="k-coloreditor-preview-color k-color-preview"
                    [attr.title]="getText('previewColor')"
                    [style.background-color]="selection">
                </span>
                <span class="k-coloreditor-current-color k-color-preview"
                    [style.background-color]="value"
                    [attr.title]="getText('revertSelection')"
                    (click)="valuePaneClick.emit($event)">
                </span>
            </div>
        </div>
    `,
                    standalone: true,
                    imports: [NgIf, NgFor, ButtonComponent, NgClass]
                }]
        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { hostClasses: [{
                type: HostBinding,
                args: ['class.k-coloreditor-header']
            }, {
                type: HostBinding,
                args: ['class.k-hstack']
            }], clearButton: [{
                type: Input
            }], activeView: [{
                type: Input
            }], views: [{
                type: Input
            }], preview: [{
                type: Input
            }], innerTabIndex: [{
                type: Input
            }], value: [{
                type: Input
            }], selection: [{
                type: Input
            }], size: [{
                type: Input
            }], viewChange: [{
                type: Output
            }], valuePaneClick: [{
                type: Output
            }], clearButtonClick: [{
                type: Output
            }], tabOut: [{
                type: Output
            }], viewButtonsCollection: [{
                type: ViewChildren,
                args: ['viewButtons', { read: ElementRef }]
            }], clearButtonElement: [{
                type: ViewChild,
                args: ['clearButton', { read: ElementRef }]
            }] } });