@porscheinformatik/clr-addons 11.0.1 → 11.1.0

package/bundles/clr-addons.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@clr/angular'), require('rxjs'), require('rxjs/operators'), require('@angular/router'), require('@angular/animations')) :
-    typeof define === 'function' && define.amd ? define('@porscheinformatik/clr-addons', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@clr/angular', 'rxjs', 'rxjs/operators', '@angular/router', '@angular/animations'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.porscheinformatik = global.porscheinformatik || {}, global.porscheinformatik["clr-addons"] = {}), global.ng.core, global.ng.common, global.ng.forms, global["@clr/angular"], global.rxjs, global.rxjs.operators, global.ng.router, global.ng.animations));
-})(this, (function (exports, i0, common, forms, angular, rxjs, operators, router, animations) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@clr/angular'), require('rxjs'), require('rxjs/operators'), require('@angular/router'), require('@angular/animations'), require('@cds/core/icon'), require('@cds/core/icon/register.js')) :
+    typeof define === 'function' && define.amd ? define('@porscheinformatik/clr-addons', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@clr/angular', 'rxjs', 'rxjs/operators', '@angular/router', '@angular/animations', '@cds/core/icon', '@cds/core/icon/register.js'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.porscheinformatik = global.porscheinformatik || {}, global.porscheinformatik["clr-addons"] = {}), global.ng.core, global.ng.common, global.ng.forms, global["@clr/angular"], global.rxjs, global.rxjs.operators, global.ng.router, global.ng.animations, global.icon));
+})(this, (function (exports, i0, common, forms, angular, rxjs, operators, router, animations, icon) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -4088,6 +4088,241 @@
                 },] }
     ];
 
