@allsorter/ui-components 0.0.343 → 0.0.344
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.
|
@@ -140,11 +140,11 @@ class ButtonComponent {
|
|
|
140
140
|
return 8;
|
|
141
141
|
}
|
|
142
142
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
143
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ButtonComponent, isStandalone: true, selector: "al-button", inputs: { iconPlacement: "iconPlacement", state: "state", category: "category", label: "label", arialabel: "arialabel", iconOnly: "iconOnly", leftIcon: "leftIcon", rightIcon: "rightIcon", showLeftIcon: "showLeftIcon", showRightIcon: "showRightIcon", outlined: "outlined", color: "color", size: "size", buttonType: "buttonType", fontClass: "fontClass", dropdownOptions: "dropdownOptions" }, outputs: { onClick: "onClick", onHover: "onHover", onMouseLeave: "onMouseLeave", optionSelect: "optionSelect" }, ngImport: i0, template: "<!-- Regular button types -->\n<ng-container *ngIf=\"buttonType !== 'dropdown'; else dropdownTpl\">\n <button\n mat-flat-button\n class=\"btn custom-button\" [class]=\"effectiveFontClass\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n \n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-circle': buttonType === 'icon-circle',\n 'blue': category === 'blue',\n 'green': category === 'green',\n 'grey': category === 'grey',\n 'error': category === 'error',\n 'gradient': category === 'gradient',\n 'blue-no-outline': category === 'blue-no-outline',\n 'green-no-outline': category === 'green-no-outline',\n 'grey-no-outline': category === 'grey-no-outline',\n 'error-no-outline': category === 'error-no-outline',\n 'btn-default': state === 'default',\n 'btn-hover': state === 'hover',\n 'btn-pressed': state === 'pressed',\n 'btn-disabled': state === 'disabled'\n }\"\n [ngStyle]=\"{ color: color }\"\n [disabled]=\"state === 'disabled'\"\n (click)=\"onClick.emit($event)\"\n (mouseenter)=\"onHover.emit($event)\"\n (mouseleave)=\"onMouseLeave.emit($event)\"\n [style.display]=\"'inline-flex'\"\n [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap()\"\n >\n <!-- Left Icon (Only shown if leftIcon is set and not empty) -->\n <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\"\n [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n class=\"left-icon\">{{ leftIconText }}</mat-icon>\n <!-- Label (Only shown if iconOnly is false) -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\" [ngStyle]=\"{ color: color }\">{{ label || '' }}</span>\n \n <!-- Right Icon (Only shown if rightIcon is set and not empty) -->\n <mat-icon *ngIf=\"rightIcon?.trim() as rightIconText\"\n [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n class=\"right-icon\">{{ rightIconText }}</mat-icon>\n </button>\n </ng-container>\n \n <!-- Dropdown button template -->\n <ng-template #dropdownTpl>\n <button\n mat-flat-button\n class=\"btn custom-button\" [class]=\"effectiveFontClass\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-label': true,\n 'blue': category === 'blue',\n 'green': category === 'green',\n 'grey': category === 'grey',\n 'error': category === 'error',\n 'gradient': category === 'gradient',\n 'blue-no-outline': category === 'blue-no-outline',\n 'green-no-outline': category === 'green-no-outline',\n 'grey-no-outline': category === 'grey-no-outline',\n 'error-no-outline': category === 'error-no-outline',\n 'btn-default': state === 'default',\n 'btn-hover': state === 'hover',\n 'btn-pressed': state === 'pressed',\n 'btn-disabled': state === 'disabled',\n \n }\"\n [ngStyle]=\"{ color: color }\"\n [disabled]=\"state === 'disabled'\"\n (mouseenter)=\"onHover.emit($event)\"\n (mouseleave)=\"onMouseLeave.emit($event)\"\n [style.display]=\"'inline-flex'\"\n [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap()\"\n [matMenuTriggerFor]=\"menu\"\n >\n <!-- Left Icon (optional) -->\n <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\"\n [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n class=\"left-icon\">{{ leftIconText }}</mat-icon>\n <!-- Label -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\" [ngStyle]=\"{ color: color }\">{{ label || '' }}</span>\n <!-- Dropdown Arrow Icon -->\n <mat-icon class=\"right-icon\">arrow_drop_down</mat-icon>\n </button>\n <!-- Mat Menu -->\n <mat-menu #menu=\"matMenu\" panelClass=\"custom-dropdown-menu\">\n <button mat-menu-item *ngFor=\"let opt of dropdownOptions\" (click)=\"selectOption(opt)\" [ngClass]=\"effectiveFontClass\">\n {{ opt.label || opt }}\n </button>\n </mat-menu>\n </ng-template>", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.material-icons-outlined{font-family:Material Icons Outlined;font-weight:400;font-style:normal;font-feature-settings:\"liga\";font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.mdc-button.btn{border-radius:5px;display:flex;align-items:center;cursor:pointer;border:none;transition:background .2s,border .2s,transform .1s;min-width:auto!important;gap:8px;height:auto!important}.mdc-button.btn-primary1{background-color:#5473e8;color:#fff}.mdc-button.btn-primary2{background-color:#37c1ce;color:#fff}.mdc-button.btn-secondary{background-color:#383b4a;color:#fff}.mdc-button.btn-destructive{background-color:#e854a4;color:#fff}.mdc-button.btn-gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.btn-primary2:hover{background-color:#4bc7d3!important}.mdc-button.btn-primary2:active{background-color:#299da8!important}.mdc-button.btn-primary2:outlined{background-color:#fff;border-radius:4px;border:1px solid #37c1ce}.mdc-button.btn-primary1:hover{background-color:#6581ea!important}.mdc-button.btn-primary1:active{background-color:#1e46df!important}.mdc-button.btn-primary1:outlined{background-color:#fff;border-radius:4px;border:1px solid #5473e8}.mdc-button.btn-secondary:hover{background-color:#4b4f62!important}.mdc-button.btn-secondary:active{background-color:#252831!important}.mdc-button.btn-secondary:outlined{background-color:#fff;border-radius:4px;border:1px solid #383B4A}.mdc-button.btn-destructive:hover{background-color:#ef87bf!important}.mdc-button.btn-destructive:active{background-color:#e22a8e!important}.mdc-button.btn-destructive:outlined{background-color:#fff;border-radius:4px;border:1px solid #E854A4}.mdc-button.btn-gradient:hover{background:linear-gradient(275deg,#4a90e2 -36.22%,#2bbbad 100.04%)!important}.mdc-button.btn-gradient:active{background:linear-gradient(275deg,#42a5f5 -36.22%,#1e88e5 100.04%)!important}.mdc-button.btn-disabled{border:none!important;background-color:#b0b0b0;color:#666;cursor:not-allowed}.mdc-button.btn-outlined{background:transparent;border:2px solid currentColor}.blue{background-color:#5473e8!important;color:#fff}.blue.btn-hover,.blue:hover{background-color:#6581ea!important}.blue.btn-pressed,.blue:active{background-color:#1e46df!important}.green{background-color:#37c1ce!important;color:#fff}.green.btn-hover,.green:hover{background-color:#4bc7d3!important}.green.btn-pressed,.green:active{background-color:#299da8!important}.grey{background-color:#383b4a!important;color:#fff}.grey.btn-hover,.grey:hover{background-color:#4b4f62!important}.grey.btn-pressed,.grey:active{background-color:#252831!important}.error{background-color:#e854a4!important;color:#fff}.error.btn-hover,.error:hover{background-color:#ef87bf!important}.error.btn-pressed,.error:active{background-color:#e22a8e!important}.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.gradient.btn-hover,.gradient:hover{opacity:.9}.gradient.btn-pressed,.gradient:active{opacity:.8}.btn.custom-button>*+*{margin-left:8px}.two-icon-label{padding:4px 12px!important}button.two-icon-label .mat-icon{width:20px!important;height:20px!important}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format(\"woff2\")}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.left-icon{order:0}.right-icon{order:2}mat-icon.mat-icon{margin:0!important;padding:0!important}.size-header{font-size:20px;padding:4px 12px!important}.size-xs{font-size:12px;padding:8px 12px!important}.size-sm{font-size:14px;padding:8px 12px!important}.size-base{font-size:14px;padding:10px 20px!important}.size-l{font-size:16px;padding:12px 20px!important}.size-xl{font-size:16px;padding:14px 24px!important}.size-header .mat-icon{font-size:20px;height:20px;width:20px}.size-xs .mat-icon,.size-sm .mat-icon,.size-base .mat-icon{font-size:16px;height:16px;width:16px}.size-l .mat-icon,.size-xl .mat-icon{font-size:20px;height:20px;width:20px}.btn.size-header{gap:4px!important;padding:4px 12px!important}::ng-deep .custom-dropdown-menu.mat-mdc-menu-panel,::ng-deep .custom-dropdown-menu.mat-menu-panel{padding:0;border-radius:8px;box-shadow:0 2px 6px #00000026;border:1px solid rgba(0,0,0,.12)}::ng-deep .custom-dropdown-menu .mat-mdc-menu-content,::ng-deep .custom-dropdown-menu .mat-menu-content{padding:0}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item{font-family:Roboto,sans-serif;font-size:16px;line-height:24px;height:56px;padding:16px 24px;color:#47515e}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:hover,::ng-deep .custom-dropdown-menu .mat-menu-item:hover{background:#f5f6f7}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item+.mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item+.mat-menu-item{border-top:1px solid #EAECEE}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface{background-color:#fff!important;--mdc-theme-surface: #ffffff !important;--mdc-menu-container-color: #ffffff !important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content,::ng-deep .mat-menu-panel .mat-menu-content{background-color:#fff!important}.cdk-overlay-pane{z-index:1000!important;background:#fff!important}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface,.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface,.cdk-overlay-pane .mat-menu-panel{background-color:#fff!important;--mdc-theme-surface:#ffffff !important;--mdc-menu-container-color:#fff !important}.mat-mdc-menu-panel,.mdc-menu-surface,.mat-menu-panel{--mdc-theme-surface: #ffffff !important;background-color:#fff!important}.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface{--mdc-menu-container-color:#fff !important}.cdk-overlay-pane .mat-menu-panel,.cdk-overlay-pane .mat-mdc-menu-content,.cdk-overlay-pane .mat-menu-content{background:#fff!important}button.icon-circle{width:auto!important;height:auto!important;border-radius:50%!important;aspect-ratio:1/1;display:inline-flex;align-items:center;min-width:0!important;justify-content:center;padding:6px!important}.size-small.icon-circle{padding:4px!important}.size-medium.icon-circle{padding:8px!important}.size-large.icon-circle{padding:12px!important}.size-header.icon-circle{padding:4px!important}.size-header.icon-circle .mat-icon{width:10px;height:10px;font-size:10px}.size-xs.icon-circle{padding:4px!important}.size-xs.icon-circle .mat-icon{width:12px;height:12px;font-size:12px}.size-sm.icon-circle{padding:8px!important}.size-sm.icon-circle .mat-icon{width:12px;height:12px;font-size:12px}.size-base.icon-circle{padding:10px!important}.size-base.icon-circle .mat-icon{width:16px;height:16px;font-size:16px}.size-l.icon-circle{padding:12px!important}.size-l.icon-circle .mat-icon{width:16px;height:16px;font-size:16px}.size-xl.icon-circle{padding:14px!important}.size-xl.icon-circle .mat-icon{width:20px;height:20px;font-size:20px}.icon-xs{padding:4px!important}.mdc-button.blue{background-color:#5473e8;color:#fff}.mdc-button.blue:hover{background-color:#6581ea}.mdc-button.blue:active{background-color:#1e46df}.mdc-button.green{background-color:#37c1ce;color:#fff}.mdc-button.green:hover{background-color:#4bc7d3}.mdc-button.green:active{background-color:#299da8}.mdc-button.grey{background-color:#383b4a;color:#fff}.mdc-button.grey:hover{background-color:#4b4f62}.mdc-button.grey:active{background-color:#252831}.mdc-button.error{background-color:#e854a4;color:#fff}.mdc-button.error:hover{background-color:#ef87bf}.mdc-button.error:active{background-color:#e22a8e}.mdc-button.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.gradient:hover{background:linear-gradient(0deg,#fafafd4d 0% 100%),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.gradient:active{background:linear-gradient(0deg,#383b4a80 0% 100%),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.disabled,.mdc-button:disabled{background-color:#d1d3db!important;color:#666!important;cursor:not-allowed!important}.mdc-button.blue-no-outline{background-color:#fff;color:#5473e8;border:1px solid #5473E8}.mdc-button.blue-no-outline:hover{background-color:#6581ea;color:#fff}.mdc-button.blue-no-outline:active{background-color:#1e46df;color:#fff}.mdc-button.green-no-outline{background-color:#fff;color:#37c1ce;border:1px solid #37C1CE}.mdc-button.green-no-outline:hover{background-color:#4bc7d3;color:#fff}.mdc-button.green-no-outline:active{background-color:#299da8;color:#fff}.mdc-button.grey-no-outline{background-color:#fff;color:#383b4a;border:1px solid #383B4A}.mdc-button.grey-no-outline:hover{background-color:#4b4f62;color:#fff}.mdc-button.grey-no-outline:active{background-color:#252831;color:#fff}.mdc-button.error-no-outline{background-color:#fff;color:#e854a4;border:1px solid #E854A4}.mdc-button.error-no-outline:hover{background-color:#ef87bf;color:#fff}.mdc-button.error-no-outline:active{background-color:#e22a8e;color:#fff}::ng-deep .cdk-overlay-pane{border-radius:6px!important;box-shadow:0 2px 6px #00000026!important}::ng-deep .mat-mdc-menu-panel{padding:4px 0!important;background-color:#fff!important;min-width:180px!important;border-radius:6px!important;box-shadow:none!important}::ng-deep .mat-mdc-menu-item{font-family:Roboto,sans-serif;font-size:14px;color:#333;padding:12px 16px;border-radius:0!important;transition:background .2s ease-in-out}::ng-deep .mat-mdc-menu-item:hover{background-color:#f5f5f5!important}.size-header ::ng-deep .mdc-button__label{display:none!important}::ng-deep .mat-mdc-button-touch-target{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
|
|
143
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ButtonComponent, isStandalone: true, selector: "al-button", inputs: { iconPlacement: "iconPlacement", state: "state", category: "category", label: "label", arialabel: "arialabel", iconOnly: "iconOnly", leftIcon: "leftIcon", rightIcon: "rightIcon", showLeftIcon: "showLeftIcon", showRightIcon: "showRightIcon", outlined: "outlined", color: "color", size: "size", buttonType: "buttonType", fontClass: "fontClass", dropdownOptions: "dropdownOptions" }, outputs: { onClick: "onClick", onHover: "onHover", onMouseLeave: "onMouseLeave", optionSelect: "optionSelect" }, ngImport: i0, template: "<!-- Regular button types -->\n<ng-container *ngIf=\"buttonType !== 'dropdown'; else dropdownTpl\">\n <button\n mat-flat-button\n class=\"btn custom-button\" [class]=\"effectiveFontClass\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n \n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-circle': buttonType === 'icon-circle',\n 'blue': category === 'blue',\n 'green': category === 'green',\n 'grey': category === 'grey',\n 'error': category === 'error',\n 'gradient': category === 'gradient',\n 'blue-no-outline': category === 'blue-no-outline',\n 'green-no-outline': category === 'green-no-outline',\n 'grey-no-outline': category === 'grey-no-outline',\n 'error-no-outline': category === 'error-no-outline',\n 'btn-default': state === 'default',\n 'btn-hover': state === 'hover',\n 'btn-pressed': state === 'pressed',\n 'btn-disabled': state === 'disabled'\n }\"\n [ngStyle]=\"{ color: color }\"\n [disabled]=\"state === 'disabled'\"\n (click)=\"onClick.emit($event)\"\n (mouseenter)=\"onHover.emit($event)\"\n (mouseleave)=\"onMouseLeave.emit($event)\"\n [style.display]=\"'inline-flex'\"\n [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap()\"\n >\n <!-- Left Icon (Only shown if leftIcon is set and not empty) -->\n <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\"\n [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n class=\"left-icon\">{{ leftIconText }}</mat-icon>\n <!-- Label (Only shown if iconOnly is false) -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\" [ngStyle]=\"{ color: color }\">{{ label || '' }}</span>\n \n <!-- Right Icon (Only shown if rightIcon is set and not empty) -->\n <mat-icon *ngIf=\"rightIcon?.trim() as rightIconText\"\n [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n class=\"right-icon\">{{ rightIconText }}</mat-icon>\n </button>\n </ng-container>\n \n <!-- Dropdown button template -->\n <ng-template #dropdownTpl>\n <button\n mat-flat-button\n class=\"btn custom-button\" [class]=\"effectiveFontClass\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-label': true,\n 'blue': category === 'blue',\n 'green': category === 'green',\n 'grey': category === 'grey',\n 'error': category === 'error',\n 'gradient': category === 'gradient',\n 'blue-no-outline': category === 'blue-no-outline',\n 'green-no-outline': category === 'green-no-outline',\n 'grey-no-outline': category === 'grey-no-outline',\n 'error-no-outline': category === 'error-no-outline',\n 'btn-default': state === 'default',\n 'btn-hover': state === 'hover',\n 'btn-pressed': state === 'pressed',\n 'btn-disabled': state === 'disabled',\n \n }\"\n [ngStyle]=\"{ color: color }\"\n [disabled]=\"state === 'disabled'\"\n (mouseenter)=\"onHover.emit($event)\"\n (mouseleave)=\"onMouseLeave.emit($event)\"\n [style.display]=\"'inline-flex'\"\n [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap()\"\n [matMenuTriggerFor]=\"menu\"\n >\n <!-- Left Icon (optional) -->\n <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\"\n [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n class=\"left-icon\">{{ leftIconText }}</mat-icon>\n <!-- Label -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\" [ngStyle]=\"{ color: color }\">{{ label || '' }}</span>\n <!-- Dropdown Arrow Icon -->\n <mat-icon class=\"right-icon\">arrow_drop_down</mat-icon>\n </button>\n <!-- Mat Menu -->\n <mat-menu #menu=\"matMenu\" panelClass=\"custom-dropdown-menu\">\n <button mat-menu-item *ngFor=\"let opt of dropdownOptions\" (click)=\"selectOption(opt)\" [ngClass]=\"effectiveFontClass\">\n {{ opt.label || opt }}\n </button>\n </mat-menu>\n </ng-template>", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.material-icons-outlined{font-family:Material Icons Outlined;font-weight:400;font-style:normal;font-feature-settings:\"liga\";font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.mdc-button.btn{border-radius:5px;display:flex;align-items:center;cursor:pointer;border:none;transition:background .2s,border .2s,transform .1s;min-width:auto!important;gap:8px;height:auto!important}.mdc-button.btn-primary1{background-color:#5473e8;color:#fff}.mdc-button.btn-primary2{background-color:#37c1ce;color:#fff}.mdc-button.btn-secondary{background-color:#383b4a;color:#fff}.mdc-button.btn-destructive{background-color:#e854a4;color:#fff}.mdc-button.btn-gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.btn-primary2:hover{background-color:#4bc7d3!important}.mdc-button.btn-primary2:active{background-color:#299da8!important}.mdc-button.btn-primary2:outlined{background-color:#fff;border-radius:4px;border:1px solid #37c1ce}.mdc-button.btn-primary1:hover{background-color:#6581ea!important}.mdc-button.btn-primary1:active{background-color:#1e46df!important}.mdc-button.btn-primary1:outlined{background-color:#fff;border-radius:4px;border:1px solid #5473e8}.mdc-button.btn-secondary:hover{background-color:#4b4f62!important}.mdc-button.btn-secondary:active{background-color:#252831!important}.mdc-button.btn-secondary:outlined{background-color:#fff;border-radius:4px;border:1px solid #383B4A}.mdc-button.btn-destructive:hover{background-color:#ef87bf!important}.mdc-button.btn-destructive:active{background-color:#e22a8e!important}.mdc-button.btn-destructive:outlined{background-color:#fff;border-radius:4px;border:1px solid #E854A4}.mdc-button.btn-gradient:hover{background:linear-gradient(275deg,#4a90e2 -36.22%,#2bbbad 100.04%)!important}.mdc-button.btn-gradient:active{background:linear-gradient(275deg,#42a5f5 -36.22%,#1e88e5 100.04%)!important}.mdc-button.btn-disabled{border:none!important;background-color:#b0b0b0;color:#666;cursor:not-allowed}.mdc-button.btn-outlined{background:transparent;border:2px solid currentColor}.blue{background-color:#5473e8!important;color:#fff}.blue.btn-hover,.blue:hover{background-color:#6581ea!important}.blue.btn-pressed,.blue:active{background-color:#1e46df!important}.green{background-color:#37c1ce!important;color:#fff}.green.btn-hover,.green:hover{background-color:#4bc7d3!important}.green.btn-pressed,.green:active{background-color:#299da8!important}.grey{background-color:#383b4a!important;color:#fff}.grey.btn-hover,.grey:hover{background-color:#4b4f62!important}.grey.btn-pressed,.grey:active{background-color:#252831!important}.error{background-color:#e854a4!important;color:#fff}.error.btn-hover,.error:hover{background-color:#ef87bf!important}.error.btn-pressed,.error:active{background-color:#e22a8e!important}.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.gradient.btn-hover,.gradient:hover{opacity:.9}.gradient.btn-pressed,.gradient:active{opacity:.8}.btn.custom-button>*+*{margin-left:8px}.two-icon-label{padding:4px 12px!important}button.two-icon-label .mat-icon{width:20px!important;height:20px!important}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format(\"woff2\")}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.left-icon{order:0}.right-icon{order:2}mat-icon.mat-icon{margin:0!important;padding:0!important}.size-header{font-size:20px;padding:4px 12px!important}.size-xs{font-size:12px;padding:8px 12px!important}.size-sm{font-size:14px;padding:8px 12px!important}.size-base{font-size:14px;padding:10px 16px!important}.size-l{font-size:16px;padding:12px 20px!important}.size-xl{font-size:16px;padding:14px 24px!important}.size-header .mat-icon{font-size:20px;height:20px;width:20px}.size-xs .mat-icon,.size-sm .mat-icon,.size-base .mat-icon{font-size:16px;height:16px;width:16px}.size-l .mat-icon,.size-xl .mat-icon{font-size:20px;height:20px;width:20px}.btn.size-header{gap:4px!important;padding:4px 12px!important}::ng-deep .custom-dropdown-menu.mat-mdc-menu-panel,::ng-deep .custom-dropdown-menu.mat-menu-panel{padding:0;border-radius:8px;box-shadow:0 2px 6px #00000026;border:1px solid rgba(0,0,0,.12)}::ng-deep .custom-dropdown-menu .mat-mdc-menu-content,::ng-deep .custom-dropdown-menu .mat-menu-content{padding:0}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item{font-family:Roboto,sans-serif;font-size:16px;line-height:24px;height:56px;padding:16px 24px;color:#47515e}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:hover,::ng-deep .custom-dropdown-menu .mat-menu-item:hover{background:#f5f6f7}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item+.mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item+.mat-menu-item{border-top:1px solid #EAECEE}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface{background-color:#fff!important;--mdc-theme-surface: #ffffff !important;--mdc-menu-container-color: #ffffff !important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content,::ng-deep .mat-menu-panel .mat-menu-content{background-color:#fff!important}.cdk-overlay-pane{z-index:1000!important;background:#fff!important}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface,.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface,.cdk-overlay-pane .mat-menu-panel{background-color:#fff!important;--mdc-theme-surface:#ffffff !important;--mdc-menu-container-color:#fff !important}.mat-mdc-menu-panel,.mdc-menu-surface,.mat-menu-panel{--mdc-theme-surface: #ffffff !important;background-color:#fff!important}.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface{--mdc-menu-container-color:#fff !important}.cdk-overlay-pane .mat-menu-panel,.cdk-overlay-pane .mat-mdc-menu-content,.cdk-overlay-pane .mat-menu-content{background:#fff!important}button.icon-circle{width:auto!important;height:auto!important;border-radius:50%!important;aspect-ratio:1/1;display:inline-flex;align-items:center;min-width:0!important;justify-content:center;padding:6px!important}.size-small.icon-circle{padding:4px!important}.size-medium.icon-circle{padding:8px!important}.size-large.icon-circle{padding:12px!important}.size-header.icon-circle{padding:4px!important}.size-header.icon-circle .mat-icon{width:10px;height:10px;font-size:10px}.size-xs.icon-circle{padding:4px!important}.size-xs.icon-circle .mat-icon{width:12px;height:12px;font-size:12px}.size-sm.icon-circle{padding:8px!important}.size-sm.icon-circle .mat-icon{width:12px;height:12px;font-size:12px}.size-base.icon-circle{padding:10px!important}.size-base.icon-circle .mat-icon{width:16px;height:16px;font-size:16px}.size-l.icon-circle{padding:12px!important}.size-l.icon-circle .mat-icon{width:16px;height:16px;font-size:16px}.size-xl.icon-circle{padding:14px!important}.size-xl.icon-circle .mat-icon{width:20px;height:20px;font-size:20px}.icon-xs{padding:4px!important}.mdc-button.blue{background-color:#5473e8;color:#fff}.mdc-button.blue:hover{background-color:#6581ea}.mdc-button.blue:active{background-color:#1e46df}.mdc-button.green{background-color:#37c1ce;color:#fff}.mdc-button.green:hover{background-color:#4bc7d3}.mdc-button.green:active{background-color:#299da8}.mdc-button.grey{background-color:#383b4a;color:#fff}.mdc-button.grey:hover{background-color:#4b4f62}.mdc-button.grey:active{background-color:#252831}.mdc-button.error{background-color:#e854a4;color:#fff}.mdc-button.error:hover{background-color:#ef87bf}.mdc-button.error:active{background-color:#e22a8e}.mdc-button.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.gradient:hover{background:linear-gradient(0deg,#fafafd4d 0% 100%),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.gradient:active{background:linear-gradient(0deg,#383b4a80 0% 100%),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.disabled,.mdc-button:disabled{background-color:#d1d3db!important;color:#666!important;cursor:not-allowed!important}.mdc-button.blue-no-outline{background-color:#fff;color:#5473e8;border:1px solid #5473E8}.mdc-button.blue-no-outline:hover{background-color:#6581ea;color:#fff}.mdc-button.blue-no-outline:active{background-color:#1e46df;color:#fff}.mdc-button.green-no-outline{background-color:#fff;color:#37c1ce;border:1px solid #37C1CE}.mdc-button.green-no-outline:hover{background-color:#4bc7d3;color:#fff}.mdc-button.green-no-outline:active{background-color:#299da8;color:#fff}.mdc-button.grey-no-outline{background-color:#fff;color:#383b4a;border:1px solid #383B4A}.mdc-button.grey-no-outline:hover{background-color:#4b4f62;color:#fff}.mdc-button.grey-no-outline:active{background-color:#252831;color:#fff}.mdc-button.error-no-outline{background-color:#fff;color:#e854a4;border:1px solid #E854A4}.mdc-button.error-no-outline:hover{background-color:#ef87bf;color:#fff}.mdc-button.error-no-outline:active{background-color:#e22a8e;color:#fff}::ng-deep .cdk-overlay-pane{border-radius:6px!important;box-shadow:0 2px 6px #00000026!important}::ng-deep .mat-mdc-menu-panel{padding:4px 0!important;background-color:#fff!important;min-width:180px!important;border-radius:6px!important;box-shadow:none!important}::ng-deep .mat-mdc-menu-item{font-family:Roboto,sans-serif;font-size:14px;color:#333;padding:12px 16px;border-radius:0!important;transition:background .2s ease-in-out}::ng-deep .mat-mdc-menu-item:hover{background-color:#f5f5f5!important}.size-header ::ng-deep .mdc-button__label{display:none!important}::ng-deep .mat-mdc-button-touch-target{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
|
|
144
144
|
}
|
|
145
145
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
146
146
|
type: Component,
|
|
147
|
-
args: [{ selector: 'al-button', imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule], standalone: true, template: "<!-- Regular button types -->\n<ng-container *ngIf=\"buttonType !== 'dropdown'; else dropdownTpl\">\n <button\n mat-flat-button\n class=\"btn custom-button\" [class]=\"effectiveFontClass\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n \n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-circle': buttonType === 'icon-circle',\n 'blue': category === 'blue',\n 'green': category === 'green',\n 'grey': category === 'grey',\n 'error': category === 'error',\n 'gradient': category === 'gradient',\n 'blue-no-outline': category === 'blue-no-outline',\n 'green-no-outline': category === 'green-no-outline',\n 'grey-no-outline': category === 'grey-no-outline',\n 'error-no-outline': category === 'error-no-outline',\n 'btn-default': state === 'default',\n 'btn-hover': state === 'hover',\n 'btn-pressed': state === 'pressed',\n 'btn-disabled': state === 'disabled'\n }\"\n [ngStyle]=\"{ color: color }\"\n [disabled]=\"state === 'disabled'\"\n (click)=\"onClick.emit($event)\"\n (mouseenter)=\"onHover.emit($event)\"\n (mouseleave)=\"onMouseLeave.emit($event)\"\n [style.display]=\"'inline-flex'\"\n [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap()\"\n >\n <!-- Left Icon (Only shown if leftIcon is set and not empty) -->\n <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\"\n [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n class=\"left-icon\">{{ leftIconText }}</mat-icon>\n <!-- Label (Only shown if iconOnly is false) -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\" [ngStyle]=\"{ color: color }\">{{ label || '' }}</span>\n \n <!-- Right Icon (Only shown if rightIcon is set and not empty) -->\n <mat-icon *ngIf=\"rightIcon?.trim() as rightIconText\"\n [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n class=\"right-icon\">{{ rightIconText }}</mat-icon>\n </button>\n </ng-container>\n \n <!-- Dropdown button template -->\n <ng-template #dropdownTpl>\n <button\n mat-flat-button\n class=\"btn custom-button\" [class]=\"effectiveFontClass\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-label': true,\n 'blue': category === 'blue',\n 'green': category === 'green',\n 'grey': category === 'grey',\n 'error': category === 'error',\n 'gradient': category === 'gradient',\n 'blue-no-outline': category === 'blue-no-outline',\n 'green-no-outline': category === 'green-no-outline',\n 'grey-no-outline': category === 'grey-no-outline',\n 'error-no-outline': category === 'error-no-outline',\n 'btn-default': state === 'default',\n 'btn-hover': state === 'hover',\n 'btn-pressed': state === 'pressed',\n 'btn-disabled': state === 'disabled',\n \n }\"\n [ngStyle]=\"{ color: color }\"\n [disabled]=\"state === 'disabled'\"\n (mouseenter)=\"onHover.emit($event)\"\n (mouseleave)=\"onMouseLeave.emit($event)\"\n [style.display]=\"'inline-flex'\"\n [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap()\"\n [matMenuTriggerFor]=\"menu\"\n >\n <!-- Left Icon (optional) -->\n <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\"\n [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n class=\"left-icon\">{{ leftIconText }}</mat-icon>\n <!-- Label -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\" [ngStyle]=\"{ color: color }\">{{ label || '' }}</span>\n <!-- Dropdown Arrow Icon -->\n <mat-icon class=\"right-icon\">arrow_drop_down</mat-icon>\n </button>\n <!-- Mat Menu -->\n <mat-menu #menu=\"matMenu\" panelClass=\"custom-dropdown-menu\">\n <button mat-menu-item *ngFor=\"let opt of dropdownOptions\" (click)=\"selectOption(opt)\" [ngClass]=\"effectiveFontClass\">\n {{ opt.label || opt }}\n </button>\n </mat-menu>\n </ng-template>", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.material-icons-outlined{font-family:Material Icons Outlined;font-weight:400;font-style:normal;font-feature-settings:\"liga\";font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.mdc-button.btn{border-radius:5px;display:flex;align-items:center;cursor:pointer;border:none;transition:background .2s,border .2s,transform .1s;min-width:auto!important;gap:8px;height:auto!important}.mdc-button.btn-primary1{background-color:#5473e8;color:#fff}.mdc-button.btn-primary2{background-color:#37c1ce;color:#fff}.mdc-button.btn-secondary{background-color:#383b4a;color:#fff}.mdc-button.btn-destructive{background-color:#e854a4;color:#fff}.mdc-button.btn-gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.btn-primary2:hover{background-color:#4bc7d3!important}.mdc-button.btn-primary2:active{background-color:#299da8!important}.mdc-button.btn-primary2:outlined{background-color:#fff;border-radius:4px;border:1px solid #37c1ce}.mdc-button.btn-primary1:hover{background-color:#6581ea!important}.mdc-button.btn-primary1:active{background-color:#1e46df!important}.mdc-button.btn-primary1:outlined{background-color:#fff;border-radius:4px;border:1px solid #5473e8}.mdc-button.btn-secondary:hover{background-color:#4b4f62!important}.mdc-button.btn-secondary:active{background-color:#252831!important}.mdc-button.btn-secondary:outlined{background-color:#fff;border-radius:4px;border:1px solid #383B4A}.mdc-button.btn-destructive:hover{background-color:#ef87bf!important}.mdc-button.btn-destructive:active{background-color:#e22a8e!important}.mdc-button.btn-destructive:outlined{background-color:#fff;border-radius:4px;border:1px solid #E854A4}.mdc-button.btn-gradient:hover{background:linear-gradient(275deg,#4a90e2 -36.22%,#2bbbad 100.04%)!important}.mdc-button.btn-gradient:active{background:linear-gradient(275deg,#42a5f5 -36.22%,#1e88e5 100.04%)!important}.mdc-button.btn-disabled{border:none!important;background-color:#b0b0b0;color:#666;cursor:not-allowed}.mdc-button.btn-outlined{background:transparent;border:2px solid currentColor}.blue{background-color:#5473e8!important;color:#fff}.blue.btn-hover,.blue:hover{background-color:#6581ea!important}.blue.btn-pressed,.blue:active{background-color:#1e46df!important}.green{background-color:#37c1ce!important;color:#fff}.green.btn-hover,.green:hover{background-color:#4bc7d3!important}.green.btn-pressed,.green:active{background-color:#299da8!important}.grey{background-color:#383b4a!important;color:#fff}.grey.btn-hover,.grey:hover{background-color:#4b4f62!important}.grey.btn-pressed,.grey:active{background-color:#252831!important}.error{background-color:#e854a4!important;color:#fff}.error.btn-hover,.error:hover{background-color:#ef87bf!important}.error.btn-pressed,.error:active{background-color:#e22a8e!important}.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.gradient.btn-hover,.gradient:hover{opacity:.9}.gradient.btn-pressed,.gradient:active{opacity:.8}.btn.custom-button>*+*{margin-left:8px}.two-icon-label{padding:4px 12px!important}button.two-icon-label .mat-icon{width:20px!important;height:20px!important}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format(\"woff2\")}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.left-icon{order:0}.right-icon{order:2}mat-icon.mat-icon{margin:0!important;padding:0!important}.size-header{font-size:20px;padding:4px 12px!important}.size-xs{font-size:12px;padding:8px 12px!important}.size-sm{font-size:14px;padding:8px 12px!important}.size-base{font-size:14px;padding:10px 20px!important}.size-l{font-size:16px;padding:12px 20px!important}.size-xl{font-size:16px;padding:14px 24px!important}.size-header .mat-icon{font-size:20px;height:20px;width:20px}.size-xs .mat-icon,.size-sm .mat-icon,.size-base .mat-icon{font-size:16px;height:16px;width:16px}.size-l .mat-icon,.size-xl .mat-icon{font-size:20px;height:20px;width:20px}.btn.size-header{gap:4px!important;padding:4px 12px!important}::ng-deep .custom-dropdown-menu.mat-mdc-menu-panel,::ng-deep .custom-dropdown-menu.mat-menu-panel{padding:0;border-radius:8px;box-shadow:0 2px 6px #00000026;border:1px solid rgba(0,0,0,.12)}::ng-deep .custom-dropdown-menu .mat-mdc-menu-content,::ng-deep .custom-dropdown-menu .mat-menu-content{padding:0}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item{font-family:Roboto,sans-serif;font-size:16px;line-height:24px;height:56px;padding:16px 24px;color:#47515e}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:hover,::ng-deep .custom-dropdown-menu .mat-menu-item:hover{background:#f5f6f7}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item+.mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item+.mat-menu-item{border-top:1px solid #EAECEE}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface{background-color:#fff!important;--mdc-theme-surface: #ffffff !important;--mdc-menu-container-color: #ffffff !important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content,::ng-deep .mat-menu-panel .mat-menu-content{background-color:#fff!important}.cdk-overlay-pane{z-index:1000!important;background:#fff!important}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface,.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface,.cdk-overlay-pane .mat-menu-panel{background-color:#fff!important;--mdc-theme-surface:#ffffff !important;--mdc-menu-container-color:#fff !important}.mat-mdc-menu-panel,.mdc-menu-surface,.mat-menu-panel{--mdc-theme-surface: #ffffff !important;background-color:#fff!important}.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface{--mdc-menu-container-color:#fff !important}.cdk-overlay-pane .mat-menu-panel,.cdk-overlay-pane .mat-mdc-menu-content,.cdk-overlay-pane .mat-menu-content{background:#fff!important}button.icon-circle{width:auto!important;height:auto!important;border-radius:50%!important;aspect-ratio:1/1;display:inline-flex;align-items:center;min-width:0!important;justify-content:center;padding:6px!important}.size-small.icon-circle{padding:4px!important}.size-medium.icon-circle{padding:8px!important}.size-large.icon-circle{padding:12px!important}.size-header.icon-circle{padding:4px!important}.size-header.icon-circle .mat-icon{width:10px;height:10px;font-size:10px}.size-xs.icon-circle{padding:4px!important}.size-xs.icon-circle .mat-icon{width:12px;height:12px;font-size:12px}.size-sm.icon-circle{padding:8px!important}.size-sm.icon-circle .mat-icon{width:12px;height:12px;font-size:12px}.size-base.icon-circle{padding:10px!important}.size-base.icon-circle .mat-icon{width:16px;height:16px;font-size:16px}.size-l.icon-circle{padding:12px!important}.size-l.icon-circle .mat-icon{width:16px;height:16px;font-size:16px}.size-xl.icon-circle{padding:14px!important}.size-xl.icon-circle .mat-icon{width:20px;height:20px;font-size:20px}.icon-xs{padding:4px!important}.mdc-button.blue{background-color:#5473e8;color:#fff}.mdc-button.blue:hover{background-color:#6581ea}.mdc-button.blue:active{background-color:#1e46df}.mdc-button.green{background-color:#37c1ce;color:#fff}.mdc-button.green:hover{background-color:#4bc7d3}.mdc-button.green:active{background-color:#299da8}.mdc-button.grey{background-color:#383b4a;color:#fff}.mdc-button.grey:hover{background-color:#4b4f62}.mdc-button.grey:active{background-color:#252831}.mdc-button.error{background-color:#e854a4;color:#fff}.mdc-button.error:hover{background-color:#ef87bf}.mdc-button.error:active{background-color:#e22a8e}.mdc-button.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.gradient:hover{background:linear-gradient(0deg,#fafafd4d 0% 100%),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.gradient:active{background:linear-gradient(0deg,#383b4a80 0% 100%),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.disabled,.mdc-button:disabled{background-color:#d1d3db!important;color:#666!important;cursor:not-allowed!important}.mdc-button.blue-no-outline{background-color:#fff;color:#5473e8;border:1px solid #5473E8}.mdc-button.blue-no-outline:hover{background-color:#6581ea;color:#fff}.mdc-button.blue-no-outline:active{background-color:#1e46df;color:#fff}.mdc-button.green-no-outline{background-color:#fff;color:#37c1ce;border:1px solid #37C1CE}.mdc-button.green-no-outline:hover{background-color:#4bc7d3;color:#fff}.mdc-button.green-no-outline:active{background-color:#299da8;color:#fff}.mdc-button.grey-no-outline{background-color:#fff;color:#383b4a;border:1px solid #383B4A}.mdc-button.grey-no-outline:hover{background-color:#4b4f62;color:#fff}.mdc-button.grey-no-outline:active{background-color:#252831;color:#fff}.mdc-button.error-no-outline{background-color:#fff;color:#e854a4;border:1px solid #E854A4}.mdc-button.error-no-outline:hover{background-color:#ef87bf;color:#fff}.mdc-button.error-no-outline:active{background-color:#e22a8e;color:#fff}::ng-deep .cdk-overlay-pane{border-radius:6px!important;box-shadow:0 2px 6px #00000026!important}::ng-deep .mat-mdc-menu-panel{padding:4px 0!important;background-color:#fff!important;min-width:180px!important;border-radius:6px!important;box-shadow:none!important}::ng-deep .mat-mdc-menu-item{font-family:Roboto,sans-serif;font-size:14px;color:#333;padding:12px 16px;border-radius:0!important;transition:background .2s ease-in-out}::ng-deep .mat-mdc-menu-item:hover{background-color:#f5f5f5!important}.size-header ::ng-deep .mdc-button__label{display:none!important}::ng-deep .mat-mdc-button-touch-target{display:none!important}\n"] }]
|
|
147
|
+
args: [{ selector: 'al-button', imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule], standalone: true, template: "<!-- Regular button types -->\n<ng-container *ngIf=\"buttonType !== 'dropdown'; else dropdownTpl\">\n <button\n mat-flat-button\n class=\"btn custom-button\" [class]=\"effectiveFontClass\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n \n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-circle': buttonType === 'icon-circle',\n 'blue': category === 'blue',\n 'green': category === 'green',\n 'grey': category === 'grey',\n 'error': category === 'error',\n 'gradient': category === 'gradient',\n 'blue-no-outline': category === 'blue-no-outline',\n 'green-no-outline': category === 'green-no-outline',\n 'grey-no-outline': category === 'grey-no-outline',\n 'error-no-outline': category === 'error-no-outline',\n 'btn-default': state === 'default',\n 'btn-hover': state === 'hover',\n 'btn-pressed': state === 'pressed',\n 'btn-disabled': state === 'disabled'\n }\"\n [ngStyle]=\"{ color: color }\"\n [disabled]=\"state === 'disabled'\"\n (click)=\"onClick.emit($event)\"\n (mouseenter)=\"onHover.emit($event)\"\n (mouseleave)=\"onMouseLeave.emit($event)\"\n [style.display]=\"'inline-flex'\"\n [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap()\"\n >\n <!-- Left Icon (Only shown if leftIcon is set and not empty) -->\n <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\"\n [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n class=\"left-icon\">{{ leftIconText }}</mat-icon>\n <!-- Label (Only shown if iconOnly is false) -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\" [ngStyle]=\"{ color: color }\">{{ label || '' }}</span>\n \n <!-- Right Icon (Only shown if rightIcon is set and not empty) -->\n <mat-icon *ngIf=\"rightIcon?.trim() as rightIconText\"\n [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n class=\"right-icon\">{{ rightIconText }}</mat-icon>\n </button>\n </ng-container>\n \n <!-- Dropdown button template -->\n <ng-template #dropdownTpl>\n <button\n mat-flat-button\n class=\"btn custom-button\" [class]=\"effectiveFontClass\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-label': true,\n 'blue': category === 'blue',\n 'green': category === 'green',\n 'grey': category === 'grey',\n 'error': category === 'error',\n 'gradient': category === 'gradient',\n 'blue-no-outline': category === 'blue-no-outline',\n 'green-no-outline': category === 'green-no-outline',\n 'grey-no-outline': category === 'grey-no-outline',\n 'error-no-outline': category === 'error-no-outline',\n 'btn-default': state === 'default',\n 'btn-hover': state === 'hover',\n 'btn-pressed': state === 'pressed',\n 'btn-disabled': state === 'disabled',\n \n }\"\n [ngStyle]=\"{ color: color }\"\n [disabled]=\"state === 'disabled'\"\n (mouseenter)=\"onHover.emit($event)\"\n (mouseleave)=\"onMouseLeave.emit($event)\"\n [style.display]=\"'inline-flex'\"\n [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap()\"\n [matMenuTriggerFor]=\"menu\"\n >\n <!-- Left Icon (optional) -->\n <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\"\n [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n class=\"left-icon\">{{ leftIconText }}</mat-icon>\n <!-- Label -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\" [ngStyle]=\"{ color: color }\">{{ label || '' }}</span>\n <!-- Dropdown Arrow Icon -->\n <mat-icon class=\"right-icon\">arrow_drop_down</mat-icon>\n </button>\n <!-- Mat Menu -->\n <mat-menu #menu=\"matMenu\" panelClass=\"custom-dropdown-menu\">\n <button mat-menu-item *ngFor=\"let opt of dropdownOptions\" (click)=\"selectOption(opt)\" [ngClass]=\"effectiveFontClass\">\n {{ opt.label || opt }}\n </button>\n </mat-menu>\n </ng-template>", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.material-icons-outlined{font-family:Material Icons Outlined;font-weight:400;font-style:normal;font-feature-settings:\"liga\";font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.mdc-button.btn{border-radius:5px;display:flex;align-items:center;cursor:pointer;border:none;transition:background .2s,border .2s,transform .1s;min-width:auto!important;gap:8px;height:auto!important}.mdc-button.btn-primary1{background-color:#5473e8;color:#fff}.mdc-button.btn-primary2{background-color:#37c1ce;color:#fff}.mdc-button.btn-secondary{background-color:#383b4a;color:#fff}.mdc-button.btn-destructive{background-color:#e854a4;color:#fff}.mdc-button.btn-gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.btn-primary2:hover{background-color:#4bc7d3!important}.mdc-button.btn-primary2:active{background-color:#299da8!important}.mdc-button.btn-primary2:outlined{background-color:#fff;border-radius:4px;border:1px solid #37c1ce}.mdc-button.btn-primary1:hover{background-color:#6581ea!important}.mdc-button.btn-primary1:active{background-color:#1e46df!important}.mdc-button.btn-primary1:outlined{background-color:#fff;border-radius:4px;border:1px solid #5473e8}.mdc-button.btn-secondary:hover{background-color:#4b4f62!important}.mdc-button.btn-secondary:active{background-color:#252831!important}.mdc-button.btn-secondary:outlined{background-color:#fff;border-radius:4px;border:1px solid #383B4A}.mdc-button.btn-destructive:hover{background-color:#ef87bf!important}.mdc-button.btn-destructive:active{background-color:#e22a8e!important}.mdc-button.btn-destructive:outlined{background-color:#fff;border-radius:4px;border:1px solid #E854A4}.mdc-button.btn-gradient:hover{background:linear-gradient(275deg,#4a90e2 -36.22%,#2bbbad 100.04%)!important}.mdc-button.btn-gradient:active{background:linear-gradient(275deg,#42a5f5 -36.22%,#1e88e5 100.04%)!important}.mdc-button.btn-disabled{border:none!important;background-color:#b0b0b0;color:#666;cursor:not-allowed}.mdc-button.btn-outlined{background:transparent;border:2px solid currentColor}.blue{background-color:#5473e8!important;color:#fff}.blue.btn-hover,.blue:hover{background-color:#6581ea!important}.blue.btn-pressed,.blue:active{background-color:#1e46df!important}.green{background-color:#37c1ce!important;color:#fff}.green.btn-hover,.green:hover{background-color:#4bc7d3!important}.green.btn-pressed,.green:active{background-color:#299da8!important}.grey{background-color:#383b4a!important;color:#fff}.grey.btn-hover,.grey:hover{background-color:#4b4f62!important}.grey.btn-pressed,.grey:active{background-color:#252831!important}.error{background-color:#e854a4!important;color:#fff}.error.btn-hover,.error:hover{background-color:#ef87bf!important}.error.btn-pressed,.error:active{background-color:#e22a8e!important}.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.gradient.btn-hover,.gradient:hover{opacity:.9}.gradient.btn-pressed,.gradient:active{opacity:.8}.btn.custom-button>*+*{margin-left:8px}.two-icon-label{padding:4px 12px!important}button.two-icon-label .mat-icon{width:20px!important;height:20px!important}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format(\"woff2\")}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.left-icon{order:0}.right-icon{order:2}mat-icon.mat-icon{margin:0!important;padding:0!important}.size-header{font-size:20px;padding:4px 12px!important}.size-xs{font-size:12px;padding:8px 12px!important}.size-sm{font-size:14px;padding:8px 12px!important}.size-base{font-size:14px;padding:10px 16px!important}.size-l{font-size:16px;padding:12px 20px!important}.size-xl{font-size:16px;padding:14px 24px!important}.size-header .mat-icon{font-size:20px;height:20px;width:20px}.size-xs .mat-icon,.size-sm .mat-icon,.size-base .mat-icon{font-size:16px;height:16px;width:16px}.size-l .mat-icon,.size-xl .mat-icon{font-size:20px;height:20px;width:20px}.btn.size-header{gap:4px!important;padding:4px 12px!important}::ng-deep .custom-dropdown-menu.mat-mdc-menu-panel,::ng-deep .custom-dropdown-menu.mat-menu-panel{padding:0;border-radius:8px;box-shadow:0 2px 6px #00000026;border:1px solid rgba(0,0,0,.12)}::ng-deep .custom-dropdown-menu .mat-mdc-menu-content,::ng-deep .custom-dropdown-menu .mat-menu-content{padding:0}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item{font-family:Roboto,sans-serif;font-size:16px;line-height:24px;height:56px;padding:16px 24px;color:#47515e}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:hover,::ng-deep .custom-dropdown-menu .mat-menu-item:hover{background:#f5f6f7}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item+.mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item+.mat-menu-item{border-top:1px solid #EAECEE}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface{background-color:#fff!important;--mdc-theme-surface: #ffffff !important;--mdc-menu-container-color: #ffffff !important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content,::ng-deep .mat-menu-panel .mat-menu-content{background-color:#fff!important}.cdk-overlay-pane{z-index:1000!important;background:#fff!important}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface,.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface,.cdk-overlay-pane .mat-menu-panel{background-color:#fff!important;--mdc-theme-surface:#ffffff !important;--mdc-menu-container-color:#fff !important}.mat-mdc-menu-panel,.mdc-menu-surface,.mat-menu-panel{--mdc-theme-surface: #ffffff !important;background-color:#fff!important}.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface{--mdc-menu-container-color:#fff !important}.cdk-overlay-pane .mat-menu-panel,.cdk-overlay-pane .mat-mdc-menu-content,.cdk-overlay-pane .mat-menu-content{background:#fff!important}button.icon-circle{width:auto!important;height:auto!important;border-radius:50%!important;aspect-ratio:1/1;display:inline-flex;align-items:center;min-width:0!important;justify-content:center;padding:6px!important}.size-small.icon-circle{padding:4px!important}.size-medium.icon-circle{padding:8px!important}.size-large.icon-circle{padding:12px!important}.size-header.icon-circle{padding:4px!important}.size-header.icon-circle .mat-icon{width:10px;height:10px;font-size:10px}.size-xs.icon-circle{padding:4px!important}.size-xs.icon-circle .mat-icon{width:12px;height:12px;font-size:12px}.size-sm.icon-circle{padding:8px!important}.size-sm.icon-circle .mat-icon{width:12px;height:12px;font-size:12px}.size-base.icon-circle{padding:10px!important}.size-base.icon-circle .mat-icon{width:16px;height:16px;font-size:16px}.size-l.icon-circle{padding:12px!important}.size-l.icon-circle .mat-icon{width:16px;height:16px;font-size:16px}.size-xl.icon-circle{padding:14px!important}.size-xl.icon-circle .mat-icon{width:20px;height:20px;font-size:20px}.icon-xs{padding:4px!important}.mdc-button.blue{background-color:#5473e8;color:#fff}.mdc-button.blue:hover{background-color:#6581ea}.mdc-button.blue:active{background-color:#1e46df}.mdc-button.green{background-color:#37c1ce;color:#fff}.mdc-button.green:hover{background-color:#4bc7d3}.mdc-button.green:active{background-color:#299da8}.mdc-button.grey{background-color:#383b4a;color:#fff}.mdc-button.grey:hover{background-color:#4b4f62}.mdc-button.grey:active{background-color:#252831}.mdc-button.error{background-color:#e854a4;color:#fff}.mdc-button.error:hover{background-color:#ef87bf}.mdc-button.error:active{background-color:#e22a8e}.mdc-button.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.gradient:hover{background:linear-gradient(0deg,#fafafd4d 0% 100%),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.gradient:active{background:linear-gradient(0deg,#383b4a80 0% 100%),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.disabled,.mdc-button:disabled{background-color:#d1d3db!important;color:#666!important;cursor:not-allowed!important}.mdc-button.blue-no-outline{background-color:#fff;color:#5473e8;border:1px solid #5473E8}.mdc-button.blue-no-outline:hover{background-color:#6581ea;color:#fff}.mdc-button.blue-no-outline:active{background-color:#1e46df;color:#fff}.mdc-button.green-no-outline{background-color:#fff;color:#37c1ce;border:1px solid #37C1CE}.mdc-button.green-no-outline:hover{background-color:#4bc7d3;color:#fff}.mdc-button.green-no-outline:active{background-color:#299da8;color:#fff}.mdc-button.grey-no-outline{background-color:#fff;color:#383b4a;border:1px solid #383B4A}.mdc-button.grey-no-outline:hover{background-color:#4b4f62;color:#fff}.mdc-button.grey-no-outline:active{background-color:#252831;color:#fff}.mdc-button.error-no-outline{background-color:#fff;color:#e854a4;border:1px solid #E854A4}.mdc-button.error-no-outline:hover{background-color:#ef87bf;color:#fff}.mdc-button.error-no-outline:active{background-color:#e22a8e;color:#fff}::ng-deep .cdk-overlay-pane{border-radius:6px!important;box-shadow:0 2px 6px #00000026!important}::ng-deep .mat-mdc-menu-panel{padding:4px 0!important;background-color:#fff!important;min-width:180px!important;border-radius:6px!important;box-shadow:none!important}::ng-deep .mat-mdc-menu-item{font-family:Roboto,sans-serif;font-size:14px;color:#333;padding:12px 16px;border-radius:0!important;transition:background .2s ease-in-out}::ng-deep .mat-mdc-menu-item:hover{background-color:#f5f5f5!important}.size-header ::ng-deep .mdc-button__label{display:none!important}::ng-deep .mat-mdc-button-touch-target{display:none!important}\n"] }]
|
|
148
148
|
}], propDecorators: { iconPlacement: [{
|
|
149
149
|
type: Input
|
|
150
150
|
}], state: [{
|