@leanix/components 0.2.249 → 0.2.252
Sign up to get free protection for your applications and to get access to all the features.
- package/esm2020/index.mjs +4 -3
- package/esm2020/lib/core-ui/components/ellipsis/ellipsis.component.mjs +17 -3
- package/esm2020/lib/core-ui/core-ui.module.mjs +3 -3
- package/esm2020/lib/core-ui/linkify/linkify.pipe.mjs +144 -0
- package/esm2020/lib/core-ui/linkify/unlinkify.pipe.mjs +48 -0
- package/esm2020/lib/forms-ui/components/date-input/date-input.component.mjs +2 -2
- package/esm2020/lib/forms-ui/components/single-select/single-select.component.mjs +2 -2
- package/fesm2015/leanix-components.mjs +197 -170
- package/fesm2015/leanix-components.mjs.map +1 -1
- package/fesm2020/leanix-components.mjs +195 -168
- package/fesm2020/leanix-components.mjs.map +1 -1
- package/index.d.ts +2 -2
- package/lib/core-ui/components/ellipsis/ellipsis.component.d.ts +7 -1
- package/lib/core-ui/core-ui.module.d.ts +2 -2
- package/lib/core-ui/{pipes/linkify → linkify}/linkify.pipe.d.ts +11 -0
- package/lib/core-ui/{pipes/linkify → linkify}/unlinkify.pipe.d.ts +0 -0
- package/package.json +1 -1
- package/esm2020/lib/core-ui/pipes/linkify/linkify.pipe.mjs +0 -130
- package/esm2020/lib/core-ui/pipes/linkify/unlinkify.pipe.mjs +0 -48
@@ -7,13 +7,13 @@ import { ComponentPortal, CdkPortal, PortalModule } from '@angular/cdk/portal';
|
|
7
7
|
import * as i1 from '@angular/cdk/overlay';
|
8
8
|
import { OverlayModule, CdkConnectedOverlay } from '@angular/cdk/overlay';
|
9
9
|
import { __decorate, __awaiter } from 'tslib';
|
10
|
+
import { escape, trimEnd, sortBy, get, isEqual, toLower, some, padCharsStart, toString, isNaN as isNaN$1, toNumber, includes, last, findIndex, filter as filter$1, isObject, find, uniqueId } from 'lodash/fp';
|
10
11
|
import * as i6 from 'rxjs';
|
11
12
|
import { BehaviorSubject, timer, Subject, combineLatest, merge, concat, fromEvent, Observable, ReplaySubject, of } from 'rxjs';
|
12
13
|
import { skipWhile, map, switchMap, startWith, pairwise, filter, take, debounceTime, skip, withLatestFrom, distinctUntilChanged, takeUntil, first, delay, mapTo, tap } from 'rxjs/operators';
|
13
14
|
import * as i1$1 from '@ngx-translate/core';
|
14
15
|
import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
|
15
16
|
import * as i1$2 from '@angular/platform-browser';
|
16
|
-
import { trimEnd, sortBy, get, isEqual, toLower, some, padCharsStart, toString, isNaN as isNaN$1, toNumber, includes, last, findIndex, filter as filter$1, isObject, find, uniqueId } from 'lodash/fp';
|
17
17
|
import Color from 'color';
|
18
18
|
import { format, distanceInWords, startOfDay } from 'date-fns';
|
19
19
|
import _, { curry } from 'lodash';
|
@@ -606,10 +606,21 @@ class EllipsisComponent {
|
|
606
606
|
this.resizeObserverService = resizeObserverService;
|
607
607
|
this.translateService = translateService;
|
608
608
|
this.content = '';
|
609
|
+
/**
|
610
|
+
* Only set this to false if the content is not a user provided string
|
611
|
+
* or if you sanitize the provided content yourself.
|
612
|
+
*/
|
613
|
+
this.escapeHtmlInContent = true;
|
609
614
|
this.isShowingMore$ = new BehaviorSubject(false);
|
610
615
|
this.destroyed$ = new Subject();
|
611
616
|
}
|
612
617
|
ngOnInit() {
|
618
|
+
this.sanitizedContent$ = this.content$.pipe(map((content) => {
|
619
|
+
if (this.escapeHtmlInContent && typeof content === 'string') {
|
620
|
+
return escape(content);
|
621
|
+
}
|
622
|
+
return content;
|
623
|
+
}));
|
613
624
|
this.showMoreButtonLabel$ = this.isShowingMore$.pipe(switchMap((isShowingMore) => {
|
614
625
|
const translationKey = isShowingMore ? 'common.showLess' : 'common.showMore';
|
615
626
|
return this.translateService.get(translationKey);
|
@@ -678,7 +689,7 @@ class EllipsisComponent {
|
|
678
689
|
}
|
679
690
|
EllipsisComponent.DEFAULT_RESIZE_DEBOUNCE_MS = 500;
|
680
691
|
EllipsisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", 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 });
|
681
|
-
EllipsisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: EllipsisComponent, selector: "lx-ellipsis", inputs: { content: "content" }, viewQueries: [{ propertyName: "contentSpanEl", first: true, predicate: ["contentEl"], descendants: true }, { propertyName: "showMoreButtonEl", first: true, predicate: ["showMoreButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<span
|
692
|
+
EllipsisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: EllipsisComponent, 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<button *ngIf=\"showButton$ | async\" (click)=\"onShowMoreToggle()\" lx-button #showMoreButton size=\"auto\" mode=\"link\" color=\"primary\">\n {{ showMoreButtonLabel$ | async }}\n</button>\n", styles: [":host{display:block}.content{display:inline-block}.truncate:not(.showMore){width:calc(100% - 140px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content.showMore+button{margin-top:4px;display:block}button{white-space:nowrap;vertical-align:top}\n"], components: [{ type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
682
693
|
__decorate([
|
683
694
|
Observe('contentSpanEl')
|
684
695
|
], EllipsisComponent.prototype, "contentSpanEl$", void 0);
|
@@ -690,7 +701,7 @@ __decorate([
|
|
690
701
|
], EllipsisComponent.prototype, "content$", void 0);
|
691
702
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: EllipsisComponent, decorators: [{
|
692
703
|
type: Component,
|
693
|
-
args: [{ selector: 'lx-ellipsis', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span
|
704
|
+
args: [{ selector: 'lx-ellipsis', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n #contentEl\n [class.showMore]=\"isShowingMore$ | async\"\n class=\"content truncate lx-margin-right\"\n [innerHtml]=\"sanitizedContent$ | async\"\n></span>\n<button *ngIf=\"showButton$ | async\" (click)=\"onShowMoreToggle()\" lx-button #showMoreButton size=\"auto\" mode=\"link\" color=\"primary\">\n {{ showMoreButtonLabel$ | async }}\n</button>\n", styles: [":host{display:block}.content{display:inline-block}.truncate:not(.showMore){width:calc(100% - 140px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content.showMore+button{margin-top:4px;display:block}button{white-space:nowrap;vertical-align:top}\n"] }]
|
694
705
|
}], ctorParameters: function () {
|
695
706
|
return [{ type: undefined, decorators: [{
|
696
707
|
type: Inject,
|
@@ -698,6 +709,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
698
709
|
}] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: ResizeObserverService }, { type: i1$1.TranslateService }];
|
699
710
|
}, propDecorators: { content: [{
|
700
711
|
type: Input
|
712
|
+
}], escapeHtmlInContent: [{
|
713
|
+
type: Input
|
701
714
|
}], contentSpanEl$: [], contentSpanEl: [{
|
702
715
|
type: ViewChild,
|
703
716
|
args: ['contentEl']
|
@@ -1040,174 +1053,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
1040
1053
|
type: Input
|
1041
1054
|
}] } });
|
1042
1055
|
|
1043
|
-
class BrPipe {
|
1044
|
-
transform(input, options = {}) {
|
1045
|
-
if (input) {
|
1046
|
-
if (options.isTrimEnd) {
|
1047
|
-
input = trimEnd(input);
|
1048
|
-
}
|
1049
|
-
return input.replace(/[\n\r]/g, '<br/>');
|
1050
|
-
}
|
1051
|
-
return input;
|
1052
|
-
}
|
1053
|
-
}
|
1054
|
-
BrPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: BrPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
1055
|
-
BrPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: BrPipe, name: "lxBr" });
|
1056
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: BrPipe, decorators: [{
|
1057
|
-
type: Pipe,
|
1058
|
-
args: [{
|
1059
|
-
name: 'lxBr'
|
1060
|
-
}]
|
1061
|
-
}] });
|
1062
|
-
|
1063
|
-
/**
|
1064
|
-
* Compute the most eligible text color for a given background color (black or white), depending on the luminance of the
|
1065
|
-
* background color. In case the provided color is undefined or invalid, white (#FFFFFF) is returned.
|
1066
|
-
*
|
1067
|
-
* @param colorHex Color string in hexadecimal encoding.
|
1068
|
-
* @returns Equivalent contrast color in hexadecimal encoding.
|
1069
|
-
*/
|
1070
|
-
function getContrastColor(colorHex) {
|
1071
|
-
try {
|
1072
|
-
const color = Color(colorHex || '#000');
|
1073
|
-
// Check http://codepen.io/WebSeed/pen/pvgqEq
|
1074
|
-
const a = 1 - (0.299 * color.red() + 0.587 * color.green() + 0.114 * color.blue()) / 255;
|
1075
|
-
const d = a < 0.4 ? 0 : 255;
|
1076
|
-
return Color({ r: d, g: d, b: d }).hex();
|
1077
|
-
}
|
1078
|
-
catch (_a) {
|
1079
|
-
return '#FFFFFF';
|
1080
|
-
}
|
1081
|
-
}
|
1082
|
-
function shorthandHexHandle(hex) {
|
1083
|
-
const shorthandRegex = /^(#)([a-f\d])([a-f\d])([a-f\d])$/i;
|
1084
|
-
const shorthand = hex.match(shorthandRegex);
|
1085
|
-
if (shorthand) {
|
1086
|
-
const convertedHex = shorthand[1] + shorthand[2] + shorthand[2] + shorthand[3] + shorthand[3] + shorthand[4] + shorthand[4];
|
1087
|
-
return convertedHex;
|
1088
|
-
}
|
1089
|
-
else {
|
1090
|
-
return hex;
|
1091
|
-
}
|
1092
|
-
}
|
1093
|
-
function isValidHexColor(color) {
|
1094
|
-
return /^#[0-9A-F]{6}$/i.test(color);
|
1095
|
-
}
|
1096
|
-
|
1097
|
-
class ContrastColorPipe {
|
1098
|
-
transform(color) {
|
1099
|
-
if (color) {
|
1100
|
-
return isValidHexColor(shorthandHexHandle(color)) ? getContrastColor(color) : '';
|
1101
|
-
}
|
1102
|
-
return '';
|
1103
|
-
}
|
1104
|
-
}
|
1105
|
-
ContrastColorPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: ContrastColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
1106
|
-
ContrastColorPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: ContrastColorPipe, name: "lxContrastColor" });
|
1107
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: ContrastColorPipe, decorators: [{
|
1108
|
-
type: Pipe,
|
1109
|
-
args: [{
|
1110
|
-
name: 'lxContrastColor'
|
1111
|
-
}]
|
1112
|
-
}] });
|
1113
|
-
|
1114
|
-
const DATE_FORMATS = new InjectionToken('DATE_FORMATS', {
|
1115
|
-
providedIn: 'root',
|
1116
|
-
factory: () => ({
|
1117
|
-
getDateFormat: () => 'YYYY-MM-DD',
|
1118
|
-
getDateTimeFormat: () => 'YYYY-MM-DD HH:mm',
|
1119
|
-
getDateTimeFormatWithSeconds: () => 'YYYY-MM-DD HH:mm:ss'
|
1120
|
-
})
|
1121
|
-
});
|
1122
|
-
const DATE_FN_LOCALE = new InjectionToken('DATE_FN_LOCALE');
|
1123
|
-
const LOCALE_FN = new InjectionToken('LOCALE_FN');
|
1124
|
-
const GLOBAL_TRANSLATION_OPTIONS = new InjectionToken('GLOBAL_TRANSLATION_OPTIONS');
|
1125
|
-
|
1126
|
-
class CustomDatePipe {
|
1127
|
-
constructor(getDateFnLocale) {
|
1128
|
-
this.getDateFnLocale = getDateFnLocale;
|
1129
|
-
}
|
1130
|
-
transform(value, f) {
|
1131
|
-
const locale = this.getDateFnLocale ? this.getDateFnLocale() : null;
|
1132
|
-
return value ? format(value, f, { locale }) : '';
|
1133
|
-
}
|
1134
|
-
}
|
1135
|
-
CustomDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: CustomDatePipe, deps: [{ token: DATE_FN_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
|
1136
|
-
CustomDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: CustomDatePipe, name: "lxDate" });
|
1137
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: CustomDatePipe, decorators: [{
|
1138
|
-
type: Pipe,
|
1139
|
-
args: [{
|
1140
|
-
name: 'lxDate'
|
1141
|
-
}]
|
1142
|
-
}], ctorParameters: function () {
|
1143
|
-
return [{ type: Function, decorators: [{
|
1144
|
-
type: Optional
|
1145
|
-
}, {
|
1146
|
-
type: Inject,
|
1147
|
-
args: [DATE_FN_LOCALE]
|
1148
|
-
}] }];
|
1149
|
-
} });
|
1150
|
-
|
1151
|
-
class HighlightRangePipe {
|
1152
|
-
transform(text, offset = 0, length = 0) {
|
1153
|
-
if (!text || offset < 0 || length < 0 || offset >= (text === null || text === void 0 ? void 0 : text.length) || offset + length > (text === null || text === void 0 ? void 0 : text.length)) {
|
1154
|
-
return '';
|
1155
|
-
}
|
1156
|
-
const highlightedPart = text.slice(offset, offset + length);
|
1157
|
-
return text.slice(0, offset) + (highlightedPart.length !== 0 ? this.highlight(highlightedPart) : '') + text.slice(offset + length);
|
1158
|
-
}
|
1159
|
-
highlight(text) {
|
1160
|
-
return `<span class="termHighlight">${text}</span>`;
|
1161
|
-
}
|
1162
|
-
}
|
1163
|
-
HighlightRangePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightRangePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
1164
|
-
HighlightRangePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightRangePipe, name: "lxHighlightRange" });
|
1165
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightRangePipe, decorators: [{
|
1166
|
-
type: Pipe,
|
1167
|
-
args: [{ name: 'lxHighlightRange' }]
|
1168
|
-
}] });
|
1169
|
-
|
1170
|
-
/**
|
1171
|
-
* These characters are treated as seperators by
|
1172
|
-
* elasticsearch and split the input into search tokens
|
1173
|
-
* which are used to find matches.
|
1174
|
-
*/
|
1175
|
-
const STANDARD_TOKENIZER_SEPERATORS = /[^a-zA-Z\d\s]/g;
|
1176
|
-
class HighlightTermPipe {
|
1177
|
-
transform(text, search) {
|
1178
|
-
if (search && text) {
|
1179
|
-
let pattern = search
|
1180
|
-
.replace(STANDARD_TOKENIZER_SEPERATORS, ' ')
|
1181
|
-
// replace special chars for a backslash for RegExp
|
1182
|
-
.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
|
1183
|
-
pattern = pattern
|
1184
|
-
.split(' ')
|
1185
|
-
.filter((t) => {
|
1186
|
-
return t.length > 0;
|
1187
|
-
})
|
1188
|
-
.join('|');
|
1189
|
-
const regex = new RegExp(pattern, 'gi');
|
1190
|
-
text = _.escape(text);
|
1191
|
-
return text.replace(regex, (match) => `<span class="termHighlight">${match}</span>`); // add highlighting to matched regex pattern
|
1192
|
-
}
|
1193
|
-
else {
|
1194
|
-
return text;
|
1195
|
-
}
|
1196
|
-
}
|
1197
|
-
}
|
1198
|
-
HighlightTermPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightTermPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
1199
|
-
HighlightTermPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightTermPipe, name: "lxHighlightTerm" });
|
1200
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightTermPipe, decorators: [{
|
1201
|
-
type: Pipe,
|
1202
|
-
args: [{ name: 'lxHighlightTerm' }]
|
1203
|
-
}] });
|
1204
|
-
|
1205
1056
|
/**
|
1206
1057
|
* This pipe transforms...
|
1207
1058
|
* - "raw" http(s) links
|
1208
1059
|
* - markdown link syntax
|
1209
1060
|
* ... into clickable anchor elements.
|
1210
1061
|
*
|
1062
|
+
* The characters "<" and ">" are escaped with their HTML entities < and >.
|
1063
|
+
*
|
1211
1064
|
* You have an user interface where you don't want clickable links but also
|
1212
1065
|
* don't want users to see the "ugly" markdown link syntax?
|
1213
1066
|
* -> Use the 'lxUnlikify' pipe to replace markdown link syntax with just the link name
|
@@ -1215,7 +1068,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
1215
1068
|
class LxLinkifyPipe {
|
1216
1069
|
transform(text) {
|
1217
1070
|
if (text && typeof text === 'string') {
|
1218
|
-
const
|
1071
|
+
const escapedText = this.escapeHtmlInUserProvidedString(text);
|
1072
|
+
const textWithRawLinks = this.wrapRawHttpLinksWithAnchorTags(escapedText);
|
1219
1073
|
const textWithRawAndNamedLinks = this.turnMarkdownStyleLinksIntoAnchorTags(textWithRawLinks);
|
1220
1074
|
return textWithRawAndNamedLinks;
|
1221
1075
|
}
|
@@ -1294,6 +1148,17 @@ class LxLinkifyPipe {
|
|
1294
1148
|
}
|
1295
1149
|
return matches;
|
1296
1150
|
}
|
1151
|
+
/**
|
1152
|
+
* We assume that lxLinkify is exclusively used on user provided strings.
|
1153
|
+
* This is why we want to escape any other HTML tags that are already present in the string.
|
1154
|
+
* The logic implemented here has been used with no issues for three years in our Fact Sheet comments. See https://github.com/gregjacobs/Autolinker.js/pull/313
|
1155
|
+
*
|
1156
|
+
* When using lxLinkify in conjunction with other pipes that add HTML, make sure to use lxLinkify first,
|
1157
|
+
* so that it doesn't escape the HTML of any previous pipes.
|
1158
|
+
*/
|
1159
|
+
escapeHtmlInUserProvidedString(input) {
|
1160
|
+
return input.replace(/<|>/gi, (match) => '&' + (match === '>' ? 'g' : 'l') + 't;');
|
1161
|
+
}
|
1297
1162
|
}
|
1298
1163
|
/**
|
1299
1164
|
* This is not the "one URL regex to rule them all", but a more realistic one which should work
|
@@ -1375,6 +1240,168 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
1375
1240
|
args: [{ name: 'lxUnlinkify' }]
|
1376
1241
|
}] });
|
1377
1242
|
|
1243
|
+
class BrPipe {
|
1244
|
+
transform(input, options = {}) {
|
1245
|
+
if (input) {
|
1246
|
+
if (options.isTrimEnd) {
|
1247
|
+
input = trimEnd(input);
|
1248
|
+
}
|
1249
|
+
return input.replace(/[\n\r]/g, '<br/>');
|
1250
|
+
}
|
1251
|
+
return input;
|
1252
|
+
}
|
1253
|
+
}
|
1254
|
+
BrPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: BrPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
1255
|
+
BrPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: BrPipe, name: "lxBr" });
|
1256
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: BrPipe, decorators: [{
|
1257
|
+
type: Pipe,
|
1258
|
+
args: [{
|
1259
|
+
name: 'lxBr'
|
1260
|
+
}]
|
1261
|
+
}] });
|
1262
|
+
|
1263
|
+
/**
|
1264
|
+
* Compute the most eligible text color for a given background color (black or white), depending on the luminance of the
|
1265
|
+
* background color. In case the provided color is undefined or invalid, white (#FFFFFF) is returned.
|
1266
|
+
*
|
1267
|
+
* @param colorHex Color string in hexadecimal encoding.
|
1268
|
+
* @returns Equivalent contrast color in hexadecimal encoding.
|
1269
|
+
*/
|
1270
|
+
function getContrastColor(colorHex) {
|
1271
|
+
try {
|
1272
|
+
const color = Color(colorHex || '#000');
|
1273
|
+
// Check http://codepen.io/WebSeed/pen/pvgqEq
|
1274
|
+
const a = 1 - (0.299 * color.red() + 0.587 * color.green() + 0.114 * color.blue()) / 255;
|
1275
|
+
const d = a < 0.4 ? 0 : 255;
|
1276
|
+
return Color({ r: d, g: d, b: d }).hex();
|
1277
|
+
}
|
1278
|
+
catch (_a) {
|
1279
|
+
return '#FFFFFF';
|
1280
|
+
}
|
1281
|
+
}
|
1282
|
+
function shorthandHexHandle(hex) {
|
1283
|
+
const shorthandRegex = /^(#)([a-f\d])([a-f\d])([a-f\d])$/i;
|
1284
|
+
const shorthand = hex.match(shorthandRegex);
|
1285
|
+
if (shorthand) {
|
1286
|
+
const convertedHex = shorthand[1] + shorthand[2] + shorthand[2] + shorthand[3] + shorthand[3] + shorthand[4] + shorthand[4];
|
1287
|
+
return convertedHex;
|
1288
|
+
}
|
1289
|
+
else {
|
1290
|
+
return hex;
|
1291
|
+
}
|
1292
|
+
}
|
1293
|
+
function isValidHexColor(color) {
|
1294
|
+
return /^#[0-9A-F]{6}$/i.test(color);
|
1295
|
+
}
|
1296
|
+
|
1297
|
+
class ContrastColorPipe {
|
1298
|
+
transform(color) {
|
1299
|
+
if (color) {
|
1300
|
+
return isValidHexColor(shorthandHexHandle(color)) ? getContrastColor(color) : '';
|
1301
|
+
}
|
1302
|
+
return '';
|
1303
|
+
}
|
1304
|
+
}
|
1305
|
+
ContrastColorPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: ContrastColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
1306
|
+
ContrastColorPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: ContrastColorPipe, name: "lxContrastColor" });
|
1307
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: ContrastColorPipe, decorators: [{
|
1308
|
+
type: Pipe,
|
1309
|
+
args: [{
|
1310
|
+
name: 'lxContrastColor'
|
1311
|
+
}]
|
1312
|
+
}] });
|
1313
|
+
|
1314
|
+
const DATE_FORMATS = new InjectionToken('DATE_FORMATS', {
|
1315
|
+
providedIn: 'root',
|
1316
|
+
factory: () => ({
|
1317
|
+
getDateFormat: () => 'YYYY-MM-DD',
|
1318
|
+
getDateTimeFormat: () => 'YYYY-MM-DD HH:mm',
|
1319
|
+
getDateTimeFormatWithSeconds: () => 'YYYY-MM-DD HH:mm:ss'
|
1320
|
+
})
|
1321
|
+
});
|
1322
|
+
const DATE_FN_LOCALE = new InjectionToken('DATE_FN_LOCALE');
|
1323
|
+
const LOCALE_FN = new InjectionToken('LOCALE_FN');
|
1324
|
+
const GLOBAL_TRANSLATION_OPTIONS = new InjectionToken('GLOBAL_TRANSLATION_OPTIONS');
|
1325
|
+
|
1326
|
+
class CustomDatePipe {
|
1327
|
+
constructor(getDateFnLocale) {
|
1328
|
+
this.getDateFnLocale = getDateFnLocale;
|
1329
|
+
}
|
1330
|
+
transform(value, f) {
|
1331
|
+
const locale = this.getDateFnLocale ? this.getDateFnLocale() : null;
|
1332
|
+
return value ? format(value, f, { locale }) : '';
|
1333
|
+
}
|
1334
|
+
}
|
1335
|
+
CustomDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: CustomDatePipe, deps: [{ token: DATE_FN_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
|
1336
|
+
CustomDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: CustomDatePipe, name: "lxDate" });
|
1337
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: CustomDatePipe, decorators: [{
|
1338
|
+
type: Pipe,
|
1339
|
+
args: [{
|
1340
|
+
name: 'lxDate'
|
1341
|
+
}]
|
1342
|
+
}], ctorParameters: function () {
|
1343
|
+
return [{ type: Function, decorators: [{
|
1344
|
+
type: Optional
|
1345
|
+
}, {
|
1346
|
+
type: Inject,
|
1347
|
+
args: [DATE_FN_LOCALE]
|
1348
|
+
}] }];
|
1349
|
+
} });
|
1350
|
+
|
1351
|
+
class HighlightRangePipe {
|
1352
|
+
transform(text, offset = 0, length = 0) {
|
1353
|
+
if (!text || offset < 0 || length < 0 || offset >= (text === null || text === void 0 ? void 0 : text.length) || offset + length > (text === null || text === void 0 ? void 0 : text.length)) {
|
1354
|
+
return '';
|
1355
|
+
}
|
1356
|
+
const highlightedPart = text.slice(offset, offset + length);
|
1357
|
+
return text.slice(0, offset) + (highlightedPart.length !== 0 ? this.highlight(highlightedPart) : '') + text.slice(offset + length);
|
1358
|
+
}
|
1359
|
+
highlight(text) {
|
1360
|
+
return `<span class="termHighlight">${text}</span>`;
|
1361
|
+
}
|
1362
|
+
}
|
1363
|
+
HighlightRangePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightRangePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
1364
|
+
HighlightRangePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightRangePipe, name: "lxHighlightRange" });
|
1365
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightRangePipe, decorators: [{
|
1366
|
+
type: Pipe,
|
1367
|
+
args: [{ name: 'lxHighlightRange' }]
|
1368
|
+
}] });
|
1369
|
+
|
1370
|
+
/**
|
1371
|
+
* These characters are treated as seperators by
|
1372
|
+
* elasticsearch and split the input into search tokens
|
1373
|
+
* which are used to find matches.
|
1374
|
+
*/
|
1375
|
+
const STANDARD_TOKENIZER_SEPERATORS = /[^a-zA-Z\d\s]/g;
|
1376
|
+
class HighlightTermPipe {
|
1377
|
+
transform(text, search) {
|
1378
|
+
if (search && text) {
|
1379
|
+
let pattern = search
|
1380
|
+
.replace(STANDARD_TOKENIZER_SEPERATORS, ' ')
|
1381
|
+
// replace special chars for a backslash for RegExp
|
1382
|
+
.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
|
1383
|
+
pattern = pattern
|
1384
|
+
.split(' ')
|
1385
|
+
.filter((t) => {
|
1386
|
+
return t.length > 0;
|
1387
|
+
})
|
1388
|
+
.join('|');
|
1389
|
+
const regex = new RegExp(pattern, 'gi');
|
1390
|
+
text = _.escape(text);
|
1391
|
+
return text.replace(regex, (match) => `<span class="termHighlight">${match}</span>`); // add highlighting to matched regex pattern
|
1392
|
+
}
|
1393
|
+
else {
|
1394
|
+
return text;
|
1395
|
+
}
|
1396
|
+
}
|
1397
|
+
}
|
1398
|
+
HighlightTermPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightTermPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
1399
|
+
HighlightTermPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightTermPipe, name: "lxHighlightTerm" });
|
1400
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightTermPipe, decorators: [{
|
1401
|
+
type: Pipe,
|
1402
|
+
args: [{ name: 'lxHighlightTerm' }]
|
1403
|
+
}] });
|
1404
|
+
|
1378
1405
|
function isUuid(s) {
|
1379
1406
|
const uuidRegEx = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/;
|
1380
1407
|
return uuidRegEx.test(s);
|
@@ -3141,7 +3168,7 @@ DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
|
|
3141
3168
|
DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DateInputComponent, selector: "lx-date-input", inputs: { date: "date", dateString: "dateString", valueAccessor: "valueAccessor", inputId: "inputId", renderingStyle: "renderingStyle", placeholder: "placeholder", 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" }, outputs: { dateChange: "dateChange", dateStringChange: "dateStringChange" }, providers: [
|
3142
3169
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
|
3143
3170
|
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
|
3144
|
-
], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n<span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n <input\n #input\n class=\"form-control dateControl\"\n placeholder=\"{{ placeholder }}\"\n [id]=\"inputId\"\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 *ngIf=\"renderingStyle === 'INPUT'\"\n />\n <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n <div class=\"datepickerContainer\">\n <div class=\"calendar\">\n <datepicker\n class=\"popup\"\n *ngIf=\"showDatepicker\"\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 </datepicker>\n </div>\n </div>\n</span>\n", styles: [".backdrop{position:fixed;top:0;right:0;bottom:0;left:0}.datepickerContainer{position:absolute;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;background-color:#2a303d}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}\n"], components: [{ type: i1$3.DatePickerComponent, selector: "datepicker", inputs: ["datepickerMode", "showWeeks", "activeDate", "initDate", "minDate", "maxDate", "minMode", "maxMode", "formatDay", "formatMonth", "formatYear", "formatDayHeader", "formatDayTitle", "formatMonthTitle", "startingDay", "yearRange", "onlyCurrentMonth", "shortcutPropagation", "monthColLimit", "yearColLimit", "customClass", "dateDisabled", "dayDisabled"], outputs: ["selectionDone", "activeDateChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "lxDate": CustomDatePipe } });
|
3171
|
+
], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n<span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n <input\n #input\n class=\"form-control dateControl\"\n placeholder=\"{{ placeholder }}\"\n [id]=\"inputId\"\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 *ngIf=\"renderingStyle === 'INPUT'\"\n />\n <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n <div class=\"datepickerContainer\">\n <div class=\"calendar\">\n <datepicker\n class=\"popup\"\n *ngIf=\"showDatepicker\"\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 </datepicker>\n </div>\n </div>\n</span>\n", styles: [":host.dateControl--border-right-radius-0 input.dateControl{border-top-right-radius:0;border-bottom-right-radius:0}:host.dateControl--border-0 input.dateControl{border:0}:host.dateControl--no-box-shadow input.dateControl{box-shadow:none}.backdrop{position:fixed;z-index:2;top:0;right:0;bottom:0;left:0}.datepickerContainer{position:absolute;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;background-color:#2a303d}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}\n"], components: [{ type: i1$3.DatePickerComponent, selector: "datepicker", inputs: ["datepickerMode", "showWeeks", "activeDate", "initDate", "minDate", "maxDate", "minMode", "maxMode", "formatDay", "formatMonth", "formatYear", "formatDayHeader", "formatDayTitle", "formatMonthTitle", "startingDay", "yearRange", "onlyCurrentMonth", "shortcutPropagation", "monthColLimit", "yearColLimit", "customClass", "dateDisabled", "dayDisabled"], outputs: ["selectionDone", "activeDateChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "lxDate": CustomDatePipe } });
|
3145
3172
|
__decorate([
|
3146
3173
|
Observe('initDateString')
|
3147
3174
|
], DateInputComponent.prototype, "initDateString$", void 0);
|
@@ -3150,7 +3177,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
3150
3177
|
args: [{ selector: 'lx-date-input', providers: [
|
3151
3178
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
|
3152
3179
|
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
|
3153
|
-
], template: "<div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n<span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n <input\n #input\n class=\"form-control dateControl\"\n placeholder=\"{{ placeholder }}\"\n [id]=\"inputId\"\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 *ngIf=\"renderingStyle === 'INPUT'\"\n />\n <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n <div class=\"datepickerContainer\">\n <div class=\"calendar\">\n <datepicker\n class=\"popup\"\n *ngIf=\"showDatepicker\"\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 </datepicker>\n </div>\n </div>\n</span>\n", styles: [".backdrop{position:fixed;top:0;right:0;bottom:0;left:0}.datepickerContainer{position:absolute;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;background-color:#2a303d}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}\n"] }]
|
3180
|
+
], template: "<div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n<span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n <input\n #input\n class=\"form-control dateControl\"\n placeholder=\"{{ placeholder }}\"\n [id]=\"inputId\"\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 *ngIf=\"renderingStyle === 'INPUT'\"\n />\n <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n <div class=\"datepickerContainer\">\n <div class=\"calendar\">\n <datepicker\n class=\"popup\"\n *ngIf=\"showDatepicker\"\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 </datepicker>\n </div>\n </div>\n</span>\n", styles: [":host.dateControl--border-right-radius-0 input.dateControl{border-top-right-radius:0;border-bottom-right-radius:0}:host.dateControl--border-0 input.dateControl{border:0}:host.dateControl--no-box-shadow input.dateControl{box-shadow:none}.backdrop{position:fixed;z-index:2;top:0;right:0;bottom:0;left:0}.datepickerContainer{position:absolute;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;background-color:#2a303d}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}\n"] }]
|
3154
3181
|
}], ctorParameters: function () {
|
3155
3182
|
return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
3156
3183
|
type: Inject,
|
@@ -5214,7 +5241,7 @@ SingleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
|
|
5214
5241
|
multi: true,
|
5215
5242
|
useExisting: forwardRef(() => SingleSelectComponent)
|
5216
5243
|
}
|
5217
|
-
], 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: "queryInput", first: true, predicate: ["queryInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\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 (click)=\"handleClick($event.target === toggle)\"\n>\n <div class=\"selectionContainer\">\n <div class=\"inputContainer\">\n <div *ngIf=\"!selection && !queryInput?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n <div\n *ngIf=\"!allowQuery || !queryInput?.value\"\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\"></ng-container>\n </div>\n <input\n #queryInput\n class=\"queryInput\"\n type=\"text\"\n [class.isHidden]=\"!allowQuery\"\n (keydown.enter)=\"$event.preventDefault()\"\n (focus)=\"isInputFocused = true\"\n (blur)=\"isInputFocused = false; blur.emit()\"\n [tabIndex]=\"disabled ? -1 : tabIndex\"\n [formControl]=\"queryControl\"\n [readOnly]=\"!allowQuery\"\n />\n </div>\n <div class=\"iconContainer\">\n <i *ngIf=\"selection && allowClear\" class=\"far fa-times\" (click)=\"!disabled && removeSelection()\"></i>\n <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </div>\n <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n <ng-container *ngIf=\"dropdownOpen\">\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n </ng-container>\n </div>\n</div>\n\n<ng-template #selectedOption>\n <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\"></ng-content>\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 #5599ff}.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%;-webkit-appearance:none;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 .far,.iconContainer .fas{width:10px;cursor:pointer}.disabled .iconContainer .far,.disabled .iconContainer .fas{cursor:inherit}.iconContainer .fa-angle-down{margin:0 12px}.iconContainer .fa-times{margin-left:4px}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;top:0;bottom:0;left:0;right: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"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i2.AsyncPipe } });
|
5244
|
+
], 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: "queryInput", first: true, predicate: ["queryInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\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 (click)=\"handleClick($event.target === toggle)\"\n>\n <div class=\"selectionContainer\">\n <div class=\"inputContainer\">\n <div *ngIf=\"!selection && !queryInput?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n <div\n *ngIf=\"!allowQuery || !queryInput?.value\"\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\"></ng-container>\n </div>\n <input\n #queryInput\n class=\"queryInput\"\n type=\"text\"\n [class.isHidden]=\"!allowQuery\"\n (keydown.enter)=\"$event.preventDefault()\"\n (focus)=\"isInputFocused = true\"\n (blur)=\"isInputFocused = false; blur.emit()\"\n [tabIndex]=\"disabled ? -1 : tabIndex\"\n [formControl]=\"queryControl\"\n [readOnly]=\"!allowQuery\"\n />\n </div>\n <div class=\"iconContainer\">\n <i *ngIf=\"selection && allowClear\" class=\"far fa-times\" (click)=\"!disabled && removeSelection()\"></i>\n <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </div>\n <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n <ng-container *ngIf=\"dropdownOpen\">\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n </ng-container>\n </div>\n</div>\n\n<ng-template #selectedOption>\n <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}:host.selectContainer--border-0 .selectContainer{border:0!important}:host.selectContainer--no-box-shadow .selectContainer{box-shadow:none}.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 #5599ff}.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%;-webkit-appearance:none;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 .far,.iconContainer .fas{width:10px;cursor:pointer}.disabled .iconContainer .far,.disabled .iconContainer .fas{cursor:inherit}.iconContainer .fa-angle-down{margin:0 12px}.iconContainer .fa-times{margin-left:4px}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;top:0;bottom:0;left:0;right: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"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i2.AsyncPipe } });
|
5218
5245
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SingleSelectComponent, decorators: [{
|
5219
5246
|
type: Component,
|
5220
5247
|
args: [{ selector: 'lx-single-select', providers: [
|
@@ -5223,7 +5250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
5223
5250
|
multi: true,
|
5224
5251
|
useExisting: forwardRef(() => SingleSelectComponent)
|
5225
5252
|
}
|
5226
|
-
], template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\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 (click)=\"handleClick($event.target === toggle)\"\n>\n <div class=\"selectionContainer\">\n <div class=\"inputContainer\">\n <div *ngIf=\"!selection && !queryInput?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n <div\n *ngIf=\"!allowQuery || !queryInput?.value\"\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\"></ng-container>\n </div>\n <input\n #queryInput\n class=\"queryInput\"\n type=\"text\"\n [class.isHidden]=\"!allowQuery\"\n (keydown.enter)=\"$event.preventDefault()\"\n (focus)=\"isInputFocused = true\"\n (blur)=\"isInputFocused = false; blur.emit()\"\n [tabIndex]=\"disabled ? -1 : tabIndex\"\n [formControl]=\"queryControl\"\n [readOnly]=\"!allowQuery\"\n />\n </div>\n <div class=\"iconContainer\">\n <i *ngIf=\"selection && allowClear\" class=\"far fa-times\" (click)=\"!disabled && removeSelection()\"></i>\n <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </div>\n <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n <ng-container *ngIf=\"dropdownOpen\">\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n </ng-container>\n </div>\n</div>\n\n<ng-template #selectedOption>\n <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\"></ng-content>\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 #5599ff}.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%;-webkit-appearance:none;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 .far,.iconContainer .fas{width:10px;cursor:pointer}.disabled .iconContainer .far,.disabled .iconContainer .fas{cursor:inherit}.iconContainer .fa-angle-down{margin:0 12px}.iconContainer .fa-times{margin-left:4px}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;top:0;bottom:0;left:0;right: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"] }]
|
5253
|
+
], template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\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 (click)=\"handleClick($event.target === toggle)\"\n>\n <div class=\"selectionContainer\">\n <div class=\"inputContainer\">\n <div *ngIf=\"!selection && !queryInput?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n <div\n *ngIf=\"!allowQuery || !queryInput?.value\"\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\"></ng-container>\n </div>\n <input\n #queryInput\n class=\"queryInput\"\n type=\"text\"\n [class.isHidden]=\"!allowQuery\"\n (keydown.enter)=\"$event.preventDefault()\"\n (focus)=\"isInputFocused = true\"\n (blur)=\"isInputFocused = false; blur.emit()\"\n [tabIndex]=\"disabled ? -1 : tabIndex\"\n [formControl]=\"queryControl\"\n [readOnly]=\"!allowQuery\"\n />\n </div>\n <div class=\"iconContainer\">\n <i *ngIf=\"selection && allowClear\" class=\"far fa-times\" (click)=\"!disabled && removeSelection()\"></i>\n <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </div>\n <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n <ng-container *ngIf=\"dropdownOpen\">\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n </ng-container>\n </div>\n</div>\n\n<ng-template #selectedOption>\n <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}:host.selectContainer--border-0 .selectContainer{border:0!important}:host.selectContainer--no-box-shadow .selectContainer{box-shadow:none}.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 #5599ff}.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%;-webkit-appearance:none;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 .far,.iconContainer .fas{width:10px;cursor:pointer}.disabled .iconContainer .far,.disabled .iconContainer .fas{cursor:inherit}.iconContainer .fa-angle-down{margin:0 12px}.iconContainer .fa-times{margin-left:4px}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;top:0;bottom:0;left:0;right: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"] }]
|
5227
5254
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selection: [{
|
5228
5255
|
type: Input
|
5229
5256
|
}], selectionBackground: [{
|