@sdcorejs/angular 20.1.2 → 20.1.4

package/fesm2022/sdcorejs-angular-components-breadcrumb.mjs

@@ -0,0 +1,121 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, signal, input, output, contentChild, TemplateRef, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Router, NavigationEnd, PRIMARY_OUTLET } from '@angular/router';
+import { normalizeAsync } from '@sdcorejs/utils/models';
+import { SdIcon } from '@sdcorejs/angular/modules/icon';
+import { filter, combineLatest, defer, map, catchError, of } from 'rxjs';
+
+class SdBreadcrumb {
+    #router = inject(Router, { optional: true });
+    #routeVersion = signal(0, ...(ngDevMode ? [{ debugName: "#routeVersion" }] : []));
+    #resolvedItems = signal([], ...(ngDevMode ? [{ debugName: "#resolvedItems" }] : []));
+    items = input(undefined, ...(ngDevMode ? [{ debugName: "items" }] : []));
+    maxItems = input(5, ...(ngDevMode ? [{ debugName: "maxItems", transform: normalizeMaxItems }] : [{ transform: normalizeMaxItems }]));
+    ariaLabel = input('Breadcrumb', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    separator = input('chevron_right', ...(ngDevMode ? [{ debugName: "separator" }] : []));
+    sdItemActivate = output();
+    itemTemplate = contentChild(TemplateRef, ...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
+    visibleEntries = computed(() => {
+        const entries = this.#resolvedItems().map(item => ({ kind: 'item', item }));
+        const maxItems = this.maxItems();
+        if (entries.length <= maxItems)
+            return entries;
+        const tailCount = maxItems - 2;
+        return [entries[0], { kind: 'ellipsis' }, ...entries.slice(-tailCount)];
+    }, ...(ngDevMode ? [{ debugName: "visibleEntries" }] : []));
+    constructor() {
+        this.#router?.events
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed())
+            .subscribe(() => this.#routeVersion.update(version => version + 1));
+        effect(onCleanup => {
+            const providedItems = this.items();
+            if (providedItems == null)
+                this.#routeVersion();
+            const sourceItems = providedItems ?? this.#createRouteItems();
+            if (sourceItems.length === 0) {
+                this.#resolvedItems.set([]);
+                return;
+            }
+            const subscription = combineLatest(sourceItems.map(item => defer(() => normalizeAsync(resolveLabelSource(item.label, item.route))).pipe(map(label => ({
+                ...item,
+                label: String(label ?? '').trim(),
+                source: item,
+            })), catchError(() => of({ ...item, label: '', source: item }))))).subscribe(items => this.#resolvedItems.set(items.filter(item => item.label)));
+            onCleanup(() => subscription.unsubscribe());
+        });
+    }
+    activate(item, event) {
+        if (item.disabled) {
+            event.preventDefault();
+            return;
+        }
+        this.sdItemActivate.emit(item.source);
+        if (!item.url || !this.#router || isModifiedMouseEvent(event))
+            return;
+        event.preventDefault();
+        if (typeof item.url === 'string') {
+            void this.#router.navigateByUrl(item.url);
+        }
+        else {
+            void this.#router.navigate(item.url);
+        }
+    }
+    href(item) {
+        return typeof item.url === 'string' ? item.url : null;
+    }
+    templateContext(item) {
+        return { $implicit: item, item };
+    }
+    #createRouteItems() {
+        const root = this.#router?.routerState.snapshot.root;
+        if (!root)
+            return [];
+        const items = [];
+        const segments = [];
+        let route = root;
+        while (route) {
+            if (route.outlet === PRIMARY_OUTLET) {
+                segments.push(...route.url.map(segment => segment.path).filter(Boolean));
+                const value = route.data['breadcrumb'];
+                if (value !== undefined && value !== null) {
+                    const config = isRouteConfig(value) ? value : { label: value };
+                    items.push({
+                        ...config,
+                        url: config.url ?? `/${segments.join('/')}`,
+                        route,
+                    });
+                }
+            }
+            route = route.children?.find(child => child.outlet === PRIMARY_OUTLET) ?? route.firstChild;
+        }
+        return items;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdBreadcrumb, isStandalone: true, selector: "sd-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdItemActivate: "sdItemActivate" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<nav class=\"sd-breadcrumb\" [attr.aria-label]=\"ariaLabel()\">\n  <ol class=\"sd-breadcrumb__list\">\n    @for (entry of visibleEntries(); track entry.kind === 'item' ? entry.item : $index; let last = $last) {\n      <li class=\"sd-breadcrumb__entry\">\n        @if (entry.kind === 'ellipsis') {\n          <span class=\"sd-breadcrumb__ellipsis\" aria-hidden=\"true\">\u2026</span>\n        } @else {\n          @let item = entry.item;\n          @let template = itemTemplate();\n          @if (!last && !item.disabled && href(item) !== null) {\n            <a class=\"sd-breadcrumb__item\" [attr.href]=\"href(item)\" (click)=\"activate(item, $event)\">\n              @if (template) {\n                <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"templateContext(item)\"></ng-container>\n              } @else {\n                @if (item.icon) {\n                  <sd-icon class=\"sd-breadcrumb__icon\" aria-hidden=\"true\" [name]=\"item.icon\" [fontSet]=\"item.fontSet\"></sd-icon>\n                }\n                <span>{{ item.label }}</span>\n              }\n            </a>\n          } @else if (!last && !item.disabled && (item.url || item.clickable)) {\n            <button type=\"button\" class=\"sd-breadcrumb__item\" (click)=\"activate(item, $event)\">\n              @if (template) {\n                <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"templateContext(item)\"></ng-container>\n              } @else {\n                @if (item.icon) {\n                  <sd-icon class=\"sd-breadcrumb__icon\" aria-hidden=\"true\" [name]=\"item.icon\" [fontSet]=\"item.fontSet\"></sd-icon>\n                }\n                <span>{{ item.label }}</span>\n              }\n            </button>\n          } @else {\n            <span\n              class=\"sd-breadcrumb__item\"\n              [class.sd-breadcrumb__item--disabled]=\"item.disabled\"\n              [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n              [attr.aria-current]=\"last ? 'page' : null\">\n              @if (template) {\n                <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"templateContext(item)\"></ng-container>\n              } @else {\n                @if (item.icon) {\n                  <sd-icon class=\"sd-breadcrumb__icon\" aria-hidden=\"true\" [name]=\"item.icon\" [fontSet]=\"item.fontSet\"></sd-icon>\n                }\n                <span>{{ item.label }}</span>\n              }\n            </span>\n          }\n        }\n\n        @if (!last) {\n          <sd-icon class=\"sd-breadcrumb__separator\" aria-hidden=\"true\" [name]=\"separator()\"></sd-icon>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [":host{display:block;min-width:0}.sd-breadcrumb__list{display:flex;align-items:center;gap:4px;min-width:0;margin:0;padding:0;list-style:none}.sd-breadcrumb__entry{display:inline-flex;align-items:center;min-width:0}.sd-breadcrumb__item{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:240px;padding:4px;border:0;border-radius:4px;background:transparent;color:var(--sd-text-secondary, #667085);font:inherit;text-decoration:none;cursor:pointer}.sd-breadcrumb__item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sd-breadcrumb__item:focus-visible{outline:2px solid var(--sd-info, #1677ff);outline-offset:2px}.sd-breadcrumb__item[aria-current=page],.sd-breadcrumb__item--disabled{color:var(--sd-text, #2f3136);cursor:default}.sd-breadcrumb__item--disabled{opacity:.55}.sd-breadcrumb__ellipsis{padding:4px;color:var(--sd-text-secondary, #667085)}.sd-breadcrumb__separator{margin-inline:2px;color:var(--sd-text-disabled, #98a2b3)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdBreadcrumb, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-breadcrumb', standalone: true, imports: [NgTemplateOutlet, SdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"sd-breadcrumb\" [attr.aria-label]=\"ariaLabel()\">\n  <ol class=\"sd-breadcrumb__list\">\n    @for (entry of visibleEntries(); track entry.kind === 'item' ? entry.item : $index; let last = $last) {\n      <li class=\"sd-breadcrumb__entry\">\n        @if (entry.kind === 'ellipsis') {\n          <span class=\"sd-breadcrumb__ellipsis\" aria-hidden=\"true\">\u2026</span>\n        } @else {\n          @let item = entry.item;\n          @let template = itemTemplate();\n          @if (!last && !item.disabled && href(item) !== null) {\n            <a class=\"sd-breadcrumb__item\" [attr.href]=\"href(item)\" (click)=\"activate(item, $event)\">\n              @if (template) {\n                <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"templateContext(item)\"></ng-container>\n              } @else {\n                @if (item.icon) {\n                  <sd-icon class=\"sd-breadcrumb__icon\" aria-hidden=\"true\" [name]=\"item.icon\" [fontSet]=\"item.fontSet\"></sd-icon>\n                }\n                <span>{{ item.label }}</span>\n              }\n            </a>\n          } @else if (!last && !item.disabled && (item.url || item.clickable)) {\n            <button type=\"button\" class=\"sd-breadcrumb__item\" (click)=\"activate(item, $event)\">\n              @if (template) {\n                <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"templateContext(item)\"></ng-container>\n              } @else {\n                @if (item.icon) {\n                  <sd-icon class=\"sd-breadcrumb__icon\" aria-hidden=\"true\" [name]=\"item.icon\" [fontSet]=\"item.fontSet\"></sd-icon>\n                }\n                <span>{{ item.label }}</span>\n              }\n            </button>\n          } @else {\n            <span\n              class=\"sd-breadcrumb__item\"\n              [class.sd-breadcrumb__item--disabled]=\"item.disabled\"\n              [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n              [attr.aria-current]=\"last ? 'page' : null\">\n              @if (template) {\n                <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"templateContext(item)\"></ng-container>\n              } @else {\n                @if (item.icon) {\n                  <sd-icon class=\"sd-breadcrumb__icon\" aria-hidden=\"true\" [name]=\"item.icon\" [fontSet]=\"item.fontSet\"></sd-icon>\n                }\n                <span>{{ item.label }}</span>\n              }\n            </span>\n          }\n        }\n\n        @if (!last) {\n          <sd-icon class=\"sd-breadcrumb__separator\" aria-hidden=\"true\" [name]=\"separator()\"></sd-icon>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [":host{display:block;min-width:0}.sd-breadcrumb__list{display:flex;align-items:center;gap:4px;min-width:0;margin:0;padding:0;list-style:none}.sd-breadcrumb__entry{display:inline-flex;align-items:center;min-width:0}.sd-breadcrumb__item{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:240px;padding:4px;border:0;border-radius:4px;background:transparent;color:var(--sd-text-secondary, #667085);font:inherit;text-decoration:none;cursor:pointer}.sd-breadcrumb__item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sd-breadcrumb__item:focus-visible{outline:2px solid var(--sd-info, #1677ff);outline-offset:2px}.sd-breadcrumb__item[aria-current=page],.sd-breadcrumb__item--disabled{color:var(--sd-text, #2f3136);cursor:default}.sd-breadcrumb__item--disabled{opacity:.55}.sd-breadcrumb__ellipsis{padding:4px;color:var(--sd-text-secondary, #667085)}.sd-breadcrumb__separator{margin-inline:2px;color:var(--sd-text-disabled, #98a2b3)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], maxItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItems", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], sdItemActivate: [{ type: i0.Output, args: ["sdItemActivate"] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+function resolveLabelSource(label, route) {
+    return typeof label === 'function' ? label(route) : label;
+}
+function isRouteConfig(value) {
+    return typeof value === 'object' && value !== null && 'label' in value;
+}
+function normalizeMaxItems(value) {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? Math.max(3, Math.floor(parsed)) : 5;
+}
+function isModifiedMouseEvent(event) {
+    return event instanceof MouseEvent && (event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey);
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdBreadcrumb };
+//# sourceMappingURL=sdcorejs-angular-components-breadcrumb.mjs.map

package/fesm2022/sdcorejs-angular-components-breadcrumb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdcorejs-angular-components-breadcrumb.mjs","sources":["../../../projects/sdcorejs-angular/components/breadcrumb/src/breadcrumb.component.ts","../../../projects/sdcorejs-angular/components/breadcrumb/src/breadcrumb.component.html","../../../projects/sdcorejs-angular/components/breadcrumb/sdcorejs-angular-components-breadcrumb.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  TemplateRef,\n  computed,\n  contentChild,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ActivatedRouteSnapshot, NavigationEnd, PRIMARY_OUTLET, Router } from '@angular/router';\nimport { MaybeAsync, normalizeAsync } from '@sdcorejs/utils/models';\nimport { SdIcon, SdIconSet } from '@sdcorejs/angular/modules/icon';\nimport { catchError, combineLatest, defer, filter, map, of } from 'rxjs';\n\nexport type SdBreadcrumbLabel =\n  | MaybeAsync<string | null | undefined>\n  | ((route?: ActivatedRouteSnapshot) => MaybeAsync<string | null | undefined>);\n\nexport interface SdBreadcrumbItem {\n  readonly label: SdBreadcrumbLabel;\n  readonly url?: string | unknown[];\n  readonly icon?: string;\n  readonly fontSet?: SdIconSet;\n  readonly disabled?: boolean;\n  readonly clickable?: boolean;\n}\n\nexport interface SdBreadcrumbRouteConfig extends Omit<SdBreadcrumbItem, 'url'> {\n  readonly url?: string | unknown[];\n}\n\nexport interface SdBreadcrumbResolvedItem extends Omit<SdBreadcrumbItem, 'label'> {\n  readonly label: string;\n  readonly source: SdBreadcrumbItem;\n}\n\nexport interface SdBreadcrumbItemTemplateContext {\n  readonly $implicit: SdBreadcrumbResolvedItem;\n  readonly item: SdBreadcrumbResolvedItem;\n}\n\ninterface SdBreadcrumbItemEntry {\n  readonly kind: 'item';\n  readonly item: SdBreadcrumbResolvedItem;\n}\n\ninterface SdBreadcrumbEllipsisEntry {\n  readonly kind: 'ellipsis';\n}\n\ntype SdBreadcrumbEntry = SdBreadcrumbItemEntry | SdBreadcrumbEllipsisEntry;\n\ninterface SdBreadcrumbSourceItem extends SdBreadcrumbItem {\n  readonly route?: ActivatedRouteSnapshot;\n}\n\n@Component({\n  selector: 'sd-breadcrumb',\n  standalone: true,\n  imports: [NgTemplateOutlet, SdIcon],\n  templateUrl: './breadcrumb.component.html',\n  styleUrl: './breadcrumb.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdBreadcrumb {\n  readonly #router = inject(Router, { optional: true });\n  readonly #routeVersion = signal(0);\n  readonly #resolvedItems = signal<SdBreadcrumbResolvedItem[]>([]);\n\n  readonly items = input<readonly SdBreadcrumbItem[] | null | undefined>(undefined);\n  readonly maxItems = input(5, { transform: normalizeMaxItems });\n  readonly ariaLabel = input('Breadcrumb');\n  readonly separator = input('chevron_right');\n  readonly sdItemActivate = output<SdBreadcrumbItem>();\n\n  protected readonly itemTemplate = contentChild<TemplateRef<SdBreadcrumbItemTemplateContext>>(TemplateRef);\n  protected readonly visibleEntries = computed<readonly SdBreadcrumbEntry[]>(() => {\n    const entries = this.#resolvedItems().map(item => ({ kind: 'item' as const, item }));\n    const maxItems = this.maxItems();\n    if (entries.length <= maxItems) return entries;\n\n    const tailCount = maxItems - 2;\n    return [entries[0]!, { kind: 'ellipsis' as const }, ...entries.slice(-tailCount)];\n  });\n\n  constructor() {\n    this.#router?.events\n      .pipe(\n        filter((event): event is NavigationEnd => event instanceof NavigationEnd),\n        takeUntilDestroyed()\n      )\n      .subscribe(() => this.#routeVersion.update(version => version + 1));\n\n    effect(onCleanup => {\n      const providedItems = this.items();\n      if (providedItems == null) this.#routeVersion();\n      const sourceItems: readonly SdBreadcrumbSourceItem[] = providedItems ?? this.#createRouteItems();\n      if (sourceItems.length === 0) {\n        this.#resolvedItems.set([]);\n        return;\n      }\n\n      const subscription = combineLatest(\n        sourceItems.map(item =>\n          defer(() => normalizeAsync(resolveLabelSource(item.label, item.route))).pipe(\n            map(label => ({\n              ...item,\n              label: String(label ?? '').trim(),\n              source: item,\n            })),\n            catchError(() => of({ ...item, label: '', source: item }))\n          )\n        )\n      ).subscribe(items => this.#resolvedItems.set(items.filter(item => item.label)));\n      onCleanup(() => subscription.unsubscribe());\n    });\n  }\n\n  protected activate(item: SdBreadcrumbResolvedItem, event: Event): void {\n    if (item.disabled) {\n      event.preventDefault();\n      return;\n    }\n    this.sdItemActivate.emit(item.source);\n\n    if (!item.url || !this.#router || isModifiedMouseEvent(event)) return;\n    event.preventDefault();\n    if (typeof item.url === 'string') {\n      void this.#router.navigateByUrl(item.url);\n    } else {\n      void this.#router.navigate(item.url);\n    }\n  }\n\n  protected href(item: SdBreadcrumbResolvedItem): string | null {\n    return typeof item.url === 'string' ? item.url : null;\n  }\n\n  protected templateContext(item: SdBreadcrumbResolvedItem): SdBreadcrumbItemTemplateContext {\n    return { $implicit: item, item };\n  }\n\n  #createRouteItems(): SdBreadcrumbSourceItem[] {\n    const root = this.#router?.routerState.snapshot.root;\n    if (!root) return [];\n\n    const items: SdBreadcrumbSourceItem[] = [];\n    const segments: string[] = [];\n    let route: ActivatedRouteSnapshot | null = root;\n\n    while (route) {\n      if (route.outlet === PRIMARY_OUTLET) {\n        segments.push(...route.url.map(segment => segment.path).filter(Boolean));\n        const value = route.data['breadcrumb'] as SdBreadcrumbLabel | SdBreadcrumbRouteConfig | undefined;\n        if (value !== undefined && value !== null) {\n          const config = isRouteConfig(value) ? value : { label: value };\n          items.push({\n            ...config,\n            url: config.url ?? `/${segments.join('/')}`,\n            route,\n          });\n        }\n      }\n      route = route.children?.find(child => child.outlet === PRIMARY_OUTLET) ?? route.firstChild;\n    }\n\n    return items;\n  }\n}\n\nfunction resolveLabelSource(label: SdBreadcrumbLabel, route?: ActivatedRouteSnapshot): MaybeAsync<string | null | undefined> {\n  return typeof label === 'function' ? label(route) : label;\n}\n\nfunction isRouteConfig(value: SdBreadcrumbLabel | SdBreadcrumbRouteConfig): value is SdBreadcrumbRouteConfig {\n  return typeof value === 'object' && value !== null && 'label' in value;\n}\n\nfunction normalizeMaxItems(value: number | string | null | undefined): number {\n  const parsed = Number(value);\n  return Number.isFinite(parsed) ? Math.max(3, Math.floor(parsed)) : 5;\n}\n\nfunction isModifiedMouseEvent(event: Event): boolean {\n  return event instanceof MouseEvent && (event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey);\n}\n","<nav class=\"sd-breadcrumb\" [attr.aria-label]=\"ariaLabel()\">\n  <ol class=\"sd-breadcrumb__list\">\n    @for (entry of visibleEntries(); track entry.kind === 'item' ? entry.item : $index; let last = $last) {\n      <li class=\"sd-breadcrumb__entry\">\n        @if (entry.kind === 'ellipsis') {\n          <span class=\"sd-breadcrumb__ellipsis\" aria-hidden=\"true\">…</span>\n        } @else {\n          @let item = entry.item;\n          @let template = itemTemplate();\n          @if (!last && !item.disabled && href(item) !== null) {\n            <a class=\"sd-breadcrumb__item\" [attr.href]=\"href(item)\" (click)=\"activate(item, $event)\">\n              @if (template) {\n                <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"templateContext(item)\"></ng-container>\n              } @else {\n                @if (item.icon) {\n                  <sd-icon class=\"sd-breadcrumb__icon\" aria-hidden=\"true\" [name]=\"item.icon\" [fontSet]=\"item.fontSet\"></sd-icon>\n                }\n                <span>{{ item.label }}</span>\n              }\n            </a>\n          } @else if (!last && !item.disabled && (item.url || item.clickable)) {\n            <button type=\"button\" class=\"sd-breadcrumb__item\" (click)=\"activate(item, $event)\">\n              @if (template) {\n                <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"templateContext(item)\"></ng-container>\n              } @else {\n                @if (item.icon) {\n                  <sd-icon class=\"sd-breadcrumb__icon\" aria-hidden=\"true\" [name]=\"item.icon\" [fontSet]=\"item.fontSet\"></sd-icon>\n                }\n                <span>{{ item.label }}</span>\n              }\n            </button>\n          } @else {\n            <span\n              class=\"sd-breadcrumb__item\"\n              [class.sd-breadcrumb__item--disabled]=\"item.disabled\"\n              [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n              [attr.aria-current]=\"last ? 'page' : null\">\n              @if (template) {\n                <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"templateContext(item)\"></ng-container>\n              } @else {\n                @if (item.icon) {\n                  <sd-icon class=\"sd-breadcrumb__icon\" aria-hidden=\"true\" [name]=\"item.icon\" [fontSet]=\"item.fontSet\"></sd-icon>\n                }\n                <span>{{ item.label }}</span>\n              }\n            </span>\n          }\n        }\n\n        @if (!last) {\n          <sd-icon class=\"sd-breadcrumb__separator\" aria-hidden=\"true\" [name]=\"separator()\"></sd-icon>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sdcorejs-angular-components-data-state.mjs

@@ -0,0 +1,68 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, input, booleanAttribute, output, contentChild, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { TranslatePipe } from '@sdcorejs/angular/i18n';
+import { SdIcon } from '@sdcorejs/angular/modules/icon';
+
+class SdDataStateTemplateDirective {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, _context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdDataStateTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SdDataStateTemplateDirective, isStandalone: true, selector: "ng-template[sdDataStateTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdDataStateTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[sdDataStateTemplate]',
+                    standalone: true,
+                }]
+        }] });
+const DEFAULT_ICON = {
+    loading: 'progress_activity',
+    empty: 'inbox',
+    error: 'error_outline',
+    forbidden: 'lock',
+    success: null,
+};
+class SdDataState {
+    state = input('success', ...(ngDevMode ? [{ debugName: "state" }] : []));
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    fontSet = input(...(ngDevMode ? [undefined, { debugName: "fontSet" }] : []));
+    retryable = input(false, ...(ngDevMode ? [{ debugName: "retryable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    retryLabel = input(...(ngDevMode ? [undefined, { debugName: "retryLabel" }] : []));
+    actionLabel = input(...(ngDevMode ? [undefined, { debugName: "actionLabel" }] : []));
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    fullPage = input(false, ...(ngDevMode ? [{ debugName: "fullPage", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    sdRetry = output();
+    sdAction = output();
+    customTemplate = contentChild(SdDataStateTemplateDirective, ...(ngDevMode ? [{ debugName: "customTemplate" }] : []));
+    effectiveIcon = computed(() => this.icon() ?? DEFAULT_ICON[this.state()], ...(ngDevMode ? [{ debugName: "effectiveIcon" }] : []));
+    titleKey = computed(() => `core.component.data-state.${this.state()}.title`, ...(ngDevMode ? [{ debugName: "titleKey" }] : []));
+    messageKey = computed(() => `core.component.data-state.${this.state()}.message`, ...(ngDevMode ? [{ debugName: "messageKey" }] : []));
+    role = computed(() => this.state() === 'error' || this.state() === 'forbidden' ? 'alert' : 'status', ...(ngDevMode ? [{ debugName: "role" }] : []));
+    retry = () => this.sdRetry.emit();
+    action = () => this.sdAction.emit();
+    templateContext = computed(() => ({
+        $implicit: this.state(),
+        state: this.state(),
+        retry: this.retry,
+        action: this.action,
+    }), ...(ngDevMode ? [{ debugName: "templateContext" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdDataState, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdDataState, isStandalone: true, selector: "sd-data-state", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, fontSet: { classPropertyName: "fontSet", publicName: "fontSet", isSignal: true, isRequired: false, transformFunction: null }, retryable: { classPropertyName: "retryable", publicName: "retryable", isSignal: true, isRequired: false, transformFunction: null }, retryLabel: { classPropertyName: "retryLabel", publicName: "retryLabel", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, fullPage: { classPropertyName: "fullPage", publicName: "fullPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdRetry: "sdRetry", sdAction: "sdAction" }, queries: [{ propertyName: "customTemplate", first: true, predicate: SdDataStateTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@let currentState = state();\n@let template = customTemplate();\n\n@if (currentState === 'success') {\n  @if (template) {\n    <ng-container [ngTemplateOutlet]=\"template.template\" [ngTemplateOutletContext]=\"templateContext()\"></ng-container>\n  } @else {\n    <ng-content></ng-content>\n  }\n} @else if (template) {\n  <ng-container [ngTemplateOutlet]=\"template.template\" [ngTemplateOutletContext]=\"templateContext()\"></ng-container>\n} @else {\n  <section\n    class=\"sd-data-state\"\n    [class.sd-data-state--compact]=\"compact()\"\n    [class.sd-data-state--full-page]=\"fullPage()\"\n    [attr.data-state]=\"currentState\"\n    [attr.role]=\"role()\"\n    [attr.aria-busy]=\"currentState === 'loading' ? 'true' : null\"\n    [attr.aria-live]=\"role() === 'alert' ? 'assertive' : 'polite'\">\n    @if (effectiveIcon(); as currentIcon) {\n      <sd-icon class=\"sd-data-state__icon\" aria-hidden=\"true\" [name]=\"currentIcon\" [fontSet]=\"fontSet()\"></sd-icon>\n    }\n\n    <div class=\"sd-data-state__title\">{{ title() ?? (titleKey() | translate) }}</div>\n    <div class=\"sd-data-state__message\">{{ message() ?? (messageKey() | translate) }}</div>\n\n    @if (retryable() || actionLabel()) {\n      <div class=\"sd-data-state__actions\">\n        @if (retryable()) {\n          <button type=\"button\" data-state-retry (click)=\"retry()\">\n            {{ retryLabel() || ('core.component.data-state.retry' | translate) }}\n          </button>\n        }\n        @if (actionLabel(); as label) {\n          <button type=\"button\" data-state-action (click)=\"action()\">{{ label }}</button>\n        }\n      </div>\n    }\n  </section>\n}\n", styles: [":host{display:contents}.sd-data-state{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:240px;padding:32px;text-align:center;color:var(--sd-text, #2f3136)}.sd-data-state--compact{min-height:120px;padding:16px}.sd-data-state--full-page{min-height:100dvh}.sd-data-state__icon{width:48px;height:48px;color:var(--sd-text-secondary, #667085)}[data-state=loading] .sd-data-state__icon{animation:sd-data-state-spin 1s linear infinite}[data-state=error] .sd-data-state__icon,[data-state=forbidden] .sd-data-state__icon{color:var(--sd-error, #d92d20)}.sd-data-state__title{font-size:18px;font-weight:600;line-height:24px}.sd-data-state__message{max-width:520px;color:var(--sd-text-secondary, #667085);font-size:14px;line-height:20px}.sd-data-state__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}.sd-data-state__actions button{min-height:36px;padding:8px 14px;border:1px solid var(--sd-border, #d0d5dd);border-radius:6px;background:#fff;color:var(--sd-text, #2f3136);font:inherit;cursor:pointer}.sd-data-state__actions button:focus-visible{outline:2px solid var(--sd-info, #1677ff);outline-offset:2px}@keyframes sd-data-state-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){[data-state=loading] .sd-data-state__icon{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdDataState, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-data-state', standalone: true, imports: [NgTemplateOutlet, TranslatePipe, SdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let currentState = state();\n@let template = customTemplate();\n\n@if (currentState === 'success') {\n  @if (template) {\n    <ng-container [ngTemplateOutlet]=\"template.template\" [ngTemplateOutletContext]=\"templateContext()\"></ng-container>\n  } @else {\n    <ng-content></ng-content>\n  }\n} @else if (template) {\n  <ng-container [ngTemplateOutlet]=\"template.template\" [ngTemplateOutletContext]=\"templateContext()\"></ng-container>\n} @else {\n  <section\n    class=\"sd-data-state\"\n    [class.sd-data-state--compact]=\"compact()\"\n    [class.sd-data-state--full-page]=\"fullPage()\"\n    [attr.data-state]=\"currentState\"\n    [attr.role]=\"role()\"\n    [attr.aria-busy]=\"currentState === 'loading' ? 'true' : null\"\n    [attr.aria-live]=\"role() === 'alert' ? 'assertive' : 'polite'\">\n    @if (effectiveIcon(); as currentIcon) {\n      <sd-icon class=\"sd-data-state__icon\" aria-hidden=\"true\" [name]=\"currentIcon\" [fontSet]=\"fontSet()\"></sd-icon>\n    }\n\n    <div class=\"sd-data-state__title\">{{ title() ?? (titleKey() | translate) }}</div>\n    <div class=\"sd-data-state__message\">{{ message() ?? (messageKey() | translate) }}</div>\n\n    @if (retryable() || actionLabel()) {\n      <div class=\"sd-data-state__actions\">\n        @if (retryable()) {\n          <button type=\"button\" data-state-retry (click)=\"retry()\">\n            {{ retryLabel() || ('core.component.data-state.retry' | translate) }}\n          </button>\n        }\n        @if (actionLabel(); as label) {\n          <button type=\"button\" data-state-action (click)=\"action()\">{{ label }}</button>\n        }\n      </div>\n    }\n  </section>\n}\n", styles: [":host{display:contents}.sd-data-state{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:240px;padding:32px;text-align:center;color:var(--sd-text, #2f3136)}.sd-data-state--compact{min-height:120px;padding:16px}.sd-data-state--full-page{min-height:100dvh}.sd-data-state__icon{width:48px;height:48px;color:var(--sd-text-secondary, #667085)}[data-state=loading] .sd-data-state__icon{animation:sd-data-state-spin 1s linear infinite}[data-state=error] .sd-data-state__icon,[data-state=forbidden] .sd-data-state__icon{color:var(--sd-error, #d92d20)}.sd-data-state__title{font-size:18px;font-weight:600;line-height:24px}.sd-data-state__message{max-width:520px;color:var(--sd-text-secondary, #667085);font-size:14px;line-height:20px}.sd-data-state__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}.sd-data-state__actions button{min-height:36px;padding:8px 14px;border:1px solid var(--sd-border, #d0d5dd);border-radius:6px;background:#fff;color:var(--sd-text, #2f3136);font:inherit;cursor:pointer}.sd-data-state__actions button:focus-visible{outline:2px solid var(--sd-info, #1677ff);outline-offset:2px}@keyframes sd-data-state-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){[data-state=loading] .sd-data-state__icon{animation:none}}\n"] }]
+        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], fontSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "fontSet", required: false }] }], retryable: [{ type: i0.Input, args: [{ isSignal: true, alias: "retryable", required: false }] }], retryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "retryLabel", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], fullPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullPage", required: false }] }], sdRetry: [{ type: i0.Output, args: ["sdRetry"] }], sdAction: [{ type: i0.Output, args: ["sdAction"] }], customTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdDataStateTemplateDirective), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdDataState, SdDataStateTemplateDirective };
+//# sourceMappingURL=sdcorejs-angular-components-data-state.mjs.map

package/fesm2022/sdcorejs-angular-components-data-state.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdcorejs-angular-components-data-state.mjs","sources":["../../../projects/sdcorejs-angular/components/data-state/src/data-state.component.ts","../../../projects/sdcorejs-angular/components/data-state/src/data-state.component.html","../../../projects/sdcorejs-angular/components/data-state/sdcorejs-angular-components-data-state.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  Directive,\n  TemplateRef,\n  booleanAttribute,\n  computed,\n  contentChild,\n  inject,\n  input,\n  output,\n} from '@angular/core';\nimport { TranslatePipe } from '@sdcorejs/angular/i18n';\nimport { SdIcon, SdIconSet } from '@sdcorejs/angular/modules/icon';\n\nexport type SdDataStateKind = 'loading' | 'empty' | 'error' | 'forbidden' | 'success';\n\nexport interface SdDataStateTemplateContext {\n  readonly $implicit: SdDataStateKind;\n  readonly state: SdDataStateKind;\n  readonly retry: () => void;\n  readonly action: () => void;\n}\n\n@Directive({\n  selector: 'ng-template[sdDataStateTemplate]',\n  standalone: true,\n})\nexport class SdDataStateTemplateDirective {\n  readonly template = inject<TemplateRef<SdDataStateTemplateContext>>(TemplateRef);\n\n  static ngTemplateContextGuard(_directive: SdDataStateTemplateDirective, _context: unknown): _context is SdDataStateTemplateContext {\n    return true;\n  }\n}\n\nconst DEFAULT_ICON: Readonly<Record<SdDataStateKind, string | null>> = {\n  loading: 'progress_activity',\n  empty: 'inbox',\n  error: 'error_outline',\n  forbidden: 'lock',\n  success: null,\n};\n\n@Component({\n  selector: 'sd-data-state',\n  standalone: true,\n  imports: [NgTemplateOutlet, TranslatePipe, SdIcon],\n  templateUrl: './data-state.component.html',\n  styleUrl: './data-state.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdDataState {\n  readonly state = input<SdDataStateKind>('success');\n  readonly title = input<string | null | undefined>();\n  readonly message = input<string | null | undefined>();\n  readonly icon = input<string | null | undefined>();\n  readonly fontSet = input<SdIconSet | undefined>();\n  readonly retryable = input(false, { transform: booleanAttribute });\n  readonly retryLabel = input<string | null | undefined>();\n  readonly actionLabel = input<string | null | undefined>();\n  readonly compact = input(false, { transform: booleanAttribute });\n  readonly fullPage = input(false, { transform: booleanAttribute });\n  readonly sdRetry = output<void>();\n  readonly sdAction = output<void>();\n\n  protected readonly customTemplate = contentChild(SdDataStateTemplateDirective);\n  protected readonly effectiveIcon = computed(() => this.icon() ?? DEFAULT_ICON[this.state()]);\n  protected readonly titleKey = computed(() => `core.component.data-state.${this.state()}.title`);\n  protected readonly messageKey = computed(() => `core.component.data-state.${this.state()}.message`);\n  protected readonly role = computed<'alert' | 'status'>(() =>\n    this.state() === 'error' || this.state() === 'forbidden' ? 'alert' : 'status'\n  );\n\n  protected readonly retry = (): void => this.sdRetry.emit();\n  protected readonly action = (): void => this.sdAction.emit();\n  protected readonly templateContext = computed<SdDataStateTemplateContext>(() => ({\n    $implicit: this.state(),\n    state: this.state(),\n    retry: this.retry,\n    action: this.action,\n  }));\n}\n","@let currentState = state();\n@let template = customTemplate();\n\n@if (currentState === 'success') {\n  @if (template) {\n    <ng-container [ngTemplateOutlet]=\"template.template\" [ngTemplateOutletContext]=\"templateContext()\"></ng-container>\n  } @else {\n    <ng-content></ng-content>\n  }\n} @else if (template) {\n  <ng-container [ngTemplateOutlet]=\"template.template\" [ngTemplateOutletContext]=\"templateContext()\"></ng-container>\n} @else {\n  <section\n    class=\"sd-data-state\"\n    [class.sd-data-state--compact]=\"compact()\"\n    [class.sd-data-state--full-page]=\"fullPage()\"\n    [attr.data-state]=\"currentState\"\n    [attr.role]=\"role()\"\n    [attr.aria-busy]=\"currentState === 'loading' ? 'true' : null\"\n    [attr.aria-live]=\"role() === 'alert' ? 'assertive' : 'polite'\">\n    @if (effectiveIcon(); as currentIcon) {\n      <sd-icon class=\"sd-data-state__icon\" aria-hidden=\"true\" [name]=\"currentIcon\" [fontSet]=\"fontSet()\"></sd-icon>\n    }\n\n    <div class=\"sd-data-state__title\">{{ title() ?? (titleKey() | translate) }}</div>\n    <div class=\"sd-data-state__message\">{{ message() ?? (messageKey() | translate) }}</div>\n\n    @if (retryable() || actionLabel()) {\n      <div class=\"sd-data-state__actions\">\n        @if (retryable()) {\n          <button type=\"button\" data-state-retry (click)=\"retry()\">\n            {{ retryLabel() || ('core.component.data-state.retry' | translate) }}\n          </button>\n        }\n        @if (actionLabel(); as label) {\n          <button type=\"button\" data-state-action (click)=\"action()\">{{ label }}</button>\n        }\n      </div>\n    }\n  </section>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sdcorejs-angular-components-document-builder.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, EventEmitter, Output, Input, Component } from '@angular/core';
+import { inject, output, Input, Component, input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@ckeditor/ckeditor5-angular';
 import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
@@ -66,7 +66,7 @@ class SdHeaderFooterBuilder {
             this.#model = value;
         }
     }
-    modelChange = new EventEmitter();
+    modelChange = output();
     #editorI18n = {
         t: (key, params) => this.#i18n.t(key, params),
     };
@@ -116,7 +116,7 @@ class SdHeaderFooterBuilder {
         this.#editor.setData(this.#model || '');
         this.#editor.model.document.on('change:data', () => {
             this.#model = this.#editor.getData();
-            this.modelChange.next(this.#model);
+            this.modelChange.emit(this.#model);
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdHeaderFooterBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -135,9 +135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `, styles: [":host ::ng-deep .header-footer-editor-wrapper .ck-editor__editable_inline{min-height:100px;max-height:200px;padding:10px 20px;border:1px solid #ddd}:host ::ng-deep .page-number-marker,:host ::ng-deep .total-page-marker{font-size:11px;color:#555;cursor:default;-webkit-user-select:none;user-select:none}\n"] }]
         }], propDecorators: { model: [{
                 type: Input
-            }], modelChange: [{
-                type: Output
-            }] } });
+            }], modelChange: [{ type: i0.Output, args: ["modelChange"] }] } });
 
 /**
  * Cấu hình màu cho Document Builder
@@ -4408,13 +4406,13 @@ function normalize(content) {
 
 class SdDocumentBuilder {
     #i18n = inject(I18nService);
-    option;
+    option = input.required(...(ngDevMode ? [{ debugName: "option" }] : []));
     disabled = false;
     set _disabled(val) {
         this.disabled = val === '' || !!val;
         this.#updateState();
     }
-    contentChange = new EventEmitter(); // Emit HTML content
+    contentChange = output(); // Emit HTML content
     Editor = ClassicEditor;
     #editor;
     #id = '55b0afb0-288d-423c-98b3-5f9db286e16d';
@@ -4432,7 +4430,7 @@ class SdDocumentBuilder {
     };
     // Config
     config = {
-        getOption: () => this.option,
+        getOption: () => this.option(),
         _i18n: this.#editorI18n,
         licenseKey: 'GPL', // Hoặc key thương mại nếu có
         plugins: [
@@ -4599,11 +4597,12 @@ class SdDocumentBuilder {
             const orientationPlugin = editor.plugins.get('PageOrientation');
             if (orientationPlugin && typeof orientationPlugin.onOrientationChange === 'function') {
                 orientationPlugin.onOrientationChange(orientation => {
-                    this.option.onOrientation?.(orientation);
+                    this.option().onOrientation?.(orientation);
                 });
                 // Set initial orientation if provided
-                if (this.option.orientation) {
-                    orientationPlugin.setOrientation(this.option.orientation);
+                const option = this.option();
+                if (option.orientation) {
+                    orientationPlugin.setOrientation(option.orientation);
                 }
             }
         }
@@ -4612,7 +4611,7 @@ class SdDocumentBuilder {
         }
         // Lắng nghe selection
         editor.model.document.selection.on('change', $event => {
-            this.option.onSelection?.(this.#editor.model.document.selection, $event);
+            this.option().onSelection?.(this.#editor.model.document.selection, $event);
         });
         // Lắng nghe sự kiện thay đổi nội dung
         editor.model.document.on('change:data', () => {
@@ -4649,8 +4648,9 @@ class SdDocumentBuilder {
             return;
         try {
             const ckCommentPlugin = this.#editor.plugins.get('CkComment');
-            if (ckCommentPlugin && this.option.comment) {
-                ckCommentPlugin.setConfig(this.option.comment);
+            const option = this.option();
+            if (ckCommentPlugin && option.comment) {
+                ckCommentPlugin.setConfig(option.comment);
             }
         }
         catch (error) {
@@ -5020,20 +5020,15 @@ class SdDocumentBuilder {
         });
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdDocumentBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SdDocumentBuilder, isStandalone: true, selector: "sd-document-builder", inputs: { option: "option", _disabled: ["disabled", "_disabled"] }, outputs: { contentChange: "contentChange" }, ngImport: i0, template: "<sd-ckeditor-styles />\n<div class=\"builder-container\">\n  <ckeditor class=\"w-full\" [editor]=\"Editor\" [config]=\"config\" (ready)=\"onReady($event)\" [disabled]=\"disabled\"> </ckeditor>\n</div>\n", styles: ["@charset \"UTF-8\";.builder-container{height:100%;overflow-y:auto;width:100%;display:flex;flex-direction:column;align-items:center}:host{display:inline-block}:host ::ng-deep .ck-editor{display:flex;flex-direction:column;align-items:center;width:100%;--ck-content-font-family: \"Times New Roman\", serif !important;--ck-content-font-size: 13pt;--ck-content-line-height: 1.15}:host ::ng-deep .ck-editor__top,:host ::ng-deep .ck-editor__main{border:none!important;box-shadow:none!important}:host ::ng-deep .ck-editor__top{position:sticky;top:0;z-index:100;width:100%;min-width:600px;margin-bottom:10px}:host ::ng-deep .ck-editor__top .ck-sticky-panel__content{border:none!important}:host ::ng-deep .ck-editor__top .ck-toolbar{background:#fff!important;box-shadow:none!important;border-radius:8px;padding:8px!important}:host ::ng-deep .ck-editor__top .ck-toolbar .ck-toolbar__items{display:flex;justify-content:center;flex-wrap:wrap;align-items:center}:host ::ng-deep .ck-content{background-color:#fff;width:210mm;min-height:1123px;padding:20mm!important;box-sizing:border-box!important;box-shadow:0 10px 15px -3px #0000001a}:host ::ng-deep .ck-content h1,:host ::ng-deep .ck-content h2,:host ::ng-deep .ck-content h3,:host ::ng-deep .ck-content h4,:host ::ng-deep .ck-content h5,:host ::ng-deep .ck-content h6{font-weight:400;font-size:inherit;line-height:inherit;margin-bottom:4px}:host ::ng-deep .ck-content.landscape{width:297mm}:host ::ng-deep .ck-content>*{max-width:100%!important;box-sizing:border-box!important}:host ::ng-deep .ck-content p{margin-bottom:4px;text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important;margin-bottom:4px}:host ::ng-deep .ck-content li{margin-bottom:0}:host ::ng-deep .ck-content table{margin-bottom:4px}\n", ":host ::ng-deep .ck-heading-highlight{background-color:#fef08a}\n", "@charset \"UTF-8\";::ng-deep .ck-clipboard-drop-target-line{display:none!important}:host ::ng-deep .variable-widget{display:inline-block;-webkit-user-select:none;user-select:none}:host ::ng-deep .variable-widget:not([data-binding=true]):not([data-binding=html]){background-color:var(--sd-primary-light, #d7e3ff);color:var(--sd-primary, #005cbb);border:1px solid color-mix(in srgb,var(--sd-primary, #005cbb) 34%,var(--sd-border, #c4c6d0))!important;border-radius:4px;padding:2px 6px;font-size:0;margin:0 2px;vertical-align:middle;font-weight:600;cursor:default}:host ::ng-deep .variable-widget:not([data-binding=true]):not([data-binding=html]):before{content:attr(data-display);font-size:10px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}:host ::ng-deep .variable-widget:not([data-binding=true]):not([data-binding=html]):hover{background-color:color-mix(in srgb,var(--sd-primary-light, #d7e3ff) 78%,var(--sd-primary, #005cbb));box-shadow:0 1px 2px #0000001a}:host ::ng-deep .variable-widget:not([data-binding=true]):not([data-binding=html]).ck-widget_selected{outline:2px solid var(--sd-primary, #005cbb);background-color:color-mix(in srgb,var(--sd-primary-light, #d7e3ff) 78%,var(--sd-primary, #005cbb))}:host ::ng-deep .variable-widget[data-binding=true]{background-color:color-mix(in srgb,var(--sd-success-light, #d8f0d3) 62%,transparent);color:var(--sd-success, #2e7d32);border-bottom:2px solid var(--sd-success, #2e7d32)!important;border-radius:0;padding:0 1px;font-size:inherit;cursor:default}:host ::ng-deep .variable-widget[data-binding=true]:before{content:none}:host ::ng-deep .variable-widget[data-binding=true]:hover{background-color:color-mix(in srgb,var(--sd-success-light, #d8f0d3) 82%,transparent)}:host ::ng-deep .variable-widget[data-binding=true].ck-widget_selected{outline:2px solid var(--sd-success, #2e7d32);background-color:color-mix(in srgb,var(--sd-success-light, #d8f0d3) 90%,transparent)}:host ::ng-deep .variable-widget[data-binding=html]{display:block;background-color:transparent;border:1px dashed var(--sd-success, #2e7d32)!important;border-radius:4px;padding:4px;-webkit-user-select:text;user-select:text;pointer-events:none}:host ::ng-deep .variable-widget[data-binding=html]:before{content:none}:host ::ng-deep .variable-widget[data-binding=html]:hover{background-color:color-mix(in srgb,var(--sd-success-light, #d8f0d3) 42%,transparent)}:host ::ng-deep .variable-widget[data-binding=html].ck-widget_selected{outline:2px solid var(--sd-success, #2e7d32);background-color:color-mix(in srgb,var(--sd-success-light, #d8f0d3) 52%,transparent)}:host ::ng-deep .variable-widget[data-binding=html] .variable-html-content{display:block}:host ::ng-deep .ck.ck-content .ck-widget,:host ::ng-deep .ck.ck-content .ck-widget:hover,:host ::ng-deep .ck.ck-content .ck-widget:focus,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected:hover{outline:none!important;box-shadow:none!important}\n", ":host ::ng-deep .highlight-range{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;transition:background-color .2s;cursor:pointer}\n", ":host ::ng-deep .ck-comment-marker{background-color:var(--comment-bg, rgba(59, 130, 246, .3));border-bottom:2px solid rgb(59,130,246);cursor:pointer;transition:all .2s ease}:host ::ng-deep .ck-comment-marker:hover{opacity:.8}:host ::ng-deep .ck-comment-marker.ck-comment-pending{background-color:var(--comment-pending-bg, rgba(245, 158, 11, .4));border-bottom-color:#f59e0b}:host ::ng-deep .ck-comment-marker.ck-comment-normal{background-color:var(--comment-bg, rgba(59, 130, 246, .2));border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-selected{background-color:var(--comment-selected-bg, 59, 130, 246, .5);border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-modified{background-color:var(--comment-modified-bg, rgba(249, 115, 22, .3));border-bottom-color:#f97316}:host ::ng-deep .ck-comment-marker.ck-comment-broken{background-color:var(--comment-broken-bg, rgba(239, 68, 68, .3));border-bottom-color:#ef4444;text-decoration:line-through;text-decoration-color:#ef4444}:host ::ng-deep .ck-balloon-panel .ck-button.ck-on:hover,:host ::ng-deep .ck-balloon-panel .ck-button.ck-off:hover{background:var(--ck-color-button-default-hover-background)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i1.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableWatchdog", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }, { kind: "component", type: SdCKEditorStyles, selector: "sd-ckeditor-styles" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: SdDocumentBuilder, isStandalone: true, selector: "sd-document-builder", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange" }, ngImport: i0, template: "<sd-ckeditor-styles />\n<div class=\"builder-container\">\n  <ckeditor class=\"w-full\" [editor]=\"Editor\" [config]=\"config\" (ready)=\"onReady($event)\" [disabled]=\"disabled\"> </ckeditor>\n</div>\n", styles: ["@charset \"UTF-8\";.builder-container{height:100%;overflow-y:auto;width:100%;display:flex;flex-direction:column;align-items:center}:host{display:inline-block}:host ::ng-deep .ck-editor{display:flex;flex-direction:column;align-items:center;width:100%;--ck-content-font-family: \"Times New Roman\", serif !important;--ck-content-font-size: 13pt;--ck-content-line-height: 1.15}:host ::ng-deep .ck-editor__top,:host ::ng-deep .ck-editor__main{border:none!important;box-shadow:none!important}:host ::ng-deep .ck-editor__top{position:sticky;top:0;z-index:100;width:100%;min-width:600px;margin-bottom:10px}:host ::ng-deep .ck-editor__top .ck-sticky-panel__content{border:none!important}:host ::ng-deep .ck-editor__top .ck-toolbar{background:#fff!important;box-shadow:none!important;border-radius:8px;padding:8px!important}:host ::ng-deep .ck-editor__top .ck-toolbar .ck-toolbar__items{display:flex;justify-content:center;flex-wrap:wrap;align-items:center}:host ::ng-deep .ck-content{background-color:#fff;width:210mm;min-height:1123px;padding:20mm!important;box-sizing:border-box!important;box-shadow:0 10px 15px -3px #0000001a}:host ::ng-deep .ck-content h1,:host ::ng-deep .ck-content h2,:host ::ng-deep .ck-content h3,:host ::ng-deep .ck-content h4,:host ::ng-deep .ck-content h5,:host ::ng-deep .ck-content h6{font-weight:400;font-size:inherit;line-height:inherit;margin-bottom:4px}:host ::ng-deep .ck-content.landscape{width:297mm}:host ::ng-deep .ck-content>*{max-width:100%!important;box-sizing:border-box!important}:host ::ng-deep .ck-content p{margin-bottom:4px;text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important;margin-bottom:4px}:host ::ng-deep .ck-content li{margin-bottom:0}:host ::ng-deep .ck-content table{margin-bottom:4px}\n", ":host ::ng-deep .ck-heading-highlight{background-color:#fef08a}\n", "@charset \"UTF-8\";::ng-deep .ck-clipboard-drop-target-line{display:none!important}:host ::ng-deep .variable-widget{display:inline-block;-webkit-user-select:none;user-select:none}:host ::ng-deep .variable-widget:not([data-binding=true]):not([data-binding=html]){background-color:var(--sd-primary-light, #d7e3ff);color:var(--sd-primary, #005cbb);border:1px solid color-mix(in srgb,var(--sd-primary, #005cbb) 34%,var(--sd-border, #c4c6d0))!important;border-radius:4px;padding:2px 6px;font-size:0;margin:0 2px;vertical-align:middle;font-weight:600;cursor:default}:host ::ng-deep .variable-widget:not([data-binding=true]):not([data-binding=html]):before{content:attr(data-display);font-size:10px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}:host ::ng-deep .variable-widget:not([data-binding=true]):not([data-binding=html]):hover{background-color:color-mix(in srgb,var(--sd-primary-light, #d7e3ff) 78%,var(--sd-primary, #005cbb));box-shadow:0 1px 2px #0000001a}:host ::ng-deep .variable-widget:not([data-binding=true]):not([data-binding=html]).ck-widget_selected{outline:2px solid var(--sd-primary, #005cbb);background-color:color-mix(in srgb,var(--sd-primary-light, #d7e3ff) 78%,var(--sd-primary, #005cbb))}:host ::ng-deep .variable-widget[data-binding=true]{background-color:color-mix(in srgb,var(--sd-success-light, #d8f0d3) 62%,transparent);color:var(--sd-success, #2e7d32);border-bottom:2px solid var(--sd-success, #2e7d32)!important;border-radius:0;padding:0 1px;font-size:inherit;cursor:default}:host ::ng-deep .variable-widget[data-binding=true]:before{content:none}:host ::ng-deep .variable-widget[data-binding=true]:hover{background-color:color-mix(in srgb,var(--sd-success-light, #d8f0d3) 82%,transparent)}:host ::ng-deep .variable-widget[data-binding=true].ck-widget_selected{outline:2px solid var(--sd-success, #2e7d32);background-color:color-mix(in srgb,var(--sd-success-light, #d8f0d3) 90%,transparent)}:host ::ng-deep .variable-widget[data-binding=html]{display:block;background-color:transparent;border:1px dashed var(--sd-success, #2e7d32)!important;border-radius:4px;padding:4px;-webkit-user-select:text;user-select:text;pointer-events:none}:host ::ng-deep .variable-widget[data-binding=html]:before{content:none}:host ::ng-deep .variable-widget[data-binding=html]:hover{background-color:color-mix(in srgb,var(--sd-success-light, #d8f0d3) 42%,transparent)}:host ::ng-deep .variable-widget[data-binding=html].ck-widget_selected{outline:2px solid var(--sd-success, #2e7d32);background-color:color-mix(in srgb,var(--sd-success-light, #d8f0d3) 52%,transparent)}:host ::ng-deep .variable-widget[data-binding=html] .variable-html-content{display:block}:host ::ng-deep .ck.ck-content .ck-widget,:host ::ng-deep .ck.ck-content .ck-widget:hover,:host ::ng-deep .ck.ck-content .ck-widget:focus,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected:hover{outline:none!important;box-shadow:none!important}\n", ":host ::ng-deep .highlight-range{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;transition:background-color .2s;cursor:pointer}\n", ":host ::ng-deep .ck-comment-marker{background-color:var(--comment-bg, rgba(59, 130, 246, .3));border-bottom:2px solid rgb(59,130,246);cursor:pointer;transition:all .2s ease}:host ::ng-deep .ck-comment-marker:hover{opacity:.8}:host ::ng-deep .ck-comment-marker.ck-comment-pending{background-color:var(--comment-pending-bg, rgba(245, 158, 11, .4));border-bottom-color:#f59e0b}:host ::ng-deep .ck-comment-marker.ck-comment-normal{background-color:var(--comment-bg, rgba(59, 130, 246, .2));border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-selected{background-color:var(--comment-selected-bg, 59, 130, 246, .5);border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-modified{background-color:var(--comment-modified-bg, rgba(249, 115, 22, .3));border-bottom-color:#f97316}:host ::ng-deep .ck-comment-marker.ck-comment-broken{background-color:var(--comment-broken-bg, rgba(239, 68, 68, .3));border-bottom-color:#ef4444;text-decoration:line-through;text-decoration-color:#ef4444}:host ::ng-deep .ck-balloon-panel .ck-button.ck-on:hover,:host ::ng-deep .ck-balloon-panel .ck-button.ck-off:hover{background:var(--ck-color-button-default-hover-background)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i1.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableWatchdog", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }, { kind: "component", type: SdCKEditorStyles, selector: "sd-ckeditor-styles" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdDocumentBuilder, decorators: [{
             type: Component,
             args: [{ selector: 'sd-document-builder', standalone: true, imports: [CommonModule, CKEditorModule, SdCKEditorStyles], template: "<sd-ckeditor-styles />\n<div class=\"builder-container\">\n  <ckeditor class=\"w-full\" [editor]=\"Editor\" [config]=\"config\" (ready)=\"onReady($event)\" [disabled]=\"disabled\"> </ckeditor>\n</div>\n", styles: ["@charset \"UTF-8\";.builder-container{height:100%;overflow-y:auto;width:100%;display:flex;flex-direction:column;align-items:center}:host{display:inline-block}:host ::ng-deep .ck-editor{display:flex;flex-direction:column;align-items:center;width:100%;--ck-content-font-family: \"Times New Roman\", serif !important;--ck-content-font-size: 13pt;--ck-content-line-height: 1.15}:host ::ng-deep .ck-editor__top,:host ::ng-deep .ck-editor__main{border:none!important;box-shadow:none!important}:host ::ng-deep .ck-editor__top{position:sticky;top:0;z-index:100;width:100%;min-width:600px;margin-bottom:10px}:host ::ng-deep .ck-editor__top .ck-sticky-panel__content{border:none!important}:host ::ng-deep .ck-editor__top .ck-toolbar{background:#fff!important;box-shadow:none!important;border-radius:8px;padding:8px!important}:host ::ng-deep .ck-editor__top .ck-toolbar .ck-toolbar__items{display:flex;justify-content:center;flex-wrap:wrap;align-items:center}:host ::ng-deep .ck-content{background-color:#fff;width:210mm;min-height:1123px;padding:20mm!important;box-sizing:border-box!important;box-shadow:0 10px 15px -3px #0000001a}:host ::ng-deep .ck-content h1,:host ::ng-deep .ck-content h2,:host ::ng-deep .ck-content h3,:host ::ng-deep .ck-content h4,:host ::ng-deep .ck-content h5,:host ::ng-deep .ck-content h6{font-weight:400;font-size:inherit;line-height:inherit;margin-bottom:4px}:host ::ng-deep .ck-content.landscape{width:297mm}:host ::ng-deep .ck-content>*{max-width:100%!important;box-sizing:border-box!important}:host ::ng-deep .ck-content p{margin-bottom:4px;text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important;margin-bottom:4px}:host ::ng-deep .ck-content li{margin-bottom:0}:host ::ng-deep .ck-content table{margin-bottom:4px}\n", ":host ::ng-deep .ck-heading-highlight{background-color:#fef08a}\n", "@charset \"UTF-8\";::ng-deep .ck-clipboard-drop-target-line{display:none!important}:host ::ng-deep .variable-widget{display:inline-block;-webkit-user-select:none;user-select:none}:host ::ng-deep .variable-widget:not([data-binding=true]):not([data-binding=html]){background-color:var(--sd-primary-light, #d7e3ff);color:var(--sd-primary, #005cbb);border:1px solid color-mix(in srgb,var(--sd-primary, #005cbb) 34%,var(--sd-border, #c4c6d0))!important;border-radius:4px;padding:2px 6px;font-size:0;margin:0 2px;vertical-align:middle;font-weight:600;cursor:default}:host ::ng-deep .variable-widget:not([data-binding=true]):not([data-binding=html]):before{content:attr(data-display);font-size:10px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}:host ::ng-deep .variable-widget:not([data-binding=true]):not([data-binding=html]):hover{background-color:color-mix(in srgb,var(--sd-primary-light, #d7e3ff) 78%,var(--sd-primary, #005cbb));box-shadow:0 1px 2px #0000001a}:host ::ng-deep .variable-widget:not([data-binding=true]):not([data-binding=html]).ck-widget_selected{outline:2px solid var(--sd-primary, #005cbb);background-color:color-mix(in srgb,var(--sd-primary-light, #d7e3ff) 78%,var(--sd-primary, #005cbb))}:host ::ng-deep .variable-widget[data-binding=true]{background-color:color-mix(in srgb,var(--sd-success-light, #d8f0d3) 62%,transparent);color:var(--sd-success, #2e7d32);border-bottom:2px solid var(--sd-success, #2e7d32)!important;border-radius:0;padding:0 1px;font-size:inherit;cursor:default}:host ::ng-deep .variable-widget[data-binding=true]:before{content:none}:host ::ng-deep .variable-widget[data-binding=true]:hover{background-color:color-mix(in srgb,var(--sd-success-light, #d8f0d3) 82%,transparent)}:host ::ng-deep .variable-widget[data-binding=true].ck-widget_selected{outline:2px solid var(--sd-success, #2e7d32);background-color:color-mix(in srgb,var(--sd-success-light, #d8f0d3) 90%,transparent)}:host ::ng-deep .variable-widget[data-binding=html]{display:block;background-color:transparent;border:1px dashed var(--sd-success, #2e7d32)!important;border-radius:4px;padding:4px;-webkit-user-select:text;user-select:text;pointer-events:none}:host ::ng-deep .variable-widget[data-binding=html]:before{content:none}:host ::ng-deep .variable-widget[data-binding=html]:hover{background-color:color-mix(in srgb,var(--sd-success-light, #d8f0d3) 42%,transparent)}:host ::ng-deep .variable-widget[data-binding=html].ck-widget_selected{outline:2px solid var(--sd-success, #2e7d32);background-color:color-mix(in srgb,var(--sd-success-light, #d8f0d3) 52%,transparent)}:host ::ng-deep .variable-widget[data-binding=html] .variable-html-content{display:block}:host ::ng-deep .ck.ck-content .ck-widget,:host ::ng-deep .ck.ck-content .ck-widget:hover,:host ::ng-deep .ck.ck-content .ck-widget:focus,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected:hover{outline:none!important;box-shadow:none!important}\n", ":host ::ng-deep .highlight-range{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;transition:background-color .2s;cursor:pointer}\n", ":host ::ng-deep .ck-comment-marker{background-color:var(--comment-bg, rgba(59, 130, 246, .3));border-bottom:2px solid rgb(59,130,246);cursor:pointer;transition:all .2s ease}:host ::ng-deep .ck-comment-marker:hover{opacity:.8}:host ::ng-deep .ck-comment-marker.ck-comment-pending{background-color:var(--comment-pending-bg, rgba(245, 158, 11, .4));border-bottom-color:#f59e0b}:host ::ng-deep .ck-comment-marker.ck-comment-normal{background-color:var(--comment-bg, rgba(59, 130, 246, .2));border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-selected{background-color:var(--comment-selected-bg, 59, 130, 246, .5);border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-modified{background-color:var(--comment-modified-bg, rgba(249, 115, 22, .3));border-bottom-color:#f97316}:host ::ng-deep .ck-comment-marker.ck-comment-broken{background-color:var(--comment-broken-bg, rgba(239, 68, 68, .3));border-bottom-color:#ef4444;text-decoration:line-through;text-decoration-color:#ef4444}:host ::ng-deep .ck-balloon-panel .ck-button.ck-on:hover,:host ::ng-deep .ck-balloon-panel .ck-button.ck-off:hover{background:var(--ck-color-button-default-hover-background)}\n"] }]
-        }], propDecorators: { option: [{
-                type: Input,
-                args: [{ required: true }]
-            }], _disabled: [{
+        }], propDecorators: { option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: true }] }], _disabled: [{
                 type: Input,
                 args: ['disabled']
-            }], contentChange: [{
-                type: Output
-            }] } });
+            }], contentChange: [{ type: i0.Output, args: ["contentChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.