@progress/kendo-angular-scheduler/esm2022/editing/resource-multiple-editor.component.mjs

Kendo UI Scheduler Angular - Outlook or Google-style angular scheduler calendar. Full-featured and customizable embedded scheduling from the creator developers trust for professional UI components.

/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, forwardRef, ViewChild } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { ResourceEditorBase } from './resource-editor-base';
import { MultiSelectComponent, TagTemplateDirective, ItemTemplateDirective } from '@progress/kendo-angular-dropdowns';
import { NgStyle } from '@angular/common';
import * as i0 from "@angular/core";
/**
 * @hidden
 */
export const MULTIPLE_RESOURCE_VALUE_ACCESSOR = {
    multi: true,
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => MultipleResourceEditorComponent)
};
/**
 * @hidden
 */
export class MultipleResourceEditorComponent extends ResourceEditorBase {
    resourceMultiSelect;
    getTagStyle(dataItem) {
        return {
            'background-color': dataItem[this.resource.colorField]
        };
    }
    focus() {
        this.resourceMultiSelect.focus();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultipleResourceEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MultipleResourceEditorComponent, isStandalone: true, selector: "kendo-multiple-resource-editor", providers: [
            MULTIPLE_RESOURCE_VALUE_ACCESSOR
        ], viewQueries: [{ propertyName: "resourceMultiSelect", first: true, predicate: ["resourceMultiSelect"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
        <kendo-multiselect
          #resourceMultiSelect
          [data]='resource.data'
          [textField]='resource.textField'
          [valueField]='resource.valueField'
          [valuePrimitive]='true'
          [value]='resourceValue'
          (valueChange)='onResourceValueChange($event)'
          >
          <ng-template kendoDropDownListItemTemplate let-dataItem>
            @if (resource.colorField) {
              <span class="k-scheduler-mark"
              [ngStyle]="getResourceStyle(dataItem)"></span>
            }
            {{ getField(dataItem, resource.textField) }}
          </ng-template>
          <ng-template kendoMultiSelectTagTemplate let-dataItem>
            @if (resource.colorField) {
              <span class="k-scheduler-mark"
              [ngStyle]="getTagStyle(dataItem)"></span>
            }
            {{ getField(dataItem, resource.textField) }}
          </ng-template>
        </kendo-multiselect>
        `, isInline: true, dependencies: [{ kind: "component", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: ["showStickyHeader", "focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer", "inputAttributes"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { kind: "directive", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TagTemplateDirective, selector: "[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultipleResourceEditorComponent, decorators: [{
            type: Component,
            args: [{
                    providers: [
                        MULTIPLE_RESOURCE_VALUE_ACCESSOR
                    ],
                    selector: 'kendo-multiple-resource-editor',
                    template: `
        <kendo-multiselect
          #resourceMultiSelect
          [data]='resource.data'
          [textField]='resource.textField'
          [valueField]='resource.valueField'
          [valuePrimitive]='true'
          [value]='resourceValue'
          (valueChange)='onResourceValueChange($event)'
          >
          <ng-template kendoDropDownListItemTemplate let-dataItem>
            @if (resource.colorField) {
              <span class="k-scheduler-mark"
              [ngStyle]="getResourceStyle(dataItem)"></span>
            }
            {{ getField(dataItem, resource.textField) }}
          </ng-template>
          <ng-template kendoMultiSelectTagTemplate let-dataItem>
            @if (resource.colorField) {
              <span class="k-scheduler-mark"
              [ngStyle]="getTagStyle(dataItem)"></span>
            }
            {{ getField(dataItem, resource.textField) }}
          </ng-template>
        </kendo-multiselect>
        `,
                    standalone: true,
                    imports: [MultiSelectComponent, ItemTemplateDirective, NgStyle, TagTemplateDirective]
                }]
        }], propDecorators: { resourceMultiSelect: [{
                type: ViewChild,
                args: ['resourceMultiSelect', { static: true }]
            }] } });