@pepperi-addons/ngx-lib 0.3.15-beta.19 → 0.3.15-beta.21

package/fesm2015/pepperi-addons-ngx-lib-draggable-items.js

@@ -9,157 +9,157 @@ import { Subject } from 'rxjs';
 import { takeUntil, startWith, map } from 'rxjs/operators';
 import { pepIconSystemMove, PepIconModule, PepIconRegistry } from '@pepperi-addons/ngx-lib/icon';
 
-class DraggableItemComponent {
-    constructor() {
-        this.title = '';
-        this.disabled = false;
-        //
-    }
-    ngOnInit() {
-        //
-    }
-}
-DraggableItemComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'pep-draggable-item',
-                template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n    <div class=\"\">\n        <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n    </div>\n    <div *ngIf=\"title !== ''\" class=\"title-container\">\n        <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n    </div>\n    <div class=\"actions\">\n        <ng-content select=\"[pep-actions]\"></ng-content>\n    </div>\n</div>",
-                styles: [":host{display:block}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);padding-inline:.5rem;padding-inline:var(--pep-spacing-sm,.5rem);background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);border:1px solid hsl(0,0%,calc(10% + 30%));border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),calc(var(--pep-color-regular-l, 10%) + 30%));box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.16);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.16)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container .title-container{overflow-x:hidden;margin-inline:.5rem;margin-inline:var(--pep-spacing-sm,.5rem)}.pep-draggable-item-container .title-container .title{display:block}.pep-draggable-item-container .actions{display:inline-flex;grid-gap:.25rem;gap:.25rem;grid-gap:var(--pep-spacing-xs,.25rem);gap:var(--pep-spacing-xs,.25rem)}"]
-            },] }
-];
-DraggableItemComponent.ctorParameters = () => [];
-DraggableItemComponent.propDecorators = {
-    title: [{ type: Input }],
-    data: [{ type: Input }],
-    disabled: [{ type: Input }]
+class DraggableItemComponent {
+    constructor() {
+        this.title = '';
+        this.disabled = false;
+        //
+    }
+    ngOnInit() {
+        //
+    }
+}
+DraggableItemComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pep-draggable-item',
+                template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n    <div class=\"\">\n        <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n    </div>\n    <div *ngIf=\"title !== ''\" class=\"title-container\">\n        <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n    </div>\n    <div class=\"actions\">\n        <ng-content select=\"[pep-actions]\"></ng-content>\n    </div>\n</div>",
+                styles: [":host{display:block}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);padding-inline:.5rem;padding-inline:var(--pep-spacing-sm,.5rem);background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);border:1px solid hsl(0,0%,calc(10% + 30%));border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),calc(var(--pep-color-regular-l, 10%) + 30%));box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.16);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.16)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container .title-container{overflow-x:hidden;margin-inline:.5rem;margin-inline:var(--pep-spacing-sm,.5rem)}.pep-draggable-item-container .title-container .title{display:block}.pep-draggable-item-container .actions{display:inline-flex;grid-gap:.25rem;gap:.25rem;grid-gap:var(--pep-spacing-xs,.25rem);gap:var(--pep-spacing-xs,.25rem)}"]
+            },] }
+];
+DraggableItemComponent.ctorParameters = () => [];
+DraggableItemComponent.propDecorators = {
+    title: [{ type: Input }],
+    data: [{ type: Input }],
+    disabled: [{ type: Input }]
 };
 
