@ojiepermana/angular-component 22.0.27

package/fesm2022/ojiepermana-angular-component-editor.mjs

@@ -0,0 +1,680 @@
+import { DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, output, computed, ChangeDetectionStrategy, Component, inject, ElementRef, signal, SecurityContext, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { DomSanitizer } from '@angular/platform-browser';
+import { cn } from '@ojiepermana/angular-component/utils';
+
+const DEFAULT_EDITOR_TOOLBAR = 'heading | bold italic underline strike | bullet ordered blockquote link align ~ undo redo';
+const EDITOR_BASE = 'block w-full min-w-0 text-sm text-foreground';
+const EDITOR_SHELL_BASE = [
+    'relative min-w-0 overflow-hidden rounded-md border border-input bg-background shadow-sm',
+    'transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-1 focus-within:ring-ring',
+    'aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive',
+    'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
+].join(' ');
+const EDITOR_TOOLBAR_BASE = [
+    'flex min-h-11 min-w-0 flex-wrap items-center gap-1 border-b border-[hsl(var(--border)/var(--opacity-70))] bg-[hsl(var(--muted)/var(--opacity-30))] px-2 py-1.5',
+    'data-[disabled=true]:pointer-events-none',
+].join(' ');
+const EDITOR_TOOL_BUTTON_BASE = [
+    'inline-flex size-8 shrink-0 items-center justify-center rounded-md text-sm font-medium text-muted-foreground',
+    'transition-colors hover:bg-accent hover:text-accent-foreground',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+    'disabled:pointer-events-none disabled:opacity-50',
+    'aria-pressed:bg-accent aria-pressed:text-accent-foreground',
+].join(' ');
+const EDITOR_SELECT_BASE = [
+    'h-8 rounded-md border border-transparent bg-transparent px-2 text-sm font-medium text-muted-foreground outline-none',
+    'transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring',
+    'disabled:pointer-events-none disabled:opacity-50',
+].join(' ');
+const EDITOR_CONTENT_BASE = [
+    'block min-h-[200px] max-h-[500px] w-full overflow-y-auto px-4 py-3 text-sm leading-6 outline-none',
+    '[&_p]:my-2 [&_h1]:mb-2 [&_h1]:mt-4 [&_h1]:text-2xl [&_h1]:font-semibold [&_h2]:mb-2 [&_h2]:mt-4 [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:mb-2 [&_h3]:mt-4 [&_h3]:text-lg [&_h3]:font-semibold',
+    '[&_blockquote]:my-3 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground [&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-6 [&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:font-mono [&_pre]:text-xs',
+    'data-[empty=true]:before:pointer-events-none data-[empty=true]:before:text-muted-foreground data-[empty=true]:before:content-[attr(data-placeholder)]',
+    'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
+].join(' ');
+const toolbarButtons = {
+    bold: { label: 'B', ariaLabel: 'Bold' },
+    italic: { label: 'I', ariaLabel: 'Italic' },
+    underline: { label: 'U', ariaLabel: 'Underline' },
+    strike: { label: 'S', ariaLabel: 'Strikethrough' },
+    bullet: { label: 'UL', ariaLabel: 'Bulleted list' },
+    ordered: { label: '1.', ariaLabel: 'Numbered list' },
+    blockquote: { label: 'Q', ariaLabel: 'Block quote' },
+    subscript: { label: 'Sub', ariaLabel: 'Subscript' },
+    superscript: { label: 'Sup', ariaLabel: 'Superscript' },
+    highlight: { label: 'H', ariaLabel: 'Highlight' },
+    link: { label: 'Link', ariaLabel: 'Insert link' },
+    code: { label: '</>', ariaLabel: 'Code block' },
+    undo: { label: 'Undo', ariaLabel: 'Undo' },
+    redo: { label: 'Redo', ariaLabel: 'Redo' },
+};
+/** document.execCommand name (+ optional value) for each editor command. */
+const EDITOR_EXEC_COMMANDS = {
+    paragraph: ['formatBlock', 'p'],
+    'heading-1': ['formatBlock', 'h1'],
+    'heading-2': ['formatBlock', 'h2'],
+    'heading-3': ['formatBlock', 'h3'],
+    bold: ['bold'],
+    italic: ['italic'],
+    underline: ['underline'],
+    strike: ['strikeThrough'],
+    bullet: ['insertUnorderedList'],
+    ordered: ['insertOrderedList'],
+    blockquote: ['formatBlock', 'blockquote'],
+    subscript: ['subscript'],
+    superscript: ['superscript'],
+    highlight: ['backColor'],
+    link: ['createLink', '#'],
+    code: ['formatBlock', 'pre'],
+    'align-left': ['justifyLeft'],
+    'align-center': ['justifyCenter'],
+    'align-right': ['justifyRight'],
+    undo: ['undo'],
+    redo: ['redo'],
+};
+/** Keeps the text selection alive while clicking toolbar controls. */
+const preserveEditorSelection = (event) => {
+    event.preventDefault();
+};
+const parseToolbarItems = (items) => {
+    const tokens = items.split(/\s+/).filter(Boolean);
+    return tokens.flatMap((token, index) => {
+        if (token === '|') {
+            return [{ type: 'separator', track: `separator-${index}` }];
+        }
+        if (token === '~') {
+            return [{ type: 'spacer', track: `spacer-${index}` }];
+        }
+        if (token === 'heading') {
+            return [{ type: 'heading', track: `heading-${index}` }];
+        }
+        if (token === 'align') {
+            return [{ type: 'align', track: `align-${index}` }];
+        }
+        const command = token;
+        const button = toolbarButtons[command];
+        if (!button) {
+            return [];
+        }
+        return [{ type: 'button', command, label: button.label, ariaLabel: button.ariaLabel }];
+    });
+};
+class EditorComponent {
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    commandSelected = output();
+    content = null;
+    classes = computed(() => cn(EDITOR_BASE, this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    shellClasses = computed(() => cn(EDITOR_SHELL_BASE), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shellClasses" }] : /* istanbul ignore next */ []));
+    execute(command, source = 'api', originalEvent) {
+        if (this.disabled()) {
+            return;
+        }
+        this.content?.execute(command);
+        this.commandSelected.emit({ command, source, originalEvent });
+    }
+    registerContent(content) {
+        this.content = content;
+    }
+    unregisterContent(content) {
+        if (this.content === content) {
+            this.content = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: EditorComponent, isStandalone: true, selector: "Editor", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commandSelected: "commandSelected" }, host: { properties: { "class": "classes()", "attr.data-slot": "\"editor\"", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-invalid": "invalid() ? \"true\" : null", "attr.inert": "disabled() ? \"\" : null" } }, ngImport: i0, template: `
+    <div
+      data-slot="editor-shell"
+      [class]="shellClasses()"
+      [attr.data-disabled]="disabled() ? 'true' : null"
+      [attr.aria-invalid]="invalid() ? 'true' : null">
+      <ng-content select="EditorToolbar" />
+      <ng-content select="EditorContent" />
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Editor',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"editor"',
+                        '[attr.data-disabled]': 'disabled() ? "true" : null',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.aria-invalid]': 'invalid() ? "true" : null',
+                        '[attr.inert]': 'disabled() ? "" : null',
+                    },
+                    template: `
+    <div
+      data-slot="editor-shell"
+      [class]="shellClasses()"
+      [attr.data-disabled]="disabled() ? 'true' : null"
+      [attr.aria-invalid]="invalid() ? 'true' : null">
+      <ng-content select="EditorToolbar" />
+      <ng-content select="EditorContent" />
+    </div>
+  `,
+                }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], commandSelected: [{ type: i0.Output, args: ["commandSelected"] }] } });
+class EditorToolbarComponent {
+    editor = inject(EditorComponent, { optional: true });
+    items = input(DEFAULT_EDITOR_TOOLBAR, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
+    ariaLabel = input('Formatting', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    buttonClasses = EDITOR_TOOL_BUTTON_BASE;
+    selectClasses = EDITOR_SELECT_BASE;
+    disabled = computed(() => this.disabledInput() || this.editor?.disabled() === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    parts = computed(() => parseToolbarItems(this.items()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parts" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(EDITOR_TOOLBAR_BASE, this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    execute(command, event) {
+        this.editor?.execute(command, 'toolbar', event);
+    }
+    handleSelect(event) {
+        const select = event.target;
+        this.editor?.execute(select.value, 'toolbar', event);
+        select.selectedIndex = 0;
+    }
+    preserveSelection = preserveEditorSelection;
+    trackPart(part, index) {
+        if (part.type === 'button') {
+            return `${part.command}-${index}`;
+        }
+        return part.track;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EditorToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: EditorToolbarComponent, isStandalone: true, selector: "EditorToolbar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar" }, properties: { "class": "classes()", "attr.data-slot": "\"editor-toolbar\"", "attr.aria-label": "ariaLabel()", "attr.data-disabled": "disabled() ? \"true\" : null" } }, ngImport: i0, template: `
+    @for (part of parts(); track trackPart(part, $index)) {
+      @switch (part.type) {
+        @case ('heading') {
+          <select
+            [class]="selectClasses"
+            [disabled]="disabled()"
+            aria-label="Text style"
+            (change)="handleSelect($event)">
+            <option value="paragraph">Text</option>
+            <option value="heading-1">Heading 1</option>
+            <option value="heading-2">Heading 2</option>
+            <option value="heading-3">Heading 3</option>
+          </select>
+        }
+        @case ('align') {
+          <select
+            [class]="selectClasses"
+            [disabled]="disabled()"
+            aria-label="Text alignment"
+            (change)="handleSelect($event)">
+            <option value="align-left">Left</option>
+            <option value="align-center">Center</option>
+            <option value="align-right">Right</option>
+          </select>
+        }
+        @case ('separator') {
+          <span
+            data-slot="editor-separator"
+            class="mx-1 h-6 w-px shrink-0 bg-border"
+            role="separator"
+            aria-orientation="vertical"></span>
+        }
+        @case ('spacer') {
+          <span data-slot="editor-spacer" class="min-w-2 flex-1"></span>
+        }
+        @case ('button') {
+          <button
+            type="button"
+            data-slot="editor-button"
+            [class]="buttonClasses"
+            [disabled]="disabled()"
+            [attr.aria-label]="part.ariaLabel"
+            [attr.title]="part.ariaLabel"
+            (mousedown)="preserveSelection($event)"
+            (click)="execute(part.command, $event)">
+            @if (part.command === 'undo') {
+              <svg
+                aria-hidden="true"
+                class="size-4"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.75"
+                stroke-linecap="round"
+                stroke-linejoin="round">
+                <path d="M9 14 4 9l5-5" />
+                <path d="M4 9h10a6 6 0 0 1 0 12h-2" />
+              </svg>
+            } @else if (part.command === 'redo') {
+              <svg
+                aria-hidden="true"
+                class="size-4"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.75"
+                stroke-linecap="round"
+                stroke-linejoin="round">
+                <path d="m15 14 5-5-5-5" />
+                <path d="M20 9H10a6 6 0 0 0 0 12h2" />
+              </svg>
+            } @else {
+              <span aria-hidden="true">{{ part.label }}</span>
+            }
+          </button>
+        }
+      }
+    }
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EditorToolbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'EditorToolbar',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"editor-toolbar"',
+                        role: 'toolbar',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.data-disabled]': 'disabled() ? "true" : null',
+                    },
+                    template: `
+    @for (part of parts(); track trackPart(part, $index)) {
+      @switch (part.type) {
+        @case ('heading') {
+          <select
+            [class]="selectClasses"
+            [disabled]="disabled()"
+            aria-label="Text style"
+            (change)="handleSelect($event)">
+            <option value="paragraph">Text</option>
+            <option value="heading-1">Heading 1</option>
+            <option value="heading-2">Heading 2</option>
+            <option value="heading-3">Heading 3</option>
+          </select>
+        }
+        @case ('align') {
+          <select
+            [class]="selectClasses"
+            [disabled]="disabled()"
+            aria-label="Text alignment"
+            (change)="handleSelect($event)">
+            <option value="align-left">Left</option>
+            <option value="align-center">Center</option>
+            <option value="align-right">Right</option>
+          </select>
+        }
+        @case ('separator') {
+          <span
+            data-slot="editor-separator"
+            class="mx-1 h-6 w-px shrink-0 bg-border"
+            role="separator"
+            aria-orientation="vertical"></span>
+        }
+        @case ('spacer') {
+          <span data-slot="editor-spacer" class="min-w-2 flex-1"></span>
+        }
+        @case ('button') {
+          <button
+            type="button"
+            data-slot="editor-button"
+            [class]="buttonClasses"
+            [disabled]="disabled()"
+            [attr.aria-label]="part.ariaLabel"
+            [attr.title]="part.ariaLabel"
+            (mousedown)="preserveSelection($event)"
+            (click)="execute(part.command, $event)">
+            @if (part.command === 'undo') {
+              <svg
+                aria-hidden="true"
+                class="size-4"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.75"
+                stroke-linecap="round"
+                stroke-linejoin="round">
+                <path d="M9 14 4 9l5-5" />
+                <path d="M4 9h10a6 6 0 0 1 0 12h-2" />
+              </svg>
+            } @else if (part.command === 'redo') {
+              <svg
+                aria-hidden="true"
+                class="size-4"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.75"
+                stroke-linecap="round"
+                stroke-linejoin="round">
+                <path d="m15 14 5-5-5-5" />
+                <path d="M20 9H10a6 6 0 0 0 0 12h2" />
+              </svg>
+            } @else {
+              <span aria-hidden="true">{{ part.label }}</span>
+            }
+          </button>
+        }
+      }
+    }
+    <ng-content />
+  `,
+                }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class EditorButtonComponent {
+    editor = inject(EditorComponent, { optional: true });
+    command = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "command" }] : /* istanbul ignore next */ []));
+    pressed = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []));
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
+    tooltip = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.disabledInput() || this.editor?.disabled() === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(EDITOR_TOOL_BUTTON_BASE, this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    handleClick(event) {
+        const command = this.command();
+        if (!command) {
+            return;
+        }
+        this.editor?.execute(command, 'toolbar', event);
+    }
+    preserveSelection = preserveEditorSelection;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EditorButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: EditorButtonComponent, isStandalone: true, selector: "button[EditorButton]", inputs: { command: { classPropertyName: "command", publicName: "command", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "mousedown": "preserveSelection($event)", "click": "handleClick($event)" }, properties: { "class": "classes()", "attr.data-slot": "\"editor-button\"", "attr.title": "tooltip() || null", "attr.aria-pressed": "pressed() === null ? null : pressed()", "disabled": "disabled() || null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EditorButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[EditorButton]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"editor-button"',
+                        '[attr.title]': 'tooltip() || null',
+                        '[attr.aria-pressed]': 'pressed() === null ? null : pressed()',
+                        '[disabled]': 'disabled() || null',
+                        type: 'button',
+                        '(mousedown)': 'preserveSelection($event)',
+                        '(click)': 'handleClick($event)',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { command: [{ type: i0.Input, args: [{ isSignal: true, alias: "command", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class EditorSeparatorComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('mx-1 h-6 w-px shrink-0 bg-border', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EditorSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: EditorSeparatorComponent, isStandalone: true, selector: "EditorSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator", "aria-orientation": "vertical" }, properties: { "class": "classes()", "attr.data-slot": "\"editor-separator\"" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EditorSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'EditorSeparator',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"editor-separator"',
+                        role: 'separator',
+                        'aria-orientation': 'vertical',
+                    },
+                    template: '',
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class EditorSpacerComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('min-w-2 flex-1', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EditorSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: EditorSpacerComponent, isStandalone: true, selector: "EditorSpacer", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"editor-spacer\"" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EditorSpacerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'EditorSpacer',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"editor-spacer"',
+                    },
+                    template: '',
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class EditorContentComponent {
+    el = inject(ElementRef);
+    editor = inject(EditorComponent, { optional: true });
+    document = inject(DOCUMENT);
+    sanitizer = inject(DomSanitizer);
+    placeholder = input('Write something...', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Rich text editor', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
+    invalidInput = input(false, { ...(ngDevMode ? { debugName: "invalidInput" } : /* istanbul ignore next */ {}), alias: 'aria-invalid', transform: booleanAttribute });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    disabledState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    empty = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.disabledInput() || this.disabledState() || this.editor?.disabled() === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    invalid = computed(() => this.invalidInput() || this.editor?.invalid() === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(EDITOR_CONTENT_BASE, this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    lastKnownValue = '';
+    onChange = () => { };
+    onTouched = () => { };
+    ngAfterViewInit() {
+        this.editor?.registerContent(this);
+        queueMicrotask(() => this.syncEmptyState());
+    }
+    ngOnDestroy() {
+        this.editor?.unregisterContent(this);
+    }
+    writeValue(value) {
+        this.el.nativeElement.innerHTML = this.sanitizer.sanitize(SecurityContext.HTML, value ?? '') ?? '';
+        // Read back after assignment: the browser normalizes markup, so the
+        // DOM-normalized form is the canonical value for change comparisons.
+        this.lastKnownValue = this.el.nativeElement.innerHTML;
+        queueMicrotask(() => this.syncEmptyState());
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledState.set(isDisabled);
+    }
+    execute(command) {
+        if (this.disabled()) {
+            return;
+        }
+        this.el.nativeElement.focus();
+        const [name, value] = EDITOR_EXEC_COMMANDS[command];
+        this.exec(name, command === 'highlight' ? this.highlightColor() : value);
+        this.handleInput();
+    }
+    focus() {
+        this.el.nativeElement.focus();
+    }
+    handleInput() {
+        this.syncEmptyState();
+        const html = this.el.nativeElement.innerHTML;
+        if (html === this.lastKnownValue) {
+            return;
+        }
+        this.lastKnownValue = html;
+        this.onChange(html);
+    }
+    handleBlur() {
+        this.onTouched();
+    }
+    handleKeydown(event) {
+        if (this.disabled()) {
+            return;
+        }
+        const command = this.shortcutCommand(event);
+        if (!command) {
+            return;
+        }
+        event.preventDefault();
+        if (this.editor) {
+            this.editor.execute(command, 'shortcut', event);
+            return;
+        }
+        this.execute(command);
+    }
+    exec(command, value) {
+        if (typeof this.document.execCommand !== 'function') {
+            return;
+        }
+        this.document.execCommand(command, false, value);
+    }
+    highlightColor() {
+        const highlight = this.document.defaultView
+            ?.getComputedStyle(this.document.documentElement)
+            .getPropertyValue('--editor-highlight')
+            .trim();
+        return highlight ? `hsl(${highlight})` : 'hsl(48 96% 80%)';
+    }
+    syncEmptyState() {
+        const element = this.el.nativeElement;
+        const html = element.innerHTML
+            .replace(/<br\s*\/?\>/gi, '')
+            .replace(/&nbsp;/g, '')
+            .trim();
+        const text = element.textContent?.replace(/\u00a0/g, '').trim() ?? '';
+        this.empty.set(html.length === 0 && text.length === 0);
+    }
+    shortcutCommand(event) {
+        const modifier = event.metaKey || event.ctrlKey;
+        if (!modifier) {
+            return null;
+        }
+        const key = event.key.toLowerCase();
+        if (event.altKey && !event.shiftKey) {
+            if (key === '0') {
+                return 'paragraph';
+            }
+            if (key === '1') {
+                return 'heading-1';
+            }
+            if (key === '2') {
+                return 'heading-2';
+            }
+            if (key === '3') {
+                return 'heading-3';
+            }
+        }
+        if (event.shiftKey && !event.altKey) {
+            switch (key) {
+                case 'x':
+                    return 'strike';
+                case '7':
+                    return 'ordered';
+                case '8':
+                    return 'bullet';
+                case 'b':
+                    return 'blockquote';
+                case 'h':
+                    return 'highlight';
+                case 'l':
+                    return 'align-left';
+                case 'e':
+                    return 'align-center';
+                case 'r':
+                    return 'align-right';
+                case 'z':
+                    return 'redo';
+            }
+        }
+        if (event.altKey || event.shiftKey) {
+            return null;
+        }
+        switch (key) {
+            case 'b':
+                return 'bold';
+            case 'i':
+                return 'italic';
+            case 'u':
+                return 'underline';
+            case 'e':
+                return 'code';
+            case 'z':
+                return 'undo';
+            default:
+                return null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EditorContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: EditorContentComponent, isStandalone: true, selector: "EditorContent", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "handleInput()", "blur": "handleBlur()", "keydown": "handleKeydown($event)" }, properties: { "class": "classes()", "attr.data-slot": "\"editor-content\"", "attr.contenteditable": "disabled() ? \"false\" : \"true\"", "attr.role": "\"textbox\"", "attr.aria-multiline": "\"true\"", "attr.aria-label": "ariaLabel()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-invalid": "invalid() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.data-empty": "empty() ? \"true\" : null", "attr.data-placeholder": "placeholder()", "attr.tabindex": "disabled() ? null : \"0\"" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => EditorContentComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EditorContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'EditorContent',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => EditorContentComponent),
+                            multi: true,
+                        },
+                    ],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"editor-content"',
+                        '[attr.contenteditable]': 'disabled() ? "false" : "true"',
+                        '[attr.role]': '"textbox"',
+                        '[attr.aria-multiline]': '"true"',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.aria-invalid]': 'invalid() ? "true" : null',
+                        '[attr.data-disabled]': 'disabled() ? "true" : null',
+                        '[attr.data-empty]': 'empty() ? "true" : null',
+                        '[attr.data-placeholder]': 'placeholder()',
+                        '[attr.tabindex]': 'disabled() ? null : "0"',
+                        '(input)': 'handleInput()',
+                        '(blur)': 'handleBlur()',
+                        '(keydown)': 'handleKeydown($event)',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EditorButtonComponent, EditorComponent, EditorContentComponent, EditorSeparatorComponent, EditorSpacerComponent, EditorToolbarComponent };
+//# sourceMappingURL=ojiepermana-angular-component-editor.mjs.map