UNPKG

@c8y/ngx-components

Version:

Angular modules for Cumulocity IoT applications

1 lines • 58 kB
{"version":3,"file":"c8y-ngx-components-widgets-implementations-html-widget.mjs","sources":["../../widgets/implementations/html-widget/html-widget.model.ts","../../widgets/implementations/html-widget/webcomponent-template.ts","../../widgets/implementations/html-widget/legacy-template.ts","../../widgets/implementations/html-widget/html-widget-config.service.ts","../../widgets/implementations/html-widget/advanced-settings/advanced-settings.component.ts","../../widgets/implementations/html-widget/advanced-settings/advanced-settings.component.html","../../widgets/implementations/html-widget/html-frame/html-frame.component.ts","../../widgets/implementations/html-widget/html-frame/html-frame.component.html","../../widgets/implementations/html-widget/widget-code-editor-section/widget-code-editor.component.ts","../../widgets/implementations/html-widget/widget-code-editor-section/widget-code-editor.component.html","../../widgets/implementations/html-widget/html-widget-config.component.ts","../../widgets/implementations/html-widget/html-widget-config.component.html","../../widgets/implementations/html-widget/html-widget.component.ts","../../widgets/implementations/html-widget/html-widget.component.html","../../widgets/implementations/html-widget/c8y-ngx-components-widgets-implementations-html-widget.ts"],"sourcesContent":["import { IManagedObject } from '@c8y/client';\nimport { WidgetSettings } from '@c8y/ngx-components';\n\nexport interface HtmlWidgetConfig {\n device: IManagedObject;\n settings: WidgetSettings;\n config: HtmlWidget;\n\n /**\n * On HTML WIdget 1.0 this property was used to store the HTML code.\n * It is not used anymore, but we need to keep it for backward compatibility.\n * The HTML code is now stored in the config property.\n * @deprecated Use config.code instead.\n */\n html?: any;\n}\n\nexport type C8yProperties = Array<PathProperty | ComputedProperty>;\n\nexport interface HtmlWidget {\n css: string;\n code: string;\n props?: C8yProperties;\n options: HtmlWidgetOptions;\n legacy: boolean;\n devMode: boolean;\n latestCodeHash?: string;\n}\n\nexport interface HtmlWidgetOptions {\n cssEncapsulation: boolean;\n advancedSecurity: boolean;\n}\n\nexport interface WebcomponentContext extends HTMLElement {\n c8yContext: IManagedObject;\n}\n\nexport interface PathProperty {\n name: string;\n path: string;\n query?: never;\n reducer?: never;\n}\n\nexport interface ComputedProperty {\n name: string;\n path?: never;\n query: string;\n reducer?: string;\n}\n\nexport const INITIAL_HTML_FORMATTED = `<div>\n <h1>Hello from HTML widget</h1>\n <p>\n You can use HTML and Javascript template literals here:\n \\$\\{this.c8yContext ? this.c8yContext.name : 'No device selected'\\}\n </p>\n\n <a class=\"btn btn-primary\" href=\"#/group\">Go to groups</a>\n\n <p>\n Use the CSS editor to add CSS. You can use <span class=\"branded\">any design-token CSS variable</span> in there.\n </p>\n</div>`;\nexport const INITIAL_CSS_FORMATTED = `\n:host > div {\n padding-left: var(--c8y-root-component-padding);\n padding-right: var(--c8y-root-component-padding);\n}\nspan.branded { \n color: var(--c8y-brand-primary); \n}`;\n\nexport const defaultWebComponentName = 'DefaultWebComponent';\n\nexport const defaultWebComponentAttributeNameContext = 'c8yContext';\n","import { defaultWebComponentName } from './html-widget.model';\n\nexport const webComponentTemplate = (\n html: string,\n css?: string,\n viewEncapsulation?: boolean,\n name = defaultWebComponentName\n) => `\nimport { LitElement, html, css} from 'lit';\n${!viewEncapsulation ? `import { styleImports } from 'styles';` : ''}\n\nexport default class ${name} extends LitElement {\n static styles = css\\`\n ${css}\n \\`;\n\n static properties = {\n // The managed object this widget is assigned to. Can be null.\n c8yContext: { type: Object },\n };\n\n constructor() {\n super();\n }\n\n render() {\n return html\\`${\n viewEncapsulation\n ? html\n : `\n <style>\n \\${styleImports}\n </style>\n ${html}\n `\n }\\`;\n }\n}\n`;\n","export const legacyTemplate = (html: string, deviceId?: string | number, deviceName?: string) => `\nimport { angular } from 'angular';\n\n// NOTE: This is a legacy template for the HTML widget.\n// It is used to compile the HTML content in the context of the AngularJS application.\n// The template is injected into the AngularJS application and compiled using the AngularJS compiler.\n// The template should only be used for backward compatibility purposes.\n// It is recommended to use a web component instead.\n\nif(!angular) {\n throw new Error('AngularJS is not available. Please make sure to include AngularJS in your project.');\n}\n\nconst $injector = angular.element(document.querySelector('c8y-ui-root')).injector();\nif (!$injector) {\n throw new Error('AngularJS injector is not available. Maybe not an hybrid application?');\n}\n\n// defining a new scope\nconst $rootScope = $injector.get('$rootScope');\nconst $scope = $rootScope.$new(true); \n\n// faking the old angularjs config \n$scope.child = { \n config: {\n ${deviceId ? `device: { id: \"${deviceId}\", name: \"${deviceName}\" },` : ''}\n html: \\`<div ng-controller=\"HtmlWidgetCtrl\">${html}</div>\\`\n }\n};\n\n// load the needed services\nconst $compile = $injector.get('$compile');\nconst $controller = $injector.get('$controller');\n\n// create the element\nconst htmlElement = angular.element($scope.child.config.html);\n\n// The default controller providing the context\n$controller('HtmlWidgetCtrl', { $scope });\n\n// Compile the element\n$compile(htmlElement)($scope);\n\n// Apply the scope changes\n$rootScope.$apply();\n\nexport default htmlElement[0];`;\n","import { inject, Injectable } from '@angular/core';\nimport { AppStateService } from '@c8y/ngx-components';\nimport { CockpitConfig } from '@c8y/ngx-components/cockpit-config';\nimport { ContextWidgetConfig, WidgetConfigService } from '@c8y/ngx-components/context-dashboard';\nimport { isEmpty } from 'lodash';\nimport {\n combineLatest,\n debounceTime,\n distinctUntilChanged,\n filter,\n map,\n Observable,\n of,\n shareReplay,\n startWith,\n Subject,\n switchMap,\n takeUntil,\n withLatestFrom\n} from 'rxjs';\nimport { HtmlWidget, INITIAL_CSS_FORMATTED, INITIAL_HTML_FORMATTED } from './html-widget.model';\nimport { webComponentTemplate } from './webcomponent-template';\nimport { legacyTemplate } from './legacy-template';\n\n@Injectable()\nexport class HtmlWidgetConfigService {\n readonly DEFAULT_AUTO_SAVE_DEBOUNCE = 1000;\n codeChange$ = new Subject<{ value: string; type: 'css' | 'code' }>();\n widgetConfigService = inject(WidgetConfigService);\n appState = inject(AppStateService);\n destroy$ = new Subject<void>();\n\n init$ = this.widgetConfigService.currentConfig$.pipe(\n map(current => {\n if (current.html) {\n current.config = this.mapLegacyConfig(current);\n }\n\n return (current.config || {}) as HtmlWidget;\n }),\n filter(config => !!config),\n withLatestFrom(this.appState.currentApplicationConfig),\n switchMap(([widgetConfig, appConfig]) => this.initConfig(appConfig, widgetConfig)),\n shareReplay(),\n takeUntil(this.destroy$)\n );\n\n config$ = this.init$.pipe(switchMap(initValue => this.configChanged$.pipe(startWith(initValue))));\n\n codeEditorChangeConfig$ = combineLatest([\n this.codeChange$.pipe(startWith(undefined)),\n this.config$\n ]).pipe(\n distinctUntilChanged(),\n takeUntil(this.destroy$),\n debounceTime(this.DEFAULT_AUTO_SAVE_DEBOUNCE),\n map(([change, config]) => {\n if (!change) {\n return config;\n }\n if (change.type === 'css') {\n config.css = change.value;\n } else {\n config.code = change.value;\n }\n return { ...config };\n })\n );\n\n configChanged$ = new Subject<HtmlWidget>();\n\n initConfig(appConfig: CockpitConfig, widgetConfig: HtmlWidget): Observable<HtmlWidget> {\n const defaultToAdvancedMode = appConfig?.htmlWidgetDefaultToAdvancedMode ?? false;\n const isEmptyConfig = isEmpty(widgetConfig);\n if (isEmptyConfig && !defaultToAdvancedMode) {\n widgetConfig = this.initDefaultMode(!appConfig.htmlWidgetDisableSanitization);\n this.save(widgetConfig);\n return of(widgetConfig);\n }\n if (isEmptyConfig) {\n widgetConfig = this.enableAdvancedMode(widgetConfig);\n }\n\n // new config is needed to trigger ngOnChanges\n const newConfig = { ...widgetConfig };\n this.save(newConfig);\n return of(newConfig);\n }\n\n destroy(): void {\n this.destroy$.next();\n this.codeChange$.complete();\n this.configChanged$.complete();\n }\n\n save(config: HtmlWidget) {\n this.widgetConfigService.updateConfig({\n config\n });\n }\n\n changeCode(value: string) {\n this.codeChange$.next({ value, type: 'code' });\n }\n\n changeCss(value: string) {\n this.codeChange$.next({ value, type: 'css' });\n }\n\n enableAdvancedMode(currentConfig: HtmlWidget) {\n const currentHTML = currentConfig?.code || INITIAL_HTML_FORMATTED;\n const currentCSS = currentConfig?.css || INITIAL_CSS_FORMATTED;\n const code = currentConfig?.legacy\n ? legacyTemplate(\n currentHTML,\n this.widgetConfigService.currentConfig?.device?.id,\n this.widgetConfigService.currentConfig?.device?.name\n )\n : webComponentTemplate(currentHTML, currentCSS, false);\n currentConfig = {\n css: '',\n code,\n legacy: false,\n devMode: true,\n options: {\n cssEncapsulation: false,\n advancedSecurity: false\n }\n };\n return currentConfig;\n }\n\n initDefaultMode(advancedSecurity = true): HtmlWidget {\n return {\n css: INITIAL_CSS_FORMATTED,\n code: INITIAL_HTML_FORMATTED,\n legacy: false,\n devMode: false,\n options: {\n cssEncapsulation: false,\n advancedSecurity\n }\n };\n }\n\n private mapLegacyConfig(current: ContextWidgetConfig): HtmlWidget {\n const isAlreadyInAdvancedMode = current?.config?.devMode === true;\n if (isAlreadyInAdvancedMode) {\n return current.config as HtmlWidget;\n }\n\n const isAlreadyMapped = current?.config?.legacy === true;\n if (isAlreadyMapped) {\n return current.config as HtmlWidget;\n }\n\n return {\n code: current.html,\n css: '',\n legacy: true,\n devMode: false,\n options: {\n cssEncapsulation: false,\n advancedSecurity: current.sanitization === 'strict'\n }\n };\n }\n}\n","import { NgIf } from '@angular/common';\nimport { Component, inject, Input } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { Router } from '@angular/router';\nimport { C8yTranslatePipe, gettext, IconDirective, Permissions } from '@c8y/ngx-components';\nimport { WidgetConfigService } from '@c8y/ngx-components/context-dashboard';\nimport { PopoverModule } from 'ngx-bootstrap/popover';\nimport { TooltipModule } from 'ngx-bootstrap/tooltip';\nimport { HtmlWidgetConfigService } from '../html-widget-config.service';\nimport { HtmlWidgetConfig, HtmlWidgetOptions } from '../html-widget.model';\n\n@Component({\n standalone: true,\n imports: [IconDirective, NgIf, TooltipModule, PopoverModule, C8yTranslatePipe, FormsModule],\n selector: 'c8y-html-widget-advanced-settings',\n templateUrl: './advanced-settings.component.html'\n})\nexport class AdvancedSettingsComponent {\n widgetConfigService = inject(WidgetConfigService);\n htmlWidgetConfigService = inject(HtmlWidgetConfigService);\n router = inject(Router);\n permissionService = inject(Permissions);\n\n canChangeSettings = false;\n @Input()\n devMode: boolean;\n @Input()\n cssEncapsulation: boolean;\n\n CSS_ENCAPSULATION_HELP_CONTEXT = gettext(\n 'If enabled, the CSS will be encapsulated and no platform styling will be applied.'\n );\n\n ngOnInit(): void {\n this.canChangeSettings = this.permissionService.hasAnyRole([\n Permissions.ROLE_APPLICATION_MANAGEMENT_ADMIN,\n Permissions.ROLE_TENANT_ADMIN\n ]);\n }\n\n disableAdvancedMode() {\n const config = this.htmlWidgetConfigService.initDefaultMode();\n this.htmlWidgetConfigService.save(config);\n this.htmlWidgetConfigService.configChanged$.next(config);\n }\n\n enableAdvancedMode() {\n let { config } = this.widgetConfigService.currentConfig as HtmlWidgetConfig;\n config = this.htmlWidgetConfigService.enableAdvancedMode(config);\n this.htmlWidgetConfigService.save(config);\n this.htmlWidgetConfigService.configChanged$.next(config);\n }\n\n toggleAdvancedMode() {\n this.devMode ? this.disableAdvancedMode() : this.enableAdvancedMode();\n this.devMode = !this.devMode;\n }\n\n async changeOption(option: keyof HtmlWidgetOptions) {\n const { config } = this.widgetConfigService.currentConfig as HtmlWidgetConfig;\n config.options[option] = !config.options[option];\n this.htmlWidgetConfigService.save(config);\n this.htmlWidgetConfigService.configChanged$.next(config);\n }\n}\n","<fieldset class=\"c8y-fieldset m-t-0\">\n <legend>{{ 'Developer mode' | translate }}</legend>\n\n <div class=\"d-flex a-i-center p-b-16\">\n <label class=\"c8y-switch\">\n <input\n type=\"checkbox\"\n [ngModel]=\"devMode\"\n (change)=\"toggleAdvancedMode()\"\n [disabled]=\"!canChangeSettings\"\n />\n <span></span>\n <span>{{ 'Advanced developer mode' | translate }}</span>\n </label>\n\n <button class=\"btn-help\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"devMode ? disableAdvanced : enableAdvanced\"\n container=\"body\"\n placement=\"right\"\n triggers=\"focus\"\n type=\"button\"\n ></button>\n\n <ng-template #enableAdvanced>\n <p class=\"text-16 text-bold p-b-8\">\n <i [c8yIcon]=\"'imac-settings'\"></i>\n {{ 'Advanced developer mode' | translate }}\n </p>\n <p class=\"p-b-8\" translate>\n Create custom widgets by modifying a basic WebComponent with HTML and JavaScript. This\n <strong>unsupported</strong>\n feature is ideal for rapid prototyping and simple customizations.\n </p>\n <p class=\"p-b-8\" translate>\n For production environments, we recommend our fully-supported Angular-based\n <a href=\"https://styleguide.cumulocity.com\" target=\"_blank\">Web SDK</a>.\n <br />\n Enable advanced developer mode to start coding!\n </p>\n </ng-template>\n\n <ng-template #disableAdvanced>\n <p class=\"text-16 text-bold p-b-8\">\n {{ 'Advanced developer mode' | translate }}\n </p>\n <p class=\"p-b-8\" translate>\n The advanced developer mode is enabled for this widget allowing to build extensive Web\n Components.\n </p>\n <p class=\"p-b-8\" translate>\n You can disable this mode again, but it will reset the current code.\n </p>\n </ng-template>\n\n <ng-container *ngIf=\"!devMode\">\n <label\n class=\"c8y-switch m-l-auto\"\n >\n <input\n type=\"checkbox\"\n (change)=\"changeOption('cssEncapsulation')\"\n [disabled]=\"!canChangeSettings\"\n [ngModel]=\"cssEncapsulation\"\n />\n <span></span>\n <span>{{ 'CSS encapsulation' | translate }}</span>\n </label>\n <button\n class=\"btn-help m-0\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ CSS_ENCAPSULATION_HELP_CONTEXT | translate }}\"\n triggers=\"focus\"\n placement=\"left\"\n container=\"body\"\n type=\"button\"\n ></button>\n </ng-container>\n\n </div>\n</fieldset>\n","import { NgClass, NgFor } from '@angular/common';\nimport {\n Component,\n ElementRef,\n inject,\n Input,\n OnChanges,\n OnDestroy,\n SecurityContext,\n SimpleChanges,\n viewChild\n} from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\nimport { IIdentified, IManagedObject, InventoryService } from '@c8y/client';\nimport { Alert } from '@c8y/ngx-components';\nimport { kebabCase } from 'lodash-es';\nimport {\n catchError,\n EMPTY,\n filter,\n from,\n fromEvent,\n isEmpty,\n map,\n merge,\n Observable,\n Subject,\n switchMap,\n takeUntil\n} from 'rxjs';\nimport { defaultWebComponentName, HtmlWidget, WebcomponentContext } from '../html-widget.model';\nimport { webComponentTemplate } from '../webcomponent-template';\nimport { legacyTemplate } from '../legacy-template';\n\n@Component({\n standalone: true,\n imports: [NgFor, NgClass],\n selector: 'c8y-html-frame',\n templateUrl: './html-frame.component.html',\n host: { class: 'd-contents' }\n})\nexport class HtmlFrameComponent implements OnChanges, OnDestroy {\n @Input()\n config: HtmlWidget;\n\n @Input()\n device: IManagedObject | IIdentified;\n\n /**\n * If set to true, it will be ensured that a unique hash is generated\n * for every webcomponent. This is useful if configured as otherwise it might\n * happen that the same code is already used in another webcomponent and the\n * error messages can not be assigned correctly.\n */\n @Input()\n useSalt = false;\n\n alerts: Alert[] = [];\n\n private sanitizer = inject(DomSanitizer);\n private destroy$ = new Subject<void>();\n private hostElement = viewChild<ElementRef<HTMLDivElement>>('hostElement');\n private reload$ = new Subject<void>();\n private latestUrl?: string;\n private htmlContentInitialization$ = this.reload$.pipe(\n filter(() => !!this.hostElement()),\n map(() => this.hostElement().nativeElement),\n switchMap((div: HTMLDivElement) =>\n merge(\n this.listenToErrors(),\n from(this.initDiv(div)).pipe(\n isEmpty(),\n filter(isEmpty => !!isEmpty),\n catchError(error => from([{ text: error, type: 'danger' }]))\n )\n )\n ),\n filter(alert => !!alert),\n takeUntil(this.destroy$)\n );\n private inventoryService = inject(InventoryService);\n\n constructor() {\n this.htmlContentInitialization$.pipe(takeUntil(this.destroy$)).subscribe((alert: Alert) => {\n this.alerts.push(alert);\n console.error(alert.text);\n });\n }\n\n ngOnDestroy(): void {\n this.destroy$.next();\n this.destroy$.complete();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (\n changes.config?.currentValue ||\n (this.config && changes.device?.previousValue !== changes.device?.currentValue)\n ) {\n this.reloadComponent();\n }\n }\n\n reloadComponent() {\n this.alerts = [];\n const div = this.hostElement();\n div.nativeElement.innerHTML = '';\n this.reload$.next();\n }\n\n async initDiv(divHostElement: HTMLDivElement) {\n const code = this.getCode();\n const hash = await this.generateHash(code, this.useSalt);\n const webComponentName = kebabCase(defaultWebComponentName) + hash;\n const context: IManagedObject = await this.getContext(this.device);\n\n if (customElements.get(webComponentName)) {\n return this.createWebComponent(webComponentName, divHostElement, context);\n }\n\n const url = this.generateUrl(code);\n const defaultModule = await this.loadScript(url);\n\n // if the default module is a string, we will not use a webcomponent\n // instead we will simply parse the string and add it to the div\n // this is the case for legacy HTML widgets\n if (typeof defaultModule.default === 'string') {\n divHostElement.innerHTML = defaultModule.default;\n return EMPTY;\n }\n\n // same goes for an HTML Element\n if (defaultModule.default instanceof HTMLElement) {\n divHostElement.appendChild(defaultModule.default);\n\n // Find and execute scripts\n const scripts = divHostElement.querySelectorAll('script');\n scripts.forEach(script => {\n const newScript = document.createElement('script');\n Array.from(script.attributes).forEach(attr => {\n newScript.setAttribute(attr.name, attr.value);\n });\n newScript.textContent = script.textContent;\n script.parentNode.replaceChild(newScript, script);\n });\n return EMPTY;\n }\n\n // as a race condition can happen on loading, we need\n // to check again if the web component is already defined\n if (!customElements.get(webComponentName)) {\n customElements.define(webComponentName, defaultModule.default);\n }\n this.createWebComponent(webComponentName, divHostElement, context);\n return EMPTY;\n }\n\n private async getContext(\n device: IManagedObject | IIdentified | undefined\n ): Promise<IManagedObject> {\n if (!device) {\n return;\n }\n\n if (!device.self) {\n const { data } = await this.inventoryService.detail(device.id);\n return data;\n }\n return device as IManagedObject;\n }\n\n private async loadScript(url: string): Promise<{ default: any }> {\n const module = await import(/* webpackIgnore: true */ url);\n if (!module.default) {\n throw 'No default export found. Add an \"export default\" statement to your code.';\n }\n\n return module;\n }\n\n private generateUrl(script: string): string {\n const blob = new Blob([script], { type: 'application/javascript' });\n const url = URL.createObjectURL(blob);\n if (this.latestUrl) {\n URL.revokeObjectURL(this.latestUrl);\n }\n this.latestUrl = url;\n return url;\n }\n\n private listenToErrors(): Observable<Alert> {\n const errorEvents$ = fromEvent<ErrorEvent>(window, 'error').pipe(\n filter(event => event.filename?.includes(this.latestUrl)),\n map(event => this.mapErrorEventToAlert(event))\n );\n\n const rejectionEvents$ = fromEvent<PromiseRejectionEvent>(window, 'unhandledrejection').pipe(\n filter(event => event.reason?.stack?.includes(this.latestUrl)),\n map(event => this.mapErrorEventToAlert(event)),\n takeUntil(this.destroy$)\n );\n\n return merge(errorEvents$, rejectionEvents$);\n }\n\n private createWebComponent(\n webComponentName: string,\n divHostElement: HTMLDivElement,\n context: IManagedObject\n ) {\n const webComponent: WebcomponentContext = document.createElement<any>(webComponentName);\n webComponent.c8yContext = context;\n divHostElement.appendChild(webComponent);\n return webComponent;\n }\n\n private mapErrorEventToAlert(event: PromiseRejectionEvent | ErrorEvent): Alert {\n const hasReason = 'reason' in event;\n if (hasReason && event.reason?.name === ReferenceError.name) {\n const undefinedVar = event.reason.message.split(' ')[0];\n return { text: undefinedVar + ' is not defined', type: 'info' };\n }\n return { text: hasReason ? event.reason.message : event.message, type: 'danger' };\n }\n\n private getCode() {\n const isDevMode = this.config.devMode;\n if (isDevMode) {\n return this.config.code;\n }\n return this.createDefaultWebcomponentCode();\n }\n\n private async generateHash(value: string, useSalt: boolean): Promise<string> {\n const encoder = new TextEncoder();\n const data = encoder.encode(value + (useSalt ? Math.random() : ''));\n const hashBuffer = await crypto.subtle.digest('SHA-256', data);\n const hashArray = Array.from(new Uint8Array(hashBuffer));\n const hashHex = hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');\n return hashHex;\n }\n\n private createDefaultWebcomponentCode(): string {\n if (this.config.legacy) {\n const legacyWebComponent = legacyTemplate(\n this.config.options.advancedSecurity\n ? this.sanitizer.sanitize(SecurityContext.HTML, this.config.code)\n : this.config.code,\n this.device?.id,\n this.device?.name\n );\n return legacyWebComponent;\n }\n\n const webComponentScript = webComponentTemplate(\n this.config.options.advancedSecurity\n ? this.sanitizer.sanitize(SecurityContext.HTML, this.config.code)\n : this.config.code,\n this.config.options.advancedSecurity\n ? this.sanitizer.sanitize(SecurityContext.STYLE, this.config.css)\n : this.config.css,\n this.config.options.cssEncapsulation\n );\n return webComponentScript;\n }\n}\n","<ng-container *ngFor=\"let alert of alerts\">\n <div\n class=\"alert m-8\"\n role=\"alert\"\n [ngClass]=\"{\n 'alert-danger': alert.type === 'danger',\n 'alert-warning': alert.type === 'warning',\n 'alert-info': alert.type === 'info',\n 'alert-success': alert.type === 'success'\n }\"\n >\n <p><strong translate>There was an issue in the HTML widget:</strong></p>\n <pre>{{ alert.text }}</pre>\n </div>\n</ng-container>\n<div\n class=\"fit-w fit-h\"\n #hostElement\n></div>\n","import { NgIf } from '@angular/common';\nimport { Component, inject, Input, OnDestroy, SimpleChanges } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport {\n C8yTranslatePipe,\n gettext,\n IconDirective,\n LoadingComponent,\n TabsModule\n} from '@c8y/ngx-components';\nimport { TooltipModule } from 'ngx-bootstrap/tooltip';\nimport { PopoverModule } from 'ngx-bootstrap/popover';\nimport { WidgetConfigFeedbackComponent } from '@c8y/ngx-components/context-dashboard';\nimport { EditorComponent } from '@c8y/ngx-components/editor';\nimport { editor, KeyCode, KeyMod } from 'monaco-editor';\nimport { Subject } from 'rxjs';\nimport { HtmlWidgetConfigService } from '../html-widget-config.service';\nimport { HtmlWidget } from '../html-widget.model';\nimport { AdvancedSettingsComponent } from '../advanced-settings/advanced-settings.component';\n\n@Component({\n standalone: true,\n imports: [\n EditorComponent,\n FormsModule,\n IconDirective,\n C8yTranslatePipe,\n NgIf,\n WidgetConfigFeedbackComponent,\n TabsModule,\n TooltipModule,\n PopoverModule,\n LoadingComponent,\n AdvancedSettingsComponent\n ],\n selector: 'c8y-widget-code-editor',\n templateUrl: './widget-code-editor.component.html'\n})\nexport class WidgetCodeEditorComponent implements OnDestroy {\n @Input()\n mode: 'code' | 'css' = 'code';\n\n @Input()\n config: HtmlWidget;\n\n configService = inject(HtmlWidgetConfigService);\n\n editor: editor.IStandaloneCodeEditor;\n isAutoSaveEnabled = true;\n language: 'html' | 'css' | 'javascript' = 'html';\n value: string;\n isLoading = false;\n\n readonly TAB_WEBCOMPONENT_LABEL = gettext('Web Component`Tab label of HTML Widget`');\n readonly TAB_HTML_LABEL = gettext('HTML`Tab label of HTML Widget`');\n readonly TAB_CSS_LABEL = gettext('CSS`Tab label of HTML Widget`');\n readonly BUTTON_DISABLE_AUTOSAVE_LABEL = gettext(\n 'Disable auto save`An action you can do on the html widget editor`'\n );\n readonly BUTTON_ENABLE_AUTOSAVE_LABEL = gettext(\n 'Enable auto save`An action you can do on the html widget editor`'\n );\n readonly TAB_OUTLET_NAME = 'html-widget-tab-outlet';\n\n private destroy$ = new Subject<void>();\n\n ngOnDestroy(): void {\n this.destroy$.next();\n this.destroy$.complete();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.config?.currentValue) {\n this.loadCode();\n }\n }\n\n loadCode() {\n this.isLoading = true;\n const isInDevMode = this.config?.devMode;\n this.language = 'html';\n\n if (isInDevMode) {\n this.language = 'javascript';\n }\n\n if (this.mode === 'css') {\n this.language = 'css';\n }\n\n this.value = this.mode === 'code' ? this.config.code : this.config.css;\n\n this.isLoading = false;\n\n if (this.editor) {\n queueMicrotask(() => this.formatCode());\n }\n }\n\n switchMode(mode: 'code' | 'css') {\n this.mode = mode;\n this.loadCode();\n }\n\n editorLoaded(editor: editor.IStandaloneCodeEditor) {\n this.editor = editor;\n\n this.editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, () => {\n this.saveCode();\n });\n }\n\n formatCode() {\n this.editor.getAction('editor.action.formatDocument').run();\n }\n\n redo() {\n this.editor.trigger('keyboard', 'redo', null);\n }\n\n undo() {\n this.editor.trigger('keyboard', 'undo', null);\n }\n\n changeCode($event: string) {\n if (this.isAutoSaveEnabled) {\n this.saveCode($event);\n }\n }\n\n saveCode(codeStr?: string) {\n const code = codeStr || this.editor.getValue();\n if (this.mode === 'code') {\n this.configService.changeCode(code);\n return;\n }\n this.configService.changeCss(code);\n }\n}\n","<c8y-widget-config-feedback>\n <div class=\"d-flex\">\n <span\n class=\"tag tag--warning text-12\"\n *ngIf=\"config?.devMode && !config?.legacy\"\n translate\n >\n Advanced developer mode\n </span>\n </div>\n <div class=\"d-flex\">\n <span\n class=\"tag tag--warning text-12\"\n [title]=\"\n 'This widget is in legacy mode. Consider to upgrade this to a new HTML widget. Read our documentation on details to transform your widget'\n | translate\n \"\n *ngIf=\"config?.legacy\"\n translate\n >\n Legacy mode\n </span>\n </div>\n</c8y-widget-config-feedback>\n\n<div class=\"d-flex d-col fit-h fit-w\">\n <c8y-html-widget-advanced-settings\n [devMode]=\"config?.devMode\"\n [cssEncapsulation]=\"config?.options?.cssEncapsulation\"\n ></c8y-html-widget-advanced-settings>\n\n <fieldset class=\"c8y-fieldset p-0 overflow-hidden\">\n <legend class=\"m-l-16 p-l-0\">{{ 'Code' | translate }}</legend>\n\n <div class=\"btn-group btn-group-sm m-l-0 p-t-8 p-b-8 p-l-16 p-r-16 fit-w d-flex\">\n <button\n class=\"btn btn-default\"\n [attr.aria-label]=\"'Undo' | translate\"\n [tooltip]=\"'Undo' | translate\"\n placement=\"top\"\n container=\"body\"\n type=\"button\"\n [delay]=\"500\"\n (click)=\"undo()\"\n >\n <i [c8yIcon]=\"'undo'\"></i>\n </button>\n\n <button\n class=\"btn btn-default\"\n [attr.aria-label]=\"'Redo' | translate\"\n [tooltip]=\"'Redo' | translate\"\n placement=\"top\"\n container=\"body\"\n type=\"button\"\n [delay]=\"500\"\n (click)=\"redo()\"\n >\n <i [c8yIcon]=\"'redo'\"></i>\n </button>\n\n <button\n class=\"btn btn-default\"\n [attr.aria-label]=\"'Format code' | translate\"\n [tooltip]=\"'Format code' | translate\"\n placement=\"top\"\n container=\"body\"\n type=\"button\"\n [delay]=\"500\"\n (click)=\"formatCode()\"\n >\n <i [c8yIcon]=\"'format-align-left'\"></i>\n </button>\n\n <label class=\"c8y-switch m-l-auto\">\n <input\n type=\"checkbox\"\n [checked]=\"isAutoSaveEnabled\"\n (change)=\"isAutoSaveEnabled = !isAutoSaveEnabled\"\n />\n <span></span>\n <span translate>Auto save</span>\n </label>\n </div>\n\n <div\n class=\"btn-toolbar m-0 p-relative\"\n role=\"toolbar\"\n >\n <c8y-tabs-outlet\n class=\"elevation-none\"\n [outletName]=\"TAB_OUTLET_NAME\"\n [orientation]=\"'horizontal'\"\n [openFirstTab]=\"false\"\n ></c8y-tabs-outlet>\n <c8y-tab\n [icon]=\"'code'\"\n [label]=\"(config?.devMode ? TAB_WEBCOMPONENT_LABEL : TAB_HTML_LABEL) | translate\"\n [priority]=\"100\"\n [showAlways]=\"true\"\n [tabsOutlet]=\"TAB_OUTLET_NAME\"\n [isActive]=\"mode === 'code'\"\n (onSelect)=\"switchMode('code')\"\n ></c8y-tab>\n <c8y-tab\n [icon]=\"'c8y-css'\"\n [label]=\"TAB_CSS_LABEL | translate\"\n [priority]=\"0\"\n [tabsOutlet]=\"TAB_OUTLET_NAME\"\n [isActive]=\"mode === 'css'\"\n (onSelect)=\"switchMode('css')\"\n *ngIf=\"!config?.devMode && !config?.legacy\"\n ></c8y-tab>\n </div>\n\n <ng-container *ngIf=\"!isLoading; else loading\">\n <c8y-editor\n class=\"flex-grow d-block\"\n style=\"height: 450px\"\n *ngIf=\"!(mode === 'css' && config?.devMode)\"\n [ngModel]=\"value\"\n (ngModelChange)=\"changeCode($event)\"\n [editorOptions]=\"{\n language,\n tabSize: 2,\n insertSpaces: true,\n minimap: { enabled: false }\n }\"\n (editorInit)=\"editorLoaded($event)\"\n ></c8y-editor>\n </ng-container>\n <ng-template #loading>\n <c8y-loading></c8y-loading>\n </ng-template>\n </fieldset>\n</div>\n","import { AsyncPipe } from '@angular/common';\nimport { Component, inject, OnDestroy, TemplateRef, ViewChild } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { RouterModule } from '@angular/router';\nimport { OptionsService } from '@c8y/ngx-components';\nimport { WidgetConfigService } from '@c8y/ngx-components/context-dashboard';\nimport { HtmlFrameComponent } from './html-frame/html-frame.component';\nimport { HtmlWidgetConfigService } from './html-widget-config.service';\nimport { WidgetCodeEditorComponent } from './widget-code-editor-section/widget-code-editor.component';\n\n@Component({\n selector: 'c8y-html-widget-config',\n templateUrl: './html-widget-config.component.html',\n standalone: true,\n imports: [RouterModule, FormsModule, AsyncPipe, HtmlFrameComponent, WidgetCodeEditorComponent]\n})\nexport class HtmlWidgetConfigComponent implements OnDestroy {\n @ViewChild('htmlPreview')\n set htmlPreviewTemplate(template: TemplateRef<any>) {\n if (template) {\n this.widgetConfigService.setPreview(template);\n } else {\n this.widgetConfigService.setPreview(null);\n }\n }\n options = inject(OptionsService);\n htmlWidgetConfigService = inject(HtmlWidgetConfigService);\n widgetConfigService = inject(WidgetConfigService);\n\n ngOnDestroy(): void {\n // sadly the service is component scoped\n // but still not recycled correctly. That is why we do\n // it here.\n this.htmlWidgetConfigService.destroy();\n }\n}\n","<c8y-widget-code-editor\n [config]=\"htmlWidgetConfigService.config$ | async\"\n [mode]=\"'code'\"\n></c8y-widget-code-editor>\n\n<ng-template #htmlPreview>\n <c8y-html-frame\n [config]=\"htmlWidgetConfigService.codeEditorChangeConfig$ | async\"\n [device]=\"(widgetConfigService.currentConfig$ | async).device\"\n [useSalt]=\"true\"\n ></c8y-html-frame>\n</ng-template>\n","import { Component, Input } from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { ContextWidgetConfig } from '@c8y/ngx-components/context-dashboard';\nimport { HtmlFrameComponent } from './html-frame/html-frame.component';\nimport { HtmlWidget, HtmlWidgetConfig } from './html-widget.model';\n\n@Component({\n selector: 'c8y-html-widget',\n templateUrl: './html-widget.component.html',\n standalone: true,\n imports: [RouterModule, HtmlFrameComponent]\n})\nexport class HtmlWidgetComponent {\n @Input() config: HtmlWidgetConfig;\n\n ngOnInit(): void {\n if (this.config.html && !this.config.config) {\n this.config.config = this.mapLegacyConfig(this.config);\n }\n }\n\n private mapLegacyConfig(current: ContextWidgetConfig): HtmlWidget {\n const isAlreadyInAdvancedMode = current?.config?.devMode === true;\n if (isAlreadyInAdvancedMode) {\n return current.config as HtmlWidget;\n }\n return {\n code: current.html,\n css: '',\n legacy: true,\n devMode: false,\n options: {\n cssEncapsulation: false,\n advancedSecurity: current.sanitization === 'strict'\n }\n };\n }\n}\n","<c8y-html-frame\n [config]=\"config.config\"\n [device]=\"config.device\"\n></c8y-html-frame>\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["isEmpty","i1","i2"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoDa,MAAA,sBAAsB,GAAG,CAAA;;;;;;;;;;;;;AAazB,MAAA,qBAAqB,GAAG;;;;;;;;AAS9B,MAAM,uBAAuB,GAAG;AAEhC,MAAM,uCAAuC,GAAG;;AC1E1C,MAAA,oBAAoB,GAAG,CAClC,IAAY,EACZ,GAAY,EACZ,iBAA2B,EAC3B,IAAI,GAAG,uBAAuB,KAC3B;;EAEH,CAAC,iBAAiB,GAAG,wCAAwC,GAAG,EAAE;;uBAE7C,IAAI,CAAA;;MAErB,GAAG;;;;;;;;;;;;;mBAcH;AACE,MAAE;AACF,MAAE;;;;QAIF,IAAI;AAER,IAAA,CAAA,CAAA;;;;;ACnCG,MAAM,cAAc,GAAG,CAAC,IAAY,EAAE,QAA0B,EAAE,UAAmB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;MAyB3F,QAAQ,GAAG,CAAkB,eAAA,EAAA,QAAQ,CAAa,UAAA,EAAA,UAAU,CAAM,IAAA,CAAA,GAAG,EAAE;kDAC3B,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;MCDzC,uBAAuB,CAAA;AADpC,IAAA,WAAA,GAAA;QAEW,IAA0B,CAAA,0BAAA,GAAG,IAAI;AAC1C,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,OAAO,EAA2C;AACpE,QAAA,IAAA,CAAA,mBAAmB,GAAG,MAAM,CAAC,mBAAmB,CAAC;AACjD,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,eAAe,CAAC;AAClC,QAAA,IAAA,CAAA,QAAQ,GAAG,IAAI,OAAO,EAAQ;AAE9B,QAAA,IAAA,CAAA,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,cAAc,CAAC,IAAI,CAClD,GAAG,CAAC,OAAO,IAAG;AACZ,YAAA,IAAI,OAAO,CAAC,IAAI,EAAE;gBAChB,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC;;AAGhD,YAAA,QAAQ,OAAO,CAAC,MAAM,IAAI,EAAE;SAC7B,CAAC,EACF,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC,MAAM,CAAC,EAC1B,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,wBAAwB,CAAC,EACtD,SAAS,CAAC,CAAC,CAAC,YAAY,EAAE,SAAS,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,EAClF,WAAW,EAAE,EACb,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CACzB;QAED,IAAO,CAAA,OAAA,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QAEjG,IAAuB,CAAA,uBAAA,GAAG,aAAa,CAAC;YACtC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;AAC3C,YAAA,IAAI,CAAC;AACN,SAAA,CAAC,CAAC,IAAI,CACL,oBAAoB,EAAE,EACtB,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,EACxB,YAAY,CAAC,IAAI,CAAC,0BAA0B,CAAC,EAC7C,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,KAAI;YACvB,IAAI,CAAC,MAAM,EAAE;AACX,gBAAA,OAAO,MAAM;;AAEf,YAAA,IAAI,MAAM,CAAC,IAAI,KAAK,KAAK,EAAE;AACzB,gBAAA,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,KAAK;;iBACpB;AACL,gBAAA,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,KAAK;;AAE5B,YAAA,OAAO,EAAE,GAAG,MAAM,EAAE;SACrB,CAAC,CACH;AAED,QAAA,IAAA,CAAA,cAAc,GAAG,IAAI,OAAO,EAAc;AAkG3C;IAhGC,UAAU,CAAC,SAAwB,EAAE,YAAwB,EAAA;AAC3D,QAAA,MAAM,qBAAqB,GAAG,SAAS,EAAE,+BAA+B,IAAI,KAAK;AACjF,QAAA,MAAM,aAAa,GAAG,OAAO,CAAC,YAAY,CAAC;AAC3C,QAAA,IAAI,aAAa,IAAI,CAAC,qBAAqB,EAAE;YAC3C,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,SAAS,CAAC,6BAA6B,CAAC;AAC7E,YAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;AACvB,YAAA,OAAO,EAAE,CAAC,YAAY,CAAC;;QAEzB,IAAI,aAAa,EAAE;AACjB,YAAA,YAAY,GAAG,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC;;;AAItD,QAAA,MAAM,SAAS,GAAG,EAAE,GAAG,YAAY,EAAE;AACrC,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;AACpB,QAAA,OAAO,EAAE,CAAC,SAAS,CAAC;;IAGtB,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;AACpB,QAAA,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;AAC3B,QAAA,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE;;AAGhC,IAAA,IAAI,CAAC,MAAkB,EAAA;AACrB,QAAA,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC;YACpC;AACD,SAAA,CAAC;;AAGJ,IAAA,UAAU,CAAC,KAAa,EAAA;AACtB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;AAGhD,IAAA,SAAS,CAAC,KAAa,EAAA;AACrB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;AAG/C,IAAA,kBAAkB,CAAC,aAAyB,EAAA;AAC1C,QAAA,MAAM,WAAW,GAAG,aAAa,EAAE,IAAI,IAAI,sBAAsB;AACjE,QAAA,MAAM,UAAU,GAAG,aAAa,EAAE,GAAG,IAAI,qBAAqB;AAC9D,QAAA,MAAM,IAAI,GAAG,aAAa,EAAE;cACxB,cAAc,CACZ,WAAW,EACX,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,MAAM,EAAE,EAAE,EAClD,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,MAAM,EAAE,IAAI;cAEtD,oBAAoB,CAAC,WAAW,EAAE,UAAU,EAAE,KAAK,CAAC;AACxD,QAAA,aAAa,GAAG;AACd,YAAA,GAAG,EAAE,EAAE;YACP,IAAI;AACJ,YAAA,MAAM,EAAE,KAAK;AACb,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,OAAO,EAAE;AACP,gBAAA,gBAAgB,EAAE,KAAK;AACvB,gBAAA,gBAAgB,EAAE;AACnB;SACF;AACD,QAAA,OAAO,aAAa;;IAGtB,eAAe,CAAC,gBAAgB,GAAG,IAAI,EAAA;QACrC,OAAO;AACL,YAAA,GAAG,EAAE,qBAAqB;AAC1B,YAAA,IAAI,EAAE,sBAAsB;AAC5B,YAAA,MAAM,EAAE,KAAK;AACb,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,OAAO,EAAE;AACP,gBAAA,gBAAgB,EAAE,KAAK;gBACvB;AACD;SACF;;AAGK,IAAA,eAAe,CAAC,OAA4B,EAAA;QAClD,MAAM,uBAAuB,GAAG,OAAO,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI;QACjE,IAAI,uBAAuB,EAAE;YAC3B,OAAO,OAAO,CAAC,MAAoB;;QAGrC,MAAM,eAAe,GAAG,OAAO,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI;QACxD,IAAI,eAAe,EAAE;YACnB,OAAO,OAAO,CAAC,MAAoB;;QAGrC,OAAO;YACL,IAAI,EAAE,OAAO,CAAC,IAAI;AAClB,YAAA,GAAG,EAAE,EAAE;AACP,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,OAAO,EAAE;AACP,gBAAA,gBAAgB,EAAE,KAAK;AACvB,gBAAA,gBAAgB,EAAE,OAAO,CAAC,YAAY,KAAK;AAC5C;SACF;;+GA5IQ,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;mHAAvB,uBAAuB,EAAA,CAAA,CAAA;;4FAAvB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBADnC;;;MCPY,yBAAyB,CAAA;AANtC,IAAA,WAAA,GAAA;AAOE,QAAA,IAAA,CAAA,mBAAmB,GAAG,MAAM,CAAC,mBAAmB,CAAC;AACjD,QAAA,IAAA,CAAA,uBAAuB,GAAG,MAAM,CAAC,uBAAuB,CAAC;AACzD,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;AACvB,QAAA,IAAA,CAAA,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC;QAEvC,IAAiB,CAAA,iBAAA,GAAG,KAAK;AAMzB,QAAA,IAAA,CAAA,8BAA8B,GAAG,OAAO,CACtC,mFAAmF,CACpF;AAiCF;IA/BC,QAAQ,GAAA;QACN,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC;AACzD,YAAA,WAAW,CAAC,iCAAiC;AAC7C,YAAA,WAAW,CAAC;AACb,SAAA,CAAC;;IAGJ,mBAAmB,GAAA;QACjB,MAAM,MAAM,GAAG,IAAI,CAAC,uBAAuB,CAAC,eAAe,EAAE;AAC7D,QAAA,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,MAAM,CAAC;QACzC,IAAI,CAAC,uBAAuB,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC;;IAG1D,kBAAkB,GAAA;QAChB,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAiC;QAC3E,MAAM,GAAG,IAAI,CAAC,uBAAuB,CAAC,kBAAkB,CAAC,MAAM,CAAC;AAChE,QAAA,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,MAAM,CAAC;QACzC,IAAI,CAAC,uBAAuB,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC;;IAG1D,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,mBAAmB,EAAE,GAAG,IAAI,CAAC,kBAAkB,EAAE;AACrE,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;;IAG9B,MAAM,YAAY,CAAC,MAA+B,EAAA;QAChD,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAiC;AAC7E,QAAA,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC;AAChD,QAAA,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,MAAM,CAAC;QACzC,IAAI,CAAC,uBAAuB,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC;;+GA7C/C,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAzB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,yBAAyB,ECjBtC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,snFAiFA,EDpEY,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,aAAa,EAAE,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAI,EAAE,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,aAAa,EAAE,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,aAAa,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,kBAAA,EAAA,mBAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,cAAA,EAAA,WAAA,EAAA,cAAA,EAAA,UAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,gBAAgB,iDAAE,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,4BAAA,EAAA,QAAA,EAAA,uGAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAI/E,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBANrC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,aAAa,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,CAAC,YACjF,mCAAmC,EAAA,QAAA,EAAA,snFAAA,EAAA;8BAW7C,OAAO,EAAA,CAAA;sBADN;gBAGD,gBAAgB,EAAA,CAAA;sBADf;;;MEeU,kBAAkB,CAAA;AAyC7B,IAAA,WAAA,GAAA;AAlCA;;;;;AAKG;QAEH,IAAO,CAAA,OAAA,GAAG,KAAK;QAEf,IAAM,CAAA,MAAA,GAAY,EAAE;AAEZ,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,YAAY,CAAC;AAChC,QAAA,IAAA,CAAA,QAAQ,GAAG,IAAI,OAAO,EAAQ;AAC9B,QAAA,IAAA,CAAA,WAAW,GAAG,SAAS,CAA6B,aAAa,CAAC;AAClE,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,OAAO,EAAQ;QAE7B,IAA0B,CAAA,0BAAA,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CACpD,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,EAClC,GAAG,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,aAAa,CAAC,EAC3C,SAAS,CAAC,CAAC,GAAmB,KAC5B,KAAK,CACH,IAAI,CAAC,cAAc,EAAE,EACrB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAC1BA,SAAO,EAAE,EACT,MAAM,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,EAC5B,UAAU,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,CAC7D,CACF,CACF,EACD,MAAM,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,EACxB,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CACzB;AACO,QAAA,IAAA,CAAA,gBAAgB,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAGjD,QAAA,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,KAAY,KAAI;AACxF,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;AACvB,YAAA,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;AAC3B,SAAC,CAAC;;IAGJ,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;AACpB,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE;;AAG1B,IAAA,WAAW,CAAC,OAAsB,EAAA;AAChC,QAAA,IACE,OAAO,CAAC,MAAM,EAAE,YAAY;AAC5B,aAAC,IAAI,CAAC,MAAM,IAAI,OAAO,CAAC,MAAM,EAAE,aAAa,KAAK,OAAO,CAAC,MAAM,EAAE,YAAY,CAAC,EAC/E;YACA,IAAI,CAAC,eAAe,EAAE;;;IAI1B,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,MAAM,GAAG,EAAE;AAChB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,EAAE;AAC9B,QAAA,GAAG,CAAC,aAAa,CAAC,SAAS,GAAG,EAAE;AAChC,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;;IAGrB,MAAM,OAAO,CAAC,cAA8B,EAAA;AAC1C,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE;AAC3B,QAAA,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC;QACxD,MAAM,gBAAgB,GAAG,SAAS,CAAC,uBAAuB,CAAC,GAAG,IAAI;QAClE,MAAM,OAAO,GAAmB,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC;AAElE,QAAA,IAAI,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE;YACxC,OAAO,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,EAAE,cAAc,EAAE,OAAO,CAAC;;QAG3E,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QAClC,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC;;;;AAKhD,QAAA,IAAI,OAAO,aAAa,CAAC,OAAO,KAAK,QAAQ,EAAE;AAC7C,YAAA,cAAc,CAAC,SAAS,GAAG,aAAa,CAAC,OAAO;AAChD,YAAA,OAAO,KAAK;;;AAId,QAAA,IAAI,aAAa,CAAC,OAAO,YAAY,WAAW,EAAE;AAChD,YAAA,cAAc,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC;;YAGjD,MAAM,OAAO,GAAG,cAAc,CAAC,gBAAgB,CAAC,QAAQ,CAAC;AACzD,YAAA,OAAO,CAAC,OAAO,CAAC,MAAM,IAAG;gBACvB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC;AAClD,gBAAA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,IAAI,IAAG;oBAC3C,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC;AAC/C,iBAAC,CAAC;AACF,gBAAA,SAAS,CAAC,WAAW,GAAG,MAAM,CAAC,WAAW;gBAC1C,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC;AACnD,aAAC,CAAC;AACF,YAAA,OAAO,KAAK;;;;QAKd,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE;YACzC,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,aAAa,CAAC,OAAO,CAAC;;QAEhE,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,EAAE,cAAc,EAAE,OAAO,CAAC;AAClE,QAAA,OAAO,KAAK;;IAGN,MAAM,UAAU,CACtB,MAAgD,EAAA;QAEhD,IAAI,CAAC,MAAM,EAAE;YACX;;AAGF,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;AAChB,YAAA,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;AAC9D,YAAA,OAAO,IAAI;;AAEb,QAAA,OAAO,MAAwB;;IAGzB,MAAM,UAAU,CAAC,GAAW,EAAA;QAClC,MAAM,MAAM,GAAG,MAAM,iCAAiC,GAAG,CAAC;AAC1D,QAAA,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;AACnB,YAAA,MAAM,0EAA0E;;AAGlF,QAAA,OAAO,MAAM;;AAGP,IAAA,WAAW,CAAC,MAAc,EAAA;AAChC,QAAA,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,EAAE,wBAAwB,EAAE,CAAC;QACnE,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC;AACrC,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC;;AAErC,QAAA,IAAI,CAAC,SAAS,GAAG,GAAG;AACpB,QAAA,OAAO,GAAG;;IAGJ,cAAc,GAAA;AACpB,QAAA,MAAM,YAAY,GAAG,SAAS,CAAa,MAAM,EAAE,OAAO,CAAC,CAAC,IAAI,CAC9D,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EACzD,GAAG,CAAC,KAAK,IAAI,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC,CAC/C;QAED,MAAM,gBAAgB,GAAG,SAAS,CAAwB,MAAM,EAAE,oBAAoB,CAAC,CAAC,IAAI,CAC1F,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAC9D,GAAG,CAAC,KAAK,IAAI,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC,EAC9C,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CACzB;AAED,QAAA,OAAO,KAAK,CAAC,YAAY,EAAE,gBAAgB,CAAC;;AAGtC,IAAA,kBAAkB,CACxB,gBAAwB,EACxB,cAA8B,EAC9B,OAAuB,EAAA;QAEvB,MAAM,YAAY,GAAwB,QAAQ,CAAC,aAAa,CAAM,gBAAgB,CAAC;AACvF,QAAA,YAAY,CAAC,UAAU,GAAG,OAAO;AACjC,QAAA,cAAc,CAAC,WAAW,CAAC,YAAY,CAAC;AACxC,QAAA,OAAO,YAAY;;AAGb,IAAA,oBAAoB,CAAC,KAAyC,EAAA;AACpE,QAAA,MAAM,SAAS,GAAG,QAAQ,IAAI,KAAK;AACnC,QAAA,IAAI,SAAS,IAAI,KAAK,CAAC,MAAM,EAAE,IAAI,KAAK,cAAc,CAAC,IAAI,EAAE;AAC3D,YAAA,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YACvD,OAAO,EAAE,IAAI,EAAE,YAAY,GAAG,iBAAiB,EAAE,IAAI,EAAE,MAAM,EAAE;;QAEjE,OAAO,EAAE,IAAI,EAAE,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE;;IAG3E,OAAO,GAAA;AACb,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO;QACrC,IAAI,SAAS,EAAE;AACb,YAAA,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI;;AAEzB,QAAA,OAAO,IAAI,CAAC,6BAA6B,EAAE;;AAGrC,IAAA,MAAM,YAAY,CAAC,KAAa,EAAE,OAAgB,EAAA;AACxD,QAAA,MAAM,OAAO,GAAG,IAAI,WAAW,EAAE;QACjC,MAAM,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,KAAK,IAAI,OAAO,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;AACnE,QAAA,MAAM,UAAU,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,IAAI,CAAC;AAC9D,QAAA,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,UAAU,CAAC,CAAC;AACxD,QAAA,MAAM,OAAO,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;AAClF,QAAA,OAAO,OAAO;;IAGR,6BAA6B,GAAA;AACnC,QAAA,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;YACtB,MAAM,kBAAkB,GAAG,cAAc,CACvC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;AAClB,kBAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI;AAChE,kBAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EACpB,IAAI,CAAC,MAAM,EAAE,EAAE,EACf,IAAI,CAAC,MAAM,EAAE,IAAI,CAClB;AACD,YAAA,OAAO,kBAAkB;;QAG3B,MAAM,kBAAkB,GAAG,oBAAoB,CAC7C,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;AAClB,cAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI;AAChE,cAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EACpB,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;AAClB,cAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG;AAChE,cAAE,IAAI,CAAC,MAAM,CAAC,GAAG,EACnB,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,gBAAgB,CACrC;AACD,QAAA,OAAO,kBAAkB;;+GA9NhB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,M