@energycap/components 0.27.4-ECAPID-402-MultiSelect-Component.20220125-1937 → 0.27.4-ECAPID-402-MultiSelect-Component.20220126-0812

package/bundles/energycap-components.umd.js

@@ -8558,27 +8558,47 @@
         currentTab: [{ type: i0.Input }]
     };
 
-    var MultiselectComponent = /** @class */ (function (_super) {
-        __extends(MultiselectComponent, _super);
-        function MultiselectComponent(validationMessageService, formGroupHelper) {
-            var _this = _super.call(this, validationMessageService, formGroupHelper) || this;
-            _this.validationMessageService = validationMessageService;
-            _this.formGroupHelper = formGroupHelper;
-            return _this;
+    var MultiselectComponent = /** @class */ (function () {
+        function MultiselectComponent() {
+            this.addButtonLabel = '';
+            this.tags = [];
         }
+        MultiselectComponent.prototype.ngOnInit = function () {
+        };
+        MultiselectComponent.prototype.ngAfterViewInit = function () {
+            if (this.combobox) {
+                this.combobox.hideToggleButton = true;
+            }
+            else {
+                console.warn('The multiselect requires an <ec-combobox> to be provided as transcluded content');
+            }
+        };
+        MultiselectComponent.prototype.addItem = function () {
+            var _a, _b, _c, _d;
+            console.log('adding item ', (_b = (_a = this.combobox) === null || _a === void 0 ? void 0 : _a.formModel) === null || _b === void 0 ? void 0 : _b.value);
+            if ((_d = (_c = this.combobox) === null || _c === void 0 ? void 0 : _c.formModel) === null || _d === void 0 ? void 0 : _d.value) {
+                this.tags.push({ label: this.combobox.formModel.value.label, type: 'info', isDismissable: true });
+                this.combobox.formModel.setValue(null);
+            }
+        };
+        MultiselectComponent.prototype.removeTag = function (tag) {
+            this.tags = this.tags.filter(function (t) { return t !== tag; });
+            //TODO: emit selectedChanged(tags)
+        };
         return MultiselectComponent;
-    }(FormControlBase));
+    }());
     MultiselectComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'ec-multiselect',
-                    template: "<p>multiselect works!</p>\r\n",
-                    styles: [""]
+                    template: "<div class=\"d-flex mb-2\">\r\n  <ng-content></ng-content>\r\n  <ec-button class=\"textbox-group-btn-right\" label=\"{{addButtonLabel}}\" type=\"secondary\" (clicked)=\"addItem()\"></ec-button>\r\n</div>\r\n<ec-tags\r\n  [tags]=\"tags\"\r\n  (tagClosed)=\"removeTag($event)\">\r\n</ec-tags>\r\n",
+                    styles: [":host{flex:1 1}"]
                 },] }
     ];
-    MultiselectComponent.ctorParameters = function () { return [
-        { type: ValidationMessageService },
-        { type: FormGroupHelper }
-    ]; };
+    MultiselectComponent.ctorParameters = function () { return []; };
+    MultiselectComponent.propDecorators = {
+        addButtonLabel: [{ type: i0.Input }],
+        combobox: [{ type: i0.ContentChild, args: [ComboboxComponent,] }]
+    };
 
     var ComponentsModule = /** @class */ (function () {
         function ComponentsModule() {
@@ -8613,6 +8633,7 @@
                         TableComponent,
                         SearchableTableComponent,
                         ComboboxComponent,
+                        MultiselectComponent,
                         MenuComponent,
                         PopupContainerDirective,
                         DropdownComponent,
@@ -8692,6 +8713,7 @@
                         TableComponent,
                         SearchableTableComponent,
                         ComboboxComponent,
+                        MultiselectComponent,
                         MenuComponent,
                         PopupContainerDirective,
                         DropdownComponent,
@@ -9966,9 +9988,9 @@
     exports.urlValidationPattern = urlValidationPattern;
     exports.validateFormGroupValuesAreUnique = validateFormGroupValuesAreUnique;
     exports.ɵa = ResizableTableDirective;
-    exports.ɵb = AvatarService;
-    exports.ɵc = TableDetailRowComponent;
-    exports.ɵd = MultiselectComponent;
+    exports.ɵb = MultiselectComponent;
+    exports.ɵc = AvatarService;
+    exports.ɵd = TableDetailRowComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });