@leanix/components 0.4.872 → 0.4.873
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { InjectionToken, Input, Component, input, computed, ChangeDetectionStrategy, HostBinding, EventEmitter, HostListener, Output, Injectable, ElementRef, ViewChild, Inject, model, Directive, signal, Optional, Pipe, inject, NgModule, output, DestroyRef, ChangeDetectorRef, effect, ContentChild, afterRenderEffect, ContentChildren, ViewChildren, forwardRef, TemplateRef, viewChild, booleanAttribute, SecurityContext, Self, Host, Injector, ApplicationRef, createComponent } from '@angular/core';
|
|
3
|
-
import * as i1 from '@ngx-translate/core';
|
|
3
|
+
import * as i1$1 from '@ngx-translate/core';
|
|
4
4
|
import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
|
|
5
5
|
import { IconComponent } from '@ui5/webcomponents-ngx/main/icon';
|
|
6
6
|
import { NgTemplateOutlet, NgClass, AsyncPipe, UpperCasePipe, DecimalPipe, CommonModule, formatDate } from '@angular/common';
|
|
7
|
+
import * as i1 from '@leanix/components/ui5';
|
|
8
|
+
import { FioriReskinAwareDirective } from '@leanix/components/ui5';
|
|
7
9
|
import { BusyIndicatorComponent } from '@ui5/webcomponents-ngx/main/busy-indicator';
|
|
8
10
|
import { __decorate } from 'tslib';
|
|
9
11
|
import { escape, trimEnd, sortBy, get, isEqual as isEqual$1, toLower, some, padCharsStart, toString, toNumber, isNaN as isNaN$1, includes, last, findIndex, filter as filter$1, isObject, find, uniqueId as uniqueId$1 } from 'lodash/fp';
|
|
10
12
|
import * as i5 from 'rxjs';
|
|
11
13
|
import { BehaviorSubject, timer, Observable, Subject, combineLatest, merge, concat, fromEvent, ReplaySubject, of, map as map$1, switchMap as switchMap$1 } from 'rxjs';
|
|
12
14
|
import { skipWhile, map, switchMap, startWith, pairwise, filter, take, debounceTime, skip, withLatestFrom, distinctUntilChanged, takeUntil, delay, tap, first } from 'rxjs/operators';
|
|
13
|
-
import * as i1$
|
|
15
|
+
import * as i1$9 from '@angular/router';
|
|
14
16
|
import { RouterLink, RouterLinkActive } from '@angular/router';
|
|
15
17
|
import { CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
|
|
16
18
|
import { registerIcon } from '@ui5/webcomponents-base/dist/asset-registries/Icons.js';
|
|
@@ -21,22 +23,22 @@ import { isArray, isEqual, split, uniqueId, pick, intersection, isNil, curry } f
|
|
|
21
23
|
import { Renderer, marked } from 'marked';
|
|
22
24
|
import * as i3 from '@angular/cdk/portal';
|
|
23
25
|
import { ComponentPortal, PortalModule, CdkPortal } from '@angular/cdk/portal';
|
|
24
|
-
import * as i1$
|
|
26
|
+
import * as i1$2 from '@angular/cdk/overlay';
|
|
25
27
|
import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
|
|
26
28
|
import * as i2 from '@angular/cdk/a11y';
|
|
27
29
|
import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
|
|
28
30
|
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
|
|
29
|
-
import * as i1$
|
|
31
|
+
import * as i1$3 from '@ncstate/sat-popover';
|
|
30
32
|
import { SatPopoverModule, SatPopoverComponent } from '@ncstate/sat-popover';
|
|
31
33
|
import { ClipboardModule } from '@angular/cdk/clipboard';
|
|
32
|
-
import * as i1$
|
|
34
|
+
import * as i1$5 from '@angular/forms';
|
|
33
35
|
import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule, UntypedFormControl, NgForm, Validators, FormControl } from '@angular/forms';
|
|
34
|
-
import * as i1$
|
|
36
|
+
import * as i1$4 from 'ngx-infinite-scroll';
|
|
35
37
|
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
|
|
36
|
-
import * as i1$
|
|
38
|
+
import * as i1$6 from '@angular/cdk/drag-drop';
|
|
37
39
|
import { moveItemInArray, CdkDropList, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
|
|
38
|
-
import * as i1$
|
|
39
|
-
import * as i1$
|
|
40
|
+
import * as i1$7 from '@angular/cdk/bidi';
|
|
41
|
+
import * as i1$8 from '@angular/platform-browser';
|
|
40
42
|
import { Extension, getMarkRange, findParentNode, Editor, NodeView } from '@tiptap/core';
|
|
41
43
|
import Bold from '@tiptap/extension-bold';
|
|
42
44
|
import BulletList from '@tiptap/extension-bullet-list';
|
|
@@ -345,11 +347,11 @@ class ButtonComponent {
|
|
|
345
347
|
return this.disabled || this.showSpinner;
|
|
346
348
|
}
|
|
347
349
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
348
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ButtonComponent, isStandalone: true, selector: "button[lx-button]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: false, isRequired: false, transformFunction: null }, circle: { classPropertyName: "circle", publicName: "circle", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, endIcon: { classPropertyName: "endIcon", publicName: "endIcon", isSignal: true, isRequired: false, transformFunction: null }, showSpinner: { classPropertyName: "showSpinner", publicName: "showSpinner", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "attr.size": "this.size", "attr.color": "this.color", "attr.mode": "this.mode", "class.pressed": "this.pressed", "class.selected": "this.selected", "class.square": "this.square", "class.circle": "this.circle", "class.withIcon": "this.hasIcon", "class.loading": "this.showSpinner", "disabled": "this.isDisabled" } }, ngImport: i0, template: "@if (!icon() && !endIcon()) {\n <!-- old layout -->\n @if (showSpinner) {\n <ui5-busy-indicator [active]=\"true\" [delay]=\"0\" size=\"S\" />\n }\n <ng-container *ngTemplateOutlet=\"content\" />\n} @else {\n <div class=\"contentWrapper\">\n <!-- new layout -->\n @if (showSpinner) {\n <ui5-busy-indicator [active]=\"true\" [delay]=\"0\" size=\"S\" />\n } @else if (icon()) {\n <ui5-icon class=\"ui5Icon\" [name]=\"icon()\" data-testid=\"start-icon\" />\n }\n <ng-container *ngTemplateOutlet=\"content\" />\n @if (!showSpinner && endIcon()) {\n <ui5-icon class=\"ui5Icon\" [name]=\"endIcon()\" data-testid=\"end-icon\" />\n }\n </div>\n}\n\n<!-- ng-content with the same slot can be used once in the same template -->\n<ng-template #content>\n <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.spin{animation:spin 2s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}ui5-busy-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host(.withIcon){line-height:normal}:host(.withIcon) .contentWrapper{display:flex;height:100%;align-items:center;justify-content:center;column-gap:4px}:host(.withIcon)[mode=link] .contentWrapper{column-gap:6px}:host(.withIcon) .ui5Icon{flex-shrink:0;width:var(--lxFontSmallSize);height:var(--lxFontSmallSize);color:inherit}:host{border-radius:3px;font-weight:var(--lxFontNormal, 400);cursor:pointer;transition:color,background-color,border-color .18s;transition-delay:0s;transition-timing-function:ease}:host[disabled]:not(.loading){opacity:.5;cursor:default}:host[color=default][mode=solid]{color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=solid].loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host[color=default][mode=solid]:hover:not([disabled]),:host[color=default][mode=solid]:focus:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=default][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=default][mode=solid]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}:host[color=default][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #c2c9d6 r g b/.5);border:none}:host[color=default][mode=solid].pressed{background-color:#c2c9d6!important;border-color:#c2c9d6!important}:host[color=default][mode=solid].selected{color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=solid].selected.loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=default][mode=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=default][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=outline]:focus:not([disabled]),:host[color=default][mode=outline]:hover:not([disabled]){color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=default][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host[color=default][mode=outline]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=default][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}:host[color=default][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=ghost]:focus:not([disabled]),:host[color=default][mode=ghost]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=default][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=default][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=ghost]:active:not([disabled]){color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host[color=default][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=default][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=link]:focus:not([disabled]),:host[color=default][mode=link]:hover:not([disabled]),:host[color=default][mode=link]:active:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=default][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=default][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=default][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=solid]{color:#2a303d;background-color:#fff;border:1px solid #99a5bb}:host[color=light][mode=solid].loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host[color=light][mode=solid]:hover:not([disabled]),:host[color=light][mode=solid]:focus:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=light][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=light][mode=solid]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}:host[color=light][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #c2c9d6 r g b/.5);border:none}:host[color=light][mode=solid].pressed{background-color:#c2c9d6!important;border-color:#c2c9d6!important}:host[color=light][mode=solid].selected{color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=solid].selected.loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=light][mode=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=light][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=outline]:focus:not([disabled]),:host[color=light][mode=outline]:hover:not([disabled]){color:#2a303d;background-color:#fff;border:1px solid #fff}:host[color=light][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=light][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host[color=light][mode=outline]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=light][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}:host[color=light][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=ghost]:focus:not([disabled]),:host[color=light][mode=ghost]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=light][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=light][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=ghost]:active:not([disabled]){color:#2a303d;background-color:#fff;border:1px solid #fff}:host[color=light][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host[color=light][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=light][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=link]:focus:not([disabled]),:host[color=light][mode=link]:hover:not([disabled]),:host[color=light][mode=link]:active:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=light][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=light][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=light][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=solid]{color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=solid].loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host[color=primary][mode=solid]:hover:not([disabled]),:host[color=primary][mode=solid]:focus:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=primary][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host[color=primary][mode=solid]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcoloractive);border:1px solid var(--lx-primarybutton-backgroundcoloractive)}:host[color=primary][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcoloractive) r g b/.5);border:none}:host[color=primary][mode=solid].pressed{background-color:var(--lx-primarybutton-backgroundcoloractive)!important;border-color:var(--lx-primarybutton-backgroundcoloractive)!important}:host[color=primary][mode=solid].selected{color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=solid].selected.loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host[color=primary][mode=outline]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=outline]:focus:not([disabled]),:host[color=primary][mode=outline]:hover:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=primary][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host[color=primary][mode=outline]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host[color=primary][mode=ghost]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent}:host[color=primary][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=ghost]:focus:not([disabled]),:host[color=primary][mode=ghost]:hover:not([disabled]){color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=primary][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=ghost]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host[color=primary][mode=link]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=primary][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=link]:focus:not([disabled]),:host[color=primary][mode=link]:hover:not([disabled]),:host[color=primary][mode=link]:active:not([disabled]){color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=primary][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=primary][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=primary][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=solid]{color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=solid].loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host[color=danger][mode=solid]:hover:not([disabled]),:host[color=danger][mode=solid]:focus:not([disabled]){color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host[color=danger][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=danger][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host[color=danger][mode=solid]:active:not([disabled]){color:#fff;background-color:#bd0707;border:1px solid rgb(188.6956521739,7.3043478261,7.3043478261)}:host[color=danger][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(188.6956521739,7.3043478261,7.3043478261) r g b/.5);border:none}:host[color=danger][mode=solid].pressed{background-color:#bd0707!important;border-color:#bd0707!important}:host[color=danger][mode=solid].selected{color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host[color=danger][mode=solid].selected.loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host[color=danger][mode=outline]{color:#f96464;background-color:transparent;border:1px solid #f96464}:host[color=danger][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=outline]:focus:not([disabled]),:host[color=danger][mode=outline]:hover:not([disabled]){color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=danger][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host[color=danger][mode=outline]:active:not([disabled]){color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host[color=danger][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host[color=danger][mode=ghost]{color:#f96464;background-color:transparent;border:1px solid transparent}:host[color=danger][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=ghost]:focus:not([disabled]),:host[color=danger][mode=ghost]:hover:not([disabled]){color:#f96464;background-color:transparent;border:1px solid #f96464}:host[color=danger][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=danger][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=ghost]:active:not([disabled]){color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host[color=danger][mode=link]{color:#f96464;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=danger][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=link]:focus:not([disabled]),:host[color=danger][mode=link]:hover:not([disabled]),:host[color=danger][mode=link]:active:not([disabled]){color:#f96464;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=danger][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=danger][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=danger][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=solid]{color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=solid].loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host[color=success][mode=solid]:hover:not([disabled]),:host[color=success][mode=solid]:focus:not([disabled]){color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host[color=success][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=success][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host[color=success][mode=solid]:active:not([disabled]){color:#fff;background-color:#145223;border:1px solid rgb(20.4,81.6,35.2)}:host[color=success][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(20.4,81.6,35.2) r g b/.5);border:none}:host[color=success][mode=solid].pressed{background-color:#145223!important;border-color:#145223!important}:host[color=success][mode=solid].selected{color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host[color=success][mode=solid].selected.loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host[color=success][mode=outline]{color:#33cc58;background-color:transparent;border:1px solid #33cc58}:host[color=success][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=outline]:focus:not([disabled]),:host[color=success][mode=outline]:hover:not([disabled]){color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=success][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host[color=success][mode=outline]:active:not([disabled]){color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host[color=success][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host[color=success][mode=ghost]{color:#33cc58;background-color:transparent;border:1px solid transparent}:host[color=success][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=ghost]:focus:not([disabled]),:host[color=success][mode=ghost]:hover:not([disabled]){color:#33cc58;background-color:transparent;border:1px solid #33cc58}:host[color=success][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=success][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=ghost]:active:not([disabled]){color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host[color=success][mode=link]{color:#33cc58;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=success][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=link]:focus:not([disabled]),:host[color=success][mode=link]:hover:not([disabled]),:host[color=success][mode=link]:active:not([disabled]){color:#33cc58;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=success][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=success][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=success][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[size=small]{height:20px;padding:3px 7px;font-size:var(--lxFontSmallSize, 12px);min-width:20px}:host[size=small]:not(.withIcon){line-height:12px}:host[size=small].square{width:20px;text-align:center;padding:0}:host[size=small].circle{border-radius:10px;min-width:20px;padding:0 3px}:host[size=small].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host[size=medium]{height:24px;padding:3px 7px;font-size:var(--lxFontSize, 14px);min-width:24px}:host[size=medium]:not(.withIcon){line-height:16px}:host[size=medium].square{width:24px;text-align:center;padding:0}:host[size=medium].circle{border-radius:11px;min-width:24px;padding:0 3px}:host[size=medium].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host[size=large]{height:32px;padding:7px 11px;font-size:var(--lxFontSize, 14px);min-width:32px}:host[size=large]:not(.withIcon){line-height:16px}:host[size=large].square{width:32px;text-align:center;padding:0}:host[size=large].circle{border-radius:15px;min-width:32px;padding:0 7px}:host[size=large].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host[size=auto]{height:auto;padding:0;font-size:inherit;min-width:auto}:host[size=auto]:not(.withIcon){line-height:normal}:host[size=auto].square{width:auto;text-align:center;padding:0}:host[size=auto].circle{border-radius:unset;min-width:auto;padding:0}:host[size=auto].circle{height:auto;padding:0;font-size:inherit;min-width:auto}:host[size=auto].circle:not(.withIcon){line-height:normal}:host[size=auto].circle.square{width:auto;text-align:center;padding:0}:host[size=auto].circle.circle{border-radius:10px;min-width:auto;padding:0}:host.loading{position:relative;color:transparent!important}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BusyIndicatorComponent, selector: "ui5-busy-indicator", inputs: ["text", "size", "active", "delay", "textPlacement"], exportAs: ["ui5BusyIndicator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
350
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ButtonComponent, isStandalone: true, selector: "button[lx-button]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: false, isRequired: false, transformFunction: null }, circle: { classPropertyName: "circle", publicName: "circle", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, endIcon: { classPropertyName: "endIcon", publicName: "endIcon", isSignal: true, isRequired: false, transformFunction: null }, showSpinner: { classPropertyName: "showSpinner", publicName: "showSpinner", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "attr.size": "this.size", "attr.color": "this.color", "attr.mode": "this.mode", "class.pressed": "this.pressed", "class.selected": "this.selected", "class.square": "this.square", "class.circle": "this.circle", "class.withIcon": "this.hasIcon", "class.loading": "this.showSpinner", "disabled": "this.isDisabled" } }, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "@if (!icon() && !endIcon()) {\n <!-- old layout -->\n @if (showSpinner) {\n <ui5-busy-indicator [active]=\"true\" [delay]=\"0\" size=\"S\" />\n }\n <ng-container *ngTemplateOutlet=\"content\" />\n} @else {\n <div class=\"contentWrapper\">\n <!-- new layout -->\n @if (showSpinner) {\n <ui5-busy-indicator [active]=\"true\" [delay]=\"0\" size=\"S\" />\n } @else if (icon()) {\n <ui5-icon class=\"ui5Icon\" [name]=\"icon()\" data-testid=\"start-icon\" />\n }\n <ng-container *ngTemplateOutlet=\"content\" />\n @if (!showSpinner && endIcon()) {\n <ui5-icon class=\"ui5Icon\" [name]=\"endIcon()\" data-testid=\"end-icon\" />\n }\n </div>\n}\n\n<!-- ng-content with the same slot can be used once in the same template -->\n<ng-template #content>\n <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.spin{animation:spin 2s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}ui5-busy-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host(.withIcon):where(:not(.lxFioriReskin)){line-height:normal}:host(.withIcon):where(:not(.lxFioriReskin)) .contentWrapper{display:flex;height:100%;align-items:center;justify-content:center;column-gap:4px}:host(.withIcon):where(:not(.lxFioriReskin))[mode=link] .contentWrapper{column-gap:6px}:host(.withIcon):where(:not(.lxFioriReskin)) .ui5Icon{flex-shrink:0;width:var(--lxFontSmallSize);height:var(--lxFontSmallSize);color:inherit}:host:where(:not(.lxFioriReskin)){border-radius:3px;font-weight:var(--lxFontNormal, 400);cursor:pointer;transition:color,background-color,border-color .18s;transition-delay:0s;transition-timing-function:ease}:host:where(:not(.lxFioriReskin))[disabled]:not(.loading){opacity:.5;cursor:default}:host:where(:not(.lxFioriReskin))[color=default][mode=solid]{color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host:where(:not(.lxFioriReskin))[color=default][mode=solid].loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=solid]:hover:not([disabled]),:host:where(:not(.lxFioriReskin))[color=default][mode=solid]:focus:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin))[color=default][mode=solid]:hover:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=default][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=solid]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}:host:where(:not(.lxFioriReskin))[color=default][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #c2c9d6 r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=solid].pressed{background-color:#c2c9d6!important;border-color:#c2c9d6!important}:host:where(:not(.lxFioriReskin))[color=default][mode=solid].selected{color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin))[color=default][mode=solid].selected.loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin))[color=default][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=outline]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=default][mode=outline]:hover:not([disabled]){color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host:where(:not(.lxFioriReskin))[color=default][mode=outline]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=default][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=outline]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin))[color=default][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}:host:where(:not(.lxFioriReskin))[color=default][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=ghost]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=default][mode=ghost]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin))[color=default][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=default][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=ghost]:active:not([disabled]){color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host:where(:not(.lxFioriReskin))[color=default][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=link]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=default][mode=link]:hover:not([disabled]),:host:where(:not(.lxFioriReskin))[color=default][mode=link]:active:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=link]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=default][mode=link]:hover:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=default][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=solid]{color:#2a303d;background-color:#fff;border:1px solid #99a5bb}:host:where(:not(.lxFioriReskin))[color=light][mode=solid].loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=solid]:hover:not([disabled]),:host:where(:not(.lxFioriReskin))[color=light][mode=solid]:focus:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin))[color=light][mode=solid]:hover:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=light][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=solid]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}:host:where(:not(.lxFioriReskin))[color=light][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #c2c9d6 r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=solid].pressed{background-color:#c2c9d6!important;border-color:#c2c9d6!important}:host:where(:not(.lxFioriReskin))[color=light][mode=solid].selected{color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin))[color=light][mode=solid].selected.loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin))[color=light][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=outline]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=light][mode=outline]:hover:not([disabled]){color:#2a303d;background-color:#fff;border:1px solid #fff}:host:where(:not(.lxFioriReskin))[color=light][mode=outline]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=light][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=outline]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin))[color=light][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}:host:where(:not(.lxFioriReskin))[color=light][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=ghost]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=light][mode=ghost]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin))[color=light][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=light][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=ghost]:active:not([disabled]){color:#2a303d;background-color:#fff;border:1px solid #fff}:host:where(:not(.lxFioriReskin))[color=light][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=link]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=light][mode=link]:hover:not([disabled]),:host:where(:not(.lxFioriReskin))[color=light][mode=link]:active:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=link]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=light][mode=link]:hover:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=light][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=solid]{color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host:where(:not(.lxFioriReskin))[color=primary][mode=solid].loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=solid]:hover:not([disabled]),:host:where(:not(.lxFioriReskin))[color=primary][mode=solid]:focus:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host:where(:not(.lxFioriReskin))[color=primary][mode=solid]:hover:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=primary][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=solid]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcoloractive);border:1px solid var(--lx-primarybutton-backgroundcoloractive)}:host:where(:not(.lxFioriReskin))[color=primary][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcoloractive) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=solid].pressed{background-color:var(--lx-primarybutton-backgroundcoloractive)!important;border-color:var(--lx-primarybutton-backgroundcoloractive)!important}:host:where(:not(.lxFioriReskin))[color=primary][mode=solid].selected{color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host:where(:not(.lxFioriReskin))[color=primary][mode=solid].selected.loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=outline]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid var(--lx-primarybutton-backgroundcolor)}:host:where(:not(.lxFioriReskin))[color=primary][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=outline]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=primary][mode=outline]:hover:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host:where(:not(.lxFioriReskin))[color=primary][mode=outline]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=primary][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=outline]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host:where(:not(.lxFioriReskin))[color=primary][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=ghost]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent}:host:where(:not(.lxFioriReskin))[color=primary][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=ghost]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=primary][mode=ghost]:hover:not([disabled]){color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid var(--lx-primarybutton-backgroundcolor)}:host:where(:not(.lxFioriReskin))[color=primary][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=primary][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=ghost]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host:where(:not(.lxFioriReskin))[color=primary][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=link]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent;padding:0;border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=link]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=primary][mode=link]:hover:not([disabled]),:host:where(:not(.lxFioriReskin))[color=primary][mode=link]:active:not([disabled]){color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=link]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=primary][mode=link]:hover:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=primary][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=solid]{color:#fff;background-color:#f96464;border:1px solid #f96464}:host:where(:not(.lxFioriReskin))[color=danger][mode=solid].loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=solid]:hover:not([disabled]),:host:where(:not(.lxFioriReskin))[color=danger][mode=solid]:focus:not([disabled]){color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host:where(:not(.lxFioriReskin))[color=danger][mode=solid]:hover:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=danger][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=solid]:active:not([disabled]){color:#fff;background-color:#bd0707;border:1px solid rgb(188.6956521739,7.3043478261,7.3043478261)}:host:where(:not(.lxFioriReskin))[color=danger][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(188.6956521739,7.3043478261,7.3043478261) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=solid].pressed{background-color:#bd0707!important;border-color:#bd0707!important}:host:where(:not(.lxFioriReskin))[color=danger][mode=solid].selected{color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host:where(:not(.lxFioriReskin))[color=danger][mode=solid].selected.loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=outline]{color:#f96464;background-color:transparent;border:1px solid #f96464}:host:where(:not(.lxFioriReskin))[color=danger][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=outline]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=danger][mode=outline]:hover:not([disabled]){color:#fff;background-color:#f96464;border:1px solid #f96464}:host:where(:not(.lxFioriReskin))[color=danger][mode=outline]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=danger][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=outline]:active:not([disabled]){color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host:where(:not(.lxFioriReskin))[color=danger][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=ghost]{color:#f96464;background-color:transparent;border:1px solid transparent}:host:where(:not(.lxFioriReskin))[color=danger][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=ghost]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=danger][mode=ghost]:hover:not([disabled]){color:#f96464;background-color:transparent;border:1px solid #f96464}:host:where(:not(.lxFioriReskin))[color=danger][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=danger][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=ghost]:active:not([disabled]){color:#fff;background-color:#f96464;border:1px solid #f96464}:host:where(:not(.lxFioriReskin))[color=danger][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=link]{color:#f96464;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=link]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=danger][mode=link]:hover:not([disabled]),:host:where(:not(.lxFioriReskin))[color=danger][mode=link]:active:not([disabled]){color:#f96464;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=link]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=danger][mode=link]:hover:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=danger][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=solid]{color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host:where(:not(.lxFioriReskin))[color=success][mode=solid].loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=solid]:hover:not([disabled]),:host:where(:not(.lxFioriReskin))[color=success][mode=solid]:focus:not([disabled]){color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host:where(:not(.lxFioriReskin))[color=success][mode=solid]:hover:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=success][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=solid]:active:not([disabled]){color:#fff;background-color:#145223;border:1px solid rgb(20.4,81.6,35.2)}:host:where(:not(.lxFioriReskin))[color=success][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(20.4,81.6,35.2) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=solid].pressed{background-color:#145223!important;border-color:#145223!important}:host:where(:not(.lxFioriReskin))[color=success][mode=solid].selected{color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host:where(:not(.lxFioriReskin))[color=success][mode=solid].selected.loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=outline]{color:#33cc58;background-color:transparent;border:1px solid #33cc58}:host:where(:not(.lxFioriReskin))[color=success][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=outline]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=success][mode=outline]:hover:not([disabled]){color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host:where(:not(.lxFioriReskin))[color=success][mode=outline]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=success][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=outline]:active:not([disabled]){color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host:where(:not(.lxFioriReskin))[color=success][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=ghost]{color:#33cc58;background-color:transparent;border:1px solid transparent}:host:where(:not(.lxFioriReskin))[color=success][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=ghost]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=success][mode=ghost]:hover:not([disabled]){color:#33cc58;background-color:transparent;border:1px solid #33cc58}:host:where(:not(.lxFioriReskin))[color=success][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=success][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=ghost]:active:not([disabled]){color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host:where(:not(.lxFioriReskin))[color=success][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=link]{color:#33cc58;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=link]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=success][mode=link]:hover:not([disabled]),:host:where(:not(.lxFioriReskin))[color=success][mode=link]:active:not([disabled]){color:#33cc58;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=link]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=success][mode=link]:hover:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=success][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[size=small]{height:20px;padding:3px 7px;font-size:var(--lxFontSmallSize, 12px);min-width:20px}:host:where(:not(.lxFioriReskin))[size=small]:not(.withIcon){line-height:12px}:host:where(:not(.lxFioriReskin))[size=small].square{width:20px;text-align:center;padding:0}:host:where(:not(.lxFioriReskin))[size=small].circle{border-radius:10px;min-width:20px;padding:0 3px}:host:where(:not(.lxFioriReskin))[size=small].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host:where(:not(.lxFioriReskin))[size=medium]{height:24px;padding:3px 7px;font-size:var(--lxFontSize, 14px);min-width:24px}:host:where(:not(.lxFioriReskin))[size=medium]:not(.withIcon){line-height:16px}:host:where(:not(.lxFioriReskin))[size=medium].square{width:24px;text-align:center;padding:0}:host:where(:not(.lxFioriReskin))[size=medium].circle{border-radius:11px;min-width:24px;padding:0 3px}:host:where(:not(.lxFioriReskin))[size=medium].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host:where(:not(.lxFioriReskin))[size=large]{height:32px;padding:7px 11px;font-size:var(--lxFontSize, 14px);min-width:32px}:host:where(:not(.lxFioriReskin))[size=large]:not(.withIcon){line-height:16px}:host:where(:not(.lxFioriReskin))[size=large].square{width:32px;text-align:center;padding:0}:host:where(:not(.lxFioriReskin))[size=large].circle{border-radius:15px;min-width:32px;padding:0 7px}:host:where(:not(.lxFioriReskin))[size=large].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host:where(:not(.lxFioriReskin))[size=auto]{height:auto;padding:0;font-size:inherit;min-width:auto}:host:where(:not(.lxFioriReskin))[size=auto]:not(.withIcon){line-height:normal}:host:where(:not(.lxFioriReskin))[size=auto].square{width:auto;text-align:center;padding:0}:host:where(:not(.lxFioriReskin))[size=auto].circle{border-radius:unset;min-width:auto;padding:0}:host:where(:not(.lxFioriReskin))[size=auto].circle{height:auto;padding:0;font-size:inherit;min-width:auto}:host:where(:not(.lxFioriReskin))[size=auto].circle:not(.withIcon){line-height:normal}:host:where(:not(.lxFioriReskin))[size=auto].circle.square{width:auto;text-align:center;padding:0}:host:where(:not(.lxFioriReskin))[size=auto].circle.circle{border-radius:10px;min-width:auto;padding:0}:host:where(:not(.lxFioriReskin)).loading{position:relative;color:transparent!important}:host(.lxFioriReskin){display:inline-flex;align-items:center;justify-content:center;border-radius:var(--sapButton_BorderCornerRadius);font-family:var(--sapButton_FontFamily);cursor:pointer;border:var(--sapButton_BorderWidth) solid transparent;line-height:normal;vertical-align:middle;height:var(--sapElement_Compact_Height);padding:0 .4375rem;font-size:var(--sapFontSize);min-width:2rem}:host(.lxFioriReskin)[disabled]{cursor:default;pointer-events:unset}:host(.lxFioriReskin)[disabled]:active{pointer-events:none}:host(.lxFioriReskin)[disabled]:not(.loading){opacity:var(--sapContent_DisabledOpacity)}:host(.lxFioriReskin):focus-visible:not([disabled]),:host(.lxFioriReskin):focus-within:not([disabled]),:host(.lxFioriReskin):active:not([disabled]){outline:.125rem solid var(--sapContent_FocusColor);outline-offset:-.25rem}:host(.lxFioriReskin)[color=default][mode=solid],:host(.lxFioriReskin)[color=light][mode=solid]{background-color:var(--sapButton_Background);border-color:var(--sapButton_BorderColor);color:var(--sapButton_TextColor)}:host(.lxFioriReskin)[color=default][mode=solid]:hover:not([disabled]),:host(.lxFioriReskin)[color=light][mode=solid]:hover:not([disabled]){background-color:var(--sapButton_Hover_Background);border-color:var(--sapButton_Hover_BorderColor);color:var(--sapButton_Hover_TextColor)}:host(.lxFioriReskin)[color=default][mode=solid]:active:not([disabled]),:host(.lxFioriReskin)[color=default][mode=solid].pressed,:host(.lxFioriReskin)[color=light][mode=solid]:active:not([disabled]),:host(.lxFioriReskin)[color=light][mode=solid].pressed{background-color:var(--sapButton_Active_Background);border-color:var(--sapButton_Active_BorderColor);color:var(--sapButton_Active_TextColor)}:host(.lxFioriReskin)[color=default][mode=solid].loading,:host(.lxFioriReskin)[color=light][mode=solid].loading{background-color:rgb(from var(--sapButton_Background) r g b/var(--sapContent_DisabledOpacity))}:host(.lxFioriReskin)[color=default][mode=outline],:host(.lxFioriReskin)[color=light][mode=outline]{background-color:transparent;border-color:var(--sapButton_BorderColor);color:var(--sapButton_TextColor)}:host(.lxFioriReskin)[color=default][mode=outline]:hover:not([disabled]),:host(.lxFioriReskin)[color=light][mode=outline]:hover:not([disabled]){background-color:var(--sapButton_Hover_Background);border-color:var(--sapButton_Hover_BorderColor);color:var(--sapButton_TextColor)}:host(.lxFioriReskin)[color=default][mode=outline]:active:not([disabled]),:host(.lxFioriReskin)[color=light][mode=outline]:active:not([disabled]){background-color:var(--sapButton_Active_Background);border-color:var(--sapButton_Active_BorderColor);color:var(--sapButton_TextColor)}:host(.lxFioriReskin)[color=default][mode=outline].loading,:host(.lxFioriReskin)[color=light][mode=outline].loading{border-color:rgb(from var(--sapButton_BorderColor) r g b/var(--sapContent_DisabledOpacity))}:host(.lxFioriReskin)[color=default][mode=ghost],:host(.lxFioriReskin)[color=light][mode=ghost]{background-color:transparent;border-color:transparent;color:var(--sapButton_TextColor)}:host(.lxFioriReskin)[color=default][mode=ghost]:hover:not([disabled]),:host(.lxFioriReskin)[color=light][mode=ghost]:hover:not([disabled]){background-color:transparent;border-color:var(--sapButton_BorderColor);color:var(--sapButton_TextColor)}:host(.lxFioriReskin)[color=default][mode=ghost]:active:not([disabled]),:host(.lxFioriReskin)[color=light][mode=ghost]:active:not([disabled]){background-color:var(--sapButton_Background);border-color:var(--sapButton_Active_BorderColor);color:var(--sapButton_TextColor)}:host(.lxFioriReskin)[color=default][mode=link],:host(.lxFioriReskin)[color=light][mode=link]{background-color:transparent;border-color:transparent;color:var(--sapButton_TextColor)}:host(.lxFioriReskin)[color=default][mode=link]:hover:not([disabled]),:host(.lxFioriReskin)[color=light][mode=link]:hover:not([disabled]){background-color:transparent;border-color:transparent;color:var(--sapButton_TextColor)}:host(.lxFioriReskin)[color=default][mode=link]:active:not([disabled]),:host(.lxFioriReskin)[color=light][mode=link]:active:not([disabled]){background-color:transparent;border-color:var(--sapButton_Active_BorderColor);color:var(--sapButton_TextColor)}:host(.lxFioriReskin)[color=default][mode=link]:hover:not([disabled]),:host(.lxFioriReskin)[color=default][mode=link]:focus:not([disabled]),:host(.lxFioriReskin)[color=light][mode=link]:hover:not([disabled]),:host(.lxFioriReskin)[color=light][mode=link]:focus:not([disabled]){text-decoration:underline}:host(.lxFioriReskin)[color=default].selected,:host(.lxFioriReskin)[color=light].selected{background-color:var(--sapButton_Selected_Background);border-color:var(--sapButton_Selected_BorderColor);color:var(--sapButton_Selected_TextColor)}:host(.lxFioriReskin)[color=default].selected:hover:not([disabled]),:host(.lxFioriReskin)[color=light].selected:hover:not([disabled]){background-color:var(--sapButton_Selected_Hover_Background);border-color:var(--sapButton_Selected_Hover_BorderColor);color:var(--sapButton_Selected_TextColor)}:host(.lxFioriReskin)[color=primary][mode=solid]{background-color:var(--sapButton_Emphasized_Background);border-color:var(--sapButton_Emphasized_BorderColor);color:var(--sapButton_Emphasized_TextColor)}:host(.lxFioriReskin)[color=primary][mode=solid]:hover:not([disabled]){background-color:var(--sapButton_Emphasized_Hover_Background);border-color:var(--sapButton_Emphasized_Hover_BorderColor);color:var(--sapButton_Emphasized_Hover_TextColor)}:host(.lxFioriReskin)[color=primary][mode=solid]:active:not([disabled]),:host(.lxFioriReskin)[color=primary][mode=solid].pressed{background-color:var(--sapButton_Emphasized_Active_Background);border-color:var(--sapButton_Emphasized_Active_BorderColor);color:var(--sapButton_Emphasized_Active_TextColor)}:host(.lxFioriReskin)[color=primary][mode=solid].loading{background-color:rgb(from var(--sapButton_Emphasized_Background) r g b/var(--sapContent_DisabledOpacity))}:host(.lxFioriReskin)[color=primary][mode=outline]{background-color:transparent;border-color:var(--sapButton_Emphasized_BorderColor);color:var(--sapButton_Lite_TextColor)}:host(.lxFioriReskin)[color=primary][mode=outline]:hover:not([disabled]){background-color:var(--sapButton_Emphasized_Hover_Background);border-color:var(--sapButton_Emphasized_Hover_BorderColor);color:var(--sapButton_Emphasized_TextColor)}:host(.lxFioriReskin)[color=primary][mode=outline]:active:not([disabled]){background-color:var(--sapButton_Emphasized_Active_Background);border-color:var(--sapButton_Emphasized_Active_BorderColor);color:var(--sapButton_Lite_TextColor)}:host(.lxFioriReskin)[color=primary][mode=outline].loading{border-color:rgb(from var(--sapButton_Emphasized_BorderColor) r g b/var(--sapContent_DisabledOpacity))}:host(.lxFioriReskin)[color=primary][mode=ghost]{background-color:transparent;border-color:transparent;color:var(--sapButton_Lite_TextColor)}:host(.lxFioriReskin)[color=primary][mode=ghost]:hover:not([disabled]){background-color:transparent;border-color:var(--sapButton_Emphasized_BorderColor);color:var(--sapButton_Lite_TextColor)}:host(.lxFioriReskin)[color=primary][mode=ghost]:active:not([disabled]){background-color:var(--sapButton_Emphasized_Background);border-color:var(--sapButton_Emphasized_Active_BorderColor);color:var(--sapButton_Emphasized_TextColor)}:host(.lxFioriReskin)[color=primary][mode=link]{background-color:transparent;border-color:transparent;color:var(--sapButton_Lite_TextColor)}:host(.lxFioriReskin)[color=primary][mode=link]:hover:not([disabled]){background-color:transparent;border-color:transparent;color:var(--sapButton_Lite_TextColor)}:host(.lxFioriReskin)[color=primary][mode=link]:active:not([disabled]){background-color:transparent;border-color:var(--sapButton_Emphasized_Active_BorderColor);color:var(--sapButton_Lite_TextColor)}:host(.lxFioriReskin)[color=primary][mode=link]:hover:not([disabled]),:host(.lxFioriReskin)[color=primary][mode=link]:focus:not([disabled]){text-decoration:underline}:host(.lxFioriReskin)[color=primary][mode=solid]{font-family:var(--sapButton_Emphasized_FontFamily)}:host(.lxFioriReskin)[color=primary][mode=solid]:focus-visible:not([disabled],:active),:host(.lxFioriReskin)[color=primary][mode=solid]:focus-within:not([disabled],:active){outline-color:var(--sapContent_ContrastFocusColor)}:host(.lxFioriReskin)[color=primary].selected{background-color:var(--sapButton_Selected_Background);border-color:var(--sapButton_Selected_BorderColor);color:var(--sapButton_Selected_TextColor)}:host(.lxFioriReskin)[color=primary].selected:hover:not([disabled]){background-color:var(--sapButton_Selected_Hover_Background);border-color:var(--sapButton_Selected_Hover_BorderColor);color:var(--sapButton_Selected_TextColor)}:host(.lxFioriReskin)[color=danger][mode=solid]{background-color:var(--sapButton_Reject_Background);border-color:var(--sapButton_Reject_BorderColor);color:var(--sapButton_Reject_TextColor)}:host(.lxFioriReskin)[color=danger][mode=solid]:hover:not([disabled]){background-color:var(--sapButton_Reject_Hover_Background);border-color:var(--sapButton_Reject_Hover_BorderColor);color:var(--sapButton_Reject_Hover_TextColor)}:host(.lxFioriReskin)[color=danger][mode=solid]:active:not([disabled]),:host(.lxFioriReskin)[color=danger][mode=solid].pressed{background-color:var(--sapButton_Reject_Active_Background);border-color:var(--sapButton_Reject_Active_BorderColor);color:var(--sapButton_Reject_Active_TextColor)}:host(.lxFioriReskin)[color=danger][mode=solid].loading{background-color:rgb(from var(--sapButton_Reject_Background) r g b/var(--sapContent_DisabledOpacity))}:host(.lxFioriReskin)[color=danger][mode=outline]{background-color:transparent;border-color:var(--sapButton_Reject_BorderColor);color:var(--sapButton_Reject_TextColor)}:host(.lxFioriReskin)[color=danger][mode=outline]:hover:not([disabled]){background-color:var(--sapButton_Reject_Hover_Background);border-color:var(--sapButton_Reject_Hover_BorderColor);color:var(--sapButton_Reject_TextColor)}:host(.lxFioriReskin)[color=danger][mode=outline]:active:not([disabled]){background-color:var(--sapButton_Reject_Active_Background);border-color:var(--sapButton_Reject_Active_BorderColor);color:var(--sapButton_Reject_TextColor)}:host(.lxFioriReskin)[color=danger][mode=outline].loading{border-color:rgb(from var(--sapButton_Reject_BorderColor) r g b/var(--sapContent_DisabledOpacity))}:host(.lxFioriReskin)[color=danger][mode=ghost]{background-color:transparent;border-color:transparent;color:var(--sapButton_Reject_TextColor)}:host(.lxFioriReskin)[color=danger][mode=ghost]:hover:not([disabled]){background-color:transparent;border-color:var(--sapButton_Reject_BorderColor);color:var(--sapButton_Reject_TextColor)}:host(.lxFioriReskin)[color=danger][mode=ghost]:active:not([disabled]){background-color:var(--sapButton_Reject_Background);border-color:var(--sapButton_Reject_Active_BorderColor);color:var(--sapButton_Reject_TextColor)}:host(.lxFioriReskin)[color=danger][mode=link]{background-color:transparent;border-color:transparent;color:var(--sapButton_Reject_TextColor)}:host(.lxFioriReskin)[color=danger][mode=link]:hover:not([disabled]){background-color:transparent;border-color:transparent;color:var(--sapButton_Reject_TextColor)}:host(.lxFioriReskin)[color=danger][mode=link]:active:not([disabled]){background-color:transparent;border-color:var(--sapButton_Reject_Active_BorderColor);color:var(--sapButton_Reject_TextColor)}:host(.lxFioriReskin)[color=danger][mode=link]:hover:not([disabled]),:host(.lxFioriReskin)[color=danger][mode=link]:focus:not([disabled]){text-decoration:underline}:host(.lxFioriReskin)[color=danger].selected{background-color:var(--sapButton_Reject_Selected_Background);border-color:var(--sapButton_Reject_Selected_BorderColor);color:var(--sapButton_Reject_Selected_TextColor)}:host(.lxFioriReskin)[color=danger].selected:hover:not([disabled]){background-color:var(--sapButton_Reject_Selected_Hover_Background);border-color:var(--sapButton_Reject_Selected_Hover_BorderColor);color:var(--sapButton_Reject_Selected_TextColor)}:host(.lxFioriReskin)[color=success][mode=solid]{background-color:var(--sapButton_Accept_Background);border-color:var(--sapButton_Accept_BorderColor);color:var(--sapButton_Accept_TextColor)}:host(.lxFioriReskin)[color=success][mode=solid]:hover:not([disabled]){background-color:var(--sapButton_Accept_Hover_Background);border-color:var(--sapButton_Accept_Hover_BorderColor);color:var(--sapButton_Accept_Hover_TextColor)}:host(.lxFioriReskin)[color=success][mode=solid]:active:not([disabled]),:host(.lxFioriReskin)[color=success][mode=solid].pressed{background-color:var(--sapButton_Accept_Active_Background);border-color:var(--sapButton_Accept_Active_BorderColor);color:var(--sapButton_Accept_Active_TextColor)}:host(.lxFioriReskin)[color=success][mode=solid].loading{background-color:rgb(from var(--sapButton_Accept_Background) r g b/var(--sapContent_DisabledOpacity))}:host(.lxFioriReskin)[color=success][mode=outline]{background-color:transparent;border-color:var(--sapButton_Accept_BorderColor);color:var(--sapButton_Accept_TextColor)}:host(.lxFioriReskin)[color=success][mode=outline]:hover:not([disabled]){background-color:var(--sapButton_Accept_Hover_Background);border-color:var(--sapButton_Accept_Hover_BorderColor);color:var(--sapButton_Accept_TextColor)}:host(.lxFioriReskin)[color=success][mode=outline]:active:not([disabled]){background-color:var(--sapButton_Accept_Active_Background);border-color:var(--sapButton_Accept_Active_BorderColor);color:var(--sapButton_Accept_TextColor)}:host(.lxFioriReskin)[color=success][mode=outline].loading{border-color:rgb(from var(--sapButton_Accept_BorderColor) r g b/var(--sapContent_DisabledOpacity))}:host(.lxFioriReskin)[color=success][mode=ghost]{background-color:transparent;border-color:transparent;color:var(--sapButton_Accept_TextColor)}:host(.lxFioriReskin)[color=success][mode=ghost]:hover:not([disabled]){background-color:transparent;border-color:var(--sapButton_Accept_BorderColor);color:var(--sapButton_Accept_TextColor)}:host(.lxFioriReskin)[color=success][mode=ghost]:active:not([disabled]){background-color:var(--sapButton_Accept_Background);border-color:var(--sapButton_Accept_Active_BorderColor);color:var(--sapButton_Accept_TextColor)}:host(.lxFioriReskin)[color=success][mode=link]{background-color:transparent;border-color:transparent;color:var(--sapButton_Accept_TextColor)}:host(.lxFioriReskin)[color=success][mode=link]:hover:not([disabled]){background-color:transparent;border-color:transparent;color:var(--sapButton_Accept_TextColor)}:host(.lxFioriReskin)[color=success][mode=link]:active:not([disabled]){background-color:transparent;border-color:var(--sapButton_Accept_Active_BorderColor);color:var(--sapButton_Accept_TextColor)}:host(.lxFioriReskin)[color=success][mode=link]:hover:not([disabled]),:host(.lxFioriReskin)[color=success][mode=link]:focus:not([disabled]){text-decoration:underline}:host(.lxFioriReskin)[color=success].selected{background-color:var(--sapButton_Accept_Selected_Background);border-color:var(--sapButton_Accept_Selected_BorderColor);color:var(--sapButton_Accept_Selected_TextColor)}:host(.lxFioriReskin)[color=success].selected:hover:not([disabled]){background-color:var(--sapButton_Accept_Selected_Hover_Background);border-color:var(--sapButton_Accept_Selected_Hover_BorderColor);color:var(--sapButton_Accept_Selected_TextColor)}:host(.lxFioriReskin).square{width:var(--sapElement_Compact_Height);padding:0;text-align:center}:host(.lxFioriReskin).circle{border-radius:50%;min-width:var(--sapElement_Compact_Height);padding:0}:host(.lxFioriReskin).withIcon:not(.square,.circle,[mode=link]){padding:0 .5rem}:host(.lxFioriReskin)[size=auto]{height:auto;padding:0;font-size:inherit;min-width:unset}:host(.lxFioriReskin).loading{position:relative;color:transparent!important;pointer-events:unset}:host(.lxFioriReskin) .contentWrapper{display:flex;height:100%;align-items:center;justify-content:center;column-gap:.375rem}:host(.lxFioriReskin) .ui5Icon{flex-shrink:0;width:1rem;height:1rem;color:inherit}:host(.lxFioriReskin)[mode=link] .contentWrapper{column-gap:.5rem}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BusyIndicatorComponent, selector: "ui5-busy-indicator", inputs: ["text", "size", "active", "delay", "textPlacement"], exportAs: ["ui5BusyIndicator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
349
351
|
}
|
|
350
352
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
351
353
|
type: Component,
|
|
352
|
-
args: [{ selector: 'button[lx-button]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, NgTemplateOutlet, BusyIndicatorComponent], template: "@if (!icon() && !endIcon()) {\n <!-- old layout -->\n @if (showSpinner) {\n <ui5-busy-indicator [active]=\"true\" [delay]=\"0\" size=\"S\" />\n }\n <ng-container *ngTemplateOutlet=\"content\" />\n} @else {\n <div class=\"contentWrapper\">\n <!-- new layout -->\n @if (showSpinner) {\n <ui5-busy-indicator [active]=\"true\" [delay]=\"0\" size=\"S\" />\n } @else if (icon()) {\n <ui5-icon class=\"ui5Icon\" [name]=\"icon()\" data-testid=\"start-icon\" />\n }\n <ng-container *ngTemplateOutlet=\"content\" />\n @if (!showSpinner && endIcon()) {\n <ui5-icon class=\"ui5Icon\" [name]=\"endIcon()\" data-testid=\"end-icon\" />\n }\n </div>\n}\n\n<!-- ng-content with the same slot can be used once in the same template -->\n<ng-template #content>\n <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.spin{animation:spin 2s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}ui5-busy-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host(.withIcon){line-height:normal}:host(.withIcon) .contentWrapper{display:flex;height:100%;align-items:center;justify-content:center;column-gap:4px}:host(.withIcon)[mode=link] .contentWrapper{column-gap:6px}:host(.withIcon) .ui5Icon{flex-shrink:0;width:var(--lxFontSmallSize);height:var(--lxFontSmallSize);color:inherit}:host{border-radius:3px;font-weight:var(--lxFontNormal, 400);cursor:pointer;transition:color,background-color,border-color .18s;transition-delay:0s;transition-timing-function:ease}:host[disabled]:not(.loading){opacity:.5;cursor:default}:host[color=default][mode=solid]{color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=solid].loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host[color=default][mode=solid]:hover:not([disabled]),:host[color=default][mode=solid]:focus:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=default][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=default][mode=solid]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}:host[color=default][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #c2c9d6 r g b/.5);border:none}:host[color=default][mode=solid].pressed{background-color:#c2c9d6!important;border-color:#c2c9d6!important}:host[color=default][mode=solid].selected{color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=solid].selected.loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=default][mode=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=default][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=outline]:focus:not([disabled]),:host[color=default][mode=outline]:hover:not([disabled]){color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=default][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host[color=default][mode=outline]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=default][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}:host[color=default][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=ghost]:focus:not([disabled]),:host[color=default][mode=ghost]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=default][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=default][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=ghost]:active:not([disabled]){color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host[color=default][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=default][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=link]:focus:not([disabled]),:host[color=default][mode=link]:hover:not([disabled]),:host[color=default][mode=link]:active:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=default][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=default][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=default][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=solid]{color:#2a303d;background-color:#fff;border:1px solid #99a5bb}:host[color=light][mode=solid].loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host[color=light][mode=solid]:hover:not([disabled]),:host[color=light][mode=solid]:focus:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=light][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=light][mode=solid]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}:host[color=light][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #c2c9d6 r g b/.5);border:none}:host[color=light][mode=solid].pressed{background-color:#c2c9d6!important;border-color:#c2c9d6!important}:host[color=light][mode=solid].selected{color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=solid].selected.loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=light][mode=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=light][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=outline]:focus:not([disabled]),:host[color=light][mode=outline]:hover:not([disabled]){color:#2a303d;background-color:#fff;border:1px solid #fff}:host[color=light][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=light][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host[color=light][mode=outline]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=light][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}:host[color=light][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=ghost]:focus:not([disabled]),:host[color=light][mode=ghost]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=light][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=light][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=ghost]:active:not([disabled]){color:#2a303d;background-color:#fff;border:1px solid #fff}:host[color=light][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host[color=light][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=light][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=link]:focus:not([disabled]),:host[color=light][mode=link]:hover:not([disabled]),:host[color=light][mode=link]:active:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=light][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=light][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=light][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=solid]{color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=solid].loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host[color=primary][mode=solid]:hover:not([disabled]),:host[color=primary][mode=solid]:focus:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=primary][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host[color=primary][mode=solid]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcoloractive);border:1px solid var(--lx-primarybutton-backgroundcoloractive)}:host[color=primary][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcoloractive) r g b/.5);border:none}:host[color=primary][mode=solid].pressed{background-color:var(--lx-primarybutton-backgroundcoloractive)!important;border-color:var(--lx-primarybutton-backgroundcoloractive)!important}:host[color=primary][mode=solid].selected{color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=solid].selected.loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host[color=primary][mode=outline]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=outline]:focus:not([disabled]),:host[color=primary][mode=outline]:hover:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=primary][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host[color=primary][mode=outline]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host[color=primary][mode=ghost]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent}:host[color=primary][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=ghost]:focus:not([disabled]),:host[color=primary][mode=ghost]:hover:not([disabled]){color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=primary][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=ghost]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host[color=primary][mode=link]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=primary][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=link]:focus:not([disabled]),:host[color=primary][mode=link]:hover:not([disabled]),:host[color=primary][mode=link]:active:not([disabled]){color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=primary][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=primary][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=primary][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=solid]{color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=solid].loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host[color=danger][mode=solid]:hover:not([disabled]),:host[color=danger][mode=solid]:focus:not([disabled]){color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host[color=danger][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=danger][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host[color=danger][mode=solid]:active:not([disabled]){color:#fff;background-color:#bd0707;border:1px solid rgb(188.6956521739,7.3043478261,7.3043478261)}:host[color=danger][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(188.6956521739,7.3043478261,7.3043478261) r g b/.5);border:none}:host[color=danger][mode=solid].pressed{background-color:#bd0707!important;border-color:#bd0707!important}:host[color=danger][mode=solid].selected{color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host[color=danger][mode=solid].selected.loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host[color=danger][mode=outline]{color:#f96464;background-color:transparent;border:1px solid #f96464}:host[color=danger][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=outline]:focus:not([disabled]),:host[color=danger][mode=outline]:hover:not([disabled]){color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=danger][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host[color=danger][mode=outline]:active:not([disabled]){color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host[color=danger][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host[color=danger][mode=ghost]{color:#f96464;background-color:transparent;border:1px solid transparent}:host[color=danger][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=ghost]:focus:not([disabled]),:host[color=danger][mode=ghost]:hover:not([disabled]){color:#f96464;background-color:transparent;border:1px solid #f96464}:host[color=danger][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=danger][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=ghost]:active:not([disabled]){color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host[color=danger][mode=link]{color:#f96464;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=danger][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=link]:focus:not([disabled]),:host[color=danger][mode=link]:hover:not([disabled]),:host[color=danger][mode=link]:active:not([disabled]){color:#f96464;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=danger][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=danger][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=danger][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=solid]{color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=solid].loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host[color=success][mode=solid]:hover:not([disabled]),:host[color=success][mode=solid]:focus:not([disabled]){color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host[color=success][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=success][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host[color=success][mode=solid]:active:not([disabled]){color:#fff;background-color:#145223;border:1px solid rgb(20.4,81.6,35.2)}:host[color=success][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(20.4,81.6,35.2) r g b/.5);border:none}:host[color=success][mode=solid].pressed{background-color:#145223!important;border-color:#145223!important}:host[color=success][mode=solid].selected{color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host[color=success][mode=solid].selected.loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host[color=success][mode=outline]{color:#33cc58;background-color:transparent;border:1px solid #33cc58}:host[color=success][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=outline]:focus:not([disabled]),:host[color=success][mode=outline]:hover:not([disabled]){color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=success][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host[color=success][mode=outline]:active:not([disabled]){color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host[color=success][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host[color=success][mode=ghost]{color:#33cc58;background-color:transparent;border:1px solid transparent}:host[color=success][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=ghost]:focus:not([disabled]),:host[color=success][mode=ghost]:hover:not([disabled]){color:#33cc58;background-color:transparent;border:1px solid #33cc58}:host[color=success][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=success][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=ghost]:active:not([disabled]){color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host[color=success][mode=link]{color:#33cc58;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=success][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=link]:focus:not([disabled]),:host[color=success][mode=link]:hover:not([disabled]),:host[color=success][mode=link]:active:not([disabled]){color:#33cc58;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=success][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=success][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=success][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[size=small]{height:20px;padding:3px 7px;font-size:var(--lxFontSmallSize, 12px);min-width:20px}:host[size=small]:not(.withIcon){line-height:12px}:host[size=small].square{width:20px;text-align:center;padding:0}:host[size=small].circle{border-radius:10px;min-width:20px;padding:0 3px}:host[size=small].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host[size=medium]{height:24px;padding:3px 7px;font-size:var(--lxFontSize, 14px);min-width:24px}:host[size=medium]:not(.withIcon){line-height:16px}:host[size=medium].square{width:24px;text-align:center;padding:0}:host[size=medium].circle{border-radius:11px;min-width:24px;padding:0 3px}:host[size=medium].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host[size=large]{height:32px;padding:7px 11px;font-size:var(--lxFontSize, 14px);min-width:32px}:host[size=large]:not(.withIcon){line-height:16px}:host[size=large].square{width:32px;text-align:center;padding:0}:host[size=large].circle{border-radius:15px;min-width:32px;padding:0 7px}:host[size=large].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host[size=auto]{height:auto;padding:0;font-size:inherit;min-width:auto}:host[size=auto]:not(.withIcon){line-height:normal}:host[size=auto].square{width:auto;text-align:center;padding:0}:host[size=auto].circle{border-radius:unset;min-width:auto;padding:0}:host[size=auto].circle{height:auto;padding:0;font-size:inherit;min-width:auto}:host[size=auto].circle:not(.withIcon){line-height:normal}:host[size=auto].circle.square{width:auto;text-align:center;padding:0}:host[size=auto].circle.circle{border-radius:10px;min-width:auto;padding:0}:host.loading{position:relative;color:transparent!important}\n"] }]
|
|
354
|
+
args: [{ selector: 'button[lx-button]', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: FioriReskinAwareDirective }], imports: [IconComponent, NgTemplateOutlet, BusyIndicatorComponent], template: "@if (!icon() && !endIcon()) {\n <!-- old layout -->\n @if (showSpinner) {\n <ui5-busy-indicator [active]=\"true\" [delay]=\"0\" size=\"S\" />\n }\n <ng-container *ngTemplateOutlet=\"content\" />\n} @else {\n <div class=\"contentWrapper\">\n <!-- new layout -->\n @if (showSpinner) {\n <ui5-busy-indicator [active]=\"true\" [delay]=\"0\" size=\"S\" />\n } @else if (icon()) {\n <ui5-icon class=\"ui5Icon\" [name]=\"icon()\" data-testid=\"start-icon\" />\n }\n <ng-container *ngTemplateOutlet=\"content\" />\n @if (!showSpinner && endIcon()) {\n <ui5-icon class=\"ui5Icon\" [name]=\"endIcon()\" data-testid=\"end-icon\" />\n }\n </div>\n}\n\n<!-- ng-content with the same slot can be used once in the same template -->\n<ng-template #content>\n <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.spin{animation:spin 2s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}ui5-busy-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host(.withIcon):where(:not(.lxFioriReskin)){line-height:normal}:host(.withIcon):where(:not(.lxFioriReskin)) .contentWrapper{display:flex;height:100%;align-items:center;justify-content:center;column-gap:4px}:host(.withIcon):where(:not(.lxFioriReskin))[mode=link] .contentWrapper{column-gap:6px}:host(.withIcon):where(:not(.lxFioriReskin)) .ui5Icon{flex-shrink:0;width:var(--lxFontSmallSize);height:var(--lxFontSmallSize);color:inherit}:host:where(:not(.lxFioriReskin)){border-radius:3px;font-weight:var(--lxFontNormal, 400);cursor:pointer;transition:color,background-color,border-color .18s;transition-delay:0s;transition-timing-function:ease}:host:where(:not(.lxFioriReskin))[disabled]:not(.loading){opacity:.5;cursor:default}:host:where(:not(.lxFioriReskin))[color=default][mode=solid]{color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host:where(:not(.lxFioriReskin))[color=default][mode=solid].loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=solid]:hover:not([disabled]),:host:where(:not(.lxFioriReskin))[color=default][mode=solid]:focus:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin))[color=default][mode=solid]:hover:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=default][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=solid]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}:host:where(:not(.lxFioriReskin))[color=default][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #c2c9d6 r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=solid].pressed{background-color:#c2c9d6!important;border-color:#c2c9d6!important}:host:where(:not(.lxFioriReskin))[color=default][mode=solid].selected{color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin))[color=default][mode=solid].selected.loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin))[color=default][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=outline]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=default][mode=outline]:hover:not([disabled]){color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host:where(:not(.lxFioriReskin))[color=default][mode=outline]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=default][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=outline]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin))[color=default][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}:host:where(:not(.lxFioriReskin))[color=default][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=ghost]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=default][mode=ghost]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin))[color=default][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=default][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=ghost]:active:not([disabled]){color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host:where(:not(.lxFioriReskin))[color=default][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=link]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=default][mode=link]:hover:not([disabled]),:host:where(:not(.lxFioriReskin))[color=default][mode=link]:active:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host:where(:not(.lxFioriReskin))[color=default][mode=link]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=default][mode=link]:hover:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=default][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=solid]{color:#2a303d;background-color:#fff;border:1px solid #99a5bb}:host:where(:not(.lxFioriReskin))[color=light][mode=solid].loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=solid]:hover:not([disabled]),:host:where(:not(.lxFioriReskin))[color=light][mode=solid]:focus:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin))[color=light][mode=solid]:hover:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=light][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=solid]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}:host:where(:not(.lxFioriReskin))[color=light][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #c2c9d6 r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=solid].pressed{background-color:#c2c9d6!important;border-color:#c2c9d6!important}:host:where(:not(.lxFioriReskin))[color=light][mode=solid].selected{color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin))[color=light][mode=solid].selected.loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin))[color=light][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=outline]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=light][mode=outline]:hover:not([disabled]){color:#2a303d;background-color:#fff;border:1px solid #fff}:host:where(:not(.lxFioriReskin))[color=light][mode=outline]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=light][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=outline]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin))[color=light][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}:host:where(:not(.lxFioriReskin))[color=light][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=ghost]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=light][mode=ghost]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin))[color=light][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=light][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=ghost]:active:not([disabled]){color:#2a303d;background-color:#fff;border:1px solid #fff}:host:where(:not(.lxFioriReskin))[color=light][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=link]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=light][mode=link]:hover:not([disabled]),:host:where(:not(.lxFioriReskin))[color=light][mode=link]:active:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host:where(:not(.lxFioriReskin))[color=light][mode=link]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=light][mode=link]:hover:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=light][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=solid]{color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host:where(:not(.lxFioriReskin))[color=primary][mode=solid].loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=solid]:hover:not([disabled]),:host:where(:not(.lxFioriReskin))[color=primary][mode=solid]:focus:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host:where(:not(.lxFioriReskin))[color=primary][mode=solid]:hover:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=primary][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=solid]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcoloractive);border:1px solid var(--lx-primarybutton-backgroundcoloractive)}:host:where(:not(.lxFioriReskin))[color=primary][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcoloractive) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=solid].pressed{background-color:var(--lx-primarybutton-backgroundcoloractive)!important;border-color:var(--lx-primarybutton-backgroundcoloractive)!important}:host:where(:not(.lxFioriReskin))[color=primary][mode=solid].selected{color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host:where(:not(.lxFioriReskin))[color=primary][mode=solid].selected.loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=outline]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid var(--lx-primarybutton-backgroundcolor)}:host:where(:not(.lxFioriReskin))[color=primary][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=outline]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=primary][mode=outline]:hover:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host:where(:not(.lxFioriReskin))[color=primary][mode=outline]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=primary][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=outline]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host:where(:not(.lxFioriReskin))[color=primary][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=ghost]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent}:host:where(:not(.lxFioriReskin))[color=primary][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=ghost]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=primary][mode=ghost]:hover:not([disabled]){color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid var(--lx-primarybutton-backgroundcolor)}:host:where(:not(.lxFioriReskin))[color=primary][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=primary][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=ghost]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host:where(:not(.lxFioriReskin))[color=primary][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=link]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent;padding:0;border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=link]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=primary][mode=link]:hover:not([disabled]),:host:where(:not(.lxFioriReskin))[color=primary][mode=link]:active:not([disabled]){color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host:where(:not(.lxFioriReskin))[color=primary][mode=link]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=primary][mode=link]:hover:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=primary][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=solid]{color:#fff;background-color:#f96464;border:1px solid #f96464}:host:where(:not(.lxFioriReskin))[color=danger][mode=solid].loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=solid]:hover:not([disabled]),:host:where(:not(.lxFioriReskin))[color=danger][mode=solid]:focus:not([disabled]){color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host:where(:not(.lxFioriReskin))[color=danger][mode=solid]:hover:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=danger][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=solid]:active:not([disabled]){color:#fff;background-color:#bd0707;border:1px solid rgb(188.6956521739,7.3043478261,7.3043478261)}:host:where(:not(.lxFioriReskin))[color=danger][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(188.6956521739,7.3043478261,7.3043478261) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=solid].pressed{background-color:#bd0707!important;border-color:#bd0707!important}:host:where(:not(.lxFioriReskin))[color=danger][mode=solid].selected{color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host:where(:not(.lxFioriReskin))[color=danger][mode=solid].selected.loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=outline]{color:#f96464;background-color:transparent;border:1px solid #f96464}:host:where(:not(.lxFioriReskin))[color=danger][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=outline]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=danger][mode=outline]:hover:not([disabled]){color:#fff;background-color:#f96464;border:1px solid #f96464}:host:where(:not(.lxFioriReskin))[color=danger][mode=outline]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=danger][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=outline]:active:not([disabled]){color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host:where(:not(.lxFioriReskin))[color=danger][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=ghost]{color:#f96464;background-color:transparent;border:1px solid transparent}:host:where(:not(.lxFioriReskin))[color=danger][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=ghost]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=danger][mode=ghost]:hover:not([disabled]){color:#f96464;background-color:transparent;border:1px solid #f96464}:host:where(:not(.lxFioriReskin))[color=danger][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=danger][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=ghost]:active:not([disabled]){color:#fff;background-color:#f96464;border:1px solid #f96464}:host:where(:not(.lxFioriReskin))[color=danger][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=link]{color:#f96464;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=link]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=danger][mode=link]:hover:not([disabled]),:host:where(:not(.lxFioriReskin))[color=danger][mode=link]:active:not([disabled]){color:#f96464;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host:where(:not(.lxFioriReskin))[color=danger][mode=link]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=danger][mode=link]:hover:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=danger][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=solid]{color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host:where(:not(.lxFioriReskin))[color=success][mode=solid].loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=solid]:hover:not([disabled]),:host:where(:not(.lxFioriReskin))[color=success][mode=solid]:focus:not([disabled]){color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host:where(:not(.lxFioriReskin))[color=success][mode=solid]:hover:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=success][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=solid]:active:not([disabled]){color:#fff;background-color:#145223;border:1px solid rgb(20.4,81.6,35.2)}:host:where(:not(.lxFioriReskin))[color=success][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(20.4,81.6,35.2) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=solid].pressed{background-color:#145223!important;border-color:#145223!important}:host:where(:not(.lxFioriReskin))[color=success][mode=solid].selected{color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host:where(:not(.lxFioriReskin))[color=success][mode=solid].selected.loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=outline]{color:#33cc58;background-color:transparent;border:1px solid #33cc58}:host:where(:not(.lxFioriReskin))[color=success][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=outline]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=success][mode=outline]:hover:not([disabled]){color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host:where(:not(.lxFioriReskin))[color=success][mode=outline]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=success][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=outline]:active:not([disabled]){color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host:where(:not(.lxFioriReskin))[color=success][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=ghost]{color:#33cc58;background-color:transparent;border:1px solid transparent}:host:where(:not(.lxFioriReskin))[color=success][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=ghost]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=success][mode=ghost]:hover:not([disabled]){color:#33cc58;background-color:transparent;border:1px solid #33cc58}:host:where(:not(.lxFioriReskin))[color=success][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=success][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=ghost]:active:not([disabled]){color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host:where(:not(.lxFioriReskin))[color=success][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=link]{color:#33cc58;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=link]:focus:not([disabled]),:host:where(:not(.lxFioriReskin))[color=success][mode=link]:hover:not([disabled]),:host:where(:not(.lxFioriReskin))[color=success][mode=link]:active:not([disabled]){color:#33cc58;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host:where(:not(.lxFioriReskin))[color=success][mode=link]:focus:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=success][mode=link]:hover:not([disabled]).loading[mode=solid],:host:where(:not(.lxFioriReskin))[color=success][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host:where(:not(.lxFioriReskin))[size=small]{height:20px;padding:3px 7px;font-size:var(--lxFontSmallSize, 12px);min-width:20px}:host:where(:not(.lxFioriReskin))[size=small]:not(.withIcon){line-height:12px}:host:where(:not(.lxFioriReskin))[size=small].square{width:20px;text-align:center;padding:0}:host:where(:not(.lxFioriReskin))[size=small].circle{border-radius:10px;min-width:20px;padding:0 3px}:host:where(:not(.lxFioriReskin))[size=small].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host:where(:not(.lxFioriReskin))[size=medium]{height:24px;padding:3px 7px;font-size:var(--lxFontSize, 14px);min-width:24px}:host:where(:not(.lxFioriReskin))[size=medium]:not(.withIcon){line-height:16px}:host:where(:not(.lxFioriReskin))[size=medium].square{width:24px;text-align:center;padding:0}:host:where(:not(.lxFioriReskin))[size=medium].circle{border-radius:11px;min-width:24px;padding:0 3px}:host:where(:not(.lxFioriReskin))[size=medium].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host:where(:not(.lxFioriReskin))[size=large]{height:32px;padding:7px 11px;font-size:var(--lxFontSize, 14px);min-width:32px}:host:where(:not(.lxFioriReskin))[size=large]:not(.withIcon){line-height:16px}:host:where(:not(.lxFioriReskin))[size=large].square{width:32px;text-align:center;padding:0}:host:where(:not(.lxFioriReskin))[size=large].circle{border-radius:15px;min-width:32px;padding:0 7px}:host:where(:not(.lxFioriReskin))[size=large].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host:where(:not(.lxFioriReskin))[size=auto]{height:auto;padding:0;font-size:inherit;min-width:auto}:host:where(:not(.lxFioriReskin))[size=auto]:not(.withIcon){line-height:normal}:host:where(:not(.lxFioriReskin))[size=auto].square{width:auto;text-align:center;padding:0}:host:where(:not(.lxFioriReskin))[size=auto].circle{border-radius:unset;min-width:auto;padding:0}:host:where(:not(.lxFioriReskin))[size=auto].circle{height:auto;padding:0;font-size:inherit;min-width:auto}:host:where(:not(.lxFioriReskin))[size=auto].circle:not(.withIcon){line-height:normal}:host:where(:not(.lxFioriReskin))[size=auto].circle.square{width:auto;text-align:center;padding:0}:host:where(:not(.lxFioriReskin))[size=auto].circle.circle{border-radius:10px;min-width:auto;padding:0}:host:where(:not(.lxFioriReskin)).loading{position:relative;color:transparent!important}:host(.lxFioriReskin){display:inline-flex;align-items:center;justify-content:center;border-radius:var(--sapButton_BorderCornerRadius);font-family:var(--sapButton_FontFamily);cursor:pointer;border:var(--sapButton_BorderWidth) solid transparent;line-height:normal;vertical-align:middle;height:var(--sapElement_Compact_Height);padding:0 .4375rem;font-size:var(--sapFontSize);min-width:2rem}:host(.lxFioriReskin)[disabled]{cursor:default;pointer-events:unset}:host(.lxFioriReskin)[disabled]:active{pointer-events:none}:host(.lxFioriReskin)[disabled]:not(.loading){opacity:var(--sapContent_DisabledOpacity)}:host(.lxFioriReskin):focus-visible:not([disabled]),:host(.lxFioriReskin):focus-within:not([disabled]),:host(.lxFioriReskin):active:not([disabled]){outline:.125rem solid var(--sapContent_FocusColor);outline-offset:-.25rem}:host(.lxFioriReskin)[color=default][mode=solid],:host(.lxFioriReskin)[color=light][mode=solid]{background-color:var(--sapButton_Background);border-color:var(--sapButton_BorderColor);color:var(--sapButton_TextColor)}:host(.lxFioriReskin)[color=default][mode=solid]:hover:not([disabled]),:host(.lxFioriReskin)[color=light][mode=solid]:hover:not([disabled]){background-color:var(--sapButton_Hover_Background);border-color:var(--sapButton_Hover_BorderColor);color:var(--sapButton_Hover_TextColor)}:host(.lxFioriReskin)[color=default][mode=solid]:active:not([disabled]),:host(.lxFioriReskin)[color=default][mode=solid].pressed,:host(.lxFioriReskin)[color=light][mode=solid]:active:not([disabled]),:host(.lxFioriReskin)[color=light][mode=solid].pressed{background-color:var(--sapButton_Active_Background);border-color:var(--sapButton_Active_BorderColor);color:var(--sapButton_Active_TextColor)}:host(.lxFioriReskin)[color=default][mode=solid].loading,:host(.lxFioriReskin)[color=light][mode=solid].loading{background-color:rgb(from var(--sapButton_Background) r g b/var(--sapContent_DisabledOpacity))}:host(.lxFioriReskin)[color=default][mode=outline],:host(.lxFioriReskin)[color=light][mode=outline]{background-color:transparent;border-color:var(--sapButton_BorderColor);color:var(--sapButton_TextColor)}:host(.lxFioriReskin)[color=default][mode=outline]:hover:not([disabled]),:host(.lxFioriReskin)[color=light][mode=outline]:hover:not([disabled]){background-color:var(--sapButton_Hover_Background);border-color:var(--sapButton_Hover_BorderColor);color:var(--sapButton_TextColor)}:host(.lxFioriReskin)[color=default][mode=outline]:active:not([disabled]),:host(.lxFioriReskin)[color=light][mode=outline]:active:not([disabled]){background-color:var(--sapButton_Active_Background);border-color:var(--sapButton_Active_BorderColor);color:var(--sapButton_TextColor)}:host(.lxFioriReskin)[color=default][mode=outline].loading,:host(.lxFioriReskin)[color=light][mode=outline].loading{border-color:rgb(from var(--sapButton_BorderColor) r g b/var(--sapContent_DisabledOpacity))}:host(.lxFioriReskin)[color=default][mode=ghost],:host(.lxFioriReskin)[color=light][mode=ghost]{background-color:transparent;border-color:transparent;color:var(--sapButton_TextColor)}:host(.lxFioriReskin)[color=default][mode=ghost]:hover:not([disabled]),:host(.lxFioriReskin)[color=light][mode=ghost]:hover:not([disabled]){background-color:transparent;border-color:var(--sapButton_BorderColor);color:var(--sapButton_TextColor)}:host(.lxFioriReskin)[color=default][mode=ghost]:active:not([disabled]),:host(.lxFioriReskin)[color=light][mode=ghost]:active:not([disabled]){background-color:var(--sapButton_Background);border-color:var(--sapButton_Active_BorderColor);color:var(--sapButton_TextColor)}:host(.lxFioriReskin)[color=default][mode=link],:host(.lxFioriReskin)[color=light][mode=link]{background-color:transparent;border-color:transparent;color:var(--sapButton_TextColor)}:host(.lxFioriReskin)[color=default][mode=link]:hover:not([disabled]),:host(.lxFioriReskin)[color=light][mode=link]:hover:not([disabled]){background-color:transparent;border-color:transparent;color:var(--sapButton_TextColor)}:host(.lxFioriReskin)[color=default][mode=link]:active:not([disabled]),:host(.lxFioriReskin)[color=light][mode=link]:active:not([disabled]){background-color:transparent;border-color:var(--sapButton_Active_BorderColor);color:var(--sapButton_TextColor)}:host(.lxFioriReskin)[color=default][mode=link]:hover:not([disabled]),:host(.lxFioriReskin)[color=default][mode=link]:focus:not([disabled]),:host(.lxFioriReskin)[color=light][mode=link]:hover:not([disabled]),:host(.lxFioriReskin)[color=light][mode=link]:focus:not([disabled]){text-decoration:underline}:host(.lxFioriReskin)[color=default].selected,:host(.lxFioriReskin)[color=light].selected{background-color:var(--sapButton_Selected_Background);border-color:var(--sapButton_Selected_BorderColor);color:var(--sapButton_Selected_TextColor)}:host(.lxFioriReskin)[color=default].selected:hover:not([disabled]),:host(.lxFioriReskin)[color=light].selected:hover:not([disabled]){background-color:var(--sapButton_Selected_Hover_Background);border-color:var(--sapButton_Selected_Hover_BorderColor);color:var(--sapButton_Selected_TextColor)}:host(.lxFioriReskin)[color=primary][mode=solid]{background-color:var(--sapButton_Emphasized_Background);border-color:var(--sapButton_Emphasized_BorderColor);color:var(--sapButton_Emphasized_TextColor)}:host(.lxFioriReskin)[color=primary][mode=solid]:hover:not([disabled]){background-color:var(--sapButton_Emphasized_Hover_Background);border-color:var(--sapButton_Emphasized_Hover_BorderColor);color:var(--sapButton_Emphasized_Hover_TextColor)}:host(.lxFioriReskin)[color=primary][mode=solid]:active:not([disabled]),:host(.lxFioriReskin)[color=primary][mode=solid].pressed{background-color:var(--sapButton_Emphasized_Active_Background);border-color:var(--sapButton_Emphasized_Active_BorderColor);color:var(--sapButton_Emphasized_Active_TextColor)}:host(.lxFioriReskin)[color=primary][mode=solid].loading{background-color:rgb(from var(--sapButton_Emphasized_Background) r g b/var(--sapContent_DisabledOpacity))}:host(.lxFioriReskin)[color=primary][mode=outline]{background-color:transparent;border-color:var(--sapButton_Emphasized_BorderColor);color:var(--sapButton_Lite_TextColor)}:host(.lxFioriReskin)[color=primary][mode=outline]:hover:not([disabled]){background-color:var(--sapButton_Emphasized_Hover_Background);border-color:var(--sapButton_Emphasized_Hover_BorderColor);color:var(--sapButton_Emphasized_TextColor)}:host(.lxFioriReskin)[color=primary][mode=outline]:active:not([disabled]){background-color:var(--sapButton_Emphasized_Active_Background);border-color:var(--sapButton_Emphasized_Active_BorderColor);color:var(--sapButton_Lite_TextColor)}:host(.lxFioriReskin)[color=primary][mode=outline].loading{border-color:rgb(from var(--sapButton_Emphasized_BorderColor) r g b/var(--sapContent_DisabledOpacity))}:host(.lxFioriReskin)[color=primary][mode=ghost]{background-color:transparent;border-color:transparent;color:var(--sapButton_Lite_TextColor)}:host(.lxFioriReskin)[color=primary][mode=ghost]:hover:not([disabled]){background-color:transparent;border-color:var(--sapButton_Emphasized_BorderColor);color:var(--sapButton_Lite_TextColor)}:host(.lxFioriReskin)[color=primary][mode=ghost]:active:not([disabled]){background-color:var(--sapButton_Emphasized_Background);border-color:var(--sapButton_Emphasized_Active_BorderColor);color:var(--sapButton_Emphasized_TextColor)}:host(.lxFioriReskin)[color=primary][mode=link]{background-color:transparent;border-color:transparent;color:var(--sapButton_Lite_TextColor)}:host(.lxFioriReskin)[color=primary][mode=link]:hover:not([disabled]){background-color:transparent;border-color:transparent;color:var(--sapButton_Lite_TextColor)}:host(.lxFioriReskin)[color=primary][mode=link]:active:not([disabled]){background-color:transparent;border-color:var(--sapButton_Emphasized_Active_BorderColor);color:var(--sapButton_Lite_TextColor)}:host(.lxFioriReskin)[color=primary][mode=link]:hover:not([disabled]),:host(.lxFioriReskin)[color=primary][mode=link]:focus:not([disabled]){text-decoration:underline}:host(.lxFioriReskin)[color=primary][mode=solid]{font-family:var(--sapButton_Emphasized_FontFamily)}:host(.lxFioriReskin)[color=primary][mode=solid]:focus-visible:not([disabled],:active),:host(.lxFioriReskin)[color=primary][mode=solid]:focus-within:not([disabled],:active){outline-color:var(--sapContent_ContrastFocusColor)}:host(.lxFioriReskin)[color=primary].selected{background-color:var(--sapButton_Selected_Background);border-color:var(--sapButton_Selected_BorderColor);color:var(--sapButton_Selected_TextColor)}:host(.lxFioriReskin)[color=primary].selected:hover:not([disabled]){background-color:var(--sapButton_Selected_Hover_Background);border-color:var(--sapButton_Selected_Hover_BorderColor);color:var(--sapButton_Selected_TextColor)}:host(.lxFioriReskin)[color=danger][mode=solid]{background-color:var(--sapButton_Reject_Background);border-color:var(--sapButton_Reject_BorderColor);color:var(--sapButton_Reject_TextColor)}:host(.lxFioriReskin)[color=danger][mode=solid]:hover:not([disabled]){background-color:var(--sapButton_Reject_Hover_Background);border-color:var(--sapButton_Reject_Hover_BorderColor);color:var(--sapButton_Reject_Hover_TextColor)}:host(.lxFioriReskin)[color=danger][mode=solid]:active:not([disabled]),:host(.lxFioriReskin)[color=danger][mode=solid].pressed{background-color:var(--sapButton_Reject_Active_Background);border-color:var(--sapButton_Reject_Active_BorderColor);color:var(--sapButton_Reject_Active_TextColor)}:host(.lxFioriReskin)[color=danger][mode=solid].loading{background-color:rgb(from var(--sapButton_Reject_Background) r g b/var(--sapContent_DisabledOpacity))}:host(.lxFioriReskin)[color=danger][mode=outline]{background-color:transparent;border-color:var(--sapButton_Reject_BorderColor);color:var(--sapButton_Reject_TextColor)}:host(.lxFioriReskin)[color=danger][mode=outline]:hover:not([disabled]){background-color:var(--sapButton_Reject_Hover_Background);border-color:var(--sapButton_Reject_Hover_BorderColor);color:var(--sapButton_Reject_TextColor)}:host(.lxFioriReskin)[color=danger][mode=outline]:active:not([disabled]){background-color:var(--sapButton_Reject_Active_Background);border-color:var(--sapButton_Reject_Active_BorderColor);color:var(--sapButton_Reject_TextColor)}:host(.lxFioriReskin)[color=danger][mode=outline].loading{border-color:rgb(from var(--sapButton_Reject_BorderColor) r g b/var(--sapContent_DisabledOpacity))}:host(.lxFioriReskin)[color=danger][mode=ghost]{background-color:transparent;border-color:transparent;color:var(--sapButton_Reject_TextColor)}:host(.lxFioriReskin)[color=danger][mode=ghost]:hover:not([disabled]){background-color:transparent;border-color:var(--sapButton_Reject_BorderColor);color:var(--sapButton_Reject_TextColor)}:host(.lxFioriReskin)[color=danger][mode=ghost]:active:not([disabled]){background-color:var(--sapButton_Reject_Background);border-color:var(--sapButton_Reject_Active_BorderColor);color:var(--sapButton_Reject_TextColor)}:host(.lxFioriReskin)[color=danger][mode=link]{background-color:transparent;border-color:transparent;color:var(--sapButton_Reject_TextColor)}:host(.lxFioriReskin)[color=danger][mode=link]:hover:not([disabled]){background-color:transparent;border-color:transparent;color:var(--sapButton_Reject_TextColor)}:host(.lxFioriReskin)[color=danger][mode=link]:active:not([disabled]){background-color:transparent;border-color:var(--sapButton_Reject_Active_BorderColor);color:var(--sapButton_Reject_TextColor)}:host(.lxFioriReskin)[color=danger][mode=link]:hover:not([disabled]),:host(.lxFioriReskin)[color=danger][mode=link]:focus:not([disabled]){text-decoration:underline}:host(.lxFioriReskin)[color=danger].selected{background-color:var(--sapButton_Reject_Selected_Background);border-color:var(--sapButton_Reject_Selected_BorderColor);color:var(--sapButton_Reject_Selected_TextColor)}:host(.lxFioriReskin)[color=danger].selected:hover:not([disabled]){background-color:var(--sapButton_Reject_Selected_Hover_Background);border-color:var(--sapButton_Reject_Selected_Hover_BorderColor);color:var(--sapButton_Reject_Selected_TextColor)}:host(.lxFioriReskin)[color=success][mode=solid]{background-color:var(--sapButton_Accept_Background);border-color:var(--sapButton_Accept_BorderColor);color:var(--sapButton_Accept_TextColor)}:host(.lxFioriReskin)[color=success][mode=solid]:hover:not([disabled]){background-color:var(--sapButton_Accept_Hover_Background);border-color:var(--sapButton_Accept_Hover_BorderColor);color:var(--sapButton_Accept_Hover_TextColor)}:host(.lxFioriReskin)[color=success][mode=solid]:active:not([disabled]),:host(.lxFioriReskin)[color=success][mode=solid].pressed{background-color:var(--sapButton_Accept_Active_Background);border-color:var(--sapButton_Accept_Active_BorderColor);color:var(--sapButton_Accept_Active_TextColor)}:host(.lxFioriReskin)[color=success][mode=solid].loading{background-color:rgb(from var(--sapButton_Accept_Background) r g b/var(--sapContent_DisabledOpacity))}:host(.lxFioriReskin)[color=success][mode=outline]{background-color:transparent;border-color:var(--sapButton_Accept_BorderColor);color:var(--sapButton_Accept_TextColor)}:host(.lxFioriReskin)[color=success][mode=outline]:hover:not([disabled]){background-color:var(--sapButton_Accept_Hover_Background);border-color:var(--sapButton_Accept_Hover_BorderColor);color:var(--sapButton_Accept_TextColor)}:host(.lxFioriReskin)[color=success][mode=outline]:active:not([disabled]){background-color:var(--sapButton_Accept_Active_Background);border-color:var(--sapButton_Accept_Active_BorderColor);color:var(--sapButton_Accept_TextColor)}:host(.lxFioriReskin)[color=success][mode=outline].loading{border-color:rgb(from var(--sapButton_Accept_BorderColor) r g b/var(--sapContent_DisabledOpacity))}:host(.lxFioriReskin)[color=success][mode=ghost]{background-color:transparent;border-color:transparent;color:var(--sapButton_Accept_TextColor)}:host(.lxFioriReskin)[color=success][mode=ghost]:hover:not([disabled]){background-color:transparent;border-color:var(--sapButton_Accept_BorderColor);color:var(--sapButton_Accept_TextColor)}:host(.lxFioriReskin)[color=success][mode=ghost]:active:not([disabled]){background-color:var(--sapButton_Accept_Background);border-color:var(--sapButton_Accept_Active_BorderColor);color:var(--sapButton_Accept_TextColor)}:host(.lxFioriReskin)[color=success][mode=link]{background-color:transparent;border-color:transparent;color:var(--sapButton_Accept_TextColor)}:host(.lxFioriReskin)[color=success][mode=link]:hover:not([disabled]){background-color:transparent;border-color:transparent;color:var(--sapButton_Accept_TextColor)}:host(.lxFioriReskin)[color=success][mode=link]:active:not([disabled]){background-color:transparent;border-color:var(--sapButton_Accept_Active_BorderColor);color:var(--sapButton_Accept_TextColor)}:host(.lxFioriReskin)[color=success][mode=link]:hover:not([disabled]),:host(.lxFioriReskin)[color=success][mode=link]:focus:not([disabled]){text-decoration:underline}:host(.lxFioriReskin)[color=success].selected{background-color:var(--sapButton_Accept_Selected_Background);border-color:var(--sapButton_Accept_Selected_BorderColor);color:var(--sapButton_Accept_Selected_TextColor)}:host(.lxFioriReskin)[color=success].selected:hover:not([disabled]){background-color:var(--sapButton_Accept_Selected_Hover_Background);border-color:var(--sapButton_Accept_Selected_Hover_BorderColor);color:var(--sapButton_Accept_Selected_TextColor)}:host(.lxFioriReskin).square{width:var(--sapElement_Compact_Height);padding:0;text-align:center}:host(.lxFioriReskin).circle{border-radius:50%;min-width:var(--sapElement_Compact_Height);padding:0}:host(.lxFioriReskin).withIcon:not(.square,.circle,[mode=link]){padding:0 .5rem}:host(.lxFioriReskin)[size=auto]{height:auto;padding:0;font-size:inherit;min-width:unset}:host(.lxFioriReskin).loading{position:relative;color:transparent!important;pointer-events:unset}:host(.lxFioriReskin) .contentWrapper{display:flex;height:100%;align-items:center;justify-content:center;column-gap:.375rem}:host(.lxFioriReskin) .ui5Icon{flex-shrink:0;width:1rem;height:1rem;color:inherit}:host(.lxFioriReskin)[mode=link] .contentWrapper{column-gap:.5rem}\n"] }]
|
|
353
355
|
}], propDecorators: { size: [{
|
|
354
356
|
type: Input
|
|
355
357
|
}, {
|
|
@@ -829,7 +831,7 @@ class EllipsisComponent {
|
|
|
829
831
|
const offsetWidth = contentSpanElRef.nativeElement.clientWidth;
|
|
830
832
|
return offsetWidth < scrollWidth;
|
|
831
833
|
}
|
|
832
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EllipsisComponent, deps: [{ token: LX_ELLIPSIS_DEBOUNCE_ON_RESIZE }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: ResizeObserverService }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
834
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EllipsisComponent, deps: [{ token: LX_ELLIPSIS_DEBOUNCE_ON_RESIZE }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: ResizeObserverService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
833
835
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: EllipsisComponent, isStandalone: true, selector: "lx-ellipsis", inputs: { content: "content", escapeHtmlInContent: "escapeHtmlInContent" }, viewQueries: [{ propertyName: "contentSpanEl", first: true, predicate: ["contentEl"], descendants: true }, { propertyName: "showMoreButtonEl", first: true, predicate: ["showMoreButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<span\n #contentEl\n [class.showMore]=\"isShowingMore$ | async\"\n class=\"content truncate lx-margin-right\"\n [innerHtml]=\"sanitizedContent$ | async\"\n></span>\n@if (showButton$ | async) {\n <button (click)=\"onShowMoreToggle()\" lx-button #showMoreButton size=\"auto\" mode=\"link\" color=\"primary\">\n {{ showMoreButtonLabel$ | async }}\n </button>\n}\n", styles: [":host{display:block;white-space:pre-line;overflow-wrap:break-word}.content{display:inline-block;word-break:break-word}.truncate:not(.showMore){width:calc(100% - 140px);white-space:nowrap;overflow-wrap:normal;overflow:hidden;text-overflow:ellipsis}.content.showMore+button{margin-top:4px;display:block}button{white-space:nowrap;vertical-align:top}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
834
836
|
}
|
|
835
837
|
__decorate([
|
|
@@ -847,7 +849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
847
849
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
848
850
|
type: Inject,
|
|
849
851
|
args: [LX_ELLIPSIS_DEBOUNCE_ON_RESIZE]
|
|
850
|
-
}] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: ResizeObserverService }, { type: i1.TranslateService }], propDecorators: { content: [{
|
|
852
|
+
}] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: ResizeObserverService }, { type: i1$1.TranslateService }], propDecorators: { content: [{
|
|
851
853
|
type: Input
|
|
852
854
|
}], escapeHtmlInContent: [{
|
|
853
855
|
type: Input
|
|
@@ -1967,7 +1969,7 @@ class LxTranslatePipe {
|
|
|
1967
1969
|
// Else: Use cached resulting interpolations
|
|
1968
1970
|
return this.translatePipe.transform(query, this.cachedResultingInterpolations);
|
|
1969
1971
|
}
|
|
1970
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LxTranslatePipe, deps: [{ token: i1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: GLOBAL_TRANSLATION_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1972
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LxTranslatePipe, deps: [{ token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: GLOBAL_TRANSLATION_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1971
1973
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: LxTranslatePipe, isStandalone: true, name: "lxTranslate", pure: false }); }
|
|
1972
1974
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LxTranslatePipe, providedIn: 'root' }); }
|
|
1973
1975
|
}
|
|
@@ -1980,7 +1982,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
1980
1982
|
name: 'lxTranslate',
|
|
1981
1983
|
pure: false
|
|
1982
1984
|
}]
|
|
1983
|
-
}], ctorParameters: () => [{ type: i1.TranslateService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
1985
|
+
}], ctorParameters: () => [{ type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
1984
1986
|
type: Optional
|
|
1985
1987
|
}, {
|
|
1986
1988
|
type: Inject,
|
|
@@ -2118,7 +2120,7 @@ class TranslationBeforePipe {
|
|
|
2118
2120
|
transform(translationKey, cutMarkAndParams) {
|
|
2119
2121
|
return getTranslationParts(this.translateService, translationKey, cutMarkAndParams)[0];
|
|
2120
2122
|
}
|
|
2121
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TranslationBeforePipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
2123
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TranslationBeforePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
2122
2124
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: TranslationBeforePipe, isStandalone: true, name: "lxTranslationBefore" }); }
|
|
2123
2125
|
}
|
|
2124
2126
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TranslationBeforePipe, decorators: [{
|
|
@@ -2126,7 +2128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
2126
2128
|
args: [{
|
|
2127
2129
|
name: 'lxTranslationBefore'
|
|
2128
2130
|
}]
|
|
2129
|
-
}], ctorParameters: () => [{ type: i1.TranslateService }] });
|
|
2131
|
+
}], ctorParameters: () => [{ type: i1$1.TranslateService }] });
|
|
2130
2132
|
|
|
2131
2133
|
/**
|
|
2132
2134
|
* Translates the given i18n-key (instantly) and returns the part of the translation
|
|
@@ -2142,7 +2144,7 @@ class TranslationAfterPipe {
|
|
|
2142
2144
|
transform(translationKey, cutMarkAndParams) {
|
|
2143
2145
|
return getTranslationParts(this.translateService, translationKey, cutMarkAndParams)[1] || '';
|
|
2144
2146
|
}
|
|
2145
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TranslationAfterPipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
2147
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TranslationAfterPipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
2146
2148
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: TranslationAfterPipe, isStandalone: true, name: "lxTranslationAfter" }); }
|
|
2147
2149
|
}
|
|
2148
2150
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TranslationAfterPipe, decorators: [{
|
|
@@ -2150,7 +2152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
2150
2152
|
args: [{
|
|
2151
2153
|
name: 'lxTranslationAfter'
|
|
2152
2154
|
}]
|
|
2153
|
-
}], ctorParameters: () => [{ type: i1.TranslateService }] });
|
|
2155
|
+
}], ctorParameters: () => [{ type: i1$1.TranslateService }] });
|
|
2154
2156
|
|
|
2155
2157
|
function getTranslationBetween(translateService, translationKey, cutMarksAndParams) {
|
|
2156
2158
|
translationKey = isArray(translationKey) ? translationKey.join('.') : translationKey;
|
|
@@ -2205,7 +2207,7 @@ class TranslationBetweenPipe {
|
|
|
2205
2207
|
transform(translationKey, cutMarksAndParams) {
|
|
2206
2208
|
return getTranslationBetween(this.translateService, translationKey, cutMarksAndParams);
|
|
2207
2209
|
}
|
|
2208
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TranslationBetweenPipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
2210
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TranslationBetweenPipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
2209
2211
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: TranslationBetweenPipe, isStandalone: true, name: "lxTranslationBetween" }); }
|
|
2210
2212
|
}
|
|
2211
2213
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TranslationBetweenPipe, decorators: [{
|
|
@@ -2213,7 +2215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
2213
2215
|
args: [{
|
|
2214
2216
|
name: 'lxTranslationBetween'
|
|
2215
2217
|
}]
|
|
2216
|
-
}], ctorParameters: () => [{ type: i1.TranslateService }] });
|
|
2218
|
+
}], ctorParameters: () => [{ type: i1$1.TranslateService }] });
|
|
2217
2219
|
|
|
2218
2220
|
class UnescapeCurlyBracesPipe {
|
|
2219
2221
|
transform(input) {
|
|
@@ -2437,7 +2439,7 @@ class TooltipDirective {
|
|
|
2437
2439
|
this.ariaDescriber.removeDescription(this.elementRef.nativeElement, this.tooltipRef?.location.nativeElement);
|
|
2438
2440
|
this.overlayRef?.dispose();
|
|
2439
2441
|
}
|
|
2440
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TooltipDirective, deps: [{ token: i1$
|
|
2442
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TooltipDirective, deps: [{ token: i1$2.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1$2.Overlay }, { token: i2.AriaDescriber }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2441
2443
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: TooltipDirective, isStandalone: true, selector: "[lxTooltip]", inputs: { content: ["lxTooltip", "content"], lxTooltipPosition: "lxTooltipPosition", lxTooltipDelay: "lxTooltipDelay", lxTooltipIsHtmlContent: "lxTooltipIsHtmlContent" }, host: { listeners: { "mouseenter": "show()", "focus": "show()", "mouseleave": "hide()", "click": "hide()", "blur": "hide()" } }, usesOnChanges: true, ngImport: i0 }); }
|
|
2442
2444
|
}
|
|
2443
2445
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
@@ -2445,7 +2447,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
2445
2447
|
args: [{
|
|
2446
2448
|
selector: '[lxTooltip]'
|
|
2447
2449
|
}]
|
|
2448
|
-
}], ctorParameters: () => [{ type: i1$
|
|
2450
|
+
}], ctorParameters: () => [{ type: i1$2.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$2.Overlay }, { type: i2.AriaDescriber }], propDecorators: { content: [{
|
|
2449
2451
|
type: Input,
|
|
2450
2452
|
args: ['lxTooltip']
|
|
2451
2453
|
}], lxTooltipPosition: [{
|
|
@@ -2509,7 +2511,7 @@ const CORE_MODULE_EXPORTS = [
|
|
|
2509
2511
|
];
|
|
2510
2512
|
class LxCoreUiModule {
|
|
2511
2513
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LxCoreUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2512
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: LxCoreUiModule, imports: [i1.TranslateModule, AfterViewInitDirective,
|
|
2514
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: LxCoreUiModule, imports: [i1$1.TranslateModule, AfterViewInitDirective,
|
|
2513
2515
|
AutocloseDirective,
|
|
2514
2516
|
AutofocusDirective,
|
|
2515
2517
|
CounterComponent,
|
|
@@ -3417,7 +3419,7 @@ class TokenizerOverflowPopoverComponent {
|
|
|
3417
3419
|
this.changeDetectorRef.detectChanges();
|
|
3418
3420
|
}
|
|
3419
3421
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TokenizerOverflowPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3420
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: TokenizerOverflowPopoverComponent, isStandalone: true, selector: "lx-tokenizer-overflow-popover", inputs: { tokenizer: { classPropertyName: "tokenizer", publicName: "tokenizer", isSignal: true, isRequired: true, transformFunction: null }, horizontalAlign: { classPropertyName: "horizontalAlign", publicName: "horizontalAlign", isSignal: true, isRequired: false, transformFunction: null }, verticalAlign: { classPropertyName: "verticalAlign", publicName: "verticalAlign", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "popoverTemplate", first: true, predicate: ["popoverTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: SatPopoverComponent, descendants: true }], ngImport: i0, template: "<sat-popover\n (backdropClicked)=\"closePopover()\"\n [hasBackdrop]=\"true\"\n [horizontalAlign]=\"horizontalAlign()\"\n [verticalAlign]=\"verticalAlign()\"\n openTransition=\"100ms\"\n closeTransition=\"100ms\"\n>\n @if (popoverTemplate) {\n <div\n class=\"tokenizerPopoverContentWrapper\"\n [class.before]=\"horizontalAlign() === 'before'\"\n [class.after]=\"horizontalAlign() === 'after'\"\n >\n <ng-container *ngTemplateOutlet=\"popoverTemplate; context: { $implicit: startIndex() }\" />\n </div>\n }\n</sat-popover>\n", styles: [".tokenizerPopoverContentWrapper{padding:16px;background:#fff;border-radius:4px;box-shadow:0 8px 14px #5261794d}.tokenizerPopoverContentWrapper.before{margin-right:10px}.tokenizerPopoverContentWrapper.after{margin-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$
|
|
3422
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: TokenizerOverflowPopoverComponent, isStandalone: true, selector: "lx-tokenizer-overflow-popover", inputs: { tokenizer: { classPropertyName: "tokenizer", publicName: "tokenizer", isSignal: true, isRequired: true, transformFunction: null }, horizontalAlign: { classPropertyName: "horizontalAlign", publicName: "horizontalAlign", isSignal: true, isRequired: false, transformFunction: null }, verticalAlign: { classPropertyName: "verticalAlign", publicName: "verticalAlign", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "popoverTemplate", first: true, predicate: ["popoverTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: SatPopoverComponent, descendants: true }], ngImport: i0, template: "<sat-popover\n (backdropClicked)=\"closePopover()\"\n [hasBackdrop]=\"true\"\n [horizontalAlign]=\"horizontalAlign()\"\n [verticalAlign]=\"verticalAlign()\"\n openTransition=\"100ms\"\n closeTransition=\"100ms\"\n>\n @if (popoverTemplate) {\n <div\n class=\"tokenizerPopoverContentWrapper\"\n [class.before]=\"horizontalAlign() === 'before'\"\n [class.after]=\"horizontalAlign() === 'after'\"\n >\n <ng-container *ngTemplateOutlet=\"popoverTemplate; context: { $implicit: startIndex() }\" />\n </div>\n }\n</sat-popover>\n", styles: [".tokenizerPopoverContentWrapper{padding:16px;background:#fff;border-radius:4px;box-shadow:0 8px 14px #5261794d}.tokenizerPopoverContentWrapper.before{margin-right:10px}.tokenizerPopoverContentWrapper.after{margin-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$3.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3421
3423
|
}
|
|
3422
3424
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TokenizerOverflowPopoverComponent, decorators: [{
|
|
3423
3425
|
type: Component,
|
|
@@ -3565,7 +3567,7 @@ class TokenizerComponent {
|
|
|
3565
3567
|
this.changeDetectorRef.detectChanges();
|
|
3566
3568
|
}
|
|
3567
3569
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TokenizerComponent, deps: [{ token: i0.ElementRef }, { token: i0.DestroyRef }, { token: i0.ChangeDetectorRef }, { token: ResizeObserverService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3568
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: TokenizerComponent, isStandalone: true, selector: "lx-tokenizer", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overflowPlaceholderClick: "overflowPlaceholderClick" }, queries: [{ propertyName: "items", predicate: TokenComponent }], viewQueries: [{ propertyName: "counter", first: true, predicate: ["counter"], descendants: true, read: ElementRef }, { propertyName: "tokensContainer", first: true, predicate: ["tokensContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div #tokensContainer class=\"tokensContainer\">\n <ng-content select=\"lx-token\" />\n @if (showCounter()) {\n <button\n lx-button\n class=\"counterButton\"\n mode=\"ghost\"\n (click)=\"onCounterClicked()\"\n [attr.aria-label]=\"\n NAME + (overflowItemCount() === 1 ? '.showMoreItem' : '.showMoreItems') | translate: { count: overflowItemCount() }\n \"\n >\n <lx-counter #counter aria-hidden=\"true\" [content]=\"'+' + overflowItemCount()\" color=\"gray\" />\n </button>\n }\n</div>\n", styles: [":host{display:flex;align-items:center;white-space:nowrap}:host .counterButton{padding:0;display:flex;align-items:center;margin-left:4px;border-radius:12px}.tokensContainer{display:flex;align-items:center}\n"], dependencies: [{ kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3570
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: TokenizerComponent, isStandalone: true, selector: "lx-tokenizer", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overflowPlaceholderClick: "overflowPlaceholderClick" }, queries: [{ propertyName: "items", predicate: TokenComponent }], viewQueries: [{ propertyName: "counter", first: true, predicate: ["counter"], descendants: true, read: ElementRef }, { propertyName: "tokensContainer", first: true, predicate: ["tokensContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div #tokensContainer class=\"tokensContainer\">\n <ng-content select=\"lx-token\" />\n @if (showCounter()) {\n <button\n lx-button\n class=\"counterButton\"\n mode=\"ghost\"\n (click)=\"onCounterClicked()\"\n [attr.aria-label]=\"\n NAME + (overflowItemCount() === 1 ? '.showMoreItem' : '.showMoreItems') | translate: { count: overflowItemCount() }\n \"\n >\n <lx-counter #counter aria-hidden=\"true\" [content]=\"'+' + overflowItemCount()\" color=\"gray\" />\n </button>\n }\n</div>\n", styles: [":host{display:flex;align-items:center;white-space:nowrap}:host .counterButton{padding:0;display:flex;align-items:center;margin-left:4px;border-radius:12px}.tokensContainer{display:flex;align-items:center}\n"], dependencies: [{ kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3569
3571
|
}
|
|
3570
3572
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TokenizerComponent, decorators: [{
|
|
3571
3573
|
type: Component,
|
|
@@ -4080,7 +4082,7 @@ class BasicDropdownComponent extends KeyboardSelectDirective {
|
|
|
4080
4082
|
this.select(index + offset);
|
|
4081
4083
|
}
|
|
4082
4084
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BasicDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4083
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: BasicDropdownComponent, isStandalone: true, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions", overlayPositioning: "overlayPositioning", truncateOptions: "truncateOptions", noResultsText: "noResultsText" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }, { propertyName: "descriptionTemplateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (overlayPositioning) {\n <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n (positionChange)=\"onPositionChange($event)\"\n >\n <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n <ng-container [ngTemplateOutlet]=\"dropdown\" />\n </div>\n </ng-template>\n} @else {\n <ng-container [ngTemplateOutlet]=\"dropdown\" />\n}\n\n<ng-template #dropdown>\n <ul\n class=\"options {{ padding }}Padding lxThinScrollbar\"\n #keyboardSelectContainer\n infinite-scroll\n [scrollWindow]=\"false\"\n [fromRoot]=\"true\"\n [ngClass]=\"{ truncateOptions: truncateOptions }\"\n (scrolled)=\"onScroll()\"\n >\n @if (newOptionLabel && isNewItem) {\n <li\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onNewItemSelected()\"\n (select)=\"onNewItemSelected()\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable onTheFlyOption\"\n [attr.aria-label]=\"newOptionLabel\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n </li>\n }\n @if (showCreateNewOption) {\n <li\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onCreateNewOptionSelected()\"\n (select)=\"onCreateNewOptionSelected()\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable newEntryOption\"\n >\n <span class=\"newEntryContent\">\n @if (createNewOptionTemplateRef) {\n <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\" />\n } @else {\n <span>\n {{ NAME + '.new' | translate }}\n </span>\n }\n </span>\n </li>\n }\n @if (descriptionTemplateRef) {\n <li tabindex=\"-1\" lxSelectableItem [scrollInContainer]=\"keyboardSelectContainer\" #item class=\"option disabledItem description\">\n <span class=\"descriptionContent\">\n <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\" />\n </span>\n </li>\n }\n @if (options?.length === 0 && !newOptionLabel && !loading) {\n <li\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable noOptionsAvailable\"\n [attr.aria-label]=\"noResultsText ?? (NAME + '.noResults' | translate)\"\n >\n {{ noResultsText ?? (NAME + '.noResults' | translate) }}\n </li>\n }\n @if (placeholder) {\n <li\n tabindex=\"-1\"\n class=\"option keyboardSelectable clearSelection\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"selectOption(null)\"\n (select)=\"selectOption(null)\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n [attr.aria-label]=\"placeholder\"\n >\n {{ placeholder }}\n </li>\n }\n @for (option of options; track trackByProp(index, option); let index = $index) {\n <li\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option keyboardSelectable\"\n (click)=\"selectOption(option)\"\n (select)=\"selectOption(option)\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n [class.initiallySelected]=\"index === initiallySelectedIndex\"\n [class.disabledItem]=\"(itemKey && !!disabledOptions[option[itemKey]]) || this.disabledOptions[option]\"\n [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n >\n @if (optionTemplateRef) {\n <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\" />\n } @else {\n <span>\n {{ labelKey ? option[labelKey] : option }}\n </span>\n }\n </li>\n }\n @if (loading) {\n <lx-spinner [fadeBackground]=\"true\" />\n }\n </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default}.option.disabledItem:not(.description){opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$3.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4085
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: BasicDropdownComponent, isStandalone: true, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions", overlayPositioning: "overlayPositioning", truncateOptions: "truncateOptions", noResultsText: "noResultsText" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }, { propertyName: "descriptionTemplateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (overlayPositioning) {\n <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n (positionChange)=\"onPositionChange($event)\"\n >\n <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n <ng-container [ngTemplateOutlet]=\"dropdown\" />\n </div>\n </ng-template>\n} @else {\n <ng-container [ngTemplateOutlet]=\"dropdown\" />\n}\n\n<ng-template #dropdown>\n <ul\n class=\"options {{ padding }}Padding lxThinScrollbar\"\n #keyboardSelectContainer\n infinite-scroll\n [scrollWindow]=\"false\"\n [fromRoot]=\"true\"\n [ngClass]=\"{ truncateOptions: truncateOptions }\"\n (scrolled)=\"onScroll()\"\n >\n @if (newOptionLabel && isNewItem) {\n <li\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onNewItemSelected()\"\n (select)=\"onNewItemSelected()\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable onTheFlyOption\"\n [attr.aria-label]=\"newOptionLabel\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n </li>\n }\n @if (showCreateNewOption) {\n <li\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onCreateNewOptionSelected()\"\n (select)=\"onCreateNewOptionSelected()\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable newEntryOption\"\n >\n <span class=\"newEntryContent\">\n @if (createNewOptionTemplateRef) {\n <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\" />\n } @else {\n <span>\n {{ NAME + '.new' | translate }}\n </span>\n }\n </span>\n </li>\n }\n @if (descriptionTemplateRef) {\n <li tabindex=\"-1\" lxSelectableItem [scrollInContainer]=\"keyboardSelectContainer\" #item class=\"option disabledItem description\">\n <span class=\"descriptionContent\">\n <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\" />\n </span>\n </li>\n }\n @if (options?.length === 0 && !newOptionLabel && !loading) {\n <li\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable noOptionsAvailable\"\n [attr.aria-label]=\"noResultsText ?? (NAME + '.noResults' | translate)\"\n >\n {{ noResultsText ?? (NAME + '.noResults' | translate) }}\n </li>\n }\n @if (placeholder) {\n <li\n tabindex=\"-1\"\n class=\"option keyboardSelectable clearSelection\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"selectOption(null)\"\n (select)=\"selectOption(null)\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n [attr.aria-label]=\"placeholder\"\n >\n {{ placeholder }}\n </li>\n }\n @for (option of options; track trackByProp(index, option); let index = $index) {\n <li\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option keyboardSelectable\"\n (click)=\"selectOption(option)\"\n (select)=\"selectOption(option)\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n [class.initiallySelected]=\"index === initiallySelectedIndex\"\n [class.disabledItem]=\"(itemKey && !!disabledOptions[option[itemKey]]) || this.disabledOptions[option]\"\n [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n >\n @if (optionTemplateRef) {\n <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\" />\n } @else {\n <span>\n {{ labelKey ? option[labelKey] : option }}\n </span>\n }\n </li>\n }\n @if (loading) {\n <lx-spinner [fadeBackground]=\"true\" />\n }\n </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default}.option.disabledItem:not(.description){opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4084
4086
|
}
|
|
4085
4087
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BasicDropdownComponent, decorators: [{
|
|
4086
4088
|
type: Component,
|
|
@@ -5176,7 +5178,7 @@ class CurrencyInputComponent {
|
|
|
5176
5178
|
useExisting: forwardRef(() => CurrencyInputComponent),
|
|
5177
5179
|
multi: true
|
|
5178
5180
|
}
|
|
5179
|
-
], viewQueries: [{ propertyName: "currencyInput", first: true, predicate: ["currencyInput"], descendants: true }], ngImport: i0, template: "@if (mode === 'edit') {\n <div class=\"container input-group\">\n @if (iconPosition === 'first') {\n <div class=\"labelContainer input-group-addon\">\n <lx-currency-symbol [code]=\"code\" />\n </div>\n }\n @if (!showCurrencyInput) {\n <input\n [attr.disabled]=\"disabled ? true : null\"\n type=\"text\"\n class=\"form-control currencyDisplayValue\"\n placeholder=\"{{ placeholder }}\"\n [lxMarkInvalid]=\"markInvalid\"\n [value]=\"dataValue$ | async | number: format\"\n (focus)=\"focusCurrencyInput()\"\n />\n }\n <input\n autocomplete=\"off\"\n [attr.disabled]=\"disabled ? true : null\"\n [class.hideInput]=\"!showCurrencyInput\"\n type=\"text\"\n inputmode=\"numeric\"\n class=\"form-control currencyInput\"\n name=\"inputAmount\"\n [attr.id]=\"inputId\"\n #currencyInput\n placeholder=\"{{ placeholder }}\"\n [ngModel]=\"dataValue$ | async\"\n (blur)=\"onBlur()\"\n (ngModelChange)=\"valueChanged($event)\"\n />\n @if (iconPosition === 'end') {\n <div class=\"labelContainer input-group-addon\">\n <lx-currency-symbol [code]=\"code\" />\n </div>\n }\n </div>\n} @else if (mode === 'view') {\n <span [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n @if (iconPosition === 'first') {\n <lx-currency-symbol [code]=\"code\" />\n }\n {{ (dataValue$ | async | number: format) || placeholder }}\n @if (iconPosition === 'end') {\n <lx-currency-symbol [code]=\"code\" />\n }\n </span>\n}\n", styles: [".container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}input.hideInput{display:none}.placeholder{color:#99a5bb}\n"], dependencies: [{ kind: "component", type: CurrencySymbolComponent, selector: "lx-currency-symbol", inputs: ["code"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$
|
|
5181
|
+
], viewQueries: [{ propertyName: "currencyInput", first: true, predicate: ["currencyInput"], descendants: true }], ngImport: i0, template: "@if (mode === 'edit') {\n <div class=\"container input-group\">\n @if (iconPosition === 'first') {\n <div class=\"labelContainer input-group-addon\">\n <lx-currency-symbol [code]=\"code\" />\n </div>\n }\n @if (!showCurrencyInput) {\n <input\n [attr.disabled]=\"disabled ? true : null\"\n type=\"text\"\n class=\"form-control currencyDisplayValue\"\n placeholder=\"{{ placeholder }}\"\n [lxMarkInvalid]=\"markInvalid\"\n [value]=\"dataValue$ | async | number: format\"\n (focus)=\"focusCurrencyInput()\"\n />\n }\n <input\n autocomplete=\"off\"\n [attr.disabled]=\"disabled ? true : null\"\n [class.hideInput]=\"!showCurrencyInput\"\n type=\"text\"\n inputmode=\"numeric\"\n class=\"form-control currencyInput\"\n name=\"inputAmount\"\n [attr.id]=\"inputId\"\n #currencyInput\n placeholder=\"{{ placeholder }}\"\n [ngModel]=\"dataValue$ | async\"\n (blur)=\"onBlur()\"\n (ngModelChange)=\"valueChanged($event)\"\n />\n @if (iconPosition === 'end') {\n <div class=\"labelContainer input-group-addon\">\n <lx-currency-symbol [code]=\"code\" />\n </div>\n }\n </div>\n} @else if (mode === 'view') {\n <span [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n @if (iconPosition === 'first') {\n <lx-currency-symbol [code]=\"code\" />\n }\n {{ (dataValue$ | async | number: format) || placeholder }}\n @if (iconPosition === 'end') {\n <lx-currency-symbol [code]=\"code\" />\n }\n </span>\n}\n", styles: [".container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}input.hideInput{display:none}.placeholder{color:#99a5bb}\n"], dependencies: [{ kind: "component", type: CurrencySymbolComponent, selector: "lx-currency-symbol", inputs: ["code"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5180
5182
|
}
|
|
5181
5183
|
__decorate([
|
|
5182
5184
|
Observe('data')
|
|
@@ -6795,7 +6797,7 @@ class DateInputComponent {
|
|
|
6795
6797
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DateInputComponent, isStandalone: true, selector: "lx-date-input", inputs: { date: "date", dateString: "dateString", valueAccessor: "valueAccessor", inputId: "inputId", renderingStyle: "renderingStyle", placeholder: "placeholder", cdk: "cdk", datepickerMode: "datepickerMode", initDateString: "initDateString", minDate: "minDate", maxDate: "maxDate", minMode: "minMode", maxMode: "maxMode", showWeeks: "showWeeks", formatDay: "formatDay", formatMonth: "formatMonth", formatYear: "formatYear", formatDayHeader: "formatDayHeader", formatDayTitle: "formatDayTitle", formatMonthTitle: "formatMonthTitle", startingDay: "startingDay", yearRange: "yearRange", onlyCurrentMonth: "onlyCurrentMonth", shortcutPropagation: "shortcutPropagation", customClass: "customClass", disabled: "disabled", dateDisabled: "dateDisabled", autoFocus: "autoFocus", markInvalid: "markInvalid", alwaysEmitDateString: "alwaysEmitDateString" }, outputs: { closeDateInput: "closeDateInput", dateStringChange: "dateStringChange", dateChange: "dateChange" }, providers: [
|
|
6796
6798
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
|
|
6797
6799
|
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
|
|
6798
|
-
], queries: [{ propertyName: "dateStringTemplate", first: true, predicate: ["dateStringTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (cdk) {\n <span\n class=\"wrapper\"\n [class.forLink]=\"renderingStyle === 'LINK'\"\n [class.has-error]=\"hasError\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n >\n <!-- TODO: The dateInput and datePicker code ist duplicated for cdk and withoutCdK use to solve a placing problem of the\n ngx-bootstrap datepicker component. Writing it in a ng-container led to an unexpected anchoring behavior of the datePicker NOT directly\n below the dateInput element -->\n @switch (renderingStyle) {\n @case ('BUTTON') {\n <button lx-button (click)=\"showPopup()\" lxAutoclose (autoclose)=\"hidePopup()\" size=\"large\" endIcon=\"slim-arrow-down\">\n @if (dateStringTemplate) {\n <ng-container *ngTemplateOutlet=\"dateStringTemplate\" />\n } @else {\n {{ dateString ?? placeholder }}\n }\n </button>\n }\n @case ('INPUT') {\n <input\n #input\n class=\"form-control dateControl\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n placeholder=\"{{ placeholder }}\"\n [id]=\"inputId\"\n [lxAutofocus]=\"autoFocus\"\n [(ngModel)]=\"dateString\"\n [disabled]=\"disabled\"\n [lxMarkInvalid]=\"markInvalid\"\n (ngModelChange)=\"onDateStringChange($event)\"\n (focus)=\"showPopup()\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"hidePopup()\"\n (keydown.escape)=\"hidePopup()\"\n (keydown.tab)=\"hidePopup()\"\n (keydown.shift.tab)=\"hidePopup()\"\n [class.text-danger]=\"hasError\"\n (change)=\"onRawValueChange($event)\"\n />\n }\n @case ('LINK') {\n <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\n }\n }\n <ng-template\n #cdkDatepicker\n cdkConnectedOverlay\n [cdkConnectedOverlayOpen]=\"showDatepicker\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n (backdropClick)=\"hidePopup()\"\n >\n <div class=\"datepickerContainer\">\n <div class=\"calendar\">\n <datepicker\n class=\"popup\"\n (selectionDone)=\"onSelectionDone($event)\"\n [ngModel]=\"date\"\n [datepickerMode]=\"datepickerMode\"\n [initDate]=\"initDate\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [minMode]=\"minMode\"\n [maxMode]=\"maxMode\"\n [showWeeks]=\"showWeeks\"\n [formatDay]=\"formatDay\"\n [formatMonth]=\"formatMonth\"\n [formatYear]=\"formatYear\"\n [formatDayHeader]=\"formatDayHeader\"\n [formatDayTitle]=\"formatDayTitle\"\n [formatMonthTitle]=\"formatMonthTitle\"\n [startingDay]=\"startingDay\"\n [yearRange]=\"yearRange\"\n [onlyCurrentMonth]=\"onlyCurrentMonth\"\n [shortcutPropagation]=\"shortcutPropagation\"\n [customClass]=\"customClass\"\n [dateDisabled]=\"dateDisabled\"\n />\n </div>\n </div>\n </ng-template>\n </span>\n} @else {\n <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n @if (showDatepicker) {\n <div class=\"backdrop\" (click)=\"hidePopup()\"></div>\n }\n <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n @if (renderingStyle === 'INPUT') {\n <input\n #input\n class=\"form-control dateControl\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n placeholder=\"{{ placeholder }}\"\n [id]=\"inputId\"\n [lxAutofocus]=\"autoFocus\"\n [lxMarkInvalid]=\"markInvalid\"\n [(ngModel)]=\"dateString\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onDateStringChange($event)\"\n (focus)=\"showPopup()\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"hidePopup()\"\n (keydown.escape)=\"hidePopup()\"\n (keydown.tab)=\"hidePopup()\"\n (keydown.shift.tab)=\"hidePopup()\"\n [class.text-danger]=\"hasError\"\n (change)=\"onRawValueChange($event)\"\n />\n } @else if (renderingStyle === 'LINK') {\n <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\n }\n <div class=\"datepickerContainer\">\n <div class=\"calendar\">\n @if (showDatepicker) {\n <datepicker\n class=\"popup\"\n (selectionDone)=\"onSelectionDone($event)\"\n [ngModel]=\"date\"\n [datepickerMode]=\"datepickerMode\"\n [initDate]=\"initDate\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [minMode]=\"minMode\"\n [maxMode]=\"maxMode\"\n [showWeeks]=\"showWeeks\"\n [formatDay]=\"formatDay\"\n [formatMonth]=\"formatMonth\"\n [formatYear]=\"formatYear\"\n [formatDayHeader]=\"formatDayHeader\"\n [formatDayTitle]=\"formatDayTitle\"\n [formatMonthTitle]=\"formatMonthTitle\"\n [startingDay]=\"startingDay\"\n [yearRange]=\"yearRange\"\n [onlyCurrentMonth]=\"onlyCurrentMonth\"\n [shortcutPropagation]=\"shortcutPropagation\"\n [customClass]=\"customClass\"\n [dateDisabled]=\"dateDisabled\"\n />\n }\n </div>\n </div>\n </span>\n </div>\n}\n", styles: [".backdrop{background-color:transparent}.datepickerContainer{z-index:700}.wrapper .forLink .popup{top:15px}.dateControl,.calendar{position:relative}.popup{position:relative;left:0;z-index:700;border-radius:3px}.popup ::ng-deep .text-info{color:#2a303d}.popup ::ng-deep .text-muted{color:#99a5bb}.popup ::ng-deep .btn.active,.popup ::ng-deep .btn.active .text-info{color:#fff}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}.legacy .backdrop{position:fixed;z-index:2;inset:0}.legacy .datepickerContainer{position:absolute}.legacy.forLink{display:inline-block}.datepickerContainer datepicker{display:block;border-radius:4px;background-color:#fff;box-shadow:0 2px 8px #22364940;width:290px;z-index:700;padding:0 16px 16px;margin-top:4px}datepicker ::ng-deep .well{margin-bottom:0;border:none!important;background:none;box-shadow:none;padding:12px 0 0}datepicker ::ng-deep .btn:not([lx-button]){border:none!important;font-size:var(--lxFontSize, 14px)}datepicker ::ng-deep table tr:first-child th{padding-bottom:12px}datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]){color:#0070f2!important}datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]){border:solid 2px transparent!important;border-radius:8px;padding:8px 6px}datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):focus,datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]).focus{outline-offset:0}datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):hover{background-color:#fff;border:#0070f2 2px solid!important;border-radius:8px}datepicker ::ng-deep .btn-default.active:not([lx-button]){background:none;box-shadow:none;color:#fff;border:solid 2px #0070f2!important;background-color:#0070f2!important;border-radius:8px}datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-muted,datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-primary,datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-info{color:inherit}datepicker ::ng-deep tr td:first-child{padding:0 6px;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep th small b{font-weight:400;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep table{border-spacing:1px;border-collapse:separate}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutofocusDirective, selector: "[lxAutofocus]", inputs: ["lxAutofocus", "lxAutofocusPreventScroll", "lxAutofocusTimeout"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: DatePickerComponent, selector: "datepicker", inputs: ["datepickerMode", "initDate", "minDate", "maxDate", "minMode", "maxMode", "showWeeks", "formatDay", "formatMonth", "formatYear", "formatDayHeader", "formatDayTitle", "formatMonthTitle", "startingDay", "yearRange", "onlyCurrentMonth", "shortcutPropagation", "monthColLimit", "yearColLimit", "customClass", "dateDisabled", "dayDisabled", "activeDate"], outputs: ["selectionDone", "activeDateChange"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "pipe", type: CustomDatePipe, name: "lxDate" }] }); }
|
|
6800
|
+
], queries: [{ propertyName: "dateStringTemplate", first: true, predicate: ["dateStringTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (cdk) {\n <span\n class=\"wrapper\"\n [class.forLink]=\"renderingStyle === 'LINK'\"\n [class.has-error]=\"hasError\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n >\n <!-- TODO: The dateInput and datePicker code ist duplicated for cdk and withoutCdK use to solve a placing problem of the\n ngx-bootstrap datepicker component. Writing it in a ng-container led to an unexpected anchoring behavior of the datePicker NOT directly\n below the dateInput element -->\n @switch (renderingStyle) {\n @case ('BUTTON') {\n <button lx-button (click)=\"showPopup()\" lxAutoclose (autoclose)=\"hidePopup()\" size=\"large\" endIcon=\"slim-arrow-down\">\n @if (dateStringTemplate) {\n <ng-container *ngTemplateOutlet=\"dateStringTemplate\" />\n } @else {\n {{ dateString ?? placeholder }}\n }\n </button>\n }\n @case ('INPUT') {\n <input\n #input\n class=\"form-control dateControl\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n placeholder=\"{{ placeholder }}\"\n [id]=\"inputId\"\n [lxAutofocus]=\"autoFocus\"\n [(ngModel)]=\"dateString\"\n [disabled]=\"disabled\"\n [lxMarkInvalid]=\"markInvalid\"\n (ngModelChange)=\"onDateStringChange($event)\"\n (focus)=\"showPopup()\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"hidePopup()\"\n (keydown.escape)=\"hidePopup()\"\n (keydown.tab)=\"hidePopup()\"\n (keydown.shift.tab)=\"hidePopup()\"\n [class.text-danger]=\"hasError\"\n (change)=\"onRawValueChange($event)\"\n />\n }\n @case ('LINK') {\n <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\n }\n }\n <ng-template\n #cdkDatepicker\n cdkConnectedOverlay\n [cdkConnectedOverlayOpen]=\"showDatepicker\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n (backdropClick)=\"hidePopup()\"\n >\n <div class=\"datepickerContainer\">\n <div class=\"calendar\">\n <datepicker\n class=\"popup\"\n (selectionDone)=\"onSelectionDone($event)\"\n [ngModel]=\"date\"\n [datepickerMode]=\"datepickerMode\"\n [initDate]=\"initDate\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [minMode]=\"minMode\"\n [maxMode]=\"maxMode\"\n [showWeeks]=\"showWeeks\"\n [formatDay]=\"formatDay\"\n [formatMonth]=\"formatMonth\"\n [formatYear]=\"formatYear\"\n [formatDayHeader]=\"formatDayHeader\"\n [formatDayTitle]=\"formatDayTitle\"\n [formatMonthTitle]=\"formatMonthTitle\"\n [startingDay]=\"startingDay\"\n [yearRange]=\"yearRange\"\n [onlyCurrentMonth]=\"onlyCurrentMonth\"\n [shortcutPropagation]=\"shortcutPropagation\"\n [customClass]=\"customClass\"\n [dateDisabled]=\"dateDisabled\"\n />\n </div>\n </div>\n </ng-template>\n </span>\n} @else {\n <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n @if (showDatepicker) {\n <div class=\"backdrop\" (click)=\"hidePopup()\"></div>\n }\n <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n @if (renderingStyle === 'INPUT') {\n <input\n #input\n class=\"form-control dateControl\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n placeholder=\"{{ placeholder }}\"\n [id]=\"inputId\"\n [lxAutofocus]=\"autoFocus\"\n [lxMarkInvalid]=\"markInvalid\"\n [(ngModel)]=\"dateString\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onDateStringChange($event)\"\n (focus)=\"showPopup()\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"hidePopup()\"\n (keydown.escape)=\"hidePopup()\"\n (keydown.tab)=\"hidePopup()\"\n (keydown.shift.tab)=\"hidePopup()\"\n [class.text-danger]=\"hasError\"\n (change)=\"onRawValueChange($event)\"\n />\n } @else if (renderingStyle === 'LINK') {\n <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\n }\n <div class=\"datepickerContainer\">\n <div class=\"calendar\">\n @if (showDatepicker) {\n <datepicker\n class=\"popup\"\n (selectionDone)=\"onSelectionDone($event)\"\n [ngModel]=\"date\"\n [datepickerMode]=\"datepickerMode\"\n [initDate]=\"initDate\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [minMode]=\"minMode\"\n [maxMode]=\"maxMode\"\n [showWeeks]=\"showWeeks\"\n [formatDay]=\"formatDay\"\n [formatMonth]=\"formatMonth\"\n [formatYear]=\"formatYear\"\n [formatDayHeader]=\"formatDayHeader\"\n [formatDayTitle]=\"formatDayTitle\"\n [formatMonthTitle]=\"formatMonthTitle\"\n [startingDay]=\"startingDay\"\n [yearRange]=\"yearRange\"\n [onlyCurrentMonth]=\"onlyCurrentMonth\"\n [shortcutPropagation]=\"shortcutPropagation\"\n [customClass]=\"customClass\"\n [dateDisabled]=\"dateDisabled\"\n />\n }\n </div>\n </div>\n </span>\n </div>\n}\n", styles: [".backdrop{background-color:transparent}.datepickerContainer{z-index:700}.wrapper .forLink .popup{top:15px}.dateControl,.calendar{position:relative}.popup{position:relative;left:0;z-index:700;border-radius:3px}.popup ::ng-deep .text-info{color:#2a303d}.popup ::ng-deep .text-muted{color:#99a5bb}.popup ::ng-deep .btn.active,.popup ::ng-deep .btn.active .text-info{color:#fff}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}.legacy .backdrop{position:fixed;z-index:2;inset:0}.legacy .datepickerContainer{position:absolute}.legacy.forLink{display:inline-block}.datepickerContainer datepicker{display:block;border-radius:4px;background-color:#fff;box-shadow:0 2px 8px #22364940;width:290px;z-index:700;padding:0 16px 16px;margin-top:4px}datepicker ::ng-deep .well{margin-bottom:0;border:none!important;background:none;box-shadow:none;padding:12px 0 0}datepicker ::ng-deep .btn:not([lx-button]){border:none!important;font-size:var(--lxFontSize, 14px)}datepicker ::ng-deep table tr:first-child th{padding-bottom:12px}datepicker ::ng-deep table tr:first-child th .btn:not([lx-button]){color:#0070f2!important}datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]){border:solid 2px transparent!important;border-radius:8px;padding:8px 6px}datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):focus,datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]).focus{outline-offset:0}datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):hover{background-color:#fff;border:#0070f2 2px solid!important;border-radius:8px}datepicker ::ng-deep .btn-default.active:not([lx-button]){background:none;box-shadow:none;color:#fff;border:solid 2px #0070f2!important;background-color:#0070f2!important;border-radius:8px}datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-muted,datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-primary,datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-info{color:inherit}datepicker ::ng-deep tr td:first-child{padding:0 6px;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep th small b{font-weight:400;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep table{border-spacing:1px;border-collapse:separate}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutofocusDirective, selector: "[lxAutofocus]", inputs: ["lxAutofocus", "lxAutofocusPreventScroll", "lxAutofocusTimeout"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: DatePickerComponent, selector: "datepicker", inputs: ["datepickerMode", "initDate", "minDate", "maxDate", "minMode", "maxMode", "showWeeks", "formatDay", "formatMonth", "formatYear", "formatDayHeader", "formatDayTitle", "formatMonthTitle", "startingDay", "yearRange", "onlyCurrentMonth", "shortcutPropagation", "monthColLimit", "yearColLimit", "customClass", "dateDisabled", "dayDisabled", "activeDate"], outputs: ["selectionDone", "activeDateChange"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "pipe", type: CustomDatePipe, name: "lxDate" }] }); }
|
|
6799
6801
|
}
|
|
6800
6802
|
__decorate([
|
|
6801
6803
|
Observe('initDateString')
|
|
@@ -7057,7 +7059,7 @@ class KeyboardSortableItemDirective {
|
|
|
7057
7059
|
}
|
|
7058
7060
|
}
|
|
7059
7061
|
}
|
|
7060
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: KeyboardSortableItemDirective, deps: [{ token: i1$
|
|
7062
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: KeyboardSortableItemDirective, deps: [{ token: i1$6.CdkDrag }, { token: i1$2.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1$2.Overlay }, { token: i2.AriaDescriber }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7061
7063
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: KeyboardSortableItemDirective, isStandalone: true, selector: "[lxKeyboardSortableItem]", inputs: { allItemsData: ["lxKeyboardSortableItem", "allItemsData"], itemData: ["lxKeyboardItemData", "itemData"], isSortingByKeyboard: "isSortingByKeyboard", itemBeingSorted: ["lxKeyboardItemBeingSorted", "itemBeingSorted"] }, outputs: { isSortingByKeyboardChange: "isSortingByKeyboardChange", itemBeingSortedChange: "lxKeyboardItemBeingSortedChange", sortItemsWithKeyboard: "sortItemsWithKeyboard", focusWithKeyboard: "focusWithKeyboard" }, host: { listeners: { "keyup.tab": "focusViaKeyboard()", "keydown.enter": "enterSortingModeEnabledByKeyboard($event)", "keydown.space": "enterSortingModeEnabledByKeyboard($event)", "blur": "leaveSortingModeEnabledByKeyboard($event)", "keydown.esc": "leaveSortingModeEnabledByKeyboard($event)", "keydown.arrowUp": "sort($event)", "keydown.arrowDown": "sort($event)" }, properties: { "attr.lxTooltip": "this.tooltipDirective", "class.isBeingSortedByKeyboard": "this.isBeingSorted" } }, usesOnChanges: true, ngImport: i0 }); }
|
|
7062
7064
|
}
|
|
7063
7065
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: KeyboardSortableItemDirective, decorators: [{
|
|
@@ -7065,7 +7067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
7065
7067
|
args: [{
|
|
7066
7068
|
selector: '[lxKeyboardSortableItem]'
|
|
7067
7069
|
}]
|
|
7068
|
-
}], ctorParameters: () => [{ type: i1$
|
|
7070
|
+
}], ctorParameters: () => [{ type: i1$6.CdkDrag }, { type: i1$2.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$2.Overlay }, { type: i2.AriaDescriber }], propDecorators: { allItemsData: [{
|
|
7069
7071
|
type: Input,
|
|
7070
7072
|
args: ['lxKeyboardSortableItem']
|
|
7071
7073
|
}], itemData: [{
|
|
@@ -7128,7 +7130,7 @@ class KeyboardSortableListDirective {
|
|
|
7128
7130
|
item.tooltipDirective.show();
|
|
7129
7131
|
});
|
|
7130
7132
|
}
|
|
7131
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: KeyboardSortableListDirective, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7133
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: KeyboardSortableListDirective, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7132
7134
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: KeyboardSortableListDirective, isStandalone: true, selector: "[lxKeyboardSortableList]", inputs: { keyboardSortableItems: "keyboardSortableItems" }, ngImport: i0 }); }
|
|
7133
7135
|
}
|
|
7134
7136
|
__decorate([
|
|
@@ -7139,7 +7141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
7139
7141
|
args: [{
|
|
7140
7142
|
selector: '[lxKeyboardSortableList]'
|
|
7141
7143
|
}]
|
|
7142
|
-
}], ctorParameters: () => [{ type: i1.TranslateService }], propDecorators: { keyboardSortableItems$: [], keyboardSortableItems: [{
|
|
7144
|
+
}], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { keyboardSortableItems$: [], keyboardSortableItems: [{
|
|
7143
7145
|
type: Input
|
|
7144
7146
|
}] } });
|
|
7145
7147
|
|
|
@@ -7238,7 +7240,7 @@ class DragAndDropListComponent {
|
|
|
7238
7240
|
this.moveItem.emit({ item, index: currentIndex });
|
|
7239
7241
|
}
|
|
7240
7242
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DragAndDropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7241
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DragAndDropListComponent, isStandalone: true, selector: "lx-drag-and-drop-list", inputs: { label: "label", labelFontWeight: "labelFontWeight", color: "color", fontSize: "fontSize" }, outputs: { moveToIndex: "moveToIndex", moveItem: "moveItem" }, host: { properties: { "attr.color": "this.color", "attr.fontSize": "this.fontSize" } }, queries: [{ propertyName: "_items", predicate: DragAndDropListItemComponent }], viewQueries: [{ propertyName: "_keyboardSortableItems", predicate: KeyboardSortableItemDirective, descendants: true }], ngImport: i0, template: "@if (label) {\n <label [style.font-weight]=\"labelFontWeight\">{{ label }}</label>\n}\n<p class=\"sr-only\">{{ NAME + '.helpTooltip' | translate }}</p>\n<ul\n cdkDropList\n class=\"list\"\n role=\"listbox\"\n [attr.aria-label]=\"label\"\n lxKeyboardSortableList\n [keyboardSortableItems]=\"keyboardSortableItems$ | async\"\n [cdkDropListData]=\"items$ | async\"\n (cdkDropListDropped)=\"drop($event)\"\n>\n @for (itemComponent of items$ | async; track itemComponent.item) {\n <li\n #listItemParent\n class=\"item\"\n cdkDrag\n cdkDragLockAxis=\"y\"\n [cdkDragData]=\"itemComponent.item\"\n [cdkDragDisabled]=\"!itemComponent.draggable\"\n [class.dark]=\"color === 'dark'\"\n [class.big]=\"fontSize === 'big'\"\n [tabIndex]=\"itemComponent.draggable === false ? -1 : 0\"\n [lxKeyboardSortableItem]=\"allItemsData$ | async\"\n [lxKeyboardItemData]=\"itemComponent.item\"\n [(isSortingByKeyboard)]=\"isSortingByKeyboard\"\n [(lxKeyboardItemBeingSorted)]=\"keyboardItemBeingSorted\"\n (sortItemsWithKeyboard)=\"dropToIndexAfterArrowKey(itemComponent.item, $event.previousIndex, $event.currentIndex)\"\n >\n <lx-drag-and-drop-list-item\n class=\"dragAndDropItem\"\n [item]=\"itemComponent.item\"\n [draggable]=\"itemComponent.draggable\"\n [actions]=\"itemComponent.actions\"\n (action)=\"emitContentChildAction($event)\"\n >\n @if (itemComponent.customTemplateRef) {\n <ng-template #customTemplate>\n <ng-container *ngTemplateOutlet=\"itemComponent.customTemplateRef\" />\n </ng-template>\n }\n </lx-drag-and-drop-list-item>\n </li>\n }\n</ul>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.spin{animation:spin 2s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}:host{display:block}.list{list-style-type:none;width:100%;display:block;padding:0;color:#526179}.item.cdk-drag-disabled{background:#eaedf1;cursor:default}.item{position:relative;cursor:move;border:solid 1px #99a5bb;margin-bottom:4px;border-radius:3px}.item:focus{outline:1px auto #0070f2}.cdk-drag-preview{box-sizing:border-box;border-radius:3px;list-style:none;border:solid 1px #99a5bb!important;box-shadow:0 3px 4px #7474744d}.cdk-drag-placeholder{opacity:.5}.cdk-drag-placeholder i{opacity:0}.cdk-drag-animating{transition:transform .18s;transition-delay:0s;transition-timing-function:ease}.list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .18s;transition-delay:0s;transition-timing-function:ease}:host[color=dark] lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}:host[color=dark] .list,:host[color=dark] .item{border:0}:host[color=dark] .item.cdk-drag-disabled lx-drag-and-drop-list-item{background:#fff;color:#99a5bb;border:1px solid #99a5bb}:host[fontSize=big] .item{text-transform:uppercase;font-weight:700}.cdk-drag-preview.dark{border:0!important}.cdk-drag-preview.dark lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}.cdk-drag-preview.big{text-transform:uppercase;font-weight:700}.isBeingSortedByKeyboard{box-shadow:0 6px 24px #b2bccc;z-index:1}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: KeyboardSortableListDirective, selector: "[lxKeyboardSortableList]", inputs: ["keyboardSortableItems"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: KeyboardSortableItemDirective, selector: "[lxKeyboardSortableItem]", inputs: ["lxKeyboardSortableItem", "lxKeyboardItemData", "isSortingByKeyboard", "lxKeyboardItemBeingSorted"], outputs: ["isSortingByKeyboardChange", "lxKeyboardItemBeingSortedChange", "sortItemsWithKeyboard", "focusWithKeyboard"] }, { kind: "component", type: DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: ["item", "draggable", "actions"], outputs: ["action"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
|
|
7243
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DragAndDropListComponent, isStandalone: true, selector: "lx-drag-and-drop-list", inputs: { label: "label", labelFontWeight: "labelFontWeight", color: "color", fontSize: "fontSize" }, outputs: { moveToIndex: "moveToIndex", moveItem: "moveItem" }, host: { properties: { "attr.color": "this.color", "attr.fontSize": "this.fontSize" } }, queries: [{ propertyName: "_items", predicate: DragAndDropListItemComponent }], viewQueries: [{ propertyName: "_keyboardSortableItems", predicate: KeyboardSortableItemDirective, descendants: true }], ngImport: i0, template: "@if (label) {\n <label [style.font-weight]=\"labelFontWeight\">{{ label }}</label>\n}\n<p class=\"sr-only\">{{ NAME + '.helpTooltip' | translate }}</p>\n<ul\n cdkDropList\n class=\"list\"\n role=\"listbox\"\n [attr.aria-label]=\"label\"\n lxKeyboardSortableList\n [keyboardSortableItems]=\"keyboardSortableItems$ | async\"\n [cdkDropListData]=\"items$ | async\"\n (cdkDropListDropped)=\"drop($event)\"\n>\n @for (itemComponent of items$ | async; track itemComponent.item) {\n <li\n #listItemParent\n class=\"item\"\n cdkDrag\n cdkDragLockAxis=\"y\"\n [cdkDragData]=\"itemComponent.item\"\n [cdkDragDisabled]=\"!itemComponent.draggable\"\n [class.dark]=\"color === 'dark'\"\n [class.big]=\"fontSize === 'big'\"\n [tabIndex]=\"itemComponent.draggable === false ? -1 : 0\"\n [lxKeyboardSortableItem]=\"allItemsData$ | async\"\n [lxKeyboardItemData]=\"itemComponent.item\"\n [(isSortingByKeyboard)]=\"isSortingByKeyboard\"\n [(lxKeyboardItemBeingSorted)]=\"keyboardItemBeingSorted\"\n (sortItemsWithKeyboard)=\"dropToIndexAfterArrowKey(itemComponent.item, $event.previousIndex, $event.currentIndex)\"\n >\n <lx-drag-and-drop-list-item\n class=\"dragAndDropItem\"\n [item]=\"itemComponent.item\"\n [draggable]=\"itemComponent.draggable\"\n [actions]=\"itemComponent.actions\"\n (action)=\"emitContentChildAction($event)\"\n >\n @if (itemComponent.customTemplateRef) {\n <ng-template #customTemplate>\n <ng-container *ngTemplateOutlet=\"itemComponent.customTemplateRef\" />\n </ng-template>\n }\n </lx-drag-and-drop-list-item>\n </li>\n }\n</ul>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.spin{animation:spin 2s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}:host{display:block}.list{list-style-type:none;width:100%;display:block;padding:0;color:#526179}.item.cdk-drag-disabled{background:#eaedf1;cursor:default}.item{position:relative;cursor:move;border:solid 1px #99a5bb;margin-bottom:4px;border-radius:3px}.item:focus{outline:1px auto #0070f2}.cdk-drag-preview{box-sizing:border-box;border-radius:3px;list-style:none;border:solid 1px #99a5bb!important;box-shadow:0 3px 4px #7474744d}.cdk-drag-placeholder{opacity:.5}.cdk-drag-placeholder i{opacity:0}.cdk-drag-animating{transition:transform .18s;transition-delay:0s;transition-timing-function:ease}.list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .18s;transition-delay:0s;transition-timing-function:ease}:host[color=dark] lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}:host[color=dark] .list,:host[color=dark] .item{border:0}:host[color=dark] .item.cdk-drag-disabled lx-drag-and-drop-list-item{background:#fff;color:#99a5bb;border:1px solid #99a5bb}:host[fontSize=big] .item{text-transform:uppercase;font-weight:700}.cdk-drag-preview.dark{border:0!important}.cdk-drag-preview.dark lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}.cdk-drag-preview.big{text-transform:uppercase;font-weight:700}.isBeingSortedByKeyboard{box-shadow:0 6px 24px #b2bccc;z-index:1}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: KeyboardSortableListDirective, selector: "[lxKeyboardSortableList]", inputs: ["keyboardSortableItems"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: KeyboardSortableItemDirective, selector: "[lxKeyboardSortableItem]", inputs: ["lxKeyboardSortableItem", "lxKeyboardItemData", "isSortingByKeyboard", "lxKeyboardItemBeingSorted"], outputs: ["isSortingByKeyboardChange", "lxKeyboardItemBeingSortedChange", "sortItemsWithKeyboard", "focusWithKeyboard"] }, { kind: "component", type: DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: ["item", "draggable", "actions"], outputs: ["action"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
|
|
7242
7244
|
}
|
|
7243
7245
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DragAndDropListComponent, decorators: [{
|
|
7244
7246
|
type: Component,
|
|
@@ -7282,7 +7284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
7282
7284
|
class LxDragAndDropListModule {
|
|
7283
7285
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LxDragAndDropListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7284
7286
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: LxDragAndDropListModule, imports: [CommonModule,
|
|
7285
|
-
DragDropModule, i1.TranslateModule, KeyboardSortableItemDirective,
|
|
7287
|
+
DragDropModule, i1$1.TranslateModule, KeyboardSortableItemDirective,
|
|
7286
7288
|
KeyboardSortableListDirective,
|
|
7287
7289
|
DragAndDropListComponent,
|
|
7288
7290
|
DragAndDropListItemComponent], exports: [DragAndDropListComponent, DragAndDropListItemComponent] }); }
|
|
@@ -7382,7 +7384,7 @@ class FormErrorComponent {
|
|
|
7382
7384
|
return [];
|
|
7383
7385
|
}
|
|
7384
7386
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7385
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FormErrorComponent, isStandalone: true, selector: "lx-form-error", inputs: { namespace: "namespace", form: "form", controlName: "controlName" }, usesOnChanges: true, ngImport: i0, template: "@for (key of translationKeys; track $index) {\n <div class=\"error\">\n {{ key | translate }}\n </div>\n}\n", styles: [".error{color:#f96464;padding:4px}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
|
|
7387
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FormErrorComponent, isStandalone: true, selector: "lx-form-error", inputs: { namespace: "namespace", form: "form", controlName: "controlName" }, usesOnChanges: true, ngImport: i0, template: "@for (key of translationKeys; track $index) {\n <div class=\"error\">\n {{ key | translate }}\n </div>\n}\n", styles: [".error{color:#f96464;padding:4px}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
|
|
7386
7388
|
}
|
|
7387
7389
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormErrorComponent, decorators: [{
|
|
7388
7390
|
type: Component,
|
|
@@ -7444,13 +7446,13 @@ class InputComponent {
|
|
|
7444
7446
|
ngOnDestroy() {
|
|
7445
7447
|
this.destroyed$.next();
|
|
7446
7448
|
}
|
|
7447
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: InputComponent, deps: [{ token: i1$
|
|
7449
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: InputComponent, deps: [{ token: i1$5.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7448
7450
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: InputComponent, isStandalone: true, selector: "input[lx-input]", inputs: { error: "error", disabled: "disabled" }, host: { properties: { "class.error": "this.error", "class.disabled": "this.disabled" } }, ngImport: i0, template: ``, isInline: true, styles: [":host{height:32px;padding:8px;border-radius:3px;border:solid 1px #99a5bb;outline:0;color:#2a303d}:host:focus{border-color:#99c6fa}:host.error{border-color:#f96464}:host.lx-max-length-counter-input.error{color:#f96464}:host.lx-max-length-counter-input.error+span.lx-max-length-counter{color:#f96464}:host.lx-max-length-counter-input+span.lx-max-length-counter{font-size:var(--lxFontSize, 14px);float:right;margin-left:auto;margin-top:2px}:host.disabled{background-color:#f0f2f5;color:#61779d}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }] }); }
|
|
7449
7451
|
}
|
|
7450
7452
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: InputComponent, decorators: [{
|
|
7451
7453
|
type: Component,
|
|
7452
7454
|
args: [{ selector: 'input[lx-input]', template: ``, imports: [ReactiveFormsModule], styles: [":host{height:32px;padding:8px;border-radius:3px;border:solid 1px #99a5bb;outline:0;color:#2a303d}:host:focus{border-color:#99c6fa}:host.error{border-color:#f96464}:host.lx-max-length-counter-input.error{color:#f96464}:host.lx-max-length-counter-input.error+span.lx-max-length-counter{color:#f96464}:host.lx-max-length-counter-input+span.lx-max-length-counter{font-size:var(--lxFontSize, 14px);float:right;margin-left:auto;margin-top:2px}:host.disabled{background-color:#f0f2f5;color:#61779d}\n"] }]
|
|
7453
|
-
}], ctorParameters: () => [{ type: i1$
|
|
7455
|
+
}], ctorParameters: () => [{ type: i1$5.NgControl, decorators: [{
|
|
7454
7456
|
type: Optional
|
|
7455
7457
|
}] }], propDecorators: { error: [{
|
|
7456
7458
|
type: Input
|
|
@@ -7756,7 +7758,7 @@ class ResponsiveInputComponent {
|
|
|
7756
7758
|
multi: true,
|
|
7757
7759
|
useExisting: forwardRef(() => ResponsiveInputComponent)
|
|
7758
7760
|
}
|
|
7759
|
-
], viewQueries: [{ propertyName: "responsiveInput", first: true, predicate: ["responsiveInput"], descendants: true, static: true }, { propertyName: "inputWidth", first: true, predicate: ["inputWidth"], descendants: true, static: true }], ngImport: i0, template: "<span #inputWidth class=\"inputWidth\"></span>\n<input\n type=\"text\"\n class=\"responsiveInput\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n (focus)=\"focus.emit()\"\n (blur)=\"blur.emit()\"\n (keyup.tab)=\"focusViaTab.emit()\"\n (keyup.shift.tab)=\"focusViaTab.emit()\"\n [formControl]=\"inputControl\"\n [attr.id]=\"inputId\"\n #responsiveInput\n [style.width]=\"inputWidth$ | async\"\n/>\n", styles: [":host{display:inline-block}.inputWidth{display:none;height:0;overflow:hidden;position:absolute;white-space:pre;max-width:100%}.responsiveInput{border:0;padding:0;height:100%;max-width:100%}.responsiveInput::-ms-clear{display:none}.responsiveInput:focus{outline:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$
|
|
7761
|
+
], viewQueries: [{ propertyName: "responsiveInput", first: true, predicate: ["responsiveInput"], descendants: true, static: true }, { propertyName: "inputWidth", first: true, predicate: ["inputWidth"], descendants: true, static: true }], ngImport: i0, template: "<span #inputWidth class=\"inputWidth\"></span>\n<input\n type=\"text\"\n class=\"responsiveInput\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n (focus)=\"focus.emit()\"\n (blur)=\"blur.emit()\"\n (keyup.tab)=\"focusViaTab.emit()\"\n (keyup.shift.tab)=\"focusViaTab.emit()\"\n [formControl]=\"inputControl\"\n [attr.id]=\"inputId\"\n #responsiveInput\n [style.width]=\"inputWidth$ | async\"\n/>\n", styles: [":host{display:inline-block}.inputWidth{display:none;height:0;overflow:hidden;position:absolute;white-space:pre;max-width:100%}.responsiveInput{border:0;padding:0;height:100%;max-width:100%}.responsiveInput::-ms-clear{display:none}.responsiveInput:focus{outline:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7760
7762
|
}
|
|
7761
7763
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ResponsiveInputComponent, decorators: [{
|
|
7762
7764
|
type: Component,
|
|
@@ -8172,7 +8174,7 @@ class MultiSelectComponent extends BaseSelectDirective {
|
|
|
8172
8174
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
8173
8175
|
multi: true
|
|
8174
8176
|
}
|
|
8175
|
-
], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selectionTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "selectionElement", first: true, predicate: MultiSelectSelectionComponent, descendants: true, read: ElementRef }, { propertyName: "toggleElement", first: true, predicate: ["toggle"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (dropdownOpen) {\n <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.focused]=\"isInputFocused\"\n [class.tokenized]=\"tokenize\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n [class.hasSelection]=\"selection && selection.length > 0\"\n [class.smallSize]=\"size === 'small'\"\n [class.disabled]=\"disabled\"\n (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n <div class=\"selectedChoicesContainer\">\n @if ((selection?.length === 0 || !selection) && !queryControl?.value) {\n <div class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n }\n @if (selectionTemplate) {\n <div class=\"selectionAndInput\">\n <lx-multi-select-selection\n [selection]=\"selection\"\n [tokenize]=\"tokenize\"\n [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n >\n <ng-template #innerSelectionTemplate let-option>\n <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n </ng-template>\n </lx-multi-select-selection>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n </div>\n } @else {\n <div class=\"selection\">\n <ng-content select=\".pills\" />\n </div>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n }\n @if (!disabled) {\n <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n }\n </div>\n <div class=\"optionsContainer\" #optionsContainer>\n @if (dropdownOpen) {\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n }\n </div>\n</div>\n\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:#fff}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .selectionAndInput{display:flex}.selectContainer.tokenized lx-multi-select-selection{flex-grow:1}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}lx-responsive-input{height:29px}.backdrop{z-index:1048;position:fixed;inset:0}\n"], dependencies: [{ kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: MultiSelectSelectionComponent, selector: "lx-multi-select-selection", inputs: ["selection", "tokenize"], outputs: ["removeItem"] }, { kind: "component", type: ResponsiveInputComponent, selector: "lx-responsive-input", inputs: ["inputId"], outputs: ["focus", "focusViaTab", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$
|
|
8177
|
+
], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selectionTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "selectionElement", first: true, predicate: MultiSelectSelectionComponent, descendants: true, read: ElementRef }, { propertyName: "toggleElement", first: true, predicate: ["toggle"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (dropdownOpen) {\n <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.focused]=\"isInputFocused\"\n [class.tokenized]=\"tokenize\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n [class.hasSelection]=\"selection && selection.length > 0\"\n [class.smallSize]=\"size === 'small'\"\n [class.disabled]=\"disabled\"\n (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n <div class=\"selectedChoicesContainer\">\n @if ((selection?.length === 0 || !selection) && !queryControl?.value) {\n <div class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n }\n @if (selectionTemplate) {\n <div class=\"selectionAndInput\">\n <lx-multi-select-selection\n [selection]=\"selection\"\n [tokenize]=\"tokenize\"\n [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n >\n <ng-template #innerSelectionTemplate let-option>\n <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n </ng-template>\n </lx-multi-select-selection>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n </div>\n } @else {\n <div class=\"selection\">\n <ng-content select=\".pills\" />\n </div>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n }\n @if (!disabled) {\n <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n }\n </div>\n <div class=\"optionsContainer\" #optionsContainer>\n @if (dropdownOpen) {\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n }\n </div>\n</div>\n\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:#fff}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .selectionAndInput{display:flex}.selectContainer.tokenized lx-multi-select-selection{flex-grow:1}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}lx-responsive-input{height:29px}.backdrop{z-index:1048;position:fixed;inset:0}\n"], dependencies: [{ kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: MultiSelectSelectionComponent, selector: "lx-multi-select-selection", inputs: ["selection", "tokenize"], outputs: ["removeItem"] }, { kind: "component", type: ResponsiveInputComponent, selector: "lx-responsive-input", inputs: ["inputId"], outputs: ["focus", "focusViaTab", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
8176
8178
|
}
|
|
8177
8179
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
|
8178
8180
|
type: Component,
|
|
@@ -8324,7 +8326,7 @@ class OptionGroupDropdownComponent extends KeyboardSelectDirective {
|
|
|
8324
8326
|
this.isTopDropdown = event.connectionPair.originY === 'top';
|
|
8325
8327
|
}
|
|
8326
8328
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OptionGroupDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
8327
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: OptionGroupDropdownComponent, isStandalone: true, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty", overlayPositioning: "overlayPositioning" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (overlayPositioning) {\n <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n (positionChange)=\"onPositionChange($event)\"\n >\n <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n <ng-container *ngTemplateOutlet=\"dropdownContent; context: { keyboardSelectContainer: keyboardSelectContainer }\" />\n </div>\n </ng-template>\n} @else {\n <ng-container *ngTemplateOutlet=\"dropdownContent; context: { keyboardSelectContainer: keyboardSelectContainer }\" />\n}\n\n<ng-template #dropdownContent let-keyboardSelectContainer=\"keyboardSelectContainer\">\n <div\n #keyboardSelectContainer\n class=\"scrollingPanel lxThinScrollbar\"\n infinite-scroll\n [scrollWindow]=\"false\"\n [fromRoot]=\"true\"\n (scrolled)=\"containerScrolled.emit()\"\n >\n <ul class=\"options\">\n @if (showCreateNewOption && newOptionLabel && isNewItem) {\n <li\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onCreateNewOption()\"\n (select)=\"onCreateNewOption()\"\n [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n </li>\n }\n @for (optionGroup of optionGroups; track trackByLabel($index, optionGroup); let groupIndex = $index) {\n <li>\n @if (optionGroup.label) {\n <div class=\"groupLabel\">\n <span>{{ optionGroup.label | uppercase }}</span>\n </div>\n }\n <ul>\n @if (showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0) {\n <li class=\"noResult\">\n @if (noResultsOptionTemplateRef) {\n <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n } @else {\n <span>{{ NAME + '.noResults' | translate }}</span>\n }\n </li>\n } @else {\n @for (option of optionGroup.options; track trackByValue($index, option); let index = $index) {\n <li\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option\"\n (click)=\"selectOption(option)\"\n (select)=\"selectOption(option)\"\n [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n >\n @if (optionTemplateRef) {\n <ng-container\n *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n />\n } @else {\n <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n }\n </li>\n }\n }\n </ul>\n </li>\n }\n @if (loading) {\n <lx-spinner [fadeBackground]=\"true\" />\n }\n </ul>\n </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$
|
|
8329
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: OptionGroupDropdownComponent, isStandalone: true, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty", overlayPositioning: "overlayPositioning" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (overlayPositioning) {\n <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n (positionChange)=\"onPositionChange($event)\"\n >\n <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n <ng-container *ngTemplateOutlet=\"dropdownContent; context: { keyboardSelectContainer: keyboardSelectContainer }\" />\n </div>\n </ng-template>\n} @else {\n <ng-container *ngTemplateOutlet=\"dropdownContent; context: { keyboardSelectContainer: keyboardSelectContainer }\" />\n}\n\n<ng-template #dropdownContent let-keyboardSelectContainer=\"keyboardSelectContainer\">\n <div\n #keyboardSelectContainer\n class=\"scrollingPanel lxThinScrollbar\"\n infinite-scroll\n [scrollWindow]=\"false\"\n [fromRoot]=\"true\"\n (scrolled)=\"containerScrolled.emit()\"\n >\n <ul class=\"options\">\n @if (showCreateNewOption && newOptionLabel && isNewItem) {\n <li\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onCreateNewOption()\"\n (select)=\"onCreateNewOption()\"\n [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n </li>\n }\n @for (optionGroup of optionGroups; track trackByLabel($index, optionGroup); let groupIndex = $index) {\n <li>\n @if (optionGroup.label) {\n <div class=\"groupLabel\">\n <span>{{ optionGroup.label | uppercase }}</span>\n </div>\n }\n <ul>\n @if (showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0) {\n <li class=\"noResult\">\n @if (noResultsOptionTemplateRef) {\n <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n } @else {\n <span>{{ NAME + '.noResults' | translate }}</span>\n }\n </li>\n } @else {\n @for (option of optionGroup.options; track trackByValue($index, option); let index = $index) {\n <li\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option\"\n (click)=\"selectOption(option)\"\n (select)=\"selectOption(option)\"\n [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n >\n @if (optionTemplateRef) {\n <ng-container\n *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n />\n } @else {\n <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n }\n </li>\n }\n }\n </ul>\n </li>\n }\n @if (loading) {\n <lx-spinner [fadeBackground]=\"true\" />\n }\n </ul>\n </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle", "descriptionStyleOptions"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8328
8330
|
}
|
|
8329
8331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OptionGroupDropdownComponent, decorators: [{
|
|
8330
8332
|
type: Component,
|
|
@@ -8703,13 +8705,13 @@ class OptionsDropdownComponent {
|
|
|
8703
8705
|
const newEvent = new KeyboardEvent(event.type, newEventOptions);
|
|
8704
8706
|
this.lxButton?.dispatchEvent(newEvent);
|
|
8705
8707
|
}
|
|
8706
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$
|
|
8708
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.ScrollStrategyOptions }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8707
8709
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: OptionsDropdownComponent, isStandalone: true, selector: "lx-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight", closeOnSelect: "closeOnSelect", overlayPositioning: "overlayPositioning", dropdownClass: "dropdownClass", isFlexEnabledTriggerContainer: "isFlexEnabledTriggerContainer" }, outputs: { opened: "opened", closed: "closed", closedWithoutSelection: "closedWithoutSelection" }, host: { properties: { "style.display": "this.displayStyle" } }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "@if (overlayPositioning) {\n <div class=\"overlayOrigin triggerContainer\" (click)=\"toggleOpen()\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n </div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n [cdkConnectedOverlayOpen]=\"open\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n (overlayOutsideClick)=\"closeDropdown(); closedWithoutSelection.emit()\"\n >\n <div class=\"overlayDropdown\">\n <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n </div>\n </ng-template>\n} @else {\n <div lxAutoclose (autoclose)=\"closeDropdown()\">\n <div class=\"triggerContainer\" [ngClass]=\"{ flexDisplay: isFlexEnabledTriggerContainer }\" (click)=\"toggleOpen()\">\n <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n </div>\n <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n </div>\n}\n\n<ng-template #triggerTemplate>\n <ng-content select=\"[lxKeyboardActionSource]\" />\n</ng-template>\n\n<ng-template #dropdownTemplate>\n @if (open) {\n <ul\n [id]=\"listboxId\"\n [class]=\"dropdownClass\"\n [class.left]=\"align === 'left'\"\n [class.showScrollbar]=\"maxHeight !== 'none'\"\n [style.max-height]=\"maxHeight\"\n role=\"listbox\"\n tabindex=\"-1\"\n [attr.aria-owns]=\"optionIds.join(' ')\"\n >\n <ng-content />\n </ul>\n }\n</ng-template>\n", styles: [":host{position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}.flexDisplay{display:flex}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup", "autocloseIgnore"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8708
8710
|
}
|
|
8709
8711
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OptionsDropdownComponent, decorators: [{
|
|
8710
8712
|
type: Component,
|
|
8711
8713
|
args: [{ selector: 'lx-options-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, NgClass, CdkOverlayOrigin, CdkConnectedOverlay, AutocloseDirective], template: "@if (overlayPositioning) {\n <div class=\"overlayOrigin triggerContainer\" (click)=\"toggleOpen()\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n </div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n [cdkConnectedOverlayOpen]=\"open\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n (overlayOutsideClick)=\"closeDropdown(); closedWithoutSelection.emit()\"\n >\n <div class=\"overlayDropdown\">\n <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n </div>\n </ng-template>\n} @else {\n <div lxAutoclose (autoclose)=\"closeDropdown()\">\n <div class=\"triggerContainer\" [ngClass]=\"{ flexDisplay: isFlexEnabledTriggerContainer }\" (click)=\"toggleOpen()\">\n <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n </div>\n <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n </div>\n}\n\n<ng-template #triggerTemplate>\n <ng-content select=\"[lxKeyboardActionSource]\" />\n</ng-template>\n\n<ng-template #dropdownTemplate>\n @if (open) {\n <ul\n [id]=\"listboxId\"\n [class]=\"dropdownClass\"\n [class.left]=\"align === 'left'\"\n [class.showScrollbar]=\"maxHeight !== 'none'\"\n [style.max-height]=\"maxHeight\"\n role=\"listbox\"\n tabindex=\"-1\"\n [attr.aria-owns]=\"optionIds.join(' ')\"\n >\n <ng-content />\n </ul>\n }\n</ng-template>\n", styles: [":host{position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}.flexDisplay{display:flex}\n"] }]
|
|
8712
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$
|
|
8714
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.ScrollStrategyOptions }, { type: i0.Renderer2 }], propDecorators: { align: [{
|
|
8713
8715
|
type: Input
|
|
8714
8716
|
}], closeOnScroll: [{
|
|
8715
8717
|
type: Input
|
|
@@ -8942,13 +8944,13 @@ class PickerOptionComponent {
|
|
|
8942
8944
|
selectOption() {
|
|
8943
8945
|
this.select.emit(this.value);
|
|
8944
8946
|
}
|
|
8945
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PickerOptionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8947
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PickerOptionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8946
8948
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: PickerOptionComponent, isStandalone: true, selector: "li[lx-picker-option]", inputs: { optionId: "optionId", ariaLabel: "ariaLabel", value: "value", selected: "selected", isClearOption: "isClearOption" }, outputs: { select: "select" }, host: { listeners: { "click": "manageClickEvents()" }, properties: { "attr.role": "this.role", "attr.aria-selected": "this.ariaSelected", "attr.aria-label": "this.ariaLabelValue", "attr.title": "this.titleValue", "id": "this.id", "class.selected": "this.selected", "class.clearOption": "this.isClearOption", "class.highlighted": "this.highlighted" } }, ngImport: i0, template: "@if (isClearOption) {\n <ui5-icon name=\"tnt/communication-path\" design=\"Neutral\" class=\"slash\" />\n} @else {\n <ng-content />\n}\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}.slash{color:#d8d8d8;transform:rotate(90deg);vertical-align:middle}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8947
8949
|
}
|
|
8948
8950
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PickerOptionComponent, decorators: [{
|
|
8949
8951
|
type: Component,
|
|
8950
8952
|
args: [{ selector: 'li[lx-picker-option]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], template: "@if (isClearOption) {\n <ui5-icon name=\"tnt/communication-path\" design=\"Neutral\" class=\"slash\" />\n} @else {\n <ng-content />\n}\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}.slash{color:#d8d8d8;transform:rotate(90deg);vertical-align:middle}\n"] }]
|
|
8951
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateService }], propDecorators: { role: [{
|
|
8953
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }], propDecorators: { role: [{
|
|
8952
8954
|
type: HostBinding,
|
|
8953
8955
|
args: ['attr.role']
|
|
8954
8956
|
}], ariaSelected: [{
|
|
@@ -9211,7 +9213,7 @@ class PickerComponent {
|
|
|
9211
9213
|
}
|
|
9212
9214
|
propagateChange(_value) { }
|
|
9213
9215
|
onTouched() { }
|
|
9214
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PickerComponent, deps: [{ token: i1$
|
|
9216
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PickerComponent, deps: [{ token: i1$7.Directionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9215
9217
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: PickerComponent, isStandalone: true, selector: "lx-picker", inputs: { listBoxAriaLabel: "listBoxAriaLabel", listBoxAriaLabelledBy: "listBoxAriaLabelledBy", openDirection: "openDirection" }, host: { listeners: { "document:keydown": "manageKeyboardEvents($event)" } }, providers: [
|
|
9216
9218
|
{
|
|
9217
9219
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -9229,7 +9231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
9229
9231
|
useExisting: forwardRef(() => PickerComponent)
|
|
9230
9232
|
}
|
|
9231
9233
|
], imports: [AutocloseDirective], template: "<div class=\"pickerContainer\">\n <ng-content select=\"[lxPickerTrigger]\" />\n @if (open) {\n <ul\n class=\"pickerOptions\"\n lxAutoclose\n (autoclose)=\"closePicker()\"\n role=\"listbox\"\n [style.margin-left]=\"leftOffset\"\n [attr.aria-activedescendant]=\"activeDescendantsId\"\n [attr.aria-label]=\"listBoxAriaLabel\"\n [attr.aria-labelledby]=\"listBoxAriaLabelledBy\"\n >\n <ng-content />\n </ul>\n }\n</div>\n", styles: [":host{display:inline-block;width:100%;position:relative}.pickerOptions{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;padding:4px;z-index:20;width:185px}\n"] }]
|
|
9232
|
-
}], ctorParameters: () => [{ type: i1$
|
|
9234
|
+
}], ctorParameters: () => [{ type: i1$7.Directionality }, { type: i0.ChangeDetectorRef }], propDecorators: { listBoxAriaLabel: [{
|
|
9233
9235
|
type: Input
|
|
9234
9236
|
}], listBoxAriaLabelledBy: [{
|
|
9235
9237
|
type: Input
|
|
@@ -9724,7 +9726,7 @@ class SingleSelectComponent extends BaseSelectDirective {
|
|
|
9724
9726
|
multi: true,
|
|
9725
9727
|
useExisting: forwardRef(() => SingleSelectComponent)
|
|
9726
9728
|
}
|
|
9727
|
-
], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "explicitSelectedOption", first: true, predicate: SelectedOptionDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: BasicDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "toggleElement", first: true, predicate: ["toggle"], descendants: true, read: ElementRef }, { propertyName: "queryInput", first: true, predicate: ["queryInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (dropdownOpen) {\n <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer {{ padding }}Padding\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.disabled]=\"disabled\"\n [class.grayBackground]=\"selectionBackground === 'gray'\"\n [class.defaultSize]=\"size === 'default'\"\n [class.smallSize]=\"size === 'small'\"\n [class.select2Size]=\"size === 'select2'\"\n [class.largeSize]=\"size === 'large'\"\n [style.cursor]=\"cursorStyle\"\n [class.focused]=\"isInputFocused\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n <div class=\"selectionContainer\">\n <div class=\"inputContainer\">\n @if (!selection && selection !== 0 && !queryInput?.value) {\n <div class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n }\n @if (!allowQuery || !queryInput?.value) {\n <div\n class=\"selection\"\n [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n (click)=\"$event.stopPropagation(); focus()\"\n >\n <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\" />\n </div>\n }\n <input\n #queryInput\n class=\"queryInput\"\n type=\"text\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.id]=\"inputId\"\n [attr.required]=\"required ? 'true' : null\"\n [class.isHidden]=\"!allowQuery\"\n (keydown.enter)=\"$event.preventDefault()\"\n (focus)=\"isInputFocused = true\"\n (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n (keyup.tab)=\"focusedViaTab()\"\n (keyup.shift.tab)=\"focusedViaTab()\"\n [tabIndex]=\"disabled ? -1 : tabIndex\"\n [formControl]=\"queryControl\"\n [readOnly]=\"!allowQuery\"\n />\n </div>\n <div class=\"iconContainer\">\n @if ((selection || selection === 0) && allowClear && !disabled) {\n <ui5-icon name=\"decline\" class=\"lx-icon-small\" (click)=\"removeSelection()\" />\n }\n <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n </div>\n </div>\n <div class=\"optionsContainer\" #optionsContainer>\n @if (dropdownOpen) {\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n }\n </div>\n</div>\n\n<ng-template #selectedOption>\n <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer ui5-icon{cursor:pointer}.disabled .iconContainer ui5-icon{cursor:inherit;color:#8594ad}.iconContainer ui5-icon[name=decline]{margin-left:.25rem}.iconContainer ui5-icon[name=slim-arrow-down]{margin:0 .5rem}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"], dependencies: [{ kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$
|
|
9729
|
+
], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "explicitSelectedOption", first: true, predicate: SelectedOptionDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: BasicDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "toggleElement", first: true, predicate: ["toggle"], descendants: true, read: ElementRef }, { propertyName: "queryInput", first: true, predicate: ["queryInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (dropdownOpen) {\n <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer {{ padding }}Padding\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.disabled]=\"disabled\"\n [class.grayBackground]=\"selectionBackground === 'gray'\"\n [class.defaultSize]=\"size === 'default'\"\n [class.smallSize]=\"size === 'small'\"\n [class.select2Size]=\"size === 'select2'\"\n [class.largeSize]=\"size === 'large'\"\n [style.cursor]=\"cursorStyle\"\n [class.focused]=\"isInputFocused\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n <div class=\"selectionContainer\">\n <div class=\"inputContainer\">\n @if (!selection && selection !== 0 && !queryInput?.value) {\n <div class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n }\n @if (!allowQuery || !queryInput?.value) {\n <div\n class=\"selection\"\n [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n (click)=\"$event.stopPropagation(); focus()\"\n >\n <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\" />\n </div>\n }\n <input\n #queryInput\n class=\"queryInput\"\n type=\"text\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.id]=\"inputId\"\n [attr.required]=\"required ? 'true' : null\"\n [class.isHidden]=\"!allowQuery\"\n (keydown.enter)=\"$event.preventDefault()\"\n (focus)=\"isInputFocused = true\"\n (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n (keyup.tab)=\"focusedViaTab()\"\n (keyup.shift.tab)=\"focusedViaTab()\"\n [tabIndex]=\"disabled ? -1 : tabIndex\"\n [formControl]=\"queryControl\"\n [readOnly]=\"!allowQuery\"\n />\n </div>\n <div class=\"iconContainer\">\n @if ((selection || selection === 0) && allowClear && !disabled) {\n <ui5-icon name=\"decline\" class=\"lx-icon-small\" (click)=\"removeSelection()\" />\n }\n <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n </div>\n </div>\n <div class=\"optionsContainer\" #optionsContainer>\n @if (dropdownOpen) {\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n }\n </div>\n</div>\n\n<ng-template #selectedOption>\n <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer ui5-icon{cursor:pointer}.disabled .iconContainer ui5-icon{cursor:inherit;color:#8594ad}.iconContainer ui5-icon[name=decline]{margin-left:.25rem}.iconContainer ui5-icon[name=slim-arrow-down]{margin:0 .5rem}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"], dependencies: [{ kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
9728
9730
|
}
|
|
9729
9731
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SingleSelectComponent, decorators: [{
|
|
9730
9732
|
type: Component,
|
|
@@ -9879,7 +9881,7 @@ class SortingDropdownComponent {
|
|
|
9879
9881
|
return `sorting.${key}.label`;
|
|
9880
9882
|
}
|
|
9881
9883
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SortingDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9882
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SortingDropdownComponent, isStandalone: true, selector: "lx-sorting-dropdown", inputs: { currentSorting: "currentSorting", sortingOptions: "sortingOptions", showDirectionOptions: "showDirectionOptions" }, outputs: { apply: "apply" }, ngImport: i0, template: "@if (currentSorting) {\n <lx-options-dropdown>\n <lx-sorting-dropdown-trigger\n lxKeyboardActionSource\n [label]=\"NAME + '.sortBy' | translate\"\n [currentSortingLabel]=\"getSortLabel(currentSorting.key) | translate\"\n />\n <lx-option-group (select)=\"applySortingMode($event)\">\n @for (option of sortingOptions; track option.key) {\n <lx-option [value]=\"option\" [selected]=\"option.key === currentSorting.key\">\n {{ option?.key ? (getSortLabel(option.key) | translate) : '' }}\n </lx-option>\n }\n </lx-option-group>\n @if (showDirectionOptions) {\n <lx-option-group (select)=\"applySortingDirection($event)\">\n @for (sortDirection of sortingDirections; track sortDirection) {\n <lx-option [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting.order\">\n {{ 'sorting.' + currentSorting.key + '.' + sortDirection | translate }}\n </lx-option>\n }\n </lx-option-group>\n }\n </lx-options-dropdown>\n}\n", styles: [""], dependencies: [{ kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning", "dropdownClass", "isFlexEnabledTriggerContainer"], outputs: ["opened", "closed", "closedWithoutSelection"] }, { kind: "component", type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction", "mouseEnter"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
|
|
9884
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SortingDropdownComponent, isStandalone: true, selector: "lx-sorting-dropdown", inputs: { currentSorting: "currentSorting", sortingOptions: "sortingOptions", showDirectionOptions: "showDirectionOptions" }, outputs: { apply: "apply" }, ngImport: i0, template: "@if (currentSorting) {\n <lx-options-dropdown>\n <lx-sorting-dropdown-trigger\n lxKeyboardActionSource\n [label]=\"NAME + '.sortBy' | translate\"\n [currentSortingLabel]=\"getSortLabel(currentSorting.key) | translate\"\n />\n <lx-option-group (select)=\"applySortingMode($event)\">\n @for (option of sortingOptions; track option.key) {\n <lx-option [value]=\"option\" [selected]=\"option.key === currentSorting.key\">\n {{ option?.key ? (getSortLabel(option.key) | translate) : '' }}\n </lx-option>\n }\n </lx-option-group>\n @if (showDirectionOptions) {\n <lx-option-group (select)=\"applySortingDirection($event)\">\n @for (sortDirection of sortingDirections; track sortDirection) {\n <lx-option [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting.order\">\n {{ 'sorting.' + currentSorting.key + '.' + sortDirection | translate }}\n </lx-option>\n }\n </lx-option-group>\n }\n </lx-options-dropdown>\n}\n", styles: [""], dependencies: [{ kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning", "dropdownClass", "isFlexEnabledTriggerContainer"], outputs: ["opened", "closed", "closedWithoutSelection"] }, { kind: "component", type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction", "mouseEnter"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
|
|
9883
9885
|
}
|
|
9884
9886
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SortingDropdownComponent, decorators: [{
|
|
9885
9887
|
type: Component,
|
|
@@ -10096,7 +10098,7 @@ class ContenteditableDirective {
|
|
|
10096
10098
|
sanitize(content) {
|
|
10097
10099
|
return this.lxContenteditableHtml ? this.sanitizer.sanitize(SecurityContext.HTML, content) : content;
|
|
10098
10100
|
}
|
|
10099
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ContenteditableDirective, deps: [{ token: i0.ElementRef }, { token: i1$
|
|
10101
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ContenteditableDirective, deps: [{ token: i0.ElementRef }, { token: i1$8.DomSanitizer }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
10100
10102
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: ContenteditableDirective, isStandalone: true, selector: "[lxContenteditableModel]", inputs: { lxContenteditableModel: "lxContenteditableModel", lxContenteditableHtml: "lxContenteditableHtml", lxContenteditableHtmlPaste: "lxContenteditableHtmlPaste" }, outputs: { lxContenteditableModelChange: "lxContenteditableModelChange" }, host: { listeners: { "input": "onInput()", "blur": "onInput()", "keyup": "onInput()", "paste": "onPaste($event)", "drop": "onDrop($event)" } }, usesOnChanges: true, ngImport: i0 }); }
|
|
10101
10103
|
}
|
|
10102
10104
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ContenteditableDirective, decorators: [{
|
|
@@ -10104,7 +10106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
10104
10106
|
args: [{
|
|
10105
10107
|
selector: '[lxContenteditableModel]'
|
|
10106
10108
|
}]
|
|
10107
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$
|
|
10109
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$8.DomSanitizer }], propDecorators: { lxContenteditableModel: [{
|
|
10108
10110
|
type: Input
|
|
10109
10111
|
}], lxContenteditableModelChange: [{
|
|
10110
10112
|
type: Output
|
|
@@ -10228,7 +10230,7 @@ class FormErrorDirective {
|
|
|
10228
10230
|
this.ref.instance.dynamicErrorMessage.set('');
|
|
10229
10231
|
}
|
|
10230
10232
|
}
|
|
10231
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormErrorDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i1.TranslateService }, { token: i0.DestroyRef }, { token: i1$
|
|
10233
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormErrorDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i1$1.TranslateService }, { token: i0.DestroyRef }, { token: i1$5.NgControl, optional: true, self: true }, { token: FormSubmitDirective, host: true, optional: true }, { token: FORM_CONTROL_ERROR_NAMESPACE, optional: true }, { token: FORM_CONTROL_ERROR_DISPLAY_STRATEGY, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
10232
10234
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: FormErrorDirective, isStandalone: true, selector: "[lxFormError]", inputs: { ctrl: ["lxFormError", "ctrl"], controlName: "controlName" }, ngImport: i0 }); }
|
|
10233
10235
|
}
|
|
10234
10236
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormErrorDirective, decorators: [{
|
|
@@ -10236,7 +10238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
10236
10238
|
args: [{
|
|
10237
10239
|
selector: '[lxFormError]'
|
|
10238
10240
|
}]
|
|
10239
|
-
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: i1.TranslateService }, { type: i0.DestroyRef }, { type: i1$
|
|
10241
|
+
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: i1$1.TranslateService }, { type: i0.DestroyRef }, { type: i1$5.NgControl, decorators: [{
|
|
10240
10242
|
type: Optional
|
|
10241
10243
|
}, {
|
|
10242
10244
|
type: Self
|
|
@@ -10422,7 +10424,7 @@ class LxFormsModule {
|
|
|
10422
10424
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LxFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
10423
10425
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: LxFormsModule, imports: [CommonModule,
|
|
10424
10426
|
FormsModule,
|
|
10425
|
-
ReactiveFormsModule, i1.TranslateModule, DatepickerUiModule, InfiniteScrollModule,
|
|
10427
|
+
ReactiveFormsModule, i1$1.TranslateModule, DatepickerUiModule, InfiniteScrollModule,
|
|
10426
10428
|
ClipboardModule,
|
|
10427
10429
|
OverlayModule,
|
|
10428
10430
|
LxDragAndDropListModule,
|
|
@@ -11831,8 +11833,8 @@ class ModalComponent {
|
|
|
11831
11833
|
trapFocusInModal(hostElement) {
|
|
11832
11834
|
this.focusTrap.create(hostElement);
|
|
11833
11835
|
}
|
|
11834
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ModalComponent, deps: [{ token: i1$
|
|
11835
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ModalComponent, isStandalone: true, selector: "lx-modal", inputs: { open: "open", showCloseButton: "showCloseButton", showBackButton: "showBackButton", verticalScroll: "verticalScroll", size: "size", minWidth: "minWidth", isFocusTrap: "isFocusTrap", canModalBeClosed: "canModalBeClosed" }, outputs: { close: "close", back: "back" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "header", first: true, predicate: ModalHeaderComponent, descendants: true }, { propertyName: "footer", first: true, predicate: ModalFooterComponent, descendants: true }, { propertyName: "explicitContent", first: true, predicate: ModalContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "cdkPortal", first: true, predicate: CdkPortal, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template cdkPortal>\n @if (open) {\n <div\n role=\"dialog\"\n class=\"lxmodal\"\n [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n [class.lxmodal--dialog]=\"size === 'dialog'\"\n [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n [class.lxmodal--withFooter]=\"!!footer\"\n [class.lxmodal--verticalScroll]=\"verticalScroll\"\n @modal\n >\n @if (showBackButton) {\n <!-- TODO lx-button doesn't comply with modal close button style yet -->\n <button (click)=\"emitBack()\" (keyup.enter)=\"emitBack()\" tabindex=\"0\" type=\"button\" class=\"backButton\">\n <!-- eslint-disable-next-line @nx/workspace-no-icon-in-button-content -->\n <ui5-icon name=\"arrow-left\" />\n </button>\n }\n @if (showCloseButton) {\n <!-- TODO lx-button doesn't comply with modal close button style yet -->\n <button\n (click)=\"closeModal(closeLocation.CloseButton)\"\n [attr.aria-label]=\"NAME + '.close' | translate\"\n type=\"button\"\n class=\"closeButton\"\n >\n <!-- eslint-disable-next-line @nx/workspace-no-icon-in-button-content -->\n <ui5-icon name=\"decline\" />\n </button>\n }\n @if (header) {\n <ng-content select=\"lx-modal-header\" />\n }\n <div class=\"modalContentContainer\" [class.lxThinScrollbar]=\"verticalScroll\">\n <ng-container *ngTemplateOutlet=\"content\" />\n </div>\n @if (footer) {\n <ng-content select=\"lx-modal-footer\" />\n }\n </div>\n }\n</ng-template>\n<ng-template #implicitContent>\n <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.spin{animation:spin 2s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--withFooter.lxmodal--fullscreen:not(.lxmodal--verticalScroll) .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;width:48px;height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{background-color:#eaedf1}.lxmodal--fullscreen .closeButton:hover ui5-icon,.lxmodal--fullscreen .closeButton:focus ui5-icon{color:#526179}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .backButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;width:48px;height:48px;left:36px;top:16px}.lxmodal--fullscreen .backButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--fullscreen .backButton:hover,.lxmodal--fullscreen .backButton:focus{background-color:#eaedf1}.lxmodal--fullscreen .backButton:hover ui5-icon,.lxmodal--fullscreen .backButton:focus ui5-icon{color:#526179}.lxmodal--fullscreen .backButton:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton ui5-icon,.lxmodal--dialog-large .closeButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{background-color:#eaedf1}.lxmodal--dialog .closeButton:hover ui5-icon,.lxmodal--dialog .closeButton:focus ui5-icon,.lxmodal--dialog-large .closeButton:hover ui5-icon,.lxmodal--dialog-large .closeButton:focus ui5-icon{color:#526179}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .backButton,.lxmodal--dialog-large .backButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;height:32px;width:32px;z-index:999;left:10px;top:20px}.lxmodal--dialog .backButton ui5-icon,.lxmodal--dialog-large .backButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--dialog .backButton:hover,.lxmodal--dialog .backButton:focus,.lxmodal--dialog-large .backButton:hover,.lxmodal--dialog-large .backButton:focus{background-color:#eaedf1}.lxmodal--dialog .backButton:hover ui5-icon,.lxmodal--dialog .backButton:focus ui5-icon,.lxmodal--dialog-large .backButton:hover ui5-icon,.lxmodal--dialog-large .backButton:focus ui5-icon{color:#526179}.lxmodal--dialog .backButton:focus,.lxmodal--dialog-large .backButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], animations: [
|
|
11836
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ModalComponent, deps: [{ token: i1$2.Overlay }, { token: i0.Renderer2 }, { token: MODAL_CLOSE, optional: true }, { token: i2.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11837
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ModalComponent, isStandalone: true, selector: "lx-modal", inputs: { open: "open", showCloseButton: "showCloseButton", showBackButton: "showBackButton", verticalScroll: "verticalScroll", size: "size", minWidth: "minWidth", isFocusTrap: "isFocusTrap", canModalBeClosed: "canModalBeClosed" }, outputs: { close: "close", back: "back" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "header", first: true, predicate: ModalHeaderComponent, descendants: true }, { propertyName: "footer", first: true, predicate: ModalFooterComponent, descendants: true }, { propertyName: "explicitContent", first: true, predicate: ModalContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "cdkPortal", first: true, predicate: CdkPortal, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template cdkPortal>\n @if (open) {\n <div\n role=\"dialog\"\n class=\"lxmodal\"\n [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n [class.lxmodal--dialog]=\"size === 'dialog'\"\n [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n [class.lxmodal--withFooter]=\"!!footer\"\n [class.lxmodal--verticalScroll]=\"verticalScroll\"\n @modal\n >\n @if (showBackButton) {\n <!-- TODO lx-button doesn't comply with modal close button style yet -->\n <button (click)=\"emitBack()\" (keyup.enter)=\"emitBack()\" tabindex=\"0\" type=\"button\" class=\"backButton\">\n <!-- eslint-disable-next-line @nx/workspace-no-icon-in-button-content -->\n <ui5-icon name=\"arrow-left\" />\n </button>\n }\n @if (showCloseButton) {\n <!-- TODO lx-button doesn't comply with modal close button style yet -->\n <button\n (click)=\"closeModal(closeLocation.CloseButton)\"\n [attr.aria-label]=\"NAME + '.close' | translate\"\n type=\"button\"\n class=\"closeButton\"\n >\n <!-- eslint-disable-next-line @nx/workspace-no-icon-in-button-content -->\n <ui5-icon name=\"decline\" />\n </button>\n }\n @if (header) {\n <ng-content select=\"lx-modal-header\" />\n }\n <div class=\"modalContentContainer\" [class.lxThinScrollbar]=\"verticalScroll\">\n <ng-container *ngTemplateOutlet=\"content\" />\n </div>\n @if (footer) {\n <ng-content select=\"lx-modal-footer\" />\n }\n </div>\n }\n</ng-template>\n<ng-template #implicitContent>\n <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.spin{animation:spin 2s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--withFooter.lxmodal--fullscreen:not(.lxmodal--verticalScroll) .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;width:48px;height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{background-color:#eaedf1}.lxmodal--fullscreen .closeButton:hover ui5-icon,.lxmodal--fullscreen .closeButton:focus ui5-icon{color:#526179}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .backButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;width:48px;height:48px;left:36px;top:16px}.lxmodal--fullscreen .backButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--fullscreen .backButton:hover,.lxmodal--fullscreen .backButton:focus{background-color:#eaedf1}.lxmodal--fullscreen .backButton:hover ui5-icon,.lxmodal--fullscreen .backButton:focus ui5-icon{color:#526179}.lxmodal--fullscreen .backButton:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton ui5-icon,.lxmodal--dialog-large .closeButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{background-color:#eaedf1}.lxmodal--dialog .closeButton:hover ui5-icon,.lxmodal--dialog .closeButton:focus ui5-icon,.lxmodal--dialog-large .closeButton:hover ui5-icon,.lxmodal--dialog-large .closeButton:focus ui5-icon{color:#526179}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .backButton,.lxmodal--dialog-large .backButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;height:32px;width:32px;z-index:999;left:10px;top:20px}.lxmodal--dialog .backButton ui5-icon,.lxmodal--dialog-large .backButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--dialog .backButton:hover,.lxmodal--dialog .backButton:focus,.lxmodal--dialog-large .backButton:hover,.lxmodal--dialog-large .backButton:focus{background-color:#eaedf1}.lxmodal--dialog .backButton:hover ui5-icon,.lxmodal--dialog .backButton:focus ui5-icon,.lxmodal--dialog-large .backButton:hover ui5-icon,.lxmodal--dialog-large .backButton:focus ui5-icon{color:#526179}.lxmodal--dialog .backButton:focus,.lxmodal--dialog-large .backButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [
|
|
11836
11838
|
trigger('modal', [
|
|
11837
11839
|
transition(':enter', [style({ opacity: 0 }), animate('0.15s', style({ opacity: 1 }))]),
|
|
11838
11840
|
transition(':leave', animate('0.15s', style({ opacity: 0 })))
|
|
@@ -11847,7 +11849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
11847
11849
|
transition(':leave', animate('0.15s', style({ opacity: 0 })))
|
|
11848
11850
|
])
|
|
11849
11851
|
], imports: [PortalModule, NgTemplateOutlet, TranslateModule, CommonModule, IconComponent], template: "<ng-template cdkPortal>\n @if (open) {\n <div\n role=\"dialog\"\n class=\"lxmodal\"\n [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n [class.lxmodal--dialog]=\"size === 'dialog'\"\n [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n [class.lxmodal--withFooter]=\"!!footer\"\n [class.lxmodal--verticalScroll]=\"verticalScroll\"\n @modal\n >\n @if (showBackButton) {\n <!-- TODO lx-button doesn't comply with modal close button style yet -->\n <button (click)=\"emitBack()\" (keyup.enter)=\"emitBack()\" tabindex=\"0\" type=\"button\" class=\"backButton\">\n <!-- eslint-disable-next-line @nx/workspace-no-icon-in-button-content -->\n <ui5-icon name=\"arrow-left\" />\n </button>\n }\n @if (showCloseButton) {\n <!-- TODO lx-button doesn't comply with modal close button style yet -->\n <button\n (click)=\"closeModal(closeLocation.CloseButton)\"\n [attr.aria-label]=\"NAME + '.close' | translate\"\n type=\"button\"\n class=\"closeButton\"\n >\n <!-- eslint-disable-next-line @nx/workspace-no-icon-in-button-content -->\n <ui5-icon name=\"decline\" />\n </button>\n }\n @if (header) {\n <ng-content select=\"lx-modal-header\" />\n }\n <div class=\"modalContentContainer\" [class.lxThinScrollbar]=\"verticalScroll\">\n <ng-container *ngTemplateOutlet=\"content\" />\n </div>\n @if (footer) {\n <ng-content select=\"lx-modal-footer\" />\n }\n </div>\n }\n</ng-template>\n<ng-template #implicitContent>\n <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.spin{animation:spin 2s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--withFooter.lxmodal--fullscreen:not(.lxmodal--verticalScroll) .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;width:48px;height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{background-color:#eaedf1}.lxmodal--fullscreen .closeButton:hover ui5-icon,.lxmodal--fullscreen .closeButton:focus ui5-icon{color:#526179}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .backButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;width:48px;height:48px;left:36px;top:16px}.lxmodal--fullscreen .backButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--fullscreen .backButton:hover,.lxmodal--fullscreen .backButton:focus{background-color:#eaedf1}.lxmodal--fullscreen .backButton:hover ui5-icon,.lxmodal--fullscreen .backButton:focus ui5-icon{color:#526179}.lxmodal--fullscreen .backButton:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton ui5-icon,.lxmodal--dialog-large .closeButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{background-color:#eaedf1}.lxmodal--dialog .closeButton:hover ui5-icon,.lxmodal--dialog .closeButton:focus ui5-icon,.lxmodal--dialog-large .closeButton:hover ui5-icon,.lxmodal--dialog-large .closeButton:focus ui5-icon{color:#526179}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .backButton,.lxmodal--dialog-large .backButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;height:32px;width:32px;z-index:999;left:10px;top:20px}.lxmodal--dialog .backButton ui5-icon,.lxmodal--dialog-large .backButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--dialog .backButton:hover,.lxmodal--dialog .backButton:focus,.lxmodal--dialog-large .backButton:hover,.lxmodal--dialog-large .backButton:focus{background-color:#eaedf1}.lxmodal--dialog .backButton:hover ui5-icon,.lxmodal--dialog .backButton:focus ui5-icon,.lxmodal--dialog-large .backButton:hover ui5-icon,.lxmodal--dialog-large .backButton:focus ui5-icon{color:#526179}.lxmodal--dialog .backButton:focus,.lxmodal--dialog-large .backButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"] }]
|
|
11850
|
-
}], ctorParameters: () => [{ type: i1$
|
|
11852
|
+
}], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.Renderer2 }, { type: i5.Observable, decorators: [{
|
|
11851
11853
|
type: Optional
|
|
11852
11854
|
}, {
|
|
11853
11855
|
type: Inject,
|
|
@@ -11977,7 +11979,7 @@ class LinkModalComponent {
|
|
|
11977
11979
|
dispatchLinkState(this.editor, { open: false, url: null, text: null });
|
|
11978
11980
|
}
|
|
11979
11981
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LinkModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11980
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LinkModalComponent, isStandalone: true, selector: "lx-link-modal", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "ngForm", first: true, predicate: NgForm, descendants: true, isSignal: true }], ngImport: i0, template: "<lx-modal size=\"dialog\" [open]=\"true\" (close)=\"closeModal()\">\n <lx-modal-header [title]=\"NAME + '.link' | translate\" />\n\n <form #form=\"ngForm\" (submit)=\"saveLink()\">\n <div class=\"link-modal-body\">\n <div class=\"form-group required\">\n <label for=\"text\">{{ NAME + '.linkText' | translate }}</label>\n <input\n #titleInput=\"ngModel\"\n class=\"form-control\"\n name=\"text\"\n type=\"text\"\n [ngModel]=\"text\"\n [lxAutofocus]=\"true\"\n [lxAutofocusTimeout]=\"10\"\n [lxMarkInvalid]=\"form.submitted && titleInput.control.touched && titleInput.hasError('required')\"\n required\n />\n </div>\n\n <div class=\"form-group required\">\n <label for=\"url\">{{ NAME + '.url' | translate }}</label>\n <input\n #urlInput=\"ngModel\"\n class=\"form-control\"\n name=\"url\"\n type=\"text\"\n [ngModel]=\"url\"\n [lxMarkInvalid]=\"form.submitted && urlInput.control.touched && urlInput.hasError('invalidUrl')\"\n lxUrl\n />\n @if (form.submitted && urlInput.control.touched && urlInput.hasError('invalidUrl')) {\n <lx-error-message>\n {{ NAME + '.invalidUrl' | translate }}\n </lx-error-message>\n }\n </div>\n </div>\n\n <lx-modal-footer>\n <div class=\"link-modal-actions\">\n <div class=\"link-modal-left-buttons\">\n @if (url) {\n <button lx-button type=\"button\" size=\"large\" color=\"danger\" (click)=\"removeLink()\">\n {{ NAME + '.removeLink' | translate }}\n </button>\n }\n </div>\n\n <div class=\"link-modal-right-buttons\">\n <button lx-button type=\"button\" size=\"large\" (click)=\"closeModal()\">\n {{ NAME + '.cancel' | translate }}\n </button>\n <button lx-button type=\"submit\" [disabled]=\"!titleInput.control.value || !urlInput.control.value\" color=\"primary\" size=\"large\">\n {{ NAME + '.ok' | translate }}\n </button>\n </div>\n </div>\n </lx-modal-footer>\n </form>\n</lx-modal>\n", styles: [".link-modal-body{display:flex;flex-direction:column;padding:20px 64px}.link-modal-actions{display:flex;justify-content:space-between}.link-modal-right-buttons{display:flex;gap:10px}\n"], dependencies: [{ kind: "component", type: ModalComponent, selector: "lx-modal", inputs: ["open", "showCloseButton", "showBackButton", "verticalScroll", "size", "minWidth", "isFocusTrap", "canModalBeClosed"], outputs: ["close", "back"] }, { kind: "component", type: ModalHeaderComponent, selector: "lx-modal-header", inputs: ["title", "bottomBorder"] }, { kind: "component", type: ModalFooterComponent, selector: "lx-modal-footer", inputs: ["border"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$
|
|
11982
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LinkModalComponent, isStandalone: true, selector: "lx-link-modal", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "ngForm", first: true, predicate: NgForm, descendants: true, isSignal: true }], ngImport: i0, template: "<lx-modal size=\"dialog\" [open]=\"true\" (close)=\"closeModal()\">\n <lx-modal-header [title]=\"NAME + '.link' | translate\" />\n\n <form #form=\"ngForm\" (submit)=\"saveLink()\">\n <div class=\"link-modal-body\">\n <div class=\"form-group required\">\n <label for=\"text\">{{ NAME + '.linkText' | translate }}</label>\n <input\n #titleInput=\"ngModel\"\n class=\"form-control\"\n name=\"text\"\n type=\"text\"\n [ngModel]=\"text\"\n [lxAutofocus]=\"true\"\n [lxAutofocusTimeout]=\"10\"\n [lxMarkInvalid]=\"form.submitted && titleInput.control.touched && titleInput.hasError('required')\"\n required\n />\n </div>\n\n <div class=\"form-group required\">\n <label for=\"url\">{{ NAME + '.url' | translate }}</label>\n <input\n #urlInput=\"ngModel\"\n class=\"form-control\"\n name=\"url\"\n type=\"text\"\n [ngModel]=\"url\"\n [lxMarkInvalid]=\"form.submitted && urlInput.control.touched && urlInput.hasError('invalidUrl')\"\n lxUrl\n />\n @if (form.submitted && urlInput.control.touched && urlInput.hasError('invalidUrl')) {\n <lx-error-message>\n {{ NAME + '.invalidUrl' | translate }}\n </lx-error-message>\n }\n </div>\n </div>\n\n <lx-modal-footer>\n <div class=\"link-modal-actions\">\n <div class=\"link-modal-left-buttons\">\n @if (url) {\n <button lx-button type=\"button\" size=\"large\" color=\"danger\" (click)=\"removeLink()\">\n {{ NAME + '.removeLink' | translate }}\n </button>\n }\n </div>\n\n <div class=\"link-modal-right-buttons\">\n <button lx-button type=\"button\" size=\"large\" (click)=\"closeModal()\">\n {{ NAME + '.cancel' | translate }}\n </button>\n <button lx-button type=\"submit\" [disabled]=\"!titleInput.control.value || !urlInput.control.value\" color=\"primary\" size=\"large\">\n {{ NAME + '.ok' | translate }}\n </button>\n </div>\n </div>\n </lx-modal-footer>\n </form>\n</lx-modal>\n", styles: [".link-modal-body{display:flex;flex-direction:column;padding:20px 64px}.link-modal-actions{display:flex;justify-content:space-between}.link-modal-right-buttons{display:flex;gap:10px}\n"], dependencies: [{ kind: "component", type: ModalComponent, selector: "lx-modal", inputs: ["open", "showCloseButton", "showBackButton", "verticalScroll", "size", "minWidth", "isFocusTrap", "canModalBeClosed"], outputs: ["close", "back"] }, { kind: "component", type: ModalHeaderComponent, selector: "lx-modal-header", inputs: ["title", "bottomBorder"] }, { kind: "component", type: ModalFooterComponent, selector: "lx-modal-footer", inputs: ["border"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "directive", type: UrlValidatorDirective, selector: "[lxUrl][ngModel]" }, { kind: "component", type: ErrorMessageComponent, selector: "lx-error-message" }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "directive", type: AutofocusDirective, selector: "[lxAutofocus]", inputs: ["lxAutofocus", "lxAutofocusPreventScroll", "lxAutofocusTimeout"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11981
11983
|
}
|
|
11982
11984
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LinkModalComponent, decorators: [{
|
|
11983
11985
|
type: Component,
|
|
@@ -12143,7 +12145,7 @@ class RichTextEditorComponent {
|
|
|
12143
12145
|
useExisting: forwardRef(() => RichTextEditorComponent),
|
|
12144
12146
|
multi: true
|
|
12145
12147
|
}
|
|
12146
|
-
], hostDirectives: [{ directive: TipTapEditorDirective, inputs: ["outputFormat", "outputFormat", "additionalFeatures", "additionalFeatures", "ariaLabelledBy", "ariaLabelledBy", "customExtensions", "customExtensions", "mode", "mode"] }, { directive: TrackingDirective, outputs: ["trackEvent", "trackEvent"] }], ngImport: i0, template: "<div [class.viewMode]=\"mode() === 'view'\" [class.editMode]=\"mode() === 'edit'\" [class.disabled]=\"disabled\">\n @if (mode() === 'edit' && !disabled) {\n <lx-rich-text-editor-toolbar (mousedown)=\"$event.preventDefault()\" [editor]=\"editor()\" [isVisible]=\"toolbarVisibility()\">\n <ng-content select=\".diagram-btn\" ngProjectAs=\".diagram-btn\" />\n </lx-rich-text-editor-toolbar>\n }\n\n <tiptap-editor\n [editor]=\"editor()\"\n [outputFormat]=\"outputFormat()\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onChange($event)\"\n (blur)=\"blur.emit()\"\n [disabled]=\"mode() === 'view' || disabled\"\n />\n\n @if (('truncate' | lxExtensionEnabled: editor()) && mode() === 'view') {\n <lx-truncate-button [editor]=\"editor()\" />\n }\n</div>\n\n@if ('table' | lxExtensionEnabled: editor()) {\n <lx-table-bubble-menu [editor]=\"editor()\" />\n}\n\n<ng-content />\n", styles: [":host{display:flex;width:100%}.editorButton{margin:0 5px}.editMode{width:100%;border:1px solid #99a5bb;background-color:#fff;border-radius:2px}:host ::ng-deep .editMode .ProseMirror{padding:15px 18.9px;resize:vertical;max-height:var(--editor-max-height, auto)}.viewMode{width:100%}.disabled{background-color:#f0f2f5;color:#61779d}:host ::ng-deep .ProseMirror{outline-width:0;border-radius:2px;overflow:auto}:host ::ng-deep .ProseMirror-gapcursor:after{width:1px;height:14px;border-left:1px solid #000}:host ::ng-deep .ProseMirror p:first-child{margin-top:0}:host ::ng-deep .ProseMirror p:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1:first-child,:host ::ng-deep .ProseMirror h2:first-child,:host ::ng-deep .ProseMirror h3:first-child,:host ::ng-deep .ProseMirror h4:first-child,:host ::ng-deep .ProseMirror h5:first-child,:host ::ng-deep .ProseMirror h6:first-child{margin-top:0}:host ::ng-deep .ProseMirror h1:last-child,:host ::ng-deep .ProseMirror h2:last-child,:host ::ng-deep .ProseMirror h3:last-child,:host ::ng-deep .ProseMirror h4:last-child,:host ::ng-deep .ProseMirror h5:last-child,:host ::ng-deep .ProseMirror h6:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1{font-size:var(--lxFontHeader1Size)}:host ::ng-deep .ProseMirror h2{font-size:var(--lxFontHeader2Size)}:host ::ng-deep .ProseMirror h3{font-size:var(--lxFontHeader3Size)}:host ::ng-deep .ProseMirror h4{font-size:var(--lxFontHeader4Size)}:host ::ng-deep .ProseMirror .tableWrapper{margin:20px 0}:host ::ng-deep .ProseMirror .tableWrapper h1,:host ::ng-deep .ProseMirror .tableWrapper h2,:host ::ng-deep .ProseMirror .tableWrapper h3,:host ::ng-deep .ProseMirror .tableWrapper h4,:host ::ng-deep .ProseMirror .tableWrapper h5,:host ::ng-deep .ProseMirror .tableWrapper h6{margin-top:0}:host ::ng-deep .ProseMirror .tableWrapper table{border-collapse:collapse;margin:0;table-layout:fixed;width:100%}:host ::ng-deep .ProseMirror .tableWrapper table th,:host ::ng-deep .ProseMirror .tableWrapper table td{border:1px solid #c2c9d6;box-sizing:border-box;min-width:1em;padding:12px;position:relative;vertical-align:top}:host ::ng-deep .ProseMirror .tableWrapper table th>*,:host ::ng-deep .ProseMirror .tableWrapper table td>*{margin-bottom:0}:host ::ng-deep .ProseMirror .tableWrapper table th{background-color:#c2c9d6;font-weight:700;text-align:left}:host ::ng-deep .ProseMirror .tableWrapper table p{margin:0}:host ::ng-deep .ProseMirror .tableWrapper table .selectedCell:after{content:\"\";position:absolute;inset:0;pointer-events:none;z-index:2}:host ::ng-deep .ProseMirror .tableWrapper table .column-resize-handle{background-color:#b2bccc;bottom:-2px;right:-2px;position:absolute;top:0;width:4px;pointer-events:none}:host ::ng-deep .ProseMirror .selectedCell{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column,:host ::ng-deep .ProseMirror .selector-row{all:unset;display:flex;align-items:center;justify-content:center;background-color:#f0f2f5;cursor:pointer;position:absolute;z-index:10;margin-left:-1px;margin-top:-.5px}:host ::ng-deep .ProseMirror .selector-column:hover,:host ::ng-deep .ProseMirror .selector-row:hover{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column{width:calc(100% + 1px);border-left:1px solid #e1e5eb;height:11px;top:-11px;left:0}:host ::ng-deep .ProseMirror .selector-column.first{border-left:none}:host ::ng-deep .ProseMirror .selector-column.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-column.selected:before{content:\"\";border-bottom:2px dotted #fff;width:.6rem}:host ::ng-deep .ProseMirror .selector-column:hover:before{content:\"\";border-bottom:2px dotted #61779d;width:.6rem}:host ::ng-deep .ProseMirror .selector-column.selected:before{border-bottom:2px dotted #fff}:host ::ng-deep .ProseMirror .selector-row{height:calc(100% + 1px);border-top:1px solid #e1e5eb;width:11px;left:-11px;top:0}:host ::ng-deep .ProseMirror .selector-row.first{border-top:none}:host ::ng-deep .ProseMirror .selector-row.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-row.selected:before{content:\"\";border-left:2px dotted #fff;height:.575rem}:host ::ng-deep .ProseMirror .selector-row:hover:before{content:\"\";border-left:2px dotted #61779d;height:.575rem}:host ::ng-deep .ProseMirror .selector-row.selected:before{border-left:2px dotted #fff}:host ::ng-deep .ProseMirror li p{margin:0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:24px}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}\n"], dependencies: [{ kind: "directive", type: EditorDirective, selector: "tiptap-editor[editor]", inputs: ["editor", "outputFormat"], outputs: ["blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$
|
|
12148
|
+
], hostDirectives: [{ directive: TipTapEditorDirective, inputs: ["outputFormat", "outputFormat", "additionalFeatures", "additionalFeatures", "ariaLabelledBy", "ariaLabelledBy", "customExtensions", "customExtensions", "mode", "mode"] }, { directive: TrackingDirective, outputs: ["trackEvent", "trackEvent"] }], ngImport: i0, template: "<div [class.viewMode]=\"mode() === 'view'\" [class.editMode]=\"mode() === 'edit'\" [class.disabled]=\"disabled\">\n @if (mode() === 'edit' && !disabled) {\n <lx-rich-text-editor-toolbar (mousedown)=\"$event.preventDefault()\" [editor]=\"editor()\" [isVisible]=\"toolbarVisibility()\">\n <ng-content select=\".diagram-btn\" ngProjectAs=\".diagram-btn\" />\n </lx-rich-text-editor-toolbar>\n }\n\n <tiptap-editor\n [editor]=\"editor()\"\n [outputFormat]=\"outputFormat()\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onChange($event)\"\n (blur)=\"blur.emit()\"\n [disabled]=\"mode() === 'view' || disabled\"\n />\n\n @if (('truncate' | lxExtensionEnabled: editor()) && mode() === 'view') {\n <lx-truncate-button [editor]=\"editor()\" />\n }\n</div>\n\n@if ('table' | lxExtensionEnabled: editor()) {\n <lx-table-bubble-menu [editor]=\"editor()\" />\n}\n\n<ng-content />\n", styles: [":host{display:flex;width:100%}.editorButton{margin:0 5px}.editMode{width:100%;border:1px solid #99a5bb;background-color:#fff;border-radius:2px}:host ::ng-deep .editMode .ProseMirror{padding:15px 18.9px;resize:vertical;max-height:var(--editor-max-height, auto)}.viewMode{width:100%}.disabled{background-color:#f0f2f5;color:#61779d}:host ::ng-deep .ProseMirror{outline-width:0;border-radius:2px;overflow:auto}:host ::ng-deep .ProseMirror-gapcursor:after{width:1px;height:14px;border-left:1px solid #000}:host ::ng-deep .ProseMirror p:first-child{margin-top:0}:host ::ng-deep .ProseMirror p:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1:first-child,:host ::ng-deep .ProseMirror h2:first-child,:host ::ng-deep .ProseMirror h3:first-child,:host ::ng-deep .ProseMirror h4:first-child,:host ::ng-deep .ProseMirror h5:first-child,:host ::ng-deep .ProseMirror h6:first-child{margin-top:0}:host ::ng-deep .ProseMirror h1:last-child,:host ::ng-deep .ProseMirror h2:last-child,:host ::ng-deep .ProseMirror h3:last-child,:host ::ng-deep .ProseMirror h4:last-child,:host ::ng-deep .ProseMirror h5:last-child,:host ::ng-deep .ProseMirror h6:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1{font-size:var(--lxFontHeader1Size)}:host ::ng-deep .ProseMirror h2{font-size:var(--lxFontHeader2Size)}:host ::ng-deep .ProseMirror h3{font-size:var(--lxFontHeader3Size)}:host ::ng-deep .ProseMirror h4{font-size:var(--lxFontHeader4Size)}:host ::ng-deep .ProseMirror .tableWrapper{margin:20px 0}:host ::ng-deep .ProseMirror .tableWrapper h1,:host ::ng-deep .ProseMirror .tableWrapper h2,:host ::ng-deep .ProseMirror .tableWrapper h3,:host ::ng-deep .ProseMirror .tableWrapper h4,:host ::ng-deep .ProseMirror .tableWrapper h5,:host ::ng-deep .ProseMirror .tableWrapper h6{margin-top:0}:host ::ng-deep .ProseMirror .tableWrapper table{border-collapse:collapse;margin:0;table-layout:fixed;width:100%}:host ::ng-deep .ProseMirror .tableWrapper table th,:host ::ng-deep .ProseMirror .tableWrapper table td{border:1px solid #c2c9d6;box-sizing:border-box;min-width:1em;padding:12px;position:relative;vertical-align:top}:host ::ng-deep .ProseMirror .tableWrapper table th>*,:host ::ng-deep .ProseMirror .tableWrapper table td>*{margin-bottom:0}:host ::ng-deep .ProseMirror .tableWrapper table th{background-color:#c2c9d6;font-weight:700;text-align:left}:host ::ng-deep .ProseMirror .tableWrapper table p{margin:0}:host ::ng-deep .ProseMirror .tableWrapper table .selectedCell:after{content:\"\";position:absolute;inset:0;pointer-events:none;z-index:2}:host ::ng-deep .ProseMirror .tableWrapper table .column-resize-handle{background-color:#b2bccc;bottom:-2px;right:-2px;position:absolute;top:0;width:4px;pointer-events:none}:host ::ng-deep .ProseMirror .selectedCell{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column,:host ::ng-deep .ProseMirror .selector-row{all:unset;display:flex;align-items:center;justify-content:center;background-color:#f0f2f5;cursor:pointer;position:absolute;z-index:10;margin-left:-1px;margin-top:-.5px}:host ::ng-deep .ProseMirror .selector-column:hover,:host ::ng-deep .ProseMirror .selector-row:hover{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column{width:calc(100% + 1px);border-left:1px solid #e1e5eb;height:11px;top:-11px;left:0}:host ::ng-deep .ProseMirror .selector-column.first{border-left:none}:host ::ng-deep .ProseMirror .selector-column.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-column.selected:before{content:\"\";border-bottom:2px dotted #fff;width:.6rem}:host ::ng-deep .ProseMirror .selector-column:hover:before{content:\"\";border-bottom:2px dotted #61779d;width:.6rem}:host ::ng-deep .ProseMirror .selector-column.selected:before{border-bottom:2px dotted #fff}:host ::ng-deep .ProseMirror .selector-row{height:calc(100% + 1px);border-top:1px solid #e1e5eb;width:11px;left:-11px;top:0}:host ::ng-deep .ProseMirror .selector-row.first{border-top:none}:host ::ng-deep .ProseMirror .selector-row.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-row.selected:before{content:\"\";border-left:2px dotted #fff;height:.575rem}:host ::ng-deep .ProseMirror .selector-row:hover:before{content:\"\";border-left:2px dotted #61779d;height:.575rem}:host ::ng-deep .ProseMirror .selector-row.selected:before{border-left:2px dotted #fff}:host ::ng-deep .ProseMirror li p{margin:0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:24px}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}\n"], dependencies: [{ kind: "directive", type: EditorDirective, selector: "tiptap-editor[editor]", inputs: ["editor", "outputFormat"], outputs: ["blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RichTextEditorToolbarComponent, selector: "lx-rich-text-editor-toolbar", inputs: ["editor", "isVisible"] }, { kind: "component", type: TableBubbleMenuComponent, selector: "lx-table-bubble-menu", inputs: ["editor"] }, { kind: "component", type: TruncateButtonComponent, selector: "lx-truncate-button", inputs: ["editor"] }, { kind: "pipe", type: ExtensionEnabledPipe, name: "lxExtensionEnabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12147
12149
|
}
|
|
12148
12150
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RichTextEditorComponent, decorators: [{
|
|
12149
12151
|
type: Component,
|
|
@@ -12610,7 +12612,7 @@ class MaxLengthCounterDirective {
|
|
|
12610
12612
|
this.ngControl.control?.updateValueAndValidity({ onlySelf: true });
|
|
12611
12613
|
}
|
|
12612
12614
|
}
|
|
12613
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MaxLengthCounterDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$
|
|
12615
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MaxLengthCounterDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$5.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
12614
12616
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: MaxLengthCounterDirective, isStandalone: true, selector: "[lxMaxLengthCounter]", inputs: { lxMaxLengthCounter: "lxMaxLengthCounter", lxMaxLengthCounterRef: "lxMaxLengthCounterRef" }, ngImport: i0 }); }
|
|
12615
12617
|
}
|
|
12616
12618
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MaxLengthCounterDirective, decorators: [{
|
|
@@ -12618,7 +12620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
12618
12620
|
args: [{
|
|
12619
12621
|
selector: '[lxMaxLengthCounter]'
|
|
12620
12622
|
}]
|
|
12621
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$
|
|
12623
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$5.NgControl, decorators: [{
|
|
12622
12624
|
type: Self
|
|
12623
12625
|
}] }], propDecorators: { lxMaxLengthCounter: [{
|
|
12624
12626
|
type: Input
|
|
@@ -12876,7 +12878,7 @@ class PopoverComponent {
|
|
|
12876
12878
|
return '';
|
|
12877
12879
|
}
|
|
12878
12880
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12879
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: PopoverComponent, isStandalone: true, selector: "lx-popover", inputs: { trigger: "trigger", horizontalAlign: "horizontalAlign", verticalAlign: "verticalAlign", noMargin: "noMargin", allowOverflow: "allowOverflow", autoFocus: "autoFocus", restoreFocus: "restoreFocus", hasBackdrop: "hasBackdrop", adaptMarginsForViewportAlignChange: "adaptMarginsForViewportAlignChange" }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "explicitContent", first: true, predicate: PopoverContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "satPopover", first: true, predicate: SatPopoverComponent, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<sat-popover\n [anchor]=\"trigger.anchor\"\n [horizontalAlign]=\"horizontalAlign\"\n [verticalAlign]=\"verticalAlign\"\n [restoreFocus]=\"restoreFocus\"\n [lockAlignment]=\"true\"\n [autoFocus]=\"autoFocus\"\n [hasBackdrop]=\"hasBackdrop\"\n openTransition=\"0ms\"\n closeTransition=\"0ms\"\n (opened)=\"onOpen()\"\n (afterOpen)=\"onAfterOpen()\"\n (closed)=\"onClose()\"\n>\n <div\n class=\"popoverContainer\"\n [ngClass]=\"marginClasses\"\n [class.overflowHidden]=\"!allowOverflow\"\n (mouseenter)=\"trigger.showPopover(true)\"\n (mouseleave)=\"!hasBackdrop && trigger.closePopover(true)\"\n (keydown.escape)=\"$event.stopPropagation(); trigger.closePopover(true)\"\n >\n @if (isOpen) {\n <ng-container *ngTemplateOutlet=\"content\" />\n }\n </div>\n</sat-popover>\n<ng-template #implicitContent>\n <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.spin{animation:spin 2s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.popoverContainer{position:relative;box-shadow:0 8px 12px 2px #00000026;max-width:600px;max-height:80vh;border-radius:3px;background-color:#fff;-webkit-hyphens:auto;hyphens:auto;animation:subtleScaleUpKeyFrames .2s ease}.popoverContainer.overflowHidden{overflow:hidden}.right{margin-left:18px}.left{margin-right:18px}.bottom{margin-top:18px}.top{margin-bottom:18px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$
|
|
12881
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: PopoverComponent, isStandalone: true, selector: "lx-popover", inputs: { trigger: "trigger", horizontalAlign: "horizontalAlign", verticalAlign: "verticalAlign", noMargin: "noMargin", allowOverflow: "allowOverflow", autoFocus: "autoFocus", restoreFocus: "restoreFocus", hasBackdrop: "hasBackdrop", adaptMarginsForViewportAlignChange: "adaptMarginsForViewportAlignChange" }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "explicitContent", first: true, predicate: PopoverContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "satPopover", first: true, predicate: SatPopoverComponent, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<sat-popover\n [anchor]=\"trigger.anchor\"\n [horizontalAlign]=\"horizontalAlign\"\n [verticalAlign]=\"verticalAlign\"\n [restoreFocus]=\"restoreFocus\"\n [lockAlignment]=\"true\"\n [autoFocus]=\"autoFocus\"\n [hasBackdrop]=\"hasBackdrop\"\n openTransition=\"0ms\"\n closeTransition=\"0ms\"\n (opened)=\"onOpen()\"\n (afterOpen)=\"onAfterOpen()\"\n (closed)=\"onClose()\"\n>\n <div\n class=\"popoverContainer\"\n [ngClass]=\"marginClasses\"\n [class.overflowHidden]=\"!allowOverflow\"\n (mouseenter)=\"trigger.showPopover(true)\"\n (mouseleave)=\"!hasBackdrop && trigger.closePopover(true)\"\n (keydown.escape)=\"$event.stopPropagation(); trigger.closePopover(true)\"\n >\n @if (isOpen) {\n <ng-container *ngTemplateOutlet=\"content\" />\n }\n </div>\n</sat-popover>\n<ng-template #implicitContent>\n <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.spin{animation:spin 2s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.popoverContainer{position:relative;box-shadow:0 8px 12px 2px #00000026;max-width:600px;max-height:80vh;border-radius:3px;background-color:#fff;-webkit-hyphens:auto;hyphens:auto;animation:subtleScaleUpKeyFrames .2s ease}.popoverContainer.overflowHidden{overflow:hidden}.right{margin-left:18px}.left{margin-right:18px}.bottom{margin-top:18px}.top{margin-bottom:18px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$3.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
12880
12882
|
}
|
|
12881
12883
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
12882
12884
|
type: Component,
|
|
@@ -12939,7 +12941,7 @@ class PopoverClickDirective {
|
|
|
12939
12941
|
closePopover() {
|
|
12940
12942
|
this.onMouseLeave.next();
|
|
12941
12943
|
}
|
|
12942
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PopoverClickDirective, deps: [{ token: i1$
|
|
12944
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PopoverClickDirective, deps: [{ token: i1$3.SatPopoverAnchorDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
12943
12945
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: PopoverClickDirective, isStandalone: true, selector: "[lxPopoverClick]", inputs: { lxPopoverPinned: "lxPopoverPinned" }, host: { listeners: { "mouseleave": "closePopover()" } }, exportAs: ["clickAnchor"], ngImport: i0 }); }
|
|
12944
12946
|
}
|
|
12945
12947
|
__decorate([
|
|
@@ -12951,7 +12953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
12951
12953
|
selector: '[lxPopoverClick]',
|
|
12952
12954
|
exportAs: 'clickAnchor'
|
|
12953
12955
|
}]
|
|
12954
|
-
}], ctorParameters: () => [{ type: i1$
|
|
12956
|
+
}], ctorParameters: () => [{ type: i1$3.SatPopoverAnchorDirective }], propDecorators: { lxPopoverPinned: [{
|
|
12955
12957
|
type: Input
|
|
12956
12958
|
}], pinned$: [], closePopover: [{
|
|
12957
12959
|
type: HostListener,
|
|
@@ -13018,7 +13020,7 @@ class PopoverHoverDirective {
|
|
|
13018
13020
|
closePopover(skipDelay = this.skipCloseDelay) {
|
|
13019
13021
|
this.onMouseLeave.next({ skipDelay });
|
|
13020
13022
|
}
|
|
13021
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PopoverHoverDirective, deps: [{ token: i1$
|
|
13023
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PopoverHoverDirective, deps: [{ token: i1$3.SatPopoverAnchorDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
13022
13024
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: PopoverHoverDirective, isStandalone: true, selector: "[lxPopoverHover]", inputs: { lxPopoverHover: "lxPopoverHover", skipCloseDelay: "skipCloseDelay" }, host: { listeners: { "mouseenter": "showPopover()", "mouseleave": "closePopover()" } }, exportAs: ["hoverAnchor"], ngImport: i0 }); }
|
|
13023
13025
|
}
|
|
13024
13026
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PopoverHoverDirective, decorators: [{
|
|
@@ -13027,7 +13029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
13027
13029
|
selector: '[lxPopoverHover]',
|
|
13028
13030
|
exportAs: 'hoverAnchor'
|
|
13029
13031
|
}]
|
|
13030
|
-
}], ctorParameters: () => [{ type: i1$
|
|
13032
|
+
}], ctorParameters: () => [{ type: i1$3.SatPopoverAnchorDirective }], propDecorators: { lxPopoverHover: [{
|
|
13031
13033
|
type: Input
|
|
13032
13034
|
}], skipCloseDelay: [{
|
|
13033
13035
|
type: Input
|
|
@@ -13276,7 +13278,7 @@ class TabComponent {
|
|
|
13276
13278
|
this.select();
|
|
13277
13279
|
}
|
|
13278
13280
|
}
|
|
13279
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$
|
|
13281
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$9.Router }, { token: i1$9.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13280
13282
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: TabComponent, isStandalone: true, selector: "lx-tab", inputs: { icon: "icon", iconDesign: "iconDesign", label: "label", title: "title", tabLink: "tabLink", counter: "counter", routerLinkActiveOptions: "routerLinkActiveOptions", counterBadgeSize: "counterBadgeSize", noMargin: "noMargin", noLeftMarginForFirstTab: "noLeftMarginForFirstTab", background: "background", disabled: "disabled" }, outputs: { switch: "switch", keyDownAction: "keyDownAction" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentTemplate"], descendants: true, static: true }, { propertyName: "tabElement", first: true, predicate: ["tabElement"], descendants: true }, { propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "<li\n #tabElement\n class=\"tab\"\n [class.active]=\"isActive\"\n [class.withIcon]=\"icon\"\n [class.withLabel]=\"!!label\"\n [class.noMargin]=\"noMargin\"\n [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n [class.backgroundGray]=\"background === 'gray'\"\n [class.disabled]=\"disabled\"\n [class.portalTab]=\"!tabLink\"\n [class.routerLinkTab]=\"tabLink\"\n [attr.title]=\"title\"\n (click)=\"select()\"\n (keydown)=\"handleKeyDown($event)\"\n role=\"tab\"\n [attr.id]=\"tabId\"\n [attr.aria-selected]=\"isActive\"\n [attr.tabindex]=\"isActive ? '0' : '-1'\"\n>\n @if (tabLink) {\n <a tabindex=\"-1\" [routerLink]=\"tabLink\" routerLinkActive [routerLinkActiveOptions]=\"routerLinkActiveOptions\">\n <ng-container *ngTemplateOutlet=\"portalTab\" />\n </a>\n } @else {\n <ng-container *ngTemplateOutlet=\"portalTab\" />\n }\n <ng-template #portalTab>\n @if (icon) {\n <ui5-icon class=\"icon\" [design]=\"iconDesign\" class=\"icon\" [name]=\"icon\" />\n }\n @if (label) {\n <span class=\"tabLabel\">{{ label }}</span>\n }\n @if (counter) {\n <lx-counter [size]=\"counterBadgeSize\" [content]=\"counter\" [color]=\"isActive ? 'primary' : 'gray'\" />\n }\n </ng-template>\n <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n @if (!tabLink) {\n <div class=\"content\" role=\"tabpanel\">\n <ng-content />\n </div>\n }\n </ng-template>\n</li>\n", styles: [":host{display:inline-block}.tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}.tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}.tab:hover:after,.tab.active:after{transition:background-color .1s;background-color:var(--lx-primarybutton-backgroundcolor)}.tab.active{cursor:default}.tab.disabled{opacity:.3;cursor:default}.tab:hover .tabLabel,.tab.active .tabLabel{color:#2a303d;transition:color .1s}.tab:hover ui5-icon[design=NonInteractive],.tab.active ui5-icon[design=NonInteractive]{--sapContent_NonInteractiveIconColor: var(--sapInformativeElementColor, #0070f2)}.portalTab,.routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}.portalTab.withIcon,.routerLinkTab a.withIcon{padding-inline:14px}.routerLinkTab a:focus{outline:0}.routerLinkTab.active a,.routerLinkTab.disabled a{cursor:default}.withLabel .icon{margin-right:.5rem}.icon{vertical-align:middle}.noMargin{margin:0}.noLeftMarginForFirstTab{margin-left:0}.backgroundGray{background-color:#c2c9d6}.backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}.tabLabel{color:#61779d;display:inline-block;font-size:14.5px;text-decoration:none}.content{height:100%}lx-counter{margin-left:8px}\n"], dependencies: [{ kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13281
13283
|
}
|
|
13282
13284
|
__decorate([
|
|
@@ -13285,7 +13287,7 @@ __decorate([
|
|
|
13285
13287
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TabComponent, decorators: [{
|
|
13286
13288
|
type: Component,
|
|
13287
13289
|
args: [{ selector: 'lx-tab', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLinkActive, RouterLink, CounterComponent, PortalModule, NgTemplateOutlet, IconComponent], template: "<li\n #tabElement\n class=\"tab\"\n [class.active]=\"isActive\"\n [class.withIcon]=\"icon\"\n [class.withLabel]=\"!!label\"\n [class.noMargin]=\"noMargin\"\n [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n [class.backgroundGray]=\"background === 'gray'\"\n [class.disabled]=\"disabled\"\n [class.portalTab]=\"!tabLink\"\n [class.routerLinkTab]=\"tabLink\"\n [attr.title]=\"title\"\n (click)=\"select()\"\n (keydown)=\"handleKeyDown($event)\"\n role=\"tab\"\n [attr.id]=\"tabId\"\n [attr.aria-selected]=\"isActive\"\n [attr.tabindex]=\"isActive ? '0' : '-1'\"\n>\n @if (tabLink) {\n <a tabindex=\"-1\" [routerLink]=\"tabLink\" routerLinkActive [routerLinkActiveOptions]=\"routerLinkActiveOptions\">\n <ng-container *ngTemplateOutlet=\"portalTab\" />\n </a>\n } @else {\n <ng-container *ngTemplateOutlet=\"portalTab\" />\n }\n <ng-template #portalTab>\n @if (icon) {\n <ui5-icon class=\"icon\" [design]=\"iconDesign\" class=\"icon\" [name]=\"icon\" />\n }\n @if (label) {\n <span class=\"tabLabel\">{{ label }}</span>\n }\n @if (counter) {\n <lx-counter [size]=\"counterBadgeSize\" [content]=\"counter\" [color]=\"isActive ? 'primary' : 'gray'\" />\n }\n </ng-template>\n <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n @if (!tabLink) {\n <div class=\"content\" role=\"tabpanel\">\n <ng-content />\n </div>\n }\n </ng-template>\n</li>\n", styles: [":host{display:inline-block}.tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}.tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}.tab:hover:after,.tab.active:after{transition:background-color .1s;background-color:var(--lx-primarybutton-backgroundcolor)}.tab.active{cursor:default}.tab.disabled{opacity:.3;cursor:default}.tab:hover .tabLabel,.tab.active .tabLabel{color:#2a303d;transition:color .1s}.tab:hover ui5-icon[design=NonInteractive],.tab.active ui5-icon[design=NonInteractive]{--sapContent_NonInteractiveIconColor: var(--sapInformativeElementColor, #0070f2)}.portalTab,.routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}.portalTab.withIcon,.routerLinkTab a.withIcon{padding-inline:14px}.routerLinkTab a:focus{outline:0}.routerLinkTab.active a,.routerLinkTab.disabled a{cursor:default}.withLabel .icon{margin-right:.5rem}.icon{vertical-align:middle}.noMargin{margin:0}.noLeftMarginForFirstTab{margin-left:0}.backgroundGray{background-color:#c2c9d6}.backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}.tabLabel{color:#61779d;display:inline-block;font-size:14.5px;text-decoration:none}.content{height:100%}lx-counter{margin-left:8px}\n"] }]
|
|
13288
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$
|
|
13290
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$9.Router }, { type: i1$9.ActivatedRoute }], propDecorators: { icon: [{
|
|
13289
13291
|
type: Input
|
|
13290
13292
|
}], iconDesign: [{
|
|
13291
13293
|
type: Input
|