coersystem
Version:
Library for Angular projects
332 lines (329 loc) • 530 kB
JavaScript
import * as i0 from '@angular/core';
import { viewChild, input, output, Component, computed, effect, Injectable, signal, contentChildren, inject, Input, viewChildren, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2$1 from '@angular/router';
import { Router, RouterModule } from '@angular/router';
import * as i2$2 from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i4 from 'coersystem/directives';
import { CoerRefDirective, DirectivesModule } from 'coersystem/directives';
import * as i3$4 from 'coersystem/pipes';
import { PipesModule } from 'coersystem/pipes';
import * as i2$6 from '@angular/cdk/drag-drop';
import { CdkDrag, CdkDragHandle, CdkDragPlaceholder, CdkDropList } from '@angular/cdk/drag-drop';
import * as i3 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i3$2 from '@angular/material/checkbox';
import { MatCheckboxModule } from '@angular/material/checkbox';
import * as i2$3 from '@angular/material/datepicker';
import { MatDatepickerModule } from '@angular/material/datepicker';
import * as i2$8 from '@angular/material/sidenav';
import { MatDrawerContainer, MatDrawerContent, MatDrawer } from '@angular/material/sidenav';
import * as i2 from '@angular/material/expansion';
import { MatExpansionModule } from '@angular/material/expansion';
import * as i2$4 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i3$3 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i2$7 from '@angular/material/list';
import { MatListModule } from '@angular/material/list';
import { NativeDateAdapter, provideNativeDateAdapter, DateAdapter, MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
import * as i2$5 from '@angular/material/slide-toggle';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import * as i3$5 from '@angular/material/tabs';
import { MatTabsModule } from '@angular/material/tabs';
import { MatTimepickerModule } from '@angular/material/timepicker';
import * as i3$6 from '@angular/material/toolbar';
import { MatToolbarModule } from '@angular/material/toolbar';
import * as i3$1 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import { Tools, Strings, ControlValue, CONTROL_VALUE, Dates, HTMLElements, Screen, CoerAlert, Files, Collections, Numbers, Source, Menu, Breadcrumbs } from 'coersystem/tools';
import { breakpointSIGNAL, isModalOpenSIGNAL, colorsSIGNAL, menuSelectedSIGNAL, isMenuOpenSIGNAL, isLoadingSIGNAL, navigationSIGNAL } from 'coersystem/signals';
import { Modal } from 'bootstrap';
class CoerAccordion {
constructor() {
//Elements
this._expansionPanel = viewChild('coerAccordion');
//Variables
this._id = Tools.GetGuid('coer-accordion');
this._isDisabled = false;
//Inputs
this.id = input('');
this.title = input('');
this.icon = input('');
this.expanded = input(true);
this.scrollOnOpen = input(false);
this.height = input('');
this.minHeight = input('0px');
//Outputs
this.onOpen = output();
this.onClose = output();
//Generic Tools
this._IsNotOnlyWhiteSpace = Tools.IsNotOnlyWhiteSpace;
}
//AfterViewInit
ngAfterViewInit() {
Tools.Sleep().then(() => {
this._htmlElement = document.getElementById(this._id);
});
}
//getter
get isExpanded() {
return Tools.IsNotNull(this._expansionPanel())
? this._expansionPanel().expanded
: false;
}
//getter
get isCollapsed() {
return Tools.IsNotNull(this._expansionPanel())
? !this._expansionPanel().expanded
: true;
}
//getter
get isDisabled() {
return this._isDisabled;
}
/** */
Open() {
if (Tools.IsNotNull(this._expansionPanel())) {
if (this.isCollapsed) {
this._expansionPanel()?.open();
}
if (this.scrollOnOpen() && Tools.IsNotNull(this._htmlElement)) {
Tools.Sleep().then(_ => this._htmlElement.scrollIntoView({ behavior: 'smooth' }));
}
this.onOpen.emit();
}
}
/** */
Close() {
if (Tools.IsNotNull(this._expansionPanel())) {
if (this.isExpanded) {
this._expansionPanel()?.close();
}
this.onClose.emit();
}
}
/** */
Enable() {
this._isDisabled = false;
}
/** */
Disable() {
this._isDisabled = true;
}
/** */
ScrollToAccordion() {
if (Tools.IsNotNull(this._expansionPanel())) {
Tools.Sleep().then(_ => this._htmlElement.scrollIntoView({ behavior: 'smooth' }));
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerAccordion, isStandalone: false, selector: "coer-accordion", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, scrollOnOpen: { classPropertyName: "scrollOnOpen", publicName: "scrollOnOpen", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpen: "onOpen", onClose: "onClose" }, viewQueries: [{ propertyName: "_expansionPanel", first: true, predicate: ["coerAccordion"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-expansion-panel\r\n [id]=\"_id\" \r\n #coerAccordion \r\n title=\"\" \r\n class=\"coer-accordion\"\r\n [disabled]=\"_isDisabled\" \r\n [expanded]=\"expanded()\" \r\n (opened)=\"Open()\" \r\n (closed)=\"Close()\">\r\n \r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n @if(_IsNotOnlyWhiteSpace(icon())) {\r\n <i [class]=\"icon()\"></i>\r\n }\r\n <span>{{ title() }}</span>\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n\r\n <div [ngClass]=\"{ 'collapsed': isCollapsed }\"\r\n [ngStyle]=\"{\r\n 'height': height(),\r\n 'min-height': minHeight()\r\n }\">\r\n <ng-content></ng-content>\r\n </div>\r\n</mat-expansion-panel>", styles: ["mat-expansion-panel.coer-accordion{overflow:visible!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header{height:35px!important;background-color:var(--smoke)!important;padding-left:12px!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header span{color:var(--black)!important;font-size:16px!important;white-space:nowrap!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header mat-panel-title{display:flex;align-items:center;gap:5px}mat-expansion-panel.coer-accordion div.mat-expansion-panel-body{padding:0!important}mat-expansion-panel.coer-accordion .collapsed{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2.MatExpansionPanelTitle, selector: "mat-panel-title" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerAccordion, decorators: [{
type: Component,
args: [{ selector: 'coer-accordion', standalone: false, template: "<mat-expansion-panel\r\n [id]=\"_id\" \r\n #coerAccordion \r\n title=\"\" \r\n class=\"coer-accordion\"\r\n [disabled]=\"_isDisabled\" \r\n [expanded]=\"expanded()\" \r\n (opened)=\"Open()\" \r\n (closed)=\"Close()\">\r\n \r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n @if(_IsNotOnlyWhiteSpace(icon())) {\r\n <i [class]=\"icon()\"></i>\r\n }\r\n <span>{{ title() }}</span>\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n\r\n <div [ngClass]=\"{ 'collapsed': isCollapsed }\"\r\n [ngStyle]=\"{\r\n 'height': height(),\r\n 'min-height': minHeight()\r\n }\">\r\n <ng-content></ng-content>\r\n </div>\r\n</mat-expansion-panel>", styles: ["mat-expansion-panel.coer-accordion{overflow:visible!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header{height:35px!important;background-color:var(--smoke)!important;padding-left:12px!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header span{color:var(--black)!important;font-size:16px!important;white-space:nowrap!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header mat-panel-title{display:flex;align-items:center;gap:5px}mat-expansion-panel.coer-accordion div.mat-expansion-panel-body{padding:0!important}mat-expansion-panel.coer-accordion .collapsed{display:none!important}\n"] }]
}] });
class CoerButton {
constructor() {
//Variables
this._id = Tools.GetGuid('coer-button');
//Inputs
this.id = input('');
this.color = input('default');
this.type = input('filled');
this.typeBreakpoint = input({});
this.icon = input('');
this.iconPosition = input('left');
this.path = input([]);
this.isLoading = input(false);
this.isDisabled = input(false);
this.isReadonly = input(false);
this.isInvisible = input(false);
this.isHidden = input(false);
this.width = input('125px');
this.widthBreakpoint = input({});
this.minWidth = input('30px');
this.maxWidth = input('100%');
this.height = input('40px');
this.minHeight = input('30px');
this.marginTop = input('0px');
this.marginRight = input('0px');
this.marginBottom = input('0px');
this.marginLeft = input('0px');
this.tooltip = input('');
this.tooltipPosition = input('left');
//Outputs
this.onClick = output();
//computed
this._tooltip = computed(() => {
return Tools.IsNotOnlyWhiteSpace(this.tooltip())
? Strings.CleanUpBlanks(this.tooltip()) : '';
});
//computed
this._showButton = computed(() => {
return this._buttonBreakpointType() == 'filled'
|| this._buttonBreakpointType() == 'outline';
});
//computed
this._showButtonIcon = computed(() => {
return this._buttonBreakpointType() == 'icon'
|| this._buttonBreakpointType() == 'icon-outline'
|| this._buttonBreakpointType() == 'icon-no-border';
});
//computed
this._buttonBreakpointType = computed(() => {
switch (breakpointSIGNAL()) {
case 'mv': return this.typeBreakpoint()?.mv || this.type();
case 'xs': return this.typeBreakpoint()?.xs || this.type();
case 'sm': return this.typeBreakpoint()?.sm || this.type();
case 'md': return this.typeBreakpoint()?.md || this.type();
case 'lg': return this.typeBreakpoint()?.lg || this.type();
case 'xl': return this.typeBreakpoint()?.xl || this.type();
case 'xxl': return this.typeBreakpoint()?.xxl || this.type();
default: return this.type();
}
});
//computed
this._buttonBreakpointSizeWidth = computed(() => {
switch (breakpointSIGNAL()) {
case 'mv': return this.widthBreakpoint()?.mv || this.width();
case 'xs': return this.widthBreakpoint()?.xs || this.width();
case 'sm': return this.widthBreakpoint()?.sm || this.width();
case 'md': return this.widthBreakpoint()?.md || this.width();
case 'lg': return this.widthBreakpoint()?.lg || this.width();
case 'xl': return this.widthBreakpoint()?.xl || this.width();
case 'xxl': return this.widthBreakpoint()?.xxl || this.width();
default: return this.width();
}
});
//computed
this._tooltipPosition = computed(() => {
switch (this.tooltipPosition()) {
case 'top': return 'above';
case 'right': return 'right';
case 'bottom': return 'below';
default: return 'left';
}
});
//computed
this._isEnable = computed(() => {
return !this.isLoading()
&& !this.isDisabled()
&& !this.isInvisible()
&& !this.isReadonly();
});
//computed
this._icon = computed(() => {
const icon = Tools.IsNotOnlyWhiteSpace(this.icon()) ? this.icon() : '';
switch (icon) {
case 'new': return 'icon-plus';
case 'save': return 'icon-disk-floppy icon-fill';
case 'cancel': return 'icon-x';
case 'import': return 'icon-file-arrow-up icon-fill';
case 'export': return 'icon-file-arrow-down icon-fill';
case 'excel': return 'icon-file-xls icon-fill';
case 'delete': return 'icon-trash-can icon-fill';
case 'edit': return 'icon-pen icon-fill';
case 'go': return 'icon-box-arrow-right';
case 'back': return 'icon-box-arrow-left';
case 'pointer': return 'icon-pointer icon-fill';
}
return ['icon', 'icon-outline', 'icon-no-border'].includes(this.type())
&& Tools.IsOnlyWhiteSpace(icon) ? 'icon-pointer icon-fill' : icon;
});
//computed
this._buttonType = computed(() => {
const readonly = ['icon', 'icon-outline', 'icon-no-border'].includes(this._buttonBreakpointType())
? (this.isDisabled() || this.isLoading() ? 'readonly' : '')
: (this.isDisabled() ? 'readonly' : '');
return `
${this.color()}-${['filled', 'icon'].includes(this._buttonBreakpointType()) ? 'filled' : 'outline'}
${readonly}
${this.isLoading() ? 'cursor-wait' : ''}
${this._buttonBreakpointType() == 'icon-no-border' ? 'icon-no-border' : ''}
`.trim();
});
}
//AfterViewInit
ngAfterViewInit() {
Tools.Sleep().then(() => {
this._innerButton = document.getElementById(`${this._id}-inner-button`);
if (this._innerButton) {
this._innerButton.addEventListener('focus', () => {
if (!this._isEnable())
this.Blur();
});
}
this._innerButtonIcon = document.getElementById(`${this._id}-inner-button-icon`);
if (this._innerButtonIcon) {
this._innerButtonIcon.addEventListener('focus', () => {
if (!this._isEnable())
this.Blur();
});
}
});
}
/** */
_Click() {
if (this._isEnable()) {
this.onClick.emit();
}
this.Blur();
}
/** */
Click(timeout = 0) {
Tools.Sleep(timeout).then(() => {
if (this._isEnable())
this.onClick.emit();
});
}
/** */
Focus(timeout = 0) {
Tools.Sleep(timeout).then(() => {
if (this._isEnable()) {
if (this._showButton()) {
this._innerButton?.focus();
}
else if (this._showButtonIcon()) {
this._innerButtonIcon?.focus();
}
}
});
}
/** */
Blur(timeout = 0) {
Tools.Sleep(timeout).then(() => {
this._innerButton?.blur();
this._innerButtonIcon?.blur();
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerButton, isStandalone: false, selector: "coer-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, typeBreakpoint: { classPropertyName: "typeBreakpoint", publicName: "typeBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, widthBreakpoint: { classPropertyName: "widthBreakpoint", publicName: "widthBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-button': true, 'display-contents': !isHidden() && !isReadonly(), 'display-none': isHidden() || isReadonly() }\">\r\n <a [routerLink]=\"(path().length > 0 && _isEnable()) ? path() : null\"\r\n [matTooltip]=\"_tooltip()\"\r\n [matTooltipPosition]=\"_tooltipPosition()\"\r\n [matTooltipDisabled]=\"!_isEnable()\"\r\n [matTooltipHideDelay]=\"0\"\r\n [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible': isInvisible()\r\n }\"\r\n [ngStyle]=\"{ \r\n 'margin-top' : marginTop(), \r\n 'margin-right' : marginRight(), \r\n 'margin-bottom': marginBottom(), \r\n 'margin-left' : marginLeft(),\r\n 'width' : _showButtonIcon() ? 'auto' : _buttonBreakpointSizeWidth(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(), \r\n }\"> \r\n \r\n <div [class]=\"_showButton() ? '' : 'display-none'\">\r\n <button mat-button type=\"button\" \r\n [id]=\"_id + '-inner-button'\"\r\n (click)=\"_Click()\"\r\n [class]=\"_buttonType()\"\r\n [ngStyle]=\"{ \r\n 'height' : height(),\r\n 'min-height': minHeight()\r\n }\">\r\n\r\n @if(!isLoading()) {\r\n <span class=\"slot\">\r\n @if(iconPosition() == 'left') { \r\n <i [class]=\"_icon()\"></i> \r\n }\r\n \r\n <span [ngClass]=\"{ \r\n 'ms-2': (iconPosition() == 'left' && _icon().length > 0), \r\n 'me-2': (iconPosition() == 'right' && _icon().length > 0) \r\n }\">\r\n <ng-content>Click</ng-content>\r\n </span>\r\n \r\n @if(iconPosition() == 'right') {\r\n <i [class]=\"_icon()\"></i>\r\n }\r\n </span>\r\n }\r\n\r\n @else {\r\n <span class=\"slot animation-appear\">\r\n <span class=\"me-2\"> Loading </span>\r\n <i class=\"icon-circle-notch animation-spin\"></i>\r\n </span> \r\n }\r\n </button>\r\n </div> \r\n\r\n \r\n <div [class]=\"_showButtonIcon() ? 'flex-middle-center' : 'display-none'\">\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button-icon'\"\r\n type=\"button\"\r\n (click)=\"_Click()\"\r\n [class]=\"_buttonType()\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n </div>\r\n </a>\r\n</div> ", styles: ["coer-button{display:contents!important}div.coer-button a{display:inline-block!important;height:fit-content!important;text-decoration:none!important;color:var(--black)}div.coer-button button{font-size:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%}div.coer-button .slot{width:100px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}div.coer-button button.default-filled{color:var(--black)!important;background-color:transparent!important}div.coer-button button.default-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!important}div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):focus{box-shadow:0 0 20px transparent!important}div.coer-button button.default-filled:not(.readonly):hover,div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):hover,div.coer-button button.default-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.primary-filled{color:var(--white)!important;background-color:var(--primary-inner)!important}div.coer-button button.primary-outline{color:var(--primary-inner)!important;border:1px solid var(--primary-inner)!important;background-color:transparent!important}div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--primary-inner)!important}div.coer-button button.primary-filled:not(.readonly):hover,div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):hover,div.coer-button button.primary-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.secondary-filled{color:var(--white)!important;background-color:var(--secondary-inner)!important}div.coer-button button.secondary-outline{color:var(--secondary-inner)!important;border:1px solid var(--secondary-inner)!important;background-color:transparent!important}div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--secondary-inner)!important}div.coer-button button.secondary-filled:not(.readonly):hover,div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):hover,div.coer-button button.secondary-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.success-filled{color:var(--white)!important;background-color:var(--success-inner)!important}div.coer-button button.success-outline{color:var(--success-inner)!important;border:1px solid var(--success-inner)!important;background-color:transparent!important}div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):focus{box-shadow:0 0 20px var(--success-inner)!important}div.coer-button button.success-filled:not(.readonly):hover,div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):hover,div.coer-button button.success-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.warning-filled{color:var(--black)!important;background-color:var(--warning-inner)!important}div.coer-button button.warning-outline{color:var(--warning-inner)!important;border:1px solid var(--warning-inner)!important;background-color:transparent!important}div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):focus{box-shadow:0 0 20px var(--warning-inner)!important}div.coer-button button.warning-filled:not(.readonly):hover,div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):hover,div.coer-button button.warning-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.danger-filled{color:var(--white)!important;background-color:var(--danger-inner)!important}div.coer-button button.danger-outline{color:var(--danger-inner)!important;border:1px solid var(--danger-inner)!important;background-color:transparent!important}div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):focus{box-shadow:0 0 20px var(--danger-inner)!important}div.coer-button button.danger-filled:not(.readonly):hover,div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):hover,div.coer-button button.danger-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.navigation-filled{color:var(--white)!important;background-color:var(--navigation-inner)!important}div.coer-button button.navigation-outline{color:var(--navigation-inner)!important;border:1px solid var(--navigation-inner)!important;background-color:transparent!important}div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):focus{box-shadow:0 0 20px var(--navigation-inner)!important}div.coer-button button.navigation-filled:not(.readonly):hover,div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):hover,div.coer-button button.navigation-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.information-filled{color:var(--white)!important;background-color:var(--information-inner)!important}div.coer-button button.information-outline{color:var(--information-inner)!important;border:1px solid var(--information-inner)!important;background-color:transparent!important}div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):focus{box-shadow:0 0 20px var(--information-inner)!important}div.coer-button button.information-filled:not(.readonly):hover,div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):hover,div.coer-button button.information-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.dark-filled{color:var(--white)!important;background-color:var(--black)!important}div.coer-button button.dark-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!important}div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):focus{box-shadow:0 0 20px var(--black)!important}div.coer-button button.dark-filled:not(.readonly):hover,div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):hover,div.coer-button button.dark-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.light-filled{color:var(--black)!important;background-color:var(--white)!important}div.coer-button button.light-outline{color:var(--white)!important;border:1px solid var(--white)!important;background-color:transparent!important}div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):focus{box-shadow:0 0 20px var(--white)!important}div.coer-button button.light-filled:not(.readonly):hover,div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):hover,div.coer-button button.light-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button{width:40px!important;height:40px!important;padding:0!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border{width:25px!important;height:25px!important;background-color:transparent!important;border:none!important;overflow:visible!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border *{font-size:medium!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-left,div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-in-right{font-size:20px!important}div.coer-button button.readonly,div.coer-button button.readonly:hover,div.coer-button button.readonly:focus{background-color:#dfdede!important;border-color:#dfdede!important;color:var(--white)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border.readonly{color:#dfdede!important}div.coer-button a.loading{cursor:wait!important}div.coer-button i{display:flex!important;align-items:center!important;justify-content:center!important}div.coer-button span{font-weight:700!important}div.coer-button .mat-mdc-button-touch-target{width:0px!important;height:0px!important}div.coer-button .mat-mdc-icon-button .mat-mdc-button-ripple,div.coer-button .mat-mdc-icon-button .mat-mdc-button-persistent-ripple,div.coer-button .mat-mdc-icon-button .mat-mdc-button-persistent-ripple:before{position:absolute!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerButton, decorators: [{
type: Component,
args: [{ selector: 'coer-button', standalone: false, template: "<div [ngClass]=\"{ 'coer-button': true, 'display-contents': !isHidden() && !isReadonly(), 'display-none': isHidden() || isReadonly() }\">\r\n <a [routerLink]=\"(path().length > 0 && _isEnable()) ? path() : null\"\r\n [matTooltip]=\"_tooltip()\"\r\n [matTooltipPosition]=\"_tooltipPosition()\"\r\n [matTooltipDisabled]=\"!_isEnable()\"\r\n [matTooltipHideDelay]=\"0\"\r\n [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible': isInvisible()\r\n }\"\r\n [ngStyle]=\"{ \r\n 'margin-top' : marginTop(), \r\n 'margin-right' : marginRight(), \r\n 'margin-bottom': marginBottom(), \r\n 'margin-left' : marginLeft(),\r\n 'width' : _showButtonIcon() ? 'auto' : _buttonBreakpointSizeWidth(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(), \r\n }\"> \r\n \r\n <div [class]=\"_showButton() ? '' : 'display-none'\">\r\n <button mat-button type=\"button\" \r\n [id]=\"_id + '-inner-button'\"\r\n (click)=\"_Click()\"\r\n [class]=\"_buttonType()\"\r\n [ngStyle]=\"{ \r\n 'height' : height(),\r\n 'min-height': minHeight()\r\n }\">\r\n\r\n @if(!isLoading()) {\r\n <span class=\"slot\">\r\n @if(iconPosition() == 'left') { \r\n <i [class]=\"_icon()\"></i> \r\n }\r\n \r\n <span [ngClass]=\"{ \r\n 'ms-2': (iconPosition() == 'left' && _icon().length > 0), \r\n 'me-2': (iconPosition() == 'right' && _icon().length > 0) \r\n }\">\r\n <ng-content>Click</ng-content>\r\n </span>\r\n \r\n @if(iconPosition() == 'right') {\r\n <i [class]=\"_icon()\"></i>\r\n }\r\n </span>\r\n }\r\n\r\n @else {\r\n <span class=\"slot animation-appear\">\r\n <span class=\"me-2\"> Loading </span>\r\n <i class=\"icon-circle-notch animation-spin\"></i>\r\n </span> \r\n }\r\n </button>\r\n </div> \r\n\r\n \r\n <div [class]=\"_showButtonIcon() ? 'flex-middle-center' : 'display-none'\">\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button-icon'\"\r\n type=\"button\"\r\n (click)=\"_Click()\"\r\n [class]=\"_buttonType()\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n </div>\r\n </a>\r\n</div> ", styles: ["coer-button{display:contents!important}div.coer-button a{display:inline-block!important;height:fit-content!important;text-decoration:none!important;color:var(--black)}div.coer-button button{font-size:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%}div.coer-button .slot{width:100px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}div.coer-button button.default-filled{color:var(--black)!important;background-color:transparent!important}div.coer-button button.default-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!important}div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):focus{box-shadow:0 0 20px transparent!important}div.coer-button button.default-filled:not(.readonly):hover,div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):hover,div.coer-button button.default-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.primary-filled{color:var(--white)!important;background-color:var(--primary-inner)!important}div.coer-button button.primary-outline{color:var(--primary-inner)!important;border:1px solid var(--primary-inner)!important;background-color:transparent!important}div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--primary-inner)!important}div.coer-button button.primary-filled:not(.readonly):hover,div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):hover,div.coer-button button.primary-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.secondary-filled{color:var(--white)!important;background-color:var(--secondary-inner)!important}div.coer-button button.secondary-outline{color:var(--secondary-inner)!important;border:1px solid var(--secondary-inner)!important;background-color:transparent!important}div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--secondary-inner)!important}div.coer-button button.secondary-filled:not(.readonly):hover,div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):hover,div.coer-button button.secondary-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.success-filled{color:var(--white)!important;background-color:var(--success-inner)!important}div.coer-button button.success-outline{color:var(--success-inner)!important;border:1px solid var(--success-inner)!important;background-color:transparent!important}div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):focus{box-shadow:0 0 20px var(--success-inner)!important}div.coer-button button.success-filled:not(.readonly):hover,div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):hover,div.coer-button button.success-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.warning-filled{color:var(--black)!important;background-color:var(--warning-inner)!important}div.coer-button button.warning-outline{color:var(--warning-inner)!important;border:1px solid var(--warning-inner)!important;background-color:transparent!important}div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):focus{box-shadow:0 0 20px var(--warning-inner)!important}div.coer-button button.warning-filled:not(.readonly):hover,div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):hover,div.coer-button button.warning-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.danger-filled{color:var(--white)!important;background-color:var(--danger-inner)!important}div.coer-button button.danger-outline{color:var(--danger-inner)!important;border:1px solid var(--danger-inner)!important;background-color:transparent!important}div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):focus{box-shadow:0 0 20px var(--danger-inner)!important}div.coer-button button.danger-filled:not(.readonly):hover,div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):hover,div.coer-button button.danger-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.navigation-filled{color:var(--white)!important;background-color:var(--navigation-inner)!important}div.coer-button button.navigation-outline{color:var(--navigation-inner)!important;border:1px solid var(--navigation-inner)!important;background-color:transparent!important}div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):focus{box-shadow:0 0 20px var(--navigation-inner)!important}div.coer-button button.navigation-filled:not(.readonly):hover,div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):hover,div.coer-button button.navigation-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.information-filled{color:var(--white)!important;background-color:var(--information-inner)!important}div.coer-button button.information-outline{color:var(--information-inner)!important;border:1px solid var(--information-inner)!important;background-color:transparent!important}div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):focus{box-shadow:0 0 20px var(--information-inner)!important}div.coer-button button.information-filled:not(.readonly):hover,div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):hover,div.coer-button button.information-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.dark-filled{color:var(--white)!important;background-color:var(--black)!important}div.coer-button button.dark-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!important}div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):focus{box-shadow:0 0 20px var(--black)!important}div.coer-button button.dark-filled:not(.readonly):hover,div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):hover,div.coer-button button.dark-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.light-filled{color:var(--black)!important;background-color:var(--white)!important}div.coer-button button.light-outline{color:var(--white)!important;border:1px solid var(--white)!important;background-color:transparent!important}div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):focus{box-shadow:0 0 20px var(--white)!important}div.coer-button button.light-filled:not(.readonly):hover,div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):hover,div.coer-button button.light-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button{width:40px!important;height:40px!important;padding:0!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border{width:25px!important;height:25px!important;background-color:transparent!important;border:none!important;overflow:visible!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border *{font-size:medium!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-left,div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-in-right{font-size:20px!important}div.coer-button button.readonly,div.coer-button button.readonly:hover,div.coer-button button.readonly:focus{background-color:#dfdede!important;border-color:#dfdede!important;color:var(--white)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border.readonly{color:#dfdede!important}div.coer-button a.loading{cursor:wait!important}div.coer-button i{display:flex!important;align-items:center!important;justify-content:center!important}div.coer-button span{font-weight:700!important}div.coer-button .mat-mdc-button-touch-target{width:0px!important;height:0px!important}div.coer-button .mat-mdc-icon-button .mat-mdc-button-ripple,div.coer-button .mat-mdc-icon-button .mat-mdc-button-persistent-ripple,div.coer-button .mat-mdc-icon-button .mat-mdc-button-persistent-ripple:before{position:absolute!important}\n"] }]
}] });
class CoerCard {
constructor() {
//Generic Tools
this.IsNotOnlyWhiteSpace = Tools.IsNotOnlyWhiteSpace;
//Variables
this._id = Tools.GetGuid('coer-accordion');
//Inputs
this.id = input('');
this.icon = input('');
this.name = input('');
this.title = input('');
this.phone = input('');
this.email = input('');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerCard, isStandalone: false, selector: "coer-card", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, phone: { classPropertyName: "phone", publicName: "phone", isSignal: true, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<figure class=\"coer-container width-min-content\">\r\n <div class=\"flex-wrap gap-0px\"> \r\n @if(IsNotOnlyWhiteSpace(name()) || IsNotOnlyWhiteSpace(title())) {\r\n <div class=\"flex-basis-300px flex-grow-1 flex-middle-left\">\r\n @if(IsNotOnlyWhiteSpace(icon())) {\r\n <i [class]=\"icon() + ' ' + 'font-size-39px'\"></i>\r\n }\r\n\r\n <div>\r\n @if(IsNotOnlyWhiteSpace(name())) {\r\n <p class=\"white-space-nowrap\"> {{ name() }} </p> \r\n }\r\n @if(title()) {\r\n <p class=\"white-space-nowrap\"> {{ title() }} </p>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (IsNotOnlyWhiteSpace(phone()) || IsNotOnlyWhiteSpace(email())) {\r\n <div class=\"flex-basis-100 padding-top-5px\"></div>\r\n \r\n <div class=\"flex-basis-100 padding-top-5px border-solid-top-2px\">\r\n <p class=\"flex-middle-left gap-20px\">\r\n @if(IsNotOnlyWhiteSpace(phone())) {\r\n <span class=\"flex-middle-left gap-5px\">\r\n <i class=\"coer-icon-whatsapp\"></i>\r\n <span> {{ phone() }} </span>\r\n </span>\r\n }\r\n\r\n @if(IsNotOnlyWhiteSpace(email())) {\r\n <span class=\"flex-middle-left gap-5px\">\r\n <i class=\"coer-icon-envelope\"></i>\r\n <span> {{ email() }} </span>\r\n </span>\r\n }\r\n </p>\r\n </div> \r\n }\r\n </div> \r\n</figure>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerCard, decorators: [{
type: Component,
args: [{ selector: 'coer-card', standalone: false, template: "<figure class=\"coer-co