@ngstarter-ui/components 21.0.44 → 21.0.46

package/fesm2022/ngstarter-ui-components-image-designer.mjs

@@ -3950,7 +3950,7 @@ class ImageDesigner {
                 provide: IMAGE_DESIGNER,
                 useExisting: forwardRef(() => ImageDesigner)
             }
-        ], viewQueries: [{ propertyName: "canvasContainer", first: true, predicate: ["canvasContainer"], descendants: true, isSignal: true }], exportAs: ["ngsImageDesigner"], ngImport: i0, template: "<ngs-panel class=\"h-full\">\n  <ngs-panel-sidebar class=\"border-r border-border h-full\">\n    <ngs-tab-panel hideContentIfTabNotSelected [activeItemId]=\"activeItemId()\" class=\"h-full\">\n      <ngs-tab-panel-content>\n        <ngs-tab-panel-nav>\n          <ngs-tab-panel-item for=\"text\" (click)=\"activeItemId.set('text')\">\n            <ngs-icon name=\"fluent:text-field-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Text</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"photos\" (click)=\"activeItemId.set('photos')\">\n            <ngs-icon name=\"fluent:image-copy-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Photos</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"elements\" (click)=\"activeItemId.set('elements')\">\n            <ngs-icon name=\"fluent:shape-subtract-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Elements</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"upload\" (click)=\"activeItemId.set('upload')\">\n            <ngs-icon name=\"fluent:arrow-upload-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Upload</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"background\" (click)=\"activeItemId.set('background')\">\n            <ngs-icon name=\"fluent:grid-dots-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Background</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"layers\" (click)=\"activeItemId.set('layers')\">\n            <ngs-icon name=\"fluent:layer-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Layers</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"resize\" (click)=\"activeItemId.set('resize')\">\n            <ngs-icon name=\"fluent:resize-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Resize</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n        </ngs-tab-panel-nav>\n      </ngs-tab-panel-content>\n      <ngs-tab-panel-aside class=\"border-s border-border\">\n        <ng-template ngsTabPanelAsideContent=\"text\">\n          <ngs-panel>\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Text</ngs-panel-header>\n            <ngs-panel-content class=\"p-4 flex flex-col gap-4\">\n              <div class=\"grid grid-cols-1 gap-4 mt-2\">\n                <button (click)=\"addHeader()\"\n                        draggable=\"true\"\n                        (dragstart)=\"onTextDragStart($event, 'header')\"\n                        class=\"w-full text-left p-4 border border-border rounded-lg hover:bg-surface-container transition-colors\">\n                  <div class=\"text-3xl font-bold pointer-events-none\">Add a heading</div>\n                </button>\n                <button (click)=\"addSubheader()\"\n                        draggable=\"true\"\n                        (dragstart)=\"onTextDragStart($event, 'subheader')\"\n                        class=\"w-full text-left p-3 border border-border rounded-lg hover:bg-surface-container transition-colors\">\n                  <div class=\"text-xl font-semibold pointer-events-none\">Add a subheading</div>\n                </button>\n                <button (click)=\"addBodyText()\"\n                        draggable=\"true\"\n                        (dragstart)=\"onTextDragStart($event, 'body')\"\n                        class=\"w-full text-left p-2 border border-border rounded-lg hover:bg-surface-container transition-colors\">\n                  <div class=\"text-base pointer-events-none\">Add body text</div>\n                </button>\n              </div>\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"photos\">\n          <ngs-panel class=\"h-full flex flex-col\">\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">\n<!--              <ngs-form-field class=\"w-full\" subscriptHiddenIfEmpty>-->\n<!--                <ngs-icon name=\"fluent:search-24-regular\" ngsIconPrefix/>-->\n<!--                <input type=\"text\"-->\n<!--                       ngsInput-->\n<!--                       placeholder=\"Search photos\"-->\n<!--                       [ngModel]=\"photosFilter()\"-->\n<!--                       (ngModelChange)=\"photosFilter.set($event)\"/>-->\n<!--              </ngs-form-field>-->\n              Photos\n            </ngs-panel-header>\n            <ngs-panel-content class=\"relative flex-1 p-0 overflow-hidden\">\n              <ngs-scrollbar-area (scrolled)=\"onPhotosScroll($event)\" class=\"h-full\">\n                <div class=\"p-4\">\n                    <div class=\"masonry-grid\">\n                      @for (photo of photos(); track photo.id) {\n                        <button (click)=\"addImage(photo)\"\n                                draggable=\"true\"\n                                (dragstart)=\"onImageDragStart($event, photo)\"\n                                [style.aspect-ratio]=\"photo.width + '/' + photo.height\"\n                                class=\"border border-border rounded-lg overflow-hidden hover:ring-2 hover:ring-primary transition-all bg-surface-container\">\n                          <img [src]=\"photo.thumbUrl || photo.url\"\n                               [alt]=\"photo.name\"\n                               class=\"w-full h-auto block pointer-events-none\"/>\n                        </button>\n                      }\n                    </div>\n                  @if (isLoadingPhotos()) {\n                    <div class=\"flex justify-center p-4\">\n                      <ngs-progress-spinner diameter=\"32\"/>\n                    </div>\n                  }\n                  @if (photos().length === 0 && !isLoadingPhotos()) {\n                    <div class=\"text-center p-4 text-sm text-neutral-500\">\n                      No photos found\n                    </div>\n                  }\n                </div>\n              </ngs-scrollbar-area>\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"elements\">\n          <ngs-panel>\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Elements</ngs-panel-header>\n            <ngs-panel-content class=\"p-4 overflow-y-auto\">\n              <div class=\"grid grid-cols-3 gap-3\">\n                @for (element of elements(); track element.name) {\n                  <button (click)=\"addShape(element)\"\n                          draggable=\"true\"\n                          (dragstart)=\"onImageDragStart($event, element)\"\n                          class=\"aspect-square p-2 border border-border rounded-lg hover:bg-surface-container\n                                 transition-colors flex items-center justify-center\">\n                    <img [src]=\"element.data\" [alt]=\"element.name\"\n                         class=\"max-w-full max-h-full object-contain pointer-events-none\"/>\n                  </button>\n                }\n              </div>\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"upload\">\n          <ngs-panel class=\"h-full flex flex-col\">\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">\n              <ngs-toolbar>\n                <div>Upload</div>\n                <ngs-toolbar-spacer/>\n                <button ngsButton=\"filled\"\n                        ngsUploadTrigger\n                        [accept]=\"'image/*'\"\n                        (fileSelected)=\"onFileSelected($event)\"\n                        [loading]=\"isUploading()\">\n                  <ngs-icon name=\"fluent:arrow-upload-24-regular\"/>\n                  Add Image\n                </button>\n              </ngs-toolbar>\n            </ngs-panel-header>\n            <ngs-panel-content>\n              @if (uploadedImages().length > 0 || assets().length > 0) {\n                <ngs-scrollbar-area (scrolled)=\"onAssetsScroll($event)\">\n                  <div class=\"p-4 flex flex-col gap-4 min-h-full\">\n                    @if (isUploading() || uploadPreview()) {\n                      <div class=\"relative aspect-video border border-border rounded-lg overflow-hidden bg-surface-container\">\n                        @if (uploadPreview()) {\n                          <img [src]=\"uploadPreview()\" class=\"w-full h-full object-contain\" alt=\"Preview\"/>\n                        }\n                        @if (isUploading()) {\n                          <div class=\"absolute inset-0 bg-black/20 flex items-center justify-center backdrop-blur-[2px]\">\n                            <div class=\"flex flex-col items-center gap-2\">\n                              <ngs-progress-spinner diameter=\"32\" color=\"white\"/>\n                              <span class=\"text-xs font-medium text-white\">Uploading...</span>\n                            </div>\n                          </div>\n                        }\n                      </div>\n                    }\n\n                    @if (uploadedImages().length > 0) {\n                      <div class=\"flex flex-col gap-2\">\n                        <div class=\"text-sm font-semibold\">Your Uploads</div>\n                        <div class=\"masonry-grid\">\n                          @for (photo of uploadedImages(); track $index) {\n                            <button (click)=\"addUploadedImage(photo)\"\n                                    draggable=\"true\"\n                                    (dragstart)=\"onImageDragStart($event, photo)\"\n                                    [style.aspect-ratio]=\"photo.width + '/' + photo.height\"\n                                    class=\"border border-border rounded-lg overflow-hidden hover:ring-2\n                                hover:ring-primary transition-all bg-surface-container\">\n                              <img [src]=\"photo.url\" class=\"w-full h-auto block pointer-events-none\" alt=\"Uploaded image\"/>\n                            </button>\n                          }\n                        </div>\n                      </div>\n                    }\n\n                    @if (assets().length > 0) {\n                      <div class=\"flex flex-col gap-2\">\n                        <div class=\"text-sm font-semibold\">Assets</div>\n                        <div class=\"masonry-grid\">\n                          @for (asset of assets(); track asset.id) {\n                            <button (click)=\"addImage(asset)\"\n                                    draggable=\"true\"\n                                    (dragstart)=\"onImageDragStart($event, asset)\"\n                                    [style.aspect-ratio]=\"asset.width + '/' + asset.height\"\n                                    class=\"border border-border rounded-lg overflow-hidden hover:ring-2\n                                hover:ring-primary transition-all bg-surface-container\">\n                              <img [src]=\"asset.thumbUrl || asset.url\"\n                                   [alt]=\"asset.name\"\n                                   class=\"w-full h-auto block pointer-events-none\"/>\n                            </button>\n                          }\n                        </div>\n                        @if (isLoadingAssets()) {\n                          <div class=\"flex justify-center p-4\">\n                            <ngs-progress-spinner diameter=\"32\"/>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                </ngs-scrollbar-area>\n              }\n\n              @if (uploadedImages().length === 0 && assets().length === 0 && !isLoadingAssets()) {\n                <div class=\"h-full flex items-center justify-center\">\n                  <div class=\"text-sm text-neutral-500\">No images uploaded yet.</div>\n                </div>\n              }\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"background\">\n          <ngs-panel>\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Background</ngs-panel-header>\n            <ngs-panel-content>\n              <ngs-tab-group animationDuration=\"0\" class=\"h-full\">\n                <ngs-tab label=\"Color\">\n                  <div class=\"absolute inset-0\">\n                    <ngs-scrollbar-area>\n                      <div class=\"p-4\">\n                        <ngs-accordion [multi]=\"false\">\n                          <ngs-expansion-panel [expanded]=\"true\">\n                            <ngs-expansion-panel-header>\n                              <ngs-expansion-panel-title>Colors</ngs-expansion-panel-title>\n                            </ngs-expansion-panel-header>\n                            <div class=\"py-2\">\n                              <ngs-color-switcher [colors]=\"presetColors()\" (colorChange)=\"setColor($event)\"/>\n                            </div>\n                          </ngs-expansion-panel>\n                          <ngs-expansion-panel>\n                            <ngs-expansion-panel-header>\n                              <ngs-expansion-panel-title>Gradients</ngs-expansion-panel-title>\n                            </ngs-expansion-panel-header>\n                            <div class=\"grid grid-cols-3 gap-3 py-2\">\n                              @for (gradient of presetGradients(); track $index) {\n                                <button (click)=\"setGradient(gradient)\"\n                                        [style.background]=\"gradient.css\"\n                                        class=\"aspect-[16/6.75] w-full rounded-lg border border-border hover:ring-2 hover:ring-primary transition-all\">\n                                </button>\n                              }\n                            </div>\n                          </ngs-expansion-panel>\n                        </ngs-accordion>\n                      </div>\n                    </ngs-scrollbar-area>\n                  </div>\n                </ngs-tab>\n                <ngs-tab label=\"Patterns\">\n                  <div class=\"absolute inset-0\">\n                    <ngs-scrollbar-area>\n                      <div class=\"p-4\">\n                        <div class=\"grid grid-cols-3 gap-3\">\n                          @for (pattern of presetPatterns(); track $index) {\n                            <button (click)=\"addPattern(pattern)\"\n                                    class=\"aspect-square w-full rounded-lg border border-border hover:ring-2 hover:ring-primary transition-all overflow-hidden\">\n                              <img [src]=\"pattern\" class=\"w-full h-full object-cover\" alt=\"pattern\">\n                            </button>\n                          }\n                        </div>\n                      </div>\n                    </ngs-scrollbar-area>\n                  </div>\n                </ngs-tab>\n              </ngs-tab-group>\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"layers\">\n          <ngs-panel>\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Layers</ngs-panel-header>\n            <ngs-panel-content>\n              @if (layersFromService().length > 0) {\n                <ngs-list cdkDropList (cdkDropListDropped)=\"drop($event)\">\n                  @for (layer of layersFromService(); track layer.id) {\n                    <ngs-list-item cdkDrag\n                                   cdkDragLockAxis=\"y\"\n                                   [cdkDragStartDelay]=\"100\"\n                                   (click)=\"selectLayer(layer.id!)\"\n                                   [class.is-active]=\"selectedLayerId() === layer.id\"\n                                   class=\"relative group bg-surface\">\n                      <ngs-icon [name]=\"getLayerIcon(layer.type)\" ngsListItemIcon/>\n                      <div ngsListItemLine>\n                        {{ layer.name || layer.type }}\n                        <!--                      {{ layer.text || '' }}-->\n                      </div>\n                      <div class=\"absolute right-2 top-1/2 -translate-y-1/2 flex items-center\">\n                        <button ngsIconButton (click)=\"toggleLayerVisibility(layer.id!, $event)\">\n                          <ngs-icon\n                            [name]=\"layer.visible === false ? 'fluent:eye-off-24-regular' : 'fluent:eye-24-regular'\"/>\n                        </button>\n                        <button ngsIconButton (click)=\"toggleLayerLock(layer.id!, $event)\">\n                          <ngs-icon\n                            [name]=\"layer.locked ? 'fluent:lock-closed-24-regular' : 'fluent:lock-open-24-regular'\"\n                            class=\"size-5\"/>\n                        </button>\n                        <button ngsIconButton (click)=\"deleteLayer(layer.id!, $event)\" [disabled]=\"layer.locked\">\n                          <ngs-icon name=\"fluent:delete-24-regular\" class=\"size-5\"/>\n                        </button>\n                      </div>\n\n                      <div *cdkDragPlaceholder\n                           class=\"min-h-[var(--ngs-list-item-min-height)] bg-surface-container\"></div>\n                    </ngs-list-item>\n                  }\n                </ngs-list>\n              } @else {\n                <div class=\"text-sm p-4 h-full flex items-center justify-center\">No layers available</div>\n              }\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"resize\">\n          <ngs-panel>\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Resize</ngs-panel-header>\n            <ngs-panel-content>\n              <ngs-scrollbar-area>\n                <div class=\"p-4 flex flex-col gap-4\">\n                  <div class=\"flex flex-col gap-4\">\n                    <ngs-form-field subscriptHiddenIfEmpty>\n                      <ngs-label>Width (px)</ngs-label>\n                      <input ngsInput type=\"number\" [(ngModel)]=\"resizeWidth\">\n                    </ngs-form-field>\n\n                    <ngs-form-field subscriptHiddenIfEmpty>\n                      <ngs-label>Height (px)</ngs-label>\n                      <input ngsInput type=\"number\" [(ngModel)]=\"resizeHeight\">\n                    </ngs-form-field>\n\n                    <ngs-form-field subscriptHiddenIfEmpty>\n                      <ngs-label>Units</ngs-label>\n                      <ngs-select [(ngModel)]=\"resizeUnit\">\n                        <ngs-option value=\"px\">px</ngs-option>\n                      </ngs-select>\n                    </ngs-form-field>\n\n                    <button ngsButton=\"filled\" fullWidth (click)=\"applyResize()\">Resize</button>\n                  </div>\n\n                  <div class=\"flex flex-col gap-6 mt-2\">\n                    @for (category of presetCategories(); track category.name) {\n                      <div class=\"flex flex-col gap-3\">\n                        <div class=\"flex items-center gap-2 font-semibold text-sm\">\n                          <ngs-icon [name]=\"category.icon\" class=\"size-5\"/>\n                          {{ category.name }}\n                        </div>\n\n                        <div class=\"grid grid-cols-3 gap-3\">\n                          @for (preset of category.presets; track preset.name) {\n                            <button (click)=\"selectPreset(preset)\"\n                                    class=\"flex flex-col items-center gap-1 p-2 rounded-lg border border-border hover:bg-surface-container transition-colors text-center\">\n                              <ngs-icon [name]=\"preset.icon\" class=\"size-6 mb-1\"/>\n                              <span class=\"text-xs font-medium truncate w-full\">{{ preset.name }}</span>\n                              <span class=\"text-[10px] text-muted-foreground whitespace-nowrap\">{{ preset.width }}\u00D7{{ preset.height }} px</span>\n                            </button>\n                          }\n                        </div>\n                      </div>\n                    }\n                  </div>\n                </div>\n              </ngs-scrollbar-area>\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n\n        @if (effectsPortal()) {\n          <div class=\"absolute inset-0 z-20 bg-surface-container-lowest\">\n            <ng-container [cdkPortalOutlet]=\"effectsPortal()\"/>\n          </div>\n        }\n      </ngs-tab-panel-aside>\n    </ngs-tab-panel>\n  </ngs-panel-sidebar>\n  <ngs-panel-content class=\"h-full\">\n    <ngs-panel class=\"h-full\">\n      <ngs-panel-header>\n        <ngs-toolbar class=\"h-full px-3 border-b border-border\">\n          <button ngsIconButton (click)=\"toggleAside()\">\n            <ngs-icon name=\"fluent:navigation-24-regular\"/>\n          </button>\n          <ngs-toolbar-title>{{ title() }}</ngs-toolbar-title>\n          <ngs-toolbar-spacer/>\n          <div class=\"flex items-center gap-2\">\n            <button ngsIconButton (click)=\"zoomOut()\">\n              <ngs-icon name=\"fluent:zoom-out-24-regular\"/>\n            </button>\n            <span class=\"text-sm font-medium w-12 text-center\">{{ zoomPercentage() }}%</span>\n            <button ngsIconButton (click)=\"zoomIn()\">\n              <ngs-icon name=\"fluent:zoom-in-24-regular\"/>\n            </button>\n          </div>\n          <ngs-toolbar-spacer/>\n          <div class=\"flex\">\n            <button ngsIconButton (click)=\"undo()\" [disabled]=\"!designerService.canUndo()\">\n              <ngs-icon name=\"fluent:arrow-hook-up-left-24-regular\"/>\n            </button>\n            <button ngsIconButton (click)=\"redo()\" [disabled]=\"!designerService.canRedo()\">\n              <ngs-icon name=\"fluent:arrow-hook-up-right-24-regular\"/>\n            </button>\n          </div>\n          @if (showDownloadButton()) {\n            <ngs-divider vertical/>\n            <button ngsButton=\"filled\" (click)=\"download()\" class=\"mr-2\">Download</button>\n          }\n        </ngs-toolbar>\n      </ngs-panel-header>\n      <ngs-panel-content class=\"bg-surface-container overflow-hidden h-full relative\" (wheel)=\"onWheel($event)\"\n                      (mousedown)=\"canvasContainer.focus()\"\n                      (dragover)=\"onDragOver($event)\"\n                      (drop)=\"onDrop($event)\">\n        @if (settingsPortal()) {\n          <ng-container [cdkPortalOutlet]=\"settingsPortal()\"/>\n        }\n        <div #canvasContainer class=\"w-full h-full outline-none\" tabindex=\"0\" (contextmenu)=\"$event.preventDefault()\"></div>\n      </ngs-panel-content>\n    </ngs-panel>\n  </ngs-panel-content>\n</ngs-panel>\n", styles: [":host{display:block;width:100%;height:100%}:host ngs-tab-panel{--ngs-tab-panel-aside-width: calc(var(--spacing, .25rem) * 90);--ngs-tab-panel-nav-padding: calc(var(--spacing, .25rem) * 3) 0}:host ngs-list{--ngs-list-padding: 0;--ngs-list-item-radius: 0}:host ngs-tab-group{--ngs-tab-label-padding: 16px 16px}:host .masonry-grid{column-count:2;column-gap:12px}:host .masonry-grid>*{break-inside:avoid;margin-bottom:12px;display:block;width:100%}:host button.is-dragging{background:transparent!important;border-color:transparent!important;box-shadow:none!important;transition:none!important;outline:none!important}:host button.is-dragging:hover{background:transparent!important;border-color:transparent!important;box-shadow:none!important}:host button.is-dragging *{color:currentColor!important}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Panel, selector: "ngs-panel", inputs: ["absolute"], exportAs: ["ngsPanel"] }, { kind: "component", type: PanelSidebar, selector: "ngs-panel-sidebar" }, { kind: "component", type: PanelContent, selector: "ngs-panel-content", exportAs: ["ngsPanelContent"] }, { kind: "component", type: PanelHeader, selector: "ngs-panel-header", inputs: ["flex", "autoHeight"], exportAs: ["ngsPanelHeader"] }, { kind: "component", type: Toolbar, selector: "ngs-toolbar", exportAs: ["ngsToolbar"] }, { 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: ToolbarSpacer, selector: "ngs-toolbar-spacer" }, { kind: "component", type: Divider, selector: "ngs-divider", inputs: ["vertical", "inset", "fixedHeight"], exportAs: ["ngsDivider"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: ToolbarTitle, selector: "ngs-toolbar-title" }, { kind: "component", type: TabPanel, selector: "ngs-tab-panel", inputs: ["hideContentIfTabNotSelected", "activeItemId", "compact"], outputs: ["itemIdChanged"], exportAs: ["ngsTabPanel"] }, { kind: "component", type: TabPanelAside, selector: "ngs-tab-panel-aside", exportAs: ["ngsTabPanelAside"] }, { kind: "directive", type: TabPanelAsideContentDirective, selector: "[ngsTabPanelAsideContent]", inputs: ["ngsTabPanelAsideContent"], exportAs: ["ngsTabPanelAsideContent"] }, { kind: "component", type: TabPanelContent, selector: "ngs-tab-panel-content", exportAs: ["ngsTabPanelContent"] }, { kind: "component", type: TabPanelItem, selector: "ngs-tab-panel-item", inputs: ["for"], exportAs: ["ngsTabPanelItem"] }, { kind: "directive", type: TabPanelItemIconDirective, selector: "[ngsTabPanelItemIcon]", exportAs: ["ngsTabPanelItemIcon"] }, { kind: "component", type: TabPanelItemText, selector: "ngs-tab-panel-item-text", exportAs: ["ngsTabPanelItemText"] }, { kind: "component", type: TabPanelNav, selector: "ngs-tab-panel-nav", exportAs: ["ngsTabPanelNav"] }, { kind: "component", type: List, selector: "ngs-list", inputs: ["disabled", "disableRipple"], exportAs: ["ngsList"] }, { kind: "component", type: ListItem, selector: "ngs-list-item, a[ngs-list-item], button[ngs-list-item]", inputs: ["disabled", "lines"], exportAs: ["ngsListItem"] }, { kind: "directive", type: ListItemLine, selector: "[ngsListItemLine], [ngsLine]" }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: TabGroup, selector: "ngs-tab-group", inputs: ["selectedIndex", "headerPosition", "preserveContent", "ngs-stretch-tabs", "ngs-align-tabs", "disableRipple", "animationDuration", "animate.enter", "animate.leave"], outputs: ["selectedIndexChange", "selectedTabChange", "focusChange"] }, { kind: "component", type: Tab, selector: "ngs-tab", inputs: ["label", "aria-label", "aria-labelledby", "disabled"], exportAs: ["ngsTab"] }, { kind: "component", type: Accordion, selector: "ngs-accordion", inputs: ["multi", "hideToggle"], exportAs: ["ngsAccordion"] }, { kind: "component", type: ExpansionPanel, selector: "ngs-expansion-panel", inputs: ["disabled", "expanded", "hideToggle"], outputs: ["expandedChange", "opened", "closed"], exportAs: ["ngsExpansionPanel"] }, { kind: "component", type: ExpansionPanelHeader, selector: "ngs-expansion-panel-header", inputs: ["hideToggle"], exportAs: ["ngsExpansionPanelHeader"] }, { kind: "component", type: ExpansionPanelTitle, selector: "ngs-expansion-panel-title", exportAs: ["ngsExpansionPanelTitle"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "clearable", "aria-label", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: ColorSwitcher, selector: "ngs-color-switcher", inputs: ["colors", "selectedColor", "disabled"], outputs: ["colorChange"], exportAs: ["ngsColorSwitcher"] }, { kind: "component", type: ScrollbarArea, selector: "ngs-scrollbar-area", inputs: ["scrollbarWidth", "autoHide", "absolute"], outputs: ["scrolled"], exportAs: ["ngsScrollbarArea"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: UploadTriggerDirective, selector: "[ngsUploadTrigger]", inputs: ["accept", "multiple"], outputs: ["fileSelected"], exportAs: ["ngsUploadTrigger"] }, { kind: "component", type: ProgressSpinner, selector: "ngs-progress-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["ngsProgressSpinner"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+        ], viewQueries: [{ propertyName: "canvasContainer", first: true, predicate: ["canvasContainer"], descendants: true, isSignal: true }], exportAs: ["ngsImageDesigner"], ngImport: i0, template: "<ngs-panel class=\"h-full\">\n  <ngs-panel-sidebar class=\"border-r border-border h-full\">\n    <ngs-tab-panel hideContentIfTabNotSelected [activeItemId]=\"activeItemId()\" class=\"h-full\">\n      <ngs-tab-panel-content>\n        <ngs-tab-panel-nav>\n          <ngs-tab-panel-item for=\"text\" (click)=\"activeItemId.set('text')\">\n            <ngs-icon name=\"fluent:text-field-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Text</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"photos\" (click)=\"activeItemId.set('photos')\">\n            <ngs-icon name=\"fluent:image-copy-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Photos</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"elements\" (click)=\"activeItemId.set('elements')\">\n            <ngs-icon name=\"fluent:shape-subtract-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Elements</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"upload\" (click)=\"activeItemId.set('upload')\">\n            <ngs-icon name=\"fluent:arrow-upload-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Upload</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"background\" (click)=\"activeItemId.set('background')\">\n            <ngs-icon name=\"fluent:grid-dots-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Background</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"layers\" (click)=\"activeItemId.set('layers')\">\n            <ngs-icon name=\"fluent:layer-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Layers</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"resize\" (click)=\"activeItemId.set('resize')\">\n            <ngs-icon name=\"fluent:resize-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Resize</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n        </ngs-tab-panel-nav>\n      </ngs-tab-panel-content>\n      <ngs-tab-panel-aside class=\"border-s border-border\">\n        <ng-template ngsTabPanelAsideContent=\"text\">\n          <ngs-panel>\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Text</ngs-panel-header>\n            <ngs-panel-content class=\"p-4 flex flex-col gap-4\">\n              <div class=\"grid grid-cols-1 gap-4 mt-2\">\n                <button (click)=\"addHeader()\"\n                        draggable=\"true\"\n                        (dragstart)=\"onTextDragStart($event, 'header')\"\n                        class=\"w-full text-left p-4 border border-border rounded-lg hover:bg-surface-container transition-colors\">\n                  <div class=\"text-3xl font-bold pointer-events-none\">Add a heading</div>\n                </button>\n                <button (click)=\"addSubheader()\"\n                        draggable=\"true\"\n                        (dragstart)=\"onTextDragStart($event, 'subheader')\"\n                        class=\"w-full text-left p-3 border border-border rounded-lg hover:bg-surface-container transition-colors\">\n                  <div class=\"text-xl font-semibold pointer-events-none\">Add a subheading</div>\n                </button>\n                <button (click)=\"addBodyText()\"\n                        draggable=\"true\"\n                        (dragstart)=\"onTextDragStart($event, 'body')\"\n                        class=\"w-full text-left p-2 border border-border rounded-lg hover:bg-surface-container transition-colors\">\n                  <div class=\"text-base pointer-events-none\">Add body text</div>\n                </button>\n              </div>\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"photos\">\n          <ngs-panel class=\"h-full flex flex-col\">\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">\n<!--              <ngs-form-field class=\"w-full\" subscriptHiddenIfEmpty>-->\n<!--                <ngs-icon name=\"fluent:search-24-regular\" ngsIconPrefix/>-->\n<!--                <input type=\"text\"-->\n<!--                       ngsInput-->\n<!--                       placeholder=\"Search photos\"-->\n<!--                       [ngModel]=\"photosFilter()\"-->\n<!--                       (ngModelChange)=\"photosFilter.set($event)\"/>-->\n<!--              </ngs-form-field>-->\n              Photos\n            </ngs-panel-header>\n            <ngs-panel-content class=\"relative flex-1 p-0 overflow-hidden\">\n              <ngs-scrollbar-area (scrolled)=\"onPhotosScroll($event)\" class=\"h-full\">\n                <div class=\"p-4\">\n                    <div class=\"masonry-grid\">\n                      @for (photo of photos(); track photo.id) {\n                        <button (click)=\"addImage(photo)\"\n                                draggable=\"true\"\n                                (dragstart)=\"onImageDragStart($event, photo)\"\n                                [style.aspect-ratio]=\"photo.width + '/' + photo.height\"\n                                class=\"border border-border rounded-lg overflow-hidden hover:ring-2 hover:ring-primary transition-all bg-surface-container\">\n                          <img [src]=\"photo.thumbUrl || photo.url\"\n                               [alt]=\"photo.name\"\n                               class=\"w-full h-auto block pointer-events-none\"/>\n                        </button>\n                      }\n                    </div>\n                  @if (isLoadingPhotos()) {\n                    <div class=\"flex justify-center p-4\">\n                      <ngs-progress-spinner diameter=\"32\"/>\n                    </div>\n                  }\n                  @if (photos().length === 0 && !isLoadingPhotos()) {\n                    <div class=\"text-center p-4 text-sm text-neutral-500\">\n                      No photos found\n                    </div>\n                  }\n                </div>\n              </ngs-scrollbar-area>\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"elements\">\n          <ngs-panel>\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Elements</ngs-panel-header>\n            <ngs-panel-content class=\"p-4 overflow-y-auto\">\n              <div class=\"grid grid-cols-3 gap-3\">\n                @for (element of elements(); track element.name) {\n                  <button (click)=\"addShape(element)\"\n                          draggable=\"true\"\n                          (dragstart)=\"onImageDragStart($event, element)\"\n                          class=\"aspect-square p-2 border border-border rounded-lg hover:bg-surface-container\n                                 transition-colors flex items-center justify-center\">\n                    <img [src]=\"element.data\" [alt]=\"element.name\"\n                         class=\"max-w-full max-h-full object-contain pointer-events-none\"/>\n                  </button>\n                }\n              </div>\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"upload\">\n          <ngs-panel class=\"h-full flex flex-col\">\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">\n              <ngs-toolbar>\n                <div>Upload</div>\n                <ngs-toolbar-spacer/>\n                <button ngsButton=\"filled\"\n                        ngsUploadTrigger\n                        [accept]=\"'image/*'\"\n                        (fileSelected)=\"onFileSelected($event)\"\n                        [loading]=\"isUploading()\">\n                  <ngs-icon name=\"fluent:arrow-upload-24-regular\"/>\n                  Add Image\n                </button>\n              </ngs-toolbar>\n            </ngs-panel-header>\n            <ngs-panel-content>\n              @if (uploadedImages().length > 0 || assets().length > 0) {\n                <ngs-scrollbar-area (scrolled)=\"onAssetsScroll($event)\">\n                  <div class=\"p-4 flex flex-col gap-4 min-h-full\">\n                    @if (isUploading() || uploadPreview()) {\n                      <div class=\"relative aspect-video border border-border rounded-lg overflow-hidden bg-surface-container\">\n                        @if (uploadPreview()) {\n                          <img [src]=\"uploadPreview()\" class=\"w-full h-full object-contain\" alt=\"Preview\"/>\n                        }\n                        @if (isUploading()) {\n                          <div class=\"absolute inset-0 bg-black/20 flex items-center justify-center backdrop-blur-[2px]\">\n                            <div class=\"flex flex-col items-center gap-2\">\n                              <ngs-progress-spinner diameter=\"32\" color=\"white\"/>\n                              <span class=\"text-xs font-medium text-white\">Uploading...</span>\n                            </div>\n                          </div>\n                        }\n                      </div>\n                    }\n\n                    @if (uploadedImages().length > 0) {\n                      <div class=\"flex flex-col gap-2\">\n                        <div class=\"text-sm font-semibold\">Your Uploads</div>\n                        <div class=\"masonry-grid\">\n                          @for (photo of uploadedImages(); track $index) {\n                            <button (click)=\"addUploadedImage(photo)\"\n                                    draggable=\"true\"\n                                    (dragstart)=\"onImageDragStart($event, photo)\"\n                                    [style.aspect-ratio]=\"photo.width + '/' + photo.height\"\n                                    class=\"border border-border rounded-lg overflow-hidden hover:ring-2\n                                hover:ring-primary transition-all bg-surface-container\">\n                              <img [src]=\"photo.url\" class=\"w-full h-auto block pointer-events-none\" alt=\"Uploaded image\"/>\n                            </button>\n                          }\n                        </div>\n                      </div>\n                    }\n\n                    @if (assets().length > 0) {\n                      <div class=\"flex flex-col gap-2\">\n                        <div class=\"text-sm font-semibold\">Assets</div>\n                        <div class=\"masonry-grid\">\n                          @for (asset of assets(); track asset.id) {\n                            <button (click)=\"addImage(asset)\"\n                                    draggable=\"true\"\n                                    (dragstart)=\"onImageDragStart($event, asset)\"\n                                    [style.aspect-ratio]=\"asset.width + '/' + asset.height\"\n                                    class=\"border border-border rounded-lg overflow-hidden hover:ring-2\n                                hover:ring-primary transition-all bg-surface-container\">\n                              <img [src]=\"asset.thumbUrl || asset.url\"\n                                   [alt]=\"asset.name\"\n                                   class=\"w-full h-auto block pointer-events-none\"/>\n                            </button>\n                          }\n                        </div>\n                        @if (isLoadingAssets()) {\n                          <div class=\"flex justify-center p-4\">\n                            <ngs-progress-spinner diameter=\"32\"/>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                </ngs-scrollbar-area>\n              }\n\n              @if (uploadedImages().length === 0 && assets().length === 0 && !isLoadingAssets()) {\n                <div class=\"h-full flex items-center justify-center\">\n                  <div class=\"text-sm text-neutral-500\">No images uploaded yet.</div>\n                </div>\n              }\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"background\">\n          <ngs-panel>\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Background</ngs-panel-header>\n            <ngs-panel-content>\n              <ngs-tab-group animationDuration=\"0\" class=\"h-full\">\n                <ngs-tab label=\"Color\">\n                  <div class=\"absolute inset-0\">\n                    <ngs-scrollbar-area>\n                      <div class=\"p-4\">\n                        <ngs-accordion [multi]=\"false\">\n                          <ngs-expansion-panel [expanded]=\"true\">\n                            <ngs-expansion-panel-header>\n                              <ngs-expansion-panel-title>Colors</ngs-expansion-panel-title>\n                            </ngs-expansion-panel-header>\n                            <div class=\"py-2\">\n                              <ngs-color-switcher [colors]=\"presetColors()\" (colorChange)=\"setColor($event)\"/>\n                            </div>\n                          </ngs-expansion-panel>\n                          <ngs-expansion-panel>\n                            <ngs-expansion-panel-header>\n                              <ngs-expansion-panel-title>Gradients</ngs-expansion-panel-title>\n                            </ngs-expansion-panel-header>\n                            <div class=\"grid grid-cols-3 gap-3 py-2\">\n                              @for (gradient of presetGradients(); track $index) {\n                                <button (click)=\"setGradient(gradient)\"\n                                        [style.background]=\"gradient.css\"\n                                        class=\"aspect-[16/6.75] w-full rounded-lg border border-border hover:ring-2 hover:ring-primary transition-all\">\n                                </button>\n                              }\n                            </div>\n                          </ngs-expansion-panel>\n                        </ngs-accordion>\n                      </div>\n                    </ngs-scrollbar-area>\n                  </div>\n                </ngs-tab>\n                <ngs-tab label=\"Patterns\">\n                  <div class=\"absolute inset-0\">\n                    <ngs-scrollbar-area>\n                      <div class=\"p-4\">\n                        <div class=\"grid grid-cols-3 gap-3\">\n                          @for (pattern of presetPatterns(); track $index) {\n                            <button (click)=\"addPattern(pattern)\"\n                                    class=\"aspect-square w-full rounded-lg border border-border hover:ring-2 hover:ring-primary transition-all overflow-hidden\">\n                              <img [src]=\"pattern\" class=\"w-full h-full object-cover\" alt=\"pattern\">\n                            </button>\n                          }\n                        </div>\n                      </div>\n                    </ngs-scrollbar-area>\n                  </div>\n                </ngs-tab>\n              </ngs-tab-group>\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"layers\">\n          <ngs-panel>\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Layers</ngs-panel-header>\n            <ngs-panel-content>\n              @if (layersFromService().length > 0) {\n                <ngs-list cdkDropList (cdkDropListDropped)=\"drop($event)\">\n                  @for (layer of layersFromService(); track layer.id) {\n                    <ngs-list-item cdkDrag\n                                   cdkDragLockAxis=\"y\"\n                                   [cdkDragStartDelay]=\"100\"\n                                   (click)=\"selectLayer(layer.id!)\"\n                                   [class.is-active]=\"selectedLayerId() === layer.id\"\n                                   class=\"relative group bg-surface\">\n                      <ngs-icon [name]=\"getLayerIcon(layer.type)\" ngsListItemIcon/>\n                      <div ngsListItemLine>\n                        {{ layer.name || layer.type }}\n                        <!--                      {{ layer.text || '' }}-->\n                      </div>\n                      <div class=\"absolute right-2 top-1/2 -translate-y-1/2 flex items-center\">\n                        <button ngsIconButton (click)=\"toggleLayerVisibility(layer.id!, $event)\">\n                          <ngs-icon\n                            [name]=\"layer.visible === false ? 'fluent:eye-off-24-regular' : 'fluent:eye-24-regular'\"/>\n                        </button>\n                        <button ngsIconButton (click)=\"toggleLayerLock(layer.id!, $event)\">\n                          <ngs-icon\n                            [name]=\"layer.locked ? 'fluent:lock-closed-24-regular' : 'fluent:lock-open-24-regular'\"\n                            class=\"size-5\"/>\n                        </button>\n                        <button ngsIconButton (click)=\"deleteLayer(layer.id!, $event)\" [disabled]=\"layer.locked\">\n                          <ngs-icon name=\"fluent:delete-24-regular\" class=\"size-5\"/>\n                        </button>\n                      </div>\n\n                      <div *cdkDragPlaceholder\n                           class=\"min-h-[var(--ngs-list-item-min-height)] bg-surface-container\"></div>\n                    </ngs-list-item>\n                  }\n                </ngs-list>\n              } @else {\n                <div class=\"text-sm p-4 h-full flex items-center justify-center\">No layers available</div>\n              }\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"resize\">\n          <ngs-panel>\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Resize</ngs-panel-header>\n            <ngs-panel-content>\n              <ngs-scrollbar-area>\n                <div class=\"p-4 flex flex-col gap-4\">\n                  <div class=\"flex flex-col gap-4\">\n                    <ngs-form-field subscriptHiddenIfEmpty>\n                      <ngs-label>Width (px)</ngs-label>\n                      <input ngsInput type=\"number\" [(ngModel)]=\"resizeWidth\">\n                    </ngs-form-field>\n\n                    <ngs-form-field subscriptHiddenIfEmpty>\n                      <ngs-label>Height (px)</ngs-label>\n                      <input ngsInput type=\"number\" [(ngModel)]=\"resizeHeight\">\n                    </ngs-form-field>\n\n                    <ngs-form-field subscriptHiddenIfEmpty>\n                      <ngs-label>Units</ngs-label>\n                      <ngs-select [(ngModel)]=\"resizeUnit\">\n                        <ngs-option value=\"px\">px</ngs-option>\n                      </ngs-select>\n                    </ngs-form-field>\n\n                    <button ngsButton=\"filled\" fullWidth (click)=\"applyResize()\">Resize</button>\n                  </div>\n\n                  <div class=\"flex flex-col gap-6 mt-2\">\n                    @for (category of presetCategories(); track category.name) {\n                      <div class=\"flex flex-col gap-3\">\n                        <div class=\"flex items-center gap-2 font-semibold text-sm\">\n                          <ngs-icon [name]=\"category.icon\" class=\"size-5\"/>\n                          {{ category.name }}\n                        </div>\n\n                        <div class=\"grid grid-cols-3 gap-3\">\n                          @for (preset of category.presets; track preset.name) {\n                            <button (click)=\"selectPreset(preset)\"\n                                    class=\"flex flex-col items-center gap-1 p-2 rounded-lg border border-border hover:bg-surface-container transition-colors text-center\">\n                              <ngs-icon [name]=\"preset.icon\" class=\"size-6 mb-1\"/>\n                              <span class=\"text-xs font-medium truncate w-full\">{{ preset.name }}</span>\n                              <span class=\"text-[10px] text-muted-foreground whitespace-nowrap\">{{ preset.width }}\u00D7{{ preset.height }} px</span>\n                            </button>\n                          }\n                        </div>\n                      </div>\n                    }\n                  </div>\n                </div>\n              </ngs-scrollbar-area>\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n\n        @if (effectsPortal()) {\n          <div class=\"absolute inset-0 z-20 bg-surface-container-lowest\">\n            <ng-container [cdkPortalOutlet]=\"effectsPortal()\"/>\n          </div>\n        }\n      </ngs-tab-panel-aside>\n    </ngs-tab-panel>\n  </ngs-panel-sidebar>\n  <ngs-panel-content class=\"h-full\">\n    <ngs-panel class=\"h-full\">\n      <ngs-panel-header>\n        <ngs-toolbar class=\"h-full px-3 border-b border-border\">\n          <button ngsIconButton (click)=\"toggleAside()\">\n            <ngs-icon name=\"fluent:navigation-24-regular\"/>\n          </button>\n          <ngs-toolbar-title>{{ title() }}</ngs-toolbar-title>\n          <ngs-toolbar-spacer/>\n          <div class=\"flex items-center gap-2\">\n            <button ngsIconButton (click)=\"zoomOut()\">\n              <ngs-icon name=\"fluent:zoom-out-24-regular\"/>\n            </button>\n            <span class=\"text-sm font-medium w-12 text-center\">{{ zoomPercentage() }}%</span>\n            <button ngsIconButton (click)=\"zoomIn()\">\n              <ngs-icon name=\"fluent:zoom-in-24-regular\"/>\n            </button>\n          </div>\n          <ngs-toolbar-spacer/>\n          <div class=\"flex\">\n            <button ngsIconButton (click)=\"undo()\" [disabled]=\"!designerService.canUndo()\">\n              <ngs-icon name=\"fluent:arrow-hook-up-left-24-regular\"/>\n            </button>\n            <button ngsIconButton (click)=\"redo()\" [disabled]=\"!designerService.canRedo()\">\n              <ngs-icon name=\"fluent:arrow-hook-up-right-24-regular\"/>\n            </button>\n          </div>\n          @if (showDownloadButton()) {\n            <ngs-divider vertical/>\n            <button ngsButton=\"filled\" (click)=\"download()\" class=\"mr-2\">Download</button>\n          }\n        </ngs-toolbar>\n      </ngs-panel-header>\n      <ngs-panel-content class=\"bg-surface-container overflow-hidden h-full relative\" (wheel)=\"onWheel($event)\"\n                      (mousedown)=\"canvasContainer.focus()\"\n                      (dragover)=\"onDragOver($event)\"\n                      (drop)=\"onDrop($event)\">\n        @if (settingsPortal()) {\n          <ng-container [cdkPortalOutlet]=\"settingsPortal()\"/>\n        }\n        <div #canvasContainer class=\"w-full h-full outline-none\" tabindex=\"0\" (contextmenu)=\"$event.preventDefault()\"></div>\n      </ngs-panel-content>\n    </ngs-panel>\n  </ngs-panel-content>\n</ngs-panel>\n", styles: [":host{display:block;width:100%;height:100%}:host ngs-tab-panel{--ngs-tab-panel-aside-width: calc(var(--spacing, .25rem) * 90);--ngs-tab-panel-nav-padding: calc(var(--spacing, .25rem) * 3) 0}:host ngs-list{--ngs-list-padding: 0;--ngs-list-item-radius: 0}:host ngs-tab-group{--ngs-tab-label-padding: 16px 16px}:host .masonry-grid{column-count:2;column-gap:12px}:host .masonry-grid>*{break-inside:avoid;margin-bottom:12px;display:block;width:100%}:host button.is-dragging{background:transparent!important;border-color:transparent!important;box-shadow:none!important;transition:none!important;outline:none!important}:host button.is-dragging:hover{background:transparent!important;border-color:transparent!important;box-shadow:none!important}:host button.is-dragging *{color:currentColor!important}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Panel, selector: "ngs-panel", inputs: ["absolute"], exportAs: ["ngsPanel"] }, { kind: "component", type: PanelSidebar, selector: "ngs-panel-sidebar" }, { kind: "component", type: PanelContent, selector: "ngs-panel-content", exportAs: ["ngsPanelContent"] }, { kind: "component", type: PanelHeader, selector: "ngs-panel-header", inputs: ["flex", "autoHeight"], exportAs: ["ngsPanelHeader"] }, { kind: "component", type: Toolbar, selector: "ngs-toolbar", exportAs: ["ngsToolbar"] }, { 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: ToolbarSpacer, selector: "ngs-toolbar-spacer" }, { kind: "component", type: Divider, selector: "ngs-divider", inputs: ["vertical", "inset", "fixedHeight"], exportAs: ["ngsDivider"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: ToolbarTitle, selector: "ngs-toolbar-title", exportAs: ["ngsToolbarTitle"] }, { kind: "component", type: TabPanel, selector: "ngs-tab-panel", inputs: ["hideContentIfTabNotSelected", "activeItemId", "compact"], outputs: ["itemIdChanged"], exportAs: ["ngsTabPanel"] }, { kind: "component", type: TabPanelAside, selector: "ngs-tab-panel-aside", exportAs: ["ngsTabPanelAside"] }, { kind: "directive", type: TabPanelAsideContentDirective, selector: "[ngsTabPanelAsideContent]", inputs: ["ngsTabPanelAsideContent"], exportAs: ["ngsTabPanelAsideContent"] }, { kind: "component", type: TabPanelContent, selector: "ngs-tab-panel-content", exportAs: ["ngsTabPanelContent"] }, { kind: "component", type: TabPanelItem, selector: "ngs-tab-panel-item", inputs: ["for"], exportAs: ["ngsTabPanelItem"] }, { kind: "directive", type: TabPanelItemIconDirective, selector: "[ngsTabPanelItemIcon]", exportAs: ["ngsTabPanelItemIcon"] }, { kind: "component", type: TabPanelItemText, selector: "ngs-tab-panel-item-text", exportAs: ["ngsTabPanelItemText"] }, { kind: "component", type: TabPanelNav, selector: "ngs-tab-panel-nav", exportAs: ["ngsTabPanelNav"] }, { kind: "component", type: List, selector: "ngs-list", inputs: ["disabled", "disableRipple"], exportAs: ["ngsList"] }, { kind: "component", type: ListItem, selector: "ngs-list-item, a[ngs-list-item], button[ngs-list-item]", inputs: ["disabled", "lines"], exportAs: ["ngsListItem"] }, { kind: "directive", type: ListItemLine, selector: "[ngsListItemLine], [ngsLine]" }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: TabGroup, selector: "ngs-tab-group", inputs: ["selectedIndex", "headerPosition", "preserveContent", "ngs-stretch-tabs", "ngs-align-tabs", "disableRipple", "animationDuration", "animate.enter", "animate.leave"], outputs: ["selectedIndexChange", "selectedTabChange", "focusChange"] }, { kind: "component", type: Tab, selector: "ngs-tab", inputs: ["label", "aria-label", "aria-labelledby", "disabled"], exportAs: ["ngsTab"] }, { kind: "component", type: Accordion, selector: "ngs-accordion", inputs: ["multi", "hideToggle"], exportAs: ["ngsAccordion"] }, { kind: "component", type: ExpansionPanel, selector: "ngs-expansion-panel", inputs: ["disabled", "expanded", "hideToggle"], outputs: ["expandedChange", "opened", "closed"], exportAs: ["ngsExpansionPanel"] }, { kind: "component", type: ExpansionPanelHeader, selector: "ngs-expansion-panel-header", inputs: ["hideToggle"], exportAs: ["ngsExpansionPanelHeader"] }, { kind: "component", type: ExpansionPanelTitle, selector: "ngs-expansion-panel-title", exportAs: ["ngsExpansionPanelTitle"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "clearable", "aria-label", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: ColorSwitcher, selector: "ngs-color-switcher", inputs: ["colors", "selectedColor", "disabled"], outputs: ["colorChange"], exportAs: ["ngsColorSwitcher"] }, { kind: "component", type: ScrollbarArea, selector: "ngs-scrollbar-area", inputs: ["scrollbarWidth", "autoHide", "absolute"], outputs: ["scrolled"], exportAs: ["ngsScrollbarArea"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: UploadTriggerDirective, selector: "[ngsUploadTrigger]", inputs: ["accept", "multiple"], outputs: ["fileSelected"], exportAs: ["ngsUploadTrigger"] }, { kind: "component", type: ProgressSpinner, selector: "ngs-progress-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["ngsProgressSpinner"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageDesigner, decorators: [{
             type: Component,