@arsedizioni/ars-utils 18.2.265 → 18.2.266
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/esm2022/ui.application/ui/components/button-toggle/button-toggle.component.mjs +4 -3
- package/fesm2022/arsedizioni-ars-utils-ui.application.mjs +3 -2
- package/fesm2022/arsedizioni-ars-utils-ui.application.mjs.map +1 -1
- package/package.json +1 -1
- package/ui.application/ui/components/button-toggle/button-toggle.component.d.ts +2 -1
|
@@ -21,6 +21,7 @@ export class ButtonToggleComponent {
|
|
|
21
21
|
this.labelOff = input();
|
|
22
22
|
this.iconOn = input();
|
|
23
23
|
this.iconOff = input();
|
|
24
|
+
this.cssClass = input();
|
|
24
25
|
this.label = computed(() => {
|
|
25
26
|
return this.value() ? this.labelOn() ?? '' : this.labelOff() ?? '';
|
|
26
27
|
});
|
|
@@ -36,12 +37,12 @@ export class ButtonToggleComponent {
|
|
|
36
37
|
this.changed.emit({ value: this.value(), toggled: this.toggled });
|
|
37
38
|
}
|
|
38
39
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ButtonToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
39
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: ButtonToggleComponent, isStandalone: true, selector: "button-toggle", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, labelOn: { classPropertyName: "labelOn", publicName: "labelOn", isSignal: true, isRequired: false, transformFunction: null }, labelOff: { classPropertyName: "labelOff", publicName: "labelOff", isSignal: true, isRequired: false, transformFunction: null }, iconOn: { classPropertyName: "iconOn", publicName: "iconOn", isSignal: true, isRequired: false, transformFunction: null }, iconOff: { classPropertyName: "iconOff", publicName: "iconOff", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: "<button mat-stroked-button [ngStyle]=\"{\r\n 'border': border() >= 0 ? border() : 'auto',\r\n 'height': border() <= 0 ? '40px' : 'auto',\r\n 'min-width.px': width() > 0 ? width() : 'auto' \r\n}\" [attr.aria-label]=\"label()\" (click)=\"toggle()\" [ngClass]=\"{'button-on': value() === true}\">\r\n @if(icon()) {\r\n <mat-icon>{{icon()}}</mat-icon>\r\n }\r\n {{label()}}\r\n</button>", styles: [".button-on{background-color:var(--mdc-switch-selected-focus-handle-color)!important;border-color:var(--mdc-switch-selected-focus-handle-color)!important;font-weight:700}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i1.DefaultStyleDirective, selector: " [ngStyle], [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl], [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl], [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
40
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: ButtonToggleComponent, isStandalone: true, selector: "button-toggle", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, labelOn: { classPropertyName: "labelOn", publicName: "labelOn", isSignal: true, isRequired: false, transformFunction: null }, labelOff: { classPropertyName: "labelOff", publicName: "labelOff", isSignal: true, isRequired: false, transformFunction: null }, iconOn: { classPropertyName: "iconOn", publicName: "iconOn", isSignal: true, isRequired: false, transformFunction: null }, iconOff: { classPropertyName: "iconOff", publicName: "iconOff", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: "<button mat-stroked-button [ngStyle]=\"{\r\n 'border': border() >= 0 ? border() : 'auto',\r\n 'height': border() <= 0 ? '40px' : 'auto',\r\n 'min-width.px': width() > 0 ? width() : 'auto' \r\n}\" [class]=\"cssClass()\" [attr.aria-label]=\"label()\" (click)=\"toggle()\" [ngClass]=\"{'button-on': value() === true}\">\r\n @if(icon()) {\r\n <mat-icon>{{icon()}}</mat-icon>\r\n }\r\n {{label()}}\r\n</button>", styles: [".button-on{background-color:var(--mdc-switch-selected-focus-handle-color)!important;border-color:var(--mdc-switch-selected-focus-handle-color)!important;font-weight:700}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i1.DefaultStyleDirective, selector: " [ngStyle], [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl], [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl], [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
40
41
|
}
|
|
41
42
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ButtonToggleComponent, decorators: [{
|
|
42
43
|
type: Component,
|
|
43
|
-
args: [{ selector: 'button-toggle', standalone: true, imports: [NgStyle, NgClass, FlexLayoutModule, MatIconModule, MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button mat-stroked-button [ngStyle]=\"{\r\n 'border': border() >= 0 ? border() : 'auto',\r\n 'height': border() <= 0 ? '40px' : 'auto',\r\n 'min-width.px': width() > 0 ? width() : 'auto' \r\n}\" [attr.aria-label]=\"label()\" (click)=\"toggle()\" [ngClass]=\"{'button-on': value() === true}\">\r\n @if(icon()) {\r\n <mat-icon>{{icon()}}</mat-icon>\r\n }\r\n {{label()}}\r\n</button>", styles: [".button-on{background-color:var(--mdc-switch-selected-focus-handle-color)!important;border-color:var(--mdc-switch-selected-focus-handle-color)!important;font-weight:700}\n"] }]
|
|
44
|
+
args: [{ selector: 'button-toggle', standalone: true, imports: [NgStyle, NgClass, FlexLayoutModule, MatIconModule, MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button mat-stroked-button [ngStyle]=\"{\r\n 'border': border() >= 0 ? border() : 'auto',\r\n 'height': border() <= 0 ? '40px' : 'auto',\r\n 'min-width.px': width() > 0 ? width() : 'auto' \r\n}\" [class]=\"cssClass()\" [attr.aria-label]=\"label()\" (click)=\"toggle()\" [ngClass]=\"{'button-on': value() === true}\">\r\n @if(icon()) {\r\n <mat-icon>{{icon()}}</mat-icon>\r\n }\r\n {{label()}}\r\n</button>", styles: [".button-on{background-color:var(--mdc-switch-selected-focus-handle-color)!important;border-color:var(--mdc-switch-selected-focus-handle-color)!important;font-weight:700}\n"] }]
|
|
44
45
|
}], propDecorators: { changed: [{
|
|
45
46
|
type: Output
|
|
46
47
|
}] } });
|
|
47
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
48
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLXRvZ2dsZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hcnMtdXRpbHMvdWkuYXBwbGljYXRpb24vdWkvY29tcG9uZW50cy9idXR0b24tdG9nZ2xlL2J1dHRvbi10b2dnbGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYXJzLXV0aWxzL3VpLmFwcGxpY2F0aW9uL3VpL2NvbXBvbmVudHMvYnV0dG9uLXRvZ2dsZS9idXR0b24tdG9nZ2xlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDbkQsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFVLFFBQVEsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDbEgsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQzNELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQzs7Ozs7QUFnQnpELE1BQU0sT0FBTyxxQkFBcUI7SUFSbEM7UUFVWSxZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQW9CLENBQUM7UUFFL0MsWUFBTyxHQUFvQixRQUFRLENBQUMsR0FBRyxFQUFFO1lBQ2pELE9BQU8sSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ3RCLENBQUMsQ0FBQyxDQUFBO1FBRUYsWUFBTyxHQUFZLEtBQUssQ0FBQztRQUV6QixVQUFLLEdBQUUsS0FBSyxDQUFVLEtBQUssQ0FBQyxDQUFDO1FBQzdCLFVBQUssR0FBRyxLQUFLLENBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUMxQixXQUFNLEdBQUcsS0FBSyxDQUFTLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDM0IsWUFBTyxHQUFHLEtBQUssRUFBVSxDQUFDO1FBQzFCLGFBQVEsR0FBRyxLQUFLLEVBQVUsQ0FBQztRQUMzQixXQUFNLEdBQUcsS0FBSyxFQUFVLENBQUM7UUFDekIsWUFBTyxHQUFHLEtBQUssRUFBVSxDQUFDO1FBQzFCLGFBQVEsR0FBRyxLQUFLLEVBQVUsQ0FBQztRQUVqQixVQUFLLEdBQW1CLFFBQVEsQ0FBQyxHQUFHLEVBQUU7WUFDOUMsT0FBTyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsSUFBSSxFQUFFLENBQUM7UUFDckUsQ0FBQyxDQUFDLENBQUE7UUFFUSxTQUFJLEdBQW1CLFFBQVEsQ0FBQyxHQUFHLEVBQUU7WUFDN0MsT0FBTyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsSUFBSSxFQUFFLENBQUM7UUFDbkUsQ0FBQyxDQUFDLENBQUE7S0FVSDtJQVJDOztPQUVHO0lBQ0gsTUFBTTtRQUNKLElBQUksQ0FBQyxPQUFPLEdBQUcsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDO1FBQy9CLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEVBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxLQUFLLEVBQUUsRUFBRSxPQUFPLEVBQUUsSUFBSSxDQUFDLE9BQU8sRUFBQyxDQUFDLENBQUM7SUFDbEUsQ0FBQzs4R0FqQ1UscUJBQXFCO2tHQUFyQixxQkFBcUIsMGxDQ3BCbEMsNGFBU1MscU9ETUcsT0FBTywyRUFBRSxPQUFPLG1GQUFFLGdCQUFnQixxaUNBQUUsYUFBYSxtTEFBRSxlQUFlOzsyRkFLakUscUJBQXFCO2tCQVJqQyxTQUFTOytCQUNFLGVBQWUsY0FDYixJQUFJLFdBQ1AsQ0FBQyxPQUFPLEVBQUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLGFBQWEsRUFBRSxlQUFlLENBQUMsbUJBRzVELHVCQUF1QixDQUFDLE1BQU07OEJBSXJDLE9BQU87c0JBQWhCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ0NsYXNzLCBOZ1N0eWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBPdXRwdXQsIFNpZ25hbCwgY29tcHV0ZWQsIGlucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE1hdEJ1dHRvbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2J1dHRvbic7XHJcbmltcG9ydCB7IE1hdEljb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9pY29uJztcclxuaW1wb3J0IHsgRmxleExheW91dE1vZHVsZSB9IGZyb20gJ0BuZ2JyYWNrZXQvbmd4LWxheW91dCc7XHJcblxyXG5cclxuZXhwb3J0IGludGVyZmFjZSBCdXR0b25Ub2dnbGVJbmZvIHtcclxuICB2YWx1ZTogYm9vbGVhbixcclxuICB0b2dnbGVkOiBib29sZWFuXHJcbn1cclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnYnV0dG9uLXRvZ2dsZScsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBpbXBvcnRzOiBbTmdTdHlsZSwgTmdDbGFzcywgRmxleExheW91dE1vZHVsZSwgTWF0SWNvbk1vZHVsZSwgTWF0QnV0dG9uTW9kdWxlXSxcclxuICB0ZW1wbGF0ZVVybDogJy4vYnV0dG9uLXRvZ2dsZS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL2J1dHRvbi10b2dnbGUuY29tcG9uZW50LnNjc3MnLFxyXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgQnV0dG9uVG9nZ2xlQ29tcG9uZW50ICB7XHJcblxyXG4gIEBPdXRwdXQoKSBjaGFuZ2VkID0gbmV3IEV2ZW50RW1pdHRlcjxCdXR0b25Ub2dnbGVJbmZvPigpO1xyXG5cclxuICBwcm90ZWN0ZWQgY3VycmVudDogU2lnbmFsPGJvb2xlYW4+ID0gY29tcHV0ZWQoKCkgPT4ge1xyXG4gICAgcmV0dXJuIHRoaXMudmFsdWUoKTtcclxuICB9KVxyXG5cclxuICB0b2dnbGVkOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIHZhbHVlPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XHJcbiAgd2lkdGggPSBpbnB1dDxudW1iZXI+KC0xKTtcclxuICBib3JkZXIgPSBpbnB1dDxudW1iZXI+KC0xKTtcclxuICBsYWJlbE9uID0gaW5wdXQ8c3RyaW5nPigpO1xyXG4gIGxhYmVsT2ZmID0gaW5wdXQ8c3RyaW5nPigpO1xyXG4gIGljb25PbiA9IGlucHV0PHN0cmluZz4oKTtcclxuICBpY29uT2ZmID0gaW5wdXQ8c3RyaW5nPigpO1xyXG4gIGNzc0NsYXNzID0gaW5wdXQ8c3RyaW5nPigpO1xyXG5cclxuICBwcm90ZWN0ZWQgbGFiZWw6IFNpZ25hbDxzdHJpbmc+ID0gY29tcHV0ZWQoKCkgPT4ge1xyXG4gICAgcmV0dXJuIHRoaXMudmFsdWUoKSA/IHRoaXMubGFiZWxPbigpID8/ICcnIDogdGhpcy5sYWJlbE9mZigpID8/ICcnO1xyXG4gIH0pXHJcblxyXG4gIHByb3RlY3RlZCBpY29uOiBTaWduYWw8c3RyaW5nPiA9IGNvbXB1dGVkKCgpID0+IHtcclxuICAgIHJldHVybiB0aGlzLnZhbHVlKCkgPyB0aGlzLmljb25PbigpID8/ICcnIDogdGhpcy5pY29uT2ZmKCkgPz8gJyc7XHJcbiAgfSlcclxuXHJcbiAgLyoqXHJcbiAgICogVG9nZ2xlIHRoZSBidXR0b25cclxuICAgKi9cclxuICB0b2dnbGUoKSB7XHJcbiAgICB0aGlzLnRvZ2dsZWQgPSAhKHRoaXMudmFsdWUoKSk7XHJcbiAgICB0aGlzLmNoYW5nZWQuZW1pdCh7dmFsdWU6IHRoaXMudmFsdWUoKSwgdG9nZ2xlZDogdGhpcy50b2dnbGVkfSk7XHJcbiAgfVxyXG5cclxufVxyXG4iLCI8YnV0dG9uIG1hdC1zdHJva2VkLWJ1dHRvbiBbbmdTdHlsZV09XCJ7XHJcbiAgICAnYm9yZGVyJzogYm9yZGVyKCkgPj0gMCA/IGJvcmRlcigpIDogJ2F1dG8nLFxyXG4gICAgJ2hlaWdodCc6IGJvcmRlcigpIDw9IDAgPyAnNDBweCcgOiAnYXV0bycsXHJcbiAgICAnbWluLXdpZHRoLnB4Jzogd2lkdGgoKSA+IDAgPyB3aWR0aCgpIDogJ2F1dG8nIFxyXG59XCIgW2NsYXNzXT1cImNzc0NsYXNzKClcIiBbYXR0ci5hcmlhLWxhYmVsXT1cImxhYmVsKClcIiAoY2xpY2spPVwidG9nZ2xlKClcIiBbbmdDbGFzc109XCJ7J2J1dHRvbi1vbic6IHZhbHVlKCkgPT09IHRydWV9XCI+XHJcbiAgICBAaWYoaWNvbigpKSB7XHJcbiAgICA8bWF0LWljb24+e3tpY29uKCl9fTwvbWF0LWljb24+XHJcbiAgICB9XHJcbiAgICB7e2xhYmVsKCl9fVxyXG48L2J1dHRvbj4iXX0=
|
|
@@ -2365,6 +2365,7 @@ class ButtonToggleComponent {
|
|
|
2365
2365
|
this.labelOff = input();
|
|
2366
2366
|
this.iconOn = input();
|
|
2367
2367
|
this.iconOff = input();
|
|
2368
|
+
this.cssClass = input();
|
|
2368
2369
|
this.label = computed(() => {
|
|
2369
2370
|
return this.value() ? this.labelOn() ?? '' : this.labelOff() ?? '';
|
|
2370
2371
|
});
|
|
@@ -2380,11 +2381,11 @@ class ButtonToggleComponent {
|
|
|
2380
2381
|
this.changed.emit({ value: this.value(), toggled: this.toggled });
|
|
2381
2382
|
}
|
|
2382
2383
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ButtonToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2383
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: ButtonToggleComponent, isStandalone: true, selector: "button-toggle", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, labelOn: { classPropertyName: "labelOn", publicName: "labelOn", isSignal: true, isRequired: false, transformFunction: null }, labelOff: { classPropertyName: "labelOff", publicName: "labelOff", isSignal: true, isRequired: false, transformFunction: null }, iconOn: { classPropertyName: "iconOn", publicName: "iconOn", isSignal: true, isRequired: false, transformFunction: null }, iconOff: { classPropertyName: "iconOff", publicName: "iconOff", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: "<button mat-stroked-button [ngStyle]=\"{\r\n 'border': border() >= 0 ? border() : 'auto',\r\n 'height': border() <= 0 ? '40px' : 'auto',\r\n 'min-width.px': width() > 0 ? width() : 'auto' \r\n}\" [attr.aria-label]=\"label()\" (click)=\"toggle()\" [ngClass]=\"{'button-on': value() === true}\">\r\n @if(icon()) {\r\n <mat-icon>{{icon()}}</mat-icon>\r\n }\r\n {{label()}}\r\n</button>", styles: [".button-on{background-color:var(--mdc-switch-selected-focus-handle-color)!important;border-color:var(--mdc-switch-selected-focus-handle-color)!important;font-weight:700}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i2.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i2.DefaultStyleDirective, selector: " [ngStyle], [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl], [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl], [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2384
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: ButtonToggleComponent, isStandalone: true, selector: "button-toggle", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, labelOn: { classPropertyName: "labelOn", publicName: "labelOn", isSignal: true, isRequired: false, transformFunction: null }, labelOff: { classPropertyName: "labelOff", publicName: "labelOff", isSignal: true, isRequired: false, transformFunction: null }, iconOn: { classPropertyName: "iconOn", publicName: "iconOn", isSignal: true, isRequired: false, transformFunction: null }, iconOff: { classPropertyName: "iconOff", publicName: "iconOff", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: "<button mat-stroked-button [ngStyle]=\"{\r\n 'border': border() >= 0 ? border() : 'auto',\r\n 'height': border() <= 0 ? '40px' : 'auto',\r\n 'min-width.px': width() > 0 ? width() : 'auto' \r\n}\" [class]=\"cssClass()\" [attr.aria-label]=\"label()\" (click)=\"toggle()\" [ngClass]=\"{'button-on': value() === true}\">\r\n @if(icon()) {\r\n <mat-icon>{{icon()}}</mat-icon>\r\n }\r\n {{label()}}\r\n</button>", styles: [".button-on{background-color:var(--mdc-switch-selected-focus-handle-color)!important;border-color:var(--mdc-switch-selected-focus-handle-color)!important;font-weight:700}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i2.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i2.DefaultStyleDirective, selector: " [ngStyle], [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl], [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl], [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2384
2385
|
}
|
|
2385
2386
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ButtonToggleComponent, decorators: [{
|
|
2386
2387
|
type: Component,
|
|
2387
|
-
args: [{ selector: 'button-toggle', standalone: true, imports: [NgStyle, NgClass, FlexLayoutModule, MatIconModule, MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button mat-stroked-button [ngStyle]=\"{\r\n 'border': border() >= 0 ? border() : 'auto',\r\n 'height': border() <= 0 ? '40px' : 'auto',\r\n 'min-width.px': width() > 0 ? width() : 'auto' \r\n}\" [attr.aria-label]=\"label()\" (click)=\"toggle()\" [ngClass]=\"{'button-on': value() === true}\">\r\n @if(icon()) {\r\n <mat-icon>{{icon()}}</mat-icon>\r\n }\r\n {{label()}}\r\n</button>", styles: [".button-on{background-color:var(--mdc-switch-selected-focus-handle-color)!important;border-color:var(--mdc-switch-selected-focus-handle-color)!important;font-weight:700}\n"] }]
|
|
2388
|
+
args: [{ selector: 'button-toggle', standalone: true, imports: [NgStyle, NgClass, FlexLayoutModule, MatIconModule, MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button mat-stroked-button [ngStyle]=\"{\r\n 'border': border() >= 0 ? border() : 'auto',\r\n 'height': border() <= 0 ? '40px' : 'auto',\r\n 'min-width.px': width() > 0 ? width() : 'auto' \r\n}\" [class]=\"cssClass()\" [attr.aria-label]=\"label()\" (click)=\"toggle()\" [ngClass]=\"{'button-on': value() === true}\">\r\n @if(icon()) {\r\n <mat-icon>{{icon()}}</mat-icon>\r\n }\r\n {{label()}}\r\n</button>", styles: [".button-on{background-color:var(--mdc-switch-selected-focus-handle-color)!important;border-color:var(--mdc-switch-selected-focus-handle-color)!important;font-weight:700}\n"] }]
|
|
2388
2389
|
}], propDecorators: { changed: [{
|
|
2389
2390
|
type: Output
|
|
2390
2391
|
}] } });
|