@festo-ui/angular 3.0.0-pre-20211222.2 → 3.0.0-pre-20220117.1

package/bundles/festo-ui-angular.umd.js

@@ -1259,12 +1259,17 @@
     var TabPaneComponent = /** @class */ (function () {
         function TabPaneComponent() {
             this.tabPaneId = "tab-panel-content-" + ++TabPaneComponent.nextId;
+            this.changesSubject = new rxjs.Subject();
+            this.changes$ = this.changesSubject.asObservable();
         }
+        TabPaneComponent.prototype.ngOnChanges = function () {
+            this.changesSubject.next(true);
+        };
         return TabPaneComponent;
     }());
     TabPaneComponent.nextId = 0;
     TabPaneComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: TabPaneComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TabPaneComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: TabPaneComponent, selector: "fng-tab-pane", inputs: { id: "id", name: "name", icon: "icon", active: "active", isVisible: "isVisible" }, ngImport: i0__namespace, template: "<div role=\"tabpanel\" [id]=\"tabPaneId\" [attr.aria-labelledby]=\"tabId\" [class.fng-show]=\"isVisible\" [class.fng-hide]=\"!isVisible\">\n  <ng-content></ng-content>\n</div>\n", styles: [".fng-show{display:block}.fng-hide{display:none}\n"] });
+    TabPaneComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: TabPaneComponent, selector: "fng-tab-pane", inputs: { id: "id", name: "name", icon: "icon", active: "active", isVisible: "isVisible" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div role=\"tabpanel\" [id]=\"tabPaneId\" [attr.aria-labelledby]=\"tabId\" [class.fng-show]=\"isVisible\" [class.fng-hide]=\"!isVisible\">\n  <ng-content></ng-content>\n</div>\n", styles: [".fng-show{display:block}.fng-hide{display:none}\n"] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: TabPaneComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1300,6 +1305,7 @@
             this.tabs = [];
             this.useCompactDensity = true;
             this.activeTab = null;
+            this.complete = new rxjs.Subject();
             this.injectedWindow = this.document.defaultView;
         }
         TabsComponent.prototype.ngAfterContentInit = function () {
@@ -1341,6 +1347,11 @@
             if (this.elemScrollArea != null) {
                 this.resizeObserver.observe(this.elemScrollArea);
             }
+            this.handleTabPaneChanges();
+        };
+        TabsComponent.prototype.ngOnDestroy = function () {
+            this.complete.next(true);
+            this.complete.unsubscribe();
         };
         TabsComponent.prototype.showTabPane = function (id) {
             var _a;
@@ -1391,6 +1402,7 @@
         };
         TabsComponent.prototype.initTabs = function () {
             var _this = this;
+            this.tabs = [];
             this.panes.map(function (pane, i) {
                 pane.tabId = _this.componentId + '-tab-' + i;
                 var tab = {
@@ -1402,6 +1414,7 @@
                 _this.tabs.push(tab);
             });
             this.initActiveTab();
+            this.cd.detectChanges();
         };
         TabsComponent.prototype.initActiveTab = function () {
             var activeTab = this.tabs.find(function (tab) { return !!tab.active; });
@@ -1413,6 +1426,16 @@
                 this.activeTab = activeTab;
             }
         };
