@pepperi-addons/ngx-lib 0.4.1-yaron.1 → 0.4.2-beta.2

package/select-panel/select-panel.module.d.ts

@@ -0,0 +1,19 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./select-panel.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@angular/material/core";
+import * as i5 from "@angular/material/checkbox";
+import * as i6 from "@angular/material/radio";
+import * as i7 from "@angular/material/input";
+import * as i8 from "@angular/material/form-field";
+import * as i9 from "@angular/material/button";
+import * as i10 from "@angular/material/icon";
+import * as i11 from "@pepperi-addons/ngx-lib";
+import * as i12 from "@pepperi-addons/ngx-lib/icon";
+import * as i13 from "@pepperi-addons/ngx-lib/field-title";
+export declare class PepSelectPanelModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PepSelectPanelModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PepSelectPanelModule, [typeof i1.PepSelectPanelComponent], [typeof i2.CommonModule, typeof i3.ReactiveFormsModule, typeof i4.MatCommonModule, typeof i5.MatCheckboxModule, typeof i6.MatRadioModule, typeof i7.MatInputModule, typeof i8.MatFormFieldModule, typeof i9.MatButtonModule, typeof i10.MatIconModule, typeof i11.PepNgxLibModule, typeof i12.PepIconModule, typeof i13.PepFieldTitleModule], [typeof i1.PepSelectPanelComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PepSelectPanelModule>;
+}

package/smart-filters/common/model/base-filter-component.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter, OnChanges, OnDestroy, OnInit, Renderer2, ViewContainerRef, ComponentFactoryResolver, Injector } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
-import { PepValidatorService, IPepOption } from '@pepperi-addons/ngx-lib';
+import { PepValidatorService, IPepOption, PepUtilitiesService } from '@pepperi-addons/ngx-lib';
 import { IPepSmartFilterOperator, IPepSmartFilterOperatorUnit } from './operator';
 import { IPepSmartFilterData, IPepSmartFilterDataValue } from './filter';
 import { PepSmartFilterBaseField } from './field';
@@ -13,6 +13,7 @@ export declare abstract class BaseFilterComponent implements OnInit, OnChanges,
     private builder;
     protected translate: TranslateService;
     protected validator: PepValidatorService;
+    protected utilitiesService: PepUtilitiesService;
     protected renderer: Renderer2;
     private readonly _destroyed;
     private actionsContainerRef;
@@ -49,7 +50,7 @@ export declare abstract class BaseFilterComponent implements OnInit, OnChanges,
     protected readonly OPERATORS_TRANSLATION_PREFIX = "SMART_FILTERS.OPERATORS";
     protected readonly OPERATOR_UNITS_TRANSLATION_PREFIX = "SMART_FILTERS.OPERATOR_UNITS";
     form: FormGroup;
-    constructor(viewContainerRef: ViewContainerRef, injector: Injector, resolver: ComponentFactoryResolver, builder: FormBuilder, translate: TranslateService, validator: PepValidatorService, renderer: Renderer2);
+    constructor(viewContainerRef: ViewContainerRef, injector: Injector, resolver: ComponentFactoryResolver, builder: FormBuilder, translate: TranslateService, validator: PepValidatorService, utilitiesService: PepUtilitiesService, renderer: Renderer2);
     private createActionsComponent;
     private setupForm;
     private setupOperators;

package/src/core/style/base/typography.scss

@@ -6,7 +6,7 @@
 // Typography style - This file contains all @font-face declarations, if any.
 // -----------------------------------------------------------------------------
 
