btv-base-controls 0.1.14 → 0.1.15

package/fesm2020/btv-base-controls.mjs

@@ -481,10 +481,10 @@ class BtvIconButtonComponent {
     }
 }
 BtvIconButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BtvIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BtvIconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: BtvIconButtonComponent, selector: "btv-icon-button", inputs: { titleText: "titleText", disabled: "disabled", size: "size", icon: "icon", changed: "changed", isTabStop: "isTabStop", light: "light", buttonClasses: "buttonClasses", imageClasses: "imageClasses", danger: "danger", unavailableText: "unavailableText" }, outputs: { iClick: "iClick" }, host: { properties: { "class.disabled": "this.getIsDisabled", "class.small": "this.getIsSmall", "class.medium": "this.getIsMedium", "class.danger": "this.getIsDanger" } }, ngImport: i0, template: "<button class=\"icon flex-row {{buttonClasses}}\" (click)=\"onClick($event)\" type=\"button\" #button\r\n  [tabindex]=\"(!isTabStop || disabled) ? -1 : undefined\" [showToolTip]=\"!!titleText\" customToolTip [contentTemplate]=\"template\">\r\n\r\n  <wm-template-image [icon]=\"icon\" [size]=\"floor(iconSize * (isHover ? 1.1: 1)) + 'px'\" [active]=\"!disabled && changed\"\r\n    [light]=\"light\" [classes]=\"imageClasses\">\r\n  </wm-template-image>\r\n  <ng-content></ng-content>\r\n\r\n</button>\r\n\r\n<ng-template #template>\r\n  <span class=\"tooltip-text\"> {{titleText}} </span>\r\n  <span *ngIf=\"disabled\" class=\"tooltip-text\"> - {{unavailableText}} </span>\r\n</ng-template>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}:host{display:block;background:var(--pageBackgroundColor);border:1px solid;border-radius:4px;border-color:var(--secondaryHover);cursor:pointer;box-sizing:border-box;width:36px;height:36px;flex-shrink:0}:host:focus .icon,:host:hover .icon{outline:none;background:var(--secondaryHover)}:host(.u-no-border){border-width:0px}:host(.small){width:16px;height:16px}:host(.medium){width:30px;height:30px}:host(.disabled){background-color:var(--disabledColor);border-color:var(--disabledColor);color:var(--lightFontColor);cursor:default}:host(.disabled):hover{background-color:var(--disabledColor);border-color:var(--disabledColor)}:host(.disabled) .icon{cursor:default}:host(.danger){background-color:var(--dangerColor);border-color:var(--warningColor)}.tooltip-text{align-self:center}.tooltip-disabled{font-size:14px -2;counter-reset:var(--lightFontColor)}.icon{justify-content:center;align-items:center;width:100%;height:100%;border:0px;cursor:pointer;color:var(--strongFontColor);outline:0px;padding:0;background:transparent;border-radius:inherit}.wm-counter-button{position:relative}.wm-counter{display:inline-block;width:16px;height:16px;line-height:16px;position:absolute;top:0px;right:0px;border:none;background-color:var(--dangerColor);border-radius:50%;font-size:10px;font-weight:700;text-align:center;color:var(--strongFontColor);text-indent:-1px;overflow:hidden;white-space:nowrap}.u-btn-validate{border-color:var(--dangerColor);background-color:var(--dangerColor);color:var(--onBrandTextColor)}.u-btn-validate:hover{background-color:var(--dangerColor)}.u-btn-primary{border-color:var(--brandColor);background-color:var(--brandColor);color:var(--onBrandTextColor)}.u-btn-primary:hover{background-color:var(--onBrandHoverColor)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WmTemplateImageComponent, selector: "wm-template-image", inputs: ["icon", "disabled", "active", "light", "classes", "backgroundColor", "size", "sizeBox"] }, { kind: "directive", type: ToolTipRendererDirective, selector: "[customToolTip]", inputs: ["showToolTip", "customToolTip", "contentTemplate", "customAnchor", "useCustom"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BtvIconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: BtvIconButtonComponent, selector: "btv-icon-button", inputs: { titleText: "titleText", disabled: "disabled", size: "size", icon: "icon", changed: "changed", isTabStop: "isTabStop", light: "light", buttonClasses: "buttonClasses", imageClasses: "imageClasses", danger: "danger", unavailableText: "unavailableText" }, outputs: { iClick: "iClick" }, host: { properties: { "class.disabled": "this.getIsDisabled", "class.small": "this.getIsSmall", "class.medium": "this.getIsMedium", "class.danger": "this.getIsDanger" } }, ngImport: i0, template: "<button class=\"icon flex-row {{buttonClasses}}\" (click)=\"onClick($event)\" type=\"button\" #button\r\n  [tabindex]=\"(!isTabStop || disabled) ? -1 : undefined\" [showToolTip]=\"!!titleText\" customToolTip [contentTemplate]=\"template\">\r\n\r\n  <wm-template-image [icon]=\"icon\" [size]=\"floor(iconSize * (isHover ? 1.1: 1)) + 'px'\" [active]=\"!disabled && changed\"\r\n    [light]=\"light\" [classes]=\"imageClasses\">\r\n  </wm-template-image>\r\n  <ng-content></ng-content>\r\n\r\n</button>\r\n\r\n<ng-template #template>\r\n  <span class=\"tooltip-text\"> {{titleText}} </span>\r\n  <span *ngIf=\"disabled\" class=\"tooltip-text\"> - {{unavailableText}} </span>\r\n</ng-template>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}:host{display:block;background:var(--pageBackgroundColor);border:1px solid;border-radius:4px;border-color:var(--secondaryHover);cursor:pointer;box-sizing:border-box;width:36px;height:36px;flex-shrink:0}:host:focus .icon,:host:hover .icon{outline:none;background:var(--secondaryHover)}:host(.u-no-border){border-width:0px}:host(.small){width:16px;height:16px}:host(.medium){width:30px;height:30px}:host(.disabled){background-color:var(--disabledColor);border-color:var(--disabledColor);color:var(--lightFontColor);cursor:default}:host(.disabled):hover{background-color:var(--disabledColor);border-color:var(--disabledColor)}:host(.disabled) .icon{cursor:default}:host(.danger){background-color:var(--dangerColor);border-color:var(--warningColor)}.tooltip-text{align-self:center}.tooltip-disabled{font-size:14px -2;counter-reset:var(--lightFontColor)}.icon{justify-content:center;align-items:center;width:100%;height:100%;border:0px;cursor:pointer;color:var(--strongFontColor);outline:0px;padding:0;background:transparent;border-radius:inherit}.wm-counter-button{position:relative}.wm-counter{display:inline-block;width:16px;height:16px;line-height:16px;position:absolute;top:0;right:0;border:none;background-color:var(--dangerColor);border-radius:50%;font-size:10px;font-weight:700;text-align:center;color:var(--strongFontColor);text-indent:-1px;overflow:hidden;white-space:nowrap}.u-btn-validate{border-color:var(--dangerColor);background-color:var(--dangerColor);color:var(--onBrandTextColor)}.u-btn-validate:hover{background-color:var(--dangerColor)}.u-btn-primary{border-color:var(--brandColor);background-color:var(--brandColor);color:var(--onBrandTextColor)}.u-btn-primary:hover{background-color:var(--onBrandHoverColor)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WmTemplateImageComponent, selector: "wm-template-image", inputs: ["icon", "disabled", "active", "light", "classes", "backgroundColor", "size", "sizeBox"] }, { kind: "directive", type: ToolTipRendererDirective, selector: "[customToolTip]", inputs: ["showToolTip", "customToolTip", "contentTemplate", "customAnchor", "useCustom"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BtvIconButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'btv-icon-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"icon flex-row {{buttonClasses}}\" (click)=\"onClick($event)\" type=\"button\" #button\r\n  [tabindex]=\"(!isTabStop || disabled) ? -1 : undefined\" [showToolTip]=\"!!titleText\" customToolTip [contentTemplate]=\"template\">\r\n\r\n  <wm-template-image [icon]=\"icon\" [size]=\"floor(iconSize * (isHover ? 1.1: 1)) + 'px'\" [active]=\"!disabled && changed\"\r\n    [light]=\"light\" [classes]=\"imageClasses\">\r\n  </wm-template-image>\r\n  <ng-content></ng-content>\r\n\r\n</button>\r\n\r\n<ng-template #template>\r\n  <span class=\"tooltip-text\"> {{titleText}} </span>\r\n  <span *ngIf=\"disabled\" class=\"tooltip-text\"> - {{unavailableText}} </span>\r\n</ng-template>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}:host{display:block;background:var(--pageBackgroundColor);border:1px solid;border-radius:4px;border-color:var(--secondaryHover);cursor:pointer;box-sizing:border-box;width:36px;height:36px;flex-shrink:0}:host:focus .icon,:host:hover .icon{outline:none;background:var(--secondaryHover)}:host(.u-no-border){border-width:0px}:host(.small){width:16px;height:16px}:host(.medium){width:30px;height:30px}:host(.disabled){background-color:var(--disabledColor);border-color:var(--disabledColor);color:var(--lightFontColor);cursor:default}:host(.disabled):hover{background-color:var(--disabledColor);border-color:var(--disabledColor)}:host(.disabled) .icon{cursor:default}:host(.danger){background-color:var(--dangerColor);border-color:var(--warningColor)}.tooltip-text{align-self:center}.tooltip-disabled{font-size:14px -2;counter-reset:var(--lightFontColor)}.icon{justify-content:center;align-items:center;width:100%;height:100%;border:0px;cursor:pointer;color:var(--strongFontColor);outline:0px;padding:0;background:transparent;border-radius:inherit}.wm-counter-button{position:relative}.wm-counter{display:inline-block;width:16px;height:16px;line-height:16px;position:absolute;top:0px;right:0px;border:none;background-color:var(--dangerColor);border-radius:50%;font-size:10px;font-weight:700;text-align:center;color:var(--strongFontColor);text-indent:-1px;overflow:hidden;white-space:nowrap}.u-btn-validate{border-color:var(--dangerColor);background-color:var(--dangerColor);color:var(--onBrandTextColor)}.u-btn-validate:hover{background-color:var(--dangerColor)}.u-btn-primary{border-color:var(--brandColor);background-color:var(--brandColor);color:var(--onBrandTextColor)}.u-btn-primary:hover{background-color:var(--onBrandHoverColor)}\n"] }]
