@enigmatry/entry-components 1.15.1-preview.3 → 1.15.1-preview.31

package/fesm2020/enigmatry-entry-components-validation.mjs

@@ -21,7 +21,9 @@ class EntryFormErrorsComponent {
 EntryFormErrorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EntryFormErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 EntryFormErrorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: EntryFormErrorsComponent, selector: "entry-form-errors", inputs: { form: "form" }, ngImport: i0, template: `
     <div *ngIf="form.errors">
-      <mat-error *ngFor="let error of form.errors.general">{{error}}</mat-error>
+      <mat-error *ngFor="let error of form.errors.general">
+        <span class="mat-body-2">{{error}}</span>
+      </mat-error>
     </div>
   `, isInline: true, dependencies: [{ 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: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EntryFormErrorsComponent, decorators: [{
@@ -30,7 +32,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     selector: 'entry-form-errors',
                     template: `
     <div *ngIf="form.errors">
-      <mat-error *ngFor="let error of form.errors.general">{{error}}</mat-error>
+      <mat-error *ngFor="let error of form.errors.general">
+        <span class="mat-body-2">{{error}}</span>
+      </mat-error>
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.Default

package/fesm2020/enigmatry-entry-components-validation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"enigmatry-entry-components-validation.mjs","sources":["../../../../libs/entry-components/validation/entry-form-errors.component.ts","../../../../libs/entry-components/validation/entry-validation-config.model.ts","../../../../libs/entry-components/validation/entry-validation.ts","../../../../libs/entry-components/validation/entry-display-control-validation.directive.ts","../../../../libs/entry-components/validation/entry-validation.module.ts","../../../../libs/entry-components/validation/enigmatry-entry-components-validation.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { UntypedFormGroup } from '@angular/forms';\n\n/**\n * A component used to display generic (form level) server side validation messages.\n * The messages are displayed as a list, each message in a new row.\n *\n * @example\n * ```html\n * <entry-form-errors [form]=\"myForm\">\n * </entry-form-errors>\n * ```\n */\n@Component({\n  selector: 'entry-form-errors',\n  template: `\n    <div *ngIf=\"form.errors\">\n      <mat-error *ngFor=\"let error of form.errors.general\">{{error}}</mat-error>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.Default\n})\nexport class EntryFormErrorsComponent {\n  /** A form group for which the validation errors are being displayed. */\n  @Input() form: UntypedFormGroup;\n}\n","import { InjectionToken } from '@angular/core';\nimport { AbstractControl } from '@angular/forms';\n\n/** Used to configure mapping between validation keys and messages */\nexport interface IEntryValidationMessage {\n    /** Validation key (e.g. '_required_', '_minlength_', '_email_', etc.) */\n    name: string;\n    /**\n     * Validation message. Can be static string or expression returning string\n     *  (when messages need to be resolved dynamically: parametrization, localization, etc.).\n     */\n    message: string | ((control: AbstractControl) => string);\n}\n\n/**\n * Used to provide default configurations on module level.\n */\nexport class EntryValidationConfig {\n    /**\n     * Validation key to message configuration on module level. Used to configure client side validation messages\n     * for standard validators (_required_, _minLength_, _email_, etc.).\n     *\n     * **NOTE:** If using _Formly_ package to render forms, this configuration should not be used.\n     * Instead, use `FormlyModule` to configure validation messages.\n     *\n     * @example\n     * ```ts\n     * new EntryValidationConfig() {\n     *   validationMessages: [\n     *     { name: 'required': message: 'This field is mandatory' },\n     *     { name: 'minlength', message: (control: AbstractControl) => `Minimal length is ${control.errors.minlength.requiredLength}`}\n     *   ]\n     * }\n     * ```\n     */\n    validationMessages: IEntryValidationMessage[];\n\n    constructor(config: Partial<EntryValidationConfig> = {}) {\n        this.validationMessages = config.validationMessages ?? [];\n    }\n}\n\n/**\n * Entry validation injection token of EntryValidationConfig type containing validation default configurations.\n * Can be updated with custom configuration.\n *\n * Defaults:\n * - validationMessages: []\n */\nexport const ENTRY_VALIDATION_CONFIG = new InjectionToken<EntryValidationConfig>(\n    'EntryValidationConfig',\n    {\n        providedIn: 'root',\n        factory: () => new EntryValidationConfig()\n    }\n);\n","import { AbstractControl, FormArray, FormGroup, UntypedFormGroup, ValidationErrors } from '@angular/forms';\nimport { IValidationProblemDetails } from './validation-problem-details.interface';\n\n/** A key used to map server side validation errors on form level */\nconst FORM_ERROR_KEY = 'general';\n/** A key used to map server side validation errors on form field level */\nconst FORM_FIELD_ERROR_KEY = 'fromServer';\n\nconst getFormControl = (formControl: AbstractControl | null | undefined, keys: string[]): AbstractControl | null | undefined => {\n    if (keys.length === 0) {\n        return formControl;\n    }\n    if (formControl instanceof FormGroup) {\n        return getFormControl(formControl.controls[keys[0].charAt(0).toLowerCase() + keys[0].slice(1)], keys.slice(1));\n    }\n    if (formControl instanceof FormArray && +keys[0] >= 0) {\n        return getFormControl(formControl.controls[+keys[0]], keys.slice(1));\n    }\n    return null;\n};\n\n/**\n * Applies validation errors received from server side to the form.\n * The errors are applied to multiple levels: form, form group, form array, and form field.\n *\n * @param error Server side validation errors response.\n * @param form Form to apply validation errors to.\n */\nconst setServerSideValidationErrors = (error: IValidationProblemDetails, form: UntypedFormGroup) => {\n    form.setErrors(null);\n    const validationErrors = error?.errors;\n    const formErrors: ValidationErrors = {};\n\n    if (validationErrors) {\n        // eslint-disable-next-line guard-for-in\n        for (const key in validationErrors) {\n            const control = getFormControl(form, key.split(/[.[\\]]+/gu));\n\n            if (control) {\n                const fieldErrors = {} as ValidationErrors;\n                fieldErrors[FORM_FIELD_ERROR_KEY] = validationErrors[key];\n                control.setErrors(fieldErrors);\n                control.markAsTouched();\n            } else {\n                formErrors[FORM_ERROR_KEY] =\n                    formErrors[FORM_ERROR_KEY]?.concat(validationErrors[key]) || validationErrors[key];\n            }\n        }\n    } else {\n        formErrors[FORM_ERROR_KEY] = [`An error occurred on the server.`];\n    }\n\n    form.setErrors(formErrors);\n};\n\nexport {\n    FORM_FIELD_ERROR_KEY,\n    setServerSideValidationErrors\n};\n","import { Directive, ElementRef, Inject, Input, OnDestroy, OnInit } from '@angular/core';\nimport { ENTRY_VALIDATION_CONFIG, EntryValidationConfig } from './entry-validation-config.model';\nimport { AbstractControl, FormControlStatus } from '@angular/forms';\nimport { Subscription } from 'rxjs';\nimport { FORM_FIELD_ERROR_KEY } from './entry-validation';\n\n/**\n * A directive that displays configured validation messages or server side validations for given form control.\n * The messages are separated with coma(,) and displayed as _innerHTML_ value of host component.\n *\n * @example\n * ```html\n * <div entryDisplayControlValidation [control]=\"myForm.controls.firstName\">\n * </div\n * ```\n */\n@Directive({\n  selector: '[entryDisplayControlValidation]'\n})\nexport class EntryDisplayControlValidationDirective implements OnInit, OnDestroy {\n  /** Form control for which the validation messages are displayed for. */\n  @Input() control: AbstractControl;\n\n  private _controlSubscription: Subscription | undefined;\n\n  constructor(\n    @Inject(ENTRY_VALIDATION_CONFIG) private readonly _config: EntryValidationConfig,\n    private readonly _element: ElementRef) {}\n\n  ngOnInit(): void {\n    this._controlSubscription = this.control.statusChanges\n      .subscribe((controlStatus: FormControlStatus) => {\n        if (controlStatus === 'INVALID') {\n          this._element.nativeElement.innerText = this.extractValidationMessages();\n        }\n      });\n  }\n\n  ngOnDestroy(): void {\n    if (this._controlSubscription) {\n      this._controlSubscription.unsubscribe();\n    }\n  }\n\n  private extractValidationMessages(): string {\n    if (!this.control.errors) {\n      return '';\n    }\n    const errorsString = this._config.validationMessages\n      .map(validationMessage => this.control.errors[validationMessage.name]\n        ? typeof(validationMessage.message) === 'string'\n          ? validationMessage.message : validationMessage.message(this.control)\n        : ''\n      )\n      .filter(message => message !== '')\n      .join(', ');\n\n    const serverErrors = this.control.errors[FORM_FIELD_ERROR_KEY];\n    const serverErrorsString = serverErrors instanceof Array ? serverErrors.join(', ') : '';\n\n    return [errorsString, serverErrorsString].filter(x => x !== '').join(', ');\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { EntryFormErrorsComponent } from './entry-form-errors.component';\nimport { MatInputModule } from '@angular/material/input';\nimport { EntryDisplayControlValidationDirective } from './entry-display-control-validation.directive';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\n\n@NgModule({\n  declarations: [\n    EntryFormErrorsComponent,\n    EntryDisplayControlValidationDirective\n  ],\n  imports: [\n    CommonModule,\n    FormsModule,\n    ReactiveFormsModule,\n    MatInputModule\n  ],\n  exports: [\n    EntryFormErrorsComponent,\n    EntryDisplayControlValidationDirective\n  ]\n})\nexport class EntryValidationModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"enigmatry-entry-components-validation.mjs","sources":["../../../../libs/entry-components/validation/entry-form-errors.component.ts","../../../../libs/entry-components/validation/entry-validation-config.model.ts","../../../../libs/entry-components/validation/entry-validation.ts","../../../../libs/entry-components/validation/entry-display-control-validation.directive.ts","../../../../libs/entry-components/validation/entry-validation.module.ts","../../../../libs/entry-components/validation/enigmatry-entry-components-validation.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { UntypedFormGroup } from '@angular/forms';\n\n/**\n * A component used to display generic (form level) server side validation messages.\n * The messages are displayed as a list, each message in a new row.\n *\n * @example\n * ```html\n * <entry-form-errors [form]=\"myForm\">\n * </entry-form-errors>\n * ```\n */\n@Component({\n  selector: 'entry-form-errors',\n  template: `\n    <div *ngIf=\"form.errors\">\n      <mat-error *ngFor=\"let error of form.errors.general\">\n        <span class=\"mat-body-2\">{{error}}</span>\n      </mat-error>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.Default\n})\nexport class EntryFormErrorsComponent {\n  /** A form group for which the validation errors are being displayed. */\n  @Input() form: UntypedFormGroup;\n}\n","import { InjectionToken } from '@angular/core';\nimport { AbstractControl } from '@angular/forms';\n\n/** Used to configure mapping between validation keys and messages */\nexport interface IEntryValidationMessage {\n    /** Validation key (e.g. '_required_', '_minlength_', '_email_', etc.) */\n    name: string;\n    /**\n     * Validation message. Can be static string or expression returning string\n     *  (when messages need to be resolved dynamically: parametrization, localization, etc.).\n     */\n    message: string | ((control: AbstractControl) => string);\n}\n\n/**\n * Used to provide default configurations on module level.\n */\nexport class EntryValidationConfig {\n    /**\n     * Validation key to message configuration on module level. Used to configure client side validation messages\n     * for standard validators (_required_, _minLength_, _email_, etc.).\n     *\n     * **NOTE:** If using _Formly_ package to render forms, this configuration should not be used.\n     * Instead, use `FormlyModule` to configure validation messages.\n     *\n     * @example\n     * ```ts\n     * new EntryValidationConfig() {\n     *   validationMessages: [\n     *     { name: 'required': message: 'This field is mandatory' },\n     *     { name: 'minlength', message: (control: AbstractControl) => `Minimal length is ${control.errors.minlength.requiredLength}`}\n     *   ]\n     * }\n     * ```\n     */\n    validationMessages: IEntryValidationMessage[];\n\n    constructor(config: Partial<EntryValidationConfig> = {}) {\n        this.validationMessages = config.validationMessages ?? [];\n    }\n}\n\n/**\n * Entry validation injection token of EntryValidationConfig type containing validation default configurations.\n * Can be updated with custom configuration.\n *\n * Defaults:\n * - validationMessages: []\n */\nexport const ENTRY_VALIDATION_CONFIG = new InjectionToken<EntryValidationConfig>(\n    'EntryValidationConfig',\n    {\n        providedIn: 'root',\n        factory: () => new EntryValidationConfig()\n    }\n);\n","import { AbstractControl, FormArray, FormGroup, UntypedFormGroup, ValidationErrors } from '@angular/forms';\nimport { IValidationProblemDetails } from './validation-problem-details.interface';\n\n/** A key used to map server side validation errors on form level */\nconst FORM_ERROR_KEY = 'general';\n/** A key used to map server side validation errors on form field level */\nconst FORM_FIELD_ERROR_KEY = 'fromServer';\n\nconst getFormControl = (formControl: AbstractControl | null | undefined, keys: string[]): AbstractControl | null | undefined => {\n    if (keys.length === 0) {\n        return formControl;\n    }\n    if (formControl instanceof FormGroup) {\n        return getFormControl(formControl.controls[keys[0].charAt(0).toLowerCase() + keys[0].slice(1)], keys.slice(1));\n    }\n    if (formControl instanceof FormArray && +keys[0] >= 0) {\n        return getFormControl(formControl.controls[+keys[0]], keys.slice(1));\n    }\n    return null;\n};\n\n/**\n * Applies validation errors received from server side to the form.\n * The errors are applied to multiple levels: form, form group, form array, and form field.\n *\n * @param error Server side validation errors response.\n * @param form Form to apply validation errors to.\n */\nconst setServerSideValidationErrors = (error: IValidationProblemDetails, form: UntypedFormGroup) => {\n    form.setErrors(null);\n    const validationErrors = error?.errors;\n    const formErrors: ValidationErrors = {};\n\n    if (validationErrors) {\n        // eslint-disable-next-line guard-for-in\n        for (const key in validationErrors) {\n            const control = getFormControl(form, key.split(/[.[\\]]+/gu));\n\n            if (control) {\n                const fieldErrors = {} as ValidationErrors;\n                fieldErrors[FORM_FIELD_ERROR_KEY] = validationErrors[key];\n                control.setErrors(fieldErrors);\n                control.markAsTouched();\n            } else {\n                formErrors[FORM_ERROR_KEY] =\n                    formErrors[FORM_ERROR_KEY]?.concat(validationErrors[key]) || validationErrors[key];\n            }\n        }\n    } else {\n        formErrors[FORM_ERROR_KEY] = [`An error occurred on the server.`];\n    }\n\n    form.setErrors(formErrors);\n};\n\nexport {\n    FORM_FIELD_ERROR_KEY,\n    setServerSideValidationErrors\n};\n","import { Directive, ElementRef, Inject, Input, OnDestroy, OnInit } from '@angular/core';\nimport { ENTRY_VALIDATION_CONFIG, EntryValidationConfig } from './entry-validation-config.model';\nimport { AbstractControl, FormControlStatus } from '@angular/forms';\nimport { Subscription } from 'rxjs';\nimport { FORM_FIELD_ERROR_KEY } from './entry-validation';\n\n/**\n * A directive that displays configured validation messages or server side validations for given form control.\n * The messages are separated with coma(,) and displayed as _innerHTML_ value of host component.\n *\n * @example\n * ```html\n * <div entryDisplayControlValidation [control]=\"myForm.controls.firstName\">\n * </div\n * ```\n */\n@Directive({\n  selector: '[entryDisplayControlValidation]'\n})\nexport class EntryDisplayControlValidationDirective implements OnInit, OnDestroy {\n  /** Form control for which the validation messages are displayed for. */\n  @Input() control: AbstractControl;\n\n  private _controlSubscription: Subscription | undefined;\n\n  constructor(\n    @Inject(ENTRY_VALIDATION_CONFIG) private readonly _config: EntryValidationConfig,\n    private readonly _element: ElementRef) {}\n\n  ngOnInit(): void {\n    this._controlSubscription = this.control.statusChanges\n      .subscribe((controlStatus: FormControlStatus) => {\n        if (controlStatus === 'INVALID') {\n          this._element.nativeElement.innerText = this.extractValidationMessages();\n        }\n      });\n  }\n\n  ngOnDestroy(): void {\n    if (this._controlSubscription) {\n      this._controlSubscription.unsubscribe();\n    }\n  }\n\n  private extractValidationMessages(): string {\n    if (!this.control.errors) {\n      return '';\n    }\n    const errorsString = this._config.validationMessages\n      .map(validationMessage => this.control.errors[validationMessage.name]\n        ? typeof(validationMessage.message) === 'string'\n          ? validationMessage.message : validationMessage.message(this.control)\n        : ''\n      )\n      .filter(message => message !== '')\n      .join(', ');\n\n    const serverErrors = this.control.errors[FORM_FIELD_ERROR_KEY];\n    const serverErrorsString = serverErrors instanceof Array ? serverErrors.join(', ') : '';\n\n    return [errorsString, serverErrorsString].filter(x => x !== '').join(', ');\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { EntryFormErrorsComponent } from './entry-form-errors.component';\nimport { MatInputModule } from '@angular/material/input';\nimport { EntryDisplayControlValidationDirective } from './entry-display-control-validation.directive';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\n\n@NgModule({\n  declarations: [\n    EntryFormErrorsComponent,\n    EntryDisplayControlValidationDirective\n  ],\n  imports: [\n    CommonModule,\n    FormsModule,\n    ReactiveFormsModule,\n    MatInputModule\n  ],\n  exports: [\n    EntryFormErrorsComponent,\n    EntryDisplayControlValidationDirective\n  ]\n})\nexport class EntryValidationModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;AAGA;;;;;;;;;AASG;MAYU,wBAAwB,CAAA;;qHAAxB,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,wBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,EATzB,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;AAMT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,IAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,OAAA,EAAA,CAAA,CAAA;2FAGU,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAXpC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,mBAAmB;AAC7B,oBAAA,QAAQ,EAAE,CAAA;;;;;;AAMT,EAAA,CAAA;oBACD,eAAe,EAAE,uBAAuB,CAAC,OAAO;AACjD,iBAAA,CAAA;8BAGU,IAAI,EAAA,CAAA;sBAAZ,KAAK;;;ACZR;;AAEG;MACU,qBAAqB,CAAA;AAoB9B,IAAA,WAAA,CAAY,SAAyC,EAAE,EAAA;QACnD,IAAI,CAAC,kBAAkB,GAAG,MAAM,CAAC,kBAAkB,IAAI,EAAE,CAAC;KAC7D;AACJ,CAAA;AAED;;;;;;AAMG;MACU,uBAAuB,GAAG,IAAI,cAAc,CACrD,uBAAuB,EACvB;AACI,IAAA,UAAU,EAAE,MAAM;AAClB,IAAA,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE;AAC7C,CAAA;;ACnDL;AACA,MAAM,cAAc,GAAG,SAAS,CAAC;AACjC;AACM,MAAA,oBAAoB,GAAG,aAAa;AAE1C,MAAM,cAAc,GAAG,CAAC,WAA+C,EAAE,IAAc,KAAwC;AAC3H,IAAA,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;AACnB,QAAA,OAAO,WAAW,CAAC;AACtB,KAAA;IACD,IAAI,WAAW,YAAY,SAAS,EAAE;AAClC,QAAA,OAAO,cAAc,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAClH,KAAA;IACD,IAAI,WAAW,YAAY,SAAS,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE;QACnD,OAAO,cAAc,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AACxE,KAAA;AACD,IAAA,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAEF;;;;;;AAMG;AACH,MAAM,6BAA6B,GAAG,CAAC,KAAgC,EAAE,IAAsB,KAAI;AAC/F,IAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;AACrB,IAAA,MAAM,gBAAgB,GAAG,KAAK,EAAE,MAAM,CAAC;IACvC,MAAM,UAAU,GAAqB,EAAE,CAAC;AAExC,IAAA,IAAI,gBAAgB,EAAE;;AAElB,QAAA,KAAK,MAAM,GAAG,IAAI,gBAAgB,EAAE;AAChC,YAAA,MAAM,OAAO,GAAG,cAAc,CAAC,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;AAE7D,YAAA,IAAI,OAAO,EAAE;gBACT,MAAM,WAAW,GAAG,EAAsB,CAAC;gBAC3C,WAAW,CAAC,oBAAoB,CAAC,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC;AAC1D,gBAAA,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;gBAC/B,OAAO,CAAC,aAAa,EAAE,CAAC;AAC3B,aAAA;AAAM,iBAAA;gBACH,UAAU,CAAC,cAAc,CAAC;AACtB,oBAAA,UAAU,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,IAAI,gBAAgB,CAAC,GAAG,CAAC,CAAC;AAC1F,aAAA;AACJ,SAAA;AACJ,KAAA;AAAM,SAAA;AACH,QAAA,UAAU,CAAC,cAAc,CAAC,GAAG,CAAC,CAAA,gCAAA,CAAkC,CAAC,CAAC;AACrE,KAAA;AAED,IAAA,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;AAC/B;;AC/CA;;;;;;;;;AASG;MAIU,sCAAsC,CAAA;IAMjD,WACoD,CAAA,OAA8B,EAC/D,QAAoB,EAAA;QADa,IAAO,CAAA,OAAA,GAAP,OAAO,CAAuB;QAC/D,IAAQ,CAAA,QAAA,GAAR,QAAQ,CAAY;KAAI;IAE3C,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa;AACnD,aAAA,SAAS,CAAC,CAAC,aAAgC,KAAI;YAC9C,IAAI,aAAa,KAAK,SAAS,EAAE;gBAC/B,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,SAAS,GAAG,IAAI,CAAC,yBAAyB,EAAE,CAAC;AAC1E,aAAA;AACH,SAAC,CAAC,CAAC;KACN;IAED,WAAW,GAAA;QACT,IAAI,IAAI,CAAC,oBAAoB,EAAE;AAC7B,YAAA,IAAI,CAAC,oBAAoB,CAAC,WAAW,EAAE,CAAC;AACzC,SAAA;KACF;IAEO,yBAAyB,GAAA;AAC/B,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;AACxB,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACD,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,kBAAkB;AACjD,aAAA,GAAG,CAAC,iBAAiB,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,iBAAiB,CAAC,IAAI,CAAC;cACjE,QAAO,iBAAiB,CAAC,OAAO,CAAC,KAAK,QAAQ;AAC9C,kBAAE,iBAAiB,CAAC,OAAO,GAAG,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;cACrE,EAAE,CACL;aACA,MAAM,CAAC,OAAO,IAAI,OAAO,KAAK,EAAE,CAAC;aACjC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEd,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC;AAC/D,QAAA,MAAM,kBAAkB,GAAG,YAAY,YAAY,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;QAExF,OAAO,CAAC,YAAY,EAAE,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC5E;;AA1CU,sCAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,sCAAsC,kBAOvC,uBAAuB,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;uHAPtB,sCAAsC,EAAA,QAAA,EAAA,iCAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAAtC,sCAAsC,EAAA,UAAA,EAAA,CAAA;kBAHlD,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iCAAiC;AAC5C,iBAAA,CAAA;;0BAQI,MAAM;2BAAC,uBAAuB,CAAA;qEALxB,OAAO,EAAA,CAAA;sBAAf,KAAK;;;MCEK,qBAAqB,CAAA;;kHAArB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAArB,qBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,iBAd9B,wBAAwB;AACxB,QAAA,sCAAsC,aAGtC,YAAY;QACZ,WAAW;QACX,mBAAmB;AACnB,QAAA,cAAc,aAGd,wBAAwB;QACxB,sCAAsC,CAAA,EAAA,CAAA,CAAA;AAG7B,qBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,YAV9B,YAAY;QACZ,WAAW;QACX,mBAAmB;QACnB,cAAc,CAAA,EAAA,CAAA,CAAA;2FAOL,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAhBjC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE;wBACZ,wBAAwB;wBACxB,sCAAsC;AACvC,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,WAAW;wBACX,mBAAmB;wBACnB,cAAc;AACf,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,wBAAwB;wBACxB,sCAAsC;AACvC,qBAAA;AACF,iBAAA,CAAA;;;ACtBD;;AAEG;;;;"}

package/fesm2020/enigmatry-entry-components.mjs

@@ -1,8 +1,9 @@
-export * from '@enigmatry/entry-components/header';
 export * from '@enigmatry/entry-components/dialog';
 export * from '@enigmatry/entry-components/search-filter';
-export * from '@enigmatry/entry-components/toolbar';
 export * from '@enigmatry/entry-components/validation';
+export * from '@enigmatry/entry-components/button';
+export * from '@enigmatry/entry-components/file-input';
+export * from '@enigmatry/entry-components/permissions';
 
 /*
  * Public API Surface of entry-components

package/fesm2020/enigmatry-entry-components.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"enigmatry-entry-components.mjs","sources":["../../../../libs/entry-components/public-api.ts","../../../../libs/entry-components/enigmatry-entry-components.ts"],"sourcesContent":["/*\n * Public API Surface of entry-components\n */\n\nexport * from '@enigmatry/entry-components/header';\nexport * from '@enigmatry/entry-components/dialog';\nexport * from '@enigmatry/entry-components/search-filter';\nexport * from '@enigmatry/entry-components/toolbar';\nexport * from '@enigmatry/entry-components/validation';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AAAA;;AAEG;;ACFH;;AAEG"}
+{"version":3,"file":"enigmatry-entry-components.mjs","sources":["../../../../libs/entry-components/public-api.ts","../../../../libs/entry-components/enigmatry-entry-components.ts"],"sourcesContent":["/*\n * Public API Surface of entry-components\n */\n\nexport * from '@enigmatry/entry-components/dialog';\nexport * from '@enigmatry/entry-components/search-filter';\nexport * from '@enigmatry/entry-components/validation';\nexport * from '@enigmatry/entry-components/button';\nexport * from '@enigmatry/entry-components/file-input';\nexport * from '@enigmatry/entry-components/permissions';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;AAAA;;AAEG;;ACFH;;AAEG"}

package/file-input/README.md

@@ -0,0 +1,71 @@
+# Entry File Input
+
+`EntryFileInputComponent` is an Angular component that provides a custom file input button with additional functionality
+
+## Setup
+
+Import the [EntryFileInputModule] in your NgModule:
+
+```typescript
+import { EntryFileInputModule } from '@enigmatry/entry-components/file-input';
+@NgModule({
+  imports: [
+    EntryFileInputModule,
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
+
+## Usage
+
+Use the entry-file-input component in your template:
+
+```html
+<entry-file-input 
+ [label]="'Choose a file...'" 
+ [matIcon]="'attachment'" 
+ [accept]="'image/*'" 
+ [multiple]="false" 
+ [disabled]="false"
+ [(ngModel)]="files"
+ (selectedFile)="selectEvent($event)">
+ </entry-file-input>
+```
+
+```typescript
+export class Sample {
+
+  files: File | FileList;
+
+  selectEvent(files: FileList | File): void {
+    if (files instanceof FileList) {
+      ...
+    } else {
+      ...
+    }
+  };
+}
+```
+
+## API Summary
+
+#### Inputs
+- matIcon: string
+  - MatIcon for the select file button. Defaults to 'insert_drive_file' (optional).
+- multiple: boolean
+  - Sets if multiple files can be selected at once in.
+- accept: string
+  - Sets files accepted when opening the file browser dialog. Same as "accept" attribute in `<input/>` element.
+- disabled: boolean
+  - Disables input and clears selected files.
+
+#### Events
+
+- selectedFile: function($event)
+  - Emits a [File or FileList] object.
+
+#### Styling
+
+Button type and color can be styled by providing entry-button configuration. 

package/file-input/entry-file-input.component.d.ts

@@ -0,0 +1,74 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class EntryFileInputComponent implements OnInit, OnDestroy, ControlValueAccessor, Validator {
+    private readonly _ngZone;
+    private readonly _renderer;
+    /**
+     * Label for the select file button. Defaults to 'Choose file...'
+     */
+    label: string;
+    /**
+     * MatIcon for the select file button. Defaults to 'insert_drive_file' (optional)
+     */
+    matIcon?: string;
+    /**
+     * Same as 'accept' attribute in <input/> element.
+     */
+    accept?: string;
+    /**
+     * Same as 'multiple' attribute in <input/> element.
+     */
+    set multiple(multiple: BooleanInput);
+    get multiple(): boolean;
+    private _multiple;
+    /**
+     * Same as 'disabled' attribute in <input/> element.
+     */
+    set disabled(disabled: BooleanInput);
+    get disabled(): boolean;
+    private _disabled;
+    /**
+     * Same as 'readonly' attribute in <input/> element.
+     */
+    set readonly(readonly: BooleanInput);
+    get readonly(): boolean;
+    private _readonly;
+    /**
+     * Size limit per file in KB (kilobytes)
+     */
+    maxFileSizeInKb?: number;
+    /**
+     * Number of files allowed when multiple=true
+     */
+    maxFileCount?: number;
+    /**
+     * Current selected [File | FileList] object.
+     */
+    value: File | FileList | undefined;
+    /**
+     * Event emitted when a file is selected. Emits a [File | FileList] object.
+     */
+    selectedFile: EventEmitter<File | FileList>;
+    _fileButton: ElementRef<HTMLElement>;
+    _fileInput: ElementRef<HTMLInputElement>;
+    private _destroy$;
+    constructor(_ngZone: NgZone, _renderer: Renderer2);
+    get fileNames(): string;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onFileSelect(event: Event): void;
+    clear(): void;
+    onChange: (_: any) => void;
+    onTouched: () => void;
+    writeValue(value: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState?(isDisabled: boolean): void;
+    validate(control: AbstractControl<File | FileList | undefined>): ValidationErrors;
+    private isFileCountLimitExceeded;
+    private isFileSizeLimitExceeded;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EntryFileInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EntryFileInputComponent, "entry-file-input", never, { "label": "label"; "matIcon": "matIcon"; "accept": "accept"; "multiple": "multiple"; "disabled": "disabled"; "readonly": "readonly"; "maxFileSizeInKb": "maxFileSizeInKb"; "maxFileCount": "maxFileCount"; }, { "selectedFile": "selectedFile"; }, never, never, false, never>;
+}

package/file-input/entry-file-input.module.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./entry-file-input.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@angular/material/icon";
+import * as i5 from "@angular/material/button";
+import * as i6 from "@enigmatry/entry-components/button";
+export declare class EntryFileInputModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<EntryFileInputModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EntryFileInputModule, [typeof i1.EntryFileInputComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.MatIconModule, typeof i5.MatButtonModule, typeof i6.EntryButtonModule], [typeof i1.EntryFileInputComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<EntryFileInputModule>;
+}

package/{toolbar → file-input}/index.d.ts

@@ -1,5 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
-/// <amd-module name="@enigmatry/entry-components/toolbar" />
+/// <amd-module name="@enigmatry/entry-components/file-input" />
 export * from './public-api';

package/file-input/public-api.d.ts

@@ -0,0 +1,2 @@
+export { EntryFileInputModule } from './entry-file-input.module';
+export { EntryFileInputComponent } from './entry-file-input.component';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmatry/entry-components",
-  "version": "1.15.1-preview.3",
+  "version": "1.15.1-preview.31",
   "author": "Enigmatry",
   "description": "Enigmatry entry angular material components",
   "homepage": "https://github.com/enigmatry/entry-angular-building-blocks/tree/master/libs/entry-components#readme",
@@ -42,6 +42,14 @@
       "node": "./fesm2015/enigmatry-entry-components.mjs",
       "default": "./fesm2020/enigmatry-entry-components.mjs"
     },
+    "./button": {
+      "types": "./button/index.d.ts",
+      "esm2020": "./esm2020/button/enigmatry-entry-components-button.mjs",
+      "es2020": "./fesm2020/enigmatry-entry-components-button.mjs",
+      "es2015": "./fesm2015/enigmatry-entry-components-button.mjs",
+      "node": "./fesm2015/enigmatry-entry-components-button.mjs",
+      "default": "./fesm2020/enigmatry-entry-components-button.mjs"
+    },
     "./dialog": {
       "types": "./dialog/index.d.ts",
       "esm2020": "./esm2020/dialog/enigmatry-entry-components-dialog.mjs",
@@ -50,13 +58,21 @@
       "node": "./fesm2015/enigmatry-entry-components-dialog.mjs",
       "default": "./fesm2020/enigmatry-entry-components-dialog.mjs"
     },
-    "./header": {
-      "types": "./header/index.d.ts",
-      "esm2020": "./esm2020/header/enigmatry-entry-components-header.mjs",
-      "es2020": "./fesm2020/enigmatry-entry-components-header.mjs",
-      "es2015": "./fesm2015/enigmatry-entry-components-header.mjs",
-      "node": "./fesm2015/enigmatry-entry-components-header.mjs",
-      "default": "./fesm2020/enigmatry-entry-components-header.mjs"
+    "./file-input": {
+      "types": "./file-input/index.d.ts",
+      "esm2020": "./esm2020/file-input/enigmatry-entry-components-file-input.mjs",
+      "es2020": "./fesm2020/enigmatry-entry-components-file-input.mjs",
+      "es2015": "./fesm2015/enigmatry-entry-components-file-input.mjs",
+      "node": "./fesm2015/enigmatry-entry-components-file-input.mjs",
+      "default": "./fesm2020/enigmatry-entry-components-file-input.mjs"
+    },
+    "./permissions": {
+      "types": "./permissions/index.d.ts",
+      "esm2020": "./esm2020/permissions/enigmatry-entry-components-permissions.mjs",
+      "es2020": "./fesm2020/enigmatry-entry-components-permissions.mjs",
+      "es2015": "./fesm2015/enigmatry-entry-components-permissions.mjs",
+      "node": "./fesm2015/enigmatry-entry-components-permissions.mjs",
+      "default": "./fesm2020/enigmatry-entry-components-permissions.mjs"
     },
     "./search-filter": {
       "types": "./search-filter/index.d.ts",
@@ -66,14 +82,6 @@
       "node": "./fesm2015/enigmatry-entry-components-search-filter.mjs",
       "default": "./fesm2020/enigmatry-entry-components-search-filter.mjs"
     },
-    "./toolbar": {
-      "types": "./toolbar/index.d.ts",
-      "esm2020": "./esm2020/toolbar/enigmatry-entry-components-toolbar.mjs",
-      "es2020": "./fesm2020/enigmatry-entry-components-toolbar.mjs",
-      "es2015": "./fesm2015/enigmatry-entry-components-toolbar.mjs",
-      "node": "./fesm2015/enigmatry-entry-components-toolbar.mjs",
-      "default": "./fesm2020/enigmatry-entry-components-toolbar.mjs"
-    },
     "./validation": {
       "types": "./validation/index.d.ts",
       "esm2020": "./esm2020/validation/enigmatry-entry-components-validation.mjs",

package/permissions/README.md

@@ -0,0 +1,68 @@
+# Entry Permissions
+
+Reusable angular components for applying permission-based authorization:
+- Route guard
+- View directives
+- Pipe
+
+## Integration
+
+Permissions is part of the `@enigmatry/entry-components`:
+
+```npm
+npm i @enigmatry/entry-components
+```
+
+Create a permission service that implements EntryPermissionService<T> where T is the permission type that you use in your application. You need to provide implementation of the hasPermissions method (for example by checking if the logged in user has needed permissions). 
+
+```ts
+export class PermissionService implements EntryPermissionService<PermissionId> {
+  hasPermissions(permissions: PermissionId[]): boolean {
+    // TODO: provide implementation
+  }
+}
+```
+
+Import permissions module:
+
+```ts
+import { EntryPermissionModule } from '@enigmatry/entry-components/permissions';
+```
+
+Provide implementation of the EntryPermissionService:
+
+```ts
+providers: [
+    {
+        provide: EntryPermissionService,
+        useClass: PermissionService
+    }
+]
+```
+
+<!-- `PermissionService` should be provided in the root scope. -- TODO: add more details with example from the blueprint app  -->
+
+## Basic usage
+
+### Route guard
+
+```ts
+    canActivate: [entryPermissionGuard],
+    data: {
+        permissions: {
+        only: [PermissionId.UsersRead]
+        }
+    }
+```
+
+### View directives
+
+```html
+ <button mat-menu-item *entryPermissionsOnly="[PermissionId.UsersRead]" routerLink="users">Users</button>
+```
+
+### Pipe
+
+```ts
+[isEnabled]="[PermissionId.UsersWrite] | entryHasPermissions"
+```

package/permissions/index.d.ts

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

package/permissions/permission-type.d.ts

@@ -0,0 +1,3 @@
+export type PermissionType = number | string | {
+    id: number | string;
+};

package/permissions/permission.directive.d.ts

@@ -0,0 +1,11 @@
+import { PermissionType } from './permission-type';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export declare class EntryPermissionDirective<T extends PermissionType> {
+    private ngIfDirective;
+    private permissionService;
+    set only(permissions: T[]);
+    set except(permissions: T[]);
+    static ɵfac: i0.ɵɵFactoryDeclaration<EntryPermissionDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<EntryPermissionDirective<any>, "[entryPermissionsOnly],[entryPermissionsExcept]", never, { "only": "entryPermissionsOnly"; "except": "entryPermissionsExcept"; }, {}, never, never, false, [{ directive: typeof i1.NgIf; inputs: {}; outputs: {}; }]>;
+}

package/permissions/permission.guard.d.ts

@@ -0,0 +1,2 @@
+import { CanActivateFn } from '@angular/router';
+export declare const entryPermissionGuard: CanActivateFn;

package/permissions/permission.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./permission.directive";
+import * as i2 from "./permission.pipe";
+import * as i3 from "@angular/common";
+export declare class EntryPermissionModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<EntryPermissionModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EntryPermissionModule, [typeof i1.EntryPermissionDirective, typeof i2.EntryPermissionPipe], [typeof i3.CommonModule], [typeof i1.EntryPermissionDirective, typeof i2.EntryPermissionPipe]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<EntryPermissionModule>;
+}

package/permissions/permission.pipe.d.ts

@@ -0,0 +1,11 @@
+import { PipeTransform } from '@angular/core';
+import { PermissionType } from './permission-type';
+import { EntryPermissionService } from './permission.service';
+import * as i0 from "@angular/core";
+export declare class EntryPermissionPipe<T extends PermissionType> implements PipeTransform {
+    private permissionsService;
+    constructor(permissionsService: EntryPermissionService<T>);
+    transform(permissions: T[]): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EntryPermissionPipe<any>, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<EntryPermissionPipe<any>, "entryHasPermissions", false>;
+}

package/permissions/permission.service.d.ts

@@ -0,0 +1,4 @@
+import { PermissionType } from './permission-type';
+export declare abstract class EntryPermissionService<T extends PermissionType> {
+    abstract hasPermissions(permissions: T[]): boolean;
+}

package/permissions/public-api.d.ts

@@ -0,0 +1,5 @@
+export { EntryPermissionPipe } from './permission.pipe';
+export { EntryPermissionDirective } from './permission.directive';
+export { entryPermissionGuard } from './permission.guard';
+export { EntryPermissionService } from './permission.service';
+export { EntryPermissionModule } from './permission.module';

package/public-api.d.ts

@@ -1,5 +1,6 @@
-export * from '@enigmatry/entry-components/header';
 export * from '@enigmatry/entry-components/dialog';
 export * from '@enigmatry/entry-components/search-filter';
-export * from '@enigmatry/entry-components/toolbar';
 export * from '@enigmatry/entry-components/validation';
+export * from '@enigmatry/entry-components/button';
+export * from '@enigmatry/entry-components/file-input';
+export * from '@enigmatry/entry-components/permissions';

package/search-filter/entry-search-filter.module.d.ts

@@ -5,9 +5,11 @@ import * as i3 from "@angular/common";
 import * as i4 from "@angular/forms";
 import * as i5 from "@angular/material/input";
 import * as i6 from "@angular/material/button";
-import * as i7 from "@angular/material/select";
+import * as i7 from "@enigmatry/entry-components/button";
+import * as i8 from "@angular/material/select";
+import * as i9 from "@angular/material/tooltip";
 export declare class EntrySearchFilterModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<EntrySearchFilterModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<EntrySearchFilterModule, [typeof i1.EntrySearchFilterComponent, typeof i2.EntrySearchFilterInputComponent], [typeof i3.CommonModule, typeof i4.FormsModule, typeof i4.ReactiveFormsModule, typeof i5.MatInputModule, typeof i6.MatButtonModule, typeof i7.MatSelectModule], [typeof i1.EntrySearchFilterComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EntrySearchFilterModule, [typeof i1.EntrySearchFilterComponent, typeof i2.EntrySearchFilterInputComponent], [typeof i3.CommonModule, typeof i4.FormsModule, typeof i4.ReactiveFormsModule, typeof i5.MatInputModule, typeof i6.MatButtonModule, typeof i7.EntryButtonModule, typeof i8.MatSelectModule, typeof i9.MatTooltipModule], [typeof i1.EntrySearchFilterComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<EntrySearchFilterModule>;
 }

package/search-filter/search-filter-input/search-filter-input.component.d.ts

@@ -1,7 +1,8 @@
 import { UntypedFormGroup } from '@angular/forms';
-import { ControlType } from './control-type.model';
 import { EntrySearchFilterConfig } from '../search-filter-config.model';
 import { SearchFilterBase } from './search-filter-base.model';
+import { SelectSearchFilter } from './inputs/select-search-filter.model';
+import { TextSearchFilter } from './inputs/text-search-filter.model';
 import * as i0 from "@angular/core";
 export declare class EntrySearchFilterInputComponent<T> {
     config: EntrySearchFilterConfig;
@@ -9,8 +10,9 @@ export declare class EntrySearchFilterInputComponent<T> {
     searchFilter: SearchFilterBase<T>;
     /** Form group to which the search-filter input component will be added. */
     form: UntypedFormGroup;
-    controlType: typeof ControlType;
     constructor(config: EntrySearchFilterConfig);
+    get textSearchFilter(): TextSearchFilter | undefined;
+    get selectSearchFilter(): SelectSearchFilter<T> | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<EntrySearchFilterInputComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<EntrySearchFilterInputComponent<any>, "entry-search-filter-input", never, { "searchFilter": "searchFilter"; "form": "form"; }, {}, never, never, false, never>;
 }

package/styles/_generator.scss

@@ -0,0 +1,20 @@
+@use 'modules/components/dialogs/generator' as dialog;
+@use 'modules/components/forms/generator' as forms;
+@use 'modules/components/search-filter/generator' as search-filter;
+@use 'modules/components/tables/generator' as table;
+@use 'modules/components/buttons/generator' as buttons;
+@use 'modules/default-theme' as default;
+@use 'modules/vendors/angular-material/generator' as material-theme;
+@use 'sass:map';
+@use 'partials/theming';
+
+@mixin generate-from($custom-theme: ()) {
+	$merged-theme: map.deep-merge(default.$theme, $custom-theme);
+
+	@include material-theme.generate-from($merged-theme);
+	@include buttons.generate-from($merged-theme);
+	@include table.generate-from($merged-theme);
+	@include forms.generate-from($merged-theme);
+	@include search-filter.generate-from($merged-theme);
+	@include dialog.generate-from($merged-theme);
+}

package/styles/modules/_default-theme.scss

@@ -0,0 +1,63 @@
+$theme: (
+	general: (
+		density: 0,
+		colors: (
+			primary-theme: null,
+			accent-theme: null,
+			primary: #2581C4,
+			accent: #EA518D,
+			font: #323232,
+			disabled: (
+				foreground: rgb(0 0 0 / .38),
+				background: rgb(0 0 0 / .12)
+			)
+		),
+		typography: null,
+		fonts: (
+			hero-titles: (
+				family: '',
+				size: 0
+			),
+			titles: (
+				family: '',
+				size: 0
+			),
+			body: (
+				family: '',
+				size: 0
+			),
+			buttons: (
+				family: '',
+				size: 0
+			)
+		),
+		spacing: (
+			default: 15px
+		),
+		buttons: (
+			icon-size: 48px
+		)
+	),
+	tables: (
+		cells: (
+			edge-gap: 4px
+		),
+		rows: (
+			selected-color: #FFF,
+			disabled-color: #F5F5F5,
+			odd-even-row: odd,
+			odd-even-background: #F0F0F0
+		),
+		contents: (
+			no-result: (
+				font-size: 13px,
+				font-weight: 500
+			)
+		)
+	),
+	dialogs: (
+		title: (
+			size: 20px
+		)
+	)
+);

package/styles/modules/components/buttons/_generator.scss

@@ -0,0 +1,8 @@
+@use 'sass:map';
+
+@mixin generate-from($theme) {
+	.entry-button.mdc-button:disabled {
+		background-color: map.get($theme, 'general', 'colors', 'disabled', 'background');
+		color: map.get($theme, 'general', 'colors', 'disabled', 'foreground');
+	}
+}