diff --git a/.changeset/config.json b/.changeset/config.json index 249f96eccb..a5f9054fe8 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -6,7 +6,7 @@ "ignore ": [["@baloise/ds-output-target-*", "@baloise/ds-nx", "e2e", "docs"]], "linked": [], "access": "public", - "baseBranch": "main", + "baseBranch": "release/v20", "updateInternalDependencies": "patch", "ignore": [], "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": { diff --git a/.changeset/popular-dolls-sing.md b/.changeset/popular-dolls-sing.md new file mode 100644 index 0000000000..a723c0bce1 --- /dev/null +++ b/.changeset/popular-dolls-sing.md @@ -0,0 +1,37 @@ +--- +'@baloise/ds-core': major +--- + +**angular**: The design system now provides an Angular provider instead of the BaloiseDesignSystemModule. + +This change simplifies maintenance, ensures the Angular library stays up to date, and removes support for deprecated or optional Angular parts. + +The new provider is fully compatible with both Angular module-based applications and the latest Angular solutions. + +**How to migrate** + +1. In the app-module.ts replace the `BaloiseDesignSystemModule.forRoot()` with the provide function `provideBaloiseDesignSystem()`. `` is the same type as before. + +```ts +@NgModule({ + declarations: [App], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + imports: [BrowserModule, AppRoutingModule, SharedModule], + providers: [provideBrowserGlobalErrorListeners(), provideBaloiseDesignSystem()], + bootstrap: [App], +}) +export class AppModule {} +``` + +2. Remove the `BaloiseDesignSystemModule` in every other module and import the components you need instead or just all components with the bundle `BalComponentBundle`. + +```ts +@NgModule({ + imports: [BalComponentBundle], + // or component by component + // imports: [BrowserModule, AppRoutingModule, BalLayoutBundle, BalHeading, BalButton], + ... +}) +export class SharedModule {} +``` +3. Make sure only to import and use `@baloise/ds-angular`. diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 0000000000..11683bbac9 --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,28 @@ +{ + "mode": "pre", + "tag": "rc", + "initialVersions": { + "docs": "15.2.49", + "e2e": "15.2.49", + "@baloise/ds-nx": "19.8.3", + "@baloise/output-target-angular": "0.0.0", + "@baloise/output-target-web": "0.0.0", + "@baloise/ds-angular": "19.8.3", + "@baloise/ds-angular-common": "19.8.3", + "@baloise/ds-angular-module": "19.8.3", + "@baloise/ds-brand-icons": "19.8.3", + "@baloise/ds-core": "19.8.3", + "@baloise/ds-devkit": "19.8.3", + "@baloise/ds-favicons": "19.8.3", + "@baloise/ds-fonts": "19.8.3", + "@baloise/ds-icons": "19.8.3", + "@baloise/ds-maps": "19.8.3", + "@baloise/ds-playwright": "19.8.3", + "@baloise/ds-react": "19.8.3", + "@baloise/ds-styles": "19.8.3", + "@baloise/ds-table": "19.8.3", + "@baloise/ds-testing": "19.8.3", + "@baloise/ds-tokens": "19.8.3" + }, + "changesets": [] +} diff --git a/.changeset/thick-pianos-accept.md b/.changeset/thick-pianos-accept.md new file mode 100644 index 0000000000..139f32360c --- /dev/null +++ b/.changeset/thick-pianos-accept.md @@ -0,0 +1,5 @@ +--- +'@baloise/ds-core': patch +--- + +**core**: improve slot handling diff --git a/.eslintignore b/.eslintignore index 5ce737ed70..f7ee863db6 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,6 +1,7 @@ node_modules dist test +playwright-report packages/icons/src/index.ts packages/core/icons diff --git a/.github/workflows/actions/build/action.yml b/.github/workflows/actions/build/action.yml index 6100f2c77f..23c9ac65e4 100644 --- a/.github/workflows/actions/build/action.yml +++ b/.github/workflows/actions/build/action.yml @@ -104,13 +104,6 @@ runs: output: packages/angular/src/Angular.zip paths: packages/angular/src/generated - - uses: ./.github/workflows/actions/upload-archive - if: inputs.build == 'true' - with: - name: angular-module - output: packages/angular-module/src/AngularModule.zip - paths: packages/angular-module/src/generated - - uses: ./.github/workflows/actions/upload-archive if: inputs.build == 'true' with: diff --git a/.github/workflows/actions/framework-setup/action.yml b/.github/workflows/actions/framework-setup/action.yml index 9997d68624..f832efeee5 100644 --- a/.github/workflows/actions/framework-setup/action.yml +++ b/.github/workflows/actions/framework-setup/action.yml @@ -58,12 +58,6 @@ runs: path: ./packages/angular/src filename: Angular.zip - - uses: ./.github/workflows/actions/download-archive - with: - name: angular-module - path: ./packages/angular-module/src - filename: AngularModule.zip - - uses: ./.github/workflows/actions/download-archive with: name: testing-dist diff --git a/.github/workflows/continuous.yml b/.github/workflows/continuous.yml index 1a8c95afdb..92eb608023 100644 --- a/.github/workflows/continuous.yml +++ b/.github/workflows/continuous.yml @@ -69,7 +69,7 @@ jobs: strategy: fail-fast: false matrix: - apps: [v18, v19, v20] + apps: [v19, v20, v21] needs: [build] steps: - uses: actions/checkout@v4 @@ -155,7 +155,7 @@ jobs: HUSKY: 0 CI: 1 container: - image: mcr.microsoft.com/playwright:v1.50.1-noble + image: mcr.microsoft.com/playwright:v1.56.1-noble options: --user 1001 strategy: fail-fast: false diff --git a/.github/workflows/pr-comment.yml b/.github/workflows/pr-comment.yml index a463beb28c..d47763c126 100644 --- a/.github/workflows/pr-comment.yml +++ b/.github/workflows/pr-comment.yml @@ -200,7 +200,7 @@ jobs: HUSKY: 0 CI: true container: - image: mcr.microsoft.com/playwright:v1.50.1-noble + image: mcr.microsoft.com/playwright:v1.56.1-noble options: --user 1001 steps: - name: Show inputs from pree job diff --git a/.github/workflows/update-shapshots.yml b/.github/workflows/update-shapshots.yml index 30bf6cf99e..901a01c107 100644 --- a/.github/workflows/update-shapshots.yml +++ b/.github/workflows/update-shapshots.yml @@ -12,7 +12,7 @@ jobs: HUSKY: 0 CI: true container: - image: mcr.microsoft.com/playwright:v1.50.1-noble + image: mcr.microsoft.com/playwright:v1.56.1-noble options: --user 1001 steps: - uses: actions/checkout@v4 diff --git a/.github/workflows/visual-base.yml b/.github/workflows/visual-base.yml index 3babc14003..0cab822a16 100644 --- a/.github/workflows/visual-base.yml +++ b/.github/workflows/visual-base.yml @@ -4,45 +4,86 @@ on: workflow_dispatch: jobs: - main: - name: ๐Ÿ“ธ Updating Screenshots - runs-on: ubuntu-latest + assembleInformation: + name: ๐Ÿ“ Assemble Information + runs-on: ubuntu-22.04 + timeout-minutes: 30 env: HUSKY: 0 + CI: true + outputs: + action: ${{ steps.action.outputs.url }} + branch: ${{ steps.branch.outputs.branch }} steps: + - name: Get Action URL + id: action + run: | + echo "url=https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}" >> $GITHUB_OUTPUT + + - name: Get Branch Name + id: branch + # Determine branch reliably from the event payload. + # - For pull_request events use github.head_ref (the source branch name) + # - For push events parse GITHUB_REF (refs/heads/) + run: | + if [ "${{ github.event_name }}" = "pull_request" ]; then + echo "branch=${{ github.head_ref }}" >> $GITHUB_OUTPUT + else + # strip refs/heads/ prefix + BRANCH_NAME=${GITHUB_REF#refs/heads/} + echo "branch=$BRANCH_NAME" >> $GITHUB_OUTPUT + fi + + playwright: + name: ๐ŸŽญ Playwright + runs-on: ubuntu-22.04 + timeout-minutes: 30 + needs: [assembleInformation] + env: + HUSKY: 0 + CI: 1 + container: + image: mcr.microsoft.com/playwright:v1.56.1-noble + options: --user 1001 + steps: + - name: Show inputs from previous job + run: | + echo "Branch from previous job: ${{ needs.assembleInformation.outputs.branch }}" + echo "Action: ${{ needs.assembleInformation.outputs.action }}" + - uses: actions/checkout@v4 with: + ref: ${{ needs.assembleInformation.outputs.branch }} token: ${{ secrets.PRE_RELEASE_GITHUB_TOKEN }} fetch-depth: 0 - - uses: ./.github/workflows/actions/e2e-build - with: - build: true - token: ${{ secrets.GITHUB_TOKEN }} - - name: Run Cypress - uses: cypress-io/github-action@v6 - with: - start: node ./web-server.js - wait-on: 'http://localhost:3333' - working-directory: e2e - install: false - browser: chrome - spec: | - cypress/e2e/visual/*.cy.ts + - uses: ./.github/workflows/actions/setup + + - name: Clean Install + run: npm ci + + - name: Build Core + run: npx nx run core:build env: - CYPRESS_visualRegressionType: base - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + BAL_PLAYWRIGHT_TESTING: 'true' - - name: Upload snapshots - if: failure() - uses: actions/upload-artifact@v4 - with: - name: cypress-snapshots - path: e2e/cypress/snapshots + - name: Run Playwright tests + run: npx nx run core:ci-e2e -- --update-snapshots + env: + BAL_PLAYWRIGHT_TESTING: 'true' - - name: Commit base images + - name: Commit snapshots + if: always() uses: EndBug/add-and-commit@v9 with: - message: 'update base images' + message: 'update snapshots' env: GITHUB_TOKEN: ${{ secrets.PRE_RELEASE_GITHUB_TOKEN }} + + - name: Upload Playwright HTML report + if: always() + uses: actions/upload-artifact@v4 + with: + name: playwright-report-shard-${{ matrix.shardIndex }} + path: packages/core/playwright-report + retention-days: 7 diff --git a/.gitignore b/.gitignore index 4e15724730..310a1b1660 100644 --- a/.gitignore +++ b/.gitignore @@ -84,11 +84,12 @@ e2e/cypress/snapshots/diff e2e/cypress/snapshots/report.html e2e/cypress/downloads -resources/data -!resources/data/tags.json +resources/data/commands.json +resources/data/contributors.json +resources/data/selectors.json -docs/stories/contributing/contributors.md -docs/stories/development/00-guides/theming/theming.md +docs/src/contributing/contributors.md +docs/src/development/00-guides/theming/theming.md docs/public/assets/fonts/ docs/public/assets/data/ docs/public/assets/download/ @@ -99,9 +100,12 @@ docs/public/build/ docs/public/assets/images/map-markers docs/public/assets/images/brand-icons docs/public/assets/images/icons -docs/stories/assets/data -docs/stories/components/**/api.md +docs/src/assets/data +docs/src/components/**/api.md +docs/src/components/**/theming.md +docs/src/components/**/testing.md docs/dist +docs.old/ test/angular/* !test/angular/base @@ -119,8 +123,6 @@ test/react/* packages/brand-icons/CHANGELOG.md packages/devkit/CHANGELOG.md -packages/angular-common/CHANGELOG.md -packages/angular-module/CHANGELOG.md packages/angular/CHANGELOG.md packages/react/CHANGELOG.md packages/table/CHANGELOG.md @@ -141,8 +143,6 @@ e2e/CHANGELOG.md packages/core/README.md packages/brand-icons/README.md packages/devkit/README.md -packages/angular-common/README.md -packages/angular-module/README.md packages/angular/README.md packages/react/README.md packages/table/README.md @@ -163,8 +163,6 @@ e2e/README.md packages/core/LICENSE packages/brand-icons/LICENSE packages/devkit/LICENSE -packages/angular-common/LICENSE -packages/angular-module/LICENSE packages/angular/LICENSE packages/react/LICENSE packages/table/LICENSE @@ -189,3 +187,5 @@ vitest.config.*.timestamp* *-darwin.png test-results playwright.visual.config.ts +.cursor/rules/nx-rules.mdc +.github/instructions/nx.instructions.md diff --git a/.prettierignore b/.prettierignore index d38ef56973..df63bad395 100644 --- a/.prettierignore +++ b/.prettierignore @@ -25,10 +25,10 @@ CHANGELOG_v12.md generated docs/public -docs/stories/assets -docs/stories/components/**/api.md -docs/stories/components/**/testing.md -docs/stories/components/**/theming.md +docs/src/assets +docs/src/components/**/api.md +docs/src/components/**/testing.md +docs/src/components/**/theming.md e2e/cypress/snapshots e2e/cypress/videos @@ -36,5 +36,7 @@ e2e/cypress/downloads package-lock.json *.svg +*.mdx +resources/data/components.json /.nx/workspace-data diff --git a/.stylelintignore b/.stylelintignore new file mode 100644 index 0000000000..aded06dcc5 --- /dev/null +++ b/.stylelintignore @@ -0,0 +1,5 @@ +packages/fonts/ +styles/ +docs/ +test/ +e2e/ diff --git a/.verdaccio/config.yml b/.verdaccio/config.yml deleted file mode 100644 index a007fe8242..0000000000 --- a/.verdaccio/config.yml +++ /dev/null @@ -1,28 +0,0 @@ -# path to a directory with all packages -storage: ../tmp/local-registry/storage - -# a list of other known repositories we can talk to -uplinks: - npmjs: - url: https://registry.npmjs.org/ - maxage: 60m - -packages: - '**': - # give all users (including non-authenticated users) full access - # because it is a local registry - access: $all - publish: $all - unpublish: $all - - # if package is not available locally, proxy requests to npm registry - proxy: npmjs - -# log settings -logs: - type: stdout - format: pretty - level: warn - -publish: - allow_offline: true # set offline to true to allow publish offline diff --git a/.vscode/extensions.json b/.vscode/extensions.json index b06bf3feac..dadd80bb72 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,8 +1,3 @@ { - "recommendations": [ - "nrwl.angular-console", - "esbenp.prettier-vscode", - "firsttris.vscode-jest-runner", - "ms-playwright.playwright" - ] + "recommendations": ["nrwl.angular-console", "esbenp.prettier-vscode", "ms-playwright.playwright"] } diff --git a/CHANGELOG.md b/CHANGELOG.md index 9dd034da59..cdef49a7da 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -731,9 +731,7 @@ | Old Package Name | | New Package Name | | :----------------------------------------------------- | :---: | :--------------------------- | | `@baloise/design-system-components` | **โ†’** | `@baloise/ds-core` | - | `@baloise/design-system-components-angular` | **โ†’** | `@baloise/ds-angular-module` | | `@baloise/design-system-components-angular/standalone` | **โ†’** | `@baloise/ds-angular` | - | `@baloise/design-system-components-angular/legacy` | **โ†’** | `@baloise/ds-angular-legacy` | | `@baloise/design-system-components-react` | **โ†’** | `@baloise/ds-react` | | `@baloise/design-system-components-table` | **โ†’** | `@baloise/ds-table` | | `@baloise/design-system-cli` | **โ†’** | `@baloise/ds-devkit` | diff --git a/cspell.json b/cspell.json index 0899521c9e..ce13620788 100644 --- a/cspell.json +++ b/cspell.json @@ -4,18 +4,23 @@ "language": "en", "dictionaries": ["en_us", "softwareTerms", "lorem-ipsum", "typescript", "css", "html"], "useGitignore": true, - "files": ["docs/stories/**/*.{md,mdx}", "packages/core/src/**/*.{tsx,ts}"], + "files": ["docs/src/**/*.{md,mdx}", "packages/core/src/**/*.{tsx,ts}"], "ignorePaths": [ "packages/core/src/**/*.i18n.ts", "packages/core/src/**/*.data.ts", "packages/core/src/**/*.spec.ts", - "docs/stories/components/bal-select/code-sandbox/*", "docs/public/*", "docs/assets/*" ], "words": [ + "Impressum", + "Rechtliche", "Stammnummer", - "Swiper", + "Hinweise", + "Datenschutz", + "Fidleg", + "Gruppe", + "stratch", "swiper", "fhlyaiq", "adipiscing", @@ -37,7 +42,6 @@ "Chainable", "Chiudere", "clastzoo", - "codesandbox", "colorify", "Combi", "commitlint", diff --git a/docs/.eslintignore b/docs/.eslintignore index db71d219c9..fc325934e7 100644 --- a/docs/.eslintignore +++ b/docs/.eslintignore @@ -1,4 +1,4 @@ node_modules dist public -stories/assets +src/assets diff --git a/docs/.eslintrc.json b/docs/.eslintrc.json index 2bb009a8bb..56e8232c5b 100644 --- a/docs/.eslintrc.json +++ b/docs/.eslintrc.json @@ -23,6 +23,7 @@ "@baloise/ds-brand-icons", "@baloise/ds-icons", "@baloise/ds-tokens", + "react", "react-dom", "js-beautify", "storybook", @@ -34,8 +35,7 @@ "@storybook/components", "@storybook/theming", "@storybook/addon-docs", - "@storybook/global", - "codesandbox" + "@storybook/global" ] } ] diff --git a/docs/.gitignore b/docs/.gitignore new file mode 100644 index 0000000000..f52343a92d --- /dev/null +++ b/docs/.gitignore @@ -0,0 +1,27 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +*storybook.log +storybook-static diff --git a/docs/.storybook/addons/cookie.addon.ts b/docs/.storybook/addons/cookie.addon.ts new file mode 100644 index 0000000000..6c83efd3e6 --- /dev/null +++ b/docs/.storybook/addons/cookie.addon.ts @@ -0,0 +1,46 @@ +const LOCAL_KEY = 'BaloiseDesignSystemCookieAccepted' + +const rIC = (callback: () => void) => { + if ('requestIdleCallback' in window) { + window.requestIdleCallback(callback) + } else { + setTimeout(callback, 32) + } +} + +const showCookieAlert = () => { + const cookie = document.createElement('div') + cookie.classList.add('my-cookie') + + const cookieBody = document.createElement('div') + cookieBody.innerHTML = ` + Cookie + + We are using cookies to provide you with the best possible user experience and to be + able to advise you in an optimal way. Further details can be found in ourData Privacy Statement. + + ` + + const cookieOk = document.createElement('button') + cookieOk.innerText = 'Ok, Got it' + cookieOk.addEventListener('click', () => { + localStorage.setItem(LOCAL_KEY, JSON.stringify(true)) + cookie.remove() + }) + + cookie.appendChild(cookieBody) + cookie.appendChild(cookieOk) + + document.body.appendChild(cookie) +} + +// addons.register('my/cookie', api => { +export const registerCookie = () => { + rIC(() => { + const hasAccepted = JSON.parse(localStorage.getItem(LOCAL_KEY) || 'false') + + if (!hasAccepted) { + showCookieAlert() + } + }) +} diff --git a/docs/.storybook/addons/cookie/index.js b/docs/.storybook/addons/cookie/index.js deleted file mode 100644 index 0859826da4..0000000000 --- a/docs/.storybook/addons/cookie/index.js +++ /dev/null @@ -1,5 +0,0 @@ -function managerEntries(entry = []) { - return [...entry, require.resolve('./register')] //๐Ÿ‘ˆ Addon implementation -} - -module.exports = { managerEntries } diff --git a/docs/.storybook/addons/cookie/register.js b/docs/.storybook/addons/cookie/register.js deleted file mode 100644 index 1cc8e858a7..0000000000 --- a/docs/.storybook/addons/cookie/register.js +++ /dev/null @@ -1,47 +0,0 @@ -import { addons } from '@storybook/addons' - -const LOCAL_KEY = 'BaloiseDesignSystemCookieAccepted' - -const rIC = callback => { - if ('requestIdleCallback' in window) { - window.requestIdleCallback(callback) - } else { - setTimeout(callback, 32) - } -} - -const showCookieAlert = () => { - const cookie = document.createElement('div') - cookie.classList.add('my-cookie') - - const cookieBody = document.createElement('div') - cookieBody.innerHTML = ` - Cookie - - We are using cookies to provide you with the best possible user experience and to be - able to advise you in an optimal way. Further details can be found in ourData Privacy Statement. - - ` - - const cookieOk = document.createElement('button') - cookieOk.innerText = 'Ok, Got it' - cookieOk.addEventListener('click', () => { - localStorage.setItem(LOCAL_KEY, JSON.stringify(true)) - cookie.remove() - }) - - cookie.appendChild(cookieBody) - cookie.appendChild(cookieOk) - - document.body.appendChild(cookie) -} - -addons.register('my/cookie', api => { - rIC(() => { - const hasAccepted = JSON.parse(localStorage.getItem(LOCAL_KEY)) - - if (!hasAccepted) { - showCookieAlert() - } - }) -}) diff --git a/docs/.storybook/addons/framework.addon.tsx b/docs/.storybook/addons/framework.addon.tsx new file mode 100644 index 0000000000..1ad3197a96 --- /dev/null +++ b/docs/.storybook/addons/framework.addon.tsx @@ -0,0 +1,158 @@ +import React, { useState } from 'react' +import { WithTooltip } from 'storybook/internal/components' +import { FORCE_RE_RENDER } from 'storybook/internal/core-events' +import { addons, useGlobals } from 'storybook/manager-api' + +const AngularSVG = ` + + + + + + + +` +const ReactSVG = ` + React Logo + + + + + + +` + +const JavaScriptSVG = ` + + +` + +const SvgIcons = { + angular: AngularSVG, + react: ReactSVG, + html: JavaScriptSVG, +} as any + +const labels = { + angular: 'Angular', + html: 'HTML & JS', + react: 'React', +} as any + +const frameworks = ['angular', 'html', 'react'] + +const LOCAL_STORE_ID = 'bal-docs-framework' + +const usePersisted = (initialValue: string) => { + const [storedValue, setStoredValue] = useState(() => { + try { + const item = window.localStorage.getItem(LOCAL_STORE_ID) + const storedFramework = item ? JSON.parse(item) : initialValue + return frameworks.includes(storedFramework) ? storedFramework : undefined + } catch (error) { + return initialValue + } + }) + + const setValue = (value: string) => { + const newFramework = frameworks.includes(value) ? value : 'angular' + setStoredValue(newFramework) + window.localStorage.setItem(LOCAL_STORE_ID, JSON.stringify(newFramework)) + } + + return [storedValue, setValue] +} + +export const registerFramework = (): React.FC => { + const [persistedFramework, updatePersisted] = usePersisted('angular') + const [globals, updateGlobals] = useGlobals() + let { framework } = globals + + const urlSearchParams = new URLSearchParams(window.location.search) + const params = Object.fromEntries(urlSearchParams.entries()) + let paramFramework = params.globals?.replace('framework:', '') + + paramFramework = frameworks.includes(paramFramework) ? paramFramework : '' + + React.useEffect(() => { + if (!paramFramework && framework !== persistedFramework) { + updateGlobals({ ...globals, framework: persistedFramework }) + addons.getChannel().emit(FORCE_RE_RENDER) + } + }, [framework, persistedFramework]) + + const iframe = document.getElementById('storybook-preview-iframe') as HTMLIFrameElement + if (iframe && framework) { + const iframeDocument = iframe.contentDocument || iframe.contentWindow?.document + if (iframeDocument) { + const body = iframeDocument.querySelector('body') + if (body) { + body.classList.add(`my-framework-${framework}`) + } + } + } + + return ( +
+ { + const handleItemClick = value => { + framework = value + updatePersisted(framework) + updateGlobals({ ...globals, framework }) + onHide() + } + + const isActive = f => (f === framework ? ` my-framework__tooltip__item--active` : '') + + return ( + + ) + }} + > + + +
+ ) +} diff --git a/docs/.storybook/addons/framework/index.js b/docs/.storybook/addons/framework/index.js deleted file mode 100644 index 0859826da4..0000000000 --- a/docs/.storybook/addons/framework/index.js +++ /dev/null @@ -1,5 +0,0 @@ -function managerEntries(entry = []) { - return [...entry, require.resolve('./register')] //๐Ÿ‘ˆ Addon implementation -} - -module.exports = { managerEntries } diff --git a/docs/.storybook/addons/framework/register.js b/docs/.storybook/addons/framework/register.js deleted file mode 100644 index d2d9cca248..0000000000 --- a/docs/.storybook/addons/framework/register.js +++ /dev/null @@ -1,168 +0,0 @@ -import React, { useState } from 'react' -import { useGlobals } from '@storybook/api' -import { addons, types } from '@storybook/addons' -import { FORCE_RE_RENDER } from '@storybook/core-events' -import { WithTooltip } from '@storybook/components' - -const AngularSVG = ` - - - - - - - -` -const ReactSVG = ` - React Logo - - - - - - -` - -const JavaScriptSVG = ` - - -` - -const SvgIcons = { - angular: AngularSVG, - react: ReactSVG, - html: JavaScriptSVG, -} - -const labels = { - angular: 'Angular', - html: 'HTML & JS', - react: 'React', -} - -const frameworks = ['angular', 'html', 'react'] - -const LOCAL_STORE_ID = 'bal-docs-framework' - -const usePersisted = initialValue => { - const [storedValue, setStoredValue] = useState(() => { - try { - const item = window.localStorage.getItem(LOCAL_STORE_ID) - const storedFramework = item ? JSON.parse(item) : initialValue - return frameworks.includes(storedFramework) ? storedFramework : undefined - } catch (error) { - return initialValue - } - }) - - const setValue = value => { - const newFramework = frameworks.includes(value) ? value : 'angular' - setStoredValue(newFramework) - window.localStorage.setItem(LOCAL_STORE_ID, JSON.stringify(newFramework)) - } - - return [storedValue, setValue] -} - -addons.register('my/framework', () => { - addons.add('my-framework-addon/toolbar', { - title: 'Framework', - type: types.TOOLEXTRA, - render: () => { - const [persistedFramework, updatePersisted] = usePersisted('angular') - const [globals, updateGlobals] = useGlobals() - let { framework } = globals - - const urlSearchParams = new URLSearchParams(window.location.search) - const params = Object.fromEntries(urlSearchParams.entries()) - let paramFramework = params.globals?.replace('framework:', '') - - paramFramework = frameworks.includes(paramFramework) ? paramFramework : undefined - - React.useEffect(() => { - if (!paramFramework && framework !== persistedFramework) { - updateGlobals({ ...globals, framework: persistedFramework }) - addons.getChannel().emit(FORCE_RE_RENDER) - } - }, [framework, persistedFramework]) - - const iframe = document.getElementById('storybook-preview-iframe') - if (iframe && framework) { - const iframeDocument = iframe.contentDocument || iframe.contentWindow.document - if (iframeDocument) { - const body = iframeDocument.querySelector('body') - if (body) { - body.classList.add(`my-framework-${framework}`) - } - } - } - - return ( -
- { - const handleItemClick = value => { - framework = value - updatePersisted(framework) - updateGlobals({ ...globals, framework }) - onHide() - } - - const isActive = f => (f === framework ? ` my-framework__tooltip__item--active` : '') - - return ( - - ) - }} - > - - -
- ) - }, - }) -}) diff --git a/docs/.storybook/addons/source-panel.addon.tsx b/docs/.storybook/addons/source-panel.addon.tsx new file mode 100644 index 0000000000..7d0c2bf326 --- /dev/null +++ b/docs/.storybook/addons/source-panel.addon.tsx @@ -0,0 +1,34 @@ +import React from 'react' +import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' +import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism' +import { AddonPanel } from 'storybook/internal/components' +import { useParameter } from 'storybook/manager-api' + +type PanelProps = { + active: boolean + key: string +} + +export const SourcePanel: React.FC = props => { + const value = useParameter('mySource', null) + + if (!value) { + return ( + +
+

No source code available

+
+ + ) + } + + return ( + +
+ + {value} + +
+ + ) +} diff --git a/docs/.storybook/addons/source/index.js b/docs/.storybook/addons/source/index.js deleted file mode 100644 index 0859826da4..0000000000 --- a/docs/.storybook/addons/source/index.js +++ /dev/null @@ -1,5 +0,0 @@ -function managerEntries(entry = []) { - return [...entry, require.resolve('./register')] //๐Ÿ‘ˆ Addon implementation -} - -module.exports = { managerEntries } diff --git a/docs/.storybook/addons/source/register.js b/docs/.storybook/addons/source/register.js deleted file mode 100644 index 58cd5b69e3..0000000000 --- a/docs/.storybook/addons/source/register.js +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react' - -import { addons, types } from '@storybook/addons' -import { useParameter } from '@storybook/api' -import { AddonPanel } from '@storybook/components' - -import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' -import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism' - -const PARAM_KEY = 'mySource' -const ADDON_ID = 'mysource' -const PANEL_ID = `${ADDON_ID}/panel` - -export const Panel = props => { - const value = useParameter(PARAM_KEY, null) - - if (!value) { - return ( - -
-

No source code available

-
- - ) - } - - return ( - -
- - {value} - -
- - ) -} - -addons.register(ADDON_ID, () => { - addons.add(PANEL_ID, { - type: types.PANEL, - title: 'Source', - render: Panel, - }) -}) diff --git a/docs/.storybook/addons/title/index.js b/docs/.storybook/addons/title/index.js deleted file mode 100644 index 0859826da4..0000000000 --- a/docs/.storybook/addons/title/index.js +++ /dev/null @@ -1,5 +0,0 @@ -function managerEntries(entry = []) { - return [...entry, require.resolve('./register')] //๐Ÿ‘ˆ Addon implementation -} - -module.exports = { managerEntries } diff --git a/docs/.storybook/addons/title/register.js b/docs/.storybook/addons/title/register.js deleted file mode 100644 index 195074e643..0000000000 --- a/docs/.storybook/addons/title/register.js +++ /dev/null @@ -1,37 +0,0 @@ -import { addons } from '@storybook/addons' -import { STORY_RENDERED, DOCS_RENDERED, STORY_PREPARED, DOCS_PREPARED } from '@storybook/core-events' - -addons.register('my/title', api => { - api.on(STORY_PREPARED, story => { - const storyData = api.getCurrentStoryData() - if (storyData) { - document.title = `${storyData.title.split('/').pop()} โ€ข Baloise Design System` - } - }) - api.on(STORY_RENDERED, story => { - const storyData = api.getCurrentStoryData() - if (storyData) { - document.title = `${storyData.title.split('/').pop()} โ€ข Baloise Design System` - } - }) - api.on(DOCS_PREPARED, story => { - const storyData = api.getCurrentStoryData() - if (storyData) { - if (storyData.title === 'Welcome' || storyData.title === 'Design System') { - document.title = `Baloise Design System` - } else { - document.title = `${storyData.title.split('/').pop()} โ€ข Baloise Design System` - } - } - }) - api.on(DOCS_RENDERED, story => { - const storyData = api.getCurrentStoryData() - if (storyData) { - if (storyData.title === 'Welcome' || storyData.title === 'Design System') { - document.title = `Baloise Design System` - } else { - document.title = `${storyData.title.split('/').pop()} โ€ข Baloise Design System` - } - } - }) -}) diff --git a/docs/.storybook/addons/version.addon.tsx b/docs/.storybook/addons/version.addon.tsx new file mode 100644 index 0000000000..0b4b8327f8 --- /dev/null +++ b/docs/.storybook/addons/version.addon.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import { IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components' +import { version } from '../../../packages/core/package.json' + +const links = [ + { id: 'v15', title: 'v15', href: 'https://baloise-design-system-v15.vercel.app' }, + { id: 'v16', title: 'v16', href: 'https://baloise-design-system-v16.vercel.app' }, + { id: 'v17', title: 'v17', href: 'https://baloise-design-system-v17.vercel.app' }, + { id: 'v18', title: 'v18', href: 'https://baloise-design-system-v18.vercel.app' }, +] + +export const registerVersion: React.FC = () => { + return ( + ( + ({ + id: link.id, + title: link.title, + href: link.href, + target: '_blank', + }))} + /> + )} + > + + Version: {version} + + + ) +} diff --git a/docs/.storybook/addons/version/index.js b/docs/.storybook/addons/version/index.js deleted file mode 100644 index 0859826da4..0000000000 --- a/docs/.storybook/addons/version/index.js +++ /dev/null @@ -1,5 +0,0 @@ -function managerEntries(entry = []) { - return [...entry, require.resolve('./register')] //๐Ÿ‘ˆ Addon implementation -} - -module.exports = { managerEntries } diff --git a/docs/.storybook/addons/version/register.js b/docs/.storybook/addons/version/register.js deleted file mode 100644 index 3bbf5175ef..0000000000 --- a/docs/.storybook/addons/version/register.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react' - -import { addons, types } from '@storybook/addons' -import { IconButton, TooltipLinkList, WithTooltip } from '@storybook/components' -import { version } from '../../../../packages/core/package.json' - -const links = [ - { id: 'v15', title: 'v15', href: 'https://baloise-design-system-v15.vercel.app' }, - { id: 'v16', title: 'v16', href: 'https://baloise-design-system-v16.vercel.app' }, - { id: 'v17', title: 'v17', href: 'https://baloise-design-system-v17.vercel.app' }, - { id: 'v18', title: 'v18', href: 'https://baloise-design-system-v18.vercel.app' }, -] - -addons.register('my/toolbar', () => { - addons.add('my-toolbar-addon/toolbar', { - title: 'Version badge', - type: types.TOOLEXTRA, - render: ({ active }) => { - return ( - ( - ({ - id: link.id, - title: link.title, - href: link.href, - target: '_blank', - }))} - /> - )} - > - - Version: {version} - - - ) - }, - }) -}) diff --git a/docs/.storybook/bal.theme.js b/docs/.storybook/bal.theme.js deleted file mode 100644 index 93beca76e4..0000000000 --- a/docs/.storybook/bal.theme.js +++ /dev/null @@ -1,36 +0,0 @@ -import { create, themes } from '@storybook/theming' -import Logo from '../stories/assets/images/storybook.svg' - -export default create({ - ...themes.light, - base: 'light', - brandTitle: 'Baloise Design System', - brandUrl: 'https://github.com/baloise/design-system', - brandImage: Logo, - - fontBase: 'BaloiseCreateText, "Open Sans", Arial, sans-serif', - fontCode: 'monospace', - - colorPrimary: '#000d6e', - colorSecondary: '#d9304c', - - appBg: '#fafafa', - appContentBg: '#ffffff', - appBorderColor: '#e8e8e8', - appBorderRadius: 12, - - barBg: '#ffffff', - barTextColor: '#000d6e', - barSelectedColor: '#000d6e', - - inputBg: '#ffffff', - inputBorder: '#e8e8e8', - inputTextColor: '#000d6e', - inputBorderRadius: 4, - - textColor: '#000d6e', - textInverseColor: '#ffffff', - textMutedColor: '#1c5951', - - gridCellSize: 8, -}) diff --git a/docs/.storybook/bal.theme.ts b/docs/.storybook/bal.theme.ts new file mode 100644 index 0000000000..0ed4e778fe --- /dev/null +++ b/docs/.storybook/bal.theme.ts @@ -0,0 +1,36 @@ +import { create, themes } from 'storybook/theming' +import Logo from '../src/assets/images/storybook.svg' + +export default create({ + ...themes.light, + base: 'light', + brandTitle: 'Baloise Design System', + brandUrl: 'https://github.com/baloise/design-system', + brandImage: Logo, + + fontBase: 'BaloiseCreateText, "Open Sans", Arial, sans-serif', + fontCode: 'monospace', + + colorPrimary: '#000d6e', + colorSecondary: '#d9304c', + + appBg: '#fafafa', + appContentBg: '#ffffff', + appBorderColor: '#e8e8e8', + appBorderRadius: 12, + + barBg: '#ffffff', + barTextColor: '#000d6e', + barSelectedColor: '#000d6e', + + inputBg: '#ffffff', + inputBorder: '#e8e8e8', + inputTextColor: '#000d6e', + inputBorderRadius: 4, + + textColor: '#000d6e', + textInverseColor: '#ffffff', + textMutedColor: '#1c5951', + + gridCellSize: 8, +}) diff --git a/docs/.storybook/blocks/Banner.tsx b/docs/.storybook/blocks/Banner.tsx index 5be62c20b9..6a3f8b6adb 100644 --- a/docs/.storybook/blocks/Banner.tsx +++ b/docs/.storybook/blocks/Banner.tsx @@ -1,12 +1,12 @@ import React from 'react' -import { useOf } from '@storybook/blocks' +import { useOf } from '@storybook/addon-docs/blocks' -import PuzzleGreen from '../../stories/assets/images/home/puzzle-green-dark.svg' -import PuzzlePurple from '../../stories/assets/images/home/puzzle-purple-dark.svg' -import PuzzleYellow from '../../stories/assets/images/home/puzzle-yellow-dark.svg' -import PuzzleRed from '../../stories/assets/images/home/puzzle-red-dark.svg' +import PuzzleGreen from '../../src/assets/images/home/puzzle-green-dark.svg' +import PuzzlePurple from '../../src/assets/images/home/puzzle-purple-dark.svg' +import PuzzleRed from '../../src/assets/images/home/puzzle-red-dark.svg' +import PuzzleYellow from '../../src/assets/images/home/puzzle-yellow-dark.svg' -export const Banner = ({ of, children, color, label, section, puzzle }) => { +export const Banner = ({ of, children, color, label, section, puzzle }): React.ReactElement => { let title = label let subtitle = section let isDeprecated = false diff --git a/docs/.storybook/blocks/Code.tsx b/docs/.storybook/blocks/Code.tsx index a41e6ba757..55ae95000e 100644 --- a/docs/.storybook/blocks/Code.tsx +++ b/docs/.storybook/blocks/Code.tsx @@ -1,7 +1,7 @@ +import { Source } from '@storybook/addon-docs/blocks' import React from 'react' -import { Source } from '@storybook/addon-docs' -export const Code = ({ code, preview, language, border = false, noPreview = undefined }) => { +export const Code = ({ code, preview, language, border = false, noPreview = undefined }): React.ReactElement => { if (!['html'].includes((language || 'html').toLowerCase()) && noPreview === undefined) { noPreview = true as any } diff --git a/docs/.storybook/blocks/CodeSandbox.tsx b/docs/.storybook/blocks/CodeSandbox.tsx deleted file mode 100644 index 226b9bb9d7..0000000000 --- a/docs/.storybook/blocks/CodeSandbox.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { useOf } from '@storybook/blocks' -import { global } from '@storybook/global' -import React, { useEffect, useState } from 'react' - -import { buildAngularParameters } from './utils/code-sandbox.angular' -import { buildHtmlParameters } from './utils/code-sandbox.html' -import { buildReactParameters } from './utils/code-sandbox.react' - -export const CodeSandbox = ({ of }) => { - const framework = global['__STORYBOOK_PREVIEW__'].storyStore.globals.globals.framework - let template = '' - let exampleFiles = {} - - if (of) { - const resolvedOf = useOf(of || 'story', ['story', 'meta']) - template = resolvedOf.story.originalStoryFn({ ...resolvedOf.story.initialArgs }).innerHTML - exampleFiles = (resolvedOf.story.parameters.balCodeSandbox || {}).files - } - - const [parameters, setParameters] = useState(null) - const [loading, setLoading] = useState(true) - - useEffect(() => { - if (framework === 'react') { - buildReactParameters({ template, exampleFiles }).then(newParameters => { - setParameters(newParameters) - setLoading(false) - }) - } else if (framework === 'html') { - buildHtmlParameters({ template, exampleFiles }).then(newParameters => { - setParameters(newParameters) - setLoading(false) - }) - } else { - buildAngularParameters({ template, exampleFiles }).then(newParameters => { - setParameters(newParameters) - setLoading(false) - }) - } - }) - - const label = template === '' ? 'Try Online' : `Code Sandbox` - - if (of && framework !== 'angular') { - return '' - } - - if (loading) { - return ( - - ) - } - - return ( -
- - -
- ) -} diff --git a/docs/.storybook/blocks/ColorCard.tsx b/docs/.storybook/blocks/ColorCard.tsx index 650472ad44..3ead41d92f 100644 --- a/docs/.storybook/blocks/ColorCard.tsx +++ b/docs/.storybook/blocks/ColorCard.tsx @@ -1,4 +1,3 @@ -import React from 'react' import tokens from '@baloise/ds-tokens/dist/tokens.docs.json' export const ColorCard = ({ background, color, small = false }) => { diff --git a/docs/.storybook/blocks/Framework.tsx b/docs/.storybook/blocks/Framework.tsx index 8176bf67f1..140b56142e 100644 --- a/docs/.storybook/blocks/Framework.tsx +++ b/docs/.storybook/blocks/Framework.tsx @@ -1,8 +1,8 @@ import React from 'react' import { global } from '@storybook/global' -export const NotAngularFramework = ({ children }) => { - const globalFramework = global['__STORYBOOK_PREVIEW__'].storyStore.globals.globals.framework +export const NotAngularFramework = ({ children }): React.ReactElement | null => { + const globalFramework = global['__STORYBOOK_PREVIEW__'].storyStoreValue.userGlobals.globals.framework if (globalFramework !== 'angular') { return
{children}
@@ -11,8 +11,8 @@ export const NotAngularFramework = ({ children }) => { return null } -export const AngularFramework = ({ children }) => { - const globalFramework = global['__STORYBOOK_PREVIEW__'].storyStore.globals.globals.framework +export const AngularFramework = ({ children }): React.ReactElement | null => { + const globalFramework = global['__STORYBOOK_PREVIEW__'].storyStoreValue.userGlobals.globals.framework if (globalFramework === 'angular' || globalFramework === undefined || globalFramework === null) { return
{children}
@@ -21,8 +21,8 @@ export const AngularFramework = ({ children }) => { return null } -export const ReactFramework = ({ children }) => { - const globalFramework = global['__STORYBOOK_PREVIEW__'].storyStore.globals.globals.framework +export const ReactFramework = ({ children }): React.ReactElement | null => { + const globalFramework = global['__STORYBOOK_PREVIEW__'].storyStoreValue.userGlobals.globals.framework if (globalFramework === 'react') { return
{children}
@@ -31,8 +31,8 @@ export const ReactFramework = ({ children }) => { return null } -export const HTMLFramework = ({ children }) => { - const globalFramework = global['__STORYBOOK_PREVIEW__'].storyStore.globals.globals.framework +export const HTMLFramework = ({ children }): React.ReactElement | null => { + const globalFramework = global['__STORYBOOK_PREVIEW__'].storyStoreValue.userGlobals.globals.framework if (globalFramework === 'html') { return
{children}
diff --git a/docs/.storybook/blocks/IconOverview.tsx b/docs/.storybook/blocks/IconOverview.tsx index a0ea9af5e9..e858bf84f0 100644 --- a/docs/.storybook/blocks/IconOverview.tsx +++ b/docs/.storybook/blocks/IconOverview.tsx @@ -1,6 +1,6 @@ -import React, { useState } from 'react' -import uiIcons from '../../stories/assets/data/icons.json' -import brandIcons from '../../stories/assets/data/brand-icons.json' +import { useState } from 'react' +import brandIcons from '../../src/assets/data/brand-icons.json' +import uiIcons from '../../src/assets/data/icons.json' const icons = [ ...uiIcons.sort().map(name => ({ name, collection: 'ui-icons', color: 'primary' })), diff --git a/docs/.storybook/blocks/PlaygroundBar.tsx b/docs/.storybook/blocks/PlaygroundBar.tsx index 857b2373bf..7064d3db2f 100644 --- a/docs/.storybook/blocks/PlaygroundBar.tsx +++ b/docs/.storybook/blocks/PlaygroundBar.tsx @@ -1,14 +1,12 @@ import React from 'react' -import { Unstyled, useOf } from '@storybook/blocks' -import { navigate } from '@storybook/addon-links' -import { CodeSandbox } from './CodeSandbox' +import { Unstyled, useOf } from '@storybook/addon-docs/blocks' -export const PlaygroundBar = ({ of, children }) => { - const resolvedOf = useOf(of || 'story', ['story']) +export const PlaygroundBar = ({ of, children }): React.ReactElement => { + // const resolvedOf = useOf(of || 'story', ['story']) return ( - */} ) } diff --git a/docs/.storybook/blocks/Quotes copy.tsx b/docs/.storybook/blocks/Quotes copy.tsx new file mode 100644 index 0000000000..b121fa3170 --- /dev/null +++ b/docs/.storybook/blocks/Quotes copy.tsx @@ -0,0 +1,19 @@ +import React from 'react' + +export const InfoQuote = ({ children }) => { + return ( +
+ + {children} +
+ ) +} + +export const WarningQuote = ({ children }) => { + return ( +
+ + {children} +
+ ) +} diff --git a/docs/.storybook/blocks/StoryHeading.tsx b/docs/.storybook/blocks/StoryHeading.tsx index f1a76d7c51..2e9ec16f45 100644 --- a/docs/.storybook/blocks/StoryHeading.tsx +++ b/docs/.storybook/blocks/StoryHeading.tsx @@ -1,5 +1,5 @@ -import { Unstyled, useOf } from '@storybook/blocks' import React from 'react' +import { Unstyled, useOf } from '@storybook/addon-docs/blocks' export const StoryHeading = ({ of, children, hidden }) => { const { story } = useOf(of || 'story', ['story']) diff --git a/docs/.storybook/blocks/welcome/WelcomeGuide.tsx b/docs/.storybook/blocks/WelcomeGuide.tsx similarity index 95% rename from docs/.storybook/blocks/welcome/WelcomeGuide.tsx rename to docs/.storybook/blocks/WelcomeGuide.tsx index cf1c245cf5..4441892347 100644 --- a/docs/.storybook/blocks/welcome/WelcomeGuide.tsx +++ b/docs/.storybook/blocks/WelcomeGuide.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { LinkCard, LinkCards } from '../' +import { LinkCard, LinkCards } from './Buttons' export const WelcomeGuide = ({ children }) => { return ( diff --git a/docs/.storybook/blocks/css-utils/CssLayout.tsx b/docs/.storybook/blocks/css-utils/CssLayout.tsx index 468331dd3e..7efc928921 100644 --- a/docs/.storybook/blocks/css-utils/CssLayout.tsx +++ b/docs/.storybook/blocks/css-utils/CssLayout.tsx @@ -6,7 +6,7 @@ import { CssUtilitiesTable } from './helpers/CssPropertyTable' export const CssLayoutContainer = ({}) => { return CssTable({ - tokens: tokens.size.container.size, + tokens: tokens.container.size, css: 'container is', }) } diff --git a/docs/.storybook/blocks/css-utils/CssResponsiveTable.tsx b/docs/.storybook/blocks/css-utils/CssResponsiveTable.tsx index 1d106a1949..77042f49b5 100644 --- a/docs/.storybook/blocks/css-utils/CssResponsiveTable.tsx +++ b/docs/.storybook/blocks/css-utils/CssResponsiveTable.tsx @@ -1,9 +1,9 @@ +import tokens from '@baloise/ds-tokens/dist/tokens.docs.json' import React from 'react' import { CssPropertyTable } from './helpers/CssPropertyTable' -import tokens from '@baloise/ds-tokens/dist/tokens.docs.json' -export const CssResponsiveTable = ({ all = false }) => { - const obj = tokens.size.breakpoint +export const CssResponsiveTable = ({ all = false }): React.ReactElement => { + const obj = tokens.breakpoint const list = [ { @@ -12,32 +12,32 @@ export const CssResponsiveTable = ({ all = false }) => { }, { key: 'tablet:', - value: `from ${obj.tablet.value}`, + value: `from ${obj.tablet.$value}`, }, all ? { key: 'touch:', - value: `to ${obj.desktop.value}`, + value: `to ${obj.desktop.$value}`, } : false, { key: 'desktop:', - value: `from ${obj.desktop.value}`, + value: `from ${obj.desktop.$value}`, }, all ? { key: 'high-definition:', - value: `from ${obj['high-definition'].value}`, + value: `from ${obj['high-definition'].$value}`, } : false, { key: 'widescreen:', - value: `from ${obj.widescreen.value}`, + value: `from ${obj.widescreen.$value}`, }, all ? { key: 'fullhd:', - value: `from ${obj.fullhd.value}`, + value: `from ${obj.fullhd.$value}`, } : false, ].filter(item => item) diff --git a/docs/.storybook/blocks/css-utils/CssSpacingMargin.tsx b/docs/.storybook/blocks/css-utils/CssSpacingMargin.tsx index 49110c5af9..8fe5d328aa 100644 --- a/docs/.storybook/blocks/css-utils/CssSpacingMargin.tsx +++ b/docs/.storybook/blocks/css-utils/CssSpacingMargin.tsx @@ -2,15 +2,15 @@ import React from 'react' import { CssPropertyTable } from './helpers/CssPropertyTable' import tokens from '@baloise/ds-tokens/dist/tokens.docs.json' -export const CssSpacingMargin = ({}) => { - const obj = tokens.size.space - const keys = Object.keys(obj).filter(k => obj[k] && obj[k].mobile.value) +export const CssSpacingMargin = ({}): React.ReactElement => { + const obj = tokens.space + const keys = Object.keys(obj).filter(k => obj[k] && obj[k].mobile.$value) const values = keys.map(key => ({ key, - valueMobile: obj[key].mobile.value, - valueTablet: obj[key].tablet.value, - valueDesktop: obj[key].desktop.value, + valueMobile: obj[key].mobile.$value, + valueTablet: obj[key].tablet.$value, + valueDesktop: obj[key].desktop.$value, })) const list = [ diff --git a/docs/.storybook/blocks/css-utils/CssSpacingPadding.tsx b/docs/.storybook/blocks/css-utils/CssSpacingPadding.tsx index 1e9b0a2340..14fe20b0b1 100644 --- a/docs/.storybook/blocks/css-utils/CssSpacingPadding.tsx +++ b/docs/.storybook/blocks/css-utils/CssSpacingPadding.tsx @@ -1,16 +1,16 @@ +import tokens from '@baloise/ds-tokens/dist/tokens.docs.json' import React from 'react' import { CssPropertyTable } from './helpers/CssPropertyTable' -import tokens from '@baloise/ds-tokens/dist/tokens.docs.json' -export const CssSpacingPadding = ({}) => { - const obj = tokens.size.space - const keys = Object.keys(obj).filter(k => obj[k] && obj[k].mobile.value) +export const CssSpacingPadding = ({}): React.ReactElement => { + const obj = tokens.space + const keys = Object.keys(obj).filter(k => obj[k] && obj[k].mobile.$value) const values = keys.map(key => ({ key, - valueMobile: obj[key].mobile.value, - valueTablet: obj[key].tablet.value, - valueDesktop: obj[key].desktop.value, + valueMobile: obj[key].mobile.$value, + valueTablet: obj[key].tablet.$value, + valueDesktop: obj[key].desktop.$value, })) const list = [ diff --git a/docs/.storybook/blocks/css-utils/CssTypography.tsx b/docs/.storybook/blocks/css-utils/CssTypography.tsx index 1abe1cb134..c354ca69e6 100644 --- a/docs/.storybook/blocks/css-utils/CssTypography.tsx +++ b/docs/.storybook/blocks/css-utils/CssTypography.tsx @@ -1,10 +1,10 @@ +import tokens from '@baloise/ds-tokens/dist/tokens.docs.json' import React from 'react' -import { CssUtilitiesTable } from './helpers/CssPropertyTable' import json from '../../../../packages/styles/docs/typography.json' -import tokens from '@baloise/ds-tokens/dist/tokens.docs.json' +import { CssUtilitiesTable } from './helpers/CssPropertyTable' import { CssTable } from './helpers/CssTable' -export const CssTypographyColors = () => ( +export const CssTypographyColors = (): React.ReactElement => ( ( /> ) -export const CssTypographyFamily = () => ( +export const CssTypographyFamily = (): React.ReactElement => ( ( /> ) -export const CssTypographyTextAlign = () => +export const CssTypographyTextAlign = (): React.ReactElement => -export const CssTypographyTextTransform = () => +export const CssTypographyTextTransform = (): React.ReactElement => ( + +) -export const CssTypographyWeight = () => +export const CssTypographyWeight = (): React.ReactElement => -export const CssTypographyWhiteSpace = () => +export const CssTypographyWhiteSpace = (): React.ReactElement => -export const CssTypographySize = ({}) => { +export const CssTypographySize = (): React.ReactElement => { return CssTable({ tokens: { - 'x-small': tokens.size.text.size['x-small'].desktop, - 'small': tokens.size.text.size['small'].desktop, - 'normal': tokens.size.text.size['normal'].desktop, - 'medium': tokens.size.text.size['medium'].desktop, - 'large': tokens.size.text.size['large'].desktop, - 'x-large': tokens.size.text.size['x-large'].desktop, - 'xx-large': tokens.size.text.size['xx-large'].desktop, - 'xxx-large': tokens.size.text.size['xxx-large'].desktop, - 'xxxx-large': tokens.size.text.size['xxxx-large'].desktop, - 'xxxxx-large': tokens.size.text.size['xxxxx-large'].desktop, + 'x-small': tokens.text.size['x-small'].desktop, + 'small': tokens.text.size['small'].desktop, + 'normal': tokens.text.size['normal'].desktop, + 'medium': tokens.text.size['medium'].desktop, + 'large': tokens.text.size['large'].desktop, + 'x-large': tokens.text.size['x-large'].desktop, + 'xx-large': tokens.text.size['xx-large'].desktop, + 'xxx-large': tokens.text.size['xxx-large'].desktop, + 'xxxx-large': tokens.text.size['xxxx-large'].desktop, + 'xxxxx-large': tokens.text.size['xxxxx-large'].desktop, }, css: 'text', example: item =>
Aa
, diff --git a/docs/.storybook/blocks/css-utils/helpers/CssPropertyTable.tsx b/docs/.storybook/blocks/css-utils/helpers/CssPropertyTable.tsx index 2ee69e80ca..682471c9ef 100644 --- a/docs/.storybook/blocks/css-utils/helpers/CssPropertyTable.tsx +++ b/docs/.storybook/blocks/css-utils/helpers/CssPropertyTable.tsx @@ -20,7 +20,7 @@ export const CssUtilitiesTable = ({ list?: any[] search: string | string[] example?: any -}) => { +}): React.ReactElement => { function getValues(list, search) { let results: CssUtility[] = [] if (!Array.isArray(search)) { diff --git a/docs/.storybook/blocks/css-utils/helpers/CssTable.tsx b/docs/.storybook/blocks/css-utils/helpers/CssTable.tsx index e8195c05bd..f7db032c46 100644 --- a/docs/.storybook/blocks/css-utils/helpers/CssTable.tsx +++ b/docs/.storybook/blocks/css-utils/helpers/CssTable.tsx @@ -9,13 +9,13 @@ export const CssTable = ({ tokens: any css: string example?: (item: { key: string; name: string; value: string }) => any -}) => { - const keys = Object.keys(tokens).filter(k => tokens[k] && tokens[k].value) +}): React.ReactElement => { + const keys = Object.keys(tokens).filter(k => tokens[k] && tokens[k].$value) const list = keys.map(key => ({ key: key.replace('default', ''), name: tokens[key].name, - value: tokens[key].value, + value: tokens[key].$value, })) return ( diff --git a/docs/.storybook/blocks/index.ts b/docs/.storybook/blocks/index.ts index 72374b9d45..4ad5f57e49 100644 --- a/docs/.storybook/blocks/index.ts +++ b/docs/.storybook/blocks/index.ts @@ -1,48 +1,45 @@ -export * from './CodeSandbox' -export * from './Framework' export * from './Banner' -export * from './Lead' -export * from './PlaygroundBar' -export * from './StoryHeading' -export * from './PackageTable' -export * from './Buttons' -export * from './Quotes' -export * from './IconOverview' export * from './Breakpoints' +export * from './Buttons' +export * from './Clipboard' export * from './Code' -export * from './ImageCanvas' export * from './ColorCard' -export * from './Footer' -export * from './DiffSource' -export * from './ScssSource' -export * from './Clipboard' -export * from './css-utils/CssBorder' export * from './css-utils/CssBackgroundColors' -export * from './css-utils/CssTypography' -export * from './css-utils/CssLayout' -export * from './css-utils/CssSizing' -export * from './css-utils/CssInteractions' +export * from './css-utils/CssBorder' +export * from './css-utils/CssElevation' export * from './css-utils/CssFlexbox' +export * from './css-utils/CssInteractions' +export * from './css-utils/CssLayout' export * from './css-utils/CssResponsiveTable' -export * from './css-utils/CssElevation' +export * from './css-utils/CssSizing' export * from './css-utils/CssSpacingMargin' export * from './css-utils/CssSpacingPadding' -export * from './welcome/WelcomeStage' -export * from './welcome/WelcomeGuide' -export * from './welcome/WelcomeNews' +export * from './css-utils/CssTypography' +export * from './DiffSource' +export * from './Footer' +export * from './Framework' +export * from './IconOverview' +export * from './ImageCanvas' +export * from './Lead' +export * from './PackageTable' +export * from './PlaygroundBar' +export * from './Quotes' +export * from './ScssSource' +export * from './StoryHeading' export * from './tokens/TokensBorder' export * from './tokens/TokensBorderColors' export * from './tokens/TokensBorderRadius' -export * from './tokens/TokensColors' export * from './tokens/TokensBreakpoints' +export * from './tokens/TokensColors' +export * from './tokens/TokensColorsBackgrounds' export * from './tokens/TokensContainers' export * from './tokens/TokensFont' export * from './tokens/TokensFontColors' -export * from './tokens/TokensFontWeight' export * from './tokens/TokensFontSizes' -export * from './tokens/TokensShadow' -export * from './tokens/TokensTextShadow' +export * from './tokens/TokensFontWeight' export * from './tokens/TokensLineHeights' +export * from './tokens/TokensShadow' export * from './tokens/TokensSpacing' +export * from './tokens/TokensTextShadow' export * from './tokens/TokenZIndex' -export * from './tokens/TokensColorsBackgrounds' +export * from './WelcomeGuide' diff --git a/docs/.storybook/blocks/tokens/TokenZIndex.tsx b/docs/.storybook/blocks/tokens/TokenZIndex.tsx index 423c613ad8..39554136b7 100644 --- a/docs/.storybook/blocks/tokens/TokenZIndex.tsx +++ b/docs/.storybook/blocks/tokens/TokenZIndex.tsx @@ -1,9 +1,9 @@ -import React from 'react' import tokens from '@baloise/ds-tokens/dist/tokens.docs.json' +import React from 'react' import { Clipboard } from '../Clipboard' -export const TokensZIndex = ({ overview }) => { - const list = tokens.size['z-index'] +export const TokensZIndex = ({ overview }): React.ReactElement => { + const list = tokens['z-index'] return ( @@ -22,7 +22,7 @@ export const TokensZIndex = ({ overview }) => { diff --git a/docs/.storybook/blocks/tokens/TokensBorder.tsx b/docs/.storybook/blocks/tokens/TokensBorder.tsx index 40cb00f5a4..3077fef3b2 100644 --- a/docs/.storybook/blocks/tokens/TokensBorder.tsx +++ b/docs/.storybook/blocks/tokens/TokensBorder.tsx @@ -2,8 +2,8 @@ import React from 'react' import tokens from '@baloise/ds-tokens/dist/tokens.docs.json' import { Clipboard } from '../Clipboard' -export const TokensBorder = ({ overview }) => { - const list = tokens.size.border.width +export const TokensBorder = ({ overview }): React.ReactElement => { + const list = tokens.border.width return (
-

{item.value}

+

{item.$value}
@@ -23,7 +23,7 @@ export const TokensBorder = ({ overview }) => {
-

{item.value}

+

{item.$value}
diff --git a/docs/.storybook/blocks/tokens/TokensBorderColors.tsx b/docs/.storybook/blocks/tokens/TokensBorderColors.tsx index c7f7dce979..e7bdfa495b 100644 --- a/docs/.storybook/blocks/tokens/TokensBorderColors.tsx +++ b/docs/.storybook/blocks/tokens/TokensBorderColors.tsx @@ -1,8 +1,8 @@ -import React from 'react' import tokens from '@baloise/ds-tokens/dist/tokens.docs.json' +import React from 'react' import { Clipboard } from '../Clipboard' -export const TokensBorderColors = ({ overview }) => { +export const TokensBorderColors = ({ overview }): React.ReactElement => { const list = tokens.color.border return ( @@ -25,7 +25,7 @@ export const TokensBorderColors = ({ overview }) => {
-

{item.value}

+

{item.$value}
{ - const list = tokens.size.radius +export const TokensBorderRadius = ({ overview }): React.ReactElement => { + const list = tokens.radius return ( @@ -23,7 +23,7 @@ export const TokensBorderRadius = ({ overview }) => {
-

{item.value}

+

{item.$value}
{ - const list = tokens.size.breakpoint +export const TokensBreakpoints = ({ overview }): React.ReactElement => { + const list = tokens.breakpoint return ( @@ -23,7 +23,7 @@ export const TokensBreakpoints = ({ overview }) => { diff --git a/docs/.storybook/blocks/tokens/TokensColors.tsx b/docs/.storybook/blocks/tokens/TokensColors.tsx index ed7e11fc9e..465c149617 100644 --- a/docs/.storybook/blocks/tokens/TokensColors.tsx +++ b/docs/.storybook/blocks/tokens/TokensColors.tsx @@ -1,8 +1,8 @@ -import React from 'react' import tokens from '@baloise/ds-tokens/dist/tokens.docs.json' +import React from 'react' import { Clipboard } from '../Clipboard' -export const TokensColors = ({ overview }) => { +export const TokensColors = ({ overview }): React.ReactElement => { const listBase = tokens.color.base const listAlias = tokens.color.alias @@ -30,7 +30,7 @@ export const TokensColors = ({ overview }) => { - - {!subItems.value ? ( + {!subItems.$value ? (
-

{item.value}

+

{item.$value}
-

{item.value}

+

{item.$value}
{
+

{item.comment}

Shades

diff --git a/docs/.storybook/blocks/tokens/TokensColorsBackgrounds.tsx b/docs/.storybook/blocks/tokens/TokensColorsBackgrounds.tsx index b10a43e629..221329426a 100644 --- a/docs/.storybook/blocks/tokens/TokensColorsBackgrounds.tsx +++ b/docs/.storybook/blocks/tokens/TokensColorsBackgrounds.tsx @@ -1,8 +1,8 @@ -import React from 'react' import tokens from '@baloise/ds-tokens/dist/tokens.docs.json' +import React from 'react' import { Clipboard } from '../Clipboard' -export const TokensColorsBackgrounds = ({ overview }) => { +export const TokensColorsBackgrounds = ({ overview }): React.ReactElement => { const list = tokens.color.background return ( @@ -25,7 +25,7 @@ export const TokensColorsBackgrounds = ({ overview }) => {
-

{item.value}

+

{item.$value}
{ - const list = tokens.size.container.size +export const TokensContainersSize = ({ overview }): React.ReactElement => { + const list = tokens.container.size return ( @@ -23,7 +23,7 @@ export const TokensContainersSize = ({ overview }) => { @@ -37,8 +37,8 @@ export const TokensContainersSize = ({ overview }) => {
-

{item.value}

+

{item.$value}
) } -export const TokensContainersSpace = ({ overview }) => { - const list = tokens.size.container.space +export const TokensContainersSpace = ({ overview }): React.ReactElement => { + const list = tokens.container.space return ( @@ -61,7 +61,7 @@ export const TokensContainersSpace = ({ overview }) => {

diff --git a/docs/.storybook/blocks/tokens/TokensFont.tsx b/docs/.storybook/blocks/tokens/TokensFont.tsx index 0c79c74a66..518e257142 100644 --- a/docs/.storybook/blocks/tokens/TokensFont.tsx +++ b/docs/.storybook/blocks/tokens/TokensFont.tsx @@ -1,7 +1,7 @@ import React from 'react' import { Clipboard } from '../Clipboard' -export const TokensFont = ({ overview }) => { +export const TokensFont = ({ overview }): React.ReactElement => { return (
-

{item.value}

+

{item.$value}
diff --git a/docs/.storybook/blocks/tokens/TokensFontColors.tsx b/docs/.storybook/blocks/tokens/TokensFontColors.tsx index d03ba248ea..22535a2ca6 100644 --- a/docs/.storybook/blocks/tokens/TokensFontColors.tsx +++ b/docs/.storybook/blocks/tokens/TokensFontColors.tsx @@ -1,8 +1,8 @@ -import React from 'react' import tokens from '@baloise/ds-tokens/dist/tokens.docs.json' +import React from 'react' import { Clipboard } from '../Clipboard' -export const TokensFontColors = ({ overview }) => { +export const TokensFontColors = ({ overview }): React.ReactElement => { const list = tokens.color.text function render(key, item, preKey = '') { @@ -13,7 +13,7 @@ export const TokensFontColors = ({ overview }) => {
-

{item.value}

+

{item.$value}
{ {Object.keys(list).map(key => { const item = list[key] - if (item.value) { + if (item.$value) { return render(key, item) } else { return Object.keys(item).map(subKey => { diff --git a/docs/.storybook/blocks/tokens/TokensFontSizes.tsx b/docs/.storybook/blocks/tokens/TokensFontSizes.tsx index c4d70ff889..e87338f790 100644 --- a/docs/.storybook/blocks/tokens/TokensFontSizes.tsx +++ b/docs/.storybook/blocks/tokens/TokensFontSizes.tsx @@ -1,9 +1,9 @@ -import React from 'react' import tokens from '@baloise/ds-tokens/dist/tokens.docs.json' +import React from 'react' import { Clipboard } from '../Clipboard' -export const TokensFontSize = ({ overview }) => { - const list = tokens.size.text.size +export const TokensFontSize = ({ overview }): React.ReactElement => { + const list = tokens.text.size return ( @@ -26,7 +26,8 @@ export const TokensFontSize = ({ overview }) => {

- {item?.mobile?.value || '0rem'} / {item?.tablet?.value || '0rem'} / {item?.desktop?.value || '0rem'} + {item?.mobile?.$value || '0rem'} / {item?.tablet?.$value || '0rem'} /{' '} + {item?.desktop?.$value || '0rem'}

diff --git a/docs/.storybook/blocks/tokens/TokensFontWeight.tsx b/docs/.storybook/blocks/tokens/TokensFontWeight.tsx index 67f8ac4b17..15875ea3d0 100644 --- a/docs/.storybook/blocks/tokens/TokensFontWeight.tsx +++ b/docs/.storybook/blocks/tokens/TokensFontWeight.tsx @@ -1,9 +1,9 @@ -import React from 'react' import tokens from '@baloise/ds-tokens/dist/tokens.docs.json' +import React from 'react' import { Clipboard } from '../Clipboard' -export const TokensFontWeight = ({ overview }) => { - const list = tokens.size.font.weight +export const TokensFontWeight = ({ overview }): React.ReactElement => { + const list = tokens.font.weight return ( @@ -24,7 +24,7 @@ export const TokensFontWeight = ({ overview }) => {
-

{item.value}

+

{item.$value}
{ - const list = tokens.size.text['line-height'] +export const TokensLineHeights = ({ overview }): React.ReactElement => { + const list = tokens.text['line-height'] return ( @@ -23,7 +23,7 @@ export const TokensLineHeights = ({ overview }) => {
-

{item.value}

+

{item.$value}
diff --git a/docs/.storybook/blocks/tokens/TokensShadow.tsx b/docs/.storybook/blocks/tokens/TokensShadow.tsx index 713516d547..8a6291b119 100644 --- a/docs/.storybook/blocks/tokens/TokensShadow.tsx +++ b/docs/.storybook/blocks/tokens/TokensShadow.tsx @@ -1,8 +1,8 @@ -import React from 'react' import tokens from '@baloise/ds-tokens/dist/tokens.docs.json' +import React from 'react' import { Clipboard } from '../Clipboard' -export const TokensShadow = ({ overview }) => { +export const TokensShadow = ({ overview }): React.ReactElement => { const list = tokens.shadow return ( @@ -23,7 +23,7 @@ export const TokensShadow = ({ overview }) => {
-

{item.value}

+

{item.$value}
{ - const list = tokens.size.space +export const TokensSpacing = ({ overview }): React.ReactElement => { + const list = tokens.space return ( @@ -15,7 +15,7 @@ export const TokensSpacing = ({ overview }) => { {Object.keys(list) - .filter(key => list[key].mobile.value) + .filter(key => list[key].mobile.$value) .map(key => { const item = list[key].mobile const itemTablet = list[key].tablet @@ -28,7 +28,7 @@ export const TokensSpacing = ({ overview }) => {

- {item.value} / {itemTablet?.value || '0rem'} / {itemDesktop?.value || '0rem'} + {item.$value} / {itemTablet?.$value || '0rem'} / {itemDesktop?.$value || '0rem'}

diff --git a/docs/.storybook/blocks/tokens/TokensTextShadow.tsx b/docs/.storybook/blocks/tokens/TokensTextShadow.tsx index a88bb2309c..5fee68f898 100644 --- a/docs/.storybook/blocks/tokens/TokensTextShadow.tsx +++ b/docs/.storybook/blocks/tokens/TokensTextShadow.tsx @@ -1,8 +1,8 @@ -import React from 'react' import tokens from '@baloise/ds-tokens/dist/tokens.docs.json' +import React from 'react' import { Clipboard } from '../Clipboard' -export const TokensTextShadow = ({ overview }) => { +export const TokensTextShadow = ({ overview }): React.ReactElement => { const list = tokens.text.shadow return ( @@ -23,7 +23,7 @@ export const TokensTextShadow = ({ overview }) => {
-

{item.value}

+

{item.$value}
=> { - const [ - src_app_app_component_fullscreen_html, - src_app_app_component_project_html, - src_app_app_component_html, - src_app_app_component_ts, - src_app_app_module_project_ts, - src_app_app_module_ts, - src_app_example_component_ts, - src_index_html, - src_main_ts, - src_polyfills_ts, - src_styles_scss, - src_zone_flags_ts, - _angular_cli_json, - package_json, - tsconfig_json, - ] = await loadSourceFiles([ - 'angular/src/app/app.component-fullscreen.html', - 'angular/src/app/app.component-project.html', - 'angular/src/app/app.component.html', - 'angular/src/app/app.component.ts', - 'angular/src/app/app.module-project.ts', - 'angular/src/app/app.module.ts', - 'angular/src/app/example.component.ts', - 'angular/src/index.html', - 'angular/src/main.ts', - 'angular/src/polyfills.ts', - 'angular/src/styles.scss', - 'angular/src/zone-flags.ts', - 'angular/angular-cli.json', - 'angular/package.json', - 'angular/tsconfig.json', - ]) - - const isTryOnlineProject = !project.template - let exampleFiles = project.exampleFiles - const secondComponent = {} - - if (!isTryOnlineProject) { - const example_component_html = project.template - ? parseMarkdown(project.template) - : '

Hello World

' - - const new_example_component_ts = src_app_example_component_ts - - if (exampleFiles === undefined) { - exampleFiles = { - 'src/app/example.component.ts': { - isBinary: false, - content: new_example_component_ts, - }, - 'src/app/example.component.html': { - isBinary: false, - content: example_component_html, - }, - 'src/app/example.component.css': { - isBinary: false, - content: '', - }, - } - } - } - - return getParameters({ - files: { - 'package.json': { - isBinary: false, - content: package_json, - }, - 'tsconfig.json': { - isBinary: false, - content: tsconfig_json, - }, - '.angular-cli.json': { - isBinary: false, - content: _angular_cli_json, - }, - 'src/app/app.component.html': { - isBinary: false, - content: isTryOnlineProject - ? src_app_app_component_project_html - : project.fullscreen - ? src_app_app_component_fullscreen_html - : src_app_app_component_html, - }, - 'src/app/app.component.ts': { - isBinary: false, - content: src_app_app_component_ts, - }, - 'src/app/app.module.ts': { - isBinary: false, - content: isTryOnlineProject ? src_app_app_module_project_ts : src_app_app_module_ts, - }, - 'src/index.html': { - isBinary: false, - content: src_index_html, - }, - 'src/main.ts': { - isBinary: false, - content: src_main_ts, - }, - 'src/polyfills.ts': { - isBinary: false, - content: src_polyfills_ts, - }, - 'src/styles.scss': { - isBinary: false, - content: src_styles_scss, - }, - 'src/zone-flags.ts': { - isBinary: false, - content: src_zone_flags_ts, - }, - ...(exampleFiles || {}), - ...secondComponent, - }, - }) -} diff --git a/docs/.storybook/blocks/utils/code-sandbox.html.ts b/docs/.storybook/blocks/utils/code-sandbox.html.ts deleted file mode 100644 index eb7d90718c..0000000000 --- a/docs/.storybook/blocks/utils/code-sandbox.html.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { getParameters } from 'codesandbox/lib/api/define' -import { loadSourceFiles, parseMarkdown } from './code-sandbox.util' - -interface HtmlProject { - template: string - exampleFiles?: any - fullscreen?: boolean -} - -export const buildHtmlParameters = async (project: HtmlProject): Promise => { - const [index_html, index_ts, example_ts] = await loadSourceFiles([ - 'html/index.html', - 'html/index.ts', - 'html/example.ts', - ]) - - const parseTemplate = (content: string) => ` - - -
- -${content} - -
- - -` - - let example_component = example_ts - let example_template = index_html - - if (project.template) { - example_component = parseMarkdown(project.template) - } - - if (project.template) { - example_template = parseTemplate(parseMarkdown(project.template)) - } - - example_component = `${index_ts} - -${example_component}` - - return getParameters({ - files: { - 'package.json': { - isBinary: false, - content: { - dependencies: { - '@baloise/ds-core': 'latest', - }, - } as any, - }, - 'index.js': { - isBinary: false, - content: example_component.trim(), - }, - 'index.html': { - isBinary: false, - content: example_template.trim(), - }, - }, - }) -} diff --git a/docs/.storybook/blocks/utils/code-sandbox.logos.ts b/docs/.storybook/blocks/utils/code-sandbox.logos.ts deleted file mode 100644 index e6aa0dae0d..0000000000 --- a/docs/.storybook/blocks/utils/code-sandbox.logos.ts +++ /dev/null @@ -1,31 +0,0 @@ -export const logoAngular = ` - - - - - - - ` - -export const logoReact = ` -React Logo - - - - - - -` - -export const logoHtml = ` - - -` - -export const logoCodeSandbox = `` diff --git a/docs/.storybook/blocks/utils/code-sandbox.react.ts b/docs/.storybook/blocks/utils/code-sandbox.react.ts deleted file mode 100644 index 6308453011..0000000000 --- a/docs/.storybook/blocks/utils/code-sandbox.react.ts +++ /dev/null @@ -1,85 +0,0 @@ -import { getParameters } from 'codesandbox/lib/api/define' -import { loadSourceFiles, parseMarkdown } from './code-sandbox.util' - -interface ReactProject { - template: string - fullscreen?: boolean - exampleFiles?: any -} - -export const buildReactParameters = async (project: ReactProject): Promise => { - const [ - public_index, - src_app_tsx, - src_app_project_tsx, - src_app_fullscreen_tsx, - src_index_tsx, - src_react_app_env_d_ts, - package_json, - tsconfig_json, - ] = await loadSourceFiles([ - 'react/public/index.html', - 'react/src/App.tsx', - 'react/src/AppProject.tsx', - 'react/src/AppFullscreen.tsx', - 'react/src/index.tsx', - 'react/src/react-app-env.d.ts', - 'react/package.json', - 'react/tsconfig.json', - ]) - - const isTryOnlineProject = !project.template - - const reactApp = isTryOnlineProject ? src_app_project_tsx : project.fullscreen ? src_app_fullscreen_tsx : src_app_tsx - - let exampleFiles = project.exampleFiles - - if (!isTryOnlineProject) { - const example_component = project.template - ? parseMarkdown(project.template) - : `import React from 'react'; - -export default function Example() { - return

Hello World

; -} -` - if (exampleFiles === undefined) { - exampleFiles = { - 'src/Example.tsx': { - isBinary: false, - content: example_component, - }, - } - } - } - - return getParameters({ - files: { - 'package.json': { - isBinary: false, - content: package_json, - }, - 'tsconfig.json': { - isBinary: false, - content: tsconfig_json, - }, - 'public/index.html': { - isBinary: false, - content: public_index, - }, - 'src/index.tsx': { - isBinary: false, - content: src_index_tsx, - }, - 'src/react-app-env.d.ts': { - isBinary: false, - content: src_react_app_env_d_ts, - }, - 'src/App.tsx': { - isBinary: false, - content: reactApp, - }, - ...(exampleFiles || {}), - }, - }) -} diff --git a/docs/.storybook/blocks/utils/code-sandbox.util.ts b/docs/.storybook/blocks/utils/code-sandbox.util.ts deleted file mode 100644 index cbb543242c..0000000000 --- a/docs/.storybook/blocks/utils/code-sandbox.util.ts +++ /dev/null @@ -1,35 +0,0 @@ -export type Frameworks = 'angular' | 'react' | 'html' - -export const parseMarkdown = (content: string) => { - if (content.startsWith('```')) { - const lines = content.split('\n') - lines.splice(0, 1) - return lines.join('\n').replace('```', '') - } - return content -} - -export const loadSourceFiles = async (files: string[]) => { - const sourceFiles = await Promise.all(files.map(f => fetch(`/assets/code/${f}`))) - return await Promise.all(sourceFiles.map(res => res.text())) -} - -export const getFramework = (): Frameworks => { - const urlSearchParams = new URLSearchParams(window.location.search) - const params = Object.fromEntries(urlSearchParams.entries()) - let paramFramework: string | undefined = params.globals?.replace('framework:', '') - const frameworks = ['angular', 'html', 'react'] - paramFramework = frameworks.includes(paramFramework) ? paramFramework : undefined - if (paramFramework !== undefined) { - localStorage.setItem('bal-docs-framework', JSON.stringify(paramFramework)) - return paramFramework as Frameworks - } - - const storageValue = localStorage.getItem('bal-docs-framework') - if (storageValue === null) { - localStorage.setItem('bal-docs-framework', JSON.stringify('angular')) - return 'angular' - } - - return JSON.parse(storageValue) -} diff --git a/docs/.storybook/blocks/welcome/WelcomeNews.tsx b/docs/.storybook/blocks/welcome/WelcomeNews.tsx deleted file mode 100644 index c0cd6eb7a8..0000000000 --- a/docs/.storybook/blocks/welcome/WelcomeNews.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react' - -export const WelcomeNews = ({ children }) => { - return ( -
-

Latest News

-
-
- - - - 23.03.2023 - - - Upgrade to v13 - - - Due to Angular performance optimizations we need to change the module architecture. Moreover, steps & - tabs component are divided to be more maintainable. Types of properties and events have been improved - from the ground. - - - Upgrade Guide - - - -
-
-
- ) -} diff --git a/docs/.storybook/blocks/welcome/WelcomeStage.tsx b/docs/.storybook/blocks/welcome/WelcomeStage.tsx deleted file mode 100644 index 27fc0b74a9..0000000000 --- a/docs/.storybook/blocks/welcome/WelcomeStage.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react' -import { CodeSandbox } from '../CodeSandbox' -import { navigate } from '@storybook/addon-links' - -export const WelcomeStage = ({ children }) => { - return ( -
-
-
- -
-

Design System

-

- The Baloise Design System consists of UI components and a clearly defined visual style, released as both code - implementations and design artifacts to build any number of web applications. -

- -
-
-
- -
-
-
- ) -} diff --git a/docs/.storybook/main.js b/docs/.storybook/main.js deleted file mode 100644 index 30393590b0..0000000000 --- a/docs/.storybook/main.js +++ /dev/null @@ -1,48 +0,0 @@ -import { join, dirname } from 'path' -// import remarkGfm from 'remark-gfm'; - -/** - * This function is used to resolve the absolute path of a package. - * It is needed in projects that use Yarn PnP or are set up within a monorepo. - */ -function getAbsolutePath(value) { - return dirname(require.resolve(join(value, 'package.json'))) -} - -/** @type { import('@storybook/html-vite').StorybookConfig } */ -const config = { - stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: [ - getAbsolutePath('@storybook/addon-links'), - getAbsolutePath('@storybook/addon-essentials'), - './addons/version/index.js', - './addons/framework/index.js', - './addons/source/index.js', - './addons/title/index.js', - './addons/cookie/index.js', - ], - framework: { - name: getAbsolutePath('@storybook/html-vite'), - options: {}, - }, - staticDirs: ['../public'], - docs: { - autodocs: 'tag', - defaultName: 'Documentation', - }, - previewHead: head => ` - ${head} - - - - - - - - - - - `, -} - -export default config diff --git a/docs/.storybook/main.ts b/docs/.storybook/main.ts new file mode 100644 index 0000000000..78948241a2 --- /dev/null +++ b/docs/.storybook/main.ts @@ -0,0 +1,28 @@ +import type { StorybookConfig } from '@storybook/html-vite' + +const config: StorybookConfig = { + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + addons: ['@storybook/addon-docs'], + framework: { + name: '@storybook/html-vite', + options: {}, + }, + docs: { + defaultName: 'Documentation', + }, + staticDirs: ['../public'], + previewHead: head => ` + ${head} + + + + + + + + + + + `, +} +export default config diff --git a/docs/.storybook/manager.js b/docs/.storybook/manager.js deleted file mode 100644 index c12b24a0f5..0000000000 --- a/docs/.storybook/manager.js +++ /dev/null @@ -1,10 +0,0 @@ -import { addons } from '@storybook/addons' -import baloiseTheme from './bal.theme' - -addons.setConfig({ - theme: baloiseTheme, - sidebar: { - showRoots: true, - collapsedRoots: ['foundation', 'development', 'css-utilities', 'components', 'tokens'], - }, -}) diff --git a/docs/.storybook/manager.ts b/docs/.storybook/manager.ts new file mode 100644 index 0000000000..979411ff85 --- /dev/null +++ b/docs/.storybook/manager.ts @@ -0,0 +1,76 @@ +import { DOCS_PREPARED, DOCS_RENDERED, STORY_PREPARED, STORY_RENDERED } from 'storybook/internal/core-events' +import { addons, types } from 'storybook/manager-api' +import { registerCookie } from './addons/cookie.addon' +import { registerFramework } from './addons/framework.addon' +import { SourcePanel } from './addons/source-panel.addon' +import { registerVersion } from './addons/version.addon' +import baloiseTheme from './bal.theme' + +addons.setConfig({ + theme: baloiseTheme, + sidebar: { + showRoots: true, + collapsedRoots: ['foundation', 'development', 'css-utilities', 'components', 'tokens'], + }, +}) + +addons.register('my/cookie', () => registerCookie()) + +addons.register('my/framework', () => { + addons.add('my-framework-addon/toolbar', { + title: 'Framework', + type: types.TOOLEXTRA, + render: registerFramework as any, + }) +}) + +addons.register('my/toolbar', () => { + addons.add('my-toolbar-addon/toolbar', { + title: 'Version badge', + type: types.TOOLEXTRA, + render: registerVersion as any, + }) +}) + +addons.register('my/source', () => { + addons.add('my-source-addon/panel', { + type: types.PANEL, + title: 'Source', + render: SourcePanel as any, + }) +}) + +addons.register('my/title', api => { + api.on(STORY_PREPARED, () => { + const storyData = api.getCurrentStoryData() + if (storyData) { + document.title = `${storyData.title.split('/').pop()} โ€ข Baloise Design System` + } + }) + api.on(STORY_RENDERED, () => { + const storyData = api.getCurrentStoryData() + if (storyData) { + document.title = `${storyData.title.split('/').pop()} โ€ข Baloise Design System` + } + }) + api.on(DOCS_PREPARED, () => { + const storyData = api.getCurrentStoryData() + if (storyData) { + if (storyData.title === 'Welcome' || storyData.title === 'Design System') { + document.title = `Baloise Design System` + } else { + document.title = `${storyData.title.split('/').pop()} โ€ข Baloise Design System` + } + } + }) + api.on(DOCS_RENDERED, () => { + const storyData = api.getCurrentStoryData() + if (storyData) { + if (storyData.title === 'Welcome' || storyData.title === 'Design System') { + document.title = `Baloise Design System` + } else { + document.title = `${storyData.title.split('/').pop()} โ€ข Baloise Design System` + } + } + }) +}) diff --git a/docs/.storybook/preview.js b/docs/.storybook/preview.js deleted file mode 100644 index 0558288127..0000000000 --- a/docs/.storybook/preview.js +++ /dev/null @@ -1,147 +0,0 @@ -/** @type { import('@storybook/html').Decorator } */ -export const decorators = [Story => `${Story().outerHTML || Story()}`] - -/** @type { import('@storybook/html').Preview } */ -const preview = { - globalTypes: { - framework: { - name: 'Framework', - description: 'Integration technology', - defaultValue: 'Angular', - }, - }, - parameters: { - actions: { argTypesRegex: '^on[A-Z].*' }, - controls: { expanded: true }, - docs: { - toc: { - contentsSelector: '.sbdocs-content', - headingSelector: 'h2, h3', - ignoreSelector: '.docs-story, .title, .subtitle, .bal-heading__text', - title: '', //'On this page', - disable: false, - }, - }, - options: { - storySort: { - order: [ - 'Welcome', - 'Design System', - 'Changelog', - 'Support', - 'Foundation', - [ - 'Overview', - 'Border & Radius', - 'Brand Assets', - 'Colors', - 'Design Tokens', - 'Elevation', - 'Iconography', - 'Grid', - 'Layout', - 'Spacing', - 'Typography', - ], - 'Development', - 'Tokens', - 'CSS Utilities', - 'Components', - ['Overview', 'Containment', 'Data Display', 'Feedback', 'Form', 'Layout', 'Navigation', 'Typography'], - ], - }, - }, - viewport: { - viewports: { - small: { - name: 'Small (Mobile) from 320px to 768px', - styles: { - width: '320px', - height: '667px', - }, - type: 'mobile', - }, - medium: { - name: 'Medium (Tablet)', - styles: { - width: '1023px', - height: '834px', - }, - type: 'tablet', - }, - large: { - name: 'Large (Desktop)', - styles: { - width: '1216px', - height: '801px', - }, - type: 'desktop', - }, - widescreen: { - name: 'Widescreen (Desktop)', - styles: { - width: '1440px', - height: '801px', - }, - type: 'desktop', - }, - fullhd: { - name: 'FullHD (Desktop)', - styles: { - width: '1920px', - height: '801px', - }, - type: 'desktop', - }, - }, - }, - a11y: { - config: { - rules: [ - { - id: 'duplicate-id-active', - enabled: false, - }, - { - id: 'duplicate-id', - enabled: false, - }, - ], - }, - }, - backgrounds: { - grid: { - cellSize: 8, - }, - default: 'white', - values: [ - { - name: 'white', - value: '#fff', - }, - { - name: 'blue', - value: '#000d6e', - }, - { - name: 'green', - value: '#94e3d4', - }, - { - name: 'purple', - value: '#b8b2ff', - }, - { - name: 'red', - value: '#ffaca6', - }, - { - name: 'yellow', - value: '#fae052', - }, - ], - }, - }, -} - -export default preview diff --git a/docs/.storybook/preview.ts b/docs/.storybook/preview.ts new file mode 100644 index 0000000000..8b06ceda70 --- /dev/null +++ b/docs/.storybook/preview.ts @@ -0,0 +1,133 @@ +import type { Decorator, Preview } from '@storybook/html-vite' + +export const decorators: Decorator[] = [(Story: any) => `${Story().outerHTML || Story()}`] + +const preview: Preview = { + globalTypes: { + framework: { + name: 'Framework', + description: 'Integration technology', + defaultValue: 'Angular', + }, + }, + parameters: { + actions: { argTypesRegex: '^on[A-Z].*' }, + controls: { expanded: true }, + docs: { + toc: { + contentsSelector: '.sbdocs-content', + headingSelector: 'h2, h3', + ignoreSelector: '.docs-story, .title, .subtitle, .bal-heading__text', + title: '', //'On this page', + disable: false, + }, + }, + options: { + storySort: { + order: [ + 'Welcome', + 'Design System', + 'Changelog', + 'Support', + 'Foundation', + [ + 'Overview', + 'Border & Radius', + 'Brand Assets', + 'Colors', + 'Design Tokens', + 'Elevation', + 'Iconography', + 'Grid', + 'Layout', + 'Spacing', + 'Typography', + ], + 'Development', + 'Tokens', + 'CSS Utilities', + 'Components', + ['Overview', 'Containment', 'Data Display', 'Feedback', 'Form', 'Layout', 'Navigation', 'Typography'], + ], + }, + }, + viewport: { + options: { + small: { + name: 'Small (Mobile) from 320px to 768px', + styles: { + width: '320px', + height: '667px', + }, + type: 'mobile', + }, + medium: { + name: 'Medium (Tablet)', + styles: { + width: '1023px', + height: '834px', + }, + type: 'tablet', + }, + large: { + name: 'Large (Desktop)', + styles: { + width: '1216px', + height: '801px', + }, + type: 'desktop', + }, + widescreen: { + name: 'Widescreen (Desktop)', + styles: { + width: '1440px', + height: '801px', + }, + type: 'desktop', + }, + fullhd: { + name: 'FullHD (Desktop)', + styles: { + width: '1920px', + height: '801px', + }, + type: 'desktop', + }, + }, + }, + backgrounds: { + grid: { + cellSize: 8, + }, + default: 'white', + options: [ + { + name: 'white', + value: '#fff', + }, + { + name: 'blue', + value: '#000d6e', + }, + { + name: 'green', + value: '#94e3d4', + }, + { + name: 'purple', + value: '#b8b2ff', + }, + { + name: 'red', + value: '#ffaca6', + }, + { + name: 'yellow', + value: '#fae052', + }, + ], + }, + }, +} + +export default preview diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000000..1261e73a5f --- /dev/null +++ b/docs/index.html @@ -0,0 +1,16 @@ + + + + + + + new-docs + + + + + +

Vite + Lit

+ + + diff --git a/docs/package.json b/docs/package.json index b5123fe401..723d5cc748 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,28 +1,29 @@ { "name": "docs", - "version": "15.2.49", "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "start": "storybook dev -p 6006", + "build": "storybook build" + }, "dependencies": { - "@baloise/ds-brand-icons": "19.8.3", "@baloise/ds-core": "19.8.3", "@baloise/ds-styles": "19.8.3", - "@baloise/ds-icons": "19.8.3", - "@baloise/ds-tokens": "19.8.3", - "@storybook/addon-essentials": "~7.6.10", - "@storybook/addon-links": "~7.6.10", - "@storybook/blocks": "~7.6.10", - "@storybook/html": "~7.6.10", - "@storybook/html-vite": "~7.6.10", - "@storybook/manager-api": "~7.6.10", - "codesandbox": "~2.2.3", - "lodash.kebabcase": "~4.1.1", - "js-beautify": "~1.14.11", - "react": "~18.3.1", - "react-dom": "~18.3.1", - "react-syntax-highlighter": "~15.5.0", - "storybook": "~7.6.10" + "@storybook/addon-docs": "^10.0.8", + "@storybook/addon-links": "^10.0.8", + "@storybook/html-vite": "^10.0.8", + "js-beautify": "^1.15.4", + "lodash": "~4.17.21", + "react": "19.2.0", + "react-dom": "19.2.0", + "react-syntax-highlighter": "^16.1.0", + "storybook": "^10.0.8" }, "devDependencies": { - "@types/lodash.kebabcase": "~4.1.8" + "@types/react": "19.2.0", + "@types/react-dom": "19.2.0", + "typescript": "~5.6.2", + "vite": "7.2.2" } } diff --git a/docs/project.json b/docs/project.json index 5bd79a8e5f..0cfd64f487 100644 --- a/docs/project.json +++ b/docs/project.json @@ -7,7 +7,7 @@ "dependsOn": ["^build", "prepare"], "options": { "cwd": "{projectRoot}", - "command": "npx storybook dev -p 6006" + "command": "npm start" } }, "prepare": { @@ -17,7 +17,7 @@ "{projectRoot}/public/build", "{projectRoot}/public/assets/download", "{projectRoot}/public/assets/fonts", - "{projectRoot}/stories/data", + "{projectRoot}/src/data", "{projectRoot}/dist" ], "options": { @@ -37,7 +37,7 @@ "{projectRoot}/public/build", "{projectRoot}/public/assets/download", "{projectRoot}/public/assets/fonts", - "{projectRoot}/stories/data", + "{projectRoot}/src/data", "{projectRoot}/dist" ], "options": { diff --git a/docs/public/assets/code/angular/angular-cli.json b/docs/public/assets/code/angular/angular-cli.json deleted file mode 100644 index 9e586ffa16..0000000000 --- a/docs/public/assets/code/angular/angular-cli.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "apps": [ - { - "root": "src", - "outDir": "dist", - "index": "index.html", - "main": "main.ts", - "polyfills": "polyfills.ts", - "prefix": "app", - "styles": ["styles.scss"], - "scripts": [] - } - ] -} diff --git a/docs/public/assets/code/angular/package.json b/docs/public/assets/code/angular/package.json deleted file mode 100644 index d7587d222e..0000000000 --- a/docs/public/assets/code/angular/package.json +++ /dev/null @@ -1,56 +0,0 @@ -{ - "name": "angular", - "version": "0.0.0", - "license": "MIT", - "scripts": { - "ng": "ng", - "start": "ng serve", - "build": "ng build --prod", - "test": "ng test", - "lint": "ng lint", - "e2e": "ng e2e" - }, - "private": true, - "dependencies": { - "@angular/animations": "15.2.1", - "@angular/common": "15.2.1", - "@angular/compiler": "15.2.1", - "@angular/core": "15.2.1", - "@angular/forms": "15.2.1", - "@angular/platform-browser": "15.2.1", - "@angular/platform-browser-dynamic": "15.2.1", - "@angular/router": "15.2.1", - "@baloise/ds-angular-module": "latest", - "@baloise/ds-styles": "latest", - "core-js": "3.26.1", - "rxjs": "7.6.0", - "tslib": "2.4.1", - "zone.js": "0.12.0" - }, - "devDependencies": { - "@angular-devkit/build-angular": "~0.1102.0", - "@angular/cli": "~12.2.0", - "@angular/compiler-cli": "~12.2.0", - "@angular/language-service": "~12.2.0", - "@types/jasmine": "3.6.3", - "@types/jasminewd2": "2.0.8", - "@types/node": "14.14.28", - "codelyzer": "6.0.1", - "jasmine-core": "3.6.0", - "jasmine-spec-reporter": "6.0.0", - "karma": "6.1.1", - "karma-chrome-launcher": "3.1.0", - "karma-coverage-istanbul-reporter": "3.0.3", - "karma-jasmine": "4.0.1", - "karma-jasmine-html-reporter": "1.5.4", - "protractor": "7.0.0", - "ts-node": "9.1.1", - "tslint": "~6.1.3", - "typescript": "~4.8.2" - }, - "keywords": [ - "angular", - "starter" - ], - "description": "Angular example starter project" -} diff --git a/docs/public/assets/code/angular/src/app/app.component-fullscreen.html b/docs/public/assets/code/angular/src/app/app.component-fullscreen.html deleted file mode 100644 index 085a480b79..0000000000 --- a/docs/public/assets/code/angular/src/app/app.component-fullscreen.html +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/docs/public/assets/code/angular/src/app/app.component-project.html b/docs/public/assets/code/angular/src/app/app.component-project.html deleted file mode 100644 index e3254540fb..0000000000 --- a/docs/public/assets/code/angular/src/app/app.component-project.html +++ /dev/null @@ -1,23 +0,0 @@ - -
- - Design System - -
- - - Welcome to the - Baloise Design System - - -
-

- The Baloise Design System consists of UI components and a clearly defined visual style, released as both code - implementations and design artifacts to build any number of web applications. -

- Check out the Documentation -
- - - - diff --git a/docs/public/assets/code/angular/src/app/app.component.html b/docs/public/assets/code/angular/src/app/app.component.html deleted file mode 100644 index 1915d76511..0000000000 --- a/docs/public/assets/code/angular/src/app/app.component.html +++ /dev/null @@ -1,5 +0,0 @@ - -
- -
- diff --git a/docs/public/assets/code/angular/src/app/app.component.ts b/docs/public/assets/code/angular/src/app/app.component.ts deleted file mode 100644 index 49ab5c2feb..0000000000 --- a/docs/public/assets/code/angular/src/app/app.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core' - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', -}) -export class AppComponent {} diff --git a/docs/public/assets/code/angular/src/app/app.module-project.ts b/docs/public/assets/code/angular/src/app/app.module-project.ts deleted file mode 100644 index 2988ef0177..0000000000 --- a/docs/public/assets/code/angular/src/app/app.module-project.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core' -import { FormsModule } from '@angular/forms' -import { BrowserModule } from '@angular/platform-browser' - -import { BaloiseDesignSystemModule } from '@baloise/ds-angular-module' - -import { AppComponent } from './app.component' - -@NgModule({ - imports: [BrowserModule, FormsModule, BaloiseDesignSystemModule.forRoot()], - declarations: [AppComponent], - bootstrap: [AppComponent], - schemas: [CUSTOM_ELEMENTS_SCHEMA], -}) -export class AppModule {} diff --git a/docs/public/assets/code/angular/src/app/app.module.ts b/docs/public/assets/code/angular/src/app/app.module.ts deleted file mode 100644 index 1a5ce7df53..0000000000 --- a/docs/public/assets/code/angular/src/app/app.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core' -import { FormsModule } from '@angular/forms' -import { BrowserModule } from '@angular/platform-browser' - -import { BaloiseDesignSystemModule } from '@baloise/ds-angular-module' - -import { AppComponent } from './app.component' -import { ExampleComponent } from './example.component' - -@NgModule({ - imports: [BrowserModule, FormsModule, BaloiseDesignSystemModule.forRoot(), ExampleComponent], - declarations: [AppComponent], - bootstrap: [AppComponent], - schemas: [CUSTOM_ELEMENTS_SCHEMA], -}) -export class AppModule {} diff --git a/docs/public/assets/code/angular/src/app/example.component.ts b/docs/public/assets/code/angular/src/app/example.component.ts deleted file mode 100644 index c34d223da9..0000000000 --- a/docs/public/assets/code/angular/src/app/example.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { CommonModule } from '@angular/common' -import { Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy } from '@angular/core' -import { BaloiseDesignSystemModule } from '@baloise/ds-angular-module' -/** PLACEHOLDER FOR DESIGN SYSTEM IMPORTS */ - -@Component({ - selector: 'app-example', - templateUrl: 'example.component.html', - standalone: true, - schemas: [CUSTOM_ELEMENTS_SCHEMA], - imports: [CommonModule, BaloiseDesignSystemModule], - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class ExampleComponent {} diff --git a/docs/public/assets/code/angular/src/index.html b/docs/public/assets/code/angular/src/index.html deleted file mode 100644 index 1d28f2501f..0000000000 --- a/docs/public/assets/code/angular/src/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - Angular - - - - - - - diff --git a/docs/public/assets/code/angular/src/main.ts b/docs/public/assets/code/angular/src/main.ts deleted file mode 100644 index 4fde1d8e0a..0000000000 --- a/docs/public/assets/code/angular/src/main.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic' - -import { AppModule } from './app/app.module' - -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch(err => console.log(err)) diff --git a/docs/public/assets/code/angular/src/polyfills.ts b/docs/public/assets/code/angular/src/polyfills.ts deleted file mode 100644 index 801839c07e..0000000000 --- a/docs/public/assets/code/angular/src/polyfills.ts +++ /dev/null @@ -1,3 +0,0 @@ -import 'core-js/proposals/reflect-metadata' -import './zone-flags' -import 'zone.js/dist/zone' diff --git a/docs/public/assets/code/angular/src/styles.scss b/docs/public/assets/code/angular/src/styles.scss deleted file mode 100644 index 89930129f8..0000000000 --- a/docs/public/assets/code/angular/src/styles.scss +++ /dev/null @@ -1,12 +0,0 @@ -// Resets CSS for all browser -@forward '@baloise/ds-styles/css/normalize'; -@forward '@baloise/ds-styles/css/structure'; - -// Custom font faces -@forward '@baloise/ds-styles/css/font'; - -// Core CSS, always required -@forward '@baloise/ds-styles/css/core'; - -// CSS utilities classes (optional) -@forward '@baloise/ds-styles/css/utilities/all'; diff --git a/docs/public/assets/code/angular/src/typings.d.ts b/docs/public/assets/code/angular/src/typings.d.ts deleted file mode 100644 index d1549df37c..0000000000 --- a/docs/public/assets/code/angular/src/typings.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -/* SystemJS module definition */ -declare var module: NodeModule -interface NodeModule { - id: string -} diff --git a/docs/public/assets/code/angular/src/zone-flags.ts b/docs/public/assets/code/angular/src/zone-flags.ts deleted file mode 100644 index fdd92c3976..0000000000 --- a/docs/public/assets/code/angular/src/zone-flags.ts +++ /dev/null @@ -1,5 +0,0 @@ -// disable patching requestAnimationFrame -;(window as any).__Zone_disable_requestAnimationFrame = true - -// disable patching custom elements (our web components) -;(window as any).__Zone_disable_customElements = true diff --git a/docs/public/assets/code/angular/tsconfig.json b/docs/public/assets/code/angular/tsconfig.json deleted file mode 100644 index 68339e08bb..0000000000 --- a/docs/public/assets/code/angular/tsconfig.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "compileOnSave": false, - "compilerOptions": { - "baseUrl": "./", - "outDir": "./dist/out-tsc", - "sourceMap": true, - "declaration": false, - "downlevelIteration": true, - "experimentalDecorators": true, - "moduleResolution": "node", - "importHelpers": true, - "target": "es2015", - "module": "es2020", - "lib": ["es2018", "dom"] - } -} diff --git a/docs/public/assets/code/html/index.html b/docs/public/assets/code/html/index.html deleted file mode 100644 index af2db41a60..0000000000 --- a/docs/public/assets/code/html/index.html +++ /dev/null @@ -1,27 +0,0 @@ - - - -
- - Design System - -
- - - Welcome to the - Baloise Design System - - -
-

- The Baloise Design System consists of UI components and a clearly defined visual style, released as both code - implementations and design artifacts to build any number of web applications. -

- Check out the Documentation -
- - - - - - diff --git a/docs/public/assets/code/html/index.ts b/docs/public/assets/code/html/index.ts deleted file mode 100644 index f5b0b00e57..0000000000 --- a/docs/public/assets/code/html/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -// Resets CSS for all browser -import '@baloise/ds-styles/css/normalize.css' -import '@baloise/ds-styles/css/structure.css' - -// Custom font faces -import '@baloise/ds-styles/css/font.css' - -// Core CSS, always required -import '@baloise/ds-styles/css/core.css' - -// CSS utilities classes (optional) -import '@baloise/ds-styles/css/utilities/all' - -import { defineCustomElements } from '@baloise/ds-core/loader' -import { balSnackbarController, BalToastController } from '@baloise/ds-core' - -defineCustomElements() -window.balSnackbarController = balSnackbarController -window.BalToastController = BalToastController diff --git a/docs/public/assets/code/react/package.json b/docs/public/assets/code/react/package.json deleted file mode 100644 index c05496babb..0000000000 --- a/docs/public/assets/code/react/package.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "dependencies": { - "@baloise/ds-react": "latest", - "@baloise/ds-styles": "latest", - "@types/node": "~12.0.0", - "@types/react": "~18.2.0", - "@types/react-dom": "~18.2.0", - "react": "~18.2.0", - "react-dom": "~18.2.0", - "react-scripts": "4.0.3", - "typescript": "~4.8.2" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build" - } -} diff --git a/docs/public/assets/code/react/public/index.html b/docs/public/assets/code/react/public/index.html deleted file mode 100644 index 1c9403ee87..0000000000 --- a/docs/public/assets/code/react/public/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - -
- - diff --git a/docs/public/assets/code/react/src/App.tsx b/docs/public/assets/code/react/src/App.tsx deleted file mode 100644 index e2310bd954..0000000000 --- a/docs/public/assets/code/react/src/App.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' -import { useBaloiseDesignSystem, BalApp } from '@baloise/ds-react' - -import Example from './Example' - -export default function App() { - useBaloiseDesignSystem() - - return ( - -
- -
- - ) -} diff --git a/docs/public/assets/code/react/src/AppFullscreen.tsx b/docs/public/assets/code/react/src/AppFullscreen.tsx deleted file mode 100644 index 608d7ccce2..0000000000 --- a/docs/public/assets/code/react/src/AppFullscreen.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' -import { useBaloiseDesignSystem, BalApp } from '@baloise/ds-react' - -import Example from './Example' - -export default function App() { - useBaloiseDesignSystem() - - return ( - - - - ) -} diff --git a/docs/public/assets/code/react/src/AppProject.tsx b/docs/public/assets/code/react/src/AppProject.tsx deleted file mode 100644 index 9f219aa2d6..0000000000 --- a/docs/public/assets/code/react/src/AppProject.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react' -import { - useBaloiseDesignSystem, - BalApp, - BalNavbar, - BalNavbarBrand, - BalStage, - BalStageBody, - BalHeading, - BalButton, - BalFooter, -} from '@baloise/ds-react' - -export default function App() { - useBaloiseDesignSystem() - - return ( - -
- - - Design System - - -
- - - Welcome to the - Baloise Design System - - -
-

- The Baloise Design System consists of UI components and a clearly defined visual style, released as both code - implementations and design artifacts to build any number of web applications. -

- - Check out the Documentation - -
- - - ) -} diff --git a/docs/public/assets/code/react/src/index.tsx b/docs/public/assets/code/react/src/index.tsx deleted file mode 100644 index 03605e88b8..0000000000 --- a/docs/public/assets/code/react/src/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react' -import ReactDOM from 'react-dom' - -// Resets CSS for all browser -import '@baloise/ds-styles/css/normalize.css' -import '@baloise/ds-styles/css/structure.css' - -// Custom font faces -import '@baloise/ds-styles/css/font.css' - -// Core CSS, always required -import '@baloise/ds-styles/css/core.css' - -// CSS utilities classes (optional) -import '@baloise/ds-styles/css/utilities/all.css' - -import App from './App' - -ReactDOM.render( - - - , - document.getElementById('root'), -) diff --git a/docs/public/assets/code/react/src/react-app-env.d.ts b/docs/public/assets/code/react/src/react-app-env.d.ts deleted file mode 100644 index 6431bc5fc6..0000000000 --- a/docs/public/assets/code/react/src/react-app-env.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/docs/public/assets/code/react/tsconfig.json b/docs/public/assets/code/react/tsconfig.json deleted file mode 100644 index 9d379a3c4a..0000000000 --- a/docs/public/assets/code/react/tsconfig.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "lib": ["dom", "dom.iterable", "esnext"], - "allowJs": true, - "skipLibCheck": true, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noFallthroughCasesInSwitch": true, - "module": "esnext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx" - }, - "include": ["src"] -} diff --git a/docs/public/assets/css/framework.css b/docs/public/assets/css/framework.css index 157a5da64d..77c503f648 100644 --- a/docs/public/assets/css/framework.css +++ b/docs/public/assets/css/framework.css @@ -10,7 +10,6 @@ font-weight: bold; height: 28px; justify-content: center; - margin-top: 6px; padding: 8px 7px; background-color: rgba(30, 167, 253, 0.07); color: #d9304c; diff --git a/docs/public/assets/css/preview.css b/docs/public/assets/css/preview.css index 17392bafe6..51417a5fc3 100644 --- a/docs/public/assets/css/preview.css +++ b/docs/public/assets/css/preview.css @@ -1,7 +1,5 @@ #storybook-docs > .sbdocs-wrapper { - /* padding: 0 4rem 4rem 4rem; */ padding: 1rem 3rem 3rem 3rem; - justify-content: flex-start; } #storybook-docs > .sbdocs-wrapper > .sbdocs-content { @@ -567,3 +565,7 @@ div.has-visible-overflow > .docs-story > div:nth-child(2) { background-color: #ced0d8 !important; color: var(--bal-color-primary-6) !important; } + +.radius-bottom-large { + border-radius: 0 0 12px 12px !important; +} diff --git a/docs/public/assets/css/storybook.css b/docs/public/assets/css/storybook.css index 4b1390a4ec..0cb49a8d39 100644 --- a/docs/public/assets/css/storybook.css +++ b/docs/public/assets/css/storybook.css @@ -123,6 +123,7 @@ html { background-color: #f6f6f6; border-radius: 4px; box-shadow: 0 0 10px 0 rgba(0, 7, 57, 0.15); + z-index: 9999; } .my-cookie strong { diff --git a/docs/public/assets/images/favicon/android-chrome-192x192.png b/docs/public/assets/images/favicon/android-chrome-192x192.png deleted file mode 100644 index 8eae9a5f28..0000000000 Binary files a/docs/public/assets/images/favicon/android-chrome-192x192.png and /dev/null differ diff --git a/docs/public/assets/images/favicon/android-chrome-512x512.png b/docs/public/assets/images/favicon/android-chrome-512x512.png deleted file mode 100644 index 6d5cc1ce9d..0000000000 Binary files a/docs/public/assets/images/favicon/android-chrome-512x512.png and /dev/null differ diff --git a/docs/public/assets/images/favicon/apple-touch-icon.png b/docs/public/assets/images/favicon/apple-touch-icon.png deleted file mode 100644 index daf3cf6a5c..0000000000 Binary files a/docs/public/assets/images/favicon/apple-touch-icon.png and /dev/null differ diff --git a/docs/public/assets/images/favicon/favicon-16x16.png b/docs/public/assets/images/favicon/favicon-16x16.png deleted file mode 100644 index ddfad32c15..0000000000 Binary files a/docs/public/assets/images/favicon/favicon-16x16.png and /dev/null differ diff --git a/docs/public/assets/images/favicon/favicon-32x32.png b/docs/public/assets/images/favicon/favicon-32x32.png deleted file mode 100644 index eb3e28ea0d..0000000000 Binary files a/docs/public/assets/images/favicon/favicon-32x32.png and /dev/null differ diff --git a/docs/public/assets/images/favicon/favicon.ico b/docs/public/assets/images/favicon/favicon.ico deleted file mode 100644 index 8314eb1ecf..0000000000 Binary files a/docs/public/assets/images/favicon/favicon.ico and /dev/null differ diff --git a/docs/public/assets/images/favicon/site.webmanifest b/docs/public/assets/images/favicon/site.webmanifest deleted file mode 100644 index 0b08af126b..0000000000 --- a/docs/public/assets/images/favicon/site.webmanifest +++ /dev/null @@ -1,11 +0,0 @@ -{ - "name": "", - "short_name": "", - "icons": [ - { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, - { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } - ], - "theme_color": "#ffffff", - "background_color": "#ffffff", - "display": "standalone" -} diff --git a/docs/public/vite.svg b/docs/public/vite.svg new file mode 100644 index 0000000000..e7b8dfb1b2 --- /dev/null +++ b/docs/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/src/assets/data/brand-icons.json b/docs/src/assets/data/brand-icons.json new file mode 100644 index 0000000000..aca89f5e51 --- /dev/null +++ b/docs/src/assets/data/brand-icons.json @@ -0,0 +1,1633 @@ +[ + "youngo-banking-for-employees-tangerine", + "youngo-banking-for-employees-red", + "youngo-banking-for-employees-purple", + "youngo-banking-for-employees-green", + "world-trip-tangerine", + "world-trip-red", + "world-trip-purple", + "world-trip-green", + "wind-turbine-tangerine", + "wind-turbine-red", + "wind-turbine-purple", + "wind-turbine-green", + "wheelchair-tangerine", + "wheelchair-red", + "wheelchair-purple", + "wheelchair-green", + "watch-tangerine", + "watch-red", + "watch-purple", + "watch-green", + "wasser-tangerine", + "wasser-red", + "wasser-purple", + "wasser-green", + "warranty-tangerine", + "warranty-red", + "warranty-purple", + "warranty-green", + "warranty-extension-tangerine-tangerine", + "warranty-extension-red", + "warranty-extension-purple", + "warranty-extension-green", + "visa-debit-card-tangerine", + "visa-debit-card-red", + "visa-debit-card-purple", + "visa-debit-card-green", + "vehicle-interior-insurance-tangerine", + "vehicle-interior-insurance-red", + "vehicle-interior-insurance-purple", + "vehicle-interior-insurance-green", + "vehicle-and-travel-tangerine", + "vehicle-and-travel-red", + "vehicle-and-travel-purple", + "vehicle-and-travel-green", + "vandalism-tangerine", + "vandalism-red", + "vandalism-purple", + "vandalism-green", + "us-citizens-tangerine", + "us-citizens-red", + "us-citizens-purple", + "us-citizens-green", + "trolley-bus-tangerine", + "trolley-bus-red", + "trolley-bus-purple", + "trolley-bus-green", + "travel-insurance-for-air-travel-tangerine", + "travel-insurance-for-air-travel-red", + "travel-insurance-for-air-travel-purple", + "travel-insurance-for-air-travel-green", + "travel-cash-cards-tangerine", + "travel-cash-cards-red", + "travel-cash-cards-purple", + "travel-cash-cards-green", + "transformation-tangerine", + "transformation-red", + "transformation-purple", + "transformation-green", + "top-smart-eco-package-solution-tangerine", + "top-smart-eco-package-solution-red", + "top-smart-eco-package-solution-purple", + "top-smart-eco-package-solution-green", + "together-hands-tangerine", + "together-hands-red", + "together-hands-purple", + "together-hands-green", + "thirdpartydriver-ins-tangerine", + "thirdpartydriver-ins-red", + "thirdpartydriver-ins-purple", + "thirdpartydriver-ins-green", + "theme-fund-tangerine", + "theme-fund-red", + "theme-fund-purple", + "theme-fund-green", + "theft-tangerine", + "theft-red", + "theft-purple", + "theft-green", + "theft-car-tangerine", + "theft-car-red", + "theft-car-purple", + "theft-car-green", + "testament-tangerine", + "testament-red", + "testament-purple", + "testament-green", + "tenant-tangerine", + "tenant-red", + "tenant-purple", + "tenant-green", + "tax-savings-family-tangerine", + "tax-savings-family-red", + "tax-savings-family-purple", + "tax-savings-family-green", + "tax-savings-family-eur-tangerine", + "tax-savings-family-eur-red", + "tax-savings-family-eur-purple", + "tax-savings-family-eur-green", + "task-account-manager-tangerine", + "task-account-manager-red", + "task-account-manager-purple", + "task-account-manager-green", + "target-based-investment-tangerine", + "target-based-investment-red", + "target-based-investment-purple", + "target-based-investment-green", + "tablet-tangerine", + "tablet-red", + "tablet-purple", + "tablet-green", + "systematic-fonds-tangerine", + "systematic-fonds-red", + "systematic-fonds-purple", + "systematic-fonds-green", + "sustainable-investment-tangerine", + "sustainable-investment-red", + "sustainable-investment-purple", + "sustainable-investment-green", + "sustainability-tangerine", + "sustainability-red", + "sustainability-purple", + "sustainability-green", + "supplementary-insurance-uvg-companies-tangerine", + "supplementary-insurance-uvg-companies-red", + "supplementary-insurance-uvg-companies-purple", + "supplementary-insurance-uvg-companies-green", + "success-tangerine", + "success-red", + "success-purple", + "success-green", + "strategy-fund-tangerine", + "strategy-fund-red", + "strategy-fund-purple", + "strategy-fund-green", + "stock-market-retail-clients-tangerine", + "stock-market-retail-clients-red", + "stock-market-retail-clients-purple", + "stock-market-retail-clients-green", + "stock-market-retail-clients-eur-tangerine", + "stock-market-retail-clients-eur-red", + "stock-market-retail-clients-eur-purple", + "stock-market-retail-clients-eur-green", + "stock-market-corporate-clients-tangerine", + "stock-market-corporate-clients-red", + "stock-market-corporate-clients-purple", + "stock-market-corporate-clients-green", + "start-up-tangerine", + "start-up-red", + "start-up-purple", + "start-up-green", + "start-up-costs-tangerine", + "start-up-costs-red", + "start-up-costs-purple", + "start-up-costs-green", + "speech-bubbles-tangerine", + "speech-bubbles-red", + "speech-bubbles-purple", + "speech-bubbles-green", + "software-website-tangerine", + "software-website-red", + "software-website-purple", + "software-website-green", + "software-accounting-tangerine", + "software-accounting-red", + "software-accounting-purple", + "software-accounting-green", + "society-value-tangerine", + "society-value-red", + "society-value-purple", + "society-value-green", + "society-tangerine", + "society-red", + "society-purple", + "society-green", + "soba-start-bonus-tangerine", + "soba-start-bonus-red", + "soba-start-bonus-purple", + "soba-start-bonus-green", + "soba-loyalty-bonus-tangerine", + "soba-loyalty-bonus-red", + "soba-loyalty-bonus-purple", + "soba-loyalty-bonus-green", + "soba-investment-bonus-tangerine", + "soba-investment-bonus-red", + "soba-investment-bonus-purple", + "soba-investment-bonus-green", + "soba-insurance-bonus-tangerine", + "soba-insurance-bonus-red", + "soba-insurance-bonus-purple", + "soba-insurance-bonus-green", + "soba-flexibility-bonus-tangerine", + "soba-flexibility-bonus-red", + "soba-flexibility-bonus-purple", + "soba-flexibility-bonus-green", + "soba-family-tangerine", + "soba-family-red", + "soba-family-purple", + "soba-family-green", + "soba-car-mobility-tangerine", + "soba-car-mobility-red", + "soba-car-mobility-purple", + "soba-car-mobility-green", + "soba-bonus-tangerine", + "soba-bonus-red", + "soba-bonus-purple", + "soba-bonus-green", + "soba-blissful-living-tangerine", + "soba-blissful-living-red", + "soba-blissful-living-purple", + "soba-blissful-living-green", + "sme-tangerine", + "sme-red", + "sme-purple", + "sme-green", + "smart-tangerine", + "smart-red", + "smart-purple", + "smart-green", + "single-item-insurance-tangerine", + "single-item-insurance-red", + "single-item-insurance-purple", + "single-item-insurance-green", + "single-house-tangerine", + "single-house-red", + "single-house-purple", + "single-house-green", + "simple-theft-off-premises-tangerine", + "simple-theft-off-premises-red", + "simple-theft-off-premises-purple", + "simple-theft-off-premises-green", + "selftrade-tangerine", + "selftrade-red", + "selftrade-purple", + "selftrade-green", + "selfonboarding_techn_requirem-tangerine", + "selfonboarding_techn_requirem-purple", + "selfonboarding-techn-requirem-red", + "selfonboarding-techn-requirem-green", + "selfonboarding-legal-requirements-2-tangerine", + "selfonboarding-legal-requirements-2-red", + "selfonboarding-legal-requirements-2-purple", + "selfonboarding-legal-requirements-2-green", + "selfonboarding-legal-requirements-1-tangerine", + "selfonboarding-legal-requirements-1-red", + "selfonboarding-legal-requirements-1-purple", + "selfonboarding-legal-requirements-1-green", + "second-hand-car-tangerine", + "second-hand-car-red", + "second-hand-car-purple", + "second-hand-car-green", + "scooter-tangerine", + "scooter-red", + "scooter-purple", + "scooter-green", + "schoenwetterversicherung-tangerine", + "schoenwetterversicherung-red", + "schoenwetterversicherung-purple", + "schoenwetterversicherung-green", + "savings-comfort-account-tangerine", + "savings-comfort-account-red", + "savings-comfort-account-purple", + "savings-comfort-account-green", + "saving-comfort-kids-tangerine", + "saving-comfort-kids-red", + "saving-comfort-kids-purple", + "saving-comfort-kids-green", + "safe-saving-child-tangerine", + "safe-saving-child-red", + "safe-saving-child-purple", + "safe-saving-child-green", + "safe-plan-tangerine", + "safe-plan-red", + "safe-plan-purple", + "safe-plan-green", + "safe-kids-plan-tangerine", + "safe-kids-plan-red", + "safe-kids-plan-purple", + "safe-kids-plan-green", + "safe-invest-tangerine", + "safe-invest-red", + "safe-invest-purple", + "safe-invest-green", + "rowhouse-tangerine", + "rowhouse-red", + "rowhouse-purple", + "rowhouse-green", + "rocket-tangerine", + "rocket-red", + "rocket-purple", + "rocket-green", + "roadside-assistance-bike-tangerine", + "roadside-assistance-bike-red", + "roadside-assistance-bike-purple", + "roadside-assistance-bike-green", + "road-tangerine", + "road-red", + "road-purple", + "road-green", + "risks-tangerine", + "risks-red", + "risks-purple", + "risks-green", + "risk-management-tangerine", + "risk-management-red", + "risk-management-purple", + "risk-management-green", + "risk-insurance-tangerine", + "risk-insurance-red", + "risk-insurance-purple", + "risk-insurance-green", + "risk-insurance-for-employees-tangerine", + "risk-insurance-for-employees-red", + "risk-insurance-for-employees-purple", + "risk-insurance-for-employees-green", + "return-opportunity-tangerine", + "return-opportunity-red", + "return-opportunity-purple", + "return-opportunity-green", + "retirement-date-tangerine", + "retirement-date-red", + "retirement-date-purple", + "retirement-date-green", + "retail-trade-service-tangerine", + "retail-trade-service-red", + "retail-trade-service-purple", + "retail-trade-service-green", + "rentasafe-time-tangerine", + "rentasafe-time-red", + "rentasafe-time-purple", + "rentasafe-time-option-tangerine", + "rentasafe-time-option-red", + "rentasafe-time-option-purple", + "rentasafe-time-option-green", + "rentasafe-time-green", + "regulation-tangerine", + "regulation-red", + "regulation-purple", + "regulation-green", + "refocus-professional-tangerine", + "refocus-professional-red", + "refocus-professional-purple", + "refocus-professional-green", + "recycling-tangerine", + "recycling-red", + "recycling-purple", + "recycling-green", + "real-estate-tangerine", + "real-estate-red", + "real-estate-purple", + "real-estate-green", + "purchase-pensionfund-tangerine", + "purchase-pensionfund-red", + "purchase-pensionfund-purple", + "purchase-pensionfund-green", + "property-insurance-companies-tangerine", + "property-insurance-companies-red", + "property-insurance-companies-purple", + "property-insurance-companies-green", + "property-fund-tangerine", + "property-fund-red", + "property-fund-purple", + "property-fund-green", + "promotion-of-homeownership-eur-tangerine", + "promotion-of-homeownership-eur-red", + "promotion-of-homeownership-eur-purple", + "promotion-of-homeownership-eur-green", + "promotion-of-home-ownership-tangerine", + "promotion-of-home-ownership-red", + "promotion-of-home-ownership-purple", + "promotion-of-home-ownership-green", + "portfolio-reporting-tangerine", + "portfolio-reporting-red", + "portfolio-reporting-purple", + "portfolio-reporting-green", + "portfolio-construction-tangerine", + "portfolio-construction-red", + "portfolio-construction-purple", + "portfolio-construction-green", + "portable-benefits-account-tangerine", + "portable-benefits-account-red", + "portable-benefits-account-purple", + "portable-benefits-account-green", + "plaster-tangerine", + "plaster-red", + "plaster-purple", + "plaster-green", + "pistol-tangerine", + "pistol-red", + "pistol-purple", + "pistol-green", + "piggy-bank-tangerine", + "piggy-bank-red", + "piggy-bank-purple", + "piggy-bank-green", + "pie-chart-tangerine", + "pie-chart-red", + "pie-chart-purple", + "pie-chart-green", + "photovoltaic-tangerine", + "photovoltaic-red", + "photovoltaic-purple", + "photovoltaic-insurance-retail-clients-tangerine", + "photovoltaic-insurance-retail-clients-red", + "photovoltaic-insurance-retail-clients-purple", + "photovoltaic-insurance-retail-clients-green", + "photovoltaic-green", + "phone-theft-tangerine", + "phone-theft-red", + "phone-theft-purple", + "phone-theft-plus-tangerine", + "phone-theft-plus-red", + "phone-theft-plus-purple", + "phone-theft-plus-green", + "phone-theft-green", + "phone-lost-tangerine", + "phone-lost-red", + "phone-lost-purple", + "phone-lost-green", + "phone-damage-tangerine", + "phone-damage-red", + "phone-damage-purple", + "phone-damage-green", + "philosophy-tangerine", + "philosophy-red", + "philosophy-purple", + "philosophy-green", + "pharmacies-tangerine", + "pharmacies-red", + "pharmacies-purple", + "pharmacies-green", + "petrol-tangerine", + "petrol-red", + "petrol-purple", + "petrol-green", + "pet-insurance_tangerine", + "pet-insurance_red", + "pet-insurance_purple", + "pet-insurance_green", + "perspectiva-collective-foundation-tangerine", + "perspectiva-collective-foundation-red", + "perspectiva-collective-foundation-purple", + "perspectiva-collective-foundation-green", + "personal-loan-tangerine", + "personal-loan-red", + "personal-loan-purple", + "personal-loan-green", + "pensions-wealth-management-tangerine", + "pensions-wealth-management-red", + "pensions-wealth-management-purple", + "pensions-wealth-management-green", + "pensions-and-assets-tangerine", + "pensions-and-assets-red", + "pensions-and-assets-purple", + "pensions-and-assets-green", + "pensions-and-assets-eur-tangerine", + "pensions-and-assets-eur-red", + "pensions-and-assets-eur-purple", + "pensions-and-assets-eur-green", + "pension-versions-tangerine", + "pension-versions-red", + "pension-versions-purple", + "pension-versions-green", + "pension-solutions-tangerine", + "pension-solutions-red", + "pension-solutions-purple", + "pension-solutions-green", + "pension-planning-tangerine", + "pension-planning-red", + "pension-planning-purple", + "pension-planning-green", + "pension-planning-for-employees-tangerine", + "pension-planning-for-employees-red", + "pension-planning-for-employees-purple", + "pension-planning-for-employees-green", + "pension-fund-tangerine", + "pension-fund-red", + "pension-fund-purple", + "pension-fund-green", + "pension-fund-eur-tangerine", + "pension-fund-eur-red", + "pension-fund-eur-purple", + "pension-fund-eur-green", + "pension-disbursement-plans-tangerine", + "pension-disbursement-plans-red", + "pension-disbursement-plans-purple", + "pension-disbursement-plans-green", + "pension-disbursement-plans-eur-tangerine", + "pension-disbursement-plans-eur-red", + "pension-disbursement-plans-eur-purple", + "pension-disbursement-plans-eur-green", + "pension-certificate-explained-tangerine", + "pension-certificate-explained-red", + "pension-certificate-explained-purple", + "pension-certificate-explained-green", + "pedestrian-walking-tangerine", + "pedestrian-walking-red", + "pedestrian-walking-purple", + "pedestrian-walking-green", + "payout-how-tangerine", + "payout-how-red", + "payout-how-purple", + "payout-how-green", + "payout-how-eur-tangerine", + "payout-how-eur-red", + "payout-how-eur-purple", + "payout-how-eur-green", + "payout-ammount-tangerine", + "payout-ammount-red", + "payout-ammount-purple", + "payout-ammount-green", + "payout-ammount-eur-tangerine", + "payout-ammount-eur-red", + "payout-ammount-eur-purple", + "payout-ammount-eur-green", + "partnership-tangerine", + "partnership-red", + "partnership-purple", + "partnership-green", + "partner-vaulue-tangerine", + "partner-vaulue-red", + "partner-vaulue-purple", + "partner-vaulue-green", + "partner-tangerine", + "partner-red", + "partner-purple", + "partner-green", + "painting-business-tangerine", + "painting-business-red", + "painting-business-purple", + "painting-business-green", + "owner-tangerine", + "owner-red", + "owner-purple", + "owner-green", + "outbuilding-tangerine", + "outbuilding-red", + "outbuilding-purple", + "outbuilding-green", + "other-rooms-tangerine", + "other-rooms-red", + "other-rooms-purple", + "other-rooms-green", + "other-more-interaction-tangerine", + "other-more-interaction-red", + "other-more-interaction-purple", + "other-more-interaction-green", + "onlineform-tangerine", + "onlineform-red", + "onlineform-purple", + "onlineform-green", + "online-shopping-tangerine", + "online-shopping-red", + "online-shopping-purple", + "online-shopping-green", + "online-shopping-debit-credit-card-tangerine", + "online-shopping-debit-credit-card-red", + "online-shopping-debit-credit-card-purple", + "online-shopping-debit-credit-card-green", + "online-banking-tangerine", + "online-banking-red", + "online-banking-purple", + "online-banking-green", + "omnium-tangerine", + "omnium-small-purple", + "omnium-small-green", + "omnium-red", + "omnium-purple", + "omnium-green", + "oldtimer-tangerine", + "oldtimer-red", + "oldtimer-purple", + "oldtimer-green", + "office-tangerine", + "office-red", + "office-purple", + "office-green", + "offer-tangerine", + "offer-red", + "offer-purple", + "offer-green", + "occupational-disability-tangerine", + "occupational-disability-red", + "occupational-disability-purple", + "occupational-disability-green", + "objects-ins-2-tangerine", + "objects-ins-2-red", + "objects-ins-2-purple", + "objects-ins-2-green", + "objects-ins-1-tangerine", + "objects-ins-1-red", + "objects-ins-1-purple", + "objects-ins-1-green", + "object-ins-tangerine", + "object-ins-red", + "object-ins-purple", + "object-ins-green", + "new-car-tangrine", + "new-car-red", + "new-car-purple", + "new-car-green", + "natural-hazards-tangerine", + "natural-hazards-red", + "natural-hazards-purple", + "natural-hazards-green", + "motorvehicle-tangerine", + "motorvehicle-red", + "motorvehicle-purple", + "motorvehicle-green", + "motorcycle-dealers-tangerine", + "motorcycle-dealers-red", + "motorcycle-dealers-purple", + "motorcycle-dealers-green", + "motorbike-tangerine", + "motorbike-scooter-ins-youngo-tangerine", + "motorbike-scooter-ins-youngo-red", + "motorbike-scooter-ins-youngo-purple", + "motorbike-scooter-ins-youngo-green", + "motorbike-red", + "motorbike-purple", + "motorbike-green", + "mortgages-tangerine", + "mortgages-red", + "mortgages-purple", + "mortgages-green", + "money-bag-tangerine", + "money-bag-red", + "money-bag-purple", + "money-bag-green", + "mobile-phone-tangerine", + "mobile-phone-red", + "mobile-phone-purple", + "mobile-phone-green", + "mobile-payment-debit-credit-card-tangerine", + "mobile-payment-debit-credit-card-red", + "mobile-payment-debit-credit-card-purple", + "mobile-payment-debit-credit-card-green", + "misfortune-tangerine", + "misfortune-red", + "misfortune-purple", + "misfortune-green", + "medium-term-bond-tangerine", + "medium-term-bond-red", + "medium-term-bond-purple", + "medium-term-bond-green", + "means-of-payment-for-travel-like-foreign-currency-tangerine", + "means-of-payment-for-travel-like-foreign-currency-red", + "means-of-payment-for-travel-like-foreign-currency-purple", + "means-of-payment-for-travel-like-foreign-currency-green", + "martial-arts-tangerine", + "martial-arts-red", + "martial-arts-purple", + "martial-arts-green", + "marten-bite-tangerine", + "marten-bite-red", + "marten-bite-purple", + "marten-bite-green", + "marine-insurance-tangerine", + "marine-insurance-red", + "marine-insurance-purple", + "marine-insurance-green", + "mandatory-accident-tangerine", + "mandatory-accident-red", + "mandatory-accident-purple", + "mandatory-accident-green", + "magnifying-glass-tangerine", + "magnifying-glass-red", + "magnifying-glass-purple", + "magnifying-glass-green", + "maestro-tangerine", + "maestro-red", + "maestro-purple", + "maestro-green", + "luggage-tangerine", + "luggage-red", + "luggage-purple", + "luggage-green", + "loss-tangerine", + "loss-red", + "loss-purple", + "loss-green", + "loft-tangerine", + "loft-red", + "loft-purple", + "loft-green", + "lockcard-tangerine", + "lockcard-red", + "lockcard-purple", + "lockcard-green", + "light-bulb-tangerine", + "light-bulb-red", + "light-bulb-purple", + "light-bulb-green", + "life-insurance-tangerine", + "life-insurance-red", + "life-insurance-purple", + "life-insurance-green", + "life-coach-tangerine", + "life-coach-red", + "life-coach-purple", + "life-coach-green", + "life-annuity-tangerine", + "life-annuity-red", + "life-annuity-purple", + "life-annuity-green", + "liability-umbrella-tangerine", + "liability-umbrella-red", + "liability-umbrella-purple", + "liability-umbrella-green", + "liability-tangerine", + "liability-red", + "liability-purple", + "liability-green", + "liability-companies-tangerine", + "liability-companies-red", + "liability-companies-purple", + "liability-companies-green", + "leaf-tangerine", + "leaf-red", + "leaf-purple", + "leaf-green", + "large-enterprises-tangerine", + "large-enterprises-red", + "large-enterprises-purple", + "large-enterprises-green", + "large-cargo-boat-tangerine", + "large-cargo-boat-red", + "large-cargo-boat-purple", + "large-cargo-boat-green", + "laptop-theft-tangerine", + "laptop-theft-red", + "laptop-theft-purple", + "laptop-theft-green", + "laptop-tangerine", + "laptop-red", + "laptop-purple", + "laptop-lost-tangerine", + "laptop-lost-red", + "laptop-lost-purple", + "laptop-lost-green", + "laptop-green", + "lamp-tangerine", + "lamp-red", + "lamp-purple", + "lamp-green", + "know-how-tangerine", + "know-how-red", + "know-how-purple", + "know-how-green", + "justice-tangerine", + "justice-red", + "justice-purple", + "justice-green", + "ipad-theft-tangerine", + "ipad-theft-red", + "ipad-theft-purple", + "ipad-theft-green", + "ipad-lost-tangerine", + "ipad-lost-red", + "ipad-lost-purple", + "ipad-lost-green", + "investors-value-tangerine", + "investors-value-red", + "investors-value-purple", + "investors-value-green", + "investors-tangerine", + "investors-red", + "investors-purple", + "investors-green", + "investors-eur-tangerine", + "investors-eur-red", + "investors-eur-purple", + "investors-eur-green", + "investor-profile-tangerine", + "investor-profile-red", + "investor-profile-purple", + "investor-profile-green", + "investment-fund-tangerine", + "investment-fund-red", + "investment-fund-purple", + "investment-fund-green", + "investment-fund-account-tangerine", + "investment-fund-account-red", + "investment-fund-account-purple", + "investment-fund-account-green", + "investment-fund-account-2-tangerine", + "investment-fund-account-2-red", + "investment-fund-account-2-purple", + "investment-fund-account-2-green", + "investment-foundation-employee-pension-provision-tangerine", + "investment-foundation-employee-pension-provision-red", + "investment-foundation-employee-pension-provision-purple", + "investment-foundation-employee-pension-provision-green", + "investing-without-consultation-tangerine", + "investing-without-consultation-red", + "investing-without-consultation-purple", + "investing-without-consultation-green", + "investing-with-life-insurance-tangerine", + "investing-with-life-insurance-red", + "investing-with-life-insurance-purple", + "investing-with-life-insurance-green", + "investing-with-consultation-tangerine", + "investing-with-consultation-red", + "investing-with-consultation-purple", + "investing-with-consultation-green", + "investing-tangerine", + "investing-red", + "investing-purple", + "investing-green", + "investing-eur-tangerine", + "investing-eur-red", + "investing-eur-purple", + "investing-eur-green", + "invest_save_chf-tangerine", + "invest_save_chf-red", + "invest_save_chf-purple", + "invest-with-retirement-account-tangerine", + "invest-with-retirement-account-red", + "invest-with-retirement-account-purple", + "invest-with-retirement-account-green", + "invest-save-tangerine", + "invest-save-red", + "invest-save-purple", + "invest-save-green", + "invest-save-eur-tangerine", + "invest-save-eur-red", + "invest-save-eur-purple", + "invest-save-eur-green", + "invest-save-chf-green", + "invest-rule-based-tangerine", + "invest-rule-based-red", + "invest-rule-based-purple", + "invest-rule-based-green", + "insurances-tangerine", + "insurances-red", + "insurances-purple", + "insurances-green", + "individual-private-tangerine", + "individual-private-red", + "individual-private-purple", + "individual-private-green", + "indi-insurance-kids-tangerine", + "indi-insurance-kids-red", + "indi-insurance-kids-purple", + "indi-insurance-kids-green", + "implementation-tangerine", + "implementation-red", + "implementation-purple", + "implementation-green", + "identification-mm-tangerine", + "identification-mm-red", + "identification-mm-purple", + "identification-mm-green", + "identification-m-tangerine", + "identification-m-red", + "identification-m-purple", + "identification-m-green", + "identification-fm-tangerine", + "identification-fm-red", + "identification-fm-purple", + "identification-fm-green", + "identification-ff-tangerine", + "identification-ff-red", + "identification-ff-purple", + "identification-ff-green", + "identification-f-tangerine", + "identification-f-red", + "identification-f-purple", + "identification-f-green", + "household-tangerine", + "household-red", + "household-purple", + "household-plus-tangerine", + "household-plus-red", + "household-plus-purple", + "household-plus-green", + "household-green", + "house-&-home-w-floor-tangerine", + "house-&-home-w-floor-red", + "house-&-home-w-floor-purple", + "house-&-home-w-floor-green", + "houdsehold-younGo-tangerine", + "houdsehold-younGo-red", + "houdsehold-younGo-purple", + "houdsehold-younGo-green", + "homestead-affording-tangerine", + "homestead-affording-red", + "homestead-affording-purple", + "homestead-affording-green", + "homeownership-tangerine", + "homeownership-red", + "homeownership-purple", + "homeownership-green", + "homeowner-tax-saving-tangerine", + "homeowner-tax-saving-red", + "homeowner-tax-saving-purple", + "homeowner-tax-saving-green", + "home-contents-tangerine", + "home-contents-red", + "home-contents-purple", + "home-contents-green", + "home-contents-for-under-30s-youngo-tangerine", + "home-contents-for-under-30s-youngo-red", + "home-contents-for-under-30s-youngo-purple", + "home-contents-for-under-30s-youngo-green", + "home-assistant-tangerine", + "home-assistant-red", + "home-assistant-purple", + "home-assistant-green", + "holiday-palms-tangerine", + "holiday-palms-red", + "holiday-palms-purple", + "holiday-palms-green", + "health-declaration_tangerine", + "health-declaration_red", + "health-declaration_purple", + "health-declaration_green", + "haustech-tangerine", + "haustech-red", + "haustech-purple", + "haustech-green", + "handgrenade-tangerine", + "handgrenade-red", + "handgrenade-purple", + "handgrenade-green", + "hail-tangerine", + "hail-red", + "hail-purple", + "hail-green", + "growth-tangerine", + "growth-red", + "growth-purple", + "growth-green", + "glass-breakage-tangerine", + "glass-breakage-red", + "glass-breakage-purple", + "glass-breakage-green", + "gift-tangerine", + "gift-red", + "gift-purple", + "gift-green", + "gender-neutral-single-with-child-tangerine", + "gender-neutral-single-with-child-red", + "gender-neutral-single-with-child-purple", + "gender-neutral-single-with-child-green", + "gender-neutral-single-tangerine", + "gender-neutral-single-red", + "gender-neutral-single-purple", + "gender-neutral-single-green", + "gender-neutral-family_tangerine", + "gender-neutral-family_red", + "gender-neutral-family_purple", + "gender-neutral-family_green", + "garage-tangerine", + "garage-red", + "garage-purple", + "garage-green", + "gap-insurance-tangerine", + "gap-insurance-red", + "gap-insurance-purple", + "gap-insurance-green", + "gap-car-machinery-tangerine", + "gap-car-machinery-red", + "gap-car-machinery-purple", + "gap-car-machinery-green", + "funnel-tangerine", + "funnel-red", + "funnel-purple", + "funnel-green", + "fund-plan-tangerine", + "fund-plan-red", + "fund-plan-purple", + "fund-plan-green", + "fund-account-kids-tangerine", + "fund-account-kids-red", + "fund-account-kids-purple", + "fund-account-kids-green", + "foreign-currencies-tangerine", + "foreign-currencies-red", + "foreign-currencies-purple", + "foreign-currencies-green", + "fixed-term-deposit-tangerine", + "fixed-term-deposit-red", + "fixed-term-deposit-purple", + "fixed-term-deposit-green", + "fixed-term-deposit-eur-tangerine", + "fixed-term-deposit-eur-red", + "fixed-term-deposit-eur-purple", + "fixed-term-deposit-eur-green", + "fire-retire-early-tangerine", + "fire-retire-early-red", + "fire-retire-early-purple", + "fire-retire-early-green", + "financing-a-multiple-family-dwelling-tangerine", + "financing-a-multiple-family-dwelling-red", + "financing-a-multiple-family-dwelling-purple", + "financing-a-multiple-family-dwelling-green", + "financial-planning-tangerine", + "financial-planning-red", + "financial-planning-purple", + "financial-planning-green", + "figures-and-savings-tangerine", + "figures-and-savings-red", + "figures-and-savings-purple", + "figures-and-savings-green", + "figures-and-savings-eur-tangerine", + "figures-and-savings-eur-red", + "figures-and-savings-eur-purple", + "figures-and-savings-eur-green", + "event-insurance-tangerine", + "event-insurance-red", + "event-insurance-purple", + "event-insurance-green", + "euro-account-tangerine", + "euro-account-red", + "euro-account-purple", + "euro-account-green", + "erweiterte-eeckung-green", + "erweiterte-deckung-tangerine", + "erweiterte-deckung-red", + "erweiterte-deckung-purple", + "error-tangerine", + "error-red", + "error-purple", + "error-green", + "error-404-tangerine", + "error-404-red", + "error-404-purple", + "error-404-green", + "equity-fund-tangerine", + "equity-fund-red", + "equity-fund-purple", + "equity-fund-green", + "environment-value-tangerine", + "environment-value-red", + "environment-value-purple", + "environment-value-green", + "environment-tangerine", + "environment-red", + "environment-purple", + "environment-green", + "entail-gifting-tangerine", + "entail-gifting-red", + "entail-gifting-purple", + "entail-gifting-green", + "engineering-insurance-tangerine", + "engineering-insurance-red", + "engineering-insurance-purple", + "engineering-insurance-green", + "employees-value-tangerine", + "employees-value-red", + "employees-value-purple", + "employees-value-green", + "employees-tangerine", + "employees-red", + "employees-purple", + "employees-green", + "electric-car-ins-tangerine", + "electric-car-ins-red", + "electric-car-ins-purple", + "electric-car-ins-green", + "ecosystem-mobility-tangerine", + "ecosystem-mobility-red", + "ecosystem-mobility-purple", + "ecosystem-mobility-green", + "ecosystem-home-tangerine", + "ecosystem-home-red", + "ecosystem-home-purple", + "ecosystem-home-green", + "ecosystem-finances-tangerine", + "ecosystem-finances-red", + "ecosystem-finances-purple", + "ecosystem-finances-green", + "ecosystem-business-tangerine", + "ecosystem-business-red", + "ecosystem-business-purple", + "ecosystem-business-green", + "e-bike-roadside-assistance-tangerine", + "e-bike-roadside-assistance-red", + "e-bike-roadside-assistance-purple", + "e-bike-roadside-assistance-green", + "e-bike-insurance-tangerine", + "e-bike-insurance-red", + "e-bike-insurance-purple", + "e-bike-insurance-green", + "documents-signature-tangerine", + "documents-signature-red", + "documents-signature-purple", + "documents-signature-green", + "diving-tangerine", + "diving-red", + "diving-purple", + "diving-green", + "diversity-tangerine", + "diversity-red", + "diversity-purple", + "diversity-green", + "diamond-tangerine", + "diamond-red", + "diamond-purple", + "diamond-green", + "delivery-vehicle-tangerine", + "delivery-vehicle-red", + "delivery-vehicle-purple", + "delivery-vehicle-green", + "decision-making-tangerine", + "decision-making-red", + "decision-making-purple", + "decision-making-green", + "debit-credit-card-for-travel-tangerine", + "debit-credit-card-for-travel-red", + "debit-credit-card-for-travel-purple", + "debit-credit-card-for-travel-green", + "deathcase-family-tangerine", + "deathcase-family-red", + "deathcase-family-purple", + "deathcase-family-green", + "death-risk-tangerine", + "death-risk-red", + "death-risk-purple", + "death-risk-green", + "death-cover-tangerine", + "death-cover-red", + "death-cover-prurple", + "death-cover-green", + "damage-parked-car-tangerine", + "damage-parked-car-red", + "damage-parked-car-purple", + "damage-parked-car-green", + "daily-sickness-allowance-tangerine", + "daily-sickness-allowance-red", + "daily-sickness-allowance-purple", + "daily-sickness-allowance-insurance-tangerine", + "daily-sickness-allowance-insurance-red", + "daily-sickness-allowance-insurance-purple", + "daily-sickness-allowance-insurance-green", + "daily-sickness-allowance-insurance-eur-tangerine", + "daily-sickness-allowance-insurance-eur-red", + "daily-sickness-allowance-insurance-eur-purple", + "daily-sickness-allowance-insurance-eur-green", + "daily-sickness-allowance-green", + "daily-sickness-allowance-eur-tangerine", + "daily-sickness-allowance-eur-red", + "daily-sickness-allowance-eur-purple", + "daily-sickness-allowance-eur-green", + "cyber-security-tangerine", + "cyber-security-red", + "cyber-security-purple", + "cyber-security-green", + "customer-card-tangerine", + "customer-card-red", + "customer-card-purple", + "customer-card-green", + "customer-benefits-tangerine", + "customer-benefits-red", + "customer-benefits-purple", + "customer-benefits-green", + "current-account-tangerine", + "current-account-red", + "current-account-purple", + "current-account-green", + "credit-card-tangerine", + "credit-card-red", + "credit-card-purple", + "credit-card-green", + "couch-tangerine", + "couch-red", + "couch-purple", + "couch-green", + "cost-control-debit-credit-card-tangerine", + "cost-control-debit-credit-card-red", + "cost-control-debit-credit-card-purple", + "cost-control-debit-credit-card-green", + "corporate-health-management-tangerine", + "corporate-health-management-red", + "corporate-health-management-purple", + "corporate-health-management-helpline-tangerine", + "corporate-health-management-helpline-red", + "corporate-health-management-helpline-purple", + "corporate-health-management-helpline-green", + "corporate-health-management-green", + "core-skill-insurance-tangerine", + "core-skill-insurance-red", + "core-skill-insurance-purple", + "core-skill-insurance-green", + "contracts-and-companies-tangerine", + "contracts-and-companies-red", + "contracts-and-companies-purple", + "contracts-and-companies-green", + "contractors-liability-tangerine", + "contractors-liability-red", + "contractors-liability-purple", + "contractors-liability-green", + "contents-insurance-tangerine", + "contents-insurance-red", + "contents-insurance-purple", + "contents-insurance-green", + "contact-tangerine", + "contact-red", + "contact-purple", + "contact-old-tangerine", + "contact-old-red", + "contact-old-purple", + "contact-old-green", + "contact-green", + "contact-2-tangerine", + "contact-2-red", + "contact-2-purple", + "contact-2-green", + "construction-tangerine", + "construction-red", + "construction-purple", + "construction-loan-tangerine", + "construction-loan-red", + "construction-loan-purple", + "construction-loan-green", + "construction-loan-eur-tangerine", + "construction-loan-eur-red", + "construction-loan-eur-purple", + "construction-loan-eur-green", + "construction-insurance-tangerine", + "construction-insurance-red", + "construction-insurance-purple", + "construction-insurance-green", + "construction-green", + "comprehensive-insurance-tangerine", + "comprehensive-insurance-red", + "comprehensive-insurance-purple", + "comprehensive-insurance-green", + "commission-tangerine", + "commission-red", + "commission-purple", + "commission-green", + "commercial-legal-expenses-insurance-tangerine", + "commercial-legal-expenses-insurance-red", + "commercial-legal-expenses-insurance-purple", + "commercial-legal-expenses-insurance-green", + "collective-accident-insurance-tangerine", + "collective-accident-insurance-red", + "collective-accident-insurance-purple", + "collective-accident-insurance-green", + "coaching-tangerine", + "coaching-red", + "coaching-purple", + "coaching-green", + "clients-tangerine", + "clients-red", + "clients-purple", + "clients-private-SME-value-tagerine", + "clients-private-SME-value-red", + "clients-private-SME-value-purple", + "clients-private-SME-value-green", + "clients-private-SME-tangerine", + "clients-private-SME-red", + "clients-private-SME-purple", + "clients-private-SME-green", + "clients-green", + "classic-car-insurance-tangerine", + "classic-car-insurance-red", + "classic-car-insurance-purple", + "classic-car-insurance-green", + "claims-notification-vehicle-registration-document-tangerine", + "claims-notification-vehicle-registration-document-red", + "claims-notification-vehicle-registration-document-purple", + "claims-notification-vehicle-registration-document-green", + "claims-notification-tangerine", + "claims-notification-red", + "claims-notification-purple", + "claims-notification-green", + "claims-notification-car-wing-mirror-right-tangerine", + "claims-notification-car-wing-mirror-right-red", + "claims-notification-car-wing-mirror-right-purple", + "claims-notification-car-wing-mirror-right-green", + "claims-notification-car-wing-mirror-left-tangerine", + "claims-notification-car-wing-mirror-left-red", + "claims-notification-car-wing-mirror-left-purple", + "claims-notification-car-wing-mirror-left-green", + "claims-notification-car-windscreen-tangerine", + "claims-notification-car-windscreen-red", + "claims-notification-car-windscreen-purple", + "claims-notification-car-windscreen-green", + "claims-notification-car-side-windows-right-tangerine", + "claims-notification-car-side-windows-right-red", + "claims-notification-car-side-windows-right-purple", + "claims-notification-car-side-windows-right-green", + "claims-notification-car-side-windows-left-tangerine", + "claims-notification-car-side-windows-left-red", + "claims-notification-car-side-windows-left-purple", + "claims-notification-car-side-windows-left-green", + "claims-notification-car-rear-window-tangerine", + "claims-notification-car-rear-window-red", + "claims-notification-car-rear-window-purple", + "claims-notification-car-rear-window-green", + "claims-notification-car-rear-tangerine", + "claims-notification-car-rear-red", + "claims-notification-car-rear-purple", + "claims-notification-car-rear-lights-right-tangerine", + "claims-notification-car-rear-lights-right-red", + "claims-notification-car-rear-lights-right-purple", + "claims-notification-car-rear-lights-right-green", + "claims-notification-car-rear-lights-left-tangerine", + "claims-notification-car-rear-lights-left-red", + "claims-notification-car-rear-lights-left-purple", + "claims-notification-car-rear-lights-left-green", + "claims-notification-car-rear-green", + "claims-notification-car-overview-right-rear-tangerine", + "claims-notification-car-overview-right-rear-red", + "claims-notification-car-overview-right-rear-purple", + "claims-notification-car-overview-right-rear-green", + "claims-notification-car-overview-right-front-tangerine", + "claims-notification-car-overview-right-front-red", + "claims-notification-car-overview-right-front-purple", + "claims-notification-car-overview-right-front-green", + "claims-notification-car-overview-left-rear-tangerine", + "claims-notification-car-overview-left-rear-red", + "claims-notification-car-overview-left-rear-purple", + "claims-notification-car-overview-left-rear-green", + "claims-notification-car-overview-left-front-tangerine", + "claims-notification-car-overview-left-front-red", + "claims-notification-car-overview-left-front-purple", + "claims-notification-car-overview-left-front-green", + "claims-notification-car-mudguards-right-tangerine", + "claims-notification-car-mudguards-right-red", + "claims-notification-car-mudguards-right-rear-tangerine", + "claims-notification-car-mudguards-right-rear-red", + "claims-notification-car-mudguards-right-rear-purple", + "claims-notification-car-mudguards-right-rear-green", + "claims-notification-car-mudguards-right-purple", + "claims-notification-car-mudguards-right-green", + "claims-notification-car-mudguards-left-tangerine", + "claims-notification-car-mudguards-left-red", + "claims-notification-car-mudguards-left-rear-tangerine", + "claims-notification-car-mudguards-left-rear-red", + "claims-notification-car-mudguards-left-rear-purple", + "claims-notification-car-mudguards-left-rear-green", + "claims-notification-car-mudguards-left-purple", + "claims-notification-car-mudguards-left-green", + "claims-notification-car-mileage-tangerine", + "claims-notification-car-mileage-red", + "claims-notification-car-mileage-purple", + "claims-notification-car-mileage-green", + "claims-notification-car-headlights-right-tangerine", + "claims-notification-car-headlights-right-red", + "claims-notification-car-headlights-right-purple", + "claims-notification-car-headlights-right-green", + "claims-notification-car-headlights-left-tangerine", + "claims-notification-car-headlights-left-red", + "claims-notification-car-headlights-left-purple", + "claims-notification-car-headlights-left-green", + "claims-notification-car-front-tangerine", + "claims-notification-car-front-red", + "claims-notification-car-front-purple", + "claims-notification-car-front-green", + "claims-notification-car-doors-right-tangerine", + "claims-notification-car-doors-right-red", + "claims-notification-car-doors-right-purple", + "claims-notification-car-doors-right-green", + "claims-notification-car-doors-left-tangerine", + "claims-notification-car-doors-left-red", + "claims-notification-car-doors-left-purple", + "claims-notification-car-doors-left-green", + "cigarette-smoke-tangerine", + "cigarette-smoke-red", + "cigarette-smoke-purple", + "cigarette-smoke-green", + "chess-knight-tangerine", + "chess-knight-red", + "chess-knight-purple", + "chess-knight-green", + "check-garage-tangerine", + "check-garage-red", + "check-garage-purple", + "check-garage-green", + "charging-station-tangerine", + "charging-station-red", + "charging-station-purple", + "charging-station-green", + "change-address-tangerine", + "change-address-red", + "change-address-purple", + "change-address-green", + "cellar-tangerine", + "cellar-red", + "cellar-purple", + "cellar-green", + "catering-tangerine", + "catering-red", + "catering-purple", + "catering-green", + "cash-tangerine", + "cash-red", + "cash-purple", + "cash-green", + "carrier-liability-tangerine", + "carrier-liability-red", + "carrier-liability-purple", + "carrier-liability-green", + "careful-tangerine", + "careful-red", + "careful-purple", + "careful-green", + "cards-tangerine", + "cards-red", + "cards-purple", + "cards-green", + "car_stormy_weather_green", + "car_rockfall_nature_tangerine", + "car_rockfall_nature_green", + "car_on_fire_tangerine", + "car_on_fire_red", + "car_on_fire_green", + "car-tangerine", + "car-stormy-weather-tangerine", + "car-stormy-weather-red", + "car-stormy-weather-purple", + "car-rockfall-nature-red", + "car-rockfall-nature-purple", + "car-red", + "car-purple", + "car-on-fire-purple", + "car-interior-insurance-tangerine", + "car-interior-insurance-red", + "car-interior-insurance-purple", + "car-interior-insurance-green", + "car-insurance-youngo-tangerine", + "car-insurance-youngo-red", + "car-insurance-youngo-purple", + "car-insurance-youngo-green", + "car-ins-percent-tangerine", + "car-ins-percent-red", + "car-ins-percent-purple", + "car-ins-percent-green", + "car-hire-insurance-tangerine", + "car-hire-insurance-red", + "car-hire-insurance-purple", + "car-hire-insurance-green", + "car-headlights-right-tangerine", + "car-headlights-right-red", + "car-headlights-right-purple", + "car-headlights-right-green", + "car-green", + "car-dealership-tangerine", + "car-dealership-red", + "car-dealership-purple", + "car-dealership-green", + "car-crash-with-animal-tangerine", + "car-crash-with-animal-red", + "car-crash-with-animal-purple", + "car-crash-with-animal-green", + "car-crash-two-cars-tangerine", + "car-crash-two-cars-red", + "car-crash-two-cars-purple", + "car-crash-two-cars-green", + "car-crash-self-inflicted-tangerine", + "car-crash-self-inflicted-red", + "car-crash-self-inflicted-purple", + "car-crash-self-inflicted-green", + "cancellation-costs-tangerine", + "cancellation-costs-red", + "cancellation-costs-purple", + "cancellation-costs-green", + "camper-tangerine", + "camper-red", + "camper-purple", + "camper-green", + "camera-tangerine", + "camera-red", + "camera-purple", + "camera-green", + "calculator-tangerine", + "calculator-red", + "calculator-purple", + "calculator-green", + "cabriolet-car-insurance-tangerine", + "cabriolet-car-insurance-red", + "cabriolet-car-insurance-purple", + "cabriolet-car-insurance-green", + "business-credit-card-tangerine", + "business-credit-card-red", + "business-credit-card-purple", + "business-credit-card-green", + "building-tangerine", + "building-red", + "building-purple", + "building-interior-tangerine", + "building-interior-purple", + "building-interior-green", + "building-insurance-tangerine", + "building-insurance-red", + "building-insurance-purple", + "building-insurance-green", + "building-green", + "building-damage-tangerine", + "building-damage-red", + "building-damage-purple", + "building-damage-green", + "bond-fund-tangerine", + "bond-fund-red", + "bond-fund-purple", + "bond-fund-green", + "boat-insurance-tangerine", + "boat-insurance-red", + "boat-insurance-purple", + "boat-insurance-green", + "blog-tangerine", + "blog-red", + "blog-purple", + "blog-green", + "bike-road-assistance-tangerine", + "bike-road-assistance-red", + "bike-road-assistance-purple", + "bike-road-assistance-green", + "bicycle-insurance-tangerine", + "bicycle-insurance-red", + "bicycle-insurance-purple", + "bicycle-insurance-green", + "benefits-tangerine", + "benefits-red", + "benefits-purple", + "benefits-green", + "bar-chart-tangerine", + "bar-chart-red", + "bar-chart-purple", + "bar-chart-green", + "banking-solution-youngo-tangerine", + "banking-solution-youngo-red", + "banking-solution-youngo-purple", + "banking-solution-youngo-green", + "banking-solution-tangerine", + "banking-solution-red", + "banking-solution-purple", + "banking-solution-green", + "banking-solution-easyplus-tangerine", + "banking-solution-easyplus-red", + "banking-solution-easyplus-purple", + "banking-solution-easyplus-green", + "banking-service-tangerine", + "banking-service-red", + "banking-service-purple", + "banking-service-green", + "baloisecargo-goods-insurance-tangerine", + "baloisecargo-goods-insurance-red", + "baloisecargo-goods-insurance-purple", + "baloisecargo-goods-insurance-green", + "baloisecargo-freight-carrier-tangerine", + "baloisecargo-freight-carrier-red", + "baloisecargo-freight-carrier-purple", + "baloisecargo-freight-carrier-green", + "baloise-life-plus-tangerine", + "baloise-life-plus-red", + "baloise-life-plus-purple", + "baloise-life-plus-green", + "balanced-tangerine", + "balanced-red", + "balanced-purple", + "balanced-green", + "avatar-woman-tangerine", + "avatar-woman-red", + "avatar-woman-purple", + "avatar-woman-green", + "avatar-men-tangerine", + "avatar-men-red", + "avatar-men-purple", + "avatar-men-green", + "asset-management-tangerine", + "asset-management-red", + "asset-management-purple", + "asset-management-green", + "asset-management-eur-tangerine", + "asset-management-eur-red", + "asset-management-eur-purple", + "asset-management-eur-green", + "asset-management-2-tangerine", + "asset-management-2-red", + "asset-management-2-purple", + "asset-management-2-green", + "asset-management-2-eur-tangerine", + "asset-management-2-eur-red", + "asset-management-2-eur-purple", + "asset-management-2-eur-green", + "asset-building-tangerine", + "asset-building-red", + "asset-building-purple", + "asset-building-green", + "appartment-tangerine", + "appartment-red", + "appartment-purple", + "appartment-green", + "animal-owners-liability-tangerine", + "animal-owners-liability-red", + "animal-owners-liability-purple", + "animal-owners-liability-green", + "accounts-tangerine", + "accounts-savings-tangerine", + "accounts-savings-red", + "accounts-savings-purple", + "accounts-savings-green", + "accounts-red", + "accounts-purple", + "accounts-green", + "accounts-eur-tangerine", + "accounts-eur-red", + "accounts-eur-purple", + "accounts-eur-green", + "accident-insurance-short-term-scenario-tangerine", + "accident-insurance-short-term-scenario-red", + "accident-insurance-short-term-scenario-purple", + "accident-insurance-short-term-scenario-green", + "accident-insurance-for-employees-tangerine", + "accident-insurance-for-employees-red", + "accident-insurance-for-employees-purple", + "accident-insurance-for-employees-green", + "accident-insurance-domestic-workers-tangerine", + "accident-insurance-domestic-workers-red", + "accident-insurance-domestic-workers-purple", + "accident-insurance-domestic-workers-green", + "Omnium-small-tangerine", + "Omnium-small-red", + "3d-printer-insurance-tangerine", + "3d-printer-insurance-red", + "3d-printer-insurance-purple", + "3d-printer-insurance-green" +] \ No newline at end of file diff --git a/docs/src/assets/data/commands.json b/docs/src/assets/data/commands.json new file mode 100644 index 0000000000..6687c70e73 --- /dev/null +++ b/docs/src/assets/data/commands.json @@ -0,0 +1,345 @@ +[ + { + "name": "balToastFind", + "description": [ + "Returns the visible toasts." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-toast.types.ts", + "component": "bal-toast" + }, + { + "name": "balTabsFindActionButton", + "description": [ + "Returns the action button element." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-tabs.types.ts", + "component": "bal-tabs" + }, + { + "name": "balTabsFindItems", + "description": [ + "Returns the tab items." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-tabs.types.ts", + "component": "bal-tabs" + }, + { + "name": "balTabsFindLabel", + "description": [ + "Returns the label of the tab item." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-tabs.types.ts", + "component": "bal-tabs" + }, + { + "name": "balTabsShouldHaveItems", + "description": [ + "Assert that the tab has the given item." + ], + "signature": "(\n labels: string[],\n dataType?: 'label' | 'value',\n options?: Partial,\n ): Chainable", + "path": "packages/testing/src/commands/custom/bal-tabs.types.ts", + "component": "bal-tabs" + }, + { + "name": "balTabItemShouldHaveState", + "description": [ + "Assert that the tab item has the given state." + ], + "signature": "(\n state: 'done' | 'failed' | 'active' | 'disabled',\n options?: Partial,\n ): Chainable", + "path": "packages/testing/src/commands/custom/bal-tabs.types.ts", + "component": "bal-tabs" + }, + { + "name": "balTabItemShouldBeActive", + "description": [ + "Assert that the tab item is active or not." + ], + "signature": "(active?: boolean, options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-tabs.types.ts", + "component": "bal-tabs" + }, + { + "name": "balStepsFindItems", + "description": [ + "Returns the tab items." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-steps.types.ts", + "component": "bal-steps" + }, + { + "name": "balStepsFindLabel", + "description": [ + "Returns the label of the tab item." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-steps.types.ts", + "component": "bal-steps" + }, + { + "name": "balStepsShouldHaveItems", + "description": [ + "Assert that the tab has the given item." + ], + "signature": "(\n labels: string[],\n dataType?: 'label' | 'value',\n options?: Partial,\n ): Chainable", + "path": "packages/testing/src/commands/custom/bal-steps.types.ts", + "component": "bal-steps" + }, + { + "name": "balStepsItemShouldHaveState", + "description": [ + "Assert that the tab item has the given state." + ], + "signature": "(\n state: 'done' | 'failed' | 'active' | 'disabled',\n options?: Partial,\n ): Chainable", + "path": "packages/testing/src/commands/custom/bal-steps.types.ts", + "component": "bal-steps" + }, + { + "name": "balStepsItemShouldNotHaveState", + "description": [ + "Assert that the tab item has not the given state." + ], + "signature": "(\n state: 'done' | 'failed' | 'active' | 'disabled',\n options?: Partial,\n ): Chainable", + "path": "packages/testing/src/commands/custom/bal-steps.types.ts", + "component": "bal-steps" + }, + { + "name": "balSnackbarFind", + "description": [ + "Returns the visible snackbars." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-snackbar.types.ts", + "component": "bal-snackbar" + }, + { + "name": "balSelectFindOptions", + "description": [ + "Returns the select options." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-select.types.ts", + "component": "bal-select" + }, + { + "name": "balSelectFindChips", + "description": [ + "Returns the closable select chips (only with multiselect)." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-select.types.ts", + "component": "bal-select" + }, + { + "name": "balSelectShouldHaveOptions", + "description": [ + "Asserts that the select has the given options." + ], + "signature": "(\n labels: string[],\n dataType?: 'label' | 'value',\n options?: Partial,\n ): Chainable", + "path": "packages/testing/src/commands/custom/bal-select.types.ts", + "component": "bal-select" + }, + { + "name": "balPopupIsOpen", + "description": [ + "Asserts if the popover is open." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-popup.types.ts", + "component": "bal-popup" + }, + { + "name": "balPopupIsClosed", + "description": [ + "Asserts if the popover is closed." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-popup.types.ts", + "component": "bal-popup" + }, + { + "name": "balPopoverToggle", + "description": [ + "Opens and closes the popover." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-popover.types.ts", + "component": "bal-popover" + }, + { + "name": "balPopoverIsOpen", + "description": [ + "Asserts if the popover is open." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-popover.types.ts", + "component": "bal-popover" + }, + { + "name": "balPopoverIsClosed", + "description": [ + "Asserts if the popover is closed." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-popover.types.ts", + "component": "bal-popover" + }, + { + "name": "balPopoverTriggerContains", + "description": [ + "Asserts if the trigger button contains the given content." + ], + "signature": "(\n content: string | number | RegExp,\n options?: Partial,\n ): Chainable", + "path": "packages/testing/src/commands/custom/bal-popover.types.ts", + "component": "bal-popover" + }, + { + "name": "balPopoverContentContains", + "description": [ + "Asserts if the popover menu contains the given content." + ], + "signature": "(\n content: string | number | RegExp,\n options?: Partial,\n ): Chainable", + "path": "packages/testing/src/commands/custom/bal-popover.types.ts", + "component": "bal-popover" + }, + { + "name": "balPaginationFindPages", + "description": [ + "Returns all the page buttons." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-pagination.types.ts", + "component": "bal-pagination" + }, + { + "name": "balPaginationFindCurrentPage", + "description": [ + "Returns the current listed page button." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-pagination.types.ts", + "component": "bal-pagination" + }, + { + "name": "balPaginationFindNextButton", + "description": [ + "Returns the next button to navigate to next page." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-pagination.types.ts", + "component": "bal-pagination" + }, + { + "name": "balPaginationFindPreviousButton", + "description": [ + "Returns the previous button to navigate to previous page." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-pagination.types.ts", + "component": "bal-pagination" + }, + { + "name": "balModalFindOpen", + "description": [ + "Finds the open modal and returns it." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-modal.types.ts", + "component": "bal-modal" + }, + { + "name": "balModalIsOpen", + "description": [ + "Assert if the modal is open." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-modal.types.ts", + "component": "bal-modal" + }, + { + "name": "balModalIsClosed", + "description": [ + "Assert if the modal is closed. Only works for modals,", + "which are not created with the modal service." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-modal.types.ts", + "component": "bal-modal" + }, + { + "name": "balModalClose", + "description": [ + "Closes the selected modal." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-modal.types.ts", + "component": "bal-modal" + }, + { + "name": "balInputStepperIncrease", + "description": [ + "Increases the value of the control" + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-input-stepper.types.ts", + "component": "bal-input-stepper" + }, + { + "name": "balInputStepperDecrease", + "description": [ + "Decreases the value of the control" + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-input-stepper.types.ts", + "component": "bal-input-stepper" + }, + { + "name": "balHintFindOverlay", + "description": [ + "Returns the hint content overlay with the title, content and the close button." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-hint.types.ts", + "component": "bal-hint" + }, + { + "name": "balHintFindCloseButton", + "description": [ + "Returns the close button of the overlay content." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-hint.types.ts", + "component": "bal-hint" + }, + { + "name": "balFieldFindHint", + "description": [ + "Returns the hint component of the label." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-field.types.ts", + "component": "bal-field" + }, + { + "name": "balAccordionIsOpen", + "description": [ + "Asserts if the accordion is open." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-accordion.types.ts", + "component": "bal-accordion" + }, + { + "name": "balAccordionIsClosed", + "description": [ + "Asserts if the accordion is closed." + ], + "signature": "(options?: Partial): Chainable", + "path": "packages/testing/src/commands/custom/bal-accordion.types.ts", + "component": "bal-accordion" + } +] \ No newline at end of file diff --git a/docs/src/assets/data/components.d.ts b/docs/src/assets/data/components.d.ts new file mode 100644 index 0000000000..84d40cc189 --- /dev/null +++ b/docs/src/assets/data/components.d.ts @@ -0,0 +1,442 @@ +/** + * This is an autogenerated file created by the Stencil compiler. + * DO NOT MODIFY IT MANUALLY + */ +interface ComponentCompilerPropertyComplexType { + /** + * The string of the original type annotation in the Stencil source code + */ + original: string + /** + * A 'resolved' type, where e.g. imported types have been resolved and inlined + * + * For instance, an annotation like `(foo: Foo) => string;` will be + * converted to `(foo: { foo: string }) => string;`. + */ + resolved: string + /** + * A record of the types which were referenced in the assorted type + * annotation in the original source file. + */ + references: ComponentCompilerTypeReferences +} +type ComponentCompilerTypeReferences = Record +interface ComponentCompilerTypeReference { + /** + * A type may be defined: + * - locally (in the same file as the component that uses it) + * - globally + * - by importing it into a file (and is defined elsewhere) + */ + location: 'local' | 'global' | 'import' + /** + * The path to the type reference, if applicable (global types should not need a path associated with them) + */ + path?: string + /** + * An ID for this type which is unique within a Stencil project. + */ + id: string +} +interface ComponentCompilerReferencedType { + /** + * The path to the module where the type is declared. + */ + path: string + /** + * The string of the original type annotation in the Stencil source code + */ + declaration: string + /** + * An extracted docstring + */ + docstring: string +} +interface ComponentCompilerEventComplexType { + original: string + resolved: string + references: ComponentCompilerTypeReferences +} +interface ComponentCompilerMethodComplexType { + signature: string + parameters: JsonDocMethodParameter[] + references: ComponentCompilerTypeReferences + return: string +} +/** + * The Type Library holds information about the types which are used in a + * Stencil project. During compilation, Stencil gathers information about the + * types which form part of a component's public API, such as properties + * decorated with `@Prop`, `@Event`, `@Watch`, etc. This type information is + * then added to the Type Library, where it can be accessed later on for + * generating documentation. + * + * This information is included in the file written by the `docs-json` output + * target (see {@link JsonDocs.typeLibrary}). + */ +export type JsonDocsTypeLibrary = Record +/** + * A container for JSDoc metadata for a project + */ +export interface JsonDocs { + /** + * The metadata for the JSDocs for each component in a Stencil project + */ + components: JsonDocsComponent[] + /** + * The timestamp at which the metadata was generated, in the format YYYY-MM-DDThh:mm:ss + */ + timestamp: string + compiler: { + /** + * The name of the compiler that generated the metadata + */ + name: string + /** + * The version of the Stencil compiler that generated the metadata + */ + version: string + /** + * The version of TypeScript that was used to generate the metadata + */ + typescriptVersion: string + } + typeLibrary: JsonDocsTypeLibrary +} +/** + * Container for JSDoc metadata for a single Stencil component + */ +export interface JsonDocsComponent { + /** + * The directory containing the Stencil component, minus the file name. + * + * @example /workspaces/stencil-project/src/components/my-component + */ + dirPath?: string + /** + * The name of the file containing the Stencil component, with no path + * + * @example my-component.tsx + */ + fileName?: string + /** + * The full path of the file containing the Stencil component + * + * @example /workspaces/stencil-project/src/components/my-component/my-component.tsx + */ + filePath?: string + /** + * The path to the component's `readme.md` file, including the filename + * + * @example /workspaces/stencil-project/src/components/my-component/readme.md + */ + readmePath?: string + /** + * The path to the component's `usage` directory + * + * @example /workspaces/stencil-project/src/components/my-component/usage/ + */ + usagesDir?: string + /** + * The encapsulation strategy for a component + */ + encapsulation: 'shadow' | 'scoped' | 'none' + /** + * The tag name for the component, for use in HTML + */ + tag: string + /** + * The contents of a component's `readme.md` that are user generated. + * + * Auto-generated contents are not stored in this reference. + */ + readme: string + /** + * The description of a Stencil component, found in the JSDoc that sits above the component's declaration + */ + docs: string + /** + * JSDoc tags found in the JSDoc comment written atop a component's declaration + */ + docsTags: JsonDocsTag[] + /** + * The text from the class-level JSDoc for a Stencil component, if present. + */ + overview?: string + /** + * A mapping of usage example file names to their contents for the component. + */ + usage: JsonDocsUsage + /** + * Array of metadata for a component's `@Prop`s + */ + props: JsonDocsProp[] + /** + * Array of metadata for a component's `@Method`s + */ + methods: JsonDocsMethod[] + /** + * Array of metadata for a component's `@Event`s + */ + events: JsonDocsEvent[] + /** + * Array of metadata for a component's `@Listen` handlers + */ + listeners: JsonDocsListener[] + /** + * Array of metadata for a component's CSS styling information + */ + styles: JsonDocsStyle[] + /** + * Array of component Slot information, generated from `@slot` tags + */ + slots: JsonDocsSlot[] + /** + * Array of component Parts information, generate from `@part` tags + */ + parts: JsonDocsPart[] + /** + * Array of metadata describing where the current component is used + */ + dependents: string[] + /** + * Array of metadata listing the components which are used in current component + */ + dependencies: string[] + /** + * Describes a tree of components coupling + */ + dependencyGraph: JsonDocsDependencyGraph + /** + * A deprecation reason/description found following a `@deprecated` tag + */ + deprecation?: string +} +export interface JsonDocsDependencyGraph { + [tagName: string]: string[] +} +/** + * A descriptor for a single JSDoc tag found in a block comment + */ +export interface JsonDocsTag { + /** + * The tag name (immediately following the '@') + */ + name: string + /** + * The description that immediately follows the tag name + */ + text?: string +} +export interface JsonDocsValue { + value?: string + type: string +} +/** + * A mapping of file names to their contents. + * + * This type is meant to be used when reading one or more usage markdown files associated with a component. For the + * given directory structure: + * ``` + * src/components/my-component + * โ”œโ”€โ”€ my-component.tsx + * โ””โ”€โ”€ usage + * โ”œโ”€โ”€ bar.md + * โ””โ”€โ”€ foo.md + * ``` + * an instance of this type would include the name of the markdown file, mapped to its contents: + * ```ts + * { + * 'bar': STRING_CONTENTS_OF_BAR.MD + * 'foo': STRING_CONTENTS_OF_FOO.MD + * } + * ``` + */ +export interface JsonDocsUsage { + [key: string]: string +} +/** + * An intermediate representation of a `@Prop` decorated member's JSDoc + */ +export interface JsonDocsProp { + /** + * the name of the prop + */ + name: string + complexType?: ComponentCompilerPropertyComplexType + /** + * the type of the prop, in terms of the TypeScript type system (as opposed to JavaScript's or HTML's) + */ + type: string + /** + * `true` if the prop was configured as "mutable" where it was declared, `false` otherwise + */ + mutable: boolean + /** + * The name of the attribute that is exposed to configure a compiled web component + */ + attr?: string + /** + * `true` if the prop was configured to "reflect" back to HTML where it (the prop) was declared, `false` otherwise + */ + reflectToAttr: boolean + /** + * the JSDoc description text associated with the prop + */ + docs: string + /** + * JSDoc tags associated with the prop + */ + docsTags: JsonDocsTag[] + /** + * The default value of the prop + */ + default?: string + /** + * Deprecation text associated with the prop. This is the text that immediately follows a `@deprecated` tag + */ + deprecation?: string + values: JsonDocsValue[] + /** + * `true` if a component is declared with a '?', `false` otherwise + * + * @example + * ```tsx + * @Prop() componentProps?: any; + * ``` + */ + optional: boolean + /** + * `true` if a component is declared with a '!', `false` otherwise + * + * @example + * ```tsx + * @Prop() componentProps!: any; + * ``` + */ + required: boolean + /** + * `true` if the prop has a `get()`. `false` otherwise + */ + getter: boolean + /** + * `true` if the prop has a `set()`. `false` otherwise + */ + setter: boolean +} +export interface JsonDocsMethod { + name: string + docs: string + docsTags: JsonDocsTag[] + deprecation?: string + signature: string + returns: JsonDocsMethodReturn + parameters: JsonDocMethodParameter[] + complexType: ComponentCompilerMethodComplexType +} +export interface JsonDocsMethodReturn { + type: string + docs: string +} +export interface JsonDocMethodParameter { + name: string + type: string + docs: string +} +export interface JsonDocsEvent { + event: string + bubbles: boolean + cancelable: boolean + composed: boolean + complexType: ComponentCompilerEventComplexType + docs: string + docsTags: JsonDocsTag[] + deprecation?: string + detail: string +} +/** + * Type describing a CSS Style, as described by a JSDoc-style comment + */ +export interface JsonDocsStyle { + /** + * The name of the style + */ + name: string + /** + * The type/description associated with the style + */ + docs: string + /** + * The annotation used in the JSDoc of the style (e.g. `@prop`) + */ + annotation: string + /** + * The mode associated with the style + */ + mode: string | undefined +} +export interface JsonDocsListener { + event: string + target?: string + capture: boolean + passive: boolean +} +/** + * A descriptor for a slot + * + * Objects of this type are translated from the JSDoc tag, `@slot` + */ +export interface JsonDocsSlot { + /** + * The name of the slot. Defaults to an empty string for an unnamed slot. + */ + name: string + /** + * A textual description of the slot. + */ + docs: string +} +/** + * A descriptor of a CSS Shadow Part + * + * Objects of this type are translated from the JSDoc tag, `@part`, or the 'part' + * attribute on a component in TSX + */ +export interface JsonDocsPart { + /** + * The name of the Shadow part + */ + name: string + /** + * A textual description of the Shadow part. + */ + docs: string +} +/** + * Represents a parsed block comment in a CSS, Sass, etc. file for a custom property. + */ +export interface StyleDoc { + /** + * The name of the CSS property + */ + name: string + /** + * The user-defined description of the CSS property + */ + docs: string + /** + * The JSDoc-style annotation (e.g. `@prop`) that was used in the block comment to detect the comment. + * Used to inform Stencil where the start of a new property's description starts (and where the previous description + * ends). + */ + annotation: 'prop' + /** + * The Stencil style-mode that is associated with this property. + */ + mode: string | undefined +} + +export {} + +declare const _default: JsonDocs +export default _default diff --git a/docs/src/assets/data/components.json b/docs/src/assets/data/components.json new file mode 100644 index 0000000000..05ccb7c77c --- /dev/null +++ b/docs/src/assets/data/components.json @@ -0,0 +1,33998 @@ +{ + "compiler": { + "name": "@stencil/core", + "version": "4.38.3", + "typescriptVersion": "5.9.3" + }, + "components": [ + { + "fileName": "bal-accordion.tsx", + "tag": "bal-accordion", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [], + "dependencies": [ + "bal-button" + ], + "dependencyGraph": { + "bal-accordion": [ + "bal-button" + ], + "bal-button": [ + "bal-spinner", + "bal-icon" + ] + }, + "props": [ + { + "name": "active", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": true, + "attr": "active", + "reflectToAttr": true, + "docs": "If `true` the accordion is open.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "card", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "card", + "reflectToAttr": false, + "docs": "If `true` the accordion is used on the bottom of a card", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "closeIcon", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "close-icon", + "reflectToAttr": false, + "docs": "BalIcon of the close trigger button", + "docsTags": [ + { + "name": "default", + "text": "'close'" + } + ], + "default": "'close'", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "closeLabel", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "close-label", + "reflectToAttr": false, + "docs": "Label of the close trigger button", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "debounce", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": false, + "attr": "debounce", + "reflectToAttr": false, + "docs": "Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.", + "docsTags": [ + { + "name": "default", + "text": "0" + } + ], + "default": "0", + "values": [ + { + "type": "number" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "openIcon", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "open-icon", + "reflectToAttr": false, + "docs": "BalIcon of the open trigger button", + "docsTags": [ + { + "name": "default", + "text": "'plus'" + } + ], + "default": "'plus'", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "openLabel", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "open-label", + "reflectToAttr": false, + "docs": "Label of the open trigger button", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [ + { + "name": "dismiss", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "dismiss() => Promise", + "parameters": [], + "docs": "Closes the accordion", + "docsTags": [] + }, + { + "name": "present", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "present() => Promise", + "parameters": [], + "docs": "Opens the accordion", + "docsTags": [] + }, + { + "name": "toggle", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "toggle() => Promise", + "parameters": [], + "docs": "Triggers the accordion", + "docsTags": [] + } + ], + "events": [ + { + "event": "balChange", + "detail": "boolean", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalAccordionChangeDetail", + "resolved": "boolean", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the accordion has opened or closed", + "docsTags": [] + }, + { + "event": "balDidAnimate", + "detail": "boolean", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalAccordionDidAnimateDetail", + "resolved": "boolean", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted after the animation has finished", + "docsTags": [] + }, + { + "event": "balWillAnimate", + "detail": "boolean", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalAccordionWillAnimateDetail", + "resolved": "boolean", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted before the animation starts", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-accordion-details.tsx", + "tag": "bal-accordion-details", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-accordion-summary.tsx", + "tag": "bal-accordion-summary", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [ + { + "name": "trigger", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "trigger", + "reflectToAttr": false, + "docs": "If `true` the whole summary component acts as a trigger and can be clicked", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-accordion-trigger.tsx", + "tag": "bal-accordion-trigger", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [], + "dependencies": [ + "bal-button", + "bal-icon" + ], + "dependencyGraph": { + "bal-accordion-trigger": [ + "bal-button", + "bal-icon" + ], + "bal-button": [ + "bal-spinner", + "bal-icon" + ] + }, + "props": [ + { + "name": "button", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "button", + "reflectToAttr": false, + "docs": "", + "docsTags": [ + { + "name": "deprecated", + "text": "Trigger will be a bal-button" + }, + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "deprecation": "Trigger will be a bal-button", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "closeIcon", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "close-icon", + "reflectToAttr": false, + "docs": "BalIcon of the close trigger button", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "closeLabel", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "close-label", + "reflectToAttr": false, + "docs": "Label of the close trigger button", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "color", + "type": "\"danger\" | \"info\" | \"info-light\" | \"light\" | \"link\" | \"primary\" | \"primary-light\" | \"secondary\" | \"success\" | \"tertiary\" | \"tertiary-green\" | \"tertiary-purple\" | \"tertiary-red\" | \"tertiary-yellow\" | \"text\" | \"warning\"", + "complexType": { + "original": "BalProps.BalButtonColor", + "resolved": "\"danger\" | \"info\" | \"info-light\" | \"light\" | \"link\" | \"primary\" | \"primary-light\" | \"secondary\" | \"success\" | \"tertiary\" | \"tertiary-green\" | \"tertiary-purple\" | \"tertiary-red\" | \"tertiary-yellow\" | \"text\" | \"warning\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "color", + "reflectToAttr": false, + "docs": "The color to use from your application's color palette.", + "docsTags": [ + { + "name": "default", + "text": "'info'" + } + ], + "default": "'info'", + "values": [ + { + "value": "danger", + "type": "string" + }, + { + "value": "info", + "type": "string" + }, + { + "value": "info-light", + "type": "string" + }, + { + "value": "light", + "type": "string" + }, + { + "value": "link", + "type": "string" + }, + { + "value": "primary", + "type": "string" + }, + { + "value": "primary-light", + "type": "string" + }, + { + "value": "secondary", + "type": "string" + }, + { + "value": "success", + "type": "string" + }, + { + "value": "tertiary", + "type": "string" + }, + { + "value": "tertiary-green", + "type": "string" + }, + { + "value": "tertiary-purple", + "type": "string" + }, + { + "value": "tertiary-red", + "type": "string" + }, + { + "value": "tertiary-yellow", + "type": "string" + }, + { + "value": "text", + "type": "string" + }, + { + "value": "warning", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "expanded", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "expanded", + "reflectToAttr": false, + "docs": "If `true` the button is aligned over the whole width", + "docsTags": [ + { + "name": "default", + "text": "true" + } + ], + "default": "true", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "openIcon", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "open-icon", + "reflectToAttr": false, + "docs": "BalIcon of the open trigger button", + "docsTags": [ + { + "name": "default", + "text": "'caret-down'" + } + ], + "default": "'caret-down'", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "openLabel", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "open-label", + "reflectToAttr": false, + "docs": "Label of the open trigger button", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "size", + "type": "\"\" | \"small\"", + "complexType": { + "original": "BalProps.BalButtonSize", + "resolved": "\"\" | \"small\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "size", + "reflectToAttr": false, + "docs": "Size of the button", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "\"\"" + }, + { + "value": "small", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "variant", + "type": "\"button\" | \"icon\" | \"text\"", + "complexType": { + "original": "BalProps.BalAccordionTriggerVariant", + "resolved": "\"button\" | \"icon\" | \"text\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "variant", + "reflectToAttr": false, + "docs": "Defines the nature of the accordion trigger.", + "docsTags": [], + "values": [ + { + "value": "button", + "type": "string" + }, + { + "value": "icon", + "type": "string" + }, + { + "value": "text", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-app.tsx", + "tag": "bal-app", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [ + "bal-doc-app" + ], + "dependencies": [], + "dependencyGraph": { + "bal-doc-app": [ + "bal-app" + ] + }, + "props": [ + { + "name": "animated", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "animated", + "reflectToAttr": true, + "docs": "Disables all animation inside the bal-app. Can be used for simplify e2e testing.", + "docsTags": [ + { + "name": "default", + "text": "true" + } + ], + "default": "true", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [ + { + "name": "setFocus", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "(elements: HTMLElement[]) => Promise", + "parameters": [ + { + "name": "elements", + "type": "HTMLElement[]", + "docs": "" + } + ], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + }, + "HTMLElement": { + "location": "global", + "id": "global::HTMLElement" + } + }, + "return": "Promise" + }, + "signature": "setFocus(elements: HTMLElement[]) => Promise", + "parameters": [ + { + "name": "elements", + "type": "HTMLElement[]", + "docs": "" + } + ], + "docs": "", + "docsTags": [] + } + ], + "events": [ + { + "event": "balAppReady", + "detail": "void", + "bubbles": true, + "complexType": { + "original": "void", + "resolved": "void", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when app is ready and painted.", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-badge.tsx", + "tag": "bal-badge", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [ + "bal-tabs" + ], + "dependencies": [ + "bal-icon" + ], + "dependencyGraph": { + "bal-badge": [ + "bal-icon" + ], + "bal-tabs": [ + "bal-badge" + ] + }, + "props": [ + { + "name": "color", + "type": "\"\" | \"danger\" | \"green\" | \"grey\" | \"purple\" | \"red\" | \"success\" | \"warning\" | \"yellow\"", + "complexType": { + "original": "BalProps.BalBadgeColor", + "resolved": "\"\" | \"danger\" | \"green\" | \"grey\" | \"purple\" | \"red\" | \"success\" | \"warning\" | \"yellow\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "color", + "reflectToAttr": false, + "docs": "Define the color for the badge.", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "\"\"" + }, + { + "value": "danger", + "type": "string" + }, + { + "value": "green", + "type": "string" + }, + { + "value": "grey", + "type": "string" + }, + { + "value": "purple", + "type": "string" + }, + { + "value": "red", + "type": "string" + }, + { + "value": "success", + "type": "string" + }, + { + "value": "warning", + "type": "string" + }, + { + "value": "yellow", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "icon", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "icon", + "reflectToAttr": false, + "docs": "Name of the icon to show. If a icon is present text should be hidden.", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "position", + "type": "\"\" | \"button\" | \"card\" | \"tabs\"", + "complexType": { + "original": "BalProps.BalBadgePosition", + "resolved": "\"\" | \"button\" | \"card\" | \"tabs\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "position", + "reflectToAttr": false, + "docs": "If `true` the badge is added to the top right corner of the card.", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "\"\"" + }, + { + "value": "button", + "type": "string" + }, + { + "value": "card", + "type": "string" + }, + { + "value": "tabs", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "size", + "type": "\"\" | \"large\" | \"small\"", + "complexType": { + "original": "BalProps.BalBadgeSize", + "resolved": "\"\" | \"large\" | \"small\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "size", + "reflectToAttr": false, + "docs": "Define the size of badge. Small is recommended for tabs.", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "\"\"" + }, + { + "value": "large", + "type": "string" + }, + { + "value": "small", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-button.tsx", + "tag": "bal-button", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [ + "bal-accordion", + "bal-accordion-trigger", + "bal-card-button", + "bal-data-value", + "bal-hint", + "bal-input-stepper", + "bal-nav", + "bal-navbar-brand", + "bal-snackbar" + ], + "dependencies": [ + "bal-spinner", + "bal-icon" + ], + "dependencyGraph": { + "bal-button": [ + "bal-spinner", + "bal-icon" + ], + "bal-accordion": [ + "bal-button" + ], + "bal-accordion-trigger": [ + "bal-button" + ], + "bal-card-button": [ + "bal-button" + ], + "bal-data-value": [ + "bal-button" + ], + "bal-hint": [ + "bal-button" + ], + "bal-input-stepper": [ + "bal-button" + ], + "bal-nav": [ + "bal-button" + ], + "bal-navbar-brand": [ + "bal-button" + ], + "bal-snackbar": [ + "bal-button" + ] + }, + "props": [ + { + "name": "a11yControls", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "a-1-1y-controls", + "reflectToAttr": false, + "docs": "A11y attributes for the native button element.", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "a11yHaspopup", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "a-1-1y-haspopup", + "reflectToAttr": false, + "docs": "A11y attributes for the native button element.", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "a11yLabel", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "a-1-1y-label", + "reflectToAttr": false, + "docs": "A11y attributes for the native button element.", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "a11yTitle", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "a-1-1y-title", + "reflectToAttr": false, + "docs": "A11y attributes for the native button element.", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "balPopup", + "type": "any", + "complexType": { + "original": "any", + "resolved": "any", + "references": {} + }, + "mutable": false, + "attr": "bal-popup", + "reflectToAttr": false, + "docs": "If `true` the button is a popup.", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "any" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "color", + "type": "\"danger\" | \"info\" | \"info-light\" | \"light\" | \"link\" | \"primary\" | \"primary-light\" | \"secondary\" | \"success\" | \"tertiary\" | \"tertiary-green\" | \"tertiary-purple\" | \"tertiary-red\" | \"tertiary-yellow\" | \"text\" | \"warning\"", + "complexType": { + "original": "BalProps.BalButtonColor", + "resolved": "\"danger\" | \"info\" | \"info-light\" | \"light\" | \"link\" | \"primary\" | \"primary-light\" | \"secondary\" | \"success\" | \"tertiary\" | \"tertiary-green\" | \"tertiary-purple\" | \"tertiary-red\" | \"tertiary-yellow\" | \"text\" | \"warning\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "color", + "reflectToAttr": false, + "docs": "The color to use from your application's color palette.", + "docsTags": [ + { + "name": "default", + "text": "'primary'" + } + ], + "default": "'primary'", + "values": [ + { + "value": "danger", + "type": "string" + }, + { + "value": "info", + "type": "string" + }, + { + "value": "info-light", + "type": "string" + }, + { + "value": "light", + "type": "string" + }, + { + "value": "link", + "type": "string" + }, + { + "value": "primary", + "type": "string" + }, + { + "value": "primary-light", + "type": "string" + }, + { + "value": "secondary", + "type": "string" + }, + { + "value": "success", + "type": "string" + }, + { + "value": "tertiary", + "type": "string" + }, + { + "value": "tertiary-green", + "type": "string" + }, + { + "value": "tertiary-purple", + "type": "string" + }, + { + "value": "tertiary-red", + "type": "string" + }, + { + "value": "tertiary-yellow", + "type": "string" + }, + { + "value": "text", + "type": "string" + }, + { + "value": "warning", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "disabled", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "disabled", + "reflectToAttr": true, + "docs": "If `true`, the user cannot interact with the button.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "download", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "download", + "reflectToAttr": false, + "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "elementType", + "type": "\"button\" | \"reset\" | \"submit\"", + "complexType": { + "original": "BalProps.BalButtonElementType", + "resolved": "\"button\" | \"reset\" | \"submit\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "element-type", + "reflectToAttr": false, + "docs": "The type of button.", + "docsTags": [ + { + "name": "default", + "text": "'button'" + } + ], + "default": "'button'", + "values": [ + { + "value": "button", + "type": "string" + }, + { + "value": "reset", + "type": "string" + }, + { + "value": "submit", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "expanded", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "expanded", + "reflectToAttr": false, + "docs": "If `true` the button has a full width", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "flat", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "flat", + "reflectToAttr": false, + "docs": "If `true` the button has no padding and a reduced height", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "href", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "href", + "reflectToAttr": false, + "docs": "Specifies the URL of the page the link goes to", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "icon", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "icon", + "reflectToAttr": false, + "docs": "Name of the left button icon", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "iconRight", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "icon-right", + "reflectToAttr": false, + "docs": "Name of the right button icon", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "iconTurn", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "icon-turn", + "reflectToAttr": false, + "docs": "If `true` the icon turns", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "inverted", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "inverted", + "reflectToAttr": false, + "docs": "If `true` the button is inverted", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "isActive", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "is-active", + "reflectToAttr": false, + "docs": "If `true` the button has a active theme", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "loading", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "loading", + "reflectToAttr": false, + "docs": "If `true` the label is hidden and a loading spinner is shown instead.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "name", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "name", + "reflectToAttr": false, + "docs": "The name of the button, which is submitted with the form data.", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "noWrap", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "no-wrap", + "reflectToAttr": false, + "docs": "The label of the button will not break", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "outlined", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "outlined", + "reflectToAttr": false, + "docs": "If `true` the button is outlined", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "rel", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "rel", + "reflectToAttr": false, + "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "rounded", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "rounded", + "reflectToAttr": false, + "docs": "If `true` the button is rounded.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "shadow", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "shadow", + "reflectToAttr": false, + "docs": "If `true` adds a box shadow to improve readability on image background", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "size", + "type": "\"\" | \"small\"", + "complexType": { + "original": "BalProps.BalButtonSize", + "resolved": "\"\" | \"small\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "size", + "reflectToAttr": true, + "docs": "Size of the button", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "\"\"" + }, + { + "value": "small", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "square", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "square", + "reflectToAttr": false, + "docs": "If `true` the width of the buttons is limited", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "target", + "type": "\" _parent\" | \"_blank\" | \"_self\" | \"_top\"", + "complexType": { + "original": "BalProps.BalButtonTarget", + "resolved": "\" _parent\" | \"_blank\" | \"_self\" | \"_top\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "target", + "reflectToAttr": false, + "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.", + "docsTags": [ + { + "name": "default", + "text": "'_self'" + } + ], + "default": "'_self'", + "values": [ + { + "value": " _parent", + "type": "string" + }, + { + "value": "_blank", + "type": "string" + }, + { + "value": "_self", + "type": "string" + }, + { + "value": "_top", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "value", + "type": "number | string", + "complexType": { + "original": "string | number", + "resolved": "number | string", + "references": {} + }, + "mutable": false, + "attr": "value", + "reflectToAttr": false, + "docs": "The value of the button, which is submitted with the form data.", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "number" + }, + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [ + { + "event": "balBlur", + "detail": "void", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalButtonBlurDetail", + "resolved": "void", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the button loses focus.", + "docsTags": [] + }, + { + "event": "balClick", + "detail": "MouseEvent", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalButtonClickDetail", + "resolved": "MouseEvent", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the link element has clicked.", + "docsTags": [] + }, + { + "event": "balDidRender", + "detail": "void", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalButtonDidRenderDetail", + "resolved": "void", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the button has been rendered.", + "docsTags": [] + }, + { + "event": "balFocus", + "detail": "void", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalButtonFocusDetail", + "resolved": "void", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the button has focus.", + "docsTags": [] + }, + { + "event": "balNavigate", + "detail": "MouseEvent", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalButtonNavigateDetail", + "resolved": "MouseEvent", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the link element has clicked.", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [ + { + "event": "click", + "target": "document", + "capture": true, + "passive": false + } + ] + }, + { + "fileName": "bal-button-group.tsx", + "tag": "bal-button-group", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [ + "bal-card-actions", + "bal-hint" + ], + "dependencies": [], + "dependencyGraph": { + "bal-card-actions": [ + "bal-button-group" + ], + "bal-hint": [ + "bal-button-group" + ] + }, + "props": [ + { + "name": "direction", + "type": "\"auto\" | \"column\" | \"row\"", + "complexType": { + "original": "BalProps.BalButtonGroupDirection", + "resolved": "\"auto\" | \"column\" | \"row\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "direction", + "reflectToAttr": false, + "docs": "`auto` will position the button items vertical and full width.\n`row` will force that the buttons are also horizontal on mobile.", + "docsTags": [ + { + "name": "default", + "text": "'auto'" + } + ], + "default": "'auto'", + "values": [ + { + "value": "auto", + "type": "string" + }, + { + "value": "column", + "type": "string" + }, + { + "value": "row", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "position", + "type": "\"\" | \"center\" | \"right\"", + "complexType": { + "original": "BalProps.BalButtonGroupPosition", + "resolved": "\"\" | \"center\" | \"right\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "position", + "reflectToAttr": false, + "docs": "The value of the button, which is submitted with the form data.", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "\"\"" + }, + { + "value": "center", + "type": "string" + }, + { + "value": "right", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "reverse", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "reverse", + "reflectToAttr": false, + "docs": "If `true` the flex direction is used in reverse on mobile.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-card.tsx", + "tag": "bal-card", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [ + "bal-carousel", + "bal-file-upload" + ], + "dependencies": [], + "dependencyGraph": { + "bal-carousel": [ + "bal-card" + ], + "bal-file-upload": [ + "bal-card" + ] + }, + "props": [ + { + "name": "border", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "border", + "reflectToAttr": false, + "docs": "If `true` a light blue border is added to the card.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "clickable", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "clickable", + "reflectToAttr": false, + "docs": "If `true` the card has a hover effect.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "color", + "type": "\"\" | \"primary\" | \"info\" | \"grey\" | \"danger\" | \"warning\" | \"success\" | \"red\" | \"yellow\" | \"green\" | \"purple\" | \"white\" | \"blue\" | \"red-light\" | \"yellow-light\" | \"purple-light\" | \"green-light\" | \"grey-light\" | \"purple-1\" | \"purple-2\" | \"purple-3\" | \"green-1\" | \"green-2\" | \"green-3\" | \"red-1\" | \"red-2\" | \"red-3\" | \"yellow-1\" | \"yellow-2\" | \"yellow-3\"", + "complexType": { + "original": "BalProps.BalCardColor", + "resolved": "\"\" | \"primary\" | \"info\" | \"grey\" | \"danger\" | \"warning\" | \"success\" | \"red\" | \"yellow\" | \"green\" | \"purple\" | \"white\" | \"blue\" | \"red-light\" | \"yellow-light\" | \"purple-light\" | \"green-light\" | \"grey-light\" | \"purple-1\" | \"purple-2\" | \"purple-3\" | \"green-1\" | \"green-2\" | \"green-3\" | \"red-1\" | \"red-2\" | \"red-3\" | \"yellow-1\" | \"yellow-2\" | \"yellow-3\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "color", + "reflectToAttr": false, + "docs": "Defines the color of the card.", + "docsTags": [ + { + "name": "default", + "text": "'white'" + } + ], + "default": "'white'", + "values": [ + { + "type": "\"\"" + }, + { + "value": "primary", + "type": "string" + }, + { + "value": "info", + "type": "string" + }, + { + "value": "grey", + "type": "string" + }, + { + "value": "danger", + "type": "string" + }, + { + "value": "warning", + "type": "string" + }, + { + "value": "success", + "type": "string" + }, + { + "value": "red", + "type": "string" + }, + { + "value": "yellow", + "type": "string" + }, + { + "value": "green", + "type": "string" + }, + { + "value": "purple", + "type": "string" + }, + { + "value": "white", + "type": "string" + }, + { + "value": "blue", + "type": "string" + }, + { + "value": "red-light", + "type": "string" + }, + { + "value": "yellow-light", + "type": "string" + }, + { + "value": "purple-light", + "type": "string" + }, + { + "value": "green-light", + "type": "string" + }, + { + "value": "grey-light", + "type": "string" + }, + { + "value": "purple-1", + "type": "string" + }, + { + "value": "purple-2", + "type": "string" + }, + { + "value": "purple-3", + "type": "string" + }, + { + "value": "green-1", + "type": "string" + }, + { + "value": "green-2", + "type": "string" + }, + { + "value": "green-3", + "type": "string" + }, + { + "value": "red-1", + "type": "string" + }, + { + "value": "red-2", + "type": "string" + }, + { + "value": "red-3", + "type": "string" + }, + { + "value": "yellow-1", + "type": "string" + }, + { + "value": "yellow-2", + "type": "string" + }, + { + "value": "yellow-3", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "flat", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "flat", + "reflectToAttr": false, + "docs": "If `true` the card loses its shadow.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "fullheight", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "fullheight", + "reflectToAttr": false, + "docs": "If `true` the card uses 100% of the available height.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "inverted", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "inverted", + "reflectToAttr": false, + "docs": "If `true` the card background color becomes blue.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "selected", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "selected", + "reflectToAttr": false, + "docs": "If `true` the card gets a light background to indicate a selection.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "space", + "type": "\"\" | \"large\" | \"medium\" | \"small\"", + "complexType": { + "original": "BalProps.BalCardSpace", + "resolved": "\"\" | \"large\" | \"medium\" | \"small\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "space", + "reflectToAttr": false, + "docs": "Defines the space of the card content.", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "\"\"" + }, + { + "value": "large", + "type": "string" + }, + { + "value": "medium", + "type": "string" + }, + { + "value": "small", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "square", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "square", + "reflectToAttr": false, + "docs": "If `true` the card loses its border radius.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-card-actions.tsx", + "tag": "bal-card-actions", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [], + "dependencies": [ + "bal-button-group" + ], + "dependencyGraph": { + "bal-card-actions": [ + "bal-button-group" + ] + }, + "props": [ + { + "name": "position", + "type": "\"\" | \"center\" | \"right\"", + "complexType": { + "original": "BalProps.BalCardActionsPosition", + "resolved": "\"\" | \"center\" | \"right\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "position", + "reflectToAttr": false, + "docs": "The value of the button, which is submitted with the form data.", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "\"\"" + }, + { + "value": "center", + "type": "string" + }, + { + "value": "right", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-card-button.tsx", + "tag": "bal-card-button", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [], + "dependencies": [ + "bal-button" + ], + "dependencyGraph": { + "bal-card-button": [ + "bal-button" + ], + "bal-button": [ + "bal-spinner", + "bal-icon" + ] + }, + "props": [ + { + "name": "disabled", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "disabled", + "reflectToAttr": true, + "docs": "If `true`, the user cannot interact with the button.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "elementType", + "type": "\"button\" | \"reset\" | \"submit\"", + "complexType": { + "original": "BalProps.BalCardButtonElementType", + "resolved": "\"button\" | \"reset\" | \"submit\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "element-type", + "reflectToAttr": false, + "docs": "The type of button.", + "docsTags": [ + { + "name": "default", + "text": "'button'" + } + ], + "default": "'button'", + "values": [ + { + "value": "button", + "type": "string" + }, + { + "value": "reset", + "type": "string" + }, + { + "value": "submit", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "href", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "href", + "reflectToAttr": false, + "docs": "Specifies the URL of the page the link goes to", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "icon", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "icon", + "reflectToAttr": false, + "docs": "Name of the icon like `edit`.", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "iconRight", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "icon-right", + "reflectToAttr": false, + "docs": "Name of the right button icon", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "loading", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "loading", + "reflectToAttr": false, + "docs": "If `true` the label is hidden and a loading spinner is shown instead.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "rel", + "type": "string", + "complexType": { + "original": "string | undefined", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "rel", + "reflectToAttr": false, + "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "target", + "type": "\" _parent\" | \"_blank\" | \"_self\" | \"_top\"", + "complexType": { + "original": "BalProps.BalCardButtonTarget", + "resolved": "\" _parent\" | \"_blank\" | \"_self\" | \"_top\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "target", + "reflectToAttr": false, + "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.", + "docsTags": [ + { + "name": "default", + "text": "'_self'" + } + ], + "default": "'_self'", + "values": [ + { + "value": " _parent", + "type": "string" + }, + { + "value": "_blank", + "type": "string" + }, + { + "value": "_self", + "type": "string" + }, + { + "value": "_top", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-card-content.tsx", + "tag": "bal-card-content", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [ + "bal-carousel" + ], + "dependencies": [], + "dependencyGraph": { + "bal-carousel": [ + "bal-card-content" + ] + }, + "props": [], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-card-subtitle.tsx", + "tag": "bal-card-subtitle", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [ + { + "name": "bold", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "bold", + "reflectToAttr": false, + "docs": "If `true` the card text color is bold.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "color", + "type": "\"\" | \"blue\" | \"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\" | \"white\"", + "complexType": { + "original": "BalProps.BalHeadingColor", + "resolved": "\"\" | \"blue\" | \"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\" | \"white\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "color", + "reflectToAttr": false, + "docs": "If `true` the card text color becomes white.", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "\"\"" + }, + { + "value": "blue", + "type": "string" + }, + { + "value": "danger", + "type": "string" + }, + { + "value": "info", + "type": "string" + }, + { + "value": "primary", + "type": "string" + }, + { + "value": "success", + "type": "string" + }, + { + "value": "warning", + "type": "string" + }, + { + "value": "white", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "inverted", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "inverted", + "reflectToAttr": false, + "docs": "If `true` the card text color becomes white.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-card-title.tsx", + "tag": "bal-card-title", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [], + "dependencies": [ + "bal-heading" + ], + "dependencyGraph": { + "bal-card-title": [ + "bal-heading" + ] + }, + "props": [ + { + "name": "inverted", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "inverted", + "reflectToAttr": false, + "docs": "If `true` the card text color becomes white.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-carousel.tsx", + "tag": "bal-carousel", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [], + "dependencies": [ + "bal-card", + "bal-card-content" + ], + "dependencyGraph": { + "bal-carousel": [ + "bal-card", + "bal-card-content" + ] + }, + "props": [ + { + "name": "aspectRatio", + "type": "\"16by9\" | \"1by1\" | \"3by2\" | \"4by3\"", + "complexType": { + "original": "'1by1' | '3by2' | '4by3' | '16by9'", + "resolved": "\"16by9\" | \"1by1\" | \"3by2\" | \"4by3\"", + "references": {} + }, + "mutable": false, + "attr": "aspect-ratio", + "reflectToAttr": false, + "docs": "Defines the image aspect ratio.\nShould be combined with the interface `product`", + "docsTags": [ + { + "name": "default", + "text": "'16by9'" + } + ], + "default": "'16by9'", + "values": [ + { + "value": "16by9", + "type": "string" + }, + { + "value": "1by1", + "type": "string" + }, + { + "value": "3by2", + "type": "string" + }, + { + "value": "4by3", + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "border", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "border", + "reflectToAttr": false, + "docs": "If `true` a light border is shown at the bottom.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "controls", + "type": "\"dots\" | \"large\" | \"none\" | \"small\" | \"tabs\"", + "complexType": { + "original": "'small' | 'large' | 'dots' | 'tabs' | 'none'", + "resolved": "\"dots\" | \"large\" | \"none\" | \"small\" | \"tabs\"", + "references": {} + }, + "mutable": false, + "attr": "controls", + "reflectToAttr": false, + "docs": "Defines the layout of the navigation controls.", + "docsTags": [ + { + "name": "default", + "text": "'none'" + } + ], + "default": "'none'", + "values": [ + { + "value": "dots", + "type": "string" + }, + { + "value": "large", + "type": "string" + }, + { + "value": "none", + "type": "string" + }, + { + "value": "small", + "type": "string" + }, + { + "value": "tabs", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "controlsOverflow", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "controls-overflow", + "reflectToAttr": false, + "docs": "If `true` items move under the controls, instead of having a gap", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "controlsSticky", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "controls-sticky", + "reflectToAttr": false, + "docs": "If `true` the controls will be sticky to the top.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "fullHeight", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "full-height", + "reflectToAttr": false, + "docs": "If `true` the carousel uses the full height", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "htmlRole", + "type": "\"\" | \"list\" | \"tablist\"", + "complexType": { + "original": "'tablist' | 'list' | ''", + "resolved": "\"\" | \"list\" | \"tablist\"", + "references": {} + }, + "mutable": false, + "attr": "html-role", + "reflectToAttr": false, + "docs": "", + "docsTags": [ + { + "name": "deprecated", + "text": "Defines the role of the carousel." + }, + { + "name": "default", + "text": "'list'" + } + ], + "default": "'list'", + "deprecation": "Defines the role of the carousel.", + "values": [ + { + "type": "\"\"" + }, + { + "value": "list", + "type": "string" + }, + { + "value": "tablist", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "interface", + "type": "\"\" | \"card\" | \"image\" | \"product\"", + "complexType": { + "original": "'card' | 'image' | 'product' | ''", + "resolved": "\"\" | \"card\" | \"image\" | \"product\"", + "references": {} + }, + "mutable": false, + "attr": "interface", + "reflectToAttr": false, + "docs": "Defines special looks.", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "\"\"" + }, + { + "value": "card", + "type": "string" + }, + { + "value": "image", + "type": "string" + }, + { + "value": "product", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "inverted", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "inverted", + "reflectToAttr": false, + "docs": "If `true` the carousel can be used on dark background", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "itemsPerView", + "type": "\"auto\" | 1 | 2 | 3 | 4", + "complexType": { + "original": "'auto' | 1 | 2 | 3 | 4", + "resolved": "\"auto\" | 1 | 2 | 3 | 4", + "references": {} + }, + "mutable": false, + "attr": "items-per-view", + "reflectToAttr": false, + "docs": "Defines how many slides are visible in the container for the user.\n`auto` will use the size of the actual item content", + "docsTags": [ + { + "name": "default", + "text": "1" + } + ], + "default": "1", + "values": [ + { + "value": "auto", + "type": "string" + }, + { + "value": "1", + "type": "number" + }, + { + "value": "2", + "type": "number" + }, + { + "value": "3", + "type": "number" + }, + { + "value": "4", + "type": "number" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "scrollY", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "scroll-y", + "reflectToAttr": false, + "docs": "If `true` vertical scrolling on mobile is enabled.", + "docsTags": [ + { + "name": "default", + "text": "true" + } + ], + "default": "true", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "space", + "type": "\"medium\" | \"none\" | \"normal\"", + "complexType": { + "original": "'normal' | 'medium' | 'none'", + "resolved": "\"medium\" | \"none\" | \"normal\"", + "references": {} + }, + "mutable": false, + "attr": "space", + "reflectToAttr": false, + "docs": "Defines the layout of the navigation controls.", + "docsTags": [ + { + "name": "default", + "text": "'none'" + } + ], + "default": "'none'", + "values": [ + { + "value": "medium", + "type": "string" + }, + { + "value": "none", + "type": "string" + }, + { + "value": "normal", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "steps", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": false, + "attr": "steps", + "reflectToAttr": false, + "docs": "When how many slides are moved when going forward or backward.", + "docsTags": [ + { + "name": "default", + "text": "1" + } + ], + "default": "1", + "values": [ + { + "type": "number" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "value", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": true, + "attr": "value", + "reflectToAttr": false, + "docs": "Defines the active slide index.", + "docsTags": [ + { + "name": "default", + "text": "0" + } + ], + "default": "0", + "values": [ + { + "type": "number" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [ + { + "name": "next", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "(steps?: number) => Promise", + "parameters": [ + { + "name": "steps", + "type": "number", + "docs": "" + } + ], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "next(steps?: number) => Promise", + "parameters": [ + { + "name": "steps", + "type": "number", + "docs": "" + } + ], + "docs": "", + "docsTags": [] + }, + { + "name": "previous", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "(steps?: number) => Promise", + "parameters": [ + { + "name": "steps", + "type": "number", + "docs": "" + } + ], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "previous(steps?: number) => Promise", + "parameters": [ + { + "name": "steps", + "type": "number", + "docs": "" + } + ], + "docs": "PUBLIC METHODS\n------------------------------------------------------", + "docsTags": [] + } + ], + "events": [ + { + "event": "balChange", + "detail": "number", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalCarouselChangeDetail", + "resolved": "number", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when a option got selected.", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [ + { + "event": "touchmove", + "target": "window", + "capture": false, + "passive": false + } + ] + }, + { + "fileName": "bal-carousel-item.tsx", + "tag": "bal-carousel-item", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [ + { + "name": "color", + "type": "\"green\" | \"purple\" | \"red\" | \"white\" | \"yellow\"", + "complexType": { + "original": "BalProps.BalCarouselItemColor", + "resolved": "\"green\" | \"purple\" | \"red\" | \"white\" | \"yellow\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "color", + "reflectToAttr": false, + "docs": "Color of the background", + "docsTags": [], + "values": [ + { + "value": "green", + "type": "string" + }, + { + "value": "purple", + "type": "string" + }, + { + "value": "red", + "type": "string" + }, + { + "value": "white", + "type": "string" + }, + { + "value": "yellow", + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "download", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "download", + "reflectToAttr": false, + "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "elementType", + "type": "\"button\" | \"reset\" | \"submit\"", + "complexType": { + "original": "BalProps.BalButtonElementType", + "resolved": "\"button\" | \"reset\" | \"submit\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "element-type", + "reflectToAttr": false, + "docs": "The type of button.", + "docsTags": [ + { + "name": "default", + "text": "'button'" + } + ], + "default": "'button'", + "values": [ + { + "value": "button", + "type": "string" + }, + { + "value": "reset", + "type": "string" + }, + { + "value": "submit", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "href", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "href", + "reflectToAttr": false, + "docs": "Specifies the URL of the page the link goes to", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "htmlRole", + "type": "\"\" | \"listitem\" | \"tab\"", + "complexType": { + "original": "'tab' | 'listitem' | ''", + "resolved": "\"\" | \"listitem\" | \"tab\"", + "references": {} + }, + "mutable": false, + "attr": "html-role", + "reflectToAttr": false, + "docs": "", + "docsTags": [ + { + "name": "deprecated", + "text": "Defines the role of the carousel." + }, + { + "name": "default", + "text": "'listitem'" + } + ], + "default": "'listitem'", + "deprecation": "Defines the role of the carousel.", + "values": [ + { + "type": "\"\"" + }, + { + "value": "listitem", + "type": "string" + }, + { + "value": "tab", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "label", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "label", + "reflectToAttr": true, + "docs": "Label of the slide which will be used for pagination tabs", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "name", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "name", + "reflectToAttr": true, + "docs": "The name of the button, which is submitted with the form data.", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "rel", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "rel", + "reflectToAttr": false, + "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "src", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "src", + "reflectToAttr": true, + "docs": "Src path to the image", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "svg", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "svg", + "reflectToAttr": false, + "docs": "Svg content.", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "target", + "type": "\" _parent\" | \"_blank\" | \"_self\" | \"_top\"", + "complexType": { + "original": "BalProps.BalButtonTarget", + "resolved": "\" _parent\" | \"_blank\" | \"_self\" | \"_top\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "target", + "reflectToAttr": false, + "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.", + "docsTags": [ + { + "name": "default", + "text": "'_self'" + } + ], + "default": "'_self'", + "values": [ + { + "value": " _parent", + "type": "string" + }, + { + "value": "_blank", + "type": "string" + }, + { + "value": "_self", + "type": "string" + }, + { + "value": "_top", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "value", + "type": "number | string", + "complexType": { + "original": "string | number", + "resolved": "number | string", + "references": {} + }, + "mutable": false, + "attr": "value", + "reflectToAttr": true, + "docs": "The value of the button, which is submitted with the form data.", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "number" + }, + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [ + { + "name": "setFocus", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "setFocus() => Promise", + "parameters": [], + "docs": "", + "docsTags": [] + } + ], + "events": [ + { + "event": "balBlur", + "detail": "void", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalCarouselItemBlurDetail", + "resolved": "void", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the button loses focus.", + "docsTags": [] + }, + { + "event": "balFocus", + "detail": "void", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalCarouselItemFocusDetail", + "resolved": "void", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the button has focus.", + "docsTags": [] + }, + { + "event": "balNavigate", + "detail": "MouseEvent", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalCarouselItemNavigateDetail", + "resolved": "MouseEvent", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the link element has clicked.", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-check.tsx", + "tag": "bal-check", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [ + "bal-option" + ], + "dependencies": [ + "bal-icon" + ], + "dependencyGraph": { + "bal-check": [ + "bal-icon" + ], + "bal-option": [ + "bal-check" + ] + }, + "props": [ + { + "name": "checked", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": true, + "attr": "checked", + "reflectToAttr": false, + "docs": "If `true`, the checkbox is selected.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "disabled", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "disabled", + "reflectToAttr": false, + "docs": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "boolean" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "invalid", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "invalid", + "reflectToAttr": false, + "docs": "If `true` the component gets a invalid red style.", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "boolean" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "inverted", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "inverted", + "reflectToAttr": false, + "docs": "If `true`, the checkbox is inverted and works on dark backgrounds.", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "boolean" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-checkbox.tsx", + "tag": "bal-checkbox", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [ + "bal-checkbox-group", + "bal-select" + ], + "dependencies": [], + "dependencyGraph": { + "bal-checkbox-group": [ + "bal-checkbox" + ], + "bal-select": [ + "bal-checkbox" + ] + }, + "props": [ + { + "name": "autoInvalidOff", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "auto-invalid-off", + "reflectToAttr": true, + "docs": "If `true`, in Angular reactive forms the control will not be set invalid", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "checked", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": true, + "attr": "checked", + "reflectToAttr": false, + "docs": "If `true`, the checkbox is selected.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "color", + "type": "\"\" | \"green\" | \"purple\" | \"red\" | \"yellow\"", + "complexType": { + "original": "BalProps.BalCheckboxTileColor", + "resolved": "\"\" | \"green\" | \"purple\" | \"red\" | \"yellow\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "color", + "reflectToAttr": false, + "docs": "Defines the color of the tile checkbox.", + "docsTags": [], + "values": [ + { + "type": "\"\"" + }, + { + "value": "green", + "type": "string" + }, + { + "value": "purple", + "type": "string" + }, + { + "value": "red", + "type": "string" + }, + { + "value": "yellow", + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "disabled", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "disabled", + "reflectToAttr": false, + "docs": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "flat", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "flat", + "reflectToAttr": false, + "docs": "If `true` the control is no padding", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "interface", + "type": "\"button\" | \"checkbox\" | \"switch\" | \"tile\"", + "complexType": { + "original": "BalProps.BalCheckboxInterface", + "resolved": "\"button\" | \"checkbox\" | \"switch\" | \"tile\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "interface", + "reflectToAttr": false, + "docs": "Defines the layout of the checkbox button", + "docsTags": [ + { + "name": "default", + "text": "'checkbox'" + } + ], + "default": "'checkbox'", + "values": [ + { + "value": "button", + "type": "string" + }, + { + "value": "checkbox", + "type": "string" + }, + { + "value": "switch", + "type": "string" + }, + { + "value": "tile", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "invalid", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "invalid", + "reflectToAttr": false, + "docs": "If `true` the component gets a invalid style.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "label", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "label", + "reflectToAttr": false, + "docs": "Label of the radio item.", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "labelHidden", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "label-hidden", + "reflectToAttr": false, + "docs": "If `true` the checkbox has no label", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "name", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "name", + "reflectToAttr": false, + "docs": "The name of the control, which is submitted with the form data.", + "docsTags": [ + { + "name": "default", + "text": "this.inputId" + } + ], + "default": "this.inputId", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "nonSubmit", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "non-submit", + "reflectToAttr": false, + "docs": "If `true`, the value will not be send with a form submit", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "readonly", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "readonly", + "reflectToAttr": false, + "docs": "If `true` the element can not mutated, meaning the user can not edit the control.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "required", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "required", + "reflectToAttr": false, + "docs": "If `true`, the user must fill in a value before submitting a form.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "value", + "type": "number | string", + "complexType": { + "original": "string | number", + "resolved": "number | string", + "references": {} + }, + "mutable": false, + "attr": "value", + "reflectToAttr": false, + "docs": "A DOMString representing the value of the checkbox. This is not displayed on the\nclient-side, but on the server this is the value given to the data\nsubmitted with the checkbox's name.", + "docsTags": [ + { + "name": "default", + "text": "'on'" + } + ], + "default": "'on'", + "values": [ + { + "type": "number" + }, + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [ + { + "name": "getInputElement", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + }, + "HTMLInputElement": { + "location": "global", + "id": "global::HTMLInputElement" + } + }, + "return": "Promise" + }, + "signature": "getInputElement() => Promise", + "parameters": [], + "docs": "Returns the native `` element used under the hood.", + "docsTags": [] + }, + { + "name": "getOption", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + }, + "BalCheckboxOption": { + "location": "import", + "path": "./bal-checkbox.type", + "id": "src/components/bal-checkbox/bal-checkbox.type.ts::BalCheckboxOption" + } + }, + "return": "Promise" + }, + "signature": "getOption() => Promise", + "parameters": [], + "docs": "Options of the tab like label, value etc.", + "docsTags": [] + }, + { + "name": "setFocus", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "setFocus() => Promise", + "parameters": [], + "docs": "Sets the focus on the checkbox input element.", + "docsTags": [] + } + ], + "events": [ + { + "event": "balBlur", + "detail": "FocusEvent", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalCheckboxBlurDetail", + "resolved": "FocusEvent", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the toggle loses focus.", + "docsTags": [] + }, + { + "event": "balChange", + "detail": "boolean", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalCheckboxChangeDetail", + "resolved": "boolean", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the value property has changed.", + "docsTags": [] + }, + { + "event": "balFocus", + "detail": "FocusEvent", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalCheckboxFocusDetail", + "resolved": "FocusEvent", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the toggle has focus.", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [ + { + "event": "click", + "target": "document", + "capture": true, + "passive": false + }, + { + "event": "reset", + "target": "document", + "capture": true, + "passive": false + } + ] + }, + { + "fileName": "bal-checkbox-group.tsx", + "tag": "bal-checkbox-group", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [], + "dependencies": [ + "bal-checkbox" + ], + "dependencyGraph": { + "bal-checkbox-group": [ + "bal-checkbox" + ] + }, + "props": [ + { + "name": "autoInvalidOff", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "auto-invalid-off", + "reflectToAttr": true, + "docs": "If `true`, in Angular reactive forms the control will not be set invalid", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "columns", + "type": "1 | 2 | 3 | 4", + "complexType": { + "original": "BalProps.BalCheckboxGroupColumns", + "resolved": "1 | 2 | 3 | 4", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "columns", + "reflectToAttr": false, + "docs": "Defines the column size like the grid.", + "docsTags": [ + { + "name": "default", + "text": "1" + } + ], + "default": "1", + "values": [ + { + "value": "1", + "type": "number" + }, + { + "value": "2", + "type": "number" + }, + { + "value": "3", + "type": "number" + }, + { + "value": "4", + "type": "number" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "columnsMobile", + "type": "1 | 2 | 3 | 4", + "complexType": { + "original": "BalProps.BalCheckboxGroupColumns", + "resolved": "1 | 2 | 3 | 4", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "columns-mobile", + "reflectToAttr": false, + "docs": "Defines the column size for mobile and bigger like the grid.", + "docsTags": [ + { + "name": "default", + "text": "1" + } + ], + "default": "1", + "values": [ + { + "value": "1", + "type": "number" + }, + { + "value": "2", + "type": "number" + }, + { + "value": "3", + "type": "number" + }, + { + "value": "4", + "type": "number" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "columnsTablet", + "type": "1 | 2 | 3 | 4", + "complexType": { + "original": "BalProps.BalCheckboxGroupColumns", + "resolved": "1 | 2 | 3 | 4", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "columns-tablet", + "reflectToAttr": false, + "docs": "Defines the column size for tablet and bigger like the grid.", + "docsTags": [ + { + "name": "default", + "text": "1" + } + ], + "default": "1", + "values": [ + { + "value": "1", + "type": "number" + }, + { + "value": "2", + "type": "number" + }, + { + "value": "3", + "type": "number" + }, + { + "value": "4", + "type": "number" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "control", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "control", + "reflectToAttr": false, + "docs": "If `true` it acts as the main form control", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "disabled", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "disabled", + "reflectToAttr": false, + "docs": "If `true`, the user cannot interact with the checkboxes.", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "boolean" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "expanded", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "expanded", + "reflectToAttr": false, + "docs": "Uses the whole width", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "interface", + "type": "\"button\" | \"checkbox\" | \"switch\" | \"tile\"", + "complexType": { + "original": "BalProps.BalCheckboxGroupInterface", + "resolved": "\"button\" | \"checkbox\" | \"switch\" | \"tile\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "interface", + "reflectToAttr": false, + "docs": "Defines the layout of the checkbox button", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "value": "button", + "type": "string" + }, + { + "value": "checkbox", + "type": "string" + }, + { + "value": "switch", + "type": "string" + }, + { + "value": "tile", + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "invalid", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "invalid", + "reflectToAttr": false, + "docs": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "boolean" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "name", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "name", + "reflectToAttr": false, + "docs": "The name of the control, which is submitted with the form data.", + "docsTags": [ + { + "name": "default", + "text": "this.inputId" + } + ], + "default": "this.inputId", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "options", + "type": "BalCheckboxOption[]", + "complexType": { + "original": "BalCheckboxOption[]", + "resolved": "BalCheckboxOption[]", + "references": { + "BalCheckboxOption": { + "location": "import", + "path": "../bal-checkbox.type", + "id": "src/components/bal-checkbox/bal-checkbox.type.ts::BalCheckboxOption" + } + } + }, + "mutable": false, + "reflectToAttr": false, + "docs": "Steps can be passed as a property or through HTML markup.", + "docsTags": [], + "values": [ + { + "type": "BalCheckboxOption[]" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "readonly", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "readonly", + "reflectToAttr": false, + "docs": "If `true`, the user cannot interact with the checkboxes.", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "boolean" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "value", + "type": "any[]", + "complexType": { + "original": "any[]", + "resolved": "any[]", + "references": {} + }, + "mutable": true, + "reflectToAttr": false, + "docs": "The value of the control.", + "docsTags": [ + { + "name": "default", + "text": "[]" + } + ], + "default": "[]", + "values": [ + { + "type": "any[]" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "vertical", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "vertical", + "reflectToAttr": false, + "docs": "Displays the checkboxes vertically", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "verticalOnMobile", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "vertical-on-mobile", + "reflectToAttr": false, + "docs": "If `true`, the controls will be vertically on mobile devices.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [ + { + "name": "getOptionByValue", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "(value: string) => Promise", + "parameters": [ + { + "name": "value", + "type": "string", + "docs": "" + } + ], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + }, + "BalCheckboxOption": { + "location": "import", + "path": "../bal-checkbox.type", + "id": "src/components/bal-checkbox/bal-checkbox.type.ts::BalCheckboxOption" + } + }, + "return": "Promise" + }, + "signature": "getOptionByValue(value: string) => Promise", + "parameters": [ + { + "name": "value", + "type": "string", + "docs": "" + } + ], + "docs": "Find the options properties by its value", + "docsTags": [] + } + ], + "events": [ + { + "event": "balBlur", + "detail": "FocusEvent", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalCheckboxGroupBlurDetail", + "resolved": "FocusEvent", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the toggle loses focus.", + "docsTags": [] + }, + { + "event": "balChange", + "detail": "any[]", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalCheckboxGroupChangeDetail", + "resolved": "any[]", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the checked property has changed.", + "docsTags": [] + }, + { + "event": "balFocus", + "detail": "FocusEvent", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalCheckboxGroupFocusDetail", + "resolved": "FocusEvent", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the toggle has focus.", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [ + { + "event": "balChange", + "target": "document", + "capture": true, + "passive": false + }, + { + "event": "reset", + "target": "document", + "capture": true, + "passive": false + }, + { + "event": "balFocus", + "target": "document", + "capture": true, + "passive": false + }, + { + "event": "balBlur", + "target": "document", + "capture": true, + "passive": false + } + ] + }, + { + "fileName": "bal-close.tsx", + "tag": "bal-close", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [ + "bal-modal-header", + "bal-popup", + "bal-snackbar", + "bal-tag", + "bal-toast" + ], + "dependencies": [ + "bal-icon" + ], + "dependencyGraph": { + "bal-close": [ + "bal-icon" + ], + "bal-modal-header": [ + "bal-close" + ], + "bal-popup": [ + "bal-close" + ], + "bal-snackbar": [ + "bal-close" + ], + "bal-tag": [ + "bal-close" + ], + "bal-toast": [ + "bal-close" + ] + }, + "props": [ + { + "name": "inverted", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "inverted", + "reflectToAttr": false, + "docs": "If `true` it supports dark backgrounds.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "size", + "type": "\"\" | \"medium\" | \"small\"", + "complexType": { + "original": "BalProps.BalCloseSize", + "resolved": "\"\" | \"medium\" | \"small\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "size", + "reflectToAttr": false, + "docs": "Define the size of badge. Small is recommended for tabs.", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "\"\"" + }, + { + "value": "medium", + "type": "string" + }, + { + "value": "small", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-content.tsx", + "tag": "bal-content", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [ + "bal-segment-item" + ], + "dependencies": [], + "dependencyGraph": { + "bal-segment-item": [ + "bal-content" + ] + }, + "props": [ + { + "name": "align", + "type": "\"\" | \"center\" | \"end\" | \"start\"", + "complexType": { + "original": "BalProps.BalContentAlignment", + "resolved": "\"\" | \"center\" | \"end\" | \"start\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "align", + "reflectToAttr": false, + "docs": "Defines the text positioning like center, end or\ndefault to start.", + "docsTags": [ + { + "name": "default", + "text": "'start'" + } + ], + "default": "'start'", + "values": [ + { + "type": "\"\"" + }, + { + "value": "center", + "type": "string" + }, + { + "value": "end", + "type": "string" + }, + { + "value": "start", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "layout", + "type": "\"\" | \"horizontal\" | \"vertical\"", + "complexType": { + "original": "BalProps.BalContentLayout", + "resolved": "\"\" | \"horizontal\" | \"vertical\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "layout", + "reflectToAttr": false, + "docs": "Defines the position of the child elements if they\nare showed verticaly or horizontally. Default is verticaly.", + "docsTags": [ + { + "name": "default", + "text": "'vertical'" + } + ], + "default": "'vertical'", + "values": [ + { + "type": "\"\"" + }, + { + "value": "horizontal", + "type": "string" + }, + { + "value": "vertical", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "space", + "type": "\"\" | \"none\" | \"normal\" | \"small\" | \"x-small\" | \"xx-small\" | \"xxx-small\"", + "complexType": { + "original": "BalProps.BalContentSpace", + "resolved": "\"\" | \"none\" | \"normal\" | \"small\" | \"x-small\" | \"xx-small\" | \"xxx-small\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "space", + "reflectToAttr": false, + "docs": "Defines the space between the child elements. Default is xx-small.", + "docsTags": [ + { + "name": "default", + "text": "'xx-small'" + } + ], + "default": "'xx-small'", + "values": [ + { + "type": "\"\"" + }, + { + "value": "none", + "type": "string" + }, + { + "value": "normal", + "type": "string" + }, + { + "value": "small", + "type": "string" + }, + { + "value": "x-small", + "type": "string" + }, + { + "value": "xx-small", + "type": "string" + }, + { + "value": "xxx-small", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-data.tsx", + "tag": "bal-data", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [ + { + "name": "border", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "border", + "reflectToAttr": false, + "docs": "If `true` a bottom border is added to the data-item.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "horizontal", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "horizontal", + "reflectToAttr": false, + "docs": "If `true` the data list is horizontal instead of vertical.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-data-item.tsx", + "tag": "bal-data-item", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [ + { + "name": "border", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "border", + "reflectToAttr": false, + "docs": "If `true` a bottom border is added to the data-item.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "disabled", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "disabled", + "reflectToAttr": false, + "docs": "If `true` the item gets a lighter font color.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-data-label.tsx", + "tag": "bal-data-label", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [ + { + "name": "required", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "required", + "reflectToAttr": false, + "docs": "If `true` an asterix is added after the label.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-data-value.tsx", + "tag": "bal-data-value", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [], + "dependencies": [ + "bal-button" + ], + "dependencyGraph": { + "bal-data-value": [ + "bal-button" + ], + "bal-button": [ + "bal-spinner", + "bal-icon" + ] + }, + "props": [ + { + "name": "disabled", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "disabled", + "reflectToAttr": false, + "docs": "If `true` the button will get disabled.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "editable", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "editable", + "reflectToAttr": false, + "docs": "If `true` a small button with a edit icon will be shown on the right.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "multiline", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "multiline", + "reflectToAttr": false, + "docs": "If `true` the text will break and the height of the item increases.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [ + { + "event": "balBlur", + "detail": "void", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalDataValueBlurDetail", + "resolved": "void", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the edit button loses focus.", + "docsTags": [] + }, + { + "event": "balClick", + "detail": "MouseEvent", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalDataValueClickDetail", + "resolved": "MouseEvent", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the edit button has focus.", + "docsTags": [] + }, + { + "event": "balFocus", + "detail": "void", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalDataValueFocusDetail", + "resolved": "void", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the edit button has focus.", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-date.tsx", + "tag": "bal-date", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [], + "dependencies": [ + "bal-input-group", + "bal-input-date", + "bal-icon", + "bal-date-calendar" + ], + "dependencyGraph": { + "bal-date": [ + "bal-input-group", + "bal-input-date", + "bal-icon", + "bal-date-calendar" + ], + "bal-date-calendar": [ + "bal-date-calendar-cell", + "bal-icon" + ] + }, + "props": [ + { + "name": "allowInvalidValue", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "allow-invalid-value", + "reflectToAttr": false, + "docs": "If `true`, it returns the string `INVALID_VALUE` within the balChange event if the input provided is not valid.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "allowedDates", + "type": "(dateString: string) => boolean", + "complexType": { + "original": "BalProps.BalDateCallback | undefined", + "resolved": "(dateString: string) => boolean", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "reflectToAttr": false, + "docs": "Callback to determine which date in the datepicker should be selectable.", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "(dateString: string) => boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "autoInvalidOff", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "auto-invalid-off", + "reflectToAttr": true, + "docs": "If `true`, in Angular reactive forms the control will not be set invalid", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "autocomplete", + "type": "\"on\" | \"off\" | \"tel\" | \"url\" | \"email\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"", + "complexType": { + "original": "BalProps.BalInputAutocomplete", + "resolved": "\"on\" | \"off\" | \"tel\" | \"url\" | \"email\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "autocomplete", + "reflectToAttr": false, + "docs": "Indicates whether the value of the control can be automatically completed by the browser.", + "docsTags": [ + { + "name": "default", + "text": "'off'" + } + ], + "default": "'off'", + "values": [ + { + "value": "on", + "type": "string" + }, + { + "value": "off", + "type": "string" + }, + { + "value": "tel", + "type": "string" + }, + { + "value": "url", + "type": "string" + }, + { + "value": "email", + "type": "string" + }, + { + "value": "name", + "type": "string" + }, + { + "value": "honorific-prefix", + "type": "string" + }, + { + "value": "given-name", + "type": "string" + }, + { + "value": "additional-name", + "type": "string" + }, + { + "value": "family-name", + "type": "string" + }, + { + "value": "honorific-suffix", + "type": "string" + }, + { + "value": "nickname", + "type": "string" + }, + { + "value": "username", + "type": "string" + }, + { + "value": "new-password", + "type": "string" + }, + { + "value": "current-password", + "type": "string" + }, + { + "value": "one-time-code", + "type": "string" + }, + { + "value": "organization-title", + "type": "string" + }, + { + "value": "organization", + "type": "string" + }, + { + "value": "street-address", + "type": "string" + }, + { + "value": "address-line1", + "type": "string" + }, + { + "value": "address-line2", + "type": "string" + }, + { + "value": "address-line3", + "type": "string" + }, + { + "value": "address-level4", + "type": "string" + }, + { + "value": "address-level3", + "type": "string" + }, + { + "value": "address-level2", + "type": "string" + }, + { + "value": "address-level1", + "type": "string" + }, + { + "value": "country", + "type": "string" + }, + { + "value": "country-name", + "type": "string" + }, + { + "value": "postal-code", + "type": "string" + }, + { + "value": "cc-name", + "type": "string" + }, + { + "value": "cc-given-name", + "type": "string" + }, + { + "value": "cc-additional-name", + "type": "string" + }, + { + "value": "cc-family-name", + "type": "string" + }, + { + "value": "cc-number", + "type": "string" + }, + { + "value": "cc-exp", + "type": "string" + }, + { + "value": "cc-exp-month", + "type": "string" + }, + { + "value": "cc-exp-year", + "type": "string" + }, + { + "value": "cc-csc", + "type": "string" + }, + { + "value": "cc-type", + "type": "string" + }, + { + "value": "transaction-currency", + "type": "string" + }, + { + "value": "transaction-amount", + "type": "string" + }, + { + "value": "language", + "type": "string" + }, + { + "value": "bday", + "type": "string" + }, + { + "value": "bday-day", + "type": "string" + }, + { + "value": "bday-month", + "type": "string" + }, + { + "value": "bday-year", + "type": "string" + }, + { + "value": "sex", + "type": "string" + }, + { + "value": "tel-country-code", + "type": "string" + }, + { + "value": "tel-national", + "type": "string" + }, + { + "value": "tel-area-code", + "type": "string" + }, + { + "value": "tel-local", + "type": "string" + }, + { + "value": "tel-extension", + "type": "string" + }, + { + "value": "impp", + "type": "string" + }, + { + "value": "photo", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "closeOnSelect", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "close-on-select", + "reflectToAttr": false, + "docs": "Closes the datepicker popover after selection", + "docsTags": [ + { + "name": "default", + "text": "true" + } + ], + "default": "true", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "debounce", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": false, + "attr": "debounce", + "reflectToAttr": false, + "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.", + "docsTags": [ + { + "name": "default", + "text": "0" + } + ], + "default": "0", + "values": [ + { + "type": "number" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "defaultDate", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "default-date", + "reflectToAttr": false, + "docs": "The date to defines where the datepicker popup starts. The prop accepts ISO 8601 date strings (YYYY-MM-DD).", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "disabled", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "disabled", + "reflectToAttr": false, + "docs": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "freeSolo", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "free-solo", + "reflectToAttr": false, + "docs": "If `true` there will be no trigger icon visible, so no UX indicator for a picker", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "invalid", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "invalid", + "reflectToAttr": false, + "docs": "If `true` the component gets a invalid style.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "max", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": true, + "attr": "max", + "reflectToAttr": false, + "docs": "The maximum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\n`1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the maximum could just be the year, such as `1994`.\nDefaults to the end of this year.", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "maxYearProp", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": false, + "attr": "max-year", + "reflectToAttr": false, + "docs": "Latest year available for selection", + "docsTags": [], + "values": [ + { + "type": "number" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "min", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": true, + "attr": "min", + "reflectToAttr": false, + "docs": "The minimum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\nsuch as `1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the minimum could just be the year, such as `1994`.\nDefaults to the beginning of the year, 100 years ago from today.", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "minYearProp", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": false, + "attr": "min-year", + "reflectToAttr": false, + "docs": "Earliest year available for selection", + "docsTags": [], + "values": [ + { + "type": "number" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "name", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "name", + "reflectToAttr": false, + "docs": "The name of the control, which is submitted with the form data.", + "docsTags": [ + { + "name": "default", + "text": "this.inputId" + } + ], + "default": "this.inputId", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "placeholder", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "placeholder", + "reflectToAttr": false, + "docs": "The text to display when the select is empty.", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "readonly", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "readonly", + "reflectToAttr": false, + "docs": "If `true` the element can not mutated, meaning the user can not edit the control.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "required", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "required", + "reflectToAttr": false, + "docs": "If `true` the attribute required is added to the native input.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "triggerIcon", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "trigger-icon", + "reflectToAttr": false, + "docs": "If `true` the datepicker only open on click of the icon", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "value", + "type": "string", + "complexType": { + "original": "string | undefined", + "resolved": "string", + "references": {} + }, + "mutable": true, + "attr": "value", + "reflectToAttr": false, + "docs": "The value of the form field, which accepts ISO 8601 date strings (YYYY-MM-DD).", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [ + { + "name": "close", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "close() => Promise", + "parameters": [], + "docs": "Closes the accordion", + "docsTags": [] + }, + { + "name": "getInputElement", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + }, + "HTMLInputElement": { + "location": "global", + "id": "global::HTMLInputElement" + } + }, + "return": "Promise" + }, + "signature": "getInputElement() => Promise", + "parameters": [], + "docs": "Returns the native `` element used under the hood.", + "docsTags": [] + }, + { + "name": "open", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "open() => Promise", + "parameters": [], + "docs": "Opens the accordion", + "docsTags": [] + }, + { + "name": "select", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "(dateString: string) => Promise", + "parameters": [ + { + "name": "dateString", + "type": "string", + "docs": "" + } + ], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "select(dateString: string) => Promise", + "parameters": [ + { + "name": "dateString", + "type": "string", + "docs": "" + } + ], + "docs": "Selects an option", + "docsTags": [] + }, + { + "name": "setFocus", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "setFocus() => Promise", + "parameters": [], + "docs": "Sets focus on the native `input` in `bal-input`. Use this method instead of the global\n`input.focus()`.", + "docsTags": [] + }, + { + "name": "toggle", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "toggle() => Promise", + "parameters": [], + "docs": "Triggers the accordion", + "docsTags": [] + } + ], + "events": [ + { + "event": "balBlur", + "detail": "FocusEvent", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalDateBlurDetail", + "resolved": "FocusEvent", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the input loses focus.", + "docsTags": [] + }, + { + "event": "balChange", + "detail": "string", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalDateChangeDetail", + "resolved": "string", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when a option got selected.", + "docsTags": [] + }, + { + "event": "balDidAnimate", + "detail": "boolean", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalDateDidAnimateDetail", + "resolved": "boolean", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted after the animation has finished", + "docsTags": [] + }, + { + "event": "balFocus", + "detail": "FocusEvent", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalDateFocusDetail", + "resolved": "FocusEvent", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the input has focus.", + "docsTags": [] + }, + { + "event": "balIconClick", + "detail": "MouseEvent", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalDateIconClickDetail", + "resolved": "MouseEvent", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the icon has clicked.", + "docsTags": [] + }, + { + "event": "balInput", + "detail": "string", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalDateInputDetail", + "resolved": "string", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when a keyboard input occurred.", + "docsTags": [] + }, + { + "event": "balInputClick", + "detail": "MouseEvent", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalDateInputClickDetail", + "resolved": "MouseEvent", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the input has clicked.", + "docsTags": [] + }, + { + "event": "balWillAnimate", + "detail": "boolean", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalDateWillAnimateDetail", + "resolved": "boolean", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted before the animation starts", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-date-calendar.tsx", + "tag": "bal-date-calendar", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [ + "bal-date" + ], + "dependencies": [ + "bal-date-calendar-cell", + "bal-icon" + ], + "dependencyGraph": { + "bal-date-calendar": [ + "bal-date-calendar-cell", + "bal-icon" + ], + "bal-date": [ + "bal-date-calendar" + ] + }, + "props": [ + { + "name": "allowedDates", + "type": "(isoDate: string) => boolean", + "complexType": { + "original": "BalProps.BalDateCalendarAllowedDatesCallback | undefined", + "resolved": "(isoDate: string) => boolean", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "reflectToAttr": false, + "docs": "Callback to determine which date in the datepicker should be selectable.", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "(isoDate: string) => boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "defaultDate", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "default-date", + "reflectToAttr": false, + "docs": "The date to defines where the calendar starts. The prop accepts ISO 8601 date strings (YYYY-MM-DD). Default is today.", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "max", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": true, + "attr": "max", + "reflectToAttr": false, + "docs": "The maximum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\n`1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the maximum could just be the year, such as `1994`.\nDefaults to the end of this year.", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "maxYearProp", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": false, + "attr": "max-year", + "reflectToAttr": false, + "docs": "Latest year available for selection", + "docsTags": [], + "values": [ + { + "type": "number" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "min", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": true, + "attr": "min", + "reflectToAttr": false, + "docs": "The minimum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\nsuch as `1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the minimum could just be the year, such as `1994`.\nDefaults to the beginning of the year, 100 years ago from today.", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "minYearProp", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": false, + "attr": "min-year", + "reflectToAttr": false, + "docs": "Earliest year available for selection", + "docsTags": [], + "values": [ + { + "type": "number" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "value", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "value", + "reflectToAttr": false, + "docs": "The value of selected date, which accepts ISO 8601 date strings (YYYY-MM-DD).", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [ + { + "event": "balChange", + "detail": "string", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalDateCalendarChangeDetail", + "resolved": "string", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when a option got selected.", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-date-calendar-cell.tsx", + "tag": "bal-date-calendar-cell", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [ + "bal-date-calendar" + ], + "dependencies": [], + "dependencyGraph": { + "bal-date-calendar": [ + "bal-date-calendar-cell" + ] + }, + "props": [ + { + "name": "day", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": false, + "attr": "day", + "reflectToAttr": false, + "docs": "PUBLIC PROPERTY API\n------------------------------------------------------", + "docsTags": [], + "values": [ + { + "type": "number" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "disabled", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "disabled", + "reflectToAttr": false, + "docs": "", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "fullDate", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "full-date", + "reflectToAttr": false, + "docs": "", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": true, + "getter": false, + "setter": false + }, + { + "name": "isoDate", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "iso-date", + "reflectToAttr": false, + "docs": "", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": true, + "getter": false, + "setter": false + }, + { + "name": "month", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": false, + "attr": "month", + "reflectToAttr": false, + "docs": "", + "docsTags": [], + "values": [ + { + "type": "number" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "selected", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "selected", + "reflectToAttr": false, + "docs": "", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "today", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "today", + "reflectToAttr": false, + "docs": "", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "year", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": false, + "attr": "year", + "reflectToAttr": false, + "docs": "", + "docsTags": [], + "values": [ + { + "type": "number" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [ + { + "event": "balSelectDay", + "detail": "string", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalDateCellSelectDetail", + "resolved": "string", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when a option got selected.", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-divider.tsx", + "tag": "bal-divider", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [ + { + "name": "borderStyle", + "type": "\"\" | \"dashed\" | \"solid\"", + "complexType": { + "original": "BalProps.BalDividerBorderStyle", + "resolved": "\"\" | \"dashed\" | \"solid\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "border-style", + "reflectToAttr": false, + "docs": "Defines the color of the separator line.", + "docsTags": [ + { + "name": "default", + "text": "'solid'" + } + ], + "default": "'solid'", + "values": [ + { + "type": "\"\"" + }, + { + "value": "dashed", + "type": "string" + }, + { + "value": "solid", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "color", + "type": "\"danger\" | \"danger-dark\" | \"danger-darker\" | \"grey\" | \"grey-dark\" | \"grey-light\" | \"light-blue\" | \"primary\" | \"primary-dark\" | \"primary-light\" | \"success\" | \"warning\" | \"white\"", + "complexType": { + "original": "BalProps.BalDividerColor", + "resolved": "\"danger\" | \"danger-dark\" | \"danger-darker\" | \"grey\" | \"grey-dark\" | \"grey-light\" | \"light-blue\" | \"primary\" | \"primary-dark\" | \"primary-light\" | \"success\" | \"warning\" | \"white\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "color", + "reflectToAttr": false, + "docs": "Defines the color of the separator line.", + "docsTags": [ + { + "name": "default", + "text": "'grey'" + } + ], + "default": "'grey'", + "values": [ + { + "value": "danger", + "type": "string" + }, + { + "value": "danger-dark", + "type": "string" + }, + { + "value": "danger-darker", + "type": "string" + }, + { + "value": "grey", + "type": "string" + }, + { + "value": "grey-dark", + "type": "string" + }, + { + "value": "grey-light", + "type": "string" + }, + { + "value": "light-blue", + "type": "string" + }, + { + "value": "primary", + "type": "string" + }, + { + "value": "primary-dark", + "type": "string" + }, + { + "value": "primary-light", + "type": "string" + }, + { + "value": "success", + "type": "string" + }, + { + "value": "warning", + "type": "string" + }, + { + "value": "white", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "layout", + "type": "\"\" | \"horizontal\" | \"vertical\"", + "complexType": { + "original": "BalProps.BalDividerLayout", + "resolved": "\"\" | \"horizontal\" | \"vertical\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "layout", + "reflectToAttr": false, + "docs": "Defines the position of the child elements if they\nare showed verticaly or horizontally. Default is verticaly.", + "docsTags": [ + { + "name": "default", + "text": "'horizontal'" + } + ], + "default": "'horizontal'", + "values": [ + { + "type": "\"\"" + }, + { + "value": "horizontal", + "type": "string" + }, + { + "value": "vertical", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "space", + "type": "\"\" | \"large\" | \"medium\" | \"none\" | \"normal\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\"", + "complexType": { + "original": "BalProps.BalDividerSpace", + "resolved": "\"\" | \"large\" | \"medium\" | \"none\" | \"normal\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "space", + "reflectToAttr": false, + "docs": "Defines the space between the child elements. Default is xx-small.", + "docsTags": [ + { + "name": "default", + "text": "'none'" + } + ], + "default": "'none'", + "values": [ + { + "type": "\"\"" + }, + { + "value": "large", + "type": "string" + }, + { + "value": "medium", + "type": "string" + }, + { + "value": "none", + "type": "string" + }, + { + "value": "normal", + "type": "string" + }, + { + "value": "small", + "type": "string" + }, + { + "value": "x-large", + "type": "string" + }, + { + "value": "x-small", + "type": "string" + }, + { + "value": "xx-large", + "type": "string" + }, + { + "value": "xx-small", + "type": "string" + }, + { + "value": "xxx-large", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-dropdown.tsx", + "tag": "bal-dropdown", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [ + { + "name": "autocomplete", + "type": "\"on\" | \"off\" | \"tel\" | \"url\" | \"email\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"", + "complexType": { + "original": "BalProps.BalInputAutocomplete", + "resolved": "\"on\" | \"off\" | \"tel\" | \"url\" | \"email\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "autocomplete", + "reflectToAttr": false, + "docs": "Indicates whether the value of the control can be automatically completed by the browser.", + "docsTags": [ + { + "name": "default", + "text": "'off'" + } + ], + "default": "'off'", + "values": [ + { + "value": "on", + "type": "string" + }, + { + "value": "off", + "type": "string" + }, + { + "value": "tel", + "type": "string" + }, + { + "value": "url", + "type": "string" + }, + { + "value": "email", + "type": "string" + }, + { + "value": "name", + "type": "string" + }, + { + "value": "honorific-prefix", + "type": "string" + }, + { + "value": "given-name", + "type": "string" + }, + { + "value": "additional-name", + "type": "string" + }, + { + "value": "family-name", + "type": "string" + }, + { + "value": "honorific-suffix", + "type": "string" + }, + { + "value": "nickname", + "type": "string" + }, + { + "value": "username", + "type": "string" + }, + { + "value": "new-password", + "type": "string" + }, + { + "value": "current-password", + "type": "string" + }, + { + "value": "one-time-code", + "type": "string" + }, + { + "value": "organization-title", + "type": "string" + }, + { + "value": "organization", + "type": "string" + }, + { + "value": "street-address", + "type": "string" + }, + { + "value": "address-line1", + "type": "string" + }, + { + "value": "address-line2", + "type": "string" + }, + { + "value": "address-line3", + "type": "string" + }, + { + "value": "address-level4", + "type": "string" + }, + { + "value": "address-level3", + "type": "string" + }, + { + "value": "address-level2", + "type": "string" + }, + { + "value": "address-level1", + "type": "string" + }, + { + "value": "country", + "type": "string" + }, + { + "value": "country-name", + "type": "string" + }, + { + "value": "postal-code", + "type": "string" + }, + { + "value": "cc-name", + "type": "string" + }, + { + "value": "cc-given-name", + "type": "string" + }, + { + "value": "cc-additional-name", + "type": "string" + }, + { + "value": "cc-family-name", + "type": "string" + }, + { + "value": "cc-number", + "type": "string" + }, + { + "value": "cc-exp", + "type": "string" + }, + { + "value": "cc-exp-month", + "type": "string" + }, + { + "value": "cc-exp-year", + "type": "string" + }, + { + "value": "cc-csc", + "type": "string" + }, + { + "value": "cc-type", + "type": "string" + }, + { + "value": "transaction-currency", + "type": "string" + }, + { + "value": "transaction-amount", + "type": "string" + }, + { + "value": "language", + "type": "string" + }, + { + "value": "bday", + "type": "string" + }, + { + "value": "bday-day", + "type": "string" + }, + { + "value": "bday-month", + "type": "string" + }, + { + "value": "bday-year", + "type": "string" + }, + { + "value": "sex", + "type": "string" + }, + { + "value": "tel-country-code", + "type": "string" + }, + { + "value": "tel-national", + "type": "string" + }, + { + "value": "tel-area-code", + "type": "string" + }, + { + "value": "tel-local", + "type": "string" + }, + { + "value": "tel-extension", + "type": "string" + }, + { + "value": "impp", + "type": "string" + }, + { + "value": "photo", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "chips", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "chips", + "reflectToAttr": false, + "docs": "If `true`, the selected options are shown as chips", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "clearable", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "clearable", + "reflectToAttr": false, + "docs": "If `true`, a cross at the end is visible to clear the selection", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "contentHeight", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": false, + "attr": "content-height", + "reflectToAttr": false, + "docs": "Defines the max height of the list element", + "docsTags": [ + { + "name": "default", + "text": "262" + } + ], + "default": "262", + "values": [ + { + "type": "number" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "disabled", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "disabled", + "reflectToAttr": false, + "docs": "If `true`, the user cannot interact with the option.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "filter", + "type": "\"includes\" | \"starts-with\"", + "complexType": { + "original": "BalProps.BalOptionListFilter", + "resolved": "\"includes\" | \"starts-with\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "filter", + "reflectToAttr": false, + "docs": "Defines the filter logic of the list", + "docsTags": [ + { + "name": "default", + "text": "'includes'" + } + ], + "default": "'includes'", + "values": [ + { + "value": "includes", + "type": "string" + }, + { + "value": "starts-with", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "icon", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "icon", + "reflectToAttr": false, + "docs": "If `true` there will be on trigger icon visible", + "docsTags": [ + { + "name": "default", + "text": "'caret-down'" + } + ], + "default": "'caret-down'", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "inlineLabel", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "inline-label", + "reflectToAttr": false, + "docs": "Defines a inline label to be shown before the value", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "invalid", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "invalid", + "reflectToAttr": false, + "docs": "If `true`, the component will be shown as invalid", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "loading", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "loading", + "reflectToAttr": false, + "docs": "Defines if the select is in a loading state.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "multiple", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "multiple", + "reflectToAttr": false, + "docs": "If `true`, the user can select multiple options.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "name", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "name", + "reflectToAttr": false, + "docs": "The name of the control, which is submitted with the form data.", + "docsTags": [ + { + "name": "default", + "text": "this.inputId" + } + ], + "default": "this.inputId", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "options", + "type": "BalOption[]", + "complexType": { + "original": "BalOption[]", + "resolved": "BalOption[]", + "references": { + "BalOption": { + "location": "import", + "path": "../../utils/dropdown", + "id": "src/utils/dropdown/index.ts::BalOption" + } + } + }, + "mutable": false, + "reflectToAttr": false, + "docs": "Steps can be passed as a property or through HTML markup.", + "docsTags": [ + { + "name": "default", + "text": "[]" + } + ], + "default": "[]", + "values": [ + { + "type": "BalOption[]" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "placeholder", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "placeholder", + "reflectToAttr": false, + "docs": "Defines the placeholder of the component. Only shown when the value is empty", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "readonly", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "readonly", + "reflectToAttr": false, + "docs": "If `true` the element can not mutated, meaning the user can not edit the control.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "required", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "required", + "reflectToAttr": false, + "docs": "If `true`, the user must fill in a value before submitting a form.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "size", + "type": "\"\" | \"small\"", + "complexType": { + "original": "BalProps.BalDropdownSize", + "resolved": "\"\" | \"small\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "size", + "reflectToAttr": false, + "docs": "Defines the size of the control.", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "\"\"" + }, + { + "value": "small", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "theme", + "type": "\"\" | \"purple\"", + "complexType": { + "original": "BalProps.BalDropdownTheme", + "resolved": "\"\" | \"purple\"", + "references": { + "BalProps": { + "location": "global", + "id": "global::BalProps" + } + } + }, + "mutable": false, + "attr": "theme", + "reflectToAttr": false, + "docs": "Defines the color style of the control", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "\"\"" + }, + { + "value": "purple", + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "value", + "type": "string | string[]", + "complexType": { + "original": "string | string[]", + "resolved": "string | string[]", + "references": {} + }, + "mutable": false, + "attr": "value", + "reflectToAttr": false, + "docs": "The value of the selected options.", + "docsTags": [ + { + "name": "default", + "text": "[]" + } + ], + "default": "[]", + "values": [ + { + "type": "string" + }, + { + "type": "string[]" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [ + { + "name": "clear", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "clear() => Promise", + "parameters": [], + "docs": "Sets the value to `[]`, the input value to ยด''ยด and the focus index to ยด0ยด.", + "docsTags": [] + }, + { + "name": "close", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "close() => Promise", + "parameters": [], + "docs": "Closes the popup with option list", + "docsTags": [] + }, + { + "name": "getValue", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "getValue() => Promise", + "parameters": [], + "docs": "Returns the value of the component", + "docsTags": [] + }, + { + "name": "open", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "open() => Promise", + "parameters": [], + "docs": "Opens the popup with option list", + "docsTags": [] + }, + { + "name": "select", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "(newValue: string | string[]) => Promise", + "parameters": [ + { + "name": "newValue", + "type": "string | string[]", + "docs": "" + } + ], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "select(newValue: string | string[]) => Promise", + "parameters": [ + { + "name": "newValue", + "type": "string | string[]", + "docs": "" + } + ], + "docs": "Select option by passed value", + "docsTags": [] + }, + { + "name": "setFocus", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "setFocus() => Promise", + "parameters": [], + "docs": "Sets the focus on the input element", + "docsTags": [] + } + ], + "events": [ + { + "event": "balBlur", + "detail": "FocusEvent", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalDropdownBlurDetail", + "resolved": "FocusEvent", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the input loses focus.", + "docsTags": [] + }, + { + "event": "balChange", + "detail": "string | string[]", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalDropdownChangeDetail", + "resolved": "string | string[]", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when a option got selected.", + "docsTags": [] + }, + { + "event": "balFocus", + "detail": "FocusEvent", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalDropdownFocusDetail", + "resolved": "FocusEvent", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted when the input has focus.", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-field.tsx", + "tag": "bal-field", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [ + { + "name": "disabled", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "disabled", + "reflectToAttr": false, + "docs": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "boolean" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "horizontal", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "horizontal", + "reflectToAttr": false, + "docs": "If true, label and input are aligned horizontally within the field component, with the message positioned in a new line below.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "invalid", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "invalid", + "reflectToAttr": false, + "docs": "If `true` the component gets a invalid red style.", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "boolean" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "loading", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "loading", + "reflectToAttr": false, + "docs": "If `true` a loading spinner is visible at the end of the input", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "boolean" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "readonly", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "readonly", + "reflectToAttr": false, + "docs": "If `true` the element can not mutated, meaning the user can not edit the control.", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "boolean" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "required", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "required", + "reflectToAttr": false, + "docs": "If `true` the form control needs to be filled. If it is set to\n`false` an optional label is added to the label..", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "boolean" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "valid", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "valid", + "reflectToAttr": false, + "docs": "If `true` the component gets a valid green style.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [ + { + "event": "balFormControlDidLoad", + "detail": "HTMLElement", + "bubbles": true, + "complexType": { + "original": "BalEvents.BalFieldAriaLabelledByDetail", + "resolved": "HTMLElement", + "references": { + "BalEvents": { + "location": "global", + "id": "global::BalEvents" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Emitted after render when element is labelled", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-field-control.tsx", + "tag": "bal-field-control", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "scoped", + "dependents": [], + "dependencies": [ + "bal-icon" + ], + "dependencyGraph": { + "bal-field-control": [ + "bal-icon" + ] + }, + "props": [ + { + "name": "expandedOnMobile", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "expanded-on-mobile", + "reflectToAttr": false, + "docs": "If `true` on mobile devices the form control children are aligned verticaly and expanded to the full width", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "boolean" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "iconLeft", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "icon-left", + "reflectToAttr": false, + "docs": "", + "docsTags": [ + { + "name": "deprecated", + "text": "Baloise icon for the left side of the input" + }, + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "deprecation": "Baloise icon for the left side of the input", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "iconRight", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "icon-right", + "reflectToAttr": false, + "docs": "", + "docsTags": [ + { + "name": "deprecated", + "text": "Baloise icon for the right side of the input" + }, + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "deprecation": "Baloise icon for the right side of the input", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "loading", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "loading", + "reflectToAttr": false, + "docs": "If `true` a loading spinner is visible at the end of the input", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-field-hint.tsx", + "tag": "bal-field-hint", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "scoped", + "dependents": [], + "dependencies": [ + "bal-hint", + "bal-hint-title", + "bal-hint-text" + ], + "dependencyGraph": { + "bal-field-hint": [ + "bal-hint", + "bal-hint-title", + "bal-hint-text" + ], + "bal-hint": [ + "bal-icon", + "bal-button-group", + "bal-button", + "bal-popup" + ], + "bal-button": [ + "bal-spinner", + "bal-icon" + ], + "bal-popup": [ + "bal-stack", + "bal-heading", + "bal-close" + ], + "bal-close": [ + "bal-icon" + ] + }, + "props": [ + { + "name": "closeLabel", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "close-label", + "reflectToAttr": false, + "docs": "Text for the close button.", + "docsTags": [ + { + "name": "default", + "text": "'Close'" + } + ], + "default": "'Close'", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "hideTitleOnDesktop", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "hide-title-on-desktop", + "reflectToAttr": false, + "docs": "Hide the title on desktop.", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "small", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "small", + "reflectToAttr": false, + "docs": "Disables the close button for tablet and desktop", + "docsTags": [ + { + "name": "default", + "text": "false" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "subject", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "subject", + "reflectToAttr": false, + "docs": "Text of the inputs label", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "fileName": "bal-field-label.tsx", + "tag": "bal-field-label", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "scoped", + "dependents": [], + "dependencies": [ + "bal-label" + ], + "dependencyGraph": { + "bal-field-label": [ + "bal-label" + ] + }, + "props": [ + { + "name": "disabled", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "disabled", + "reflectToAttr": false, + "docs": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.", + "docsTags": [ + { + "name": "default", + "text": "undefined" + } + ], + "default": "undefined", + "values": [ + { + "type": "boolean" + } + ], + "optional": true, + "required": false, + "getter": false, + "setter": false + }, + { + "name": "htmlFor", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "html-for", + "reflectToAttr": false, + "docs": "The value of the for attribute must be a single id for a labeled\nform-related element in the same document as the