@cas-smartdesign/virtual-list 6.2.2

package/npm-third-party-licenses.json

@@ -0,0 +1,192 @@
+{
+    "@cypress/vite-dev-server@5.0.7": {
+        "licenses": "MIT",
+        "repository": "https://github.com/cypress-io/cypress",
+        "licenseUrl": "https://github.com/cypress-io/cypress/tree/develop/npm/vite-dev-server#readme"
+    },
+    "@rollup/plugin-node-resolve@15.2.3": {
+        "licenses": "MIT",
+        "repository": "https://github.com/rollup/plugins",
+        "licenseUrl": "https://github.com/rollup/plugins/raw/HEAD/LICENSE"
+    },
+    "@types/node@20.10.6": {
+        "licenses": "MIT",
+        "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
+        "licenseUrl": "https://github.com/DefinitelyTyped/DefinitelyTyped/raw/HEAD/LICENSE"
+    },
+    "@types/postcss-prefix-selector@1.16.3": {
+        "licenses": "MIT",
+        "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
+        "licenseUrl": "https://github.com/DefinitelyTyped/DefinitelyTyped/raw/HEAD/LICENSE"
+    },
+    "@typescript-eslint/eslint-plugin@6.17.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/typescript-eslint/typescript-eslint",
+        "licenseUrl": "https://github.com/typescript-eslint/typescript-eslint/raw/HEAD/LICENSE"
+    },
+    "@typescript-eslint/parser@6.17.0": {
+        "licenses": "BSD-2-Clause",
+        "repository": "https://github.com/typescript-eslint/typescript-eslint",
+        "licenseUrl": "https://github.com/typescript-eslint/typescript-eslint/raw/HEAD/LICENSE"
+    },
+    "@vitest/coverage-v8@1.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/vitest-dev/vitest",
+        "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE"
+    },
+    "@vitest/ui@1.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/vitest-dev/vitest",
+        "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE"
+    },
+    "axe-core@4.8.3": {
+        "licenses": "MPL-2.0",
+        "repository": "https://github.com/dequelabs/axe-core",
+        "licenseUrl": "https://github.com/dequelabs/axe-core/raw/HEAD/LICENSE"
+    },
+    "cypress-axe@1.5.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/component-driven/cypress-axe",
+        "licenseUrl": "https://github.com/component-driven/cypress-axe/raw/HEAD/License.md"
+    },
+    "cypress-real-events@1.13.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/dmtrKovalenko/cypress-real-events",
+        "licenseUrl": "https://github.com/dmtrKovalenko/cypress-real-events"
+    },
+    "cypress@13.6.2": {
+        "licenses": "MIT",
+        "repository": "https://github.com/cypress-io/cypress",
+        "licenseUrl": "https://cypress.io"
+    },
+    "esbuild@0.19.11": {
+        "licenses": "MIT",
+        "repository": "https://github.com/evanw/esbuild",
+        "licenseUrl": "https://github.com/evanw/esbuild/raw/HEAD/LICENSE.md"
+    },
+    "eslint-config-google@0.14.0": {
+        "licenses": "Apache-2.0",
+        "repository": "https://github.com/google/eslint-config-google",
+        "licenseUrl": "https://github.com/google/eslint-config-google/raw/HEAD/LICENSE"
+    },
+    "eslint-config-prettier@9.1.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/prettier/eslint-config-prettier",
+        "licenseUrl": "https://github.com/prettier/eslint-config-prettier/raw/HEAD/LICENSE"
+    },
+    "eslint@8.56.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/eslint/eslint",
+        "licenseUrl": "https://github.com/eslint/eslint/raw/HEAD/LICENSE"
+    },
+    "github-markdown-css@5.5.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/sindresorhus/github-markdown-css",
+        "licenseUrl": "https://github.com/sindresorhus/github-markdown-css/raw/HEAD/license"
+    },
+    "highlight.js@11.9.0": {
+        "licenses": "BSD-3-Clause",
+        "repository": "https://github.com/highlightjs/highlight.js",
+        "licenseUrl": "https://github.com/highlightjs/highlight.js/raw/HEAD/LICENSE"
+    },
+    "junit-report-builder@3.1.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/davidparsson/junit-report-builder",
+        "licenseUrl": "https://github.com/davidparsson/junit-report-builder/raw/HEAD/LICENSE"
+    },
+    "lint-staged@15.2.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/okonet/lint-staged",
+        "licenseUrl": "https://github.com/okonet/lint-staged/raw/HEAD/LICENSE"
+    },
+    "lit@2.8.0": {
+        "licenses": "BSD-3-Clause",
+        "repository": "https://github.com/lit/lit",
+        "licenseUrl": "https://github.com/lit/lit/raw/HEAD/LICENSE"
+    },
+    "marked@11.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/markedjs/marked",
+        "licenseUrl": "https://github.com/markedjs/marked/raw/HEAD/LICENSE.md"
+    },
+    "postcss-prefix-selector@1.16.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/RadValentin/postcss-prefix-selector",
+        "licenseUrl": "https://github.com/RadValentin/postcss-prefix-selector/raw/HEAD/LICENSE"
+    },
+    "postcss@8.4.32": {
+        "licenses": "MIT",
+        "repository": "https://github.com/postcss/postcss",
+        "licenseUrl": "https://github.com/postcss/postcss/raw/HEAD/LICENSE"
+    },
+    "prettier@3.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/prettier/prettier",
+        "licenseUrl": "https://github.com/prettier/prettier/raw/HEAD/LICENSE"
+    },
+    "resolve-pkg@2.0.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/sindresorhus/resolve-pkg",
+        "licenseUrl": "https://github.com/sindresorhus/resolve-pkg/raw/HEAD/license"
+    },
+    "sass@1.69.6": {
+        "licenses": "MIT",
+        "repository": "https://github.com/sass/dart-sass",
+        "licenseUrl": "https://github.com/sass/dart-sass/raw/HEAD/LICENSE"
+    },
+    "stylelint-config-recommended-scss@14.0.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/stylelint-scss/stylelint-config-recommended-scss",
+        "licenseUrl": "https://github.com/stylelint-scss/stylelint-config-recommended-scss/raw/HEAD/LICENSE"
+    },
+    "stylelint-config-standard@36.0.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/stylelint/stylelint-config-standard",
+        "licenseUrl": "https://github.com/stylelint/stylelint-config-standard/raw/HEAD/LICENSE"
+    },
+    "stylelint-scss@6.0.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/stylelint-scss/stylelint-scss",
+        "licenseUrl": "https://github.com/stylelint-scss/stylelint-scss/raw/HEAD/LICENSE"
+    },
+    "stylelint@16.1.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/stylelint/stylelint",
+        "licenseUrl": "https://github.com/stylelint/stylelint/raw/HEAD/LICENSE"
+    },
+    "tsup@8.0.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/egoist/tsup",
+        "licenseUrl": "https://github.com/egoist/tsup/raw/HEAD/LICENSE"
+    },
+    "turbo@1.11.2": {
+        "licenses": "MPL-2.0",
+        "repository": "https://github.com/vercel/turbo",
+        "licenseUrl": "https://github.com/vercel/turbo/raw/HEAD/LICENSE"
+    },
+    "typescript@5.3.3": {
+        "licenses": "Apache-2.0",
+        "repository": "https://github.com/Microsoft/TypeScript",
+        "licenseUrl": "https://github.com/Microsoft/TypeScript/raw/HEAD/LICENSE.txt"
+    },
+    "vite-tsconfig-paths@4.2.3": {
+        "licenses": "MIT",
+        "repository": "https://github.com/aleclarson/vite-tsconfig-paths",
+        "licenseUrl": "https://github.com/aleclarson/vite-tsconfig-paths/raw/HEAD/LICENSE"
+    },
+    "vite@5.0.10": {
+        "licenses": "MIT",
+        "repository": "https://github.com/vitejs/vite",
+        "licenseUrl": "https://github.com/vitejs/vite/raw/HEAD/LICENSE.md"
+    },
+    "vitest@1.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/vitest-dev/vitest",
+        "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE.md"
+    },
+    "yargs@17.7.2": {
+        "licenses": "MIT",
+        "repository": "https://github.com/yargs/yargs",
+        "licenseUrl": "https://github.com/yargs/yargs/raw/HEAD/LICENSE"
+    }
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@cas-smartdesign/virtual-list",
+  "version": "6.2.2",
+  "description": "A virtualized list element with SmartDesign look and feel.",
+  "main": "dist/virtual-list-with-externals.js",
+  "module": "dist/virtual-list.mjs",
+  "license": "SEE LICENSE IN LICENSE",
+  "types": "dist/virtual-list.d.ts",
+  "dependencies": {
+    "lit": "^2.8.0",
+    "@cas-smartdesign/list-item": "^7.2.2"
+  },
+  "devDependencies": {
+    "@cas-smartdesign/element-utils": "^1.0.2",
+    "@cas-smartdesign/element-preview": "^0.2.1",
+    "@cas-smartdesign/license-generator": "^1.6.1"
+  },
+  "files": [
+    "dist",
+    "npm-third-party-licenses.json"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "version": "pnpm version",
+    "generate-declaration": "tsc -p tsconfig.types.json",
+    "build:no-license": "vite build && pnpm generate-declaration && vite build --mode documentation",
+    "build": "pnpm generate-license && pnpm build:no-license",
+    "watch": "vite build --watch",
+    "dev": "vite",
+    "generate-license": "sd-license-generator --r ../../"
+  }
+}

