@leanix/components 0.4.784 → 0.4.786

package/fesm2022/leanix-components.mjs

@@ -4155,11 +4155,11 @@ class BreadcrumbComponent {
         return !!breadcrumb.breadcrumbs;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: BreadcrumbComponent, isStandalone: true, selector: "lx-breadcrumb", inputs: { breadcrumbs: "breadcrumbs" }, usesOnChanges: true, ngImport: i0, template: "@for (breadcrumb of viewBreadcrumbs; track $index; let last = $last) {\n  @if (isEllipsedBreadcrumb(breadcrumb)) {\n    <lx-cdk-options-dropdown [align]=\"'right'\" class=\"dropdownContainer\">\n      <button class=\"step clickable\" lxKeyboardActionSource>...</button>\n      @for (ellipsedBreadcrumbs of breadcrumb.breadcrumbs; track $index) {\n        <lx-option [hasSelectedState]=\"false\" (select)=\"ellipsedBreadcrumbs.onClick?.(ellipsedBreadcrumbs)\">\n          {{ ellipsedBreadcrumbs.label }}\n        </lx-option>\n      }\n    </lx-cdk-options-dropdown>\n  } @else {\n    <button class=\"step\" [disabled]=\"!breadcrumb.onClick\" (click)=\"breadcrumb.onClick?.(breadcrumb)\">\n      {{ breadcrumb.label }}\n    </button>\n  }\n\n  @if (!last) {\n    <i class=\"fa fa-angle-right\" aria-hidden=\"true\"></i>\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:6px}:host .step{color:#526179;text-decoration:none;font-size:var(--lxFontSmallSize, 12px);line-height:16px;font-weight:var(--lxFontNormal, 400);border:none;background-color:unset;padding:0}:host .step:not(:disabled){cursor:pointer}:host .step:not(:disabled):hover,:host .step:not(:disabled):focus-visible{color:#526179;text-decoration:underline}:host i{font-weight:var(--lxFontNormal, 400);color:#2a303d}\n"], dependencies: [{ kind: "component", type: CdkOptionsDropdownComponent, selector: "lx-cdk-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction", "mouseEnter"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: BreadcrumbComponent, isStandalone: true, selector: "lx-breadcrumb", inputs: { breadcrumbs: "breadcrumbs" }, usesOnChanges: true, ngImport: i0, template: "@for (breadcrumb of viewBreadcrumbs; track $index; let last = $last) {\n  @if (isEllipsedBreadcrumb(breadcrumb)) {\n    <lx-cdk-options-dropdown [align]=\"'right'\" class=\"dropdownContainer\">\n      <button class=\"step clickable\" lxKeyboardActionSource>...</button>\n      @for (ellipsedBreadcrumbs of breadcrumb.breadcrumbs; track $index) {\n        <lx-option [hasSelectedState]=\"false\" (select)=\"ellipsedBreadcrumbs.onClick?.(ellipsedBreadcrumbs)\">\n          {{ ellipsedBreadcrumbs.label }}\n        </lx-option>\n      }\n    </lx-cdk-options-dropdown>\n  } @else {\n    <button class=\"step\" [disabled]=\"!breadcrumb.onClick\" (click)=\"breadcrumb.onClick?.(breadcrumb)\">\n      {{ breadcrumb.label }}\n    </button>\n  }\n\n  @if (!last) {\n    <ui5-icon class=\"lx-icon-small\" name=\"navigation-right-arrow\" />\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:2.25px}:host .step{color:#526179;text-decoration:none;font-size:var(--lxFontSmallSize, 12px);line-height:16px;font-weight:var(--lxFontNormal, 400);border:none;background-color:unset;padding:0}:host .step:not(:disabled){cursor:pointer}:host .step:not(:disabled):hover,:host .step:not(:disabled):focus-visible{color:#526179;text-decoration:underline}\n"], dependencies: [{ kind: "component", type: CdkOptionsDropdownComponent, selector: "lx-cdk-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight"] }, { kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction", "mouseEnter"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-breadcrumb', imports: [CdkOptionsDropdownComponent, KeyboardActionSourceDirective, OptionComponent], template: "@for (breadcrumb of viewBreadcrumbs; track $index; let last = $last) {\n  @if (isEllipsedBreadcrumb(breadcrumb)) {\n    <lx-cdk-options-dropdown [align]=\"'right'\" class=\"dropdownContainer\">\n      <button class=\"step clickable\" lxKeyboardActionSource>...</button>\n      @for (ellipsedBreadcrumbs of breadcrumb.breadcrumbs; track $index) {\n        <lx-option [hasSelectedState]=\"false\" (select)=\"ellipsedBreadcrumbs.onClick?.(ellipsedBreadcrumbs)\">\n          {{ ellipsedBreadcrumbs.label }}\n        </lx-option>\n      }\n    </lx-cdk-options-dropdown>\n  } @else {\n    <button class=\"step\" [disabled]=\"!breadcrumb.onClick\" (click)=\"breadcrumb.onClick?.(breadcrumb)\">\n      {{ breadcrumb.label }}\n    </button>\n  }\n\n  @if (!last) {\n    <i class=\"fa fa-angle-right\" aria-hidden=\"true\"></i>\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:6px}:host .step{color:#526179;text-decoration:none;font-size:var(--lxFontSmallSize, 12px);line-height:16px;font-weight:var(--lxFontNormal, 400);border:none;background-color:unset;padding:0}:host .step:not(:disabled){cursor:pointer}:host .step:not(:disabled):hover,:host .step:not(:disabled):focus-visible{color:#526179;text-decoration:underline}:host i{font-weight:var(--lxFontNormal, 400);color:#2a303d}\n"] }]
+            args: [{ selector: 'lx-breadcrumb', imports: [CdkOptionsDropdownComponent, IconComponent$1, KeyboardActionSourceDirective, OptionComponent], template: "@for (breadcrumb of viewBreadcrumbs; track $index; let last = $last) {\n  @if (isEllipsedBreadcrumb(breadcrumb)) {\n    <lx-cdk-options-dropdown [align]=\"'right'\" class=\"dropdownContainer\">\n      <button class=\"step clickable\" lxKeyboardActionSource>...</button>\n      @for (ellipsedBreadcrumbs of breadcrumb.breadcrumbs; track $index) {\n        <lx-option [hasSelectedState]=\"false\" (select)=\"ellipsedBreadcrumbs.onClick?.(ellipsedBreadcrumbs)\">\n          {{ ellipsedBreadcrumbs.label }}\n        </lx-option>\n      }\n    </lx-cdk-options-dropdown>\n  } @else {\n    <button class=\"step\" [disabled]=\"!breadcrumb.onClick\" (click)=\"breadcrumb.onClick?.(breadcrumb)\">\n      {{ breadcrumb.label }}\n    </button>\n  }\n\n  @if (!last) {\n    <ui5-icon class=\"lx-icon-small\" name=\"navigation-right-arrow\" />\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:2.25px}:host .step{color:#526179;text-decoration:none;font-size:var(--lxFontSmallSize, 12px);line-height:16px;font-weight:var(--lxFontNormal, 400);border:none;background-color:unset;padding:0}:host .step:not(:disabled){cursor:pointer}:host .step:not(:disabled):hover,:host .step:not(:disabled):focus-visible{color:#526179;text-decoration:underline}\n"] }]
         }], propDecorators: { breadcrumbs: [{
                 type: Input
             }] } });
