@ngstarter-ui/components 21.0.19 → 21.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ai/component-registry.json +2 -1
- package/fesm2022/ngstarter-ui-components-autocomplete.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-bottom-sheet.mjs +13 -24
- package/fesm2022/ngstarter-ui-components-bottom-sheet.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-chips.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-code-highlighter.mjs +5 -3
- package/fesm2022/ngstarter-ui-components-code-highlighter.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-image-designer.mjs +2 -2
- package/fesm2022/ngstarter-ui-components-image-designer.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-list.mjs +7 -7
- package/fesm2022/ngstarter-ui-components-list.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ngstarter-ui-components-bottom-sheet.d.ts +1 -3
- package/types/ngstarter-ui-components-code-highlighter.d.ts +2 -1
- package/types/ngstarter-ui-components-list.d.ts +1 -1
|
@@ -3038,7 +3038,7 @@ class Settings {
|
|
|
3038
3038
|
this.imageDesigner?.openEffects();
|
|
3039
3039
|
}
|
|
3040
3040
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Settings, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3041
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Settings, isStandalone: true, selector: "ngs-settings", ngImport: i0, template: "@let layer = selectedLayer();\n\n@if (layer) {\n <ngs-toolbar\n class=\"h-14 z-10 bg-surface-container-lowest border-b border-border px-5 absolute top-0 left-0 right-0\">\n <!-- Color -->\n @if (showColorPicker()) {\n <ngs-toolbar-item>\n <button [ngsPopoverTriggerFor]=\"colorPopover\"\n position=\"below-center\"\n class=\"size-7 cursor-pointer hover:ring-2 hover:ring-primary rounded-full border border-border\"\n ngsRipple\n [style.backgroundColor]=\"layer['fill'] || '#000000'\">\n </button>\n <ngs-popover #colorPopover>\n <ng-template ngsPopoverContent>\n <div class=\"p-4 w-72\">\n <div class=\"text-xs font-medium uppercase text-muted-foreground mb-4\">\n {{ layer.type === 'text' ? 'Text Color' : 'Fill Color' }}\n </div>\n <ngs-color-switcher [colors]=\"presetColors()\"\n [selectedColor]=\"layer['fill'] || '#000000'\"\n (colorChange)=\"updateColor($event)\"/>\n </div>\n </ng-template>\n </ngs-popover>\n </ngs-toolbar-item>\n <ngs-divider vertical/>\n }\n\n <!-- Opacity -->\n <ngs-toolbar-item>\n <button ngsIconButton\n [ngsPopoverTriggerFor]=\"opacityPopover\"\n position=\"below-center\">\n <ngs-icon name=\"fluent:blur-24-regular\"/>\n </button>\n <ngs-popover #opacityPopover>\n <ng-template ngsPopoverContent>\n <div class=\"p-4 w-60 space-y-3\">\n <div class=\"flex justify-between items-center\">\n <label class=\"text-xs font-medium uppercase text-muted-foreground\">Opacity</label>\n <span class=\"text-xs text-muted-foreground\">{{ (layer['opacity'] ?? 1) * 100 | number:'1.0-0' }}%</span>\n </div>\n <ngs-slider [min]=\"0\" [max]=\"1\" [step]=\"0.01\">\n <input ngsSliderThumb\n [value]=\"layer['opacity'] ?? 1\"\n (valueChange)=\"updateOpacity($event)\"/>\n </ngs-slider>\n </div>\n </ng-template>\n </ngs-popover>\n </ngs-toolbar-item>\n\n <!-- Font Selection for text layers -->\n @if (layer.type === 'text') {\n <ngs-toolbar-item>\n <button ngsButton reverse [ngsMenuTriggerFor]=\"fontMenu\">\n <span class=\"truncate max-w-[100px]\">{{ layer['fontFamily'] }}</span>\n <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n </button>\n\n <ngs-menu #fontMenu=\"ngsMenu\">\n <div class=\"min-w-[200px]\">\n @for (font of fonts(); track font) {\n <button ngs-menu-item\n [selected]=\"layer['fontFamily'] === font\"\n (click)=\"updateFont(font)\">\n {{ font }}\n </button>\n }\n </div>\n </ngs-menu>\n </ngs-toolbar-item>\n\n <!-- Text Styles -->\n <ngs-toolbar-item>\n <button ngsIconButton\n [ngsPopoverTriggerFor]=\"boldPopover\"\n position=\"below-center\"\n [class.text-primary]=\"layer['fontWeight'] && layer['fontWeight'] !== 'normal' && layer['fontWeight'] !== 400\"\n title=\"Bold\">\n <ngs-icon name=\"fluent:text-bold-24-regular\"/>\n </button>\n <ngs-popover #boldPopover>\n <ng-template ngsPopoverContent>\n <div class=\"p-4 w-60 space-y-3\">\n <div class=\"flex justify-between items-center\">\n <label class=\"text-xs font-medium uppercase text-muted-foreground\">Font Weight</label>\n <span class=\"text-xs text-muted-foreground\">{{ getFontWeightName(layer['fontWeight']) }}</span>\n </div>\n <ngs-slider [min]=\"300\" [max]=\"900\" [step]=\"100\">\n <input ngsSliderThumb\n [value]=\"layer['fontWeight'] === 'bold' ? 700 : (layer['fontWeight'] === 'normal' ? 400 : (layer['fontWeight'] || 400))\"\n (valueChange)=\"updateFontWeight($event)\"/>\n </ngs-slider>\n </div>\n </ng-template>\n </ngs-popover>\n </ngs-toolbar-item>\n\n <!-- Uppercase -->\n <ngs-toolbar-item>\n <button ngsIconButton\n (click)=\"toggleUppercase()\"\n [class.text-primary]=\"layer['textCase'] === 'upper'\"\n title=\"Uppercase\">\n <ngs-icon name=\"fluent:text-case-uppercase-24-regular\"/>\n </button>\n </ngs-toolbar-item>\n\n <ngs-toolbar-item>\n <ngs-button-toggle-group multiple\n hideSelectionIndicator\n [value]=\"getTextStyle()\"\n (valueChange)=\"updateTextStyle($event)\">\n <ngs-button-toggle value=\"italic\" title=\"Italic\">\n <ngs-icon name=\"fluent:text-italic-24-regular\"/>\n </ngs-button-toggle>\n <ngs-button-toggle value=\"underline\" title=\"Underline\">\n <ngs-icon name=\"fluent:text-underline-24-regular\"/>\n </ngs-button-toggle>\n <ngs-button-toggle value=\"line-through\" title=\"Strikethrough\">\n <ngs-icon name=\"fluent:text-strikethrough-24-regular\"/>\n </ngs-button-toggle>\n </ngs-button-toggle-group>\n </ngs-toolbar-item>\n\n <!-- Text Alignment -->\n <ngs-toolbar-item>\n <button ngsIconButton\n [ngsPopoverTriggerFor]=\"alignPopover\"\n position=\"below-center\"\n title=\"Alignment\">\n <ngs-icon [name]=\"'fluent:text-align-' + (layer['align'] || 'left') + '-24-regular'\"/>\n </button>\n <ngs-popover #alignPopover>\n <ng-template ngsPopoverContent>\n <div class=\"p-2 flex gap-1\">\n <button ngsIconButton (click)=\"updateTextAlign('left')\" [class.text-primary]=\"layer['align'] === 'left'\">\n <ngs-icon name=\"fluent:text-align-left-24-regular\"/>\n </button>\n <button ngsIconButton (click)=\"updateTextAlign('center')\" [class.text-primary]=\"layer['align'] === 'center'\">\n <ngs-icon name=\"fluent:text-align-center-24-regular\"/>\n </button>\n <button ngsIconButton (click)=\"updateTextAlign('right')\" [class.text-primary]=\"layer['align'] === 'right'\">\n <ngs-icon name=\"fluent:text-align-right-24-regular\"/>\n </button>\n <button ngsIconButton (click)=\"updateTextAlign('justify')\" [class.text-primary]=\"layer['align'] === 'justify'\">\n <ngs-icon name=\"fluent:text-align-justify-24-regular\"/>\n </button>\n </div>\n </ng-template>\n </ngs-popover>\n </ngs-toolbar-item>\n\n <!-- Spacing (Line Height & Letter Spacing) -->\n <ngs-toolbar-item>\n <button ngsIconButton\n [ngsPopoverTriggerFor]=\"spacingPopover\"\n position=\"below-center\"\n title=\"Spacing\">\n <ngs-icon name=\"fluent:text-line-spacing-24-regular\"/>\n </button>\n <ngs-popover #spacingPopover>\n <ng-template ngsPopoverContent>\n <div class=\"p-4 w-60 space-y-6\">\n <div class=\"space-y-3\">\n <div class=\"flex justify-between items-center\">\n <label class=\"text-xs font-medium uppercase text-muted-foreground\">Line Height</label>\n <span class=\"text-xs text-muted-foreground\">{{ layer['lineHeight'] || 1.2 | number:'1.1-1' }}</span>\n </div>\n <ngs-slider [min]=\"0.5\" [max]=\"3\" [step]=\"0.1\">\n <input ngsSliderThumb\n [value]=\"layer['lineHeight'] || 1.2\"\n (valueChange)=\"updateLineHeight($event)\"/>\n </ngs-slider>\n </div>\n <div class=\"space-y-3\">\n <div class=\"flex justify-between items-center\">\n <label class=\"text-xs font-medium uppercase text-muted-foreground\">Letter Spacing</label>\n <span class=\"text-xs text-muted-foreground\">{{ layer['letterSpacing'] || 0 }}</span>\n </div>\n <ngs-slider [min]=\"-5\" [max]=\"50\" [step]=\"1\">\n <input ngsSliderThumb\n [value]=\"layer['letterSpacing'] || 0\"\n (valueChange)=\"updateLetterSpacing($event)\"/>\n </ngs-slider>\n </div>\n </div>\n </ng-template>\n </ngs-popover>\n </ngs-toolbar-item>\n }\n\n @if (layer.type === 'image') {\n <ngs-toolbar-item>\n <button ngsButton reverse [ngsMenuTriggerFor]=\"flipMenu\">\n <span>Flip</span>\n <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n </button>\n\n <ngs-menu #flipMenu=\"ngsMenu\">\n <div class=\"min-w-[150px]\">\n <button ngs-menu-item (click)=\"flipHorizontal()\">\n <ngs-icon name=\"fluent:flip-horizontal-24-regular\" class=\"mr-2\"/>\n <span>Flip horizontally</span>\n </button>\n <button ngs-menu-item (click)=\"flipVertical()\">\n <ngs-icon name=\"fluent:flip-vertical-24-regular\" class=\"mr-2\"/>\n <span>Flip vertically</span>\n </button>\n </div>\n </ngs-menu>\n </ngs-toolbar-item>\n\n <ngs-toolbar-item>\n <button ngsButton reverse [ngsMenuTriggerFor]=\"fitMenu\">\n <span>Fit to</span>\n <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n </button>\n\n <ngs-menu #fitMenu=\"ngsMenu\">\n <div class=\"min-w-[150px]\">\n <button ngs-menu-item (click)=\"fitToPage()\">\n <span>Fit to page</span>\n </button>\n <button ngs-menu-item (click)=\"fillPage()\">\n <span>Fill page</span>\n </button>\n </div>\n </ngs-menu>\n </ngs-toolbar-item>\n }\n\n <ngs-toolbar-item>\n <button ngsButton reverse (click)=\"openEffects()\">\n <span>Effects</span>\n </button>\n </ngs-toolbar-item>\n\n <ngs-toolbar-spacer/>\n\n <!-- <ngs-divider vertical/>-->\n\n <ngs-toolbar-item>\n <button ngsIconButton (click)=\"toggleLock()\">\n <ngs-icon [name]=\"layer['locked'] ? 'fluent:lock-closed-24-regular' : 'fluent:lock-open-24-regular'\"/>\n </button>\n </ngs-toolbar-item>\n\n </ngs-toolbar>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ColorSwitcher, selector: "ngs-color-switcher", inputs: ["colors", "selectedColor", "disabled"], outputs: ["colorChange"], exportAs: ["ngsColorSwitcher"] }, { kind: "component", type: Slider, selector: "ngs-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["ngsSlider"] }, { kind: "directive", type: SliderThumb, selector: "input[ngsSliderThumb]", inputs: ["value"], outputs: ["valueChange"], exportAs: ["ngsSliderThumb"] }, { kind: "component", type: Toolbar, selector: "ngs-toolbar", exportAs: ["ngsToolbar"] }, { kind: "component", type: ToolbarItem, selector: "ngs-toolbar-item", inputs: ["hidden"], outputs: ["hiddenChange"] }, { kind: "component", type: Popover, selector: "ngs-popover", exportAs: ["ngsPopover"] }, { kind: "directive", type: PopoverContent, selector: "[ngsPopoverContent]" }, { kind: "directive", type: PopoverTriggerForDirective, selector: "[ngsPopoverTriggerFor]", inputs: ["ngsPopoverTriggerFor", "ngsPopoverContext", "trigger", "position", "delay", "origin", "closeOnOriginClick", "closeOnOriginMouseLeave", "hasBackdrop"], outputs: ["opened", "closed"], exportAs: ["ngsPopoverTriggerFor"] }, { 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: Divider, selector: "ngs-divider", inputs: ["vertical", "inset", "fixedHeight"], exportAs: ["ngsDivider"] }, { kind: "component", type: Menu, selector: "ngs-menu", inputs: ["role", "classList", "xPosition", "yPosition"], outputs: ["closed"], exportAs: ["ngsMenu"] }, { kind: "component", type: MenuItem, selector: "ngs-menu-item, [ngs-menu-item]", inputs: ["disabled", "role", "selected"], outputs: ["_triggered"], exportAs: ["ngsMenuItem"] }, { kind: "directive", type: MenuTrigger, selector: "[ngsMenuTriggerFor]", inputs: ["ngsMenuTriggerFor", "ngsMenuTriggerData", "ngsMenuDisabled", "xPosition", "yPosition", "ngsMenuTriggerRestoreFocus"], outputs: ["menuOpened", "menuClosed"], exportAs: ["ngsMenuTrigger"] }, { kind: "directive", type: Ripple, selector: "[ngsRipple]", inputs: ["ngsRippleColor", "ngsRippleUnbounded", "ngsRippleCentered", "ngsRippleRadius", "ngsRippleAnimation", "ngsRippleDisabled", "ngsRippleTrigger"], outputs: ["ngsRippleCenteredChange", "ngsRippleDisabledChange", "ngsRippleTriggerChange"], exportAs: ["ngsRipple"] }, { kind: "component", type: ToolbarSpacer, selector: "ngs-toolbar-spacer" }, { kind: "component", type: ButtonToggle, selector: "ngs-button-toggle", inputs: ["id", "value", "name", "checked", "disabled", "onlyIcon"], outputs: ["change"], exportAs: ["ngsButtonToggle"] }, { kind: "component", type: ButtonToggleGroup, selector: "ngs-button-toggle-group", inputs: ["appearance", "disabled", "multiple", "hideSelectionIndicator", "vertical", "value", "onlyIcon"], outputs: ["valueChange", "change"], exportAs: ["ngsButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3041
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Settings, isStandalone: true, selector: "ngs-settings", ngImport: i0, template: "@let layer = selectedLayer();\n\n@if (layer) {\n <ngs-toolbar\n class=\"h-14 z-10 bg-surface-container-lowest border-b border-border px-5 absolute top-0 left-0 right-0\">\n <!-- Color -->\n @if (showColorPicker()) {\n <ngs-toolbar-item>\n <button [ngsPopoverTriggerFor]=\"colorPopover\"\n position=\"below-center\"\n class=\"size-7 cursor-pointer hover:ring-2 hover:ring-primary rounded-full border border-border\"\n ngsRipple\n [style.backgroundColor]=\"layer['fill'] || '#000000'\">\n </button>\n <ngs-popover #colorPopover>\n <ng-template ngsPopoverContent>\n <div class=\"p-4 w-72\">\n <div class=\"text-xs font-medium uppercase text-muted-foreground mb-4\">\n {{ layer.type === 'text' ? 'Text Color' : 'Fill Color' }}\n </div>\n <ngs-color-switcher [colors]=\"presetColors()\"\n [selectedColor]=\"layer['fill'] || '#000000'\"\n (colorChange)=\"updateColor($event)\"/>\n </div>\n </ng-template>\n </ngs-popover>\n </ngs-toolbar-item>\n <ngs-divider vertical/>\n }\n\n <!-- Opacity -->\n <ngs-toolbar-item>\n <button ngsIconButton\n [ngsPopoverTriggerFor]=\"opacityPopover\"\n position=\"below-center\">\n <ngs-icon name=\"fluent:blur-24-regular\"/>\n </button>\n <ngs-popover #opacityPopover>\n <ng-template ngsPopoverContent>\n <div class=\"p-4 w-60 space-y-3\">\n <div class=\"flex justify-between items-center\">\n <label class=\"text-xs font-medium uppercase text-muted-foreground\">Opacity</label>\n <span class=\"text-xs text-muted-foreground\">{{ (layer['opacity'] ?? 1) * 100 | number:'1.0-0' }}%</span>\n </div>\n <ngs-slider [min]=\"0\" [max]=\"1\" [step]=\"0.01\">\n <input ngsSliderThumb\n [value]=\"layer['opacity'] ?? 1\"\n (valueChange)=\"updateOpacity($event)\"/>\n </ngs-slider>\n </div>\n </ng-template>\n </ngs-popover>\n </ngs-toolbar-item>\n\n <!-- Font Selection for text layers -->\n @if (layer.type === 'text') {\n <ngs-toolbar-item>\n <button ngsButton reverse [ngsMenuTriggerFor]=\"fontMenu\">\n <span class=\"truncate max-w-[100px]\">{{ layer['fontFamily'] }}</span>\n <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n </button>\n\n <ngs-menu #fontMenu=\"ngsMenu\">\n <div class=\"min-w-[200px]\">\n @for (font of fonts(); track font) {\n <button ngs-menu-item\n [selected]=\"layer['fontFamily'] === font\"\n (click)=\"updateFont(font)\">\n {{ font }}\n </button>\n }\n </div>\n </ngs-menu>\n </ngs-toolbar-item>\n\n <!-- Text Styles -->\n <ngs-toolbar-item>\n <button ngsIconButton\n [ngsPopoverTriggerFor]=\"boldPopover\"\n position=\"below-center\"\n [class.text-primary]=\"layer['fontWeight'] && layer['fontWeight'] !== 'normal' && layer['fontWeight'] !== 400\"\n title=\"Bold\">\n <ngs-icon name=\"fluent:text-bold-24-regular\"/>\n </button>\n <ngs-popover #boldPopover>\n <ng-template ngsPopoverContent>\n <div class=\"p-4 w-60 space-y-3\">\n <div class=\"flex justify-between items-center\">\n <label class=\"text-xs font-medium uppercase text-muted-foreground\">Font Weight</label>\n <span class=\"text-xs text-muted-foreground\">{{ getFontWeightName(layer['fontWeight']) }}</span>\n </div>\n <ngs-slider [min]=\"300\" [max]=\"900\" [step]=\"100\">\n <input ngsSliderThumb\n [value]=\"layer['fontWeight'] === 'bold' ? 700 : (layer['fontWeight'] === 'normal' ? 400 : (layer['fontWeight'] || 400))\"\n (valueChange)=\"updateFontWeight($event)\"/>\n </ngs-slider>\n </div>\n </ng-template>\n </ngs-popover>\n </ngs-toolbar-item>\n\n <!-- Uppercase -->\n <ngs-toolbar-item>\n <button ngsIconButton\n (click)=\"toggleUppercase()\"\n [class.text-primary]=\"layer['textCase'] === 'upper'\"\n title=\"Uppercase\">\n <ngs-icon name=\"fluent:text-case-uppercase-24-regular\"/>\n </button>\n </ngs-toolbar-item>\n\n <ngs-toolbar-item>\n <ngs-button-toggle-group multiple\n hideSelectionIndicator\n onlyIcon\n [value]=\"getTextStyle()\"\n (valueChange)=\"updateTextStyle($event)\">\n <ngs-button-toggle value=\"italic\" title=\"Italic\">\n <ngs-icon name=\"fluent:text-italic-24-regular\"/>\n </ngs-button-toggle>\n <ngs-button-toggle value=\"underline\" title=\"Underline\">\n <ngs-icon name=\"fluent:text-underline-24-regular\"/>\n </ngs-button-toggle>\n <ngs-button-toggle value=\"line-through\" title=\"Strikethrough\">\n <ngs-icon name=\"fluent:text-strikethrough-24-regular\"/>\n </ngs-button-toggle>\n </ngs-button-toggle-group>\n </ngs-toolbar-item>\n\n <!-- Text Alignment -->\n <ngs-toolbar-item>\n <button ngsIconButton\n [ngsPopoverTriggerFor]=\"alignPopover\"\n position=\"below-center\"\n title=\"Alignment\">\n <ngs-icon [name]=\"'fluent:text-align-' + (layer['align'] || 'left') + '-24-regular'\"/>\n </button>\n <ngs-popover #alignPopover>\n <ng-template ngsPopoverContent>\n <div class=\"p-2 flex gap-1\">\n <button ngsIconButton (click)=\"updateTextAlign('left')\" [class.text-primary]=\"layer['align'] === 'left'\">\n <ngs-icon name=\"fluent:text-align-left-24-regular\"/>\n </button>\n <button ngsIconButton (click)=\"updateTextAlign('center')\" [class.text-primary]=\"layer['align'] === 'center'\">\n <ngs-icon name=\"fluent:text-align-center-24-regular\"/>\n </button>\n <button ngsIconButton (click)=\"updateTextAlign('right')\" [class.text-primary]=\"layer['align'] === 'right'\">\n <ngs-icon name=\"fluent:text-align-right-24-regular\"/>\n </button>\n <button ngsIconButton (click)=\"updateTextAlign('justify')\" [class.text-primary]=\"layer['align'] === 'justify'\">\n <ngs-icon name=\"fluent:text-align-justify-24-regular\"/>\n </button>\n </div>\n </ng-template>\n </ngs-popover>\n </ngs-toolbar-item>\n\n <!-- Spacing (Line Height & Letter Spacing) -->\n <ngs-toolbar-item>\n <button ngsIconButton\n [ngsPopoverTriggerFor]=\"spacingPopover\"\n position=\"below-center\"\n title=\"Spacing\">\n <ngs-icon name=\"fluent:text-line-spacing-24-regular\"/>\n </button>\n <ngs-popover #spacingPopover>\n <ng-template ngsPopoverContent>\n <div class=\"p-4 w-60 space-y-6\">\n <div class=\"space-y-3\">\n <div class=\"flex justify-between items-center\">\n <label class=\"text-xs font-medium uppercase text-muted-foreground\">Line Height</label>\n <span class=\"text-xs text-muted-foreground\">{{ layer['lineHeight'] || 1.2 | number:'1.1-1' }}</span>\n </div>\n <ngs-slider [min]=\"0.5\" [max]=\"3\" [step]=\"0.1\">\n <input ngsSliderThumb\n [value]=\"layer['lineHeight'] || 1.2\"\n (valueChange)=\"updateLineHeight($event)\"/>\n </ngs-slider>\n </div>\n <div class=\"space-y-3\">\n <div class=\"flex justify-between items-center\">\n <label class=\"text-xs font-medium uppercase text-muted-foreground\">Letter Spacing</label>\n <span class=\"text-xs text-muted-foreground\">{{ layer['letterSpacing'] || 0 }}</span>\n </div>\n <ngs-slider [min]=\"-5\" [max]=\"50\" [step]=\"1\">\n <input ngsSliderThumb\n [value]=\"layer['letterSpacing'] || 0\"\n (valueChange)=\"updateLetterSpacing($event)\"/>\n </ngs-slider>\n </div>\n </div>\n </ng-template>\n </ngs-popover>\n </ngs-toolbar-item>\n }\n\n @if (layer.type === 'image') {\n <ngs-toolbar-item>\n <button ngsButton reverse [ngsMenuTriggerFor]=\"flipMenu\">\n <span>Flip</span>\n <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n </button>\n\n <ngs-menu #flipMenu=\"ngsMenu\">\n <div class=\"min-w-[150px]\">\n <button ngs-menu-item (click)=\"flipHorizontal()\">\n <ngs-icon name=\"fluent:flip-horizontal-24-regular\" class=\"mr-2\"/>\n <span>Flip horizontally</span>\n </button>\n <button ngs-menu-item (click)=\"flipVertical()\">\n <ngs-icon name=\"fluent:flip-vertical-24-regular\" class=\"mr-2\"/>\n <span>Flip vertically</span>\n </button>\n </div>\n </ngs-menu>\n </ngs-toolbar-item>\n\n <ngs-toolbar-item>\n <button ngsButton reverse [ngsMenuTriggerFor]=\"fitMenu\">\n <span>Fit to</span>\n <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n </button>\n\n <ngs-menu #fitMenu=\"ngsMenu\">\n <div class=\"min-w-[150px]\">\n <button ngs-menu-item (click)=\"fitToPage()\">\n <span>Fit to page</span>\n </button>\n <button ngs-menu-item (click)=\"fillPage()\">\n <span>Fill page</span>\n </button>\n </div>\n </ngs-menu>\n </ngs-toolbar-item>\n }\n\n <ngs-toolbar-item>\n <button ngsButton reverse (click)=\"openEffects()\">\n <span>Effects</span>\n </button>\n </ngs-toolbar-item>\n\n <ngs-toolbar-spacer/>\n\n <!-- <ngs-divider vertical/>-->\n\n <ngs-toolbar-item>\n <button ngsIconButton (click)=\"toggleLock()\">\n <ngs-icon [name]=\"layer['locked'] ? 'fluent:lock-closed-24-regular' : 'fluent:lock-open-24-regular'\"/>\n </button>\n </ngs-toolbar-item>\n\n </ngs-toolbar>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ColorSwitcher, selector: "ngs-color-switcher", inputs: ["colors", "selectedColor", "disabled"], outputs: ["colorChange"], exportAs: ["ngsColorSwitcher"] }, { kind: "component", type: Slider, selector: "ngs-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["ngsSlider"] }, { kind: "directive", type: SliderThumb, selector: "input[ngsSliderThumb]", inputs: ["value"], outputs: ["valueChange"], exportAs: ["ngsSliderThumb"] }, { kind: "component", type: Toolbar, selector: "ngs-toolbar", exportAs: ["ngsToolbar"] }, { kind: "component", type: ToolbarItem, selector: "ngs-toolbar-item", inputs: ["hidden"], outputs: ["hiddenChange"] }, { kind: "component", type: Popover, selector: "ngs-popover", exportAs: ["ngsPopover"] }, { kind: "directive", type: PopoverContent, selector: "[ngsPopoverContent]" }, { kind: "directive", type: PopoverTriggerForDirective, selector: "[ngsPopoverTriggerFor]", inputs: ["ngsPopoverTriggerFor", "ngsPopoverContext", "trigger", "position", "delay", "origin", "closeOnOriginClick", "closeOnOriginMouseLeave", "hasBackdrop"], outputs: ["opened", "closed"], exportAs: ["ngsPopoverTriggerFor"] }, { 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: Divider, selector: "ngs-divider", inputs: ["vertical", "inset", "fixedHeight"], exportAs: ["ngsDivider"] }, { kind: "component", type: Menu, selector: "ngs-menu", inputs: ["role", "classList", "xPosition", "yPosition"], outputs: ["closed"], exportAs: ["ngsMenu"] }, { kind: "component", type: MenuItem, selector: "ngs-menu-item, [ngs-menu-item]", inputs: ["disabled", "role", "selected"], outputs: ["_triggered"], exportAs: ["ngsMenuItem"] }, { kind: "directive", type: MenuTrigger, selector: "[ngsMenuTriggerFor]", inputs: ["ngsMenuTriggerFor", "ngsMenuTriggerData", "ngsMenuDisabled", "xPosition", "yPosition", "ngsMenuTriggerRestoreFocus"], outputs: ["menuOpened", "menuClosed"], exportAs: ["ngsMenuTrigger"] }, { kind: "directive", type: Ripple, selector: "[ngsRipple]", inputs: ["ngsRippleColor", "ngsRippleUnbounded", "ngsRippleCentered", "ngsRippleRadius", "ngsRippleAnimation", "ngsRippleDisabled", "ngsRippleTrigger"], outputs: ["ngsRippleCenteredChange", "ngsRippleDisabledChange", "ngsRippleTriggerChange"], exportAs: ["ngsRipple"] }, { kind: "component", type: ToolbarSpacer, selector: "ngs-toolbar-spacer" }, { kind: "component", type: ButtonToggle, selector: "ngs-button-toggle", inputs: ["id", "value", "name", "checked", "disabled", "onlyIcon"], outputs: ["change"], exportAs: ["ngsButtonToggle"] }, { kind: "component", type: ButtonToggleGroup, selector: "ngs-button-toggle-group", inputs: ["appearance", "disabled", "multiple", "hideSelectionIndicator", "vertical", "value", "onlyIcon"], outputs: ["valueChange", "change"], exportAs: ["ngsButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3042
3042
|
}
|
|
3043
3043
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Settings, decorators: [{
|
|
3044
3044
|
type: Component,
|
|
@@ -3064,7 +3064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
3064
3064
|
ButtonToggle,
|
|
3065
3065
|
ButtonToggleGroup,
|
|
3066
3066
|
FormsModule
|
|
3067
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let layer = selectedLayer();\n\n@if (layer) {\n <ngs-toolbar\n class=\"h-14 z-10 bg-surface-container-lowest border-b border-border px-5 absolute top-0 left-0 right-0\">\n <!-- Color -->\n @if (showColorPicker()) {\n <ngs-toolbar-item>\n <button [ngsPopoverTriggerFor]=\"colorPopover\"\n position=\"below-center\"\n class=\"size-7 cursor-pointer hover:ring-2 hover:ring-primary rounded-full border border-border\"\n ngsRipple\n [style.backgroundColor]=\"layer['fill'] || '#000000'\">\n </button>\n <ngs-popover #colorPopover>\n <ng-template ngsPopoverContent>\n <div class=\"p-4 w-72\">\n <div class=\"text-xs font-medium uppercase text-muted-foreground mb-4\">\n {{ layer.type === 'text' ? 'Text Color' : 'Fill Color' }}\n </div>\n <ngs-color-switcher [colors]=\"presetColors()\"\n [selectedColor]=\"layer['fill'] || '#000000'\"\n (colorChange)=\"updateColor($event)\"/>\n </div>\n </ng-template>\n </ngs-popover>\n </ngs-toolbar-item>\n <ngs-divider vertical/>\n }\n\n <!-- Opacity -->\n <ngs-toolbar-item>\n <button ngsIconButton\n [ngsPopoverTriggerFor]=\"opacityPopover\"\n position=\"below-center\">\n <ngs-icon name=\"fluent:blur-24-regular\"/>\n </button>\n <ngs-popover #opacityPopover>\n <ng-template ngsPopoverContent>\n <div class=\"p-4 w-60 space-y-3\">\n <div class=\"flex justify-between items-center\">\n <label class=\"text-xs font-medium uppercase text-muted-foreground\">Opacity</label>\n <span class=\"text-xs text-muted-foreground\">{{ (layer['opacity'] ?? 1) * 100 | number:'1.0-0' }}%</span>\n </div>\n <ngs-slider [min]=\"0\" [max]=\"1\" [step]=\"0.01\">\n <input ngsSliderThumb\n [value]=\"layer['opacity'] ?? 1\"\n (valueChange)=\"updateOpacity($event)\"/>\n </ngs-slider>\n </div>\n </ng-template>\n </ngs-popover>\n </ngs-toolbar-item>\n\n <!-- Font Selection for text layers -->\n @if (layer.type === 'text') {\n <ngs-toolbar-item>\n <button ngsButton reverse [ngsMenuTriggerFor]=\"fontMenu\">\n <span class=\"truncate max-w-[100px]\">{{ layer['fontFamily'] }}</span>\n <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n </button>\n\n <ngs-menu #fontMenu=\"ngsMenu\">\n <div class=\"min-w-[200px]\">\n @for (font of fonts(); track font) {\n <button ngs-menu-item\n [selected]=\"layer['fontFamily'] === font\"\n (click)=\"updateFont(font)\">\n {{ font }}\n </button>\n }\n </div>\n </ngs-menu>\n </ngs-toolbar-item>\n\n <!-- Text Styles -->\n <ngs-toolbar-item>\n <button ngsIconButton\n [ngsPopoverTriggerFor]=\"boldPopover\"\n position=\"below-center\"\n [class.text-primary]=\"layer['fontWeight'] && layer['fontWeight'] !== 'normal' && layer['fontWeight'] !== 400\"\n title=\"Bold\">\n <ngs-icon name=\"fluent:text-bold-24-regular\"/>\n </button>\n <ngs-popover #boldPopover>\n <ng-template ngsPopoverContent>\n <div class=\"p-4 w-60 space-y-3\">\n <div class=\"flex justify-between items-center\">\n <label class=\"text-xs font-medium uppercase text-muted-foreground\">Font Weight</label>\n <span class=\"text-xs text-muted-foreground\">{{ getFontWeightName(layer['fontWeight']) }}</span>\n </div>\n <ngs-slider [min]=\"300\" [max]=\"900\" [step]=\"100\">\n <input ngsSliderThumb\n [value]=\"layer['fontWeight'] === 'bold' ? 700 : (layer['fontWeight'] === 'normal' ? 400 : (layer['fontWeight'] || 400))\"\n (valueChange)=\"updateFontWeight($event)\"/>\n </ngs-slider>\n </div>\n </ng-template>\n </ngs-popover>\n </ngs-toolbar-item>\n\n <!-- Uppercase -->\n <ngs-toolbar-item>\n <button ngsIconButton\n (click)=\"toggleUppercase()\"\n [class.text-primary]=\"layer['textCase'] === 'upper'\"\n title=\"Uppercase\">\n <ngs-icon name=\"fluent:text-case-uppercase-24-regular\"/>\n </button>\n </ngs-toolbar-item>\n\n <ngs-toolbar-item>\n <ngs-button-toggle-group multiple\n hideSelectionIndicator\n [value]=\"getTextStyle()\"\n (valueChange)=\"updateTextStyle($event)\">\n <ngs-button-toggle value=\"italic\" title=\"Italic\">\n <ngs-icon name=\"fluent:text-italic-24-regular\"/>\n </ngs-button-toggle>\n <ngs-button-toggle value=\"underline\" title=\"Underline\">\n <ngs-icon name=\"fluent:text-underline-24-regular\"/>\n </ngs-button-toggle>\n <ngs-button-toggle value=\"line-through\" title=\"Strikethrough\">\n <ngs-icon name=\"fluent:text-strikethrough-24-regular\"/>\n </ngs-button-toggle>\n </ngs-button-toggle-group>\n </ngs-toolbar-item>\n\n <!-- Text Alignment -->\n <ngs-toolbar-item>\n <button ngsIconButton\n [ngsPopoverTriggerFor]=\"alignPopover\"\n position=\"below-center\"\n title=\"Alignment\">\n <ngs-icon [name]=\"'fluent:text-align-' + (layer['align'] || 'left') + '-24-regular'\"/>\n </button>\n <ngs-popover #alignPopover>\n <ng-template ngsPopoverContent>\n <div class=\"p-2 flex gap-1\">\n <button ngsIconButton (click)=\"updateTextAlign('left')\" [class.text-primary]=\"layer['align'] === 'left'\">\n <ngs-icon name=\"fluent:text-align-left-24-regular\"/>\n </button>\n <button ngsIconButton (click)=\"updateTextAlign('center')\" [class.text-primary]=\"layer['align'] === 'center'\">\n <ngs-icon name=\"fluent:text-align-center-24-regular\"/>\n </button>\n <button ngsIconButton (click)=\"updateTextAlign('right')\" [class.text-primary]=\"layer['align'] === 'right'\">\n <ngs-icon name=\"fluent:text-align-right-24-regular\"/>\n </button>\n <button ngsIconButton (click)=\"updateTextAlign('justify')\" [class.text-primary]=\"layer['align'] === 'justify'\">\n <ngs-icon name=\"fluent:text-align-justify-24-regular\"/>\n </button>\n </div>\n </ng-template>\n </ngs-popover>\n </ngs-toolbar-item>\n\n <!-- Spacing (Line Height & Letter Spacing) -->\n <ngs-toolbar-item>\n <button ngsIconButton\n [ngsPopoverTriggerFor]=\"spacingPopover\"\n position=\"below-center\"\n title=\"Spacing\">\n <ngs-icon name=\"fluent:text-line-spacing-24-regular\"/>\n </button>\n <ngs-popover #spacingPopover>\n <ng-template ngsPopoverContent>\n <div class=\"p-4 w-60 space-y-6\">\n <div class=\"space-y-3\">\n <div class=\"flex justify-between items-center\">\n <label class=\"text-xs font-medium uppercase text-muted-foreground\">Line Height</label>\n <span class=\"text-xs text-muted-foreground\">{{ layer['lineHeight'] || 1.2 | number:'1.1-1' }}</span>\n </div>\n <ngs-slider [min]=\"0.5\" [max]=\"3\" [step]=\"0.1\">\n <input ngsSliderThumb\n [value]=\"layer['lineHeight'] || 1.2\"\n (valueChange)=\"updateLineHeight($event)\"/>\n </ngs-slider>\n </div>\n <div class=\"space-y-3\">\n <div class=\"flex justify-between items-center\">\n <label class=\"text-xs font-medium uppercase text-muted-foreground\">Letter Spacing</label>\n <span class=\"text-xs text-muted-foreground\">{{ layer['letterSpacing'] || 0 }}</span>\n </div>\n <ngs-slider [min]=\"-5\" [max]=\"50\" [step]=\"1\">\n <input ngsSliderThumb\n [value]=\"layer['letterSpacing'] || 0\"\n (valueChange)=\"updateLetterSpacing($event)\"/>\n </ngs-slider>\n </div>\n </div>\n </ng-template>\n </ngs-popover>\n </ngs-toolbar-item>\n }\n\n @if (layer.type === 'image') {\n <ngs-toolbar-item>\n <button ngsButton reverse [ngsMenuTriggerFor]=\"flipMenu\">\n <span>Flip</span>\n <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n </button>\n\n <ngs-menu #flipMenu=\"ngsMenu\">\n <div class=\"min-w-[150px]\">\n <button ngs-menu-item (click)=\"flipHorizontal()\">\n <ngs-icon name=\"fluent:flip-horizontal-24-regular\" class=\"mr-2\"/>\n <span>Flip horizontally</span>\n </button>\n <button ngs-menu-item (click)=\"flipVertical()\">\n <ngs-icon name=\"fluent:flip-vertical-24-regular\" class=\"mr-2\"/>\n <span>Flip vertically</span>\n </button>\n </div>\n </ngs-menu>\n </ngs-toolbar-item>\n\n <ngs-toolbar-item>\n <button ngsButton reverse [ngsMenuTriggerFor]=\"fitMenu\">\n <span>Fit to</span>\n <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n </button>\n\n <ngs-menu #fitMenu=\"ngsMenu\">\n <div class=\"min-w-[150px]\">\n <button ngs-menu-item (click)=\"fitToPage()\">\n <span>Fit to page</span>\n </button>\n <button ngs-menu-item (click)=\"fillPage()\">\n <span>Fill page</span>\n </button>\n </div>\n </ngs-menu>\n </ngs-toolbar-item>\n }\n\n <ngs-toolbar-item>\n <button ngsButton reverse (click)=\"openEffects()\">\n <span>Effects</span>\n </button>\n </ngs-toolbar-item>\n\n <ngs-toolbar-spacer/>\n\n <!-- <ngs-divider vertical/>-->\n\n <ngs-toolbar-item>\n <button ngsIconButton (click)=\"toggleLock()\">\n <ngs-icon [name]=\"layer['locked'] ? 'fluent:lock-closed-24-regular' : 'fluent:lock-open-24-regular'\"/>\n </button>\n </ngs-toolbar-item>\n\n </ngs-toolbar>\n}\n", styles: [":host{display:contents}\n"] }]
|
|
3067
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let layer = selectedLayer();\n\n@if (layer) {\n <ngs-toolbar\n class=\"h-14 z-10 bg-surface-container-lowest border-b border-border px-5 absolute top-0 left-0 right-0\">\n <!-- Color -->\n @if (showColorPicker()) {\n <ngs-toolbar-item>\n <button [ngsPopoverTriggerFor]=\"colorPopover\"\n position=\"below-center\"\n class=\"size-7 cursor-pointer hover:ring-2 hover:ring-primary rounded-full border border-border\"\n ngsRipple\n [style.backgroundColor]=\"layer['fill'] || '#000000'\">\n </button>\n <ngs-popover #colorPopover>\n <ng-template ngsPopoverContent>\n <div class=\"p-4 w-72\">\n <div class=\"text-xs font-medium uppercase text-muted-foreground mb-4\">\n {{ layer.type === 'text' ? 'Text Color' : 'Fill Color' }}\n </div>\n <ngs-color-switcher [colors]=\"presetColors()\"\n [selectedColor]=\"layer['fill'] || '#000000'\"\n (colorChange)=\"updateColor($event)\"/>\n </div>\n </ng-template>\n </ngs-popover>\n </ngs-toolbar-item>\n <ngs-divider vertical/>\n }\n\n <!-- Opacity -->\n <ngs-toolbar-item>\n <button ngsIconButton\n [ngsPopoverTriggerFor]=\"opacityPopover\"\n position=\"below-center\">\n <ngs-icon name=\"fluent:blur-24-regular\"/>\n </button>\n <ngs-popover #opacityPopover>\n <ng-template ngsPopoverContent>\n <div class=\"p-4 w-60 space-y-3\">\n <div class=\"flex justify-between items-center\">\n <label class=\"text-xs font-medium uppercase text-muted-foreground\">Opacity</label>\n <span class=\"text-xs text-muted-foreground\">{{ (layer['opacity'] ?? 1) * 100 | number:'1.0-0' }}%</span>\n </div>\n <ngs-slider [min]=\"0\" [max]=\"1\" [step]=\"0.01\">\n <input ngsSliderThumb\n [value]=\"layer['opacity'] ?? 1\"\n (valueChange)=\"updateOpacity($event)\"/>\n </ngs-slider>\n </div>\n </ng-template>\n </ngs-popover>\n </ngs-toolbar-item>\n\n <!-- Font Selection for text layers -->\n @if (layer.type === 'text') {\n <ngs-toolbar-item>\n <button ngsButton reverse [ngsMenuTriggerFor]=\"fontMenu\">\n <span class=\"truncate max-w-[100px]\">{{ layer['fontFamily'] }}</span>\n <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n </button>\n\n <ngs-menu #fontMenu=\"ngsMenu\">\n <div class=\"min-w-[200px]\">\n @for (font of fonts(); track font) {\n <button ngs-menu-item\n [selected]=\"layer['fontFamily'] === font\"\n (click)=\"updateFont(font)\">\n {{ font }}\n </button>\n }\n </div>\n </ngs-menu>\n </ngs-toolbar-item>\n\n <!-- Text Styles -->\n <ngs-toolbar-item>\n <button ngsIconButton\n [ngsPopoverTriggerFor]=\"boldPopover\"\n position=\"below-center\"\n [class.text-primary]=\"layer['fontWeight'] && layer['fontWeight'] !== 'normal' && layer['fontWeight'] !== 400\"\n title=\"Bold\">\n <ngs-icon name=\"fluent:text-bold-24-regular\"/>\n </button>\n <ngs-popover #boldPopover>\n <ng-template ngsPopoverContent>\n <div class=\"p-4 w-60 space-y-3\">\n <div class=\"flex justify-between items-center\">\n <label class=\"text-xs font-medium uppercase text-muted-foreground\">Font Weight</label>\n <span class=\"text-xs text-muted-foreground\">{{ getFontWeightName(layer['fontWeight']) }}</span>\n </div>\n <ngs-slider [min]=\"300\" [max]=\"900\" [step]=\"100\">\n <input ngsSliderThumb\n [value]=\"layer['fontWeight'] === 'bold' ? 700 : (layer['fontWeight'] === 'normal' ? 400 : (layer['fontWeight'] || 400))\"\n (valueChange)=\"updateFontWeight($event)\"/>\n </ngs-slider>\n </div>\n </ng-template>\n </ngs-popover>\n </ngs-toolbar-item>\n\n <!-- Uppercase -->\n <ngs-toolbar-item>\n <button ngsIconButton\n (click)=\"toggleUppercase()\"\n [class.text-primary]=\"layer['textCase'] === 'upper'\"\n title=\"Uppercase\">\n <ngs-icon name=\"fluent:text-case-uppercase-24-regular\"/>\n </button>\n </ngs-toolbar-item>\n\n <ngs-toolbar-item>\n <ngs-button-toggle-group multiple\n hideSelectionIndicator\n onlyIcon\n [value]=\"getTextStyle()\"\n (valueChange)=\"updateTextStyle($event)\">\n <ngs-button-toggle value=\"italic\" title=\"Italic\">\n <ngs-icon name=\"fluent:text-italic-24-regular\"/>\n </ngs-button-toggle>\n <ngs-button-toggle value=\"underline\" title=\"Underline\">\n <ngs-icon name=\"fluent:text-underline-24-regular\"/>\n </ngs-button-toggle>\n <ngs-button-toggle value=\"line-through\" title=\"Strikethrough\">\n <ngs-icon name=\"fluent:text-strikethrough-24-regular\"/>\n </ngs-button-toggle>\n </ngs-button-toggle-group>\n </ngs-toolbar-item>\n\n <!-- Text Alignment -->\n <ngs-toolbar-item>\n <button ngsIconButton\n [ngsPopoverTriggerFor]=\"alignPopover\"\n position=\"below-center\"\n title=\"Alignment\">\n <ngs-icon [name]=\"'fluent:text-align-' + (layer['align'] || 'left') + '-24-regular'\"/>\n </button>\n <ngs-popover #alignPopover>\n <ng-template ngsPopoverContent>\n <div class=\"p-2 flex gap-1\">\n <button ngsIconButton (click)=\"updateTextAlign('left')\" [class.text-primary]=\"layer['align'] === 'left'\">\n <ngs-icon name=\"fluent:text-align-left-24-regular\"/>\n </button>\n <button ngsIconButton (click)=\"updateTextAlign('center')\" [class.text-primary]=\"layer['align'] === 'center'\">\n <ngs-icon name=\"fluent:text-align-center-24-regular\"/>\n </button>\n <button ngsIconButton (click)=\"updateTextAlign('right')\" [class.text-primary]=\"layer['align'] === 'right'\">\n <ngs-icon name=\"fluent:text-align-right-24-regular\"/>\n </button>\n <button ngsIconButton (click)=\"updateTextAlign('justify')\" [class.text-primary]=\"layer['align'] === 'justify'\">\n <ngs-icon name=\"fluent:text-align-justify-24-regular\"/>\n </button>\n </div>\n </ng-template>\n </ngs-popover>\n </ngs-toolbar-item>\n\n <!-- Spacing (Line Height & Letter Spacing) -->\n <ngs-toolbar-item>\n <button ngsIconButton\n [ngsPopoverTriggerFor]=\"spacingPopover\"\n position=\"below-center\"\n title=\"Spacing\">\n <ngs-icon name=\"fluent:text-line-spacing-24-regular\"/>\n </button>\n <ngs-popover #spacingPopover>\n <ng-template ngsPopoverContent>\n <div class=\"p-4 w-60 space-y-6\">\n <div class=\"space-y-3\">\n <div class=\"flex justify-between items-center\">\n <label class=\"text-xs font-medium uppercase text-muted-foreground\">Line Height</label>\n <span class=\"text-xs text-muted-foreground\">{{ layer['lineHeight'] || 1.2 | number:'1.1-1' }}</span>\n </div>\n <ngs-slider [min]=\"0.5\" [max]=\"3\" [step]=\"0.1\">\n <input ngsSliderThumb\n [value]=\"layer['lineHeight'] || 1.2\"\n (valueChange)=\"updateLineHeight($event)\"/>\n </ngs-slider>\n </div>\n <div class=\"space-y-3\">\n <div class=\"flex justify-between items-center\">\n <label class=\"text-xs font-medium uppercase text-muted-foreground\">Letter Spacing</label>\n <span class=\"text-xs text-muted-foreground\">{{ layer['letterSpacing'] || 0 }}</span>\n </div>\n <ngs-slider [min]=\"-5\" [max]=\"50\" [step]=\"1\">\n <input ngsSliderThumb\n [value]=\"layer['letterSpacing'] || 0\"\n (valueChange)=\"updateLetterSpacing($event)\"/>\n </ngs-slider>\n </div>\n </div>\n </ng-template>\n </ngs-popover>\n </ngs-toolbar-item>\n }\n\n @if (layer.type === 'image') {\n <ngs-toolbar-item>\n <button ngsButton reverse [ngsMenuTriggerFor]=\"flipMenu\">\n <span>Flip</span>\n <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n </button>\n\n <ngs-menu #flipMenu=\"ngsMenu\">\n <div class=\"min-w-[150px]\">\n <button ngs-menu-item (click)=\"flipHorizontal()\">\n <ngs-icon name=\"fluent:flip-horizontal-24-regular\" class=\"mr-2\"/>\n <span>Flip horizontally</span>\n </button>\n <button ngs-menu-item (click)=\"flipVertical()\">\n <ngs-icon name=\"fluent:flip-vertical-24-regular\" class=\"mr-2\"/>\n <span>Flip vertically</span>\n </button>\n </div>\n </ngs-menu>\n </ngs-toolbar-item>\n\n <ngs-toolbar-item>\n <button ngsButton reverse [ngsMenuTriggerFor]=\"fitMenu\">\n <span>Fit to</span>\n <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n </button>\n\n <ngs-menu #fitMenu=\"ngsMenu\">\n <div class=\"min-w-[150px]\">\n <button ngs-menu-item (click)=\"fitToPage()\">\n <span>Fit to page</span>\n </button>\n <button ngs-menu-item (click)=\"fillPage()\">\n <span>Fill page</span>\n </button>\n </div>\n </ngs-menu>\n </ngs-toolbar-item>\n }\n\n <ngs-toolbar-item>\n <button ngsButton reverse (click)=\"openEffects()\">\n <span>Effects</span>\n </button>\n </ngs-toolbar-item>\n\n <ngs-toolbar-spacer/>\n\n <!-- <ngs-divider vertical/>-->\n\n <ngs-toolbar-item>\n <button ngsIconButton (click)=\"toggleLock()\">\n <ngs-icon [name]=\"layer['locked'] ? 'fluent:lock-closed-24-regular' : 'fluent:lock-open-24-regular'\"/>\n </button>\n </ngs-toolbar-item>\n\n </ngs-toolbar>\n}\n", styles: [":host{display:contents}\n"] }]
|
|
3068
3068
|
}] });
|
|
3069
3069
|
|
|
3070
3070
|
class Effects {
|