feat(docs): some more webcomponents docs

libs/docs/ui5-webcomponents-fiori/timeline/project.json

@@ -3,24 +3,16 @@
     "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
     "projectType": "library",
     "sourceRoot": "libs/docs/ui5-webcomponents-fiori/timeline",
-    "prefix": "ui5",
+    "prefix": "ui5-doc",
+    "tags": ["type:lib", "scope:docs"],
     "targets": {
-        "test": {
-            "executor": "@nx/jest:jest",
-            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+        "e2e": {
+            "executor": "@fundamental-ngx/nx-plugin:e2e-test",
             "options": {
-                "jestConfig": "libs/docs/ui5-webcomponents-fiori/timeline/jest.config.ts",
-                "passWithNoTests": true
-            }
-        },
-        "lint": {
-            "executor": "@nx/eslint:lint",
-            "options": {
-                "lintFilePatterns": [
-                    "libs/docs/ui5-webcomponents-fiori/timeline/**/*.ts",
-                    "libs/docs/ui5-webcomponents-fiori/timeline/**/*.html"
-                ]
-            }
+                "e2eFiles": ["libs/docs/ui5-webcomponents-fiori/timeline/e2e/**/*.e2e-spec.ts"],
+                "devServerTarget": "docs:serve:e2e"
+            },
+            "outputs": ["{workspaceRoot}/allure-results/docs-ui5-webcomponents-fiori-timeline"]
         }
     }
 }

libs/docs/ui5-webcomponents-fiori/timeline/tsconfig.json

@@ -1,13 +1,18 @@
 {
     "extends": "../../../../tsconfig.base.json",
     "files": [],
-    "include": [],
-    "references": [
-        {
-            "path": "./tsconfig.lib.json"
-        },
-        {
-            "path": "./tsconfig.spec.json"
-        }
-    ]
+    "include": ["**/*.ts"],
+    "compilerOptions": {
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitReturns": false,
+        "noFallthroughCasesInSwitch": true,
+        "target": "es2020",
+        "outDir": "../../../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "exclude": ["**/*.test.ts", "**/*.spec.ts", "**/*.e2e-spec.ts"]
 }

libs/docs/ui5-webcomponents/api-files.ts

@@ -19,9 +19,13 @@ export const API_FILES = {
     checkBox: ['CheckBox'],
     colorPalette: ['ColorPalette', 'ColorPaletteItem'],
     colorPicker: ['ColorPicker'],
+    expandableText: ['ExpandableText'],
+    icon: ['Icon'],
     input: ['Input'],
     label: ['Label'],
     link: ['Link'],
+    list: ['List', 'ListItemCustom', 'ListItemGroup', 'ListItemStandard'],
+    messageStrip: ['MessageStrip'],
     popover: ['Popover'],
     segmentedButton: ['SegmentedButton', 'SegmentedButtonItem'],
     slider: ['Slider', 'RangeSlider']

libs/docs/ui5-webcomponents/color-picker/tsconfig.json

@@ -7,15 +7,12 @@
         "strict": true,
         "noImplicitReturns": false,
         "noFallthroughCasesInSwitch": true,
-        "target": "es2022",
+        "target": "es2020",
         "outDir": "../../../../dist/out-tsc",
         "declaration": true,
         "declarationMap": true,
         "inlineSources": true,
-        "types": [],
-        "experimentalDecorators": true,
-        "emitDecoratorMetadata": true,
-        "useDefineForClassFields": false
+        "types": []
     },
     "exclude": ["**/*.test.ts", "**/*.spec.ts", "**/*.e2e-spec.ts"]
 }

libs/docs/ui5-webcomponents/docs-data.json

@@ -54,6 +54,14 @@
             "url": "ui5-webcomponents/color-picker",
             "name": "Color Picker"
         },
+        {
+            "url": "ui5-webcomponents/expandable-text",
+            "name": "Expandable Text"
+        },
+        {
+            "url": "ui5-webcomponents/icon",
+            "name": "Icon"
+        },
         {
             "url": "ui5-webcomponents/input",
             "name": "Input"
@@ -66,6 +74,14 @@
             "url": "ui5-webcomponents/link",
             "name": "Link"
         },
