@colijnit/corecomponents_v12 12.0.91 → 12.0.93

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -11011,6 +11011,80 @@
                 },] }
     ];
 
+    // The different view modes for content, e.g. list, grid, ..
+    exports.ContentViewMode = void 0;
+    (function (ContentViewMode) {
+        ContentViewMode[ContentViewMode["List"] = 0] = "List";
+        ContentViewMode[ContentViewMode["Grid"] = 1] = "Grid";
+        ContentViewMode[ContentViewMode["GridExpanded"] = 2] = "GridExpanded";
+        ContentViewMode[ContentViewMode["MasterDetail"] = 3] = "MasterDetail";
+        ContentViewMode[ContentViewMode["Timeline"] = 4] = "Timeline";
+        ContentViewMode[ContentViewMode["Tiles"] = 5] = "Tiles";
+    })(exports.ContentViewMode || (exports.ContentViewMode = {}));
+
+    var ViewModeButtonsComponent = /** @class */ (function () {
+        function ViewModeButtonsComponent(iconCacheService) {
+            this.iconCacheService = iconCacheService;
+            this.icons = exports.CoreComponentsIcon;
+            this.viewModes = exports.ContentViewMode;
+            this.showViewModes = [this.viewModes.List, this.viewModes.Grid, this.viewModes.Tiles];
+            this.viewModeChange = new i0.EventEmitter();
+        }
+        ViewModeButtonsComponent.prototype.showClass = function () {
+            return true;
+        };
+        Object.defineProperty(ViewModeButtonsComponent.prototype, "activeViewMode", {
+            get: function () {
+                return this._activeViewMode;
+            },
+            set: function (value) {
+                this._activeViewMode = value;
+                this.viewModeChange.emit(this._activeViewMode);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ViewModeButtonsComponent.prototype.ngOnInit = function () {
+            this.activeViewMode = this.showViewModes.includes(exports.ContentViewMode.List) ? exports.ContentViewMode.List : this.showViewModes[0];
+        };
+        return ViewModeButtonsComponent;
+    }());
+    ViewModeButtonsComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'co-view-mode-buttons',
+                    template: "\n    <co-button class=\"view-button white\"\n               *ngIf=\"showViewModes.includes(viewModes.Tiles)\"\n               [class.selected]=\"this.activeViewMode === viewModes.Tiles\"\n               [iconData]=\"iconCacheService.getIcon(icons.ListView)\"\n               [title]=\"'TILE_VIEW'\"\n               (click)=\"this.activeViewMode = viewModes.Tiles\"></co-button>\n    <co-button class=\"view-button white\"\n               *ngIf=\"showViewModes.includes(viewModes.List)\"\n               [class.selected]=\"this.activeViewMode === viewModes.List\"\n               [iconData]=\"iconCacheService.getIcon(icons.ThickLines)\"\n               [title]=\"'LIST_VIEW'\"\n               (click)=\"this.activeViewMode = viewModes.List\"></co-button>\n    <co-button class=\"view-button white\"\n               *ngIf=\"showViewModes.includes(viewModes.Grid)\"\n               [class.selected]=\"this.activeViewMode === viewModes.Grid\"\n               [iconData]=\"iconCacheService.getIcon(icons.ThinLines)\"\n               [title]=\"'GRID_VIEW'\"\n               (click)=\"this.activeViewMode = viewModes.Grid\"></co-button>\n  ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    ViewModeButtonsComponent.ctorParameters = function () { return [
+        { type: IconCacheService }
+    ]; };
+    ViewModeButtonsComponent.propDecorators = {
+        showViewModes: [{ type: i0.Input }],
+        viewModeChange: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-view-mode-buttons",] }]
+    };
+
+    var ViewModeButtonsModule = /** @class */ (function () {
+        function ViewModeButtonsModule() {
+        }
+        return ViewModeButtonsModule;
+    }());
+    ViewModeButtonsModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        ButtonModule,
+                    ],
+                    declarations: [
+                        ViewModeButtonsComponent
+                    ],
+                    exports: [
+                        ViewModeButtonsComponent
+                    ]
+                },] }
+    ];
+
     var FilterPipe = /** @class */ (function () {
         function FilterPipe() {
         }
@@ -11178,7 +11252,7 @@
     FilterItemComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-filter-item",
-                    template: "\n    <div class=\"co-filter-item-header\">\n      <co-collapsible\n        [headerTitle]=\"placeholder\"\n        [expandButtonLast]=\"true\"\n        [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"\n        [expanded]=\"expanded\"\n        [showButton]=\"showButton\"\n        [buttonText]=\"filterButtonLabel\"\n        (buttonClicked)=\"onButtonClicked()\"\n      >\n        <div class=\"co-filter-item-collapsable-content\">\n          <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\"\n               (keydown)=\"showButton=true\" (click)=\"showButton=true\">\n            <ng-content></ng-content>\n          </div>\n          <ng-template #collectionContent>\n            <div class=\"co-filter-item-collection-content\">\n              <co-input-text\n                *ngIf=\"collection?.length > 10 || minSearchCharsToLoadCollection\"\n                [placeholder]=\"searchPlaceholder\"\n                [model]=\"filterText\"\n                (modelChange)=\"applyFilter($event)\"\n              >\n              </co-input-text>\n              <div class=\"no-results\" *ngIf=\"filteredCollection?.length === 0\">\n                <span [textContent]=\"noResultsLabel\"></span>\n              </div>\n              <div class=\"co-filter-item-collection-results\">\n                <ng-container\n                  *ngFor=\"let option of filteredCollection; let index = index\">\n                  <div class=\"co-filter-item-collection-result-item\" *ngIf=\"index < limitTo || showAllResults\">\n                    <co-input-checkbox *ngIf=\"!singleSelect\"\n                                       [label]=\"option.description\"\n                                       [model]=\"option.checked\"\n                                       [clickableLabel]=\"false\"\n                                       (modelChange)=\"handleModelChange(option)\"\n                    ></co-input-checkbox>\n                    <co-input-radio-button *ngIf=\"singleSelect\"\n                                           [label]=\"option.description\"\n                                           [model]=\"option.checked\"\n                                           (modelChange)=\"handleModelChange(option)\"\n                    ></co-input-radio-button>\n                    <div class=\"co-filter-item-amount\" *ngIf=\"option.count\"\n                         [textContent]=\"option.count.toString() | append: ')' | prepend: '      ('\"\n                    ></div>\n                  </div>\n\n                </ng-container>\n              </div>\n              <div class=\"co-filter-show-more-or-less\" *ngIf=\"!showAllResults\">\n                <div class=\"co-filter-show-more clickable\"\n                     *ngIf=\"moreToShow()\">\n                  <a (click)=\"increaseLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"></co-icon>\n                    <span [textContent]=\"showMoreLabel\"></span>\n                  </a>\n                </div>\n                <div class=\"co-filter-show-less clickable\"\n                     *ngIf=\"lessToShow()\">\n                  <a (click)=\"setToInitialLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointUp)\"></co-icon>\n                    <span [textContent]=\"showLessLabel\"></span>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </div>\n      </co-collapsible>\n    </div>\n\n  ",
+                    template: "\n    <div class=\"co-filter-item-header\">\n      <co-collapsible\n        [headerTitle]=\"placeholder\"\n        [expandButtonLast]=\"true\"\n        [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"\n        [expanded]=\"expanded\"\n        [showButton]=\"showButton\"\n        [buttonText]=\"filterButtonLabel\"\n        (buttonClicked)=\"onButtonClicked()\"\n      >\n        <div class=\"co-filter-item-collapsable-content\">\n          <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\"\n               (keydown)=\"showButton=true\" (mousedown)=\"showButton=true\">\n            <ng-content></ng-content>\n          </div>\n          <ng-template #collectionContent>\n            <div class=\"co-filter-item-collection-content\">\n              <co-input-text\n                *ngIf=\"collection?.length > 10 || minSearchCharsToLoadCollection\"\n                [placeholder]=\"searchPlaceholder\"\n                [model]=\"filterText\"\n                (modelChange)=\"applyFilter($event)\"\n              >\n              </co-input-text>\n              <div class=\"no-results\" *ngIf=\"filteredCollection?.length === 0\">\n                <span [textContent]=\"noResultsLabel\"></span>\n              </div>\n              <div class=\"co-filter-item-collection-results\">\n                <ng-container\n                  *ngFor=\"let option of filteredCollection; let index = index\">\n                  <div class=\"co-filter-item-collection-result-item\" *ngIf=\"index < limitTo || showAllResults\">\n                    <co-input-checkbox *ngIf=\"!singleSelect\"\n                                       [label]=\"option.description\"\n                                       [model]=\"option.checked\"\n                                       [clickableLabel]=\"false\"\n                                       (modelChange)=\"handleModelChange(option)\"\n                    ></co-input-checkbox>\n                    <co-input-radio-button *ngIf=\"singleSelect\"\n                                           [label]=\"option.description\"\n                                           [model]=\"option.checked\"\n                                           (modelChange)=\"handleModelChange(option)\"\n                    ></co-input-radio-button>\n                    <div class=\"co-filter-item-amount\" *ngIf=\"option.count\"\n                         [textContent]=\"option.count.toString() | append: ')' | prepend: '      ('\"\n                    ></div>\n                  </div>\n\n                </ng-container>\n              </div>\n              <div class=\"co-filter-show-more-or-less\" *ngIf=\"!showAllResults\">\n                <div class=\"co-filter-show-more clickable\"\n                     *ngIf=\"moreToShow()\">\n                  <a (click)=\"increaseLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"></co-icon>\n                    <span [textContent]=\"showMoreLabel\"></span>\n                  </a>\n                </div>\n                <div class=\"co-filter-show-less clickable\"\n                     *ngIf=\"lessToShow()\">\n                  <a (click)=\"setToInitialLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointUp)\"></co-icon>\n                    <span [textContent]=\"showLessLabel\"></span>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </div>\n      </co-collapsible>\n    </div>\n\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -11625,6 +11699,30 @@
                 },] }
     ];
 
+    var FilterItemViewmodel = /** @class */ (function () {
+        function FilterItemViewmodel(code, description, checked, count, valueName) {
+            this.checked = false;
+            this.code = code;
+            this.description = description === null || description === void 0 ? void 0 : description.toString();
+            this.checked = checked;
+            this.count = count;
+            this.valueName = valueName;
+        }
+        return FilterItemViewmodel;
+    }());
+
+    var FilterViewmodel = /** @class */ (function () {
+        function FilterViewmodel(collection, fields) {
+            var _this = this;
+            this.filterItems = [];
+            collection.forEach(function (item) {
+                var _a, _b, _c;
+                _this.filterItems.push(new FilterItemViewmodel(item[fields.value], item[fields.text], (_a = item.checked) !== null && _a !== void 0 ? _a : false, (_b = item.count) !== null && _b !== void 0 ? _b : null, (_c = item.valueName) !== null && _c !== void 0 ? _c : null));
+            });
+        }
+        return FilterViewmodel;
+    }());
+
     /*
      * Public API Surface of corecomponents
      */
@@ -11676,8 +11774,10 @@
     exports.DropDownModule = DropDownModule;
     exports.FilterItemComponent = FilterItemComponent;
     exports.FilterItemModule = FilterItemModule;
+    exports.FilterItemViewmodel = FilterItemViewmodel;
     exports.FilterPipe = FilterPipe;
     exports.FilterPipeModule = FilterPipeModule;
+    exports.FilterViewmodel = FilterViewmodel;
     exports.FormComponent = FormComponent;
     exports.FormMasterService = FormMasterService;
     exports.FormModule = FormModule;
@@ -11737,6 +11837,8 @@
     exports.TextInputPopupComponent = TextInputPopupComponent;
     exports.TileComponent = TileComponent;
     exports.TileModule = TileModule;
+    exports.ViewModeButtonsComponent = ViewModeButtonsComponent;
+    exports.ViewModeButtonsModule = ViewModeButtonsModule;
     exports.showHideDialogAnimation = showHideDialogAnimation;
     exports["ɵa"] = RippleModule;
     exports["ɵb"] = MD_RIPPLE_GLOBAL_OPTIONS;