@leanix/components 0.4.794 → 0.4.796
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -948,7 +948,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
948
948
|
* </table>
|
|
949
949
|
* ```
|
|
950
950
|
*/
|
|
951
|
-
// eslint-disable-next-line @angular-eslint/directive-class-suffix
|
|
952
951
|
class TableComponent {
|
|
953
952
|
constructor() {
|
|
954
953
|
/**
|
|
@@ -3096,7 +3095,7 @@ class TokenizerOverflowPopoverComponent {
|
|
|
3096
3095
|
}
|
|
3097
3096
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TokenizerOverflowPopoverComponent, decorators: [{
|
|
3098
3097
|
type: Component,
|
|
3099
|
-
args: [{ selector: 'lx-tokenizer-overflow-popover', imports: [SatPopoverModule, NgTemplateOutlet],
|
|
3098
|
+
args: [{ selector: 'lx-tokenizer-overflow-popover', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SatPopoverModule, NgTemplateOutlet], template: "<sat-popover\n (backdropClicked)=\"closePopover()\"\n [hasBackdrop]=\"true\"\n [horizontalAlign]=\"horizontalAlign()\"\n [verticalAlign]=\"verticalAlign()\"\n openTransition=\"100ms\"\n closeTransition=\"100ms\"\n>\n @if (popoverTemplate) {\n <div\n class=\"tokenizerPopoverContentWrapper\"\n [class.before]=\"horizontalAlign() === 'before'\"\n [class.after]=\"horizontalAlign() === 'after'\"\n >\n <ng-container *ngTemplateOutlet=\"popoverTemplate; context: { $implicit: startIndex() }\" />\n </div>\n }\n</sat-popover>\n", styles: [".tokenizerPopoverContentWrapper{padding:16px;background:#fff;border-radius:4px;box-shadow:0 8px 14px #5261794d}.tokenizerPopoverContentWrapper.before{margin-right:10px}.tokenizerPopoverContentWrapper.after{margin-left:10px}\n"] }]
|
|
3100
3099
|
}], ctorParameters: () => [], propDecorators: { popoverTemplate: [{
|
|
3101
3100
|
type: ContentChild,
|
|
3102
3101
|
args: ['popoverTemplate']
|
|
@@ -3227,7 +3226,7 @@ class TokenizerComponent {
|
|
|
3227
3226
|
}
|
|
3228
3227
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TokenizerComponent, decorators: [{
|
|
3229
3228
|
type: Component,
|
|
3230
|
-
args: [{ selector: 'lx-tokenizer', imports: [CounterComponent, ButtonComponent, TranslateModule],
|
|
3229
|
+
args: [{ selector: 'lx-tokenizer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CounterComponent, ButtonComponent, TranslateModule], template: "<div #tokensContainer class=\"tokensContainer\">\n <ng-content select=\"lx-token\" />\n @if (showCounter()) {\n <button\n lx-button\n class=\"counterButton\"\n mode=\"ghost\"\n (click)=\"onCounterClicked()\"\n [attr.aria-label]=\"\n NAME + (overflowItemCount() === 1 ? '.showMoreItem' : '.showMoreItems') | translate: { count: overflowItemCount() }\n \"\n >\n <lx-counter #counter aria-hidden=\"true\" [content]=\"'+' + overflowItemCount()\" color=\"gray\" />\n </button>\n }\n</div>\n", styles: [":host{display:flex;align-items:center;white-space:nowrap}:host .counterButton{padding:0;display:flex;align-items:center;margin-left:4px;border-radius:12px}.tokensContainer{display:flex;align-items:center}\n"] }]
|
|
3231
3230
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.DestroyRef }, { type: i0.ChangeDetectorRef }, { type: ResizeObserverService }], propDecorators: { overflowPlaceholderClick: [{
|
|
3232
3231
|
type: Output
|
|
3233
3232
|
}], items: [{
|
|
@@ -3642,7 +3641,7 @@ class BasicDropdownComponent extends KeyboardSelectDirective {
|
|
|
3642
3641
|
}
|
|
3643
3642
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BasicDropdownComponent, decorators: [{
|
|
3644
3643
|
type: Component,
|
|
3645
|
-
args: [{ selector: 'lx-basic-dropdown', providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }],
|
|
3644
|
+
args: [{ selector: 'lx-basic-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], imports: [
|
|
3646
3645
|
NgTemplateOutlet,
|
|
3647
3646
|
CdkOverlayOrigin,
|
|
3648
3647
|
CdkConnectedOverlay,
|
|
@@ -3767,8 +3766,8 @@ class KeyboardActionSourceDirective {
|
|
|
3767
3766
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KeyboardActionSourceDirective, decorators: [{
|
|
3768
3767
|
type: Directive,
|
|
3769
3768
|
args: [{
|
|
3770
|
-
|
|
3771
|
-
|
|
3769
|
+
selector: '[lxKeyboardActionSource]',
|
|
3770
|
+
exportAs: 'keyboardActionSource'
|
|
3772
3771
|
}]
|
|
3773
3772
|
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
3774
3773
|
|
|
@@ -4547,13 +4546,13 @@ __decorate([
|
|
|
4547
4546
|
], CurrencyInputComponent.prototype, "data$", void 0);
|
|
4548
4547
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CurrencyInputComponent, decorators: [{
|
|
4549
4548
|
type: Component,
|
|
4550
|
-
args: [{ selector: 'lx-currency-input', providers: [
|
|
4549
|
+
args: [{ selector: 'lx-currency-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
4551
4550
|
{
|
|
4552
4551
|
provide: NG_VALUE_ACCESSOR,
|
|
4553
4552
|
useExisting: forwardRef(() => CurrencyInputComponent),
|
|
4554
4553
|
multi: true
|
|
4555
4554
|
}
|
|
4556
|
-
],
|
|
4555
|
+
], imports: [CurrencySymbolComponent, MarkInvalidDirective, FormsModule, AsyncPipe, DecimalPipe], template: "@if (mode === 'edit') {\n <div class=\"container input-group\">\n @if (iconPosition === 'first') {\n <div class=\"labelContainer input-group-addon\">\n <lx-currency-symbol [code]=\"code\" />\n </div>\n }\n @if (!showCurrencyInput) {\n <input\n [attr.disabled]=\"disabled ? true : null\"\n type=\"text\"\n class=\"form-control currencyDisplayValue\"\n placeholder=\"{{ placeholder }}\"\n [lxMarkInvalid]=\"markInvalid\"\n [value]=\"dataValue$ | async | number: format\"\n (focus)=\"focusCurrencyInput()\"\n />\n }\n <input\n autocomplete=\"off\"\n [attr.disabled]=\"disabled ? true : null\"\n [class.hideInput]=\"!showCurrencyInput\"\n type=\"text\"\n inputmode=\"numeric\"\n class=\"form-control currencyInput\"\n name=\"inputAmount\"\n [attr.id]=\"inputId\"\n #currencyInput\n placeholder=\"{{ placeholder }}\"\n [ngModel]=\"dataValue$ | async\"\n (blur)=\"onBlur()\"\n (ngModelChange)=\"valueChanged($event)\"\n />\n @if (iconPosition === 'end') {\n <div class=\"labelContainer input-group-addon\">\n <lx-currency-symbol [code]=\"code\" />\n </div>\n }\n </div>\n} @else if (mode === 'view') {\n <span [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n @if (iconPosition === 'first') {\n <lx-currency-symbol [code]=\"code\" />\n }\n {{ (dataValue$ | async | number: format) || placeholder }}\n @if (iconPosition === 'end') {\n <lx-currency-symbol [code]=\"code\" />\n }\n </span>\n}\n", styles: [".container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}input.hideInput{display:none}.placeholder{color:#99a5bb}\n"] }]
|
|
4557
4556
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { code: [{
|
|
4558
4557
|
type: Input
|
|
4559
4558
|
}], decimalSeparator: [{
|
|
@@ -6883,7 +6882,7 @@ class MultiSelectSelectionComponent extends KeyboardSelectDirective {
|
|
|
6883
6882
|
}
|
|
6884
6883
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MultiSelectSelectionComponent, decorators: [{
|
|
6885
6884
|
type: Component,
|
|
6886
|
-
args: [{ selector: 'lx-multi-select-selection', imports: [AsyncPipe, NgTemplateOutlet, SelectableItemDirective, TokenizerComponent, TokenComponent],
|
|
6885
|
+
args: [{ selector: 'lx-multi-select-selection', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, NgTemplateOutlet, SelectableItemDirective, TokenizerComponent, TokenComponent], template: "<ul>\n <lx-tokenizer [active]=\"tokenize()\">\n @for (selectedItem of selection(); track $index) {\n <lx-token>\n <li\n lxSelectableItem\n #item\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n (select)=\"removeItem.emit(selectedItem)\"\n >\n <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: selectedItem }\" />\n </li>\n </lx-token>\n }\n </lx-tokenizer>\n</ul>\n", styles: [":host{display:block;overflow:hidden;overflow-x:auto;scrollbar-width:none}ul{display:block;margin:0!important;padding:0!important}li{display:inline}\n"] }]
|
|
6887
6886
|
}], propDecorators: { removeItem: [{
|
|
6888
6887
|
type: Output
|
|
6889
6888
|
}], selectionTemplate: [{
|
|
@@ -7152,7 +7151,7 @@ class MultiSelectComponent extends BaseSelectDirective {
|
|
|
7152
7151
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
7153
7152
|
multi: true
|
|
7154
7153
|
}
|
|
7155
|
-
], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selectionTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "selectionElement", first: true, predicate: MultiSelectSelectionComponent, descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (dropdownOpen) {\n <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.focused]=\"isInputFocused\"\n [class.tokenized]=\"tokenize\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n [class.hasSelection]=\"selection && selection.length > 0\"\n [class.smallSize]=\"size === 'small'\"\n [class.disabled]=\"disabled\"\n (click)=\"handleClick($event.target ===
|
|
7154
|
+
], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selectionTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "selectionElement", first: true, predicate: MultiSelectSelectionComponent, descendants: true, read: ElementRef }, { propertyName: "toggleElement", first: true, predicate: ["toggle"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (dropdownOpen) {\n <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.focused]=\"isInputFocused\"\n [class.tokenized]=\"tokenize\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n [class.hasSelection]=\"selection && selection.length > 0\"\n [class.smallSize]=\"size === 'small'\"\n [class.disabled]=\"disabled\"\n (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n <div class=\"selectedChoicesContainer\">\n @if ((selection?.length === 0 || !selection) && !queryControl?.value) {\n <div class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n }\n @if (selectionTemplate) {\n <div class=\"selectionAndInput\">\n <lx-multi-select-selection\n [selection]=\"selection\"\n [tokenize]=\"tokenize\"\n [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n >\n <ng-template #innerSelectionTemplate let-option>\n <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n </ng-template>\n </lx-multi-select-selection>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n </div>\n } @else {\n <div class=\"selection\">\n <ng-content select=\".pills\" />\n </div>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n }\n @if (!disabled) {\n <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n }\n </div>\n <div class=\"optionsContainer\" #optionsContainer>\n @if (dropdownOpen) {\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n }\n </div>\n</div>\n\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:#fff}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .selectionAndInput{display:flex}.selectContainer.tokenized lx-multi-select-selection{flex-grow:1}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}lx-responsive-input{height:29px}.backdrop{z-index:1048;position:fixed;inset:0}\n"], dependencies: [{ kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: MultiSelectSelectionComponent, selector: "lx-multi-select-selection", inputs: ["selection", "tokenize"], outputs: ["removeItem"] }, { kind: "component", type: ResponsiveInputComponent, selector: "lx-responsive-input", inputs: ["inputId"], outputs: ["focus", "focusViaTab", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }] }); }
|
|
7156
7155
|
}
|
|
7157
7156
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
|
7158
7157
|
type: Component,
|
|
@@ -7169,8 +7168,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
7169
7168
|
FormsModule,
|
|
7170
7169
|
ReactiveFormsModule,
|
|
7171
7170
|
NgTemplateOutlet,
|
|
7172
|
-
AsyncPipe
|
|
7173
|
-
|
|
7171
|
+
AsyncPipe,
|
|
7172
|
+
IconComponent$1
|
|
7173
|
+
], template: "@if (dropdownOpen) {\n <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.focused]=\"isInputFocused\"\n [class.tokenized]=\"tokenize\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n [class.hasSelection]=\"selection && selection.length > 0\"\n [class.smallSize]=\"size === 'small'\"\n [class.disabled]=\"disabled\"\n (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n <div class=\"selectedChoicesContainer\">\n @if ((selection?.length === 0 || !selection) && !queryControl?.value) {\n <div class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n }\n @if (selectionTemplate) {\n <div class=\"selectionAndInput\">\n <lx-multi-select-selection\n [selection]=\"selection\"\n [tokenize]=\"tokenize\"\n [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n >\n <ng-template #innerSelectionTemplate let-option>\n <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n </ng-template>\n </lx-multi-select-selection>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n </div>\n } @else {\n <div class=\"selection\">\n <ng-content select=\".pills\" />\n </div>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n }\n @if (!disabled) {\n <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n }\n </div>\n <div class=\"optionsContainer\" #optionsContainer>\n @if (dropdownOpen) {\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n }\n </div>\n</div>\n\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:#fff}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .selectionAndInput{display:flex}.selectContainer.tokenized lx-multi-select-selection{flex-grow:1}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}lx-responsive-input{height:29px}.backdrop{z-index:1048;position:fixed;inset:0}\n"] }]
|
|
7174
7174
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { markInvalid: [{
|
|
7175
7175
|
type: Input
|
|
7176
7176
|
}], selection: [{
|
|
@@ -7200,6 +7200,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
7200
7200
|
}], selectionElement: [{
|
|
7201
7201
|
type: ViewChild,
|
|
7202
7202
|
args: [MultiSelectSelectionComponent, { read: ElementRef }]
|
|
7203
|
+
}], toggleElement: [{
|
|
7204
|
+
type: ViewChild,
|
|
7205
|
+
args: ['toggle', { read: ElementRef }]
|
|
7203
7206
|
}] } });
|
|
7204
7207
|
|
|
7205
7208
|
/**
|
|
@@ -7260,7 +7263,7 @@ class OptionGroupDropdownComponent extends KeyboardSelectDirective {
|
|
|
7260
7263
|
}
|
|
7261
7264
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: OptionGroupDropdownComponent, decorators: [{
|
|
7262
7265
|
type: Component,
|
|
7263
|
-
args: [{ selector: 'lx-option-group-dropdown', providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }],
|
|
7266
|
+
args: [{ selector: 'lx-option-group-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], imports: [
|
|
7264
7267
|
CdkOverlayOrigin,
|
|
7265
7268
|
CdkConnectedOverlay,
|
|
7266
7269
|
NgClass,
|
|
@@ -8026,13 +8029,13 @@ class PickerComponent {
|
|
|
8026
8029
|
}
|
|
8027
8030
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PickerComponent, decorators: [{
|
|
8028
8031
|
type: Component,
|
|
8029
|
-
args: [{ selector: 'lx-picker', providers: [
|
|
8032
|
+
args: [{ selector: 'lx-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
8030
8033
|
{
|
|
8031
8034
|
provide: NG_VALUE_ACCESSOR,
|
|
8032
8035
|
multi: true,
|
|
8033
8036
|
useExisting: forwardRef(() => PickerComponent)
|
|
8034
8037
|
}
|
|
8035
|
-
],
|
|
8038
|
+
], imports: [AutocloseDirective], template: "<div class=\"pickerContainer\">\n <ng-content select=\"[lxPickerTrigger]\" />\n @if (open) {\n <ul\n class=\"pickerOptions\"\n lxAutoclose\n (autoclose)=\"closePicker()\"\n role=\"listbox\"\n [style.margin-left]=\"leftOffset\"\n [attr.aria-activedescendant]=\"activeDescendantsId\"\n [attr.aria-label]=\"listBoxAriaLabel\"\n [attr.aria-labelledby]=\"listBoxAriaLabelledBy\"\n >\n <ng-content />\n </ul>\n }\n</div>\n", styles: [":host{display:inline-block;width:100%;position:relative}.pickerOptions{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;padding:4px;z-index:20;width:185px}\n"] }]
|
|
8036
8039
|
}], ctorParameters: () => [{ type: i1$6.Directionality }, { type: i0.ChangeDetectorRef }], propDecorators: { listBoxAriaLabel: [{
|
|
8037
8040
|
type: Input
|
|
8038
8041
|
}], listBoxAriaLabelledBy: [{
|
|
@@ -9649,7 +9652,7 @@ class TableBubbleMenuComponent {
|
|
|
9649
9652
|
}
|
|
9650
9653
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableBubbleMenuComponent, decorators: [{
|
|
9651
9654
|
type: Component,
|
|
9652
|
-
args: [{ selector: 'lx-table-bubble-menu', imports: [TranslatePipe],
|
|
9655
|
+
args: [{ selector: 'lx-table-bubble-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslatePipe], template: "<div #bubbleMenuRow class=\"bubble-menu-row\">\n <button (click)=\"editor.chain().focus().addRowBefore().run()\">{{ NAME + '.addRowBefore' | translate }}</button>\n <button (click)=\"editor.chain().focus().addRowAfter().run()\">{{ NAME + '.addRowAfter' | translate }}</button>\n <button (click)=\"editor.chain().focus().deleteRow().run()\">{{ NAME + '.deleteRow' | translate }}</button>\n</div>\n\n<div #bubbleMenuColumn class=\"bubble-menu-column\">\n <button (click)=\"editor.chain().focus().addColumnBefore().run()\">{{ NAME + '.addColumnBefore' | translate }}</button>\n <button (click)=\"editor.chain().focus().addColumnAfter().run()\">{{ NAME + '.addColumnAfter' | translate }}</button>\n <button (click)=\"editor.chain().focus().deleteColumn().run()\">{{ NAME + '.deleteColumn' | translate }}</button>\n</div>\n\n<div #bubbleMenuTable class=\"bubble-menu-table\">\n <button (click)=\"editor.chain().focus().addRowAfter().run()\">{{ NAME + '.addRow' | translate }}</button>\n <button (click)=\"editor.chain().focus().addColumnAfter().run()\">{{ NAME + '.addColumn' | translate }}</button>\n <button (click)=\"editor.chain().focus().deleteTable().run()\">{{ NAME + '.deleteTable' | translate }}</button>\n</div>\n", styles: [".bubble-menu-column,.bubble-menu-row,.bubble-menu-table{display:flex;flex-direction:column;background:#fff;border:1px solid #e1e5eb;border-radius:3px;z-index:10;box-shadow:0 8px 12px 2px #00000026;min-width:160px}.bubble-menu-column button,.bubble-menu-row button,.bubble-menu-table button{background:none;border:none;padding:8px;text-align:left;width:100%;font-size:var(--lxFontSize);color:#2a303d;cursor:pointer;border-radius:3px;transition:background-color .2s}.bubble-menu-column button:hover,.bubble-menu-row button:hover,.bubble-menu-table button:hover{background-color:#e1e5eb}\n"] }]
|
|
9653
9656
|
}], propDecorators: { editor: [{
|
|
9654
9657
|
type: Input,
|
|
9655
9658
|
args: [{ required: true }]
|
|
@@ -10539,7 +10542,7 @@ class LinkModalComponent {
|
|
|
10539
10542
|
}
|
|
10540
10543
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: LinkModalComponent, decorators: [{
|
|
10541
10544
|
type: Component,
|
|
10542
|
-
args: [{ selector: 'lx-link-modal', imports: [
|
|
10545
|
+
args: [{ selector: 'lx-link-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
10543
10546
|
ModalComponent,
|
|
10544
10547
|
ModalHeaderComponent,
|
|
10545
10548
|
ModalFooterComponent,
|
|
@@ -10550,7 +10553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
10550
10553
|
ErrorMessageComponent,
|
|
10551
10554
|
MarkInvalidDirective,
|
|
10552
10555
|
AutofocusDirective
|
|
10553
|
-
],
|
|
10556
|
+
], template: "<lx-modal size=\"dialog\" [open]=\"true\" (close)=\"closeModal()\">\n <lx-modal-header [title]=\"NAME + '.link' | translate\" />\n\n <form #form=\"ngForm\" (submit)=\"saveLink()\">\n <div class=\"link-modal-body\">\n <div class=\"form-group required\">\n <label for=\"text\">{{ NAME + '.linkText' | translate }}</label>\n <input\n #titleInput=\"ngModel\"\n class=\"form-control\"\n name=\"text\"\n type=\"text\"\n [ngModel]=\"text\"\n [lxAutofocus]=\"true\"\n [lxAutofocusTimeout]=\"10\"\n [lxMarkInvalid]=\"form.submitted && titleInput.control.touched && titleInput.hasError('required')\"\n required\n />\n </div>\n\n <div class=\"form-group required\">\n <label for=\"url\">{{ NAME + '.url' | translate }}</label>\n <input\n #urlInput=\"ngModel\"\n class=\"form-control\"\n name=\"url\"\n type=\"text\"\n [ngModel]=\"url\"\n [lxMarkInvalid]=\"form.submitted && urlInput.control.touched && urlInput.hasError('invalidUrl')\"\n lxUrl\n />\n @if (form.submitted && urlInput.control.touched && urlInput.hasError('invalidUrl')) {\n <lx-error-message>\n {{ NAME + '.invalidUrl' | translate }}\n </lx-error-message>\n }\n </div>\n </div>\n\n <lx-modal-footer>\n <div class=\"link-modal-actions\">\n <div class=\"link-modal-left-buttons\">\n @if (url) {\n <button lx-button type=\"button\" size=\"large\" color=\"danger\" (click)=\"removeLink()\">\n {{ NAME + '.removeLink' | translate }}\n </button>\n }\n </div>\n\n <div class=\"link-modal-right-buttons\">\n <button lx-button type=\"button\" size=\"large\" (click)=\"closeModal()\">\n {{ NAME + '.cancel' | translate }}\n </button>\n <button lx-button type=\"submit\" [disabled]=\"!titleInput.control.value || !urlInput.control.value\" color=\"primary\" size=\"large\">\n {{ NAME + '.ok' | translate }}\n </button>\n </div>\n </div>\n </lx-modal-footer>\n </form>\n</lx-modal>\n", styles: [".link-modal-body{display:flex;flex-direction:column;padding:20px 64px}.link-modal-actions{display:flex;justify-content:space-between}.link-modal-right-buttons{display:flex;gap:10px}\n"] }]
|
|
10554
10557
|
}], propDecorators: { editor: [{
|
|
10555
10558
|
type: Input,
|
|
10556
10559
|
args: [{ required: true }]
|
|
@@ -10599,7 +10602,7 @@ class RichTextEditorToolbarComponent {
|
|
|
10599
10602
|
}
|
|
10600
10603
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RichTextEditorToolbarComponent, decorators: [{
|
|
10601
10604
|
type: Component,
|
|
10602
|
-
args: [{ selector: 'lx-rich-text-editor-toolbar', imports: [
|
|
10605
|
+
args: [{ selector: 'lx-rich-text-editor-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
10603
10606
|
OptionsDropdownComponent,
|
|
10604
10607
|
ButtonComponent,
|
|
10605
10608
|
KeyboardActionSourceDirective,
|
|
@@ -10608,7 +10611,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
10608
10611
|
TranslatePipe,
|
|
10609
10612
|
LinkModalComponent,
|
|
10610
10613
|
TooltipDirective
|
|
10611
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"toolbar\" [class.toolbarHidden]=\"!isToolbarVisible()\">\n <div class=\"toolbarItemGroup\">\n @if ('heading' | lxExtensionEnabled: editor) {\n <lx-options-dropdown>\n <button\n class=\"toolbarItem toolbar-heading\"\n lxKeyboardActionSource\n lx-button\n [lxTooltip]=\"NAME + '.textStyles' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [square]=\"false\"\n [pressed]=\"editor.isActive('heading') || editor.isActive('paragraph')\"\n endIcon=\"fa-angle-down\"\n [disabled]=\"!editor.isActive('heading') && !editor.isActive('paragraph')\"\n >\n {{\n editor.isActive('heading')\n ? `${(NAME + '.heading' | translate)} ${editor.getAttributes('heading')['level']}`\n : `${(NAME + '.paragraph' | translate)}`\n }}\n </button>\n\n @for (level of headingLevels; track headingLevels) {\n <lx-option\n (select)=\"editor.chain().setHeading({ level }).focus().run()\"\n [hasSelectedState]=\"editor.isActive('heading', { level })\"\n [selected]=\"editor.isActive('heading', { level })\"\n >\n @if (!editor.isActive('heading', { level })) {\n <i class=\"far fa-heading dropdown-icon\"></i>\n }\n <span>{{ NAME + '.headingOption' | translate }} {{ level }}</span>\n </lx-option>\n }\n\n <lx-option\n (select)=\"this.editor.chain().setParagraph().focus().run()\"\n [hasSelectedState]=\"editor.isActive('paragraph')\"\n [selected]=\"editor.isActive('paragraph')\"\n >\n @if (!editor.isActive('paragraph')) {\n <i class=\"far fa-paragraph dropdown-icon\"></i>\n }\n <span>{{ NAME + '.paragraphOption' | translate }}</span>\n </lx-option>\n </lx-options-dropdown>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('bold' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.bold' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.bold' | translate\"\n [disabled]=\"editor.isActive('header')\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleBold().focus().run()\"\n [pressed]=\"editor.isActive('bold')\"\n icon=\"fa-bold\"\n ></button>\n }\n\n @if ('italic' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.italic' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.italic' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleItalic().focus().run()\"\n [pressed]=\"editor.isActive('italic')\"\n icon=\"fa-italic\"\n ></button>\n }\n\n @if ('underline' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.underline' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.underline' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleUnderline().focus().run()\"\n [pressed]=\"editor.isActive('underline')\"\n icon=\"fa-underline\"\n ></button>\n }\n\n @if ('strike' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.strikethrough' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.strikethrough' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleStrike().focus().run()\"\n [pressed]=\"editor.isActive('strike')\"\n icon=\"fa-strikethrough\"\n ></button>\n }\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('bulletList' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.bulletList' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.bulletList' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleBulletList().run()\"\n [pressed]=\"editor.isActive('listItem')\"\n icon=\"fa-list\"\n ></button>\n }\n\n @if ('orderedList' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.numberedList' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.numberedList' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleOrderedList().run()\"\n [pressed]=\"editor.isActive('orderedList')\"\n icon=\"fa-list-ol\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('textAlign' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignLeft' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignLeft' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('left').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'left' })\"\n icon=\"fa-align-left\"\n ></button>\n\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignCenter' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignCenter' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('center').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'center' })\"\n icon=\"fa-align-center\"\n ></button>\n\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignRight' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignRight' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('right').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'right' })\"\n icon=\"fa-align-right\"\n ></button>\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignBlock' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignBlock' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'justify' })\"\n icon=\"fa-align-justify\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('link' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.link' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.link' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().openLinkModal().run()\"\n [pressed]=\"editor.isActive('link')\"\n icon=\"fa-link\"\n ></button>\n <span class=\"separator\"></span>\n }\n </div>\n\n @let tableEnabled = 'table' | lxExtensionEnabled: editor;\n @let codeEnabled = 'codeBlock' | lxExtensionEnabled: editor;\n\n @if (tableEnabled || codeEnabled) {\n <div class=\"toolbarItemGroup\">\n @if (codeEnabled) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.code' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.code' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().setCodeBlock().run()\"\n [pressed]=\"editor.isActive('codeBlock')\"\n icon=\"fa-code\"\n ></button>\n }\n\n @if ('lxDiagram' | lxExtensionEnabled: editor) {\n <ng-content select=\".diagram-btn\" />\n }\n\n @if (tableEnabled) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.insertTable' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.insertTable' | translate\"\n [square]=\"true\"\n (click)=\"insertTable()\"\n [pressed]=\"editor.isActive('table')\"\n icon=\"fa-table\"\n [disabled]=\"editor.isActive('table')\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n }\n</div>\n\n@if (('link' | lxExtensionEnabled: editor) && isLinkModalOpenSignal()) {\n <lx-link-modal [editor]=\"editor\" />\n}\n", styles: [":host{width:100%;display:flex}.toolbar{display:flex;flex-wrap:wrap;width:100%;border-bottom:#99a5bb 1px solid;transition:all .18s ease-out;opacity:1;height:auto;padding:8px}.toolbar.toolbarHidden{opacity:0;height:0!important;padding:0}.toolbar .toolbarItemGroup{display:flex;align-items:center;gap:2px}.toolbar .toolbarItemGroup:not(.toolbarItemGroup:has(.toolbarItem)){display:none}.toolbar .toolbarItemGroup:last-child .separator{display:none}.toolbar .dropdown-icon{margin-left:-4px;margin-right:8px}.toolbar .toolbar-heading{width:100px}.toolbar .toolbarItem{text-wrap:nowrap;color:#2a303d;border:none;height:24px}.toolbar .toolbarItem:hover:not(disabled){border:none}.toolbar .toolbarItem.pressed{background:#f0f2f5!important}.toolbar .toolbarItem.square{border:none!important}.toolbar .separator{width:1px;height:16px;margin:0 4px 0 2px;border:#c2c9d6 .5px solid}\n"] }]
|
|
10614
|
+
], template: "<div class=\"toolbar\" [class.toolbarHidden]=\"!isToolbarVisible()\">\n <div class=\"toolbarItemGroup\">\n @if ('heading' | lxExtensionEnabled: editor) {\n <lx-options-dropdown>\n <button\n class=\"toolbarItem toolbar-heading\"\n lxKeyboardActionSource\n lx-button\n [lxTooltip]=\"NAME + '.textStyles' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [square]=\"false\"\n [pressed]=\"editor.isActive('heading') || editor.isActive('paragraph')\"\n endIcon=\"fa-angle-down\"\n [disabled]=\"!editor.isActive('heading') && !editor.isActive('paragraph')\"\n >\n {{\n editor.isActive('heading')\n ? `${(NAME + '.heading' | translate)} ${editor.getAttributes('heading')['level']}`\n : `${(NAME + '.paragraph' | translate)}`\n }}\n </button>\n\n @for (level of headingLevels; track headingLevels) {\n <lx-option\n (select)=\"editor.chain().setHeading({ level }).focus().run()\"\n [hasSelectedState]=\"editor.isActive('heading', { level })\"\n [selected]=\"editor.isActive('heading', { level })\"\n >\n @if (!editor.isActive('heading', { level })) {\n <i class=\"far fa-heading dropdown-icon\"></i>\n }\n <span>{{ NAME + '.headingOption' | translate }} {{ level }}</span>\n </lx-option>\n }\n\n <lx-option\n (select)=\"this.editor.chain().setParagraph().focus().run()\"\n [hasSelectedState]=\"editor.isActive('paragraph')\"\n [selected]=\"editor.isActive('paragraph')\"\n >\n @if (!editor.isActive('paragraph')) {\n <i class=\"far fa-paragraph dropdown-icon\"></i>\n }\n <span>{{ NAME + '.paragraphOption' | translate }}</span>\n </lx-option>\n </lx-options-dropdown>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('bold' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.bold' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.bold' | translate\"\n [disabled]=\"editor.isActive('header')\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleBold().focus().run()\"\n [pressed]=\"editor.isActive('bold')\"\n icon=\"fa-bold\"\n ></button>\n }\n\n @if ('italic' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.italic' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.italic' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleItalic().focus().run()\"\n [pressed]=\"editor.isActive('italic')\"\n icon=\"fa-italic\"\n ></button>\n }\n\n @if ('underline' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.underline' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.underline' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleUnderline().focus().run()\"\n [pressed]=\"editor.isActive('underline')\"\n icon=\"fa-underline\"\n ></button>\n }\n\n @if ('strike' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.strikethrough' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.strikethrough' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleStrike().focus().run()\"\n [pressed]=\"editor.isActive('strike')\"\n icon=\"fa-strikethrough\"\n ></button>\n }\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('bulletList' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.bulletList' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.bulletList' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleBulletList().run()\"\n [pressed]=\"editor.isActive('listItem')\"\n icon=\"fa-list\"\n ></button>\n }\n\n @if ('orderedList' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.numberedList' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.numberedList' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleOrderedList().run()\"\n [pressed]=\"editor.isActive('orderedList')\"\n icon=\"fa-list-ol\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('textAlign' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignLeft' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignLeft' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('left').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'left' })\"\n icon=\"fa-align-left\"\n ></button>\n\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignCenter' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignCenter' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('center').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'center' })\"\n icon=\"fa-align-center\"\n ></button>\n\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignRight' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignRight' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('right').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'right' })\"\n icon=\"fa-align-right\"\n ></button>\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignBlock' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignBlock' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'justify' })\"\n icon=\"fa-align-justify\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('link' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.link' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.link' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().openLinkModal().run()\"\n [pressed]=\"editor.isActive('link')\"\n icon=\"fa-link\"\n ></button>\n <span class=\"separator\"></span>\n }\n </div>\n\n @let tableEnabled = 'table' | lxExtensionEnabled: editor;\n @let codeEnabled = 'codeBlock' | lxExtensionEnabled: editor;\n\n @if (tableEnabled || codeEnabled) {\n <div class=\"toolbarItemGroup\">\n @if (codeEnabled) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.code' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.code' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().setCodeBlock().run()\"\n [pressed]=\"editor.isActive('codeBlock')\"\n icon=\"fa-code\"\n ></button>\n }\n\n @if ('lxDiagram' | lxExtensionEnabled: editor) {\n <ng-content select=\".diagram-btn\" />\n }\n\n @if (tableEnabled) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.insertTable' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.insertTable' | translate\"\n [square]=\"true\"\n (click)=\"insertTable()\"\n [pressed]=\"editor.isActive('table')\"\n icon=\"fa-table\"\n [disabled]=\"editor.isActive('table')\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n }\n</div>\n\n@if (('link' | lxExtensionEnabled: editor) && isLinkModalOpenSignal()) {\n <lx-link-modal [editor]=\"editor\" />\n}\n", styles: [":host{width:100%;display:flex}.toolbar{display:flex;flex-wrap:wrap;width:100%;border-bottom:#99a5bb 1px solid;transition:all .18s ease-out;opacity:1;height:auto;padding:8px}.toolbar.toolbarHidden{opacity:0;height:0!important;padding:0}.toolbar .toolbarItemGroup{display:flex;align-items:center;gap:2px}.toolbar .toolbarItemGroup:not(.toolbarItemGroup:has(.toolbarItem)){display:none}.toolbar .toolbarItemGroup:last-child .separator{display:none}.toolbar .dropdown-icon{margin-left:-4px;margin-right:8px}.toolbar .toolbar-heading{width:100px}.toolbar .toolbarItem{text-wrap:nowrap;color:#2a303d;border:none;height:24px}.toolbar .toolbarItem:hover:not(disabled){border:none}.toolbar .toolbarItem.pressed{background:#f0f2f5!important}.toolbar .toolbarItem.square{border:none!important}.toolbar .separator{width:1px;height:16px;margin:0 4px 0 2px;border:#c2c9d6 .5px solid}\n"] }]
|
|
10612
10615
|
}], propDecorators: { editor: [{
|
|
10613
10616
|
type: Input,
|
|
10614
10617
|
args: [{ required: true }]
|
|
@@ -10681,14 +10684,11 @@ class RichTextEditorComponent {
|
|
|
10681
10684
|
}
|
|
10682
10685
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RichTextEditorComponent, decorators: [{
|
|
10683
10686
|
type: Component,
|
|
10684
|
-
args: [{ selector: 'lx-rich-text-editor', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
10685
|
-
|
|
10686
|
-
|
|
10687
|
-
|
|
10688
|
-
|
|
10689
|
-
ExtensionEnabledPipe,
|
|
10690
|
-
TruncateButtonComponent
|
|
10691
|
-
], hostDirectives: [
|
|
10687
|
+
args: [{ selector: 'lx-rich-text-editor', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
10688
|
+
'[style.--editor-max-height]': 'maxHeight()',
|
|
10689
|
+
'(focusin)': 'onFocusIn()',
|
|
10690
|
+
'(focusout)': 'onFocusOut($event)'
|
|
10691
|
+
}, hostDirectives: [
|
|
10692
10692
|
{
|
|
10693
10693
|
directive: TipTapEditorDirective,
|
|
10694
10694
|
inputs: ['outputFormat', 'additionalFeatures', 'ariaLabelledBy', 'customExtensions', 'mode']
|
|
@@ -10704,11 +10704,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
10704
10704
|
useExisting: forwardRef(() => RichTextEditorComponent),
|
|
10705
10705
|
multi: true
|
|
10706
10706
|
}
|
|
10707
|
-
],
|
|
10708
|
-
|
|
10709
|
-
|
|
10710
|
-
|
|
10711
|
-
|
|
10707
|
+
], imports: [
|
|
10708
|
+
EditorDirective,
|
|
10709
|
+
FormsModule,
|
|
10710
|
+
RichTextEditorToolbarComponent,
|
|
10711
|
+
TableBubbleMenuComponent,
|
|
10712
|
+
ExtensionEnabledPipe,
|
|
10713
|
+
TruncateButtonComponent
|
|
10714
|
+
], template: "<div [class.viewMode]=\"mode() === 'view'\" [class.editMode]=\"mode() === 'edit'\" [class.disabled]=\"disabled\">\n @if (mode() === 'edit' && !disabled) {\n <lx-rich-text-editor-toolbar (mousedown)=\"$event.preventDefault()\" [editor]=\"editor()\" [isVisible]=\"toolbarVisibility()\">\n <ng-content select=\".diagram-btn\" ngProjectAs=\".diagram-btn\" />\n </lx-rich-text-editor-toolbar>\n }\n\n <tiptap-editor\n [editor]=\"editor()\"\n [outputFormat]=\"outputFormat()\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onChange($event)\"\n (blur)=\"blur.emit()\"\n [disabled]=\"mode() === 'view' || disabled\"\n />\n\n @if (('truncate' | lxExtensionEnabled: editor()) && mode() === 'view') {\n <lx-truncate-button [editor]=\"editor()\" />\n }\n</div>\n\n@if ('table' | lxExtensionEnabled: editor()) {\n <lx-table-bubble-menu [editor]=\"editor()\" />\n}\n\n<ng-content />\n", styles: [":host{display:flex;width:100%}.editorButton{margin:0 5px}.editMode{width:100%;border:1px solid #99a5bb;background-color:#fff;border-radius:2px}:host ::ng-deep .editMode .ProseMirror{padding:15px 18.9px;resize:vertical;max-height:var(--editor-max-height, auto)}.viewMode{width:100%}.disabled{background-color:#f0f2f5;color:#61779d}:host ::ng-deep .ProseMirror{outline-width:0;border-radius:2px;overflow:auto}:host ::ng-deep .ProseMirror-gapcursor:after{width:1px;height:14px;border-left:1px solid #000}:host ::ng-deep .ProseMirror p:first-child{margin-top:0}:host ::ng-deep .ProseMirror p:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1:first-child,:host ::ng-deep .ProseMirror h2:first-child,:host ::ng-deep .ProseMirror h3:first-child,:host ::ng-deep .ProseMirror h4:first-child,:host ::ng-deep .ProseMirror h5:first-child,:host ::ng-deep .ProseMirror h6:first-child{margin-top:0}:host ::ng-deep .ProseMirror h1:last-child,:host ::ng-deep .ProseMirror h2:last-child,:host ::ng-deep .ProseMirror h3:last-child,:host ::ng-deep .ProseMirror h4:last-child,:host ::ng-deep .ProseMirror h5:last-child,:host ::ng-deep .ProseMirror h6:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1{font-size:var(--lxFontHeader1Size)}:host ::ng-deep .ProseMirror h2{font-size:var(--lxFontHeader2Size)}:host ::ng-deep .ProseMirror h3{font-size:var(--lxFontHeader3Size)}:host ::ng-deep .ProseMirror h4{font-size:var(--lxFontHeader4Size)}:host ::ng-deep .ProseMirror .tableWrapper{margin:20px 0}:host ::ng-deep .ProseMirror .tableWrapper h1,:host ::ng-deep .ProseMirror .tableWrapper h2,:host ::ng-deep .ProseMirror .tableWrapper h3,:host ::ng-deep .ProseMirror .tableWrapper h4,:host ::ng-deep .ProseMirror .tableWrapper h5,:host ::ng-deep .ProseMirror .tableWrapper h6{margin-top:0}:host ::ng-deep .ProseMirror .tableWrapper table{border-collapse:collapse;margin:0;table-layout:fixed;width:100%}:host ::ng-deep .ProseMirror .tableWrapper table th,:host ::ng-deep .ProseMirror .tableWrapper table td{border:1px solid #c2c9d6;box-sizing:border-box;min-width:1em;padding:12px;position:relative;vertical-align:top}:host ::ng-deep .ProseMirror .tableWrapper table th>*,:host ::ng-deep .ProseMirror .tableWrapper table td>*{margin-bottom:0}:host ::ng-deep .ProseMirror .tableWrapper table th{background-color:#c2c9d6;font-weight:700;text-align:left}:host ::ng-deep .ProseMirror .tableWrapper table p{margin:0}:host ::ng-deep .ProseMirror .tableWrapper table .selectedCell:after{content:\"\";position:absolute;inset:0;pointer-events:none;z-index:2}:host ::ng-deep .ProseMirror .tableWrapper table .column-resize-handle{background-color:#b2bccc;bottom:-2px;right:-2px;position:absolute;top:0;width:4px;pointer-events:none}:host ::ng-deep .ProseMirror .selectedCell{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column,:host ::ng-deep .ProseMirror .selector-row{all:unset;display:flex;align-items:center;justify-content:center;background-color:#f0f2f5;cursor:pointer;position:absolute;z-index:10;margin-left:-1px;margin-top:-.5px}:host ::ng-deep .ProseMirror .selector-column:hover,:host ::ng-deep .ProseMirror .selector-row:hover{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column{width:calc(100% + 1px);border-left:1px solid #e1e5eb;height:11px;top:-11px;left:0}:host ::ng-deep .ProseMirror .selector-column.first{border-left:none}:host ::ng-deep .ProseMirror .selector-column.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-column.selected:before{content:\"\";border-bottom:2px dotted #fff;width:.6rem}:host ::ng-deep .ProseMirror .selector-column:hover:before{content:\"\";border-bottom:2px dotted #61779d;width:.6rem}:host ::ng-deep .ProseMirror .selector-column.selected:before{border-bottom:2px dotted #fff}:host ::ng-deep .ProseMirror .selector-row{height:calc(100% + 1px);border-top:1px solid #e1e5eb;width:11px;left:-11px;top:0}:host ::ng-deep .ProseMirror .selector-row.first{border-top:none}:host ::ng-deep .ProseMirror .selector-row.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-row.selected:before{content:\"\";border-left:2px dotted #fff;height:.575rem}:host ::ng-deep .ProseMirror .selector-row:hover:before{content:\"\";border-left:2px dotted #61779d;height:.575rem}:host ::ng-deep .ProseMirror .selector-row.selected:before{border-left:2px dotted #fff}:host ::ng-deep .ProseMirror li p{margin:0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:24px}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}\n"] }]
|
|
10712
10715
|
}] });
|
|
10713
10716
|
|
|
10714
10717
|
class FocusEditorDirective {
|
|
@@ -11477,8 +11480,8 @@ __decorate([
|
|
|
11477
11480
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PopoverClickDirective, decorators: [{
|
|
11478
11481
|
type: Directive,
|
|
11479
11482
|
args: [{
|
|
11480
|
-
|
|
11481
|
-
|
|
11483
|
+
selector: '[lxPopoverClick]',
|
|
11484
|
+
exportAs: 'clickAnchor'
|
|
11482
11485
|
}]
|
|
11483
11486
|
}], ctorParameters: () => [{ type: i1$2.SatPopoverAnchorDirective }], propDecorators: { lxPopoverPinned: [{
|
|
11484
11487
|
type: Input
|
|
@@ -11553,8 +11556,8 @@ class PopoverHoverDirective {
|
|
|
11553
11556
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PopoverHoverDirective, decorators: [{
|
|
11554
11557
|
type: Directive,
|
|
11555
11558
|
args: [{
|
|
11556
|
-
|
|
11557
|
-
|
|
11559
|
+
selector: '[lxPopoverHover]',
|
|
11560
|
+
exportAs: 'hoverAnchor'
|
|
11558
11561
|
}]
|
|
11559
11562
|
}], ctorParameters: () => [{ type: i1$2.SatPopoverAnchorDirective }], propDecorators: { lxPopoverHover: [{
|
|
11560
11563
|
type: Input
|