@leanix/components 0.4.407 → 0.4.409

package/lib/forms-ui/components/slider-toggle/slider-toggle.component.d.ts

@@ -1,15 +1,35 @@
 import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
+/**
+ * Switch component is a toggle switch that can be used to switch between two states.
+ *
+ * ## Usage
+ *
+ * 1. Import the `SliderToggleComponent` component from `@leanix/components` in your module or standalone copmonent where you want to use the component.
+ *
+ * ```ts
+ * import { SliderToggleComponent } from '@leanix/components';
+ * ```
+ */
 export declare class SliderToggleComponent {
+    /** Value of the switch */
     value: boolean;
+    /** Size of the switch */
     size: 'small';
+    /** Whether the switch is disabled */
     disabled: boolean;
+    /** Label of the switch */
     label: string;
+    /** Whether the label is in front of the switch */
     labelInFront: boolean;
+    /** Id of the switch */
     elementId?: string;
+    /** Event that is emitted when the switch is toggled */
     toggle: EventEmitter<boolean>;
+    /** @internal */
     onToggle(): void;
     get id(): string | null;
+    /** @internal */
     focus(checkbox: HTMLInputElement): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SliderToggleComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SliderToggleComponent, "lx-slider-toggle", never, { "value": { "alias": "value"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; "labelInFront": { "alias": "labelInFront"; "required": false; }; "elementId": { "alias": "elementId"; "required": false; }; }, { "toggle": "toggle"; }, never, never, true, never>;

package/lib/modal-ui/components/modal/modal.component.d.ts

@@ -8,12 +8,42 @@ import { ModalFooterComponent } from '../modal-footer/modal-footer.component';
 import { ModalHeaderComponent } from '../modal-header/modal-header.component';
 import * as i0 from "@angular/core";
 /**
- * GLOBAL PROVIDERS required for this component:
- * - provideAnimations()
+ * This documentation provides details on the usage and configuration of the Modal.
  *
- * ATTENTION - SCROLLABLE DIALOG:
+ * ## Usage
+ *
+ * 1. Import `LxModalModule` and `LxCoreUiModule` modules from `@leanix/components` in your module where you want to use the component.
+ *
+ * ```ts
+ * import { LxModalModule, LxCoreUiModule } from '@leanix/components';
+ * ```
+ *
+ * 2. Use the **lx-modal** component in your template with the parameters described below.
+ *
+ * - **`open`**: Whether the modal is open or closed.
+ * - **`size`**: 'dialog' | 'dialog-large'.
+ * - **`verticalScroll`**: Whether the modal is scrollable or not.
+ * - **`showHeader`**: Whether the modal has a header or not.
+ * - **`showFooter`**: Whether the modal has a footer or not.
+ * - **`showCloseButton`**: Whether to show the close button.
+ * - **`showBackButton`**: Whether to show the back button.
+ *
+ * 3. Use optional **lx-modal-header** component in your template with the parameters described below.
+ *
+ * - **`title`**: Title of the modal.
+ * - **`subtitle`**: Subtitle of the modal.
+ * - **`bottomBorder`**: Whether to show a bottom border.
+ *
+ * 4. Use optional **lx-modal-footer** component in your template with the parameters described below.
+ *
+ * - **`border`**: Whether to show the footer at the bottom of the modal.
+ *
+ * **GLOBAL PROVIDERS** required for this component:
+ * - `provideAnimations()`
+ *
+ * **ATTENTION - SCROLLABLE DIALOG**:
  * The <lx-modal> component when used as "dialog" is not designed to work with a
- * scrollable body (via "overflow: auto | scroll") in combination with dropdowns.
+ * scrollable body (via `overflow: auto | scroll`) in combination with dropdowns.
  * The overflow on the body will also clip the dropdowns, which is expected.
  *
  * Reasoning:
@@ -22,42 +52,66 @@ import * as i0 from "@angular/core";
  * requires scrolling, we should discuss whether to put it into a dialog at all
  * and rather think about putting the content on a separate route or
  * using the fullscreen version of the modal.
- *
  */
 export declare class ModalComponent implements OnChanges, OnInit, OnDestroy, AfterViewInit {
     private overlay;
     private renderer;
     private closeModal$;
     private focusTrap;
+    /** @internal */
     readonly NAME = "ModalComponent";
+    /** Whether the modal is open or closed. */
     open: boolean;
+    /** Whether to show the close button. */
     showCloseButton: boolean;
+    /** Whether to show the back button. */
     showBackButton: boolean;
     verticalScroll: boolean;
+    /** The size of the modal. */
     size: 'fullscreen' | 'dialog-large' | 'dialog';
+    /**
+     * Minimum width of the modal.
+     *
+     * _NB: Some modal implementations rely on this minWidth being 600px_
+     */
     minWidth: string;
+    /** Whether the modal is a focus trap. */
     isFocusTrap: boolean;
+    /** Function to check if the modal can be closed. */
     canModalBeClosed?: (closeLocation: ModalCloseClickLocation | boolean) => Promise<boolean>;
+    /** Event emitted when the modal is closed. */
     close: EventEmitter<ModalCloseClickLocation>;
+    /** Event emitted when the back button is clicked. */
     back: EventEmitter<void>;
+    /** @internal */
     header?: ModalHeaderComponent;
+    /** @internal */
     footer?: ModalFooterComponent;
+    /** @internal */
     cdkPortal: Portal<CdkPortal>;
     private overlayRef;
     private oldOverflow?;
+    /** @internal */
     closeLocation: typeof ModalCloseClickLocation;
+    /** @internal */
     readonly destroyed$: Subject<void>;
+    /** @internal */
     implicitContent: TemplateRef<any>;
+    /** @internal */
     explicitContent?: TemplateRef<any>;
     get content(): TemplateRef<any>;
+    /** @internal */
     onEscape(): void;
     constructor(overlay: Overlay, renderer: Renderer2, closeModal$: Observable<ModalCloseClickLocation | boolean>, focusTrap: ConfigurableFocusTrapFactory);
     ngOnInit(): void;
     ngOnChanges(): void;
     ngAfterViewInit(): void;
+    /** @internal */
     openModal(): void;
+    /** @internal */
     emitBack(): void;
     ngOnDestroy(): void;
+    /** @internal */
     closeModal(closeLocation: ModalCloseClickLocation | boolean): Promise<void>;
     private trapFocusInModal;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalComponent, [null, null, { optional: true; }, null]>;

package/lib/popover-ui/components/popover/popover.component.d.ts

@@ -3,7 +3,15 @@ import { SatPopoverComponent, SatPopoverHorizontalAlign, SatPopoverVerticalAlign
 import { PopoverTriggerDirective } from '../../directives/popover-hover.directive';
 import * as i0 from "@angular/core";
 /**
- * HOW TO USE
+ * The Popover component is based on the [ncstate-sat/popover](https://github.com/ncstate-sat/popover) library.
+ *
+ * ## Usage
+ *
+ * 1. Import `LxPopoverUiModule` and `LxCoreUiModule` module from `@leanix/components` in your module where you want to use the component.
+ *
+ * ```ts
+ * import { LxPopoverUiModule, LxCoreUiModule } from '@leanix/components';
+ * ```
  *
  * This popover encapsulates this open source library: https://github.com/ncstate-sat/popover,
  * make sure to also check out the docs over there.
@@ -14,7 +22,8 @@ import * as i0 from "@angular/core";
  *
  * For use case 1. you would use the lxPopoverHover directive, which exports as hoverAnchor.
  *
- * Example:
+ * ### Example:
+ * ```html
  * <div lxPopoverHover
  *      hoverAnchor
  *      satPopoverAnchor
@@ -24,13 +33,15 @@ import * as i0 from "@angular/core";
  *             verticalAlign="center">
  *    <p>Popover content</p>
  * </lx-popover>
+ * ```
  *
  * For use case 2. you would use the lxPopoverClick directive, which exports as clickAnchor.
  * Note: Since the only component where we use the lxPopoverClick directive (ReportComponent)
  * needs to fetch some data before opening it, we do not register a click EventListener in this directive,
  * but require the developer to implement that in the component, where the popover is used.
  *
- * Example:
+ * ### Example:
+ * ```html
  * <div lxPopoverClick
  *      clickAnchor
  *      satPopoverAnchor
@@ -42,23 +53,33 @@ import * as i0 from "@angular/core";
  *             #popover>
  *    <p>Popover content</p>
  * </lx-popover>
+ * ```
  *
  * If this component is used with angularCompilerOptions strictTemplates=true,
  * satPopoverAnchor must be set to the reference to the SatPopover inside lx-popover.
  *
- * Example:
- *  <div [satPopoverAnchor]="popover.satPopover"></div>
+ * ### Example:
+ * ```html
+ * <div [satPopoverAnchor]="popover.satPopover"></div>
  * <lx-popover #popover>
  *    <p>Popover content</p>
  * </lx-popover>
+ * ```
  */
 export declare class PopoverComponent implements OnChanges {
+    /** The trigger directive that will open the popover. This is also the anchor for the popover. */
     trigger: PopoverTriggerDirective;
+    /** The horizontal alignment of the popover (`center` by default). */
     horizontalAlign: SatPopoverHorizontalAlign;
+    /** The vertical alignment of the popover (`above` by default). */
     verticalAlign: SatPopoverVerticalAlign;
+    /** Whether to apply margins. */
     noMargin: boolean;
+    /** Whether to allow the popover to overflow the viewport. */
     allowOverflow: boolean;
+    /** Whether to focus the first focusable element in the popover when it is opened. */
     autoFocus: boolean;
+    /** Whether to restore focus to the previously-focused element when the popover is closed. */
     restoreFocus: boolean;
     /**
      * If you have a popover, that should usually be displayed above or below its anchor,
@@ -69,20 +90,31 @@ export declare class PopoverComponent implements OnChanges {
      * position of the popover after opening.
      */
     adaptMarginsForViewportAlignChange: boolean;
+    /** Event emitted when the popover is opened. */
     opened: EventEmitter<void>;
+    /** Event emitted when the popover is closed. */
     closed: EventEmitter<void>;
+    /** @internal */
     satPopover: SatPopoverComponent;
+    /** @internal */
     implicitContent: TemplateRef<any>;
+    /** @internal */
     explicitContent?: TemplateRef<any>;
+    /** @internal */
     marginClasses: string;
     get content(): TemplateRef<any>;
     get isOpen(): boolean;
     private _isOpen;
     ngOnChanges(changes: SimpleChanges): void;
+    /** @internal */
     open(): void;
+    /** @internal */
     close(): void;
+    /** @internal */
     onOpen(): void;
+    /** @internal */
     onAfterOpen(): void;
+    /** @internal */
     onClose(): void;
     /**
      * SatPopover::_classList will contain a map of alignment CSS classes, once the popover was opened.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leanix/components",
-  "version": "0.4.407",
+  "version": "0.4.409",
   "license": "Apache-2.0",
   "author": "LeanIX GmbH",
   "repository": {