itc-components-library20 2.0.0 → 2.0.2
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.
|
@@ -3721,6 +3721,11 @@ class Button {
|
|
|
3721
3721
|
textColor = input('#fff', ...(ngDevMode ? [{ debugName: "textColor" }] : []));
|
|
3722
3722
|
borderColor = input('#000', ...(ngDevMode ? [{ debugName: "borderColor" }] : []));
|
|
3723
3723
|
iconColor = input('#fff', ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
|
|
3724
|
+
//hover
|
|
3725
|
+
bgColorHover = input('#333', ...(ngDevMode ? [{ debugName: "bgColorHover" }] : []));
|
|
3726
|
+
textColorHover = input('#fff', ...(ngDevMode ? [{ debugName: "textColorHover" }] : []));
|
|
3727
|
+
borderColorHover = input('#333', ...(ngDevMode ? [{ debugName: "borderColorHover" }] : []));
|
|
3728
|
+
iconColorHover = input('#fff', ...(ngDevMode ? [{ debugName: "iconColorHover" }] : []));
|
|
3724
3729
|
clicked = output();
|
|
3725
3730
|
classes = computed(() => {
|
|
3726
3731
|
const parts = ['btn', `btn--${this.variant()}`];
|
|
@@ -3736,17 +3741,22 @@ class Button {
|
|
|
3736
3741
|
'--btn-bg': this.bgColor(),
|
|
3737
3742
|
'--btn-color': this.textColor(),
|
|
3738
3743
|
'--btn-border-color': this.borderColor(),
|
|
3739
|
-
'--btn-icon-color': this.iconColor()
|
|
3744
|
+
'--btn-icon-color': this.iconColor(),
|
|
3745
|
+
//colori hover
|
|
3746
|
+
'--btn-bg-hover': this.bgColorHover(),
|
|
3747
|
+
'--btn-color-hover': this.textColorHover(),
|
|
3748
|
+
'--btn-border-color-hover': this.borderColorHover(),
|
|
3749
|
+
'--btn-icon-color-hover': this.iconColorHover()
|
|
3740
3750
|
}), ...(ngDevMode ? [{ debugName: "styles" }] : []));
|
|
3741
3751
|
handleClick() {
|
|
3742
3752
|
this.clicked.emit();
|
|
3743
3753
|
}
|
|
3744
3754
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3745
|
-
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 } }, 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{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:
|
|
3755
|
+
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:8px 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"] }] });
|
|
3746
3756
|
}
|
|
3747
3757
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: Button, decorators: [{
|
|
3748
3758
|
type: Component,
|
|
3749
|
-
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{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:
|
|
3759
|
+
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:8px 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"] }]
|
|
3750
3760
|
}] });
|
|
3751
3761
|
|
|
3752
3762
|
/*
|