@leanix/components 0.3.27 → 0.3.30
Sign up to get free protection for your applications and to get access to all the features.
- package/esm2020/lib/core-ui/components/badge/badge.component.mjs +3 -3
- package/esm2020/lib/core-ui/components/button/button.component.mjs +5 -5
- package/esm2020/lib/core-ui/components/button-group/button-group.component.mjs +3 -3
- package/esm2020/lib/core-ui/components/card/card.component.mjs +3 -3
- package/esm2020/lib/core-ui/components/collapsible/collapsible.component.mjs +5 -5
- package/esm2020/lib/core-ui/components/colored-label/colored-label.component.mjs +3 -3
- package/esm2020/lib/core-ui/components/ellipsis/ellipsis.component.mjs +5 -5
- package/esm2020/lib/core-ui/components/icon-scale/icon-scale.component.mjs +7 -14
- package/esm2020/lib/core-ui/components/spinner/spinner.component.mjs +3 -3
- package/esm2020/lib/core-ui/components/table/table-header/table-header.component.mjs +3 -3
- package/esm2020/lib/core-ui/components/table/table.component.mjs +3 -3
- package/esm2020/lib/core-ui/components/tiny-spinner/tiny-spinner.component.mjs +3 -3
- package/esm2020/lib/core-ui/core-ui.module.mjs +5 -5
- package/esm2020/lib/core-ui/directives/after-view-init.directive.mjs +3 -3
- package/esm2020/lib/core-ui/directives/autoclose-group.service.mjs +3 -3
- package/esm2020/lib/core-ui/directives/autoclose.directive.mjs +3 -3
- package/esm2020/lib/core-ui/directives/autofocus.directive.mjs +3 -3
- package/esm2020/lib/core-ui/directives/html.directive.mjs +3 -3
- package/esm2020/lib/core-ui/linkify/linkify.pipe.mjs +3 -3
- package/esm2020/lib/core-ui/linkify/unlinkify.pipe.mjs +3 -3
- package/esm2020/lib/core-ui/pipes/br.pipe.mjs +3 -3
- package/esm2020/lib/core-ui/pipes/contrast-color.pipe.mjs +3 -3
- package/esm2020/lib/core-ui/pipes/custom-date.pipe.mjs +3 -3
- package/esm2020/lib/core-ui/pipes/highlight-range.pipe.mjs +3 -3
- package/esm2020/lib/core-ui/pipes/highlight-term.pipe.mjs +3 -3
- package/esm2020/lib/core-ui/pipes/lx-is-uuid.pipe.mjs +3 -3
- package/esm2020/lib/core-ui/pipes/lx-time-ago.pipe.mjs +3 -3
- package/esm2020/lib/core-ui/pipes/lx-translate.pipe.mjs +4 -4
- package/esm2020/lib/core-ui/pipes/markdown.pipe.mjs +3 -3
- package/esm2020/lib/core-ui/pipes/nbsp.pipe.mjs +3 -3
- package/esm2020/lib/core-ui/pipes/sort.pipe.mjs +3 -3
- package/esm2020/lib/core-ui/pipes/translation-after.pipe.mjs +3 -3
- package/esm2020/lib/core-ui/pipes/translation-before.pipe.mjs +3 -3
- package/esm2020/lib/core-ui/pipes/translation-between.pipe.mjs +3 -3
- package/esm2020/lib/core-ui/pipes/unescape-curly-braces.pipe.mjs +3 -3
- package/esm2020/lib/core-ui/services/resize-observer.service.mjs +3 -3
- package/esm2020/lib/core-ui/tooltip/tooltip.component.mjs +3 -3
- package/esm2020/lib/core-ui/tooltip/tooltip.directive.mjs +3 -3
- package/esm2020/lib/core-ui/tooltip/tooltip.module.mjs +5 -6
- package/esm2020/lib/forms-ui/components/basic-dropdown/basic-dropdown.component.mjs +7 -7
- package/esm2020/lib/forms-ui/components/basic-dropdown-item/basic-dropdown-item.component.mjs +3 -3
- package/esm2020/lib/forms-ui/components/cdk-options-dropdown/cdk-options-dropdown.component.mjs +3 -3
- package/esm2020/lib/forms-ui/components/cdk-options-sub-dropdown/cdk-options-sub-dropdown.component.mjs +3 -3
- package/esm2020/lib/forms-ui/components/currency/currency-input.component.mjs +7 -7
- package/esm2020/lib/forms-ui/components/currency/currency-symbol.component.mjs +3 -3
- package/esm2020/lib/forms-ui/components/date-input/date-input.component.mjs +8 -8
- package/esm2020/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list-item/drag-and-drop-list-item.component.mjs +5 -5
- package/esm2020/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.component.mjs +7 -7
- package/esm2020/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.module.mjs +5 -5
- package/esm2020/lib/forms-ui/components/drag-and-drop-list/keyboard-sortable-item/keyboard-sortable-item.directive.mjs +7 -6
- package/esm2020/lib/forms-ui/components/drag-and-drop-list/keyboard-sortable-list/keyboard-sortable-list.directive.mjs +4 -4
- package/esm2020/lib/forms-ui/components/error-message/error-message.component.mjs +3 -3
- package/esm2020/lib/forms-ui/components/form-error/form-error.component.mjs +4 -4
- package/esm2020/lib/forms-ui/components/icon/icon.component.mjs +3 -3
- package/esm2020/lib/forms-ui/components/input/input.component.mjs +3 -3
- package/esm2020/lib/forms-ui/components/keyboard-select.directive.mjs +3 -3
- package/esm2020/lib/forms-ui/components/multi-select/multi-select.component.mjs +7 -7
- package/esm2020/lib/forms-ui/components/option/option.component.mjs +3 -3
- package/esm2020/lib/forms-ui/components/option-group/option-group.component.mjs +3 -3
- package/esm2020/lib/forms-ui/components/option-group-dropdown/option-group-dropdown.component.mjs +8 -8
- package/esm2020/lib/forms-ui/components/options-dropdown/options-dropdown.component.mjs +3 -3
- package/esm2020/lib/forms-ui/components/options-sub-dropdown/options-sub-dropdown.component.mjs +3 -3
- package/esm2020/lib/forms-ui/components/picker/picker-trigger.directive.mjs +3 -3
- package/esm2020/lib/forms-ui/components/picker/picker.component.mjs +4 -4
- package/esm2020/lib/forms-ui/components/picker-option/picker-option.component.mjs +5 -5
- package/esm2020/lib/forms-ui/components/pill-item/pill-item.component.mjs +3 -3
- package/esm2020/lib/forms-ui/components/pill-list/pill-list.component.mjs +5 -5
- package/esm2020/lib/forms-ui/components/responsive-input/responsive-input.component.mjs +7 -7
- package/esm2020/lib/forms-ui/components/single-select/single-select.component.mjs +6 -6
- package/esm2020/lib/forms-ui/components/slider-toggle/slider-toggle.component.mjs +3 -3
- package/esm2020/lib/forms-ui/components/sorting-dropdown/sorting-dropdown.component.mjs +11 -11
- package/esm2020/lib/forms-ui/components/sorting-dropdown-trigger/sorting-dropdown-trigger.component.mjs +4 -4
- package/esm2020/lib/forms-ui/directives/form-error.directive.mjs +3 -3
- package/esm2020/lib/forms-ui/directives/form-submit.directive.mjs +3 -3
- package/esm2020/lib/forms-ui/directives/keyboard-action-source.directive.mjs +3 -3
- package/esm2020/lib/forms-ui/directives/mark-invalid.directive.mjs +3 -3
- package/esm2020/lib/forms-ui/directives/select-dropdown.directive.mjs +3 -3
- package/esm2020/lib/forms-ui/directives/selectable-item.directive.mjs +3 -3
- package/esm2020/lib/forms-ui/directives/selected-option.directive.mjs +3 -3
- package/esm2020/lib/forms-ui/forms-ui.module.mjs +13 -15
- package/esm2020/lib/forms-ui/models/base-select.directive.mjs +6 -6
- package/esm2020/lib/forms-ui/pipes/filter-selection.pipe.mjs +3 -3
- package/esm2020/lib/forms-ui/pipes/filter-term.pipe.mjs +3 -3
- package/esm2020/lib/forms-ui/pipes/format-number.pipe.mjs +3 -3
- package/esm2020/lib/modal-ui/components/modal/modal.component.mjs +6 -6
- package/esm2020/lib/modal-ui/components/modal-footer/modal-footer.component.mjs +3 -3
- package/esm2020/lib/modal-ui/components/modal-header/modal-header.component.mjs +3 -3
- package/esm2020/lib/modal-ui/directives/modal-content.directive.mjs +3 -3
- package/esm2020/lib/modal-ui/modal.module.mjs +5 -5
- package/esm2020/lib/popover-ui/components/popover/popover.component.mjs +5 -5
- package/esm2020/lib/popover-ui/directives/popover-click.directive.mjs +3 -3
- package/esm2020/lib/popover-ui/directives/popover-content.directive.mjs +3 -3
- package/esm2020/lib/popover-ui/directives/popover-hover.directive.mjs +3 -3
- package/esm2020/lib/popover-ui/popover-ui.module.mjs +5 -5
- package/esm2020/lib/tab-ui/components/tab/tab.component.mjs +6 -6
- package/esm2020/lib/tab-ui/components/tab-group/tab-group.component.mjs +3 -3
- package/esm2020/lib/tab-ui/tab-ui.module.mjs +5 -5
- package/fesm2015/leanix-components.mjs +353 -362
- package/fesm2015/leanix-components.mjs.map +1 -1
- package/fesm2020/leanix-components.mjs +352 -361
- package/fesm2020/leanix-components.mjs.map +1 -1
- package/lib/core-ui/components/badge/badge.component.d.ts +1 -1
- package/lib/core-ui/components/button/button.component.d.ts +1 -1
- package/lib/core-ui/components/button-group/button-group.component.d.ts +1 -1
- package/lib/core-ui/components/card/card.component.d.ts +1 -1
- package/lib/core-ui/components/collapsible/collapsible.component.d.ts +1 -1
- package/lib/core-ui/components/colored-label/colored-label.component.d.ts +1 -1
- package/lib/core-ui/components/ellipsis/ellipsis.component.d.ts +1 -1
- package/lib/core-ui/components/icon-scale/icon-scale.component.d.ts +1 -1
- package/lib/core-ui/components/spinner/spinner.component.d.ts +1 -1
- package/lib/core-ui/components/table/table-header/table-header.component.d.ts +1 -1
- package/lib/core-ui/components/table/table.component.d.ts +1 -1
- package/lib/core-ui/components/tiny-spinner/tiny-spinner.component.d.ts +1 -1
- package/lib/core-ui/directives/after-view-init.directive.d.ts +1 -1
- package/lib/core-ui/directives/autoclose.directive.d.ts +1 -1
- package/lib/core-ui/directives/autofocus.directive.d.ts +1 -1
- package/lib/core-ui/directives/html.directive.d.ts +1 -1
- package/lib/core-ui/linkify/linkify.pipe.d.ts +1 -1
- package/lib/core-ui/linkify/unlinkify.pipe.d.ts +1 -1
- package/lib/core-ui/pipes/br.pipe.d.ts +1 -1
- package/lib/core-ui/pipes/contrast-color.pipe.d.ts +1 -1
- package/lib/core-ui/pipes/custom-date.pipe.d.ts +1 -1
- package/lib/core-ui/pipes/highlight-range.pipe.d.ts +1 -1
- package/lib/core-ui/pipes/highlight-term.pipe.d.ts +1 -1
- package/lib/core-ui/pipes/lx-is-uuid.pipe.d.ts +1 -1
- package/lib/core-ui/pipes/lx-time-ago.pipe.d.ts +1 -1
- package/lib/core-ui/pipes/lx-translate.pipe.d.ts +1 -1
- package/lib/core-ui/pipes/markdown.pipe.d.ts +1 -1
- package/lib/core-ui/pipes/nbsp.pipe.d.ts +1 -1
- package/lib/core-ui/pipes/sort.pipe.d.ts +1 -1
- package/lib/core-ui/pipes/translation-after.pipe.d.ts +1 -1
- package/lib/core-ui/pipes/translation-before.pipe.d.ts +1 -1
- package/lib/core-ui/pipes/translation-between.pipe.d.ts +1 -1
- package/lib/core-ui/pipes/unescape-curly-braces.pipe.d.ts +1 -1
- package/lib/core-ui/tooltip/tooltip.component.d.ts +1 -1
- package/lib/core-ui/tooltip/tooltip.directive.d.ts +1 -1
- package/lib/forms-ui/components/basic-dropdown/basic-dropdown.component.d.ts +1 -1
- package/lib/forms-ui/components/basic-dropdown-item/basic-dropdown-item.component.d.ts +1 -1
- package/lib/forms-ui/components/cdk-options-dropdown/cdk-options-dropdown.component.d.ts +1 -1
- package/lib/forms-ui/components/cdk-options-sub-dropdown/cdk-options-sub-dropdown.component.d.ts +1 -1
- package/lib/forms-ui/components/currency/currency-input.component.d.ts +1 -1
- package/lib/forms-ui/components/currency/currency-symbol.component.d.ts +1 -1
- package/lib/forms-ui/components/date-input/date-input.component.d.ts +3 -3
- package/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list-item/drag-and-drop-list-item.component.d.ts +1 -1
- package/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.component.d.ts +1 -1
- package/lib/forms-ui/components/drag-and-drop-list/keyboard-sortable-item/keyboard-sortable-item.directive.d.ts +4 -4
- package/lib/forms-ui/components/drag-and-drop-list/keyboard-sortable-list/keyboard-sortable-list.directive.d.ts +2 -2
- package/lib/forms-ui/components/error-message/error-message.component.d.ts +1 -1
- package/lib/forms-ui/components/form-error/form-error.component.d.ts +3 -3
- package/lib/forms-ui/components/icon/icon.component.d.ts +1 -1
- package/lib/forms-ui/components/input/input.component.d.ts +1 -1
- package/lib/forms-ui/components/keyboard-select.directive.d.ts +1 -1
- package/lib/forms-ui/components/multi-select/multi-select.component.d.ts +1 -1
- package/lib/forms-ui/components/option/option.component.d.ts +1 -1
- package/lib/forms-ui/components/option-group/option-group.component.d.ts +1 -1
- package/lib/forms-ui/components/option-group-dropdown/option-group-dropdown.component.d.ts +1 -1
- package/lib/forms-ui/components/options-dropdown/options-dropdown.component.d.ts +1 -1
- package/lib/forms-ui/components/options-sub-dropdown/options-sub-dropdown.component.d.ts +1 -1
- package/lib/forms-ui/components/picker/picker-trigger.directive.d.ts +1 -1
- package/lib/forms-ui/components/picker/picker.component.d.ts +1 -1
- package/lib/forms-ui/components/picker-option/picker-option.component.d.ts +1 -1
- package/lib/forms-ui/components/pill-item/pill-item.component.d.ts +1 -1
- package/lib/forms-ui/components/pill-list/pill-list.component.d.ts +1 -1
- package/lib/forms-ui/components/responsive-input/responsive-input.component.d.ts +3 -3
- package/lib/forms-ui/components/single-select/single-select.component.d.ts +1 -1
- package/lib/forms-ui/components/slider-toggle/slider-toggle.component.d.ts +1 -1
- package/lib/forms-ui/components/sorting-dropdown/sorting-dropdown.component.d.ts +1 -1
- package/lib/forms-ui/components/sorting-dropdown-trigger/sorting-dropdown-trigger.component.d.ts +1 -1
- package/lib/forms-ui/directives/form-error.directive.d.ts +1 -1
- package/lib/forms-ui/directives/form-submit.directive.d.ts +1 -1
- package/lib/forms-ui/directives/keyboard-action-source.directive.d.ts +1 -1
- package/lib/forms-ui/directives/mark-invalid.directive.d.ts +1 -1
- package/lib/forms-ui/directives/select-dropdown.directive.d.ts +1 -1
- package/lib/forms-ui/directives/selectable-item.directive.d.ts +1 -1
- package/lib/forms-ui/directives/selected-option.directive.d.ts +1 -1
- package/lib/forms-ui/models/base-select.directive.d.ts +3 -3
- package/lib/forms-ui/pipes/filter-selection.pipe.d.ts +1 -1
- package/lib/forms-ui/pipes/filter-term.pipe.d.ts +1 -1
- package/lib/forms-ui/pipes/format-number.pipe.d.ts +1 -1
- package/lib/modal-ui/components/modal/modal.component.d.ts +1 -1
- package/lib/modal-ui/components/modal-footer/modal-footer.component.d.ts +1 -1
- package/lib/modal-ui/components/modal-header/modal-header.component.d.ts +1 -1
- package/lib/modal-ui/directives/modal-content.directive.d.ts +1 -1
- package/lib/popover-ui/components/popover/popover.component.d.ts +1 -1
- package/lib/popover-ui/directives/popover-click.directive.d.ts +1 -1
- package/lib/popover-ui/directives/popover-content.directive.d.ts +1 -1
- package/lib/popover-ui/directives/popover-hover.directive.d.ts +1 -1
- package/lib/tab-ui/components/tab/tab.component.d.ts +1 -1
- package/lib/tab-ui/components/tab-group/tab-group.component.d.ts +1 -1
- package/package.json +4 -4
- package/leanix-components.d.ts +0 -5
@@ -9,10 +9,10 @@ import { BaseSelectDirective } from '../../models/base-select.directive';
|
|
9
9
|
import { KeyboardSelectAction } from '../keyboard-select.directive';
|
10
10
|
import { ResponsiveInputComponent } from '../responsive-input/responsive-input.component';
|
11
11
|
import * as i0 from "@angular/core";
|
12
|
-
import * as i1 from "
|
13
|
-
import * as i2 from "@angular/
|
12
|
+
import * as i1 from "@angular/common";
|
13
|
+
import * as i2 from "@angular/forms";
|
14
14
|
import * as i3 from "../../directives/mark-invalid.directive";
|
15
|
-
import * as i4 from "
|
15
|
+
import * as i4 from "../responsive-input/responsive-input.component";
|
16
16
|
export class MultiSelectComponent extends BaseSelectDirective {
|
17
17
|
constructor(cd) {
|
18
18
|
super();
|
@@ -213,15 +213,15 @@ export class MultiSelectComponent extends BaseSelectDirective {
|
|
213
213
|
this.isInputFocusedViaTab = true;
|
214
214
|
}
|
215
215
|
}
|
216
|
-
MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
217
|
-
MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
216
|
+
MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
217
|
+
MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MultiSelectComponent, selector: "lx-multi-select", inputs: { markInvalid: "markInvalid", selection: "selection", size: "size", dropdownWidthScale: "dropdownWidthScale" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, providers: [
|
218
218
|
{
|
219
219
|
provide: NG_VALUE_ACCESSOR,
|
220
220
|
useExisting: forwardRef(() => MultiSelectComponent),
|
221
221
|
multi: true
|
222
222
|
}
|
223
|
-
], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], 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\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.focused]=\"isInputFocused\"\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 === toggle)\"\n>\n <div class=\"selectedChoicesContainer\">\n <div *ngIf=\"(selection?.length === 0 || !selection) && !queryControl?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n <div class=\"selection\">\n <ng-content select=\".pills\"></ng-content>\n </div>\n <lx-responsive-input\n (focus)=\"isInputFocused = true\"\n (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n (keydown.enter)=\"$event.preventDefault()\"\n ></lx-responsive-input>\n <i #toggle [hidden]=\"disabled\" class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\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 #dropdown>\n <ng-content select=\".dropdownComponent\"></ng-content>\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:white}.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 #5599ff}.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;left:12px;right:25px;top:0;bottom:0;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis;padding-left:4px}.selectContainer .selectedChoicesContainer>.fa-angle-down{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:white;z-index:1}lx-responsive-input{height:29px;padding-left:4px}.backdrop{z-index:1048;position:fixed;top:0;bottom:0;left:0;right:0}\n"],
|
224
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
223
|
+
], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], 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\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.focused]=\"isInputFocused\"\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 === toggle)\"\n>\n <div class=\"selectedChoicesContainer\">\n <div *ngIf=\"(selection?.length === 0 || !selection) && !queryControl?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n <div class=\"selection\">\n <ng-content select=\".pills\"></ng-content>\n </div>\n <lx-responsive-input\n (focus)=\"isInputFocused = true\"\n (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n (keydown.enter)=\"$event.preventDefault()\"\n ></lx-responsive-input>\n <i #toggle [hidden]=\"disabled\" class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\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 #dropdown>\n <ng-content select=\".dropdownComponent\"></ng-content>\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:white}.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 #5599ff}.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;left:12px;right:25px;top:0;bottom:0;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis;padding-left:4px}.selectContainer .selectedChoicesContainer>.fa-angle-down{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:white;z-index:1}lx-responsive-input{height:29px;padding-left:4px}.backdrop{z-index:1048;position:fixed;top:0;bottom:0;left:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: i4.ResponsiveInputComponent, selector: "lx-responsive-input", outputs: ["focus", "focusViaTab", "blur"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
|
224
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
225
225
|
type: Component,
|
226
226
|
args: [{ selector: 'lx-multi-select', providers: [
|
227
227
|
{
|
@@ -49,9 +49,9 @@ export class OptionComponent {
|
|
49
49
|
this.highlight.emit(this.isHighlighted);
|
50
50
|
}
|
51
51
|
}
|
52
|
-
OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
53
|
-
OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
54
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
52
|
+
OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OptionComponent, deps: [{ token: forwardRef(() => OptionGroupComponent), optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
53
|
+
OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: OptionComponent, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState", selectIcon: "selectIcon" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick" }, host: { listeners: { "click": "selectOption($event)" } }, ngImport: i0, template: "<li\n class=\"option\"\n [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n [class.highlighted]=\"isHighlighted\"\n [class.selected]=\"selected\"\n [class.disabled]=\"disabled\"\n [class.hasSubdropdown]=\"hasSubdropdown\"\n>\n <ng-container *ngIf=\"hasSelectedState\">\n <ng-container [ngSwitch]=\"selectIcon\">\n <ng-container *ngSwitchCase=\"'check'\">\n <i *ngIf=\"selected\" class=\"far fa-check\"></i>\n </ng-container>\n <ng-container *ngSwitchCase=\"'circle'\">\n <i class=\"fal fa-circle\"></i>\n <i *ngIf=\"selected\" class=\"fas fa-circle\"></i>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-content></ng-content>\n <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d;position:relative}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option i{line-height:23px;position:absolute;top:calc(50% - 11.5px)}.fa-check{left:8px}.fa-circle{left:6px;font-size:16px;width:16px;text-align:center}.fas.fa-circle{font-size:8px;color:inherit}.fa-chevron-right{right:8px;font-size:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
|
54
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OptionComponent, decorators: [{
|
55
55
|
type: Component,
|
56
56
|
args: [{ selector: 'lx-option', template: "<li\n class=\"option\"\n [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n [class.highlighted]=\"isHighlighted\"\n [class.selected]=\"selected\"\n [class.disabled]=\"disabled\"\n [class.hasSubdropdown]=\"hasSubdropdown\"\n>\n <ng-container *ngIf=\"hasSelectedState\">\n <ng-container [ngSwitch]=\"selectIcon\">\n <ng-container *ngSwitchCase=\"'check'\">\n <i *ngIf=\"selected\" class=\"far fa-check\"></i>\n </ng-container>\n <ng-container *ngSwitchCase=\"'circle'\">\n <i class=\"fal fa-circle\"></i>\n <i *ngIf=\"selected\" class=\"fas fa-circle\"></i>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-content></ng-content>\n <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d;position:relative}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option i{line-height:23px;position:absolute;top:calc(50% - 11.5px)}.fa-check{left:8px}.fa-circle{left:6px;font-size:16px;width:16px;text-align:center}.fas.fa-circle{font-size:8px;color:inherit}.fa-chevron-right{right:8px;font-size:8px}\n"] }]
|
57
57
|
}], ctorParameters: function () { return [{ type: i2.OptionGroupComponent, decorators: [{
|
@@ -14,9 +14,9 @@ export class OptionGroupComponent {
|
|
14
14
|
this.select.emit(value);
|
15
15
|
}
|
16
16
|
}
|
17
|
-
OptionGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
18
|
-
OptionGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
19
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
17
|
+
OptionGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
18
|
+
OptionGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: OptionGroupComponent, selector: "lx-option-group", inputs: { hasSelectedState: "hasSelectedState", label: "label" }, outputs: { select: "select" }, ngImport: i0, template: "<li>\n <span *ngIf=\"label\" class=\"groupLabel\" [class.selectedState]=\"hasSelectedState\">{{ label }}</span>\n <ul>\n <ng-content></ng-content>\n </ul>\n</li>\n", styles: [":host{display:block}:host:not(:first-child){border-top:solid 1px #eaedf1}ul{list-style:none;margin:0;padding-left:0}.groupLabel{display:block;line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase}.groupLabel.selectedState{padding-left:28px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
19
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OptionGroupComponent, decorators: [{
|
20
20
|
type: Component,
|
21
21
|
args: [{ selector: 'lx-option-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<li>\n <span *ngIf=\"label\" class=\"groupLabel\" [class.selectedState]=\"hasSelectedState\">{{ label }}</span>\n <ul>\n <ng-content></ng-content>\n </ul>\n</li>\n", styles: [":host{display:block}:host:not(:first-child){border-top:solid 1px #eaedf1}ul{list-style:none;margin:0;padding-left:0}.groupLabel{display:block;line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase}.groupLabel.selectedState{padding-left:28px}\n"] }]
|
22
22
|
}], propDecorators: { hasSelectedState: [{
|
package/esm2020/lib/forms-ui/components/option-group-dropdown/option-group-dropdown.component.mjs
CHANGED
@@ -2,11 +2,11 @@ import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, Input,
|
|
2
2
|
import { BasicDropdownComponent } from '../basic-dropdown/basic-dropdown.component';
|
3
3
|
import { KeyboardSelectDirective } from '../keyboard-select.directive';
|
4
4
|
import * as i0 from "@angular/core";
|
5
|
-
import * as i1 from "
|
6
|
-
import * as i2 from "
|
7
|
-
import * as i3 from "../../../core-ui/components/
|
8
|
-
import * as i4 from "
|
9
|
-
import * as i5 from "
|
5
|
+
import * as i1 from "@angular/common";
|
6
|
+
import * as i2 from "ngx-infinite-scroll";
|
7
|
+
import * as i3 from "../../../core-ui/components/badge/badge.component";
|
8
|
+
import * as i4 from "../../../core-ui/components/spinner/spinner.component";
|
9
|
+
import * as i5 from "../basic-dropdown-item/basic-dropdown-item.component";
|
10
10
|
import * as i6 from "../../directives/selectable-item.directive";
|
11
11
|
import * as i7 from "@ngx-translate/core";
|
12
12
|
/**
|
@@ -63,9 +63,9 @@ export class OptionGroupDropdownComponent extends KeyboardSelectDirective {
|
|
63
63
|
return option.value;
|
64
64
|
}
|
65
65
|
}
|
66
|
-
OptionGroupDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
67
|
-
OptionGroupDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
68
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
66
|
+
OptionGroupDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OptionGroupDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
67
|
+
OptionGroupDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: OptionGroupDropdownComponent, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<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 <li\n *ngIf=\"showCreateNewOption && newOptionLabel && isNewItem\"\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-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n </li>\n <ng-container *ngFor=\"let optionGroup of optionGroups; let groupIndex = index; trackBy: trackByLabel\">\n <li>\n <div class=\"groupLabel\" *ngIf=\"optionGroup.label\">\n <span>{{ optionGroup.label | uppercase }}</span>\n </div>\n <ul>\n <ng-container *ngIf=\"showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0; else options\">\n <li class=\"noResult\">\n <ng-container *ngIf=\"noResultsOptionTemplateRef; else defaultText\">\n <ng-container\n *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultText>\n <span>{{ NAME + '.noResults' | translate }}</span>\n </ng-template>\n </li>\n </ng-container>\n <ng-template #options>\n <li\n *ngFor=\"let option of optionGroup.options; let index = index; trackBy: trackByValue\"\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 <ng-container *ngIf=\"optionTemplateRef; else basicDropdownOption\">\n <ng-container\n *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n ></ng-container>\n </ng-container>\n <ng-template #basicDropdownOption>\n <lx-basic-dropdown-item\n [label]=\"option.label\"\n labelFontWeight=\"normal\"\n [highlightTerm]=\"highlightTerm\"\n ></lx-basic-dropdown-item>\n </ng-template>\n </li>\n </ng-template>\n </ul>\n </li>\n </ng-container>\n <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n </ul>\n</div>\n", styles: [":host{display:block}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#99a5bb;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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: i3.BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { kind: "component", type: i4.SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "component", type: i5.BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle"] }, { kind: "directive", type: i6.SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
68
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OptionGroupDropdownComponent, decorators: [{
|
69
69
|
type: Component,
|
70
70
|
args: [{ selector: 'lx-option-group-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<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 <li\n *ngIf=\"showCreateNewOption && newOptionLabel && isNewItem\"\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-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n </li>\n <ng-container *ngFor=\"let optionGroup of optionGroups; let groupIndex = index; trackBy: trackByLabel\">\n <li>\n <div class=\"groupLabel\" *ngIf=\"optionGroup.label\">\n <span>{{ optionGroup.label | uppercase }}</span>\n </div>\n <ul>\n <ng-container *ngIf=\"showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0; else options\">\n <li class=\"noResult\">\n <ng-container *ngIf=\"noResultsOptionTemplateRef; else defaultText\">\n <ng-container\n *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultText>\n <span>{{ NAME + '.noResults' | translate }}</span>\n </ng-template>\n </li>\n </ng-container>\n <ng-template #options>\n <li\n *ngFor=\"let option of optionGroup.options; let index = index; trackBy: trackByValue\"\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 <ng-container *ngIf=\"optionTemplateRef; else basicDropdownOption\">\n <ng-container\n *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n ></ng-container>\n </ng-container>\n <ng-template #basicDropdownOption>\n <lx-basic-dropdown-item\n [label]=\"option.label\"\n labelFontWeight=\"normal\"\n [highlightTerm]=\"highlightTerm\"\n ></lx-basic-dropdown-item>\n </ng-template>\n </li>\n </ng-template>\n </ul>\n </li>\n </ng-container>\n <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n </ul>\n</div>\n", styles: [":host{display:block}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#99a5bb;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"] }]
|
71
71
|
}], propDecorators: { optionGroups: [{
|
@@ -138,9 +138,9 @@ export class OptionsDropdownComponent {
|
|
138
138
|
return !option.disabled && (isToplevelOptionAndAllowed || isSecondlevelOptionAndAllowed);
|
139
139
|
}
|
140
140
|
}
|
141
|
-
OptionsDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
142
|
-
OptionsDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
143
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
141
|
+
OptionsDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
142
|
+
OptionsDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight", closeOnSelect: "closeOnSelect" }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<div (click)=\"open = !open\" class=\"triggerContainer\">\n <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</div>\n<ul\n *ngIf=\"open\"\n [class.left]=\"align === 'left'\"\n [class.showScrollbar]=\"maxHeight !== 'none'\"\n [style.max-height]=\"maxHeight\"\n lxAutoclose\n (autoclose)=\"closeDropdown()\"\n>\n <ng-content></ng-content>\n</ul>\n", styles: [":host{display:inline-block;position:relative}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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
143
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OptionsDropdownComponent, decorators: [{
|
144
144
|
type: Component,
|
145
145
|
args: [{ selector: 'lx-options-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div (click)=\"open = !open\" class=\"triggerContainer\">\n <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</div>\n<ul\n *ngIf=\"open\"\n [class.left]=\"align === 'left'\"\n [class.showScrollbar]=\"maxHeight !== 'none'\"\n [style.max-height]=\"maxHeight\"\n lxAutoclose\n (autoclose)=\"closeDropdown()\"\n>\n <ng-content></ng-content>\n</ul>\n", styles: [":host{display:inline-block;position:relative}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}\n"] }]
|
146
146
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { align: [{
|
package/esm2020/lib/forms-ui/components/options-sub-dropdown/options-sub-dropdown.component.mjs
CHANGED
@@ -67,9 +67,9 @@ export class OptionsSubDropdownComponent {
|
|
67
67
|
this.hidden = true;
|
68
68
|
}
|
69
69
|
}
|
70
|
-
OptionsSubDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
71
|
-
OptionsSubDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
72
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
70
|
+
OptionsSubDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OptionsSubDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
71
|
+
OptionsSubDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: OptionsSubDropdownComponent, selector: "lx-options-sub-dropdown", inputs: { trigger: "trigger", align: "align" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "class.hidden": "this.hidden" } }, queries: [{ propertyName: "options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<div #spacingContainer class=\"spacingContainer\" [class.left]=\"align === 'left'\">\n <ul\n #subDropdown\n class=\"sub-dropdown\"\n lxAutoclose\n [class.showScrollbar]=\"(maxHeight$ | async) !== 'none'\"\n [style.max-height]=\"(maxHeight$ | async) ?? 'none'\"\n (autoclose)=\"closeDropdown()\"\n >\n <ng-content></ng-content>\n </ul>\n</div>\n", styles: [":host{display:block}:host.hidden{display:none}.spacingContainer{position:absolute;left:100%;transform:translateY(-32px);padding:0 0 0 4px}.spacingContainer.left{left:auto;right:100%;padding:0 4px 0 0}.sub-dropdown{position:relative;padding:0;background-color:#fff;border:solid 1px #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;text-align:left;list-style:none}.sub-dropdown::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}.sub-dropdown::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}.sub-dropdown::-webkit-scrollbar-track-piece{background-color:transparent}.sub-dropdown.showScrollbar{overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i1.AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
|
72
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OptionsSubDropdownComponent, decorators: [{
|
73
73
|
type: Component,
|
74
74
|
args: [{ selector: 'lx-options-sub-dropdown', template: "<div #spacingContainer class=\"spacingContainer\" [class.left]=\"align === 'left'\">\n <ul\n #subDropdown\n class=\"sub-dropdown\"\n lxAutoclose\n [class.showScrollbar]=\"(maxHeight$ | async) !== 'none'\"\n [style.max-height]=\"(maxHeight$ | async) ?? 'none'\"\n (autoclose)=\"closeDropdown()\"\n >\n <ng-content></ng-content>\n </ul>\n</div>\n", styles: [":host{display:block}:host.hidden{display:none}.spacingContainer{position:absolute;left:100%;transform:translateY(-32px);padding:0 0 0 4px}.spacingContainer.left{left:auto;right:100%;padding:0 4px 0 0}.sub-dropdown{position:relative;padding:0;background-color:#fff;border:solid 1px #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;text-align:left;list-style:none}.sub-dropdown::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}.sub-dropdown::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}.sub-dropdown::-webkit-scrollbar-track-piece{background-color:transparent}.sub-dropdown.showScrollbar{overflow-y:auto}\n"] }]
|
75
75
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { trigger: [{
|
@@ -25,9 +25,9 @@ export class PickerTriggerDirective {
|
|
25
25
|
this.destroyed$.next();
|
26
26
|
}
|
27
27
|
}
|
28
|
-
PickerTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
29
|
-
PickerTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
30
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
28
|
+
PickerTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PickerTriggerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
29
|
+
PickerTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: PickerTriggerDirective, selector: "[lxPickerTrigger]", ngImport: i0 });
|
30
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PickerTriggerDirective, decorators: [{
|
31
31
|
type: Directive,
|
32
32
|
args: [{
|
33
33
|
selector: '[lxPickerTrigger]'
|
@@ -165,15 +165,15 @@ export class PickerComponent {
|
|
165
165
|
propagateChange(_value) { }
|
166
166
|
onTouched() { }
|
167
167
|
}
|
168
|
-
PickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
169
|
-
PickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
168
|
+
PickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PickerComponent, deps: [{ token: i1.Directionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
169
|
+
PickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: PickerComponent, selector: "lx-picker", inputs: { listBoxAriaLabel: "listBoxAriaLabel", listBoxAriaLabelledBy: "listBoxAriaLabelledBy", openDirection: "openDirection" }, host: { listeners: { "document:keydown": "manageKeyboardEvents($event)" } }, providers: [
|
170
170
|
{
|
171
171
|
provide: NG_VALUE_ACCESSOR,
|
172
172
|
multi: true,
|
173
173
|
useExisting: forwardRef(() => PickerComponent)
|
174
174
|
}
|
175
|
-
], queries: [{ propertyName: "_trigger", first: true, predicate: PickerTriggerDirective, descendants: true }, { propertyName: "options", predicate: PickerOptionComponent }], ngImport: i0, template: "<div class=\"pickerContainer\">\n <ng-content select=\"[lxPickerTrigger]\"></ng-content>\n <ul\n class=\"pickerOptions\"\n *ngIf=\"open\"\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></ng-content>\n </ul>\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"],
|
176
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
175
|
+
], queries: [{ propertyName: "_trigger", first: true, predicate: PickerTriggerDirective, descendants: true }, { propertyName: "options", predicate: PickerOptionComponent }], ngImport: i0, template: "<div class=\"pickerContainer\">\n <ng-content select=\"[lxPickerTrigger]\"></ng-content>\n <ul\n class=\"pickerOptions\"\n *ngIf=\"open\"\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></ng-content>\n </ul>\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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
176
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PickerComponent, decorators: [{
|
177
177
|
type: Component,
|
178
178
|
args: [{ selector: 'lx-picker', providers: [
|
179
179
|
{
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core';
|
2
2
|
import * as i0 from "@angular/core";
|
3
3
|
import * as i1 from "@ngx-translate/core";
|
4
|
-
import * as i2 from "
|
5
|
-
import * as i3 from "
|
4
|
+
import * as i2 from "@angular/common";
|
5
|
+
import * as i3 from "../icon/icon.component";
|
6
6
|
export class PickerOptionComponent {
|
7
7
|
constructor(cdRef, translateService) {
|
8
8
|
this.cdRef = cdRef;
|
@@ -70,9 +70,9 @@ export class PickerOptionComponent {
|
|
70
70
|
this.select.emit(this.value);
|
71
71
|
}
|
72
72
|
}
|
73
|
-
PickerOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
74
|
-
PickerOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
75
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
73
|
+
PickerOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PickerOptionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
74
|
+
PickerOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: PickerOptionComponent, 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: "<lx-icon *ngIf=\"isClearOption\" name=\"slash\" color=\"#d8d8d8\"></lx-icon>\n<ng-content *ngIf=\"!isClearOption\"></ng-content>\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}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "lx-icon", inputs: ["name", "color", "fontAwsomeStyle", "size", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
75
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PickerOptionComponent, decorators: [{
|
76
76
|
type: Component,
|
77
77
|
args: [{ selector: 'li[lx-picker-option]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<lx-icon *ngIf=\"isClearOption\" name=\"slash\" color=\"#d8d8d8\"></lx-icon>\n<ng-content *ngIf=\"!isClearOption\"></ng-content>\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}\n"] }]
|
78
78
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateService }]; }, propDecorators: { role: [{
|
@@ -13,9 +13,9 @@ export class PillItemComponent {
|
|
13
13
|
}
|
14
14
|
}
|
15
15
|
}
|
16
|
-
PillItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
17
|
-
PillItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
18
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
16
|
+
PillItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PillItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
17
|
+
PillItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: PillItemComponent, selector: "lx-pill-item", inputs: { item: "item", label: "label", disabled: "disabled" }, outputs: { remove: "remove" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n<span *ngIf=\"!disabled\" data-testid=\"remove-pill-item\" (click)=\"removePill(item, true)\" class=\"remove far fa-times\"></span>\n", styles: [":host{margin:2px;border-radius:1px;border:solid 1px #e1e5eb;background-color:#e1e5eb;display:inline-block;padding:4px}:host:hover{background-color:#cfd5df;border:solid 1px #cfd5df;color:#526179}:host-context(.selected){background-color:#c2c9d6}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;color:#526179;vertical-align:middle}.remove{vertical-align:middle;color:#8594ad;margin:0 4px}.remove:hover{cursor:pointer;color:#526179}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
18
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PillItemComponent, decorators: [{
|
19
19
|
type: Component,
|
20
20
|
args: [{ selector: 'lx-pill-item', template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n<span *ngIf=\"!disabled\" data-testid=\"remove-pill-item\" (click)=\"removePill(item, true)\" class=\"remove far fa-times\"></span>\n", styles: [":host{margin:2px;border-radius:1px;border:solid 1px #e1e5eb;background-color:#e1e5eb;display:inline-block;padding:4px}:host:hover{background-color:#cfd5df;border:solid 1px #cfd5df;color:#526179}:host-context(.selected){background-color:#c2c9d6}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;color:#526179;vertical-align:middle}.remove{vertical-align:middle;color:#8594ad;margin:0 4px}.remove:hover{cursor:pointer;color:#526179}\n"] }]
|
21
21
|
}], propDecorators: { item: [{
|
@@ -4,8 +4,8 @@ import { delay, startWith, switchMap, takeUntil } from 'rxjs/operators';
|
|
4
4
|
import { KeyboardSelectDirective } from '../keyboard-select.directive';
|
5
5
|
import { PillItemComponent } from '../pill-item/pill-item.component';
|
6
6
|
import * as i0 from "@angular/core";
|
7
|
-
import * as i1 from "
|
8
|
-
import * as i2 from "
|
7
|
+
import * as i1 from "@angular/common";
|
8
|
+
import * as i2 from "../pill-item/pill-item.component";
|
9
9
|
import * as i3 from "../../directives/selectable-item.directive";
|
10
10
|
export class PillListComponent extends KeyboardSelectDirective {
|
11
11
|
constructor() {
|
@@ -31,9 +31,9 @@ export class PillListComponent extends KeyboardSelectDirective {
|
|
31
31
|
return (index, pill) => (prop ? pill[prop] : index);
|
32
32
|
}
|
33
33
|
}
|
34
|
-
PillListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
35
|
-
PillListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
36
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
34
|
+
PillListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PillListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
35
|
+
PillListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: PillListComponent, selector: "lx-pill-list", inputs: { pills: "pills", labelKey: "labelKey", itemKey: "itemKey", disabled: "disabled" }, outputs: { remove: "remove" }, host: { properties: { "class.disabled": "this.disabled" } }, queries: [{ propertyName: "pillTemplate", first: true, predicate: ["pillTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "contentItems", predicate: PillItemComponent }], usesInheritance: true, ngImport: i0, template: "<ul class=\"pills\" #keyboardSelectContainer>\n <li\n *ngFor=\"let pill of pills; let index = index; trackBy: trackByProp(itemKey)\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (select)=\"removePillViaKeyboard(pill)\"\n class=\"pill\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n >\n <ng-container *ngIf=\"pillTemplate; else defaultTemplate\">\n <ng-container *ngTemplateOutlet=\"pillTemplate; context: { $implicit: pill, index: index }\"></ng-container>\n </ng-container>\n <ng-template #defaultTemplate>\n <lx-pill-item\n [item]=\"pill\"\n [label]=\"labelKey ? pill[labelKey] : pill\"\n [disabled]=\"disabled\"\n (remove)=\"removePill($event)\"\n ></lx-pill-item>\n </ng-template>\n </li>\n</ul>\n", styles: [":host .pill{display:inline}:host.disabled{cursor:not-allowed}:host .pills{display:inline;margin:0!important;padding:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.PillItemComponent, selector: "lx-pill-item", inputs: ["item", "label", "disabled"], outputs: ["remove"] }, { kind: "directive", type: i3.SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
36
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PillListComponent, decorators: [{
|
37
37
|
type: Component,
|
38
38
|
args: [{ selector: 'lx-pill-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"pills\" #keyboardSelectContainer>\n <li\n *ngFor=\"let pill of pills; let index = index; trackBy: trackByProp(itemKey)\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (select)=\"removePillViaKeyboard(pill)\"\n class=\"pill\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n >\n <ng-container *ngIf=\"pillTemplate; else defaultTemplate\">\n <ng-container *ngTemplateOutlet=\"pillTemplate; context: { $implicit: pill, index: index }\"></ng-container>\n </ng-container>\n <ng-template #defaultTemplate>\n <lx-pill-item\n [item]=\"pill\"\n [label]=\"labelKey ? pill[labelKey] : pill\"\n [disabled]=\"disabled\"\n (remove)=\"removePill($event)\"\n ></lx-pill-item>\n </ng-template>\n </li>\n</ul>\n", styles: [":host .pill{display:inline}:host.disabled{cursor:not-allowed}:host .pills{display:inline;margin:0!important;padding:0!important}\n"] }]
|
39
39
|
}], propDecorators: { pills: [{
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { ChangeDetectionStrategy, Component, EventEmitter, forwardRef, Output, ViewChild } from '@angular/core';
|
2
|
-
import {
|
2
|
+
import { NG_VALUE_ACCESSOR, UntypedFormControl } from '@angular/forms';
|
3
3
|
import { Subject } from 'rxjs';
|
4
4
|
import { takeUntil } from 'rxjs/operators';
|
5
5
|
import * as i0 from "@angular/core";
|
@@ -11,7 +11,7 @@ export class ResponsiveInputComponent {
|
|
11
11
|
this.focusViaTab = new EventEmitter();
|
12
12
|
this.blur = new EventEmitter();
|
13
13
|
this.inputWidth$ = new Subject();
|
14
|
-
this.inputControl = new
|
14
|
+
this.inputControl = new UntypedFormControl();
|
15
15
|
this.destroyed$ = new Subject();
|
16
16
|
}
|
17
17
|
ngAfterViewInit() {
|
@@ -67,15 +67,15 @@ export class ResponsiveInputComponent {
|
|
67
67
|
}
|
68
68
|
registerOnTouched(_fn) { }
|
69
69
|
}
|
70
|
-
ResponsiveInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
71
|
-
ResponsiveInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
70
|
+
ResponsiveInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ResponsiveInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
71
|
+
ResponsiveInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: ResponsiveInputComponent, selector: "lx-responsive-input", outputs: { focus: "focus", focusViaTab: "focusViaTab", blur: "blur" }, providers: [
|
72
72
|
{
|
73
73
|
provide: NG_VALUE_ACCESSOR,
|
74
74
|
multi: true,
|
75
75
|
useExisting: forwardRef(() => ResponsiveInputComponent)
|
76
76
|
}
|
77
|
-
], 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 (focus)=\"focus.emit()\"\n (blur)=\"blur.emit()\"\n (keyup.tab)=\"focusViaTab.emit()\"\n (keyup.shift.tab)=\"focusViaTab.emit()\"\n [formControl]=\"inputControl\"\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"],
|
78
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
77
|
+
], 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 (focus)=\"focus.emit()\"\n (blur)=\"blur.emit()\"\n (keyup.tab)=\"focusViaTab.emit()\"\n (keyup.shift.tab)=\"focusViaTab.emit()\"\n [formControl]=\"inputControl\"\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: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
78
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ResponsiveInputComponent, decorators: [{
|
79
79
|
type: Component,
|
80
80
|
args: [{ selector: 'lx-responsive-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
81
81
|
{
|
@@ -97,4 +97,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
97
97
|
type: ViewChild,
|
98
98
|
args: ['inputWidth', { static: true }]
|
99
99
|
}] } });
|
100
|
-
//# sourceMappingURL=data:application/json;base64,
|
100
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVzcG9uc2l2ZS1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvc3JjL2xpYi9mb3Jtcy11aS9jb21wb25lbnRzL3Jlc3BvbnNpdmUtaW5wdXQvcmVzcG9uc2l2ZS1pbnB1dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvc3JjL2xpYi9mb3Jtcy11aS9jb21wb25lbnRzL3Jlc3BvbnNpdmUtaW5wdXQvcmVzcG9uc2l2ZS1pbnB1dC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFFVCxZQUFZLEVBQ1osVUFBVSxFQUVWLE1BQU0sRUFDTixTQUFTLEVBQ1YsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUF3QixpQkFBaUIsRUFBRSxrQkFBa0IsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzdGLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDL0IsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7O0FBZTNDLE1BQU0sT0FBTyx3QkFBd0I7SUFickM7UUFjWSxVQUFLLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUNqQyxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFDdkMsU0FBSSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFJakMsZ0JBQVcsR0FBRyxJQUFJLE9BQU8sRUFBVSxDQUFDO1FBQ3BDLGlCQUFZLEdBQUcsSUFBSSxrQkFBa0IsRUFBRSxDQUFDO1FBQ3hDLGVBQVUsR0FBRyxJQUFJLE9BQU8sRUFBUSxDQUFDO0tBZ0UzQztJQTVEQyxlQUFlO1FBQ2Isa0NBQWtDO1FBQ2xDLElBQUksQ0FBQyxZQUFZLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUU7WUFDbEYsSUFBSSxDQUFDLGVBQWUsQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUM1QixJQUFJO2dCQUNGLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyx1QkFBdUIsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFBRSxLQUFLLENBQUMsR0FBRyxDQUFDLEdBQUcsSUFBSSxDQUFDO2dCQUM1RixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQzthQUM5QjtZQUFDLE9BQU8sRUFBRSxFQUFFO2dCQUNYLGlCQUFpQjthQUNsQjtRQUNILENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3pCLENBQUM7SUFFTSxVQUFVO1FBQ2YsSUFBSSxDQUFDLGVBQWUsQ0FBQyxhQUFhLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDN0MsQ0FBQztJQUVELFVBQVU7UUFDUixJQUFJLElBQUksQ0FBQyxZQUFZLENBQUMsS0FBSyxFQUFFLE1BQU0sR0FBRyxDQUFDLEVBQUU7WUFDdkMsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUM7WUFDbEQsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLHVCQUF1QixDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxFQUFFLEdBQUcsQ0FBQyxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUM7WUFDMUYsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDOUI7SUFDSCxDQUFDO0lBRUQ7OztPQUdHO0lBQ0ssdUJBQXVCLENBQUMsUUFBeUIsRUFBRSxXQUFtQjtRQUM1RSxJQUFJLFFBQVEsSUFBSSxXQUFXLEVBQUU7WUFDM0IsUUFBUSxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsY0FBYyxDQUFDO1lBQ3hDLFFBQVEsQ0FBQyxXQUFXLEdBQUcsV0FBVyxDQUFDO1lBQ25DLE1BQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLHFCQUFxQixFQUFFLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDdEUsUUFBUSxDQUFDLEtBQUssQ0FBQyxjQUFjLENBQUMsU0FBUyxDQUFDLENBQUM7WUFDekMsT0FBTyxXQUFXLENBQUM7U0FDcEI7UUFDRCxPQUFPLENBQUMsQ0FBQztJQUNYLENBQUM7SUFFRCx1QkFBdUI7SUFDdkIsZUFBZSxDQUFDLE1BQVcsSUFBRyxDQUFDO0lBRS9CLFVBQVUsQ0FBQyxRQUFhO1FBQ3RCLElBQUksUUFBUSxFQUFFO1lBQ1osSUFBSSxDQUFDLEtBQUssR0FBRyxRQUFRLENBQUM7WUFDdEIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDbEM7SUFDSCxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsRUFBTztRQUN0QixJQUFJLENBQUMsZUFBZSxHQUFHLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRUQsaUJBQWlCLENBQUMsR0FBUSxJQUFHLENBQUM7O3FIQXZFbkIsd0JBQXdCO3lHQUF4Qix3QkFBd0IscUhBUnhCO1FBQ1Q7WUFDRSxPQUFPLEVBQUUsaUJBQWlCO1lBQzFCLEtBQUssRUFBRSxJQUFJO1lBQ1gsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyx3QkFBd0IsQ0FBQztTQUN4RDtLQUNGLHFRQzFCSCxtVkFZQTsyRkRnQmEsd0JBQXdCO2tCQWJwQyxTQUFTOytCQUNFLHFCQUFxQixtQkFHZCx1QkFBdUIsQ0FBQyxNQUFNLGFBQ3BDO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLEtBQUssRUFBRSxJQUFJOzRCQUNYLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLHlCQUF5QixDQUFDO3lCQUN4RDtxQkFDRjs4QkFHUyxLQUFLO3NCQUFkLE1BQU07Z0JBQ0csV0FBVztzQkFBcEIsTUFBTTtnQkFDRyxJQUFJO3NCQUFiLE1BQU07Z0JBQ3lDLGVBQWU7c0JBQTlELFNBQVM7dUJBQUMsaUJBQWlCLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFO2dCQUNILFVBQVU7c0JBQXBELFNBQVM7dUJBQUMsWUFBWSxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEFmdGVyVmlld0luaXQsXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIEV2ZW50RW1pdHRlcixcbiAgZm9yd2FyZFJlZixcbiAgT25EZXN0cm95LFxuICBPdXRwdXQsXG4gIFZpZXdDaGlsZFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBOR19WQUxVRV9BQ0NFU1NPUiwgVW50eXBlZEZvcm1Db250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgdGFrZVVudGlsIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdseC1yZXNwb25zaXZlLWlucHV0JyxcbiAgdGVtcGxhdGVVcmw6ICdyZXNwb25zaXZlLWlucHV0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJ3Jlc3BvbnNpdmUtaW5wdXQuY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgbXVsdGk6IHRydWUsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBSZXNwb25zaXZlSW5wdXRDb21wb25lbnQpXG4gICAgfVxuICBdXG59KVxuZXhwb3J0IGNsYXNzIFJlc3BvbnNpdmVJbnB1dENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQsIE9uRGVzdHJveSwgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xuICBAT3V0cHV0KCkgZm9jdXMgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG4gIEBPdXRwdXQoKSBmb2N1c1ZpYVRhYiA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcbiAgQE91dHB1dCgpIGJsdXIgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG4gIEBWaWV3Q2hpbGQoJ3Jlc3BvbnNpdmVJbnB1dCcsIHsgc3RhdGljOiB0cnVlIH0pIHJlc3BvbnNpdmVJbnB1dCE6IEVsZW1lbnRSZWY8SFRNTElucHV0RWxlbWVudD47XG4gIEBWaWV3Q2hpbGQoJ2lucHV0V2lkdGgnLCB7IHN0YXRpYzogdHJ1ZSB9KSBpbnB1dFdpZHRoITogRWxlbWVudFJlZjxIVE1MU3BhbkVsZW1lbnQ+O1xuXG4gIHJlYWRvbmx5IGlucHV0V2lkdGgkID0gbmV3IFN1YmplY3Q8c3RyaW5nPigpO1xuICByZWFkb25seSBpbnB1dENvbnRyb2wgPSBuZXcgVW50eXBlZEZvcm1Db250cm9sKCk7XG4gIHJlYWRvbmx5IGRlc3Ryb3llZCQgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuXG4gIHZhbHVlOiBhbnk7XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIC8vIGNhbGN1bGF0ZSBzaXplIG9mIGlucHV0IGR5bmFtaWNcbiAgICB0aGlzLmlucHV0Q29udHJvbC52YWx1ZUNoYW5nZXMucGlwZSh0YWtlVW50aWwodGhpcy5kZXN0cm95ZWQkKSkuc3Vic2NyaWJlKCh2YWx1ZSkgPT4ge1xuICAgICAgdGhpcy5wcm9wYWdhdGVDaGFuZ2UodmFsdWUpO1xuICAgICAgdHJ5IHtcbiAgICAgICAgY29uc3Qgd2lkdGggPSB0aGlzLmNvbXB1dGVTZWFyY2hJbnB1dFdpZHRoKHRoaXMuaW5wdXRXaWR0aC5uYXRpdmVFbGVtZW50LCB2YWx1ZSkgKyAxICsgJ3B4JztcbiAgICAgICAgdGhpcy5pbnB1dFdpZHRoJC5uZXh0KHdpZHRoKTtcbiAgICAgIH0gY2F0Y2ggKF9lKSB7XG4gICAgICAgIC8qIGVtcHR5IGNhdGNoICovXG4gICAgICB9XG4gICAgfSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLmRlc3Ryb3llZCQubmV4dCgpO1xuICB9XG5cbiAgcHVibGljIGZvY3VzSW5wdXQoKSB7XG4gICAgdGhpcy5yZXNwb25zaXZlSW5wdXQubmF0aXZlRWxlbWVudC5mb2N1cygpO1xuICB9XG5cbiAgcmVzZXRJbnB1dCgpIHtcbiAgICBpZiAodGhpcy5pbnB1dENvbnRyb2wudmFsdWU/Lmxlbmd0aCA+IDApIHtcbiAgICAgIHRoaXMuaW5wdXRDb250cm9sLnJlc2V0KCcnLCB7IGVtaXRFdmVudDogZmFsc2UgfSk7XG4gICAgICBjb25zdCB3aWR0aCA9IHRoaXMuY29tcHV0ZVNlYXJjaElucHV0V2lkdGgodGhpcy5pbnB1dFdpZHRoLm5hdGl2ZUVsZW1lbnQsICcgJykgKyAxICsgJ3B4JztcbiAgICAgIHRoaXMuaW5wdXRXaWR0aCQubmV4dCh3aWR0aCk7XG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIEJhc2VkIG9uIGh0dHBzOi8vZ2l0aHViLmNvbS9TZW1hbnRpYy1PcmcvU2VtYW50aWMtVUktUmVhY3QvXG4gICAqIGJsb2IvMjVlMzgyZTQwYmIzMTAyYmIzOTk0NDYxMjY0M2MwMjg5Y2QxOTU2Yi9zcmMvbW9kdWxlcy9Ecm9wZG93bi9Ecm9wZG93bi5qcyNMMTAzNVxuICAgKi9cbiAgcHJpdmF0ZSBjb21wdXRlU2VhcmNoSW5wdXRXaWR0aChzaXplclJlZjogSFRNTFNwYW5FbGVtZW50LCBzZWFyY2hRdWVyeTogc3RyaW5nKTogbnVtYmVyIHtcbiAgICBpZiAoc2l6ZXJSZWYgJiYgc2VhcmNoUXVlcnkpIHtcbiAgICAgIHNpemVyUmVmLnN0eWxlLmRpc3BsYXkgPSAnaW5saW5lLWJsb2NrJztcbiAgICAgIHNpemVyUmVmLnRleHRDb250ZW50ID0gc2VhcmNoUXVlcnk7XG4gICAgICBjb25zdCBzZWFyY2hXaWR0aCA9IE1hdGguY2VpbChzaXplclJlZi5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS53aWR0aCk7XG4gICAgICBzaXplclJlZi5zdHlsZS5yZW1vdmVQcm9wZXJ0eSgnZGlzcGxheScpO1xuICAgICAgcmV0dXJuIHNlYXJjaFdpZHRoO1xuICAgIH1cbiAgICByZXR1cm4gMDtcbiAgfVxuXG4gIC8vI3JlZ2lvbiBBbmd1bGFyIEZvcm1zXG4gIHByb3BhZ2F0ZUNoYW5nZShfdmFsdWU6IGFueSkge31cblxuICB3cml0ZVZhbHVlKG5ld1ZhbHVlOiBhbnkpIHtcbiAgICBpZiAobmV3VmFsdWUpIHtcbiAgICAgIHRoaXMudmFsdWUgPSBuZXdWYWx1ZTtcbiAgICAgIHRoaXMucHJvcGFnYXRlQ2hhbmdlKHRoaXMudmFsdWUpO1xuICAgIH1cbiAgfVxuXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSkge1xuICAgIHRoaXMucHJvcGFnYXRlQ2hhbmdlID0gZm47XG4gIH1cblxuICByZWdpc3Rlck9uVG91Y2hlZChfZm46IGFueSkge31cbiAgLy8jZW5kcmVnaW9uXG59XG4iLCI8c3BhbiAjaW5wdXRXaWR0aCBjbGFzcz1cImlucHV0V2lkdGhcIj48L3NwYW4+XG48aW5wdXRcbiAgdHlwZT1cInRleHRcIlxuICBjbGFzcz1cInJlc3BvbnNpdmVJbnB1dFwiXG4gIChmb2N1cyk9XCJmb2N1cy5lbWl0KClcIlxuICAoYmx1cik9XCJibHVyLmVtaXQoKVwiXG4gIChrZXl1cC50YWIpPVwiZm9jdXNWaWFUYWIuZW1pdCgpXCJcbiAgKGtleXVwLnNoaWZ0LnRhYik9XCJmb2N1c1ZpYVRhYi5lbWl0KClcIlxuICBbZm9ybUNvbnRyb2xdPVwiaW5wdXRDb250cm9sXCJcbiAgI3Jlc3BvbnNpdmVJbnB1dFxuICBbc3R5bGUud2lkdGhdPVwiaW5wdXRXaWR0aCQgfCBhc3luY1wiXG4vPlxuIl19
|
@@ -12,8 +12,8 @@ import { BasicDropdownComponent } from '../basic-dropdown/basic-dropdown.compone
|
|
12
12
|
import { KeyboardSelectAction } from '../keyboard-select.directive';
|
13
13
|
import * as i0 from "@angular/core";
|
14
14
|
import * as i1 from "@angular/common";
|
15
|
-
import * as i2 from "
|
16
|
-
import * as i3 from "
|
15
|
+
import * as i2 from "@angular/forms";
|
16
|
+
import * as i3 from "../../directives/mark-invalid.directive";
|
17
17
|
export class SingleSelectComponent extends BaseSelectDirective {
|
18
18
|
constructor(cd) {
|
19
19
|
super();
|
@@ -219,15 +219,15 @@ export class SingleSelectComponent extends BaseSelectDirective {
|
|
219
219
|
: options.findIndex((option) => isEqual(selection, option));
|
220
220
|
}
|
221
221
|
}
|
222
|
-
SingleSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
223
|
-
SingleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
222
|
+
SingleSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SingleSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
223
|
+
SingleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: SingleSelectComponent, selector: "lx-single-select", inputs: { selection: "selection", selectionBackground: "selectionBackground", size: "size", dropdownWidthScale: "dropdownWidthScale", padding: "padding", allowClear: "allowClear", tabIndex: "tabIndex", markInvalid: "markInvalid" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, providers: [
|
224
224
|
{
|
225
225
|
provide: NG_VALUE_ACCESSOR,
|
226
226
|
multi: true,
|
227
227
|
useExisting: forwardRef(() => SingleSelectComponent)
|
228
228
|
}
|
229
|
-
], 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 [class.focusedVisible]=\"isInputFocusedViaTab\"\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; 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 <i *ngIf=\"selection && allowClear && !disabled\" class=\"far fa-times\" (click)=\"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: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%;-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;color:#8594ad}.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"],
|
230
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
229
|
+
], 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 [class.focusedVisible]=\"isInputFocusedViaTab\"\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; 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 <i *ngIf=\"selection && allowClear && !disabled\" class=\"far fa-times\" (click)=\"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: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%;-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;color:#8594ad}.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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
|
230
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SingleSelectComponent, decorators: [{
|
231
231
|
type: Component,
|
232
232
|
args: [{ selector: 'lx-single-select', providers: [
|
233
233
|
{
|
@@ -19,9 +19,9 @@ export class SliderToggleComponent {
|
|
19
19
|
setTimeout(() => checkbox.focus(), 150);
|
20
20
|
}
|
21
21
|
}
|
22
|
-
SliderToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
23
|
-
SliderToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
24
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
22
|
+
SliderToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SliderToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
23
|
+
SliderToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: SliderToggleComponent, selector: "lx-slider-toggle", inputs: { value: "value", size: "size", disabled: "disabled", label: "label", labelInFront: "labelInFront", elementId: "elementId" }, outputs: { toggle: "toggle" }, ngImport: i0, template: "<div\n class=\"wrapper\"\n [class.withLabel]=\"label\"\n [class.withLabelBehind]=\"label && !labelInFront\"\n [class.disabled]=\"disabled\"\n [attr.id]=\"id\"\n [class.small]=\"size === 'small'\"\n>\n <span *ngIf=\"label\" class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n <input\n #inputRef\n type=\"checkbox\"\n [checked]=\"value\"\n [disabled]=\"disabled\"\n (click)=\"inputRef.blur()\"\n (change)=\"onToggle()\"\n (keydown.space)=\"focus(inputRef)\"\n (keydown.enter)=\"onToggle()\"\n />\n <span class=\"slider\"></span>\n </label>\n</div>\n", styles: [":host{display:block}.wrapper{display:inline-block}.wrapper.withLabel{display:block}.wrapper.withLabel .checkbox{float:right;margin-top:1px}.wrapper.withLabelBehind .checkbox{float:left;margin-right:2px}.disabled{opacity:.5}.disabled .slider{cursor:default}.checkbox{position:relative;display:inline-block;margin:0}.labelText{color:#2a303d}.labelText.off{color:#526179}input{opacity:0;width:0;height:0;margin:0;padding:0}.small.checkbox{width:22px;height:14px}.small.wrapper:not(.withLabel){height:14px}.small .labelText{font-size:12px}.small .slider{border-radius:7px}.small .slider:before{height:12px;width:12px;left:1px;bottom:1px}.small input:checked+.slider:before{transform:translate(8px)}input:focus+.slider:before{box-shadow:0 0 0 6px #0003;transition:box-shadow .2s ease}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#b2bccc;transition:transform .2s}.slider:before{position:absolute;content:\"\";border-radius:50%;background-color:#fff;transition:transform .2s}input:checked+.slider{background-color:#33cc58}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
24
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SliderToggleComponent, decorators: [{
|
25
25
|
type: Component,
|
26
26
|
args: [{ selector: 'lx-slider-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"wrapper\"\n [class.withLabel]=\"label\"\n [class.withLabelBehind]=\"label && !labelInFront\"\n [class.disabled]=\"disabled\"\n [attr.id]=\"id\"\n [class.small]=\"size === 'small'\"\n>\n <span *ngIf=\"label\" class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n <input\n #inputRef\n type=\"checkbox\"\n [checked]=\"value\"\n [disabled]=\"disabled\"\n (click)=\"inputRef.blur()\"\n (change)=\"onToggle()\"\n (keydown.space)=\"focus(inputRef)\"\n (keydown.enter)=\"onToggle()\"\n />\n <span class=\"slider\"></span>\n </label>\n</div>\n", styles: [":host{display:block}.wrapper{display:inline-block}.wrapper.withLabel{display:block}.wrapper.withLabel .checkbox{float:right;margin-top:1px}.wrapper.withLabelBehind .checkbox{float:left;margin-right:2px}.disabled{opacity:.5}.disabled .slider{cursor:default}.checkbox{position:relative;display:inline-block;margin:0}.labelText{color:#2a303d}.labelText.off{color:#526179}input{opacity:0;width:0;height:0;margin:0;padding:0}.small.checkbox{width:22px;height:14px}.small.wrapper:not(.withLabel){height:14px}.small .labelText{font-size:12px}.small .slider{border-radius:7px}.small .slider:before{height:12px;width:12px;left:1px;bottom:1px}.small input:checked+.slider:before{transform:translate(8px)}input:focus+.slider:before{box-shadow:0 0 0 6px #0003;transition:box-shadow .2s ease}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#b2bccc;transition:transform .2s}.slider:before{position:absolute;content:\"\";border-radius:50%;background-color:#fff;transition:transform .2s}input:checked+.slider{background-color:#33cc58}\n"] }]
|
27
27
|
}], propDecorators: { value: [{
|