diff --git a/.changeset/modern-comics-grow.md b/.changeset/modern-comics-grow.md new file mode 100644 index 00000000000..71f618f945f --- /dev/null +++ b/.changeset/modern-comics-grow.md @@ -0,0 +1,8 @@ +--- +'@siemens/ix-angular': minor +'@siemens/ix-react': minor +'@siemens/ix': minor +'@siemens/ix-vue': minor +--- + +feat(forms): new forms and validation concept diff --git a/.gitignore b/.gitignore index a55b385f785..8025127b7e9 100644 --- a/.gitignore +++ b/.gitignore @@ -18,6 +18,7 @@ node_modules *.launch .settings/ *.sublime-workspace +.obsidian # IDE - VSCode .vscode/* diff --git a/SECURITY.md b/SECURITY.md index d93e1f47f54..b7b329113e4 100644 --- a/SECURITY.md +++ b/SECURITY.md @@ -7,6 +7,27 @@ This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. --> -# Reporting Security Issues +# Security Policy -If you believe you have found a security vulnerability in iX, we encourage you to let us know right away. We will investigate all legitimate reports and do our best to quickly fix the problem. +Siemens takes the security of its code seriously. If you think you have found a security vulnerability, +please read the next sections and follow the instructions to report your finding. + +## Scope of this policy + +This is the default security policy for all repositories within the `siemens` organization on GitHub.com. + +It does not apply for reposities that have their own security policy. +It also does not apply for forks where you should follow the upstream policy instead. + +If you are unsure whether the policy applies feel free to reach out via the channels mentioned below and we'll be happy to help. + +## Reporting a Vulnerability + +Please DO NOT report any potential security vulnerability via a public channel (mailing list, GitHub issue, etc.). +Instead, [report the vulnerability privately via GitHub](https://docs.github.com/en/code-security/security-advisories/guidance-on-reporting-and-writing/privately-reporting-a-security-vulnerability) +(if enabled for the repository) or [contact us via email](mailto:opensource@siemens.com). + +Please provide a detailed description of the issue, the steps to reproduce it, the affected version(s) and, if already available, +a proposal for a fix. You should receive a response within 5 working days. If for some reason you do not, please follow up via email to ensure we received your original message. + +If we confirm the issue as a vulnerability, we will publish an advisory (e.g. on GitHub) and give credits for your report if desired. We follow the [coordinated vulnerability disclosure](https://vuls.cert.org/confluence/display/CVD) model and will define an appropriate disclosure timeline together with you. diff --git a/package.json b/package.json index b5865b8c8b2..f5f0d223457 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "start": "dotenv -- turbo run start", "turbo": "dotenv -- turbo", "lint": "dotenv -- turbo run lint", + "format": "prettier --write ./packages/**/src/**/*.{ts,tsx,js,jsx,css,scss,html,vue,json}", "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0", "visual-regression": "dotenv -- turbo run visual-regression", "test": "dotenv -- turbo run test", @@ -61,5 +62,11 @@ "commitizen": { "path": "./node_modules/cz-conventional-changelog" } + }, + "pnpm": { + "patchedDependencies": { + "@stencil/react-output-target@0.5.3": "patches/@stencil__react-output-target@0.5.3.patch", + "@stencil/vue-output-target@0.8.8": "patches/@stencil__vue-output-target@0.8.8.patch" + } } } diff --git a/packages/aggrid/scss/ix-aggrid.scss b/packages/aggrid/scss/ix-aggrid.scss index 338ba6b1fe4..248513ef5f7 100644 --- a/packages/aggrid/scss/ix-aggrid.scss +++ b/packages/aggrid/scss/ix-aggrid.scss @@ -157,5 +157,16 @@ .ag-radio-button .ag-input-wrapper { color: var(--theme-color-primary); } + + .ag-input-field-input { + &.focus, + &:focus { + &:not(.readonly, .read-only, .disabled, [readonly], [disabled], :read-only) { + outline: 1px solid var(--theme-color-focus-bdr) !important; + outline-offset: var(--theme-input--focus--outline-offset) !important; + border-color: var(--theme-input--border-color--focus) !important; + } + } + } } } diff --git a/packages/aggrid/tests/aggrid.e2e.ts b/packages/aggrid/tests/aggrid.e2e.ts index 5000a117049..861835858d8 100644 --- a/packages/aggrid/tests/aggrid.e2e.ts +++ b/packages/aggrid/tests/aggrid.e2e.ts @@ -27,6 +27,7 @@ regressionTest.describe('aggrid', () => { await expect(filterMenu).toBeVisible(); const inputHandle = filterMenu.getByPlaceholder('Filter...'); + await inputHandle.click(); await inputHandle.fill('Test'); expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-filter-1-chromium---theme-classic-dark-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-filter-1-chromium---theme-classic-dark-linux.png index 7b77f59f8fe..0a2a5a9cfc6 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-filter-1-chromium---theme-classic-dark-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-filter-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-filter-1-chromium---theme-classic-light-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-filter-1-chromium---theme-classic-light-linux.png index 7918ec09eaf..1ea14910e12 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-filter-1-chromium---theme-classic-light-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-filter-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts index 341dd554831..1dab929d3f1 100644 --- a/packages/angular-test-app/src/app/app-routing.module.ts +++ b/packages/angular-test-app/src/app/app-routing.module.ts @@ -48,8 +48,15 @@ import Chip from '../preview-examples/chip'; import ContentExample from '../preview-examples/content'; import ContentHeader from '../preview-examples/content-header'; import ContentHeaderNoBack from '../preview-examples/content-header-no-back'; +import CustomField from '../preview-examples/custom-field'; +import CustomFieldValidation from '../preview-examples/custom-field-validation'; import DateDropdown from '../preview-examples/date-dropdown'; import DateDropdownUserRange from '../preview-examples/date-dropdown-user-range'; +import DateInput from '../preview-examples/date-input'; +import DateInputDisabled from '../preview-examples/date-input-disabled'; +import DateInputLabel from '../preview-examples/date-input-label'; +import DateInputReadonly from '../preview-examples/date-input-readonly'; +import DateInputValidation from '../preview-examples/date-input-validation'; import Datepicker from '../preview-examples/datepicker'; import DatepickerLocale from '../preview-examples/datepicker-locale'; import DatepickerRange from '../preview-examples/datepicker-range'; @@ -64,7 +71,6 @@ import DropdownIcon from '../preview-examples/dropdown-icon'; import DropdownQuickActions from '../preview-examples/dropdown-quick-actions'; import DropdownSubmenu from '../preview-examples/dropdown-submenu'; import Echarts from '../preview-examples/echarts'; -import EchartsSpecial3d from '../preview-examples/echarts-special-3d'; import EchartsBarHorizontalStacked from '../preview-examples/echarts-bar-horizontal-stacked'; import EchartsBarSimple from '../preview-examples/echarts-bar-simple'; import EchartsCircle from '../preview-examples/echarts-circle'; @@ -73,11 +79,12 @@ import EchartsGauge from '../preview-examples/echarts-gauge'; import EchartsLineAdvanced from '../preview-examples/echarts-line-advanced'; import EchartsLineMultipleYAxis from '../preview-examples/echarts-line-multiple-y-axis'; import EchartsLineSimple from '../preview-examples/echarts-line-simple'; -import EchartsSpecialToolbox from '../preview-examples/echarts-special-toolbox'; -import EchartsSpecialZoom from '../preview-examples/echarts-special-zoom'; import EchartsPie from '../preview-examples/echarts-pie'; -import EchartsProgressCircle from '../preview-examples/echarts-progress-circle'; import EchartsProgressArc from '../preview-examples/echarts-progress-arc'; +import EchartsProgressCircle from '../preview-examples/echarts-progress-circle'; +import EchartsSpecial3d from '../preview-examples/echarts-special-3d'; +import EchartsSpecialToolbox from '../preview-examples/echarts-special-toolbox'; +import EchartsSpecialZoom from '../preview-examples/echarts-special-zoom'; import EmptyState from '../preview-examples/empty-state'; import EmptyStateCompact from '../preview-examples/empty-state-compact'; import EmptyStateCompactBreak from '../preview-examples/empty-state-compact-break'; @@ -87,6 +94,12 @@ import EventListCustomItemHeight from '../preview-examples/event-list-custom-ite import EventListSelected from '../preview-examples/event-list-selected'; import ExpandingSearch from '../preview-examples/expanding-search'; import FlipTile from '../preview-examples/flip-tile'; +import FormCheckbox from '../preview-examples/form-checkbox'; +import FormCheckboxDisabled from '../preview-examples/form-checkbox-disabled'; +import FormCheckboxGroup from '../preview-examples/form-checkbox-group'; +import FormCheckboxGroupIndeterminate from "../preview-examples/form-checkbox-group-indeterminate"; +import FormCheckboxValidation from '../preview-examples/form-checkbox-validation'; +import FormValidation from '../preview-examples/form-validation'; import Grid from '../preview-examples/grid'; import GridPadding from '../preview-examples/grid-padding'; import GridSize from '../preview-examples/grid-size'; @@ -101,11 +114,19 @@ import IconToggleButtonSecondaryGhost from '../preview-examples/icon-toggle-butt import IconToggleButtonSecondaryOutline from '../preview-examples/icon-toggle-button-secondary-outline'; import Input from '../preview-examples/input'; import InputDisabled from '../preview-examples/input-disabled'; -import InputLabels from '../preview-examples/input-labels'; +import InputFormValidation from '../preview-examples/input-form-validation'; +import InputLabel from '../preview-examples/input-label'; +import InputLegacy from '../preview-examples/input-legacy'; +import InputLegacyDisabled from '../preview-examples/input-legacy-disabled'; +import InputLegacyLabels from '../preview-examples/input-legacy-labels'; +import InputLegacyReadonly from '../preview-examples/input-legacy-readonly'; +import InputLegacySearch from '../preview-examples/input-legacy-search'; +import InputLegacyTypes from '../preview-examples/input-legacy-types'; +import InputLegacyWithIcon from '../preview-examples/input-legacy-with-icon'; +import InputPattern from '../preview-examples/input-pattern'; import InputReadonly from '../preview-examples/input-readonly'; -import InputSearch from '../preview-examples/input-search'; import InputTypes from '../preview-examples/input-types'; -import InputWithIcon from '../preview-examples/input-with-icon'; +import InputValidation from '../preview-examples/input-validation'; import KeyValue from '../preview-examples/key-value'; import KeyValueList from '../preview-examples/key-value-list'; import KeyValueListStriped from '../preview-examples/key-value-list-striped'; @@ -115,6 +136,8 @@ import KeyValueWithCustomValue from '../preview-examples/key-value-with-custom-v import KeyValueWithIcon from '../preview-examples/key-value-with-icon'; import KeyValueWithLabelLeft from '../preview-examples/key-value-with-label-left'; import Kpi from '../preview-examples/kpi'; +import LayoutAuto from '../preview-examples/layout-auto'; +import LayoutAutoCustom from '../preview-examples/layout-auto-custom'; import LinkButton from '../preview-examples/link-button'; import LinkButtonDisabled from '../preview-examples/link-button-disabled'; import Loading from '../preview-examples/loading'; @@ -128,6 +151,12 @@ import ModalByInstance from '../preview-examples/modal-by-instance'; import ModalByInstanceContent from '../preview-examples/modal-by-instance-content'; import ModalByTemplate from '../preview-examples/modal-by-template'; import ModalSizes from '../preview-examples/modal-sizes'; +import NumberInput from '../preview-examples/number-input'; +import NumberInputDisabled from '../preview-examples/number-input-disabled'; +import NumberInputLabel from '../preview-examples/number-input-label'; +import NumberInputReadonly from '../preview-examples/number-input-readonly'; +import NumberInputStepperButton from '../preview-examples/number-input-stepper-button'; +import NumberInputValidation from '../preview-examples/number-input-validation'; import Pagination from '../preview-examples/pagination'; import PaginationAdvanced from '../preview-examples/pagination-advanced'; import Pane from '../preview-examples/pane'; @@ -136,11 +165,16 @@ import Pill from '../preview-examples/pill'; import PillVariants from '../preview-examples/pill-variants'; import PopoverNews from '../preview-examples/popover-news'; import PushCard from '../preview-examples/push-card'; -import RadioButton from '../preview-examples/radio-button'; +import Radio from '../preview-examples/radio'; +import Radiobutton from '../preview-examples/radio-button'; +import RadioDisabled from '../preview-examples/radio-disabled'; +import RadioGroup from '../preview-examples/radio-group'; +import RadioValidation from '../preview-examples/radio-validation'; import Select from '../preview-examples/select'; import SelectEditable from '../preview-examples/select-editable'; import SelectMultiple from '../preview-examples/select-multiple'; import SelectNgModel from '../preview-examples/select-ng-model'; +import SelectValidation from '../preview-examples/select-validation'; import Settings from '../preview-examples/settings'; import Slider from '../preview-examples/slider'; import SliderError from '../preview-examples/slider-error'; @@ -154,7 +188,12 @@ import Tabs from '../preview-examples/tabs'; import TabsRounded from '../preview-examples/tabs-rounded'; import Textarea from '../preview-examples/textarea'; import TextareaDisabled from '../preview-examples/textarea-disabled'; +import TextareaLegacy from '../preview-examples/textarea-legacy'; +import TextareaLegacyDisabled from '../preview-examples/textarea-legacy-disabled'; +import TextareaLegacyReadonly from '../preview-examples/textarea-legacy-readonly'; import TextareaReadonly from '../preview-examples/textarea-readonly'; +import TextareaRowsCols from '../preview-examples/textarea-rows-cols'; +import TextareaValidation from '../preview-examples/textarea-validation'; import ThemeService from '../preview-examples/theme-switcher'; import Tile from '../preview-examples/tile'; import Timepicker from '../preview-examples/timepicker'; @@ -162,6 +201,7 @@ import Toast from '../preview-examples/toast'; import ToastCustom from '../preview-examples/toast-custom'; import ToastPosition from '../preview-examples/toast-position'; import Toggle from '../preview-examples/toggle'; +import ToggleButtonPrimary from '../preview-examples/toggle-button-primary'; import ToggleButtonPrimaryGhost from '../preview-examples/toggle-button-primary-ghost'; import ToggleButtonPrimaryOutline from '../preview-examples/toggle-button-primary-outline'; import ToggleButtonSecondary from '../preview-examples/toggle-button-secondary'; @@ -177,6 +217,7 @@ import Tree from '../preview-examples/tree'; import TreeCustom from '../preview-examples/tree-custom'; import Upload from '../preview-examples/upload'; import Validation from '../preview-examples/validation'; +import ValidationSelect from '../preview-examples/validation-select'; import VerticalTabs from '../preview-examples/vertical-tabs'; import VerticalTabsWithAvatar from '../preview-examples/vertical-tabs-with-avatar'; import Workflow from '../preview-examples/workflow'; @@ -214,6 +255,22 @@ const routes: Routes = [ path: 'content', component: ContentExample, }, + { + path: 'custom-field', + component: CustomField, + }, + { + path: 'custom-field-validation', + component: CustomFieldValidation, + }, + { + path: 'buttons', + component: Buttons, + }, + { + path: 'button-group', + component: ButtonGroup, + }, { path: 'aggrid', component: AgGrid, @@ -323,6 +380,26 @@ const routes: Routes = [ path: 'checkbox', component: Checkbox, }, + { + path: 'form-checkbox', + component: FormCheckbox, + }, + { + path: 'form-checkbox-disabled', + component: FormCheckboxDisabled, + }, + { + path: 'form-checkbox-validation', + component: FormCheckboxValidation, + }, + { + path: 'form-checkbox-group', + component: FormCheckboxGroup, + }, + { + path: 'form-checkbox-group-indeterminate', + component: FormCheckboxGroupIndeterminate, + }, { path: 'chip', component: Chip, @@ -335,6 +412,30 @@ const routes: Routes = [ path: 'date-dropdown-user-range', component: DateDropdownUserRange, }, + { + path: 'date-input', + component: DateInput, + }, + { + path: 'date-input-disabled', + component: DateInputDisabled, + }, + { + path: 'date-input-label', + component: DateInputLabel, + }, + { + path: 'date-input-readonly', + component: DateInputReadonly, + }, + { + path: 'date-input-validation', + component: DateInputValidation, + }, + { + path: 'datepicker', + component: Datepicker, + }, { path: 'content-header-no-back', component: ContentHeaderNoBack, @@ -507,32 +608,32 @@ const routes: Routes = [ component: IconToggleButtonSecondary, }, { - path: 'input-disabled', - component: InputDisabled, + path: 'input-legacy-disabled', + component: InputLegacyDisabled, }, { - path: 'input-labels', - component: InputLabels, + path: 'input-legacy-labels', + component: InputLegacyLabels, }, { - path: 'input-readonly', - component: InputReadonly, + path: 'input-legacy-readonly', + component: InputLegacyReadonly, }, { - path: 'input-search', - component: InputSearch, + path: 'input-legacy-search', + component: InputLegacySearch, }, { - path: 'input-types', - component: InputTypes, + path: 'input-legacy-types', + component: InputLegacyTypes, }, { - path: 'input-with-icon', - component: InputWithIcon, + path: 'input-legacy-with-icon', + component: InputLegacyWithIcon, }, { - path: 'input', - component: Input, + path: 'input-legacy', + component: InputLegacy, }, { path: 'key-value-list-striped', @@ -632,6 +733,46 @@ const routes: Routes = [ }, { path: 'pane', component: Pane }, { path: 'pane-layout', component: PaneLayout }, + { path: 'pill', component: Pill }, + { path: 'pill-variants', component: PillVariants }, + { path: 'popover-news', component: PopoverNews }, + { path: 'radio-button', component: Radiobutton }, + { path: 'radio', component: Radio }, + { path: 'radio-disabled', component: RadioDisabled }, + { path: 'radio-group', component: RadioGroup }, + { path: 'radio-validation', component: RadioValidation }, + { path: 'select-editable', component: SelectEditable }, + { path: 'select-multiple', component: SelectMultiple }, + { path: 'select-ng-model', component: SelectNgModel }, + { path: 'select-validation', component: SelectValidation }, + { path: 'select', component: Select }, + { path: 'settings', component: Settings }, + { path: 'spinner', component: Spinner }, + { path: 'spinner-large', component: SpinnerLarge }, + { path: 'split-button-icons', component: SplitButtonIcons }, + { path: 'split-button', component: SplitButton }, + { path: 'tabs', component: Tabs }, + { path: 'tabs-rounded', component: TabsRounded }, + { path: 'textarea-legacy', component: TextareaLegacy }, + { path: 'textarea-legacy-disabled', component: TextareaLegacyDisabled }, + { path: 'textarea-legacy-readonly', component: TextareaLegacyReadonly }, + { path: 'textarea', component: Textarea }, + { path: 'textarea-disabled', component: TextareaDisabled }, + { path: 'textarea-disabled', component: TextareaReadonly }, + { path: 'textarea-rows-cols', component: TextareaRowsCols }, + { path: 'textarea-validation', component: TextareaValidation }, + { path: 'input', component: Input }, + { path: 'input-disabled', component: InputDisabled }, + { path: 'input-label', component: InputLabel }, + { path: 'input-pattern', component: InputPattern }, + { path: 'input-readonly', component: InputReadonly }, + { path: 'input-types', component: InputTypes }, + { path: 'input-validation', component: InputValidation }, + { path: 'theme-switcher', component: ThemeService }, + { path: 'tile', component: Tile }, + { path: 'timepicker', component: Timepicker }, + { path: 'toggle-button-primary', component: ToggleButtonPrimary }, + { path: 'toggle-button-secondary', component: ToggleButtonSecondary }, { path: 'pill', component: Pill, @@ -645,10 +786,6 @@ const routes: Routes = [ path: 'push-card', component: PushCard, }, - { - path: 'radio-button', - component: RadioButton, - }, { path: 'select-editable', component: SelectEditable, @@ -709,18 +846,6 @@ const routes: Routes = [ path: 'tabs', component: Tabs, }, - { - path: 'textarea-disabled', - component: TextareaDisabled, - }, - { - path: 'textarea-readonly', - component: TextareaReadonly, - }, - { - path: 'textarea', - component: Textarea, - }, { path: 'theme-switcher', component: ThemeService, @@ -753,6 +878,37 @@ const routes: Routes = [ path: 'toggle-button-primary-outline', component: ToggleButtonPrimaryOutline, }, + { path: 'toggle-disabled', component: ToggleDisabled }, + { path: 'toggle-custom-label', component: ToggleCustomLabel }, + { path: 'toggle-ng-model', component: ToggleNgModel }, + { path: 'toggle', component: Toggle }, + { path: 'upload', component: Upload }, + { path: 'vertical-tabs-with-avatar', component: VerticalTabsWithAvatar }, + { path: 'vertical-tabs', component: VerticalTabs }, + { path: 'validation', component: Validation }, + { path: 'workflow', component: Workflow }, + { path: 'workflow-vertical', component: WorkflowVertical }, + { path: 'map-navigation', component: MapNavigation }, + { path: 'map-navigation-overlay', component: MapNavigationOverlay }, + { path: 'number-input', component: NumberInput }, + { path: 'number-input-disabled', component: NumberInputDisabled }, + { path: 'number-input-label', component: NumberInputLabel }, + { path: 'number-input-readonly', component: NumberInputReadonly }, + { + path: 'number-input-stepper-button', + component: NumberInputStepperButton, + }, + { path: 'number-input-validation', component: NumberInputValidation }, + { path: 'tooltip', component: Tooltip }, + { path: 'modal-by-instance', component: ModalByInstance }, + { path: 'push-card', component: PushCard }, + { path: 'action-card', component: ActionCard }, + { path: 'card', component: Card }, + { path: 'card-list', component: CardList }, + { path: 'empty-state', component: EmptyState }, + { path: 'empty-state-compact', component: EmptyStateCompact }, + { path: 'empty-state-compact-break', component: EmptyStateCompactBreak }, + { path: 'key-value', component: KeyValue }, { path: 'toggle-button-secondary-ghost', component: ToggleButtonSecondaryGhost, @@ -825,6 +981,22 @@ const routes: Routes = [ path: 'workflow', component: Workflow, }, + { path: 'key-value-list-with-icon', component: KeyValueListWithIcon }, + { path: 'key-value-list-striped', component: KeyValueListStriped }, + { path: 'menu-category', component: MenuCategory }, + { path: 'slider', component: Slider }, + { path: 'slider-trace', component: SliderTrace }, + { path: 'slider-marker', component: SliderMarker }, + { path: 'slider-error', component: SliderError }, + { path: 'grid', component: Grid }, + { path: 'grid-size', component: GridSize }, + { path: 'grid-padding', component: GridPadding }, + { path: 'modal-sizes', component: ModalSizes }, + { path: 'validation-select', component: ValidationSelect }, + { path: 'input-form-validation', component: InputFormValidation }, + { path: 'form-validation', component: FormValidation }, + { path: 'layout-auto', component: LayoutAuto }, + { path: 'layout-auto-custom', component: LayoutAutoCustom }, ], }, ]; diff --git a/packages/angular-test-app/src/app/app.component.html b/packages/angular-test-app/src/app/app.component.html index f87755a3a8c..c463a43f004 100644 --- a/packages/angular-test-app/src/app/app.component.html +++ b/packages/angular-test-app/src/app/app.component.html @@ -3,5 +3,4 @@ SPDX-License-Identifier: MIT --> - diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts index 6356f4c1c7c..6283e9a32bf 100644 --- a/packages/angular-test-app/src/app/app.module.ts +++ b/packages/angular-test-app/src/app/app.module.ts @@ -8,7 +8,6 @@ */ import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; @@ -18,6 +17,7 @@ import { IxModule } from '@siemens/ix-angular'; import { AgGridModule } from 'ag-grid-angular'; import { NgxEchartsModule } from 'ngx-echarts'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import AboutAndLegal from '../preview-examples/about-and-legal'; import ActionCard from '../preview-examples/action-card'; import AgGrid from '../preview-examples/aggrid'; @@ -56,8 +56,15 @@ import Chip from '../preview-examples/chip'; import ContentExample from '../preview-examples/content'; import ContentHeader from '../preview-examples/content-header'; import ContentHeaderNoBack from '../preview-examples/content-header-no-back'; +import CustomField from '../preview-examples/custom-field'; +import CustomFieldValidation from '../preview-examples/custom-field-validation'; import DateDropdown from '../preview-examples/date-dropdown'; import DateDropdownUserRange from '../preview-examples/date-dropdown-user-range'; +import DateInput from '../preview-examples/date-input'; +import DateInputDisabled from '../preview-examples/date-input-disabled'; +import DateInputLabel from '../preview-examples/date-input-label'; +import DateInputReadonly from '../preview-examples/date-input-readonly'; +import DateInputValidation from '../preview-examples/date-input-validation'; import Datepicker from '../preview-examples/datepicker'; import DatepickerLocale from '../preview-examples/datepicker-locale'; import DatepickerRange from '../preview-examples/datepicker-range'; @@ -72,9 +79,8 @@ import DropdownIcon from '../preview-examples/dropdown-icon'; import DropdownQuickActions from '../preview-examples/dropdown-quick-actions'; import DropdownSubmenu from '../preview-examples/dropdown-submenu'; import Echarts from '../preview-examples/echarts'; -import EchartsSpecial3d from 'src/preview-examples/echarts-special-3d'; -import EchartsBarSimple from '../preview-examples/echarts-bar-simple'; import EchartsBarHorizontalStacked from '../preview-examples/echarts-bar-horizontal-stacked'; +import EchartsBarSimple from '../preview-examples/echarts-bar-simple'; import EchartsCircle from '../preview-examples/echarts-circle'; import EchartsEmptyState from '../preview-examples/echarts-empty-state'; import EchartsGauge from '../preview-examples/echarts-gauge'; @@ -82,10 +88,11 @@ import EchartsLineAdvanced from '../preview-examples/echarts-line-advanced'; import EchartsLineMultipleYAxis from '../preview-examples/echarts-line-multiple-y-axis'; import EchartsLineSimple from '../preview-examples/echarts-line-simple'; import EchartsPie from '../preview-examples/echarts-pie'; -import EchartsSpecialToolbox from '../preview-examples/echarts-special-toolbox'; -import EchartsSpecialZoom from '../preview-examples/echarts-special-zoom'; import EchartsProgressArc from '../preview-examples/echarts-progress-arc'; import EchartsProgressCircle from '../preview-examples/echarts-progress-circle'; +import EchartsSpecial3d from '../preview-examples/echarts-special-3d'; +import EchartsSpecialToolbox from '../preview-examples/echarts-special-toolbox'; +import EchartsSpecialZoom from '../preview-examples/echarts-special-zoom'; import EmptyState from '../preview-examples/empty-state'; import EmptyStateCompact from '../preview-examples/empty-state-compact'; import EmptyStateCompactBreak from '../preview-examples/empty-state-compact-break'; @@ -95,6 +102,12 @@ import EventListCustomItemHeight from '../preview-examples/event-list-custom-ite import EventListSelected from '../preview-examples/event-list-selected'; import ExpandingSearch from '../preview-examples/expanding-search'; import FlipTile from '../preview-examples/flip-tile'; +import FormCheckbox from '../preview-examples/form-checkbox'; +import FormCheckboxDisabled from '../preview-examples/form-checkbox-disabled'; +import FormCheckboxGroup from '../preview-examples/form-checkbox-group'; +import FormCheckboxGroupIndeterminate from '../preview-examples/form-checkbox-group-indeterminate'; +import FormCheckboxValidation from '../preview-examples/form-checkbox-validation'; +import FormValidation from '../preview-examples/form-validation'; import Grid from '../preview-examples/grid'; import GridPadding from '../preview-examples/grid-padding'; import GridSize from '../preview-examples/grid-size'; @@ -109,11 +122,19 @@ import IconToggleButtonSecondaryGhost from '../preview-examples/icon-toggle-butt import IconToggleButtonSecondaryOutline from '../preview-examples/icon-toggle-button-secondary-outline'; import Input from '../preview-examples/input'; import InputDisabled from '../preview-examples/input-disabled'; -import InputLabels from '../preview-examples/input-labels'; +import InputFormValidation from '../preview-examples/input-form-validation'; +import InputLabel from '../preview-examples/input-label'; +import InputLegacy from '../preview-examples/input-legacy'; +import InputLegacyDisabled from '../preview-examples/input-legacy-disabled'; +import InputLegacyLabels from '../preview-examples/input-legacy-labels'; +import InputLegacyReadonly from '../preview-examples/input-legacy-readonly'; +import InputLegacySearch from '../preview-examples/input-legacy-search'; +import InputLegacyTypes from '../preview-examples/input-legacy-types'; +import InputLegacyWithIcon from '../preview-examples/input-legacy-with-icon'; +import InputPattern from '../preview-examples/input-pattern'; import InputReadonly from '../preview-examples/input-readonly'; -import InputSearch from '../preview-examples/input-search'; import InputTypes from '../preview-examples/input-types'; -import InputWithIcon from '../preview-examples/input-with-icon'; +import InputValidation from '../preview-examples/input-validation'; import KeyValue from '../preview-examples/key-value'; import KeyValueList from '../preview-examples/key-value-list'; import KeyValueListStriped from '../preview-examples/key-value-list-striped'; @@ -123,6 +144,8 @@ import KeyValueWithCustomValue from '../preview-examples/key-value-with-custom-v import KeyValueWithIcon from '../preview-examples/key-value-with-icon'; import KeyValueWithLabelLeft from '../preview-examples/key-value-with-label-left'; import Kpi from '../preview-examples/kpi'; +import LayoutAuto from '../preview-examples/layout-auto'; +import LayoutAutoCustom from '../preview-examples/layout-auto-custom'; import LinkButton from '../preview-examples/link-button'; import LinkButtonDisabled from '../preview-examples/link-button-disabled'; import Loading from '../preview-examples/loading'; @@ -136,6 +159,12 @@ import ModalByInstance from '../preview-examples/modal-by-instance'; import ModalByInstanceContent from '../preview-examples/modal-by-instance-content'; import ModalByTemplate from '../preview-examples/modal-by-template'; import ModalSizes from '../preview-examples/modal-sizes'; +import NumberInput from '../preview-examples/number-input'; +import NumberInputDisabled from '../preview-examples/number-input-disabled'; +import NumberInputLabel from '../preview-examples/number-input-label'; +import NumberInputReadonly from '../preview-examples/number-input-readonly'; +import NumberInputStepperButton from '../preview-examples/number-input-stepper-button'; +import NumberInputValidation from '../preview-examples/number-input-validation'; import Pagination from '../preview-examples/pagination'; import PaginationAdvanced from '../preview-examples/pagination-advanced'; import Pane from '../preview-examples/pane'; @@ -144,11 +173,16 @@ import Pill from '../preview-examples/pill'; import PillVariants from '../preview-examples/pill-variants'; import PopoverNews from '../preview-examples/popover-news'; import PushCard from '../preview-examples/push-card'; -import RadioButton from '../preview-examples/radio-button'; +import Radio from '../preview-examples/radio'; +import Radiobutton from '../preview-examples/radio-button'; +import RadioDisabled from '../preview-examples/radio-disabled'; +import RadioGroup from '../preview-examples/radio-group'; +import RadioValidation from '../preview-examples/radio-validation'; import Select from '../preview-examples/select'; import SelectEditable from '../preview-examples/select-editable'; import SelectMultiple from '../preview-examples/select-multiple'; import SelectNgModel from '../preview-examples/select-ng-model'; +import SelectValidation from '../preview-examples/select-validation'; import Settings from '../preview-examples/settings'; import Slider from '../preview-examples/slider'; import SliderError from '../preview-examples/slider-error'; @@ -162,7 +196,12 @@ import Tabs from '../preview-examples/tabs'; import TabsRounded from '../preview-examples/tabs-rounded'; import Textarea from '../preview-examples/textarea'; import TextareaDisabled from '../preview-examples/textarea-disabled'; +import TextareaLegacy from '../preview-examples/textarea-legacy'; +import TextareaLegacyDisabled from '../preview-examples/textarea-legacy-disabled'; +import TextareaLegacyReadonly from '../preview-examples/textarea-legacy-readonly'; import TextareaReadonly from '../preview-examples/textarea-readonly'; +import TextareaRowsCols from '../preview-examples/textarea-rows-cols'; +import TextareaValidation from '../preview-examples/textarea-validation'; import ThemeSwitcher from '../preview-examples/theme-switcher'; import Tile from '../preview-examples/tile'; import Timepicker from '../preview-examples/timepicker'; @@ -170,9 +209,9 @@ import Toast from '../preview-examples/toast'; import ToastCustom from '../preview-examples/toast-custom'; import ToastPosition from '../preview-examples/toast-position'; import Toggle from '../preview-examples/toggle'; +import ToggleButtonPrimary from '../preview-examples/toggle-button-primary'; import ToggleButtonPrimaryGhost from '../preview-examples/toggle-button-primary-ghost'; import ToggleButtonPrimaryOutline from '../preview-examples/toggle-button-primary-outline'; -import ToggleButtonPrimary from 'src/preview-examples/toggle-button-primary'; import ToggleButtonSecondary from '../preview-examples/toggle-button-secondary'; import ToggleButtonSecondaryGhost from '../preview-examples/toggle-button-secondary-ghost'; import ToggleButtonSecondaryOutline from '../preview-examples/toggle-button-secondary-outline'; @@ -186,6 +225,7 @@ import Tree from '../preview-examples/tree'; import TreeCustom from '../preview-examples/tree-custom'; import Upload from '../preview-examples/upload'; import Validation from '../preview-examples/validation'; +import ValidationSelect from '../preview-examples/validation-select'; import VerticalTabs from '../preview-examples/vertical-tabs'; import VerticalTabsWithAvatar from '../preview-examples/vertical-tabs-with-avatar'; import Workflow from '../preview-examples/workflow'; @@ -193,6 +233,8 @@ import WorkflowVertical from '../preview-examples/workflow-vertical'; @NgModule({ declarations: [ + FormValidation, + InputFormValidation, AppComponent, AboutAndLegal, ActionCard, @@ -229,6 +271,15 @@ import WorkflowVertical from '../preview-examples/workflow-vertical'; CheckboxIndeterminate, Checkbox, Chip, + CustomField, + CustomFieldValidation, + DateDropdown, + DateDropdownUserRange, + DateInput, + DateInputDisabled, + DateInputLabel, + DateInputReadonly, + DateInputValidation, ContentExample, DateDropdown, DateDropdownUserRange, @@ -271,6 +322,11 @@ import WorkflowVertical from '../preview-examples/workflow-vertical'; EventList, ExpandingSearch, FlipTile, + FormCheckbox, + FormCheckboxDisabled, + FormCheckboxValidation, + FormCheckboxGroup, + FormCheckboxGroupIndeterminate, GridPadding, GridSize, Grid, @@ -283,13 +339,13 @@ import WorkflowVertical from '../preview-examples/workflow-vertical'; IconToggleButtonSecondaryGhost, IconToggleButtonSecondaryOutline, IconToggleButtonSecondary, - InputDisabled, - InputLabels, - InputReadonly, - InputSearch, - InputTypes, - InputWithIcon, - Input, + InputLegacyDisabled, + InputLegacyLabels, + InputLegacyReadonly, + InputLegacySearch, + InputLegacyTypes, + InputLegacyWithIcon, + InputLegacy, KeyValueListStriped, KeyValueListWithCustomValue, KeyValueListWithIcon, @@ -319,11 +375,16 @@ import WorkflowVertical from '../preview-examples/workflow-vertical'; Pill, PillVariants, PopoverNews, + Radiobutton, + Radio, + RadioDisabled, + RadioGroup, + RadioValidation, PushCard, - RadioButton, SelectEditable, SelectMultiple, SelectNgModel, + SelectValidation, Select, Settings, SliderError, @@ -336,9 +397,21 @@ import WorkflowVertical from '../preview-examples/workflow-vertical'; SplitButton, TabsRounded, Tabs, + TextareaLegacyDisabled, + Textarea, TextareaDisabled, TextareaReadonly, - Textarea, + TextareaRowsCols, + TextareaValidation, + Input, + InputDisabled, + InputLabel, + InputReadonly, + InputTypes, + InputValidation, + InputPattern, + TextareaLegacyReadonly, + TextareaLegacy, ThemeSwitcher, Tile, Timepicker, @@ -365,6 +438,47 @@ import WorkflowVertical from '../preview-examples/workflow-vertical'; VerticalTabsWithAvatar, VerticalTabs, WorkflowVertical, + MapNavigation, + MapNavigationOverlay, + NumberInput, + NumberInputDisabled, + NumberInputLabel, + NumberInputReadonly, + NumberInputStepperButton, + NumberInputValidation, + TabsRounded, + DatepickerRange, + Tooltip, + PushCard, + ActionCard, + Card, + CardList, + EmptyState, + EmptyStateCompact, + EmptyStateCompactBreak, + KeyValue, + KeyValueWithCustomValue, + KeyValueWithIcon, + KeyValueWithLabelLeft, + KeyValueList, + KeyValueListWithCustomValue, + KeyValueListWithIcon, + KeyValueListStriped, + ContentHeader, + ContentHeaderNoBack, + MenuCategory, + Slider, + SliderTrace, + SliderMarker, + SliderError, + Grid, + GridSize, + GridPadding, + ModalSizes, + DatepickerLocale, + ValidationSelect, + LayoutAuto, + LayoutAutoCustom, Workflow, ], imports: [ @@ -373,6 +487,7 @@ import WorkflowVertical from '../preview-examples/workflow-vertical'; IxModule.forRoot(), AgGridModule, FormsModule, + ReactiveFormsModule, NgxEchartsModule.forRoot({ echarts: () => import('echarts'), }), diff --git a/packages/angular-test-app/src/preview-examples/custom-field-validation.html b/packages/angular-test-app/src/preview-examples/custom-field-validation.html new file mode 100644 index 00000000000..01351403065 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/custom-field-validation.html @@ -0,0 +1,51 @@ + + +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
diff --git a/packages/angular-test-app/src/preview-examples/custom-field-validation.ts b/packages/angular-test-app/src/preview-examples/custom-field-validation.ts new file mode 100644 index 00000000000..6493e241170 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/custom-field-validation.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './custom-field-validation.html', +}) +export default class CustomFieldValidation {} diff --git a/packages/angular-test-app/src/preview-examples/custom-field.html b/packages/angular-test-app/src/preview-examples/custom-field.html new file mode 100644 index 00000000000..9ee97c78824 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/custom-field.html @@ -0,0 +1,19 @@ + + + + + + + diff --git a/packages/angular-test-app/src/preview-examples/custom-field.ts b/packages/angular-test-app/src/preview-examples/custom-field.ts new file mode 100644 index 00000000000..2ceaa0baeb6 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/custom-field.ts @@ -0,0 +1,25 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component, ElementRef, ViewChild } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './custom-field.html', +}) +export default class CustomField { + @ViewChild('fileUpload') fileUpload!: ElementRef; + + openFileBrowser() { + this.fileUpload.nativeElement.click(); + this.fileUpload.nativeElement.oninput = (event: any) => { + console.log(event.target.files); + }; + } +} diff --git a/packages/angular-test-app/src/preview-examples/date-dropdown.html b/packages/angular-test-app/src/preview-examples/date-dropdown.html index 3304ba92960..f2c44c277cb 100644 --- a/packages/angular-test-app/src/preview-examples/date-dropdown.html +++ b/packages/angular-test-app/src/preview-examples/date-dropdown.html @@ -1 +1,10 @@ + + diff --git a/packages/angular-test-app/src/preview-examples/date-dropdown.ts b/packages/angular-test-app/src/preview-examples/date-dropdown.ts index 49f21ad3c34..de5d48fa5cd 100644 --- a/packages/angular-test-app/src/preview-examples/date-dropdown.ts +++ b/packages/angular-test-app/src/preview-examples/date-dropdown.ts @@ -13,4 +13,4 @@ import { Component } from '@angular/core'; selector: 'app-example', templateUrl: './date-dropdown.html', }) -export default class DateDropdownUserRange {} +export default class DateDropdown {} diff --git a/packages/angular-test-app/src/preview-examples/date-input-disabled.html b/packages/angular-test-app/src/preview-examples/date-input-disabled.html new file mode 100644 index 00000000000..8097344ed32 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/date-input-disabled.html @@ -0,0 +1,10 @@ + + + diff --git a/packages/angular-test-app/src/preview-examples/date-input-disabled.ts b/packages/angular-test-app/src/preview-examples/date-input-disabled.ts new file mode 100644 index 00000000000..f51142d384b --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/date-input-disabled.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './date-input-disabled.html', +}) +export default class DateInputDisabled {} diff --git a/packages/angular-test-app/src/preview-examples/date-input-label.html b/packages/angular-test-app/src/preview-examples/date-input-label.html new file mode 100644 index 00000000000..60955666056 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/date-input-label.html @@ -0,0 +1,15 @@ + + + diff --git a/packages/angular-test-app/src/preview-examples/date-input-label.ts b/packages/angular-test-app/src/preview-examples/date-input-label.ts new file mode 100644 index 00000000000..788245c7d9e --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/date-input-label.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './date-input-label.html', +}) +export default class DateInputLabel {} diff --git a/packages/angular-test-app/src/preview-examples/date-input-readonly.html b/packages/angular-test-app/src/preview-examples/date-input-readonly.html new file mode 100644 index 00000000000..6b7921771e2 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/date-input-readonly.html @@ -0,0 +1,10 @@ + + + diff --git a/packages/angular-test-app/src/preview-examples/date-input-readonly.ts b/packages/angular-test-app/src/preview-examples/date-input-readonly.ts new file mode 100644 index 00000000000..337d8780280 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/date-input-readonly.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './date-input-readonly.html', +}) +export default class DateInputReadonly {} diff --git a/packages/angular-test-app/src/preview-examples/date-input-validation.html b/packages/angular-test-app/src/preview-examples/date-input-validation.html new file mode 100644 index 00000000000..a11e4e72ff3 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/date-input-validation.html @@ -0,0 +1,41 @@ + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ diff --git a/packages/angular-test-app/src/preview-examples/date-input-validation.ts b/packages/angular-test-app/src/preview-examples/date-input-validation.ts new file mode 100644 index 00000000000..e7a7650778d --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/date-input-validation.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './date-input-validation.html', +}) +export default class DateInputValidation {} diff --git a/packages/angular-test-app/src/preview-examples/date-input.html b/packages/angular-test-app/src/preview-examples/date-input.html new file mode 100644 index 00000000000..bef4d77c56b --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/date-input.html @@ -0,0 +1,10 @@ + + + diff --git a/packages/angular-test-app/src/preview-examples/date-input.ts b/packages/angular-test-app/src/preview-examples/date-input.ts new file mode 100644 index 00000000000..eb3aad1e8ac --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/date-input.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './date-input.html', +}) +export default class DateInput {} diff --git a/packages/angular-test-app/src/preview-examples/form-checkbox-disabled.html b/packages/angular-test-app/src/preview-examples/form-checkbox-disabled.html new file mode 100644 index 00000000000..0f1c57b3b40 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/form-checkbox-disabled.html @@ -0,0 +1,10 @@ + + + diff --git a/packages/angular-test-app/src/preview-examples/form-checkbox-disabled.ts b/packages/angular-test-app/src/preview-examples/form-checkbox-disabled.ts new file mode 100644 index 00000000000..24cd5ffd786 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/form-checkbox-disabled.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: `./form-checkbox-disabled.html`, +}) +export default class FormCheckboxDisabled {} diff --git a/packages/angular-test-app/src/preview-examples/form-checkbox-group-indeterminate.css b/packages/angular-test-app/src/preview-examples/form-checkbox-group-indeterminate.css new file mode 100644 index 00000000000..d86ca7ea8ab --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/form-checkbox-group-indeterminate.css @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.cb-padding { + padding-left: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/form-checkbox-group-indeterminate.html b/packages/angular-test-app/src/preview-examples/form-checkbox-group-indeterminate.html new file mode 100644 index 00000000000..1da8e473781 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/form-checkbox-group-indeterminate.html @@ -0,0 +1,24 @@ + + + + + + diff --git a/packages/angular-test-app/src/preview-examples/form-checkbox-group-indeterminate.ts b/packages/angular-test-app/src/preview-examples/form-checkbox-group-indeterminate.ts new file mode 100644 index 00000000000..63454886150 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/form-checkbox-group-indeterminate.ts @@ -0,0 +1,46 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './form-checkbox-group-indeterminate.html', + styleUrls: ['./form-checkbox-group-indeterminate.css'], +}) +export default class FormCheckboxGroupIndeterminate { + parentCheckbox = {indeterminate: true, checked: false, label: "Option group"}; + childCheckboxes = [ + {checked: true, label: "Sub option one"}, + {checked: true, label: "Another sub option"}, + {checked: false, label: "Another sub option"}, + ] + + parentCheckedChange() { + this.parentCheckbox.indeterminate = false; + this.childCheckboxes.forEach((cb) => { + cb.checked = this.parentCheckbox.checked; + }); + } + + checkedChange() { + if(this.childCheckboxes.every((cb) => cb.checked)){ + this.parentCheckbox.indeterminate = false; + this.parentCheckbox.checked = true; + } + else if(this.childCheckboxes.some((cb) => cb.checked)){ + this.parentCheckbox.indeterminate = true; + this.parentCheckbox.checked = false; + } + else { + this.parentCheckbox.indeterminate = false; + this.parentCheckbox.checked = false; + } + } +} diff --git a/packages/angular-test-app/src/preview-examples/form-checkbox-group.html b/packages/angular-test-app/src/preview-examples/form-checkbox-group.html new file mode 100644 index 00000000000..97d352c21bb --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/form-checkbox-group.html @@ -0,0 +1,13 @@ + + + + + + diff --git a/packages/angular-test-app/src/preview-examples/form-checkbox-group.ts b/packages/angular-test-app/src/preview-examples/form-checkbox-group.ts new file mode 100644 index 00000000000..06cc92ca6ef --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/form-checkbox-group.ts @@ -0,0 +1,17 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: `./form-checkbox-group.html`, +}) +export default class FormCheckboxGroup { +} diff --git a/packages/angular-test-app/src/preview-examples/form-checkbox-validation.html b/packages/angular-test-app/src/preview-examples/form-checkbox-validation.html new file mode 100644 index 00000000000..9ff2bb25baf --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/form-checkbox-validation.html @@ -0,0 +1,51 @@ + + +
+ + + +
+ +
+ + + + +
+ +
+ + + + +
+ +
+ + + + +
diff --git a/packages/angular-test-app/src/preview-examples/form-checkbox-validation.ts b/packages/angular-test-app/src/preview-examples/form-checkbox-validation.ts new file mode 100644 index 00000000000..1184cec96c1 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/form-checkbox-validation.ts @@ -0,0 +1,17 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: `./form-checkbox-validation.html`, +}) +export default class FormCheckboxValidation { +} diff --git a/packages/angular-test-app/src/preview-examples/form-checkbox.html b/packages/angular-test-app/src/preview-examples/form-checkbox.html new file mode 100644 index 00000000000..5419275dca2 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/form-checkbox.html @@ -0,0 +1,10 @@ + + + diff --git a/packages/angular-test-app/src/preview-examples/form-checkbox.ts b/packages/angular-test-app/src/preview-examples/form-checkbox.ts new file mode 100644 index 00000000000..9b7dd65af0d --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/form-checkbox.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: `./form-checkbox.html`, +}) +export default class FormCheckbox {} diff --git a/packages/angular-test-app/src/preview-examples/form-validation.css b/packages/angular-test-app/src/preview-examples/form-validation.css new file mode 100644 index 00000000000..4f98e054d49 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/form-validation.css @@ -0,0 +1,22 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.form-validation-example { + display: flex; + flex-direction: column; + width: fit-content; +} + +.form-validation-example .padding-right { + padding-right: 0.5rem; +} diff --git a/packages/angular-test-app/src/preview-examples/form-validation.html b/packages/angular-test-app/src/preview-examples/form-validation.html new file mode 100644 index 00000000000..ea03e1330f1 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/form-validation.html @@ -0,0 +1,110 @@ + + +
+ + + + + + + + + + + + + + + + + m2 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Submit + + +
diff --git a/packages/angular-test-app/src/preview-examples/form-validation.ts b/packages/angular-test-app/src/preview-examples/form-validation.ts new file mode 100644 index 00000000000..9c40f8cd995 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/form-validation.ts @@ -0,0 +1,174 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { + Component, + ElementRef, + OnDestroy, + OnInit, + ViewChild, +} from '@angular/core'; +import { + AbstractControl, + FormControl, + FormGroup, + ValidationErrors, + ValidatorFn, + Validators, +} from '@angular/forms'; +import { Subscription } from 'rxjs'; + +export function forbiddenDateValidator(nameRe: RegExp): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const forbidden = nameRe.test(control.value); + return forbidden + ? { + forbiddenDate: { + value: control.value, + message: 'Its not allowed to choose this date!', + }, + } + : null; + }; +} + +export function customRequiredValidator(): ValidatorFn { + return (control: AbstractControl) => { + if (!control.untouched) { + return Validators.required(control); + } + return null; + }; +} + +@Component({ + selector: 'app-example', + templateUrl: `./form-validation.html`, + styles: [ + ` + @import './form-validation.css'; + `, + ], +}) +export default class FormValidation implements OnInit, OnDestroy { + @ViewChild('upload') upload?: ElementRef; + + thresholdLimitAErrorText = ''; + beginErrorText = ''; + + statusSubscription?: Subscription; + valueSubscription?: Subscription; + + thresholdLimitBWarning = false; + + exampleForm = new FormGroup({ + name: new FormControl('', [customRequiredValidator()]), + 'last-name': new FormControl('Muster', [customRequiredValidator()]), + address: new FormControl('John Street 14', [Validators.required]), + thresholdLimitA: new FormControl(6, [ + Validators.required, + Validators.max(5), + ]), + thresholdLimitB: new FormControl(7, [Validators.required]), + begin: new FormControl('2024/05/05', [Validators.required]), + end: new FormControl('2024/05/05', [ + Validators.required, + forbiddenDateValidator(/2024\/05\/05/), + ]), + comment: new FormControl('Some info', [Validators.required]), + agreed: new FormControl(true, [Validators.requiredTrue]), + 'booking-option': new FormControl('2', [Validators.required]), + 'travel-option': new FormControl('3', [Validators.required]), + 'room-size': new FormControl(100, [Validators.required]), + email: new FormControl('', [Validators.required, Validators.email]), + pin: new FormControl('', [Validators.required]), + upload: new FormControl('', []), + uploadPath: new FormControl('', [Validators.required]), + }); + + private onValidationChange(value: typeof this.exampleForm.value) { + this.thresholdLimitBWarning = + !!value.thresholdLimitB && value.thresholdLimitB > 5; + } + + private onStatusChange() { + if (this.exampleForm.controls['thresholdLimitA'].errors) { + this.handleParentsValidationErrors( + this.exampleForm.controls['thresholdLimitA'].errors + ); + } + + if (this.exampleForm.controls['end'].errors) { + this.handleEndValidationErrors(this.exampleForm.controls['end'].errors); + } + } + + handleParentsValidationErrors(errors: ValidationErrors) { + if (errors['max']) { + this.thresholdLimitAErrorText = + 'The threshold must be equal or lesser than 5'; + } + } + + handleEndValidationErrors(errors: ValidationErrors) { + if (errors['forbiddenDate']) { + this.beginErrorText = errors['forbiddenDate'].message; + } + } + + ngOnInit(): void { + this.statusSubscription = this.exampleForm.statusChanges.subscribe( + (status) => { + if (status !== 'VALID') { + this.onStatusChange(); + } + } + ); + + this.onStatusChange(); + + this.valueSubscription = this.exampleForm.valueChanges.subscribe((value) => + this.onValidationChange(value) + ); + + this.onValidationChange(this.exampleForm.value); + } + + ngOnDestroy(): void { + if (this.statusSubscription) { + this.statusSubscription.unsubscribe(); + } + + if (this.valueSubscription) { + this.valueSubscription.unsubscribe(); + } + } + + openFileUpload() { + this.upload?.nativeElement.click(); + } + + onFileSelected(event: Event) { + const target = event.target as HTMLInputElement; + if (!target) { + return; + } + // Store the file somewhere to upload the asset after the form is submitted + const file = target.files?.[0]; + if (!file) { + return; + } + + this.exampleForm.controls['uploadPath'].setValue(file.name); + } + + submit() { + console.log(this.exampleForm.value); + } +} diff --git a/packages/angular-test-app/src/preview-examples/input-disabled.html b/packages/angular-test-app/src/preview-examples/input-disabled.html new file mode 100644 index 00000000000..dde147cc09a --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/input-disabled.html @@ -0,0 +1,13 @@ + + diff --git a/packages/angular-test-app/src/preview-examples/input-disabled.ts b/packages/angular-test-app/src/preview-examples/input-disabled.ts index 6bb94d15332..cba31fd22d7 100644 --- a/packages/angular-test-app/src/preview-examples/input-disabled.ts +++ b/packages/angular-test-app/src/preview-examples/input-disabled.ts @@ -11,15 +11,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', - template: ` -
- -
- `, + templateUrl: './input-disabled.html', }) export default class InputDisabled {} diff --git a/packages/angular-test-app/src/preview-examples/input-form-validation.html b/packages/angular-test-app/src/preview-examples/input-form-validation.html new file mode 100644 index 00000000000..8e4002b66ac --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/input-form-validation.html @@ -0,0 +1,18 @@ + +
+ + + Submit +
diff --git a/packages/angular-test-app/src/preview-examples/input-form-validation.ts b/packages/angular-test-app/src/preview-examples/input-form-validation.ts new file mode 100644 index 00000000000..b35590f05de --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/input-form-validation.ts @@ -0,0 +1,25 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; + +@Component({ + selector: 'app-example', + templateUrl: `./input-form-validation.html`, +}) +export default class InputFormValidation { + exampleForm = new FormGroup({ + name: new FormControl('', [Validators.required]), + }); + + submit() { + console.log(this.exampleForm.value); + } +} diff --git a/packages/angular-test-app/src/preview-examples/input-label.html b/packages/angular-test-app/src/preview-examples/input-label.html new file mode 100644 index 00000000000..40f5af985b4 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/input-label.html @@ -0,0 +1,15 @@ + + + diff --git a/packages/angular-test-app/src/preview-examples/input-label.ts b/packages/angular-test-app/src/preview-examples/input-label.ts new file mode 100644 index 00000000000..446ac115b74 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/input-label.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './input-label.html' +}) +export default class InputLabel {} diff --git a/packages/angular-test-app/src/preview-examples/input-legacy-disabled.ts b/packages/angular-test-app/src/preview-examples/input-legacy-disabled.ts new file mode 100644 index 00000000000..846cfc37c51 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/input-legacy-disabled.ts @@ -0,0 +1,25 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + template: ` +
+ +
+ `, +}) +export default class InputLegacyDisabled {} diff --git a/packages/angular-test-app/src/preview-examples/input-labels.ts b/packages/angular-test-app/src/preview-examples/input-legacy-labels.ts similarity index 94% rename from packages/angular-test-app/src/preview-examples/input-labels.ts rename to packages/angular-test-app/src/preview-examples/input-legacy-labels.ts index 32b357cd5c1..e546cb0d709 100644 --- a/packages/angular-test-app/src/preview-examples/input-labels.ts +++ b/packages/angular-test-app/src/preview-examples/input-legacy-labels.ts @@ -25,4 +25,4 @@ import { Component } from '@angular/core'; `, }) -export default class Input {} +export default class InputLegacyLabels {} diff --git a/packages/angular-test-app/src/preview-examples/input-legacy-readonly.ts b/packages/angular-test-app/src/preview-examples/input-legacy-readonly.ts new file mode 100644 index 00000000000..bf42c2befc9 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/input-legacy-readonly.ts @@ -0,0 +1,25 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + template: ` +
+ +
+ `, +}) +export default class InputLegacyReadonly {} diff --git a/packages/angular-test-app/src/preview-examples/input-search.ts b/packages/angular-test-app/src/preview-examples/input-legacy-search.ts similarity index 90% rename from packages/angular-test-app/src/preview-examples/input-search.ts rename to packages/angular-test-app/src/preview-examples/input-legacy-search.ts index 902574a9176..dc7dfdfaef6 100644 --- a/packages/angular-test-app/src/preview-examples/input-search.ts +++ b/packages/angular-test-app/src/preview-examples/input-legacy-search.ts @@ -39,7 +39,7 @@ import { Component } from '@angular/core'; `, }) -export default class Input { +export default class InputLegacySearch { customSearch = ''; display = 'none'; @@ -55,8 +55,6 @@ export default class Input { } onKey(event: any) { - event.target.value === '' - ? (this.display = 'none') - : (this.display = 'block'); + this.display = event.target.value === '' ? 'none' : 'block'; } } diff --git a/packages/angular-test-app/src/preview-examples/input-legacy-types.ts b/packages/angular-test-app/src/preview-examples/input-legacy-types.ts new file mode 100644 index 00000000000..dd3225abdd2 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/input-legacy-types.ts @@ -0,0 +1,45 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + template: ` +
+ + Text: + + + + + Number: + + .00 + $ + + + + Password: + + + + + Email: + + + + + Telephone: + + +
+ `, +}) +export default class InputLegacyTypes {} diff --git a/packages/angular-test-app/src/preview-examples/input-with-icon.ts b/packages/angular-test-app/src/preview-examples/input-legacy-with-icon.ts similarity index 92% rename from packages/angular-test-app/src/preview-examples/input-with-icon.ts rename to packages/angular-test-app/src/preview-examples/input-legacy-with-icon.ts index 8443b8ab6be..c2552d3aa54 100644 --- a/packages/angular-test-app/src/preview-examples/input-with-icon.ts +++ b/packages/angular-test-app/src/preview-examples/input-legacy-with-icon.ts @@ -20,4 +20,4 @@ import { Component } from '@angular/core'; `, }) -export default class InputWithIcon {} +export default class InputLegacyWithIcon {} diff --git a/packages/angular-test-app/src/preview-examples/input-legacy.ts b/packages/angular-test-app/src/preview-examples/input-legacy.ts new file mode 100644 index 00000000000..fb46a43adc0 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/input-legacy.ts @@ -0,0 +1,24 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + template: ` +
+ +
+ `, +}) +export default class InputLegacy {} diff --git a/packages/angular-test-app/src/preview-examples/input-pattern.html b/packages/angular-test-app/src/preview-examples/input-pattern.html new file mode 100644 index 00000000000..aa790e30c66 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/input-pattern.html @@ -0,0 +1,13 @@ + + diff --git a/packages/angular-test-app/src/preview-examples/input-pattern.ts b/packages/angular-test-app/src/preview-examples/input-pattern.ts new file mode 100644 index 00000000000..a8f76bf5e19 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/input-pattern.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './input-pattern.html' +}) +export default class InputPattern {} diff --git a/packages/angular-test-app/src/preview-examples/input-readonly.html b/packages/angular-test-app/src/preview-examples/input-readonly.html new file mode 100644 index 00000000000..8638eb6e862 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/input-readonly.html @@ -0,0 +1,14 @@ + + + diff --git a/packages/angular-test-app/src/preview-examples/input-readonly.ts b/packages/angular-test-app/src/preview-examples/input-readonly.ts index 9fb89c732b4..0199d6a3858 100644 --- a/packages/angular-test-app/src/preview-examples/input-readonly.ts +++ b/packages/angular-test-app/src/preview-examples/input-readonly.ts @@ -11,15 +11,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', - template: ` -
- -
- `, + templateUrl: './input-readonly.html' }) export default class InputReadonly {} diff --git a/packages/angular-test-app/src/preview-examples/input-types.html b/packages/angular-test-app/src/preview-examples/input-types.html new file mode 100644 index 00000000000..27b32339aa7 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/input-types.html @@ -0,0 +1,49 @@ + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
diff --git a/packages/angular-test-app/src/preview-examples/input-types.ts b/packages/angular-test-app/src/preview-examples/input-types.ts index a522f0eefae..09a27985fd0 100644 --- a/packages/angular-test-app/src/preview-examples/input-types.ts +++ b/packages/angular-test-app/src/preview-examples/input-types.ts @@ -11,35 +11,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', - template: ` -
- - Text: - - - - - Number: - - .00 - $ - - - - Password: - - - - - Email: - - - - - Telephone: - - -
- `, + templateUrl: './input-types.html' }) -export default class Input {} +export default class InputTypes {} diff --git a/packages/angular-test-app/src/preview-examples/input-validation.html b/packages/angular-test-app/src/preview-examples/input-validation.html new file mode 100644 index 00000000000..ae17367d111 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/input-validation.html @@ -0,0 +1,35 @@ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
diff --git a/packages/angular-test-app/src/preview-examples/input-validation.ts b/packages/angular-test-app/src/preview-examples/input-validation.ts new file mode 100644 index 00000000000..3bda3950d59 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/input-validation.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './input-validation.html', +}) +export default class InputValidation {} diff --git a/packages/angular-test-app/src/preview-examples/input.html b/packages/angular-test-app/src/preview-examples/input.html new file mode 100644 index 00000000000..905c6a2b069 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/input.html @@ -0,0 +1,12 @@ + + + diff --git a/packages/angular-test-app/src/preview-examples/input.ts b/packages/angular-test-app/src/preview-examples/input.ts index 5fa4e41246c..c14cfcd2d63 100644 --- a/packages/angular-test-app/src/preview-examples/input.ts +++ b/packages/angular-test-app/src/preview-examples/input.ts @@ -11,14 +11,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', - template: ` -
- -
- `, + templateUrl: './input.html' }) export default class Input {} diff --git a/packages/angular-test-app/src/preview-examples/layout-auto-custom.html b/packages/angular-test-app/src/preview-examples/layout-auto-custom.html new file mode 100644 index 00000000000..00a77812132 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/layout-auto-custom.html @@ -0,0 +1,16 @@ + + + 1 + 2 + 3 + 4 + 5 + 6 + diff --git a/packages/angular-test-app/src/preview-examples/layout-auto-custom.ts b/packages/angular-test-app/src/preview-examples/layout-auto-custom.ts new file mode 100644 index 00000000000..c3fa4d08083 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/layout-auto-custom.ts @@ -0,0 +1,23 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './layout-auto-custom.html', + styleUrls: ['./layout-auto.css'], +}) +export default class LayoutAutoCustom { + layout = [ + { minWidth: '0', columns: 1 }, + { minWidth: '35rem', columns: 2 }, + { minWidth: '50rem', columns: 4 }, + ]; +} diff --git a/packages/angular-test-app/src/preview-examples/layout-auto.css b/packages/angular-test-app/src/preview-examples/layout-auto.css new file mode 100644 index 00000000000..8d3766cbc84 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/layout-auto.css @@ -0,0 +1,24 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +ix-layout-auto ix-typography { + display: flex; + padding: 0.15rem; + flex-direction: column; + justify-content: center; + align-items: center; + align-self: stretch; + border: 0.0625rem solid var(--theme-color-soft-bdr); + background: var(--theme-color-ghost); + border-radius: 0.1875rem; +} diff --git a/packages/angular-test-app/src/preview-examples/layout-auto.html b/packages/angular-test-app/src/preview-examples/layout-auto.html new file mode 100644 index 00000000000..0d9ed063f71 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/layout-auto.html @@ -0,0 +1,16 @@ + + + 1 + 2 + 3 + 4 + 5 + 6 + diff --git a/packages/angular-test-app/src/preview-examples/layout-auto.ts b/packages/angular-test-app/src/preview-examples/layout-auto.ts new file mode 100644 index 00000000000..fd75c1cfa32 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/layout-auto.ts @@ -0,0 +1,17 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './layout-auto.html', + styleUrls: ['./layout-auto.css'], +}) +export default class LayoutAuto {} diff --git a/packages/angular-test-app/src/preview-examples/number-input-disabled.html b/packages/angular-test-app/src/preview-examples/number-input-disabled.html new file mode 100644 index 00000000000..228f35324a9 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/number-input-disabled.html @@ -0,0 +1,10 @@ + + + diff --git a/packages/angular-test-app/src/preview-examples/number-input-disabled.ts b/packages/angular-test-app/src/preview-examples/number-input-disabled.ts new file mode 100644 index 00000000000..b47b256917c --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/number-input-disabled.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './number-input-disabled.html' +}) +export default class NumberInputDisabled {} diff --git a/packages/angular-test-app/src/preview-examples/number-input-label.html b/packages/angular-test-app/src/preview-examples/number-input-label.html new file mode 100644 index 00000000000..5466fd1a91e --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/number-input-label.html @@ -0,0 +1,13 @@ + + + diff --git a/packages/angular-test-app/src/preview-examples/number-input-label.ts b/packages/angular-test-app/src/preview-examples/number-input-label.ts new file mode 100644 index 00000000000..d25863f3788 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/number-input-label.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './number-input-label.html' +}) +export default class NumberInputLabel {} diff --git a/packages/angular-test-app/src/preview-examples/number-input-readonly.html b/packages/angular-test-app/src/preview-examples/number-input-readonly.html new file mode 100644 index 00000000000..f08f0af82e3 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/number-input-readonly.html @@ -0,0 +1,10 @@ + + + diff --git a/packages/angular-test-app/src/preview-examples/number-input-readonly.ts b/packages/angular-test-app/src/preview-examples/number-input-readonly.ts new file mode 100644 index 00000000000..597749a74d4 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/number-input-readonly.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './number-input-readonly.html' +}) +export default class NumberInputReadonly {} diff --git a/packages/angular-test-app/src/preview-examples/number-input-stepper-button.html b/packages/angular-test-app/src/preview-examples/number-input-stepper-button.html new file mode 100644 index 00000000000..78b0795e2f5 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/number-input-stepper-button.html @@ -0,0 +1,13 @@ + + + diff --git a/packages/angular-test-app/src/preview-examples/number-input-stepper-button.ts b/packages/angular-test-app/src/preview-examples/number-input-stepper-button.ts new file mode 100644 index 00000000000..22765110fbd --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/number-input-stepper-button.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './number-input-stepper-button.html' +}) +export default class NumberInputStepperButton {} diff --git a/packages/angular-test-app/src/preview-examples/number-input-validation.html b/packages/angular-test-app/src/preview-examples/number-input-validation.html new file mode 100644 index 00000000000..7d0fd36e089 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/number-input-validation.html @@ -0,0 +1,41 @@ + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ diff --git a/packages/angular-test-app/src/preview-examples/number-input-validation.ts b/packages/angular-test-app/src/preview-examples/number-input-validation.ts new file mode 100644 index 00000000000..aab83da6310 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/number-input-validation.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './number-input-validation.html' +}) +export default class NumberInputValidation {} diff --git a/packages/angular-test-app/src/preview-examples/number-input.html b/packages/angular-test-app/src/preview-examples/number-input.html new file mode 100644 index 00000000000..fc7592a3892 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/number-input.html @@ -0,0 +1,10 @@ + + + diff --git a/packages/angular-test-app/src/preview-examples/number-input.ts b/packages/angular-test-app/src/preview-examples/number-input.ts new file mode 100644 index 00000000000..82b68a2c9dc --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/number-input.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './number-input.html' +}) +export default class NumberInput {} diff --git a/packages/angular-test-app/src/preview-examples/radio-disabled.html b/packages/angular-test-app/src/preview-examples/radio-disabled.html new file mode 100644 index 00000000000..05cb53d751c --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/radio-disabled.html @@ -0,0 +1,16 @@ + + + + diff --git a/packages/angular-test-app/src/preview-examples/radio-disabled.ts b/packages/angular-test-app/src/preview-examples/radio-disabled.ts new file mode 100644 index 00000000000..5ea2804fbd3 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/radio-disabled.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './radio-disabled.html', +}) +export default class RadioDisabled {} diff --git a/packages/angular-test-app/src/preview-examples/radio-group.html b/packages/angular-test-app/src/preview-examples/radio-group.html new file mode 100644 index 00000000000..831d504273b --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/radio-group.html @@ -0,0 +1,32 @@ + + + + + + + + diff --git a/packages/angular-test-app/src/preview-examples/radio-group.ts b/packages/angular-test-app/src/preview-examples/radio-group.ts new file mode 100644 index 00000000000..7c7a7ac9220 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/radio-group.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './radio-group.html', +}) +export default class RadioGroup {} diff --git a/packages/angular-test-app/src/preview-examples/radio-validation.html b/packages/angular-test-app/src/preview-examples/radio-validation.html new file mode 100644 index 00000000000..dd3d87560e1 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/radio-validation.html @@ -0,0 +1,52 @@ + + +
+ + + + +
+ +
+ + + + +
diff --git a/packages/angular-test-app/src/preview-examples/radio-validation.ts b/packages/angular-test-app/src/preview-examples/radio-validation.ts new file mode 100644 index 00000000000..b37ab84c553 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/radio-validation.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './radio-validation.html', +}) +export default class RadioValidation {} diff --git a/packages/angular-test-app/src/preview-examples/radio.html b/packages/angular-test-app/src/preview-examples/radio.html new file mode 100644 index 00000000000..57e639ff920 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/radio.html @@ -0,0 +1,6 @@ + + diff --git a/packages/angular-test-app/src/preview-examples/radio.ts b/packages/angular-test-app/src/preview-examples/radio.ts new file mode 100644 index 00000000000..3cf1862fa75 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/radio.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './radio.html', +}) +export default class Radio {} diff --git a/packages/angular-test-app/src/preview-examples/select-validation.html b/packages/angular-test-app/src/preview-examples/select-validation.html new file mode 100644 index 00000000000..1f3a136a464 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/select-validation.html @@ -0,0 +1,58 @@ + + +
+ + + + + +
+
+ + + + +
+
+ + + + + +
+
+ + + + +
diff --git a/packages/angular-test-app/src/preview-examples/select-validation.ts b/packages/angular-test-app/src/preview-examples/select-validation.ts new file mode 100644 index 00000000000..a7133632728 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/select-validation.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './select-validation.html', +}) +export default class SelectValidation {} diff --git a/packages/angular-test-app/src/preview-examples/textarea-disabled.html b/packages/angular-test-app/src/preview-examples/textarea-disabled.html new file mode 100644 index 00000000000..10241f2ae62 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/textarea-disabled.html @@ -0,0 +1,18 @@ + + +
+ +
diff --git a/packages/angular-test-app/src/preview-examples/textarea-disabled.ts b/packages/angular-test-app/src/preview-examples/textarea-disabled.ts index ea33a995591..3ebcb4a1ad3 100644 --- a/packages/angular-test-app/src/preview-examples/textarea-disabled.ts +++ b/packages/angular-test-app/src/preview-examples/textarea-disabled.ts @@ -11,10 +11,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', - template: ` - - `, + templateUrl: './textarea-disabled.html' }) export default class TextareaDisabled {} diff --git a/packages/angular-test-app/src/preview-examples/textarea-legacy-disabled.ts b/packages/angular-test-app/src/preview-examples/textarea-legacy-disabled.ts new file mode 100644 index 00000000000..e2ed3ac73cd --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/textarea-legacy-disabled.ts @@ -0,0 +1,20 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + template: ` + + `, +}) +export default class TextareaLegacyDisabled {} diff --git a/packages/angular-test-app/src/preview-examples/textarea-legacy-readonly.ts b/packages/angular-test-app/src/preview-examples/textarea-legacy-readonly.ts new file mode 100644 index 00000000000..33c0eafbe91 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/textarea-legacy-readonly.ts @@ -0,0 +1,20 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + template: ` + + `, +}) +export default class TextareaLegacyReadonly {} diff --git a/packages/angular-test-app/src/preview-examples/textarea-legacy.ts b/packages/angular-test-app/src/preview-examples/textarea-legacy.ts new file mode 100644 index 00000000000..082c144f093 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/textarea-legacy.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + template: ` `, +}) +export default class TextareaLegacy {} diff --git a/packages/angular-test-app/src/preview-examples/textarea-readonly.html b/packages/angular-test-app/src/preview-examples/textarea-readonly.html new file mode 100644 index 00000000000..24a4b580117 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/textarea-readonly.html @@ -0,0 +1,15 @@ + + + diff --git a/packages/angular-test-app/src/preview-examples/textarea-readonly.ts b/packages/angular-test-app/src/preview-examples/textarea-readonly.ts index 0655462ad0b..73728ac6d9f 100644 --- a/packages/angular-test-app/src/preview-examples/textarea-readonly.ts +++ b/packages/angular-test-app/src/preview-examples/textarea-readonly.ts @@ -11,10 +11,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', - template: ` - - `, + templateUrl: './textarea-readonly.html' }) export default class TextareaReadonly {} diff --git a/packages/angular-test-app/src/preview-examples/textarea-rows-cols.html b/packages/angular-test-app/src/preview-examples/textarea-rows-cols.html new file mode 100644 index 00000000000..3deb65d16e6 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/textarea-rows-cols.html @@ -0,0 +1,18 @@ + + + diff --git a/packages/angular-test-app/src/preview-examples/textarea-rows-cols.ts b/packages/angular-test-app/src/preview-examples/textarea-rows-cols.ts new file mode 100644 index 00000000000..7202b2dac62 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/textarea-rows-cols.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './textarea-rows-cols.html' +}) +export default class TextareaRowsCols {} diff --git a/packages/angular-test-app/src/preview-examples/textarea-validation.html b/packages/angular-test-app/src/preview-examples/textarea-validation.html new file mode 100644 index 00000000000..8f6b0429493 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/textarea-validation.html @@ -0,0 +1,58 @@ + + +
+ +
+ +
+ +
+
+ +
+
+ +
diff --git a/packages/angular-test-app/src/preview-examples/textarea-validation.ts b/packages/angular-test-app/src/preview-examples/textarea-validation.ts new file mode 100644 index 00000000000..7e68ee91325 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/textarea-validation.ts @@ -0,0 +1,17 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './textarea-validation.html', +}) +export default class TextareaValidation { +} diff --git a/packages/angular-test-app/src/preview-examples/textarea.html b/packages/angular-test-app/src/preview-examples/textarea.html new file mode 100644 index 00000000000..4c63daf55e0 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/textarea.html @@ -0,0 +1,14 @@ + + + diff --git a/packages/angular-test-app/src/preview-examples/textarea.ts b/packages/angular-test-app/src/preview-examples/textarea.ts index f54028ceb1d..80a75e02a8f 100644 --- a/packages/angular-test-app/src/preview-examples/textarea.ts +++ b/packages/angular-test-app/src/preview-examples/textarea.ts @@ -11,6 +11,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', - template: ` `, + templateUrl: './textarea.html' }) export default class Textarea {} diff --git a/packages/angular-test-app/src/preview-examples/validation-select.html b/packages/angular-test-app/src/preview-examples/validation-select.html new file mode 100644 index 00000000000..be899dcb818 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/validation-select.html @@ -0,0 +1,21 @@ + +
+ + + + + Submit +
diff --git a/packages/angular-test-app/src/preview-examples/validation-select.ts b/packages/angular-test-app/src/preview-examples/validation-select.ts new file mode 100644 index 00000000000..abffeddf436 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/validation-select.ts @@ -0,0 +1,25 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; + +@Component({ + selector: 'app-example', + templateUrl: `./validation-select.html`, +}) +export default class ValidationSelect { + exampleForm = new FormGroup({ + car: new FormControl('', [Validators.required]), + }); + + submit() { + console.log(this.exampleForm.value); + } +} diff --git a/packages/angular/src/app-initialize.ts b/packages/angular/src/app-initialize.ts index 5c35442b0e2..4e848e8dce7 100644 --- a/packages/angular/src/app-initialize.ts +++ b/packages/angular/src/app-initialize.ts @@ -22,8 +22,8 @@ export const appInitialize = (doc: Document) => { didInitialize = true; - defineCustomElements(); await iconsDefineCustomElements(); + defineCustomElements(); } }; }; diff --git a/packages/angular/src/boolean-value-accessor.ts b/packages/angular/src/boolean-value-accessor.ts deleted file mode 100644 index 3c3ff4f0028..00000000000 --- a/packages/angular/src/boolean-value-accessor.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { Directive, ElementRef } from '@angular/core'; -import { NG_VALUE_ACCESSOR } from '@angular/forms'; - -import { ValueAccessor } from './value-accessor'; - -@Directive({ - /* tslint:disable-next-line:directive-selector */ - selector: 'ix-toggle[ngModel],ix-toggle[formControlName],ix-toggle[formControl]', - host: { - '(checkedChange)': 'handleChangeEvent($event.target.checked)' - }, - providers: [ - { - provide: NG_VALUE_ACCESSOR, - useExisting: BooleanValueAccessor, - multi: true - } - ] -}) -export class BooleanValueAccessor extends ValueAccessor { - constructor(el: ElementRef) { - super(el); - } - writeValue(value: any) { - this.el.nativeElement.checked = this.lastValue = value == null ? false : value; - } -} diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts index 9eb6d100afe..e84b1ee995f 100644 --- a/packages/angular/src/components.ts +++ b/packages/angular/src/components.ts @@ -388,6 +388,60 @@ export declare interface IxCategoryFilter extends Components.IxCategoryFilter { } +@ProxyCmp({ + inputs: ['checked', 'disabled', 'indeterminate', 'label', 'name', 'required', 'value'] +}) +@Component({ + selector: 'ix-checkbox', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['checked', 'disabled', 'indeterminate', 'label', 'name', 'required', 'value'], +}) +export class IxCheckbox { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + proxyOutputs(this, this.el, ['checkedChange', 'valueChange']); + } +} + + +export declare interface IxCheckbox extends Components.IxCheckbox { + /** + * Event emitted when the checked state of the checkbox changes + */ + checkedChange: EventEmitter>; + /** + * Event emitted when the value of the checkbox changes + */ + valueChange: EventEmitter>; +} + + +@ProxyCmp({ + inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'validText', 'warningText'] +}) +@Component({ + selector: 'ix-checkbox-group', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'validText', 'warningText'], +}) +export class IxCheckboxGroup { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface IxCheckboxGroup extends Components.IxCheckboxGroup {} + + @ProxyCmp({ inputs: ['active', 'background', 'chipColor', 'closable', 'color', 'icon', 'outline', 'variant'] }) @@ -487,6 +541,28 @@ export declare interface IxContentHeader extends Components.IxContentHeader { } +@ProxyCmp({ + inputs: ['helperText', 'infoText', 'invalidText', 'label', 'required', 'showTextAsTooltip', 'validText', 'warningText'] +}) +@Component({ + selector: 'ix-custom-field', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['helperText', 'infoText', 'invalidText', 'label', 'required', 'showTextAsTooltip', 'validText', 'warningText'], +}) +export class IxCustomField { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface IxCustomField extends Components.IxCustomField {} + + @ProxyCmp({ inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'disabled', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'maxDate', 'minDate', 'range', 'to'], methods: ['getDateRange'] @@ -521,6 +597,41 @@ The event payload contains information about the selected date range. } +@ProxyCmp({ + inputs: ['disabled', 'format', 'helperText', 'i18nErrorDateUnparsable', 'infoText', 'invalidText', 'label', 'name', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'validText', 'value', 'warningText'], + methods: ['getNativeInputElement', 'focusInput'] +}) +@Component({ + selector: 'ix-date-input', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['disabled', 'format', 'helperText', 'i18nErrorDateUnparsable', 'infoText', 'invalidText', 'label', 'name', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'validText', 'value', 'warningText'], +}) +export class IxDateInput { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + proxyOutputs(this, this.el, ['valueChange', 'validityStateChange']); + } +} + + +import type { DateInputValidityState as IIxDateInputDateInputValidityState } from '@siemens/ix'; + +export declare interface IxDateInput extends Components.IxDateInput { + /** + * Input change event. + */ + valueChange: EventEmitter>; + /** + * Validation state change event. + */ + validityStateChange: EventEmitter>; +} + + @ProxyCmp({ inputs: ['corners', 'eventDelimiter', 'format', 'from', 'i18nDone', 'individual', 'locale', 'maxDate', 'minDate', 'range', 'textSelectDate', 'to', 'weekStartIndex'], methods: ['getCurrentDate'] @@ -888,6 +999,28 @@ export declare interface IxExpandingSearch extends Components.IxExpandingSearch } +@ProxyCmp({ + inputs: ['htmlFor', 'required'] +}) +@Component({ + selector: 'ix-field-label', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['htmlFor', 'required'], +}) +export class IxFieldLabel { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface IxFieldLabel extends Components.IxFieldLabel {} + + @ProxyCmp({ inputs: ['disabled', 'readonly'] }) @@ -959,28 +1092,6 @@ export class IxFlipTileContent { export declare interface IxFlipTileContent extends Components.IxFlipTileContent {} -@ProxyCmp({ - inputs: ['label'] -}) -@Component({ - selector: 'ix-form-field', - changeDetection: ChangeDetectionStrategy.OnPush, - template: '', - // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['label'], -}) -export class IxFormField { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - - -export declare interface IxFormField extends Components.IxFormField {} - - @ProxyCmp({ inputs: ['collapsed', 'expandOnHeaderClick', 'header', 'index', 'selected', 'subHeader', 'suppressHeaderSelection'] }) @@ -1066,6 +1177,28 @@ export declare interface IxGroupItem extends Components.IxGroupItem { } +@ProxyCmp({ + inputs: ['helperText', 'htmlFor', 'infoText', 'invalidText', 'validText', 'warningText'] +}) +@Component({ + selector: 'ix-helper-text', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['helperText', 'htmlFor', 'infoText', 'invalidText', 'validText', 'warningText'], +}) +export class IxHelperText { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface IxHelperText extends Components.IxHelperText {} + + @ProxyCmp({ inputs: ['a11yLabel', 'color', 'disabled', 'ghost', 'icon', 'iconColor', 'loading', 'outline', 'oval', 'size', 'type', 'variant'] }) @@ -1116,6 +1249,43 @@ export declare interface IxIconToggleButton extends Components.IxIconToggleButto } +@ProxyCmp({ + inputs: ['allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'type', 'validText', 'value', 'warningText'], + methods: ['getNativeInputElement', 'focusInput'] +}) +@Component({ + selector: 'ix-input', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'type', 'validText', 'value', 'warningText'], +}) +export class IxInput { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + proxyOutputs(this, this.el, ['valueChange', 'validityStateChange', 'ixBlur']); + } +} + + +export declare interface IxInput extends Components.IxInput { + /** + * Event emitted when the value of the text field changes. + */ + valueChange: EventEmitter>; + /** + * Event emitted when the validity state of the text field changes. + */ + validityStateChange: EventEmitter>; + /** + * Event emitted when the text field loses focus. + */ + ixBlur: EventEmitter>; +} + + @ProxyCmp({ }) @Component({ @@ -1203,6 +1373,28 @@ export class IxKpi { export declare interface IxKpi extends Components.IxKpi {} +@ProxyCmp({ + inputs: ['layout'] +}) +@Component({ + selector: 'ix-layout-auto', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['layout'], +}) +export class IxLayoutAuto { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface IxLayoutAuto extends Components.IxLayoutAuto {} + + @ProxyCmp({ inputs: ['columns', 'gap', 'noMargin'] }) @@ -1746,6 +1938,43 @@ Can be prevented, in which case only the event is triggered, and the modal remai } +@ProxyCmp({ + inputs: ['allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'max', 'min', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showStepperButtons', 'showTextAsTooltip', 'validText', 'value', 'warningText'], + methods: ['getNativeInputElement', 'focusInput'] +}) +@Component({ + selector: 'ix-number-input', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'max', 'min', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showStepperButtons', 'showTextAsTooltip', 'validText', 'value', 'warningText'], +}) +export class IxNumberInput { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + proxyOutputs(this, this.el, ['valueChange', 'validityStateChange', 'ixBlur']); + } +} + + +export declare interface IxNumberInput extends Components.IxNumberInput { + /** + * Event emitted when the value of the input field changes + */ + valueChange: EventEmitter>; + /** + * Event emitted when the validity state of the input field changes + */ + validityStateChange: EventEmitter>; + /** + * Event emitted when the input field loses focus + */ + ixBlur: EventEmitter>; +} + + @ProxyCmp({ inputs: ['advanced', 'count', 'i18nItems', 'i18nOf', 'i18nPage', 'itemCount', 'selectedPage', 'showItemCount'] }) @@ -1884,6 +2113,66 @@ export class IxPushCard { export declare interface IxPushCard extends Components.IxPushCard {} +@ProxyCmp({ + inputs: ['checked', 'disabled', 'label', 'name', 'value'] +}) +@Component({ + selector: 'ix-radio', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['checked', 'disabled', 'label', 'name', 'value'], +}) +export class IxRadio { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + proxyOutputs(this, this.el, ['checkedChange', 'valueChange']); + } +} + + +export declare interface IxRadio extends Components.IxRadio { + /** + * Event emitted when the checked state of the radio changes + */ + checkedChange: EventEmitter>; + /** + * Event emitted when the value of the radio changes + */ + valueChange: EventEmitter>; +} + + +@ProxyCmp({ + inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'showTextAsTooltip', 'validText', 'value', 'warningText'] +}) +@Component({ + selector: 'ix-radio-group', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'showTextAsTooltip', 'validText', 'value', 'warningText'], +}) +export class IxRadioGroup { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + proxyOutputs(this, this.el, ['valueChange']); + } +} + + +export declare interface IxRadioGroup extends Components.IxRadioGroup { + /** + * Event emitted when the value of the radiobutton group changes + */ + valueChange: EventEmitter>; +} + + @ProxyCmp({ }) @Component({ @@ -1906,21 +2195,22 @@ export declare interface IxRow extends Components.IxRow {} @ProxyCmp({ - inputs: ['allowClear', 'disabled', 'editable', 'hideListHeader', 'i18nNoMatches', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'mode', 'readonly', 'selectedIndices', 'value'] + inputs: ['allowClear', 'disabled', 'editable', 'helperText', 'hideListHeader', 'i18nNoMatches', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'infoText', 'invalidText', 'label', 'mode', 'name', 'readonly', 'required', 'selectedIndices', 'showTextAsTooltip', 'validText', 'value', 'warningText'], + methods: ['getNativeInputElement', 'focusInput'] }) @Component({ selector: 'ix-select', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['allowClear', 'disabled', 'editable', 'hideListHeader', 'i18nNoMatches', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'mode', 'readonly', 'selectedIndices', 'value'], + inputs: ['allowClear', 'disabled', 'editable', 'helperText', 'hideListHeader', 'i18nNoMatches', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'infoText', 'invalidText', 'label', 'mode', 'name', 'readonly', 'required', 'selectedIndices', 'showTextAsTooltip', 'validText', 'value', 'warningText'], }) export class IxSelect { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ['valueChange', 'itemSelectionChange', 'inputChange', 'addItem']); + proxyOutputs(this, this.el, ['valueChange', 'itemSelectionChange', 'inputChange', 'addItem', 'ixBlur']); } } @@ -1942,6 +2232,10 @@ export declare interface IxSelect extends Components.IxSelect { * Item added to selection */ addItem: EventEmitter>; + /** + * Blur input + */ + ixBlur: EventEmitter>; } @@ -2135,6 +2429,43 @@ export declare interface IxTabs extends Components.IxTabs { } +@ProxyCmp({ + inputs: ['disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'placeholder', 'readonly', 'required', 'resizeBehavior', 'showTextAsTooltip', 'textareaCols', 'textareaHeight', 'textareaRows', 'textareaWidth', 'validText', 'value', 'warningText'], + methods: ['getNativeInputElement', 'focusInput'] +}) +@Component({ + selector: 'ix-textarea', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'placeholder', 'readonly', 'required', 'resizeBehavior', 'showTextAsTooltip', 'textareaCols', 'textareaHeight', 'textareaRows', 'textareaWidth', 'validText', 'value', 'warningText'], +}) +export class IxTextarea { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + proxyOutputs(this, this.el, ['valueChange', 'validityStateChange', 'ixBlur']); + } +} + + +export declare interface IxTextarea extends Components.IxTextarea { + /** + * Event emitted when the value of the textarea field changes. + */ + valueChange: EventEmitter>; + /** + * Event emitted when the validity state of the textarea field changes. + */ + validityStateChange: EventEmitter>; + /** + * Event emitted when the textarea field loses focus. + */ + ixBlur: EventEmitter>; +} + + @ProxyCmp({ inputs: ['size'] }) @@ -2246,14 +2577,14 @@ export declare interface IxToastContainer extends Components.IxToastContainer {} @ProxyCmp({ - inputs: ['checked', 'disabled', 'hideText', 'indeterminate', 'textIndeterminate', 'textOff', 'textOn'] + inputs: ['checked', 'disabled', 'hideText', 'indeterminate', 'name', 'required', 'textIndeterminate', 'textOff', 'textOn', 'value'] }) @Component({ selector: 'ix-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['checked', 'disabled', 'hideText', 'indeterminate', 'textIndeterminate', 'textOff', 'textOn'], + inputs: ['checked', 'disabled', 'hideText', 'indeterminate', 'name', 'required', 'textIndeterminate', 'textOff', 'textOn', 'value'], }) export class IxToggle { protected el: HTMLElement; diff --git a/packages/angular/src/control-value-accessors/boolean-value-accessor.ts b/packages/angular/src/control-value-accessors/boolean-value-accessor.ts new file mode 100644 index 00000000000..d8bf75e1be7 --- /dev/null +++ b/packages/angular/src/control-value-accessors/boolean-value-accessor.ts @@ -0,0 +1,37 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import { Directive, HostListener, ElementRef, Injector } from '@angular/core'; +import { NG_VALUE_ACCESSOR } from '@angular/forms'; +import { ValueAccessor, mapNgToIxClassNames } from './value-accessor'; + +@Directive({ + selector: 'ix-checkbox,ix-toggle', + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: BooleanValueAccessorDirective, + multi: true, + }, + ], +}) +export class BooleanValueAccessorDirective extends ValueAccessor { + constructor(injector: Injector, el: ElementRef) { + super(injector, el); + } + + override writeValue(value: boolean): void { + this.elementRef.nativeElement.checked = this.lastValue = value; + mapNgToIxClassNames(this.elementRef); + } + + @HostListener('checkedChange', ['$event.target']) + handleChangeEvent(el: any): void { + super.handleValueChange(el, el.checked); + } +} diff --git a/packages/angular/src/control-value-accessors/date-value-accessor.ts b/packages/angular/src/control-value-accessors/date-value-accessor.ts new file mode 100644 index 00000000000..5e8b961bb11 --- /dev/null +++ b/packages/angular/src/control-value-accessors/date-value-accessor.ts @@ -0,0 +1,32 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import { ElementRef, Injector, Directive, HostListener } from '@angular/core'; +import { NG_VALUE_ACCESSOR } from '@angular/forms'; +import { ValueAccessor } from './value-accessor'; + +@Directive({ + selector: 'ix-date-input', + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: DateValueAccessorDirective, + multi: true, + }, + ], +}) +export class DateValueAccessorDirective extends ValueAccessor { + constructor(injector: Injector, el: ElementRef) { + super(injector, el); + } + + @HostListener('valueChange', ['$event.target']) + handleInputEvent(el: any): void { + super.handleValueChange(el, el.value); + } +} diff --git a/packages/angular/src/control-value-accessors/index.ts b/packages/angular/src/control-value-accessors/index.ts new file mode 100644 index 00000000000..89f855c8961 --- /dev/null +++ b/packages/angular/src/control-value-accessors/index.ts @@ -0,0 +1,13 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +export * from './boolean-value-accessor'; +export * from './radio-value-accessor'; +export * from './select-value-accessor'; +export * from './text-value-accessor'; +export * from './date-value-accessor'; diff --git a/packages/angular/src/control-value-accessors/radio-value-accessor.ts b/packages/angular/src/control-value-accessors/radio-value-accessor.ts new file mode 100644 index 00000000000..2f3c296277b --- /dev/null +++ b/packages/angular/src/control-value-accessors/radio-value-accessor.ts @@ -0,0 +1,39 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import { Directive, HostListener, ElementRef, Injector } from '@angular/core'; +import { NG_VALUE_ACCESSOR } from '@angular/forms'; +import { ValueAccessor, mapNgToIxClassNames } from './value-accessor'; + +@Directive({ + selector: 'ix-radio', + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: RadioValueAccessorDirective, + multi: true, + }, + ], +}) +export class RadioValueAccessorDirective extends ValueAccessor { + constructor(injector: Injector, el: ElementRef) { + super(injector, el); + } + + override writeValue(value: string): void { + this.lastValue = value; + this.elementRef.nativeElement.checked = + this.elementRef.nativeElement.value === value; + mapNgToIxClassNames(this.elementRef); + } + + @HostListener('checkedChange', ['$event.target']) + handleChangeEvent(el: any): void { + super.handleValueChange(el, el.value); + } +} diff --git a/packages/angular/src/control-value-accessors/select-value-accessor.ts b/packages/angular/src/control-value-accessors/select-value-accessor.ts new file mode 100644 index 00000000000..0378eed4986 --- /dev/null +++ b/packages/angular/src/control-value-accessors/select-value-accessor.ts @@ -0,0 +1,32 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import { ElementRef, Injector, Directive, HostListener } from '@angular/core'; +import { NG_VALUE_ACCESSOR } from '@angular/forms'; +import { ValueAccessor } from './value-accessor'; + +@Directive({ + selector: 'ix-select', + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: SelectValueAccessorDirective, + multi: true, + }, + ], +}) +export class SelectValueAccessorDirective extends ValueAccessor { + constructor(injector: Injector, el: ElementRef) { + super(injector, el); + } + + @HostListener('valueChange', ['$event.target']) + handleChangeEvent(el: any): void { + super.handleValueChange(el, el.value); + } +} diff --git a/packages/angular/src/control-value-accessors/text-value-accessor.ts b/packages/angular/src/control-value-accessors/text-value-accessor.ts new file mode 100644 index 00000000000..b1310a03ff9 --- /dev/null +++ b/packages/angular/src/control-value-accessors/text-value-accessor.ts @@ -0,0 +1,33 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import { ElementRef, Injector, Directive, HostListener } from '@angular/core'; +import { NG_VALUE_ACCESSOR } from '@angular/forms'; +import { ValueAccessor } from './value-accessor'; + +@Directive({ + selector: 'ix-input,ix-number-field,ix-textarea-field', + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: TextValueAccessorDirective, + multi: true, + }, + ], +}) +export class TextValueAccessorDirective extends ValueAccessor { + constructor(injector: Injector, el: ElementRef) { + super(injector, el); + } + + @HostListener('input', ['$event.target']) + @HostListener('valueChange', ['$event.target']) + handleInputEvent(el: any): void { + super.handleValueChange(el, el.value); + } +} diff --git a/packages/angular/src/control-value-accessors/value-accessor.ts b/packages/angular/src/control-value-accessors/value-accessor.ts new file mode 100644 index 00000000000..58a6e2402e5 --- /dev/null +++ b/packages/angular/src/control-value-accessors/value-accessor.ts @@ -0,0 +1,152 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import { + AfterViewInit, + ElementRef, + Injector, + OnDestroy, + Directive, + HostListener, +} from '@angular/core'; +import { ControlValueAccessor, NgControl } from '@angular/forms'; +import { Subscription } from 'rxjs'; + +@Directive() +export class ValueAccessor + implements ControlValueAccessor, AfterViewInit, OnDestroy +{ + public static readonly ANGULAR_CLASS_PREFIX = 'ng-'; + + private onChange: (value: any) => void = () => { + /**/ + }; + private onTouched: () => void = () => { + /**/ + }; + protected lastValue: any; + private statusChanges?: Subscription; + + constructor(protected injector: Injector, protected elementRef: ElementRef) {} + + writeValue(value: any): void { + this.elementRef.nativeElement.value = this.lastValue = value; + mapNgToIxClassNames(this.elementRef); + } + + handleValueChange(el: HTMLElement, value: any): void { + if (el === this.elementRef.nativeElement) { + if (value !== this.lastValue) { + this.lastValue = value; + this.onChange(value); + } + mapNgToIxClassNames(this.elementRef); + } + } + + @HostListener('ixBlur', ['$event.target']) + _handleBlurEvent(el: any): void { + if (el === this.elementRef.nativeElement) { + this.onTouched(); + mapNgToIxClassNames(this.elementRef); + } + } + + registerOnChange(fn: (value: any) => void): void { + this.onChange = fn; + } + + registerOnTouched(fn: () => void): void { + this.onTouched = fn; + } + + setDisabledState(isDisabled: boolean): void { + this.elementRef.nativeElement.disabled = isDisabled; + } + + ngOnDestroy(): void { + if (this.statusChanges) { + this.statusChanges.unsubscribe(); + } + } + + ngAfterViewInit(): void { + let ngControl; + try { + ngControl = this.injector.get(NgControl); + } catch { + /* No FormControl or ngModel binding */ + } + + if (!ngControl) { + return; + } + + if (ngControl.statusChanges) { + this.statusChanges = ngControl.statusChanges.subscribe(() => { + mapNgToIxClassNames(this.elementRef); + }); + } + + detourFormControlMethods(ngControl, this.elementRef); + } +} + +const detourFormControlMethods = ( + ngControl: NgControl, + elementRef: ElementRef +) => { + const formControl = ngControl.control as any; + if (formControl) { + const methodsToPatch = [ + 'markAsTouched', + 'markAllAsTouched', + 'markAsUntouched', + 'markAsDirty', + 'markAsPristine', + ]; + methodsToPatch.forEach((method) => { + if (typeof formControl[method] !== 'undefined') { + const oldFn = formControl[method].bind(formControl); + formControl[method] = (...params: any[]) => { + oldFn(...params); + mapNgToIxClassNames(elementRef); + }; + } + }); + } +}; + +export const mapNgToIxClassNames = (element: ElementRef): void => { + setTimeout(() => { + const input = element.nativeElement as HTMLInputElement; + const classes = getClasses(input); + const classList = input.classList; + classList.remove( + 'ix-valid', + 'ix-invalid', + 'ix-touched', + 'ix-untouched', + 'ix-dirty', + 'ix-pristine' + ); + classList.add(...classes); + }); +}; + +const getClasses = (element: HTMLElement) => { + const classList = element.classList; + const classes: string[] = []; + for (let i = 0; i < classList.length; i++) { + const item = classList.item(i); + if (item?.startsWith(ValueAccessor.ANGULAR_CLASS_PREFIX)) { + classes.push(`ix-${item.substring(3)}`); + } + } + return classes; +}; diff --git a/packages/angular/src/declare-components.ts b/packages/angular/src/declare-components.ts index 7717051c6de..92e9f24163c 100644 --- a/packages/angular/src/declare-components.ts +++ b/packages/angular/src/declare-components.ts @@ -17,11 +17,15 @@ export const DIRECTIVES = [ d.IxCardList, d.IxCardTitle, d.IxCategoryFilter, + d.IxCheckbox, + d.IxCheckboxGroup, d.IxChip, d.IxCol, d.IxContent, d.IxContentHeader, + d.IxCustomField, d.IxDateDropdown, + d.IxDateInput, d.IxDatePicker, d.IxDatetimePicker, d.IxDivider, @@ -35,19 +39,22 @@ export const DIRECTIVES = [ d.IxEventList, d.IxEventListItem, d.IxExpandingSearch, + d.IxFieldLabel, d.IxFilterChip, d.IxFlipTile, d.IxFlipTileContent, - d.IxFormField, d.IxGroup, d.IxGroupContextMenu, d.IxGroupItem, + d.IxHelperText, d.IxIconButton, d.IxIconToggleButton, + d.IxInput, d.IxInputGroup, d.IxKeyValue, d.IxKeyValueList, d.IxKpi, + d.IxLayoutAuto, d.IxLayoutGrid, d.IxLinkButton, d.IxMapNavigation, @@ -68,11 +75,14 @@ export const DIRECTIVES = [ d.IxModalExample, d.IxModalFooter, d.IxModalHeader, + d.IxNumberInput, d.IxPagination, d.IxPane, d.IxPaneLayout, d.IxPill, d.IxPushCard, + d.IxRadio, + d.IxRadioGroup, d.IxRow, d.IxSelect, d.IxSelectItem, @@ -82,6 +92,7 @@ export const DIRECTIVES = [ d.IxSplitButtonItem, d.IxTabItem, d.IxTabs, + d.IxTextarea, d.IxTile, d.IxTimePicker, d.IxToast, diff --git a/packages/angular/src/index.ts b/packages/angular/src/index.ts index 7e9cd328249..9aadb25ec76 100644 --- a/packages/angular/src/index.ts +++ b/packages/angular/src/index.ts @@ -8,13 +8,12 @@ */ export * from '@siemens/ix'; -export * from './boolean-value-accessor'; export * from './components'; export * from './dropdown/trigger.directive'; export { IxIcon } from './ix-icon'; export * from './modal'; export * from './module'; -export * from './select-value-accessor'; export * from './theme'; export * from './toast'; export * from './tree'; +export * from './control-value-accessors'; diff --git a/packages/angular/src/module.ts b/packages/angular/src/module.ts index 9eee3979f98..bcd3a5a2868 100644 --- a/packages/angular/src/module.ts +++ b/packages/angular/src/module.ts @@ -6,7 +6,7 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ - +import { TextValueAccessorDirective } from './control-value-accessors/text-value-accessor'; import { DOCUMENT } from '@angular/common'; import { APP_INITIALIZER, @@ -19,18 +19,24 @@ import { DIRECTIVES } from './declare-components'; import { IxDropdownTriggerDirective } from './dropdown/trigger.directive'; import { IxIcon } from './ix-icon'; import { ModalService } from './modal'; -import { SelectValueAccessor } from './select-value-accessor'; -import { BooleanValueAccessor } from './boolean-value-accessor'; import { ThemeService } from './theme'; import { ToastService } from './toast'; import * as tree from './tree'; +import { SelectValueAccessorDirective } from './control-value-accessors/select-value-accessor'; +import { RadioValueAccessorDirective } from './control-value-accessors/radio-value-accessor'; +import { BooleanValueAccessorDirective } from './control-value-accessors/boolean-value-accessor'; +import { DateValueAccessorDirective } from './control-value-accessors'; const DECLARATIONS = [ ...DIRECTIVES, tree.IxTree, IxDropdownTriggerDirective, IxIcon, - SelectValueAccessor, - BooleanValueAccessor + + TextValueAccessorDirective, + SelectValueAccessorDirective, + RadioValueAccessorDirective, + BooleanValueAccessorDirective, + DateValueAccessorDirective, ]; @NgModule({ diff --git a/packages/angular/src/select-value-accessor.ts b/packages/angular/src/select-value-accessor.ts deleted file mode 100644 index 131a4185dae..00000000000 --- a/packages/angular/src/select-value-accessor.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { Directive, ElementRef } from '@angular/core'; -import { NG_VALUE_ACCESSOR } from '@angular/forms'; - -import { ValueAccessor } from './value-accessor'; - -@Directive({ - /* tslint:disable-next-line:directive-selector */ - selector: 'ix-select[ngModel],ix-select[formControlName],ix-select[formControl]', - host: { - '(valueChange)': 'handleChangeEvent($event.target.value)' - }, - providers: [ - { - provide: NG_VALUE_ACCESSOR, - useExisting: SelectValueAccessor, - multi: true - } - ] -}) -export class SelectValueAccessor extends ValueAccessor { - constructor(el: ElementRef) { - super(el); - } -} diff --git a/packages/angular/src/value-accessor.ts b/packages/angular/src/value-accessor.ts deleted file mode 100644 index 6bb76a6d3c8..00000000000 --- a/packages/angular/src/value-accessor.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { Directive, ElementRef, HostListener } from '@angular/core'; -import { ControlValueAccessor } from '@angular/forms'; - -@Directive({}) -export class ValueAccessor implements ControlValueAccessor { - - private onChange: (value: any) => void = () => {/**/}; - private onTouched: () => void = () => {/**/}; - protected lastValue: any; - - constructor(protected el: ElementRef) {} - - writeValue(value: any) { - this.el.nativeElement.value = this.lastValue = value == null ? '' : value; - } - - handleChangeEvent(value: any) { - if (value !== this.lastValue) { - this.lastValue = value; - this.onChange(value); - } - } - - @HostListener('focusout') - _handleBlurEvent() { - this.onTouched(); - } - - registerOnChange(fn: (value: any) => void) { - this.onChange = fn; - } - registerOnTouched(fn: () => void) { - this.onTouched = fn; - } - - setDisabledState(isDisabled: boolean) { - this.el.nativeElement.disabled = isDisabled; - } -} diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 87cd7b7865b..a16f73f09a6 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -325,10 +325,10 @@ }, { "name": "theme", - "type": "\"classic\" | \"classic-dark\" | \"classic-light\" | string & {}", + "type": "\"classic\" | \"classic-dark\" | \"classic-light\" | string & Record", "complexType": { "original": "IxTheme", - "resolved": "\"classic\" | \"classic-dark\" | \"classic-light\" | string & {}", + "resolved": "\"classic\" | \"classic-dark\" | \"classic-light\" | string & Record", "references": { "IxTheme": { "location": "import", @@ -356,7 +356,7 @@ "type": "string" }, { - "type": "string & {}" + "type": "string & Record" } ], "optional": false, @@ -2515,44 +2515,50 @@ "listeners": [] }, { - "dirPath": "src/components/chip", - "filePath": "src/components/chip/chip.tsx", - "fileName": "chip.tsx", - "readmePath": "src/components/chip/readme.md", - "usagesDir": "src/components/chip/usage", - "tag": "ix-chip", + "dirPath": "src/components/checkbox", + "filePath": "src/components/checkbox/checkbox.tsx", + "fileName": "checkbox.tsx", + "readmePath": "src/components/checkbox/readme.md", + "usagesDir": "src/components/checkbox/usage", + "tag": "ix-checkbox", "overview": "", "usage": {}, "docs": "", - "docsTags": [], + "docsTags": [ + { + "name": "since", + "text": "2.6.0" + }, + { + "name": "form-ready", + "text": "2.6.0" + } + ], "encapsulation": "shadow", "dependents": [], "dependencies": [ - "ix-icon-button" + "ix-typography" ], "dependencyGraph": { - "ix-chip": [ - "ix-icon-button" - ], - "ix-icon-button": [ - "ix-spinner" + "ix-checkbox": [ + "ix-typography" ] }, "props": [ { - "name": "active", + "name": "checked", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, - "mutable": false, - "attr": "active", - "reflectToAttr": false, - "docs": "Determines if the chip is interactive. If false no user input (e.g. mouse states, keyboard navigation)\nwill be possible and also the close button will not be present.", + "mutable": true, + "attr": "checked", + "reflectToAttr": true, + "docs": "Checked state of the checkbox component", "docsTags": [], - "default": "true", + "default": "false", "values": [ { "type": "boolean" @@ -2562,49 +2568,29 @@ "required": false }, { - "name": "background", - "type": "string", - "complexType": { - "original": "string | undefined", - "resolved": "string", - "references": {} - }, - "mutable": false, - "attr": "background", - "reflectToAttr": false, - "docs": "Custom background color.\nOnly has an effect on chips with `variant='custom'`", - "docsTags": [], - "values": [ - { - "type": "string" - } - ], - "optional": false, - "required": false - }, - { - "name": "chipColor", - "type": "string", + "name": "disabled", + "type": "boolean", "complexType": { - "original": "string | undefined", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "chip-color", - "reflectToAttr": false, - "docs": "Custom font and icon color.\nOnly has an effect on chips with `variant='custom'`", + "attr": "disabled", + "reflectToAttr": true, + "docs": "Disabled state of the checkbox component", "docsTags": [], + "default": "false", "values": [ { - "type": "string" + "type": "boolean" } ], "optional": false, "required": false }, { - "name": "closable", + "name": "indeterminate", "type": "boolean", "complexType": { "original": "boolean", @@ -2612,9 +2598,9 @@ "references": {} }, "mutable": false, - "attr": "closable", - "reflectToAttr": false, - "docs": "Show close icon", + "attr": "indeterminate", + "reflectToAttr": true, + "docs": "Indeterminate state of the checkbox component", "docsTags": [], "default": "false", "values": [ @@ -2626,34 +2612,28 @@ "required": false }, { - "name": "color", + "name": "label", "type": "string", "complexType": { - "original": "string | undefined", + "original": "string", "resolved": "string", "references": {} }, "mutable": false, - "attr": "color", + "attr": "label", "reflectToAttr": false, - "docs": "Custom font and icon color.\nOnly has an effect on chips with `variant='custom'`", - "docsTags": [ - { - "name": "deprecated", - "text": "since 2.1.0 use `chip-color`" - } - ], - "deprecation": "since 2.1.0 use `chip-color`", + "docs": "Label for the checkbox component", + "docsTags": [], "values": [ { "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "icon", + "name": "name", "type": "string", "complexType": { "original": "string", @@ -2661,20 +2641,20 @@ "references": {} }, "mutable": false, - "attr": "icon", - "reflectToAttr": false, - "docs": "Show icon", + "attr": "name", + "reflectToAttr": true, + "docs": "Name of the checkbox component", "docsTags": [], "values": [ { "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "outline", + "name": "required", "type": "boolean", "complexType": { "original": "boolean", @@ -2682,9 +2662,9 @@ "references": {} }, "mutable": false, - "attr": "outline", - "reflectToAttr": false, - "docs": "Show chip with outline style", + "attr": "required", + "reflectToAttr": true, + "docs": "Required state of the checkbox component.\n\nIf true, checkbox needs to be checked to be valid", "docsTags": [], "default": "false", "values": [ @@ -2696,50 +2676,21 @@ "required": false }, { - "name": "variant", - "type": "\"alarm\" | \"critical\" | \"custom\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"", + "name": "value", + "type": "string", "complexType": { - "original": "| 'primary'\n | 'alarm'\n | 'critical'\n | 'warning'\n | 'info'\n | 'neutral'\n | 'success'\n | 'custom'", - "resolved": "\"alarm\" | \"critical\" | \"custom\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "variant", + "attr": "value", "reflectToAttr": true, - "docs": "Chip variant", + "docs": "Value of the checkbox component", "docsTags": [], - "default": "'primary'", + "default": "'on'", "values": [ { - "value": "alarm", - "type": "string" - }, - { - "value": "critical", - "type": "string" - }, - { - "value": "custom", - "type": "string" - }, - { - "value": "info", - "type": "string" - }, - { - "value": "neutral", - "type": "string" - }, - { - "value": "primary", - "type": "string" - }, - { - "value": "success", - "type": "string" - }, - { - "value": "warning", "type": "string" } ], @@ -2750,23 +2701,32 @@ "methods": [], "events": [ { - "event": "closeChip", - "detail": "any", + "event": "checkedChange", + "detail": "boolean", "bubbles": true, "complexType": { - "original": "any", - "resolved": "any", + "original": "boolean", + "resolved": "boolean", "references": {} }, "cancelable": true, "composed": true, - "docs": "Fire event if close button is clicked", - "docsTags": [ - { - "name": "since", - "text": "1.5.0" - } - ] + "docs": "Event emitted when the checked state of the checkbox changes", + "docsTags": [] + }, + { + "event": "valueChange", + "detail": "string", + "bubbles": true, + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Event emitted when the value of the checkbox changes", + "docsTags": [] } ], "styles": [], @@ -2775,106 +2735,110 @@ "listeners": [] }, { - "dirPath": "src/components/col", - "filePath": "src/components/col/col.tsx", - "fileName": "col.tsx", - "readmePath": "src/components/col/readme.md", - "usagesDir": "src/components/col/usage", - "tag": "ix-col", + "dirPath": "src/components/checkbox-group", + "filePath": "src/components/checkbox-group/checkbox-group.tsx", + "fileName": "checkbox-group.tsx", + "readmePath": "src/components/checkbox-group/readme.md", + "usagesDir": "src/components/checkbox-group/usage", + "tag": "ix-checkbox-group", "overview": "", "usage": {}, "docs": "", "docsTags": [ { "name": "since", - "text": "2.0.0" + "text": "2.6.0" + }, + { + "name": "form-ready", + "text": "2.6.0" } ], "encapsulation": "shadow", - "dependents": [ - "ix-date-dropdown", - "ix-datetime-picker" + "dependents": [], + "dependencies": [ + "ix-field-wrapper" ], - "dependencies": [], "dependencyGraph": { - "ix-date-dropdown": [ - "ix-col" + "ix-checkbox-group": [ + "ix-field-wrapper" ], - "ix-datetime-picker": [ - "ix-col" + "ix-field-wrapper": [ + "ix-field-label", + "ix-tooltip", + "ix-typography" + ], + "ix-field-label": [ + "ix-typography" + ], + "ix-tooltip": [ + "ix-typography" ] }, "props": [ { - "name": "size", - "type": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"", + "name": "direction", + "type": "\"column\" | \"row\"", "complexType": { - "original": "ColumnSize", - "resolved": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"", - "references": { - "ColumnSize": { - "location": "local", - "path": "src/components/col/col.tsx", - "id": "src/components/col/col.tsx::ColumnSize" - } - } + "original": "'row' | 'column'", + "resolved": "\"column\" | \"row\"", + "references": {} }, "mutable": false, - "attr": "size", + "attr": "direction", "reflectToAttr": false, - "docs": "Size of the column", + "docs": "Alignment of the checkboxes in the group", "docsTags": [], + "default": "'column'", "values": [ { - "value": "1", + "value": "column", "type": "string" }, { - "value": "10", + "value": "row", "type": "string" - }, + } + ], + "optional": false, + "required": false + }, + { + "name": "helperText", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "helper-text", + "reflectToAttr": false, + "docs": "Optional helper text displayed below the checkbox group", + "docsTags": [], + "values": [ { - "value": "11", "type": "string" - }, + } + ], + "optional": true, + "required": false + }, + { + "name": "infoText", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "info-text", + "reflectToAttr": false, + "docs": "Info text for the checkbox group", + "docsTags": [], + "values": [ { - "value": "12", - "type": "string" - }, - { - "value": "2", - "type": "string" - }, - { - "value": "3", - "type": "string" - }, - { - "value": "4", - "type": "string" - }, - { - "value": "5", - "type": "string" - }, - { - "value": "6", - "type": "string" - }, - { - "value": "7", - "type": "string" - }, - { - "value": "8", - "type": "string" - }, - { - "value": "9", - "type": "string" - }, - { - "value": "auto", "type": "string" } ], @@ -2882,75 +2846,20 @@ "required": false }, { - "name": "sizeLg", - "type": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"", + "name": "invalidText", + "type": "string", "complexType": { - "original": "ColumnSize", - "resolved": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"", - "references": { - "ColumnSize": { - "location": "local", - "path": "src/components/col/col.tsx", - "id": "src/components/col/col.tsx::ColumnSize" - } - } + "original": "string", + "resolved": "string", + "references": {} }, "mutable": false, - "attr": "size-lg", + "attr": "invalid-text", "reflectToAttr": false, - "docs": "Size of the column for lg screens", + "docs": "Error text for the checkbox group", "docsTags": [], "values": [ { - "value": "1", - "type": "string" - }, - { - "value": "10", - "type": "string" - }, - { - "value": "11", - "type": "string" - }, - { - "value": "12", - "type": "string" - }, - { - "value": "2", - "type": "string" - }, - { - "value": "3", - "type": "string" - }, - { - "value": "4", - "type": "string" - }, - { - "value": "5", - "type": "string" - }, - { - "value": "6", - "type": "string" - }, - { - "value": "7", - "type": "string" - }, - { - "value": "8", - "type": "string" - }, - { - "value": "9", - "type": "string" - }, - { - "value": "auto", "type": "string" } ], @@ -2958,75 +2867,20 @@ "required": false }, { - "name": "sizeMd", - "type": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"", + "name": "label", + "type": "string", "complexType": { - "original": "ColumnSize", - "resolved": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"", - "references": { - "ColumnSize": { - "location": "local", - "path": "src/components/col/col.tsx", - "id": "src/components/col/col.tsx::ColumnSize" - } - } + "original": "string", + "resolved": "string", + "references": {} }, "mutable": false, - "attr": "size-md", + "attr": "label", "reflectToAttr": false, - "docs": "Size of the column for md screens", + "docs": "Label for the checkbox group", "docsTags": [], "values": [ { - "value": "1", - "type": "string" - }, - { - "value": "10", - "type": "string" - }, - { - "value": "11", - "type": "string" - }, - { - "value": "12", - "type": "string" - }, - { - "value": "2", - "type": "string" - }, - { - "value": "3", - "type": "string" - }, - { - "value": "4", - "type": "string" - }, - { - "value": "5", - "type": "string" - }, - { - "value": "6", - "type": "string" - }, - { - "value": "7", - "type": "string" - }, - { - "value": "8", - "type": "string" - }, - { - "value": "9", - "type": "string" - }, - { - "value": "auto", "type": "string" } ], @@ -3034,75 +2888,41 @@ "required": false }, { - "name": "sizeSm", - "type": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"", + "name": "validText", + "type": "string", "complexType": { - "original": "ColumnSize", - "resolved": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"", - "references": { - "ColumnSize": { - "location": "local", - "path": "src/components/col/col.tsx", - "id": "src/components/col/col.tsx::ColumnSize" - } - } + "original": "string", + "resolved": "string", + "references": {} }, "mutable": false, - "attr": "size-sm", + "attr": "valid-text", "reflectToAttr": false, - "docs": "Size of the column for sm screens", + "docs": "Valid text for the checkbox group", "docsTags": [], "values": [ { - "value": "1", - "type": "string" - }, - { - "value": "10", - "type": "string" - }, - { - "value": "11", - "type": "string" - }, - { - "value": "12", - "type": "string" - }, - { - "value": "2", - "type": "string" - }, - { - "value": "3", - "type": "string" - }, - { - "value": "4", - "type": "string" - }, - { - "value": "5", - "type": "string" - }, - { - "value": "6", - "type": "string" - }, - { - "value": "7", - "type": "string" - }, - { - "value": "8", - "type": "string" - }, - { - "value": "9", "type": "string" - }, + } + ], + "optional": true, + "required": false + }, + { + "name": "warningText", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "warning-text", + "reflectToAttr": false, + "docs": "Warning text for the checkbox group", + "docsTags": [], + "values": [ { - "value": "auto", "type": "string" } ], @@ -3115,59 +2935,15 @@ "styles": [], "slots": [], "parts": [], - "listeners": [ - { - "event": "resize", - "target": "window", - "capture": false, - "passive": true - } - ] - }, - { - "dirPath": "src/components/content", - "filePath": "src/components/content/content.tsx", - "fileName": "content.tsx", - "readmePath": "src/components/content/readme.md", - "usagesDir": "src/components/content/usage", - "tag": "ix-content", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [ - { - "name": "since", - "text": "2.1.0" - }, - { - "name": "slot", - "text": "header - Display content at the top of the content page" - } - ], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [], - "dependencyGraph": {}, - "props": [], - "methods": [], - "events": [], - "styles": [], - "slots": [ - { - "name": "header", - "docs": "Display content at the top of the content page" - } - ], - "parts": [], "listeners": [] }, { - "dirPath": "src/components/content-header", - "filePath": "src/components/content-header/content-header.tsx", - "fileName": "content-header.tsx", - "readmePath": "src/components/content-header/readme.md", - "usagesDir": "src/components/content-header/usage", - "tag": "ix-content-header", + "dirPath": "src/components/chip", + "filePath": "src/components/chip/chip.tsx", + "fileName": "chip.tsx", + "readmePath": "src/components/chip/readme.md", + "usagesDir": "src/components/chip/usage", + "tag": "ix-chip", "overview": "", "usage": {}, "docs": "", @@ -3175,13 +2951,11 @@ "encapsulation": "shadow", "dependents": [], "dependencies": [ - "ix-icon-button", - "ix-typography" + "ix-icon-button" ], "dependencyGraph": { - "ix-content-header": [ - "ix-icon-button", - "ix-typography" + "ix-chip": [ + "ix-icon-button" ], "ix-icon-button": [ "ix-spinner" @@ -3189,7 +2963,7 @@ }, "props": [ { - "name": "hasBackButton", + "name": "active", "type": "boolean", "complexType": { "original": "boolean", @@ -3197,11 +2971,11 @@ "references": {} }, "mutable": false, - "attr": "has-back-button", + "attr": "active", "reflectToAttr": false, - "docs": "Display a back button", + "docs": "Determines if the chip is interactive. If false no user input (e.g. mouse states, keyboard navigation)\nwill be possible and also the close button will not be present.", "docsTags": [], - "default": "false", + "default": "true", "values": [ { "type": "boolean" @@ -3211,7 +2985,7 @@ "required": false }, { - "name": "headerSubtitle", + "name": "background", "type": "string", "complexType": { "original": "string | undefined", @@ -3219,11 +2993,10 @@ "references": {} }, "mutable": false, - "attr": "header-subtitle", + "attr": "background", "reflectToAttr": false, - "docs": "Subtitle of Header", + "docs": "Custom background color.\nOnly has an effect on chips with `variant='custom'`", "docsTags": [], - "default": "undefined", "values": [ { "type": "string" @@ -3233,135 +3006,28 @@ "required": false }, { - "name": "headerTitle", + "name": "chipColor", "type": "string", "complexType": { - "original": "string", + "original": "string | undefined", "resolved": "string", "references": {} }, "mutable": false, - "attr": "header-title", - "reflectToAttr": false, - "docs": "Title of Header", - "docsTags": [], - "values": [ - { - "type": "string" - } - ], - "optional": true, - "required": false - }, - { - "name": "variant", - "type": "\"primary\" | \"secondary\"", - "complexType": { - "original": "ContentHeaderVariant", - "resolved": "\"primary\" | \"secondary\"", - "references": { - "ContentHeaderVariant": { - "location": "local", - "path": "src/components/content-header/content-header.tsx", - "id": "src/components/content-header/content-header.tsx::ContentHeaderVariant" - } - } - }, - "mutable": false, - "attr": "variant", + "attr": "chip-color", "reflectToAttr": false, - "docs": "Variant of content header", + "docs": "Custom font and icon color.\nOnly has an effect on chips with `variant='custom'`", "docsTags": [], - "default": "'primary'", "values": [ { - "value": "primary", - "type": "string" - }, - { - "value": "secondary", "type": "string" } ], "optional": false, "required": false - } - ], - "methods": [], - "events": [ - { - "event": "backButtonClick", - "detail": "void", - "bubbles": true, - "complexType": { - "original": "void", - "resolved": "void", - "references": {} - }, - "cancelable": true, - "composed": true, - "docs": "Triggered when back button is clicked", - "docsTags": [] - } - ], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/date-dropdown", - "filePath": "src/components/date-dropdown/date-dropdown.tsx", - "fileName": "date-dropdown.tsx", - "readmePath": "src/components/date-dropdown/readme.md", - "usagesDir": "src/components/date-dropdown/usage", - "tag": "ix-date-dropdown", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [ - { - "name": "since", - "text": "2.1.0" - } - ], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [ - "ix-button", - "ix-dropdown", - "ix-layout-grid", - "ix-row", - "ix-col", - "ix-dropdown-item", - "ix-date-picker" - ], - "dependencyGraph": { - "ix-date-dropdown": [ - "ix-button", - "ix-dropdown", - "ix-layout-grid", - "ix-row", - "ix-col", - "ix-dropdown-item", - "ix-date-picker" - ], - "ix-button": [ - "ix-spinner" - ], - "ix-date-picker": [ - "ix-date-time-card", - "ix-icon-button", - "ix-button", - "ix-dropdown" - ], - "ix-icon-button": [ - "ix-spinner" - ] - }, - "props": [ + }, { - "name": "customRangeAllowed", + "name": "closable", "type": "boolean", "complexType": { "original": "boolean", @@ -3369,11 +3035,11 @@ "references": {} }, "mutable": false, - "attr": "custom-range-allowed", + "attr": "closable", "reflectToAttr": false, - "docs": "Controls whether the user is allowed to pick custom date ranges in the component.\nWhen set to 'true', the user can select a custom date range using the date picker.\nWhen set to 'false', only predefined time date ranges are available for selection.", + "docs": "Show close icon", "docsTags": [], - "default": "true", + "default": "false", "values": [ { "type": "boolean" @@ -3383,19 +3049,24 @@ "required": false }, { - "name": "dateRangeId", + "name": "color", "type": "string", "complexType": { - "original": "string", + "original": "string | undefined", "resolved": "string", "references": {} }, "mutable": false, - "attr": "date-range-id", + "attr": "color", "reflectToAttr": false, - "docs": "Used to set the initial select date range as well as the button name,\nif not set or no according date range label is found, nothing will be selected", - "docsTags": [], - "default": "'custom'", + "docs": "Custom font and icon color.\nOnly has an effect on chips with `variant='custom'`", + "docsTags": [ + { + "name": "deprecated", + "text": "since 2.1.0 use `chip-color`" + } + ], + "deprecation": "since 2.1.0 use `chip-color`", "values": [ { "type": "string" @@ -3405,34 +3076,28 @@ "required": false }, { - "name": "dateRangeOptions", - "type": "DateDropdownOption[]", + "name": "icon", + "type": "string", "complexType": { - "original": "DateDropdownOption[]", - "resolved": "DateDropdownOption[]", - "references": { - "DateDropdownOption": { - "location": "local", - "path": "src/components/date-dropdown/date-dropdown.tsx", - "id": "src/components/date-dropdown/date-dropdown.tsx::DateDropdownOption" - } - } + "original": "string", + "resolved": "string", + "references": {} }, "mutable": false, + "attr": "icon", "reflectToAttr": false, - "docs": "An array of predefined date range options for the date picker.\nEach option is an object with a label describing the range and a function\nthat returns the start and end dates of the range as a DateRangeOption object.\n\nExample format:\n {\n id: 'some unique id',\n label: 'Name of the range',\n from: undefined, to: '2023/03/29'\n },\n // ... other predefined date range options ...", + "docs": "Show icon", "docsTags": [], - "default": "[]", "values": [ { - "type": "DateDropdownOption[]" + "type": "string" } ], "optional": false, "required": false }, { - "name": "disabled", + "name": "outline", "type": "boolean", "complexType": { "original": "boolean", @@ -3440,15 +3105,10 @@ "references": {} }, "mutable": false, - "attr": "disabled", + "attr": "outline", "reflectToAttr": false, - "docs": "Disable the button that opens the dropdown containing the date picker.", - "docsTags": [ - { - "name": "since", - "text": "2.3.0" - } - ], + "docs": "Show chip with outline style", + "docsTags": [], "default": "false", "values": [ { @@ -3459,454 +3119,500 @@ "required": false }, { - "name": "format", - "type": "string", + "name": "variant", + "type": "\"alarm\" | \"critical\" | \"custom\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"", "complexType": { - "original": "string", - "resolved": "string", + "original": "| 'primary'\n | 'alarm'\n | 'critical'\n | 'warning'\n | 'info'\n | 'neutral'\n | 'success'\n | 'custom'", + "resolved": "\"alarm\" | \"critical\" | \"custom\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"", "references": {} }, "mutable": false, - "attr": "format", - "reflectToAttr": false, - "docs": "Date format string.\nSee", - "docsTags": [ - { - "name": "link", - "text": "https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens." - } - ], - "default": "'yyyy/LL/dd'", + "attr": "variant", + "reflectToAttr": true, + "docs": "Chip variant", + "docsTags": [], + "default": "'primary'", "values": [ { + "value": "alarm", "type": "string" - } - ], - "optional": false, - "required": false - }, - { - "name": "from", - "type": "string", - "complexType": { - "original": "string", - "resolved": "string", - "references": {} - }, - "mutable": false, - "attr": "from", - "reflectToAttr": false, - "docs": "Picker date. If the picker is in range mode this property is the start date.\nIf set to `null` no default start date will be pre-selected.\n\nFormat is based on `format`", - "docsTags": [], - "values": [ + }, { + "value": "critical", "type": "string" - } - ], - "optional": false, - "required": false - }, - { - "name": "i18nCustomItem", - "type": "string", - "complexType": { - "original": "string", - "resolved": "string", - "references": {} - }, - "mutable": false, - "attr": "i18n-custom-item", - "reflectToAttr": false, - "docs": "Text for custom dropdown item. Will be used for translation.", - "docsTags": [], - "default": "'Custom...'", - "values": [ + }, + { + "value": "custom", + "type": "string" + }, { + "value": "info", + "type": "string" + }, + { + "value": "neutral", + "type": "string" + }, + { + "value": "primary", + "type": "string" + }, + { + "value": "success", + "type": "string" + }, + { + "value": "warning", "type": "string" } ], "optional": false, "required": false - }, + } + ], + "methods": [], + "events": [ { - "name": "i18nDone", - "type": "string", + "event": "closeChip", + "detail": "any", + "bubbles": true, "complexType": { - "original": "string", - "resolved": "string", + "original": "any", + "resolved": "any", "references": {} }, - "mutable": false, - "attr": "i18n-done", - "reflectToAttr": false, - "docs": "Text for the done button. Will be used for translation.", - "docsTags": [], - "default": "'Done'", - "values": [ + "cancelable": true, + "composed": true, + "docs": "Fire event if close button is clicked", + "docsTags": [ { - "type": "string" + "name": "since", + "text": "1.5.0" } - ], - "optional": false, - "required": false - }, + ] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/col", + "filePath": "src/components/col/col.tsx", + "fileName": "col.tsx", + "readmePath": "src/components/col/readme.md", + "usagesDir": "src/components/col/usage", + "tag": "ix-col", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ { - "name": "i18nNoRange", - "type": "string", + "name": "since", + "text": "2.0.0" + } + ], + "encapsulation": "shadow", + "dependents": [ + "ix-date-dropdown", + "ix-datetime-picker" + ], + "dependencies": [], + "dependencyGraph": { + "ix-date-dropdown": [ + "ix-col" + ], + "ix-datetime-picker": [ + "ix-col" + ] + }, + "props": [ + { + "name": "size", + "type": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"", "complexType": { - "original": "string", - "resolved": "string", - "references": {} + "original": "ColumnSize", + "resolved": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"", + "references": { + "ColumnSize": { + "location": "local", + "path": "src/components/col/col.tsx", + "id": "src/components/col/col.tsx::ColumnSize" + } + } }, "mutable": false, - "attr": "i18n-no-range", + "attr": "size", "reflectToAttr": false, - "docs": "Text for the done button. Will be used for translation.", + "docs": "Size of the column", "docsTags": [], - "default": "'No range set'", "values": [ { + "value": "1", + "type": "string" + }, + { + "value": "10", + "type": "string" + }, + { + "value": "11", + "type": "string" + }, + { + "value": "12", + "type": "string" + }, + { + "value": "2", + "type": "string" + }, + { + "value": "3", + "type": "string" + }, + { + "value": "4", + "type": "string" + }, + { + "value": "5", + "type": "string" + }, + { + "value": "6", + "type": "string" + }, + { + "value": "7", + "type": "string" + }, + { + "value": "8", + "type": "string" + }, + { + "value": "9", + "type": "string" + }, + { + "value": "auto", "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "maxDate", - "type": "string", + "name": "sizeLg", + "type": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"", "complexType": { - "original": "string", - "resolved": "string", - "references": {} + "original": "ColumnSize", + "resolved": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"", + "references": { + "ColumnSize": { + "location": "local", + "path": "src/components/col/col.tsx", + "id": "src/components/col/col.tsx::ColumnSize" + } + } }, "mutable": false, - "attr": "max-date", + "attr": "size-lg", "reflectToAttr": false, - "docs": "The latest date that can be selected by the date picker.\nIf not set there will be no restriction.", + "docs": "Size of the column for lg screens", "docsTags": [], "values": [ { + "value": "1", "type": "string" - } - ], - "optional": false, - "required": false - }, - { - "name": "minDate", - "type": "string", - "complexType": { - "original": "string", - "resolved": "string", - "references": {} - }, - "mutable": false, - "attr": "min-date", - "reflectToAttr": false, - "docs": "The earliest date that can be selected by the date picker.\nIf not set there will be no restriction.", - "docsTags": [], - "values": [ + }, { + "value": "10", "type": "string" - } - ], - "optional": false, - "required": false - }, - { - "name": "range", - "type": "boolean", - "complexType": { - "original": "boolean", - "resolved": "boolean", - "references": {} - }, - "mutable": false, - "attr": "range", - "reflectToAttr": false, - "docs": "If true a range of dates can be selected.", - "docsTags": [], - "default": "true", - "values": [ + }, { - "type": "boolean" - } - ], - "optional": false, - "required": false - }, - { - "name": "to", - "type": "string", - "complexType": { - "original": "string", - "resolved": "string", - "references": {} - }, - "mutable": false, - "attr": "to", - "reflectToAttr": false, - "docs": "Picker date. If the picker is in range mode this property is the end date.\nIf the picker is not in range mode leave this value `null`\n\nFormat is based on `format`", - "docsTags": [], - "values": [ + "value": "11", + "type": "string" + }, { + "value": "12", "type": "string" - } - ], - "optional": false, - "required": false - } - ], - "methods": [ - { - "name": "getDateRange", - "returns": { - "type": "Promise", - "docs": "" - }, - "complexType": { - "signature": "() => Promise", - "parameters": [], - "references": { - "Promise": { - "location": "global", - "id": "global::Promise" - }, - "DateRangeChangeEvent": { - "location": "local", - "path": "src/components/date-dropdown/date-dropdown.tsx", - "id": "src/components/date-dropdown/date-dropdown.tsx::DateRangeChangeEvent" - } }, - "return": "Promise" - }, - "signature": "getDateRange() => Promise", - "parameters": [], - "docs": "Retrieves the currently selected date range from the component.\nThis method returns the selected date range as a `DateChangeEvent` object.", - "docsTags": [] - } - ], - "events": [ - { - "event": "dateRangeChange", - "detail": "{ id: string; from: string; to: string; }", - "bubbles": true, - "complexType": { - "original": "DateRangeChangeEvent", - "resolved": "{ id: string; from: string; to: string; }", - "references": { - "DateRangeChangeEvent": { - "location": "local", - "path": "src/components/date-dropdown/date-dropdown.tsx", - "id": "src/components/date-dropdown/date-dropdown.tsx::DateRangeChangeEvent" - } - } - }, - "cancelable": true, - "composed": true, - "docs": "EventEmitter for date range change events.\n\nThis event is emitted when the date range changes within the component.\nThe event payload contains information about the selected date range.", - "docsTags": [] - } - ], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/date-picker", - "filePath": "src/components/date-picker/date-picker.tsx", - "fileName": "date-picker.tsx", - "readmePath": "src/components/date-picker/readme.md", - "usagesDir": "src/components/date-picker/usage", - "tag": "ix-date-picker", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [], - "encapsulation": "shadow", - "dependents": [ - "ix-date-dropdown", - "ix-datetime-picker" - ], - "dependencies": [ - "ix-date-time-card", - "ix-icon-button", - "ix-button", - "ix-dropdown" - ], - "dependencyGraph": { - "ix-date-picker": [ - "ix-date-time-card", - "ix-icon-button", - "ix-button", - "ix-dropdown" - ], - "ix-icon-button": [ - "ix-spinner" - ], - "ix-button": [ - "ix-spinner" - ], - "ix-date-dropdown": [ - "ix-date-picker" - ], - "ix-datetime-picker": [ - "ix-date-picker" - ] - }, - "props": [ - { - "name": "corners", - "type": "\"left\" | \"right\" | \"rounded\" | \"straight\"", - "complexType": { - "original": "DateTimeCardCorners", - "resolved": "\"left\" | \"right\" | \"rounded\" | \"straight\"", - "references": { - "DateTimeCardCorners": { - "location": "import", - "path": "../date-time-card/date-time-card", - "id": "src/components/date-time-card/date-time-card.tsx::DateTimeCardCorners" - } - } - }, - "mutable": false, - "attr": "corners", - "reflectToAttr": false, - "docs": "Corner style", - "docsTags": [], - "default": "'rounded'", - "values": [ { - "value": "left", + "value": "2", "type": "string" }, { - "value": "right", + "value": "3", "type": "string" }, { - "value": "rounded", + "value": "4", "type": "string" }, { - "value": "straight", + "value": "5", "type": "string" - } - ], - "optional": false, - "required": false - }, - { - "name": "eventDelimiter", - "type": "string", - "complexType": { - "original": "string", - "resolved": "string", - "references": {} - }, - "mutable": false, - "attr": "event-delimiter", - "reflectToAttr": false, - "docs": "Default behavior of the done event is to join the two events (date and time) into one combined string output.\nThis combination can be configured over the delimiter", - "docsTags": [ + }, { - "name": "since", - "text": "1.1.0" + "value": "6", + "type": "string" }, { - "name": "deprecated", - "text": "Not used anymore see `this.dateChange`" - } - ], - "default": "' - '", - "deprecation": "Not used anymore see `this.dateChange`", - "values": [ + "value": "7", + "type": "string" + }, + { + "value": "8", + "type": "string" + }, + { + "value": "9", + "type": "string" + }, { + "value": "auto", "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "format", - "type": "string", + "name": "sizeMd", + "type": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"", "complexType": { - "original": "string", - "resolved": "string", - "references": {} + "original": "ColumnSize", + "resolved": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"", + "references": { + "ColumnSize": { + "location": "local", + "path": "src/components/col/col.tsx", + "id": "src/components/col/col.tsx::ColumnSize" + } + } }, "mutable": false, - "attr": "format", + "attr": "size-md", "reflectToAttr": false, - "docs": "Date format string.\nSee {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.", + "docs": "Size of the column for md screens", "docsTags": [], - "default": "'yyyy/LL/dd'", "values": [ { + "value": "1", "type": "string" - } - ], - "optional": false, - "required": false - }, - { - "name": "from", - "type": "string", - "complexType": { - "original": "string | undefined", - "resolved": "string", - "references": {} - }, - "mutable": false, - "attr": "from", - "reflectToAttr": false, - "docs": "The selected starting date. If the date-picker-rework is not in range mode this is the selected date.\nFormat has to match the `format` property.", - "docsTags": [ + }, { - "name": "since", - "text": "1.1.0" - } - ], - "values": [ + "value": "10", + "type": "string" + }, + { + "value": "11", + "type": "string" + }, + { + "value": "12", + "type": "string" + }, + { + "value": "2", + "type": "string" + }, + { + "value": "3", + "type": "string" + }, + { + "value": "4", + "type": "string" + }, + { + "value": "5", + "type": "string" + }, + { + "value": "6", + "type": "string" + }, + { + "value": "7", + "type": "string" + }, + { + "value": "8", + "type": "string" + }, + { + "value": "9", + "type": "string" + }, { + "value": "auto", "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "i18nDone", - "type": "string", + "name": "sizeSm", + "type": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"", "complexType": { - "original": "string", - "resolved": "string", - "references": {} + "original": "ColumnSize", + "resolved": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"", + "references": { + "ColumnSize": { + "location": "local", + "path": "src/components/col/col.tsx", + "id": "src/components/col/col.tsx::ColumnSize" + } + } }, "mutable": false, - "attr": "i18n-done", + "attr": "size-sm", "reflectToAttr": false, - "docs": "Text of date select button", - "docsTags": [ - { - "name": "since", - "text": "2.1.0" - } - ], - "default": "'Done'", + "docs": "Size of the column for sm screens", + "docsTags": [], "values": [ { + "value": "1", + "type": "string" + }, + { + "value": "10", + "type": "string" + }, + { + "value": "11", + "type": "string" + }, + { + "value": "12", + "type": "string" + }, + { + "value": "2", + "type": "string" + }, + { + "value": "3", + "type": "string" + }, + { + "value": "4", + "type": "string" + }, + { + "value": "5", + "type": "string" + }, + { + "value": "6", + "type": "string" + }, + { + "value": "7", + "type": "string" + }, + { + "value": "8", + "type": "string" + }, + { + "value": "9", + "type": "string" + }, + { + "value": "auto", "type": "string" } ], - "optional": false, + "optional": true, "required": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [ + { + "event": "resize", + "target": "window", + "capture": false, + "passive": true + } + ] + }, + { + "dirPath": "src/components/content", + "filePath": "src/components/content/content.tsx", + "fileName": "content.tsx", + "readmePath": "src/components/content/readme.md", + "usagesDir": "src/components/content/usage", + "tag": "ix-content", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "2.1.0" }, { - "name": "individual", + "name": "slot", + "text": "header - Display content at the top of the content page" + } + ], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [], + "methods": [], + "events": [], + "styles": [], + "slots": [ + { + "name": "header", + "docs": "Display content at the top of the content page" + } + ], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/content-header", + "filePath": "src/components/content-header/content-header.tsx", + "fileName": "content-header.tsx", + "readmePath": "src/components/content-header/readme.md", + "usagesDir": "src/components/content-header/usage", + "tag": "ix-content-header", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [ + "ix-icon-button", + "ix-typography" + ], + "dependencyGraph": { + "ix-content-header": [ + "ix-icon-button", + "ix-typography" + ], + "ix-icon-button": [ + "ix-spinner" + ] + }, + "props": [ + { + "name": "hasBackButton", "type": "boolean", "complexType": { "original": "boolean", @@ -3914,17 +3620,11 @@ "references": {} }, "mutable": false, - "attr": "individual", + "attr": "has-back-button", "reflectToAttr": false, - "docs": "", - "docsTags": [ - { - "name": "deprecated", - "text": "Not supported since 2.0.0." - } - ], - "default": "true", - "deprecation": "Not supported since 2.0.0.", + "docs": "Display a back button", + "docsTags": [], + "default": "false", "values": [ { "type": "boolean" @@ -3934,25 +3634,20 @@ "required": false }, { - "name": "locale", + "name": "headerSubtitle", "type": "string", "complexType": { - "original": "string", + "original": "string | undefined", "resolved": "string", "references": {} }, "mutable": false, - "attr": "locale", + "attr": "header-subtitle", "reflectToAttr": false, - "docs": "Format of time string\nSee {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.", - "docsTags": [ - { - "name": "since", - "text": "2.1.0" - } - ], - "default": "undefined", - "values": [ + "docs": "Subtitle of Header", + "docsTags": [], + "default": "undefined", + "values": [ { "type": "string" } @@ -3961,7 +3656,7 @@ "required": false }, { - "name": "maxDate", + "name": "headerTitle", "type": "string", "complexType": { "original": "string", @@ -3969,25 +3664,114 @@ "references": {} }, "mutable": false, - "attr": "max-date", + "attr": "header-title", "reflectToAttr": false, - "docs": "The latest date that can be selected by the date picker.\nIf not set there will be no restriction.", - "docsTags": [ + "docs": "Title of Header", + "docsTags": [], + "values": [ { - "name": "since", - "text": "1.1.0" + "type": "string" } ], + "optional": true, + "required": false + }, + { + "name": "variant", + "type": "\"primary\" | \"secondary\"", + "complexType": { + "original": "ContentHeaderVariant", + "resolved": "\"primary\" | \"secondary\"", + "references": { + "ContentHeaderVariant": { + "location": "local", + "path": "src/components/content-header/content-header.tsx", + "id": "src/components/content-header/content-header.tsx::ContentHeaderVariant" + } + } + }, + "mutable": false, + "attr": "variant", + "reflectToAttr": false, + "docs": "Variant of content header", + "docsTags": [], + "default": "'primary'", "values": [ { + "value": "primary", + "type": "string" + }, + { + "value": "secondary", "type": "string" } ], "optional": false, "required": false - }, + } + ], + "methods": [], + "events": [ { - "name": "minDate", + "event": "backButtonClick", + "detail": "void", + "bubbles": true, + "complexType": { + "original": "void", + "resolved": "void", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Triggered when back button is clicked", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/custom-field", + "filePath": "src/components/custom-field/custom-field.tsx", + "fileName": "custom-field.tsx", + "readmePath": "src/components/custom-field/readme.md", + "usagesDir": "src/components/custom-field/usage", + "tag": "ix-custom-field", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "2.6.0" + } + ], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [ + "ix-field-wrapper" + ], + "dependencyGraph": { + "ix-custom-field": [ + "ix-field-wrapper" + ], + "ix-field-wrapper": [ + "ix-field-label", + "ix-tooltip", + "ix-typography" + ], + "ix-field-label": [ + "ix-typography" + ], + "ix-tooltip": [ + "ix-typography" + ] + }, + "props": [ + { + "name": "helperText", "type": "string", "complexType": { "original": "string", @@ -3995,47 +3779,41 @@ "references": {} }, "mutable": false, - "attr": "min-date", + "attr": "helper-text", "reflectToAttr": false, - "docs": "The earliest date that can be selected by the date picker.\nIf not set there will be no restriction.", - "docsTags": [ - { - "name": "since", - "text": "1.1.0" - } - ], + "docs": "Show text below the field component which show additional information", + "docsTags": [], "values": [ { "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "range", - "type": "boolean", + "name": "infoText", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "range", + "attr": "info-text", "reflectToAttr": false, - "docs": "If true a date-range can be selected (from/to).", + "docs": "Info text for the field component", "docsTags": [], - "default": "true", "values": [ { - "type": "boolean" + "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "textSelectDate", + "name": "invalidText", "type": "string", "complexType": { "original": "string", @@ -4043,237 +3821,171 @@ "references": {} }, "mutable": false, - "attr": "text-select-date", + "attr": "invalid-text", "reflectToAttr": false, - "docs": "Text of the button that confirms date selection.", - "docsTags": [ - { - "name": "since", - "text": "1.1.0" - }, - { - "name": "deprecated", - "text": "since 2.1.0. Use `i18nDone`" - } - ], - "deprecation": "since 2.1.0. Use `i18nDone`", + "docs": "Error text for the field component", + "docsTags": [], "values": [ { "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "to", + "name": "label", "type": "string", "complexType": { - "original": "string | undefined", + "original": "string", "resolved": "string", "references": {} }, "mutable": false, - "attr": "to", + "attr": "label", "reflectToAttr": false, - "docs": "The selected end date. If the the date-picker-rework is not in range mode this property has no impact.\nFormat has to match the `format` property.", - "docsTags": [ - { - "name": "since", - "text": "1.1.0" - } - ], + "docs": "Label for the field component", + "docsTags": [], "values": [ { "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "weekStartIndex", - "type": "number", + "name": "required", + "type": "boolean", "complexType": { - "original": "number", - "resolved": "number", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "week-start-index", + "attr": "required", "reflectToAttr": false, - "docs": "The index of which day to start the week on, based on the Locale#weekdays array.\nE.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.", - "docsTags": [ - { - "name": "since", - "text": "2.1.0" - } - ], - "default": "0", + "docs": "A value is required or must be checked for the form to be submittable", + "docsTags": [], + "default": "false", "values": [ { - "type": "number" + "type": "boolean" } ], "optional": false, "required": false - } - ], - "methods": [ + }, { - "name": "getCurrentDate", - "returns": { - "type": "Promise<{ from: string; to: string; }>", - "docs": "" - }, + "name": "showTextAsTooltip", + "type": "boolean", "complexType": { - "signature": "() => Promise<{ from: string; to: string; }>", - "parameters": [], - "references": { - "Promise": { - "location": "global", - "id": "global::Promise" - } - }, - "return": "Promise<{ from: string; to: string; }>" + "original": "boolean", + "resolved": "boolean", + "references": {} }, - "signature": "getCurrentDate() => Promise<{ from: string; to: string; }>", - "parameters": [], - "docs": "Get the currently selected date-range.", - "docsTags": [] - } - ], - "events": [ + "mutable": false, + "attr": "show-text-as-tooltip", + "reflectToAttr": false, + "docs": "Show helper, info, warning, error and valid text as tooltip", + "docsTags": [], + "values": [ + { + "type": "boolean" + } + ], + "optional": true, + "required": false + }, { - "event": "dateChange", - "detail": "{ from: string; to: string; }", - "bubbles": true, + "name": "validText", + "type": "string", "complexType": { - "original": "DateChangeEvent", - "resolved": "{ from: string; to: string; }", - "references": { - "DateChangeEvent": { - "location": "local", - "path": "src/components/date-picker/date-picker.tsx", - "id": "src/components/date-picker/date-picker.tsx::DateChangeEvent" - } - } + "original": "string", + "resolved": "string", + "references": {} }, - "cancelable": true, - "composed": true, - "docs": "Triggers if the date selection changes.\nNote: Since 2.0.0 `dateChange` does not dispatch detail property as `string`", - "docsTags": [ + "mutable": false, + "attr": "valid-text", + "reflectToAttr": false, + "docs": "Valid text for the field component", + "docsTags": [], + "values": [ { - "name": "since", - "text": "2.1.0" + "type": "string" } - ] + ], + "optional": true, + "required": false }, { - "event": "dateRangeChange", - "detail": "{ from: string; to: string; }", - "bubbles": true, - "complexType": { - "original": "DateChangeEvent", - "resolved": "{ from: string; to: string; }", - "references": { - "DateChangeEvent": { - "location": "local", - "path": "src/components/date-picker/date-picker.tsx", - "id": "src/components/date-picker/date-picker.tsx::DateChangeEvent" - } - } - }, - "cancelable": true, - "composed": true, - "docs": "Triggers if the date selection changes.\nOnly triggered if date-picker-rework is in range mode.", - "docsTags": [ - { - "name": "since", - "text": "2.1.0" - } - ] - }, - { - "event": "dateSelect", - "detail": "{ from: string; to: string; }", - "bubbles": true, - "complexType": { - "original": "DateChangeEvent", - "resolved": "{ from: string; to: string; }", - "references": { - "DateChangeEvent": { - "location": "local", - "path": "src/components/date-picker/date-picker.tsx", - "id": "src/components/date-picker/date-picker.tsx::DateChangeEvent" - } - } - }, - "cancelable": true, - "composed": true, - "docs": "Date selection confirmed via button action", - "docsTags": [ - { - "name": "since", - "text": "1.1.0" - } - ] - }, - { - "event": "done", - "detail": "string", - "bubbles": true, + "name": "warningText", + "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, - "cancelable": true, - "composed": true, - "docs": "Date selection confirmed via button action", - "docsTags": [ + "mutable": false, + "attr": "warning-text", + "reflectToAttr": false, + "docs": "Warning text for the field component", + "docsTags": [], + "values": [ { - "name": "deprecated", - "text": "NOT getting dispatched after 2.0.0. Use `dateSelect`." + "type": "string" } ], - "deprecation": "NOT getting dispatched after 2.0.0. Use `dateSelect`." + "optional": true, + "required": false } ], + "methods": [], + "events": [], "styles": [], "slots": [], "parts": [], "listeners": [] }, { - "dirPath": "src/components/datetime-picker", - "filePath": "src/components/datetime-picker/datetime-picker.tsx", - "fileName": "datetime-picker.tsx", - "readmePath": "src/components/datetime-picker/readme.md", - "usagesDir": "src/components/datetime-picker/usage", - "tag": "ix-datetime-picker", + "dirPath": "src/components/date-dropdown", + "filePath": "src/components/date-dropdown/date-dropdown.tsx", + "fileName": "date-dropdown.tsx", + "readmePath": "src/components/date-dropdown/readme.md", + "usagesDir": "src/components/date-dropdown/usage", + "tag": "ix-date-dropdown", "overview": "", "usage": {}, "docs": "", - "docsTags": [], + "docsTags": [ + { + "name": "since", + "text": "2.1.0" + } + ], "encapsulation": "shadow", "dependents": [], "dependencies": [ + "ix-button", + "ix-dropdown", "ix-layout-grid", "ix-row", "ix-col", - "ix-date-picker", - "ix-time-picker", - "ix-button" + "ix-dropdown-item", + "ix-date-picker" ], "dependencyGraph": { - "ix-datetime-picker": [ + "ix-date-dropdown": [ + "ix-button", + "ix-dropdown", "ix-layout-grid", "ix-row", "ix-col", - "ix-date-picker", - "ix-time-picker", - "ix-button" + "ix-dropdown-item", + "ix-date-picker" + ], + "ix-button": [ + "ix-spinner" ], "ix-date-picker": [ "ix-date-time-card", @@ -4283,47 +3995,33 @@ ], "ix-icon-button": [ "ix-spinner" - ], - "ix-button": [ - "ix-spinner" - ], - "ix-time-picker": [ - "ix-date-time-card", - "ix-typography", - "ix-icon-button", - "ix-button" ] }, "props": [ { - "name": "dateFormat", - "type": "string", + "name": "customRangeAllowed", + "type": "boolean", "complexType": { - "original": "string", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "date-format", + "attr": "custom-range-allowed", "reflectToAttr": false, - "docs": "Date format string.\nSee {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.", - "docsTags": [ - { - "name": "since", - "text": "1.1.0" - } - ], - "default": "'yyyy/LL/dd'", + "docs": "Controls whether the user is allowed to pick custom date ranges in the component.\nWhen set to 'true', the user can select a custom date range using the date picker.\nWhen set to 'false', only predefined time date ranges are available for selection.", + "docsTags": [], + "default": "true", "values": [ { - "type": "string" + "type": "boolean" } ], "optional": false, "required": false }, { - "name": "eventDelimiter", + "name": "dateRangeId", "type": "string", "complexType": { "original": "string", @@ -4331,21 +4029,11 @@ "references": {} }, "mutable": false, - "attr": "event-delimiter", + "attr": "date-range-id", "reflectToAttr": false, - "docs": "Default behavior of the done event is to join the two events (date and time) into one combined string output.\nThis combination can be configured over the delimiter", - "docsTags": [ - { - "name": "since", - "text": "1.1.0" - }, - { - "name": "deprecated", - "text": "Not used anymore see `done` event" - } - ], - "default": "' - '", - "deprecation": "Not used anymore see `done` event", + "docs": "Used to set the initial select date range as well as the button name,\nif not set or no according date range label is found, nothing will be selected", + "docsTags": [], + "default": "'custom'", "values": [ { "type": "string" @@ -4355,60 +4043,61 @@ "required": false }, { - "name": "from", - "type": "string", + "name": "dateRangeOptions", + "type": "DateDropdownOption[]", "complexType": { - "original": "string | undefined", - "resolved": "string", - "references": {} + "original": "DateDropdownOption[]", + "resolved": "DateDropdownOption[]", + "references": { + "DateDropdownOption": { + "location": "local", + "path": "src/components/date-dropdown/date-dropdown.tsx", + "id": "src/components/date-dropdown/date-dropdown.tsx::DateDropdownOption" + } + } }, "mutable": false, - "attr": "from", "reflectToAttr": false, - "docs": "The selected starting date. If the picker is not in range mode this is the selected date.\nFormat has to match the `format` property.", - "docsTags": [ - { - "name": "since", - "text": "1.1.0" - } - ], + "docs": "An array of predefined date range options for the date picker.\nEach option is an object with a label describing the range and a function\nthat returns the start and end dates of the range as a DateRangeOption object.\n\nExample format:\n {\n id: 'some unique id',\n label: 'Name of the range',\n from: undefined, to: '2023/03/29'\n },\n // ... other predefined date range options ...", + "docsTags": [], + "default": "[]", "values": [ { - "type": "string" + "type": "DateDropdownOption[]" } ], "optional": false, "required": false }, { - "name": "i18nDone", - "type": "string", + "name": "disabled", + "type": "boolean", "complexType": { - "original": "string", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "i18n-done", + "attr": "disabled", "reflectToAttr": false, - "docs": "Text of date select button", + "docs": "Disable the button that opens the dropdown containing the date picker.", "docsTags": [ { "name": "since", - "text": "2.1.0" + "text": "2.3.0" } ], - "default": "'Done'", + "default": "false", "values": [ { - "type": "string" + "type": "boolean" } ], "optional": false, "required": false }, { - "name": "locale", + "name": "format", "type": "string", "complexType": { "original": "string", @@ -4416,16 +4105,16 @@ "references": {} }, "mutable": false, - "attr": "locale", + "attr": "format", "reflectToAttr": false, - "docs": "Format of time string\nSee {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.", + "docs": "Date format string.\nSee", "docsTags": [ { - "name": "since", - "text": "2.1.0" + "name": "link", + "text": "https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens." } ], - "default": "undefined", + "default": "'yyyy/LL/dd'", "values": [ { "type": "string" @@ -4435,7 +4124,7 @@ "required": false }, { - "name": "maxDate", + "name": "from", "type": "string", "complexType": { "original": "string", @@ -4443,15 +4132,10 @@ "references": {} }, "mutable": false, - "attr": "max-date", + "attr": "from", "reflectToAttr": false, - "docs": "The latest date that can be selected by the date picker.\nIf not set there will be no restriction.", - "docsTags": [ - { - "name": "since", - "text": "1.1.0" - } - ], + "docs": "Picker date. If the picker is in range mode this property is the start date.\nIf set to `null` no default start date will be pre-selected.\n\nFormat is based on `format`", + "docsTags": [], "values": [ { "type": "string" @@ -4461,7 +4145,7 @@ "required": false }, { - "name": "minDate", + "name": "i18nCustomItem", "type": "string", "complexType": { "original": "string", @@ -4469,15 +4153,11 @@ "references": {} }, "mutable": false, - "attr": "min-date", + "attr": "i18n-custom-item", "reflectToAttr": false, - "docs": "The earliest date that can be selected by the date picker.\nIf not set there will be no restriction.", - "docsTags": [ - { - "name": "since", - "text": "1.1.0" - } - ], + "docs": "Text for custom dropdown item. Will be used for translation.", + "docsTags": [], + "default": "'Custom...'", "values": [ { "type": "string" @@ -4487,126 +4167,115 @@ "required": false }, { - "name": "range", - "type": "boolean", + "name": "i18nDone", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "range", + "attr": "i18n-done", "reflectToAttr": false, - "docs": "If true a date-range can be selected (from/to).", + "docs": "Text for the done button. Will be used for translation.", "docsTags": [], - "default": "true", + "default": "'Done'", "values": [ { - "type": "boolean" + "type": "string" } ], "optional": false, "required": false }, { - "name": "showHour", - "type": "boolean", + "name": "i18nNoRange", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "show-hour", + "attr": "i18n-no-range", "reflectToAttr": false, - "docs": "Show hour input", + "docs": "Text for the done button. Will be used for translation.", "docsTags": [], - "default": "true", + "default": "'No range set'", "values": [ { - "type": "boolean" + "type": "string" } ], "optional": false, "required": false }, { - "name": "showMinutes", - "type": "boolean", + "name": "maxDate", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "show-minutes", + "attr": "max-date", "reflectToAttr": false, - "docs": "Show minutes input", + "docs": "The latest date that can be selected by the date picker.\nIf not set there will be no restriction.", "docsTags": [], - "default": "true", "values": [ { - "type": "boolean" + "type": "string" } ], "optional": false, "required": false }, { - "name": "showSeconds", - "type": "boolean", + "name": "minDate", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "show-seconds", + "attr": "min-date", "reflectToAttr": false, - "docs": "Show seconds input", + "docs": "The earliest date that can be selected by the date picker.\nIf not set there will be no restriction.", "docsTags": [], - "default": "true", "values": [ { - "type": "boolean" + "type": "string" } ], "optional": false, "required": false }, { - "name": "showTimeReference", - "type": "any", + "name": "range", + "type": "boolean", "complexType": { - "original": "any", - "resolved": "any", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "show-time-reference", + "attr": "range", "reflectToAttr": false, - "docs": "Show time reference input\nTime reference is default aligned with", - "docsTags": [ - { - "name": "see", - "text": "{ this.timeFormat}" - }, - { - "name": "since", - "text": "1.1.0" - } - ], - "default": "undefined", + "docs": "If true a range of dates can be selected.", + "docsTags": [], + "default": "true", "values": [ { - "type": "any" + "type": "boolean" } ], "optional": false, "required": false }, { - "name": "textSelectDate", + "name": "to", "type": "string", "complexType": { "original": "string", @@ -4614,20 +4283,10 @@ "references": {} }, "mutable": false, - "attr": "text-select-date", + "attr": "to", "reflectToAttr": false, - "docs": "Text of date select button", - "docsTags": [ - { - "name": "since", - "text": "1.1.0" - }, - { - "name": "deprecated", - "text": "since 2.1.0. Use `i18nDone`" - } - ], - "deprecation": "since 2.1.0. Use `i18nDone`", + "docs": "Picker date. If the picker is in range mode this property is the end date.\nIf the picker is not in range mode leave this value `null`\n\nFormat is based on `format`", + "docsTags": [], "values": [ { "type": "string" @@ -4635,35 +4294,148 @@ ], "optional": false, "required": false + } + ], + "methods": [ + { + "name": "getDateRange", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + }, + "DateRangeChangeEvent": { + "location": "local", + "path": "src/components/date-dropdown/date-dropdown.tsx", + "id": "src/components/date-dropdown/date-dropdown.tsx::DateRangeChangeEvent" + } + }, + "return": "Promise" + }, + "signature": "getDateRange() => Promise", + "parameters": [], + "docs": "Retrieves the currently selected date range from the component.\nThis method returns the selected date range as a `DateChangeEvent` object.", + "docsTags": [] + } + ], + "events": [ + { + "event": "dateRangeChange", + "detail": "{ id: string; from: string; to: string; }", + "bubbles": true, + "complexType": { + "original": "DateRangeChangeEvent", + "resolved": "{ id: string; from: string; to: string; }", + "references": { + "DateRangeChangeEvent": { + "location": "local", + "path": "src/components/date-dropdown/date-dropdown.tsx", + "id": "src/components/date-dropdown/date-dropdown.tsx::DateRangeChangeEvent" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "EventEmitter for date range change events.\n\nThis event is emitted when the date range changes within the component.\nThe event payload contains information about the selected date range.", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/date-input", + "filePath": "src/components/date-input/date-input.tsx", + "fileName": "date-input.tsx", + "readmePath": "src/components/date-input/readme.md", + "usagesDir": "src/components/date-input/usage", + "tag": "ix-date-input", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "2.6.0" }, { - "name": "time", - "type": "string", + "name": "form-ready", + "text": "2.6.0" + } + ], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [ + "ix-icon-button", + "ix-field-wrapper", + "ix-dropdown", + "ix-date-picker" + ], + "dependencyGraph": { + "ix-date-input": [ + "ix-icon-button", + "ix-field-wrapper", + "ix-dropdown", + "ix-date-picker" + ], + "ix-icon-button": [ + "ix-spinner" + ], + "ix-field-wrapper": [ + "ix-field-label", + "ix-tooltip", + "ix-typography" + ], + "ix-field-label": [ + "ix-typography" + ], + "ix-tooltip": [ + "ix-typography" + ], + "ix-date-picker": [ + "ix-date-time-card", + "ix-icon-button", + "ix-button", + "ix-dropdown" + ], + "ix-button": [ + "ix-spinner" + ] + }, + "props": [ + { + "name": "disabled", + "type": "boolean", "complexType": { - "original": "string", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "time", + "attr": "disabled", "reflectToAttr": false, - "docs": "Select time with format string", - "docsTags": [ - { - "name": "since", - "text": "1.1.0" - } - ], + "docs": "disabled attribute", + "docsTags": [], + "default": "false", "values": [ { - "type": "string" + "type": "boolean" } ], "optional": false, "required": false }, { - "name": "timeFormat", + "name": "format", "type": "string", "complexType": { "original": "string", @@ -4671,16 +4443,11 @@ "references": {} }, "mutable": false, - "attr": "time-format", + "attr": "format", "reflectToAttr": false, - "docs": "Time format string.\nSee {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.", - "docsTags": [ - { - "name": "since", - "text": "1.1.0" - } - ], - "default": "'HH:mm:ss'", + "docs": "Date format string.\nSee {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.", + "docsTags": [], + "default": "'yyyy/LL/dd'", "values": [ { "type": "string" @@ -4690,49 +4457,40 @@ "required": false }, { - "name": "timeReference", - "type": "\"AM\" | \"PM\"", + "name": "helperText", + "type": "string", "complexType": { - "original": "'AM' | 'PM'", - "resolved": "\"AM\" | \"PM\"", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "time-reference", + "attr": "helper-text", "reflectToAttr": false, - "docs": "Set time reference", + "docs": "helper text below the input field", "docsTags": [], "values": [ { - "value": "AM", - "type": "string" - }, - { - "value": "PM", "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "to", + "name": "i18nErrorDateUnparsable", "type": "string", "complexType": { - "original": "string | undefined", + "original": "string", "resolved": "string", "references": {} }, "mutable": false, - "attr": "to", + "attr": "i18n-error-date-unparsable", "reflectToAttr": false, - "docs": "The selected end date. If the the picker is not in range mode this property has no impact.\nFormat has to match the `format` property.", - "docsTags": [ - { - "name": "since", - "text": "1.1.0" - } - ], + "docs": "i18n string for the error message when the date is not parsable", + "docsTags": [], + "default": "'Date is not valid'", "values": [ { "type": "string" @@ -4742,195 +4500,112 @@ "required": false }, { - "name": "weekStartIndex", - "type": "number", + "name": "infoText", + "type": "string", "complexType": { - "original": "number", - "resolved": "number", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "week-start-index", + "attr": "info-text", "reflectToAttr": false, - "docs": "The index of which day to start the week on, based on the Locale#weekdays array.\nE.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.", - "docsTags": [ - { - "name": "since", - "text": "2.1.0" - } - ], - "default": "0", + "docs": "info text below the input field", + "docsTags": [], "values": [ { - "type": "number" + "type": "string" } ], - "optional": false, + "optional": true, "required": false - } - ], - "methods": [], - "events": [ + }, { - "event": "dateChange", - "detail": "string | { from: string; to: string; }", - "bubbles": true, + "name": "invalidText", + "type": "string", "complexType": { - "original": "DateTimeDateChangeEvent", - "resolved": "string | { from: string; to: string; }", - "references": { - "DateTimeDateChangeEvent": { - "location": "local", - "path": "src/components/datetime-picker/datetime-picker.tsx", - "id": "src/components/datetime-picker/datetime-picker.tsx::DateTimeDateChangeEvent" - } - } + "original": "string", + "resolved": "string", + "references": {} }, - "cancelable": true, - "composed": true, - "docs": "Date change", - "docsTags": [ + "mutable": false, + "attr": "invalid-text", + "reflectToAttr": true, + "docs": "error text below the input field", + "docsTags": [], + "values": [ { - "name": "since", - "text": "1.1.0" + "type": "string" } - ] + ], + "optional": true, + "required": false }, { - "event": "dateSelect", - "detail": "{ from: string; to: string; time: string; }", - "bubbles": true, + "name": "label", + "type": "string", "complexType": { - "original": "DateTimeSelectEvent", - "resolved": "{ from: string; to: string; time: string; }", - "references": { - "DateTimeSelectEvent": { - "location": "local", - "path": "src/components/datetime-picker/datetime-picker.tsx", - "id": "src/components/datetime-picker/datetime-picker.tsx::DateTimeSelectEvent" - } - } + "original": "string", + "resolved": "string", + "references": {} }, - "cancelable": true, - "composed": true, - "docs": "Datetime selection event is fired after confirm button is pressed", - "docsTags": [ + "mutable": false, + "attr": "label", + "reflectToAttr": false, + "docs": "label of the input field", + "docsTags": [], + "values": [ { - "name": "since", - "text": "1.1.0" + "type": "string" } - ] + ], + "optional": true, + "required": false }, { - "event": "done", - "detail": "string", - "bubbles": true, + "name": "name", + "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, - "cancelable": true, - "composed": true, - "docs": "Done event\n\nSet `doneEventDelimiter` to null or undefine to get the typed event", - "docsTags": [ + "mutable": false, + "attr": "name", + "reflectToAttr": true, + "docs": "name of the input element", + "docsTags": [], + "values": [ { - "name": "deprecated", - "text": "Use `this.dateChange`" + "type": "string" } ], - "deprecation": "Use `this.dateChange`" + "optional": true, + "required": false }, { - "event": "timeChange", - "detail": "string", - "bubbles": true, + "name": "placeholder", + "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, - "cancelable": true, - "composed": true, - "docs": "Time change", - "docsTags": [ + "mutable": false, + "attr": "placeholder", + "reflectToAttr": true, + "docs": "placeholder of the input element", + "docsTags": [], + "values": [ { - "name": "since", - "text": "1.1.0" + "type": "string" } - ] - } - ], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/divider", - "filePath": "src/components/divider/divider.tsx", - "fileName": "divider.tsx", - "readmePath": "src/components/divider/readme.md", - "usagesDir": "src/components/divider/usage", - "tag": "ix-divider", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [ - { - "name": "since", - "text": "1.4.0" - } - ], - "encapsulation": "shadow", - "dependents": [ - "ix-avatar", - "ix-menu-category" - ], - "dependencies": [], - "dependencyGraph": { - "ix-avatar": [ - "ix-divider" - ], - "ix-menu-category": [ - "ix-divider" - ] - }, - "props": [], - "methods": [], - "events": [], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/drawer", - "filePath": "src/components/drawer/drawer.tsx", - "fileName": "drawer.tsx", - "readmePath": "src/components/drawer/readme.md", - "usagesDir": "src/components/drawer/usage", - "tag": "ix-drawer", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [ - "ix-icon-button" - ], - "dependencyGraph": { - "ix-drawer": [ - "ix-icon-button" - ], - "ix-icon-button": [ - "ix-spinner" - ] - }, - "props": [ + ], + "optional": true, + "required": false + }, { - "name": "closeOnClickOutside", + "name": "readonly", "type": "boolean", "complexType": { "original": "boolean", @@ -4938,11 +4613,11 @@ "references": {} }, "mutable": false, - "attr": "close-on-click-outside", + "attr": "readonly", "reflectToAttr": false, - "docs": "Fired in case of an outside click during drawer showed state", + "docs": "readonly attribute", "docsTags": [], - "default": "true", + "default": "false", "values": [ { "type": "boolean" @@ -4952,7 +4627,7 @@ "required": false }, { - "name": "fullHeight", + "name": "required", "type": "boolean", "complexType": { "original": "boolean", @@ -4960,128 +4635,114 @@ "references": {} }, "mutable": false, - "attr": "full-height", + "attr": "required", "reflectToAttr": false, - "docs": "Render the drawer with maximum height", + "docs": "required attribute", "docsTags": [], - "default": "false", "values": [ { "type": "boolean" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "maxWidth", - "type": "number", + "name": "showTextAsTooltip", + "type": "boolean", "complexType": { - "original": "number", - "resolved": "number", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "max-width", + "attr": "show-text-as-tooltip", "reflectToAttr": false, - "docs": "Max width interpreted as REM", + "docs": "show text as tooltip", "docsTags": [], - "default": "28", "values": [ { - "type": "number" + "type": "boolean" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "minWidth", - "type": "number", + "name": "validText", + "type": "string", "complexType": { - "original": "number", - "resolved": "number", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "min-width", + "attr": "valid-text", "reflectToAttr": false, - "docs": "Min width interpreted as REM", + "docs": "valid text below the input field", "docsTags": [], - "default": "16", "values": [ { - "type": "number" + "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "show", - "type": "boolean", + "name": "value", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": true, - "attr": "show", - "reflectToAttr": false, - "docs": "Show or hide the drawer", + "attr": "value", + "reflectToAttr": true, + "docs": "value of the input element", "docsTags": [], - "default": "false", + "default": "''", "values": [ { - "type": "boolean" + "type": "string" } ], "optional": false, "required": false }, { - "name": "width", - "type": "\"auto\" | number", + "name": "warningText", + "type": "string", "complexType": { - "original": "number | 'auto'", - "resolved": "\"auto\" | number", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "width", + "attr": "warning-text", "reflectToAttr": false, - "docs": "Width interpreted as REM if not set to 'auto'", + "docs": "warning text below the input field", "docsTags": [], - "default": "this.minWidth", "values": [ { - "value": "auto", "type": "string" - }, - { - "type": "number" } ], - "optional": false, + "optional": true, "required": false } ], "methods": [ { - "name": "toggleDrawer", + "name": "focusInput", "returns": { "type": "Promise", "docs": "" }, "complexType": { - "signature": "(show?: boolean) => Promise", - "parameters": [ - { - "name": "show", - "type": "boolean", - "docs": "Overwrite toggle state with boolean" - } - ], + "signature": "() => Promise", + "parameters": [], "references": { "Promise": { "location": "global", @@ -5090,50 +4751,71 @@ }, "return": "Promise" }, - "signature": "toggleDrawer(show?: boolean) => Promise", - "parameters": [ - { - "name": "show", - "type": "boolean", - "docs": "Overwrite toggle state with boolean" - } - ], - "docs": "Toggle or define show state of drawer", - "docsTags": [ - { - "name": "param", - "text": "show Overwrite toggle state with boolean" - } - ] + "signature": "focusInput() => Promise", + "parameters": [], + "docs": "Focuses the input field", + "docsTags": [] + }, + { + "name": "getNativeInputElement", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + }, + "HTMLInputElement": { + "location": "global", + "id": "global::HTMLInputElement" + } + }, + "return": "Promise" + }, + "signature": "getNativeInputElement() => Promise", + "parameters": [], + "docs": "Get the native input element", + "docsTags": [] } ], "events": [ { - "event": "drawerClose", - "detail": "any", + "event": "validityStateChange", + "detail": "{ patternMismatch: boolean; invalidReason?: string; }", "bubbles": true, "complexType": { - "original": "any", - "resolved": "any", - "references": {} + "original": "DateInputValidityState", + "resolved": "{ patternMismatch: boolean; invalidReason?: string; }", + "references": { + "DateInputValidityState": { + "location": "local", + "path": "src/components/date-input/date-input.tsx", + "id": "src/components/date-input/date-input.tsx::DateInputValidityState" + } + } }, "cancelable": true, "composed": true, - "docs": "Fire event after drawer is close", + "docs": "Validation state change event.", "docsTags": [] }, { - "event": "open", - "detail": "any", + "event": "valueChange", + "detail": "string", "bubbles": true, "complexType": { - "original": "any", - "resolved": "any", + "original": "string", + "resolved": "string", "references": {} }, - "cancelable": true, + "cancelable": false, "composed": true, - "docs": "Fire event after drawer is open", + "docs": "Input change event.", "docsTags": [] } ], @@ -5143,90 +4825,87 @@ "listeners": [] }, { - "dirPath": "src/components/dropdown", - "filePath": "src/components/dropdown/dropdown.tsx", - "fileName": "dropdown.tsx", - "readmePath": "src/components/dropdown/readme.md", - "usagesDir": "src/components/dropdown/usage", - "tag": "ix-dropdown", + "dirPath": "src/components/date-picker", + "filePath": "src/components/date-picker/date-picker.tsx", + "fileName": "date-picker.tsx", + "readmePath": "src/components/date-picker/readme.md", + "usagesDir": "src/components/date-picker/usage", + "tag": "ix-date-picker", "overview": "", "usage": {}, "docs": "", "docsTags": [], "encapsulation": "shadow", "dependents": [ - "ix-application-header", - "ix-avatar", - "ix-breadcrumb", - "ix-category-filter", "ix-date-dropdown", - "ix-date-picker", - "ix-dropdown-button", - "ix-menu-avatar", - "ix-menu-category", - "ix-select", - "ix-split-button" + "ix-date-input", + "ix-datetime-picker" + ], + "dependencies": [ + "ix-date-time-card", + "ix-icon-button", + "ix-button", + "ix-dropdown" ], - "dependencies": [], "dependencyGraph": { - "ix-application-header": [ - "ix-dropdown" - ], - "ix-avatar": [ - "ix-dropdown" - ], - "ix-breadcrumb": [ - "ix-dropdown" - ], - "ix-category-filter": [ - "ix-dropdown" - ], - "ix-date-dropdown": [ - "ix-dropdown" - ], "ix-date-picker": [ + "ix-date-time-card", + "ix-icon-button", + "ix-button", "ix-dropdown" ], - "ix-dropdown-button": [ - "ix-dropdown" + "ix-icon-button": [ + "ix-spinner" ], - "ix-menu-avatar": [ - "ix-dropdown" + "ix-button": [ + "ix-spinner" ], - "ix-menu-category": [ - "ix-dropdown" + "ix-date-dropdown": [ + "ix-date-picker" ], - "ix-select": [ - "ix-dropdown" + "ix-date-input": [ + "ix-date-picker" ], - "ix-split-button": [ - "ix-dropdown" + "ix-datetime-picker": [ + "ix-date-picker" ] }, "props": [ { - "name": "anchor", - "type": "HTMLElement | string", + "name": "corners", + "type": "\"left\" | \"right\" | \"rounded\" | \"straight\"", "complexType": { - "original": "string | HTMLElement", - "resolved": "HTMLElement | string", + "original": "DateTimeCardCorners", + "resolved": "\"left\" | \"right\" | \"rounded\" | \"straight\"", "references": { - "HTMLElement": { - "location": "global", - "id": "global::HTMLElement" + "DateTimeCardCorners": { + "location": "import", + "path": "../date-time-card/date-time-card", + "id": "src/components/date-time-card/date-time-card.tsx::DateTimeCardCorners" } } }, "mutable": false, - "attr": "anchor", + "attr": "corners", "reflectToAttr": false, - "docs": "Define an anchor element", + "docs": "Corner style", "docsTags": [], + "default": "'rounded'", "values": [ { - "type": "HTMLElement" + "value": "left", + "type": "string" + }, + { + "value": "right", + "type": "string" }, { + "value": "rounded", + "type": "string" + }, + { + "value": "straight", "type": "string" } ], @@ -5234,47 +4913,39 @@ "required": false }, { - "name": "closeBehavior", - "type": "\"both\" | \"inside\" | \"outside\" | boolean", + "name": "eventDelimiter", + "type": "string", "complexType": { - "original": "CloseBehavior", - "resolved": "\"both\" | \"inside\" | \"outside\" | boolean", - "references": { - "CloseBehavior": { - "location": "import", - "path": "dropdown-controller", - "id": "src/components/dropdown/dropdown-controller.ts::CloseBehavior" - } - } + "original": "string", + "resolved": "string", + "references": {} }, "mutable": false, - "attr": "close-behavior", + "attr": "event-delimiter", "reflectToAttr": false, - "docs": "Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\nIf the dropdown is a child of another one, it will be closed with the parent, regardless of its own close behavior.", - "docsTags": [], - "default": "'both'", - "values": [ + "docs": "Default behavior of the done event is to join the two events (date and time) into one combined string output.\nThis combination can be configured over the delimiter", + "docsTags": [ { - "value": "both", - "type": "string" + "name": "since", + "text": "1.1.0" }, { - "value": "inside", - "type": "string" - }, + "name": "deprecated", + "text": "Not used anymore see `this.dateChange`" + } + ], + "default": "' - '", + "deprecation": "Not used anymore see `this.dateChange`", + "values": [ { - "value": "outside", "type": "string" - }, - { - "type": "boolean" } ], "optional": false, "required": false }, { - "name": "header", + "name": "format", "type": "string", "complexType": { "original": "string", @@ -5282,69 +4953,121 @@ "references": {} }, "mutable": false, - "attr": "header", + "attr": "format", "reflectToAttr": false, - "docs": "An optional header shown at the top of the dropdown", + "docs": "Date format string.\nSee {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.", "docsTags": [], + "default": "'yyyy/LL/dd'", "values": [ { "type": "string" } ], - "optional": true, + "optional": false, "required": false }, { - "name": "placement", - "type": "\"bottom-end\" | \"bottom-start\" | \"left-end\" | \"left-start\" | \"right-end\" | \"right-start\" | \"top-end\" | \"top-start\"", + "name": "from", + "type": "string", "complexType": { - "original": "AlignedPlacement", - "resolved": "\"bottom-end\" | \"bottom-start\" | \"left-end\" | \"left-start\" | \"right-end\" | \"right-start\" | \"top-end\" | \"top-start\"", - "references": { - "AlignedPlacement": { - "location": "import", - "path": "placement", - "id": "src/components/dropdown/placement.ts::AlignedPlacement" - } - } + "original": "string | undefined", + "resolved": "string", + "references": {} }, "mutable": false, - "attr": "placement", + "attr": "from", "reflectToAttr": false, - "docs": "Placement of the dropdown", - "docsTags": [], - "default": "'bottom-start'", - "values": [ + "docs": "The selected starting date. If the date-picker-rework is not in range mode this is the selected date.\nFormat has to match the `format` property.", + "docsTags": [ { - "value": "bottom-end", - "type": "string" - }, + "name": "since", + "text": "1.1.0" + } + ], + "values": [ { - "value": "bottom-start", "type": "string" - }, + } + ], + "optional": false, + "required": false + }, + { + "name": "i18nDone", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "i18n-done", + "reflectToAttr": false, + "docs": "Text of date select button", + "docsTags": [ { - "value": "left-end", - "type": "string" - }, + "name": "since", + "text": "2.1.0" + } + ], + "default": "'Done'", + "values": [ { - "value": "left-start", "type": "string" - }, + } + ], + "optional": false, + "required": false + }, + { + "name": "individual", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "individual", + "reflectToAttr": false, + "docs": "", + "docsTags": [ { - "value": "right-end", - "type": "string" - }, + "name": "deprecated", + "text": "Not supported since 2.0.0." + } + ], + "default": "true", + "deprecation": "Not supported since 2.0.0.", + "values": [ { - "value": "right-start", - "type": "string" - }, + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "locale", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "locale", + "reflectToAttr": false, + "docs": "Format of time string\nSee {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.", + "docsTags": [ { - "value": "top-end", - "type": "string" - }, + "name": "since", + "text": "2.1.0" + } + ], + "default": "undefined", + "values": [ { - "value": "top-start", "type": "string" } ], @@ -5352,26 +5075,51 @@ "required": false }, { - "name": "positioningStrategy", - "type": "\"absolute\" | \"fixed\"", + "name": "maxDate", + "type": "string", "complexType": { - "original": "'absolute' | 'fixed'", - "resolved": "\"absolute\" | \"fixed\"", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "positioning-strategy", + "attr": "max-date", "reflectToAttr": false, - "docs": "Position strategy", - "docsTags": [], - "default": "'fixed'", + "docs": "The latest date that can be selected by the date picker.\nIf not set there will be no restriction.", + "docsTags": [ + { + "name": "since", + "text": "1.1.0" + } + ], "values": [ { - "value": "absolute", "type": "string" - }, + } + ], + "optional": false, + "required": false + }, + { + "name": "minDate", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "min-date", + "reflectToAttr": false, + "docs": "The earliest date that can be selected by the date picker.\nIf not set there will be no restriction.", + "docsTags": [ + { + "name": "since", + "text": "1.1.0" + } + ], + "values": [ { - "value": "fixed", "type": "string" } ], @@ -5379,19 +5127,19 @@ "required": false }, { - "name": "show", + "name": "range", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, - "mutable": true, - "attr": "show", - "reflectToAttr": true, - "docs": "Show dropdown", + "mutable": false, + "attr": "range", + "reflectToAttr": false, + "docs": "If true a date-range can be selected (from/to).", "docsTags": [], - "default": "false", + "default": "true", "values": [ { "type": "boolean" @@ -5401,63 +5149,84 @@ "required": false }, { - "name": "suppressAutomaticPlacement", - "type": "boolean", + "name": "textSelectDate", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "suppress-automatic-placement", + "attr": "text-select-date", "reflectToAttr": false, - "docs": "Suppress the automatic placement of the dropdown.", + "docs": "Text of the button that confirms date selection.", "docsTags": [ { "name": "since", - "text": "2.0.0" + "text": "1.1.0" + }, + { + "name": "deprecated", + "text": "since 2.1.0. Use `i18nDone`" } ], - "default": "false", + "deprecation": "since 2.1.0. Use `i18nDone`", "values": [ { - "type": "boolean" + "type": "string" } ], "optional": false, "required": false }, { - "name": "trigger", - "type": "HTMLElement | Promise | string", + "name": "to", + "type": "string", "complexType": { - "original": "string | HTMLElement | Promise", - "resolved": "HTMLElement | Promise | string", - "references": { - "HTMLElement": { - "location": "global", - "id": "global::HTMLElement" - }, - "Promise": { - "location": "global", - "id": "global::Promise" - } - } + "original": "string | undefined", + "resolved": "string", + "references": {} }, "mutable": false, - "attr": "trigger", + "attr": "to", "reflectToAttr": false, - "docs": "Define an element that triggers the dropdown.\nA trigger can either be a string that will be interpreted as id attribute or a DOM element.", - "docsTags": [], + "docs": "The selected end date. If the the date-picker-rework is not in range mode this property has no impact.\nFormat has to match the `format` property.", + "docsTags": [ + { + "name": "since", + "text": "1.1.0" + } + ], "values": [ { - "type": "HTMLElement" - }, + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "weekStartIndex", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": false, + "attr": "week-start-index", + "reflectToAttr": false, + "docs": "The index of which day to start the week on, based on the Locale#weekdays array.\nE.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.", + "docsTags": [ { - "type": "Promise" - }, + "name": "since", + "text": "2.1.0" + } + ], + "default": "0", + "values": [ { - "type": "string" + "type": "number" } ], "optional": false, @@ -5466,13 +5235,13 @@ ], "methods": [ { - "name": "updatePosition", + "name": "getCurrentDate", "returns": { - "type": "Promise", + "type": "Promise<{ from: string; to: string; }>", "docs": "" }, "complexType": { - "signature": "() => Promise", + "signature": "() => Promise<{ from: string; to: string; }>", "parameters": [], "references": { "Promise": { @@ -5480,164 +5249,253 @@ "id": "global::Promise" } }, - "return": "Promise" + "return": "Promise<{ from: string; to: string; }>" }, - "signature": "updatePosition() => Promise", + "signature": "getCurrentDate() => Promise<{ from: string; to: string; }>", "parameters": [], - "docs": "Update position of dropdown", + "docs": "Get the currently selected date-range.", "docsTags": [] } ], "events": [ { - "event": "showChanged", - "detail": "boolean", - "bubbles": true, + "event": "dateChange", + "detail": "{ from: string; to: string; }", + "bubbles": true, "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "DateChangeEvent", + "resolved": "{ from: string; to: string; }", + "references": { + "DateChangeEvent": { + "location": "local", + "path": "src/components/date-picker/date-picker.tsx", + "id": "src/components/date-picker/date-picker.tsx::DateChangeEvent" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Triggers if the date selection changes.\nNote: Since 2.0.0 `dateChange` does not dispatch detail property as `string`", + "docsTags": [ + { + "name": "since", + "text": "2.1.0" + } + ] + }, + { + "event": "dateRangeChange", + "detail": "{ from: string; to: string; }", + "bubbles": true, + "complexType": { + "original": "DateChangeEvent", + "resolved": "{ from: string; to: string; }", + "references": { + "DateChangeEvent": { + "location": "local", + "path": "src/components/date-picker/date-picker.tsx", + "id": "src/components/date-picker/date-picker.tsx::DateChangeEvent" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Triggers if the date selection changes.\nOnly triggered if date-picker-rework is in range mode.", + "docsTags": [ + { + "name": "since", + "text": "2.1.0" + } + ] + }, + { + "event": "dateSelect", + "detail": "{ from: string; to: string; }", + "bubbles": true, + "complexType": { + "original": "DateChangeEvent", + "resolved": "{ from: string; to: string; }", + "references": { + "DateChangeEvent": { + "location": "local", + "path": "src/components/date-picker/date-picker.tsx", + "id": "src/components/date-picker/date-picker.tsx::DateChangeEvent" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Date selection confirmed via button action", + "docsTags": [ + { + "name": "since", + "text": "1.1.0" + } + ] + }, + { + "event": "done", + "detail": "string", + "bubbles": true, + "complexType": { + "original": "string", + "resolved": "string", "references": {} }, "cancelable": true, "composed": true, - "docs": "Fire event after visibility of dropdown has changed", - "docsTags": [] + "docs": "Date selection confirmed via button action", + "docsTags": [ + { + "name": "deprecated", + "text": "NOT getting dispatched after 2.0.0. Use `dateSelect`." + } + ], + "deprecation": "NOT getting dispatched after 2.0.0. Use `dateSelect`." } ], "styles": [], "slots": [], "parts": [], - "listeners": [ - { - "event": "ix-assign-sub-menu", - "capture": false, - "passive": false - } - ] + "listeners": [] }, { - "dirPath": "src/components/dropdown-button", - "filePath": "src/components/dropdown-button/dropdown-button.tsx", - "fileName": "dropdown-button.tsx", - "readmePath": "src/components/dropdown-button/readme.md", - "usagesDir": "src/components/dropdown-button/usage", - "tag": "ix-dropdown-button", - "readme": "# ix-dropdown-button\n\n\n", + "dirPath": "src/components/datetime-picker", + "filePath": "src/components/datetime-picker/datetime-picker.tsx", + "fileName": "datetime-picker.tsx", + "readmePath": "src/components/datetime-picker/readme.md", + "usagesDir": "src/components/datetime-picker/usage", + "tag": "ix-datetime-picker", "overview": "", "usage": {}, "docs": "", - "docsTags": [ - { - "name": "since", - "text": "1.3.0" - } - ], + "docsTags": [], "encapsulation": "shadow", "dependents": [], "dependencies": [ - "ix-button", - "ix-icon-button", - "ix-dropdown" + "ix-layout-grid", + "ix-row", + "ix-col", + "ix-date-picker", + "ix-time-picker", + "ix-button" ], "dependencyGraph": { - "ix-dropdown-button": [ - "ix-button", + "ix-datetime-picker": [ + "ix-layout-grid", + "ix-row", + "ix-col", + "ix-date-picker", + "ix-time-picker", + "ix-button" + ], + "ix-date-picker": [ + "ix-date-time-card", "ix-icon-button", + "ix-button", "ix-dropdown" ], - "ix-button": [ + "ix-icon-button": [ "ix-spinner" ], - "ix-icon-button": [ + "ix-button": [ "ix-spinner" + ], + "ix-time-picker": [ + "ix-date-time-card", + "ix-typography", + "ix-icon-button", + "ix-button" ] }, "props": [ { - "name": "closeBehavior", - "type": "\"both\" | \"inside\" | \"outside\" | boolean", + "name": "dateFormat", + "type": "string", "complexType": { - "original": "'inside' | 'outside' | 'both' | boolean", - "resolved": "\"both\" | \"inside\" | \"outside\" | boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "close-behavior", + "attr": "date-format", "reflectToAttr": false, - "docs": "Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.", + "docs": "Date format string.\nSee {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.", "docsTags": [ { "name": "since", - "text": "2.1.0" + "text": "1.1.0" } ], - "default": "'both'", + "default": "'yyyy/LL/dd'", "values": [ { - "value": "both", - "type": "string" - }, - { - "value": "inside", - "type": "string" - }, - { - "value": "outside", "type": "string" - }, - { - "type": "boolean" } ], "optional": false, "required": false }, { - "name": "disabled", - "type": "boolean", + "name": "eventDelimiter", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "disabled", + "attr": "event-delimiter", "reflectToAttr": false, - "docs": "Disable button", - "docsTags": [], - "default": "false", + "docs": "Default behavior of the done event is to join the two events (date and time) into one combined string output.\nThis combination can be configured over the delimiter", + "docsTags": [ + { + "name": "since", + "text": "1.1.0" + }, + { + "name": "deprecated", + "text": "Not used anymore see `done` event" + } + ], + "default": "' - '", + "deprecation": "Not used anymore see `done` event", "values": [ { - "type": "boolean" + "type": "string" } ], "optional": false, "required": false }, { - "name": "ghost", - "type": "boolean", + "name": "from", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string | undefined", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "ghost", + "attr": "from", "reflectToAttr": false, - "docs": "Button with no background or outline", - "docsTags": [], - "default": "false", + "docs": "The selected starting date. If the picker is not in range mode this is the selected date.\nFormat has to match the `format` property.", + "docsTags": [ + { + "name": "since", + "text": "1.1.0" + } + ], "values": [ { - "type": "boolean" + "type": "string" } ], "optional": false, "required": false }, { - "name": "icon", + "name": "i18nDone", "type": "string", "complexType": { "original": "string", @@ -5645,10 +5503,16 @@ "references": {} }, "mutable": false, - "attr": "icon", + "attr": "i18n-done", "reflectToAttr": false, - "docs": "Button icon", - "docsTags": [], + "docs": "Text of date select button", + "docsTags": [ + { + "name": "since", + "text": "2.1.0" + } + ], + "default": "'Done'", "values": [ { "type": "string" @@ -5658,7 +5522,7 @@ "required": false }, { - "name": "label", + "name": "locale", "type": "string", "complexType": { "original": "string", @@ -5666,95 +5530,44 @@ "references": {} }, "mutable": false, - "attr": "label", + "attr": "locale", "reflectToAttr": false, - "docs": "Set label", - "docsTags": [], - "values": [ + "docs": "Format of time string\nSee {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.", + "docsTags": [ { - "type": "string" + "name": "since", + "text": "2.1.0" } ], - "optional": false, - "required": false - }, - { - "name": "outline", - "type": "boolean", - "complexType": { - "original": "boolean", - "resolved": "boolean", - "references": {} - }, - "mutable": false, - "attr": "outline", - "reflectToAttr": false, - "docs": "Outline button", - "docsTags": [], - "default": "false", + "default": "undefined", "values": [ { - "type": "boolean" + "type": "string" } ], "optional": false, "required": false }, { - "name": "placement", - "type": "\"bottom-end\" | \"bottom-start\" | \"left-end\" | \"left-start\" | \"right-end\" | \"right-start\" | \"top-end\" | \"top-start\"", + "name": "maxDate", + "type": "string", "complexType": { - "original": "AlignedPlacement", - "resolved": "\"bottom-end\" | \"bottom-start\" | \"left-end\" | \"left-start\" | \"right-end\" | \"right-start\" | \"top-end\" | \"top-start\"", - "references": { - "AlignedPlacement": { - "location": "import", - "path": "../dropdown/placement", - "id": "src/components/dropdown/placement.ts::AlignedPlacement" - } - } + "original": "string", + "resolved": "string", + "references": {} }, "mutable": false, - "attr": "placement", + "attr": "max-date", "reflectToAttr": false, - "docs": "Placement of the dropdown", + "docs": "The latest date that can be selected by the date picker.\nIf not set there will be no restriction.", "docsTags": [ { "name": "since", - "text": "2.0.0" + "text": "1.1.0" } ], "values": [ { - "value": "bottom-end", - "type": "string" - }, - { - "value": "bottom-start", - "type": "string" - }, - { - "value": "left-end", - "type": "string" - }, - { - "value": "left-start", - "type": "string" - }, - { - "value": "right-end", - "type": "string" - }, - { - "value": "right-start", - "type": "string" - }, - { - "value": "top-end", - "type": "string" - }, - { - "value": "top-start", "type": "string" } ], @@ -5762,154 +5575,55 @@ "required": false }, { - "name": "variant", - "type": "\"danger\" | \"primary\" | \"secondary\"", + "name": "minDate", + "type": "string", "complexType": { - "original": "DropdownButtonVariant", - "resolved": "\"danger\" | \"primary\" | \"secondary\"", - "references": { - "DropdownButtonVariant": { - "location": "local", - "path": "src/components/dropdown-button/dropdown-button.tsx", - "id": "src/components/dropdown-button/dropdown-button.tsx::DropdownButtonVariant" - } - } + "original": "string", + "resolved": "string", + "references": {} }, "mutable": false, - "attr": "variant", + "attr": "min-date", "reflectToAttr": false, - "docs": "Button variant", - "docsTags": [], - "default": "'primary'", - "values": [ - { - "value": "danger", - "type": "string" - }, + "docs": "The earliest date that can be selected by the date picker.\nIf not set there will be no restriction.", + "docsTags": [ { - "value": "primary", - "type": "string" - }, + "name": "since", + "text": "1.1.0" + } + ], + "values": [ { - "value": "secondary", "type": "string" } ], "optional": false, "required": false - } - ], - "methods": [], - "events": [], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/dropdown-header", - "filePath": "src/components/dropdown-header/dropdown-header.tsx", - "fileName": "dropdown-header.tsx", - "readmePath": "src/components/dropdown-header/readme.md", - "usagesDir": "src/components/dropdown-header/usage", - "tag": "ix-dropdown-header", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [ - { - "name": "since", - "text": "2.0.0" - } - ], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [ - "ix-typography" - ], - "dependencyGraph": { - "ix-dropdown-header": [ - "ix-typography" - ] - }, - "props": [ + }, { - "name": "label", - "type": "string", + "name": "range", + "type": "boolean", "complexType": { - "original": "string", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "label", + "attr": "range", "reflectToAttr": false, - "docs": "Display name of the header", + "docs": "If true a date-range can be selected (from/to).", "docsTags": [], + "default": "true", "values": [ { - "type": "string" + "type": "boolean" } ], "optional": false, "required": false - } - ], - "methods": [], - "events": [], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/dropdown-item", - "filePath": "src/components/dropdown-item/dropdown-item.tsx", - "fileName": "dropdown-item.tsx", - "readmePath": "src/components/dropdown-item/readme.md", - "usagesDir": "src/components/dropdown-item/usage", - "tag": "ix-dropdown-item", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [], - "encapsulation": "shadow", - "dependents": [ - "ix-breadcrumb", - "ix-date-dropdown", - "ix-menu-avatar-item", - "ix-menu-category", - "ix-select", - "ix-select-item", - "ix-split-button-item" - ], - "dependencies": [], - "dependencyGraph": { - "ix-breadcrumb": [ - "ix-dropdown-item" - ], - "ix-date-dropdown": [ - "ix-dropdown-item" - ], - "ix-menu-avatar-item": [ - "ix-dropdown-item" - ], - "ix-menu-category": [ - "ix-dropdown-item" - ], - "ix-select": [ - "ix-dropdown-item" - ], - "ix-select-item": [ - "ix-dropdown-item" - ], - "ix-split-button-item": [ - "ix-dropdown-item" - ] - }, - "props": [ + }, { - "name": "checked", + "name": "showHour", "type": "boolean", "complexType": { "original": "boolean", @@ -5917,11 +5631,11 @@ "references": {} }, "mutable": false, - "attr": "checked", + "attr": "show-hour", "reflectToAttr": false, - "docs": "Whether the item is checked or not. If true a checkmark will mark the item as checked.", + "docs": "Show hour input", "docsTags": [], - "default": "false", + "default": "true", "values": [ { "type": "boolean" @@ -5931,7 +5645,7 @@ "required": false }, { - "name": "disabled", + "name": "showMinutes", "type": "boolean", "complexType": { "original": "boolean", @@ -5939,11 +5653,11 @@ "references": {} }, "mutable": false, - "attr": "disabled", + "attr": "show-minutes", "reflectToAttr": false, - "docs": "Disable item and remove event listeners", + "docs": "Show minutes input", "docsTags": [], - "default": "false", + "default": "true", "values": [ { "type": "boolean" @@ -5953,7 +5667,7 @@ "required": false }, { - "name": "hover", + "name": "showSeconds", "type": "boolean", "complexType": { "original": "boolean", @@ -5961,11 +5675,11 @@ "references": {} }, "mutable": false, - "attr": "hover", + "attr": "show-seconds", "reflectToAttr": false, - "docs": "Display hover state", + "docs": "Show seconds input", "docsTags": [], - "default": "false", + "default": "true", "values": [ { "type": "boolean" @@ -5975,28 +5689,38 @@ "required": false }, { - "name": "icon", - "type": "string", + "name": "showTimeReference", + "type": "any", "complexType": { - "original": "string", - "resolved": "string", + "original": "any", + "resolved": "any", "references": {} }, "mutable": false, - "attr": "icon", + "attr": "show-time-reference", "reflectToAttr": false, - "docs": "Icon of dropdown item", - "docsTags": [], - "values": [ + "docs": "Show time reference input\nTime reference is default aligned with", + "docsTags": [ { - "type": "string" + "name": "see", + "text": "{ this.timeFormat}" + }, + { + "name": "since", + "text": "1.1.0" } ], - "optional": true, + "default": "undefined", + "values": [ + { + "type": "any" + } + ], + "optional": false, "required": false }, { - "name": "label", + "name": "textSelectDate", "type": "string", "complexType": { "original": "string", @@ -6004,111 +5728,30 @@ "references": {} }, "mutable": false, - "attr": "label", + "attr": "text-select-date", "reflectToAttr": false, - "docs": "Label of dropdown item", - "docsTags": [], + "docs": "Text of date select button", + "docsTags": [ + { + "name": "since", + "text": "1.1.0" + }, + { + "name": "deprecated", + "text": "since 2.1.0. Use `i18nDone`" + } + ], + "deprecation": "since 2.1.0. Use `i18nDone`", "values": [ { "type": "string" } ], - "optional": true, + "optional": false, "required": false - } - ], - "methods": [ - { - "name": "emitItemClick", - "returns": { - "type": "Promise", - "docs": "" - }, - "complexType": { - "signature": "() => Promise", - "parameters": [], - "references": { - "Promise": { - "location": "global", - "id": "global::Promise" - } - }, - "return": "Promise" - }, - "signature": "emitItemClick() => Promise", - "parameters": [], - "docs": "Internal usage only", - "docsTags": [] - } - ], - "events": [], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/dropdown-quick-actions", - "filePath": "src/components/dropdown-quick-actions/dropdown-quick-actions.tsx", - "fileName": "dropdown-quick-actions.tsx", - "readmePath": "src/components/dropdown-quick-actions/readme.md", - "usagesDir": "src/components/dropdown-quick-actions/usage", - "tag": "ix-dropdown-quick-actions", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [ - { - "name": "since", - "text": "1.4.0" - } - ], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [], - "dependencyGraph": {}, - "props": [], - "methods": [], - "events": [], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/empty-state", - "filePath": "src/components/empty-state/empty-state.tsx", - "fileName": "empty-state.tsx", - "readmePath": "src/components/empty-state/readme.md", - "usagesDir": "src/components/empty-state/usage", - "tag": "ix-empty-state", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [ - { - "name": "since", - "text": "1.6.0" - } - ], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [ - "ix-typography", - "ix-button" - ], - "dependencyGraph": { - "ix-empty-state": [ - "ix-typography", - "ix-button" - ], - "ix-button": [ - "ix-spinner" - ] - }, - "props": [ + }, { - "name": "action", + "name": "time", "type": "string", "complexType": { "original": "string", @@ -6116,10 +5759,15 @@ "references": {} }, "mutable": false, - "attr": "action", + "attr": "time", "reflectToAttr": false, - "docs": "Optional empty state action", - "docsTags": [], + "docs": "Select time with format string", + "docsTags": [ + { + "name": "since", + "text": "1.1.0" + } + ], "values": [ { "type": "string" @@ -6129,7 +5777,7 @@ "required": false }, { - "name": "header", + "name": "timeFormat", "type": "string", "complexType": { "original": "string", @@ -6137,33 +5785,44 @@ "references": {} }, "mutable": false, - "attr": "header", + "attr": "time-format", "reflectToAttr": false, - "docs": "Empty state header", - "docsTags": [], + "docs": "Time format string.\nSee {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.", + "docsTags": [ + { + "name": "since", + "text": "1.1.0" + } + ], + "default": "'HH:mm:ss'", "values": [ { "type": "string" } ], "optional": false, - "required": true + "required": false }, { - "name": "icon", - "type": "string", + "name": "timeReference", + "type": "\"AM\" | \"PM\"", "complexType": { - "original": "string", - "resolved": "string", + "original": "'AM' | 'PM'", + "resolved": "\"AM\" | \"PM\"", "references": {} }, "mutable": false, - "attr": "icon", + "attr": "time-reference", "reflectToAttr": false, - "docs": "Optional empty state icon", + "docs": "Set time reference", "docsTags": [], "values": [ { + "value": "AM", + "type": "string" + }, + { + "value": "PM", "type": "string" } ], @@ -6171,36 +5830,25 @@ "required": false }, { - "name": "layout", - "type": "\"compact\" | \"compactBreak\" | \"large\"", + "name": "to", + "type": "string", "complexType": { - "original": "EmptyStateLayout", - "resolved": "\"compact\" | \"compactBreak\" | \"large\"", - "references": { - "EmptyStateLayout": { - "location": "local", - "path": "src/components/empty-state/empty-state.tsx", - "id": "src/components/empty-state/empty-state.tsx::EmptyStateLayout" - } - } + "original": "string | undefined", + "resolved": "string", + "references": {} }, "mutable": false, - "attr": "layout", + "attr": "to", "reflectToAttr": false, - "docs": "Optional empty state layout - one of 'large', 'compact' or 'compactBreak'", - "docsTags": [], - "default": "'large'", - "values": [ - { - "value": "compact", - "type": "string" - }, + "docs": "The selected end date. If the the picker is not in range mode this property has no impact.\nFormat has to match the `format` property.", + "docsTags": [ { - "value": "compactBreak", - "type": "string" - }, + "name": "since", + "text": "1.1.0" + } + ], + "values": [ { - "value": "large", "type": "string" } ], @@ -6208,21 +5856,27 @@ "required": false }, { - "name": "subHeader", - "type": "string", + "name": "weekStartIndex", + "type": "number", "complexType": { - "original": "string", - "resolved": "string", + "original": "number", + "resolved": "number", "references": {} }, "mutable": false, - "attr": "sub-header", + "attr": "week-start-index", "reflectToAttr": false, - "docs": "Optional empty state sub header", - "docsTags": [], + "docs": "The index of which day to start the week on, based on the Locale#weekdays array.\nE.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.", + "docsTags": [ + { + "name": "since", + "text": "2.1.0" + } + ], + "default": "0", "values": [ { - "type": "string" + "type": "number" } ], "optional": false, @@ -6232,43 +5886,165 @@ "methods": [], "events": [ { - "event": "actionClick", - "detail": "void", + "event": "dateChange", + "detail": "string | { from: string; to: string; }", "bubbles": true, "complexType": { - "original": "void", - "resolved": "void", - "references": {} + "original": "DateTimeDateChangeEvent", + "resolved": "string | { from: string; to: string; }", + "references": { + "DateTimeDateChangeEvent": { + "location": "local", + "path": "src/components/datetime-picker/datetime-picker.tsx", + "id": "src/components/datetime-picker/datetime-picker.tsx::DateTimeDateChangeEvent" + } + } }, "cancelable": true, "composed": true, - "docs": "Empty state action click event", - "docsTags": [] - } - ], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] + "docs": "Date change", + "docsTags": [ + { + "name": "since", + "text": "1.1.0" + } + ] + }, + { + "event": "dateSelect", + "detail": "{ from: string; to: string; time: string; }", + "bubbles": true, + "complexType": { + "original": "DateTimeSelectEvent", + "resolved": "{ from: string; to: string; time: string; }", + "references": { + "DateTimeSelectEvent": { + "location": "local", + "path": "src/components/datetime-picker/datetime-picker.tsx", + "id": "src/components/datetime-picker/datetime-picker.tsx::DateTimeSelectEvent" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Datetime selection event is fired after confirm button is pressed", + "docsTags": [ + { + "name": "since", + "text": "1.1.0" + } + ] + }, + { + "event": "done", + "detail": "string", + "bubbles": true, + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Done event\n\nSet `doneEventDelimiter` to null or undefine to get the typed event", + "docsTags": [ + { + "name": "deprecated", + "text": "Use `this.dateChange`" + } + ], + "deprecation": "Use `this.dateChange`" + }, + { + "event": "timeChange", + "detail": "string", + "bubbles": true, + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Time change", + "docsTags": [ + { + "name": "since", + "text": "1.1.0" + } + ] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] }, { - "dirPath": "src/components/event-list", - "filePath": "src/components/event-list/event-list.tsx", - "fileName": "event-list.tsx", - "readmePath": "src/components/event-list/readme.md", - "usagesDir": "src/components/event-list/usage", - "tag": "ix-event-list", + "dirPath": "src/components/divider", + "filePath": "src/components/divider/divider.tsx", + "fileName": "divider.tsx", + "readmePath": "src/components/divider/readme.md", + "usagesDir": "src/components/divider/usage", + "tag": "ix-divider", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "1.4.0" + } + ], + "encapsulation": "shadow", + "dependents": [ + "ix-avatar", + "ix-menu-category" + ], + "dependencies": [], + "dependencyGraph": { + "ix-avatar": [ + "ix-divider" + ], + "ix-menu-category": [ + "ix-divider" + ] + }, + "props": [], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/drawer", + "filePath": "src/components/drawer/drawer.tsx", + "fileName": "drawer.tsx", + "readmePath": "src/components/drawer/readme.md", + "usagesDir": "src/components/drawer/usage", + "tag": "ix-drawer", "overview": "", "usage": {}, "docs": "", "docsTags": [], "encapsulation": "shadow", "dependents": [], - "dependencies": [], - "dependencyGraph": {}, + "dependencies": [ + "ix-icon-button" + ], + "dependencyGraph": { + "ix-drawer": [ + "ix-icon-button" + ], + "ix-icon-button": [ + "ix-spinner" + ] + }, "props": [ { - "name": "animated", + "name": "closeOnClickOutside", "type": "boolean", "complexType": { "original": "boolean", @@ -6276,9 +6052,9 @@ "references": {} }, "mutable": false, - "attr": "animated", + "attr": "close-on-click-outside", "reflectToAttr": false, - "docs": "Animate state change transitions. Defaults to 'true'.", + "docs": "Fired in case of an outside click during drawer showed state", "docsTags": [], "default": "true", "values": [ @@ -6290,7 +6066,7 @@ "required": false }, { - "name": "chevron", + "name": "fullHeight", "type": "boolean", "complexType": { "original": "boolean", @@ -6298,10 +6074,11 @@ "references": {} }, "mutable": false, - "attr": "chevron", + "attr": "full-height", "reflectToAttr": false, - "docs": "Display a chevron icon in list items. Defaults to 'false'", + "docs": "Render the drawer with maximum height", "docsTags": [], + "default": "false", "values": [ { "type": "boolean" @@ -6311,94 +6088,63 @@ "required": false }, { - "name": "compact", - "type": "boolean", + "name": "maxWidth", + "type": "number", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "number", + "resolved": "number", "references": {} }, "mutable": false, - "attr": "compact", + "attr": "max-width", "reflectToAttr": false, - "docs": "Make event-list items more compact", + "docs": "Max width interpreted as REM", "docsTags": [], - "default": "false", + "default": "28", "values": [ { - "type": "boolean" + "type": "number" } ], "optional": false, "required": false }, { - "name": "itemHeight", - "type": "\"L\" | \"S\" | number", + "name": "minWidth", + "type": "number", "complexType": { - "original": "'S' | 'L' | number", - "resolved": "\"L\" | \"S\" | number", + "original": "number", + "resolved": "number", "references": {} }, "mutable": false, - "attr": "item-height", + "attr": "min-width", "reflectToAttr": false, - "docs": "Determines the height of list items.\nThis can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.\nIn case a number is supplied it will get converted to rem internally.\nDefaults to 'S'.", + "docs": "Min width interpreted as REM", "docsTags": [], - "default": "'S'", + "default": "16", "values": [ - { - "value": "L", - "type": "string" - }, - { - "value": "S", - "type": "string" - }, { "type": "number" } ], "optional": false, "required": false - } - ], - "methods": [], - "events": [], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/event-list-item", - "filePath": "src/components/event-list-item/event-list-item.tsx", - "fileName": "event-list-item.tsx", - "readmePath": "src/components/event-list-item/readme.md", - "usagesDir": "src/components/event-list-item/usage", - "tag": "ix-event-list-item", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [], - "dependencyGraph": {}, - "props": [ + }, { - "name": "chevron", + "name": "show", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, - "mutable": false, - "attr": "chevron", + "mutable": true, + "attr": "show", "reflectToAttr": false, - "docs": "Show chevron on right side of the event list item", + "docs": "Show or hide the drawer", "docsTags": [], + "default": "false", "values": [ { "type": "boolean" @@ -6408,109 +6154,90 @@ "required": false }, { - "name": "color", - "type": "string", + "name": "width", + "type": "\"auto\" | number", "complexType": { - "original": "string", - "resolved": "string", + "original": "number | 'auto'", + "resolved": "\"auto\" | number", "references": {} }, "mutable": false, - "attr": "color", + "attr": "width", "reflectToAttr": false, - "docs": "Color of the status indicator.\nYou can find a list of all available colors in our documentation.\nExample values are `--theme-color-alarm` or `color-alarm`", - "docsTags": [ - { - "name": "link", - "text": "https://ix.siemens.io/docs/theming/colors/" - }, - { - "name": "deprecated", - "text": "since 2.1.0 use `item-color`" - } - ], - "deprecation": "since 2.1.0 use `item-color`", + "docs": "Width interpreted as REM if not set to 'auto'", + "docsTags": [], + "default": "this.minWidth", "values": [ { + "value": "auto", "type": "string" + }, + { + "type": "number" } ], "optional": false, "required": false - }, + } + ], + "methods": [ { - "name": "disabled", - "type": "boolean", - "complexType": { - "original": "boolean", - "resolved": "boolean", - "references": {} + "name": "toggleDrawer", + "returns": { + "type": "Promise", + "docs": "" }, - "mutable": false, - "attr": "disabled", - "reflectToAttr": false, - "docs": "Disable event list item", - "docsTags": [], - "values": [ - { - "type": "boolean" - } - ], - "optional": false, - "required": false - }, - { - "name": "itemColor", - "type": "string", "complexType": { - "original": "string", - "resolved": "string", - "references": {} + "signature": "(show?: boolean) => Promise", + "parameters": [ + { + "name": "show", + "type": "boolean", + "docs": "Overwrite toggle state with boolean" + } + ], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" }, - "mutable": false, - "attr": "item-color", - "reflectToAttr": false, - "docs": "Color of the status indicator.\nYou can find a list of all available colors in our documentation.\nExample values are `--theme-color-alarm` or `color-alarm`", - "docsTags": [ + "signature": "toggleDrawer(show?: boolean) => Promise", + "parameters": [ { - "name": "link", - "text": "https://ix.siemens.io/docs/theming/colors/" + "name": "show", + "type": "boolean", + "docs": "Overwrite toggle state with boolean" } ], - "values": [ + "docs": "Toggle or define show state of drawer", + "docsTags": [ { - "type": "string" + "name": "param", + "text": "show Overwrite toggle state with boolean" } - ], - "optional": false, - "required": false - }, + ] + } + ], + "events": [ { - "name": "selected", - "type": "boolean", + "event": "drawerClose", + "detail": "any", + "bubbles": true, "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "any", + "resolved": "any", "references": {} }, - "mutable": false, - "attr": "selected", - "reflectToAttr": false, - "docs": "Show event list item as selected", - "docsTags": [], - "values": [ - { - "type": "boolean" - } - ], - "optional": false, - "required": false - } - ], - "methods": [], - "events": [ + "cancelable": true, + "composed": true, + "docs": "Fire event after drawer is close", + "docsTags": [] + }, { - "event": "itemClick", + "event": "open", "detail": "any", "bubbles": true, "complexType": { @@ -6520,97 +6247,152 @@ }, "cancelable": true, "composed": true, - "docs": "Event list item click", + "docs": "Fire event after drawer is open", "docsTags": [] } ], "styles": [], "slots": [], "parts": [], - "listeners": [ - { - "event": "click", - "capture": false, - "passive": true - } - ] + "listeners": [] }, { - "dirPath": "src/components/expanding-search", - "filePath": "src/components/expanding-search/expanding-search.tsx", - "fileName": "expanding-search.tsx", - "readmePath": "src/components/expanding-search/readme.md", - "usagesDir": "src/components/expanding-search/usage", - "tag": "ix-expanding-search", + "dirPath": "src/components/dropdown", + "filePath": "src/components/dropdown/dropdown.tsx", + "fileName": "dropdown.tsx", + "readmePath": "src/components/dropdown/readme.md", + "usagesDir": "src/components/dropdown/usage", + "tag": "ix-dropdown", "overview": "", "usage": {}, "docs": "", "docsTags": [], "encapsulation": "shadow", - "dependents": [], - "dependencies": [ - "ix-icon-button" + "dependents": [ + "ix-application-header", + "ix-avatar", + "ix-breadcrumb", + "ix-category-filter", + "ix-date-dropdown", + "ix-date-input", + "ix-date-picker", + "ix-dropdown-button", + "ix-menu-avatar", + "ix-menu-category", + "ix-select", + "ix-split-button" ], + "dependencies": [], "dependencyGraph": { - "ix-expanding-search": [ - "ix-icon-button" + "ix-application-header": [ + "ix-dropdown" ], - "ix-icon-button": [ - "ix-spinner" + "ix-avatar": [ + "ix-dropdown" + ], + "ix-breadcrumb": [ + "ix-dropdown" + ], + "ix-category-filter": [ + "ix-dropdown" + ], + "ix-date-dropdown": [ + "ix-dropdown" + ], + "ix-date-input": [ + "ix-dropdown" + ], + "ix-date-picker": [ + "ix-dropdown" + ], + "ix-dropdown-button": [ + "ix-dropdown" + ], + "ix-menu-avatar": [ + "ix-dropdown" + ], + "ix-menu-category": [ + "ix-dropdown" + ], + "ix-select": [ + "ix-dropdown" + ], + "ix-split-button": [ + "ix-dropdown" ] }, "props": [ { - "name": "fullWidth", - "type": "boolean", + "name": "anchor", + "type": "HTMLElement | string", "complexType": { - "original": "boolean", - "resolved": "boolean", - "references": {} + "original": "string | HTMLElement", + "resolved": "HTMLElement | string", + "references": { + "HTMLElement": { + "location": "global", + "id": "global::HTMLElement" + } + } }, "mutable": false, - "attr": "full-width", + "attr": "anchor", "reflectToAttr": false, - "docs": "If true the search field will fill all available horizontal space of it's parent container when expanded.", - "docsTags": [ - { - "name": "since", - "text": "1.6.0" - } - ], - "default": "false", + "docs": "Define an anchor element", + "docsTags": [], "values": [ { - "type": "boolean" + "type": "HTMLElement" + }, + { + "type": "string" } ], "optional": false, "required": false }, { - "name": "icon", - "type": "string", + "name": "closeBehavior", + "type": "\"both\" | \"inside\" | \"outside\" | boolean", "complexType": { - "original": "string", - "resolved": "string", - "references": {} + "original": "CloseBehavior", + "resolved": "\"both\" | \"inside\" | \"outside\" | boolean", + "references": { + "CloseBehavior": { + "location": "import", + "path": "dropdown-controller", + "id": "src/components/dropdown/dropdown-controller.ts::CloseBehavior" + } + } }, "mutable": false, - "attr": "icon", + "attr": "close-behavior", "reflectToAttr": false, - "docs": "Search icon", + "docs": "Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\nIf the dropdown is a child of another one, it will be closed with the parent, regardless of its own close behavior.", "docsTags": [], - "default": "'search'", + "default": "'both'", "values": [ { + "value": "both", + "type": "string" + }, + { + "value": "inside", + "type": "string" + }, + { + "value": "outside", "type": "string" + }, + { + "type": "boolean" } ], "optional": false, "required": false }, { - "name": "placeholder", + "name": "header", "type": "string", "complexType": { "original": "string", @@ -6618,110 +6400,114 @@ "references": {} }, "mutable": false, - "attr": "placeholder", + "attr": "header", "reflectToAttr": false, - "docs": "Placeholder text", + "docs": "An optional header shown at the top of the dropdown", "docsTags": [], - "default": "'Enter text here'", "values": [ { "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "value", - "type": "string", + "name": "placement", + "type": "\"bottom-end\" | \"bottom-start\" | \"left-end\" | \"left-start\" | \"right-end\" | \"right-start\" | \"top-end\" | \"top-start\"", "complexType": { - "original": "string", - "resolved": "string", - "references": {} + "original": "AlignedPlacement", + "resolved": "\"bottom-end\" | \"bottom-start\" | \"left-end\" | \"left-start\" | \"right-end\" | \"right-start\" | \"top-end\" | \"top-start\"", + "references": { + "AlignedPlacement": { + "location": "import", + "path": "placement", + "id": "src/components/dropdown/placement.ts::AlignedPlacement" + } + } }, - "mutable": true, - "attr": "value", + "mutable": false, + "attr": "placement", "reflectToAttr": false, - "docs": "Default value", + "docs": "Placement of the dropdown", "docsTags": [], - "default": "''", + "default": "'bottom-start'", "values": [ { + "value": "bottom-end", + "type": "string" + }, + { + "value": "bottom-start", + "type": "string" + }, + { + "value": "left-end", + "type": "string" + }, + { + "value": "left-start", + "type": "string" + }, + { + "value": "right-end", + "type": "string" + }, + { + "value": "right-start", + "type": "string" + }, + { + "value": "top-end", + "type": "string" + }, + { + "value": "top-start", "type": "string" } ], "optional": false, "required": false - } - ], - "methods": [], - "events": [ + }, { - "event": "valueChange", - "detail": "string", - "bubbles": true, + "name": "positioningStrategy", + "type": "\"absolute\" | \"fixed\"", "complexType": { - "original": "string", - "resolved": "string", + "original": "'absolute' | 'fixed'", + "resolved": "\"absolute\" | \"fixed\"", "references": {} }, - "cancelable": true, - "composed": true, - "docs": "Value changed", - "docsTags": [] - } - ], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/filter-chip", - "filePath": "src/components/filter-chip/filter-chip.tsx", - "fileName": "filter-chip.tsx", - "readmePath": "src/components/filter-chip/readme.md", - "usagesDir": "src/components/filter-chip/usage", - "tag": "ix-filter-chip", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [], - "encapsulation": "shadow", - "dependents": [ - "ix-category-filter", - "ix-select" - ], - "dependencies": [ - "ix-icon-button" - ], - "dependencyGraph": { - "ix-filter-chip": [ - "ix-icon-button" - ], - "ix-icon-button": [ - "ix-spinner" - ], - "ix-category-filter": [ - "ix-filter-chip" - ], - "ix-select": [ - "ix-filter-chip" - ] - }, - "props": [ + "mutable": false, + "attr": "positioning-strategy", + "reflectToAttr": false, + "docs": "Position strategy", + "docsTags": [], + "default": "'fixed'", + "values": [ + { + "value": "absolute", + "type": "string" + }, + { + "value": "fixed", + "type": "string" + } + ], + "optional": false, + "required": false + }, { - "name": "disabled", + "name": "show", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, - "mutable": false, - "attr": "disabled", - "reflectToAttr": false, - "docs": "If true the filter chip will be in disabled state", + "mutable": true, + "attr": "show", + "reflectToAttr": true, + "docs": "Show dropdown", "docsTags": [], "default": "false", "values": [ @@ -6733,7 +6519,7 @@ "required": false }, { - "name": "readonly", + "name": "suppressAutomaticPlacement", "type": "boolean", "complexType": { "original": "boolean", @@ -6741,9 +6527,9 @@ "references": {} }, "mutable": false, - "attr": "readonly", + "attr": "suppress-automatic-placement", "reflectToAttr": false, - "docs": "If true the filter chip will be in readonly mode", + "docs": "Suppress the automatic placement of the dropdown.", "docsTags": [ { "name": "since", @@ -6758,276 +6544,186 @@ ], "optional": false, "required": false + }, + { + "name": "trigger", + "type": "HTMLElement | Promise | string", + "complexType": { + "original": "string | HTMLElement | Promise", + "resolved": "HTMLElement | Promise | string", + "references": { + "HTMLElement": { + "location": "global", + "id": "global::HTMLElement" + }, + "Promise": { + "location": "global", + "id": "global::Promise" + } + } + }, + "mutable": false, + "attr": "trigger", + "reflectToAttr": false, + "docs": "Define an element that triggers the dropdown.\nA trigger can either be a string that will be interpreted as id attribute or a DOM element.", + "docsTags": [], + "values": [ + { + "type": "HTMLElement" + }, + { + "type": "Promise" + }, + { + "type": "string" + } + ], + "optional": false, + "required": false + } + ], + "methods": [ + { + "name": "updatePosition", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "updatePosition() => Promise", + "parameters": [], + "docs": "Update position of dropdown", + "docsTags": [] } ], - "methods": [], "events": [ { - "event": "closeClick", - "detail": "void", + "event": "showChanged", + "detail": "boolean", "bubbles": true, "complexType": { - "original": "void", - "resolved": "void", + "original": "boolean", + "resolved": "boolean", "references": {} }, "cancelable": true, "composed": true, - "docs": "Close clicked", + "docs": "Fire event after visibility of dropdown has changed", "docsTags": [] } ], "styles": [], "slots": [], "parts": [], - "listeners": [] + "listeners": [ + { + "event": "ix-assign-sub-menu", + "capture": false, + "passive": false + } + ] }, { - "dirPath": "src/components/flip-tile", - "filePath": "src/components/flip-tile/flip-tile.tsx", - "fileName": "flip-tile.tsx", - "readmePath": "src/components/flip-tile/readme.md", - "usagesDir": "src/components/flip-tile/usage", - "tag": "ix-flip-tile", + "dirPath": "src/components/dropdown-button", + "filePath": "src/components/dropdown-button/dropdown-button.tsx", + "fileName": "dropdown-button.tsx", + "readmePath": "src/components/dropdown-button/readme.md", + "usagesDir": "src/components/dropdown-button/usage", + "tag": "ix-dropdown-button", + "readme": "# ix-dropdown-button\n\n\n", "overview": "", "usage": {}, "docs": "", - "docsTags": [], + "docsTags": [ + { + "name": "since", + "text": "1.3.0" + } + ], "encapsulation": "shadow", "dependents": [], "dependencies": [ - "ix-icon-button" + "ix-button", + "ix-icon-button", + "ix-dropdown" ], "dependencyGraph": { - "ix-flip-tile": [ - "ix-icon-button" + "ix-dropdown-button": [ + "ix-button", + "ix-icon-button", + "ix-dropdown" ], - "ix-icon-button": [ + "ix-button": [ + "ix-spinner" + ], + "ix-icon-button": [ "ix-spinner" ] }, "props": [ { - "name": "height", - "type": "\"auto\" | number", + "name": "closeBehavior", + "type": "\"both\" | \"inside\" | \"outside\" | boolean", "complexType": { - "original": "number | 'auto'", - "resolved": "\"auto\" | number", + "original": "'inside' | 'outside' | 'both' | boolean", + "resolved": "\"both\" | \"inside\" | \"outside\" | boolean", "references": {} }, "mutable": false, - "attr": "height", + "attr": "close-behavior", "reflectToAttr": false, - "docs": "Height interpreted as REM", + "docs": "Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.", "docsTags": [ { "name": "since", - "text": "1.5.0" + "text": "2.1.0" } ], - "default": "15.125", + "default": "'both'", "values": [ { - "value": "auto", + "value": "both", "type": "string" }, { - "type": "number" - } - ], - "optional": false, - "required": false - }, - { - "name": "state", - "type": "FlipTileState.Alarm | FlipTileState.Info | FlipTileState.None | FlipTileState.Primary | FlipTileState.Warning", - "complexType": { - "original": "FlipTileState", - "resolved": "FlipTileState.Alarm | FlipTileState.Info | FlipTileState.None | FlipTileState.Primary | FlipTileState.Warning", - "references": { - "FlipTileState": { - "location": "import", - "path": "flip-tile-state", - "id": "src/components/flip-tile/flip-tile-state.ts::FlipTileState" - } - } - }, - "mutable": false, - "attr": "state", - "reflectToAttr": false, - "docs": "Variation of the Flip", - "docsTags": [], - "values": [ - { - "type": "FlipTileState.Alarm" - }, - { - "type": "FlipTileState.Info" - }, - { - "type": "FlipTileState.None" - }, - { - "type": "FlipTileState.Primary" + "value": "inside", + "type": "string" }, { - "type": "FlipTileState.Warning" - } - ], - "optional": false, - "required": false - }, - { - "name": "width", - "type": "\"auto\" | number", - "complexType": { - "original": "number | 'auto'", - "resolved": "\"auto\" | number", - "references": {} - }, - "mutable": false, - "attr": "width", - "reflectToAttr": false, - "docs": "Width interpreted as REM", - "docsTags": [ - { - "name": "since", - "text": "1.5.0" - } - ], - "default": "16", - "values": [ - { - "value": "auto", + "value": "outside", "type": "string" }, { - "type": "number" - } - ], - "optional": false, - "required": false - } - ], - "methods": [], - "events": [], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/flip-tile-content", - "filePath": "src/components/flip-tile-content/flip-tile-content.tsx", - "fileName": "flip-tile-content.tsx", - "readmePath": "src/components/flip-tile-content/readme.md", - "usagesDir": "src/components/flip-tile-content/usage", - "tag": "ix-flip-tile-content", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [], - "dependencyGraph": {}, - "props": [], - "methods": [], - "events": [], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/form-field", - "filePath": "src/components/form-field/form-field.tsx", - "fileName": "form-field.tsx", - "readmePath": "src/components/form-field/readme.md", - "usagesDir": "src/components/form-field/usage", - "tag": "ix-form-field", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [], - "dependencyGraph": {}, - "props": [ - { - "name": "label", - "type": "string", - "complexType": { - "original": "string", - "resolved": "string", - "references": {} - }, - "mutable": false, - "attr": "label", - "reflectToAttr": false, - "docs": "Label", - "docsTags": [], - "values": [ - { - "type": "string" + "type": "boolean" } ], "optional": false, "required": false - } - ], - "methods": [], - "events": [], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/group", - "filePath": "src/components/group/group.tsx", - "fileName": "group.tsx", - "readmePath": "src/components/group/readme.md", - "usagesDir": "src/components/group/usage", - "tag": "ix-group", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [ - "ix-group-context-menu", - "ix-group-item" - ], - "dependencyGraph": { - "ix-group": [ - "ix-group-context-menu", - "ix-group-item" - ], - "ix-group-context-menu": [ - "ix-icon-button" - ], - "ix-icon-button": [ - "ix-spinner" - ] - }, - "props": [ + }, { - "name": "collapsed", + "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, - "mutable": true, - "attr": "collapsed", - "reflectToAttr": true, - "docs": "Whether the group is collapsed or expanded. Defaults to true.", + "mutable": false, + "attr": "disabled", + "reflectToAttr": false, + "docs": "Disable button", "docsTags": [], - "default": "true", + "default": "false", "values": [ { "type": "boolean" @@ -7037,7 +6733,7 @@ "required": false }, { - "name": "expandOnHeaderClick", + "name": "ghost", "type": "boolean", "complexType": { "original": "boolean", @@ -7045,9 +6741,9 @@ "references": {} }, "mutable": false, - "attr": "expand-on-header-click", + "attr": "ghost", "reflectToAttr": false, - "docs": "Expand the group if the header is clicked", + "docs": "Button with no background or outline", "docsTags": [], "default": "false", "values": [ @@ -7059,7 +6755,7 @@ "required": false }, { - "name": "header", + "name": "icon", "type": "string", "complexType": { "original": "string", @@ -7067,51 +6763,51 @@ "references": {} }, "mutable": false, - "attr": "header", + "attr": "icon", "reflectToAttr": false, - "docs": "Group header", + "docs": "Button icon", "docsTags": [], "values": [ { "type": "string" } ], - "optional": true, + "optional": false, "required": false }, { - "name": "index", - "type": "number", + "name": "label", + "type": "string", "complexType": { - "original": "number", - "resolved": "number", + "original": "string", + "resolved": "string", "references": {} }, - "mutable": true, - "attr": "index", - "reflectToAttr": true, - "docs": "The index of the selected group entry.\nIf undefined no group item is selected.", + "mutable": false, + "attr": "label", + "reflectToAttr": false, + "docs": "Set label", "docsTags": [], "values": [ { - "type": "number" + "type": "string" } ], - "optional": true, + "optional": false, "required": false }, { - "name": "selected", + "name": "outline", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, - "mutable": true, - "attr": "selected", - "reflectToAttr": true, - "docs": "Whether the group is selected.", + "mutable": false, + "attr": "outline", + "reflectToAttr": false, + "docs": "Outline button", "docsTags": [], "default": "false", "values": [ @@ -7123,43 +6819,98 @@ "required": false }, { - "name": "subHeader", - "type": "string", + "name": "placement", + "type": "\"bottom-end\" | \"bottom-start\" | \"left-end\" | \"left-start\" | \"right-end\" | \"right-start\" | \"top-end\" | \"top-start\"", "complexType": { - "original": "string", - "resolved": "string", - "references": {} + "original": "AlignedPlacement", + "resolved": "\"bottom-end\" | \"bottom-start\" | \"left-end\" | \"left-start\" | \"right-end\" | \"right-start\" | \"top-end\" | \"top-start\"", + "references": { + "AlignedPlacement": { + "location": "import", + "path": "../dropdown/placement", + "id": "src/components/dropdown/placement.ts::AlignedPlacement" + } + } }, "mutable": false, - "attr": "sub-header", + "attr": "placement", "reflectToAttr": false, - "docs": "Group header subtitle", - "docsTags": [], + "docs": "Placement of the dropdown", + "docsTags": [ + { + "name": "since", + "text": "2.0.0" + } + ], "values": [ { + "value": "bottom-end", + "type": "string" + }, + { + "value": "bottom-start", + "type": "string" + }, + { + "value": "left-end", + "type": "string" + }, + { + "value": "left-start", + "type": "string" + }, + { + "value": "right-end", + "type": "string" + }, + { + "value": "right-start", + "type": "string" + }, + { + "value": "top-end", + "type": "string" + }, + { + "value": "top-start", "type": "string" } ], - "optional": true, + "optional": false, "required": false }, { - "name": "suppressHeaderSelection", - "type": "boolean", + "name": "variant", + "type": "\"danger\" | \"primary\" | \"secondary\"", "complexType": { - "original": "boolean", - "resolved": "boolean", - "references": {} + "original": "DropdownButtonVariant", + "resolved": "\"danger\" | \"primary\" | \"secondary\"", + "references": { + "DropdownButtonVariant": { + "location": "local", + "path": "src/components/dropdown-button/dropdown-button.tsx", + "id": "src/components/dropdown-button/dropdown-button.tsx::DropdownButtonVariant" + } + } }, "mutable": false, - "attr": "suppress-header-selection", + "attr": "variant", "reflectToAttr": false, - "docs": "Prevent header from being selectable", + "docs": "Button variant", "docsTags": [], - "default": "false", + "default": "'primary'", "values": [ { - "type": "boolean" + "value": "danger", + "type": "string" + }, + { + "value": "primary", + "type": "string" + }, + { + "value": "secondary", + "type": "string" } ], "optional": false, @@ -7167,91 +6918,61 @@ } ], "methods": [], - "events": [ - { - "event": "collapsedChanged", - "detail": "boolean", - "bubbles": true, - "complexType": { - "original": "boolean", - "resolved": "boolean", - "references": {} - }, - "cancelable": true, - "composed": true, - "docs": "Group collapsed", - "docsTags": [] - }, - { - "event": "selectGroup", - "detail": "boolean", - "bubbles": true, - "complexType": { - "original": "boolean", - "resolved": "boolean", - "references": {} - }, - "cancelable": true, - "composed": true, - "docs": "Emits when whole group gets selected.", - "docsTags": [] - }, - { - "event": "selectItem", - "detail": "number", - "bubbles": true, - "complexType": { - "original": "number", - "resolved": "number", - "references": {} - }, - "cancelable": true, - "composed": true, - "docs": "Emits when group item gets selected.", - "docsTags": [] - } - ], + "events": [], "styles": [], "slots": [], "parts": [], - "listeners": [ - { - "event": "selectedChanged", - "capture": false, - "passive": false - } - ] + "listeners": [] }, { - "dirPath": "src/components/group", - "filePath": "src/components/group/group-context-menu.tsx", - "fileName": "group-context-menu.tsx", - "readmePath": "src/components/group/readme.md", - "usagesDir": "src/components/group/usage", - "tag": "ix-group-context-menu", + "dirPath": "src/components/dropdown-header", + "filePath": "src/components/dropdown-header/dropdown-header.tsx", + "fileName": "dropdown-header.tsx", + "readmePath": "src/components/dropdown-header/readme.md", + "usagesDir": "src/components/dropdown-header/usage", + "tag": "ix-dropdown-header", "overview": "", "usage": {}, "docs": "", - "docsTags": [], - "encapsulation": "shadow", - "dependents": [ - "ix-group" + "docsTags": [ + { + "name": "since", + "text": "2.0.0" + } ], + "encapsulation": "shadow", + "dependents": [], "dependencies": [ - "ix-icon-button" + "ix-typography" ], "dependencyGraph": { - "ix-group-context-menu": [ - "ix-icon-button" - ], - "ix-icon-button": [ - "ix-spinner" - ], - "ix-group": [ - "ix-group-context-menu" + "ix-dropdown-header": [ + "ix-typography" ] }, - "props": [], + "props": [ + { + "name": "label", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "label", + "reflectToAttr": false, + "docs": "Display name of the header", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + } + ], "methods": [], "events": [], "styles": [], @@ -7260,29 +6981,53 @@ "listeners": [] }, { - "dirPath": "src/components/group-item", - "filePath": "src/components/group-item/group-item.tsx", - "fileName": "group-item.tsx", - "readmePath": "src/components/group-item/readme.md", - "usagesDir": "src/components/group-item/usage", - "tag": "ix-group-item", + "dirPath": "src/components/dropdown-item", + "filePath": "src/components/dropdown-item/dropdown-item.tsx", + "fileName": "dropdown-item.tsx", + "readmePath": "src/components/dropdown-item/readme.md", + "usagesDir": "src/components/dropdown-item/usage", + "tag": "ix-dropdown-item", "overview": "", "usage": {}, "docs": "", "docsTags": [], "encapsulation": "shadow", "dependents": [ - "ix-group" + "ix-breadcrumb", + "ix-date-dropdown", + "ix-menu-avatar-item", + "ix-menu-category", + "ix-select", + "ix-select-item", + "ix-split-button-item" ], "dependencies": [], "dependencyGraph": { - "ix-group": [ - "ix-group-item" + "ix-breadcrumb": [ + "ix-dropdown-item" + ], + "ix-date-dropdown": [ + "ix-dropdown-item" + ], + "ix-menu-avatar-item": [ + "ix-dropdown-item" + ], + "ix-menu-category": [ + "ix-dropdown-item" + ], + "ix-select": [ + "ix-dropdown-item" + ], + "ix-select-item": [ + "ix-dropdown-item" + ], + "ix-split-button-item": [ + "ix-dropdown-item" ] }, "props": [ { - "name": "focusable", + "name": "checked", "type": "boolean", "complexType": { "original": "boolean", @@ -7290,11 +7035,11 @@ "references": {} }, "mutable": false, - "attr": "focusable", + "attr": "checked", "reflectToAttr": false, - "docs": "The elements tabindex attribute will get set accordingly.\nIf true tabindex will be 0, -1 otherwise.", + "docs": "Whether the item is checked or not. If true a checkmark will mark the item as checked.", "docsTags": [], - "default": "true", + "default": "false", "values": [ { "type": "boolean" @@ -7304,49 +7049,51 @@ "required": false }, { - "name": "icon", - "type": "string", + "name": "disabled", + "type": "boolean", "complexType": { - "original": "string", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "icon", + "attr": "disabled", "reflectToAttr": false, - "docs": "Group item icon", + "docs": "Disable item and remove event listeners", "docsTags": [], + "default": "false", "values": [ { - "type": "string" + "type": "boolean" } ], - "optional": true, + "optional": false, "required": false }, { - "name": "index", - "type": "number", + "name": "hover", + "type": "boolean", "complexType": { - "original": "number", - "resolved": "number", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "index", + "attr": "hover", "reflectToAttr": false, - "docs": "Index", + "docs": "Display hover state", "docsTags": [], + "default": "false", "values": [ { - "type": "number" + "type": "boolean" } ], - "optional": true, + "optional": false, "required": false }, { - "name": "secondaryText", + "name": "icon", "type": "string", "complexType": { "original": "string", @@ -7354,9 +7101,9 @@ "references": {} }, "mutable": false, - "attr": "secondary-text", + "attr": "icon", "reflectToAttr": false, - "docs": "Group item secondary text", + "docs": "Icon of dropdown item", "docsTags": [], "values": [ { @@ -7367,51 +7114,219 @@ "required": false }, { - "name": "selected", - "type": "boolean", + "name": "label", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "selected", + "attr": "label", "reflectToAttr": false, - "docs": "Show selected state", + "docs": "Label of dropdown item", "docsTags": [], - "default": "false", "values": [ { - "type": "boolean" + "type": "string" + } + ], + "optional": true, + "required": false + } + ], + "methods": [ + { + "name": "emitItemClick", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "emitItemClick() => Promise", + "parameters": [], + "docs": "Internal usage only", + "docsTags": [] + } + ], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/dropdown-quick-actions", + "filePath": "src/components/dropdown-quick-actions/dropdown-quick-actions.tsx", + "fileName": "dropdown-quick-actions.tsx", + "readmePath": "src/components/dropdown-quick-actions/readme.md", + "usagesDir": "src/components/dropdown-quick-actions/usage", + "tag": "ix-dropdown-quick-actions", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "1.4.0" + } + ], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/empty-state", + "filePath": "src/components/empty-state/empty-state.tsx", + "fileName": "empty-state.tsx", + "readmePath": "src/components/empty-state/readme.md", + "usagesDir": "src/components/empty-state/usage", + "tag": "ix-empty-state", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "1.6.0" + } + ], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [ + "ix-typography", + "ix-button" + ], + "dependencyGraph": { + "ix-empty-state": [ + "ix-typography", + "ix-button" + ], + "ix-button": [ + "ix-spinner" + ] + }, + "props": [ + { + "name": "action", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "action", + "reflectToAttr": false, + "docs": "Optional empty state action", + "docsTags": [], + "values": [ + { + "type": "string" } ], "optional": false, "required": false }, { - "name": "suppressSelection", - "type": "boolean", + "name": "header", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "suppress-selection", + "attr": "header", "reflectToAttr": false, - "docs": "Supress the selection of the group", + "docs": "Empty state header", "docsTags": [], - "default": "false", "values": [ { - "type": "boolean" + "type": "string" + } + ], + "optional": false, + "required": true + }, + { + "name": "icon", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "icon", + "reflectToAttr": false, + "docs": "Optional empty state icon", + "docsTags": [], + "values": [ + { + "type": "string" } ], "optional": false, "required": false }, { - "name": "text", + "name": "layout", + "type": "\"compact\" | \"compactBreak\" | \"large\"", + "complexType": { + "original": "EmptyStateLayout", + "resolved": "\"compact\" | \"compactBreak\" | \"large\"", + "references": { + "EmptyStateLayout": { + "location": "local", + "path": "src/components/empty-state/empty-state.tsx", + "id": "src/components/empty-state/empty-state.tsx::EmptyStateLayout" + } + } + }, + "mutable": false, + "attr": "layout", + "reflectToAttr": false, + "docs": "Optional empty state layout - one of 'large', 'compact' or 'compactBreak'", + "docsTags": [], + "default": "'large'", + "values": [ + { + "value": "compact", + "type": "string" + }, + { + "value": "compactBreak", + "type": "string" + }, + { + "value": "large", + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "subHeader", "type": "string", "complexType": { "original": "string", @@ -7419,242 +7334,102 @@ "references": {} }, "mutable": false, - "attr": "text", + "attr": "sub-header", "reflectToAttr": false, - "docs": "Group item text", + "docs": "Optional empty state sub header", "docsTags": [], "values": [ { "type": "string" } ], - "optional": true, + "optional": false, "required": false } ], "methods": [], "events": [ { - "event": "selectedChanged", - "detail": "HTMLIxGroupItemElement", + "event": "actionClick", + "detail": "void", "bubbles": true, "complexType": { - "original": "HTMLIxGroupItemElement", - "resolved": "HTMLIxGroupItemElement", - "references": { - "HTMLIxGroupItemElement": { - "location": "global", - "id": "global::HTMLIxGroupItemElement" - } - } + "original": "void", + "resolved": "void", + "references": {} }, "cancelable": true, "composed": true, - "docs": "Selection changed", + "docs": "Empty state action click event", "docsTags": [] } ], "styles": [], "slots": [], "parts": [], - "listeners": [ - { - "event": "click", - "capture": false, - "passive": true - } - ] + "listeners": [] }, { - "dirPath": "src/components/icon-button", - "filePath": "src/components/icon-button/icon-button.tsx", - "fileName": "icon-button.tsx", - "readmePath": "src/components/icon-button/readme.md", - "usagesDir": "src/components/icon-button/usage", - "tag": "ix-icon-button", + "dirPath": "src/components/event-list", + "filePath": "src/components/event-list/event-list.tsx", + "fileName": "event-list.tsx", + "readmePath": "src/components/event-list/readme.md", + "usagesDir": "src/components/event-list/usage", + "tag": "ix-event-list", "overview": "", "usage": {}, "docs": "", "docsTags": [], "encapsulation": "shadow", - "dependents": [ - "ix-application-header", - "ix-card-list", - "ix-category-filter", - "ix-chip", - "ix-content-header", - "ix-date-picker", - "ix-drawer", - "ix-dropdown-button", - "ix-expanding-search", - "ix-filter-chip", - "ix-flip-tile", - "ix-group-context-menu", - "ix-map-navigation", - "ix-map-navigation-overlay", - "ix-menu", - "ix-menu-about", - "ix-menu-about-news", - "ix-menu-expand-icon", - "ix-menu-settings", - "ix-message-bar", - "ix-modal-example", - "ix-modal-header", - "ix-pagination", - "ix-pane", - "ix-select", - "ix-split-button", - "ix-time-picker", - "ix-toast" - ], - "dependencies": [ - "ix-spinner" - ], - "dependencyGraph": { - "ix-icon-button": [ - "ix-spinner" - ], - "ix-application-header": [ - "ix-icon-button" - ], - "ix-card-list": [ - "ix-icon-button" - ], - "ix-category-filter": [ - "ix-icon-button" - ], - "ix-chip": [ - "ix-icon-button" - ], - "ix-content-header": [ - "ix-icon-button" - ], - "ix-date-picker": [ - "ix-icon-button" - ], - "ix-drawer": [ - "ix-icon-button" - ], - "ix-dropdown-button": [ - "ix-icon-button" - ], - "ix-expanding-search": [ - "ix-icon-button" - ], - "ix-filter-chip": [ - "ix-icon-button" - ], - "ix-flip-tile": [ - "ix-icon-button" - ], - "ix-group-context-menu": [ - "ix-icon-button" - ], - "ix-map-navigation": [ - "ix-icon-button" - ], - "ix-map-navigation-overlay": [ - "ix-icon-button" - ], - "ix-menu": [ - "ix-icon-button" - ], - "ix-menu-about": [ - "ix-icon-button" - ], - "ix-menu-about-news": [ - "ix-icon-button" - ], - "ix-menu-expand-icon": [ - "ix-icon-button" - ], - "ix-menu-settings": [ - "ix-icon-button" - ], - "ix-message-bar": [ - "ix-icon-button" - ], - "ix-modal-example": [ - "ix-icon-button" - ], - "ix-modal-header": [ - "ix-icon-button" - ], - "ix-pagination": [ - "ix-icon-button" - ], - "ix-pane": [ - "ix-icon-button" - ], - "ix-select": [ - "ix-icon-button" - ], - "ix-split-button": [ - "ix-icon-button" - ], - "ix-time-picker": [ - "ix-icon-button" - ], - "ix-toast": [ - "ix-icon-button" - ] - }, + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, "props": [ { - "name": "a11yLabel", - "type": "string", + "name": "animated", + "type": "boolean", "complexType": { - "original": "string", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "a11y-label", + "attr": "animated", "reflectToAttr": false, - "docs": "Accessibility label for the icon button\nWill be set as aria-label on the nested HTML button element", - "docsTags": [ - { - "name": "since", - "text": "2.1.0" - } - ], + "docs": "Animate state change transitions. Defaults to 'true'.", + "docsTags": [], + "default": "true", "values": [ { - "type": "string" + "type": "boolean" } ], "optional": false, "required": false }, { - "name": "color", - "type": "string", + "name": "chevron", + "type": "boolean", "complexType": { - "original": "string", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "color", + "attr": "chevron", "reflectToAttr": false, - "docs": "Color of icon in button", - "docsTags": [ - { - "name": "deprecated", - "text": "since 2.1.0 use `icon-color`" - } - ], - "deprecation": "since 2.1.0 use `icon-color`", + "docs": "Display a chevron icon in list items. Defaults to 'false'", + "docsTags": [], "values": [ { - "type": "string" + "type": "boolean" } ], "optional": false, "required": false }, { - "name": "disabled", + "name": "compact", "type": "boolean", "complexType": { "original": "boolean", @@ -7662,9 +7437,9 @@ "references": {} }, "mutable": false, - "attr": "disabled", + "attr": "compact", "reflectToAttr": false, - "docs": "Disabled", + "docs": "Make event-list items more compact", "docsTags": [], "default": "false", "values": [ @@ -7676,7 +7451,61 @@ "required": false }, { - "name": "ghost", + "name": "itemHeight", + "type": "\"L\" | \"S\" | number", + "complexType": { + "original": "'S' | 'L' | number", + "resolved": "\"L\" | \"S\" | number", + "references": {} + }, + "mutable": false, + "attr": "item-height", + "reflectToAttr": false, + "docs": "Determines the height of list items.\nThis can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.\nIn case a number is supplied it will get converted to rem internally.\nDefaults to 'S'.", + "docsTags": [], + "default": "'S'", + "values": [ + { + "value": "L", + "type": "string" + }, + { + "value": "S", + "type": "string" + }, + { + "type": "number" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/event-list-item", + "filePath": "src/components/event-list-item/event-list-item.tsx", + "fileName": "event-list-item.tsx", + "readmePath": "src/components/event-list-item/readme.md", + "usagesDir": "src/components/event-list-item/usage", + "tag": "ix-event-list-item", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [ + { + "name": "chevron", "type": "boolean", "complexType": { "original": "boolean", @@ -7684,9 +7513,9 @@ "references": {} }, "mutable": false, - "attr": "ghost", + "attr": "chevron", "reflectToAttr": false, - "docs": "Button invisible", + "docs": "Show chevron on right side of the event list item", "docsTags": [], "values": [ { @@ -7697,7 +7526,7 @@ "required": false }, { - "name": "icon", + "name": "color", "type": "string", "complexType": { "original": "string", @@ -7705,10 +7534,20 @@ "references": {} }, "mutable": false, - "attr": "icon", + "attr": "color", "reflectToAttr": false, - "docs": "Icon name", - "docsTags": [], + "docs": "Color of the status indicator.\nYou can find a list of all available colors in our documentation.\nExample values are `--theme-color-alarm` or `color-alarm`", + "docsTags": [ + { + "name": "link", + "text": "https://ix.siemens.io/docs/theming/colors/" + }, + { + "name": "deprecated", + "text": "since 2.1.0 use `item-color`" + } + ], + "deprecation": "since 2.1.0 use `item-color`", "values": [ { "type": "string" @@ -7718,55 +7557,54 @@ "required": false }, { - "name": "iconColor", - "type": "string", + "name": "disabled", + "type": "boolean", "complexType": { - "original": "string", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "icon-color", + "attr": "disabled", "reflectToAttr": false, - "docs": "Color of icon in button", + "docs": "Disable event list item", "docsTags": [], "values": [ { - "type": "string" + "type": "boolean" } ], "optional": false, "required": false }, { - "name": "loading", - "type": "boolean", + "name": "itemColor", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "loading", + "attr": "item-color", "reflectToAttr": false, - "docs": "Loading button", + "docs": "Color of the status indicator.\nYou can find a list of all available colors in our documentation.\nExample values are `--theme-color-alarm` or `color-alarm`", "docsTags": [ { - "name": "since", - "text": "2.0.0" + "name": "link", + "text": "https://ix.siemens.io/docs/theming/colors/" } ], - "default": "false", "values": [ { - "type": "boolean" + "type": "string" } ], "optional": false, "required": false }, { - "name": "outline", + "name": "selected", "type": "boolean", "complexType": { "original": "boolean", @@ -7774,9 +7612,9 @@ "references": {} }, "mutable": false, - "attr": "outline", + "attr": "selected", "reflectToAttr": false, - "docs": "Button outline", + "docs": "Show event list item as selected", "docsTags": [], "values": [ { @@ -7785,9 +7623,63 @@ ], "optional": false, "required": false - }, + } + ], + "methods": [], + "events": [ { - "name": "oval", + "event": "itemClick", + "detail": "any", + "bubbles": true, + "complexType": { + "original": "any", + "resolved": "any", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Event list item click", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [ + { + "event": "click", + "capture": false, + "passive": true + } + ] + }, + { + "dirPath": "src/components/expanding-search", + "filePath": "src/components/expanding-search/expanding-search.tsx", + "fileName": "expanding-search.tsx", + "readmePath": "src/components/expanding-search/readme.md", + "usagesDir": "src/components/expanding-search/usage", + "tag": "ix-expanding-search", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [ + "ix-icon-button" + ], + "dependencyGraph": { + "ix-expanding-search": [ + "ix-icon-button" + ], + "ix-icon-button": [ + "ix-spinner" + ] + }, + "props": [ + { + "name": "fullWidth", "type": "boolean", "complexType": { "original": "boolean", @@ -7795,10 +7687,16 @@ "references": {} }, "mutable": false, - "attr": "oval", + "attr": "full-width", "reflectToAttr": false, - "docs": "Button in oval shape", - "docsTags": [], + "docs": "If true the search field will fill all available horizontal space of it's parent container when expanded.", + "docsTags": [ + { + "name": "since", + "text": "1.6.0" + } + ], + "default": "false", "values": [ { "type": "boolean" @@ -7808,40 +7706,21 @@ "required": false }, { - "name": "size", - "type": "\"12\" | \"16\" | \"24\" | \"32\"", + "name": "icon", + "type": "string", "complexType": { - "original": "'32' | '24' | '16' | '12'", - "resolved": "\"12\" | \"16\" | \"24\" | \"32\"", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "size", + "attr": "icon", "reflectToAttr": false, - "docs": "Size of icon in button", - "docsTags": [ - { - "name": "deprecated", - "text": "Only size 32 will be removed in 3.0.0" - } - ], - "default": "'24'", - "deprecation": "Only size 32 will be removed in 3.0.0", + "docs": "Search icon", + "docsTags": [], + "default": "'search'", "values": [ { - "value": "12", - "type": "string" - }, - { - "value": "16", - "type": "string" - }, - { - "value": "24", - "type": "string" - }, - { - "value": "32", "type": "string" } ], @@ -7849,26 +7728,21 @@ "required": false }, { - "name": "type", - "type": "\"button\" | \"submit\"", + "name": "placeholder", + "type": "string", "complexType": { - "original": "'button' | 'submit'", - "resolved": "\"button\" | \"submit\"", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "type", + "attr": "placeholder", "reflectToAttr": false, - "docs": "Type of the button", + "docs": "Placeholder text", "docsTags": [], - "default": "'button'", + "default": "'Enter text here'", "values": [ { - "value": "button", - "type": "string" - }, - { - "value": "submit", "type": "string" } ], @@ -7876,41 +7750,21 @@ "required": false }, { - "name": "variant", - "type": "\"danger\" | \"primary\" | \"secondary\"", + "name": "value", + "type": "string", "complexType": { - "original": "IconButtonVariant", - "resolved": "\"danger\" | \"primary\" | \"secondary\"", - "references": { - "IconButtonVariant": { - "location": "local", - "path": "src/components/icon-button/icon-button.tsx", - "id": "src/components/icon-button/icon-button.tsx::IconButtonVariant" - } - } + "original": "string", + "resolved": "string", + "references": {} }, - "mutable": false, - "attr": "variant", + "mutable": true, + "attr": "value", "reflectToAttr": false, - "docs": "Variant of button", - "docsTags": [ - { - "name": "since", - "text": "2.3.0 - variant danger" - } - ], - "default": "'secondary'", + "docs": "Default value", + "docsTags": [], + "default": "''", "values": [ { - "value": "danger", - "type": "string" - }, - { - "value": "primary", - "type": "string" - }, - { - "value": "secondary", "type": "string" } ], @@ -7919,106 +7773,140 @@ } ], "methods": [], - "events": [], + "events": [ + { + "event": "valueChange", + "detail": "string", + "bubbles": true, + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Value changed", + "docsTags": [] + } + ], "styles": [], "slots": [], "parts": [], "listeners": [] }, { - "dirPath": "src/components/icon-toggle-button", - "filePath": "src/components/icon-toggle-button/icon-toggle-button.tsx", - "fileName": "icon-toggle-button.tsx", - "readmePath": "src/components/icon-toggle-button/readme.md", - "usagesDir": "src/components/icon-toggle-button/usage", - "tag": "ix-icon-toggle-button", + "dirPath": "src/components/field-label", + "filePath": "src/components/field-label/field-label.tsx", + "fileName": "field-label.tsx", + "readmePath": "src/components/field-label/readme.md", + "usagesDir": "src/components/field-label/usage", + "tag": "ix-field-label", "overview": "", "usage": {}, "docs": "", - "docsTags": [ - { - "name": "since", - "text": "2.0.0" - } - ], + "docsTags": [], "encapsulation": "shadow", - "dependents": [], + "dependents": [ + "ix-field-wrapper" + ], "dependencies": [ - "ix-spinner" + "ix-typography" ], "dependencyGraph": { - "ix-icon-toggle-button": [ - "ix-spinner" + "ix-field-label": [ + "ix-typography" + ], + "ix-field-wrapper": [ + "ix-field-label" ] }, "props": [ { - "name": "disabled", - "type": "boolean", + "name": "htmlFor", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "disabled", + "attr": "html-for", "reflectToAttr": true, - "docs": "Disable the button", + "docs": "The id of the form element that the label is associated with", "docsTags": [], - "default": "false", "values": [ { - "type": "boolean" + "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "ghost", + "name": "required", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, - "mutable": false, - "attr": "ghost", - "reflectToAttr": false, - "docs": "Button with no background or outline", + "mutable": true, + "attr": "required", + "reflectToAttr": true, + "docs": "A value is required or must be checked for the form to be submittable", "docsTags": [], - "default": "false", "values": [ { "type": "boolean" } ], - "optional": false, - "required": false - }, - { - "name": "icon", - "type": "string", - "complexType": { - "original": "string", - "resolved": "string", - "references": {} - }, - "mutable": false, - "attr": "icon", - "reflectToAttr": false, - "docs": "Icon name", - "docsTags": [], - "values": [ - { - "type": "string" - } - ], - "optional": false, + "optional": true, "required": false - }, + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/filter-chip", + "filePath": "src/components/filter-chip/filter-chip.tsx", + "fileName": "filter-chip.tsx", + "readmePath": "src/components/filter-chip/readme.md", + "usagesDir": "src/components/filter-chip/usage", + "tag": "ix-filter-chip", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [ + "ix-category-filter", + "ix-select" + ], + "dependencies": [ + "ix-icon-button" + ], + "dependencyGraph": { + "ix-filter-chip": [ + "ix-icon-button" + ], + "ix-icon-button": [ + "ix-spinner" + ], + "ix-category-filter": [ + "ix-filter-chip" + ], + "ix-select": [ + "ix-filter-chip" + ] + }, + "props": [ { - "name": "loading", + "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", @@ -8026,9 +7914,9 @@ "references": {} }, "mutable": false, - "attr": "loading", + "attr": "disabled", "reflectToAttr": false, - "docs": "Loading button", + "docs": "If true the filter chip will be in disabled state", "docsTags": [], "default": "false", "values": [ @@ -8040,7 +7928,7 @@ "required": false }, { - "name": "outline", + "name": "readonly", "type": "boolean", "complexType": { "original": "boolean", @@ -8048,10 +7936,15 @@ "references": {} }, "mutable": false, - "attr": "outline", + "attr": "readonly", "reflectToAttr": false, - "docs": "Outline button", - "docsTags": [], + "docs": "If true the filter chip will be in readonly mode", + "docsTags": [ + { + "name": "since", + "text": "2.0.0" + } + ], "default": "false", "values": [ { @@ -8060,127 +7953,171 @@ ], "optional": false, "required": false - }, + } + ], + "methods": [], + "events": [ { - "name": "pressed", - "type": "boolean", + "event": "closeClick", + "detail": "void", + "bubbles": true, "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "void", + "resolved": "void", "references": {} }, - "mutable": false, - "attr": "pressed", - "reflectToAttr": false, - "docs": "Show button as pressed", - "docsTags": [], - "default": "false", - "values": [ - { - "type": "boolean" - } - ], - "optional": false, - "required": false - }, + "cancelable": true, + "composed": true, + "docs": "Close clicked", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/flip-tile", + "filePath": "src/components/flip-tile/flip-tile.tsx", + "fileName": "flip-tile.tsx", + "readmePath": "src/components/flip-tile/readme.md", + "usagesDir": "src/components/flip-tile/usage", + "tag": "ix-flip-tile", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [ + "ix-icon-button" + ], + "dependencyGraph": { + "ix-flip-tile": [ + "ix-icon-button" + ], + "ix-icon-button": [ + "ix-spinner" + ] + }, + "props": [ { - "name": "size", - "type": "\"12\" | \"16\" | \"24\"", + "name": "height", + "type": "\"auto\" | number", "complexType": { - "original": "'24' | '16' | '12'", - "resolved": "\"12\" | \"16\" | \"24\"", + "original": "number | 'auto'", + "resolved": "\"auto\" | number", "references": {} }, "mutable": false, - "attr": "size", + "attr": "height", "reflectToAttr": false, - "docs": "Size of icon in button", - "docsTags": [], - "default": "'24'", - "values": [ + "docs": "Height interpreted as REM", + "docsTags": [ { - "value": "12", - "type": "string" - }, + "name": "since", + "text": "1.5.0" + } + ], + "default": "15.125", + "values": [ { - "value": "16", + "value": "auto", "type": "string" }, { - "value": "24", - "type": "string" + "type": "number" } ], "optional": false, "required": false }, { - "name": "variant", - "type": "\"danger\" | \"primary\" | \"secondary\"", + "name": "state", + "type": "FlipTileState.Alarm | FlipTileState.Info | FlipTileState.None | FlipTileState.Primary | FlipTileState.Warning", "complexType": { - "original": "ButtonVariant", - "resolved": "\"danger\" | \"primary\" | \"secondary\"", + "original": "FlipTileState", + "resolved": "FlipTileState.Alarm | FlipTileState.Info | FlipTileState.None | FlipTileState.Primary | FlipTileState.Warning", "references": { - "ButtonVariant": { + "FlipTileState": { "location": "import", - "path": "../button/button", - "id": "src/components/button/button.tsx::ButtonVariant" + "path": "flip-tile-state", + "id": "src/components/flip-tile/flip-tile-state.ts::FlipTileState" } } }, "mutable": false, - "attr": "variant", + "attr": "state", "reflectToAttr": false, - "docs": "Button variant.\nImportant: Variant 'primary' can only be combined with either outline or ghost.", + "docs": "Variation of the Flip", "docsTags": [], - "default": "'secondary'", "values": [ { - "value": "danger", - "type": "string" + "type": "FlipTileState.Alarm" }, { - "value": "primary", - "type": "string" + "type": "FlipTileState.Info" }, { - "value": "secondary", - "type": "string" + "type": "FlipTileState.None" + }, + { + "type": "FlipTileState.Primary" + }, + { + "type": "FlipTileState.Warning" } ], "optional": false, "required": false - } - ], - "methods": [], - "events": [ + }, { - "event": "pressedChange", - "detail": "boolean", - "bubbles": true, + "name": "width", + "type": "\"auto\" | number", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "number | 'auto'", + "resolved": "\"auto\" | number", "references": {} }, - "cancelable": true, - "composed": true, - "docs": "Pressed change event", - "docsTags": [] + "mutable": false, + "attr": "width", + "reflectToAttr": false, + "docs": "Width interpreted as REM", + "docsTags": [ + { + "name": "since", + "text": "1.5.0" + } + ], + "default": "16", + "values": [ + { + "value": "auto", + "type": "string" + }, + { + "type": "number" + } + ], + "optional": false, + "required": false } ], + "methods": [], + "events": [], "styles": [], "slots": [], "parts": [], "listeners": [] }, { - "dirPath": "src/components/input-group", - "filePath": "src/components/input-group/input-group.tsx", - "fileName": "input-group.tsx", - "readmePath": "src/components/input-group/readme.md", - "usagesDir": "src/components/input-group/usage", - "tag": "ix-input-group", + "dirPath": "src/components/flip-tile-content", + "filePath": "src/components/flip-tile-content/flip-tile-content.tsx", + "fileName": "flip-tile-content.tsx", + "readmePath": "src/components/flip-tile-content/readme.md", + "usagesDir": "src/components/flip-tile-content/usage", + "tag": "ix-flip-tile-content", "overview": "", "usage": {}, "docs": "", @@ -8198,173 +8135,135 @@ "listeners": [] }, { - "dirPath": "src/components/key-value", - "filePath": "src/components/key-value/key-value.tsx", - "fileName": "key-value.tsx", - "readmePath": "src/components/key-value/readme.md", - "usagesDir": "src/components/key-value/usage", - "tag": "ix-key-value", + "dirPath": "src/components/group", + "filePath": "src/components/group/group.tsx", + "fileName": "group.tsx", + "readmePath": "src/components/group/readme.md", + "usagesDir": "src/components/group/usage", + "tag": "ix-group", "overview": "", "usage": {}, "docs": "", - "docsTags": [ - { - "name": "slot", - "text": "custom-value - Optional custom value at key value instead of text value" - }, - { - "name": "since", - "text": "1.6.0" - } - ], + "docsTags": [], "encapsulation": "shadow", "dependents": [], - "dependencies": [], - "dependencyGraph": {}, + "dependencies": [ + "ix-group-context-menu", + "ix-group-item" + ], + "dependencyGraph": { + "ix-group": [ + "ix-group-context-menu", + "ix-group-item" + ], + "ix-group-context-menu": [ + "ix-icon-button" + ], + "ix-icon-button": [ + "ix-spinner" + ] + }, "props": [ { - "name": "icon", - "type": "string", + "name": "collapsed", + "type": "boolean", "complexType": { - "original": "string", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, - "mutable": false, - "attr": "icon", - "reflectToAttr": false, - "docs": "Optional key value icon", + "mutable": true, + "attr": "collapsed", + "reflectToAttr": true, + "docs": "Whether the group is collapsed or expanded. Defaults to true.", "docsTags": [], + "default": "true", "values": [ { - "type": "string" + "type": "boolean" } ], "optional": false, "required": false }, { - "name": "label", - "type": "string", + "name": "expandOnHeaderClick", + "type": "boolean", "complexType": { - "original": "string", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "label", + "attr": "expand-on-header-click", "reflectToAttr": false, - "docs": "Key value label", + "docs": "Expand the group if the header is clicked", "docsTags": [], + "default": "false", "values": [ { - "type": "string" + "type": "boolean" } ], "optional": false, - "required": true + "required": false }, { - "name": "labelPosition", - "type": "\"left\" | \"top\"", + "name": "header", + "type": "string", "complexType": { - "original": "KeyValueLabelPosition", - "resolved": "\"left\" | \"top\"", - "references": { - "KeyValueLabelPosition": { - "location": "local", - "path": "src/components/key-value/key-value.tsx", - "id": "src/components/key-value/key-value.tsx::KeyValueLabelPosition" - } - } + "original": "string", + "resolved": "string", + "references": {} }, "mutable": false, - "attr": "label-position", + "attr": "header", "reflectToAttr": false, - "docs": "Optional key value label position - 'top' or 'left'", + "docs": "Group header", "docsTags": [], - "default": "'top'", "values": [ { - "value": "left", - "type": "string" - }, - { - "value": "top", "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "value", - "type": "string", + "name": "index", + "type": "number", "complexType": { - "original": "string", - "resolved": "string", + "original": "number", + "resolved": "number", "references": {} }, - "mutable": false, - "attr": "value", - "reflectToAttr": false, - "docs": "Optional key value text value", + "mutable": true, + "attr": "index", + "reflectToAttr": true, + "docs": "The index of the selected group entry.\nIf undefined no group item is selected.", "docsTags": [], "values": [ { - "type": "string" + "type": "number" } ], - "optional": false, + "optional": true, "required": false - } - ], - "methods": [], - "events": [], - "styles": [], - "slots": [ - { - "name": "custom-value", - "docs": "Optional custom value at key value instead of text value" - } - ], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/key-value-list", - "filePath": "src/components/key-value-list/key-value-list.tsx", - "fileName": "key-value-list.tsx", - "readmePath": "src/components/key-value-list/readme.md", - "usagesDir": "src/components/key-value-list/usage", - "tag": "ix-key-value-list", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [ - { - "name": "since", - "text": "1.6.0" - } - ], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [], - "dependencyGraph": {}, - "props": [ + }, { - "name": "striped", + "name": "selected", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, - "mutable": false, - "attr": "striped", - "reflectToAttr": false, - "docs": "Optional striped key value list style", + "mutable": true, + "attr": "selected", + "reflectToAttr": true, + "docs": "Whether the group is selected.", "docsTags": [], + "default": "false", "values": [ { "type": "boolean" @@ -8372,33 +8271,9 @@ ], "optional": false, "required": false - } - ], - "methods": [], - "events": [], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/kpi", - "filePath": "src/components/kpi/kpi.tsx", - "fileName": "kpi.tsx", - "readmePath": "src/components/kpi/readme.md", - "usagesDir": "src/components/kpi/usage", - "tag": "ix-kpi", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [], - "dependencyGraph": {}, - "props": [ + }, { - "name": "label", + "name": "subHeader", "type": "string", "complexType": { "original": "string", @@ -8406,122 +8281,127 @@ "references": {} }, "mutable": false, - "attr": "label", + "attr": "sub-header", "reflectToAttr": false, - "docs": "", + "docs": "Group header subtitle", "docsTags": [], "values": [ { "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "orientation", - "type": "\"horizontal\" | \"vertical\"", + "name": "suppressHeaderSelection", + "type": "boolean", "complexType": { - "original": "'horizontal' | 'vertical'", - "resolved": "\"horizontal\" | \"vertical\"", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "orientation", + "attr": "suppress-header-selection", "reflectToAttr": false, - "docs": "", + "docs": "Prevent header from being selectable", "docsTags": [], - "default": "'horizontal'", + "default": "false", "values": [ { - "value": "horizontal", - "type": "string" - }, - { - "value": "vertical", - "type": "string" + "type": "boolean" } ], "optional": false, "required": false - }, + } + ], + "methods": [], + "events": [ { - "name": "state", - "type": "\"alarm\" | \"neutral\" | \"warning\"", + "event": "collapsedChanged", + "detail": "boolean", + "bubbles": true, "complexType": { - "original": "'neutral' | 'warning' | 'alarm'", - "resolved": "\"alarm\" | \"neutral\" | \"warning\"", + "original": "boolean", + "resolved": "boolean", "references": {} }, - "mutable": false, - "attr": "state", - "reflectToAttr": false, - "docs": "", - "docsTags": [], - "default": "'neutral'", - "values": [ - { - "value": "alarm", - "type": "string" - }, - { - "value": "neutral", - "type": "string" - }, - { - "value": "warning", - "type": "string" - } - ], - "optional": false, - "required": false + "cancelable": true, + "composed": true, + "docs": "Group collapsed", + "docsTags": [] }, { - "name": "unit", - "type": "string", + "event": "selectGroup", + "detail": "boolean", + "bubbles": true, "complexType": { - "original": "string", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, - "mutable": false, - "attr": "unit", - "reflectToAttr": false, - "docs": "", - "docsTags": [], - "values": [ - { - "type": "string" - } - ], - "optional": false, - "required": false + "cancelable": true, + "composed": true, + "docs": "Emits when whole group gets selected.", + "docsTags": [] }, { - "name": "value", - "type": "number | string", + "event": "selectItem", + "detail": "number", + "bubbles": true, "complexType": { - "original": "string | number", - "resolved": "number | string", + "original": "number", + "resolved": "number", "references": {} }, - "mutable": false, - "attr": "value", - "reflectToAttr": false, - "docs": "", - "docsTags": [], - "values": [ - { - "type": "number" - }, - { - "type": "string" - } - ], - "optional": false, - "required": false + "cancelable": true, + "composed": true, + "docs": "Emits when group item gets selected.", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [ + { + "event": "selectedChanged", + "capture": false, + "passive": false } + ] + }, + { + "dirPath": "src/components/group", + "filePath": "src/components/group/group-context-menu.tsx", + "fileName": "group-context-menu.tsx", + "readmePath": "src/components/group/readme.md", + "usagesDir": "src/components/group/usage", + "tag": "ix-group-context-menu", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [ + "ix-group" + ], + "dependencies": [ + "ix-icon-button" ], + "dependencyGraph": { + "ix-group-context-menu": [ + "ix-icon-button" + ], + "ix-icon-button": [ + "ix-spinner" + ], + "ix-group": [ + "ix-group-context-menu" + ] + }, + "props": [], "methods": [], "events": [], "styles": [], @@ -8530,95 +8410,114 @@ "listeners": [] }, { - "dirPath": "src/components/grid", - "filePath": "src/components/grid/layout-grid.tsx", - "fileName": "layout-grid.tsx", - "readmePath": "src/components/grid/readme.md", - "usagesDir": "src/components/grid/usage", - "tag": "ix-layout-grid", + "dirPath": "src/components/group-item", + "filePath": "src/components/group-item/group-item.tsx", + "fileName": "group-item.tsx", + "readmePath": "src/components/group-item/readme.md", + "usagesDir": "src/components/group-item/usage", + "tag": "ix-group-item", "overview": "", "usage": {}, "docs": "", - "docsTags": [ - { - "name": "since", - "text": "2.0.0" - } - ], + "docsTags": [], "encapsulation": "shadow", "dependents": [ - "ix-date-dropdown", - "ix-datetime-picker" + "ix-group" ], "dependencies": [], "dependencyGraph": { - "ix-date-dropdown": [ - "ix-layout-grid" - ], - "ix-datetime-picker": [ - "ix-layout-grid" + "ix-group": [ + "ix-group-item" ] }, "props": [ { - "name": "columns", - "type": "number", + "name": "focusable", + "type": "boolean", "complexType": { - "original": "number", - "resolved": "number", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "columns", + "attr": "focusable", "reflectToAttr": false, - "docs": "Overwrite the default number of columns. Choose between 2 and 12 columns.", + "docs": "The elements tabindex attribute will get set accordingly.\nIf true tabindex will be 0, -1 otherwise.", "docsTags": [], - "default": "12", + "default": "true", "values": [ { - "type": "number" + "type": "boolean" } ], "optional": false, "required": false }, { - "name": "gap", - "type": "\"12\" | \"16\" | \"24\" | \"8\"", + "name": "icon", + "type": "string", "complexType": { - "original": "'8' | '12' | '16' | '24'", - "resolved": "\"12\" | \"16\" | \"24\" | \"8\"", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "gap", + "attr": "icon", "reflectToAttr": false, - "docs": "Grid gap", + "docs": "Group item icon", "docsTags": [], - "default": "'24'", "values": [ { - "value": "12", - "type": "string" - }, - { - "value": "16", "type": "string" - }, + } + ], + "optional": true, + "required": false + }, + { + "name": "index", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": false, + "attr": "index", + "reflectToAttr": false, + "docs": "Index", + "docsTags": [], + "values": [ { - "value": "24", - "type": "string" - }, + "type": "number" + } + ], + "optional": true, + "required": false + }, + { + "name": "secondaryText", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "secondary-text", + "reflectToAttr": false, + "docs": "Group item secondary text", + "docsTags": [], + "values": [ { - "value": "8", "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "noMargin", + "name": "selected", "type": "boolean", "complexType": { "original": "boolean", @@ -8626,9 +8525,9 @@ "references": {} }, "mutable": false, - "attr": "no-margin", + "attr": "selected", "reflectToAttr": false, - "docs": "The grid will not have any horizontal padding", + "docs": "Show selected state", "docsTags": [], "default": "false", "values": [ @@ -8638,38 +8537,9 @@ ], "optional": false, "required": false - } - ], - "methods": [], - "events": [], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/link-button", - "filePath": "src/components/link-button/link-button.tsx", - "fileName": "link-button.tsx", - "readmePath": "src/components/link-button/readme.md", - "usagesDir": "src/components/link-button/usage", - "tag": "ix-link-button", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [ - { - "name": "since", - "text": "2.0.0" - } - ], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [], - "dependencyGraph": {}, - "props": [ + }, { - "name": "disabled", + "name": "suppressSelection", "type": "boolean", "complexType": { "original": "boolean", @@ -8677,9 +8547,9 @@ "references": {} }, "mutable": false, - "attr": "disabled", + "attr": "suppress-selection", "reflectToAttr": false, - "docs": "Disable the link button", + "docs": "Supress the selection of the group", "docsTags": [], "default": "false", "values": [ @@ -8691,42 +8561,7 @@ "required": false }, { - "name": "target", - "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"", - "complexType": { - "original": "'_self' | '_blank' | '_parent' | '_top'", - "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"", - "references": {} - }, - "mutable": false, - "attr": "target", - "reflectToAttr": false, - "docs": "Specifies where to open the link\n\nhttps://www.w3schools.com/html/html_links.asp", - "docsTags": [], - "default": "'_self'", - "values": [ - { - "value": "_blank", - "type": "string" - }, - { - "value": "_parent", - "type": "string" - }, - { - "value": "_self", - "type": "string" - }, - { - "value": "_top", - "type": "string" - } - ], - "optional": false, - "required": false - }, - { - "name": "url", + "name": "text", "type": "string", "complexType": { "original": "string", @@ -8734,33 +8569,59 @@ "references": {} }, "mutable": false, - "attr": "url", + "attr": "text", "reflectToAttr": false, - "docs": "Url for the link button", + "docs": "Group item text", "docsTags": [], "values": [ { "type": "string" } ], - "optional": false, + "optional": true, "required": false } ], "methods": [], - "events": [], + "events": [ + { + "event": "selectedChanged", + "detail": "HTMLIxGroupItemElement", + "bubbles": true, + "complexType": { + "original": "HTMLIxGroupItemElement", + "resolved": "HTMLIxGroupItemElement", + "references": { + "HTMLIxGroupItemElement": { + "location": "global", + "id": "global::HTMLIxGroupItemElement" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Selection changed", + "docsTags": [] + } + ], "styles": [], "slots": [], "parts": [], - "listeners": [] + "listeners": [ + { + "event": "click", + "capture": false, + "passive": true + } + ] }, { - "dirPath": "src/components/map-navigation", - "filePath": "src/components/map-navigation/map-navigation.tsx", - "fileName": "map-navigation.tsx", - "readmePath": "src/components/map-navigation/readme.md", - "usagesDir": "src/components/map-navigation/usage", - "tag": "ix-map-navigation", + "dirPath": "src/components/helper-text", + "filePath": "src/components/helper-text/helper-text.tsx", + "fileName": "helper-text.tsx", + "readmePath": "src/components/helper-text/readme.md", + "usagesDir": "src/components/helper-text/usage", + "tag": "ix-helper-text", "overview": "", "usage": {}, "docs": "", @@ -8768,36 +8629,16 @@ "encapsulation": "shadow", "dependents": [], "dependencies": [ - "ix-map-navigation-overlay", - "ix-application-header", - "ix-icon-button" + "ix-typography" ], "dependencyGraph": { - "ix-map-navigation": [ - "ix-map-navigation-overlay", - "ix-application-header", - "ix-icon-button" - ], - "ix-map-navigation-overlay": [ - "ix-icon-button" - ], - "ix-icon-button": [ - "ix-spinner" - ], - "ix-application-header": [ - "ix-menu-expand-icon", - "ix-icon-button", - "ix-typography", - "ix-dropdown" - ], - "ix-menu-expand-icon": [ - "ix-icon-button", - "ix-spinner" + "ix-helper-text": [ + "ix-typography" ] }, "props": [ { - "name": "applicationName", + "name": "helperText", "type": "string", "complexType": { "original": "string", @@ -8805,42 +8646,41 @@ "references": {} }, "mutable": false, - "attr": "application-name", + "attr": "helper-text", "reflectToAttr": false, - "docs": "Application name", + "docs": "Show text below the field component", "docsTags": [], "values": [ { "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "hideContextMenu", - "type": "boolean", + "name": "htmlFor", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "hide-context-menu", + "attr": "html-for", "reflectToAttr": false, - "docs": "Hide the sidebar context menu button when set to true", + "docs": "The id of the form element that the label is associated with", "docsTags": [], - "default": "true", "values": [ { - "type": "boolean" + "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "navigationTitle", + "name": "infoText", "type": "string", "complexType": { "original": "string", @@ -8848,249 +8688,238 @@ "references": {} }, "mutable": false, - "attr": "navigation-title", + "attr": "info-text", "reflectToAttr": false, - "docs": "Navigation title", + "docs": "Info text for the field component", "docsTags": [], "values": [ { "type": "string" } ], - "optional": false, + "optional": true, "required": false - } - ], - "methods": [ + }, { - "name": "closeOverlay", - "returns": { - "type": "Promise", - "docs": "" - }, + "name": "invalidText", + "type": "string", "complexType": { - "signature": "() => Promise", - "parameters": [], - "references": { - "Promise": { - "location": "global", - "id": "global::Promise" - } - }, - "return": "Promise" + "original": "string", + "resolved": "string", + "references": {} }, - "signature": "closeOverlay() => Promise", - "parameters": [], - "docs": "Close current shown overlay", - "docsTags": [ + "mutable": false, + "attr": "invalid-text", + "reflectToAttr": false, + "docs": "Error text for the field component", + "docsTags": [], + "values": [ { - "name": "deprecated", - "text": "Will be removed in 2.0.0. Use slot based approach" + "type": "string" } ], - "deprecation": "Will be removed in 2.0.0. Use slot based approach" + "optional": true, + "required": false }, { - "name": "openOverlay", - "returns": { - "type": "Promise", - "docs": "" - }, + "name": "validText", + "type": "string", "complexType": { - "signature": "(name: string, component: HTMLElement, icon?: string, color?: string) => Promise", - "parameters": [ - { - "name": "name", - "type": "string", - "docs": "" - }, - { - "name": "component", - "type": "HTMLElement", - "docs": "" - }, - { - "name": "icon", - "type": "string", - "docs": "" - }, - { - "name": "color", - "type": "string", - "docs": "" - } - ], - "references": { - "Promise": { - "location": "global", - "id": "global::Promise" - }, - "HTMLElement": { - "location": "global", - "id": "global::HTMLElement" - } - }, - "return": "Promise" + "original": "string", + "resolved": "string", + "references": {} }, - "signature": "openOverlay(name: string, component: HTMLElement, icon?: string, color?: string) => Promise", - "parameters": [ - { - "name": "name", - "type": "string", - "docs": "" - }, - { - "name": "component", - "type": "HTMLElement", - "docs": "" - }, + "mutable": false, + "attr": "valid-text", + "reflectToAttr": false, + "docs": "Valid text for the field component", + "docsTags": [], + "values": [ { - "name": "icon", - "type": "string", - "docs": "" - }, - { - "name": "color", - "type": "string", - "docs": "" - } - ], - "docs": "Open a overlay inside content area", - "docsTags": [ - { - "name": "deprecated", - "text": "Will be removed in 2.0.0. Use slot based approach" - }, - { - "name": "param", - "text": "name" - }, - { - "name": "param", - "text": "component" - }, - { - "name": "param", - "text": "icon" - }, - { - "name": "param", - "text": "color" + "type": "string" } ], - "deprecation": "Will be removed in 2.0.0. Use slot based approach" + "optional": true, + "required": false }, { - "name": "toggleSidebar", - "returns": { - "type": "Promise", - "docs": "" - }, + "name": "warningText", + "type": "string", "complexType": { - "signature": "(show?: boolean) => Promise", - "parameters": [ - { - "name": "show", - "type": "boolean", - "docs": "new visibility state" - } - ], - "references": { - "Promise": { - "location": "global", - "id": "global::Promise" - } - }, - "return": "Promise" + "original": "string", + "resolved": "string", + "references": {} }, - "signature": "toggleSidebar(show?: boolean) => Promise", - "parameters": [ + "mutable": false, + "attr": "warning-text", + "reflectToAttr": false, + "docs": "Warning text for the field component", + "docsTags": [], + "values": [ { - "name": "show", - "type": "boolean", - "docs": "new visibility state" + "type": "string" } ], - "docs": "Change the visibility of the sidebar", - "docsTags": [ - { - "name": "param", - "text": "show new visibility state" - }, - { - "name": "since", - "text": "1.6.0" - } - ] - } - ], - "events": [ - { - "event": "contextMenuClick", - "detail": "void", - "bubbles": true, - "complexType": { - "original": "void", - "resolved": "void", - "references": {} - }, - "cancelable": true, - "composed": true, - "docs": "Context menu clicked", - "docsTags": [] - }, - { - "event": "navigationToggled", - "detail": "boolean", - "bubbles": true, - "complexType": { - "original": "boolean", - "resolved": "boolean", - "references": {} - }, - "cancelable": true, - "composed": true, - "docs": "Navigation toggled", - "docsTags": [] + "optional": true, + "required": false } ], + "methods": [], + "events": [], "styles": [], "slots": [], "parts": [], "listeners": [] }, { - "dirPath": "src/components/map-navigation-overlay", - "filePath": "src/components/map-navigation-overlay/map-navigation-overlay.tsx", - "fileName": "map-navigation-overlay.tsx", - "readmePath": "src/components/map-navigation-overlay/readme.md", - "usagesDir": "src/components/map-navigation-overlay/usage", - "tag": "ix-map-navigation-overlay", + "dirPath": "src/components/icon-button", + "filePath": "src/components/icon-button/icon-button.tsx", + "fileName": "icon-button.tsx", + "readmePath": "src/components/icon-button/readme.md", + "usagesDir": "src/components/icon-button/usage", + "tag": "ix-icon-button", "overview": "", "usage": {}, "docs": "", "docsTags": [], "encapsulation": "shadow", "dependents": [ - "ix-map-navigation" + "ix-application-header", + "ix-card-list", + "ix-category-filter", + "ix-chip", + "ix-content-header", + "ix-date-input", + "ix-date-picker", + "ix-drawer", + "ix-dropdown-button", + "ix-expanding-search", + "ix-filter-chip", + "ix-flip-tile", + "ix-group-context-menu", + "ix-input", + "ix-map-navigation", + "ix-map-navigation-overlay", + "ix-menu", + "ix-menu-about", + "ix-menu-about-news", + "ix-menu-expand-icon", + "ix-menu-settings", + "ix-message-bar", + "ix-modal-example", + "ix-modal-header", + "ix-number-input", + "ix-pagination", + "ix-pane", + "ix-select", + "ix-split-button", + "ix-time-picker", + "ix-toast" ], "dependencies": [ - "ix-icon-button" + "ix-spinner" ], "dependencyGraph": { - "ix-map-navigation-overlay": [ - "ix-icon-button" - ], "ix-icon-button": [ "ix-spinner" ], + "ix-application-header": [ + "ix-icon-button" + ], + "ix-card-list": [ + "ix-icon-button" + ], + "ix-category-filter": [ + "ix-icon-button" + ], + "ix-chip": [ + "ix-icon-button" + ], + "ix-content-header": [ + "ix-icon-button" + ], + "ix-date-input": [ + "ix-icon-button" + ], + "ix-date-picker": [ + "ix-icon-button" + ], + "ix-drawer": [ + "ix-icon-button" + ], + "ix-dropdown-button": [ + "ix-icon-button" + ], + "ix-expanding-search": [ + "ix-icon-button" + ], + "ix-filter-chip": [ + "ix-icon-button" + ], + "ix-flip-tile": [ + "ix-icon-button" + ], + "ix-group-context-menu": [ + "ix-icon-button" + ], + "ix-input": [ + "ix-icon-button" + ], "ix-map-navigation": [ - "ix-map-navigation-overlay" + "ix-icon-button" + ], + "ix-map-navigation-overlay": [ + "ix-icon-button" + ], + "ix-menu": [ + "ix-icon-button" + ], + "ix-menu-about": [ + "ix-icon-button" + ], + "ix-menu-about-news": [ + "ix-icon-button" + ], + "ix-menu-expand-icon": [ + "ix-icon-button" + ], + "ix-menu-settings": [ + "ix-icon-button" + ], + "ix-message-bar": [ + "ix-icon-button" + ], + "ix-modal-example": [ + "ix-icon-button" + ], + "ix-modal-header": [ + "ix-icon-button" + ], + "ix-number-input": [ + "ix-icon-button" + ], + "ix-pagination": [ + "ix-icon-button" + ], + "ix-pane": [ + "ix-icon-button" + ], + "ix-select": [ + "ix-icon-button" + ], + "ix-split-button": [ + "ix-icon-button" + ], + "ix-time-picker": [ + "ix-icon-button" + ], + "ix-toast": [ + "ix-icon-button" ] }, "props": [ { - "name": "color", + "name": "a11yLabel", "type": "string", "complexType": { "original": "string", @@ -9098,16 +8927,15 @@ "references": {} }, "mutable": false, - "attr": "color", + "attr": "a11y-label", "reflectToAttr": false, - "docs": "Color of icon", + "docs": "Accessibility label for the icon button\nWill be set as aria-label on the nested HTML button element", "docsTags": [ { - "name": "deprecated", - "text": "since 2.1.0. Use `icon-color`" + "name": "since", + "text": "2.1.0" } ], - "deprecation": "since 2.1.0. Use `icon-color`", "values": [ { "type": "string" @@ -9117,7 +8945,7 @@ "required": false }, { - "name": "icon", + "name": "color", "type": "string", "complexType": { "original": "string", @@ -9125,10 +8953,16 @@ "references": {} }, "mutable": false, - "attr": "icon", + "attr": "color", "reflectToAttr": false, - "docs": "Icon of overlay", - "docsTags": [], + "docs": "Color of icon in button", + "docsTags": [ + { + "name": "deprecated", + "text": "since 2.1.0 use `icon-color`" + } + ], + "deprecation": "since 2.1.0 use `icon-color`", "values": [ { "type": "string" @@ -9138,111 +8972,50 @@ "required": false }, { - "name": "iconColor", - "type": "string", + "name": "disabled", + "type": "boolean", "complexType": { - "original": "string", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "icon-color", + "attr": "disabled", "reflectToAttr": false, - "docs": "Color of icon", + "docs": "Disabled", "docsTags": [], + "default": "false", "values": [ { - "type": "string" + "type": "boolean" } ], "optional": false, "required": false }, { - "name": "name", - "type": "string", + "name": "ghost", + "type": "boolean", "complexType": { - "original": "string", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "name", + "attr": "ghost", "reflectToAttr": false, - "docs": "Title of overlay", + "docs": "Button invisible", "docsTags": [], "values": [ { - "type": "string" + "type": "boolean" } ], "optional": false, "required": false - } - ], - "methods": [], - "events": [ - { - "event": "closeClick", - "detail": "any", - "bubbles": true, - "complexType": { - "original": "any", - "resolved": "any", - "references": {} - }, - "cancelable": true, - "composed": true, - "docs": "Event closed", - "docsTags": [] - } - ], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/menu", - "filePath": "src/components/menu/menu.tsx", - "fileName": "menu.tsx", - "readmePath": "src/components/menu/readme.md", - "usagesDir": "src/components/menu/usage", - "tag": "ix-menu", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [ - "ix-menu-expand-icon", - "ix-icon-button", - "ix-menu-item" - ], - "dependencyGraph": { - "ix-menu": [ - "ix-menu-expand-icon", - "ix-icon-button", - "ix-menu-item" - ], - "ix-menu-expand-icon": [ - "ix-icon-button", - "ix-spinner" - ], - "ix-icon-button": [ - "ix-spinner" - ], - "ix-menu-item": [ - "ix-tooltip" - ], - "ix-tooltip": [ - "ix-typography" - ] - }, - "props": [ + }, { - "name": "applicationDescription", + "name": "icon", "type": "string", "complexType": { "original": "string", @@ -9250,11 +9023,10 @@ "references": {} }, "mutable": false, - "attr": "application-description", + "attr": "icon", "reflectToAttr": false, - "docs": "Should only be set if you use ix-menu standalone", + "docs": "Icon name", "docsTags": [], - "default": "''", "values": [ { "type": "string" @@ -9264,7 +9036,7 @@ "required": false }, { - "name": "applicationName", + "name": "iconColor", "type": "string", "complexType": { "original": "string", @@ -9272,9 +9044,9 @@ "references": {} }, "mutable": false, - "attr": "application-name", + "attr": "icon-color", "reflectToAttr": false, - "docs": "Should only be set if you use ix-menu standalone", + "docs": "Color of icon in button", "docsTags": [], "values": [ { @@ -9285,7 +9057,7 @@ "required": false }, { - "name": "enableMapExpand", + "name": "loading", "type": "boolean", "complexType": { "original": "boolean", @@ -9293,10 +9065,15 @@ "references": {} }, "mutable": false, - "attr": "enable-map-expand", + "attr": "loading", "reflectToAttr": false, - "docs": "Internal", - "docsTags": [], + "docs": "Loading button", + "docsTags": [ + { + "name": "since", + "text": "2.0.0" + } + ], "default": "false", "values": [ { @@ -9307,7 +9084,7 @@ "required": false }, { - "name": "enableSettings", + "name": "outline", "type": "boolean", "complexType": { "original": "boolean", @@ -9315,11 +9092,10 @@ "references": {} }, "mutable": false, - "attr": "enable-settings", + "attr": "outline", "reflectToAttr": false, - "docs": "Is settings tab is visible", + "docs": "Button outline", "docsTags": [], - "default": "true", "values": [ { "type": "boolean" @@ -9329,7 +9105,7 @@ "required": false }, { - "name": "enableToggleTheme", + "name": "oval", "type": "boolean", "complexType": { "original": "boolean", @@ -9337,11 +9113,10 @@ "references": {} }, "mutable": false, - "attr": "enable-toggle-theme", + "attr": "oval", "reflectToAttr": false, - "docs": "Show toggle between light and dark variant. Only if the provided theme have implemented both!", + "docs": "Button in oval shape", "docsTags": [], - "default": "false", "values": [ { "type": "boolean" @@ -9351,43 +9126,40 @@ "required": false }, { - "name": "expand", - "type": "boolean", + "name": "size", + "type": "\"12\" | \"16\" | \"24\" | \"32\"", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "'32' | '24' | '16' | '12'", + "resolved": "\"12\" | \"16\" | \"24\" | \"32\"", "references": {} }, - "mutable": true, - "attr": "expand", - "reflectToAttr": true, - "docs": "Toggle the expand state of the menu", - "docsTags": [], - "default": "false", - "values": [ + "mutable": false, + "attr": "size", + "reflectToAttr": false, + "docs": "Size of icon in button", + "docsTags": [ { - "type": "boolean" + "name": "deprecated", + "text": "Only size 32 will be removed in 3.0.0" } ], - "optional": false, - "required": false - }, - { - "name": "i18nCollapse", - "type": "string", - "complexType": { - "original": "string", - "resolved": "string", - "references": {} - }, - "mutable": false, - "attr": "i-1-8n-collapse", - "reflectToAttr": false, - "docs": "", - "docsTags": [], - "default": "'Collapse'", + "default": "'24'", + "deprecation": "Only size 32 will be removed in 3.0.0", "values": [ { + "value": "12", + "type": "string" + }, + { + "value": "16", + "type": "string" + }, + { + "value": "24", + "type": "string" + }, + { + "value": "32", "type": "string" } ], @@ -9395,21 +9167,26 @@ "required": false }, { - "name": "i18nExpand", - "type": "string", + "name": "type", + "type": "\"button\" | \"submit\"", "complexType": { - "original": "string", - "resolved": "string", + "original": "'button' | 'submit'", + "resolved": "\"button\" | \"submit\"", "references": {} }, "mutable": false, - "attr": "i-1-8n-expand", + "attr": "type", "reflectToAttr": false, - "docs": "", + "docs": "Type of the button", "docsTags": [], - "default": "' Expand'", + "default": "'button'", "values": [ { + "value": "button", + "type": "string" + }, + { + "value": "submit", "type": "string" } ], @@ -9417,73 +9194,128 @@ "required": false }, { - "name": "i18nExpandSidebar", - "type": "string", + "name": "variant", + "type": "\"danger\" | \"primary\" | \"secondary\"", "complexType": { - "original": "string", - "resolved": "string", - "references": {} + "original": "IconButtonVariant", + "resolved": "\"danger\" | \"primary\" | \"secondary\"", + "references": { + "IconButtonVariant": { + "location": "local", + "path": "src/components/icon-button/icon-button.tsx", + "id": "src/components/icon-button/icon-button.tsx::IconButtonVariant" + } + } }, "mutable": false, - "attr": "i-1-8n-expand-sidebar", + "attr": "variant", "reflectToAttr": false, - "docs": "Accessibility i18n label for the burger menu of the sidebar", - "docsTags": [], - "default": "'Expand sidebar'", - "values": [ + "docs": "Variant of button", + "docsTags": [ { - "type": "string" + "name": "since", + "text": "2.3.0 - variant danger" } ], - "optional": false, - "required": false - }, - { - "name": "i18nLegal", - "type": "string", + "default": "'secondary'", + "values": [ + { + "value": "danger", + "type": "string" + }, + { + "value": "primary", + "type": "string" + }, + { + "value": "secondary", + "type": "string" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/icon-toggle-button", + "filePath": "src/components/icon-toggle-button/icon-toggle-button.tsx", + "fileName": "icon-toggle-button.tsx", + "readmePath": "src/components/icon-toggle-button/readme.md", + "usagesDir": "src/components/icon-toggle-button/usage", + "tag": "ix-icon-toggle-button", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "2.0.0" + } + ], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [ + "ix-spinner" + ], + "dependencyGraph": { + "ix-icon-toggle-button": [ + "ix-spinner" + ] + }, + "props": [ + { + "name": "disabled", + "type": "boolean", "complexType": { - "original": "string", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "i-1-8n-legal", - "reflectToAttr": false, - "docs": "", + "attr": "disabled", + "reflectToAttr": true, + "docs": "Disable the button", "docsTags": [], - "default": "'About & legal information'", + "default": "false", "values": [ { - "type": "string" + "type": "boolean" } ], "optional": false, "required": false }, { - "name": "i18nSettings", - "type": "string", + "name": "ghost", + "type": "boolean", "complexType": { - "original": "string", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "i-1-8n-settings", + "attr": "ghost", "reflectToAttr": false, - "docs": "", + "docs": "Button with no background or outline", "docsTags": [], - "default": "'Settings'", + "default": "false", "values": [ { - "type": "string" + "type": "boolean" } ], "optional": false, "required": false }, { - "name": "i18nToggleTheme", + "name": "icon", "type": "string", "complexType": { "original": "string", @@ -9491,11 +9323,10 @@ "references": {} }, "mutable": false, - "attr": "i-1-8n-toggle-theme", + "attr": "icon", "reflectToAttr": false, - "docs": "", + "docs": "Icon name", "docsTags": [], - "default": "'Toggle theme'", "values": [ { "type": "string" @@ -9505,35 +9336,51 @@ "required": false }, { - "name": "maxVisibleMenuItems", - "type": "number", + "name": "loading", + "type": "boolean", "complexType": { - "original": "number", - "resolved": "number", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "max-visible-menu-items", + "attr": "loading", "reflectToAttr": false, - "docs": "Maximum number of menu items to show in case enough vertical space is available.\nExtra menu items will be collapsed to 'show more' menu item.", - "docsTags": [ + "docs": "Loading button", + "docsTags": [], + "default": "false", + "values": [ { - "name": "deprecated", - "text": "- Has no effect on component. Will get removed with next major release (v3)" + "type": "boolean" } ], - "default": "9", - "deprecation": "- Has no effect on component. Will get removed with next major release (v3)", + "optional": false, + "required": false + }, + { + "name": "outline", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "outline", + "reflectToAttr": false, + "docs": "Outline button", + "docsTags": [], + "default": "false", "values": [ { - "type": "number" + "type": "boolean" } ], "optional": false, "required": false }, { - "name": "pinned", + "name": "pressed", "type": "boolean", "complexType": { "original": "boolean", @@ -9541,9 +9388,9 @@ "references": {} }, "mutable": false, - "attr": "pinned", + "attr": "pressed", "reflectToAttr": false, - "docs": "Menu stays pinned to the left", + "docs": "Show button as pressed", "docsTags": [], "default": "false", "values": [ @@ -9555,17 +9402,4234 @@ "required": false }, { - "name": "showAbout", + "name": "size", + "type": "\"12\" | \"16\" | \"24\"", + "complexType": { + "original": "'24' | '16' | '12'", + "resolved": "\"12\" | \"16\" | \"24\"", + "references": {} + }, + "mutable": false, + "attr": "size", + "reflectToAttr": false, + "docs": "Size of icon in button", + "docsTags": [], + "default": "'24'", + "values": [ + { + "value": "12", + "type": "string" + }, + { + "value": "16", + "type": "string" + }, + { + "value": "24", + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "variant", + "type": "\"danger\" | \"primary\" | \"secondary\"", + "complexType": { + "original": "ButtonVariant", + "resolved": "\"danger\" | \"primary\" | \"secondary\"", + "references": { + "ButtonVariant": { + "location": "import", + "path": "../button/button", + "id": "src/components/button/button.tsx::ButtonVariant" + } + } + }, + "mutable": false, + "attr": "variant", + "reflectToAttr": false, + "docs": "Button variant.\nImportant: Variant 'primary' can only be combined with either outline or ghost.", + "docsTags": [], + "default": "'secondary'", + "values": [ + { + "value": "danger", + "type": "string" + }, + { + "value": "primary", + "type": "string" + }, + { + "value": "secondary", + "type": "string" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [ + { + "event": "pressedChange", + "detail": "boolean", + "bubbles": true, + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Pressed change event", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/input", + "filePath": "src/components/input/input.tsx", + "fileName": "input.tsx", + "readmePath": "src/components/input/readme.md", + "usagesDir": "src/components/input/usage", + "tag": "ix-input", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "2.6.0" + }, + { + "name": "form-ready", + "text": "2.6.0" + } + ], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [ + "ix-field-wrapper", + "ix-icon-button", + "ix-typography" + ], + "dependencyGraph": { + "ix-input": [ + "ix-field-wrapper", + "ix-icon-button", + "ix-typography" + ], + "ix-field-wrapper": [ + "ix-field-label", + "ix-tooltip", + "ix-typography" + ], + "ix-field-label": [ + "ix-typography" + ], + "ix-tooltip": [ + "ix-typography" + ], + "ix-icon-button": [ + "ix-spinner" + ] + }, + "props": [ + { + "name": "allowedCharactersPattern", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "allowed-characters-pattern", + "reflectToAttr": false, + "docs": "The allowed characters pattern for the text field.", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + }, + { + "name": "disabled", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "disabled", + "reflectToAttr": true, + "docs": "Specifies whether the text field is disabled.", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "helperText", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "helper-text", + "reflectToAttr": false, + "docs": "The helper text for the text field.", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + }, + { + "name": "infoText", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "info-text", + "reflectToAttr": false, + "docs": "The info text for the text field.", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + }, + { + "name": "invalidText", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "invalid-text", + "reflectToAttr": false, + "docs": "The error text for the text field.", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + }, + { + "name": "label", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "label", + "reflectToAttr": true, + "docs": "The label for the text field.", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + }, + { + "name": "maxLength", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": false, + "attr": "max-length", + "reflectToAttr": false, + "docs": "The maximum length of the text field.", + "docsTags": [], + "values": [ + { + "type": "number" + } + ], + "optional": true, + "required": false + }, + { + "name": "minLength", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": false, + "attr": "min-length", + "reflectToAttr": false, + "docs": "The minimum length of the text field.", + "docsTags": [], + "values": [ + { + "type": "number" + } + ], + "optional": true, + "required": false + }, + { + "name": "name", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "name", + "reflectToAttr": true, + "docs": "The name of the text field.", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + }, + { + "name": "pattern", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "pattern", + "reflectToAttr": false, + "docs": "The pattern for the text field.", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + }, + { + "name": "placeholder", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "placeholder", + "reflectToAttr": true, + "docs": "The placeholder text for the text field.", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + }, + { + "name": "readonly", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "readonly", + "reflectToAttr": true, + "docs": "Specifies whether the text field is readonly.", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "required", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "required", + "reflectToAttr": true, + "docs": "Specifies whether the text field is required.", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "showTextAsTooltip", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "show-text-as-tooltip", + "reflectToAttr": false, + "docs": "Specifies whether to show the text as a tooltip.", + "docsTags": [], + "values": [ + { + "type": "boolean" + } + ], + "optional": true, + "required": false + }, + { + "name": "type", + "type": "\"email\" | \"password\" | \"tel\" | \"text\" | \"url\"", + "complexType": { + "original": "'text' | 'email' | 'password' | 'tel' | 'url'", + "resolved": "\"email\" | \"password\" | \"tel\" | \"text\" | \"url\"", + "references": {} + }, + "mutable": false, + "attr": "type", + "reflectToAttr": false, + "docs": "The type of the text field. Possible values are 'text', 'email', or 'password'.", + "docsTags": [], + "default": "'text'", + "values": [ + { + "value": "email", + "type": "string" + }, + { + "value": "password", + "type": "string" + }, + { + "value": "tel", + "type": "string" + }, + { + "value": "text", + "type": "string" + }, + { + "value": "url", + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "validText", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "valid-text", + "reflectToAttr": false, + "docs": "The valid text for the text field.", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + }, + { + "name": "value", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": true, + "attr": "value", + "reflectToAttr": true, + "docs": "The value of the text field.", + "docsTags": [], + "default": "''", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "warningText", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "warning-text", + "reflectToAttr": false, + "docs": "The warning text for the text field.", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + } + ], + "methods": [ + { + "name": "focusInput", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "focusInput() => Promise", + "parameters": [], + "docs": "Focuses the input field", + "docsTags": [] + }, + { + "name": "getNativeInputElement", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + }, + "HTMLInputElement": { + "location": "global", + "id": "global::HTMLInputElement" + } + }, + "return": "Promise" + }, + "signature": "getNativeInputElement() => Promise", + "parameters": [], + "docs": "Returns the native input element used in the text field.", + "docsTags": [] + } + ], + "events": [ + { + "event": "ixBlur", + "detail": "void", + "bubbles": true, + "complexType": { + "original": "void", + "resolved": "void", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Event emitted when the text field loses focus.", + "docsTags": [] + }, + { + "event": "validityStateChange", + "detail": "ValidityState", + "bubbles": true, + "complexType": { + "original": "ValidityState", + "resolved": "ValidityState", + "references": { + "ValidityState": { + "location": "global", + "id": "global::ValidityState" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Event emitted when the validity state of the text field changes.", + "docsTags": [] + }, + { + "event": "valueChange", + "detail": "string", + "bubbles": true, + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Event emitted when the value of the text field changes.", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/input-group", + "filePath": "src/components/input-group/input-group.tsx", + "fileName": "input-group.tsx", + "readmePath": "src/components/input-group/readme.md", + "usagesDir": "src/components/input-group/usage", + "tag": "ix-input-group", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/key-value", + "filePath": "src/components/key-value/key-value.tsx", + "fileName": "key-value.tsx", + "readmePath": "src/components/key-value/readme.md", + "usagesDir": "src/components/key-value/usage", + "tag": "ix-key-value", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "slot", + "text": "custom-value - Optional custom value at key value instead of text value" + }, + { + "name": "since", + "text": "1.6.0" + } + ], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [ + { + "name": "icon", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "icon", + "reflectToAttr": false, + "docs": "Optional key value icon", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "label", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "label", + "reflectToAttr": false, + "docs": "Key value label", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": true + }, + { + "name": "labelPosition", + "type": "\"left\" | \"top\"", + "complexType": { + "original": "KeyValueLabelPosition", + "resolved": "\"left\" | \"top\"", + "references": { + "KeyValueLabelPosition": { + "location": "local", + "path": "src/components/key-value/key-value.tsx", + "id": "src/components/key-value/key-value.tsx::KeyValueLabelPosition" + } + } + }, + "mutable": false, + "attr": "label-position", + "reflectToAttr": false, + "docs": "Optional key value label position - 'top' or 'left'", + "docsTags": [], + "default": "'top'", + "values": [ + { + "value": "left", + "type": "string" + }, + { + "value": "top", + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "value", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "value", + "reflectToAttr": false, + "docs": "Optional key value text value", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [ + { + "name": "custom-value", + "docs": "Optional custom value at key value instead of text value" + } + ], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/key-value-list", + "filePath": "src/components/key-value-list/key-value-list.tsx", + "fileName": "key-value-list.tsx", + "readmePath": "src/components/key-value-list/readme.md", + "usagesDir": "src/components/key-value-list/usage", + "tag": "ix-key-value-list", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "1.6.0" + } + ], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [ + { + "name": "striped", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "striped", + "reflectToAttr": false, + "docs": "Optional striped key value list style", + "docsTags": [], + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/kpi", + "filePath": "src/components/kpi/kpi.tsx", + "fileName": "kpi.tsx", + "readmePath": "src/components/kpi/readme.md", + "usagesDir": "src/components/kpi/usage", + "tag": "ix-kpi", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [ + { + "name": "label", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "label", + "reflectToAttr": false, + "docs": "", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "orientation", + "type": "\"horizontal\" | \"vertical\"", + "complexType": { + "original": "'horizontal' | 'vertical'", + "resolved": "\"horizontal\" | \"vertical\"", + "references": {} + }, + "mutable": false, + "attr": "orientation", + "reflectToAttr": false, + "docs": "", + "docsTags": [], + "default": "'horizontal'", + "values": [ + { + "value": "horizontal", + "type": "string" + }, + { + "value": "vertical", + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "state", + "type": "\"alarm\" | \"neutral\" | \"warning\"", + "complexType": { + "original": "'neutral' | 'warning' | 'alarm'", + "resolved": "\"alarm\" | \"neutral\" | \"warning\"", + "references": {} + }, + "mutable": false, + "attr": "state", + "reflectToAttr": false, + "docs": "", + "docsTags": [], + "default": "'neutral'", + "values": [ + { + "value": "alarm", + "type": "string" + }, + { + "value": "neutral", + "type": "string" + }, + { + "value": "warning", + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "unit", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "unit", + "reflectToAttr": false, + "docs": "", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "value", + "type": "number | string", + "complexType": { + "original": "string | number", + "resolved": "number | string", + "references": {} + }, + "mutable": false, + "attr": "value", + "reflectToAttr": false, + "docs": "", + "docsTags": [], + "values": [ + { + "type": "number" + }, + { + "type": "string" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/layout-auto", + "filePath": "src/components/layout-auto/layout-auto.tsx", + "fileName": "layout-auto.tsx", + "readmePath": "src/components/layout-auto/readme.md", + "usagesDir": "src/components/layout-auto/usage", + "tag": "ix-layout-auto", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "2.6.0" + } + ], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [ + { + "name": "layout", + "type": "{ minWidth: string; columns: number; }[]", + "complexType": { + "original": "{\n minWidth: string;\n columns: number;\n }[]", + "resolved": "{ minWidth: string; columns: number; }[]", + "references": {} + }, + "mutable": false, + "reflectToAttr": false, + "docs": "Defines the layout of the form.", + "docsTags": [], + "default": "[\n { minWidth: '0', columns: 1 },\n { minWidth: '48em', columns: 2 },\n ]", + "values": [ + { + "type": "{ minWidth: string; columns: number; }[]" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/layout-grid", + "filePath": "src/components/layout-grid/layout-grid.tsx", + "fileName": "layout-grid.tsx", + "readmePath": "src/components/layout-grid/readme.md", + "usagesDir": "src/components/layout-grid/usage", + "tag": "ix-layout-grid", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "2.0.0" + } + ], + "encapsulation": "shadow", + "dependents": [ + "ix-date-dropdown", + "ix-datetime-picker" + ], + "dependencies": [], + "dependencyGraph": { + "ix-date-dropdown": [ + "ix-layout-grid" + ], + "ix-datetime-picker": [ + "ix-layout-grid" + ] + }, + "props": [ + { + "name": "columns", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": false, + "attr": "columns", + "reflectToAttr": false, + "docs": "Overwrite the default number of columns. Choose between 2 and 12 columns.", + "docsTags": [], + "default": "12", + "values": [ + { + "type": "number" + } + ], + "optional": false, + "required": false + }, + { + "name": "gap", + "type": "\"12\" | \"16\" | \"24\" | \"8\"", + "complexType": { + "original": "'8' | '12' | '16' | '24'", + "resolved": "\"12\" | \"16\" | \"24\" | \"8\"", + "references": {} + }, + "mutable": false, + "attr": "gap", + "reflectToAttr": false, + "docs": "Grid gap", + "docsTags": [], + "default": "'24'", + "values": [ + { + "value": "12", + "type": "string" + }, + { + "value": "16", + "type": "string" + }, + { + "value": "24", + "type": "string" + }, + { + "value": "8", + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "noMargin", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "no-margin", + "reflectToAttr": false, + "docs": "The grid will not have any horizontal padding", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/link-button", + "filePath": "src/components/link-button/link-button.tsx", + "fileName": "link-button.tsx", + "readmePath": "src/components/link-button/readme.md", + "usagesDir": "src/components/link-button/usage", + "tag": "ix-link-button", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "2.0.0" + } + ], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [ + { + "name": "disabled", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "disabled", + "reflectToAttr": false, + "docs": "Disable the link button", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "target", + "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"", + "complexType": { + "original": "'_self' | '_blank' | '_parent' | '_top'", + "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"", + "references": {} + }, + "mutable": false, + "attr": "target", + "reflectToAttr": false, + "docs": "Specifies where to open the link\n\nhttps://www.w3schools.com/html/html_links.asp", + "docsTags": [], + "default": "'_self'", + "values": [ + { + "value": "_blank", + "type": "string" + }, + { + "value": "_parent", + "type": "string" + }, + { + "value": "_self", + "type": "string" + }, + { + "value": "_top", + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "url", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "url", + "reflectToAttr": false, + "docs": "Url for the link button", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/map-navigation", + "filePath": "src/components/map-navigation/map-navigation.tsx", + "fileName": "map-navigation.tsx", + "readmePath": "src/components/map-navigation/readme.md", + "usagesDir": "src/components/map-navigation/usage", + "tag": "ix-map-navigation", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [ + "ix-map-navigation-overlay", + "ix-application-header", + "ix-icon-button" + ], + "dependencyGraph": { + "ix-map-navigation": [ + "ix-map-navigation-overlay", + "ix-application-header", + "ix-icon-button" + ], + "ix-map-navigation-overlay": [ + "ix-icon-button" + ], + "ix-icon-button": [ + "ix-spinner" + ], + "ix-application-header": [ + "ix-menu-expand-icon", + "ix-icon-button", + "ix-typography", + "ix-dropdown" + ], + "ix-menu-expand-icon": [ + "ix-icon-button", + "ix-spinner" + ] + }, + "props": [ + { + "name": "applicationName", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "application-name", + "reflectToAttr": false, + "docs": "Application name", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "hideContextMenu", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "hide-context-menu", + "reflectToAttr": false, + "docs": "Hide the sidebar context menu button when set to true", + "docsTags": [], + "default": "true", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "navigationTitle", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "navigation-title", + "reflectToAttr": false, + "docs": "Navigation title", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + } + ], + "methods": [ + { + "name": "closeOverlay", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "closeOverlay() => Promise", + "parameters": [], + "docs": "Close current shown overlay", + "docsTags": [ + { + "name": "deprecated", + "text": "Will be removed in 2.0.0. Use slot based approach" + } + ], + "deprecation": "Will be removed in 2.0.0. Use slot based approach" + }, + { + "name": "openOverlay", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "(name: string, component: HTMLElement, icon?: string, color?: string) => Promise", + "parameters": [ + { + "name": "name", + "type": "string", + "docs": "" + }, + { + "name": "component", + "type": "HTMLElement", + "docs": "" + }, + { + "name": "icon", + "type": "string", + "docs": "" + }, + { + "name": "color", + "type": "string", + "docs": "" + } + ], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + }, + "HTMLElement": { + "location": "global", + "id": "global::HTMLElement" + } + }, + "return": "Promise" + }, + "signature": "openOverlay(name: string, component: HTMLElement, icon?: string, color?: string) => Promise", + "parameters": [ + { + "name": "name", + "type": "string", + "docs": "" + }, + { + "name": "component", + "type": "HTMLElement", + "docs": "" + }, + { + "name": "icon", + "type": "string", + "docs": "" + }, + { + "name": "color", + "type": "string", + "docs": "" + } + ], + "docs": "Open a overlay inside content area", + "docsTags": [ + { + "name": "deprecated", + "text": "Will be removed in 2.0.0. Use slot based approach" + }, + { + "name": "param", + "text": "name" + }, + { + "name": "param", + "text": "component" + }, + { + "name": "param", + "text": "icon" + }, + { + "name": "param", + "text": "color" + } + ], + "deprecation": "Will be removed in 2.0.0. Use slot based approach" + }, + { + "name": "toggleSidebar", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "(show?: boolean) => Promise", + "parameters": [ + { + "name": "show", + "type": "boolean", + "docs": "new visibility state" + } + ], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "toggleSidebar(show?: boolean) => Promise", + "parameters": [ + { + "name": "show", + "type": "boolean", + "docs": "new visibility state" + } + ], + "docs": "Change the visibility of the sidebar", + "docsTags": [ + { + "name": "param", + "text": "show new visibility state" + }, + { + "name": "since", + "text": "1.6.0" + } + ] + } + ], + "events": [ + { + "event": "contextMenuClick", + "detail": "void", + "bubbles": true, + "complexType": { + "original": "void", + "resolved": "void", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Context menu clicked", + "docsTags": [] + }, + { + "event": "navigationToggled", + "detail": "boolean", + "bubbles": true, + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Navigation toggled", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/map-navigation-overlay", + "filePath": "src/components/map-navigation-overlay/map-navigation-overlay.tsx", + "fileName": "map-navigation-overlay.tsx", + "readmePath": "src/components/map-navigation-overlay/readme.md", + "usagesDir": "src/components/map-navigation-overlay/usage", + "tag": "ix-map-navigation-overlay", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [ + "ix-map-navigation" + ], + "dependencies": [ + "ix-icon-button" + ], + "dependencyGraph": { + "ix-map-navigation-overlay": [ + "ix-icon-button" + ], + "ix-icon-button": [ + "ix-spinner" + ], + "ix-map-navigation": [ + "ix-map-navigation-overlay" + ] + }, + "props": [ + { + "name": "color", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "color", + "reflectToAttr": false, + "docs": "Color of icon", + "docsTags": [ + { + "name": "deprecated", + "text": "since 2.1.0. Use `icon-color`" + } + ], + "deprecation": "since 2.1.0. Use `icon-color`", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "icon", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "icon", + "reflectToAttr": false, + "docs": "Icon of overlay", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "iconColor", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "icon-color", + "reflectToAttr": false, + "docs": "Color of icon", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "name", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "name", + "reflectToAttr": false, + "docs": "Title of overlay", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [ + { + "event": "closeClick", + "detail": "any", + "bubbles": true, + "complexType": { + "original": "any", + "resolved": "any", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Event closed", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/menu", + "filePath": "src/components/menu/menu.tsx", + "fileName": "menu.tsx", + "readmePath": "src/components/menu/readme.md", + "usagesDir": "src/components/menu/usage", + "tag": "ix-menu", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [ + "ix-menu-expand-icon", + "ix-icon-button", + "ix-menu-item" + ], + "dependencyGraph": { + "ix-menu": [ + "ix-menu-expand-icon", + "ix-icon-button", + "ix-menu-item" + ], + "ix-menu-expand-icon": [ + "ix-icon-button", + "ix-spinner" + ], + "ix-icon-button": [ + "ix-spinner" + ], + "ix-menu-item": [ + "ix-tooltip" + ], + "ix-tooltip": [ + "ix-typography" + ] + }, + "props": [ + { + "name": "applicationDescription", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "application-description", + "reflectToAttr": false, + "docs": "Should only be set if you use ix-menu standalone", + "docsTags": [], + "default": "''", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "applicationName", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "application-name", + "reflectToAttr": false, + "docs": "Should only be set if you use ix-menu standalone", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "enableMapExpand", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "enable-map-expand", + "reflectToAttr": false, + "docs": "Internal", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "enableSettings", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "enable-settings", + "reflectToAttr": false, + "docs": "Is settings tab is visible", + "docsTags": [], + "default": "true", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "enableToggleTheme", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "enable-toggle-theme", + "reflectToAttr": false, + "docs": "Show toggle between light and dark variant. Only if the provided theme have implemented both!", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "expand", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": true, + "attr": "expand", + "reflectToAttr": true, + "docs": "Toggle the expand state of the menu", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "i18nCollapse", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "i-1-8n-collapse", + "reflectToAttr": false, + "docs": "", + "docsTags": [], + "default": "'Collapse'", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "i18nExpand", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "i-1-8n-expand", + "reflectToAttr": false, + "docs": "", + "docsTags": [], + "default": "' Expand'", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "i18nExpandSidebar", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "i-1-8n-expand-sidebar", + "reflectToAttr": false, + "docs": "Accessibility i18n label for the burger menu of the sidebar", + "docsTags": [], + "default": "'Expand sidebar'", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "i18nLegal", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "i-1-8n-legal", + "reflectToAttr": false, + "docs": "", + "docsTags": [], + "default": "'About & legal information'", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "i18nSettings", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "i-1-8n-settings", + "reflectToAttr": false, + "docs": "", + "docsTags": [], + "default": "'Settings'", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "i18nToggleTheme", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "i-1-8n-toggle-theme", + "reflectToAttr": false, + "docs": "", + "docsTags": [], + "default": "'Toggle theme'", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "maxVisibleMenuItems", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": false, + "attr": "max-visible-menu-items", + "reflectToAttr": false, + "docs": "Maximum number of menu items to show in case enough vertical space is available.\nExtra menu items will be collapsed to 'show more' menu item.", + "docsTags": [ + { + "name": "deprecated", + "text": "- Has no effect on component. Will get removed with next major release (v3)" + } + ], + "default": "9", + "deprecation": "- Has no effect on component. Will get removed with next major release (v3)", + "values": [ + { + "type": "number" + } + ], + "optional": false, + "required": false + }, + { + "name": "pinned", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "pinned", + "reflectToAttr": false, + "docs": "Menu stays pinned to the left", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "showAbout", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": true, + "attr": "show-about", + "reflectToAttr": false, + "docs": "Is about tab visible", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "showSettings", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": true, + "attr": "show-settings", + "reflectToAttr": false, + "docs": "Is settings tab visible", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "startExpanded", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "start-expanded", + "reflectToAttr": false, + "docs": "If set the menu will be expanded initially. This will only take effect at the breakpoint 'lg'.", + "docsTags": [ + { + "name": "since", + "text": "2.2.0" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + } + ], + "methods": [ + { + "name": "toggleAbout", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "(show: boolean) => Promise", + "parameters": [ + { + "name": "show", + "type": "boolean", + "docs": "" + } + ], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "toggleAbout(show: boolean) => Promise", + "parameters": [ + { + "name": "show", + "type": "boolean", + "docs": "" + } + ], + "docs": "Toggle About tabs", + "docsTags": [ + { + "name": "param", + "text": "show" + } + ] + }, + { + "name": "toggleMapExpand", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "(show?: boolean) => Promise", + "parameters": [ + { + "name": "show", + "type": "boolean", + "docs": "" + } + ], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "toggleMapExpand(show?: boolean) => Promise", + "parameters": [ + { + "name": "show", + "type": "boolean", + "docs": "" + } + ], + "docs": "Toggle map sidebar expand", + "docsTags": [ + { + "name": "param", + "text": "show" + } + ] + }, + { + "name": "toggleMenu", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "(show?: boolean) => Promise", + "parameters": [ + { + "name": "show", + "type": "boolean", + "docs": "" + } + ], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "toggleMenu(show?: boolean) => Promise", + "parameters": [ + { + "name": "show", + "type": "boolean", + "docs": "" + } + ], + "docs": "Toggle menu", + "docsTags": [ + { + "name": "param", + "text": "show" + } + ] + }, + { + "name": "toggleSettings", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "(show: boolean) => Promise", + "parameters": [ + { + "name": "show", + "type": "boolean", + "docs": "" + } + ], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "toggleSettings(show: boolean) => Promise", + "parameters": [ + { + "name": "show", + "type": "boolean", + "docs": "" + } + ], + "docs": "Toggle Settings tabs", + "docsTags": [ + { + "name": "param", + "text": "show" + } + ] + } + ], + "events": [ + { + "event": "expandChange", + "detail": "boolean", + "bubbles": true, + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Menu expanded", + "docsTags": [] + }, + { + "event": "mapExpandChange", + "detail": "boolean", + "bubbles": true, + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Map Sidebar expanded", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [ + { + "event": "resize", + "target": "window", + "capture": false, + "passive": true + }, + { + "event": "close", + "capture": false, + "passive": false + } + ] + }, + { + "dirPath": "src/components/menu-about", + "filePath": "src/components/menu-about/menu-about.tsx", + "fileName": "menu-about.tsx", + "readmePath": "src/components/menu-about/readme.md", + "usagesDir": "src/components/menu-about/usage", + "tag": "ix-menu-about", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [ + "ix-tab-item", + "ix-icon-button", + "ix-tabs" + ], + "dependencyGraph": { + "ix-menu-about": [ + "ix-tab-item", + "ix-icon-button", + "ix-tabs" + ], + "ix-icon-button": [ + "ix-spinner" + ] + }, + "props": [ + { + "name": "activeTabLabel", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": true, + "attr": "active-tab-label", + "reflectToAttr": false, + "docs": "Active tab", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "label", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "label", + "reflectToAttr": false, + "docs": "Content of the header", + "docsTags": [], + "default": "'About & legal information'", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "show", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "show", + "reflectToAttr": false, + "docs": "Internal", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [ + { + "event": "close", + "detail": "CustomCloseEvent", + "bubbles": true, + "complexType": { + "original": "CustomCloseEvent", + "resolved": "CustomCloseEvent", + "references": { + "CustomCloseEvent": { + "location": "import", + "path": "../utils/menu-tabs/menu-tabs-utils", + "id": "src/components/utils/menu-tabs/menu-tabs-utils.ts::CustomCloseEvent" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "About and Legal closed", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/menu-about-item", + "filePath": "src/components/menu-about-item/menu-about-item.tsx", + "fileName": "menu-about-item.tsx", + "readmePath": "src/components/menu-about-item/readme.md", + "usagesDir": "src/components/menu-about-item/usage", + "tag": "ix-menu-about-item", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [ + { + "name": "label", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "label", + "reflectToAttr": true, + "docs": "About Item label", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [ + { + "event": "labelChange", + "detail": "CustomLabelChangeEvent", + "bubbles": true, + "complexType": { + "original": "CustomLabelChangeEvent", + "resolved": "CustomLabelChangeEvent", + "references": { + "CustomLabelChangeEvent": { + "location": "import", + "path": "../utils/menu-tabs/menu-tabs-utils", + "id": "src/components/utils/menu-tabs/menu-tabs-utils.ts::CustomLabelChangeEvent" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Label changed", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/menu-about-news", + "filePath": "src/components/menu-about-news/menu-about-news.tsx", + "fileName": "menu-about-news.tsx", + "readmePath": "src/components/menu-about-news/readme.md", + "usagesDir": "src/components/menu-about-news/usage", + "tag": "ix-menu-about-news", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [ + "ix-typography", + "ix-icon-button", + "ix-button" + ], + "dependencyGraph": { + "ix-menu-about-news": [ + "ix-typography", + "ix-icon-button", + "ix-button" + ], + "ix-icon-button": [ + "ix-spinner" + ], + "ix-button": [ + "ix-spinner" + ] + }, + "props": [ + { + "name": "aboutItemLabel", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "about-item-label", + "reflectToAttr": false, + "docs": "Subtitle of the about news", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "expanded", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "expanded", + "reflectToAttr": false, + "docs": "Internal", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "i18nShowMore", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "i-1-8n-show-more", + "reflectToAttr": false, + "docs": "", + "docsTags": [], + "default": "'Show more'", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "label", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "label", + "reflectToAttr": false, + "docs": "Title of the about news", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "offsetBottom", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": false, + "attr": "offset-bottom", + "reflectToAttr": false, + "docs": "Bottom offset", + "docsTags": [], + "default": "0", + "values": [ + { + "type": "number" + } + ], + "optional": false, + "required": false + }, + { + "name": "show", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": true, + "attr": "show", + "reflectToAttr": true, + "docs": "Show about news", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [ + { + "event": "closePopover", + "detail": "void", + "bubbles": true, + "complexType": { + "original": "void", + "resolved": "void", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Popover closed", + "docsTags": [] + }, + { + "event": "showMore", + "detail": "MouseEvent", + "bubbles": true, + "complexType": { + "original": "MouseEvent", + "resolved": "MouseEvent", + "references": { + "MouseEvent": { + "location": "global", + "id": "global::MouseEvent" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Show More button is pressed", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/menu-avatar", + "filePath": "src/components/menu-avatar/menu-avatar.tsx", + "fileName": "menu-avatar.tsx", + "readmePath": "src/components/menu-avatar/readme.md", + "usagesDir": "src/components/menu-avatar/usage", + "tag": "ix-menu-avatar", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [ + "ix-avatar", + "ix-dropdown", + "ix-menu-avatar-item" + ], + "dependencyGraph": { + "ix-menu-avatar": [ + "ix-avatar", + "ix-dropdown", + "ix-menu-avatar-item" + ], + "ix-avatar": [ + "ix-dropdown", + "ix-divider", + "ix-typography", + "ix-spinner" + ], + "ix-menu-avatar-item": [ + "ix-dropdown-item" + ] + }, + "props": [ + { + "name": "bottom", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "bottom", + "reflectToAttr": false, + "docs": "Second line of text", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "i18nLogout", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "i-1-8n-logout", + "reflectToAttr": false, + "docs": "Use for translation", + "docsTags": [], + "default": "'Logout'", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "image", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "image", + "reflectToAttr": false, + "docs": "Display a avatar image", + "docsTags": [ + { + "name": "since", + "text": "1.4.0" + } + ], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "initials", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "initials", + "reflectToAttr": false, + "docs": "Display the initials of the user. Will be overwritten by image", + "docsTags": [ + { + "name": "since", + "text": "1.4.0" + } + ], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "showLogoutButton", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "show-logout-button", + "reflectToAttr": false, + "docs": "Control the visibility of the logout button", + "docsTags": [ + { + "name": "since", + "text": "2.1.0" + } + ], + "default": "true", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "top", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "top", + "reflectToAttr": false, + "docs": "First line of text", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [ + { + "event": "logoutClick", + "detail": "any", + "bubbles": true, + "complexType": { + "original": "any", + "resolved": "any", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Logout click", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/menu-avatar-item", + "filePath": "src/components/menu-avatar-item/menu-avatar-item.tsx", + "fileName": "menu-avatar-item.tsx", + "readmePath": "src/components/menu-avatar-item/readme.md", + "usagesDir": "src/components/menu-avatar-item/usage", + "tag": "ix-menu-avatar-item", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [ + "ix-menu-avatar" + ], + "dependencies": [ + "ix-dropdown-item" + ], + "dependencyGraph": { + "ix-menu-avatar-item": [ + "ix-dropdown-item" + ], + "ix-menu-avatar": [ + "ix-menu-avatar-item" + ] + }, + "props": [ + { + "name": "icon", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "icon", + "reflectToAttr": false, + "docs": "Avatar dropdown icon", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "label", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "label", + "reflectToAttr": false, + "docs": "Avatar dropdown label", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [ + { + "event": "itemClick", + "detail": "MouseEvent", + "bubbles": true, + "complexType": { + "original": "MouseEvent", + "resolved": "MouseEvent", + "references": { + "MouseEvent": { + "location": "global", + "id": "global::MouseEvent" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Avatar dropdown item clicked", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/menu-category", + "filePath": "src/components/menu-category/menu-category.tsx", + "fileName": "menu-category.tsx", + "readmePath": "src/components/menu-category/readme.md", + "usagesDir": "src/components/menu-category/usage", + "tag": "ix-menu-category", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "2.0.0" + } + ], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [ + "ix-menu-item", + "ix-dropdown", + "ix-dropdown-item", + "ix-typography", + "ix-divider" + ], + "dependencyGraph": { + "ix-menu-category": [ + "ix-menu-item", + "ix-dropdown", + "ix-dropdown-item", + "ix-typography", + "ix-divider" + ], + "ix-menu-item": [ + "ix-tooltip" + ], + "ix-tooltip": [ + "ix-typography" + ] + }, + "props": [ + { + "name": "icon", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "icon", + "reflectToAttr": false, + "docs": "Icon of the category", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "label", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "label", + "reflectToAttr": false, + "docs": "Display name of the category", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "notifications", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": false, + "attr": "notifications", + "reflectToAttr": false, + "docs": "Show notification count on the category", + "docsTags": [], + "values": [ + { + "type": "number" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [ + { + "event": "closeOtherCategories", + "target": "window", + "capture": false, + "passive": false + } + ] + }, + { + "dirPath": "src/components/menu-item", + "filePath": "src/components/menu-item/menu-item.tsx", + "fileName": "menu-item.tsx", + "readmePath": "src/components/menu-item/readme.md", + "usagesDir": "src/components/menu-item/usage", + "tag": "ix-menu-item", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "slot", + "text": "menu-item-label Custom label" + } + ], + "encapsulation": "shadow", + "dependents": [ + "ix-menu", + "ix-menu-category" + ], + "dependencies": [ + "ix-tooltip" + ], + "dependencyGraph": { + "ix-menu-item": [ + "ix-tooltip" + ], + "ix-tooltip": [ + "ix-typography" + ], + "ix-menu": [ + "ix-menu-item" + ], + "ix-menu-category": [ + "ix-menu-item" + ] + }, + "props": [ + { + "name": "active", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "active", + "reflectToAttr": false, + "docs": "State to display active", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "bottom", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "bottom", + "reflectToAttr": false, + "docs": "Caution: this is no longer working. Please use slot=\"bottom\" instead.\n\nPlace tab on bottom", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "disabled", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "disabled", + "reflectToAttr": false, + "docs": "Disable tab and remove event handlers", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "home", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "home", + "reflectToAttr": false, + "docs": "Move the Tab to a top position.", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "icon", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": true, + "attr": "icon", + "reflectToAttr": false, + "docs": "Name of the icon you want to display. Icon names can be resolved from the documentation", + "docsTags": [ + { + "name": "link", + "text": "https://ix.siemens.io/docs/icon-library/icons" + } + ], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + }, + { + "name": "label", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "label", + "reflectToAttr": false, + "docs": "Label of the menu item. Will also be used as tooltip text", + "docsTags": [ + { + "name": "since", + "text": "2.2.0" + } + ], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + }, + { + "name": "notifications", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": false, + "attr": "notifications", + "reflectToAttr": false, + "docs": "Show notification count on tab", + "docsTags": [], + "values": [ + { + "type": "number" + } + ], + "optional": true, + "required": false + }, + { + "name": "tabIcon", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": true, + "attr": "tab-icon", + "reflectToAttr": false, + "docs": "Name of the icon you want to display. Icon names can be resolved from the documentation", + "docsTags": [ + { + "name": "link", + "text": "https://ix.siemens.io/docs/icon-library/icons" + }, + { + "name": "deprecated", + "text": "since 2.0.0 use `icon` property. Will be removed in 3.0.0" + } + ], + "deprecation": "since 2.0.0 use `icon` property. Will be removed in 3.0.0", + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [ + { + "name": "menu-item-label Custom label", + "docs": "" + } + ], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/menu-settings", + "filePath": "src/components/menu-settings/menu-settings.tsx", + "fileName": "menu-settings.tsx", + "readmePath": "src/components/menu-settings/readme.md", + "usagesDir": "src/components/menu-settings/usage", + "tag": "ix-menu-settings", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [ + "ix-tab-item", + "ix-icon-button", + "ix-tabs" + ], + "dependencyGraph": { + "ix-menu-settings": [ + "ix-tab-item", + "ix-icon-button", + "ix-tabs" + ], + "ix-icon-button": [ + "ix-spinner" + ] + }, + "props": [ + { + "name": "activeTabLabel", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": true, + "attr": "active-tab-label", + "reflectToAttr": false, + "docs": "Active tab", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "label", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "label", + "reflectToAttr": false, + "docs": "Label of first tab", + "docsTags": [], + "default": "'Settings'", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "show", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "show", + "reflectToAttr": false, + "docs": "Internal", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [ + { + "event": "close", + "detail": "CustomCloseEvent", + "bubbles": true, + "complexType": { + "original": "CustomCloseEvent", + "resolved": "CustomCloseEvent", + "references": { + "CustomCloseEvent": { + "location": "import", + "path": "../utils/menu-tabs/menu-tabs-utils", + "id": "src/components/utils/menu-tabs/menu-tabs-utils.ts::CustomCloseEvent" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Popover closed", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/menu-settings-item", + "filePath": "src/components/menu-settings-item/menu-settings-item.tsx", + "fileName": "menu-settings-item.tsx", + "readmePath": "src/components/menu-settings-item/readme.md", + "usagesDir": "src/components/menu-settings-item/usage", + "tag": "ix-menu-settings-item", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [ + { + "name": "label", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "label", + "reflectToAttr": true, + "docs": "Settings Item label", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [ + { + "event": "labelChange", + "detail": "CustomLabelChangeEvent", + "bubbles": true, + "complexType": { + "original": "CustomLabelChangeEvent", + "resolved": "CustomLabelChangeEvent", + "references": { + "CustomLabelChangeEvent": { + "location": "import", + "path": "../utils/menu-tabs/menu-tabs-utils", + "id": "src/components/utils/menu-tabs/menu-tabs-utils.ts::CustomLabelChangeEvent" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Label changed", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/message-bar", + "filePath": "src/components/message-bar/message-bar.tsx", + "fileName": "message-bar.tsx", + "readmePath": "src/components/message-bar/readme.md", + "usagesDir": "src/components/message-bar/usage", + "tag": "ix-message-bar", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [ + "ix-icon-button" + ], + "dependencyGraph": { + "ix-message-bar": [ + "ix-icon-button" + ], + "ix-icon-button": [ + "ix-spinner" + ] + }, + "props": [ + { + "name": "dismissible", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "dismissible", + "reflectToAttr": false, + "docs": "If true, close button is enabled and alert can be dismissed by the user", + "docsTags": [], + "default": "true", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "type", + "type": "\"danger\" | \"info\" | \"warning\"", + "complexType": { + "original": "'danger' | 'warning' | 'info'", + "resolved": "\"danger\" | \"info\" | \"warning\"", + "references": {} + }, + "mutable": false, + "attr": "type", + "reflectToAttr": false, + "docs": "Specifies the type of the alert.", + "docsTags": [], + "default": "'info'", + "values": [ + { + "value": "danger", + "type": "string" + }, + { + "value": "info", + "type": "string" + }, + { + "value": "warning", + "type": "string" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [ + { + "event": "closedChange", + "detail": "any", + "bubbles": true, + "complexType": { + "original": "any", + "resolved": "any", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "An event emitted when the close button is clicked", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/modal", + "filePath": "src/components/modal/modal.tsx", + "fileName": "modal.tsx", + "readmePath": "src/components/modal/readme.md", + "usagesDir": "src/components/modal/usage", + "tag": "ix-modal", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [ + { + "name": "animation", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "animation", + "reflectToAttr": false, + "docs": "Should the modal be animated", + "docsTags": [], + "default": "true", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "backdrop", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "backdrop", + "reflectToAttr": false, + "docs": "Show a backdrop behind the modal dialog", + "docsTags": [], + "default": "true", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "beforeDismiss", + "type": "(reason?: any) => boolean | Promise", + "complexType": { + "original": "(reason?: any) => boolean | Promise", + "resolved": "(reason?: any) => boolean | Promise", + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + } + }, + "mutable": false, + "reflectToAttr": false, + "docs": "Is called before the modal is dismissed.\n\n- Return `true` to proceed in dismissing the modal\n- Return `false` to abort in dismissing the modal", + "docsTags": [], + "values": [ + { + "type": "(reason?: any) => boolean" + }, + { + "type": "Promise" + } + ], + "optional": false, + "required": false + }, + { + "name": "centered", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "centered", + "reflectToAttr": false, + "docs": "Centered modal", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "closeOnBackdropClick", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "close-on-backdrop-click", + "reflectToAttr": false, + "docs": "Dismiss modal on backdrop click", + "docsTags": [ + { + "name": "since", + "text": "2.0.0" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "closeOnEscape", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "close-on-escape", + "reflectToAttr": false, + "docs": "If set to true the modal can be closed by pressing the Escape key", + "docsTags": [], + "default": "true", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "keyboard", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "keyboard", + "reflectToAttr": false, + "docs": "Use ESC to dismiss the modal", + "docsTags": [ + { + "name": "deprecated", + "text": "- Use closeOnEscape instead" + } + ], + "default": "true", + "deprecation": "- Use closeOnEscape instead", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "size", + "type": "\"360\" | \"480\" | \"600\" | \"720\" | \"840\" | \"full-screen\" | \"full-width\"", + "complexType": { + "original": "IxModalSize", + "resolved": "\"360\" | \"480\" | \"600\" | \"720\" | \"840\" | \"full-screen\" | \"full-width\"", + "references": { + "IxModalSize": { + "location": "local", + "path": "src/components/modal/modal.tsx", + "id": "src/components/modal/modal.tsx::IxModalSize" + } + } + }, + "mutable": false, + "attr": "size", + "reflectToAttr": false, + "docs": "Modal size", + "docsTags": [ + { + "name": "since", + "text": "2.0.0" + } + ], + "default": "'360'", + "values": [ + { + "value": "360", + "type": "string" + }, + { + "value": "480", + "type": "string" + }, + { + "value": "600", + "type": "string" + }, + { + "value": "720", + "type": "string" + }, + { + "value": "840", + "type": "string" + }, + { + "value": "full-screen", + "type": "string" + }, + { + "value": "full-width", + "type": "string" + } + ], + "optional": false, + "required": false + } + ], + "methods": [ + { + "name": "closeModal", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "(reason: T) => Promise", + "parameters": [ + { + "name": "reason", + "type": "T", + "docs": "" + } + ], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + }, + "T": { + "location": "global", + "id": "global::T" + } + }, + "return": "Promise" + }, + "signature": "closeModal(reason: T) => Promise", + "parameters": [ + { + "name": "reason", + "type": "T", + "docs": "" + } + ], + "docs": "Close the dialog", + "docsTags": [] + }, + { + "name": "dismissModal", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "(reason?: T) => Promise", + "parameters": [ + { + "name": "reason", + "type": "T", + "docs": "" + } + ], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + }, + "T": { + "location": "global", + "id": "global::T" + } + }, + "return": "Promise" + }, + "signature": "dismissModal(reason?: T) => Promise", + "parameters": [ + { + "name": "reason", + "type": "T", + "docs": "" + } + ], + "docs": "Dismiss the dialog", + "docsTags": [] + }, + { + "name": "showModal", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + }, + "HTMLDialogElement": { + "location": "global", + "id": "global::HTMLDialogElement" + } + }, + "return": "Promise" + }, + "signature": "showModal() => Promise", + "parameters": [], + "docs": "Show the dialog", + "docsTags": [] + } + ], + "events": [ + { + "event": "dialogClose", + "detail": "any", + "bubbles": true, + "complexType": { + "original": "any", + "resolved": "any", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Dialog close", + "docsTags": [] + }, + { + "event": "dialogDismiss", + "detail": "any", + "bubbles": true, + "complexType": { + "original": "any", + "resolved": "any", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Dialog cancel", + "docsTags": [] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/modal-content", + "filePath": "src/components/modal-content/modal-content.tsx", + "fileName": "modal-content.tsx", + "readmePath": "src/components/modal-content/readme.md", + "usagesDir": "src/components/modal-content/usage", + "tag": "ix-modal-content", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "2.0.0" + } + ], + "encapsulation": "shadow", + "dependents": [ + "ix-application-switch-modal" + ], + "dependencies": [], + "dependencyGraph": { + "ix-application-switch-modal": [ + "ix-modal-content" + ] + }, + "props": [], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/playground", + "filePath": "src/components/playground/example-modal.tsx", + "fileName": "example-modal.tsx", + "readmePath": "src/components/playground/readme.md", + "usagesDir": "src/components/playground/usage", + "tag": "ix-modal-example", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "none", + "dependents": [], + "dependencies": [ + "ix-icon-button", + "ix-button" + ], + "dependencyGraph": { + "ix-modal-example": [ + "ix-icon-button", + "ix-button" + ], + "ix-icon-button": [ + "ix-spinner" + ], + "ix-button": [ + "ix-spinner" + ] + }, + "props": [], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/modal-footer", + "filePath": "src/components/modal-footer/modal-footer.tsx", + "fileName": "modal-footer.tsx", + "readmePath": "src/components/modal-footer/readme.md", + "usagesDir": "src/components/modal-footer/usage", + "tag": "ix-modal-footer", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "2.0.0" + } + ], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/modal-header", + "filePath": "src/components/modal-header/modal-header.tsx", + "fileName": "modal-header.tsx", + "readmePath": "src/components/modal-header/readme.md", + "usagesDir": "src/components/modal-header/usage", + "tag": "ix-modal-header", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "2.0.0" + } + ], + "encapsulation": "shadow", + "dependents": [ + "ix-application-switch-modal" + ], + "dependencies": [ + "ix-typography", + "ix-icon-button" + ], + "dependencyGraph": { + "ix-modal-header": [ + "ix-typography", + "ix-icon-button" + ], + "ix-icon-button": [ + "ix-spinner" + ], + "ix-application-switch-modal": [ + "ix-modal-header" + ] + }, + "props": [ + { + "name": "hideClose", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, - "mutable": true, - "attr": "show-about", + "mutable": false, + "attr": "hide-close", "reflectToAttr": false, - "docs": "Is about tab visible", + "docs": "Hide the close button", "docsTags": [], "default": "false", "values": [ @@ -9577,283 +13641,116 @@ "required": false }, { - "name": "showSettings", - "type": "boolean", + "name": "icon", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, - "mutable": true, - "attr": "show-settings", + "mutable": false, + "attr": "icon", "reflectToAttr": false, - "docs": "Is settings tab visible", + "docs": "Icon of the Header", "docsTags": [], - "default": "false", "values": [ { - "type": "boolean" + "type": "string" } ], "optional": false, "required": false }, { - "name": "startExpanded", - "type": "boolean", + "name": "iconColor", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "start-expanded", + "attr": "icon-color", "reflectToAttr": false, - "docs": "If set the menu will be expanded initially. This will only take effect at the breakpoint 'lg'.", - "docsTags": [ - { - "name": "since", - "text": "2.2.0" - } - ], - "default": "false", + "docs": "Icon color", + "docsTags": [], "values": [ { - "type": "boolean" + "type": "string" } ], "optional": false, "required": false } ], - "methods": [ - { - "name": "toggleAbout", - "returns": { - "type": "Promise", - "docs": "" - }, - "complexType": { - "signature": "(show: boolean) => Promise", - "parameters": [ - { - "name": "show", - "type": "boolean", - "docs": "" - } - ], - "references": { - "Promise": { - "location": "global", - "id": "global::Promise" - } - }, - "return": "Promise" - }, - "signature": "toggleAbout(show: boolean) => Promise", - "parameters": [ - { - "name": "show", - "type": "boolean", - "docs": "" - } - ], - "docs": "Toggle About tabs", - "docsTags": [ - { - "name": "param", - "text": "show" - } - ] - }, - { - "name": "toggleMapExpand", - "returns": { - "type": "Promise", - "docs": "" - }, - "complexType": { - "signature": "(show?: boolean) => Promise", - "parameters": [ - { - "name": "show", - "type": "boolean", - "docs": "" - } - ], - "references": { - "Promise": { - "location": "global", - "id": "global::Promise" - } - }, - "return": "Promise" - }, - "signature": "toggleMapExpand(show?: boolean) => Promise", - "parameters": [ - { - "name": "show", - "type": "boolean", - "docs": "" - } - ], - "docs": "Toggle map sidebar expand", - "docsTags": [ - { - "name": "param", - "text": "show" - } - ] - }, - { - "name": "toggleMenu", - "returns": { - "type": "Promise", - "docs": "" - }, - "complexType": { - "signature": "(show?: boolean) => Promise", - "parameters": [ - { - "name": "show", - "type": "boolean", - "docs": "" - } - ], - "references": { - "Promise": { - "location": "global", - "id": "global::Promise" - } - }, - "return": "Promise" - }, - "signature": "toggleMenu(show?: boolean) => Promise", - "parameters": [ - { - "name": "show", - "type": "boolean", - "docs": "" - } - ], - "docs": "Toggle menu", - "docsTags": [ - { - "name": "param", - "text": "show" - } - ] - }, + "methods": [], + "events": [ { - "name": "toggleSettings", - "returns": { - "type": "Promise", - "docs": "" - }, + "event": "closeClick", + "detail": "MouseEvent", + "bubbles": true, "complexType": { - "signature": "(show: boolean) => Promise", - "parameters": [ - { - "name": "show", - "type": "boolean", - "docs": "" - } - ], + "original": "MouseEvent", + "resolved": "MouseEvent", "references": { - "Promise": { + "MouseEvent": { "location": "global", - "id": "global::Promise" + "id": "global::MouseEvent" } - }, - "return": "Promise" - }, - "signature": "toggleSettings(show: boolean) => Promise", - "parameters": [ - { - "name": "show", - "type": "boolean", - "docs": "" - } - ], - "docs": "Toggle Settings tabs", - "docsTags": [ - { - "name": "param", - "text": "show" } - ] - } - ], - "events": [ - { - "event": "expandChange", - "detail": "boolean", - "bubbles": true, - "complexType": { - "original": "boolean", - "resolved": "boolean", - "references": {} - }, - "cancelable": true, - "composed": true, - "docs": "Menu expanded", - "docsTags": [] - }, - { - "event": "mapExpandChange", - "detail": "boolean", - "bubbles": true, - "complexType": { - "original": "boolean", - "resolved": "boolean", - "references": {} }, "cancelable": true, "composed": true, - "docs": "Map Sidebar expanded", + "docs": "Emits when close icon is clicked and closes the modal\nCan be prevented, in which case only the event is triggered, and the modal remains open", "docsTags": [] } ], "styles": [], "slots": [], "parts": [], - "listeners": [ - { - "event": "resize", - "target": "window", - "capture": false, - "passive": true - }, - { - "event": "close", - "capture": false, - "passive": false - } - ] + "listeners": [] }, { - "dirPath": "src/components/menu-about", - "filePath": "src/components/menu-about/menu-about.tsx", - "fileName": "menu-about.tsx", - "readmePath": "src/components/menu-about/readme.md", - "usagesDir": "src/components/menu-about/usage", - "tag": "ix-menu-about", + "dirPath": "src/components/input", + "filePath": "src/components/input/number-input.tsx", + "fileName": "number-input.tsx", + "readmePath": "src/components/input/readme.md", + "usagesDir": "src/components/input/usage", + "tag": "ix-number-input", "overview": "", "usage": {}, "docs": "", - "docsTags": [], + "docsTags": [ + { + "name": "since", + "text": "2.6.0" + }, + { + "name": "form-ready", + "text": "2.6.0" + } + ], "encapsulation": "shadow", "dependents": [], "dependencies": [ - "ix-tab-item", - "ix-icon-button", - "ix-tabs" + "ix-field-wrapper", + "ix-icon-button" ], "dependencyGraph": { - "ix-menu-about": [ - "ix-tab-item", - "ix-icon-button", - "ix-tabs" + "ix-number-input": [ + "ix-field-wrapper", + "ix-icon-button" + ], + "ix-field-wrapper": [ + "ix-field-label", + "ix-tooltip", + "ix-typography" + ], + "ix-field-label": [ + "ix-typography" + ], + "ix-tooltip": [ + "ix-typography" ], "ix-icon-button": [ "ix-spinner" @@ -9861,28 +13758,50 @@ }, "props": [ { - "name": "activeTabLabel", + "name": "allowedCharactersPattern", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, - "mutable": true, - "attr": "active-tab-label", + "mutable": false, + "attr": "allowed-characters-pattern", "reflectToAttr": false, - "docs": "Active tab", + "docs": "The allowed characters pattern for the input field", "docsTags": [], "values": [ { "type": "string" } ], + "optional": true, + "required": false + }, + { + "name": "disabled", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "disabled", + "reflectToAttr": false, + "docs": "Disables the input field", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], "optional": false, "required": false }, { - "name": "label", + "name": "helperText", "type": "string", "complexType": { "original": "string", @@ -9890,86 +13809,60 @@ "references": {} }, "mutable": false, - "attr": "label", + "attr": "helper-text", "reflectToAttr": false, - "docs": "Content of the header", + "docs": "The helper text for the input field", "docsTags": [], - "default": "'About & legal information'", "values": [ { "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "show", - "type": "boolean", + "name": "infoText", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "show", + "attr": "info-text", "reflectToAttr": false, - "docs": "Internal", + "docs": "The info text for the input field", "docsTags": [], - "default": "false", "values": [ { - "type": "boolean" + "type": "string" } ], - "optional": false, + "optional": true, "required": false - } - ], - "methods": [], - "events": [ + }, { - "event": "close", - "detail": "CustomCloseEvent", - "bubbles": true, + "name": "invalidText", + "type": "string", "complexType": { - "original": "CustomCloseEvent", - "resolved": "CustomCloseEvent", - "references": { - "CustomCloseEvent": { - "location": "import", - "path": "../utils/menu-tabs/menu-tabs-utils", - "id": "src/components/utils/menu-tabs/menu-tabs-utils.ts::CustomCloseEvent" - } - } + "original": "string", + "resolved": "string", + "references": {} }, - "cancelable": true, - "composed": true, - "docs": "About and Legal closed", - "docsTags": [] - } - ], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/menu-about-item", - "filePath": "src/components/menu-about-item/menu-about-item.tsx", - "fileName": "menu-about-item.tsx", - "readmePath": "src/components/menu-about-item/readme.md", - "usagesDir": "src/components/menu-about-item/usage", - "tag": "ix-menu-about-item", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [], - "dependencyGraph": {}, - "props": [ + "mutable": false, + "attr": "invalid-text", + "reflectToAttr": false, + "docs": "The error text for the input field", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + }, { "name": "label", "type": "string", @@ -9981,79 +13874,108 @@ "mutable": false, "attr": "label", "reflectToAttr": true, - "docs": "About Item label", + "docs": "The label for the input field", "docsTags": [], "values": [ { "type": "string" } ], - "optional": false, + "optional": true, "required": false - } - ], - "methods": [], - "events": [ + }, { - "event": "labelChange", - "detail": "CustomLabelChangeEvent", - "bubbles": true, + "name": "max", + "type": "number | string", "complexType": { - "original": "CustomLabelChangeEvent", - "resolved": "CustomLabelChangeEvent", - "references": { - "CustomLabelChangeEvent": { - "location": "import", - "path": "../utils/menu-tabs/menu-tabs-utils", - "id": "src/components/utils/menu-tabs/menu-tabs-utils.ts::CustomLabelChangeEvent" - } + "original": "string | number", + "resolved": "number | string", + "references": {} + }, + "mutable": false, + "attr": "max", + "reflectToAttr": false, + "docs": "The maximum value for the input field", + "docsTags": [], + "values": [ + { + "type": "number" + }, + { + "type": "string" } + ], + "optional": true, + "required": false + }, + { + "name": "min", + "type": "number | string", + "complexType": { + "original": "string | number", + "resolved": "number | string", + "references": {} }, - "cancelable": true, - "composed": true, - "docs": "Label changed", - "docsTags": [] - } - ], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/menu-about-news", - "filePath": "src/components/menu-about-news/menu-about-news.tsx", - "fileName": "menu-about-news.tsx", - "readmePath": "src/components/menu-about-news/readme.md", - "usagesDir": "src/components/menu-about-news/usage", - "tag": "ix-menu-about-news", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [ - "ix-typography", - "ix-icon-button", - "ix-button" - ], - "dependencyGraph": { - "ix-menu-about-news": [ - "ix-typography", - "ix-icon-button", - "ix-button" - ], - "ix-icon-button": [ - "ix-spinner" - ], - "ix-button": [ - "ix-spinner" - ] - }, - "props": [ + "mutable": false, + "attr": "min", + "reflectToAttr": false, + "docs": "The minimum value for the input field", + "docsTags": [], + "values": [ + { + "type": "number" + }, + { + "type": "string" + } + ], + "optional": true, + "required": false + }, + { + "name": "name", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "name", + "reflectToAttr": true, + "docs": "name of the input element", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + }, + { + "name": "pattern", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "pattern", + "reflectToAttr": false, + "docs": "The pattern for the input field", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + }, { - "name": "aboutItemLabel", + "name": "placeholder", "type": "string", "complexType": { "original": "string", @@ -10061,20 +13983,20 @@ "references": {} }, "mutable": false, - "attr": "about-item-label", - "reflectToAttr": false, - "docs": "Subtitle of the about news", + "attr": "placeholder", + "reflectToAttr": true, + "docs": "placeholder of the input element", "docsTags": [], "values": [ { "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "expanded", + "name": "readonly", "type": "boolean", "complexType": { "original": "boolean", @@ -10082,9 +14004,9 @@ "references": {} }, "mutable": false, - "attr": "expanded", + "attr": "readonly", "reflectToAttr": false, - "docs": "Internal", + "docs": "Indicates if the field is read-only", "docsTags": [], "default": "false", "values": [ @@ -10096,29 +14018,71 @@ "required": false }, { - "name": "i18nShowMore", - "type": "string", + "name": "required", + "type": "boolean", "complexType": { - "original": "string", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "i-1-8n-show-more", - "reflectToAttr": false, - "docs": "", + "attr": "required", + "reflectToAttr": true, + "docs": "Indicates if the field is required", "docsTags": [], - "default": "'Show more'", + "default": "false", "values": [ { - "type": "string" + "type": "boolean" } ], "optional": false, "required": false }, { - "name": "label", + "name": "showStepperButtons", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "show-stepper-buttons", + "reflectToAttr": false, + "docs": "Indicates if the stepper buttons should be shown", + "docsTags": [], + "values": [ + { + "type": "boolean" + } + ], + "optional": true, + "required": false + }, + { + "name": "showTextAsTooltip", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "show-text-as-tooltip", + "reflectToAttr": false, + "docs": "Indicates if the text should be shown as a tooltip", + "docsTags": [], + "values": [ + { + "type": "boolean" + } + ], + "optional": true, + "required": false + }, + { + "name": "validText", "type": "string", "complexType": { "original": "string", @@ -10126,30 +14090,30 @@ "references": {} }, "mutable": false, - "attr": "label", + "attr": "valid-text", "reflectToAttr": false, - "docs": "Title of the about news", + "docs": "The valid text for the input field", "docsTags": [], "values": [ { "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "offsetBottom", + "name": "value", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, - "mutable": false, - "attr": "offset-bottom", - "reflectToAttr": false, - "docs": "Bottom offset", + "mutable": true, + "attr": "value", + "reflectToAttr": true, + "docs": "The value of the input field", "docsTags": [], "default": "0", "values": [ @@ -10161,32 +14125,80 @@ "required": false }, { - "name": "show", - "type": "boolean", + "name": "warningText", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, - "mutable": true, - "attr": "show", - "reflectToAttr": true, - "docs": "Show about news", + "mutable": false, + "attr": "warning-text", + "reflectToAttr": false, + "docs": "The warning text for the input field", "docsTags": [], - "default": "false", "values": [ { - "type": "boolean" + "type": "string" } ], - "optional": false, + "optional": true, "required": false } ], - "methods": [], + "methods": [ + { + "name": "focusInput", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "focusInput() => Promise", + "parameters": [], + "docs": "Focuses the input field", + "docsTags": [] + }, + { + "name": "getNativeInputElement", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + }, + "HTMLInputElement": { + "location": "global", + "id": "global::HTMLInputElement" + } + }, + "return": "Promise" + }, + "signature": "getNativeInputElement() => Promise", + "parameters": [], + "docs": "Returns the native input element used under the hood", + "docsTags": [] + } + ], "events": [ { - "event": "closePopover", + "event": "ixBlur", "detail": "void", "bubbles": true, "complexType": { @@ -10196,26 +14208,40 @@ }, "cancelable": true, "composed": true, - "docs": "Popover closed", + "docs": "Event emitted when the input field loses focus", "docsTags": [] }, { - "event": "showMore", - "detail": "MouseEvent", + "event": "validityStateChange", + "detail": "ValidityState", "bubbles": true, "complexType": { - "original": "MouseEvent", - "resolved": "MouseEvent", + "original": "ValidityState", + "resolved": "ValidityState", "references": { - "MouseEvent": { + "ValidityState": { "location": "global", - "id": "global::MouseEvent" + "id": "global::ValidityState" } } }, "cancelable": true, "composed": true, - "docs": "Show More button is pressed", + "docs": "Event emitted when the validity state of the input field changes", + "docsTags": [] + }, + { + "event": "valueChange", + "detail": "number", + "bubbles": true, + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Event emitted when the value of the input field changes", "docsTags": [] } ], @@ -10225,63 +14251,113 @@ "listeners": [] }, { - "dirPath": "src/components/menu-avatar", - "filePath": "src/components/menu-avatar/menu-avatar.tsx", - "fileName": "menu-avatar.tsx", - "readmePath": "src/components/menu-avatar/readme.md", - "usagesDir": "src/components/menu-avatar/usage", - "tag": "ix-menu-avatar", + "dirPath": "src/components/pagination", + "filePath": "src/components/pagination/pagination.tsx", + "fileName": "pagination.tsx", + "readmePath": "src/components/pagination/readme.md", + "usagesDir": "src/components/pagination/usage", + "tag": "ix-pagination", "overview": "", "usage": {}, "docs": "", - "docsTags": [], + "docsTags": [ + { + "name": "since", + "text": "1.5.0" + } + ], "encapsulation": "shadow", "dependents": [], "dependencies": [ - "ix-avatar", - "ix-dropdown", - "ix-menu-avatar-item" + "ix-icon-button", + "ix-typography", + "ix-select", + "ix-select-item", + "ix-spinner" ], "dependencyGraph": { - "ix-menu-avatar": [ - "ix-avatar", - "ix-dropdown", - "ix-menu-avatar-item" - ], - "ix-avatar": [ - "ix-dropdown", - "ix-divider", + "ix-pagination": [ + "ix-icon-button", "ix-typography", + "ix-select", + "ix-select-item", "ix-spinner" ], - "ix-menu-avatar-item": [ + "ix-icon-button": [ + "ix-spinner" + ], + "ix-select": [ + "ix-select-item", + "ix-field-wrapper", + "ix-filter-chip", + "ix-icon-button", + "ix-dropdown", + "ix-dropdown-item" + ], + "ix-select-item": [ "ix-dropdown-item" + ], + "ix-field-wrapper": [ + "ix-field-label", + "ix-tooltip", + "ix-typography" + ], + "ix-field-label": [ + "ix-typography" + ], + "ix-tooltip": [ + "ix-typography" + ], + "ix-filter-chip": [ + "ix-icon-button" ] }, "props": [ { - "name": "bottom", - "type": "string", + "name": "advanced", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "advanced", + "reflectToAttr": false, + "docs": "Advanced mode", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "count", + "type": "number", "complexType": { - "original": "string", - "resolved": "string", + "original": "number", + "resolved": "number", "references": {} }, "mutable": false, - "attr": "bottom", + "attr": "count", "reflectToAttr": false, - "docs": "Second line of text", + "docs": "Total number of pages", "docsTags": [], "values": [ { - "type": "string" + "type": "number" } ], "optional": false, "required": false }, { - "name": "i18nLogout", + "name": "i18nItems", "type": "string", "complexType": { "original": "string", @@ -10289,11 +14365,11 @@ "references": {} }, "mutable": false, - "attr": "i-1-8n-logout", + "attr": "i-1-8n-items", "reflectToAttr": false, - "docs": "Use for translation", + "docs": "/**\n i18n", "docsTags": [], - "default": "'Logout'", + "default": "'Items'", "values": [ { "type": "string" @@ -10303,7 +14379,7 @@ "required": false }, { - "name": "image", + "name": "i18nOf", "type": "string", "complexType": { "original": "string", @@ -10311,15 +14387,11 @@ "references": {} }, "mutable": false, - "attr": "image", + "attr": "i-1-8n-of", "reflectToAttr": false, - "docs": "Display a avatar image", - "docsTags": [ - { - "name": "since", - "text": "1.4.0" - } - ], + "docs": "i18n", + "docsTags": [], + "default": "'of'", "values": [ { "type": "string" @@ -10329,7 +14401,7 @@ "required": false }, { - "name": "initials", + "name": "i18nPage", "type": "string", "complexType": { "original": "string", @@ -10337,15 +14409,11 @@ "references": {} }, "mutable": false, - "attr": "initials", + "attr": "i-1-8n-page", "reflectToAttr": false, - "docs": "Display the initials of the user. Will be overwritten by image", - "docsTags": [ - { - "name": "since", - "text": "1.4.0" - } - ], + "docs": "i18n", + "docsTags": [], + "default": "'Page'", "values": [ { "type": "string" @@ -10355,48 +14423,66 @@ "required": false }, { - "name": "showLogoutButton", - "type": "boolean", + "name": "itemCount", + "type": "number", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "number", + "resolved": "number", "references": {} }, "mutable": false, - "attr": "show-logout-button", + "attr": "item-count", "reflectToAttr": false, - "docs": "Control the visibility of the logout button", - "docsTags": [ + "docs": "Number of items shown at once.\nCan only be changed in advaced mode.", + "docsTags": [], + "default": "15", + "values": [ { - "name": "since", - "text": "2.1.0" + "type": "number" } ], - "default": "true", + "optional": false, + "required": false + }, + { + "name": "selectedPage", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": true, + "attr": "selected-page", + "reflectToAttr": false, + "docs": "Zero based index of currently selected page", + "docsTags": [], + "default": "0", "values": [ { - "type": "boolean" + "type": "number" } ], "optional": false, "required": false }, { - "name": "top", - "type": "string", + "name": "showItemCount", + "type": "boolean", "complexType": { - "original": "string", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "top", + "attr": "show-item-count", "reflectToAttr": false, - "docs": "First line of text", + "docs": "Show item count in advanced mode", "docsTags": [], + "default": "true", "values": [ { - "type": "string" + "type": "boolean" } ], "optional": false, @@ -10406,17 +14492,31 @@ "methods": [], "events": [ { - "event": "logoutClick", - "detail": "any", + "event": "itemCountChanged", + "detail": "number", "bubbles": true, "complexType": { - "original": "any", - "resolved": "any", + "original": "number", + "resolved": "number", "references": {} }, "cancelable": true, "composed": true, - "docs": "Logout click", + "docs": "Item count change event", + "docsTags": [] + }, + { + "event": "pageSelected", + "detail": "number", + "bubbles": true, + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Page selection event", "docsTags": [] } ], @@ -10426,34 +14526,124 @@ "listeners": [] }, { - "dirPath": "src/components/menu-avatar-item", - "filePath": "src/components/menu-avatar-item/menu-avatar-item.tsx", - "fileName": "menu-avatar-item.tsx", - "readmePath": "src/components/menu-avatar-item/readme.md", - "usagesDir": "src/components/menu-avatar-item/usage", - "tag": "ix-menu-avatar-item", + "dirPath": "src/components/pane", + "filePath": "src/components/pane/pane.tsx", + "fileName": "pane.tsx", + "readmePath": "src/components/pane/readme.md", + "usagesDir": "src/components/pane/usage", + "tag": "ix-pane", "overview": "", "usage": {}, "docs": "", - "docsTags": [], - "encapsulation": "shadow", - "dependents": [ - "ix-menu-avatar" + "docsTags": [ + { + "name": "since", + "text": "2.1.0" + } ], + "encapsulation": "shadow", + "dependents": [], "dependencies": [ - "ix-dropdown-item" + "ix-icon-button", + "ix-typography" ], "dependencyGraph": { - "ix-menu-avatar-item": [ - "ix-dropdown-item" + "ix-pane": [ + "ix-icon-button", + "ix-typography" ], - "ix-menu-avatar": [ - "ix-menu-avatar-item" + "ix-icon-button": [ + "ix-spinner" ] }, "props": [ { - "name": "icon", + "name": "borderless", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "borderless", + "reflectToAttr": false, + "docs": "Toggle the border of the pane.\nDefaults to the borderless attribute of the pane layout. If used standalone it defaults to false.", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "composition", + "type": "\"bottom\" | \"left\" | \"right\" | \"top\"", + "complexType": { + "original": "Composition", + "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"", + "references": { + "Composition": { + "location": "local", + "path": "src/components/pane/pane.tsx", + "id": "src/components/pane/pane.tsx::Composition" + } + } + }, + "mutable": true, + "attr": "composition", + "reflectToAttr": false, + "docs": "Defines the position of the pane inside it's container.\nInside a pane layout this property will automatically be set to the name of slot the pane is assigned to.", + "docsTags": [], + "default": "'top'", + "values": [ + { + "value": "bottom", + "type": "string" + }, + { + "value": "left", + "type": "string" + }, + { + "value": "right", + "type": "string" + }, + { + "value": "top", + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "expanded", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": true, + "attr": "expanded", + "reflectToAttr": false, + "docs": "State of the pane", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "heading", "type": "string", "complexType": { "original": "string", @@ -10461,9 +14651,9 @@ "references": {} }, "mutable": false, - "attr": "icon", + "attr": "heading", "reflectToAttr": false, - "docs": "Avatar dropdown icon", + "docs": "Title of the side panel", "docsTags": [], "values": [ { @@ -10474,95 +14664,27 @@ "required": false }, { - "name": "label", - "type": "string", + "name": "hideOnCollapse", + "type": "boolean", "complexType": { - "original": "string", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "label", + "attr": "hide-on-collapse", "reflectToAttr": false, - "docs": "Avatar dropdown label", + "docs": "Define if the pane should have a collapsed state", "docsTags": [], + "default": "false", "values": [ { - "type": "string" + "type": "boolean" } ], "optional": false, "required": false - } - ], - "methods": [], - "events": [ - { - "event": "itemClick", - "detail": "MouseEvent", - "bubbles": true, - "complexType": { - "original": "MouseEvent", - "resolved": "MouseEvent", - "references": { - "MouseEvent": { - "location": "global", - "id": "global::MouseEvent" - } - } - }, - "cancelable": true, - "composed": true, - "docs": "Avatar dropdown item clicked", - "docsTags": [] - } - ], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/menu-category", - "filePath": "src/components/menu-category/menu-category.tsx", - "fileName": "menu-category.tsx", - "readmePath": "src/components/menu-category/readme.md", - "usagesDir": "src/components/menu-category/usage", - "tag": "ix-menu-category", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [ - { - "name": "since", - "text": "2.0.0" - } - ], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [ - "ix-menu-item", - "ix-dropdown", - "ix-dropdown-item", - "ix-typography", - "ix-divider" - ], - "dependencyGraph": { - "ix-menu-category": [ - "ix-menu-item", - "ix-dropdown", - "ix-dropdown-item", - "ix-typography", - "ix-divider" - ], - "ix-menu-item": [ - "ix-tooltip" - ], - "ix-tooltip": [ - "ix-typography" - ] - }, - "props": [ + }, { "name": "icon", "type": "string", @@ -10574,7 +14696,7 @@ "mutable": false, "attr": "icon", "reflectToAttr": false, - "docs": "Icon of the category", + "docs": "Name of the icon", "docsTags": [], "values": [ { @@ -10585,20 +14707,46 @@ "required": false }, { - "name": "label", - "type": "string", + "name": "size", + "type": "\"240px\" | \"320px\" | \"33%\" | \"360px\" | \"480px\" | \"50%\" | \"600px\"", "complexType": { - "original": "string", - "resolved": "string", + "original": "| '240px'\n | '320px'\n | '360px'\n | '480px'\n | '600px'\n | '33%'\n | '50%'", + "resolved": "\"240px\" | \"320px\" | \"33%\" | \"360px\" | \"480px\" | \"50%\" | \"600px\"", "references": {} }, "mutable": false, - "attr": "label", + "attr": "size", "reflectToAttr": false, - "docs": "Display name of the category", + "docs": "The maximum size of the sidebar, when it is expanded", "docsTags": [], + "default": "'240px'", "values": [ { + "value": "240px", + "type": "string" + }, + { + "value": "320px", + "type": "string" + }, + { + "value": "33%", + "type": "string" + }, + { + "value": "360px", + "type": "string" + }, + { + "value": "480px", + "type": "string" + }, + { + "value": "50%", + "type": "string" + }, + { + "value": "600px", "type": "string" } ], @@ -10606,21 +14754,27 @@ "required": false }, { - "name": "notifications", - "type": "number", + "name": "variant", + "type": "\"floating\" | \"inline\"", "complexType": { - "original": "number", - "resolved": "number", + "original": "'floating' | 'inline'", + "resolved": "\"floating\" | \"inline\"", "references": {} }, "mutable": false, - "attr": "notifications", + "attr": "variant", "reflectToAttr": false, - "docs": "Show notification count on the category", + "docs": "Variant of the side pane.\nDefaults to the variant attribute of the pane layout. If used standalone it defaults to inline.", "docsTags": [], + "default": "'inline'", "values": [ { - "type": "number" + "value": "floating", + "type": "string" + }, + { + "value": "inline", + "type": "string" } ], "optional": false, @@ -10628,60 +14782,96 @@ } ], "methods": [], - "events": [], + "events": [ + { + "event": "borderlessChanged", + "detail": "{ slot: string; borderless: boolean; }", + "bubbles": true, + "complexType": { + "original": "BorderlessChangedEvent", + "resolved": "{ slot: string; borderless: boolean; }", + "references": { + "BorderlessChangedEvent": { + "location": "local", + "path": "src/components/pane/pane.tsx", + "id": "src/components/pane/pane.tsx::BorderlessChangedEvent" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "This event is triggered when the variant of the pane is changed", + "docsTags": [] + }, + { + "event": "expandedChanged", + "detail": "{ slot: string; expanded: boolean; }", + "bubbles": true, + "complexType": { + "original": "ExpandedChangedEvent", + "resolved": "{ slot: string; expanded: boolean; }", + "references": { + "ExpandedChangedEvent": { + "location": "local", + "path": "src/components/pane/pane.tsx", + "id": "src/components/pane/pane.tsx::ExpandedChangedEvent" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "This event is triggered when the pane either expands or contracts", + "docsTags": [] + }, + { + "event": "variantChanged", + "detail": "{ slot: string; variant: \"floating\" | \"inline\"; }", + "bubbles": true, + "complexType": { + "original": "VariantChangedEvent", + "resolved": "{ slot: string; variant: \"floating\" | \"inline\"; }", + "references": { + "VariantChangedEvent": { + "location": "local", + "path": "src/components/pane/pane.tsx", + "id": "src/components/pane/pane.tsx::VariantChangedEvent" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "This event is triggered when the variant of the pane is changed", + "docsTags": [] + } + ], "styles": [], "slots": [], "parts": [], - "listeners": [ - { - "event": "closeOtherCategories", - "target": "window", - "capture": false, - "passive": false - } - ] + "listeners": [] }, { - "dirPath": "src/components/menu-item", - "filePath": "src/components/menu-item/menu-item.tsx", - "fileName": "menu-item.tsx", - "readmePath": "src/components/menu-item/readme.md", - "usagesDir": "src/components/menu-item/usage", - "tag": "ix-menu-item", + "dirPath": "src/components/pane-layout", + "filePath": "src/components/pane-layout/pane-layout.tsx", + "fileName": "pane-layout.tsx", + "readmePath": "src/components/pane-layout/readme.md", + "usagesDir": "src/components/pane-layout/usage", + "tag": "ix-pane-layout", "overview": "", - "usage": {}, - "docs": "", - "docsTags": [ - { - "name": "slot", - "text": "menu-item-label Custom label" - } - ], - "encapsulation": "shadow", - "dependents": [ - "ix-menu", - "ix-menu-category" - ], - "dependencies": [ - "ix-tooltip" - ], - "dependencyGraph": { - "ix-menu-item": [ - "ix-tooltip" - ], - "ix-tooltip": [ - "ix-typography" - ], - "ix-menu": [ - "ix-menu-item" - ], - "ix-menu-category": [ - "ix-menu-item" - ] - }, + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "2.1.0" + } + ], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, "props": [ { - "name": "active", + "name": "borderless", "type": "boolean", "complexType": { "original": "boolean", @@ -10689,9 +14879,9 @@ "references": {} }, "mutable": false, - "attr": "active", + "attr": "borderless", "reflectToAttr": false, - "docs": "State to display active", + "docs": "Set the default border state for all panes in the layout", "docsTags": [], "default": "false", "values": [ @@ -10703,51 +14893,101 @@ "required": false }, { - "name": "bottom", - "type": "boolean", + "name": "layout", + "type": "\"full-horizontal\" | \"full-vertical\"", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "'full-vertical' | 'full-horizontal'", + "resolved": "\"full-horizontal\" | \"full-vertical\"", "references": {} }, "mutable": false, - "attr": "bottom", + "attr": "layout", "reflectToAttr": false, - "docs": "Caution: this is no longer working. Please use slot=\"bottom\" instead.\n\nPlace tab on bottom", + "docs": "Choose the layout of the panes.\nWhen set to 'full-vertical' the vertical panes (left, right) will get the full height.\nWhen set to 'full-horizontal' the horizontal panes (top, bottom) will get the full width.", "docsTags": [], - "default": "false", + "default": "'full-vertical'", "values": [ { - "type": "boolean" + "value": "full-horizontal", + "type": "string" + }, + { + "value": "full-vertical", + "type": "string" } ], "optional": false, "required": false }, { - "name": "disabled", - "type": "boolean", + "name": "variant", + "type": "\"floating\" | \"inline\"", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "'floating' | 'inline'", + "resolved": "\"floating\" | \"inline\"", "references": {} }, "mutable": false, - "attr": "disabled", + "attr": "variant", "reflectToAttr": false, - "docs": "Disable tab and remove event handlers", + "docs": "Set the default variant for all panes in the layout", "docsTags": [], - "default": "false", + "default": "'inline'", "values": [ { - "type": "boolean" + "value": "floating", + "type": "string" + }, + { + "value": "inline", + "type": "string" } ], "optional": false, "required": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [ + { + "event": "slotChanged", + "capture": false, + "passive": false }, { - "name": "home", + "event": "hideOnCollapseChanged", + "capture": false, + "passive": false + }, + { + "event": "variantChanged", + "capture": false, + "passive": false + } + ] + }, + { + "dirPath": "src/components/pill", + "filePath": "src/components/pill/pill.tsx", + "fileName": "pill.tsx", + "readmePath": "src/components/pill/readme.md", + "usagesDir": "src/components/pill/usage", + "tag": "ix-pill", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [ + { + "name": "alignLeft", "type": "boolean", "complexType": { "original": "boolean", @@ -10755,9 +14995,9 @@ "references": {} }, "mutable": false, - "attr": "home", + "attr": "align-left", "reflectToAttr": false, - "docs": "Move the Tab to a top position.", + "docs": "Align pill content left", "docsTags": [], "default": "false", "values": [ @@ -10769,164 +15009,45 @@ "required": false }, { - "name": "icon", - "type": "string", - "complexType": { - "original": "string", - "resolved": "string", - "references": {} - }, - "mutable": true, - "attr": "icon", - "reflectToAttr": false, - "docs": "Name of the icon you want to display. Icon names can be resolved from the documentation", - "docsTags": [ - { - "name": "link", - "text": "https://ix.siemens.io/docs/icon-library/icons" - } - ], - "values": [ - { - "type": "string" - } - ], - "optional": true, - "required": false - }, - { - "name": "label", + "name": "background", "type": "string", "complexType": { - "original": "string", + "original": "string | undefined", "resolved": "string", "references": {} }, "mutable": false, - "attr": "label", - "reflectToAttr": false, - "docs": "Label of the menu item. Will also be used as tooltip text", - "docsTags": [ - { - "name": "since", - "text": "2.2.0" - } - ], - "values": [ - { - "type": "string" - } - ], - "optional": true, - "required": false - }, - { - "name": "notifications", - "type": "number", - "complexType": { - "original": "number", - "resolved": "number", - "references": {} - }, - "mutable": false, - "attr": "notifications", + "attr": "background", "reflectToAttr": false, - "docs": "Show notification count on tab", + "docs": "Custom color for pill. Only working for `variant='custom'`", "docsTags": [], "values": [ { - "type": "number" + "type": "string" } ], - "optional": true, + "optional": false, "required": false }, { - "name": "tabIcon", + "name": "color", "type": "string", "complexType": { - "original": "string", + "original": "string | undefined", "resolved": "string", "references": {} }, - "mutable": true, - "attr": "tab-icon", + "mutable": false, + "attr": "color", "reflectToAttr": false, - "docs": "Name of the icon you want to display. Icon names can be resolved from the documentation", + "docs": "Custom font color for pill. Only working for `variant='custom'`", "docsTags": [ - { - "name": "link", - "text": "https://ix.siemens.io/docs/icon-library/icons" - }, { "name": "deprecated", - "text": "since 2.0.0 use `icon` property. Will be removed in 3.0.0" - } - ], - "deprecation": "since 2.0.0 use `icon` property. Will be removed in 3.0.0", - "values": [ - { - "type": "string" + "text": "since 2.1.0 use `pill-color`" } ], - "optional": true, - "required": false - } - ], - "methods": [], - "events": [], - "styles": [], - "slots": [ - { - "name": "menu-item-label Custom label", - "docs": "" - } - ], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/menu-settings", - "filePath": "src/components/menu-settings/menu-settings.tsx", - "fileName": "menu-settings.tsx", - "readmePath": "src/components/menu-settings/readme.md", - "usagesDir": "src/components/menu-settings/usage", - "tag": "ix-menu-settings", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [ - "ix-tab-item", - "ix-icon-button", - "ix-tabs" - ], - "dependencyGraph": { - "ix-menu-settings": [ - "ix-tab-item", - "ix-icon-button", - "ix-tabs" - ], - "ix-icon-button": [ - "ix-spinner" - ] - }, - "props": [ - { - "name": "activeTabLabel", - "type": "string", - "complexType": { - "original": "string", - "resolved": "string", - "references": {} - }, - "mutable": true, - "attr": "active-tab-label", - "reflectToAttr": false, - "docs": "Active tab", - "docsTags": [], + "deprecation": "since 2.1.0 use `pill-color`", "values": [ { "type": "string" @@ -10936,19 +15057,18 @@ "required": false }, { - "name": "label", + "name": "icon", "type": "string", "complexType": { - "original": "string", + "original": "string | undefined", "resolved": "string", "references": {} }, "mutable": false, - "attr": "label", + "attr": "icon", "reflectToAttr": false, - "docs": "Label of first tab", + "docs": "Show icon", "docsTags": [], - "default": "'Settings'", "values": [ { "type": "string" @@ -10958,7 +15078,7 @@ "required": false }, { - "name": "show", + "name": "outline", "type": "boolean", "complexType": { "original": "boolean", @@ -10966,9 +15086,9 @@ "references": {} }, "mutable": false, - "attr": "show", + "attr": "outline", "reflectToAttr": false, - "docs": "Internal", + "docs": "Show pill as outline", "docsTags": [], "default": "false", "values": [ @@ -10978,64 +15098,19 @@ ], "optional": false, "required": false - } - ], - "methods": [], - "events": [ - { - "event": "close", - "detail": "CustomCloseEvent", - "bubbles": true, - "complexType": { - "original": "CustomCloseEvent", - "resolved": "CustomCloseEvent", - "references": { - "CustomCloseEvent": { - "location": "import", - "path": "../utils/menu-tabs/menu-tabs-utils", - "id": "src/components/utils/menu-tabs/menu-tabs-utils.ts::CustomCloseEvent" - } - } - }, - "cancelable": true, - "composed": true, - "docs": "Popover closed", - "docsTags": [] - } - ], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/menu-settings-item", - "filePath": "src/components/menu-settings-item/menu-settings-item.tsx", - "fileName": "menu-settings-item.tsx", - "readmePath": "src/components/menu-settings-item/readme.md", - "usagesDir": "src/components/menu-settings-item/usage", - "tag": "ix-menu-settings-item", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [], - "dependencyGraph": {}, - "props": [ + }, { - "name": "label", + "name": "pillColor", "type": "string", "complexType": { - "original": "string", + "original": "string | undefined", "resolved": "string", "references": {} }, "mutable": false, - "attr": "label", - "reflectToAttr": true, - "docs": "Settings Item label", + "attr": "pill-color", + "reflectToAttr": false, + "docs": "Custom font color for pill. Only working for `variant='custom'`", "docsTags": [], "values": [ { @@ -11044,63 +15119,103 @@ ], "optional": false, "required": false - } - ], - "methods": [], - "events": [ + }, { - "event": "labelChange", - "detail": "CustomLabelChangeEvent", - "bubbles": true, + "name": "variant", + "type": "\"alarm\" | \"critical\" | \"custom\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"", "complexType": { - "original": "CustomLabelChangeEvent", - "resolved": "CustomLabelChangeEvent", - "references": { - "CustomLabelChangeEvent": { - "location": "import", - "path": "../utils/menu-tabs/menu-tabs-utils", - "id": "src/components/utils/menu-tabs/menu-tabs-utils.ts::CustomLabelChangeEvent" - } - } + "original": "| 'primary'\n | 'alarm'\n | 'critical'\n | 'warning'\n | 'info'\n | 'neutral'\n | 'success'\n | 'custom'", + "resolved": "\"alarm\" | \"critical\" | \"custom\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"", + "references": {} }, - "cancelable": true, - "composed": true, - "docs": "Label changed", - "docsTags": [] + "mutable": false, + "attr": "variant", + "reflectToAttr": true, + "docs": "Pill variant", + "docsTags": [], + "default": "'primary'", + "values": [ + { + "value": "alarm", + "type": "string" + }, + { + "value": "critical", + "type": "string" + }, + { + "value": "custom", + "type": "string" + }, + { + "value": "info", + "type": "string" + }, + { + "value": "neutral", + "type": "string" + }, + { + "value": "primary", + "type": "string" + }, + { + "value": "success", + "type": "string" + }, + { + "value": "warning", + "type": "string" + } + ], + "optional": false, + "required": false } ], + "methods": [], + "events": [], "styles": [], "slots": [], "parts": [], "listeners": [] }, { - "dirPath": "src/components/message-bar", - "filePath": "src/components/message-bar/message-bar.tsx", - "fileName": "message-bar.tsx", - "readmePath": "src/components/message-bar/readme.md", - "usagesDir": "src/components/message-bar/usage", - "tag": "ix-message-bar", + "dirPath": "src/components/push-card", + "filePath": "src/components/push-card/push-card.tsx", + "fileName": "push-card.tsx", + "readmePath": "src/components/push-card/readme.md", + "usagesDir": "src/components/push-card/usage", + "tag": "ix-push-card", "overview": "", "usage": {}, "docs": "", - "docsTags": [], + "docsTags": [ + { + "name": "since", + "text": "1.6.0" + } + ], "encapsulation": "shadow", "dependents": [], "dependencies": [ - "ix-icon-button" + "ix-card", + "ix-card-content", + "ix-card-title", + "ix-typography", + "ix-card-accordion" ], "dependencyGraph": { - "ix-message-bar": [ - "ix-icon-button" - ], - "ix-icon-button": [ - "ix-spinner" + "ix-push-card": [ + "ix-card", + "ix-card-content", + "ix-card-title", + "ix-typography", + "ix-card-accordion" ] }, "props": [ { - "name": "dismissible", + "name": "collapse", "type": "boolean", "complexType": { "original": "boolean", @@ -11108,224 +15223,242 @@ "references": {} }, "mutable": false, - "attr": "dismissible", + "attr": "collapse", "reflectToAttr": false, - "docs": "If true, close button is enabled and alert can be dismissed by the user", - "docsTags": [], - "default": "true", - "values": [ + "docs": "Collapse the card", + "docsTags": [ { - "type": "boolean" + "name": "since", + "text": "2.1.0" } ], - "optional": false, - "required": false - }, - { - "name": "type", - "type": "\"danger\" | \"info\" | \"warning\"", - "complexType": { - "original": "'danger' | 'warning' | 'info'", - "resolved": "\"danger\" | \"info\" | \"warning\"", - "references": {} - }, - "mutable": false, - "attr": "type", - "reflectToAttr": false, - "docs": "Specifies the type of the alert.", - "docsTags": [], - "default": "'info'", + "default": "true", "values": [ { - "value": "danger", - "type": "string" - }, - { - "value": "info", - "type": "string" - }, - { - "value": "warning", - "type": "string" + "type": "boolean" } ], "optional": false, - "required": false - } - ], - "methods": [], - "events": [ - { - "event": "closedChange", - "detail": "any", - "bubbles": true, - "complexType": { - "original": "any", - "resolved": "any", - "references": {} - }, - "cancelable": true, - "composed": true, - "docs": "An event emitted when the close button is clicked", - "docsTags": [] - } - ], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/modal", - "filePath": "src/components/modal/modal.tsx", - "fileName": "modal.tsx", - "readmePath": "src/components/modal/readme.md", - "usagesDir": "src/components/modal/usage", - "tag": "ix-modal", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [], - "dependencyGraph": {}, - "props": [ + "required": false + }, { - "name": "animation", - "type": "boolean", + "name": "heading", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "animation", + "attr": "heading", "reflectToAttr": false, - "docs": "Should the modal be animated", + "docs": "Card heading", "docsTags": [], - "default": "true", "values": [ { - "type": "boolean" + "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "backdrop", - "type": "boolean", + "name": "icon", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string | undefined", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "backdrop", + "attr": "icon", "reflectToAttr": false, - "docs": "Show a backdrop behind the modal dialog", + "docs": "Card icon", "docsTags": [], - "default": "true", + "default": "undefined", "values": [ { - "type": "boolean" + "type": "string" } ], "optional": false, "required": false }, { - "name": "beforeDismiss", - "type": "(reason?: any) => boolean | Promise", + "name": "notification", + "type": "string", "complexType": { - "original": "(reason?: any) => boolean | Promise", - "resolved": "(reason?: any) => boolean | Promise", - "references": { - "Promise": { - "location": "global", - "id": "global::Promise" - } - } + "original": "string", + "resolved": "string", + "references": {} }, "mutable": false, + "attr": "notification", "reflectToAttr": false, - "docs": "Is called before the modal is dismissed.\n\n- Return `true` to proceed in dismissing the modal\n- Return `false` to abort in dismissing the modal", + "docs": "Card KPI value", "docsTags": [], "values": [ { - "type": "(reason?: any) => boolean" - }, - { - "type": "Promise" + "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "centered", - "type": "boolean", + "name": "subheading", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "centered", + "attr": "subheading", "reflectToAttr": false, - "docs": "Centered modal", + "docs": "Card subheading", "docsTags": [], - "default": "false", "values": [ { - "type": "boolean" + "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "closeOnBackdropClick", - "type": "boolean", + "name": "variant", + "type": "\"alarm\" | \"critical\" | \"filled\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"", "complexType": { - "original": "boolean", - "resolved": "boolean", - "references": {} + "original": "PushCardVariant", + "resolved": "\"alarm\" | \"critical\" | \"filled\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"", + "references": { + "PushCardVariant": { + "location": "local", + "path": "src/components/push-card/push-card.tsx", + "id": "src/components/push-card/push-card.tsx::PushCardVariant" + } + } }, "mutable": false, - "attr": "close-on-backdrop-click", + "attr": "variant", "reflectToAttr": false, - "docs": "Dismiss modal on backdrop click", + "docs": "Card variant", "docsTags": [ { - "name": "since", - "text": "2.0.0" + "name": "deprecated", + "text": "variant \"insight\" and \"notification\" will be removed in 3.0. Use \"outline\" or \"filled\" instead." } ], - "default": "false", + "default": "'insight'", + "deprecation": "variant \"insight\" and \"notification\" will be removed in 3.0. Use \"outline\" or \"filled\" instead.", "values": [ { - "type": "boolean" + "value": "alarm", + "type": "string" + }, + { + "value": "critical", + "type": "string" + }, + { + "value": "filled", + "type": "string" + }, + { + "value": "info", + "type": "string" + }, + { + "value": "insight", + "type": "string" + }, + { + "value": "neutral", + "type": "string" + }, + { + "value": "notification", + "type": "string" + }, + { + "value": "outline", + "type": "string" + }, + { + "value": "primary", + "type": "string" + }, + { + "value": "success", + "type": "string" + }, + { + "value": "warning", + "type": "string" } ], "optional": false, "required": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/radio", + "filePath": "src/components/radio/radio.tsx", + "fileName": "radio.tsx", + "readmePath": "src/components/radio/readme.md", + "usagesDir": "src/components/radio/usage", + "tag": "ix-radio", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "2.6.0" }, { - "name": "closeOnEscape", + "name": "form-ready", + "text": "2.6.0" + } + ], + "encapsulation": "shadow", + "dependents": [ + "ix-playground-internal" + ], + "dependencies": [ + "ix-typography" + ], + "dependencyGraph": { + "ix-radio": [ + "ix-typography" + ], + "ix-playground-internal": [ + "ix-radio" + ] + }, + "props": [ + { + "name": "checked", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, - "mutable": false, - "attr": "close-on-escape", - "reflectToAttr": false, - "docs": "If set to true the modal can be closed by pressing the Escape key", + "mutable": true, + "attr": "checked", + "reflectToAttr": true, + "docs": "Checked state of the radio component", "docsTags": [], - "default": "true", + "default": "false", "values": [ { "type": "boolean" @@ -11335,7 +15468,7 @@ "required": false }, { - "name": "keyboard", + "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", @@ -11343,17 +15476,11 @@ "references": {} }, "mutable": false, - "attr": "keyboard", + "attr": "disabled", "reflectToAttr": false, - "docs": "Use ESC to dismiss the modal", - "docsTags": [ - { - "name": "deprecated", - "text": "- Use closeOnEscape instead" - } - ], - "default": "true", - "deprecation": "- Use closeOnEscape instead", + "docs": "Disabled state of the radio component", + "docsTags": [], + "default": "false", "values": [ { "type": "boolean" @@ -11363,341 +15490,265 @@ "required": false }, { - "name": "size", - "type": "\"360\" | \"480\" | \"600\" | \"720\" | \"840\" | \"full-screen\" | \"full-width\"", + "name": "label", + "type": "string", "complexType": { - "original": "IxModalSize", - "resolved": "\"360\" | \"480\" | \"600\" | \"720\" | \"840\" | \"full-screen\" | \"full-width\"", - "references": { - "IxModalSize": { - "location": "local", - "path": "src/components/modal/modal.tsx", - "id": "src/components/modal/modal.tsx::IxModalSize" - } - } - }, - "mutable": false, - "attr": "size", - "reflectToAttr": false, - "docs": "Modal size", - "docsTags": [ - { - "name": "since", - "text": "2.0.0" - } - ], - "default": "'360'", - "values": [ - { - "value": "360", - "type": "string" - }, - { - "value": "480", - "type": "string" - }, - { - "value": "600", - "type": "string" - }, - { - "value": "720", - "type": "string" - }, - { - "value": "840", - "type": "string" - }, - { - "value": "full-screen", - "type": "string" - }, + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "label", + "reflectToAttr": false, + "docs": "Label for the radio component", + "docsTags": [], + "values": [ { - "value": "full-width", "type": "string" } ], - "optional": false, + "optional": true, "required": false - } - ], - "methods": [ + }, { - "name": "closeModal", - "returns": { - "type": "Promise", - "docs": "" - }, + "name": "name", + "type": "string", "complexType": { - "signature": "(reason: T) => Promise", - "parameters": [ - { - "name": "reason", - "type": "T", - "docs": "" - } - ], - "references": { - "Promise": { - "location": "global", - "id": "global::Promise" - }, - "T": { - "location": "global", - "id": "global::T" - } - }, - "return": "Promise" + "original": "string", + "resolved": "string", + "references": {} }, - "signature": "closeModal(reason: T) => Promise", - "parameters": [ + "mutable": false, + "attr": "name", + "reflectToAttr": true, + "docs": "Name of the radio component", + "docsTags": [], + "values": [ { - "name": "reason", - "type": "T", - "docs": "" + "type": "string" } ], - "docs": "Close the dialog", - "docsTags": [] + "optional": true, + "required": false }, { - "name": "dismissModal", - "returns": { - "type": "Promise", - "docs": "" - }, + "name": "value", + "type": "string", "complexType": { - "signature": "(reason?: T) => Promise", - "parameters": [ - { - "name": "reason", - "type": "T", - "docs": "" - } - ], - "references": { - "Promise": { - "location": "global", - "id": "global::Promise" - }, - "T": { - "location": "global", - "id": "global::T" - } - }, - "return": "Promise" + "original": "string", + "resolved": "string", + "references": {} }, - "signature": "dismissModal(reason?: T) => Promise", - "parameters": [ + "mutable": false, + "attr": "value", + "reflectToAttr": true, + "docs": "Value of the radio component", + "docsTags": [], + "values": [ { - "name": "reason", - "type": "T", - "docs": "" + "type": "string" } ], - "docs": "Dismiss the dialog", - "docsTags": [] - }, - { - "name": "showModal", - "returns": { - "type": "Promise", - "docs": "" - }, - "complexType": { - "signature": "() => Promise", - "parameters": [], - "references": { - "Promise": { - "location": "global", - "id": "global::Promise" - }, - "HTMLDialogElement": { - "location": "global", - "id": "global::HTMLDialogElement" - } - }, - "return": "Promise" - }, - "signature": "showModal() => Promise", - "parameters": [], - "docs": "Show the dialog", - "docsTags": [] + "optional": true, + "required": false } ], + "methods": [], "events": [ { - "event": "dialogClose", - "detail": "any", + "event": "checkedChange", + "detail": "boolean", "bubbles": true, "complexType": { - "original": "any", - "resolved": "any", + "original": "boolean", + "resolved": "boolean", "references": {} }, "cancelable": true, "composed": true, - "docs": "Dialog close", + "docs": "Event emitted when the checked state of the radio changes", "docsTags": [] }, { - "event": "dialogDismiss", - "detail": "any", + "event": "valueChange", + "detail": "string", "bubbles": true, "complexType": { - "original": "any", - "resolved": "any", + "original": "string", + "resolved": "string", "references": {} }, "cancelable": true, "composed": true, - "docs": "Dialog cancel", + "docs": "Event emitted when the value of the radio changes", "docsTags": [] } ], "styles": [], "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/modal-content", - "filePath": "src/components/modal-content/modal-content.tsx", - "fileName": "modal-content.tsx", - "readmePath": "src/components/modal-content/readme.md", - "usagesDir": "src/components/modal-content/usage", - "tag": "ix-modal-content", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [ - { - "name": "since", - "text": "2.0.0" - } - ], - "encapsulation": "shadow", - "dependents": [ - "ix-application-switch-modal" - ], - "dependencies": [], - "dependencyGraph": { - "ix-application-switch-modal": [ - "ix-modal-content" - ] - }, - "props": [], - "methods": [], - "events": [], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/playground", - "filePath": "src/components/playground/example-modal.tsx", - "fileName": "example-modal.tsx", - "readmePath": "src/components/playground/readme.md", - "usagesDir": "src/components/playground/usage", - "tag": "ix-modal-example", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [], - "encapsulation": "none", - "dependents": [], - "dependencies": [ - "ix-icon-button", - "ix-button" - ], - "dependencyGraph": { - "ix-modal-example": [ - "ix-icon-button", - "ix-button" - ], - "ix-icon-button": [ - "ix-spinner" - ], - "ix-button": [ - "ix-spinner" - ] - }, - "props": [], - "methods": [], - "events": [], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/modal-footer", - "filePath": "src/components/modal-footer/modal-footer.tsx", - "fileName": "modal-footer.tsx", - "readmePath": "src/components/modal-footer/readme.md", - "usagesDir": "src/components/modal-footer/usage", - "tag": "ix-modal-footer", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [ - { - "name": "since", - "text": "2.0.0" - } - ], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [], - "dependencyGraph": {}, - "props": [], - "methods": [], - "events": [], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/modal-header", - "filePath": "src/components/modal-header/modal-header.tsx", - "fileName": "modal-header.tsx", - "readmePath": "src/components/modal-header/readme.md", - "usagesDir": "src/components/modal-header/usage", - "tag": "ix-modal-header", + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/radio-group", + "filePath": "src/components/radio-group/radio-group.tsx", + "fileName": "radio-group.tsx", + "readmePath": "src/components/radio-group/readme.md", + "usagesDir": "src/components/radio-group/usage", + "tag": "ix-radio-group", "overview": "", "usage": {}, "docs": "", "docsTags": [ { "name": "since", - "text": "2.0.0" + "text": "2.6.0" + }, + { + "name": "form-ready", + "text": "2.6.0" } ], "encapsulation": "shadow", "dependents": [ - "ix-application-switch-modal" + "ix-playground-internal" ], "dependencies": [ - "ix-typography", - "ix-icon-button" + "ix-field-wrapper" ], "dependencyGraph": { - "ix-modal-header": [ - "ix-typography", - "ix-icon-button" + "ix-radio-group": [ + "ix-field-wrapper" ], - "ix-icon-button": [ - "ix-spinner" + "ix-field-wrapper": [ + "ix-field-label", + "ix-tooltip", + "ix-typography" ], - "ix-application-switch-modal": [ - "ix-modal-header" + "ix-field-label": [ + "ix-typography" + ], + "ix-tooltip": [ + "ix-typography" + ], + "ix-playground-internal": [ + "ix-radio-group" ] }, "props": [ { - "name": "hideClose", + "name": "direction", + "type": "\"column\" | \"row\"", + "complexType": { + "original": "'column' | 'row'", + "resolved": "\"column\" | \"row\"", + "references": {} + }, + "mutable": false, + "attr": "direction", + "reflectToAttr": false, + "docs": "Alignment of the radio buttons in the group", + "docsTags": [], + "default": "'column'", + "values": [ + { + "value": "column", + "type": "string" + }, + { + "value": "row", + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "helperText", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "helper-text", + "reflectToAttr": false, + "docs": "Show text below the field component", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + }, + { + "name": "infoText", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "info-text", + "reflectToAttr": false, + "docs": "Info text for the field component", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + }, + { + "name": "invalidText", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "invalid-text", + "reflectToAttr": false, + "docs": "Error text for the field component", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + }, + { + "name": "label", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "label", + "reflectToAttr": false, + "docs": "Label for the field component", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + }, + { + "name": "showTextAsTooltip", "type": "boolean", "complexType": { "original": "boolean", @@ -11705,21 +15756,20 @@ "references": {} }, "mutable": false, - "attr": "hide-close", + "attr": "show-text-as-tooltip", "reflectToAttr": false, - "docs": "Hide the close button", + "docs": "Show helper, info, warning, error and valid text as tooltip", "docsTags": [], - "default": "false", "values": [ { "type": "boolean" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "icon", + "name": "validText", "type": "string", "complexType": { "original": "string", @@ -11727,20 +15777,20 @@ "references": {} }, "mutable": false, - "attr": "icon", + "attr": "valid-text", "reflectToAttr": false, - "docs": "Icon of the Header", + "docs": "Valid text for the field component", "docsTags": [], "values": [ { "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "iconColor", + "name": "value", "type": "string", "complexType": { "original": "string", @@ -11748,84 +15798,138 @@ "references": {} }, "mutable": false, - "attr": "icon-color", + "attr": "value", "reflectToAttr": false, - "docs": "Icon color", + "docs": "Value of the radiobutton group component", "docsTags": [], "values": [ { "type": "string" } ], - "optional": false, + "optional": true, + "required": false + }, + { + "name": "warningText", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "warning-text", + "reflectToAttr": false, + "docs": "Warning text for the field component", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, "required": false } ], "methods": [], "events": [ { - "event": "closeClick", - "detail": "MouseEvent", + "event": "valueChange", + "detail": "string", "bubbles": true, "complexType": { - "original": "MouseEvent", - "resolved": "MouseEvent", - "references": { - "MouseEvent": { - "location": "global", - "id": "global::MouseEvent" - } - } + "original": "string", + "resolved": "string", + "references": {} }, "cancelable": true, "composed": true, - "docs": "Emits when close icon is clicked and closes the modal\nCan be prevented, in which case only the event is triggered, and the modal remains open", + "docs": "Event emitted when the value of the radiobutton group changes", "docsTags": [] } ], "styles": [], "slots": [], "parts": [], - "listeners": [] + "listeners": [ + { + "event": "checkedChange", + "capture": false, + "passive": false + } + ] }, { - "dirPath": "src/components/pagination", - "filePath": "src/components/pagination/pagination.tsx", - "fileName": "pagination.tsx", - "readmePath": "src/components/pagination/readme.md", - "usagesDir": "src/components/pagination/usage", - "tag": "ix-pagination", + "dirPath": "src/components/row", + "filePath": "src/components/row/row.tsx", + "fileName": "row.tsx", + "readmePath": "src/components/row/readme.md", + "usagesDir": "src/components/row/usage", + "tag": "ix-row", "overview": "", "usage": {}, "docs": "", "docsTags": [ { "name": "since", - "text": "1.5.0" + "text": "2.0.0" } ], "encapsulation": "shadow", - "dependents": [], + "dependents": [ + "ix-date-dropdown", + "ix-datetime-picker" + ], + "dependencies": [], + "dependencyGraph": { + "ix-date-dropdown": [ + "ix-row" + ], + "ix-datetime-picker": [ + "ix-row" + ] + }, + "props": [], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/select", + "filePath": "src/components/select/select.tsx", + "fileName": "select.tsx", + "readmePath": "src/components/select/readme.md", + "usagesDir": "src/components/select/usage", + "tag": "ix-select", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "form-ready", + "text": "2.6.0" + } + ], + "encapsulation": "shadow", + "dependents": [ + "ix-pagination" + ], "dependencies": [ - "ix-icon-button", - "ix-typography", - "ix-select", "ix-select-item", - "ix-spinner" + "ix-field-wrapper", + "ix-filter-chip", + "ix-icon-button", + "ix-dropdown", + "ix-dropdown-item" ], "dependencyGraph": { - "ix-pagination": [ - "ix-icon-button", - "ix-typography", - "ix-select", - "ix-select-item", - "ix-spinner" - ], - "ix-icon-button": [ - "ix-spinner" - ], "ix-select": [ "ix-select-item", + "ix-field-wrapper", "ix-filter-chip", "ix-icon-button", "ix-dropdown", @@ -11834,13 +15938,30 @@ "ix-select-item": [ "ix-dropdown-item" ], + "ix-field-wrapper": [ + "ix-field-label", + "ix-tooltip", + "ix-typography" + ], + "ix-field-label": [ + "ix-typography" + ], + "ix-tooltip": [ + "ix-typography" + ], "ix-filter-chip": [ "ix-icon-button" + ], + "ix-icon-button": [ + "ix-spinner" + ], + "ix-pagination": [ + "ix-select" ] }, "props": [ { - "name": "advanced", + "name": "allowClear", "type": "boolean", "complexType": { "original": "boolean", @@ -11848,9 +15969,9 @@ "references": {} }, "mutable": false, - "attr": "advanced", + "attr": "allow-clear", "reflectToAttr": false, - "docs": "Advanced mode", + "docs": "Show clear button", "docsTags": [], "default": "false", "values": [ @@ -11862,50 +15983,51 @@ "required": false }, { - "name": "count", - "type": "number", + "name": "disabled", + "type": "boolean", "complexType": { - "original": "number", - "resolved": "number", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "count", + "attr": "disabled", "reflectToAttr": false, - "docs": "Total number of pages", + "docs": "If true the select will be in disabled state", "docsTags": [], + "default": "false", "values": [ { - "type": "number" + "type": "boolean" } ], "optional": false, "required": false }, { - "name": "i18nItems", - "type": "string", + "name": "editable", + "type": "boolean", "complexType": { - "original": "string", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "i-1-8n-items", + "attr": "editable", "reflectToAttr": false, - "docs": "/**\n i18n", + "docs": "Select is extendable", "docsTags": [], - "default": "'Items'", + "default": "false", "values": [ { - "type": "string" + "type": "boolean" } ], "optional": false, "required": false }, { - "name": "i18nOf", + "name": "helperText", "type": "string", "complexType": { "original": "string", @@ -11913,21 +16035,52 @@ "references": {} }, "mutable": false, - "attr": "i-1-8n-of", + "attr": "helper-text", "reflectToAttr": false, - "docs": "i18n", - "docsTags": [], - "default": "'of'", + "docs": "Helper text for the select component", + "docsTags": [ + { + "name": "since", + "text": "2.6.0" + } + ], "values": [ { "type": "string" } ], + "optional": true, + "required": false + }, + { + "name": "hideListHeader", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "hide-list-header", + "reflectToAttr": false, + "docs": "Hide list header", + "docsTags": [ + { + "name": "since", + "text": "1.5.0" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], "optional": false, "required": false }, { - "name": "i18nPage", + "name": "i18nNoMatches", "type": "string", "complexType": { "original": "string", @@ -11935,11 +16088,16 @@ "references": {} }, "mutable": false, - "attr": "i-1-8n-page", + "attr": "i-1-8n-no-matches", "reflectToAttr": false, - "docs": "i18n", - "docsTags": [], - "default": "'Page'", + "docs": "Hint inside of dropdown if no items where found with current filter text", + "docsTags": [ + { + "name": "since", + "text": "1.5.0" + } + ], + "default": "'No matches'", "values": [ { "type": "string" @@ -11949,215 +16107,214 @@ "required": false }, { - "name": "itemCount", - "type": "number", + "name": "i18nPlaceholder", + "type": "string", "complexType": { - "original": "number", - "resolved": "number", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "item-count", + "attr": "i-1-8n-placeholder", "reflectToAttr": false, - "docs": "Number of items shown at once.\nCan only be changed in advaced mode.", + "docs": "Input field placeholder", "docsTags": [], - "default": "15", + "default": "'Select an option'", "values": [ { - "type": "number" + "type": "string" } ], "optional": false, "required": false }, { - "name": "selectedPage", - "type": "number", + "name": "i18nPlaceholderEditable", + "type": "string", "complexType": { - "original": "number", - "resolved": "number", + "original": "string", + "resolved": "string", "references": {} }, - "mutable": true, - "attr": "selected-page", + "mutable": false, + "attr": "i-1-8n-placeholder-editable", "reflectToAttr": false, - "docs": "Zero based index of currently selected page", + "docs": "Input field placeholder for editable select", "docsTags": [], - "default": "0", + "default": "'Type of select option'", "values": [ { - "type": "number" + "type": "string" } ], "optional": false, "required": false }, { - "name": "showItemCount", - "type": "boolean", + "name": "i18nSelectListHeader", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "show-item-count", + "attr": "i-1-8n-select-list-header", "reflectToAttr": false, - "docs": "Show item count in advanced mode", + "docs": "Select list header", "docsTags": [], - "default": "true", + "default": "'Select an option'", "values": [ { - "type": "boolean" + "type": "string" } ], "optional": false, "required": false - } - ], - "methods": [], - "events": [ + }, { - "event": "itemCountChanged", - "detail": "number", - "bubbles": true, + "name": "infoText", + "type": "string", "complexType": { - "original": "number", - "resolved": "number", + "original": "string", + "resolved": "string", "references": {} }, - "cancelable": true, - "composed": true, - "docs": "Item count change event", - "docsTags": [] + "mutable": false, + "attr": "info-text", + "reflectToAttr": false, + "docs": "Info text for the select component", + "docsTags": [ + { + "name": "since", + "text": "2.6.0" + } + ], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false }, { - "event": "pageSelected", - "detail": "number", - "bubbles": true, + "name": "invalidText", + "type": "string", "complexType": { - "original": "number", - "resolved": "number", + "original": "string", + "resolved": "string", "references": {} }, - "cancelable": true, - "composed": true, - "docs": "Page selection event", - "docsTags": [] - } - ], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/pane", - "filePath": "src/components/pane/pane.tsx", - "fileName": "pane.tsx", - "readmePath": "src/components/pane/readme.md", - "usagesDir": "src/components/pane/usage", - "tag": "ix-pane", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [ - { - "name": "since", - "text": "2.1.0" - } - ], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [ - "ix-icon-button", - "ix-typography" - ], - "dependencyGraph": { - "ix-pane": [ - "ix-icon-button", - "ix-typography" - ], - "ix-icon-button": [ - "ix-spinner" - ] - }, - "props": [ + "mutable": false, + "attr": "invalid-text", + "reflectToAttr": false, + "docs": "Error text for the select component", + "docsTags": [ + { + "name": "since", + "text": "2.6.0" + } + ], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + }, { - "name": "borderless", - "type": "boolean", + "name": "label", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "borderless", + "attr": "label", "reflectToAttr": false, - "docs": "Toggle the border of the pane.\nDefaults to the borderless attribute of the pane layout. If used standalone it defaults to false.", - "docsTags": [], - "default": "false", + "docs": "Label for the select component", + "docsTags": [ + { + "name": "since", + "text": "2.6.0" + } + ], "values": [ { - "type": "boolean" + "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "composition", - "type": "\"bottom\" | \"left\" | \"right\" | \"top\"", + "name": "mode", + "type": "\"multiple\" | \"single\"", "complexType": { - "original": "Composition", - "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"", - "references": { - "Composition": { - "location": "local", - "path": "src/components/pane/pane.tsx", - "id": "src/components/pane/pane.tsx::Composition" - } - } + "original": "'single' | 'multiple'", + "resolved": "\"multiple\" | \"single\"", + "references": {} }, - "mutable": true, - "attr": "composition", + "mutable": false, + "attr": "mode", "reflectToAttr": false, - "docs": "Defines the position of the pane inside it's container.\nInside a pane layout this property will automatically be set to the name of slot the pane is assigned to.", + "docs": "Selection mode", "docsTags": [], - "default": "'top'", + "default": "'single'", "values": [ { - "value": "bottom", + "value": "multiple", "type": "string" }, { - "value": "left", + "value": "single", "type": "string" - }, + } + ], + "optional": false, + "required": false + }, + { + "name": "name", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "name", + "reflectToAttr": true, + "docs": "A string that represents the element's name attribute,\ncontaining a name that identifies the element when submitting the form.", + "docsTags": [ { - "value": "right", - "type": "string" - }, + "name": "since", + "text": "2.6.0" + } + ], + "values": [ { - "value": "top", "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "expanded", + "name": "readonly", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, - "mutable": true, - "attr": "expanded", + "mutable": false, + "attr": "readonly", "reflectToAttr": false, - "docs": "State of the pane", + "docs": "If true the select will be in readonly mode", "docsTags": [], "default": "false", "values": [ @@ -12169,28 +16326,64 @@ "required": false }, { - "name": "heading", - "type": "string", + "name": "required", + "type": "boolean", "complexType": { - "original": "string", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "heading", + "attr": "required", + "reflectToAttr": true, + "docs": "A Boolean attribute indicating that an option with a non-empty string value must be selected", + "docsTags": [ + { + "name": "since", + "text": "2.6.0" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "selectedIndices", + "type": "string | string[]", + "complexType": { + "original": "string | string[]", + "resolved": "string | string[]", + "references": {} + }, + "mutable": true, + "attr": "selected-indices", "reflectToAttr": false, - "docs": "Title of the side panel", - "docsTags": [], + "docs": "Indices of selected items.\nThis corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list.", + "docsTags": [ + { + "name": "deprecated", + "text": "since 2.0.0. Use the `value` property instead." + } + ], + "deprecation": "since 2.0.0. Use the `value` property instead.", "values": [ { "type": "string" + }, + { + "type": "string[]" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "hideOnCollapse", + "name": "showTextAsTooltip", "type": "boolean", "complexType": { "original": "boolean", @@ -12198,21 +16391,25 @@ "references": {} }, "mutable": false, - "attr": "hide-on-collapse", + "attr": "show-text-as-tooltip", "reflectToAttr": false, - "docs": "Define if the pane should have a collapsed state", - "docsTags": [], - "default": "false", + "docs": "Show helper, error, info, warning text as tooltip", + "docsTags": [ + { + "name": "since", + "text": "2.6.0" + } + ], "values": [ { "type": "boolean" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "icon", + "name": "validText", "type": "string", "complexType": { "original": "string", @@ -12220,300 +16417,400 @@ "references": {} }, "mutable": false, - "attr": "icon", + "attr": "valid-text", "reflectToAttr": false, - "docs": "Name of the icon", - "docsTags": [], + "docs": "Valid text for the select component", + "docsTags": [ + { + "name": "since", + "text": "2.6.0" + } + ], "values": [ { "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "size", - "type": "\"240px\" | \"320px\" | \"33%\" | \"360px\" | \"480px\" | \"50%\" | \"600px\"", + "name": "value", + "type": "string | string[]", "complexType": { - "original": "| '240px'\n | '320px'\n | '360px'\n | '480px'\n | '600px'\n | '33%'\n | '50%'", - "resolved": "\"240px\" | \"320px\" | \"33%\" | \"360px\" | \"480px\" | \"50%\" | \"600px\"", + "original": "string | string[]", + "resolved": "string | string[]", "references": {} }, - "mutable": false, - "attr": "size", + "mutable": true, + "attr": "value", "reflectToAttr": false, - "docs": "The maximum size of the sidebar, when it is expanded", - "docsTags": [], - "default": "'240px'", - "values": [ - { - "value": "240px", - "type": "string" - }, - { - "value": "320px", - "type": "string" - }, + "docs": "Current selected value.\nThis corresponds to the value property of ix-select-items", + "docsTags": [ { - "value": "33%", - "type": "string" - }, + "name": "since", + "text": "2.0.0" + } + ], + "default": "[]", + "values": [ { - "value": "360px", "type": "string" }, { - "value": "480px", - "type": "string" - }, + "type": "string[]" + } + ], + "optional": false, + "required": false + }, + { + "name": "warningText", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "warning-text", + "reflectToAttr": false, + "docs": "Warning text for the select component", + "docsTags": [ { - "value": "50%", - "type": "string" - }, + "name": "since", + "text": "2.6.0" + } + ], + "values": [ { - "value": "600px", "type": "string" } ], - "optional": false, + "optional": true, "required": false + } + ], + "methods": [ + { + "name": "focusInput", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "focusInput() => Promise", + "parameters": [], + "docs": "Focuses the input field", + "docsTags": [] + }, + { + "name": "getNativeInputElement", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + }, + "HTMLInputElement": { + "location": "global", + "id": "global::HTMLInputElement" + } + }, + "return": "Promise" + }, + "signature": "getNativeInputElement() => Promise", + "parameters": [], + "docs": "Returns the native input element used in the component.", + "docsTags": [] + } + ], + "events": [ + { + "event": "addItem", + "detail": "string", + "bubbles": true, + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Item added to selection", + "docsTags": [] }, { - "name": "variant", - "type": "\"floating\" | \"inline\"", + "event": "inputChange", + "detail": "string", + "bubbles": true, "complexType": { - "original": "'floating' | 'inline'", - "resolved": "\"floating\" | \"inline\"", + "original": "string", + "resolved": "string", "references": {} }, - "mutable": false, - "attr": "variant", - "reflectToAttr": false, - "docs": "Variant of the side pane.\nDefaults to the variant attribute of the pane layout. If used standalone it defaults to inline.", - "docsTags": [], - "default": "'inline'", - "values": [ - { - "value": "floating", - "type": "string" - }, + "cancelable": true, + "composed": true, + "docs": "Event dispatched whenever the text input changes.", + "docsTags": [ { - "value": "inline", - "type": "string" + "name": "since", + "text": "2.0.0" } - ], - "optional": false, - "required": false - } - ], - "methods": [], - "events": [ + ] + }, { - "event": "borderlessChanged", - "detail": "{ slot: string; borderless: boolean; }", + "event": "itemSelectionChange", + "detail": "string[]", "bubbles": true, "complexType": { - "original": "BorderlessChangedEvent", - "resolved": "{ slot: string; borderless: boolean; }", - "references": { - "BorderlessChangedEvent": { - "location": "local", - "path": "src/components/pane/pane.tsx", - "id": "src/components/pane/pane.tsx::BorderlessChangedEvent" - } - } + "original": "string[]", + "resolved": "string[]", + "references": {} }, "cancelable": true, "composed": true, - "docs": "This event is triggered when the variant of the pane is changed", - "docsTags": [] + "docs": "Item selection changed", + "docsTags": [ + { + "name": "deprecated", + "text": "since 2.0.0. Use `valueChange` instead." + } + ], + "deprecation": "since 2.0.0. Use `valueChange` instead." }, { - "event": "expandedChanged", - "detail": "{ slot: string; expanded: boolean; }", + "event": "ixBlur", + "detail": "void", "bubbles": true, "complexType": { - "original": "ExpandedChangedEvent", - "resolved": "{ slot: string; expanded: boolean; }", - "references": { - "ExpandedChangedEvent": { - "location": "local", - "path": "src/components/pane/pane.tsx", - "id": "src/components/pane/pane.tsx::ExpandedChangedEvent" - } - } + "original": "void", + "resolved": "void", + "references": {} }, "cancelable": true, "composed": true, - "docs": "This event is triggered when the pane either expands or contracts", + "docs": "Blur input", "docsTags": [] }, { - "event": "variantChanged", - "detail": "{ slot: string; variant: \"floating\" | \"inline\"; }", + "event": "valueChange", + "detail": "string | string[]", "bubbles": true, "complexType": { - "original": "VariantChangedEvent", - "resolved": "{ slot: string; variant: \"floating\" | \"inline\"; }", - "references": { - "VariantChangedEvent": { - "location": "local", - "path": "src/components/pane/pane.tsx", - "id": "src/components/pane/pane.tsx::VariantChangedEvent" - } - } + "original": "string | string[]", + "resolved": "string | string[]", + "references": {} }, "cancelable": true, "composed": true, - "docs": "This event is triggered when the variant of the pane is changed", - "docsTags": [] + "docs": "Value changed", + "docsTags": [ + { + "name": "since", + "text": "2.0.0" + } + ] } ], "styles": [], "slots": [], "parts": [], - "listeners": [] + "listeners": [ + { + "event": "itemClick", + "capture": false, + "passive": false + }, + { + "event": "ix-select-item:labelChange", + "capture": false, + "passive": false + } + ] }, { - "dirPath": "src/components/pane-layout", - "filePath": "src/components/pane-layout/pane-layout.tsx", - "fileName": "pane-layout.tsx", - "readmePath": "src/components/pane-layout/readme.md", - "usagesDir": "src/components/pane-layout/usage", - "tag": "ix-pane-layout", + "dirPath": "src/components/select-item", + "filePath": "src/components/select-item/select-item.tsx", + "fileName": "select-item.tsx", + "readmePath": "src/components/select-item/readme.md", + "usagesDir": "src/components/select-item/usage", + "tag": "ix-select-item", "overview": "", "usage": {}, "docs": "", - "docsTags": [ - { - "name": "since", - "text": "2.1.0" - } - ], + "docsTags": [], "encapsulation": "shadow", - "dependents": [], - "dependencies": [], - "dependencyGraph": {}, + "dependents": [ + "ix-pagination", + "ix-select" + ], + "dependencies": [ + "ix-dropdown-item" + ], + "dependencyGraph": { + "ix-select-item": [ + "ix-dropdown-item" + ], + "ix-pagination": [ + "ix-select-item" + ], + "ix-select": [ + "ix-select-item" + ] + }, "props": [ { - "name": "borderless", - "type": "boolean", + "name": "label", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "borderless", - "reflectToAttr": false, - "docs": "Set the default border state for all panes in the layout", + "attr": "label", + "reflectToAttr": true, + "docs": "Displayed name of the item", "docsTags": [], - "default": "false", "values": [ { - "type": "boolean" + "type": "string" } ], "optional": false, "required": false }, { - "name": "layout", - "type": "\"full-horizontal\" | \"full-vertical\"", + "name": "selected", + "type": "boolean", "complexType": { - "original": "'full-vertical' | 'full-horizontal'", - "resolved": "\"full-horizontal\" | \"full-vertical\"", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "layout", + "attr": "selected", "reflectToAttr": false, - "docs": "Choose the layout of the panes.\nWhen set to 'full-vertical' the vertical panes (left, right) will get the full height.\nWhen set to 'full-horizontal' the horizontal panes (top, bottom) will get the full width.", + "docs": "Flag indicating whether the item is selected", "docsTags": [], - "default": "'full-vertical'", + "default": "false", "values": [ { - "value": "full-horizontal", - "type": "string" - }, - { - "value": "full-vertical", - "type": "string" + "type": "boolean" } ], "optional": false, "required": false }, { - "name": "variant", - "type": "\"floating\" | \"inline\"", + "name": "value", + "type": "any", "complexType": { - "original": "'floating' | 'inline'", - "resolved": "\"floating\" | \"inline\"", + "original": "any", + "resolved": "any", "references": {} }, "mutable": false, - "attr": "variant", - "reflectToAttr": false, - "docs": "Set the default variant for all panes in the layout", - "docsTags": [], - "default": "'inline'", - "values": [ + "attr": "value", + "reflectToAttr": true, + "docs": "The value of the item.\nImportant: The select component uses string values to handle selection and will call toString() on this value.\nTherefor a string should be passed to value to prevent unexpected behavior.", + "docsTags": [ { - "value": "floating", - "type": "string" - }, + "name": "deprecated", + "text": "will be changed to type string with next major release (3.0.0)" + } + ], + "deprecation": "will be changed to type string with next major release (3.0.0)", + "values": [ { - "value": "inline", - "type": "string" + "type": "any" } ], "optional": false, - "required": false + "required": true } ], "methods": [], - "events": [], - "styles": [], - "slots": [], - "parts": [], - "listeners": [ - { - "event": "slotChanged", - "capture": false, - "passive": false - }, - { - "event": "hideOnCollapseChanged", - "capture": false, - "passive": false - }, + "events": [ { - "event": "variantChanged", - "capture": false, - "passive": false + "event": "itemClick", + "detail": "string", + "bubbles": true, + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Item clicked", + "docsTags": [] } - ] + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] }, { - "dirPath": "src/components/pill", - "filePath": "src/components/pill/pill.tsx", - "fileName": "pill.tsx", - "readmePath": "src/components/pill/readme.md", - "usagesDir": "src/components/pill/usage", - "tag": "ix-pill", + "dirPath": "src/components/slider", + "filePath": "src/components/slider/slider.tsx", + "fileName": "slider.tsx", + "readmePath": "src/components/slider/readme.md", + "usagesDir": "src/components/slider/usage", + "tag": "ix-slider", "overview": "", "usage": {}, "docs": "", - "docsTags": [], + "docsTags": [ + { + "name": "since", + "text": "2.0.0" + }, + { + "name": "slot", + "text": "label-start - Element will be displayed at the start of the slider" + }, + { + "name": "slot", + "text": "label-end - Element will be displayed at the end of the slider" + } + ], "encapsulation": "shadow", "dependents": [], - "dependencies": [], - "dependencyGraph": {}, + "dependencies": [ + "ix-tooltip", + "ix-typography" + ], + "dependencyGraph": { + "ix-slider": [ + "ix-tooltip", + "ix-typography" + ], + "ix-tooltip": [ + "ix-typography" + ] + }, "props": [ { - "name": "alignLeft", + "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", @@ -12521,9 +16818,9 @@ "references": {} }, "mutable": false, - "attr": "align-left", + "attr": "disabled", "reflectToAttr": false, - "docs": "Align pill content left", + "docs": "Show control as disabled", "docsTags": [], "default": "false", "values": [ @@ -12535,392 +16832,350 @@ "required": false }, { - "name": "background", - "type": "string", + "name": "error", + "type": "boolean | string", "complexType": { - "original": "string | undefined", - "resolved": "string", + "original": "boolean | string", + "resolved": "boolean | string", "references": {} }, "mutable": false, - "attr": "background", + "attr": "error", "reflectToAttr": false, - "docs": "Custom color for pill. Only working for `variant='custom'`", + "docs": "Show error state and message", "docsTags": [], "values": [ { - "type": "string" - } - ], - "optional": false, - "required": false - }, - { - "name": "color", - "type": "string", - "complexType": { - "original": "string | undefined", - "resolved": "string", - "references": {} - }, - "mutable": false, - "attr": "color", - "reflectToAttr": false, - "docs": "Custom font color for pill. Only working for `variant='custom'`", - "docsTags": [ - { - "name": "deprecated", - "text": "since 2.1.0 use `pill-color`" - } - ], - "deprecation": "since 2.1.0 use `pill-color`", - "values": [ + "type": "boolean" + }, { "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "icon", - "type": "string", + "name": "marker", + "type": "number[]", "complexType": { - "original": "string | undefined", - "resolved": "string", - "references": {} + "original": "SliderMarker", + "resolved": "number[]", + "references": { + "SliderMarker": { + "location": "local", + "path": "src/components/slider/slider.tsx", + "id": "src/components/slider/slider.tsx::SliderMarker" + } + } }, "mutable": false, - "attr": "icon", "reflectToAttr": false, - "docs": "Show icon", + "docs": "Define tick marker on the slider. Marker has to be within slider min/max", "docsTags": [], "values": [ { - "type": "string" + "type": "number[]" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "outline", - "type": "boolean", + "name": "max", + "type": "number", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "number", + "resolved": "number", "references": {} }, "mutable": false, - "attr": "outline", + "attr": "max", "reflectToAttr": false, - "docs": "Show pill as outline", + "docs": "Maximum slider value", "docsTags": [], - "default": "false", + "default": "100", "values": [ { - "type": "boolean" + "type": "number" } ], "optional": false, "required": false }, { - "name": "pillColor", - "type": "string", + "name": "min", + "type": "number", "complexType": { - "original": "string | undefined", - "resolved": "string", + "original": "number", + "resolved": "number", "references": {} }, "mutable": false, - "attr": "pill-color", + "attr": "min", "reflectToAttr": false, - "docs": "Custom font color for pill. Only working for `variant='custom'`", + "docs": "Minimum slider value", "docsTags": [], + "default": "0", "values": [ { - "type": "string" + "type": "number" } ], "optional": false, "required": false }, { - "name": "variant", - "type": "\"alarm\" | \"critical\" | \"custom\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"", - "complexType": { - "original": "| 'primary'\n | 'alarm'\n | 'critical'\n | 'warning'\n | 'info'\n | 'neutral'\n | 'success'\n | 'custom'", - "resolved": "\"alarm\" | \"critical\" | \"custom\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"", - "references": {} - }, - "mutable": false, - "attr": "variant", - "reflectToAttr": true, - "docs": "Pill variant", - "docsTags": [], - "default": "'primary'", - "values": [ - { - "value": "alarm", - "type": "string" - }, - { - "value": "critical", - "type": "string" - }, - { - "value": "custom", - "type": "string" - }, - { - "value": "info", - "type": "string" - }, - { - "value": "neutral", - "type": "string" - }, - { - "value": "primary", - "type": "string" - }, - { - "value": "success", - "type": "string" - }, - { - "value": "warning", - "type": "string" - } - ], - "optional": false, - "required": false - } - ], - "methods": [], - "events": [], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/push-card", - "filePath": "src/components/push-card/push-card.tsx", - "fileName": "push-card.tsx", - "readmePath": "src/components/push-card/readme.md", - "usagesDir": "src/components/push-card/usage", - "tag": "ix-push-card", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [ - { - "name": "since", - "text": "1.6.0" - } - ], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [ - "ix-card", - "ix-card-content", - "ix-card-title", - "ix-typography", - "ix-card-accordion" - ], - "dependencyGraph": { - "ix-push-card": [ - "ix-card", - "ix-card-content", - "ix-card-title", - "ix-typography", - "ix-card-accordion" - ] - }, - "props": [ - { - "name": "collapse", - "type": "boolean", + "name": "step", + "type": "number", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "number", + "resolved": "number", "references": {} }, "mutable": false, - "attr": "collapse", + "attr": "step", "reflectToAttr": false, - "docs": "Collapse the card", + "docs": "Legal number intervals", "docsTags": [ { - "name": "since", - "text": "2.1.0" + "name": "link", + "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step" } ], - "default": "true", + "default": "1", "values": [ { - "type": "boolean" + "type": "number" } ], "optional": false, "required": false }, { - "name": "heading", - "type": "string", + "name": "trace", + "type": "boolean", "complexType": { - "original": "string", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "heading", + "attr": "trace", "reflectToAttr": false, - "docs": "Card heading", + "docs": "Show a trace line", "docsTags": [], + "default": "false", "values": [ { - "type": "string" + "type": "boolean" } ], - "optional": true, + "optional": false, "required": false }, { - "name": "icon", - "type": "string", + "name": "traceReference", + "type": "number", "complexType": { - "original": "string | undefined", - "resolved": "string", + "original": "number", + "resolved": "number", "references": {} }, "mutable": false, - "attr": "icon", + "attr": "trace-reference", "reflectToAttr": false, - "docs": "Card icon", + "docs": "Define the start point of the trace line", "docsTags": [], - "default": "undefined", + "default": "0", "values": [ { - "type": "string" + "type": "number" } ], "optional": false, "required": false }, { - "name": "notification", - "type": "string", + "name": "value", + "type": "number", "complexType": { - "original": "string", - "resolved": "string", + "original": "number", + "resolved": "number", "references": {} }, "mutable": false, - "attr": "notification", + "attr": "value", "reflectToAttr": false, - "docs": "Card KPI value", + "docs": "Current value of the slider", "docsTags": [], + "default": "0", "values": [ { - "type": "string" + "type": "number" } ], - "optional": true, + "optional": false, "required": false - }, + } + ], + "methods": [], + "events": [ { - "name": "subheading", - "type": "string", + "event": "valueChange", + "detail": "number", + "bubbles": true, "complexType": { - "original": "string", - "resolved": "string", + "original": "number", + "resolved": "number", "references": {} }, - "mutable": false, - "attr": "subheading", - "reflectToAttr": false, - "docs": "Card subheading", - "docsTags": [], - "values": [ - { - "type": "string" - } - ], - "optional": true, - "required": false + "cancelable": true, + "composed": true, + "docs": "", + "docsTags": [] + } + ], + "styles": [], + "slots": [ + { + "name": "label-end", + "docs": "Element will be displayed at the end of the slider" }, { - "name": "variant", - "type": "\"alarm\" | \"critical\" | \"filled\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"", + "name": "label-start", + "docs": "Element will be displayed at the start of the slider" + } + ], + "parts": [], + "listeners": [] + }, + { + "dirPath": "src/components/spinner", + "filePath": "src/components/spinner/spinner.tsx", + "fileName": "spinner.tsx", + "readmePath": "src/components/spinner/readme.md", + "usagesDir": "src/components/spinner/usage", + "tag": "ix-spinner", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [ + "ix-application-switch-modal", + "ix-avatar", + "ix-breadcrumb-item", + "ix-button", + "ix-category-filter", + "ix-icon-button", + "ix-icon-toggle-button", + "ix-menu-expand-icon", + "ix-modal-loading", + "ix-pagination", + "ix-toggle-button", + "ix-upload" + ], + "dependencies": [], + "dependencyGraph": { + "ix-application-switch-modal": [ + "ix-spinner" + ], + "ix-avatar": [ + "ix-spinner" + ], + "ix-breadcrumb-item": [ + "ix-spinner" + ], + "ix-button": [ + "ix-spinner" + ], + "ix-category-filter": [ + "ix-spinner" + ], + "ix-icon-button": [ + "ix-spinner" + ], + "ix-icon-toggle-button": [ + "ix-spinner" + ], + "ix-menu-expand-icon": [ + "ix-spinner" + ], + "ix-modal-loading": [ + "ix-spinner" + ], + "ix-pagination": [ + "ix-spinner" + ], + "ix-toggle-button": [ + "ix-spinner" + ], + "ix-upload": [ + "ix-spinner" + ] + }, + "props": [ + { + "name": "size", + "type": "\"large\" | \"medium\" | \"small\" | \"x-small\" | \"xx-small\"", "complexType": { - "original": "PushCardVariant", - "resolved": "\"alarm\" | \"critical\" | \"filled\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"", - "references": { - "PushCardVariant": { - "location": "local", - "path": "src/components/push-card/push-card.tsx", - "id": "src/components/push-card/push-card.tsx::PushCardVariant" - } - } + "original": "'xx-small' | 'x-small' | 'small' | 'medium' | 'large'", + "resolved": "\"large\" | \"medium\" | \"small\" | \"x-small\" | \"xx-small\"", + "references": {} }, "mutable": false, - "attr": "variant", + "attr": "size", "reflectToAttr": false, - "docs": "Card variant", - "docsTags": [ - { - "name": "deprecated", - "text": "variant \"insight\" and \"notification\" will be removed in 3.0. Use \"outline\" or \"filled\" instead." - } - ], - "default": "'insight'", - "deprecation": "variant \"insight\" and \"notification\" will be removed in 3.0. Use \"outline\" or \"filled\" instead.", + "docs": "Size of spinner", + "docsTags": [], + "default": "'medium'", "values": [ { - "value": "alarm", - "type": "string" - }, - { - "value": "critical", - "type": "string" - }, - { - "value": "filled", - "type": "string" - }, - { - "value": "info", - "type": "string" - }, - { - "value": "insight", + "value": "large", "type": "string" }, { - "value": "neutral", + "value": "medium", "type": "string" }, { - "value": "notification", + "value": "small", "type": "string" }, { - "value": "outline", + "value": "x-small", "type": "string" }, { - "value": "primary", + "value": "xx-small", "type": "string" - }, + } + ], + "optional": false, + "required": false + }, + { + "name": "variant", + "type": "\"primary\" | \"secondary\"", + "complexType": { + "original": "'primary' | 'secondary'", + "resolved": "\"primary\" | \"secondary\"", + "references": {} + }, + "mutable": false, + "attr": "variant", + "reflectToAttr": false, + "docs": "Variant of spinner", + "docsTags": [], + "default": "'secondary'", + "values": [ { - "value": "success", + "value": "primary", "type": "string" }, { - "value": "warning", + "value": "secondary", "type": "string" } ], @@ -12936,124 +17191,75 @@ "listeners": [] }, { - "dirPath": "src/components/row", - "filePath": "src/components/row/row.tsx", - "fileName": "row.tsx", - "readmePath": "src/components/row/readme.md", - "usagesDir": "src/components/row/usage", - "tag": "ix-row", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [ - { - "name": "since", - "text": "2.0.0" - } - ], - "encapsulation": "shadow", - "dependents": [ - "ix-date-dropdown", - "ix-datetime-picker" - ], - "dependencies": [], - "dependencyGraph": { - "ix-date-dropdown": [ - "ix-row" - ], - "ix-datetime-picker": [ - "ix-row" - ] - }, - "props": [], - "methods": [], - "events": [], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/select", - "filePath": "src/components/select/select.tsx", - "fileName": "select.tsx", - "readmePath": "src/components/select/readme.md", - "usagesDir": "src/components/select/usage", - "tag": "ix-select", + "dirPath": "src/components/split-button", + "filePath": "src/components/split-button/split-button.tsx", + "fileName": "split-button.tsx", + "readmePath": "src/components/split-button/readme.md", + "usagesDir": "src/components/split-button/usage", + "tag": "ix-split-button", "overview": "", "usage": {}, "docs": "", "docsTags": [], "encapsulation": "shadow", - "dependents": [ - "ix-pagination" - ], + "dependents": [], "dependencies": [ - "ix-select-item", - "ix-filter-chip", + "ix-button", "ix-icon-button", - "ix-dropdown", - "ix-dropdown-item" + "ix-dropdown" ], "dependencyGraph": { - "ix-select": [ - "ix-select-item", - "ix-filter-chip", + "ix-split-button": [ + "ix-button", "ix-icon-button", - "ix-dropdown", - "ix-dropdown-item" - ], - "ix-select-item": [ - "ix-dropdown-item" + "ix-dropdown" ], - "ix-filter-chip": [ - "ix-icon-button" + "ix-button": [ + "ix-spinner" ], "ix-icon-button": [ "ix-spinner" - ], - "ix-pagination": [ - "ix-select" ] }, "props": [ { - "name": "allowClear", - "type": "boolean", + "name": "closeBehavior", + "type": "\"both\" | \"inside\" | \"outside\" | boolean", "complexType": { - "original": "boolean", - "resolved": "boolean", - "references": {} + "original": "CloseBehavior", + "resolved": "\"both\" | \"inside\" | \"outside\" | boolean", + "references": { + "CloseBehavior": { + "location": "import", + "path": "../dropdown/dropdown-controller", + "id": "src/components/dropdown/dropdown-controller.ts::CloseBehavior" + } + } }, "mutable": false, - "attr": "allow-clear", + "attr": "close-behavior", "reflectToAttr": false, - "docs": "Show clear button", - "docsTags": [], - "default": "false", - "values": [ + "docs": "Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.", + "docsTags": [ { - "type": "boolean" + "name": "since", + "text": "2.3.0" } ], - "optional": false, - "required": false - }, - { - "name": "disabled", - "type": "boolean", - "complexType": { - "original": "boolean", - "resolved": "boolean", - "references": {} - }, - "mutable": false, - "attr": "disabled", - "reflectToAttr": false, - "docs": "If true the select will be in disabled state", - "docsTags": [], - "default": "false", + "default": "'both'", "values": [ + { + "value": "both", + "type": "string" + }, + { + "value": "inside", + "type": "string" + }, + { + "value": "outside", + "type": "string" + }, { "type": "boolean" } @@ -13062,7 +17268,7 @@ "required": false }, { - "name": "editable", + "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", @@ -13070,9 +17276,9 @@ "references": {} }, "mutable": false, - "attr": "editable", + "attr": "disabled", "reflectToAttr": false, - "docs": "Select is extendable", + "docs": "Disabled", "docsTags": [], "default": "false", "values": [ @@ -13084,7 +17290,7 @@ "required": false }, { - "name": "hideListHeader", + "name": "ghost", "type": "boolean", "complexType": { "original": "boolean", @@ -13092,15 +17298,10 @@ "references": {} }, "mutable": false, - "attr": "hide-list-header", + "attr": "ghost", "reflectToAttr": false, - "docs": "Hide list header", - "docsTags": [ - { - "name": "since", - "text": "1.5.0" - } - ], + "docs": "Button invisible", + "docsTags": [], "default": "false", "values": [ { @@ -13111,7 +17312,7 @@ "required": false }, { - "name": "i18nNoMatches", + "name": "icon", "type": "string", "complexType": { "original": "string", @@ -13119,16 +17320,11 @@ "references": {} }, "mutable": false, - "attr": "i-1-8n-no-matches", + "attr": "icon", "reflectToAttr": false, - "docs": "Hint inside of dropdown if no items where found with current filter text", - "docsTags": [ - { - "name": "since", - "text": "1.5.0" - } - ], - "default": "'No matches'", + "docs": "Button icon", + "docsTags": [], + "default": "''", "values": [ { "type": "string" @@ -13138,7 +17334,7 @@ "required": false }, { - "name": "i18nPlaceholder", + "name": "label", "type": "string", "complexType": { "original": "string", @@ -13146,11 +17342,10 @@ "references": {} }, "mutable": false, - "attr": "i-1-8n-placeholder", + "attr": "label", "reflectToAttr": false, - "docs": "Input field placeholder", + "docs": "Button label", "docsTags": [], - "default": "'Select an option'", "values": [ { "type": "string" @@ -13160,70 +17355,78 @@ "required": false }, { - "name": "i18nPlaceholderEditable", - "type": "string", + "name": "outline", + "type": "boolean", "complexType": { - "original": "string", - "resolved": "string", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "i-1-8n-placeholder-editable", + "attr": "outline", "reflectToAttr": false, - "docs": "Input field placeholder for editable select", + "docs": "Button outline variant", "docsTags": [], - "default": "'Type of select option'", + "default": "false", "values": [ { - "type": "string" + "type": "boolean" } ], "optional": false, "required": false }, { - "name": "i18nSelectListHeader", - "type": "string", + "name": "placement", + "type": "\"bottom-end\" | \"bottom-start\" | \"left-end\" | \"left-start\" | \"right-end\" | \"right-start\" | \"top-end\" | \"top-start\"", "complexType": { - "original": "string", - "resolved": "string", - "references": {} + "original": "AlignedPlacement", + "resolved": "\"bottom-end\" | \"bottom-start\" | \"left-end\" | \"left-start\" | \"right-end\" | \"right-start\" | \"top-end\" | \"top-start\"", + "references": { + "AlignedPlacement": { + "location": "import", + "path": "../dropdown/placement", + "id": "src/components/dropdown/placement.ts::AlignedPlacement" + } + } }, "mutable": false, - "attr": "i-1-8n-select-list-header", + "attr": "placement", "reflectToAttr": false, - "docs": "Select list header", + "docs": "Placement of the dropdown", "docsTags": [], - "default": "'Please select an option'", + "default": "'bottom-start'", "values": [ { + "value": "bottom-end", "type": "string" - } - ], - "optional": false, - "required": false - }, - { - "name": "mode", - "type": "\"multiple\" | \"single\"", - "complexType": { - "original": "'single' | 'multiple'", - "resolved": "\"multiple\" | \"single\"", - "references": {} - }, - "mutable": false, - "attr": "mode", - "reflectToAttr": false, - "docs": "Selection mode", - "docsTags": [], - "default": "'single'", - "values": [ + }, + { + "value": "bottom-start", + "type": "string" + }, + { + "value": "left-end", + "type": "string" + }, + { + "value": "left-start", + "type": "string" + }, + { + "value": "right-end", + "type": "string" + }, + { + "value": "right-start", + "type": "string" + }, { - "value": "multiple", + "value": "top-end", "type": "string" }, { - "value": "single", + "value": "top-start", "type": "string" } ], @@ -13231,211 +17434,122 @@ "required": false }, { - "name": "readonly", - "type": "boolean", + "name": "splitIcon", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "readonly", + "attr": "split-icon", "reflectToAttr": false, - "docs": "If true the select will be in readonly mode", + "docs": "Icon of the button on the right", "docsTags": [], - "default": "false", + "default": "'context-menu'", "values": [ { - "type": "boolean" + "type": "string" } ], "optional": false, "required": false }, { - "name": "selectedIndices", - "type": "string | string[]", + "name": "variant", + "type": "\"danger\" | \"primary\" | \"secondary\"", "complexType": { - "original": "string | string[]", - "resolved": "string | string[]", - "references": {} + "original": "SplitButtonVariant", + "resolved": "\"danger\" | \"primary\" | \"secondary\"", + "references": { + "SplitButtonVariant": { + "location": "local", + "path": "src/components/split-button/split-button.tsx", + "id": "src/components/split-button/split-button.tsx::SplitButtonVariant" + } + } }, - "mutable": true, - "attr": "selected-indices", + "mutable": false, + "attr": "variant", "reflectToAttr": false, - "docs": "Indices of selected items.\nThis corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list.", - "docsTags": [ - { - "name": "deprecated", - "text": "since 2.0.0. Use the `value` property instead." - } - ], - "deprecation": "since 2.0.0. Use the `value` property instead.", + "docs": "Color variant of button", + "docsTags": [], + "default": "'primary'", "values": [ { + "value": "danger", "type": "string" }, { - "type": "string[]" - } - ], - "optional": true, - "required": false - }, - { - "name": "value", - "type": "string | string[]", - "complexType": { - "original": "string | string[]", - "resolved": "string | string[]", - "references": {} - }, - "mutable": true, - "attr": "value", - "reflectToAttr": false, - "docs": "Current selected value.\nThis corresponds to the value property of ix-select-items", - "docsTags": [ - { - "name": "since", - "text": "2.0.0" - } - ], - "values": [ - { + "value": "primary", "type": "string" }, { - "type": "string[]" + "value": "secondary", + "type": "string" } ], - "optional": true, + "optional": false, "required": false } ], "methods": [], "events": [ { - "event": "addItem", - "detail": "string", - "bubbles": true, - "complexType": { - "original": "string", - "resolved": "string", - "references": {} - }, - "cancelable": true, - "composed": true, - "docs": "Item added to selection", - "docsTags": [] - }, - { - "event": "inputChange", - "detail": "string", - "bubbles": true, - "complexType": { - "original": "string", - "resolved": "string", - "references": {} - }, - "cancelable": true, - "composed": true, - "docs": "Event dispatched whenever the text input changes.", - "docsTags": [ - { - "name": "since", - "text": "2.0.0" - } - ] - }, - { - "event": "itemSelectionChange", - "detail": "string[]", + "event": "buttonClick", + "detail": "MouseEvent", "bubbles": true, "complexType": { - "original": "string[]", - "resolved": "string[]", - "references": {} - }, - "cancelable": true, - "composed": true, - "docs": "Item selection changed", - "docsTags": [ - { - "name": "deprecated", - "text": "since 2.0.0. Use `valueChange` instead." + "original": "MouseEvent", + "resolved": "MouseEvent", + "references": { + "MouseEvent": { + "location": "global", + "id": "global::MouseEvent" + } } - ], - "deprecation": "since 2.0.0. Use `valueChange` instead." - }, - { - "event": "valueChange", - "detail": "string | string[]", - "bubbles": true, - "complexType": { - "original": "string | string[]", - "resolved": "string | string[]", - "references": {} }, "cancelable": true, "composed": true, - "docs": "Value changed", - "docsTags": [ - { - "name": "since", - "text": "2.0.0" - } - ] + "docs": "Button clicked", + "docsTags": [] } ], "styles": [], "slots": [], "parts": [], - "listeners": [ - { - "event": "itemClick", - "capture": false, - "passive": false - }, - { - "event": "ix-select-item:labelChange", - "capture": false, - "passive": false - } - ] + "listeners": [] }, { - "dirPath": "src/components/select-item", - "filePath": "src/components/select-item/select-item.tsx", - "fileName": "select-item.tsx", - "readmePath": "src/components/select-item/readme.md", - "usagesDir": "src/components/select-item/usage", - "tag": "ix-select-item", + "dirPath": "src/components/split-button-item", + "filePath": "src/components/split-button-item/split-button-item.tsx", + "fileName": "split-button-item.tsx", + "readmePath": "src/components/split-button-item/readme.md", + "usagesDir": "src/components/split-button-item/usage", + "tag": "ix-split-button-item", "overview": "", "usage": {}, "docs": "", - "docsTags": [], - "encapsulation": "shadow", - "dependents": [ - "ix-pagination", - "ix-select" + "docsTags": [ + { + "name": "deprecated", + "text": "since 2.0.0. Use the `ix-dropdown-item` component instead." + } ], + "encapsulation": "shadow", + "dependents": [], "dependencies": [ "ix-dropdown-item" ], "dependencyGraph": { - "ix-select-item": [ + "ix-split-button-item": [ "ix-dropdown-item" - ], - "ix-pagination": [ - "ix-select-item" - ], - "ix-select": [ - "ix-select-item" ] }, + "deprecation": "since 2.0.0. Use the `ix-dropdown-item` component instead.", "props": [ { - "name": "label", + "name": "icon", "type": "string", "complexType": { "original": "string", @@ -13443,82 +17557,59 @@ "references": {} }, "mutable": false, - "attr": "label", - "reflectToAttr": true, - "docs": "Displayed name of the item", - "docsTags": [], - "values": [ - { - "type": "string" - } - ], - "optional": false, - "required": false - }, - { - "name": "selected", - "type": "boolean", - "complexType": { - "original": "boolean", - "resolved": "boolean", - "references": {} - }, - "mutable": false, - "attr": "selected", + "attr": "icon", "reflectToAttr": false, - "docs": "Flag indicating whether the item is selected", + "docs": "Dropdown icon", "docsTags": [], - "default": "false", "values": [ { - "type": "boolean" + "type": "string" } ], "optional": false, "required": false }, { - "name": "value", - "type": "any", + "name": "label", + "type": "string", "complexType": { - "original": "any", - "resolved": "any", - "references": {} - }, - "mutable": false, - "attr": "value", - "reflectToAttr": true, - "docs": "The value of the item.\nImportant: The select component uses string values to handle selection and will call toString() on this value.\nTherefor a string should be passed to value to prevent unexpected behavior.", - "docsTags": [ - { - "name": "deprecated", - "text": "will be changed to type string with next major release (3.0.0)" - } - ], - "deprecation": "will be changed to type string with next major release (3.0.0)", + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "label", + "reflectToAttr": false, + "docs": "Dropdown label", + "docsTags": [], "values": [ { - "type": "any" + "type": "string" } ], "optional": false, - "required": true + "required": false } ], "methods": [], "events": [ { "event": "itemClick", - "detail": "string", + "detail": "MouseEvent", "bubbles": true, "complexType": { - "original": "string", - "resolved": "string", - "references": {} + "original": "MouseEvent", + "resolved": "MouseEvent", + "references": { + "MouseEvent": { + "location": "global", + "id": "global::MouseEvent" + } + } }, "cancelable": true, "composed": true, - "docs": "Item clicked", + "docs": "Dropdown item clicked", "docsTags": [] } ], @@ -13528,190 +17619,152 @@ "listeners": [] }, { - "dirPath": "src/components/slider", - "filePath": "src/components/slider/slider.tsx", - "fileName": "slider.tsx", - "readmePath": "src/components/slider/readme.md", - "usagesDir": "src/components/slider/usage", - "tag": "ix-slider", + "dirPath": "src/components/tab-item", + "filePath": "src/components/tab-item/tab-item.tsx", + "fileName": "tab-item.tsx", + "readmePath": "src/components/tab-item/readme.md", + "usagesDir": "src/components/tab-item/usage", + "tag": "ix-tab-item", "overview": "", "usage": {}, "docs": "", - "docsTags": [ - { - "name": "since", - "text": "2.0.0" - }, - { - "name": "slot", - "text": "label-start - Element will be displayed at the start of the slider" - }, - { - "name": "slot", - "text": "label-end - Element will be displayed at the end of the slider" - } - ], + "docsTags": [], "encapsulation": "shadow", - "dependents": [], - "dependencies": [ - "ix-tooltip", - "ix-typography" + "dependents": [ + "ix-menu-about", + "ix-menu-settings" ], + "dependencies": [], "dependencyGraph": { - "ix-slider": [ - "ix-tooltip", - "ix-typography" + "ix-menu-about": [ + "ix-tab-item" ], - "ix-tooltip": [ - "ix-typography" + "ix-menu-settings": [ + "ix-tab-item" ] }, "props": [ { - "name": "disabled", - "type": "boolean", + "name": "counter", + "type": "number", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "number", + "resolved": "number", "references": {} }, "mutable": false, - "attr": "disabled", + "attr": "counter", "reflectToAttr": false, - "docs": "Show control as disabled", + "docs": "Set counter value", "docsTags": [], - "default": "false", "values": [ { - "type": "boolean" + "type": "number" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "error", - "type": "boolean | string", + "name": "disabled", + "type": "boolean", "complexType": { - "original": "boolean | string", - "resolved": "boolean | string", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "error", + "attr": "disabled", "reflectToAttr": false, - "docs": "Show error state and message", + "docs": "Set disabled tab", "docsTags": [], + "default": "false", "values": [ { "type": "boolean" - }, - { - "type": "string" - } - ], - "optional": true, - "required": false - }, - { - "name": "marker", - "type": "number[]", - "complexType": { - "original": "SliderMarker", - "resolved": "number[]", - "references": { - "SliderMarker": { - "location": "local", - "path": "src/components/slider/slider.tsx", - "id": "src/components/slider/slider.tsx::SliderMarker" - } - } - }, - "mutable": false, - "reflectToAttr": false, - "docs": "Define tick marker on the slider. Marker has to be within slider min/max", - "docsTags": [], - "values": [ - { - "type": "number[]" } ], - "optional": true, + "optional": false, "required": false }, { - "name": "max", - "type": "number", + "name": "icon", + "type": "boolean", "complexType": { - "original": "number", - "resolved": "number", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "max", + "attr": "icon", "reflectToAttr": false, - "docs": "Maximum slider value", + "docs": "Set icon only tab", "docsTags": [], - "default": "100", + "default": "false", "values": [ { - "type": "number" + "type": "boolean" } ], "optional": false, "required": false }, { - "name": "min", - "type": "number", + "name": "layout", + "type": "\"auto\" | \"stretched\"", "complexType": { - "original": "number", - "resolved": "number", + "original": "'auto' | 'stretched'", + "resolved": "\"auto\" | \"stretched\"", "references": {} }, "mutable": false, - "attr": "min", + "attr": "layout", "reflectToAttr": false, - "docs": "Minimum slider value", + "docs": "Set layout width style", "docsTags": [], - "default": "0", + "default": "'auto'", "values": [ { - "type": "number" + "value": "auto", + "type": "string" + }, + { + "value": "stretched", + "type": "string" } ], "optional": false, "required": false }, { - "name": "step", - "type": "number", + "name": "placement", + "type": "\"bottom\" | \"top\"", "complexType": { - "original": "number", - "resolved": "number", + "original": "'bottom' | 'top'", + "resolved": "\"bottom\" | \"top\"", "references": {} }, "mutable": false, - "attr": "step", + "attr": "placement", "reflectToAttr": false, - "docs": "Legal number intervals", - "docsTags": [ - { - "name": "link", - "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step" - } - ], - "default": "1", + "docs": "Set selected placement", + "docsTags": [], + "default": "'bottom'", "values": [ { - "type": "number" + "value": "bottom", + "type": "string" + }, + { + "value": "top", + "type": "string" } ], "optional": false, "required": false }, { - "name": "trace", + "name": "rounded", "type": "boolean", "complexType": { "original": "boolean", @@ -13719,9 +17772,9 @@ "references": {} }, "mutable": false, - "attr": "trace", + "attr": "rounded", "reflectToAttr": false, - "docs": "Show a trace line", + "docs": "Set rounded tab", "docsTags": [], "default": "false", "values": [ @@ -13733,44 +17786,44 @@ "required": false }, { - "name": "traceReference", - "type": "number", + "name": "selected", + "type": "boolean", "complexType": { - "original": "number", - "resolved": "number", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "trace-reference", + "attr": "selected", "reflectToAttr": false, - "docs": "Define the start point of the trace line", + "docs": "Set selected tab", "docsTags": [], - "default": "0", + "default": "false", "values": [ { - "type": "number" + "type": "boolean" } ], "optional": false, "required": false }, { - "name": "value", - "type": "number", + "name": "small", + "type": "boolean", "complexType": { - "original": "number", - "resolved": "number", + "original": "boolean", + "resolved": "boolean", "references": {} }, "mutable": false, - "attr": "value", + "attr": "small", "reflectToAttr": false, - "docs": "Current value of the slider", + "docs": "Set small size tab", "docsTags": [], - "default": "0", + "default": "false", "values": [ { - "type": "number" + "type": "boolean" } ], "optional": false, @@ -13780,133 +17833,83 @@ "methods": [], "events": [ { - "event": "valueChange", - "detail": "number", + "event": "tabClick", + "detail": "{ nativeEvent: MouseEvent; }", "bubbles": true, "complexType": { - "original": "number", - "resolved": "number", - "references": {} + "original": "TabClickDetail", + "resolved": "{ nativeEvent: MouseEvent; }", + "references": { + "TabClickDetail": { + "location": "local", + "path": "src/components/tab-item/tab-item.tsx", + "id": "src/components/tab-item/tab-item.tsx::TabClickDetail" + } + } }, "cancelable": true, "composed": true, - "docs": "", - "docsTags": [] + "docs": "Emitted when the tab is clicked.", + "docsTags": [ + { + "name": "since", + "text": "2.0.0" + } + ] } ], "styles": [], - "slots": [ - { - "name": "label-end", - "docs": "Element will be displayed at the end of the slider" - }, - { - "name": "label-start", - "docs": "Element will be displayed at the start of the slider" - } - ], + "slots": [], "parts": [], "listeners": [] }, { - "dirPath": "src/components/spinner", - "filePath": "src/components/spinner/spinner.tsx", - "fileName": "spinner.tsx", - "readmePath": "src/components/spinner/readme.md", - "usagesDir": "src/components/spinner/usage", - "tag": "ix-spinner", + "dirPath": "src/components/tabs", + "filePath": "src/components/tabs/tabs.tsx", + "fileName": "tabs.tsx", + "readmePath": "src/components/tabs/readme.md", + "usagesDir": "src/components/tabs/usage", + "tag": "ix-tabs", "overview": "", "usage": {}, "docs": "", "docsTags": [], "encapsulation": "shadow", "dependents": [ - "ix-application-switch-modal", - "ix-avatar", - "ix-breadcrumb-item", - "ix-button", - "ix-category-filter", - "ix-icon-button", - "ix-icon-toggle-button", - "ix-menu-expand-icon", - "ix-modal-loading", - "ix-pagination", - "ix-toggle-button", - "ix-upload" + "ix-menu-about", + "ix-menu-settings" ], "dependencies": [], "dependencyGraph": { - "ix-application-switch-modal": [ - "ix-spinner" - ], - "ix-avatar": [ - "ix-spinner" - ], - "ix-breadcrumb-item": [ - "ix-spinner" - ], - "ix-button": [ - "ix-spinner" - ], - "ix-category-filter": [ - "ix-spinner" - ], - "ix-icon-button": [ - "ix-spinner" - ], - "ix-icon-toggle-button": [ - "ix-spinner" - ], - "ix-menu-expand-icon": [ - "ix-spinner" - ], - "ix-modal-loading": [ - "ix-spinner" - ], - "ix-pagination": [ - "ix-spinner" - ], - "ix-toggle-button": [ - "ix-spinner" + "ix-menu-about": [ + "ix-tabs" ], - "ix-upload": [ - "ix-spinner" + "ix-menu-settings": [ + "ix-tabs" ] }, "props": [ { - "name": "size", - "type": "\"large\" | \"medium\" | \"small\" | \"x-small\" | \"xx-small\"", + "name": "layout", + "type": "\"auto\" | \"stretched\"", "complexType": { - "original": "'xx-small' | 'x-small' | 'small' | 'medium' | 'large'", - "resolved": "\"large\" | \"medium\" | \"small\" | \"x-small\" | \"xx-small\"", + "original": "'auto' | 'stretched'", + "resolved": "\"auto\" | \"stretched\"", "references": {} }, "mutable": false, - "attr": "size", + "attr": "layout", "reflectToAttr": false, - "docs": "Size of spinner", + "docs": "Set layout width style", "docsTags": [], - "default": "'medium'", + "default": "'auto'", "values": [ { - "value": "large", - "type": "string" - }, - { - "value": "medium", - "type": "string" - }, - { - "value": "small", - "type": "string" - }, - { - "value": "x-small", + "value": "auto", "type": "string" }, { - "value": "xx-small", + "value": "stretched", "type": "string" } ], @@ -13914,141 +17917,184 @@ "required": false }, { - "name": "variant", - "type": "\"primary\" | \"secondary\"", + "name": "placement", + "type": "\"bottom\" | \"top\"", "complexType": { - "original": "'primary' | 'secondary'", - "resolved": "\"primary\" | \"secondary\"", + "original": "'bottom' | 'top'", + "resolved": "\"bottom\" | \"top\"", "references": {} }, "mutable": false, - "attr": "variant", + "attr": "placement", "reflectToAttr": false, - "docs": "Variant of spinner", + "docs": "Set placement style", "docsTags": [], - "default": "'secondary'", + "default": "'bottom'", "values": [ { - "value": "primary", + "value": "bottom", "type": "string" }, { - "value": "secondary", + "value": "top", "type": "string" } ], "optional": false, "required": false - } - ], - "methods": [], - "events": [], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/split-button", - "filePath": "src/components/split-button/split-button.tsx", - "fileName": "split-button.tsx", - "readmePath": "src/components/split-button/readme.md", - "usagesDir": "src/components/split-button/usage", - "tag": "ix-split-button", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [ - "ix-button", - "ix-icon-button", - "ix-dropdown" - ], - "dependencyGraph": { - "ix-split-button": [ - "ix-button", - "ix-icon-button", - "ix-dropdown" - ], - "ix-button": [ - "ix-spinner" - ], - "ix-icon-button": [ - "ix-spinner" - ] - }, - "props": [ + }, { - "name": "closeBehavior", - "type": "\"both\" | \"inside\" | \"outside\" | boolean", + "name": "rounded", + "type": "boolean", "complexType": { - "original": "CloseBehavior", - "resolved": "\"both\" | \"inside\" | \"outside\" | boolean", - "references": { - "CloseBehavior": { - "location": "import", - "path": "../dropdown/dropdown-controller", - "id": "src/components/dropdown/dropdown-controller.ts::CloseBehavior" - } - } + "original": "boolean", + "resolved": "boolean", + "references": {} }, "mutable": false, - "attr": "close-behavior", + "attr": "rounded", "reflectToAttr": false, - "docs": "Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.", - "docsTags": [ + "docs": "Set rounded tabs", + "docsTags": [], + "default": "false", + "values": [ { - "name": "since", - "text": "2.3.0" + "type": "boolean" } ], - "default": "'both'", + "optional": false, + "required": false + }, + { + "name": "selected", + "type": "number", + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": true, + "attr": "selected", + "reflectToAttr": false, + "docs": "Set default selected tab by index", + "docsTags": [], + "default": "0", "values": [ { - "value": "both", - "type": "string" - }, - { - "value": "inside", - "type": "string" - }, - { - "value": "outside", - "type": "string" - }, - { - "type": "boolean" + "type": "number" } ], "optional": false, "required": false }, { - "name": "disabled", + "name": "small", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, - "mutable": false, - "attr": "disabled", - "reflectToAttr": false, - "docs": "Disabled", - "docsTags": [], - "default": "false", - "values": [ + "mutable": false, + "attr": "small", + "reflectToAttr": false, + "docs": "Set tab items to small size", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [ + { + "event": "selectedChange", + "detail": "number", + "bubbles": true, + "complexType": { + "original": "number", + "resolved": "number", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "`selected` property changed", + "docsTags": [ { - "type": "boolean" + "name": "since", + "text": "2.0.0" } - ], - "optional": false, - "required": false + ] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [ + { + "event": "resize", + "target": "window", + "capture": false, + "passive": true }, { - "name": "ghost", + "event": "tabClick", + "capture": false, + "passive": false + } + ] + }, + { + "dirPath": "src/components/input", + "filePath": "src/components/input/textarea.tsx", + "fileName": "textarea.tsx", + "readmePath": "src/components/input/readme.md", + "usagesDir": "src/components/input/usage", + "tag": "ix-textarea", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "2.6.0" + }, + { + "name": "form-ready", + "text": "2.6.0" + } + ], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [ + "ix-field-wrapper", + "ix-typography" + ], + "dependencyGraph": { + "ix-textarea": [ + "ix-field-wrapper", + "ix-typography" + ], + "ix-field-wrapper": [ + "ix-field-label", + "ix-tooltip", + "ix-typography" + ], + "ix-field-label": [ + "ix-typography" + ], + "ix-tooltip": [ + "ix-typography" + ] + }, + "props": [ + { + "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", @@ -14056,9 +18102,9 @@ "references": {} }, "mutable": false, - "attr": "ghost", + "attr": "disabled", "reflectToAttr": false, - "docs": "Button invisible", + "docs": "Determines if the textarea field is disabled.", "docsTags": [], "default": "false", "values": [ @@ -14070,7 +18116,7 @@ "required": false }, { - "name": "icon", + "name": "helperText", "type": "string", "complexType": { "original": "string", @@ -14078,21 +18124,20 @@ "references": {} }, "mutable": false, - "attr": "icon", + "attr": "helper-text", "reflectToAttr": false, - "docs": "Button icon", + "docs": "The helper text for the textarea field.", "docsTags": [], - "default": "''", "values": [ { "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "label", + "name": "infoText", "type": "string", "complexType": { "original": "string", @@ -14100,99 +18145,41 @@ "references": {} }, "mutable": false, - "attr": "label", + "attr": "info-text", "reflectToAttr": false, - "docs": "Button label", + "docs": "The info text for the textarea field.", "docsTags": [], "values": [ { "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "outline", - "type": "boolean", + "name": "invalidText", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "outline", - "reflectToAttr": false, - "docs": "Button outline variant", - "docsTags": [], - "default": "false", - "values": [ - { - "type": "boolean" - } - ], - "optional": false, - "required": false - }, - { - "name": "placement", - "type": "\"bottom-end\" | \"bottom-start\" | \"left-end\" | \"left-start\" | \"right-end\" | \"right-start\" | \"top-end\" | \"top-start\"", - "complexType": { - "original": "AlignedPlacement", - "resolved": "\"bottom-end\" | \"bottom-start\" | \"left-end\" | \"left-start\" | \"right-end\" | \"right-start\" | \"top-end\" | \"top-start\"", - "references": { - "AlignedPlacement": { - "location": "import", - "path": "../dropdown/placement", - "id": "src/components/dropdown/placement.ts::AlignedPlacement" - } - } - }, - "mutable": false, - "attr": "placement", + "attr": "invalid-text", "reflectToAttr": false, - "docs": "Placement of the dropdown", + "docs": "The error text for the textarea field.", "docsTags": [], - "default": "'bottom-start'", "values": [ { - "value": "bottom-end", - "type": "string" - }, - { - "value": "bottom-start", - "type": "string" - }, - { - "value": "left-end", - "type": "string" - }, - { - "value": "left-start", - "type": "string" - }, - { - "value": "right-end", - "type": "string" - }, - { - "value": "right-start", - "type": "string" - }, - { - "value": "top-end", - "type": "string" - }, - { - "value": "top-start", "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "splitIcon", + "name": "label", "type": "string", "complexType": { "original": "string", @@ -14200,135 +18187,62 @@ "references": {} }, "mutable": false, - "attr": "split-icon", - "reflectToAttr": false, - "docs": "Icon of the button on the right", + "attr": "label", + "reflectToAttr": true, + "docs": "The label for the textarea field.", "docsTags": [], - "default": "'context-menu'", "values": [ { "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "variant", - "type": "\"danger\" | \"primary\" | \"secondary\"", - "complexType": { - "original": "SplitButtonVariant", - "resolved": "\"danger\" | \"primary\" | \"secondary\"", - "references": { - "SplitButtonVariant": { - "location": "local", - "path": "src/components/split-button/split-button.tsx", - "id": "src/components/split-button/split-button.tsx::SplitButtonVariant" - } - } - }, - "mutable": false, - "attr": "variant", - "reflectToAttr": false, - "docs": "Color variant of button", - "docsTags": [], - "default": "'primary'", - "values": [ - { - "value": "danger", - "type": "string" - }, - { - "value": "primary", - "type": "string" - }, - { - "value": "secondary", - "type": "string" - } - ], - "optional": false, - "required": false - } - ], - "methods": [], - "events": [ - { - "event": "buttonClick", - "detail": "MouseEvent", - "bubbles": true, + "name": "maxLength", + "type": "number", "complexType": { - "original": "MouseEvent", - "resolved": "MouseEvent", - "references": { - "MouseEvent": { - "location": "global", - "id": "global::MouseEvent" - } - } - }, - "cancelable": true, - "composed": true, - "docs": "Button clicked", - "docsTags": [] - } - ], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/split-button-item", - "filePath": "src/components/split-button-item/split-button-item.tsx", - "fileName": "split-button-item.tsx", - "readmePath": "src/components/split-button-item/readme.md", - "usagesDir": "src/components/split-button-item/usage", - "tag": "ix-split-button-item", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [ - { - "name": "deprecated", - "text": "since 2.0.0. Use the `ix-dropdown-item` component instead." - } - ], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [ - "ix-dropdown-item" - ], - "dependencyGraph": { - "ix-split-button-item": [ - "ix-dropdown-item" - ] - }, - "deprecation": "since 2.0.0. Use the `ix-dropdown-item` component instead.", - "props": [ + "original": "number", + "resolved": "number", + "references": {} + }, + "mutable": false, + "attr": "max-length", + "reflectToAttr": false, + "docs": "The maximum length of the textarea field.", + "docsTags": [], + "values": [ + { + "type": "number" + } + ], + "optional": true, + "required": false + }, { - "name": "icon", - "type": "string", + "name": "minLength", + "type": "number", "complexType": { - "original": "string", - "resolved": "string", + "original": "number", + "resolved": "number", "references": {} }, "mutable": false, - "attr": "icon", + "attr": "min-length", "reflectToAttr": false, - "docs": "Dropdown icon", + "docs": "The minimum length of the textarea field.", "docsTags": [], "values": [ { - "type": "string" + "type": "number" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "label", + "name": "name", "type": "string", "complexType": { "original": "string", @@ -14336,95 +18250,41 @@ "references": {} }, "mutable": false, - "attr": "label", - "reflectToAttr": false, - "docs": "Dropdown label", + "attr": "name", + "reflectToAttr": true, + "docs": "The name of the textarea field.", "docsTags": [], "values": [ { "type": "string" } ], - "optional": false, + "optional": true, "required": false - } - ], - "methods": [], - "events": [ - { - "event": "itemClick", - "detail": "MouseEvent", - "bubbles": true, - "complexType": { - "original": "MouseEvent", - "resolved": "MouseEvent", - "references": { - "MouseEvent": { - "location": "global", - "id": "global::MouseEvent" - } - } - }, - "cancelable": true, - "composed": true, - "docs": "Dropdown item clicked", - "docsTags": [] - } - ], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/tab-item", - "filePath": "src/components/tab-item/tab-item.tsx", - "fileName": "tab-item.tsx", - "readmePath": "src/components/tab-item/readme.md", - "usagesDir": "src/components/tab-item/usage", - "tag": "ix-tab-item", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [], - "encapsulation": "shadow", - "dependents": [ - "ix-menu-about", - "ix-menu-settings" - ], - "dependencies": [], - "dependencyGraph": { - "ix-menu-about": [ - "ix-tab-item" - ], - "ix-menu-settings": [ - "ix-tab-item" - ] - }, - "props": [ + }, { - "name": "counter", - "type": "number", + "name": "placeholder", + "type": "string", "complexType": { - "original": "number", - "resolved": "number", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "counter", - "reflectToAttr": false, - "docs": "Set counter value", + "attr": "placeholder", + "reflectToAttr": true, + "docs": "The placeholder text for the textarea field.", "docsTags": [], "values": [ { - "type": "number" + "type": "string" } ], "optional": true, "required": false }, { - "name": "disabled", + "name": "readonly", "type": "boolean", "complexType": { "original": "boolean", @@ -14432,9 +18292,9 @@ "references": {} }, "mutable": false, - "attr": "disabled", + "attr": "readonly", "reflectToAttr": false, - "docs": "Set disabled tab", + "docs": "Determines if the textarea field is readonly.", "docsTags": [], "default": "false", "values": [ @@ -14446,7 +18306,7 @@ "required": false }, { - "name": "icon", + "name": "required", "type": "boolean", "complexType": { "original": "boolean", @@ -14454,9 +18314,9 @@ "references": {} }, "mutable": false, - "attr": "icon", - "reflectToAttr": false, - "docs": "Set icon only tab", + "attr": "required", + "reflectToAttr": true, + "docs": "Determines if the textarea field is required.", "docsTags": [], "default": "false", "values": [ @@ -14468,53 +18328,40 @@ "required": false }, { - "name": "layout", - "type": "\"auto\" | \"stretched\"", + "name": "resizeBehavior", + "type": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"", "complexType": { - "original": "'auto' | 'stretched'", - "resolved": "\"auto\" | \"stretched\"", - "references": {} + "original": "TextareaResizeBehavior", + "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"", + "references": { + "TextareaResizeBehavior": { + "location": "local", + "path": "src/components/input/textarea.tsx", + "id": "src/components/input/textarea.tsx::TextareaResizeBehavior" + } + } }, "mutable": false, - "attr": "layout", + "attr": "resize-behavior", "reflectToAttr": false, - "docs": "Set layout width style", + "docs": "Determines the resize behavior of the textarea field.\nResizing can be enabled in one direction, both directions or completely disabled.", "docsTags": [], - "default": "'auto'", + "default": "'both'", "values": [ { - "value": "auto", + "value": "both", "type": "string" }, { - "value": "stretched", + "value": "horizontal", "type": "string" - } - ], - "optional": false, - "required": false - }, - { - "name": "placement", - "type": "\"bottom\" | \"top\"", - "complexType": { - "original": "'bottom' | 'top'", - "resolved": "\"bottom\" | \"top\"", - "references": {} - }, - "mutable": false, - "attr": "placement", - "reflectToAttr": false, - "docs": "Set selected placement", - "docsTags": [], - "default": "'bottom'", - "values": [ + }, { - "value": "bottom", + "value": "none", "type": "string" }, { - "value": "top", + "value": "vertical", "type": "string" } ], @@ -14522,7 +18369,7 @@ "required": false }, { - "name": "rounded", + "name": "showTextAsTooltip", "type": "boolean", "complexType": { "original": "boolean", @@ -14530,282 +18377,270 @@ "references": {} }, "mutable": false, - "attr": "rounded", + "attr": "show-text-as-tooltip", "reflectToAttr": false, - "docs": "Set rounded tab", + "docs": "Determines if the text should be displayed as a tooltip.", "docsTags": [], - "default": "false", "values": [ { "type": "boolean" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "selected", - "type": "boolean", + "name": "textareaCols", + "type": "number", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "number", + "resolved": "number", "references": {} }, "mutable": false, - "attr": "selected", + "attr": "textarea-cols", "reflectToAttr": false, - "docs": "Set selected tab", + "docs": "The width of the textarea specified by number of characters.", "docsTags": [], - "default": "false", "values": [ { - "type": "boolean" + "type": "number" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "small", - "type": "boolean", + "name": "textareaHeight", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "small", + "attr": "textarea-height", "reflectToAttr": false, - "docs": "Set small size tab", + "docs": "The height of the textarea field (e.g. \"52px\").", "docsTags": [], - "default": "false", "values": [ { - "type": "boolean" + "type": "string" } ], - "optional": false, + "optional": true, "required": false - } - ], - "methods": [], - "events": [ - { - "event": "tabClick", - "detail": "{ nativeEvent: MouseEvent; }", - "bubbles": true, - "complexType": { - "original": "TabClickDetail", - "resolved": "{ nativeEvent: MouseEvent; }", - "references": { - "TabClickDetail": { - "location": "local", - "path": "src/components/tab-item/tab-item.tsx", - "id": "src/components/tab-item/tab-item.tsx::TabClickDetail" - } - } - }, - "cancelable": true, - "composed": true, - "docs": "Emitted when the tab is clicked.", - "docsTags": [ - { - "name": "since", - "text": "2.0.0" - } - ] - } - ], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, - { - "dirPath": "src/components/tabs", - "filePath": "src/components/tabs/tabs.tsx", - "fileName": "tabs.tsx", - "readmePath": "src/components/tabs/readme.md", - "usagesDir": "src/components/tabs/usage", - "tag": "ix-tabs", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [], - "encapsulation": "shadow", - "dependents": [ - "ix-menu-about", - "ix-menu-settings" - ], - "dependencies": [], - "dependencyGraph": { - "ix-menu-about": [ - "ix-tabs" - ], - "ix-menu-settings": [ - "ix-tabs" - ] - }, - "props": [ + }, { - "name": "layout", - "type": "\"auto\" | \"stretched\"", + "name": "textareaRows", + "type": "number", "complexType": { - "original": "'auto' | 'stretched'", - "resolved": "\"auto\" | \"stretched\"", + "original": "number", + "resolved": "number", "references": {} }, "mutable": false, - "attr": "layout", + "attr": "textarea-rows", "reflectToAttr": false, - "docs": "Set layout width style", + "docs": "The height of the textarea specified by number of rows.", "docsTags": [], - "default": "'auto'", "values": [ { - "value": "auto", - "type": "string" - }, - { - "value": "stretched", - "type": "string" + "type": "number" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "placement", - "type": "\"bottom\" | \"top\"", + "name": "textareaWidth", + "type": "string", "complexType": { - "original": "'bottom' | 'top'", - "resolved": "\"bottom\" | \"top\"", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "placement", + "attr": "textarea-width", "reflectToAttr": false, - "docs": "Set placement style", + "docs": "The width of the textarea field (e.g. \"200px\").", "docsTags": [], - "default": "'bottom'", "values": [ { - "value": "bottom", - "type": "string" - }, - { - "value": "top", "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "rounded", - "type": "boolean", + "name": "validText", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "rounded", + "attr": "valid-text", "reflectToAttr": false, - "docs": "Set rounded tabs", + "docs": "The valid text for the textarea field.", "docsTags": [], - "default": "false", "values": [ { - "type": "boolean" + "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { - "name": "selected", - "type": "number", + "name": "value", + "type": "string", "complexType": { - "original": "number", - "resolved": "number", + "original": "string", + "resolved": "string", "references": {} }, "mutable": true, - "attr": "selected", - "reflectToAttr": false, - "docs": "Set default selected tab by index", + "attr": "value", + "reflectToAttr": true, + "docs": "The value of the textarea field.", "docsTags": [], - "default": "0", + "default": "''", "values": [ { - "type": "number" + "type": "string" } ], "optional": false, "required": false }, { - "name": "small", - "type": "boolean", + "name": "warningText", + "type": "string", "complexType": { - "original": "boolean", - "resolved": "boolean", + "original": "string", + "resolved": "string", "references": {} }, "mutable": false, - "attr": "small", + "attr": "warning-text", "reflectToAttr": false, - "docs": "Set tab items to small size", + "docs": "The warning text for the textarea field.", "docsTags": [], - "default": "false", "values": [ { - "type": "boolean" + "type": "string" } ], - "optional": false, + "optional": true, "required": false } ], - "methods": [], + "methods": [ + { + "name": "focusInput", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + } + }, + "return": "Promise" + }, + "signature": "focusInput() => Promise", + "parameters": [], + "docs": "Focuses the input field", + "docsTags": [] + }, + { + "name": "getNativeInputElement", + "returns": { + "type": "Promise", + "docs": "" + }, + "complexType": { + "signature": "() => Promise", + "parameters": [], + "references": { + "Promise": { + "location": "global", + "id": "global::Promise" + }, + "HTMLTextAreaElement": { + "location": "global", + "id": "global::HTMLTextAreaElement" + } + }, + "return": "Promise" + }, + "signature": "getNativeInputElement() => Promise", + "parameters": [], + "docs": "Get the native textarea element.", + "docsTags": [] + } + ], "events": [ { - "event": "selectedChange", - "detail": "number", + "event": "ixBlur", + "detail": "void", "bubbles": true, "complexType": { - "original": "number", - "resolved": "number", + "original": "void", + "resolved": "void", "references": {} }, "cancelable": true, "composed": true, - "docs": "`selected` property changed", - "docsTags": [ - { - "name": "since", - "text": "2.0.0" + "docs": "Event emitted when the textarea field loses focus.", + "docsTags": [] + }, + { + "event": "validityStateChange", + "detail": "ValidityState", + "bubbles": true, + "complexType": { + "original": "ValidityState", + "resolved": "ValidityState", + "references": { + "ValidityState": { + "location": "global", + "id": "global::ValidityState" + } } - ] + }, + "cancelable": true, + "composed": true, + "docs": "Event emitted when the validity state of the textarea field changes.", + "docsTags": [] + }, + { + "event": "valueChange", + "detail": "string", + "bubbles": true, + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "cancelable": true, + "composed": true, + "docs": "Event emitted when the value of the textarea field changes.", + "docsTags": [] } ], "styles": [], "slots": [], "parts": [], - "listeners": [ - { - "event": "resize", - "target": "window", - "capture": false, - "passive": true - }, - { - "event": "tabClick", - "capture": false, - "passive": false - } - ] + "listeners": [] }, { "dirPath": "src/components/tile", @@ -15676,7 +19511,12 @@ "overview": "", "usage": {}, "docs": "", - "docsTags": [], + "docsTags": [ + { + "name": "form-ready", + "text": "2.6.0" + } + ], "encapsulation": "shadow", "dependents": [], "dependencies": [], @@ -15770,6 +19610,49 @@ "optional": false, "required": false }, + { + "name": "name", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "name", + "reflectToAttr": true, + "docs": "Name of the checkbox component", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + }, + { + "name": "required", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "required", + "reflectToAttr": true, + "docs": "Required state of the checkbox component.\n\nIf true, checkbox needs to be checked to be valid", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, { "name": "textIndeterminate", "type": "string", @@ -15835,6 +19718,28 @@ ], "optional": false, "required": false + }, + { + "name": "value", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "value", + "reflectToAttr": true, + "docs": "Value of the checkbox component", + "docsTags": [], + "default": "'on'", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false } ], "methods": [], @@ -16103,6 +20008,7 @@ ], "encapsulation": "shadow", "dependents": [ + "ix-field-wrapper", "ix-menu-item", "ix-slider" ], @@ -16113,6 +20019,9 @@ "ix-tooltip": [ "ix-typography" ], + "ix-field-wrapper": [ + "ix-tooltip" + ], "ix-menu-item": [ "ix-tooltip" ], @@ -16630,16 +20539,23 @@ "ix-avatar", "ix-blind", "ix-card-list", + "ix-checkbox", "ix-content-header", "ix-dropdown-header", "ix-empty-state", + "ix-field-label", + "ix-field-wrapper", + "ix-helper-text", + "ix-input", "ix-menu-about-news", "ix-menu-category", "ix-modal-header", "ix-pagination", "ix-pane", "ix-push-card", + "ix-radio", "ix-slider", + "ix-textarea", "ix-time-picker", "ix-tooltip" ], @@ -16663,6 +20579,9 @@ "ix-card-list": [ "ix-typography" ], + "ix-checkbox": [ + "ix-typography" + ], "ix-content-header": [ "ix-typography" ], @@ -16672,6 +20591,18 @@ "ix-empty-state": [ "ix-typography" ], + "ix-field-label": [ + "ix-typography" + ], + "ix-field-wrapper": [ + "ix-typography" + ], + "ix-helper-text": [ + "ix-typography" + ], + "ix-input": [ + "ix-typography" + ], "ix-menu-about-news": [ "ix-typography" ], @@ -16690,9 +20621,15 @@ "ix-push-card": [ "ix-typography" ], + "ix-radio": [ + "ix-typography" + ], "ix-slider": [ "ix-typography" ], + "ix-textarea": [ + "ix-typography" + ], "ix-time-picker": [ "ix-typography" ], @@ -17740,6 +21677,11 @@ "docstring": "", "path": "src/components/date-dropdown/date-dropdown.tsx" }, + "src/components/date-input/date-input.tsx::DateInputValidityState": { + "declaration": "{\n patternMismatch: boolean;\n invalidReason?: string;\n}", + "docstring": "", + "path": "src/components/date-input/date-input.tsx" + }, "src/components/date-time-card/date-time-card.tsx::DateTimeCardCorners": { "declaration": "export type DateTimeCardCorners = 'rounded' | 'left' | 'right' | 'straight';", "docstring": "", @@ -17850,6 +21792,11 @@ "docstring": "", "path": "src/components/tab-item/tab-item.tsx" }, + "src/components/input/textarea.tsx::TextareaResizeBehavior": { + "declaration": "export type TextareaResizeBehavior =\n | 'both'\n | 'horizontal'\n | 'vertical'\n | 'none';", + "docstring": "", + "path": "src/components/input/textarea.tsx" + }, "src/components/time-picker/time-picker.tsx::TimePickerCorners": { "declaration": "export type DateTimeCardCorners = 'rounded' | 'left' | 'right' | 'straight';", "docstring": "", @@ -17866,7 +21813,7 @@ "path": "src/components/toast/toast-utils.ts" }, "src/components/utils/theme-switcher.ts::IxTheme": { - "declaration": "export type IxTheme =\n | 'classic'\n | 'classic-dark'\n | 'classic-light'\n | (string & {});", + "declaration": "export type IxTheme = LiteralStringUnion<\n 'classic' | 'classic-dark' | 'classic-light'\n>;", "docstring": "", "path": "src/components/utils/theme-switcher.ts" }, @@ -17895,6 +21842,11 @@ "docstring": "", "path": "src/components/category-filter/input-state.ts" }, + "src/components/utils/make-ref.ts::MakeRef": { + "declaration": "{\n (ref: T | undefined): void;\n current: T | null;\n waitForCurrent(): Promise;\n}", + "docstring": "", + "path": "src/components/utils/make-ref.ts" + }, "src/components/flip-tile/flip-tile-state.ts::FlipTileState": { "declaration": "export enum FlipTileState {\n None = 'none',\n Info = 'info',\n Warning = 'warning',\n Alarm = 'alarm',\n Primary = 'primary',\n}", "docstring": "", diff --git a/packages/core/package.json b/packages/core/package.json index 2ae919d5b61..45cccb723b9 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -57,9 +57,9 @@ "@stencil-community/eslint-plugin": "^0.7.1", "@stencil-community/postcss": "^2.2.0", "@stencil/angular-output-target": "^0.8.3", - "@stencil/react-output-target": "^0.5.3", + "@stencil/react-output-target": "0.5.3", "@stencil/sass": "^3.0.8", - "@stencil/vue-output-target": "^0.8.7", + "@stencil/vue-output-target": "0.8.8", "@testing-library/dom": "^8.11.0", "@testing-library/jest-dom": "^5.16.5", "@types/animejs": "^3.1.4", diff --git a/packages/core/scss/components/form/_input.scss b/packages/core/scss/components/form/_input.scss index 6ad86fbac69..b3ec30e3f62 100644 --- a/packages/core/scss/components/form/_input.scss +++ b/packages/core/scss/components/form/_input.scss @@ -8,6 +8,7 @@ */ @import 'common-variables'; @import 'mixins/fonts'; +@import 'mixins/validation/form-component'; @mixin element-input($feature-read-only: true) { & { @@ -17,7 +18,7 @@ padding: 0.25rem 0.5rem; background-color: var(--theme-input--background); color: var(--theme-input--color); - -moz-appearance: textfield; + appearance: textfield; text-overflow: ellipsis; border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color); border-radius: var(--theme-input--border-radius); @@ -38,14 +39,14 @@ } &.hover, &:hover { - &:not(.read-only, .disabled, [readonly], [disabled]) { + &:not(.readonly, .read-only, .disabled, [readonly], [disabled], :read-only) { border-color: var(--theme-input--border-color--hover) !important; background-color: var(--theme-input--background--hover); } } &.focus, &:focus { - &:not(.read-only, .disabled, [readonly], [disabled]) { + &:not(.readonly, .read-only, .disabled, [readonly], [disabled], :read-only) { outline: 1px solid var(--theme-color-focus-bdr); outline-offset: var(--theme-input--focus--outline-offset); border-color: var(--theme-input--border-color--focus) !important; @@ -85,7 +86,6 @@ } @mixin element-textarea { - height: 3.25rem; padding: 0.375rem 1.25rem 0.375rem 0.5rem; } @@ -174,6 +174,51 @@ display: none !important; } } + + @include input-valid; + + @include input-info { + & { + border-color: var(--theme-input--border-color--info); + } + + &:hover { + border-color: var(--theme-input--border-color--info--hover) !important; + } + + &:active { + border-color: var(--theme-input--border-color--info--active) !important; + } + } + + @include input-warning { + & { + border-color: var(--theme-input--border-color--warning--active) !important; + } + + &:hover { + border-color: var(--theme-input--border-color--warning--active) !important; + } + + &:active { + border-color: var(--theme-input--border-color--warning--active) !important; + } + } + + @include input-invalid { + & { + background-color: var(--theme-input--background--invalid); + border-color: var(--theme-input--border-color--invalid) !important; + } + + &:hover { + border-color: var(--theme-input--border-color--invalid--hover) !important; + } + + &:active { + border-color: var(--theme-input--border-color--invalid--active) !important; + } + } } @include form; diff --git a/packages/core/scss/mixins/_field.scss b/packages/core/scss/mixins/_field.scss new file mode 100644 index 00000000000..62dd4be5344 --- /dev/null +++ b/packages/core/scss/mixins/_field.scss @@ -0,0 +1,18 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + @mixin input-invalid { + background-color: var(--theme-input-error--background); + border-color: var(--theme-input-error--border-color); + background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important; + background-position: left calc(0.375em + 0.1875rem) center; + padding-right: 0.75rem; + padding-left: calc(1.5em + 0.75rem); + background-size: 18px; + background-repeat: no-repeat; +} diff --git a/packages/core/scss/mixins/validation/_form-component.scss b/packages/core/scss/mixins/validation/_form-component.scss new file mode 100644 index 00000000000..161178a1610 --- /dev/null +++ b/packages/core/scss/mixins/validation/_form-component.scss @@ -0,0 +1,64 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +$notDisabled: ':not(.disabled):not(:disabled):not([disabled])'; + +@mixin host-valid { + :host(.ix-valid#{$notDisabled}:not(.ix-suppress-valid):not(.ix-invalid--required)) { + @content; + } +} + +@mixin host-info { + :host(.ix-info#{$notDisabled}) { + @content; + } +} + +@mixin host-warning { + :host(.ix-warning#{$notDisabled}) { + @content; + } +} + +@mixin host-invalid { + :host([class*='ix-invalid']#{$notDisabled}), + :host(.ix-invalid--required#{$notDisabled}) { + @content; + } +} + +@mixin input-valid { + textarea, + input { + &.ix-valid#{$notDisabled}:not(.ix-suppress-valid):not(.ix-invalid--required) { + @content; + } + } +} + +@mixin input-info { + textarea.ix-info#{$notDisabled}, + input.ix-info#{$notDisabled} { + @content; + } +} + +@mixin input-warning { + textarea.ix-warning#{$notDisabled}, + input.ix-warning#{$notDisabled} { + @content; + } +} + +@mixin input-invalid { + textarea[class*='ix-invalid']#{$notDisabled}, + input[class*='ix-invalid']#{$notDisabled} { + @content; + } +} diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index d0f874aa83c..a514bc93cd1 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -20,6 +20,7 @@ import { ColumnSize } from "./components/col/col"; import { ContentHeaderVariant } from "./components/content-header/content-header"; import { CssGridTemplateType } from "./components/css-grid/css-grid"; import { DateDropdownOption, DateRangeChangeEvent } from "./components/date-dropdown/date-dropdown"; +import { DateInputValidityState } from "./components/date-input/date-input"; import { DateTimeCardCorners } from "./components/date-time-card/date-time-card"; import { DateChangeEvent } from "./components/date-picker/date-picker"; import { DateTimeCardCorners as DateTimeCardCorners1 } from "./components/date-time-card/date-time-card"; @@ -28,6 +29,7 @@ import { CloseBehavior } from "./components/dropdown/dropdown-controller"; import { AlignedPlacement, Side } from "./components/dropdown/placement"; import { DropdownButtonVariant } from "./components/dropdown-button/dropdown-button"; import { EmptyStateLayout } from "./components/empty-state/empty-state"; +import { MakeRef } from "./components/utils/make-ref"; import { FlipTileState } from "./components/flip-tile/flip-tile-state"; import { IconButtonVariant } from "./components/icon-button/icon-button"; import { ButtonVariant as ButtonVariant1 } from "./components/button/button"; @@ -39,6 +41,7 @@ import { PushCardVariant } from "./components/push-card/push-card"; import { SliderMarker } from "./components/slider/slider"; import { SplitButtonVariant } from "./components/split-button/split-button"; import { TabClickDetail } from "./components/tab-item/tab-item"; +import { TextareaResizeBehavior } from "./components/input/textarea"; import { TimePickerCorners } from "./components/time-picker/time-picker"; import { ToastConfig, ToastType } from "./components/toast/toast-utils"; import { ShowToastResult } from "./components/toast/toast-container"; @@ -61,6 +64,7 @@ export { ColumnSize } from "./components/col/col"; export { ContentHeaderVariant } from "./components/content-header/content-header"; export { CssGridTemplateType } from "./components/css-grid/css-grid"; export { DateDropdownOption, DateRangeChangeEvent } from "./components/date-dropdown/date-dropdown"; +export { DateInputValidityState } from "./components/date-input/date-input"; export { DateTimeCardCorners } from "./components/date-time-card/date-time-card"; export { DateChangeEvent } from "./components/date-picker/date-picker"; export { DateTimeCardCorners as DateTimeCardCorners1 } from "./components/date-time-card/date-time-card"; @@ -69,6 +73,7 @@ export { CloseBehavior } from "./components/dropdown/dropdown-controller"; export { AlignedPlacement, Side } from "./components/dropdown/placement"; export { DropdownButtonVariant } from "./components/dropdown-button/dropdown-button"; export { EmptyStateLayout } from "./components/empty-state/empty-state"; +export { MakeRef } from "./components/utils/make-ref"; export { FlipTileState } from "./components/flip-tile/flip-tile-state"; export { IconButtonVariant } from "./components/icon-button/icon-button"; export { ButtonVariant as ButtonVariant1 } from "./components/button/button"; @@ -80,6 +85,7 @@ export { PushCardVariant } from "./components/push-card/push-card"; export { SliderMarker } from "./components/slider/slider"; export { SplitButtonVariant } from "./components/split-button/split-button"; export { TabClickDetail } from "./components/tab-item/tab-item"; +export { TextareaResizeBehavior } from "./components/input/textarea"; export { TimePickerCorners } from "./components/time-picker/time-picker"; export { ToastConfig, ToastType } from "./components/toast/toast-utils"; export { ShowToastResult } from "./components/toast/toast-container"; @@ -428,6 +434,76 @@ export namespace Components { "suggestions"?: string[]; "tmpDisableScrollIntoView": boolean; } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface IxCheckbox { + /** + * Checked state of the checkbox component + */ + "checked": boolean; + /** + * Disabled state of the checkbox component + */ + "disabled": boolean; + "getAssociatedFormElement": () => Promise; + "hasValidValue": () => Promise; + /** + * Indeterminate state of the checkbox component + */ + "indeterminate": boolean; + /** + * Label for the checkbox component + */ + "label"?: string; + /** + * Name of the checkbox component + */ + "name"?: string; + /** + * Required state of the checkbox component. If true, checkbox needs to be checked to be valid + */ + "required": boolean; + /** + * Value of the checkbox component + */ + "value": string; + } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface IxCheckboxGroup { + /** + * Alignment of the checkboxes in the group + */ + "direction": 'row' | 'column'; + /** + * Optional helper text displayed below the checkbox group + */ + "helperText"?: string; + /** + * Info text for the checkbox group + */ + "infoText"?: string; + /** + * Error text for the checkbox group + */ + "invalidText"?: string; + /** + * Label for the checkbox group + */ + "label"?: string; + /** + * Valid text for the checkbox group + */ + "validText"?: string; + /** + * Warning text for the checkbox group + */ + "warningText"?: string; + } interface IxChip { /** * Determines if the chip is interactive. If false no user input (e.g. mouse states, keyboard navigation) will be possible and also the close button will not be present. @@ -526,6 +602,43 @@ export namespace Components { */ "itemName": string; } + /** + * @since 2.6.0 + */ + interface IxCustomField { + /** + * Show text below the field component which show additional information + */ + "helperText"?: string; + /** + * Info text for the field component + */ + "infoText"?: string; + /** + * Error text for the field component + */ + "invalidText"?: string; + /** + * Label for the field component + */ + "label"?: string; + /** + * A value is required or must be checked for the form to be submittable + */ + "required": boolean; + /** + * Show helper, info, warning, error and valid text as tooltip + */ + "showTextAsTooltip"?: boolean; + /** + * Valid text for the field component + */ + "validText"?: string; + /** + * Warning text for the field component + */ + "warningText"?: string; + } /** * @since 2.1.0 */ @@ -590,6 +703,83 @@ export namespace Components { "to": string; "today": string; } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface IxDateInput { + /** + * disabled attribute + */ + "disabled": boolean; + /** + * Focuses the input field + */ + "focusInput": () => Promise; + /** + * Date format string. See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens. + */ + "format": string; + "getAssociatedFormElement": () => Promise; + /** + * Get the native input element + */ + "getNativeInputElement": () => Promise; + "getValidityState": () => Promise; + "hasValidValue": () => Promise; + /** + * helper text below the input field + */ + "helperText"?: string; + /** + * i18n string for the error message when the date is not parsable + */ + "i18nErrorDateUnparsable": string; + /** + * info text below the input field + */ + "infoText"?: string; + /** + * error text below the input field + */ + "invalidText"?: string; + /** + * label of the input field + */ + "label"?: string; + /** + * name of the input element + */ + "name"?: string; + /** + * placeholder of the input element + */ + "placeholder"?: string; + /** + * readonly attribute + */ + "readonly": boolean; + /** + * required attribute + */ + "required"?: boolean; + /** + * show text as tooltip + */ + "showTextAsTooltip"?: boolean; + /** + * valid text below the input field + */ + "validText"?: string; + /** + * value of the input element + */ + "value": string; + /** + * warning text below the input field + */ + "warningText"?: string; + } interface IxDatePicker { /** * Corner style @@ -670,7 +860,7 @@ export namespace Components { * set styles */ "individual": boolean; - "standaloneAppearance": any; + "standaloneAppearance"?: boolean; } interface IxDatetimePicker { /** @@ -843,6 +1033,7 @@ export namespace Components { * @since 2.0.0 */ "suppressAutomaticPlacement": boolean; + "suppressOverflowBehavior": boolean; /** * Define an element that triggers the dropdown. A trigger can either be a string that will be interpreted as id attribute or a DOM element. */ @@ -1021,6 +1212,76 @@ export namespace Components { */ "value": string; } + interface IxFieldLabel { + "controlRef"?: MakeRef; + /** + * The id of the form element that the label is associated with + */ + "htmlFor"?: string; + "isInvalid": boolean; + /** + * A value is required or must be checked for the form to be submittable + */ + "required"?: boolean; + } + interface IxFieldWrapper { + /** + * The control element that the label is associated with + */ + "controlRef"?: MakeRef; + /** + * Show text below the field component + */ + "helperText"?: string; + /** + * The id of the form element that the label is associated with + */ + "htmlForLabel"?: string; + /** + * Info text for the field component + */ + "infoText"?: string; + /** + * Error text for the field component + */ + "invalidText"?: string; + /** + * Is the field component info + */ + "isInfo": boolean; + /** + * Is the field component invalid + */ + "isInvalid": boolean; + /** + * Is the field component valid + */ + "isValid": boolean; + /** + * Is the field component warning + */ + "isWarning": boolean; + /** + * Label for the field component + */ + "label"?: string; + /** + * Show label as required + */ + "required": boolean; + /** + * Show helper, error, info, warning text as tooltip + */ + "showTextAsTooltip": boolean; + /** + * Valid text for the field component + */ + "validText"?: string; + /** + * Warning text for the field component + */ + "warningText"?: string; + } interface IxFilterChip { /** * If true the filter chip will be in disabled state @@ -1054,12 +1315,6 @@ export namespace Components { */ "contentVisible": boolean; } - interface IxFormField { - /** - * Label - */ - "label": string; - } interface IxGroup { /** * Whether the group is collapsed or expanded. Defaults to true. @@ -1122,6 +1377,32 @@ export namespace Components { */ "text"?: string; } + interface IxHelperText { + /** + * Show text below the field component + */ + "helperText"?: string; + /** + * The id of the form element that the label is associated with + */ + "htmlFor"?: string; + /** + * Info text for the field component + */ + "infoText"?: string; + /** + * Error text for the field component + */ + "invalidText"?: string; + /** + * Valid text for the field component + */ + "validText"?: string; + /** + * Warning text for the field component + */ + "warningText"?: string; + } interface IxIconButton { /** * Accessibility label for the icon button Will be set as aria-label on the nested HTML button element @@ -1214,6 +1495,94 @@ export namespace Components { */ "variant": ButtonVariant1; } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface IxInput { + /** + * The allowed characters pattern for the text field. + */ + "allowedCharactersPattern"?: string; + /** + * Specifies whether the text field is disabled. + */ + "disabled": boolean; + /** + * Focuses the input field + */ + "focusInput": () => Promise; + "getAssociatedFormElement": () => Promise; + /** + * Returns the native input element used in the text field. + */ + "getNativeInputElement": () => Promise; + "hasValidValue": () => Promise; + /** + * The helper text for the text field. + */ + "helperText"?: string; + /** + * The info text for the text field. + */ + "infoText"?: string; + /** + * The error text for the text field. + */ + "invalidText"?: string; + /** + * The label for the text field. + */ + "label"?: string; + /** + * The maximum length of the text field. + */ + "maxLength"?: number; + /** + * The minimum length of the text field. + */ + "minLength"?: number; + /** + * The name of the text field. + */ + "name"?: string; + /** + * The pattern for the text field. + */ + "pattern"?: string; + /** + * The placeholder text for the text field. + */ + "placeholder"?: string; + /** + * Specifies whether the text field is readonly. + */ + "readonly": boolean; + /** + * Specifies whether the text field is required. + */ + "required": boolean; + /** + * Specifies whether to show the text as a tooltip. + */ + "showTextAsTooltip"?: boolean; + /** + * The type of the text field. Possible values are 'text', 'email', or 'password'. + */ + "type": 'text' | 'email' | 'password' | 'tel' | 'url'; + /** + * The valid text for the text field. + */ + "validText"?: string; + /** + * The value of the text field. + */ + "value": string; + /** + * The warning text for the text field. + */ + "warningText"?: string; + } interface IxInputGroup { } /** @@ -1253,6 +1622,18 @@ export namespace Components { "unit": string; "value": string | number; } + /** + * @since 2.6.0 + */ + interface IxLayoutAuto { + /** + * Defines the layout of the form. + */ + "layout": { + minWidth: string; + columns: number; + }[]; + } /** * @since 2.0.0 */ @@ -1684,6 +2065,94 @@ export namespace Components { } interface IxModalLoading { } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface IxNumberInput { + /** + * The allowed characters pattern for the input field + */ + "allowedCharactersPattern"?: string; + /** + * Disables the input field + */ + "disabled": boolean; + /** + * Focuses the input field + */ + "focusInput": () => Promise; + "getAssociatedFormElement": () => Promise; + /** + * Returns the native input element used under the hood + */ + "getNativeInputElement": () => Promise; + "hasValidValue": () => Promise; + /** + * The helper text for the input field + */ + "helperText"?: string; + /** + * The info text for the input field + */ + "infoText"?: string; + /** + * The error text for the input field + */ + "invalidText"?: string; + /** + * The label for the input field + */ + "label"?: string; + /** + * The maximum value for the input field + */ + "max"?: string | number; + /** + * The minimum value for the input field + */ + "min"?: string | number; + /** + * name of the input element + */ + "name"?: string; + /** + * The pattern for the input field + */ + "pattern"?: string; + /** + * placeholder of the input element + */ + "placeholder"?: string; + /** + * Indicates if the field is read-only + */ + "readonly": boolean; + /** + * Indicates if the field is required + */ + "required": boolean; + /** + * Indicates if the stepper buttons should be shown + */ + "showStepperButtons"?: boolean; + /** + * Indicates if the text should be shown as a tooltip + */ + "showTextAsTooltip"?: boolean; + /** + * The valid text for the input field + */ + "validText"?: string; + /** + * The value of the input field + */ + "value": number; + /** + * The warning text for the input field + */ + "warningText"?: string; + } /** * @since 1.5.0 */ @@ -1854,11 +2323,84 @@ export namespace Components { */ "variant": PushCardVariant; } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface IxRadio { + /** + * Checked state of the radio component + */ + "checked": boolean; + /** + * Disabled state of the radio component + */ + "disabled": boolean; + "getAssociatedFormElement": () => Promise; + "hasValidValue": () => Promise; + /** + * Label for the radio component + */ + "label"?: string; + /** + * Name of the radio component + */ + "name"?: string; + /** + * Value of the radio component + */ + "value"?: string; + } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface IxRadioGroup { + /** + * Alignment of the radio buttons in the group + */ + "direction": 'column' | 'row'; + /** + * Show text below the field component + */ + "helperText"?: string; + /** + * Info text for the field component + */ + "infoText"?: string; + /** + * Error text for the field component + */ + "invalidText"?: string; + /** + * Label for the field component + */ + "label"?: string; + /** + * Show helper, info, warning, error and valid text as tooltip + */ + "showTextAsTooltip"?: boolean; + /** + * Valid text for the field component + */ + "validText"?: string; + /** + * Value of the radiobutton group component + */ + "value"?: string; + /** + * Warning text for the field component + */ + "warningText"?: string; + } /** * @since 2.0.0 */ interface IxRow { } + /** + * @form-ready 2.6.0 + */ interface IxSelect { /** * Show clear button @@ -1872,6 +2414,21 @@ export namespace Components { * Select is extendable */ "editable": boolean; + /** + * Focuses the input field + */ + "focusInput": () => Promise; + "getAssociatedFormElement": () => Promise; + /** + * Returns the native input element used in the component. + */ + "getNativeInputElement": () => Promise; + "hasValidValue": () => Promise; + /** + * Helper text for the select component + * @since 2.6.0 + */ + "helperText"?: string; /** * Hide list header * @since 1.5.0 @@ -1894,24 +2451,64 @@ export namespace Components { * Select list header */ "i18nSelectListHeader": string; + /** + * Info text for the select component + * @since 2.6.0 + */ + "infoText"?: string; + /** + * Error text for the select component + * @since 2.6.0 + */ + "invalidText"?: string; + /** + * Label for the select component + * @since 2.6.0 + */ + "label"?: string; /** * Selection mode */ "mode": 'single' | 'multiple'; + /** + * A string that represents the element's name attribute, containing a name that identifies the element when submitting the form. + * @since 2.6.0 + */ + "name"?: string; /** * If true the select will be in readonly mode */ "readonly": boolean; + /** + * A Boolean attribute indicating that an option with a non-empty string value must be selected + * @since 2.6.0 + */ + "required": boolean; /** * Indices of selected items. This corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list. * @deprecated since 2.0.0. Use the `value` property instead. */ "selectedIndices"?: string | string[]; + /** + * Show helper, error, info, warning text as tooltip + * @since 2.6.0 + */ + "showTextAsTooltip"?: boolean; + /** + * Valid text for the select component + * @since 2.6.0 + */ + "validText"?: string; /** * Current selected value. This corresponds to the value property of ix-select-items * @since 2.0.0 */ - "value"?: string | string[]; + "value": string | string[]; + /** + * Warning text for the select component + * @since 2.6.0 + */ + "warningText"?: string; } interface IxSelectItem { "getDropdownItemElement": () => Promise; @@ -2096,6 +2693,102 @@ export namespace Components { */ "small": boolean; } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface IxTextarea { + /** + * Determines if the textarea field is disabled. + */ + "disabled": boolean; + /** + * Focuses the input field + */ + "focusInput": () => Promise; + "getAssociatedFormElement": () => Promise; + /** + * Get the native textarea element. + */ + "getNativeInputElement": () => Promise; + "hasValidValue": () => Promise; + /** + * The helper text for the textarea field. + */ + "helperText"?: string; + /** + * The info text for the textarea field. + */ + "infoText"?: string; + /** + * The error text for the textarea field. + */ + "invalidText"?: string; + /** + * The label for the textarea field. + */ + "label"?: string; + /** + * The maximum length of the textarea field. + */ + "maxLength"?: number; + /** + * The minimum length of the textarea field. + */ + "minLength"?: number; + /** + * The name of the textarea field. + */ + "name"?: string; + /** + * The placeholder text for the textarea field. + */ + "placeholder"?: string; + /** + * Determines if the textarea field is readonly. + */ + "readonly": boolean; + /** + * Determines if the textarea field is required. + */ + "required": boolean; + /** + * Determines the resize behavior of the textarea field. Resizing can be enabled in one direction, both directions or completely disabled. + */ + "resizeBehavior": TextareaResizeBehavior; + /** + * Determines if the text should be displayed as a tooltip. + */ + "showTextAsTooltip"?: boolean; + /** + * The width of the textarea specified by number of characters. + */ + "textareaCols"?: number; + /** + * The height of the textarea field (e.g. "52px"). + */ + "textareaHeight"?: string; + /** + * The height of the textarea specified by number of rows. + */ + "textareaRows"?: number; + /** + * The width of the textarea field (e.g. "200px"). + */ + "textareaWidth"?: string; + /** + * The valid text for the textarea field. + */ + "validText"?: string; + /** + * The value of the textarea field. + */ + "value": string; + /** + * The warning text for the textarea field. + */ + "warningText"?: string; + } interface IxTile { /** * Size of the tile - one of 'small', 'medium' or 'large' @@ -2198,6 +2891,9 @@ export namespace Components { */ "showToast": (config: ToastConfig) => Promise; } + /** + * @form-ready 2.6.0 + */ interface IxToggle { /** * Whether the slide-toggle element is checked or not. @@ -2207,6 +2903,8 @@ export namespace Components { * Whether the slide-toggle element is disabled or not. */ "disabled": boolean; + "getAssociatedFormElement": () => Promise; + "hasValidValue": () => Promise; /** * Hide `on` and `off` text */ @@ -2215,6 +2913,14 @@ export namespace Components { * If true the control is in indeterminate state */ "indeterminate": boolean; + /** + * Name of the checkbox component + */ + "name"?: string; + /** + * Required state of the checkbox component. If true, checkbox needs to be checked to be valid + */ + "required": boolean; /** * Text for indeterminate state */ @@ -2227,6 +2933,10 @@ export namespace Components { * Text for on state */ "textOn": string; + /** + * Value of the checkbox component + */ + "value": string; } /** * @since 2.0.0 @@ -2487,6 +3197,10 @@ export interface IxCategoryFilterCustomEvent extends CustomEvent { detail: T; target: HTMLIxCategoryFilterElement; } +export interface IxCheckboxCustomEvent extends CustomEvent { + detail: T; + target: HTMLIxCheckboxElement; +} export interface IxChipCustomEvent extends CustomEvent { detail: T; target: HTMLIxChipElement; @@ -2499,6 +3213,10 @@ export interface IxDateDropdownCustomEvent extends CustomEvent { detail: T; target: HTMLIxDateDropdownElement; } +export interface IxDateInputCustomEvent extends CustomEvent { + detail: T; + target: HTMLIxDateInputElement; +} export interface IxDatePickerCustomEvent extends CustomEvent { detail: T; target: HTMLIxDatePickerElement; @@ -2547,6 +3265,10 @@ export interface IxIconToggleButtonCustomEvent extends CustomEvent { detail: T; target: HTMLIxIconToggleButtonElement; } +export interface IxInputCustomEvent extends CustomEvent { + detail: T; + target: HTMLIxInputElement; +} export interface IxMapNavigationCustomEvent extends CustomEvent { detail: T; target: HTMLIxMapNavigationElement; @@ -2603,6 +3325,10 @@ export interface IxModalHeaderCustomEvent extends CustomEvent { detail: T; target: HTMLIxModalHeaderElement; } +export interface IxNumberInputCustomEvent extends CustomEvent { + detail: T; + target: HTMLIxNumberInputElement; +} export interface IxPaginationCustomEvent extends CustomEvent { detail: T; target: HTMLIxPaginationElement; @@ -2611,6 +3337,14 @@ export interface IxPaneCustomEvent extends CustomEvent { detail: T; target: HTMLIxPaneElement; } +export interface IxRadioCustomEvent extends CustomEvent { + detail: T; + target: HTMLIxRadioElement; +} +export interface IxRadioGroupCustomEvent extends CustomEvent { + detail: T; + target: HTMLIxRadioGroupElement; +} export interface IxSelectCustomEvent extends CustomEvent { detail: T; target: HTMLIxSelectElement; @@ -2639,6 +3373,10 @@ export interface IxTabsCustomEvent extends CustomEvent { detail: T; target: HTMLIxTabsElement; } +export interface IxTextareaCustomEvent extends CustomEvent { + detail: T; + target: HTMLIxTextareaElement; +} export interface IxTimePickerCustomEvent extends CustomEvent { detail: T; target: HTMLIxTimePickerElement; @@ -2888,6 +3626,38 @@ declare global { prototype: HTMLIxCategoryFilterElement; new (): HTMLIxCategoryFilterElement; }; + interface HTMLIxCheckboxElementEventMap { + "checkedChange": boolean; + "valueChange": string; + } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface HTMLIxCheckboxElement extends Components.IxCheckbox, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIxCheckboxElement, ev: IxCheckboxCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIxCheckboxElement, ev: IxCheckboxCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLIxCheckboxElement: { + prototype: HTMLIxCheckboxElement; + new (): HTMLIxCheckboxElement; + }; + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface HTMLIxCheckboxGroupElement extends Components.IxCheckboxGroup, HTMLStencilElement { + } + var HTMLIxCheckboxGroupElement: { + prototype: HTMLIxCheckboxGroupElement; + new (): HTMLIxCheckboxGroupElement; + }; interface HTMLIxChipElementEventMap { "closeChip": any; } @@ -2952,6 +3722,15 @@ declare global { prototype: HTMLIxCssGridItemElement; new (): HTMLIxCssGridItemElement; }; + /** + * @since 2.6.0 + */ + interface HTMLIxCustomFieldElement extends Components.IxCustomField, HTMLStencilElement { + } + var HTMLIxCustomFieldElement: { + prototype: HTMLIxCustomFieldElement; + new (): HTMLIxCustomFieldElement; + }; interface HTMLIxDateDropdownElementEventMap { "dateRangeChange": DateRangeChangeEvent; } @@ -2972,6 +3751,30 @@ declare global { prototype: HTMLIxDateDropdownElement; new (): HTMLIxDateDropdownElement; }; + interface HTMLIxDateInputElementEventMap { + "valueChange": string; + "validityStateChange": DateInputValidityState; + "ixFocus": void; + "ixBlur": void; + } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface HTMLIxDateInputElement extends Components.IxDateInput, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIxDateInputElement, ev: IxDateInputCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIxDateInputElement, ev: IxDateInputCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLIxDateInputElement: { + prototype: HTMLIxDateInputElement; + new (): HTMLIxDateInputElement; + }; interface HTMLIxDatePickerElementEventMap { "dateChange": DateChangeEvent; "dateRangeChange": DateChangeEvent; @@ -3166,6 +3969,18 @@ declare global { prototype: HTMLIxExpandingSearchElement; new (): HTMLIxExpandingSearchElement; }; + interface HTMLIxFieldLabelElement extends Components.IxFieldLabel, HTMLStencilElement { + } + var HTMLIxFieldLabelElement: { + prototype: HTMLIxFieldLabelElement; + new (): HTMLIxFieldLabelElement; + }; + interface HTMLIxFieldWrapperElement extends Components.IxFieldWrapper, HTMLStencilElement { + } + var HTMLIxFieldWrapperElement: { + prototype: HTMLIxFieldWrapperElement; + new (): HTMLIxFieldWrapperElement; + }; interface HTMLIxFilterChipElementEventMap { "closeClick": void; } @@ -3195,12 +4010,6 @@ declare global { prototype: HTMLIxFlipTileContentElement; new (): HTMLIxFlipTileContentElement; }; - interface HTMLIxFormFieldElement extends Components.IxFormField, HTMLStencilElement { - } - var HTMLIxFormFieldElement: { - prototype: HTMLIxFormFieldElement; - new (): HTMLIxFormFieldElement; - }; interface HTMLIxGroupElementEventMap { "selectGroup": boolean; "selectItem": number; @@ -3243,6 +4052,12 @@ declare global { prototype: HTMLIxGroupItemElement; new (): HTMLIxGroupItemElement; }; + interface HTMLIxHelperTextElement extends Components.IxHelperText, HTMLStencilElement { + } + var HTMLIxHelperTextElement: { + prototype: HTMLIxHelperTextElement; + new (): HTMLIxHelperTextElement; + }; interface HTMLIxIconButtonElement extends Components.IxIconButton, HTMLStencilElement { } var HTMLIxIconButtonElement: { @@ -3269,6 +4084,29 @@ declare global { prototype: HTMLIxIconToggleButtonElement; new (): HTMLIxIconToggleButtonElement; }; + interface HTMLIxInputElementEventMap { + "valueChange": string; + "validityStateChange": ValidityState; + "ixBlur": void; + } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface HTMLIxInputElement extends Components.IxInput, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIxInputElement, ev: IxInputCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIxInputElement, ev: IxInputCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLIxInputElement: { + prototype: HTMLIxInputElement; + new (): HTMLIxInputElement; + }; interface HTMLIxInputGroupElement extends Components.IxInputGroup, HTMLStencilElement { } var HTMLIxInputGroupElement: { @@ -3299,6 +4137,15 @@ declare global { prototype: HTMLIxKpiElement; new (): HTMLIxKpiElement; }; + /** + * @since 2.6.0 + */ + interface HTMLIxLayoutAutoElement extends Components.IxLayoutAuto, HTMLStencilElement { + } + var HTMLIxLayoutAutoElement: { + prototype: HTMLIxLayoutAutoElement; + new (): HTMLIxLayoutAutoElement; + }; /** * @since 2.0.0 */ @@ -3607,6 +4454,29 @@ declare global { prototype: HTMLIxModalLoadingElement; new (): HTMLIxModalLoadingElement; }; + interface HTMLIxNumberInputElementEventMap { + "valueChange": number; + "validityStateChange": ValidityState; + "ixBlur": void; + } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface HTMLIxNumberInputElement extends Components.IxNumberInput, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIxNumberInputElement, ev: IxNumberInputCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIxNumberInputElement, ev: IxNumberInputCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLIxNumberInputElement: { + prototype: HTMLIxNumberInputElement; + new (): HTMLIxNumberInputElement; + }; interface HTMLIxPaginationElementEventMap { "pageSelected": number; "itemCountChanged": number; @@ -3682,6 +4552,49 @@ declare global { prototype: HTMLIxPushCardElement; new (): HTMLIxPushCardElement; }; + interface HTMLIxRadioElementEventMap { + "checkedChange": boolean; + "valueChange": string; + } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface HTMLIxRadioElement extends Components.IxRadio, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIxRadioElement, ev: IxRadioCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIxRadioElement, ev: IxRadioCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLIxRadioElement: { + prototype: HTMLIxRadioElement; + new (): HTMLIxRadioElement; + }; + interface HTMLIxRadioGroupElementEventMap { + "valueChange": string; + } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface HTMLIxRadioGroupElement extends Components.IxRadioGroup, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIxRadioGroupElement, ev: IxRadioGroupCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIxRadioGroupElement, ev: IxRadioGroupCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLIxRadioGroupElement: { + prototype: HTMLIxRadioGroupElement; + new (): HTMLIxRadioGroupElement; + }; /** * @since 2.0.0 */ @@ -3696,7 +4609,11 @@ declare global { "itemSelectionChange": string[]; "inputChange": string; "addItem": string; + "ixBlur": void; } + /** + * @form-ready 2.6.0 + */ interface HTMLIxSelectElement extends Components.IxSelect, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLIxSelectElement, ev: IxSelectCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; @@ -3816,14 +4733,37 @@ declare global { addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLIxTabsElement, ev: IxTabsCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIxTabsElement, ev: IxTabsCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLIxTabsElement: { + prototype: HTMLIxTabsElement; + new (): HTMLIxTabsElement; + }; + interface HTMLIxTextareaElementEventMap { + "valueChange": string; + "validityStateChange": ValidityState; + "ixBlur": void; + } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface HTMLIxTextareaElement extends Components.IxTextarea, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIxTextareaElement, ev: IxTextareaCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIxTextareaElement, ev: IxTextareaCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } - var HTMLIxTabsElement: { - prototype: HTMLIxTabsElement; - new (): HTMLIxTabsElement; + var HTMLIxTextareaElement: { + prototype: HTMLIxTextareaElement; + new (): HTMLIxTextareaElement; }; interface HTMLIxTileElement extends Components.IxTile, HTMLStencilElement { } @@ -3875,7 +4815,11 @@ declare global { }; interface HTMLIxToggleElementEventMap { "checkedChange": boolean; + "valueChange": string; } + /** + * @form-ready 2.6.0 + */ interface HTMLIxToggleElement extends Components.IxToggle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLIxToggleElement, ev: IxToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; @@ -4041,13 +4985,17 @@ declare global { "ix-card-list": HTMLIxCardListElement; "ix-card-title": HTMLIxCardTitleElement; "ix-category-filter": HTMLIxCategoryFilterElement; + "ix-checkbox": HTMLIxCheckboxElement; + "ix-checkbox-group": HTMLIxCheckboxGroupElement; "ix-chip": HTMLIxChipElement; "ix-col": HTMLIxColElement; "ix-content": HTMLIxContentElement; "ix-content-header": HTMLIxContentHeaderElement; "ix-css-grid": HTMLIxCssGridElement; "ix-css-grid-item": HTMLIxCssGridItemElement; + "ix-custom-field": HTMLIxCustomFieldElement; "ix-date-dropdown": HTMLIxDateDropdownElement; + "ix-date-input": HTMLIxDateInputElement; "ix-date-picker": HTMLIxDatePickerElement; "ix-date-time-card": HTMLIxDateTimeCardElement; "ix-datetime-picker": HTMLIxDatetimePickerElement; @@ -4062,19 +5010,23 @@ declare global { "ix-event-list": HTMLIxEventListElement; "ix-event-list-item": HTMLIxEventListItemElement; "ix-expanding-search": HTMLIxExpandingSearchElement; + "ix-field-label": HTMLIxFieldLabelElement; + "ix-field-wrapper": HTMLIxFieldWrapperElement; "ix-filter-chip": HTMLIxFilterChipElement; "ix-flip-tile": HTMLIxFlipTileElement; "ix-flip-tile-content": HTMLIxFlipTileContentElement; - "ix-form-field": HTMLIxFormFieldElement; "ix-group": HTMLIxGroupElement; "ix-group-context-menu": HTMLIxGroupContextMenuElement; "ix-group-item": HTMLIxGroupItemElement; + "ix-helper-text": HTMLIxHelperTextElement; "ix-icon-button": HTMLIxIconButtonElement; "ix-icon-toggle-button": HTMLIxIconToggleButtonElement; + "ix-input": HTMLIxInputElement; "ix-input-group": HTMLIxInputGroupElement; "ix-key-value": HTMLIxKeyValueElement; "ix-key-value-list": HTMLIxKeyValueListElement; "ix-kpi": HTMLIxKpiElement; + "ix-layout-auto": HTMLIxLayoutAutoElement; "ix-layout-grid": HTMLIxLayoutGridElement; "ix-link-button": HTMLIxLinkButtonElement; "ix-map-navigation": HTMLIxMapNavigationElement; @@ -4097,12 +5049,15 @@ declare global { "ix-modal-footer": HTMLIxModalFooterElement; "ix-modal-header": HTMLIxModalHeaderElement; "ix-modal-loading": HTMLIxModalLoadingElement; + "ix-number-input": HTMLIxNumberInputElement; "ix-pagination": HTMLIxPaginationElement; "ix-pane": HTMLIxPaneElement; "ix-pane-layout": HTMLIxPaneLayoutElement; "ix-pill": HTMLIxPillElement; "ix-playground-internal": HTMLIxPlaygroundInternalElement; "ix-push-card": HTMLIxPushCardElement; + "ix-radio": HTMLIxRadioElement; + "ix-radio-group": HTMLIxRadioGroupElement; "ix-row": HTMLIxRowElement; "ix-select": HTMLIxSelectElement; "ix-select-item": HTMLIxSelectItemElement; @@ -4112,6 +5067,7 @@ declare global { "ix-split-button-item": HTMLIxSplitButtonItemElement; "ix-tab-item": HTMLIxTabItemElement; "ix-tabs": HTMLIxTabsElement; + "ix-textarea": HTMLIxTextareaElement; "ix-tile": HTMLIxTileElement; "ix-time-picker": HTMLIxTimePickerElement; "ix-toast": HTMLIxToastElement; @@ -4516,6 +5472,82 @@ declare namespace LocalJSX { "suggestions"?: string[]; "tmpDisableScrollIntoView"?: boolean; } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface IxCheckbox { + /** + * Checked state of the checkbox component + */ + "checked"?: boolean; + /** + * Disabled state of the checkbox component + */ + "disabled"?: boolean; + /** + * Indeterminate state of the checkbox component + */ + "indeterminate"?: boolean; + /** + * Label for the checkbox component + */ + "label"?: string; + /** + * Name of the checkbox component + */ + "name"?: string; + /** + * Event emitted when the checked state of the checkbox changes + */ + "onCheckedChange"?: (event: IxCheckboxCustomEvent) => void; + /** + * Event emitted when the value of the checkbox changes + */ + "onValueChange"?: (event: IxCheckboxCustomEvent) => void; + /** + * Required state of the checkbox component. If true, checkbox needs to be checked to be valid + */ + "required"?: boolean; + /** + * Value of the checkbox component + */ + "value"?: string; + } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface IxCheckboxGroup { + /** + * Alignment of the checkboxes in the group + */ + "direction"?: 'row' | 'column'; + /** + * Optional helper text displayed below the checkbox group + */ + "helperText"?: string; + /** + * Info text for the checkbox group + */ + "infoText"?: string; + /** + * Error text for the checkbox group + */ + "invalidText"?: string; + /** + * Label for the checkbox group + */ + "label"?: string; + /** + * Valid text for the checkbox group + */ + "validText"?: string; + /** + * Warning text for the checkbox group + */ + "warningText"?: string; + } interface IxChip { /** * Determines if the chip is interactive. If false no user input (e.g. mouse states, keyboard navigation) will be possible and also the close button will not be present. @@ -4623,6 +5655,43 @@ declare namespace LocalJSX { */ "itemName"?: string; } + /** + * @since 2.6.0 + */ + interface IxCustomField { + /** + * Show text below the field component which show additional information + */ + "helperText"?: string; + /** + * Info text for the field component + */ + "infoText"?: string; + /** + * Error text for the field component + */ + "invalidText"?: string; + /** + * Label for the field component + */ + "label"?: string; + /** + * A value is required or must be checked for the form to be submittable + */ + "required"?: boolean; + /** + * Show helper, info, warning, error and valid text as tooltip + */ + "showTextAsTooltip"?: boolean; + /** + * Valid text for the field component + */ + "validText"?: string; + /** + * Warning text for the field component + */ + "warningText"?: string; + } /** * @since 2.1.0 */ @@ -4687,6 +5756,82 @@ declare namespace LocalJSX { "to"?: string; "today"?: string; } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface IxDateInput { + /** + * disabled attribute + */ + "disabled"?: boolean; + /** + * Date format string. See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens. + */ + "format"?: string; + /** + * helper text below the input field + */ + "helperText"?: string; + /** + * i18n string for the error message when the date is not parsable + */ + "i18nErrorDateUnparsable"?: string; + /** + * info text below the input field + */ + "infoText"?: string; + /** + * error text below the input field + */ + "invalidText"?: string; + /** + * label of the input field + */ + "label"?: string; + /** + * name of the input element + */ + "name"?: string; + "onIxBlur"?: (event: IxDateInputCustomEvent) => void; + "onIxFocus"?: (event: IxDateInputCustomEvent) => void; + /** + * Validation state change event. + */ + "onValidityStateChange"?: (event: IxDateInputCustomEvent) => void; + /** + * Input change event. + */ + "onValueChange"?: (event: IxDateInputCustomEvent) => void; + /** + * placeholder of the input element + */ + "placeholder"?: string; + /** + * readonly attribute + */ + "readonly"?: boolean; + /** + * required attribute + */ + "required"?: boolean; + /** + * show text as tooltip + */ + "showTextAsTooltip"?: boolean; + /** + * valid text below the input field + */ + "validText"?: string; + /** + * value of the input element + */ + "value"?: string; + /** + * warning text below the input field + */ + "warningText"?: string; + } interface IxDatePicker { /** * Corner style @@ -4783,7 +5928,7 @@ declare namespace LocalJSX { * set styles */ "individual"?: boolean; - "standaloneAppearance"?: any; + "standaloneAppearance"?: boolean; } interface IxDatetimePicker { /** @@ -4982,6 +6127,7 @@ declare namespace LocalJSX { * @since 2.0.0 */ "suppressAutomaticPlacement"?: boolean; + "suppressOverflowBehavior"?: boolean; /** * Define an element that triggers the dropdown. A trigger can either be a string that will be interpreted as id attribute or a DOM element. */ @@ -5164,6 +6310,76 @@ declare namespace LocalJSX { */ "value"?: string; } + interface IxFieldLabel { + "controlRef"?: MakeRef; + /** + * The id of the form element that the label is associated with + */ + "htmlFor"?: string; + "isInvalid"?: boolean; + /** + * A value is required or must be checked for the form to be submittable + */ + "required"?: boolean; + } + interface IxFieldWrapper { + /** + * The control element that the label is associated with + */ + "controlRef"?: MakeRef; + /** + * Show text below the field component + */ + "helperText"?: string; + /** + * The id of the form element that the label is associated with + */ + "htmlForLabel"?: string; + /** + * Info text for the field component + */ + "infoText"?: string; + /** + * Error text for the field component + */ + "invalidText"?: string; + /** + * Is the field component info + */ + "isInfo"?: boolean; + /** + * Is the field component invalid + */ + "isInvalid"?: boolean; + /** + * Is the field component valid + */ + "isValid"?: boolean; + /** + * Is the field component warning + */ + "isWarning"?: boolean; + /** + * Label for the field component + */ + "label"?: string; + /** + * Show label as required + */ + "required"?: boolean; + /** + * Show helper, error, info, warning text as tooltip + */ + "showTextAsTooltip"?: boolean; + /** + * Valid text for the field component + */ + "validText"?: string; + /** + * Warning text for the field component + */ + "warningText"?: string; + } interface IxFilterChip { /** * If true the filter chip will be in disabled state @@ -5201,12 +6417,6 @@ declare namespace LocalJSX { */ "contentVisible"?: boolean; } - interface IxFormField { - /** - * Label - */ - "label"?: string; - } interface IxGroup { /** * Whether the group is collapsed or expanded. Defaults to true. @@ -5285,6 +6495,32 @@ declare namespace LocalJSX { */ "text"?: string; } + interface IxHelperText { + /** + * Show text below the field component + */ + "helperText"?: string; + /** + * The id of the form element that the label is associated with + */ + "htmlFor"?: string; + /** + * Info text for the field component + */ + "infoText"?: string; + /** + * Error text for the field component + */ + "invalidText"?: string; + /** + * Valid text for the field component + */ + "validText"?: string; + /** + * Warning text for the field component + */ + "warningText"?: string; + } interface IxIconButton { /** * Accessibility label for the icon button Will be set as aria-label on the nested HTML button element @@ -5316,70 +6552,160 @@ declare namespace LocalJSX { * Loading button * @since 2.0.0 */ - "loading"?: boolean; + "loading"?: boolean; + /** + * Button outline + */ + "outline"?: boolean; + /** + * Button in oval shape + */ + "oval"?: boolean; + /** + * Size of icon in button + * @deprecated Only size 32 will be removed in 3.0.0 + */ + "size"?: '32' | '24' | '16' | '12'; + /** + * Type of the button + */ + "type"?: 'button' | 'submit'; + /** + * Variant of button + * @since 2.3.0 - variant danger + */ + "variant"?: IconButtonVariant; + } + /** + * @since 2.0.0 + */ + interface IxIconToggleButton { + /** + * Disable the button + */ + "disabled"?: boolean; + /** + * Button with no background or outline + */ + "ghost"?: boolean; + /** + * Icon name + */ + "icon"?: string; + /** + * Loading button + */ + "loading"?: boolean; + /** + * Pressed change event + */ + "onPressedChange"?: (event: IxIconToggleButtonCustomEvent) => void; + /** + * Outline button + */ + "outline"?: boolean; + /** + * Show button as pressed + */ + "pressed"?: boolean; + /** + * Size of icon in button + */ + "size"?: '24' | '16' | '12'; + /** + * Button variant. Important: Variant 'primary' can only be combined with either outline or ghost. + */ + "variant"?: ButtonVariant1; + } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface IxInput { + /** + * The allowed characters pattern for the text field. + */ + "allowedCharactersPattern"?: string; + /** + * Specifies whether the text field is disabled. + */ + "disabled"?: boolean; + /** + * The helper text for the text field. + */ + "helperText"?: string; + /** + * The info text for the text field. + */ + "infoText"?: string; + /** + * The error text for the text field. + */ + "invalidText"?: string; + /** + * The label for the text field. + */ + "label"?: string; + /** + * The maximum length of the text field. + */ + "maxLength"?: number; /** - * Button outline + * The minimum length of the text field. */ - "outline"?: boolean; + "minLength"?: number; /** - * Button in oval shape + * The name of the text field. */ - "oval"?: boolean; + "name"?: string; /** - * Size of icon in button - * @deprecated Only size 32 will be removed in 3.0.0 + * Event emitted when the text field loses focus. */ - "size"?: '32' | '24' | '16' | '12'; + "onIxBlur"?: (event: IxInputCustomEvent) => void; /** - * Type of the button + * Event emitted when the validity state of the text field changes. */ - "type"?: 'button' | 'submit'; + "onValidityStateChange"?: (event: IxInputCustomEvent) => void; /** - * Variant of button - * @since 2.3.0 - variant danger + * Event emitted when the value of the text field changes. */ - "variant"?: IconButtonVariant; - } - /** - * @since 2.0.0 - */ - interface IxIconToggleButton { + "onValueChange"?: (event: IxInputCustomEvent) => void; /** - * Disable the button + * The pattern for the text field. */ - "disabled"?: boolean; + "pattern"?: string; /** - * Button with no background or outline + * The placeholder text for the text field. */ - "ghost"?: boolean; + "placeholder"?: string; /** - * Icon name + * Specifies whether the text field is readonly. */ - "icon"?: string; + "readonly"?: boolean; /** - * Loading button + * Specifies whether the text field is required. */ - "loading"?: boolean; + "required"?: boolean; /** - * Pressed change event + * Specifies whether to show the text as a tooltip. */ - "onPressedChange"?: (event: IxIconToggleButtonCustomEvent) => void; + "showTextAsTooltip"?: boolean; /** - * Outline button + * The type of the text field. Possible values are 'text', 'email', or 'password'. */ - "outline"?: boolean; + "type"?: 'text' | 'email' | 'password' | 'tel' | 'url'; /** - * Show button as pressed + * The valid text for the text field. */ - "pressed"?: boolean; + "validText"?: string; /** - * Size of icon in button + * The value of the text field. */ - "size"?: '24' | '16' | '12'; + "value"?: string; /** - * Button variant. Important: Variant 'primary' can only be combined with either outline or ghost. + * The warning text for the text field. */ - "variant"?: ButtonVariant1; + "warningText"?: string; } interface IxInputGroup { } @@ -5420,6 +6746,18 @@ declare namespace LocalJSX { "unit"?: string; "value"?: string | number; } + /** + * @since 2.6.0 + */ + interface IxLayoutAuto { + /** + * Defines the layout of the form. + */ + "layout"?: { + minWidth: string; + columns: number; + }[]; + } /** * @since 2.0.0 */ @@ -5867,6 +7205,96 @@ declare namespace LocalJSX { } interface IxModalLoading { } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface IxNumberInput { + /** + * The allowed characters pattern for the input field + */ + "allowedCharactersPattern"?: string; + /** + * Disables the input field + */ + "disabled"?: boolean; + /** + * The helper text for the input field + */ + "helperText"?: string; + /** + * The info text for the input field + */ + "infoText"?: string; + /** + * The error text for the input field + */ + "invalidText"?: string; + /** + * The label for the input field + */ + "label"?: string; + /** + * The maximum value for the input field + */ + "max"?: string | number; + /** + * The minimum value for the input field + */ + "min"?: string | number; + /** + * name of the input element + */ + "name"?: string; + /** + * Event emitted when the input field loses focus + */ + "onIxBlur"?: (event: IxNumberInputCustomEvent) => void; + /** + * Event emitted when the validity state of the input field changes + */ + "onValidityStateChange"?: (event: IxNumberInputCustomEvent) => void; + /** + * Event emitted when the value of the input field changes + */ + "onValueChange"?: (event: IxNumberInputCustomEvent) => void; + /** + * The pattern for the input field + */ + "pattern"?: string; + /** + * placeholder of the input element + */ + "placeholder"?: string; + /** + * Indicates if the field is read-only + */ + "readonly"?: boolean; + /** + * Indicates if the field is required + */ + "required"?: boolean; + /** + * Indicates if the stepper buttons should be shown + */ + "showStepperButtons"?: boolean; + /** + * Indicates if the text should be shown as a tooltip + */ + "showTextAsTooltip"?: boolean; + /** + * The valid text for the input field + */ + "validText"?: string; + /** + * The value of the input field + */ + "value"?: number; + /** + * The warning text for the input field + */ + "warningText"?: string; + } /** * @since 1.5.0 */ @@ -6059,11 +7487,94 @@ declare namespace LocalJSX { */ "variant"?: PushCardVariant; } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface IxRadio { + /** + * Checked state of the radio component + */ + "checked"?: boolean; + /** + * Disabled state of the radio component + */ + "disabled"?: boolean; + /** + * Label for the radio component + */ + "label"?: string; + /** + * Name of the radio component + */ + "name"?: string; + /** + * Event emitted when the checked state of the radio changes + */ + "onCheckedChange"?: (event: IxRadioCustomEvent) => void; + /** + * Event emitted when the value of the radio changes + */ + "onValueChange"?: (event: IxRadioCustomEvent) => void; + /** + * Value of the radio component + */ + "value"?: string; + } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface IxRadioGroup { + /** + * Alignment of the radio buttons in the group + */ + "direction"?: 'column' | 'row'; + /** + * Show text below the field component + */ + "helperText"?: string; + /** + * Info text for the field component + */ + "infoText"?: string; + /** + * Error text for the field component + */ + "invalidText"?: string; + /** + * Label for the field component + */ + "label"?: string; + /** + * Event emitted when the value of the radiobutton group changes + */ + "onValueChange"?: (event: IxRadioGroupCustomEvent) => void; + /** + * Show helper, info, warning, error and valid text as tooltip + */ + "showTextAsTooltip"?: boolean; + /** + * Valid text for the field component + */ + "validText"?: string; + /** + * Value of the radiobutton group component + */ + "value"?: string; + /** + * Warning text for the field component + */ + "warningText"?: string; + } /** * @since 2.0.0 */ interface IxRow { } + /** + * @form-ready 2.6.0 + */ interface IxSelect { /** * Show clear button @@ -6077,6 +7588,11 @@ declare namespace LocalJSX { * Select is extendable */ "editable"?: boolean; + /** + * Helper text for the select component + * @since 2.6.0 + */ + "helperText"?: string; /** * Hide list header * @since 1.5.0 @@ -6099,10 +7615,30 @@ declare namespace LocalJSX { * Select list header */ "i18nSelectListHeader"?: string; + /** + * Info text for the select component + * @since 2.6.0 + */ + "infoText"?: string; + /** + * Error text for the select component + * @since 2.6.0 + */ + "invalidText"?: string; + /** + * Label for the select component + * @since 2.6.0 + */ + "label"?: string; /** * Selection mode */ "mode"?: 'single' | 'multiple'; + /** + * A string that represents the element's name attribute, containing a name that identifies the element when submitting the form. + * @since 2.6.0 + */ + "name"?: string; /** * Item added to selection */ @@ -6117,6 +7653,10 @@ declare namespace LocalJSX { * @deprecated since 2.0.0. Use `valueChange` instead. */ "onItemSelectionChange"?: (event: IxSelectCustomEvent) => void; + /** + * Blur input + */ + "onIxBlur"?: (event: IxSelectCustomEvent) => void; /** * Value changed * @since 2.0.0 @@ -6126,16 +7666,36 @@ declare namespace LocalJSX { * If true the select will be in readonly mode */ "readonly"?: boolean; + /** + * A Boolean attribute indicating that an option with a non-empty string value must be selected + * @since 2.6.0 + */ + "required"?: boolean; /** * Indices of selected items. This corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list. * @deprecated since 2.0.0. Use the `value` property instead. */ "selectedIndices"?: string | string[]; + /** + * Show helper, error, info, warning text as tooltip + * @since 2.6.0 + */ + "showTextAsTooltip"?: boolean; + /** + * Valid text for the select component + * @since 2.6.0 + */ + "validText"?: string; /** * Current selected value. This corresponds to the value property of ix-select-items * @since 2.0.0 */ "value"?: string | string[]; + /** + * Warning text for the select component + * @since 2.6.0 + */ + "warningText"?: string; } interface IxSelectItem { "hover"?: boolean; @@ -6337,6 +7897,104 @@ declare namespace LocalJSX { */ "small"?: boolean; } + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + interface IxTextarea { + /** + * Determines if the textarea field is disabled. + */ + "disabled"?: boolean; + /** + * The helper text for the textarea field. + */ + "helperText"?: string; + /** + * The info text for the textarea field. + */ + "infoText"?: string; + /** + * The error text for the textarea field. + */ + "invalidText"?: string; + /** + * The label for the textarea field. + */ + "label"?: string; + /** + * The maximum length of the textarea field. + */ + "maxLength"?: number; + /** + * The minimum length of the textarea field. + */ + "minLength"?: number; + /** + * The name of the textarea field. + */ + "name"?: string; + /** + * Event emitted when the textarea field loses focus. + */ + "onIxBlur"?: (event: IxTextareaCustomEvent) => void; + /** + * Event emitted when the validity state of the textarea field changes. + */ + "onValidityStateChange"?: (event: IxTextareaCustomEvent) => void; + /** + * Event emitted when the value of the textarea field changes. + */ + "onValueChange"?: (event: IxTextareaCustomEvent) => void; + /** + * The placeholder text for the textarea field. + */ + "placeholder"?: string; + /** + * Determines if the textarea field is readonly. + */ + "readonly"?: boolean; + /** + * Determines if the textarea field is required. + */ + "required"?: boolean; + /** + * Determines the resize behavior of the textarea field. Resizing can be enabled in one direction, both directions or completely disabled. + */ + "resizeBehavior"?: TextareaResizeBehavior; + /** + * Determines if the text should be displayed as a tooltip. + */ + "showTextAsTooltip"?: boolean; + /** + * The width of the textarea specified by number of characters. + */ + "textareaCols"?: number; + /** + * The height of the textarea field (e.g. "52px"). + */ + "textareaHeight"?: string; + /** + * The height of the textarea specified by number of rows. + */ + "textareaRows"?: number; + /** + * The width of the textarea field (e.g. "200px"). + */ + "textareaWidth"?: string; + /** + * The valid text for the textarea field. + */ + "validText"?: string; + /** + * The value of the textarea field. + */ + "value"?: string; + /** + * The warning text for the textarea field. + */ + "warningText"?: string; + } interface IxTile { /** * Size of the tile - one of 'small', 'medium' or 'large' @@ -6447,6 +8105,9 @@ declare namespace LocalJSX { "containerId"?: string; "position"?: 'bottom-right' | 'top-right'; } + /** + * @form-ready 2.6.0 + */ interface IxToggle { /** * Whether the slide-toggle element is checked or not. @@ -6464,10 +8125,19 @@ declare namespace LocalJSX { * If true the control is in indeterminate state */ "indeterminate"?: boolean; + /** + * Name of the checkbox component + */ + "name"?: string; /** * An event will be dispatched each time the slide-toggle changes its value. */ "onCheckedChange"?: (event: IxToggleCustomEvent) => void; + "onValueChange"?: (event: IxToggleCustomEvent) => void; + /** + * Required state of the checkbox component. If true, checkbox needs to be checked to be valid + */ + "required"?: boolean; /** * Text for indeterminate state */ @@ -6480,6 +8150,10 @@ declare namespace LocalJSX { * Text for on state */ "textOn"?: string; + /** + * Value of the checkbox component + */ + "value"?: string; } /** * @since 2.0.0 @@ -6761,13 +8435,17 @@ declare namespace LocalJSX { "ix-card-list": IxCardList; "ix-card-title": IxCardTitle; "ix-category-filter": IxCategoryFilter; + "ix-checkbox": IxCheckbox; + "ix-checkbox-group": IxCheckboxGroup; "ix-chip": IxChip; "ix-col": IxCol; "ix-content": IxContent; "ix-content-header": IxContentHeader; "ix-css-grid": IxCssGrid; "ix-css-grid-item": IxCssGridItem; + "ix-custom-field": IxCustomField; "ix-date-dropdown": IxDateDropdown; + "ix-date-input": IxDateInput; "ix-date-picker": IxDatePicker; "ix-date-time-card": IxDateTimeCard; "ix-datetime-picker": IxDatetimePicker; @@ -6782,19 +8460,23 @@ declare namespace LocalJSX { "ix-event-list": IxEventList; "ix-event-list-item": IxEventListItem; "ix-expanding-search": IxExpandingSearch; + "ix-field-label": IxFieldLabel; + "ix-field-wrapper": IxFieldWrapper; "ix-filter-chip": IxFilterChip; "ix-flip-tile": IxFlipTile; "ix-flip-tile-content": IxFlipTileContent; - "ix-form-field": IxFormField; "ix-group": IxGroup; "ix-group-context-menu": IxGroupContextMenu; "ix-group-item": IxGroupItem; + "ix-helper-text": IxHelperText; "ix-icon-button": IxIconButton; "ix-icon-toggle-button": IxIconToggleButton; + "ix-input": IxInput; "ix-input-group": IxInputGroup; "ix-key-value": IxKeyValue; "ix-key-value-list": IxKeyValueList; "ix-kpi": IxKpi; + "ix-layout-auto": IxLayoutAuto; "ix-layout-grid": IxLayoutGrid; "ix-link-button": IxLinkButton; "ix-map-navigation": IxMapNavigation; @@ -6817,12 +8499,15 @@ declare namespace LocalJSX { "ix-modal-footer": IxModalFooter; "ix-modal-header": IxModalHeader; "ix-modal-loading": IxModalLoading; + "ix-number-input": IxNumberInput; "ix-pagination": IxPagination; "ix-pane": IxPane; "ix-pane-layout": IxPaneLayout; "ix-pill": IxPill; "ix-playground-internal": IxPlaygroundInternal; "ix-push-card": IxPushCard; + "ix-radio": IxRadio; + "ix-radio-group": IxRadioGroup; "ix-row": IxRow; "ix-select": IxSelect; "ix-select-item": IxSelectItem; @@ -6832,6 +8517,7 @@ declare namespace LocalJSX { "ix-split-button-item": IxSplitButtonItem; "ix-tab-item": IxTabItem; "ix-tabs": IxTabs; + "ix-textarea": IxTextarea; "ix-tile": IxTile; "ix-time-picker": IxTimePicker; "ix-toast": IxToast; @@ -6893,6 +8579,16 @@ declare module "@stencil/core" { */ "ix-card-title": LocalJSX.IxCardTitle & JSXBase.HTMLAttributes; "ix-category-filter": LocalJSX.IxCategoryFilter & JSXBase.HTMLAttributes; + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + "ix-checkbox": LocalJSX.IxCheckbox & JSXBase.HTMLAttributes; + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + "ix-checkbox-group": LocalJSX.IxCheckboxGroup & JSXBase.HTMLAttributes; "ix-chip": LocalJSX.IxChip & JSXBase.HTMLAttributes; /** * @since 2.0.0 @@ -6905,10 +8601,19 @@ declare module "@stencil/core" { "ix-content-header": LocalJSX.IxContentHeader & JSXBase.HTMLAttributes; "ix-css-grid": LocalJSX.IxCssGrid & JSXBase.HTMLAttributes; "ix-css-grid-item": LocalJSX.IxCssGridItem & JSXBase.HTMLAttributes; + /** + * @since 2.6.0 + */ + "ix-custom-field": LocalJSX.IxCustomField & JSXBase.HTMLAttributes; /** * @since 2.1.0 */ "ix-date-dropdown": LocalJSX.IxDateDropdown & JSXBase.HTMLAttributes; + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + "ix-date-input": LocalJSX.IxDateInput & JSXBase.HTMLAttributes; "ix-date-picker": LocalJSX.IxDatePicker & JSXBase.HTMLAttributes; "ix-date-time-card": LocalJSX.IxDateTimeCard & JSXBase.HTMLAttributes; "ix-datetime-picker": LocalJSX.IxDatetimePicker & JSXBase.HTMLAttributes; @@ -6938,18 +8643,25 @@ declare module "@stencil/core" { "ix-event-list": LocalJSX.IxEventList & JSXBase.HTMLAttributes; "ix-event-list-item": LocalJSX.IxEventListItem & JSXBase.HTMLAttributes; "ix-expanding-search": LocalJSX.IxExpandingSearch & JSXBase.HTMLAttributes; + "ix-field-label": LocalJSX.IxFieldLabel & JSXBase.HTMLAttributes; + "ix-field-wrapper": LocalJSX.IxFieldWrapper & JSXBase.HTMLAttributes; "ix-filter-chip": LocalJSX.IxFilterChip & JSXBase.HTMLAttributes; "ix-flip-tile": LocalJSX.IxFlipTile & JSXBase.HTMLAttributes; "ix-flip-tile-content": LocalJSX.IxFlipTileContent & JSXBase.HTMLAttributes; - "ix-form-field": LocalJSX.IxFormField & JSXBase.HTMLAttributes; "ix-group": LocalJSX.IxGroup & JSXBase.HTMLAttributes; "ix-group-context-menu": LocalJSX.IxGroupContextMenu & JSXBase.HTMLAttributes; "ix-group-item": LocalJSX.IxGroupItem & JSXBase.HTMLAttributes; + "ix-helper-text": LocalJSX.IxHelperText & JSXBase.HTMLAttributes; "ix-icon-button": LocalJSX.IxIconButton & JSXBase.HTMLAttributes; /** * @since 2.0.0 */ "ix-icon-toggle-button": LocalJSX.IxIconToggleButton & JSXBase.HTMLAttributes; + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + "ix-input": LocalJSX.IxInput & JSXBase.HTMLAttributes; "ix-input-group": LocalJSX.IxInputGroup & JSXBase.HTMLAttributes; /** * @since 1.6.0 @@ -6960,6 +8672,10 @@ declare module "@stencil/core" { */ "ix-key-value-list": LocalJSX.IxKeyValueList & JSXBase.HTMLAttributes; "ix-kpi": LocalJSX.IxKpi & JSXBase.HTMLAttributes; + /** + * @since 2.6.0 + */ + "ix-layout-auto": LocalJSX.IxLayoutAuto & JSXBase.HTMLAttributes; /** * @since 2.0.0 */ @@ -7000,6 +8716,11 @@ declare module "@stencil/core" { */ "ix-modal-header": LocalJSX.IxModalHeader & JSXBase.HTMLAttributes; "ix-modal-loading": LocalJSX.IxModalLoading & JSXBase.HTMLAttributes; + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + "ix-number-input": LocalJSX.IxNumberInput & JSXBase.HTMLAttributes; /** * @since 1.5.0 */ @@ -7018,10 +8739,23 @@ declare module "@stencil/core" { * @since 1.6.0 */ "ix-push-card": LocalJSX.IxPushCard & JSXBase.HTMLAttributes; + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + "ix-radio": LocalJSX.IxRadio & JSXBase.HTMLAttributes; + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + "ix-radio-group": LocalJSX.IxRadioGroup & JSXBase.HTMLAttributes; /** * @since 2.0.0 */ "ix-row": LocalJSX.IxRow & JSXBase.HTMLAttributes; + /** + * @form-ready 2.6.0 + */ "ix-select": LocalJSX.IxSelect & JSXBase.HTMLAttributes; "ix-select-item": LocalJSX.IxSelectItem & JSXBase.HTMLAttributes; /** @@ -7036,10 +8770,18 @@ declare module "@stencil/core" { "ix-split-button-item": LocalJSX.IxSplitButtonItem & JSXBase.HTMLAttributes; "ix-tab-item": LocalJSX.IxTabItem & JSXBase.HTMLAttributes; "ix-tabs": LocalJSX.IxTabs & JSXBase.HTMLAttributes; + /** + * @since 2.6.0 + * @form-ready 2.6.0 + */ + "ix-textarea": LocalJSX.IxTextarea & JSXBase.HTMLAttributes; "ix-tile": LocalJSX.IxTile & JSXBase.HTMLAttributes; "ix-time-picker": LocalJSX.IxTimePicker & JSXBase.HTMLAttributes; "ix-toast": LocalJSX.IxToast & JSXBase.HTMLAttributes; "ix-toast-container": LocalJSX.IxToastContainer & JSXBase.HTMLAttributes; + /** + * @form-ready 2.6.0 + */ "ix-toggle": LocalJSX.IxToggle & JSXBase.HTMLAttributes; /** * @since 2.0.0 diff --git a/packages/core/src/components/category-filter/category-filter.scss b/packages/core/src/components/category-filter/category-filter.scss index 61b2fa31a97..bcfb8660c6d 100644 --- a/packages/core/src/components/category-filter/category-filter.scss +++ b/packages/core/src/components/category-filter/category-filter.scss @@ -25,11 +25,6 @@ position: relative; height: auto; - @include host-focus-visible { - border-color: var(--theme-color-primary); - box-shadow: 0 0 $tiny-space 0 var(--theme-color-primary) !important; - } - .reset-button { position: absolute; top: $tiny-space; @@ -45,6 +40,17 @@ @include element-input('false'); } + &:not(.readonly):not(.disabled):hover { + border-color: var(--theme-input--border-color--hover) !important; + background-color: var(--theme-input--background--hover); + } + + &:not(.readonly):not(.disabled).focus { + outline: 1px solid var(--theme-color-focus-bdr); + outline-offset: var(--theme-input--focus--outline-offset); + border-color: var(--theme-input--border-color--focus) !important; + } + &.disabled { color: var(--theme-input--color--disabled); border-bottom: var(--theme-input--border-thickness, 1px) solid @@ -82,9 +88,10 @@ &, &:hover, + &:focus &:focus-visible { - border: none; - outline: none; + border: none !important; + outline: none !important; } &.hide-placeholder::placeholder { diff --git a/packages/core/src/components/checkbox-group/checkbox-group.scss b/packages/core/src/components/checkbox-group/checkbox-group.scss new file mode 100644 index 00000000000..ea9cd126452 --- /dev/null +++ b/packages/core/src/components/checkbox-group/checkbox-group.scss @@ -0,0 +1,26 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +@import 'mixins/shadow-dom/component'; + +:host { + display: inline-block; + position: relative; + + .checkbox-container { + display: flex; + flex-direction: column; + gap: 1rem; + margin: 0.375rem 0; + flex-wrap: wrap; + + &.row-layout { + flex-direction: row; + } + } +} diff --git a/packages/core/src/components/checkbox-group/checkbox-group.tsx b/packages/core/src/components/checkbox-group/checkbox-group.tsx new file mode 100644 index 00000000000..3da6df2b2ac --- /dev/null +++ b/packages/core/src/components/checkbox-group/checkbox-group.tsx @@ -0,0 +1,107 @@ +import { Component, Element, Host, Prop, State, h } from '@stencil/core'; +import { + FieldWrapperInterface, + HookValidationLifecycle, + IxFormValidationState, + ValidationResults, +} from '../utils/input'; +import { IxComponent } from '../utils/internal'; + +/** + * @since 2.6.0 + * @form-ready 2.6.0 + */ +@Component({ + tag: 'ix-checkbox-group', + styleUrl: 'checkbox-group.scss', + shadow: true, +}) +export class CheckboxGroup + implements FieldWrapperInterface, IxFormValidationState, IxComponent +{ + @Element() hostElement!: HTMLIxCheckboxGroupElement; + /** + * Optional helper text displayed below the checkbox group + */ + @Prop() helperText?: string; + + /** + * Label for the checkbox group + */ + @Prop() label?: string; + + /** + * Alignment of the checkboxes in the group + */ + @Prop() direction: 'row' | 'column' = 'column'; + + /** + * Error text for the checkbox group + */ + @Prop() invalidText?: string; + + /** + * Info text for the checkbox group + */ + @Prop() infoText?: string; + /** + * Valid text for the checkbox group + */ + @Prop() validText?: string; + /** + * Warning text for the checkbox group + */ + @Prop() warningText?: string; + + showTextAsTooltip = false; + + @State() isInvalid = false; + @State() isInfo = false; + @State() isValid = false; + @State() isWarning = false; + + @HookValidationLifecycle({ + includeChildren: true, + }) + onClassFieldUpdate({ + isInvalid, + isInvalidByRequired, + isInfo, + isValid, + isWarning, + }: ValidationResults) { + this.isInvalid = isInvalid || isInvalidByRequired; + this.isInfo = isInfo; + this.isValid = isValid; + this.isWarning = isWarning; + } + + render() { + return ( + + +
+ +
+
+
+ ); + } +} diff --git a/packages/core/src/components/checkbox/checkbox.scss b/packages/core/src/components/checkbox/checkbox.scss new file mode 100644 index 00000000000..229be179e8c --- /dev/null +++ b/packages/core/src/components/checkbox/checkbox.scss @@ -0,0 +1,264 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + @import 'mixins/shadow-dom/component'; + +:host { + --ix-checkbox-check-color: var(--theme-color-primary--contrast); + + @include ix-component; + display: inline-block; + position: relative; + + button { + all: unset; + display: inline-flex; + position: relative; + + align-items: center; + justify-content: center; + + width: 1.125rem; + min-width: 1.125rem; + max-width: 1.125rem; + height: 1.125rem; + min-height: 1.125rem; + max-height: 1.125rem; + margin-right: 0.5rem; + } + + button:disabled { + background-color: var(--theme-checkbox-unchecked--background--disabled); + border: var(--theme-checkbox--border-thickness) solid + var(--theme-checkbox-unchecked--border-color--disabled); + } + + button:focus-visible { + outline: 0.0625rem solid var(--theme-color-focus-bdr); + outline-offset: var(--theme-checkbox--focus--outline-offset); + } + + input[type="checkbox"] { + display: none; + } + + label { + display: flex; + + justify-content: flex-start; + align-items: flex-start; + + width: 100%; + height: 100%; + } + + ix-typography { + margin-top: 0.125rem; + } +} + +@mixin checkbox-base() { + :host { + button { + background-color: var(--theme-checkbox-unchecked--background); + border: var(--theme-checkbox--border-thickness) solid + var(--theme-checkbox-unchecked--border-color); + } + } + + :host(:hover) { + button { + background-color: var(--theme-checkbox-unchecked--background--hover); + border: var(--theme-checkbox--border-thickness) solid + var(--theme-checkbox-unchecked--border-color--hover); + } + } + + :host(:active) { + button { + background-color: var(--theme-checkbox-unchecked--background--active); + border: var(--theme-checkbox--border-thickness) solid + var(--theme-checkbox-unchecked--border-color--active); + } + } + + :host(.checked), + :host(.indeterminate) { + button { + background-color: var(--theme-checkbox-checked--background); + border: var(--theme-checkbox--border-thickness) solid + var(--theme-checkbox-checked--border-color); + } + } + + :host(.checked:hover), + :host(.indeterminate:hover) { + button { + background-color: var(--theme-checkbox-checked--background--hover); + border: var(--theme-checkbox--border-thickness) solid + var(--theme-checkbox-checked--border-color--hover); + } + } + + :host(.checked:active), + :host(.indeterminate:active) { + button { + background-color: var(--theme-checkbox-checked--background--active); + border: var(--theme-checkbox--border-thickness) solid + var(--theme-checkbox-checked--border-color--active); + } + } + + :host(:disabled), + :host(.disabled) { + button { + background-color: var(--theme-checkbox-unchecked--background--disabled); + border: var(--theme-checkbox--border-thickness) solid + var(--theme-checkbox-unchecked--border-color--disabled); + } + } + + :host(.checked:disabled), + :host(.checked.disabled), + :host(.indeterminate:disabled), + :host(.indeterminate.disabled) { + button { + background-color: var(--theme-checkbox-checked--background--disabled); + border: var(--theme-checkbox--border-thickness) solid + var(--theme-checkbox-checked--border-color--disabled); + } + } +} + +@mixin checkbox-variant($selector) { + :host(#{$selector}) { + button { + @content; + background-color: var(--theme-checkbox-unchecked--background); + border: var(--theme-checkbox--border-thickness) solid + var(--theme-checkbox-unchecked--border-color); + } + } + + :host(#{$selector}:hover) { + button { + background-color: var(--theme-checkbox-unchecked--background--hover); + border: var(--theme-checkbox--border-thickness) solid + var(--theme-checkbox-unchecked--border-color--hover); + } + } + + :host(#{$selector}:active) { + button { + background-color: var(--theme-checkbox-unchecked--background--active); + border: var(--theme-checkbox--border-thickness) solid + var(--theme-checkbox-unchecked--border-color--active); + } + } + + :host(#{$selector}.checked), + :host(#{$selector}.indeterminate) { + button { + background-color: var(--theme-checkbox-checked--background); + border: var(--theme-checkbox--border-thickness) solid + var(--theme-checkbox-checked--border-color); + } + } + + :host(#{$selector}.checked:hover), + :host(#{$selector}.indeterminate:hover) { + button { + background-color: var(--theme-checkbox-checked--background--hover); + border: var(--theme-checkbox--border-thickness) solid + var(--theme-checkbox-checked--border-color--hover); + } + } + + :host(#{$selector}.checked:active), + :host(#{$selector}.indeterminate:active) { + button { + background-color: var(--theme-checkbox-checked--background--active); + border: var(--theme-checkbox--border-thickness) solid + var(--theme-checkbox-checked--border-color--active); + } + } + + :host(#{$selector}:disabled), + :host(#{$selector}.disabled) { + button { + background-color: var(--theme-checkbox-unchecked--background--disabled); + border: var(--theme-checkbox--border-thickness) solid + var(--theme-checkbox-unchecked--border-color--disabled); + } + } + + :host(#{$selector}.checked:disabled), + :host(#{$selector}.checked.disabled), + :host(#{$selector}.indeterminate:disabled), + :host(#{$selector}.indeterminate.disabled) { + button { + background-color: var(--theme-checkbox-checked--background--disabled); + border: var(--theme-checkbox--border-thickness) solid + var(--theme-checkbox-checked--border-color--disabled); + } + } +} + +@mixin define-checkbox-vars($state, $type) { + --theme-checkbox-#{$state}--background: var(--theme-checkbox-#{$state}--background--#{$type}); + --theme-checkbox-#{$state}--background--hover: var(--theme-checkbox-#{$state}--background--#{$type}--hover); + --theme-checkbox-#{$state}--background--active: var(--theme-checkbox-#{$state}--background--#{$type}--active); + + --theme-checkbox-#{$state}--border-color: var(--theme-checkbox-#{$state}--border-color--#{$type}); + --theme-checkbox-#{$state}--border-color--hover: var(--theme-checkbox-#{$state}--border-color--#{$type}--hover); + --theme-checkbox-#{$state}--border-color--active: var(--theme-checkbox-#{$state}--border-color--#{$type}--active); +} + +@include checkbox-base(); +@include checkbox-variant( + $selector: '.ix-info', +) { + @include define-checkbox-vars('unchecked', 'info'); + @include define-checkbox-vars('checked', 'info'); + @include define-checkbox-vars('mixed', 'info'); +} + +@include checkbox-variant( + $selector: '.ix-warning', +) { + @include define-checkbox-vars('unchecked', 'warning'); + @include define-checkbox-vars('checked', 'warning'); + @include define-checkbox-vars('mixed', 'warning'); +} + +@include checkbox-variant( + $selector: '.ix-invalid--required', +) { + @include define-checkbox-vars('unchecked', 'invalid'); + @include define-checkbox-vars('checked', 'invalid'); + @include define-checkbox-vars('mixed', 'invalid'); +} + +@include checkbox-variant( + $selector: '.ix-invalid', +) { + @include define-checkbox-vars('unchecked', 'invalid'); + @include define-checkbox-vars('checked', 'invalid'); + @include define-checkbox-vars('mixed', 'invalid'); +} + +:host(:disabled), +:host(.disabled) { + pointer-events: none; + + button, + label, + input { + pointer-events: none; + } +} diff --git a/packages/core/src/components/checkbox/checkbox.tsx b/packages/core/src/components/checkbox/checkbox.tsx new file mode 100644 index 00000000000..c80d8ea347a --- /dev/null +++ b/packages/core/src/components/checkbox/checkbox.tsx @@ -0,0 +1,217 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { + AttachInternals, + Component, + Event, + EventEmitter, + Host, + Prop, + Watch, + h, + Element, + Method, +} from '@stencil/core'; +import { HookValidationLifecycle, IxFormComponent } from '../utils/input'; +import { makeRef } from '../utils/make-ref'; + +/** + * @since 2.6.0 + * @form-ready 2.6.0 + */ +@Component({ + tag: 'ix-checkbox', + styleUrl: 'checkbox.scss', + shadow: true, + formAssociated: true, +}) +export class Checkbox implements IxFormComponent { + @Element() hostElement!: HTMLIxCheckboxElement; + + @AttachInternals() formInternals!: ElementInternals; + + /** + * Name of the checkbox component + */ + @Prop({ reflect: true }) name?: string; + + /** + * Value of the checkbox component + */ + @Prop({ reflect: true }) value: string = 'on'; + + /** + * Label for the checkbox component + */ + @Prop() label?: string; + + /** + * Checked state of the checkbox component + */ + @Prop({ reflect: true, mutable: true }) checked: boolean = false; + + /** + * Disabled state of the checkbox component + */ + @Prop({ reflect: true }) disabled: boolean = false; + + /** + * Indeterminate state of the checkbox component + */ + @Prop({ reflect: true }) indeterminate: boolean = false; + + /** + * Required state of the checkbox component. + * + * If true, checkbox needs to be checked to be valid + */ + @Prop({ reflect: true }) required = false; + + /** + * Event emitted when the checked state of the checkbox changes + */ + @Event() checkedChange!: EventEmitter; + + /** + * Event emitted when the value of the checkbox changes + */ + @Event() valueChange!: EventEmitter; + + private readonly inputRef = makeRef((checkboxRef) => { + checkboxRef.checked = this.checked; + }); + + private setCheckedState(newChecked: boolean) { + this.checked = newChecked; + this.checkedChange.emit(this.checked); + } + + @Watch('checked') + onCheckedChange() { + this.updateFormInternalValue(); + } + + @Watch('value') + onValueChange() { + this.valueChange.emit(this.value); + } + + componentWillLoad() { + this.updateFormInternalValue(); + } + + updateFormInternalValue() { + if (this.checked) { + this.formInternals.setFormValue(this.value ?? 'on'); + } else { + this.formInternals.setFormValue(null); + } + } + + /** @internal */ + @Method() + hasValidValue(): Promise { + return Promise.resolve(this.checked); + } + + /** @internal */ + @Method() + getAssociatedFormElement(): Promise { + return Promise.resolve(this.formInternals.form); + } + + @HookValidationLifecycle() + updateClassMappings() { + /** This function is intentionally empty */ + } + + private renderCheckmark() { + if (this.checked) { + return ( + + + + ); + } + + if (this.indeterminate) { + return ( + + + + + ); + } + } + + render() { + return ( + + + + ); + } +} diff --git a/packages/core/src/components/checkbox/tests/checkbox.ct.ts b/packages/core/src/components/checkbox/tests/checkbox.ct.ts new file mode 100644 index 00000000000..d10f66167d1 --- /dev/null +++ b/packages/core/src/components/checkbox/tests/checkbox.ct.ts @@ -0,0 +1,57 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import { getFormValue, preventFormSubmission, test } from '@utils/test'; +import { expect } from '@playwright/test'; + +test(`form-ready`, async ({ mount, page }) => { + await mount(`
`); + + const formElement = page.locator('form'); + preventFormSubmission(formElement); + await page.locator('ix-checkbox').click(); + + const formData = await getFormValue(formElement, 'my-field-name', page); + expect(formData).toBe('on'); +}); + +test(`form-ready with value`, async ({ mount, page }) => { + await mount( + `
` + ); + + const formElement = page.locator('form'); + preventFormSubmission(formElement); + await page.locator('ix-checkbox').click(); + + const formData = await getFormValue(formElement, 'my-field-name', page); + expect(formData).toBe('custom-value'); +}); + +test(`form-ready default active`, async ({ mount, page }) => { + await mount( + `
` + ); + + const formElement = page.locator('form'); + preventFormSubmission(formElement); + const formData = await getFormValue(formElement, 'my-field-name', page); + expect(formData).toBe('on'); +}); + +test(`disabled`, async ({ mount, page }) => { + await mount(``); + const checkboxElement = page.locator('ix-checkbox'); + await expect(checkboxElement).toBeDisabled(); +}); + +test('label', async ({ mount, page }) => { + await mount(``); + const checkboxElement = page.locator('ix-checkbox').locator('label'); + await expect(checkboxElement).toHaveText('some label'); +}); diff --git a/packages/core/src/components/form-field/form-field.scss b/packages/core/src/components/custom-field/custom-field.scss similarity index 65% rename from packages/core/src/components/form-field/form-field.scss rename to packages/core/src/components/custom-field/custom-field.scss index 53c73831ad2..6de0a723592 100644 --- a/packages/core/src/components/form-field/form-field.scss +++ b/packages/core/src/components/custom-field/custom-field.scss @@ -1,13 +1,12 @@ /* - * SPDX-FileCopyrightText: 2023 Siemens AG + * SPDX-FileCopyrightText: 2024 Siemens AG * * SPDX-License-Identifier: MIT * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ -@import 'components/form/input'; :host { - display: contents; + display: block; } diff --git a/packages/core/src/components/custom-field/custom-field.tsx b/packages/core/src/components/custom-field/custom-field.tsx new file mode 100644 index 00000000000..9ce79d1d666 --- /dev/null +++ b/packages/core/src/components/custom-field/custom-field.tsx @@ -0,0 +1,113 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component, Host, Prop, State, h, Element } from '@stencil/core'; +import { + FieldWrapperInterface, + HookValidationLifecycle, + IxFormValidationState, + ValidationResults, +} from '../utils/input'; +import { IxComponent } from '../utils/internal'; + +/** + * @since 2.6.0 + */ +@Component({ + tag: 'ix-custom-field', + styleUrl: 'custom-field.scss', + shadow: true, +}) +export class CustomField + implements FieldWrapperInterface, IxFormValidationState, IxComponent +{ + @Element() hostElement!: HTMLIxCustomFieldElement; + /** + * A value is required or must be checked for the form to be submittable + */ + @Prop() required: boolean = false; + + /** + * Label for the field component + */ + @Prop() label?: string; + + /** + * Show text below the field component which show additional information + */ + @Prop() helperText?: string; + + /** + * Info text for the field component + */ + @Prop() infoText?: string; + + /** + * Warning text for the field component + */ + @Prop() warningText?: string; + + /** + * Error text for the field component + */ + @Prop() invalidText?: string; + + /** + * Valid text for the field component + */ + @Prop() validText?: string; + + /** + * Show helper, info, warning, error and valid text as tooltip + */ + @Prop() showTextAsTooltip?: boolean; + + @State() isInvalid = false; + @State() isValid = false; + @State() isInfo = false; + @State() isWarning = false; + + @HookValidationLifecycle({ + includeChildren: true, + }) + updateValidationState({ + isInvalid, + isValid, + isInfo, + isWarning, + }: ValidationResults) { + this.isInvalid = isInvalid; + this.isValid = isValid; + this.isInfo = isInfo; + this.isWarning = isWarning; + } + + render() { + return ( + + + + + + ); + } +} diff --git a/packages/core/src/components/custom-field/tests/custom-field.ct.ts b/packages/core/src/components/custom-field/tests/custom-field.ct.ts new file mode 100644 index 00000000000..5ab710e4969 --- /dev/null +++ b/packages/core/src/components/custom-field/tests/custom-field.ct.ts @@ -0,0 +1,90 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import { expect } from '@playwright/test'; +import { test } from '@utils/test'; + +test('renders', async ({ mount, page }) => { + await mount(``); + const customFieldElement = page.locator('ix-custom-field'); + await expect(customFieldElement).toHaveClass(/hydrated/); +}); + +test('renders with label', async ({ mount, page }) => { + await mount(``); + const customFieldElement = page.locator('ix-custom-field'); + const fieldLabel = customFieldElement.locator('ix-field-label'); + const typography = fieldLabel.locator('label').locator('ix-typography'); + await expect(customFieldElement).toHaveClass(/hydrated/); + await expect(fieldLabel).toHaveClass(/hydrated/); + await expect(typography).toHaveClass(/typography-label/); + await expect(fieldLabel.filter({ hasText: 'Label' })).toHaveText('Label'); +}); + +test('renders with helper-text', async ({ mount, page }) => { + await mount( + `` + ); + const customFieldElement = page.locator('ix-custom-field'); + const fieldWrapper = customFieldElement.locator('ix-field-wrapper'); + await expect(customFieldElement).toHaveClass(/hydrated/); + await expect(fieldWrapper).toHaveClass(/hydrated/); + await expect(fieldWrapper.filter({ hasText: 'Some helper text' })).toHaveText( + 'Some helper text' + ); +}); + +test('renders with invalid-text', async ({ mount, page }) => { + await mount( + ` + + ` + ); + const customFieldElement = page.locator('ix-custom-field'); + const fieldWrapper = customFieldElement.locator('ix-field-wrapper'); + await expect(customFieldElement).toHaveClass(/hydrated/); + await expect(fieldWrapper).toHaveClass(/hydrated/); + await expect(fieldWrapper.filter({ hasText: 'Error' })).toHaveText('Error'); +}); + +test('renders with invalid-text if on child is invalid', async ({ + mount, + page, +}) => { + await mount( + ` + +
Some custom
+
` + ); + const customFieldElement = page.locator('ix-custom-field'); + const fieldWrapper = customFieldElement.locator('ix-field-wrapper'); + await expect(customFieldElement).toHaveClass(/hydrated/); + await expect(fieldWrapper).toHaveClass(/hydrated/); + await expect(fieldWrapper.filter({ hasText: 'Some helper text' })).toHaveText( + 'Some helper text' + ); + + const custom = customFieldElement.getByTestId('custom'); + custom.evaluate((node) => node.classList.add('ix-invalid')); + + await expect(fieldWrapper.filter({ hasText: 'Error' })).toHaveText('Error'); +}); + +test('renders with required label', async ({ mount, page }) => { + await mount( + `` + ); + const customFieldElement = page.locator('ix-custom-field'); + const fieldLabel = customFieldElement.locator('ix-field-label'); + const typography = fieldLabel.locator('label').locator('ix-typography'); + await expect(customFieldElement).toHaveClass(/hydrated/); + await expect(fieldLabel).toHaveClass(/hydrated/); + await expect(typography).toHaveClass(/typography-label/); + await expect(fieldLabel.filter({ hasText: 'Label *' })).toHaveText('Label *'); +}); diff --git a/packages/core/src/components/date-dropdown/date-dropdown.tsx b/packages/core/src/components/date-dropdown/date-dropdown.tsx index 06dc5cf12cc..edf7bd0f7c8 100644 --- a/packages/core/src/components/date-dropdown/date-dropdown.tsx +++ b/packages/core/src/components/date-dropdown/date-dropdown.tsx @@ -21,6 +21,7 @@ import { Watch, } from '@stencil/core'; import { DateTime } from 'luxon'; +import { type LiteralStringUnion } from '../utils/type-helper'; export type DateDropdownOption = { id: string; @@ -165,7 +166,7 @@ export class DateDropdown { */ @Event() private dateRangeChange: EventEmitter; - @State() private selectedDateRangeId: 'custom' | (string & {}); + @State() private selectedDateRangeId: LiteralStringUnion<'custom'>; @State() private currentRangeValue: { from: string; to: string; diff --git a/packages/core/src/components/date-input/date-input.scss b/packages/core/src/components/date-input/date-input.scss new file mode 100644 index 00000000000..2486ced1f87 --- /dev/null +++ b/packages/core/src/components/date-input/date-input.scss @@ -0,0 +1,31 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +@import 'mixins/shadow-dom/component'; +@import 'components/form/input'; +@import './../input/input.mixins.scss'; + +@include input-field; + +:host { + @include ix-component; + + display: inline-block; + position: relative; + + input { + width: 100%; + height: 100%; + } +} + +:host(.readonly) { + input { + pointer-events: none; + } +} diff --git a/packages/core/src/components/date-input/date-input.tsx b/packages/core/src/components/date-input/date-input.tsx new file mode 100644 index 00000000000..511008fe46b --- /dev/null +++ b/packages/core/src/components/date-input/date-input.tsx @@ -0,0 +1,461 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { + AttachInternals, + Component, + Element, + Event, + EventEmitter, + Host, + Method, + Prop, + State, + Watch, + h, +} from '@stencil/core'; +import { DateTime } from 'luxon'; +import { dropdownController } from '../dropdown/dropdown-controller'; +import { MakeRef, makeRef } from '../utils/make-ref'; +import { + ClassMutationObserver, + HookValidationLifecycle, + IxInputFieldComponent, + ValidationResults, + createClassMutationObserver, +} from '../utils/input'; +import { SlotEnd, SlotStart } from '../input/input.fc'; +import { adjustPaddingForStartAndEnd } from '../input/input.util'; +import { iconCalendar } from '@siemens/ix-icons/icons'; + +export type DateInputValidityState = { + patternMismatch: boolean; + invalidReason?: string; +}; + +/** + * @since 2.6.0 + * @form-ready 2.6.0 + */ +@Component({ + tag: 'ix-date-input', + styleUrl: 'date-input.scss', + shadow: true, + formAssociated: true, +}) +export class DateInput implements IxInputFieldComponent { + @Element() hostElement!: HTMLIxDateInputElement; + @AttachInternals() formInternals!: ElementInternals; + + /** + * name of the input element + */ + @Prop({ reflect: true }) name?: string; + + /** + * placeholder of the input element + */ + @Prop({ reflect: true }) placeholder?: string; + + /** + * value of the input element + */ + @Prop({ reflect: true, mutable: true }) value: string = ''; + + /** + * Date format string. + * See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens. + */ + @Prop() format: string = 'yyyy/LL/dd'; + + /** + * required attribute + */ + @Prop() required?: boolean; + + /** + * helper text below the input field + */ + @Prop() helperText?: string; + + /** + * label of the input field + */ + @Prop() label?: string; + + /** + * error text below the input field + */ + @Prop({ reflect: true }) invalidText?: string; + + /** + * readonly attribute + */ + @Prop() readonly: boolean = false; + + /** + * disabled attribute + */ + @Prop() disabled: boolean = false; + + /** + * info text below the input field + */ + @Prop() infoText?: string; + + /** + * warning text below the input field + */ + @Prop() warningText?: string; + + /** + * valid text below the input field + */ + @Prop() validText?: string; + + /** + * show text as tooltip + */ + @Prop() showTextAsTooltip?: boolean; + + /** + * i18n string for the error message when the date is not parsable + */ + @Prop({ attribute: 'i18n-error-date-unparsable' }) i18nErrorDateUnparsable = + 'Date is not valid'; + + /** + * Input change event. + */ + @Event({ cancelable: false }) valueChange!: EventEmitter; + + /** + * Validation state change event. + */ + @Event() validityStateChange!: EventEmitter; + + /** @internal */ + @Event() ixFocus!: EventEmitter; + + /** @internal */ + @Event() ixBlur!: EventEmitter; + + @State() show = false; + @State() from: string | null = null; + @State() isInputInvalid = false; + @State() isInvalid = false; + @State() isValid = false; + @State() isInfo = false; + @State() isWarning = false; + @State() focus = false; + + private readonly slotStartRef = makeRef(); + private readonly slotEndRef = makeRef(); + + private readonly datepickerRef = makeRef(); + + private readonly inputElementRef = makeRef(); + private readonly dropdownElementRef = makeRef(); + private classObserver?: ClassMutationObserver; + private invalidReason?: string; + + updateFormInternalValue(value: string): void { + this.formInternals.setFormValue(value); + this.value = value; + } + + connectedCallback(): void { + this.classObserver = createClassMutationObserver(this.hostElement, () => + this.checkClassList() + ); + } + + componentWillLoad(): void { + this.onInput(this.value); + if (this.isInputInvalid) { + this.from = null; + } else { + this.watchValue(); + } + + this.checkClassList(); + this.updateFormInternalValue(this.value); + } + + componentDidRender(): void { + setTimeout(() => this.updatePaddings()); + } + + private updatePaddings() { + adjustPaddingForStartAndEnd( + this.slotStartRef.current, + this.slotEndRef.current, + this.inputElementRef.current + ); + } + + disconnectedCallback(): void { + if (this.classObserver) { + this.classObserver.destroy(); + } + } + + @Watch('value') + watchValue() { + this.from = this.value; + } + + /** @internal */ + @Method() + hasValidValue(): Promise { + return Promise.resolve(!!this.value); + } + + /** @internal */ + @Method() + getAssociatedFormElement(): Promise { + return Promise.resolve(this.formInternals.form); + } + + async onInput(value: string) { + this.value = value; + if (!value) { + this.valueChange.emit(value); + return; + } + + if (!this.format) { + return; + } + + const date = DateTime.fromFormat(value, this.format); + if (date.isValid) { + this.isInputInvalid = false; + + this.updateFormInternalValue(value); + this.closeDropdown(); + } else { + this.isInputInvalid = true; + this.invalidReason = date.invalidReason; + } + + this.valueChange.emit(value); + } + + onCalenderClick(event: Event) { + if (!this.show) { + event.stopPropagation(); + event.preventDefault(); + this.openDropdown(); + } + + if (this.inputElementRef.current) { + this.inputElementRef.current.focus(); + } + } + + async openDropdown() { + const dropdownElement = await this.dropdownElementRef.waitForCurrent(); + const id = dropdownElement.getAttribute('data-ix-dropdown'); + + dropdownController.dismissAll(); + if (!id) { + return; + } + + const dropdown = dropdownController.getDropdownById(id); + if (!dropdown) { + return; + } + dropdownController.present(dropdown); + } + + async closeDropdown() { + const dropdownElement = await this.dropdownElementRef.waitForCurrent(); + const id = dropdownElement.getAttribute('data-ix-dropdown'); + + if (!id) { + return; + } + + const dropdown = dropdownController.getDropdownById(id); + if (!dropdown) { + return; + } + dropdownController.dismiss(dropdown); + } + + private checkClassList() { + this.isInvalid = this.hostElement.classList.contains('ix-invalid'); + } + + private renderInput() { + return ( +
+ this.updatePaddings()} + > + { + const target = event.target as HTMLInputElement; + this.onInput(target.value); + }} + onClick={(event) => { + if (this.show) { + event.stopPropagation(); + event.preventDefault(); + } + }} + onFocus={async () => { + this.openDropdown(); + this.ixFocus.emit(); + }} + onBlur={() => this.ixBlur.emit()} + > + this.updatePaddings()} + > + {this.disabled || this.readonly ? null : ( + this.onCalenderClick(event)} + > + )} + +
+ ); + } + + @HookValidationLifecycle() + hookValidationLifecycle({ + isInfo, + isInvalid, + isInvalidByRequired, + isValid, + isWarning, + }: ValidationResults) { + this.isInvalid = isInvalid || isInvalidByRequired || this.isInputInvalid; + this.isInfo = isInfo; + this.isValid = isValid; + this.isWarning = isWarning; + } + + @Watch('isInputInvalid') + async onInputValidationChange() { + const state = await this.getValidityState(); + this.validityStateChange.emit({ + patternMismatch: state.patternMismatch, + invalidReason: this.invalidReason, + }); + } + + /** @internal */ + @Method() + getValidityState(): Promise { + return Promise.resolve({ + badInput: false, + customError: false, + patternMismatch: this.isInputInvalid, + rangeOverflow: false, + rangeUnderflow: false, + stepMismatch: false, + tooLong: false, + tooShort: false, + typeMismatch: false, + valid: !this.isInputInvalid, + valueMissing: !!this.required && !this.value, + }); + } + + /** + * Get the native input element + */ + @Method() + getNativeInputElement(): Promise { + return this.inputElementRef.waitForCurrent(); + } + + /** + * Focuses the input field + */ + @Method() + async focusInput(): Promise { + return (await this.getNativeInputElement()).focus(); + } + + render() { + const invalidText = this.isInputInvalid + ? this.i18nErrorDateUnparsable + : this.invalidText; + + return ( + + } + > + {this.renderInput()} + + { + this.show = event.detail; + }} + > + { + const { from } = event.detail; + this.onInput(from); + }} + > + + + ); + } +} diff --git a/packages/core/src/components/date-input/tests/date-input.ct.ts b/packages/core/src/components/date-input/tests/date-input.ct.ts new file mode 100644 index 00000000000..e6654c51bd2 --- /dev/null +++ b/packages/core/src/components/date-input/tests/date-input.ct.ts @@ -0,0 +1,164 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import { Locator, expect } from '@playwright/test'; +import { getFormValue, preventFormSubmission, test } from '@utils/test'; + +const createDateInputAccessor = async (dateInput: Locator) => { + const handle = { + openByCalender: async () => { + const trigger = dateInput.getByTestId('open-calendar'); + await trigger.click(); + }, + selectDay: async (day: number) => { + const dayButton = dateInput + .locator('ix-dropdown') + .filter({ hasText: day.toString() }) + .getByText(day.toString()); + await dayButton.click(); + }, + }; + + return handle; +}; + +test('renders', async ({ mount, page }) => { + await mount(``); + const dateInputElement = page.locator('ix-date-input'); + await expect(dateInputElement).toHaveClass(/hydrated/); +}); + +test('select date by open calendar trigger', async ({ mount, page }) => { + await mount(``); + const dateInputElement = page.locator('ix-date-input'); + await expect(dateInputElement).toHaveClass(/hydrated/); + + const dateInput = await createDateInputAccessor(dateInputElement); + await dateInput.openByCalender(); + + await dateInput.selectDay(10); + await expect(dateInputElement).toHaveAttribute('value', '2024/05/10'); +}); + +test('select date by focus', async ({ mount, page }) => { + await mount(``); + const dateInputElement = page.locator('ix-date-input'); + await expect(dateInputElement).toHaveClass(/hydrated/); + + const dateInput = await createDateInputAccessor(dateInputElement); + await dateInputElement.locator('input').focus(); + + await dateInput.selectDay(10); + await expect(dateInputElement).toHaveAttribute('value', '2024/05/10'); + await expect(dateInputElement.getByTestId('date-dropdown')).not.toHaveClass( + /show/ + ); +}); + +test('select date by input', async ({ mount, page }) => { + await mount(``); + const dateInputElement = page.locator('ix-date-input'); + await expect(dateInputElement).toHaveClass(/hydrated/); + + const dateInput = await createDateInputAccessor(dateInputElement); + await dateInputElement.locator('input').focus(); + await expect(dateInputElement.getByTestId('date-dropdown')).toHaveClass( + /show/ + ); + await dateInputElement.locator('input').fill('2025/10/10'); + + await expect(dateInputElement.getByTestId('date-dropdown')).not.toHaveClass( + /show/ + ); + await expect(dateInputElement).toHaveAttribute('value', '2025/10/10'); + + await dateInput.openByCalender(); + + await expect(dateInputElement.locator('.calendar-item.selected')).toHaveText( + '10' + ); +}); + +test('select date by input with invalid date', async ({ mount, page }) => { + await mount(``); + const dateInputElement = page.locator('ix-date-input'); + await expect(dateInputElement).toHaveClass(/hydrated/); + + const dateInput = await createDateInputAccessor(dateInputElement); + await dateInputElement.locator('input').fill('2025/10/10/10'); + await dateInput.openByCalender(); + await expect(dateInputElement).toHaveAttribute('value', '2025/10/10/10'); + + await expect( + dateInputElement + .locator('ix-field-wrapper') + .locator('ix-typography') + .filter({ hasText: 'Date is not valid' }) + ).toHaveText('Date is not valid'); +}); + +test('select date by input with invalid date - i18n', async ({ + mount, + page, +}) => { + await mount( + `` + ); + const dateInputElement = page.locator('ix-date-input'); + await expect(dateInputElement).toHaveClass(/hydrated/); + + const dateInput = await createDateInputAccessor(dateInputElement); + await dateInputElement.locator('input').fill('2025/10/10/10'); + await dateInput.openByCalender(); + await expect(dateInputElement).toHaveAttribute('value', '2025/10/10/10'); + + await expect( + dateInputElement + .locator('ix-field-wrapper') + .locator('ix-typography') + .filter({ hasText: 'Datum nicht korrekt!' }) + ).toHaveText('Datum nicht korrekt!'); +}); + +test('required', async ({ mount, page }) => { + await mount(``); + const dateInputElement = page.locator('ix-date-input'); + await expect(dateInputElement).toHaveAttribute('required'); + + await expect(dateInputElement.locator('ix-field-label')).toHaveText( + 'MyLabel *' + ); + + await expect(dateInputElement).toHaveClass(/ix-invalid--required/); +}); + +test(`form-ready - ix-date-input`, async ({ mount, page }) => { + await mount( + `
` + ); + + const formElement = page.locator('form'); + preventFormSubmission(formElement); + const input = page.locator('ix-date-input').locator('input'); + await input.fill('2024/05/05'); + await input.blur(); + + const formData = await getFormValue(formElement, 'my-field-name', page); + expect(formData).toBe('2024/05/05'); +}); + +test(`form-ready - ix-date-input initial value`, async ({ mount, page }) => { + await mount( + `
` + ); + + const formElement = page.locator('form'); + preventFormSubmission(formElement); + const formData = await getFormValue(formElement, 'my-field-name', page); + expect(formData).toBe('2024/12/12'); +}); diff --git a/packages/core/src/components/date-time-card/date-time-card.tsx b/packages/core/src/components/date-time-card/date-time-card.tsx index 8eefaf1ef91..cb4e63f977a 100644 --- a/packages/core/src/components/date-time-card/date-time-card.tsx +++ b/packages/core/src/components/date-time-card/date-time-card.tsx @@ -21,7 +21,7 @@ export type DateTimeCardCorners = 'rounded' | 'left' | 'right' | 'straight'; }) export class DateTimeCard { /** @internal */ - @Prop() standaloneAppearance = undefined; + @Prop() standaloneAppearance?: boolean; /** * set styles @@ -36,10 +36,7 @@ export class DateTimeCard { private cardClasses() { return { card: true, - standaloneAppearance: - this.standaloneAppearance !== undefined - ? this.standaloneAppearance - : this.individual, + standaloneAppearance: this.standaloneAppearance ?? this.individual, rounded: this.corners === 'rounded', left: this.corners === 'left', right: this.corners === 'right', diff --git a/packages/core/src/components/dropdown/dropdown-controller.ts b/packages/core/src/components/dropdown/dropdown-controller.ts index b0d356d102b..330b619712b 100644 --- a/packages/core/src/components/dropdown/dropdown-controller.ts +++ b/packages/core/src/components/dropdown/dropdown-controller.ts @@ -45,7 +45,7 @@ export interface DropdownItemWrapper { type SubmenuIds = Record; class DropdownController { - private dropdowns: Map = new Map< + private readonly dropdowns: Map = new Map< string, DropdownInterface >(); @@ -84,6 +84,10 @@ class DropdownController { delete this.submenuIds[id]; } + getDropdownById(id: string) { + return this.dropdowns.get(id); + } + discoverSubmenus() { this.dropdowns.forEach((dropdown) => { dropdown.discoverSubmenu(); diff --git a/packages/core/src/components/dropdown/dropdown.tsx b/packages/core/src/components/dropdown/dropdown.tsx index da687a12621..f3ccee52194 100644 --- a/packages/core/src/components/dropdown/dropdown.tsx +++ b/packages/core/src/components/dropdown/dropdown.tsx @@ -122,6 +122,9 @@ export class Dropdown implements ComponentInterface, DropdownInterface { /** @internal */ @Prop() ignoreRelatedSubmenu = false; + /** @internal */ + @Prop() suppressOverflowBehavior = false; + /** * Fire event after visibility of dropdown has changed */ @@ -133,13 +136,13 @@ export class Dropdown implements ComponentInterface, DropdownInterface { private anchorElement?: Element; private dropdownRef: HTMLElement; - private localUId = `dropdown-${sequenceId++}`; - private assignedSubmenu: string[] = []; + private readonly localUId = `dropdown-${sequenceId++}`; + private readonly assignedSubmenu: string[] = []; private arrowFocusController: ArrowFocusController; - private focusDropdownItemBind = this.focusDropdownItem.bind(this); + private readonly focusDropdownItemBind = this.focusDropdownItem.bind(this); - private itemObserver = new MutationObserver(() => { + private readonly itemObserver = new MutationObserver(() => { this.arrowFocusController.items = this.dropdownItems; }); @@ -388,7 +391,7 @@ export class Dropdown implements ComponentInterface, DropdownInterface { } else { this.destroyAutoUpdate(); this.arrowFocusController?.disconnect(); - this.itemObserver.disconnect(); + this.itemObserver?.disconnect(); this.disposeKeyListener?.(); } } @@ -550,7 +553,7 @@ export class Dropdown implements ComponentInterface, DropdownInterface { class={{ 'dropdown-menu': true, show: this.show, - overflow: true, + overflow: !this.suppressOverflowBehavior, }} style={{ margin: '0', diff --git a/packages/core/src/components/field-label/field-label.scss b/packages/core/src/components/field-label/field-label.scss new file mode 100644 index 00000000000..e17ad3e8493 --- /dev/null +++ b/packages/core/src/components/field-label/field-label.scss @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +:host { + display: inline-block; + position: relative; + + margin-top: 0.5rem; + margin-bottom: 0.25rem; +} diff --git a/packages/core/src/components/field-label/field-label.tsx b/packages/core/src/components/field-label/field-label.tsx new file mode 100644 index 00000000000..e8480725b4d --- /dev/null +++ b/packages/core/src/components/field-label/field-label.tsx @@ -0,0 +1,196 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component, Host, Prop, h, Element, Watch } from '@stencil/core'; +import { IxComponent } from '../utils/internal'; +import { + ClassMutationObserver, + createClassMutationObserver, + HTMLIxFormComponentElement, + isIxInputFieldComponent, +} from '../utils/input'; +import { A11yAttributes, a11yHostAttributes } from '../utils/a11y'; +import { MakeRef, makeRef } from '../utils/make-ref'; + +@Component({ + tag: 'ix-field-label', + styleUrl: 'field-label.scss', + shadow: true, +}) +export class FormFieldLabel implements IxComponent { + @Element() hostElement!: HTMLIxFieldLabelElement; + + /** + * A value is required or must be checked for the form to be submittable + */ + @Prop({ reflect: true, mutable: true }) required?: boolean; + + /** + * The id of the form element that the label is associated with + */ + @Prop({ reflect: true }) htmlFor?: string; + + /** @internal */ + @Prop() controlRef?: MakeRef; + + /** @internal */ + @Prop({ mutable: true }) isInvalid: boolean = false; + + private readonly htmlForObserver = new MutationObserver(() => + this.checkForInternalState() + ); + private htmlForClassObserver?: ClassMutationObserver; + private controlRefClassObserver?: ClassMutationObserver; + private a11yAttributes: A11yAttributes = {}; + private readonly labelRef = makeRef(); + + connectedCallback() { + this.registerHtmlForObserver(); + this.registerControlRefObserver(); + } + + disconnectedCallback(): void { + if (this.htmlForObserver) { + this.htmlForObserver.disconnect(); + } + if (this.htmlForClassObserver) { + this.htmlForClassObserver.destroy(); + } + if (this.controlRefClassObserver) { + this.controlRefClassObserver.destroy(); + } + } + + componentWillRender() { + this.checkForInternalState(); + } + + componentWillLoad(): void | Promise { + this.a11yAttributes = a11yHostAttributes(this.hostElement); + } + + @Watch('htmlFor') + private registerHtmlForObserver() { + if (typeof window === 'undefined') { + return; + } + + if (this.htmlForObserver) { + this.htmlForObserver.disconnect(); + } + + if (this.htmlFor) { + this.htmlForObserver.observe(window.document, { + childList: true, + subtree: true, + }); + } + } + + @Watch('controlRef') + private async registerControlRefObserver() { + if (typeof window === 'undefined') { + return; + } + + if (this.controlRefClassObserver) { + this.controlRefClassObserver.destroy(); + } + + if (this.controlRef) { + const input = await this.controlRef.waitForCurrent(); + + this.controlRefClassObserver = createClassMutationObserver(input, () => + this.checkForInvalidState(input) + ); + } + } + + private registerHtmlForClassObserver( + forElement: HTMLIxFormComponentElement + ) { + if (this.htmlForClassObserver) { + this.htmlForClassObserver.destroy(); + } + + this.htmlForClassObserver = createClassMutationObserver(forElement, () => + this.checkForInvalidState(forElement) + ); + } + + private checkForInvalidState(elementToCheck: HTMLElement) { + this.isInvalid = + elementToCheck.classList.contains('is-invalid') || + elementToCheck.classList.contains('ix-invalid'); + } + + private async checkForInternalState() { + if (this.htmlFor) { + const forElement = document.getElementById( + this.htmlFor + ) as HTMLIxFormComponentElement; + if (forElement) { + if (typeof forElement.required === 'boolean') { + this.required = forElement.required; + } + + this.registerHtmlForClassObserver(forElement); + this.checkForInvalidState(forElement); + } + } + + if (this.controlRef) { + const input = await this.controlRef.waitForCurrent(); + this.required = ( + input as HTMLInputElement | HTMLTextAreaElement + ).required; + } + } + + private async focusOnClick() { + if (this.htmlFor) { + const target = document.getElementById(this.htmlFor); + if (target) { + let input: HTMLElement | null = null; + if (isIxInputFieldComponent(target)) { + input = await target.getNativeInputElement(); + } else { + input = target; + } + if (typeof input.focus === 'function') { + input.focus(); + } + } + } + + if (this.controlRef) { + (await this.controlRef.waitForCurrent()).focus(); + } + } + + render() { + return ( + this.focusOnClick()}> + + + ); + } +} diff --git a/packages/core/src/components/field-label/tests/field-label.ct.ts b/packages/core/src/components/field-label/tests/field-label.ct.ts new file mode 100644 index 00000000000..8cc0e00e0ab --- /dev/null +++ b/packages/core/src/components/field-label/tests/field-label.ct.ts @@ -0,0 +1,178 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import { expect } from '@playwright/test'; +import { test } from '@utils/test'; + +test('renders', async ({ mount, page }) => { + await mount(`My Label`); + const fieldLabelElement = page.locator('ix-field-label'); + await expect(fieldLabelElement).toHaveClass(/hydrated/); + await expect( + fieldLabelElement.locator('label').locator('ix-typography') + ).toHaveClass(/typography-label/); + await expect(fieldLabelElement.filter({ hasText: 'My Label' })).toHaveText( + 'My Label' + ); +}); + +test('required', async ({ mount, page }) => { + await mount(`MyLabel`); + const labelElement = page.locator('ix-field-label'); + await expect(labelElement).toHaveText('MyLabel *'); +}); + +test('focus native input by label click', async ({ mount, page }) => { + await mount(` + MyLabel + + `); + const labelElement = page.locator('ix-field-label'); + await labelElement.click(); + + const inputElement = page.getByTestId('input'); + await expect(inputElement).toBeFocused(); +}); + +test.describe('click label', () => { + ['ix-input', 'ix-number-input', 'ix-date-input', 'ix-textarea'].forEach( + (selector) => { + test(`focus ${selector} by external label click`, async ({ + mount, + page, + }) => { + await mount(` + MyLabel + <${selector} id="input"> + `); + const labelElement = page.locator('ix-field-label'); + await labelElement.click(); + + const component = page.locator(selector); + const focusElement = + selector !== 'ix-textarea' + ? component.locator('input') + : component.locator('textarea'); + await expect(focusElement).toBeFocused(); + }); + + test(`focus ${selector} by embedded label click`, async ({ + mount, + page, + }) => { + await mount(` + <${selector} label="MyLabel"> + `); + + const component = page.locator(selector); + await expect(component).toHaveClass(/hydrated/); + + const labelElement = component + .locator('ix-field-wrapper') + .locator('ix-field-label'); + + await labelElement.click(); + + const focusElement = + selector !== 'ix-textarea' + ? component.locator('input') + : component.locator('textarea'); + + await expect(focusElement).toBeFocused(); + }); + } + ); +}); + +test('valid color', async ({ mount, page }) => { + await mount(`LabelValid`); + + const labelElement = page.locator('ix-field-label'); + + await expect(labelElement).not.toHaveAttribute('is-invalid'); + await expect(labelElement.locator('ix-typography')).toHaveAttribute( + 'style', + 'color: var(--theme-color-soft-text);' + ); +}); + +test('invalid color', async ({ mount, page }) => { + await mount(`LabelInvalid`); + + const labelElement = page.locator('ix-field-label'); + + await expect(labelElement).toHaveAttribute('is-invalid'); + await expect(labelElement.locator('ix-typography')).toHaveAttribute( + 'style', + 'color: var(--theme-color-alarm-text);' + ); +}); + +test('valid color with valid text field', async ({ mount, page }) => { + await mount(` + valid field + `); + + const fieldElement = page.locator('ix-input'); + const labelElement = page.locator('ix-field-label'); + + await expect(fieldElement).not.toHaveClass(/ix-invalid--required/); + + await expect(labelElement.locator('ix-typography')).toHaveAttribute( + 'style', + 'color: var(--theme-color-soft-text);' + ); +}); + +test('invalid color with invalid text field', async ({ mount, page }) => { + await mount(` + invalid field + `); + + const fieldElement = page.locator('ix-input'); + const labelElement = page.locator('ix-field-label'); + + await expect(fieldElement).toHaveClass(/ix-invalid--required/); + + await expect(labelElement.locator('ix-typography')).toHaveAttribute( + 'style', + 'color: var(--theme-color-alarm-text);' + ); +}); + +test('valid color with valid textarea field', async ({ mount, page }) => { + await mount(` + valid field + `); + + const fieldElement = page.locator('ix-textarea'); + const labelElement = page.locator('ix-field-label'); + + await expect(fieldElement).not.toHaveClass(/ix-invalid--required/); + + await expect(labelElement.locator('ix-typography')).toHaveAttribute( + 'style', + 'color: var(--theme-color-soft-text);' + ); +}); + +test('invalid color with invalid textarea field', async ({ mount, page }) => { + await mount(` + valid field + `); + + const fieldElement = page.locator('ix-textarea'); + const labelElement = page.locator('ix-field-label'); + + await expect(fieldElement).not.toHaveClass(/ix-invalid--required/); + + await expect(labelElement.locator('ix-typography')).toHaveAttribute( + 'style', + 'color: var(--theme-color-alarm-text);' + ); +}); diff --git a/packages/core/src/components/field-wrapper/field-wrapper.mixins.scss b/packages/core/src/components/field-wrapper/field-wrapper.mixins.scss new file mode 100644 index 00000000000..78b1f6acb3b --- /dev/null +++ b/packages/core/src/components/field-wrapper/field-wrapper.mixins.scss @@ -0,0 +1,40 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +@mixin helper-text { + .bottom-text { + display: flex; + position: relative; + align-items: flex-start; + justify-content: flex-start; + gap: 0.25rem; + + margin-right: 0.25rem; + } + + .text-icon { + margin: 0.125rem; + } + + .text-icon.invalid { + color: var(--theme-helper-icon--color--invalid); + } + + .text-icon.info { + color: var(--theme-helper-icon--color--info); + } + + .text-icon.warning { + color: var(--theme-helper-icon--color--warning); + } + + .text-icon.valid { + color: var(--theme-helper-icon--color--valid); + } +} diff --git a/packages/core/src/components/field-wrapper/field-wrapper.scss b/packages/core/src/components/field-wrapper/field-wrapper.scss new file mode 100644 index 00000000000..4653923ada8 --- /dev/null +++ b/packages/core/src/components/field-wrapper/field-wrapper.scss @@ -0,0 +1,38 @@ +@import "./field-wrapper.mixins.scss"; + +:host { + display: flex; + position: relative; + flex-direction: column; + + .slot-wrapper { + display: flex; + position: relative; + align-items: center; + justify-content: flex-start; + gap: 0.25rem; + } + + .field-bottom, + .field-top { + display: flex; + flex-direction: row; + position: relative; + justify-content: space-between; + gap: 1rem; + width: min-content; + min-width: 100%; + } + + .field-bottom .bottom-right { + margin-left: auto; + margin-right: 0px; + } + + @include helper-text; + + .bottom-text { + margin-top: 0.25rem; + margin-bottom: 0.25rem; + } +} diff --git a/packages/core/src/components/field-wrapper/field-wrapper.tsx b/packages/core/src/components/field-wrapper/field-wrapper.tsx new file mode 100644 index 00000000000..09b2a1e7166 --- /dev/null +++ b/packages/core/src/components/field-wrapper/field-wrapper.tsx @@ -0,0 +1,136 @@ +import { Component, Element, Host, Prop, h } from '@stencil/core'; +import { FieldWrapperInterface } from '../utils/input'; +import { MakeRef, makeRef } from '../utils/make-ref'; +import { renderHelperText } from './helper-text-util'; + +/** @internal */ +@Component({ + tag: 'ix-field-wrapper', + styleUrl: 'field-wrapper.scss', + shadow: true, +}) +export class FieldWrapper implements FieldWrapperInterface { + @Element() hostElement!: HTMLIxFieldWrapperElement; + + /** + * Show text below the field component + */ + @Prop() helperText?: string; + + /** + * Label for the field component + */ + @Prop() label?: string; + + /** + * Error text for the field component + */ + @Prop() invalidText?: string; + + /** + * Valid text for the field component + */ + @Prop() validText?: string; + + /** + * Info text for the field component + */ + @Prop() infoText?: string; + + /** + * Warning text for the field component + */ + @Prop() warningText?: string; + + /** + * Is the field component invalid + */ + @Prop() isInvalid: boolean = false; + + /** + * Is the field component valid + */ + @Prop() isValid: boolean = false; + + /** + * Is the field component info + */ + @Prop() isInfo: boolean = false; + + /** + * Is the field component warning + */ + @Prop() isWarning: boolean = false; + + /** + * Show helper, error, info, warning text as tooltip + */ + @Prop() showTextAsTooltip: boolean = false; + + /** + * Show label as required + */ + @Prop() required: boolean = false; + + /** + * The id of the form element that the label is associated with + */ + @Prop() htmlForLabel?: string; + + /** + * The control element that the label is associated with + */ + @Prop() controlRef?: MakeRef; + + private readonly slotRef = makeRef(); + + render() { + const textOptions = { + invalidText: this.invalidText, + isInvalid: this.isInvalid, + isValid: this.isValid, + validText: this.validText, + isWarning: this.isWarning, + warningText: this.warningText, + isInfo: this.isInfo, + infoText: this.infoText, + helperText: this.helperText, + }; + return ( + + {this.label && ( +
+ + {this.label} + +
+ )} +
+ +
+
+ {!this.showTextAsTooltip && renderHelperText(textOptions)} +
+ +
+
+ + {this.showTextAsTooltip === true && ( + + {renderHelperText(textOptions)} + + )} +
+ ); + } +} diff --git a/packages/core/src/components/field-wrapper/helper-text-util.tsx b/packages/core/src/components/field-wrapper/helper-text-util.tsx new file mode 100644 index 00000000000..c3b582bf488 --- /dev/null +++ b/packages/core/src/components/field-wrapper/helper-text-util.tsx @@ -0,0 +1,86 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import { h } from '@stencil/core'; +import { + iconError, + iconInfo, + iconSuccess, + iconWarning, +} from '@siemens/ix-icons/icons'; + +export function renderHelperText({ + isInvalid, + invalidText, + isWarning, + warningText, + isInfo, + infoText, + isValid, + validText, + helperText, +}: { + isInvalid: boolean; + invalidText?: string; + isWarning: boolean; + warningText?: string; + isInfo: boolean; + infoText?: string; + isValid: boolean; + validText?: string; + helperText?: string; +}) { + if (isInvalid && invalidText !== undefined) { + return ( + + + + {invalidText} + + ); + } + + if (isWarning && warningText !== undefined) { + return ( + + + {warningText} + + ); + } + + if (isInfo && infoText !== undefined) { + return ( + + + {infoText} + + ); + } + + if (isValid && validText !== undefined) { + return ( + + + {validText} + + ); + } + + return ( + helperText && ( + + {helperText} + + ) + ); +} diff --git a/packages/core/src/components/field-wrapper/tests/field-wrapper.ct.ts b/packages/core/src/components/field-wrapper/tests/field-wrapper.ct.ts new file mode 100644 index 00000000000..abf40605517 --- /dev/null +++ b/packages/core/src/components/field-wrapper/tests/field-wrapper.ct.ts @@ -0,0 +1,82 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import { expect } from '@playwright/test'; +import { test } from '@utils/test'; + +test('renders', async ({ mount, page }) => { + await mount( + ` + +
Content
+
+ ` + ); + const fieldWrapperElement = page.locator('ix-field-wrapper'); + await expect(fieldWrapperElement).toHaveClass(/hydrated/); + await expect( + fieldWrapperElement + .locator('.field-bottom') + .locator('ix-typography.bottom-text') + .filter({ hasText: 'Helper text' }) + ).toHaveText('Helper text'); +}); + +test('show text dependent on provided state', async ({ mount, page }) => { + await mount( + ` + +
Content
+
+ ` + ); + const fieldWrapperElement = page.locator('ix-field-wrapper'); + await expect(fieldWrapperElement).toHaveClass(/hydrated/); + await expect( + fieldWrapperElement + .locator('.field-bottom') + .locator('ix-typography.bottom-text') + .filter({ hasText: 'invalid text' }) + ).toHaveText('invalid text'); +}); + +test('show text by tooltip', async ({ mount, page }) => { + await mount( + ` + +
Content
+
+ ` + ); + const fieldWrapperElement = page.locator('ix-field-wrapper'); + await expect(fieldWrapperElement).toHaveClass(/hydrated/); + + await page.mouse.move(10, 10); + + const tooltip = fieldWrapperElement.locator('ix-tooltip'); + await expect(tooltip).toBeVisible(); + await expect(tooltip).toContainText('Helper text'); +}); + +test('show text by tooltip invalid', async ({ mount, page }) => { + await mount( + ` + +
Content
+
+ ` + ); + const fieldWrapperElement = page.locator('ix-field-wrapper'); + await expect(fieldWrapperElement).toHaveClass(/hydrated/); + + await page.mouse.move(10, 10); + + const tooltip = fieldWrapperElement.locator('ix-tooltip'); + await expect(tooltip).toBeVisible(); + await expect(tooltip).toContainText('invalid text'); +}); diff --git a/packages/core/src/components/form-field/form-field.tsx b/packages/core/src/components/form-field/form-field.tsx deleted file mode 100644 index e5d5b2c57c6..00000000000 --- a/packages/core/src/components/form-field/form-field.tsx +++ /dev/null @@ -1,40 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2023 Siemens AG - * - * SPDX-License-Identifier: MIT - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ -import { Component, Element, h, Host, Prop } from '@stencil/core'; - -@Component({ - tag: 'ix-form-field', - styleUrl: 'form-field.scss', - shadow: true, -}) -export class FormField { - @Element() hostElement!: HTMLIxFormFieldElement; - - /** - * Label - */ - @Prop() label: string; - - private get inputElement() { - return this.hostElement.querySelector('input'); - } - - componentWillLoad() {} - - render() { - return ( - - {this.label ? ( - - ) : null} - - - ); - } -} diff --git a/packages/core/src/components/helper-text/helper-text.scss b/packages/core/src/components/helper-text/helper-text.scss new file mode 100644 index 00000000000..b159cd89af9 --- /dev/null +++ b/packages/core/src/components/helper-text/helper-text.scss @@ -0,0 +1,7 @@ +@import "./../field-wrapper/field-wrapper.mixins.scss"; + +:host { + display: block; + + @include helper-text; +} diff --git a/packages/core/src/components/helper-text/helper-text.tsx b/packages/core/src/components/helper-text/helper-text.tsx new file mode 100644 index 00000000000..acfa0fd2904 --- /dev/null +++ b/packages/core/src/components/helper-text/helper-text.tsx @@ -0,0 +1,113 @@ +import { Component, Host, Prop, State, h, Element } from '@stencil/core'; +import { + ClassMutationObserver, + HTMLIxFormComponentElement, + ValidationResults, + checkFieldClasses, + createClassMutationObserver, +} from '../utils/input'; +import { renderHelperText } from '../field-wrapper/helper-text-util'; +import { IxComponent } from '../utils/internal'; + +@Component({ + tag: 'ix-helper-text', + styleUrl: 'helper-text.scss', + shadow: true, +}) +export class HelperText implements IxComponent { + @Element() hostElement!: HTMLIxHelperTextElement; + /** + * The id of the form element that the label is associated with + */ + @Prop() htmlFor?: string; + + /** + * Show text below the field component + */ + @Prop() helperText?: string; + + /** + * Error text for the field component + */ + @Prop() invalidText?: string; + + /** + * Valid text for the field component + */ + @Prop() validText?: string; + + /** + * Info text for the field component + */ + @Prop() infoText?: string; + + /** + * Warning text for the field component + */ + @Prop() warningText?: string; + + @State() validationResults: ValidationResults = { + isInfo: false, + isInvalid: false, + isValid: false, + isWarning: false, + isInvalidByRequired: false, + }; + + private readonly observer = new MutationObserver(() => + this.checkForRequired() + ); + private classObserver?: ClassMutationObserver; + + connectedCallback() { + this.observer.observe(window.document, { + childList: true, + subtree: true, + }); + } + + disconnectedCallback(): void { + if (this.observer) { + this.observer.disconnect(); + } + } + + componentWillRender() { + this.checkForRequired(); + } + + private async checkForRequired() { + if (!this.htmlFor) { + return; + } + const forElement = document.getElementById( + this.htmlFor + ) as HTMLIxFormComponentElement; + if (!forElement) { + return; + } + + if (this.classObserver) { + this.classObserver.destroy(); + } + this.classObserver = createClassMutationObserver(forElement, () => { + this.validationResults = checkFieldClasses(forElement); + }); + this.validationResults = checkFieldClasses(forElement); + } + + render() { + return ( + + {renderHelperText({ + helperText: this.helperText, + invalidText: this.invalidText, + validText: this.validText, + infoText: this.infoText, + warningText: this.warningText, + ...this.validationResults, + })} + + ); + } +} diff --git a/packages/core/src/components/input/input.animation.ts b/packages/core/src/components/input/input.animation.ts new file mode 100644 index 00000000000..d2c0e5f8ebb --- /dev/null +++ b/packages/core/src/components/input/input.animation.ts @@ -0,0 +1,36 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import anime from 'animejs'; + +export function shakeInput(input: HTMLInputElement) { + const xMax = 5; + anime({ + targets: input, + duration: 200, + easing: 'easeInOutSine', + loop: 2, + translateX: [ + { + value: xMax * -1, + }, + { + value: xMax, + }, + { + value: xMax / -2, + }, + { + value: xMax / 2, + }, + { + value: 0, + }, + ], + }); +} diff --git a/packages/core/src/components/input/input.fc.tsx b/packages/core/src/components/input/input.fc.tsx new file mode 100644 index 00000000000..3b79e2e57a9 --- /dev/null +++ b/packages/core/src/components/input/input.fc.tsx @@ -0,0 +1,143 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import { h, FunctionalComponent } from '@stencil/core'; +import { MakeRef } from '../utils/make-ref'; +import { A11yAttributes } from '../utils/a11y'; + +export function TextareaElement(props: { + resizeBehavior: 'both' | 'horizontal' | 'vertical' | 'none'; + textareaHeight?: string; + textareaWidth?: string; + textareaRows?: number; + textareaCols?: number; + disabled: boolean; + readonly: boolean; + maxLength?: number; + minLength?: number; + isInvalid: boolean; + required: boolean; + value: string; + placeholder?: string; + textAreaRef: (el: HTMLTextAreaElement | undefined) => void; + valueChange: (value: string) => void; + updateFormInternalValue: (value: string) => void; + onBlur: () => void; + ariaAttributes?: A11yAttributes; +}) { + return ( + + ); +} + +export function InputElement(props: { + id: string; + disabled: boolean; + readonly: boolean; + maxLength?: string | number; + minLength?: string | number; + max?: string | number; + min?: string | number; + pattern?: string; + type: string; + isInvalid: boolean; + required: boolean; + value: string | number; + placeholder?: string; + inputRef: (el: HTMLInputElement | undefined) => void; + onKeyPress: (event: KeyboardEvent) => void; + valueChange: (value: string) => void; + updateFormInternalValue: (value: string) => void; + onBlur: () => void; + ariaAttributes?: A11yAttributes; +}) { + return ( + props.onKeyPress(event)} + onChange={(changeEvent) => { + const target = changeEvent.target as HTMLInputElement; + props.valueChange(target.value); + }} + onInput={(inputEvent) => { + const target = inputEvent.target as HTMLInputElement; + props.updateFormInternalValue(target.value); + }} + onBlur={() => props.onBlur()} + {...props.ariaAttributes} + > + ); +} + +export const SlotEnd: FunctionalComponent<{ + slotEndRef: MakeRef; + onSlotChange?: (e: Event) => void; +}> = (props, children) => { + return ( +
+ + {children} +
+ ); +}; + +export const SlotStart: FunctionalComponent<{ + slotStartRef: MakeRef; + onSlotChange?: (e: Event) => void; +}> = (props) => { + return ( +
+ +
+ ); +}; diff --git a/packages/core/src/components/input/input.mixins.scss b/packages/core/src/components/input/input.mixins.scss new file mode 100644 index 00000000000..38e43af2970 --- /dev/null +++ b/packages/core/src/components/input/input.mixins.scss @@ -0,0 +1,154 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +@import 'components/form/input'; +@import 'mixins/shadow-dom/component'; +@import 'mixins/validation/form-component'; + +@mixin applySpacingToStartSlot { + .start-container ::slotted(*) { + margin-left: 0.5rem; + } + + .start-container ::slotted(ix-icon.size-24), + .start-container ::slotted(ix-icon-button.btn-icon-16) { + margin-left: 0.25rem; + } + + //TODO: Refactor naming when the class: 'btn-icon-32' was renamed. + .start-container ::slotted(ix-icon-button.btn-icon-32) { + margin-left: 0; + } +} + +@mixin applySpacingToEndSlot { + .end-container ::slotted(*) { + margin-right: 0.5rem; + } + + .end-container ::slotted(ix-icon.size-24), + .end-container ::slotted(ix-icon-button.btn-icon-16) { + margin-right: 0.25rem; + } + + //TODO: Refactor naming when the class: 'btn-icon-32' was renamed. + .end-container ::slotted(ix-icon-button.btn-icon-32) { + margin-right: 0; + } +} + +@mixin input-field { + :host { + @include ix-component; + + display: inline-block; + position: relative; + + width: auto; + + .input-wrapper { + display: flex; + position: relative; + align-items: center; + width: 100%; + height: 100%; + } + + input { + width: 100%; + height: 100%; + } + + .start-container, + .end-container { + display: flex; + position: absolute; + align-items: center; + justify-content: center; + z-index: 1; + } + + .start-container { + left: 0; + } + + .end-container { + right: 0; + } + + @include applySpacingToStartSlot; + @include applySpacingToEndSlot; + + .bottom-text { + margin-top: 0.25rem; + margin-bottom: 0.25rem; + } + } + + :host(.disabled) { + pointer-events: none; + + input, + textarea { + pointer-events: none; + } + } + + @include host-valid; + + @include host-info { + input { + border-color: var(--theme-input--border-color--info); + } + + input:hover { + border-color: var(--theme-input--border-color--info--hover) !important; + } + + input:active { + border-color: var(--theme-input--border-color--info--active) !important; + } + } + + @include host-warning { + input { + border-color: var( + --theme-input--border-color--warning--active + ) !important; + } + + input:hover { + border-color: var( + --theme-input--border-color--warning--active + ) !important; + } + + input:active { + border-color: var( + --theme-input--border-color--warning--active + ) !important; + } + } + + @include host-invalid { + input { + background-color: var(--theme-input--background--invalid); + border-color: var(--theme-input--border-color--invalid) !important; + } + + input:hover { + border-color: var(--theme-input--border-color--invalid--hover) !important; + } + + input:active { + border-color: var( + --theme-input--border-color--invalid--active + ) !important; + } + } +} diff --git a/packages/core/src/components/input/input.scss b/packages/core/src/components/input/input.scss new file mode 100644 index 00000000000..d1c7fb66799 --- /dev/null +++ b/packages/core/src/components/input/input.scss @@ -0,0 +1,21 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +@import 'components/form/input'; +@import 'mixins/shadow-dom/component'; +@import 'mixins/validation/form-component'; +@import './input.mixins.scss'; + +@include input-field; + +:host { + .password-eye { + margin-left: 0.125rem; + color: red; + } +} diff --git a/packages/core/src/components/input/input.tsx b/packages/core/src/components/input/input.tsx new file mode 100644 index 00000000000..49cdd21c2bd --- /dev/null +++ b/packages/core/src/components/input/input.tsx @@ -0,0 +1,330 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { iconEye, iconEyeCancelled } from '@siemens/ix-icons/icons'; +import { + AttachInternals, + Component, + Element, + Event, + EventEmitter, + Host, + Method, + Prop, + State, + Watch, + h, +} from '@stencil/core'; +import { A11yAttributes } from '../utils/a11y'; +import { + HookValidationLifecycle, + IxInputFieldComponent, + ValidationResults, +} from '../utils/input'; +import { MakeRef, makeRef } from '../utils/make-ref'; +import { InputElement, SlotEnd, SlotStart } from './input.fc'; +import { + applyPaddingEnd, + checkAllowedKeys, + getAriaAttributesForInput, + mapValidationResult, + onInputBlur, +} from './input.util'; + +let inputIds = 0; + +/** + * @since 2.6.0 + * @form-ready 2.6.0 + */ +@Component({ + tag: 'ix-input', + styleUrl: 'input.scss', + shadow: true, + formAssociated: true, +}) +export class Input implements IxInputFieldComponent { + @Element() hostElement!: HTMLIxInputElement; + @AttachInternals() formInternals!: ElementInternals; + + /** + * The type of the text field. Possible values are 'text', 'email', or 'password'. + */ + @Prop() type: 'text' | 'email' | 'password' | 'tel' | 'url' = 'text'; + + /** + * The name of the text field. + */ + @Prop({ reflect: true }) name?: string; + + /** + * The placeholder text for the text field. + */ + @Prop({ reflect: true }) placeholder?: string; + + /** + * The value of the text field. + */ + @Prop({ reflect: true, mutable: true }) value: string = ''; + + /** + * Specifies whether the text field is required. + */ + @Prop({ reflect: true }) required: boolean = false; + + /** + * Specifies whether the text field is disabled. + */ + @Prop({ reflect: true }) disabled: boolean = false; + + /** + * Specifies whether the text field is readonly. + */ + @Prop({ reflect: true }) readonly: boolean = false; + + /** + * The helper text for the text field. + */ + @Prop() helperText?: string; + + /** + * The info text for the text field. + */ + @Prop() infoText?: string; + + /** + * Specifies whether to show the text as a tooltip. + */ + @Prop() showTextAsTooltip?: boolean; + + /** + * The valid text for the text field. + */ + @Prop() validText?: string; + + /** + * The warning text for the text field. + */ + @Prop() warningText?: string; + + /** + * The label for the text field. + */ + @Prop({ reflect: true }) label?: string; + + /** + * The error text for the text field. + */ + @Prop() invalidText?: string; + + /** + * The pattern for the text field. + */ + @Prop() pattern?: string; + + /** + * The maximum length of the text field. + */ + @Prop() maxLength?: number; + + /** + * The minimum length of the text field. + */ + @Prop() minLength?: number; + + /** + * The allowed characters pattern for the text field. + */ + @Prop() allowedCharactersPattern?: string; + + /** + * Event emitted when the value of the text field changes. + */ + @Event() valueChange!: EventEmitter; + + /** + * Event emitted when the validity state of the text field changes. + */ + @Event() validityStateChange!: EventEmitter; + + /** + * Event emitted when the text field loses focus. + */ + @Event() ixBlur!: EventEmitter; + + @State() isInvalid = false; + @State() isValid = false; + @State() isInfo = false; + @State() isWarning = false; + @State() isInvalidByRequired = false; + + @State() inputType = 'text'; + + private readonly inputRef = makeRef(); + private readonly slotEndRef = makeRef(); + private readonly slotStartRef = makeRef(); + + private readonly inputId = `input-${inputIds++}`; + + @HookValidationLifecycle() + updateClassMappings(result: ValidationResults) { + mapValidationResult(this, result); + } + + @Watch('type') + updateInputType() { + this.inputType = this.type; + } + + componentWillLoad() { + this.updateFormInternalValue(this.value); + this.inputType = this.type; + } + + componentDidRender() { + setTimeout(() => this.updatePaddings()); + } + + private updatePaddings() { + const slotStartBoundingRect = + this.slotStartRef.current?.getBoundingClientRect(); + const slotEndBoundingRect = + this.slotEndRef.current?.getBoundingClientRect(); + + if (slotStartBoundingRect) { + applyPaddingEnd(this.inputRef.current, slotStartBoundingRect.width, { + slotEnd: false, + }); + } + + if (slotEndBoundingRect) { + applyPaddingEnd(this.inputRef.current, slotEndBoundingRect.width, { + slotEnd: true, + }); + } + } + + updateFormInternalValue(value: string) { + this.formInternals.setFormValue(value); + this.value = value; + } + + /** @internal */ + @Method() + async getAssociatedFormElement(): Promise { + return this.formInternals.form; + } + + /** @internal */ + @Method() + hasValidValue(): Promise { + return Promise.resolve(!!this.value); + } + + /** + * Returns the native input element used in the text field. + */ + @Method() + getNativeInputElement() { + return this.inputRef.waitForCurrent(); + } + + /** + * Focuses the input field + */ + @Method() + async focusInput(): Promise { + return (await this.getNativeInputElement()).focus(); + } + + render() { + const inputAria: A11yAttributes = getAriaAttributesForInput(this); + return ( + + } + > +
+ this.updatePaddings()} + > + checkAllowedKeys(this, event)} + valueChange={(value) => this.valueChange.emit(value)} + updateFormInternalValue={(value) => + this.updateFormInternalValue(value) + } + onBlur={() => onInputBlur(this, this.inputRef.current)} + ariaAttributes={inputAria} + > + this.updatePaddings()} + > + {this.type === 'password' && ( + { + if (this.inputType === 'password') { + this.inputType = 'text'; + return; + } + + this.inputType = 'password'; + }} + > + )} + +
+ {!!this.maxLength && this.maxLength > 0 && ( + + {this.value?.length}/{this.maxLength} + + )} +
+
+ ); + } +} diff --git a/packages/core/src/components/input/input.util.ts b/packages/core/src/components/input/input.util.ts new file mode 100644 index 00000000000..147cb1eb695 --- /dev/null +++ b/packages/core/src/components/input/input.util.ts @@ -0,0 +1,155 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { A11yAttributes, a11yBoolean } from '../utils/a11y'; +import { + IxFormComponent, + IxInputFieldComponent, + ValidationResults, + shouldSuppressInternalValidation, +} from '../utils/input'; +import { convertToRemString } from '../utils/rwd.util'; +import { generateUUID } from '../utils/uuid'; +import { shakeInput } from './input.animation'; + +export function createIdIfNotExists( + element: IxFormComponent, + idPrefix: string = 'input' +) { + return element.hasAttribute('id') + ? element.getAttribute('id') + : `${idPrefix}-${generateUUID()}`; +} + +export function mapValidationResult( + ref: IxInputFieldComponent, + result: ValidationResults +) { + ref.isInvalid = result.isInvalid || result.isInvalidByRequired; + ref.isValid = result.isValid; + ref.isInfo = result.isInfo; + ref.isWarning = result.isWarning; +} + +export function checkAllowedKeys( + comp: IxInputFieldComponent, + event: KeyboardEvent +) { + if (comp.allowedCharactersPattern) { + const regex = new RegExp(comp.allowedCharactersPattern); + if (!regex.test(event.key)) { + event.preventDefault(); + shakeInput(comp.inputRef.current); + } + } +} + +export async function checkInternalValidity( + comp: IxFormComponent, + input: HTMLInputElement | HTMLTextAreaElement +) { + const validityState = input.validity; + + const eventResult = comp.validityStateChange.emit(validityState); + + if (eventResult.defaultPrevented) { + return; + } + + if (!comp.value) { + return; + } + + const skipValidation = await shouldSuppressInternalValidation(comp); + if (skipValidation) { + return; + } + + const { valid } = validityState; + comp.hostElement.classList.toggle('ix-invalid', !valid); +} + +export function onInputBlur( + comp: IxInputFieldComponent, + input?: HTMLInputElement | HTMLTextAreaElement | null +) { + comp.ixBlur.emit(); + + if (!input) { + throw new Error('Input element is not available'); + } + checkInternalValidity(comp, input); +} + +export function applyPaddingEnd( + inputElement: HTMLElement | null, + width: number, + options: { + slotEnd: boolean; + additionalPaddingRight?: string; + } +) { + if (!inputElement) { + return; + } + + if (width === 0) { + return; + } + + const remInPixels = 16; + const padding = convertToRemString(width + remInPixels / 2); + + if (options.slotEnd) { + inputElement.style.paddingRight = `calc(${padding} + ${ + options.additionalPaddingRight ?? '0rem' + })`; + } else { + inputElement.style.paddingLeft = padding; + } +} + +export function adjustPaddingForStartAndEnd( + startElement: HTMLElement | null, + endElement: HTMLElement | null, + inputElement: HTMLElement | null +) { + if (startElement) { + const startBoundingRect = startElement.getBoundingClientRect(); + if (startBoundingRect) { + applyPaddingEnd(inputElement, startBoundingRect.width, { + slotEnd: false, + }); + } + } + + if (endElement) { + const endBoundingRect = endElement.getBoundingClientRect(); + + if (endBoundingRect) { + applyPaddingEnd(inputElement, endBoundingRect.width, { + slotEnd: true, + }); + } + } +} + +export function getAriaAttributesForInput( + component: IxInputFieldComponent +): A11yAttributes { + const inputAria: A11yAttributes = { + 'aria-invalid': `${a11yBoolean(component.isInvalid)}`, + 'aria-required': `${a11yBoolean(component.required)}`, + }; + + if (component.isInvalid && component.invalidText) { + inputAria['aria-errormessage'] = component.invalidText; + } + return inputAria; +} diff --git a/packages/core/src/components/input/number-input.scss b/packages/core/src/components/input/number-input.scss new file mode 100644 index 00000000000..189d2cb3dff --- /dev/null +++ b/packages/core/src/components/input/number-input.scss @@ -0,0 +1,27 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +@import './input.mixins.scss'; + +@include input-field; + +:host { + .input-wrapper.show-stepper-buttons { + input[type='number'] { + min-width: 6rem; + } + } + + .number-stepper-container { + display: flex; + position: relative; + flex-direction: row; + flex-wrap: nowrap; + margin-left: 0.5rem; + } +} diff --git a/packages/core/src/components/input/number-input.tsx b/packages/core/src/components/input/number-input.tsx new file mode 100644 index 00000000000..4f97dd56392 --- /dev/null +++ b/packages/core/src/components/input/number-input.tsx @@ -0,0 +1,340 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { iconMinus, iconPlus } from '@siemens/ix-icons/icons'; +import { + AttachInternals, + Component, + Element, + Event, + EventEmitter, + Host, + Method, + Prop, + State, + h, +} from '@stencil/core'; +import { + HookValidationLifecycle, + IxInputFieldComponent, + ValidationResults, +} from '../utils/input'; +import { MakeRef, makeRef } from '../utils/make-ref'; +import { InputElement, SlotEnd, SlotStart } from './input.fc'; +import { + applyPaddingEnd, + checkAllowedKeys, + checkInternalValidity, + mapValidationResult, + onInputBlur, +} from './input.util'; + +let numberInputIds = 0; + +/** + * @since 2.6.0 + * @form-ready 2.6.0 + */ +@Component({ + tag: 'ix-number-input', + styleUrl: 'number-input.scss', + shadow: true, + formAssociated: true, +}) +export class NumberInput implements IxInputFieldComponent { + @Element() hostElement!: HTMLIxNumberInputElement; + @AttachInternals() formInternals!: ElementInternals; + + /** + * name of the input element + */ + @Prop({ reflect: true }) name?: string; + + /** + * placeholder of the input element + */ + @Prop({ reflect: true }) placeholder?: string; + + /** + * The value of the input field + */ + @Prop({ reflect: true, mutable: true }) value: number = 0; + + /** + * Indicates if the field is required + */ + @Prop({ reflect: true }) required: boolean = false; + + /** + * Disables the input field + */ + @Prop() disabled: boolean = false; + + /** + * Indicates if the field is read-only + */ + @Prop() readonly: boolean = false; + + /** + * The helper text for the input field + */ + @Prop() helperText?: string; + + /** + * The info text for the input field + */ + @Prop() infoText?: string; + + /** + * Indicates if the text should be shown as a tooltip + */ + @Prop() showTextAsTooltip?: boolean; + + /** + * The valid text for the input field + */ + @Prop() validText?: string; + + /** + * The warning text for the input field + */ + @Prop() warningText?: string; + + /** + * The label for the input field + */ + @Prop({ reflect: true }) label?: string; + + /** + * The error text for the input field + */ + @Prop() invalidText?: string; + + /** + * The pattern for the input field + */ + @Prop() pattern?: string; + + /** + * The minimum value for the input field + */ + @Prop() min?: string | number; + + /** + * The maximum value for the input field + */ + @Prop() max?: string | number; + + /** + * The allowed characters pattern for the input field + */ + @Prop() allowedCharactersPattern?: string; + + /** + * Indicates if the stepper buttons should be shown + */ + @Prop() showStepperButtons?: boolean; + + /** + * Event emitted when the value of the input field changes + */ + @Event() valueChange!: EventEmitter; + + /** + * Event emitted when the validity state of the input field changes + */ + @Event() validityStateChange!: EventEmitter; + + /** + * Event emitted when the input field loses focus + */ + @Event() ixBlur!: EventEmitter; + + @State() isInvalid = false; + @State() isValid = false; + @State() isInfo = false; + @State() isWarning = false; + @State() isInvalidByRequired = false; + + private readonly inputRef = makeRef(); + private readonly slotEndRef = makeRef(); + private readonly slotStartRef = makeRef(); + private readonly numberInputId = `number-input-${numberInputIds++}`; + + @HookValidationLifecycle() + updateClassMappings(result: ValidationResults) { + mapValidationResult(this, result); + } + + componentWillLoad() { + this.updateFormInternalValue(this.value); + } + + componentDidRender() { + setTimeout(() => this.updatePaddings()); + } + + private updatePaddings() { + const slotStartBoundingRect = + this.slotStartRef.current?.getBoundingClientRect(); + const slotEndBoundingRect = + this.slotEndRef.current?.getBoundingClientRect(); + + if (slotStartBoundingRect) { + applyPaddingEnd(this.inputRef.current, slotStartBoundingRect.width, { + slotEnd: false, + }); + } + + if (slotEndBoundingRect) { + applyPaddingEnd(this.inputRef.current, slotEndBoundingRect.width, { + slotEnd: true, + }); + } + } + + updateFormInternalValue(value: number) { + this.formInternals.setFormValue(value.toString()); + this.value = value; + } + + /** @internal */ + @Method() + async getAssociatedFormElement(): Promise { + return this.formInternals.form; + } + + /** @internal */ + @Method() + hasValidValue(): Promise { + return Promise.resolve(!!this.value); + } + + /** + * Returns the native input element used under the hood + */ + @Method() + getNativeInputElement(): Promise { + return this.inputRef.waitForCurrent(); + } + + /** + * Focuses the input field + */ + @Method() + async focusInput(): Promise { + return (await this.getNativeInputElement()).focus(); + } + + render() { + const showStepperButtons = + this.showStepperButtons && (this.disabled || this.readonly) === false; + + return ( + + } + > +
+ this.updatePaddings()} + > + checkAllowedKeys(this, event)} + valueChange={(value) => this.valueChange.emit(Number(value))} + updateFormInternalValue={(value) => + this.updateFormInternalValue(Number(value)) + } + onBlur={() => onInputBlur(this, this.inputRef.current)} + > + this.updatePaddings()} + > + {showStepperButtons && ( +
+ { + if (!this.inputRef.current) { + return; + } + this.inputRef.current.stepDown(); + checkInternalValidity(this, this.inputRef.current); + this.updateFormInternalValue( + Number(this.inputRef.current.value) + ); + this.valueChange.emit(this.value); + }} + > + { + if (!this.inputRef.current) { + return; + } + this.inputRef.current.stepUp(); + checkInternalValidity(this, this.inputRef.current); + this.updateFormInternalValue( + Number(this.inputRef.current.value) + ); + this.valueChange.emit(this.value); + }} + > +
+ )} +
+
+
+
+ ); + } +} diff --git a/packages/core/src/components/input/tests/form-ready.ct.ts b/packages/core/src/components/input/tests/form-ready.ct.ts new file mode 100644 index 00000000000..699828a4434 --- /dev/null +++ b/packages/core/src/components/input/tests/form-ready.ct.ts @@ -0,0 +1,88 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import { getFormValue, preventFormSubmission, test } from '@utils/test'; +import { expect } from '@playwright/test'; + +test(`form-ready - ix-input`, async ({ mount, page }) => { + await mount(`
`); + + const formElement = page.locator('form'); + preventFormSubmission(formElement); + const input = page.locator('ix-input').locator('input'); + await input.fill('my example'); + await input.blur(); + + const formData = await getFormValue(formElement, 'my-field-name', page); + expect(formData).toBe('my example'); +}); + +test(`form-ready - ix-number-input`, async ({ mount, page }) => { + await mount( + `
` + ); + + const formElement = page.locator('form'); + preventFormSubmission(formElement); + const input = page.locator('ix-number-input').locator('input'); + await input.fill('123'); + await input.blur(); + + const formData = await getFormValue(formElement, 'my-field-name', page); + expect(formData).toBe('123'); +}); + +test(`form-ready - ix-textarea`, async ({ mount, page }) => { + await mount(`
`); + + const formElement = page.locator('form'); + preventFormSubmission(formElement); + const input = page.locator('ix-textarea').locator('textarea'); + await input.fill('Some longer text'); + await input.blur(); + + const formData = await getFormValue(formElement, 'my-field-name', page); + expect(formData).toBe('Some longer text'); +}); + +// +test(`form-ready - ix-input with initial value`, async ({ mount, page }) => { + await mount( + `
` + ); + + const formElement = page.locator('form'); + preventFormSubmission(formElement); + const formData = await getFormValue(formElement, 'my-field-name', page); + expect(formData).toBe('initial value'); +}); + +test(`form-ready - ix-number-input with initial value`, async ({ + mount, + page, +}) => { + await mount( + `
` + ); + + const formElement = page.locator('form'); + preventFormSubmission(formElement); + const formData = await getFormValue(formElement, 'my-field-name', page); + expect(formData).toBe('1337'); +}); + +test(`form-ready - ix-textarea with initial value`, async ({ mount, page }) => { + await mount( + `
` + ); + + const formElement = page.locator('form'); + preventFormSubmission(formElement); + const formData = await getFormValue(formElement, 'my-field-name', page); + expect(formData).toBe('initial value'); +}); diff --git a/packages/core/src/components/input/textarea.scss b/packages/core/src/components/input/textarea.scss new file mode 100644 index 00000000000..d58f42377ef --- /dev/null +++ b/packages/core/src/components/input/textarea.scss @@ -0,0 +1,56 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +@import './input.mixins.scss'; + +@include input-field; + +@include host-valid; + +@include host-info { + textarea { + border-color: var(--theme-input--border-color--info); + } + + textarea:hover { + border-color: var(--theme-input--border-color--info--hover) !important; + } + + textarea:active { + border-color: var(--theme-input--border-color--info--active) !important; + } +} + +@include host-warning { + textarea { + border-color: var(--theme-input--border-color--warning--active) !important; + } + + textarea:hover { + border-color: var(--theme-input--border-color--warning--active) !important; + } + + textarea:active { + border-color: var(--theme-input--border-color--warning--active) !important; + } +} + +@include host-invalid { + textarea { + background-color: var(--theme-input--background--invalid); + border-color: var(--theme-input--border-color--invalid) !important; + } + + textarea:hover { + border-color: var(--theme-input--border-color--invalid--hover) !important; + } + + textarea:active { + border-color: var(--theme-input--border-color--invalid--active) !important; + } +} diff --git a/packages/core/src/components/input/textarea.tsx b/packages/core/src/components/input/textarea.tsx new file mode 100644 index 00000000000..29141c73a11 --- /dev/null +++ b/packages/core/src/components/input/textarea.tsx @@ -0,0 +1,272 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { + AttachInternals, + Component, + Element, + Event, + EventEmitter, + Host, + Method, + Prop, + State, + h, +} from '@stencil/core'; +import { + HookValidationLifecycle, + IxInputFieldComponent, + ValidationResults, +} from '../utils/input'; +import { MakeRef, makeRef } from '../utils/make-ref'; +import { TextareaElement } from './input.fc'; +import { mapValidationResult, onInputBlur } from './input.util'; + +export type TextareaResizeBehavior = + | 'both' + | 'horizontal' + | 'vertical' + | 'none'; + +/** + * @since 2.6.0 + * @form-ready 2.6.0 + */ +@Component({ + tag: 'ix-textarea', + styleUrl: 'textarea.scss', + shadow: true, + formAssociated: true, +}) +export class Textarea implements IxInputFieldComponent { + @Element() hostElement!: HTMLIxTextareaElement; + @AttachInternals() formInternals!: ElementInternals; + + /** + * The name of the textarea field. + */ + @Prop({ reflect: true }) name?: string; + + /** + * The placeholder text for the textarea field. + */ + @Prop({ reflect: true }) placeholder?: string; + + /** + * The value of the textarea field. + */ + @Prop({ reflect: true, mutable: true }) value: string = ''; + + /** + * Determines if the textarea field is required. + */ + @Prop({ reflect: true }) required: boolean = false; + + /** + * Determines if the textarea field is disabled. + */ + @Prop() disabled: boolean = false; + + /** + * Determines if the textarea field is readonly. + */ + @Prop() readonly: boolean = false; + + /** + * The helper text for the textarea field. + */ + @Prop() helperText?: string; + + /** + * The info text for the textarea field. + */ + @Prop() infoText?: string; + + /** + * Determines if the text should be displayed as a tooltip. + */ + @Prop() showTextAsTooltip?: boolean; + + /** + * The valid text for the textarea field. + */ + @Prop() validText?: string; + + /** + * The warning text for the textarea field. + */ + @Prop() warningText?: string; + + /** + * The label for the textarea field. + */ + @Prop({ reflect: true }) label?: string; + + /** + * The error text for the textarea field. + */ + @Prop() invalidText?: string; + + /** + * The height of the textarea field (e.g. "52px"). + */ + @Prop() textareaHeight?: string; + + /** + * The width of the textarea field (e.g. "200px"). + */ + @Prop() textareaWidth?: string; + + /** + * The height of the textarea specified by number of rows. + */ + @Prop() textareaRows?: number; + + /** + * The width of the textarea specified by number of characters. + */ + @Prop() textareaCols?: number; + + /** + * Determines the resize behavior of the textarea field. + * Resizing can be enabled in one direction, both directions or completely disabled. + */ + @Prop() resizeBehavior: TextareaResizeBehavior = 'both'; + + /** + * The maximum length of the textarea field. + */ + @Prop() maxLength?: number; + + /** + * The minimum length of the textarea field. + */ + @Prop() minLength?: number; + + /** + * Event emitted when the value of the textarea field changes. + */ + @Event() valueChange!: EventEmitter; + + /** + * Event emitted when the validity state of the textarea field changes. + */ + @Event() validityStateChange!: EventEmitter; + + /** + * Event emitted when the textarea field loses focus. + */ + @Event() ixBlur!: EventEmitter; + + @State() isInvalid = false; + @State() isValid = false; + @State() isInfo = false; + @State() isWarning = false; + @State() isInvalidByRequired = false; + + private readonly textAreaRef = makeRef(); + + @HookValidationLifecycle() + updateClassMappings(result: ValidationResults) { + mapValidationResult(this, result); + } + + componentWillLoad() { + this.updateFormInternalValue(this.value); + } + + updateFormInternalValue(value: string) { + this.formInternals.setFormValue(value); + this.value = value; + } + + /** @internal */ + @Method() + async getAssociatedFormElement(): Promise { + return this.formInternals.form; + } + + /** @internal */ + @Method() + hasValidValue(): Promise { + return Promise.resolve(!!this.value); + } + + /** + * Get the native textarea element. + */ + @Method() + getNativeInputElement(): Promise { + return this.textAreaRef.waitForCurrent(); + } + + /** + * Focuses the input field + */ + @Method() + async focusInput(): Promise { + return (await this.getNativeInputElement()).focus(); + } + + render() { + return ( + + } + > + {!!this.maxLength && this.maxLength > 0 && ( + + {this.value.length}/{this.maxLength} + + )} +
+ this.valueChange.emit(value)} + updateFormInternalValue={(value) => + this.updateFormInternalValue(value) + } + onBlur={() => onInputBlur(this, this.textAreaRef.current)} + > +
+
+
+ ); + } +} diff --git a/packages/core/src/components/layout-auto/layout-auto.scss b/packages/core/src/components/layout-auto/layout-auto.scss new file mode 100644 index 00000000000..daef5809fe1 --- /dev/null +++ b/packages/core/src/components/layout-auto/layout-auto.scss @@ -0,0 +1,19 @@ +:host { + display: block; + position: relative; + margin: 0 0.75rem; + + --ix-layout-grid-gap: 1.5rem; + + .container { + display: flex; + align-items: stretch; + flex-wrap: wrap; + gap: var(--ix-layout-grid-gap); + } + + ::slotted(*) { + flex-grow: 0; + flex-shrink: 0; + } +} diff --git a/packages/core/src/components/layout-auto/layout-auto.tsx b/packages/core/src/components/layout-auto/layout-auto.tsx new file mode 100644 index 00000000000..429f0e4d2b8 --- /dev/null +++ b/packages/core/src/components/layout-auto/layout-auto.tsx @@ -0,0 +1,134 @@ +import { Component, Element, Host, Prop, Watch, h } from '@stencil/core'; +import { IxComponent } from '../utils/internal'; + +/** + * @since 2.6.0 + */ +@Component({ + tag: 'ix-layout-auto', + styleUrl: 'layout-auto.scss', + shadow: true, +}) +export class LayoutForm implements IxComponent { + @Element() hostElement!: HTMLIxLayoutAutoElement; + + /** + * Defines the layout of the form. + */ + @Prop() layout: { + minWidth: string; + columns: number; + }[] = [ + { minWidth: '0', columns: 1 }, + { minWidth: '48em', columns: 2 }, + ]; + + private mediaQueryList: { + mediaQuery: MediaQueryList; + layout: { + minWidth: string; + columns: number; + }; + }[] = []; + + private readonly observer = new MutationObserver(() => + this.calculateGridTemplateColumns() + ); + + private readonly resizeObserver = new ResizeObserver(() => { + this.calculateGridTemplateColumns(); + }); + + connectedCallback(): void { + this.observer.observe(this.hostElement, { + childList: true, + subtree: true, + attributes: true, + attributeFilter: ['data-colspan'], + }); + this.resizeObserver.observe(this.hostElement); + + this.calculateGridTemplateColumns(); + } + + componentWillLoad(): void | Promise { + this.calculateGridTemplateColumns(); + } + + disconnectedCallback(): void { + if (this.observer) { + this.observer.disconnect(); + } + + if (this.resizeObserver) { + this.resizeObserver.disconnect(); + } + } + + @Watch('layout') + updateMediaQueryList() { + this.mediaQueryList = []; + this.layout.forEach((layout) => { + const mediaQuery = window.matchMedia(`(min-width: ${layout.minWidth})`); + this.mediaQueryList.push({ + mediaQuery, + layout, + }); + }); + } + + private parseNumber(number: string | null) { + if (!number) { + return 1; + } + + const result = parseInt(number); + if (isNaN(result)) { + return 1; + } + + return result; + } + + private calculateGridTemplateColumns() { + this.updateMediaQueryList(); + + let layoutColumns = 1; + let columnSpacing = 'var(--ix-layout-grid-gap)'; + + this.mediaQueryList.forEach((mediaQuery) => { + if (mediaQuery.mediaQuery.matches) { + layoutColumns = mediaQuery.layout.columns; + } + }); + + let column = 0; + Array.from( + this.hostElement.children as HTMLCollectionOf + ).forEach((child) => { + let colspan = this.parseNumber(child.getAttribute('data-colspan')); + colspan = Math.min(colspan, layoutColumns); + const childRatio = colspan / layoutColumns; + + child.style.width = `calc(${childRatio * 99.9}% - ${ + 1 - childRatio + } * ${columnSpacing})`; + + if (column + colspan > layoutColumns) { + column = 0; + } + + column = (column + colspan) % layoutColumns; + }); + } + + render() { + return ( + +
+ +
+
+ ); + } +} diff --git a/packages/core/src/components/grid/layout-grid.scss b/packages/core/src/components/layout-grid/layout-grid.scss similarity index 100% rename from packages/core/src/components/grid/layout-grid.scss rename to packages/core/src/components/layout-grid/layout-grid.scss diff --git a/packages/core/src/components/grid/layout-grid.tsx b/packages/core/src/components/layout-grid/layout-grid.tsx similarity index 100% rename from packages/core/src/components/grid/layout-grid.tsx rename to packages/core/src/components/layout-grid/layout-grid.tsx diff --git a/packages/core/src/components/playground/playground.tsx b/packages/core/src/components/playground/playground.tsx index 7610a440b71..bdac8361c66 100644 --- a/packages/core/src/components/playground/playground.tsx +++ b/packages/core/src/components/playground/playground.tsx @@ -4,10 +4,10 @@ * SPDX-License-Identifier: MIT * * This source code is licensed under the MIT license found in the - * LICENxSE file in the root directory of this source tree. + * LICENSE file in the root directory of this source tree. */ -import { Component, h, Host } from '@stencil/core'; +import { Component, Host, h } from '@stencil/core'; /** @internal */ @Component({ @@ -19,6 +19,14 @@ import { Component, h, Host } from '@stencil/core'; }) export class PlaygroundInternal { render() { - return ; + return ( + + + + + + + + ); } } diff --git a/packages/core/src/components/radio-group/radio-group.scss b/packages/core/src/components/radio-group/radio-group.scss new file mode 100644 index 00000000000..ea9cd126452 --- /dev/null +++ b/packages/core/src/components/radio-group/radio-group.scss @@ -0,0 +1,26 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +@import 'mixins/shadow-dom/component'; + +:host { + display: inline-block; + position: relative; + + .checkbox-container { + display: flex; + flex-direction: column; + gap: 1rem; + margin: 0.375rem 0; + flex-wrap: wrap; + + &.row-layout { + flex-direction: row; + } + } +} diff --git a/packages/core/src/components/radio-group/radio-group.tsx b/packages/core/src/components/radio-group/radio-group.tsx new file mode 100644 index 00000000000..22c092ab6d6 --- /dev/null +++ b/packages/core/src/components/radio-group/radio-group.tsx @@ -0,0 +1,202 @@ +/* + * SPDX-FileCopyrightText: 2023 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import { + Component, + Element, + EventEmitter, + Host, + Event, + Listen, + Prop, + State, + h, + Watch, +} from '@stencil/core'; +import { + ValidationResults, + HookValidationLifecycle, + FieldWrapperInterface, + IxFormValidationState, +} from '../utils/input'; + +/** + * @since 2.6.0 + * @form-ready 2.6.0 + */ +@Component({ + tag: 'ix-radio-group', + styleUrl: 'radio-group.scss', + shadow: true, +}) +export class RadiobuttonGroup + implements FieldWrapperInterface, IxFormValidationState +{ + @Element() hostElement!: HTMLIxRadioGroupElement; + /** + * Show text below the field component + */ + @Prop() helperText?: string; + + /** + * Label for the field component + */ + @Prop() label?: string; + + /** + * Value of the radiobutton group component + */ + @Prop() value?: string; + + /** + * Error text for the field component + */ + @Prop() invalidText?: string; + + /** + * Info text for the field component + */ + @Prop() infoText?: string; + + /** + * Warning text for the field component + */ + @Prop() warningText?: string; + + /** + * Valid text for the field component + */ + @Prop() validText?: string; + + /** + * Show helper, info, warning, error and valid text as tooltip + */ + @Prop() showTextAsTooltip?: boolean; + + /** + * Alignment of the radio buttons in the group + */ + @Prop() direction: 'column' | 'row' = 'column'; + + /** + * Event emitted when the value of the radiobutton group changes + */ + @Event() valueChange!: EventEmitter; + + @State() isInvalid = false; + @State() isValid = false; + @State() isInfo = false; + @State() isWarning = false; + + private readonly observer = new MutationObserver(() => { + this.ensureOnlyLastRadioChecked(); + }); + + private get radiobuttonElements() { + return Array.from(this.hostElement.querySelectorAll('ix-radio')); + } + + connectedCallback(): void { + this.observer.observe(this.hostElement, { + childList: true, + subtree: true, + attributes: true, + attributeFilter: ['checked'], + }); + } + + componentWillLoad(): void | Promise { + this.selectInitialValue(); + this.ensureOnlyLastRadioChecked(); + } + + disconnectedCallback(): void { + if (this.observer) { + this.observer.disconnect(); + } + } + + private selectInitialValue() { + if (!this.value) { + return; + } + this.radiobuttonElements.forEach((radiobutton) => { + radiobutton.checked = radiobutton.value === this.value; + }); + } + + private ensureOnlyLastRadioChecked() { + const checkedRadios = this.radiobuttonElements.filter( + (radio) => radio.checked + ); + checkedRadios.forEach((radio, index) => { + if (index === checkedRadios.length - 1) { + return; + } + radio.checked = false; + }); + } + + @Watch('value') + onValueChangeHandler(newValue: string) { + this.radiobuttonElements.forEach((radiobutton) => { + radiobutton.checked = radiobutton.value === newValue; + }); + } + + @Listen('checkedChange') + onCheckedChangeHandler(event: CustomEvent) { + this.radiobuttonElements.forEach((radiobutton) => { + if (radiobutton !== event.target) { + radiobutton.checked = false; + return; + } + radiobutton.checked = true; + this.valueChange.emit(radiobutton.value); + }); + } + + @HookValidationLifecycle({ + includeChildren: true, + }) + onClassField({ isInvalid, isInfo, isValid, isWarning }: ValidationResults) { + this.isInvalid = isInvalid; + this.isInfo = isInfo; + this.isValid = isValid; + this.isWarning = isWarning; + } + + render() { + return ( + + +
+ +
+
+
+ ); + } +} diff --git a/packages/core/src/components/radio-group/test/radio-group.ct.ts b/packages/core/src/components/radio-group/test/radio-group.ct.ts new file mode 100644 index 00000000000..e5dbbffcf25 --- /dev/null +++ b/packages/core/src/components/radio-group/test/radio-group.ct.ts @@ -0,0 +1,123 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import { expect } from '@playwright/test'; +import { test } from '@utils/test'; + +test('renders', async ({ mount, page }) => { + await mount( + ` + + + + + + ` + ); + const radioGroupElement = page.locator('ix-radio-group'); + const radioOption1 = page.locator('ix-radio').nth(0); + const radioOption2 = page.locator('ix-radio').nth(1); + const radioOption3 = page.locator('ix-radio').nth(2); + await expect(radioGroupElement).toHaveClass(/hydrated/); + await expect(radioOption1).toHaveClass(/hydrated/); + await expect(radioOption2).toHaveClass(/hydrated/); + await expect(radioOption3).toHaveClass(/hydrated/); +}); + +test('initial checked', async ({ mount, page }) => { + await mount( + ` + + + + + + ` + ); + const radioGroupElement = page.locator('ix-radio-group'); + const radioOption1 = page.locator('ix-radio').nth(0); + const radioOption2 = page.locator('ix-radio').nth(1); + const radioOption3 = page.locator('ix-radio').nth(2); + await expect(radioGroupElement).toHaveClass(/hydrated/); + await expect(radioOption1).toHaveClass(/hydrated/); + await expect(radioOption2).toHaveClass(/hydrated/); + await expect(radioOption3).toHaveClass(/hydrated/); + + await expect(radioOption2.locator('.checkmark')).toBeAttached(); +}); + +test('change checked', async ({ mount, page }) => { + await mount( + ` + + + + + + ` + ); + const radioGroupElement = page.locator('ix-radio-group'); + const radioOption1 = page.locator('ix-radio').nth(0); + const radioOption2 = page.locator('ix-radio').nth(1); + const radioOption3 = page.locator('ix-radio').nth(2); + await expect(radioGroupElement).toHaveClass(/hydrated/); + await expect(radioOption1).toHaveClass(/hydrated/); + await expect(radioOption2).toHaveClass(/hydrated/); + await expect(radioOption2.locator('.checkmark')).toBeAttached(); + await expect(radioOption3).toHaveClass(/hydrated/); + + await radioOption3.click(); + + await expect(radioOption2).not.toHaveAttribute('checked'); + await expect(radioOption2.locator('.checkmark')).not.toBeAttached(); + await expect(radioOption3.locator('.checkmark')).toBeAttached(); + await expect(radioOption3).toHaveAttribute('checked'); +}); + +test('emit group changed change', async ({ mount, page }) => { + await mount( + ` + + + + + + ` + ); + const radioGroupElement = page.locator('ix-radio-group'); + const radioOption3 = page.locator('ix-radio').nth(2); + + const onValueChange = radioGroupElement.evaluate( + (el) => + new Promise((resolve) => { + el.addEventListener('valueChange', (event) => { + const customEvent = event as CustomEvent; + resolve(customEvent.detail); + }); + }) + ); + + await radioOption3.click(); + + expect(await onValueChange).toEqual('option3'); +}); + +test('disabled', async ({ mount, page }) => { + await mount( + ` + + + + + + ` + ); + const radioOption3 = page.locator('ix-radio').nth(2); + await expect(radioOption3).not.toBeEnabled(); + await expect(radioOption3.locator('.checkmark')).not.toBeAttached(); +}); diff --git a/packages/core/src/components/radio/radio.scss b/packages/core/src/components/radio/radio.scss new file mode 100644 index 00000000000..9fc94db3ab2 --- /dev/null +++ b/packages/core/src/components/radio/radio.scss @@ -0,0 +1,264 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + @import 'mixins/shadow-dom/component'; + +:host { + @include ix-component; + display: inline-block; + position: relative; + + button { + all: unset; + + display: inline-flex; + position: relative; + + align-items: center; + justify-content: center; + + width: 1.125rem; + min-width: 1.125rem; + max-width: 1.125rem; + height: 1.125rem; + min-height: 1.125rem; + max-height: 1.125rem; + + border: 1px solid white; + border-radius: 100px; + + margin-right: 0.5rem; + } + + button:focus-visible { + outline: 0.0625rem solid var(--theme-color-focus-bdr); + outline-offset: var(--theme-radiobtn--focus--outline-offset); + } + + input[type="radio"] { + display: none; + } + + label { + display: flex; + + justify-content: flex-start; + align-items: flex-start; + + width: 100%; + height: 100%; + } + + .checkmark { + border-radius: 100px; + background-color: var(--theme-color-primary--contrast); + width: 0.5rem; + height: 0.5rem; + } +} + +@mixin radio-base() { + :host { + button { + background-color: var(--theme-radiobtn-unchecked--background); + border: var(--theme-radiobtn--border-thickness) solid + var(--theme-radiobtn-unchecked--border-color); + } + } + + :host(:hover) { + button { + background-color: var(--theme-radiobtn-unchecked--background--hover); + border: var(--theme-radiobtn--border-thickness) solid + var(--theme-radiobtn-unchecked--border-color--hover); + } + } + + :host(:active) { + button { + background-color: var(--theme-radiobtn-unchecked--background--active); + border: var(--theme-radiobtn--border-thickness) solid + var(--theme-radiobtn-unchecked--border-color--active); + } + } + + :host(.checked), + :host([indeterminate]) { + button { + background-color: var(--theme-radiobtn-checked--background); + border: var(--theme-radiobtn--border-thickness) solid + var(--theme-radiobtn-checked--border-color); + } + } + + :host(.checked:hover), + :host([indeterminate]:hover) { + button { + background-color: var(--theme-radiobtn-checked--background--hover); + border: var(--theme-radiobtn--border-thickness) solid + var(--theme-radiobtn-checked--border-color--hover); + } + } + + :host(.checked:active), + :host([indeterminate]:active) { + button { + background-color: var(--theme-radiobtn-checked--background--active); + border: var(--theme-radiobtn--border-thickness) solid + var(--theme-radiobtn-checked--border-color--active); + } + } + + :host(:disabled), + :host(.disabled) { + pointer-events: none; + + button { + background-color: var(--theme-radiobtn-unchecked--background--disabled); + border: var(--theme-radiobtn--border-thickness) solid + var(--theme-radiobtn-unchecked--border-color--disabled); + } + } + + :host(.checked:disabled), + :host(.checked.disabled), + :host([indeterminate]:disabled), + :host([indeterminate].disabled) { + button { + background-color: var(--theme-radiobtn-checked--background--disabled); + border: var(--theme-radiobtn--border-thickness) solid + var(--theme-radiobtn-checked--border-color--disabled); + } + } + + ix-typography { + margin-top: 0.125rem; + } +} + +@mixin radio-variant($selector) { + :host(#{$selector}:not(.disabled)) { + button { + @content; + } + } + + :host(#{$selector}) { + button { + background-color: var(--theme-radiobtn-unchecked--background); + border: var(--theme-radiobtn--border-thickness) solid + var(--theme-radiobtn-unchecked--border-color); + } + } + + :host(#{$selector}:hover) { + button { + background-color: var(--theme-radiobtn-unchecked--background--hover); + border: var(--theme-radiobtn--border-thickness) solid + var(--theme-radiobtn-unchecked--border-color--hover); + } + } + + :host(#{$selector}:active) { + button { + background-color: var(--theme-radiobtn-unchecked--background--active); + border: var(--theme-radiobtn--border-thickness) solid + var(--theme-radiobtn-unchecked--border-color--active); + } + } + + :host(#{$selector}.checked), + :host(#{$selector}[indeterminate]) { + button { + background-color: var(--theme-radiobtn-checked--background); + border: var(--theme-radiobtn--border-thickness) solid + var(--theme-radiobtn-checked--border-color); + } + } + + :host(#{$selector}.checked:hover), + :host(#{$selector}[indeterminate]:hover) { + button { + background-color: var(--theme-radiobtn-checked--background--hover); + border: var(--theme-radiobtn--border-thickness) solid + var(--theme-radiobtn-checked--border-color--hover); + } + } + + :host(#{$selector}.checked:active), + :host(#{$selector}[indeterminate]:active) { + button { + background-color: var(--theme-radiobtn-checked--background--active); + border: var(--theme-radiobtn--border-thickness) solid + var(--theme-radiobtn-checked--border-color--active); + } + } + + :host(#{$selector}:disabled), + :host(#{$selector}.disabled) { + button { + background-color: var(--theme-radiobtn-unchecked--background--disabled); + border: var(--theme-radiobtn--border-thickness) solid + var(--theme-radiobtn-unchecked--border-color--disabled); + } + } + + :host(#{$selector}.checked:disabled), + :host(#{$selector}.checked.disabled), + :host(#{$selector}[indeterminate]:disabled), + :host(#{$selector}[indeterminate].disabled) { + button { + background-color: var(--theme-radiobtn-checked--background--disabled); + border: var(--theme-radiobtn--border-thickness) solid + var(--theme-radiobtn-checked--border-color--disabled); + } + } +} + +@mixin define-radio-vars($state, $type) { + --theme-radiobtn-#{$state}--background: var(--theme-radiobtn-#{$state}--background--#{$type}); + --theme-radiobtn-#{$state}--background--hover: var(--theme-radiobtn-#{$state}--background--#{$type}--hover); + --theme-radiobtn-#{$state}--background--active: var(--theme-radiobtn-#{$state}--background--#{$type}--active); + + --theme-radiobtn-#{$state}--border-color: var(--theme-radiobtn-#{$state}--border-color--#{$type}); + --theme-radiobtn-#{$state}--border-color--hover: var(--theme-radiobtn-#{$state}--border-color--#{$type}--hover); + --theme-radiobtn-#{$state}--border-color--active: var(--theme-radiobtn-#{$state}--border-color--#{$type}--active); +} + +@include radio-base(); +@include radio-variant( + $selector: '.ix-info', +) { + @include define-radio-vars('unchecked', 'info'); + @include define-radio-vars('checked', 'info'); + @include define-radio-vars('mixed', 'info'); +} + +@include radio-variant( + $selector: '.ix-warning', +) { + @include define-radio-vars('unchecked', 'warning'); + @include define-radio-vars('checked', 'warning'); + @include define-radio-vars('mixed', 'warning'); +} + +@include radio-variant( + $selector: '.ix-invalid--required', +) { + @include define-radio-vars('unchecked', 'invalid'); + @include define-radio-vars('checked', 'invalid'); + @include define-radio-vars('mixed', 'invalid'); +} + +@include radio-variant( + $selector: '.ix-invalid', +) { + @include define-radio-vars('unchecked', 'invalid'); + @include define-radio-vars('checked', 'invalid'); + @include define-radio-vars('mixed', 'invalid'); +} diff --git a/packages/core/src/components/radio/radio.tsx b/packages/core/src/components/radio/radio.tsx new file mode 100644 index 00000000000..994358f8e35 --- /dev/null +++ b/packages/core/src/components/radio/radio.tsx @@ -0,0 +1,177 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { + AttachInternals, + Component, + Event, + EventEmitter, + Host, + Prop, + Watch, + h, + Method, + Element, +} from '@stencil/core'; +import { makeRef } from '../utils/make-ref'; +import { IxFormComponent } from '../utils/input'; + +/** + * @since 2.6.0 + * @form-ready 2.6.0 + */ +@Component({ + tag: 'ix-radio', + styleUrl: 'radio.scss', + shadow: true, + formAssociated: true, +}) +export class Radio implements IxFormComponent { + @Element() hostElement!: HTMLIxRadioElement; + @AttachInternals() formInternals!: ElementInternals; + + /** + * Name of the radio component + */ + @Prop({ reflect: true }) name?: string; + + /** + * Value of the radio component + */ + @Prop({ reflect: true }) value?: string; + + /** + * Label for the radio component + */ + @Prop() label?: string; + + /** + * Disabled state of the radio component + */ + @Prop() disabled: boolean = false; + + /** + * Checked state of the radio component + */ + @Prop({ reflect: true, mutable: true }) checked: boolean = false; + + /** + * Event emitted when the checked state of the radio changes + */ + @Event() checkedChange!: EventEmitter; + + /** + * Event emitted when the value of the radio changes + */ + @Event() valueChange!: EventEmitter; + + /** + * Single radio cannot be required + * */ + required = false; + + private readonly inputRef = makeRef((radiobuttonRef) => { + radiobuttonRef.checked = this.checked; + }); + + private setCheckedState(newChecked: boolean) { + if (this.checked) { + return; + } + const result = this.checkedChange.emit(newChecked); + if (result.defaultPrevented) { + return; + } + + this.checked = newChecked; + } + + @Watch('checked') + async onCheckedChange() { + const radiobuttonRef = await this.inputRef.waitForCurrent(); + radiobuttonRef.checked = this.checked; + + this.updateFormInternalValue(); + } + + @Watch('value') + onValueChange() { + this.valueChange.emit(this.value); + } + + componentWillLoad() { + this.updateFormInternalValue(); + } + + updateFormInternalValue() { + if (this.checked) { + this.formInternals.setFormValue(this.value ?? 'on'); + } else { + this.formInternals.setFormValue(null); + } + } + + /** @internal */ + @Method() + hasValidValue(): Promise { + return Promise.resolve(this.checked); + } + + /** @internal */ + @Method() + getAssociatedFormElement(): Promise { + return Promise.resolve(this.formInternals.form); + } + + render() { + return ( + + + + ); + } +} diff --git a/packages/core/src/components/radio/test/radio.ct.ts b/packages/core/src/components/radio/test/radio.ct.ts new file mode 100644 index 00000000000..c7909d650f5 --- /dev/null +++ b/packages/core/src/components/radio/test/radio.ct.ts @@ -0,0 +1,47 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import { expect } from '@playwright/test'; +import { getFormValue, preventFormSubmission, test } from '@utils/test'; + +test('form-ready', async ({ mount, page }) => { + await mount( + `
` + ); + + const formElement = page.locator('form'); + preventFormSubmission(formElement); + const radio = page.locator('ix-radio'); + await radio.click(); + + const formData = await getFormValue(formElement, 'my-radio', page); + expect(formData).toBe('Test'); +}); + +test('form-ready with default value', async ({ mount, page }) => { + await mount(`
`); + + const formElement = page.locator('form'); + preventFormSubmission(formElement); + const radio = page.locator('ix-radio'); + await radio.click(); + + const formData = await getFormValue(formElement, 'my-radio', page); + expect(formData).toBe('on'); +}); + +test(`form-ready default active`, async ({ mount, page }) => { + await mount( + `
` + ); + + const formElement = page.locator('form'); + preventFormSubmission(formElement); + const formData = await getFormValue(formElement, 'my-field-name', page); + expect(formData).toBe('on'); +}); diff --git a/packages/core/src/components/select/select.scss b/packages/core/src/components/select/select.scss index c4637e6ac7d..23868b64ccc 100644 --- a/packages/core/src/components/select/select.scss +++ b/packages/core/src/components/select/select.scss @@ -12,6 +12,8 @@ @import 'mixins/hover'; @import 'mixins/text-truncation'; @import 'mixins/shadow-dom/component'; +@import 'mixins/field'; +@import 'mixins/validation/form-component'; :host { @include ix-component; @@ -30,6 +32,7 @@ position: relative; display: flex; align-items: center; + width: 100%; background-color: var(--theme-input--background); border: var(--theme-input--border-thickness) solid var(--theme-input--border-color); @@ -171,3 +174,51 @@ margin: 0 $small-space 0 1rem; } } + + + +@include host-valid; + +@include host-info { + .select { + border-color: var(--theme-input--border-color--info); + } + + .select:hover { + border-color: var(--theme-input--border-color--info--hover) !important; + } + + .select:active { + border-color: var(--theme-input--border-color--info--active) !important; + } +} + +@include host-warning { + .select { + border-color: var(--theme-input--border-color--warning); + } + + .select:hover { + border-color: var(--theme-input--border-color--warning--hover) !important; + } + + .select:active { + border-color: var(--theme-input--border-color--warning--active) !important; + } +} + +@include host-invalid { + .select { + border-color: var(--theme-input--border-color--invalid); + background-color: var(--theme-input--background--invalid); + box-shadow: none; + } + + .select:hover { + border-color: var(--theme-input--border-color--invalid--hover) !important; + } + + .select:active { + border-color: var(--theme-input--border-color--invalid--active) !important; + } +} diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx index 9dd32470e03..a7b78825fdc 100644 --- a/packages/core/src/components/select/select.tsx +++ b/packages/core/src/components/select/select.tsx @@ -8,6 +8,7 @@ */ import { + AttachInternals, Component, Element, Event, @@ -15,6 +16,7 @@ import { h, Host, Listen, + Method, Prop, State, Watch, @@ -24,14 +26,90 @@ import { ArrowFocusController } from '../utils/focus'; import { OnListener } from '../utils/listener'; import { createMutationObserver } from '../utils/mutation-observer'; import { DropdownItemWrapper } from '../dropdown/dropdown-controller'; - +import { + HookValidationLifecycle, + ValidationResults, + IxInputFieldComponent, +} from '../utils/input'; +import { MakeRef, makeRef } from '../utils/make-ref'; +import { a11yBoolean } from '../utils/a11y'; + +/** + * @form-ready 2.6.0 + */ @Component({ tag: 'ix-select', styleUrl: 'select.scss', shadow: true, + formAssociated: true, }) -export class Select { +export class Select implements IxInputFieldComponent { @Element() hostElement!: HTMLIxSelectElement; + @AttachInternals() formInternals!: ElementInternals; + + /** + * A string that represents the element's name attribute, + * containing a name that identifies the element when submitting the form. + * + * @since 2.6.0 + */ + @Prop({ reflect: true }) name?: string; + + /** + * A Boolean attribute indicating that an option with a non-empty string value must be selected + * + * @since 2.6.0 + */ + @Prop({ reflect: true }) required: boolean = false; + + /** + * Label for the select component + * + * @since 2.6.0 + */ + @Prop() label?: string; + + /** + * Warning text for the select component + * + * @since 2.6.0 + **/ + @Prop() warningText?: string; + + /** + * Info text for the select component + * + * @since 2.6.0 + **/ + @Prop() infoText?: string; + + /** + * Error text for the select component + * + * @since 2.6.0 + **/ + @Prop() invalidText?: string; + + /** + * Valid text for the select component + * + * @since 2.6.0 + **/ + @Prop() validText?: string; + + /** + * Helper text for the select component + * + * @since 2.6.0 + **/ + @Prop() helperText?: string; + + /** + * Show helper, error, info, warning text as tooltip + * + * @since 2.6.0 + */ + @Prop() showTextAsTooltip?: boolean; /** * Indices of selected items. @@ -45,7 +123,7 @@ export class Select { * This corresponds to the value property of ix-select-items * @since 2.0.0 */ - @Prop({ mutable: true }) value?: string | string[]; + @Prop({ mutable: true }) value: string | string[] = []; /** * Show clear button @@ -85,7 +163,7 @@ export class Select { /** * Select list header */ - @Prop() i18nSelectListHeader = 'Please select an option'; + @Prop() i18nSelectListHeader = 'Select an option'; /** * Hint inside of dropdown if no items where found with current filter text @@ -105,46 +183,56 @@ export class Select { * Value changed * @since 2.0.0 */ - @Event() valueChange: EventEmitter; + @Event() valueChange!: EventEmitter; /** * Item selection changed * @deprecated since 2.0.0. Use `valueChange` instead. */ - @Event() itemSelectionChange: EventEmitter; + @Event() itemSelectionChange!: EventEmitter; /** * Event dispatched whenever the text input changes. * * @since 2.0.0 */ - @Event() inputChange: EventEmitter; + @Event() inputChange!: EventEmitter; /** * Item added to selection */ - @Event() addItem: EventEmitter; + @Event() addItem!: EventEmitter; + + /** + * Blur input + */ + @Event() ixBlur!: EventEmitter; @State() dropdownShow = false; - @State() selectedLabels: string[]; + @State() selectedLabels: string[] = []; @State() dropdownWrapperRef!: HTMLElement; @State() dropdownAnchor!: HTMLElement; @State() isDropdownEmpty = false; - @State() navigationItem: DropdownItemWrapper; - @State() inputFilterText: string; - @State() inputValue: string; + @State() navigationItem: DropdownItemWrapper | null = null; + @State() inputFilterText: string = ''; + @State() inputValue: string | null = null; + + @State() isInvalid = false; + @State() isValid = false; + @State() isInfo = false; + @State() isWarning = false; - private inputRef!: HTMLInputElement; + private input!: HTMLInputElement; + private readonly inputRef = makeRef(); private dropdownRef!: HTMLIxDropdownElement; private customItemsContainerRef!: HTMLDivElement; private addItemRef!: HTMLIxDropdownItemElement; - private itemMutationObserver: MutationObserver; - - private arrowFocusController: ArrowFocusController; - private focusControllerCallbackBind = this.focusDropdownItem.bind(this); + private arrowFocusController!: ArrowFocusController; + private readonly focusControllerCallbackBind = + this.focusDropdownItem.bind(this); - private itemObserver = createMutationObserver(() => { + private readonly itemObserver = createMutationObserver(() => { this.arrowFocusController.items = this.visibleNonShadowItems; }); @@ -160,7 +248,7 @@ export class Select { get shadowItems() { return Array.from( - this.hostElement.shadowRoot.querySelectorAll('ix-select-item') + this.hostElement.shadowRoot!.querySelectorAll('ix-select-item') ); } @@ -183,7 +271,7 @@ export class Select { } get addItemButton() { - return this.hostElement.shadowRoot.querySelector('.add-item'); + return this.hostElement.shadowRoot!.querySelector('.add-item'); } get isSingleMode() { @@ -227,7 +315,6 @@ export class Select { }); } else { this.arrowFocusController.disconnect(); - this.arrowFocusController = undefined; this.itemObserver.disconnect(); } } @@ -238,17 +325,44 @@ export class Select { this.itemClick(newId); } + async updateFormInternalValue(value: string | string[]) { + if (Array.isArray(value)) { + this.formInternals.setFormValue(value.join(',')); + return; + } + + this.formInternals.setFormValue(value); + } + + /** @internal */ + @Method() + async hasValidValue(): Promise { + return this.required && !!this.hasValue(); + } + + private hasValue() { + if (Array.isArray(this.value)) { + return !!this.value.length; + } + + return !!this.value; + } + private focusDropdownItem(index: number) { - this.navigationItem = undefined; + this.navigationItem = null; if (index < this.visibleNonShadowItems.length) { const nestedDropdownItem = - this.visibleNonShadowItems[index]?.shadowRoot.querySelector( + this.visibleNonShadowItems[index]?.shadowRoot?.querySelector( 'ix-dropdown-item' ); + if (!nestedDropdownItem) { + return; + } + requestAnimationFrame(() => { - nestedDropdownItem.shadowRoot.querySelector('button').focus(); + nestedDropdownItem.shadowRoot?.querySelector('button')?.focus(); }); } } @@ -312,7 +426,7 @@ export class Select { } private updateSelection() { - let ids = []; + let ids: string[] = []; if (this.value) { ids = Array.isArray(this.value) ? [...this.value] : [this.value]; @@ -335,7 +449,10 @@ export class Select { } else { this.inputValue = ''; } - this.inputRef && (this.inputRef.value = this.inputValue); + + if (this.inputRef?.current) { + this.inputRef.current.value = this.inputValue; + } } private emitValueChange(value: string | string[]) { @@ -351,13 +468,14 @@ export class Select { this.itemSelectionChange.emit(Array.isArray(value) ? value : [value]); } + this.updateFormInternalValue(value); return false; } componentDidLoad() { - this.inputRef.addEventListener('input', () => { + this.input.addEventListener('input', () => { this.dropdownShow = true; - this.inputChange.emit(this.inputRef.value); + this.inputChange.emit(this.input.value); }); } @@ -367,6 +485,7 @@ export class Select { } this.updateSelection(); + this.updateFormInternalValue(this.value); } @Listen('ix-select-item:labelChange') @@ -376,12 +495,6 @@ export class Select { this.updateSelection(); } - disconnectedCallback() { - if (this.itemMutationObserver) { - this.itemMutationObserver.disconnect(); - } - } - private itemExists(item: string) { return this.items.find((i) => i.label === item); } @@ -390,13 +503,13 @@ export class Select { this.dropdownShow = event.detail; if (event.detail) { - this.inputRef.focus(); - this.inputRef.select(); + this.input.focus(); + this.input.select(); this.removeHiddenFromItems(); this.isDropdownEmpty = this.isEveryDropdownItemHidden; } else { - this.navigationItem = undefined; + this.navigationItem = null; this.updateSelection(); this.inputFilterText = ''; } @@ -467,9 +580,11 @@ export class Select { } const moveUp = key === 'ArrowUp'; - const indexNonShadow = this.visibleNonShadowItems.indexOf( - document.activeElement as any - ); + const indexNonShadow = document.activeElement + ? this.visibleNonShadowItems.indexOf( + document.activeElement as HTMLIxSelectItemElement + ) + : -1; // Slotted select items if (indexNonShadow === 0) { @@ -491,6 +606,10 @@ export class Select { return; } + if (!this.navigationItem) { + return; + } + if ( this.isAddItemVisible() && this.addItemRef.contains( @@ -509,7 +628,7 @@ export class Select { // Custom select items const indexShadow = this.visibleShadowItems.indexOf( - this.navigationItem as any + this.navigationItem as HTMLIxSelectItemElement ); if (moveUp) { @@ -535,7 +654,7 @@ export class Select { } } - private applyFocusTo(element: HTMLIxSelectItemElement) { + private applyFocusTo(element?: HTMLIxSelectItemElement) { if (!element) { return; } @@ -543,22 +662,23 @@ export class Select { this.navigationItem = element; setTimeout(() => { - element.shadowRoot - .querySelector('ix-dropdown-item') - .shadowRoot.querySelector('button') - .focus(); + const item = element.shadowRoot?.querySelector('ix-dropdown-item'); + + if (item) { + item.shadowRoot?.querySelector('button')?.focus(); + } }); } private focusAddItemButton() { if (this.addItemButton) { - this.addItemButton.shadowRoot.querySelector('button').focus(); + this.addItemButton.shadowRoot?.querySelector('button')?.focus(); this.navigationItem = this.addItemRef; } } private filterItemsWithTypeahead() { - this.inputFilterText = this.inputRef.value; + this.inputFilterText = this.input.value; if (this.isSingleMode && this.inputFilterText === this.selectedLabels[0]) { return; @@ -591,7 +711,7 @@ export class Select { } private clearInput() { - this.inputRef.value = ''; + this.input.value = ''; this.inputFilterText = ''; } @@ -599,11 +719,13 @@ export class Select { this.clearInput(); this.selectedLabels = []; this.value = []; - this.valueChange.emit(null); + this.emitValueChange([]); this.dropdownShow = false; } - private onInputBlur(e) { + private onInputBlur(event: Event) { + this.ixBlur.emit(); + if (this.editable) { return; } @@ -612,8 +734,10 @@ export class Select { return; } + const target = event.target as HTMLInputElement; + if (!this.dropdownShow && this.mode !== 'multiple') { - e.target['value'] = this.selectedLabels; + target.value = this.selectedLabels.toString(); } } @@ -641,90 +765,151 @@ export class Select { ); } + @HookValidationLifecycle() + onValidationChange({ + isInvalid, + isInvalidByRequired, + isValid, + isInfo, + isWarning, + }: ValidationResults) { + this.isInvalid = isInvalid || isInvalidByRequired; + this.isValid = isValid; + this.isWarning = isWarning; + this.isInfo = isInfo; + } + + /** @internal */ + @Method() + async getAssociatedFormElement(): Promise { + return this.formInternals.form; + } + + /** + * Returns the native input element used in the component. + */ + @Method() + getNativeInputElement(): Promise { + return Promise.resolve(this.input); + } + + /** + * Focuses the input field + */ + @Method() + async focusInput(): Promise { + return (await this.getNativeInputElement()).focus(); + } + render() { return ( - -
{ - this.dropdownAnchor = ref; - if (!this.editable) this.dropdownWrapperRef = ref; - }} + + } > -
-
- {this.isMultipleMode - ? this.selectedItems?.map((item) => ( - { - e.preventDefault(); - e.stopPropagation(); - this.itemClick(item.value); - }} - > - {item.label} - - )) - : ''} -
- (this.inputRef = ref)} - onBlur={(e) => this.onInputBlur(e)} - onFocus={() => { - this.navigationItem = undefined; - }} - onInput={() => this.filterItemsWithTypeahead()} - onKeyDown={(e) => this.onKeyDown(e)} - /> - {this.allowClear && - (this.selectedLabels?.length || this.inputFilterText) ? ( - { - e.preventDefault(); - e.stopPropagation(); - this.clear(); +
{ + this.dropdownAnchor = ref!; + if (!this.editable) this.dropdownWrapperRef = ref!; + }} + > +
+
+ {this.isMultipleMode + ? this.selectedItems?.map((item) => ( + { + e.preventDefault(); + e.stopPropagation(); + this.itemClick(item.value); + }} + > + {item.label} + + )) + : ''} +
+ - ) : null} - {this.disabled || this.readonly ? null : ( - { - if (this.editable) this.dropdownWrapperRef = ref; + this.input = ref!; + this.inputRef(this.input); + }} + onBlur={(e) => this.onInputBlur(e)} + onFocus={() => { + this.navigationItem = null; }} - > - )} + onInput={() => this.filterItemsWithTypeahead()} + onKeyDown={(e) => this.onKeyDown(e)} + /> + {this.allowClear && + (this.selectedLabels?.length || this.inputFilterText) ? ( + { + e.preventDefault(); + e.stopPropagation(); + this.clear(); + }} + /> + ) : null} + {this.disabled || this.readonly ? null : ( + { + if (this.editable) this.dropdownWrapperRef = ref!; + }} + > + )} +
-
+ (this.dropdownRef = ref)} + ref={(ref) => (this.dropdownRef = ref!)} show={this.dropdownShow} closeBehavior={this.isMultipleMode ? 'outside' : 'both'} class={{ @@ -735,8 +920,12 @@ export class Select { onShowChanged={(e) => this.dropdownVisibilityChanged(e)} placement="bottom-start" overwriteDropdownStyle={async () => { + const minWidth = this.hostElement.shadowRoot + ?.querySelector('.select') + ?.getBoundingClientRect().width; + return { - minWidth: `${this.hostElement.clientWidth}px`, + minWidth: `${minWidth}px`, }; }} > @@ -752,7 +941,7 @@ export class Select {
(this.customItemsContainerRef = ref)} + ref={(ref) => (this.customItemsContainerRef = ref!)} class="d-contents" >
{this.isAddItemVisible() ? ( @@ -770,7 +959,7 @@ export class Select { }} onFocus={() => (this.navigationItem = this.addItemRef)} ref={(ref) => { - this.addItemRef = ref; + this.addItemRef = ref!; }} > ) : null} diff --git a/packages/core/src/components/select/test/select.ct.ts b/packages/core/src/components/select/test/select.ct.ts index d5e01d209cc..b81c31cfa6f 100644 --- a/packages/core/src/components/select/test/select.ct.ts +++ b/packages/core/src/components/select/test/select.ct.ts @@ -7,7 +7,7 @@ * LICENSE file in the root directory of this source tree. */ import { expect } from '@playwright/test'; -import { test } from '@utils/test'; +import { getFormValue, preventFormSubmission, test } from '@utils/test'; test('renders', async ({ mount, page }) => { await mount(` @@ -156,15 +156,16 @@ test('open filtered dropdown on input', async ({ mount, page }) => { Test `); - const element = page.locator('ix-select'); - await element.evaluate((select: HTMLIxSelectElement) => (select.value = [])); + const select = page.locator('ix-select'); + const input = select.locator('input'); + await select.evaluate((select: HTMLIxSelectElement) => (select.value = [])); - await page.locator('[data-testid="input"]').focus(); - page.keyboard.down('Escape'); - const dropdown = element.locator('ix-dropdown'); + await input.focus(); + await page.keyboard.press('Escape'); + const dropdown = select.locator('ix-dropdown'); await expect(dropdown).not.toBeVisible(); - page.keyboard.down('1'); + await input.fill('1'); const item1 = page.getByRole('button', { name: 'Item 1' }); const item2 = page.getByRole('button', { name: 'Item 2' }); @@ -396,7 +397,7 @@ test.describe('arrow key navigation', () => { await page.waitForSelector('.checkmark'); await page.keyboard.down('ArrowDown'); - const addItem = await page.locator('ix-dropdown-item'); + const addItem = page.locator('ix-dropdown-item'); await expect(addItem).toBeFocused(); }); @@ -490,7 +491,7 @@ test.describe('arrow key navigation', () => { await input.focus(); await input.fill('Item 2'); await page.keyboard.press('Enter'); - await page.locator('input').clear(); + await input.clear(); await page.keyboard.down('ArrowDown'); await page.waitForTimeout(100); @@ -725,6 +726,46 @@ test.describe('arrow key navigation', () => { }); }); +test('form-ready', async ({ mount, page }) => { + await mount(` +
+ + Test + Test + +
+ `); + + const select = page.locator('ix-select'); + const formElement = page.locator('form'); + await preventFormSubmission(formElement); + await page.locator('[data-select-dropdown]').click(); + await page.locator('ix-select-item').nth(1).click(); + + const inputValue = await select.locator('input').inputValue(); + expect(inputValue).toEqual('Item 2'); + + const formData = await getFormValue(formElement, 'my-custom-entry', page); + expect(formData).toEqual('2'); +}); + +test('form-ready - with initial value', async ({ mount, page }) => { + await mount(` +
+ + Test + Test + Test + +
+ `); + + const formElement = page.locator('form'); + await preventFormSubmission(formElement); + const formData = await getFormValue(formElement, 'my-custom-entry', page); + expect(formData).toEqual('some other'); +}); + test.describe('Events', () => { test('value change', async ({ mount, page }) => { await mount(` @@ -734,9 +775,10 @@ test.describe('Events', () => { const select = await page.locator('ix-select'); const valueChanged = select.evaluate((elm) => { return new Promise((resolve) => { - elm.addEventListener('valueChange', (e: CustomEvent) => - resolve(e.detail) - ); + elm.addEventListener('valueChange', (e: Event) => { + const event = e as CustomEvent; + resolve(event.detail); + }); }); }); @@ -753,7 +795,9 @@ test.describe('Events', () => { const select = await page.locator('ix-select'); const itemAdded = select.evaluate((elm) => { return new Promise((resolve) => { - elm.addEventListener('addItem', (e: CustomEvent) => resolve(e.detail)); + elm.addEventListener('addItem', (e: Event) => { + resolve((e as CustomEvent).detail); + }); }); }); const input = await page.locator('input'); diff --git a/packages/core/src/components/toggle/test/toggle.ct.ts b/packages/core/src/components/toggle/test/toggle.ct.ts index fef1e2c3d9b..266e099b710 100644 --- a/packages/core/src/components/toggle/test/toggle.ct.ts +++ b/packages/core/src/components/toggle/test/toggle.ct.ts @@ -15,7 +15,7 @@ * LICENSE file in the root directory of this source tree. */ import { expect } from '@playwright/test'; -import { test } from '@utils/test'; +import { getFormValue, preventFormSubmission, test } from '@utils/test'; test('renders', async ({ mount, page }) => { await mount(``); @@ -57,3 +57,38 @@ test('should be toggled ON after indeterminate', async ({ mount, page }) => { await expect(input).toBeChecked(); }); + +test(`form-ready`, async ({ mount, page }) => { + await mount(`
`); + + const formElement = page.locator('form'); + preventFormSubmission(formElement); + await page.locator('ix-toggle').click(); + + const formData = await getFormValue(formElement, 'my-field-name', page); + expect(formData).toBe('on'); +}); + +test(`form-ready with value`, async ({ mount, page }) => { + await mount( + `
` + ); + + const formElement = page.locator('form'); + preventFormSubmission(formElement); + await page.locator('ix-toggle').click(); + + const formData = await getFormValue(formElement, 'my-field-name', page); + expect(formData).toBe('custom-value'); +}); + +test(`form-ready default active`, async ({ mount, page }) => { + await mount( + `
` + ); + + const formElement = page.locator('form'); + preventFormSubmission(formElement); + const formData = await getFormValue(formElement, 'my-field-name', page); + expect(formData).toBe('on'); +}); diff --git a/packages/core/src/components/toggle/toggle.scss b/packages/core/src/components/toggle/toggle.scss index aa5d623778b..1618ef8d036 100644 --- a/packages/core/src/components/toggle/toggle.scss +++ b/packages/core/src/components/toggle/toggle.scss @@ -47,6 +47,7 @@ background-color: var(--theme-switch-off--background); transition: var(--theme-default-time); border-radius: 1.5rem; + border: 1px solid transparent; } .slider:before { @@ -55,7 +56,7 @@ height: 1.125rem; width: 1.125rem; left: 4px; - bottom: 3px; + bottom: 2px; background-color: var(--theme-switch-thumb-off--background); transition: var(--theme-default-time); border-radius: 50%; @@ -77,18 +78,19 @@ outline-offset: 1px; } - input:checked + .switch > .slider { - background-color: var(--theme-switch-on--background); - } - input:checked + .switch > .slider::before { background-color: var(--theme-switch-thumb-on--background); transform: translateX(1.35rem); } // Toggle NOT checked + input + .switch > .slider { + border-color: var(--theme-switch-off--border-color); + } + input + .switch:hover > .slider { background-color: var(--theme-switch-off--background--hover); + border-color: var(--theme-switch-off--border-color--hover); } input + .switch:hover > .slider:before { @@ -97,6 +99,7 @@ input + .switch:active > .slider { background-color: var(--theme-switch-off--background--active); + border-color: var(--theme-switch-off--border-color--active); } input + .switch:active > .slider:before { @@ -104,8 +107,14 @@ } // Toggle checked + input:checked + .switch > .slider { + background-color: var(--theme-switch-on--background); + border-color: var(--theme-switch-on--border-color); + } + input:checked + .switch:hover > .slider { background-color: var(--theme-switch-on--background--hover); + border-color: var(--theme-switch-on--border-color--hover); } input:checked + .switch:hover > .slider:before { @@ -114,6 +123,7 @@ input:checked + .switch:active > .slider { background-color: var(--theme-switch-on--background--active); + border-color: var(--theme-switch-on--border-color--active); } input:checked + .switch:active > .slider:before { @@ -158,3 +168,57 @@ color: var(--theme-color-weak-text); } } + +@mixin toggle-variant($selector) { + :host(#{$selector}:not(.disabled)) { + .slider { + @content; + } + } +} + +@mixin define-toggle-vars($state, $type) { + --theme-switch-#{$state}--background: var(--theme-switch-#{$state}--background--#{$type}); + --theme-switch-#{$state}--background--hover: var(--theme-switch-#{$state}--background--#{$type}--hover); + --theme-switch-#{$state}--background--active: var(--theme-switch-#{$state}--background--#{$type}--active); + + --theme-switch-thumb-#{$state}--background: var(--theme-switch-thumb-#{$state}--background--#{$type}); + --theme-switch-thumb-#{$state}--background--hover: var(--theme-switch-thumb-#{$state}--background--#{$type}--hover); + --theme-switch-thumb-#{$state}--background--active: var(--theme-switch-thumb-#{$state}--background--#{$type}--active); + + --theme-switch-#{$state}--border-color: var(--theme-switch-#{$state}--border-color--#{$type}); + --theme-switch-#{$state}--border-color--hover: var(--theme-switch-#{$state}--border-color--#{$type}--hover); + --theme-switch-#{$state}--border-color--active: var(--theme-switch-#{$state}--border-color--#{$type}--active); +} + +@include toggle-variant( + $selector: '.ix-info', +) { + @include define-toggle-vars('off', 'info'); + @include define-toggle-vars('on', 'info'); + @include define-toggle-vars('mixed', 'info'); +} + +@include toggle-variant( + $selector: '.ix-warning', +) { + @include define-toggle-vars('off', 'warning'); + @include define-toggle-vars('on', 'warning'); + @include define-toggle-vars('mixed', 'warning'); +} + +@include toggle-variant( + $selector: '.ix-invalid--required', +) { + @include define-toggle-vars('off', 'invalid'); + @include define-toggle-vars('on', 'invalid'); + @include define-toggle-vars('mixed', 'invalid'); +} + +@include toggle-variant( + $selector: '.ix-invalid', +) { + @include define-toggle-vars('off', 'invalid'); + @include define-toggle-vars('on', 'invalid'); + @include define-toggle-vars('mixed', 'invalid'); +} diff --git a/packages/core/src/components/toggle/toggle.tsx b/packages/core/src/components/toggle/toggle.tsx index 161ece2045a..04cb8035c60 100644 --- a/packages/core/src/components/toggle/toggle.tsx +++ b/packages/core/src/components/toggle/toggle.tsx @@ -8,6 +8,7 @@ */ import { + AttachInternals, Component, Element, Event, @@ -15,18 +16,37 @@ import { Fragment, h, Host, + Method, Prop, + Watch, } from '@stencil/core'; import { a11yBoolean } from '../utils/a11y'; +import { IxFormComponent } from '../utils/input'; +/** + * @form-ready 2.6.0 + * */ @Component({ tag: 'ix-toggle', styleUrl: 'toggle.scss', shadow: true, + formAssociated: true, }) -export class Toggle { +export class Toggle implements IxFormComponent { + @AttachInternals() formInternals!: ElementInternals; + @Element() hostElement!: HTMLIxToggleElement; + /** + * Name of the checkbox component + */ + @Prop({ reflect: true }) name?: string; + + /** + * Value of the checkbox component + */ + @Prop({ reflect: true }) value: string = 'on'; + /** * Whether the slide-toggle element is checked or not. */ @@ -62,10 +82,20 @@ export class Toggle { */ @Prop() hideText = false; + /** + * Required state of the checkbox component. + * + * If true, checkbox needs to be checked to be valid + */ + @Prop({ reflect: true }) required = false; + /** * An event will be dispatched each time the slide-toggle changes its value. */ - @Event() checkedChange: EventEmitter; + @Event() checkedChange!: EventEmitter; + + /** @internal */ + @Event() valueChange!: EventEmitter; onCheckedChange(newChecked: boolean) { if (this.indeterminate) { @@ -75,6 +105,35 @@ export class Toggle { this.checkedChange.emit(this.checked); } + componentWillLoad() { + this.updateFormInternalValue(); + } + + updateFormInternalValue(): void { + if (this.checked) { + this.formInternals.setFormValue(this.value); + } else { + this.formInternals.setFormValue(null); + } + } + + @Watch('checked') + watchCheckedChange() { + this.updateFormInternalValue(); + } + + /** @internal */ + @Method() + hasValidValue(): Promise { + return Promise.resolve(this.checked); + } + + /** @internal */ + @Method() + getAssociatedFormElement(): Promise { + return Promise.resolve(this.formInternals.form); + } + render() { return ( - this.onCheckedChange((event.target as any).checked) + this.onCheckedChange((event.target as HTMLInputElement).checked) } >