ui-core-abv 0.6.46 → 0.6.47
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/fesm2022/ui-core-abv.mjs
CHANGED
|
@@ -35,11 +35,11 @@ class UicButtonComponent {
|
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
38
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicButtonComponent, isStandalone: true, selector: "ui-button", inputs: { text: "text", icon: "icon", rightIcon: "rightIcon", iconOnly: "iconOnly", disabled: "disabled", loading: "loading", size: "size", type: "type", color: "color" }, ngImport: i0, template: "<button\r\n type=\"button\"\r\n [class]=\"'main-btn ' + buttonTypeClass\"\r\n [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'btn-tiny' :size=='t',\r\n 'btn-small' :size=='s', \r\n 'btn-medium' :size=='m',\r\n 'btn-large' :size=='l', \r\n 'btn-gigant' :size=='g'\r\n }\" >\r\n \r\n @if (icon!='' && !loading ) {\r\n <
|
|
38
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicButtonComponent, isStandalone: true, selector: "ui-button", inputs: { text: "text", icon: "icon", rightIcon: "rightIcon", iconOnly: "iconOnly", disabled: "disabled", loading: "loading", size: "size", type: "type", color: "color" }, ngImport: i0, template: "<button\r\n type=\"button\"\r\n [class]=\"'main-btn ' + buttonTypeClass\"\r\n [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'btn-tiny' :size=='t',\r\n 'btn-small' :size=='s', \r\n 'btn-medium' :size=='m',\r\n 'btn-large' :size=='l', \r\n 'btn-gigant' :size=='g'\r\n }\" >\r\n \r\n @if (icon!='' && !loading ) {\r\n <i class=\"{{icon}}\"></i>\r\n }\r\n @if (loading) {\r\n <div class=\"uic-loader-container\"> <div class=\"uic-loader\"></div> </div>\r\n }\r\n @if (!iconOnly) {\r\n <div class=\"btn-text\" [class.norighticon]=\"rightIcon==''\" [class.noicon]=\"icon==''\">\r\n {{text}}\r\n <ng-content ></ng-content>\r\n </div>\r\n }\r\n @if (rightIcon!='' ) {\r\n <i class=\"{{rightIcon}}\"></i>\r\n }\r\n</button>", styles: [":host{width:fit-content;display:block}.main-btn{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border:none;text-align:center;border-radius:var(--button-radius);padding:0 var(--button-padding);white-space:nowrap;outline:none}.main-btn:focus,.main-btn:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.noicon{padding-left:1rem}.norighticon{padding-right:1rem}.btn-text{font-weight:500}.btn-tiny{height:calc(2.3 * var(--form-ref));min-width:calc(2.3 * var(--form-ref))}.btn-tiny>.btn-text{font-size:.625rem;line-height:calc(2.3 * var(--form-ref))}.btn-tiny i{font-size:.875rem;line-height:calc(2.3 * var(--form-ref));width:calc(2.3 * var(--form-ref))}.btn-tiny .btn-loader{line-height:.625rem;width:.625rem}.btn-small{height:calc(3 * var(--form-ref));min-width:calc(3 * var(--form-ref))}.btn-small>.btn-text{font-size:.75rem;line-height:calc(3 * var(--form-ref))}.btn-small i{font-size:1rem;line-height:calc(3 * var(--form-ref));width:calc(3 * var(--form-ref))}.btn-small .btn-loader{line-height:.75rem;width:.75rem}.btn-medium{height:calc(4 * var(--form-ref));min-width:calc(4 * var(--form-ref))}.btn-medium>.btn-text{font-size:.875rem;line-height:calc(4 * var(--form-ref))}.btn-medium i{font-size:1.625rem;line-height:calc(4 * var(--form-ref));width:calc(4 * var(--form-ref))}.btn-medium .btn-loader{line-height:.875rem;width:.875rem}.btn-large{height:calc(4.6 * var(--form-ref));min-width:calc(4.6 * var(--form-ref))}.btn-large>.btn-text{font-size:1rem;line-height:calc(4.6 * var(--form-ref))}.btn-large i{font-size:1.625rem;line-height:calc(4.6 * var(--form-ref));width:calc(4.6 * var(--form-ref))}.btn-large .btn-loader{line-height:1rem;width:1rem}.btn-gigant{height:calc(5.4 * var(--form-ref));min-width:calc(5.4 * var(--form-ref))}.btn-gigant>.btn-text{font-size:1.125rem;line-height:calc(5.4 * var(--form-ref))}.btn-gigant i{font-size:1.625rem;line-height:calc(5.4 * var(--form-ref));width:calc(5.4 * var(--form-ref))}.btn-gigant .btn-loader{line-height:1.125rem;width:1.125rem}.btn-filled{color:var(--white);transition:background .3s ease;cursor:pointer}.btn-filled:disabled{cursor:not-allowed;color:var(--grey-300)}.btn-bordered{border:solid 1px var(--grey-200);background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-bordered:disabled{cursor:not-allowed;color:var(--grey-300);border-color:var(--grey-300)}.btn-ghost{color:var(--grey-800);background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-ghost:disabled{cursor:not-allowed;color:var(--grey-300)}.btn-primary-filled{background-color:var(--primary-500)}.btn-primary-filled:hover{background-color:var(--primary-700)}.btn-primary-filled:active{background-color:var(--primary-900)}.btn-primary-filled:disabled{background-color:var(--primary-100)}.btn-primary-bordered{border-color:var(--primary-500);color:var(--primary-500)}.btn-primary-bordered:hover{background-color:var(--primary-100)}.btn-primary-bordered:active{background-color:var(--primary-300)}.btn-primary-bordered:disabled{background-color:var(--primary-100)}.btn-primary-ghost:hover{background-color:var(--primary-100)}.btn-primary-ghost:active{background-color:var(--primary-300)}.btn-primary-ghost:disabled{background-color:transparent}.btn-black-filled{background-color:var(--grey-950)}.btn-black-filled:hover{background-color:var(--secondary-500)}.btn-black-filled:active{background-color:var(--secondary-800)}.btn-black-filled:disabled{background-color:var(--grey-100)}.btn-black-bordered{color:var(--grey-700)}.btn-black-bordered:hover{background-color:var(--secondary-100)}.btn-black-bordered:active{background-color:var(--secondary-300)}.btn-black-bordered:disabled{background-color:var(--grey-50)}.btn-black-ghost:hover{background-color:var(--secondary-100)}.btn-black-ghost:active{background-color:var(--secondary-300)}.btn-black-ghost:disabled{background-color:transparent}.btn-green-filled{background-color:var(--green-500)}.btn-green-filled:hover{background-color:var(--green-700)}.btn-green-filled:active{background-color:var(--green-900)}.btn-green-filled:disabled{background-color:var(--green-100)}.btn-green-bordered{border-color:var(--green-500);color:var(--green-500)}.btn-green-bordered:hover{background-color:var(--green-100)}.btn-green-bordered:active{background-color:var(--green-300)}.btn-green-bordered:disabled{background-color:var(--green-100)}.btn-green-ghost:hover{background-color:var(--green-100)}.btn-green-ghost:active{background-color:var(--green-300)}.btn-green-ghost:disabled{background-color:transparent}.btn-yellow-filled{background-color:var(--yellow-500)}.btn-yellow-filled:hover{background-color:var(--yellow-700)}.btn-yellow-filled:active{background-color:var(--yellow-900)}.btn-yellow-filled:disabled{background-color:var(--yellow-100)}.btn-yellow-bordered{border-color:var(--yellow-500);color:var(--yellow-500)}.btn-yellow-bordered:hover{background-color:var(--yellow-100)}.btn-yellow-bordered:active{background-color:var(--yellow-300)}.btn-yellow-bordered:disabled{background-color:var(--yellow-100)}.btn-yellow-ghost:hover{background-color:var(--yellow-100)}.btn-yellow-ghost:active{background-color:var(--yellow-300)}.btn-yellow-ghost:disabled{background-color:transparent}.btn-blue-filled{background-color:var(--blue-500)}.btn-blue-filled:hover{background-color:var(--blue-700)}.btn-blue-filled:active{background-color:var(--blue-900)}.btn-blue-filled:disabled{background-color:var(--blue-100)}.btn-blue-bordered{border-color:var(--blue-500);color:var(--blue-500)}.btn-blue-bordered:hover{background-color:var(--blue-100)}.btn-blue-bordered:active{background-color:var(--blue-300)}.btn-blue-bordered:disabled{background-color:var(--blue-100)}.btn-blue-ghost:hover{background-color:var(--blue-100)}.btn-blue-ghost:active{background-color:var(--blue-300)}.btn-blue-ghost:disabled{background-color:transparent}.btn-red-filled{background-color:var(--red-500)}.btn-red-filled:hover{background-color:var(--red-700)}.btn-red-filled:active{background-color:var(--red-900)}.btn-red-filled:disabled{background-color:var(--red-100)}.btn-red-bordered{border-color:var(--red-500);color:var(--red-500)}.btn-red-bordered:hover{background-color:var(--red-100)}.btn-red-bordered:active{background-color:var(--red-300)}.btn-red-bordered:disabled{background-color:var(--red-100)}.btn-red-ghost:hover{background-color:var(--red-100)}.btn-red-ghost:active{background-color:var(--red-300)}.btn-red-ghost:disabled{background-color:transparent}.btn-loader{width:20px}.btn-grey-filled{background-color:var(--grey-400)}.btn-grey-filled:hover{background-color:var(--grey-600)}.btn-grey-filled:active{background-color:var(--grey-900)}.btn-grey-filled:disabled{background-color:var(--grey-100)}.btn-grey-bordered{border-color:var(--grey-500);color:var(--grey-500)}.btn-grey-bordered:hover{background-color:var(--grey-100)}.btn-grey-bordered:active{background-color:var(--grey-300)}.btn-grey-bordered:disabled{background-color:var(--grey-100)}.btn-loader{width:14px;aspect-ratio:1;border-radius:50%;animation:l5 1s infinite linear alternate;margin:2px}.btn-loader-container{line-height:14px;margin:3px 0;display:flex;justify-content:center;width:65px}@keyframes l5{0%{box-shadow:20px 0 var(--primary-200),-20px 0 var(--primary-600);background:var(--primary-200)}33%{box-shadow:20px 0 var(--primary-200),-20px 0 var(--primary-600);background:var(--primary-600)}66%{box-shadow:20px 0 var(--primary-600),-20px 0 var(--primary-200);background:var(--primary-600)}to{box-shadow:20px 0 var(--primary-600),-20px 0 var(--primary-200);background:var(--primary-200)}}.btn-loader:before,.btn-loader:after{content:\"\";grid-area:1/1;margin:15%;border-radius:50%;background:inherit;transform:rotate(0) translate(150%);animation:l22 1s infinite}.btn-loader:after{animation-delay:-.5s}@keyframes l22-0{to{transform:rotate(1turn)}}@keyframes l22{to{transform:rotate(1turn) translate(150%)}}.uic-loader{width:20px;aspect-ratio:1;border-radius:50%;border:4px solid rgba(255,255,255,.913);border-right-color:#ffffff5b;animation:l2 1s infinite linear}.uic-loader-container{padding-left:10px}@keyframes l2{to{transform:rotate(1turn)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
39
39
|
}
|
|
40
40
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicButtonComponent, decorators: [{
|
|
41
41
|
type: Component,
|
|
42
|
-
args: [{ selector: 'ui-button', imports: [CommonModule], template: "<button\r\n type=\"button\"\r\n [class]=\"'main-btn ' + buttonTypeClass\"\r\n [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'btn-tiny' :size=='t',\r\n 'btn-small' :size=='s', \r\n 'btn-medium' :size=='m',\r\n 'btn-large' :size=='l', \r\n 'btn-gigant' :size=='g'\r\n }\" >\r\n \r\n @if (icon!='' && !loading ) {\r\n <
|
|
42
|
+
args: [{ selector: 'ui-button', imports: [CommonModule], template: "<button\r\n type=\"button\"\r\n [class]=\"'main-btn ' + buttonTypeClass\"\r\n [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'btn-tiny' :size=='t',\r\n 'btn-small' :size=='s', \r\n 'btn-medium' :size=='m',\r\n 'btn-large' :size=='l', \r\n 'btn-gigant' :size=='g'\r\n }\" >\r\n \r\n @if (icon!='' && !loading ) {\r\n <i class=\"{{icon}}\"></i>\r\n }\r\n @if (loading) {\r\n <div class=\"uic-loader-container\"> <div class=\"uic-loader\"></div> </div>\r\n }\r\n @if (!iconOnly) {\r\n <div class=\"btn-text\" [class.norighticon]=\"rightIcon==''\" [class.noicon]=\"icon==''\">\r\n {{text}}\r\n <ng-content ></ng-content>\r\n </div>\r\n }\r\n @if (rightIcon!='' ) {\r\n <i class=\"{{rightIcon}}\"></i>\r\n }\r\n</button>", styles: [":host{width:fit-content;display:block}.main-btn{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border:none;text-align:center;border-radius:var(--button-radius);padding:0 var(--button-padding);white-space:nowrap;outline:none}.main-btn:focus,.main-btn:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.noicon{padding-left:1rem}.norighticon{padding-right:1rem}.btn-text{font-weight:500}.btn-tiny{height:calc(2.3 * var(--form-ref));min-width:calc(2.3 * var(--form-ref))}.btn-tiny>.btn-text{font-size:.625rem;line-height:calc(2.3 * var(--form-ref))}.btn-tiny i{font-size:.875rem;line-height:calc(2.3 * var(--form-ref));width:calc(2.3 * var(--form-ref))}.btn-tiny .btn-loader{line-height:.625rem;width:.625rem}.btn-small{height:calc(3 * var(--form-ref));min-width:calc(3 * var(--form-ref))}.btn-small>.btn-text{font-size:.75rem;line-height:calc(3 * var(--form-ref))}.btn-small i{font-size:1rem;line-height:calc(3 * var(--form-ref));width:calc(3 * var(--form-ref))}.btn-small .btn-loader{line-height:.75rem;width:.75rem}.btn-medium{height:calc(4 * var(--form-ref));min-width:calc(4 * var(--form-ref))}.btn-medium>.btn-text{font-size:.875rem;line-height:calc(4 * var(--form-ref))}.btn-medium i{font-size:1.625rem;line-height:calc(4 * var(--form-ref));width:calc(4 * var(--form-ref))}.btn-medium .btn-loader{line-height:.875rem;width:.875rem}.btn-large{height:calc(4.6 * var(--form-ref));min-width:calc(4.6 * var(--form-ref))}.btn-large>.btn-text{font-size:1rem;line-height:calc(4.6 * var(--form-ref))}.btn-large i{font-size:1.625rem;line-height:calc(4.6 * var(--form-ref));width:calc(4.6 * var(--form-ref))}.btn-large .btn-loader{line-height:1rem;width:1rem}.btn-gigant{height:calc(5.4 * var(--form-ref));min-width:calc(5.4 * var(--form-ref))}.btn-gigant>.btn-text{font-size:1.125rem;line-height:calc(5.4 * var(--form-ref))}.btn-gigant i{font-size:1.625rem;line-height:calc(5.4 * var(--form-ref));width:calc(5.4 * var(--form-ref))}.btn-gigant .btn-loader{line-height:1.125rem;width:1.125rem}.btn-filled{color:var(--white);transition:background .3s ease;cursor:pointer}.btn-filled:disabled{cursor:not-allowed;color:var(--grey-300)}.btn-bordered{border:solid 1px var(--grey-200);background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-bordered:disabled{cursor:not-allowed;color:var(--grey-300);border-color:var(--grey-300)}.btn-ghost{color:var(--grey-800);background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-ghost:disabled{cursor:not-allowed;color:var(--grey-300)}.btn-primary-filled{background-color:var(--primary-500)}.btn-primary-filled:hover{background-color:var(--primary-700)}.btn-primary-filled:active{background-color:var(--primary-900)}.btn-primary-filled:disabled{background-color:var(--primary-100)}.btn-primary-bordered{border-color:var(--primary-500);color:var(--primary-500)}.btn-primary-bordered:hover{background-color:var(--primary-100)}.btn-primary-bordered:active{background-color:var(--primary-300)}.btn-primary-bordered:disabled{background-color:var(--primary-100)}.btn-primary-ghost:hover{background-color:var(--primary-100)}.btn-primary-ghost:active{background-color:var(--primary-300)}.btn-primary-ghost:disabled{background-color:transparent}.btn-black-filled{background-color:var(--grey-950)}.btn-black-filled:hover{background-color:var(--secondary-500)}.btn-black-filled:active{background-color:var(--secondary-800)}.btn-black-filled:disabled{background-color:var(--grey-100)}.btn-black-bordered{color:var(--grey-700)}.btn-black-bordered:hover{background-color:var(--secondary-100)}.btn-black-bordered:active{background-color:var(--secondary-300)}.btn-black-bordered:disabled{background-color:var(--grey-50)}.btn-black-ghost:hover{background-color:var(--secondary-100)}.btn-black-ghost:active{background-color:var(--secondary-300)}.btn-black-ghost:disabled{background-color:transparent}.btn-green-filled{background-color:var(--green-500)}.btn-green-filled:hover{background-color:var(--green-700)}.btn-green-filled:active{background-color:var(--green-900)}.btn-green-filled:disabled{background-color:var(--green-100)}.btn-green-bordered{border-color:var(--green-500);color:var(--green-500)}.btn-green-bordered:hover{background-color:var(--green-100)}.btn-green-bordered:active{background-color:var(--green-300)}.btn-green-bordered:disabled{background-color:var(--green-100)}.btn-green-ghost:hover{background-color:var(--green-100)}.btn-green-ghost:active{background-color:var(--green-300)}.btn-green-ghost:disabled{background-color:transparent}.btn-yellow-filled{background-color:var(--yellow-500)}.btn-yellow-filled:hover{background-color:var(--yellow-700)}.btn-yellow-filled:active{background-color:var(--yellow-900)}.btn-yellow-filled:disabled{background-color:var(--yellow-100)}.btn-yellow-bordered{border-color:var(--yellow-500);color:var(--yellow-500)}.btn-yellow-bordered:hover{background-color:var(--yellow-100)}.btn-yellow-bordered:active{background-color:var(--yellow-300)}.btn-yellow-bordered:disabled{background-color:var(--yellow-100)}.btn-yellow-ghost:hover{background-color:var(--yellow-100)}.btn-yellow-ghost:active{background-color:var(--yellow-300)}.btn-yellow-ghost:disabled{background-color:transparent}.btn-blue-filled{background-color:var(--blue-500)}.btn-blue-filled:hover{background-color:var(--blue-700)}.btn-blue-filled:active{background-color:var(--blue-900)}.btn-blue-filled:disabled{background-color:var(--blue-100)}.btn-blue-bordered{border-color:var(--blue-500);color:var(--blue-500)}.btn-blue-bordered:hover{background-color:var(--blue-100)}.btn-blue-bordered:active{background-color:var(--blue-300)}.btn-blue-bordered:disabled{background-color:var(--blue-100)}.btn-blue-ghost:hover{background-color:var(--blue-100)}.btn-blue-ghost:active{background-color:var(--blue-300)}.btn-blue-ghost:disabled{background-color:transparent}.btn-red-filled{background-color:var(--red-500)}.btn-red-filled:hover{background-color:var(--red-700)}.btn-red-filled:active{background-color:var(--red-900)}.btn-red-filled:disabled{background-color:var(--red-100)}.btn-red-bordered{border-color:var(--red-500);color:var(--red-500)}.btn-red-bordered:hover{background-color:var(--red-100)}.btn-red-bordered:active{background-color:var(--red-300)}.btn-red-bordered:disabled{background-color:var(--red-100)}.btn-red-ghost:hover{background-color:var(--red-100)}.btn-red-ghost:active{background-color:var(--red-300)}.btn-red-ghost:disabled{background-color:transparent}.btn-loader{width:20px}.btn-grey-filled{background-color:var(--grey-400)}.btn-grey-filled:hover{background-color:var(--grey-600)}.btn-grey-filled:active{background-color:var(--grey-900)}.btn-grey-filled:disabled{background-color:var(--grey-100)}.btn-grey-bordered{border-color:var(--grey-500);color:var(--grey-500)}.btn-grey-bordered:hover{background-color:var(--grey-100)}.btn-grey-bordered:active{background-color:var(--grey-300)}.btn-grey-bordered:disabled{background-color:var(--grey-100)}.btn-loader{width:14px;aspect-ratio:1;border-radius:50%;animation:l5 1s infinite linear alternate;margin:2px}.btn-loader-container{line-height:14px;margin:3px 0;display:flex;justify-content:center;width:65px}@keyframes l5{0%{box-shadow:20px 0 var(--primary-200),-20px 0 var(--primary-600);background:var(--primary-200)}33%{box-shadow:20px 0 var(--primary-200),-20px 0 var(--primary-600);background:var(--primary-600)}66%{box-shadow:20px 0 var(--primary-600),-20px 0 var(--primary-200);background:var(--primary-600)}to{box-shadow:20px 0 var(--primary-600),-20px 0 var(--primary-200);background:var(--primary-200)}}.btn-loader:before,.btn-loader:after{content:\"\";grid-area:1/1;margin:15%;border-radius:50%;background:inherit;transform:rotate(0) translate(150%);animation:l22 1s infinite}.btn-loader:after{animation-delay:-.5s}@keyframes l22-0{to{transform:rotate(1turn)}}@keyframes l22{to{transform:rotate(1turn) translate(150%)}}.uic-loader{width:20px;aspect-ratio:1;border-radius:50%;border:4px solid rgba(255,255,255,.913);border-right-color:#ffffff5b;animation:l2 1s infinite linear}.uic-loader-container{padding-left:10px}@keyframes l2{to{transform:rotate(1turn)}}\n"] }]
|
|
43
43
|
}], propDecorators: { text: [{
|
|
44
44
|
type: Input
|
|
45
45
|
}], icon: [{
|