+        {
+            "url": "ui5-webcomponents/list",
+            "name": "List"
+        },
+        {
+            "url": "ui5-webcomponents/message-strip",
+            "name": "Message Strip"
+        },
         {
             "url": "ui5-webcomponents/popover",
             "name": "Popover"

libs/docs/ui5-webcomponents/docs-routes.ts

@@ -66,6 +66,14 @@ const componentRoutes = [
         path: 'color-picker',
         loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/color-picker').then(configureLibRoutes)
     },
+    {
+        path: 'expandable-text',
+        loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/expandable-text').then(configureLibRoutes)
+    },
+    {
+        path: 'icon',
+        loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/icon').then(configureLibRoutes)
+    },
     {
         path: 'input',
         loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/input').then(configureLibRoutes)
@@ -78,6 +86,14 @@ const componentRoutes = [
         path: 'link',
         loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/link').then(configureLibRoutes)
     },
+    {
+        path: 'list',
+        loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/list').then(configureLibRoutes)
+    },
+    {
+        path: 'message-strip',
+        loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/message-strip').then(configureLibRoutes)
+    },
     {
         path: 'popover',
         loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/popover').then(configureLibRoutes)

libs/docs/ui5-webcomponents/expandable-text/examples/basic-sample.html

@@ -0,0 +1,32 @@
+<ui5-table>
+    <ui5-table-header-row slot="headerRow">
+        <ui5-table-header-cell>Product</ui5-table-header-cell>
+        <ui5-table-header-cell>Description</ui5-table-header-cell>
+        <ui5-table-header-cell>Dimensions</ui5-table-header-cell>
+        <ui5-table-header-cell>Price</ui5-table-header-cell>
+    </ui5-table-header-row>
+    <ui5-table-row>
+        <ui5-table-cell><b>Notebook Basic 15</b></ui5-table-cell>
+        <ui5-table-cell>
+            <ui5-expandable-text
+                text="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis accusamus assumenda debitis excepturi distinctio adipisci magnam qui a id, praesentium ullam voluptatem ad, modi quo perspiciatis soluta quasi facere molestiae"
+            ></ui5-expandable-text>
+        </ui5-table-cell>
+        <ui5-table-cell><ui5-label>30 x 18 x 3 cm</ui5-label></ui5-table-cell>
+        <ui5-table-cell
+            ><ui5-label><b>956</b> EUR</ui5-label></ui5-table-cell
+        >
+    </ui5-table-row>
+    <ui5-table-row>
+        <ui5-table-cell><b>Notebook Basic 17</b></ui5-table-cell>
+        <ui5-table-cell>
+            <ui5-expandable-text
+                text="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis accusamus assumenda debitis excepturi distinctio adipisci magnam qui a id, praesentium ullam voluptatem ad, modi quo perspiciatis soluta quasi facere molestiae"
+            ></ui5-expandable-text>
+        </ui5-table-cell>
+        <ui5-table-cell><ui5-label>29 x 17 x 3.1 cm</ui5-label></ui5-table-cell>
+        <ui5-table-cell
+            ><ui5-label><b>1249</b> EUR</ui5-label></ui5-table-cell
+        >
+    </ui5-table-row>
+</ui5-table>

libs/docs/ui5-webcomponents/expandable-text/examples/basic-sample.ts

@@ -0,0 +1,37 @@
+import { Component, signal } from '@angular/core';
+import { ExpandableText } from '@fundamental-ngx/ui5-webcomponents/expandable-text';
+import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
+import { Table } from '@fundamental-ngx/ui5-webcomponents/table';
+import { TableCell } from '@fundamental-ngx/ui5-webcomponents/table-cell';
+import { TableHeaderCell } from '@fundamental-ngx/ui5-webcomponents/table-header-cell';
+import { TableHeaderRow } from '@fundamental-ngx/ui5-webcomponents/table-header-row';
+import { TableRow } from '@fundamental-ngx/ui5-webcomponents/table-row';
+import { Text } from '@fundamental-ngx/ui5-webcomponents/text';
+
+@Component({
+    selector: 'ui5-expandable-text-basic-example',
+    templateUrl: './basic-sample.html',
+    standalone: true,
+    imports: [ExpandableText, Table, TableRow, TableHeaderRow, TableCell, TableHeaderCell, Label, Text]
+})
+export class ExpandableTextBasicExample {
+    readonly sampleText = signal(
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ' +
+            'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ' +
+            'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ' +
+            'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+    );
+
+    readonly shortText = signal(
+        'This is a short text that will not be truncated because it is under the character limit.'
+    );
+
+    readonly longText = signal(
+        'This is a much longer text that demonstrates the expandable text functionality. ' +
+            'When text exceeds the maximum character limit, it will be truncated with an ellipsis and show a "More" link. ' +
+            'Users can click the "More" link to expand and see the full content. After expansion, a "Less" link allows ' +
+            'users to collapse the text back to its truncated state. This provides a clean and user-friendly way to ' +
+            'handle long content without overwhelming the interface. The component is particularly useful in scenarios ' +
+            'like product descriptions, news articles, comments, or any content that might vary significantly in length.'
+    );
+}

libs/docs/ui5-webcomponents/expandable-text/examples/overflow-mode-popover.html

@@ -0,0 +1,34 @@
+<ui5-table>
+    <ui5-table-header-row slot="headerRow">
+        <ui5-table-header-cell>Product</ui5-table-header-cell>
+        <ui5-table-header-cell>Description</ui5-table-header-cell>
+        <ui5-table-header-cell>Dimensions</ui5-table-header-cell>
+        <ui5-table-header-cell>Price</ui5-table-header-cell>
+    </ui5-table-header-row>
+    <ui5-table-row>
+        <ui5-table-cell><b>Notebook Basic 15</b></ui5-table-cell>
+        <ui5-table-cell>
+            <ui5-expandable-text
+                overflowMode="Popover"
+                text="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis accusamus assumenda debitis excepturi distinctio adipisci magnam qui a id, praesentium ullam voluptatem ad, modi quo perspiciatis soluta quasi facere molestiae"
+            ></ui5-expandable-text>
+        </ui5-table-cell>
+        <ui5-table-cell><ui5-label>30 x 18 x 3 cm</ui5-label></ui5-table-cell>
+        <ui5-table-cell
+            ><ui5-label><b>956</b> EUR</ui5-label></ui5-table-cell
+        >
+    </ui5-table-row>
+    <ui5-table-row>
+        <ui5-table-cell><b>Notebook Basic 17</b></ui5-table-cell>
+        <ui5-table-cell>
+            <ui5-expandable-text
+                overflowMode="Popover"
+                text="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis accusamus assumenda debitis excepturi distinctio adipisci magnam qui a id, praesentium ullam voluptatem ad, modi quo perspiciatis soluta quasi facere molestiae"
+            ></ui5-expandable-text>
+        </ui5-table-cell>
+        <ui5-table-cell><ui5-label>29 x 17 x 3.1 cm</ui5-label></ui5-table-cell>
+        <ui5-table-cell
+            ><ui5-label><b>1249</b> EUR</ui5-label></ui5-table-cell
+        >
+    </ui5-table-row>
+</ui5-table>

libs/docs/ui5-webcomponents/expandable-text/examples/overflow-mode-popover.ts

@@ -0,0 +1,40 @@
+import { Component, signal } from '@angular/core';
+import { ExpandableText } from '@fundamental-ngx/ui5-webcomponents/expandable-text';
+import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
+import { Option } from '@fundamental-ngx/ui5-webcomponents/option';
+import { Select } from '@fundamental-ngx/ui5-webcomponents/select';
+import { Table } from '@fundamental-ngx/ui5-webcomponents/table';
+import { TableCell } from '@fundamental-ngx/ui5-webcomponents/table-cell';
+import { TableHeaderCell } from '@fundamental-ngx/ui5-webcomponents/table-header-cell';
+import { TableHeaderRow } from '@fundamental-ngx/ui5-webcomponents/table-header-row';
+import { TableRow } from '@fundamental-ngx/ui5-webcomponents/table-row';
+
+// Import Fundamental Styles
+import 'fundamental-styles/dist/layout-grid.css';
+import 'fundamental-styles/dist/margins.css';
+import 'fundamental-styles/dist/paddings.css';
+
+@Component({
+    selector: 'ui5-expandable-text-overflow-mode-popover-example',
+    templateUrl: './overflow-mode-popover.html',
+    standalone: true,
+    imports: [ExpandableText, Table, TableCell, TableRow, TableHeaderCell, TableHeaderRow, Label, Select, Option]
+})
+export class ExpandableTextOverflowModePopoverExample {
+    readonly selectedOverflowMode = signal<'InPlace' | 'Popover'>('InPlace');
+
+    readonly sampleText = signal(
+        'This is a demonstration of the different overflow modes available in the Expandable Text component. ' +
+            'The "InPlace" mode expands the text directly within the current container, pushing down any content below it. ' +
+            'The "Popover" mode shows the full text in a popup overlay when the "More" link is clicked, which is useful ' +
+            'when you want to preserve the layout and not push other content around. Both modes provide a clean and ' +
+            'intuitive way for users to access additional content when needed.'
+    );
+
+    onOverflowModeChange(event: any): void {
+        const selectedValue = (event.target as any).selectedOption?.value;
+        if (selectedValue === 'InPlace' || selectedValue === 'Popover') {
+            this.selectedOverflowMode.set(selectedValue);
+        }
+    }
+}

libs/docs/ui5-webcomponents/expandable-text/expandable-text-docs.html

@@ -0,0 +1,21 @@
+<fd-docs-section-title id="basic" componentName="ExpandableText">Basic Expandable Text</fd-docs-section-title>
+<description>
+    The expandable text component allows displaying long text content in a compact way by showing only a limited number
+    of characters initially, with the option to expand to show the full text.
+</description>
+<component-example>
+    <ui5-expandable-text-basic-example></ui5-expandable-text-basic-example>
+</component-example>
+<code-example [exampleFiles]="basicSamples()"></code-example>
+
+<fd-docs-section-title id="overflow-mode-popover" componentName="ExpandableText"
+    >Overflow Mode Popover</fd-docs-section-title
+>
+<description>
+    The overflow mode determines how the full text is displayed when expanded. It can be shown "InPlace" (replacing the
+    truncated text) or in a "Popover".
+</description>
+<component-example>
+    <ui5-expandable-text-overflow-mode-popover-example></ui5-expandable-text-overflow-mode-popover-example>
+</component-example>
+<code-example [exampleFiles]="overflowModePopoverSamples()"></code-example>