@progress/kendo-angular-gantt/esm2022/toolbar/view-selector.component.mjs

Kendo UI Angular Gantt

/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, EventEmitter, Input, Output, HostBinding } from '@angular/core';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { ReactiveFormsModule } from '@angular/forms';
import { ButtonComponent, ButtonGroupComponent } from '@progress/kendo-angular-buttons';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
import * as i2 from "@angular/forms";
/**
 * The Gantt ViewSelector component. Shows the current view type and lets you switch to another view type.
 */
export class ViewSelectorComponent {
    localizationService;
    hostClass = true;
    /**
     * Lists the timeline view types in the current Gantt configuration.
     */
    views;
    /**
     * Sets the current view type.
     * @default 'week'
     */
    activeView = 'week';
    /**
     * Fires when the user selects a different view type. The event data contains the type of the new view.
     */
    activeViewChange = new EventEmitter();
    constructor(localizationService) {
        this.localizationService = localizationService;
    }
    /**
     * @hidden
     */
    onClick(viewType) {
        if (viewType !== this.activeView) {
            this.activeViewChange.emit(viewType);
        }
    }
    /**
     * @hidden
     */
    getViewTypeText(viewType) {
        return this.localizationService.get(`${viewType}ViewText`);
    }
    /**
     * @hidden
     */
    onActiveViewChange(event) {
        this.activeViewChange.emit(event.target.value);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ViewSelectorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ViewSelectorComponent, isStandalone: true, selector: "kendo-gantt-view-selector", inputs: { views: "views", activeView: "activeView" }, outputs: { activeViewChange: "activeViewChange" }, host: { properties: { "class.k-gantt-views-wrapper": "this.hostClass" } }, ngImport: i0, template: `
        <select
          class="k-dropdownlist k-picker k-rounded-md k-views-dropdown"
          aria-label="View Selector"
          [value]="activeView"
          (change)="onActiveViewChange($event)">
          @for (view of views; track view) {
            <option [value]="view">{{getViewTypeText(view)}}</option>
          }
        </select>
        <kendo-buttongroup class="k-gantt-views" selection="single" [navigable]="false">
          @for (view of views; track view) {
            <button
              kendoButton
              type="button"
              [selected]="view === activeView"
            (click)="onClick(view)">{{getViewTypeText(view)}}</button>
          }
        </kendo-buttongroup>
        `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ViewSelectorComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'kendo-gantt-view-selector',
                    template: `
        <select
          class="k-dropdownlist k-picker k-rounded-md k-views-dropdown"
          aria-label="View Selector"
          [value]="activeView"
          (change)="onActiveViewChange($event)">
          @for (view of views; track view) {
            <option [value]="view">{{getViewTypeText(view)}}</option>
          }
        </select>
        <kendo-buttongroup class="k-gantt-views" selection="single" [navigable]="false">
          @for (view of views; track view) {
            <button
              kendoButton
              type="button"
              [selected]="view === activeView"
            (click)="onClick(view)">{{getViewTypeText(view)}}</button>
          }
        </kendo-buttongroup>
        `,
                    standalone: true,
                    imports: [ReactiveFormsModule, ButtonGroupComponent, ButtonComponent]
                }]
        }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { hostClass: [{
                type: HostBinding,
                args: ['class.k-gantt-views-wrapper']
            }], views: [{
                type: Input
            }], activeView: [{
                type: Input
            }], activeViewChange: [{
                type: Output
            }] } });