@porscheinformatik/clr-addons 11.0.1 → 11.1.0

package/fesm2015/clr-addons.js

@@ -1,12 +1,14 @@
 import * as i0 from '@angular/core';
-import { Component, NgModule, Injectable, EventEmitter, Input, Output, Directive, Renderer2, ElementRef, ViewChild, ContentChildren, TemplateRef, ViewChildren, HostBinding, Injector, forwardRef, NgZone, ContentChild, ChangeDetectorRef, HostListener, ApplicationRef, ComponentFactoryResolver, Inject } from '@angular/core';
+import { Component, NgModule, Injectable, EventEmitter, Input, Output, Directive, Renderer2, ElementRef, ViewChild, ContentChildren, TemplateRef, ViewChildren, HostBinding, Injector, forwardRef, NgZone, ContentChild, ChangeDetectorRef, HostListener, InjectionToken, Inject, Optional, ApplicationRef, ComponentFactoryResolver } from '@angular/core';
 import { Location, CommonModule, DOCUMENT } from '@angular/common';
 import { FormsModule, NG_VALIDATORS, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ClarityModule, ClrFormsModule, ɵbc, ɵbi, ClrAlert, ClrAxis, ClrSide, ClrAlignment, ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService } from '@clr/angular';
-import { Subject, timer, asyncScheduler, interval, BehaviorSubject } from 'rxjs';
+import { ClarityModule, ClrFormsModule, ɵbc, ɵbi, ClrAlert, ClrAxis, ClrSide, ClrAlignment, ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService, ClrIconModule, ClrDropdownModule } from '@clr/angular';
+import { Subject, timer, asyncScheduler, interval, BehaviorSubject, ReplaySubject, of } from 'rxjs';
 import { takeUntil, observeOn, take } from 'rxjs/operators';
 import { RouterModule } from '@angular/router';
 import { trigger, transition, style, animate, state } from '@angular/animations';
+import { ClarityIcons, organizationIcon, treeViewIcon, angleIcon } from '@cds/core/icon';
+import '@cds/core/icon/register.js';
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -3526,6 +3528,207 @@ ClrBrandAvatarModule.decorators = [
             },] }
 ];
 