package/readme.md

@@ -0,0 +1,84 @@
+# @cas-smartdesign/virtual-list
+
+A list element with ui-virtualization and infinite scrolling.
+
+## Attributes
+
+- `item-height`
+  - Defines the height in px of the list items.
+- `item-count`
+  - Defines the virtual number of items in the list.
+- `selection-type`
+  - Defines the mode of selection handling
+  - Available values: "trigger-only", "single", "multi"
+- `focus-index`
+  - Defines the index of currently focused item
+- `role`: string
+  - Aria attribute, default value is "list"
+
+## Properties
+
+The following properties are available:
+
+- `items` **_any[] (default=empty)_**
+  - Contains data for the currently rendered list items.
+- `itemGenerator` **_ItemGenerator (default is the generator inside the list-item element)_**
+  - A method that renders the list items.
+- `itemHeight` **_number (default=50)_**
+  - Reflects the corresponding attribute
+- `itemCount` **_number (default=0)_**
+  - Reflects the corresponding attribute
+- `selectionType` **_string (default="trigger-only")_**
+  - Reflects the corresponding attribute
+- `focusIndex` **_number (default=undefined)_**
+  - Reflects the corresponding attribute
+- `selectedIndices` **_number[] (default=empty)_**
+  - Contains the indices of the selected items.
+
+## Custom events
+
+- `data-request`
+  - Sent after scrolling the list
+  - Contains the starting and ending index that is visible in the list
+- `selection`
+  - Dispatched when one of the items is selected/deselected
+  - Contains the index of the item and a `selected` flag which is when false indicates that the item is deselected
+  - The `hasModifier` property is true if mouse wheel or ctrl/meta key is down while selection. Note that the auto scroll feature is disabled while middle mouse click.
+
+## Public methods
+
+- `getListItem`
+  - Returns the DOM node that represents the item with the given index
+  - Note that only visible items can be accessed this way
+- `scrollToItem`
+  - Scrolls the list to the item with the given index
+- `increaseWidthOnNextRenderIfNeeded`
+  - The width of the list is increased on the next rendering phase to an extent, that all texts in the list-items are visible without ellipsis.
+  - If the list has already reached it's maximum width, then line clamp may be enabled on the items to wrap the content if possible.
+  - Note that this functionality works only if `sd-list-items` are rendered in the list
+
+## A11Y
+
+The default _role_ is `listbox`, with the corresponding `option` role on the items, since most of the time this element is used with a selection state.
+It ensures the items have an associated id which is used to update `aria-activedescendant`.
+The selection is also marked with `aria-selected`.
+The items are updated with the `aria-setsize` & `aria-posinset` attributes. The former one is -1 if the final size is not known to indicate infinite scrolling state.
+
+Please note that the selection type `trigger-only` does not provide any accessibility event in case of a selection,
+but it can be added externally for example with an `aria-live` area where the content can notify about the selection.
+Although normally the page would change by such a selection, so it may not be necessary to do this notification.
+
+## Attributes managed on items
+
+In addition to above mentioned aria attributes, the items are marked with certain custom attributes:
+
+- `focused`
+  - Set if the item is currently focused.
+- `selected`
+  - Set if the item is selected.
+- `item-index`
+  - The index of the item.
+- `last`
+  - Set if the item is the last in the currently rendered set of items.
+
+## Examples