@@ -7762,11 +7762,11 @@ class PickerOptionComponent {
         this.select.emit(this.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PickerOptionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: PickerOptionComponent, isStandalone: true, selector: "li[lx-picker-option]", inputs: { optionId: "optionId", ariaLabel: "ariaLabel", value: "value", selected: "selected", isClearOption: "isClearOption" }, outputs: { select: "select" }, host: { listeners: { "click": "manageClickEvents()" }, properties: { "attr.role": "this.role", "attr.aria-selected": "this.ariaSelected", "attr.aria-label": "this.ariaLabelValue", "attr.title": "this.titleValue", "id": "this.id", "class.selected": "this.selected", "class.clearOption": "this.isClearOption", "class.highlighted": "this.highlighted" } }, ngImport: i0, template: "@if (isClearOption) {\n  <lx-icon name=\"slash\" color=\"#d8d8d8\" />\n} @else {\n  <ng-content />\n}\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lx-icon", inputs: ["name", "color", "fontAwsomeStyle", "size", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: PickerOptionComponent, isStandalone: true, selector: "li[lx-picker-option]", inputs: { optionId: "optionId", ariaLabel: "ariaLabel", value: "value", selected: "selected", isClearOption: "isClearOption" }, outputs: { select: "select" }, host: { listeners: { "click": "manageClickEvents()" }, properties: { "attr.role": "this.role", "attr.aria-selected": "this.ariaSelected", "attr.aria-label": "this.ariaLabelValue", "attr.title": "this.titleValue", "id": "this.id", "class.selected": "this.selected", "class.clearOption": "this.isClearOption", "class.highlighted": "this.highlighted" } }, ngImport: i0, template: "@if (isClearOption) {\n  <ui5-icon name=\"tnt/communication-path\" design=\"Neutral\" class=\"slash\" />\n} @else {\n  <ng-content />\n}\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}.slash{color:#d8d8d8;transform:rotate(90deg);vertical-align:middle}\n"], dependencies: [{ kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PickerOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'li[lx-picker-option]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], template: "@if (isClearOption) {\n  <lx-icon name=\"slash\" color=\"#d8d8d8\" />\n} @else {\n  <ng-content />\n}\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}\n"] }]
+            args: [{ selector: 'li[lx-picker-option]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent$1], template: "@if (isClearOption) {\n  <ui5-icon name=\"tnt/communication-path\" design=\"Neutral\" class=\"slash\" />\n} @else {\n  <ng-content />\n}\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}.slash{color:#d8d8d8;transform:rotate(90deg);vertical-align:middle}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateService }], propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -9147,11 +9147,13 @@ class LxFormsModule {
             OverlayModule,
             LxDragAndDropListModule,
             BasicDropdownComponent,
+            BreadcrumbComponent,
             CurrencyInputComponent,
             DateInputComponent,
             FormErrorComponent,
             MultiSelectComponent,
             OptionGroupDropdownComponent,
+            PickerOptionComponent,
             ResponsiveInputComponent,
             SingleSelectComponent,
             SortingDropdownComponent,