npm - @c8y/ngx-components - Versions diffs - 1024.20.8 → 1024.21.3 - Mend

@c8y/ngx-components 1024.20.8 → 1024.21.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (127) hide show

package/fesm2022/c8y-ngx-components-widgets-implementations-image.mjs CHANGED Viewed

@@ -192,7 +192,7 @@ class ImageWidgetConfigComponent {
         this.styling = this.imageWidget.getStyling(config);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ImageWidgetConfigComponent, deps: [{ token: i1$1.FormBuilder }, { token: i1$1.NgForm }, { token: i2.FilesService }, { token: i2.AlertService }, { token: ImageWidgetService }, { token: i4.WidgetConfigComponent, optional: true }, { token: i4.WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ImageWidgetConfigComponent, isStandalone: true, selector: "c8y-image-widget-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "imagePreviewTemplate", predicate: ["imagePreview"], descendants: true }], ngImport: i0, template: "<div [formGroup]=\"formGroup\">\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Image' | translate }}</legend>\n    <c8y-form-group class=\"m-b-16\">\n      <c8y-drop-area\n        class=\"drop-area-sm\"\n        [icon]=\"'upload'\"\n        formControlName=\"images\"\n        [accept]=\"'image'\"\n        [maxAllowedFiles]=\"1\"\n      ></c8y-drop-area>\n      <c8y-messages>\n        <c8y-message\n          name=\"maxFileSizeReached\"\n          [text]=\"\n            'The maximum image size is {{ maxFileSize }} kB. The selected image has a size of {{ actualFileSize }} kB.'\n              | translate\n          \"\n        ></c8y-message>\n        <c8y-message\n          name=\"wrongFileType\"\n          [text]=\"'Wrong file type, select an image.' | translate\"\n        ></c8y-message>\n        <c8y-message\n          name=\"maxlength\"\n          [text]=\"'Only select one image.' | translate\"\n        ></c8y-message>\n        <c8y-message\n          name=\"required\"\n          [text]=\"'An image is required.' | translate\"\n        ></c8y-message>\n        <c8y-message\n          name=\"minlength\"\n          [text]=\"'An image is required.' | translate\"\n        ></c8y-message>\n      </c8y-messages>\n    </c8y-form-group>\n  </fieldset>\n\n  @if (imageSrc$ | async; as src) {\n    <div [formGroupName]=\"'styling'\">\n      <fieldset class=\"c8y-fieldset\">\n        <legend>\n          {{ 'Image display' | translate }}\n        </legend>\n        <c8y-form-group class=\"form-group-sm m-b-0\">\n          <c8y-list-group\n            class=\"no-border-last p-b-16\"\n            role=\"list\"\n          >\n            @for (\n              objectFitOption of objectFitOptions;\n              track objectFitOption.value;\n              let i = $index\n            ) {\n              <c8y-li role=\"listitem\">\n                <label class=\"c8y-radio\">\n                  <input\n                    type=\"radio\"\n                    [id]=\"'groupradiocontentclass' + i\"\n                    formControlName=\"objectFit\"\n                    [value]=\"objectFitOption.value\"\n                  />\n                  <span></span>\n                  <span class=\"l-h-1\">\n                    {{ objectFitOption.label | translate }}\n                    <br />\n                    <small class=\"text-muted\">\n                      {{ objectFitOption.description | translate }}\n                    </small>\n                  </span>\n                </label>\n              </c8y-li>\n            }\n          </c8y-list-group>\n        </c8y-form-group>\n      </fieldset>\n      <fieldset class=\"c8y-fieldset\">\n        <legend>\n          {{ 'Image alignment' | translate }}\n        </legend>\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <c8y-form-group class=\"form-group-sm\">\n              <label>{{ 'Horizontal`alignment`' | translate }}</label>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"objectPositionX\"\n                >\n                  <option [ngValue]=\"'left'\">\n                    {{ 'left`horizontal alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'center'\">\n                    {{ 'center`horizontal alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'right'\">\n                    {{ 'right`horizontal alignment`' | translate }}\n                  </option>\n                </select>\n              </div>\n            </c8y-form-group>\n          </div>\n          <div class=\"col-md-6\">\n            <c8y-form-group class=\"form-group-sm\">\n              <label>{{ 'Vertical`alignment`' | translate }}</label>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"objectPositionY\"\n                >\n                  <option [ngValue]=\"'top'\">\n                    {{ 'top`vertical alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'center'\">\n                    {{ 'center`vertical alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'bottom'\">\n                    {{ 'bottom`vertical alignment`' | translate }}\n                  </option>\n                </select>\n              </div>\n            </c8y-form-group>\n          </div>\n        </div>\n      </fieldset>\n      <ng-template #imagePreview>\n        <img\n          [ngStyle]=\"styling\"\n          alt=\"{{ 'Image preview' | translate }}\"\n          [src]=\"src\"\n          [ngClass]=\"styling ? 'fit-h fit-w' : 'img-responsive'\"\n        />\n      </ng-template>\n    </div>\n  }\n  @if (loading) {\n    <div class=\"d-flex j-c-center\">\n      <c8y-loading></c8y-loading>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ImageWidgetConfigComponent, isStandalone: true, selector: "c8y-image-widget-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "imagePreviewTemplate", predicate: ["imagePreview"], descendants: true }], ngImport: i0, template: "<div [formGroup]=\"formGroup\">\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Image' | translate }}</legend>\n    <c8y-form-group class=\"m-b-16\">\n      <c8y-drop-area\n        class=\"drop-area-sm\"\n        [icon]=\"'upload'\"\n        formControlName=\"images\"\n        [accept]=\"'image'\"\n        [maxAllowedFiles]=\"1\"\n      ></c8y-drop-area>\n      <c8y-messages>\n        <c8y-message\n          name=\"maxFileSizeReached\"\n          [text]=\"\n            'The maximum image size is {{ maxFileSize }} kB. The selected image has a size of {{ actualFileSize }} kB.'\n              | translate\n          \"\n        ></c8y-message>\n        <c8y-message\n          name=\"wrongFileType\"\n          [text]=\"'Wrong file type, select an image.' | translate\"\n        ></c8y-message>\n        <c8y-message\n          name=\"maxlength\"\n          [text]=\"'Only select one image.' | translate\"\n        ></c8y-message>\n        <c8y-message\n          name=\"required\"\n          [text]=\"'An image is required.' | translate\"\n        ></c8y-message>\n        <c8y-message\n          name=\"minlength\"\n          [text]=\"'An image is required.' | translate\"\n        ></c8y-message>\n      </c8y-messages>\n    </c8y-form-group>\n  </fieldset>\n\n  @if (imageSrc$ | async; as src) {\n    <div [formGroupName]=\"'styling'\">\n      <fieldset class=\"c8y-fieldset\">\n        <legend>\n          {{ 'Image display' | translate }}\n        </legend>\n        <c8y-form-group class=\"form-group-sm m-b-0\">\n          <c8y-list-group\n            class=\"no-border-last p-b-16\"\n            role=\"list\"\n          >\n            @for (\n              objectFitOption of objectFitOptions;\n              track objectFitOption.value;\n              let i = $index\n            ) {\n              <c8y-li role=\"listitem\">\n                <label class=\"c8y-radio\">\n                  <input\n                    type=\"radio\"\n                    [id]=\"'groupradiocontentclass' + i\"\n                    formControlName=\"objectFit\"\n                    [value]=\"objectFitOption.value\"\n                  />\n                  <span></span>\n                  <span class=\"l-h-1\">\n                    {{ objectFitOption.label | translate }}\n                    <br />\n                    <small class=\"text-muted\">\n                      {{ objectFitOption.description | translate }}\n                    </small>\n                  </span>\n                </label>\n              </c8y-li>\n            }\n          </c8y-list-group>\n        </c8y-form-group>\n      </fieldset>\n      <fieldset class=\"c8y-fieldset\">\n        <legend>\n          {{ 'Image alignment' | translate }}\n        </legend>\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <c8y-form-group class=\"form-group-sm\">\n              <label>{{ 'Horizontal`alignment`' | translate }}</label>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"objectPositionX\"\n                >\n                  <option [ngValue]=\"'left'\">\n                    {{ 'left`horizontal alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'center'\">\n                    {{ 'center`horizontal alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'right'\">\n                    {{ 'right`horizontal alignment`' | translate }}\n                  </option>\n                </select>\n              </div>\n            </c8y-form-group>\n          </div>\n          <div class=\"col-md-6\">\n            <c8y-form-group class=\"form-group-sm\">\n              <label>{{ 'Vertical`alignment`' | translate }}</label>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"objectPositionY\"\n                >\n                  <option [ngValue]=\"'top'\">\n                    {{ 'top`vertical alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'center'\">\n                    {{ 'center`vertical alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'bottom'\">\n                    {{ 'bottom`vertical alignment`' | translate }}\n                  </option>\n                </select>\n              </div>\n            </c8y-form-group>\n          </div>\n        </div>\n      </fieldset>\n      <ng-template #imagePreview>\n        <img\n          [ngStyle]=\"styling\"\n          alt=\"{{ 'Image preview' | translate }}\"\n          [src]=\"src\"\n          [ngClass]=\"styling ? 'fit-h fit-w' : 'img-responsive'\"\n        />\n      </ng-template>\n    </div>\n  }\n  @if (loading) {\n    <div class=\"d-flex j-c-center\">\n      <c8y-loading></c8y-loading>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable", "selectOnClick"], outputs: ["collapsedChange"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ImageWidgetConfigComponent, decorators: [{
             type: Component,

package/fesm2022/c8y-ngx-components-widgets-implementations-image.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"c8y-ngx-components-widgets-implementations-image.mjs","sources":["../../widgets/implementations/image/image-widget.model.ts","../../widgets/implementations/image/image-widget.service.ts","../../widgets/implementations/image/image-widget-config/image-widget-config.component.ts","../../widgets/implementations/image/image-widget-config/image-widget-config.component.html","../../widgets/implementations/image/image-widget-view/image-widget-view.component.ts","../../widgets/implementations/image/image-widget-view/image-widget-view.component.html","../../widgets/implementations/image/c8y-ngx-components-widgets-implementations-image.ts"],"sourcesContent":["export interface ImageWidgetConfig {\n imageBinaryId: string;\n styling?: ImageWidgetConfigStyling;\n}\n\nexport interface ImageWidgetConfigStyling {\n objectFit: string;\n objectPositionX: string;\n objectPositionY: string;\n}\n\nexport interface ImageWidgetStyle {\n [key: string]: string;\n}\n\nexport const defaultObjectFitValue = 'contain';\nexport const defaultObjectPositionValue = 'center';\n","import { Injectable } from '@angular/core';\nimport {\n IManagedObject,\n IManagedObjectBinary,\n InventoryService,\n InventoryBinaryService\n} from '@c8y/client';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport { AlertService, FilesService } from '@c8y/ngx-components';\nimport { TranslateService } from '@ngx-translate/core';\nimport {\n defaultObjectPositionValue,\n ImageWidgetConfig,\n ImageWidgetStyle\n} from './image-widget.model';\n\n@Injectable({ providedIn: 'root' })\nexport class ImageWidgetService {\n constructor(\n private inventory: InventoryService,\n private fileService: FilesService,\n private alert: AlertService,\n private translate: TranslateService,\n private binary: InventoryBinaryService\n ) {}\n\n async getImageDetails(\n imageBinaryId: string \| null\n ): Promise<{ file: File; base64: string; c8y_SHA256: string }> {\n if (!imageBinaryId) {\n return null;\n }\n\n try {\n const { data: imageBinaryMo } = await this.inventory.detail(imageBinaryId);\n const file = await this.fileService.getFile(imageBinaryMo as IManagedObjectBinary);\n const base64 = await this.fileService.toBase64(file);\n return {\n file,\n base64: base64 as string,\n c8y_SHA256: imageBinaryMo.c8y_SHA256\n };\n } catch (e) {\n const text = this.translate.instant(\n gettext('Unable to retrieve image with id: {{ imageBinaryId }}'),\n { imageBinaryId }\n );\n this.alert.danger(text, e?.data);\n }\n\n return null;\n }\n\n async uploadFile(\n file: File,\n options: {\n dashboardMoId?: string;\n isDeviceTypeDashboard?: boolean;\n } = {}\n ): Promise<string> {\n const hash = await this.fileService.getHashSumOfFile(file);\n const fileDetails = { c8y_SHA256: hash };\n const globalImage = !options?.dashboardMoId \|\| options?.isDeviceTypeDashboard;\n const partialBinaryMo: Partial<IManagedObject> = !globalImage\n ? { ...fileDetails }\n : { ...fileDetails, c8y_Global: {} };\n const { data: mo } = await this.binary.create(file, partialBinaryMo);\n if (options?.dashboardMoId) {\n await this.inventory.childAdditionsAdd(mo, options?.dashboardMoId);\n }\n return mo.id;\n }\n\n getStyling(config: ImageWidgetConfig): ImageWidgetStyle \| null {\n if (!config.styling?.objectFit \|\| config.styling?.objectFit === 'full-width') {\n return null;\n }\n return {\n 'object-fit': config.styling.objectFit,\n 'object-position': `${config.styling?.objectPositionX \|\| defaultObjectPositionValue} ${\n config.styling?.objectPositionY \|\| defaultObjectPositionValue\n }`\n };\n }\n}\n","import { AsyncPipe, NgClass, NgStyle } from '@angular/common';\nimport {\n AfterViewInit,\n Component,\n Input,\n OnDestroy,\n OnInit,\n Optional,\n QueryList,\n TemplateRef,\n ViewChildren,\n ChangeDetectionStrategy\n} from '@angular/core';\nimport {\n ControlContainer,\n FormBuilder,\n FormGroup,\n NgForm,\n ReactiveFormsModule,\n Validators\n} from '@angular/forms';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport {\n AlertService,\n C8yTranslatePipe,\n C8yValidators,\n DropAreaComponent,\n FilesService,\n FormGroupComponent,\n LoadingComponent,\n MessageDirective,\n MessagesComponent,\n ListGroupModule,\n OnBeforeSave\n} from '@c8y/ngx-components';\nimport { WidgetConfigComponent, WidgetConfigService } from '@c8y/ngx-components/context-dashboard';\nimport { get } from 'lodash-es';\nimport { BehaviorSubject, merge, Observable, Subject } from 'rxjs';\nimport {\n distinctUntilChanged,\n filter,\n map,\n shareReplay,\n switchMap,\n takeUntil,\n tap\n} from 'rxjs/operators';\nimport {\n defaultObjectFitValue,\n defaultObjectPositionValue,\n ImageWidgetConfig,\n ImageWidgetConfigStyling,\n ImageWidgetStyle\n} from '../image-widget.model';\nimport { ImageWidgetService } from '../image-widget.service';\n\n@Component({\n selector: 'c8y-image-widget-config',\n templateUrl: './image-widget-config.component.html',\n viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],\n standalone: true,\n imports: [\n ReactiveFormsModule,\n FormGroupComponent,\n MessagesComponent,\n ListGroupModule,\n MessageDirective,\n C8yTranslatePipe,\n AsyncPipe,\n NgStyle,\n NgClass,\n DropAreaComponent,\n LoadingComponent\n ],\n changeDetection: ChangeDetectionStrategy.Eager\n})\nexport class ImageWidgetConfigComponent implements OnInit, OnDestroy, OnBeforeSave, AfterViewInit {\n @Input() config: ImageWidgetConfig;\n imageBinaryId$ = new BehaviorSubject<string>(null);\n imageSrc$: Observable<string>;\n loading = false;\n formGroup: FormGroup;\n fileFromConfig: File;\n styling: ImageWidgetStyle \| null;\n destroyed$ = new Subject<void>();\n objectFitOptions = [\n {\n label: gettext('Contain`verb, image fitting option`'),\n value: 'contain',\n description: gettext(\n 'The image is entirely displayed within the widget while preserving the aspect ratio.'\n )\n },\n {\n label: gettext('Cover`verb, image fitting option`'),\n value: 'cover',\n description: gettext(\n 'The image is resized to fill the widget while preserving the aspect ratio. Overflowing areas are clipped.'\n )\n },\n {\n label: gettext('Fill`verb, image fitting option`'),\n value: 'fill',\n description: gettext(\n 'The image is stretched to fill the widget, overriding the aspect-ratio.'\n )\n },\n {\n label: gettext('Full width`image fitting option`'),\n value: 'full-width',\n description: gettext(\n `The image is resized to fit the widget's width while preserving the aspect ratio. Overflowing area is scrollable.`\n )\n }\n ];\n\n @ViewChildren('imagePreview') imagePreviewTemplate!: QueryList<TemplateRef<any>>;\n\n constructor(\n private formBuilder: FormBuilder,\n private form: NgForm,\n private fileService: FilesService,\n private alert: AlertService,\n private imageWidget: ImageWidgetService,\n @Optional() private widgetConfig: WidgetConfigComponent,\n private widgetConfigService: WidgetConfigService\n ) {}\n\n async onBeforeSave(config?: ImageWidgetConfig): Promise<boolean> {\n if (this.formGroup.invalid) {\n return false;\n }\n\n const fileFromForm = this.getFileFromFormValue(this.formGroup.value);\n if (fileFromForm && fileFromForm !== this.fileFromConfig) {\n try {\n const imageBinaryId = await this.imageWidget.uploadFile(fileFromForm, {\n dashboardMoId: this.getDashboardMoId(),\n isDeviceTypeDashboard: this.widgetConfig?.isDeviceTypeDashboard\n });\n Object.assign(config, { imageBinaryId });\n } catch (e) {\n this.alert.danger(gettext('Unable to upload image.'), e?.data);\n return false;\n }\n }\n const styling: ImageWidgetConfigStyling = this.formGroup.value.styling;\n Object.assign(config, { styling });\n\n return true;\n }\n\n ngOnInit() {\n this.initForm();\n const imageFromConfig = this.imageBinaryId$.pipe(\n filter(id => !!id),\n distinctUntilChanged(),\n tap(() => (this.loading = true)),\n switchMap(imageBinaryId => this.imageWidget.getImageDetails(imageBinaryId)),\n tap(details => {\n this.loading = false;\n this.fileFromConfig = details.file;\n if (details) {\n this.formGroup.patchValue({ images: [{ file: details.file, name: details.file.name }] });\n }\n }),\n map(details => details?.base64),\n shareReplay(1)\n );\n const selectedFile = this.formGroup.valueChanges.pipe(\n map(value => this.getFileFromFormValue(value)),\n distinctUntilChanged(),\n switchMap(file => (file ? this.fileService.toBase64(file) : Promise.resolve('')))\n );\n this.imageSrc$ = merge(imageFromConfig, selectedFile).pipe(\n map(base64 => (base64 ? (base64 as string) : ''))\n );\n this.imageBinaryId$.next(this.config?.imageBinaryId);\n }\n\n ngAfterViewInit(): void {\n this.imagePreviewTemplate.changes.pipe(takeUntil(this.destroyed$)).subscribe(template => {\n this.widgetConfigService.setPreview(template.first);\n });\n }\n\n ngOnDestroy(): void {\n this.destroyed$.next();\n this.destroyed$.complete();\n }\n\n private getDashboardMoId(): string \| null {\n return get(this.widgetConfig, 'mo.id', null);\n }\n\n private async initForm(): Promise<void> {\n const stylingFormGroup = this.formBuilder.group({\n objectFit: [\n // fallback to 'full-width' for old legacy widgets, newly created widgets should use defaultObjectFitValue\n this.config.imageBinaryId && !this.config.styling ? 'full-width' : defaultObjectFitValue,\n [Validators.required]\n ],\n objectPositionX: [defaultObjectPositionValue, [Validators.required]],\n objectPositionY: [defaultObjectPositionValue, [Validators.required]]\n });\n this.formGroup = this.formBuilder.group({\n images: [\n null,\n [\n Validators.required,\n Validators.minLength(1),\n Validators.maxLength(1),\n C8yValidators.filesValidator({ maximumFileSizeInKb: 1000, typePrefix: 'image/' })\n ]\n ],\n styling: stylingFormGroup\n });\n this.form.form.addControl('config', this.formGroup);\n this.formGroup.patchValue(this.config);\n this.formGroup.valueChanges\n .pipe(takeUntil(this.destroyed$))\n .subscribe(changes => this.setStyling(changes));\n }\n\n private getFileFromFormValue(formValue: any): File \| null {\n const images: any[] = formValue?.images \|\| [];\n return images[0]?.file \|\| null;\n }\n\n private setStyling(config: ImageWidgetConfig): void {\n this.styling = this.imageWidget.getStyling(config);\n }\n}\n","<div [formGroup]=\"formGroup\">\n <fieldset class=\"c8y-fieldset\">\n <legend>{{ 'Image' \| translate }}</legend>\n <c8y-form-group class=\"m-b-16\">\n <c8y-drop-area\n class=\"drop-area-sm\"\n [icon]=\"'upload'\"\n formControlName=\"images\"\n [accept]=\"'image'\"\n [maxAllowedFiles]=\"1\"\n ></c8y-drop-area>\n <c8y-messages>\n <c8y-message\n name=\"maxFileSizeReached\"\n [text]=\"\n 'The maximum image size is {{ maxFileSize }} kB. The selected image has a size of {{ actualFileSize }} kB.'\n \| translate\n \"\n ></c8y-message>\n <c8y-message\n name=\"wrongFileType\"\n [text]=\"'Wrong file type, select an image.' \| translate\"\n ></c8y-message>\n <c8y-message\n name=\"maxlength\"\n [text]=\"'Only select one image.' \| translate\"\n ></c8y-message>\n <c8y-message\n name=\"required\"\n [text]=\"'An image is required.' \| translate\"\n ></c8y-message>\n <c8y-message\n name=\"minlength\"\n [text]=\"'An image is required.' \| translate\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </fieldset>\n\n @if (imageSrc$ \| async; as src) {\n <div [formGroupName]=\"'styling'\">\n <fieldset class=\"c8y-fieldset\">\n <legend>\n {{ 'Image display' \| translate }}\n </legend>\n <c8y-form-group class=\"form-group-sm m-b-0\">\n <c8y-list-group\n class=\"no-border-last p-b-16\"\n role=\"list\"\n >\n @for (\n objectFitOption of objectFitOptions;\n track objectFitOption.value;\n let i = $index\n ) {\n <c8y-li role=\"listitem\">\n <label class=\"c8y-radio\">\n <input\n type=\"radio\"\n [id]=\"'groupradiocontentclass' + i\"\n formControlName=\"objectFit\"\n [value]=\"objectFitOption.value\"\n />\n <span></span>\n <span class=\"l-h-1\">\n {{ objectFitOption.label \| translate }}\n <br />\n <small class=\"text-muted\">\n {{ objectFitOption.description \| translate }}\n </small>\n </span>\n </label>\n </c8y-li>\n }\n </c8y-list-group>\n </c8y-form-group>\n </fieldset>\n <fieldset class=\"c8y-fieldset\">\n <legend>\n {{ 'Image alignment' \| translate }}\n </legend>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <c8y-form-group class=\"form-group-sm\">\n <label>{{ 'Horizontal`alignment`' \| translate }}</label>\n <div class=\"c8y-select-wrapper\">\n <select\n class=\"form-control\"\n formControlName=\"objectPositionX\"\n >\n <option [ngValue]=\"'left'\">\n {{ 'left`horizontal alignment`' \| translate }}\n </option>\n <option [ngValue]=\"'center'\">\n {{ 'center`horizontal alignment`' \| translate }}\n </option>\n <option [ngValue]=\"'right'\">\n {{ 'right`horizontal alignment`' \| translate }}\n </option>\n </select>\n </div>\n </c8y-form-group>\n </div>\n <div class=\"col-md-6\">\n <c8y-form-group class=\"form-group-sm\">\n <label>{{ 'Vertical`alignment`' \| translate }}</label>\n <div class=\"c8y-select-wrapper\">\n <select\n class=\"form-control\"\n formControlName=\"objectPositionY\"\n >\n <option [ngValue]=\"'top'\">\n {{ 'top`vertical alignment`' \| translate }}\n </option>\n <option [ngValue]=\"'center'\">\n {{ 'center`vertical alignment`' \| translate }}\n </option>\n <option [ngValue]=\"'bottom'\">\n {{ 'bottom`vertical alignment`' \| translate }}\n </option>\n </select>\n </div>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n <ng-template #imagePreview>\n <img\n [ngStyle]=\"styling\"\n alt=\"{{ 'Image preview' \| translate }}\"\n [src]=\"src\"\n [ngClass]=\"styling ? 'fit-h fit-w' : 'img-responsive'\"\n />\n </ng-template>\n </div>\n }\n @if (loading) {\n <div class=\"d-flex j-c-center\">\n <c8y-loading></c8y-loading>\n </div>\n }\n</div>\n","import { Component, Input, OnChanges, SimpleChanges, ChangeDetectionStrategy } from '@angular/core';\nimport { BehaviorSubject, Observable } from 'rxjs';\nimport { distinctUntilChanged, shareReplay, switchMap, tap } from 'rxjs/operators';\nimport { ImageWidgetConfig, ImageWidgetStyle } from '../image-widget.model';\nimport { ImageWidgetService } from '../image-widget.service';\nimport { EmptyStateComponent, LoadingComponent } from '@c8y/ngx-components';\nimport { AsyncPipe, NgClass, NgIf, NgStyle } from '@angular/common';\n\n@Component({\n selector: 'c8y-image-widget-view',\n templateUrl: './image-widget-view.component.html',\n standalone: true,\n imports: [NgIf, NgClass, AsyncPipe, NgStyle, LoadingComponent, EmptyStateComponent],\n changeDetection: ChangeDetectionStrategy.Eager\n})\nexport class ImageWidgetViewComponent implements OnChanges {\n @Input() config: ImageWidgetConfig;\n imageBinaryId$ = new BehaviorSubject<string>(null);\n imageDetails$: Observable<{\n file: File;\n base64: string;\n }>;\n styling: ImageWidgetStyle \| null;\n loading = true;\n\n constructor(private imageWidget: ImageWidgetService) {\n this.imageDetails$ = this.imageBinaryId$.pipe(\n distinctUntilChanged(),\n tap(() => (this.loading = true)),\n switchMap(imageBinaryId => this.imageWidget.getImageDetails(imageBinaryId)),\n tap(() => (this.loading = false)),\n shareReplay(1)\n );\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.config) {\n const value = changes.config.currentValue as ImageWidgetConfig;\n this.imageBinaryId$.next(value.imageBinaryId);\n this.setStyling(value);\n }\n }\n\n private setStyling(config: ImageWidgetConfig): void {\n this.styling = this.imageWidget.getStyling(config);\n }\n}\n","<ng-container ngIf=\"imageDetails$ \| async as details; else empty\">\n <img\n [src]=\"details.base64\"\n [title]=\"details.file.name\"\n [ngClass]=\"styling ? 'fit-h fit-w' : 'img-responsive'\"\n [ngStyle]=\"styling\"\n />\n</ng-container>\n\n<ng-template #empty>\n <div class=\"d-flex fit-h fit-w j-c-center a-i-center\" ngIf=\"!loading\">\n <c8y-ui-empty-state\n class=\"fit-w\"\n [icon]=\"'no-image'\"\n [title]=\"'No image to display.' \| translate\"\n [subtitle]=\"'Upload an image.' \| translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n</ng-template>\n<div class=\"d-flex fit-h fit-w j-c-center a-i-center\" ngIf=\"loading\">\n <c8y-loading></c8y-loading>\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["i1","i3.ImageWidgetService","i1.ImageWidgetService"],"mappings":"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"}
1	+ {"version":3,"file":"c8y-ngx-components-widgets-implementations-image.mjs","sources":["../../widgets/implementations/image/image-widget.model.ts","../../widgets/implementations/image/image-widget.service.ts","../../widgets/implementations/image/image-widget-config/image-widget-config.component.ts","../../widgets/implementations/image/image-widget-config/image-widget-config.component.html","../../widgets/implementations/image/image-widget-view/image-widget-view.component.ts","../../widgets/implementations/image/image-widget-view/image-widget-view.component.html","../../widgets/implementations/image/c8y-ngx-components-widgets-implementations-image.ts"],"sourcesContent":["export interface ImageWidgetConfig {\n imageBinaryId: string;\n styling?: ImageWidgetConfigStyling;\n}\n\nexport interface ImageWidgetConfigStyling {\n objectFit: string;\n objectPositionX: string;\n objectPositionY: string;\n}\n\nexport interface ImageWidgetStyle {\n [key: string]: string;\n}\n\nexport const defaultObjectFitValue = 'contain';\nexport const defaultObjectPositionValue = 'center';\n","import { Injectable } from '@angular/core';\nimport {\n IManagedObject,\n IManagedObjectBinary,\n InventoryService,\n InventoryBinaryService\n} from '@c8y/client';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport { AlertService, FilesService } from '@c8y/ngx-components';\nimport { TranslateService } from '@ngx-translate/core';\nimport {\n defaultObjectPositionValue,\n ImageWidgetConfig,\n ImageWidgetStyle\n} from './image-widget.model';\n\n@Injectable({ providedIn: 'root' })\nexport class ImageWidgetService {\n constructor(\n private inventory: InventoryService,\n private fileService: FilesService,\n private alert: AlertService,\n private translate: TranslateService,\n private binary: InventoryBinaryService\n ) {}\n\n async getImageDetails(\n imageBinaryId: string \| null\n ): Promise<{ file: File; base64: string; c8y_SHA256: string }> {\n if (!imageBinaryId) {\n return null;\n }\n\n try {\n const { data: imageBinaryMo } = await this.inventory.detail(imageBinaryId);\n const file = await this.fileService.getFile(imageBinaryMo as IManagedObjectBinary);\n const base64 = await this.fileService.toBase64(file);\n return {\n file,\n base64: base64 as string,\n c8y_SHA256: imageBinaryMo.c8y_SHA256\n };\n } catch (e) {\n const text = this.translate.instant(\n gettext('Unable to retrieve image with id: {{ imageBinaryId }}'),\n { imageBinaryId }\n );\n this.alert.danger(text, e?.data);\n }\n\n return null;\n }\n\n async uploadFile(\n file: File,\n options: {\n dashboardMoId?: string;\n isDeviceTypeDashboard?: boolean;\n } = {}\n ): Promise<string> {\n const hash = await this.fileService.getHashSumOfFile(file);\n const fileDetails = { c8y_SHA256: hash };\n const globalImage = !options?.dashboardMoId \|\| options?.isDeviceTypeDashboard;\n const partialBinaryMo: Partial<IManagedObject> = !globalImage\n ? { ...fileDetails }\n : { ...fileDetails, c8y_Global: {} };\n const { data: mo } = await this.binary.create(file, partialBinaryMo);\n if (options?.dashboardMoId) {\n await this.inventory.childAdditionsAdd(mo, options?.dashboardMoId);\n }\n return mo.id;\n }\n\n getStyling(config: ImageWidgetConfig): ImageWidgetStyle \| null {\n if (!config.styling?.objectFit \|\| config.styling?.objectFit === 'full-width') {\n return null;\n }\n return {\n 'object-fit': config.styling.objectFit,\n 'object-position': `${config.styling?.objectPositionX \|\| defaultObjectPositionValue} ${\n config.styling?.objectPositionY \|\| defaultObjectPositionValue\n }`\n };\n }\n}\n","import { AsyncPipe, NgClass, NgStyle } from '@angular/common';\nimport {\n AfterViewInit,\n Component,\n Input,\n OnDestroy,\n OnInit,\n Optional,\n QueryList,\n TemplateRef,\n ViewChildren,\n ChangeDetectionStrategy\n} from '@angular/core';\nimport {\n ControlContainer,\n FormBuilder,\n FormGroup,\n NgForm,\n ReactiveFormsModule,\n Validators\n} from '@angular/forms';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport {\n AlertService,\n C8yTranslatePipe,\n C8yValidators,\n DropAreaComponent,\n FilesService,\n FormGroupComponent,\n LoadingComponent,\n MessageDirective,\n MessagesComponent,\n ListGroupModule,\n OnBeforeSave\n} from '@c8y/ngx-components';\nimport { WidgetConfigComponent, WidgetConfigService } from '@c8y/ngx-components/context-dashboard';\nimport { get } from 'lodash-es';\nimport { BehaviorSubject, merge, Observable, Subject } from 'rxjs';\nimport {\n distinctUntilChanged,\n filter,\n map,\n shareReplay,\n switchMap,\n takeUntil,\n tap\n} from 'rxjs/operators';\nimport {\n defaultObjectFitValue,\n defaultObjectPositionValue,\n ImageWidgetConfig,\n ImageWidgetConfigStyling,\n ImageWidgetStyle\n} from '../image-widget.model';\nimport { ImageWidgetService } from '../image-widget.service';\n\n@Component({\n selector: 'c8y-image-widget-config',\n templateUrl: './image-widget-config.component.html',\n viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],\n standalone: true,\n imports: [\n ReactiveFormsModule,\n FormGroupComponent,\n MessagesComponent,\n ListGroupModule,\n MessageDirective,\n C8yTranslatePipe,\n AsyncPipe,\n NgStyle,\n NgClass,\n DropAreaComponent,\n LoadingComponent\n ],\n changeDetection: ChangeDetectionStrategy.Eager\n})\nexport class ImageWidgetConfigComponent implements OnInit, OnDestroy, OnBeforeSave, AfterViewInit {\n @Input() config: ImageWidgetConfig;\n imageBinaryId$ = new BehaviorSubject<string>(null);\n imageSrc$: Observable<string>;\n loading = false;\n formGroup: FormGroup;\n fileFromConfig: File;\n styling: ImageWidgetStyle \| null;\n destroyed$ = new Subject<void>();\n objectFitOptions = [\n {\n label: gettext('Contain`verb, image fitting option`'),\n value: 'contain',\n description: gettext(\n 'The image is entirely displayed within the widget while preserving the aspect ratio.'\n )\n },\n {\n label: gettext('Cover`verb, image fitting option`'),\n value: 'cover',\n description: gettext(\n 'The image is resized to fill the widget while preserving the aspect ratio. Overflowing areas are clipped.'\n )\n },\n {\n label: gettext('Fill`verb, image fitting option`'),\n value: 'fill',\n description: gettext(\n 'The image is stretched to fill the widget, overriding the aspect-ratio.'\n )\n },\n {\n label: gettext('Full width`image fitting option`'),\n value: 'full-width',\n description: gettext(\n `The image is resized to fit the widget's width while preserving the aspect ratio. Overflowing area is scrollable.`\n )\n }\n ];\n\n @ViewChildren('imagePreview') imagePreviewTemplate!: QueryList<TemplateRef<any>>;\n\n constructor(\n private formBuilder: FormBuilder,\n private form: NgForm,\n private fileService: FilesService,\n private alert: AlertService,\n private imageWidget: ImageWidgetService,\n @Optional() private widgetConfig: WidgetConfigComponent,\n private widgetConfigService: WidgetConfigService\n ) {}\n\n async onBeforeSave(config?: ImageWidgetConfig): Promise<boolean> {\n if (this.formGroup.invalid) {\n return false;\n }\n\n const fileFromForm = this.getFileFromFormValue(this.formGroup.value);\n if (fileFromForm && fileFromForm !== this.fileFromConfig) {\n try {\n const imageBinaryId = await this.imageWidget.uploadFile(fileFromForm, {\n dashboardMoId: this.getDashboardMoId(),\n isDeviceTypeDashboard: this.widgetConfig?.isDeviceTypeDashboard\n });\n Object.assign(config, { imageBinaryId });\n } catch (e) {\n this.alert.danger(gettext('Unable to upload image.'), e?.data);\n return false;\n }\n }\n const styling: ImageWidgetConfigStyling = this.formGroup.value.styling;\n Object.assign(config, { styling });\n\n return true;\n }\n\n ngOnInit() {\n this.initForm();\n const imageFromConfig = this.imageBinaryId$.pipe(\n filter(id => !!id),\n distinctUntilChanged(),\n tap(() => (this.loading = true)),\n switchMap(imageBinaryId => this.imageWidget.getImageDetails(imageBinaryId)),\n tap(details => {\n this.loading = false;\n this.fileFromConfig = details.file;\n if (details) {\n this.formGroup.patchValue({ images: [{ file: details.file, name: details.file.name }] });\n }\n }),\n map(details => details?.base64),\n shareReplay(1)\n );\n const selectedFile = this.formGroup.valueChanges.pipe(\n map(value => this.getFileFromFormValue(value)),\n distinctUntilChanged(),\n switchMap(file => (file ? this.fileService.toBase64(file) : Promise.resolve('')))\n );\n this.imageSrc$ = merge(imageFromConfig, selectedFile).pipe(\n map(base64 => (base64 ? (base64 as string) : ''))\n );\n this.imageBinaryId$.next(this.config?.imageBinaryId);\n }\n\n ngAfterViewInit(): void {\n this.imagePreviewTemplate.changes.pipe(takeUntil(this.destroyed$)).subscribe(template => {\n this.widgetConfigService.setPreview(template.first);\n });\n }\n\n ngOnDestroy(): void {\n this.destroyed$.next();\n this.destroyed$.complete();\n }\n\n private getDashboardMoId(): string \| null {\n return get(this.widgetConfig, 'mo.id', null);\n }\n\n private async initForm(): Promise<void> {\n const stylingFormGroup = this.formBuilder.group({\n objectFit: [\n // fallback to 'full-width' for old legacy widgets, newly created widgets should use defaultObjectFitValue\n this.config.imageBinaryId && !this.config.styling ? 'full-width' : defaultObjectFitValue,\n [Validators.required]\n ],\n objectPositionX: [defaultObjectPositionValue, [Validators.required]],\n objectPositionY: [defaultObjectPositionValue, [Validators.required]]\n });\n this.formGroup = this.formBuilder.group({\n images: [\n null,\n [\n Validators.required,\n Validators.minLength(1),\n Validators.maxLength(1),\n C8yValidators.filesValidator({ maximumFileSizeInKb: 1000, typePrefix: 'image/' })\n ]\n ],\n styling: stylingFormGroup\n });\n this.form.form.addControl('config', this.formGroup);\n this.formGroup.patchValue(this.config);\n this.formGroup.valueChanges\n .pipe(takeUntil(this.destroyed$))\n .subscribe(changes => this.setStyling(changes));\n }\n\n private getFileFromFormValue(formValue: any): File \| null {\n const images: any[] = formValue?.images \|\| [];\n return images[0]?.file \|\| null;\n }\n\n private setStyling(config: ImageWidgetConfig): void {\n this.styling = this.imageWidget.getStyling(config);\n }\n}\n","<div [formGroup]=\"formGroup\">\n <fieldset class=\"c8y-fieldset\">\n <legend>{{ 'Image' \| translate }}</legend>\n <c8y-form-group class=\"m-b-16\">\n <c8y-drop-area\n class=\"drop-area-sm\"\n [icon]=\"'upload'\"\n formControlName=\"images\"\n [accept]=\"'image'\"\n [maxAllowedFiles]=\"1\"\n ></c8y-drop-area>\n <c8y-messages>\n <c8y-message\n name=\"maxFileSizeReached\"\n [text]=\"\n 'The maximum image size is {{ maxFileSize }} kB. The selected image has a size of {{ actualFileSize }} kB.'\n \| translate\n \"\n ></c8y-message>\n <c8y-message\n name=\"wrongFileType\"\n [text]=\"'Wrong file type, select an image.' \| translate\"\n ></c8y-message>\n <c8y-message\n name=\"maxlength\"\n [text]=\"'Only select one image.' \| translate\"\n ></c8y-message>\n <c8y-message\n name=\"required\"\n [text]=\"'An image is required.' \| translate\"\n ></c8y-message>\n <c8y-message\n name=\"minlength\"\n [text]=\"'An image is required.' \| translate\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </fieldset>\n\n @if (imageSrc$ \| async; as src) {\n <div [formGroupName]=\"'styling'\">\n <fieldset class=\"c8y-fieldset\">\n <legend>\n {{ 'Image display' \| translate }}\n </legend>\n <c8y-form-group class=\"form-group-sm m-b-0\">\n <c8y-list-group\n class=\"no-border-last p-b-16\"\n role=\"list\"\n >\n @for (\n objectFitOption of objectFitOptions;\n track objectFitOption.value;\n let i = $index\n ) {\n <c8y-li role=\"listitem\">\n <label class=\"c8y-radio\">\n <input\n type=\"radio\"\n [id]=\"'groupradiocontentclass' + i\"\n formControlName=\"objectFit\"\n [value]=\"objectFitOption.value\"\n />\n <span></span>\n <span class=\"l-h-1\">\n {{ objectFitOption.label \| translate }}\n <br />\n <small class=\"text-muted\">\n {{ objectFitOption.description \| translate }}\n </small>\n </span>\n </label>\n </c8y-li>\n }\n </c8y-list-group>\n </c8y-form-group>\n </fieldset>\n <fieldset class=\"c8y-fieldset\">\n <legend>\n {{ 'Image alignment' \| translate }}\n </legend>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <c8y-form-group class=\"form-group-sm\">\n <label>{{ 'Horizontal`alignment`' \| translate }}</label>\n <div class=\"c8y-select-wrapper\">\n <select\n class=\"form-control\"\n formControlName=\"objectPositionX\"\n >\n <option [ngValue]=\"'left'\">\n {{ 'left`horizontal alignment`' \| translate }}\n </option>\n <option [ngValue]=\"'center'\">\n {{ 'center`horizontal alignment`' \| translate }}\n </option>\n <option [ngValue]=\"'right'\">\n {{ 'right`horizontal alignment`' \| translate }}\n </option>\n </select>\n </div>\n </c8y-form-group>\n </div>\n <div class=\"col-md-6\">\n <c8y-form-group class=\"form-group-sm\">\n <label>{{ 'Vertical`alignment`' \| translate }}</label>\n <div class=\"c8y-select-wrapper\">\n <select\n class=\"form-control\"\n formControlName=\"objectPositionY\"\n >\n <option [ngValue]=\"'top'\">\n {{ 'top`vertical alignment`' \| translate }}\n </option>\n <option [ngValue]=\"'center'\">\n {{ 'center`vertical alignment`' \| translate }}\n </option>\n <option [ngValue]=\"'bottom'\">\n {{ 'bottom`vertical alignment`' \| translate }}\n </option>\n </select>\n </div>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n <ng-template #imagePreview>\n <img\n [ngStyle]=\"styling\"\n alt=\"{{ 'Image preview' \| translate }}\"\n [src]=\"src\"\n [ngClass]=\"styling ? 'fit-h fit-w' : 'img-responsive'\"\n />\n </ng-template>\n </div>\n }\n @if (loading) {\n <div class=\"d-flex j-c-center\">\n <c8y-loading></c8y-loading>\n </div>\n }\n</div>\n","import { Component, Input, OnChanges, SimpleChanges, ChangeDetectionStrategy } from '@angular/core';\nimport { BehaviorSubject, Observable } from 'rxjs';\nimport { distinctUntilChanged, shareReplay, switchMap, tap } from 'rxjs/operators';\nimport { ImageWidgetConfig, ImageWidgetStyle } from '../image-widget.model';\nimport { ImageWidgetService } from '../image-widget.service';\nimport { EmptyStateComponent, LoadingComponent } from '@c8y/ngx-components';\nimport { AsyncPipe, NgClass, NgIf, NgStyle } from '@angular/common';\n\n@Component({\n selector: 'c8y-image-widget-view',\n templateUrl: './image-widget-view.component.html',\n standalone: true,\n imports: [NgIf, NgClass, AsyncPipe, NgStyle, LoadingComponent, EmptyStateComponent],\n changeDetection: ChangeDetectionStrategy.Eager\n})\nexport class ImageWidgetViewComponent implements OnChanges {\n @Input() config: ImageWidgetConfig;\n imageBinaryId$ = new BehaviorSubject<string>(null);\n imageDetails$: Observable<{\n file: File;\n base64: string;\n }>;\n styling: ImageWidgetStyle \| null;\n loading = true;\n\n constructor(private imageWidget: ImageWidgetService) {\n this.imageDetails$ = this.imageBinaryId$.pipe(\n distinctUntilChanged(),\n tap(() => (this.loading = true)),\n switchMap(imageBinaryId => this.imageWidget.getImageDetails(imageBinaryId)),\n tap(() => (this.loading = false)),\n shareReplay(1)\n );\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.config) {\n const value = changes.config.currentValue as ImageWidgetConfig;\n this.imageBinaryId$.next(value.imageBinaryId);\n this.setStyling(value);\n }\n }\n\n private setStyling(config: ImageWidgetConfig): void {\n this.styling = this.imageWidget.getStyling(config);\n }\n}\n","<ng-container ngIf=\"imageDetails$ \| async as details; else empty\">\n <img\n [src]=\"details.base64\"\n [title]=\"details.file.name\"\n [ngClass]=\"styling ? 'fit-h fit-w' : 'img-responsive'\"\n [ngStyle]=\"styling\"\n />\n</ng-container>\n\n<ng-template #empty>\n <div class=\"d-flex fit-h fit-w j-c-center a-i-center\" ngIf=\"!loading\">\n <c8y-ui-empty-state\n class=\"fit-w\"\n [icon]=\"'no-image'\"\n [title]=\"'No image to display.' \| translate\"\n [subtitle]=\"'Upload an image.' \| translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n</ng-template>\n<div class=\"d-flex fit-h fit-w j-c-center a-i-center\" ngIf=\"loading\">\n <c8y-loading></c8y-loading>\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["i1","i3.ImageWidgetService","i1.ImageWidgetService"],"mappings":"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"}

package/fesm2022/c8y-ngx-components-widgets-implementations-quick-links.mjs CHANGED Viewed

@@ -595,7 +595,7 @@ class QuickLinksWidgetConfigListComponent {
         return this.quickLinksForm().getRawValue().quickLinks;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: QuickLinksWidgetConfigListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: QuickLinksWidgetConfigListComponent, isStandalone: true, selector: "c8y-quick-links-widget-config-list", inputs: { quickLinksForm: { classPropertyName: "quickLinksForm", publicName: "quickLinksForm", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, quickLinksFormArray: { classPropertyName: "quickLinksFormArray", publicName: "quickLinksFormArray", isSignal: true, isRequired: false, transformFunction: null }, appsNameChanged: { classPropertyName: "appsNameChanged", publicName: "appsNameChanged", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "<c8y-list-group\n  class=\"cdk-droplist no-border-last separator-top\"\n  cdkDropList\n  (cdkDropListDropped)=\"drop($event)\"\n  [cdkDropListDisabled]=\"getQuickLinks().length < 2\"\n>\n  <form\n    class=\"d-contents\"\n    [formGroup]=\"quickLinksForm()\"\n  >\n    <div\n      class=\"d-contents\"\n      [formArrayName]=\"'quickLinks'\"\n    >\n      @for (link of quickLinksFormArray().controls; track link; let i = $index) {\n        @let linkValue = link.getRawValue();\n\n        <c8y-li\n          [dense]=\"true\"\n          [formGroupName]=\"i\"\n          cdkDrag\n        >\n          <c8y-li-drag-handle\n            title=\"{{ 'Drag to reorder' | translate }}\"\n            cdkDragHandle\n          >\n            <i c8yIcon=\"drag-reorder\"></i>\n          </c8y-li-drag-handle>\n          <c8y-li-icon\n            class=\"icon-24 p-relative changeIcon a-s-stretch\"\n            [ngClass]=\"{\n              'm-l-16': getQuickLinks().length < 2\n            }\"\n          >\n            @if (linkValue.icon) {\n              <c8y-change-icon\n                [currentIcon]=\"linkValue.icon\"\n                (onButtonClick)=\"changeLinkIcon(link)\"\n              ></c8y-change-icon>\n            } @else {\n              <c8y-change-icon (onButtonClick)=\"changeLinkIcon(link)\">\n                <c8y-app-icon\n                  [name]=\"linkValue.app.name\"\n                  [app]=\"linkValue.app\"\n                  [contextPath]=\"linkValue.app.contextPath\"\n                ></c8y-app-icon>\n              </c8y-change-icon>\n            }\n          </c8y-li-icon>\n\n          <div class=\"d-flex gap-8 a-i-center\">\n            <div class=\"input-group input-group-editable\">\n              <input\n                class=\"form-control\"\n                formControlName=\"label\"\n                [placeholder]=\"'e.g. my Quick Link' | translate\"\n              />\n              <span></span>\n            </div>\n\n            <button\n              class=\"showOnHover btn-dot btn-dot--danger m-l-auto\"\n              [attr.aria-label]=\"'Delete' | translate\"\n              tooltip=\"{{ 'Delete' | translate }}\"\n              placement=\"top\"\n              type=\"button\"\n              [delay]=\"500\"\n              (click)=\"removeLink(i)\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n          <c8y-list-item-collapse>\n            <div class=\"d-flex a-i-center gap-24\">\n              <c8y-form-group class=\"flex-grow\">\n                <label for=\"ql-url\">{{ 'URL' | translate }}</label>\n                <input\n                  class=\"form-control\"\n                  id=\"ql-url\"\n                  type=\"text\"\n                  formControlName=\"url\"\n                  [placeholder]=\"'e.g. https://www.example.com' | translate\"\n                />\n                <c8y-messages>\n                  <c8y-message\n                    name=\"maxlength\"\n                    [text]=\"'The URL must not exceed {{ requiredLength }} characters.' | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n              <div class=\"form-group flex-noshrink\">\n                <label>&nbsp;</label>\n                <label\n                  class=\"c8y-checkbox\"\n                  title=\"{{ 'Open the link in a new browser tab' | translate }}\"\n                >\n                  <input\n                    [attr.aria-label]=\"'Open in new tab' | translate\"\n                    type=\"checkbox\"\n                    formControlName=\"newTab\"\n                    checked=\"checked\"\n                  />\n                  <span></span>\n                  <span>{{ 'New tab' | translate }}</span>\n                </label>\n              </div>\n            </div>\n          </c8y-list-item-collapse>\n        </c8y-li>\n      }\n    </div>\n  </form>\n</c8y-list-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i2.ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "ngmodule", type: DynamicFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "ngmodule", type: C8yTranslateModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: ChangeIconComponent, selector: "c8y-change-icon", inputs: ["currentIcon"], outputs: ["onButtonClick"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: QuickLinksWidgetConfigListComponent, isStandalone: true, selector: "c8y-quick-links-widget-config-list", inputs: { quickLinksForm: { classPropertyName: "quickLinksForm", publicName: "quickLinksForm", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, quickLinksFormArray: { classPropertyName: "quickLinksFormArray", publicName: "quickLinksFormArray", isSignal: true, isRequired: false, transformFunction: null }, appsNameChanged: { classPropertyName: "appsNameChanged", publicName: "appsNameChanged", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "<c8y-list-group\n  class=\"cdk-droplist no-border-last separator-top\"\n  cdkDropList\n  (cdkDropListDropped)=\"drop($event)\"\n  [cdkDropListDisabled]=\"getQuickLinks().length < 2\"\n>\n  <form\n    class=\"d-contents\"\n    [formGroup]=\"quickLinksForm()\"\n  >\n    <div\n      class=\"d-contents\"\n      [formArrayName]=\"'quickLinks'\"\n    >\n      @for (link of quickLinksFormArray().controls; track link; let i = $index) {\n        @let linkValue = link.getRawValue();\n\n        <c8y-li\n          [dense]=\"true\"\n          [formGroupName]=\"i\"\n          cdkDrag\n        >\n          <c8y-li-drag-handle\n            title=\"{{ 'Drag to reorder' | translate }}\"\n            cdkDragHandle\n          >\n            <i c8yIcon=\"drag-reorder\"></i>\n          </c8y-li-drag-handle>\n          <c8y-li-icon\n            class=\"icon-24 p-relative changeIcon a-s-stretch\"\n            [ngClass]=\"{\n              'm-l-16': getQuickLinks().length < 2\n            }\"\n          >\n            @if (linkValue.icon) {\n              <c8y-change-icon\n                [currentIcon]=\"linkValue.icon\"\n                (onButtonClick)=\"changeLinkIcon(link)\"\n              ></c8y-change-icon>\n            } @else {\n              <c8y-change-icon (onButtonClick)=\"changeLinkIcon(link)\">\n                <c8y-app-icon\n                  [name]=\"linkValue.app.name\"\n                  [app]=\"linkValue.app\"\n                  [contextPath]=\"linkValue.app.contextPath\"\n                ></c8y-app-icon>\n              </c8y-change-icon>\n            }\n          </c8y-li-icon>\n\n          <div class=\"d-flex gap-8 a-i-center\">\n            <div class=\"input-group input-group-editable\">\n              <input\n                class=\"form-control\"\n                formControlName=\"label\"\n                [placeholder]=\"'e.g. my Quick Link' | translate\"\n              />\n              <span></span>\n            </div>\n\n            <button\n              class=\"showOnHover btn-dot btn-dot--danger m-l-auto\"\n              [attr.aria-label]=\"'Delete' | translate\"\n              tooltip=\"{{ 'Delete' | translate }}\"\n              placement=\"top\"\n              type=\"button\"\n              [delay]=\"500\"\n              (click)=\"removeLink(i)\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n          <c8y-list-item-collapse>\n            <div class=\"d-flex a-i-center gap-24\">\n              <c8y-form-group class=\"flex-grow\">\n                <label for=\"ql-url\">{{ 'URL' | translate }}</label>\n                <input\n                  class=\"form-control\"\n                  id=\"ql-url\"\n                  type=\"text\"\n                  formControlName=\"url\"\n                  [placeholder]=\"'e.g. https://www.example.com' | translate\"\n                />\n                <c8y-messages>\n                  <c8y-message\n                    name=\"maxlength\"\n                    [text]=\"'The URL must not exceed {{ requiredLength }} characters.' | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n              <div class=\"form-group flex-noshrink\">\n                <label>&nbsp;</label>\n                <label\n                  class=\"c8y-checkbox\"\n                  title=\"{{ 'Open the link in a new browser tab' | translate }}\"\n                >\n                  <input\n                    [attr.aria-label]=\"'Open in new tab' | translate\"\n                    type=\"checkbox\"\n                    formControlName=\"newTab\"\n                    checked=\"checked\"\n                  />\n                  <span></span>\n                  <span>{{ 'New tab' | translate }}</span>\n                </label>\n              </div>\n            </div>\n          </c8y-list-item-collapse>\n        </c8y-li>\n      }\n    </div>\n  </form>\n</c8y-list-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable", "selectOnClick"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i2.ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "ngmodule", type: DynamicFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "ngmodule", type: C8yTranslateModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: ChangeIconComponent, selector: "c8y-change-icon", inputs: ["currentIcon"], outputs: ["onButtonClick"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: QuickLinksWidgetConfigListComponent, decorators: [{
             type: Component,