-@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;500;600;700;800&family=Crimson+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=David+Libre:wght@400;500;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Work+Sans: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&display=swap');
+// @import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;500;600;700;800&family=Crimson+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=David+Libre:wght@400;500;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Work+Sans: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&display=swap');
 
 //    Calculation
 @media screen and (max-width: variables.$screen-max-size-2xs) {

package/src/core/style/components/checkbox.scss

@@ -74,6 +74,10 @@
         padding-left: unset !important;
         padding-right: unset !important;
 
+        &.disable {
+            background: unset !important;
+        }
+
         .mat-checkbox-inner-container {
             margin-left: 0 !important;
             margin-right: 0 !important;

package/src/core/style/components/radio-button.scss

@@ -55,6 +55,7 @@
         .mat-radio-label {
             @include mixins.fix-inline-z-index();
             margin: 0;
+            font-weight: variables.$font-weight-normal;
         }
 
         &.mat-radio-checked {

package/src/core/style/components/textarea.scss

@@ -31,11 +31,13 @@
                     vertical-align: unset;
                     resize: none;
                     // @include calc(width, '100% + 3rem');
-                    width: calc(100% + 3rem);
+                    // width: calc(100% + 3rem);
+                    width: 100%;
                     max-width: unset;
                     overflow-y: scroll;
                     // @include mixins.box-sizing(border-box);
-                    box-sizing: border-box;
+                    //box-sizing: border-box;
+                    box-sizing: content-box;
                 }
             }
 
@@ -94,6 +96,10 @@
         overflow-y: scroll;
         // @include mixins.box-sizing(border-box);
         box-sizing: border-box;
+
+        &.hide-enlarge-button {
+            padding-inline-end: 3rem;
+        }
     }
 
     &.right-alignment {

package/textarea/textarea.component.d.ts

@@ -33,6 +33,7 @@ export declare class PepTextareaComponent implements OnChanges, OnInit, OnDestro
     set layoutType(value: PepLayoutType);
     get layoutType(): PepLayoutType;
     valueChange: EventEmitter<string>;
+    keyup: EventEmitter<any>;
     textAreaDialogTemplate: TemplateRef<any>;
     fieldHeight: string;
     standAlone: boolean;
@@ -44,11 +45,12 @@ export declare class PepTextareaComponent implements OnChanges, OnInit, OnDestro
     ngOnInit(): void;
     ngOnChanges(changes: any): void;
     ngOnDestroy(): void;
+    onKeyup(event: any): any;
     onBlur(event: any): void;
     changeValue(value: any): void;
     cardTemplateClicked(event: any): void;
     openDialog(): void;
     closeDialog(data?: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepTextareaComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepTextareaComponent, "pep-textarea", never, { "key": "key"; "value": "value"; "label": "label"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "maxFieldCharacters": "maxFieldCharacters"; "textColor": "textColor"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "visible": "visible"; "form": "form"; "isActive": "isActive"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "layoutType": "layoutType"; }, { "valueChange": "valueChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepTextareaComponent, "pep-textarea", never, { "key": "key"; "value": "value"; "label": "label"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "maxFieldCharacters": "maxFieldCharacters"; "textColor": "textColor"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "visible": "visible"; "form": "form"; "isActive": "isActive"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "layoutType": "layoutType"; }, { "valueChange": "valueChange"; "keyup": "keyup"; }, never, never, false>;
 }

package/textbox/textbox-validation.directive.d.ts

@@ -1,12 +1,13 @@
 import { ElementRef, OnInit } from '@angular/core';
-import { PepTextboxFieldType, PepValidatorService } from '@pepperi-addons/ngx-lib';
+import { PepTextboxFieldType, PepUtilitiesService, PepValidatorService } from '@pepperi-addons/ngx-lib';
 import * as i0 from "@angular/core";
 export declare class PepTextboxValidationDirective implements OnInit {
     private hostElement;
+    private utilitiesService;
     private validatorService;
     type: PepTextboxFieldType;
     previousValue: string;
-    constructor(hostElement: ElementRef, validatorService: PepValidatorService);
+    constructor(hostElement: ElementRef, utilitiesService: PepUtilitiesService, validatorService: PepValidatorService);
     ngOnInit(): void;
     private isNumber;
     private isInteger;

package/textbox/textbox.component.d.ts

@@ -1,14 +1,9 @@
-import { OnInit, OnChanges, EventEmitter, ElementRef, Renderer2, OnDestroy } from '@angular/core';
+import { OnInit, OnChanges, EventEmitter, ElementRef, Renderer2, OnDestroy, AfterViewInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { PepLayoutType, PepCustomizationService, PepHorizontalAlignment, PepTextboxFieldType, PepUtilitiesService } from '@pepperi-addons/ngx-lib';
-import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';
-import { ErrorStateMatcher } from '@angular/material/core';
+import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
-/** error when invalid control is dirty or touched */
-export declare class TextErrorStateMatcher implements ErrorStateMatcher {
-    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean;
-}
 /**
  * This is a text box input component that can be use to
  *
@@ -18,7 +13,7 @@ export declare class TextErrorStateMatcher implements ErrorStateMatcher {
  * @implements {OnInit}
  * @implements {OnDestroy}
  */
-export declare class PepTextboxComponent implements OnChanges, OnInit, OnDestroy {
+export declare class PepTextboxComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy {
     private customizationService;
     private renderer;
     private element;
@@ -41,14 +36,8 @@ export declare class PepTextboxComponent implements OnChanges, OnInit, OnDestroy
      */
     set value(value: string);
     get value(): string;
-    private _formattedValue;
-    /**
-     * The formatted value.
-     *
-     * @memberof PepTextboxComponent
-     */
-    set formattedValue(value: string);
-    get formattedValue(): string;
+    get valueAsCurrentCulture(): string;
+    protected formattedValue: string;
     private _minFractionDigits;
     set minFractionDigits(value: number);
     get minFractionDigits(): number;
@@ -82,12 +71,15 @@ export declare class PepTextboxComponent implements OnChanges, OnInit, OnDestroy
     private _type;
     set type(value: PepTextboxFieldType);
     get type(): PepTextboxFieldType;
+    private inputMode;
     /**
      * If the textbox is mandatory
      *
      * @memberof PepTextboxComponent
      */
-    mandatory: boolean;
+    private _mandatory;
+    set mandatory(value: boolean);
+    get mandatory(): boolean;
     /**
      * If the textbox is disabled.
      *
@@ -127,21 +119,27 @@ export declare class PepTextboxComponent implements OnChanges, OnInit, OnDestroy
      * @memberof PepTextboxComponent
      */
     valueChange: EventEmitter<string>;
-    formValidationChange: EventEmitter<boolean>;
+    keyup: EventEmitter<any>;
     input: ElementRef;
     private _calculateFormattedValue;
     get calculateFormattedValue(): boolean;
     controlType: string;
     standAlone: boolean;
     isInEditMode: boolean;
-    isInFocus: boolean;
-    matcher: TextErrorStateMatcher;
+    private _isInFocus;
+    set isInFocus(isInFocus: boolean);
+    get isInFocus(): boolean;
+    private _displayValueSubject;
+    get displayValue$(): Observable<string>;
     constructor(customizationService: PepCustomizationService, renderer: Renderer2, element: ElementRef, translate: TranslateService, utilitiesService: PepUtilitiesService);
+    private setInputModeAttribute;
+    private notifyDisplayValueChange;
     private setFormattedValue;
     private updateFormFieldValue;
-    get displayValue(): string;
+    private changeDisplayValue;
     private setDefaultForm;
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     ngOnChanges(changes: any): void;
     ngOnDestroy(): void;
     onFocus(event: any): void;
@@ -150,9 +148,10 @@ export declare class PepTextboxComponent implements OnChanges, OnInit, OnDestroy
     isValueValid(value: string): boolean;
     isDifferentValue(value: string): boolean;
     onChange(e: any): void;
+    onKeyup(event: any): any;
     onBlur(e: any): void;
     anchorClicked(): void;
     cardTemplateClicked(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepTextboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepTextboxComponent, "pep-textbox", never, { "key": "key"; "value": "value"; "formattedValue": "formattedValue"; "minFractionDigits": "minFractionDigits"; "maxFractionDigits": "maxFractionDigits"; "accessory": "accessory"; "label": "label"; "placeholder": "placeholder"; "type": "type"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "maxFieldCharacters": "maxFieldCharacters"; "hint": "hint"; "textColor": "textColor"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "minValue": "minValue"; "maxValue": "maxValue"; "visible": "visible"; "form": "form"; "isActive": "isActive"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "renderError": "renderError"; "renderSymbol": "renderSymbol"; "layoutType": "layoutType"; "parentFieldKey": "parentFieldKey"; "regex": "regex"; "regexError": "regexError"; }, { "valueChange": "valueChange"; "formValidationChange": "formValidationChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepTextboxComponent, "pep-textbox", never, { "key": "key"; "value": "value"; "minFractionDigits": "minFractionDigits"; "maxFractionDigits": "maxFractionDigits"; "accessory": "accessory"; "label": "label"; "placeholder": "placeholder"; "type": "type"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "maxFieldCharacters": "maxFieldCharacters"; "hint": "hint"; "textColor": "textColor"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "minValue": "minValue"; "maxValue": "maxValue"; "visible": "visible"; "form": "form"; "isActive": "isActive"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "renderError": "renderError"; "renderSymbol": "renderSymbol"; "layoutType": "layoutType"; "parentFieldKey": "parentFieldKey"; "regex": "regex"; "regexError": "regexError"; "isInFocus": "isInFocus"; }, { "valueChange": "valueChange"; "keyup": "keyup"; }, never, never, false>;
 }

package/theming-offline.scss

@@ -0,0 +1,79 @@
+@charset 'UTF-8';
+@use '@angular/material' as mat;
+
+// 1. Configuration and helpers
+@use './src/core/style/abstracts/breakpoints';
+@use './src/core/style/abstracts/functions';
+@use './src/core/style/abstracts/variables';
+@use './src/core/style/abstracts/mixins';
+
+// 2. Vendors
+@use './src/core/style/vendors/normalize';
+
+// 3. Base stuff
+@use './src/core/style/base/helpers';
+@use './src/core/style/base/grids';
+@use './src/core/style/base/base';
+@use './src/core/style/base/typography';
+
+/*************************************************************************************************************/
+/* Here we add the system + component's themes (all the colors definitions that change by the theme) - Start */
+/*************************************************************************************************************/
+@use './src/core/style/components/general';
+@use './src/core/style/components/button';
+@use './src/core/style/components/checkbox';
+@use './src/core/style/components/radio-button' as radio;
+@use './src/core/style/components/input';
+
+// Use this import in a real project instead
+// @use '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';
+@use './src/core/style/themes/default-theme.scss';
+
+// Override material font.
+$pep-typography: mat.define-typography-config(
+    $font-family: variables.$font-family-body
+);
+@include mat.core($pep-typography);
+
+$material-theme-for-pep: default-theme.$material-default-theme;
+
+@mixin material-theme($material-theme) {
+
+    @if ($material-theme == null) {
+        $material-theme: $material-theme-for-pep;
+    }
+
+    // Add angular-material-theme.
+    @include mat.all-component-themes($material-theme);
+
+    // // Add mat-datetimepicker-theme.
+    // @include mat-datetimepicker-theme($material-theme);
+
+    // Remove background
+    &:focus,
+    &:hover,
+    &:active {
+        background: unset;
+    }
+}
+
+@mixin pepperi-theme($material-theme: null) {
+    .pepperi-theme {
+        // Add material theme.
+        @include material-theme($material-theme);
+
+        @include base.declare-system-base-theme();
+        @include typography.declare-system-typography-theme();
+
+        // Add global components themes (from ./src/core/style).
+        @include button.pep-button-theme();
+        @include checkbox.pep-checkbox-theme();
+        @include general.pep-general-theme();
+        @include input.pep-input-theme();
+        @include radio.pep-radio-button-theme();
+    }
+}
+
+/*************************************************************************************************************/
+/* Here we add the system + component's themes (all the colors definitions that change by the theme) - End   */
+/*************************************************************************************************************/

package/theming.scss

@@ -29,8 +29,6 @@
 // @use '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';
 @use './src/core/style/themes/default-theme.scss';
 
-@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
-
 // Override material font.
 $pep-typography: mat.define-typography-config(
     $font-family: variables.$font-family-body
@@ -80,32 +78,7 @@ $material-theme-for-pep: default-theme.$material-default-theme;
 /* Here we add the system + component's themes (all the colors definitions that change by the theme) - End   */
 /*************************************************************************************************************/
 
-// @use './src/core/style/themes/default-theme.scss';
-// .default-theme {
-//     $material-theme: $material-default-theme;
-//     @include pepperi-theme($material-theme);
-
-//     &:focus,
-//     &:hover,
-//     &:active {
-//         background: unset;
-//     }
-// }
-
-// @use './src/core/style/themes/light-theme.scss';
-// .light-theme {
-//     $material-theme: $material-light-theme;
-//     @include pepperi-theme($material-theme);// , $user-light-theme-color);
-// }
-
-// @use './src/core/style/themes/black-theme.scss';
-// .black-theme {
-//     $material-theme: $material-black-theme;
-//     @include pepperi-theme($material-theme);// , $user-black-theme-color);
-// }
-
-// @use './src/core/style/themes/nature-theme.scss';
-// .nature-theme {
-//     $material-theme: $material-nature-theme;
-//     @include pepperi-theme($material-theme);// , $user-nature-theme-color);
-// }
+
+// Import links at the end for clients that work offline not crushed on the css.
+@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;500;600;700;800&family=Crimson+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=David+Libre:wght@400;500;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Work+Sans: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&display=swap');
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');