+    /**
+     * The abstract base class for all identifier types
+     */
+    var NodeId = /** @class */ (function () {
+        function NodeId() {
+        }
+        return NodeId;
+    }());
+    /**
+     * The data structure of the location bar component. A location bar node holds the data of
+     * a single node of the location bar. The type of the nodes id is generic and is determined
+     * by the user of the location bar component (e.g. can be a combined identifier). Each node
+     * can have a parent node (except the root node) and an array of children (except leaf nodes).
+     */
+    var LocationBarNode = /** @class */ (function () {
+        /**
+         * @param id The generic identifier of the node
+         * @param label The label to visualize the node
+         * @param selectable Indicator whether the node is selectable
+         * @param preSelected Indicator whether the node is pre-selected
+         */
+        function LocationBarNode(id, label, selectable, preSelected) {
+            if (selectable === void 0) { selectable = true; }
+            if (preSelected === void 0) { preSelected = false; }
+            this.id = id;
+            this.label = label;
+            this.selectable = selectable;
+            this.preSelected = preSelected;
+        }
+        /**
+         * Returns the children of this node. If the children has not been determined so far, null will
+         * be returned. If this node does not have any children, an empty array will be returned.
+         */
+        LocationBarNode.prototype.getChildren = function () {
+            return this.children;
+        };
+        /**
+         * Sets the children for this node
+         * @param children The children to be set for this node
+         * @return This node instance to support a fluent API
+         */
+        LocationBarNode.prototype.setChildren = function (children) {
+            this.children = children || [];
+        };
+        /**
+         * Sets the new selected child
+         * @param selectedChild The child to be selected
+         */
+        LocationBarNode.prototype.setSelectedChild = function (selectedChild) {
+            if (this.selectedChild && !selectedChild) {
+                this.selectedChild.setSelectedChild(null);
+            }
+            this.selectedChild = selectedChild;
+        };
+        /**
+         * @returns The currently selected child
+         */
+        LocationBarNode.prototype.getSelectedChild = function () {
+            return this.selectedChild;
+        };
+        /**
+         * @param other The other instance to check for equality
+         */
+        LocationBarNode.prototype.equals = function (other) {
+            return this.id.equals(other.id);
+        };
+        return LocationBarNode;
+    }());
+
+    icon.ClarityIcons.addIcons(icon.organizationIcon);
+    var LocationBarComponent = /** @class */ (function () {
+        function LocationBarComponent() {
+            this.root$ = new rxjs.ReplaySubject();
+            this.iconShape = 'organization';
+            this.iconTitle = '';
+            this.selectionChanged = new i0.EventEmitter();
+        }
+        Object.defineProperty(LocationBarComponent.prototype, "roots", {
+            set: function (roots) {
+                var internalRoot = new LocationBarNode(null, null, false);
+                internalRoot.setChildren(roots);
+                if (roots.length === 1) {
+                    internalRoot.setSelectedChild(roots[0]);
+                }
+                this.root$.next(internalRoot);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        LocationBarComponent.prototype.onSelectionChanged = function (selection) {
+            this.selectionChanged.emit(selection);
+        };
+        return LocationBarComponent;
+    }());
+    LocationBarComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'clr-location-bar',
+                    template: "<cds-icon *ngIf=\"iconShape\" [attr.shape]=\"iconShape\" [title]=\"iconTitle\"></cds-icon>\n<clr-location-bar-node (selectionChanged)=\"onSelectionChanged($event)\" [parentNode]=\"root$ | async\">\n</clr-location-bar-node>\n"
+                },] }
+    ];
+    LocationBarComponent.propDecorators = {
+        iconShape: [{ type: i0.Input }],
+        iconTitle: [{ type: i0.Input }],
+        roots: [{ type: i0.Input }],
+        selectionChanged: [{ type: i0.Output }]
+    };
+
+    var CONTENT_PROVIDER = new i0.InjectionToken('CONTENT_PROVIDER');
+    /**
+     * Interface denoting the contract between the location bar component and
+     * its users. The content provider offers callback methods for the location bar
+     * component to gather the content to be displayed.
+     */
+    var LocationBarContentProvider = /** @class */ (function () {
+        function LocationBarContentProvider() {
+        }
+        return LocationBarContentProvider;
+    }());
+
+    icon.ClarityIcons.addIcons(icon.treeViewIcon, icon.angleIcon);
+    /**
+     * Component which renders a node of the location bar.
+     */
+    var LocationBarNodeComponent = /** @class */ (function () {
+        function LocationBarNodeComponent(contentProvider) {
+            this.contentProvider = contentProvider;
+            /**
+             * Emits selection changes
+             */
+            this.selectionChanged = new i0.EventEmitter();
+            /**
+             * The selectable nodes
+             */
+            this.selectableChilds = [];
+        }
+        Object.defineProperty(LocationBarNodeComponent.prototype, "parentNode", {
+            get: function () {
+                return this._parentNode;
+            },
+            set: function (parentNode) {
+                var _this = this;
+                this._parentNode = parentNode;
+                if (this._parentNode) {
+                    var children$ = this._parentNode.getChildren() ? rxjs.of(this._parentNode.getChildren()) : this.getLazyChildren();
+                    children$.toPromise().then(function (nodes) { return _this.prepareChildren(nodes || []); });
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        LocationBarNodeComponent.prototype.getLazyChildren = function () {
+            return this.contentProvider ? this.contentProvider.getLazyChildren(this._parentNode) : rxjs.of([]);
+        };
+        LocationBarNodeComponent.prototype.prepareChildren = function (nodes) {
+            var e_1, _a;
+            this._parentNode.setChildren(nodes);
+            /* when no node is selected search within the children for the first child to be pre-selected */
+            if (!this._parentNode.getSelectedChild()) {
+                try {
+                    for (var nodes_1 = __values(nodes), nodes_1_1 = nodes_1.next(); !nodes_1_1.done; nodes_1_1 = nodes_1.next()) {
+                        var node = nodes_1_1.value;
+                        if (node.preSelected) {
+                            this._parentNode.setSelectedChild(node);
+                            node.preSelected = false;
+                            break;
+                        }
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (nodes_1_1 && !nodes_1_1.done && (_a = nodes_1.return)) _a.call(nodes_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+            }
+            this.selectableChilds = nodes.filter(function (n) { return n.selectable; });
+        };
+        /**
+         * Listens for selection changes of child components and re-emits the selection event.
+         * @param selection The changed selection of child components
+         */
+        LocationBarNodeComponent.prototype.onSelectionChanged = function (selection) {
+            selection.unshift(this._parentNode.getSelectedChild().id);
+            this.selectionChanged.emit(selection);
+        };
+        /**
+         * Selects the given node
+         * node
+         * @param selectedNode The selected child node.
+         */
+        LocationBarNodeComponent.prototype.selectNode = function (selectedNode) {
+            if (selectedNode) {
+                selectedNode.setSelectedChild(null);
+                this._parentNode.setSelectedChild(selectedNode);
+                this.notifySelectionChanged(selectedNode);
+            }
+        };
+        /**
+         * Method called internally to emit the selection event
+         * @param selectedNode The node which has been selected
+         */
+        LocationBarNodeComponent.prototype.notifySelectionChanged = function (selectedNode) {
+            this.selectionChanged.emit([selectedNode.id]);
+        };
+        return LocationBarNodeComponent;
+    }());
+    LocationBarNodeComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'clr-location-bar-node',
+                    template: "<ng-container *ngIf=\"parentNode\">\n  <ng-content *ngIf=\"parentNode.getChildren()?.length > 0\"></ng-content>\n\n  <ng-container\n    *ngIf=\"\n      (selectableChilds.length > 0 && !parentNode.getSelectedChild()) || selectableChilds.length > 1;\n      else singleSelected\n    \"\n  >\n    <clr-dropdown>\n      <button class=\"btn btn-link btn-sm\" (blur)=\"focus = false\" (focus)=\"focus = true\" clrDropdownTrigger>\n        <ng-container *ngIf=\"parentNode.getSelectedChild() as node; else unselected\">\n          <span [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\" title=\"{{ node.label }}\">{{\n            node.label\n          }}</span>\n          <cds-icon shape=\"angle\" direction=\"down\" size=\"xs\" class=\"caret-icon\"></cds-icon>\n        </ng-container>\n        <ng-template #unselected>\n          <cds-icon class=\"unselected\" size=\"18\" [attr.solid]=\"focus\" shape=\"tree-view\"></cds-icon>&nbsp;...\n        </ng-template>\n      </button>\n      <clr-dropdown-menu [clrPosition]=\"'bottom-left'\" *clrIfOpen>\n        <button\n          *ngFor=\"let item of selectableChilds\"\n          type=\"button\"\n          clrDropdownItem\n          class=\"text-truncate\"\n          [class.selected-child]=\"item.id === parentNode.getSelectedChild()?.id\"\n          (click)=\"selectNode(item)\"\n          title=\"{{ item.label }}\"\n        >\n          {{ item.label }}\n        </button>\n      </clr-dropdown-menu>\n    </clr-dropdown>\n  </ng-container>\n\n  <ng-template #singleSelected>\n    <ng-container *ngIf=\"parentNode.getSelectedChild()\">\n      <ng-container *ngIf=\"parentNode.getSelectedChild().selectable; else unselectable\">\n        <button\n          class=\"btn btn-link btn-sm\"\n          (click)=\"selectNode(parentNode.getSelectedChild())\"\n          [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n          title=\"{{ parentNode.getSelectedChild().label }}\"\n        >\n          {{ parentNode.getSelectedChild().label }}\n        </button>\n      </ng-container>\n      <ng-template #unselectable>\n        <span\n          class=\"unselectable-node\"\n          [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n          title=\"{{ parentNode.getSelectedChild().label }}\"\n        >\n          {{ parentNode.getSelectedChild().label }}\n        </span>\n      </ng-template>\n    </ng-container>\n  </ng-template>\n\n  <clr-location-bar-node\n    *ngIf=\"parentNode.getSelectedChild() && parentNode.getChildren().length > 0\"\n    [parentNode]=\"parentNode.getSelectedChild()\"\n    (selectionChanged)=\"onSelectionChanged($event)\"\n  >\n    <span>/</span>\n  </clr-location-bar-node>\n</ng-container>\n",
+                    host: { '[class.location-bar-node]': 'true' }
+                },] }
+    ];
+    LocationBarNodeComponent.ctorParameters = function () { return [
+        { type: LocationBarContentProvider, decorators: [{ type: i0.Inject, args: [CONTENT_PROVIDER,] }, { type: i0.Optional }] }
+    ]; };
+    LocationBarNodeComponent.propDecorators = {
+        selectionChanged: [{ type: i0.Output }],
+        parentNode: [{ type: i0.Input }]
+    };
+
+    var ClrLocationBarModule = /** @class */ (function () {
+        function ClrLocationBarModule() {
+        }
+        return ClrLocationBarModule;
+    }());
+    ClrLocationBarModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [LocationBarComponent, LocationBarNodeComponent],
+                    imports: [common.CommonModule, angular.ClrIconModule, angular.ClrDropdownModule],
+                    exports: [LocationBarComponent],
+                },] }
+    ];
+
     /*
      * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
      * This software is released under MIT license.
@@ -4125,6 +4360,7 @@
                         ClrHistoryModule,
                         ClrAutocompleteOffModule,
                         ClrBrandAvatarModule,
+                        ClrLocationBarModule,
                     ],
                 },] }
     ];
@@ -4669,7 +4905,7 @@
      */
 
     /*
-     * Copyright (c) 2018-2021 Porsche Informatik. All Rights Reserved.
+     * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
      * This software is released under MIT license.
      * The full license information can be found in LICENSE in the root directory of this project.
      */
