commons-shared-web-ui 0.0.36 → 0.0.37
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { NgModule, Injectable, inject, Component, Input, SecurityContext, Pipe, ViewChild, EventEmitter, Output, forwardRef, HostListener, Directive, signal, computed, ChangeDetectionStrategy, InjectionToken, ChangeDetectorRef,
|
|
2
|
+
import { NgModule, Injectable, inject, Component, Input, HostBinding, SecurityContext, Pipe, ViewChild, EventEmitter, Output, forwardRef, HostListener, Directive, signal, computed, ChangeDetectionStrategy, InjectionToken, ChangeDetectorRef, LOCALE_ID, ViewChildren } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, formatDate } from '@angular/common';
|
|
5
5
|
import * as i1$3 from '@angular/forms';
|
|
@@ -497,6 +497,9 @@ class ButtonComponent {
|
|
|
497
497
|
variant = 'primary';
|
|
498
498
|
type = 'button';
|
|
499
499
|
disabled = false;
|
|
500
|
+
get pointerEvents() {
|
|
501
|
+
return this.disabled ? 'none' : 'auto';
|
|
502
|
+
}
|
|
500
503
|
// Customization Inputs
|
|
501
504
|
width;
|
|
502
505
|
height;
|
|
@@ -534,7 +537,7 @@ class ButtonComponent {
|
|
|
534
537
|
return typeof this.icon === 'object' ? this.icon : { type: '', value: '' };
|
|
535
538
|
}
|
|
536
539
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
537
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ButtonComponent, isStandalone: false, selector: "lib-button", inputs: { variant: "variant", type: "type", disabled: "disabled", width: "width", height: "height", borderRadius: "borderRadius", fontSize: "fontSize", fontWeight: "fontWeight", backgroundColor: "backgroundColor", color: "color", border: "border", icon: "icon", labels: "labels" }, ngImport: i0, template: "<button [type]=\"type\" [disabled]=\"disabled\" class=\"cc-btn\" [ngClass]=\"'cc-btn-' + variant\" [style.width]=\"width\"\r\n [style.height]=\"height\" [style.border-radius]=\"borderRadius\" [style.font-size]=\"fontSize\"\r\n [style.font-weight]=\"fontWeight\" [style.background-color]=\"backgroundColor\" [style.color]=\"color\"\r\n [style.border]=\"border\">\r\n <div class=\"cc-btn-icon-wrapper\" *ngIf=\"icon\">\r\n <!-- String Icons -->\r\n <ng-container *ngIf=\"isStringIcon\">\r\n <i *ngIf=\"!isImgIcon\" [ngClass]=\"iconString\" class=\"cc-btn-icon\"></i>\r\n <img *ngIf=\"isImgIcon\" [src]=\"iconString\" [attr.alt]=\"labels?.iconAltText || 'button icon'\"\r\n class=\"cc-btn-icon cc-btn-img-icon\" />\r\n </ng-container>\r\n\r\n <!-- Object Icons -->\r\n <ng-container *ngIf=\"isObjectIcon\">\r\n <i *ngIf=\"iconObject.type === 'fontawesome'\" [ngClass]=\"iconObject.value\" class=\"cc-btn-icon\"></i>\r\n <span *ngIf=\"iconObject.type === 'material'\" class=\"material-icons cc-btn-icon\">{{ iconObject.value }}</span>\r\n <img *ngIf=\"iconObject.type === 'img'\" [src]=\"iconObject.value\" [attr.alt]=\"labels?.iconAltText || 'button icon'\"\r\n class=\"cc-btn-icon cc-btn-img-icon\" />\r\n </ng-container>\r\n </div>\r\n <ng-content></ng-content>\r\n</button>", styles: [".cc-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;transition:all .2s ease-in-out;font-family:var(--cc-btn-font-family);font-weight:var(--cc-btn-font-weight);font-size:var(--cc-btn-font-size);padding:var(--cc-btn-padding)}.cc-btn:disabled{opacity:var(--cc-btn-disabled-opacity);cursor:var(--cc-btn-disabled-cursor);pointer-events:none}.cc-btn.cc-btn-primary{background-color:var(--cc-btn-primary-bg);color:var(--cc-btn-primary-color);border-radius:var(--cc-btn-primary-radius);border:var(--cc-btn-primary-border)}.cc-btn.cc-btn-warning{background-color:var(--cc-btn-warning-bg);color:var(--cc-btn-warning-color);border-radius:var(--cc-btn-warning-radius);border:var(--cc-btn-warning-border)}.cc-btn.cc-btn-outline{background-color:var(--cc-btn-outline-bg);color:var(--cc-btn-outline-color);border-radius:var(--cc-btn-outline-radius);border:var(--cc-btn-outline-border)}.cc-btn.cc-btn-secondary{background-color:var(--cc-btn-secondary-bg);color:var(--cc-btn-secondary-color);border-radius:var(--cc-btn-secondary-radius);border:var(--cc-btn-secondary-border)}.cc-btn.cc-btn-success{background-color:var(--cc-btn-success-bg);color:var(--cc-btn-success-color);border-radius:var(--cc-btn-success-radius);border:var(--cc-btn-success-border)}.cc-btn.cc-btn-danger{background-color:var(--cc-btn-danger-bg);color:var(--cc-btn-danger-color);border-radius:var(--cc-btn-danger-radius);border:var(--cc-btn-danger-border)}.cc-btn.cc-btn-danger-outline{background-color:var(--cc-btn-danger-outline-bg);color:var(--cc-btn-danger-outline-color);border-radius:var(--cc-btn-danger-outline-radius);border:var(--cc-btn-danger-outline-border)}.cc-btn .cc-btn-icon-wrapper{display:inline-flex;align-items:center;margin-right:.5rem}.cc-btn .cc-btn-icon{font-size:1.1em;line-height:1}.cc-btn .cc-btn-img-icon{width:1.25rem;height:1.25rem;object-fit:contain}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
540
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ButtonComponent, isStandalone: false, selector: "lib-button", inputs: { variant: "variant", type: "type", disabled: "disabled", width: "width", height: "height", borderRadius: "borderRadius", fontSize: "fontSize", fontWeight: "fontWeight", backgroundColor: "backgroundColor", color: "color", border: "border", icon: "icon", labels: "labels" }, host: { properties: { "style.pointer-events": "this.pointerEvents" } }, ngImport: i0, template: "<button [type]=\"type\" [disabled]=\"disabled\" class=\"cc-btn\" [ngClass]=\"'cc-btn-' + variant\" [style.width]=\"width\"\r\n [style.height]=\"height\" [style.border-radius]=\"borderRadius\" [style.font-size]=\"fontSize\"\r\n [style.font-weight]=\"fontWeight\" [style.background-color]=\"backgroundColor\" [style.color]=\"color\"\r\n [style.border]=\"border\">\r\n <div class=\"cc-btn-icon-wrapper\" *ngIf=\"icon\">\r\n <!-- String Icons -->\r\n <ng-container *ngIf=\"isStringIcon\">\r\n <i *ngIf=\"!isImgIcon\" [ngClass]=\"iconString\" class=\"cc-btn-icon\"></i>\r\n <img *ngIf=\"isImgIcon\" [src]=\"iconString\" [attr.alt]=\"labels?.iconAltText || 'button icon'\"\r\n class=\"cc-btn-icon cc-btn-img-icon\" />\r\n </ng-container>\r\n\r\n <!-- Object Icons -->\r\n <ng-container *ngIf=\"isObjectIcon\">\r\n <i *ngIf=\"iconObject.type === 'fontawesome'\" [ngClass]=\"iconObject.value\" class=\"cc-btn-icon\"></i>\r\n <span *ngIf=\"iconObject.type === 'material'\" class=\"material-icons cc-btn-icon\">{{ iconObject.value }}</span>\r\n <img *ngIf=\"iconObject.type === 'img'\" [src]=\"iconObject.value\" [attr.alt]=\"labels?.iconAltText || 'button icon'\"\r\n class=\"cc-btn-icon cc-btn-img-icon\" />\r\n </ng-container>\r\n </div>\r\n <ng-content></ng-content>\r\n</button>", styles: [".cc-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;transition:all .2s ease-in-out;font-family:var(--cc-btn-font-family);font-weight:var(--cc-btn-font-weight);font-size:var(--cc-btn-font-size);padding:var(--cc-btn-padding)}.cc-btn:disabled{opacity:var(--cc-btn-disabled-opacity);cursor:var(--cc-btn-disabled-cursor);pointer-events:none}.cc-btn.cc-btn-primary{background-color:var(--cc-btn-primary-bg);color:var(--cc-btn-primary-color);border-radius:var(--cc-btn-primary-radius);border:var(--cc-btn-primary-border)}.cc-btn.cc-btn-warning{background-color:var(--cc-btn-warning-bg);color:var(--cc-btn-warning-color);border-radius:var(--cc-btn-warning-radius);border:var(--cc-btn-warning-border)}.cc-btn.cc-btn-outline{background-color:var(--cc-btn-outline-bg);color:var(--cc-btn-outline-color);border-radius:var(--cc-btn-outline-radius);border:var(--cc-btn-outline-border)}.cc-btn.cc-btn-secondary{background-color:var(--cc-btn-secondary-bg);color:var(--cc-btn-secondary-color);border-radius:var(--cc-btn-secondary-radius);border:var(--cc-btn-secondary-border)}.cc-btn.cc-btn-success{background-color:var(--cc-btn-success-bg);color:var(--cc-btn-success-color);border-radius:var(--cc-btn-success-radius);border:var(--cc-btn-success-border)}.cc-btn.cc-btn-danger{background-color:var(--cc-btn-danger-bg);color:var(--cc-btn-danger-color);border-radius:var(--cc-btn-danger-radius);border:var(--cc-btn-danger-border)}.cc-btn.cc-btn-danger-outline{background-color:var(--cc-btn-danger-outline-bg);color:var(--cc-btn-danger-outline-color);border-radius:var(--cc-btn-danger-outline-radius);border:var(--cc-btn-danger-outline-border)}.cc-btn .cc-btn-icon-wrapper{display:inline-flex;align-items:center;margin-right:.5rem}.cc-btn .cc-btn-icon{font-size:1.1em;line-height:1}.cc-btn .cc-btn-img-icon{width:1.25rem;height:1.25rem;object-fit:contain}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
538
541
|
}
|
|
539
542
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
540
543
|
type: Component,
|
|
@@ -545,6 +548,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
545
548
|
type: Input
|
|
546
549
|
}], disabled: [{
|
|
547
550
|
type: Input
|
|
551
|
+
}], pointerEvents: [{
|
|
552
|
+
type: HostBinding,
|
|
553
|
+
args: ['style.pointer-events']
|
|
548
554
|
}], width: [{
|
|
549
555
|
type: Input
|
|
550
556
|
}], height: [{
|