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/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-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/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 @@
+
+
+;
+
+ 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-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: `
-
- `,
+ 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 @@
+
+
+
+ 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-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/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/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-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 @@
+
+
+>;
+ /**
+ * 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: '>;
+ /**
+ * 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: '>;
+ /**
+ * 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: '>;
+ /**
+ * 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: '>;
+ /**
+ * 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: '>;
+}
+
+
@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: '>;
+ /**
+ * 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: '>;
+ /**
+ * 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: '(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