+/**
+ * The abstract base class for all identifier types
+ */
+class 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).
+ */
+class LocationBarNode {
+    /**
+     * @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
+     */
+    constructor(id, label, selectable = true, 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.
+     */
+    getChildren() {
+        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
+     */
+    setChildren(children) {
+        this.children = children || [];
+    }
+    /**
+     * Sets the new selected child
+     * @param selectedChild The child to be selected
+     */
+    setSelectedChild(selectedChild) {
+        if (this.selectedChild && !selectedChild) {
+            this.selectedChild.setSelectedChild(null);
+        }
+        this.selectedChild = selectedChild;
+    }
+    /**
+     * @returns The currently selected child
+     */
+    getSelectedChild() {
+        return this.selectedChild;
+    }
+    /**
+     * @param other The other instance to check for equality
+     */
+    equals(other) {
+        return this.id.equals(other.id);
+    }
+}
+
+ClarityIcons.addIcons(organizationIcon);
+class LocationBarComponent {
+    constructor() {
+        this.root$ = new ReplaySubject();
+        this.iconShape = 'organization';
+        this.iconTitle = '';
+        this.selectionChanged = new EventEmitter();
+    }
+    set roots(roots) {
+        const internalRoot = new LocationBarNode(null, null, false);
+        internalRoot.setChildren(roots);
+        if (roots.length === 1) {
+            internalRoot.setSelectedChild(roots[0]);
+        }
+        this.root$.next(internalRoot);
+    }
+    onSelectionChanged(selection) {
+        this.selectionChanged.emit(selection);
+    }
+}
+LocationBarComponent.decorators = [
+    { type: 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: Input }],
+    iconTitle: [{ type: Input }],
+    roots: [{ type: Input }],
+    selectionChanged: [{ type: Output }]
+};
+
+const CONTENT_PROVIDER = new 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.
+ */
+class LocationBarContentProvider {
+}
+
+ClarityIcons.addIcons(treeViewIcon, angleIcon);
+/**
+ * Component which renders a node of the location bar.
+ */
+class LocationBarNodeComponent {
+    constructor(contentProvider) {
+        this.contentProvider = contentProvider;
+        /**
+         * Emits selection changes
+         */
+        this.selectionChanged = new EventEmitter();
+        /**
+         * The selectable nodes
+         */
+        this.selectableChilds = [];
+    }
+    set parentNode(parentNode) {
+        this._parentNode = parentNode;
+        if (this._parentNode) {
+            const children$ = this._parentNode.getChildren() ? of(this._parentNode.getChildren()) : this.getLazyChildren();
+            children$.toPromise().then(nodes => this.prepareChildren(nodes || []));
+        }
+    }
+    get parentNode() {
+        return this._parentNode;
+    }
+    getLazyChildren() {
+        return this.contentProvider ? this.contentProvider.getLazyChildren(this._parentNode) : of([]);
+    }
+    prepareChildren(nodes) {
+        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()) {
+            for (const node of nodes) {
+                if (node.preSelected) {
+                    this._parentNode.setSelectedChild(node);
+                    node.preSelected = false;
+                    break;
+                }
+            }
+        }
+        this.selectableChilds = nodes.filter(n => n.selectable);
+    }
+    /**
+     * Listens for selection changes of child components and re-emits the selection event.
+     * @param selection The changed selection of child components
+     */
+    onSelectionChanged(selection) {
+        selection.unshift(this._parentNode.getSelectedChild().id);
+        this.selectionChanged.emit(selection);
+    }
+    /**
+     * Selects the given node
+     * node
+     * @param selectedNode The selected child node.
+     */
+    selectNode(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
+     */
+    notifySelectionChanged(selectedNode) {
+        this.selectionChanged.emit([selectedNode.id]);
+    }
+}
+LocationBarNodeComponent.decorators = [
+    { type: 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 = () => [
+    { type: LocationBarContentProvider, decorators: [{ type: Inject, args: [CONTENT_PROVIDER,] }, { type: Optional }] }
+];
+LocationBarNodeComponent.propDecorators = {
+    selectionChanged: [{ type: Output }],
+    parentNode: [{ type: Input }]
+};
+
+class ClrLocationBarModule {
+}
+ClrLocationBarModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [LocationBarComponent, LocationBarNodeComponent],
+                imports: [CommonModule, ClrIconModule, ClrDropdownModule],
+                exports: [LocationBarComponent],
+            },] }
+];
+
 /*
  * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
@@ -3560,6 +3763,7 @@ ClrAddonsModule.decorators = [
                     ClrHistoryModule,
                     ClrAutocompleteOffModule,
                     ClrBrandAvatarModule,
+                    ClrLocationBarModule,
                 ],
             },] }
 ];
@@ -4117,7 +4321,7 @@ const ClrAddonsIconShapes = {
  */
 
 /*
- * 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.
  */
