import * as i0 from '@angular/core';
import { inject, input, signal, model, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
import { UploadArea, UploadTriggerDirective } from '@ngstarter-ui/components/upload';
import { ProgressBar } from '@ngstarter-ui/components/progress-bar';
import { Button } from '@ngstarter-ui/components/button';
import { Icon } from '@ngstarter-ui/components/icon';
import { C as ContentBuilderStore, a as CONTENT_BUILDER, b as CONTENT_EDITOR_BLOCK } from './ngstarter-ui-components-content-editor-ngstarter-ui-components-content-editor-DNLTNGYa.mjs';
import { ImageResizer, ImageResizerImageDirective } from '@ngstarter-ui/components/image-resizer';
import { FormField, Label } from '@ngstarter-ui/components/form-field';
import { Input } from '@ngstarter-ui/components/input';
import * as i1 from '@angular/forms';
import { FormsModule } from '@angular/forms';

class ImageBlockComponent {
    _store = inject(ContentBuilderStore);
    _contentBuilder = inject(CONTENT_BUILDER);
    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
    content = input.required(...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
    settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
    index = input.required(...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
    uploading = signal(false, ...(ngDevMode ? [{ debugName: "uploading" }] : /* istanbul ignore next */ []));
    selectedImage = signal('', ...(ngDevMode ? [{ debugName: "selectedImage" }] : /* istanbul ignore next */ []));
    _src = signal('', ...(ngDevMode ? [{ debugName: "_src" }] : /* istanbul ignore next */ []));
    _alt = model('', ...(ngDevMode ? [{ debugName: "_alt" }] : /* istanbul ignore next */ []));
    _settings = model({}, ...(ngDevMode ? [{ debugName: "_settings" }] : /* istanbul ignore next */ []));
    initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
    ngOnInit() {
        this._src.set(this.content().src);
        this._alt.set(this.content().alt);
        this._settings.set(this.settings() || {});
        this.initialized.set(true);
    }
    focus() {
        if (this._src()) {
            this._contentBuilder.focusBlock(this.id());
        }
    }
    getData() {
        return {
            content: {
                src: this._src(),
                alt: this._alt()
            },
            settings: {
                ...this._settings(),
            }
        };
    }
    isEmpty() {
        const src = this.getData().content.src;
        return typeof src === 'string' ? src.trim().length === 0 : !src;
    }
    cancelUploading() {
        this.uploading.set(false);
    }
    onFileSelected(event) {
        this.uploading.set(true);
        const reader = new FileReader();
        reader.addEventListener('load', () => {
            this.selectedImage.set(reader.result);
            const img = new Image();
            img.onload = () => {
                let width = img.width;
                let height = img.height;
                const aspectRatio = width / height;
                if (width > 704) {
                    width = 704;
                    height = Math.round(width / aspectRatio);
                }
                this._settings.update(s => ({
                    ...s,
                    width,
                    height
                }));
            };
            img.src = reader.result;
            const uploadFn = this._contentBuilder.getBlockDefOption('image', 'uploadFn');
            uploadFn(event.files[0], reader.result)
                .then((url) => {
                if (!this.uploading()) {
                    this.selectedImage.set('');
                    return;
                }
                this._src.set(url);
                this.selectedImage.set('');
                this.uploading.set(false);
                this.update();
                this.focus();
            });
        }, false);
        reader.readAsDataURL(event.files[0]);
    }
    _onAltChange() {
        this.update();
    }
    _onImageResized(options) {
        this._settings.set(options);
        this.update();
    }
    handleKeyPress(event) {
        if (event.key === 'Enter') {
            event.preventDefault();
            event.stopPropagation();
            this._contentBuilder.insertEmptyBlock(this.index());
        }
    }
    update() {
        this._store.updateBlock(this.id(), { ...this.getData(), isEmpty: this.isEmpty() });
        this._contentBuilder.emitContentChangeEvent();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ImageBlockComponent, isStandalone: true, selector: "ngs-image-block", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, _alt: { classPropertyName: "_alt", publicName: "_alt", isSignal: true, isRequired: false, transformFunction: null }, _settings: { classPropertyName: "_settings", publicName: "_settings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { _alt: "_altChange", _settings: "_settingsChange" }, host: { listeners: { "keypress": "handleKeyPress($event)" } }, providers: [
            {
                provide: CONTENT_EDITOR_BLOCK,
                useExisting: forwardRef(() => ImageBlockComponent),
                multi: true
            }
        ], ngImport: i0, template: "@if (uploading()) {\n  <div class=\"upload-container\">\n    <div class=\"upload-overlay\">\n      <ngs-progress-bar mode=\"indeterminate\" class=\"progress-bar\"/>\n      <div class=\"remove-button\">\n        <button ngsButton (click)=\"cancelUploading()\">\n          <ngs-icon name=\"fluent:delete-24-regular\"/>\n        </button>\n      </div>\n      <div class=\"upload-overlay-text\">Loading...</div>\n    </div>\n    <img [src]=\"selectedImage()\" [alt]=\"_alt()\">\n  </div>\n} @else if (_src()) {\n  <div class=\"uploaded-image\">\n    <ngs-image-resizer (imageResized)=\"_onImageResized($event)\" [imageMaxWidth]=\"704\">\n      <img [src]=\"_src()\" [alt]=\"_alt()\" ngsImageResizerImage [style.width.px]=\"_settings().width || null\">\n    </ngs-image-resizer>\n  </div>\n  <ngs-form-field class=\"w-full mt-5\">\n    <ngs-label>Alt text</ngs-label>\n    <input ngsInput [(ngModel)]=\"_alt\" (ngModelChange)=\"_onAltChange()\">\n  </ngs-form-field>\n} @else {\n  <ngs-upload-area #uploadArea=\"ngsUploadArea\"\n                   ngsUploadTrigger accept=\"image/*\"\n                   (fileSelected)=\"onFileSelected($event)\"\n                   multiple=\"false\" class=\"upload-area\">\n    @if (!uploadArea.api.isDropActive) {\n      Drag & drop image here or click to upload\n    } @else {\n      <div class=\"font-medium\">Drop image here</div>\n    }\n  </ngs-upload-area>\n}\n", styles: ["@layer properties;:host{display:block}:host ngs-upload-area{--ngs-upload-area-padding: calc(var(--spacing, .25rem) * 6) calc(var(--spacing, .25rem) * 10)}:host img{max-width:100%}:host .upload-container{position:relative}:host .upload-overlay{position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:1;display:flex;align-items:center;justify-content:center;background:#fffc}:host .progress-bar{position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 0);inset-inline-end:calc(var(--spacing, .25rem) * 0);top:calc(var(--spacing, .25rem) * 0)}:host .uploaded-image{display:flex;width:704px;align-items:center;justify-content:center}:host .upload-overlay-text{background:#fff;border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}:host .remove-button{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 2);top:calc(var(--spacing, .25rem) * 4);z-index:1;width:max-content}:host .upload-area{cursor:pointer}:host .upload-area:hover{outline-style:var(--tw-outline-style);outline-width:2px;outline-color:var(--ngs-color-primary)}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid}}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: UploadArea, selector: "ngs-upload-area", inputs: ["accept", "allowHover", "multiple"], outputs: ["fileSelected"], exportAs: ["ngsUploadArea"] }, { kind: "directive", type: UploadTriggerDirective, selector: "[ngsUploadTrigger]", inputs: ["accept", "multiple"], outputs: ["fileSelected"], exportAs: ["ngsUploadTrigger"] }, { kind: "component", type: ProgressBar, selector: "ngs-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["ngsProgressBar"] }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: ImageResizer, selector: "ngs-image-resizer", inputs: ["imageMaxWidth", "imageMinWidth"], outputs: ["imageResized"], exportAs: ["ngsImageResizer"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty"], exportAs: ["ngsFormField"] }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ImageResizerImageDirective, selector: "[ngsImageResizerImage]", exportAs: ["ngsImageResizerImage"] }, { kind: "component", type: Label, selector: "ngs-label" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageBlockComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-image-block', imports: [
                        UploadArea,
                        UploadTriggerDirective,
                        ProgressBar,
                        Button,
                        Icon,
                        ImageResizer,
                        FormField,
                        Input,
                        FormsModule,
                        ImageResizerImageDirective,
                        Label
                    ], providers: [
                        {
                            provide: CONTENT_EDITOR_BLOCK,
                            useExisting: forwardRef(() => ImageBlockComponent),
                            multi: true
                        }
                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '(keypress)': 'handleKeyPress($event)',
                    }, template: "@if (uploading()) {\n  <div class=\"upload-container\">\n    <div class=\"upload-overlay\">\n      <ngs-progress-bar mode=\"indeterminate\" class=\"progress-bar\"/>\n      <div class=\"remove-button\">\n        <button ngsButton (click)=\"cancelUploading()\">\n          <ngs-icon name=\"fluent:delete-24-regular\"/>\n        </button>\n      </div>\n      <div class=\"upload-overlay-text\">Loading...</div>\n    </div>\n    <img [src]=\"selectedImage()\" [alt]=\"_alt()\">\n  </div>\n} @else if (_src()) {\n  <div class=\"uploaded-image\">\n    <ngs-image-resizer (imageResized)=\"_onImageResized($event)\" [imageMaxWidth]=\"704\">\n      <img [src]=\"_src()\" [alt]=\"_alt()\" ngsImageResizerImage [style.width.px]=\"_settings().width || null\">\n    </ngs-image-resizer>\n  </div>\n  <ngs-form-field class=\"w-full mt-5\">\n    <ngs-label>Alt text</ngs-label>\n    <input ngsInput [(ngModel)]=\"_alt\" (ngModelChange)=\"_onAltChange()\">\n  </ngs-form-field>\n} @else {\n  <ngs-upload-area #uploadArea=\"ngsUploadArea\"\n                   ngsUploadTrigger accept=\"image/*\"\n                   (fileSelected)=\"onFileSelected($event)\"\n                   multiple=\"false\" class=\"upload-area\">\n    @if (!uploadArea.api.isDropActive) {\n      Drag & drop image here or click to upload\n    } @else {\n      <div class=\"font-medium\">Drop image here</div>\n    }\n  </ngs-upload-area>\n}\n", styles: ["@layer properties;:host{display:block}:host ngs-upload-area{--ngs-upload-area-padding: calc(var(--spacing, .25rem) * 6) calc(var(--spacing, .25rem) * 10)}:host img{max-width:100%}:host .upload-container{position:relative}:host .upload-overlay{position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:1;display:flex;align-items:center;justify-content:center;background:#fffc}:host .progress-bar{position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 0);inset-inline-end:calc(var(--spacing, .25rem) * 0);top:calc(var(--spacing, .25rem) * 0)}:host .uploaded-image{display:flex;width:704px;align-items:center;justify-content:center}:host .upload-overlay-text{background:#fff;border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}:host .remove-button{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 2);top:calc(var(--spacing, .25rem) * 4);z-index:1;width:max-content}:host .upload-area{cursor:pointer}:host .upload-area:hover{outline-style:var(--tw-outline-style);outline-width:2px;outline-color:var(--ngs-color-primary)}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid}}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], _alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "_alt", required: false }] }, { type: i0.Output, args: ["_altChange"] }], _settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "_settings", required: false }] }, { type: i0.Output, args: ["_settingsChange"] }] } });

export { ImageBlockComponent };
//# sourceMappingURL=ngstarter-ui-components-content-editor-image-block.component-ahCIfpvQ.mjs.map