+        TabsComponent.prototype.handleTabPaneChanges = function () {
+            var _this = this;
+            // first subscribe to any changes in tab pane, so that the tabs in this view wiil be updated
+            this.panes.forEach(function (pane) {
+                pane.changes$.pipe(operators.takeUntil(_this.complete)).subscribe(function () {
+                    // on changes in a tab pane, we init the tabs again
+                    _this.initTabs();
+                });
+            });
+        };
         TabsComponent.prototype.scrollTo = function (scrollX) {
             var currentScrollX = this.getScrollPosition();
             var safeScrollX = this.clampScrollValue(scrollX);
@@ -4975,16 +4998,25 @@
             this.onDateChange(false, false);
         };
         TimePickerDropdownComponent.prototype.onHourChange = function (event) {
+            var _a;
+            var max = +event.target.max;
+            var min = +event.target.min;
             var hour = +event.target.value;
-            this.date.setHours(hour);
+            (_a = this.date) === null || _a === void 0 ? void 0 : _a.setHours(hour > max ? max : hour < min ? min : hour);
         };
         TimePickerDropdownComponent.prototype.onMinuteChange = function (event) {
+            var _a;
+            var max = +event.target.max;
+            var min = +event.target.min;
             var minute = +event.target.value;
-            this.date.setMinutes(minute);
+            (_a = this.date) === null || _a === void 0 ? void 0 : _a.setMinutes(minute > max ? max : minute < min ? min : minute);
         };
         TimePickerDropdownComponent.prototype.onSecondChange = function (event) {
+            var _a;
+            var max = +event.target.max;
+            var min = +event.target.min;
             var seconds = +event.target.value;
-            this.date.setSeconds(seconds);
+            (_a = this.date) === null || _a === void 0 ? void 0 : _a.setSeconds(seconds > max ? max : seconds < min ? min : seconds);
         };
         TimePickerDropdownComponent.prototype.onDateChange = function (close, reset) {
             if (this.date != null) {
@@ -4995,7 +5027,7 @@
         return TimePickerDropdownComponent;
     }());
     TimePickerDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: TimePickerDropdownComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TimePickerDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: TimePickerDropdownComponent, selector: "fng-time-picker-dropdown", inputs: { date: "date", showSeconds: "showSeconds", timeFormat: "timeFormat" }, outputs: { dateChange: "dateChange" }, host: { listeners: { "document:keydown": "hide($event)" } }, viewQueries: [{ propertyName: "hoursInput", first: true, predicate: ["hoursInput"], descendants: true }], ngImport: i0__namespace, template: "<div class=\"fwe-timepicker\" [class.fwe-timepicker-am-pm]=\"timeFormat === '12'\">\n  <div class=\"fwe-timepicker-spinners\">\n    <div class=\"fwe-timepicker-spinners-hours\">\n      <button type=\"button\" aria-label=\"hour up\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onHourUp()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-expand\"></i>\n      </button>\n      <input #hoursInput\n        aria-label=\"hours value\"\n        class=\"fwe-timepicker-hide-spinners\"\n        type=\"number\"\n        min=\"0\"\n        tabindex=\"1\"\n        [value]=\"date | date: (timeFormat === '12' ? 'hh' : 'HH')\"\n        [attr.max]=\"timeFormat === '12' ? 12 : 23\"\n        (input)=\"onHourChange($event)\"\n      />\n      <button type=\"button\" aria-label=\"hour down\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onHourDown()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-collapse\"></i>\n      </button>\n    </div>\n    <div class=\"fwe-timepicker-spinners-minutes\">\n      <button type=\"button\" aria-label=\"minute up\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onMinuteUp()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-expand\"></i>\n      </button>\n      <input\n        aria-label=\"minutes value\"\n        class=\"fwe-timepicker-hide-spinners\"\n        type=\"number\"\n        min=\"0\"\n        max=\"59\"\n        tabindex=\"2\"\n        [value]=\"date | date:'mm'\"\n        (input)=\"onMinuteChange($event)\"\n      />\n      <button type=\"button\" aria-label=\"minute down\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onMinuteDown()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-collapse\"></i>\n      </button>\n    </div>\n    <div *ngIf=\"showSeconds\" class=\"fwe-timepicker-spinners-seconds\">\n      <button type=\"button\" aria-label=\"seconds up\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onSecondUp()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-expand\"></i>\n      </button>\n      <input\n        aria-label=\"seconds value\"\n        class=\"fwe-timepicker-hide-spinners\"\n        type=\"number\"\n        min=\"0\"\n        max=\"59\"\n        tabindex=\"3\"\n        [value]=\"date | date:'ss'\"\n        (input)=\"onSecondChange($event)\"\n      />\n      <button type=\"button\" aria-label=\"seconds down\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onSecondDown()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-collapse\"></i>\n      </button>\n    </div>\n  </div>\n  <span *ngIf=\"timeFormat === '12'\" class=\"fwe-badge fwe-badge-control\">\n    {{ date | date:'a' }}\n  </span>\n</div>\n", styles: [".border-hero{border-color:var(--fwe-hero)!important}.fwe-timepicker{width:100%;max-width:100%}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "date": i1__namespace.DatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+    TimePickerDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: TimePickerDropdownComponent, selector: "fng-time-picker-dropdown", inputs: { date: "date", showSeconds: "showSeconds", timeFormat: "timeFormat" }, outputs: { dateChange: "dateChange" }, host: { listeners: { "document:keydown": "hide($event)" } }, viewQueries: [{ propertyName: "hoursInput", first: true, predicate: ["hoursInput"], descendants: true }], ngImport: i0__namespace, template: "<div class=\"fwe-timepicker\" [class.fwe-timepicker-am-pm]=\"timeFormat === '12'\">\n  <div class=\"fwe-timepicker-spinners\">\n    <div class=\"fwe-timepicker-spinners-hours\">\n      <button type=\"button\" aria-label=\"hour up\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onHourUp()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-expand\"></i>\n      </button>\n      <input #hoursInput\n        aria-label=\"hours value\"\n        class=\"fwe-timepicker-hide-spinners\"\n        type=\"number\"\n        min=\"0\"\n        tabindex=\"1\"\n        step=\"1\"\n        [value]=\"date | date: (timeFormat === '12' ? 'hh' : 'HH')\"\n        [attr.max]=\"timeFormat === '12' ? 12 : 23\"\n        (input)=\"onHourChange($event)\"\n      />\n      <button type=\"button\" aria-label=\"hour down\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onHourDown()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-collapse\"></i>\n      </button>\n    </div>\n    <div class=\"fwe-timepicker-spinners-minutes\">\n      <button type=\"button\" aria-label=\"minute up\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onMinuteUp()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-expand\"></i>\n      </button>\n      <input\n        aria-label=\"minutes value\"\n        class=\"fwe-timepicker-hide-spinners\"\n        type=\"number\"\n        min=\"0\"\n        max=\"59\"\n        step=\"1\"\n        tabindex=\"2\"\n        [value]=\"date | date:'mm'\"\n        (input)=\"onMinuteChange($event)\"\n      />\n      <button type=\"button\" aria-label=\"minute down\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onMinuteDown()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-collapse\"></i>\n      </button>\n    </div>\n    <div *ngIf=\"showSeconds\" class=\"fwe-timepicker-spinners-seconds\">\n      <button type=\"button\" aria-label=\"seconds up\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onSecondUp()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-expand\"></i>\n      </button>\n      <input\n        aria-label=\"seconds value\"\n        class=\"fwe-timepicker-hide-spinners\"\n        type=\"number\"\n        min=\"0\"\n        max=\"59\"\n        step=\"1\"\n        tabindex=\"3\"\n        [value]=\"date | date:'ss'\"\n        (input)=\"onSecondChange($event)\"\n      />\n      <button type=\"button\" aria-label=\"seconds down\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onSecondDown()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-collapse\"></i>\n      </button>\n    </div>\n  </div>\n  <span *ngIf=\"timeFormat === '12'\" class=\"fwe-badge fwe-badge-control\">\n    {{ date | date:'a' }}\n  </span>\n</div>\n", styles: [".border-hero{border-color:var(--fwe-hero)!important}.fwe-timepicker{width:100%;max-width:100%}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "date": i1__namespace.DatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: TimePickerDropdownComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5066,6 +5098,22 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(TimePickerComponent.prototype, "timeFormat", {
+            get: function () {
+                var timeFormat = 'H:mm';
+                if (this.options != null) {
+                    if (this.options.showSeconds) {
+                        timeFormat += ':ss';
+                    }
+                    if (this.options.timeFormat === '12') {
+                        timeFormat = timeFormat.toLowerCase() + ' a';
+                    }
+                }
+                return timeFormat;
+            },
+            enumerable: false,
+            configurable: true
+        });
         TimePickerComponent.prototype.hide = function (event) {
             if (event.key === 'Escape') {
                 this.dispose();
@@ -5161,7 +5209,7 @@
                 useExisting: i0.forwardRef(function () { return TimePickerComponent; }),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "connector", first: true, predicate: ["connector"], descendants: true, static: true }], ngImport: i0__namespace, template: "<label #connector class=\"fng-time-picker fwe-input-text fwe-input-text-icon\" (click)=\"toggle($event)\">\n  <i class=\"fwe-icon fwe-icon-time-time\" [class.fwe-color-hero]=\"timePickerRef != null\" [class.fwe-color-control-disabled]=\"disabled\"></i>\n  <input\n    aria-label=\"picked time\"\n    type=\"text\"\n    readonly\n    [required]=\"required === true || null\"\n    [class.fwe-border-hero]=\"timePickerRef != null\"\n    [value]=\"value | date: (options?.timeFormat === '12' ? 'h:mm a' : 'H:mm')\"\n    [disabled]=\"disabled\"\n  />\n  <span class=\"fwe-input-text-label\"><ng-content></ng-content></span>\n  <span *ngIf=\"hint\" class=\"fwe-input-text-info\">{{ hint }}</span>\n  <span *ngIf=\"error\" class=\"fwe-input-text-invalid\">{{ error }}</span>\n</label>\n", styles: [".fng-first-child-fullwidth fng-time-picker-dropdown{width:100%}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "date": i1__namespace.DatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "connector", first: true, predicate: ["connector"], descendants: true, static: true }], ngImport: i0__namespace, template: "<label #connector class=\"fng-time-picker fwe-input-text fwe-input-text-icon\" (click)=\"toggle($event)\">\n  <i class=\"fwe-icon fwe-icon-time-time\" [class.fwe-color-hero]=\"timePickerRef != null\" [class.fwe-color-control-disabled]=\"disabled\"></i>\n  <input\n    aria-label=\"picked time\"\n    type=\"text\"\n    readonly\n    [required]=\"required === true || null\"\n    [class.fwe-border-hero]=\"timePickerRef != null\"\n    [value]=\"value | date: timeFormat\"\n    [disabled]=\"disabled\"\n  />\n  <span class=\"fwe-input-text-label\"><ng-content></ng-content></span>\n  <span *ngIf=\"hint\" class=\"fwe-input-text-info\">{{ hint }}</span>\n  <span *ngIf=\"error\" class=\"fwe-input-text-invalid\">{{ error }}</span>\n</label>\n", styles: [".fng-first-child-fullwidth fng-time-picker-dropdown{width:100%}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "date": i1__namespace.DatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: TimePickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{