@flogeez/angular-tiptap-editor 2.4.0 → 2.4.1

package/esm2022/lib/components/bubble-menus/text/ate-bubble-menu.component.mjs

@@ -0,0 +1,294 @@
+import { Component, input, ChangeDetectionStrategy, computed, } from "@angular/core";
+import { AteButtonComponent } from "../../ui/ate-button.component";
+import { AteColorPickerComponent } from "../../color-picker/ate-color-picker.component";
+import { AteBaseBubbleMenu } from "../base/ate-base-bubble-menu";
+import * as i0 from "@angular/core";
+export class AteBubbleMenuComponent extends AteBaseBubbleMenu {
+    constructor() {
+        super(...arguments);
+        this.t = this.i18nService.bubbleMenu;
+        this.onMouseDown = () => {
+            this.hideTippy();
+        };
+        this.config = input({
+            bold: true,
+            italic: true,
+            underline: true,
+            strike: true,
+            code: true,
+            superscript: false,
+            subscript: false,
+            highlight: true,
+            textColor: false,
+            link: true,
+            separator: true,
+        });
+        this.bubbleMenuConfig = computed(() => ({
+            bold: true,
+            italic: true,
+            underline: true,
+            strike: true,
+            code: true,
+            superscript: false,
+            subscript: false,
+            highlight: true,
+            textColor: false,
+            link: true,
+            separator: true,
+            ...this.config(),
+        }));
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        const ed = this.editor();
+        // Specialized mousedown listener for the text bubble menu:
+        // This is necessary to hide the menu immediately when clicking elsewhere,
+        // avoiding a 'jumping' effect where the menu moves to the new cursor position
+        // before the reactive state has time to hide it.
+        if (ed?.view?.dom) {
+            ed.view.dom.addEventListener("mousedown", this.onMouseDown, { capture: true });
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        const ed = this.editor();
+        if (ed?.view?.dom) {
+            ed.view.dom.removeEventListener("mousedown", this.onMouseDown, { capture: true });
+        }
+    }
+    shouldShow() {
+        const { selection, nodes, isEditable, isFocused } = this.state();
+        if (!isEditable) {
+            return false;
+        }
+        // PRIORITY: If we are editing a link or color, HIDE this main bubble menu
+        // to give full priority to the specialized sub-menus.
+        if (this.editorCommands.linkEditMode() || this.editorCommands.colorEditMode()) {
+            return false;
+        }
+        // Now we can check focus for the standard text selection menu
+        if (!isFocused) {
+            return false;
+        }
+        // Only show text bubble menu if there is a non-empty text selection
+        // and no higher-priority node (image, table) is selected.
+        return (selection.type === "text" && !selection.empty && !nodes.isImage && !nodes.isTableNodeSelected);
+    }
+    getSelectionRect() {
+        return this.getRectForSelection(this.editor());
+    }
+    executeCommand(editor, command, ...args) {
+        this.editorCommands.execute(editor, command, ...args);
+    }
+    onTippyHide() {
+        // Sub-menus now manage their own state. Clearing them here causes
+        // premature closing when clicking between 'sibling' menu instances.
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteBubbleMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AteBubbleMenuComponent, isStandalone: true, selector: "ate-bubble-menu", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
+      @if (bubbleMenuConfig().bold) {
+        <ate-button
+          icon="format_bold"
+          [title]="t().bold"
+          [active]="state().marks.bold"
+          [disabled]="!state().can.toggleBold"
+          (buttonClick)="onCommand('toggleBold', $event)"></ate-button>
+      }
+      @if (bubbleMenuConfig().italic) {
+        <ate-button
+          icon="format_italic"
+          [title]="t().italic"
+          [active]="state().marks.italic"
+          [disabled]="!state().can.toggleItalic"
+          (buttonClick)="onCommand('toggleItalic', $event)"></ate-button>
+      }
+      @if (bubbleMenuConfig().underline) {
+        <ate-button
+          icon="format_underlined"
+          [title]="t().underline"
+          [active]="state().marks.underline"
+          [disabled]="!state().can.toggleUnderline"
+          (buttonClick)="onCommand('toggleUnderline', $event)"></ate-button>
+      }
+      @if (bubbleMenuConfig().strike) {
+        <ate-button
+          icon="strikethrough_s"
+          [title]="t().strike"
+          [active]="state().marks.strike"
+          [disabled]="!state().can.toggleStrike"
+          (buttonClick)="onCommand('toggleStrike', $event)"></ate-button>
+      }
+      @if (bubbleMenuConfig().code) {
+        <ate-button
+          icon="code"
+          [title]="t().code"
+          [active]="state().marks.code"
+          [disabled]="!state().can.toggleCode"
+          (buttonClick)="onCommand('toggleCode', $event)"></ate-button>
+      }
+      @if (bubbleMenuConfig().superscript) {
+        <ate-button
+          icon="superscript"
+          [title]="t().superscript"
+          [active]="state().marks.superscript"
+          [disabled]="!state().can.toggleSuperscript"
+          (buttonClick)="onCommand('toggleSuperscript', $event)"></ate-button>
+      }
+      @if (bubbleMenuConfig().subscript) {
+        <ate-button
+          icon="subscript"
+          [title]="t().subscript"
+          [active]="state().marks.subscript"
+          [disabled]="!state().can.toggleSubscript"
+          (buttonClick)="onCommand('toggleSubscript', $event)"></ate-button>
+      }
+      @if (bubbleMenuConfig().highlight) {
+        <ate-button
+          icon="highlight"
+          [title]="t().highlight"
+          [active]="state().marks.highlight"
+          [disabled]="!state().can.toggleHighlight"
+          (buttonClick)="onCommand('toggleHighlight', $event)"></ate-button>
+      }
+      @if (bubbleMenuConfig().highlightPicker) {
+        <ate-color-picker
+          mode="highlight"
+          [editor]="editor()"
+          [disabled]="!state().can.setHighlight"
+          [anchorToText]="true" />
+      }
+      @if (bubbleMenuConfig().textColor) {
+        <ate-color-picker
+          mode="text"
+          [editor]="editor()"
+          [disabled]="!state().can.setColor"
+          [anchorToText]="true" />
+      }
+      @if (bubbleMenuConfig().link) {
+        <ate-button
+          icon="link"
+          [title]="t().link"
+          [active]="state().marks.link"
+          [disabled]="!state().can.toggleLink"
+          (buttonClick)="onCommand('toggleLink', $event)"></ate-button>
+      }
+      @if (bubbleMenuConfig().custom?.length) {
+        @for (item of bubbleMenuConfig().custom; track item.key) {
+          <ate-button
+            [icon]="item.icon"
+            [title]="item.label"
+            (buttonClick)="item.command(editor())"></ate-button>
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: AteButtonComponent, selector: "ate-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["buttonClick"] }, { kind: "component", type: AteColorPickerComponent, selector: "ate-color-picker", inputs: ["editor", "mode", "disabled", "anchorToText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteBubbleMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ate-bubble-menu",
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AteButtonComponent, AteColorPickerComponent],
+                    template: `
+    <div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
+      @if (bubbleMenuConfig().bold) {
+        <ate-button
+          icon="format_bold"
+          [title]="t().bold"
+          [active]="state().marks.bold"
+          [disabled]="!state().can.toggleBold"
+          (buttonClick)="onCommand('toggleBold', $event)"></ate-button>
+      }
+      @if (bubbleMenuConfig().italic) {
+        <ate-button
+          icon="format_italic"
+          [title]="t().italic"
+          [active]="state().marks.italic"
+          [disabled]="!state().can.toggleItalic"
+          (buttonClick)="onCommand('toggleItalic', $event)"></ate-button>
+      }
+      @if (bubbleMenuConfig().underline) {
+        <ate-button
+          icon="format_underlined"
+          [title]="t().underline"
+          [active]="state().marks.underline"
+          [disabled]="!state().can.toggleUnderline"
+          (buttonClick)="onCommand('toggleUnderline', $event)"></ate-button>
+      }
+      @if (bubbleMenuConfig().strike) {
+        <ate-button
+          icon="strikethrough_s"
+          [title]="t().strike"
+          [active]="state().marks.strike"
+          [disabled]="!state().can.toggleStrike"
+          (buttonClick)="onCommand('toggleStrike', $event)"></ate-button>
+      }
+      @if (bubbleMenuConfig().code) {
+        <ate-button
+          icon="code"
+          [title]="t().code"
+          [active]="state().marks.code"
+          [disabled]="!state().can.toggleCode"
+          (buttonClick)="onCommand('toggleCode', $event)"></ate-button>
+      }
+      @if (bubbleMenuConfig().superscript) {
+        <ate-button
+          icon="superscript"
+          [title]="t().superscript"
+          [active]="state().marks.superscript"
+          [disabled]="!state().can.toggleSuperscript"
+          (buttonClick)="onCommand('toggleSuperscript', $event)"></ate-button>
+      }
+      @if (bubbleMenuConfig().subscript) {
+        <ate-button
+          icon="subscript"
+          [title]="t().subscript"
+          [active]="state().marks.subscript"
+          [disabled]="!state().can.toggleSubscript"
+          (buttonClick)="onCommand('toggleSubscript', $event)"></ate-button>
+      }
+      @if (bubbleMenuConfig().highlight) {
+        <ate-button
+          icon="highlight"
+          [title]="t().highlight"
+          [active]="state().marks.highlight"
+          [disabled]="!state().can.toggleHighlight"
+          (buttonClick)="onCommand('toggleHighlight', $event)"></ate-button>
+      }
+      @if (bubbleMenuConfig().highlightPicker) {
+        <ate-color-picker
+          mode="highlight"
+          [editor]="editor()"
+          [disabled]="!state().can.setHighlight"
+          [anchorToText]="true" />
+      }
+      @if (bubbleMenuConfig().textColor) {
+        <ate-color-picker
+          mode="text"
+          [editor]="editor()"
+          [disabled]="!state().can.setColor"
+          [anchorToText]="true" />
+      }
+      @if (bubbleMenuConfig().link) {
+        <ate-button
+          icon="link"
+          [title]="t().link"
+          [active]="state().marks.link"
+          [disabled]="!state().can.toggleLink"
+          (buttonClick)="onCommand('toggleLink', $event)"></ate-button>
+      }
+      @if (bubbleMenuConfig().custom?.length) {
+        @for (item of bubbleMenuConfig().custom; track item.key) {
+          <ate-button
+            [icon]="item.icon"
+            [title]="item.label"
+            (buttonClick)="item.command(editor())"></ate-button>
+        }
+      }
+    </div>
+  `,
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXRlLWJ1YmJsZS1tZW51LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItdGlwdGFwLWVkaXRvci9zcmMvbGliL2NvbXBvbmVudHMvYnViYmxlLW1lbnVzL3RleHQvYXRlLWJ1YmJsZS1tZW51LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULEtBQUssRUFDTCx1QkFBdUIsRUFDdkIsUUFBUSxHQUdULE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQ25FLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLCtDQUErQyxDQUFDO0FBRXhGLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDhCQUE4QixDQUFDOztBQTBHakUsTUFBTSxPQUFPLHNCQUF1QixTQUFRLGlCQUFpQjtJQXhHN0Q7O1FBeUdXLE1BQUMsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLFVBQVUsQ0FBQztRQXNCakMsZ0JBQVcsR0FBRyxHQUFHLEVBQUU7WUFDekIsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ25CLENBQUMsQ0FBQztRQUVGLFdBQU0sR0FBRyxLQUFLLENBQXNCO1lBQ2xDLElBQUksRUFBRSxJQUFJO1lBQ1YsTUFBTSxFQUFFLElBQUk7WUFDWixTQUFTLEVBQUUsSUFBSTtZQUNmLE1BQU0sRUFBRSxJQUFJO1lBQ1osSUFBSSxFQUFFLElBQUk7WUFDVixXQUFXLEVBQUUsS0FBSztZQUNsQixTQUFTLEVBQUUsS0FBSztZQUNoQixTQUFTLEVBQUUsSUFBSTtZQUNmLFNBQVMsRUFBRSxLQUFLO1lBQ2hCLElBQUksRUFBRSxJQUFJO1lBQ1YsU0FBUyxFQUFFLElBQUk7U0FDaEIsQ0FBQyxDQUFDO1FBRUgscUJBQWdCLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxD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Ozs7Ozs7Ozs7Ozs7O0dBaUdULDREQWxHUyxrQkFBa0IsNkxBQUUsdUJBQXVCOzs0RkFvRzFDLHNCQUFzQjtrQkF4R2xDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGlCQUFpQjtvQkFDM0IsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO29CQUMvQyxPQUFPLEVBQUUsQ0FBQyxrQkFBa0IsRUFBRSx1QkFBdUIsQ0FBQztvQkFDdEQsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBaUdUO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBpbnB1dCxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIGNvbXB1dGVkLFxuICBPbkluaXQsXG4gIE9uRGVzdHJveSxcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IHR5cGUgRWRpdG9yIH0gZnJvbSBcIkB0aXB0YXAvY29yZVwiO1xuaW1wb3J0IHsgQXRlQnV0dG9uQ29tcG9uZW50IH0gZnJvbSBcIi4uLy4uL3VpL2F0ZS1idXR0b24uY29tcG9uZW50XCI7XG5pbXBvcnQgeyBBdGVDb2xvclBpY2tlckNvbXBvbmVudCB9IGZyb20gXCIuLi8uLi9jb2xvci1waWNrZXIvYXRlLWNvbG9yLXBpY2tlci5jb21wb25lbnRcIjtcbmltcG9ydCB7IEF0ZUJ1YmJsZU1lbnVDb25maWcgfSBmcm9tIFwiLi4vLi4vLi4vbW9kZWxzL2F0ZS1idWJibGUtbWVudS5tb2RlbFwiO1xuaW1wb3J0IHsgQXRlQmFzZUJ1YmJsZU1lbnUgfSBmcm9tIFwiLi4vYmFzZS9hdGUtYmFzZS1idWJibGUtbWVudVwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwiYXRlLWJ1YmJsZS1tZW51XCIsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBpbXBvcnRzOiBbQXRlQnV0dG9uQ29tcG9uZW50LCBBdGVDb2xvclBpY2tlckNvbXBvbmVudF0sXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdiAjbWVudVJlZiBjbGFzcz1cImJ1YmJsZS1tZW51XCIgKG1vdXNlZG93bik9XCIkZXZlbnQucHJldmVudERlZmF1bHQoKVwiPlxuICAgICAgQGlmIChidWJibGVNZW51Q29uZmlnKCkuYm9sZCkge1xuICAgICAgICA8YXRlLWJ1dHRvblxuICAgICAgICAgIGljb249XCJmb3JtYXRfYm9sZFwiXG4gICAgICAgICAgW3RpdGxlXT1cInQoKS5ib2xkXCJcbiAgICAgICAgICBbYWN0aXZlXT1cInN0YXRlKCkubWFya3MuYm9sZFwiXG4gICAgICAgICAgW2Rpc2FibGVkXT1cIiFzdGF0ZSgpLmNhbi50b2dnbGVCb2xkXCJcbiAgICAgICAgICAoYnV0dG9uQ2xpY2spPVwib25Db21tYW5kKCd0b2dnbGVCb2xkJywgJGV2ZW50KVwiPjwvYXRlLWJ1dHRvbj5cbiAgICAgIH1cbiAgICAgIEBpZiAoYnViYmxlTWVudUNvbmZpZygpLml0YWxpYykge1xuICAgICAgICA8YXRlLWJ1dHRvblxuICAgICAgICAgIGljb249XCJmb3JtYXRfaXRhbGljXCJcbiAgICAgICAgICBbdGl0bGVdPVwidCgpLml0YWxpY1wiXG4gICAgICAgICAgW2FjdGl2ZV09XCJzdGF0ZSgpLm1hcmtzLml0YWxpY1wiXG4gICAgICAgICAgW2Rpc2FibGVkXT1cIiFzdGF0ZSgpLmNhbi50b2dnbGVJdGFsaWNcIlxuICAgICAgICAgIChidXR0b25DbGljayk9XCJvbkNvbW1hbmQoJ3RvZ2dsZUl0YWxpYycsICRldmVudClcIj48L2F0ZS1idXR0b24+XG4gICAgICB9XG4gICAgICBAaWYgKGJ1YmJsZU1lbnVDb25maWcoKS51bmRlcmxpbmUpIHtcbiAgICAgICAgPGF0ZS1idXR0b25cbiAgICAgICAgICBpY29uPVwiZm9ybWF0X3VuZGVybGluZWRcIlxuICAgICAgICAgIFt0aXRsZV09XCJ0KCkudW5kZXJsaW5lXCJcbiAgICAgICAgICBbYWN0aXZlXT1cInN0YXRlKCkubWFya3MudW5kZXJsaW5lXCJcbiAgICAgICAgICBbZGlzYWJsZWRdPVwiIXN0YXRlKCkuY2FuLnRvZ2dsZVVuZGVybGluZVwiXG4gICAgICAgICAgKGJ1dHRvbkNsaWNrKT1cIm9uQ29tbWFuZCgndG9nZ2xlVW5kZXJsaW5lJywgJGV2ZW50KVwiPjwvYXRlLWJ1dHRvbj5cbiAgICAgIH1cbiAgICAgIEBpZiAoYnViYmxlTWVudUNvbmZpZygpLnN0cmlrZSkge1xuICAgICAgICA8YXRlLWJ1dHRvblxuICAgICAgICAgIGljb249XCJzdHJpa2V0aHJvdWdoX3NcIlxuICAgICAgICAgIFt0aXRsZV09XCJ0KCkuc3RyaWtlXCJcbiAgICAgICAgICBbYWN0aXZlXT1cInN0YXRlKCkubWFya3Muc3RyaWtlXCJcbiAgICAgICAgICBbZGlzYWJsZWRdPVwiIXN0YXRlKCkuY2FuLnRvZ2dsZVN0cmlrZVwiXG4gICAgICAgICAgKGJ1dHRvbkNsaWNrKT1cIm9uQ29tbWFuZCgndG9nZ2xlU3RyaWtlJywgJGV2ZW50KVwiPjwvYXRlLWJ1dHRvbj5cbiAgICAgIH1cbiAgICAgIEBpZiAoYnViYmxlTWVudUNvbmZpZygpLmNvZGUpIHtcbiAgICAgICAgPGF0ZS1idXR0b25cbiAgICAgICAgICBpY29uPVwiY29kZVwiXG4gICAgICAgICAgW3RpdGxlXT1cInQoKS5jb2RlXCJcbiAgICAgICAgICBbYWN0aXZlXT1cInN0YXRlKCkubWFya3MuY29kZVwiXG4gICAgICAgICAgW2Rpc2FibGVkXT1cIiFzdGF0ZSgpLmNhbi50b2dnbGVDb2RlXCJcbiAgICAgICAgICAoYnV0dG9uQ2xpY2spPVwib25Db21tYW5kKCd0b2dnbGVDb2RlJywgJGV2ZW50KVwiPjwvYXRlLWJ1dHRvbj5cbiAgICAgIH1cbiAgICAgIEBpZiAoYnViYmxlTWVudUNvbmZpZygpLnN1cGVyc2NyaXB0KSB7XG4gICAgICAgIDxhdGUtYnV0dG9uXG4gICAgICAgICAgaWNvbj1cInN1cGVyc2NyaXB0XCJcbiAgICAgICAgICBbdGl0bGVdPVwidCgpLnN1cGVyc2NyaXB0XCJcbiAgICAgICAgICBbYWN0aXZlXT1cInN0YXRlKCkubWFya3Muc3VwZXJzY3JpcHRcIlxuICAgICAgICAgIFtkaXNhYmxlZF09XCIhc3RhdGUoKS5jYW4udG9nZ2xlU3VwZXJzY3JpcHRcIlxuICAgICAgICAgIChidXR0b25DbGljayk9XCJvbkNvbW1hbmQoJ3RvZ2dsZVN1cGVyc2NyaXB0JywgJGV2ZW50KVwiPjwvYXRlLWJ1dHRvbj5cbiAgICAgIH1cbiAgICAgIEBpZiAoYnViYmxlTWVudUNvbmZpZygpLnN1YnNjcmlwdCkge1xuICAgICAgICA8YXRlLWJ1dHRvblxuICAgICAgICAgIGljb249XCJzdWJzY3JpcHRcIlxuICAgICAgICAgIFt0aXRsZV09XCJ0KCkuc3Vic2NyaXB0XCJcbiAgICAgICAgICBbYWN0aXZlXT1cInN0YXRlKCkubWFya3Muc3Vic2NyaXB0XCJcbiAgICAgICAgICBbZGlzYWJsZWRdPVwiIXN0YXRlKCkuY2FuLnRvZ2dsZVN1YnNjcmlwdFwiXG4gICAgICAgICAgKGJ1dHRvbkNsaWNrKT1cIm9uQ29tbWFuZCgndG9nZ2xlU3Vic2NyaXB0JywgJGV2ZW50KVwiPjwvYXRlLWJ1dHRvbj5cbiAgICAgIH1cbiAgICAgIEBpZiAoYnViYmxlTWVudUNvbmZpZygpLmhpZ2hsaWdodCkge1xuICAgICAgICA8YXRlLWJ1dHRvblxuICAgICAgICAgIGljb249XCJoaWdobGlnaHRcIlxuICAgICAgICAgIFt0aXRsZV09XCJ0KCkuaGlnaGxpZ2h0XCJcbiAgICAgICAgICBbYWN0aXZlXT1cInN0YXRlKCkubWFya3MuaGlnaGxpZ2h0XCJcbiAgICAgICAgICBbZGlzYWJsZWRdPVwiIXN0YXRlKCkuY2FuLnRvZ2dsZUhpZ2hsaWdodFwiXG4gICAgICAgICAgKGJ1dHRvbkNsaWNrKT1cIm9uQ29tbWFuZCgndG9nZ2xlSGlnaGxpZ2h0JywgJGV2ZW50KVwiPjwvYXRlLWJ1dHRvbj5cbiAgICAgIH1cbiAgICAgIEBpZiAoYnViYmxlTWVudUNvbmZpZygpLmhpZ2hsaWdodFBpY2tlcikge1xuICAgICAgICA8YXRlLWNvbG9yLXBpY2tlclxuICAgICAgICAgIG1vZGU9XCJoaWdobGlnaHRcIlxuICAgICAgICAgIFtlZGl0b3JdPVwiZWRpdG9yKClcIlxuICAgICAgICAgIFtkaXNhYmxlZF09XCIhc3RhdGUoKS5jYW4uc2V0SGlnaGxpZ2h0XCJcbiAgICAgICAgICBbYW5jaG9yVG9UZXh0XT1cInRydWVcIiAvPlxuICAgICAgfVxuICAgICAgQGlmIChidWJibGVNZW51Q29uZmlnKCkudGV4dENvbG9yKSB7XG4gICAgICAgIDxhdGUtY29sb3ItcGlja2VyXG4gICAgICAgICAgbW9kZT1cInRleHRcIlxuICAgICAgICAgIFtlZGl0b3JdPVwiZWRpdG9yKClcIlxuICAgICAgICAgIFtkaXNhYmxlZF09XCIhc3RhdGUoKS5jYW4uc2V0Q29sb3JcIlxuICAgICAgICAgIFthbmNob3JUb1RleHRdPVwidHJ1ZVwiIC8+XG4gICAgICB9XG4gICAgICBAaWYgKGJ1YmJsZU1lbnVDb25maWcoKS5saW5rKSB7XG4gICAgICAgIDxhdGUtYnV0dG9uXG4gICAgICAgICAgaWNvbj1cImxpbmtcIlxuICAgICAgICAgIFt0aXRsZV09XCJ0KCkubGlua1wiXG4gICAgICAgICAgW2FjdGl2ZV09XCJzdGF0ZSgpLm1hcmtzLmxpbmtcIlxuICAgICAgICAgIFtkaXNhYmxlZF09XCIhc3RhdGUoKS5jYW4udG9nZ2xlTGlua1wiXG4gICAgICAgICAgKGJ1dHRvbkNsaWNrKT1cIm9uQ29tbWFuZCgndG9nZ2xlTGluaycsICRldmVudClcIj48L2F0ZS1idXR0b24+XG4gICAgICB9XG4gICAgICBAaWYgKGJ1YmJsZU1lbnVDb25maWcoKS5jdXN0b20/Lmxlbmd0aCkge1xuICAgICAgICBAZm9yIChpdGVtIG9mIGJ1YmJsZU1lbnVDb25maWcoKS5jdXN0b207IHRyYWNrIGl0ZW0ua2V5KSB7XG4gICAgICAgICAgPGF0ZS1idXR0b25cbiAgICAgICAgICAgIFtpY29uXT1cIml0ZW0uaWNvblwiXG4gICAgICAgICAgICBbdGl0bGVdPVwiaXRlbS5sYWJlbFwiXG4gICAgICAgICAgICAoYnV0dG9uQ2xpY2spPVwiaXRlbS5jb21tYW5kKGVkaXRvcigpKVwiPjwvYXRlLWJ1dHRvbj5cbiAgICAgICAgfVxuICAgICAgfVxuICAgIDwvZGl2PlxuICBgLFxufSlcbmV4cG9ydCBjbGFzcyBBdGVCdWJibGVNZW51Q29tcG9uZW50IGV4dGVuZHMgQXRlQmFzZUJ1YmJsZU1lbnUgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gIHJlYWRvbmx5IHQgPSB0aGlzLmkxOG5TZXJ2aWNlLmJ1YmJsZU1lbnU7XG5cbiAgb3ZlcnJpZGUgbmdPbkluaXQoKSB7XG4gICAgc3VwZXIubmdPbkluaXQoKTtcbiAgICBjb25zdCBlZCA9IHRoaXMuZWRpdG9yKCk7XG4gICAgLy8gU3BlY2lhbGl6ZWQgbW91c2Vkb3duIGxpc3RlbmVyIGZvciB0aGUgdGV4dCBidWJibGUgbWVudTpcbiAgICAvLyBUaGlzIGlzIG5lY2Vzc2FyeSB0byBoaWRlIHRoZSBtZW51IGltbWVkaWF0ZWx5IHdoZW4gY2xpY2tpbmcgZWxzZXdoZXJlLFxuICAgIC8vIGF2b2lkaW5nIGEgJ2p1bXBpbmcnIGVmZmVjdCB3aGVyZSB0aGUgbWVudSBtb3ZlcyB0byB0aGUgbmV3IGN1cnNvciBwb3NpdGlvblxuICAgIC8vIGJlZm9yZSB0aGUgcmVhY3RpdmUgc3RhdGUgaGFzIHRpbWUgdG8gaGlkZSBpdC5cbiAgICBpZiAoZWQ/LnZpZXc/LmRvbSkge1xuICAgICAgZWQudmlldy5kb20uYWRkRXZlbnRMaXN0ZW5lcihcIm1vdXNlZG93blwiLCB0aGlzLm9uTW91c2VEb3duLCB7IGNhcHR1cmU6IHRydWUgfSk7XG4gICAgfVxuICB9XG5cbiAgb3ZlcnJpZGUgbmdPbkRlc3Ryb3koKSB7XG4gICAgc3VwZXIubmdPbkRlc3Ryb3koKTtcbiAgICBjb25zdCBlZCA9IHRoaXMuZWRpdG9yKCk7XG4gICAgaWYgKGVkPy52aWV3Py5kb20pIHtcbiAgICAgIGVkLnZpZXcuZG9tLnJlbW92ZUV2ZW50TGlzdGVuZXIoXCJtb3VzZWRvd25cIiwgdGhpcy5vbk1vdXNlRG93biwgeyBjYXB0dXJlOiB0cnVlIH0pO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgb25Nb3VzZURvd24gPSAoKSA9PiB7XG4gICAgdGhpcy5oaWRlVGlwcHkoKTtcbiAgfTtcblxuICBjb25maWcgPSBpbnB1dDxBdGVCdWJibGVNZW51Q29uZmlnPih7XG4gICAgYm9sZDogdHJ1ZSxcbiAgICBpdGFsaWM6IHRydWUsXG4gICAgdW5kZXJsaW5lOiB0cnVlLFxuICAgIHN0cmlrZTogdHJ1ZSxcbiAgICBjb2RlOiB0cnVlLFxuICAgIHN1cGVyc2NyaXB0OiBmYWxzZSxcbiAgICBzdWJzY3JpcHQ6IGZhbHNlLFxuICAgIGhpZ2hsaWdodDogdHJ1ZSxcbiAgICB0ZXh0Q29sb3I6IGZhbHNlLFxuICAgIGxpbms6IHRydWUsXG4gICAgc2VwYXJhdG9yOiB0cnVlLFxuICB9KTtcblxuICBidWJibGVNZW51Q29uZmlnID0gY29tcHV0ZWQoKCkgPT4gKHtcbiAgICBib2xkOiB0cnVlLFxuICAgIGl0YWxpYzogdHJ1ZSxcbiAgICB1bmRlcmxpbmU6IHRydWUsXG4gICAgc3RyaWtlOiB0cnVlLFxuICAgIGNvZGU6IHRydWUsXG4gICAgc3VwZXJzY3JpcHQ6IGZhbHNlLFxuICAgIHN1YnNjcmlwdDogZmFsc2UsXG4gICAgaGlnaGxpZ2h0OiB0cnVlLFxuICAgIHRleHRDb2xvcjogZmFsc2UsXG4gICAgbGluazogdHJ1ZSxcbiAgICBzZXBhcmF0b3I6IHRydWUsXG4gICAgLi4udGhpcy5jb25maWcoKSxcbiAgfSkpO1xuXG4gIG92ZXJyaWRlIHNob3VsZFNob3coKTogYm9vbGVhbiB7XG4gICAgY29uc3QgeyBzZWxlY3Rpb24sIG5vZGVzLCBpc0VkaXRhYmxlLCBpc0ZvY3VzZWQgfSA9IHRoaXMuc3RhdGUoKTtcblxuICAgIGlmICghaXNFZGl0YWJsZSkge1xuICAgICAgcmV0dXJuIGZhbHNlO1xuICAgIH1cblxuICAgIC8vIFBSSU9SSVRZOiBJZiB3ZSBhcmUgZWRpdGluZyBhIGxpbmsgb3IgY29sb3IsIEhJREUgdGhpcyBtYWluIGJ1YmJsZSBtZW51XG4gICAgLy8gdG8gZ2l2ZSBmdWxsIHByaW9yaXR5IHRvIHRoZSBzcGVjaWFsaXplZCBzdWItbWVudXMuXG4gICAgaWYgKHRoaXMuZWRpdG9yQ29tbWFuZHMubGlua0VkaXRNb2RlKCkgfHwgdGhpcy5lZGl0b3JDb21tYW5kcy5jb2xvckVkaXRNb2RlKCkpIHtcbiAgICAgIHJldHVybiBmYWxzZTtcbiAgICB9XG5cbiAgICAvLyBOb3cgd2UgY2FuIGNoZWNrIGZvY3VzIGZvciB0aGUgc3RhbmRhcmQgdGV4dCBzZWxlY3Rpb24gbWVudVxuICAgIGlmICghaXNGb2N1c2VkKSB7XG4gICAgICByZXR1cm4gZmFsc2U7XG4gICAgfVxuXG4gICAgLy8gT25seSBzaG93IHRleHQgYnViYmxlIG1lbnUgaWYgdGhlcmUgaXMgYSBub24tZW1wdHkgdGV4dCBzZWxlY3Rpb25cbiAgICAvLyBhbmQgbm8gaGlnaGVyLXByaW9yaXR5IG5vZGUgKGltYWdlLCB0YWJsZSkgaXMgc2VsZWN0ZWQuXG4gICAgcmV0dXJuIChcbiAgICAgIHNlbGVjdGlvbi50eXBlID09PSBcInRleHRcIiAmJiAhc2VsZWN0aW9uLmVtcHR5ICYmICFub2Rlcy5pc0ltYWdlICYmICFub2Rlcy5pc1RhYmxlTm9kZVNlbGVjdGVkXG4gICAgKTtcbiAgfVxuXG4gIG92ZXJyaWRlIGdldFNlbGVjdGlvblJlY3QoKTogRE9NUmVjdCB7XG4gICAgcmV0dXJuIHRoaXMuZ2V0UmVjdEZvclNlbGVjdGlvbih0aGlzLmVkaXRvcigpKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSBleGVjdXRlQ29tbWFuZChlZGl0b3I6IEVkaXRvciwgY29tbWFuZDogc3RyaW5nLCAuLi5hcmdzOiB1bmtub3duW10pOiB2b2lkIHtcbiAgICB0aGlzLmVkaXRvckNvbW1hbmRzLmV4ZWN1dGUoZWRpdG9yLCBjb21tYW5kLCAuLi5hcmdzKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSBvblRpcHB5SGlkZSgpIHtcbiAgICAvLyBTdWItbWVudXMgbm93IG1hbmFnZSB0aGVpciBvd24gc3RhdGUuIENsZWFyaW5nIHRoZW0gaGVyZSBjYXVzZXNcbiAgICAvLyBwcmVtYXR1cmUgY2xvc2luZyB3aGVuIGNsaWNraW5nIGJldHdlZW4gJ3NpYmxpbmcnIG1lbnUgaW5zdGFuY2VzLlxuICB9XG59XG4iXX0=

package/esm2022/lib/components/color-picker/ate-color-picker.component.mjs

@@ -0,0 +1,122 @@
+import { Component, computed, inject, input, ChangeDetectionStrategy } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { AteColorPickerService } from "../../services/ate-color-picker.service";
+import { AteButtonComponent } from "../ui/ate-button.component";
+import { AteI18nService } from "../../services/ate-i18n.service";
+import { AteEditorCommandsService } from "../../services/ate-editor-commands.service";
+import * as i0 from "@angular/core";
+export class AteColorPickerComponent {
+    constructor() {
+        this.editor = input.required();
+        this.mode = input("text");
+        this.disabled = input(false);
+        this.anchorToText = input(false);
+        this.colorPickerSvc = inject(AteColorPickerService);
+        this.i18nService = inject(AteI18nService);
+        this.editorCommands = inject(AteEditorCommandsService);
+        this.t = this.i18nService.toolbar;
+        this.state = this.editorCommands.editorState;
+        this.currentColor = computed(() => {
+            const marks = this.state().marks;
+            const color = this.mode() === "text" ? marks.computedColor : marks.computedBackground;
+            return color || (this.mode() === "text" ? "#000000" : "#ffff00");
+        });
+        this.hasColorApplied = computed(() => {
+            const marks = this.state().marks;
+            return (this.mode() === "text" ? marks.color : marks.background) !== null;
+        });
+        this.buttonIcon = computed(() => {
+            return this.mode() === "text" ? "format_color_text" : "format_color_fill";
+        });
+        this.buttonBgColor = computed(() => {
+            const color = this.currentColor();
+            if (this.mode() === "highlight") {
+                return this.hasColorApplied() ? color : "";
+            }
+            // For text mode, add contrast background if current color is too light
+            if (this.colorPickerSvc.getLuminance(color) > 200) {
+                return "#030617";
+            }
+            return "";
+        });
+        this.buttonTextColor = computed(() => {
+            const color = this.currentColor();
+            if (this.mode() === "text") {
+                return color;
+            }
+            if (this.hasColorApplied()) {
+                return this.colorPickerSvc.getLuminance(color) > 128 ? "#000000" : "#ffffff";
+            }
+            return "var(--ate-text-secondary)";
+        });
+    }
+    onToggle(event) {
+        // If anchorToText is true, we don't pass the event so it defaults to text selection anchoring
+        this.colorPickerSvc.toggle(this.editor(), this.mode(), this.anchorToText() ? undefined : event);
+    }
+    onClear(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const editor = this.editor();
+        if (this.mode() === "text") {
+            this.colorPickerSvc.unsetColor(editor);
+        }
+        else {
+            this.colorPickerSvc.unsetHighlight(editor);
+        }
+        this.colorPickerSvc.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AteColorPickerComponent, isStandalone: true, selector: "ate-color-picker", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, anchorToText: { classPropertyName: "anchorToText", publicName: "anchorToText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="color-picker-wrapper">
+      <div class="color-picker-container" [class.is-highlight]="mode() === 'highlight'">
+        <ate-button
+          [icon]="buttonIcon()"
+          [title]="mode() === 'text' ? t().textColor : t().highlight"
+          [color]="buttonTextColor()"
+          [backgroundColor]="buttonBgColor()"
+          [disabled]="disabled() || !state().isEditable"
+          (buttonClick)="onToggle($event)" />
+
+        @if (hasColorApplied()) {
+          <button
+            class="btn-clear-badge"
+            type="button"
+            [title]="t().clear"
+            [attr.aria-label]="t().clear"
+            (click)="onClear($event)">
+            <span class="material-symbols-outlined">close</span>
+          </button>
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: [".color-picker-wrapper{position:relative;display:inline-block}.color-picker-container{position:relative;display:inline-flex;align-items:center}.btn-clear-badge{position:absolute;top:-4px;right:-4px;width:14px;height:14px;padding:0;border:none;border-radius:999px;background:#0f172abf;color:#fff;display:flex;align-items:center;justify-content:center;z-index:10;opacity:0;pointer-events:none;transition:opacity .12s ease}.color-picker-container:hover .btn-clear-badge{opacity:1;pointer-events:auto}.btn-clear-badge .material-symbols-outlined{font-size:10px;line-height:1}\n"], dependencies: [{ kind: "component", type: AteButtonComponent, selector: "ate-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "ate-color-picker", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AteButtonComponent, CommonModule], template: `
+    <div class="color-picker-wrapper">
+      <div class="color-picker-container" [class.is-highlight]="mode() === 'highlight'">
+        <ate-button
+          [icon]="buttonIcon()"
+          [title]="mode() === 'text' ? t().textColor : t().highlight"
+          [color]="buttonTextColor()"
+          [backgroundColor]="buttonBgColor()"
+          [disabled]="disabled() || !state().isEditable"
+          (buttonClick)="onToggle($event)" />
+
+        @if (hasColorApplied()) {
+          <button
+            class="btn-clear-badge"
+            type="button"
+            [title]="t().clear"
+            [attr.aria-label]="t().clear"
+            (click)="onClear($event)">
+            <span class="material-symbols-outlined">close</span>
+          </button>
+        }
+      </div>
+    </div>
+  `, styles: [".color-picker-wrapper{position:relative;display:inline-block}.color-picker-container{position:relative;display:inline-flex;align-items:center}.btn-clear-badge{position:absolute;top:-4px;right:-4px;width:14px;height:14px;padding:0;border:none;border-radius:999px;background:#0f172abf;color:#fff;display:flex;align-items:center;justify-content:center;z-index:10;opacity:0;pointer-events:none;transition:opacity .12s ease}.color-picker-container:hover .btn-clear-badge{opacity:1;pointer-events:auto}.btn-clear-badge .material-symbols-outlined{font-size:10px;line-height:1}\n"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXRlLWNvbG9yLXBpY2tlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLXRpcHRhcC1lZGl0b3Ivc3JjL2xpYi9jb21wb25lbnRzL2NvbG9yLXBpY2tlci9hdGUtY29sb3ItcGlja2VyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzVGLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUUvQyxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQztBQUNoRixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNoRSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDakUsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sNENBQTRDLENBQUM7O0FBOEV0RixNQUFNLE9BQU8sdUJBQXVCO0lBMUVwQztRQTJFRSxXQUFNLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBVSxDQUFDO1FBQ2xDLFNBQUksR0FBRyxLQUFLLENBQWtCLE1BQU0sQ0FBQyxDQUFDO1FBQ3RDLGFBQVEsR0FBRyxLQUFLLENBQVUsS0FBSyxDQUFDLENBQUM7UUFDakMsaUJBQVksR0FBRyxLQUFLLENBQVUsS0FBSyxDQUFDLENBQUM7UUFFN0IsbUJBQWMsR0FBRyxNQUFNLENBQUMscUJBQXFCLENBQUMsQ0FBQztRQUMvQyxnQkFBVyxHQUFHLE1BQU0sQ0FBQyxjQUFjLENBQUMsQ0FBQztRQUNyQyxtQkFBYyxHQUFHLE1BQU0sQ0FBQyx3QkFBd0IsQ0FBQyxDQUFDO1FBRWpELE1BQUMsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLE9BQU8sQ0FBQztRQUM3QixV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LE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUM3QixJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUUsS0FBSyxNQUFNLEVBQUUsQ0FBQztZQUMzQixJQUFJLENBQUMsY0FBYyxDQUFDLFVBQVUsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUN6QyxDQUFDO2FBQU0sQ0FBQztZQUNOLElBQUksQ0FBQyxjQUFjLENBQUMsY0FBYyxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQzdDLENBQUM7UUFFRCxJQUFJLENBQUMsY0FBYyxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQzlCLENBQUM7K0dBcEVVLHVCQUF1QjttR0FBdkIsdUJBQXVCLHFsQkFyRXhCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXVCVCxxb0JBeEJTLGtCQUFrQiw0TEFBRSxZQUFZOzs0RkFzRS9CLHVCQUF1QjtrQkExRW5DLFNBQVM7K0JBQ0Usa0JBQWtCLGNBQ2hCLElBQUksbUJBQ0MsdUJBQXVCLENBQUMsTUFBTSxXQUN0QyxDQUFDLGtCQUFrQixFQUFFLFlBQVksQ0FBQyxZQUNqQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F1QlQiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIGNvbXB1dGVkLCBpbmplY3QsIGlucHV0LCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XG5pbXBvcnQgdHlwZSB7IEVkaXRvciB9IGZyb20gXCJAdGlwdGFwL2NvcmVcIjtcbmltcG9ydCB7IEF0ZUNvbG9yUGlja2VyU2VydmljZSB9IGZyb20gXCIuLi8uLi9zZXJ2aWNlcy9hdGUtY29sb3ItcGlja2VyLnNlcnZpY2VcIjtcbmltcG9ydCB7IEF0ZUJ1dHRvbkNvbXBvbmVudCB9IGZyb20gXCIuLi91aS9hdGUtYnV0dG9uLmNvbXBvbmVudFwiO1xuaW1wb3J0IHsgQXRlSTE4blNlcnZpY2UgfSBmcm9tIFwiLi4vLi4vc2VydmljZXMvYXRlLWkxOG4uc2VydmljZVwiO1xuaW1wb3J0IHsgQXRlRWRpdG9yQ29tbWFuZHNTZXJ2aWNlIH0gZnJvbSBcIi4uLy4uL3NlcnZpY2VzL2F0ZS1lZGl0b3ItY29tbWFuZHMuc2VydmljZVwiO1xuXG5leHBvcnQgdHlwZSBDb2xvclBpY2tlck1vZGUgPSBcInRleHRcIiB8IFwiaGlnaGxpZ2h0XCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJhdGUtY29sb3ItcGlja2VyXCIsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBpbXBvcnRzOiBbQXRlQnV0dG9uQ29tcG9uZW50LCBDb21tb25Nb2R1bGVdLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgY2xhc3M9XCJjb2xvci1waWNrZXItd3JhcHBlclwiPlxuICAgICAgPGRpdiBjbGFzcz1cImNvbG9yLXBpY2tlci1jb250YWluZXJcIiBbY2xhc3MuaXMtaGlnaGxpZ2h0XT1cIm1vZGUoKSA9PT0gJ2hpZ2hsaWdodCdcIj5cbiAgICAgICAgPGF0ZS1idXR0b25cbiAgICAgICAgICBbaWNvbl09XCJidXR0b25JY29uKClcIlxuICAgICAgICAgIFt0aXRsZV09XCJtb2RlKCkgPT09ICd0ZXh0JyA/IHQoKS50ZXh0Q29sb3IgOiB0KCkuaGlnaGxpZ2h0XCJcbiAgICAgICAgICBbY29sb3JdPVwiYnV0dG9uVGV4dENvbG9yKClcIlxuICAgICAgICAgIFtiYWNrZ3JvdW5kQ29sb3JdPVwiYnV0dG9uQmdDb2xvcigpXCJcbiAgICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWQoKSB8fCAhc3RhdGUoKS5pc0VkaXRhYmxlXCJcbiAgICAgICAgICAoYnV0dG9uQ2xpY2spPVwib25Ub2dnbGUoJGV2ZW50KVwiIC8+XG5cbiAgICAgICAgQGlmIChoYXNDb2xvckFwcGxpZWQoKSkge1xuICAgICAgICAgIDxidXR0b25cbiAgICAgICAgICAgIGNsYXNzPVwiYnRuLWNsZWFyLWJhZGdlXCJcbiAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICAgW3RpdGxlXT1cInQoKS5jbGVhclwiXG4gICAgICAgICAgICBbYXR0ci5hcmlhLWxhYmVsXT1cInQoKS5jbGVhclwiXG4gICAgICAgICAgICAoY2xpY2spPVwib25DbGVhcigkZXZlbnQpXCI+XG4gICAgICAgICAgICA8c3BhbiBjbGFzcz1cIm1hdGVyaWFsLXN5bWJvbHMtb3V0bGluZWRcIj5jbG9zZTwvc3Bhbj5cbiAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgfVxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgICAgIC5jb2xvci1waWNrZXItd3JhcHBlciB7XG4gICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgICAgfVxuXG4gICAgICAuY29sb3ItcGlja2VyLWNvbnRhaW5lciB7XG4gICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICB9XG5cbiAgICAgIC5idG4tY2xlYXItYmFkZ2Uge1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIHRvcDogLTRweDtcbiAgICAgICAgcmlnaHQ6IC00cHg7XG4gICAgICAgIHdpZHRoOiAxNHB4O1xuICAgICAgICBoZWlnaHQ6IDE0cHg7XG4gICAgICAgIHBhZGRpbmc6IDA7XG4gICAgICAgIGJvcmRlcjogbm9uZTtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogOTk5cHg7XG4gICAgICAgIGJhY2tncm91bmQ6IHJnYmEoMTUsIDIzLCA0MiwgMC43NSk7XG4gICAgICAgIGNvbG9yOiAjZmZmZmZmO1xuICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICAgICAgei1pbmRleDogMTA7XG4gICAgICAgIG9wYWNpdHk6IDA7XG4gICAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgICAgICB0cmFuc2l0aW9uOiBvcGFjaXR5IDEyMG1zIGVhc2U7XG4gICAgICB9XG5cbiAgICAgIC5jb2xvci1waWNrZXItY29udGFpbmVyOmhvdmVyIC5idG4tY2xlYXItYmFkZ2Uge1xuICAgICAgICBvcGFjaXR5OiAxO1xuICAgICAgICBwb2ludGVyLWV2ZW50czogYXV0bztcbiAgICAgIH1cblxuICAgICAgLmJ0bi1jbGVhci1iYWRnZSAubWF0ZXJpYWwtc3ltYm9scy1vdXRsaW5lZCB7XG4gICAgICAgIGZvbnQtc2l6ZTogMTBweDtcbiAgICAgICAgbGluZS1oZWlnaHQ6IDE7XG4gICAgICB9XG4gICAgYCxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgQXRlQ29sb3JQaWNrZXJDb21wb25lbnQge1xuICBlZGl0b3IgPSBpbnB1dC5yZXF1aXJlZDxFZGl0b3I+KCk7XG4gIG1vZGUgPSBpbnB1dDxDb2xvclBpY2tlck1vZGU+KFwidGV4dFwiKTtcbiAgZGlzYWJsZWQgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XG4gIGFuY2hvclRvVGV4dCA9IGlucHV0PGJvb2xlYW4+KGZhbHNlKTtcblxuICBwcml2YXRlIGNvbG9yUGlja2VyU3ZjID0gaW5qZWN0KEF0ZUNvbG9yUGlja2VyU2VydmljZSk7XG4gIHByaXZhdGUgaTE4blNlcnZpY2UgPSBpbmplY3QoQXRlSTE4blNlcnZpY2UpO1xuICBwcml2YXRlIGVkaXRvckNvbW1hbmRzID0gaW5qZWN0KEF0ZUVkaXRvckNvbW1hbmRzU2VydmljZSk7XG5cbiAgcmVhZG9ubHkgdCA9IHRoaXMuaTE4blNlcnZpY2UudG9vbGJhcjtcbiAgcmVhZG9ubHkgc3RhdGUgPSB0aGlzLmVkaXRvckNvbW1hbmRzLmVkaXRvclN0YXRlO1xuXG4gIHJlYWRvbmx5IGN1cnJlbnRDb2xvciA9IGNvbXB1dGVkKCgpID0+IHtcbiAgICBjb25zdCBtYXJrcyA9IHRoaXMuc3RhdGUoKS5tYXJrcztcbiAgICBjb25zdCBjb2xvciA9IHRoaXMubW9kZSgpID09PSBcInRleHRcIiA/IG1hcmtzLmNvbXB1dGVkQ29sb3IgOiBtYXJrcy5jb21wdXRlZEJhY2tncm91bmQ7XG4gICAgcmV0dXJuIGNvbG9yIHx8ICh0aGlzLm1vZGUoKSA9PT0gXCJ0ZXh0XCIgPyBcIiMwMDAwMDBcIiA6IFwiI2ZmZmYwMFwiKTtcbiAgfSk7XG5cbiAgcmVhZG9ubHkgaGFzQ29sb3JBcHBsaWVkID0gY29tcHV0ZWQoKCkgPT4ge1xuICAgIGNvbnN0IG1hcmtzID0gdGhpcy5zdGF0ZSgpLm1hcmtzO1xuICAgIHJldHVybiAodGhpcy5tb2RlKCkgPT09IFwidGV4dFwiID8gbWFya3MuY29sb3IgOiBtYXJrcy5iYWNrZ3JvdW5kKSAhPT0gbnVsbDtcbiAgfSk7XG5cbiAgcmVhZG9ubHkgYnV0dG9uSWNvbiA9IGNvbXB1dGVkKCgpID0+IHtcbiAgICByZXR1cm4gdGhpcy5tb2RlKCkgPT09IFwidGV4dFwiID8gXCJmb3JtYXRfY29sb3JfdGV4dFwiIDogXCJmb3JtYXRfY29sb3JfZmlsbFwiO1xuICB9KTtcblxuICByZWFkb25seSBidXR0b25CZ0NvbG9yID0gY29tcHV0ZWQoKCkgPT4ge1xuICAgIGNvbnN0IGNvbG9yID0gdGhpcy5jdXJyZW50Q29sb3IoKTtcbiAgICBpZiAodGhpcy5tb2RlKCkgPT09IFwiaGlnaGxpZ2h0XCIpIHtcbiAgICAgIHJldHVybiB0aGlzLmhhc0NvbG9yQXBwbGllZCgpID8gY29sb3IgOiBcIlwiO1xuICAgIH1cbiAgICAvLyBGb3IgdGV4dCBtb2RlLCBhZGQgY29udHJhc3QgYmFja2dyb3VuZCBpZiBjdXJyZW50IGNvbG9yIGlzIHRvbyBsaWdodFxuICAgIGlmICh0aGlzLmNvbG9yUGlja2VyU3ZjLmdldEx1bWluYW5jZShjb2xvcikgPiAyMDApIHtcbiAgICAgIHJldHVybiBcIiMwMzA2MTdcIjtcbiAgICB9XG4gICAgcmV0dXJuIFwiXCI7XG4gIH0pO1xuXG4gIHJlYWRvbmx5IGJ1dHRvblRleHRDb2xvciA9IGNvbXB1dGVkKCgpID0+IHtcbiAgICBjb25zdCBjb2xvciA9IHRoaXMuY3VycmVudENvbG9yKCk7XG4gICAgaWYgKHRoaXMubW9kZSgpID09PSBcInRleHRcIikge1xuICAgICAgcmV0dXJuIGNvbG9yO1xuICAgIH1cbiAgICBpZiAodGhpcy5oYXNDb2xvckFwcGxpZWQoKSkge1xuICAgICAgcmV0dXJuIHRoaXMuY29sb3JQaWNrZXJTdmMuZ2V0THVtaW5hbmNlKGNvbG9yKSA+IDEyOCA/IFwiIzAwMDAwMFwiIDogXCIjZmZmZmZmXCI7XG4gICAgfVxuICAgIHJldHVybiBcInZhcigtLWF0ZS10ZXh0LXNlY29uZGFyeSlcIjtcbiAgfSk7XG5cbiAgb25Ub2dnbGUoZXZlbnQ6IEV2ZW50KSB7XG4gICAgLy8gSWYgYW5jaG9yVG9UZXh0IGlzIHRydWUsIHdlIGRvbid0IHBhc3MgdGhlIGV2ZW50IHNvIGl0IGRlZmF1bHRzIHRvIHRleHQgc2VsZWN0aW9uIGFuY2hvcmluZ1xuICAgIHRoaXMuY29sb3JQaWNrZXJTdmMudG9nZ2xlKHRoaXMuZWRpdG9yKCksIHRoaXMubW9kZSgpLCB0aGlzLmFuY2hvclRvVGV4dCgpID8gdW5kZWZpbmVkIDogZXZlbnQpO1xuICB9XG5cbiAgb25DbGVhcihldmVudDogTW91c2VFdmVudCkge1xuICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG5cbiAgICBjb25zdCBlZGl0b3IgPSB0aGlzLmVkaXRvcigpO1xuICAgIGlmICh0aGlzLm1vZGUoKSA9PT0gXCJ0ZXh0XCIpIHtcbiAgICAgIHRoaXMuY29sb3JQaWNrZXJTdmMudW5zZXRDb2xvcihlZGl0b3IpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLmNvbG9yUGlja2VyU3ZjLnVuc2V0SGlnaGxpZ2h0KGVkaXRvcik7XG4gICAgfVxuXG4gICAgdGhpcy5jb2xvclBpY2tlclN2Yy5jbG9zZSgpO1xuICB9XG59XG4iXX0=

package/esm2022/lib/components/edit-toggle/ate-edit-toggle.component.mjs

@@ -0,0 +1,42 @@
+import { Component, input, output, ChangeDetectionStrategy } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { AteButtonComponent } from "../ui/ate-button.component";
+import * as i0 from "@angular/core";
+/**
+ * Edit Toggle Component
+ * Allows switching between editable and readonly modes
+ */
+export class AteEditToggleComponent {
+    constructor() {
+        this.editable = input.required();
+        this.translations = input.required();
+        this.editToggle = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteEditToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: AteEditToggleComponent, isStandalone: true, selector: "ate-edit-toggle", inputs: { editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: true, transformFunction: null }, translations: { classPropertyName: "translations", publicName: "translations", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { editToggle: "editToggle" }, ngImport: i0, template: `
+    <div class="ate-edit-toggle-container" [class.is-editable]="editable()">
+      <ate-button
+        [icon]="editable() ? 'visibility' : 'edit'"
+        [title]="editable() ? translations().editor.viewMode : translations().editor.toggleEdit"
+        (buttonClick)="editToggle.emit($event)"
+        size="medium"
+        iconSize="small"
+        backgroundColor="var(--ate-primary-lighter)" />
+    </div>
+  `, isInline: true, styles: [".ate-edit-toggle-container{position:absolute;margin-top:16px;right:16px;z-index:50}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AteButtonComponent, selector: "ate-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteEditToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "ate-edit-toggle", standalone: true, imports: [CommonModule, AteButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ate-edit-toggle-container" [class.is-editable]="editable()">
+      <ate-button
+        [icon]="editable() ? 'visibility' : 'edit'"
+        [title]="editable() ? translations().editor.viewMode : translations().editor.toggleEdit"
+        (buttonClick)="editToggle.emit($event)"
+        size="medium"
+        iconSize="small"
+        backgroundColor="var(--ate-primary-lighter)" />
+    </div>
+  `, styles: [".ate-edit-toggle-container{position:absolute;margin-top:16px;right:16px;z-index:50}\n"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXRlLWVkaXQtdG9nZ2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItdGlwdGFwLWVkaXRvci9zcmMvbGliL2NvbXBvbmVudHMvZWRpdC10b2dnbGUvYXRlLWVkaXQtdG9nZ2xlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDbEYsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDOztBQUdoRTs7O0dBR0c7QUE0QkgsTUFBTSxPQUFPLHNCQUFzQjtJQTNCbkM7UUE0QkUsYUFBUSxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQVcsQ0FBQztRQUNyQyxpQkFBWSxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQW1CLENBQUM7UUFDakQsZUFBVSxHQUFHLE1BQU0sRUFBUyxDQUFDO0tBQzlCOytHQUpZLHNCQUFzQjttR0FBdEIsc0JBQXNCLDBZQXRCdkI7Ozs7Ozs7Ozs7R0FVVCw4SkFaUyxZQUFZLCtCQUFFLGtCQUFrQjs7NEZBd0IvQixzQkFBc0I7a0JBM0JsQyxTQUFTOytCQUNFLGlCQUFpQixjQUNmLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxrQkFBa0IsQ0FBQyxtQkFDMUIsdUJBQXVCLENBQUMsTUFBTSxZQUNyQzs7Ozs7Ozs7OztHQVVUIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBpbnB1dCwgb3V0cHV0LCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XG5pbXBvcnQgeyBBdGVCdXR0b25Db21wb25lbnQgfSBmcm9tIFwiLi4vdWkvYXRlLWJ1dHRvbi5jb21wb25lbnRcIjtcbmltcG9ydCB7IEF0ZVRyYW5zbGF0aW9ucyB9IGZyb20gXCIuLi8uLi9zZXJ2aWNlcy9hdGUtaTE4bi5zZXJ2aWNlXCI7XG5cbi8qKlxuICogRWRpdCBUb2dnbGUgQ29tcG9uZW50XG4gKiBBbGxvd3Mgc3dpdGNoaW5nIGJldHdlZW4gZWRpdGFibGUgYW5kIHJlYWRvbmx5IG1vZGVzXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJhdGUtZWRpdC10b2dnbGVcIixcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgQXRlQnV0dG9uQ29tcG9uZW50XSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdiBjbGFzcz1cImF0ZS1lZGl0LXRvZ2dsZS1jb250YWluZXJcIiBbY2xhc3MuaXMtZWRpdGFibGVdPVwiZWRpdGFibGUoKVwiPlxuICAgICAgPGF0ZS1idXR0b25cbiAgICAgICAgW2ljb25dPVwiZWRpdGFibGUoKSA/ICd2aXNpYmlsaXR5JyA6ICdlZGl0J1wiXG4gICAgICAgIFt0aXRsZV09XCJlZGl0YWJsZSgpID8gdHJhbnNsYXRpb25zKCkuZWRpdG9yLnZpZXdNb2RlIDogdHJhbnNsYXRpb25zKCkuZWRpdG9yLnRvZ2dsZUVkaXRcIlxuICAgICAgICAoYnV0dG9uQ2xpY2spPVwiZWRpdFRvZ2dsZS5lbWl0KCRldmVudClcIlxuICAgICAgICBzaXplPVwibWVkaXVtXCJcbiAgICAgICAgaWNvblNpemU9XCJzbWFsbFwiXG4gICAgICAgIGJhY2tncm91bmRDb2xvcj1cInZhcigtLWF0ZS1wcmltYXJ5LWxpZ2h0ZXIpXCIgLz5cbiAgICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAgICAgLmF0ZS1lZGl0LXRvZ2dsZS1jb250YWluZXIge1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIG1hcmdpbi10b3A6IDE2cHg7XG4gICAgICAgIHJpZ2h0OiAxNnB4O1xuICAgICAgICB6LWluZGV4OiA1MDtcbiAgICAgIH1cbiAgICBgLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBBdGVFZGl0VG9nZ2xlQ29tcG9uZW50IHtcbiAgZWRpdGFibGUgPSBpbnB1dC5yZXF1aXJlZDxib29sZWFuPigpO1xuICB0cmFuc2xhdGlvbnMgPSBpbnB1dC5yZXF1aXJlZDxBdGVUcmFuc2xhdGlvbnM+KCk7XG4gIGVkaXRUb2dnbGUgPSBvdXRwdXQ8RXZlbnQ+KCk7XG59XG4iXX0=