-class DraggableItemsComponent {
-    constructor() {
-        this.containerId = 'draggable-container';
-        this.showSearch = false;
-        this.title = '';
-        this.titleType = 'regular';
-        this.titleSizeType = 'xl';
-        this.itemPlaceholderType = 'none';
-        this.dropAreaIds = [];
-        this._items = [];
-        this.itemDragStarted = new EventEmitter();
-        this.itemDragEnded = new EventEmitter();
-        this.searchControl = new FormControl();
-        this.numberItemsToShowSearch = 5;
-        //
-        this._destroyed = new Subject();
-    }
-    set items(value) {
-        var _a;
-        this._items = value;
-        if (((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            this.searchControl.enable();
-        }
-        else {
-            this.searchControl.disable();
-        }
-    }
-    get items() {
-        return this._items;
-    }
-    filterItems(value) {
-        const filterValue = value.toLowerCase();
-        return this.items.filter((opt) => opt.title &&
-            opt.title.toLowerCase().includes(filterValue.toLowerCase()));
-    }
-    changeCursorOnDragStart() {
-        document.body.classList.add('inheritCursors');
-        document.body.style.cursor = 'grabbing';
-    }
-    changeCursorOnDragEnd() {
-        document.body.classList.remove('inheritCursors');
-        document.body.style.cursor = 'unset';
-    }
-    getDestroyer() {
-        return takeUntil(this._destroyed);
-    }
-    ngOnInit() {
-        // If there is no item disable the search.
-        if (this.items.length === 0) {
-            this.searchControl.disable();
-        }
-        // Filter the draggableItems by the search control.
-        this.filteredItems$ = this.searchControl.valueChanges.pipe(this.getDestroyer(), startWith(''), map((option) => typeof option === 'string' ? option : option && option.value), map((value) => (value ? this.filterItems(value) : this.items)));
-    }
-    ngOnDestroy() {
-        this._destroyed.next();
-        this._destroyed.complete();
-    }
-    onDragStart(event) {
-        this.changeCursorOnDragStart();
-        this.itemDragStarted.emit(event);
-    }
-    onDragEnd(event) {
-        this.changeCursorOnDragEnd();
-        this.itemDragEnded.emit(event);
-    }
-}
-DraggableItemsComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'pep-draggable-items',
-                template: "<div [id]=\"containerId\" class=\"pep-draggable-items-container\" cdkDropList [cdkDropListData]=\"filteredItems$ | async\"\r\n    cdkDropListSortingDisabled [cdkDropListConnectedTo]=\"dropAreaIds\">\r\n\r\n    <div *ngIf=\"titleType !== 'none'\" class=\"title-container\"\r\n        [ngClass]=\"{ 'pep-border-bottom': titleType === 'with-bottom-border'}\">\r\n        <label class=\"title body-{{ titleSizeType }} bold ellipsis \" >{{title}}</label>\r\n        <pep-search *ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" sizeType=\"sm\" shrink=\"always\"\r\n            [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n    </div>\r\n\r\n    <div class=\"dragable-items-container\">\r\n        <pep-draggable-item *ngFor=\"let item of filteredItems$ | async; let i=index;\" class=\"draggble-item\"\r\n            [title]=\"item.title\" [data]=\"item.data\" [disabled]=\"item.disabled\" cdkDrag [cdkDragData]=\"item.data\"\r\n            [cdkDragDisabled]=\"item.disabled\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\r\n    \r\n            <ng-container *ngIf=\"itemPlaceholderType !== 'regular'\">\r\n                <div class=\"placeholder-item {{itemPlaceholderType}}\" *cdkDragPlaceholder></div>\r\n            </ng-container>\r\n        </pep-draggable-item>\r\n    </div>\r\n</div>",
-                styles: [".dragable-items-container{display:flex;flex-direction:column;grid-gap:.5rem;gap:.5rem;grid-gap:var(--pep-spacing-sm,.5rem);gap:var(--pep-spacing-sm,.5rem)}.dragable-items-container .draggble-item{cursor:-webkit-grab;cursor:grab}.dragable-items-container .draggble-item.cdk-drag-disabled{cursor:not-allowed}.title-container{height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);display:flex;flex-flow:row;justify-content:space-between}.title-container .title{align-self:center}.title-container.pep-border-bottom{margin-bottom:1rem;margin-bottom:var(--pep-spacing-lg,1rem)}.placeholder-item{height:2.5rem;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);width:100%}", ".placeholder-item.none{opacity:0}.placeholder-item.weak{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.12)}"]
-            },] }
-];
-DraggableItemsComponent.ctorParameters = () => [];
-DraggableItemsComponent.propDecorators = {
-    containerId: [{ type: Input }],
-    showSearch: [{ type: Input }],
-    title: [{ type: Input }],
-    titleType: [{ type: Input }],
-    titleSizeType: [{ type: Input }],
-    itemPlaceholderType: [{ type: Input }],
-    dropAreaIds: [{ type: Input }],
-    items: [{ type: Input }],
-    itemDragStarted: [{ type: Output }],
-    itemDragEnded: [{ type: Output }]
+class DraggableItemsComponent {
+    constructor() {
+        this.containerId = 'draggable-container';
+        this.showSearch = false;
+        this.title = '';
+        this.titleType = 'regular';
+        this.titleSizeType = 'xl';
+        this.itemPlaceholderType = 'none';
+        this.dropAreaIds = [];
+        this._items = [];
+        this.itemDragStarted = new EventEmitter();
+        this.itemDragEnded = new EventEmitter();
+        this.searchControl = new FormControl();
+        this.numberItemsToShowSearch = 5;
+        //
+        this._destroyed = new Subject();
+    }
+    set items(value) {
+        var _a;
+        this._items = value;
+        if (((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            this.searchControl.enable();
+        }
+        else {
+            this.searchControl.disable();
+        }
+    }
+    get items() {
+        return this._items;
+    }
+    filterItems(value) {
+        const filterValue = value.toLowerCase();
+        return this.items.filter((opt) => opt.title &&
+            opt.title.toLowerCase().includes(filterValue.toLowerCase()));
+    }
+    changeCursorOnDragStart() {
+        document.body.classList.add('inheritCursors');
+        document.body.style.cursor = 'grabbing';
+    }
+    changeCursorOnDragEnd() {
+        document.body.classList.remove('inheritCursors');
+        document.body.style.cursor = 'unset';
+    }
+    getDestroyer() {
+        return takeUntil(this._destroyed);
+    }
+    ngOnInit() {
+        // If there is no item disable the search.
+        if (this.items.length === 0) {
+            this.searchControl.disable();
+        }
+        // Filter the draggableItems by the search control.
+        this.filteredItems$ = this.searchControl.valueChanges.pipe(this.getDestroyer(), startWith(''), map((option) => typeof option === 'string' ? option : option && option.value), map((value) => (value ? this.filterItems(value) : this.items)));
+    }
+    ngOnDestroy() {
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+    onDragStart(event) {
+        this.changeCursorOnDragStart();
+        this.itemDragStarted.emit(event);
+    }
+    onDragEnd(event) {
+        this.changeCursorOnDragEnd();
+        this.itemDragEnded.emit(event);
+    }
+}
+DraggableItemsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pep-draggable-items',
+                template: "<div [id]=\"containerId\" class=\"pep-draggable-items-container\" cdkDropList [cdkDropListData]=\"filteredItems$ | async\"\r\n    cdkDropListSortingDisabled [cdkDropListConnectedTo]=\"dropAreaIds\">\r\n\r\n    <div *ngIf=\"titleType !== 'none'\" class=\"title-container\"\r\n        [ngClass]=\"{ 'pep-border-bottom': titleType === 'with-bottom-border'}\">\r\n        <label class=\"title body-{{ titleSizeType }} bold ellipsis \" >{{title}}</label>\r\n        <pep-search *ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" sizeType=\"sm\" shrink=\"always\"\r\n            [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n    </div>\r\n\r\n    <div class=\"dragable-items-container\">\r\n        <pep-draggable-item *ngFor=\"let item of filteredItems$ | async; let i=index;\" class=\"draggble-item\"\r\n            [title]=\"item.title\" [data]=\"item.data\" [disabled]=\"item.disabled\" cdkDrag [cdkDragData]=\"item.data\"\r\n            [cdkDragDisabled]=\"item.disabled\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\r\n    \r\n            <ng-container *ngIf=\"itemPlaceholderType !== 'regular'\">\r\n                <div class=\"placeholder-item {{itemPlaceholderType}}\" *cdkDragPlaceholder></div>\r\n            </ng-container>\r\n        </pep-draggable-item>\r\n    </div>\r\n</div>",
+                styles: [".dragable-items-container{display:flex;flex-direction:column;grid-gap:.5rem;gap:.5rem;grid-gap:var(--pep-spacing-sm,.5rem);gap:var(--pep-spacing-sm,.5rem)}.dragable-items-container .draggble-item{cursor:-webkit-grab;cursor:grab}.dragable-items-container .draggble-item.cdk-drag-disabled{cursor:not-allowed}.title-container{height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);display:flex;flex-flow:row;justify-content:space-between}.title-container .title{align-self:center}.title-container.pep-border-bottom{margin-bottom:1rem;margin-bottom:var(--pep-spacing-lg,1rem)}.placeholder-item{height:2.5rem;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);width:100%}", ".placeholder-item.none{opacity:0}.placeholder-item.weak{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.12)}"]
+            },] }
+];
+DraggableItemsComponent.ctorParameters = () => [];
+DraggableItemsComponent.propDecorators = {
+    containerId: [{ type: Input }],
+    showSearch: [{ type: Input }],
+    title: [{ type: Input }],
+    titleType: [{ type: Input }],
+    titleSizeType: [{ type: Input }],
+    itemPlaceholderType: [{ type: Input }],
+    dropAreaIds: [{ type: Input }],
+    items: [{ type: Input }],
+    itemDragStarted: [{ type: Output }],
+    itemDragEnded: [{ type: Output }]
 };
 
-class PepDraggableItemsModule {
-    constructor(pepIconRegistry) {
-        this.pepIconRegistry = pepIconRegistry;
-        this.pepIconRegistry.registerIcons([
-            pepIconSystemMove,
-        ]);
-    }
-}
-PepDraggableItemsModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    DraggableItemsComponent,
-                    DraggableItemComponent
-                ],
-                imports: [
-                    CommonModule,
-                    ReactiveFormsModule,
-                    PepNgxLibModule,
-                    PepButtonModule,
-                    PepIconModule,
-                    PepSearchModule,
-                    DragDropModule
-                ],
-                exports: [
-                    DraggableItemsComponent,
-                    DraggableItemComponent
-                ],
-            },] }
-];
-PepDraggableItemsModule.ctorParameters = () => [
-    { type: PepIconRegistry }
+class PepDraggableItemsModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons([
+            pepIconSystemMove,
+        ]);
+    }
+}
+PepDraggableItemsModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    DraggableItemsComponent,
+                    DraggableItemComponent
+                ],
+                imports: [
+                    CommonModule,
+                    ReactiveFormsModule,
+                    PepNgxLibModule,
+                    PepButtonModule,
+                    PepIconModule,
+                    PepSearchModule,
+                    DragDropModule
+                ],
+                exports: [
+                    DraggableItemsComponent,
+                    DraggableItemComponent
+                ],
+            },] }
+];
+PepDraggableItemsModule.ctorParameters = () => [
+    { type: PepIconRegistry }
 ];
 
-/*
- * Public API Surface of ngx-lib/draggable-items
+/*
+ * Public API Surface of ngx-lib/draggable-items
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { DraggableItemComponent, DraggableItemsComponent, PepDraggableItemsModule };

package/fesm2015/pepperi-addons-ngx-lib-field-title.js

@@ -6,67 +6,67 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { pepIconSystemMust, PepIconModule, PepIconRegistry } from '@pepperi-addons/ngx-lib/icon';
 import { DEFAULT_HORIZONTAL_ALIGNMENT } from '@pepperi-addons/ngx-lib';
 
-class PepFieldTitleComponent {
-    constructor() {
-        this.label = '';
-        this.mandatory = false;
-        this.disabled = false;
-        this.maxFieldCharacters = 0;
-        this.hint = '';
-        this.xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
-        this.showTitle = true;
-        this.inputLength = 0;
-    }
-}
-PepFieldTitleComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'pep-field-title',
-                template: "<div class=\"mat-form-title\" [ngClass]=\"{disable: disabled}\" [ngStyle]=\"{'text-align': xAlignment }\">\n    <ng-container *ngIf=\"xAlignment == 'right' then rightTemplate else leftTemplate\">\n    </ng-container>\n    <ng-template #rightTemplate>\n        <ng-container *ngTemplateOutlet=\"hintTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"requiredTemplate\"></ng-container>\n    </ng-template>\n    <ng-template #leftTemplate>\n        <ng-container *ngTemplateOutlet=\"requiredTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"hintTemplate\"></ng-container>\n    </ng-template>\n\n    <ng-template #requiredTemplate>\n        <mat-icon *ngIf=\"mandatory\" class=\"pep-spacing-element\">\n            <pep-icon name=\"system_must\"></pep-icon>\n        </mat-icon>\n        <!-- For the grid template () -->\n        <span *ngIf=\"!mandatory\"></span>\n    </ng-template>\n    <ng-template #titleTemplate>\n        <mat-label *ngIf=\"showTitle\" [title]=\"label\" class=\"body-xs\">\n            {{ label }}\n        </mat-label>\n        <!-- For the grid template () -->\n        <span *ngIf=\"!showTitle\"></span>\n    </ng-template>\n    <ng-template #hintTemplate>\n        <ng-container *ngIf=\"hint?.length > 0 then hintTextTemplate else maxCharactersTemplate\">\n        </ng-container>\n        <ng-template #hintTextTemplate>\n            <span class=\"body-xs\">\n                &nbsp;{{ hint }}\n            </span>\n        </ng-template>\n        <ng-template #maxCharactersTemplate>\n            <span *ngIf=\"maxFieldCharacters > 0\" class=\"body-xs\">\n                &nbsp;{{ inputLength || 0 }}/{{ maxFieldCharacters }}\n            </span>\n            <!-- For the grid template () -->\n            <span *ngIf=\"maxFieldCharacters === 0\"></span>\n        </ng-template>\n    </ng-template>\n</div>",
-                styles: [":host{display:grid;width:inherit}", ""]
-            },] }
-];
-PepFieldTitleComponent.propDecorators = {
-    label: [{ type: Input }],
-    mandatory: [{ type: Input }],
-    disabled: [{ type: Input }],
-    maxFieldCharacters: [{ type: Input }],
-    hint: [{ type: Input }],
-    xAlignment: [{ type: Input }],
-    showTitle: [{ type: Input }],
-    inputLength: [{ type: Input }]
+class PepFieldTitleComponent {
+    constructor() {
+        this.label = '';
+        this.mandatory = false;
+        this.disabled = false;
+        this.maxFieldCharacters = 0;
+        this.hint = '';
+        this.xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
+        this.showTitle = true;
+        this.inputLength = 0;
+    }
+}
+PepFieldTitleComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pep-field-title',
+                template: "<div class=\"mat-form-title\" [ngClass]=\"{disable: disabled}\" [ngStyle]=\"{'text-align': xAlignment }\">\n    <ng-container *ngIf=\"xAlignment == 'right' then rightTemplate else leftTemplate\">\n    </ng-container>\n    <ng-template #rightTemplate>\n        <ng-container *ngTemplateOutlet=\"hintTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"requiredTemplate\"></ng-container>\n    </ng-template>\n    <ng-template #leftTemplate>\n        <ng-container *ngTemplateOutlet=\"requiredTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"hintTemplate\"></ng-container>\n    </ng-template>\n\n    <ng-template #requiredTemplate>\n        <mat-icon *ngIf=\"mandatory\" class=\"pep-spacing-element\">\n            <pep-icon name=\"system_must\"></pep-icon>\n        </mat-icon>\n        <!-- For the grid template () -->\n        <span *ngIf=\"!mandatory\"></span>\n    </ng-template>\n    <ng-template #titleTemplate>\n        <mat-label *ngIf=\"showTitle\" [title]=\"label\" class=\"body-xs\">\n            {{ label }}\n        </mat-label>\n        <!-- For the grid template () -->\n        <span *ngIf=\"!showTitle\"></span>\n    </ng-template>\n    <ng-template #hintTemplate>\n        <ng-container *ngIf=\"hint?.length > 0 then hintTextTemplate else maxCharactersTemplate\">\n        </ng-container>\n        <ng-template #hintTextTemplate>\n            <span class=\"body-xs\">\n                &nbsp;{{ hint }}\n            </span>\n        </ng-template>\n        <ng-template #maxCharactersTemplate>\n            <span *ngIf=\"maxFieldCharacters > 0\" class=\"body-xs\">\n                &nbsp;{{ inputLength || 0 }}/{{ maxFieldCharacters }}\n            </span>\n            <!-- For the grid template () -->\n            <span *ngIf=\"maxFieldCharacters === 0\"></span>\n        </ng-template>\n    </ng-template>\n</div>",
+                styles: [":host{display:grid;width:inherit}", ""]
+            },] }
+];
+PepFieldTitleComponent.propDecorators = {
+    label: [{ type: Input }],
+    mandatory: [{ type: Input }],
+    disabled: [{ type: Input }],
+    maxFieldCharacters: [{ type: Input }],
+    hint: [{ type: Input }],
+    xAlignment: [{ type: Input }],
+    showTitle: [{ type: Input }],
+    inputLength: [{ type: Input }]
 };
 
-class PepFieldTitleModule {
-    constructor(pepIconRegistry) {
-        this.pepIconRegistry = pepIconRegistry;
-        this.pepIconRegistry.registerIcons([pepIconSystemMust]);
-    }
-}
-PepFieldTitleModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    // Material modules,
-                    MatCommonModule,
-                    MatIconModule,
-                    MatFormFieldModule,
-                    // ngx-lib modules
-                    PepIconModule,
-                ],
-                exports: [PepFieldTitleComponent],
-                declarations: [PepFieldTitleComponent],
-            },] }
-];
-PepFieldTitleModule.ctorParameters = () => [
-    { type: PepIconRegistry }
+class PepFieldTitleModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons([pepIconSystemMust]);
+    }
+}
+PepFieldTitleModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    // Material modules,
+                    MatCommonModule,
+                    MatIconModule,
+                    MatFormFieldModule,
+                    // ngx-lib modules
+                    PepIconModule,
+                ],
+                exports: [PepFieldTitleComponent],
+                declarations: [PepFieldTitleComponent],
+            },] }
+];
+PepFieldTitleModule.ctorParameters = () => [
+    { type: PepIconRegistry }
 ];
 
-/*
- * Public API Surface of ngx-lib/field-title
+/*
+ * Public API Surface of ngx-lib/field-title
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { PepFieldTitleComponent, PepFieldTitleModule };