diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 00000000..46253e12 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1 @@ +github: metonym diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 00000000..2c0a64f0 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,8 @@ +blank_issues_enabled: true +contact_links: + - name: Ask a question + url: https://github.com/carbon-design-system/carbon-components-svelte/discussions + about: Please ask and answer questions here. + - name: Carbon Design System Discord + url: https://discord.gg/J7JEUEkTRX + about: Chat with us on Discord. diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml new file mode 100644 index 00000000..4bfc879a --- /dev/null +++ b/.github/workflows/checks.yml @@ -0,0 +1,60 @@ +on: + pull_request: + paths-ignore: + - "**.md" + - "docs/**" + - "examples/**" + push: + branches: [master] + paths-ignore: + - "**.md" + - "docs/**" + - "examples/**" + +permissions: + contents: read + +jobs: + lint: + runs-on: macos-15-xlarge + steps: + - uses: actions/checkout@v5 + - uses: actions/setup-node@v5 + with: + node-version: 22 + cache: "npm" + - run: npm ci + - run: npm run lint + + test: + runs-on: macos-15-xlarge + steps: + - uses: actions/checkout@v5 + - uses: actions/setup-node@v5 + with: + node-version: 22 + cache: "npm" + - run: npm ci + - run: npm run test + + types: + runs-on: macos-15-xlarge + steps: + - uses: actions/checkout@v5 + - uses: actions/setup-node@v5 + with: + node-version: 22 + cache: "npm" + - run: npm ci + - run: npm run test:src-types + - run: npm run test:types + + deploy-docs: + if: github.ref == 'refs/heads/master' + needs: [lint, test, types] + runs-on: macos-15-xlarge + steps: + - name: Trigger deploy + env: + deploy_url: ${{ secrets.RENDER_DEPLOY_HOOK_URL }} + run: curl -f "$deploy_url" diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml new file mode 100644 index 00000000..c98236e1 --- /dev/null +++ b/.github/workflows/release.yml @@ -0,0 +1,40 @@ +on: + push: + tags: + - "v*" + +jobs: + release: + runs-on: macos-latest-xlarge + permissions: + contents: read + id-token: write + steps: + - uses: actions/checkout@v5 + - uses: actions/setup-node@v5 + with: + node-version: 22 + registry-url: "https://registry.npmjs.org" + + - name: Install dependencies + run: npm install + + - name: Build docs + run: npm run build:docs + + - name: Prune package.json + run: npx culls --preserve=svelte + + - name: Publish package (stable) + if: ${{ ! contains(github.ref, '-next') }} + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} + run: | + npm publish --provenance --access public + + - name: Publish package (next) + if: ${{ contains(github.ref, '-next') }} + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} + run: | + npm publish --provenance --access public --tag next diff --git a/.gitignore b/.gitignore index b59f2c48..5247532c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,10 +1,4 @@ -/coverage -/lib -/node_modules -/css +node_modules .DS_Store -yarn-debug.log* -yarn-error.log* -*.tgz .vscode -.idea +.idea \ No newline at end of file diff --git a/.prettierignore b/.prettierignore index 89e9c684..ce337c7f 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,9 +1,9 @@ -/coverage -/lib /css -/**/__sapper__ -/**/.routify -/**/dist -/**/client -/**/build -*.svx \ No newline at end of file +/types +.svelte-kit +.routify +dist +client +build +*.svx +COMPONENT_API.json \ No newline at end of file diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 0f44cad7..00000000 --- a/.travis.yml +++ /dev/null @@ -1,6 +0,0 @@ -language: node_js -node_js: 12 -cache: yarn -script: - - yarn check-types - - yarn prepack diff --git a/CHANGELOG.md b/CHANGELOG.md index 780c1dde..6adc2484 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,29 +1,2296 @@ # Changelog -All notable changes to this project will be documented in this file. +All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. -The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), -and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +### [0.89.7](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.89.6...v0.89.7) (2025-09-05) - +### Bug Fixes -## [0.25.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.25.0) - 2020-11-27 +- **combo-box:** address accessibility issues ([#2186](https://github.com/carbon-design-system/carbon-components-svelte/issues/2186)) ([2fc884c](https://github.com/carbon-design-system/carbon-components-svelte/commit/2fc884cacabfffcf7779d6ef9ba01dece0bf5d86)), closes [#2172](https://github.com/carbon-design-system/carbon-components-svelte/issues/2172) +- **data-table:** handle dynamic `headers` gracefully ([#2195](https://github.com/carbon-design-system/carbon-components-svelte/issues/2195)) ([6d0d3b1](https://github.com/carbon-design-system/carbon-components-svelte/commit/6d0d3b108bb4595d878fda20736c40b9656d14d7)), closes [#2193](https://github.com/carbon-design-system/carbon-components-svelte/issues/2193) +- **overflow-menu:** avoid dynamic style injection for performance ([#2198](https://github.com/carbon-design-system/carbon-components-svelte/issues/2198)) ([14edf41](https://github.com/carbon-design-system/carbon-components-svelte/commit/14edf41e57fea1ddbb2cf24c37e79475849bdea1)), closes [#2197](https://github.com/carbon-design-system/carbon-components-svelte/issues/2197) +- **pagination:** `on:change` dispatches with correct value ([#2194](https://github.com/carbon-design-system/carbon-components-svelte/issues/2194)) ([44a6cc0](https://github.com/carbon-design-system/carbon-components-svelte/commit/44a6cc0dfcbd3cdad1b442a760c9f604e58d56e6)) + +### [0.89.6](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.89.5...v0.89.6) (2025-08-16) + +### Bug Fixes + +- **toggle:** avoid dispatching `toggle` event on state change ([#2184](https://github.com/carbon-design-system/carbon-components-svelte/issues/2184)) ([0df727b](https://github.com/carbon-design-system/carbon-components-svelte/commit/0df727b704d6cc577681dc682269a6e224ddbb6e)) + +### [0.89.5](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.89.4...v0.89.5) (2025-08-05) + +### Bug Fixes + +- **checkbox:** prevent infinite effect loop when binding to same object ([#2178](https://github.com/carbon-design-system/carbon-components-svelte/issues/2178)) ([c7ad1eb](https://github.com/carbon-design-system/carbon-components-svelte/commit/c7ad1ebdd3764235f460abd95cdb7d1d389983d9)), closes [#2177](https://github.com/carbon-design-system/carbon-components-svelte/issues/2177) + +### [0.89.4](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.89.3...v0.89.4) (2025-06-10) + +### Bug Fixes + +- **multi-select:** forward `on:input` for filterable variant ([#2170](https://github.com/carbon-design-system/carbon-components-svelte/issues/2170)) ([aecc4e8](https://github.com/carbon-design-system/carbon-components-svelte/commit/aecc4e8eec6571515233ec76ca06218814a279a7)) + +### [0.89.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.89.2...v0.89.3) (2025-06-07) + +### Bug Fixes + +- **combo-box:** "Escape" key clears input value ([#2169](https://github.com/carbon-design-system/carbon-components-svelte/issues/2169)) ([632320a](https://github.com/carbon-design-system/carbon-components-svelte/commit/632320ae3b8d9c602add0f4f7c708fc643cb7ffc)), closes [#2167](https://github.com/carbon-design-system/carbon-components-svelte/issues/2167) +- **combo-box:** clear button supports "Space" key ([#2168](https://github.com/carbon-design-system/carbon-components-svelte/issues/2168)) ([95c06a8](https://github.com/carbon-design-system/carbon-components-svelte/commit/95c06a83b3afcbb76acfc0a5efe2f178d333ff19)), closes [#2166](https://github.com/carbon-design-system/carbon-components-svelte/issues/2166) + +### [0.89.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.89.1...v0.89.2) (2025-04-28) + +### Bug Fixes + +- **composed-modal:** ignore a11y warning in Svelte 5 ([#2159](https://github.com/carbon-design-system/carbon-components-svelte/issues/2159)) ([024d774](https://github.com/carbon-design-system/carbon-components-svelte/commit/024d77493c93e7823e4781a1a60aaf350d289d52)) +- **pagination:** use `toLocaleString` for default text formatting ([#2161](https://github.com/carbon-design-system/carbon-components-svelte/issues/2161)) ([cdf5659](https://github.com/carbon-design-system/carbon-components-svelte/commit/cdf5659fa0177da77dc8ea1ccffdec54b746954b)) +- **pagination:** window `totalItems` for performance ([#2160](https://github.com/carbon-design-system/carbon-components-svelte/issues/2160)) ([ed3928b](https://github.com/carbon-design-system/carbon-components-svelte/commit/ed3928bb01ecca2fa63f551938dbee1c1829a978)), closes [#2156](https://github.com/carbon-design-system/carbon-components-svelte/issues/2156) +- **to-hierarchy:** revert to previous implementation ([96d37cc](https://github.com/carbon-design-system/carbon-components-svelte/commit/96d37cc490f28830264c35c84447ee4526256314)) + +### [0.89.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.89.0...v0.89.1) (2025-04-21) + +### Bug Fixes + +- **toolbar-search:** re-filter rows if `DataTable` rows change ([#2154](https://github.com/carbon-design-system/carbon-components-svelte/issues/2154)) ([f09c2e2](https://github.com/carbon-design-system/carbon-components-svelte/commit/f09c2e2c311c15f633db8dc45930d8e58a4b362d)), closes [#2143](https://github.com/carbon-design-system/carbon-components-svelte/issues/2143) + +### [0.89.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.88.4...v0.89.0) (2025-04-18) + +### Features + +- **combo-box:** add `hideLabel` prop ([#2153](https://github.com/carbon-design-system/carbon-components-svelte/issues/2153)) ([436dea4](https://github.com/carbon-design-system/carbon-components-svelte/commit/436dea47e8da35753a257c9b2bd6f33338e95ba5)) + +### Bug Fixes + +- **select:** falsy item `text` should fallback to `value` ([#2152](https://github.com/carbon-design-system/carbon-components-svelte/issues/2152)) ([61ea8dd](https://github.com/carbon-design-system/carbon-components-svelte/commit/61ea8dd82c2f9863dfe5f8a882e73624b994d9e5)) + +### [0.88.4](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.88.3...v0.88.4) (2025-03-24) + +### Bug Fixes + +- **list-box-selection:** fix `aria-label` for clear button ([#2134](https://github.com/carbon-design-system/carbon-components-svelte/issues/2134)) ([dd1338f](https://github.com/carbon-design-system/carbon-components-svelte/commit/dd1338ffc47926a13e231d4a0f724e923f2219e2)) +- **list-box:** correct button/description translations based on selection count ([#2139](https://github.com/carbon-design-system/carbon-components-svelte/issues/2139)) ([1a5f2d8](https://github.com/carbon-design-system/carbon-components-svelte/commit/1a5f2d8e67734bfda20272ae6a77d13b3837416d)) +- **list-box:** set `aria-disabled` if `disabled` ([#2125](https://github.com/carbon-design-system/carbon-components-svelte/issues/2125)) ([#2138](https://github.com/carbon-design-system/carbon-components-svelte/issues/2138)) ([9b61af0](https://github.com/carbon-design-system/carbon-components-svelte/commit/9b61af0306b422acf1e7cdde278e517740f667c5)), closes [#2130](https://github.com/carbon-design-system/carbon-components-svelte/issues/2130) +- **radio-button:** forward `focus`, `blur` events ([#2135](https://github.com/carbon-design-system/carbon-components-svelte/issues/2135)) ([1462e30](https://github.com/carbon-design-system/carbon-components-svelte/commit/1462e300d69f0cd7ee5476dfe3a7ea892ac8f4ad)), closes [#2131](https://github.com/carbon-design-system/carbon-components-svelte/issues/2131) +- **radio-tile:** allow standalone `RadioTile` usage ([#2136](https://github.com/carbon-design-system/carbon-components-svelte/issues/2136)) ([ca9beeb](https://github.com/carbon-design-system/carbon-components-svelte/commit/ca9beebaeac7eaed8079c010a86a78926b00147f)) +- **text-area:** allow visually hidden label ([#2137](https://github.com/carbon-design-system/carbon-components-svelte/issues/2137)) ([43511e0](https://github.com/carbon-design-system/carbon-components-svelte/commit/43511e09ecf312c1b8e9339856b9d7d0785036de)) + +### [0.88.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.88.2...v0.88.3) (2025-03-19) + +### Bug Fixes + +- Revert **list-box:** use `aria-disabled` instead of invalid `disabled` attribute ([#2125](https://github.com/carbon-design-system/carbon-components-svelte/issues/2125)) ([e1b3ef2](https://github.com/carbon-design-system/carbon-components-svelte/commit/e1b3ef22c9ee09474bacadbb0b22b41326566bab)) + +### [0.88.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.88.1...v0.88.2) (2025-03-19) + +### Bug Fixes + +- **combo-box:** fix typing when refocusing input ([9e3d830](https://github.com/carbon-design-system/carbon-components-svelte/commit/9e3d83031e69889472c4e84be256ea242854cf81)) +- **list-box:** use `aria-disabled` instead of invalid `disabled` attribute ([#2125](https://github.com/carbon-design-system/carbon-components-svelte/issues/2125)) ([e1b3ef2](https://github.com/carbon-design-system/carbon-components-svelte/commit/e1b3ef22c9ee09474bacadbb0b22b41326566bab)) +- **multi-select:** fix keyboard navigation for disabled items ([#2129](https://github.com/carbon-design-system/carbon-components-svelte/issues/2129)) ([e7939ff](https://github.com/carbon-design-system/carbon-components-svelte/commit/e7939ff0e21c3430c9eea74c503b7c35f6823445)), closes [#2128](https://github.com/carbon-design-system/carbon-components-svelte/issues/2128) +- **notification:** remove invalid `kind` prop from markup ([#2126](https://github.com/carbon-design-system/carbon-components-svelte/issues/2126)) ([e85d7ef](https://github.com/carbon-design-system/carbon-components-svelte/commit/e85d7efc5ed15f5236d074fd7981ae527d9e5ab5)) +- **theme:** remove invalid `themes` prop from markup ([#2127](https://github.com/carbon-design-system/carbon-components-svelte/issues/2127)) ([5987b61](https://github.com/carbon-design-system/carbon-components-svelte/commit/5987b61a5522fff09468bddd586eed4a537edcc8)) + +### [0.88.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.88.0...v0.88.1) (2025-03-12) + +### Bug Fixes + +- **select:** falsy item `text` should not override `value` ([#2118](https://github.com/carbon-design-system/carbon-components-svelte/issues/2118)) ([663b79a](https://github.com/carbon-design-system/carbon-components-svelte/commit/663b79ad054d14a91a8bf700feb62dcf50976eb8)), closes [#2117](https://github.com/carbon-design-system/carbon-components-svelte/issues/2117) +- **ui-shell:** `HeaderAction` uses dark color scheme ([#2119](https://github.com/carbon-design-system/carbon-components-svelte/issues/2119)) ([7ff93ad](https://github.com/carbon-design-system/carbon-components-svelte/commit/7ff93ad2dac489859d5b4a83c1e359a6507718b4)) + +### [0.88.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.7...v0.88.0) (2025-03-09) + +### Features + +- **data-table:** allow custom `inputName` for radio/checkbox ([#2087](https://github.com/carbon-design-system/carbon-components-svelte/issues/2087)) ([7481b9a](https://github.com/carbon-design-system/carbon-components-svelte/commit/7481b9a995dfbc8c2fbaeaae143c8372cf5fce66)), closes [#2085](https://github.com/carbon-design-system/carbon-components-svelte/issues/2085) +- **ui-shell:** `HeaderAction` supports tooltip ([#2111](https://github.com/carbon-design-system/carbon-components-svelte/issues/2111)) ([24b9cbc](https://github.com/carbon-design-system/carbon-components-svelte/commit/24b9cbc9c343537e5e74799ef8289bd29396cf04)), closes [#2110](https://github.com/carbon-design-system/carbon-components-svelte/issues/2110) + +### [0.87.7](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.6...v0.87.7) (2025-03-07) + +### Bug Fixes + +- **select:** avoid infinite update loop in Svelte 5 ([#2108](https://github.com/carbon-design-system/carbon-components-svelte/issues/2108)) ([9b4bfa6](https://github.com/carbon-design-system/carbon-components-svelte/commit/9b4bfa6f86e23155516db156cbe1c980f3c699e8)), closes [#2107](https://github.com/carbon-design-system/carbon-components-svelte/issues/2107) + +### [0.87.6](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.5...v0.87.6) (2025-02-24) + +### Bug Fixes + +- **overflow-menu:** add `aria-controls` to trigger button ([#2100](https://github.com/carbon-design-system/carbon-components-svelte/issues/2100)) ([b7297d4](https://github.com/carbon-design-system/carbon-components-svelte/commit/b7297d452a7813c02f3c89280787292b1c46acec)) + +### [0.87.5](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.4...v0.87.5) (2025-02-04) + +### Bug Fixes + +- **tag:** allow `on:close` to work with Svelte 5 ([#2097](https://github.com/carbon-design-system/carbon-components-svelte/issues/2097)) ([6e65ef3](https://github.com/carbon-design-system/carbon-components-svelte/commit/6e65ef39e7ff9a3c0ee25b7945a62584e9b7441e)), closes [#2096](https://github.com/carbon-design-system/carbon-components-svelte/issues/2096) + +### [0.87.4](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.3...v0.87.4) (2025-02-02) + +### Bug Fixes + +- **types:** loosen `icon` prop type to `any` ([#2095](https://github.com/carbon-design-system/carbon-components-svelte/issues/2095)) ([6bf72d4](https://github.com/carbon-design-system/carbon-components-svelte/commit/6bf72d46024ad2ce03651f28fc1a2a95ec03385d)) + +### [0.87.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.2...v0.87.3) (2025-01-30) + +### Bug Fixes + +- **overflow-menu:** support Svelte 5 ([88f4304](https://github.com/carbon-design-system/carbon-components-svelte/commit/88f4304d5a7c9b38b3cabda677233bef48fb9e3a)), closes [#2092](https://github.com/carbon-design-system/carbon-components-svelte/issues/2092) + +### [0.87.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.1...v0.87.2) (2025-01-22) + +### Bug Fixes + +- **text-area:** counter supports null `value` ([#2089](https://github.com/carbon-design-system/carbon-components-svelte/issues/2089)) ([76eec84](https://github.com/carbon-design-system/carbon-components-svelte/commit/76eec84c5458d07d61d057d9ff06938e244dbb2c)) + +### [0.87.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.0...v0.87.1) (2025-01-19) + +### Bug Fixes + +- **data-table:** improve `expandable` accessibility ([#2086](https://github.com/carbon-design-system/carbon-components-svelte/issues/2086)) ([e874ac1](https://github.com/carbon-design-system/carbon-components-svelte/commit/e874ac19d778a00c0bba9be65d10be7e6c9104dd)) +- **data-table:** prefix internal ID for radio button, checkbox ([#2082](https://github.com/carbon-design-system/carbon-components-svelte/issues/2082)) ([dd6cbac](https://github.com/carbon-design-system/carbon-components-svelte/commit/dd6cbac3ee1728dbcba5cd1d8faa43941e2a198e)), closes [#2081](https://github.com/carbon-design-system/carbon-components-svelte/issues/2081) +- **dropdown:** avoid manual field `blur` ([c194c80](https://github.com/carbon-design-system/carbon-components-svelte/commit/c194c80e29ab36935af71adb9e166e9a16b70910)), closes [#2083](https://github.com/carbon-design-system/carbon-components-svelte/issues/2083) +- **multi-select:** avoid manual field `blur` ([fb6719b](https://github.com/carbon-design-system/carbon-components-svelte/commit/fb6719b1aee35aa45004d82e3b923b4ad45dff5d)), closes [#2083](https://github.com/carbon-design-system/carbon-components-svelte/issues/2083) + +### [0.87.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.86.2...v0.87.0) (2024-12-09) + +### Features + +- add `toHierarchy` utility to normalize flat data into `nodes` for `TreeView`, `RecursiveList` ([#2072](https://github.com/carbon-design-system/carbon-components-svelte/issues/2072)) ([48afd18](https://github.com/carbon-design-system/carbon-components-svelte/commit/48afd18e5e01c2839024b8ddb31038267bcedeb8)) + +### Bug Fixes + +- **tooltip-icon:** `button` should have explicit `type` ([#2071](https://github.com/carbon-design-system/carbon-components-svelte/issues/2071)) ([18c964e](https://github.com/carbon-design-system/carbon-components-svelte/commit/18c964e579a3762b8022751bf0ed5313b78b22ba)) + +### [0.86.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.86.1...v0.86.2) (2024-11-30) + +### Bug Fixes + +- **multi-select:** fix sorting behavior ([c3a390f](https://github.com/carbon-design-system/carbon-components-svelte/commit/c3a390f3fef072c6b736e33a85a2ae772df12e52)), closes [#2066](https://github.com/carbon-design-system/carbon-components-svelte/issues/2066) + +## [0.86.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.86.0...v0.86.1) (2024-11-22) + +### Bug Fixes + +- **tree-view:** do not flatten original `nodes` ([#2056](https://github.com/carbon-design-system/carbon-components-svelte/issues/2056)) ([e488c88](https://github.com/carbon-design-system/carbon-components-svelte/commit/e488c8837146432330ebbf2f9182a8a69eab6b70)) + +## [0.86.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.85.4...v0.86.0) (2024-11-20) + +### ⚠ BREAKING CHANGES + +- **package:** set `type="module"` in `package.json` +- **package:** remove bundled ESM/UMD support +- **treeview:** rename `children` prop to `nodes` for Svelte 5 compatibility +- **recursive-list:** rename `children` prop to `nodes` for Svelte 5 compatibility +- **types:** use type alias instead of interface for exported component props ([6fbd8ae](https://github.com/carbon-design-system/carbon-components-svelte/commit/6fbd8ae6a90eabde74fb5481c980716eba477c31)) + +### Features + +- **data-table:** support TypeScript generics ([#1954](https://github.com/carbon-design-system/carbon-components-svelte/issues/1954)) ([dd43224](https://github.com/carbon-design-system/carbon-components-svelte/commit/dd43224119905c3a26a2369f836338c18fcbafba)) + +### Bug Fixes + +- **data-table:** (Svelte 5 compatibility) handle `ToolbarSearch` filtering in `DataTable` ([#2037](https://github.com/carbon-design-system/carbon-components-svelte/issues/2037)) ([3192824](https://github.com/carbon-design-system/carbon-components-svelte/commit/3192824322faef7c0c012eb246bb6ef9da7f78dc)) +- **multi-select:** (Svelte 5 compatibility) avoid cyclic dependency ([#2034](https://github.com/carbon-design-system/carbon-components-svelte/issues/2034)) ([1acd713](https://github.com/carbon-design-system/carbon-components-svelte/commit/1acd7135372eeabf002dacc80e39162989427140)) +- **toolbar-menu:** (Svelte 5 compatibility) remove redundant menu offset ([#2047](https://github.com/carbon-design-system/carbon-components-svelte/issues/2047)) ([7e17394](https://github.com/carbon-design-system/carbon-components-svelte/commit/7e173943ac783756521c4957a1c24b5288ab45b7)), closes [#2040](https://github.com/carbon-design-system/carbon-components-svelte/issues/2040) +- **checkbox:** (Svelte 5 compatibility) bind `indeterminate` ([#2044](https://github.com/carbon-design-system/carbon-components-svelte/issues/2044)) ([9d5e7e3](https://github.com/carbon-design-system/carbon-components-svelte/commit/9d5e7e31efb2d439b18ba0bf350b712377e160a7)), closes [#2039](https://github.com/carbon-design-system/carbon-components-svelte/issues/2039) + +### [0.85.4](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.85.3...v0.85.4) (2024-11-09) + +### Bug Fixes + +- **combo-box:** fix types for `on:clear` ([#2020](https://github.com/carbon-design-system/carbon-components-svelte/issues/2020)) ([0831e87](https://github.com/carbon-design-system/carbon-components-svelte/commit/0831e871358fe012e9907699f1423b7e36dba0da)) +- **data-table:** fix `DataTableValue` type reference in `DataTable` ([#2023](https://github.com/carbon-design-system/carbon-components-svelte/issues/2023)) ([44daa77](https://github.com/carbon-design-system/carbon-components-svelte/commit/44daa775d5e4dc9aef66eae0e661f14fb5b41354)) +- **theme:** `Theme` correctly imports `toggle`, `select` props ([#2019](https://github.com/carbon-design-system/carbon-components-svelte/issues/2019)) ([49b5def](https://github.com/carbon-design-system/carbon-components-svelte/commit/49b5def8153f5eec523d56e2a2c6d4cc3a36dcb5)), closes [#2018](https://github.com/carbon-design-system/carbon-components-svelte/issues/2018) +- **toolbar-search:** fix types for `on:clear` ([#2022](https://github.com/carbon-design-system/carbon-components-svelte/issues/2022)) ([58e6021](https://github.com/carbon-design-system/carbon-components-svelte/commit/58e6021b08f311a5bb3cc7c7f181443cc633c8e4)) +- **types:** delete extraneous `icons/Search.svelte.d.ts` ([#2025](https://github.com/carbon-design-system/carbon-components-svelte/issues/2025)) ([951d686](https://github.com/carbon-design-system/carbon-components-svelte/commit/951d6860423fc05df9f46e29fb19916b89c48466)) +- **types:** fix types for `on:paste` event ([3167e44](https://github.com/carbon-design-system/carbon-components-svelte/commit/3167e449fdaf19abb4cdf1e2bf3f5bec24865f89)) + +### [0.85.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.85.2...v0.85.3) (2024-10-25) + +### Bug Fixes + +- address Svelte 5 warnings ([#2011](https://github.com/carbon-design-system/carbon-components-svelte/issues/2011)) ([43fccac](https://github.com/carbon-design-system/carbon-components-svelte/commit/43fccac1c6273d9aa83b8c26a5f8cecec667db59)) + +### [0.85.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.85.1...v0.85.2) (2024-08-14) + +### Bug Fixes + +- **header-action:** allow vertical scroll when expanded ([#1992](https://github.com/carbon-design-system/carbon-components-svelte/issues/1992)) ([61eceb0](https://github.com/carbon-design-system/carbon-components-svelte/commit/61eceb0caac20d92ce58c23d26908530a7e32dbe)) + +### [0.85.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.85.0...v0.85.1) (2024-08-09) + +### Bug Fixes + +- **multi-select:** fix `filterItem` return type ([#1972](https://github.com/carbon-design-system/carbon-components-svelte/issues/1972)) ([6140c3c](https://github.com/carbon-design-system/carbon-components-svelte/commit/6140c3c5a91a879889be33080e1aa8b9183982d4)) +- **search:** collapse expandable search if value is falsy ([#1987](https://github.com/carbon-design-system/carbon-components-svelte/issues/1987)) ([216d5a3](https://github.com/carbon-design-system/carbon-components-svelte/commit/216d5a39b14ddad600159c1159b6a2d38095cfaf)), closes [#1981](https://github.com/carbon-design-system/carbon-components-svelte/issues/1981) +- **text-area:** type `value` prop as nullable ([#1933](https://github.com/carbon-design-system/carbon-components-svelte/issues/1933)) ([47860ce](https://github.com/carbon-design-system/carbon-components-svelte/commit/47860ce1d7cc5f3b0363ab619dcfd74b3276eda7)) + +## [0.85.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.84.1...v0.85.0) (2024-03-23) + +### ⚠ BREAKING CHANGES + +- use `:global()` for custom UI Shell styles ([#1940](https://github.com/carbon-design-system/carbon-components-svelte/issues/1940)) ([d5a1148](https://github.com/carbon-design-system/carbon-components-svelte/commit/d5a11489f8ab9dc05751aa20c420ea4dc6249567)) + +### [0.84.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.84.0...v0.84.1) (2024-03-16) + +### Bug Fixes + +- **checkbox:** forward `on:focus`, `on:blur` to `Checkbox` and `InlineCheckbox` ([#1937](https://github.com/carbon-design-system/carbon-components-svelte/issues/1937)) ([6364b23](https://github.com/carbon-design-system/carbon-components-svelte/commit/6364b23030cc0761aa6a0561a1673e89dde47868)) +- **data-table:** loosen `sort` return type to be a `number` ([#1935](https://github.com/carbon-design-system/carbon-components-svelte/issues/1935)) ([9132bf8](https://github.com/carbon-design-system/carbon-components-svelte/commit/9132bf8e5a2d6ba70d17a0b4fcdea29d0785492c)), closes [#1934](https://github.com/carbon-design-system/carbon-components-svelte/issues/1934) + +### [0.84.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.83.0...v0.84.0) (2024-03-08) + +### Features + +- **ui-shell:** support button tooltip in `HeaderGlobalAction` ([#1894](https://github.com/carbon-design-system/carbon-components-svelte/issues/1894)) ([d8bc651](https://github.com/carbon-design-system/carbon-components-svelte/commit/d8bc65163eabacfee348d6248e90f683ac488aef)), closes [#1893](https://github.com/carbon-design-system/carbon-components-svelte/issues/1893) + +### Bug Fixes + +- **exports:** resolve imports with explicit \*.js extension ([#1927](https://github.com/carbon-design-system/carbon-components-svelte/issues/1927)) ([0405ede](https://github.com/carbon-design-system/carbon-components-svelte/commit/0405edee7d1696a157acab941488f8d3a750187f)), closes [#1925](https://github.com/carbon-design-system/carbon-components-svelte/issues/1925) + +## [0.83.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.11...v0.83.0) (2024-03-07) + +### ⚠ BREAKING CHANGES + +- **link:** do not render `p` for disabled link + +### Bug Fixes + +- avoid using reserved `$` for Svelte 5 compat ([a0d5028](https://github.com/carbon-design-system/carbon-components-svelte/commit/a0d5028540e1bcbb3b37bf488c11ea94f97b5fa7)) +- **link:** do not render `p` for disabled link ([8bffc17](https://github.com/carbon-design-system/carbon-components-svelte/commit/8bffc17d650144ed0d5b778766f79c33334f0275)), closes [#1924](https://github.com/carbon-design-system/carbon-components-svelte/issues/1924) +- **search:** hoist ignore `a11y autofocus` comment ([6152b78](https://github.com/carbon-design-system/carbon-components-svelte/commit/6152b784c1e6b19ff242524e6b0c8c98b0107788)) + +### [0.82.11](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.10...v0.82.11) (2024-02-26) + +### Bug Fixes + +- **code-snippet:** `showMoreLess={false}` should hide button ([4085536](https://github.com/carbon-design-system/carbon-components-svelte/commit/40855361891c2388c2b775803bcac937fbd6c1d6)), closes [#1536](https://github.com/carbon-design-system/carbon-components-svelte/issues/1536) +- **image-loader:** updated `src` should update the image ([0f318aa](https://github.com/carbon-design-system/carbon-components-svelte/commit/0f318aac7732c2b94ec0729d54416611fbd0d493)), closes [#1677](https://github.com/carbon-design-system/carbon-components-svelte/issues/1677) +- **overflow-menu:** use `offsetWidth`, `offsetHeight` to compute menu dimensions ([#1913](https://github.com/carbon-design-system/carbon-components-svelte/issues/1913)) ([2404244](https://github.com/carbon-design-system/carbon-components-svelte/commit/24042442213ca9daa0cf663aabf37b3544e9c364)) +- **toast-notification:** fire `on:clear` from timeout correctly ([9aabe3c](https://github.com/carbon-design-system/carbon-components-svelte/commit/9aabe3cbbb05712b71f5cad7c571b170c1f3a439)), closes [#1914](https://github.com/carbon-design-system/carbon-components-svelte/issues/1914) + +### [0.82.10](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.9...v0.82.10) (2024-02-12) + +### Bug Fixes + +- **slider:** dispatch `on:input` event ([#1906](https://github.com/carbon-design-system/carbon-components-svelte/issues/1906)) ([90dbd15](https://github.com/carbon-design-system/carbon-components-svelte/commit/90dbd1562b04df3cf4de28874b6e790ddca1db81)), closes [#1643](https://github.com/carbon-design-system/carbon-components-svelte/issues/1643) + +### [0.82.9](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.8...v0.82.9) (2024-02-07) + +### Bug Fixes + +- **context-menu:** prevent `on:contextmenu` default behavior only when opening menu ([#1911](https://github.com/carbon-design-system/carbon-components-svelte/issues/1911)) ([4ad522c](https://github.com/carbon-design-system/carbon-components-svelte/commit/4ad522c197d4a389a6187a499e9e54d5d8b3994a)), closes [#1909](https://github.com/carbon-design-system/carbon-components-svelte/issues/1909) +- **types:** improve `e.detail` type for dispatched events ([#1907](https://github.com/carbon-design-system/carbon-components-svelte/issues/1907)) ([6590457](https://github.com/carbon-design-system/carbon-components-svelte/commit/65904575743ba06344fb75e14685e42494c13cde)) + +### [0.82.8](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.7...v0.82.8) (2024-01-10) + +### Bug Fixes + +- **button:** forward `on:focus` event ([#1878](https://github.com/carbon-design-system/carbon-components-svelte/issues/1878)) ([5901872](https://github.com/carbon-design-system/carbon-components-svelte/commit/59018728df08db18ba85609e6db1c6dd8701d8bb)), closes [#1830](https://github.com/carbon-design-system/carbon-components-svelte/issues/1830) + +### [0.82.7](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.6...v0.82.7) (2023-12-17) + +### Bug Fixes + +- **radio-button:** allow `value` type to be a number ([#1868](https://github.com/carbon-design-system/carbon-components-svelte/issues/1868)) ([4792257](https://github.com/carbon-design-system/carbon-components-svelte/commit/479225711a1e304df74f0cfc585e32b5454afd66)) + +### [0.82.6](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.5...v0.82.6) (2023-12-17) + +### Bug Fixes + +- **package:** include types in exports map ([#1865](https://github.com/carbon-design-system/carbon-components-svelte/issues/1865)) ([053beee](https://github.com/carbon-design-system/carbon-components-svelte/commit/053beeef7cbb1031f09798ffc360f8c87d17e3e1)), closes [#1863](https://github.com/carbon-design-system/carbon-components-svelte/issues/1863) + +### [0.82.5](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.4...v0.82.5) (2023-12-16) + +### Bug Fixes + +- **header-search:** blur input when `active` is false ([#1857](https://github.com/carbon-design-system/carbon-components-svelte/issues/1857)) ([6c9cf9e](https://github.com/carbon-design-system/carbon-components-svelte/commit/6c9cf9e043b3c963a257a28fa8dd29c8acd4b2ce)) +- **package.json:** add `exports` field to package.json to address Vite development warnings ([#1864](https://github.com/carbon-design-system/carbon-components-svelte/issues/1864)) ([7bef3fa](https://github.com/carbon-design-system/carbon-components-svelte/commit/7bef3fae6250607337306e95440b8a472638476f)) + +### [0.82.4](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.3...v0.82.4) (2023-11-21) + +### Bug Fixes + +- **header-search:** blur input when deactivating ([#1855](https://github.com/carbon-design-system/carbon-components-svelte/issues/1855)) ([192f6a7](https://github.com/carbon-design-system/carbon-components-svelte/commit/192f6a775c2a7da25e7fc4893efdc5a80b83928c)) + +### [0.82.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.2...v0.82.3) (2023-11-21) + +### Bug Fixes + +- **header-search:** "Escape" should close empty search bar ([#1853](https://github.com/carbon-design-system/carbon-components-svelte/issues/1853)) ([e667352](https://github.com/carbon-design-system/carbon-components-svelte/commit/e667352329651c25dc2d283eaa6cc8ca872040f6)) + +### [0.82.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.1...v0.82.2) (2023-11-20) + +### Bug Fixes + +- **header-search:** "Escape" should clear search query ([#1851](https://github.com/carbon-design-system/carbon-components-svelte/issues/1851)) ([6da4572](https://github.com/carbon-design-system/carbon-components-svelte/commit/6da4572c2672e02a6463ee8374fd341868512034)) +- **header-search:** vertically center button icons ([#1850](https://github.com/carbon-design-system/carbon-components-svelte/issues/1850)) ([d68dc18](https://github.com/carbon-design-system/carbon-components-svelte/commit/d68dc182668dc0b56481d4646d672591cd7fc3e3)) + +### [0.82.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.0...v0.82.1) (2023-11-18) + +### Bug Fixes + +- **pagination-nav:** set `button type="button"` to prevent form submission ([#1846](https://github.com/carbon-design-system/carbon-components-svelte/issues/1846)) ([bed073c](https://github.com/carbon-design-system/carbon-components-svelte/commit/bed073c2f707392d3fe7d75fbf4550e723b93605)) + +### [0.82.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.81.3...v0.82.0) (2023-11-13) + +### Features + +- **tree-view:** add `showNode` accessor ([#1844](https://github.com/carbon-design-system/carbon-components-svelte/issues/1844)) ([1ad4e3d](https://github.com/carbon-design-system/carbon-components-svelte/commit/1ad4e3d3856e07fb1808f34b8c48dfc6a8a5e7d8)), closes [#1377](https://github.com/carbon-design-system/carbon-components-svelte/issues/1377) +- **tree-view:** make `node` slottable ([#1843](https://github.com/carbon-design-system/carbon-components-svelte/issues/1843)) ([6a55fef](https://github.com/carbon-design-system/carbon-components-svelte/commit/6a55fef62e095114a1782d1079501e9e940cca94)), closes [#1660](https://github.com/carbon-design-system/carbon-components-svelte/issues/1660) + +### [0.81.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.81.2...v0.81.3) (2023-11-08) + +### Bug Fixes + +- **select-item:** export `class` and `style` props ([#1840](https://github.com/carbon-design-system/carbon-components-svelte/issues/1840)) ([a9460e9](https://github.com/carbon-design-system/carbon-components-svelte/commit/a9460e944de9ae967664a75df842f4bdc909067f)), closes [#1839](https://github.com/carbon-design-system/carbon-components-svelte/issues/1839) + +### [0.81.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.81.1...v0.81.2) (2023-10-27) + +### Bug Fixes + +- **multi-select:** render checkboxes for form data ([#1835](https://github.com/carbon-design-system/carbon-components-svelte/issues/1835)) ([7ba52df](https://github.com/carbon-design-system/carbon-components-svelte/commit/7ba52df3a1ee89b06377a0b4888cce27cc89196f)), closes [#1742](https://github.com/carbon-design-system/carbon-components-svelte/issues/1742) + +### [0.81.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.81.0...v0.81.1) (2023-10-23) + +### Bug Fixes + +- **multi-select:** reset `selectedIds` when clearing selection ([#1832](https://github.com/carbon-design-system/carbon-components-svelte/issues/1832)) ([e3ab471](https://github.com/carbon-design-system/carbon-components-svelte/commit/e3ab471018b9ac94ff9de2284284dc61ba69c881)), closes [#1831](https://github.com/carbon-design-system/carbon-components-svelte/issues/1831) + +### [0.81.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.80.0...v0.81.0) (2023-10-13) + +### Features + +- **data-table:** pass `row` to `display` function ([#1810](https://github.com/carbon-design-system/carbon-components-svelte/issues/1810)) ([9456eaa](https://github.com/carbon-design-system/carbon-components-svelte/commit/9456eaab3ce5259d8f6dcaa7b3db9058d3555aa6)) +- **deps-dev:** upgrade `carbon-components` to 10.58 ([#1828](https://github.com/carbon-design-system/carbon-components-svelte/issues/1828)) ([519bd86](https://github.com/carbon-design-system/carbon-components-svelte/commit/519bd8616a4fe16af4befb6a1159e62f42d9651c)) + +### Bug Fixes + +- **file-uploader-button:** clear value by setting to `""` instead of `null` ([#1812](https://github.com/carbon-design-system/carbon-components-svelte/issues/1812)) ([108eb52](https://github.com/carbon-design-system/carbon-components-svelte/commit/108eb5286c46bd17a54ccbda31ee95f16a16763e)) +- **radio-button-group:** add `name` and `required` props ([#1037](https://github.com/carbon-design-system/carbon-components-svelte/issues/1037)) ([24e2a88](https://github.com/carbon-design-system/carbon-components-svelte/commit/24e2a8874f5d0c39f88761c3f118ba71aab27c1d)), closes [#1036](https://github.com/carbon-design-system/carbon-components-svelte/issues/1036) +- **radio-button-group:** strongly type dispatched change/select events ([#1819](https://github.com/carbon-design-system/carbon-components-svelte/issues/1819)) ([06d81dd](https://github.com/carbon-design-system/carbon-components-svelte/commit/06d81ddbff8a6170d34ca1e94a41c16d318ec7ca)) +- **tile-group:** add `name` and `required` props ([#1818](https://github.com/carbon-design-system/carbon-components-svelte/issues/1818)) ([836b360](https://github.com/carbon-design-system/carbon-components-svelte/commit/836b360b9b7402cb3cd44489fd5f14b8c901f9f2)) + +### [0.80.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.79.0...v0.80.0) (2023-08-26) + +### Features + +- **ui-shell:** forward `click` event to `HeaderActionLink` ([#1797](https://github.com/carbon-design-system/carbon-components-svelte/issues/1797)) ([e5675eb](https://github.com/carbon-design-system/carbon-components-svelte/commit/e5675eb203db51de736b24f41694f5b020f9aafc)), closes [#1796](https://github.com/carbon-design-system/carbon-components-svelte/issues/1796) + +### Bug Fixes + +- **skeleton-text:** fix reactivity in `paragraph` variant ([#1794](https://github.com/carbon-design-system/carbon-components-svelte/issues/1794)) ([bc97ce5](https://github.com/carbon-design-system/carbon-components-svelte/commit/bc97ce5e1b69669d17f3ad13aaeb774b05c09c80)), closes [#1793](https://github.com/carbon-design-system/carbon-components-svelte/issues/1793) + +## [0.79.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.78.0...v0.79.0) (2023-07-24) + +### ⚠ BREAKING CHANGES + +- **loading:** remove `id` prop from `Loading` (#1783) + +### Features + +- **file-uploader-button:** support `danger-tertiary`, `danger-ghost` button variants ([#1784](https://github.com/carbon-design-system/carbon-components-svelte/issues/1784)) ([709322c](https://github.com/carbon-design-system/carbon-components-svelte/commit/709322c2819e3123ade4a13e3fd7d05035154d6b)) +- **file-uploader:** add `size` prop to `FileUploaderButton` ([#1786](https://github.com/carbon-design-system/carbon-components-svelte/issues/1786)) ([51c281d](https://github.com/carbon-design-system/carbon-components-svelte/commit/51c281de4a29b99e61952959a8cbfdba0b49e786)) +- **file-uploader:** make `labelTitle`, `labelDescription` slottable ([#1780](https://github.com/carbon-design-system/carbon-components-svelte/issues/1780)) ([239f1b1](https://github.com/carbon-design-system/carbon-components-svelte/commit/239f1b10e562507f66e3cd318084ed1de30f0c25)) +- **slider:** add `hideLabel` prop ([#1777](https://github.com/carbon-design-system/carbon-components-svelte/issues/1777)) ([baff07e](https://github.com/carbon-design-system/carbon-components-svelte/commit/baff07e012b43e1a24b2e574a57509f711a463f6)), closes [#1682](https://github.com/carbon-design-system/carbon-components-svelte/issues/1682) + +### Bug Fixes + +- **file-uploader:** do not render empty element if `labelTitle`, `labelDescription` not provided ([#1778](https://github.com/carbon-design-system/carbon-components-svelte/issues/1778)) ([7ef8b73](https://github.com/carbon-design-system/carbon-components-svelte/commit/7ef8b73252709130c8e269b83b2936e1631c96fa)), closes [#1775](https://github.com/carbon-design-system/carbon-components-svelte/issues/1775) +- **loading:** remove redundant `description` label ([#1783](https://github.com/carbon-design-system/carbon-components-svelte/issues/1783)) ([d6804b4](https://github.com/carbon-design-system/carbon-components-svelte/commit/d6804b44fea0d4fc23574e63e7d4c64fa18e8f42)), closes [#1670](https://github.com/carbon-design-system/carbon-components-svelte/issues/1670) +- **types:** correctly type `kind` prop in `FileUploader`, `FileUploaderButton` ([#1781](https://github.com/carbon-design-system/carbon-components-svelte/issues/1781)) ([a7443c2](https://github.com/carbon-design-system/carbon-components-svelte/commit/a7443c2dca396f79e06fed695374c0a15bda14ed)) +- **types:** improve formatting of prop comments ([#1779](https://github.com/carbon-design-system/carbon-components-svelte/issues/1779)) ([be76370](https://github.com/carbon-design-system/carbon-components-svelte/commit/be763706ca7ab0182bc0f8171e74043ccbadf461)) + +## [0.78.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.77.0...v0.78.0) (2023-07-19) + +### ⚠ BREAKING CHANGES + +- **typescript:** minimum Svelte version for TypeScript users is 3.55 + +### Features + +- **typescript:** support svelte 4 ([#1773](https://github.com/carbon-design-system/carbon-components-svelte/issues/1773)) ([2f026f7](https://github.com/carbon-design-system/carbon-components-svelte/commit/2f026f792ad94f468b890a6d5ab36cc2642dacf2)), closes [#1753](https://github.com/carbon-design-system/carbon-components-svelte/issues/1753) + +## [0.77.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.76.1...v0.77.0) (2023-07-13) + +### Features + +- **ui-shell:** add `preventCloseOnClickOutside` to `HeaderAction` ([#1625](https://github.com/carbon-design-system/carbon-components-svelte/issues/1625)) ([ea9b261](https://github.com/carbon-design-system/carbon-components-svelte/commit/ea9b261b60698f9314e0aae4d61025bae215cccf)), closes [#1624](https://github.com/carbon-design-system/carbon-components-svelte/issues/1624) +- **ui-shell:** make `company` in `Header` slottable ([#1764](https://github.com/carbon-design-system/carbon-components-svelte/issues/1764)) ([9b3f014](https://github.com/carbon-design-system/carbon-components-svelte/commit/9b3f014a0ba43abb5a36be4a6156910b5d7644d7)) + +### [0.76.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.76.0...v0.76.1) (2023-07-08) + +### Bug Fixes + +- **date-picker:** hide `helperText` if invalid or warning state ([#1759](https://github.com/carbon-design-system/carbon-components-svelte/issues/1759)) ([d5a4a8b](https://github.com/carbon-design-system/carbon-components-svelte/commit/d5a4a8b94a8753545a54f7e43f1773e49a1ff208)) +- **select:** hide `helperText` if invalid or warning state ([#1761](https://github.com/carbon-design-system/carbon-components-svelte/issues/1761)) ([7579c03](https://github.com/carbon-design-system/carbon-components-svelte/commit/7579c032faa3f1b9ad9d42f76da876f38725141e)) +- **slider:** `disabled` Slider should not submit a form ([#1758](https://github.com/carbon-design-system/carbon-components-svelte/issues/1758)) ([ab21c89](https://github.com/carbon-design-system/carbon-components-svelte/commit/ab21c89ab9240f61bd15d8c20bad65b3b469a29c)) +- **types:** allow `data-*` attributes for props forwarded to HTML elements ([#1741](https://github.com/carbon-design-system/carbon-components-svelte/issues/1741)) ([7fdc2ef](https://github.com/carbon-design-system/carbon-components-svelte/commit/7fdc2ef7f072382842cbb6bfc8e12e083aef1a1e)) + +### [0.76.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.75.1...v0.75.2) (2023-06-21) + +### Features + +- make `titleText` slottable in `MultiSelect`, `ComboBox` ([#1750](https://github.com/carbon-design-system/carbon-components-svelte/issues/1750)) ([0b4f19c](https://github.com/carbon-design-system/carbon-components-svelte/commit/0b4f19c87e8479f0649fa2c5dc84beb4c1a1e302)), closes [#1747](https://github.com/carbon-design-system/carbon-components-svelte/issues/1747) + +### [0.75.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.75.0...v0.75.1) (2023-06-02) + +### Bug Fixes + +- **expandable-tile:** set tile height using resize observer ([#1738](https://github.com/carbon-design-system/carbon-components-svelte/issues/1738)) ([a369962](https://github.com/carbon-design-system/carbon-components-svelte/commit/a369962fdf96f95bbdcc2f8f9f84c5d900ec4087)) + +### [0.75.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.74.0...v0.74.1) (2023-05-21) + +### Features + +- **pagination-nav:** add `tooltipPosition` prop ([#1733](https://github.com/carbon-design-system/carbon-components-svelte/issues/1733)) ([60a796e](https://github.com/carbon-design-system/carbon-components-svelte/commit/60a796ea48b17a4e8829b8782aaddb569534c7c4)), closes [#1656](https://github.com/carbon-design-system/carbon-components-svelte/issues/1656) + +### [0.74.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.5...v0.74.0) (2023-05-18) + +### Features + +- **ui-shell:** make `HeaderNavItem` slottable ([#1693](https://github.com/carbon-design-system/carbon-components-svelte/issues/1693)) ([b9aaa3a](https://github.com/carbon-design-system/carbon-components-svelte/commit/b9aaa3adcaf87e34ac3d45a2e39f1db92ebe1b33)) + +### Bug Fixes + +- resolve `a11y` warnings from Svelte version 3.58 ([#1732](https://github.com/carbon-design-system/carbon-components-svelte/issues/1732)) ([c02b473](https://github.com/carbon-design-system/carbon-components-svelte/commit/c02b4738bce612359148267c79450c6650bf68d3)) + +### [0.73.5](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.4...v0.73.5) (2023-03-26) + +### [0.73.4](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.3...v0.73.4) (2023-03-21) + +### Bug Fixes + +- **selectable-tile:** include dispatched events in types ([#1695](https://github.com/carbon-design-system/carbon-components-svelte/issues/1695)) ([ca40dd1](https://github.com/carbon-design-system/carbon-components-svelte/commit/ca40dd18c2af1bc755b857c39469427038f20ece)), closes [#1694](https://github.com/carbon-design-system/carbon-components-svelte/issues/1694) +- **text-input:** correctly set input padding for warning state ([#1688](https://github.com/carbon-design-system/carbon-components-svelte/issues/1688)) ([821233a](https://github.com/carbon-design-system/carbon-components-svelte/commit/821233ab4f0bf247dea6a8aa32b79d15424ff059)), closes [#1687](https://github.com/carbon-design-system/carbon-components-svelte/issues/1687) + +### [0.73.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.2...v0.73.3) (2023-03-11) + +### Bug Fixes + +- **1684:** hide helper text container in password input when not used ([#1685](https://github.com/carbon-design-system/carbon-components-svelte/issues/1685)) ([42349eb](https://github.com/carbon-design-system/carbon-components-svelte/commit/42349ebc61fdc8756fc5209d4cb63f4f9a63dce9)) + +### [0.73.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.1...v0.73.2) (2023-02-27) + +### Bug Fixes + +- `readonly` should override `error` behavior in `TextInput`, `NumberInput` ([#1666](https://github.com/carbon-design-system/carbon-components-svelte/issues/1666)) ([6386c33](https://github.com/carbon-design-system/carbon-components-svelte/commit/6386c33f939b5fa310e8eb5a51412c6151de75d2)), closes [/github.com/carbon-design-system/carbon-components-svelte/pull/1666#pullrequestreview-1314558645](https://github.com/carbon-design-system//github.com/carbon-design-system/carbon-components-svelte/pull/1666/issues/pullrequestreview-1314558645) + +### [0.73.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.0...v0.73.1) (2023-02-19) + +### Bug Fixes + +- **textinput/passwordinput:** apply aria-describedby to hint text ([b435be4](https://github.com/carbon-design-system/carbon-components-svelte/commit/b435be4f1221b30c9afd7a9e1c6867b38eeadeaa)), closes [#1633](https://github.com/carbon-design-system/carbon-components-svelte/issues/1633) + +### [0.73.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.72.3...v0.73.0) (2023-02-19) + +### Features + +- **progress-bar:** add `status` prop ([#1560](https://github.com/carbon-design-system/carbon-components-svelte/issues/1560)) ([7ddbf17](https://github.com/carbon-design-system/carbon-components-svelte/commit/7ddbf17cbb82bd78256037af8028ea20b9c35d5a)) + +### [0.72.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.72.2...v0.72.3) (2023-02-11) + +### Bug Fixes + +- **types:** add missing `$$restProps` for `Checkbox`, `Filename`, `FluidForm` ([#1655](https://github.com/carbon-design-system/carbon-components-svelte/issues/1655)) ([6450e8b](https://github.com/carbon-design-system/carbon-components-svelte/commit/6450e8b0b17e1538043f131d64e2d1fc667c95a8)) + +### [0.72.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.72.1...v0.72.2) (2023-02-05) + +### Bug Fixes + +- **dropdown:** dispatch correct `selectedItem` in `select` event ([#1646](https://github.com/carbon-design-system/carbon-components-svelte/issues/1646)) ([d897484](https://github.com/carbon-design-system/carbon-components-svelte/commit/d897484abfcc8be351ac87b0f0bb49900f4b4b1d)), closes [#1645](https://github.com/carbon-design-system/carbon-components-svelte/issues/1645) + +### [0.72.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.72.0...v0.72.1) (2023-01-25) + +### Bug Fixes + +- **dropdown:** fix ssr issue ([#1639](https://github.com/carbon-design-system/carbon-components-svelte/issues/1639)) ([8cb5d53](https://github.com/carbon-design-system/carbon-components-svelte/commit/8cb5d538f7ad10d7c93e10c04f01d2c77b4eba44)), closes [#1638](https://github.com/carbon-design-system/carbon-components-svelte/issues/1638) + +## [0.72.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.71.0...v0.72.0) (2023-01-18) + +### ⚠ BREAKING CHANGES + +- **tree-view:** remove `expanded` property from `TreeNode` interface (#1631) + +### Bug Fixes + +- **dropdown:** close when user clicks outside iframe ([#1596](https://github.com/carbon-design-system/carbon-components-svelte/issues/1596)) ([73aa6e2](https://github.com/carbon-design-system/carbon-components-svelte/commit/73aa6e216aa99df3b0b3186398e6466db523cf88)), closes [#1595](https://github.com/carbon-design-system/carbon-components-svelte/issues/1595) +- **tree-view:** remove `expanded` property from `TreeNode` interface ([#1631](https://github.com/carbon-design-system/carbon-components-svelte/issues/1631)) ([ec867c4](https://github.com/carbon-design-system/carbon-components-svelte/commit/ec867c46ba7adce02938d6516557d3312591fa5f)), closes [#1630](https://github.com/carbon-design-system/carbon-components-svelte/issues/1630) + +## [0.71.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.71.0) - 2022-12-31 + +**Breaking Changes** + +- `Select`: rename dispatched `change` event to `update` +- `Select`: forward `change` event +- `PaginationNav`: use 1-indexing to be consistent with `Pagination` +- `InlineNotification`: remove `iconDescription` prop (replaced with `closeButtonDescription` and `statusIconDescription`) **Features** -- Add `padding` prop to Grid, Row, Column components ([PR #420](https://github.com/IBM/carbon-components-svelte/pull/420), [issue #410](https://github.com/IBM/carbon-components-svelte/issues/410)) -- Add `transition` prop to UI Shell `HeaderAction` to customize panel slide transition; by default, the slide duration is `200`ms ([PR #419](https://github.com/IBM/carbon-components-svelte/pull/419), [issue #384](https://github.com/IBM/carbon-components-svelte/issues/384)) - -**Fixes** - -- fix `Files` type for FileUploader ([PR #422](https://github.com/IBM/carbon-components-svelte/pull/422), [issue #421](https://github.com/IBM/carbon-components-svelte/issues/421)) -- remove the fly transition from HamburgerMenu ([PR #419](https://github.com/IBM/carbon-components-svelte/pull/419), [issue #384](https://github.com/IBM/carbon-components-svelte/issues/384)) +- `Pagination`: dispatch `change` event when user interacts with previous/next buttons, or page/page size dropdowns +- `InlineNotification`: add `iconDescription` and `closeButtonDescription` props **Documentation** -- add ["Padded columns"](https://carbon-svelte.vercel.app/components/Grid#padded-columns) example to Grid docs -- demo different transitions in ["Header with app switcher"](https://carbon-svelte.vercel.app/components/UIShell#header-with-app-switcher) example in UI Shell -- describe use case for [using native styles in OrderedList](https://carbon-svelte.vercel.app/components/OrderedList#native-list-styles) +- link 'source code' to folder for multiple components +- `PaginationNav`: add description for `change` event + +## [0.70.13](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.13) - 2022-12-08 + +**Fixes** + +- support `NumberInput` incrementing/decrementing floating point values +- allow arrow keys to open and navigate `Dropdown` menu +- only fire `Dropdown` "select" event on interaction +- avoid runtime error if `Dropdown` items is an empty array +- avoid runtime error if `MultiSelect` items is an empty array +- avoid runtime error if `ComboBox` items is an empty array +- fire `OverflowMenu` "close" event when clicking outside menu +- fire `Popover` "click:outside" event when clicking sibling elements +- forward `Toggle` "change" and "keyup" events after `toggled` updates +- fix `ProgressStep` label text if `vertical` +- make `ProgressStep` inherit unclickable styles if `preventChangeOnClick` +- add explicit `type="button"` to `TableHeader` button +- add explicit `type="button"` to `ProgressStep` button +- loosen `TreeView` text prop type from `string` to `any` +- make `TreeView` children prop type work recursively +- remove unused `derived` import from `DataTable` + +## [0.70.12](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.12) - 2022-10-13 + +**Fixes** + +- `Search` prop types should extend `input` attributes + +## [0.70.11](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.11) - 2022-10-13 + +**Fixes** + +- ignore false positive a11y warnings from Svelte version 3.51 +- `NumberInput` with `allowInput` should not be invalid if `value` is `null` + +## [0.70.10](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.10) - 2022-10-04 + +**Fixes** + +- avoid element reference error in `ListBoxMenuItem` +- display warn/invalid icons in `DatePickerInput` with calendar +- fix layout regression in `HeaderSearch` +- localize `HeaderAction`, `ImageLoader` transitions + +## [0.70.9](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.9) - 2022-09-23 + +**Fixes** + +- fix visual regression in next/previous buttons in `Pagination`, `PaginationNav` + +## [0.70.8](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.8) - 2022-09-21 + +**Fixes** + +- forward keyup, keydown, paste events in `ToolbarSearch` to `Search` + +## [0.70.7](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.7) - 2022-09-17 + +**Fixes** + +- prevent `submit` event on `Modal` if primary button is disabled + +## [0.70.6](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.6) - 2022-09-05 + +**Fixes** + +- resolve `Toggle`, `HeaderSearch` accessibility warnings in Svelte >=v3.50 + +## [0.70.5](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.5) - 2022-09-02 + +**Fixes** + +- avoid left margin style if `Button` is icon-only + +## [0.70.4](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.4) - 2022-08-31 + +**Fixes** + +- correctly scroll item into view when keyboard navigating `Dropdown`, `ComboBox`, `MultiSelect` + +## [0.70.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.3) - 2022-08-31 + +**Fixes** + +- close menu in `Dropdown`, `MultiSelect` when pressing "Escape" +- prevent default behavior in `ComboBox` when pressing "Enter," "ArrowUp," or "ArrowDown" +- scroll item into view when keyboard navigating `Dropdown`, `ComboBox`, `MultiSelect` + +## [0.70.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.2) - 2022-08-29 + +**Fixes** + +- allow `$$restProps.style` to be correctly set on `Content` + +## [0.70.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.1) - 2022-08-23 + +**Fixes** + +- do not unset `Content` left margin for rail `SideNav` +- set `role`, `aria-label` attributes on `DatePicker` calendar container + +## [0.70.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.0) - 2022-08-18 + +**Features** + +- add `filteredRowIds` prop to `ToolbarSearch` to support pagination + +## [0.69.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.69.0) - 2022-08-17 + +**Features** + +- dispatch `on:click:header--select` event in `DataTable` +- dispatch `on:click:row--select` event in `DataTable` + +## [0.68.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.68.0) - 2022-08-15 + +**Features** + +- add `fullWidth` prop to `ToastNotification` +- dispatch cancelable `on:cancel` event in `ToolbarBatchActions` +- add `active` prop to `ToolbarBatchActions` + +**Documentation** + +- add `ToastNotification` example "Full width" +- add `DataTable` example "Batch selection with controlled toolbar" + +## [0.67.9](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.67.9) - 2022-08-11 + +**Fixes** + +- `NotificationActionButton` types should extend `Button` props + +## [0.67.8](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.67.8) - 2022-08-10 + +**Fixes** + +- remove `aria-checked="mixed"` if `InlineCheckbox` is indeterminate +- add `aria-labelledby` to `Slider` thumb +- add `role="switch"` to `Toggle` input + +## [0.67.7](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.67.7) - 2022-08-07 + +**Fixes** + +- remove UI Shell `Content` left margin if `SideNav` is collapsed + +## [0.67.6](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.67.6) - 2022-08-05 + +**Refactor** + +- use class directive in `TextInput`, `DatePickerInput` + +**Fixes** + +- avoid dynamic class names in `NotificationButton`, `NotificationIcon` +- forward keydown, keyup events to `NumberInput` + +## [0.67.5](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.67.5) - 2022-08-04 + +**Fixes** + +- correctly select a `ComboBox` item when pressing "Enter" + +## [0.67.4](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.67.4) - 2022-07-26 + +**Fixes** + +- override `Toggle` margin-top style if `hideLabel` is true + +## [0.67.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.67.3) - 2022-07-26 + +**Fixes** + +- correctly pluralize `Pagination` items display text +- prevent label text selection in `Toggle` +- add missing `hideLabel` prop to `Toggle` + +## [0.67.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.67.2) - 2022-07-23 + +**Fixes** + +- display correct `ComboBox` value if using `itemToString` and `shouldFilterItem` props + +## [0.67.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.67.1) - 2022-07-12 + +**Fixes** + +- set a high `z-index` on the `SideNav` overlay to avoid it being covered by other elements + +## [0.67.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.67.0) - 2022-06-29 + +**Breaking Changes** + +Svelte version >=3.48.0 is required. + +- re-revert [924b6d35](924b6d352eebf5c82da63f0ead450dc59e80ca30) to allow close event in `ToastNotification`, `InlineNotification` to be cancellable + +## [0.66.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.66.3) - 2022-06-29 + +**Fixes** + +- revert [924b6d35](924b6d352eebf5c82da63f0ead450dc59e80ca30) and re-publish since v0.66.2 contains breaking changes + +## [0.66.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.66.2) - 2022-06-29 + +**Fixes** + +- allow close event in `ToastNotification`, `InlineNotification` to be cancellable + +**Documentation** + +- add `ToastNotification` example "Prevent default close behavior" +- add `InlineNotification` example "Prevent default close behavior" + +## [0.66.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.66.1) - 2022-06-27 + +**Fixes** + +- support `PasswordInput` invalid state when used in a `FluidForm` +- remove title attribute from `SideNavMenu` icon +- remove tabindex attribute from `SideNavMenu` icon +- override max-height in an expanded `SideNavMenu` +- fix `ComposedModal` type error where the focus node is possibly `null` + +**Refactor** + +- pass required `text` prop from `CodeSnippet` to `CopyButton` to prevent development warning + +**Documentation** + +- add `PasswordInput` example "Invalid state" +- rename `ComboBox` example "Selected id" to "Initial selected id" +- revise `DatePicker` example "DatePicker in a modal" to prevent iframe from stealing focus + +## [0.66.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.66.0) - 2022-06-18 + +**Features** + +- add `fullWidth` prop to `Slider` +- support number type for `selected` prop in `Select` + +**Fixes** + +- only dispatch "change" in `Select` if `selected` value has changed +- use first `SelectItem` value as default `selected` value in `Select` if `undefined` + +**Documentation** + +- add `Slider` example "Full width" +- revise `Select` example "Default" to demo usage without `selected` prop + +## [0.65.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.65.3) - 2022-06-15 + +**Fixes** + +- fix `TreeView` type error when keyboard navigating an expanded node + +## [0.65.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.65.2) - 2022-06-12 + +**Fixes** + +- `DataTable` header keys should be reactive +- use native binding for value prop in `TimePicker` +- use native binding for value prop in `ComboBox`, `MultiSelect` + +## [0.65.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.65.1) - 2022-06-09 + +**Fixes** + +- `DataTable` column sort direction order should be independent + +## [0.65.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.65.0) - 2022-06-07 + +**Breaking Changes** + +- mark array-type props as read-only + +**Features** + +- add `sortKey`, `sortDirection` props to `DataTable` for programmatic sorting +- forward `paste` event to `ComboBox`, `DatePicker`, `MultiSelect`, `NumberInput`, `Search`, `TextArea`, `TextInput`, `PasswordInput`, `TimePicker`, `HeaderSearch` +- support disabled items in `Dropdown`, `MultiSelect`, `ComboBox` + +**Fixes** + +- do not overwrite `cells` property in `rows` object in `DataTable` +- correctly toggle the body class if using nested modals +- remove useless `inline` prop from `Dropdown` +- remove redundant `Dropdown` list box role and id +- add missing `role="option"` and `aria-selected` attributes to `ListBoxMenuItem` + +**Refactor** + +- set alert `Modal` attributes in markup instead of script + +**Documentation** + +- add `DataTable` example "Programmatic sorting" +- add `Modal` example "Has scrolling content" +- add `Modal` example "Custom focus" +- add `Dropdown` example "Disabled items" +- add `MultiSelect` example "Disabled items" +- add `ComboBox` example "Disabled items" + +## [0.64.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.64.3) - 2022-05-29 + +**Fixes** + +- active tab in `Tabs` should not steal focus if programmatically selected +- set title attribute in `CheckBox`, `MultiSelect`, `Dropdown`, `ComboBox` if label is truncated + +**Refactor** + +- refactor components to use `class:` directive instead of the class attribute + +**Documentation** + +- add `Tabs` example "Disabled tabs" + +## [0.64.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.64.2) - 2022-05-25 + +**Fixes** + +- apply custom `DataTable` widths to empty columns + +## [0.64.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.64.1) - 2022-05-23 + +**Fixes** + +- mark `CopyButton` text prop as required +- mark `Dropdown` selectedId prop as required +- use `@see` tag in `Theme` tokens prop description +- remove `title` attribute from `Modal`, `ModalHeader` close button +- remove redundant `aria-label` from `Modal` close button icon +- add `aria-hidden="true"` to `Modal`, `ModalHeader` close button icon + +**Documentation** + +- update `Theme` docs to specify that it must be used with `all.css` +- update `DataTable` docs to note that custom widths do not work with `stickyHeader` + +## [0.64.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.64.0) - 2022-05-14 + +**Breaking Changes** + +- set `flatpickrProps.static` in `DatePicker` to be true by default +- use data attribute instead of id for `DataTable` headers/rows + +**Features** + +- support custom column widths in `DataTable` +- dispatch "expand" and "collapse" events in `CodeSnippet` + +**Fixes** + +- use `@see` tag for flatpickr options link in `DatePicker` +- pressing "Enter" in `DatePicker` should update the value +- dispatched event type without detail should be `null`, not `any` +- type missing "open" event in `HeaderAction` +- use small button in multi-line `CodeSnippet` + +**Documentation** + +- make calendar variants of `DatePicker` more prominent +- add `DataTable` example "Custom column widths" +- add `CodeSnippet` examples "Expanded by default" and "Reactive example" + +## [0.63.8](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.8) - 2022-05-07 + +**Fixes** + +- elevate `Toolbar` z-index so overflow menu is not clipped by the table + +## [0.63.7](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.7) - 2022-05-04 + +**Fixes** + +- strongly type `translateWithId` prop in `Dropdown` + +## [0.63.6](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.6) - 2022-05-04 + +**Fixes** + +- add `translateWithIdsSelection` prop to `ComboBox`, `MultiSelect` to customize clear selection description +- use default values in `ListBoxMenuIcon` if `translateWithIds` is undefined +- use default values in `ListBoxSelection` if `translateWithIds` is undefined + +## [0.63.5](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.5) - 2022-05-02 + +**Fixes** + +- dispatch "change" event in `Tabs` only if selected index has changed + +## [0.63.4](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.4) - 2022-04-30 + +**Fixes** + +- add missing `"2x3"` ratio value to `AspectRatio` +- fix typo in `ToolbarSearch` shouldFilterRows type annotation + +**Documentation** + +- correctly generate icon, action imports in examples +- remove unnecessary `tooltipBodyId` in `Tooltip` examples +- add `DataTable` "Expandable and selectable" example +- add `DataTable` "Batch selection" example + +## [0.63.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.3) - 2022-04-28 + +**Fixes** + +- fix `FileUploaderItem` regression where `delete` event should be dispatched if status is "edit" + +**Documentation** + +- add `FileUploader` "Item (edit)" example +- revise `FileUploader` "Item (edit status, invalid state)" example to include `on:delete` usage +- add `FileUploader` "Item (edit status, invalid state with subject, body)" example + +## [0.63.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.2) - 2022-04-23 + +**Fixes** + +- set `type="button"` on `Dropdown` to fix usage in a form +- re-focus search bar when clearing `ToolbarSearch` value + +## [0.63.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.1) - 2022-04-18 + +**Fixes** + +- `HeaderGlobalAction` icon size should be `20` by default +- fix `rows` reactivity in `DataTable` + +## [0.63.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.0) - 2022-04-17 + +**Breaking Changes** + +- remove deprecated components: `Icon`, `IconSkeleton`, `NotificationTextDetails`, `ToggleSmall`, `ToggleSmallSkeleton`, `HeaderActionSearch` +- remove deprecated component props +- remove `optimizeCarbonImports` preprocessor +- remove `GlobalHeader` and `SideNav` subfolders +- move `truncate` action from `actions` to `src/Truncate` + +**Features** + +- add `breakpointObserver`, `breakpoints` to base exports +- add `ProgressBar` `kind` prop to support inline, indented variants + +**Fixes** + +- add explicit `type="button"` attribute to interactive, filterable tag variants +- add TypeScript support for `sveltekit:` attributes for anchor elements +- `Link` types should extend `a` or `p` attributes +- prevent selectable `DataTable` with sticky header from jumping + +**Refactor** + +- use icons from `carbon-icons-svelte` v11 + +**Documentation** + +- add `DataTable` "Sticky header" example +- refactor `Grid` examples +- add note to `UIShell` that theming is not supported +- add `ProgressBar` examples "Inline variant" and "Indented variant" + +**Housekeeping** + +- upgrade `carbon-components` to v10.56.0 + +## [0.62.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.62.3) - 2022-03-26 + +**Fixes** + +- fix `TreeView` filter logic in expandNodes/collapseNodes +- correctly render slotted label in `NumberInput` +- only render expandable `DataTable` row content when expanded + +## [0.62.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.62.2) - 2022-03-23 + +**Fixes** + +- `DataTable` expandable variant should work with zebra styles +- `DatePicker` `flatpickrProps` should override default `flatpickr` options + +**Documentation** + +- add `DataTable` "Expandable (zebra styles)" example + +## [0.62.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.62.1) - 2022-03-20 + +**Fixes** + +- fix `ToolbarSearch` standalone usage where "DataTable" context can be undefined + +## [0.62.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.62.0) - 2022-03-19 + +**Breaking Changes** + +- remove `Copy` component +- do not prevent default submit behavior in `Form` + +**Features** + +- add `shouldFilterRows` prop to `ToolbarSearch` to support auto-filterable `DataTable` rows +- make `SideNavLink` text slottable +- make `icon` prop slottable in `ContextMenuOption`, `Link`, `Tag`, `HeaderAction`, `HeaderActionLink`, `SideNavLink`, `SideNavMenu` +- make `MultiSelect` slottable +- make `Dropdown` slottable +- make `ComboBox` slottable + +**Fixes** + +- stop click propagation on `HeaderAction` button + +**Refactor** + +- inline `Copy` component in `CopyButton`, `CodeSnippet` +- use native `bind:value` in `Search` +- use native `bind:value` in `TextArea` + +**Documentation** + +- add `DataTable` "Filterable" and "Filterable (custom)" examples +- add `MultiSelect` "Custom slot" example +- add `Dropdown` "Custom slot" example +- add `ComboBox` "Custom slot" example +- add note that `items` object in `ComboBox`, `Dropdown`, `MultiSelect` requires a unique `id` +- add `ClickableTile` "Prevent default behavior" example +- add `Form` "Prevent default behavior" example +- fix broken link in `Checkbox` docs + +## [0.61.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.61.1) - 2022-03-13 + +**Fixes** + +- do not generate CSS file from `css/_popover.scss` + +## [0.61.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.61.0) - 2022-03-13 + +**Breaking Changes** + +- remove `HeaderActionSlideTransition` interface from `HeaderAction`; type transition prop as `SlideParams` +- rename `Breakpoint` "on:match" event to "on:change" +- move `Breakpoint` breakpoints to `carbon-components-svelte/src/Breakpoint/breakpoints` + +**Features** + +- support `DataTable` non-selectable rows +- expose `MultiSelect` highlightedId as a prop +- add `breakpointObserver` store as an alternative to `Breakpoint` + +**Fixes** + +- audit `HeaderAction` text styles +- visually align `HeaderActionLink` icon with `HeaderAction` icon +- fix `MultiSelect` filterable selection error +- correctly type `FileUploaderDropContainer` validateFiles prop +- inline `Popover` SCSS from `carbon-components@10.47` + +**Refactor** + +- remove usage of deprecated `Icon` component +- use direct component imports where possible + +**Documentation** + +- add `DataTable` "Non-selectable rows" example +- add `OverflowMenu` "Disabled items" example +- add `Breakpoint` "Store and Breakpoint Values" example + +## [0.60.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.60.0) - 2022-02-26 + +**Features** + +- add `RadioButtonGroup` `hiddenLegend` prop to visually hide the legend +- add `ProgressBar` `size` prop to support small size variant + +**Fixes** + +- update `DatePicker` calendar instance if options change + +**Refactor** + +- remove `StructuredList` `overflow-y` style monkey patch + +**Documentation** + +- add `RadioButton` "Hidden legend" example +- add `ProgressBar` "Small size" example + +**Housekeeping** + +- upgrade `carbon-components` to v10.54.0 + +## [0.59.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.59.0) - 2022-02-21 + +**Features** + +- add `maxCount` prop to `TextArea` +- add `disabled` prop to `FileUploader` +- add `files` prop to `FileUploaderDropContainer` +- add `files` prop to `FileUploaderButton` + +**Fixes** + +- change `add`, `change` events in `FileUploaderDropContainer` to dispatch `File[]` instead of `FileList` +- update `files` prop description in `FileUploader` + +**Documentation** + +- add `TextArea` "Maximum character count" example +- add `FileUploader` disabled state example +- add `FileUploader` "Clear files" example +- document `validateFiles` prop for `FileUploaderDropContainer` +- add descriptions for `FileUploaderButton`, `FileUploader` examples + +**Housekeeping** + +- upgrade `carbon-components` to v10.53.0 + +## [0.58.4](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.58.4) - 2022-02-21 + +**Fixes** + +- dispatched events without a `detail` type should be `null` instead of `any` +- `FileUploader` `clearFiles` description should reflect that it's an accessor, not a prop +- `FileUploader` should correctly fire `add` and `remove` events +- `FileUploader` files should not be keyed by file name +- `FileUploader` change event detail signature should be `File[]` +- fix `DataTable` regression where sort icon indicators don't update + +**Refactor** + +- remove unnecessary JSDoc default type notation + +## [0.58.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.58.3) - 2022-02-20 + +**Fixes** + +- correctly set deprecation comments for deprecated components +- `TextInput` and `PasswordInput` should render label if "labelText" slot is used +- `PasswordInput` should not render `label` if no `labelText` is provided +- `StructuredList` overflow-y should not be "hidden" +- `MultiSelect` should not prevent default key behavior when open +- `Switch` should have `type="button"` + +## [0.58.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.58.2) - 2022-02-12 + +**Fixes** + +- `Tooltip` `aria-label` should use `iconDescription` if `triggerText` is falsy +- `OverflowMenu` keyboard navigation should skip disabled items +- UI Shell `HeaderPanelDivider` should use `hr` element to represent divider +- `Button` should not set `aria-pressed` on icon-only, link buttons + +## [0.58.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.58.1) - 2022-02-11 + +**Fixes** + +- remove whitespace from `pre` tag in `CodeSnippet` (Svelte v3.46.4 preserves `pre` whitespace by default) + +## [0.58.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.58.0) - 2022-02-11 + +**Breaking Changes** + +- if `TextInput` is `type="number"`, value can be a `number` or `null` to signify "no value" +- `TextInput` dispatches instead of forwards `input`, `change` events (detail: `null | number | string`) + +**Features** + +- pass `rowIndex`, `cellIndex` to `DataTable` "cell" slot +- add `itemToInput` prop to `MultiSelect` to customize name, title, labelText values +- add `open` prop to `TooltipDefinition`; dispatch `open`, `close` events + +**Fixes** + +- `DataTable` headers should be reactive +- `DataTable` batch selection checkbox should be reactive +- `MultiSelect` should correctly lose focus +- non-filterable `MultiSelect` should dispatch a `blur` event +- resolve `MultiSelect` accessibility issues +- toggle `HeaderNavMenu` when pressing "Enter" or "Space" +- close `HeaderNavMenu` menu when pressing "Enter" on an item +- resolve `HeaderNavMenu` accessibility issues +- fix `TextInput` reactivity by using native `bind:value` + +**Documentation** + +- remove duplicate "Heading variant" example + +**Housekeeping** + +- upgrade `carbon-components` to v10.52.0 + +## [0.57.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.57.1) - 2022-02-01 + +**Fixes** + +- `Tooltip` definition is missing open, close events +- `TooltipDefinition` button should have `type="button"` + +## [0.57.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.57.0) - 2022-01-30 + +**Breaking Changes** + +- make `NumberInput` "input" event type consistent with "change" (`null | number`) + +**Features** + +- dispatch `NumberInput` input, change events when clicking the steppers +- add `primaryButtonIcon` prop to `Modal`, `ModalFooter` + +**Fixes** + +- prevent `NumberInput` from coercing empty string to `0` + +## [0.56.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.56.1) - 2022-01-27 + +**Fixes** + +- `NumberInput` with value `0` should not be converted to `null` + +## [0.56.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.56.0) - 2022-01-27 + +**Breaking Changes** + +- type `NumberInput` value as `null | number` instead of `string | number` (`null` signifies "no value") + +**Fixes** + +- export `readonly` as a prop in `TextArea` +- fix `Checkbox` two-way binding for `checked`, `group` props + +**Documentation** + +- add `Checkbox` reactive example for `bind:checked` +- update `Checkbox` reactive example for `bind:group` to demo two-way binding +- simplify `Tabs` reactive example +- add `NumberInput` "No value" example + +## [0.55.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.55.0) - 2022-01-22 + +**Features** + +- forward `focus`, `blur` events to `NumberInput` +- update `ProgressStep` icons for current, incomplete steps +- type `id` as `any` instead of `string` in `ComboBox`, `Dropdown`, `MultiSelect` + +**Fixes** + +- do not coerce empty value to `0` in `NumberInput` if `allowEmpty` is true +- label `Slider` input if `aria-label` not explicitly defined +- add missing `required` prop to `RadioButton` +- add missing `required` prop to `Checkbox` +- include `@default undefined` annotations for props that are `undefined` by default + +**Refactor** + +- remove hotfix in `DatePicker` to prevent disabled icon from being clickable + +**Housekeeping** + +- upgrade `carbon-components` to v10.51.0 + +## [0.54.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.54.0) - 2022-01-19 + +**Features** + +- support paginated `DataTable` + +## [0.53.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.53.0) - 2022-01-18 + +**Breaking Changes** + +- replace `selectedIndex` with `selectedId` in `Dropdown` +- replace `selectedIndex` with `selectedId` in `ComboBox` + +**Fixes** + +- prevent `Dropdown` icon from being clickable when disabled + +## [0.52.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.52.0) - 2022-01-17 + +**Features** + +- make `Toggle` labels slottable +- add option to `ComboBox.clear` to not re-focus input (`clear({ focus: false })`) + +**Fixes** + +- break out of trap focus in `Tooltip` when pressing "Escape" +- pass "name" prop in `ComboBox` to input element +- emit `change` event in `Checkbox` after modifying state +- restore explicit typing of `null | HTMLElement` for TypeScript strict mode +- dispatch `click:button--primary` in `Modal` if `shouldSubmitOnEnter` is true + +**Documentation** + +- simplify reactive `RadioButton` example +- add reactive `Select` example for `Select` +- fix grammar in `TreeView` "Expand all nodes" example +- note that `Search` clear event is also dispatched when pressing "Escape" +- demo reactivity in expandable `Search` example + +## [0.51.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.51.3) - 2022-01-12 + +**Fixes** + +- fix `selectedIndex` reactivity in `ComboBox` + +**Refactor** + +- remove redundant `null` in `null | HTMLElement` prop types + +## [0.51.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.51.2) - 2022-01-10 + +**Fixes** + +- correctly reset values in `ComboBox` when manually clearing selection +- fix filterable `ComboBox` keyboard selection +- remove redundant role attributes from `Dropdown`, `Header` to fix a11y warnings +- fix `TileGroup` two-way binding on the `selected` prop + +**Documentation** + +- document `DatePicker` usage with a Rollup set-up +- add multiple modals example for `Modal` +- add reactive examples for `RadioTile` + +## [0.51.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.51.1) - 2022-01-03 + +**Fixes** + +- add missing `required` prop to `Select` +- set global theme variable first in SCSS files + +## [0.51.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.51.0) - 2021-12-30 + +**Features** + +- enhance `Checkbox` to support `bind:group` + +## [0.50.5](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.50.5) - 2021-12-30 + +**Fixes** + +- filterable `MultiSelect` should blur when pressing "Tab" +- filterable `MultiSelect` menu should close when pressing "Escape" +- filterable `MultiSelect` menu should open when pressing "Space" +- `DatePicker` input should not lose focus when pressing "Enter" +- `ToolbarSearch` should expand if `value` is programmatically set + +## [0.50.4](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.50.4) - 2021-12-30 + +**Fixes** + +- pressing "Escape" in a `DatePicker` should not propagate past the open calendar +- prevent menu icon in filterable `MultiSelect` from triggering twice + +## [0.50.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.50.3) - 2021-12-28 + +**Fixes** + +- do not dispatch "click", "click:row" `DataTable` events when selecting a checkbox or radio button +- render "labelText" slot if `labelText` prop or `$$slots.labelText` is truthy +- prevent default behavior in `Tabs` mobile variant when clicking a menu option +- coalesce nullish values to `""` for `TextInput`, `PasswordInput`, `TextArea` + +## [0.50.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.50.2) - 2021-11-27 + +**Fixes** + +- select correct item in filterable `MultiSelect` using keyboard navigation +- do not mutate `sortedItems` in `MultiSelect` + +## [0.50.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.50.1) - 2021-11-19 + +**Fixes** + +- do not dispatch `DataTable` "click", "click:row" events if target is an `OverflowMenu` + +## [0.50.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.50.0) - 2021-11-18 + +**Features** + +- add `target` prop to `ContextMenu` to support custom trigger element(s) +- pass clicked element as `event.detail` in `ContextMenu` "open" event + +## [0.49.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.49.2) - 2021-11-18 + +**Fixes** + +- `Tabs` should not dispatch an initial "change" event when no change has occurred +- `Pagination` page value should not exceed total pages +- fix `Popover` relative prop by inlining style +- replace `onDestroy` with `onMount` return function to avoid running code server-side + +## [0.49.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.49.1) - 2021-11-17 + +**Fixes** + +- include missing `Popover` styles from `carbon-components@10.47` + +## [0.49.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.49.0) - 2021-11-12 + +**Features** + +- support `UIShell` HeaderNavMenu with current item +- make `InlineNotification` title, subtitle props slottable +- make `ToastNotification` title, subtitle, and caption props slottable + +**Refactor** + +- remove unnecessary "position: relative" style in `ExpandableTile` +- remove unused `refContent` in `ExpandableTile` + +**Housekeeping** + +- upgrade `carbon-components` to v10.48.0 + +## [0.48.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.48.1) - 2021-11-12 + +**Fixes** + +- type `DatePicker` locale prop as flatpickr `CustomLocale` or `key` +- update remaining `carbon-icons-svelte` imports to use inlined icons + +## [0.48.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.48.0) - 2021-11-11 + +**Breaking Changes** + +- remove `carbon-icons-svelte` from direct dependencies + +**Features** + +- support auto-width `Tabs` +- add ref prop to `Form` + +**Fixes** + +- set calendar instance to `null` when destroying `DatePicker` + +## [0.47.6](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.47.6) - 2021-11-10 + +**Fixes** + +- fix `Tooltip` two way binding when icon is in focus +- coerce `TextInput` value to a number if `type="number"` + +## [0.47.5](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.47.5) - 2021-11-07 + +**Fixes** + +- fix `Tooltip` open/close logic to allow two way binding of the `open` prop +- inline `position: relative` style in `ExpandableTile` + +## [0.47.4](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.47.4) - 2021-11-06 + +**Fixes** + +- only dispatch `click:row--expand` when clicking an expandable `DataTable` row chevron + +## [0.47.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.47.3) - 2021-10-22 + +**Fixes** + +- correctly toggle batch expansion button in `DataTable` + +## [0.47.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.47.2) - 2021-10-21 + +**Fixes** + +- close the open `Tooltip` when using multiple tooltips +- collapse batch expansion button in `DataTable` if one or more rows is collapsed +- omit explicit reference to "carbon-icons-svelte" from `icon` prop descriptions + +## [0.47.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.47.1) - 2021-10-20 + +**Fixes** + +- include border style for non-expandable rows in a batch expandable `DataTable` + +## [0.47.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.47.0) - 2021-10-19 + +**Features** + +- add `nonExpandableRowIds` prop to `DataTable` to specify rows that should not be expandable + +## [0.46.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.46.0) - 2021-10-17 + +**Breaking Changes** + +- use `.svelte.d.ts` extension instead of `.d.ts` for Svelte component TypeScript definitions + +**Features** + +- support `Tag` outline type +- add `hideLabel` prop to `MultiSelect` +- allow any Svelte component to be used for `icon` props, not just `CarbonIcon` +- add `closeIcon` prop to `HeaderAction` to override the default `Close20` icon + +**Fixes** + +- avoid opening the calendar if `DatePickerInput` is a disabled `fieldset` descendant +- remove `stopPropagation` modifier from `HeaderAction` to allow multiple UI Shell app switchers + +**Housekeeping** + +- upgrade `carbon-components` to v10.46.0 + +## [0.45.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.45.1) - 2021-10-15 + +**Fixes** + +- prevent space/enter keys from selecting incomplete `ProgressIndicator` steps + +## [0.45.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.45.0) - 2021-10-13 + +**Features** + +- add `TreeView` component accessors to programmatically expand/collapse nodes + +## [0.44.7](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.7) - 2021-10-13 + +**Fixes** + +- add missing `value` prop to `Checkbox` + +## [0.44.6](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.6) - 2021-10-11 + +**Fixes** + +- fix `DataTable` sorting to tolerate `null`, `undefined` values + +## [0.44.5](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.5) - 2021-10-04 + +**Fixes** + +- correctly apply `menuOptionsClass` in `OverflowMenu` + +## [0.44.4](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.4) - 2021-09-28 + +**Fixes** + +- `ClickableTile` TypeScript definition restProps should extend attributes of either `a` or `p` tags + +## [0.44.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.3) - 2021-09-23 + +**Fixes** + +- correctly apply styles when using a static width `DataTable` with a title and description + +## [0.44.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.2) - 2021-09-14 + +**Fixes** + +- prevent redundant `clear` events in `ComboBox` + +## [0.44.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.1) - 2021-09-11 + +**Fixes** + +- if `ComboBox` is disabled, clicking the chevron icon should not toggle the dropdown +- `ToolbarBatchActions` cancel button text should be slottable + +## [0.44.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.0) - 2021-09-07 + +**Features** + +- add ability to override or customize `DatePicker` calendar options using the `flatpickrProps` prop + +## [0.43.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.43.0) - 2021-09-06 + +**Features** + +- add ability to programmatically clear a `ComboBox` using the `clear` component accessor + +## [0.42.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.42.3) - 2021-09-05 + +**Fixes** + +- `RadioButton` "labelText" slot should render even if `labelText` is falsy +- only render `FormGroup` `legend` element if `legendText` is truthy + +## [0.42.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.42.2) - 2021-07-29 + +**Fixes** + +- fix reactivity regression in `ComboBox` + +**Documentation** + +- update example set-ups +- document styling instructions, `carbon-preprocess-svelte` in README.md + +## [0.42.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.42.1) - 2021-07-26 + +**Fixes** + +- disable `a11y-mouse-events-have-key-events` warnings +- upgrade `carbon-icons-svelte` to v10.36.0 to quell `a11y-mouse...` warnings + +**Refactor** + +- remove `formatStyle` utility in `OverflowMenu` + +**Documentation** + +- add `svelte:head` example usage for loading CDN styles +- add instructions for dynamic theming +- update number of available Carbon icons + +## [0.42.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.42.0) - 2021-07-22 + +**Features** + +- add `helperText` prop to `DatePickerInput` + +**Fixes** + +- replace `svelte:body` with `svelte:window` when listening for an outside click + +**Documentation** + +- fix typos in styling instructions +- update expanded nodes guidance +- add `DatePicker` example "With helper text" + +**Refactor** + +- omit explicit `treeview.scss` import in `css/*.scss` files as it is included by default in `carbon-components@10.40` + +**Housekeeping** + +- upgrade `carbon-components` to v10.40.0 + +## [0.41.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.41.0) - 2021-07-18 + +**Features** + +- add expandedIds to `TreeView` + +**Fixes** + +- do not fall back to an empty string for a `DataTable` value if falsy +- omit disabled attribute in `Button` if value is falsy + +**Documentation** + +- add styling instructions to the home page + +## [0.40.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.40.1) - 2021-07-14 + +**Fixes** + +- focus first, non-disabled `TreeView` node if active id does not match the selected id +- set `type="button"` on `OverflowMenu` to prevent submit behavior when pressing "Enter" +- update semantic attributes in `OverflowMenuItem` +- do not render `OverflowMenuItem` title attribute if using a slot +- do not dispatch `NumberInput` on:change event on initialization +- dynamically load ESM `flatpickr` rangePlugin +- forward input, focus events to `Select` +- type `DataTableRowId` as `any`, fixes + +## [0.40.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.40.0) - 2021-07-11 + +**Breaking Changes** + +- remove `appendTo` prop in `DatePicker` for server-side rendering (SSR) compatibility + +**Features** + +- add `Breakpoint` component to detect the current Carbon grid size based on browser width +- add `Theme` component to dynamically update the current theme client-side +- add `valueFrom`, `valueTo` props for range `DatePicker` +- export `multiSelectRef`, `fieldRef`, `selectionRef` in `MultiSelect` +- add clearItem, clearAll instance methods to `LocalStorage` +- support `NumberInput` readonly variant + +**Fixes** + +- append `DatePicker` instance to local reference to prevent arrow key locking +- fix `on:change` type signature in `DatePicker` +- export id prop in `ProgressBar` +- add skeleton text for every row and column in `DataTableSkeleton` +- deprecate `shouldShowBorder` prop in `Table` +- correctly type exported constant props and function declarations as accessors in `SvelteComponentTyped` interface + +**Documentation** + +- document Breakpoint component +- document Theme component +- add ProgressBar "UX example" +- add DatePicker example "Range" +- add NumberInput example "Read-only variant" + +**Housekeeping** + +- upgrade `carbon-components` to v10.39.0 + +## [0.39.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.39.0) - 2021-07-05 + +**Breaking Changes** + +- remove `clipboard-copy` direct dependency; use native Clipboard API instead of `clipboard-copy` to copy text in `CopyButton`, `CodeSnippet` + +**Features** + +- add `TreeView` component +- add `RecursiveList` component +- support 3 buttons in `Modal`, `ComposedModal` via `secondaryButtons` +- make `DataTable` title/description slottable +- allow custom `expansionBreakpoint` in UI Shell `Header`, `SideNav` +- dispatch "click:button--primary" as an alias to "submit" in `Modal`, `ComposedModal` + +**Fixes** + +- export `useStaticWidth` prop in `DataTable` +- do not render `DataTable` table header if title/description not provided + +**Documentation** + +- add TreeView documentation +- add RecursiveList documentation +- add CopyButton examples "Overriding copy functionality", "Preventing copy functionality" +- add CodeSnippet examples "Overriding copy functionality", "Preventing copy functionality" +- add DataTable example "Static width" +- include typedefs in Component API section + +## [0.38.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.38.2) - 2021-07-03 + +**Fixes** + +- prevent ` {#if !invalid && helperText}
{helperText}
{/if} {#if invalid} -
{invalidText}
+
{invalidText}
{/if} diff --git a/src/TextArea/TextAreaSkeleton.svelte b/src/TextArea/TextAreaSkeleton.svelte index 036fa7d4..4541059e 100644 --- a/src/TextArea/TextAreaSkeleton.svelte +++ b/src/TextArea/TextAreaSkeleton.svelte @@ -3,8 +3,10 @@ export let hideLabel = false; + +
{#if !hideLabel} - + {/if} -
+
diff --git a/src/TextInput/PasswordInput.svelte b/src/TextInput/PasswordInput.svelte index f0ef0613..a660ac2d 100644 --- a/src/TextInput/PasswordInput.svelte +++ b/src/TextInput/PasswordInput.svelte @@ -30,13 +30,13 @@ * Set the alignment of the tooltip relative to the icon * @type {"start" | "center" | "end"} */ - export let tooltipAlignment = undefined; + export let tooltipAlignment = "center"; /** * Set the position of the tooltip relative to the icon * @type {"top" | "right" | "bottom" | "left"} */ - export let tooltipPosition = undefined; + export let tooltipPosition = "bottom"; /** Set to `true` to enable the light variant */ export let light = false; @@ -59,6 +59,15 @@ /** Specify the text for the invalid state */ export let invalidText = ""; + /** Set to `true` to indicate an warning state */ + export let warn = false; + + /** Specify the warning state text */ + export let warnText = ""; + + /** Set to `true` to use inline version */ + export let inline = false; + /** Set an id for the input element */ export let id = "ccs-" + Math.random().toString(36); @@ -72,99 +81,185 @@ export let ref = null; import { getContext } from "svelte"; - import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16"; - import View16 from "carbon-icons-svelte/lib/View16"; - import ViewOff16 from "carbon-icons-svelte/lib/ViewOff16"; + import WarningFilled from "../icons/WarningFilled.svelte"; + import WarningAltFilled from "../icons/WarningAltFilled.svelte"; + import View from "../icons/View.svelte"; + import ViewOff from "../icons/ViewOff.svelte"; const ctx = getContext("Form"); - $: isFluid = !!ctx && ctx.isFluid; + const isFluid = !!ctx && ctx.isFluid; + $: helperId = `helper-${id}`; $: errorId = `error-${id}`; + $: warnId = `warn-${id}`; + + +
- {#if labelText} + {#if inline} + {#if !isFluid && helperText} +
+ {helperText} +
+ {/if} + {/if} + {#if !inline && (labelText || $$slots.labelText)} + {/if}
- {#if invalid} - - {/if} - - -
- {#if !invalid && helperText}
- {helperText} + {#if invalid} + + {/if} + {#if !invalid && warn} + + {/if} + { + value = target.value; + }} + on:keydown + on:keyup + on:focus + on:blur + on:paste + /> + {#if isFluid && invalid} +
+
+ {invalidText} +
+ {/if} + {#if !(isFluid && invalid)} + + {/if}
- {/if} - {#if invalid} -
{invalidText}
- {/if} + {#if !isFluid && invalid} +
+ {invalidText} +
+ {/if} + {#if !invalid && !warn && !isFluid && !inline && helperText} +
+ {helperText} +
+ {/if} + {#if !isFluid && !invalid && warn} +
{warnText}
+ {/if} +
diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte index da0675bb..c2cfb319 100644 --- a/src/TextInput/TextInput.svelte +++ b/src/TextInput/TextInput.svelte @@ -1,4 +1,9 @@ + + +
{#if inline} -
+
{#if labelText} {/if} {#if !isFluid && helperText}
{helperText}
{/if}
{/if} - {#if !inline && labelText} + {#if !inline && (labelText || $$slots.labelText)} {/if}
- {#if invalid} - - {/if} - {#if !invalid && warn} - + {:else} + {#if invalid} + + {/if} + {#if !invalid && warn} + + /> + {/if} {/if} {#if isFluid} -
+
{/if} {#if isFluid && !inline && invalid} -
+
{invalidText}
{/if} {#if isFluid && !inline && warn} -
{warnText}
+
{warnText}
{/if}
{#if !invalid && !warn && !isFluid && !inline && helperText}
{helperText}
{/if} {#if !isFluid && invalid} -
+
{invalidText}
{/if} {#if !isFluid && !invalid && warn} -
{warnText}
+
{warnText}
{/if}
diff --git a/src/TextInput/TextInputSkeleton.svelte b/src/TextInput/TextInputSkeleton.svelte index d5ddda8f..23da8b95 100644 --- a/src/TextInput/TextInputSkeleton.svelte +++ b/src/TextInput/TextInputSkeleton.svelte @@ -3,8 +3,10 @@ export let hideLabel = false; + +
{#if !hideLabel} - + {/if} -
+
diff --git a/src/Theme/Theme.svelte b/src/Theme/Theme.svelte new file mode 100644 index 00000000..e3ae9eda --- /dev/null +++ b/src/Theme/Theme.svelte @@ -0,0 +1,120 @@ + + +{#if persist} + +{/if} + +{#if render === "toggle"} + {@const { themes: toggleThemes, ...toggleProps } = toggle} + { + theme = detail.toggled ? toggleThemes[1] : toggleThemes[0]; + }} + /> +{:else if render === "select"} + {@const { themes: selectThemes, ...selectProps } = select} + +{/if} + + diff --git a/src/Theme/index.js b/src/Theme/index.js new file mode 100644 index 00000000..79f7e13d --- /dev/null +++ b/src/Theme/index.js @@ -0,0 +1 @@ +export { default as Theme } from "./Theme.svelte"; diff --git a/src/Tile/ClickableTile.svelte b/src/Tile/ClickableTile.svelte index 980216c4..8dbd2e96 100644 --- a/src/Tile/ClickableTile.svelte +++ b/src/Tile/ClickableTile.svelte @@ -1,39 +1,43 @@ - - - + diff --git a/src/Tile/ExpandableTile.svelte b/src/Tile/ExpandableTile.svelte index ee5a2349..5f8f9f6e 100644 --- a/src/Tile/ExpandableTile.svelte +++ b/src/Tile/ExpandableTile.svelte @@ -17,6 +17,12 @@ /** Specify the icon text of the expanded tile */ export let tileExpandedIconText = "Interact to collapse Tile"; + /** Specify the icon label of the expanded tile */ + export let tileExpandedLabel = ""; + + /** Specify the icon label of the collapsed tile */ + export let tileCollapsedLabel = ""; + /** Specify the tabindex */ export let tabindex = "0"; @@ -26,12 +32,23 @@ /** Obtain a reference to the top-level element */ export let ref = null; - import { afterUpdate } from "svelte"; - import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16"; + import { afterUpdate, onMount } from "svelte"; + import ChevronDown from "../icons/ChevronDown.svelte"; - let refContent = null; let refAbove = null; + onMount(() => { + const resizeObserver = new ResizeObserver(([elem]) => { + tileMaxHeight = elem.contentRect.height; + }); + + resizeObserver.observe(refAbove); + + return () => { + resizeObserver.disconnect(); + }; + }); + afterUpdate(() => { if (tileMaxHeight === 0) { tileMaxHeight = refAbove.getBoundingClientRect().height; @@ -45,60 +62,43 @@ }); -
+ -
- +
+ {expanded ? tileExpandedLabel : tileCollapsedLabel} + +
+
+
-
+ diff --git a/src/Tile/RadioTile.svelte b/src/Tile/RadioTile.svelte index 7e2fce40..8ded1870 100644 --- a/src/Tile/RadioTile.svelte +++ b/src/Tile/RadioTile.svelte @@ -5,6 +5,12 @@ /** Set to `true` to enable the light variant */ export let light = false; + /** Set to `true` to disable the tile */ + export let disabled = false; + + /** Set to `true` to mark the field as required */ + export let required = false; + /** Specify the value of the radio input */ export let value = ""; @@ -17,13 +23,24 @@ /** Set an id for the input element */ export let id = "ccs-" + Math.random().toString(36); - /** Specify a name attribute for the input */ - export let name = ""; + /** + * Specify a name attribute for the radio tile input + * @type {string} + */ + export let name = undefined; import { getContext } from "svelte"; - import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16"; + import { readable } from "svelte/store"; + import CheckmarkFilled from "../icons/CheckmarkFilled.svelte"; - const { add, update, selectedValue } = getContext("TileGroup"); + const { add, update, selectedValue, groupName, groupRequired } = getContext( + "TileGroup", + ) ?? { + add: () => {}, + groupName: readable(undefined), + groupRequired: readable(undefined), + selectedValue: readable(checked ? value : undefined), + }; add({ value, checked }); @@ -32,43 +49,47 @@ + + diff --git a/src/Tile/SelectableTile.svelte b/src/Tile/SelectableTile.svelte index 4c1d2a1c..9d655678 100644 --- a/src/Tile/SelectableTile.svelte +++ b/src/Tile/SelectableTile.svelte @@ -1,10 +1,18 @@ + + + diff --git a/src/Tile/Tile.svelte b/src/Tile/Tile.svelte index 59812a92..02972b77 100644 --- a/src/Tile/Tile.svelte +++ b/src/Tile/Tile.svelte @@ -3,9 +3,11 @@ export let light = false; + +
+ /** + * @event {string} select + */ + /** * Specify the selected tile value * @type {string} @@ -8,17 +12,33 @@ /** Set to `true` to disable the tile group */ export let disabled = false; + /** + * Set to `true` to require the selection of a radio button + * @type {boolean} + */ + export let required = undefined; + + /** + * Specify a name attribute for the radio button inputs + * @type {string} + */ + export let name = undefined; + /** Specify the legend text */ export let legend = ""; import { createEventDispatcher, setContext } from "svelte"; - import { writable } from "svelte/store"; + import { writable, readonly } from "svelte/store"; const dispatch = createEventDispatcher(); const selectedValue = writable(selected); + const groupName = writable(name); + const groupRequired = writable(required); setContext("TileGroup", { selectedValue, + groupName: readonly(groupName), + groupRequired: readonly(groupRequired), add: ({ checked, value }) => { if (checked) { selectedValue.set(value); @@ -26,16 +46,19 @@ }, update: (value) => { selectedValue.set(value); + dispatch("select", value); }, }); $: selected = $selectedValue; - $: dispatch("select", $selectedValue); + $: selectedValue.set(selected); + $: $groupName = name; + $: $groupRequired = required; -
+
{#if legend} - {legend} + {legend} {/if}
diff --git a/src/TimePicker/TimePicker.svelte b/src/TimePicker/TimePicker.svelte index ebd891d0..61bd5c60 100644 --- a/src/TimePicker/TimePicker.svelte +++ b/src/TimePicker/TimePicker.svelte @@ -11,14 +11,8 @@ */ export let value = ""; - /** - * Specify the input type - * @type {string} - */ - export let type = "text"; - /** Specify the input placeholder text */ - export let placeholder = "hh=mm"; + export let placeholder = "hh:mm"; /** Specify the `pattern` attribute for the input element */ export let pattern = "(1[012]|[1-9]):[0-5][0-9](\\s)?"; @@ -57,59 +51,65 @@ export let ref = null; + + +
-
- {#if labelText} +
+ {#if labelText || $$slots.labelText} {/if}
{#if invalid} -
{invalidText}
+
{invalidText}
{/if}
diff --git a/src/TimePicker/TimePickerSelect.svelte b/src/TimePicker/TimePickerSelect.svelte index 2eb46a25..ee5b20fb 100644 --- a/src/TimePicker/TimePickerSelect.svelte +++ b/src/TimePicker/TimePickerSelect.svelte @@ -14,12 +14,6 @@ /** Specify the label text */ export let labelText = ""; - /** - * @deprecated The `hideLabel` prop for `TimePickerSelect` is no longer needed and has been deprecated. It will be removed in the next major release. - * Set to `false` to show the label text - */ - export let hideLabel = true; - /** Set an id for the select element */ export let id = "ccs-" + Math.random().toString(36); @@ -34,7 +28,7 @@ import { setContext } from "svelte"; import { writable } from "svelte/store"; - import ChevronDownGlyph from "carbon-icons-svelte/lib/ChevronDownGlyph"; + import ChevronDown from "../icons/ChevronDown.svelte"; const selectedValue = writable(value); @@ -44,42 +38,41 @@ $: value = $selectedValue; + +
- {#if labelText} -
diff --git a/src/Toggle/Toggle.svelte b/src/Toggle/Toggle.svelte index 7bd0a829..4f23f7dd 100644 --- a/src/Toggle/Toggle.svelte +++ b/src/Toggle/Toggle.svelte @@ -1,4 +1,8 @@ + +
+ { toggled = !toggled; - }}" - on:keyup - on:keyup="{(e) => { - if (e.key === ' ' || e.key === 'Enter') { + dispatch("toggle", { toggled }); + }} + on:change + on:keyup={(e) => { + if (e.key === " " || e.key === "Enter") { e.preventDefault(); toggled = !toggled; + dispatch("toggle", { toggled }); } - }}" + }} + on:keyup on:focus on:blur - disabled="{disabled}" - id="{id}" - name="{name}" + {disabled} + {id} + {name} />
diff --git a/src/Toggle/ToggleSkeleton.svelte b/src/Toggle/ToggleSkeleton.svelte index ea0e61a9..0956c0b8 100644 --- a/src/Toggle/ToggleSkeleton.svelte +++ b/src/Toggle/ToggleSkeleton.svelte @@ -12,8 +12,10 @@ export let id = "ccs-" + Math.random().toString(36); + +
diff --git a/src/ToggleSmall/ToggleSmall.svelte b/src/ToggleSmall/ToggleSmall.svelte deleted file mode 100644 index d2c0849d..00000000 --- a/src/ToggleSmall/ToggleSmall.svelte +++ /dev/null @@ -1,87 +0,0 @@ - - -
- - -
diff --git a/src/ToggleSmall/ToggleSmallSkeleton.svelte b/src/ToggleSmall/ToggleSmallSkeleton.svelte deleted file mode 100644 index e7d7b1f8..00000000 --- a/src/ToggleSmall/ToggleSmallSkeleton.svelte +++ /dev/null @@ -1,52 +0,0 @@ - - -
- - -
diff --git a/src/ToggleSmall/index.js b/src/ToggleSmall/index.js deleted file mode 100644 index ad88325b..00000000 --- a/src/ToggleSmall/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as ToggleSmall } from "./ToggleSmall.svelte"; -export { default as ToggleSmallSkeleton } from "./ToggleSmallSkeleton.svelte"; diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte index fbb382f3..04d51b92 100644 --- a/src/Tooltip/Tooltip.svelte +++ b/src/Tooltip/Tooltip.svelte @@ -1,4 +1,15 @@ - + }} + on:click|capture={({ target }) => { + if (open && !ref.contains(target) && !refTooltip.contains(target)) { + setTimeout(() => { + open = false; + }); + } + }} +/> -
+
{#if !hideIcon} -
+
{triggerText} +
- +
{:else} +
{triggerText}
{/if} {#if open} + {/if}
diff --git a/src/Tooltip/TooltipFooter.svelte b/src/Tooltip/TooltipFooter.svelte new file mode 100644 index 00000000..61035467 --- /dev/null +++ b/src/Tooltip/TooltipFooter.svelte @@ -0,0 +1,29 @@ + + +
+ +
diff --git a/src/Tooltip/index.js b/src/Tooltip/index.js index ad513d4b..99dff636 100644 --- a/src/Tooltip/index.js +++ b/src/Tooltip/index.js @@ -1 +1,2 @@ export { default as Tooltip } from "./Tooltip.svelte"; +export { default as TooltipFooter } from "./TooltipFooter.svelte"; diff --git a/src/TooltipDefinition/TooltipDefinition.svelte b/src/TooltipDefinition/TooltipDefinition.svelte index e3b3b61f..cd0e4fd7 100644 --- a/src/TooltipDefinition/TooltipDefinition.svelte +++ b/src/TooltipDefinition/TooltipDefinition.svelte @@ -1,7 +1,17 @@ - + { + if (key === "Escape") hide(); + }} +/> -
+ - + diff --git a/src/TooltipIcon/TooltipIcon.svelte b/src/TooltipIcon/TooltipIcon.svelte index 41521bf0..a9ba4e9e 100644 --- a/src/TooltipIcon/TooltipIcon.svelte +++ b/src/TooltipIcon/TooltipIcon.svelte @@ -1,7 +1,19 @@ -
- + Switcher subject 1 Switcher item 1 @@ -42,7 +42,7 @@ - + diff --git a/tests/HeaderUtilities.test.svelte b/tests/HeaderUtilities.test.svelte index 77a414bb..d5dca180 100644 --- a/tests/HeaderUtilities.test.svelte +++ b/tests/HeaderUtilities.test.svelte @@ -3,7 +3,6 @@ Header, HeaderUtilities, HeaderAction, - HeaderActionSearch, HeaderGlobalAction, HeaderPanelLinks, HeaderPanelDivider, @@ -18,8 +17,8 @@ Grid, Row, Column, - } from "../types"; - import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20"; + } from "carbon-components-svelte"; + import SettingsAdjust from "carbon-icons-svelte/lib/SettingsAdjust.svelte"; import { quintOut } from "svelte/easing"; let isSideNavOpen = false; @@ -31,11 +30,14 @@
- - + Switcher subject 1 @@ -51,7 +53,7 @@ - + diff --git a/tests/HiddenCodeSnippet.test.svelte b/tests/HiddenCodeSnippet.test.svelte deleted file mode 100644 index 3298f472..00000000 --- a/tests/HiddenCodeSnippet.test.svelte +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - -{#if toggled} -
"Show more" will not render

-{/if} -
- -
- -{#if toggled} -

-
"Show more" will render

-
- -
-{/if} diff --git a/tests/Icon.test.svelte b/tests/Icon.test.svelte deleted file mode 100644 index a666056e..00000000 --- a/tests/Icon.test.svelte +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/tests/ImageLoader/ImageLoader.test.svelte b/tests/ImageLoader/ImageLoader.test.svelte new file mode 100644 index 00000000..1a805651 --- /dev/null +++ b/tests/ImageLoader/ImageLoader.test.svelte @@ -0,0 +1,64 @@ + + + + + +
+ +
+ + +
+ + +
+ +
+
+ +
An error occurred.
+
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
Failed to load image
+
+
+
diff --git a/tests/ImageLoader/ImageLoader.test.ts b/tests/ImageLoader/ImageLoader.test.ts new file mode 100644 index 00000000..86640905 --- /dev/null +++ b/tests/ImageLoader/ImageLoader.test.ts @@ -0,0 +1,129 @@ +import { render, screen } from "@testing-library/svelte"; +import ImageLoader from "./ImageLoader.test.svelte"; + +describe("ImageLoader", () => { + beforeEach(() => { + vi.useFakeTimers(); + }); + + afterEach(() => { + vi.useRealTimers(); + vi.restoreAllMocks(); + }); + + it("renders with default props", () => { + render(ImageLoader); + const wrapper = screen.getByTestId("default-loader"); + const img = wrapper.querySelector("img"); + expect(img).toBeDefined(); + }); + + it("shows loading state and transitions to loaded state", async () => { + render(ImageLoader); + + const loadingIndicator = screen.getByTestId("loading-state"); + expect(loadingIndicator).toBeInTheDocument(); + + const wrapper = screen.getByTestId("loader-with-slots"); + const img = wrapper.querySelector("img"); + expect(img).toBeDefined(); + if (img) { + const loadEvent = new Event("load"); + img.dispatchEvent(loadEvent); + + expect(screen.queryByTestId("loading-state")).not.toBeInTheDocument(); + expect(img).toBeVisible(); + } + }); + + it("handles error state correctly", async () => { + render(ImageLoader); + + const wrapper = screen.getByTestId("error-loader"); + const img = wrapper.querySelector("img"); + expect(img).toBeDefined(); + + if (img) { + const errorEvent = new Event("error"); + img.dispatchEvent(errorEvent); + + const errorMessage = screen.getByTestId("error-message"); + expect(errorMessage).toBeInTheDocument(); + expect(errorMessage).toHaveTextContent("Failed to load image"); + } + }); + + it("supports aspect ratio", () => { + render(ImageLoader); + + const wrapper = screen.getByTestId("loader-with-ratio"); + const aspectRatioWrapper = wrapper.querySelector( + "[class*='bx--aspect-ratio']", + ); + + expect(aspectRatioWrapper).toHaveClass("bx--aspect-ratio--16x9"); + }); + + it("supports fade in animation", async () => { + render(ImageLoader); + + const wrapper = screen.getByTestId("loader-with-fade"); + const img = wrapper.querySelector("img"); + expect(img).toBeDefined(); + + if (img) { + const loadEvent = new Event("load"); + img.dispatchEvent(loadEvent); + + expect(img).toHaveStyle({ + transition: expect.stringContaining("opacity"), + }); + } + }); + + it("supports programmatic image loading", async () => { + const { component } = render(ImageLoader); + + const wrapper = screen.getByTestId("programmatic-loader"); + const img = wrapper.querySelector("img"); + expect(img).toBeDefined(); + + const imageLoaderComponent = component.imageLoader; + expect(imageLoaderComponent).toBeDefined(); + + const newSrc = "https://example.com/new-image.jpg"; + + imageLoaderComponent.loadImage(newSrc); + if (img) { + expect(img.getAttribute("src")).toBe(newSrc); + } + }); + + it("dispatches load and error events", async () => { + const { component } = render(ImageLoader); + + const load = vi.fn(); + const error = vi.fn(); + + component.$on("load", load); + component.$on("error", error); + + const defaultWrapper = screen.getByTestId("default-loader"); + const defaultImg = defaultWrapper.querySelector("img"); + expect(defaultImg).toBeDefined(); + + if (defaultImg) { + defaultImg.dispatchEvent(new Event("load")); + expect(load).toHaveBeenCalled(); + } + + const errorWrapper = screen.getByTestId("error-loader"); + const errorImg = errorWrapper.querySelector("img"); + expect(errorImg).toBeDefined(); + + if (errorImg) { + errorImg.dispatchEvent(new Event("error")); + expect(error).toHaveBeenCalled(); + } + }); +}); diff --git a/tests/InlineLoading.test.svelte b/tests/InlineLoading.test.svelte deleted file mode 100644 index 134fb679..00000000 --- a/tests/InlineLoading.test.svelte +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - diff --git a/tests/InlineLoading/InlineLoading.test.svelte b/tests/InlineLoading/InlineLoading.test.svelte new file mode 100644 index 00000000..fdf2612a --- /dev/null +++ b/tests/InlineLoading/InlineLoading.test.svelte @@ -0,0 +1,57 @@ + + + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ +
+ +
+ { + console.log("success"); + }} + /> +
+ + +
+ { + console.log("success custom delay"); + }} + /> +
+ +
+ +
+ + +
+ +
diff --git a/tests/InlineLoading/InlineLoading.test.ts b/tests/InlineLoading/InlineLoading.test.ts new file mode 100644 index 00000000..f5755e9f --- /dev/null +++ b/tests/InlineLoading/InlineLoading.test.ts @@ -0,0 +1,126 @@ +import { render, screen } from "@testing-library/svelte"; +import InlineLoading from "./InlineLoading.test.svelte"; + +describe("InlineLoading", () => { + beforeEach(() => { + vi.useFakeTimers(); + }); + + afterEach(() => { + vi.useRealTimers(); + vi.restoreAllMocks(); + }); + + it("renders with default props", () => { + render(InlineLoading); + const wrapper = screen.getByTestId("default-loader"); + + expect(wrapper.querySelector(".bx--inline-loading")).toBeInTheDocument(); + expect(wrapper.querySelector(".bx--loading")).toBeInTheDocument(); + }); + + it("renders with description", () => { + render(InlineLoading); + const wrapper = screen.getByTestId("loader-with-description"); + + const description = wrapper.querySelector(".bx--inline-loading__text"); + expect(description).toHaveTextContent("Loading metrics..."); + }); + + it("supports active state", () => { + render(InlineLoading); + const wrapper = screen.getByTestId("loader-active"); + + expect(wrapper.querySelector(".bx--loading")).toHaveClass( + "bx--loading--small", + ); + expect(wrapper.querySelector(".bx--loading--small")).toBeVisible(); + expect( + wrapper.querySelector(".bx--inline-loading__text"), + ).toHaveTextContent("Submitting..."); + }); + + it("supports inactive state", () => { + render(InlineLoading); + const wrapper = screen.getByTestId("loader-inactive"); + + expect(wrapper.querySelector(".bx--loading")).toHaveClass( + "bx--loading--small", + ); + expect(wrapper.querySelector(".bx--loading--stop")).toBeInTheDocument(); + expect( + wrapper.querySelector(".bx--inline-loading__text"), + ).toHaveTextContent("Cancelling..."); + }); + + it("supports finished state", () => { + render(InlineLoading); + const wrapper = screen.getByTestId("loader-finished"); + + expect( + wrapper.querySelector(".bx--inline-loading__checkmark-container"), + ).toBeInTheDocument(); + expect( + wrapper.querySelector(".bx--inline-loading__text"), + ).toHaveTextContent("Success"); + }); + + it("supports error state", () => { + render(InlineLoading); + const wrapper = screen.getByTestId("loader-error"); + + expect( + wrapper.querySelector(".bx--inline-loading--error"), + ).toBeInTheDocument(); + expect( + wrapper.querySelector(".bx--inline-loading__text"), + ).toHaveTextContent("An error occurred"); + }); + + it("supports custom icon description", () => { + render(InlineLoading); + const wrapper = screen.getByTestId("loader-custom-icon"); + + const icon = wrapper.querySelector( + ".bx--inline-loading__checkmark-container", + ); + assert(icon); + expect(icon).toHaveTextContent("Operation completed successfully"); + }); + + it("dispatches success event after delay when finished", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(InlineLoading); + + const wrapper = screen.getByTestId("loader-finished"); + expect( + wrapper.querySelector(".bx--inline-loading__checkmark-container"), + ).toBeInTheDocument(); + + vi.advanceTimersByTime(1500); + expect(consoleLog).toHaveBeenCalledWith("success"); + }); + + it("supports custom success delay", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(InlineLoading); + + vi.advanceTimersByTime(400); + expect(consoleLog).not.toHaveBeenCalled(); + + vi.advanceTimersByTime(100); + expect(consoleLog).toHaveBeenCalledWith("success custom delay"); + }); + + it("cleans up timeout on unmount", () => { + const { unmount } = render(InlineLoading); + const wrapper = screen.getByTestId("loader-finished"); + expect(wrapper).toBeInTheDocument(); + + unmount(); + + // Advance timers to ensure no lingering timeouts + vi.advanceTimersByTime(2000); + // If cleanup wasn't working, this would throw an error about setState after unmount + }); +}); diff --git a/tests/InlineLoadingUx.test.svelte b/tests/InlineLoadingUx.test.svelte deleted file mode 100644 index c8443eed..00000000 --- a/tests/InlineLoadingUx.test.svelte +++ /dev/null @@ -1,52 +0,0 @@ - - - - - {#if state !== 'dormant'} - - {:else} - - {/if} - diff --git a/tests/InlineNotification.test.svelte b/tests/InlineNotification.test.svelte deleted file mode 100644 index 74d884a1..00000000 --- a/tests/InlineNotification.test.svelte +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - - -
- Learn more -
-
- -Learn more - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/tests/InlineNotification/InlineNotification.close.test.svelte b/tests/InlineNotification/InlineNotification.close.test.svelte new file mode 100644 index 00000000..6f66810c --- /dev/null +++ b/tests/InlineNotification/InlineNotification.close.test.svelte @@ -0,0 +1,12 @@ + + + { + e.preventDefault(); + console.log("close", e.detail); + }} +/> diff --git a/tests/InlineNotification/InlineNotification.test.svelte b/tests/InlineNotification/InlineNotification.test.svelte new file mode 100644 index 00000000..320683d2 --- /dev/null +++ b/tests/InlineNotification/InlineNotification.test.svelte @@ -0,0 +1,29 @@ + + + { + console.log("close", e.detail); + }} +/> diff --git a/tests/InlineNotification/InlineNotification.test.ts b/tests/InlineNotification/InlineNotification.test.ts new file mode 100644 index 00000000..d7d3b6de --- /dev/null +++ b/tests/InlineNotification/InlineNotification.test.ts @@ -0,0 +1,156 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import InlineNotification from "./InlineNotification.test.svelte"; +import InlineNotificationCustom from "./InlineNotificationCustom.test.svelte"; +import InlineNotificationClose from "./InlineNotification.close.test.svelte"; + +describe("InlineNotification", () => { + beforeEach(() => { + vi.restoreAllMocks(); + }); + + it("should render with default props", () => { + render(InlineNotification); + + expect(screen.getByRole("alert")).toHaveClass( + "bx--inline-notification--error", + ); + expect(screen.getByText("Error:")).toBeInTheDocument(); + expect( + screen.getByText("An internal server error occurred."), + ).toBeInTheDocument(); + }); + + it("should handle different kinds", () => { + ( + [ + "error", + "info", + "info-square", + "success", + "warning", + "warning-alt", + ] as const + ).forEach((kind) => { + const { container } = render(InlineNotification, { + props: { kind }, + }); + + expect( + container.querySelector(`.bx--inline-notification--${kind}`), + ).toBeInTheDocument(); + container.remove(); + }); + }); + + it("should handle low contrast variant", () => { + render(InlineNotification, { + props: { lowContrast: true }, + }); + + expect(screen.getByRole("alert")).toHaveClass( + "bx--inline-notification--low-contrast", + ); + }); + + it("should handle close button click", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(InlineNotification); + + await user.click(screen.getByRole("button")); + + expect(consoleLog).toHaveBeenCalledWith("close", { timeout: false }); + expect(screen.queryByRole("alert")).not.toBeInTheDocument(); + }); + + it("should hide close button", () => { + render(InlineNotification, { + props: { hideCloseButton: true }, + }); + + expect( + screen.queryByLabelText("Close notification"), + ).not.toBeInTheDocument(); + expect(screen.getByRole("alert")).toHaveClass( + "bx--inline-notification--hide-close-button", + ); + }); + + it("should handle custom icon descriptions", () => { + render(InlineNotification, { + props: { + statusIconDescription: "Custom status", + closeButtonDescription: "Custom close", + }, + }); + + expect(screen.getByText("Custom status")).toBeInTheDocument(); + expect(screen.getByRole("button")).toHaveAttribute( + "aria-label", + "Custom close", + ); + }); + + it("should handle custom role", () => { + render(InlineNotification, { + props: { role: "status" }, + }); + + expect(screen.getByRole("status")).toBeInTheDocument(); + }); + + it("should handle timeout", async () => { + vi.useFakeTimers(); + const consoleLog = vi.spyOn(console, "log"); + render(InlineNotification, { props: { timeout: 1000 } }); + + expect(screen.getByRole("alert")).toBeInTheDocument(); + await vi.advanceTimersByTimeAsync(1000); + + expect(consoleLog).toHaveBeenCalledWith("close", { timeout: true }); + expect(screen.queryByRole("alert")).not.toBeInTheDocument(); + vi.useRealTimers(); + }); + + it("should handle custom slots", () => { + render(InlineNotificationCustom); + + const title = screen.getByText("Custom Title:"); + expect(title).not.toHaveClass("bx--inline-notification__title"); + expect(title.tagName).toBe("STRONG"); + + const subtitle = screen.getByText("Custom subtitle content."); + expect(subtitle).not.toHaveClass("bx--inline-notification__subtitle"); + expect(subtitle.tagName).toBe("STRONG"); + }); + + it("should render action button", () => { + render(InlineNotificationCustom); + + expect( + screen.getByRole("button", { name: "Learn more" }), + ).toBeInTheDocument(); + }); + + it("should cleanup timeout on unmount", () => { + vi.useFakeTimers(); + const clearTimeoutSpy = vi.spyOn(window, "clearTimeout"); + + const { unmount } = render(InlineNotification, { + props: { timeout: 1_000 }, + }); + + unmount(); + expect(clearTimeoutSpy).toHaveBeenCalled(); + vi.useRealTimers(); + }); + + it("should prevent default close behavior", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(InlineNotificationClose); + + await user.click(screen.getByRole("button")); + expect(consoleLog).toHaveBeenCalledWith("close", { timeout: false }); + expect(screen.getByRole("alert")).toBeInTheDocument(); + }); +}); diff --git a/tests/InlineNotification/InlineNotificationCustom.test.svelte b/tests/InlineNotification/InlineNotificationCustom.test.svelte new file mode 100644 index 00000000..4186595f --- /dev/null +++ b/tests/InlineNotification/InlineNotificationCustom.test.svelte @@ -0,0 +1,14 @@ + + + + Custom Title: + Custom subtitle content. + + Learn more + + diff --git a/tests/Link.test.svelte b/tests/Link.test.svelte deleted file mode 100644 index 1ebfe6d7..00000000 --- a/tests/Link.test.svelte +++ /dev/null @@ -1,29 +0,0 @@ - - -Carbon Design System - - - Carbon Design System - - - - Carbon Design System - - - - Carbon Design System - - - - Carbon Design System - - - - Carbon Design System - - - - Carbon Design System - diff --git a/tests/Link/Link.test.svelte b/tests/Link/Link.test.svelte new file mode 100644 index 00000000..61f98609 --- /dev/null +++ b/tests/Link/Link.test.svelte @@ -0,0 +1,87 @@ + + + + + +
+ { + e.preventDefault(); + console.log("click"); + }} + on:mouseover={() => { + console.log("mouseover"); + }} + on:mouseenter={() => { + console.log("mouseenter"); + }} + on:mouseleave={() => { + console.log("mouseleave"); + }} + > + Carbon Design System + +
+ + +
+ + Carbon Design System + +
+ + +
+ + Carbon Design System + +
+ + +
+ + Carbon Design System + +
+ + +
+ + Carbon Design System + + + + +
+ + +
+ + Carbon Design System + +
+ + +
+ + Carbon Design System + +
+ + +
+ + Carbon Design System + +
+ + +
+ + Carbon Design System + +
diff --git a/tests/Link/Link.test.ts b/tests/Link/Link.test.ts new file mode 100644 index 00000000..014b1383 --- /dev/null +++ b/tests/Link/Link.test.ts @@ -0,0 +1,121 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import Link from "./Link.test.svelte"; + +describe("Link", () => { + afterEach(() => { + vi.restoreAllMocks(); + }); + + it("renders with default props", () => { + render(Link); + const wrapper = screen.getByTestId("default-link"); + const link = wrapper.querySelector("a"); + + expect(link).toHaveClass("bx--link"); + expect(link).toHaveAttribute("href", "https://www.carbondesignsystem.com/"); + expect(link).toHaveTextContent("Carbon Design System"); + }); + + it("adds noopener noreferrer when target is _blank", () => { + render(Link); + const wrapper = screen.getByTestId("link-blank"); + const link = wrapper.querySelector("a"); + + expect(link).toHaveAttribute("target", "_blank"); + expect(link).toHaveAttribute("rel", "noopener noreferrer"); + }); + + it("supports inline variant", () => { + render(Link); + const wrapper = screen.getByTestId("link-inline"); + const link = wrapper.querySelector("a"); + + expect(link).toHaveClass("bx--link--inline"); + }); + + it("supports icon prop", () => { + render(Link); + const wrapper = screen.getByTestId("link-with-icon"); + const link = wrapper.querySelector("a"); + const iconWrapper = link?.querySelector(".bx--link__icon"); + + expect(iconWrapper).toBeInTheDocument(); + expect(iconWrapper?.querySelector("svg")).toBeInTheDocument(); + }); + + it("supports icon slot", () => { + render(Link); + const wrapper = screen.getByTestId("link-with-icon-slot"); + const link = wrapper.querySelector("a"); + const iconWrapper = link?.querySelector(".bx--link__icon"); + + expect(iconWrapper).toBeInTheDocument(); + expect(iconWrapper?.querySelector("svg")).toBeInTheDocument(); + }); + + it("supports large size variant", () => { + render(Link); + const wrapper = screen.getByTestId("link-large"); + const link = wrapper.querySelector("a"); + + expect(link).toHaveClass("bx--link--lg"); + }); + + it("supports small size variant", () => { + render(Link); + const wrapper = screen.getByTestId("link-small"); + const link = wrapper.querySelector("a"); + + expect(link).toHaveClass("bx--link--sm"); + }); + + it("supports disabled state", () => { + render(Link); + const wrapper = screen.getByTestId("link-disabled"); + const link = wrapper.querySelector("a"); + + expect(link).toHaveClass("bx--link--disabled"); + expect(link).toHaveAttribute("aria-disabled", "true"); + expect(link).toHaveAttribute("role", "link"); + }); + + it("supports visited state", () => { + render(Link); + const wrapper = screen.getByTestId("link-visited"); + const link = wrapper.querySelector("a"); + + expect(link).toHaveClass("bx--link--visited"); + }); + + it("supports click and mouse events", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Link); + + const wrapper = screen.getByTestId("default-link"); + const link = wrapper.querySelector("a"); + assert(link); + + await user.click(link); + expect(consoleLog).toHaveBeenCalledWith("click"); + + await user.hover(link); + expect(consoleLog).toHaveBeenCalledWith("mouseover"); + + await user.hover(link); + expect(consoleLog).toHaveBeenCalledWith("mouseenter"); + + await user.unhover(link); + expect(consoleLog).toHaveBeenCalledWith("mouseleave"); + expect(consoleLog).toHaveBeenCalledTimes(4); + }); + + it("prevents icon rendering when inline is true", () => { + render(Link); + const wrapper = screen.getByTestId("link-inline"); + const link = wrapper.querySelector("a"); + + expect(link).toHaveClass("bx--link--inline"); + expect(link?.querySelector(".bx--link__icon")).not.toBeInTheDocument(); + }); +}); diff --git a/tests/Loading.test.svelte b/tests/Loading.test.svelte deleted file mode 100644 index 6889445e..00000000 --- a/tests/Loading.test.svelte +++ /dev/null @@ -1,7 +0,0 @@ - - - - - diff --git a/tests/Loading/Loading.test.svelte b/tests/Loading/Loading.test.svelte new file mode 100644 index 00000000..aa152744 --- /dev/null +++ b/tests/Loading/Loading.test.svelte @@ -0,0 +1,28 @@ + + + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
diff --git a/tests/Loading/Loading.test.ts b/tests/Loading/Loading.test.ts new file mode 100644 index 00000000..68d4f561 --- /dev/null +++ b/tests/Loading/Loading.test.ts @@ -0,0 +1,93 @@ +import { render, screen } from "@testing-library/svelte"; +import Loading from "./Loading.test.svelte"; + +describe("Loading", () => { + it("renders with default props", () => { + render(Loading); + const wrapper = screen.getByTestId("default-loader"); + + // Should have overlay by default + expect(wrapper.querySelector(".bx--loading-overlay")).toBeInTheDocument(); + + // Should be active by default + const loader = wrapper.querySelector(".bx--loading"); + expect(loader).toBeInTheDocument(); + expect(loader).not.toHaveClass("bx--loading--stop"); + + // Should have correct ARIA attributes + expect(loader).toHaveAttribute("aria-atomic", "true"); + expect(loader).toHaveAttribute("aria-live", "assertive"); + + // Should have default description + const title = wrapper.querySelector("title"); + expect(title).toHaveTextContent("loading"); + }); + + it("renders without overlay", () => { + render(Loading); + const wrapper = screen.getByTestId("loader-no-overlay"); + + // Should not have overlay + expect( + wrapper.querySelector(".bx--loading-overlay"), + ).not.toBeInTheDocument(); + + // Should still have loader + expect(wrapper.querySelector(".bx--loading")).toBeInTheDocument(); + }); + + it("supports small variant", () => { + render(Loading); + const wrapper = screen.getByTestId("loader-small"); + + const loader = wrapper.querySelector(".bx--loading"); + expect(loader).toHaveClass("bx--loading--small"); + + // Small variant should have background circle + const backgroundCircle = wrapper.querySelector(".bx--loading__background"); + expect(backgroundCircle).toBeInTheDocument(); + expect(backgroundCircle).toHaveAttribute("r", "42"); + + // Should have stroke circle with correct radius + const strokeCircle = wrapper.querySelector(".bx--loading__stroke"); + expect(strokeCircle).toHaveAttribute("r", "42"); + }); + + it("supports inactive state", () => { + render(Loading); + const wrapper = screen.getByTestId("loader-inactive"); + + // Overlay should have stop class + const overlay = wrapper.querySelector(".bx--loading-overlay"); + expect(overlay).toHaveClass("bx--loading-overlay--stop"); + + // Loader should have stop class + const loader = wrapper.querySelector(".bx--loading"); + expect(loader).toHaveClass("bx--loading--stop"); + + // ARIA live should be off when inactive + expect(loader).toHaveAttribute("aria-live", "off"); + }); + + it("supports custom description", () => { + render(Loading); + const wrapper = screen.getByTestId("loader-description"); + + const title = wrapper.querySelector("title"); + expect(title).toHaveTextContent("Processing data..."); + }); + + it("renders with correct spinner radius", () => { + render(Loading); + + // Default (large) spinner + const defaultWrapper = screen.getByTestId("default-loader"); + const defaultStroke = defaultWrapper.querySelector(".bx--loading__stroke"); + expect(defaultStroke).toHaveAttribute("r", "44"); + + // Small spinner + const smallWrapper = screen.getByTestId("loader-small"); + const smallStroke = smallWrapper.querySelector(".bx--loading__stroke"); + expect(smallStroke).toHaveAttribute("r", "42"); + }); +}); diff --git a/tests/LocalStorage/LocalStorage.test.svelte b/tests/LocalStorage/LocalStorage.test.svelte new file mode 100644 index 00000000..432f136f --- /dev/null +++ b/tests/LocalStorage/LocalStorage.test.svelte @@ -0,0 +1,19 @@ + + + + + +
+ +
+ + +
+ +
diff --git a/tests/LocalStorage/LocalStorage.test.ts b/tests/LocalStorage/LocalStorage.test.ts new file mode 100644 index 00000000..d20aaaae --- /dev/null +++ b/tests/LocalStorage/LocalStorage.test.ts @@ -0,0 +1,77 @@ +import { render } from "@testing-library/svelte"; +import { setupLocalStorageMock } from "../setup-tests"; +import LocalStorage from "./LocalStorage.test.svelte"; + +describe("LocalStorage", () => { + const { setMockItem } = setupLocalStorageMock(); + + it("saves primitive value to localStorage on mount", () => { + render(LocalStorage); + + expect(localStorage.setItem).toHaveBeenCalledWith( + "local-storage-key", + "test-value", + ); + }); + + it("saves object value as JSON string", () => { + render(LocalStorage); + + expect(localStorage.setItem).toHaveBeenCalledWith( + "theme-settings", + JSON.stringify({ theme: "dark", fontSize: 16 }), + ); + }); + + it("loads existing primitive value from localStorage", () => { + setMockItem("local-storage-key", "existing-value"); + + render(LocalStorage); + expect(localStorage.getItem).toHaveBeenCalledWith("local-storage-key"); + }); + + it("loads existing object value from localStorage", () => { + // Set up existing value + const existingSettings = { theme: "light", fontSize: 14 }; + setMockItem("theme-settings", JSON.stringify(existingSettings)); + + render(LocalStorage); + expect(localStorage.getItem).toHaveBeenCalledWith("theme-settings"); + }); + + it("clears specific item from localStorage", () => { + const { component } = render(LocalStorage); + const storage = component.storage; + + if (storage) { + storage.clearItem(); + expect(localStorage.removeItem).toHaveBeenCalledWith("programmatic-key"); + } + }); + + it("clears all items from localStorage", () => { + const { component } = render(LocalStorage); + const storage = component.storage; + + if (storage) { + storage.clearAll(); + expect(localStorage.clear).toHaveBeenCalled(); + } + }); + + it("handles JSON parse errors gracefully", () => { + // Set up invalid JSON + setMockItem("local-storage-key", "{invalid-json}"); + + render(LocalStorage); + expect(localStorage.getItem).toHaveBeenCalledWith("local-storage-key"); + }); + + it("uses default key if none provided", () => { + render(LocalStorage); + + expect(localStorage.getItem).toHaveBeenCalledWith( + expect.stringContaining("local-storage-key"), + ); + }); +}); diff --git a/tests/LocalStorage/LocalStorageObject.test.svelte b/tests/LocalStorage/LocalStorageObject.test.svelte new file mode 100644 index 00000000..23a78c17 --- /dev/null +++ b/tests/LocalStorage/LocalStorageObject.test.svelte @@ -0,0 +1,15 @@ + + +
+ { + console.log("update event", detail); + }} + /> +
diff --git a/tests/LocalStorage/LocalStorageObject.test.ts b/tests/LocalStorage/LocalStorageObject.test.ts new file mode 100644 index 00000000..d7228aac --- /dev/null +++ b/tests/LocalStorage/LocalStorageObject.test.ts @@ -0,0 +1,58 @@ +import { render } from "@testing-library/svelte"; +import LocalStorageObject from "./LocalStorageObject.test.svelte"; + +describe("LocalStorage - Object Values", () => { + let localStorageMock: { [key: string]: string }; + let originalLocalStorage: Storage; + + beforeEach(() => { + originalLocalStorage = global.localStorage; + localStorageMock = {}; + + global.localStorage = { + getItem: vi.fn((key) => localStorageMock[key] || null), + setItem: vi.fn((key, value) => { + localStorageMock[key] = value; + }), + removeItem: vi.fn((key) => { + delete localStorageMock[key]; + }), + clear: vi.fn(() => { + localStorageMock = {}; + }), + length: 0, + key: vi.fn(), + }; + }); + + afterEach(() => { + global.localStorage = originalLocalStorage; + localStorage.clear(); + vi.restoreAllMocks(); + localStorageMock = {}; + }); + + it("saves object value as JSON string", () => { + render(LocalStorageObject); + + expect(localStorage.setItem).toHaveBeenCalledWith( + "theme-settings", + JSON.stringify({ theme: "dark", fontSize: 16 }), + ); + }); + + it("loads existing object value from localStorage", () => { + const existingSettings = { theme: "light", fontSize: 14 }; + localStorageMock["theme-settings"] = JSON.stringify(existingSettings); + + render(LocalStorageObject); + expect(localStorage.getItem).toHaveBeenCalledWith("theme-settings"); + }); + + it("handles malformed JSON gracefully", () => { + localStorageMock["theme-settings"] = "{malformed-json}"; + + render(LocalStorageObject); + expect(localStorage.getItem).toHaveBeenCalledWith("theme-settings"); + }); +}); diff --git a/tests/LocalStorage/LocalStoragePrimitive.test.svelte b/tests/LocalStorage/LocalStoragePrimitive.test.svelte new file mode 100644 index 00000000..60d6a598 --- /dev/null +++ b/tests/LocalStorage/LocalStoragePrimitive.test.svelte @@ -0,0 +1,18 @@ + + +
+ { + console.log("save event"); + }} + on:update={({ detail }) => { + console.log("update event", detail); + }} + /> +
diff --git a/tests/LocalStorage/LocalStoragePrimitive.test.ts b/tests/LocalStorage/LocalStoragePrimitive.test.ts new file mode 100644 index 00000000..f20a32df --- /dev/null +++ b/tests/LocalStorage/LocalStoragePrimitive.test.ts @@ -0,0 +1,36 @@ +import { render } from "@testing-library/svelte"; +import { setupLocalStorageMock } from "../setup-tests"; +import LocalStoragePrimitive from "./LocalStoragePrimitive.test.svelte"; + +describe("LocalStorage - Primitive Values", () => { + const { setMockItem } = setupLocalStorageMock(); + let consoleLog: ReturnType; + + beforeEach(() => { + consoleLog = vi.spyOn(console, "log"); + }); + + it("saves primitive value to localStorage on mount", () => { + render(LocalStoragePrimitive); + expect(localStorage.setItem).toHaveBeenCalledWith("test-key", "test-value"); + }); + + it("loads existing primitive value from localStorage", () => { + setMockItem("test-key", "existing-value"); + + render(LocalStoragePrimitive); + expect(localStorage.getItem).toHaveBeenCalledWith("test-key"); + }); + + it("dispatches save event when setting initial value", () => { + render(LocalStoragePrimitive); + expect(consoleLog).toHaveBeenCalledWith("save event"); + }); + + it("handles invalid values gracefully", () => { + setMockItem("test-key", "{invalid-value}"); + + render(LocalStoragePrimitive); + expect(localStorage.getItem).toHaveBeenCalledWith("test-key"); + }); +}); diff --git a/tests/Modal.test.svelte b/tests/Modal.test.svelte deleted file mode 100644 index bb5b5d80..00000000 --- a/tests/Modal.test.svelte +++ /dev/null @@ -1,20 +0,0 @@ - - - - - -

Create a new Cloudant database in the US South region.

-
diff --git a/tests/Modal/Modal.test.svelte b/tests/Modal/Modal.test.svelte new file mode 100644 index 00000000..d6ac5f26 --- /dev/null +++ b/tests/Modal/Modal.test.svelte @@ -0,0 +1,57 @@ + + + console.log("open")} + on:close={() => console.log("close")} + on:submit={() => console.log("submit")} + on:click:button--primary={() => console.log("click:button--primary")} + on:click:button--secondary={(e) => + console.log("click:button--secondary", e.detail)} + on:transitionend={(e) => console.log("transitionend", e.detail)} +> + + + diff --git a/tests/Modal/Modal.test.ts b/tests/Modal/Modal.test.ts new file mode 100644 index 00000000..10268226 --- /dev/null +++ b/tests/Modal/Modal.test.ts @@ -0,0 +1,284 @@ +import { render, screen } from "@testing-library/svelte"; +import { tick } from "svelte"; +import { user } from "../setup-tests"; +import ModalTest from "./Modal.test.svelte"; + +describe("Modal", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it("renders with default props", async () => { + const { container } = render(ModalTest, { + props: { + open: true, + modalHeading: "Test Modal", + primaryButtonText: "Save", + secondaryButtonText: "Cancel", + }, + }); + + // Check if modal container is rendered + const modalContainer = container.querySelector(".bx--modal-container"); + expect(modalContainer).toBeInTheDocument(); + + // Check if modal heading is rendered + expect(screen.getByText("Test Modal")).toBeInTheDocument(); + + // Check if buttons are rendered + expect(screen.getByText("Save")).toBeInTheDocument(); + expect(screen.getByText("Cancel")).toBeInTheDocument(); + + // Check if close button is rendered + const closeButton = screen.getByLabelText("Close the modal"); + expect(closeButton).toBeInTheDocument(); + + // Check if modal has correct ARIA attributes + expect(modalContainer).toHaveAttribute("role", "dialog"); + expect(modalContainer).toHaveAttribute("aria-modal", "true"); + expect(modalContainer).toHaveAttribute("aria-label", "Test Modal"); + }); + + it("renders with basic structure", () => { + render(ModalTest, { + props: { + open: true, + modalHeading: "Test Modal", + primaryButtonText: "Save", + secondaryButtonText: "Cancel", + }, + }); + + expect(screen.getByRole("dialog")).toBeInTheDocument(); + expect(screen.getByText("Test Modal")).toBeInTheDocument(); + expect(screen.getByText("Save")).toBeInTheDocument(); + expect(screen.getByText("Cancel")).toBeInTheDocument(); + expect(screen.getByLabelText("Close the modal")).toBeInTheDocument(); + expect(screen.getByRole("dialog")).toHaveAttribute("aria-modal", "true"); + }); + + it("opens and closes properly", async () => { + const consoleLog = vi.spyOn(console, "log"); + const { component } = render(ModalTest, { + props: { + open: false, + modalHeading: "Test Modal", + }, + }); + + // Open the modal + component.$set({ open: true }); + await tick(); + expect(screen.getByRole("dialog")).toBeInTheDocument(); + expect(consoleLog).toHaveBeenCalledWith("open"); + + // Close the modal + component.$set({ open: false }); + await tick(); + expect(consoleLog).toHaveBeenCalledWith("close"); + }); + + it("handles form submission", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(ModalTest, { + props: { + open: true, + hasForm: true, + modalHeading: "Form Modal", + primaryButtonText: "Save", + }, + }); + + const primaryButton = screen.getByRole("button", { name: "Save" }); + await user.click(primaryButton); + expect(consoleLog).toHaveBeenCalledWith("submit"); + expect(consoleLog).toHaveBeenCalledWith("click:button--primary"); + }); + + it("handles button clicks", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(ModalTest, { + props: { + open: true, + primaryButtonText: "Save", + secondaryButtonText: "Cancel", + }, + }); + + await user.click(screen.getByText("Save")); + expect(consoleLog).toHaveBeenCalledWith("click:button--primary"); + + await user.click(screen.getByText("Cancel")); + expect(consoleLog).toHaveBeenCalledWith("click:button--secondary", { + text: "Cancel", + }); + }); + + it("supports different modal sizes", () => { + type Size = "xs" | "sm" | "lg"; + const sizeMappings = { + xs: "bx--modal-container--xs", + sm: "bx--modal-container--sm", + lg: "bx--modal-container--lg", + } as const; + + // Test specific sizes + (Object.keys(sizeMappings) as Size[]).forEach((size) => { + const { unmount } = render(ModalTest, { + props: { + open: true, + size, + modalHeading: `${size} Modal`, + }, + }); + + const modal = screen.getByRole("dialog"); + expect(modal).toHaveClass(sizeMappings[size]); + unmount(); + }); + + // Test default (medium) size + const { unmount } = render(ModalTest, { + props: { + open: true, + modalHeading: "Medium Modal", + }, + }); + + const modal = screen.getByRole("dialog"); + expect(modal).toHaveClass("bx--modal-container"); + expect(modal).not.toHaveClass("bx--modal-container--xs"); + expect(modal).not.toHaveClass("bx--modal-container--sm"); + expect(modal).not.toHaveClass("bx--modal-container--lg"); + unmount(); + }); + + it("supports danger and alert variants", () => { + render(ModalTest, { + props: { + open: true, + danger: true, + alert: true, + modalHeading: "Danger Alert Modal", + primaryButtonText: "Delete", + }, + }); + + const primaryButton = screen.getByRole("button", { name: "Delete" }); + expect(primaryButton).toHaveClass("bx--btn--danger"); + + const modal = screen.getByRole("alertdialog"); + expect(modal).toHaveAttribute("aria-label", "Danger Alert Modal"); + }); + + it("handles scrolling content", () => { + render(ModalTest, { + props: { + open: true, + hasScrollingContent: true, + modalHeading: "Scrolling Modal", + }, + }); + + const modalBody = screen.getByRole("region"); + expect(modalBody).toHaveClass("bx--modal-scroll-content"); + }); + + it("should focus close button when open", async () => { + render(ModalTest, { + props: { + open: true, + }, + }); + + const closeButton = screen.getByLabelText("Close the modal"); + expect(closeButton).toHaveFocus(); + }); + + it("respects the selectorPrimaryFocus prop", async () => { + render(ModalTest, { + props: { + open: true, + modalHeading: "Focus Test", + selectorPrimaryFocus: "#test-focus", + }, + }); + + expect(screen.getByTestId("test-focus")).toHaveFocus(); + }); + + it("prevents closing when clicking outside if configured", async () => { + const { component } = render(ModalTest, { + props: { + open: true, + preventCloseOnClickOutside: true, + modalHeading: "Prevent Close Test", + }, + }); + + const closeHandler = vi.fn(); + component.$on("close", closeHandler); + + // Click outside the modal + await user.click(document.body); + expect(closeHandler).not.toHaveBeenCalled(); + }); + + it("supports passive modal variant", () => { + render(ModalTest, { + props: { + open: true, + passiveModal: true, + modalHeading: "Passive Modal", + primaryButtonText: "Save", + secondaryButtonText: "Cancel", + }, + }); + + // Verify close button is in header + const closeButton = screen.getByLabelText("Close the modal"); + expect(closeButton.closest(".bx--modal-header")).toBeInTheDocument(); + + // Verify no footer is present + expect( + screen.queryByRole("button", { name: "Save" }), + ).not.toBeInTheDocument(); + expect( + screen.queryByRole("button", { name: "Cancel" }), + ).not.toBeInTheDocument(); + expect( + screen.queryByRole("button", { name: "Close the modal" }), + ).toBeInTheDocument(); + }); + + it("handles closing through various methods", async () => { + const consoleLog = vi.spyOn(console, "log"); + const { component } = render(ModalTest, { + props: { + open: true, + modalHeading: "Close Test Modal", + }, + }); + + // Close via escape key + await user.keyboard("{Escape}"); + expect(consoleLog).toHaveBeenCalledWith("close"); + + component.$set({ open: true }); + await tick(); + + expect(consoleLog).toHaveBeenCalledWith("open"); + + // Close via clicking outside + await user.click(document.body); + expect(consoleLog).toHaveBeenCalledWith("close"); + + component.$set({ open: true }); + await tick(); + + // Close via close button + const closeButton = screen.getByLabelText("Close the modal"); + await user.click(closeButton); + expect(consoleLog).toHaveBeenCalledWith("close"); + }); +}); diff --git a/tests/ModalExtraSmall.test.svelte b/tests/ModalExtraSmall.test.svelte deleted file mode 100644 index 761c4dbf..00000000 --- a/tests/ModalExtraSmall.test.svelte +++ /dev/null @@ -1,17 +0,0 @@ - - - -

Create a new Cloudant database in the US South region.

-
diff --git a/tests/ModalLarge.test.svelte b/tests/ModalLarge.test.svelte deleted file mode 100644 index 1b9474d9..00000000 --- a/tests/ModalLarge.test.svelte +++ /dev/null @@ -1,17 +0,0 @@ - - - -

Create a new Cloudant database in the US South region.

-
diff --git a/tests/ModalPreventOutsideClick.test.svelte b/tests/ModalPreventOutsideClick.test.svelte deleted file mode 100644 index 6bb89681..00000000 --- a/tests/ModalPreventOutsideClick.test.svelte +++ /dev/null @@ -1,17 +0,0 @@ - - - -

Create a new Cloudant database in the US South region.

-
diff --git a/tests/ModalSmall.test.svelte b/tests/ModalSmall.test.svelte deleted file mode 100644 index 7d4c935f..00000000 --- a/tests/ModalSmall.test.svelte +++ /dev/null @@ -1,17 +0,0 @@ - - - -

Create a new Cloudant database in the US South region.

-
diff --git a/tests/MultiSelect.test.svelte b/tests/MultiSelect.test.svelte deleted file mode 100644 index 1e67f675..00000000 --- a/tests/MultiSelect.test.svelte +++ /dev/null @@ -1,68 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/tests/MultiSelect/MultiSelect.test.svelte b/tests/MultiSelect/MultiSelect.test.svelte new file mode 100644 index 00000000..3c35ba17 --- /dev/null +++ b/tests/MultiSelect/MultiSelect.test.svelte @@ -0,0 +1,57 @@ + + + { + console.log("select", e.detail); + }} + on:clear={(e) => { + console.log("clear", e.detail); + }} +/> diff --git a/tests/MultiSelect/MultiSelect.test.ts b/tests/MultiSelect/MultiSelect.test.ts new file mode 100644 index 00000000..6beb697f --- /dev/null +++ b/tests/MultiSelect/MultiSelect.test.ts @@ -0,0 +1,537 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import MultiSelect from "./MultiSelect.test.svelte"; +import MultiSelectSlot from "./MultiSelectSlot.test.svelte"; + +const items = [ + { id: "0", text: "Slack" }, + { id: "1", text: "Email" }, + { id: "2", text: "Fax" }, +] as const; + +describe("MultiSelect", () => { + const openMenu = async () => + await user.click( + await screen.findByLabelText("Open menu", { + selector: `[role="button"]`, + }), + ); + + const closeMenu = async () => + await user.click( + await screen.findByLabelText("Close menu", { + selector: `[role="button"]`, + }), + ); + + const toggleOption = async (optionText: string) => + await user.click( + await screen.findByText((text) => text.trim() === optionText), + ); + + const nthRenderedOptionText = (index: number) => + screen.queryAllByRole("option").at(index)?.textContent?.trim(); + + it("renders with default props", () => { + render(MultiSelect, { + props: { + items, + titleText: "Contact methods", + }, + }); + + expect(screen.getByText("Contact methods")).toBeInTheDocument(); + expect(screen.getByRole("button")).toBeInTheDocument(); + expect(screen.getByRole("button")).toHaveAttribute( + "aria-expanded", + "false", + ); + }); + + it("renders default slot", () => { + render(MultiSelectSlot, { items }); + expect(screen.getByText("1 Email 0")).toBeInTheDocument(); + expect(screen.getByText("2 Fax 1")).toBeInTheDocument(); + expect(screen.getByText("0 Slack 2")).toBeInTheDocument(); + }); + + describe("selection behavior", () => { + it("handles item selection", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(MultiSelect, { + props: { items }, + }); + + await openMenu(); + await toggleOption("Slack"); + expect(consoleLog).toHaveBeenCalledWith("select", { + selectedIds: ["0"], + selected: [{ id: "0", text: "Slack", checked: true }], + unselected: [ + { id: "1", text: "Email", checked: false }, + { id: "2", text: "Fax", checked: false }, + ], + }); + }); + + it("handles multiple selections", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(MultiSelect, { + props: { items }, + }); + + await openMenu(); + await toggleOption("Slack"); + await toggleOption("Email"); + expect(consoleLog).toHaveBeenCalledWith("select", { + selectedIds: ["0"], + selected: [{ id: "0", text: "Slack", checked: true }], + unselected: [ + { id: "1", text: "Email", checked: false }, + { id: "2", text: "Fax", checked: false }, + ], + }); + expect(consoleLog).toHaveBeenCalledWith("select", { + selectedIds: ["1", "0"], + selected: [ + { id: "1", text: "Email", checked: true }, + { id: "0", text: "Slack", checked: true }, + ], + unselected: [{ id: "2", text: "Fax", checked: false }], + }); + }); + + it("handles item deselection", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(MultiSelect, { + props: { + items, + selectedIds: ["0"], + }, + }); + + await openMenu(); + await toggleOption("Slack"); + expect(consoleLog).toHaveBeenCalledWith("select", { + selectedIds: [], + selected: [], + unselected: [ + { id: "0", text: "Slack", checked: false }, + { id: "1", text: "Email", checked: false }, + { id: "2", text: "Fax", checked: false }, + ], + }); + + await toggleOption("Slack"); + expect(consoleLog).toHaveBeenCalledWith("select", { + selectedIds: [], + selected: [], + unselected: [ + { id: "0", text: "Slack", checked: false }, + { id: "1", text: "Email", checked: false }, + { id: "2", text: "Fax", checked: false }, + ], + }); + }); + }); + + describe("filtering behavior", () => { + it("filters items based on input", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(MultiSelect, { + props: { + items, + filterable: true, + placeholder: "Filter items...", + }, + }); + + await openMenu(); + const input = screen.getByPlaceholderText("Filter items..."); + await user.type(input, "em"); + + expect(screen.queryByText("Slack")).not.toBeInTheDocument(); + expect(screen.getByText("Email")).toBeInTheDocument(); + expect(screen.queryByText("Fax")).not.toBeInTheDocument(); + + await user.keyboard("{ArrowDown}{Enter}"); + expect(consoleLog).toHaveBeenCalledWith("select", { + selectedIds: ["1"], + selected: [{ id: "1", text: "Email", checked: true }], + unselected: [ + { id: "2", text: "Fax", checked: false }, + { id: "0", text: "Slack", checked: false }, + ], + }); + }); + + it("uses custom filter function", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(MultiSelect, { + props: { + items, + filterable: true, + filterItem: (item, value) => { + return item.text.toLowerCase().startsWith(value.toLowerCase()); + }, + }, + }); + + await openMenu(); + const input = screen.getByRole("combobox"); + await user.type(input, "e"); + + expect(screen.queryByText("Slack")).not.toBeInTheDocument(); + expect(screen.getByText("Email")).toBeInTheDocument(); + expect(screen.queryByText("Fax")).not.toBeInTheDocument(); + + await user.keyboard("{ArrowDown}{Enter}"); + expect(consoleLog).toHaveBeenCalledWith("select", { + selectedIds: ["1"], + selected: [{ id: "1", text: "Email", checked: true }], + unselected: [ + { id: "2", text: "Fax", checked: false }, + { id: "0", text: "Slack", checked: false }, + ], + }); + }); + }); + + describe("sorting behavior", () => { + it("initially sorts items alphabetically", async () => { + render(MultiSelect, { + props: { + items: [ + { id: "1", text: "C" }, + { id: "3", text: "A" }, + { id: "2", text: "B" }, + ], + }, + }); + + await openMenu(); + expect(nthRenderedOptionText(0)).toBe("A"); + expect(nthRenderedOptionText(1)).toBe("B"); + expect(nthRenderedOptionText(2)).toBe("C"); + }); + + it("moves selected items to top with selectionFeedback: top", async () => { + render(MultiSelect, { + props: { + items: [ + { id: "3", text: "C" }, + { id: "1", text: "A" }, + { id: "2", text: "B" }, + ], + selectionFeedback: "top", + }, + }); + + await openMenu(); + expect(nthRenderedOptionText(0)).toBe("A"); + + await toggleOption("C"); + expect(nthRenderedOptionText(0)).toBe("C"); + + await toggleOption("C"); + expect(nthRenderedOptionText(0)).toBe("A"); + }); + + it("sorts after reopen with selectionFeedback: top-after-reopen", async () => { + render(MultiSelect, { + props: { + items: [ + { id: "3", text: "C" }, + { id: "1", text: "A" }, + { id: "2", text: "B" }, + ], + }, + }); + + await openMenu(); + expect(nthRenderedOptionText(0)).toBe("A"); + + await toggleOption("C"); + expect(nthRenderedOptionText(0)).toBe("A"); + + await closeMenu(); + await openMenu(); + expect(nthRenderedOptionText(0)).toBe("C"); + }); + + it("maintains order with selectionFeedback: fixed", async () => { + render(MultiSelect, { + props: { + items: [ + { id: "3", text: "C" }, + { id: "1", text: "A" }, + { id: "2", text: "B" }, + ], + selectionFeedback: "fixed", + }, + }); + + await openMenu(); + expect(nthRenderedOptionText(0)).toBe("A"); + + await toggleOption("C"); + expect(nthRenderedOptionText(0)).toBe("A"); + + await closeMenu(); + await openMenu(); + expect(nthRenderedOptionText(0)).toBe("A"); + }); + }); + + describe("variants and states", () => { + it("renders in light variant", async () => { + render(MultiSelect, { + props: { + items, + light: true, + }, + }); + + await openMenu(); + const listBox = screen.getByRole("listbox").closest(".bx--list-box"); + expect(listBox).toHaveClass("bx--list-box--light"); + }); + + it("renders in inline variant", () => { + render(MultiSelect, { + props: { + items, + type: "inline", + }, + }); + + const wrapper = screen + .getByRole("button") + .closest(".bx--multi-select__wrapper"); + expect(wrapper).toHaveClass("bx--multi-select__wrapper--inline"); + }); + + it("handles invalid state", () => { + render(MultiSelect, { + props: { + items, + invalid: true, + invalidText: "Invalid selection", + }, + }); + + expect(screen.getByText("Invalid selection")).toBeInTheDocument(); + const wrapper = screen.getByRole("button").closest(".bx--list-box"); + expect(wrapper).toHaveClass("bx--multi-select--invalid"); + }); + + it("handles warning state", () => { + render(MultiSelect, { + props: { + items, + warn: true, + warnText: "Warning message", + }, + }); + + expect(screen.getByText("Warning message")).toBeInTheDocument(); + const wrapper = screen.getByRole("button").closest(".bx--list-box"); + expect(wrapper).toHaveClass("bx--list-box--warning"); + }); + + it("handles disabled state", () => { + render(MultiSelect, { + props: { + items, + disabled: true, + }, + }); + + const field = screen.getByRole("button"); + expect(field).toHaveAttribute("aria-disabled", "true"); + expect(field).toHaveAttribute("tabindex", "-1"); + expect(field.closest(".bx--multi-select")).toHaveAttribute( + "tabindex", + "-1", + ); + }); + + it("handles disabled items", async () => { + const itemsWithDisabled = [ + { id: "0", text: "Slack" }, + { id: "1", text: "Email", disabled: true }, + { id: "2", text: "Fax" }, + ]; + + render(MultiSelect, { + props: { + items: itemsWithDisabled, + }, + }); + + await openMenu(); + const emailOption = screen + .getByText("Email") + .closest(".bx--list-box__menu-item"); + expect(emailOption).toHaveAttribute("disabled"); + }); + }); + + describe("accessibility", () => { + it("handles hidden label", () => { + render(MultiSelect, { + props: { + items, + titleText: "Contact methods", + hideLabel: true, + }, + }); + + const label = screen.getByText("Contact methods"); + expect(label).toHaveClass("bx--visually-hidden"); + }); + }); + + describe("custom formatting", () => { + it("handles custom itemToString", () => { + render(MultiSelect, { + props: { + items, + selectedIds: ["0"], + itemToString: (item) => `${item.text} (${item.id})`, + }, + }); + + expect(screen.getByText("Slack (0)")).toBeInTheDocument(); + }); + + it("handles custom itemToInput", async () => { + render(MultiSelect, { + props: { + items, + itemToInput: (item) => ({ + name: `contact_${item.id}`, + value: item.text.toLowerCase(), + }), + }, + }); + + await openMenu(); + const checkbox = screen.getByText("Slack"); + const checkboxWrapper = checkbox.closest(".bx--checkbox-wrapper"); + const checkboxInput = checkboxWrapper?.querySelector("input"); + expect(checkboxInput).toHaveAttribute("name", "contact_0"); + expect(checkboxInput).toHaveAttribute("value", "slack"); + }); + }); + + it("does not show helper text if warn is true", () => { + render(MultiSelect, { + props: { + items, + helperText: "Help", + warn: true, + }, + }); + expect(screen.queryByText("Help")).not.toBeInTheDocument(); + }); + + it("does not show helper text if invalid is true", () => { + render(MultiSelect, { + props: { + items, + helperText: "Help", + invalid: true, + }, + }); + expect(screen.queryByText("Help")).not.toBeInTheDocument(); + }); + + it("does not show helper text if inline is true", () => { + render(MultiSelect, { + props: { + items, + helperText: "Help", + type: "inline", + }, + }); + expect(screen.queryByText("Help")).not.toBeInTheDocument(); + }); + + it("clears all selections when clear button is clicked", async () => { + render(MultiSelect, { + props: { + items, + selectedIds: ["0", "1"], + }, + }); + await openMenu(); + + const options = screen.getAllByRole("option"); + expect(options[0]).toHaveAttribute("aria-selected", "true"); + expect(options[1]).toHaveAttribute("aria-selected", "true"); + expect(options[2]).toHaveAttribute("aria-selected", "false"); + + const clearButton = screen.getByRole("button", { name: /clear/i }); + await user.click(clearButton); + await closeMenu(); + + expect(options[0]).toHaveAttribute("aria-selected", "false"); + expect(options[1]).toHaveAttribute("aria-selected", "false"); + expect(options[2]).toHaveAttribute("aria-selected", "false"); + }); + + it("skips disabled items during keyboard navigation", async () => { + render(MultiSelect, { + props: { + items: [ + { id: "1", text: "Aa" }, + { id: "2", text: "Ba", disabled: true }, + { id: "3", text: "Ca" }, + ], + filterable: true, + placeholder: "Filter...", + }, + }); + await openMenu(); + const input = screen.getByPlaceholderText("Filter..."); + + await user.type(input, "a"); + await user.keyboard("{ArrowDown}"); + await user.keyboard("{ArrowDown}"); + await user.keyboard("{Enter}"); + + const options = screen.getAllByRole("option"); + expect(options[2]).toHaveAttribute("aria-selected", "true"); + }); + + it("focuses input when filterable and menu is opened", async () => { + render(MultiSelect, { + props: { + items, + filterable: true, + placeholder: "Filter...", + }, + }); + await openMenu(); + const input = screen.getByPlaceholderText("Filter..."); + expect(input).toHaveFocus(); + }); + + it("does not select disabled items when clicked", async () => { + render(MultiSelect, { + props: { + items: [ + { id: "1", text: "A" }, + { id: "2", text: "B", disabled: true }, + { id: "3", text: "C" }, + ], + }, + }); + await openMenu(); + const disabledOption = screen.getByText("B").closest("[role='option']"); + + await user.click(disabledOption!); + expect(disabledOption).toHaveAttribute("aria-selected", "false"); + }); +}); diff --git a/tests/MultiSelect/MultiSelectSlot.test.svelte b/tests/MultiSelect/MultiSelectSlot.test.svelte new file mode 100644 index 00000000..a4fbfec1 --- /dev/null +++ b/tests/MultiSelect/MultiSelectSlot.test.svelte @@ -0,0 +1,12 @@ + + + +
+ {item.id} {item.text} {index} +
+
diff --git a/tests/NarrowGrid.test.svelte b/tests/NarrowGrid.test.svelte deleted file mode 100644 index a39cd612..00000000 --- a/tests/NarrowGrid.test.svelte +++ /dev/null @@ -1,12 +0,0 @@ - - - - - Column - Column - Column - Column - - diff --git a/tests/NumberInput.test.svelte b/tests/NumberInput.test.svelte deleted file mode 100644 index 8d91a7af..00000000 --- a/tests/NumberInput.test.svelte +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/tests/NumberInput/NumberInput.test.svelte b/tests/NumberInput/NumberInput.test.svelte new file mode 100644 index 00000000..9794540c --- /dev/null +++ b/tests/NumberInput/NumberInput.test.svelte @@ -0,0 +1,59 @@ + + + + +
{value}
diff --git a/tests/NumberInput/NumberInput.test.ts b/tests/NumberInput/NumberInput.test.ts new file mode 100644 index 00000000..769a9f7c --- /dev/null +++ b/tests/NumberInput/NumberInput.test.ts @@ -0,0 +1,237 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import NumberInput from "./NumberInput.test.svelte"; +import NumberInputCustom from "./NumberInputCustom.test.svelte"; + +describe("NumberInput", () => { + it("should render with default props", () => { + render(NumberInput); + + expect(screen.getByLabelText("Clusters")).toBeInTheDocument(); + expect(screen.getByRole("spinbutton")).toHaveValue(0); + }); + + it("should handle step value", () => { + render(NumberInput, { props: { step: 0.1 } }); + + expect(screen.getByRole("spinbutton")).toHaveAttribute("step", "0.1"); + }); + + it("should handle min and max values", () => { + render(NumberInput, { props: { min: 4, max: 20 } }); + + const input = screen.getByRole("spinbutton"); + expect(input).toHaveAttribute("min", "4"); + expect(input).toHaveAttribute("max", "20"); + }); + + it("should handle different sizes", () => { + (["sm", "xl"] as const).forEach((size) => { + const { container } = render(NumberInput, { + props: { size }, + }); + + const input = container.querySelector("input"); + expect(input?.closest(".bx--number")).toHaveClass(`bx--number--${size}`); + container.remove(); + }); + }); + + it("should handle light variant", () => { + render(NumberInput, { props: { light: true } }); + + expect(screen.getByRole("spinbutton").closest(".bx--number")).toHaveClass( + "bx--number--light", + ); + }); + + it("should handle disabled state", () => { + render(NumberInput, { + props: { disabled: true }, + }); + + const input = screen.getByRole("spinbutton"); + expect(input).toBeDisabled(); + expect(screen.getByText("Clusters")).toHaveClass("bx--label--disabled"); + }); + + it("should handle helper text", () => { + render(NumberInput, { + props: { helperText: "Helper text" }, + }); + + expect(screen.getByText("Helper text")).toHaveClass( + "bx--form__helper-text", + ); + }); + + it("should handle invalid state", () => { + render(NumberInput, { + props: { invalid: true, invalidText: "Invalid input" }, + }); + + const input = screen.getByRole("spinbutton"); + expect(input).toHaveAttribute("aria-invalid", "true"); + expect(screen.getByText("Invalid input")).toBeInTheDocument(); + + expect(input.closest(".bx--number")).toHaveAttribute( + "data-invalid", + "true", + ); + }); + + it("should handle warning state", () => { + render(NumberInput, { + props: { warn: true, warnText: "Warning message" }, + }); + + const input = screen.getByRole("spinbutton"); + expect(input.closest(".bx--number__input-wrapper")).toHaveClass( + "bx--number__input-wrapper--warning", + ); + expect(screen.getByText("Warning message")).toBeInTheDocument(); + }); + + it("should handle hidden label", () => { + render(NumberInput, { props: { hideLabel: true } }); + + expect(screen.getByText("Clusters")).toHaveClass("bx--visually-hidden"); + }); + + it("should handle custom id", () => { + render(NumberInput, { props: { id: "custom-id" } }); + + const input = screen.getByRole("spinbutton"); + expect(input).toHaveAttribute("id", "custom-id"); + expect(screen.getByText("Clusters")).toHaveAttribute("for", "custom-id"); + }); + + it("should handle custom name", () => { + render(NumberInput, { props: { name: "custom-name" } }); + + expect(screen.getByRole("spinbutton")).toHaveAttribute( + "name", + "custom-name", + ); + }); + + it("should handle readonly state", () => { + render(NumberInput, { props: { readonly: true } }); + + expect(screen.getByRole("spinbutton")).toHaveAttribute("readonly"); + }); + + it("should handle hidden steppers", () => { + render(NumberInput, { props: { hideSteppers: true } }); + + expect( + screen.queryByRole("button", { name: "Increment number" }), + ).not.toBeInTheDocument(); + expect( + screen.queryByRole("button", { name: "Decrement number" }), + ).not.toBeInTheDocument(); + }); + + // TODO(bug): The icon descriptions are not being applied. + it.skip("should handle custom icon descriptions", () => { + render(NumberInput, { + props: { iconDescription: "Custom description" }, + }); + + screen.getAllByRole("button").forEach((button) => { + expect(button).toHaveAttribute("title", "Custom description"); + }); + }); + + it("should handle custom slots", () => { + render(NumberInputCustom); + + expect(screen.getByText("Custom Label Text")).toBeInTheDocument(); + }); + + it("should handle value binding", async () => { + render(NumberInput); + + const input = screen.getByRole("spinbutton"); + await user.type(input, "5"); + expect(screen.getByTestId("value").textContent).toBe("5"); + }); + + it("should handle increment/decrement buttons", async () => { + render(NumberInput); + + const incrementButton = screen.getByRole("button", { + name: "Increment number", + }); + const decrementButton = screen.getByRole("button", { + name: "Decrement number", + }); + + await user.click(incrementButton); + expect(screen.getByTestId("value").textContent).toBe("1"); + + await user.click(decrementButton); + expect(screen.getByTestId("value").textContent).toBe("0"); + }); + + it("should handle empty value when allowEmpty is true", async () => { + render(NumberInput, { + props: { allowEmpty: true }, + }); + + const input = screen.getByRole("spinbutton"); + await user.clear(input); + expect(input).toHaveValue(null); + }); + + it("should handle min/max validation", async () => { + render(NumberInput, { props: { min: 4, max: 20 } }); + + const input = screen.getByRole("spinbutton"); + await user.type(input, "25"); + expect(screen.getByTestId("value").textContent).toBe("25"); + expect(screen.getByRole("spinbutton")).toHaveAttribute( + "aria-invalid", + "true", + ); + }); + + it("should not show helper text when invalid", () => { + render(NumberInput, { + props: { + invalid: true, + invalidText: "Invalid input", + helperText: "Helper text", + }, + }); + + expect(screen.queryByText("Helper text")).not.toBeInTheDocument(); + expect(screen.getByText("Invalid input")).toBeInTheDocument(); + }); + + it("should not show helper text when warning", () => { + render(NumberInput, { + props: { + warn: true, + warnText: "Warning message", + helperText: "Helper text", + }, + }); + + expect(screen.queryByText("Helper text")).not.toBeInTheDocument(); + expect(screen.getByText("Warning message")).toBeInTheDocument(); + }); + + it("should handle disabled helper text", () => { + render(NumberInput, { + props: { + disabled: true, + helperText: "Helper text", + }, + }); + + expect(screen.getByText("Helper text")).toHaveClass( + "bx--form__helper-text--disabled", + ); + }); +}); diff --git a/tests/NumberInput/NumberInputCustom.test.svelte b/tests/NumberInput/NumberInputCustom.test.svelte new file mode 100644 index 00000000..4fa329a9 --- /dev/null +++ b/tests/NumberInput/NumberInputCustom.test.svelte @@ -0,0 +1,7 @@ + + + + Custom Label Text + diff --git a/tests/OffsetColumns.test.svelte b/tests/OffsetColumns.test.svelte deleted file mode 100644 index 085ec706..00000000 --- a/tests/OffsetColumns.test.svelte +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - Offset 3 - - - Offset 2 - - - Offset 1 - - - Offset 0 - - - diff --git a/tests/OrderedList.test.svelte b/tests/OrderedList.test.svelte deleted file mode 100644 index 46856519..00000000 --- a/tests/OrderedList.test.svelte +++ /dev/null @@ -1,57 +0,0 @@ - - - - Ordered list item - Ordered list item - Ordered list item - - - - - Ordered list item - - - Ordered list item - - - Ordered list item - - - - - - Ordered list level 1 - - Ordered list level 2 - - Ordered list level 3 - - Ordered list level 3 - Ordered list level 3 - - - - - Ordered list level 1 - Ordered list level 1 - - - - - Ordered list level 1 - - Ordered list level 2 - - Ordered list level 3 - - Ordered list level 3 - Ordered list level 3 - - - - - Ordered list level 1 - Ordered list level 1 - diff --git a/tests/OrderedList/OrderedList.test.svelte b/tests/OrderedList/OrderedList.test.svelte new file mode 100644 index 00000000..07e2a41c --- /dev/null +++ b/tests/OrderedList/OrderedList.test.svelte @@ -0,0 +1,36 @@ + + + + +
+ + {#each items as item} + + {item} + {#if nested && nestedItems.length > 0} + + {#each nestedItems as nestedItem} + {nestedItem} + {/each} + + {/if} + + {/each} + +
diff --git a/tests/OrderedList/OrderedList.test.ts b/tests/OrderedList/OrderedList.test.ts new file mode 100644 index 00000000..56357e5c --- /dev/null +++ b/tests/OrderedList/OrderedList.test.ts @@ -0,0 +1,172 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import OrderedList from "./OrderedList.test.svelte"; + +describe("OrderedList", () => { + it("should render with default props", () => { + render(OrderedList); + + const list = screen.getByRole("list"); + expect(list).toHaveClass("bx--list--ordered"); + expect(list).not.toHaveClass("bx--list--ordered--native"); + expect(list).not.toHaveClass("bx--list--nested"); + expect(list).not.toHaveClass("bx--list--expressive"); + + const items = screen.getAllByRole("listitem"); + expect(items).toHaveLength(3); + expect(items[0]).toHaveTextContent("Item 1"); + expect(items[1]).toHaveTextContent("Item 2"); + expect(items[2]).toHaveTextContent("Item 3"); + }); + + it("should support nested lists", () => { + render(OrderedList, { + props: { + nested: true, + nestedItems: ["Nested 1", "Nested 2"], + }, + }); + + const lists = screen.getAllByRole("list"); + expect(lists).toHaveLength(4); // Main list + 3 nested lists (one for each main item) + + const mainList = lists[0]; + expect(mainList).toHaveClass("bx--list--ordered"); + expect(mainList).toHaveClass("bx--list--nested"); + + const nestedLists = lists.slice(1); + nestedLists.forEach((list) => { + expect(list).toHaveClass("bx--list--ordered"); + expect(list).toHaveClass("bx--list--nested"); + }); + + const items = screen.getAllByRole("listitem"); + expect(items).toHaveLength(9); // 3 main items + (2 nested items × 3) + }); + + it("should support native list styles", () => { + render(OrderedList, { + props: { native: true }, + }); + + const list = screen.getByRole("list"); + expect(list).toHaveClass("bx--list--ordered--native"); + expect(list).not.toHaveClass("bx--list--ordered"); + }); + + it("should support native list styles with nesting", () => { + render(OrderedList, { + props: { + native: true, + nested: true, + nestedItems: ["Nested 1", "Nested 2"], + }, + }); + + const lists = screen.getAllByRole("list"); + + // Only the top-level list has the native class + expect(lists[0]).toHaveClass("bx--list--ordered--native"); + expect(lists[0]).not.toHaveClass("bx--list--ordered"); + + lists.slice(1).forEach((list) => { + expect(list).toHaveClass("bx--list--ordered bx--list--nested"); + expect(list).not.toHaveClass("bx--list--ordered--native"); + }); + }); + + it("should support expressive styles", () => { + render(OrderedList, { + props: { expressive: true }, + }); + + const list = screen.getByRole("list"); + expect(list).toHaveClass("bx--list--expressive"); + }); + + it("should support custom items", () => { + const customItems = ["Custom 1", "Custom 2", "Custom 3", "Custom 4"]; + render(OrderedList, { + props: { items: customItems }, + }); + + const items = screen.getAllByRole("listitem"); + expect(items).toHaveLength(customItems.length); + items.forEach((item, index) => { + expect(item).toHaveTextContent(customItems[index]); + }); + }); + + describe("events", () => { + it("should emit click event", async () => { + const { component } = render(OrderedList); + const list = screen.getByRole("list"); + + const mock = vi.fn(); + component.$on("click", mock); + + await user.click(list); + expect(mock).toHaveBeenCalled(); + }); + + test.each(["mouseover", "mouseenter", "mouseleave"])( + "should emit %s event", + (eventName) => { + const { component } = render(OrderedList); + const list = screen.getByRole("list"); + + const mock = vi.fn(); + component.$on(eventName, mock); + + const event = new MouseEvent(eventName); + list.dispatchEvent(event); + + expect(mock).toHaveBeenCalled(); + }, + ); + }); + + describe("accessibility", () => { + it("should have correct ARIA role", () => { + render(OrderedList); + + const list = screen.getByRole("list"); + expect(list.tagName).toBe("OL"); + + const items = screen.getAllByRole("listitem"); + items.forEach((item) => { + expect(item.tagName).toBe("LI"); + }); + }); + + it("should maintain list structure with nested items", () => { + render(OrderedList, { + props: { + nested: true, + nestedItems: ["Nested 1", "Nested 2"], + }, + }); + + const lists = screen.getAllByRole("list"); + lists.forEach((list) => { + expect(list.tagName).toBe("OL"); + expect(list.children).toBeTruthy(); + Array.from(list.children).forEach((child) => { + expect(child.tagName).toBe("LI"); + }); + }); + }); + + it("should maintain correct order with native styles", () => { + const items = ["First", "Second", "Third", "Fourth", "Fifth"]; + render(OrderedList, { + props: { native: true, items }, + }); + + const listItems = screen.getAllByRole("listitem"); + items.forEach((text, index) => { + expect(listItems[index]).toHaveTextContent(text); + }); + }); + }); +}); diff --git a/tests/OverflowMenu.test.svelte b/tests/OverflowMenu.test.svelte deleted file mode 100644 index b728fb23..00000000 --- a/tests/OverflowMenu.test.svelte +++ /dev/null @@ -1,77 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Custom trigger
- - - -
diff --git a/tests/OverflowMenu/OverflowMenu.test.svelte b/tests/OverflowMenu/OverflowMenu.test.svelte new file mode 100644 index 00000000..18d23727 --- /dev/null +++ b/tests/OverflowMenu/OverflowMenu.test.svelte @@ -0,0 +1,47 @@ + + + { + console.log("close", e.detail); // { index: number; text: string; } + }} +> + { + console.log("click", "Manage credentials"); + }} + /> + { + console.log("click", "API documentation"); + }} + /> + { + console.log("click", "Delete service"); + }} + /> + diff --git a/tests/OverflowMenu/OverflowMenu.test.ts b/tests/OverflowMenu/OverflowMenu.test.ts new file mode 100644 index 00000000..49ff18ef --- /dev/null +++ b/tests/OverflowMenu/OverflowMenu.test.ts @@ -0,0 +1,290 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import OverflowMenu from "./OverflowMenu.test.svelte"; + +describe("OverflowMenu", () => { + it("renders and functions correctly", async () => { + render(OverflowMenu); + + const menuButton = screen.getByRole("button"); + expect(menuButton).toHaveAttribute("aria-haspopup", "true"); + expect(menuButton).toHaveAttribute("aria-expanded", "false"); + + await user.click(menuButton); + expect(menuButton).toHaveAttribute("aria-expanded", "true"); + + const menuItems = screen.getAllByRole("menuitem"); + expect(menuItems).toHaveLength(3); + expect(menuItems[0]).toHaveFocus(); + + expect(menuItems[0]).toHaveTextContent("Manage credentials"); + expect(menuItems[1]).toHaveTextContent("API documentation"); + expect(menuItems[2]).toHaveTextContent("Delete service"); + + expect(menuItems[1]).toHaveAttribute( + "href", + "https://cloud.ibm.com/docs/api-gateway/", + ); + + expect(menuItems[2].parentElement).toHaveClass( + "bx--overflow-menu-options__option--danger", + ); + + const spy = vi.spyOn(console, "log"); + await user.click(menuItems[0]); + expect(spy).toHaveBeenCalledWith("click", "Manage credentials"); + + expect(menuButton).toHaveAttribute("aria-expanded", "false"); + expect(spy).toHaveBeenCalledWith("close", { + index: 0, + text: "Manage credentials", + }); + }); + + it("handles keyboard navigation", async () => { + render(OverflowMenu); + + const spy = vi.spyOn(console, "log"); + + const menuButton = screen.getByRole("button"); + await user.click(menuButton); + expect(menuButton).toHaveAttribute("aria-expanded", "true"); + + let menuItems = screen.getAllByRole("menuitem"); + expect(menuItems[0]).toHaveFocus(); + + await user.keyboard("{ArrowDown}"); + expect(menuItems[1]).toHaveFocus(); + + await user.keyboard("{Enter}"); + expect(spy).toHaveBeenCalledWith("click", "API documentation"); + + await user.click(menuButton); + menuItems = screen.getAllByRole("menuitem"); + expect(menuItems[0]).toHaveFocus(); + + await user.keyboard("{ArrowUp}"); + expect(menuItems[2]).toHaveFocus(); + + await user.keyboard("{Escape}"); + expect(menuButton).toHaveAttribute("aria-expanded", "false"); + expect(spy).toHaveBeenCalledWith("close", null); + }); + + it("closes when clicking outside", async () => { + render(OverflowMenu); + + const menuButton = screen.getByRole("button"); + await user.click(menuButton); + expect(menuButton).toHaveAttribute("aria-expanded", "true"); + + await user.click(document.body); + expect(menuButton).toHaveAttribute("aria-expanded", "false"); + }); + + it("uses CSS custom properties for performance optimization", async () => { + const { container } = render(OverflowMenu); + + const styleTags = document.querySelectorAll("style"); + const initialStyleCount = styleTags.length; + expect(styleTags.length).toBe(initialStyleCount); + + await user.click(screen.getByRole("button")); + expect(container.querySelector(".bx--overflow-menu-options")).toHaveStyle( + "--overflow-menu-options-after-width: 2rem", + ); + expect(styleTags.length).toBe(initialStyleCount); + }); + + it("stress test: multiple instances don't create individual style tags", async () => { + const { container: container1 } = render(OverflowMenu); + const { container: container2 } = render(OverflowMenu); + const { container: container3 } = render(OverflowMenu); + + const styleTagsBefore = document.querySelectorAll("style").length; + const menuButtons1 = container1.querySelectorAll("button"); + const menuButtons2 = container2.querySelectorAll("button"); + const menuButtons3 = container3.querySelectorAll("button"); + + await user.click(menuButtons1[0]); + await user.click(menuButtons2[0]); + await user.click(menuButtons3[0]); + + const styleTagsAfter = document.querySelectorAll("style").length; + + // Verify no additional style tags created (old approach would create 3+) + expect(styleTagsAfter).toBe(styleTagsBefore); + + // Verify all menus have CSS custom property set. + const allMenus = [ + ...container1.querySelectorAll(".bx--overflow-menu-options"), + ...container2.querySelectorAll(".bx--overflow-menu-options"), + ...container3.querySelectorAll(".bx--overflow-menu-options"), + ]; + + expect(allMenus.length).toBeGreaterThan(0); + allMenus.forEach((menu) => { + expect(menu).toHaveStyle("--overflow-menu-options-after-width: 2rem"); + }); + }); + + test.each([ + ["sm", "bx--overflow-menu--sm"], + ["xl", "bx--overflow-menu--xl"], + ] as const)("should support %s size", (size, expectedClass) => { + render(OverflowMenu, { props: { size } }); + + const menuButton = screen.getByRole("button"); + expect(menuButton).toHaveClass(expectedClass); + }); + + it("should not apply size classes when size is undefined", () => { + render(OverflowMenu, { props: { size: undefined } }); + + const menuButton = screen.getByRole("button"); + expect(menuButton).not.toHaveClass("bx--overflow-menu--sm"); + expect(menuButton).not.toHaveClass("bx--overflow-menu--xl"); + }); + + it("applies light variant styling", () => { + render(OverflowMenu, { props: { light: true } }); + + const menuButton = screen.getByRole("button"); + expect(menuButton).toHaveClass("bx--overflow-menu--light"); + }); + + it("applies flipped styling", async () => { + render(OverflowMenu, { props: { flipped: true } }); + + const menuButton = screen.getByRole("button"); + await user.click(menuButton); + + const menu = screen.getByRole("menu"); + expect(menu).toHaveClass("bx--overflow-menu--flip"); + }); + + it("applies direction attribute", async () => { + render(OverflowMenu, { props: { direction: "top" } }); + + const menuButton = screen.getByRole("button"); + await user.click(menuButton); + + const menu = screen.getByRole("menu"); + expect(menu).toHaveAttribute("data-floating-menu-direction", "top"); + }); + + it("applies custom menu options class", async () => { + render(OverflowMenu, { props: { menuOptionsClass: "custom-class" } }); + + const menuButton = screen.getByRole("button"); + await user.click(menuButton); + + const menu = screen.getByRole("menu"); + expect(menu).toHaveClass("custom-class"); + }); + + it("applies custom icon class", () => { + render(OverflowMenu, { props: { iconClass: "custom-icon-class" } }); + + const icon = screen.getByRole("button").querySelector("svg"); + expect(icon).toHaveClass("custom-icon-class"); + }); + + it("uses custom icon description", () => { + render(OverflowMenu, { props: { iconDescription: "Custom description" } }); + + const icon = screen.getByRole("button").querySelector("svg"); + expect(icon).toHaveAttribute("aria-label", "Custom description"); + }); + + it("uses custom id", () => { + render(OverflowMenu, { props: { id: "custom-id" } }); + + const menuButton = screen.getByRole("button"); + expect(menuButton).toHaveAttribute("id", "custom-id"); + }); + + it("applies danger styling to menu items", async () => { + render(OverflowMenu); + + const menuButton = screen.getByRole("button"); + await user.click(menuButton); + + const menuItems = screen.getAllByRole("menuitem"); + const dangerItem = menuItems.find( + (item) => item.textContent === "Delete service", + ); + expect(dangerItem?.parentElement).toHaveClass( + "bx--overflow-menu-options__option--danger", + ); + }); + + it("handles link menu items correctly", async () => { + render(OverflowMenu); + + const menuButton = screen.getByRole("button"); + await user.click(menuButton); + + const menuItems = screen.getAllByRole("menuitem"); + const linkItem = menuItems.find( + (item) => item.textContent === "API documentation", + ); + expect(linkItem).toHaveAttribute( + "href", + "https://cloud.ibm.com/docs/api-gateway/", + ); + }); + + it("returns focus to button after menu closes", async () => { + render(OverflowMenu); + + const menuButton = screen.getByRole("button"); + await user.click(menuButton); + + const menuItems = screen.getAllByRole("menuitem"); + expect(menuItems[0]).toHaveFocus(); + + await user.keyboard("{Escape}"); + expect(menuButton).toHaveFocus(); + }); + + it("handles close event with item click", async () => { + render(OverflowMenu); + + const spy = vi.spyOn(console, "log"); + const menuButton = screen.getByRole("button"); + await user.click(menuButton); + + const menuItems = screen.getAllByRole("menuitem"); + await user.click(menuItems[0]); + + expect(spy).toHaveBeenCalledWith("close", { + index: 0, + text: "Manage credentials", + }); + }); + + it("handles close event with escape key", async () => { + render(OverflowMenu); + + const spy = vi.spyOn(console, "log"); + const menuButton = screen.getByRole("button"); + await user.click(menuButton); + + await user.keyboard("{Escape}"); + + expect(spy).toHaveBeenCalledWith("close", null); + }); + + it("handles close event with outside click", async () => { + render(OverflowMenu); + + const spy = vi.spyOn(console, "log"); + const menuButton = screen.getByRole("button"); + await user.click(menuButton); + + await user.click(document.body); + + expect(spy).toHaveBeenCalledWith("close", null); + }); +}); diff --git a/tests/PaddedGrid.test.svelte b/tests/PaddedGrid.test.svelte deleted file mode 100644 index 5b7a7c74..00000000 --- a/tests/PaddedGrid.test.svelte +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - Column - - - Column - - - Column - - - Column - - - diff --git a/tests/Pagination.test.svelte b/tests/Pagination.test.svelte deleted file mode 100644 index e56f2de9..00000000 --- a/tests/Pagination.test.svelte +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - diff --git a/tests/Pagination/Pagination.test.svelte b/tests/Pagination/Pagination.test.svelte new file mode 100644 index 00000000..8648a268 --- /dev/null +++ b/tests/Pagination/Pagination.test.svelte @@ -0,0 +1,52 @@ + + + { + console.log("change", e.detail); + }} + on:click:button--previous={(e) => { + console.log("previous", e.detail); + }} + on:click:button--next={(e) => { + console.log("next", e.detail); + }} + on:update={(e) => { + console.log("update", e.detail); + }} +/> diff --git a/tests/Pagination/Pagination.test.ts b/tests/Pagination/Pagination.test.ts new file mode 100644 index 00000000..6ce54289 --- /dev/null +++ b/tests/Pagination/Pagination.test.ts @@ -0,0 +1,279 @@ +import { render, screen, within } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import Pagination from "./Pagination.test.svelte"; + +describe("Pagination", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it("should render with default props", () => { + render(Pagination); + + expect(screen.getByText("Items per page:")).toBeInTheDocument(); + expect( + screen.getByRole("button", { name: "Next page" }), + ).toBeInTheDocument(); + expect( + screen.getByRole("button", { name: "Previous page" }), + ).toBeInTheDocument(); + }); + + it("should render with custom total items", () => { + render(Pagination, { + props: { totalItems: 102 }, + }); + + expect(screen.getByText("1–10 of 102 items")).toBeInTheDocument(); + }); + + it("should handle custom page sizes", () => { + render(Pagination, { + props: { + totalItems: 102, + pageSizes: [10, 15, 20], + pageSize: 15, + }, + }); + + const select = screen.getByRole("combobox", { name: "Items per page:" }); + expect(select).toHaveValue("15"); + + const options = within(select).getAllByRole("option"); + expect(options).toHaveLength(3); + expect(options[0]).toHaveTextContent("10"); + expect(options[1]).toHaveTextContent("15"); + expect(options[2]).toHaveTextContent("20"); + }); + + it("should handle page navigation", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Pagination, { + props: { totalItems: 102, page: 1 }, + }); + + const nextButton = screen.getByRole("button", { name: "Next page" }); + await user.click(nextButton); + expect(consoleLog).toHaveBeenCalledWith("next", { page: 2 }); + expect(consoleLog).toHaveBeenCalledWith("change", { page: 2 }); + + const prevButton = screen.getByRole("button", { name: "Previous page" }); + await user.click(prevButton); + expect(consoleLog).toHaveBeenCalledWith("previous", { page: 1 }); + expect(consoleLog).toHaveBeenCalledWith("change", { page: 1 }); + }); + + it("should handle page size changes", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Pagination, { + props: { + totalItems: 102, + pageSizes: [10, 15, 20], + }, + }); + + const select = screen.getByRole("combobox", { name: "Items per page:" }); + await user.selectOptions(select, "15"); + + expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 15 }); + expect(consoleLog).toHaveBeenCalledWith("update", { + pageSize: 15, + page: 1, + }); + }); + + it("should handle page selection", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Pagination, { + props: { totalItems: 102, pageSizes: [5, 10, 15] }, + }); + + const pageSelect = screen.getAllByRole("combobox"); + await user.selectOptions(pageSelect[0], "5"); + + expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 5 }); + expect(consoleLog).toHaveBeenCalledWith("update", { pageSize: 5, page: 1 }); + }); + + it("should disable navigation buttons when disabled", () => { + render(Pagination, { + props: { disabled: true }, + }); + + const prevButton = screen.getByRole("button", { name: "Previous page" }); + const nextButton = screen.getByRole("button", { name: "Next page" }); + + expect(prevButton).toBeDisabled(); + expect(nextButton).toBeDisabled(); + }); + + it("should handle custom button text", () => { + render(Pagination, { + props: { + forwardText: "Next", + backwardText: "Previous", + }, + }); + + expect( + screen.getByRole("button", { name: "Previous" }), + ).toBeInTheDocument(); + expect(screen.getByRole("button", { name: "Next" })).toBeInTheDocument(); + }); + + it("should handle custom items per page text", () => { + render(Pagination, { + props: { + itemsPerPageText: "Show:", + }, + }); + + expect(screen.getByText("Show:")).toBeInTheDocument(); + }); + + it("should handle disabled page input", () => { + render(Pagination, { + props: { pageInputDisabled: true }, + }); + + expect( + screen.queryByRole("combobox", { name: "Page number" }), + ).not.toBeInTheDocument(); + }); + + it("should handle disabled page size input", () => { + render(Pagination, { + props: { pageSizeInputDisabled: true }, + }); + + expect( + screen.queryByRole("combobox", { name: "Items per page:" }), + ).not.toBeInTheDocument(); + }); + + it("should handle unknown pages", () => { + render(Pagination, { + props: { pagesUnknown: true }, + }); + + expect(screen.getByText("1–10 items")).toBeInTheDocument(); + expect(screen.getByText("page 1")).toBeInTheDocument(); + }); + + it("should update when page or pageSize changes", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Pagination, { + props: { totalItems: 102, pageSizes: [5, 10, 15] }, + }); + + // Change page size + const pageSizeSelect = screen.getAllByRole("combobox"); + await user.selectOptions(pageSizeSelect[0], "15"); + expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 15 }); + expect(consoleLog).toHaveBeenCalledWith("update", { + pageSize: 15, + page: 1, + }); + + // Change page + const pageSelect = screen.getAllByRole("combobox"); + await user.selectOptions(pageSelect[1], "2"); + expect(consoleLog).toHaveBeenCalledWith("change", { page: 2 }); + expect(consoleLog).toHaveBeenCalledWith("update", { + pageSize: 15, + page: 2, + }); + }); + + it("should handle edge cases", () => { + render(Pagination, { + props: { + totalItems: 0, + page: 1, + pageSize: 10, + }, + }); + + expect(screen.getByText("0–0 of 0 items")).toBeInTheDocument(); + }); + + it("renders a cap of 1000 page numbers by default", () => { + render(Pagination, { + props: { totalItems: 100_000 }, + }); + + const pageNumbers = screen.getByLabelText(/Page number, of 10000 pages/); + expect(pageNumbers).toHaveLength(1_000 + 1); + }); + + it("renders a custom page window", () => { + render(Pagination, { + props: { totalItems: 100_000, pageWindow: 100 }, + }); + + const pageNumbers = screen.getByLabelText(/Page number, of 10000 pages/); + expect(pageNumbers).toHaveLength(100 + 1); + }); + + it("formats larger numbers using `toLocaleString`", () => { + render(Pagination, { + props: { totalItems: 100_000 }, + }); + + expect(screen.getByText(/1–10 of 100,000 items/)).toBeInTheDocument(); + expect(screen.getByText(/of 10,000 pages/)).toBeInTheDocument(); + }); + + it("handles custom page text", () => { + render(Pagination, { + props: { + pagesUnknown: true, + totalItems: 100_000, + pageText: (page) => `Current page ${page}`, + }, + }); + + expect(screen.getByText(/Current page 1/)).toBeInTheDocument(); + }); + + it("handles custom page range text", () => { + render(Pagination, { + props: { + totalItems: 100_000, + pageRangeText: (current, total) => `${current} of ${total}`, + }, + }); + + expect(screen.getByText(/1 of 10000/)).toBeInTheDocument(); + }); + + it("handles custom item range text", () => { + render(Pagination, { + props: { + totalItems: 100_000, + itemRangeText: (min, max, total) => `${min}–${max} of ${total}`, + }, + }); + + expect(screen.getByText(/1–10 of 100000/)).toBeInTheDocument(); + }); + + it("should dispatch change event with new value, not previous value", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Pagination, { + props: { totalItems: 102, pageSizes: [10, 15, 20] }, + }); + + const pageSizeSelect = screen.getByRole("combobox", { + name: "Items per page:", + }); + await user.selectOptions(pageSizeSelect, "15"); + + expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 15 }); + + const pageSelect = screen.getAllByRole("combobox")[1]; + await user.selectOptions(pageSelect, "2"); + + expect(consoleLog).toHaveBeenCalledWith("change", { page: 2 }); + }); +}); diff --git a/tests/PaginationNav.test.svelte b/tests/PaginationNav.test.svelte deleted file mode 100644 index a67c8552..00000000 --- a/tests/PaginationNav.test.svelte +++ /dev/null @@ -1,7 +0,0 @@ - - - - - diff --git a/tests/PaginationNav/PaginationNav.test.svelte b/tests/PaginationNav/PaginationNav.test.svelte new file mode 100644 index 00000000..42b4e28d --- /dev/null +++ b/tests/PaginationNav/PaginationNav.test.svelte @@ -0,0 +1,36 @@ + + + { + console.log("change", e.detail); + }} + on:click:button--previous={(e) => { + console.log("previous", e.detail); + }} + on:click:button--next={(e) => { + console.log("next", e.detail); + }} +/> diff --git a/tests/PaginationNav/PaginationNav.test.ts b/tests/PaginationNav/PaginationNav.test.ts new file mode 100644 index 00000000..7c4a5bd6 --- /dev/null +++ b/tests/PaginationNav/PaginationNav.test.ts @@ -0,0 +1,159 @@ +import { render, screen, within } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import PaginationNav from "./PaginationNav.test.svelte"; + +describe("PaginationNav", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it("should render with default props", () => { + render(PaginationNav); + + const nav = screen.getByRole("navigation"); + expect(nav).toHaveClass("bx--pagination-nav"); + expect(nav).toHaveAttribute("aria-label", "pagination"); + + const list = screen.getByRole("list"); + expect(list).toHaveClass("bx--pagination-nav__list"); + + expect(screen.getByText("Previous page")).toBeInTheDocument(); + expect(screen.getByText("Next page")).toBeInTheDocument(); + + const pageItems = screen.getAllByRole("listitem"); + expect(pageItems.length).toBeGreaterThan(0); + }); + + it("should render correct number of pages", () => { + render(PaginationNav, { + props: { total: 5 }, + }); + + const pageItems = screen.getAllByRole("listitem"); + expect(pageItems.length).toBe(7); // 5 pages + 2 navigation buttons + }); + + it("should show correct active page", () => { + render(PaginationNav, { + props: { page: 3 }, + }); + + const listItems = screen.getAllByRole("listitem"); + expect(within(listItems[3]).getByRole("button")).toHaveAttribute( + "aria-current", + "page", + ); + }); + + it("should handle custom shown pages", () => { + render(PaginationNav, { + props: { total: 20, shown: 5 }, + }); + + const pageItems = screen.getAllByRole("listitem"); + // Should show 5 pages + 2 navigation buttons + expect(pageItems.length).toBe(7); + }); + + it("should disable previous button on first page", () => { + render(PaginationNav, { + props: { page: 1 }, + }); + + const prevButton = screen.getByRole("button", { name: "Previous page" }); + expect(prevButton).toBeDisabled(); + }); + + it("should disable next button on last page", () => { + render(PaginationNav, { + props: { page: 10, total: 10 }, + }); + + const nextButton = screen.getByRole("button", { name: "Next page" }); + expect(nextButton).toBeDisabled(); + }); + + it("should enable navigation buttons when looping", () => { + render(PaginationNav, { + props: { loop: true, page: 1, total: 10 }, + }); + + const prevButton = screen.getByRole("button", { name: "Previous page" }); + const nextButton = screen.getByRole("button", { name: "Next page" }); + + expect(prevButton).not.toBeDisabled(); + expect(nextButton).not.toBeDisabled(); + }); + + it("should support custom button text", () => { + render(PaginationNav, { + props: { + backwardText: "Previous", + forwardText: "Next", + }, + }); + + expect( + screen.getByRole("button", { name: "Previous" }), + ).toBeInTheDocument(); + expect(screen.getByRole("button", { name: "Next" })).toBeInTheDocument(); + }); + + test.each([ + ["top", ["bx--btn--icon-only--top", "bx--btn--icon-only--top"]], + ["right", ["bx--btn--icon-only--right", "bx--btn--icon-only--right"]], + ["bottom", ["bx--btn--icon-only--bottom", "bx--btn--icon-only--bottom"]], + ["left", ["bx--btn--icon-only--left", "bx--btn--icon-only--left"]], + ["outside", ["bx--btn--icon-only--left", "bx--btn--icon-only--right"]], + ["inside", ["bx--btn--icon-only--right", "bx--btn--icon-only--left"]], + ] as const)("should support %s position", (position, [prev, next]) => { + render(PaginationNav, { + props: { tooltipPosition: position }, + }); + + const prevButton = screen.getByRole("button", { name: "Previous page" }); + const nextButton = screen.getByRole("button", { name: "Next page" }); + + expect(prevButton).toHaveClass("bx--tooltip--align-center"); + expect(prevButton).toHaveClass(prev); + + expect(nextButton).toHaveClass("bx--tooltip--align-center"); + expect(nextButton).toHaveClass(next); + }); + + it("should emit change event when clicking a page", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(PaginationNav); + + const pageButton = screen.getByRole("button", { name: /2/ }); + await user.click(pageButton); + expect(consoleLog).toHaveBeenCalledWith("change", { page: 2 }); + + const nextButton = screen.getByRole("button", { name: "Next page" }); + await user.click(nextButton); + expect(consoleLog).toHaveBeenCalledWith("change", { page: 3 }); + + const prevButton = screen.getByRole("button", { name: "Previous page" }); + await user.click(prevButton); + expect(consoleLog).toHaveBeenCalledWith("change", { page: 2 }); + }); + + it("should handle overflow selection", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(PaginationNav, { + props: { total: 100, shown: 5 }, + }); + + const overflowIndicator = screen.getByLabelText("Select Page number"); + expect(overflowIndicator).toBeInTheDocument(); + + await user.selectOptions(overflowIndicator, "4"); + + expect(consoleLog).toHaveBeenCalledWith("change", { page: 4 }); + expect(consoleLog).toHaveBeenCalledTimes(1); + + await user.selectOptions(overflowIndicator, "50"); + expect(consoleLog).toHaveBeenCalledWith("change", { page: 50 }); + expect(consoleLog).toHaveBeenCalledTimes(2); + }); +}); diff --git a/tests/PassiveModal.test.svelte b/tests/PassiveModal.test.svelte deleted file mode 100644 index 2b122c29..00000000 --- a/tests/PassiveModal.test.svelte +++ /dev/null @@ -1,14 +0,0 @@ - - - - - -

- IBM Cloudant is a distributed, secure database with global availability and - zero vendor lock-in used to build web and mobile apps at scale. -

-
diff --git a/tests/PasswordInput.test.svelte b/tests/PasswordInput.test.svelte deleted file mode 100644 index 6d9f5ce9..00000000 --- a/tests/PasswordInput.test.svelte +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/tests/PasswordInput/PasswordInput.test.svelte b/tests/PasswordInput/PasswordInput.test.svelte new file mode 100644 index 00000000..2f451be2 --- /dev/null +++ b/tests/PasswordInput/PasswordInput.test.svelte @@ -0,0 +1,66 @@ + + + { + console.log("focus"); + }} + on:blur={() => { + console.log("blur"); + }} + on:paste +/> + +
{value}
diff --git a/tests/PasswordInput/PasswordInput.test.ts b/tests/PasswordInput/PasswordInput.test.ts new file mode 100644 index 00000000..33605239 --- /dev/null +++ b/tests/PasswordInput/PasswordInput.test.ts @@ -0,0 +1,196 @@ +import { render, screen } from "@testing-library/svelte"; +import PasswordInput from "./PasswordInput.test.svelte"; +import { user } from "../setup-tests"; + +describe("PasswordInput", () => { + describe("Default", () => { + it("should render with a label", () => { + render(PasswordInput, { + labelText: "Password", + placeholder: "Enter password...", + }); + + expect(screen.getByLabelText("Password")).toBeInTheDocument(); + expect( + screen.getByPlaceholderText("Enter password..."), + ).toBeInTheDocument(); + }); + + it("should toggle password visibility", async () => { + render(PasswordInput, { labelText: "Password", value: "secret123" }); + + const input = screen.getByLabelText("Password"); + expect(input).toHaveAttribute("type", "password"); + + await user.click(screen.getByText("Show password")); + expect(input).toHaveAttribute("type", "text"); + + await user.click(screen.getByText("Hide password")); + expect(input).toHaveAttribute("type", "password"); + }); + + it("should handle custom visibility labels", async () => { + render(PasswordInput, { + labelText: "Password", + hidePasswordLabel: "Custom hide", + showPasswordLabel: "Custom show", + }); + + expect(screen.getByLabelText("Password")).toBeInTheDocument(); + await user.click(screen.getByText("Custom show")); + expect(screen.getByText("Custom hide")).toBeInTheDocument(); + await user.click(screen.getByText("Custom hide")); + expect(screen.getByText("Custom show")).toBeInTheDocument(); + }); + }); + + describe("Tooltip", () => { + it("should handle custom tooltip alignment", () => { + render(PasswordInput, { + labelText: "Password", + tooltipAlignment: "start", + tooltipPosition: "left", + }); + + const button = screen.getByRole("button"); + expect(button).toHaveClass("bx--tooltip--align-start"); + expect(button).toHaveClass("bx--tooltip--left"); + }); + }); + + describe("States", () => { + it("should handle invalid state", () => { + render(PasswordInput, { + labelText: "Password", + invalid: true, + invalidText: "Password must be at least 8 characters", + }); + + expect( + screen.getByText("Password must be at least 8 characters"), + ).toBeInTheDocument(); + const wrapper = screen + .getByLabelText("Password") + .closest(".bx--text-input__field-wrapper"); + expect(wrapper).toHaveAttribute("data-invalid"); + }); + + it("should handle warning state", () => { + render(PasswordInput, { + labelText: "Password", + warn: true, + warnText: "Password will expire soon", + }); + + expect(screen.getByText("Password will expire soon")).toBeInTheDocument(); + const input = screen.getByLabelText("Password"); + expect(input).toHaveClass("bx--text-input--warning"); + }); + + it("should handle disabled state", () => { + render(PasswordInput, { + labelText: "Password", + disabled: true, + value: "disabled-password", + }); + + const input = screen.getByLabelText("Password"); + expect(input).toBeDisabled(); + expect(input).toHaveValue("disabled-password"); + + const toggleButton = screen.getByRole("button"); + expect(toggleButton).toBeDisabled(); + expect(toggleButton).toHaveClass("bx--btn--disabled"); + }); + + it("should handle helper text", () => { + render(PasswordInput, { + labelText: "Password", + helperText: "Your password should be hard to guess", + }); + + expect( + screen.getByText("Your password should be hard to guess"), + ).toBeInTheDocument(); + }); + }); + + describe("Variants", () => { + it("should render light variant", () => { + render(PasswordInput, { labelText: "Password", light: true }); + + const wrapper = screen + .getByLabelText("Password") + .closest(".bx--text-input-wrapper"); + expect(wrapper).toHaveClass("bx--text-input-wrapper--light"); + }); + + it("should render inline variant", () => { + render(PasswordInput, { + labelText: "Password", + inline: true, + }); + + const wrapper = screen + .getByLabelText("Password") + .closest(".bx--text-input-wrapper"); + expect(wrapper).toHaveClass("bx--text-input-wrapper--inline"); + }); + + it("should render in small size", () => { + render(PasswordInput, { labelText: "Password", size: "sm" }); + + const input = screen.getByLabelText("Password"); + expect(input).toHaveClass("bx--text-input--sm"); + }); + + it("should render in extra-large size", () => { + render(PasswordInput, { + labelText: "Password", + size: "xl", + }); + + const input = screen.getByLabelText("Password"); + expect(input).toHaveClass("bx--text-input--xl"); + }); + }); + + describe("Label handling", () => { + it("should handle hidden label", () => { + render(PasswordInput, { labelText: "Password", hideLabel: true }); + + const label = screen.getByText("Password"); + expect(label).toHaveClass("bx--visually-hidden"); + }); + + it("should handle custom id", () => { + render(PasswordInput, { labelText: "Password", id: "custom-id" }); + + const input = screen.getByLabelText("Password"); + expect(input).toHaveAttribute("id", "custom-id"); + }); + }); + + describe("Events", () => { + it("should handle input events", async () => { + render(PasswordInput, { labelText: "Password" }); + + const input = screen.getByLabelText("Password"); + await user.type(input, "test123"); + expect(screen.getByTestId("value")).toHaveTextContent("test123"); + }); + + it("should handle focus and blur events", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(PasswordInput, { labelText: "Password" }); + + expect(consoleLog).not.toHaveBeenCalled(); + const input = screen.getByLabelText("Password"); + await user.click(input); + expect(consoleLog).toHaveBeenCalledWith("focus"); + + await user.tab(); + expect(consoleLog).toHaveBeenCalledWith("blur"); + }); + }); +}); diff --git a/tests/PersistedHamburgerMenu.test.svelte b/tests/PersistedHamburgerMenu.test.svelte index 986f4b1d..5992d0f8 100644 --- a/tests/PersistedHamburgerMenu.test.svelte +++ b/tests/PersistedHamburgerMenu.test.svelte @@ -14,13 +14,13 @@ Grid, Row, Column, - } from "../types"; + } from "carbon-components-svelte"; let isSideNavOpen = false;
- + diff --git a/tests/Popover/Popover.test.svelte b/tests/Popover/Popover.test.svelte new file mode 100644 index 00000000..b21cc440 --- /dev/null +++ b/tests/Popover/Popover.test.svelte @@ -0,0 +1,41 @@ + + +
+ Parent + { + console.log("click:outside", e.detail); + }} + > +
Content
+
+
diff --git a/tests/Popover/Popover.test.ts b/tests/Popover/Popover.test.ts new file mode 100644 index 00000000..686cce18 --- /dev/null +++ b/tests/Popover/Popover.test.ts @@ -0,0 +1,154 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import Popover from "./Popover.test.svelte"; + +describe("Popover", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it("should render when open", () => { + render(Popover, { props: { open: true } }); + + expect(screen.getByTestId("content")).toBeVisible(); + expect(screen.getByTestId("parent").firstElementChild).toHaveClass( + "bx--popover--open", + ); + }); + + it("should not render when closed", () => { + render(Popover, { props: { open: false } }); + + const popover = screen.getByTestId("parent").firstElementChild; + expect(popover).not.toHaveClass("bx--popover--open"); + }); + + it("should handle outside clicks", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Popover, { + props: { + open: true, + closeOnOutsideClick: true, + }, + }); + + await user.click(document.body); + expect(consoleLog).toHaveBeenCalledWith( + "click:outside", + expect.any(Object), + ); + }); + + it("should not close on outside click when closeOnOutsideClick is false", async () => { + render(Popover, { + props: { + open: true, + closeOnOutsideClick: false, + }, + }); + + const popover = screen.getByTestId("parent").firstElementChild; + + await user.click(document.body); + expect(popover).toHaveClass("bx--popover--open"); + }); + + test.each([ + "top", + "top-left", + "top-right", + "bottom", + "bottom-left", + "bottom-right", + "left", + "left-bottom", + "left-top", + "right", + "right-bottom", + "right-top", + ] as const)("should handle %s alignment", (align) => { + render(Popover, { + props: { open: true, align }, + }); + + expect(screen.getByTestId("parent").firstElementChild).toHaveClass( + `bx--popover--${align}`, + ); + }); + + it("should render with caret", () => { + render(Popover, { + props: { open: true, caret: true }, + }); + + expect(screen.getByTestId("parent").firstElementChild).toHaveClass( + "bx--popover--caret", + ); + }); + + it("should handle light variant", () => { + render(Popover, { + props: { open: true, light: true }, + }); + + expect(screen.getByTestId("parent").firstElementChild).toHaveClass( + "bx--popover--light", + ); + }); + + it("should handle high contrast variant", () => { + render(Popover, { + props: { open: true, highContrast: true }, + }); + + expect(screen.getByTestId("parent").firstElementChild).toHaveClass( + "bx--popover--high-contrast", + ); + }); + + it("should handle relative positioning", () => { + render(Popover, { + props: { open: true, relative: true }, + }); + + const popover = screen.getByTestId("parent").firstElementChild; + expect(popover).toHaveClass("bx--popover--relative"); + expect(popover).toHaveStyle({ position: "relative" }); + }); + + it("should not dispatch click:outside event when clicking inside", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Popover, { + props: { open: true, closeOnOutsideClick: true }, + }); + + await user.click(screen.getByTestId("content")); + expect(consoleLog).not.toHaveBeenCalled(); + }); + + it("should not handle outside clicks when closed", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Popover, { + props: { open: false, closeOnOutsideClick: true }, + }); + + await user.click(document.body); + expect(consoleLog).not.toHaveBeenCalled(); + }); + + it("should handle multiple variants simultaneously", () => { + render(Popover, { + props: { + open: true, + caret: true, + light: true, + align: "bottom-right", + }, + }); + + const popover = screen.getByTestId("parent").firstElementChild; + expect(popover).toHaveClass("bx--popover--caret"); + expect(popover).toHaveClass("bx--popover--light"); + expect(popover).toHaveClass("bx--popover--bottom-right"); + }); +}); diff --git a/tests/ProgressBar/ProgressBar.test.svelte b/tests/ProgressBar/ProgressBar.test.svelte new file mode 100644 index 00000000..cb5f46ed --- /dev/null +++ b/tests/ProgressBar/ProgressBar.test.svelte @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tests/ProgressBar/ProgressBar.test.ts b/tests/ProgressBar/ProgressBar.test.ts new file mode 100644 index 00000000..5be9ae76 --- /dev/null +++ b/tests/ProgressBar/ProgressBar.test.ts @@ -0,0 +1,85 @@ +import { render, screen, within } from "@testing-library/svelte"; +import ProgressBar from "./ProgressBar.test.svelte"; + +describe("ProgressBar", () => { + it("should render indeterminate if status is active", () => { + render(ProgressBar); + + const progressBar = screen.getByTestId("indeterminate-progress"); + expect(progressBar.closest("div")).toHaveClass( + "bx--progress-bar--indeterminate", + ); + expect(progressBar).not.toHaveAttribute("aria-valuenow"); + expect(progressBar).not.toHaveAttribute("aria-valuemin"); + expect(progressBar).not.toHaveAttribute("aria-valuemax"); + }); + + it("should render with helper text", () => { + render(ProgressBar); + + const helperText = screen.getByText("Loading..."); + expect(helperText).toHaveClass("bx--progress-bar__helper-text"); + }); + + it("should render with specified value and max", () => { + render(ProgressBar); + + const progressBar = within(screen.getByTestId("progress-40%")).getByRole( + "progressbar", + ); + expect(progressBar).toHaveAttribute("aria-valuenow", "40"); + expect(progressBar).toHaveAttribute("aria-valuemin", "0"); + expect(progressBar).toHaveAttribute("aria-valuemax", "100"); + }); + + it("should render different sizes", () => { + render(ProgressBar); + + const smallBar = screen.getByTestId("small-progress"); + const mediumBar = screen.getByTestId("medium-progress"); + + expect(smallBar).toHaveClass("bx--progress-bar--small"); + expect(mediumBar).toHaveClass("bx--progress-bar--big"); + }); + + it("should render different kinds", () => { + render(ProgressBar); + + const inlineBar = screen.getByTestId("inline-progress"); + const indentedBar = screen.getByTestId("indented-progress"); + + expect(inlineBar).toHaveClass("bx--progress-bar--inline"); + expect(indentedBar).toHaveClass("bx--progress-bar--indented"); + }); + + it("should handle different statuses", () => { + render(ProgressBar); + + const errorBar = screen.getByTestId("error-progress"); + const finishedBar = screen.getByTestId("finished-progress"); + + expect(errorBar).toHaveClass("bx--progress-bar--error"); + expect(finishedBar).toHaveClass("bx--progress-bar--finished"); + }); + + it("should handle hidden label", () => { + render(ProgressBar); + + const label = screen.getByText("Hidden label"); + expect(label).toHaveClass("bx--visually-hidden"); + }); + + it("should cap values appropriately", () => { + render(ProgressBar); + + const overMax = within(screen.getByTestId("over-max")).getByRole( + "progressbar", + ); + expect(overMax).toHaveAttribute("aria-valuenow", "100"); + + const underZero = within(screen.getByTestId("under-zero")).getByRole( + "progressbar", + ); + expect(underZero).toHaveAttribute("aria-valuenow", "0"); + }); +}); diff --git a/tests/ProgressIndicator.test.svelte b/tests/ProgressIndicator.test.svelte deleted file mode 100644 index ccda25af..00000000 --- a/tests/ProgressIndicator.test.svelte +++ /dev/null @@ -1,83 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/tests/ProgressIndicator/ProgressIndicator.test.svelte b/tests/ProgressIndicator/ProgressIndicator.test.svelte new file mode 100644 index 00000000..4f8a4d06 --- /dev/null +++ b/tests/ProgressIndicator/ProgressIndicator.test.svelte @@ -0,0 +1,35 @@ + + + { + console.log("change", e.detail); + }} +> + {#each steps as step} + + {/each} + diff --git a/tests/ProgressIndicator/ProgressIndicator.test.ts b/tests/ProgressIndicator/ProgressIndicator.test.ts new file mode 100644 index 00000000..649d37cb --- /dev/null +++ b/tests/ProgressIndicator/ProgressIndicator.test.ts @@ -0,0 +1,247 @@ +import { render, screen } from "@testing-library/svelte"; +import ProgressIndicator from "./ProgressIndicator.test.svelte"; +import { user } from "../setup-tests"; + +describe("ProgressIndicator", () => { + describe("Default (horizontal)", () => { + it("should render steps with correct states", () => { + render(ProgressIndicator, { + currentIndex: 2, + steps: [ + { label: "Step 1", description: "First step", complete: true }, + { label: "Step 2", description: "Second step", complete: true }, + { label: "Step 3", description: "Third step", complete: true }, + { label: "Step 4", description: "Fourth step", complete: false }, + ], + }); + + const listItems = screen.getAllByRole("listitem"); + + // Check if all steps are rendered + expect(listItems).toHaveLength(4); + + // Check completed steps + const completedSteps = listItems.filter((step) => + step.classList.contains("bx--progress-step--complete"), + ); + expect(completedSteps).toHaveLength(3); + + // Check current step + expect(listItems[2]).toHaveTextContent("Step 3"); + + // Check incomplete step + const incompleteStep = screen.getByText("Step 4"); + expect(incompleteStep).toBeInTheDocument(); + expect(incompleteStep.closest("li")).not.toHaveClass( + "bx--progress-step--complete", + ); + }); + + it("should update currentIndex when clicking on completed steps", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(ProgressIndicator, { + currentIndex: 2, + steps: [ + { label: "Step 1", description: "First step", complete: true }, + { label: "Step 2", description: "Second step", complete: true }, + { label: "Step 3", description: "Third step", complete: true }, + { label: "Step 4", description: "Fourth step", complete: false }, + ], + }); + + expect(consoleLog).not.toHaveBeenCalled(); + + // Click on a completed step + await user.click(screen.getByText("Step 1")); + expect(consoleLog).toHaveBeenCalledWith("change", 0); + }); + + it("should not update currentIndex when preventChangeOnClick is true", async () => { + const { component } = render(ProgressIndicator, { + currentIndex: 2, + preventChangeOnClick: true, + steps: [ + { label: "Step 1", description: "First step", complete: true }, + { label: "Step 2", description: "Second step", complete: true }, + { label: "Step 3", description: "Third step", complete: true }, + { label: "Step 4", description: "Fourth step", complete: false }, + ], + }); + + const changeHandler = vi.fn(); + component.$on("change", changeHandler); + + // Click on a completed step + await user.click(screen.getByText("Step 1")); + expect(changeHandler).not.toHaveBeenCalled(); + }); + }); + + describe("Invalid and disabled states", () => { + it("should render invalid step", () => { + render(ProgressIndicator, { + steps: [ + { label: "Step 1", description: "First step", complete: true }, + { + label: "Step 2", + description: "Second step", + complete: false, + invalid: true, + disabled: false, + }, + { label: "Step 3", description: "Third step", complete: false }, + ], + }); + + const invalidStep = screen.getByText("Step 2").closest("li"); + expect(invalidStep).toHaveClass("bx--progress-step--incomplete"); + }); + + it("should render disabled steps", () => { + render(ProgressIndicator, { + steps: [ + { label: "Step 1", description: "First step", complete: true }, + { + label: "Step 2", + description: "Second step", + complete: false, + invalid: false, + disabled: true, + }, + { + label: "Step 3", + description: "Third step", + complete: false, + invalid: false, + disabled: true, + }, + ], + }); + + const disabledSteps = screen.getAllByRole("listitem").slice(1); + disabledSteps.forEach((step) => { + expect(step).toHaveClass("bx--progress-step--disabled"); + }); + }); + }); + + describe("Variants", () => { + it("should render vertical variant", () => { + render(ProgressIndicator, { + vertical: true, + steps: [ + { label: "Step 1", description: "First step", complete: false }, + { label: "Step 2", description: "Second step", complete: false }, + { label: "Step 3", description: "Third step", complete: false }, + ], + }); + + const progressIndicator = screen.getByRole("list"); + expect(progressIndicator).toHaveClass("bx--progress--vertical"); + }); + + it("should render with equal spacing", () => { + render(ProgressIndicator, { + spaceEqually: true, + steps: [ + { label: "Step 1", description: "First step", complete: false }, + { label: "Step 2", description: "Second step", complete: false }, + { label: "Step 3", description: "Third step", complete: false }, + ], + }); + + const progressIndicator = screen.getByRole("list"); + expect(progressIndicator).toHaveClass("bx--progress--space-equal"); + }); + + it("should not apply equal spacing in vertical variant", () => { + render(ProgressIndicator, { + vertical: true, + spaceEqually: true, + steps: [ + { label: "Step 1", description: "First step", complete: false }, + { label: "Step 2", description: "Second step", complete: false }, + { label: "Step 3", description: "Third step", complete: false }, + ], + }); + + const progressIndicator = screen.getByRole("list"); + expect(progressIndicator).not.toHaveClass("bx--progress--space-equal"); + }); + }); + + describe("Accessibility", () => { + it("should have correct button attributes for different states", () => { + render(ProgressIndicator, { + currentIndex: 1, + steps: [ + { label: "Step 1", description: "First step", complete: true }, + { label: "Step 2", description: "Second step", complete: false }, + { label: "Step 3", description: "Third step", complete: false }, + ], + }); + + const buttons = screen.getAllByRole("button"); + + // Complete step button should be clickable + expect(buttons[0]).toHaveAttribute("tabindex", "0"); + expect(buttons[0]).toHaveAttribute("aria-disabled", "false"); + expect(buttons[0]).not.toHaveClass( + "bx--progress-step-button--unclickable", + ); + + // Current step button should be unclickable + expect(buttons[1]).toHaveAttribute("tabindex", "-1"); + expect(buttons[1]).toHaveAttribute("aria-disabled", "false"); + expect(buttons[1]).toHaveClass("bx--progress-step-button--unclickable"); + + // Incomplete step button should be unclickable + expect(buttons[2]).toHaveAttribute("tabindex", "0"); + expect(buttons[2]).toHaveAttribute("aria-disabled", "false"); + expect(buttons[2]).not.toHaveClass( + "bx--progress-step-button--unclickable", + ); + }); + + it("should have correct button attributes for disabled state", () => { + render(ProgressIndicator, { + steps: [ + { label: "Step 1", description: "First step", complete: true }, + { + label: "Step 2", + description: "Second step", + complete: false, + disabled: true, + }, + ], + }); + + const disabledButton = screen.getAllByRole("button")[1]; + expect(disabledButton).toHaveAttribute("disabled"); + expect(disabledButton).toHaveAttribute("aria-disabled", "true"); + expect(disabledButton).toHaveAttribute("tabindex", "-1"); + }); + + it("should support keyboard navigation for complete steps", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(ProgressIndicator, { + currentIndex: 1, + steps: [ + { label: "Step 1", description: "First step", complete: true }, + { label: "Step 2", description: "Second step", complete: false }, + ], + }); + + expect(consoleLog).not.toHaveBeenCalled(); + const completeStepButton = screen.getAllByRole("button")[0]; + await user.tab(); + expect(completeStepButton).toHaveFocus(); + + await user.keyboard("{Enter}"); + expect(consoleLog).toHaveBeenCalledWith("change", 0); + + await user.keyboard(" "); + expect(consoleLog).toHaveBeenCalledWith("change", 0); + }); + }); +}); diff --git a/tests/RadioButton.test.svelte b/tests/RadioButton.test.svelte deleted file mode 100644 index 6f5e0fb0..00000000 --- a/tests/RadioButton.test.svelte +++ /dev/null @@ -1,48 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/tests/RadioButton/RadioButton.test.svelte b/tests/RadioButton/RadioButton.test.svelte new file mode 100644 index 00000000..59282887 --- /dev/null +++ b/tests/RadioButton/RadioButton.test.svelte @@ -0,0 +1,38 @@ + + + { + console.log("focus"); + }} + on:blur={() => { + console.log("blur"); + }} + on:change={() => { + console.log("change"); + }} +/> diff --git a/tests/RadioButton/RadioButton.test.ts b/tests/RadioButton/RadioButton.test.ts new file mode 100644 index 00000000..3b321c57 --- /dev/null +++ b/tests/RadioButton/RadioButton.test.ts @@ -0,0 +1,127 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import RadioButton from "./RadioButton.test.svelte"; +import RadioButtonCustom from "./RadioButtonCustom.test.svelte"; + +describe("RadioButton", () => { + it("should render with default props", () => { + render(RadioButton); + + const input = screen.getByRole("radio"); + expect(input).toBeInTheDocument(); + expect(input).toHaveAttribute("name", "test-group"); + expect(input).toHaveAttribute("value", ""); + expect(input).not.toBeChecked(); + expect(screen.getByText("Option 1")).toBeInTheDocument(); + }); + + it("should handle checked state", () => { + render(RadioButton, { props: { checked: true } }); + + expect(screen.getByRole("radio")).toBeChecked(); + }); + + it("should handle disabled state", () => { + render(RadioButton, { props: { disabled: true } }); + + expect(screen.getByRole("radio")).toBeDisabled(); + }); + + it("should handle required state", () => { + render(RadioButton, { props: { required: true } }); + + expect(screen.getByRole("radio")).toHaveAttribute("required"); + }); + + it("should handle label position", () => { + render(RadioButton, { props: { labelPosition: "left" } }); + + expect( + screen.getByText("Option 1").closest(".bx--radio-button-wrapper"), + ).toHaveClass("bx--radio-button-wrapper--label-left"); + }); + + it("should handle hidden label", () => { + render(RadioButton, { props: { hideLabel: true } }); + + expect(screen.getByText("Option 1")).toHaveClass("bx--visually-hidden"); + }); + + it("should handle custom id", () => { + render(RadioButton, { props: { id: "custom-id" } }); + + expect(screen.getByRole("radio")).toHaveAttribute("id", "custom-id"); + + const radioButton = screen + .getByText("Option 1") + .closest(".bx--radio-button-wrapper"); + assert(radioButton); + expect(radioButton.querySelector("label")).toHaveAttribute( + "for", + "custom-id", + ); + }); + + it("should handle custom name", () => { + render(RadioButton, { props: { name: "custom-name" } }); + + expect(screen.getByRole("radio")).toHaveAttribute("name", "custom-name"); + }); + + it("should handle custom value", () => { + render(RadioButton, { props: { value: "custom-value" } }); + + expect(screen.getByRole("radio")).toHaveAttribute("value", "custom-value"); + }); + + it("should handle custom slots", () => { + render(RadioButtonCustom); + + expect(screen.getByText("Custom Label Text")).toBeInTheDocument(); + }); + + it("should handle change event", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(RadioButton); + + const input = screen.getByRole("radio"); + await user.click(input); + + expect(input).toBeChecked(); + expect(consoleLog).toHaveBeenCalledWith("change"); + }); + + it("should handle focus and blur events", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(RadioButton); + + const input = screen.getByRole("radio"); + await user.tab(); + expect(input).toHaveFocus(); + expect(consoleLog).toHaveBeenCalledWith("focus"); + + await user.tab(); + expect(input).not.toHaveFocus(); + expect(consoleLog).toHaveBeenCalledWith("blur"); + }); + + it("should handle disabled state with events", async () => { + render(RadioButton, { props: { disabled: true } }); + + const input = screen.getByRole("radio"); + await user.click(input); + expect(input).not.toBeChecked(); + }); + + it("should handle required state with form validation", () => { + render(RadioButton, { props: { required: true } }); + + expect(screen.getByRole("radio")).toHaveAttribute("required"); + }); + + it("should handle label text slot", () => { + render(RadioButtonCustom); + + expect(screen.getByText("Custom Label Text").tagName).toBe("SPAN"); + }); +}); diff --git a/tests/RadioButton/RadioButtonCustom.test.svelte b/tests/RadioButton/RadioButtonCustom.test.svelte new file mode 100644 index 00000000..5913e719 --- /dev/null +++ b/tests/RadioButton/RadioButtonCustom.test.svelte @@ -0,0 +1,7 @@ + + + + Custom Label Text + diff --git a/tests/RadioSelectableDataTable.test.svelte b/tests/RadioSelectableDataTable.test.svelte deleted file mode 100644 index 07f60d72..00000000 --- a/tests/RadioSelectableDataTable.test.svelte +++ /dev/null @@ -1,24 +0,0 @@ - - - diff --git a/tests/RadioTile.test.svelte b/tests/RadioTile.test.svelte deleted file mode 100644 index b04f3682..00000000 --- a/tests/RadioTile.test.svelte +++ /dev/null @@ -1,15 +0,0 @@ - - - - Lite plan - Standard plan - Plus plan - - - - Lite plan - Standard plan - Plus plan - diff --git a/tests/RadioTile/RadioTile.group.test.svelte b/tests/RadioTile/RadioTile.group.test.svelte new file mode 100644 index 00000000..defafb8a --- /dev/null +++ b/tests/RadioTile/RadioTile.group.test.svelte @@ -0,0 +1,25 @@ + + + + {#each values as value} + {value} + {/each} + + +
+ Selected: {selected} +
+ + diff --git a/tests/RadioTile/RadioTile.single.test.svelte b/tests/RadioTile/RadioTile.single.test.svelte new file mode 100644 index 00000000..6a986a02 --- /dev/null +++ b/tests/RadioTile/RadioTile.single.test.svelte @@ -0,0 +1,7 @@ + + + +
Custom content
+
diff --git a/tests/RadioTile/RadioTile.test.svelte b/tests/RadioTile/RadioTile.test.svelte new file mode 100644 index 00000000..84d734e4 --- /dev/null +++ b/tests/RadioTile/RadioTile.test.svelte @@ -0,0 +1,43 @@ + + + + { + console.log("change"); + }} + on:keydown + on:click + on:mouseover + on:mouseenter + on:mouseleave + > + Test content + + diff --git a/tests/RadioTile/RadioTile.test.ts b/tests/RadioTile/RadioTile.test.ts new file mode 100644 index 00000000..9697654a --- /dev/null +++ b/tests/RadioTile/RadioTile.test.ts @@ -0,0 +1,196 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import RadioTile from "./RadioTile.test.svelte"; +import RadioTileCustom from "./RadioTileCustom.test.svelte"; +import RadioTileSingle from "./RadioTile.single.test.svelte"; +import RadioTileGroup from "./RadioTile.group.test.svelte"; + +describe("RadioTile", () => { + it("should render with default props", () => { + render(RadioTile); + + const input = screen.getByRole("radio"); + expect(input).toBeInTheDocument(); + expect(input).toHaveAttribute("name", "test-group"); + expect(input).toHaveAttribute("value", "test"); + expect(input).not.toBeChecked(); + expect(screen.getByText("Test content")).toBeInTheDocument(); + expect(screen.getByTitle("Tile checkmark")).toBeInTheDocument(); + }); + + it("should handle checked state", () => { + render(RadioTile, { + props: { checked: true }, + }); + + const input = screen.getByRole("radio"); + expect(input).toBeChecked(); + expect(screen.getByText("Test content").closest(".bx--tile")).toHaveClass( + "bx--tile--is-selected", + ); + }); + + it("should handle light variant", () => { + render(RadioTile, { + props: { light: true }, + }); + + expect(screen.getByText("Test content").closest(".bx--tile")).toHaveClass( + "bx--tile--light", + ); + }); + + it("should handle disabled state", () => { + render(RadioTile, { + props: { disabled: true }, + }); + + const input = screen.getByRole("radio"); + expect(input).toBeDisabled(); + expect(screen.getByText("Test content").closest(".bx--tile")).toHaveClass( + "bx--tile--disabled", + ); + }); + + it("should handle required state", () => { + render(RadioTile, { + props: { required: true }, + }); + + expect(screen.getByRole("radio")).toHaveAttribute("required"); + }); + + it("should handle custom value", () => { + render(RadioTile, { + props: { value: "custom-value" }, + }); + + expect(screen.getByRole("radio")).toHaveAttribute("value", "custom-value"); + }); + + it("should handle custom tabindex", () => { + render(RadioTile, { + props: { tabindex: "1" }, + }); + + expect(screen.getByRole("radio")).toHaveAttribute("tabindex", "1"); + }); + + it("should handle custom icon description", () => { + render(RadioTile, { + props: { iconDescription: "Custom checkmark" }, + }); + + expect(screen.getByTitle("Custom checkmark")).toBeInTheDocument(); + }); + + it("should handle custom id", () => { + render(RadioTile, { props: { id: "custom-id" } }); + + expect(screen.getByRole("radio")).toHaveAttribute("id", "custom-id"); + + const radioTileLabel = screen.getByText("Test content").closest("label"); + assert(radioTileLabel); + expect(radioTileLabel).toHaveAttribute("for", "custom-id"); + }); + + it("should handle custom name", () => { + render(RadioTileSingle); + + expect(screen.getByRole("radio")).toHaveAttribute("name", "custom-name"); + }); + + it("should handle custom slots", () => { + render(RadioTileCustom); + + expect(screen.getByText("Custom content")).toBeInTheDocument(); + }); + + it("should handle change event", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(RadioTile); + + const input = screen.getByRole("radio"); + await user.click(input); + + expect(input).toBeChecked(); + expect(consoleLog).toHaveBeenCalledWith("change"); + }); + + it("should handle keyboard events", async () => { + render(RadioTileGroup); + + const inputs = screen.getAllByRole("radio"); + + expect(inputs[1]).not.toHaveFocus(); + expect(inputs[1]).toBeChecked(); + + await user.tab(); + expect(inputs[1]).toHaveFocus(); + + await user.keyboard("{ArrowDown}"); + expect(inputs[2]).toHaveFocus(); + expect(inputs[2]).toBeChecked(); + + await user.keyboard("{ArrowDown}"); + expect(inputs[0]).toHaveFocus(); + expect(inputs[0]).toBeChecked(); + }); + + it("supports programmatic selection", async () => { + render(RadioTileGroup); + + const inputs = screen.getAllByRole("radio"); + expect(inputs[1]).not.toHaveFocus(); + expect(inputs[1]).toBeChecked(); + expect(screen.getByText(/Selected: Standard plan/)).toBeInTheDocument(); + + await user.click(inputs[2]); + expect(inputs[2]).toHaveFocus(); + expect(inputs[2]).toBeChecked(); + expect(screen.getByText(/Selected: Plus plan/)).toBeInTheDocument(); + + await user.click(screen.getByRole("button")); + expect(inputs[1]).not.toHaveFocus(); + expect(inputs[1]).toBeChecked(); + expect(screen.getByText(/Selected: Standard plan/)).toBeInTheDocument(); + }); + + it("should handle disabled state with events", async () => { + render(RadioTile, { + props: { disabled: true }, + }); + + const input = screen.getByRole("radio"); + await user.click(input); + expect(input).not.toBeChecked(); + }); + + it("should handle mouse events", async () => { + render(RadioTile); + + const tile = screen.getByText("Test content").closest(".bx--tile"); + assert(tile); + await user.hover(tile); + await user.unhover(tile); + }); + + it("should handle custom content slot", () => { + render(RadioTileCustom); + + const content = screen.getByText("Custom content"); + expect(content).toBeInTheDocument(); + expect(content.tagName).toBe("DIV"); + }); + + it("should handle TileGroup context", () => { + render(RadioTile, { props: { checked: true } }); + + const input = screen.getByRole("radio"); + expect(input).toBeChecked(); + expect(screen.getByText("Test content").closest(".bx--tile")).toHaveClass( + "bx--tile--is-selected", + ); + expect(input).toHaveAttribute("name", "test-group"); + }); +}); diff --git a/tests/RadioTile/RadioTileCustom.test.svelte b/tests/RadioTile/RadioTileCustom.test.svelte new file mode 100644 index 00000000..9d97ddf9 --- /dev/null +++ b/tests/RadioTile/RadioTileCustom.test.svelte @@ -0,0 +1,9 @@ + + + + +
Custom content
+
+
diff --git a/tests/RecursiveList/RecursiveList.hierarchy.test.svelte b/tests/RecursiveList/RecursiveList.hierarchy.test.svelte new file mode 100644 index 00000000..ec44d237 --- /dev/null +++ b/tests/RecursiveList/RecursiveList.hierarchy.test.svelte @@ -0,0 +1,24 @@ + + + diff --git a/tests/RecursiveList/RecursiveList.test.svelte b/tests/RecursiveList/RecursiveList.test.svelte new file mode 100644 index 00000000..cb1e9f98 --- /dev/null +++ b/tests/RecursiveList/RecursiveList.test.svelte @@ -0,0 +1,28 @@ + + + diff --git a/tests/RecursiveList/RecursiveList.test.ts b/tests/RecursiveList/RecursiveList.test.ts new file mode 100644 index 00000000..1614c154 --- /dev/null +++ b/tests/RecursiveList/RecursiveList.test.ts @@ -0,0 +1,47 @@ +import { render, screen } from "@testing-library/svelte"; +import RecursiveListHierarchyTest from "./RecursiveList.hierarchy.test.svelte"; +import RecursiveListTest from "./RecursiveList.test.svelte"; + +const testCases = [ + { name: "RecursiveList", component: RecursiveListTest }, + { name: "RecursiveList hierarchy", component: RecursiveListHierarchyTest }, +]; + +describe.each(testCases)("$name", ({ component }) => { + it("renders all top-level items", () => { + render(component); + + expect(screen.getByText("Item 1")).toBeInTheDocument(); + expect(screen.getByText("Item 2")).toBeInTheDocument(); + expect(screen.getByText("Item 3")).toBeInTheDocument(); + + expect(screen.getAllByRole("list")).toHaveLength(4); + + // Nested items + expect(screen.getByText("Item 1a")).toBeInTheDocument(); + }); + + it("renders HTML content", () => { + render(component); + + const htmlContent = screen.getByText("HTML content"); + expect(htmlContent.tagName).toBe("H5"); + }); + + it("renders links correctly", () => { + render(component); + + const links = screen.getAllByRole("link"); + expect(links).toHaveLength(2); + + // Link with custom text + const customLink = screen.getByText("Link with custom text"); + expect(customLink).toHaveAttribute("href", "https://svelte.dev/"); + + // Plain link + const plainLink = links.find( + (link) => link.textContent === "https://svelte.dev/", + ); + expect(plainLink).toHaveAttribute("href", "https://svelte.dev/"); + }); +}); diff --git a/tests/ResponsiveGrid.test.svelte b/tests/ResponsiveGrid.test.svelte deleted file mode 100644 index b0b3c5b9..00000000 --- a/tests/ResponsiveGrid.test.svelte +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - sm: 1, md: 4, lg: 8 - - - sm: 1, md: 2, lg: 2 - - - sm: 1, md: 1, lg: 1 - - - sm: 1, md: 1, lg: 1 - - - diff --git a/tests/Search.test.svelte b/tests/Search.test.svelte deleted file mode 100644 index ac067dbb..00000000 --- a/tests/Search.test.svelte +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/tests/Search/Search.test.svelte b/tests/Search/Search.test.svelte new file mode 100644 index 00000000..635d3f31 --- /dev/null +++ b/tests/Search/Search.test.svelte @@ -0,0 +1,17 @@ + + + { + console.log("clear"); + }} +/> + + diff --git a/tests/Search/Search.test.ts b/tests/Search/Search.test.ts new file mode 100644 index 00000000..a266b940 --- /dev/null +++ b/tests/Search/Search.test.ts @@ -0,0 +1,82 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import Search from "./Search.test.svelte"; +import SearchExpandable from "./SearchExpandable.test.svelte"; +import SearchSkeleton from "./SearchSkeleton.test.svelte"; + +describe("Search", () => { + const getSearchInput = (label?: string | RegExp) => + screen.getByRole("searchbox", { name: label }); + const getClearButton = (label = "Clear search input") => + screen.getByRole("button", { name: label }); + + it("renders and functions correctly", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Search); + + const search = getSearchInput("Default search"); + expect(search).toHaveValue(""); + expect(search).toHaveAttribute("placeholder", "Search"); + + await user.type(search, "test"); + expect(search).toHaveValue("test"); + + const clearButton = getClearButton("Clear value"); + await user.click(clearButton); + expect(search).toHaveValue(""); + expect(consoleLog).toHaveBeenCalledWith("clear"); + expect(consoleLog).toHaveBeenCalledTimes(1); + }); + + it("renders disabled state", async () => { + render(Search); + + const search = getSearchInput("Disabled search"); + expect(search).toBeDisabled(); + }); + + it("handles expandable variant", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(SearchExpandable); + + const search = getSearchInput("Expandable search"); + const searchWrapper = search.closest(".bx--search"); + assert(searchWrapper); + + expect(searchWrapper).toHaveClass("bx--search--expandable"); + expect(searchWrapper).not.toHaveClass("bx--search--expanded"); + + const magnifier = searchWrapper.querySelector(".bx--search-magnifier"); + assert(magnifier); + + await user.click(magnifier); + expect(searchWrapper).toHaveClass("bx--search--expanded"); + expect(consoleLog).toHaveBeenCalledWith("expanded"); + + await user.click(document.body); + expect(searchWrapper).not.toHaveClass("bx--search--expanded"); + expect(consoleLog).toHaveBeenCalledWith("collapsed"); + + // Don't collapse when has value + await user.click(magnifier); + await user.type(search, "test"); + await user.click(document.body); + expect(searchWrapper).toHaveClass("bx--search--expanded"); + }); + + it("renders skeleton states", () => { + render(SearchSkeleton); + + const skeletons = document.querySelectorAll(".bx--skeleton"); + expect(skeletons).toHaveLength(3); + + // Default (xl) skeleton + expect(skeletons[0]).toHaveClass("bx--search--xl"); + + // Large (lg) skeleton + expect(skeletons[1]).toHaveClass("bx--search--lg"); + + // Small (sm) skeleton + expect(skeletons[2]).toHaveClass("bx--search--sm"); + }); +}); diff --git a/tests/Search/SearchExpandable.test.svelte b/tests/Search/SearchExpandable.test.svelte new file mode 100644 index 00000000..68f2ca88 --- /dev/null +++ b/tests/Search/SearchExpandable.test.svelte @@ -0,0 +1,22 @@ + + + { + console.log("expanded"); + }} + on:collapse={() => { + console.log("collapsed"); + }} +/> + +
Status: {expanded ? "expanded" : "collapsed"}
diff --git a/tests/Search/SearchSkeleton.test.svelte b/tests/Search/SearchSkeleton.test.svelte new file mode 100644 index 00000000..e4c965e6 --- /dev/null +++ b/tests/Search/SearchSkeleton.test.svelte @@ -0,0 +1,9 @@ + + + + + + + diff --git a/tests/Select.test.svelte b/tests/Select.test.svelte deleted file mode 100644 index 1874d478..00000000 --- a/tests/Select.test.svelte +++ /dev/null @@ -1,64 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/tests/Select/Select.falsy.test.svelte b/tests/Select/Select.falsy.test.svelte new file mode 100644 index 00000000..a7614f47 --- /dev/null +++ b/tests/Select/Select.falsy.test.svelte @@ -0,0 +1,15 @@ + + + + + diff --git a/tests/Select/Select.group.test.svelte b/tests/Select/Select.group.test.svelte new file mode 100644 index 00000000..f9bcab0a --- /dev/null +++ b/tests/Select/Select.group.test.svelte @@ -0,0 +1,21 @@ + + + diff --git a/tests/Select/Select.skeleton.test.svelte b/tests/Select/Select.skeleton.test.svelte new file mode 100644 index 00000000..8020f35a --- /dev/null +++ b/tests/Select/Select.skeleton.test.svelte @@ -0,0 +1,5 @@ + + + diff --git a/tests/Select/Select.test.svelte b/tests/Select/Select.test.svelte new file mode 100644 index 00000000..4af1594d --- /dev/null +++ b/tests/Select/Select.test.svelte @@ -0,0 +1,39 @@ + + + diff --git a/tests/Select/Select.test.ts b/tests/Select/Select.test.ts new file mode 100644 index 00000000..499450f1 --- /dev/null +++ b/tests/Select/Select.test.ts @@ -0,0 +1,261 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import SelectFalsy from "./Select.falsy.test.svelte"; +import SelectGroup from "./Select.group.test.svelte"; +import SelectSkeleton from "./Select.skeleton.test.svelte"; +import Select from "./Select.test.svelte"; + +describe("Select", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it("renders with default props", () => { + render(Select); + + const select = screen.getByTestId("select"); + expect(select).toBeInTheDocument(); + + const label = select.querySelector("label"); + assert(label); + expect(label).toHaveTextContent("Select label"); + expect(label).not.toHaveClass("bx--visually-hidden"); + + const selectElement = select.querySelector("select"); + assert(selectElement); + expect(selectElement).not.toBeDisabled(); + expect(selectElement).not.toHaveAttribute("aria-invalid"); + + const options = selectElement.querySelectorAll("option"); + expect(options).toHaveLength(3); + expect(options[0]).toHaveValue("option-1"); + expect(options[0]).toHaveTextContent("Option 1"); + }); + + it("renders with selected value", () => { + render(Select, { selected: "option-2" }); + + const selectElement = screen.getByTestId("select").querySelector("select"); + assert(selectElement); + expect(selectElement).toHaveValue("option-2"); + }); + + it("emits events", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Select); + + const selectElement = screen.getByTestId("select").querySelector("select"); + assert(selectElement); + await user.selectOptions(selectElement, "option-2"); + + expect(consoleLog).toHaveBeenCalledWith("change"); + expect(consoleLog).toHaveBeenCalledWith("input"); + expect(consoleLog).toHaveBeenCalledWith("update", "option-2"); + expect(consoleLog).toHaveBeenCalledTimes(3); + }); + + it("renders default size", () => { + render(Select); + const selectElement = screen.getByTestId("select").querySelector("select"); + assert(selectElement); + expect(selectElement).not.toHaveClass("bx--select-input--sm"); + expect(selectElement).not.toHaveClass("bx--select-input--xl"); + }); + + it("renders small size variant", () => { + render(Select, { size: "sm" }); + const selectElement = screen.getByTestId("select").querySelector("select"); + assert(selectElement); + expect(selectElement).toHaveClass("bx--select-input--sm"); + expect(selectElement).not.toHaveClass("bx--select-input--xl"); + }); + + it("renders extra large size variant", () => { + render(Select, { size: "xl" }); + const selectElement = screen.getByTestId("select").querySelector("select"); + assert(selectElement); + expect(selectElement).not.toHaveClass("bx--select-input--sm"); + expect(selectElement).toHaveClass("bx--select-input--xl"); + }); + + it("renders default variant", () => { + render(Select); + const selectWrapper = screen + .getByTestId("select") + .querySelector(".bx--select"); + assert(selectWrapper); + expect(selectWrapper).not.toHaveClass("bx--select--inline"); + }); + + it("renders inline variant", () => { + render(Select, { inline: true }); + const selectWrapper = screen + .getByTestId("select") + .querySelector(".bx--select"); + assert(selectWrapper); + expect(selectWrapper).toHaveClass("bx--select--inline"); + }); + + it("renders default theme", () => { + render(Select); + const selectWrapper = screen + .getByTestId("select") + .querySelector(".bx--select"); + assert(selectWrapper); + expect(selectWrapper).not.toHaveClass("bx--select--light"); + }); + + it("renders light theme", () => { + render(Select, { light: true }); + const selectWrapper = screen + .getByTestId("select") + .querySelector(".bx--select"); + assert(selectWrapper); + expect(selectWrapper).toHaveClass("bx--select--light"); + }); + + it("renders enabled by default", () => { + render(Select); + const selectElement = screen.getByTestId("select").querySelector("select"); + assert(selectElement); + expect(selectElement).not.toBeDisabled(); + }); + + it("renders disabled state", () => { + render(Select, { disabled: true }); + const selectElement = screen.getByTestId("select").querySelector("select"); + assert(selectElement); + expect(selectElement).toBeDisabled(); + }); + + it("renders valid by default", () => { + render(Select); + const wrapper = screen.getByTestId("select"); + const selectElement = wrapper.querySelector("select"); + const selectWrapper = wrapper.querySelector(".bx--select"); + assert(selectElement); + assert(selectWrapper); + + expect(selectWrapper).not.toHaveClass("bx--select--invalid"); + expect(selectElement).not.toHaveAttribute("aria-invalid"); + expect( + wrapper.querySelector(".bx--form-requirement"), + ).not.toBeInTheDocument(); + }); + + it("renders invalid state", () => { + render(Select, { + invalid: true, + invalidText: "Invalid selection", + }); + + const wrapper = screen.getByTestId("select"); + const selectElement = wrapper.querySelector("select"); + const selectWrapper = wrapper.querySelector(".bx--select"); + assert(selectElement); + assert(selectWrapper); + + expect(selectWrapper).toHaveClass("bx--select--invalid"); + expect(selectElement).toHaveAttribute("aria-invalid", "true"); + expect(wrapper.querySelector(".bx--form-requirement")).toHaveTextContent( + "Invalid selection", + ); + }); + + it("renders without warning by default", () => { + render(Select); + const wrapper = screen.getByTestId("select"); + const selectWrapper = wrapper.querySelector(".bx--select"); + assert(selectWrapper); + + expect(selectWrapper).not.toHaveClass("bx--select--warning"); + expect( + wrapper.querySelector(".bx--form-requirement"), + ).not.toBeInTheDocument(); + }); + + it("renders warning state", () => { + render(Select, { + warn: true, + warnText: "Warning message", + }); + + const wrapper = screen.getByTestId("select"); + const selectWrapper = wrapper.querySelector(".bx--select"); + assert(selectWrapper); + expect(selectWrapper).toHaveClass("bx--select--warning"); + expect(wrapper.querySelector(".bx--form-requirement")).toHaveTextContent( + "Warning message", + ); + }); + + it("renders without helper text by default", () => { + render(Select); + expect( + screen.getByTestId("select").querySelector(".bx--form__helper-text"), + ).not.toBeInTheDocument(); + }); + + it("renders helper text when provided", () => { + render(Select, { helperText: "Helper text" }); + const helperElement = screen + .getByTestId("select") + .querySelector(".bx--form__helper-text"); + assert(helperElement); + expect(helperElement).toHaveTextContent("Helper text"); + }); + + it("renders visible label by default", () => { + render(Select); + const label = screen.getByTestId("select").querySelector("label"); + assert(label); + expect(label).not.toHaveClass("bx--visually-hidden"); + }); + + it("renders with hidden label", () => { + render(Select, { hideLabel: true }); + const label = screen.getByTestId("select").querySelector("label"); + assert(label); + expect(label).toHaveClass("bx--visually-hidden"); + }); + + it("renders with SelectItemGroup", () => { + render(SelectGroup); + + const select = screen.getByTestId("select-group"); + const selectElement = select.querySelector("select"); + assert(selectElement); + const optgroups = selectElement.querySelectorAll("optgroup"); + + expect(optgroups).toHaveLength(2); + expect(optgroups[0]).toHaveAttribute("label", "Category 1"); + expect(optgroups[1]).toHaveAttribute("label", "Category 2"); + + const options = selectElement.querySelectorAll("option"); + expect(options).toHaveLength(5); + expect(options[0]).toHaveAttribute("disabled"); + expect(options[0]).toHaveAttribute("hidden"); + }); + + it("renders skeleton state", () => { + render(SelectSkeleton); + + const skeleton = screen.getByTestId("select-skeleton"); + expect(skeleton).toBeInTheDocument(); + expect(skeleton.children[0]).toHaveClass("bx--skeleton"); + }); + + it("renders `text` instead of `value` if `text` is an empty string", () => { + render(SelectFalsy); + + expect(screen.getByLabelText("Falsy text")).toHaveValue("-1"); + expect(screen.getByRole("option", { name: "" })).toBeInTheDocument(); + }); + + it("renders value if `text` is undefined", () => { + render(SelectFalsy); + + expect(screen.getByLabelText("Undefined text")).toHaveValue("2"); + expect(screen.getByRole("option", { name: "2" })).toBeInTheDocument(); + }); +}); diff --git a/tests/SelectableDataTable.test.svelte b/tests/SelectableDataTable.test.svelte deleted file mode 100644 index 953d133e..00000000 --- a/tests/SelectableDataTable.test.svelte +++ /dev/null @@ -1,24 +0,0 @@ - - - diff --git a/tests/SelectableTile.test.svelte b/tests/SelectableTile.test.svelte deleted file mode 100644 index a4aed03c..00000000 --- a/tests/SelectableTile.test.svelte +++ /dev/null @@ -1,15 +0,0 @@ - - -Multi-select Tile - -Multi-select Tile - -Multi-select Tile - -Multi-select Tile - -Multi-select Tile - -Multi-select Tile diff --git a/tests/SkeletonPlaceholder.test.svelte b/tests/SkeletonPlaceholder.test.svelte deleted file mode 100644 index aabd46a8..00000000 --- a/tests/SkeletonPlaceholder.test.svelte +++ /dev/null @@ -1,7 +0,0 @@ - - - - - diff --git a/tests/SkeletonPlaceholder/SkeletonPlaceholder.test.svelte b/tests/SkeletonPlaceholder/SkeletonPlaceholder.test.svelte new file mode 100644 index 00000000..c79dc33b --- /dev/null +++ b/tests/SkeletonPlaceholder/SkeletonPlaceholder.test.svelte @@ -0,0 +1,20 @@ + + + { + console.log("click"); + }} + on:mouseover={() => { + console.log("mouseover"); + }} + on:mouseenter={() => { + console.log("mouseenter"); + }} + on:mouseleave={() => { + console.log("mouseleave"); + }} +/> diff --git a/tests/SkeletonPlaceholder/SkeletonPlaceholder.test.ts b/tests/SkeletonPlaceholder/SkeletonPlaceholder.test.ts new file mode 100644 index 00000000..0df9df0a --- /dev/null +++ b/tests/SkeletonPlaceholder/SkeletonPlaceholder.test.ts @@ -0,0 +1,58 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import SkeletonPlaceholder from "./SkeletonPlaceholder.test.svelte"; + +describe("SkeletonPlaceholder", () => { + it("should render with default props", () => { + render(SkeletonPlaceholder); + + const element = screen.getByTestId("skeleton-placeholder"); + expect(element).toHaveClass("bx--skeleton__placeholder"); + }); + + it("should render with custom size", () => { + render(SkeletonPlaceholder, { + props: { style: "height: 12rem; width: 12rem;" }, + }); + + const element = screen.getByTestId("skeleton-placeholder"); + expect(element).toHaveStyle({ height: "12rem", width: "12rem" }); + }); + + it("should handle mouse events", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(SkeletonPlaceholder); + + const element = screen.getByTestId("skeleton-placeholder"); + + await user.click(element); + expect(consoleLog).toHaveBeenCalledWith("click"); + + await user.hover(element); + expect(consoleLog).toHaveBeenCalledWith("mouseover"); + + await user.unhover(element); + expect(consoleLog).toHaveBeenCalledWith("mouseleave"); + }); + + it("should accept additional attributes", () => { + render(SkeletonPlaceholder, { + props: { + "data-testid": "custom-placeholder", + "aria-label": "Loading placeholder", + }, + }); + + const element = screen.getByTestId("custom-placeholder"); + expect(element).toHaveAttribute("aria-label", "Loading placeholder"); + }); + + it("should accept additional classes", () => { + render(SkeletonPlaceholder, { + props: { class: "custom-class" }, + }); + + const element = screen.getByTestId("skeleton-placeholder"); + expect(element).toHaveClass("bx--skeleton__placeholder", "custom-class"); + }); +}); diff --git a/tests/SkeletonText.test.svelte b/tests/SkeletonText.test.svelte deleted file mode 100644 index 90bb0252..00000000 --- a/tests/SkeletonText.test.svelte +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - diff --git a/tests/SkeletonText/SkeletonText.test.svelte b/tests/SkeletonText/SkeletonText.test.svelte new file mode 100644 index 00000000..1caddcfc --- /dev/null +++ b/tests/SkeletonText/SkeletonText.test.svelte @@ -0,0 +1,27 @@ + + + { + console.log("click"); + }} + on:mouseover={() => { + console.log("mouseover"); + }} + on:mouseenter={() => { + console.log("mouseenter"); + }} + on:mouseleave={() => { + console.log("mouseleave"); + }} +/> diff --git a/tests/SkeletonText/SkeletonText.test.ts b/tests/SkeletonText/SkeletonText.test.ts new file mode 100644 index 00000000..7796b09a --- /dev/null +++ b/tests/SkeletonText/SkeletonText.test.ts @@ -0,0 +1,90 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import SkeletonText from "./SkeletonText.test.svelte"; + +describe("SkeletonText", () => { + it("should render with default props", () => { + render(SkeletonText); + const element = screen.getByRole("paragraph"); + expect(element).toHaveClass("bx--skeleton__text"); + expect(element).toHaveStyle({ width: "100%" }); + }); + + it("should render heading variant", () => { + render(SkeletonText, { props: { heading: true } }); + const element = screen.getByRole("paragraph"); + expect(element).toHaveClass("bx--skeleton__text", "bx--skeleton__heading"); + }); + + it("should render paragraph variant with default lines", () => { + render(SkeletonText, { props: { paragraph: true } }); + + const elements = screen.getAllByRole("paragraph"); + expect(elements).toHaveLength(3); // default lines is 3 + elements.forEach((element) => { + expect(element).toHaveClass("bx--skeleton__text"); + }); + }); + + it("should render paragraph with custom line count", () => { + render(SkeletonText, { props: { paragraph: true, lines: 8 } }); + + const elements = screen.getAllByRole("paragraph"); + expect(elements).toHaveLength(8); + }); + + it("should render with custom width", () => { + render(SkeletonText, { props: { width: "50%" } }); + + const element = screen.getByRole("paragraph"); + expect(element).toHaveStyle({ width: "50%" }); + }); + + it("should render paragraph with pixel width", () => { + render(SkeletonText, { props: { paragraph: true, width: "200px" } }); + + const elements = screen.getAllByRole("paragraph"); + elements.forEach((element) => { + const width = element.style.width; + expect(width).toMatch(/^\d+px$/); + const numWidth = parseInt(width); + expect(numWidth).toBeGreaterThanOrEqual(125); // 200 - 75 + expect(numWidth).toBeLessThanOrEqual(200); + }); + }); + + it("should handle mouse events", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(SkeletonText); + + const element = screen.getByRole("paragraph"); + + await user.click(element); + expect(consoleLog).toHaveBeenCalledWith("click"); + + await user.hover(element); + expect(consoleLog).toHaveBeenCalledWith("mouseover"); + + await user.unhover(element); + expect(consoleLog).toHaveBeenCalledWith("mouseleave"); + }); + + it("should handle paragraph mouse events", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(SkeletonText, { props: { paragraph: true } }); + + const container = screen.getAllByRole("paragraph")[0].parentElement; + expect(container).toBeTruthy(); + + if (container) { + await user.click(container); + expect(consoleLog).toHaveBeenCalledWith("click"); + + await user.hover(container); + expect(consoleLog).toHaveBeenCalledWith("mouseover"); + + await user.unhover(container); + expect(consoleLog).toHaveBeenCalledWith("mouseleave"); + } + }); +}); diff --git a/tests/Slider.test.svelte b/tests/Slider.test.svelte deleted file mode 100644 index c5f5b000..00000000 --- a/tests/Slider.test.svelte +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - - - - - - - diff --git a/tests/Slider/Slider.test.svelte b/tests/Slider/Slider.test.svelte new file mode 100644 index 00000000..efd560f5 --- /dev/null +++ b/tests/Slider/Slider.test.svelte @@ -0,0 +1,37 @@ + + + { + console.log("change", e.detail); + }} + on:input={(e) => { + console.log("input", e.detail); + }} +/> diff --git a/tests/Slider/Slider.test.ts b/tests/Slider/Slider.test.ts new file mode 100644 index 00000000..65005860 --- /dev/null +++ b/tests/Slider/Slider.test.ts @@ -0,0 +1,177 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import Slider from "./Slider.test.svelte"; + +describe("Slider", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it("should render with default props", () => { + render(Slider); + + expect(screen.getByText("Test Slider")).toBeInTheDocument(); + expect(screen.getByRole("slider")).toBeInTheDocument(); + expect(screen.getByRole("spinbutton")).toHaveValue(0); + }); + + it("should handle value changes through input", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Slider); + + const input = screen.getByRole("spinbutton"); + await user.clear(input); + await user.type(input, "50"); + await user.keyboard("{Tab}"); + + expect(consoleLog).toHaveBeenCalledWith("change", 50); + }); + + it("should handle keyboard navigation", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Slider); + + const slider = screen.getByRole("slider"); + await user.tab(); + expect(slider).toHaveFocus(); + + await user.keyboard("{ArrowRight}"); + expect(consoleLog).toHaveBeenCalledWith("change", 1); + + await user.keyboard("{ArrowLeft}"); + expect(consoleLog).toHaveBeenCalledWith("change", 0); + }); + + it("should handle custom range and step", () => { + render(Slider, { + props: { + min: 10, + max: 990, + minLabel: "10 MB", + maxLabel: "990 MB", + step: 10, + }, + }); + + const slider = screen.getByRole("slider"); + expect(slider).toHaveAttribute("aria-valuemin", "10"); + expect(slider).toHaveAttribute("aria-valuemax", "990"); + expect(screen.getByText("990 MB")).toBeInTheDocument(); + }); + + it("should handle hidden text input", () => { + render(Slider, { + props: { hideTextInput: true }, + }); + + const spinbutton = screen.getByLabelText("Slider number input"); + expect(spinbutton).toHaveAttribute("type", "hidden"); + }); + + it("should handle full width", () => { + render(Slider, { + props: { fullWidth: true }, + }); + + const slider = screen.getByRole("slider").parentElement; + expect(slider).toHaveStyle("max-width: none"); + }); + + it("should handle disabled state", () => { + render(Slider, { + props: { disabled: true }, + }); + + const slider = screen.getByRole("slider"); + const input = screen.getByRole("spinbutton"); + const label = screen.getByText("Test Slider"); + + expect(slider.parentElement).toHaveClass("bx--slider--disabled"); + expect(input).toBeDisabled(); + expect(label).toHaveClass("bx--label--disabled"); + }); + + it("should handle invalid state", () => { + render(Slider, { + props: { invalid: true }, + }); + + const input = screen.getByRole("spinbutton"); + expect(input).toHaveClass("bx--text-input--invalid"); + expect(input).toHaveAttribute("data-invalid", "true"); + expect(input).toHaveAttribute("aria-invalid", "true"); + }); + + it("should handle custom labels", () => { + render(Slider, { + props: { + minLabel: "0 MB", + maxLabel: "100 MB", + }, + }); + + expect(screen.getByText("0 MB")).toBeInTheDocument(); + expect(screen.getByText("100 MB")).toBeInTheDocument(); + }); + + it("should handle required state", () => { + render(Slider, { + props: { required: true }, + }); + + const input = screen.getByRole("spinbutton"); + expect(input).toBeRequired(); + }); + + it("should handle step multiplier with shift key", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Slider); + + const slider = screen.getByRole("slider"); + await user.tab(); + expect(slider).toHaveFocus(); + + await user.keyboard("{Shift>}{ArrowRight}{/Shift}"); + expect(consoleLog).toHaveBeenCalledWith("change", 25); + }); + + it("should clamp values to min and max", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Slider, { + props: { min: 10, max: 990 }, + }); + + const input = screen.getByRole("spinbutton"); + await user.clear(input); + await user.type(input, "5"); + await user.keyboard("{Tab}"); + expect(consoleLog).toHaveBeenCalledWith("change", 10); + + await user.clear(input); + await user.type(input, "1000{Tab}"); + await user.keyboard("{Tab}"); + expect(consoleLog).toHaveBeenCalledWith("change", 990); + }); + + it("should not respond to dragging when disabled", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Slider, { + props: { disabled: true }, + }); + + const slider = screen.getByRole("slider"); + const container = screen.getByRole("presentation"); + + // Simulate mouse down on the slider + await user.pointer({ target: slider, keys: "[MouseLeft]" }); + + // Simulate mouse move + const { left, width } = container.getBoundingClientRect(); + await user.pointer({ target: container, coords: { x: left + width / 2 } }); + + // Simulate mouse up + await user.pointer({ target: container, keys: "[/MouseLeft]" }); + + expect(consoleLog).not.toHaveBeenCalled(); + }); +}); diff --git a/tests/StructuredList.test.svelte b/tests/StructuredList.test.svelte deleted file mode 100644 index 73759606..00000000 --- a/tests/StructuredList.test.svelte +++ /dev/null @@ -1,94 +0,0 @@ - - - - - - Column A - Column B - Column C - - - - - Row 1 - Row 1 - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, - finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel - euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a - porttitor interdum. - - - - Row 2 - Row 2 - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, - finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel - euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a - porttitor interdum. - - - - Row 3 - Row 3 - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, - finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel - euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a - porttitor interdum. - - - - - - - - - ColumnA - ColumnB - ColumnC - {''} - - - - {#each [1, 2, 3] as item} - - Row {item} - Row {item} - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui - magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere - sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque - vulputate nisl a porttitor interdum. - - - - - - - {/each} - - - - diff --git a/tests/StructuredList/StructuredList.test.svelte b/tests/StructuredList/StructuredList.test.svelte new file mode 100644 index 00000000..cacf5f64 --- /dev/null +++ b/tests/StructuredList/StructuredList.test.svelte @@ -0,0 +1,79 @@ + + + { + console.log("click"); + }} + on:mouseover={() => { + console.log("mouseover"); + }} + on:mouseenter={() => { + console.log("mouseenter"); + }} + on:mouseleave={() => { + console.log("mouseleave"); + }} + on:change={(e) => { + console.log("change", e.detail); + }} +> + + + Column A + Column B + Column C + {#if selection} + {""} + {/if} + + + + {#each ["1", "2", "3"] as item} + + Row {item} + Row {item} + Content {item} + {#if selection} + + + + + {/if} + + {/each} + + + +
{selected}
diff --git a/tests/StructuredList/StructuredList.test.ts b/tests/StructuredList/StructuredList.test.ts new file mode 100644 index 00000000..c11e7c89 --- /dev/null +++ b/tests/StructuredList/StructuredList.test.ts @@ -0,0 +1,131 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import StructuredList from "./StructuredList.test.svelte"; +import StructuredListCustom from "./StructuredListCustom.test.svelte"; + +describe("StructuredList", () => { + it("should render with default props", () => { + render(StructuredList); + + const list = screen.getByRole("table"); + expect(list).toBeInTheDocument(); + expect(list).toHaveClass("bx--structured-list"); + + // Check header cells + const headerCells = screen.getAllByRole("columnheader"); + expect(headerCells).toHaveLength(3); + expect(headerCells[0]).toHaveTextContent("Column A"); + expect(headerCells[1]).toHaveTextContent("Column B"); + expect(headerCells[2]).toHaveTextContent("Column C"); + + // Check body cells + const cells = screen.getAllByRole("cell"); + expect(cells).toHaveLength(9); // 3 rows x 3 columns + expect(cells[0]).toHaveTextContent("Row 1"); + expect(cells[1]).toHaveTextContent("Row 1"); + expect(cells[2]).toHaveTextContent("Content 1"); + }); + + it("should handle condensed variant", () => { + render(StructuredList, { props: { condensed: true } }); + + expect(screen.getByRole("table")).toHaveClass( + "bx--structured-list--condensed", + ); + }); + + it("should handle flush variant", () => { + render(StructuredList, { props: { flush: true } }); + + expect(screen.getByRole("table")).toHaveClass("bx--structured-list--flush"); + }); + + it("should handle selection variant", () => { + render(StructuredList, { props: { selection: true } }); + + const list = screen.getByRole("table"); + expect(list).toHaveClass("bx--structured-list--selection"); + + const inputs = screen.getAllByRole("radio"); + expect(inputs).toHaveLength(3); + + const checkmarks = screen.getAllByTitle("select an option"); + expect(checkmarks).toHaveLength(3); + }); + + it("should handle selected state", async () => { + render(StructuredList, { + props: { selection: true, selected: "row-1-value" }, + }); + + const selectedInput = screen.getByRole("radio", { checked: true }); + expect(selectedInput.closest("label")).toHaveTextContent("Row 1"); + + await user.click(screen.getAllByRole("radio")[1]); + expect( + screen.getByRole("radio", { checked: true }).closest("label"), + ).toHaveTextContent("Row 2"); + }); + + it("should handle selection change", async () => { + render(StructuredList, { props: { selection: true } }); + + const secondInput = screen.getAllByRole("radio")[1]; + await user.click(secondInput); + + expect(screen.getByTestId("value").textContent).toBe("row-2-value"); + }); + + it("should handle custom content", () => { + render(StructuredListCustom); + + expect(screen.getByTestId("custom-header")).toHaveTextContent( + "Custom Header", + ); + expect(screen.getByTestId("custom-content")).toHaveTextContent( + "Custom Content", + ); + }); + + it("should handle mouse events", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(StructuredList); + + const list = screen.getByRole("table"); + + await user.click(list); + expect(consoleLog).toHaveBeenCalledWith("click"); + await user.hover(list); + expect(consoleLog).toHaveBeenCalledWith("mouseover"); + await user.unhover(list); + expect(consoleLog).toHaveBeenCalledWith("mouseleave"); + }); + + it("should handle noWrap cells", () => { + render(StructuredList); + + const noWrapCells = screen + .getAllByRole("cell") + .filter( + (cell) => + cell.textContent?.startsWith("Row") && cell.textContent?.length === 5, + ); + + noWrapCells.forEach((cell) => { + expect(cell).toHaveClass("bx--structured-list-td"); + }); + }); + + it("should emit change event on selection", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(StructuredList, { props: { selection: true } }); + + expect(consoleLog).not.toHaveBeenCalled(); + + await user.click(screen.getAllByRole("radio")[1]); + expect(consoleLog).toHaveBeenCalledWith("change", "row-2-value"); + + await user.click(screen.getAllByRole("radio")[0]); + expect(consoleLog).toHaveBeenCalledWith("change", "row-1-value"); + }); +}); diff --git a/tests/StructuredList/StructuredListCustom.test.svelte b/tests/StructuredList/StructuredListCustom.test.svelte new file mode 100644 index 00000000..3ef8a400 --- /dev/null +++ b/tests/StructuredList/StructuredListCustom.test.svelte @@ -0,0 +1,26 @@ + + + + + + +
Custom Header
+
+
+
+ + + +
Custom Content
+
+
+
+
diff --git a/tests/Tabs.test.svelte b/tests/Tabs.test.svelte deleted file mode 100644 index 8f1f1b88..00000000 --- a/tests/Tabs.test.svelte +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - -
- Content 1 - Content 2 - Content 3 -
-
- -Content 1 - -Content 2 - -Content 3 - - - - - -
- Content 1 - Content 2 - Content 3 -
-
- -Content 1 - -Content 2 - -Content 3 - - diff --git a/tests/Tabs/Tab.test.svelte b/tests/Tabs/Tab.test.svelte new file mode 100644 index 00000000..2e5174f4 --- /dev/null +++ b/tests/Tabs/Tab.test.svelte @@ -0,0 +1,16 @@ + + + + + +
Test Content
+
+
diff --git a/tests/Tabs/Tabs.test.svelte b/tests/Tabs/Tabs.test.svelte new file mode 100644 index 00000000..27f06ebd --- /dev/null +++ b/tests/Tabs/Tabs.test.svelte @@ -0,0 +1,29 @@ + + + { + console.log("change event", detail); + }} +> + + + + + Content 1 + Content 2 + Content 3 + + diff --git a/tests/Tabs/Tabs.test.ts b/tests/Tabs/Tabs.test.ts new file mode 100644 index 00000000..789d1ed5 --- /dev/null +++ b/tests/Tabs/Tabs.test.ts @@ -0,0 +1,300 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import Tabs from "./Tabs.test.svelte"; +import Tab from "./Tab.test.svelte"; +import TabsSkeleton from "./TabsSkeleton.test.svelte"; + +describe("Tabs", () => { + let consoleLog: ReturnType; + + beforeEach(() => { + consoleLog = vi.spyOn(console, "log"); + }); + + afterEach(() => { + vi.restoreAllMocks(); + }); + + it("should render with default props", () => { + render(Tabs); + + expect(screen.getByRole("tab", { name: "Tab 1" })).toBeInTheDocument(); + expect(screen.getByRole("tab", { name: "Tab 2" })).toBeInTheDocument(); + expect(screen.getByRole("tab", { name: "Tab 3" })).toBeInTheDocument(); + expect(screen.getByText("Content 1")).toBeVisible(); + expect(screen.getByText("Content 2")).not.toBeVisible(); + expect(screen.getByText("Content 3")).not.toBeVisible(); + }); + + it("should select initial tab based on selected prop", () => { + render(Tabs, { props: { selected: 2 } }); + + const tab3 = screen.getByRole("tab", { name: "Tab 3" }); + expect(tab3).toHaveAttribute("aria-selected", "true"); + expect(screen.getByText("Content 3")).toBeVisible(); + expect(screen.getByText("Content 1")).not.toBeVisible(); + expect(screen.getByText("Content 2")).not.toBeVisible(); + }); + + it("should change tab on click", async () => { + render(Tabs); + + const tab3 = screen.getByRole("tab", { name: "Tab 3" }); + await user.click(tab3); + + expect(tab3.getAttribute("aria-selected")).toBe("true"); + expect(screen.getByText("Content 3")).toBeVisible(); + expect(consoleLog).toHaveBeenCalledWith("change event", 2); + }); + + it("should not select disabled tabs", async () => { + render(Tabs); + + const tab2 = screen.getByRole("tab", { name: "Tab 2" }); + expect(tab2).toHaveAttribute("aria-disabled", "true"); + await user.click(tab2); + + expect(tab2).toHaveAttribute("aria-selected", "false"); + expect(screen.getByText("Content 1")).toBeVisible(); + }); + + it("should support keyboard navigation", async () => { + render(Tabs); + + const tab1 = screen.getByRole("tab", { name: "Tab 1" }); + await user.click(tab1); + + await user.keyboard("{ArrowRight}"); + expect(screen.getByRole("tab", { name: "Tab 3" })).toHaveFocus(); + expect(consoleLog).toHaveBeenCalledWith("change event", 2); + + await user.keyboard("{ArrowLeft}"); + expect(tab1).toHaveFocus(); + expect(consoleLog).toHaveBeenCalledWith("change event", 0); + }); + + it("should render container type tabs", () => { + const { container } = render(Tabs, { + props: { type: "container" }, + }); + + expect(container.querySelector(".bx--tabs--container")).not.toBeNull(); + }); + + it("should support auto width", () => { + const { container } = render(Tabs, { + props: { autoWidth: true }, + }); + + const tabs = container.querySelectorAll(".bx--tabs__nav-item"); + tabs.forEach((tab) => { + expect(tab).not.toHaveStyle({ width: "10rem" }); + }); + }); + + it("should show dropdown on trigger click", async () => { + const { container } = render(Tabs); + + const trigger = container.querySelector(".bx--tabs-trigger"); + if (!trigger) throw new Error("Trigger element not found"); + + await user.click(trigger); + expect(container.querySelector(".bx--tabs__nav--hidden")).toBeNull(); + }); + + it("should update trigger text when tab changes", async () => { + const { container } = render(Tabs); + + const tab3 = screen.getByText("Tab 3"); + await user.click(tab3); + + const triggerText = container.querySelector(".bx--tabs-trigger-text"); + expect(triggerText).toHaveTextContent("Tab 3"); + }); + + it("should support custom trigger href", () => { + const { container } = render(Tabs, { + props: { triggerHref: "#custom" }, + }); + + const triggerLink = container.querySelector(".bx--tabs-trigger-text"); + expect(triggerLink).toHaveAttribute("href", "#custom"); + }); + + it("should support custom icon description", () => { + render(Tabs, { + props: { iconDescription: "Custom description" }, + }); + + expect(screen.getByTitle("Custom description")).toBeInTheDocument(); + }); +}); + +describe("Tab", () => { + it("should render with default props", () => { + render(Tab); + + const tab = screen.getByRole("tab", { name: "Test Tab" }); + expect(tab).toBeInTheDocument(); + expect(tab).toHaveAttribute("href", "#test"); + expect(tab).toHaveAttribute("tabindex", "0"); + expect(tab).toHaveAttribute("id", "test-tab"); + }); + + it("should render with custom label", () => { + render(Tab, { props: { label: "Custom Label" } }); + + expect( + screen.getByRole("tab", { name: "Custom Label" }), + ).toBeInTheDocument(); + }); + + it("should render with custom href", () => { + render(Tab, { props: { href: "/custom" } }); + + const tab = screen.getByRole("tab"); + expect(tab).toHaveAttribute("href", "/custom"); + }); + + it("should handle disabled state", () => { + render(Tab, { props: { disabled: true } }); + + const tab = screen.getByRole("tab"); + expect(tab).toHaveAttribute("aria-disabled", "true"); + expect(tab).toHaveAttribute("tabindex", "-1"); + }); + + it("should handle custom tabindex", () => { + render(Tab, { props: { tabindex: "1" } }); + + const tab = screen.getByRole("tab"); + expect(tab).toHaveAttribute("tabindex", "1"); + }); + + it("should handle custom id", () => { + render(Tab, { props: { id: "custom-id" } }); + + const tab = screen.getByRole("tab"); + expect(tab).toHaveAttribute("id", "custom-id"); + }); + + it("should be clickable when enabled", async () => { + render(Tab); + + const tab = screen.getByRole("tab"); + await user.click(tab); + + expect(tab).toHaveAttribute("aria-selected", "true"); + }); + + it("should handle keyboard navigation with arrow keys", async () => { + render(Tab); + + const tab = screen.getByRole("tab"); + await user.click(tab); + await user.keyboard("{ArrowRight}"); + + expect(tab).toHaveFocus(); + }); + + it("should handle space key activation", async () => { + render(Tab); + + const tab = screen.getByRole("tab"); + await user.click(tab); + await user.keyboard(" "); + + expect(tab).toHaveAttribute("aria-selected", "true"); + }); + + it("should handle enter key activation", async () => { + render(Tab); + + const tab = screen.getByRole("tab"); + await user.click(tab); + await user.keyboard("{Enter}"); + + expect(tab).toHaveAttribute("aria-selected", "true"); + }); + + it("should render slot content when no label provided", () => { + render(Tab, { props: { label: "" } }); + + const tab = screen.getByRole("tab"); + expect(tab).toHaveTextContent(""); + }); +}); + +describe("TabsSkeleton", () => { + it("should render with default props", () => { + const { container } = render(TabsSkeleton); + + const skeleton = container.querySelector(".bx--tabs"); + expect(skeleton).toBeInTheDocument(); + expect(skeleton).toHaveClass("bx--skeleton"); + expect(skeleton).toHaveClass("bx--tabs--scrollable"); + + const navItems = container.querySelectorAll( + ".bx--tabs--scrollable__nav-item", + ); + expect(navItems).toHaveLength(4); + }); + + it("should render with custom count", () => { + const { container } = render(TabsSkeleton, { props: { count: 6 } }); + + const navItems = container.querySelectorAll( + ".bx--tabs--scrollable__nav-item", + ); + expect(navItems).toHaveLength(6); + }); + + it("should render with container type", () => { + const { container } = render(TabsSkeleton, { + props: { type: "container" }, + }); + + const skeleton = container.querySelector(".bx--tabs"); + expect(skeleton).toHaveClass("bx--tabs--scrollable--container"); + }); + + it("should render with default type", () => { + const { container } = render(TabsSkeleton, { props: { type: "default" } }); + + const skeleton = container.querySelector(".bx--tabs"); + expect(skeleton).not.toHaveClass("bx--tabs--scrollable--container"); + }); + + it("should render skeleton nav items with correct structure", () => { + const { container } = render(TabsSkeleton); + + const navItems = container.querySelectorAll( + ".bx--tabs--scrollable__nav-item", + ); + navItems.forEach((item) => { + const link = item.querySelector(".bx--tabs__nav-link"); + const span = link?.querySelector("span"); + + expect(link).toBeInTheDocument(); + expect(span).toBeInTheDocument(); + }); + }); + + it("should handle zero count", () => { + const { container } = render(TabsSkeleton, { props: { count: 0 } }); + + const navItems = container.querySelectorAll( + ".bx--tabs--scrollable__nav-item", + ); + expect(navItems).toHaveLength(0); + }); + + it("should handle large count", () => { + const { container } = render(TabsSkeleton, { props: { count: 20 } }); + + const navItems = container.querySelectorAll( + ".bx--tabs--scrollable__nav-item", + ); + expect(navItems).toHaveLength(20); + }); +}); diff --git a/tests/Tabs/TabsSkeleton.test.svelte b/tests/Tabs/TabsSkeleton.test.svelte new file mode 100644 index 00000000..6b4fc96b --- /dev/null +++ b/tests/Tabs/TabsSkeleton.test.svelte @@ -0,0 +1,8 @@ + + + diff --git a/tests/Tag.test.svelte b/tests/Tag/Tag.test.svelte similarity index 54% rename from tests/Tag.test.svelte rename to tests/Tag/Tag.test.svelte index db53c202..2a5710e1 100644 --- a/tests/Tag.test.svelte +++ b/tests/Tag/Tag.test.svelte @@ -1,5 +1,6 @@ IBM Cloud @@ -26,6 +27,25 @@ high-contrast -Filterable +outline + + { + console.log("click"); + }} + on:close={() => { + console.log("close"); + }}>Filterable + +Custom icon + + { + console.log("click"); + }}>Text diff --git a/tests/Tag/Tag.test.ts b/tests/Tag/Tag.test.ts new file mode 100644 index 00000000..6a2dcce1 --- /dev/null +++ b/tests/Tag/Tag.test.ts @@ -0,0 +1,85 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import Tag from "./Tag.test.svelte"; + +describe("Tag", () => { + afterEach(() => { + vi.clearAllMocks(); + }); + + it("renders all tag variants with correct styles", () => { + render(Tag); + + const basicTag = screen.getByText("IBM Cloud"); + expect(basicTag.parentElement).toHaveClass("my-class"); + expect(basicTag.parentElement).toHaveStyle({ margin: "1rem" }); + + [ + "red", + "magenta", + "purple", + "blue", + "cyan", + "teal", + "green", + "gray", + "cool-gray", + "warm-gray", + "high-contrast", + "outline", + ].forEach((color) => { + const tag = screen.getByText(color); + expect(tag.parentElement).toHaveClass(`bx--tag--${color}`); + }); + }); + + it("renders and handles filterable tag correctly", async () => { + const consoleLog = vi.spyOn(console, "log"); + + render(Tag); + + const filterableTag = screen.getByText("Filterable"); + expect(filterableTag).toHaveClass("bx--tag--filter"); + + const closeButton = filterableTag.querySelector("button")!; + expect(closeButton).toHaveClass("bx--tag__close-icon"); + expect(closeButton).toHaveAttribute("title", "Clear filter"); + + await user.click(closeButton); + expect(consoleLog).toHaveBeenCalledWith("close"); + expect(consoleLog).toHaveBeenCalledWith("click"); + }); + + it("renders custom icon tag correctly", () => { + render(Tag); + + const iconTag = screen.getByText("Custom icon"); + const iconContainer = iconTag.parentElement?.querySelector( + ".bx--tag__custom-icon", + ); + expect(iconContainer).toBeInTheDocument(); + }); + + it("renders interactive tag as a button", () => { + render(Tag); + + const interactiveTag = screen.getByRole("button", { name: "Text" }); + expect(interactiveTag).toHaveClass("bx--tag--interactive"); + }); + + it("renders skeleton state", () => { + render(Tag); + + const skeleton = document.querySelector(".bx--skeleton"); + expect(skeleton).toBeInTheDocument(); + }); + + it("handles click events on interactive tag", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Tag); + + const interactiveTag = screen.getByRole("button", { name: "Text" }); + await user.click(interactiveTag); + expect(consoleLog).toHaveBeenCalledWith("click"); + }); +}); diff --git a/tests/TextArea.test.svelte b/tests/TextArea.test.svelte deleted file mode 100644 index d40dd0b6..00000000 --- a/tests/TextArea.test.svelte +++ /dev/null @@ -1,46 +0,0 @@ - - - diff --git a/tests/TextInput.test.svelte b/tests/TextInput.test.svelte deleted file mode 100644 index 1900a82f..00000000 --- a/tests/TextInput.test.svelte +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/tests/TextInput/TextInput.test.svelte b/tests/TextInput/TextInput.test.svelte new file mode 100644 index 00000000..5dc88aac --- /dev/null +++ b/tests/TextInput/TextInput.test.svelte @@ -0,0 +1,55 @@ + + + + +
{value}
diff --git a/tests/TextInput/TextInput.test.ts b/tests/TextInput/TextInput.test.ts new file mode 100644 index 00000000..74271739 --- /dev/null +++ b/tests/TextInput/TextInput.test.ts @@ -0,0 +1,198 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import TextInput from "./TextInput.test.svelte"; +import TextInputCustom from "./TextInputCustom.test.svelte"; + +describe("TextInput", () => { + it("should render with default props", () => { + render(TextInput); + + expect(screen.getByLabelText("User name")).toBeInTheDocument(); + }); + + it("should handle placeholder text", () => { + render(TextInput, { + props: { placeholder: "Enter user name..." }, + }); + + expect( + screen.getByPlaceholderText("Enter user name..."), + ).toBeInTheDocument(); + }); + + it("should handle different sizes", () => { + (["sm", "xl"] as const).forEach((size) => { + const { container } = render(TextInput, { + props: { size }, + }); + + const input = container.querySelector("input"); + expect(input).toHaveClass(`bx--text-input--${size}`); + container.remove(); + }); + }); + + it("should handle light variant", () => { + render(TextInput, { props: { light: true } }); + + expect(screen.getByRole("textbox")).toHaveClass("bx--text-input--light"); + }); + + it("should handle disabled state", () => { + render(TextInput, { props: { disabled: true } }); + + const input = screen.getByRole("textbox"); + expect(input).toBeDisabled(); + expect(screen.getByText("User name")).toHaveClass("bx--label--disabled"); + }); + + it("should handle helper text", () => { + render(TextInput, { props: { helperText: "Helper text" } }); + + expect(screen.getByText("Helper text")).toHaveClass( + "bx--form__helper-text", + ); + }); + + it("should handle invalid state", () => { + render(TextInput, { + props: { invalid: true, invalidText: "Invalid input" }, + }); + + const input = screen.getByRole("textbox"); + expect(input).toHaveClass("bx--text-input--invalid"); + expect(input).toHaveAttribute("aria-invalid", "true"); + expect(screen.getByText("Invalid input")).toHaveClass( + "bx--form-requirement", + ); + }); + + it("should handle warning state", () => { + render(TextInput, { + props: { warn: true, warnText: "Warning message" }, + }); + + const input = screen.getByRole("textbox"); + expect(input).toHaveClass("bx--text-input--warning"); + expect(screen.getByText("Warning message")).toHaveClass( + "bx--form-requirement", + ); + }); + + it("should handle hidden label", () => { + render(TextInput, { props: { hideLabel: true } }); + + expect(screen.getByText("User name")).toHaveClass("bx--visually-hidden"); + }); + + it("should handle custom id", () => { + render(TextInput, { props: { id: "custom-id" } }); + + const input = screen.getByRole("textbox"); + expect(input).toHaveAttribute("id", "custom-id"); + expect(screen.getByText("User name")).toHaveAttribute("for", "custom-id"); + }); + + it("should handle custom name", () => { + render(TextInput, { props: { name: "custom-name" } }); + + expect(screen.getByRole("textbox")).toHaveAttribute("name", "custom-name"); + }); + + it("should handle required state", () => { + render(TextInput, { props: { required: true } }); + + expect(screen.getByRole("textbox")).toHaveAttribute("required"); + }); + + it("should handle inline variant", () => { + render(TextInput, { props: { inline: true } }); + + expect(screen.getByText("User name")).toHaveClass("bx--label--inline"); + }); + + it("should handle readonly state", () => { + render(TextInput, { + props: { readonly: true }, + }); + + expect(screen.getByRole("textbox")).toHaveAttribute("readonly"); + }); + + it("should handle custom slots", () => { + render(TextInputCustom); + + expect(screen.getByText("Custom Label Text").tagName).toBe("SPAN"); + }); + + it("should handle value binding", async () => { + render(TextInput); + + const input = screen.getByRole("textbox"); + await user.type(input, "Test value"); + expect(screen.getByTestId("value").textContent).toBe("Test value"); + }); + + it("should handle number type input", async () => { + render(TextInput, { props: { type: "number" } }); + + const input = screen.getByLabelText("User name"); + await user.type(input, "123"); + expect(input).toHaveValue(123); + + await user.clear(input); + expect(input).toHaveValue(null); + }); + + it("should not show helper text when invalid", () => { + render(TextInput, { + props: { + invalid: true, + invalidText: "Invalid input", + helperText: "Helper text", + }, + }); + + expect(screen.queryByText("Helper text")).not.toBeInTheDocument(); + expect(screen.getByText("Invalid input")).toBeInTheDocument(); + }); + + it("should not show helper text when warning", () => { + render(TextInput, { + props: { + warn: true, + warnText: "Warning message", + helperText: "Helper text", + }, + }); + + expect(screen.queryByText("Helper text")).not.toBeInTheDocument(); + expect(screen.getByText("Warning message")).toBeInTheDocument(); + }); + + it("should handle disabled helper text", () => { + render(TextInput, { + props: { + disabled: true, + helperText: "Helper text", + }, + }); + + expect(screen.getByText("Helper text")).toHaveClass( + "bx--form__helper-text--disabled", + ); + }); + + it("should handle inline helper text", () => { + render(TextInput, { + props: { + inline: true, + helperText: "Helper text", + }, + }); + + expect(screen.getByText("Helper text")).toHaveClass( + "bx--form__helper-text--inline", + ); + }); +}); diff --git a/tests/TextInput/TextInputCustom.test.svelte b/tests/TextInput/TextInputCustom.test.svelte new file mode 100644 index 00000000..2eea26dc --- /dev/null +++ b/tests/TextInput/TextInputCustom.test.svelte @@ -0,0 +1,7 @@ + + + + Custom Label Text + diff --git a/tests/Theme/Theme.test.svelte b/tests/Theme/Theme.test.svelte new file mode 100644 index 00000000..1fadc6b3 --- /dev/null +++ b/tests/Theme/Theme.test.svelte @@ -0,0 +1,23 @@ + + + + +
+ { + console.log("update", detail); + }} + > + + +
diff --git a/tests/Theme/Theme.test.ts b/tests/Theme/Theme.test.ts new file mode 100644 index 00000000..68cc09ba --- /dev/null +++ b/tests/Theme/Theme.test.ts @@ -0,0 +1,186 @@ +import { render, screen } from "@testing-library/svelte"; +import { tick } from "svelte"; +import { user } from "../setup-tests"; +import Theme from "./Theme.test.svelte"; +import ThemeSelect from "./ThemeSelect.test.svelte"; +import ThemeSelectCustom from "./ThemeSelectCustom.test.svelte"; +import ThemeToggle from "./ThemeToggle.test.svelte"; +import ThemeToggleCustom from "./ThemeToggleCustom.test.svelte"; + +describe("Theme", () => { + let documentMock: { + setAttribute: ReturnType; + style: { setProperty: ReturnType }; + }; + let consoleLog: ReturnType; + let localStorageMock: Record; + let originalLocalStorage: Storage; + + beforeEach(() => { + documentMock = { + setAttribute: vi.spyOn(document.documentElement, "setAttribute"), + style: { + setProperty: vi.spyOn(document.documentElement.style, "setProperty"), + }, + }; + consoleLog = vi.spyOn(console, "log"); + originalLocalStorage = global.localStorage; + localStorageMock = {}; + + global.localStorage = { + getItem: vi.fn((key) => localStorageMock[key] || null), + setItem: vi.fn((key, value) => { + localStorageMock[key] = value; + }), + removeItem: vi.fn((key) => { + delete localStorageMock[key]; + }), + clear: vi.fn(() => { + localStorageMock = {}; + }), + length: 0, + key: vi.fn(), + }; + }); + + afterEach(() => { + vi.restoreAllMocks(); + global.localStorage = originalLocalStorage; + localStorage.clear(); + localStorageMock = {}; + }); + + it("should set default theme to white", () => { + render(Theme); + expect(documentMock.setAttribute).toHaveBeenCalledWith("theme", "white"); + }); + + it("should update theme attribute when theme changes", async () => { + const { component } = render(Theme); + + component.$set({ theme: "g100" }); + await tick(); + + expect(documentMock.setAttribute).toHaveBeenCalledWith("theme", "g100"); + expect(consoleLog).toHaveBeenCalledWith("update", { theme: "g100" }); + }); + + it("should apply custom tokens", async () => { + const tokens = { + "interactive-01": "#ff0000", + "ui-background": "#ffffff", + }; + + render(Theme, { props: { tokens } }); + await tick(); + + expect(documentMock.style.setProperty).toHaveBeenCalledWith( + "--cds-interactive-01", + "#ff0000", + ); + expect(documentMock.style.setProperty).toHaveBeenCalledWith( + "--cds-ui-background", + "#ffffff", + ); + }); + + it("should persist theme in localStorage when persist is true", async () => { + render(Theme, { props: { persist: true } }); + await tick(); + + expect(localStorage.setItem).toHaveBeenCalledWith("theme", "white"); + }); + + it("should load persisted theme from localStorage", async () => { + localStorageMock["theme"] = "g90"; + + render(Theme, { props: { persist: true } }); + await tick(); + + expect(documentMock.setAttribute).toHaveBeenCalledWith("theme", "g90"); + }); + + it("should warn on invalid theme", async () => { + const consoleWarn = vi.spyOn(console, "warn"); + const { component } = render(Theme); + + // @ts-ignore - Testing invalid theme + component.$set({ theme: "invalid" }); + await tick(); + + expect(consoleWarn).toHaveBeenCalledWith( + expect.stringContaining('invalid theme "invalid"'), + ); + }); + + it("should render toggle when render prop is set to toggle", async () => { + render(ThemeToggle); + + const toggle = screen.getByLabelText("Dark mode"); + expect(toggle).toBeInTheDocument(); + expect(toggle).toHaveAttribute("type", "checkbox"); + + await user.click(toggle); + expect(consoleLog).toHaveBeenCalledWith("update", { theme: "g100" }); + + await user.click(toggle); + expect(consoleLog).toHaveBeenCalledWith("update", { theme: "white" }); + }); + + it("should render custom toggle when render prop is set to toggle and custom toggle options are provided", async () => { + render(ThemeToggleCustom); + + const checkbox = screen.getByRole("switch"); + assert(checkbox); + expect(checkbox).not.toBeChecked(); + + const toggle = screen.getAllByText("Enable dark mode")[0]; + expect(toggle).toBeInTheDocument(); + + await user.click(toggle); + expect(consoleLog).toHaveBeenCalledWith("update", { theme: "g80" }); + expect(checkbox).toBeChecked(); + + await user.click(toggle); + expect(consoleLog).toHaveBeenCalledWith("update", { theme: "g10" }); + expect(checkbox).not.toBeChecked(); + }); + + it("should render select when render prop is set to select", async () => { + render(ThemeSelect); + + const select = screen.getByLabelText("Themes"); + expect(select).toBeInTheDocument(); + expect(select).toHaveTextContent("White"); + expect(select).toHaveValue("white"); + + await user.selectOptions(select, "g100"); + expect(select).toHaveTextContent("Gray 100"); + expect(select).toHaveValue("g100"); + expect(consoleLog).toHaveBeenCalledWith("update", { theme: "g100" }); + + await user.selectOptions(select, "white"); + expect(select).toHaveTextContent("White"); + expect(select).toHaveValue("white"); + expect(consoleLog).toHaveBeenCalledWith("update", { theme: "white" }); + }); + + it("should render custom select when render prop is set to select and custom select options are provided", async () => { + render(ThemeSelectCustom); + + const select = screen.getByLabelText("Select a theme"); + expect(select).toBeInTheDocument(); + expect(select).toHaveTextContent("White"); + expect(select).toHaveValue("white"); + + await user.selectOptions(select, "g100"); + expect(select).toHaveTextContent("Gray 100"); + expect(select).toHaveValue("g100"); + expect(consoleLog).toHaveBeenCalledWith("update", { theme: "g100" }); + + await user.selectOptions(select, "white"); + expect(select).toHaveTextContent("White"); + expect(select).toHaveValue("white"); + expect(consoleLog).toHaveBeenCalledWith("update", { theme: "white" }); + }); +}); diff --git a/tests/Theme/ThemeSelect.test.svelte b/tests/Theme/ThemeSelect.test.svelte new file mode 100644 index 00000000..3648b3ef --- /dev/null +++ b/tests/Theme/ThemeSelect.test.svelte @@ -0,0 +1,10 @@ + + + { + console.log("update", detail); + }} +/> diff --git a/tests/Theme/ThemeSelectCustom.test.svelte b/tests/Theme/ThemeSelectCustom.test.svelte new file mode 100644 index 00000000..93fbfea3 --- /dev/null +++ b/tests/Theme/ThemeSelectCustom.test.svelte @@ -0,0 +1,15 @@ + + + { + console.log("update", detail); + }} +/> diff --git a/tests/Theme/ThemeToggle.test.svelte b/tests/Theme/ThemeToggle.test.svelte new file mode 100644 index 00000000..6512a23d --- /dev/null +++ b/tests/Theme/ThemeToggle.test.svelte @@ -0,0 +1,10 @@ + + + { + console.log("update", detail); + }} +/> diff --git a/tests/Theme/ThemeToggleCustom.test.svelte b/tests/Theme/ThemeToggleCustom.test.svelte new file mode 100644 index 00000000..c3f8a01e --- /dev/null +++ b/tests/Theme/ThemeToggleCustom.test.svelte @@ -0,0 +1,17 @@ + + + { + console.log("update", detail); + }} +/> diff --git a/tests/Tile.test.svelte b/tests/Tile.test.svelte deleted file mode 100644 index c4c3f567..00000000 --- a/tests/Tile.test.svelte +++ /dev/null @@ -1,7 +0,0 @@ - - -Content - -Content diff --git a/tests/Tile/ClickableTile.test.svelte b/tests/Tile/ClickableTile.test.svelte new file mode 100644 index 00000000..11f69c1e --- /dev/null +++ b/tests/Tile/ClickableTile.test.svelte @@ -0,0 +1,32 @@ + + + + Link only + + + + Link with light variant + + + { + console.log("clicked"); + }} +> + Click me + + +Clicked + + + Disabled tile + diff --git a/tests/Tile/ClickableTile.test.ts b/tests/Tile/ClickableTile.test.ts new file mode 100644 index 00000000..05e0d461 --- /dev/null +++ b/tests/Tile/ClickableTile.test.ts @@ -0,0 +1,53 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import ClickableTile from "./ClickableTile.test.svelte"; + +describe("ClickableTile", () => { + it("should render with href", () => { + render(ClickableTile); + + const tile = screen.getByText("Link only"); + expect(tile).toHaveAttribute("href", "https://www.carbondesignsystem.com/"); + expect(tile).toHaveClass("bx--tile", "bx--tile--clickable"); + }); + + it("should render light variant with other attributes", () => { + render(ClickableTile); + + const tile = screen.getByText("Link with light variant"); + expect(tile).toHaveClass("bx--tile--light"); + expect(tile).toHaveAttribute("target", "_blank"); + expect(tile).toHaveAttribute("title", ""); + }); + + it("should toggle clicked state on click", async () => { + render(ClickableTile); + + const tile = screen.getByTestId("click-test"); + expect(tile).not.toHaveClass("bx--tile--is-clicked"); + + await user.click(tile); + expect(tile).toHaveClass("bx--tile--is-clicked"); + + await user.click(tile); + expect(tile).not.toHaveClass("bx--tile--is-clicked"); + }); + + it("should have clicked state", async () => { + render(ClickableTile); + + const tile = screen.getByText("Clicked"); + expect(tile).toHaveClass("bx--tile--is-clicked"); + + await user.type(tile, "{Space}"); + expect(tile).not.toHaveClass("bx--tile--is-clicked"); + }); + + it("should respect disabled state", async () => { + render(ClickableTile); + + const disabledTile = screen.getByTestId("disabled-test"); + expect(disabledTile).toHaveAttribute("aria-disabled", "true"); + expect(disabledTile).toHaveClass("bx--tile--clickable"); + }); +}); diff --git a/tests/Tile/SelectableTile.test.svelte b/tests/Tile/SelectableTile.test.svelte new file mode 100644 index 00000000..14da7f0e --- /dev/null +++ b/tests/Tile/SelectableTile.test.svelte @@ -0,0 +1,30 @@ + + + { + console.log("select", e.detail); + }} + on:deselect={(e) => { + console.log("deselect", e.detail); + }} +> + Test Tile Content + diff --git a/tests/Tile/SelectableTile.test.ts b/tests/Tile/SelectableTile.test.ts new file mode 100644 index 00000000..377e0cfb --- /dev/null +++ b/tests/Tile/SelectableTile.test.ts @@ -0,0 +1,100 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import SelectableTileTest from "./SelectableTile.test.svelte"; + +describe("SelectableTile", () => { + it("renders with default props", () => { + render(SelectableTileTest); + const tile = screen.getByTestId("selectable-tile"); + expect(tile).toHaveClass("bx--tile"); + expect(tile).toHaveClass("bx--tile--selectable"); + }); + + it("renders with selected state", () => { + render(SelectableTileTest, { selected: true }); + const tile = screen.getByTestId("selectable-tile"); + expect(tile).toHaveClass("bx--tile--is-selected"); + }); + + it("renders with light variant", () => { + render(SelectableTileTest, { light: true }); + const tile = screen.getByTestId("selectable-tile"); + expect(tile).toHaveClass("bx--tile--light"); + }); + + it("renders with disabled state", () => { + render(SelectableTileTest, { disabled: true }); + const tile = screen.getByTestId("selectable-tile"); + expect(tile).toHaveClass("bx--tile--disabled"); + }); + + it("renders with custom title and value", () => { + render(SelectableTileTest, { + title: "Custom Title", + value: "custom-value", + }); + const input = screen.getByRole("checkbox"); + expect(input).toHaveAttribute("title", "Custom Title"); + expect(input).toHaveAttribute("value", "custom-value"); + }); + + it("renders with custom name and icon description", () => { + render(SelectableTileTest, { + name: "custom-name", + iconDescription: "Custom checkmark", + }); + + const input = screen.getByRole("checkbox"); + expect(input).toHaveAttribute("name", "custom-name"); + + const icon = screen.getByTestId("selectable-tile").querySelector("svg"); + expect(icon).toHaveAttribute("aria-label", "Custom checkmark"); + }); + + describe("interaction", () => { + it("handles click selection", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(SelectableTileTest); + + const tile = screen.getByTestId("selectable-tile"); + await user.click(tile); + expect(consoleLog).toHaveBeenCalledWith("select", expect.any(String)); + }); + + it("handles click deselection", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(SelectableTileTest, { selected: true }); + + const tile = screen.getByTestId("selectable-tile"); + await user.click(tile); + expect(consoleLog).toHaveBeenCalledWith("deselect", expect.any(String)); + }); + + it("prevents selection when disabled", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(SelectableTileTest, { disabled: true }); + + const tile = screen.getByTestId("selectable-tile"); + await user.click(tile); + expect(consoleLog).not.toHaveBeenCalled(); + }); + + it("handles keyboard selection", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(SelectableTileTest); + + await user.keyboard("{Tab}"); + await user.keyboard("{Enter}"); + expect(consoleLog).toHaveBeenCalledWith("select", expect.any(String)); + }); + + it("handles keyboard deselection", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(SelectableTileTest, { selected: true }); + + await user.keyboard("{Tab}"); + await user.keyboard("{Enter}"); + expect(consoleLog).toHaveBeenCalledWith("deselect", expect.any(String)); + }); + }); +}); diff --git a/tests/Tile/Tile.test.svelte b/tests/Tile/Tile.test.svelte new file mode 100644 index 00000000..91a07708 --- /dev/null +++ b/tests/Tile/Tile.test.svelte @@ -0,0 +1,20 @@ + + +Default tile + +Light variant + + { + console.log("clicked"); + }} +> + Clickable tile + + + + Custom attributes + diff --git a/tests/Tile/Tile.test.ts b/tests/Tile/Tile.test.ts new file mode 100644 index 00000000..5e596df7 --- /dev/null +++ b/tests/Tile/Tile.test.ts @@ -0,0 +1,41 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import Tile from "./Tile.test.svelte"; + +describe("Tile", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it("should render with default class", () => { + render(Tile); + + const tile = screen.getByText("Default tile"); + expect(tile).toHaveClass("bx--tile"); + }); + + it("should render light variant", () => { + render(Tile); + + const lightTile = screen.getByText("Light variant"); + expect(lightTile).toHaveClass("bx--tile", "bx--tile--light"); + }); + + it("should handle click events", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Tile); + + const tile = screen.getByTestId("click-test"); + await user.click(tile); + expect(consoleLog).toHaveBeenCalledWith("clicked"); + expect(consoleLog).toHaveBeenCalledTimes(1); + }); + + it("should pass through additional attributes", () => { + render(Tile); + + const tile = screen.getByTestId("attr-test"); + expect(tile).toHaveAttribute("title", "Custom title"); + expect(tile).toHaveClass("custom-class"); + }); +}); diff --git a/tests/TimePicker.test.svelte b/tests/TimePicker.test.svelte deleted file mode 100644 index 2bbe3ec9..00000000 --- a/tests/TimePicker.test.svelte +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/tests/TimePicker/TimePicker.test.svelte b/tests/TimePicker/TimePicker.test.svelte new file mode 100644 index 00000000..e2b06eb3 --- /dev/null +++ b/tests/TimePicker/TimePicker.test.svelte @@ -0,0 +1,68 @@ + + + { + console.log("change"); + }} + on:input={() => { + console.log("input"); + }} + on:keydown={() => { + console.log("keydown"); + }} + on:keyup={() => { + console.log("keyup"); + }} + on:focus={() => { + console.log("focus"); + }} + on:blur={() => { + console.log("blur"); + }} +> + + + + + + + + + diff --git a/tests/TimePicker/TimePicker.test.ts b/tests/TimePicker/TimePicker.test.ts new file mode 100644 index 00000000..43cdbcdf --- /dev/null +++ b/tests/TimePicker/TimePicker.test.ts @@ -0,0 +1,182 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import TimePicker from "./TimePicker.test.svelte"; +import TimePickerCustom from "./TimePickerCustom.test.svelte"; + +describe("TimePicker", () => { + it("should render with default props", () => { + render(TimePicker); + + const input = screen.getByRole("textbox"); + expect(input).toBeInTheDocument(); + expect(input).toHaveAttribute("name", "test-time"); + expect(input).toHaveAttribute("placeholder", "hh:mm"); + expect(input).toHaveAttribute("pattern", "(1[012]|[1-9]):[0-5][0-9](\\s)?"); + expect(input).toHaveAttribute("maxlength", "5"); + expect(screen.getByText("Time")).toBeInTheDocument(); + expect(screen.getByText("AM")).toBeInTheDocument(); + expect(screen.getByText("PM")).toBeInTheDocument(); + expect(screen.getByText("PDT")).toBeInTheDocument(); + expect(screen.getByText("GMT")).toBeInTheDocument(); + }); + + it("should handle different sizes", () => { + (["sm", "xl"] as const).forEach((size) => { + const { container } = render(TimePicker, { + props: { size }, + }); + + expect(container.querySelector(".bx--time-picker")).toHaveClass( + `bx--time-picker--${size}`, + ); + container.remove(); + }); + }); + + it("should handle light variant", () => { + render(TimePicker, { props: { light: true } }); + + const timePicker = screen.getByRole("textbox").closest(".bx--time-picker"); + expect(timePicker).toHaveClass("bx--time-picker--light"); + }); + + it("should handle disabled state", () => { + render(TimePicker, { props: { disabled: true } }); + + const input = screen.getByRole("textbox"); + expect(input).toBeDisabled(); + expect(screen.getByText("Time")).toHaveClass("bx--label--disabled"); + }); + + it("should handle invalid state", () => { + render(TimePicker, { + props: { invalid: true, invalidText: "Invalid time" }, + }); + + const input = screen.getByRole("textbox"); + expect(input).toHaveClass("bx--text-input--invalid"); + expect(input).toHaveAttribute("data-invalid"); + expect(screen.getByText("Invalid time")).toHaveClass( + "bx--form-requirement", + ); + }); + + it("should handle hidden label", () => { + render(TimePicker, { props: { hideLabel: true } }); + + expect(screen.getByText("Time")).toHaveClass("bx--visually-hidden"); + }); + + it("should handle custom id", () => { + render(TimePicker, { props: { id: "custom-id" } }); + + const input = screen.getByRole("textbox"); + expect(input).toHaveAttribute("id", "custom-id"); + expect(screen.getByText("Time")).toHaveAttribute("for", "custom-id"); + }); + + it("should handle custom name", () => { + render(TimePicker, { props: { name: "custom-name" } }); + + expect(screen.getByRole("textbox")).toHaveAttribute("name", "custom-name"); + }); + + it("should handle custom placeholder", () => { + render(TimePicker, { props: { placeholder: "Enter time" } }); + + expect(screen.getByRole("textbox")).toHaveAttribute( + "placeholder", + "Enter time", + ); + }); + + it("should handle custom pattern", () => { + render(TimePicker, { props: { pattern: "custom-pattern" } }); + + expect(screen.getByRole("textbox")).toHaveAttribute( + "pattern", + "custom-pattern", + ); + }); + + it("should handle custom maxlength", () => { + render(TimePicker, { props: { maxlength: 10 } }); + + expect(screen.getByRole("textbox")).toHaveAttribute("maxlength", "10"); + }); + + it("should handle value binding", async () => { + render(TimePicker); + + const input = screen.getByRole("textbox"); + await user.type(input, "10:30"); + expect(input).toHaveValue("10:30"); + }); + + it("should handle change event", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(TimePicker); + + const input = screen.getByRole("textbox"); + await user.type(input, "10:30"); + expect(consoleLog).toHaveBeenCalledWith("focus"); + expect(consoleLog).toHaveBeenCalledWith("input"); + await user.keyboard("{Enter}"); + expect(consoleLog).toHaveBeenCalledWith("keydown"); + expect(consoleLog).toHaveBeenCalledWith("input"); + + expect(input).toHaveValue("10:30"); + await user.keyboard("{Tab}"); + expect(consoleLog).toHaveBeenCalledWith("change"); + }); + + it("should handle focus and blur events", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(TimePicker); + + const input = screen.getByRole("textbox"); + await user.tab(); + expect(input).toHaveFocus(); + expect(consoleLog).toHaveBeenCalledWith("focus"); + + await user.tab(); + expect(input).not.toHaveFocus(); + expect(consoleLog).toHaveBeenCalledWith("blur"); + }); + + it("should handle disabled state with events", async () => { + render(TimePicker, { props: { disabled: true } }); + + const input = screen.getByRole("textbox"); + await user.type(input, "10:30"); + expect(input).toHaveValue(""); + }); + + it("should handle invalid state with helper text", () => { + render(TimePicker, { + props: { + invalid: true, + invalidText: "Invalid time", + }, + }); + + expect(screen.getByText("Invalid time")).toBeInTheDocument(); + }); + + it("should handle label text slot", () => { + render(TimePickerCustom); + + const label = screen.getByText("Custom Label Text"); + expect(label).toBeInTheDocument(); + expect(label.tagName).toBe("SPAN"); + }); + + it("should handle TimePickerSelect components", () => { + render(TimePicker); + + const selects = screen.getAllByRole("combobox"); + expect(selects).toHaveLength(2); + expect(selects[0]).toHaveValue("pm"); + expect(selects[1]).toHaveValue("pdt"); + }); +}); diff --git a/tests/TimePicker/TimePickerCustom.test.svelte b/tests/TimePicker/TimePickerCustom.test.svelte new file mode 100644 index 00000000..3e9c4867 --- /dev/null +++ b/tests/TimePicker/TimePickerCustom.test.svelte @@ -0,0 +1,19 @@ + + + + Custom Label Text + + + + + + + + + diff --git a/tests/ToastNotification.test.svelte b/tests/ToastNotification.test.svelte deleted file mode 100644 index de2c3176..00000000 --- a/tests/ToastNotification.test.svelte +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/tests/ToastNotification/ToastNotification.close.test.svelte b/tests/ToastNotification/ToastNotification.close.test.svelte new file mode 100644 index 00000000..28293b17 --- /dev/null +++ b/tests/ToastNotification/ToastNotification.close.test.svelte @@ -0,0 +1,13 @@ + + + { + e.preventDefault(); + console.log("close", e.detail); + }} +/> diff --git a/tests/ToastNotification/ToastNotification.test.svelte b/tests/ToastNotification/ToastNotification.test.svelte new file mode 100644 index 00000000..068e4cd2 --- /dev/null +++ b/tests/ToastNotification/ToastNotification.test.svelte @@ -0,0 +1,33 @@ + + + { + console.log("close", e.detail); + }} +/> diff --git a/tests/ToastNotification/ToastNotification.test.ts b/tests/ToastNotification/ToastNotification.test.ts new file mode 100644 index 00000000..2fdb8659 --- /dev/null +++ b/tests/ToastNotification/ToastNotification.test.ts @@ -0,0 +1,159 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import ToastNotification from "./ToastNotification.test.svelte"; +import ToastNotificationCustom from "./ToastNotificationCustom.test.svelte"; +import ToastNotificationClose from "./ToastNotification.close.test.svelte"; + +describe("ToastNotification", () => { + beforeEach(() => { + vi.restoreAllMocks(); + }); + + it("should render with default props", () => { + render(ToastNotification); + + expect(screen.getByRole("alert")).toHaveClass( + "bx--toast-notification--error", + ); + expect(screen.getByText("Error")).toBeInTheDocument(); + expect( + screen.getByText("An internal server error occurred."), + ).toBeInTheDocument(); + expect(screen.getByText("2024-03-21 12:00:00")).toBeInTheDocument(); + }); + + it("should handle different kinds", () => { + const kinds = [ + "error", + "info", + "info-square", + "success", + "warning", + "warning-alt", + ] as const; + + kinds.forEach((kind) => { + const { container } = render(ToastNotification, { + props: { kind }, + }); + + expect( + container.querySelector(`.bx--toast-notification--${kind}`), + ).toBeInTheDocument(); + container.remove(); + }); + }); + + it("should handle low contrast variant", () => { + render(ToastNotification, { + props: { lowContrast: true }, + }); + + expect(screen.getByRole("alert")).toHaveClass( + "bx--toast-notification--low-contrast", + ); + }); + + it("should handle close button click", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(ToastNotification); + + await user.click(screen.getByRole("button")); + + expect(consoleLog).toHaveBeenCalledWith("close", { timeout: false }); + expect(screen.queryByRole("alert")).not.toBeInTheDocument(); + }); + + it("should hide close button", () => { + render(ToastNotification, { + props: { hideCloseButton: true }, + }); + + expect( + screen.queryByLabelText("Close notification"), + ).not.toBeInTheDocument(); + }); + + it("should handle custom icon descriptions", () => { + render(ToastNotification, { + props: { + statusIconDescription: "Custom status", + closeButtonDescription: "Custom close", + }, + }); + + expect(screen.getByText("Custom status")).toBeInTheDocument(); + expect(screen.getByRole("button")).toHaveAttribute( + "aria-label", + "Custom close", + ); + }); + + it("should handle custom role", () => { + render(ToastNotification, { + props: { role: "status" }, + }); + + expect(screen.getByRole("status")).toBeInTheDocument(); + }); + + it("should handle timeout", async () => { + vi.useFakeTimers(); + const consoleLog = vi.spyOn(console, "log"); + + render(ToastNotification, { props: { timeout: 1000 } }); + + expect(screen.getByRole("alert")).toBeInTheDocument(); + + await vi.advanceTimersByTimeAsync(1000); + + expect(consoleLog).toHaveBeenCalledWith("close", { timeout: true }); + expect(screen.queryByRole("alert")).not.toBeInTheDocument(); + vi.useRealTimers(); + }); + + it("should handle custom slots", () => { + render(ToastNotificationCustom); + + const title = screen.getByText("Custom Title:"); + expect(title).not.toHaveClass("bx--toast-notification__title"); + expect(title.tagName).toBe("STRONG"); + + const subtitle = screen.getByText("Custom subtitle content."); + expect(subtitle).not.toHaveClass("bx--toast-notification__subtitle"); + expect(subtitle.tagName).toBe("STRONG"); + + const caption = screen.getByText("Custom caption content."); + expect(caption).not.toHaveClass("bx--toast-notification__caption"); + expect(caption.tagName).toBe("STRONG"); + }); + + it("should handle full width", () => { + render(ToastNotification, { props: { fullWidth: true } }); + + const notification = screen.getByRole("alert"); + expect(notification).toHaveStyle({ width: "100%" }); + }); + + it("should cleanup timeout on unmount", () => { + vi.useFakeTimers(); + const clearTimeoutSpy = vi.spyOn(window, "clearTimeout"); + + const { unmount } = render(ToastNotification, { + props: { timeout: 1000 }, + }); + + unmount(); + expect(clearTimeoutSpy).toHaveBeenCalled(); + vi.useRealTimers(); + }); + + it("should prevent default close behavior", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(ToastNotificationClose); + + await user.click(screen.getByRole("button")); + expect(consoleLog).toHaveBeenCalledWith("close", { timeout: false }); + expect(screen.getByRole("alert")).toBeInTheDocument(); + }); +}); diff --git a/tests/ToastNotification/ToastNotificationCustom.test.svelte b/tests/ToastNotification/ToastNotificationCustom.test.svelte new file mode 100644 index 00000000..9b2b2436 --- /dev/null +++ b/tests/ToastNotification/ToastNotificationCustom.test.svelte @@ -0,0 +1,9 @@ + + + + Custom Title: + Custom subtitle content. + Custom caption content. + diff --git a/tests/Toggle.test.svelte b/tests/Toggle.test.svelte deleted file mode 100644 index bff61a99..00000000 --- a/tests/Toggle.test.svelte +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - diff --git a/tests/Toggle/Toggle.test.svelte b/tests/Toggle/Toggle.test.svelte new file mode 100644 index 00000000..ad178d84 --- /dev/null +++ b/tests/Toggle/Toggle.test.svelte @@ -0,0 +1,37 @@ + + + { + console.log("toggled:", e.detail.toggled); + }} +/> + + + + + + + + + + { + console.log("initial toggled:", e.detail.toggled); + }} +/> + + diff --git a/tests/Toggle/Toggle.test.ts b/tests/Toggle/Toggle.test.ts new file mode 100644 index 00000000..962c7ffd --- /dev/null +++ b/tests/Toggle/Toggle.test.ts @@ -0,0 +1,215 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import Toggle from "./Toggle.test.svelte"; + +describe("Toggle", () => { + const getToggle = (label: string) => + screen.getByRole("switch", { name: new RegExp(label, "i") }); + + it("renders and functions correctly", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Toggle); + + const toggle = getToggle("Default toggle"); + expect(toggle).not.toBeChecked(); + + await user.click(toggle); + expect(toggle).toBeChecked(); + expect(consoleLog).toHaveBeenCalledWith("toggled:", true); + + await user.click(toggle); + expect(toggle).not.toBeChecked(); + expect(consoleLog).toHaveBeenCalledWith("toggled:", false); + }); + + it("supports custom labels", () => { + render(Toggle); + + const toggle = getToggle("Custom labels"); + const label = toggle.closest(".bx--form-item"); + expect(label).not.toBeNull(); + + if (label) { + expect(label).toContainElement(screen.getByText("Inactive")); + expect(label).toContainElement(screen.getByText("Active")); + } + }); + + it("supports small size variant", () => { + render(Toggle); + + const toggle = getToggle("Small toggle"); + expect(toggle).toHaveClass("bx--toggle-input--small"); + }); + + it("supports disabled state", () => { + render(Toggle); + + const toggle = getToggle("Disabled toggle"); + expect(toggle).toBeDisabled(); + }); + + it("supports hidden label", () => { + render(Toggle); + + const toggle = getToggle("Hidden label toggle"); + const label = toggle.closest(".bx--form-item"); + expect(label).not.toBeNull(); + + if (label) { + const hiddenText = label.querySelector(".bx--visually-hidden"); + expect(hiddenText).toHaveClass("bx--visually-hidden"); + expect(toggle).toHaveAccessibleName("Hidden label toggle"); + } + }); + + it("handles keyboard interactions (Space)", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Toggle); + + const toggle = getToggle("Default toggle"); + toggle.focus(); + + await user.keyboard(" "); + expect(toggle).toBeChecked(); + expect(consoleLog).toHaveBeenCalledWith("toggled:", true); + + await user.keyboard(" "); + expect(toggle).not.toBeChecked(); + expect(consoleLog).toHaveBeenCalledWith("toggled:", false); + }); + + it("handles keyboard interactions (Enter)", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Toggle); + + const toggle = getToggle("Default toggle"); + toggle.focus(); + + await user.keyboard("{Enter}"); + expect(toggle).toBeChecked(); + expect(consoleLog).toHaveBeenCalledWith("toggled:", true); + + await user.keyboard("{Enter}"); + expect(toggle).not.toBeChecked(); + expect(consoleLog).toHaveBeenCalledWith("toggled:", false); + }); + + it("ignores other key presses", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Toggle); + + const toggle = getToggle("Default toggle"); + toggle.focus(); + + await user.keyboard("a"); + expect(toggle).not.toBeChecked(); + expect(consoleLog).not.toHaveBeenCalled(); + + await user.keyboard("Tab"); + expect(toggle).not.toBeChecked(); + expect(consoleLog).not.toHaveBeenCalled(); + }); + + it("supports custom name attribute", () => { + render(Toggle); + + const toggle = getToggle("Custom name toggle"); + expect(toggle).toHaveAttribute("name", "custom-name-toggle"); + }); + + it("prevents default on space and enter keys", async () => { + render(Toggle); + + const toggle = getToggle("Default toggle"); + toggle.focus(); + + const spaceEvent = new KeyboardEvent("keyup", { key: " " }); + const enterEvent = new KeyboardEvent("keyup", { key: "Enter" }); + + const spacePreventDefault = vi.spyOn(spaceEvent, "preventDefault"); + const enterPreventDefault = vi.spyOn(enterEvent, "preventDefault"); + + toggle.dispatchEvent(spaceEvent); + toggle.dispatchEvent(enterEvent); + + expect(spacePreventDefault).toHaveBeenCalled(); + expect(enterPreventDefault).toHaveBeenCalled(); + }); + + it("handles disabled state interactions", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Toggle); + + const toggle = getToggle("Disabled toggle"); + expect(toggle).toBeDisabled(); + + await user.click(toggle); + expect(toggle).not.toBeChecked(); + expect(consoleLog).not.toHaveBeenCalled(); + + toggle.focus(); + await user.keyboard(" "); + expect(toggle).not.toBeChecked(); + expect(consoleLog).not.toHaveBeenCalled(); + }); + + it("supports initial toggled state", () => { + render(Toggle); + + const defaultToggle = getToggle("Default toggle"); + expect(defaultToggle).not.toBeChecked(); + + const initialToggle = getToggle("Initial toggled state"); + expect(initialToggle).toBeChecked(); + }); + + it("handles rapid clicking", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Toggle); + + const toggle = getToggle("Default toggle"); + + await user.click(toggle); + await user.click(toggle); + await user.click(toggle); + + expect(toggle).toBeChecked(); + expect(consoleLog).toHaveBeenCalledTimes(3); + }); + + it("visually hides label when hideLabel is true", () => { + render(Toggle); + + const label = screen.getByText("Hidden label toggle"); + expect(label).toHaveClass("bx--visually-hidden"); + }); + + it("handles aria-label fallback correctly", () => { + render(Toggle); + + // Test toggle without labelText but with aria-label. + const toggle = getToggle("Hidden label toggle"); + expect(toggle).toHaveAccessibleName("Hidden label toggle"); + + // Test toggle without labelText and without aria-label (should fallback to "Toggle"). + const defaultToggle = getToggle("Default toggle"); + expect(defaultToggle).toHaveAccessibleName("Default toggle"); + }); + + it("does not dispatch toggle event on mount", () => { + const consoleLog = vi.spyOn(console, "log"); + render(Toggle); + + expect(consoleLog).not.toHaveBeenCalled(); + expect(getToggle("Default toggle")).not.toBeChecked(); + }); + + it("does not dispatch toggle event on mount for initial toggled state", () => { + const consoleLog = vi.spyOn(console, "log"); + render(Toggle); + + expect(consoleLog).not.toHaveBeenCalled(); + expect(getToggle("Initial toggled state")).toBeChecked(); + }); +}); diff --git a/tests/ToggleSmall.test.svelte b/tests/ToggleSmall.test.svelte deleted file mode 100644 index 60ca04c4..00000000 --- a/tests/ToggleSmall.test.svelte +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - diff --git a/tests/Tooltip.test.svelte b/tests/Tooltip.test.svelte deleted file mode 100644 index 3da157da..00000000 --- a/tests/Tooltip.test.svelte +++ /dev/null @@ -1,52 +0,0 @@ - - - -

Resources are provisioned based on your account's organization.

-
- - -

Resources are provisioned based on your account's organization.

-
- - -

Top

-
- - -

Right

-
- - -

Bottom

-
- - -

Left

-
- - -

Resources are provisioned based on your account's organization.

- -
- -Learn more - - - - -

Resources are provisioned based on your account's organization.

-
- - -
-

Resources are provisioned based on your account's organization.

-
diff --git a/tests/Tooltip/Tooltip.test.ts b/tests/Tooltip/Tooltip.test.ts new file mode 100644 index 00000000..8dde83e3 --- /dev/null +++ b/tests/Tooltip/Tooltip.test.ts @@ -0,0 +1,168 @@ +import { render, screen, fireEvent } from "@testing-library/svelte"; +import TooltipDefault from "./TooltipDefault.test.svelte"; +import TooltipHideIcon from "./TooltipHideIcon.test.svelte"; +import TooltipOpen from "./TooltipOpen.test.svelte"; +import TooltipCustomContent from "./TooltipCustomContent.test.svelte"; +import TooltipCustomIcon from "./TooltipCustomIcon.test.svelte"; +import TooltipDirections from "./TooltipDirections.test.svelte"; +import TooltipAlignments from "./TooltipAlignments.test.svelte"; +import TooltipEvents from "./TooltipEvents.test.svelte"; +import { user } from "../setup-tests"; + +describe("Tooltip", () => { + test("should render with default props", () => { + const { container } = render(TooltipDefault); + expect(container.querySelector(".bx--tooltip__label")).toBeInTheDocument(); + expect( + container.querySelector(".bx--tooltip__trigger"), + ).toBeInTheDocument(); + }); + + test("should hide icon when hideIcon is true", async () => { + const { container } = render(TooltipHideIcon); + + expect( + container.querySelector(".bx--tooltip__trigger"), + ).not.toBeInTheDocument(); + expect(screen.getByText("Tooltip trigger")).toBeInTheDocument(); + await user.click(screen.getByText("Tooltip trigger")); + expect( + screen.getByText("This tooltip has its icon hidden"), + ).toBeInTheDocument(); + }); + + test("should show tooltip when open is true", () => { + const { container } = render(TooltipOpen); + + expect(container.querySelector(".bx--tooltip")).toBeInTheDocument(); + expect(container.querySelector(".bx--tooltip--shown")).toBeInTheDocument(); + expect( + screen.getByText("This tooltip is initially open"), + ).toBeInTheDocument(); + }); + + test("should open tooltip on focus", async () => { + const { container } = render(TooltipDefault); + + const trigger = container.querySelector(".bx--tooltip__trigger"); + assert(trigger); + + await fireEvent.focus(trigger); + expect(container.querySelector(".bx--tooltip")).toBeInTheDocument(); + expect(container.querySelector(".bx--tooltip--shown")).toBeInTheDocument(); + }); + + test("should close tooltip on Escape key", async () => { + const { container } = render(TooltipOpen); + + expect(container.querySelector(".bx--tooltip")).toBeInTheDocument(); + + const tooltip = container.querySelector(".bx--tooltip"); + assert(tooltip); + + await fireEvent.keyDown(tooltip, { key: "Escape" }); + expect(container.querySelector(".bx--tooltip")).not.toBeInTheDocument(); + }); + + test("should toggle tooltip on mousedown", async () => { + const { container } = render(TooltipDefault); + + const trigger = container.querySelector(".bx--tooltip__trigger"); + assert(trigger); + + await user.click(trigger); + expect(container.querySelector(".bx--tooltip")).toBeInTheDocument(); + + await user.click(trigger); + expect(container.querySelector(".bx--tooltip")).not.toBeInTheDocument(); + }); + + test("should render custom slot content", () => { + render(TooltipCustomContent); + + expect(screen.getByTestId("tooltip-content")).toBeInTheDocument(); + expect(screen.getByText("Custom tooltip content")).toBeInTheDocument(); + }); + + test("should render custom icon via slot", async () => { + render(TooltipCustomIcon); + + expect(screen.getByTestId("custom-icon")).toBeInTheDocument(); + expect(screen.getByText("🔍")).toBeInTheDocument(); + + await user.click(screen.getByTestId("custom-icon")); + expect(screen.getByText("Custom icon tooltip")).toBeInTheDocument(); + }); + + test("should apply correct direction classes", () => { + const { container } = render(TooltipDirections); + + const tooltips = container.querySelectorAll(".bx--tooltip"); + + expect(tooltips.length).toBe(4); + + expect(container.querySelector(".bx--tooltip--top")).toBeInTheDocument(); + expect(container.querySelector(".bx--tooltip--right")).toBeInTheDocument(); + expect(container.querySelector(".bx--tooltip--bottom")).toBeInTheDocument(); + expect(container.querySelector(".bx--tooltip--left")).toBeInTheDocument(); + + expect(screen.getByText("Tooltip with top direction")).toBeInTheDocument(); + expect( + screen.getByText("Tooltip with right direction"), + ).toBeInTheDocument(); + expect( + screen.getByText("Tooltip with bottom direction"), + ).toBeInTheDocument(); + expect(screen.getByText("Tooltip with left direction")).toBeInTheDocument(); + }); + + test("should apply correct alignment classes", () => { + const { container } = render(TooltipAlignments); + + const tooltips = container.querySelectorAll(".bx--tooltip"); + expect(tooltips.length).toBe(3); + + expect( + container.querySelector(".bx--tooltip--align-start"), + ).toBeInTheDocument(); + expect( + container.querySelector(".bx--tooltip--align-center"), + ).toBeInTheDocument(); + expect( + container.querySelector(".bx--tooltip--align-end"), + ).toBeInTheDocument(); + + expect( + screen.getByText("Tooltip with start alignment"), + ).toBeInTheDocument(); + expect( + screen.getByText("Tooltip with center alignment"), + ).toBeInTheDocument(); + expect(screen.getByText("Tooltip with end alignment")).toBeInTheDocument(); + }); + + test("should dispatch events when tooltip opens and closes", async () => { + const { container } = render(TooltipEvents); + + expect(screen.getByText("Open events: 0")).toBeInTheDocument(); + expect(screen.getByText("Close events: 0")).toBeInTheDocument(); + + const trigger = container.querySelector(".bx--tooltip__trigger"); + assert(trigger); + + await user.click(trigger); + expect(screen.getByText("Open events: 1")).toBeInTheDocument(); + + await user.keyboard("{Escape}"); + expect(screen.getByText("Close events: 1")).toBeInTheDocument(); + }); + + test("should close tooltip when clicking outside", async () => { + const { container } = render(TooltipOpen); + + expect(container.querySelector(".bx--tooltip")).toBeInTheDocument(); + + await user.click(document.body); + expect(container.querySelector(".bx--tooltip")).not.toBeInTheDocument(); + }); +}); diff --git a/tests/Tooltip/TooltipAlignments.test.svelte b/tests/Tooltip/TooltipAlignments.test.svelte new file mode 100644 index 00000000..73b170e7 --- /dev/null +++ b/tests/Tooltip/TooltipAlignments.test.svelte @@ -0,0 +1,15 @@ + + +
+ {#each alignments as align} +
+ + Tooltip with {align} alignment + +
+ {/each} +
diff --git a/tests/Tooltip/TooltipCustomContent.test.svelte b/tests/Tooltip/TooltipCustomContent.test.svelte new file mode 100644 index 00000000..837681e0 --- /dev/null +++ b/tests/Tooltip/TooltipCustomContent.test.svelte @@ -0,0 +1,7 @@ + + + +

Custom tooltip content

+
diff --git a/tests/Tooltip/TooltipCustomIcon.test.svelte b/tests/Tooltip/TooltipCustomIcon.test.svelte new file mode 100644 index 00000000..3546ac83 --- /dev/null +++ b/tests/Tooltip/TooltipCustomIcon.test.svelte @@ -0,0 +1,8 @@ + + + +
🔍
+ Custom icon tooltip +
diff --git a/tests/Tooltip/TooltipDefault.test.svelte b/tests/Tooltip/TooltipDefault.test.svelte new file mode 100644 index 00000000..af5a5827 --- /dev/null +++ b/tests/Tooltip/TooltipDefault.test.svelte @@ -0,0 +1,5 @@ + + + diff --git a/tests/Tooltip/TooltipDirections.test.svelte b/tests/Tooltip/TooltipDirections.test.svelte new file mode 100644 index 00000000..acfe4a26 --- /dev/null +++ b/tests/Tooltip/TooltipDirections.test.svelte @@ -0,0 +1,15 @@ + + +
+ {#each directions as direction} +
+ + Tooltip with {direction} direction + +
+ {/each} +
diff --git a/tests/Tooltip/TooltipEvents.test.svelte b/tests/Tooltip/TooltipEvents.test.svelte new file mode 100644 index 00000000..1d7e6fae --- /dev/null +++ b/tests/Tooltip/TooltipEvents.test.svelte @@ -0,0 +1,27 @@ + + +
+

Open events: {openCount}

+

Close events: {closeCount}

+ + + Interact with this tooltip to trigger events + +
diff --git a/tests/Tooltip/TooltipHideIcon.test.svelte b/tests/Tooltip/TooltipHideIcon.test.svelte new file mode 100644 index 00000000..f6716d31 --- /dev/null +++ b/tests/Tooltip/TooltipHideIcon.test.svelte @@ -0,0 +1,11 @@ + + + + This tooltip has its icon hidden + diff --git a/tests/Tooltip/TooltipOpen.test.svelte b/tests/Tooltip/TooltipOpen.test.svelte new file mode 100644 index 00000000..0468808e --- /dev/null +++ b/tests/Tooltip/TooltipOpen.test.svelte @@ -0,0 +1,7 @@ + + + + This tooltip is initially open + diff --git a/tests/TooltipDefinition.test.svelte b/tests/TooltipDefinition.test.svelte deleted file mode 100644 index dc942869..00000000 --- a/tests/TooltipDefinition.test.svelte +++ /dev/null @@ -1,24 +0,0 @@ - - - - Armonk - - - - Armonk - - - - Armonk - - IBM Corporate Headquarters is based in Armonk, New York. - - diff --git a/tests/TooltipDefinition/TooltipDefinition.test.svelte b/tests/TooltipDefinition/TooltipDefinition.test.svelte new file mode 100644 index 00000000..ce308884 --- /dev/null +++ b/tests/TooltipDefinition/TooltipDefinition.test.svelte @@ -0,0 +1,26 @@ + + + { + console.log("open"); + }} + on:close={() => { + console.log("close"); + }} +> + {triggerContent} + diff --git a/tests/TooltipDefinition/TooltipDefinition.test.ts b/tests/TooltipDefinition/TooltipDefinition.test.ts new file mode 100644 index 00000000..0250f0cd --- /dev/null +++ b/tests/TooltipDefinition/TooltipDefinition.test.ts @@ -0,0 +1,158 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import TooltipDefinition from "./TooltipDefinition.test.svelte"; + +describe("TooltipDefinition", () => { + let consoleLog: ReturnType; + + beforeEach(() => { + consoleLog = vi.spyOn(console, "log"); + }); + + afterEach(() => { + vi.restoreAllMocks(); + }); + + it("should render with default props", () => { + render(TooltipDefinition); + + expect(screen.getByText("Tooltip trigger")).toBeInTheDocument(); + expect(screen.getByText("Test tooltip text")).toBeInTheDocument(); + }); + + it("should show tooltip on hover", async () => { + render(TooltipDefinition); + + const trigger = screen.getByText("Tooltip trigger"); + await user.hover(trigger); + + expect(trigger).toHaveClass("bx--tooltip--visible"); + expect(consoleLog).toHaveBeenCalledWith("open"); + }); + + it("should hide tooltip on mouse leave", async () => { + render(TooltipDefinition); + + const trigger = screen.getByText("Tooltip trigger"); + await user.hover(trigger); + await user.unhover(trigger); + + expect(trigger).toHaveClass("bx--tooltip--hidden"); + expect(consoleLog).toHaveBeenCalledWith("close"); + }); + + it("should show tooltip on focus", async () => { + render(TooltipDefinition); + + const trigger = screen.getByText("Tooltip trigger"); + await user.tab(); + + expect(trigger).toHaveClass("bx--tooltip--visible"); + expect(consoleLog).toHaveBeenCalledWith("open"); + }); + + it("should hide tooltip on blur", async () => { + render(TooltipDefinition); + + const trigger = screen.getByText("Tooltip trigger"); + await user.tab(); + await user.tab(); + + expect(trigger).toHaveClass("bx--tooltip--hidden"); + expect(consoleLog).toHaveBeenCalledWith("close"); + }); + + it("should hide tooltip on Escape key", async () => { + render(TooltipDefinition); + + const trigger = screen.getByText("Tooltip trigger"); + await user.hover(trigger); + await user.keyboard("{Escape}"); + + expect(trigger).toHaveClass("bx--tooltip--hidden"); + expect(consoleLog).toHaveBeenCalledWith("close"); + }); + + it("should support top direction", () => { + render(TooltipDefinition, { + props: { direction: "top" }, + }); + + const trigger = screen.getByText("Tooltip trigger"); + expect(trigger).toHaveClass("bx--tooltip--top"); + }); + + it("should support bottom direction", () => { + render(TooltipDefinition, { + props: { direction: "bottom" }, + }); + + const trigger = screen.getByText("Tooltip trigger"); + expect(trigger).toHaveClass("bx--tooltip--bottom"); + }); + + it("should support start alignment", () => { + render(TooltipDefinition, { + props: { align: "start" }, + }); + + const trigger = screen.getByText("Tooltip trigger"); + expect(trigger).toHaveClass("bx--tooltip--align-start"); + }); + + it("should support center alignment", () => { + render(TooltipDefinition, { + props: { align: "center" }, + }); + + const trigger = screen.getByText("Tooltip trigger"); + expect(trigger).toHaveClass("bx--tooltip--align-center"); + }); + + it("should support end alignment", () => { + render(TooltipDefinition, { + props: { align: "end" }, + }); + + const trigger = screen.getByText("Tooltip trigger"); + expect(trigger).toHaveClass("bx--tooltip--align-end"); + }); + + it("should support custom trigger content", () => { + render(TooltipDefinition, { + props: { + triggerContent: "Custom trigger", + }, + }); + + expect(screen.getByText("Custom trigger")).toBeInTheDocument(); + }); + + it("should support controlled open state", () => { + render(TooltipDefinition, { + props: { open: true }, + }); + + const trigger = screen.getByText("Tooltip trigger"); + expect(trigger).toHaveClass("bx--tooltip--visible"); + }); + + it("should use provided id for tooltip", () => { + render(TooltipDefinition, { + props: { id: "custom-id" }, + }); + + const tooltip = screen.getByRole("tooltip"); + expect(tooltip).toHaveAttribute("id", "custom-id"); + }); + + it("should have correct ARIA attributes", () => { + render(TooltipDefinition); + + const trigger = screen.getByText("Tooltip trigger"); + const tooltip = screen.getByRole("tooltip"); + + expect(trigger).toHaveAttribute("aria-describedby", tooltip.id); + expect(tooltip).toHaveClass("bx--assistive-text"); + }); +}); diff --git a/tests/TooltipIcon.test.svelte b/tests/TooltipIcon.test.svelte deleted file mode 100644 index d5f08a12..00000000 --- a/tests/TooltipIcon.test.svelte +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - diff --git a/tests/TooltipIcon/TooltipIcon.test.svelte b/tests/TooltipIcon/TooltipIcon.test.svelte new file mode 100644 index 00000000..ca40f41d --- /dev/null +++ b/tests/TooltipIcon/TooltipIcon.test.svelte @@ -0,0 +1,28 @@ + + + + + + diff --git a/tests/TooltipIcon/TooltipIcon.test.ts b/tests/TooltipIcon/TooltipIcon.test.ts new file mode 100644 index 00000000..52e0668b --- /dev/null +++ b/tests/TooltipIcon/TooltipIcon.test.ts @@ -0,0 +1,120 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import TooltipIcon from "./TooltipIcon.test.svelte"; + +describe("TooltipIcon", () => { + it("should render with default props", () => { + render(TooltipIcon); + + expect(screen.getByText("Test tooltip text")).toBeInTheDocument(); + }); + + it("should show and hide the tooltip", async () => { + render(TooltipIcon); + + const trigger = screen.getByRole("button"); + await user.hover(trigger); + + expect(trigger).not.toHaveClass("bx--tooltip--hidden"); + + await user.keyboard("{Escape}"); + expect(screen.getByRole("button")).toHaveClass("bx--tooltip--hidden"); + }); + + it("should show tooltip on focus", async () => { + render(TooltipIcon); + + const trigger = screen.getByRole("button"); + await user.tab(); + + expect(trigger).not.toHaveClass("bx--tooltip--hidden"); + }); + + it("should hide tooltip on Escape key", async () => { + render(TooltipIcon); + + const trigger = screen.getByRole("button"); + await user.hover(trigger); + await user.keyboard("{Escape}"); + + expect(trigger).toHaveClass("bx--tooltip--hidden"); + }); + + describe("tooltip positioning", () => { + test.each([ + ["top", "bx--tooltip--top"], + ["right", "bx--tooltip--right"], + ["bottom", "bx--tooltip--bottom"], + ["left", "bx--tooltip--left"], + ] as const)("should support %s direction", (direction, expectedClass) => { + render(TooltipIcon, { + props: { direction }, + }); + + const trigger = screen.getByRole("button"); + expect(trigger).toHaveClass(expectedClass); + }); + + test.each([ + ["start", "bx--tooltip--align-start"], + ["center", "bx--tooltip--align-center"], + ["end", "bx--tooltip--align-end"], + ] as const)("should support %s alignment", (align, expectedClass) => { + render(TooltipIcon, { + props: { align }, + }); + + const trigger = screen.getByRole("button"); + expect(trigger).toHaveClass(expectedClass); + }); + }); + + it("should support disabled state", () => { + render(TooltipIcon, { + props: { disabled: true }, + }); + + const trigger = screen.getByRole("button"); + expect(trigger).toBeDisabled(); + expect(trigger).toHaveStyle({ cursor: "not-allowed" }); + expect(trigger).toHaveClass("bx--tooltip--hidden"); + }); + + it("should not show tooltip when disabled", async () => { + render(TooltipIcon, { + props: { disabled: true }, + }); + + const trigger = screen.getByRole("button"); + await user.hover(trigger); + + expect(trigger).toHaveClass("bx--tooltip--hidden"); + }); + + it("should support custom tooltip text", () => { + render(TooltipIcon, { + props: { tooltipText: "Custom tooltip" }, + }); + + expect(screen.getByText("Custom tooltip")).toBeInTheDocument(); + }); + + it("should use provided id for tooltip", () => { + render(TooltipIcon, { + props: { id: "custom-id" }, + }); + + const tooltip = screen.getByRole("button"); + expect(tooltip).toHaveAttribute("aria-describedby", "custom-id"); + }); + + it("should have correct ARIA attributes", () => { + render(TooltipIcon); + + const trigger = screen.getByRole("button"); + const tooltip = screen.getByText("Test tooltip text"); + + expect(trigger).toHaveAttribute("aria-describedby", "test-tooltip"); + expect(tooltip).toHaveClass("bx--assistive-text"); + }); +}); diff --git a/tests/TreeView/TreeView.hierarchy.test.svelte b/tests/TreeView/TreeView.hierarchy.test.svelte new file mode 100644 index 00000000..93229866 --- /dev/null +++ b/tests/TreeView/TreeView.hierarchy.test.svelte @@ -0,0 +1,61 @@ + + + console.log("select", detail)} + on:toggle={({ detail }) => console.log("toggle", detail)} + on:focus={({ detail }) => console.log("focus", detail)} + let:node +> + {node.text} + + + + diff --git a/tests/TreeView/TreeView.test.svelte b/tests/TreeView/TreeView.test.svelte new file mode 100644 index 00000000..38873616 --- /dev/null +++ b/tests/TreeView/TreeView.test.svelte @@ -0,0 +1,80 @@ + + + console.log("select", detail)} + on:toggle={({ detail }) => console.log("toggle", detail)} + on:focus={({ detail }) => console.log("focus", detail)} + let:node +> + {node.text} + + + + diff --git a/tests/TreeView/TreeView.test.ts b/tests/TreeView/TreeView.test.ts new file mode 100644 index 00000000..e52713e8 --- /dev/null +++ b/tests/TreeView/TreeView.test.ts @@ -0,0 +1,82 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import TreeViewHierarchy from "./TreeView.hierarchy.test.svelte"; +import TreeView from "./TreeView.test.svelte"; + +const testCases = [ + { name: "TreeView", component: TreeView }, + { name: "TreeView hierarchy", component: TreeViewHierarchy }, +]; + +describe.each(testCases)("$name", ({ component }) => { + const getItemByName = (name: RegExp) => { + return screen.getByRole("treeitem", { + name, + selected: false, + }); + }; + + const getSelectedItemByName = (name: RegExp) => { + return screen.getByRole("treeitem", { + name, + selected: true, + }); + }; + + const noExpandedItems = () => { + expect(screen.queryAllByRole("treeitem", { expanded: true })).toHaveLength( + 0, + ); + }; + + const getAllExpandedItems = () => { + return screen.getAllByRole("treeitem", { expanded: true }); + }; + + it("can select a node", async () => { + const consoleLog = vi.spyOn(console, "log"); + + render(component); + + const firstItem = getItemByName(/AI \/ Machine learning/); + expect(firstItem).toBeInTheDocument(); + + await user.click(firstItem); + expect(getSelectedItemByName(/AI \/ Machine learning/)).toBeInTheDocument(); + expect(consoleLog).toBeCalledWith("selectedIds", [0]); + expect(consoleLog).toBeCalledWith("select", { + disabled: false, + expanded: false, + id: 0, + leaf: true, + selected: false, + text: "AI / Machine learning", + }); + }); + + it("can expand all nodes", async () => { + render(component); + + noExpandedItems(); + + const expandAllButton = screen.getByText("Expand all"); + await user.click(expandAllButton); + + expect(getAllExpandedItems()).toHaveLength(5); + }); + + it("can expand some nodes", async () => { + render(component); + + noExpandedItems(); + + const expandSomeNodesButton = screen.getByText("Expand some nodes"); + await user.click(expandSomeNodesButton); + + expect(getAllExpandedItems()).toHaveLength(2); + + expect( + screen.getByText("IBM Analytics Engine").parentNode?.parentNode, + ).toHaveAttribute("aria-expanded", "true"); + }); +}); diff --git a/tests/TreeView/toHierarchy.test.ts b/tests/TreeView/toHierarchy.test.ts new file mode 100644 index 00000000..666ed0a7 --- /dev/null +++ b/tests/TreeView/toHierarchy.test.ts @@ -0,0 +1,255 @@ +import { toHierarchy } from "carbon-components-svelte"; + +describe("toHierarchy", () => { + test("should create a flat hierarchy when no items have parents", () => { + const input = [ + { id: 1, name: "Item 1" }, + { id: 2, name: "Item 2", parentId: "invalid" }, + ]; + const result = toHierarchy(input, (item) => item.parentId); + + expect(result).toEqual([ + { id: 1, name: "Item 1" }, + { id: 2, name: "Item 2", parentId: "invalid" }, + ]); + }); + + test("should create a nested hierarchy with parent-child relationships", () => { + const input = [ + { id: 1, name: "Parent" }, + { id: 2, name: "Child", pid: 1, randomKey: "randomValue" }, + { id: 3, name: "Grandchild", pid: 2 }, + ]; + const result = toHierarchy(input, (item) => item.pid); + + expect(result).toEqual([ + { + id: 1, + name: "Parent", + nodes: [ + { + id: 2, + name: "Child", + pid: 1, + nodes: [ + { + id: 3, + name: "Grandchild", + pid: 2, + }, + ], + randomKey: "randomValue", + }, + ], + }, + ]); + }); + + test("should handle multiple root nodes with children", () => { + const input = [ + { id: 1, name: "Root 1" }, + { id: 2, name: "Root 2" }, + { id: 3, name: "Child 1", pid: 1 }, + { id: 4, name: "Child 2", pid: 2 }, + ]; + const result = toHierarchy(input, (item) => item.pid); + + expect(result).toEqual([ + { + id: 1, + name: "Root 1", + nodes: [ + { + id: 3, + name: "Child 1", + pid: 1, + }, + ], + }, + { + id: 2, + name: "Root 2", + nodes: [ + { + id: 4, + name: "Child 2", + pid: 2, + }, + ], + }, + ]); + }); + + test("should remove empty nodes arrays", () => { + const input = [ + { id: 1, name: "Root" }, + { id: 2, name: "Leaf", pid: 1 }, + ]; + const result = toHierarchy(input, (item) => item.pid); + expect(result).toEqual([ + { + id: 1, + name: "Root", + nodes: [ + { + id: 2, + name: "Leaf", + pid: 1, + }, + ], + }, + ]); + + expect(result[0].nodes?.[0]).not.toHaveProperty("nodes"); + }); + + test("should handle empty input array", () => { + const result = toHierarchy< + { id: string | number; parentId?: string | number }, + "parentId" + >([], (item) => item.parentId || null); + expect(result).toEqual([]); + }); + + test("should handle non-existent parent IDs", () => { + const input = [ + { id: 1, name: "Root" }, + { id: 2, name: "Child", pid: 999 }, + ]; + const result = toHierarchy(input, (item) => item.pid); + expect(result).toEqual([ + { id: 1, name: "Root" }, + { id: 2, name: "Child", pid: 999 }, + ]); + }); + + test("should handle deeply nested structures", () => { + const input = [ + { id: 1, name: "Level 1" }, + { id: 2, name: "Level 2", pid: 1 }, + { id: 3, name: "Level 3", pid: 2 }, + { id: 4, name: "Level 4", pid: 3 }, + { id: 5, name: "Level 5", pid: 4 }, + ]; + const result = toHierarchy(input, (item) => item.pid); + expect(result).toEqual([ + { + id: 1, + name: "Level 1", + nodes: [ + { + id: 2, + name: "Level 2", + pid: 1, + nodes: [ + { + id: 3, + name: "Level 3", + pid: 2, + nodes: [ + { + id: 4, + name: "Level 4", + pid: 3, + nodes: [ + { + id: 5, + name: "Level 5", + pid: 4, + }, + ], + }, + ], + }, + ], + }, + ], + }, + ]); + }); + + test("should handle mixed ID types", () => { + const input = [ + { id: "root", name: "Root" }, + { id: 1, name: "Child 1", pid: "root" }, + { id: "2", name: "Child 2", pid: "root" }, + ]; + const result = toHierarchy(input, (item) => item.pid); + expect(result).toEqual([ + { + id: "root", + name: "Root", + nodes: [ + { + id: 1, + name: "Child 1", + pid: "root", + }, + { + id: "2", + name: "Child 2", + pid: "root", + }, + ], + }, + ]); + }); + + test("should preserve additional properties", () => { + const input = [ + { id: 1, name: "Root", extra: "data", meta: { key: "value" } }, + { id: 2, name: "Child", pid: 1, flag: true, count: 42 }, + ]; + const result = toHierarchy(input, (item) => item.pid); + expect(result).toEqual([ + { + id: 1, + name: "Root", + extra: "data", + meta: { key: "value" }, + nodes: [ + { + id: 2, + name: "Child", + pid: 1, + flag: true, + count: 42, + }, + ], + }, + ]); + }); + + test("should handle null/undefined parent IDs", () => { + const input = [ + { id: 1, name: "Root 1" }, + { id: 2, name: "Root 2", pid: null }, + { id: 3, name: "Root 3", pid: undefined }, + { id: 4, name: "Child", pid: 1 }, + ]; + const result = toHierarchy(input, (item) => item.pid); + expect(result).toEqual([ + { + id: 1, + name: "Root 1", + nodes: [ + { + id: 4, + name: "Child", + pid: 1, + }, + ], + }, + { + id: 2, + name: "Root 2", + pid: null, + }, + { + id: 3, + name: "Root 3", + pid: undefined, + }, + ]); + }); +}); diff --git a/tests/Truncate/Truncate.test.svelte b/tests/Truncate/Truncate.test.svelte new file mode 100644 index 00000000..d9aee792 --- /dev/null +++ b/tests/Truncate/Truncate.test.svelte @@ -0,0 +1,11 @@ + + + + {text} + diff --git a/tests/Truncate/Truncate.test.ts b/tests/Truncate/Truncate.test.ts new file mode 100644 index 00000000..b5f7b758 --- /dev/null +++ b/tests/Truncate/Truncate.test.ts @@ -0,0 +1,90 @@ +import { render, screen } from "@testing-library/svelte"; +import Truncate from "./Truncate.test.svelte"; +import TruncateAction from "./TruncateAction.test.svelte"; + +describe("Truncate", () => { + describe("component", () => { + test.each([ + ["end", "bx--text-truncate--end"], + ["front", "bx--text-truncate--front"], + ] as const)("should support %s clamp", (clamp, expectedClass) => { + render(Truncate, { props: { clamp } }); + + const element = screen.getByText(/This is a long text/); + expect(element).toHaveClass(expectedClass); + }); + + it("should render text content", () => { + const text = "Custom text content"; + render(Truncate, { props: { text } }); + + expect(screen.getByText(text)).toBeInTheDocument(); + }); + + it("should render as paragraph element", () => { + render(Truncate); + + const element = screen.getByText(/This is a long text/); + expect(element.tagName).toBe("P"); + }); + + it("should default to end clamp", () => { + render(Truncate); + + const element = screen.getByText(/This is a long text/); + expect(element).toHaveClass("bx--text-truncate--end"); + }); + }); + + describe("action", () => { + test.each([ + ["end", "bx--text-truncate--end"], + ["front", "bx--text-truncate--front"], + ] as const)("should support %s clamp", (clamp, expectedClass) => { + render(TruncateAction, { props: { clamp } }); + + const element = screen.getByText(/This is a long text/); + expect(element).toHaveClass(expectedClass); + }); + + test.each([ + ["h1", "H1"], + ["h2", "H2"], + ["h3", "H3"], + ["h4", "H4"], + ["p", "P"], + ["span", "SPAN"], + ] as const)("should work with %s element", (elementType, expectedTag) => { + render(TruncateAction, { props: { element: elementType } }); + + const element = screen.getByText(/This is a long text/); + expect(element.tagName).toBe(expectedTag); + expect(element).toHaveClass("bx--text-truncate--end"); + }); + + it("should preserve existing classes", () => { + render(TruncateAction, { + props: { + element: "p", + text: "Test", + }, + }); + + const element = screen.getByText("Test"); + element.classList.add("custom-class"); + + // Trigger update + element.dispatchEvent(new Event("update")); + + expect(element).toHaveClass("custom-class"); + expect(element).toHaveClass("bx--text-truncate--end"); + }); + + it("should default to end clamp", () => { + render(TruncateAction); + + const element = screen.getByText(/This is a long text/); + expect(element).toHaveClass("bx--text-truncate--end"); + }); + }); +}); diff --git a/tests/Truncate/TruncateAction.test.svelte b/tests/Truncate/TruncateAction.test.svelte new file mode 100644 index 00000000..fe2d8b50 --- /dev/null +++ b/tests/Truncate/TruncateAction.test.svelte @@ -0,0 +1,22 @@ + + +{#if element === "h1"} +

{text}

+{:else if element === "h2"} +

{text}

+{:else if element === "h3"} +

{text}

+{:else if element === "h4"} +

{text}

+{:else if element === "span"} + {text} +{:else} +

{text}

+{/if} diff --git a/tests/UnorderedList.test.svelte b/tests/UnorderedList.test.svelte deleted file mode 100644 index ad9df83a..00000000 --- a/tests/UnorderedList.test.svelte +++ /dev/null @@ -1,39 +0,0 @@ - - - - Unordered list item - Unordered list item - Unordered list item - - - - - Unordered list item - - - Unordered list item - - - Unordered list item - - - - - - Unordered list level 1 - - Unordered list level 2 - - Unordered list level 3 - - Unordered list level 3 - Unordered list level 3 - - - - - Unordered list level 1 - Unordered list level 1 - diff --git a/tests/UnorderedList/UnorderedList.test.svelte b/tests/UnorderedList/UnorderedList.test.svelte new file mode 100644 index 00000000..96ada196 --- /dev/null +++ b/tests/UnorderedList/UnorderedList.test.svelte @@ -0,0 +1,30 @@ + + + + {#each items as item} + + {item} + {#if nested && nestedItems.length > 0} + + {#each nestedItems as nestedItem} + {nestedItem} + {/each} + + {/if} + + {/each} + diff --git a/tests/UnorderedList/UnorderedList.test.ts b/tests/UnorderedList/UnorderedList.test.ts new file mode 100644 index 00000000..4dd4d702 --- /dev/null +++ b/tests/UnorderedList/UnorderedList.test.ts @@ -0,0 +1,128 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import UnorderedList from "./UnorderedList.test.svelte"; + +describe("UnorderedList", () => { + it("should render with default props", () => { + render(UnorderedList); + + const list = screen.getByRole("list"); + expect(list).toHaveClass("bx--list--unordered"); + expect(list).not.toHaveClass("bx--list--nested"); + expect(list).not.toHaveClass("bx--list--expressive"); + + const items = screen.getAllByRole("listitem"); + expect(items).toHaveLength(3); + expect(items[0]).toHaveTextContent("Item 1"); + expect(items[1]).toHaveTextContent("Item 2"); + expect(items[2]).toHaveTextContent("Item 3"); + }); + + it("should support nested lists", () => { + render(UnorderedList, { + props: { + nested: true, + nestedItems: ["Nested 1", "Nested 2"], + }, + }); + + const lists = screen.getAllByRole("list"); + expect(lists).toHaveLength(4); // Main list + 3 nested lists (one for each main item) + + const mainList = lists[0]; + expect(mainList).toHaveClass("bx--list--unordered"); + expect(mainList).toHaveClass("bx--list--nested"); + + const nestedLists = lists.slice(1); + nestedLists.forEach((list) => { + expect(list).toHaveClass("bx--list--unordered"); + expect(list).toHaveClass("bx--list--nested"); + }); + + const items = screen.getAllByRole("listitem"); + expect(items).toHaveLength(9); // 3 main items + (2 nested items × 3) + }); + + it("should support expressive styles", () => { + render(UnorderedList, { + props: { expressive: true }, + }); + + const list = screen.getByRole("list"); + expect(list).toHaveClass("bx--list--expressive"); + }); + + it("should support custom items", () => { + const customItems = ["Custom 1", "Custom 2", "Custom 3", "Custom 4"]; + render(UnorderedList, { + props: { items: customItems }, + }); + + const items = screen.getAllByRole("listitem"); + expect(items).toHaveLength(customItems.length); + items.forEach((item, index) => { + expect(item).toHaveTextContent(customItems[index]); + }); + }); + + describe("events", () => { + it("should emit click event", async () => { + const { component } = render(UnorderedList); + const list = screen.getByRole("list"); + + const mock = vi.fn(); + component.$on("click", mock); + + await user.click(list); + expect(mock).toHaveBeenCalled(); + }); + + test.each(["mouseover", "mouseenter", "mouseleave"])( + "should emit %s event", + (eventName) => { + const { component } = render(UnorderedList); + const list = screen.getByRole("list"); + + const mock = vi.fn(); + component.$on(eventName, mock); + + const event = new MouseEvent(eventName); + list.dispatchEvent(event); + + expect(mock).toHaveBeenCalled(); + }, + ); + }); + + describe("accessibility", () => { + it("should have correct ARIA role", () => { + render(UnorderedList); + + const list = screen.getByRole("list"); + expect(list.tagName).toBe("UL"); + + const items = screen.getAllByRole("listitem"); + items.forEach((item) => { + expect(item.tagName).toBe("LI"); + }); + }); + + it("should maintain list structure with nested items", () => { + render(UnorderedList, { + props: { + nested: true, + nestedItems: ["Nested 1", "Nested 2"], + }, + }); + + const lists = screen.getAllByRole("list"); + lists.forEach((list) => { + expect(list.tagName).toBe("UL"); + expect(list.children).toBeTruthy(); + Array.from(list.children).forEach((child) => { + expect(child.tagName).toBe("LI"); + }); + }); + }); + }); +}); diff --git a/tests/index.html b/tests/index.html new file mode 100644 index 00000000..05ee465c --- /dev/null +++ b/tests/index.html @@ -0,0 +1,15 @@ + + + + + + + + + + diff --git a/tests/setup-tests.ts b/tests/setup-tests.ts new file mode 100644 index 00000000..018fda20 --- /dev/null +++ b/tests/setup-tests.ts @@ -0,0 +1,83 @@ +/// +import "@testing-library/jest-dom/vitest"; +import { userEvent } from "@testing-library/user-event"; + +// Mock scrollIntoView since it's not implemented in JSDOM +Element.prototype.scrollIntoView = vi.fn(); + +// Mock ResizeObserver since it's not implemented in JSDOM +class ResizeObserverMock { + callback: ResizeObserverCallback; + elements: Element[]; + + constructor(callback: ResizeObserverCallback) { + this.callback = callback; + this.elements = []; + } + + observe(element: Element) { + this.elements.push(element); + this.callback( + [ + { + target: element, + contentRect: { height: 100 } as DOMRectReadOnly, + borderBoxSize: [], + contentBoxSize: [], + devicePixelContentBoxSize: [], + }, + ], + this, + ); + } + + unobserve(element: Element) { + this.elements = this.elements.filter((el) => el !== element); + } + + disconnect() { + this.elements = []; + } +} + +global.ResizeObserver = ResizeObserverMock; + +export const user = userEvent.setup(); + +export const setupLocalStorageMock = () => { + let localStorageMock: { [key: string]: string } = {}; + let originalLocalStorage: Storage; + + beforeEach(() => { + originalLocalStorage = global.localStorage; + localStorageMock = {}; + global.localStorage = { + getItem: vi.fn((key) => localStorageMock[key] || null), + setItem: vi.fn((key, value) => { + localStorageMock[key] = value; + }), + removeItem: vi.fn((key) => { + delete localStorageMock[key]; + }), + clear: vi.fn(() => { + localStorageMock = {}; + }), + length: 0, + key: vi.fn(), + }; + }); + + afterEach(() => { + global.localStorage = originalLocalStorage; + localStorage.clear(); + vi.restoreAllMocks(); + localStorageMock = {}; + }); + + return { + setMockItem: (key: string, value: string) => { + localStorageMock[key] = value; + }, + getMockItem: (key: string) => localStorageMock[key], + }; +}; diff --git a/thumbnails/breakpoint.svg b/thumbnails/breakpoint.svg new file mode 100644 index 00000000..bd241c25 --- /dev/null +++ b/thumbnails/breakpoint.svg @@ -0,0 +1,149 @@ + + + breakpoint + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 19:11 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/thumbnails/button-set.svg b/thumbnails/button-set.svg new file mode 100644 index 00000000..7e3aefbf --- /dev/null +++ b/thumbnails/button-set.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/thumbnails/clickable-tile.svg b/thumbnails/clickable-tile.svg new file mode 100644 index 00000000..c1431493 --- /dev/null +++ b/thumbnails/clickable-tile.svg @@ -0,0 +1,33 @@ + + + clickable-tile + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/thumbnails/composed-modal.svg b/thumbnails/composed-modal.svg new file mode 100644 index 00000000..e452facc --- /dev/null +++ b/thumbnails/composed-modal.svg @@ -0,0 +1,33 @@ + + + composed-modal + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/thumbnails/context-menu.svg b/thumbnails/context-menu.svg new file mode 100644 index 00000000..4adb0d4c --- /dev/null +++ b/thumbnails/context-menu.svg @@ -0,0 +1,73 @@ + + + context-menu + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/thumbnails/expandable-tile.svg b/thumbnails/expandable-tile.svg new file mode 100644 index 00000000..81e97609 --- /dev/null +++ b/thumbnails/expandable-tile.svg @@ -0,0 +1,46 @@ + + + expandable-tile + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/thumbnails/fluid-form.svg b/thumbnails/fluid-form.svg new file mode 100644 index 00000000..5946428e --- /dev/null +++ b/thumbnails/fluid-form.svg @@ -0,0 +1,77 @@ + + + form + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/thumbnails/image-loader.svg b/thumbnails/image-loader.svg new file mode 100644 index 00000000..b1d5f70e --- /dev/null +++ b/thumbnails/image-loader.svg @@ -0,0 +1,16 @@ + + + image-loader + + + + + + + + + + + + + \ No newline at end of file diff --git a/thumbnails/inline-notification.svg b/thumbnails/inline-notification.svg new file mode 100644 index 00000000..12759c86 --- /dev/null +++ b/thumbnails/inline-notification.svg @@ -0,0 +1,23 @@ + + + inline-notification + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/thumbnails/local-storage.svg b/thumbnails/local-storage.svg new file mode 100644 index 00000000..5b8aedc4 --- /dev/null +++ b/thumbnails/local-storage.svg @@ -0,0 +1,35 @@ + + + local-storage + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/thumbnails/ordered-list.svg b/thumbnails/ordered-list.svg new file mode 100644 index 00000000..e730ef42 --- /dev/null +++ b/thumbnails/ordered-list.svg @@ -0,0 +1,60 @@ + + + ordered-list + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/thumbnails/password-input.svg b/thumbnails/password-input.svg new file mode 100644 index 00000000..d1351839 --- /dev/null +++ b/thumbnails/password-input.svg @@ -0,0 +1,27 @@ + + + password-input + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/thumbnails/radio-tile.svg b/thumbnails/radio-tile.svg new file mode 100644 index 00000000..47862878 --- /dev/null +++ b/thumbnails/radio-tile.svg @@ -0,0 +1,35 @@ + + + radio-tile + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/thumbnails/recursive-list.svg b/thumbnails/recursive-list.svg new file mode 100644 index 00000000..18a259a9 --- /dev/null +++ b/thumbnails/recursive-list.svg @@ -0,0 +1,48 @@ + + + recursive-list + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/thumbnails/selectable-tile.svg b/thumbnails/selectable-tile.svg new file mode 100644 index 00000000..3763c347 --- /dev/null +++ b/thumbnails/selectable-tile.svg @@ -0,0 +1,47 @@ + + + selectable-tile + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/thumbnails/skeleton-placeholder.svg b/thumbnails/skeleton-placeholder.svg new file mode 100644 index 00000000..3a5d34a1 --- /dev/null +++ b/thumbnails/skeleton-placeholder.svg @@ -0,0 +1,15 @@ + + + skeleton-placeholder + + + + + + + + + + + + \ No newline at end of file diff --git a/thumbnails/skeleton-text.svg b/thumbnails/skeleton-text.svg new file mode 100644 index 00000000..f0a5ff7f --- /dev/null +++ b/thumbnails/skeleton-text.svg @@ -0,0 +1,15 @@ + + + skeleton-text + + + + + + + + + + + + \ No newline at end of file diff --git a/thumbnails/skeleton.svg b/thumbnails/skeleton.svg new file mode 100644 index 00000000..d5fb6b5f --- /dev/null +++ b/thumbnails/skeleton.svg @@ -0,0 +1,15 @@ + + + skeleton + + + + + + + + + + + + \ No newline at end of file diff --git a/thumbnails/toast-notification.svg b/thumbnails/toast-notification.svg new file mode 100644 index 00000000..4c481f9a --- /dev/null +++ b/thumbnails/toast-notification.svg @@ -0,0 +1,34 @@ + + + toast-notification + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/thumbnails/tooltip-icon.svg b/thumbnails/tooltip-icon.svg new file mode 100644 index 00000000..e4fa00c3 --- /dev/null +++ b/thumbnails/tooltip-icon.svg @@ -0,0 +1,27 @@ + + + tooltip-icon + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/thumbnails/truncate.svg b/thumbnails/truncate.svg new file mode 100644 index 00000000..f1ac3dd7 --- /dev/null +++ b/thumbnails/truncate.svg @@ -0,0 +1,17 @@ + + + truncate + + + + + + + + + + + + + + \ No newline at end of file diff --git a/thumbnails/unordered-list.svg b/thumbnails/unordered-list.svg new file mode 100644 index 00000000..c3f1c435 --- /dev/null +++ b/thumbnails/unordered-list.svg @@ -0,0 +1,64 @@ + + + unordered-list + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 567d6246..bf9727a7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1 +1,25 @@ -{ "extends": "@tsconfig/svelte/tsconfig.json" } +{ + "compilerOptions": { + "noEmit": true, + "erasableSyntaxOnly": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "ignoreDeprecations": "5.0", + "verbatimModuleSyntax": true, + "isolatedModules": true, + "target": "ESNext", + "module": "ESNext", + "moduleResolution": "node", + "noUnusedLocals": true, + "noUnusedParameters": true, + "noImplicitAny": true, + "strict": true, + "skipLibCheck": true, + "skipDefaultLibCheck": true, + "paths": { + "carbon-components-svelte": ["./types"], + "carbon-components-svelte/*": ["./types/*"] + } + }, + "include": ["src", "tests"] +} diff --git a/types/Accordion/Accordion.d.ts b/types/Accordion/Accordion.d.ts deleted file mode 100644 index b08768a0..00000000 --- a/types/Accordion/Accordion.d.ts +++ /dev/null @@ -1,40 +0,0 @@ -/// -import { AccordionSkeletonProps } from "./AccordionSkeleton"; - -export interface AccordionProps extends AccordionSkeletonProps { - /** - * Specify alignment of accordion item chevron icon - * @default "end" - */ - align?: "start" | "end"; - - /** - * Specify the size of the accordion - */ - size?: "sm" | "xl"; - - /** - * Set to `true` to disable the accordion - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; -} - -export default class Accordion { - $$prop_def: AccordionProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Accordion/Accordion.svelte.d.ts b/types/Accordion/Accordion.svelte.d.ts new file mode 100644 index 00000000..1e36b317 --- /dev/null +++ b/types/Accordion/Accordion.svelte.d.ts @@ -0,0 +1,39 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { AccordionSkeletonProps } from "./AccordionSkeleton.svelte"; + +export type AccordionProps = AccordionSkeletonProps & { + /** + * Specify alignment of accordion item chevron icon + * @default "end" + */ + align?: "start" | "end"; + + /** + * Specify the size of the accordion + * @default undefined + */ + size?: "sm" | "xl"; + + /** + * Set to `true` to disable the accordion + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; +}; + +export default class Accordion extends SvelteComponentTyped< + AccordionProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/Accordion/AccordionItem.d.ts b/types/Accordion/AccordionItem.d.ts deleted file mode 100644 index db8b3311..00000000 --- a/types/Accordion/AccordionItem.d.ts +++ /dev/null @@ -1,44 +0,0 @@ -/// - -export interface AccordionItemProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the title of the accordion item heading - * Alternatively, use the named slot "title" (e.g.,
...
) - * @default "title" - */ - title?: string; - - /** - * Set to `true` to open the first accordion item - * @default false - */ - open?: boolean; - - /** - * Set to `true` to disable the accordion item - * @default false - */ - disabled?: boolean; - - /** - * Specify the ARIA label for the accordion item chevron icon - * @default "Expand/Collapse" - */ - iconDescription?: string; -} - -export default class AccordionItem { - $$prop_def: AccordionItemProps; - $$slot_def: { - default: {}; - title: {}; - }; - - $on(eventname: "animationend", cb: (event: WindowEventMap["animationend"]) => void): () => void; - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Accordion/AccordionItem.svelte.d.ts b/types/Accordion/AccordionItem.svelte.d.ts new file mode 100644 index 00000000..6c5f0c4b --- /dev/null +++ b/types/Accordion/AccordionItem.svelte.d.ts @@ -0,0 +1,48 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["li"]; + +type $Props = { + /** + * Specify the title of the accordion item heading. + * Alternatively, use the "title" slot (e.g., `
...
`) + * @default "title" + */ + title?: string; + + /** + * Set to `true` to open the first accordion item + * @default false + */ + open?: boolean; + + /** + * Set to `true` to disable the accordion item + * @default false + */ + disabled?: boolean; + + /** + * Specify the ARIA label for the accordion item chevron icon + * @default "Expand/Collapse" + */ + iconDescription?: string; + + [key: `data-${string}`]: any; +}; + +export type AccordionItemProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class AccordionItem extends SvelteComponentTyped< + AccordionItemProps, + { + animationend: WindowEventMap["animationend"]; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + keydown: WindowEventMap["keydown"]; + }, + { default: {}; title: {} } +> {} diff --git a/types/Accordion/AccordionSkeleton.d.ts b/types/Accordion/AccordionSkeleton.d.ts deleted file mode 100644 index 0d05c96a..00000000 --- a/types/Accordion/AccordionSkeleton.d.ts +++ /dev/null @@ -1,37 +0,0 @@ -/// - -export interface AccordionSkeletonProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the number of accordion items to render - * @default 4 - */ - count?: number; - - /** - * Specify alignment of accordion item chevron icon - * @default "end" - */ - align?: "start" | "end"; - - /** - * Specify the size of the accordion - */ - size?: "sm" | "xl"; - - /** - * Set to `false` to close the first accordion item - * @default true - */ - open?: boolean; -} - -export default class AccordionSkeleton { - $$prop_def: AccordionSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Accordion/AccordionSkeleton.svelte.d.ts b/types/Accordion/AccordionSkeleton.svelte.d.ts new file mode 100644 index 00000000..2ce1dc07 --- /dev/null +++ b/types/Accordion/AccordionSkeleton.svelte.d.ts @@ -0,0 +1,45 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["ul"]; + +type $Props = { + /** + * Specify the number of accordion items to render + * @default 4 + */ + count?: number; + + /** + * Specify alignment of accordion item chevron icon + * @default "end" + */ + align?: "start" | "end"; + + /** + * Specify the size of the accordion + * @default undefined + */ + size?: "sm" | "xl"; + + /** + * Set to `false` to close the first accordion item + * @default true + */ + open?: boolean; + + [key: `data-${string}`]: any; +}; + +export type AccordionSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class AccordionSkeleton extends SvelteComponentTyped< + AccordionSkeletonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/AspectRatio/AspectRatio.d.ts b/types/AspectRatio/AspectRatio.d.ts deleted file mode 100644 index 89678b5d..00000000 --- a/types/AspectRatio/AspectRatio.d.ts +++ /dev/null @@ -1,18 +0,0 @@ -/// - -export interface AspectRatioProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the aspect ratio - * @default "2x1" - */ - ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"; -} - -export default class AspectRatio { - $$prop_def: AspectRatioProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/AspectRatio/AspectRatio.svelte.d.ts b/types/AspectRatio/AspectRatio.svelte.d.ts new file mode 100644 index 00000000..d11a5035 --- /dev/null +++ b/types/AspectRatio/AspectRatio.svelte.d.ts @@ -0,0 +1,31 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the aspect ratio + * @default "2x1" + */ + ratio?: + | "2x1" + | "2x3" + | "16x9" + | "4x3" + | "1x1" + | "3x4" + | "3x2" + | "9x16" + | "1x2"; + + [key: `data-${string}`]: any; +}; + +export type AspectRatioProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class AspectRatio extends SvelteComponentTyped< + AspectRatioProps, + Record, + { default: {} } +> {} diff --git a/types/Breadcrumb/Breadcrumb.d.ts b/types/Breadcrumb/Breadcrumb.d.ts deleted file mode 100644 index 787bf712..00000000 --- a/types/Breadcrumb/Breadcrumb.d.ts +++ /dev/null @@ -1,29 +0,0 @@ -/// -import { BreadcrumbSkeletonProps } from "./BreadcrumbSkeleton"; - -export interface BreadcrumbProps extends BreadcrumbSkeletonProps { - /** - * Set to `true` to hide the breadcrumb trailing slash - * @default false - */ - noTrailingSlash?: boolean; - - /** - * Set to `true` to display skeleton state - * @default false - */ - skeleton?: boolean; -} - -export default class Breadcrumb { - $$prop_def: BreadcrumbProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Breadcrumb/Breadcrumb.svelte.d.ts b/types/Breadcrumb/Breadcrumb.svelte.d.ts new file mode 100644 index 00000000..55d24edb --- /dev/null +++ b/types/Breadcrumb/Breadcrumb.svelte.d.ts @@ -0,0 +1,27 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { BreadcrumbSkeletonProps } from "./BreadcrumbSkeleton.svelte"; + +export type BreadcrumbProps = BreadcrumbSkeletonProps & { + /** + * Set to `true` to hide the breadcrumb trailing slash + * @default false + */ + noTrailingSlash?: boolean; + + /** + * Set to `true` to display skeleton state + * @default false + */ + skeleton?: boolean; +}; + +export default class Breadcrumb extends SvelteComponentTyped< + BreadcrumbProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/Breadcrumb/BreadcrumbItem.d.ts b/types/Breadcrumb/BreadcrumbItem.d.ts deleted file mode 100644 index 6e0914e9..00000000 --- a/types/Breadcrumb/BreadcrumbItem.d.ts +++ /dev/null @@ -1,27 +0,0 @@ -/// - -export interface BreadcrumbItemProps extends svelte.JSX.HTMLAttributes { - /** - * Set the `href` to use an anchor link - */ - href?: string; - - /** - * Set to `true` if the breadcrumb item represents the current page - * @default false - */ - isCurrentPage?: boolean; -} - -export default class BreadcrumbItem { - $$prop_def: BreadcrumbItemProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Breadcrumb/BreadcrumbItem.svelte.d.ts b/types/Breadcrumb/BreadcrumbItem.svelte.d.ts new file mode 100644 index 00000000..f7c12c1a --- /dev/null +++ b/types/Breadcrumb/BreadcrumbItem.svelte.d.ts @@ -0,0 +1,33 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["li"]; + +type $Props = { + /** + * Set the `href` to use an anchor link + * @default undefined + */ + href?: string; + + /** + * Set to `true` if the breadcrumb item represents the current page + * @default false + */ + isCurrentPage?: boolean; + + [key: `data-${string}`]: any; +}; + +export type BreadcrumbItemProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class BreadcrumbItem extends SvelteComponentTyped< + BreadcrumbItemProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: { props?: { ["aria-current"]?: string; class: "bx--link" } } } +> {} diff --git a/types/Breadcrumb/BreadcrumbSkeleton.d.ts b/types/Breadcrumb/BreadcrumbSkeleton.d.ts deleted file mode 100644 index 3f0caaaf..00000000 --- a/types/Breadcrumb/BreadcrumbSkeleton.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -/// - -export interface BreadcrumbSkeletonProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to hide the breadcrumb trailing slash - * @default false - */ - noTrailingSlash?: boolean; - - /** - * Specify the number of breadcrumb items to render - * @default 3 - */ - count?: number; -} - -export default class BreadcrumbSkeleton { - $$prop_def: BreadcrumbSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Breadcrumb/BreadcrumbSkeleton.svelte.d.ts b/types/Breadcrumb/BreadcrumbSkeleton.svelte.d.ts new file mode 100644 index 00000000..822b3aaf --- /dev/null +++ b/types/Breadcrumb/BreadcrumbSkeleton.svelte.d.ts @@ -0,0 +1,33 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set to `true` to hide the breadcrumb trailing slash + * @default false + */ + noTrailingSlash?: boolean; + + /** + * Specify the number of breadcrumb items to render + * @default 3 + */ + count?: number; + + [key: `data-${string}`]: any; +}; + +export type BreadcrumbSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class BreadcrumbSkeleton extends SvelteComponentTyped< + BreadcrumbSkeletonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/Breakpoint/Breakpoint.svelte.d.ts b/types/Breakpoint/Breakpoint.svelte.d.ts new file mode 100644 index 00000000..00c6ecd0 --- /dev/null +++ b/types/Breakpoint/Breakpoint.svelte.d.ts @@ -0,0 +1,30 @@ +import type { SvelteComponentTyped } from "svelte"; + +export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max"; + +export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584; + +export type BreakpointProps = { + /** + * Determine the current Carbon grid breakpoint size + * @default undefined + */ + size?: BreakpointSize; + + /** + * Carbon grid sizes as an object + * @default { sm: false, md: false, lg: false, xlg: false, max: false, } + */ + sizes?: Record; +}; + +export default class Breakpoint extends SvelteComponentTyped< + BreakpointProps, + { + change: CustomEvent<{ + size: BreakpointSize; + breakpointValue: BreakpointValue; + }>; + }, + { default: { size: BreakpointSize; sizes: Record } } +> {} diff --git a/types/Breakpoint/breakpointObserver.d.ts b/types/Breakpoint/breakpointObserver.d.ts new file mode 100644 index 00000000..77cfe464 --- /dev/null +++ b/types/Breakpoint/breakpointObserver.d.ts @@ -0,0 +1,28 @@ +import type { Readable, Subscriber, Unsubscriber } from "svelte/store"; +import type { BreakpointSize, BreakpointValue } from "./breakpoints"; + +/** + * Creates a readable store that returns the current breakpoint size. + * It also provides functions for creating derived stores used to do comparisons. + */ +export function breakpointObserver(): { + subscribe: ( + this: void, + run: Subscriber, + invalidate?: (value?: any) => void, + ) => Unsubscriber; + /** + * Returns a store readable store that returns whether the current + * breakpoint is smaller than {@link size}. + * @param {BreakpointSize} size Size to compare against. + */ + smallerThan: (size: BreakpointSize) => Readable; + /** + * Returns a store readable store that returns whether the current + * breakpoint is larger than {@link size}. + * @param {BreakpointSize} size Size to compare against. + */ + largerThan: (size: BreakpointSize) => Readable; +}; + +export default breakpointObserver; diff --git a/types/Breakpoint/breakpoints.d.ts b/types/Breakpoint/breakpoints.d.ts new file mode 100644 index 00000000..44bbbcc4 --- /dev/null +++ b/types/Breakpoint/breakpoints.d.ts @@ -0,0 +1,11 @@ +/** + * Pixel sizes of Carbon grid breakpoints. + * @type {Record} + */ +export const breakpoints: Record; + +export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max"; + +export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584; + +export default breakpoints; diff --git a/types/Breakpoint/index.d.ts b/types/Breakpoint/index.d.ts new file mode 100644 index 00000000..6b191a64 --- /dev/null +++ b/types/Breakpoint/index.d.ts @@ -0,0 +1,4 @@ +// @ts-nocheck `Breakpoint` is auto-generated by `sveld`. +export { default as Breakpoint } from "./Breakpoint.svelte"; +export { breakpointObserver } from "./breakpointObserver"; +export { breakpoints } from "./breakpoints"; diff --git a/types/Button/Button.d.ts b/types/Button/Button.d.ts deleted file mode 100644 index dec19519..00000000 --- a/types/Button/Button.d.ts +++ /dev/null @@ -1,112 +0,0 @@ -/// -import { ButtonSkeletonProps } from "./ButtonSkeleton"; - -export interface ButtonProps - extends ButtonSkeletonProps, - svelte.JSX.HTMLAttributes, - svelte.JSX.HTMLAttributes, - svelte.JSX.HTMLAttributes { - /** - * Specify the kind of button - * @default "primary" - */ - kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"; - - /** - * Specify the size of button - * @default "default" - */ - size?: "default" | "field" | "small"; - - /** - * Set to `true` for the icon-only variant - * @default false - */ - hasIconOnly?: boolean; - - /** - * Specify the icon from `carbon-icons-svelte` to render - */ - icon?: typeof import("carbon-icons-svelte").CarbonIcon; - - /** - * Specify the ARIA label for the button icon - */ - iconDescription?: string; - - /** - * Set the alignment of the tooltip relative to the icon - * `hasIconOnly` must be set to `true` - */ - tooltipAlignment?: "start" | "center" | "end"; - - /** - * Set the position of the tooltip relative to the icon - */ - tooltipPosition?: "top" | "right" | "bottom" | "left"; - - /** - * Set to `true` to render a custom HTML element - * Props are destructured as `props` in the default slot (e.g., ) - * @default false - */ - as?: boolean; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - - /** - * Set to `true` to disable the button - * @default false - */ - disabled?: boolean; - - /** - * Set the `href` to use an anchor link - */ - href?: string; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Specify the `type` attribute for the button element - * @default "button" - */ - type?: string; - - /** - * Obtain a reference to the HTML element - * @default null - */ - ref?: null | HTMLAnchorElement | HTMLButtonElement; -} - -export default class Button { - $$prop_def: ButtonProps; - $$slot_def: { - default: { - props: { - role: "button"; - type?: string; - tabindex: any; - disabled: boolean; - href?: string; - class: string; - [key: string]: any; - }; - }; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Button/Button.svelte.d.ts b/types/Button/Button.svelte.d.ts new file mode 100644 index 00000000..20d8f3b5 --- /dev/null +++ b/types/Button/Button.svelte.d.ts @@ -0,0 +1,140 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +import type { ButtonSkeletonProps } from "./ButtonSkeleton.svelte"; + +type $RestProps = SvelteHTMLElements["button"] & + SvelteHTMLElements["a"] & + SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the kind of button + * @default "primary" + */ + kind?: + | "primary" + | "secondary" + | "tertiary" + | "ghost" + | "danger" + | "danger-tertiary" + | "danger-ghost"; + + /** + * Specify the size of button + * @default "default" + */ + size?: "default" | "field" | "small" | "lg" | "xl"; + + /** + * Set to `true` to use Carbon's expressive typesetting + * @default false + */ + expressive?: boolean; + + /** + * Set to `true` to enable the selected state for an icon-only, ghost button + * @default false + */ + isSelected?: boolean; + + /** + * Specify the icon to render + * Alternatively, use the named slot "icon" (e.g., ``) + * @default undefined + */ + icon?: any; + + /** + * Specify the ARIA label for the button icon + * @default undefined + */ + iconDescription?: string; + + /** + * Set the alignment of the tooltip relative to the icon. + * Only applies to icon-only buttons + * @default "center" + */ + tooltipAlignment?: "start" | "center" | "end"; + + /** + * Set the position of the tooltip relative to the icon + * @default "bottom" + */ + tooltipPosition?: "top" | "right" | "bottom" | "left"; + + /** + * Set to `true` to render a custom HTML element + * Props are destructured as `props` in the default slot (e.g., ) + * @default false + */ + as?: boolean; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + + /** + * Set to `true` to disable the button + * @default false + */ + disabled?: boolean; + + /** + * Set the `href` to use an anchor link + * @default undefined + */ + href?: string; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Specify the `type` attribute for the button element + * @default "button" + */ + type?: string; + + /** + * Obtain a reference to the HTML element + * @default null + */ + ref?: null | HTMLAnchorElement | HTMLButtonElement; + + [key: `data-${string}`]: any; +}; + +export type ButtonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Button extends SvelteComponentTyped< + ButtonProps, + { + click: WindowEventMap["click"]; + focus: WindowEventMap["focus"]; + blur: WindowEventMap["blur"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { + default: { + props: { + role: "button"; + type?: string; + tabindex: any; + disabled: boolean; + href?: string; + class: string; + [key: string]: any; + }; + }; + icon: {}; + } +> {} diff --git a/types/Button/ButtonSet.d.ts b/types/Button/ButtonSet.d.ts deleted file mode 100644 index 3bddf6b6..00000000 --- a/types/Button/ButtonSet.d.ts +++ /dev/null @@ -1,18 +0,0 @@ -/// - -export interface ButtonSetProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to stack the buttons vertically - * @default false - */ - stacked?: boolean; -} - -export default class ButtonSet { - $$prop_def: ButtonSetProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Button/ButtonSet.svelte.d.ts b/types/Button/ButtonSet.svelte.d.ts new file mode 100644 index 00000000..15aacd7e --- /dev/null +++ b/types/Button/ButtonSet.svelte.d.ts @@ -0,0 +1,22 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set to `true` to stack the buttons vertically + * @default false + */ + stacked?: boolean; + + [key: `data-${string}`]: any; +}; + +export type ButtonSetProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ButtonSet extends SvelteComponentTyped< + ButtonSetProps, + Record, + { default: {} } +> {} diff --git a/types/Button/ButtonSkeleton.d.ts b/types/Button/ButtonSkeleton.d.ts deleted file mode 100644 index 57ca1bd3..00000000 --- a/types/Button/ButtonSkeleton.d.ts +++ /dev/null @@ -1,31 +0,0 @@ -/// - -export interface ButtonSkeletonProps extends svelte.JSX.HTMLAttributes { - /** - * Set the `href` to use an anchor link - */ - href?: string; - - /** - * Specify the size of button skeleton - * @default "default" - */ - size?: "default" | "field" | "small"; - - /** - * Set to `true` to use the small variant - * @default false - */ - small?: boolean; -} - -export default class ButtonSkeleton { - $$prop_def: ButtonSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Button/ButtonSkeleton.svelte.d.ts b/types/Button/ButtonSkeleton.svelte.d.ts new file mode 100644 index 00000000..0c0a3753 --- /dev/null +++ b/types/Button/ButtonSkeleton.svelte.d.ts @@ -0,0 +1,35 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["a"]; + +type $Props = { + /** + * Set the `href` to use an anchor link + * @default undefined + */ + href?: string; + + /** + * Specify the size of button skeleton + * @default "default" + */ + size?: "default" | "field" | "small" | "lg" | "xl"; + + [key: `data-${string}`]: any; +}; + +export type ButtonSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ButtonSkeleton extends SvelteComponentTyped< + ButtonSkeletonProps, + { + click: WindowEventMap["click"]; + focus: WindowEventMap["focus"]; + blur: WindowEventMap["blur"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/Checkbox/Checkbox.d.ts b/types/Checkbox/Checkbox.svelte.d.ts similarity index 52% rename from types/Checkbox/Checkbox.d.ts rename to types/Checkbox/Checkbox.svelte.d.ts index 19d4e3f4..19b0ae00 100644 --- a/types/Checkbox/Checkbox.d.ts +++ b/types/Checkbox/Checkbox.svelte.d.ts @@ -1,12 +1,27 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the value of the checkbox + * @default "" + */ + value?: any; -export interface CheckboxProps { /** * Specify whether the checkbox is checked * @default false */ checked?: boolean; + /** + * Specify the bound group + * @default undefined + */ + group?: ReadonlyArray; + /** * Specify whether the checkbox is indeterminate * @default false @@ -19,6 +34,12 @@ export interface CheckboxProps { */ skeleton?: boolean; + /** + * Set to `true` to mark the field as required + * @default false + */ + required?: boolean; + /** * Set to `true` for the checkbox to be read-only * @default false @@ -51,6 +72,7 @@ export interface CheckboxProps { /** * Specify the title attribute for the label element + * @default undefined */ title?: string; @@ -65,17 +87,23 @@ export interface CheckboxProps { * @default null */ ref?: null | HTMLInputElement; -} -export default class Checkbox { - $$prop_def: CheckboxProps; - $$slot_def: {}; + [key: `data-${string}`]: any; +}; - $on(eventname: "check", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} +export type CheckboxProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Checkbox extends SvelteComponentTyped< + CheckboxProps, + { + check: CustomEvent; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + change: WindowEventMap["change"]; + focus: WindowEventMap["focus"]; + blur: WindowEventMap["blur"]; + }, + { labelText: {} } +> {} diff --git a/types/Checkbox/CheckboxSkeleton.d.ts b/types/Checkbox/CheckboxSkeleton.d.ts deleted file mode 100644 index 080e5736..00000000 --- a/types/Checkbox/CheckboxSkeleton.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -/// - -export interface CheckboxSkeletonProps extends svelte.JSX.HTMLAttributes {} - -export default class CheckboxSkeleton { - $$prop_def: CheckboxSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Checkbox/CheckboxSkeleton.svelte.d.ts b/types/Checkbox/CheckboxSkeleton.svelte.d.ts new file mode 100644 index 00000000..7cff1584 --- /dev/null +++ b/types/Checkbox/CheckboxSkeleton.svelte.d.ts @@ -0,0 +1,21 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + [key: `data-${string}`]: any; +}; + +export type CheckboxSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class CheckboxSkeleton extends SvelteComponentTyped< + CheckboxSkeletonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/CodeSnippet/CodeSnippet.d.ts b/types/CodeSnippet/CodeSnippet.d.ts deleted file mode 100644 index b1e1f2b4..00000000 --- a/types/CodeSnippet/CodeSnippet.d.ts +++ /dev/null @@ -1,114 +0,0 @@ -/// - -export interface CodeSnippetProps { - /** - * Set the type of code snippet - * @default "single" - */ - type?: "single" | "inline" | "multi"; - - /** - * Set the code snippet text - * Alternatively, use the default slot (e.g., {`code`}) - */ - code?: string; - - /** - * Set to `true` to expand a multi-line code snippet (type="multi") - * @default false - */ - expanded?: boolean; - - /** - * Set to `true` to hide the copy button - * @default false - */ - hideCopyButton?: boolean; - - /** - * Set to `true` to wrap the text - * Note that `type` must be "multi" - * @default false - */ - wrapText?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - - /** - * Specify the ARIA label for the copy button icon - */ - copyButtonDescription?: string; - - /** - * Specify the ARIA label of the copy button - */ - copyLabel?: string; - - /** - * Specify the feedback text displayed when clicking the snippet - * @default "Copied!" - */ - feedback?: string; - - /** - * Set the timeout duration (ms) to display feedback text - * @default 2000 - */ - feedbackTimeout?: number; - - /** - * Specify the show less text - * `type` must be "multi" - * @default "Show less" - */ - showLessText?: string; - - /** - * Specify the show more text - * `type` must be "multi" - * @default "Show more" - */ - showMoreText?: string; - - /** - * Set to `true` to enable the show more/less button - * @default false - */ - showMoreLess?: boolean; - - /** - * Set an id for the code element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; - - /** - * Obtain a reference to the pre HTML element - * @default null - */ - ref?: null | HTMLPreElement; -} - -export default class CodeSnippet { - $$prop_def: CodeSnippetProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "animationend", cb: (event: WindowEventMap["animationend"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/CodeSnippet/CodeSnippet.svelte.d.ts b/types/CodeSnippet/CodeSnippet.svelte.d.ts new file mode 100644 index 00000000..72073913 --- /dev/null +++ b/types/CodeSnippet/CodeSnippet.svelte.d.ts @@ -0,0 +1,140 @@ +import type { SvelteComponentTyped } from "svelte"; + +export type CodeSnippetProps = { + /** + * Set the type of code snippet + * @default "single" + */ + type?: "single" | "inline" | "multi"; + + /** + * Set the code snippet text. + * Alternatively, use the default slot (e.g., `{code}`). + * + * NOTE: you *must* use the `code` prop for the copy-to-clipboard functionality. + * @default undefined + */ + code?: string; + + /** + * By default, this component uses `navigator.clipboard.writeText` API to copy text to the user's clipboard. + * + * Provide a custom function to override this behavior. + * @default async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } } + */ + copy?: (code: string) => void; + + /** + * Set to `true` to expand a multi-line code snippet (type="multi") + * @default false + */ + expanded?: boolean; + + /** + * Set to `true` to hide the copy button + * @default false + */ + hideCopyButton?: boolean; + + /** + * Set to `true` for the disabled variant. + * Only applies to the "single", "multi" types + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to wrap the text. + * + * NOTE: this prop only works with the `type="multi"` variant + * @default false + */ + wrapText?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + + /** + * Specify the ARIA label for the copy button icon + * @default undefined + */ + copyButtonDescription?: string; + + /** + * Specify the ARIA label of the copy button + * @default undefined + */ + copyLabel?: string; + + /** + * Specify the feedback text displayed when clicking the snippet + * @default "Copied!" + */ + feedback?: string; + + /** + * Set the timeout duration (ms) to display feedback text + * @default 2000 + */ + feedbackTimeout?: number; + + /** + * Specify the show less text. + * + * NOTE: this prop only works with the `type="multi"` variant + * @default "Show less" + */ + showLessText?: string; + + /** + * Specify the show more text + * + * NOTE: this prop only works with the `type="multi"` variant + * @default "Show more" + */ + showMoreText?: string; + + /** + * Set to `false` to hide the show more/less button + * + * NOTE: this prop only works with the `type="multi"` variant + * @default true + */ + showMoreLess?: boolean; + + /** + * Set an id for the code element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Obtain a reference to the pre HTML element + * @default null + */ + ref?: null | HTMLPreElement; +}; + +export default class CodeSnippet extends SvelteComponentTyped< + CodeSnippetProps, + { + expand: CustomEvent; + collapse: CustomEvent; + copy: CustomEvent; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + animationend: WindowEventMap["animationend"]; + }, + { default: {} } +> {} diff --git a/types/CodeSnippet/CodeSnippetSkeleton.d.ts b/types/CodeSnippet/CodeSnippetSkeleton.d.ts deleted file mode 100644 index aeee2546..00000000 --- a/types/CodeSnippet/CodeSnippetSkeleton.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -/// - -export interface CodeSnippetSkeletonProps extends svelte.JSX.HTMLAttributes { - /** - * Set the type of code snippet - * @default "single" - */ - type?: "single" | "inline" | "multi"; -} - -export default class CodeSnippetSkeleton { - $$prop_def: CodeSnippetSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/CodeSnippet/CodeSnippetSkeleton.svelte.d.ts b/types/CodeSnippet/CodeSnippetSkeleton.svelte.d.ts new file mode 100644 index 00000000..2274cf54 --- /dev/null +++ b/types/CodeSnippet/CodeSnippetSkeleton.svelte.d.ts @@ -0,0 +1,27 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set the type of code snippet + * @default "single" + */ + type?: "single" | "multi"; + + [key: `data-${string}`]: any; +}; + +export type CodeSnippetSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class CodeSnippetSkeleton extends SvelteComponentTyped< + CodeSnippetSkeletonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/ComboBox/ComboBox.d.ts b/types/ComboBox/ComboBox.d.ts deleted file mode 100644 index c553fea2..00000000 --- a/types/ComboBox/ComboBox.d.ts +++ /dev/null @@ -1,135 +0,0 @@ -/// - -export interface ComboBoxItem { - id: string; - text: string; -} - -export interface ComboBoxProps extends svelte.JSX.HTMLAttributes { - /** - * Set the combobox items - * @default [] - */ - items?: ComboBoxItem[]; - - /** - * Override the display of a combobox item - * @default (item) => item.text || item.id - */ - itemToString?: (item: ComboBoxItem) => string; - - /** - * Set the selected item by value index - * @default -1 - */ - selectedIndex?: number; - - /** - * Specify the selected combobox value - * @default "" - */ - value?: string; - - /** - * Set the size of the combobox - */ - size?: "sm" | "xl"; - - /** - * Set to `true` to disable the combobox - * @default false - */ - disabled?: boolean; - - /** - * Specify the title text of the combobox - * @default "" - */ - titleText?: string; - - /** - * Specify the placeholder text - * @default "" - */ - placeholder?: string; - - /** - * Specify the helper text - * @default "" - */ - helperText?: string; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to open the combobox menu dropdown - * @default false - */ - open?: boolean; - - /** - * Determine if an item should be filtered given the current combobox value - * @default () => true - */ - shouldFilterItem?: (item: ComboBoxItem, value: string) => boolean; - - /** - * Override the default translation ids - */ - translateWithId?: (id: any) => string; - - /** - * Set an id for the list box component - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; - - /** - * Specify a name attribute for the input - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - - /** - * Obtain a reference to the list HTML element - * @default null - */ - listRef?: null | HTMLDivElement; -} - -export default class ComboBox { - $$prop_def: ComboBoxProps; - $$slot_def: {}; - - $on( - eventname: "select", - cb: (event: CustomEvent<{ selectedId: string; selectedIndex: number; selectedItem: ComboBoxItem }>) => void - ): () => void; - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; - $on(eventname: "clear", cb: (event: WindowEventMap["clear"]) => void): () => void; - $on(eventname: "scroll", cb: (event: WindowEventMap["scroll"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/ComboBox/ComboBox.svelte.d.ts b/types/ComboBox/ComboBox.svelte.d.ts new file mode 100644 index 00000000..5e1de181 --- /dev/null +++ b/types/ComboBox/ComboBox.svelte.d.ts @@ -0,0 +1,189 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +export type ComboBoxItemId = any; + +export interface ComboBoxItem { + id: ComboBoxItemId; + text: string; + disabled?: boolean; +} + +type $RestProps = SvelteHTMLElements["input"]; + +type $Props = { + /** + * Set the combobox items + * @default [] + */ + items?: ReadonlyArray; + + /** + * Override the display of a combobox item + * @default (item) => item.text || item.id + */ + itemToString?: (item: ComboBoxItem) => string; + + /** + * Set the selected item by value id + * @default undefined + */ + selectedId?: ComboBoxItemId; + + /** + * Specify the selected combobox value + * @default "" + */ + value?: string; + + /** + * Specify the direction of the combobox dropdown menu + * @default "bottom" + */ + direction?: "bottom" | "top"; + + /** + * Set the size of the combobox + * @default undefined + */ + size?: "sm" | "xl"; + + /** + * Set to `true` to disable the combobox + * @default false + */ + disabled?: boolean; + + /** + * Specify the title text of the combobox + * @default "" + */ + titleText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Specify the placeholder text + * @default "" + */ + placeholder?: string; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Set to `true` to indicate an warning state + * @default false + */ + warn?: boolean; + + /** + * Specify the warning state text + * @default "" + */ + warnText?: string; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to open the combobox menu dropdown + * @default false + */ + open?: boolean; + + /** + * Determine if an item should be filtered given the current combobox value + * @default () => true + */ + shouldFilterItem?: (item: ComboBoxItem, value: string) => boolean; + + /** + * Override the chevron icon label based on the open state. + * Defaults to "Open menu" when closed and "Close menu" when open + * @default undefined + */ + translateWithId?: ( + id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId, + ) => string; + + /** + * Override the label of the clear button when the input has a selection. + * Defaults to "Clear selected item" since a combo box can only have on selection. + * @default undefined + */ + translateWithIdSelection?: (id: "clearSelection") => string; + + /** + * Set an id for the list box component + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the input + * @default undefined + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + + /** + * Obtain a reference to the list HTML element + * @default null + */ + listRef?: null | HTMLDivElement; + + [key: `data-${string}`]: any; +}; + +export type ComboBoxProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ComboBox extends SvelteComponentTyped< + ComboBoxProps, + { + select: CustomEvent<{ + selectedId: ComboBoxItemId; + selectedItem: ComboBoxItem; + }>; + clear: CustomEvent; + keydown: WindowEventMap["keydown"]; + keyup: WindowEventMap["keyup"]; + focus: WindowEventMap["focus"]; + blur: WindowEventMap["blur"]; + paste: WindowEventMap["paste"]; + scroll: WindowEventMap["scroll"]; + }, + { default: { item: ComboBoxItem; index: number }; titleText: {} } +> { + /** + * Clear the combo box programmatically + */ + clear: (options?: { focus?: boolean }) => void; +} diff --git a/types/ComposedModal/ComposedModal.d.ts b/types/ComposedModal/ComposedModal.d.ts deleted file mode 100644 index 4e78ba91..00000000 --- a/types/ComposedModal/ComposedModal.d.ts +++ /dev/null @@ -1,61 +0,0 @@ -/// - -export interface ComposedModalProps extends svelte.JSX.HTMLAttributes { - /** - * Set the size of the composed modal - */ - size?: "xs" | "sm" | "lg"; - - /** - * Set to `true` to open the modal - * @default false - */ - open?: boolean; - - /** - * Set to `true` to use the danger variant - * @default false - */ - danger?: boolean; - - /** - * Set to `true` to prevent the modal from closing when clicking outside - * @default false - */ - preventCloseOnClickOutside?: boolean; - - /** - * Specify a class for the inner modal - * @default "" - */ - containerClass?: string; - - /** - * Specify a selector to be focused when opening the modal - * @default "[data-modal-primary-focus]" - */ - selectorPrimaryFocus?: null | string; - - /** - * Obtain a reference to the top-level HTML element - * @default null - */ - ref?: null | HTMLDivElement; -} - -export default class ComposedModal { - $$prop_def: ComposedModalProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "transitionend", cb: (event: WindowEventMap["transitionend"]) => void): () => void; - $on(eventname: "submit", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "close", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "open", cb: (event: CustomEvent) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/ComposedModal/ComposedModal.svelte.d.ts b/types/ComposedModal/ComposedModal.svelte.d.ts new file mode 100644 index 00000000..bf5ed54f --- /dev/null +++ b/types/ComposedModal/ComposedModal.svelte.d.ts @@ -0,0 +1,69 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set the size of the composed modal + * @default undefined + */ + size?: "xs" | "sm" | "lg"; + + /** + * Set to `true` to open the modal + * @default false + */ + open?: boolean; + + /** + * Set to `true` to use the danger variant + * @default false + */ + danger?: boolean; + + /** + * Set to `true` to prevent the modal from closing when clicking outside + * @default false + */ + preventCloseOnClickOutside?: boolean; + + /** + * Specify a class for the inner modal + * @default "" + */ + containerClass?: string; + + /** + * Specify a selector to be focused when opening the modal + * @default "[data-modal-primary-focus]" + */ + selectorPrimaryFocus?: null | string; + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLDivElement; + + [key: `data-${string}`]: any; +}; + +export type ComposedModalProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ComposedModal extends SvelteComponentTyped< + ComposedModalProps, + { + transitionend: CustomEvent<{ open: boolean }>; + keydown: WindowEventMap["keydown"]; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + submit: CustomEvent; + ["click:button--primary"]: CustomEvent; + close: CustomEvent; + open: CustomEvent; + }, + { default: {} } +> {} diff --git a/types/ComposedModal/ModalBody.d.ts b/types/ComposedModal/ModalBody.d.ts deleted file mode 100644 index d1bdc682..00000000 --- a/types/ComposedModal/ModalBody.d.ts +++ /dev/null @@ -1,24 +0,0 @@ -/// - -export interface ModalBodyProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` if the modal contains form elements - * @default false - */ - hasForm?: boolean; - - /** - * Set to `true` if the modal contains scrolling content - * @default false - */ - hasScrollingContent?: boolean; -} - -export default class ModalBody { - $$prop_def: ModalBodyProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/ComposedModal/ModalBody.svelte.d.ts b/types/ComposedModal/ModalBody.svelte.d.ts new file mode 100644 index 00000000..ed9bccb5 --- /dev/null +++ b/types/ComposedModal/ModalBody.svelte.d.ts @@ -0,0 +1,28 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set to `true` if the modal contains form elements + * @default false + */ + hasForm?: boolean; + + /** + * Set to `true` if the modal contains scrolling content + * @default false + */ + hasScrollingContent?: boolean; + + [key: `data-${string}`]: any; +}; + +export type ModalBodyProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ModalBody extends SvelteComponentTyped< + ModalBodyProps, + Record, + { default: {} } +> {} diff --git a/types/ComposedModal/ModalFooter.d.ts b/types/ComposedModal/ModalFooter.d.ts deleted file mode 100644 index 75f0e181..00000000 --- a/types/ComposedModal/ModalFooter.d.ts +++ /dev/null @@ -1,46 +0,0 @@ -/// - -export interface ModalFooterProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the primary button text - * @default "" - */ - primaryButtonText?: string; - - /** - * Set to `true` to disable the primary button - * @default false - */ - primaryButtonDisabled?: boolean; - - /** - * Specify a class for the primary button - */ - primaryClass?: string; - - /** - * Specify the secondary button text - * @default "" - */ - secondaryButtonText?: string; - - /** - * Specify a class for the secondary button - */ - secondaryClass?: string; - - /** - * Set to `true` to use the danger variant - * @default false - */ - danger?: boolean; -} - -export default class ModalFooter { - $$prop_def: ModalFooterProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/ComposedModal/ModalFooter.svelte.d.ts b/types/ComposedModal/ModalFooter.svelte.d.ts new file mode 100644 index 00000000..8890c8a7 --- /dev/null +++ b/types/ComposedModal/ModalFooter.svelte.d.ts @@ -0,0 +1,65 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the primary button text + * @default "" + */ + primaryButtonText?: string; + + /** + * Specify the primary button icon + * @default undefined + */ + primaryButtonIcon?: any; + + /** + * Set to `true` to disable the primary button + * @default false + */ + primaryButtonDisabled?: boolean; + + /** + * Specify a class for the primary button + * @default undefined + */ + primaryClass?: string; + + /** + * Specify the secondary button text + * @default "" + */ + secondaryButtonText?: string; + + /** + * 2-tuple prop to render two secondary buttons for a 3 button modal + * supersedes `secondaryButtonText` + * @default [] + */ + secondaryButtons?: [{ text: string }, { text: string }]; + + /** + * Specify a class for the secondary button + * @default undefined + */ + secondaryClass?: string; + + /** + * Set to `true` to use the danger variant + * @default false + */ + danger?: boolean; + + [key: `data-${string}`]: any; +}; + +export type ModalFooterProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ModalFooter extends SvelteComponentTyped< + ModalFooterProps, + { ["click:button--secondary"]: CustomEvent<{ text: string }> }, + { default: {} } +> {} diff --git a/types/ComposedModal/ModalHeader.d.ts b/types/ComposedModal/ModalHeader.svelte.d.ts similarity index 58% rename from types/ComposedModal/ModalHeader.d.ts rename to types/ComposedModal/ModalHeader.svelte.d.ts index ff6e4cfe..9f8b2ca4 100644 --- a/types/ComposedModal/ModalHeader.d.ts +++ b/types/ComposedModal/ModalHeader.svelte.d.ts @@ -1,6 +1,9 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; -export interface ModalHeaderProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { /** * Specify the modal title * @default "" @@ -42,14 +45,14 @@ export interface ModalHeaderProps extends svelte.JSX.HTMLAttributes void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} +export type ModalHeaderProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ModalHeader extends SvelteComponentTyped< + ModalHeaderProps, + { click: WindowEventMap["click"] }, + { default: {} } +> {} diff --git a/types/ContentSwitcher/ContentSwitcher.d.ts b/types/ContentSwitcher/ContentSwitcher.d.ts deleted file mode 100644 index 078ca447..00000000 --- a/types/ContentSwitcher/ContentSwitcher.d.ts +++ /dev/null @@ -1,34 +0,0 @@ -/// - -export interface ContentSwitcherProps extends svelte.JSX.HTMLAttributes { - /** - * Set the selected index of the switch item - * @default 0 - */ - selectedIndex?: number; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Specify the size of the content switcher - */ - size?: "sm" | "xl"; -} - -export default class ContentSwitcher { - $$prop_def: ContentSwitcherProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/ContentSwitcher/ContentSwitcher.svelte.d.ts b/types/ContentSwitcher/ContentSwitcher.svelte.d.ts new file mode 100644 index 00000000..09a48ff3 --- /dev/null +++ b/types/ContentSwitcher/ContentSwitcher.svelte.d.ts @@ -0,0 +1,34 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set the selected index of the switch item + * @default 0 + */ + selectedIndex?: number; + + /** + * Specify the size of the content switcher + * @default undefined + */ + size?: "sm" | "xl"; + + [key: `data-${string}`]: any; +}; + +export type ContentSwitcherProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ContentSwitcher extends SvelteComponentTyped< + ContentSwitcherProps, + { + change: CustomEvent; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/ContentSwitcher/Switch.d.ts b/types/ContentSwitcher/Switch.d.ts deleted file mode 100644 index b54ae4c7..00000000 --- a/types/ContentSwitcher/Switch.d.ts +++ /dev/null @@ -1,48 +0,0 @@ -/// - -export interface SwitchProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the switch text - * Alternatively, use the named slot "text" (e.g., ...) - * @default "Provide text" - */ - text?: string; - - /** - * Set to `true` for the switch to be selected - * @default false - */ - selected?: boolean; - - /** - * Set to `true` to disable the switch - * @default false - */ - disabled?: boolean; - - /** - * Set an id for the button element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; - - /** - * Obtain a reference to the button HTML element - * @default null - */ - ref?: null | HTMLButtonElement; -} - -export default class Switch { - $$prop_def: SwitchProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/ContentSwitcher/Switch.svelte.d.ts b/types/ContentSwitcher/Switch.svelte.d.ts new file mode 100644 index 00000000..cbe3114c --- /dev/null +++ b/types/ContentSwitcher/Switch.svelte.d.ts @@ -0,0 +1,53 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["button"]; + +type $Props = { + /** + * Specify the switch text. + * Alternatively, use the "text" slot (e.g., `...`) + * @default "Provide text" + */ + text?: string; + + /** + * Set to `true` for the switch to be selected + * @default false + */ + selected?: boolean; + + /** + * Set to `true` to disable the switch + * @default false + */ + disabled?: boolean; + + /** + * Set an id for the button element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; + + [key: `data-${string}`]: any; +}; + +export type SwitchProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Switch extends SvelteComponentTyped< + SwitchProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + keydown: WindowEventMap["keydown"]; + }, + { default: {} } +> {} diff --git a/types/ContextMenu/ContextMenu.svelte.d.ts b/types/ContextMenu/ContextMenu.svelte.d.ts new file mode 100644 index 00000000..6322cbda --- /dev/null +++ b/types/ContextMenu/ContextMenu.svelte.d.ts @@ -0,0 +1,53 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["ul"]; + +type $Props = { + /** + * Specify an element or list of elements to trigger the context menu. + * If no element is specified, the context menu applies to the entire window + * @default null + */ + target?: null | ReadonlyArray; + + /** + * Set to `true` to open the menu + * Either `x` and `y` must be greater than zero + * @default false + */ + open?: boolean; + + /** + * Specify the horizontal offset of the menu position + * @default 0 + */ + x?: number; + + /** + * Specify the vertical offset of the menu position + * @default 0 + */ + y?: number; + + /** + * Obtain a reference to the unordered list HTML element + * @default null + */ + ref?: null | HTMLUListElement; + + [key: `data-${string}`]: any; +}; + +export type ContextMenuProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ContextMenu extends SvelteComponentTyped< + ContextMenuProps, + { + open: CustomEvent; + click: WindowEventMap["click"]; + keydown: WindowEventMap["keydown"]; + close: CustomEvent; + }, + { default: {} } +> {} diff --git a/types/ContextMenu/ContextMenuDivider.svelte.d.ts b/types/ContextMenu/ContextMenuDivider.svelte.d.ts new file mode 100644 index 00000000..f2a34d39 --- /dev/null +++ b/types/ContextMenu/ContextMenuDivider.svelte.d.ts @@ -0,0 +1,9 @@ +import type { SvelteComponentTyped } from "svelte"; + +export type ContextMenuDividerProps = {}; + +export default class ContextMenuDivider extends SvelteComponentTyped< + ContextMenuDividerProps, + Record, + {} +> {} diff --git a/types/ContextMenu/ContextMenuGroup.svelte.d.ts b/types/ContextMenu/ContextMenuGroup.svelte.d.ts new file mode 100644 index 00000000..895139ae --- /dev/null +++ b/types/ContextMenu/ContextMenuGroup.svelte.d.ts @@ -0,0 +1,20 @@ +import type { SvelteComponentTyped } from "svelte"; + +export type ContextMenuGroupProps = { + /** + * @default [] + */ + selectedIds?: ReadonlyArray; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; +}; + +export default class ContextMenuGroup extends SvelteComponentTyped< + ContextMenuGroupProps, + Record, + { default: {} } +> {} diff --git a/types/ContextMenu/ContextMenuOption.svelte.d.ts b/types/ContextMenu/ContextMenuOption.svelte.d.ts new file mode 100644 index 00000000..3082a4b2 --- /dev/null +++ b/types/ContextMenu/ContextMenuOption.svelte.d.ts @@ -0,0 +1,86 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["li"]; + +type $Props = { + /** + * Specify the kind of option + * @default "default" + */ + kind?: "default" | "danger"; + + /** + * Set to `true` to enable the disabled state + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to indent the label + * @default false + */ + indented?: boolean; + + /** + * Specify the icon to render + * Icon is rendered to the left of the label text + * @default undefined + */ + icon?: any; + + /** + * Specify the label text. + * Alternatively, use the "labelText" slot (e.g., `...`) + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to use the selected variant + * @default false + */ + selected?: boolean; + + /** + * Set to `true` to enable the selectable variant + * Automatically set to `true` if `selected` is `true` + * @default false + */ + selectable?: boolean; + + /** + * Specify the shortcut text. + * Alternatively, use the "shortcutText" slot (e.g., `...`) + * @default "" + */ + shortcutText?: string; + + /** + * Specify the id + * It's recommended to provide an id as a value to bind to within a selectable/radio menu group + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Obtain a reference to the list item HTML element + * @default null + */ + ref?: null | HTMLLIElement; + + [key: `data-${string}`]: any; +}; + +export type ContextMenuOptionProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ContextMenuOption extends SvelteComponentTyped< + ContextMenuOptionProps, + { + keydown: WindowEventMap["keydown"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + click: CustomEvent; + }, + { default: {}; icon: {}; labelText: {}; shortcutText: {} } +> {} diff --git a/types/ContextMenu/ContextMenuRadioGroup.svelte.d.ts b/types/ContextMenu/ContextMenuRadioGroup.svelte.d.ts new file mode 100644 index 00000000..dac0c5d4 --- /dev/null +++ b/types/ContextMenu/ContextMenuRadioGroup.svelte.d.ts @@ -0,0 +1,21 @@ +import type { SvelteComponentTyped } from "svelte"; + +export type ContextMenuRadioGroupProps = { + /** + * Set the selected radio group id + * @default "" + */ + selectedId?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; +}; + +export default class ContextMenuRadioGroup extends SvelteComponentTyped< + ContextMenuRadioGroupProps, + Record, + { default: {} } +> {} diff --git a/types/Copy/Copy.d.ts b/types/Copy/Copy.d.ts deleted file mode 100644 index d66254ac..00000000 --- a/types/Copy/Copy.d.ts +++ /dev/null @@ -1,32 +0,0 @@ -/// - -export interface CopyProps extends svelte.JSX.HTMLAttributes { - /** - * Set the feedback text shown after clicking the button - * @default "Copied!" - */ - feedback?: string; - - /** - * Set the timeout duration (ms) to display feedback text - * @default 2000 - */ - feedbackTimeout?: number; - - /** - * Obtain a reference to the button HTML element - * @default null - */ - ref?: null | HTMLButtonElement; -} - -export default class Copy { - $$prop_def: CopyProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "animationend", cb: (event: WindowEventMap["animationend"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/CopyButton/CopyButton.d.ts b/types/CopyButton/CopyButton.d.ts deleted file mode 100644 index c1f3061e..00000000 --- a/types/CopyButton/CopyButton.d.ts +++ /dev/null @@ -1,19 +0,0 @@ -/// -import { CopyProps } from "../Copy/Copy"; - -export interface CopyButtonProps extends CopyProps { - /** - * Set the title and ARIA label for the copy button - * @default "Copy to clipboard" - */ - iconDescription?: string; -} - -export default class CopyButton { - $$prop_def: CopyButtonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "animationend", cb: (event: WindowEventMap["animationend"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/CopyButton/CopyButton.svelte.d.ts b/types/CopyButton/CopyButton.svelte.d.ts new file mode 100644 index 00000000..c0319f9d --- /dev/null +++ b/types/CopyButton/CopyButton.svelte.d.ts @@ -0,0 +1,50 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["button"]; + +type $Props = { + /** + * Set the feedback text shown after clicking the button + * @default "Copied!" + */ + feedback?: string; + + /** + * Set the timeout duration (ms) to display feedback text + * @default 2000 + */ + feedbackTimeout?: number; + + /** + * Set the title and ARIA label for the copy button + * @default "Copy to clipboard" + */ + iconDescription?: string; + + /** + * Specify the text to copy + * @default undefined + */ + text: string; + + /** + * Override the default copy behavior of using the navigator.clipboard.writeText API to copy text + * @default async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } } + */ + copy?: (text: string) => void; + + [key: `data-${string}`]: any; +}; + +export type CopyButtonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class CopyButton extends SvelteComponentTyped< + CopyButtonProps, + { + click: WindowEventMap["click"]; + animationend: WindowEventMap["animationend"]; + copy: CustomEvent; + }, + {} +> {} diff --git a/types/DataTable/DataTable.d.ts b/types/DataTable/DataTable.d.ts deleted file mode 100644 index 45282b4d..00000000 --- a/types/DataTable/DataTable.d.ts +++ /dev/null @@ -1,158 +0,0 @@ -/// - -export type DataTableKey = string; - -export type DataTableValue = any; - -export interface DataTableEmptyHeader { - key: DataTableKey; - empty: boolean; - display?: (item: Value) => DataTableValue; - sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1; - columnMenu?: boolean; -} - -export interface DataTableNonEmptyHeader { - key: DataTableKey; - value: DataTableValue; - display?: (item: Value) => DataTableValue; - sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1; - columnMenu?: boolean; -} - -export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader; - -export interface DataTableRow { - id: any; - [key: string]: DataTableValue; -} - -export type DataTableRowId = string; - -export interface DataTableCell { - key: DataTableKey; - value: DataTableValue; -} - -export interface DataTableProps { - /** - * Specify the data table headers - * @default [] - */ - headers?: DataTableHeader[]; - - /** - * Specify the rows the data table should render - * keys defined in `headers` are used for the row ids - * @default [] - */ - rows?: DataTableRow[]; - - /** - * Set the size of the data table - */ - size?: "compact" | "short" | "tall"; - - /** - * Specify the title of the data table - * @default "" - */ - title?: string; - - /** - * Specify the description of the data table - * @default "" - */ - description?: string; - - /** - * Set to `true` to use zebra styles - * @default false - */ - zebra?: boolean; - - /** - * Set to `true` for the sortable variant - * @default false - */ - sortable?: boolean; - - /** - * Set to `true` for the expandable variant - * Automatically set to `true` if `batchExpansion` is `true` - * @default false - */ - expandable?: boolean; - - /** - * Set to `true` to enable batch expansion - * @default false - */ - batchExpansion?: boolean; - - /** - * Specify the row ids to be expanded - * @default [] - */ - expandedRowIds?: DataTableRowId[]; - - /** - * Set to `true` for the radio selection variant - * @default false - */ - radio?: boolean; - - /** - * Set to `true` for the selectable variant - * Automatically set to `true` if `radio` or `batchSelection` are `true` - * @default false - */ - selectable?: boolean; - - /** - * Set to `true` to enable batch selection - * @default false - */ - batchSelection?: boolean; - - /** - * Specify the row ids to be selected - * @default [] - */ - selectedRowIds?: DataTableRowId[]; - - /** - * Set to `true` to enable a sticky header - * @default false - */ - stickyHeader?: boolean; -} - -export default class DataTable { - $$prop_def: DataTableProps; - $$slot_def: { - default: {}; - cell: { row: DataTableRow; cell: DataTableCell }; - ["cell-header"]: { header: DataTableNonEmptyHeader }; - ["expanded-row"]: { row: DataTableRow }; - }; - - $on( - eventname: "click", - cb: (event: CustomEvent<{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell }>) => void - ): () => void; - $on(eventname: "click:header--expand", cb: (event: CustomEvent<{ expanded: boolean }>) => void): () => void; - $on( - eventname: "click:header", - cb: (event: CustomEvent<{ header: DataTableHeader; sortDirection: "ascending" | "descending" | "none" }>) => void - ): () => void; - $on(eventname: "click:row", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "mouseenter:row", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "mouseleave:row", cb: (event: CustomEvent) => void): () => void; - $on( - eventname: "click:row--expand", - cb: (event: CustomEvent<{ expanded: boolean; row: DataTableRow }>) => void - ): () => void; - $on(eventname: "click:cell", cb: (event: CustomEvent) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/DataTable/DataTable.svelte.d.ts b/types/DataTable/DataTable.svelte.d.ts new file mode 100644 index 00000000..d5914a02 --- /dev/null +++ b/types/DataTable/DataTable.svelte.d.ts @@ -0,0 +1,238 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +export type DataTableKey = + import("./DataTableTypes.d.ts").PropertyPath; + +export type DataTableValue = any; + +export interface DataTableEmptyHeader { + key: DataTableKey | (string & {}); + empty: boolean; + display?: (item: DataTableValue, row: Row) => DataTableValue; + sort?: false | ((a: DataTableValue, b: DataTableValue) => number); + columnMenu?: boolean; + width?: string; + minWidth?: string; +} + +export interface DataTableNonEmptyHeader { + key: DataTableKey; + value: DataTableValue; + display?: (item: DataTableValue, row: Row) => DataTableValue; + sort?: false | ((a: DataTableValue, b: DataTableValue) => number); + columnMenu?: boolean; + width?: string; + minWidth?: string; +} + +export type DataTableHeader = + | DataTableNonEmptyHeader + | DataTableEmptyHeader; + +export interface DataTableRow { + id: any; + [key: string]: DataTableValue; +} + +export type DataTableRowId = any; + +export interface DataTableCell { + key: DataTableKey | (string & {}); + value: DataTableValue; + display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; +} + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the data table headers + * @default [] + */ + headers?: ReadonlyArray>; + + /** + * Specify the rows the data table should render + * keys defined in `headers` are used for the row ids + * @default [] + */ + rows?: ReadonlyArray; + + /** + * Set the size of the data table + * @default undefined + */ + size?: "compact" | "short" | "medium" | "tall"; + + /** + * Specify the title of the data table + * @default "" + */ + title?: string; + + /** + * Specify the description of the data table + * @default "" + */ + description?: string; + + /** + * Specify a name attribute for the input elements + * in a selectable data table (radio or checkbox). + * When the table is inside a form, this name will + * be included in the form data on submit. + * @default "ccs-" + Math.random().toString(36) + */ + inputName?: string; + + /** + * Set to `true` to use zebra styles + * @default false + */ + zebra?: boolean; + + /** + * Set to `true` for the sortable variant + * @default false + */ + sortable?: boolean; + + /** + * Specify the header key to sort by + * @default null + */ + sortKey?: DataTableKey; + + /** + * Specify the sort direction + * @default "none" + */ + sortDirection?: "none" | "ascending" | "descending"; + + /** + * Set to `true` for the expandable variant + * Automatically set to `true` if `batchExpansion` is `true` + * @default false + */ + expandable?: boolean; + + /** + * Set to `true` to enable batch expansion + * @default false + */ + batchExpansion?: boolean; + + /** + * Specify the row ids to be expanded + * @default [] + */ + expandedRowIds?: ReadonlyArray; + + /** + * Specify the ids for rows that should not be expandable + * @default [] + */ + nonExpandableRowIds?: ReadonlyArray; + + /** + * Set to `true` for the radio selection variant + * @default false + */ + radio?: boolean; + + /** + * Set to `true` for the selectable variant + * Automatically set to `true` if `radio` or `batchSelection` are `true` + * @default false + */ + selectable?: boolean; + + /** + * Set to `true` to enable batch selection + * @default false + */ + batchSelection?: boolean; + + /** + * Specify the row ids to be selected + * @default [] + */ + selectedRowIds?: ReadonlyArray; + + /** + * Specify the ids of rows that should not be selectable + * @default [] + */ + nonSelectableRowIds?: ReadonlyArray; + + /** + * Set to `true` to enable a sticky header + * @default false + */ + stickyHeader?: boolean; + + /** + * Set to `true` to use static width + * @default false + */ + useStaticWidth?: boolean; + + /** + * Specify the number of items to display in a page + * @default 0 + */ + pageSize?: number; + + /** + * Set to `number` to set current page + * @default 0 + */ + page?: number; + + [key: `data-${string}`]: any; +}; + +export type DataTableProps = Omit<$RestProps, keyof $Props> & + $Props; + +export default class DataTable< + Row extends DataTableRow = DataTableRow, +> extends SvelteComponentTyped< + DataTableProps, + { + click: CustomEvent<{ + header?: DataTableHeader; + row?: Row; + cell?: DataTableCell; + }>; + ["click:header--expand"]: CustomEvent<{ expanded: boolean }>; + ["click:header"]: CustomEvent<{ + header: DataTableHeader; + sortDirection?: "ascending" | "descending" | "none"; + }>; + ["click:header--select"]: CustomEvent<{ + indeterminate: boolean; + selected: boolean; + }>; + ["click:row"]: CustomEvent; + ["mouseenter:row"]: CustomEvent; + ["mouseleave:row"]: CustomEvent; + ["click:row--expand"]: CustomEvent<{ expanded: boolean; row: Row }>; + ["click:row--select"]: CustomEvent<{ selected: boolean; row: Row }>; + ["click:cell"]: CustomEvent>; + }, + { + default: {}; + cell: { + row: Row; + cell: DataTableCell; + rowIndex: number; + cellIndex: number; + }; + ["cell-header"]: { header: DataTableNonEmptyHeader }; + description: {}; + ["expanded-row"]: { row: Row }; + title: {}; + } +> {} diff --git a/types/DataTable/DataTableSkeleton.svelte.d.ts b/types/DataTable/DataTableSkeleton.svelte.d.ts new file mode 100644 index 00000000..1ace782e --- /dev/null +++ b/types/DataTable/DataTableSkeleton.svelte.d.ts @@ -0,0 +1,67 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +import type { DataTableHeader } from "./DataTable.svelte"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the number of columns + * Superseded by `headers` if `headers` is a non-empty array + * @default 5 + */ + columns?: number; + + /** + * Specify the number of rows + * @default 5 + */ + rows?: number; + + /** + * Set the size of the data table + * @default undefined + */ + size?: "compact" | "short" | "tall"; + + /** + * Set to `true` to apply zebra styles to the datatable rows + * @default false + */ + zebra?: boolean; + + /** + * Set to `false` to hide the header + * @default true + */ + showHeader?: boolean; + + /** + * Set the column headers + * Supersedes `columns` if value is a non-empty array + * @default [] + */ + headers?: ReadonlyArray>; + + /** + * Set to `false` to hide the toolbar + * @default true + */ + showToolbar?: boolean; + + [key: `data-${string}`]: any; +}; + +export type DataTableSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class DataTableSkeleton extends SvelteComponentTyped< + DataTableSkeletonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/DataTable/DataTableTypes.d.ts b/types/DataTable/DataTableTypes.d.ts new file mode 100644 index 00000000..c7c8c589 --- /dev/null +++ b/types/DataTable/DataTableTypes.d.ts @@ -0,0 +1,18 @@ +type PathDepth = [never, 0, 1, 2, ...0[]]; + +type Join = K extends string | number + ? P extends string | number + ? `${K}${"" extends P ? "" : "."}${P}` + : never + : never; + +// For performance, the maximum traversal depth is 10. +export type PropertyPath = [D] extends [never] + ? never + : T extends object + ? { + [K in keyof T]-?: K extends string | number + ? `${K}` | Join> + : never; + }[keyof T] + : ""; diff --git a/types/DataTable/Table.d.ts b/types/DataTable/Table.d.ts deleted file mode 100644 index 26de4a4e..00000000 --- a/types/DataTable/Table.d.ts +++ /dev/null @@ -1,47 +0,0 @@ -/// - -export interface TableProps extends svelte.JSX.HTMLAttributes { - /** - * Set the size of the table - */ - size?: "compact" | "short" | "tall"; - - /** - * Set to `true` to use zebra styles - * @default false - */ - zebra?: boolean; - - /** - * Set to `true` to use static width - * @default false - */ - useStaticWidth?: boolean; - - /** - * Set to `true` for the bordered variant - * @default false - */ - shouldShowBorder?: boolean; - - /** - * Set to `true` for the sortable variant - * @default false - */ - sortable?: boolean; - - /** - * Set to `true` to enable a sticky header - * @default false - */ - stickyHeader?: boolean; -} - -export default class Table { - $$prop_def: TableProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/DataTable/Table.svelte.d.ts b/types/DataTable/Table.svelte.d.ts new file mode 100644 index 00000000..c8621f5a --- /dev/null +++ b/types/DataTable/Table.svelte.d.ts @@ -0,0 +1,52 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["section"]; + +type $Props = { + /** + * Set the size of the table + * @default undefined + */ + size?: "compact" | "short" | "medium" | "tall"; + + /** + * Set to `true` to use zebra styles + * @default false + */ + zebra?: boolean; + + /** + * Set to `true` to use static width + * @default false + */ + useStaticWidth?: boolean; + + /** + * Set to `true` for the sortable variant + * @default false + */ + sortable?: boolean; + + /** + * Set to `true` to enable a sticky header + * @default false + */ + stickyHeader?: boolean; + + /** + * Set the style attribute on the `table` element + * @default undefined + */ + tableStyle?: string; + + [key: `data-${string}`]: any; +}; + +export type TableProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Table extends SvelteComponentTyped< + TableProps, + Record, + { default: {} } +> {} diff --git a/types/DataTable/TableBody.d.ts b/types/DataTable/TableBody.d.ts deleted file mode 100644 index 870bdce4..00000000 --- a/types/DataTable/TableBody.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -/// - -export interface TableBodyProps extends svelte.JSX.HTMLAttributes {} - -export default class TableBody { - $$prop_def: TableBodyProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/DataTable/TableBody.svelte.d.ts b/types/DataTable/TableBody.svelte.d.ts new file mode 100644 index 00000000..a9a060bb --- /dev/null +++ b/types/DataTable/TableBody.svelte.d.ts @@ -0,0 +1,16 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["tbody"]; + +type $Props = { + [key: `data-${string}`]: any; +}; + +export type TableBodyProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class TableBody extends SvelteComponentTyped< + TableBodyProps, + Record, + { default: {} } +> {} diff --git a/types/DataTable/TableCell.d.ts b/types/DataTable/TableCell.d.ts deleted file mode 100644 index 9e927282..00000000 --- a/types/DataTable/TableCell.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -/// - -export interface TableCellProps extends svelte.JSX.HTMLAttributes {} - -export default class TableCell { - $$prop_def: TableCellProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/DataTable/TableCell.svelte.d.ts b/types/DataTable/TableCell.svelte.d.ts new file mode 100644 index 00000000..db31dbac --- /dev/null +++ b/types/DataTable/TableCell.svelte.d.ts @@ -0,0 +1,21 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["td"]; + +type $Props = { + [key: `data-${string}`]: any; +}; + +export type TableCellProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class TableCell extends SvelteComponentTyped< + TableCellProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/DataTable/TableContainer.d.ts b/types/DataTable/TableContainer.d.ts deleted file mode 100644 index fece36a0..00000000 --- a/types/DataTable/TableContainer.d.ts +++ /dev/null @@ -1,30 +0,0 @@ -/// - -export interface TableContainerProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the title of the data table - * @default "" - */ - title?: string; - - /** - * Specify the description of the data table - * @default "" - */ - description?: string; - - /** - * Set to `true` to enable a sticky header - * @default false - */ - stickyHeader?: boolean; -} - -export default class TableContainer { - $$prop_def: TableContainerProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/DataTable/TableContainer.svelte.d.ts b/types/DataTable/TableContainer.svelte.d.ts new file mode 100644 index 00000000..09382e23 --- /dev/null +++ b/types/DataTable/TableContainer.svelte.d.ts @@ -0,0 +1,40 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the title of the data table + * @default "" + */ + title?: string; + + /** + * Specify the description of the data table + * @default "" + */ + description?: string; + + /** + * Set to `true` to enable a sticky header + * @default false + */ + stickyHeader?: boolean; + + /** + * Set to `true` to use static width + * @default false + */ + useStaticWidth?: boolean; + + [key: `data-${string}`]: any; +}; + +export type TableContainerProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class TableContainer extends SvelteComponentTyped< + TableContainerProps, + Record, + { default: {} } +> {} diff --git a/types/DataTable/TableHead.d.ts b/types/DataTable/TableHead.d.ts deleted file mode 100644 index afa55613..00000000 --- a/types/DataTable/TableHead.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -/// - -export interface TableHeadProps extends svelte.JSX.HTMLAttributes {} - -export default class TableHead { - $$prop_def: TableHeadProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/DataTable/TableHead.svelte.d.ts b/types/DataTable/TableHead.svelte.d.ts new file mode 100644 index 00000000..b7be26dc --- /dev/null +++ b/types/DataTable/TableHead.svelte.d.ts @@ -0,0 +1,21 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["thead"]; + +type $Props = { + [key: `data-${string}`]: any; +}; + +export type TableHeadProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class TableHead extends SvelteComponentTyped< + TableHeadProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/DataTable/TableHeader.d.ts b/types/DataTable/TableHeader.d.ts deleted file mode 100644 index 1995d6fc..00000000 --- a/types/DataTable/TableHeader.d.ts +++ /dev/null @@ -1,34 +0,0 @@ -/// - -export interface TableHeaderProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the `scope` attribute - * @default "col" - */ - scope?: string; - - /** - * Override the default id translations - * @default () => "" - */ - translateWithId?: () => string; - - /** - * Set an id for the top-level element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; -} - -export default class TableHeader { - $$prop_def: TableHeaderProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/DataTable/TableHeader.svelte.d.ts b/types/DataTable/TableHeader.svelte.d.ts new file mode 100644 index 00000000..b0dd2925 --- /dev/null +++ b/types/DataTable/TableHeader.svelte.d.ts @@ -0,0 +1,57 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["th"]; + +type $Props = { + /** + * Set to `true` for the sortable variant + * @default false + */ + sortable?: boolean; + + /** + * Specify the sort direction + * @default "none" + */ + sortDirection?: "none" | "ascending" | "descending"; + + /** + * Set to `true` if the column sorting + * @default false + */ + active?: boolean; + + /** + * Specify the `scope` attribute + * @default "col" + */ + scope?: string; + + /** + * Override the default id translations + * @default () => "" + */ + translateWithId?: () => string; + + /** + * Set an id for the top-level element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + [key: `data-${string}`]: any; +}; + +export type TableHeaderProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class TableHeader extends SvelteComponentTyped< + TableHeaderProps, + { + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + click: WindowEventMap["click"]; + }, + { default: {} } +> {} diff --git a/types/DataTable/TableRow.d.ts b/types/DataTable/TableRow.d.ts deleted file mode 100644 index d18a7c1c..00000000 --- a/types/DataTable/TableRow.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -/// - -export interface TableRowProps extends svelte.JSX.HTMLAttributes {} - -export default class TableRow { - $$prop_def: TableRowProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/DataTable/TableRow.svelte.d.ts b/types/DataTable/TableRow.svelte.d.ts new file mode 100644 index 00000000..f4b30b83 --- /dev/null +++ b/types/DataTable/TableRow.svelte.d.ts @@ -0,0 +1,21 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["tr"]; + +type $Props = { + [key: `data-${string}`]: any; +}; + +export type TableRowProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class TableRow extends SvelteComponentTyped< + TableRowProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/DataTable/Toolbar.d.ts b/types/DataTable/Toolbar.d.ts deleted file mode 100644 index 9f44ef2d..00000000 --- a/types/DataTable/Toolbar.d.ts +++ /dev/null @@ -1,18 +0,0 @@ -/// - -export interface ToolbarProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the toolbar size - * @default "default" - */ - size?: "sm" | "default"; -} - -export default class Toolbar { - $$prop_def: ToolbarProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/DataTable/Toolbar.svelte.d.ts b/types/DataTable/Toolbar.svelte.d.ts new file mode 100644 index 00000000..e70e1955 --- /dev/null +++ b/types/DataTable/Toolbar.svelte.d.ts @@ -0,0 +1,22 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["section"]; + +type $Props = { + /** + * Specify the toolbar size + * @default "default" + */ + size?: "sm" | "default"; + + [key: `data-${string}`]: any; +}; + +export type ToolbarProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Toolbar extends SvelteComponentTyped< + ToolbarProps, + Record, + { default: {} } +> {} diff --git a/types/DataTable/ToolbarBatchActions.d.ts b/types/DataTable/ToolbarBatchActions.d.ts deleted file mode 100644 index a85a5aec..00000000 --- a/types/DataTable/ToolbarBatchActions.d.ts +++ /dev/null @@ -1,18 +0,0 @@ -/// - -export interface ToolbarBatchActionsProps extends svelte.JSX.HTMLAttributes { - /** - * Override the total items selected text - * @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected` - */ - formatTotalSelected?: (totalSelected: number) => string; -} - -export default class ToolbarBatchActions { - $$prop_def: ToolbarBatchActionsProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/DataTable/ToolbarBatchActions.svelte.d.ts b/types/DataTable/ToolbarBatchActions.svelte.d.ts new file mode 100644 index 00000000..109466dd --- /dev/null +++ b/types/DataTable/ToolbarBatchActions.svelte.d.ts @@ -0,0 +1,28 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Override the total items selected text + * @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected` + */ + formatTotalSelected?: (totalSelected: number) => string; + + /** + * Use a boolean to show or hide the toolbar + * @default undefined + */ + active?: undefined | boolean; + + [key: `data-${string}`]: any; +}; + +export type ToolbarBatchActionsProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ToolbarBatchActions extends SvelteComponentTyped< + ToolbarBatchActionsProps, + { cancel: CustomEvent }, + { default: {}; cancel: {} } +> {} diff --git a/types/DataTable/ToolbarContent.d.ts b/types/DataTable/ToolbarContent.d.ts deleted file mode 100644 index df5bd531..00000000 --- a/types/DataTable/ToolbarContent.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -/// - -export interface ToolbarContentProps {} - -export default class ToolbarContent { - $$prop_def: ToolbarContentProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/DataTable/ToolbarContent.svelte.d.ts b/types/DataTable/ToolbarContent.svelte.d.ts new file mode 100644 index 00000000..de27dc36 --- /dev/null +++ b/types/DataTable/ToolbarContent.svelte.d.ts @@ -0,0 +1,9 @@ +import type { SvelteComponentTyped } from "svelte"; + +export type ToolbarContentProps = {}; + +export default class ToolbarContent extends SvelteComponentTyped< + ToolbarContentProps, + Record, + { default: {} } +> {} diff --git a/types/DataTable/ToolbarMenu.d.ts b/types/DataTable/ToolbarMenu.d.ts deleted file mode 100644 index 41904ad5..00000000 --- a/types/DataTable/ToolbarMenu.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -/// -import { OverflowMenuProps } from "../OverflowMenu/OverflowMenu"; - -export interface ToolbarMenuProps extends OverflowMenuProps {} - -export default class ToolbarMenu { - $$prop_def: ToolbarMenuProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/DataTable/ToolbarMenu.svelte.d.ts b/types/DataTable/ToolbarMenu.svelte.d.ts new file mode 100644 index 00000000..564df6fb --- /dev/null +++ b/types/DataTable/ToolbarMenu.svelte.d.ts @@ -0,0 +1,10 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { OverflowMenuProps } from "../OverflowMenu/OverflowMenu.svelte"; + +export type ToolbarMenuProps = OverflowMenuProps & {}; + +export default class ToolbarMenu extends SvelteComponentTyped< + ToolbarMenuProps, + Record, + { default: {} } +> {} diff --git a/types/DataTable/ToolbarMenuItem.d.ts b/types/DataTable/ToolbarMenuItem.d.ts deleted file mode 100644 index 3061f753..00000000 --- a/types/DataTable/ToolbarMenuItem.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -/// -import { OverflowMenuItemProps } from "../OverflowMenu/OverflowMenuItem"; - -export interface ToolbarMenuItemProps extends OverflowMenuItemProps {} - -export default class ToolbarMenuItem { - $$prop_def: ToolbarMenuItemProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/DataTable/ToolbarMenuItem.svelte.d.ts b/types/DataTable/ToolbarMenuItem.svelte.d.ts new file mode 100644 index 00000000..cf55221d --- /dev/null +++ b/types/DataTable/ToolbarMenuItem.svelte.d.ts @@ -0,0 +1,10 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { OverflowMenuItemProps } from "../OverflowMenu/OverflowMenuItem.svelte"; + +export type ToolbarMenuItemProps = OverflowMenuItemProps & {}; + +export default class ToolbarMenuItem extends SvelteComponentTyped< + ToolbarMenuItemProps, + { click: WindowEventMap["click"]; keydown: WindowEventMap["keydown"] }, + { default: {} } +> {} diff --git a/types/DataTable/ToolbarSearch.d.ts b/types/DataTable/ToolbarSearch.d.ts deleted file mode 100644 index 8ca3c8c5..00000000 --- a/types/DataTable/ToolbarSearch.d.ts +++ /dev/null @@ -1,44 +0,0 @@ -/// - -export interface ToolbarSearchProps { - /** - * Specify the value of the search input - * @default "" - */ - value?: number | string; - - /** - * Set to `true` to expand the search bar - * @default false - */ - expanded?: boolean; - - /** - * Set to `true` to keep the search bar expanded - * @default false - */ - persistent?: boolean; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; -} - -export default class ToolbarSearch { - $$prop_def: ToolbarSearchProps; - $$slot_def: {}; - - $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; - $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; - $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/DataTable/ToolbarSearch.svelte.d.ts b/types/DataTable/ToolbarSearch.svelte.d.ts new file mode 100644 index 00000000..76097753 --- /dev/null +++ b/types/DataTable/ToolbarSearch.svelte.d.ts @@ -0,0 +1,84 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["input"]; + +type $Props = { + /** + * Specify the value of the search input + * @default "" + */ + value?: number | string; + + /** + * Set to `true` to expand the search bar + * @default false + */ + expanded?: boolean; + + /** + * Set to `true` to keep the search bar expanded + * @default false + */ + persistent?: boolean; + + /** + * Set to `true` to disable the search bar + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to filter table rows using the search value. + * + * If `true`, the default search excludes `id`, `cells` fields and + * only does a basic comparison on string and number type cell values. + * + * To implement your own client-side filtering, pass a function + * that accepts a row and value and returns a boolean. + * @default false + */ + shouldFilterRows?: + | boolean + | (( + row: import("./DataTable.svelte").DataTableRow, + value: number | string, + ) => boolean); + + /** + * The filtered row ids + * @default [] + */ + filteredRowIds?: ReadonlyArray; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + + [key: `data-${string}`]: any; +}; + +export type ToolbarSearchProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ToolbarSearch extends SvelteComponentTyped< + ToolbarSearchProps, + { + clear: CustomEvent; + change: WindowEventMap["change"]; + input: WindowEventMap["input"]; + focus: WindowEventMap["focus"]; + blur: WindowEventMap["blur"]; + keyup: WindowEventMap["keyup"]; + keydown: WindowEventMap["keydown"]; + paste: WindowEventMap["paste"]; + }, + {} +> {} diff --git a/types/DataTableSkeleton/DataTableSkeleton.d.ts b/types/DataTableSkeleton/DataTableSkeleton.d.ts deleted file mode 100644 index 73167a0e..00000000 --- a/types/DataTableSkeleton/DataTableSkeleton.d.ts +++ /dev/null @@ -1,60 +0,0 @@ -/// -import { DataTableHeader } from "../DataTable/DataTable"; - -export interface DataTableSkeletonProps - extends DataTableHeader, - svelte.JSX.HTMLAttributes { - /** - * Specify the number of columns - * Superseded by `headers` if `headers` is a non-empty array - * @default 5 - */ - columns?: number; - - /** - * Specify the number of rows - * @default 5 - */ - rows?: number; - - /** - * Set the size of the data table - */ - size?: "compact" | "short" | "tall"; - - /** - * Set to `true` to apply zebra styles to the datatable rows - * @default false - */ - zebra?: boolean; - - /** - * Set to `false` to hide the header - * @default true - */ - showHeader?: boolean; - - /** - * Set the column headers - * Supersedes `columns` if value is a non-empty array - * @default [] - */ - headers?: string[] | Partial[]; - - /** - * Set to `false` to hide the toolbar - * @default true - */ - showToolbar?: boolean; -} - -export default class DataTableSkeleton { - $$prop_def: DataTableSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/DatePicker/DatePicker.d.ts b/types/DatePicker/DatePicker.d.ts deleted file mode 100644 index b501df1d..00000000 --- a/types/DatePicker/DatePicker.d.ts +++ /dev/null @@ -1,76 +0,0 @@ -/// - -export interface DatePickerProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the date picker type - * @default "simple" - */ - datePickerType?: "simple" | "single" | "range"; - - /** - * Specify the date picker input value - * @default "" - */ - value?: number | string; - - /** - * Specify the element to append the calendar to - */ - appendTo?: HTMLElement; - - /** - * Specify the date format - * @default "m/d/Y" - */ - dateFormat?: string; - - /** - * Specify the maximum date - * @default null - */ - maxDate?: null | string | Date; - - /** - * Specify the minimum date - * @default null - */ - minDate?: null | string | Date; - - /** - * Specify the locale - * @default "en" - */ - locale?: string; - - /** - * Set to `true` to use the short variant - * @default false - */ - short?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set an id for the date picker element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; -} - -export default class DatePicker { - $$prop_def: DatePickerProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/DatePicker/DatePicker.svelte.d.ts b/types/DatePicker/DatePicker.svelte.d.ts new file mode 100644 index 00000000..6ce1c818 --- /dev/null +++ b/types/DatePicker/DatePicker.svelte.d.ts @@ -0,0 +1,105 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the date picker type + * @default "simple" + */ + datePickerType?: "simple" | "single" | "range"; + + /** + * Specify the date picker input value + * @default "" + */ + value?: number | string; + + /** + * Specify the date picker start date value (from) + * Only works with the "range" date picker type + * @default "" + */ + valueFrom?: string; + + /** + * Specify the date picker end date value (to) + * Only works with the "range" date picker type + * @default "" + */ + valueTo?: string; + + /** + * Specify the date format + * @default "m/d/Y" + */ + dateFormat?: string; + + /** + * Specify the maximum date + * @default null + */ + maxDate?: null | string | Date; + + /** + * Specify the minimum date + * @default null + */ + minDate?: null | string | Date; + + /** + * Specify the locale + * @default "en" + */ + locale?: + | import("flatpickr/dist/types/locale").CustomLocale + | import("flatpickr/dist/types/locale").key; + + /** + * Set to `true` to use the short variant + * @default false + */ + short?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set an id for the date picker element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Override the options passed to the Flatpickr instance. + * @see https://flatpickr.js.org/options + * @default { static: true } + */ + flatpickrProps?: import("flatpickr/dist/types/options").Options; + + [key: `data-${string}`]: any; +}; + +export type DatePickerProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class DatePicker extends SvelteComponentTyped< + DatePickerProps, + { + change: CustomEvent< + | string + | { + selectedDates: [dateFrom: Date, dateTo?: Date]; + dateStr: string | { from: string; to: string }; + } + >; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/DatePicker/DatePickerInput.d.ts b/types/DatePicker/DatePickerInput.svelte.d.ts similarity index 57% rename from types/DatePicker/DatePickerInput.d.ts rename to types/DatePicker/DatePickerInput.svelte.d.ts index 312cfbf1..bf45d72c 100644 --- a/types/DatePicker/DatePickerInput.d.ts +++ b/types/DatePicker/DatePickerInput.svelte.d.ts @@ -1,8 +1,12 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; -export interface DatePickerInputProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["input"]; + +type $Props = { /** * Set the size of the input + * @default undefined */ size?: "sm" | "xl"; @@ -30,6 +34,12 @@ export interface DatePickerInputProps extends svelte.JSX.HTMLAttributes void): () => void; - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} +export type DatePickerInputProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class DatePickerInput extends SvelteComponentTyped< + DatePickerInputProps, + { + input: WindowEventMap["input"]; + keydown: WindowEventMap["keydown"]; + keyup: WindowEventMap["keyup"]; + blur: WindowEventMap["blur"]; + paste: WindowEventMap["paste"]; + }, + { labelText: {} } +> {} diff --git a/types/DatePicker/DatePickerSkeleton.d.ts b/types/DatePicker/DatePickerSkeleton.d.ts deleted file mode 100644 index 71d8588f..00000000 --- a/types/DatePicker/DatePickerSkeleton.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -/// - -export interface DatePickerSkeletonProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to use the range variant - * @default false - */ - range?: boolean; - - /** - * Set an id to be used by the label element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; -} - -export default class DatePickerSkeleton { - $$prop_def: DatePickerSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/DatePicker/DatePickerSkeleton.svelte.d.ts b/types/DatePicker/DatePickerSkeleton.svelte.d.ts new file mode 100644 index 00000000..d8ed10c8 --- /dev/null +++ b/types/DatePicker/DatePickerSkeleton.svelte.d.ts @@ -0,0 +1,33 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set to `true` to use the range variant + * @default false + */ + range?: boolean; + + /** + * Set an id to be used by the label element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + [key: `data-${string}`]: any; +}; + +export type DatePickerSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class DatePickerSkeleton extends SvelteComponentTyped< + DatePickerSkeletonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/Dropdown/Dropdown.d.ts b/types/Dropdown/Dropdown.svelte.d.ts similarity index 52% rename from types/Dropdown/Dropdown.d.ts rename to types/Dropdown/Dropdown.svelte.d.ts index b4961bc0..a9b37305 100644 --- a/types/Dropdown/Dropdown.d.ts +++ b/types/Dropdown/Dropdown.svelte.d.ts @@ -1,20 +1,24 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; -export type DropdownItemId = string; +export type DropdownItemId = any; export type DropdownItemText = string; export interface DropdownItem { id: DropdownItemId; text: DropdownItemText; + disabled?: boolean; } -export interface DropdownProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { /** * Set the dropdown items * @default [] */ - items?: DropdownItem[]; + items?: ReadonlyArray; /** * Override the display of a dropdown item @@ -23,10 +27,10 @@ export interface DropdownProps extends svelte.JSX.HTMLAttributes string; /** - * Specify the selected item index - * @default -1 + * Specify the selected item id + * @default undefined */ - selectedIndex?: number; + selectedId: DropdownItemId; /** * Specify the type of dropdown @@ -34,8 +38,15 @@ export interface DropdownProps extends svelte.JSX.HTMLAttributes string; + hideLabel?: boolean; + + /** + * Override the chevron icon label based on the open state. + * Defaults to "Open menu" when closed and "Close menu" when open + * @default undefined + */ + translateWithId?: ( + id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId, + ) => string; /** * Set an id for the list box component @@ -105,6 +133,7 @@ export interface DropdownProps extends svelte.JSX.HTMLAttributes) => void - ): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} +export type DropdownProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Dropdown extends SvelteComponentTyped< + DropdownProps, + { + select: CustomEvent<{ + selectedId: DropdownItemId; + selectedItem: DropdownItem; + }>; + }, + { default: { item: DropdownItem; index: number } } +> {} diff --git a/types/Dropdown/DropdownSkeleton.d.ts b/types/Dropdown/DropdownSkeleton.d.ts deleted file mode 100644 index 66319de3..00000000 --- a/types/Dropdown/DropdownSkeleton.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -/// - -export interface DropdownSkeletonProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to use the inline variant - * @default false - */ - inline?: boolean; -} - -export default class DropdownSkeleton { - $$prop_def: DropdownSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Dropdown/DropdownSkeleton.svelte.d.ts b/types/Dropdown/DropdownSkeleton.svelte.d.ts new file mode 100644 index 00000000..14c1e60c --- /dev/null +++ b/types/Dropdown/DropdownSkeleton.svelte.d.ts @@ -0,0 +1,27 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set to `true` to use the inline variant + * @default false + */ + inline?: boolean; + + [key: `data-${string}`]: any; +}; + +export type DropdownSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class DropdownSkeleton extends SvelteComponentTyped< + DropdownSkeletonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/FileUploader/FileUploader.d.ts b/types/FileUploader/FileUploader.d.ts deleted file mode 100644 index 2e6905ec..00000000 --- a/types/FileUploader/FileUploader.d.ts +++ /dev/null @@ -1,85 +0,0 @@ -/// - -export interface FileUploaderProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the file uploader status - * @default "uploading" - */ - status?: "uploading" | "edit" | "complete"; - - /** - * Specify the accepted file types - * @default [] - */ - accept?: string[]; - - /** - * Obtain the uploaded file names - * @default [] - */ - files?: FileList; - - /** - * Set to `true` to allow multiple files - * @default false - */ - multiple?: boolean; - - /** - * Override the default behavior of clearing the array of uploaded files - * @constant - * @default () => { files = []; } - */ - clearFiles?: () => void; - - /** - * Specify the label description - * @default "" - */ - labelDescription?: string; - - /** - * Specify the label title - * @default "" - */ - labelTitle?: string; - - /** - * Specify the kind of file uploader button - * @default "primary" - */ - kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; - - /** - * Specify the button label - * @default "" - */ - buttonLabel?: string; - - /** - * Specify the ARIA label used for the status icons - * @default "Provide icon description" - */ - iconDescription?: string; - - /** - * Specify a name attribute for the file button uploader input - * @default "" - */ - name?: string; -} - -export default class FileUploader { - $$prop_def: FileUploaderProps; - $$slot_def: {}; - - $on(eventname: "add", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "remove", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/FileUploader/FileUploader.svelte.d.ts b/types/FileUploader/FileUploader.svelte.d.ts new file mode 100644 index 00000000..0b0d4fe3 --- /dev/null +++ b/types/FileUploader/FileUploader.svelte.d.ts @@ -0,0 +1,104 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the file uploader status + * @default "uploading" + */ + status?: "uploading" | "edit" | "complete"; + + /** + * Set to `true` to disable the file uploader + * @default false + */ + disabled?: boolean; + + /** + * Specify the accepted file types + * @default [] + */ + accept?: ReadonlyArray; + + /** + * Obtain a reference to the uploaded files + * @default [] + */ + files?: ReadonlyArray; + + /** + * Set to `true` to allow multiple files + * @default false + */ + multiple?: boolean; + + /** + * Specify the label title. + * Alternatively, use the named slot "labelTitle" (e.g., `...`) + * @default "" + */ + labelTitle?: string; + + /** + * Specify the label description. + * Alternatively, use the named slot "labelDescription" (e.g., `...`) + * @default "" + */ + labelDescription?: string; + + /** + * Specify the kind of file uploader button + * @default "primary" + */ + kind?: import("../Button/Button.svelte").ButtonProps["kind"]; + + /** + * Specify the size of the file uploader button + * @default "small" + */ + size?: import("../Button/Button.svelte").ButtonProps["size"]; + + /** + * Specify the button label + * @default "" + */ + buttonLabel?: string; + + /** + * Specify the ARIA label used for the status icons + * @default "Provide icon description" + */ + iconDescription?: string; + + /** + * Specify a name attribute for the file button uploader input + * @default "" + */ + name?: string; + + [key: `data-${string}`]: any; +}; + +export type FileUploaderProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class FileUploader extends SvelteComponentTyped< + FileUploaderProps, + { + add: CustomEvent>; + remove: CustomEvent>; + change: CustomEvent>; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + keydown: WindowEventMap["keydown"]; + }, + { labelDescription: {}; labelTitle: {} } +> { + /** + * Programmatically clear the uploaded files + */ + clearFiles: () => void; +} diff --git a/types/FileUploader/FileUploaderButton.d.ts b/types/FileUploader/FileUploaderButton.svelte.d.ts similarity index 53% rename from types/FileUploader/FileUploaderButton.d.ts rename to types/FileUploader/FileUploaderButton.svelte.d.ts index 4f98228c..1ceff139 100644 --- a/types/FileUploader/FileUploaderButton.d.ts +++ b/types/FileUploader/FileUploaderButton.svelte.d.ts @@ -1,11 +1,20 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; -export interface FileUploaderButtonProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["input"]; + +type $Props = { /** * Specify the accepted file types * @default [] */ - accept?: string[]; + accept?: ReadonlyArray; + + /** + * Obtain a reference to the uploaded files + * @default [] + */ + files?: ReadonlyArray; /** * Set to `true` to allow multiple files @@ -29,7 +38,13 @@ export interface FileUploaderButtonProps extends svelte.JSX.HTMLAttributes void): () => void; - $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} +export type FileUploaderButtonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class FileUploaderButton extends SvelteComponentTyped< + FileUploaderButtonProps, + { + change: CustomEvent>; + keydown: WindowEventMap["keydown"]; + click: WindowEventMap["click"]; + }, + { labelText: {} } +> {} diff --git a/types/FileUploader/FileUploaderDropContainer.d.ts b/types/FileUploader/FileUploaderDropContainer.d.ts deleted file mode 100644 index 931fd60e..00000000 --- a/types/FileUploader/FileUploaderDropContainer.d.ts +++ /dev/null @@ -1,78 +0,0 @@ -/// - -export interface FileUploaderDropContainerProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the accepted file types - * @default [] - */ - accept?: string[]; - - /** - * Set to `true` to allow multiple files - * @default false - */ - multiple?: boolean; - - /** - * Override the default behavior of validating uploaded files - * The default behavior does not validate files - * @default (files) => files - */ - validateFiles?: (files: FileList) => FileList; - - /** - * Specify the label text - * @default "Add file" - */ - labelText?: string; - - /** - * Specify the `role` attribute of the drop container - * @default "button" - */ - role?: string; - - /** - * Set to `true` to disable the input - * @default false - */ - disabled?: boolean; - - /** - * Specify `tabindex` attribute - * @default "0" - */ - tabindex?: string; - - /** - * Set an id for the input element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; - - /** - * Specify a name attribute for the input - * @default "" - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; -} - -export default class FileUploaderDropContainer { - $$prop_def: FileUploaderDropContainerProps; - $$slot_def: {}; - - $on(eventname: "add", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "dragover", cb: (event: WindowEventMap["dragover"]) => void): () => void; - $on(eventname: "dragleave", cb: (event: WindowEventMap["dragleave"]) => void): () => void; - $on(eventname: "drop", cb: (event: WindowEventMap["drop"]) => void): () => void; - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/FileUploader/FileUploaderDropContainer.svelte.d.ts b/types/FileUploader/FileUploaderDropContainer.svelte.d.ts new file mode 100644 index 00000000..65a3a5b7 --- /dev/null +++ b/types/FileUploader/FileUploaderDropContainer.svelte.d.ts @@ -0,0 +1,92 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the accepted file types + * @default [] + */ + accept?: ReadonlyArray; + + /** + * Obtain a reference to the uploaded files + * @default [] + */ + files?: ReadonlyArray; + + /** + * Set to `true` to allow multiple files + * @default false + */ + multiple?: boolean; + + /** + * Override the default behavior of validating uploaded files. + * By default, files are not validated + * @default (files) => files + */ + validateFiles?: (files: ReadonlyArray) => ReadonlyArray; + + /** + * Specify the label text + * @default "Add file" + */ + labelText?: string; + + /** + * Specify the `role` attribute of the drop container + * @default "button" + */ + role?: string; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Specify `tabindex` attribute + * @default "0" + */ + tabindex?: string; + + /** + * Set an id for the input element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the input + * @default "" + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + + [key: `data-${string}`]: any; +}; + +export type FileUploaderDropContainerProps = Omit<$RestProps, keyof $Props> & + $Props; + +export default class FileUploaderDropContainer extends SvelteComponentTyped< + FileUploaderDropContainerProps, + { + add: CustomEvent>; + change: CustomEvent>; + dragover: WindowEventMap["dragover"]; + dragleave: WindowEventMap["dragleave"]; + drop: WindowEventMap["drop"]; + keydown: WindowEventMap["keydown"]; + click: WindowEventMap["click"]; + }, + { labelText: {} } +> {} diff --git a/types/FileUploader/FileUploaderItem.d.ts b/types/FileUploader/FileUploaderItem.svelte.d.ts similarity index 51% rename from types/FileUploader/FileUploaderItem.d.ts rename to types/FileUploader/FileUploaderItem.svelte.d.ts index 63e66aba..9f5e7547 100644 --- a/types/FileUploader/FileUploaderItem.d.ts +++ b/types/FileUploader/FileUploaderItem.svelte.d.ts @@ -1,12 +1,21 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; -export interface FileUploaderItemProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["span"]; + +type $Props = { /** * Specify the file uploader status * @default "uploading" */ status?: "uploading" | "edit" | "complete"; + /** + * Specify the size of button skeleton + * @default "default" + */ + size?: "default" | "field" | "small"; + /** * Specify the ARIA label used for the status icons * @default "" @@ -42,15 +51,19 @@ export interface FileUploaderItemProps extends svelte.JSX.HTMLAttributes) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} +export type FileUploaderItemProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class FileUploaderItem extends SvelteComponentTyped< + FileUploaderItemProps, + { + delete: CustomEvent; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/FileUploader/FileUploaderSkeleton.d.ts b/types/FileUploader/FileUploaderSkeleton.d.ts deleted file mode 100644 index c5d3f72c..00000000 --- a/types/FileUploader/FileUploaderSkeleton.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -/// - -export interface FileUploaderSkeletonProps extends svelte.JSX.HTMLAttributes {} - -export default class FileUploaderSkeleton { - $$prop_def: FileUploaderSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/FileUploader/FileUploaderSkeleton.svelte.d.ts b/types/FileUploader/FileUploaderSkeleton.svelte.d.ts new file mode 100644 index 00000000..42574191 --- /dev/null +++ b/types/FileUploader/FileUploaderSkeleton.svelte.d.ts @@ -0,0 +1,21 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + [key: `data-${string}`]: any; +}; + +export type FileUploaderSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class FileUploaderSkeleton extends SvelteComponentTyped< + FileUploaderSkeletonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/FileUploader/Filename.d.ts b/types/FileUploader/Filename.d.ts deleted file mode 100644 index 52336e7a..00000000 --- a/types/FileUploader/Filename.d.ts +++ /dev/null @@ -1,30 +0,0 @@ -/// - -export interface FilenameProps { - /** - * Specify the file name status - * @default "uploading" - */ - status?: "uploading" | "edit" | "complete"; - - /** - * Specify the ARIA label used for the status icons - * @default "" - */ - iconDescription?: string; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; -} - -export default class Filename { - $$prop_def: FilenameProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/FileUploader/Filename.svelte.d.ts b/types/FileUploader/Filename.svelte.d.ts new file mode 100644 index 00000000..50a4e686 --- /dev/null +++ b/types/FileUploader/Filename.svelte.d.ts @@ -0,0 +1,36 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"] & + SvelteHTMLElements["button"] & + SvelteHTMLElements["svg"]; + +type $Props = { + /** + * Specify the file name status + * @default "uploading" + */ + status?: "uploading" | "edit" | "complete"; + + /** + * Specify the ARIA label used for the status icons + * @default "" + */ + iconDescription?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + [key: `data-${string}`]: any; +}; + +export type FilenameProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Filename extends SvelteComponentTyped< + FilenameProps, + { click: WindowEventMap["click"]; keydown: WindowEventMap["keydown"] }, + {} +> {} diff --git a/types/FluidForm/FluidForm.d.ts b/types/FluidForm/FluidForm.d.ts deleted file mode 100644 index 3408ebf2..00000000 --- a/types/FluidForm/FluidForm.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -/// - -export interface FluidFormProps {} - -export default class FluidForm { - $$prop_def: FluidFormProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/FluidForm/FluidForm.svelte.d.ts b/types/FluidForm/FluidForm.svelte.d.ts new file mode 100644 index 00000000..6e36ffad --- /dev/null +++ b/types/FluidForm/FluidForm.svelte.d.ts @@ -0,0 +1,23 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["form"]; + +type $Props = { + [key: `data-${string}`]: any; +}; + +export type FluidFormProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class FluidForm extends SvelteComponentTyped< + FluidFormProps, + { + click: WindowEventMap["click"]; + keydown: WindowEventMap["keydown"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + submit: WindowEventMap["submit"]; + }, + { default: {} } +> {} diff --git a/types/Form/Form.d.ts b/types/Form/Form.d.ts deleted file mode 100644 index 8c8e1e9b..00000000 --- a/types/Form/Form.d.ts +++ /dev/null @@ -1,17 +0,0 @@ -/// - -export interface FormProps extends svelte.JSX.HTMLAttributes {} - -export default class Form { - $$prop_def: FormProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "submit", cb: (event: WindowEventMap["submit"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Form/Form.svelte.d.ts b/types/Form/Form.svelte.d.ts new file mode 100644 index 00000000..1cfad285 --- /dev/null +++ b/types/Form/Form.svelte.d.ts @@ -0,0 +1,29 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["form"]; + +type $Props = { + /** + * Obtain a reference to the form element + * @default null + */ + ref?: null | HTMLFormElement; + + [key: `data-${string}`]: any; +}; + +export type FormProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Form extends SvelteComponentTyped< + FormProps, + { + click: WindowEventMap["click"]; + keydown: WindowEventMap["keydown"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + submit: WindowEventMap["submit"]; + }, + { default: {} } +> {} diff --git a/types/FormGroup/FormGroup.d.ts b/types/FormGroup/FormGroup.d.ts deleted file mode 100644 index d55aa8f9..00000000 --- a/types/FormGroup/FormGroup.d.ts +++ /dev/null @@ -1,40 +0,0 @@ -/// - -export interface FormGroupProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Set to `true` to render a form requirement - * @default false - */ - message?: boolean; - - /** - * Specify the message text - * @default "" - */ - messageText?: string; - - /** - * Specify the legend text - * @default "" - */ - legendText?: string; -} - -export default class FormGroup { - $$prop_def: FormGroupProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/FormGroup/FormGroup.svelte.d.ts b/types/FormGroup/FormGroup.svelte.d.ts new file mode 100644 index 00000000..fe6f1182 --- /dev/null +++ b/types/FormGroup/FormGroup.svelte.d.ts @@ -0,0 +1,57 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["fieldset"]; + +type $Props = { + /** + * Set to `true` for to remove the bottom margin + * @default false + */ + noMargin?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Set to `true` to render a form requirement + * @default false + */ + message?: boolean; + + /** + * Specify the message text + * @default "" + */ + messageText?: string; + + /** + * Specify the legend text + * @default "" + */ + legendText?: string; + + /** + * Specify an id for the legend element + * @default "" + */ + legendId?: string; + + [key: `data-${string}`]: any; +}; + +export type FormGroupProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class FormGroup extends SvelteComponentTyped< + FormGroupProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/FormItem/FormItem.d.ts b/types/FormItem/FormItem.d.ts deleted file mode 100644 index 9ff7d823..00000000 --- a/types/FormItem/FormItem.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -/// - -export interface FormItemProps extends svelte.JSX.HTMLAttributes {} - -export default class FormItem { - $$prop_def: FormItemProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/FormItem/FormItem.svelte.d.ts b/types/FormItem/FormItem.svelte.d.ts new file mode 100644 index 00000000..496356a6 --- /dev/null +++ b/types/FormItem/FormItem.svelte.d.ts @@ -0,0 +1,21 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + [key: `data-${string}`]: any; +}; + +export type FormItemProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class FormItem extends SvelteComponentTyped< + FormItemProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/FormLabel/FormLabel.d.ts b/types/FormLabel/FormLabel.d.ts deleted file mode 100644 index 0a38b73e..00000000 --- a/types/FormLabel/FormLabel.d.ts +++ /dev/null @@ -1,22 +0,0 @@ -/// - -export interface FormLabelProps extends svelte.JSX.HTMLAttributes { - /** - * Set an id to be used by the label element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; -} - -export default class FormLabel { - $$prop_def: FormLabelProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/FormLabel/FormLabel.svelte.d.ts b/types/FormLabel/FormLabel.svelte.d.ts new file mode 100644 index 00000000..e7f07659 --- /dev/null +++ b/types/FormLabel/FormLabel.svelte.d.ts @@ -0,0 +1,27 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["label"]; + +type $Props = { + /** + * Set an id to be used by the label element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + [key: `data-${string}`]: any; +}; + +export type FormLabelProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class FormLabel extends SvelteComponentTyped< + FormLabelProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/Grid/Column.d.ts b/types/Grid/Column.svelte.d.ts similarity index 69% rename from types/Grid/Column.d.ts rename to types/Grid/Column.svelte.d.ts index 7f150dbc..3dab2a87 100644 --- a/types/Grid/Column.d.ts +++ b/types/Grid/Column.svelte.d.ts @@ -1,4 +1,5 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; export type ColumnSize = boolean | number; @@ -9,7 +10,9 @@ export interface ColumnSizeDescriptor { export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; -export interface ColumnProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { /** * Set to `true` to render a custom HTML element * Props are destructured as `props` in the default slot (e.g.,
...
) @@ -43,40 +46,47 @@ export interface ColumnProps extends svelte.JSX.HTMLAttributes void): () => void; -} +export type ColumnProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Column extends SvelteComponentTyped< + ColumnProps, + Record, + { default: { props: { class: string; [key: string]: any } } } +> {} diff --git a/types/Grid/Grid.d.ts b/types/Grid/Grid.svelte.d.ts similarity index 68% rename from types/Grid/Grid.d.ts rename to types/Grid/Grid.svelte.d.ts index 5efde1b0..c589e4c3 100644 --- a/types/Grid/Grid.d.ts +++ b/types/Grid/Grid.svelte.d.ts @@ -1,6 +1,9 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; -export interface GridProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { /** * Set to `true` to render a custom HTML element * Props are destructured as `props` in the default slot (e.g.,
...
) @@ -49,13 +52,14 @@ export interface GridProps extends svelte.JSX.HTMLAttributes void): () => void; -} +export type GridProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Grid extends SvelteComponentTyped< + GridProps, + Record, + { default: { props: { class: string; [key: string]: any } } } +> {} diff --git a/types/Grid/Row.d.ts b/types/Grid/Row.svelte.d.ts similarity index 66% rename from types/Grid/Row.d.ts rename to types/Grid/Row.svelte.d.ts index c49d6f03..6a53d9ab 100644 --- a/types/Grid/Row.d.ts +++ b/types/Grid/Row.svelte.d.ts @@ -1,6 +1,9 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; -export interface RowProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { /** * Set to `true` to render a custom HTML element * Props are destructured as `props` in the default slot (e.g.,
...
) @@ -43,13 +46,14 @@ export interface RowProps extends svelte.JSX.HTMLAttributes void): () => void; -} +export type RowProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Row extends SvelteComponentTyped< + RowProps, + Record, + { default: { props: { class: string; [key: string]: any } } } +> {} diff --git a/types/Icon/Icon.d.ts b/types/Icon/Icon.d.ts deleted file mode 100644 index 9dd4bbf5..00000000 --- a/types/Icon/Icon.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -/// -import { IconSkeletonProps } from "./IconSkeleton"; - -export interface IconProps extends IconSkeletonProps, svelte.JSX.HTMLAttributes { - /** - * Specify the icon from `carbon-icons-svelte` to render - */ - render?: typeof import("carbon-icons-svelte").CarbonIcon; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; -} - -export default class Icon { - $$prop_def: IconProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Icon/IconSkeleton.d.ts b/types/Icon/IconSkeleton.d.ts deleted file mode 100644 index f4f860bb..00000000 --- a/types/Icon/IconSkeleton.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -/// - -export interface IconSkeletonProps extends svelte.JSX.HTMLAttributes { - /** - * Set the size of the icon - * @default 16 - */ - size?: number; -} - -export default class IconSkeleton { - $$prop_def: IconSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/ImageLoader/ImageLoader.svelte.d.ts b/types/ImageLoader/ImageLoader.svelte.d.ts new file mode 100644 index 00000000..304c047f --- /dev/null +++ b/types/ImageLoader/ImageLoader.svelte.d.ts @@ -0,0 +1,64 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["img"]; + +type $Props = { + /** + * Specify the image source + * @default "" + */ + src?: string; + + /** + * Specify the image alt text + * @default "" + */ + alt?: string; + + /** + * Specify the aspect ratio for the image wrapper + * @default undefined + */ + ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"; + + /** + * Set to `true` when `loaded` is `true` and `error` is false + * @default false + */ + loading?: boolean; + + /** + * Set to `true` when the image is loaded + * @default false + */ + loaded?: boolean; + + /** + * Set to `true` if an error occurs when loading the image + * @default false + */ + error?: boolean; + + /** + * Set to `true` to fade in the image on load + * The duration uses the `fast-02` value following Carbon guidelines on motion + * @default false + */ + fadeIn?: boolean; + + [key: `data-${string}`]: any; +}; + +export type ImageLoaderProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ImageLoader extends SvelteComponentTyped< + ImageLoaderProps, + { load: CustomEvent; error: CustomEvent }, + { error: {}; loading: {} } +> { + /** + * Method invoked to load the image provided a `src` value + */ + loadImage: (url?: string) => void; +} diff --git a/types/InlineLoading/InlineLoading.d.ts b/types/InlineLoading/InlineLoading.d.ts deleted file mode 100644 index 4e8c8416..00000000 --- a/types/InlineLoading/InlineLoading.d.ts +++ /dev/null @@ -1,37 +0,0 @@ -/// - -export interface InlineLoadingProps extends svelte.JSX.HTMLAttributes { - /** - * Set the loading status - * @default "active" - */ - status?: "active" | "inactive" | "finished" | "error"; - - /** - * Set the loading description - */ - description?: string; - - /** - * Specify the ARIA label for the loading icon - */ - iconDescription?: string; - - /** - * Specify the timeout delay (ms) after `status` is set to "success" - * @default 1500 - */ - successDelay?: number; -} - -export default class InlineLoading { - $$prop_def: InlineLoadingProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "success", cb: (event: CustomEvent) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/InlineLoading/InlineLoading.svelte.d.ts b/types/InlineLoading/InlineLoading.svelte.d.ts new file mode 100644 index 00000000..88a2240e --- /dev/null +++ b/types/InlineLoading/InlineLoading.svelte.d.ts @@ -0,0 +1,47 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set the loading status + * @default "active" + */ + status?: "active" | "inactive" | "finished" | "error"; + + /** + * Set the loading description + * @default undefined + */ + description?: string; + + /** + * Specify a description for the loading icon. + * Defaults to the `status` prop for the "error" and "finished" states + * @default undefined + */ + iconDescription?: string; + + /** + * Specify the timeout delay (ms) after `status` is set to "success" + * @default 1500 + */ + successDelay?: number; + + [key: `data-${string}`]: any; +}; + +export type InlineLoadingProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class InlineLoading extends SvelteComponentTyped< + InlineLoadingProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + success: CustomEvent; + }, + {} +> {} diff --git a/types/Link/Link.d.ts b/types/Link/Link.d.ts deleted file mode 100644 index 209e0d9c..00000000 --- a/types/Link/Link.d.ts +++ /dev/null @@ -1,50 +0,0 @@ -/// - -export interface LinkProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the size of the link - */ - size?: "sm" | "lg"; - - /** - * Specify the href value - */ - href?: string; - - /** - * Set to `true` to use the inline variant - * @default false - */ - inline?: boolean; - - /** - * Set to `true` to disable the checkbox - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to allow visited styles - * @default false - */ - visited?: boolean; - - /** - * Obtain a reference to the top-level HTML element - * @default null - */ - ref?: null | HTMLAnchorElement | HTMLParagraphElement; -} - -export default class Link { - $$prop_def: LinkProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Link/Link.svelte.d.ts b/types/Link/Link.svelte.d.ts new file mode 100644 index 00000000..8a5c1566 --- /dev/null +++ b/types/Link/Link.svelte.d.ts @@ -0,0 +1,64 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["a"]; + +type $Props = { + /** + * Specify the size of the link + * @default undefined + */ + size?: "sm" | "lg"; + + /** + * Specify the href value + * @default undefined + */ + href?: string; + + /** + * Set to `true` to use the inline variant + * @default false + */ + inline?: boolean; + + /** + * Specify the icon to render + * `inline` must be `false` + * @default undefined + */ + icon?: any; + + /** + * Set to `true` to disable the checkbox + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to allow visited styles + * @default false + */ + visited?: boolean; + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLAnchorElement; + + [key: `data-${string}`]: any; +}; + +export type LinkProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Link extends SvelteComponentTyped< + LinkProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {}; icon: {} } +> {} diff --git a/types/Link/OutboundLink.svelte.d.ts b/types/Link/OutboundLink.svelte.d.ts new file mode 100644 index 00000000..3ad31e2e --- /dev/null +++ b/types/Link/OutboundLink.svelte.d.ts @@ -0,0 +1,15 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { LinkProps } from "./Link.svelte"; + +export type OutboundLinkProps = LinkProps & {}; + +export default class OutboundLink extends SvelteComponentTyped< + OutboundLinkProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/ListBox/ListBox.d.ts b/types/ListBox/ListBox.d.ts deleted file mode 100644 index d82cfc8f..00000000 --- a/types/ListBox/ListBox.d.ts +++ /dev/null @@ -1,55 +0,0 @@ -/// - -export interface ListBoxProps extends svelte.JSX.HTMLAttributes { - /** - * Set the size of the list box - */ - size?: "sm" | "xl"; - - /** - * Set the type of the list box - * @default "default" - */ - type?: "default" | "inline"; - - /** - * Set to `true` to open the list box - * @default false - */ - open?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to disable the list box - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; -} - -export default class ListBox { - $$prop_def: ListBoxProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/ListBox/ListBox.svelte.d.ts b/types/ListBox/ListBox.svelte.d.ts new file mode 100644 index 00000000..a0017f77 --- /dev/null +++ b/types/ListBox/ListBox.svelte.d.ts @@ -0,0 +1,70 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set the size of the list box + * @default undefined + */ + size?: "sm" | "xl"; + + /** + * Set the type of the list box + * @default "default" + */ + type?: "default" | "inline"; + + /** + * Set to `true` to open the list box + * @default false + */ + open?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the list box + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Set to `true` to indicate an warning state + * @default false + */ + warn?: boolean; + + /** + * Specify the warning state text + * @default "" + */ + warnText?: string; + + [key: `data-${string}`]: any; +}; + +export type ListBoxProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ListBox extends SvelteComponentTyped< + ListBoxProps, + { keydown: WindowEventMap["keydown"]; click: WindowEventMap["click"] }, + { default: {} } +> {} diff --git a/types/ListBox/ListBoxField.d.ts b/types/ListBox/ListBoxField.d.ts deleted file mode 100644 index 613f2bd5..00000000 --- a/types/ListBox/ListBoxField.d.ts +++ /dev/null @@ -1,63 +0,0 @@ -/// - -export type ListBoxFieldTranslationId = "close" | "open"; - -export interface ListBoxFieldProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to disable the list box field - * @default false - */ - disabled?: boolean; - - /** - * Specify the role attribute - * @default "combobox" - */ - role?: string; - - /** - * Specify the tabindex - * @default "-1" - */ - tabindex?: string; - - /** - * Default translation ids - * @constant - * @default { close: "close", open: "open" } - */ - translationIds?: { close: "close"; open: "open" }; - - /** - * Override the default translation ids - * @default (id) => defaultTranslations[id] - */ - translateWithId?: (id: ListBoxFieldTranslationId) => string; - - /** - * Set an id for the top-level element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; - - /** - * Obtain a reference to the top-level HTML element - * @default null - */ - ref?: null | HTMLDivElement; -} - -export default class ListBoxField { - $$prop_def: ListBoxFieldProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/ListBox/ListBoxField.svelte.d.ts b/types/ListBox/ListBoxField.svelte.d.ts new file mode 100644 index 00000000..4b4d782a --- /dev/null +++ b/types/ListBox/ListBoxField.svelte.d.ts @@ -0,0 +1,67 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +export type ListBoxFieldTranslationId = "close" | "open"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set to `true` to disable the list box field + * @default false + */ + disabled?: boolean; + + /** + * Specify the role attribute + * @default "combobox" + */ + role?: string; + + /** + * Specify the tabindex + * @default "-1" + */ + tabindex?: string; + + /** + * Override the default translation ids + * @default (id) => defaultTranslations[id] + */ + translateWithId?: (id: ListBoxFieldTranslationId) => string; + + /** + * Set an id for the top-level element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLDivElement; + + [key: `data-${string}`]: any; +}; + +export type ListBoxFieldProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ListBoxField extends SvelteComponentTyped< + ListBoxFieldProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + keydown: WindowEventMap["keydown"]; + focus: WindowEventMap["focus"]; + blur: WindowEventMap["blur"]; + }, + { default: {} } +> { + /** + * Default translation ids + */ + translationIds: { close: "close"; open: "open" }; +} diff --git a/types/ListBox/ListBoxMenu.d.ts b/types/ListBox/ListBoxMenu.d.ts deleted file mode 100644 index d0c9c70e..00000000 --- a/types/ListBox/ListBoxMenu.d.ts +++ /dev/null @@ -1,25 +0,0 @@ -/// - -export interface ListBoxMenuProps extends svelte.JSX.HTMLAttributes { - /** - * Set an id for the top-level element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; - - /** - * Obtain a reference to the HTML element - * @default null - */ - ref?: null | HTMLDivElement; -} - -export default class ListBoxMenu { - $$prop_def: ListBoxMenuProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "scroll", cb: (event: WindowEventMap["scroll"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/ListBox/ListBoxMenu.svelte.d.ts b/types/ListBox/ListBoxMenu.svelte.d.ts new file mode 100644 index 00000000..72444885 --- /dev/null +++ b/types/ListBox/ListBoxMenu.svelte.d.ts @@ -0,0 +1,28 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set an id for the top-level element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Obtain a reference to the HTML element + * @default null + */ + ref?: null | HTMLDivElement; + + [key: `data-${string}`]: any; +}; + +export type ListBoxMenuProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ListBoxMenu extends SvelteComponentTyped< + ListBoxMenuProps, + { scroll: WindowEventMap["scroll"] }, + { default: {} } +> {} diff --git a/types/ListBox/ListBoxMenuIcon.d.ts b/types/ListBox/ListBoxMenuIcon.d.ts deleted file mode 100644 index d76da5bd..00000000 --- a/types/ListBox/ListBoxMenuIcon.d.ts +++ /dev/null @@ -1,32 +0,0 @@ -/// - -export type ListBoxMenuIconTranslationId = "close" | "open"; - -export interface ListBoxMenuIconProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to open the list box menu icon - * @default false - */ - open?: boolean; - - /** - * Default translation ids - * @constant - * @default { close: "close", open: "open" } - */ - translationIds?: { close: "close"; open: "open" }; - - /** - * Override the default translation ids - * @default (id) => defaultTranslations[id] - */ - translateWithId?: (id: ListBoxMenuIconTranslationId) => string; -} - -export default class ListBoxMenuIcon { - $$prop_def: ListBoxMenuIconProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/ListBox/ListBoxMenuIcon.svelte.d.ts b/types/ListBox/ListBoxMenuIcon.svelte.d.ts new file mode 100644 index 00000000..a5d71e02 --- /dev/null +++ b/types/ListBox/ListBoxMenuIcon.svelte.d.ts @@ -0,0 +1,35 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +export type ListBoxMenuIconTranslationId = "close" | "open"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set to `true` to open the list box menu icon + * @default false + */ + open?: boolean; + + /** + * Override the default translation ids + * @default (id) => defaultTranslations[id] + */ + translateWithId?: (id: ListBoxMenuIconTranslationId) => string; + + [key: `data-${string}`]: any; +}; + +export type ListBoxMenuIconProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ListBoxMenuIcon extends SvelteComponentTyped< + ListBoxMenuIconProps, + { click: WindowEventMap["click"] }, + {} +> { + /** + * Default translation ids + */ + translationIds: { close: "close"; open: "open" }; +} diff --git a/types/ListBox/ListBoxMenuItem.d.ts b/types/ListBox/ListBoxMenuItem.d.ts deleted file mode 100644 index a4724c5e..00000000 --- a/types/ListBox/ListBoxMenuItem.d.ts +++ /dev/null @@ -1,27 +0,0 @@ -/// - -export interface ListBoxMenuItemProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to enable the active state - * @default false - */ - active?: boolean; - - /** - * Set to `true` to enable the highlighted state - * @default false - */ - highlighted?: boolean; -} - -export default class ListBoxMenuItem { - $$prop_def: ListBoxMenuItemProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/ListBox/ListBoxMenuItem.svelte.d.ts b/types/ListBox/ListBoxMenuItem.svelte.d.ts new file mode 100644 index 00000000..9c980896 --- /dev/null +++ b/types/ListBox/ListBoxMenuItem.svelte.d.ts @@ -0,0 +1,38 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set to `true` to enable the active state + * @default false + */ + active?: boolean; + + /** + * Set to `true` to enable the highlighted state + * @default false + */ + highlighted?: boolean; + + /** + * Set to `true` to disable the menu item + * @default false + */ + disabled?: boolean; + + [key: `data-${string}`]: any; +}; + +export type ListBoxMenuItemProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ListBoxMenuItem extends SvelteComponentTyped< + ListBoxMenuItemProps, + { + click: WindowEventMap["click"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/ListBox/ListBoxSelection.d.ts b/types/ListBox/ListBoxSelection.d.ts deleted file mode 100644 index 80167139..00000000 --- a/types/ListBox/ListBoxSelection.d.ts +++ /dev/null @@ -1,43 +0,0 @@ -/// - -export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection"; - -export interface ListBoxSelectionProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the number of selected items - */ - selectionCount?: any; - - /** - * Set to `true` to disable the list box selection - * @default false - */ - disabled?: boolean; - - /** - * Default translation ids - * @constant - * @default { clearAll: "clearAll", clearSelection: "clearSelection", } - */ - translationIds?: { clearAll: "clearAll"; clearSelection: "clearSelection" }; - - /** - * Override the default translation ids - * @default (id) => defaultTranslations[id] - */ - translateWithId?: (id: ListBoxSelectionTranslationId) => string; - - /** - * Obtain a reference to the top-level HTML element - * @default null - */ - ref?: null | HTMLDivElement; -} - -export default class ListBoxSelection { - $$prop_def: ListBoxSelectionProps; - $$slot_def: {}; - - $on(eventname: "clear", cb: (event: CustomEvent) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/ListBox/ListBoxSelection.svelte.d.ts b/types/ListBox/ListBoxSelection.svelte.d.ts new file mode 100644 index 00000000..351bf1ab --- /dev/null +++ b/types/ListBox/ListBoxSelection.svelte.d.ts @@ -0,0 +1,47 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the number of selected items + * @default undefined + */ + selectionCount?: number; + + /** + * Set to `true` to disable the list box selection + * @default false + */ + disabled?: boolean; + + /** + * Override the default translation ids + * @default (id) => defaultTranslations[id] + */ + translateWithId?: (id: ListBoxSelectionTranslationId) => string; + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLDivElement; + + [key: `data-${string}`]: any; +}; + +export type ListBoxSelectionProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ListBoxSelection extends SvelteComponentTyped< + ListBoxSelectionProps, + { clear: CustomEvent }, + {} +> { + /** + * Default translation ids + */ + translationIds: { clearAll: "clearAll"; clearSelection: "clearSelection" }; +} diff --git a/types/ListItem/ListItem.d.ts b/types/ListItem/ListItem.d.ts deleted file mode 100644 index 4ef4aaad..00000000 --- a/types/ListItem/ListItem.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -/// - -export interface ListItemProps extends svelte.JSX.HTMLAttributes {} - -export default class ListItem { - $$prop_def: ListItemProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/ListItem/ListItem.svelte.d.ts b/types/ListItem/ListItem.svelte.d.ts new file mode 100644 index 00000000..451c7b08 --- /dev/null +++ b/types/ListItem/ListItem.svelte.d.ts @@ -0,0 +1,21 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["li"]; + +type $Props = { + [key: `data-${string}`]: any; +}; + +export type ListItemProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ListItem extends SvelteComponentTyped< + ListItemProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/Loading/Loading.d.ts b/types/Loading/Loading.d.ts deleted file mode 100644 index 77af289c..00000000 --- a/types/Loading/Loading.d.ts +++ /dev/null @@ -1,40 +0,0 @@ -/// - -export interface LoadingProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to use the small variant - * @default false - */ - small?: boolean; - - /** - * Set to `false` to disable the active state - * @default true - */ - active?: boolean; - - /** - * Set to `false` to disable the overlay - * @default true - */ - withOverlay?: boolean; - - /** - * Specify the label description - * @default "Active loading indicator" - */ - description?: string; - - /** - * Set an id for the label element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; -} - -export default class Loading { - $$prop_def: LoadingProps; - $$slot_def: {}; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Loading/Loading.svelte.d.ts b/types/Loading/Loading.svelte.d.ts new file mode 100644 index 00000000..a5fff650 --- /dev/null +++ b/types/Loading/Loading.svelte.d.ts @@ -0,0 +1,40 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set to `true` to use the small variant + * @default false + */ + small?: boolean; + + /** + * Set to `false` to disable the active state + * @default true + */ + active?: boolean; + + /** + * Set to `false` to disable the overlay + * @default true + */ + withOverlay?: boolean; + + /** + * Specify the description to describe the loading state + * @default "loading" + */ + description?: string; + + [key: `data-${string}`]: any; +}; + +export type LoadingProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Loading extends SvelteComponentTyped< + LoadingProps, + Record, + {} +> {} diff --git a/types/LocalStorage/LocalStorage.svelte.d.ts b/types/LocalStorage/LocalStorage.svelte.d.ts new file mode 100644 index 00000000..1599cc6b --- /dev/null +++ b/types/LocalStorage/LocalStorage.svelte.d.ts @@ -0,0 +1,34 @@ +import type { SvelteComponentTyped } from "svelte"; + +export type LocalStorageProps = { + /** + * Specify the local storage key + * @default "local-storage-key" + */ + key?: string; + + /** + * Provide a value to persist + * @default "" + */ + value?: any; +}; + +export default class LocalStorage extends SvelteComponentTyped< + LocalStorageProps, + { + save: CustomEvent; + update: CustomEvent<{ prevValue: any; value: any }>; + }, + {} +> { + /** + * Remove the persisted key value from the browser's local storage + */ + clearItem: () => void; + + /** + * Clear all key values from the browser's local storage + */ + clearAll: () => void; +} diff --git a/types/Modal/Modal.d.ts b/types/Modal/Modal.svelte.d.ts similarity index 58% rename from types/Modal/Modal.d.ts rename to types/Modal/Modal.svelte.d.ts index 8f6e8dbb..84fb57b0 100644 --- a/types/Modal/Modal.d.ts +++ b/types/Modal/Modal.svelte.d.ts @@ -1,8 +1,12 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; -export interface ModalProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { /** * Set the size of the modal + * @default undefined */ size?: "xs" | "sm" | "lg"; @@ -32,16 +36,19 @@ export interface ModalProps extends svelte.JSX.HTMLAttributes void): () => void; - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "submit", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "click:button--secondary", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "close", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "open", cb: (event: CustomEvent) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} +export type ModalProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Modal extends SvelteComponentTyped< + ModalProps, + { + transitionend: CustomEvent<{ open: boolean }>; + ["click:button--secondary"]: CustomEvent<{ text: string }>; + keydown: WindowEventMap["keydown"]; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + submit: CustomEvent; + ["click:button--primary"]: CustomEvent; + close: CustomEvent; + open: CustomEvent; + }, + { default: {}; heading: {}; label: {} } +> {} diff --git a/types/MultiSelect/MultiSelect.d.ts b/types/MultiSelect/MultiSelect.d.ts deleted file mode 100644 index f9d9bcd8..00000000 --- a/types/MultiSelect/MultiSelect.d.ts +++ /dev/null @@ -1,167 +0,0 @@ -/// - -export type MultiSelectItemId = string; - -export type MultiSelectItemText = string; - -export interface MultiSelectItem { - id: MultiSelectItemId; - text: MultiSelectItemText; -} - -export interface MultiSelectProps extends svelte.JSX.HTMLAttributes { - /** - * Set the multiselect items - * @default [] - */ - items?: MultiSelectItem[]; - - /** - * Override the display of a multiselect item - * @default (item) => item.text || item.id - */ - itemToString?: (item: MultiSelectItem) => string; - - /** - * Set the selected ids - * @default [] - */ - selectedIds?: MultiSelectItemId[]; - - /** - * Specify the multiselect value - * @default "" - */ - value?: string; - - /** - * Set the size of the combobox - */ - size?: "sm" | "lg" | "xl"; - - /** - * Specify the type of multiselect - * @default "default" - */ - type?: "default" | "inline"; - - /** - * Specify the selection feedback after selecting items - * @default "top-after-reopen" - */ - selectionFeedback?: "top" | "fixed" | "top-after-reopen"; - - /** - * Set to `true` to disable the dropdown - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to filter items - * @default false - */ - filterable?: boolean; - - /** - * Override the filtering logic - * The default filtering is an exact string comparison - * @default (item, value) => item.text.toLowerCase().includes(value.toLowerCase()) - */ - filterItem?: (item: MultiSelectItem, value: string) => string; - - /** - * Set to `true` to open the dropdown - * @default false - */ - open?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Specify the locale - * @default "en" - */ - locale?: string; - - /** - * Specify the placeholder text - * @default "" - */ - placeholder?: string; - - /** - * Override the sorting logic - * The default sorting compare the item text value - * @default (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) - */ - sortItem?: ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void); - - /** - * Override the default translation ids - */ - translateWithId?: (id: any) => string; - - /** - * Specify the title text - * @default "" - */ - titleText?: string; - - /** - * Set to `true` to pass the item to `itemToString` in the checkbox - * @default false - */ - useTitleInItem?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - - /** - * Specify the helper text - * @default "" - */ - helperText?: string; - - /** - * Specify the list box label - * @default "" - */ - label?: string; - - /** - * Set an id for the list box component - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; - - /** - * Specify a name attribute for the select - */ - name?: string; -} - -export default class MultiSelect { - $$prop_def: MultiSelectProps; - $$slot_def: {}; - - $on(eventname: "clear", cb: (event: WindowEventMap["clear"]) => void): () => void; - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; - $on(eventname: "select", cb: (event: CustomEvent) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/MultiSelect/MultiSelect.svelte.d.ts b/types/MultiSelect/MultiSelect.svelte.d.ts new file mode 100644 index 00000000..b5be0b72 --- /dev/null +++ b/types/MultiSelect/MultiSelect.svelte.d.ts @@ -0,0 +1,264 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +export type MultiSelectItemId = any; + +export type MultiSelectItemText = string; + +export interface MultiSelectItem { + id: MultiSelectItemId; + text: MultiSelectItemText; + disabled?: boolean; +} + +type $RestProps = SvelteHTMLElements["input"]; + +type $Props = { + /** + * Set the multiselect items + * @default [] + */ + items?: ReadonlyArray; + + /** + * Override the display of a multiselect item + * @default (item) => item.text || item.id + */ + itemToString?: (item: MultiSelectItem) => any; + + /** + * Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs. + * @default (item) => {} + */ + itemToInput?: (item: MultiSelectItem) => { + name?: string; + labelText?: any; + title?: string; + value?: string; + }; + + /** + * Set the selected ids + * @default [] + */ + selectedIds?: ReadonlyArray; + + /** + * Specify the multiselect value + * @default "" + */ + value?: string; + + /** + * Set the size of the combobox + * @default undefined + */ + size?: "sm" | "lg" | "xl"; + + /** + * Specify the type of multiselect + * @default "default" + */ + type?: "default" | "inline"; + + /** + * Specify the direction of the multiselect dropdown menu + * @default "bottom" + */ + direction?: "bottom" | "top"; + + /** + * Specify the selection feedback after selecting items + * @default "top-after-reopen" + */ + selectionFeedback?: "top" | "fixed" | "top-after-reopen"; + + /** + * Set to `true` to disable the dropdown + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to filter items + * @default false + */ + filterable?: boolean; + + /** + * Override the filtering logic + * The default filtering is an exact string comparison + * @default (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase()) + */ + filterItem?: (item: MultiSelectItem, value: string) => boolean; + + /** + * Set to `true` to open the dropdown + * @default false + */ + open?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Specify the locale + * @default "en" + */ + locale?: string; + + /** + * Specify the placeholder text + * @default "" + */ + placeholder?: string; + + /** + * Override the sorting logic + * The default sorting compare the item text value + * @default (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) + */ + sortItem?: + | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) + | (() => void); + + /** + * Override the chevron icon label based on the open state. + * Defaults to "Open menu" when closed and "Close menu" when open + * @default undefined + */ + translateWithId?: ( + id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId, + ) => string; + + /** + * Override the label of the clear button when the input has a selection. + * Defaults to "Clear selected item" and "Clear all items" if more than one item is selected + * @default undefined + */ + translateWithIdSelection?: ( + id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId, + ) => string; + + /** + * Specify the title text + * @default "" + */ + titleText?: string; + + /** + * Set to `true` to pass the item to `itemToString` in the checkbox + * @default false + */ + useTitleInItem?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Set to `true` to indicate an warning state + * @default false + */ + warn?: boolean; + + /** + * Specify the warning state text + * @default "" + */ + warnText?: string; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Specify the list box label + * @default "" + */ + label?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Set an id for the list box component + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the select + * @default undefined + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + inputRef?: null | HTMLInputElement; + + /** + * Obtain a reference to the outer div element + * @default null + */ + multiSelectRef?: null | HTMLDivElement; + + /** + * Obtain a reference to the field box element + * @default null + */ + fieldRef?: null | HTMLDivElement; + + /** + * Obtain a reference to the selection element + * @default null + */ + selectionRef?: null | HTMLDivElement; + + /** + * Id of the highlighted ListBoxMenuItem + * @default null + */ + highlightedId?: null | MultiSelectItemId; + + [key: `data-${string}`]: any; +}; + +export type MultiSelectProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class MultiSelect extends SvelteComponentTyped< + MultiSelectProps, + { + select: CustomEvent<{ + selectedIds: MultiSelectItemId[]; + selected: MultiSelectItem[]; + unselected: MultiSelectItem[]; + }>; + clear: CustomEvent; + blur: FocusEvent | CustomEvent; + keydown: WindowEventMap["keydown"]; + input: WindowEventMap["input"]; + keyup: WindowEventMap["keyup"]; + focus: WindowEventMap["focus"]; + paste: WindowEventMap["paste"]; + }, + { default: { item: MultiSelectItem; index: number }; titleText: {} } +> {} diff --git a/types/Notification/InlineNotification.d.ts b/types/Notification/InlineNotification.d.ts deleted file mode 100644 index 3c625396..00000000 --- a/types/Notification/InlineNotification.d.ts +++ /dev/null @@ -1,72 +0,0 @@ -/// - -export interface InlineNotificationProps extends svelte.JSX.HTMLAttributes { - /** - * Set the type of notification - * @default "inline" - */ - notificationType?: "toast" | "inline"; - - /** - * Specify the kind of notification - * @default "error" - */ - kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt"; - - /** - * Set to `true` to use the low contrast variant - * @default false - */ - lowContrast?: boolean; - - /** - * Set the timeout duration (ms) to hide the notification after opening it - * @default 0 - */ - timeout?: number; - - /** - * Set the `role` attribute - * @default "alert" - */ - role?: string; - - /** - * Specify the title text - * @default "Title" - */ - title?: string; - - /** - * Specify the subtitle text - * @default "" - */ - subtitle?: string; - - /** - * Set to `true` to hide the close button - * @default false - */ - hideCloseButton?: boolean; - - /** - * Specify the ARIA label for the icon - * @default "Closes notification" - */ - iconDescription?: string; -} - -export default class InlineNotification { - $$prop_def: InlineNotificationProps; - $$slot_def: { - default: {}; - actions: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "close", cb: (event: CustomEvent) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Notification/InlineNotification.svelte.d.ts b/types/Notification/InlineNotification.svelte.d.ts new file mode 100644 index 00000000..0eedc810 --- /dev/null +++ b/types/Notification/InlineNotification.svelte.d.ts @@ -0,0 +1,82 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the kind of notification + * @default "error" + */ + kind?: + | "error" + | "info" + | "info-square" + | "success" + | "warning" + | "warning-alt"; + + /** + * Set to `true` to use the low contrast variant + * @default false + */ + lowContrast?: boolean; + + /** + * Set the timeout duration (ms) to hide the notification after opening it + * @default 0 + */ + timeout?: number; + + /** + * Set the `role` attribute + * @default "alert" + */ + role?: string; + + /** + * Specify the title text + * @default "" + */ + title?: string; + + /** + * Specify the subtitle text + * @default "" + */ + subtitle?: string; + + /** + * Set to `true` to hide the close button + * @default false + */ + hideCloseButton?: boolean; + + /** + * Specify the ARIA label for the status icon + * @default kind + " icon" + */ + statusIconDescription?: string; + + /** + * Specify the ARIA label for the close button + * @default "Close notification" + */ + closeButtonDescription?: string; + + [key: `data-${string}`]: any; +}; + +export type InlineNotificationProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class InlineNotification extends SvelteComponentTyped< + InlineNotificationProps, + { + close: CustomEvent<{ timeout: boolean }>; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {}; actions: {}; subtitle: {}; title: {} } +> {} diff --git a/types/Notification/NotificationActionButton.d.ts b/types/Notification/NotificationActionButton.d.ts deleted file mode 100644 index 10ea1deb..00000000 --- a/types/Notification/NotificationActionButton.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -/// - -export interface NotificationActionButtonProps {} - -export default class NotificationActionButton { - $$prop_def: NotificationActionButtonProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Notification/NotificationActionButton.svelte.d.ts b/types/Notification/NotificationActionButton.svelte.d.ts new file mode 100644 index 00000000..1669c053 --- /dev/null +++ b/types/Notification/NotificationActionButton.svelte.d.ts @@ -0,0 +1,15 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { ButtonProps } from "../Button/Button.svelte"; + +export type NotificationActionButtonProps = ButtonProps & {}; + +export default class NotificationActionButton extends SvelteComponentTyped< + NotificationActionButtonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/Notification/NotificationButton.d.ts b/types/Notification/NotificationButton.d.ts deleted file mode 100644 index 5bf25670..00000000 --- a/types/Notification/NotificationButton.d.ts +++ /dev/null @@ -1,36 +0,0 @@ -/// - -export interface NotificationButtonProps extends svelte.JSX.HTMLAttributes { - /** - * Set the type of notification - * @default "toast" - */ - notificationType?: "toast" | "inline"; - - /** - * Specify the icon from `carbon-icons-svelte` to render - */ - renderIcon?: typeof import("carbon-icons-svelte").CarbonIcon; - - /** - * Specify the title of the icon - */ - title?: string; - - /** - * Specify the ARIA label for the icon - * @default "Close icon" - */ - iconDescription?: string; -} - -export default class NotificationButton { - $$prop_def: NotificationButtonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Notification/NotificationButton.svelte.d.ts b/types/Notification/NotificationButton.svelte.d.ts new file mode 100644 index 00000000..ee7b4d45 --- /dev/null +++ b/types/Notification/NotificationButton.svelte.d.ts @@ -0,0 +1,45 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["button"]; + +type $Props = { + /** + * Set the type of notification + * @default "toast" + */ + notificationType?: "toast" | "inline"; + + /** + * Specify the icon to render + * @default undefined + */ + icon?: any; + + /** + * Specify the title of the icon + * @default undefined + */ + title?: string; + + /** + * Specify the ARIA label for the icon + * @default "Close icon" + */ + iconDescription?: string; + + [key: `data-${string}`]: any; +}; + +export type NotificationButtonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class NotificationButton extends SvelteComponentTyped< + NotificationButtonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/Notification/NotificationIcon.d.ts b/types/Notification/NotificationIcon.d.ts deleted file mode 100644 index 1441aab4..00000000 --- a/types/Notification/NotificationIcon.d.ts +++ /dev/null @@ -1,28 +0,0 @@ -/// - -export interface NotificationIconProps { - /** - * Specify the kind of notification icon - * @default "error" - */ - kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt"; - - /** - * Set the type of notification - * @default "toast" - */ - notificationType?: "toast" | "inline"; - - /** - * Specify the ARIA label for the icon - * @default "Closes notification" - */ - iconDescription?: string; -} - -export default class NotificationIcon { - $$prop_def: NotificationIconProps; - $$slot_def: {}; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Notification/NotificationIcon.svelte.d.ts b/types/Notification/NotificationIcon.svelte.d.ts new file mode 100644 index 00000000..19736ad6 --- /dev/null +++ b/types/Notification/NotificationIcon.svelte.d.ts @@ -0,0 +1,33 @@ +import type { SvelteComponentTyped } from "svelte"; + +export type NotificationIconProps = { + /** + * Specify the kind of notification icon + * @default "error" + */ + kind?: + | "error" + | "info" + | "info-square" + | "success" + | "warning" + | "warning-alt"; + + /** + * Set the type of notification + * @default "toast" + */ + notificationType?: "toast" | "inline"; + + /** + * Specify the ARIA label for the icon + * @default undefined + */ + iconDescription: undefined; +}; + +export default class NotificationIcon extends SvelteComponentTyped< + NotificationIconProps, + Record, + {} +> {} diff --git a/types/Notification/NotificationTextDetails.d.ts b/types/Notification/NotificationTextDetails.d.ts deleted file mode 100644 index 0bc3f7a2..00000000 --- a/types/Notification/NotificationTextDetails.d.ts +++ /dev/null @@ -1,36 +0,0 @@ -/// - -export interface NotificationTextDetailsProps { - /** - * Set the type of notification - * @default "toast" - */ - notificationType?: "toast" | "inline"; - - /** - * Specify the title text - * @default "Title" - */ - title?: string; - - /** - * Specify the subtitle text - * @default "" - */ - subtitle?: string; - - /** - * Specify the caption text - * @default "Caption" - */ - caption?: string; -} - -export default class NotificationTextDetails { - $$prop_def: NotificationTextDetailsProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Notification/ToastNotification.d.ts b/types/Notification/ToastNotification.d.ts deleted file mode 100644 index 1894d000..00000000 --- a/types/Notification/ToastNotification.d.ts +++ /dev/null @@ -1,77 +0,0 @@ -/// - -export interface ToastNotificationProps extends svelte.JSX.HTMLAttributes { - /** - * Set the type of notification - * @default "toast" - */ - notificationType?: "toast" | "inline"; - - /** - * Specify the kind of notification - * @default "error" - */ - kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt"; - - /** - * Set to `true` to use the low contrast variant - * @default false - */ - lowContrast?: boolean; - - /** - * Set the timeout duration (ms) to hide the notification after opening it - * @default 0 - */ - timeout?: number; - - /** - * Set the `role` attribute - * @default "alert" - */ - role?: string; - - /** - * Specify the title text - * @default "Title" - */ - title?: string; - - /** - * Specify the subtitle text - * @default "" - */ - subtitle?: string; - - /** - * Specify the caption text - * @default "Caption" - */ - caption?: string; - - /** - * Specify the ARIA label for the icon - * @default "Closes notification" - */ - iconDescription?: string; - - /** - * Set to `true` to hide the close button - * @default false - */ - hideCloseButton?: boolean; -} - -export default class ToastNotification { - $$prop_def: ToastNotificationProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "close", cb: (event: CustomEvent) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Notification/ToastNotification.svelte.d.ts b/types/Notification/ToastNotification.svelte.d.ts new file mode 100644 index 00000000..66534bf7 --- /dev/null +++ b/types/Notification/ToastNotification.svelte.d.ts @@ -0,0 +1,95 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the kind of notification + * @default "error" + */ + kind?: + | "error" + | "info" + | "info-square" + | "success" + | "warning" + | "warning-alt"; + + /** + * Set to `true` to use the low contrast variant + * @default false + */ + lowContrast?: boolean; + + /** + * Set the timeout duration (ms) to hide the notification after opening it + * @default 0 + */ + timeout?: number; + + /** + * Set the `role` attribute + * @default "alert" + */ + role?: string; + + /** + * Specify the title text + * @default "" + */ + title?: string; + + /** + * Specify the subtitle text + * @default "" + */ + subtitle?: string; + + /** + * Specify the caption text + * @default "" + */ + caption?: string; + + /** + * Specify the ARIA label for the status icon + * @default kind + " icon" + */ + statusIconDescription?: string; + + /** + * Specify the ARIA label for the close button + * @default "Close notification" + */ + closeButtonDescription?: string; + + /** + * Set to `true` to hide the close button + * @default false + */ + hideCloseButton?: boolean; + + /** + * Set to `true` for the notification to span + * the full width of its containing element. + * @default false + */ + fullWidth?: boolean; + + [key: `data-${string}`]: any; +}; + +export type ToastNotificationProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ToastNotification extends SvelteComponentTyped< + ToastNotificationProps, + { + close: CustomEvent<{ timeout: boolean }>; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {}; caption: {}; subtitle: {}; title: {} } +> {} diff --git a/types/NumberInput/NumberInput.d.ts b/types/NumberInput/NumberInput.svelte.d.ts similarity index 58% rename from types/NumberInput/NumberInput.d.ts rename to types/NumberInput/NumberInput.svelte.d.ts index 5b0c5c91..a0296982 100644 --- a/types/NumberInput/NumberInput.d.ts +++ b/types/NumberInput/NumberInput.svelte.d.ts @@ -1,18 +1,23 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; export type NumberInputTranslationId = "increment" | "decrement"; -export interface NumberInputProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["input"]; + +type $Props = { /** * Set the size of the input + * @default undefined */ size?: "sm" | "xl"; /** - * Specify the input value - * @default "" + * Specify the input value. + * Use `null` to denote "no value" + * @default null */ - value?: number | string; + value?: null | number; /** * Specify the step increment @@ -22,11 +27,13 @@ export interface NumberInputProps extends svelte.JSX.HTMLAttributes string; - /** - * Default translation ids - * @constant - * @default { increment: "increment", decrement: "decrement", } - */ - translationIds?: { increment: "increment"; decrement: "decrement" }; - /** * Set an id for the input element * @default "ccs-" + Math.random().toString(36) @@ -117,6 +129,7 @@ export interface NumberInputProps extends svelte.JSX.HTMLAttributes void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; - $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; +export type NumberInputProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class NumberInput extends SvelteComponentTyped< + NumberInputProps, + { + change: CustomEvent; + input: CustomEvent; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + keydown: WindowEventMap["keydown"]; + keyup: WindowEventMap["keyup"]; + focus: WindowEventMap["focus"]; + blur: WindowEventMap["blur"]; + paste: WindowEventMap["paste"]; + }, + { label: {} } +> { + /** + * Default translation ids + */ + translationIds: { increment: "increment"; decrement: "decrement" }; } diff --git a/types/NumberInput/NumberInputSkeleton.d.ts b/types/NumberInput/NumberInputSkeleton.d.ts deleted file mode 100644 index 63906cb4..00000000 --- a/types/NumberInput/NumberInputSkeleton.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -/// - -export interface NumberInputSkeletonProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to hide the label text - * @default false - */ - hideLabel?: boolean; -} - -export default class NumberInputSkeleton { - $$prop_def: NumberInputSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/NumberInput/NumberInputSkeleton.svelte.d.ts b/types/NumberInput/NumberInputSkeleton.svelte.d.ts new file mode 100644 index 00000000..90a6b84e --- /dev/null +++ b/types/NumberInput/NumberInputSkeleton.svelte.d.ts @@ -0,0 +1,27 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set to `true` to hide the label text + * @default false + */ + hideLabel?: boolean; + + [key: `data-${string}`]: any; +}; + +export type NumberInputSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class NumberInputSkeleton extends SvelteComponentTyped< + NumberInputSkeletonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/OrderedList/OrderedList.d.ts b/types/OrderedList/OrderedList.d.ts deleted file mode 100644 index 2da61249..00000000 --- a/types/OrderedList/OrderedList.d.ts +++ /dev/null @@ -1,28 +0,0 @@ -/// - -export interface OrderedListProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to use the nested variant - * @default false - */ - nested?: boolean; - - /** - * Set to `true` to use native list styles - * @default false - */ - native?: boolean; -} - -export default class OrderedList { - $$prop_def: OrderedListProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/OrderedList/OrderedList.svelte.d.ts b/types/OrderedList/OrderedList.svelte.d.ts new file mode 100644 index 00000000..bbacabce --- /dev/null +++ b/types/OrderedList/OrderedList.svelte.d.ts @@ -0,0 +1,39 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["ol"]; + +type $Props = { + /** + * Set to `true` to use the nested variant + * @default false + */ + nested?: boolean; + + /** + * Set to `true` to use native list styles + * @default false + */ + native?: boolean; + + /** + * Set to `true` to use Carbon's expressive typesetting + * @default false + */ + expressive?: boolean; + + [key: `data-${string}`]: any; +}; + +export type OrderedListProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class OrderedList extends SvelteComponentTyped< + OrderedListProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/OverflowMenu/OverflowMenu.d.ts b/types/OverflowMenu/OverflowMenu.svelte.d.ts similarity index 54% rename from types/OverflowMenu/OverflowMenu.d.ts rename to types/OverflowMenu/OverflowMenu.svelte.d.ts index 6c6fa72f..8855d12c 100644 --- a/types/OverflowMenu/OverflowMenu.d.ts +++ b/types/OverflowMenu/OverflowMenu.svelte.d.ts @@ -1,8 +1,12 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; -export interface OverflowMenuProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["button"]; + +type $Props = { /** * Specify the size of the overflow menu + * @default undefined */ size?: "sm" | "xl"; @@ -32,16 +36,20 @@ export interface OverflowMenuProps extends svelte.JSX.HTMLAttributes` + * @default undefined */ - icon?: typeof import("carbon-icons-svelte").CarbonIcon; + icon?: any; /** * Specify the icon class + * @default undefined */ iconClass?: string; @@ -68,20 +76,21 @@ export interface OverflowMenuProps extends svelte.JSX.HTMLAttributes void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: "close", cb: (event: CustomEvent) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} +export type OverflowMenuProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class OverflowMenu extends SvelteComponentTyped< + OverflowMenuProps, + { + close: CustomEvent; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + keydown: WindowEventMap["keydown"]; + }, + { default: {}; menu: {} } +> {} diff --git a/types/OverflowMenu/OverflowMenuItem.d.ts b/types/OverflowMenu/OverflowMenuItem.svelte.d.ts similarity index 61% rename from types/OverflowMenu/OverflowMenuItem.d.ts rename to types/OverflowMenu/OverflowMenuItem.svelte.d.ts index 01062634..e025f961 100644 --- a/types/OverflowMenu/OverflowMenuItem.d.ts +++ b/types/OverflowMenu/OverflowMenuItem.svelte.d.ts @@ -1,9 +1,12 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; -export interface OverflowMenuItemProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["li"]; + +type $Props = { /** - * Specify the item text - * Alternatively, use the default slot for a custom element + * Specify the item text. + * Alternatively, use the default slot * @default "Provide text" */ text?: string; @@ -55,15 +58,14 @@ export interface OverflowMenuItemProps extends svelte.JSX.HTMLAttributes void): () => void; - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} +export type OverflowMenuItemProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class OverflowMenuItem extends SvelteComponentTyped< + OverflowMenuItemProps, + { click: WindowEventMap["click"]; keydown: WindowEventMap["keydown"] }, + { default: {} } +> {} diff --git a/types/Pagination/Pagination.d.ts b/types/Pagination/Pagination.svelte.d.ts similarity index 51% rename from types/Pagination/Pagination.d.ts rename to types/Pagination/Pagination.svelte.d.ts index e0356a35..71aa600f 100644 --- a/types/Pagination/Pagination.d.ts +++ b/types/Pagination/Pagination.svelte.d.ts @@ -1,6 +1,9 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; -export interface PaginationProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { /** * Specify the current page index * @default 1 @@ -13,6 +16,17 @@ export interface PaginationProps extends svelte.JSX.HTMLAttributes `${min}–${max} items` + * @default (min, max) => `${min.toLocaleString()}–${max.toLocaleString()} item${max === 1 ? "" : "s"}` */ itemText?: (min: number, max: number) => string; /** * Override the item range text - * @default (min, max, total) => `${min}–${max} of ${total} items` + * @default (min, max, total) => `${min.toLocaleString()}–${max.toLocaleString()} of ${total.toLocaleString()} item${max === 1 ? "" : "s"}` */ itemRangeText?: (min: number, max: number, total: number) => string; @@ -71,7 +85,7 @@ export interface PaginationProps extends svelte.JSX.HTMLAttributes; /** * Set to `true` if the number of pages is unknown @@ -81,13 +95,13 @@ export interface PaginationProps extends svelte.JSX.HTMLAttributes `page ${page}` + * @default (page) => `page ${page.toLocaleString()}` */ pageText?: (page: number) => string; /** * Override the page range text - * @default (current, total) => `of ${total} page${total === 1 ? "" : "s"}` + * @default (current, total) => `of ${total.toLocaleString()} page${total === 1 ? "" : "s"}` */ pageRangeText?: (current: number, total: number) => string; @@ -96,12 +110,20 @@ export interface PaginationProps extends svelte.JSX.HTMLAttributes) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} +export type PaginationProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Pagination extends SvelteComponentTyped< + PaginationProps, + { + /** Dispatched after any user interaction */ + change: CustomEvent<{ page?: number; pageSize?: number }>; + ["click:button--previous"]: CustomEvent<{ page: number }>; + ["click:button--next"]: CustomEvent<{ page: number }>; + update: CustomEvent<{ pageSize: number; page: number }>; + }, + {} +> {} diff --git a/types/Pagination/PaginationSkeleton.d.ts b/types/Pagination/PaginationSkeleton.d.ts deleted file mode 100644 index c6512a99..00000000 --- a/types/Pagination/PaginationSkeleton.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -/// - -export interface PaginationSkeletonProps extends svelte.JSX.HTMLAttributes {} - -export default class PaginationSkeleton { - $$prop_def: PaginationSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Pagination/PaginationSkeleton.svelte.d.ts b/types/Pagination/PaginationSkeleton.svelte.d.ts new file mode 100644 index 00000000..8195dc01 --- /dev/null +++ b/types/Pagination/PaginationSkeleton.svelte.d.ts @@ -0,0 +1,21 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + [key: `data-${string}`]: any; +}; + +export type PaginationSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class PaginationSkeleton extends SvelteComponentTyped< + PaginationSkeletonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/PaginationNav/PaginationNav.d.ts b/types/PaginationNav/PaginationNav.d.ts deleted file mode 100644 index faaa7180..00000000 --- a/types/PaginationNav/PaginationNav.d.ts +++ /dev/null @@ -1,49 +0,0 @@ -/// - -export interface PaginationNavProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the current page index - * @default 0 - */ - page?: number; - - /** - * Specify the total number of pages - * @default 10 - */ - total?: number; - - /** - * Specify the total number of pages to show - * @default 10 - */ - shown?: number; - - /** - * Set to `true` to loop the navigation - * @default false - */ - loop?: boolean; - - /** - * Specify the forward button text - * @default "Next page" - */ - forwardText?: string; - - /** - * Specify the backward button text - * @default "Previous page" - */ - backwardText?: string; -} - -export default class PaginationNav { - $$prop_def: PaginationNavProps; - $$slot_def: {}; - - $on(eventname: "click:button--previous", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "click:button--next", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/PaginationNav/PaginationNav.svelte.d.ts b/types/PaginationNav/PaginationNav.svelte.d.ts new file mode 100644 index 00000000..4412e7a9 --- /dev/null +++ b/types/PaginationNav/PaginationNav.svelte.d.ts @@ -0,0 +1,63 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["nav"]; + +type $Props = { + /** + * Specify the current page index + * @default 1 + */ + page?: number; + + /** + * Specify the total number of pages + * @default 10 + */ + total?: number; + + /** + * Specify the total number of pages to show + * @default 10 + */ + shown?: number; + + /** + * Set to `true` to loop the navigation + * @default false + */ + loop?: boolean; + + /** + * Specify the forward button text + * @default "Next page" + */ + forwardText?: string; + + /** + * Specify the backward button text + * @default "Previous page" + */ + backwardText?: string; + + /** + * Set the position of the tooltip relative to the pagination buttons. + * @default "bottom" + */ + tooltipPosition?: "top" | "right" | "bottom" | "left" | "outside" | "inside"; + + [key: `data-${string}`]: any; +}; + +export type PaginationNavProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class PaginationNav extends SvelteComponentTyped< + PaginationNavProps, + { + /** fires after every user interaction */ + change: CustomEvent<{ page: number }>; + ["click:button--previous"]: CustomEvent<{ page: number }>; + ["click:button--next"]: CustomEvent<{ page: number }>; + }, + {} +> {} diff --git a/types/Popover/Popover.svelte.d.ts b/types/Popover/Popover.svelte.d.ts new file mode 100644 index 00000000..893ed1dc --- /dev/null +++ b/types/Popover/Popover.svelte.d.ts @@ -0,0 +1,70 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set to `true` to display the popover + * @default false + */ + open?: boolean; + + /** + * Set to `true` to close the popover on an outside click + * @default false + */ + closeOnOutsideClick?: boolean; + + /** + * Set to `true` render a caret + * @default false + */ + caret?: boolean; + + /** + * Specify the alignment of the caret + * @default "top" + */ + align?: + | "top" + | "top-left" + | "top-right" + | "bottom" + | "bottom-left" + | "bottom-right" + | "left" + | "left-bottom" + | "left-top" + | "right" + | "right-bottom" + | "right-top"; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to enable the high contrast variant + * @default false + */ + highContrast?: boolean; + + /** + * Set to `true` to use a relative position + * @default false + */ + relative?: boolean; + + [key: `data-${string}`]: any; +}; + +export type PopoverProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Popover extends SvelteComponentTyped< + PopoverProps, + { ["click:outside"]: CustomEvent<{ target: HTMLElement }> }, + { default: {} } +> {} diff --git a/types/ProgressBar/ProgressBar.svelte.d.ts b/types/ProgressBar/ProgressBar.svelte.d.ts new file mode 100644 index 00000000..dc76989b --- /dev/null +++ b/types/ProgressBar/ProgressBar.svelte.d.ts @@ -0,0 +1,70 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the current value + * @default undefined + */ + value?: number; + + /** + * Specify the maximum value + * @default 100 + */ + max?: number; + + /** + * Specify the kind of progress bar + * @default "default" + */ + kind?: "default" | "inline" | "indented"; + + /** + * Specify the status + * @default "active" + */ + status?: "active" | "finished" | "error"; + + /** + * Specify the size + * @default "md" + */ + size?: "sm" | "md"; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Set an id for the progress bar element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + [key: `data-${string}`]: any; +}; + +export type ProgressBarProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ProgressBar extends SvelteComponentTyped< + ProgressBarProps, + Record, + { labelText: {} } +> {} diff --git a/types/ProgressIndicator/ProgressIndicator.d.ts b/types/ProgressIndicator/ProgressIndicator.d.ts deleted file mode 100644 index bcb41953..00000000 --- a/types/ProgressIndicator/ProgressIndicator.d.ts +++ /dev/null @@ -1,41 +0,0 @@ -/// - -export interface ProgressIndicatorProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the current step index - * @default 0 - */ - currentIndex?: number; - - /** - * Set to `true` to use the vertical variant - * @default false - */ - vertical?: boolean; - - /** - * Set to `true` to specify whether the progress steps should be split equally in size in the div - * @default false - */ - spaceEqually?: boolean; - - /** - * Set to `true` to prevent `currentIndex` from updating - * @default false - */ - preventChangeOnClick?: boolean; -} - -export default class ProgressIndicator { - $$prop_def: ProgressIndicatorProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/ProgressIndicator/ProgressIndicator.svelte.d.ts b/types/ProgressIndicator/ProgressIndicator.svelte.d.ts new file mode 100644 index 00000000..4e234b61 --- /dev/null +++ b/types/ProgressIndicator/ProgressIndicator.svelte.d.ts @@ -0,0 +1,46 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["ul"]; + +type $Props = { + /** + * Specify the current step index + * @default 0 + */ + currentIndex?: number; + + /** + * Set to `true` to use the vertical variant + * @default false + */ + vertical?: boolean; + + /** + * Set to `true` to specify whether the progress steps should be split equally in size in the div + * @default false + */ + spaceEqually?: boolean; + + /** + * Set to `true` to prevent `currentIndex` from updating + * @default false + */ + preventChangeOnClick?: boolean; + + [key: `data-${string}`]: any; +}; + +export type ProgressIndicatorProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ProgressIndicator extends SvelteComponentTyped< + ProgressIndicatorProps, + { + change: CustomEvent; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/ProgressIndicator/ProgressIndicatorSkeleton.d.ts b/types/ProgressIndicator/ProgressIndicatorSkeleton.d.ts deleted file mode 100644 index d77c1aa5..00000000 --- a/types/ProgressIndicator/ProgressIndicatorSkeleton.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -/// - -export interface ProgressIndicatorSkeletonProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to use the vertical variant - * @default false - */ - vertical?: boolean; - - /** - * Specify the number of steps to render - * @default 4 - */ - count?: number; -} - -export default class ProgressIndicatorSkeleton { - $$prop_def: ProgressIndicatorSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/ProgressIndicator/ProgressIndicatorSkeleton.svelte.d.ts b/types/ProgressIndicator/ProgressIndicatorSkeleton.svelte.d.ts new file mode 100644 index 00000000..d68ad1ac --- /dev/null +++ b/types/ProgressIndicator/ProgressIndicatorSkeleton.svelte.d.ts @@ -0,0 +1,34 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["ul"]; + +type $Props = { + /** + * Set to `true` to use the vertical variant + * @default false + */ + vertical?: boolean; + + /** + * Specify the number of steps to render + * @default 4 + */ + count?: number; + + [key: `data-${string}`]: any; +}; + +export type ProgressIndicatorSkeletonProps = Omit<$RestProps, keyof $Props> & + $Props; + +export default class ProgressIndicatorSkeleton extends SvelteComponentTyped< + ProgressIndicatorSkeletonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/ProgressIndicator/ProgressStep.d.ts b/types/ProgressIndicator/ProgressStep.d.ts deleted file mode 100644 index 425ae4b2..00000000 --- a/types/ProgressIndicator/ProgressStep.d.ts +++ /dev/null @@ -1,65 +0,0 @@ -/// - -export interface ProgressStepProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` for the complete variant - * @default false - */ - complete?: boolean; - - /** - * Set to `true` to use the current variant - * @default false - */ - current?: boolean; - - /** - * Set to `true` to disable the progress step - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the step description - * @default "" - */ - description?: string; - - /** - * Specify the step label - * @default "" - */ - label?: string; - - /** - * Specify the step secondary label - * @default "" - */ - secondaryLabel?: string; - - /** - * Set an id for the top-level element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; -} - -export default class ProgressStep { - $$prop_def: ProgressStepProps; - $$slot_def: { - default: { props: { class: "bx--progress-label" } }; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/ProgressIndicator/ProgressStep.svelte.d.ts b/types/ProgressIndicator/ProgressStep.svelte.d.ts new file mode 100644 index 00000000..d85f374e --- /dev/null +++ b/types/ProgressIndicator/ProgressStep.svelte.d.ts @@ -0,0 +1,70 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["li"]; + +type $Props = { + /** + * Set to `true` for the complete variant + * @default false + */ + complete?: boolean; + + /** + * Set to `true` to use the current variant + * @default false + */ + current?: boolean; + + /** + * Set to `true` to disable the progress step + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the step description + * @default "" + */ + description?: string; + + /** + * Specify the step label + * @default "" + */ + label?: string; + + /** + * Specify the step secondary label + * @default "" + */ + secondaryLabel?: string; + + /** + * Set an id for the top-level element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + [key: `data-${string}`]: any; +}; + +export type ProgressStepProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ProgressStep extends SvelteComponentTyped< + ProgressStepProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + keydown: WindowEventMap["keydown"]; + }, + { default: { props: { class: "bx--progress-label" } } } +> {} diff --git a/types/README.md b/types/README.md deleted file mode 100644 index 51847b04..00000000 --- a/types/README.md +++ /dev/null @@ -1,7 +0,0 @@ -# types - -The TypeScript definitions in this folder are auto-generated by [sveld](https://github.com/ibm/sveld). - -Do not edit these types directly. To add or update property types or definitions, update the JSDoc annotations in the component source code in the [src](../src) folder. - -Tests are located in the [tests](../tests) folder. diff --git a/types/RadioButton/RadioButton.d.ts b/types/RadioButton/RadioButton.svelte.d.ts similarity index 50% rename from types/RadioButton/RadioButton.d.ts rename to types/RadioButton/RadioButton.svelte.d.ts index ede21976..6933bef7 100644 --- a/types/RadioButton/RadioButton.d.ts +++ b/types/RadioButton/RadioButton.svelte.d.ts @@ -1,11 +1,14 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; -export interface RadioButtonProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { /** * Specify the value of the radio button * @default "" */ - value?: string; + value?: string | number; /** * Set to `true` to check the radio button @@ -14,11 +17,17 @@ export interface RadioButtonProps extends svelte.JSX.HTMLAttributes void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} +export type RadioButtonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class RadioButton extends SvelteComponentTyped< + RadioButtonProps, + { + focus: WindowEventMap["focus"]; + blur: WindowEventMap["blur"]; + change: WindowEventMap["change"]; + }, + { labelText: {} } +> {} diff --git a/types/RadioButton/RadioButtonSkeleton.d.ts b/types/RadioButton/RadioButtonSkeleton.d.ts deleted file mode 100644 index bb06a92f..00000000 --- a/types/RadioButton/RadioButtonSkeleton.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -/// - -export interface RadioButtonSkeletonProps extends svelte.JSX.HTMLAttributes {} - -export default class RadioButtonSkeleton { - $$prop_def: RadioButtonSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/RadioButton/RadioButtonSkeleton.svelte.d.ts b/types/RadioButton/RadioButtonSkeleton.svelte.d.ts new file mode 100644 index 00000000..b5f9532f --- /dev/null +++ b/types/RadioButton/RadioButtonSkeleton.svelte.d.ts @@ -0,0 +1,21 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + [key: `data-${string}`]: any; +}; + +export type RadioButtonSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class RadioButtonSkeleton extends SvelteComponentTyped< + RadioButtonSkeletonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/RadioButtonGroup/RadioButtonGroup.d.ts b/types/RadioButtonGroup/RadioButtonGroup.d.ts deleted file mode 100644 index 9166f83b..00000000 --- a/types/RadioButtonGroup/RadioButtonGroup.d.ts +++ /dev/null @@ -1,45 +0,0 @@ -/// - -export interface RadioButtonGroupProps extends svelte.JSX.HTMLAttributes { - /** - * Set the selected radio button value - */ - selected?: string; - - /** - * Set to `true` to disable the radio buttons - * @default false - */ - disabled?: boolean; - - /** - * Specify the label position - * @default "right" - */ - labelPosition?: "right" | "left"; - - /** - * Specify the orientation of the radio buttons - * @default "horizontal" - */ - orientation?: "horizontal" | "vertical"; - - /** - * Set an id for the container div element - */ - id?: string; -} - -export default class RadioButtonGroup { - $$prop_def: RadioButtonGroupProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts b/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts new file mode 100644 index 00000000..b341e6ec --- /dev/null +++ b/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts @@ -0,0 +1,76 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set the selected radio button value + * @default undefined + */ + selected?: string | number; + + /** + * Set to `true` to disable the radio buttons + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to require the selection of a radio button + * @default undefined + */ + required?: boolean; + + /** + * Specify a name attribute for the radio button inputs + * @default undefined + */ + name?: string; + + /** + * Specify the legend text + * @default "" + */ + legendText?: string; + + /** + * Set to `true` to visually hide the legend + * @default false + */ + hideLegend?: boolean; + + /** + * Specify the label position + * @default "right" + */ + labelPosition?: "right" | "left"; + + /** + * Specify the orientation of the radio buttons + * @default "horizontal" + */ + orientation?: "horizontal" | "vertical"; + + /** + * Set an id for the container div element + * @default undefined + */ + id?: string; + + [key: `data-${string}`]: any; +}; + +export type RadioButtonGroupProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class RadioButtonGroup extends SvelteComponentTyped< + RadioButtonGroupProps, + { + change: CustomEvent; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {}; legendText: {} } +> {} diff --git a/types/RecursiveList/RecursiveList.svelte.d.ts b/types/RecursiveList/RecursiveList.svelte.d.ts new file mode 100644 index 00000000..f261fda1 --- /dev/null +++ b/types/RecursiveList/RecursiveList.svelte.d.ts @@ -0,0 +1,34 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +export interface RecursiveListNode { + text?: string; + href?: string; + html?: string; +} + +type $RestProps = SvelteHTMLElements["ul"] & SvelteHTMLElements["ol"]; + +type $Props = { + /** + * Specify the nodes to render + * @default [] + */ + nodes?: Array; + + /** + * Specify the type of list to render + * @default "unordered" + */ + type?: "unordered" | "ordered" | "ordered-native"; + + [key: `data-${string}`]: any; +}; + +export type RecursiveListProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class RecursiveList extends SvelteComponentTyped< + RecursiveListProps, + Record, + {} +> {} diff --git a/types/Search/Search.d.ts b/types/Search/Search.d.ts deleted file mode 100644 index 494e369d..00000000 --- a/types/Search/Search.d.ts +++ /dev/null @@ -1,102 +0,0 @@ -/// - -export interface SearchProps { - /** - * @default false - */ - small?: boolean; - - /** - * Specify the size of the search input - * @default "xl" - */ - size?: "sm" | "lg" | "xl"; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to disable the search input - * @default false - */ - disabled?: boolean; - - /** - * Specify the value of the search input - * @default "" - */ - value?: string; - - /** - * Specify the `type` attribute of the search input - * @default "text" - */ - type?: string; - - /** - * Specify the `placeholder` attribute of the search input - * @default "Search..." - */ - placeholder?: string; - - /** - * Specify the `autocomplete` attribute - * @default "off" - */ - autocomplete?: "on" | "off"; - - /** - * Set to `true` to auto focus the search element - * @default false - */ - autofocus?: boolean; - - /** - * Specify the close button label text - * @default "Clear search input" - */ - closeButtonLabelText?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set an id for the input element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; -} - -export default class Search { - $$prop_def: SearchProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; - $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; - $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; - $on(eventname: "clear", cb: (event: CustomEvent) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Search/Search.svelte.d.ts b/types/Search/Search.svelte.d.ts new file mode 100644 index 00000000..f5481dd8 --- /dev/null +++ b/types/Search/Search.svelte.d.ts @@ -0,0 +1,128 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["input"]; + +type $Props = { + /** + * Specify the value of the search input + * @default "" + */ + value?: any; + + /** + * Specify the size of the search input + * @default "xl" + */ + size?: "sm" | "lg" | "xl"; + + /** + * Specify the class name passed to the outer div element + * @default "" + */ + searchClass?: string; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the search input + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to enable the expandable variant + * @default false + */ + expandable?: boolean; + + /** + * Set to `true to expand the search input + * @default false + */ + expanded?: boolean; + + /** + * Specify the `placeholder` attribute of the search input + * @default "Search..." + */ + placeholder?: string; + + /** + * Specify the `autocomplete` attribute + * @default "off" + */ + autocomplete?: "on" | "off"; + + /** + * Set to `true` to auto focus the search element + * @default false + */ + autofocus?: boolean; + + /** + * Specify the close button label text + * @default "Clear search input" + */ + closeButtonLabelText?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Specify the icon to render. + * Defaults to `` + * @default undefined + */ + icon?: any; + + /** + * Set an id for the input element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + + [key: `data-${string}`]: any; +}; + +export type SearchProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Search extends SvelteComponentTyped< + SearchProps, + { + expand: CustomEvent; + collapse: CustomEvent; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + change: WindowEventMap["change"]; + input: WindowEventMap["input"]; + focus: WindowEventMap["focus"]; + blur: WindowEventMap["blur"]; + keydown: WindowEventMap["keydown"]; + keyup: WindowEventMap["keyup"]; + paste: WindowEventMap["paste"]; + clear: CustomEvent; + }, + { labelText: {} } +> {} diff --git a/types/Search/SearchSkeleton.d.ts b/types/Search/SearchSkeleton.d.ts deleted file mode 100644 index 7b9ffe3b..00000000 --- a/types/Search/SearchSkeleton.d.ts +++ /dev/null @@ -1,25 +0,0 @@ -/// - -export interface SearchSkeletonProps extends svelte.JSX.HTMLAttributes { - /** - * @default false - */ - small?: boolean; - - /** - * Specify the size of the search input - * @default "xl" - */ - size?: "sm" | "lg" | "xl"; -} - -export default class SearchSkeleton { - $$prop_def: SearchSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Search/SearchSkeleton.svelte.d.ts b/types/Search/SearchSkeleton.svelte.d.ts new file mode 100644 index 00000000..133849d1 --- /dev/null +++ b/types/Search/SearchSkeleton.svelte.d.ts @@ -0,0 +1,27 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the size of the search input + * @default "xl" + */ + size?: "sm" | "lg" | "xl"; + + [key: `data-${string}`]: any; +}; + +export type SearchSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class SearchSkeleton extends SvelteComponentTyped< + SearchSkeletonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/Select/Select.d.ts b/types/Select/Select.svelte.d.ts similarity index 56% rename from types/Select/Select.d.ts rename to types/Select/Select.svelte.d.ts index c484d7bc..295837e0 100644 --- a/types/Select/Select.d.ts +++ b/types/Select/Select.svelte.d.ts @@ -1,13 +1,18 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; -export interface SelectProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { /** * Specify the selected item value + * @default undefined */ - selected?: string; + selected?: string | number; /** * Set the size of the select input + * @default undefined */ size?: "sm" | "xl"; @@ -37,6 +42,7 @@ export interface SelectProps extends svelte.JSX.HTMLAttributes void): () => void; - $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} + [key: `data-${string}`]: any; +}; + +export type SelectProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Select extends SvelteComponentTyped< + SelectProps, + { + /** The selected value. */ update: CustomEvent; + change: WindowEventMap["change"]; + input: WindowEventMap["input"]; + focus: WindowEventMap["focus"]; + blur: WindowEventMap["blur"]; + }, + { default: {}; labelText: {} } +> {} diff --git a/types/Select/SelectItem.d.ts b/types/Select/SelectItem.d.ts deleted file mode 100644 index b08ba976..00000000 --- a/types/Select/SelectItem.d.ts +++ /dev/null @@ -1,34 +0,0 @@ -/// - -export interface SelectItemProps { - /** - * Specify the option value - * @default "" - */ - value?: string; - - /** - * Specify the option text - * @default "" - */ - text?: string; - - /** - * Set to `true` to hide the option - * @default false - */ - hidden?: boolean; - - /** - * Set to `true` to disable the option - * @default false - */ - disabled?: boolean; -} - -export default class SelectItem { - $$prop_def: SelectItemProps; - $$slot_def: {}; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Select/SelectItem.svelte.d.ts b/types/Select/SelectItem.svelte.d.ts new file mode 100644 index 00000000..2d1106b7 --- /dev/null +++ b/types/Select/SelectItem.svelte.d.ts @@ -0,0 +1,46 @@ +import type { SvelteComponentTyped } from "svelte"; + +export type SelectItemProps = { + /** + * Specify the option value + * @default "" + */ + value?: string | number; + + /** + * Specify the option text + * If not specified, the value will be used as the text. + * @default undefined + */ + text?: string; + + /** + * Set to `true` to hide the option + * @default false + */ + hidden?: boolean; + + /** + * Set to `true` to disable the option + * @default false + */ + disabled?: boolean; + + /** + * Specify the class of the `option` element + * @default undefined + */ + class?: string; + + /** + * Specify the style of the `option` element + * @default undefined + */ + style?: string; +}; + +export default class SelectItem extends SvelteComponentTyped< + SelectItemProps, + Record, + {} +> {} diff --git a/types/Select/SelectItemGroup.d.ts b/types/Select/SelectItemGroup.d.ts deleted file mode 100644 index 8e47c5db..00000000 --- a/types/Select/SelectItemGroup.d.ts +++ /dev/null @@ -1,24 +0,0 @@ -/// - -export interface SelectItemGroupProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to disable the optgroup element - * @default false - */ - disabled?: boolean; - - /** - * Specify the label attribute of the optgroup element - * @default "Provide label" - */ - label?: string; -} - -export default class SelectItemGroup { - $$prop_def: SelectItemGroupProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Select/SelectItemGroup.svelte.d.ts b/types/Select/SelectItemGroup.svelte.d.ts new file mode 100644 index 00000000..679202d7 --- /dev/null +++ b/types/Select/SelectItemGroup.svelte.d.ts @@ -0,0 +1,28 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["optgroup"]; + +type $Props = { + /** + * Set to `true` to disable the optgroup element + * @default false + */ + disabled?: boolean; + + /** + * Specify the label attribute of the optgroup element + * @default "Provide label" + */ + label?: string; + + [key: `data-${string}`]: any; +}; + +export type SelectItemGroupProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class SelectItemGroup extends SvelteComponentTyped< + SelectItemGroupProps, + Record, + { default: {} } +> {} diff --git a/types/Select/SelectSkeleton.d.ts b/types/Select/SelectSkeleton.d.ts deleted file mode 100644 index 39ba59ec..00000000 --- a/types/Select/SelectSkeleton.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -/// - -export interface SelectSkeletonProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to hide the label text - * @default false - */ - hideLabel?: boolean; -} - -export default class SelectSkeleton { - $$prop_def: SelectSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Select/SelectSkeleton.svelte.d.ts b/types/Select/SelectSkeleton.svelte.d.ts new file mode 100644 index 00000000..52d7f8cf --- /dev/null +++ b/types/Select/SelectSkeleton.svelte.d.ts @@ -0,0 +1,27 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set to `true` to hide the label text + * @default false + */ + hideLabel?: boolean; + + [key: `data-${string}`]: any; +}; + +export type SelectSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class SelectSkeleton extends SvelteComponentTyped< + SelectSkeletonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/SkeletonPlaceholder/SkeletonPlaceholder.d.ts b/types/SkeletonPlaceholder/SkeletonPlaceholder.d.ts deleted file mode 100644 index 378ab06c..00000000 --- a/types/SkeletonPlaceholder/SkeletonPlaceholder.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -/// - -export interface SkeletonPlaceholderProps extends svelte.JSX.HTMLAttributes {} - -export default class SkeletonPlaceholder { - $$prop_def: SkeletonPlaceholderProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/SkeletonPlaceholder/SkeletonPlaceholder.svelte.d.ts b/types/SkeletonPlaceholder/SkeletonPlaceholder.svelte.d.ts new file mode 100644 index 00000000..4e63e986 --- /dev/null +++ b/types/SkeletonPlaceholder/SkeletonPlaceholder.svelte.d.ts @@ -0,0 +1,21 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + [key: `data-${string}`]: any; +}; + +export type SkeletonPlaceholderProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class SkeletonPlaceholder extends SvelteComponentTyped< + SkeletonPlaceholderProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/SkeletonText/SkeletonText.d.ts b/types/SkeletonText/SkeletonText.d.ts deleted file mode 100644 index d9a83b47..00000000 --- a/types/SkeletonText/SkeletonText.d.ts +++ /dev/null @@ -1,38 +0,0 @@ -/// - -export interface SkeletonTextProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the number of lines to render - * @default 3 - */ - lines?: number; - - /** - * Set to `true` to use the heading size variant - * @default false - */ - heading?: boolean; - - /** - * Set to `true` to use the paragraph size variant - * @default false - */ - paragraph?: boolean; - - /** - * Specify the width of the text (% or px) - * @default "100%" - */ - width?: string; -} - -export default class SkeletonText { - $$prop_def: SkeletonTextProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/SkeletonText/SkeletonText.svelte.d.ts b/types/SkeletonText/SkeletonText.svelte.d.ts new file mode 100644 index 00000000..fe46653c --- /dev/null +++ b/types/SkeletonText/SkeletonText.svelte.d.ts @@ -0,0 +1,45 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the number of lines to render + * @default 3 + */ + lines?: number; + + /** + * Set to `true` to use the heading size variant + * @default false + */ + heading?: boolean; + + /** + * Set to `true` to use the paragraph size variant + * @default false + */ + paragraph?: boolean; + + /** + * Specify the width of the text (% or px) + * @default "100%" + */ + width?: string; + + [key: `data-${string}`]: any; +}; + +export type SkeletonTextProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class SkeletonText extends SvelteComponentTyped< + SkeletonTextProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/Slider/Slider.d.ts b/types/Slider/Slider.svelte.d.ts similarity index 60% rename from types/Slider/Slider.d.ts rename to types/Slider/Slider.svelte.d.ts index e360a07a..1767186f 100644 --- a/types/Slider/Slider.d.ts +++ b/types/Slider/Slider.svelte.d.ts @@ -1,6 +1,9 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; -export interface SliderProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { /** * Specify the value of the slider * @default 0 @@ -73,6 +76,13 @@ export interface SliderProps extends svelte.JSX.HTMLAttributes...`) * @default "" */ labelText?: string; + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + /** * Set a name for the slider element * @default "" @@ -102,16 +119,21 @@ export interface SliderProps extends svelte.JSX.HTMLAttributes void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} +export type SliderProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Slider extends SvelteComponentTyped< + SliderProps, + { + change: CustomEvent; + input: CustomEvent; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { labelText: {} } +> {} diff --git a/types/Slider/SliderSkeleton.d.ts b/types/Slider/SliderSkeleton.d.ts deleted file mode 100644 index f46c18b9..00000000 --- a/types/Slider/SliderSkeleton.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -/// - -export interface SliderSkeletonProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to hide the label text - * @default false - */ - hideLabel?: boolean; -} - -export default class SliderSkeleton { - $$prop_def: SliderSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Slider/SliderSkeleton.svelte.d.ts b/types/Slider/SliderSkeleton.svelte.d.ts new file mode 100644 index 00000000..bf98628d --- /dev/null +++ b/types/Slider/SliderSkeleton.svelte.d.ts @@ -0,0 +1,27 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set to `true` to hide the label text + * @default false + */ + hideLabel?: boolean; + + [key: `data-${string}`]: any; +}; + +export type SliderSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class SliderSkeleton extends SvelteComponentTyped< + SliderSkeletonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/StructuredList/StructuredList.d.ts b/types/StructuredList/StructuredList.d.ts deleted file mode 100644 index e67a46f7..00000000 --- a/types/StructuredList/StructuredList.d.ts +++ /dev/null @@ -1,34 +0,0 @@ -/// - -export interface StructuredListProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the selected structured list row value - */ - selected?: string; - - /** - * Set to `true` to use the bordered variant - * @default false - */ - border?: boolean; - - /** - * Set to `true` to use the selection variant - * @default false - */ - selection?: boolean; -} - -export default class StructuredList { - $$prop_def: StructuredListProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/StructuredList/StructuredList.svelte.d.ts b/types/StructuredList/StructuredList.svelte.d.ts new file mode 100644 index 00000000..ce78c5e6 --- /dev/null +++ b/types/StructuredList/StructuredList.svelte.d.ts @@ -0,0 +1,46 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the selected structured list row value + * @default undefined + */ + selected?: string; + + /** + * Set to `true` to use the condensed variant + * @default false + */ + condensed?: boolean; + + /** + * Set to `true` to flush the list + * @default false + */ + flush?: boolean; + + /** + * Set to `true` to use the selection variant + * @default false + */ + selection?: boolean; + + [key: `data-${string}`]: any; +}; + +export type StructuredListProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class StructuredList extends SvelteComponentTyped< + StructuredListProps, + { + change: CustomEvent; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/StructuredList/StructuredListBody.d.ts b/types/StructuredList/StructuredListBody.d.ts deleted file mode 100644 index 4efa751d..00000000 --- a/types/StructuredList/StructuredListBody.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -/// - -export interface StructuredListBodyProps extends svelte.JSX.HTMLAttributes {} - -export default class StructuredListBody { - $$prop_def: StructuredListBodyProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/StructuredList/StructuredListBody.svelte.d.ts b/types/StructuredList/StructuredListBody.svelte.d.ts new file mode 100644 index 00000000..d64e16fd --- /dev/null +++ b/types/StructuredList/StructuredListBody.svelte.d.ts @@ -0,0 +1,21 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + [key: `data-${string}`]: any; +}; + +export type StructuredListBodyProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class StructuredListBody extends SvelteComponentTyped< + StructuredListBodyProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/StructuredList/StructuredListCell.d.ts b/types/StructuredList/StructuredListCell.d.ts deleted file mode 100644 index f0745595..00000000 --- a/types/StructuredList/StructuredListCell.d.ts +++ /dev/null @@ -1,28 +0,0 @@ -/// - -export interface StructuredListCellProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to use as a header - * @default false - */ - head?: boolean; - - /** - * Set to `true` to prevent wrapping - * @default false - */ - noWrap?: boolean; -} - -export default class StructuredListCell { - $$prop_def: StructuredListCellProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/StructuredList/StructuredListCell.svelte.d.ts b/types/StructuredList/StructuredListCell.svelte.d.ts new file mode 100644 index 00000000..b05c8e65 --- /dev/null +++ b/types/StructuredList/StructuredListCell.svelte.d.ts @@ -0,0 +1,33 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set to `true` to use as a header + * @default false + */ + head?: boolean; + + /** + * Set to `true` to prevent wrapping + * @default false + */ + noWrap?: boolean; + + [key: `data-${string}`]: any; +}; + +export type StructuredListCellProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class StructuredListCell extends SvelteComponentTyped< + StructuredListCellProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/StructuredList/StructuredListHead.d.ts b/types/StructuredList/StructuredListHead.d.ts deleted file mode 100644 index 145b8baa..00000000 --- a/types/StructuredList/StructuredListHead.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -/// - -export interface StructuredListHeadProps extends svelte.JSX.HTMLAttributes {} - -export default class StructuredListHead { - $$prop_def: StructuredListHeadProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/StructuredList/StructuredListHead.svelte.d.ts b/types/StructuredList/StructuredListHead.svelte.d.ts new file mode 100644 index 00000000..e06697f8 --- /dev/null +++ b/types/StructuredList/StructuredListHead.svelte.d.ts @@ -0,0 +1,21 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + [key: `data-${string}`]: any; +}; + +export type StructuredListHeadProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class StructuredListHead extends SvelteComponentTyped< + StructuredListHeadProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/StructuredList/StructuredListInput.d.ts b/types/StructuredList/StructuredListInput.svelte.d.ts similarity index 58% rename from types/StructuredList/StructuredListInput.d.ts rename to types/StructuredList/StructuredListInput.svelte.d.ts index 2844ea76..a6c85a30 100644 --- a/types/StructuredList/StructuredListInput.d.ts +++ b/types/StructuredList/StructuredListInput.svelte.d.ts @@ -1,6 +1,9 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; -export interface StructuredListInputProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["input"]; + +type $Props = { /** * Set to `true` to check the input * @default false @@ -36,11 +39,14 @@ export interface StructuredListInputProps extends svelte.JSX.HTMLAttributes void): () => void; -} +export type StructuredListInputProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class StructuredListInput extends SvelteComponentTyped< + StructuredListInputProps, + Record, + {} +> {} diff --git a/types/StructuredList/StructuredListRow.d.ts b/types/StructuredList/StructuredListRow.d.ts deleted file mode 100644 index 33071469..00000000 --- a/types/StructuredList/StructuredListRow.d.ts +++ /dev/null @@ -1,35 +0,0 @@ -/// - -export interface StructuredListRowProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to use as a header - * @default false - */ - head?: boolean; - - /** - * Set to `true` to render a label slot - * @default false - */ - label?: boolean; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; -} - -export default class StructuredListRow { - $$prop_def: StructuredListRowProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/StructuredList/StructuredListRow.svelte.d.ts b/types/StructuredList/StructuredListRow.svelte.d.ts new file mode 100644 index 00000000..e64ac5de --- /dev/null +++ b/types/StructuredList/StructuredListRow.svelte.d.ts @@ -0,0 +1,40 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["label"]; + +type $Props = { + /** + * Set to `true` to use as a header + * @default false + */ + head?: boolean; + + /** + * Set to `true` to render a label slot + * @default false + */ + label?: boolean; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + [key: `data-${string}`]: any; +}; + +export type StructuredListRowProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class StructuredListRow extends SvelteComponentTyped< + StructuredListRowProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + keydown: WindowEventMap["keydown"]; + }, + { default: {} } +> {} diff --git a/types/StructuredList/StructuredListSkeleton.d.ts b/types/StructuredList/StructuredListSkeleton.d.ts deleted file mode 100644 index 63fa81ae..00000000 --- a/types/StructuredList/StructuredListSkeleton.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -/// - -export interface StructuredListSkeletonProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the number of rows - * @default 5 - */ - rows?: number; - - /** - * Set to `true` to use the bordered variant - * @default false - */ - border?: boolean; -} - -export default class StructuredListSkeleton { - $$prop_def: StructuredListSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/StructuredList/StructuredListSkeleton.svelte.d.ts b/types/StructuredList/StructuredListSkeleton.svelte.d.ts new file mode 100644 index 00000000..1da26566 --- /dev/null +++ b/types/StructuredList/StructuredListSkeleton.svelte.d.ts @@ -0,0 +1,28 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the number of rows + * @default 5 + */ + rows?: number; + + [key: `data-${string}`]: any; +}; + +export type StructuredListSkeletonProps = Omit<$RestProps, keyof $Props> & + $Props; + +export default class StructuredListSkeleton extends SvelteComponentTyped< + StructuredListSkeletonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/Tabs/Tab.d.ts b/types/Tabs/Tab.d.ts deleted file mode 100644 index c0fd922f..00000000 --- a/types/Tabs/Tab.d.ts +++ /dev/null @@ -1,52 +0,0 @@ -/// - -export interface TabProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the tab label - * Alternatively, use the default slot (e.g., Label) - * @default "" - */ - label?: string; - - /** - * Specify the href attribute - * @default "#" - */ - href?: string; - - /** - * Set to `true` to disable the tab - * @default false - */ - disabled?: boolean; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Set an id for the top-level element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; - - /** - * Obtain a reference to the anchor HTML element - * @default null - */ - ref?: null | HTMLAnchorElement; -} - -export default class Tab { - $$prop_def: TabProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Tabs/Tab.svelte.d.ts b/types/Tabs/Tab.svelte.d.ts new file mode 100644 index 00000000..74755b43 --- /dev/null +++ b/types/Tabs/Tab.svelte.d.ts @@ -0,0 +1,58 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["li"]; + +type $Props = { + /** + * Specify the tab label. + * Alternatively, use the default slot (e.g., `Label`) + * @default "" + */ + label?: string; + + /** + * Specify the href attribute + * @default "#" + */ + href?: string; + + /** + * Set to `true` to disable the tab + * @default false + */ + disabled?: boolean; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Set an id for the top-level element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Obtain a reference to the anchor HTML element + * @default null + */ + ref?: null | HTMLAnchorElement; + + [key: `data-${string}`]: any; +}; + +export type TabProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Tab extends SvelteComponentTyped< + TabProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/Tabs/TabContent.d.ts b/types/Tabs/TabContent.d.ts deleted file mode 100644 index 73ace54e..00000000 --- a/types/Tabs/TabContent.d.ts +++ /dev/null @@ -1,18 +0,0 @@ -/// - -export interface TabContentProps extends svelte.JSX.HTMLAttributes { - /** - * Set an id for the top-level element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; -} - -export default class TabContent { - $$prop_def: TabContentProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Tabs/TabContent.svelte.d.ts b/types/Tabs/TabContent.svelte.d.ts new file mode 100644 index 00000000..65e59e01 --- /dev/null +++ b/types/Tabs/TabContent.svelte.d.ts @@ -0,0 +1,22 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set an id for the top-level element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + [key: `data-${string}`]: any; +}; + +export type TabContentProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class TabContent extends SvelteComponentTyped< + TabContentProps, + Record, + { default: {} } +> {} diff --git a/types/Tabs/Tabs.d.ts b/types/Tabs/Tabs.d.ts deleted file mode 100644 index 48eafc01..00000000 --- a/types/Tabs/Tabs.d.ts +++ /dev/null @@ -1,40 +0,0 @@ -/// - -export interface TabsProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the selected tab index - * @default 0 - */ - selected?: number; - - /** - * Specify the type of tabs - * @default "default" - */ - type?: "default" | "container"; - - /** - * Specify the ARIA label for the chevron icon - * @default "Show menu options" - */ - iconDescription?: string; - - /** - * Specify the tab trigger href attribute - * @default "#" - */ - triggerHref?: string; -} - -export default class Tabs { - $$prop_def: TabsProps; - $$slot_def: { - default: {}; - content: {}; - }; - - $on(eventname: "keypress", cb: (event: WindowEventMap["keypress"]) => void): () => void; - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Tabs/Tabs.svelte.d.ts b/types/Tabs/Tabs.svelte.d.ts new file mode 100644 index 00000000..ad6744ca --- /dev/null +++ b/types/Tabs/Tabs.svelte.d.ts @@ -0,0 +1,50 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the selected tab index + * @default 0 + */ + selected?: number; + + /** + * Specify the type of tabs + * @default "default" + */ + type?: "default" | "container"; + + /** + * Set to `true` for tabs to have an auto-width + * @default false + */ + autoWidth?: boolean; + + /** + * Specify the ARIA label for the chevron icon + * @default "Show menu options" + */ + iconDescription?: string; + + /** + * Specify the tab trigger href attribute + * @default "#" + */ + triggerHref?: string; + + [key: `data-${string}`]: any; +}; + +export type TabsProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Tabs extends SvelteComponentTyped< + TabsProps, + { + change: CustomEvent; + keypress: WindowEventMap["keypress"]; + click: WindowEventMap["click"]; + }, + { default: {}; content: {} } +> {} diff --git a/types/Tabs/TabsSkeleton.d.ts b/types/Tabs/TabsSkeleton.d.ts deleted file mode 100644 index 78d6bd9d..00000000 --- a/types/Tabs/TabsSkeleton.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -/// - -export interface TabsSkeletonProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the number of tabs to render - * @default 4 - */ - count?: number; -} - -export default class TabsSkeleton { - $$prop_def: TabsSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Tabs/TabsSkeleton.svelte.d.ts b/types/Tabs/TabsSkeleton.svelte.d.ts new file mode 100644 index 00000000..2634390e --- /dev/null +++ b/types/Tabs/TabsSkeleton.svelte.d.ts @@ -0,0 +1,33 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the number of tabs to render + * @default 4 + */ + count?: number; + + /** + * Specify the type of tabs + * @default "default" + */ + type?: "default" | "container"; + + [key: `data-${string}`]: any; +}; + +export type TabsSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class TabsSkeleton extends SvelteComponentTyped< + TabsSkeletonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/Tag/Tag.d.ts b/types/Tag/Tag.d.ts deleted file mode 100644 index ee4e105a..00000000 --- a/types/Tag/Tag.d.ts +++ /dev/null @@ -1,64 +0,0 @@ -/// - -export interface TagProps - extends svelte.JSX.HTMLAttributes, - svelte.JSX.HTMLAttributes { - /** - * Specify the type of tag - */ - type?: - | "red" - | "magenta" - | "purple" - | "blue" - | "cyan" - | "teal" - | "green" - | "gray" - | "cool-gray" - | "warm-gray" - | "high-contrast"; - - /** - * Set to `true` to use filterable variant - * @default false - */ - filter?: boolean; - - /** - * Set to `true` to disable a filterable tag - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - - /** - * Set the title for the close button in a filterable tag - * @default "Clear filter" - */ - title?: string; - - /** - * Set an id for the filterable tag - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; -} - -export default class Tag { - $$prop_def: TagProps; - $$slot_def: { - default: { props: { class: "bx--tag__label" } }; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Tag/Tag.svelte.d.ts b/types/Tag/Tag.svelte.d.ts new file mode 100644 index 00000000..67f15d9a --- /dev/null +++ b/types/Tag/Tag.svelte.d.ts @@ -0,0 +1,87 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"] & SvelteHTMLElements["span"]; + +type $Props = { + /** + * Specify the type of tag + * @default undefined + */ + type?: + | "red" + | "magenta" + | "purple" + | "blue" + | "cyan" + | "teal" + | "green" + | "gray" + | "cool-gray" + | "warm-gray" + | "high-contrast" + | "outline"; + + /** + * @default "default" + */ + size?: "sm" | "default"; + + /** + * Set to `true` to use filterable variant + * @default false + */ + filter?: boolean; + + /** + * Set to `true` to disable a filterable tag + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to render a `button` element instead of a `div` + * @default false + */ + interactive?: boolean; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + + /** + * Set the title for the close button in a filterable tag + * @default "Clear filter" + */ + title?: string; + + /** + * Specify the icon to render + * @default undefined + */ + icon?: any; + + /** + * Set an id for the filterable tag + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + [key: `data-${string}`]: any; +}; + +export type TagProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Tag extends SvelteComponentTyped< + TagProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + close: CustomEvent; + }, + { default: { props: { class: "bx--tag__label" } }; icon: {} } +> {} diff --git a/types/Tag/TagSkeleton.d.ts b/types/Tag/TagSkeleton.d.ts deleted file mode 100644 index 09ef38f2..00000000 --- a/types/Tag/TagSkeleton.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -/// - -export interface TagSkeletonProps extends svelte.JSX.HTMLAttributes {} - -export default class TagSkeleton { - $$prop_def: TagSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Tag/TagSkeleton.svelte.d.ts b/types/Tag/TagSkeleton.svelte.d.ts new file mode 100644 index 00000000..3aa9360d --- /dev/null +++ b/types/Tag/TagSkeleton.svelte.d.ts @@ -0,0 +1,26 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["span"]; + +type $Props = { + /** + * @default "default" + */ + size?: "sm" | "default"; + + [key: `data-${string}`]: any; +}; + +export type TagSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class TagSkeleton extends SvelteComponentTyped< + TagSkeletonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/TextArea/TextArea.d.ts b/types/TextArea/TextArea.svelte.d.ts similarity index 53% rename from types/TextArea/TextArea.d.ts rename to types/TextArea/TextArea.svelte.d.ts index 467eac3b..475661fd 100644 --- a/types/TextArea/TextArea.d.ts +++ b/types/TextArea/TextArea.svelte.d.ts @@ -1,11 +1,14 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; -export interface TextAreaProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["textarea"]; + +type $Props = { /** - * Specify the textarea value + * Specify the textarea value. * @default "" */ - value?: string; + value?: null | string; /** * Specify the placeholder text @@ -25,6 +28,12 @@ export interface TextAreaProps extends svelte.JSX.HTMLAttributes void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; - $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; - $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} +export type TextAreaProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class TextArea extends SvelteComponentTyped< + TextAreaProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + change: WindowEventMap["change"]; + input: WindowEventMap["input"]; + keydown: WindowEventMap["keydown"]; + keyup: WindowEventMap["keyup"]; + focus: WindowEventMap["focus"]; + blur: WindowEventMap["blur"]; + paste: WindowEventMap["paste"]; + }, + { labelText: {} } +> {} diff --git a/types/TextArea/TextAreaSkeleton.d.ts b/types/TextArea/TextAreaSkeleton.d.ts deleted file mode 100644 index 996f4c5d..00000000 --- a/types/TextArea/TextAreaSkeleton.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -/// - -export interface TextAreaSkeletonProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; -} - -export default class TextAreaSkeleton { - $$prop_def: TextAreaSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/TextArea/TextAreaSkeleton.svelte.d.ts b/types/TextArea/TextAreaSkeleton.svelte.d.ts new file mode 100644 index 00000000..144ef233 --- /dev/null +++ b/types/TextArea/TextAreaSkeleton.svelte.d.ts @@ -0,0 +1,27 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + [key: `data-${string}`]: any; +}; + +export type TextAreaSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class TextAreaSkeleton extends SvelteComponentTyped< + TextAreaSkeletonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/TextInput/PasswordInput.d.ts b/types/TextInput/PasswordInput.svelte.d.ts similarity index 59% rename from types/TextInput/PasswordInput.d.ts rename to types/TextInput/PasswordInput.svelte.d.ts index 601d9d9c..470d536b 100644 --- a/types/TextInput/PasswordInput.d.ts +++ b/types/TextInput/PasswordInput.svelte.d.ts @@ -1,8 +1,12 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; -export interface PasswordInputProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["input"]; + +type $Props = { /** * Set the size of the input + * @default undefined */ size?: "sm" | "xl"; @@ -38,11 +42,13 @@ export interface PasswordInputProps extends svelte.JSX.HTMLAttributes void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; - $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} +export type PasswordInputProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class PasswordInput extends SvelteComponentTyped< + PasswordInputProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + change: WindowEventMap["change"]; + input: WindowEventMap["input"]; + keydown: WindowEventMap["keydown"]; + keyup: WindowEventMap["keyup"]; + focus: WindowEventMap["focus"]; + blur: WindowEventMap["blur"]; + paste: WindowEventMap["paste"]; + }, + { labelText: {} } +> {} diff --git a/types/TextInput/TextInput.d.ts b/types/TextInput/TextInput.svelte.d.ts similarity index 54% rename from types/TextInput/TextInput.d.ts rename to types/TextInput/TextInput.svelte.d.ts index 1b56f537..2d6a53ff 100644 --- a/types/TextInput/TextInput.d.ts +++ b/types/TextInput/TextInput.svelte.d.ts @@ -1,22 +1,23 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; -export interface TextInputProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["input"]; + +type $Props = { /** * Set the size of the input + * @default undefined */ size?: "sm" | "xl"; /** - * Specify the input value + * Specify the input value. + * + * `value` will be set to `null` if type="number" + * and the value is empty. * @default "" */ - value?: number | string; - - /** - * Specify the input type - * @default "" - */ - type?: string; + value?: null | number | string; /** * Specify the placeholder text @@ -50,6 +51,7 @@ export interface TextInputProps extends svelte.JSX.HTMLAttributes void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; - $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} + [key: `data-${string}`]: any; +}; + +export type TextInputProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class TextInput extends SvelteComponentTyped< + TextInputProps, + { + change: CustomEvent; + input: CustomEvent; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + keydown: WindowEventMap["keydown"]; + keyup: WindowEventMap["keyup"]; + focus: WindowEventMap["focus"]; + blur: WindowEventMap["blur"]; + paste: WindowEventMap["paste"]; + }, + { labelText: {} } +> {} diff --git a/types/TextInput/TextInputSkeleton.d.ts b/types/TextInput/TextInputSkeleton.d.ts deleted file mode 100644 index 813af0ff..00000000 --- a/types/TextInput/TextInputSkeleton.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -/// - -export interface TextInputSkeletonProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to hide the label text - * @default false - */ - hideLabel?: boolean; -} - -export default class TextInputSkeleton { - $$prop_def: TextInputSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/TextInput/TextInputSkeleton.svelte.d.ts b/types/TextInput/TextInputSkeleton.svelte.d.ts new file mode 100644 index 00000000..b2893a18 --- /dev/null +++ b/types/TextInput/TextInputSkeleton.svelte.d.ts @@ -0,0 +1,27 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set to `true` to hide the label text + * @default false + */ + hideLabel?: boolean; + + [key: `data-${string}`]: any; +}; + +export type TextInputSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class TextInputSkeleton extends SvelteComponentTyped< + TextInputSkeletonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + {} +> {} diff --git a/types/Theme/Theme.svelte.d.ts b/types/Theme/Theme.svelte.d.ts new file mode 100644 index 00000000..0d497f1f --- /dev/null +++ b/types/Theme/Theme.svelte.d.ts @@ -0,0 +1,58 @@ +import type { SvelteComponentTyped } from "svelte"; + +export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; + +export type ThemeProps = { + /** + * Set the current Carbon theme + * @default "white" + */ + theme?: CarbonTheme; + + /** + * Customize a theme with your own tokens + * @see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme + * @default {} + */ + tokens?: { [token: string]: any }; + + /** + * Set to `true` to persist the theme using window.localStorage + * @default false + */ + persist?: boolean; + + /** + * Specify the local storage key + * @default "theme" + */ + persistKey?: string; + + /** + * Render a toggle or select dropdown to control the theme + * @default undefined + */ + render?: "toggle" | "select"; + + /** + * Override the default toggle props + * @default { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, } + */ + toggle?: import("../Toggle/Toggle.svelte").ToggleProps & { + themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; + }; + + /** + * Override the default select props + * @default { themes: themeKeys, labelText: "Themes", hideLabel: false, } + */ + select?: import("../Select/Select.svelte").SelectProps & { + themes?: CarbonTheme[]; + }; +}; + +export default class Theme extends SvelteComponentTyped< + ThemeProps, + { update: CustomEvent<{ theme: CarbonTheme }> }, + { default: { theme: CarbonTheme } } +> {} diff --git a/types/Tile/ClickableTile.d.ts b/types/Tile/ClickableTile.d.ts deleted file mode 100644 index f4018bca..00000000 --- a/types/Tile/ClickableTile.d.ts +++ /dev/null @@ -1,34 +0,0 @@ -/// - -export interface ClickableTileProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to click the tile - * @default false - */ - clicked?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set the `href` - */ - href?: string; -} - -export default class ClickableTile { - $$prop_def: ClickableTileProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Tile/ClickableTile.svelte.d.ts b/types/Tile/ClickableTile.svelte.d.ts new file mode 100644 index 00000000..e4bcbe03 --- /dev/null +++ b/types/Tile/ClickableTile.svelte.d.ts @@ -0,0 +1,46 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["a"] & SvelteHTMLElements["p"]; + +type $Props = { + /** + * Set to `true` to click the tile + * @default false + */ + clicked?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the tile + * @default false + */ + disabled?: boolean; + + /** + * Set the `href` + * @default undefined + */ + href?: string; + + [key: `data-${string}`]: any; +}; + +export type ClickableTileProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ClickableTile extends SvelteComponentTyped< + ClickableTileProps, + { + click: WindowEventMap["click"]; + keydown: WindowEventMap["keydown"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/Tile/ExpandableTile.d.ts b/types/Tile/ExpandableTile.svelte.d.ts similarity index 52% rename from types/Tile/ExpandableTile.d.ts rename to types/Tile/ExpandableTile.svelte.d.ts index c5ffb7c0..09d7064b 100644 --- a/types/Tile/ExpandableTile.d.ts +++ b/types/Tile/ExpandableTile.svelte.d.ts @@ -1,6 +1,9 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; -export interface ExpandableTileProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["button"]; + +type $Props = { /** * Set to `true` to expand the tile * @default false @@ -37,6 +40,18 @@ export interface ExpandableTileProps extends svelte.JSX.HTMLAttributes void): () => void; - $on(eventname: "keypress", cb: (event: WindowEventMap["keypress"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} +export type ExpandableTileProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ExpandableTile extends SvelteComponentTyped< + ExpandableTileProps, + { + click: WindowEventMap["click"]; + keypress: WindowEventMap["keypress"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { above: {}; below: {} } +> {} diff --git a/types/Tile/RadioTile.d.ts b/types/Tile/RadioTile.d.ts deleted file mode 100644 index 54c3db2a..00000000 --- a/types/Tile/RadioTile.d.ts +++ /dev/null @@ -1,60 +0,0 @@ -/// - -export interface RadioTileProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to check the tile - * @default false - */ - checked?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Specify the value of the radio input - * @default "" - */ - value?: string; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Specify the ARIA label for the radio tile checkmark icon - * @default "Tile checkmark" - */ - iconDescription?: string; - - /** - * Set an id for the input element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; - - /** - * Specify a name attribute for the input - * @default "" - */ - name?: string; -} - -export default class RadioTile { - $$prop_def: RadioTileProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Tile/RadioTile.svelte.d.ts b/types/Tile/RadioTile.svelte.d.ts new file mode 100644 index 00000000..7438e03b --- /dev/null +++ b/types/Tile/RadioTile.svelte.d.ts @@ -0,0 +1,77 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["label"]; + +type $Props = { + /** + * Set to `true` to check the tile + * @default false + */ + checked?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the tile + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to mark the field as required + * @default false + */ + required?: boolean; + + /** + * Specify the value of the radio input + * @default "" + */ + value?: string; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Specify the ARIA label for the radio tile checkmark icon + * @default "Tile checkmark" + */ + iconDescription?: string; + + /** + * Set an id for the input element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the radio tile input + * @default undefined + */ + name?: string; + + [key: `data-${string}`]: any; +}; + +export type RadioTileProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class RadioTile extends SvelteComponentTyped< + RadioTileProps, + { + change: WindowEventMap["change"]; + keydown: WindowEventMap["keydown"]; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/Tile/SelectableTile.d.ts b/types/Tile/SelectableTile.svelte.d.ts similarity index 54% rename from types/Tile/SelectableTile.d.ts rename to types/Tile/SelectableTile.svelte.d.ts index 5ba51e8a..589716cc 100644 --- a/types/Tile/SelectableTile.d.ts +++ b/types/Tile/SelectableTile.svelte.d.ts @@ -1,6 +1,9 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; -export interface SelectableTileProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["label"]; + +type $Props = { /** * Set to `true` to select the tile * @default false @@ -13,6 +16,12 @@ export interface SelectableTileProps extends svelte.JSX.HTMLAttributes void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} +export type SelectableTileProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class SelectableTile extends SvelteComponentTyped< + SelectableTileProps, + { + select: CustomEvent; + deselect: CustomEvent; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + keydown: WindowEventMap["keydown"]; + }, + { default: {} } +> {} diff --git a/types/Tile/Tile.d.ts b/types/Tile/Tile.d.ts deleted file mode 100644 index 5930a798..00000000 --- a/types/Tile/Tile.d.ts +++ /dev/null @@ -1,22 +0,0 @@ -/// - -export interface TileProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; -} - -export default class Tile { - $$prop_def: TileProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Tile/Tile.svelte.d.ts b/types/Tile/Tile.svelte.d.ts new file mode 100644 index 00000000..c3aa83e2 --- /dev/null +++ b/types/Tile/Tile.svelte.d.ts @@ -0,0 +1,27 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + [key: `data-${string}`]: any; +}; + +export type TileProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Tile extends SvelteComponentTyped< + TileProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/Tile/TileGroup.d.ts b/types/Tile/TileGroup.d.ts deleted file mode 100644 index ca41bde8..00000000 --- a/types/Tile/TileGroup.d.ts +++ /dev/null @@ -1,30 +0,0 @@ -/// - -export interface TileGroupProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the selected tile value - */ - selected?: string; - - /** - * Set to `true` to disable the tile group - * @default false - */ - disabled?: boolean; - - /** - * Specify the legend text - * @default "" - */ - legend?: string; -} - -export default class TileGroup { - $$prop_def: TileGroupProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "select", cb: (event: CustomEvent) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Tile/TileGroup.svelte.d.ts b/types/Tile/TileGroup.svelte.d.ts new file mode 100644 index 00000000..16ad5de8 --- /dev/null +++ b/types/Tile/TileGroup.svelte.d.ts @@ -0,0 +1,46 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["fieldset"]; + +type $Props = { + /** + * Specify the selected tile value + * @default undefined + */ + selected?: string; + + /** + * Set to `true` to disable the tile group + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to require the selection of a radio button + * @default undefined + */ + required?: boolean; + + /** + * Specify a name attribute for the radio button inputs + * @default undefined + */ + name?: string; + + /** + * Specify the legend text + * @default "" + */ + legend?: string; + + [key: `data-${string}`]: any; +}; + +export type TileGroupProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class TileGroup extends SvelteComponentTyped< + TileGroupProps, + { select: CustomEvent }, + { default: {} } +> {} diff --git a/types/TimePicker/TimePicker.d.ts b/types/TimePicker/TimePicker.svelte.d.ts similarity index 54% rename from types/TimePicker/TimePicker.d.ts rename to types/TimePicker/TimePicker.svelte.d.ts index 7429f046..20c55f29 100644 --- a/types/TimePicker/TimePicker.d.ts +++ b/types/TimePicker/TimePicker.svelte.d.ts @@ -1,8 +1,12 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; -export interface TimePickerProps extends svelte.JSX.HTMLAttributes { +type $RestProps = SvelteHTMLElements["input"]; + +type $Props = { /** * Specify the size of the input + * @default undefined */ size?: "sm" | "xl"; @@ -12,15 +16,9 @@ export interface TimePickerProps extends svelte.JSX.HTMLAttributes void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; - $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; - $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} +export type TimePickerProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class TimePicker extends SvelteComponentTyped< + TimePickerProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + change: WindowEventMap["change"]; + input: WindowEventMap["input"]; + keydown: WindowEventMap["keydown"]; + keyup: WindowEventMap["keyup"]; + focus: WindowEventMap["focus"]; + blur: WindowEventMap["blur"]; + paste: WindowEventMap["paste"]; + }, + { default: {}; labelText: {} } +> {} diff --git a/types/TimePicker/TimePickerSelect.d.ts b/types/TimePicker/TimePickerSelect.d.ts deleted file mode 100644 index a27c57cf..00000000 --- a/types/TimePicker/TimePickerSelect.d.ts +++ /dev/null @@ -1,62 +0,0 @@ -/// - -export interface TimePickerSelectProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the select value - * @default "" - */ - value?: number | string; - - /** - * Set to `true` to disable the select - * @default false - */ - disabled?: boolean; - - /** - * Specify the ARIA label for the chevron icon - * @default "Open list of options" - */ - iconDescription?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * @default true - */ - hideLabel?: boolean; - - /** - * Set an id for the select element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; - - /** - * Specify a name attribute for the select element - */ - name?: string; - - /** - * Obtain a reference to the select HTML element - * @default null - */ - ref?: null | HTMLSelectElement; -} - -export default class TimePickerSelect { - $$prop_def: TimePickerSelectProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/TimePicker/TimePickerSelect.svelte.d.ts b/types/TimePicker/TimePickerSelect.svelte.d.ts new file mode 100644 index 00000000..426bc185 --- /dev/null +++ b/types/TimePicker/TimePickerSelect.svelte.d.ts @@ -0,0 +1,63 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the select value + * @default "" + */ + value?: number | string; + + /** + * Set to `true` to disable the select + * @default false + */ + disabled?: boolean; + + /** + * Specify the ARIA label for the chevron icon + * @default "Open list of options" + */ + iconDescription?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set an id for the select element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the select element + * @default undefined + */ + name?: string; + + /** + * Obtain a reference to the select HTML element + * @default null + */ + ref?: null | HTMLSelectElement; + + [key: `data-${string}`]: any; +}; + +export type TimePickerSelectProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class TimePickerSelect extends SvelteComponentTyped< + TimePickerSelectProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {}; labelText: {} } +> {} diff --git a/types/Toggle/Toggle.d.ts b/types/Toggle/Toggle.d.ts deleted file mode 100644 index d2440b41..00000000 --- a/types/Toggle/Toggle.d.ts +++ /dev/null @@ -1,65 +0,0 @@ -/// - -export interface ToggleProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the toggle size - * @default "default" - */ - size?: "default" | "sm"; - - /** - * Set to `true` to toggle the checkbox input - * @default false - */ - toggled?: boolean; - - /** - * Set to `true` to disable checkbox input - * @default false - */ - disabled?: boolean; - - /** - * Specify the label for the untoggled state - * @default "Off" - */ - labelA?: string; - - /** - * Specify the label for the toggled state - * @default "On" - */ - labelB?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set an id for the input element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; - - /** - * Specify a name attribute for the checkbox input - */ - name?: string; -} - -export default class Toggle { - $$prop_def: ToggleProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; - $on(eventname: "keyup", cb: (event: WindowEventMap["keyup"]) => void): () => void; - $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Toggle/Toggle.svelte.d.ts b/types/Toggle/Toggle.svelte.d.ts new file mode 100644 index 00000000..89ac1914 --- /dev/null +++ b/types/Toggle/Toggle.svelte.d.ts @@ -0,0 +1,80 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the toggle size + * @default "default" + */ + size?: "default" | "sm"; + + /** + * Set to `true` to toggle the checkbox input + * @default false + */ + toggled?: boolean; + + /** + * Set to `true` to disable checkbox input + * @default false + */ + disabled?: boolean; + + /** + * Specify the label for the untoggled state + * @default "Off" + */ + labelA?: string; + + /** + * Specify the label for the toggled state + * @default "On" + */ + labelB?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Set an id for the input element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the checkbox input + * @default undefined + */ + name?: string; + + [key: `data-${string}`]: any; +}; + +export type ToggleProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Toggle extends SvelteComponentTyped< + ToggleProps, + { + toggle: CustomEvent<{ toggled: boolean }>; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + change: WindowEventMap["change"]; + keyup: WindowEventMap["keyup"]; + focus: WindowEventMap["focus"]; + blur: WindowEventMap["blur"]; + }, + { labelA: {}; labelB: {}; labelText: {} } +> {} diff --git a/types/Toggle/ToggleSkeleton.d.ts b/types/Toggle/ToggleSkeleton.d.ts deleted file mode 100644 index 86c28849..00000000 --- a/types/Toggle/ToggleSkeleton.d.ts +++ /dev/null @@ -1,32 +0,0 @@ -/// - -export interface ToggleSkeletonProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the toggle size - * @default "default" - */ - size?: "default" | "sm"; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set an id for the input element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; -} - -export default class ToggleSkeleton { - $$prop_def: ToggleSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Toggle/ToggleSkeleton.svelte.d.ts b/types/Toggle/ToggleSkeleton.svelte.d.ts new file mode 100644 index 00000000..2003a353 --- /dev/null +++ b/types/Toggle/ToggleSkeleton.svelte.d.ts @@ -0,0 +1,39 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Specify the toggle size + * @default "default" + */ + size?: "default" | "sm"; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set an id for the input element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + [key: `data-${string}`]: any; +}; + +export type ToggleSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class ToggleSkeleton extends SvelteComponentTyped< + ToggleSkeletonProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { labelText: {} } +> {} diff --git a/types/ToggleSmall/ToggleSmall.d.ts b/types/ToggleSmall/ToggleSmall.d.ts deleted file mode 100644 index dc7be03e..00000000 --- a/types/ToggleSmall/ToggleSmall.d.ts +++ /dev/null @@ -1,59 +0,0 @@ -/// - -export interface ToggleSmallProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to toggle the checkbox input - * @default false - */ - toggled?: boolean; - - /** - * Set to `true` to disable checkbox input - * @default false - */ - disabled?: boolean; - - /** - * Specify the label for the untoggled state - * @default "Off" - */ - labelA?: string; - - /** - * Specify the label for the toggled state - * @default "On" - */ - labelB?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set an id for the input element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; - - /** - * Specify a name attribute for the checkbox input - */ - name?: string; -} - -export default class ToggleSmall { - $$prop_def: ToggleSmallProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; - $on(eventname: "keyup", cb: (event: WindowEventMap["keyup"]) => void): () => void; - $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/ToggleSmall/ToggleSmallSkeleton.d.ts b/types/ToggleSmall/ToggleSmallSkeleton.d.ts deleted file mode 100644 index 21bcbe9f..00000000 --- a/types/ToggleSmall/ToggleSmallSkeleton.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -/// - -export interface ToggleSmallSkeletonProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set an id for the input element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; -} - -export default class ToggleSmallSkeleton { - $$prop_def: ToggleSmallSkeletonProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/Tooltip/Tooltip.d.ts b/types/Tooltip/Tooltip.svelte.d.ts similarity index 61% rename from types/Tooltip/Tooltip.d.ts rename to types/Tooltip/Tooltip.svelte.d.ts index 8f5c1a63..d43f6a18 100644 --- a/types/Tooltip/Tooltip.d.ts +++ b/types/Tooltip/Tooltip.svelte.d.ts @@ -1,6 +1,15 @@ -/// +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["div"]; + +type $Props = { + /** + * Set the alignment of the tooltip relative to the icon + * @default "center" + */ + align?: "start" | "center" | "end"; -export interface TooltipProps extends svelte.JSX.HTMLAttributes { /** * Set the direction of the tooltip relative to the button * @default "bottom" @@ -20,10 +29,11 @@ export interface TooltipProps extends svelte.JSX.HTMLAttributes` + * @default undefined */ - icon?: typeof import("carbon-icons-svelte").CarbonIcon; + icon?: any; /** * Specify the ARIA label for the tooltip button @@ -78,15 +88,19 @@ export interface TooltipProps extends svelte.JSX.HTMLAttributes void): () => void; -} +export type TooltipProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Tooltip extends SvelteComponentTyped< + TooltipProps, + { + open: CustomEvent; + close: CustomEvent; + click: WindowEventMap["click"]; + mousedown: WindowEventMap["mousedown"]; + }, + { default: {}; icon: {}; triggerText: {} } +> {} diff --git a/types/Tooltip/TooltipFooter.svelte.d.ts b/types/Tooltip/TooltipFooter.svelte.d.ts new file mode 100644 index 00000000..d998417c --- /dev/null +++ b/types/Tooltip/TooltipFooter.svelte.d.ts @@ -0,0 +1,15 @@ +import type { SvelteComponentTyped } from "svelte"; + +export type TooltipFooterProps = { + /** + * Specify a selector to be focused inside the footer when opening the tooltip + * @default "a[href], button:not([disabled])" + */ + selectorPrimaryFocus?: string; +}; + +export default class TooltipFooter extends SvelteComponentTyped< + TooltipFooterProps, + Record, + { default: {} } +> {} diff --git a/types/TooltipDefinition/TooltipDefinition.d.ts b/types/TooltipDefinition/TooltipDefinition.d.ts deleted file mode 100644 index e1788509..00000000 --- a/types/TooltipDefinition/TooltipDefinition.d.ts +++ /dev/null @@ -1,48 +0,0 @@ -/// - -export interface TooltipDefinitionProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the tooltip text - * @default "" - */ - tooltipText?: string; - - /** - * Set the alignment of the tooltip relative to the icon - * @default "center" - */ - align?: "start" | "center" | "end"; - - /** - * Set the direction of the tooltip relative to the icon - * @default "bottom" - */ - direction?: "top" | "bottom"; - - /** - * Set an id for the tooltip div element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; - - /** - * Obtain a reference to the button HTML element - * @default null - */ - ref?: null | HTMLButtonElement; -} - -export default class TooltipDefinition { - $$prop_def: TooltipDefinitionProps; - $$slot_def: { - default: {}; - tooltip: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/TooltipDefinition/TooltipDefinition.svelte.d.ts b/types/TooltipDefinition/TooltipDefinition.svelte.d.ts new file mode 100644 index 00000000..0af6da3b --- /dev/null +++ b/types/TooltipDefinition/TooltipDefinition.svelte.d.ts @@ -0,0 +1,60 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["span"]; + +type $Props = { + /** + * Specify the tooltip text + * @default "" + */ + tooltipText?: string; + + /** + * Set to `true` to open the tooltip + * @default false + */ + open?: boolean; + + /** + * Set the alignment of the tooltip relative to the icon + * @default "center" + */ + align?: "start" | "center" | "end"; + + /** + * Set the direction of the tooltip relative to the icon + * @default "bottom" + */ + direction?: "top" | "bottom"; + + /** + * Set an id for the tooltip div element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; + + [key: `data-${string}`]: any; +}; + +export type TooltipDefinitionProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class TooltipDefinition extends SvelteComponentTyped< + TooltipDefinitionProps, + { + open: CustomEvent; + close: CustomEvent; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + focus: WindowEventMap["focus"]; + }, + { default: {}; tooltip: {} } +> {} diff --git a/types/TooltipIcon/TooltipIcon.d.ts b/types/TooltipIcon/TooltipIcon.d.ts deleted file mode 100644 index 265b1157..00000000 --- a/types/TooltipIcon/TooltipIcon.d.ts +++ /dev/null @@ -1,47 +0,0 @@ -/// - -export interface TooltipIconProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the tooltip text - * @default "" - */ - tooltipText?: string; - - /** - * Set the alignment of the tooltip relative to the icon - * @default "center" - */ - align?: "start" | "center" | "end"; - - /** - * Set the direction of the tooltip relative to the icon - * @default "bottom" - */ - direction?: "top" | "right" | "bottom" | "left"; - - /** - * Set an id for the span element - * @default "ccs-" + Math.random().toString(36) - */ - id?: string; - - /** - * Obtain a reference to the button HTML element - * @default null - */ - ref?: null | HTMLButtonElement; -} - -export default class TooltipIcon { - $$prop_def: TooltipIconProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/TooltipIcon/TooltipIcon.svelte.d.ts b/types/TooltipIcon/TooltipIcon.svelte.d.ts new file mode 100644 index 00000000..8a83439f --- /dev/null +++ b/types/TooltipIcon/TooltipIcon.svelte.d.ts @@ -0,0 +1,65 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["button"]; + +type $Props = { + /** + * Specify the tooltip text. + * Alternatively, use the "tooltipText" slot + * @default "" + */ + tooltipText?: string; + + /** + * Specify the icon to render + * @default undefined + */ + icon?: any; + + /** + * Set to `true` to disable the tooltip icon + * @default false + */ + disabled?: boolean; + + /** + * Set the alignment of the tooltip relative to the icon + * @default "center" + */ + align?: "start" | "center" | "end"; + + /** + * Set the direction of the tooltip relative to the icon + * @default "bottom" + */ + direction?: "top" | "right" | "bottom" | "left"; + + /** + * Set an id for the span element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; + + [key: `data-${string}`]: any; +}; + +export type TooltipIconProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class TooltipIcon extends SvelteComponentTyped< + TooltipIconProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + focus: WindowEventMap["focus"]; + }, + { default: {}; tooltipText: {} } +> {} diff --git a/types/TreeView/TreeView.svelte.d.ts b/types/TreeView/TreeView.svelte.d.ts new file mode 100644 index 00000000..59bf4d58 --- /dev/null +++ b/types/TreeView/TreeView.svelte.d.ts @@ -0,0 +1,114 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +export type TreeNodeId = string | number; + +export interface TreeNode { + id: TreeNodeId; + text: any; + icon?: any; + disabled?: boolean; + nodes?: TreeNode[]; +} + +type $RestProps = SvelteHTMLElements["ul"]; + +type $Props = { + /** + * Provide an array of nodes to render + * @default [] + */ + nodes?: Array; + + /** + * Set the current active node id + * Only one node can be active + * @default "" + */ + activeId?: TreeNodeId; + + /** + * Set the node ids to be selected + * @default [] + */ + selectedIds?: ReadonlyArray; + + /** + * Set the node ids to be expanded + * @default [] + */ + expandedIds?: ReadonlyArray; + + /** + * Specify the TreeView size + * @default "default" + */ + size?: "default" | "compact"; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + [key: `data-${string}`]: any; +}; + +export type TreeViewProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class TreeView extends SvelteComponentTyped< + TreeViewProps, + { + select: CustomEvent; + toggle: CustomEvent; + focus: CustomEvent; + keydown: WindowEventMap["keydown"]; + }, + { + default: { + node: { + id: TreeNodeId; + text: string; + expanded: boolean; + leaf: boolean; + disabled: boolean; + selected: boolean; + }; + }; + labelText: {}; + } +> { + /** + * Programmatically expand all nodes + */ + expandAll: () => void; + + /** + * Programmatically collapse all nodes + */ + collapseAll: () => void; + + /** + * Programmatically expand a subset of nodes. + * Expands all nodes if no argument is provided + */ + expandNodes: (filterId?: (node: TreeNode) => boolean) => void; + + /** + * Programmatically collapse a subset of nodes. + * Collapses all nodes if no argument is provided + */ + collapseNodes: (filterId?: (node: TreeNode) => boolean) => void; + + /** + * Programmatically show a node by `id`. + * The matching node will be expanded, selected, and focused + */ + showNode: (id: TreeNodeId) => void; +} diff --git a/types/TreeView/index.d.ts b/types/TreeView/index.d.ts new file mode 100644 index 00000000..59f96be0 --- /dev/null +++ b/types/TreeView/index.d.ts @@ -0,0 +1 @@ +export { default as TreeView } from "./TreeView.svelte"; diff --git a/types/Truncate/Truncate.svelte.d.ts b/types/Truncate/Truncate.svelte.d.ts new file mode 100644 index 00000000..c8384c3b --- /dev/null +++ b/types/Truncate/Truncate.svelte.d.ts @@ -0,0 +1,21 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["p"]; + +type $Props = { + /** + * @default "end" + */ + clamp?: "end" | "front"; + + [key: `data-${string}`]: any; +}; + +export type TruncateProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Truncate extends SvelteComponentTyped< + TruncateProps, + Record, + { default: {} } +> {} diff --git a/types/Truncate/truncate.d.ts b/types/Truncate/truncate.d.ts new file mode 100644 index 00000000..f0fa9967 --- /dev/null +++ b/types/Truncate/truncate.d.ts @@ -0,0 +1,12 @@ +interface TruncateOptions { + clamp?: "end" | "front"; +} + +export function TruncateAction( + node: HTMLElement, + options?: TruncateOptions, +): { + update: (options?: TruncateOptions) => void; +}; + +export default TruncateAction; diff --git a/types/UIShell/Content.d.ts b/types/UIShell/Content.d.ts deleted file mode 100644 index f4412ee7..00000000 --- a/types/UIShell/Content.d.ts +++ /dev/null @@ -1,18 +0,0 @@ -/// - -export interface ContentProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the id for the main element - * @default "main-content" - */ - id?: string; -} - -export default class Content { - $$prop_def: ContentProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/UIShell/Content.svelte.d.ts b/types/UIShell/Content.svelte.d.ts new file mode 100644 index 00000000..40e98e8a --- /dev/null +++ b/types/UIShell/Content.svelte.d.ts @@ -0,0 +1,22 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["main"]; + +type $Props = { + /** + * Specify the id for the main element + * @default "main-content" + */ + id?: string; + + [key: `data-${string}`]: any; +}; + +export type ContentProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Content extends SvelteComponentTyped< + ContentProps, + Record, + { default: {} } +> {} diff --git a/types/UIShell/GlobalHeader/Header.d.ts b/types/UIShell/GlobalHeader/Header.d.ts deleted file mode 100644 index 84626eb8..00000000 --- a/types/UIShell/GlobalHeader/Header.d.ts +++ /dev/null @@ -1,61 +0,0 @@ -/// - -export interface HeaderProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `false` to hide the side nav by default - * @default true - */ - expandedByDefault?: boolean; - - /** - * Set to `true` to open the side nav - * @default false - */ - isSideNavOpen?: boolean; - - /** - * Specify the ARIA label for the header - */ - uiShellAriaLabel?: string; - - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the company name - */ - company?: string; - - /** - * Specify the platform name - * Alternatively, use the named slot "platform" (e.g., ...) - * @default "" - */ - platformName?: string; - - /** - * Set to `true` to persist the hamburger menu - * @default false - */ - persistentHamburgerMenu?: boolean; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; -} - -export default class Header { - $$prop_def: HeaderProps; - $$slot_def: { - default: {}; - platform: {}; - ["skip-to-content"]: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/UIShell/GlobalHeader/HeaderAction.d.ts b/types/UIShell/GlobalHeader/HeaderAction.d.ts deleted file mode 100644 index 4cb1aeec..00000000 --- a/types/UIShell/GlobalHeader/HeaderAction.d.ts +++ /dev/null @@ -1,51 +0,0 @@ -/// - -export interface HeaderActionSlideTransition { - delay?: number; - duration?: number; - easing?: (t: number) => number; -} - -export interface HeaderActionProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to open the panel - * @default false - */ - isOpen?: boolean; - - /** - * Specify the icon props - */ - icon?: { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean }; - - /** - * Specify the text - * Alternatively, use the named slot "text" (e.g.,
...
) - */ - text?: string; - - /** - * Obtain a reference to the button HTML element - * @default null - */ - ref?: null | HTMLButtonElement; - - /** - * Customize the panel transition (i.e., `transition:slide`) - * Set to `false` to disable the transition - * @default { duration: 200 } - */ - transition?: false | HeaderActionSlideTransition; -} - -export default class HeaderAction { - $$prop_def: HeaderActionProps; - $$slot_def: { - default: {}; - text: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "close", cb: (event: CustomEvent) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/UIShell/GlobalHeader/HeaderActionLink.d.ts b/types/UIShell/GlobalHeader/HeaderActionLink.d.ts deleted file mode 100644 index 7d474c44..00000000 --- a/types/UIShell/GlobalHeader/HeaderActionLink.d.ts +++ /dev/null @@ -1,32 +0,0 @@ -/// - -export interface HeaderActionLinkProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to use the active state - * @default false - */ - linkIsActive?: boolean; - - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the icon props - */ - icon?: { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean }; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; -} - -export default class HeaderActionLink { - $$prop_def: HeaderActionLinkProps; - $$slot_def: {}; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/UIShell/GlobalHeader/HeaderActionSearch.d.ts b/types/UIShell/GlobalHeader/HeaderActionSearch.d.ts deleted file mode 100644 index ece86ec0..00000000 --- a/types/UIShell/GlobalHeader/HeaderActionSearch.d.ts +++ /dev/null @@ -1,19 +0,0 @@ -/// - -export interface HeaderActionSearchProps { - /** - * Set to `true` to focus the search - * @default false - */ - searchIsActive?: boolean; -} - -export default class HeaderActionSearch { - $$prop_def: HeaderActionSearchProps; - $$slot_def: {}; - - $on(eventname: "inputSearch", cb: (event: CustomEvent<{ action: "search"; textInput: string }>) => void): () => void; - $on(eventname: "focusInputSearch", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "focusOutInputSearch", cb: (event: CustomEvent) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/UIShell/GlobalHeader/HeaderNav.d.ts b/types/UIShell/GlobalHeader/HeaderNav.d.ts deleted file mode 100644 index 4afb7eca..00000000 --- a/types/UIShell/GlobalHeader/HeaderNav.d.ts +++ /dev/null @@ -1,17 +0,0 @@ -/// - -export interface HeaderNavProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the ARIA label for the nav - */ - ariaLabel?: string; -} - -export default class HeaderNav { - $$prop_def: HeaderNavProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/UIShell/GlobalHeader/HeaderNavItem.d.ts b/types/UIShell/GlobalHeader/HeaderNavItem.d.ts deleted file mode 100644 index a44bbe67..00000000 --- a/types/UIShell/GlobalHeader/HeaderNavItem.d.ts +++ /dev/null @@ -1,34 +0,0 @@ -/// - -export interface HeaderNavItemProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the text - */ - text?: string; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; -} - -export default class HeaderNavItem { - $$prop_def: HeaderNavItemProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "keyup", cb: (event: WindowEventMap["keyup"]) => void): () => void; - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts b/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts deleted file mode 100644 index 80903c90..00000000 --- a/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts +++ /dev/null @@ -1,49 +0,0 @@ -/// - -export interface HeaderNavMenuProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to toggle the expanded state - * @default false - */ - expanded?: boolean; - - /** - * Specify the `href` attribute - * @default "/" - */ - href?: string; - - /** - * Specify the text - */ - text?: string; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; - - /** - * Specify the ARIA label for the chevron icon - * @default "Expand/Collapse" - */ - iconDescription?: string; -} - -export default class HeaderNavMenu { - $$prop_def: HeaderNavMenuProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "keyup", cb: (event: WindowEventMap["keyup"]) => void): () => void; - $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/UIShell/GlobalHeader/HeaderPanelDivider.d.ts b/types/UIShell/GlobalHeader/HeaderPanelDivider.d.ts deleted file mode 100644 index 0c6d781e..00000000 --- a/types/UIShell/GlobalHeader/HeaderPanelDivider.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -/// - -export interface HeaderPanelDividerProps {} - -export default class HeaderPanelDivider { - $$prop_def: HeaderPanelDividerProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/UIShell/GlobalHeader/HeaderPanelLink.d.ts b/types/UIShell/GlobalHeader/HeaderPanelLink.d.ts deleted file mode 100644 index 0723479f..00000000 --- a/types/UIShell/GlobalHeader/HeaderPanelLink.d.ts +++ /dev/null @@ -1,24 +0,0 @@ -/// - -export interface HeaderPanelLinkProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; -} - -export default class HeaderPanelLink { - $$prop_def: HeaderPanelLinkProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/UIShell/GlobalHeader/HeaderPanelLinks.d.ts b/types/UIShell/GlobalHeader/HeaderPanelLinks.d.ts deleted file mode 100644 index 5dbe3138..00000000 --- a/types/UIShell/GlobalHeader/HeaderPanelLinks.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -/// - -export interface HeaderPanelLinksProps {} - -export default class HeaderPanelLinks { - $$prop_def: HeaderPanelLinksProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/UIShell/GlobalHeader/HeaderUtilities.d.ts b/types/UIShell/GlobalHeader/HeaderUtilities.d.ts deleted file mode 100644 index 7c4cc4bb..00000000 --- a/types/UIShell/GlobalHeader/HeaderUtilities.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -/// - -export interface HeaderUtilitiesProps {} - -export default class HeaderUtilities { - $$prop_def: HeaderUtilitiesProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/UIShell/Header.svelte.d.ts b/types/UIShell/Header.svelte.d.ts new file mode 100644 index 00000000..2ee6955e --- /dev/null +++ b/types/UIShell/Header.svelte.d.ts @@ -0,0 +1,93 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["a"]; + +type $Props = { + /** + * Set to `false` to hide the side nav by default + * @default true + */ + expandedByDefault?: boolean; + + /** + * Set to `true` to open the side nav + * @default false + */ + isSideNavOpen?: boolean; + + /** + * Specify the ARIA label for the header + * @default undefined + */ + uiShellAriaLabel?: string; + + /** + * Specify the `href` attribute + * @default undefined + */ + href?: string; + + /** + * Specify the company name. + * + * Alternatively, use the named slot "company" (e.g., `...`) + * @default undefined + */ + company?: string; + + /** + * Specify the platform name. + * Alternatively, use the named slot "platform" (e.g., `...`) + * @default "" + */ + platformName?: string; + + /** + * Set to `true` to persist the hamburger menu + * @default false + */ + persistentHamburgerMenu?: boolean; + + /** + * The window width (px) at which the SideNav is expanded and the hamburger menu is hidden. + * 1056 represents the "large" breakpoint in pixels from the Carbon Design System: + * - small: 320 + * - medium: 672 + * - large: 1056 + * - x-large: 1312 + * - max: 1584 + * @default 1056 + */ + expansionBreakpoint?: number; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + + /** + * Specify the icon to render for the closed state. + * Defaults to `` + * @default undefined + */ + iconMenu?: any; + + /** + * Specify the icon to render for the opened state. + * Defaults to `` + * @default undefined + */ + iconClose?: any; + + [key: `data-${string}`]: any; +}; + +export type HeaderProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class Header extends SvelteComponentTyped< + HeaderProps, + { click: WindowEventMap["click"] }, + { default: {}; company: {}; platform: {}; ["skip-to-content"]: {} } +> {} diff --git a/types/UIShell/HeaderAction.svelte.d.ts b/types/UIShell/HeaderAction.svelte.d.ts new file mode 100644 index 00000000..ba5aa45c --- /dev/null +++ b/types/UIShell/HeaderAction.svelte.d.ts @@ -0,0 +1,80 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["button"]; + +type $Props = { + /** + * Set to `true` to open the panel + * @default false + */ + isOpen?: boolean; + + /** + * Specify the icon to render when the action panel is closed. + * Defaults to `` + * @default undefined + */ + icon?: any; + + /** + * Specify the icon to render when the action panel is open. + * Defaults to `` + * @default undefined + */ + closeIcon?: any; + + /** + * Specify the text displayed next to the icon. + * Alternatively, use the named slot "text" (e.g., `
...
`) + * @default undefined + */ + text?: string; + + /** + * Specify an icon tooltip. The tooltip will not be displayed + * if either the `text` prop or a named slot="text" is used + * @default undefined + */ + iconDescription?: string; + + /** + * Set the alignment of the tooltip relative to the icon. + * Only applies when `iconDescription` is provided + * @default "center" + */ + tooltipAlignment?: "start" | "center" | "end"; + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; + + /** + * Customize the panel transition (i.e., `transition:slide`). + * Set to `false` to disable the transition + * @default { duration: 200 } + */ + transition?: false | import("svelte/transition").SlideParams; + + /** + * Set to `true` to prevent the panel from closing when clicking outside + * @default false + */ + preventCloseOnClickOutside?: boolean; + + [key: `data-${string}`]: any; +}; + +export type HeaderActionProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class HeaderAction extends SvelteComponentTyped< + HeaderActionProps, + { + open: CustomEvent; + close: CustomEvent; + click: WindowEventMap["click"]; + }, + { default: {}; closeIcon: {}; icon: {}; text: {} } +> {} diff --git a/types/UIShell/HeaderActionLink.svelte.d.ts b/types/UIShell/HeaderActionLink.svelte.d.ts new file mode 100644 index 00000000..54948a2d --- /dev/null +++ b/types/UIShell/HeaderActionLink.svelte.d.ts @@ -0,0 +1,40 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["a"]; + +type $Props = { + /** + * Set to `true` to use the active state + * @default false + */ + linkIsActive?: boolean; + + /** + * Specify the `href` attribute + * @default undefined + */ + href?: string; + + /** + * Specify the icon to render + * @default undefined + */ + icon?: any; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + + [key: `data-${string}`]: any; +}; + +export type HeaderActionLinkProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class HeaderActionLink extends SvelteComponentTyped< + HeaderActionLinkProps, + { click: WindowEventMap["click"] }, + { icon: {} } +> {} diff --git a/types/UIShell/HeaderGlobalAction.d.ts b/types/UIShell/HeaderGlobalAction.d.ts deleted file mode 100644 index c42faa0b..00000000 --- a/types/UIShell/HeaderGlobalAction.d.ts +++ /dev/null @@ -1,30 +0,0 @@ -/// - -export interface HeaderGlobalActionProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to use the active variant - * @default false - */ - isActive?: boolean; - - /** - * Specify the icon to render - */ - icon?: typeof import("carbon-icons-svelte").CarbonIcon; - - /** - * Obtain a reference to the HTML button element - * @default null - */ - ref?: null | HTMLButtonElement; -} - -export default class HeaderGlobalAction { - $$prop_def: HeaderGlobalActionProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/UIShell/HeaderGlobalAction.svelte.d.ts b/types/UIShell/HeaderGlobalAction.svelte.d.ts new file mode 100644 index 00000000..0a10f9e7 --- /dev/null +++ b/types/UIShell/HeaderGlobalAction.svelte.d.ts @@ -0,0 +1,28 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { ButtonProps } from "../Button/Button.svelte"; + +export type HeaderGlobalActionProps = ButtonProps & { + /** + * Set to `true` to use the active variant + * @default false + */ + isActive?: boolean; + + /** + * Specify the icon to render + * @default undefined + */ + icon?: any; + + /** + * Obtain a reference to the HTML button element + * @default null + */ + ref?: HTMLButtonElement; +}; + +export default class HeaderGlobalAction extends SvelteComponentTyped< + HeaderGlobalActionProps, + { click: WindowEventMap["click"] }, + {} +> {} diff --git a/types/UIShell/HeaderNav.svelte.d.ts b/types/UIShell/HeaderNav.svelte.d.ts new file mode 100644 index 00000000..defcc1cf --- /dev/null +++ b/types/UIShell/HeaderNav.svelte.d.ts @@ -0,0 +1,16 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["nav"]; + +type $Props = { + [key: `data-${string}`]: any; +}; + +export type HeaderNavProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class HeaderNav extends SvelteComponentTyped< + HeaderNavProps, + Record, + { default: {} } +> {} diff --git a/types/UIShell/HeaderNavItem.svelte.d.ts b/types/UIShell/HeaderNavItem.svelte.d.ts new file mode 100644 index 00000000..014c3dfa --- /dev/null +++ b/types/UIShell/HeaderNavItem.svelte.d.ts @@ -0,0 +1,49 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["a"]; + +type $Props = { + /** + * Specify the `href` attribute + * @default undefined + */ + href?: string; + + /** + * Specify the text + * @default undefined + */ + text?: string; + + /** + * Set to `true` to select the item + * @default false + */ + isSelected?: boolean; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + + [key: `data-${string}`]: any; +}; + +export type HeaderNavItemProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class HeaderNavItem extends SvelteComponentTyped< + HeaderNavItemProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + keyup: WindowEventMap["keyup"]; + keydown: WindowEventMap["keydown"]; + focus: WindowEventMap["focus"]; + blur: WindowEventMap["blur"]; + }, + { default: {} } +> {} diff --git a/types/UIShell/HeaderNavMenu.svelte.d.ts b/types/UIShell/HeaderNavMenu.svelte.d.ts new file mode 100644 index 00000000..6260b56b --- /dev/null +++ b/types/UIShell/HeaderNavMenu.svelte.d.ts @@ -0,0 +1,49 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["a"]; + +type $Props = { + /** + * Set to `true` to toggle the expanded state + * @default false + */ + expanded?: boolean; + + /** + * Specify the `href` attribute + * @default "/" + */ + href?: string; + + /** + * Specify the text + * @default undefined + */ + text?: string; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + + [key: `data-${string}`]: any; +}; + +export type HeaderNavMenuProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class HeaderNavMenu extends SvelteComponentTyped< + HeaderNavMenuProps, + { + keydown: WindowEventMap["keydown"]; + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + keyup: WindowEventMap["keyup"]; + focus: WindowEventMap["focus"]; + blur: WindowEventMap["blur"]; + }, + { default: {} } +> {} diff --git a/types/UIShell/HeaderPanelDivider.svelte.d.ts b/types/UIShell/HeaderPanelDivider.svelte.d.ts new file mode 100644 index 00000000..60b74d6c --- /dev/null +++ b/types/UIShell/HeaderPanelDivider.svelte.d.ts @@ -0,0 +1,9 @@ +import type { SvelteComponentTyped } from "svelte"; + +export type HeaderPanelDividerProps = {}; + +export default class HeaderPanelDivider extends SvelteComponentTyped< + HeaderPanelDividerProps, + Record, + { default: {} } +> {} diff --git a/types/UIShell/HeaderPanelLink.svelte.d.ts b/types/UIShell/HeaderPanelLink.svelte.d.ts new file mode 100644 index 00000000..9d85f0f9 --- /dev/null +++ b/types/UIShell/HeaderPanelLink.svelte.d.ts @@ -0,0 +1,28 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["a"]; + +type $Props = { + /** + * Specify the `href` attribute + * @default undefined + */ + href?: string; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + + [key: `data-${string}`]: any; +}; + +export type HeaderPanelLinkProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class HeaderPanelLink extends SvelteComponentTyped< + HeaderPanelLinkProps, + { click: WindowEventMap["click"] }, + { default: {} } +> {} diff --git a/types/UIShell/HeaderPanelLinks.svelte.d.ts b/types/UIShell/HeaderPanelLinks.svelte.d.ts new file mode 100644 index 00000000..c898380f --- /dev/null +++ b/types/UIShell/HeaderPanelLinks.svelte.d.ts @@ -0,0 +1,9 @@ +import type { SvelteComponentTyped } from "svelte"; + +export type HeaderPanelLinksProps = {}; + +export default class HeaderPanelLinks extends SvelteComponentTyped< + HeaderPanelLinksProps, + Record, + { default: {} } +> {} diff --git a/types/UIShell/HeaderSearch.d.ts b/types/UIShell/HeaderSearch.d.ts deleted file mode 100644 index a961d6d2..00000000 --- a/types/UIShell/HeaderSearch.d.ts +++ /dev/null @@ -1,60 +0,0 @@ -/// - -export interface HeaderSearchResult { - href: string; - text: string; - description?: string; -} - -export interface HeaderSearchProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the search input value - * @default "" - */ - value?: string; - - /** - * Set to `true` to activate and focus the search bar - * @default false - */ - active?: boolean; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - - /** - * Render a list of search results - * @default [] - */ - results?: HeaderSearchResult[]; - - /** - * Specify the selected result index - * @default 0 - */ - selectedResultIndex?: number; -} - -export default class HeaderSearch { - $$prop_def: HeaderSearchProps; - $$slot_def: { - default: { result: HeaderSearchResult; index: number }; - }; - - $on(eventname: "active", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "inactive", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "clear", cb: (event: CustomEvent) => void): () => void; - $on( - eventname: "select", - cb: (event: CustomEvent<{ value: string; selectedResultIndex: number; selectedResult: HeaderSearchResult }>) => void - ): () => void; - $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; - $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; - $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/UIShell/HeaderSearch.svelte.d.ts b/types/UIShell/HeaderSearch.svelte.d.ts new file mode 100644 index 00000000..327f638d --- /dev/null +++ b/types/UIShell/HeaderSearch.svelte.d.ts @@ -0,0 +1,67 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +export interface HeaderSearchResult { + href: string; + text: string; + description?: string; +} + +type $RestProps = SvelteHTMLElements["input"]; + +type $Props = { + /** + * Specify the search input value + * @default "" + */ + value?: string; + + /** + * Set to `true` to activate and focus the search bar + * @default false + */ + active?: boolean; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + + /** + * Render a list of search results + * @default [] + */ + results?: ReadonlyArray; + + /** + * Specify the selected result index + * @default 0 + */ + selectedResultIndex?: number; + + [key: `data-${string}`]: any; +}; + +export type HeaderSearchProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class HeaderSearch extends SvelteComponentTyped< + HeaderSearchProps, + { + active: CustomEvent; + inactive: CustomEvent; + clear: CustomEvent; + select: CustomEvent<{ + value: string; + selectedResultIndex: number; + selectedResult: HeaderSearchResult; + }>; + change: WindowEventMap["change"]; + input: WindowEventMap["input"]; + focus: WindowEventMap["focus"]; + blur: WindowEventMap["blur"]; + keydown: WindowEventMap["keydown"]; + paste: WindowEventMap["paste"]; + }, + { default: { result: HeaderSearchResult; index: number } } +> {} diff --git a/types/UIShell/HeaderUtilities.svelte.d.ts b/types/UIShell/HeaderUtilities.svelte.d.ts new file mode 100644 index 00000000..277fa7f3 --- /dev/null +++ b/types/UIShell/HeaderUtilities.svelte.d.ts @@ -0,0 +1,9 @@ +import type { SvelteComponentTyped } from "svelte"; + +export type HeaderUtilitiesProps = {}; + +export default class HeaderUtilities extends SvelteComponentTyped< + HeaderUtilitiesProps, + Record, + { default: {} } +> {} diff --git a/types/UIShell/SideNav.svelte.d.ts b/types/UIShell/SideNav.svelte.d.ts new file mode 100644 index 00000000..72feba14 --- /dev/null +++ b/types/UIShell/SideNav.svelte.d.ts @@ -0,0 +1,56 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["nav"]; + +type $Props = { + /** + * Set to `true` to use the fixed variant + * @default false + */ + fixed?: boolean; + + /** + * Set to `true` to use the rail variant + * @default false + */ + rail?: boolean; + + /** + * Specify the ARIA label for the nav + * @default undefined + */ + ariaLabel?: string; + + /** + * Set to `true` to toggle the expanded state + * @default false + */ + isOpen?: boolean; + + /** + * The window width (px) at which the SideNav is expanded and the hamburger menu is hidden. + * 1056 represents the "large" breakpoint in pixels from the Carbon Design System: + * - small: 320 + * - medium: 672 + * - large: 1056 + * - x-large: 1312 + * - max: 1584 + * @default 1056 + */ + expansionBreakpoint?: number; + + [key: `data-${string}`]: any; +}; + +export type SideNavProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class SideNav extends SvelteComponentTyped< + SideNavProps, + { + open: CustomEvent; + close: CustomEvent; + ["click:overlay"]: CustomEvent; + }, + { default: {} } +> {} diff --git a/types/UIShell/SideNav/SideNav.d.ts b/types/UIShell/SideNav/SideNav.d.ts deleted file mode 100644 index e493381e..00000000 --- a/types/UIShell/SideNav/SideNav.d.ts +++ /dev/null @@ -1,29 +0,0 @@ -/// - -export interface SideNavProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to use the fixed variant - * @default false - */ - fixed?: boolean; - - /** - * Specify the ARIA label for the nav - */ - ariaLabel?: string; - - /** - * Set to `true` to toggle the expanded state - * @default false - */ - isOpen?: boolean; -} - -export default class SideNav { - $$prop_def: SideNavProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/UIShell/SideNav/SideNavItems.d.ts b/types/UIShell/SideNav/SideNavItems.d.ts deleted file mode 100644 index 3c55cbca..00000000 --- a/types/UIShell/SideNav/SideNavItems.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -/// - -export interface SideNavItemsProps {} - -export default class SideNavItems { - $$prop_def: SideNavItemsProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/UIShell/SideNav/SideNavLink.d.ts b/types/UIShell/SideNav/SideNavLink.d.ts deleted file mode 100644 index 4ec630b5..00000000 --- a/types/UIShell/SideNav/SideNavLink.d.ts +++ /dev/null @@ -1,38 +0,0 @@ -/// - -export interface SideNavLinkProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to select the current link - * @default false - */ - isSelected?: boolean; - - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the text - */ - text?: string; - - /** - * Specify the icon props - */ - icon?: { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean }; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; -} - -export default class SideNavLink { - $$prop_def: SideNavLinkProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/UIShell/SideNav/SideNavMenu.d.ts b/types/UIShell/SideNav/SideNavMenu.d.ts deleted file mode 100644 index 91f7d4f5..00000000 --- a/types/UIShell/SideNav/SideNavMenu.d.ts +++ /dev/null @@ -1,35 +0,0 @@ -/// - -export interface SideNavMenuProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to toggle the expanded state - * @default false - */ - expanded?: boolean; - - /** - * Specify the text - */ - text?: string; - - /** - * Specify the icon props - */ - icon?: { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean }; - - /** - * Obtain a reference to the HTML button element - * @default null - */ - ref?: null | HTMLButtonElement; -} - -export default class SideNavMenu { - $$prop_def: SideNavMenuProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/UIShell/SideNav/SideNavMenuItem.d.ts b/types/UIShell/SideNav/SideNavMenuItem.d.ts deleted file mode 100644 index 2fc2e92e..00000000 --- a/types/UIShell/SideNav/SideNavMenuItem.d.ts +++ /dev/null @@ -1,32 +0,0 @@ -/// - -export interface SideNavMenuItemProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to select the item - */ - isSelected?: boolean; - - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the item text - */ - text?: string; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; -} - -export default class SideNavMenuItem { - $$prop_def: SideNavMenuItemProps; - $$slot_def: {}; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/UIShell/SideNavDivider.svelte.d.ts b/types/UIShell/SideNavDivider.svelte.d.ts new file mode 100644 index 00000000..5dab28bf --- /dev/null +++ b/types/UIShell/SideNavDivider.svelte.d.ts @@ -0,0 +1,16 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["li"]; + +type $Props = { + [key: `data-${string}`]: any; +}; + +export type SideNavDividerProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class SideNavDivider extends SvelteComponentTyped< + SideNavDividerProps, + Record, + {} +> {} diff --git a/types/UIShell/SideNavItems.svelte.d.ts b/types/UIShell/SideNavItems.svelte.d.ts new file mode 100644 index 00000000..c0816bd0 --- /dev/null +++ b/types/UIShell/SideNavItems.svelte.d.ts @@ -0,0 +1,9 @@ +import type { SvelteComponentTyped } from "svelte"; + +export type SideNavItemsProps = {}; + +export default class SideNavItems extends SvelteComponentTyped< + SideNavItemsProps, + Record, + { default: {} } +> {} diff --git a/types/UIShell/SideNavLink.svelte.d.ts b/types/UIShell/SideNavLink.svelte.d.ts new file mode 100644 index 00000000..e0a75892 --- /dev/null +++ b/types/UIShell/SideNavLink.svelte.d.ts @@ -0,0 +1,46 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["a"]; + +type $Props = { + /** + * Set to `true` to select the current link + * @default false + */ + isSelected?: boolean; + + /** + * Specify the `href` attribute + * @default undefined + */ + href?: string; + + /** + * Specify the text + * @default undefined + */ + text?: string; + + /** + * Specify the icon to render + * @default undefined + */ + icon?: any; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + + [key: `data-${string}`]: any; +}; + +export type SideNavLinkProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class SideNavLink extends SvelteComponentTyped< + SideNavLinkProps, + { click: WindowEventMap["click"] }, + { default: {}; icon: {} } +> {} diff --git a/types/UIShell/SideNavMenu.svelte.d.ts b/types/UIShell/SideNavMenu.svelte.d.ts new file mode 100644 index 00000000..b97f45a5 --- /dev/null +++ b/types/UIShell/SideNavMenu.svelte.d.ts @@ -0,0 +1,40 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["button"]; + +type $Props = { + /** + * Set to `true` to toggle the expanded state + * @default false + */ + expanded?: boolean; + + /** + * Specify the text + * @default undefined + */ + text?: string; + + /** + * Specify the icon to render + * @default undefined + */ + icon?: any; + + /** + * Obtain a reference to the HTML button element + * @default null + */ + ref?: null | HTMLButtonElement; + + [key: `data-${string}`]: any; +}; + +export type SideNavMenuProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class SideNavMenu extends SvelteComponentTyped< + SideNavMenuProps, + { click: WindowEventMap["click"] }, + { default: {}; icon: {} } +> {} diff --git a/types/UIShell/SideNavMenuItem.svelte.d.ts b/types/UIShell/SideNavMenuItem.svelte.d.ts new file mode 100644 index 00000000..8867f995 --- /dev/null +++ b/types/UIShell/SideNavMenuItem.svelte.d.ts @@ -0,0 +1,40 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["a"]; + +type $Props = { + /** + * Set to `true` to select the item + * @default false + */ + isSelected?: boolean; + + /** + * Specify the `href` attribute + * @default undefined + */ + href?: string; + + /** + * Specify the item text + * @default undefined + */ + text?: string; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + + [key: `data-${string}`]: any; +}; + +export type SideNavMenuItemProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class SideNavMenuItem extends SvelteComponentTyped< + SideNavMenuItemProps, + { click: WindowEventMap["click"] }, + { default: {} } +> {} diff --git a/types/UIShell/SkipToContent.d.ts b/types/UIShell/SkipToContent.d.ts deleted file mode 100644 index 23c99591..00000000 --- a/types/UIShell/SkipToContent.d.ts +++ /dev/null @@ -1,25 +0,0 @@ -/// - -export interface SkipToContentProps extends svelte.JSX.HTMLAttributes { - /** - * Specify the `href` attribute - * @default "#main-content" - */ - href?: string; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; -} - -export default class SkipToContent { - $$prop_def: SkipToContentProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/UIShell/SkipToContent.svelte.d.ts b/types/UIShell/SkipToContent.svelte.d.ts new file mode 100644 index 00000000..52c54794 --- /dev/null +++ b/types/UIShell/SkipToContent.svelte.d.ts @@ -0,0 +1,28 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["a"]; + +type $Props = { + /** + * Specify the `href` attribute + * @default "#main-content" + */ + href?: string; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + [key: `data-${string}`]: any; +}; + +export type SkipToContentProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class SkipToContent extends SvelteComponentTyped< + SkipToContentProps, + { click: WindowEventMap["click"] }, + { default: {} } +> {} diff --git a/types/UnorderedList/UnorderedList.d.ts b/types/UnorderedList/UnorderedList.d.ts deleted file mode 100644 index 4c18f46d..00000000 --- a/types/UnorderedList/UnorderedList.d.ts +++ /dev/null @@ -1,22 +0,0 @@ -/// - -export interface UnorderedListProps extends svelte.JSX.HTMLAttributes { - /** - * Set to `true` to use the nested variant - * @default false - */ - nested?: boolean; -} - -export default class UnorderedList { - $$prop_def: UnorderedListProps; - $$slot_def: { - default: {}; - }; - - $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; - $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: string, cb: (event: Event) => void): () => void; -} diff --git a/types/UnorderedList/UnorderedList.svelte.d.ts b/types/UnorderedList/UnorderedList.svelte.d.ts new file mode 100644 index 00000000..0ac708ca --- /dev/null +++ b/types/UnorderedList/UnorderedList.svelte.d.ts @@ -0,0 +1,33 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type $RestProps = SvelteHTMLElements["ul"]; + +type $Props = { + /** + * Set to `true` to use the nested variant + * @default false + */ + nested?: boolean; + + /** + * Set to `true` to use Carbon's expressive typesetting + * @default false + */ + expressive?: boolean; + + [key: `data-${string}`]: any; +}; + +export type UnorderedListProps = Omit<$RestProps, keyof $Props> & $Props; + +export default class UnorderedList extends SvelteComponentTyped< + UnorderedListProps, + { + click: WindowEventMap["click"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; + }, + { default: {} } +> {} diff --git a/types/index.d.ts b/types/index.d.ts index c1862c40..be215d97 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,155 +1,169 @@ -export { default as SkeletonText } from "./SkeletonText/SkeletonText"; -export { default as AccordionSkeleton } from "./Accordion/AccordionSkeleton"; -export { default as Accordion } from "./Accordion/Accordion"; -export { default as AccordionItem } from "./Accordion/AccordionItem"; -export { default as AspectRatio } from "./AspectRatio/AspectRatio"; -export { default as BreadcrumbSkeleton } from "./Breadcrumb/BreadcrumbSkeleton"; -export { default as Breadcrumb } from "./Breadcrumb/Breadcrumb"; -export { default as Link } from "./Link/Link"; -export { default as BreadcrumbItem } from "./Breadcrumb/BreadcrumbItem"; -export { default as ButtonSkeleton } from "./Button/ButtonSkeleton"; -export { default as Button } from "./Button/Button"; -export { default as ButtonSet } from "./Button/ButtonSet"; -export { default as CheckboxSkeleton } from "./Checkbox/CheckboxSkeleton"; -export { default as Checkbox } from "./Checkbox/Checkbox"; -export { default as ContentSwitcher } from "./ContentSwitcher/ContentSwitcher"; -export { default as Switch } from "./ContentSwitcher/Switch"; -export { default as Copy } from "./Copy/Copy"; -export { default as CopyButton } from "./CopyButton/CopyButton"; -export { default as ListBox } from "./ListBox/ListBox"; -export { default as ListBoxField } from "./ListBox/ListBoxField"; -export { default as ListBoxMenu } from "./ListBox/ListBoxMenu"; -export { default as ListBoxMenuIcon } from "./ListBox/ListBoxMenuIcon"; -export { default as ListBoxMenuItem } from "./ListBox/ListBoxMenuItem"; -export { default as ListBoxSelection } from "./ListBox/ListBoxSelection"; -export { default as ComboBox } from "./ComboBox/ComboBox"; -export { default as ComposedModal } from "./ComposedModal/ComposedModal"; -export { default as ModalHeader } from "./ComposedModal/ModalHeader"; -export { default as ModalBody } from "./ComposedModal/ModalBody"; -export { default as ModalFooter } from "./ComposedModal/ModalFooter"; -export { default as CodeSnippetSkeleton } from "./CodeSnippet/CodeSnippetSkeleton"; -export { default as CodeSnippet } from "./CodeSnippet/CodeSnippet"; -export { default as RadioButton } from "./RadioButton/RadioButton"; -export { default as RadioButtonSkeleton } from "./RadioButton/RadioButtonSkeleton"; -export { default as Table } from "./DataTable/Table"; -export { default as TableBody } from "./DataTable/TableBody"; -export { default as TableCell } from "./DataTable/TableCell"; -export { default as TableContainer } from "./DataTable/TableContainer"; -export { default as TableHead } from "./DataTable/TableHead"; -export { default as TableHeader } from "./DataTable/TableHeader"; -export { default as TableRow } from "./DataTable/TableRow"; -export { default as DataTable } from "./DataTable/DataTable"; -export { default as Toolbar } from "./DataTable/Toolbar"; -export { default as ToolbarContent } from "./DataTable/ToolbarContent"; -export { default as SearchSkeleton } from "./Search/SearchSkeleton"; -export { default as Search } from "./Search/Search"; -export { default as ToolbarSearch } from "./DataTable/ToolbarSearch"; -export { default as ToolbarBatchActions } from "./DataTable/ToolbarBatchActions"; -export { default as OverflowMenu } from "./OverflowMenu/OverflowMenu"; -export { default as OverflowMenuItem } from "./OverflowMenu/OverflowMenuItem"; -export { default as ToolbarMenu } from "./DataTable/ToolbarMenu"; -export { default as ToolbarMenuItem } from "./DataTable/ToolbarMenuItem"; -export { default as DataTableSkeleton } from "./DataTableSkeleton/DataTableSkeleton"; -export { default as DatePicker } from "./DatePicker/DatePicker"; -export { default as DatePickerInput } from "./DatePicker/DatePickerInput"; -export { default as DatePickerSkeleton } from "./DatePicker/DatePickerSkeleton"; -export { default as Dropdown } from "./Dropdown/Dropdown"; -export { default as DropdownSkeleton } from "./Dropdown/DropdownSkeleton"; -export { default as Loading } from "./Loading/Loading"; -export { default as Filename } from "./FileUploader/Filename"; -export { default as FileUploaderButton } from "./FileUploader/FileUploaderButton"; -export { default as FileUploader } from "./FileUploader/FileUploader"; -export { default as FileUploaderItem } from "./FileUploader/FileUploaderItem"; -export { default as FileUploaderDropContainer } from "./FileUploader/FileUploaderDropContainer"; -export { default as FileUploaderSkeleton } from "./FileUploader/FileUploaderSkeleton"; -export { default as Form } from "./Form/Form"; -export { default as FluidForm } from "./FluidForm/FluidForm"; -export { default as FormGroup } from "./FormGroup/FormGroup"; -export { default as FormItem } from "./FormItem/FormItem"; -export { default as FormLabel } from "./FormLabel/FormLabel"; -export { default as Grid } from "./Grid/Grid"; -export { default as Row } from "./Grid/Row"; -export { default as Column } from "./Grid/Column"; -export { default as IconSkeleton } from "./Icon/IconSkeleton"; -export { default as Icon } from "./Icon/Icon"; -export { default as InlineLoading } from "./InlineLoading/InlineLoading"; -export { default as ListItem } from "./ListItem/ListItem"; -export { default as MultiSelect } from "./MultiSelect/MultiSelect"; -export { default as Modal } from "./Modal/Modal"; -export { default as NotificationButton } from "./Notification/NotificationButton"; -export { default as NotificationIcon } from "./Notification/NotificationIcon"; -export { default as NotificationTextDetails } from "./Notification/NotificationTextDetails"; -export { default as ToastNotification } from "./Notification/ToastNotification"; -export { default as InlineNotification } from "./Notification/InlineNotification"; -export { default as NotificationActionButton } from "./Notification/NotificationActionButton"; -export { default as NumberInput } from "./NumberInput/NumberInput"; -export { default as NumberInputSkeleton } from "./NumberInput/NumberInputSkeleton"; -export { default as OrderedList } from "./OrderedList/OrderedList"; -export { default as Select } from "./Select/Select"; -export { default as SelectSkeleton } from "./Select/SelectSkeleton"; -export { default as SelectItem } from "./Select/SelectItem"; -export { default as SelectItemGroup } from "./Select/SelectItemGroup"; -export { default as Pagination } from "./Pagination/Pagination"; -export { default as PaginationSkeleton } from "./Pagination/PaginationSkeleton"; -export { default as PaginationNav } from "./PaginationNav/PaginationNav"; -export { default as ProgressIndicator } from "./ProgressIndicator/ProgressIndicator"; -export { default as ProgressIndicatorSkeleton } from "./ProgressIndicator/ProgressIndicatorSkeleton"; -export { default as ProgressStep } from "./ProgressIndicator/ProgressStep"; -export { default as RadioButtonGroup } from "./RadioButtonGroup/RadioButtonGroup"; -export { default as SkeletonPlaceholder } from "./SkeletonPlaceholder/SkeletonPlaceholder"; -export { default as Slider } from "./Slider/Slider"; -export { default as SliderSkeleton } from "./Slider/SliderSkeleton"; -export { default as StructuredList } from "./StructuredList/StructuredList"; -export { default as StructuredListSkeleton } from "./StructuredList/StructuredListSkeleton"; -export { default as StructuredListBody } from "./StructuredList/StructuredListBody"; -export { default as StructuredListHead } from "./StructuredList/StructuredListHead"; -export { default as StructuredListCell } from "./StructuredList/StructuredListCell"; -export { default as StructuredListRow } from "./StructuredList/StructuredListRow"; -export { default as StructuredListInput } from "./StructuredList/StructuredListInput"; -export { default as Tabs } from "./Tabs/Tabs"; -export { default as Tab } from "./Tabs/Tab"; -export { default as TabContent } from "./Tabs/TabContent"; -export { default as TabsSkeleton } from "./Tabs/TabsSkeleton"; -export { default as TagSkeleton } from "./Tag/TagSkeleton"; -export { default as Tag } from "./Tag/Tag"; -export { default as TextArea } from "./TextArea/TextArea"; -export { default as TextAreaSkeleton } from "./TextArea/TextAreaSkeleton"; -export { default as TextInput } from "./TextInput/TextInput"; -export { default as TextInputSkeleton } from "./TextInput/TextInputSkeleton"; -export { default as PasswordInput } from "./TextInput/PasswordInput"; -export { default as Tile } from "./Tile/Tile"; -export { default as ClickableTile } from "./Tile/ClickableTile"; -export { default as ExpandableTile } from "./Tile/ExpandableTile"; -export { default as SelectableTile } from "./Tile/SelectableTile"; -export { default as RadioTile } from "./Tile/RadioTile"; -export { default as TileGroup } from "./Tile/TileGroup"; -export { default as TimePicker } from "./TimePicker/TimePicker"; -export { default as TimePickerSelect } from "./TimePicker/TimePickerSelect"; -export { default as Toggle } from "./Toggle/Toggle"; -export { default as ToggleSkeleton } from "./Toggle/ToggleSkeleton"; -export { default as ToggleSmall } from "./ToggleSmall/ToggleSmall"; -export { default as ToggleSmallSkeleton } from "./ToggleSmall/ToggleSmallSkeleton"; -export { default as Tooltip } from "./Tooltip/Tooltip"; -export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition"; -export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon"; -export { default as Header } from "./UIShell/GlobalHeader/Header"; -export { default as HeaderAction } from "./UIShell/GlobalHeader/HeaderAction"; -export { default as HeaderActionLink } from "./UIShell/GlobalHeader/HeaderActionLink"; -export { default as HeaderActionSearch } from "./UIShell/GlobalHeader/HeaderActionSearch"; -export { default as HeaderNav } from "./UIShell/GlobalHeader/HeaderNav"; -export { default as HeaderNavItem } from "./UIShell/GlobalHeader/HeaderNavItem"; -export { default as HeaderNavMenu } from "./UIShell/GlobalHeader/HeaderNavMenu"; -export { default as HeaderPanelDivider } from "./UIShell/GlobalHeader/HeaderPanelDivider"; -export { default as HeaderPanelLink } from "./UIShell/GlobalHeader/HeaderPanelLink"; -export { default as HeaderPanelLinks } from "./UIShell/GlobalHeader/HeaderPanelLinks"; -export { default as HeaderUtilities } from "./UIShell/GlobalHeader/HeaderUtilities"; -export { default as SideNav } from "./UIShell/SideNav/SideNav"; -export { default as SideNavItems } from "./UIShell/SideNav/SideNavItems"; -export { default as SideNavLink } from "./UIShell/SideNav/SideNavLink"; -export { default as SideNavMenu } from "./UIShell/SideNav/SideNavMenu"; -export { default as SideNavMenuItem } from "./UIShell/SideNav/SideNavMenuItem"; -export { default as Content } from "./UIShell/Content"; -export { default as SkipToContent } from "./UIShell/SkipToContent"; -export { default as HeaderGlobalAction } from "./UIShell/HeaderGlobalAction"; -export { default as HeaderSearch } from "./UIShell/HeaderSearch"; -export { default as UnorderedList } from "./UnorderedList/UnorderedList"; +export { default as Accordion } from "./Accordion/Accordion.svelte"; +export { default as AccordionItem } from "./Accordion/AccordionItem.svelte"; +export { default as AccordionSkeleton } from "./Accordion/AccordionSkeleton.svelte"; +export { default as AspectRatio } from "./AspectRatio/AspectRatio.svelte"; +export { default as Breadcrumb } from "./Breadcrumb/Breadcrumb.svelte"; +export { default as BreadcrumbItem } from "./Breadcrumb/BreadcrumbItem.svelte"; +export { default as BreadcrumbSkeleton } from "./Breadcrumb/BreadcrumbSkeleton.svelte"; +export { default as Breakpoint } from "./Breakpoint/Breakpoint.svelte"; +export { default as breakpointObserver } from "./Breakpoint/breakpointObserver"; +export { default as breakpoints } from "./Breakpoint/breakpoints"; +export { default as Button } from "./Button/Button.svelte"; +export { default as ButtonSkeleton } from "./Button/ButtonSkeleton.svelte"; +export { default as ButtonSet } from "./Button/ButtonSet.svelte"; +export { default as Checkbox } from "./Checkbox/Checkbox.svelte"; +export { default as CheckboxSkeleton } from "./Checkbox/CheckboxSkeleton.svelte"; +export { default as ContentSwitcher } from "./ContentSwitcher/ContentSwitcher.svelte"; +export { default as Switch } from "./ContentSwitcher/Switch.svelte"; +export { default as ContextMenu } from "./ContextMenu/ContextMenu.svelte"; +export { default as ContextMenuDivider } from "./ContextMenu/ContextMenuDivider.svelte"; +export { default as ContextMenuGroup } from "./ContextMenu/ContextMenuGroup.svelte"; +export { default as ContextMenuOption } from "./ContextMenu/ContextMenuOption.svelte"; +export { default as ContextMenuRadioGroup } from "./ContextMenu/ContextMenuRadioGroup.svelte"; +export { default as CopyButton } from "./CopyButton/CopyButton.svelte"; +export { default as ComboBox } from "./ComboBox/ComboBox.svelte"; +export { default as ComposedModal } from "./ComposedModal/ComposedModal.svelte"; +export { default as ModalHeader } from "./ComposedModal/ModalHeader.svelte"; +export { default as ModalBody } from "./ComposedModal/ModalBody.svelte"; +export { default as ModalFooter } from "./ComposedModal/ModalFooter.svelte"; +export { default as CodeSnippet } from "./CodeSnippet/CodeSnippet.svelte"; +export { default as CodeSnippetSkeleton } from "./CodeSnippet/CodeSnippetSkeleton.svelte"; +export { default as DataTable } from "./DataTable/DataTable.svelte"; +export { default as DataTableSkeleton } from "./DataTable/DataTableSkeleton.svelte"; +export { default as Table } from "./DataTable/Table.svelte"; +export { default as TableBody } from "./DataTable/TableBody.svelte"; +export { default as TableCell } from "./DataTable/TableCell.svelte"; +export { default as TableContainer } from "./DataTable/TableContainer.svelte"; +export { default as TableHead } from "./DataTable/TableHead.svelte"; +export { default as TableHeader } from "./DataTable/TableHeader.svelte"; +export { default as TableRow } from "./DataTable/TableRow.svelte"; +export { default as Toolbar } from "./DataTable/Toolbar.svelte"; +export { default as ToolbarContent } from "./DataTable/ToolbarContent.svelte"; +export { default as ToolbarSearch } from "./DataTable/ToolbarSearch.svelte"; +export { default as ToolbarBatchActions } from "./DataTable/ToolbarBatchActions.svelte"; +export { default as ToolbarMenu } from "./DataTable/ToolbarMenu.svelte"; +export { default as ToolbarMenuItem } from "./DataTable/ToolbarMenuItem.svelte"; +export { default as DatePicker } from "./DatePicker/DatePicker.svelte"; +export { default as DatePickerInput } from "./DatePicker/DatePickerInput.svelte"; +export { default as DatePickerSkeleton } from "./DatePicker/DatePickerSkeleton.svelte"; +export { default as Dropdown } from "./Dropdown/Dropdown.svelte"; +export { default as DropdownSkeleton } from "./Dropdown/DropdownSkeleton.svelte"; +export { default as FileUploader } from "./FileUploader/FileUploader.svelte"; +export { default as FileUploaderButton } from "./FileUploader/FileUploaderButton.svelte"; +export { default as FileUploaderItem } from "./FileUploader/FileUploaderItem.svelte"; +export { default as FileUploaderDropContainer } from "./FileUploader/FileUploaderDropContainer.svelte"; +export { default as Filename } from "./FileUploader/Filename.svelte"; +export { default as FileUploaderSkeleton } from "./FileUploader/FileUploaderSkeleton.svelte"; +export { default as Form } from "./Form/Form.svelte"; +export { default as FluidForm } from "./FluidForm/FluidForm.svelte"; +export { default as FormGroup } from "./FormGroup/FormGroup.svelte"; +export { default as FormItem } from "./FormItem/FormItem.svelte"; +export { default as FormLabel } from "./FormLabel/FormLabel.svelte"; +export { default as Grid } from "./Grid/Grid.svelte"; +export { default as Row } from "./Grid/Row.svelte"; +export { default as Column } from "./Grid/Column.svelte"; +export { default as ImageLoader } from "./ImageLoader/ImageLoader.svelte"; +export { default as InlineLoading } from "./InlineLoading/InlineLoading.svelte"; +export { default as Link } from "./Link/Link.svelte"; +export { default as OutboundLink } from "./Link/OutboundLink.svelte"; +export { default as ListBox } from "./ListBox/ListBox.svelte"; +export { default as ListBoxField } from "./ListBox/ListBoxField.svelte"; +export { default as ListBoxMenu } from "./ListBox/ListBoxMenu.svelte"; +export { default as ListBoxMenuIcon } from "./ListBox/ListBoxMenuIcon.svelte"; +export { default as ListBoxMenuItem } from "./ListBox/ListBoxMenuItem.svelte"; +export { default as ListBoxSelection } from "./ListBox/ListBoxSelection.svelte"; +export { default as ListItem } from "./ListItem/ListItem.svelte"; +export { default as Loading } from "./Loading/Loading.svelte"; +export { default as LocalStorage } from "./LocalStorage/LocalStorage.svelte"; +export { default as MultiSelect } from "./MultiSelect/MultiSelect.svelte"; +export { default as Modal } from "./Modal/Modal.svelte"; +export { default as ToastNotification } from "./Notification/ToastNotification.svelte"; +export { default as InlineNotification } from "./Notification/InlineNotification.svelte"; +export { default as NotificationActionButton } from "./Notification/NotificationActionButton.svelte"; +export { default as NotificationButton } from "./Notification/NotificationButton.svelte"; +export { default as NotificationIcon } from "./Notification/NotificationIcon.svelte"; +export { default as NumberInput } from "./NumberInput/NumberInput.svelte"; +export { default as NumberInputSkeleton } from "./NumberInput/NumberInputSkeleton.svelte"; +export { default as OrderedList } from "./OrderedList/OrderedList.svelte"; +export { default as OverflowMenu } from "./OverflowMenu/OverflowMenu.svelte"; +export { default as OverflowMenuItem } from "./OverflowMenu/OverflowMenuItem.svelte"; +export { default as Pagination } from "./Pagination/Pagination.svelte"; +export { default as PaginationSkeleton } from "./Pagination/PaginationSkeleton.svelte"; +export { default as PaginationNav } from "./PaginationNav/PaginationNav.svelte"; +export { default as Popover } from "./Popover/Popover.svelte"; +export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"; +export { default as ProgressIndicator } from "./ProgressIndicator/ProgressIndicator.svelte"; +export { default as ProgressIndicatorSkeleton } from "./ProgressIndicator/ProgressIndicatorSkeleton.svelte"; +export { default as ProgressStep } from "./ProgressIndicator/ProgressStep.svelte"; +export { default as RadioButton } from "./RadioButton/RadioButton.svelte"; +export { default as RadioButtonSkeleton } from "./RadioButton/RadioButtonSkeleton.svelte"; +export { default as RadioButtonGroup } from "./RadioButtonGroup/RadioButtonGroup.svelte"; +export { default as RecursiveList } from "./RecursiveList/RecursiveList.svelte"; +export { default as Search } from "./Search/Search.svelte"; +export { default as SearchSkeleton } from "./Search/SearchSkeleton.svelte"; +export { default as Select } from "./Select/Select.svelte"; +export { default as SelectSkeleton } from "./Select/SelectSkeleton.svelte"; +export { default as SelectItem } from "./Select/SelectItem.svelte"; +export { default as SelectItemGroup } from "./Select/SelectItemGroup.svelte"; +export { default as SkeletonPlaceholder } from "./SkeletonPlaceholder/SkeletonPlaceholder.svelte"; +export { default as SkeletonText } from "./SkeletonText/SkeletonText.svelte"; +export { default as Slider } from "./Slider/Slider.svelte"; +export { default as SliderSkeleton } from "./Slider/SliderSkeleton.svelte"; +export { default as StructuredList } from "./StructuredList/StructuredList.svelte"; +export { default as StructuredListSkeleton } from "./StructuredList/StructuredListSkeleton.svelte"; +export { default as StructuredListBody } from "./StructuredList/StructuredListBody.svelte"; +export { default as StructuredListHead } from "./StructuredList/StructuredListHead.svelte"; +export { default as StructuredListCell } from "./StructuredList/StructuredListCell.svelte"; +export { default as StructuredListRow } from "./StructuredList/StructuredListRow.svelte"; +export { default as StructuredListInput } from "./StructuredList/StructuredListInput.svelte"; +export { default as Tabs } from "./Tabs/Tabs.svelte"; +export { default as Tab } from "./Tabs/Tab.svelte"; +export { default as TabContent } from "./Tabs/TabContent.svelte"; +export { default as TabsSkeleton } from "./Tabs/TabsSkeleton.svelte"; +export { default as Tag } from "./Tag/Tag.svelte"; +export { default as TagSkeleton } from "./Tag/TagSkeleton.svelte"; +export { default as TextArea } from "./TextArea/TextArea.svelte"; +export { default as TextAreaSkeleton } from "./TextArea/TextAreaSkeleton.svelte"; +export { default as TextInput } from "./TextInput/TextInput.svelte"; +export { default as TextInputSkeleton } from "./TextInput/TextInputSkeleton.svelte"; +export { default as PasswordInput } from "./TextInput/PasswordInput.svelte"; +export { default as Theme } from "./Theme/Theme.svelte"; +export { default as Tile } from "./Tile/Tile.svelte"; +export { default as ClickableTile } from "./Tile/ClickableTile.svelte"; +export { default as ExpandableTile } from "./Tile/ExpandableTile.svelte"; +export { default as SelectableTile } from "./Tile/SelectableTile.svelte"; +export { default as RadioTile } from "./Tile/RadioTile.svelte"; +export { default as TileGroup } from "./Tile/TileGroup.svelte"; +export { default as TimePicker } from "./TimePicker/TimePicker.svelte"; +export { default as TimePickerSelect } from "./TimePicker/TimePickerSelect.svelte"; +export { default as Toggle } from "./Toggle/Toggle.svelte"; +export { default as ToggleSkeleton } from "./Toggle/ToggleSkeleton.svelte"; +export { default as Tooltip } from "./Tooltip/Tooltip.svelte"; +export { default as TooltipFooter } from "./Tooltip/TooltipFooter.svelte"; +export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition.svelte"; +export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon.svelte"; +export { default as TreeView } from "./TreeView/TreeView.svelte"; +export { default as Truncate } from "./Truncate/Truncate.svelte"; +export { default as truncate } from "./Truncate/truncate"; +export { default as Header } from "./UIShell/Header.svelte"; +export { default as HeaderAction } from "./UIShell/HeaderAction.svelte"; +export { default as HeaderActionLink } from "./UIShell/HeaderActionLink.svelte"; +export { default as HeaderNav } from "./UIShell/HeaderNav.svelte"; +export { default as HeaderNavItem } from "./UIShell/HeaderNavItem.svelte"; +export { default as HeaderNavMenu } from "./UIShell/HeaderNavMenu.svelte"; +export { default as HeaderPanelDivider } from "./UIShell/HeaderPanelDivider.svelte"; +export { default as HeaderPanelLink } from "./UIShell/HeaderPanelLink.svelte"; +export { default as HeaderPanelLinks } from "./UIShell/HeaderPanelLinks.svelte"; +export { default as HeaderUtilities } from "./UIShell/HeaderUtilities.svelte"; +export { default as SideNav } from "./UIShell/SideNav.svelte"; +export { default as SideNavItems } from "./UIShell/SideNavItems.svelte"; +export { default as SideNavLink } from "./UIShell/SideNavLink.svelte"; +export { default as SideNavMenu } from "./UIShell/SideNavMenu.svelte"; +export { default as SideNavMenuItem } from "./UIShell/SideNavMenuItem.svelte"; +export { default as SideNavDivider } from "./UIShell/SideNavDivider.svelte"; +export { default as Content } from "./UIShell/Content.svelte"; +export { default as SkipToContent } from "./UIShell/SkipToContent.svelte"; +export { default as HeaderGlobalAction } from "./UIShell/HeaderGlobalAction.svelte"; +export { default as HeaderSearch } from "./UIShell/HeaderSearch.svelte"; +export { default as UnorderedList } from "./UnorderedList/UnorderedList.svelte"; +export { default as toHierarchy } from "./utils/toHierarchy"; diff --git a/types/utils/toHierarchy.d.ts b/types/utils/toHierarchy.d.ts new file mode 100644 index 00000000..a805f899 --- /dev/null +++ b/types/utils/toHierarchy.d.ts @@ -0,0 +1,21 @@ +type NodeLike = { + id: string | number; + nodes?: NodeLike[]; + [key: string]: any; +}; + +/** Create a hierarchical tree from a flat array. */ +export function toHierarchy< + T extends NodeLike, + K extends keyof Omit, +>( + flatArray: T[] | readonly T[], + /** + * Function that returns the parent ID for a given node. + * @example + * toHierarchy(flatArray, (node) => node.parentId); + */ + getParentId: (node: T) => T[K] | null, +): (T & { nodes?: (T & { nodes?: T[] })[] })[]; + +export default toHierarchy; diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 00000000..c17edf31 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,25 @@ +/// +import { svelte, vitePreprocess } from "@sveltejs/vite-plugin-svelte"; +import { optimizeImports } from "carbon-preprocess-svelte"; +import { defineConfig } from "vite"; + +export default defineConfig({ + root: "./tests", + plugins: [ + svelte({ + preprocess: [vitePreprocess(), optimizeImports()], + }), + ], + optimizeDeps: { + exclude: ["carbon-components-svelte", "carbon-icons-svelte"], + }, + resolve: process.env.VITEST ? { conditions: ["browser"] } : undefined, + test: { + globals: true, + environment: "jsdom", + clearMocks: true, + // Suppress `console` output in CI. + silent: !!process.env.CI, + setupFiles: ["./tests/setup-tests.ts"], + }, +}); diff --git a/yarn.lock b/yarn.lock deleted file mode 100644 index cdd0005f..00000000 --- a/yarn.lock +++ /dev/null @@ -1,3027 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -# yarn lockfile v1 - - -"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4": - version "7.10.4" - resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a" - integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg== - dependencies: - "@babel/highlight" "^7.10.4" - -"@babel/helper-validator-identifier@^7.10.4": - version "7.10.4" - resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2" - integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw== - -"@babel/highlight@^7.10.4": - version "7.10.4" - resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143" - integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA== - dependencies: - "@babel/helper-validator-identifier" "^7.10.4" - chalk "^2.0.0" - js-tokens "^4.0.0" - -"@carbon/colors@^10.15.0": - version "10.15.0" - resolved "https://registry.npmjs.org/@carbon/colors/-/colors-10.15.0.tgz#1a7f211a9e92b51c838995f5f3ffae002a3fed8b" - integrity sha512-z6Ur7unTO6XoVVujXnGcvxxDaX1g5ccCqImlb/HtJHtF7WFCQVjpxKKn76XcmI3PRZ2tbc9q+ENpfbS5Ry/NBQ== - -"@carbon/import-once@^10.3.0": - version "10.3.0" - resolved "https://registry.npmjs.org/@carbon/import-once/-/import-once-10.3.0.tgz#58617da4efb6d7a11352d8e6b7209da1d39f364d" - integrity sha512-PFk3FhMe3psihYtCg3JsyPHismqglnbUqIpz1DCG5Gn/kt0HdVKhGvHdEq7E305rGoBUCKzMn/4xoY9v9mcmlg== - -"@carbon/layout@^10.14.0": - version "10.14.0" - resolved "https://registry.npmjs.org/@carbon/layout/-/layout-10.14.0.tgz#abeb9a01c5ee70fe1e5f8dc3b0d5a6e423cea935" - integrity sha512-P9ueDQWpq3pF98iHGsCKL4fR/mP8Xhqe3qhBQfA5zgi7/RPy76lKGZR+SUoGX/QCC72vkA/zhJ4+7/I26LhMhQ== - -"@carbon/themes@^10.22.1": - version "10.22.1" - resolved "https://registry.npmjs.org/@carbon/themes/-/themes-10.22.1.tgz#aba08e5463aaa8120ae376c70660afb4213022a7" - integrity sha512-O133H/8FmcZJ7A3pd2ztv7MTJmn1Ao9nNkTPxijTCFwLQEYcvxxqkzuBCqTJeyXKZCXf4isiYnBuUz5L1l+mRg== - dependencies: - "@carbon/colors" "^10.15.0" - "@carbon/layout" "^10.14.0" - "@carbon/type" "^10.17.0" - color "^3.1.2" - -"@carbon/type@^10.17.0": - version "10.17.0" - resolved "https://registry.npmjs.org/@carbon/type/-/type-10.17.0.tgz#8901768d2dbeb12936c50ea81b9e5025f2346f30" - integrity sha512-fxutYwh6wNtcE0usO5d7ogoVLOTEOc34q4Xe1KT8IQVfDlnmdtLsdKvCxZrCk5KiAQZILCmXmyySiLdJfQcRJw== - dependencies: - "@carbon/import-once" "^10.3.0" - "@carbon/layout" "^10.14.0" - -"@rollup/plugin-commonjs@^16.0.0": - version "16.0.0" - resolved "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-16.0.0.tgz#169004d56cd0f0a1d0f35915d31a036b0efe281f" - integrity sha512-LuNyypCP3msCGVQJ7ki8PqYdpjfEkE/xtFa5DqlF+7IBD0JsfMZ87C58heSwIMint58sAUZbt3ITqOmdQv/dXw== - dependencies: - "@rollup/pluginutils" "^3.1.0" - commondir "^1.0.1" - estree-walker "^2.0.1" - glob "^7.1.6" - is-reference "^1.2.1" - magic-string "^0.25.7" - resolve "^1.17.0" - -"@rollup/plugin-node-resolve@^10.0.0": - version "10.0.0" - resolved "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-10.0.0.tgz#44064a2b98df7530e66acf8941ff262fc9b4ead8" - integrity sha512-sNijGta8fqzwA1VwUEtTvWCx2E7qC70NMsDh4ZG13byAXYigBNZMxALhKUSycBks5gupJdq0lFrKumFrRZ8H3A== - dependencies: - "@rollup/pluginutils" "^3.1.0" - "@types/resolve" "1.17.1" - builtin-modules "^3.1.0" - deepmerge "^4.2.2" - is-module "^1.0.0" - resolve "^1.17.0" - -"@rollup/pluginutils@^3.1.0": - version "3.1.0" - resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b" - integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg== - dependencies: - "@types/estree" "0.0.39" - estree-walker "^1.0.1" - picomatch "^2.2.2" - -"@tsconfig/svelte@^1.0.10": - version "1.0.10" - resolved "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-1.0.10.tgz#30ec7feeee0bdf38b12a50f0686f8a2e7b6b9dc0" - integrity sha512-EBrpH2iXXfaf/9z81koiDYkp2mlwW2XzFcAqn6qh7VKyP8zBvHHAQzNhY+W9vH5arAjmGAm5g8ElWq6YmXm3ig== - -"@types/color-name@^1.1.1": - version "1.1.1" - resolved "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0" - integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ== - -"@types/estree@*": - version "0.0.45" - resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.45.tgz#e9387572998e5ecdac221950dab3e8c3b16af884" - integrity sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g== - -"@types/estree@0.0.39": - version "0.0.39" - resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f" - integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw== - -"@types/node@*": - version "14.0.23" - resolved "https://registry.npmjs.org/@types/node/-/node-14.0.23.tgz#676fa0883450ed9da0bb24156213636290892806" - integrity sha512-Z4U8yDAl5TFkmYsZdFPdjeMa57NOvnaf1tljHzhouaPEp7LCj2JKkejpI1ODviIAQuW4CcQmxkQ77rnLsOOoKw== - -"@types/parse-json@^4.0.0": - version "4.0.0" - resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0" - integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA== - -"@types/pug@^2.0.4": - version "2.0.4" - resolved "https://registry.npmjs.org/@types/pug/-/pug-2.0.4.tgz#8772fcd0418e3cd2cc171555d73007415051f4b2" - integrity sha1-h3L80EGOPNLMFxVV1zAHQVBR9LI= - -"@types/resolve@1.17.1": - version "1.17.1" - resolved "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6" - integrity sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw== - dependencies: - "@types/node" "*" - -"@types/sass@^1.16.0": - version "1.16.0" - resolved "https://registry.npmjs.org/@types/sass/-/sass-1.16.0.tgz#b41ac1c17fa68ffb57d43e2360486ef526b3d57d" - integrity sha512-2XZovu4NwcqmtZtsBR5XYLw18T8cBCnU2USFHTnYLLHz9fkhnoEMoDsqShJIOFsFhn5aJHjweiUUdTrDGujegA== - dependencies: - "@types/node" "*" - -abbrev@1: - version "1.1.1" - resolved "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8" - integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q== - -aggregate-error@^3.0.0: - version "3.0.1" - resolved "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.0.1.tgz#db2fe7246e536f40d9b5442a39e117d7dd6a24e0" - integrity sha512-quoaXsZ9/BLNae5yiNoUz+Nhkwz83GhWwtYFglcjEQB2NDHCIpApbqXxIFnm4Pq/Nvhrsq5sYJFyohrrxnTGAA== - dependencies: - clean-stack "^2.0.0" - indent-string "^4.0.0" - -ajv@^6.5.5: - version "6.12.3" - resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.3.tgz#18c5af38a111ddeb4f2697bd78d68abc1cabd706" - integrity sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA== - dependencies: - fast-deep-equal "^3.1.1" - fast-json-stable-stringify "^2.0.0" - json-schema-traverse "^0.4.1" - uri-js "^4.2.2" - -amdefine@>=0.0.4: - version "1.0.1" - resolved "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5" - integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU= - -ansi-colors@^4.1.1: - version "4.1.1" - resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348" - integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA== - -ansi-escapes@^4.3.0: - version "4.3.1" - resolved "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.1.tgz#a5c47cc43181f1f38ffd7076837700d395522a61" - integrity sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA== - dependencies: - type-fest "^0.11.0" - -ansi-regex@^2.0.0: - version "2.1.1" - resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df" - integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8= - -ansi-regex@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998" - integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg= - -ansi-regex@^4.1.0: - version "4.1.0" - resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997" - integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg== - -ansi-regex@^5.0.0: - version "5.0.0" - resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75" - integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg== - -ansi-styles@^2.2.1: - version "2.2.1" - resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe" - integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4= - -ansi-styles@^3.2.0, ansi-styles@^3.2.1: - version "3.2.1" - resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d" - integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA== - dependencies: - color-convert "^1.9.0" - -ansi-styles@^4.0.0, ansi-styles@^4.1.0: - version "4.2.1" - resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359" - integrity sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA== - dependencies: - "@types/color-name" "^1.1.1" - color-convert "^2.0.1" - -anymatch@~3.1.1: - version "3.1.1" - resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142" - integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg== - dependencies: - normalize-path "^3.0.0" - picomatch "^2.0.4" - -aproba@^1.0.3: - version "1.2.0" - resolved "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a" - integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw== - -are-we-there-yet@~1.1.2: - version "1.1.5" - resolved "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21" - integrity sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w== - dependencies: - delegates "^1.0.0" - readable-stream "^2.0.6" - -array-find-index@^1.0.1: - version "1.0.2" - resolved "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1" - integrity sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E= - -array-union@^1.0.1: - version "1.0.2" - resolved "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39" - integrity sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk= - dependencies: - array-uniq "^1.0.1" - -array-uniq@^1.0.1: - version "1.0.3" - resolved "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6" - integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY= - -asn1@~0.2.3: - version "0.2.4" - resolved "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136" - integrity sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg== - dependencies: - safer-buffer "~2.1.0" - -assert-plus@1.0.0, assert-plus@^1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525" - integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU= - -astral-regex@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31" - integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ== - -async-foreach@^0.1.3: - version "0.1.3" - resolved "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542" - integrity sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI= - -async@^2.6.1: - version "2.6.3" - resolved "https://registry.npmjs.org/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff" - integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg== - dependencies: - lodash "^4.17.14" - -asynckit@^0.4.0: - version "0.4.0" - resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" - integrity sha1-x57Zf380y48robyXkLzDZkdLS3k= - -at-least-node@^1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2" - integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg== - -autoprefixer@^9.8.6: - version "9.8.6" - resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f" - integrity sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg== - dependencies: - browserslist "^4.12.0" - caniuse-lite "^1.0.30001109" - colorette "^1.2.1" - normalize-range "^0.1.2" - num2fraction "^1.2.2" - postcss "^7.0.32" - postcss-value-parser "^4.1.0" - -aws-sign2@~0.7.0: - version "0.7.0" - resolved "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8" - integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg= - -aws4@^1.8.0: - version "1.10.0" - resolved "https://registry.npmjs.org/aws4/-/aws4-1.10.0.tgz#a17b3a8ea811060e74d47d306122400ad4497ae2" - integrity sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA== - -balanced-match@^1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767" - integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c= - -bcrypt-pbkdf@^1.0.0: - version "1.0.2" - resolved "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e" - integrity sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4= - dependencies: - tweetnacl "^0.14.3" - -big.js@^5.2.2: - version "5.2.2" - resolved "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328" - integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ== - -binary-extensions@^2.0.0: - version "2.1.0" - resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9" - integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ== - -block-stream@*: - version "0.0.9" - resolved "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a" - integrity sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo= - dependencies: - inherits "~2.0.0" - -brace-expansion@^1.1.7: - version "1.1.11" - resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" - integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA== - dependencies: - balanced-match "^1.0.0" - concat-map "0.0.1" - -braces@^3.0.1, braces@~3.0.2: - version "3.0.2" - resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" - integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== - dependencies: - fill-range "^7.0.1" - -browserslist@^4.12.0: - version "4.13.0" - resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.13.0.tgz#42556cba011e1b0a2775b611cba6a8eca18e940d" - integrity sha512-MINatJ5ZNrLnQ6blGvePd/QOz9Xtu+Ne+x29iQSCHfkU5BugKVJwZKn/iiL8UbpIpa3JhviKjz+XxMo0m2caFQ== - dependencies: - caniuse-lite "^1.0.30001093" - electron-to-chromium "^1.3.488" - escalade "^3.0.1" - node-releases "^1.1.58" - -buffer-from@^1.0.0: - version "1.1.1" - resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef" - integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A== - -builtin-modules@^3.1.0: - version "3.1.0" - resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484" - integrity sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw== - -callsites@^3.0.0: - version "3.1.0" - resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73" - integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ== - -camelcase-keys@^2.0.0: - version "2.1.0" - resolved "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7" - integrity sha1-MIvur/3ygRkFHvodkyITyRuPkuc= - dependencies: - camelcase "^2.0.0" - map-obj "^1.0.0" - -camelcase@^2.0.0: - version "2.1.1" - resolved "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f" - integrity sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8= - -camelcase@^5.0.0: - version "5.3.1" - resolved "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320" - integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== - -caniuse-lite@^1.0.30001093: - version "1.0.30001103" - resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001103.tgz#fe81536d075b97cd013d4988c9212418faa289a8" - integrity sha512-EJkTPrZrgy712tjZ7GQDye5A67SQOyNS6X9b6GS/e5QFu5Renv5qfkx3GHq1S+vObxKzbWWYuPO/7nt4kYW/gA== - -caniuse-lite@^1.0.30001109: - version "1.0.30001124" - resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001124.tgz#5d9998190258e11630d674fc50ea8e579ae0ced2" - integrity sha512-zQW8V3CdND7GHRH6rxm6s59Ww4g/qGWTheoboW9nfeMg7sUoopIfKCcNZUjwYRCOrvereh3kwDpZj4VLQ7zGtA== - -"carbon-components-10.23@npm:carbon-components@10.23.1": - version "10.23.1" - resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.23.1.tgz#cf649a09aa25eac14dc158f0fb79ba625730026c" - integrity sha512-izeyNCo9cPfdw9358y5VPsDRzmGAO1wAjSnkD5gGEQO46P2HBdQcgXV1IqjAbFuit+TgfG/MrP38u+pmjp4zyQ== - dependencies: - flatpickr "4.6.1" - lodash.debounce "^4.0.8" - warning "^3.0.0" - -carbon-icons-svelte@^10.21.0: - version "10.21.0" - resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.21.0.tgz#9bbdd37d5513d484e9706d6335c121f60f3186c4" - integrity sha512-5NNaRdmbS4N36dUGNj72Ys3VqVjH3fZ69AhYUHx+bH02GFYCwAaE49qjtP77kP7DKMtDV9NmMEti/P/JB83aYQ== - -caseless@~0.12.0: - version "0.12.0" - resolved "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc" - integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw= - -chalk@^1.1.1: - version "1.1.3" - resolved "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98" - integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg= - dependencies: - ansi-styles "^2.2.1" - escape-string-regexp "^1.0.2" - has-ansi "^2.0.0" - strip-ansi "^3.0.0" - supports-color "^2.0.0" - -chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2: - version "2.4.2" - resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" - integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== - dependencies: - ansi-styles "^3.2.1" - escape-string-regexp "^1.0.5" - supports-color "^5.3.0" - -chalk@^4.0.0, chalk@^4.1.0: - version "4.1.0" - resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a" - integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A== - dependencies: - ansi-styles "^4.1.0" - supports-color "^7.1.0" - -chokidar@^3.4.1: - version "3.4.3" - resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz#c1df38231448e45ca4ac588e6c79573ba6a57d5b" - integrity sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ== - dependencies: - anymatch "~3.1.1" - braces "~3.0.2" - glob-parent "~5.1.0" - is-binary-path "~2.1.0" - is-glob "~4.0.1" - normalize-path "~3.0.0" - readdirp "~3.5.0" - optionalDependencies: - fsevents "~2.1.2" - -ci-info@^2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46" - integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ== - -clean-stack@^2.0.0: - version "2.2.0" - resolved "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b" - integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A== - -cli-cursor@^3.1.0: - version "3.1.0" - resolved "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307" - integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw== - dependencies: - restore-cursor "^3.1.0" - -cli-truncate@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-2.1.0.tgz#c39e28bf05edcde5be3b98992a22deed5a2b93c7" - integrity sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg== - dependencies: - slice-ansi "^3.0.0" - string-width "^4.2.0" - -cliui@^5.0.0: - version "5.0.0" - resolved "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5" - integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA== - dependencies: - string-width "^3.1.0" - strip-ansi "^5.2.0" - wrap-ansi "^5.1.0" - -code-point-at@^1.0.0: - version "1.1.0" - resolved "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77" - integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c= - -color-convert@^1.9.0, color-convert@^1.9.1: - version "1.9.3" - resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" - integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== - dependencies: - color-name "1.1.3" - -color-convert@^2.0.1: - version "2.0.1" - resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3" - integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ== - dependencies: - color-name "~1.1.4" - -color-name@1.1.3: - version "1.1.3" - resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" - integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= - -color-name@^1.0.0, color-name@~1.1.4: - version "1.1.4" - resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" - integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== - -color-string@^1.5.4: - version "1.5.4" - resolved "https://registry.npmjs.org/color-string/-/color-string-1.5.4.tgz#dd51cd25cfee953d138fe4002372cc3d0e504cb6" - integrity sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw== - dependencies: - color-name "^1.0.0" - simple-swizzle "^0.2.2" - -color@^3.1.2: - version "3.1.3" - resolved "https://registry.npmjs.org/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e" - integrity sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ== - dependencies: - color-convert "^1.9.1" - color-string "^1.5.4" - -colorette@^1.2.1: - version "1.2.1" - resolved "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b" - integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw== - -combined-stream@^1.0.6, combined-stream@~1.0.6: - version "1.0.8" - resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f" - integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg== - dependencies: - delayed-stream "~1.0.0" - -commander@^2.18.0, commander@^2.20.0: - version "2.20.3" - resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" - integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== - -commander@^6.2.0: - version "6.2.0" - resolved "https://registry.npmjs.org/commander/-/commander-6.2.0.tgz#b990bfb8ac030aedc6d11bc04d1488ffef56db75" - integrity sha512-zP4jEKbe8SHzKJYQmq8Y9gYjtO/POJLgIdKgV7B9qNmABVFVc+ctqSX6iXh4mCpJfRBOabiZ2YKPg8ciDw6C+Q== - -comment-parser@^0.7.6: - version "0.7.6" - resolved "https://registry.npmjs.org/comment-parser/-/comment-parser-0.7.6.tgz#0e743a53c8e646c899a1323db31f6cd337b10f12" - integrity sha512-GKNxVA7/iuTnAqGADlTWX4tkhzxZKXp5fLJqKTlQLHkE65XDUKutZ3BHaJC5IGcper2tT3QRD1xr4o3jNpgXXg== - -commondir@^1.0.1: - version "1.0.1" - resolved "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b" - integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs= - -compare-versions@^3.6.0: - version "3.6.0" - resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.6.0.tgz#1a5689913685e5a87637b8d3ffca75514ec41d62" - integrity sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA== - -concat-map@0.0.1: - version "0.0.1" - resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" - integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s= - -console-control-strings@^1.0.0, console-control-strings@~1.1.0: - version "1.1.0" - resolved "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e" - integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4= - -core-util-is@1.0.2, core-util-is@~1.0.0: - version "1.0.2" - resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" - integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac= - -cosmiconfig@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.0.tgz#ef9b44d773959cae63ddecd122de23853b60f8d3" - integrity sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA== - dependencies: - "@types/parse-json" "^4.0.0" - import-fresh "^3.2.1" - parse-json "^5.0.0" - path-type "^4.0.0" - yaml "^1.10.0" - -cross-spawn@^3.0.0: - version "3.0.1" - resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982" - integrity sha1-ElYDfsufDF9549bvE14wdwGEuYI= - dependencies: - lru-cache "^4.0.1" - which "^1.2.9" - -cross-spawn@^6.0.5: - version "6.0.5" - resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4" - integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ== - dependencies: - nice-try "^1.0.4" - path-key "^2.0.1" - semver "^5.5.0" - shebang-command "^1.2.0" - which "^1.2.9" - -cross-spawn@^7.0.0: - version "7.0.3" - resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6" - integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w== - dependencies: - path-key "^3.1.0" - shebang-command "^2.0.0" - which "^2.0.1" - -currently-unhandled@^0.4.1: - version "0.4.1" - resolved "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea" - integrity sha1-mI3zP+qxke95mmE2nddsF635V+o= - dependencies: - array-find-index "^1.0.1" - -dashdash@^1.12.0: - version "1.14.1" - resolved "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0" - integrity sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA= - dependencies: - assert-plus "^1.0.0" - -debug@^4.2.0: - version "4.3.1" - resolved "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee" - integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ== - dependencies: - ms "2.1.2" - -decamelize@^1.1.2, decamelize@^1.2.0: - version "1.2.0" - resolved "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290" - integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA= - -dedent@^0.7.0: - version "0.7.0" - resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c" - integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw= - -deepmerge@^4.2.2: - version "4.2.2" - resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955" - integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg== - -define-properties@^1.1.3: - version "1.1.3" - resolved "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1" - integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ== - dependencies: - object-keys "^1.0.12" - -delayed-stream@~1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" - integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk= - -delegates@^1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a" - integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o= - -detect-indent@^6.0.0: - version "6.0.0" - resolved "https://registry.npmjs.org/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd" - integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA== - -ecc-jsbn@~0.1.1: - version "0.1.2" - resolved "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9" - integrity sha1-OoOpBOVDUyh4dMVkt1SThoSamMk= - dependencies: - jsbn "~0.1.0" - safer-buffer "^2.1.0" - -electron-to-chromium@^1.3.488: - version "1.3.501" - resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.501.tgz#faa17a2cb0105ee30d5e1ca87eae7d8e85dd3175" - integrity sha512-tyzuKaV2POw2mtqBBzQGNBojMZzH0MRu8bT8T/50x+hWeucyG/9pkgAATy+PcM2ySNM9+8eG2VllY9c6j4i+bg== - -email-addresses@^3.0.1: - version "3.1.0" - resolved "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz#cabf7e085cbdb63008a70319a74e6136188812fb" - integrity sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg== - -emoji-regex@^7.0.1: - version "7.0.3" - resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156" - integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA== - -emoji-regex@^8.0.0: - version "8.0.0" - resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37" - integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A== - -emojis-list@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78" - integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q== - -end-of-stream@^1.1.0: - version "1.4.4" - resolved "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0" - integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q== - dependencies: - once "^1.4.0" - -enquirer@^2.3.6: - version "2.3.6" - resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d" - integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg== - dependencies: - ansi-colors "^4.1.1" - -error-ex@^1.2.0, error-ex@^1.3.1: - version "1.3.2" - resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf" - integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g== - dependencies: - is-arrayish "^0.2.1" - -es-abstract@^1.17.0-next.1, es-abstract@^1.17.5: - version "1.17.7" - resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.7.tgz#a4de61b2f66989fc7421676c1cb9787573ace54c" - integrity sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g== - dependencies: - es-to-primitive "^1.2.1" - function-bind "^1.1.1" - has "^1.0.3" - has-symbols "^1.0.1" - is-callable "^1.2.2" - is-regex "^1.1.1" - object-inspect "^1.8.0" - object-keys "^1.1.1" - object.assign "^4.1.1" - string.prototype.trimend "^1.0.1" - string.prototype.trimstart "^1.0.1" - -es-abstract@^1.18.0-next.0: - version "1.18.0-next.1" - resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68" - integrity sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA== - dependencies: - es-to-primitive "^1.2.1" - function-bind "^1.1.1" - has "^1.0.3" - has-symbols "^1.0.1" - is-callable "^1.2.2" - is-negative-zero "^2.0.0" - is-regex "^1.1.1" - object-inspect "^1.8.0" - object-keys "^1.1.1" - object.assign "^4.1.1" - string.prototype.trimend "^1.0.1" - string.prototype.trimstart "^1.0.1" - -es-to-primitive@^1.2.1: - version "1.2.1" - resolved "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a" - integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA== - dependencies: - is-callable "^1.1.4" - is-date-object "^1.0.1" - is-symbol "^1.0.2" - -escalade@^3.0.1: - version "3.0.2" - resolved "https://registry.npmjs.org/escalade/-/escalade-3.0.2.tgz#6a580d70edb87880f22b4c91d0d56078df6962c4" - integrity sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ== - -escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5: - version "1.0.5" - resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" - integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= - -estree-walker@^0.6.1: - version "0.6.1" - resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362" - integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w== - -estree-walker@^1.0.1: - version "1.0.1" - resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700" - integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg== - -estree-walker@^2.0.1: - version "2.0.1" - resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.1.tgz#f8e030fb21cefa183b44b7ad516b747434e7a3e0" - integrity sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg== - -execa@^4.1.0: - version "4.1.0" - resolved "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz#4e5491ad1572f2f17a77d388c6c857135b22847a" - integrity sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA== - dependencies: - cross-spawn "^7.0.0" - get-stream "^5.0.0" - human-signals "^1.1.1" - is-stream "^2.0.0" - merge-stream "^2.0.0" - npm-run-path "^4.0.0" - onetime "^5.1.0" - signal-exit "^3.0.2" - strip-final-newline "^2.0.0" - -extend@~3.0.2: - version "3.0.2" - resolved "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa" - integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g== - -extsprintf@1.3.0: - version "1.3.0" - resolved "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05" - integrity sha1-lpGEQOMEGnpBT4xS48V06zw+HgU= - -extsprintf@^1.2.0: - version "1.4.0" - resolved "https://registry.npmjs.org/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f" - integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8= - -fast-deep-equal@^3.1.1: - version "3.1.3" - resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" - integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== - -fast-json-stable-stringify@^2.0.0: - version "2.1.0" - resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633" - integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw== - -figures@^3.2.0: - version "3.2.0" - resolved "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af" - integrity sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg== - dependencies: - escape-string-regexp "^1.0.5" - -filename-reserved-regex@^1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz#e61cf805f0de1c984567d0386dc5df50ee5af7e4" - integrity sha1-5hz4BfDeHJhFZ9A4bcXfUO5a9+Q= - -filenamify-url@^1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/filenamify-url/-/filenamify-url-1.0.0.tgz#b32bd81319ef5863b73078bed50f46a4f7975f50" - integrity sha1-syvYExnvWGO3MHi+1Q9GpPeXX1A= - dependencies: - filenamify "^1.0.0" - humanize-url "^1.0.0" - -filenamify@^1.0.0: - version "1.2.1" - resolved "https://registry.npmjs.org/filenamify/-/filenamify-1.2.1.tgz#a9f2ffd11c503bed300015029272378f1f1365a5" - integrity sha1-qfL/0RxQO+0wABUCknI3jx8TZaU= - dependencies: - filename-reserved-regex "^1.0.0" - strip-outer "^1.0.0" - trim-repeated "^1.0.0" - -fill-range@^7.0.1: - version "7.0.1" - resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40" - integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ== - dependencies: - to-regex-range "^5.0.1" - -find-cache-dir@^3.3.1: - version "3.3.1" - resolved "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz#89b33fad4a4670daa94f855f7fbe31d6d84fe880" - integrity sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ== - dependencies: - commondir "^1.0.1" - make-dir "^3.0.2" - pkg-dir "^4.1.0" - -find-up@^1.0.0: - version "1.1.2" - resolved "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f" - integrity sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8= - dependencies: - path-exists "^2.0.0" - pinkie-promise "^2.0.0" - -find-up@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73" - integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg== - dependencies: - locate-path "^3.0.0" - -find-up@^4.0.0: - version "4.1.0" - resolved "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19" - integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw== - dependencies: - locate-path "^5.0.0" - path-exists "^4.0.0" - -find-versions@^3.2.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/find-versions/-/find-versions-3.2.0.tgz#10297f98030a786829681690545ef659ed1d254e" - integrity sha512-P8WRou2S+oe222TOCHitLy8zj+SIsVJh52VP4lvXkaFVnOFFdoWv1H1Jjvel1aI6NCFOAaeAVm8qrI0odiLcww== - dependencies: - semver-regex "^2.0.0" - -flatpickr@4.6.1: - version "4.6.1" - resolved "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.1.tgz#9eb498ab805dd27f5ae02e1ac6ac6c099ce45e94" - integrity sha512-3ULSxbXmcMIRzer/2jLNweoqHpwDvsjEawO2FUd9UFR8uPwLM+LruZcPDpuZStcEgbQKhuFOfXo4nYdGladSNw== - -flatpickr@4.6.3: - version "4.6.3" - resolved "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.3.tgz#15a8b76b6e34e3a072861250503a5995b9d3bc60" - integrity sha512-007VucCkqNOMMb9ggRLNuJowwaJcyOh4sKAFcdGfahfGc7JQbf94zSzjdBq/wVyHWUEs5o3+idhFZ0wbZMRmVQ== - -forever-agent@~0.6.1: - version "0.6.1" - resolved "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91" - integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE= - -form-data@~2.3.2: - version "2.3.3" - resolved "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6" - integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ== - dependencies: - asynckit "^0.4.0" - combined-stream "^1.0.6" - mime-types "^2.1.12" - -fs-extra@^8.1.0: - version "8.1.0" - resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0" - integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g== - dependencies: - graceful-fs "^4.2.0" - jsonfile "^4.0.0" - universalify "^0.1.0" - -fs-extra@^9.0.1: - version "9.0.1" - resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz#910da0062437ba4c39fedd863f1675ccfefcb9fc" - integrity sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ== - dependencies: - at-least-node "^1.0.0" - graceful-fs "^4.2.0" - jsonfile "^6.0.1" - universalify "^1.0.0" - -fs.realpath@^1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" - integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8= - -fsevents@~2.1.2: - version "2.1.3" - resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e" - integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ== - -fstream@^1.0.0, fstream@^1.0.12: - version "1.0.12" - resolved "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz#4e8ba8ee2d48be4f7d0de505455548eae5932045" - integrity sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg== - dependencies: - graceful-fs "^4.1.2" - inherits "~2.0.0" - mkdirp ">=0.5 0" - rimraf "2" - -function-bind@^1.1.1: - version "1.1.1" - resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" - integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A== - -gauge@~2.7.3: - version "2.7.4" - resolved "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7" - integrity sha1-LANAXHU4w51+s3sxcCLjJfsBi/c= - dependencies: - aproba "^1.0.3" - console-control-strings "^1.0.0" - has-unicode "^2.0.0" - object-assign "^4.1.0" - signal-exit "^3.0.0" - string-width "^1.0.1" - strip-ansi "^3.0.1" - wide-align "^1.1.0" - -gaze@^1.0.0: - version "1.1.3" - resolved "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz#c441733e13b927ac8c0ff0b4c3b033f28812924a" - integrity sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g== - dependencies: - globule "^1.0.0" - -get-caller-file@^2.0.1: - version "2.0.5" - resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e" - integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg== - -get-own-enumerable-property-symbols@^3.0.0: - version "3.0.2" - resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664" - integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g== - -get-stdin@^4.0.1: - version "4.0.1" - resolved "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe" - integrity sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4= - -get-stream@^5.0.0: - version "5.2.0" - resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.2.0.tgz#4966a1795ee5ace65e706c4b7beb71257d6e22d3" - integrity sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA== - dependencies: - pump "^3.0.0" - -getpass@^0.1.1: - version "0.1.7" - resolved "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa" - integrity sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo= - dependencies: - assert-plus "^1.0.0" - -gh-pages@^3.1.0: - version "3.1.0" - resolved "https://registry.npmjs.org/gh-pages/-/gh-pages-3.1.0.tgz#ec3ed0f6a6e3fc3d888758fa018f08191c96bd55" - integrity sha512-3b1rly9kuf3/dXsT8+ZxP0UhNLOo1CItj+3e31yUVcaph/yDsJ9RzD7JOw5o5zpBTJVQLlJAASNkUfepi9fe2w== - dependencies: - async "^2.6.1" - commander "^2.18.0" - email-addresses "^3.0.1" - filenamify-url "^1.0.0" - find-cache-dir "^3.3.1" - fs-extra "^8.1.0" - globby "^6.1.0" - -glob-parent@~5.1.0: - version "5.1.1" - resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229" - integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ== - dependencies: - is-glob "^4.0.1" - -glob@^7.0.0, glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.6, glob@~7.1.1: - version "7.1.6" - resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6" - integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA== - dependencies: - fs.realpath "^1.0.0" - inflight "^1.0.4" - inherits "2" - minimatch "^3.0.4" - once "^1.3.0" - path-is-absolute "^1.0.0" - -globby@^6.1.0: - version "6.1.0" - resolved "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c" - integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw= - dependencies: - array-union "^1.0.1" - glob "^7.0.3" - object-assign "^4.0.1" - pify "^2.0.0" - pinkie-promise "^2.0.0" - -globule@^1.0.0: - version "1.3.2" - resolved "https://registry.npmjs.org/globule/-/globule-1.3.2.tgz#d8bdd9e9e4eef8f96e245999a5dee7eb5d8529c4" - integrity sha512-7IDTQTIu2xzXkT+6mlluidnWo+BypnbSoEVVQCGfzqnl5Ik8d3e1d4wycb8Rj9tWW+Z39uPWsdlquqiqPCd/pA== - dependencies: - glob "~7.1.1" - lodash "~4.17.10" - minimatch "~3.0.2" - -graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0: - version "4.2.4" - resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb" - integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw== - -har-schema@^2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92" - integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI= - -har-validator@~5.1.3: - version "5.1.3" - resolved "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz#1ef89ebd3e4996557675eed9893110dc350fa080" - integrity sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g== - dependencies: - ajv "^6.5.5" - har-schema "^2.0.0" - -has-ansi@^2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91" - integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE= - dependencies: - ansi-regex "^2.0.0" - -has-flag@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" - integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0= - -has-flag@^4.0.0: - version "4.0.0" - resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b" - integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ== - -has-symbols@^1.0.1: - version "1.0.1" - resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8" - integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg== - -has-unicode@^2.0.0: - version "2.0.1" - resolved "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9" - integrity sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk= - -has@^1.0.3: - version "1.0.3" - resolved "https://registry.npmjs.org/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796" - integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw== - dependencies: - function-bind "^1.1.1" - -hosted-git-info@^2.1.4: - version "2.8.8" - resolved "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488" - integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg== - -http-signature@~1.2.0: - version "1.2.0" - resolved "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1" - integrity sha1-muzZJRFHcvPZW2WmCruPfBj7rOE= - dependencies: - assert-plus "^1.0.0" - jsprim "^1.2.2" - sshpk "^1.7.0" - -human-signals@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3" - integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw== - -humanize-url@^1.0.0: - version "1.0.1" - resolved "https://registry.npmjs.org/humanize-url/-/humanize-url-1.0.1.tgz#f4ab99e0d288174ca4e1e50407c55fbae464efff" - integrity sha1-9KuZ4NKIF0yk4eUEB8VfuuRk7/8= - dependencies: - normalize-url "^1.0.0" - strip-url-auth "^1.0.0" - -husky@^4.3.0: - version "4.3.0" - resolved "https://registry.yarnpkg.com/husky/-/husky-4.3.0.tgz#0b2ec1d66424e9219d359e26a51c58ec5278f0de" - integrity sha512-tTMeLCLqSBqnflBZnlVDhpaIMucSGaYyX6855jM4AguGeWCeSzNdb1mfyWduTZ3pe3SJVvVWGL0jO1iKZVPfTA== - dependencies: - chalk "^4.0.0" - ci-info "^2.0.0" - compare-versions "^3.6.0" - cosmiconfig "^7.0.0" - find-versions "^3.2.0" - opencollective-postinstall "^2.0.2" - pkg-dir "^4.2.0" - please-upgrade-node "^3.2.0" - slash "^3.0.0" - which-pm-runs "^1.0.0" - -import-fresh@^3.2.1: - version "3.2.1" - resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66" - integrity sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ== - dependencies: - parent-module "^1.0.0" - resolve-from "^4.0.0" - -in-publish@^2.0.0: - version "2.0.1" - resolved "https://registry.npmjs.org/in-publish/-/in-publish-2.0.1.tgz#948b1a535c8030561cea522f73f78f4be357e00c" - integrity sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ== - -indent-string@^2.1.0: - version "2.1.0" - resolved "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80" - integrity sha1-ji1INIdCEhtKghi3oTfppSBJ3IA= - dependencies: - repeating "^2.0.0" - -indent-string@^4.0.0: - version "4.0.0" - resolved "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251" - integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg== - -inflight@^1.0.4: - version "1.0.6" - resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9" - integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk= - dependencies: - once "^1.3.0" - wrappy "1" - -inherits@2, inherits@~2.0.0, inherits@~2.0.3: - version "2.0.4" - resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c" - integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== - -is-arrayish@^0.2.1: - version "0.2.1" - resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d" - integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0= - -is-arrayish@^0.3.1: - version "0.3.2" - resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03" - integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ== - -is-binary-path@~2.1.0: - version "2.1.0" - resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09" - integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw== - dependencies: - binary-extensions "^2.0.0" - -is-callable@^1.1.4, is-callable@^1.2.2: - version "1.2.2" - resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.2.tgz#c7c6715cd22d4ddb48d3e19970223aceabb080d9" - integrity sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA== - -is-date-object@^1.0.1: - version "1.0.2" - resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e" - integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g== - -is-extglob@^2.1.1: - version "2.1.1" - resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2" - integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI= - -is-finite@^1.0.0: - version "1.1.0" - resolved "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz#904135c77fb42c0641d6aa1bcdbc4daa8da082f3" - integrity sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w== - -is-fullwidth-code-point@^1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb" - integrity sha1-754xOG8DGn8NZDr4L95QxFfvAMs= - dependencies: - number-is-nan "^1.0.0" - -is-fullwidth-code-point@^2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f" - integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8= - -is-fullwidth-code-point@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d" - integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg== - -is-glob@^4.0.1, is-glob@~4.0.1: - version "4.0.1" - resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc" - integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg== - dependencies: - is-extglob "^2.1.1" - -is-module@^1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591" - integrity sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE= - -is-negative-zero@^2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461" - integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE= - -is-number@^7.0.0: - version "7.0.0" - resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b" - integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng== - -is-obj@^1.0.1: - version "1.0.1" - resolved "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f" - integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8= - -is-plain-obj@^1.0.0: - version "1.1.0" - resolved "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e" - integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4= - -is-reference@^1.2.1: - version "1.2.1" - resolved "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz#8b2dac0b371f4bc994fdeaba9eb542d03002d0b7" - integrity sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ== - dependencies: - "@types/estree" "*" - -is-regex@^1.1.1: - version "1.1.1" - resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9" - integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg== - dependencies: - has-symbols "^1.0.1" - -is-regexp@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069" - integrity sha1-/S2INUXEa6xaYz57mgnof6LLUGk= - -is-stream@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3" - integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw== - -is-symbol@^1.0.2: - version "1.0.3" - resolved "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937" - integrity sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ== - dependencies: - has-symbols "^1.0.1" - -is-typedarray@~1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a" - integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo= - -is-utf8@^0.2.0: - version "0.2.1" - resolved "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72" - integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI= - -isarray@~1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11" - integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE= - -isexe@^2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10" - integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA= - -isstream@~0.1.2: - version "0.1.2" - resolved "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a" - integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo= - -jest-worker@^26.2.1: - version "26.3.0" - resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-26.3.0.tgz#7c8a97e4f4364b4f05ed8bca8ca0c24de091871f" - integrity sha512-Vmpn2F6IASefL+DVBhPzI2J9/GJUsqzomdeN+P+dK8/jKxbh8R3BtFnx3FIta7wYlPU62cpJMJQo4kuOowcMnw== - dependencies: - "@types/node" "*" - merge-stream "^2.0.0" - supports-color "^7.0.0" - -js-base64@^2.1.8: - version "2.6.4" - resolved "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4" - integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ== - -"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: - version "4.0.0" - resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" - integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== - -jsbn@~0.1.0: - version "0.1.1" - resolved "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513" - integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM= - -json-parse-better-errors@^1.0.1: - version "1.0.2" - resolved "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9" - integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw== - -json-schema-traverse@^0.4.1: - version "0.4.1" - resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660" - integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg== - -json-schema@0.2.3: - version "0.2.3" - resolved "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13" - integrity sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM= - -json-stringify-safe@~5.0.1: - version "5.0.1" - resolved "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb" - integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus= - -json5@^1.0.1: - version "1.0.1" - resolved "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe" - integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow== - dependencies: - minimist "^1.2.0" - -jsonfile@^4.0.0: - version "4.0.0" - resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb" - integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss= - optionalDependencies: - graceful-fs "^4.1.6" - -jsonfile@^6.0.1: - version "6.1.0" - resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae" - integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ== - dependencies: - universalify "^2.0.0" - optionalDependencies: - graceful-fs "^4.1.6" - -jsprim@^1.2.2: - version "1.4.1" - resolved "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2" - integrity sha1-MT5mvB5cwG5Di8G3SZwuXFastqI= - dependencies: - assert-plus "1.0.0" - extsprintf "1.3.0" - json-schema "0.2.3" - verror "1.10.0" - -lines-and-columns@^1.1.6: - version "1.1.6" - resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00" - integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA= - -lint-staged@^10.5.1: - version "10.5.1" - resolved "https://registry.npmjs.org/lint-staged/-/lint-staged-10.5.1.tgz#901e915c2360072dded0e7d752a0d9a49e079daa" - integrity sha512-fTkTGFtwFIJJzn/PbUO3RXyEBHIhbfYBE7+rJyLcOXabViaO/h6OslgeK6zpeUtzkDrzkgyAYDTLAwx6JzDTHw== - dependencies: - chalk "^4.1.0" - cli-truncate "^2.1.0" - commander "^6.2.0" - cosmiconfig "^7.0.0" - debug "^4.2.0" - dedent "^0.7.0" - enquirer "^2.3.6" - execa "^4.1.0" - listr2 "^3.2.2" - log-symbols "^4.0.0" - micromatch "^4.0.2" - normalize-path "^3.0.0" - please-upgrade-node "^3.2.0" - string-argv "0.3.1" - stringify-object "^3.3.0" - -listr2@^3.2.2: - version "3.2.2" - resolved "https://registry.npmjs.org/listr2/-/listr2-3.2.2.tgz#d20feb75015e506992b55af40722ba1af168b8f1" - integrity sha512-AajqcZEUikF2ioph6PfH3dIuxJclhr3i3kHgTOP0xeXdWQohrvJAAmqVcV43/GI987HFY/vzT73jYXoa4esDHg== - dependencies: - chalk "^4.1.0" - cli-truncate "^2.1.0" - figures "^3.2.0" - indent-string "^4.0.0" - log-update "^4.0.0" - p-map "^4.0.0" - rxjs "^6.6.3" - through "^2.3.8" - -load-json-file@^1.0.0: - version "1.1.0" - resolved "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0" - integrity sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA= - dependencies: - graceful-fs "^4.1.2" - parse-json "^2.2.0" - pify "^2.0.0" - pinkie-promise "^2.0.0" - strip-bom "^2.0.0" - -load-json-file@^4.0.0: - version "4.0.0" - resolved "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b" - integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs= - dependencies: - graceful-fs "^4.1.2" - parse-json "^4.0.0" - pify "^3.0.0" - strip-bom "^3.0.0" - -loader-utils@^1.1.0: - version "1.4.0" - resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613" - integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA== - dependencies: - big.js "^5.2.2" - emojis-list "^3.0.0" - json5 "^1.0.1" - -locate-path@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e" - integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A== - dependencies: - p-locate "^3.0.0" - path-exists "^3.0.0" - -locate-path@^5.0.0: - version "5.0.0" - resolved "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0" - integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g== - dependencies: - p-locate "^4.1.0" - -lodash.debounce@^4.0.8: - version "4.0.8" - resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" - integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168= - -lodash@^4.0.0, lodash@^4.17.14, lodash@~4.17.10: - version "4.17.20" - resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52" - integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA== - -lodash@^4.17.15: - version "4.17.19" - resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b" - integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ== - -log-symbols@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.0.0.tgz#69b3cc46d20f448eccdb75ea1fa733d9e821c920" - integrity sha512-FN8JBzLx6CzeMrB0tg6pqlGU1wCrXW+ZXGH481kfsBqer0hToTIiHdjH4Mq8xJUbvATujKCvaREGWpGUionraA== - dependencies: - chalk "^4.0.0" - -log-update@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/log-update/-/log-update-4.0.0.tgz#589ecd352471f2a1c0c570287543a64dfd20e0a1" - integrity sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg== - dependencies: - ansi-escapes "^4.3.0" - cli-cursor "^3.1.0" - slice-ansi "^4.0.0" - wrap-ansi "^6.2.0" - -loose-envify@^1.0.0: - version "1.4.0" - resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" - integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== - dependencies: - js-tokens "^3.0.0 || ^4.0.0" - -loud-rejection@^1.0.0: - version "1.6.0" - resolved "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f" - integrity sha1-W0b4AUft7leIcPCG0Eghz5mOVR8= - dependencies: - currently-unhandled "^0.4.1" - signal-exit "^3.0.0" - -lru-cache@^4.0.1: - version "4.1.5" - resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd" - integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g== - dependencies: - pseudomap "^1.0.2" - yallist "^2.1.2" - -magic-string@^0.25.7: - version "0.25.7" - resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051" - integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA== - dependencies: - sourcemap-codec "^1.4.4" - -make-dir@^3.0.2: - version "3.1.0" - resolved "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f" - integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw== - dependencies: - semver "^6.0.0" - -map-obj@^1.0.0, map-obj@^1.0.1: - version "1.0.1" - resolved "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d" - integrity sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0= - -memorystream@^0.3.1: - version "0.3.1" - resolved "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2" - integrity sha1-htcJCzDORV1j+64S3aUaR93K+bI= - -meow@^3.7.0: - version "3.7.0" - resolved "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb" - integrity sha1-cstmi0JSKCkKu/qFaJJYcwioAfs= - dependencies: - camelcase-keys "^2.0.0" - decamelize "^1.1.2" - loud-rejection "^1.0.0" - map-obj "^1.0.1" - minimist "^1.1.3" - normalize-package-data "^2.3.4" - object-assign "^4.0.1" - read-pkg-up "^1.0.1" - redent "^1.0.0" - trim-newlines "^1.0.0" - -merge-stream@^2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60" - integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w== - -micromatch@^4.0.2: - version "4.0.2" - resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259" - integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q== - dependencies: - braces "^3.0.1" - picomatch "^2.0.5" - -mime-db@1.44.0: - version "1.44.0" - resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz#fa11c5eb0aca1334b4233cb4d52f10c5a6272f92" - integrity sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg== - -mime-types@^2.1.12, mime-types@~2.1.19: - version "2.1.27" - resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz#47949f98e279ea53119f5722e0f34e529bec009f" - integrity sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w== - dependencies: - mime-db "1.44.0" - -mimic-fn@^2.1.0: - version "2.1.0" - resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b" - integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg== - -min-indent@^1.0.0: - version "1.0.1" - resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" - integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== - -minimatch@^3.0.4, minimatch@~3.0.2: - version "3.0.4" - resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083" - integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA== - dependencies: - brace-expansion "^1.1.7" - -minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5: - version "1.2.5" - resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" - integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== - -"mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1: - version "0.5.5" - resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def" - integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ== - dependencies: - minimist "^1.2.5" - -ms@2.1.2: - version "2.1.2" - resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" - integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== - -nan@^2.13.2: - version "2.14.1" - resolved "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01" - integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw== - -nice-try@^1.0.4: - version "1.0.5" - resolved "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366" - integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ== - -node-gyp@^3.8.0: - version "3.8.0" - resolved "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz#540304261c330e80d0d5edce253a68cb3964218c" - integrity sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA== - dependencies: - fstream "^1.0.0" - glob "^7.0.3" - graceful-fs "^4.1.2" - mkdirp "^0.5.0" - nopt "2 || 3" - npmlog "0 || 1 || 2 || 3 || 4" - osenv "0" - request "^2.87.0" - rimraf "2" - semver "~5.3.0" - tar "^2.0.0" - which "1" - -node-releases@^1.1.58: - version "1.1.59" - resolved "https://registry.npmjs.org/node-releases/-/node-releases-1.1.59.tgz#4d648330641cec704bff10f8e4fe28e453ab8e8e" - integrity sha512-H3JrdUczbdiwxN5FuJPyCHnGHIFqQ0wWxo+9j1kAXAzqNMAHlo+4I/sYYxpyK0irQ73HgdiyzD32oqQDcU2Osw== - -node-sass@^4.14.1: - version "4.14.1" - resolved "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz#99c87ec2efb7047ed638fb4c9db7f3a42e2217b5" - integrity sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g== - dependencies: - async-foreach "^0.1.3" - chalk "^1.1.1" - cross-spawn "^3.0.0" - gaze "^1.0.0" - get-stdin "^4.0.1" - glob "^7.0.3" - in-publish "^2.0.0" - lodash "^4.17.15" - meow "^3.7.0" - mkdirp "^0.5.1" - nan "^2.13.2" - node-gyp "^3.8.0" - npmlog "^4.0.0" - request "^2.88.0" - sass-graph "2.2.5" - stdout-stream "^1.4.0" - "true-case-path" "^1.0.2" - -"nopt@2 || 3": - version "3.0.6" - resolved "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9" - integrity sha1-xkZdvwirzU2zWTF/eaxopkayj/k= - dependencies: - abbrev "1" - -normalize-package-data@^2.3.2, normalize-package-data@^2.3.4: - version "2.5.0" - resolved "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8" - integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA== - dependencies: - hosted-git-info "^2.1.4" - resolve "^1.10.0" - semver "2 || 3 || 4 || 5" - validate-npm-package-license "^3.0.1" - -normalize-path@^3.0.0, normalize-path@~3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" - integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== - -normalize-range@^0.1.2: - version "0.1.2" - resolved "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942" - integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI= - -normalize-url@^1.0.0: - version "1.9.1" - resolved "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c" - integrity sha1-LMDWazHqIwNkWENuNiDYWVTGbDw= - dependencies: - object-assign "^4.0.1" - prepend-http "^1.0.0" - query-string "^4.1.0" - sort-keys "^1.0.0" - -npm-run-all@^4.1.5: - version "4.1.5" - resolved "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz#04476202a15ee0e2e214080861bff12a51d98fba" - integrity sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ== - dependencies: - ansi-styles "^3.2.1" - chalk "^2.4.1" - cross-spawn "^6.0.5" - memorystream "^0.3.1" - minimatch "^3.0.4" - pidtree "^0.3.0" - read-pkg "^3.0.0" - shell-quote "^1.6.1" - string.prototype.padend "^3.0.0" - -npm-run-path@^4.0.0: - version "4.0.1" - resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea" - integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw== - dependencies: - path-key "^3.0.0" - -"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0: - version "4.1.2" - resolved "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b" - integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg== - dependencies: - are-we-there-yet "~1.1.2" - console-control-strings "~1.1.0" - gauge "~2.7.3" - set-blocking "~2.0.0" - -num2fraction@^1.2.2: - version "1.2.2" - resolved "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede" - integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4= - -number-is-nan@^1.0.0: - version "1.0.1" - resolved "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d" - integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0= - -oauth-sign@~0.9.0: - version "0.9.0" - resolved "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455" - integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ== - -object-assign@^4.0.1, object-assign@^4.1.0: - version "4.1.1" - resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" - integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM= - -object-inspect@^1.8.0: - version "1.8.0" - resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0" - integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA== - -object-keys@^1.0.12, object-keys@^1.1.1: - version "1.1.1" - resolved "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e" - integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA== - -object.assign@^4.1.1: - version "4.1.1" - resolved "https://registry.npmjs.org/object.assign/-/object.assign-4.1.1.tgz#303867a666cdd41936ecdedfb1f8f3e32a478cdd" - integrity sha512-VT/cxmx5yaoHSOTSyrCygIDFco+RsibY2NM0a4RdEeY/4KgqezwFtK1yr3U67xYhqJSlASm2pKhLVzPj2lr4bA== - dependencies: - define-properties "^1.1.3" - es-abstract "^1.18.0-next.0" - has-symbols "^1.0.1" - object-keys "^1.1.1" - -once@^1.3.0, once@^1.3.1, once@^1.4.0: - version "1.4.0" - resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1" - integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E= - dependencies: - wrappy "1" - -onetime@^5.1.0: - version "5.1.0" - resolved "https://registry.npmjs.org/onetime/-/onetime-5.1.0.tgz#fff0f3c91617fe62bb50189636e99ac8a6df7be5" - integrity sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q== - dependencies: - mimic-fn "^2.1.0" - -opencollective-postinstall@^2.0.2: - version "2.0.3" - resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz#7a0fff978f6dbfa4d006238fbac98ed4198c3259" - integrity sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q== - -os-homedir@^1.0.0: - version "1.0.2" - resolved "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3" - integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M= - -os-tmpdir@^1.0.0: - version "1.0.2" - resolved "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274" - integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ= - -osenv@0: - version "0.1.5" - resolved "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410" - integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g== - dependencies: - os-homedir "^1.0.0" - os-tmpdir "^1.0.0" - -p-limit@^2.0.0, p-limit@^2.2.0: - version "2.3.0" - resolved "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1" - integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w== - dependencies: - p-try "^2.0.0" - -p-locate@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4" - integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ== - dependencies: - p-limit "^2.0.0" - -p-locate@^4.1.0: - version "4.1.0" - resolved "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07" - integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A== - dependencies: - p-limit "^2.2.0" - -p-map@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/p-map/-/p-map-4.0.0.tgz#bb2f95a5eda2ec168ec9274e06a747c3e2904d2b" - integrity sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ== - dependencies: - aggregate-error "^3.0.0" - -p-try@^2.0.0: - version "2.2.0" - resolved "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6" - integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ== - -parent-module@^1.0.0: - version "1.0.1" - resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2" - integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g== - dependencies: - callsites "^3.0.0" - -parse-json@^2.2.0: - version "2.2.0" - resolved "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9" - integrity sha1-9ID0BDTvgHQfhGkJn43qGPVaTck= - dependencies: - error-ex "^1.2.0" - -parse-json@^4.0.0: - version "4.0.0" - resolved "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0" - integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA= - dependencies: - error-ex "^1.3.1" - json-parse-better-errors "^1.0.1" - -parse-json@^5.0.0: - version "5.0.0" - resolved "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz#73e5114c986d143efa3712d4ea24db9a4266f60f" - integrity sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw== - dependencies: - "@babel/code-frame" "^7.0.0" - error-ex "^1.3.1" - json-parse-better-errors "^1.0.1" - lines-and-columns "^1.1.6" - -path-exists@^2.0.0: - version "2.1.0" - resolved "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b" - integrity sha1-D+tsZPD8UY2adU3V77YscCJ2H0s= - dependencies: - pinkie-promise "^2.0.0" - -path-exists@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515" - integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU= - -path-exists@^4.0.0: - version "4.0.0" - resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3" - integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w== - -path-is-absolute@^1.0.0: - version "1.0.1" - resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f" - integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18= - -path-key@^2.0.1: - version "2.0.1" - resolved "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40" - integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A= - -path-key@^3.0.0, path-key@^3.1.0: - version "3.1.1" - resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375" - integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q== - -path-parse@^1.0.6: - version "1.0.6" - resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c" - integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw== - -path-type@^1.0.0: - version "1.1.0" - resolved "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441" - integrity sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE= - dependencies: - graceful-fs "^4.1.2" - pify "^2.0.0" - pinkie-promise "^2.0.0" - -path-type@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f" - integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg== - dependencies: - pify "^3.0.0" - -path-type@^4.0.0: - version "4.0.0" - resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" - integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== - -performance-now@^2.1.0: - version "2.1.0" - resolved "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" - integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns= - -picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1, picomatch@^2.2.2: - version "2.2.2" - resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad" - integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg== - -pidtree@^0.3.0: - version "0.3.1" - resolved "https://registry.npmjs.org/pidtree/-/pidtree-0.3.1.tgz#ef09ac2cc0533df1f3250ccf2c4d366b0d12114a" - integrity sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA== - -pify@^2.0.0: - version "2.3.0" - resolved "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c" - integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw= - -pify@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176" - integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY= - -pinkie-promise@^2.0.0: - version "2.0.1" - resolved "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa" - integrity sha1-ITXW36ejWMBprJsXh3YogihFD/o= - dependencies: - pinkie "^2.0.0" - -pinkie@^2.0.0: - version "2.0.4" - resolved "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870" - integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA= - -pkg-dir@^4.1.0, pkg-dir@^4.2.0: - version "4.2.0" - resolved "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3" - integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ== - dependencies: - find-up "^4.0.0" - -please-upgrade-node@^3.2.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942" - integrity sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg== - dependencies: - semver-compare "^1.0.0" - -postcss-value-parser@^4.1.0: - version "4.1.0" - resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb" - integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ== - -postcss@^7.0.32: - version "7.0.32" - resolved "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d" - integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw== - dependencies: - chalk "^2.4.2" - source-map "^0.6.1" - supports-color "^6.1.0" - -prepend-http@^1.0.0: - version "1.0.4" - resolved "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" - integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= - -prettier-plugin-svelte@^1.4.1: - version "1.4.1" - resolved "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-1.4.1.tgz#2f0f7a149190f476dc9b4ba9da8d482bd196f1e2" - integrity sha512-6y0m37Xw01GRf/WIHau+Kp3uXj2JB1agtEmNVKb9opMy34A6OMOYhfneVpNIlrghQSw/jIV+t3e5Ngt4up2CMA== - -prettier@^2.2.0: - version "2.2.0" - resolved "https://registry.npmjs.org/prettier/-/prettier-2.2.0.tgz#8a03c7777883b29b37fb2c4348c66a78e980418b" - integrity sha512-yYerpkvseM4iKD/BXLYUkQV5aKt4tQPqaGW6EsZjzyu0r7sVZZNPJW4Y8MyKmicp6t42XUPcBVA+H6sB3gqndw== - -process-nextick-args@~2.0.0: - version "2.0.1" - resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" - integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag== - -pseudomap@^1.0.2: - version "1.0.2" - resolved "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3" - integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM= - -psl@^1.1.28: - version "1.8.0" - resolved "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24" - integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ== - -pump@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64" - integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww== - dependencies: - end-of-stream "^1.1.0" - once "^1.3.1" - -punycode@^2.1.0, punycode@^2.1.1: - version "2.1.1" - resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec" - integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A== - -qs@~6.5.2: - version "6.5.2" - resolved "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36" - integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA== - -query-string@^4.1.0: - version "4.3.4" - resolved "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb" - integrity sha1-u7aTucqRXCMlFbIosaArYJBD2+s= - dependencies: - object-assign "^4.1.0" - strict-uri-encode "^1.0.0" - -randombytes@^2.1.0: - version "2.1.0" - resolved "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a" - integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ== - dependencies: - safe-buffer "^5.1.0" - -read-pkg-up@^1.0.1: - version "1.0.1" - resolved "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02" - integrity sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI= - dependencies: - find-up "^1.0.0" - read-pkg "^1.0.0" - -read-pkg@^1.0.0: - version "1.1.0" - resolved "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28" - integrity sha1-9f+qXs0pyzHAR0vKfXVra7KePyg= - dependencies: - load-json-file "^1.0.0" - normalize-package-data "^2.3.2" - path-type "^1.0.0" - -read-pkg@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389" - integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k= - dependencies: - load-json-file "^4.0.0" - normalize-package-data "^2.3.2" - path-type "^3.0.0" - -readable-stream@^2.0.1, readable-stream@^2.0.6: - version "2.3.7" - resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57" - integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw== - dependencies: - core-util-is "~1.0.0" - inherits "~2.0.3" - isarray "~1.0.0" - process-nextick-args "~2.0.0" - safe-buffer "~5.1.1" - string_decoder "~1.1.1" - util-deprecate "~1.0.1" - -readdirp@~3.5.0: - version "3.5.0" - resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e" - integrity sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ== - dependencies: - picomatch "^2.2.1" - -redent@^1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde" - integrity sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94= - dependencies: - indent-string "^2.1.0" - strip-indent "^1.0.1" - -repeating@^2.0.0: - version "2.0.1" - resolved "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda" - integrity sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo= - dependencies: - is-finite "^1.0.0" - -request@^2.87.0, request@^2.88.0: - version "2.88.2" - resolved "https://registry.npmjs.org/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3" - integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw== - dependencies: - aws-sign2 "~0.7.0" - aws4 "^1.8.0" - caseless "~0.12.0" - combined-stream "~1.0.6" - extend "~3.0.2" - forever-agent "~0.6.1" - form-data "~2.3.2" - har-validator "~5.1.3" - http-signature "~1.2.0" - is-typedarray "~1.0.0" - isstream "~0.1.2" - json-stringify-safe "~5.0.1" - mime-types "~2.1.19" - oauth-sign "~0.9.0" - performance-now "^2.1.0" - qs "~6.5.2" - safe-buffer "^5.1.2" - tough-cookie "~2.5.0" - tunnel-agent "^0.6.0" - uuid "^3.3.2" - -require-directory@^2.1.1: - version "2.1.1" - resolved "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42" - integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I= - -require-main-filename@^2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b" - integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg== - -require-relative@^0.8.7: - version "0.8.7" - resolved "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de" - integrity sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4= - -resolve-from@^4.0.0: - version "4.0.0" - resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6" - integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g== - -resolve@^1.10.0, resolve@^1.17.0: - version "1.17.0" - resolved "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444" - integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w== - dependencies: - path-parse "^1.0.6" - -restore-cursor@^3.1.0: - version "3.1.0" - resolved "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e" - integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA== - dependencies: - onetime "^5.1.0" - signal-exit "^3.0.2" - -rimraf@2: - version "2.7.1" - resolved "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec" - integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w== - dependencies: - glob "^7.1.3" - -rollup-plugin-svelte@^6.1.1: - version "6.1.1" - resolved "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-6.1.1.tgz#66362cf0500fb7a848283ebcf19d289a60ef0871" - integrity sha512-ijnm0pH1ScrY4uxwaNXBpNVejVzpL2769hIEbAlnqNUWZrffLspu5/k9/l/Wsj3NrEHLQ6wCKGagVJonyfN7ow== - dependencies: - require-relative "^0.8.7" - rollup-pluginutils "^2.8.2" - sourcemap-codec "^1.4.8" - -rollup-plugin-terser@^7.0.2: - version "7.0.2" - resolved "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d" - integrity sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ== - dependencies: - "@babel/code-frame" "^7.10.4" - jest-worker "^26.2.1" - serialize-javascript "^4.0.0" - terser "^5.0.0" - -rollup-pluginutils@^2.8.2: - version "2.8.2" - resolved "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e" - integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ== - dependencies: - estree-walker "^0.6.1" - -rollup@^2.33.3: - version "2.33.3" - resolved "https://registry.npmjs.org/rollup/-/rollup-2.33.3.tgz#ae72ce31f992b09a580072951bfea76e9df17342" - integrity sha512-RpayhPTe4Gu/uFGCmk7Gp5Z9Qic2VsqZ040G+KZZvsZYdcuWaJg678JeDJJvJeEQXminu24a2au+y92CUWVd+w== - optionalDependencies: - fsevents "~2.1.2" - -rxjs@^6.6.3: - version "6.6.3" - resolved "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz#8ca84635c4daa900c0d3967a6ee7ac60271ee552" - integrity sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ== - dependencies: - tslib "^1.9.0" - -safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.2: - version "5.2.1" - resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6" - integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ== - -safe-buffer@~5.1.0, safe-buffer@~5.1.1: - version "5.1.2" - resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d" - integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g== - -safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0: - version "2.1.2" - resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" - integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== - -sass-graph@2.2.5: - version "2.2.5" - resolved "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz#a981c87446b8319d96dce0671e487879bd24c2e8" - integrity sha512-VFWDAHOe6mRuT4mZRd4eKE+d8Uedrk6Xnh7Sh9b4NGufQLQjOrvf/MQoOdx+0s92L89FeyUUNfU597j/3uNpag== - dependencies: - glob "^7.0.0" - lodash "^4.0.0" - scss-tokenizer "^0.2.3" - yargs "^13.3.2" - -scss-tokenizer@^0.2.3: - version "0.2.3" - resolved "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1" - integrity sha1-jrBtualyMzOCTT9VMGQRSYR85dE= - dependencies: - js-base64 "^2.1.8" - source-map "^0.4.2" - -semver-compare@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc" - integrity sha1-De4hahyUGrN+nvsXiPavxf9VN/w= - -semver-regex@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-2.0.0.tgz#a93c2c5844539a770233379107b38c7b4ac9d338" - integrity sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw== - -"semver@2 || 3 || 4 || 5", semver@^5.5.0: - version "5.7.1" - resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7" - integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ== - -semver@^6.0.0: - version "6.3.0" - resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" - integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw== - -semver@~5.3.0: - version "5.3.0" - resolved "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f" - integrity sha1-myzl094C0XxgEq0yaqa00M9U+U8= - -serialize-javascript@^4.0.0: - version "4.0.0" - resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa" - integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw== - dependencies: - randombytes "^2.1.0" - -set-blocking@^2.0.0, set-blocking@~2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7" - integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc= - -shebang-command@^1.2.0: - version "1.2.0" - resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea" - integrity sha1-RKrGW2lbAzmJaMOfNj/uXer98eo= - dependencies: - shebang-regex "^1.0.0" - -shebang-command@^2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea" - integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA== - dependencies: - shebang-regex "^3.0.0" - -shebang-regex@^1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3" - integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM= - -shebang-regex@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172" - integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A== - -shell-quote@^1.6.1: - version "1.7.2" - resolved "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2" - integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg== - -signal-exit@^3.0.0, signal-exit@^3.0.2: - version "3.0.3" - resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c" - integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA== - -simple-swizzle@^0.2.2: - version "0.2.2" - resolved "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a" - integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo= - dependencies: - is-arrayish "^0.3.1" - -slash@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634" - integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q== - -slice-ansi@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-3.0.0.tgz#31ddc10930a1b7e0b67b08c96c2f49b77a789787" - integrity sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ== - dependencies: - ansi-styles "^4.0.0" - astral-regex "^2.0.0" - is-fullwidth-code-point "^3.0.0" - -slice-ansi@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b" - integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ== - dependencies: - ansi-styles "^4.0.0" - astral-regex "^2.0.0" - is-fullwidth-code-point "^3.0.0" - -sort-keys@^1.0.0: - version "1.1.2" - resolved "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad" - integrity sha1-RBttTTRnmPG05J6JIK37oOVD+a0= - dependencies: - is-plain-obj "^1.0.0" - -source-map-support@~0.5.12: - version "0.5.19" - resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61" - integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw== - dependencies: - buffer-from "^1.0.0" - source-map "^0.6.0" - -source-map@^0.4.2: - version "0.4.4" - resolved "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b" - integrity sha1-66T12pwNyZneaAMti092FzZSA2s= - dependencies: - amdefine ">=0.0.4" - -source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1: - version "0.6.1" - resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" - integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== - -source-map@^0.7.3: - version "0.7.3" - resolved "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383" - integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ== - -sourcemap-codec@^1.4.4, sourcemap-codec@^1.4.8: - version "1.4.8" - resolved "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4" - integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA== - -spdx-correct@^3.0.0: - version "3.1.1" - resolved "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9" - integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w== - dependencies: - spdx-expression-parse "^3.0.0" - spdx-license-ids "^3.0.0" - -spdx-exceptions@^2.1.0: - version "2.3.0" - resolved "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d" - integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A== - -spdx-expression-parse@^3.0.0: - version "3.0.1" - resolved "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679" - integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q== - dependencies: - spdx-exceptions "^2.1.0" - spdx-license-ids "^3.0.0" - -spdx-license-ids@^3.0.0: - version "3.0.5" - resolved "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz#3694b5804567a458d3c8045842a6358632f62654" - integrity sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q== - -sshpk@^1.7.0: - version "1.16.1" - resolved "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877" - integrity sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg== - dependencies: - asn1 "~0.2.3" - assert-plus "^1.0.0" - bcrypt-pbkdf "^1.0.0" - dashdash "^1.12.0" - ecc-jsbn "~0.1.1" - getpass "^0.1.1" - jsbn "~0.1.0" - safer-buffer "^2.0.2" - tweetnacl "~0.14.0" - -stdout-stream@^1.4.0: - version "1.4.1" - resolved "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz#5ac174cdd5cd726104aa0c0b2bd83815d8d535de" - integrity sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA== - dependencies: - readable-stream "^2.0.1" - -strict-uri-encode@^1.0.0: - version "1.1.0" - resolved "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713" - integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM= - -string-argv@0.3.1: - version "0.3.1" - resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da" - integrity sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg== - -string-width@^1.0.1: - version "1.0.2" - resolved "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3" - integrity sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M= - dependencies: - code-point-at "^1.0.0" - is-fullwidth-code-point "^1.0.0" - strip-ansi "^3.0.0" - -"string-width@^1.0.2 || 2": - version "2.1.1" - resolved "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e" - integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw== - dependencies: - is-fullwidth-code-point "^2.0.0" - strip-ansi "^4.0.0" - -string-width@^3.0.0, string-width@^3.1.0: - version "3.1.0" - resolved "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961" - integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w== - dependencies: - emoji-regex "^7.0.1" - is-fullwidth-code-point "^2.0.0" - strip-ansi "^5.1.0" - -string-width@^4.1.0, string-width@^4.2.0: - version "4.2.0" - resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz#952182c46cc7b2c313d1596e623992bd163b72b5" - integrity sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.0" - -string.prototype.padend@^3.0.0: - version "3.1.0" - resolved "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.0.tgz#dc08f57a8010dc5c153550318f67e13adbb72ac3" - integrity sha512-3aIv8Ffdp8EZj8iLwREGpQaUZiPyrWrpzMBHvkiSW/bK/EGve9np07Vwy7IJ5waydpGXzQZu/F8Oze2/IWkBaA== - dependencies: - define-properties "^1.1.3" - es-abstract "^1.17.0-next.1" - -string.prototype.trimend@^1.0.1: - version "1.0.1" - resolved "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913" - integrity sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g== - dependencies: - define-properties "^1.1.3" - es-abstract "^1.17.5" - -string.prototype.trimstart@^1.0.1: - version "1.0.1" - resolved "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54" - integrity sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw== - dependencies: - define-properties "^1.1.3" - es-abstract "^1.17.5" - -string_decoder@~1.1.1: - version "1.1.1" - resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8" - integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg== - dependencies: - safe-buffer "~5.1.0" - -stringify-object@^3.3.0: - version "3.3.0" - resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629" - integrity sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw== - dependencies: - get-own-enumerable-property-symbols "^3.0.0" - is-obj "^1.0.1" - is-regexp "^1.0.0" - -strip-ansi@^3.0.0, strip-ansi@^3.0.1: - version "3.0.1" - resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf" - integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8= - dependencies: - ansi-regex "^2.0.0" - -strip-ansi@^4.0.0: - version "4.0.0" - resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f" - integrity sha1-qEeQIusaw2iocTibY1JixQXuNo8= - dependencies: - ansi-regex "^3.0.0" - -strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0: - version "5.2.0" - resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae" - integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA== - dependencies: - ansi-regex "^4.1.0" - -strip-ansi@^6.0.0: - version "6.0.0" - resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532" - integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w== - dependencies: - ansi-regex "^5.0.0" - -strip-bom@^2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e" - integrity sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4= - dependencies: - is-utf8 "^0.2.0" - -strip-bom@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3" - integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM= - -strip-final-newline@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad" - integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA== - -strip-indent@^1.0.1: - version "1.0.1" - resolved "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2" - integrity sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI= - dependencies: - get-stdin "^4.0.1" - -strip-indent@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001" - integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ== - dependencies: - min-indent "^1.0.0" - -strip-outer@^1.0.0: - version "1.0.1" - resolved "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz#b2fd2abf6604b9d1e6013057195df836b8a9d631" - integrity sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg== - dependencies: - escape-string-regexp "^1.0.2" - -strip-url-auth@^1.0.0: - version "1.0.1" - resolved "https://registry.npmjs.org/strip-url-auth/-/strip-url-auth-1.0.1.tgz#22b0fa3a41385b33be3f331551bbb837fa0cd7ae" - integrity sha1-IrD6OkE4WzO+PzMVUbu4N/oM164= - -supports-color@^2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" - integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc= - -supports-color@^5.3.0: - version "5.5.0" - resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" - integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== - dependencies: - has-flag "^3.0.0" - -supports-color@^6.1.0: - version "6.1.0" - resolved "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3" - integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ== - dependencies: - has-flag "^3.0.0" - -supports-color@^7.0.0, supports-color@^7.1.0: - version "7.1.0" - resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1" - integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g== - dependencies: - has-flag "^4.0.0" - -sveld@0.3.0: - version "0.3.0" - resolved "https://registry.npmjs.org/sveld/-/sveld-0.3.0.tgz#a1a8c188511a8d5674c72fd8b2987278fae0d062" - integrity sha512-aEuxRaeN11P+k0DvQ+32lEzRQNzv+dFO5qRC4wSM0p5MW9i6sxgPmnYV3xy5TSzaYXVmSI9JJRSMDd3C1ayw0w== - dependencies: - "@rollup/plugin-node-resolve" "^10.0.0" - comment-parser "^0.7.6" - fs-extra "^9.0.1" - prettier "^2.2.0" - rollup "^2.33.3" - rollup-plugin-svelte "^6.1.1" - svelte "^3.30.0" - -svelte-check@^1.1.15: - version "1.1.15" - resolved "https://registry.npmjs.org/svelte-check/-/svelte-check-1.1.15.tgz#b645f4d63d7a20587f7b9755a44eb247335b669f" - integrity sha512-3TO5xZiH/bJtlEmQoh2zwUNIF0Fy153kXB3Q/KTjVdeqmM7Ws73rMY7tiOeTub777fv83yip0PaJpgGORyL5ZA== - dependencies: - chalk "^4.0.0" - chokidar "^3.4.1" - glob "^7.1.6" - import-fresh "^3.2.1" - minimist "^1.2.5" - source-map "^0.7.3" - svelte-preprocess "^4.0.0" - typescript "*" - -svelte-dev-helper@^1.1.9: - version "1.1.9" - resolved "https://registry.npmjs.org/svelte-dev-helper/-/svelte-dev-helper-1.1.9.tgz#7d187db5c6cdbbd64d75a32f91b8998bde3273c3" - integrity sha1-fRh9tcbNu9ZNdaMvkbiZi94yc8M= - -svelte-loader@^2.13.6: - version "2.13.6" - resolved "https://registry.npmjs.org/svelte-loader/-/svelte-loader-2.13.6.tgz#3d5efd5886c2bab034606d5af0cce659da3ee555" - integrity sha512-7uf7ZQdPAl+lwb1ldUYJFY/raZRUCuaNx7lMJ+F16jrVwN1+c35C2pBMGIY0mCqdKm5sm45jqELJJLGM3UG9Pw== - dependencies: - loader-utils "^1.1.0" - svelte-dev-helper "^1.1.9" - -svelte-preprocess@^4.0.0: - version "4.5.2" - resolved "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.5.2.tgz#37976d1e0d866eb382411d486f7468d2275087e9" - integrity sha512-ClUX5NecnGBwI+nJnnBvKKy0XutCq5uHTIKe6cPhpvuOj9AAnyvef9wOZAE93yr85OKPutGCNIJa/X1TrJ7O0Q== - dependencies: - "@types/pug" "^2.0.4" - "@types/sass" "^1.16.0" - detect-indent "^6.0.0" - strip-indent "^3.0.0" - -svelte@^3.29.7: - version "3.29.7" - resolved "https://registry.npmjs.org/svelte/-/svelte-3.29.7.tgz#e254eb2d0d609ce0fd60f052d444ac4a66d90f7d" - integrity sha512-rx0g311kBODvEWUU01DFBUl3MJuJven04bvTVFUG/w0On/wuj0PajQY/QlXcJndFxG+W1s8iXKaB418tdHWc3A== - -svelte@^3.30.0: - version "3.30.0" - resolved "https://registry.npmjs.org/svelte/-/svelte-3.30.0.tgz#cbde341e96bf34f4ac73c8f14f8a014e03bfb7d6" - integrity sha512-z+hdIACb9TROGvJBQWcItMtlr4s0DBUgJss6qWrtFkOoIInkG+iAMo/FJZQFyDBQZc+dul2+TzYSi/tpTT5/Ag== - -tar@^2.0.0: - version "2.2.2" - resolved "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz#0ca8848562c7299b8b446ff6a4d60cdbb23edc40" - integrity sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA== - dependencies: - block-stream "*" - fstream "^1.0.12" - inherits "2" - -terser@^5.0.0: - version "5.3.0" - resolved "https://registry.npmjs.org/terser/-/terser-5.3.0.tgz#c481f4afecdcc182d5e2bdd2ff2dc61555161e81" - integrity sha512-XTT3D3AwxC54KywJijmY2mxZ8nJiEjBHVYzq8l9OaYuRFWeQNBwvipuzzYEP4e+/AVcd1hqG/CqgsdIRyT45Fg== - dependencies: - commander "^2.20.0" - source-map "~0.6.1" - source-map-support "~0.5.12" - -through@^2.3.8: - version "2.3.8" - resolved "https://registry.npmjs.org/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" - integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU= - -to-regex-range@^5.0.1: - version "5.0.1" - resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4" - integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ== - dependencies: - is-number "^7.0.0" - -tough-cookie@~2.5.0: - version "2.5.0" - resolved "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2" - integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g== - dependencies: - psl "^1.1.28" - punycode "^2.1.1" - -trim-newlines@^1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613" - integrity sha1-WIeWa7WCpFA6QetST301ARgVphM= - -trim-repeated@^1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz#e3646a2ea4e891312bf7eace6cfb05380bc01c21" - integrity sha1-42RqLqTokTEr9+rObPsFOAvAHCE= - dependencies: - escape-string-regexp "^1.0.2" - -"true-case-path@^1.0.2": - version "1.0.3" - resolved "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz#f813b5a8c86b40da59606722b144e3225799f47d" - integrity sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew== - dependencies: - glob "^7.1.2" - -tslib@^1.9.0: - version "1.13.0" - resolved "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043" - integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q== - -tunnel-agent@^0.6.0: - version "0.6.0" - resolved "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd" - integrity sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0= - dependencies: - safe-buffer "^5.0.1" - -tweetnacl@^0.14.3, tweetnacl@~0.14.0: - version "0.14.5" - resolved "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64" - integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q= - -type-fest@^0.11.0: - version "0.11.0" - resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz#97abf0872310fed88a5c466b25681576145e33f1" - integrity sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ== - -typescript@*: - version "4.0.5" - resolved "https://registry.npmjs.org/typescript/-/typescript-4.0.5.tgz#ae9dddfd1069f1cb5beb3ef3b2170dd7c1332389" - integrity sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ== - -typescript@^4.1.2: - version "4.1.2" - resolved "https://registry.npmjs.org/typescript/-/typescript-4.1.2.tgz#6369ef22516fe5e10304aae5a5c4862db55380e9" - integrity sha512-thGloWsGH3SOxv1SoY7QojKi0tc+8FnOmiarEGMbd/lar7QOEd3hvlx3Fp5y6FlDUGl9L+pd4n2e+oToGMmhRQ== - -universalify@^0.1.0: - version "0.1.2" - resolved "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66" - integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg== - -universalify@^1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d" - integrity sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug== - -universalify@^2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717" - integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ== - -uri-js@^4.2.2: - version "4.2.2" - resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0" - integrity sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ== - dependencies: - punycode "^2.1.0" - -util-deprecate@~1.0.1: - version "1.0.2" - resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" - integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8= - -uuid@^3.3.2: - version "3.4.0" - resolved "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee" - integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A== - -validate-npm-package-license@^3.0.1: - version "3.0.4" - resolved "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a" - integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew== - dependencies: - spdx-correct "^3.0.0" - spdx-expression-parse "^3.0.0" - -verror@1.10.0: - version "1.10.0" - resolved "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400" - integrity sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA= - dependencies: - assert-plus "^1.0.0" - core-util-is "1.0.2" - extsprintf "^1.2.0" - -warning@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c" - integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w= - dependencies: - loose-envify "^1.0.0" - -which-module@^2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a" - integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho= - -which-pm-runs@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/which-pm-runs/-/which-pm-runs-1.0.0.tgz#670b3afbc552e0b55df6b7780ca74615f23ad1cb" - integrity sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs= - -which@1, which@^1.2.9: - version "1.3.1" - resolved "https://registry.npmjs.org/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a" - integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ== - dependencies: - isexe "^2.0.0" - -which@^2.0.1: - version "2.0.2" - resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1" - integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA== - dependencies: - isexe "^2.0.0" - -wide-align@^1.1.0: - version "1.1.3" - resolved "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457" - integrity sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA== - dependencies: - string-width "^1.0.2 || 2" - -wrap-ansi@^5.1.0: - version "5.1.0" - resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09" - integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q== - dependencies: - ansi-styles "^3.2.0" - string-width "^3.0.0" - strip-ansi "^5.0.0" - -wrap-ansi@^6.2.0: - version "6.2.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53" - integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - -wrappy@1: - version "1.0.2" - resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" - integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8= - -y18n@^4.0.0: - version "4.0.0" - resolved "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b" - integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w== - -yallist@^2.1.2: - version "2.1.2" - resolved "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52" - integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI= - -yaml@^1.10.0: - version "1.10.0" - resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e" - integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg== - -yargs-parser@^13.1.2: - version "13.1.2" - resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38" - integrity sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg== - dependencies: - camelcase "^5.0.0" - decamelize "^1.2.0" - -yargs@^13.3.2: - version "13.3.2" - resolved "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd" - integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw== - dependencies: - cliui "^5.0.0" - find-up "^3.0.0" - get-caller-file "^2.0.1" - require-directory "^2.1.1" - require-main-filename "^2.0.0" - set-blocking "^2.0.0" - string-width "^3.0.0" - which-module "^2.0.0" - y18n "^4.0.0" - yargs-parser "^13.1.2"