@colijnit/corecomponents_v12 254.1.5 → 254.1.6

package/README.md

@@ -1,26 +1,23 @@
-# Corecomponentstest
+# Corecomponents
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.7.
-
-## Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.
 
 ## Code scaffolding
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+Run `ng generate component component-name --project corecomponents` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project corecomponents`.
+> Note: Don't forget to add `--project corecomponents` or else it will be added to the default project in your `angular.json` file. 
 
 ## Build
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+Run `ng build corecomponents` to build the project. The build artifacts will be stored in the `dist/` directory.
 
-## Running unit tests
+## Publishing
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+After building your library with `ng build corecomponents`, go to the dist folder `cd dist/corecomponents` and run `npm publish`.
 
-## Running end-to-end tests
+## Running unit tests
 
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+Run `ng test corecomponents` to execute the unit tests via [Karma](https://karma-runner.github.io).
 
 ## Further help
 

package/{dist/corecomponents/bundles → bundles}/colijnit-corecomponents_v12.umd.js

@@ -4237,9 +4237,9 @@
     ArticleTileComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-article-tile",
-                    template: "\n        <co-tile [image]=\"imageData\" [small]=\"isSmallModus\">\n            <ng-container tile-top-content>\n                <ng-content select=\"[tile-top-content]\"></ng-content>\n            </ng-container>\n            <ng-container tile-over-image>\n                <ng-content select=\"[over-image]\"></ng-content>\n            </ng-container>\n            <ng-container tile-bottom-content>\n                <div class=\"bottom-content-wrapper\">\n                    <div class=\"left-buttons\">\n                        <co-button class=\"card-button square white\" *ngIf=\"hasConfigureButton\" [iconData]=\"icons.getIcon(Icons.MagicWand)\"\n                                   [stopClick]=\"true\" [class.mini]=\"isSmallModus\"\n                                   (click)=\"configureButtonClick.emit($event)\"></co-button>\n                        <co-button class=\"card-button square white\" *ngIf=\"hasThreeDButton\" [iconData]=\"icons.getIcon(Icons.ThreeD)\"\n                                   [stopClick]=\"true\" [class.mini]=\"isSmallModus\"\n                                   (click)=\"threeDButtonClick.emit($event)\"></co-button>\n                    </div>\n                    <co-level-indicator *ngIf=\"!!level\" [model]=\"level\" [class.small]=\"isSmallModus\"></co-level-indicator>\n                    <co-button class=\"card-button\" *ngIf=\"hasCartButton\" [iconData]=\"icons.getIcon(Icons.AddToCartDrop)\"\n                               [stopClick]=\"true\" [class.mini]=\"isSmallModus\"\n                               (click)=\"cartButtonClick.emit($event)\"></co-button>\n                </div>\n            </ng-container>\n            <ng-container tile-extra-bottom-content>\n                <span *ngIf=\"!!description\" class=\"description\" [innerText]=\"description\"></span>\n                <span *ngIf=\"!!price\" class=\"price\" [innerText]=\"price | priceDisplay\"></span>\n                <ng-content select=\"[card-extra-content]\"></ng-content>\n            </ng-container>\n        </co-tile>\n    ",
+                    template: "\n        <co-tile [image]=\"imageData\" [small]=\"isSmallModus\">\n           <ng-container tile-top-content>\n                <ng-content select=\"[tile-top-content]\"></ng-content>\n            </ng-container>\n            <ng-container tile-over-image>\n                <ng-content select=\"[over-image]\"></ng-content>\n            </ng-container>\n\n            <ng-container tile-extra-bottom-content>\n                <div class=\"bottom-content-wrapper\">\n                    <div class=\"left-buttons\">\n                        <co-button class=\"card-button square white\" *ngIf=\"hasConfigureButton\" [iconData]=\"icons.getIcon(Icons.MagicWand)\"\n                                   [stopClick]=\"true\" [class.mini]=\"isSmallModus\"\n                                   (click)=\"configureButtonClick.emit($event)\"></co-button>\n                        <co-button class=\"card-button square white\" *ngIf=\"hasThreeDButton\" [iconData]=\"icons.getIcon(Icons.ThreeD)\"\n                                   [stopClick]=\"true\" [class.mini]=\"isSmallModus\"\n                                   (click)=\"threeDButtonClick.emit($event)\"></co-button>\n                    </div>\n                    <co-level-indicator *ngIf=\"!!level\" [model]=\"level\" [class.small]=\"isSmallModus\"></co-level-indicator>\n                    <co-button class=\"card-button\" *ngIf=\"hasCartButton\" [iconData]=\"icons.getIcon(Icons.AddToCartDrop)\"\n                               [stopClick]=\"true\" [class.mini]=\"isSmallModus\"\n                               (click)=\"cartButtonClick.emit($event)\"></co-button>\n                </div>\n            </ng-container>\n            <ng-container tile-bottom-content>\n                <span *ngIf=\"!!description\" class=\"description\" [innerText]=\"description\"></span>\n                <span *ngIf=\"!!price\" class=\"price\" [innerText]=\"price | priceDisplay\"></span>\n                <ng-content select=\"[card-extra-content]\"></ng-content>\n            </ng-container>\n        </co-tile>\n    ",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host .description{font-weight:bold}co-button.card-button{height:50px;width:50px;padding:0;border-radius:50%}co-button.card-button.square{border-radius:5px}co-button.card-button ::ng-deep co-icon{height:50px;width:50px}co-button.card-button.mini{transform:scale(1);height:20px;width:20px}co-button.card-button.mini ::ng-deep co-icon{height:20px;width:20px}.bottom-content-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;height:100%}.bottom-content-wrapper .left-buttons{display:flex;margin-right:auto;height:100%;align-items:center}.bottom-content-wrapper .left-buttons *{margin-right:5px}\n"]
+                    styles: [":host .description{font-weight:bold}co-button.card-button{height:50px;width:50px;padding:0;border-radius:50%;color:#fff}co-button.card-button.square{border-radius:5px}co-button.card-button ::ng-deep co-icon{height:50px;width:50px}co-button.card-button.mini{transform:scale(1);height:30px;width:30px;background:#3E7EFF}co-button.card-button.mini ::ng-deep co-icon{height:30px;width:30px}co-button.card-button.mini ::ng-deep co-icon svg{color:#fff}.bottom-content-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;height:100%}.bottom-content-wrapper .left-buttons{display:flex;margin-right:auto;height:100%;align-items:center}.bottom-content-wrapper .left-buttons *{margin-right:5px}\n"]
                 },] }
     ];
     ArticleTileComponent.ctorParameters = function () { return [
@@ -6339,7 +6339,7 @@
     InputTextComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-input-text',
-                    template: "\n    <div class=\"input-text-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n      <co-icon *ngIf=\"leftIcon || leftIconData\" class=\"input-text-left-icon\" [icon]=\"leftIcon\" [iconData]=\"leftIconData\"\n               (click)=\"handleLeftIconClick($event)\" (mousedown)=\"handleLeftIconMouseDown($event)\"\n               (mouseup)=\"handleLeftIconMouseUp($event)\"></co-icon>\n      <div *ngIf=\"leftIcon || leftIconData\" class=\"spacer left-icon\"></div>\n      <div class=\"input-wrapper\">\n        <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\"\n               [textContent]=\"placeholder\"></label>\n        <input #input\n               [class.input-input-hidden]=\"useContent\"\n               [ngClass]=\"align\"\n               [type]=\"digitsOnly ? 'number' : type\"\n               [pattern]=\"type === 'date' ? pattern : undefined\"\n               [ngModel]=\"model\"\n               [min]=\"(type === 'number' || type === 'date') && this.min ? this.min : undefined\"\n               [max]=\"(type === 'number' || type === 'date') && this.max ? this.max : undefined\"\n               [readonly]=\"readonly\"\n               [required]=\"required\"\n               (ngModelChange)=\"modelChange.emit($event)\"\n               (keydown)=\"digitsOnly ? excludeNonDigitChars($event) : true\"\n               (keyup)=\"keyUp.emit($event)\"\n               (focusin)=\"handleInputFocus($event)\"\n               (focusout)=\"handleBlur($event)\"\n        >\n        <ng-container *ngIf=\"useContent\">\n          <div class=\"input-content-wrapper\">\n            <ng-content></ng-content>\n          </div>\n        </ng-container>\n        <co-icon [class.show]=\"showClearButton && hasValue && !readonly\" class=\"input-text-clear-button\" [icon]=\"icons.CrossSkinny\" (click)=\"clearInput($event)\"></co-icon>\n        <div class=\"required-indicator\"></div>\n      </div>\n      <div *ngIf=\"rightIcon || rightIconData\" class=\"spacer right-icon\"></div>\n      <co-icon *ngIf=\"rightIcon || rightIconData\" class=\"input-text-right-icon\" [icon]=\"rightIcon\" [iconData]=\"rightIconData\"\n               (click)=\"handleRightIconClick($event)\" (mousedown)=\"handleRightIconMouseDown($event)\" (mouseup)=\"handleRightIconMouseUp($event)\"></co-icon>\n    </div>\n    <!--\n            <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n                               [committing]=\"committing\"\n                               [commitFinished]=\"commitFinished\"\n                               (commitClick)=\"commitClick($event)\"\n                               (cancelClick)=\"cancelClick($event)\"\n            >\n            </co-commit-buttons>\n    -->\n  ",
+                    template: "\n    <div class=\"input-text-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n      <co-icon *ngIf=\"leftIcon || leftIconData\" class=\"input-text-left-icon\" [icon]=\"leftIcon\" [iconData]=\"leftIconData\"\n               (click)=\"handleLeftIconClick($event)\" (mousedown)=\"handleLeftIconMouseDown($event)\"\n               (mouseup)=\"handleLeftIconMouseUp($event)\"></co-icon>\n      <div *ngIf=\"leftIcon || leftIconData\" class=\"spacer left-icon\"></div>\n      <div class=\"input-wrapper\">\n        <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\"\n               [textContent]=\"placeholder\"></label>\n        <input #input\n               [class.input-input-hidden]=\"useContent\"\n               [ngClass]=\"align\"\n               [type]=\"digitsOnly ? 'number' : type\"\n               [pattern]=\"type === 'date' ? pattern : undefined\"\n               [ngModel]=\"model\"\n               [min]=\"(type === 'number' || type === 'date') && this.min ? this.min : undefined\"\n               [max]=\"(type === 'number' || type === 'date') && this.max ? this.max : undefined\"\n               [readonly]=\"readonly\"\n               [required]=\"required\"\n               (ngModelChange)=\"modelChange.emit($event)\"\n               (keydown)=\"digitsOnly ? excludeNonDigitChars($event) : true\"\n               (keyup)=\"keyUp.emit($event)\"\n               (focusin)=\"handleInputFocus($event)\"\n               (focusout)=\"handleBlur($event)\"\n        >\n        <ng-container *ngIf=\"useContent\">\n          <div class=\"input-content-wrapper\">\n            <ng-content></ng-content>\n          </div>\n        </ng-container>\n        <co-icon [class.show]=\"showClearButton && hasValue && !readonly\" class=\"input-text-clear-button\"\n                 [icon]=\"icons.CrossSkinny\" (click)=\"clearInput($event)\"></co-icon>\n        <div class=\"required-indicator\"></div>\n      </div>\n      <div *ngIf=\"rightIcon || rightIconData\" class=\"spacer right-icon\"></div>\n      <co-icon *ngIf=\"rightIcon || rightIconData\" class=\"input-text-right-icon\" [icon]=\"rightIcon\"\n               [iconData]=\"rightIconData\"\n               (click)=\"handleRightIconClick($event)\" (mousedown)=\"handleRightIconMouseDown($event)\"\n               (mouseup)=\"handleRightIconMouseUp($event)\"></co-icon>\n    </div>\n    <!--\n            <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n                               [committing]=\"committing\"\n                               [commitFinished]=\"commitFinished\"\n                               (commitClick)=\"commitClick($event)\"\n                               (cancelClick)=\"cancelClick($event)\"\n            >\n            </co-commit-buttons>\n    -->\n  ",
                     providers: [
                         OverlayService, {
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
@@ -11370,6 +11370,9 @@
         // for single select
         ListOfValuesPopupComponent.prototype.selectOptionAndClosePopup = function () {
             var _this = this;
+            if (this.viewModels.length === 1) {
+                this.selectNextOption();
+            }
             if (!this.model && this.searchTerm) {
                 var wishModel = this.viewModelsMain.find(function (vmm) { return vmm.model[_this.displayField] === _this.searchTerm; });
                 if (wishModel) {
@@ -11457,7 +11460,7 @@
     ListOfValuesPopupComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-list-of-values-popup',
-                    template: "\n        <div class=\"lov-options\" [overlay]=\"parentForOverlay\" [inheritWidth]=\"true\" [ngClass]=\"customCssClass\" id=\"lov-popup\"\n             role=\"listbox\" [tabindex]=\"-1\"\n             (clickOutside)=\"closePopup.emit($event)\">\n            <co-input-search *ngIf=\"multiselect\"\n                             tabindex=\"-1\"\n                             [(model)]=\"searchTerm\"\n                             [placeholder]=\"searchPlaceholder\"\n                             (keydown)=\"handleInputKeyDown($event)\"\n                             (modelChange)=\"filterViewModels()\"></co-input-search>\n            <ul class=\"dropdown-list\" #dropDownList>\n                <li #lovItem *ngFor=\"let viewModel of viewModels; let index = index\" [class.selected]=\"viewModel === highLightModel\"\n                    (click)=\"selectViewModel(viewModel, !multiselect)\" role=\"option\">\n                    <ng-container *ngIf=\"!multiselect\">\n                        <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n                    </ng-container>\n                    <ng-container *ngIf=\"multiselect\">\n                        <co-input-checkbox [model]=\"viewModel.checked\" (modelChange)=\"selectViewModel(viewModel, false)\"></co-input-checkbox>\n                        <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n                    </ng-container>\n                </li>\n            </ul>\n        </div>\n    ",
+                    template: "\n    <div class=\"lov-options\" [overlay]=\"parentForOverlay\" [inheritWidth]=\"true\" [ngClass]=\"customCssClass\"\n         id=\"lov-popup\"\n         role=\"listbox\" [tabindex]=\"-1\"\n         (clickOutside)=\"closePopup.emit($event)\">\n      <co-input-search *ngIf=\"multiselect\"\n                       tabindex=\"-1\"\n                       [(model)]=\"searchTerm\"\n                       [placeholder]=\"searchPlaceholder\"\n                       (keydown)=\"handleInputKeyDown($event)\"\n                       (modelChange)=\"filterViewModels()\"></co-input-search>\n      <ul class=\"dropdown-list\" #dropDownList>\n        <li\n          #lovItem\n          *ngFor=\"let viewModel of viewModels; let index = index\"\n          [class.selected]=\"viewModel === highLightModel || viewModels.length === 1\"\n          (click)=\"selectViewModel(viewModel, !multiselect)\"\n          role=\"option\">\n          <ng-container *ngIf=\"!multiselect\">\n            <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n          </ng-container>\n          <ng-container *ngIf=\"multiselect\">\n            <co-input-checkbox [model]=\"viewModel.checked\"\n                               (modelChange)=\"selectViewModel(viewModel, false)\"></co-input-checkbox>\n            <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n          </ng-container>\n        </li>\n      </ul>\n    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -11817,6 +11820,75 @@
                 },] }
     ];
 
+    var ListOfIconsComponent = /** @class */ (function () {
+        function ListOfIconsComponent(icons) {
+            this.icons = icons;
+            this.Icon = exports.CoreComponentsIcon;
+            this.showMenu = false;
+            this._collection = [];
+        }
+        Object.defineProperty(ListOfIconsComponent.prototype, "collection", {
+            get: function () {
+                return this._collection;
+            },
+            set: function (value) {
+                this._collection = value || [];
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ListOfIconsComponent.prototype.showClass = function () {
+            return true;
+        };
+        ListOfIconsComponent.prototype.ngOnInit = function () {
+            console.log(this.collection);
+            this.activeItem = this.collection[0];
+        };
+        ListOfIconsComponent.prototype.toggleMenu = function () {
+            this.showMenu = !this.showMenu;
+        };
+        ListOfIconsComponent.prototype.selectItem = function (item) {
+            this.activeItem = item;
+            this.showMenu = false;
+        };
+        return ListOfIconsComponent;
+    }());
+    ListOfIconsComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'co-list-of-icons',
+                    template: "\n    <div class=\"icon-item active\" [class.menu-opened]=\"showMenu\" (click)=\"toggleMenu()\">\n      <co-icon [iconData]=\"activeItem.icon\"></co-icon>\n      <div class=\"label\">{{ activeItem.label }}</div>\n      <co-icon class=\"drop-arrow\" [iconData]=\"icons.getIcon(Icon.ArrowPointDown)\"></co-icon>\n    </div>\n    <div class=\"dropdown-menu\" *ngIf=\"showMenu\">\n      <div class=\"icon-item\" *ngFor=\"let item of collection\" (click)=\"selectItem(item)\" [class.active]=\"item === activeItem\">\n        <co-icon [iconData]=\"item.icon\"></co-icon>\n        <div class=\"label\">{{ item.label }}</div>\n      </div>\n    </div>\n  ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    ListOfIconsComponent.ctorParameters = function () { return [
+        { type: IconCacheService }
+    ]; };
+    ListOfIconsComponent.propDecorators = {
+        collection: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-list-of-icons',] }]
+    };
+
+    var ListOfIconsModule = /** @class */ (function () {
+        function ListOfIconsModule() {
+        }
+        return ListOfIconsModule;
+    }());
+    ListOfIconsModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        forms.FormsModule,
+                        IconModule
+                    ],
+                    declarations: [
+                        ListOfIconsComponent
+                    ],
+                    exports: [
+                        ListOfIconsComponent
+                    ]
+                },] }
+    ];
+
     var ResponsiveTextComponent = /** @class */ (function () {
         function ResponsiveTextComponent() {
         }
@@ -14093,6 +14165,8 @@
     exports.InputTextareaModule = InputTextareaModule;
     exports.LevelIndicatorComponent = LevelIndicatorComponent;
     exports.LevelIndicatorModule = LevelIndicatorModule;
+    exports.ListOfIconsComponent = ListOfIconsComponent;
+    exports.ListOfIconsModule = ListOfIconsModule;
     exports.ListOfValuesComponent = ListOfValuesComponent;
     exports.ListOfValuesModule = ListOfValuesModule;
     exports.ListOfValuesPopupComponent = ListOfValuesPopupComponent;