+            args: [{ selector: 'btv-icon-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"icon flex-row {{buttonClasses}}\" (click)=\"onClick($event)\" type=\"button\" #button\r\n  [tabindex]=\"(!isTabStop || disabled) ? -1 : undefined\" [showToolTip]=\"!!titleText\" customToolTip [contentTemplate]=\"template\">\r\n\r\n  <wm-template-image [icon]=\"icon\" [size]=\"floor(iconSize * (isHover ? 1.1: 1)) + 'px'\" [active]=\"!disabled && changed\"\r\n    [light]=\"light\" [classes]=\"imageClasses\">\r\n  </wm-template-image>\r\n  <ng-content></ng-content>\r\n\r\n</button>\r\n\r\n<ng-template #template>\r\n  <span class=\"tooltip-text\"> {{titleText}} </span>\r\n  <span *ngIf=\"disabled\" class=\"tooltip-text\"> - {{unavailableText}} </span>\r\n</ng-template>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}:host{display:block;background:var(--pageBackgroundColor);border:1px solid;border-radius:4px;border-color:var(--secondaryHover);cursor:pointer;box-sizing:border-box;width:36px;height:36px;flex-shrink:0}:host:focus .icon,:host:hover .icon{outline:none;background:var(--secondaryHover)}:host(.u-no-border){border-width:0px}:host(.small){width:16px;height:16px}:host(.medium){width:30px;height:30px}:host(.disabled){background-color:var(--disabledColor);border-color:var(--disabledColor);color:var(--lightFontColor);cursor:default}:host(.disabled):hover{background-color:var(--disabledColor);border-color:var(--disabledColor)}:host(.disabled) .icon{cursor:default}:host(.danger){background-color:var(--dangerColor);border-color:var(--warningColor)}.tooltip-text{align-self:center}.tooltip-disabled{font-size:14px -2;counter-reset:var(--lightFontColor)}.icon{justify-content:center;align-items:center;width:100%;height:100%;border:0px;cursor:pointer;color:var(--strongFontColor);outline:0px;padding:0;background:transparent;border-radius:inherit}.wm-counter-button{position:relative}.wm-counter{display:inline-block;width:16px;height:16px;line-height:16px;position:absolute;top:0;right:0;border:none;background-color:var(--dangerColor);border-radius:50%;font-size:10px;font-weight:700;text-align:center;color:var(--strongFontColor);text-indent:-1px;overflow:hidden;white-space:nowrap}.u-btn-validate{border-color:var(--dangerColor);background-color:var(--dangerColor);color:var(--onBrandTextColor)}.u-btn-validate:hover{background-color:var(--dangerColor)}.u-btn-primary{border-color:var(--brandColor);background-color:var(--brandColor);color:var(--onBrandTextColor)}.u-btn-primary:hover{background-color:var(--onBrandHoverColor)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { getIsDisabled: [{
                 type: HostBinding,
                 args: ['class.disabled']
@@ -644,10 +644,10 @@ class BtvSearch {
     }
 }
 BtvSearch.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BtvSearch, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BtvSearch.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: BtvSearch, selector: "btv-search", inputs: { widthAuto: "widthAuto", isSmall: "isSmall", searchRight: "searchRight", placeholder: "placeholder", keepExpanded: "keepExpanded", searchText: "searchText" }, outputs: { searchTextChange: "searchTextChange" }, viewQueries: [{ propertyName: "box", first: true, predicate: ["searchBox"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"wm-search flex-row\" [ngClass]=\"{'search-reverse': searchRight == 'right', 'always-opened': keepExpanded, 'small': isSmall}\">\r\n\t<div class=\"search-icon inline-col\" [ngClass]=\"{'search-toggle-disabled': keepExpanded || !searchFocus}\"\r\n\t\t(click)=\"toggleSearch()\">\r\n\t\t<wm-template-image class=\"marginXA\" icon=\"search\" [light]=\"(!expanded && !searchFocus) || keepExpanded\">\r\n\t\t</wm-template-image>\r\n\t</div>\r\n\t<div class=\"search-wrap flex-col\"\r\n\t\t[ngClass]=\"{'search-open': keepExpanded || expanded, 'search-focused': (expanded && searchFocus) || (keepExpanded && searchFocus),\r\n\t'width-auto': widthAuto}\">\r\n\t\t<input class=\"search-field\" #searchBox \r\n\t\t\t[value]=\"searchText\" \r\n\t\t\t[placeholder]=\"placeholder\"\r\n\t\t\t(focus)=\"searchFocus = true\" (focusout)=\"onFocusOut()\">\r\n\t</div>\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.wm-search,.search-wrap,.search-field{box-sizing:border-box}.wm-search:hover{border-color:var(--brandColor)}.wm-search{background:var(--pageBackgroundColor);height:36px;max-width:280px;border-radius:4px;align-items:center;flex:1 0 100%;flex-shrink:0;border:1px solid var(--secondaryHover)}.wm-search.small{max-width:140px}.wm-search.small .search-open{width:auto}.search-icon{width:36px;height:100%;flex-shrink:0;cursor:pointer}.search-icon.search-toggle-disabled{cursor:text}.search-wrap{width:0px;height:100%;color:var(--mediumFontColor);direction:ltr}.search-open{width:280px;max-width:100%;flex-grow:1;flex-shrink:1}.search-open.width-auto{width:auto}.search-open:hover,.search-focused{color:var(--strongFontColor)}.search-field{width:100%;height:100%;color:inherit;text-indent:.1em;font-size:16px;background-color:transparent;border:none;outline:none;padding:0 8px 0 0}.search-field::placeholder{color:var(--disabledTextColor)}.search-reverse{display:flex;flex-direction:row-reverse}.search-reverse .search-wrap{direction:rtl}.search-reverse .search-field{direction:ltr;padding:0 8px}@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){.search-field{width:200px}}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: WmTemplateImageComponent, selector: "wm-template-image", inputs: ["icon", "disabled", "active", "light", "classes", "backgroundColor", "size", "sizeBox"] }] });
+BtvSearch.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: BtvSearch, selector: "btv-search", inputs: { widthAuto: "widthAuto", isSmall: "isSmall", searchRight: "searchRight", placeholder: "placeholder", keepExpanded: "keepExpanded", searchText: "searchText" }, outputs: { searchTextChange: "searchTextChange" }, viewQueries: [{ propertyName: "box", first: true, predicate: ["searchBox"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"wm-search flex-row\" [ngClass]=\"{'search-reverse': searchRight == 'right', 'always-opened': keepExpanded, 'small': isSmall}\">\r\n\t<div class=\"search-icon inline-col\" [ngClass]=\"{'search-toggle-disabled': keepExpanded || !searchFocus}\"\r\n\t\t(click)=\"toggleSearch()\">\r\n\t\t<wm-template-image class=\"marginXA\" icon=\"search\" [light]=\"(!expanded && !searchFocus) || keepExpanded\">\r\n\t\t</wm-template-image>\r\n\t</div>\r\n\t<div class=\"search-wrap flex-col\"\r\n\t\t[ngClass]=\"{'search-open': keepExpanded || expanded, 'search-focused': (expanded && searchFocus) || (keepExpanded && searchFocus),\r\n\t'width-auto': widthAuto}\">\r\n\t\t<input class=\"search-field\" #searchBox \r\n\t\t\t[value]=\"searchText\" \r\n\t\t\t[placeholder]=\"placeholder\"\r\n\t\t\t(focus)=\"searchFocus = true\" (focusout)=\"onFocusOut()\">\r\n\t</div>\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.wm-search,.search-wrap,.search-field{box-sizing:border-box}.wm-search:hover{border-color:var(--brandColor)}.wm-search{background:var(--pageBackgroundColor);height:36px;max-width:280px;border-radius:4px;align-items:center;flex:1 0 100%;flex-shrink:0;border:1px solid var(--secondaryHover)}.wm-search.small{max-width:140px}.wm-search.small .search-open{width:auto}.search-icon{width:36px;height:100%;flex-shrink:0;cursor:pointer}.search-icon.search-toggle-disabled{cursor:text}.search-wrap{width:0px;height:100%;color:var(--mediumFontColor);direction:ltr}.search-open{width:280px;max-width:100%;flex-grow:1;flex-shrink:1}.search-open.width-auto{width:auto}.search-open:hover,.search-focused{color:var(--strongFontColor)}.search-field{width:100%;height:100%;color:inherit;text-indent:.1em;font-size:16px;background-color:transparent;border:none;outline:none;padding:0 8px 0 0}.search-field::placeholder{color:var(--disabledTextColor)}.search-reverse{display:flex;flex-direction:row-reverse}.search-reverse .search-wrap{direction:rtl}.search-reverse .search-field{direction:ltr;padding:0 8px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: WmTemplateImageComponent, selector: "wm-template-image", inputs: ["icon", "disabled", "active", "light", "classes", "backgroundColor", "size", "sizeBox"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BtvSearch, decorators: [{
             type: Component,
-            args: [{ selector: 'btv-search', template: "<div class=\"wm-search flex-row\" [ngClass]=\"{'search-reverse': searchRight == 'right', 'always-opened': keepExpanded, 'small': isSmall}\">\r\n\t<div class=\"search-icon inline-col\" [ngClass]=\"{'search-toggle-disabled': keepExpanded || !searchFocus}\"\r\n\t\t(click)=\"toggleSearch()\">\r\n\t\t<wm-template-image class=\"marginXA\" icon=\"search\" [light]=\"(!expanded && !searchFocus) || keepExpanded\">\r\n\t\t</wm-template-image>\r\n\t</div>\r\n\t<div class=\"search-wrap flex-col\"\r\n\t\t[ngClass]=\"{'search-open': keepExpanded || expanded, 'search-focused': (expanded && searchFocus) || (keepExpanded && searchFocus),\r\n\t'width-auto': widthAuto}\">\r\n\t\t<input class=\"search-field\" #searchBox \r\n\t\t\t[value]=\"searchText\" \r\n\t\t\t[placeholder]=\"placeholder\"\r\n\t\t\t(focus)=\"searchFocus = true\" (focusout)=\"onFocusOut()\">\r\n\t</div>\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.wm-search,.search-wrap,.search-field{box-sizing:border-box}.wm-search:hover{border-color:var(--brandColor)}.wm-search{background:var(--pageBackgroundColor);height:36px;max-width:280px;border-radius:4px;align-items:center;flex:1 0 100%;flex-shrink:0;border:1px solid var(--secondaryHover)}.wm-search.small{max-width:140px}.wm-search.small .search-open{width:auto}.search-icon{width:36px;height:100%;flex-shrink:0;cursor:pointer}.search-icon.search-toggle-disabled{cursor:text}.search-wrap{width:0px;height:100%;color:var(--mediumFontColor);direction:ltr}.search-open{width:280px;max-width:100%;flex-grow:1;flex-shrink:1}.search-open.width-auto{width:auto}.search-open:hover,.search-focused{color:var(--strongFontColor)}.search-field{width:100%;height:100%;color:inherit;text-indent:.1em;font-size:16px;background-color:transparent;border:none;outline:none;padding:0 8px 0 0}.search-field::placeholder{color:var(--disabledTextColor)}.search-reverse{display:flex;flex-direction:row-reverse}.search-reverse .search-wrap{direction:rtl}.search-reverse .search-field{direction:ltr;padding:0 8px}@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){.search-field{width:200px}}}\n"] }]
+            args: [{ selector: 'btv-search', template: "<div class=\"wm-search flex-row\" [ngClass]=\"{'search-reverse': searchRight == 'right', 'always-opened': keepExpanded, 'small': isSmall}\">\r\n\t<div class=\"search-icon inline-col\" [ngClass]=\"{'search-toggle-disabled': keepExpanded || !searchFocus}\"\r\n\t\t(click)=\"toggleSearch()\">\r\n\t\t<wm-template-image class=\"marginXA\" icon=\"search\" [light]=\"(!expanded && !searchFocus) || keepExpanded\">\r\n\t\t</wm-template-image>\r\n\t</div>\r\n\t<div class=\"search-wrap flex-col\"\r\n\t\t[ngClass]=\"{'search-open': keepExpanded || expanded, 'search-focused': (expanded && searchFocus) || (keepExpanded && searchFocus),\r\n\t'width-auto': widthAuto}\">\r\n\t\t<input class=\"search-field\" #searchBox \r\n\t\t\t[value]=\"searchText\" \r\n\t\t\t[placeholder]=\"placeholder\"\r\n\t\t\t(focus)=\"searchFocus = true\" (focusout)=\"onFocusOut()\">\r\n\t</div>\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.wm-search,.search-wrap,.search-field{box-sizing:border-box}.wm-search:hover{border-color:var(--brandColor)}.wm-search{background:var(--pageBackgroundColor);height:36px;max-width:280px;border-radius:4px;align-items:center;flex:1 0 100%;flex-shrink:0;border:1px solid var(--secondaryHover)}.wm-search.small{max-width:140px}.wm-search.small .search-open{width:auto}.search-icon{width:36px;height:100%;flex-shrink:0;cursor:pointer}.search-icon.search-toggle-disabled{cursor:text}.search-wrap{width:0px;height:100%;color:var(--mediumFontColor);direction:ltr}.search-open{width:280px;max-width:100%;flex-grow:1;flex-shrink:1}.search-open.width-auto{width:auto}.search-open:hover,.search-focused{color:var(--strongFontColor)}.search-field{width:100%;height:100%;color:inherit;text-indent:.1em;font-size:16px;background-color:transparent;border:none;outline:none;padding:0 8px 0 0}.search-field::placeholder{color:var(--disabledTextColor)}.search-reverse{display:flex;flex-direction:row-reverse}.search-reverse .search-wrap{direction:rtl}.search-reverse .search-field{direction:ltr;padding:0 8px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { widthAuto: [{
                 type: Input
             }], isSmall: [{
@@ -670,10 +670,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
 class BusyIndicatorComponent {
 }
 BusyIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BusyIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BusyIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: BusyIndicatorComponent, selector: "wm-busy-indicator", inputs: { busy: "busy", long: "long" }, ngImport: i0, template: "<div class=\"load-snake-wrap\" *ngIf=\"busy\" [ngClass]=\"{'long-snake-wrap': long}\">\r\n    <span class=\"snake-field\" ></span>\r\n    <span class=\"snake\" [ngClass]=\"{'longSnake': long}\">\r\n        <span class=\"snake-shadow\" [ngClass]=\"{'longRotate': long}\"></span>\r\n    </span>\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.load-snake-wrap{width:120px;height:12px;overflow:hidden;align-self:flex-end}.snake-field{display:block;width:100%;height:2px;background:#22252C;top:5px;position:relative}.snake{display:inline-block;width:80px;height:2px;background:#7F868C;animation-play-state:running;position:relative;top:-9px;animation:snakeMove 2s linear 0s infinite}.snake-shadow{display:inline-block;width:40px;height:8px;position:absolute;margin-top:-3px;animation:rotate 2s linear 0s infinite;animation-play-state:running;border-radius:25%}.long-snake-wrap{width:400px}.longSnake{animation:snakeLongMove 3s linear 0s infinite}.longRotate{animation:rotate 3s linear 0s infinite}@keyframes snakeMove{0%{left:-80px}50%{left:200px}to{left:-200px}}@keyframes snakeLongMove{0%{left:-80px}50%{left:440px}to{left:-200px}}@keyframes rotate{0%{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(152,141,103,.4) 100%);right:0px}to{background:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(152,141,103,.4) 100%);left:0px;right:unset}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BusyIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: BusyIndicatorComponent, selector: "wm-busy-indicator", inputs: { busy: "busy", long: "long" }, ngImport: i0, template: "<div class=\"load-snake-wrap\" *ngIf=\"busy\" [ngClass]=\"{'long-snake-wrap': long}\">\r\n    <span class=\"snake-field\" ></span>\r\n    <span class=\"snake\" [ngClass]=\"{'longSnake': long}\">\r\n        <span class=\"snake-shadow\" [ngClass]=\"{'longRotate': long}\"></span>\r\n    </span>\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.load-snake-wrap{width:120px;height:12px;overflow:hidden;align-self:flex-end}.snake-field{display:block;width:100%;height:2px;background:#22252C;top:5px;position:relative}.snake{display:inline-block;width:80px;height:2px;background:#7F868C;animation-play-state:running;position:relative;top:-9px;animation:snakeMove 2s linear 0s infinite}.snake-shadow{display:inline-block;width:40px;height:8px;position:absolute;margin-top:-3px;animation:rotate 2s linear 0s infinite;animation-play-state:running;border-radius:25%}.long-snake-wrap{width:400px}.longSnake{animation:snakeLongMove 3s linear 0s infinite}.longRotate{animation:rotate 3s linear 0s infinite}@keyframes snakeMove{0%{left:-80px}50%{left:200px}to{left:-200px}}@keyframes snakeLongMove{0%{left:-80px}50%{left:440px}to{left:-200px}}@keyframes rotate{0%{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(152,141,103,.4) 100%);right:0}to{background:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(152,141,103,.4) 100%);left:0;right:unset}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BusyIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wm-busy-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"load-snake-wrap\" *ngIf=\"busy\" [ngClass]=\"{'long-snake-wrap': long}\">\r\n    <span class=\"snake-field\" ></span>\r\n    <span class=\"snake\" [ngClass]=\"{'longSnake': long}\">\r\n        <span class=\"snake-shadow\" [ngClass]=\"{'longRotate': long}\"></span>\r\n    </span>\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.load-snake-wrap{width:120px;height:12px;overflow:hidden;align-self:flex-end}.snake-field{display:block;width:100%;height:2px;background:#22252C;top:5px;position:relative}.snake{display:inline-block;width:80px;height:2px;background:#7F868C;animation-play-state:running;position:relative;top:-9px;animation:snakeMove 2s linear 0s infinite}.snake-shadow{display:inline-block;width:40px;height:8px;position:absolute;margin-top:-3px;animation:rotate 2s linear 0s infinite;animation-play-state:running;border-radius:25%}.long-snake-wrap{width:400px}.longSnake{animation:snakeLongMove 3s linear 0s infinite}.longRotate{animation:rotate 3s linear 0s infinite}@keyframes snakeMove{0%{left:-80px}50%{left:200px}to{left:-200px}}@keyframes snakeLongMove{0%{left:-80px}50%{left:440px}to{left:-200px}}@keyframes rotate{0%{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(152,141,103,.4) 100%);right:0px}to{background:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(152,141,103,.4) 100%);left:0px;right:unset}}\n"] }]
+            args: [{ selector: 'wm-busy-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"load-snake-wrap\" *ngIf=\"busy\" [ngClass]=\"{'long-snake-wrap': long}\">\r\n    <span class=\"snake-field\" ></span>\r\n    <span class=\"snake\" [ngClass]=\"{'longSnake': long}\">\r\n        <span class=\"snake-shadow\" [ngClass]=\"{'longRotate': long}\"></span>\r\n    </span>\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.load-snake-wrap{width:120px;height:12px;overflow:hidden;align-self:flex-end}.snake-field{display:block;width:100%;height:2px;background:#22252C;top:5px;position:relative}.snake{display:inline-block;width:80px;height:2px;background:#7F868C;animation-play-state:running;position:relative;top:-9px;animation:snakeMove 2s linear 0s infinite}.snake-shadow{display:inline-block;width:40px;height:8px;position:absolute;margin-top:-3px;animation:rotate 2s linear 0s infinite;animation-play-state:running;border-radius:25%}.long-snake-wrap{width:400px}.longSnake{animation:snakeLongMove 3s linear 0s infinite}.longRotate{animation:rotate 3s linear 0s infinite}@keyframes snakeMove{0%{left:-80px}50%{left:200px}to{left:-200px}}@keyframes snakeLongMove{0%{left:-80px}50%{left:440px}to{left:-200px}}@keyframes rotate{0%{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(152,141,103,.4) 100%);right:0}to{background:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(152,141,103,.4) 100%);left:0;right:unset}}\n"] }]
         }], propDecorators: { busy: [{
                 type: Input
             }], long: [{
@@ -1318,10 +1318,10 @@ class SpinnerComponent {
     }
 }
 SpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: SpinnerComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: SpinnerComponent, selector: "wm-spinner", inputs: { delay: "delay", longMessageDelay: "longMessageDelay", message: "message", messageTakesLong: "messageTakesLong", messageBottomWait: "messageBottomWait", detailInfoMessage: "detailInfoMessage", infoType: "infoType", showSpinner: "showSpinner" }, ngImport: i0, template: "<div class=\"spinner-wrap flex-col wh-100\" *ngIf=\"isOverlayVisible\">\r\n    <div class=\"spinner-bg wh-100\" [ngClass]=\"{'invisible': !isOverlayContrast }\"></div>\r\n    <div class=\"spinner-content inline-col marginXA align-center\" [ngClass]=\"{'invisible': !isOverlayContrast }\">\r\n        <div class=\"msg-wrap marginBottomX8\">\r\n            <div style=\"display: flex\">\r\n                    <div class=\"msg\">{{message}}</div>\r\n                    <wm-info class=\"info\" [type]=\"infoType\" popupPosition=\"top-center\" \r\n                    [iconAsTemplate]=\"infoType===2\" [useThemeForIconTemplate]=\"infoType===2\"\r\n                    *ngIf=\"detailInfoMessage\" [header]=\"detailInfoMessage\" style=\"margin-left: 4px\"></wm-info>\r\n            </div>\r\n            \r\n            <div class=\"msg\">{{messageBottomWait}}</div>\r\n        </div>\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 168 168\" id=\"loader\">\r\n            <defs>\r\n                <linearGradient id=\"a\" x1=\"38.078%\" x2=\"4.941%\" y1=\"8.411%\" y2=\"16.987%\">\r\n                    <stop offset=\"0%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.1\" />\r\n                    <stop offset=\"61.554%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.4\" />\r\n                    <stop offset=\"100%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.5\" />\r\n                </linearGradient>\r\n                <radialGradient id=\"b\" cy=\"43.835%\" r=\"54.9%\" fx=\"50%\" fy=\"43.835%\"\r\n                    gradientTransform=\"matrix(-.77913 .62687 -.6485 -.80602 1.174 .478)\">\r\n                    <stop offset=\"0%\" stop-color=\"#FFF\" />\r\n                    <stop offset=\"100%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.5\" />\r\n                </radialGradient>\r\n            </defs>\r\n            <g fill=\"none\" fill-rule=\"evenodd\">\r\n                <g transform=\"translate(10 10)\">\r\n                    <path stroke=\"url(#a)\" stroke-linecap=\"round\" stroke-width=\"19\"\r\n                        d=\"M16.198 27.79C6.062 40.453 0 56.518 0 74c0 40.87 33.13 74 74 74s74-33.13 74-74c0-24.611-12.014-46.416-30.498-59.87C105.292 5.244 90.258 0 74 0\" />\r\n                    <circle cx=\"16.5\" cy=\"27.5\" r=\"9.5\" fill=\"url(#b)\" />\r\n                </g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.spinner-wrap{position:fixed;left:0px;right:0px;top:0px;bottom:0px;z-index:5;text-shadow:0px 0px 0px var(--pageBackgroundColor);pointer-events:all}.spinner-bg{position:absolute;top:0;left:0;transition:opacity .4s ease-in;opacity:.7;background-color:var(--appBackgroundColor)}.invisible{opacity:.01}.spinner-content{z-index:1;width:80%;height:80%;min-width:120px;min-height:120px;max-width:400px;max-height:400px}.msg-wrap{width:auto;max-width:400px;box-sizing:border-box;text-align:center;font-size:16px;color:var(--strongFontColor);line-height:32px;font-weight:500;word-break:break-word}@media all and (max-width: 767px){.msg-wrap{font-size:14px;line-height:24px}}#loader{animation:rotation 2s infinite linear;animation-play-state:running;width:50%;height:50%;min-width:120px;min-height:120px;max-width:240px;max-height:240px;margin:0 auto}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WmInfoComponent, selector: "wm-info", inputs: ["preText", "postText", "header", "type", "popupPosition", "iconAsTemplate", "useThemeForIconTemplate", "smallIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: SpinnerComponent, selector: "wm-spinner", inputs: { delay: "delay", longMessageDelay: "longMessageDelay", message: "message", messageTakesLong: "messageTakesLong", messageBottomWait: "messageBottomWait", detailInfoMessage: "detailInfoMessage", infoType: "infoType", showSpinner: "showSpinner" }, ngImport: i0, template: "<div class=\"spinner-wrap flex-col wh-100\" *ngIf=\"isOverlayVisible\">\r\n    <div class=\"spinner-bg wh-100\" [ngClass]=\"{'invisible': !isOverlayContrast }\"></div>\r\n    <div class=\"spinner-content inline-col marginXA align-center\" [ngClass]=\"{'invisible': !isOverlayContrast }\">\r\n        <div class=\"msg-wrap marginBottomX8\">\r\n            <div style=\"display: flex\">\r\n                    <div class=\"msg\">{{message}}</div>\r\n                    <wm-info class=\"info\" [type]=\"infoType\" popupPosition=\"top-center\" \r\n                    [iconAsTemplate]=\"infoType===2\" [useThemeForIconTemplate]=\"infoType===2\"\r\n                    *ngIf=\"detailInfoMessage\" [header]=\"detailInfoMessage\" style=\"margin-left: 4px\"></wm-info>\r\n            </div>\r\n            \r\n            <div class=\"msg\">{{messageBottomWait}}</div>\r\n        </div>\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 168 168\" id=\"loader\">\r\n            <defs>\r\n                <linearGradient id=\"a\" x1=\"38.078%\" x2=\"4.941%\" y1=\"8.411%\" y2=\"16.987%\">\r\n                    <stop offset=\"0%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.1\" />\r\n                    <stop offset=\"61.554%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.4\" />\r\n                    <stop offset=\"100%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.5\" />\r\n                </linearGradient>\r\n                <radialGradient id=\"b\" cy=\"43.835%\" r=\"54.9%\" fx=\"50%\" fy=\"43.835%\"\r\n                    gradientTransform=\"matrix(-.77913 .62687 -.6485 -.80602 1.174 .478)\">\r\n                    <stop offset=\"0%\" stop-color=\"#FFF\" />\r\n                    <stop offset=\"100%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.5\" />\r\n                </radialGradient>\r\n            </defs>\r\n            <g fill=\"none\" fill-rule=\"evenodd\">\r\n                <g transform=\"translate(10 10)\">\r\n                    <path stroke=\"url(#a)\" stroke-linecap=\"round\" stroke-width=\"19\"\r\n                        d=\"M16.198 27.79C6.062 40.453 0 56.518 0 74c0 40.87 33.13 74 74 74s74-33.13 74-74c0-24.611-12.014-46.416-30.498-59.87C105.292 5.244 90.258 0 74 0\" />\r\n                    <circle cx=\"16.5\" cy=\"27.5\" r=\"9.5\" fill=\"url(#b)\" />\r\n                </g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.spinner-wrap{position:fixed;inset:0;z-index:5;text-shadow:0px 0px 0px var(--pageBackgroundColor);pointer-events:all}.spinner-bg{position:absolute;top:0;left:0;transition:opacity .4s ease-in;opacity:.7;background-color:var(--appBackgroundColor)}.invisible{opacity:.01}.spinner-content{z-index:1;width:80%;height:80%;min-width:120px;min-height:120px;max-width:400px;max-height:400px}.msg-wrap{width:auto;max-width:400px;box-sizing:border-box;text-align:center;font-size:16px;color:var(--strongFontColor);line-height:32px;font-weight:500;word-break:break-word}@media all and (max-width: 767px){.msg-wrap{font-size:14px;line-height:24px}}#loader{animation:rotation 2s infinite linear;animation-play-state:running;width:50%;height:50%;min-width:120px;min-height:120px;max-width:240px;max-height:240px;margin:0 auto}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WmInfoComponent, selector: "wm-info", inputs: ["preText", "postText", "header", "type", "popupPosition", "iconAsTemplate", "useThemeForIconTemplate", "smallIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wm-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"spinner-wrap flex-col wh-100\" *ngIf=\"isOverlayVisible\">\r\n    <div class=\"spinner-bg wh-100\" [ngClass]=\"{'invisible': !isOverlayContrast }\"></div>\r\n    <div class=\"spinner-content inline-col marginXA align-center\" [ngClass]=\"{'invisible': !isOverlayContrast }\">\r\n        <div class=\"msg-wrap marginBottomX8\">\r\n            <div style=\"display: flex\">\r\n                    <div class=\"msg\">{{message}}</div>\r\n                    <wm-info class=\"info\" [type]=\"infoType\" popupPosition=\"top-center\" \r\n                    [iconAsTemplate]=\"infoType===2\" [useThemeForIconTemplate]=\"infoType===2\"\r\n                    *ngIf=\"detailInfoMessage\" [header]=\"detailInfoMessage\" style=\"margin-left: 4px\"></wm-info>\r\n            </div>\r\n            \r\n            <div class=\"msg\">{{messageBottomWait}}</div>\r\n        </div>\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 168 168\" id=\"loader\">\r\n            <defs>\r\n                <linearGradient id=\"a\" x1=\"38.078%\" x2=\"4.941%\" y1=\"8.411%\" y2=\"16.987%\">\r\n                    <stop offset=\"0%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.1\" />\r\n                    <stop offset=\"61.554%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.4\" />\r\n                    <stop offset=\"100%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.5\" />\r\n                </linearGradient>\r\n                <radialGradient id=\"b\" cy=\"43.835%\" r=\"54.9%\" fx=\"50%\" fy=\"43.835%\"\r\n                    gradientTransform=\"matrix(-.77913 .62687 -.6485 -.80602 1.174 .478)\">\r\n                    <stop offset=\"0%\" stop-color=\"#FFF\" />\r\n                    <stop offset=\"100%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.5\" />\r\n                </radialGradient>\r\n            </defs>\r\n            <g fill=\"none\" fill-rule=\"evenodd\">\r\n                <g transform=\"translate(10 10)\">\r\n                    <path stroke=\"url(#a)\" stroke-linecap=\"round\" stroke-width=\"19\"\r\n                        d=\"M16.198 27.79C6.062 40.453 0 56.518 0 74c0 40.87 33.13 74 74 74s74-33.13 74-74c0-24.611-12.014-46.416-30.498-59.87C105.292 5.244 90.258 0 74 0\" />\r\n                    <circle cx=\"16.5\" cy=\"27.5\" r=\"9.5\" fill=\"url(#b)\" />\r\n                </g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.spinner-wrap{position:fixed;left:0px;right:0px;top:0px;bottom:0px;z-index:5;text-shadow:0px 0px 0px var(--pageBackgroundColor);pointer-events:all}.spinner-bg{position:absolute;top:0;left:0;transition:opacity .4s ease-in;opacity:.7;background-color:var(--appBackgroundColor)}.invisible{opacity:.01}.spinner-content{z-index:1;width:80%;height:80%;min-width:120px;min-height:120px;max-width:400px;max-height:400px}.msg-wrap{width:auto;max-width:400px;box-sizing:border-box;text-align:center;font-size:16px;color:var(--strongFontColor);line-height:32px;font-weight:500;word-break:break-word}@media all and (max-width: 767px){.msg-wrap{font-size:14px;line-height:24px}}#loader{animation:rotation 2s infinite linear;animation-play-state:running;width:50%;height:50%;min-width:120px;min-height:120px;max-width:240px;max-height:240px;margin:0 auto}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'wm-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"spinner-wrap flex-col wh-100\" *ngIf=\"isOverlayVisible\">\r\n    <div class=\"spinner-bg wh-100\" [ngClass]=\"{'invisible': !isOverlayContrast }\"></div>\r\n    <div class=\"spinner-content inline-col marginXA align-center\" [ngClass]=\"{'invisible': !isOverlayContrast }\">\r\n        <div class=\"msg-wrap marginBottomX8\">\r\n            <div style=\"display: flex\">\r\n                    <div class=\"msg\">{{message}}</div>\r\n                    <wm-info class=\"info\" [type]=\"infoType\" popupPosition=\"top-center\" \r\n                    [iconAsTemplate]=\"infoType===2\" [useThemeForIconTemplate]=\"infoType===2\"\r\n                    *ngIf=\"detailInfoMessage\" [header]=\"detailInfoMessage\" style=\"margin-left: 4px\"></wm-info>\r\n            </div>\r\n            \r\n            <div class=\"msg\">{{messageBottomWait}}</div>\r\n        </div>\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 168 168\" id=\"loader\">\r\n            <defs>\r\n                <linearGradient id=\"a\" x1=\"38.078%\" x2=\"4.941%\" y1=\"8.411%\" y2=\"16.987%\">\r\n                    <stop offset=\"0%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.1\" />\r\n                    <stop offset=\"61.554%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.4\" />\r\n                    <stop offset=\"100%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.5\" />\r\n                </linearGradient>\r\n                <radialGradient id=\"b\" cy=\"43.835%\" r=\"54.9%\" fx=\"50%\" fy=\"43.835%\"\r\n                    gradientTransform=\"matrix(-.77913 .62687 -.6485 -.80602 1.174 .478)\">\r\n                    <stop offset=\"0%\" stop-color=\"#FFF\" />\r\n                    <stop offset=\"100%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.5\" />\r\n                </radialGradient>\r\n            </defs>\r\n            <g fill=\"none\" fill-rule=\"evenodd\">\r\n                <g transform=\"translate(10 10)\">\r\n                    <path stroke=\"url(#a)\" stroke-linecap=\"round\" stroke-width=\"19\"\r\n                        d=\"M16.198 27.79C6.062 40.453 0 56.518 0 74c0 40.87 33.13 74 74 74s74-33.13 74-74c0-24.611-12.014-46.416-30.498-59.87C105.292 5.244 90.258 0 74 0\" />\r\n                    <circle cx=\"16.5\" cy=\"27.5\" r=\"9.5\" fill=\"url(#b)\" />\r\n                </g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.spinner-wrap{position:fixed;inset:0;z-index:5;text-shadow:0px 0px 0px var(--pageBackgroundColor);pointer-events:all}.spinner-bg{position:absolute;top:0;left:0;transition:opacity .4s ease-in;opacity:.7;background-color:var(--appBackgroundColor)}.invisible{opacity:.01}.spinner-content{z-index:1;width:80%;height:80%;min-width:120px;min-height:120px;max-width:400px;max-height:400px}.msg-wrap{width:auto;max-width:400px;box-sizing:border-box;text-align:center;font-size:16px;color:var(--strongFontColor);line-height:32px;font-weight:500;word-break:break-word}@media all and (max-width: 767px){.msg-wrap{font-size:14px;line-height:24px}}#loader{animation:rotation 2s infinite linear;animation-play-state:running;width:50%;height:50%;min-width:120px;min-height:120px;max-width:240px;max-height:240px;margin:0 auto}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { delay: [{
                 type: Input
             }], longMessageDelay: [{
@@ -1438,10 +1438,10 @@ class BtvCounterButtonComponent extends BtvIconButtonComponent {
     }
 }
 BtvCounterButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BtvCounterButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BtvCounterButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: BtvCounterButtonComponent, selector: "btv-counter-button", inputs: { counter: "counter", unavailableText: "unavailableText" }, usesInheritance: true, ngImport: i0, template: "<button class=\"icon flex-row {{buttonClasses}}\" (click)=\"onClick($event)\" type=\"button\" #button\r\n  [tabindex]=\"(!isTabStop || disabled) ? -1 : undefined\" [showToolTip]=\"!!titleText\" customToolTip [contentTemplate]=\"template\">\r\n\r\n  <wm-template-image [icon]=\"icon\" [size]=\"floor(iconSize * (isHover ? 1.1: 1)) + 'px'\" [active]=\"!disabled && changed\"\r\n    [light]=\"light\">\r\n  </wm-template-image>\r\n\r\n  <ng-content></ng-content>\r\n\r\n  <span class=\"wm-counter\" [title]=\"counter\" *ngIf=\"counter > 0\">{{counterLabel}}</span>\r\n\r\n</button>\r\n\r\n\r\n<ng-template #template>\r\n  <span class=\"tooltip-text\"> {{titleText}} </span>\r\n  <span *ngIf=\"disabled\" class=\"tooltip-disabled\"> - {{unavailableText}} </span>\r\n</ng-template>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}:host{display:block;background:var(--pageBackgroundColor);border:1px solid;border-radius:4px;border-color:var(--secondaryHover);cursor:pointer;box-sizing:border-box;width:36px;height:36px;flex-shrink:0}:host:focus .icon,:host:hover .icon{outline:none;background:var(--secondaryHover)}:host(.u-no-border){border-width:0px}:host(.small){width:16px;height:16px}:host(.medium){width:30px;height:30px}:host(.disabled){background-color:var(--disabledColor);border-color:var(--disabledColor);color:var(--lightFontColor);cursor:default}:host(.disabled):hover{background-color:var(--disabledColor);border-color:var(--disabledColor)}:host(.disabled) .icon{cursor:default}:host(.danger){background-color:var(--dangerColor);border-color:var(--warningColor)}.tooltip-text{align-self:center}.tooltip-disabled{font-size:14px -2;counter-reset:var(--lightFontColor)}.icon{justify-content:center;align-items:center;width:100%;height:100%;border:0px;cursor:pointer;color:var(--strongFontColor);outline:0px;padding:0;background:transparent;border-radius:inherit}.wm-counter-button{position:relative}.wm-counter{display:inline-block;width:16px;height:16px;line-height:16px;position:absolute;top:0px;right:0px;border:none;background-color:var(--dangerColor);border-radius:50%;font-size:10px;font-weight:700;text-align:center;color:var(--strongFontColor);text-indent:-1px;overflow:hidden;white-space:nowrap}.u-btn-validate{border-color:var(--dangerColor);background-color:var(--dangerColor);color:var(--onBrandTextColor)}.u-btn-validate:hover{background-color:var(--dangerColor)}.u-btn-primary{border-color:var(--brandColor);background-color:var(--brandColor);color:var(--onBrandTextColor)}.u-btn-primary:hover{background-color:var(--onBrandHoverColor)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WmTemplateImageComponent, selector: "wm-template-image", inputs: ["icon", "disabled", "active", "light", "classes", "backgroundColor", "size", "sizeBox"] }, { kind: "directive", type: ToolTipRendererDirective, selector: "[customToolTip]", inputs: ["showToolTip", "customToolTip", "contentTemplate", "customAnchor", "useCustom"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BtvCounterButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: BtvCounterButtonComponent, selector: "btv-counter-button", inputs: { counter: "counter", unavailableText: "unavailableText" }, usesInheritance: true, ngImport: i0, template: "<button class=\"icon flex-row {{buttonClasses}}\" (click)=\"onClick($event)\" type=\"button\" #button\r\n  [tabindex]=\"(!isTabStop || disabled) ? -1 : undefined\" [showToolTip]=\"!!titleText\" customToolTip [contentTemplate]=\"template\">\r\n\r\n  <wm-template-image [icon]=\"icon\" [size]=\"floor(iconSize * (isHover ? 1.1: 1)) + 'px'\" [active]=\"!disabled && changed\"\r\n    [light]=\"light\">\r\n  </wm-template-image>\r\n\r\n  <ng-content></ng-content>\r\n\r\n  <span class=\"wm-counter\" [title]=\"counter\" *ngIf=\"counter > 0\">{{counterLabel}}</span>\r\n\r\n</button>\r\n\r\n\r\n<ng-template #template>\r\n  <span class=\"tooltip-text\"> {{titleText}} </span>\r\n  <span *ngIf=\"disabled\" class=\"tooltip-disabled\"> - {{unavailableText}} </span>\r\n</ng-template>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}:host{display:block;background:var(--pageBackgroundColor);border:1px solid;border-radius:4px;border-color:var(--secondaryHover);cursor:pointer;box-sizing:border-box;width:36px;height:36px;flex-shrink:0}:host:focus .icon,:host:hover .icon{outline:none;background:var(--secondaryHover)}:host(.u-no-border){border-width:0px}:host(.small){width:16px;height:16px}:host(.medium){width:30px;height:30px}:host(.disabled){background-color:var(--disabledColor);border-color:var(--disabledColor);color:var(--lightFontColor);cursor:default}:host(.disabled):hover{background-color:var(--disabledColor);border-color:var(--disabledColor)}:host(.disabled) .icon{cursor:default}:host(.danger){background-color:var(--dangerColor);border-color:var(--warningColor)}.tooltip-text{align-self:center}.tooltip-disabled{font-size:14px -2;counter-reset:var(--lightFontColor)}.icon{justify-content:center;align-items:center;width:100%;height:100%;border:0px;cursor:pointer;color:var(--strongFontColor);outline:0px;padding:0;background:transparent;border-radius:inherit}.wm-counter-button{position:relative}.wm-counter{display:inline-block;width:16px;height:16px;line-height:16px;position:absolute;top:0;right:0;border:none;background-color:var(--dangerColor);border-radius:50%;font-size:10px;font-weight:700;text-align:center;color:var(--strongFontColor);text-indent:-1px;overflow:hidden;white-space:nowrap}.u-btn-validate{border-color:var(--dangerColor);background-color:var(--dangerColor);color:var(--onBrandTextColor)}.u-btn-validate:hover{background-color:var(--dangerColor)}.u-btn-primary{border-color:var(--brandColor);background-color:var(--brandColor);color:var(--onBrandTextColor)}.u-btn-primary:hover{background-color:var(--onBrandHoverColor)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WmTemplateImageComponent, selector: "wm-template-image", inputs: ["icon", "disabled", "active", "light", "classes", "backgroundColor", "size", "sizeBox"] }, { kind: "directive", type: ToolTipRendererDirective, selector: "[customToolTip]", inputs: ["showToolTip", "customToolTip", "contentTemplate", "customAnchor", "useCustom"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BtvCounterButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'btv-counter-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"icon flex-row {{buttonClasses}}\" (click)=\"onClick($event)\" type=\"button\" #button\r\n  [tabindex]=\"(!isTabStop || disabled) ? -1 : undefined\" [showToolTip]=\"!!titleText\" customToolTip [contentTemplate]=\"template\">\r\n\r\n  <wm-template-image [icon]=\"icon\" [size]=\"floor(iconSize * (isHover ? 1.1: 1)) + 'px'\" [active]=\"!disabled && changed\"\r\n    [light]=\"light\">\r\n  </wm-template-image>\r\n\r\n  <ng-content></ng-content>\r\n\r\n  <span class=\"wm-counter\" [title]=\"counter\" *ngIf=\"counter > 0\">{{counterLabel}}</span>\r\n\r\n</button>\r\n\r\n\r\n<ng-template #template>\r\n  <span class=\"tooltip-text\"> {{titleText}} </span>\r\n  <span *ngIf=\"disabled\" class=\"tooltip-disabled\"> - {{unavailableText}} </span>\r\n</ng-template>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}:host{display:block;background:var(--pageBackgroundColor);border:1px solid;border-radius:4px;border-color:var(--secondaryHover);cursor:pointer;box-sizing:border-box;width:36px;height:36px;flex-shrink:0}:host:focus .icon,:host:hover .icon{outline:none;background:var(--secondaryHover)}:host(.u-no-border){border-width:0px}:host(.small){width:16px;height:16px}:host(.medium){width:30px;height:30px}:host(.disabled){background-color:var(--disabledColor);border-color:var(--disabledColor);color:var(--lightFontColor);cursor:default}:host(.disabled):hover{background-color:var(--disabledColor);border-color:var(--disabledColor)}:host(.disabled) .icon{cursor:default}:host(.danger){background-color:var(--dangerColor);border-color:var(--warningColor)}.tooltip-text{align-self:center}.tooltip-disabled{font-size:14px -2;counter-reset:var(--lightFontColor)}.icon{justify-content:center;align-items:center;width:100%;height:100%;border:0px;cursor:pointer;color:var(--strongFontColor);outline:0px;padding:0;background:transparent;border-radius:inherit}.wm-counter-button{position:relative}.wm-counter{display:inline-block;width:16px;height:16px;line-height:16px;position:absolute;top:0px;right:0px;border:none;background-color:var(--dangerColor);border-radius:50%;font-size:10px;font-weight:700;text-align:center;color:var(--strongFontColor);text-indent:-1px;overflow:hidden;white-space:nowrap}.u-btn-validate{border-color:var(--dangerColor);background-color:var(--dangerColor);color:var(--onBrandTextColor)}.u-btn-validate:hover{background-color:var(--dangerColor)}.u-btn-primary{border-color:var(--brandColor);background-color:var(--brandColor);color:var(--onBrandTextColor)}.u-btn-primary:hover{background-color:var(--onBrandHoverColor)}\n"] }]
+            args: [{ selector: 'btv-counter-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"icon flex-row {{buttonClasses}}\" (click)=\"onClick($event)\" type=\"button\" #button\r\n  [tabindex]=\"(!isTabStop || disabled) ? -1 : undefined\" [showToolTip]=\"!!titleText\" customToolTip [contentTemplate]=\"template\">\r\n\r\n  <wm-template-image [icon]=\"icon\" [size]=\"floor(iconSize * (isHover ? 1.1: 1)) + 'px'\" [active]=\"!disabled && changed\"\r\n    [light]=\"light\">\r\n  </wm-template-image>\r\n\r\n  <ng-content></ng-content>\r\n\r\n  <span class=\"wm-counter\" [title]=\"counter\" *ngIf=\"counter > 0\">{{counterLabel}}</span>\r\n\r\n</button>\r\n\r\n\r\n<ng-template #template>\r\n  <span class=\"tooltip-text\"> {{titleText}} </span>\r\n  <span *ngIf=\"disabled\" class=\"tooltip-disabled\"> - {{unavailableText}} </span>\r\n</ng-template>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}:host{display:block;background:var(--pageBackgroundColor);border:1px solid;border-radius:4px;border-color:var(--secondaryHover);cursor:pointer;box-sizing:border-box;width:36px;height:36px;flex-shrink:0}:host:focus .icon,:host:hover .icon{outline:none;background:var(--secondaryHover)}:host(.u-no-border){border-width:0px}:host(.small){width:16px;height:16px}:host(.medium){width:30px;height:30px}:host(.disabled){background-color:var(--disabledColor);border-color:var(--disabledColor);color:var(--lightFontColor);cursor:default}:host(.disabled):hover{background-color:var(--disabledColor);border-color:var(--disabledColor)}:host(.disabled) .icon{cursor:default}:host(.danger){background-color:var(--dangerColor);border-color:var(--warningColor)}.tooltip-text{align-self:center}.tooltip-disabled{font-size:14px -2;counter-reset:var(--lightFontColor)}.icon{justify-content:center;align-items:center;width:100%;height:100%;border:0px;cursor:pointer;color:var(--strongFontColor);outline:0px;padding:0;background:transparent;border-radius:inherit}.wm-counter-button{position:relative}.wm-counter{display:inline-block;width:16px;height:16px;line-height:16px;position:absolute;top:0;right:0;border:none;background-color:var(--dangerColor);border-radius:50%;font-size:10px;font-weight:700;text-align:center;color:var(--strongFontColor);text-indent:-1px;overflow:hidden;white-space:nowrap}.u-btn-validate{border-color:var(--dangerColor);background-color:var(--dangerColor);color:var(--onBrandTextColor)}.u-btn-validate:hover{background-color:var(--dangerColor)}.u-btn-primary{border-color:var(--brandColor);background-color:var(--brandColor);color:var(--onBrandTextColor)}.u-btn-primary:hover{background-color:var(--onBrandHoverColor)}\n"] }]
         }], propDecorators: { counter: [{
                 type: Input
             }], unavailableText: [{