@ojiepermana/angular 22.0.1 → 22.0.27

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

@@ -1,717 +0,0 @@
-import { DOCUMENT } from '@angular/common';
-import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, computed, ChangeDetectionStrategy, Component, inject, ElementRef, signal, forwardRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-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-border/70 bg-muted/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' },
-};
-const toolbarItemAliases = {
-    bold: 'bold',
-    italic: 'italic',
-    strike: 'strike',
-    underline: 'underline',
-    bullet: 'bullet',
-    ordered: 'ordered',
-    blockquote: 'blockquote',
-    subscript: 'subscript',
-    superscript: 'superscript',
-    highlight: 'highlight',
-    link: 'link',
-    code: 'code',
-    undo: 'undo',
-    redo: 'redo',
-};
-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 = toolbarItemAliases[token];
-        const button = command ? toolbarButtons[command] : undefined;
-        if (!command || !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.0", ngImport: i0, type: EditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: EditorComponent, isStandalone: true, selector: "ui-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="ui-editor-toolbar" />
-      <ng-content select="ui-editor-content" />
-    </div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EditorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ui-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="ui-editor-toolbar" />
-      <ng-content select="ui-editor-content" />
-    </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(event) {
-        event.preventDefault();
-    }
-    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.0", ngImport: i0, type: EditorToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: EditorToolbarComponent, isStandalone: true, selector: "ui-editor-toolbar", 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.0", ngImport: i0, type: EditorToolbarComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ui-editor-toolbar',
-                    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(event) {
-        event.preventDefault();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EditorButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: EditorButtonComponent, isStandalone: true, selector: "button[ui-editor-button]", 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.0", ngImport: i0, type: EditorButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'button[ui-editor-button]',
-                    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.0", ngImport: i0, type: EditorSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: EditorSeparatorComponent, isStandalone: true, selector: "ui-editor-separator", 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.0", ngImport: i0, type: EditorSeparatorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ui-editor-separator',
-                    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.0", ngImport: i0, type: EditorSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: EditorSpacerComponent, isStandalone: true, selector: "ui-editor-spacer", 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.0", ngImport: i0, type: EditorSpacerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ui-editor-spacer',
-                    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);
-    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 */ []));
-    onChange = () => { };
-    onTouched = () => { };
-    ngAfterViewInit() {
-        this.editor?.registerContent(this);
-        queueMicrotask(() => this.syncEmptyState());
-    }
-    ngOnDestroy() {
-        this.editor?.unregisterContent(this);
-    }
-    writeValue(value) {
-        this.el.nativeElement.innerHTML = value ?? '';
-        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();
-        switch (command) {
-            case 'paragraph':
-                this.exec('formatBlock', 'p');
-                break;
-            case 'heading-1':
-                this.exec('formatBlock', 'h1');
-                break;
-            case 'heading-2':
-                this.exec('formatBlock', 'h2');
-                break;
-            case 'heading-3':
-                this.exec('formatBlock', 'h3');
-                break;
-            case 'bold':
-                this.exec('bold');
-                break;
-            case 'italic':
-                this.exec('italic');
-                break;
-            case 'underline':
-                this.exec('underline');
-                break;
-            case 'strike':
-                this.exec('strikeThrough');
-                break;
-            case 'bullet':
-                this.exec('insertUnorderedList');
-                break;
-            case 'ordered':
-                this.exec('insertOrderedList');
-                break;
-            case 'blockquote':
-                this.exec('formatBlock', 'blockquote');
-                break;
-            case 'subscript':
-                this.exec('subscript');
-                break;
-            case 'superscript':
-                this.exec('superscript');
-                break;
-            case 'highlight':
-                this.exec('backColor', '#fef08a');
-                break;
-            case 'link':
-                this.exec('createLink', '#');
-                break;
-            case 'code':
-                this.exec('formatBlock', 'pre');
-                break;
-            case 'align-left':
-                this.exec('justifyLeft');
-                break;
-            case 'align-center':
-                this.exec('justifyCenter');
-                break;
-            case 'align-right':
-                this.exec('justifyRight');
-                break;
-            case 'undo':
-                this.exec('undo');
-                break;
-            case 'redo':
-                this.exec('redo');
-                break;
-        }
-        this.handleInput();
-    }
-    focus() {
-        this.el.nativeElement.focus();
-    }
-    handleInput() {
-        this.syncEmptyState();
-        this.onChange(this.el.nativeElement.innerHTML);
-    }
-    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);
-    }
-    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.0", ngImport: i0, type: EditorContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: EditorContentComponent, isStandalone: true, selector: "ui-editor-content", 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.0", ngImport: i0, type: EditorContentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ui-editor-content',
-                    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