coer-elements 1.0.16 → 1.1.1

package/styles/colors.scss

@@ -1,167 +1,208 @@
-$blue: #0d6efd;
-$gray: #6c757d;
-$green: #198754;
-$yellow: #ffc107;
-$red: #dc3545;
-$white: #f5f5f5;
-$black: #252525;
-$orange: #fd6031;
+:root {
+    --blue: #0d6efd;
+    --gray: #6c757d;
+    --green: #198754;
+    --yellow: #ffc107;
+    --red: #dc3545;
+    --white: #f5f5f5;
+    --black: #252525;    
+    --orange: #fd6031;
+    --purple: #a615bc;
+}
 
 //Blue
 .text-blue {
-    color: $blue !important;
-} 
+    color: var(--blue) !important;
+}
 
 .text-blue-bold {
-    color: $blue !important;
+    color: var(--blue) !important;
     font-weight: bold !important;
 }
 
 .background-blue {
-    background-color: $blue !important;
+    background-color: var(--blue) !important;
 }
 
 .background-border-blue {
-    background-color: $blue !important;
-    border-color: $blue !important;
+    background-color: var(--blue) !important;
+    border-color: var(--blue) !important;
 }
 
+.border-blue {
+    border-color: var(--blue) !important;
+}
 
 //Gray
 .text-gray {
-    color: $gray !important;
+    color: var(--gray) !important;
 }
 
 .text-gray-bold {
-    color: $gray !important;
+    color: var(--gray) !important;
     font-weight: bold !important;
 }
 
 .background-gray {
-    background-color: $gray !important;
+    background-color: var(--gray) !important;
 }
 
 .background-border-gray {
-    background-color: $gray !important;
-    border-color: $gray !important;
+    background-color: var(--gray) !important;
+    border-color: var(--gray) !important;
 }
 
+.border-gray {
+    border-color: var(--gray) !important;
+}
 
 //Green
 .text-green {
-    color: $green !important;
+    color: var(--green) !important;
 }
 
 .text-green-bold {
-    color: $green !important;
+    color: var(--green) !important;
     font-weight: bold !important;
 }
 
 .background-green {
-    background-color: $green !important;
+    background-color: var(--green) !important;
 }
 
 .background-border-green {
-    background-color: $green !important;
-    border-color: $green !important;
+    background-color: var(--green) !important;
+    border-color: var(--green) !important;
 }
 
+.border-green {
+    border-color: var(--green) !important;
+}
 
 //Yellow
 .text-yellow {
-    color: $yellow !important;
+    color: var(--yellow) !important;
 }
 
 .text-yellow-bold {
-    color: $yellow !important;
+    color: var(--yellow) !important;
     font-weight: bold !important;
 }
 
 .background-yellow {
-    background-color: $yellow !important;
+    background-color: var(--yellow) !important;
 }
 
 .background-border-yellow {
-    background-color: $yellow !important;
-    border-color: $yellow !important;
+    background-color: var(--yellow) !important;
+    border-color: var(--yellow) !important;
 }
 
+.border-yellow {
+    border-color: var(--yellow) !important;
+}
 
 //Red
 .text-red {
-    color: $red !important;
+    color: var(--red) !important;
 }
 
 .text-red-bold {
-    color: $red !important;
+    color: var(--red) !important;
     font-weight: bold !important;
 }
 
 .background-red {
-    background-color: $red !important;
+    background-color: var(--red) !important;
 }
 
 .background-border-red {
-    background-color: $red !important;
-    border-color: $red !important;
+    background-color: var(--red) !important;
+    border-color: var(--red) !important;
 }
 
+.border-red {
+    border-color: var(--red) !important;
+}
 
 //White
 .text-white {
-    color: $white !important;
+    color: var(--white) !important;
 }
 
 .text-white-bold {
-    color: $white !important;
+    color: var(--white) !important;
     font-weight: bold !important;
 }
 
 .background-white {
-    background-color: $white !important;
+    background-color: var(--white) !important;
 }
 
 .background-border-white {
-    background-color: $white !important;
-    border-color: $white !important;
+    background-color: var(--white) !important;
+    border-color: var(--white) !important;
 }
 
