@ngstarter-ui/components 21.0.12 → 21.0.14
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 +24 -8
- package/fesm2022/ngstarter-ui-components-button-toggle.mjs +19 -16
- package/fesm2022/ngstarter-ui-components-button-toggle.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-code-highlighter.mjs +8 -6
- package/fesm2022/ngstarter-ui-components-code-highlighter.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-drawer.mjs +2 -2
- package/fesm2022/ngstarter-ui-components-drawer.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-image-designer.mjs +1 -1
- package/fesm2022/ngstarter-ui-components-image-designer.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-scrollbar-area.mjs +97 -9
- package/fesm2022/ngstarter-ui-components-scrollbar-area.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ngstarter-ui-components-button-toggle.d.ts +23 -22
- package/types/ngstarter-ui-components-scrollbar-area.d.ts +25 -5
|
@@ -98,7 +98,7 @@ class Drawer {
|
|
|
98
98
|
provide: DRAWER,
|
|
99
99
|
useExisting: forwardRef(() => Drawer),
|
|
100
100
|
}
|
|
101
|
-
], viewQueries: [{ propertyName: "portal", first: true, predicate: ["portal"], descendants: true, isSignal: true }], exportAs: ["ngsDrawer"], ngImport: i0, template: "<ng-template #portal>\n <div\n class=\"ngs-drawer-container\"\n [class.open]=\"_isOpen()\">\n <div class=\"ngs-drawer-content\">\n <ng-content/>\n </div>\n </div>\n</ng-template>\n", styles: [".ngs-drawer-container{--ngs-drawer-transition-duration: .15s;--ngs-drawer-transition: cubic-bezier(.4,0,.2,1);position:fixed;z-index:1040;top:0;right:0;max-width:90vw;bottom:0;transform:translate(100%);visibility:hidden;display:flex;flex-direction:column;pointer-events:auto}.ngs-drawer-container.open{transform:translate(0);visibility:visible;transition:transform .3s var(--ngs-drawer-transition),visibility 0s linear 0s}.ngs-drawer-container:not(.open){transition:transform .2s var(--ngs-drawer-transition),visibility 0s linear .2s}.ngs-drawer-content{background:var(--ngs-color-surface-container-lowest);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;outline:var(--ngs-dropdown-border);margin:1.75rem;flex
|
|
101
|
+
], viewQueries: [{ propertyName: "portal", first: true, predicate: ["portal"], descendants: true, isSignal: true }], exportAs: ["ngsDrawer"], ngImport: i0, template: "<ng-template #portal>\n <div\n class=\"ngs-drawer-container\"\n [class.open]=\"_isOpen()\">\n <div class=\"ngs-drawer-content\">\n <ng-content/>\n </div>\n </div>\n</ng-template>\n", styles: [".ngs-drawer-container{--ngs-drawer-transition-duration: .15s;--ngs-drawer-transition: cubic-bezier(.4,0,.2,1);position:fixed;z-index:1040;top:0;right:0;max-width:90vw;bottom:0;transform:translate(100%);visibility:hidden;display:flex;flex-direction:column;min-height:0;pointer-events:auto}.ngs-drawer-container.open{transform:translate(0);visibility:visible;transition:transform .3s var(--ngs-drawer-transition),visibility 0s linear 0s}.ngs-drawer-container:not(.open){transition:transform .2s var(--ngs-drawer-transition),visibility 0s linear .2s}.ngs-drawer-content{background:var(--ngs-color-surface-container-lowest);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;outline:var(--ngs-dropdown-border);margin:1.75rem;display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden;border-radius:1rem;border:1px solid transparent}.drawer-backdrop{background:var(--ngs-overlay-backdrop-bg);opacity:0;transition:opacity .15s cubic-bezier(.4,0,.2,1)}.drawer-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-overlay-pane.pointer-events-none{pointer-events:none!important}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
102
102
|
}
|
|
103
103
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Drawer, decorators: [{
|
|
104
104
|
type: Component,
|
|
@@ -107,7 +107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
107
107
|
provide: DRAWER,
|
|
108
108
|
useExisting: forwardRef(() => Drawer),
|
|
109
109
|
}
|
|
110
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #portal>\n <div\n class=\"ngs-drawer-container\"\n [class.open]=\"_isOpen()\">\n <div class=\"ngs-drawer-content\">\n <ng-content/>\n </div>\n </div>\n</ng-template>\n", styles: [".ngs-drawer-container{--ngs-drawer-transition-duration: .15s;--ngs-drawer-transition: cubic-bezier(.4,0,.2,1);position:fixed;z-index:1040;top:0;right:0;max-width:90vw;bottom:0;transform:translate(100%);visibility:hidden;display:flex;flex-direction:column;pointer-events:auto}.ngs-drawer-container.open{transform:translate(0);visibility:visible;transition:transform .3s var(--ngs-drawer-transition),visibility 0s linear 0s}.ngs-drawer-container:not(.open){transition:transform .2s var(--ngs-drawer-transition),visibility 0s linear .2s}.ngs-drawer-content{background:var(--ngs-color-surface-container-lowest);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;outline:var(--ngs-dropdown-border);margin:1.75rem;flex
|
|
110
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #portal>\n <div\n class=\"ngs-drawer-container\"\n [class.open]=\"_isOpen()\">\n <div class=\"ngs-drawer-content\">\n <ng-content/>\n </div>\n </div>\n</ng-template>\n", styles: [".ngs-drawer-container{--ngs-drawer-transition-duration: .15s;--ngs-drawer-transition: cubic-bezier(.4,0,.2,1);position:fixed;z-index:1040;top:0;right:0;max-width:90vw;bottom:0;transform:translate(100%);visibility:hidden;display:flex;flex-direction:column;min-height:0;pointer-events:auto}.ngs-drawer-container.open{transform:translate(0);visibility:visible;transition:transform .3s var(--ngs-drawer-transition),visibility 0s linear 0s}.ngs-drawer-container:not(.open){transition:transform .2s var(--ngs-drawer-transition),visibility 0s linear .2s}.ngs-drawer-content{background:var(--ngs-color-surface-container-lowest);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;outline:var(--ngs-dropdown-border);margin:1.75rem;display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden;border-radius:1rem;border:1px solid transparent}.drawer-backdrop{background:var(--ngs-overlay-backdrop-bg);opacity:0;transition:opacity .15s cubic-bezier(.4,0,.2,1)}.drawer-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-overlay-pane.pointer-events-none{pointer-events:none!important}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
111
111
|
}], ctorParameters: () => [], propDecorators: { initialIsOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], opened: [{ type: i0.Output, args: ["opened"] }], portal: [{ type: i0.ViewChild, args: ['portal', { isSignal: true }] }] } });
|
|
112
112
|
|
|
113
113
|
class DrawerIgnoreOutsideClickDirective {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ngstarter-ui-components-drawer.mjs","sources":["../../../projects/components/drawer/src/types.ts","../../../projects/components/drawer/src/drawer/drawer.ts","../../../projects/components/drawer/src/drawer/drawer.html","../../../projects/components/drawer/src/drawer-ignore-outside-click.directive.ts","../../../projects/components/drawer/ngstarter-ui-components-drawer.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const DRAWER = new InjectionToken('DRAWER');\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n DestroyRef,\n effect,\n forwardRef,\n inject,\n input,\n OnDestroy,\n output,\n signal,\n Signal,\n TemplateRef,\n viewChild,\n ViewContainerRef,\n ViewEncapsulation,\n WritableSignal,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { DRAWER } from '../types';\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport { timer } from 'rxjs';\n\n@Component({\n selector: 'ngs-drawer',\n exportAs: 'ngsDrawer',\n templateUrl: './drawer.html',\n styleUrl: './drawer.scss',\n standalone: true,\n providers: [\n {\n provide: DRAWER,\n useExisting: forwardRef(() => Drawer),\n }\n ],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Drawer implements OnDestroy {\n private overlay = inject(Overlay);\n private viewContainerRef = inject(ViewContainerRef);\n private destroyRef = inject(DestroyRef);\n\n readonly initialIsOpen = input<boolean | undefined>(undefined, { alias: 'isOpen' });\n readonly showBackdrop = input(true);\n\n readonly closed = output<void>();\n readonly opened = output<void>();\n\n private internalIsOpen: WritableSignal<boolean> = signal(false);\n private overlayRef: OverlayRef | null = null;\n protected portal = viewChild.required<TemplateRef<any>>('portal');\n\n protected _isOpen: Signal<boolean> = computed(() => this.internalIsOpen());\n\n constructor() {\n effect(() => {\n const externalIsOpen = this.initialIsOpen();\n if (externalIsOpen !== undefined) {\n if (externalIsOpen) {\n this.open();\n } else {\n this.close();\n }\n }\n });\n }\n\n ngOnDestroy() {\n this.close();\n }\n\n open(): void {\n if (this.internalIsOpen()) {\n return;\n }\n\n if (!this.overlayRef) {\n this.overlayRef = this.overlay.create({\n hasBackdrop: this.showBackdrop(),\n backdropClass: 'drawer-backdrop',\n positionStrategy: this.overlay.position().global().right('0').top('0').bottom('0'),\n scrollStrategy: this.overlay.scrollStrategies.block()\n });\n\n this.overlayRef.backdropClick().subscribe(() => {\n this.close();\n });\n\n this.overlayRef.outsidePointerEvents().subscribe((event: MouseEvent) => {\n const target = event.target as HTMLElement;\n\n if (target.closest('.ngs-drawer-ignore-outside-click')) {\n return;\n }\n\n this.close();\n });\n\n this.overlayRef.keydownEvents().subscribe(event => {\n if (event.key === 'Escape') {\n this.close();\n }\n });\n }\n\n const portal = new TemplatePortal(this.portal(), this.viewContainerRef);\n this.overlayRef.attach(portal);\n\n if (!this.showBackdrop()) {\n this.overlayRef.hostElement.classList.add('pointer-events-none');\n }\n\n // Delay setting internalIsOpen to true to ensure the entry animation triggers\n setTimeout(() => {\n this.internalIsOpen.set(true);\n });\n\n this.opened.emit();\n }\n\n close(): void {\n if (!this.internalIsOpen()) {\n return;\n }\n\n this.internalIsOpen.set(false);\n\n timer(150)\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => {\n if (this.overlayRef) {\n this.overlayRef.detach();\n this.overlayRef.dispose();\n this.overlayRef = null;\n }\n this.closed.emit();\n });\n }\n\n get isOpened(): boolean {\n return this._isOpen();\n }\n}\n","<ng-template #portal>\n <div\n class=\"ngs-drawer-container\"\n [class.open]=\"_isOpen()\">\n <div class=\"ngs-drawer-content\">\n <ng-content/>\n </div>\n </div>\n</ng-template>\n","import { Directive } from '@angular/core';\n\n@Directive({\n selector: '[ngsDrawerIgnoreOutsideClick]',\n host: {\n 'class': 'ngs-drawer-ignore-outside-click'\n }\n})\nexport class DrawerIgnoreOutsideClickDirective {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"ngstarter-ui-components-drawer.mjs","sources":["../../../projects/components/drawer/src/types.ts","../../../projects/components/drawer/src/drawer/drawer.ts","../../../projects/components/drawer/src/drawer/drawer.html","../../../projects/components/drawer/src/drawer-ignore-outside-click.directive.ts","../../../projects/components/drawer/ngstarter-ui-components-drawer.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const DRAWER = new InjectionToken('DRAWER');\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n DestroyRef,\n effect,\n forwardRef,\n inject,\n input,\n OnDestroy,\n output,\n signal,\n Signal,\n TemplateRef,\n viewChild,\n ViewContainerRef,\n ViewEncapsulation,\n WritableSignal,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { DRAWER } from '../types';\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport { timer } from 'rxjs';\n\n@Component({\n selector: 'ngs-drawer',\n exportAs: 'ngsDrawer',\n templateUrl: './drawer.html',\n styleUrl: './drawer.scss',\n standalone: true,\n providers: [\n {\n provide: DRAWER,\n useExisting: forwardRef(() => Drawer),\n }\n ],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Drawer implements OnDestroy {\n private overlay = inject(Overlay);\n private viewContainerRef = inject(ViewContainerRef);\n private destroyRef = inject(DestroyRef);\n\n readonly initialIsOpen = input<boolean | undefined>(undefined, { alias: 'isOpen' });\n readonly showBackdrop = input(true);\n\n readonly closed = output<void>();\n readonly opened = output<void>();\n\n private internalIsOpen: WritableSignal<boolean> = signal(false);\n private overlayRef: OverlayRef | null = null;\n protected portal = viewChild.required<TemplateRef<any>>('portal');\n\n protected _isOpen: Signal<boolean> = computed(() => this.internalIsOpen());\n\n constructor() {\n effect(() => {\n const externalIsOpen = this.initialIsOpen();\n if (externalIsOpen !== undefined) {\n if (externalIsOpen) {\n this.open();\n } else {\n this.close();\n }\n }\n });\n }\n\n ngOnDestroy() {\n this.close();\n }\n\n open(): void {\n if (this.internalIsOpen()) {\n return;\n }\n\n if (!this.overlayRef) {\n this.overlayRef = this.overlay.create({\n hasBackdrop: this.showBackdrop(),\n backdropClass: 'drawer-backdrop',\n positionStrategy: this.overlay.position().global().right('0').top('0').bottom('0'),\n scrollStrategy: this.overlay.scrollStrategies.block()\n });\n\n this.overlayRef.backdropClick().subscribe(() => {\n this.close();\n });\n\n this.overlayRef.outsidePointerEvents().subscribe((event: MouseEvent) => {\n const target = event.target as HTMLElement;\n\n if (target.closest('.ngs-drawer-ignore-outside-click')) {\n return;\n }\n\n this.close();\n });\n\n this.overlayRef.keydownEvents().subscribe(event => {\n if (event.key === 'Escape') {\n this.close();\n }\n });\n }\n\n const portal = new TemplatePortal(this.portal(), this.viewContainerRef);\n this.overlayRef.attach(portal);\n\n if (!this.showBackdrop()) {\n this.overlayRef.hostElement.classList.add('pointer-events-none');\n }\n\n // Delay setting internalIsOpen to true to ensure the entry animation triggers\n setTimeout(() => {\n this.internalIsOpen.set(true);\n });\n\n this.opened.emit();\n }\n\n close(): void {\n if (!this.internalIsOpen()) {\n return;\n }\n\n this.internalIsOpen.set(false);\n\n timer(150)\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => {\n if (this.overlayRef) {\n this.overlayRef.detach();\n this.overlayRef.dispose();\n this.overlayRef = null;\n }\n this.closed.emit();\n });\n }\n\n get isOpened(): boolean {\n return this._isOpen();\n }\n}\n","<ng-template #portal>\n <div\n class=\"ngs-drawer-container\"\n [class.open]=\"_isOpen()\">\n <div class=\"ngs-drawer-content\">\n <ng-content/>\n </div>\n </div>\n</ng-template>\n","import { Directive } from '@angular/core';\n\n@Directive({\n selector: '[ngsDrawerIgnoreOutsideClick]',\n host: {\n 'class': 'ngs-drawer-ignore-outside-click'\n }\n})\nexport class DrawerIgnoreOutsideClickDirective {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -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"], outputs: ["change"] }, { kind: "component", type: ButtonToggleGroup, selector: "ngs-button-toggle-group", inputs: ["appearance", "disabled", "multiple", "hideSelectionIndicator", "vertical", "value"], 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 [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,
|