@sumaris-net/ngx-components 1.18.0-rc1 → 1.18.2

package/bundles/sumaris-net.ngx-components.umd.js

@@ -1345,6 +1345,33 @@
         ])
     ]);
 
+    /* ---
+     * Source: https://github.com/ionic-team/ionic-framework/blob/b0d53ca73619585671d8cf4dc24e47f826495a0a/core/src/utils/platform.ts
+     * --- */
+    var matchMedia = function (win, query) { return win.matchMedia(query).matches; };
+    var testUserAgent = function (win, expr) {
+        var userAgent = win.navigator.userAgent || win.navigator.vendor || window.opera;
+        return expr.test(userAgent);
+    };
+    var isWindows = function (win) { return testUserAgent(win, /windows/i); };
+    var isTouchUi = function (win) { return matchMedia(win, '(any-pointer:coarse)'); };
+    var isMobile = function (win) { return isCordova(window) || isAndroid(win) || isIOS(window) || (isTouchUi(win) && !isWindows(win)); };
+    var isIpad = function (win) {
+        // iOS 12 and below
+        if (testUserAgent(win, /iPad/i)) {
+            return true;
+        }
+        // iOS 13+
+        if (testUserAgent(win, /Macintosh/i) && isMobile(win)) {
+            return true;
+        }
+        return false;
+    };
+    var ɵ0$c = isIpad;
+    var isIOS = function (win) { return testUserAgent(win, /iPhone|iPod/i) || isIpad(win); };
+    var isAndroid = function (win) { return testUserAgent(win, /android|sink/i); };
+    var isCordova = function (win) { return !!(win['cordova'] || win['phonegap'] || win['PhoneGap']); };
+
     var MatAutocompleteConfigHolder = /** @class */ (function () {
         function MatAutocompleteConfigHolder(options) {
             this.options = options;
@@ -1404,7 +1431,7 @@
         return MatAutocompleteFieldUtils;
     }());
     var noop$8 = function (_) { };
-    var ɵ0$c = noop$8;
+    var ɵ0$b = noop$8;
     var MatAutocompleteField = /** @class */ (function () {
         function MatAutocompleteField(cd, formGroupDir) {
             this.cd = cd;
@@ -1424,7 +1451,7 @@
             this.showLoadingSpinner = true;
             this.debug = false;
             this.showSearchBar = true;
-            this.stickySearchBar = true;
+            this.stickySearchBar = false;
             this.clicked = new i0.EventEmitter();
             this.blurred = new i0.EventEmitter();
             this.focused = new i0.EventEmitter();
@@ -1581,7 +1608,7 @@
             }
             // Default values
             this.multiple = toBoolean(this.multiple, false);
-            this.mobile = toBoolean(this.mobile, this.multiple);
+            this.mobile = toBoolean(this.mobile, this.multiple || isMobile(window));
             this.displayAttributes = this.displayAttributes || ((_a = this.filter) === null || _a === void 0 ? void 0 : _a.attributes) || ['label', 'name'];
             this.displayWith = this.displayWith || MatAutocompleteFieldUtils.createDisplayFn(this.displayAttributes, this.multiple);
             this.equals = this.equals || MatAutocompleteFieldUtils.defaultEquals;
@@ -2143,7 +2170,7 @@
         { type: i0.Component, args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: 'mat-autocomplete-field',
-                    template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <!-- readonly -->\n      <mat-form-field *ngIf=\"_readonly; else writable\"\n                      [floatLabel]=\"floatLabel\"\n                      [title]=\"displayValue\"\n                      class=\"mat-form-field-disabled\">\n\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n\n        <input matInput hidden type=\"text\"\n               [placeholder]=\"placeholder\"\n               [formControl]=\"formControl\" readonly>\n        <ion-text>{{displayWith(value)}}</ion-text>\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n      </mat-form-field>\n\n      <ng-template #writable>\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [class.mat-form-field-disabled]=\"disabled\"\n                        [title]=\"displayValue\">\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Mobile or Mutliple (use <mat-select>) -->\n          <mat-select #matSelect\n                      *ngIf=\"mobile || multiple; else desktopTemplate\"\n                      [disableRipple]=\"true\"\n                      [placeholder]=\"placeholder\"\n                      [formControl]=\"formControl\"\n                      [tabindex]=\"_tabindex\"\n                      [panelClass]=\"classList\"\n                      [style.width]=\"panelWidth\"\n                      (focus)=\"filterMatSelectFocusEvent($event)\"\n                      (blur)=\"filterMatSelectBlurEvent($event)\"\n                      (keydown.escape)=\"keydownEscape.emit($event)\"\n                      (keyup.enter)=\"keyupEnter.emit($event)\"\n                      [compareWith]=\"equals\"\n                      [multiple]=\"multiple\"\n                      [typeaheadDebounceInterval]=\"debounceTime * 10\"\n                      [required]=\"required\">\n            <mat-select-trigger>{{ displayWith(value) }}</mat-select-trigger>\n\n            <!-- Search bar -->\n            <ion-searchbar *ngIf=\"showSearchBar\" #ionSearchbar\n                           class=\"mat-select-header\"\n                           [class.ion-searchbar-sticky]=\"stickySearchBar\"\n                           inputmode=\"search\"\n                           autocomplete=\"off\"\n                           animated=\"true\"\n                           showClearButton\n                           [debounce]=\"debounceTime\"\n                           (ionClear)=\"ionSearchBarClear($event)\"\n                           (ionInput)=\"ionSearchBarChanged($event)\"\n                           [placeholder]=\"'COMMON.BTN_SEARCH'|translate\"\n            ></ion-searchbar>\n\n            <!-- Headers -->\n            <ion-row class=\"mat-select-header column ion-no-padding\"\n                     [class.multiple]=\"multiple\"\n                     [class.ion-searchbar-sticky]=\"showSearchBar && stickySearchBar\">\n              <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n                <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n              </ion-col>\n            </ion-row>\n\n            <!-- None option -->\n            <mat-option *ngIf=\"!required && !multiple\" class=\"ion-no-padding\">\n              <ion-row class=\"ion-no-padding\">\n                <ion-col class=\"ion-no-padding\">\n                  <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <!-- Options -->\n            <ng-container *ngIf=\"$filteredItems | async as items; else loadingTemplate\">\n              <!-- No item option -->\n              <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                <ion-label><i>{{noResultMessage | translate}}</i></ion-label>\n              </mat-option>\n\n              <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                <ion-row [classList]=\"item.classList\">\n                  <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                           [size]=\"displayColumnSizes[i]\">\n                    <ion-text [innerHTML]=\"item | propertyGet: path | highlight: { search: formControl.value, withAccent: highlightAccent }\"></ion-text>\n                  </ion-col>\n                </ion-row>\n              </mat-option>\n\n              <!-- More item -->\n              <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initMatSelectInfiniteScroll()\"\n                          class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-container>\n\n            <!-- footer -->\n            <ion-row *ngIf=\"itemCount as count\"\n                     class=\"mat-autocomplete-footer ion-no-padding\">\n              <ion-col>\n                <ion-text class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n              </ion-col>\n            </ion-row>\n\n            <!-- Loading spinner -->\n            <ng-template #loadingTemplate>\n              <mat-option *ngIf=\"(displayValue | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                          class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-template>\n\n            <!-- Need more characters -->\n            <ng-template #waitMoreCharacterTemplate>\n              <mat-option class=\"ion-padding text-italic\" disabled>\n                <ion-label>\n                  {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}\n                </ion-label>\n              </mat-option>\n            </ng-template>\n          </mat-select>\n\n\n          <!--\n            NOTE :\n             - \"selectInputContent($event) || onFocus.emit($event)\" : call onFocus only when to the input is empty (nothing to select)\n          -->\n          <ng-template #desktopTemplate>\n            <input matInput #matInputText type=\"text\"\n                   [matAutocomplete]=\"autocomplete\"\n                   [matAutocompletePosition]=\"matAutocompletePosition\"\n                   [formControl]=\"formControl\"\n                   [placeholder]=\"placeholder\"\n                   [appAutofocus]=\"autofocus\"\n                   [tabindex]=\"_tabindex\"\n                   [required]=\"required\"\n                   (click)=\"clicked.emit($event)\"\n                   (focus)=\"filterInputTextFocusEvent($event)\"\n                   (blur)=\"filterInputTextBlurEvent($event)\"\n                   (keydown.escape)=\"keydownEscape.emit($event)\"\n                   (keyup.enter)=\"keyupEnter.emit($event)\"\n                   (keyup.arrowdown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\">\n\n            <!-- autocomplete -->\n            <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                              autoActiveFirstOption\n                              [displayWith]=\"displayWith\"\n                              [class]=\"classList\"\n                              [panelWidth]=\"panelWidth\">\n              <!-- Headers -->\n              <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n                <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n                  <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                </ion-col>\n              </ion-row>\n\n              <!-- Options -->\n              <ng-container *ngIf=\"$filteredItems | async as items; else loadingTemplate\">\n                <!-- No item option -->\n                <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                  <ion-label><i>{{noResultMessage | translate}}</i></ion-label>\n                </mat-option>\n\n                <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                  <ion-row [classList]=\"item.classList\">\n                    <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                             [size]=\"displayColumnSizes[i]\">\n                      <ion-text [innerHTML]=\"item | propertyGet: path | highlight: { search: formControl.value, withAccent: highlightAccent }\"></ion-text>\n                    </ion-col>\n                  </ion-row>\n                </mat-option>\n\n                <!-- More item -->\n                <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n                            class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-container>\n\n              <!-- Loading spinner -->\n              <ng-template #loadingTemplate>\n                <mat-option *ngIf=\"(displayValue | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                            class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-template>\n\n              <!-- Need more characters -->\n              <ng-template #waitMoreCharacterTemplate>\n                <mat-option class=\"ion-padding text-italic\" disabled>\n                  <ion-label>\n                    {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}\n                  </ion-label>\n                </mat-option>\n              </ng-template>\n\n              <!-- footer -->\n              <ion-row *ngIf=\"itemCount; let count\" class=\"mat-autocomplete-footer ion-no-padding\">\n                <ion-col>\n                  <ion-text class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n                </ion-col>\n              </ion-row>\n\n            </mat-autocomplete>\n\n          </ng-template>\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n\n          <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n          <ng-content select=\"[matError]\"></ng-content>\n\n        </mat-form-field>\n      </ng-template>\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n\n<ng-template #matSuffixTemplate>\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"desktop\"\n          (click)=\"dropButtonClick.emit($event)\"\n          [hidden]=\"disabled\">\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"clearable\"\n          (click)=\"clearValue($event)\"\n          [hidden]=\"disabled || !formControl.value\">\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #headers>\n  <ion-row class=\"mat-autocomplete-header ion-no-padding\">\n    <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n      <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n    </ion-col>\n  </ion-row>\n</ng-template>\n\n<ng-template #options>\n\n\n</ng-template>\n\n",
+                    template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <!-- readonly -->\n      <mat-form-field *ngIf=\"_readonly; else writable\"\n                      [floatLabel]=\"floatLabel\"\n                      [title]=\"displayValue\"\n                      class=\"mat-form-field-disabled\">\n\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n\n        <input matInput hidden type=\"text\"\n               [placeholder]=\"placeholder\"\n               [formControl]=\"formControl\" readonly>\n        <ion-text>{{displayWith(value)}}</ion-text>\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n      </mat-form-field>\n\n      <ng-template #writable>\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [class.mat-form-field-disabled]=\"disabled\"\n                        [title]=\"displayValue\">\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Mobile or Mutliple (use <mat-select>) -->\n          <mat-select #matSelect\n                      *ngIf=\"mobile || multiple; else desktopTemplate\"\n                      [disableRipple]=\"true\"\n                      [placeholder]=\"placeholder\"\n                      [formControl]=\"formControl\"\n                      [tabindex]=\"_tabindex\"\n                      [panelClass]=\"classList\"\n                      [style.width]=\"panelWidth\"\n                      (focus)=\"filterMatSelectFocusEvent($event)\"\n                      (blur)=\"filterMatSelectBlurEvent($event)\"\n                      (keydown.escape)=\"keydownEscape.emit($event)\"\n                      (keyup.enter)=\"keyupEnter.emit($event)\"\n                      [compareWith]=\"equals\"\n                      [multiple]=\"multiple\"\n                      [typeaheadDebounceInterval]=\"debounceTime * 10\"\n                      [required]=\"required\">\n            <mat-select-trigger>{{ displayWith(value) }}</mat-select-trigger>\n\n            <!-- Search bar -->\n            <ion-searchbar *ngIf=\"showSearchBar\" #ionSearchbar\n                           class=\"mat-select-header\"\n                           [class.ion-searchbar-sticky]=\"stickySearchBar\"\n                           inputmode=\"search\"\n                           autocomplete=\"off\"\n                           animated=\"true\"\n                           showClearButton\n                           [debounce]=\"debounceTime\"\n                           (ionClear)=\"ionSearchBarClear($event)\"\n                           (ionInput)=\"ionSearchBarChanged($event)\"\n                           [placeholder]=\"'COMMON.BTN_SEARCH'|translate\"\n            ></ion-searchbar>\n\n            <!-- Headers -->\n            <ion-row class=\"mat-select-header column ion-no-padding\"\n                     [class.multiple]=\"multiple\"\n                     [class.ion-searchbar-sticky]=\"showSearchBar && stickySearchBar\">\n              <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n                <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n              </ion-col>\n            </ion-row>\n\n            <!-- None option -->\n            <mat-option *ngIf=\"!required && !multiple && !clearable\" class=\"ion-no-padding\">\n              <ion-row class=\"ion-no-padding\">\n                <ion-col class=\"ion-no-padding\">\n                  <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <ng-container *ngIf=\"$filteredItems | async as items; else loadingTemplate\">\n              <!-- No item option -->\n              <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                <ion-label><i>{{noResultMessage | translate}}</i></ion-label>\n              </mat-option>\n\n              <!-- Options -->\n              <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                <ion-row [classList]=\"item.classList\">\n                  <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                           [size]=\"displayColumnSizes[i]\">\n                    <ion-text [innerHTML]=\"item | propertyGet: path\"></ion-text>\n                  </ion-col>\n                </ion-row>\n              </mat-option>\n\n              <!-- More item -->\n              <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initMatSelectInfiniteScroll()\"\n                          class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-container>\n\n            <!-- footer -->\n            <ion-row *ngIf=\"itemCount as count\"\n                     class=\"mat-autocomplete-footer ion-no-padding\">\n              <ion-col>\n                <ion-text class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n              </ion-col>\n            </ion-row>\n\n            <!-- Loading spinner -->\n            <ng-template #loadingTemplate>\n              <mat-option *ngIf=\"(displayValue | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                          class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-template>\n\n            <!-- Need more characters -->\n            <ng-template #waitMoreCharacterTemplate>\n              <mat-option class=\"ion-padding text-italic\" disabled>\n                <ion-label>\n                  {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}\n                </ion-label>\n              </mat-option>\n            </ng-template>\n          </mat-select>\n\n\n          <!--\n            NOTE :\n             - \"selectInputContent($event) || onFocus.emit($event)\" : call onFocus only when to the input is empty (nothing to select)\n          -->\n          <ng-template #desktopTemplate>\n            <input matInput #matInputText type=\"text\"\n                   [matAutocomplete]=\"autocomplete\"\n                   [matAutocompletePosition]=\"matAutocompletePosition\"\n                   [formControl]=\"formControl\"\n                   [placeholder]=\"placeholder\"\n                   [appAutofocus]=\"autofocus\"\n                   [tabindex]=\"_tabindex\"\n                   [required]=\"required\"\n                   (click)=\"clicked.emit($event)\"\n                   (focus)=\"filterInputTextFocusEvent($event)\"\n                   (blur)=\"filterInputTextBlurEvent($event)\"\n                   (keydown.escape)=\"keydownEscape.emit($event)\"\n                   (keyup.enter)=\"keyupEnter.emit($event)\"\n                   (keyup.arrowdown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\">\n\n            <!-- autocomplete -->\n            <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                              autoActiveFirstOption\n                              [displayWith]=\"displayWith\"\n                              [class]=\"classList\"\n                              [panelWidth]=\"panelWidth\">\n              <!-- Headers -->\n              <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n                <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n                  <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                </ion-col>\n              </ion-row>\n\n              <!-- Options -->\n              <ng-container *ngIf=\"$filteredItems | async as items; else loadingTemplate\">\n                <!-- No item option -->\n                <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                  <ion-label><i>{{noResultMessage | translate}}</i></ion-label>\n                </mat-option>\n\n                <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                  <ion-row [classList]=\"item.classList\">\n                    <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                             [size]=\"displayColumnSizes[i]\">\n                      <ion-text [innerHTML]=\"item | propertyGet: path | highlight: { search: formControl.value, withAccent: highlightAccent }\"></ion-text>\n                    </ion-col>\n                  </ion-row>\n                </mat-option>\n\n                <!-- More item -->\n                <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n                            class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-container>\n\n              <!-- Loading spinner -->\n              <ng-template #loadingTemplate>\n                <mat-option *ngIf=\"(displayValue | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                            class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-template>\n\n              <!-- Need more characters -->\n              <ng-template #waitMoreCharacterTemplate>\n                <mat-option class=\"ion-padding text-italic\" disabled>\n                  <ion-label>\n                    {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}\n                  </ion-label>\n                </mat-option>\n              </ng-template>\n\n              <!-- footer -->\n              <ion-row *ngIf=\"itemCount; let count\" class=\"mat-autocomplete-footer ion-no-padding\">\n                <ion-col>\n                  <ion-text class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n                </ion-col>\n              </ion-row>\n\n            </mat-autocomplete>\n\n          </ng-template>\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n\n          <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n          <ng-content select=\"[matError]\"></ng-content>\n\n        </mat-form-field>\n      </ng-template>\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n\n<ng-template #matSuffixTemplate>\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"desktop\"\n          (click)=\"dropButtonClick.emit($event)\"\n          [hidden]=\"disabled\">\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"clearable\"\n          (click)=\"clearValue($event)\"\n          [hidden]=\"disabled || !formControl.value\">\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #headers>\n  <ion-row class=\"mat-autocomplete-header ion-no-padding\">\n    <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n      <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n    </ion-col>\n  </ion-row>\n</ng-template>\n\n<ng-template #options>\n\n\n</ng-template>\n\n",
                     providers: [{
                             provide: i1.NG_VALUE_ACCESSOR,
                             multi: true,
@@ -4846,40 +4873,13 @@
                 },] }
     ];
 
-    /* ---
-     * Source: https://github.com/ionic-team/ionic-framework/blob/b0d53ca73619585671d8cf4dc24e47f826495a0a/core/src/utils/platform.ts
-     * --- */
-    var matchMedia = function (win, query) { return win.matchMedia(query).matches; };
-    var testUserAgent = function (win, expr) {
-        var userAgent = win.navigator.userAgent || win.navigator.vendor || window.opera;
-        return expr.test(userAgent);
-    };
-    var isWindows = function (win) { return testUserAgent(win, /windows/i); };
-    var isTouchUi = function (win) { return matchMedia(win, '(any-pointer:coarse)'); };
-    var isMobile = function (win) { return isTouchUi(win) && !isWindows(win); };
-    var isIpad = function (win) {
-        // iOS 12 and below
-        if (testUserAgent(win, /iPad/i)) {
-            return true;
-        }
-        // iOS 13+
-        if (testUserAgent(win, /Macintosh/i) && isMobile(win)) {
-            return true;
-        }
-        return false;
-    };
-    var ɵ0$b = isIpad;
-    var isIOS = function (win) { return testUserAgent(win, /iPhone|iPod/i) || isIpad(win); };
-    var isAndroid = function (win) { return testUserAgent(win, /android|sink/i); };
-    var isCordova = function (win) { return !!(win['cordova'] || win['phonegap'] || win['PhoneGap']); };
-
     // Import the core angular services.
     // ----------------------------------------------------------------------------------- //
     // ----------------------------------------------------------------------------------- //
     var BASE_TIMER_DELAY = 100;
     var AutofocusDirective = /** @class */ (function () {
         // I initialize the autofocus directive.
-        function AutofocusDirective(elementRef, keyboard) {
+        function AutofocusDirective(platform, elementRef, keyboard) {
             this.keyboard = keyboard;
             this._timer = null;
             this._elementRef = elementRef;
@@ -4956,6 +4956,7 @@
                 },] }
     ];
     AutofocusDirective.ctorParameters = function () { return [
+        { type: i1$5.Platform },
         { type: i0.ElementRef },
         { type: ngx.Keyboard, decorators: [{ type: i0.Optional }] }
     ]; };
@@ -5147,8 +5148,7 @@
     };
     var ɵ0$a = noop$7;
     var MatLatLongField = /** @class */ (function () {
-        function MatLatLongField(platform, translate, formBuilder, cd, formGroupDir) {
-            this.platform = platform;
+        function MatLatLongField(translate, formBuilder, cd, formGroupDir) {
             this.translate = translate;
             this.formBuilder = formBuilder;
             this.cd = cd;
@@ -5165,7 +5165,6 @@
             this.required = false;
             this.onBlur = new i0.EventEmitter();
             this.onFocus = new i0.EventEmitter();
-            this.mobile = this.platform.is('mobile');
         }
         Object.defineProperty(MatLatLongField.prototype, "disabled", {
             get: function () {
@@ -5187,6 +5186,7 @@
         });
         MatLatLongField.prototype.ngOnInit = function () {
             var _this = this;
+            this.mobile = isNotNil(this.mobile) ? this.mobile : isMobile(window);
             this.type = this.type || 'latitude';
             this.pattern = this.pattern || 'DDMM';
             this.mask = MASKS[this.type] && MASKS[this.type][this.pattern];
@@ -5451,7 +5451,6 @@
                 },] }
     ];
     MatLatLongField.ctorParameters = function () { return [
-        { type: i1$5.Platform },
         { type: i1$2.TranslateService },
         { type: i1.FormBuilder },
         { type: i0.ChangeDetectorRef },
@@ -5515,8 +5514,7 @@
     var noop$6 = function () { };
     var ɵ0$9 = noop$6;
     var MatDate = /** @class */ (function () {
-        function MatDate(platform, dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
-            this.platform = platform;
+        function MatDate(dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
             this.dateAdapter = dateAdapter;
             this.translate = translate;
             this.formBuilder = formBuilder;
@@ -5573,11 +5571,12 @@
         });
         MatDate.prototype.ngOnInit = function () {
             var _this = this;
-            this.mobile = isNil(this.mobile) ? this.platform.is('mobile') : this.mobile;
-            this._keyboardHideDelay = this.mobile && KEYBOARD_HIDE_DELAY_MS || 0;
             this.formControl = this.formControl || this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName);
             if (!this.formControl)
                 throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-date-field>.');
+            this.mobile = isNotNil(this.mobile) ? this.mobile : isMobile(window);
+            // Workaround because ion-datetime has issue (do not returned a ISO date)
+            this._keyboardHideDelay = this.mobile && KEYBOARD_HIDE_DELAY_MS || 0;
             this.required = toBoolean(this.required, this.formControl.validator === i1.Validators.required);
             // Add 'validDate' validator (when existing validator are null or required, to be sure to keep it)
             if (!this.formControl.validator || this.formControl.validator === i1.Validators.required) {
@@ -5859,7 +5858,6 @@
                 },] }
     ];
     MatDate.ctorParameters = function () { return [
-        { type: i1$5.Platform },
         { type: i1$3.DateAdapter },
         { type: i1$2.TranslateService },
         { type: i1.FormBuilder },
@@ -5868,12 +5866,12 @@
         { type: i1.FormGroupDirective, decorators: [{ type: i0.Optional }] }
     ]; };
     MatDate.propDecorators = {
+        mobile: [{ type: i0.Input }],
         formControl: [{ type: i0.Input }],
         formControlName: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
         floatLabel: [{ type: i0.Input }],
         required: [{ type: i0.Input }],
-        mobile: [{ type: i0.Input }],
         compact: [{ type: i0.Input }],
         placeholderChar: [{ type: i0.Input }],
         autofocus: [{ type: i0.Input }],
@@ -5898,8 +5896,7 @@
     var noop$5 = function () { };
     var ɵ0$8 = noop$5;
     var MatDateTime = /** @class */ (function () {
-        function MatDateTime(platform, dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
-            this.platform = platform;
+        function MatDateTime(dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
             this.dateAdapter = dateAdapter;
             this.translate = translate;
             this.formBuilder = formBuilder;
@@ -5956,11 +5953,12 @@
         });
         MatDateTime.prototype.ngOnInit = function () {
             var _this = this;
-            this.mobile = isNil(this.mobile) ? this.platform.is('mobile') : this.mobile;
-            this._keyboardHideDelay = this.mobile && KEYBOARD_HIDE_DELAY_MS || 0;
             this.formControl = this.formControl || this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName);
             if (!this.formControl)
                 throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-date-time-field>.');
+            this.mobile = isNotNil(this.mobile) ? this.mobile : isMobile(window);
+            // Workaround because ion-datetime has issue (do not returned a ISO date)
+            this._keyboardHideDelay = this.mobile && KEYBOARD_HIDE_DELAY_MS || 0;
             this.required = toBoolean(this.required, this.formControl.validator === i1.Validators.required);
             // Add 'validDate' validator (when existing validator are null or required, to be sure to keep it)
             if (!this.formControl.validator || this.formControl.validator === i1.Validators.required) {
@@ -6278,7 +6276,6 @@
                 },] }
     ];
     MatDateTime.ctorParameters = function () { return [
-        { type: i1$5.Platform },
         { type: i1$3.DateAdapter },
         { type: i1$2.TranslateService },
         { type: i1.FormBuilder },
@@ -6316,7 +6313,7 @@
     };
     var ɵ0$7 = noop$4;
     var MatDateShort = /** @class */ (function () {
-        function MatDateShort(platform, dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
+        function MatDateShort(dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
             this.dateAdapter = dateAdapter;
             this.translate = translate;
             this.formBuilder = formBuilder;
@@ -6334,9 +6331,6 @@
             this.compact = false;
             this.placeholderChar = DEFAULT_PLACEHOLDER_CHAR;
             this.clearable = false;
-            // Workaround because ion-datetime has issue (do not returned a ISO date)
-            this.mobile = platform.is('mobile');
-            this.keyboardHideDelay = this.mobile && KEYBOARD_HIDE_DELAY_MS || 0;
             this.locale = (translate.currentLang || translate.defaultLang).substr(0, 2);
         }
         Object.defineProperty(MatDateShort.prototype, "tabindex", {
@@ -6365,6 +6359,9 @@
             this.formControl = this.formControl || this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName);
             if (!this.formControl)
                 throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-date-short-field>.');
+            this.mobile = isNotNil(this.mobile) ? this.mobile : isMobile(window);
+            // Workaround because ion-datetime has issue (do not returned a ISO date)
+            this.keyboardHideDelay = this.mobile && KEYBOARD_HIDE_DELAY_MS || 0;
             // Redirect errors from main control, into day sub control
             var $error = new rxjs.BehaviorSubject(null);
             this.required = toBoolean(this.required, this.formControl.validator === i1.Validators.required);
@@ -6611,7 +6608,6 @@
                 },] }
     ];
     MatDateShort.ctorParameters = function () { return [
-        { type: i1$5.Platform },
         { type: i1$3.DateAdapter },
         { type: i1$2.TranslateService },
         { type: i1.FormBuilder },
@@ -6620,6 +6616,7 @@
         { type: i1.FormGroupDirective, decorators: [{ type: i0.Optional }] }
     ]; };
     MatDateShort.propDecorators = {
+        mobile: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
         formControl: [{ type: i0.Input }],
         formControlName: [{ type: i0.Input }],
@@ -10165,12 +10162,13 @@
     ]; };
 
     var Hotkeys = /** @class */ (function () {
-        function Hotkeys(eventManager, dialog, document, modalController) {
+        function Hotkeys(eventManager, dialog, document, modalController, popoverController) {
             var _this = this;
             this.eventManager = eventManager;
             this.dialog = dialog;
             this.document = document;
             this.modalController = modalController;
+            this.popoverController = popoverController;
             this._debug = false;
             this._hotkeys = new Map();
             this._defaults = {
@@ -10199,15 +10197,24 @@
             }
             return new rxjs.Observable(function (observer) {
                 var handler = function (e) { return __awaiter(_this, void 0, void 0, function () {
-                    var top;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
+                    var top, _a;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
                             case 0: return [4 /*yield*/, this.modalController.getTop()];
                             case 1:
-                                top = _a.sent();
+                                _a = (_b.sent());
+                                if (_a) return [3 /*break*/, 3];
+                                return [4 /*yield*/, this.popoverController.getTop()];
+                            case 2:
+                                _a = (_b.sent());
+                                _b.label = 3;
+                            case 3:
+                                top = _a;
                                 // If modal present, check its component name against hotkey element name (fix #181)
-                                if (top && top.component['name'] !== merged.elementName)
+                                if (top && top.component['name'] !== merged.elementName) {
+                                    e.preventDefault();
                                     return [2 /*return*/];
+                                }
                                 if (e instanceof KeyboardEvent && e.repeat)
                                     return [2 /*return*/]; // skip when repeated
                                 if (merged.preventDefault)
@@ -10234,7 +10241,7 @@
         };
         return Hotkeys;
     }());
-    Hotkeys.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function Hotkeys_Factory() { return new Hotkeys(i0__namespace.ɵɵinject(i1__namespace$5.EventManager), i0__namespace.ɵɵinject(i2__namespace$1.MatDialog), i0__namespace.ɵɵinject(i1__namespace$3.DOCUMENT), i0__namespace.ɵɵinject(i1__namespace$4.ModalController)); }, token: Hotkeys, providedIn: "root" });
+    Hotkeys.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function Hotkeys_Factory() { return new Hotkeys(i0__namespace.ɵɵinject(i1__namespace$5.EventManager), i0__namespace.ɵɵinject(i2__namespace$1.MatDialog), i0__namespace.ɵɵinject(i1__namespace$3.DOCUMENT), i0__namespace.ɵɵinject(i1__namespace$4.ModalController), i0__namespace.ɵɵinject(i1__namespace$4.PopoverController)); }, token: Hotkeys, providedIn: "root" });
     Hotkeys.decorators = [
         { type: i0.Injectable, args: [{
                     providedIn: 'root'
@@ -10244,7 +10251,8 @@
         { type: i1$6.EventManager },
         { type: i2.MatDialog },
         { type: undefined, decorators: [{ type: i0.Inject, args: [i1$4.DOCUMENT,] }] },
-        { type: i1$5.ModalController }
+        { type: i1$5.ModalController },
+        { type: i1$5.PopoverController }
     ]; };
 
     var SharedHotkeysModule = /** @class */ (function () {
@@ -11792,7 +11800,7 @@
         LocalSettingsService.prototype.ngOnStart = function () {
             console.info('[settings] Starting service...');
             // Restoring local settings
-            this._data.mobile = isNotNil(this._data.mobile) ? this._data.mobile : isMobile(window);
+            this._data.mobile = isNotNil(this._data.mobile) ? this._data.mobile : (isCordova(window) || isMobile(window));
             this._data.usageMode = (isAndroid(window) || isIOS(window)) ? 'FIELD' : 'DESK'; // FIELD by default if Android or iOS
             // Restoring local settings
             return this.restoreLocally();
@@ -15396,7 +15404,7 @@
                         case 1:
                             _a.sent();
                             console.info('[graphql] Starting graphql...');
-                            mobile = this.platform.is('mobile') || this.platform.is('mobileweb');
+                            mobile = isMobile(window);
                             enableTrackMutationQueries = !mobile;
                             peer = this.network.peer;
                             if (!peer)
@@ -17759,7 +17767,7 @@
                             return [3 /*break*/, 8];
                         case 2:
                             now = this._debug && Date.now();
-                            if (!(this.network.online && this.platform.is('mobile'))) return [3 /*break*/, 6];
+                            if (!(this.network.online && isMobile(window))) return [3 /*break*/, 6];
                             jobs_1 = [];
                             // Download logos
                             if (data.largeLogo && data.largeLogo.startsWith('http')) {
@@ -17901,15 +17909,16 @@
         PlatformService.prototype.is = function (platformName) {
             switch (platformName) {
                 case 'mobile':
-                    // Use custom mobile detection - see SUMARIS issue #323
-                    return isMobile(window);
+                case 'mobileweb':
+                    // Exclude Windows touch screens - see SUMARIS issue #323
+                    return this.platform.is(platformName) && !isWindows(window);
                 default:
                     return this.platform.is(platformName);
             }
         };
         Object.defineProperty(PlatformService.prototype, "mobile", {
             get: function () {
-                return isNotNil(this._mobile) ? this._mobile : isMobile(window);
+                return isNotNil(this._mobile) ? this._mobile : this.is('mobile');
             },
             enumerable: false,
             configurable: true
@@ -17927,18 +17936,18 @@
         PlatformService.prototype.isIOSCordova = function () {
             return this._ios && this._cordova || false;
         };
-        PlatformService.prototype.isWeb = function () {
-            return !this._cordova || (!this._android && !this._ios);
-        };
         PlatformService.prototype.isApp = function () {
-            return this._cordova && (this._android || this._ios);
+            return this.isAndroidCordova() || this.isIOSCordova();
+        };
+        PlatformService.prototype.isWeb = function () {
+            return !this.isApp();
         };
         PlatformService.prototype.isMobileWeb = function () {
-            return isMobile(window) && this.isWeb();
+            return this.mobile && this.isWeb();
         };
         Object.defineProperty(PlatformService.prototype, "canDownload", {
             get: function () {
-                return !!this.downloader && this.isAndroidCordova();
+                return this.downloader && this.isAndroidCordova();
             },
             enumerable: false,
             configurable: true
@@ -30209,8 +30218,7 @@
             disableControl.disable();
             // Copy the 'enable' value, into the disable control
             this.form.get('enable').valueChanges.subscribe(function (value) { return disableControl.setValue(value); });
-            var mobile = platform.is('mobile');
-            this.showLogPanel = this.showLogPanel || mobile;
+            this.showLogPanel = this.showLogPanel || isMobile(window);
         }
         DateTimeTestPage.prototype.ngOnInit = function () {
             var _this = this;
@@ -30500,8 +30508,7 @@
 
     var moment = momentImported__namespace;
     var DateTestPage = /** @class */ (function () {
-        function DateTestPage(platform, formBuilder, cd) {
-            this.platform = platform;
+        function DateTestPage(formBuilder, cd) {
             this.formBuilder = formBuilder;
             this.cd = cd;
             this.showLogPanel = true;
@@ -30523,8 +30530,7 @@
             disableControl.disable();
             // Copy the 'enable' value, into the disable control
             this.form.get('enable').valueChanges.subscribe(function (value) { return disableControl.setValue(value); });
-            var mobile = platform.is('mobile');
-            this.showLogPanel = this.showLogPanel || mobile;
+            this.showLogPanel = this.showLogPanel || isMobile(window);
         }
         DateTestPage.prototype.ngOnInit = function () {
             var _this = this;
@@ -30601,7 +30607,6 @@
                 },] }
     ];
     DateTestPage.ctorParameters = function () { return [
-        { type: i1$5.Platform },
         { type: i1.FormBuilder },
         { type: i0.ChangeDetectorRef }
     ]; };
@@ -31762,7 +31767,7 @@
     exports.waitForTrue = waitForTrue;
     exports.waitIdle = waitIdle;
     exports.waitWhilePending = waitWhilePending;
-    exports["ɵ0"] = ɵ0$b;
+    exports["ɵ0"] = ɵ0$c;
     exports["ɵa"] = CustomReuseStrategy;
     exports["ɵb"] = MatNumpadDomService;
     exports["ɵc"] = isFocusableElement;