+.border-white {
+    border-color: var(--white) !important;
+}
 
 //Black
 .text-black {
-    color: $black !important;
+    color: var(--black) !important;
 }
 
 .text-black-bold {
-    color: $black !important;
+    color: var(--black) !important;
     font-weight: bold !important;
 }
 
 .background-black {
-    background-color: $black !important;
+    background-color: var(--black) !important;
 }
 
 .background-border-black {
-    background-color: $black !important;
-    border-color: $black !important;
+    background-color: var(--black) !important;
+    border-color: var(--black) !important;
 }
 
+.border-black {
+    border-color: var(--black) !important;
+}
 
 //Orange
 .text-orange {
-    color: $orange !important;
+    color: var(--orange) !important;
 }
 
 .text-orange-bold {
-    color: $orange !important;
+    color: var(--orange) !important;
     font-weight: bold !important;
 }
 
 .background-orange {
-    background-color: $orange !important;
+    background-color: var(--orange) !important;
 }
 
 .background-border-orange {
-    background-color: $orange !important;
-    border-color: $orange !important;
+    background-color: var(--orange) !important;
+    border-color: var(--orange) !important;
+}
+
+.border-orange {
+    border-color: var(--orange) !important;
+}
+
+//transparent
+.text-transparent {
+    color: transparent !important;
+} 
+
+.background-transparent {
+    background-color: transparent !important;
+} 
+
+.border-transparent {
+    border-color: transparent !important;
 }

package/styles/containers.scss

@@ -0,0 +1,44 @@
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@mixin Container() {
+    margin: 15px 30px 0px 30px;
+    padding: 10px;
+    box-shadow: 0px 0px 10px -10px black;
+    border-radius: 8px;
+    background-color: white;
+    animation-name: fadeIn;
+    animation-duration: 1.5s;
+    animation-iteration-count: 1;
+    min-height: 60px;
+}
+
+.coer-container {
+    @include Container();
+}
+
+.coer-container-accordion {
+    @include Container();
+    min-height: 55px;
+}
+
+.coer-container-tab {
+    @include Container();
+    padding: 0px;
+
+    .row {
+        margin: 12px 0px;
+    }
+}
+
+.coer-container-grid {
+    @include Container();
+    padding-bottom: 5px;
+}
+
+.coer-container-list {
+    @include Container();
+    padding: 0px;
+}

package/styles/cursores.scss

@@ -0,0 +1,19 @@
+.cursor-default {
+    cursor: default !important;
+}
+
+.cursor-pointer {
+    cursor: pointer !important;
+}
+
+.cursor-wait {
+    cursor: wait !important;
+}
+
+.cursor-grab {
+    cursor: grab !important;
+}
+
+.cursor-grabbing {
+    cursor: grabbing !important;
+}

package/styles/index.scss

@@ -0,0 +1,58 @@
+@use 'sass:color';
+@use "./angular-material.scss";
+@use "./bootstrap.scss";
+@use "./colors.scss";
+@use "./containers.scss";
+@use "./cursores.scss";
+@use "./scroll-bar.scss"; 
+@use "./layout.scss";
+@use "./animations.scss";
+@use "./position.scss";
+
+* {
+    font-family: sans-serif;
+    letter-spacing: normal;
+}
+
+h1, h2, h3, h4, h5, h6, p, pre, hr, figure, fieldset {
+    margin: 0px;
+    padding: 0px;
+}
+
+input[type="file"] {
+    display: none !important;
+}
+
+.readonly {
+    color: black !important;
+    background-color: #bbbbbb83 !important;
+}
+
+.no-selection::selection {
+    background-color: transparent !important;
+} 
+
+
+div#coer-tool-bar {  
+    coer-button * {
+        color: var(--orange) !important;
+    }
+
+    coer-dropdown coer-button * {
+        color: transparent !important;
+    } 
+
+    coer-dropdown ul {
+        right: 0px !important;
+        width: auto !important;
+        top: 2px !important;
+        border-top: 0px !important;
+        background-color: whitesmoke !important;
+    
+        li:not(.no-options):hover{
+            color: black !important;
+            background-color: color.adjust(#0d6efd, $lightness: 45%) !important;
+        }
+    }
+}
+

package/styles/layout.scss

@@ -0,0 +1,49 @@
+.flex-center {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+}
+
+.flex-center-left {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-start !important;
+}
+
+.flex-center-right {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end !important;
+}
+
+.fill-space {
+    flex: 1 1 auto;
+}
+
+
+@mixin FlexWrap() {
+    display: flex !important; 
+    flex-wrap: wrap !important;
+    gap: 10px !important;
+} 
+
+.flex-wrap-left { 
+    @include FlexWrap();
+    align-items: flex-start !important;
+}
+
+.flex-wrap,
+.flex-wrap-center { 
+    @include FlexWrap();
+    align-items: center !important;
+}
+
+.flex-wrap-end { 
+    @include FlexWrap();
+    align-items: flex-end !important;
+}
+
+.flex-wrap-item {
+    flex-grow: 1 !important;
+    flex-basis: 200 !important;
+}

package/styles/position.scss

@@ -0,0 +1,7 @@
+@for $i from 1 through 10 {
+    .z-index-#{$i} {
+        z-index: $i !important;
+    }
+}
+
+ 

package/styles/scroll-bar.scss

@@ -0,0 +1,20 @@
+@use 'sass:color';
+
+*::-webkit-scrollbar {
+    background-color: color.adjust(#6c757d, $lightness: 48%);
+    width: 5px;
+    height: 5px;
+}
+
+*::-webkit-scrollbar-thumb{
+    background-color: color.adjust(#6c757d, $lightness: 35%) ;
+    border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+    background-color: var(--gray);
+}
+
+*::-webkit-scrollbar-thumb:active {
+    background-color: var(--gray);
+}

package/tools/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="coer-elements/tools" />
+export * from './public-api';

package/tools/lib/breadcrumbs.class.d.ts

@@ -0,0 +1,18 @@
+import { IAppSource } from "coer-elements/interfaces";
+export declare class Breadcrumbs {
+    private static readonly storage;
+    /** */
+    static Add(page: string, path: string): void;
+    /** */
+    static Get(): IAppSource[];
+    /** */
+    static GetFirst(): IAppSource | null;
+    /** */
+    static Save(breadcrumbs: IAppSource[]): void;
+    /** */
+    static Remove(path: string): void;
+    /** */
+    static SetLast(page: string, path: string): void;
+    /** */
+    static RemoveLast(): void;
+}

package/tools/lib/coer-alert/coer-alert.component.d.ts

@@ -0,0 +1,23 @@
+import * as i0 from "@angular/core";
+export declare class CoerAlert {
+    /** */
+    Success(message?: string | null, title?: string | null, icon?: string | null, autohide?: number | null): void;
+    /** */
+    Error(message?: string | null, title?: string | null, icon?: string | null, autohide?: number | null): void;
+    /** */
+    Info(message?: string | null, title?: string | null, icon?: string | null, autohide?: number | null): void;
+    /** */
+    Warning(message?: string | null, title?: string | null, icon?: string | null, autohide?: number | null): void;
+    /** */
+    protected Close(alert: 'alert-success' | 'alert-error' | 'alert-info' | 'alert-warning'): Promise<void>;
+    /** */
+    Confirm(message?: string, alertType?: 'warning' | 'danger' | 'success' | 'info', icon?: string | null): Promise<boolean>;
+    /** */
+    private SetIcon;
+    /** */
+    private SetAutoHide;
+    /** */
+    private GetIcon;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CoerAlert, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CoerAlert, "coer-alert", never, {}, {}, never, never, true, never>;
+}

package/tools/lib/coer-grid.templates.d.ts

@@ -0,0 +1,11 @@
+import { IGridCoerSwitch, IGridCoerTextBox, IGridItem } from "coer-elements/interfaces";
+export declare const GridTemplates: {
+    /** Template for boolean property */
+    isActiveTemplate: (item: IGridItem<any>) => string;
+    /** Template for boolean property */
+    coerSwitchTemplate: (item: IGridItem<any>) => IGridCoerSwitch;
+    /** Template for text property */
+    coerTextboxTemplate: (item: IGridItem<any>) => IGridCoerTextBox;
+    /** Template for text property */
+    coerIconTemplate: (icon: string, color?: string) => string;
+};

package/tools/lib/colors.class.d.ts

@@ -0,0 +1,21 @@
+export declare class Colors {
+    static readonly blue = "#0d6efd";
+    static readonly gray = "#6c757d";
+    static readonly green = "#198754";
+    static readonly yellow = "#ffc107";
+    static readonly red = "#dc3545";
+    static readonly white = "#f5f5f5";
+    static readonly black = "#252525";
+    static readonly orange = "#fd6031";
+    static readonly purple = "#a615bc";
+    /** Returns the color palette in hexadecimal */
+    private static readonly colorsHex;
+    /** Returns the color palette in RGB */
+    private static readonly ColorsRGB;
+    /** Returns a random color in hexadecimal */
+    static GetRandomColorHex: () => string;
+    /** Returns the number of colors requested */
+    static GetColorHexList(quantity: number): string[];
+    /** Returns the number of colors requested with opacity */
+    static GetColorRGBList(quantity: number): string[];
+}

package/tools/lib/control-value.class.d.ts

@@ -0,0 +1,25 @@
+import { ControlValueAccessor } from "@angular/forms";
+export declare const CONTROL_VALUE: <T>(component: T) => {
+    provide: import("@angular/core").InjectionToken<readonly ControlValueAccessor[]>;
+    useExisting: import("@angular/core").Type<any>;
+    multi: boolean;
+};
+export declare class ControlValue implements ControlValueAccessor {
+    protected _value: any;
+    private _isTouched;
+    protected _UpdateValue: Function;
+    private _IsTouched;
+    get isTouched(): boolean;
+    /** */
+    protected SetValue(value: any): void;
+    /** */
+    SetTouched(isTouched: boolean): void;
+    /** */
+    writeValue(value: any): void;
+    /** */
+    registerOnChange(callback: Function): void;
+    /** */
+    registerOnTouched(callback: Function): void;
+    /** */
+    setDisabledState(isDisabled: boolean): void;
+}

package/tools/lib/date-time.class.d.ts

@@ -0,0 +1,21 @@
+import moment from "moment";
+export declare class DateTime {
+    /** Get UTC Offset */
+    static GetOffset(): number;
+    /** YYYY-MM-DD HH:mm:ss */
+    static GetFormatDB(date: string | Date | moment.Moment): string;
+    /** Convert UTC Date to Local Zone */
+    static ToLocalZone(date: string | Date | moment.Moment): string;
+    /** Convert Local Zone Date to UTC */
+    static ToUTC(date: string | Date | moment.Moment): string;
+    /** MMM, DD YYYY */
+    static GetDateFormat(date: string | Date | moment.Moment): string;
+    /** MMM, DD YYYY at hh:mm a */
+    static GetDateTimeFormat(date: string | Date | moment.Moment): string;
+    /** */
+    static IsValidDate(date: string | Date | moment.Moment): boolean;
+    /** */
+    static SetFirstHour(date?: string | Date | moment.Moment, format?: 'database' | 'display'): string;
+    /** */
+    static SetLastHour(date?: string | Date | moment.Moment, format?: 'database' | 'display'): string;
+}

package/tools/lib/elements-html.class.d.ts

@@ -0,0 +1,8 @@
+export declare const ElementsHTML: {
+    /** Get width in px */
+    GetElementWidth: (element: HTMLElement | null | undefined, ...args: (number | HTMLElement | null | undefined)[]) => string;
+    /** Get height in px */
+    GetElementHeight: (element: HTMLElement | null | undefined, ...args: (number | HTMLElement | null | undefined)[]) => string;
+    /** */
+    IsInvalidElement: (element: any) => boolean;
+};

package/tools/lib/files.class.d.ts

@@ -0,0 +1,16 @@
+export declare class Files {
+    static readonly EXCEL_EXTENSIONS: string[];
+    /** Get Extension File */
+    static GetExtension(file: File): string | null;
+    /** Is Excel File */
+    static IsExcel(file: File): boolean;
+    /** Read excel file */
+    static ReadExcel<T>(file: File): Promise<{
+        columns: string[];
+        rows: T[];
+    }>;
+    /** Export to excel file */
+    static ExportExcel<T>(data: T[], fileName?: string, sheetName?: string): void;
+    /** Convert file to string base64 */
+    static ConvertToBase64(file: File): Promise<string>;
+}

package/tools/lib/filters.class.d.ts

@@ -0,0 +1,11 @@
+export declare class Filters {
+    private static readonly storage;
+    /** */
+    static Add<T>(filters: T, path: string): void;
+    /** */
+    static Get<T>(path: string): T | null;
+    /** */
+    static Remove(path: string): void;
+    /** */
+    static RemoveAll(): void;
+}

package/tools/lib/menu.class.d.ts

@@ -0,0 +1,9 @@
+import { IMenuAccess, IMenuOptionSelected } from "coer-elements/interfaces";
+export declare class Menu {
+    private static readonly storage;
+    /** */
+    static SetSelectedOption(menu: IMenuOptionSelected): void;
+    /** */
+    static GetSelectedOption(): IMenuOptionSelected | null;
+    static GetMenuAccess: () => IMenuAccess[];
+}