itc-components-library20 1.0.1 → 2.0.1

package/fesm2022/itc-components-library20.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, Output, Input, inject, ViewChild, HostListener, InjectionToken, Inject, Injectable } from '@angular/core';
+import { Component, EventEmitter, Output, Input, inject, ViewChild, HostListener, InjectionToken, Inject, Injectable, input, output, computed } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@fortawesome/angular-fontawesome';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule, FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { Router } from '@angular/router';
 import * as fas from '@fortawesome/free-solid-svg-icons';
 import { faCircle, faStroopwafel, faChevronLeft, faChevronRight, faCirclePlus, faCircleCheck } from '@fortawesome/free-solid-svg-icons';
@@ -3710,6 +3710,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                     args: [API_CONFIG]
                 }] }] });
 
+class Button {
+    variant = input('fourth', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : [])); //necessario per accessibilità, se il bottone ha solo un'icona
+    //colori personalizzabili - default nero
+    bgColor = input('#000', ...(ngDevMode ? [{ debugName: "bgColor" }] : []));
+    textColor = input('#fff', ...(ngDevMode ? [{ debugName: "textColor" }] : []));
+    borderColor = input('#000', ...(ngDevMode ? [{ debugName: "borderColor" }] : []));
+    iconColor = input('#fff', ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
+    //hover
+    bgColorHover = input('#333', ...(ngDevMode ? [{ debugName: "bgColorHover" }] : []));
+    textColorHover = input('#fff', ...(ngDevMode ? [{ debugName: "textColorHover" }] : []));
+    borderColorHover = input('#333', ...(ngDevMode ? [{ debugName: "borderColorHover" }] : []));
+    iconColorHover = input('#fff', ...(ngDevMode ? [{ debugName: "iconColorHover" }] : []));
+    clicked = output();
+    classes = computed(() => {
+        const parts = ['btn', `btn--${this.variant()}`];
+        if (this.icon() && !this.label())
+            parts.push('btn--icon-only');
+        else if (this.icon() && this.label())
+            parts.push('btn--with-icon');
+        else
+            parts.push('btn--label-only');
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    styles = computed(() => ({
+        '--btn-bg': this.bgColor(),
+        '--btn-color': this.textColor(),
+        '--btn-border-color': this.borderColor(),
+        '--btn-icon-color': this.iconColor(),
+        //colori hover
+        '--btn-bg-hover': this.bgColorHover(),
+        '--btn-color-hover': this.textColorHover(),
+        '--btn-border-color-hover': this.borderColorHover(),
+        '--btn-icon-color-hover': this.iconColorHover()
+    }), ...(ngDevMode ? [{ debugName: "styles" }] : []));
+    handleClick() {
+        this.clicked.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: Button, isStandalone: true, selector: "lib-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, bgColorHover: { classPropertyName: "bgColorHover", publicName: "bgColorHover", isSignal: true, isRequired: false, transformFunction: null }, textColorHover: { classPropertyName: "textColorHover", publicName: "textColorHover", isSignal: true, isRequired: false, transformFunction: null }, borderColorHover: { classPropertyName: "borderColorHover", publicName: "borderColorHover", isSignal: true, isRequired: false, transformFunction: null }, iconColorHover: { classPropertyName: "iconColorHover", publicName: "iconColorHover", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n    [class]=\"classes()\"\r\n    [style]=\"styles()\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"ariaLabel()\"\r\n    (click)=\"handleClick()\"    \r\n>\r\n\r\n    @if (icon()) {\r\n        <span class=\"btn__icon\">\r\n            <fa-icon [icon]=\"icon()!\"></fa-icon>\r\n        </span>\r\n    }\r\n\r\n    @if (label()) {\r\n        <span class=\"btn__label\">\r\n            {{ label() }}\r\n        </span>\r\n    }\r\n\r\n</button>", styles: [":host{--btn-bg: #000;--btn-color: #fff;--btn-border-color: #000;--btn-icon-color: #fff;--btn-bg-hover: var(--btn-bg);--btn-color-hover: var(--btn-color);--btn-border-color-hover: var(--btn-border-color);--btn-icon-color-hover: var(--btn-icon-color)}.btn{display:inline-flex;align-items:center;cursor:pointer;background-color:var(--btn-bg);color:var(--btn-color);border:1px solid var(--btn-border-color)}.btn:disabled{cursor:not-allowed;opacity:.5}.btn--primary{padding:12px 30px;gap:5px;font-size:17px;font-weight:600;border-radius:14px}.btn--secondary{padding:10px 20px;gap:3px;font-size:17px;border-radius:12px}.btn--third{padding:10px 15px;gap:3px;border-radius:10px}.btn--fourth{padding:8px 10px;gap:3px;font-size:14px;border-radius:12px}.btn__icon{display:inline-flex;align-items:center;justify-content:center;color:var(--btn-icon-color);flex-shrink:0}.btn:hover:not(:disabled){background-color:var(--btn-bg-hover);color:var(--btn-color-hover);border-color:var(--btn-border-color-hover)}.btn:hover:not(:disabled) .btn__icon{color:var(--btn-icon-color-hover)}\n"], dependencies: [{ kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: Button, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-button', imports: [FaIconComponent], template: "<button\r\n    [class]=\"classes()\"\r\n    [style]=\"styles()\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"ariaLabel()\"\r\n    (click)=\"handleClick()\"    \r\n>\r\n\r\n    @if (icon()) {\r\n        <span class=\"btn__icon\">\r\n            <fa-icon [icon]=\"icon()!\"></fa-icon>\r\n        </span>\r\n    }\r\n\r\n    @if (label()) {\r\n        <span class=\"btn__label\">\r\n            {{ label() }}\r\n        </span>\r\n    }\r\n\r\n</button>", styles: [":host{--btn-bg: #000;--btn-color: #fff;--btn-border-color: #000;--btn-icon-color: #fff;--btn-bg-hover: var(--btn-bg);--btn-color-hover: var(--btn-color);--btn-border-color-hover: var(--btn-border-color);--btn-icon-color-hover: var(--btn-icon-color)}.btn{display:inline-flex;align-items:center;cursor:pointer;background-color:var(--btn-bg);color:var(--btn-color);border:1px solid var(--btn-border-color)}.btn:disabled{cursor:not-allowed;opacity:.5}.btn--primary{padding:12px 30px;gap:5px;font-size:17px;font-weight:600;border-radius:14px}.btn--secondary{padding:10px 20px;gap:3px;font-size:17px;border-radius:12px}.btn--third{padding:10px 15px;gap:3px;border-radius:10px}.btn--fourth{padding:8px 10px;gap:3px;font-size:14px;border-radius:12px}.btn__icon{display:inline-flex;align-items:center;justify-content:center;color:var(--btn-icon-color);flex-shrink:0}.btn:hover:not(:disabled){background-color:var(--btn-bg-hover);color:var(--btn-color-hover);border-color:var(--btn-border-color-hover)}.btn:hover:not(:disabled) .btn__icon{color:var(--btn-icon-color-hover)}\n"] }]
+        }] });
+
 /*
  * Public API Surface of itc-library20
  */
@@ -3718,5 +3767,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { API_CONFIG, ApiAccountDictionaryService, ApiAccountService, ApiAdministrationService, ApiEventService, ApiExamAppointmentService, ApiExamDictionaryService, ApiExamService, ApiGeographyService, ApiKitService, ApiPatientDictionaryService, ApiPatientService, ApiReportService, ApiRequestDictionaryService, ApiRequestService, ApiStructureDictionaryService, ApiStructureService, ApiSurveyDictionaryService, ApiSurveyService, BasicTable, Calendar, CalendarView, FormatDate, ItcLibrary20, Message, Minio, PRIMENG_ITALIAN_LOCALE, PrimaryButton, PrimengItalianLocale, SecondaryButton, SortableTable, Survey, SurveyRadio, SurveyText, SurveyValuebox, ThirdButton };
+export { API_CONFIG, ApiAccountDictionaryService, ApiAccountService, ApiAdministrationService, ApiEventService, ApiExamAppointmentService, ApiExamDictionaryService, ApiExamService, ApiGeographyService, ApiKitService, ApiPatientDictionaryService, ApiPatientService, ApiReportService, ApiRequestDictionaryService, ApiRequestService, ApiStructureDictionaryService, ApiStructureService, ApiSurveyDictionaryService, ApiSurveyService, BasicTable, Button, Calendar, CalendarView, FormatDate, ItcLibrary20, Message, Minio, PRIMENG_ITALIAN_LOCALE, PrimaryButton, PrimengItalianLocale, SecondaryButton, SortableTable, Survey, SurveyRadio, SurveyText, SurveyValuebox, ThirdButton };
 //# sourceMappingURL=itc-components-library20.mjs.map