@@ -4132,5 +4336,5 @@ const ClrAddonsIconShapes = {
  * Generated bundle index. Do not edit.
  */
 
-export { ACShape, AcceptedBrands, AccessoriesShape, AccessoryPartsShape, AudiBrandShape, AwardWinnerPremiumShape, BrochureShape, BusinessCustomersCommercialShape, BusinessCustomersPrivateShape, CLR_BLANK_OPTION, CaliforniaServiceShape, CaliforniaSpecialistShape, CarPickupServiceShape, CarWashShape, CertifiedRepairShape, CertifiedRetailerShape, ClrActiveNotification, ClrAddonsIconShapes, ClrAddonsModule, ClrBackButton, ClrBackButtonModule, ClrBrandAvatar, ClrBrandAvatarModule, ClrBreadcrumb, ClrBreadcrumbModule, ClrBreadcrumbService, ClrCollapseExpandSection, ClrCollapseExpandSectionModule, ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter, ClrContentPanelModule, ClrContentRef, ClrDataListPredefinedValidatorDirective, ClrDataListValidatorModule, ClrDataListValidators, ClrDateTimeContainer, ClrDateTimeModule, ClrDotPager, ClrDotPagerModule, ClrFlowBar, ClrFlowBarModule, ClrGenericQuickList, ClrGenericQuickListModule, ClrHistory, ClrHistoryModule, ClrHistoryPinned, ClrHistoryService, ClrLetterAvatar, ClrLetterAvatarModule, ClrMainNavGroup, ClrMainNavGroupItem, ClrMainNavGroupModule, ClrMaxNumeric, ClrMinNumeric, ClrMultilingualInput, ClrMultilingualInputValidators, ClrMultilingualModule, ClrMultilingualSelector, ClrMultilingualTextarea, ClrNotification, ClrNotificationModule, ClrNotificationRef, ClrNotificationService, ClrNumericField, ClrNumericFieldModule, ClrNumericFieldValidators, ClrPagedSearchResultList, ClrPagedSearchResultListModule, ClrPager, ClrPagerModule, ClrProgressSpinnerComponent, ClrProgressSpinnerModule, ClrQuickList, ClrQuickListModule, ClrRequiredAllMultilang, ClrRequiredOneMultilang, ClrSearchField, ClrSearchFieldModule, ClrTimeInput, ClrTreetable, ClrTreetableActionOverflow, ClrTreetableCell, ClrTreetableColumn, ClrTreetableModule, ClrTreetablePlaceholder, ClrTreetableRow, ClrViewEditSection, ClrViewEditSectionModule, ConfiguratorCommercialShape, ConfiguratorPrivateShape, ConsumptionShape, ContactDealerShape, CupraBrandShape, CustomersCenterShape, DWABrandShape, DieselShape, DriversAssistanceShape, EfficiencyShape, ElectricCarsServiceShape, ElectricCarsShape, ElectricityShape, EmissionShape, EnergyShape, EngineShape, ExpressServiceShape, ExteriorShape, FindACarShape, FleetServiceCommercialShape, FleetServicePrivateShape, GasCarsServiceShape, GasShape, HybridShape, LoadingVolumeShape, LocateShape, NewCarCommercialShape, NewCarPrivateShape, NewCarUtilityVehicleShape, NightServiceShape, OffersShape, OnCallDutyShape, OpenSatShape, PaintShopShape, PayloadShape, PerformanceShape, PetrolShape, PlusServiceShape, PorscheBrandShape, PowerShape, PowerTrainShape, PriceTypeSwitchShape, QualifiedWorkshopShape, RoadsideAssistanceShape, RouteShape, SeatAirShape, SeatBrandShape, SeatShape, ServiceBellShape, ServiceShape, SizeShape, SkodaBrandShape, StockLocatorCommercialShape, StockLocatorPrivateShape, TaxiDealerShape, TouaregServiceShape, TransmissionAutomaticShape, TransmissionManualShape, UsedCarCommercialShape, UsedCarPrivateShape, VWBrandShape, VWNBrandShape, VWShape, VehicleConversionShape, View360Shape, VirtualRealityShape, WheelToWheelShape, WindscreenWashShape, clrIconSVG, escapeHtml, escapeRegex, TreetableMainRenderer as ɵa, TreetableHeaderRenderer as ɵb, TreetableRowRenderer as ɵc, TreetableCellRenderer as ɵd, ClrAddOption as ɵe, ClrMultilingualAbstract as ɵf, ClrAbstractFormComponent as ɵg, ClrAutocompleteOffModule as ɵh, ClrAutocompleteOff as ɵi };
+export { ACShape, AcceptedBrands, AccessoriesShape, AccessoryPartsShape, AudiBrandShape, AwardWinnerPremiumShape, BrochureShape, BusinessCustomersCommercialShape, BusinessCustomersPrivateShape, CLR_BLANK_OPTION, CONTENT_PROVIDER, CaliforniaServiceShape, CaliforniaSpecialistShape, CarPickupServiceShape, CarWashShape, CertifiedRepairShape, CertifiedRetailerShape, ClrActiveNotification, ClrAddonsIconShapes, ClrAddonsModule, ClrBackButton, ClrBackButtonModule, ClrBrandAvatar, ClrBrandAvatarModule, ClrBreadcrumb, ClrBreadcrumbModule, ClrBreadcrumbService, ClrCollapseExpandSection, ClrCollapseExpandSectionModule, ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter, ClrContentPanelModule, ClrContentRef, ClrDataListPredefinedValidatorDirective, ClrDataListValidatorModule, ClrDataListValidators, ClrDateTimeContainer, ClrDateTimeModule, ClrDotPager, ClrDotPagerModule, ClrFlowBar, ClrFlowBarModule, ClrGenericQuickList, ClrGenericQuickListModule, ClrHistory, ClrHistoryModule, ClrHistoryPinned, ClrHistoryService, ClrLetterAvatar, ClrLetterAvatarModule, ClrLocationBarModule, ClrMainNavGroup, ClrMainNavGroupItem, ClrMainNavGroupModule, ClrMaxNumeric, ClrMinNumeric, ClrMultilingualInput, ClrMultilingualInputValidators, ClrMultilingualModule, ClrMultilingualSelector, ClrMultilingualTextarea, ClrNotification, ClrNotificationModule, ClrNotificationRef, ClrNotificationService, ClrNumericField, ClrNumericFieldModule, ClrNumericFieldValidators, ClrPagedSearchResultList, ClrPagedSearchResultListModule, ClrPager, ClrPagerModule, ClrProgressSpinnerComponent, ClrProgressSpinnerModule, ClrQuickList, ClrQuickListModule, ClrRequiredAllMultilang, ClrRequiredOneMultilang, ClrSearchField, ClrSearchFieldModule, ClrTimeInput, ClrTreetable, ClrTreetableActionOverflow, ClrTreetableCell, ClrTreetableColumn, ClrTreetableModule, ClrTreetablePlaceholder, ClrTreetableRow, ClrViewEditSection, ClrViewEditSectionModule, ConfiguratorCommercialShape, ConfiguratorPrivateShape, ConsumptionShape, ContactDealerShape, CupraBrandShape, CustomersCenterShape, DWABrandShape, DieselShape, DriversAssistanceShape, EfficiencyShape, ElectricCarsServiceShape, ElectricCarsShape, ElectricityShape, EmissionShape, EnergyShape, EngineShape, ExpressServiceShape, ExteriorShape, FindACarShape, FleetServiceCommercialShape, FleetServicePrivateShape, GasCarsServiceShape, GasShape, HybridShape, LoadingVolumeShape, LocateShape, LocationBarContentProvider, LocationBarNode, NewCarCommercialShape, NewCarPrivateShape, NewCarUtilityVehicleShape, NightServiceShape, NodeId, OffersShape, OnCallDutyShape, OpenSatShape, PaintShopShape, PayloadShape, PerformanceShape, PetrolShape, PlusServiceShape, PorscheBrandShape, PowerShape, PowerTrainShape, PriceTypeSwitchShape, QualifiedWorkshopShape, RoadsideAssistanceShape, RouteShape, SeatAirShape, SeatBrandShape, SeatShape, ServiceBellShape, ServiceShape, SizeShape, SkodaBrandShape, StockLocatorCommercialShape, StockLocatorPrivateShape, TaxiDealerShape, TouaregServiceShape, TransmissionAutomaticShape, TransmissionManualShape, UsedCarCommercialShape, UsedCarPrivateShape, VWBrandShape, VWNBrandShape, VWShape, VehicleConversionShape, View360Shape, VirtualRealityShape, WheelToWheelShape, WindscreenWashShape, clrIconSVG, escapeHtml, escapeRegex, TreetableMainRenderer as ɵa, TreetableHeaderRenderer as ɵb, TreetableRowRenderer as ɵc, TreetableCellRenderer as ɵd, ClrAddOption as ɵe, ClrMultilingualAbstract as ɵf, ClrAbstractFormComponent as ɵg, ClrAutocompleteOffModule as ɵh, ClrAutocompleteOff as ɵi, LocationBarComponent as ɵj, LocationBarNodeComponent as ɵk };
 //# sourceMappingURL=clr-addons.js.map