@@ -4693,6 +4929,7 @@
     exports.BusinessCustomersCommercialShape = BusinessCustomersCommercialShape;
     exports.BusinessCustomersPrivateShape = BusinessCustomersPrivateShape;
     exports.CLR_BLANK_OPTION = CLR_BLANK_OPTION;
+    exports.CONTENT_PROVIDER = CONTENT_PROVIDER;
     exports.CaliforniaServiceShape = CaliforniaServiceShape;
     exports.CaliforniaSpecialistShape = CaliforniaSpecialistShape;
     exports.CarPickupServiceShape = CarPickupServiceShape;
@@ -4734,6 +4971,7 @@
     exports.ClrHistoryService = ClrHistoryService;
     exports.ClrLetterAvatar = ClrLetterAvatar;
     exports.ClrLetterAvatarModule = ClrLetterAvatarModule;
+    exports.ClrLocationBarModule = ClrLocationBarModule;
     exports.ClrMainNavGroup = ClrMainNavGroup;
     exports.ClrMainNavGroupItem = ClrMainNavGroupItem;
     exports.ClrMainNavGroupModule = ClrMainNavGroupModule;
@@ -4799,10 +5037,13 @@
     exports.HybridShape = HybridShape;
     exports.LoadingVolumeShape = LoadingVolumeShape;
     exports.LocateShape = LocateShape;
+    exports.LocationBarContentProvider = LocationBarContentProvider;
+    exports.LocationBarNode = LocationBarNode;
     exports.NewCarCommercialShape = NewCarCommercialShape;
     exports.NewCarPrivateShape = NewCarPrivateShape;
     exports.NewCarUtilityVehicleShape = NewCarUtilityVehicleShape;
     exports.NightServiceShape = NightServiceShape;
+    exports.NodeId = NodeId;
     exports.OffersShape = OffersShape;
     exports.OnCallDutyShape = OnCallDutyShape;
     exports.OpenSatShape = OpenSatShape;
@@ -4853,6 +5094,8 @@
     exports["ɵg"] = ClrAbstractFormComponent;
     exports["ɵh"] = ClrAutocompleteOffModule;
     exports["ɵi"] = ClrAutocompleteOff;
+    exports["ɵj"] = LocationBarComponent;
+    exports["ɵk"] = LocationBarNodeComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });