npm - @pepperi-addons/ngx-lib - Versions diffs - 0.4.2-storybook.1 → 0.5.0-ng15.2 - Mend

@pepperi-addons/ngx-lib 0.4.2-storybook.1 → 0.5.0-ng15.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (520) hide show

package/fesm2020/pepperi-addons-ngx-lib-draggable-items.mjs CHANGED Viewed

@@ -1,45 +1,98 @@
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, Output, NgModule } from '@angular/core';
+import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@pepperi-addons/ngx-lib/button';
 import { PepButtonModule } from '@pepperi-addons/ngx-lib/button';
+import * as i3 from '@pepperi-addons/ngx-lib/menu';
+import { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { PepNgxLibModule } from '@pepperi-addons/ngx-lib';
+import { BaseDestroyerDirective, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
 import * as i2$1 from '@pepperi-addons/ngx-lib/search';
 import { PepSearchModule } from '@pepperi-addons/ngx-lib/search';
-import * as i3 from '@angular/cdk/drag-drop';
+import * as i3$1 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import { Subject } from 'rxjs';
-import { takeUntil, startWith, map } from 'rxjs/operators';
+import { startWith, map } from 'rxjs/operators';
 import * as i1$1 from '@pepperi-addons/ngx-lib/icon';
 import { pepIconSystemMove, PepIconModule } from '@pepperi-addons/ngx-lib/icon';
 class DraggableItemComponent {
     constructor() {
         this.title = '';
+        this.titlePrefix = '';
+        this.titleClassNames = '';
         this.disabled = false;
+        this.shadow = true;
+        this.styleType = 'regular';
+        this.toggleContent = false;
+        this.isToggleContentOpen = false;
+        this.actionsMenu = null;
+        this.menuStyleType = 'regular';
+        this.contentToggle = new EventEmitter();
+        this.actionsMenuItemClick = new EventEmitter();
         //
     }
     ngOnInit() {
         //
     }
+    onToggleContent() {
+        if (this.toggleContent) {
+            this.isToggleContentOpen = !this.isToggleContentOpen;
+            this.contentToggle.emit(this.isToggleContentOpen);
+        }
+    }
+    onActionsMenuItemClick(item) {
+        this.actionsMenuItemClick.emit(item);
+    }
 }
-DraggableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggableItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DraggableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: { title: "title", data: "data", disabled: "disabled" }, ngImport: i0, 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:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem);background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);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(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%));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:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container .title-container .title{display:block}.pep-draggable-item-container .actions{display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggableItemComponent, decorators: [{
+DraggableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DraggableItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DraggableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: { title: "title", titlePrefix: "titlePrefix", titleClassNames: "titleClassNames", data: "data", disabled: "disabled", shadow: "shadow", styleType: "styleType", toggleContent: "toggleContent", isToggleContentOpen: "isToggleContentOpen", actionsMenu: "actionsMenu", menuStyleType: "menuStyleType" }, outputs: { contentToggle: "contentToggle", actionsMenuItemClick: "actionsMenuItemClick" }, ngImport: i0, template: "<div class=\"pep-draggable-item-container\" class=\"{{ styleType }}\" \n    [ngClass]=\"{ 'shadow': shadow, 'disable': disabled, 'toggle-content': toggleContent, 'toggle-content-open': isToggleContentOpen }\"\n    >\n    <div class=\"\">\n        <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n    </div>\n    <div class=\"item-title-container\" [ngClass]=\"{ 'shadow': shadow }\" (click)=\"onToggleContent();\">\n        <span *ngIf=\"titlePrefix !== ''\" class=\"body-sm ellipsis item-title\">{{titlePrefix}}</span>\n        <span *ngIf=\"title !== ''\" class=\"body-sm bold ellipsis item-title {{titleClassNames}}\" title=\"{{title}}\">{{title}}</span>\n    </div>\n    <div class=\"actions\">\n        <pep-menu *ngIf=\"actionsMenu\" sizeType=\"xs\" [styleType]=\"menuStyleType\" [items]=\"actionsMenu\" (menuItemClick)=\"onActionsMenuItemClick($event)\"></pep-menu>\n        <ng-content *ngIf=\"!actionsMenu\" select=\"[pep-actions]\"></ng-content>\n    </div>\n    <div *ngIf=\"toggleContent && isToggleContentOpen\" class=\"toggle-container\">\n        <ng-content select=\"[pep-toggle-content]\"></ng-content>\n    </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{min-height:2.5rem;height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container.shadow{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.regular{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);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(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.pep-draggable-item-container.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.08)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container.toggle-content .item-title-container:hover{cursor:s-resize}.pep-draggable-item-container.toggle-content.toggle-content-open{height:unset;padding-top:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container.toggle-content.toggle-content-open .item-title-container:hover{cursor:n-resize}.pep-draggable-item-container .item-title-container{height:100%;display:flex;align-items:center;overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container .item-title-container .item-title{display:block}.pep-draggable-item-container .actions{z-index:1;display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}.pep-draggable-item-container .toggle-container{padding:var(--pep-spacing-md, .75rem) 0;grid-column:1/-1;display:grid;gap:var(--pep-spacing-lg, 1rem)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i3.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "iconPosition", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: 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:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem);background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);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(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%));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:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container .title-container .title{display:block}.pep-draggable-item-container .actions{display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}\n"] }]
+            args: [{ selector: 'pep-draggable-item', template: "<div class=\"pep-draggable-item-container\" class=\"{{ styleType }}\" \n    [ngClass]=\"{ 'shadow': shadow, 'disable': disabled, 'toggle-content': toggleContent, 'toggle-content-open': isToggleContentOpen }\"\n    >\n    <div class=\"\">\n        <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n    </div>\n    <div class=\"item-title-container\" [ngClass]=\"{ 'shadow': shadow }\" (click)=\"onToggleContent();\">\n        <span *ngIf=\"titlePrefix !== ''\" class=\"body-sm ellipsis item-title\">{{titlePrefix}}</span>\n        <span *ngIf=\"title !== ''\" class=\"body-sm bold ellipsis item-title {{titleClassNames}}\" title=\"{{title}}\">{{title}}</span>\n    </div>\n    <div class=\"actions\">\n        <pep-menu *ngIf=\"actionsMenu\" sizeType=\"xs\" [styleType]=\"menuStyleType\" [items]=\"actionsMenu\" (menuItemClick)=\"onActionsMenuItemClick($event)\"></pep-menu>\n        <ng-content *ngIf=\"!actionsMenu\" select=\"[pep-actions]\"></ng-content>\n    </div>\n    <div *ngIf=\"toggleContent && isToggleContentOpen\" class=\"toggle-container\">\n        <ng-content select=\"[pep-toggle-content]\"></ng-content>\n    </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{min-height:2.5rem;height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container.shadow{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.regular{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);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(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.pep-draggable-item-container.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.08)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container.toggle-content .item-title-container:hover{cursor:s-resize}.pep-draggable-item-container.toggle-content.toggle-content-open{height:unset;padding-top:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container.toggle-content.toggle-content-open .item-title-container:hover{cursor:n-resize}.pep-draggable-item-container .item-title-container{height:100%;display:flex;align-items:center;overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container .item-title-container .item-title{display:block}.pep-draggable-item-container .actions{z-index:1;display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}.pep-draggable-item-container .toggle-container{padding:var(--pep-spacing-md, .75rem) 0;grid-column:1/-1;display:grid;gap:var(--pep-spacing-lg, 1rem)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { title: [{
                 type: Input
+            }], titlePrefix: [{
+                type: Input
+            }], titleClassNames: [{
+                type: Input
             }], data: [{
                 type: Input
             }], disabled: [{
                 type: Input
+            }], shadow: [{
+                type: Input
+            }], styleType: [{
+                type: Input
+            }], toggleContent: [{
+                type: Input
+            }], isToggleContentOpen: [{
+                type: Input
+            }], actionsMenu: [{
+                type: Input
+            }], menuStyleType: [{
+                type: Input
+            }], contentToggle: [{
+                type: Output
+            }], actionsMenuItemClick: [{
+                type: Output
             }] } });
-class PepDraggableItemsComponent {
+class PepDraggableItemsComponent extends BaseDestroyerDirective {
+    set items(value) {
+        this._items = value;
+        if (this.items?.length > 0) {
+            this.searchControl.enable();
+        }
+        else {
+            this.searchControl.disable();
+        }
+    }
+    get items() {
+        return this._items;
+    }
     constructor() {
+        super();
         this.containerId = 'draggable-container';
         this.showSearch = false;
         this.title = '';
@@ -52,20 +105,6 @@ class PepDraggableItemsComponent {
         this.itemDragEnded = new EventEmitter();
         this.searchControl = new FormControl();
         this.numberItemsToShowSearch = 5;
-        //
-        this._destroyed = new Subject();
-    }
-    set items(value) {
-        this._items = value;
-        if (this.items?.length > 0) {
-            this.searchControl.enable();
-        }
-        else {
-            this.searchControl.disable();
-        }
-    }
-    get items() {
-        return this._items;
     }
     filterItems(value) {
         const filterValue = value.toLowerCase();
@@ -80,9 +119,6 @@ class PepDraggableItemsComponent {
         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) {
@@ -91,10 +127,6 @@ class PepDraggableItemsComponent {
         // 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);
@@ -104,11 +136,11 @@ class PepDraggableItemsComponent {
         this.itemDragEnded.emit(event);
     }
 }
-PepDraggableItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepDraggableItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepDraggableItemsComponent, selector: "pep-draggable-items", inputs: { containerId: "containerId", showSearch: "showSearch", title: "title", titleType: "titleType", titleSizeType: "titleSizeType", itemPlaceholderType: "itemPlaceholderType", dropAreaIds: "dropAreaIds", items: "items" }, outputs: { itemDragStarted: "itemDragStarted", itemDragEnded: "itemDragEnded" }, ngImport: i0, 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\" class=\"search-button\" sizeType=\"sm\" shrink=\"always\"\r\n            [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n    </div>\r\n\r\n    <div class=\"draggable-items-overflow\" [ngClass]=\"{ 'add-padding': titleType === 'with-bottom-border'}\">\r\n        <div class=\"draggable-items-wrapper\">\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>\r\n</div>", styles: [".pep-draggable-items-container{display:grid;grid-template-rows:auto 1fr;height:100%;overflow:hidden;padding-inline-end:var(--pep-spacing-xs, .25rem)}.pep-draggable-items-container .title-container{height:var(--pep-top-bar-field-height, 2.5rem);display:flex;gap:var(--pep-spacing-sm, .5rem);flex-flow:row;justify-content:space-between}.pep-draggable-items-container .title-container .title{align-self:center}.pep-draggable-items-container .title-container .search-button{display:flex;align-self:center}.pep-draggable-items-container .draggable-items-overflow{overflow:auto}.pep-draggable-items-container .draggable-items-overflow.add-padding{padding:var(--pep-spacing-lg, 1rem) 0}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper{display:flex;flex-direction:column;gap:var(--pep-spacing-sm, .5rem)}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper .draggble-item{cursor:grab}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper .draggble-item.cdk-drag-disabled{cursor:not-allowed}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper .placeholder-item{height:2.5rem;border-radius:var(--pep-border-radius-md, .25rem);width:100%}\n", ".placeholder-item.none{opacity:0}.placeholder-item.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.PepSearchComponent, selector: "pep-search", inputs: ["triggerOn", "autoCompleteTop", "autoCompleteValues", "shrink", "value", "searchControl", "useAsWebComponent", "sizeType"], outputs: ["search", "autocompleteChange", "stateChange"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "data", "disabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsComponent, decorators: [{
+PepDraggableItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepDraggableItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PepDraggableItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepDraggableItemsComponent, selector: "pep-draggable-items", inputs: { containerId: "containerId", showSearch: "showSearch", title: "title", titleType: "titleType", titleSizeType: "titleSizeType", itemPlaceholderType: "itemPlaceholderType", dropAreaIds: "dropAreaIds", items: "items" }, outputs: { itemDragStarted: "itemDragStarted", itemDragEnded: "itemDragEnded" }, usesInheritance: true, ngImport: i0, 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\" class=\"search-button\" sizeType=\"sm\" shrink=\"always\"\r\n            [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n    </div>\r\n\r\n    <div class=\"draggable-items-overflow\" [ngClass]=\"{ 'add-padding': titleType === 'with-bottom-border'}\">\r\n        <div class=\"draggable-items-wrapper\">\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>\r\n</div>", styles: [".pep-draggable-items-container{display:grid;grid-template-rows:auto 1fr;height:100%;overflow:hidden;padding-inline-end:var(--pep-spacing-xs, .25rem)}.pep-draggable-items-container .title-container{height:var(--pep-top-bar-field-height, 2.5rem);display:flex;gap:var(--pep-spacing-sm, .5rem);flex-flow:row;justify-content:space-between}.pep-draggable-items-container .title-container .title{align-self:center}.pep-draggable-items-container .title-container .search-button{display:flex;align-self:center}.pep-draggable-items-container .draggable-items-overflow{overflow:auto}.pep-draggable-items-container .draggable-items-overflow.add-padding{padding:var(--pep-spacing-lg, 1rem) 0}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper{display:flex;flex-direction:column;gap:var(--pep-spacing-sm, .5rem)}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper .draggble-item{cursor:grab}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper .draggble-item.cdk-drag-disabled{cursor:not-allowed}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper .placeholder-item{height:2.5rem;border-radius:var(--pep-border-radius-md, .25rem);width:100%}\n", ".placeholder-item.none{opacity:0}.placeholder-item.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.08)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.PepSearchComponent, selector: "pep-search", inputs: ["triggerOn", "autoCompleteTop", "autoCompleteValues", "shrink", "value", "searchControl", "useAsWebComponent", "sizeType"], outputs: ["search", "autocompleteChange", "stateChange"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "titlePrefix", "titleClassNames", "data", "disabled", "shadow", "styleType", "toggleContent", "isToggleContentOpen", "actionsMenu", "menuStyleType"], outputs: ["contentToggle", "actionsMenuItemClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepDraggableItemsComponent, 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\" class=\"search-button\" sizeType=\"sm\" shrink=\"always\"\r\n            [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n    </div>\r\n\r\n    <div class=\"draggable-items-overflow\" [ngClass]=\"{ 'add-padding': titleType === 'with-bottom-border'}\">\r\n        <div class=\"draggable-items-wrapper\">\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>\r\n</div>", styles: [".pep-draggable-items-container{display:grid;grid-template-rows:auto 1fr;height:100%;overflow:hidden;padding-inline-end:var(--pep-spacing-xs, .25rem)}.pep-draggable-items-container .title-container{height:var(--pep-top-bar-field-height, 2.5rem);display:flex;gap:var(--pep-spacing-sm, .5rem);flex-flow:row;justify-content:space-between}.pep-draggable-items-container .title-container .title{align-self:center}.pep-draggable-items-container .title-container .search-button{display:flex;align-self:center}.pep-draggable-items-container .draggable-items-overflow{overflow:auto}.pep-draggable-items-container .draggable-items-overflow.add-padding{padding:var(--pep-spacing-lg, 1rem) 0}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper{display:flex;flex-direction:column;gap:var(--pep-spacing-sm, .5rem)}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper .draggble-item{cursor:grab}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper .draggble-item.cdk-drag-disabled{cursor:not-allowed}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper .placeholder-item{height:2.5rem;border-radius:var(--pep-border-radius-md, .25rem);width:100%}\n", ".placeholder-item.none{opacity:0}.placeholder-item.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}\n"] }]
+            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\" class=\"search-button\" sizeType=\"sm\" shrink=\"always\"\r\n            [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n    </div>\r\n\r\n    <div class=\"draggable-items-overflow\" [ngClass]=\"{ 'add-padding': titleType === 'with-bottom-border'}\">\r\n        <div class=\"draggable-items-wrapper\">\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>\r\n</div>", styles: [".pep-draggable-items-container{display:grid;grid-template-rows:auto 1fr;height:100%;overflow:hidden;padding-inline-end:var(--pep-spacing-xs, .25rem)}.pep-draggable-items-container .title-container{height:var(--pep-top-bar-field-height, 2.5rem);display:flex;gap:var(--pep-spacing-sm, .5rem);flex-flow:row;justify-content:space-between}.pep-draggable-items-container .title-container .title{align-self:center}.pep-draggable-items-container .title-container .search-button{display:flex;align-self:center}.pep-draggable-items-container .draggable-items-overflow{overflow:auto}.pep-draggable-items-container .draggable-items-overflow.add-padding{padding:var(--pep-spacing-lg, 1rem) 0}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper{display:flex;flex-direction:column;gap:var(--pep-spacing-sm, .5rem)}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper .draggble-item{cursor:grab}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper .draggble-item.cdk-drag-disabled{cursor:not-allowed}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper .placeholder-item{height:2.5rem;border-radius:var(--pep-border-radius-md, .25rem);width:100%}\n", ".placeholder-item.none{opacity:0}.placeholder-item.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.08)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { containerId: [{
                 type: Input
             }], showSearch: [{
@@ -139,24 +171,26 @@ class PepDraggableItemsModule {
         ]);
     }
 }
-PepDraggableItemsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-PepDraggableItemsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsModule, declarations: [PepDraggableItemsComponent,
+PepDraggableItemsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepDraggableItemsModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+PepDraggableItemsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PepDraggableItemsModule, declarations: [PepDraggableItemsComponent,
         DraggableItemComponent], imports: [CommonModule,
         ReactiveFormsModule,
         PepNgxLibModule,
         PepButtonModule,
         PepIconModule,
+        PepMenuModule,
         PepSearchModule,
         DragDropModule], exports: [PepDraggableItemsComponent,
         DraggableItemComponent] });
-PepDraggableItemsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsModule, imports: [CommonModule,
+PepDraggableItemsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepDraggableItemsModule, imports: [CommonModule,
         ReactiveFormsModule,
         PepNgxLibModule,
         PepButtonModule,
         PepIconModule,
+        PepMenuModule,
         PepSearchModule,
         DragDropModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepDraggableItemsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -169,6 +203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                         PepNgxLibModule,
                         PepButtonModule,
                         PepIconModule,
+                        PepMenuModule,
                         PepSearchModule,
                         DragDropModule
                     ],

package/fesm2020/pepperi-addons-ngx-lib-draggable-items.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pepperi-addons-ngx-lib-draggable-items.mjs","sources":["../../../projects/ngx-lib/draggable-items/draggable-item/draggable-item.component.ts","../../../projects/ngx-lib/draggable-items/draggable-item/draggable-item.component.html","../../../projects/ngx-lib/draggable-items/draggable-items.component.ts","../../../projects/ngx-lib/draggable-items/draggable-items.component.html","../../../projects/ngx-lib/draggable-items/draggable-items.module.ts","../../../projects/ngx-lib/draggable-items/public-api.ts","../../../projects/ngx-lib/draggable-items/pepperi-addons-ngx-lib-draggable-items.ts"],"sourcesContent":["import { Component, EventEmitter, HostBinding, Input, OnInit, Output } from '@angular/core';\n\n@Component({\n selector: 'pep-draggable-item',\n templateUrl: './draggable-item.component.html',\n styleUrls: ['./draggable-item.component.scss']\n})\nexport class DraggableItemComponent implements OnInit {\n @Input() title = '';\n @Input() data: any;\n @Input() disabled = false;\n\n constructor() {\n //\n }\n\n ngOnInit(): void {\n //\n }\n}\n","<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>","import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';\nimport { Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { Observable, Subject } from 'rxjs';\nimport { map, startWith, takeUntil } from 'rxjs/operators';\nimport { IPepDraggableItem, PepDraggableItemPlaceholderType, PepDraggableItemsTitleType } from './draggable-items.model';\nimport { PepSizeType } from '@pepperi-addons/ngx-lib';\n@Component({\n selector: 'pep-draggable-items',\n templateUrl: './draggable-items.component.html',\n styleUrls: ['./draggable-items.component.scss', './draggable-items.component.theme.scss']\n})\nexport class PepDraggableItemsComponent implements OnInit, OnDestroy {\n @Input() containerId = 'draggable-container';\n @Input() showSearch = false;\n @Input() title = '';\n @Input() titleType: PepDraggableItemsTitleType = 'regular';\n @Input() titleSizeType: PepSizeType = 'md';\n @Input() itemPlaceholderType: PepDraggableItemPlaceholderType = 'weak';\n\n @Input() dropAreaIds = [];\n\n private _items: Array<IPepDraggableItem> = [];\n @Input()\n set items(value: Array<IPepDraggableItem>) {\n this._items = value;\n\n if (this.items?.length > 0) {\n this.searchControl.enable();\n } else {\n this.searchControl.disable();\n }\n }\n get items(): Array<IPepDraggableItem> {\n return this._items;\n }\n\n @Output() itemDragStarted: EventEmitter<CdkDragStart<IPepDraggableItem>> = new EventEmitter<CdkDragStart<IPepDraggableItem>>();\n @Output() itemDragEnded: EventEmitter<CdkDragEnd<IPepDraggableItem>> = new EventEmitter<CdkDragEnd<IPepDraggableItem>>();\n\n filteredItems$: Observable<any>;\n searchControl = new FormControl();\n numberItemsToShowSearch = 5;\n private readonly _destroyed: Subject<void>;\n\n constructor() {\n //\n this._destroyed = new Subject();\n }\n\n private filterItems(value: string): any[] {\n const filterValue = value.toLowerCase();\n return this.items.filter(\n (opt) =>\n opt.title &&\n opt.title.toLowerCase().includes(filterValue.toLowerCase())\n );\n }\n\n private changeCursorOnDragStart() {\n document.body.classList.add('inheritCursors');\n document.body.style.cursor = 'grabbing';\n }\n\n private changeCursorOnDragEnd() {\n document.body.classList.remove('inheritCursors');\n document.body.style.cursor = 'unset';\n }\n\n protected getDestroyer() {\n return takeUntil(this._destroyed);\n }\n\n ngOnInit(): void {\n // If there is no item disable the search.\n if (this.items.length === 0) {\n this.searchControl.disable();\n }\n\n // Filter the draggableItems by the search control.\n this.filteredItems$ = this.searchControl.valueChanges.pipe(\n this.getDestroyer(),\n startWith<any>(''),\n map((option) =>\n typeof option === 'string' ? option : option && option.value\n ),\n map((value) => (value ? this.filterItems(value) : this.items))\n );\n }\n\n ngOnDestroy(): void {\n this._destroyed.next();\n this._destroyed.complete();\n }\n\n onDragStart(event: CdkDragStart) {\n this.changeCursorOnDragStart();\n this.itemDragStarted.emit(event);\n }\n\n onDragEnd(event: CdkDragEnd) {\n this.changeCursorOnDragEnd();\n this.itemDragEnded.emit(event);\n }\n}\n","<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\" class=\"search-button\" sizeType=\"sm\" shrink=\"always\"\r\n [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n </div>\r\n\r\n <div class=\"draggable-items-overflow\" [ngClass]=\"{ 'add-padding': titleType === 'with-bottom-border'}\">\r\n <div class=\"draggable-items-wrapper\">\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>\r\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport { PepSearchModule } from '@pepperi-addons/ngx-lib/search';\n\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { PepDraggableItemsComponent } from './draggable-items.component';\nimport { DraggableItemComponent } from './draggable-item/draggable-item.component';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemMove,\n} from '@pepperi-addons/ngx-lib/icon';\n\n@NgModule({\n declarations: [\n PepDraggableItemsComponent,\n DraggableItemComponent\n ],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n PepNgxLibModule,\n PepButtonModule,\n PepIconModule,\n PepSearchModule,\n DragDropModule\n ],\n exports: [\n PepDraggableItemsComponent,\n DraggableItemComponent\n ],\n})\nexport class PepDraggableItemsModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([\n pepIconSystemMove,\n ]);\n }\n}\n","/\n Public API Surface of ngx-lib/draggable-items\n /\nexport from './draggable-item/draggable-item.component';\n\nexport * from './draggable-items.module';\nexport * from './draggable-items.model';\nexport * from './draggable-items.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["i2","i4.DraggableItemComponent","i1"],"mappings":"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"}
1	+ {"version":3,"file":"pepperi-addons-ngx-lib-draggable-items.mjs","sources":["../../../projects/ngx-lib/draggable-items/draggable-item/draggable-item.component.ts","../../../projects/ngx-lib/draggable-items/draggable-item/draggable-item.component.html","../../../projects/ngx-lib/draggable-items/draggable-items.component.ts","../../../projects/ngx-lib/draggable-items/draggable-items.component.html","../../../projects/ngx-lib/draggable-items/draggable-items.module.ts","../../../projects/ngx-lib/draggable-items/public-api.ts","../../../projects/ngx-lib/draggable-items/pepperi-addons-ngx-lib-draggable-items.ts"],"sourcesContent":["import { Component, EventEmitter, HostBinding, Input, OnInit, Output } from '@angular/core';\nimport { PepStyleType } from '@pepperi-addons/ngx-lib';\nimport { IPepMenuItemClickEvent, PepMenuItem } from '@pepperi-addons/ngx-lib/menu';\n\n@Component({\n selector: 'pep-draggable-item',\n templateUrl: './draggable-item.component.html',\n styleUrls: ['./draggable-item.component.scss']\n})\nexport class DraggableItemComponent implements OnInit {\n @Input() title = '';\n @Input() titlePrefix = '';\n @Input() titleClassNames = '';\n @Input() data: any;\n @Input() disabled = false;\n @Input() shadow = true;\n @Input() styleType: PepStyleType = 'regular';\n @Input() toggleContent = false;\n @Input() isToggleContentOpen = false;\n\n @Input() actionsMenu: Array<PepMenuItem> = null;\n @Input() menuStyleType: PepStyleType = 'regular';\n\n @Output() contentToggle: EventEmitter<boolean> = new EventEmitter();\n @Output() actionsMenuItemClick: EventEmitter<IPepMenuItemClickEvent> = new EventEmitter<IPepMenuItemClickEvent>();\n\n constructor() {\n //\n }\n\n ngOnInit(): void {\n //\n }\n\n onToggleContent() {\n if (this.toggleContent) {\n this.isToggleContentOpen = !this.isToggleContentOpen;\n this.contentToggle.emit(this.isToggleContentOpen);\n }\n }\n\n onActionsMenuItemClick(item: IPepMenuItemClickEvent) {\n this.actionsMenuItemClick.emit(item);\n }\n}\n","<div class=\"pep-draggable-item-container\" class=\"{{ styleType }}\" \n [ngClass]=\"{ 'shadow': shadow, 'disable': disabled, 'toggle-content': toggleContent, 'toggle-content-open': isToggleContentOpen }\"\n >\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div class=\"item-title-container\" [ngClass]=\"{ 'shadow': shadow }\" (click)=\"onToggleContent();\">\n <span ngIf=\"titlePrefix !== ''\" class=\"body-sm ellipsis item-title\">{{titlePrefix}}</span>\n <span ngIf=\"title !== ''\" class=\"body-sm bold ellipsis item-title {{titleClassNames}}\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <pep-menu ngIf=\"actionsMenu\" sizeType=\"xs\" [styleType]=\"menuStyleType\" [items]=\"actionsMenu\" (menuItemClick)=\"onActionsMenuItemClick($event)\"></pep-menu>\n <ng-content ngIf=\"!actionsMenu\" select=\"[pep-actions]\"></ng-content>\n </div>\n <div ngIf=\"toggleContent && isToggleContentOpen\" class=\"toggle-container\">\n <ng-content select=\"[pep-toggle-content]\"></ng-content>\n </div>\n</div>","import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';\nimport { Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { Observable, Subject } from 'rxjs';\nimport { map, startWith } from 'rxjs/operators';\nimport { IPepDraggableItem, PepDraggableItemPlaceholderType, PepDraggableItemsTitleType } from './draggable-items.model';\nimport { PepSizeType, BaseDestroyerDirective } from '@pepperi-addons/ngx-lib';\n\n@Component({\n selector: 'pep-draggable-items',\n templateUrl: './draggable-items.component.html',\n styleUrls: ['./draggable-items.component.scss', './draggable-items.component.theme.scss']\n})\nexport class PepDraggableItemsComponent extends BaseDestroyerDirective implements OnInit {\n @Input() containerId = 'draggable-container';\n @Input() showSearch = false;\n @Input() title = '';\n @Input() titleType: PepDraggableItemsTitleType = 'regular';\n @Input() titleSizeType: PepSizeType = 'md';\n @Input() itemPlaceholderType: PepDraggableItemPlaceholderType = 'weak';\n\n @Input() dropAreaIds = [];\n\n private _items: Array<IPepDraggableItem> = [];\n @Input()\n set items(value: Array<IPepDraggableItem>) {\n this._items = value;\n\n if (this.items?.length > 0) {\n this.searchControl.enable();\n } else {\n this.searchControl.disable();\n }\n }\n get items(): Array<IPepDraggableItem> {\n return this._items;\n }\n\n @Output() itemDragStarted: EventEmitter<CdkDragStart<IPepDraggableItem>> = new EventEmitter<CdkDragStart<IPepDraggableItem>>();\n @Output() itemDragEnded: EventEmitter<CdkDragEnd<IPepDraggableItem>> = new EventEmitter<CdkDragEnd<IPepDraggableItem>>();\n\n filteredItems$: Observable<any>;\n searchControl = new FormControl();\n numberItemsToShowSearch = 5;\n \n constructor() {\n super();\n }\n\n private filterItems(value: string): any[] {\n const filterValue = value.toLowerCase();\n return this.items.filter(\n (opt) =>\n opt.title &&\n opt.title.toLowerCase().includes(filterValue.toLowerCase())\n );\n }\n\n private changeCursorOnDragStart() {\n document.body.classList.add('inheritCursors');\n document.body.style.cursor = 'grabbing';\n }\n\n private changeCursorOnDragEnd() {\n document.body.classList.remove('inheritCursors');\n document.body.style.cursor = 'unset';\n }\n\n ngOnInit(): void {\n // If there is no item disable the search.\n if (this.items.length === 0) {\n this.searchControl.disable();\n }\n\n // Filter the draggableItems by the search control.\n this.filteredItems$ = this.searchControl.valueChanges.pipe(\n this.getDestroyer(),\n startWith<any>(''),\n map((option) =>\n typeof option === 'string' ? option : option && option.value\n ),\n map((value) => (value ? this.filterItems(value) : this.items))\n );\n }\n\n onDragStart(event: CdkDragStart) {\n this.changeCursorOnDragStart();\n this.itemDragStarted.emit(event);\n }\n\n onDragEnd(event: CdkDragEnd) {\n this.changeCursorOnDragEnd();\n this.itemDragEnded.emit(event);\n }\n}\n","<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\" class=\"search-button\" sizeType=\"sm\" shrink=\"always\"\r\n [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n </div>\r\n\r\n <div class=\"draggable-items-overflow\" [ngClass]=\"{ 'add-padding': titleType === 'with-bottom-border'}\">\r\n <div class=\"draggable-items-wrapper\">\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>\r\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport { PepSearchModule } from '@pepperi-addons/ngx-lib/search';\nimport { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';\n\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { PepDraggableItemsComponent } from './draggable-items.component';\nimport { DraggableItemComponent } from './draggable-item/draggable-item.component';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemMove,\n} from '@pepperi-addons/ngx-lib/icon';\n\n@NgModule({\n declarations: [\n PepDraggableItemsComponent,\n DraggableItemComponent\n ],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n PepNgxLibModule,\n PepButtonModule,\n PepIconModule,\n PepMenuModule,\n PepSearchModule,\n DragDropModule\n ],\n exports: [\n PepDraggableItemsComponent,\n DraggableItemComponent\n ],\n})\nexport class PepDraggableItemsModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([\n pepIconSystemMove,\n ]);\n }\n}\n","/\n Public API Surface of ngx-lib/draggable-items\n /\nexport from './draggable-item/draggable-item.component';\n\nexport * from './draggable-items.module';\nexport * from './draggable-items.model';\nexport * from './draggable-items.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["i2","i3","i4.DraggableItemComponent","i1"],"mappings":"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"}

package/fesm2020/pepperi-addons-ngx-lib-field-title.mjs CHANGED Viewed

@@ -22,13 +22,14 @@ class PepFieldTitleComponent {
         this.showTitle = true;
         this.inputLength = 0;
         this.fontBodyType = 'xs';
+        this.multiLine = false;
     }
 }
-PepFieldTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepFieldTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepFieldTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepFieldTitleComponent, selector: "pep-field-title", inputs: { label: "label", mandatory: "mandatory", disabled: "disabled", maxFieldCharacters: "maxFieldCharacters", hint: "hint", xAlignment: "xAlignment", showTitle: "showTitle", inputLength: "inputLength", fontBodyType: "fontBodyType" }, ngImport: i0, 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-{{fontBodyType}}\">\n            {{ label }}\n        </mat-label>\n        <!-- For the grid template () -->\n        <span *ngIf=\"!showTitle\"></span>\n    </ng-template>\n    <ng-template #hintTemplate>\n        <span class=\"body-{{fontBodyType}} color-dimmed\">\n            <ng-container *ngIf=\"hint?.length > 0 then hintTextTemplate else maxCharactersTemplate\"></ng-container>\n            <ng-template #hintTextTemplate>\n                &nbsp;{{ hint }}\n            </ng-template>\n            <ng-template #maxCharactersTemplate>\n                <ng-container *ngIf=\"maxFieldCharacters > 0\">\n                    &nbsp;{{ inputLength || 0 }}/{{ maxFieldCharacters }}\n                </ng-container>\n            </ng-template>\n        </span>\n    </ng-template>\n</div>", styles: [":host{display:grid;width:inherit}.mat-form-title ::ng-deep .mat-icon{height:100%!important}\n", ""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepFieldTitleComponent, decorators: [{
+PepFieldTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepFieldTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PepFieldTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepFieldTitleComponent, selector: "pep-field-title", inputs: { label: "label", mandatory: "mandatory", disabled: "disabled", maxFieldCharacters: "maxFieldCharacters", hint: "hint", xAlignment: "xAlignment", showTitle: "showTitle", inputLength: "inputLength", fontBodyType: "fontBodyType", multiLine: "multiLine" }, ngImport: i0, template: "<div class=\"mat-form-title\" [ngClass]=\"{disable: disabled, 'multi-line': multiLine}\" [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-{{fontBodyType}}\">\n            {{ label }}\n        </mat-label>\n        <!-- For the grid template () -->\n        <span *ngIf=\"!showTitle\"></span>\n    </ng-template>\n    <ng-template #hintTemplate>\n        <span class=\"body-{{fontBodyType}} color-dimmed\">\n            <ng-container *ngIf=\"hint?.length > 0 then hintTextTemplate else maxCharactersTemplate\"></ng-container>\n            <ng-template #hintTextTemplate>\n                &nbsp;{{ hint }}\n            </ng-template>\n            <ng-template #maxCharactersTemplate>\n                <ng-container *ngIf=\"maxFieldCharacters > 0\">\n                    &nbsp;{{ inputLength || 0 }}/{{ maxFieldCharacters }}\n                </ng-container>\n            </ng-template>\n        </span>\n    </ng-template>\n</div>", styles: [":host{display:grid;width:inherit}.mat-form-title:not(.multi-line) ::ng-deep .mat-icon,.mat-form-title:not(.multi-line) ::ng-deep .mat-mdc-icon,.mat-mdc-form-title:not(.multi-line) ::ng-deep .mat-icon,.mat-mdc-form-title:not(.multi-line) ::ng-deep .mat-mdc-icon{height:100%!important}\n", ""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: 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-{{fontBodyType}}\">\n            {{ label }}\n        </mat-label>\n        <!-- For the grid template () -->\n        <span *ngIf=\"!showTitle\"></span>\n    </ng-template>\n    <ng-template #hintTemplate>\n        <span class=\"body-{{fontBodyType}} color-dimmed\">\n            <ng-container *ngIf=\"hint?.length > 0 then hintTextTemplate else maxCharactersTemplate\"></ng-container>\n            <ng-template #hintTextTemplate>\n                &nbsp;{{ hint }}\n            </ng-template>\n            <ng-template #maxCharactersTemplate>\n                <ng-container *ngIf=\"maxFieldCharacters > 0\">\n                    &nbsp;{{ inputLength || 0 }}/{{ maxFieldCharacters }}\n                </ng-container>\n            </ng-template>\n        </span>\n    </ng-template>\n</div>", styles: [":host{display:grid;width:inherit}.mat-form-title ::ng-deep .mat-icon{height:100%!important}\n"] }]
+            args: [{ selector: 'pep-field-title', template: "<div class=\"mat-form-title\" [ngClass]=\"{disable: disabled, 'multi-line': multiLine}\" [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-{{fontBodyType}}\">\n            {{ label }}\n        </mat-label>\n        <!-- For the grid template () -->\n        <span *ngIf=\"!showTitle\"></span>\n    </ng-template>\n    <ng-template #hintTemplate>\n        <span class=\"body-{{fontBodyType}} color-dimmed\">\n            <ng-container *ngIf=\"hint?.length > 0 then hintTextTemplate else maxCharactersTemplate\"></ng-container>\n            <ng-template #hintTextTemplate>\n                &nbsp;{{ hint }}\n            </ng-template>\n            <ng-template #maxCharactersTemplate>\n                <ng-container *ngIf=\"maxFieldCharacters > 0\">\n                    &nbsp;{{ inputLength || 0 }}/{{ maxFieldCharacters }}\n                </ng-container>\n            </ng-template>\n        </span>\n    </ng-template>\n</div>", styles: [":host{display:grid;width:inherit}.mat-form-title:not(.multi-line) ::ng-deep .mat-icon,.mat-form-title:not(.multi-line) ::ng-deep .mat-mdc-icon,.mat-mdc-form-title:not(.multi-line) ::ng-deep .mat-icon,.mat-mdc-form-title:not(.multi-line) ::ng-deep .mat-mdc-icon{height:100%!important}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], mandatory: [{
@@ -47,6 +48,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }], fontBodyType: [{
                 type: Input
+            }], multiLine: [{
+                type: Input
             }] } });
 class PepFieldTitleModule {
@@ -55,22 +58,22 @@ class PepFieldTitleModule {
         this.pepIconRegistry.registerIcons([pepIconSystemMust]);
     }
 }
-PepFieldTitleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepFieldTitleModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-PepFieldTitleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepFieldTitleModule, declarations: [PepFieldTitleComponent], imports: [CommonModule,
+PepFieldTitleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepFieldTitleModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+PepFieldTitleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PepFieldTitleModule, declarations: [PepFieldTitleComponent], imports: [CommonModule,
         // Material modules,
         MatCommonModule,
         MatIconModule,
         MatFormFieldModule,
         // ngx-lib modules
         PepIconModule], exports: [PepFieldTitleComponent] });
-PepFieldTitleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepFieldTitleModule, imports: [CommonModule,
+PepFieldTitleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepFieldTitleModule, imports: [CommonModule,
         // Material modules,
         MatCommonModule,
         MatIconModule,
         MatFormFieldModule,
         // ngx-lib modules
         PepIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepFieldTitleModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepFieldTitleModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2020/pepperi-addons-ngx-lib-field-title.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pepperi-addons-ngx-lib-field-title.mjs","sources":["../../../projects/ngx-lib/field-title/field-title.component.ts","../../../projects/ngx-lib/field-title/field-title.component.html","../../../projects/ngx-lib/field-title/field-title.module.ts","../../../projects/ngx-lib/field-title/public-api.ts","../../../projects/ngx-lib/field-title/pepperi-addons-ngx-lib-field-title.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\nimport {\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n} from '@pepperi-addons/ngx-lib';\n\n@Component({\n selector: 'pep-field-title',\n templateUrl: './field-title.component.html',\n styleUrls: ['./field-title.component.scss', './field-title.component.theme.scss'],\n})\nexport class PepFieldTitleComponent {\n @Input() label = '';\n @Input() mandatory = false;\n @Input() disabled = false;\n @Input() maxFieldCharacters = 0;\n @Input() hint = '';\n @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n\n @Input() showTitle = true;\n @Input() inputLength = 0;\n @Input() fontBodyType: '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' = 'xs';\n\n}\n","<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-{{fontBodyType}}\">\n {{ label }}\n </mat-label>\n <!-- For the grid template () -->\n <span ngIf=\"!showTitle\"></span>\n </ng-template>\n <ng-template #hintTemplate>\n <span class=\"body-{{fontBodyType}} color-dimmed\">\n <ng-container ngIf=\"hint?.length > 0 then hintTextTemplate else maxCharactersTemplate\"></ng-container>\n <ng-template #hintTextTemplate>\n  {{ hint }}\n </ng-template>\n <ng-template #maxCharactersTemplate>\n <ng-container ngIf=\"maxFieldCharacters > 0\">\n  {{ inputLength \|\| 0 }}/{{ maxFieldCharacters }}\n </ng-container>\n </ng-template>\n </span>\n </ng-template>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatFormFieldModule } from '@angular/material/form-field';\n\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemMust,\n} from '@pepperi-addons/ngx-lib/icon';\n\nimport { PepFieldTitleComponent } from './field-title.component';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules,\n MatCommonModule,\n MatIconModule,\n MatFormFieldModule,\n // ngx-lib modules\n PepIconModule,\n ],\n exports: [PepFieldTitleComponent],\n declarations: [PepFieldTitleComponent],\n})\nexport class PepFieldTitleModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([pepIconSystemMust]);\n }\n}\n","/\n * Public API Surface of ngx-lib/field-title\n /\nexport from './field-title.module';\nexport * from './field-title.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["i4","i1"],"mappings":";;;;;;;;;;;;;MAWa,sBAAsB,CAAA;AALnC,IAAA,WAAA,GAAA;QAMa,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;QACX,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;QAClB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;QACjB,IAAkB,CAAA,kBAAA,GAAG,CAAC,CAAC;QACvB,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;QACV,IAAU,CAAA,UAAA,GAA2B,4BAA4B,CAAC;QAElE,IAAS,CAAA,SAAA,GAAG,IAAI,CAAC;QACjB,IAAW,CAAA,WAAA,GAAG,CAAC,CAAC;QAChB,IAAY,CAAA,YAAA,GAAqD,IAAI,CAAC;~~AAElF~~,KAAA;;~~mHAZY~~,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,sBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~QAAA~~,EAAA,IAAA,EAAA,sBAAsB,~~qSCXnC,+6DAyCM~~,EAAA,MAAA,EAAA,CAAA,+~~FAAA~~,EAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,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,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;~~2FD9BO~~,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBALlC,SAAS;+BACI,iBAAiB,EAAA,QAAA,EAAA~~,+6DAAA~~,EAAA,MAAA,EAAA,CAAA,+~~FAAA~~,CAAA,EAAA,CAAA;8BAKlB,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,kBAAkB,EAAA,CAAA;sBAA1B,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBAEG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,YAAY,EAAA,CAAA;sBAApB,KAAK;;;~~MEOG~~,mBAAmB,CAAA;AAC5B,IAAA,WAAA,CAAoB,eAAgC,EAAA;QAAhC,IAAe,CAAA,eAAA,GAAf,eAAe,CAAiB;QAChD,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC;KAC3D;;~~gHAHQ~~,mBAAmB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAC,IAAA,CAAA,eAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;~~iHAAnB~~,mBAAmB,EAAA,YAAA,EAAA,CAFb,sBAAsB,CAAA,EAAA,OAAA,EAAA,CATjC,YAAY;;QAEZ,eAAe;QACf,aAAa;QACb,kBAAkB;;AAElB,QAAA,aAAa,aAEP,sBAAsB,CAAA,EAAA,CAAA,CAAA;AAGvB,mBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~QAAA~~,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,YAXxB,YAAY;;QAEZ,eAAe;QACf,aAAa;QACb,kBAAkB;;QAElB,aAAa,CAAA,EAAA,CAAA,CAAA;~~2FAKR~~,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAb/B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE;wBACL,YAAY;;wBAEZ,eAAe;wBACf,aAAa;wBACb,kBAAkB;;wBAElB,aAAa;AAChB,qBAAA;oBACD,OAAO,EAAE,CAAC,sBAAsB,CAAC;oBACjC,YAAY,EAAE,CAAC,sBAAsB,CAAC;AACzC,iBAAA,CAAA;;;AC3BD;;AAEG;;ACFH;;AAEG;;;;"}
1	+ {"version":3,"file":"pepperi-addons-ngx-lib-field-title.mjs","sources":["../../../projects/ngx-lib/field-title/field-title.component.ts","../../../projects/ngx-lib/field-title/field-title.component.html","../../../projects/ngx-lib/field-title/field-title.module.ts","../../../projects/ngx-lib/field-title/public-api.ts","../../../projects/ngx-lib/field-title/pepperi-addons-ngx-lib-field-title.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\nimport {\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n} from '@pepperi-addons/ngx-lib';\n\n@Component({\n selector: 'pep-field-title',\n templateUrl: './field-title.component.html',\n styleUrls: ['./field-title.component.scss', './field-title.component.theme.scss'],\n})\nexport class PepFieldTitleComponent {\n @Input() label = '';\n @Input() mandatory = false;\n @Input() disabled = false;\n @Input() maxFieldCharacters = 0;\n @Input() hint = '';\n @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n\n @Input() showTitle = true;\n @Input() inputLength = 0;\n @Input() fontBodyType: '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' = 'xs';\n @Input() multiLine = false;\n}\n","<div class=\"mat-form-title\" [ngClass]=\"{disable: disabled, 'multi-line': multiLine}\" [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-{{fontBodyType}}\">\n {{ label }}\n </mat-label>\n <!-- For the grid template () -->\n <span ngIf=\"!showTitle\"></span>\n </ng-template>\n <ng-template #hintTemplate>\n <span class=\"body-{{fontBodyType}} color-dimmed\">\n <ng-container ngIf=\"hint?.length > 0 then hintTextTemplate else maxCharactersTemplate\"></ng-container>\n <ng-template #hintTextTemplate>\n  {{ hint }}\n </ng-template>\n <ng-template #maxCharactersTemplate>\n <ng-container ngIf=\"maxFieldCharacters > 0\">\n  {{ inputLength \|\| 0 }}/{{ maxFieldCharacters }}\n </ng-container>\n </ng-template>\n </span>\n </ng-template>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatFormFieldModule } from '@angular/material/form-field';\n\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemMust,\n} from '@pepperi-addons/ngx-lib/icon';\n\nimport { PepFieldTitleComponent } from './field-title.component';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules,\n MatCommonModule,\n MatIconModule,\n MatFormFieldModule,\n // ngx-lib modules\n PepIconModule,\n ],\n exports: [PepFieldTitleComponent],\n declarations: [PepFieldTitleComponent],\n})\nexport class PepFieldTitleModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([pepIconSystemMust]);\n }\n}\n","/\n * Public API Surface of ngx-lib/field-title\n /\nexport from './field-title.module';\nexport * from './field-title.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["i4","i1"],"mappings":"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"}