@ks-digital/designsystem-angular 0.0.1-alpha.6 → 0.0.1-alpha.61

package/types/ks-digital-designsystem-angular-heading.d.ts

@@ -0,0 +1,19 @@
+import * as _angular_core from '@angular/core';
+
+declare class Heading {
+    id: _angular_core.WritableSignal<string | undefined>;
+    /**
+     * Changes text sizing
+     * @default 'md'
+     */
+    readonly dataSize: _angular_core.InputSignal<"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined>;
+    /**
+     * Set the id of the heading
+     * @param id
+     */
+    setId(id: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Heading, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Heading, "h1[ksd-heading], h2[ksd-heading], h3[ksd-heading], h4[ksd-heading], h5[ksd-heading], h6[ksd-heading]", never, { "dataSize": { "alias": "data-size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { Heading };

package/types/ks-digital-designsystem-angular-link.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from '@angular/core';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+
+declare class Link {
+    static ɵfac: i0.ɵɵFactoryDeclaration<Link, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Link, "a[ksd-link]", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
+}
+
+export { Link };

package/types/ks-digital-designsystem-angular-pagination.d.ts

@@ -0,0 +1,58 @@
+import * as _angular_core from '@angular/core';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+
+interface PaginationPage {
+    page: number;
+    current: boolean;
+    key: string;
+}
+interface PaginationPages {
+    pages: PaginationPage[];
+    prev: number;
+    next: number;
+}
+declare class Pagination {
+    /**
+     * The current page
+     */
+    readonly current: _angular_core.InputSignalWithTransform<number, string | number>;
+    /**
+     * The total number of pages
+     */
+    readonly total: _angular_core.InputSignalWithTransform<number, string | number>;
+    /**
+     * Sets the screen reader label for the pagination
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * How many pages to show. Default is 7
+     */
+    readonly show: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * E.g if "?page=%d" all the links will set href to "?page=1", "?page=2".
+     */
+    readonly href: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Emits the page number when a page is clicked
+     */
+    readonly pageClicked: _angular_core.OutputEmitterRef<number>;
+    /**
+     * Exposes pagination data for consumer use
+     */
+    readonly pages: _angular_core.Signal<PaginationPages>;
+    protected onClick(e: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Pagination, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Pagination, "ksd-pagination", never, { "current": { "alias": "current"; "required": true; "isSignal": true; }; "total": { "alias": "total"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "show": { "alias": "show"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; }, { "pageClicked": "pageClicked"; }, never, ["*"], true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
+}
+
+declare class PaginationButton {
+    private el;
+    private destroyRef;
+    constructor();
+    private updateVariant;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PaginationButton, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PaginationButton, "[ksdPaginationButton]", never, {}, {}, never, never, true, never>;
+}
+
+export { Pagination, PaginationButton };
+export type { PaginationPage, PaginationPages };

package/types/ks-digital-designsystem-angular-paragraph.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from '@angular/core';
+
+declare class Paragraph {
+    static ɵfac: i0.ɵɵFactoryDeclaration<Paragraph, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Paragraph, "p[ksd-paragraph]", never, {}, {}, never, ["*"], true, never>;
+}
+
+export { Paragraph };

package/types/ks-digital-designsystem-angular-popover.d.ts

@@ -0,0 +1,13 @@
+import * as _angular_core from '@angular/core';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+
+declare class Popover {
+    readonly autoPlacement: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly variant: _angular_core.InputSignal<"tinted" | "default">;
+    readonly placement: _angular_core.InputSignal<"bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start">;
+    readonly popover: _angular_core.InputSignal<"auto" | "manual">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Popover, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Popover, "[ksd-popover]", never, { "autoPlacement": { "alias": "autoPlacement"; "required": false; "isSignal": true; }; "variant": { "alias": "data-variant"; "required": false; "isSignal": true; }; "placement": { "alias": "data-placement"; "required": false; "isSignal": true; }; "popover": { "alias": "popover"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
+}
+
+export { Popover };

package/types/ks-digital-designsystem-angular-search.d.ts

@@ -0,0 +1,84 @@
+import * as i0 from '@angular/core';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+
+/**
+ * Search Component
+ *
+ * Use to contain the search input and buttons.
+ * Only `SearchInput` is required, while `SearchClear` and `SearchButton` are optional.
+ *
+ * @example
+ * <div ksd-search>
+ *   <input ksd-search-input />
+ *   <button ksd-search-clear></button>
+ *   <button ksd-search-button></button>
+ * </div>
+ */
+declare class Search {
+    private readonly input;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<Search, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Search, "ksd-search", never, {}, {}, ["input"], ["[ksd-search-input]", "[ksd-search-clear]", "[ksd-search-button]"], true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
+}
+
+/**
+ * Search button
+ *
+ * Used within Search to provide a submit button.
+ *
+ * @param {('primary' | 'secondary')} [variant] - Specify which button variant to use
+ * @param {string} [aria-label] - Aria label for the button
+ *
+ */
+declare class SearchButton {
+    /**
+     * Specify which button variant to use
+     *
+     * @default 'primary'
+     */
+    readonly variant: i0.InputSignal<"primary" | "secondary">;
+    /**
+     * Aria label for the button
+     */
+    readonly ariaLabel: i0.InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SearchButton, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SearchButton, "button[ksd-search-button]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Search clear button
+ *
+ * Used within Search to provide a clear button.
+ *
+ * @param {string} [aria-label] - Aria label for the button.
+ *
+ * @event clearInput - Emitted when the clear button is clicked.
+ * Use this to notify controlled forms that the input should be cleared.
+ *
+ */
+declare class SearchClear {
+    /**
+     * Aria label for the button
+     * @default 'Tøm'
+     */
+    readonly ariaLabel: i0.InputSignal<string>;
+    /**
+     * Output to notify controlled forms that input should be cleared
+     */
+    clearInput: i0.OutputEmitterRef<void>;
+    handleClear(e: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SearchClear, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SearchClear, "button[ksd-search-clear]", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, { "clearInput": "clearInput"; }, never, never, true, never>;
+}
+
+/**
+ * Search input
+ *
+ * Used within Search to provide a search input.
+ */
+declare class SearchInput {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SearchInput, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SearchInput, "input[ksd-search-input]", never, {}, {}, never, never, true, never>;
+}
+
+export { Search, SearchButton, SearchClear, SearchInput };

package/types/ks-digital-designsystem-angular-spinner.d.ts

@@ -0,0 +1,22 @@
+import * as _angular_core from '@angular/core';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+
+declare class Spinner {
+    /**
+     * Aria-label for the spinner
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Aria-hidden for the spinner
+     */
+    readonly ariaHidden: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * Changes size for descendant Designsystemet components. Select from predefined sizes.
+     * @attribute data-size
+     */
+    readonly dataSize: _angular_core.InputSignal<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Spinner, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Spinner, "ksd-spinner", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaHidden": { "alias": "aria-hidden"; "required": false; "isSignal": true; }; "dataSize": { "alias": "data-size"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
+}
+
+export { Spinner };

package/types/ks-digital-designsystem-angular-suggestion.d.ts

@@ -0,0 +1,97 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+
+type SuggestionItem = {
+    label: string;
+    value: string;
+};
+type SuggestionFilterArgs = {
+    index: number;
+    label: string;
+    text: string;
+    value: string;
+    optionElement: HTMLOptionElement;
+    input: HTMLInputElement;
+};
+type SuggestionFilter = (args: SuggestionFilterArgs) => boolean;
+
+declare class Suggestion {
+    /**
+     * Allows the user to select multiple items
+     *
+     * @default false
+     */
+    multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Allows the user to create new items
+     *
+     * @default false
+     */
+    creatable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Filter options; boolean or a custom callback.
+     *
+     * @default true
+     */
+    filter: _angular_core.InputSignal<boolean | SuggestionFilter>;
+    /**
+     * Model for the selected item(s).
+     *
+     * @default undefined
+     */
+    selected: _angular_core.ModelSignal<SuggestionItem | SuggestionItem[] | undefined>;
+    protected selectedArray: _angular_core.Signal<SuggestionItem[]>;
+    private readonly suggestionElement;
+    private readonly suggestionList;
+    constructor();
+    protected onSelect(event: Event): void;
+    protected onKeyDown(event: Event): void;
+    protected onInput(event: Event): void;
+    private syncOptions;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Suggestion, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Suggestion, "ksd-suggestion", never, { "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "creatable": { "alias": "creatable"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, ["suggestionList"], ["*"], true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
+}
+
+declare class SuggestionListEmpty {
+    /**
+     * Hack to get the content from parent component so that we can
+     * keep the dom structure needed without additional host elements
+     */
+    templateRef: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuggestionListEmpty, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuggestionListEmpty, "ksd-suggestion-list-empty", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class SuggestionListOption {
+    /**
+     * Hack to get the content from parent component so that we can
+     * keep the dom structure needed without additional host elements
+     */
+    templateRef: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    value: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuggestionListOption, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuggestionListOption, "ksd-suggestion-list-option", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class SuggestionList {
+    /**
+     * Screen reader announcement template for singular result count.
+     *
+     * @default '%d forslag'
+     */
+    readonly singular: _angular_core.InputSignal<string>;
+    /**
+     * Screen reader announcement template for plural result count.
+     *
+     * @default '%d forslag'
+     */
+    readonly plural: _angular_core.InputSignal<string>;
+    readonly options: _angular_core.Signal<readonly SuggestionListOption[]>;
+    protected readonly empty: _angular_core.Signal<SuggestionListEmpty | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuggestionList, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuggestionList, "ksd-suggestion-list", never, { "singular": { "alias": "singular"; "required": false; "isSignal": true; }; "plural": { "alias": "plural"; "required": false; "isSignal": true; }; }, {}, ["options", "empty"], never, true, never>;
+}
+
+export { Suggestion, SuggestionList, SuggestionListEmpty, SuggestionListOption };
+export type { SuggestionFilter, SuggestionFilterArgs, SuggestionItem };

package/types/ks-digital-designsystem-angular-table.d.ts

@@ -0,0 +1,43 @@
+import * as _angular_core from '@angular/core';
+
+declare class Table {
+    /**
+     * Will give the table a hover effect on rows
+     * @default false
+     */
+    readonly hover: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Will give the table a rounded border
+     * @default false
+     */
+    readonly border: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Will make the table header sticky
+     * @default false
+     */
+    readonly stickyHeader: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Will give the table zebra striping
+     * @default false
+     */
+    readonly zebra: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Table, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Table, "table[ksd-table]", never, { "hover": { "alias": "data-hover"; "required": false; "isSignal": true; }; "border": { "alias": "data-border"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "data-sticky-header"; "required": false; "isSignal": true; }; "zebra": { "alias": "data-zebra"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class TableHeaderCell {
+    /**
+     * If 'none' | 'ascending' | 'descending' will add a button to the header cell and change aria-sort and icon
+     * @default undefined
+     */
+    readonly sort: _angular_core.InputSignal<"none" | "ascending" | "descending" | undefined>;
+    /**
+     * Emitted when the sort button is clicked
+     * @emits void
+     */
+    readonly sortChange: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableHeaderCell, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableHeaderCell, "th[ksd-header-cell]", never, { "sort": { "alias": "aria-sort"; "required": false; "isSignal": true; }; }, { "sortChange": "sortChange"; }, never, ["*"], true, never>;
+}
+
+export { Table, TableHeaderCell };

package/types/ks-digital-designsystem-angular-tabs.d.ts

@@ -0,0 +1,65 @@
+import * as i0 from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+
+/**
+ * Payload emitted from `tabClicked` on both `ksd-tabs` and `ksd-tabs-tab`.
+ */
+interface TabClickEvent {
+    /**
+     * Zero-based index of the clicked tab in its current render order.
+     */
+    index: number;
+    /**
+     * Consumer-provided stable tab identifier from `tabId`.
+     *
+     * `undefined` when `tabId` is not provided.
+     */
+    tabId: string | undefined;
+}
+declare class TabsTab {
+    /**
+     * Stable identifier for this tab.
+     *
+     * Recommended for logic such as analytics, routing and persisted state.
+     *
+     * If omitted, `tabClicked` emits `tabId: undefined`.
+     */
+    readonly tabId: i0.InputSignal<string | undefined>;
+    /**
+     * Emits tab click details when this tab is clicked.
+     */
+    readonly tabClicked: i0.OutputEmitterRef<TabClickEvent>;
+    /**
+     * Hack to get the content of the tab from outside so that we can
+     * keep the dom structure needed without additional host elements
+     */
+    templateRef: i0.Signal<TemplateRef<unknown> | undefined>;
+    emitTabClicked(event: TabClickEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabsTab, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabsTab, "ksd-tabs-tab", never, { "tabId": { "alias": "tabId"; "required": false; "isSignal": true; }; }, { "tabClicked": "tabClicked"; }, never, ["*"], true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
+}
+
+declare class Tabs {
+    /**
+     * Emits tab click details when any tab is clicked.
+     */
+    readonly tabClicked: i0.OutputEmitterRef<TabClickEvent>;
+    readonly tabs: i0.Signal<readonly TabsTab[]>;
+    protected onTabClick(index: number, tab: TabsTab): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Tabs, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Tabs, "ksd-tabs", never, {}, { "tabClicked": "tabClicked"; }, ["tabs"], ["ksd-tabs-panel"], true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
+}
+
+declare class TabsList {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabsList, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabsList, "ksd-tabs-list", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class TabsPanel {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabsPanel, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabsPanel, "ksd-tabs-panel", never, {}, {}, never, ["*"], true, never>;
+}
+
+export { Tabs, TabsList, TabsPanel, TabsTab };
+export type { TabClickEvent };

package/types/ks-digital-designsystem-angular-tag.d.ts

@@ -0,0 +1,15 @@
+import * as i0 from '@angular/core';
+import * as i1 from '@ks-digital/designsystem-angular/__internals';
+
+declare class Tag {
+    /**
+     * The visual variant of the tag
+     *
+     * @default 'default'
+     */
+    readonly variant: i0.InputSignal<"default" | "outline">;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Tag, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Tag, "ksd-tag", never, { "variant": { "alias": "data-variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
+}
+
+export { Tag };

package/types/ks-digital-designsystem-angular-validation-message.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from '@angular/core';
+
+declare class ValidationMessage {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ValidationMessage, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ValidationMessage, "[ksd-validation-message]", never, {}, {}, never, never, true, never>;
+}
+
+export { ValidationMessage };

package/types/ks-digital-designsystem-angular.d.ts

@@ -0,0 +1,2 @@
+
+export { };

package/validation-message/README.md

@@ -0,0 +1,3 @@
+# @ks-digital/designsystem-angular/validation-message
+
+Secondary entry point of `@ks-digital/designsystem-angular`. It can be used by importing from `@ks-digital/designsystem-angular/validation-message`.

package/dist/README.md

@@ -1,43 +0,0 @@
-# 🚧 KS Digital Designsystem for Angular
-
-> This is an experimental POC as for now
-
-This library provides Angular components for KS Digital, designed to align closely with the components from [Designsystemet.no](https://www.designsystemet.no/komponenter).
-
-## Installation (WIP)
-
-Install the required packages using your preferred package manager:
-
-```bash
-pnpm add @ks-digital/designsystem-angular @ks-digital/designsystem-themes
-```
-
-## Setup
-
-### 1. Include the Inter Font
-
-Add the Inter font to your `index.html`. This API supports the same parameters as the Google Fonts API, allowing you to customize the font weights as needed:
-
-```html
-<link
-  href="https://static.fiks.ks.no/googlefonts/googleapis/css2?family=Inter&display=swap"
-  rel="stylesheet"
-/>
-```
-
-### 2. Import Base Styles and Themes
-
-Import the base styles and the theme you want to use in your application:
-
-```javascript
-import '@ks-digital/designsystem-themes/base.css'
-import '@ks-digital/designsystem-themes/ledsagerbevis.css'
-```
-
-### 3. Use Components
-
-To be written.
-
-## Example
-
-A complete example setup is available in the `angular-demo` located under the `apps` folder.