From 9ad047eaefb40d3d362bd7dd89fa98bdab359eb3 Mon Sep 17 00:00:00 2001 From: fortesp Date: Wed, 18 Jun 2025 15:30:13 +0200 Subject: [PATCH 01/32] feat: Added new component six-breadcrumbs --- .../src/lib/stencil-generated/components.ts | 166 +++++++---- .../src/lib/stencil-generated/index.ts | 2 + .../src/lib/stencil-generated/components.ts | 282 +++++++++--------- .../src/lib/stencil-generated/components.ts | 269 +++++------------ libraries/ui-library/src/components.d.ts | 71 +++++ .../components/six-breadcrumbs-item/readme.md | 38 +++ .../six-breadcrumb-item.scss | 18 ++ .../six-breadcrumb-item.tsx | 31 ++ .../test/six-breadcrumb-item.spec.tsx | 38 +++ .../src/components/six-breadcrumbs/index.html | 69 +++++ .../src/components/six-breadcrumbs/readme.md | 30 ++ .../six-breadcrumbs/six-breadcrumbs.scss | 55 ++++ .../six-breadcrumbs/six-breadcrumbs.tsx | 28 ++ .../test/six-breadcrumbs.spec.tsx | 39 +++ .../src/components/six-breadcrumbs/types.ts | 6 + .../src/components/six-date/readme.md | 41 +-- .../src/components/six-datepicker/readme.md | 58 ++-- .../src/components/six-dropdown/readme.md | 4 +- .../src/components/six-error-page/readme.md | 14 +- .../src/components/six-item-picker/readme.md | 2 +- .../six-language-switcher/readme.md | 8 +- .../src/components/six-menu/readme.md | 2 +- .../src/components/six-range/readme.md | 32 +- .../src/components/six-select/readme.md | 2 +- 24 files changed, 832 insertions(+), 473 deletions(-) create mode 100644 libraries/ui-library/src/components/six-breadcrumbs-item/readme.md create mode 100644 libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumb-item.scss create mode 100644 libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumb-item.tsx create mode 100644 libraries/ui-library/src/components/six-breadcrumbs-item/test/six-breadcrumb-item.spec.tsx create mode 100644 libraries/ui-library/src/components/six-breadcrumbs/index.html create mode 100644 libraries/ui-library/src/components/six-breadcrumbs/readme.md create mode 100644 libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.scss create mode 100644 libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.tsx create mode 100644 libraries/ui-library/src/components/six-breadcrumbs/test/six-breadcrumbs.spec.tsx create mode 100644 libraries/ui-library/src/components/six-breadcrumbs/types.ts diff --git a/libraries/ui-library-angular/src/lib/stencil-generated/components.ts b/libraries/ui-library-angular/src/lib/stencil-generated/components.ts index 866abed76..7a5d13633 100644 --- a/libraries/ui-library-angular/src/lib/stencil-generated/components.ts +++ b/libraries/ui-library-angular/src/lib/stencil-generated/components.ts @@ -20,7 +20,7 @@ import { Components } from '@six-group/ui-library'; standalone: false }) export class SixAlert { - protected el: HTMLSixAlertElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -63,7 +63,7 @@ export declare interface SixAlert extends Components.SixAlert { standalone: false }) export class SixAvatar { - protected el: HTMLSixAvatarElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -86,7 +86,7 @@ export declare interface SixAvatar extends Components.SixAvatar {} standalone: false }) export class SixBadge { - protected el: HTMLSixBadgeElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -97,6 +97,58 @@ export class SixBadge { export declare interface SixBadge extends Components.SixBadge {} +@ProxyCmp({ + inputs: ['disabled', 'name'] +}) +@Component({ + selector: 'six-breadcrumb-item', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['disabled', 'name'], +}) +export class SixBreadcrumbItem { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + proxyOutputs(this, this.el, ['sixClick']); + } +} + + +import type { EmptyPayload as ISixBreadcrumbItemEmptyPayload } from '@six-group/ui-library'; + +export declare interface SixBreadcrumbItem extends Components.SixBreadcrumbItem { + /** + * Emitted on click. + */ + sixClick: EventEmitter>; +} + + +@ProxyCmp({ + inputs: ['data'] +}) +@Component({ + selector: 'six-breadcrumbs', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['data'], +}) +export class SixBreadcrumbs { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface SixBreadcrumbs extends Components.SixBreadcrumbs {} + + @ProxyCmp({ inputs: ['caret', 'circle', 'disabled', 'download', 'href', 'loading', 'name', 'pill', 'reset', 'size', 'submit', 'target', 'type', 'value'], methods: ['setFocus', 'removeFocus'] @@ -110,7 +162,7 @@ export declare interface SixBadge extends Components.SixBadge {} standalone: false }) export class SixButton { - protected el: HTMLSixButtonElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -144,7 +196,7 @@ export declare interface SixButton extends Components.SixButton { standalone: false }) export class SixCard { - protected el: HTMLSixCardElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -168,7 +220,7 @@ export declare interface SixCard extends Components.SixCard {} standalone: false }) export class SixCheckbox { - protected el: HTMLSixCheckboxElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -208,7 +260,7 @@ export declare interface SixCheckbox extends Components.SixCheckbox { standalone: false }) export class SixDate { - protected el: HTMLSixDateElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -244,7 +296,7 @@ Does not contain event details. standalone: false }) export class SixDatepicker { - protected el: HTMLSixDatepickerElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -285,7 +337,7 @@ export declare interface SixDatepicker extends Components.SixDatepicker { standalone: false }) export class SixDetails { - protected el: HTMLSixDetailsElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -329,7 +381,7 @@ export declare interface SixDetails extends Components.SixDetails { standalone: false }) export class SixDialog { - protected el: HTMLSixDialogElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -385,7 +437,7 @@ the drawer will result in destructive behavior such as data loss. standalone: false }) export class SixDrawer { - protected el: HTMLSixDrawerElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -441,7 +493,7 @@ the drawer will result in destructive behavior such as data loss. standalone: false }) export class SixDropdown { - protected el: HTMLSixDropdownElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -498,7 +550,7 @@ export declare interface SixDropdown extends Components.SixDropdown { standalone: false }) export class SixError { - protected el: HTMLSixErrorElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -521,7 +573,7 @@ export declare interface SixError extends Components.SixError {} standalone: false }) export class SixErrorPage { - protected el: HTMLSixErrorPageElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -543,7 +595,7 @@ export declare interface SixErrorPage extends Components.SixErrorPage {} standalone: false }) export class SixFileList { - protected el: HTMLSixFileListElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -566,7 +618,7 @@ export declare interface SixFileList extends Components.SixFileList {} standalone: false }) export class SixFileListItem { - protected el: HTMLSixFileListItemElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -602,7 +654,7 @@ export declare interface SixFileListItem extends Components.SixFileListItem { standalone: false }) export class SixFileUpload { - protected el: HTMLSixFileUploadElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -637,7 +689,7 @@ export declare interface SixFileUpload extends Components.SixFileUpload { standalone: false }) export class SixFooter { - protected el: HTMLSixFooterElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -660,7 +712,7 @@ export declare interface SixFooter extends Components.SixFooter {} standalone: false }) export class SixGroupLabel { - protected el: HTMLSixGroupLabelElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -683,7 +735,7 @@ export declare interface SixGroupLabel extends Components.SixGroupLabel {} standalone: false }) export class SixHeader { - protected el: HTMLSixHeaderElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -706,7 +758,7 @@ export declare interface SixHeader extends Components.SixHeader {} standalone: false }) export class SixHeaderDropdownItem { - protected el: HTMLSixHeaderDropdownItemElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -729,7 +781,7 @@ export declare interface SixHeaderDropdownItem extends Components.SixHeaderDropd standalone: false }) export class SixHeaderItem { - protected el: HTMLSixHeaderItemElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -752,7 +804,7 @@ export declare interface SixHeaderItem extends Components.SixHeaderItem {} standalone: false }) export class SixHeaderMenuButton { - protected el: HTMLSixHeaderMenuButtonElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -775,7 +827,7 @@ export declare interface SixHeaderMenuButton extends Components.SixHeaderMenuBut standalone: false }) export class SixIcon { - protected el: HTMLSixIconElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -798,7 +850,7 @@ export declare interface SixIcon extends Components.SixIcon {} standalone: false }) export class SixIconButton { - protected el: HTMLSixIconButtonElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -822,7 +874,7 @@ export declare interface SixIconButton extends Components.SixIconButton {} standalone: false }) export class SixInput { - protected el: HTMLSixInputElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -869,7 +921,7 @@ export declare interface SixInput extends Components.SixInput { standalone: false }) export class SixItemPicker { - protected el: HTMLSixItemPickerElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -904,7 +956,7 @@ export declare interface SixItemPicker extends Components.SixItemPicker { standalone: false }) export class SixLanguageSwitcher { - protected el: HTMLSixLanguageSwitcherElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -935,7 +987,7 @@ export declare interface SixLanguageSwitcher extends Components.SixLanguageSwitc standalone: false }) export class SixLayoutGrid { - protected el: HTMLSixLayoutGridElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -958,7 +1010,7 @@ export declare interface SixLayoutGrid extends Components.SixLayoutGrid {} standalone: false }) export class SixLogo { - protected el: HTMLSixLogoElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -981,7 +1033,7 @@ export declare interface SixLogo extends Components.SixLogo {} standalone: false }) export class SixMainContainer { - protected el: HTMLSixMainContainerElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1005,7 +1057,7 @@ export declare interface SixMainContainer extends Components.SixMainContainer {} standalone: false }) export class SixMenu { - protected el: HTMLSixMenuElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1035,7 +1087,7 @@ export declare interface SixMenu extends Components.SixMenu { standalone: false }) export class SixMenuDivider { - protected el: HTMLSixMenuDividerElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1059,7 +1111,7 @@ export declare interface SixMenuDivider extends Components.SixMenuDivider {} standalone: false }) export class SixMenuItem { - protected el: HTMLSixMenuItemElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1081,7 +1133,7 @@ export declare interface SixMenuItem extends Components.SixMenuItem {} standalone: false }) export class SixMenuLabel { - protected el: HTMLSixMenuLabelElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1104,7 +1156,7 @@ export declare interface SixMenuLabel extends Components.SixMenuLabel {} standalone: false }) export class SixPicto { - protected el: HTMLSixPictoElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1127,7 +1179,7 @@ export declare interface SixPicto extends Components.SixPicto {} standalone: false }) export class SixProgressBar { - protected el: HTMLSixProgressBarElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1150,7 +1202,7 @@ export declare interface SixProgressBar extends Components.SixProgressBar {} standalone: false }) export class SixProgressRing { - protected el: HTMLSixProgressRingElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1174,7 +1226,7 @@ export declare interface SixProgressRing extends Components.SixProgressRing {} standalone: false }) export class SixRadio { - protected el: HTMLSixRadioElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1214,7 +1266,7 @@ export declare interface SixRadio extends Components.SixRadio { standalone: false }) export class SixRange { - protected el: HTMLSixRangeElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1292,7 +1344,7 @@ export declare interface SixRating extends Components.SixRating { standalone: false }) export class SixRoot { - protected el: HTMLSixRootElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1315,7 +1367,7 @@ export declare interface SixRoot extends Components.SixRoot {} standalone: false }) export class SixSearchField { - protected el: HTMLSixSearchFieldElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1347,7 +1399,7 @@ export declare interface SixSearchField extends Components.SixSearchField { standalone: false }) export class SixSelect { - protected el: HTMLSixSelectElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1388,7 +1440,7 @@ export declare interface SixSelect extends Components.SixSelect { standalone: false }) export class SixSidebar { - protected el: HTMLSixSidebarElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1436,7 +1488,7 @@ allow you to set it on a different element in the sidebar, such as an input or b standalone: false }) export class SixSidebarItem { - protected el: HTMLSixSidebarItemElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1459,7 +1511,7 @@ export declare interface SixSidebarItem extends Components.SixSidebarItem {} standalone: false }) export class SixSidebarItemGroup { - protected el: HTMLSixSidebarItemGroupElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1482,7 +1534,7 @@ export declare interface SixSidebarItemGroup extends Components.SixSidebarItemGr standalone: false }) export class SixSpinner { - protected el: HTMLSixSpinnerElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1505,7 +1557,7 @@ export declare interface SixSpinner extends Components.SixSpinner {} standalone: false }) export class SixStageIndicator { - protected el: HTMLSixStageIndicatorElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1529,7 +1581,7 @@ export declare interface SixStageIndicator extends Components.SixStageIndicator standalone: false }) export class SixSwitch { - protected el: HTMLSixSwitchElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1569,7 +1621,7 @@ export declare interface SixSwitch extends Components.SixSwitch { standalone: false }) export class SixTab { - protected el: HTMLSixTabElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1601,7 +1653,7 @@ export declare interface SixTab extends Components.SixTab { standalone: false }) export class SixTabGroup { - protected el: HTMLSixTabGroupElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1637,7 +1689,7 @@ export declare interface SixTabGroup extends Components.SixTabGroup { standalone: false }) export class SixTabPanel { - protected el: HTMLSixTabPanelElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1660,7 +1712,7 @@ export declare interface SixTabPanel extends Components.SixTabPanel {} standalone: false }) export class SixTag { - protected el: HTMLSixTagElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1692,7 +1744,7 @@ export declare interface SixTag extends Components.SixTag { standalone: false }) export class SixTextarea { - protected el: HTMLSixTextareaElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1736,7 +1788,7 @@ export declare interface SixTextarea extends Components.SixTextarea { standalone: false }) export class SixTile { - protected el: HTMLSixTileElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1772,7 +1824,7 @@ export declare interface SixTile extends Components.SixTile { standalone: false }) export class SixTimepicker { - protected el: HTMLSixTimepickerElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; @@ -1813,7 +1865,7 @@ export declare interface SixTimepicker extends Components.SixTimepicker { standalone: false }) export class SixTooltip { - protected el: HTMLSixTooltipElement; + protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; diff --git a/libraries/ui-library-angular/src/lib/stencil-generated/index.ts b/libraries/ui-library-angular/src/lib/stencil-generated/index.ts index 77241f963..760120420 100644 --- a/libraries/ui-library-angular/src/lib/stencil-generated/index.ts +++ b/libraries/ui-library-angular/src/lib/stencil-generated/index.ts @@ -5,6 +5,8 @@ export const DIRECTIVES = [ d.SixAlert, d.SixAvatar, d.SixBadge, + d.SixBreadcrumbItem, + d.SixBreadcrumbs, d.SixButton, d.SixCard, d.SixCheckbox, diff --git a/libraries/ui-library-react/src/lib/stencil-generated/components.ts b/libraries/ui-library-react/src/lib/stencil-generated/components.ts index 997afddcf..fd356857c 100644 --- a/libraries/ui-library-react/src/lib/stencil-generated/components.ts +++ b/libraries/ui-library-react/src/lib/stencil-generated/components.ts @@ -7,10 +7,12 @@ /* eslint-disable */ -import { type EmptyPayload, type SixAlertCustomEvent, type SixButtonCustomEvent, type SixCheckboxCustomEvent, type SixDatepickerCustomEvent, type SixDatepickerSelectPayload, type SixDetailsCustomEvent, type SixDialogCustomEvent, type SixDialogRequestClose, type SixDrawerCustomEvent, type SixDrawerRequestClose, type SixDropdownAsyncFilterPayload, type SixDropdownAutoFilterPayload, type SixDropdownCustomEvent, type SixDropdownScrollPayload, type SixFileListDownloadPayload, type SixFileListItemCustomEvent, type SixFileListRemovePayload, type SixFileUploadCustomEvent, type SixFileUploadFailurePayload, type SixFileUploadSuccessPayload, type SixInputCustomEvent, type SixItemPickerChangePayload, type SixItemPickerCustomEvent, type SixLanguageSwitcherChangePayload, type SixLanguageSwitcherCustomEvent, type SixMenuCustomEvent, type SixMenuItemSelectedPayload, type SixRadioCustomEvent, type SixRangeCustomEvent, type SixRatingCustomEvent, type SixSearchFieldChangePayload, type SixSearchFieldCustomEvent, type SixSelectChangePayload, type SixSelectCustomEvent, type SixSidebarCustomEvent, type SixSwitchCustomEvent, type SixTabCustomEvent, type SixTabGroupCustomEvent, type SixTabHidePayload, type SixTabShowPayload, type SixTagCustomEvent, type SixTextareaCustomEvent, type SixTileCustomEvent, type SixTimepickerChange, type SixTimepickerCustomEvent, type SixTooltipCustomEvent } from "@six-group/ui-library"; +import { type EmptyPayload, type SixAlertCustomEvent, type SixBreadcrumbItemCustomEvent, type SixButtonCustomEvent, type SixCheckboxCustomEvent, type SixDatepickerCustomEvent, type SixDatepickerSelectPayload, type SixDetailsCustomEvent, type SixDialogCustomEvent, type SixDrawerCustomEvent, type SixDropdownAsyncFilterPayload, type SixDropdownAutoFilterPayload, type SixDropdownCustomEvent, type SixDropdownScrollPayload, type SixFileListDownloadPayload, type SixFileListItemCustomEvent, type SixFileListRemovePayload, type SixFileUploadCustomEvent, type SixFileUploadFailurePayload, type SixFileUploadSuccessPayload, type SixInputCustomEvent, type SixItemPickerChangePayload, type SixItemPickerCustomEvent, type SixLanguageSwitcherChangePayload, type SixLanguageSwitcherCustomEvent, type SixMenuCustomEvent, type SixMenuItemSelectedPayload, type SixRadioCustomEvent, type SixRangeCustomEvent, type SixSearchFieldChangePayload, type SixSearchFieldCustomEvent, type SixSelectChangePayload, type SixSelectCustomEvent, type SixSidebarCustomEvent, type SixSwitchCustomEvent, type SixTabCustomEvent, type SixTabGroupCustomEvent, type SixTabHidePayload, type SixTabShowPayload, type SixTagCustomEvent, type SixTextareaCustomEvent, type SixTileCustomEvent, type SixTimepickerChange, type SixTimepickerCustomEvent, type SixTooltipCustomEvent } from "@six-group/ui-library"; import { SixAlert as SixAlertElement, defineCustomElement as defineSixAlert } from "@six-group/ui-library/dist/components/six-alert.js"; import { SixAvatar as SixAvatarElement, defineCustomElement as defineSixAvatar } from "@six-group/ui-library/dist/components/six-avatar.js"; import { SixBadge as SixBadgeElement, defineCustomElement as defineSixBadge } from "@six-group/ui-library/dist/components/six-badge.js"; +import { SixBreadcrumbItem as SixBreadcrumbItemElement, defineCustomElement as defineSixBreadcrumbItem } from "@six-group/ui-library/dist/components/six-breadcrumb-item.js"; +import { SixBreadcrumbs as SixBreadcrumbsElement, defineCustomElement as defineSixBreadcrumbs } from "@six-group/ui-library/dist/components/six-breadcrumbs.js"; import { SixButton as SixButtonElement, defineCustomElement as defineSixButton } from "@six-group/ui-library/dist/components/six-button.js"; import { SixCard as SixCardElement, defineCustomElement as defineSixCard } from "@six-group/ui-library/dist/components/six-card.js"; import { SixCheckbox as SixCheckboxElement, defineCustomElement as defineSixCheckbox } from "@six-group/ui-library/dist/components/six-checkbox.js"; @@ -48,7 +50,6 @@ import { SixProgressBar as SixProgressBarElement, defineCustomElement as defineS import { SixProgressRing as SixProgressRingElement, defineCustomElement as defineSixProgressRing } from "@six-group/ui-library/dist/components/six-progress-ring.js"; import { SixRadio as SixRadioElement, defineCustomElement as defineSixRadio } from "@six-group/ui-library/dist/components/six-radio.js"; import { SixRange as SixRangeElement, defineCustomElement as defineSixRange } from "@six-group/ui-library/dist/components/six-range.js"; -import { SixRating as SixRatingElement, defineCustomElement as defineSixRating } from "@six-group/ui-library/dist/components/six-rating.js"; import { SixRoot as SixRootElement, defineCustomElement as defineSixRoot } from "@six-group/ui-library/dist/components/six-root.js"; import { SixSearchField as SixSearchFieldElement, defineCustomElement as defineSixSearchField } from "@six-group/ui-library/dist/components/six-search-field.js"; import { SixSelect as SixSelectElement, defineCustomElement as defineSixSelect } from "@six-group/ui-library/dist/components/six-select.js"; @@ -70,7 +71,7 @@ import type { EventName, StencilReactComponent } from '@stencil/react-output-tar import { createComponent } from '@stencil/react-output-target/runtime'; import React from 'react'; -export type SixAlertEvents = { +type SixAlertEvents = { onSixAlertShow: EventName>, onSixAlertAfterShow: EventName>, onSixAlertHide: EventName>, @@ -80,7 +81,7 @@ export type SixAlertEvents = { export const SixAlert: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-alert', elementClass: SixAlertElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixAlertShow: 'six-alert-show', @@ -91,29 +92,51 @@ export const SixAlert: StencilReactComponent = defineCustomElement: defineSixAlert }); -export type SixAvatarEvents = NonNullable; +type SixAvatarEvents = NonNullable; export const SixAvatar: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-avatar', elementClass: SixAvatarElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixAvatarEvents, defineCustomElement: defineSixAvatar }); -export type SixBadgeEvents = NonNullable; +type SixBadgeEvents = NonNullable; export const SixBadge: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-badge', elementClass: SixBadgeElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixBadgeEvents, defineCustomElement: defineSixBadge }); -export type SixButtonEvents = { +type SixBreadcrumbItemEvents = { onSixClick: EventName> }; + +export const SixBreadcrumbItem: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'six-breadcrumb-item', + elementClass: SixBreadcrumbItemElement, + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. + react: React, + events: { onSixClick: 'sixClick' } as SixBreadcrumbItemEvents, + defineCustomElement: defineSixBreadcrumbItem +}); + +type SixBreadcrumbsEvents = NonNullable; + +export const SixBreadcrumbs: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'six-breadcrumbs', + elementClass: SixBreadcrumbsElement, + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. + react: React, + events: {} as SixBreadcrumbsEvents, + defineCustomElement: defineSixBreadcrumbs +}); + +type SixButtonEvents = { onSixButtonBlur: EventName>, onSixButtonFocus: EventName> }; @@ -121,7 +144,7 @@ export type SixButtonEvents = { export const SixButton: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-button', elementClass: SixButtonElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixButtonBlur: 'six-button-blur', @@ -130,18 +153,18 @@ export const SixButton: StencilReactComponent defineCustomElement: defineSixButton }); -export type SixCardEvents = NonNullable; +type SixCardEvents = NonNullable; export const SixCard: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-card', elementClass: SixCardElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixCardEvents, defineCustomElement: defineSixCard }); -export type SixCheckboxEvents = { +type SixCheckboxEvents = { onSixCheckboxBlur: EventName>, onSixCheckboxChange: EventName>, onSixCheckboxFocus: EventName> @@ -150,7 +173,7 @@ export type SixCheckboxEvents = { export const SixCheckbox: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-checkbox', elementClass: SixCheckboxElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixCheckboxBlur: 'six-checkbox-blur', @@ -160,7 +183,7 @@ export const SixCheckbox: StencilReactComponent>, onSixBlur: EventName> }; @@ -168,7 +191,7 @@ export type SixDateEvents = { export const SixDate: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-date', elementClass: SixDateElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixChange: 'six-change', @@ -177,7 +200,7 @@ export const SixDate: StencilReactComponent = /*@ defineCustomElement: defineSixDate }); -export type SixDatepickerEvents = { +type SixDatepickerEvents = { onSixDatepickerSelect: EventName>, onSixDatepickerClear: EventName>, onSixDatepickerBlur: EventName> @@ -186,7 +209,7 @@ export type SixDatepickerEvents = { export const SixDatepicker: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-datepicker', elementClass: SixDatepickerElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixDatepickerSelect: 'six-datepicker-select', @@ -196,7 +219,7 @@ export const SixDatepicker: StencilReactComponent>, onSixDetailsAfterShow: EventName>, onSixDetailsHide: EventName>, @@ -206,7 +229,7 @@ export type SixDetailsEvents = { export const SixDetails: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-details', elementClass: SixDetailsElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixDetailsShow: 'six-details-show', @@ -217,19 +240,19 @@ export const SixDetails: StencilReactComponent>, onSixDialogAfterShow: EventName>, onSixDialogHide: EventName>, onSixDialogAfterHide: EventName>, onSixDialogInitialFocus: EventName>, - onSixDialogRequestClose: EventName> + onSixDialogOverlayDismiss: EventName> }; export const SixDialog: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-dialog', elementClass: SixDialogElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixDialogShow: 'six-dialog-show', @@ -237,24 +260,24 @@ export const SixDialog: StencilReactComponent onSixDialogHide: 'six-dialog-hide', onSixDialogAfterHide: 'six-dialog-after-hide', onSixDialogInitialFocus: 'six-dialog-initial-focus', - onSixDialogRequestClose: 'six-dialog-request-close' + onSixDialogOverlayDismiss: 'six-dialog-overlay-dismiss' } as SixDialogEvents, defineCustomElement: defineSixDialog }); -export type SixDrawerEvents = { +type SixDrawerEvents = { onSixDrawerShow: EventName>, onSixDrawerAfterShow: EventName>, onSixDrawerHide: EventName>, onSixDrawerAfterHide: EventName>, onSixDrawerInitialFocus: EventName>, - onSixDrawerRequestClose: EventName> + onSixDrawerOverlayDismiss: EventName> }; export const SixDrawer: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-drawer', elementClass: SixDrawerElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixDrawerShow: 'six-drawer-show', @@ -262,12 +285,12 @@ export const SixDrawer: StencilReactComponent onSixDrawerHide: 'six-drawer-hide', onSixDrawerAfterHide: 'six-drawer-after-hide', onSixDrawerInitialFocus: 'six-drawer-initial-focus', - onSixDrawerRequestClose: 'six-drawer-request-close' + onSixDrawerOverlayDismiss: 'six-drawer-overlay-dismiss' } as SixDrawerEvents, defineCustomElement: defineSixDrawer }); -export type SixDropdownEvents = { +type SixDropdownEvents = { onSixDropdownShow: EventName>, onSixDropdownAfterShow: EventName>, onSixDropdownHide: EventName>, @@ -280,7 +303,7 @@ export type SixDropdownEvents = { export const SixDropdown: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-dropdown', elementClass: SixDropdownElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixDropdownShow: 'six-dropdown-show', @@ -294,40 +317,40 @@ export const SixDropdown: StencilReactComponent; +type SixErrorEvents = NonNullable; export const SixError: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-error', elementClass: SixErrorElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixErrorEvents, defineCustomElement: defineSixError }); -export type SixErrorPageEvents = NonNullable; +type SixErrorPageEvents = NonNullable; export const SixErrorPage: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-error-page', elementClass: SixErrorPageElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixErrorPageEvents, defineCustomElement: defineSixErrorPage }); -export type SixFileListEvents = NonNullable; +type SixFileListEvents = NonNullable; export const SixFileList: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-file-list', elementClass: SixFileListElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixFileListEvents, defineCustomElement: defineSixFileList }); -export type SixFileListItemEvents = { +type SixFileListItemEvents = { onSixFileListItemDownload: EventName>, onSixFileListItemRemove: EventName> }; @@ -335,7 +358,7 @@ export type SixFileListItemEvents = { export const SixFileListItem: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-file-list-item', elementClass: SixFileListItemElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixFileListItemDownload: 'six-file-list-item-download', @@ -344,7 +367,7 @@ export const SixFileListItem: StencilReactComponent>, onSixFileUploadFailure: EventName> }; @@ -352,7 +375,7 @@ export type SixFileUploadEvents = { export const SixFileUpload: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-file-upload', elementClass: SixFileUploadElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixFileUploadSuccess: 'six-file-upload-success', @@ -361,95 +384,95 @@ export const SixFileUpload: StencilReactComponent; +type SixFooterEvents = NonNullable; export const SixFooter: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-footer', elementClass: SixFooterElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixFooterEvents, defineCustomElement: defineSixFooter }); -export type SixGroupLabelEvents = NonNullable; +type SixGroupLabelEvents = NonNullable; export const SixGroupLabel: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-group-label', elementClass: SixGroupLabelElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixGroupLabelEvents, defineCustomElement: defineSixGroupLabel }); -export type SixHeaderEvents = NonNullable; +type SixHeaderEvents = NonNullable; export const SixHeader: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-header', elementClass: SixHeaderElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixHeaderEvents, defineCustomElement: defineSixHeader }); -export type SixHeaderDropdownItemEvents = NonNullable; +type SixHeaderDropdownItemEvents = NonNullable; export const SixHeaderDropdownItem: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-header-dropdown-item', elementClass: SixHeaderDropdownItemElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixHeaderDropdownItemEvents, defineCustomElement: defineSixHeaderDropdownItem }); -export type SixHeaderItemEvents = NonNullable; +type SixHeaderItemEvents = NonNullable; export const SixHeaderItem: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-header-item', elementClass: SixHeaderItemElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixHeaderItemEvents, defineCustomElement: defineSixHeaderItem }); -export type SixHeaderMenuButtonEvents = NonNullable; +type SixHeaderMenuButtonEvents = NonNullable; export const SixHeaderMenuButton: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-header-menu-button', elementClass: SixHeaderMenuButtonElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixHeaderMenuButtonEvents, defineCustomElement: defineSixHeaderMenuButton }); -export type SixIconEvents = NonNullable; +type SixIconEvents = NonNullable; export const SixIcon: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-icon', elementClass: SixIconElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixIconEvents, defineCustomElement: defineSixIcon }); -export type SixIconButtonEvents = NonNullable; +type SixIconButtonEvents = NonNullable; export const SixIconButton: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-icon-button', elementClass: SixIconButtonElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixIconButtonEvents, defineCustomElement: defineSixIconButton }); -export type SixInputEvents = { +type SixInputEvents = { onSixInputChange: EventName>, onSixInputClear: EventName>, onSixInputInput: EventName>, @@ -460,7 +483,7 @@ export type SixInputEvents = { export const SixInput: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-input', elementClass: SixInputElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixInputChange: 'six-input-change', @@ -472,7 +495,7 @@ export const SixInput: StencilReactComponent = defineCustomElement: defineSixInput }); -export type SixItemPickerEvents = { +type SixItemPickerEvents = { onSixItemPickerChange: EventName>, onSixItemPickerChangeDebounced: EventName> }; @@ -480,7 +503,7 @@ export type SixItemPickerEvents = { export const SixItemPicker: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-item-picker', elementClass: SixItemPickerElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixItemPickerChange: 'six-item-picker-change', @@ -489,128 +512,128 @@ export const SixItemPicker: StencilReactComponent> }; +type SixLanguageSwitcherEvents = { onSixLanguageSwitcherChange: EventName> }; export const SixLanguageSwitcher: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-language-switcher', elementClass: SixLanguageSwitcherElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixLanguageSwitcherChange: 'six-language-switcher-change' } as SixLanguageSwitcherEvents, defineCustomElement: defineSixLanguageSwitcher }); -export type SixLayoutGridEvents = NonNullable; +type SixLayoutGridEvents = NonNullable; export const SixLayoutGrid: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-layout-grid', elementClass: SixLayoutGridElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixLayoutGridEvents, defineCustomElement: defineSixLayoutGrid }); -export type SixLogoEvents = NonNullable; +type SixLogoEvents = NonNullable; export const SixLogo: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-logo', elementClass: SixLogoElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixLogoEvents, defineCustomElement: defineSixLogo }); -export type SixMainContainerEvents = NonNullable; +type SixMainContainerEvents = NonNullable; export const SixMainContainer: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-main-container', elementClass: SixMainContainerElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixMainContainerEvents, defineCustomElement: defineSixMainContainer }); -export type SixMenuEvents = { onSixMenuItemSelected: EventName> }; +type SixMenuEvents = { onSixMenuItemSelected: EventName> }; export const SixMenu: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-menu', elementClass: SixMenuElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixMenuItemSelected: 'six-menu-item-selected' } as SixMenuEvents, defineCustomElement: defineSixMenu }); -export type SixMenuDividerEvents = NonNullable; +type SixMenuDividerEvents = NonNullable; export const SixMenuDivider: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-menu-divider', elementClass: SixMenuDividerElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixMenuDividerEvents, defineCustomElement: defineSixMenuDivider }); -export type SixMenuItemEvents = NonNullable; +type SixMenuItemEvents = NonNullable; export const SixMenuItem: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-menu-item', elementClass: SixMenuItemElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixMenuItemEvents, defineCustomElement: defineSixMenuItem }); -export type SixMenuLabelEvents = NonNullable; +type SixMenuLabelEvents = NonNullable; export const SixMenuLabel: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-menu-label', elementClass: SixMenuLabelElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixMenuLabelEvents, defineCustomElement: defineSixMenuLabel }); -export type SixPictoEvents = NonNullable; +type SixPictoEvents = NonNullable; export const SixPicto: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-picto', elementClass: SixPictoElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixPictoEvents, defineCustomElement: defineSixPicto }); -export type SixProgressBarEvents = NonNullable; +type SixProgressBarEvents = NonNullable; export const SixProgressBar: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-progress-bar', elementClass: SixProgressBarElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixProgressBarEvents, defineCustomElement: defineSixProgressBar }); -export type SixProgressRingEvents = NonNullable; +type SixProgressRingEvents = NonNullable; export const SixProgressRing: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-progress-ring', elementClass: SixProgressRingElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixProgressRingEvents, defineCustomElement: defineSixProgressRing }); -export type SixRadioEvents = { +type SixRadioEvents = { onSixRadioBlur: EventName>, onSixRadioChange: EventName>, onSixRadioFocus: EventName> @@ -619,7 +642,7 @@ export type SixRadioEvents = { export const SixRadio: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-radio', elementClass: SixRadioElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixRadioBlur: 'six-radio-blur', @@ -629,7 +652,7 @@ export const SixRadio: StencilReactComponent = defineCustomElement: defineSixRadio }); -export type SixRangeEvents = { +type SixRangeEvents = { onSixRangeChange: EventName>, onSixRangeBlur: EventName>, onSixRangeFocus: EventName> @@ -638,7 +661,7 @@ export type SixRangeEvents = { export const SixRange: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-range', elementClass: SixRangeElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixRangeChange: 'six-range-change', @@ -648,48 +671,29 @@ export const SixRange: StencilReactComponent = defineCustomElement: defineSixRange }); -export type SixRatingEvents = { - onSixRatingBlur: EventName>, - onSixRatingChange: EventName>, - onSixRatingFocus: EventName> -}; - -export const SixRating: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'six-rating', - elementClass: SixRatingElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: { - onSixRatingBlur: 'six-rating-blur', - onSixRatingChange: 'six-rating-change', - onSixRatingFocus: 'six-rating-focus' - } as SixRatingEvents, - defineCustomElement: defineSixRating -}); - -export type SixRootEvents = NonNullable; +type SixRootEvents = NonNullable; export const SixRoot: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-root', elementClass: SixRootElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixRootEvents, defineCustomElement: defineSixRoot }); -export type SixSearchFieldEvents = { onSixSearchFieldChange: EventName> }; +type SixSearchFieldEvents = { onSixSearchFieldChange: EventName> }; export const SixSearchField: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-search-field', elementClass: SixSearchFieldElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixSearchFieldChange: 'six-search-field-change' } as SixSearchFieldEvents, defineCustomElement: defineSixSearchField }); -export type SixSelectEvents = { +type SixSelectEvents = { onSixSelectChange: EventName>, onSixSelectFocus: EventName>, onSixSelectBlur: EventName> @@ -698,7 +702,7 @@ export type SixSelectEvents = { export const SixSelect: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-select', elementClass: SixSelectElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixSelectChange: 'six-select-change', @@ -708,7 +712,7 @@ export const SixSelect: StencilReactComponent defineCustomElement: defineSixSelect }); -export type SixSidebarEvents = { +type SixSidebarEvents = { onSixSidebarShow: EventName>, onSixSidebarAfterShow: EventName>, onSixSidebarHide: EventName>, @@ -719,7 +723,7 @@ export type SixSidebarEvents = { export const SixSidebar: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-sidebar', elementClass: SixSidebarElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixSidebarShow: 'six-sidebar-show', @@ -731,51 +735,51 @@ export const SixSidebar: StencilReactComponent; +type SixSidebarItemEvents = NonNullable; export const SixSidebarItem: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-sidebar-item', elementClass: SixSidebarItemElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixSidebarItemEvents, defineCustomElement: defineSixSidebarItem }); -export type SixSidebarItemGroupEvents = NonNullable; +type SixSidebarItemGroupEvents = NonNullable; export const SixSidebarItemGroup: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-sidebar-item-group', elementClass: SixSidebarItemGroupElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixSidebarItemGroupEvents, defineCustomElement: defineSixSidebarItemGroup }); -export type SixSpinnerEvents = NonNullable; +type SixSpinnerEvents = NonNullable; export const SixSpinner: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-spinner', elementClass: SixSpinnerElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixSpinnerEvents, defineCustomElement: defineSixSpinner }); -export type SixStageIndicatorEvents = NonNullable; +type SixStageIndicatorEvents = NonNullable; export const SixStageIndicator: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-stage-indicator', elementClass: SixStageIndicatorElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixStageIndicatorEvents, defineCustomElement: defineSixStageIndicator }); -export type SixSwitchEvents = { +type SixSwitchEvents = { onSixSwitchBlur: EventName>, onSixSwitchChange: EventName>, onSixSwitchFocus: EventName> @@ -784,7 +788,7 @@ export type SixSwitchEvents = { export const SixSwitch: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-switch', elementClass: SixSwitchElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixSwitchBlur: 'six-switch-blur', @@ -794,18 +798,18 @@ export const SixSwitch: StencilReactComponent defineCustomElement: defineSixSwitch }); -export type SixTabEvents = { onSixTabClose: EventName> }; +type SixTabEvents = { onSixTabClose: EventName> }; export const SixTab: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-tab', elementClass: SixTabElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixTabClose: 'six-tab-close' } as SixTabEvents, defineCustomElement: defineSixTab }); -export type SixTabGroupEvents = { +type SixTabGroupEvents = { onSixTabShow: EventName>, onSixTabHide: EventName> }; @@ -813,7 +817,7 @@ export type SixTabGroupEvents = { export const SixTabGroup: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-tab-group', elementClass: SixTabGroupElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixTabShow: 'six-tab-show', @@ -822,29 +826,29 @@ export const SixTabGroup: StencilReactComponent; +type SixTabPanelEvents = NonNullable; export const SixTabPanel: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-tab-panel', elementClass: SixTabPanelElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: {} as SixTabPanelEvents, defineCustomElement: defineSixTabPanel }); -export type SixTagEvents = { onSixTagClear: EventName> }; +type SixTagEvents = { onSixTagClear: EventName> }; export const SixTag: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-tag', elementClass: SixTagElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixTagClear: 'six-tag-clear' } as SixTagEvents, defineCustomElement: defineSixTag }); -export type SixTextareaEvents = { +type SixTextareaEvents = { onSixTextareaChange: EventName>, onSixTextareaInput: EventName>, onSixTextareaFocus: EventName>, @@ -854,7 +858,7 @@ export type SixTextareaEvents = { export const SixTextarea: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-textarea', elementClass: SixTextareaElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixTextareaChange: 'six-textarea-change', @@ -865,7 +869,7 @@ export const SixTextarea: StencilReactComponent>, onSixTileSelected: EventName> }; @@ -873,7 +877,7 @@ export type SixTileEvents = { export const SixTile: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-tile', elementClass: SixTileElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixTileClosed: 'six-tile-closed', @@ -882,7 +886,7 @@ export const SixTile: StencilReactComponent = /*@ defineCustomElement: defineSixTile }); -export type SixTimepickerEvents = { +type SixTimepickerEvents = { onSixTimepickerChange: EventName>, onSixTimepickerChangeDebounced: EventName>, onSixTimepickerClear: EventName> @@ -891,7 +895,7 @@ export type SixTimepickerEvents = { export const SixTimepicker: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-timepicker', elementClass: SixTimepickerElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixTimepickerChange: 'six-timepicker-change', @@ -901,7 +905,7 @@ export const SixTimepicker: StencilReactComponent>, onSixTooltipAfterShow: EventName>, onSixTooltipHide: EventName>, @@ -911,7 +915,7 @@ export type SixTooltipEvents = { export const SixTooltip: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'six-tooltip', elementClass: SixTooltipElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. react: React, events: { onSixTooltipShow: 'six-tooltip-show', diff --git a/libraries/ui-library-vue/src/lib/stencil-generated/components.ts b/libraries/ui-library-vue/src/lib/stencil-generated/components.ts index c6e807ad8..ce7a99775 100644 --- a/libraries/ui-library-vue/src/lib/stencil-generated/components.ts +++ b/libraries/ui-library-vue/src/lib/stencil-generated/components.ts @@ -1,14 +1,14 @@ /* eslint-disable */ /* tslint:disable */ /* auto-generated vue proxies */ -import { defineContainer, type StencilVueComponent } from '@stencil/vue-output-target/runtime'; +import { defineContainer } from './vue-component-lib/utils'; import type { JSX } from '@six-group/ui-library'; -export const SixAlert: StencilVueComponent = /*@__PURE__*/ defineContainer('six-alert', undefined, [ +export const SixAlert = /*@__PURE__*/ defineContainer('six-alert', undefined, [ 'open', 'closable', 'type', @@ -17,15 +17,10 @@ export const SixAlert: StencilVueComponent = /*@__PURE__*/ defineC 'six-alert-after-show', 'six-alert-hide', 'six-alert-after-hide' -], [ - 'six-alert-show', - 'six-alert-after-show', - 'six-alert-hide', - 'six-alert-after-hide' ]); -export const SixAvatar: StencilVueComponent = /*@__PURE__*/ defineContainer('six-avatar', undefined, [ +export const SixAvatar = /*@__PURE__*/ defineContainer('six-avatar', undefined, [ 'image', 'alt', 'initials', @@ -33,14 +28,26 @@ export const SixAvatar: StencilVueComponent = /*@__PURE__*/ defin ]); -export const SixBadge: StencilVueComponent = /*@__PURE__*/ defineContainer('six-badge', undefined, [ +export const SixBadge = /*@__PURE__*/ defineContainer('six-badge', undefined, [ 'type', 'pill', 'pulse' ]); -export const SixButton: StencilVueComponent = /*@__PURE__*/ defineContainer('six-button', undefined, [ +export const SixBreadcrumbItem = /*@__PURE__*/ defineContainer('six-breadcrumb-item', undefined, [ + 'name', + 'disabled', + 'sixClick' +]); + + +export const SixBreadcrumbs = /*@__PURE__*/ defineContainer('six-breadcrumbs', undefined, [ + 'data' +]); + + +export const SixButton = /*@__PURE__*/ defineContainer('six-button', undefined, [ 'type', 'size', 'caret', @@ -57,16 +64,13 @@ export const SixButton: StencilVueComponent = /*@__PURE__*/ defin 'download', 'six-button-blur', 'six-button-focus' -], [ - 'six-button-blur', - 'six-button-focus' ]); -export const SixCard: StencilVueComponent = /*@__PURE__*/ defineContainer('six-card', undefined); +export const SixCard = /*@__PURE__*/ defineContainer('six-card', undefined); -export const SixCheckbox: StencilVueComponent = /*@__PURE__*/ defineContainer('six-checkbox', undefined, [ +export const SixCheckbox = /*@__PURE__*/ defineContainer('six-checkbox', undefined, [ 'name', 'value', 'disabled', @@ -80,15 +84,11 @@ export const SixCheckbox: StencilVueComponent = /*@__PURE__*/ defineContainer('six-date', undefined, [ +export const SixDate = /*@__PURE__*/ defineContainer('six-date', undefined, [ 'language', 'readonly', 'disabled', @@ -105,18 +105,16 @@ export const SixDate: StencilVueComponent = / 'errorText', 'errorTextCount', 'invalid', + 'debounce', 'name', 'clearable', 'six-change', 'six-blur' -], [ - 'six-change', - 'six-blur' ], 'value', 'change'); -export const SixDatepicker: StencilVueComponent = /*@__PURE__*/ defineContainer('six-datepicker', undefined, [ +export const SixDatepicker = /*@__PURE__*/ defineContainer('six-datepicker', undefined, [ 'type', 'locale', 'open', @@ -147,15 +145,11 @@ export const SixDatepicker: StencilVueComponent = /*@__PURE__*/ defineContainer('six-details', undefined, [ +export const SixDetails = /*@__PURE__*/ defineContainer('six-details', undefined, [ 'open', 'summary', 'summaryIcon', @@ -168,15 +162,10 @@ export const SixDetails: StencilVueComponent = /*@__PURE__*/ def 'six-details-after-show', 'six-details-hide', 'six-details-after-hide' -], [ - 'six-details-show', - 'six-details-after-show', - 'six-details-hide', - 'six-details-after-hide' ]); -export const SixDialog: StencilVueComponent = /*@__PURE__*/ defineContainer('six-dialog', undefined, [ +export const SixDialog = /*@__PURE__*/ defineContainer('six-dialog', undefined, [ 'open', 'label', 'noHeader', @@ -185,18 +174,11 @@ export const SixDialog: StencilVueComponent = /*@__PURE__*/ defin 'six-dialog-hide', 'six-dialog-after-hide', 'six-dialog-initial-focus', - 'six-dialog-request-close' -], [ - 'six-dialog-show', - 'six-dialog-after-show', - 'six-dialog-hide', - 'six-dialog-after-hide', - 'six-dialog-initial-focus', - 'six-dialog-request-close' + 'six-dialog-overlay-dismiss' ]); -export const SixDrawer: StencilVueComponent = /*@__PURE__*/ defineContainer('six-drawer', undefined, [ +export const SixDrawer = /*@__PURE__*/ defineContainer('six-drawer', undefined, [ 'open', 'label', 'placement', @@ -207,18 +189,11 @@ export const SixDrawer: StencilVueComponent = /*@__PURE__*/ defin 'six-drawer-hide', 'six-drawer-after-hide', 'six-drawer-initial-focus', - 'six-drawer-request-close' -], [ - 'six-drawer-show', - 'six-drawer-after-show', - 'six-drawer-hide', - 'six-drawer-after-hide', - 'six-drawer-initial-focus', - 'six-drawer-request-close' + 'six-drawer-overlay-dismiss' ]); -export const SixDropdown: StencilVueComponent = /*@__PURE__*/ defineContainer('six-dropdown', undefined, [ +export const SixDropdown = /*@__PURE__*/ defineContainer('six-dropdown', undefined, [ 'open', 'placement', 'closeOnSelect', @@ -242,21 +217,13 @@ export const SixDropdown: StencilVueComponent = /*@__PURE__*/ d 'six-dropdown-auto-filter-fired', 'six-async-filter-fired', 'six-dropdown-scroll' -], [ - 'six-dropdown-show', - 'six-dropdown-after-show', - 'six-dropdown-hide', - 'six-dropdown-after-hide', - 'six-dropdown-auto-filter-fired', - 'six-async-filter-fired', - 'six-dropdown-scroll' ]); -export const SixError: StencilVueComponent = /*@__PURE__*/ defineContainer('six-error', undefined); +export const SixError = /*@__PURE__*/ defineContainer('six-error', undefined); -export const SixErrorPage: StencilVueComponent = /*@__PURE__*/ defineContainer('six-error-page', undefined, [ +export const SixErrorPage = /*@__PURE__*/ defineContainer('six-error-page', undefined, [ 'errorCode', 'language', 'customTitle', @@ -265,10 +232,10 @@ export const SixErrorPage: StencilVueComponent = /*@__PURE__*/ ]); -export const SixFileList: StencilVueComponent = /*@__PURE__*/ defineContainer('six-file-list', undefined); +export const SixFileList = /*@__PURE__*/ defineContainer('six-file-list', undefined); -export const SixFileListItem: StencilVueComponent = /*@__PURE__*/ defineContainer('six-file-list-item', undefined, [ +export const SixFileListItem = /*@__PURE__*/ defineContainer('six-file-list-item', undefined, [ 'identifier', 'name', 'date', @@ -277,13 +244,10 @@ export const SixFileListItem: StencilVueComponent = /*@__PU 'nodelete', 'six-file-list-item-download', 'six-file-list-item-remove' -], [ - 'six-file-list-item-download', - 'six-file-list-item-remove' ]); -export const SixFileUpload: StencilVueComponent = /*@__PURE__*/ defineContainer('six-file-upload', undefined, [ +export const SixFileUpload = /*@__PURE__*/ defineContainer('six-file-upload', undefined, [ 'compact', 'label', 'disabled', @@ -295,16 +259,13 @@ export const SixFileUpload: StencilVueComponent = /*@__PURE__ 'invalid', 'six-file-upload-success', 'six-file-upload-failure' -], [ - 'six-file-upload-success', - 'six-file-upload-failure' ]); -export const SixFooter: StencilVueComponent = /*@__PURE__*/ defineContainer('six-footer', undefined); +export const SixFooter = /*@__PURE__*/ defineContainer('six-footer', undefined); -export const SixGroupLabel: StencilVueComponent = /*@__PURE__*/ defineContainer('six-group-label', undefined, [ +export const SixGroupLabel = /*@__PURE__*/ defineContainer('six-group-label', undefined, [ 'size', 'label', 'helpText', @@ -313,24 +274,24 @@ export const SixGroupLabel: StencilVueComponent = /*@__PURE__ ]); -export const SixHeader: StencilVueComponent = /*@__PURE__*/ defineContainer('six-header', undefined, [ +export const SixHeader = /*@__PURE__*/ defineContainer('six-header', undefined, [ 'shiftContent', 'openSearch' ]); -export const SixHeaderDropdownItem: StencilVueComponent = /*@__PURE__*/ defineContainer('six-header-dropdown-item', undefined, [ +export const SixHeaderDropdownItem = /*@__PURE__*/ defineContainer('six-header-dropdown-item', undefined, [ 'filter', 'filterPlaceholder' ]); -export const SixHeaderItem: StencilVueComponent = /*@__PURE__*/ defineContainer('six-header-item', undefined, [ +export const SixHeaderItem = /*@__PURE__*/ defineContainer('six-header-item', undefined, [ 'active' ]); -export const SixHeaderMenuButton: StencilVueComponent = /*@__PURE__*/ defineContainer('six-header-menu-button', undefined, [ +export const SixHeaderMenuButton = /*@__PURE__*/ defineContainer('six-header-menu-button', undefined, [ 'caret', 'disabled', 'loading', @@ -339,13 +300,13 @@ export const SixHeaderMenuButton: StencilVueComponent = ]); -export const SixIcon: StencilVueComponent = /*@__PURE__*/ defineContainer('six-icon', undefined, [ +export const SixIcon = /*@__PURE__*/ defineContainer('six-icon', undefined, [ 'size', 'filled' ]); -export const SixIconButton: StencilVueComponent = /*@__PURE__*/ defineContainer('six-icon-button', undefined, [ +export const SixIconButton = /*@__PURE__*/ defineContainer('six-icon-button', undefined, [ 'name', 'size', 'label', @@ -357,7 +318,7 @@ export const SixIconButton: StencilVueComponent = /*@__PURE__ ]); -export const SixInput: StencilVueComponent = /*@__PURE__*/ defineContainer('six-input', undefined, [ +export const SixInput = /*@__PURE__*/ defineContainer('six-input', undefined, [ 'type', 'size', 'name', @@ -393,17 +354,11 @@ export const SixInput: StencilVueComponent 'six-input-input', 'six-input-focus', 'six-input-blur' -], [ - 'six-input-change', - 'six-input-clear', - 'six-input-input', - 'six-input-focus', - 'six-input-blur' ], 'value', 'input'); -export const SixItemPicker: StencilVueComponent = /*@__PURE__*/ defineContainer('six-item-picker', undefined, [ +export const SixItemPicker = /*@__PURE__*/ defineContainer('six-item-picker', undefined, [ 'value', 'type', 'min', @@ -420,37 +375,32 @@ export const SixItemPicker: StencilVueComponent = /*@__PURE__ 'debounce', 'six-item-picker-change', 'six-item-picker-change-debounced' -], [ - 'six-item-picker-change', - 'six-item-picker-change-debounced' ]); -export const SixLanguageSwitcher: StencilVueComponent = /*@__PURE__*/ defineContainer('six-language-switcher', undefined, [ +export const SixLanguageSwitcher = /*@__PURE__*/ defineContainer('six-language-switcher', undefined, [ 'selected', 'languages', 'six-language-switcher-change' -], [ - 'six-language-switcher-change' ]); -export const SixLayoutGrid: StencilVueComponent = /*@__PURE__*/ defineContainer('six-layout-grid', undefined, [ +export const SixLayoutGrid = /*@__PURE__*/ defineContainer('six-layout-grid', undefined, [ 'columns' ]); -export const SixLogo: StencilVueComponent = /*@__PURE__*/ defineContainer('six-logo', undefined, [ +export const SixLogo = /*@__PURE__*/ defineContainer('six-logo', undefined, [ 'brand' ]); -export const SixMainContainer: StencilVueComponent = /*@__PURE__*/ defineContainer('six-main-container', undefined, [ +export const SixMainContainer = /*@__PURE__*/ defineContainer('six-main-container', undefined, [ 'padded' ]); -export const SixMenu: StencilVueComponent = /*@__PURE__*/ defineContainer('six-menu', undefined, [ +export const SixMenu = /*@__PURE__*/ defineContainer('six-menu', undefined, [ 'removeBoxShadow', 'items', 'itemsShown', @@ -459,15 +409,13 @@ export const SixMenu: StencilVueComponent = /*@__PURE__*/ defineCon 'scrollingDebounce', 'disableKeyboardHandling', 'six-menu-item-selected' -], [ - 'six-menu-item-selected' ]); -export const SixMenuDivider: StencilVueComponent = /*@__PURE__*/ defineContainer('six-menu-divider', undefined); +export const SixMenuDivider = /*@__PURE__*/ defineContainer('six-menu-divider', undefined); -export const SixMenuItem: StencilVueComponent = /*@__PURE__*/ defineContainer('six-menu-item', undefined, [ +export const SixMenuItem = /*@__PURE__*/ defineContainer('six-menu-item', undefined, [ 'checkType', 'checked', 'value', @@ -475,28 +423,28 @@ export const SixMenuItem: StencilVueComponent = /*@__PURE__*/ d ]); -export const SixMenuLabel: StencilVueComponent = /*@__PURE__*/ defineContainer('six-menu-label', undefined); +export const SixMenuLabel = /*@__PURE__*/ defineContainer('six-menu-label', undefined); -export const SixPicto: StencilVueComponent = /*@__PURE__*/ defineContainer('six-picto', undefined, [ +export const SixPicto = /*@__PURE__*/ defineContainer('six-picto', undefined, [ 'size' ]); -export const SixProgressBar: StencilVueComponent = /*@__PURE__*/ defineContainer('six-progress-bar', undefined, [ +export const SixProgressBar = /*@__PURE__*/ defineContainer('six-progress-bar', undefined, [ 'percentage', 'indeterminate' ]); -export const SixProgressRing: StencilVueComponent = /*@__PURE__*/ defineContainer('six-progress-ring', undefined, [ +export const SixProgressRing = /*@__PURE__*/ defineContainer('six-progress-ring', undefined, [ 'size', 'strokeWidth', 'percentage' ]); -export const SixRadio: StencilVueComponent = /*@__PURE__*/ defineContainer('six-radio', undefined, [ +export const SixRadio = /*@__PURE__*/ defineContainer('six-radio', undefined, [ 'name', 'value', 'disabled', @@ -505,14 +453,10 @@ export const SixRadio: StencilVueComponent = /*@__PURE__*/ defineC 'six-radio-blur', 'six-radio-change', 'six-radio-focus' -], [ - 'six-radio-blur', - 'six-radio-change', - 'six-radio-focus' ]); -export const SixRange: StencilVueComponent = /*@__PURE__*/ defineContainer('six-range', undefined, [ +export const SixRange = /*@__PURE__*/ defineContainer('six-range', undefined, [ 'name', 'value', 'required', @@ -530,57 +474,28 @@ export const SixRange: StencilVueComponent 'six-range-change', 'six-range-blur', 'six-range-focus' -], [ - 'six-range-change', - 'six-range-blur', - 'six-range-focus' ], 'value', 'input'); -export const SixRating: StencilVueComponent = /*@__PURE__*/ defineContainer('six-rating', undefined, [ - 'name', - 'value', - 'disabled', - 'required', - 'label', - 'errorText', - 'errorTextCount', - 'invalid', - 'max', - 'size', - 'readonly', - 'helpText', - 'six-rating-blur', - 'six-rating-change', - 'six-rating-focus' -], [ - 'six-rating-blur', - 'six-rating-change', - 'six-rating-focus' -]); - - -export const SixRoot: StencilVueComponent = /*@__PURE__*/ defineContainer('six-root', undefined, [ +export const SixRoot = /*@__PURE__*/ defineContainer('six-root', undefined, [ 'padded', 'stage', 'version' ]); -export const SixSearchField: StencilVueComponent = /*@__PURE__*/ defineContainer('six-search-field', undefined, [ +export const SixSearchField = /*@__PURE__*/ defineContainer('six-search-field', undefined, [ 'placeholder', 'debounce', 'disabled', 'value', 'clearable', 'six-search-field-change' -], [ - 'six-search-field-change' ]); -export const SixSelect: StencilVueComponent = /*@__PURE__*/ defineContainer('six-select', undefined, [ +export const SixSelect = /*@__PURE__*/ defineContainer('six-select', undefined, [ 'multiple', 'selectAllButton', 'selectAllText', @@ -610,15 +525,11 @@ export const SixSelect: StencilVueComponent = /*@__PURE__*/ defineContainer('six-sidebar', undefined, [ +export const SixSidebar = /*@__PURE__*/ defineContainer('six-sidebar', undefined, [ 'position', 'open', 'width', @@ -628,16 +539,10 @@ export const SixSidebar: StencilVueComponent = /*@__PURE__*/ def 'six-sidebar-hide', 'six-sidebar-after-hide', 'six-sidebar-initial-focus' -], [ - 'six-sidebar-show', - 'six-sidebar-after-show', - 'six-sidebar-hide', - 'six-sidebar-after-hide', - 'six-sidebar-initial-focus' ]); -export const SixSidebarItem: StencilVueComponent = /*@__PURE__*/ defineContainer('six-sidebar-item', undefined, [ +export const SixSidebarItem = /*@__PURE__*/ defineContainer('six-sidebar-item', undefined, [ 'value', 'selected', 'disabled', @@ -646,7 +551,7 @@ export const SixSidebarItem: StencilVueComponent = /*@__PURE ]); -export const SixSidebarItemGroup: StencilVueComponent = /*@__PURE__*/ defineContainer('six-sidebar-item-group', undefined, [ +export const SixSidebarItemGroup = /*@__PURE__*/ defineContainer('six-sidebar-item-group', undefined, [ 'name', 'icon', 'value', @@ -656,18 +561,18 @@ export const SixSidebarItemGroup: StencilVueComponent = ]); -export const SixSpinner: StencilVueComponent = /*@__PURE__*/ defineContainer('six-spinner', undefined, [ +export const SixSpinner = /*@__PURE__*/ defineContainer('six-spinner', undefined, [ 'logo', 'six' ]); -export const SixStageIndicator: StencilVueComponent = /*@__PURE__*/ defineContainer('six-stage-indicator', undefined, [ +export const SixStageIndicator = /*@__PURE__*/ defineContainer('six-stage-indicator', undefined, [ 'stage' ]); -export const SixSwitch: StencilVueComponent = /*@__PURE__*/ defineContainer('six-switch', undefined, [ +export const SixSwitch = /*@__PURE__*/ defineContainer('six-switch', undefined, [ 'name', 'value', 'disabled', @@ -680,54 +585,43 @@ export const SixSwitch: StencilVueComponent = /*@__PURE__*/ defineContainer('six-tab', undefined, [ +export const SixTab = /*@__PURE__*/ defineContainer('six-tab', undefined, [ 'panel', 'active', 'closable', 'disabled', 'six-tab-close' -], [ - 'six-tab-close' ]); -export const SixTabGroup: StencilVueComponent = /*@__PURE__*/ defineContainer('six-tab-group', undefined, [ +export const SixTabGroup = /*@__PURE__*/ defineContainer('six-tab-group', undefined, [ 'placement', 'noScrollControls', 'six-tab-show', 'six-tab-hide' -], [ - 'six-tab-show', - 'six-tab-hide' ]); -export const SixTabPanel: StencilVueComponent = /*@__PURE__*/ defineContainer('six-tab-panel', undefined, [ +export const SixTabPanel = /*@__PURE__*/ defineContainer('six-tab-panel', undefined, [ 'name', 'active' ]); -export const SixTag: StencilVueComponent = /*@__PURE__*/ defineContainer('six-tag', undefined, [ +export const SixTag = /*@__PURE__*/ defineContainer('six-tag', undefined, [ 'type', 'size', 'pill', 'clearable', 'six-tag-clear' -], [ - 'six-tag-clear' ]); -export const SixTextarea: StencilVueComponent = /*@__PURE__*/ defineContainer('six-textarea', undefined, [ +export const SixTextarea = /*@__PURE__*/ defineContainer('six-textarea', undefined, [ 'size', 'name', 'value', @@ -754,16 +648,11 @@ export const SixTextarea: StencilVueComponent = /*@__PURE__*/ defineContainer('six-tile', undefined, [ +export const SixTile = /*@__PURE__*/ defineContainer('six-tile', undefined, [ 'label', 'iconName', 'closeable', @@ -773,13 +662,10 @@ export const SixTile: StencilVueComponent = /*@__PURE__*/ defineCon 'size', 'six-tile-closed', 'six-tile-selected' -], [ - 'six-tile-closed', - 'six-tile-selected' ]); -export const SixTimepicker: StencilVueComponent = /*@__PURE__*/ defineContainer('six-timepicker', undefined, [ +export const SixTimepicker = /*@__PURE__*/ defineContainer('six-timepicker', undefined, [ 'format', 'separator', 'value', @@ -806,14 +692,10 @@ export const SixTimepicker: StencilVueComponent = /*@__PURE__ 'six-timepicker-change', 'six-timepicker-change-debounced', 'six-timepicker-clear' -], [ - 'six-timepicker-change', - 'six-timepicker-change-debounced', - 'six-timepicker-clear' ]); -export const SixTooltip: StencilVueComponent = /*@__PURE__*/ defineContainer('six-tooltip', undefined, [ +export const SixTooltip = /*@__PURE__*/ defineContainer('six-tooltip', undefined, [ 'content', 'placement', 'disabled', @@ -825,10 +707,5 @@ export const SixTooltip: StencilVueComponent = /*@__PURE__*/ def 'six-tooltip-after-show', 'six-tooltip-hide', 'six-tooltip-after-hide' -], [ - 'six-tooltip-show', - 'six-tooltip-after-show', - 'six-tooltip-hide', - 'six-tooltip-after-hide' ]); diff --git a/libraries/ui-library/src/components.d.ts b/libraries/ui-library/src/components.d.ts index 3573a004c..18d9d128d 100644 --- a/libraries/ui-library/src/components.d.ts +++ b/libraries/ui-library/src/components.d.ts @@ -7,6 +7,7 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { AlertType } from "./components/six-alert/six-alert"; import { EmptyPayload } from "./utils/types"; +import { SixBreadcrumbsData } from "./components/six-breadcrumbs/types"; import { Language } from "./utils/error-messages"; import { SixDateFormats } from "./components/six-datepicker/six-date-formats"; import { SixDatepickerSelectPayload } from "./components/six-datepicker/six-datepicker"; @@ -30,6 +31,7 @@ import { TimeFormat } from "./utils/time.util"; import { SixTimepickerChange } from "./components/six-timepicker/six-timepicker"; export { AlertType } from "./components/six-alert/six-alert"; export { EmptyPayload } from "./utils/types"; +export { SixBreadcrumbsData } from "./components/six-breadcrumbs/types"; export { Language } from "./utils/error-messages"; export { SixDateFormats } from "./components/six-datepicker/six-date-formats"; export { SixDatepickerSelectPayload } from "./components/six-datepicker/six-datepicker"; @@ -141,6 +143,22 @@ export namespace Components { */ "type": 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action'; } + interface SixBreadcrumbItem { + /** + * If the breadcrumb is disabled + */ + "disabled": boolean; + /** + * Name or label of the breadcrumb + */ + "name": string; + } + interface SixBreadcrumbs { + /** + * Data for the breadcrumbs + */ + "data": SixBreadcrumbsData; + } /** * @since 1.0 * @status stable @@ -2534,6 +2552,10 @@ export interface SixAlertCustomEvent extends CustomEvent { detail: T; target: HTMLSixAlertElement; } +export interface SixBreadcrumbItemCustomEvent extends CustomEvent { + detail: T; + target: HTMLSixBreadcrumbItemElement; +} export interface SixButtonCustomEvent extends CustomEvent { detail: T; target: HTMLSixButtonElement; @@ -2694,6 +2716,29 @@ declare global { prototype: HTMLSixBadgeElement; new (): HTMLSixBadgeElement; }; + interface HTMLSixBreadcrumbItemElementEventMap { + "sixClick": EmptyPayload; + } + interface HTMLSixBreadcrumbItemElement extends Components.SixBreadcrumbItem, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLSixBreadcrumbItemElement, ev: SixBreadcrumbItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLSixBreadcrumbItemElement, ev: SixBreadcrumbItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLSixBreadcrumbItemElement: { + prototype: HTMLSixBreadcrumbItemElement; + new (): HTMLSixBreadcrumbItemElement; + }; + interface HTMLSixBreadcrumbsElement extends Components.SixBreadcrumbs, HTMLStencilElement { + } + var HTMLSixBreadcrumbsElement: { + prototype: HTMLSixBreadcrumbsElement; + new (): HTMLSixBreadcrumbsElement; + }; interface HTMLSixButtonElementEventMap { "six-button-blur": EmptyPayload; "six-button-focus": EmptyPayload; @@ -3622,6 +3667,8 @@ declare global { "six-alert": HTMLSixAlertElement; "six-avatar": HTMLSixAvatarElement; "six-badge": HTMLSixBadgeElement; + "six-breadcrumb-item": HTMLSixBreadcrumbItemElement; + "six-breadcrumbs": HTMLSixBreadcrumbsElement; "six-button": HTMLSixButtonElement; "six-card": HTMLSixCardElement; "six-checkbox": HTMLSixCheckboxElement; @@ -3772,6 +3819,26 @@ declare namespace LocalJSX { */ "type"?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action'; } + interface SixBreadcrumbItem { + /** + * If the breadcrumb is disabled + */ + "disabled"?: boolean; + /** + * Name or label of the breadcrumb + */ + "name"?: string; + /** + * Emitted on click. + */ + "onSixClick"?: (event: SixBreadcrumbItemCustomEvent) => void; + } + interface SixBreadcrumbs { + /** + * Data for the breadcrumbs + */ + "data"?: SixBreadcrumbsData; + } /** * @since 1.0 * @status stable @@ -6300,6 +6367,8 @@ declare namespace LocalJSX { "six-alert": SixAlert; "six-avatar": SixAvatar; "six-badge": SixBadge; + "six-breadcrumb-item": SixBreadcrumbItem; + "six-breadcrumbs": SixBreadcrumbs; "six-button": SixButton; "six-card": SixCard; "six-checkbox": SixCheckbox; @@ -6379,6 +6448,8 @@ declare module "@stencil/core" { * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ "six-badge": LocalJSX.SixBadge & JSXBase.HTMLAttributes; + "six-breadcrumb-item": LocalJSX.SixBreadcrumbItem & JSXBase.HTMLAttributes; + "six-breadcrumbs": LocalJSX.SixBreadcrumbs & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable diff --git a/libraries/ui-library/src/components/six-breadcrumbs-item/readme.md b/libraries/ui-library/src/components/six-breadcrumbs-item/readme.md new file mode 100644 index 000000000..de79f09ba --- /dev/null +++ b/libraries/ui-library/src/components/six-breadcrumbs-item/readme.md @@ -0,0 +1,38 @@ +# six-breadcrumb-item + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ------------------------------- | --------- | ------- | +| `disabled` | `disabled` | If the breadcrumb is disabled | `boolean` | `false` | +| `name` | `name` | Name or label of the breadcrumb | `string` | `''` | + + +## Events + +| Event | Description | Type | +| ---------- | ----------------- | ------------------------ | +| `sixClick` | Emitted on click. | `CustomEvent` | + + +## Dependencies + +### Used by + + - [six-breadcrumbs](../six-breadcrumbs) + +### Graph +```mermaid +graph TD; + six-breadcrumbs --> six-breadcrumb-item + style six-breadcrumb-item fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +Copyright © 2021-present SIX-Group diff --git a/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumb-item.scss b/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumb-item.scss new file mode 100644 index 000000000..f8ece552a --- /dev/null +++ b/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumb-item.scss @@ -0,0 +1,18 @@ +@import '../../../src/global/component'; + + +:host { + + a { + color: var(--six-breadcrumbs-link-color) !important; + cursor: pointer; + text-decoration: none; + } + + &:after { + content: var(--six-breadcrumbs-separator); + color: var(--six-breadcrumbs-separator-color); + padding-left: var(--six-breadcrumbs-padding); + } + +} diff --git a/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumb-item.tsx b/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumb-item.tsx new file mode 100644 index 000000000..e1472fa61 --- /dev/null +++ b/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumb-item.tsx @@ -0,0 +1,31 @@ +import { Component, Event, EventEmitter, h, Prop } from '@stencil/core'; +import { EmptyPayload } from '../../utils/types'; + + +@Component({ + tag: 'six-breadcrumb-item', + styleUrl: 'six-breadcrumb-item.scss', + shadow: true, +}) +export class SixBreadcrumbItem { + + /** Name or label of the breadcrumb */ + @Prop() name: string = ''; + + /** If the breadcrumb is disabled */ + @Prop() disabled: boolean = false; + + /** Emitted on click. */ + @Event({ eventName: 'sixClick' }) sixClickEvent!: EventEmitter; + + render() { + return ( + + + {!this.disabled ? ( this.sixClickEvent.emit()}>{this.name}) : this.name} + + ); + + } + +} diff --git a/libraries/ui-library/src/components/six-breadcrumbs-item/test/six-breadcrumb-item.spec.tsx b/libraries/ui-library/src/components/six-breadcrumbs-item/test/six-breadcrumb-item.spec.tsx new file mode 100644 index 000000000..bc9d9a7b9 --- /dev/null +++ b/libraries/ui-library/src/components/six-breadcrumbs-item/test/six-breadcrumb-item.spec.tsx @@ -0,0 +1,38 @@ +import { newSpecPage } from '@stencil/core/testing'; +import { SixBreadcrumbItem } from '../six-breadcrumb-item'; + +describe('six-breadcrumb-item', () => { + it('renders enabled item with ', async () => { + const page = await newSpecPage({ + components: [SixBreadcrumbItem], + html: ``, + }); + expect(page?.root?.shadowRoot?.innerHTML).toContain('', async () => { + const page = await newSpecPage({ + components: [SixBreadcrumbItem], + html: ``, + }); + expect(page?.root?.shadowRoot?.innerHTML).not.toContain(' { + const page = await newSpecPage({ + components: [SixBreadcrumbItem], + html: ``, + }); + + const eventSpy = jest.fn(); + page?.root?.addEventListener('sixClick', eventSpy); + + const anchor = page?.root?.shadowRoot?.querySelector('a'); + anchor?.click(); + await page.waitForChanges(); + + expect(eventSpy).toHaveBeenCalled(); + }); +}); diff --git a/libraries/ui-library/src/components/six-breadcrumbs/index.html b/libraries/ui-library/src/components/six-breadcrumbs/index.html new file mode 100644 index 000000000..067f7fdd2 --- /dev/null +++ b/libraries/ui-library/src/components/six-breadcrumbs/index.html @@ -0,0 +1,69 @@ + + + + + + + + + Breadcrumbs + + + +

Breadcrumbs

+
+
+

Anchors

+

Using anchors as child elements

+ + One + Two + Three + +
+
+

Containers

+

Using div containers as child elements

+ +
One
+
Two
+
Three
+ +
+
+

Breadcrumb Item

+

Using six-breadcrumb-item as child elements

+ + + + + +
+
+

Data array

+

Passing six-breadcrumb as a child (disabled/non-anchor) and an array of data

+ + + +
+
+ + + + + diff --git a/libraries/ui-library/src/components/six-breadcrumbs/readme.md b/libraries/ui-library/src/components/six-breadcrumbs/readme.md new file mode 100644 index 000000000..a122dafad --- /dev/null +++ b/libraries/ui-library/src/components/six-breadcrumbs/readme.md @@ -0,0 +1,30 @@ +# six-breadcrumbs + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ------------------------ | -------------------- | ------- | +| `data` | -- | Data for the breadcrumbs | `SixBreadcrumbsData` | `[]` | + + +## Dependencies + +### Depends on + +- [six-breadcrumb-item](../six-breadcrumbs-item) + +### Graph +```mermaid +graph TD; + six-breadcrumbs --> six-breadcrumb-item + style six-breadcrumbs fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +Copyright © 2021-present SIX-Group diff --git a/libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.scss b/libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.scss new file mode 100644 index 000000000..4cda12097 --- /dev/null +++ b/libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.scss @@ -0,0 +1,55 @@ +@import '../../../src/global/component'; + +:host { + display: block; + --six-breadcrumbs-separator: "/"; + --six-breadcrumbs-background-color: var(--six-color-web-rock-200); + --six-breadcrumbs-padding: var(--six-spacing-x-small); + --six-breadcrumbs-color: pink; + --six-breadcrumbs-separator-color: var(--six-color-web-rock-500); + --six-breadcrumbs-link-color: var(--six-color-action-600); +} + +.six-breadcrumbs { + display: block; + $padding: var(--six-breadcrumbs-padding); + background-color: var(--six-breadcrumbs-background-color); + + > div { /* Container */ + + display: inline-flex; + flex-wrap: wrap; + width: inherit; + color: var(--six-breadcrumbs-color); + gap: $padding; + padding: $padding; + + ::slotted(a), ::slotted(div), six-breadcrumb-item { + &:after { + content: var(--six-breadcrumbs-separator); + color: var(--six-breadcrumbs-separator-color); + padding-left: var(--six-breadcrumbs-padding); + } + } + + ::slotted(:last-of-type):after, + div:last-of-type:after, + six-breadcrumb-item:last-of-type:after { + content: none; + padding-left: unset; + } + + a, ::slotted(a) { + color: var(--six-breadcrumbs-link-color) !important; + cursor: pointer; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + + } +} + + diff --git a/libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.tsx b/libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.tsx new file mode 100644 index 000000000..b49818a1a --- /dev/null +++ b/libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.tsx @@ -0,0 +1,28 @@ +import { Component, h, Prop } from '@stencil/core'; +import { SixBreadcrumbsData } from './types'; + + +@Component({ + tag: 'six-breadcrumbs', + styleUrl: 'six-breadcrumbs.scss', + shadow: true, +}) +export class SixBreadcrumbs { + + /** Data for the breadcrumbs */ + @Prop() data: SixBreadcrumbsData = []; + + render() { + return ( + +
+ + {this.data && this.data.map(({ name, disabled, onSixClick }) => + , + )} +
+ ) + ; + } + +} diff --git a/libraries/ui-library/src/components/six-breadcrumbs/test/six-breadcrumbs.spec.tsx b/libraries/ui-library/src/components/six-breadcrumbs/test/six-breadcrumbs.spec.tsx new file mode 100644 index 000000000..50d271b1e --- /dev/null +++ b/libraries/ui-library/src/components/six-breadcrumbs/test/six-breadcrumbs.spec.tsx @@ -0,0 +1,39 @@ +import { newSpecPage } from '@stencil/core/testing'; +import { SixBreadcrumbs } from '../six-breadcrumbs'; + +describe('six-breadcrumbs', () => { + it('renders with no data', async () => { + const page = await newSpecPage({ + components: [SixBreadcrumbs], + html: ``, + }); + expect(page?.root)?.toEqualHtml(` + + + +
+ +
+ + + +`); + }); + + it('renders breadcrumb items from data prop', async () => { + const mockData = [ + { name: 'Home', disabled: false, onSixClick: jest.fn() }, + { name: 'About', disabled: true, onSixClick: jest.fn() }, + ]; + + const page = await newSpecPage({ + components: [SixBreadcrumbs], + html: ``, + }); + + page.rootInstance.data = mockData; + await page?.waitForChanges(); + + expect(page?.root?.shadowRoot?.querySelectorAll('six-breadcrumb-item').length).toBe(2); + }); +}); diff --git a/libraries/ui-library/src/components/six-breadcrumbs/types.ts b/libraries/ui-library/src/components/six-breadcrumbs/types.ts new file mode 100644 index 000000000..fac9ea19c --- /dev/null +++ b/libraries/ui-library/src/components/six-breadcrumbs/types.ts @@ -0,0 +1,6 @@ +export interface SixBreadcrumbsData extends Array<{ + name: string; + disabled?: boolean; + onSixClick?: () => void; +}> { +} diff --git a/libraries/ui-library/src/components/six-date/readme.md b/libraries/ui-library/src/components/six-date/readme.md index 238f18079..309c59ee7 100644 --- a/libraries/ui-library/src/components/six-date/readme.md +++ b/libraries/ui-library/src/components/six-date/readme.md @@ -11,26 +11,27 @@ A date picker component that allows users to select dates via a calendar popup o ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | -------------- | -| `allowedDates` | `allowed-dates` | Callback to determine which dates in the picker should be selectable. | `(date: string) => boolean` | `() => true` | -| `clearable` | `clearable` | Set to true to add a clear button when the input is populated. | `boolean` | `false` | -| `dateFormat` | `date-format` | Defines the format pattern for displaying dates and how dates can be entered via keyboard. The parser accepts flexible input that doesn't strictly match the format pattern. Input with missing leading zeros or incomplete years will be automatically normalized. For example, with the pattern "dd.MM.yyyy": "1.1.2025" becomes "01.01.2025" and "1.1.225" becomes "01.01.0225". Defaults to "dd.MM.yyyy". Available patterns: - Year: "yyyy" (e.g., "2021") - Month: "MM" (e.g., "01" for January) or "M" (e.g., "1" for January) - Day: "dd" (e.g., "08" for the 8th) or "d" (e.g., "8" for the 8th) Examples: - "dd.MM.yyyy" -> "31.01.2024" - "yyyy-MM-dd" -> "2024-01-31" - "d.M.yyyy" -> "31.1.2024" | `string` | `'dd.MM.yyyy'` | -| `disabled` | `disabled` | If `true` the component is disabled. | `boolean` | `false` | -| `errorText` | `error-text` | The error message shown, if `invalid` is set to true. | `string \| string[]` | `''` | -| `errorTextCount` | `error-text-count` | The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 | `number \| undefined` | `undefined` | -| `helpText` | `help-text` | The input's help text. Alternatively, you can use the help-text slot. | `string` | `''` | -| `invalid` | `invalid` | If this property is set to true and an error message is provided by `errorText`, the error message is displayed. | `boolean` | `false` | -| `label` | `label` | The label text. | `string` | `''` | -| `language` | `language` | The language used to render the weekdays and months. | `"de" \| "en" \| "es" \| "fr" \| "it"` | `'en'` | -| `max` | `max` | The maximum allowed selectable date in ISO format (yyyy-MM-dd). Dates after this value will be disabled in the date picker. Example: '2025-01-01' | `string \| undefined` | `undefined` | -| `min` | `min` | The minimum allowed selectable date in ISO format (yyyy-MM-dd). Dates before this value will be disabled in the date picker. Example: '2024-01-01' | `string \| undefined` | `undefined` | -| `name` | `name` | The input's name attribute. | `string` | `''` | -| `placeholder` | `placeholder` | The placeholder defines what text to be shown on the input element | `string \| undefined` | `undefined` | -| `readonly` | `readonly` | If `true` the user can only select a date via the component in the popup but not directly edit the input field. | `boolean` | `false` | -| `required` | `required` | Set to true to show an asterisk beneath the label. | `boolean` | `false` | -| `size` | `size` | The size of the date input field. | `"large" \| "medium" \| "small"` | `'medium'` | -| `value` | `value` | The value of the form field in ISO 8601 date format (yyyy-MM-dd). Example: '2024-01-01'. When an invalid date is provided, it will be replaced with an empty string (''), matching the behavior of native HTML . The displayed format can be customized using the dateFormat property, but the underlying value will always be stored in ISO format. | `string` | `''` | +| Property | Attribute | Description | Type | Default | +| ---------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ----------------------- | +| `allowedDates` | -- | Callback to determine which dates in the picker should be selectable. | `(date: string) => boolean` | `() => true` | +| `clearable` | `clearable` | Set to true to add a clear button when the input is populated. | `boolean` | `false` | +| `dateFormat` | `date-format` | Defines the format pattern for displaying dates and how dates can be entered via keyboard. Defaults to "dd.MM.yyyy". Available patterns: - Year: "yyyy" (e.g., "2021") - Month: "MM" (e.g., "01" for January) or "M" (e.g., "1" for January) - Day: "dd" (e.g., "08" for the 8th) or "d" (e.g., "8" for the 8th) Examples: - "dd.MM.yyyy" -> "31.01.2024" - "yyyy-MM-dd" -> "2024-01-31" - "d.M.yyyy" -> "31.1.2024" | `string` | `'dd.MM.yyyy'` | +| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `six-change` event after each keystroke. | `number` | `DEFAULT_DEBOUNCE_FAST` | +| `disabled` | `disabled` | If `true` the component is disabled. | `boolean` | `false` | +| `errorText` | `error-text` | The error message shown, if `invalid` is set to true. | `string \| string[]` | `''` | +| `errorTextCount` | `error-text-count` | The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 | `number \| undefined` | `undefined` | +| `helpText` | `help-text` | The input's help text. Alternatively, you can use the help-text slot. | `string` | `''` | +| `invalid` | `invalid` | If this property is set to true and an error message is provided by `errorText`, the error message is displayed. | `boolean` | `false` | +| `label` | `label` | The label text. | `string` | `''` | +| `language` | `language` | The language used to render the weekdays and months. | `"de" \| "en" \| "es" \| "fr" \| "it"` | `'en'` | +| `max` | `max` | The maximum allowed selectable date in ISO format (yyyy-MM-dd). Dates after this value will be disabled in the date picker. Example: '2025-01-01' | `string \| undefined` | `undefined` | +| `min` | `min` | The minimum allowed selectable date in ISO format (yyyy-MM-dd). Dates before this value will be disabled in the date picker. Example: '2024-01-01' | `string \| undefined` | `undefined` | +| `name` | `name` | The input's name attribute. | `string` | `''` | +| `placeholder` | `placeholder` | The placeholder defines what text to be shown on the input element | `string \| undefined` | `undefined` | +| `readonly` | `readonly` | If `true` the user can only select a date via the component in the popup but not directly edit the input field. | `boolean` | `false` | +| `required` | `required` | Set to true to show an asterisk beneath the label. | `boolean` | `false` | +| `size` | `size` | The size of the date input field. | `"large" \| "medium" \| "small"` | `'medium'` | +| `value` | `value` | The value of the form field in ISO 8601 date format (yyyy-MM-dd). Example: '2024-01-01'. When an invalid date is provided, it will be replaced with an empty string (''), matching the behavior of native HTML . The displayed format can be customized using the dateFormat property, but the underlying value will always be stored in ISO format. | `string` | `''` | ## Events diff --git a/libraries/ui-library/src/components/six-datepicker/readme.md b/libraries/ui-library/src/components/six-datepicker/readme.md index ef4671f2b..6be05148e 100644 --- a/libraries/ui-library/src/components/six-datepicker/readme.md +++ b/libraries/ui-library/src/components/six-datepicker/readme.md @@ -11,35 +11,35 @@ The six-datepicker component is deprecated. Please use the [six-date](./six-date ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -| `allowedDates` | `allowed-dates` | Callback to determine which date in the datepicker should be selectable. the callback function will get a datestring as an argument, e.g. '2021-07-04' Usage e.g.: const datepicker = document.getElementById('allowed-date-picker'); datepicker.allowedDates = datestring => parseInt(datestring.split('-')[2], 10) % 2 === 0; | `(date: Date) => boolean` | `() => true` | -| `clearable` | `clearable` | Set to true to add a clear button when the input is populated. | `boolean` | `false` | -| `closeOnSelect` | `close-on-select` | Closes the datepicker dropdown after selection | `boolean` | `this.type === 'date'` | -| `containingElement` | `containing-element` | The dropdown will close when the user interacts outside of this element (e.g. clicking). | `HTMLElement \| undefined` | `undefined` | -| `dateFormat` | `date-format` | Define the dateFormat. Valid formats are: 'dd.mm.yyyy' 'yyyy-mm-dd' 'dd-mm-yyyy' 'dd/mm/yyyy' 'yyyy/mm/dd' 'dd.mm.yy' 'yy-mm-dd' 'dd-mm-yy' 'dd/mm/yy' 'yy/mm/dd' | `SixDateFormats.DDMMYYYY_DASH \| SixDateFormats.DDMMYYYY_DASH_TIME \| SixDateFormats.DDMMYYYY_SLASH \| SixDateFormats.DDMMYYYY_SLASH_TIME \| SixDateFormats.DDMMYYY_DOT \| SixDateFormats.DDMMYYY_DOT_TIME \| SixDateFormats.DDMMYY_DASH \| SixDateFormats.DDMMYY_DASH_TIME \| SixDateFormats.DDMMYY_DOT \| SixDateFormats.DDMMYY_DOT_TIME \| SixDateFormats.DDMMYY_SLASH \| SixDateFormats.DDMMYY_SLASH_TIME \| SixDateFormats.YYMMDD_DASH \| SixDateFormats.YYMMDD_DASH_TIME \| SixDateFormats.YYMMDD_SLASH \| SixDateFormats.YYMMDD_SLASH_TIME \| SixDateFormats.YYYYMMDD_DASH \| SixDateFormats.YYYYMMDD_DASH_TIME \| SixDateFormats.YYYYMMDD_SLASH \| SixDateFormats.YYYYMMDD_SLASH_TIME` | `SixDateFormats.DDMMYYY_DOT` | -| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke. | `number` | `DEFAULT_DEBOUNCE_FAST` | -| `defaultDate` | `default-date` | The date to defines where the datepicker popup starts. The prop accepts ISO 8601 date strings (YYYY-MM-DD). | `string \| undefined` | `undefined` | -| `disabled` | `disabled` | If `true` the component is disabled. | `boolean` | `false` | -| `errorText` | `error-text` | The error message shown, if `invalid` is set to true. | `string \| string[]` | `''` | -| `errorTextCount` | `error-text-count` | The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 | `number \| undefined` | `undefined` | -| `hoist` | `hoist` | Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto\|scroll`. | `boolean` | `false` | -| `iconPosition` | `icon-position` | Set the position of the icon | `"left" \| "right"` | `'left'` | -| `inline` | `inline` | Indicates whether or not the calendar should be shown as an inline (always open) component | `boolean` | `false` | -| `invalid` | `invalid` | If this property is set to true and an error message is provided by `errorText`, the error message is displayed. | `boolean` | `false` | -| `label` | `label` | The label text. | `string` | `''` | -| `locale` | `locale` | The language used to render the weekdays and months. | `"de" \| "en" \| "es" \| "fr" \| "it"` | `'en'` | -| `max` | `max` | The maximum datetime allowed. Value must be a date object | `Date \| undefined` | `undefined` | -| `min` | `min` | The minimum datetime allowed. Value must be a date object | `Date \| undefined` | `undefined` | -| `name` | `name` | The input's name attribute. | `string` | `''` | -| `open` | `open` | Indicates whether or not the calendar dropdown is open on startup. You can use this in lieu of the show/hide methods. | `boolean` | `false` | -| `placeholder` | `placeholder` | The placeholder defines what text to be shown on the input element | `string \| undefined` | `undefined` | -| `placement` | `placement` | The enforced placement of the dropdown panel. | `"bottom" \| "top" \| undefined` | `undefined` | -| `readonly` | `readonly` | If `true` the user can only select a date via the component in the popup, but not directly edit the input field. | `boolean` | `false` | -| `required` | `required` | Set to true to show an asterisk beneath the label. | `boolean` | `false` | -| `size` | `size` | Datepicker size. | `"large" \| "medium" \| "small"` | `'medium'` | -| `type` | `type` | Set the type. | `"date" \| "date-time"` | `'date'` | -| `value` | `value` | The value of the form field, which accepts a date object. | `Date \| undefined` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | +| `allowedDates` | -- | Callback to determine which date in the datepicker should be selectable. the callback function will get a datestring as an argument, e.g. '2021-07-04' Usage e.g.: const datepicker = document.getElementById('allowed-date-picker'); datepicker.allowedDates = datestring => parseInt(datestring.split('-')[2], 10) % 2 === 0; | `(date: Date) => boolean` | `() => true` | +| `clearable` | `clearable` | Set to true to add a clear button when the input is populated. | `boolean` | `false` | +| `closeOnSelect` | `close-on-select` | Closes the datepicker dropdown after selection | `boolean` | `this.type === 'date'` | +| `containingElement` | -- | The dropdown will close when the user interacts outside of this element (e.g. clicking). | `HTMLElement \| undefined` | `undefined` | +| `dateFormat` | `date-format` | Define the dateFormat. Valid formats are: 'dd.mm.yyyy' 'yyyy-mm-dd' 'dd-mm-yyyy' 'dd/mm/yyyy' 'yyyy/mm/dd' 'dd.mm.yy' 'yy-mm-dd' 'dd-mm-yy' 'dd/mm/yy' 'yy/mm/dd' | `SixDateFormats.DDMMYYYY_DASH \| SixDateFormats.DDMMYYYY_DASH_TIME \| SixDateFormats.DDMMYYYY_SLASH \| SixDateFormats.DDMMYYYY_SLASH_TIME \| SixDateFormats.DDMMYYY_DOT \| SixDateFormats.DDMMYYY_DOT_TIME \| SixDateFormats.DDMMYY_DASH \| SixDateFormats.DDMMYY_DASH_TIME \| SixDateFormats.DDMMYY_DOT \| SixDateFormats.DDMMYY_DOT_TIME \| SixDateFormats.DDMMYY_SLASH \| SixDateFormats.DDMMYY_SLASH_TIME \| SixDateFormats.YYMMDD_DASH \| SixDateFormats.YYMMDD_DASH_TIME \| SixDateFormats.YYMMDD_SLASH \| SixDateFormats.YYMMDD_SLASH_TIME \| SixDateFormats.YYYYMMDD_DASH \| SixDateFormats.YYYYMMDD_DASH_TIME \| SixDateFormats.YYYYMMDD_SLASH \| SixDateFormats.YYYYMMDD_SLASH_TIME` | `SixDateFormats.DDMMYYY_DOT` | +| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke. | `number` | `DEFAULT_DEBOUNCE_FAST` | +| `defaultDate` | `default-date` | The date to defines where the datepicker popup starts. The prop accepts ISO 8601 date strings (YYYY-MM-DD). | `string \| undefined` | `undefined` | +| `disabled` | `disabled` | If `true` the component is disabled. | `boolean` | `false` | +| `errorText` | `error-text` | The error message shown, if `invalid` is set to true. | `string \| string[]` | `''` | +| `errorTextCount` | `error-text-count` | The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 | `number \| undefined` | `undefined` | +| `hoist` | `hoist` | Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto\|scroll`. | `boolean` | `false` | +| `iconPosition` | `icon-position` | Set the position of the icon | `"left" \| "right"` | `'left'` | +| `inline` | `inline` | Indicates whether or not the calendar should be shown as an inline (always open) component | `boolean` | `false` | +| `invalid` | `invalid` | If this property is set to true and an error message is provided by `errorText`, the error message is displayed. | `boolean` | `false` | +| `label` | `label` | The label text. | `string` | `''` | +| `locale` | `locale` | The language used to render the weekdays and months. | `"de" \| "en" \| "es" \| "fr" \| "it"` | `'en'` | +| `max` | -- | The maximum datetime allowed. Value must be a date object | `Date \| undefined` | `undefined` | +| `min` | -- | The minimum datetime allowed. Value must be a date object | `Date \| undefined` | `undefined` | +| `name` | `name` | The input's name attribute. | `string` | `''` | +| `open` | `open` | Indicates whether or not the calendar dropdown is open on startup. You can use this in lieu of the show/hide methods. | `boolean` | `false` | +| `placeholder` | `placeholder` | The placeholder defines what text to be shown on the input element | `string \| undefined` | `undefined` | +| `placement` | `placement` | The enforced placement of the dropdown panel. | `"bottom" \| "top" \| undefined` | `undefined` | +| `readonly` | `readonly` | If `true` the user can only select a date via the component in the popup, but not directly edit the input field. | `boolean` | `false` | +| `required` | `required` | Set to true to show an asterisk beneath the label. | `boolean` | `false` | +| `size` | `size` | Datepicker size. | `"large" \| "medium" \| "small"` | `'medium'` | +| `type` | `type` | Set the type. | `"date" \| "date-time"` | `'date'` | +| `value` | -- | The value of the form field, which accepts a date object. | `Date \| undefined` | `undefined` | ## Events diff --git a/libraries/ui-library/src/components/six-dropdown/readme.md b/libraries/ui-library/src/components/six-dropdown/readme.md index 8beed5995..93edbe155 100644 --- a/libraries/ui-library/src/components/six-dropdown/readme.md +++ b/libraries/ui-library/src/components/six-dropdown/readme.md @@ -12,7 +12,7 @@ | `asyncFilter` | `async-filter` | Set to true to allow async filtering. When you enter something in the search field the component will only emit an event but not filter any elements itself. You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself | `boolean` | `false` | | `autofocusFilter` | `autofocus-filter` | By default the search field will be focused when opening a dropdown with filtering enabled. | `boolean` | `true` | | `closeOnSelect` | `close-on-select` | Determines whether the dropdown should hide when a menu item is selected. | `boolean` | `true` | -| `containingElement` | `containing-element` | The dropdown will close when the user interacts outside of this element (e.g. clicking). | `HTMLElement \| undefined` | `undefined` | +| `containingElement` | -- | The dropdown will close when the user interacts outside of this element (e.g. clicking). | `HTMLElement \| undefined` | `undefined` | | `disableHideOnEnterAndSpace` | `disable-hide-on-enter-and-space` | The panel can be opend/closed by pressing the spacebar or the enter key. In some cases you might want to avoid this | `boolean` | `false` | | `distance` | `distance` | The distance in pixels from which to offset the panel away from its trigger. | `number` | `4` | | `filter` | `filter` | Set to true to allow auto filtering for entries in the dropdown. With this flag the dropdown will automatically filter itsel. If you need to coordinate the shown elements yourself, e.g. because you need to call an endpoint use asyncFilter instead | `boolean` | `false` | @@ -21,7 +21,7 @@ | `hoist` | `hoist` | Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto\|scroll`. | `boolean` | `false` | | `matchTriggerWidth` | `match-trigger-width` | Determines if the dropdown panel's width should match the width of the trigger element. If set to `true`, the panel will resize its width to align with the trigger's width. If `false` or omitted, the panel will maintain its default width. | `boolean` | `false` | | `open` | `open` | Indicates whether the dropdown is open. You can use this in lieu of the show/hide methods. | `boolean` | `false` | -| `options` | `options` | Set the options to be shown in the dropdown (alternative to setting the elements via html) | `SixMenuItemData[]` | `[]` | +| `options` | -- | Set the options to be shown in the dropdown (alternative to setting the elements via html) | `SixMenuItemData[]` | `[]` | | `placement` | `placement` | The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside the viewport. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom-start'` | | `skidding` | `skidding` | The distance in pixels from which to offset the panel along its trigger. | `number` | `0` | | `virtualScroll` | `virtual-scroll` | Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around) are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. | `boolean` | `false` | diff --git a/libraries/ui-library/src/components/six-error-page/readme.md b/libraries/ui-library/src/components/six-error-page/readme.md index 892e6ca57..3ba64aba9 100644 --- a/libraries/ui-library/src/components/six-error-page/readme.md +++ b/libraries/ui-library/src/components/six-error-page/readme.md @@ -7,13 +7,13 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------- | -------------------- | ---------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| `customDescription` | `custom-description` | Defines a custom description. | `string[] \| undefined` | `undefined` | -| `customIcon` | `custom-icon` | Defines a custom icon. | `string \| undefined` | `undefined` | -| `customTitle` | `custom-title` | Defines a custom title. | `string \| undefined` | `undefined` | -| `errorCode` | `error-code` | Defines error Code and thus displays the proper error page. | `403 \| 404 \| 500 \| undefined` | `undefined` | -| `language` | `language` | Defines language and thus displays the proper error page in the selected language. | `"de" \| "en"` | `'en'` | +| Property | Attribute | Description | Type | Default | +| ------------------- | -------------- | ---------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| `customDescription` | -- | Defines a custom description. | `string[] \| undefined` | `undefined` | +| `customIcon` | `custom-icon` | Defines a custom icon. | `string \| undefined` | `undefined` | +| `customTitle` | `custom-title` | Defines a custom title. | `string \| undefined` | `undefined` | +| `errorCode` | `error-code` | Defines error Code and thus displays the proper error page. | `403 \| 404 \| 500 \| undefined` | `undefined` | +| `language` | `language` | Defines language and thus displays the proper error page in the selected language. | `"de" \| "en"` | `'en'` | ## Shadow Parts diff --git a/libraries/ui-library/src/components/six-item-picker/readme.md b/libraries/ui-library/src/components/six-item-picker/readme.md index b7401030c..23d372b62 100644 --- a/libraries/ui-library/src/components/six-item-picker/readme.md +++ b/libraries/ui-library/src/components/six-item-picker/readme.md @@ -11,7 +11,7 @@ | ------------------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | | `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event. If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click (and keep pressed) and once you release | `number` | `DEFAULT_DEBOUNCE_FAST` | | `interval` | `interval` | Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed. | `number` | `DEFAULT_DEBOUNCE_INSANELY_FAST` | -| `items` | `items` | Defines a custom list of items you can iterate through | `string[] \| undefined` | `undefined` | +| `items` | -- | Defines a custom list of items you can iterate through | `string[] \| undefined` | `undefined` | | `max` | `max` | The maximum value allowed to pick. | `number \| string \| undefined` | `undefined` | | `min` | `min` | The minimum value allowed to pick. | `number \| string \| undefined` | `undefined` | | `padded` | `padded` | Defines whether the items should be padded | `boolean` | `false` | diff --git a/libraries/ui-library/src/components/six-language-switcher/readme.md b/libraries/ui-library/src/components/six-language-switcher/readme.md index b62ba59c0..d629c4d59 100644 --- a/libraries/ui-library/src/components/six-language-switcher/readme.md +++ b/libraries/ui-library/src/components/six-language-switcher/readme.md @@ -7,10 +7,10 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------- | ----------- | ------------------------------------------------- | ---------------------------------------- | ------------------- | -| `languages` | `languages` | The languages which should be selectable options. | `SixLanguageSwitcherInput[] \| string[]` | `DEFAULT_LANGUAGES` | -| `selected` | `selected` | The language which should be shown as selected | `string \| undefined` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ----------- | ---------- | ------------------------------------------------- | ---------------------------------------- | ------------------- | +| `languages` | -- | The languages which should be selectable options. | `SixLanguageSwitcherInput[] \| string[]` | `DEFAULT_LANGUAGES` | +| `selected` | `selected` | The language which should be shown as selected | `string \| undefined` | `undefined` | ## Events diff --git a/libraries/ui-library/src/components/six-menu/readme.md b/libraries/ui-library/src/components/six-menu/readme.md index 2676958e6..7c441f54d 100644 --- a/libraries/ui-library/src/components/six-menu/readme.md +++ b/libraries/ui-library/src/components/six-menu/readme.md @@ -11,7 +11,7 @@ | ------------------------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | ----------- | | `disableKeyboardHandling` | `disable-keyboard-handling` | Internal: Disables handling of key presses. | `boolean` | `false` | | `itemSize` | `item-size` | Used for virtual scrolling Define how many items should be rendered in the DOM when using virtual scrolling | `number` | `10` | -| `items` | `items` | Set the options to be shown in the dropdown | `SixMenuItemData[] \| null` | `null` | +| `items` | -- | Set the options to be shown in the dropdown | `SixMenuItemData[] \| null` | `null` | | `itemsShown` | `items-shown` | Defines how many items should be shown. If the number of items is larger than this property a scrollbar will be shown | `number \| undefined` | `undefined` | | `removeBoxShadow` | `remove-box-shadow` | Set to true to remove the box-shadow | `boolean` | `false` | | `scrollingDebounce` | `scrolling-debounce` | Used for virtual scrolling Define the debounce for listening on scrolling changes in milliseconds. The lower the number the more sensitive the component reacts to scrolling changes. | `number` | `15` | diff --git a/libraries/ui-library/src/components/six-range/readme.md b/libraries/ui-library/src/components/six-range/readme.md index 1f873ccff..41558a612 100644 --- a/libraries/ui-library/src/components/six-range/readme.md +++ b/libraries/ui-library/src/components/six-range/readme.md @@ -7,22 +7,22 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ------------------- | ---------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------------------------------------- | -| `disabled` | `disabled` | Set to true to disable the input. | `boolean` | `false` | -| `errorText` | `error-text` | The error message shown, if `invalid` is set to true. | `string \| string[]` | `''` | -| `errorTextCount` | `error-text-count` | The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 | `number \| undefined` | `undefined` | -| `helpText` | `help-text` | The range's help text. Alternatively, you can use the help-text slot. | `string` | `''` | -| `invalid` | `invalid` | If this property is set to true and an error message is provided by `errorText`, the error message is displayed. | `boolean` | `false` | -| `label` | `label` | The label text. | `string` | `''` | -| `max` | `max` | The input's max attribute. | `number` | `100` | -| `min` | `min` | The input's min attribute. | `number` | `0` | -| `name` | `name` | The input's name attribute. | `string` | `''` | -| `required` | `required` | Set to true to show an asterisk beneath the label. | `boolean` | `false` | -| `step` | `step` | The input's step attribute. | `number` | `1` | -| `tooltip` | `tooltip` | The preferred placedment of the tooltip. | `"bottom" \| "none" \| "top"` | `'top'` | -| `tooltipFormatter` | `tooltip-formatter` | A function used to format the tooltip's value. | `(value: number) => string` | `(value: number) => value.toString()` | -| `value` | `value` | The input's value attribute. | `number` | `0` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------------------------------------- | +| `disabled` | `disabled` | Set to true to disable the input. | `boolean` | `false` | +| `errorText` | `error-text` | The error message shown, if `invalid` is set to true. | `string \| string[]` | `''` | +| `errorTextCount` | `error-text-count` | The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 | `number \| undefined` | `undefined` | +| `helpText` | `help-text` | The range's help text. Alternatively, you can use the help-text slot. | `string` | `''` | +| `invalid` | `invalid` | If this property is set to true and an error message is provided by `errorText`, the error message is displayed. | `boolean` | `false` | +| `label` | `label` | The label text. | `string` | `''` | +| `max` | `max` | The input's max attribute. | `number` | `100` | +| `min` | `min` | The input's min attribute. | `number` | `0` | +| `name` | `name` | The input's name attribute. | `string` | `''` | +| `required` | `required` | Set to true to show an asterisk beneath the label. | `boolean` | `false` | +| `step` | `step` | The input's step attribute. | `number` | `1` | +| `tooltip` | `tooltip` | The preferred placedment of the tooltip. | `"bottom" \| "none" \| "top"` | `'top'` | +| `tooltipFormatter` | -- | A function used to format the tooltip's value. | `(value: number) => string` | `(value: number) => value.toString()` | +| `value` | `value` | The input's value attribute. | `number` | `0` | ## Events diff --git a/libraries/ui-library/src/components/six-select/readme.md b/libraries/ui-library/src/components/six-select/readme.md index 286879041..9c93b457a 100644 --- a/libraries/ui-library/src/components/six-select/readme.md +++ b/libraries/ui-library/src/components/six-select/readme.md @@ -26,7 +26,7 @@ | `line` | `line` | Set to render as line | `boolean` | `false` | | `multiple` | `multiple` | Set to true to enable multiselect. | `boolean` | `false` | | `name` | `name` | The select's name. | `string` | `''` | -| `options` | `options` | Set the options to be shown in the dropdown (alternative to setting the elements via html) | `SixMenuItemData[] \| null` | `null` | +| `options` | -- | Set the options to be shown in the dropdown (alternative to setting the elements via html) | `SixMenuItemData[] \| null` | `null` | | `pill` | `pill` | Set to true to draw a pill-style select with rounded edges. | `boolean` | `false` | | `placeholder` | `placeholder` | The select's placeholder text. | `string` | `''` | | `required` | `required` | Set to true to show an asterisk beneath the label. | `boolean` | `false` | From a5be53b6fdbf3d76a847db8d4b8e72deec06c530 Mon Sep 17 00:00:00 2001 From: fortesp Date: Wed, 18 Jun 2025 16:59:01 +0200 Subject: [PATCH 02/32] fix: renamed to six-breadcrumbs-item --- .../src/lib/stencil-generated/components.ts | 38 +- .../src/lib/stencil-generated/index.ts | 2 +- .../src/lib/stencil-generated/components.ts | 34 +- .../src/lib/stencil-generated/components.ts | 17 +- libraries/ui-library/src/components.d.ts | 676 +----------------- .../six-breadcrumbs-item/index.html | 50 ++ .../components/six-breadcrumbs-item/readme.md | 4 +- ...mb-item.scss => six-breadcrumbs-item.scss} | 0 ...rumb-item.tsx => six-breadcrumbs-item.tsx} | 6 +- ...spec.tsx => six-breadcrumbs-item.spec.tsx} | 16 +- .../src/components/six-breadcrumbs/index.html | 12 +- .../src/components/six-breadcrumbs/readme.md | 11 +- .../six-breadcrumbs/six-breadcrumbs.scss | 4 +- .../six-breadcrumbs/six-breadcrumbs.tsx | 4 +- .../test/six-breadcrumbs.spec.tsx | 4 +- .../src/components/six-date/readme.md | 41 +- 16 files changed, 183 insertions(+), 736 deletions(-) create mode 100644 libraries/ui-library/src/components/six-breadcrumbs-item/index.html rename libraries/ui-library/src/components/six-breadcrumbs-item/{six-breadcrumb-item.scss => six-breadcrumbs-item.scss} (100%) rename libraries/ui-library/src/components/six-breadcrumbs-item/{six-breadcrumb-item.tsx => six-breadcrumbs-item.tsx} (85%) rename libraries/ui-library/src/components/six-breadcrumbs-item/test/{six-breadcrumb-item.spec.tsx => six-breadcrumbs-item.spec.tsx} (66%) diff --git a/libraries/ui-library-angular/src/lib/stencil-generated/components.ts b/libraries/ui-library-angular/src/lib/stencil-generated/components.ts index 7a5d13633..96a48ca24 100644 --- a/libraries/ui-library-angular/src/lib/stencil-generated/components.ts +++ b/libraries/ui-library-angular/src/lib/stencil-generated/components.ts @@ -98,55 +98,57 @@ export declare interface SixBadge extends Components.SixBadge {} @ProxyCmp({ - inputs: ['disabled', 'name'] + inputs: ['data'] }) @Component({ - selector: 'six-breadcrumb-item', + standalone: false, + selector: 'six-breadcrumbs', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['disabled', 'name'], + inputs: ['data'], }) -export class SixBreadcrumbItem { +export class SixBreadcrumbs { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ['sixClick']); } } -import type { EmptyPayload as ISixBreadcrumbItemEmptyPayload } from '@six-group/ui-library'; - -export declare interface SixBreadcrumbItem extends Components.SixBreadcrumbItem { - /** - * Emitted on click. - */ - sixClick: EventEmitter>; -} +export declare interface SixBreadcrumbs extends Components.SixBreadcrumbs {} @ProxyCmp({ - inputs: ['data'] + inputs: ['disabled', 'name'] }) @Component({ - selector: 'six-breadcrumbs', + standalone: false, + selector: 'six-breadcrumbs-item', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['data'], + inputs: ['disabled', 'name'], }) -export class SixBreadcrumbs { +export class SixBreadcrumbsItem { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; + proxyOutputs(this, this.el, ['sixClick']); } } -export declare interface SixBreadcrumbs extends Components.SixBreadcrumbs {} +import type { EmptyPayload as ISixBreadcrumbsItemEmptyPayload } from '@six-group/ui-library'; + +export declare interface SixBreadcrumbsItem extends Components.SixBreadcrumbsItem { + /** + * Emitted on click. + */ + sixClick: EventEmitter>; +} @ProxyCmp({ diff --git a/libraries/ui-library-angular/src/lib/stencil-generated/index.ts b/libraries/ui-library-angular/src/lib/stencil-generated/index.ts index 760120420..a943e4a3b 100644 --- a/libraries/ui-library-angular/src/lib/stencil-generated/index.ts +++ b/libraries/ui-library-angular/src/lib/stencil-generated/index.ts @@ -5,8 +5,8 @@ export const DIRECTIVES = [ d.SixAlert, d.SixAvatar, d.SixBadge, - d.SixBreadcrumbItem, d.SixBreadcrumbs, + d.SixBreadcrumbsItem, d.SixButton, d.SixCard, d.SixCheckbox, diff --git a/libraries/ui-library-react/src/lib/stencil-generated/components.ts b/libraries/ui-library-react/src/lib/stencil-generated/components.ts index fd356857c..85ec212e5 100644 --- a/libraries/ui-library-react/src/lib/stencil-generated/components.ts +++ b/libraries/ui-library-react/src/lib/stencil-generated/components.ts @@ -7,11 +7,11 @@ /* eslint-disable */ -import { type EmptyPayload, type SixAlertCustomEvent, type SixBreadcrumbItemCustomEvent, type SixButtonCustomEvent, type SixCheckboxCustomEvent, type SixDatepickerCustomEvent, type SixDatepickerSelectPayload, type SixDetailsCustomEvent, type SixDialogCustomEvent, type SixDrawerCustomEvent, type SixDropdownAsyncFilterPayload, type SixDropdownAutoFilterPayload, type SixDropdownCustomEvent, type SixDropdownScrollPayload, type SixFileListDownloadPayload, type SixFileListItemCustomEvent, type SixFileListRemovePayload, type SixFileUploadCustomEvent, type SixFileUploadFailurePayload, type SixFileUploadSuccessPayload, type SixInputCustomEvent, type SixItemPickerChangePayload, type SixItemPickerCustomEvent, type SixLanguageSwitcherChangePayload, type SixLanguageSwitcherCustomEvent, type SixMenuCustomEvent, type SixMenuItemSelectedPayload, type SixRadioCustomEvent, type SixRangeCustomEvent, type SixSearchFieldChangePayload, type SixSearchFieldCustomEvent, type SixSelectChangePayload, type SixSelectCustomEvent, type SixSidebarCustomEvent, type SixSwitchCustomEvent, type SixTabCustomEvent, type SixTabGroupCustomEvent, type SixTabHidePayload, type SixTabShowPayload, type SixTagCustomEvent, type SixTextareaCustomEvent, type SixTileCustomEvent, type SixTimepickerChange, type SixTimepickerCustomEvent, type SixTooltipCustomEvent } from "@six-group/ui-library"; +import { type EmptyPayload, type SixAlertCustomEvent, type SixBreadcrumbsItemCustomEvent, type SixButtonCustomEvent, type SixCheckboxCustomEvent, type SixDatepickerCustomEvent, type SixDatepickerSelectPayload, type SixDetailsCustomEvent, type SixDialogCustomEvent, type SixDialogRequestClose, type SixDrawerCustomEvent, type SixDrawerRequestClose, type SixDropdownAsyncFilterPayload, type SixDropdownAutoFilterPayload, type SixDropdownCustomEvent, type SixDropdownScrollPayload, type SixFileListDownloadPayload, type SixFileListItemCustomEvent, type SixFileListRemovePayload, type SixFileUploadCustomEvent, type SixFileUploadFailurePayload, type SixFileUploadSuccessPayload, type SixInputCustomEvent, type SixItemPickerChangePayload, type SixItemPickerCustomEvent, type SixLanguageSwitcherChangePayload, type SixLanguageSwitcherCustomEvent, type SixMenuCustomEvent, type SixMenuItemSelectedPayload, type SixRadioCustomEvent, type SixRangeCustomEvent, type SixSearchFieldChangePayload, type SixSearchFieldCustomEvent, type SixSelectChangePayload, type SixSelectCustomEvent, type SixSidebarCustomEvent, type SixSwitchCustomEvent, type SixTabCustomEvent, type SixTabGroupCustomEvent, type SixTabHidePayload, type SixTabShowPayload, type SixTagCustomEvent, type SixTextareaCustomEvent, type SixTileCustomEvent, type SixTimepickerChange, type SixTimepickerCustomEvent, type SixTooltipCustomEvent } from "@six-group/ui-library"; import { SixAlert as SixAlertElement, defineCustomElement as defineSixAlert } from "@six-group/ui-library/dist/components/six-alert.js"; import { SixAvatar as SixAvatarElement, defineCustomElement as defineSixAvatar } from "@six-group/ui-library/dist/components/six-avatar.js"; import { SixBadge as SixBadgeElement, defineCustomElement as defineSixBadge } from "@six-group/ui-library/dist/components/six-badge.js"; -import { SixBreadcrumbItem as SixBreadcrumbItemElement, defineCustomElement as defineSixBreadcrumbItem } from "@six-group/ui-library/dist/components/six-breadcrumb-item.js"; +import { SixBreadcrumbsItem as SixBreadcrumbsItemElement, defineCustomElement as defineSixBreadcrumbsItem } from "@six-group/ui-library/dist/components/six-breadcrumbs-item.js"; import { SixBreadcrumbs as SixBreadcrumbsElement, defineCustomElement as defineSixBreadcrumbs } from "@six-group/ui-library/dist/components/six-breadcrumbs.js"; import { SixButton as SixButtonElement, defineCustomElement as defineSixButton } from "@six-group/ui-library/dist/components/six-button.js"; import { SixCard as SixCardElement, defineCustomElement as defineSixCard } from "@six-group/ui-library/dist/components/six-card.js"; @@ -114,17 +114,6 @@ export const SixBadge: StencilReactComponent = defineCustomElement: defineSixBadge }); -type SixBreadcrumbItemEvents = { onSixClick: EventName> }; - -export const SixBreadcrumbItem: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'six-breadcrumb-item', - elementClass: SixBreadcrumbItemElement, - // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. - react: React, - events: { onSixClick: 'sixClick' } as SixBreadcrumbItemEvents, - defineCustomElement: defineSixBreadcrumbItem -}); - type SixBreadcrumbsEvents = NonNullable; export const SixBreadcrumbs: StencilReactComponent = /*@__PURE__*/ createComponent({ @@ -136,6 +125,17 @@ export const SixBreadcrumbs: StencilReactComponent> }; + +export const SixBreadcrumbsItem: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'six-breadcrumbs-item', + elementClass: SixBreadcrumbsItemElement, + // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored. + react: React, + events: { onSixClick: 'sixClick' } as SixBreadcrumbsItemEvents, + defineCustomElement: defineSixBreadcrumbsItem +}); + type SixButtonEvents = { onSixButtonBlur: EventName>, onSixButtonFocus: EventName> @@ -246,7 +246,7 @@ type SixDialogEvents = { onSixDialogHide: EventName>, onSixDialogAfterHide: EventName>, onSixDialogInitialFocus: EventName>, - onSixDialogOverlayDismiss: EventName> + onSixDialogRequestClose: EventName> }; export const SixDialog: StencilReactComponent = /*@__PURE__*/ createComponent({ @@ -260,7 +260,7 @@ export const SixDialog: StencilReactComponent onSixDialogHide: 'six-dialog-hide', onSixDialogAfterHide: 'six-dialog-after-hide', onSixDialogInitialFocus: 'six-dialog-initial-focus', - onSixDialogOverlayDismiss: 'six-dialog-overlay-dismiss' + onSixDialogRequestClose: 'six-dialog-request-close' } as SixDialogEvents, defineCustomElement: defineSixDialog }); @@ -271,7 +271,7 @@ type SixDrawerEvents = { onSixDrawerHide: EventName>, onSixDrawerAfterHide: EventName>, onSixDrawerInitialFocus: EventName>, - onSixDrawerOverlayDismiss: EventName> + onSixDrawerRequestClose: EventName> }; export const SixDrawer: StencilReactComponent = /*@__PURE__*/ createComponent({ @@ -285,7 +285,7 @@ export const SixDrawer: StencilReactComponent onSixDrawerHide: 'six-drawer-hide', onSixDrawerAfterHide: 'six-drawer-after-hide', onSixDrawerInitialFocus: 'six-drawer-initial-focus', - onSixDrawerOverlayDismiss: 'six-drawer-overlay-dismiss' + onSixDrawerRequestClose: 'six-drawer-request-close' } as SixDrawerEvents, defineCustomElement: defineSixDrawer }); diff --git a/libraries/ui-library-vue/src/lib/stencil-generated/components.ts b/libraries/ui-library-vue/src/lib/stencil-generated/components.ts index ce7a99775..3658daf48 100644 --- a/libraries/ui-library-vue/src/lib/stencil-generated/components.ts +++ b/libraries/ui-library-vue/src/lib/stencil-generated/components.ts @@ -35,15 +35,15 @@ export const SixBadge = /*@__PURE__*/ defineContainer('six-badge', ]); -export const SixBreadcrumbItem = /*@__PURE__*/ defineContainer('six-breadcrumb-item', undefined, [ - 'name', - 'disabled', - 'sixClick' +export const SixBreadcrumbs = /*@__PURE__*/ defineContainer('six-breadcrumbs', undefined, [ + 'data' ]); -export const SixBreadcrumbs = /*@__PURE__*/ defineContainer('six-breadcrumbs', undefined, [ - 'data' +export const SixBreadcrumbsItem = /*@__PURE__*/ defineContainer('six-breadcrumbs-item', undefined, [ + 'name', + 'disabled', + 'sixClick' ]); @@ -105,7 +105,6 @@ export const SixDate = /*@__PURE__*/ defineContainer('six-dialo 'six-dialog-hide', 'six-dialog-after-hide', 'six-dialog-initial-focus', - 'six-dialog-overlay-dismiss' + 'six-dialog-request-close' ]); @@ -189,7 +188,7 @@ export const SixDrawer = /*@__PURE__*/ defineContainer('six-drawe 'six-drawer-hide', 'six-drawer-after-hide', 'six-drawer-initial-focus', - 'six-drawer-overlay-dismiss' + 'six-drawer-request-close' ]); diff --git a/libraries/ui-library/src/components.d.ts b/libraries/ui-library/src/components.d.ts index 18d9d128d..63f4706df 100644 --- a/libraries/ui-library/src/components.d.ts +++ b/libraries/ui-library/src/components.d.ts @@ -62,12 +62,10 @@ export namespace Components { interface SixAlert { /** * Set to true to make the alert closable. - * @default false */ "closable": boolean; /** * The length of time, in milliseconds, the alert will show before closing itself. If the user hovers over the toast alert, the timer will pause. On leaving the element with the mouse, the timer resets. - * @default Infinity */ "duration": number; /** @@ -76,7 +74,6 @@ export namespace Components { "hide": () => Promise; /** * Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. - * @default false */ "open": boolean; /** @@ -90,7 +87,6 @@ export namespace Components { "toast": (adjustPosition?: boolean) => Promise; /** * The type of alert. - * @default 'primary' */ "type": AlertType; } @@ -102,22 +98,18 @@ export namespace Components { interface SixAvatar { /** * Alternative text for the image. - * @default '' */ "alt": string; /** * The image source to use for the avatar. - * @default '' */ "image": string; /** * Initials to use as a fallback when no image is available (1-2 characters max recommended). - * @default '' */ "initials": string; /** * The shape of the avatar. - * @default 'circle' */ "shape": 'circle' | 'square' | 'rounded'; } @@ -129,21 +121,24 @@ export namespace Components { interface SixBadge { /** * Set to true to draw a pill-style badge with rounded edges. - * @default false */ "pill": boolean; /** * Set to true to make the badge pulsate to draw attention. - * @default false */ "pulse": boolean; /** * The badge's type. - * @default 'primary' */ "type": 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action'; } - interface SixBreadcrumbItem { + interface SixBreadcrumbs { + /** + * Data for the breadcrumbs + */ + "data": SixBreadcrumbsData; + } + interface SixBreadcrumbsItem { /** * If the breadcrumb is disabled */ @@ -153,12 +148,6 @@ export namespace Components { */ "name": string; } - interface SixBreadcrumbs { - /** - * Data for the breadcrumbs - */ - "data": SixBreadcrumbsData; - } /** * @since 1.0 * @status stable @@ -167,17 +156,14 @@ export namespace Components { interface SixButton { /** * Set to true to draw the button with a caret for use with dropdowns, popovers, etc. - * @default false */ "caret": boolean; /** * Set to true to draw a circle button. - * @default false */ "circle": boolean; /** * Set to true to disable the button. - * @default false */ "disabled": boolean; /** @@ -190,17 +176,14 @@ export namespace Components { "href"?: string; /** * Set to true to draw the button in a loading state. - * @default false */ "loading": boolean; /** * An optional name for the button. Ignored when `href` is set. - * @default '' */ "name": string; /** * Set to true to draw a pill-style button with rounded edges. - * @default false */ "pill": boolean; /** @@ -209,7 +192,6 @@ export namespace Components { "removeFocus": () => Promise; /** * Indicates if activating the button should reset the form. - * @default false */ "reset": boolean; /** @@ -218,12 +200,10 @@ export namespace Components { "setFocus": (options?: FocusOptions) => Promise; /** * The button's size. - * @default 'medium' */ "size": 'small' | 'medium' | 'large'; /** * Indicates if activating the button should submit the form. Ignored when `href` is set. - * @default false */ "submit": boolean; /** @@ -232,7 +212,6 @@ export namespace Components { "target"?: '_blank' | '_parent' | '_self' | '_top'; /** * The button's type. - * @default 'primary' */ "type": | 'secondary' | 'primary' @@ -244,7 +223,6 @@ export namespace Components { | 'action-outline'; /** * An optional value for the button. Ignored when `href` is set. - * @default '' */ "value": string; } @@ -262,17 +240,14 @@ export namespace Components { interface SixCheckbox { /** * Set to true to draw the checkbox in a checked state. - * @default false */ "checked": boolean; /** * Set to true to disable the checkbox. - * @default false */ "disabled": boolean; /** * The error message shown, if `invalid` is set to true. - * @default '' */ "errorText": string | string[]; /** @@ -281,22 +256,18 @@ export namespace Components { "errorTextCount"?: number; /** * Set to true to draw the checkbox in an indeterminate state. - * @default false */ "indeterminate": boolean; /** * If this property is set to true and an error message is provided by `errorText`, the error message is displayed. - * @default false */ "invalid": boolean; /** * The label text. - * @default '' */ "label": string; /** * The checkbox's name attribute. - * @default '' */ "name": string; /** @@ -305,7 +276,6 @@ export namespace Components { "removeFocus": () => Promise; /** * Set to true to show an asterisk beneath the label. - * @default false */ "required": boolean; /** @@ -314,7 +284,6 @@ export namespace Components { "setFocus": (options?: FocusOptions) => Promise; /** * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that. The value of a checkbox is analogous to the value of an ``, it's only used when the checkbox participates in a native `
`. - * @default 'on' */ "value": string; } @@ -326,27 +295,22 @@ export namespace Components { interface SixDate { /** * Callback to determine which dates in the picker should be selectable. - * @default () => true */ "allowedDates": (date: string) => boolean; /** * Set to true to add a clear button when the input is populated. - * @default false */ "clearable": boolean; /** * Defines the format pattern for displaying dates and how dates can be entered via keyboard. The parser accepts flexible input that doesn't strictly match the format pattern. Input with missing leading zeros or incomplete years will be automatically normalized. For example, with the pattern "dd.MM.yyyy": "1.1.2025" becomes "01.01.2025" and "1.1.225" becomes "01.01.0225". Defaults to "dd.MM.yyyy". Available patterns: - Year: "yyyy" (e.g., "2021") - Month: "MM" (e.g., "01" for January) or "M" (e.g., "1" for January) - Day: "dd" (e.g., "08" for the 8th) or "d" (e.g., "8" for the 8th) Examples: - "dd.MM.yyyy" -> "31.01.2024" - "yyyy-MM-dd" -> "2024-01-31" - "d.M.yyyy" -> "31.1.2024" - * @default 'dd.MM.yyyy' */ "dateFormat": string; /** * If `true` the component is disabled. - * @default false */ "disabled": boolean; /** * The error message shown, if `invalid` is set to true. - * @default '' */ "errorText": string | string[]; /** @@ -355,22 +319,18 @@ export namespace Components { "errorTextCount"?: number; /** * The input's help text. Alternatively, you can use the help-text slot. - * @default '' */ "helpText": string; /** * If this property is set to true and an error message is provided by `errorText`, the error message is displayed. - * @default false */ "invalid": boolean; /** * The label text. - * @default '' */ "label": string; /** * The language used to render the weekdays and months. - * @default 'en' */ "language": Language; /** @@ -383,7 +343,6 @@ export namespace Components { "min"?: string; /** * The input's name attribute. - * @default '' */ "name": string; /** @@ -392,12 +351,10 @@ export namespace Components { "placeholder"?: string; /** * If `true` the user can only select a date via the component in the popup but not directly edit the input field. - * @default false */ "readonly": boolean; /** * Set to true to show an asterisk beneath the label. - * @default false */ "required": boolean; /** @@ -406,12 +363,10 @@ export namespace Components { "setFocus": (options?: FocusOptions) => Promise; /** * The size of the date input field. - * @default 'medium' */ "size": 'small' | 'medium' | 'large'; /** * The value of the form field in ISO 8601 date format (yyyy-MM-dd). Example: '2024-01-01'. When an invalid date is provided, it will be replaced with an empty string (''), matching the behavior of native HTML . The displayed format can be customized using the dateFormat property, but the underlying value will always be stored in ISO format. - * @default '' */ "value": string | ''; } @@ -422,17 +377,14 @@ export namespace Components { interface SixDatepicker { /** * Callback to determine which date in the datepicker should be selectable. the callback function will get a datestring as an argument, e.g. '2021-07-04' Usage e.g.: const datepicker = document.getElementById('allowed-date-picker'); datepicker.allowedDates = datestring => parseInt(datestring.split('-')[2], 10) % 2 === 0; - * @default () => true */ "allowedDates": (date: Date) => boolean; /** * Set to true to add a clear button when the input is populated. - * @default false */ "clearable": boolean; /** * Closes the datepicker dropdown after selection - * @default this.type === 'date' */ "closeOnSelect": boolean; /** @@ -441,12 +393,10 @@ export namespace Components { "containingElement"?: HTMLElement; /** * Define the dateFormat. Valid formats are: 'dd.mm.yyyy' 'yyyy-mm-dd' 'dd-mm-yyyy' 'dd/mm/yyyy' 'yyyy/mm/dd' 'dd.mm.yy' 'yy-mm-dd' 'dd-mm-yy' 'dd/mm/yy' 'yy/mm/dd' - * @default SixDateFormats.DDMMYYY_DOT */ "dateFormat": SixDateFormats; /** * Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke. - * @default DEFAULT_DEBOUNCE_FAST */ "debounce": number; /** @@ -455,12 +405,10 @@ export namespace Components { "defaultDate"?: string; /** * If `true` the component is disabled. - * @default false */ "disabled": boolean; /** * The error message shown, if `invalid` is set to true. - * @default '' */ "errorText": string | string[]; /** @@ -469,32 +417,26 @@ export namespace Components { "errorTextCount"?: number; /** * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`. - * @default false */ "hoist": boolean; /** * Set the position of the icon - * @default 'left' */ "iconPosition": 'left' | 'right'; /** * Indicates whether or not the calendar should be shown as an inline (always open) component - * @default false */ "inline": boolean; /** * If this property is set to true and an error message is provided by `errorText`, the error message is displayed. - * @default false */ "invalid": boolean; /** * The label text. - * @default '' */ "label": string; /** * The language used to render the weekdays and months. - * @default 'en' */ "locale": 'en' | 'de' | 'fr' | 'it' | 'es'; /** @@ -507,12 +449,10 @@ export namespace Components { "min"?: Date; /** * The input's name attribute. - * @default '' */ "name": string; /** * Indicates whether or not the calendar dropdown is open on startup. You can use this in lieu of the show/hide methods. - * @default false */ "open": boolean; /** @@ -525,12 +465,10 @@ export namespace Components { "placement"?: 'top' | 'bottom'; /** * If `true` the user can only select a date via the component in the popup, but not directly edit the input field. - * @default false */ "readonly": boolean; /** * Set to true to show an asterisk beneath the label. - * @default false */ "required": boolean; /** @@ -543,12 +481,10 @@ export namespace Components { "setFocus": (options?: FocusOptions) => Promise; /** * Datepicker size. - * @default 'medium' */ "size": 'small' | 'medium' | 'large'; /** * Set the type. - * @default 'date' */ "type": 'date' | 'date-time'; /** @@ -564,12 +500,10 @@ export namespace Components { interface SixDetails { /** * Set to true to prevent the user from toggling the details. - * @default false */ "disabled": boolean; /** * Set to false when you want to hide the summary icon and disable the open/close mechanism. Usually not needed, but used internally by 'six-sidebar-item-group' - * @default true */ "hasContent": boolean; /** @@ -578,17 +512,14 @@ export namespace Components { "hide": () => Promise; /** * Set to true when you want to use six-details inline e.g. in a sidebar - * @default false */ "inline": boolean; /** * Indicates whether the details is open. You can use this in lieu of the show/hide methods. - * @default false */ "open": boolean; /** * Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children - * @default false */ "selectableEmpty": boolean; /** @@ -597,7 +528,6 @@ export namespace Components { "show": () => Promise; /** * The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. - * @default '' */ "summary": string; /** @@ -606,7 +536,6 @@ export namespace Components { "summaryIcon"?: string; /** * The icon's size. - * @default 'inherit' */ "summaryIconSize": | 'inherit' | 'xSmall' @@ -629,17 +558,14 @@ export namespace Components { "hide": () => Promise; /** * The dialog's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility. - * @default '' */ "label": string; /** * Set to true to disable the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the dialog. - * @default false */ "noHeader": boolean; /** * Indicates whether the dialog is open. You can use this in lieu of the show/hide methods. - * @default false */ "open": boolean; /** @@ -655,7 +581,6 @@ export namespace Components { interface SixDrawer { /** * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of its parent element, set this prop and add `position: relative` to the parent. - * @default false */ "contained": boolean; /** @@ -664,22 +589,18 @@ export namespace Components { "hide": () => Promise; /** * The drawer's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility. - * @default '' */ "label": string; /** * Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer. - * @default false */ "noHeader": boolean; /** * Indicates whether the drawer is open. You can use this in lieu of the show/hide methods. - * @default false */ "open": boolean; /** * The direction from which the drawer will open. - * @default 'right' */ "placement": 'top' | 'right' | 'bottom' | 'left'; /** @@ -695,17 +616,14 @@ export namespace Components { interface SixDropdown { /** * Set to true to allow async filtering. When you enter something in the search field the component will only emit an event but not filter any elements itself. You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself - * @default false */ "asyncFilter": boolean; /** * By default the search field will be focused when opening a dropdown with filtering enabled. - * @default true */ "autofocusFilter": boolean; /** * Determines whether the dropdown should hide when a menu item is selected. - * @default true */ "closeOnSelect": boolean; /** @@ -714,27 +632,22 @@ export namespace Components { "containingElement"?: HTMLElement; /** * The panel can be opend/closed by pressing the spacebar or the enter key. In some cases you might want to avoid this - * @default false */ "disableHideOnEnterAndSpace": boolean; /** * The distance in pixels from which to offset the panel away from its trigger. - * @default 4 */ "distance": number; /** * Set to true to allow auto filtering for entries in the dropdown. With this flag the dropdown will automatically filter itsel. If you need to coordinate the shown elements yourself, e.g. because you need to call an endpoint use asyncFilter instead - * @default false */ "filter": boolean; /** * The debounce for the filter callbacks. - * @default 0 */ "filterDebounce": number; /** * The filter's placeholder text. - * @default 'Filter...' */ "filterPlaceholder": string; /** @@ -743,27 +656,22 @@ export namespace Components { "hide": () => Promise; /** * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`. - * @default false */ "hoist": boolean; /** * Determines if the dropdown panel's width should match the width of the trigger element. If set to `true`, the panel will resize its width to align with the trigger's width. If `false` or omitted, the panel will maintain its default width. - * @default false */ "matchTriggerWidth": boolean; /** * Indicates whether the dropdown is open. You can use this in lieu of the show/hide methods. - * @default false */ "open": boolean; /** * Set the options to be shown in the dropdown (alternative to setting the elements via html) - * @default [] */ "options": SixMenuItemData[]; /** * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside the viewport. - * @default 'bottom-start' */ "placement": | 'top' | 'top-start' @@ -783,12 +691,10 @@ export namespace Components { "show": () => Promise; /** * The distance in pixels from which to offset the panel along its trigger. - * @default 0 */ "skidding": number; /** * Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around) are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. - * @default false */ "virtualScroll": boolean; } @@ -817,7 +723,6 @@ export namespace Components { "errorCode"?: 404 | 403 | 500; /** * Defines language and thus displays the proper error page in the selected language. - * @default 'en' */ "language": 'en' | 'de'; } @@ -834,27 +739,22 @@ export namespace Components { interface SixFileListItem { /** * The date when the file was uploaded - * @default '' */ "date": string; /** * An id to clearly identify the file - * @default '' */ "identifier": string; /** * The filename - * @default '' */ "name": string; /** * Set to true if you don't want to allow to delete this file - * @default false */ "nodelete": boolean; /** * Set to true if you don't want to allow to download this file - * @default false */ "nodownload": boolean; /** @@ -873,22 +773,18 @@ export namespace Components { "accept"?: string; /** * Set to true if file control should be small. - * @default false */ "compact": boolean; /** * Set when button is disabled. - * @default false */ "disabled": false; /** * The error message shown, if `invalid` is set to true. - * @default '' */ "errorText": string | string[]; /** * If this property is set to true and an error message is provided by `errorText`, the error message is displayed. - * @default false */ "invalid": boolean; /** @@ -901,12 +797,10 @@ export namespace Components { "maxFileSize"?: number; /** * More than one file allowed. - * @default false */ "multiple": false; /** * Set to true to draw the control in a loading state. - * @default false */ "uploading": boolean; } @@ -923,27 +817,22 @@ export namespace Components { interface SixGroupLabel { /** * Set to true to disable the label. - * @default false */ "disabled": boolean; /** * The wrapper label's help text. Alternatively, you can use the help-text slot. - * @default '' */ "helpText": string; /** * The wrapper label's label. Alternatively, you can use the label slot. - * @default '' */ "label": string; /** * Set to true to show an asterisk beneath the label. - * @default false */ "required": boolean; /** * The label's size. - * @default 'medium' */ "size": 'small' | 'medium' | 'large'; } @@ -954,12 +843,10 @@ export namespace Components { interface SixHeader { /** * Set the header search input to be in an open or closed state. Focuses the first `six-input` found in the search slot. - * @default false */ "openSearch": boolean; /** * Indicates if content should be shifted down when search field is visible. - * @default false */ "shiftContent": boolean; } @@ -970,12 +857,10 @@ export namespace Components { interface SixHeaderDropdownItem { /** * Set to true to allow auto filtering for entries in the dropdown. With this flag the dropdown will automatically filter itsel. If you need to coordinate the shown elements yourself, e.g. because you need to call an endpoint use asyncFilter instead - * @default false */ "filter": boolean; /** * The filter's placeholder text. - * @default 'Filter...' */ "filterPlaceholder": string; } @@ -986,7 +871,6 @@ export namespace Components { interface SixHeaderItem { /** * Indicates whether the item is styled as active. When set to `true`, a border is displayed below the trigger element. Use six-header-dropdown-item to automatically set the active state for dropdowns. - * @default false */ "active": boolean; } @@ -997,27 +881,22 @@ export namespace Components { interface SixHeaderMenuButton { /** * Set to true to draw the button with a caret for use with dropdowns, popovers, etc. - * @default false */ "caret": boolean; /** * Set to true to disable the button. - * @default false */ "disabled": boolean; /** * Set to true to draw the button in a loading state. - * @default false */ "loading": boolean; /** * Indicates if activating the button should reset the form. - * @default false */ "reset": boolean; /** * Indicates if activating the button should submit the form. Ignored when `href` is set. - * @default false */ "submit": boolean; } @@ -1028,12 +907,10 @@ export namespace Components { interface SixIcon { /** * If set to true the default material outlined icons are not used. - * @default false */ "filled": boolean; /** * The icon's size. - * @default 'inherit' */ "size": | 'inherit' | 'xSmall' @@ -1052,7 +929,6 @@ export namespace Components { interface SixIconButton { /** * Set to true to disable the button. - * @default false */ "disabled": boolean; /** @@ -1077,7 +953,6 @@ export namespace Components { "name"?: string; /** * The icon's size. - * @default 'medium' */ "size": 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge'; /** @@ -1093,42 +968,34 @@ export namespace Components { interface SixInput { /** * The input's autocaptialize attribute. - * @default 'off' */ "autocapitalize": string; /** * The input's autocomplete attribute. - * @default 'off' */ "autocomplete": string; /** * The input's autocorrect attribute. - * @default 'off' */ "autocorrect": 'on' | 'off'; /** * The input's autofocus attribute. - * @default false */ "autofocus": boolean; /** * Set to true to add a clear button when the input is populated. - * @default false */ "clearable": boolean; /** * Set to true to disable the input. - * @default false */ "disabled": boolean; /** * Internal: Styles the input for the dropdown filter search. - * @default false */ "dropdownSearch": boolean; /** * The error message shown, if `invalid` is set to true. - * @default '' */ "errorText": string | string[]; /** @@ -1141,7 +1008,6 @@ export namespace Components { "getSelectionRange": () => Promise; /** * The input's help text. Alternatively, you can use the help-text slot. - * @default '' */ "helpText": string; /** @@ -1150,17 +1016,14 @@ export namespace Components { "inputmode"?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'; /** * If this property is set to true and an error message is provided by `errorText`, the error message is displayed. - * @default false */ "invalid": boolean; /** * The label text. - * @default '' */ "label": string; /** * Set to render as line - * @default false */ "line": boolean; /** @@ -1181,7 +1044,6 @@ export namespace Components { "minlength"?: number; /** * The input's name attribute. - * @default '' */ "name": string; /** @@ -1190,7 +1052,6 @@ export namespace Components { "pattern"?: string; /** * Set to true to draw a pill-style input with rounded edges. - * @default false */ "pill": boolean; /** @@ -1199,7 +1060,6 @@ export namespace Components { "placeholder"?: string; /** * Set to true to make the input readonly. - * @default false */ "readonly": boolean; /** @@ -1208,7 +1068,6 @@ export namespace Components { "removeFocus": () => Promise; /** * Set to true to show an asterisk beneath the label. - * @default false */ "required": boolean; /** @@ -1229,12 +1088,10 @@ export namespace Components { "setSelectionRange": (selectionStart: number, selectionEnd: number, selectionDirection?: SelectionRangeDirection) => Promise; /** * The input's size. - * @default 'medium' */ "size": 'small' | 'medium' | 'large'; /** * Enables spell checking on the input. - * @default false */ "spellcheck": boolean; /** @@ -1243,17 +1100,14 @@ export namespace Components { "step"?: number; /** * Set to true to add a password toggle button for password inputs. - * @default false */ "togglePassword": boolean; /** * The input's type. - * @default 'text' */ "type": 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url'; /** * The input's value attribute. - * @default '' */ "value": string; } @@ -1264,12 +1118,10 @@ export namespace Components { interface SixItemPicker { /** * Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event. If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click (and keep pressed) and once you release - * @default DEFAULT_DEBOUNCE_FAST */ "debounce": number; /** * Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed. - * @default DEFAULT_DEBOUNCE_INSANELY_FAST */ "interval": number; /** @@ -1286,54 +1138,44 @@ export namespace Components { "min"?: number | string; /** * Defines whether the items should be padded - * @default false */ "padded": boolean; /** * Defines the character used for padding - * @default '0' */ "paddingChar": string; /** * Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default, before is selected - * @default ItemPickerPaddingDirection.BEFORE */ "paddingDirection": ItemPickerPaddingDirection; /** * Defines the length of the padded area - * @default 2 */ "paddingLength": number; /** * Define whether the picker should to a roundtrip i.e. start at max when reaching min and vice versa. - * @default true */ "roundtrip": boolean; /** * Defines how many steps should be taken when navigating - * @default 1 */ "step": number; /** * Set the amount of time, in milliseconds, to wait to trigger faster switching between items. - * @default DEFAULT_DEBOUNCE_FAST */ "timeout": number; /** * The type of items you want to rotate through. - * @default ItemPickerType.NUMBER */ "type": ItemPickerType; /** * The item picker's value attribute. - * @default '' */ "value": number | string; } interface SixLanguageSwitcher { /** * The languages which should be selectable options. - * @default DEFAULT_LANGUAGES */ "languages": string[] | SixLanguageSwitcherInput[]; /** @@ -1358,7 +1200,6 @@ export namespace Components { interface SixLogo { /** * The brand of the logo. Either six or bme. Defaults to six. - * @default 'six' */ "brand": 'six' | 'bme'; } @@ -1369,7 +1210,6 @@ export namespace Components { interface SixMainContainer { /** * Set to false to remove top and bottom padding. - * @default true */ "padded": boolean; } @@ -1381,17 +1221,14 @@ export namespace Components { interface SixMenu { /** * Internal: Disables handling of key presses. - * @default false */ "disableKeyboardHandling": boolean; /** * Used for virtual scrolling Define how many items should be rendered in the DOM when using virtual scrolling - * @default 10 */ "itemSize": number; /** * Set the options to be shown in the dropdown - * @default null */ "items": SixMenuItemData1[] | null; /** @@ -1400,12 +1237,10 @@ export namespace Components { "itemsShown"?: number; /** * Set to true to remove the box-shadow - * @default false */ "removeBoxShadow": boolean; /** * Used for virtual scrolling Define the debounce for listening on scrolling changes in milliseconds. The lower the number the more sensitive the component reacts to scrolling changes. - * @default 15 */ "scrollingDebounce": number; /** @@ -1414,7 +1249,6 @@ export namespace Components { "typeToSelect": (key: string) => Promise; /** * Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around) are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. - * @default false */ "virtualScroll": boolean; } @@ -1433,17 +1267,14 @@ export namespace Components { interface SixMenuItem { /** * Defines if the checked state is displayed as a checkbox or a check-icon - * @default 'check' */ "checkType": 'checkbox' | 'check'; /** * Internal: Draws the item in a checked state. CheckType needs to be set to 'checkbox' or 'check' to show the checked state - * @default false */ "checked": boolean; /** * Set to true to draw the menu item in a disabled state. - * @default false */ "disabled": boolean; /** @@ -1460,7 +1291,6 @@ export namespace Components { "setFocus": (options?: FocusOptions) => Promise; /** * A unique value to store in the menu item. This can be used as a way to identify menu items when selected. - * @default '' */ "value": string; } @@ -1478,7 +1308,6 @@ export namespace Components { interface SixPicto { /** * Defines the size of the icon. - * @default 'medium' */ "size": 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | '4xl'; } @@ -1490,12 +1319,10 @@ export namespace Components { interface SixProgressBar { /** * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. - * @default false */ "indeterminate": boolean; /** * The progress bar's percentage, 0 to 100. - * @default 0 */ "percentage": number; } @@ -1507,17 +1334,14 @@ export namespace Components { interface SixProgressRing { /** * The current progress percentage, 0 - 100. - * @default 0 */ "percentage": number; /** * The size of the progress ring in pixels. - * @default 128 */ "size": number; /** * The stroke width of the progress ring in pixels. - * @default 4 */ "strokeWidth": number; } @@ -1529,22 +1353,18 @@ export namespace Components { interface SixRadio { /** * Set to true to draw the radio in a checked state. - * @default false */ "checked": boolean; /** * Set to true to disable the radio. - * @default false */ "disabled": boolean; /** * If this property is set to true and an error message is provided by `errorText`, the error message is displayed. - * @default false */ "invalid": boolean; /** * The radio's name attribute. - * @default '' */ "name": string; /** @@ -1557,7 +1377,6 @@ export namespace Components { "setFocus": (options?: FocusOptions) => Promise; /** * The radio's value attribute. - * @default 'on' */ "value": string; } @@ -1569,12 +1388,10 @@ export namespace Components { interface SixRange { /** * Set to true to disable the input. - * @default false */ "disabled": boolean; /** * The error message shown, if `invalid` is set to true. - * @default '' */ "errorText": string | string[]; /** @@ -1583,32 +1400,26 @@ export namespace Components { "errorTextCount"?: number; /** * The range's help text. Alternatively, you can use the help-text slot. - * @default '' */ "helpText": string; /** * If this property is set to true and an error message is provided by `errorText`, the error message is displayed. - * @default false */ "invalid": boolean; /** * The label text. - * @default '' */ "label": string; /** * The input's max attribute. - * @default 100 */ "max": number; /** * The input's min attribute. - * @default 0 */ "min": number; /** * The input's name attribute. - * @default '' */ "name": string; /** @@ -1617,7 +1428,6 @@ export namespace Components { "removeFocus": () => Promise; /** * Set to true to show an asterisk beneath the label. - * @default false */ "required": boolean; /** @@ -1626,22 +1436,18 @@ export namespace Components { "setFocus": (options?: FocusOptions) => Promise; /** * The input's step attribute. - * @default 1 */ "step": number; /** * The preferred placedment of the tooltip. - * @default 'top' */ "tooltip": 'top' | 'bottom' | 'none'; /** * A function used to format the tooltip's value. - * @default (value: number) => value.toString() */ "tooltipFormatter": (value: number) => string; /** * The input's value attribute. - * @default 0 */ "value": number; } @@ -1713,17 +1519,14 @@ export namespace Components { interface SixRoot { /** * Defines whether the content section should be padded - * @default true */ "padded": boolean; /** * Defines the stage of the application - * @default null */ "stage": StageType; /** * Defines the version of the application - * @default '' */ "version": string; } @@ -1734,17 +1537,14 @@ export namespace Components { interface SixSearchField { /** * Set to true to add a clear button when the input is populated. - * @default false */ "clearable": boolean; /** * Debounce time in milliseconds, default is 300 ms - * @default DEFAULT_DEBOUNCE_FAST */ "debounce": number; /** * Set to true to disable the input. - * @default false */ "disabled": boolean; /** @@ -1753,7 +1553,6 @@ export namespace Components { "placeholder"?: string; /** * The input's value attribute. - * @default '' */ "value": string; } @@ -1765,27 +1564,22 @@ export namespace Components { interface SixSelect { /** * Set to true to allow async filtering. When you enter something in the search field the component will only emit an event but not filter any elements itself. You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself - * @default false */ "asyncFilter": boolean; /** * Set to true to turn the six-select into an autocomplete. - * @default false */ "autocomplete": boolean; /** * Set to true to add a clear button when the select is populated. - * @default false */ "clearable": boolean; /** * Set to true to disable the select control. - * @default false */ "disabled": boolean; /** * The error message shown, if `invalid` is set to true. - * @default '' */ "errorText": string | string[]; /** @@ -1794,7 +1588,6 @@ export namespace Components { "errorTextCount"?: number; /** * Set to true to allow filtering for entries in the dropdown - * @default false */ "filter": boolean; /** @@ -1807,67 +1600,54 @@ export namespace Components { "filterPlaceholder"?: string; /** * The select's help text. Alternatively, you can use the help-text slot. - * @default '' */ "helpText": string; /** * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`. - * @default false */ "hoist": boolean; /** * The debounce for when the input changes for autocompletes should be emitted - * @default DEFAULT_DEBOUNCE_FAST */ "inputDebounce": number; /** * If this property is set to true and an error message is provided by `errorText`, the error message is displayed. - * @default false */ "invalid": boolean; /** * The label text. - * @default '' */ "label": string; /** * Set to render as line - * @default false */ "line": boolean; /** * Set to true to enable multiselect. - * @default false */ "multiple": boolean; /** * The select's name. - * @default '' */ "name": string; /** * Set the options to be shown in the dropdown (alternative to setting the elements via html) - * @default null */ "options": SixMenuItemData[] | null; /** * Set to true to draw a pill-style select with rounded edges. - * @default false */ "pill": boolean; /** * The select's placeholder text. - * @default '' */ "placeholder": string; /** * Set to true to show an asterisk beneath the label. - * @default false */ "required": boolean; /** * Enables the select all button. - * @default false */ "selectAllButton": boolean; /** @@ -1880,17 +1660,14 @@ export namespace Components { "setFocus": (options?: FocusOptions) => Promise; /** * The select's size. - * @default 'medium' */ "size": 'small' | 'medium' | 'large'; /** * The value of the control. This will be a string or an array depending on `multiple`. - * @default '' */ "value": string | string[]; /** * Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around) are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. - * @default false */ "virtualScroll": boolean; } @@ -1905,12 +1682,10 @@ export namespace Components { "hide": () => Promise; /** * Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods. - * @default false */ "open": boolean; /** * Sidebar position - * @default 'left' */ "position": 'left' | 'right'; /** @@ -1931,12 +1706,10 @@ export namespace Components { "toggle": () => Promise; /** * Define whether sidebar is toggled meaning only one menu can be open at the same time - * @default false */ "toggled": boolean; /** * Sidebar width - * @default '16rem' */ "width": string; } @@ -1947,7 +1720,6 @@ export namespace Components { interface SixSidebarItem { /** * Set to true to draw the sidebar item in a disabled state. - * @default false */ "disabled": boolean; /** @@ -1956,17 +1728,14 @@ export namespace Components { "href": string | undefined; /** * Icon of the item - * @default '' */ "icon": string; /** * Set to true to draw the item in a selected state. - * @default false */ "selected": boolean; /** * A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected. - * @default '' */ "value": string; } @@ -1981,17 +1750,14 @@ export namespace Components { "href": string | undefined; /** * Icon of the group - * @default '' */ "icon": string; /** * Title of item group - * @default '' */ "name": string; /** * Indicates whether the sidebar is shown - * @default false */ "open": boolean; /** @@ -2000,7 +1766,6 @@ export namespace Components { "summaryIcon"?: string; /** * A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. - * @default '' */ "value": string; } @@ -2022,7 +1787,6 @@ export namespace Components { interface SixStageIndicator { /** * The indicators value attribute - * @default null */ "stage": StageType1; } @@ -2034,17 +1798,14 @@ export namespace Components { interface SixSwitch { /** * Set to true to draw the switch in a checked state. - * @default false */ "checked": boolean; /** * Set to true to disable the switch. - * @default false */ "disabled": boolean; /** * The error message shown, if `invalid` is set to true. - * @default '' */ "errorText": string | string[]; /** @@ -2053,17 +1814,14 @@ export namespace Components { "errorTextCount"?: number; /** * If this property is set to true and an error message is provided by `errorText`, the error message is displayed. - * @default false */ "invalid": boolean; /** * The label text. - * @default '' */ "label": string; /** * The switch's name attribute. - * @default '' */ "name": string; /** @@ -2072,7 +1830,6 @@ export namespace Components { "removeFocus": () => Promise; /** * Set to true to show an asterisk beneath the label. - * @default false */ "required": boolean; /** @@ -2081,7 +1838,6 @@ export namespace Components { "setFocus": (options?: FocusOptions) => Promise; /** * The switch's value attribute. - * @default 'on' */ "value": string; } @@ -2093,22 +1849,18 @@ export namespace Components { interface SixTab { /** * Set to true to draw the tab in an active state. - * @default false */ "active": boolean; /** * When true, the tab will be rendered with a close icon. - * @default false */ "closable": boolean; /** * Set to true to draw the tab in a disabled state. - * @default false */ "disabled": boolean; /** * The name of the tab panel the tab will control. The panel must be located in the same tab group. - * @default '' */ "panel": string; /** @@ -2128,12 +1880,10 @@ export namespace Components { interface SixTabGroup { /** * Disables the scroll arrows that appear when tabs overflow. - * @default false */ "noScrollControls": boolean; /** * The placement of the tabs. - * @default 'top' */ "placement": 'top' | 'bottom' | 'left' | 'right'; /** @@ -2149,12 +1899,10 @@ export namespace Components { interface SixTabPanel { /** * When true, the tab panel will be shown. - * @default false */ "active": boolean; /** * The tab panel's name. - * @default '' */ "name": string; } @@ -2166,22 +1914,18 @@ export namespace Components { interface SixTag { /** * Set to true to make the tag clearable. - * @default false */ "clearable": boolean; /** * Set to true to draw a pill-style tag with rounded edges. - * @default false */ "pill": boolean; /** * The tag's size. - * @default 'medium' */ "size": 'small' | 'medium' | 'large'; /** * The tag's type. - * @default 'primary' */ "type": 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'action' | 'text'; } @@ -2193,32 +1937,26 @@ export namespace Components { interface SixTextarea { /** * The textarea's autocaptialize attribute. - * @default 'off' */ "autocapitalize": string; /** * The textarea's autocomplete attribute. - * @default 'off' */ "autocomplete": string; /** * The textarea's autocorrect attribute. - * @default 'off' */ "autocorrect": 'on' | 'off'; /** * The textarea's autofocus attribute. - * @default false */ "autofocus": boolean; /** * Set to true to disable the textarea. - * @default false */ "disabled": boolean; /** * The error message shown, if `invalid` is set to true. - * @default '' */ "errorText": string | string[]; /** @@ -2227,7 +1965,6 @@ export namespace Components { "errorTextCount"?: number; /** * The textarea's help text. Alternatively, you can use the help-text slot. - * @default '' */ "helpText": string; /** @@ -2236,12 +1973,10 @@ export namespace Components { "inputmode"?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'; /** * If this property is set to true and an error message is provided by `errorText`, the error message is displayed. - * @default false */ "invalid": boolean; /** * The label text. - * @default '' */ "label": string; /** @@ -2254,7 +1989,6 @@ export namespace Components { "minlength"?: number; /** * The textarea's name attribute. - * @default '' */ "name": string; /** @@ -2263,7 +1997,6 @@ export namespace Components { "placeholder"?: string; /** * Set to true for a readonly textarea. - * @default false */ "readonly": boolean; /** @@ -2272,17 +2005,14 @@ export namespace Components { "removeFocus": () => Promise; /** * Set to true to show an asterisk beneath the label. - * @default false */ "required": boolean; /** * Controls how the textarea can be resized. - * @default 'vertical' */ "resize": 'none' | 'vertical' | 'auto'; /** * The number of rows to display by default. - * @default 4 */ "rows": number; /** @@ -2303,17 +2033,14 @@ export namespace Components { "setSelectionRange": (selectionStart: number, selectionEnd: number, selectionDirection?: "forward" | "backward" | "none") => Promise; /** * The textarea's size. - * @default 'medium' */ "size": 'small' | 'medium' | 'large'; /** * The textarea's spellcheck attribute. - * @default false */ "spellcheck": boolean; /** * The textarea's value attribute. - * @default '' */ "value": string; } @@ -2324,22 +2051,18 @@ export namespace Components { interface SixTile { /** * Flag, whether the tile is closeable. - * @default true */ "closeable": boolean; /** * Enables tile tooltip for tiles - * @default true */ "disableTooltip": boolean; /** * Set to true to disable the tile. - * @default false */ "disabled": boolean; /** * Flag, whether the tile should cast a shadow. - * @default false */ "elevated": boolean; /** @@ -2352,7 +2075,6 @@ export namespace Components { "iconName"?: string; /** * The tile's label. - * @default '' */ "label": string; /** @@ -2361,7 +2083,6 @@ export namespace Components { "show": () => Promise; /** * The tile's size. - * @default 'medium' */ "size": 'small' | 'medium' | 'large'; } @@ -2372,12 +2093,10 @@ export namespace Components { interface SixTimepicker { /** * Set to true to add a clear button when the input is populated. - * @default false */ "clearable": boolean; /** * Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event. If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click (and keep pressed) and once you release - * @default DEFAULT_DEBOUNCE_FAST */ "debounce": number; /** @@ -2386,12 +2105,10 @@ export namespace Components { "defaultTime"?: string; /** * If `true` the component is disabled. - * @default false */ "disabled": boolean; /** * The input's error text. Alternatively, you can use the error-text slot. - * @default '' */ "errorText": string | string[]; /** @@ -2400,47 +2117,38 @@ export namespace Components { "errorTextCount"?: number; /** * Define the time format. Valid formats are: HH:mm:ss hh:mm:ss:aa HH:mm:ss:ms hh:mm:ss:ms:aa HH:mm hh:mm:aa HH hh:aa mm ss ms where HH is the 24 hour format and hh is the 12 hour format Please notice that when using the 12-hour-clock (hh) you always need a period indicator (aa). So the time can be parsed as either am or pm - * @default 'HH:mm:ss' */ "format": TimeFormat; /** * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`. - * @default false */ "hoist": boolean; /** * Set the position of the icon - * @default 'left' */ "iconPosition": 'left' | 'right'; /** * Indicates whether the timepicker should be shown as an inline (always open) component - * @default false */ "inline": boolean; /** * Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed. - * @default DEFAULT_DEBOUNCE_INSANELY_FAST */ "interval": number; /** * If this property is set to true and an error message is provided by `errorText`, the error message is displayed. - * @default false */ "invalid": boolean; /** * The input's label. Alternatively, you can use the label slot. - * @default '' */ "label": string; /** * The input's name attribute. - * @default '' */ "name": string; /** * Indicates whether the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. - * @default false */ "open": boolean; /** @@ -2453,17 +2161,14 @@ export namespace Components { "placement"?: 'top' | 'bottom'; /** * If `true` the user can only select a time via the timepicker but not directly edit the input field. - * @default false */ "readonly": boolean; /** * Set to true to show an asterisk beneath the label. - * @default false */ "required": boolean; /** * Define the separator to be shown between the time unit pickers. Please be aware that this property will modify the displayed separator only. The separator for a timestring is always expected to be a colon (eg. '13:52:20') - * @default ':' */ "separator": string; /** @@ -2472,17 +2177,14 @@ export namespace Components { "setFocus": (options?: FocusOptions) => Promise; /** * Timepicker size. - * @default 'medium' */ "size": 'small' | 'medium' | 'large'; /** * Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours). - * @default DEFAULT_DEBOUNCE_FAST */ "timeout": number; /** * The value of the timepicker provided as a string. The string mast match the provided format (or default format) - * @default '' */ "value": string; } @@ -2494,17 +2196,14 @@ export namespace Components { interface SixTooltip { /** * The tooltip's content. Alternatively, you can use the content slot. - * @default '' */ "content": string; /** * Set to true to disable the tooltip, so it won't show when triggered. - * @default false */ "disabled": boolean; /** * The distance in pixels from which to offset the tooltip away from its target. - * @default 10 */ "distance": number; /** @@ -2513,12 +2212,10 @@ export namespace Components { "hide": () => Promise; /** * Indicates whether the tooltip is open. You can use this in lieu of the show/hide methods. - * @default false */ "open": boolean; /** * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside the viewport. - * @default 'top' */ "placement": | 'top' | 'top-start' @@ -2538,12 +2235,10 @@ export namespace Components { "show": () => Promise; /** * The distance in pixels from which to offset the tooltip along its target. - * @default 0 */ "skidding": number; /** * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple options can be passed by separating them with a space. When manual is used, the tooltip must be activated programmatically. - * @default 'hover focus' */ "trigger": string; } @@ -2552,9 +2247,9 @@ export interface SixAlertCustomEvent extends CustomEvent { detail: T; target: HTMLSixAlertElement; } -export interface SixBreadcrumbItemCustomEvent extends CustomEvent { +export interface SixBreadcrumbsItemCustomEvent extends CustomEvent { detail: T; - target: HTMLSixBreadcrumbItemElement; + target: HTMLSixBreadcrumbsItemElement; } export interface SixButtonCustomEvent extends CustomEvent { detail: T; @@ -2716,28 +2411,28 @@ declare global { prototype: HTMLSixBadgeElement; new (): HTMLSixBadgeElement; }; - interface HTMLSixBreadcrumbItemElementEventMap { + interface HTMLSixBreadcrumbsElement extends Components.SixBreadcrumbs, HTMLStencilElement { + } + var HTMLSixBreadcrumbsElement: { + prototype: HTMLSixBreadcrumbsElement; + new (): HTMLSixBreadcrumbsElement; + }; + interface HTMLSixBreadcrumbsItemElementEventMap { "sixClick": EmptyPayload; } - interface HTMLSixBreadcrumbItemElement extends Components.SixBreadcrumbItem, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLSixBreadcrumbItemElement, ev: SixBreadcrumbItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + interface HTMLSixBreadcrumbsItemElement extends Components.SixBreadcrumbsItem, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLSixBreadcrumbsItemElement, ev: SixBreadcrumbsItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLSixBreadcrumbItemElement, ev: SixBreadcrumbItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLSixBreadcrumbsItemElement, ev: SixBreadcrumbsItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } - var HTMLSixBreadcrumbItemElement: { - prototype: HTMLSixBreadcrumbItemElement; - new (): HTMLSixBreadcrumbItemElement; - }; - interface HTMLSixBreadcrumbsElement extends Components.SixBreadcrumbs, HTMLStencilElement { - } - var HTMLSixBreadcrumbsElement: { - prototype: HTMLSixBreadcrumbsElement; - new (): HTMLSixBreadcrumbsElement; + var HTMLSixBreadcrumbsItemElement: { + prototype: HTMLSixBreadcrumbsItemElement; + new (): HTMLSixBreadcrumbsItemElement; }; interface HTMLSixButtonElementEventMap { "six-button-blur": EmptyPayload; @@ -3667,8 +3362,8 @@ declare global { "six-alert": HTMLSixAlertElement; "six-avatar": HTMLSixAvatarElement; "six-badge": HTMLSixBadgeElement; - "six-breadcrumb-item": HTMLSixBreadcrumbItemElement; "six-breadcrumbs": HTMLSixBreadcrumbsElement; + "six-breadcrumbs-item": HTMLSixBreadcrumbsItemElement; "six-button": HTMLSixButtonElement; "six-card": HTMLSixCardElement; "six-checkbox": HTMLSixCheckboxElement; @@ -3735,12 +3430,10 @@ declare namespace LocalJSX { interface SixAlert { /** * Set to true to make the alert closable. - * @default false */ "closable"?: boolean; /** * The length of time, in milliseconds, the alert will show before closing itself. If the user hovers over the toast alert, the timer will pause. On leaving the element with the mouse, the timer resets. - * @default Infinity */ "duration"?: number; /** @@ -3761,12 +3454,10 @@ declare namespace LocalJSX { "onSix-alert-show"?: (event: SixAlertCustomEvent) => void; /** * Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. - * @default false */ "open"?: boolean; /** * The type of alert. - * @default 'primary' */ "type"?: AlertType; } @@ -3778,22 +3469,18 @@ declare namespace LocalJSX { interface SixAvatar { /** * Alternative text for the image. - * @default '' */ "alt"?: string; /** * The image source to use for the avatar. - * @default '' */ "image"?: string; /** * Initials to use as a fallback when no image is available (1-2 characters max recommended). - * @default '' */ "initials"?: string; /** * The shape of the avatar. - * @default 'circle' */ "shape"?: 'circle' | 'square' | 'rounded'; } @@ -3805,21 +3492,24 @@ declare namespace LocalJSX { interface SixBadge { /** * Set to true to draw a pill-style badge with rounded edges. - * @default false */ "pill"?: boolean; /** * Set to true to make the badge pulsate to draw attention. - * @default false */ "pulse"?: boolean; /** * The badge's type. - * @default 'primary' */ "type"?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action'; } - interface SixBreadcrumbItem { + interface SixBreadcrumbs { + /** + * Data for the breadcrumbs + */ + "data"?: SixBreadcrumbsData; + } + interface SixBreadcrumbsItem { /** * If the breadcrumb is disabled */ @@ -3831,13 +3521,7 @@ declare namespace LocalJSX { /** * Emitted on click. */ - "onSixClick"?: (event: SixBreadcrumbItemCustomEvent) => void; - } - interface SixBreadcrumbs { - /** - * Data for the breadcrumbs - */ - "data"?: SixBreadcrumbsData; + "onSixClick"?: (event: SixBreadcrumbsItemCustomEvent) => void; } /** * @since 1.0 @@ -3847,17 +3531,14 @@ declare namespace LocalJSX { interface SixButton { /** * Set to true to draw the button with a caret for use with dropdowns, popovers, etc. - * @default false */ "caret"?: boolean; /** * Set to true to draw a circle button. - * @default false */ "circle"?: boolean; /** * Set to true to disable the button. - * @default false */ "disabled"?: boolean; /** @@ -3870,12 +3551,10 @@ declare namespace LocalJSX { "href"?: string; /** * Set to true to draw the button in a loading state. - * @default false */ "loading"?: boolean; /** * An optional name for the button. Ignored when `href` is set. - * @default '' */ "name"?: string; /** @@ -3888,22 +3567,18 @@ declare namespace LocalJSX { "onSix-button-focus"?: (event: SixButtonCustomEvent) => void; /** * Set to true to draw a pill-style button with rounded edges. - * @default false */ "pill"?: boolean; /** * Indicates if activating the button should reset the form. - * @default false */ "reset"?: boolean; /** * The button's size. - * @default 'medium' */ "size"?: 'small' | 'medium' | 'large'; /** * Indicates if activating the button should submit the form. Ignored when `href` is set. - * @default false */ "submit"?: boolean; /** @@ -3912,7 +3587,6 @@ declare namespace LocalJSX { "target"?: '_blank' | '_parent' | '_self' | '_top'; /** * The button's type. - * @default 'primary' */ "type"?: | 'secondary' | 'primary' @@ -3924,7 +3598,6 @@ declare namespace LocalJSX { | 'action-outline'; /** * An optional value for the button. Ignored when `href` is set. - * @default '' */ "value"?: string; } @@ -3942,17 +3615,14 @@ declare namespace LocalJSX { interface SixCheckbox { /** * Set to true to draw the checkbox in a checked state. - * @default false */ "checked"?: boolean; /** * Set to true to disable the checkbox. - * @default false */ "disabled"?: boolean; /** * The error message shown, if `invalid` is set to true. - * @default '' */ "errorText"?: string | string[]; /** @@ -3961,22 +3631,18 @@ declare namespace LocalJSX { "errorTextCount"?: number; /** * Set to true to draw the checkbox in an indeterminate state. - * @default false */ "indeterminate"?: boolean; /** * If this property is set to true and an error message is provided by `errorText`, the error message is displayed. - * @default false */ "invalid"?: boolean; /** * The label text. - * @default '' */ "label"?: string; /** * The checkbox's name attribute. - * @default '' */ "name"?: string; /** @@ -3993,12 +3659,10 @@ declare namespace LocalJSX { "onSix-checkbox-focus"?: (event: SixCheckboxCustomEvent) => void; /** * Set to true to show an asterisk beneath the label. - * @default false */ "required"?: boolean; /** * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that. The value of a checkbox is analogous to the value of an ``, it's only used when the checkbox participates in a native ``. - * @default 'on' */ "value"?: string; } @@ -4010,27 +3674,22 @@ declare namespace LocalJSX { interface SixDate { /** * Callback to determine which dates in the picker should be selectable. - * @default () => true */ "allowedDates"?: (date: string) => boolean; /** * Set to true to add a clear button when the input is populated. - * @default false */ "clearable"?: boolean; /** * Defines the format pattern for displaying dates and how dates can be entered via keyboard. The parser accepts flexible input that doesn't strictly match the format pattern. Input with missing leading zeros or incomplete years will be automatically normalized. For example, with the pattern "dd.MM.yyyy": "1.1.2025" becomes "01.01.2025" and "1.1.225" becomes "01.01.0225". Defaults to "dd.MM.yyyy". Available patterns: - Year: "yyyy" (e.g., "2021") - Month: "MM" (e.g., "01" for January) or "M" (e.g., "1" for January) - Day: "dd" (e.g., "08" for the 8th) or "d" (e.g., "8" for the 8th) Examples: - "dd.MM.yyyy" -> "31.01.2024" - "yyyy-MM-dd" -> "2024-01-31" - "d.M.yyyy" -> "31.1.2024" - * @default 'dd.MM.yyyy' */ "dateFormat"?: string; /** * If `true` the component is disabled. - * @default false */ "disabled"?: boolean; /** * The error message shown, if `invalid` is set to true. - * @default '' */ "errorText"?: string | string[]; /** @@ -4039,22 +3698,18 @@ declare namespace LocalJSX { "errorTextCount"?: number; /** * The input's help text. Alternatively, you can use the help-text slot. - * @default '' */ "helpText"?: string; /** * If this property is set to true and an error message is provided by `errorText`, the error message is displayed. - * @default false */ "invalid"?: boolean; /** * The label text. - * @default '' */ "label"?: string; /** * The language used to render the weekdays and months. - * @default 'en' */ "language"?: Language; /** @@ -4067,7 +3722,6 @@ declare namespace LocalJSX { "min"?: string; /** * The input's name attribute. - * @default '' */ "name"?: string; /** @@ -4084,22 +3738,18 @@ declare namespace LocalJSX { "placeholder"?: string; /** * If `true` the user can only select a date via the component in the popup but not directly edit the input field. - * @default false */ "readonly"?: boolean; /** * Set to true to show an asterisk beneath the label. - * @default false */ "required"?: boolean; /** * The size of the date input field. - * @default 'medium' */ "size"?: 'small' | 'medium' | 'large'; /** * The value of the form field in ISO 8601 date format (yyyy-MM-dd). Example: '2024-01-01'. When an invalid date is provided, it will be replaced with an empty string (''), matching the behavior of native HTML . The displayed format can be customized using the dateFormat property, but the underlying value will always be stored in ISO format. - * @default '' */ "value"?: string | ''; } @@ -4110,17 +3760,14 @@ declare namespace LocalJSX { interface SixDatepicker { /** * Callback to determine which date in the datepicker should be selectable. the callback function will get a datestring as an argument, e.g. '2021-07-04' Usage e.g.: const datepicker = document.getElementById('allowed-date-picker'); datepicker.allowedDates = datestring => parseInt(datestring.split('-')[2], 10) % 2 === 0; - * @default () => true */ "allowedDates"?: (date: Date) => boolean; /** * Set to true to add a clear button when the input is populated. - * @default false */ "clearable"?: boolean; /** * Closes the datepicker dropdown after selection - * @default this.type === 'date' */ "closeOnSelect"?: boolean; /** @@ -4129,12 +3776,10 @@ declare namespace LocalJSX { "containingElement"?: HTMLElement; /** * Define the dateFormat. Valid formats are: 'dd.mm.yyyy' 'yyyy-mm-dd' 'dd-mm-yyyy' 'dd/mm/yyyy' 'yyyy/mm/dd' 'dd.mm.yy' 'yy-mm-dd' 'dd-mm-yy' 'dd/mm/yy' 'yy/mm/dd' - * @default SixDateFormats.DDMMYYY_DOT */ "dateFormat"?: SixDateFormats; /** * Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke. - * @default DEFAULT_DEBOUNCE_FAST */ "debounce"?: number; /** @@ -4143,12 +3788,10 @@ declare namespace LocalJSX { "defaultDate"?: string; /** * If `true` the component is disabled. - * @default false */ "disabled"?: boolean; /** * The error message shown, if `invalid` is set to true. - * @default '' */ "errorText"?: string | string[]; /** @@ -4157,32 +3800,26 @@ declare namespace LocalJSX { "errorTextCount"?: number; /** * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`. - * @default false */ "hoist"?: boolean; /** * Set the position of the icon - * @default 'left' */ "iconPosition"?: 'left' | 'right'; /** * Indicates whether or not the calendar should be shown as an inline (always open) component - * @default false */ "inline"?: boolean; /** * If this property is set to true and an error message is provided by `errorText`, the error message is displayed. - * @default false */ "invalid"?: boolean; /** * The label text. - * @default '' */ "label"?: string; /** * The language used to render the weekdays and months. - * @default 'en' */ "locale"?: 'en' | 'de' | 'fr' | 'it' | 'es'; /** @@ -4195,7 +3832,6 @@ declare namespace LocalJSX { "min"?: Date; /** * The input's name attribute. - * @default '' */ "name"?: string; /** @@ -4212,7 +3848,6 @@ declare namespace LocalJSX { "onSix-datepicker-select"?: (event: SixDatepickerCustomEvent) => void; /** * Indicates whether or not the calendar dropdown is open on startup. You can use this in lieu of the show/hide methods. - * @default false */ "open"?: boolean; /** @@ -4225,22 +3860,18 @@ declare namespace LocalJSX { "placement"?: 'top' | 'bottom'; /** * If `true` the user can only select a date via the component in the popup, but not directly edit the input field. - * @default false */ "readonly"?: boolean; /** * Set to true to show an asterisk beneath the label. - * @default false */ "required"?: boolean; /** * Datepicker size. - * @default 'medium' */ "size"?: 'small' | 'medium' | 'large'; /** * Set the type. - * @default 'date' */ "type"?: 'date' | 'date-time'; /** @@ -4256,17 +3887,14 @@ declare namespace LocalJSX { interface SixDetails { /** * Set to true to prevent the user from toggling the details. - * @default false */ "disabled"?: boolean; /** * Set to false when you want to hide the summary icon and disable the open/close mechanism. Usually not needed, but used internally by 'six-sidebar-item-group' - * @default true */ "hasContent"?: boolean; /** * Set to true when you want to use six-details inline e.g. in a sidebar - * @default false */ "inline"?: boolean; /** @@ -4287,17 +3915,14 @@ declare namespace LocalJSX { "onSix-details-show"?: (event: SixDetailsCustomEvent) => void; /** * Indicates whether the details is open. You can use this in lieu of the show/hide methods. - * @default false */ "open"?: boolean; /** * Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children - * @default false */ "selectableEmpty"?: boolean; /** * The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. - * @default '' */ "summary"?: string; /** @@ -4306,7 +3931,6 @@ declare namespace LocalJSX { "summaryIcon"?: string; /** * The icon's size. - * @default 'inherit' */ "summaryIconSize"?: | 'inherit' | 'xSmall' @@ -4325,12 +3949,10 @@ declare namespace LocalJSX { interface SixDialog { /** * The dialog's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility. - * @default '' */ "label"?: string; /** * Set to true to disable the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the dialog. - * @default false */ "noHeader"?: boolean; /** @@ -4359,7 +3981,6 @@ declare namespace LocalJSX { "onSix-dialog-show"?: (event: SixDialogCustomEvent) => void; /** * Indicates whether the dialog is open. You can use this in lieu of the show/hide methods. - * @default false */ "open"?: boolean; } @@ -4371,17 +3992,14 @@ declare namespace LocalJSX { interface SixDrawer { /** * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of its parent element, set this prop and add `position: relative` to the parent. - * @default false */ "contained"?: boolean; /** * The drawer's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility. - * @default '' */ "label"?: string; /** * Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer. - * @default false */ "noHeader"?: boolean; /** @@ -4410,12 +4028,10 @@ declare namespace LocalJSX { "onSix-drawer-show"?: (event: SixDrawerCustomEvent) => void; /** * Indicates whether the drawer is open. You can use this in lieu of the show/hide methods. - * @default false */ "open"?: boolean; /** * The direction from which the drawer will open. - * @default 'right' */ "placement"?: 'top' | 'right' | 'bottom' | 'left'; } @@ -4427,17 +4043,14 @@ declare namespace LocalJSX { interface SixDropdown { /** * Set to true to allow async filtering. When you enter something in the search field the component will only emit an event but not filter any elements itself. You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself - * @default false */ "asyncFilter"?: boolean; /** * By default the search field will be focused when opening a dropdown with filtering enabled. - * @default true */ "autofocusFilter"?: boolean; /** * Determines whether the dropdown should hide when a menu item is selected. - * @default true */ "closeOnSelect"?: boolean; /** @@ -4446,37 +4059,30 @@ declare namespace LocalJSX { "containingElement"?: HTMLElement; /** * The panel can be opend/closed by pressing the spacebar or the enter key. In some cases you might want to avoid this - * @default false */ "disableHideOnEnterAndSpace"?: boolean; /** * The distance in pixels from which to offset the panel away from its trigger. - * @default 4 */ "distance"?: number; /** * Set to true to allow auto filtering for entries in the dropdown. With this flag the dropdown will automatically filter itsel. If you need to coordinate the shown elements yourself, e.g. because you need to call an endpoint use asyncFilter instead - * @default false */ "filter"?: boolean; /** * The debounce for the filter callbacks. - * @default 0 */ "filterDebounce"?: number; /** * The filter's placeholder text. - * @default 'Filter...' */ "filterPlaceholder"?: string; /** * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`. - * @default false */ "hoist"?: boolean; /** * Determines if the dropdown panel's width should match the width of the trigger element. If set to `true`, the panel will resize its width to align with the trigger's width. If `false` or omitted, the panel will maintain its default width. - * @default false */ "matchTriggerWidth"?: boolean; /** @@ -4509,17 +4115,14 @@ declare namespace LocalJSX { "onSix-dropdown-show"?: (event: SixDropdownCustomEvent) => void; /** * Indicates whether the dropdown is open. You can use this in lieu of the show/hide methods. - * @default false */ "open"?: boolean; /** * Set the options to be shown in the dropdown (alternative to setting the elements via html) - * @default [] */ "options"?: SixMenuItemData[]; /** * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside the viewport. - * @default 'bottom-start' */ "placement"?: | 'top' | 'top-start' @@ -4535,12 +4138,10 @@ declare namespace LocalJSX { | 'left-end'; /** * The distance in pixels from which to offset the panel along its trigger. - * @default 0 */ "skidding"?: number; /** * Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around) are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. - * @default false */ "virtualScroll"?: boolean; } @@ -4569,7 +4170,6 @@ declare namespace LocalJSX { "errorCode"?: 404 | 403 | 500; /** * Defines language and thus displays the proper error page in the selected language. - * @default 'en' */ "language"?: 'en' | 'de'; } @@ -4586,27 +4186,22 @@ declare namespace LocalJSX { interface SixFileListItem { /** * The date when the file was uploaded - * @default '' */ "date"?: string; /** * An id to clearly identify the file - * @default '' */ "identifier"?: string; /** * The filename - * @default '' */ "name"?: string; /** * Set to true if you don't want to allow to delete this file - * @default false */ "nodelete"?: boolean; /** * Set to true if you don't want to allow to download this file - * @default false */ "nodownload"?: boolean; /** @@ -4633,22 +4228,18 @@ declare namespace LocalJSX { "accept"?: string; /** * Set to true if file control should be small. - * @default false */ "compact"?: boolean; /** * Set when button is disabled. - * @default false */ "disabled"?: false; /** * The error message shown, if `invalid` is set to true. - * @default '' */ "errorText"?: string | string[]; /** * If this property is set to true and an error message is provided by `errorText`, the error message is displayed. - * @default false */ "invalid"?: boolean; /** @@ -4661,7 +4252,6 @@ declare namespace LocalJSX { "maxFileSize"?: number; /** * More than one file allowed. - * @default false */ "multiple"?: false; /** @@ -4674,7 +4264,6 @@ declare namespace LocalJSX { "onSix-file-upload-success"?: (event: SixFileUploadCustomEvent) => void; /** * Set to true to draw the control in a loading state. - * @default false */ "uploading"?: boolean; } @@ -4691,27 +4280,22 @@ declare namespace LocalJSX { interface SixGroupLabel { /** * Set to true to disable the label. - * @default false */ "disabled"?: boolean; /** * The wrapper label's help text. Alternatively, you can use the help-text slot. - * @default '' */ "helpText"?: string; /** * The wrapper label's label. Alternatively, you can use the label slot. - * @default '' */ "label"?: string; /** * Set to true to show an asterisk beneath the label. - * @default false */ "required"?: boolean; /** * The label's size. - * @default 'medium' */ "size"?: 'small' | 'medium' | 'large'; } @@ -4722,12 +4306,10 @@ declare namespace LocalJSX { interface SixHeader { /** * Set the header search input to be in an open or closed state. Focuses the first `six-input` found in the search slot. - * @default false */ "openSearch"?: boolean; /** * Indicates if content should be shifted down when search field is visible. - * @default false */ "shiftContent"?: boolean; } @@ -4738,12 +4320,10 @@ declare namespace LocalJSX { interface SixHeaderDropdownItem { /** * Set to true to allow auto filtering for entries in the dropdown. With this flag the dropdown will automatically filter itsel. If you need to coordinate the shown elements yourself, e.g. because you need to call an endpoint use asyncFilter instead - * @default false */ "filter"?: boolean; /** * The filter's placeholder text. - * @default 'Filter...' */ "filterPlaceholder"?: string; } @@ -4754,7 +4334,6 @@ declare namespace LocalJSX { interface SixHeaderItem { /** * Indicates whether the item is styled as active. When set to `true`, a border is displayed below the trigger element. Use six-header-dropdown-item to automatically set the active state for dropdowns. - * @default false */ "active"?: boolean; } @@ -4765,27 +4344,22 @@ declare namespace LocalJSX { interface SixHeaderMenuButton { /** * Set to true to draw the button with a caret for use with dropdowns, popovers, etc. - * @default false */ "caret"?: boolean; /** * Set to true to disable the button. - * @default false */ "disabled"?: boolean; /** * Set to true to draw the button in a loading state. - * @default false */ "loading"?: boolean; /** * Indicates if activating the button should reset the form. - * @default false */ "reset"?: boolean; /** * Indicates if activating the button should submit the form. Ignored when `href` is set. - * @default false */ "submit"?: boolean; } @@ -4796,12 +4370,10 @@ declare namespace LocalJSX { interface SixIcon { /** * If set to true the default material outlined icons are not used. - * @default false */ "filled"?: boolean; /** * The icon's size. - * @default 'inherit' */ "size"?: | 'inherit' | 'xSmall' @@ -4820,7 +4392,6 @@ declare namespace LocalJSX { interface SixIconButton { /** * Set to true to disable the button. - * @default false */ "disabled"?: boolean; /** @@ -4845,7 +4416,6 @@ declare namespace LocalJSX { "name"?: string; /** * The icon's size. - * @default 'medium' */ "size"?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge'; /** @@ -4861,42 +4431,34 @@ declare namespace LocalJSX { interface SixInput { /** * The input's autocaptialize attribute. - * @default 'off' */ "autocapitalize"?: string; /** * The input's autocomplete attribute. - * @default 'off' */ "autocomplete"?: string; /** * The input's autocorrect attribute. - * @default 'off' */ "autocorrect"?: 'on' | 'off'; /** * The input's autofocus attribute. - * @default false */ "autofocus"?: boolean; /** * Set to true to add a clear button when the input is populated. - * @default false */ "clearable"?: boolean; /** * Set to true to disable the input. - * @default false */ "disabled"?: boolean; /** * Internal: Styles the input for the dropdown filter search. - * @default false */ "dropdownSearch"?: boolean; /** * The error message shown, if `invalid` is set to true. - * @default '' */ "errorText"?: string | string[]; /** @@ -4905,7 +4467,6 @@ declare namespace LocalJSX { "errorTextCount"?: number; /** * The input's help text. Alternatively, you can use the help-text slot. - * @default '' */ "helpText"?: string; /** @@ -4914,17 +4475,14 @@ declare namespace LocalJSX { "inputmode"?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'; /** * If this property is set to true and an error message is provided by `errorText`, the error message is displayed. - * @default false */ "invalid"?: boolean; /** * The label text. - * @default '' */ "label"?: string; /** * Set to render as line - * @default false */ "line"?: boolean; /** @@ -4945,7 +4503,6 @@ declare namespace LocalJSX { "minlength"?: number; /** * The input's name attribute. - * @default '' */ "name"?: string; /** @@ -4974,7 +4531,6 @@ declare namespace LocalJSX { "pattern"?: string; /** * Set to true to draw a pill-style input with rounded edges. - * @default false */ "pill"?: boolean; /** @@ -4983,22 +4539,18 @@ declare namespace LocalJSX { "placeholder"?: string; /** * Set to true to make the input readonly. - * @default false */ "readonly"?: boolean; /** * Set to true to show an asterisk beneath the label. - * @default false */ "required"?: boolean; /** * The input's size. - * @default 'medium' */ "size"?: 'small' | 'medium' | 'large'; /** * Enables spell checking on the input. - * @default false */ "spellcheck"?: boolean; /** @@ -5007,17 +4559,14 @@ declare namespace LocalJSX { "step"?: number; /** * Set to true to add a password toggle button for password inputs. - * @default false */ "togglePassword"?: boolean; /** * The input's type. - * @default 'text' */ "type"?: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url'; /** * The input's value attribute. - * @default '' */ "value"?: string; } @@ -5028,12 +4577,10 @@ declare namespace LocalJSX { interface SixItemPicker { /** * Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event. If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click (and keep pressed) and once you release - * @default DEFAULT_DEBOUNCE_FAST */ "debounce"?: number; /** * Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed. - * @default DEFAULT_DEBOUNCE_INSANELY_FAST */ "interval"?: number; /** @@ -5058,54 +4605,44 @@ declare namespace LocalJSX { "onSix-item-picker-change-debounced"?: (event: SixItemPickerCustomEvent) => void; /** * Defines whether the items should be padded - * @default false */ "padded"?: boolean; /** * Defines the character used for padding - * @default '0' */ "paddingChar"?: string; /** * Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default, before is selected - * @default ItemPickerPaddingDirection.BEFORE */ "paddingDirection"?: ItemPickerPaddingDirection; /** * Defines the length of the padded area - * @default 2 */ "paddingLength"?: number; /** * Define whether the picker should to a roundtrip i.e. start at max when reaching min and vice versa. - * @default true */ "roundtrip"?: boolean; /** * Defines how many steps should be taken when navigating - * @default 1 */ "step"?: number; /** * Set the amount of time, in milliseconds, to wait to trigger faster switching between items. - * @default DEFAULT_DEBOUNCE_FAST */ "timeout"?: number; /** * The type of items you want to rotate through. - * @default ItemPickerType.NUMBER */ "type"?: ItemPickerType; /** * The item picker's value attribute. - * @default '' */ "value"?: number | string; } interface SixLanguageSwitcher { /** * The languages which should be selectable options. - * @default DEFAULT_LANGUAGES */ "languages"?: string[] | SixLanguageSwitcherInput[]; /** @@ -5134,7 +4671,6 @@ declare namespace LocalJSX { interface SixLogo { /** * The brand of the logo. Either six or bme. Defaults to six. - * @default 'six' */ "brand"?: 'six' | 'bme'; } @@ -5145,7 +4681,6 @@ declare namespace LocalJSX { interface SixMainContainer { /** * Set to false to remove top and bottom padding. - * @default true */ "padded"?: boolean; } @@ -5157,17 +4692,14 @@ declare namespace LocalJSX { interface SixMenu { /** * Internal: Disables handling of key presses. - * @default false */ "disableKeyboardHandling"?: boolean; /** * Used for virtual scrolling Define how many items should be rendered in the DOM when using virtual scrolling - * @default 10 */ "itemSize"?: number; /** * Set the options to be shown in the dropdown - * @default null */ "items"?: SixMenuItemData1[] | null; /** @@ -5180,17 +4712,14 @@ declare namespace LocalJSX { "onSix-menu-item-selected"?: (event: SixMenuCustomEvent) => void; /** * Set to true to remove the box-shadow - * @default false */ "removeBoxShadow"?: boolean; /** * Used for virtual scrolling Define the debounce for listening on scrolling changes in milliseconds. The lower the number the more sensitive the component reacts to scrolling changes. - * @default 15 */ "scrollingDebounce"?: number; /** * Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around) are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. - * @default false */ "virtualScroll"?: boolean; } @@ -5209,22 +4738,18 @@ declare namespace LocalJSX { interface SixMenuItem { /** * Defines if the checked state is displayed as a checkbox or a check-icon - * @default 'check' */ "checkType"?: 'checkbox' | 'check'; /** * Internal: Draws the item in a checked state. CheckType needs to be set to 'checkbox' or 'check' to show the checked state - * @default false */ "checked"?: boolean; /** * Set to true to draw the menu item in a disabled state. - * @default false */ "disabled"?: boolean; /** * A unique value to store in the menu item. This can be used as a way to identify menu items when selected. - * @default '' */ "value"?: string; } @@ -5242,7 +4767,6 @@ declare namespace LocalJSX { interface SixPicto { /** * Defines the size of the icon. - * @default 'medium' */ "size"?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | '4xl'; } @@ -5254,12 +4778,10 @@ declare namespace LocalJSX { interface SixProgressBar { /** * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. - * @default false */ "indeterminate"?: boolean; /** * The progress bar's percentage, 0 to 100. - * @default 0 */ "percentage"?: number; } @@ -5271,17 +4793,14 @@ declare namespace LocalJSX { interface SixProgressRing { /** * The current progress percentage, 0 - 100. - * @default 0 */ "percentage"?: number; /** * The size of the progress ring in pixels. - * @default 128 */ "size"?: number; /** * The stroke width of the progress ring in pixels. - * @default 4 */ "strokeWidth"?: number; } @@ -5293,22 +4812,18 @@ declare namespace LocalJSX { interface SixRadio { /** * Set to true to draw the radio in a checked state. - * @default false */ "checked"?: boolean; /** * Set to true to disable the radio. - * @default false */ "disabled"?: boolean; /** * If this property is set to true and an error message is provided by `errorText`, the error message is displayed. - * @default false */ "invalid"?: boolean; /** * The radio's name attribute. - * @default '' */ "name"?: string; /** @@ -5325,7 +4840,6 @@ declare namespace LocalJSX { "onSix-radio-focus"?: (event: SixRadioCustomEvent) => void; /** * The radio's value attribute. - * @default 'on' */ "value"?: string; } @@ -5337,12 +4851,10 @@ declare namespace LocalJSX { interface SixRange { /** * Set to true to disable the input. - * @default false */ "disabled"?: boolean; /** * The error message shown, if `invalid` is set to true. - * @default '' */ "errorText"?: string | string[]; /** @@ -5351,32 +4863,26 @@ declare namespace LocalJSX { "errorTextCount"?: number; /** * The range's help text. Alternatively, you can use the help-text slot. - * @default '' */ "helpText"?: string; /** * If this property is set to true and an error message is provided by `errorText`, the error message is displayed. - * @default false */ "invalid"?: boolean; /** * The label text. - * @default '' */ "label"?: string; /** * The input's max attribute. - * @default 100 */ "max"?: number; /** * The input's min attribute. - * @default 0 */ "min"?: number; /** * The input's name attribute. - * @default '' */ "name"?: string; /** @@ -5393,27 +4899,22 @@ declare namespace LocalJSX { "onSix-range-focus"?: (event: SixRangeCustomEvent) => void; /** * Set to true to show an asterisk beneath the label. - * @default false */ "required"?: boolean; /** * The input's step attribute. - * @default 1 */ "step"?: number; /** * The preferred placedment of the tooltip. - * @default 'top' */ "tooltip"?: 'top' | 'bottom' | 'none'; /** * A function used to format the tooltip's value. - * @default (value: number) => value.toString() */ "tooltipFormatter"?: (value: number) => string; /** * The input's value attribute. - * @default 0 */ "value"?: number; } @@ -5497,17 +4998,14 @@ declare namespace LocalJSX { interface SixRoot { /** * Defines whether the content section should be padded - * @default true */ "padded"?: boolean; /** * Defines the stage of the application - * @default null */ "stage"?: StageType; /** * Defines the version of the application - * @default '' */ "version"?: string; } @@ -5518,17 +5016,14 @@ declare namespace LocalJSX { interface SixSearchField { /** * Set to true to add a clear button when the input is populated. - * @default false */ "clearable"?: boolean; /** * Debounce time in milliseconds, default is 300 ms - * @default DEFAULT_DEBOUNCE_FAST */ "debounce"?: number; /** * Set to true to disable the input. - * @default false */ "disabled"?: boolean; /** @@ -5541,7 +5036,6 @@ declare namespace LocalJSX { "placeholder"?: string; /** * The input's value attribute. - * @default '' */ "value"?: string; } @@ -5553,27 +5047,22 @@ declare namespace LocalJSX { interface SixSelect { /** * Set to true to allow async filtering. When you enter something in the search field the component will only emit an event but not filter any elements itself. You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself - * @default false */ "asyncFilter"?: boolean; /** * Set to true to turn the six-select into an autocomplete. - * @default false */ "autocomplete"?: boolean; /** * Set to true to add a clear button when the select is populated. - * @default false */ "clearable"?: boolean; /** * Set to true to disable the select control. - * @default false */ "disabled"?: boolean; /** * The error message shown, if `invalid` is set to true. - * @default '' */ "errorText"?: string | string[]; /** @@ -5582,7 +5071,6 @@ declare namespace LocalJSX { "errorTextCount"?: number; /** * Set to true to allow filtering for entries in the dropdown - * @default false */ "filter"?: boolean; /** @@ -5595,42 +5083,34 @@ declare namespace LocalJSX { "filterPlaceholder"?: string; /** * The select's help text. Alternatively, you can use the help-text slot. - * @default '' */ "helpText"?: string; /** * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`. - * @default false */ "hoist"?: boolean; /** * The debounce for when the input changes for autocompletes should be emitted - * @default DEFAULT_DEBOUNCE_FAST */ "inputDebounce"?: number; /** * If this property is set to true and an error message is provided by `errorText`, the error message is displayed. - * @default false */ "invalid"?: boolean; /** * The label text. - * @default '' */ "label"?: string; /** * Set to render as line - * @default false */ "line"?: boolean; /** * Set to true to enable multiselect. - * @default false */ "multiple"?: boolean; /** * The select's name. - * @default '' */ "name"?: string; /** @@ -5647,27 +5127,22 @@ declare namespace LocalJSX { "onSix-select-focus"?: (event: SixSelectCustomEvent) => void; /** * Set the options to be shown in the dropdown (alternative to setting the elements via html) - * @default null */ "options"?: SixMenuItemData[] | null; /** * Set to true to draw a pill-style select with rounded edges. - * @default false */ "pill"?: boolean; /** * The select's placeholder text. - * @default '' */ "placeholder"?: string; /** * Set to true to show an asterisk beneath the label. - * @default false */ "required"?: boolean; /** * Enables the select all button. - * @default false */ "selectAllButton"?: boolean; /** @@ -5676,17 +5151,14 @@ declare namespace LocalJSX { "selectAllText"?: string; /** * The select's size. - * @default 'medium' */ "size"?: 'small' | 'medium' | 'large'; /** * The value of the control. This will be a string or an array depending on `multiple`. - * @default '' */ "value"?: string | string[]; /** * Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around) are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. - * @default false */ "virtualScroll"?: boolean; } @@ -5717,22 +5189,18 @@ declare namespace LocalJSX { "onSix-sidebar-show"?: (event: SixSidebarCustomEvent) => void; /** * Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods. - * @default false */ "open"?: boolean; /** * Sidebar position - * @default 'left' */ "position"?: 'left' | 'right'; /** * Define whether sidebar is toggled meaning only one menu can be open at the same time - * @default false */ "toggled"?: boolean; /** * Sidebar width - * @default '16rem' */ "width"?: string; } @@ -5743,7 +5211,6 @@ declare namespace LocalJSX { interface SixSidebarItem { /** * Set to true to draw the sidebar item in a disabled state. - * @default false */ "disabled"?: boolean; /** @@ -5752,17 +5219,14 @@ declare namespace LocalJSX { "href"?: string | undefined; /** * Icon of the item - * @default '' */ "icon"?: string; /** * Set to true to draw the item in a selected state. - * @default false */ "selected"?: boolean; /** * A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected. - * @default '' */ "value"?: string; } @@ -5777,17 +5241,14 @@ declare namespace LocalJSX { "href"?: string | undefined; /** * Icon of the group - * @default '' */ "icon"?: string; /** * Title of item group - * @default '' */ "name"?: string; /** * Indicates whether the sidebar is shown - * @default false */ "open"?: boolean; /** @@ -5796,7 +5257,6 @@ declare namespace LocalJSX { "summaryIcon"?: string; /** * A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. - * @default '' */ "value"?: string; } @@ -5818,7 +5278,6 @@ declare namespace LocalJSX { interface SixStageIndicator { /** * The indicators value attribute - * @default null */ "stage"?: StageType1; } @@ -5830,17 +5289,14 @@ declare namespace LocalJSX { interface SixSwitch { /** * Set to true to draw the switch in a checked state. - * @default false */ "checked"?: boolean; /** * Set to true to disable the switch. - * @default false */ "disabled"?: boolean; /** * The error message shown, if `invalid` is set to true. - * @default '' */ "errorText"?: string | string[]; /** @@ -5849,17 +5305,14 @@ declare namespace LocalJSX { "errorTextCount"?: number; /** * If this property is set to true and an error message is provided by `errorText`, the error message is displayed. - * @default false */ "invalid"?: boolean; /** * The label text. - * @default '' */ "label"?: string; /** * The switch's name attribute. - * @default '' */ "name"?: string; /** @@ -5876,12 +5329,10 @@ declare namespace LocalJSX { "onSix-switch-focus"?: (event: SixSwitchCustomEvent) => void; /** * Set to true to show an asterisk beneath the label. - * @default false */ "required"?: boolean; /** * The switch's value attribute. - * @default 'on' */ "value"?: string; } @@ -5893,17 +5344,14 @@ declare namespace LocalJSX { interface SixTab { /** * Set to true to draw the tab in an active state. - * @default false */ "active"?: boolean; /** * When true, the tab will be rendered with a close icon. - * @default false */ "closable"?: boolean; /** * Set to true to draw the tab in a disabled state. - * @default false */ "disabled"?: boolean; /** @@ -5912,7 +5360,6 @@ declare namespace LocalJSX { "onSix-tab-close"?: (event: SixTabCustomEvent) => void; /** * The name of the tab panel the tab will control. The panel must be located in the same tab group. - * @default '' */ "panel"?: string; } @@ -5924,7 +5371,6 @@ declare namespace LocalJSX { interface SixTabGroup { /** * Disables the scroll arrows that appear when tabs overflow. - * @default false */ "noScrollControls"?: boolean; /** @@ -5937,7 +5383,6 @@ declare namespace LocalJSX { "onSix-tab-show"?: (event: SixTabGroupCustomEvent) => void; /** * The placement of the tabs. - * @default 'top' */ "placement"?: 'top' | 'bottom' | 'left' | 'right'; } @@ -5949,12 +5394,10 @@ declare namespace LocalJSX { interface SixTabPanel { /** * When true, the tab panel will be shown. - * @default false */ "active"?: boolean; /** * The tab panel's name. - * @default '' */ "name"?: string; } @@ -5966,7 +5409,6 @@ declare namespace LocalJSX { interface SixTag { /** * Set to true to make the tag clearable. - * @default false */ "clearable"?: boolean; /** @@ -5975,17 +5417,14 @@ declare namespace LocalJSX { "onSix-tag-clear"?: (event: SixTagCustomEvent) => void; /** * Set to true to draw a pill-style tag with rounded edges. - * @default false */ "pill"?: boolean; /** * The tag's size. - * @default 'medium' */ "size"?: 'small' | 'medium' | 'large'; /** * The tag's type. - * @default 'primary' */ "type"?: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'action' | 'text'; } @@ -5997,32 +5436,26 @@ declare namespace LocalJSX { interface SixTextarea { /** * The textarea's autocaptialize attribute. - * @default 'off' */ "autocapitalize"?: string; /** * The textarea's autocomplete attribute. - * @default 'off' */ "autocomplete"?: string; /** * The textarea's autocorrect attribute. - * @default 'off' */ "autocorrect"?: 'on' | 'off'; /** * The textarea's autofocus attribute. - * @default false */ "autofocus"?: boolean; /** * Set to true to disable the textarea. - * @default false */ "disabled"?: boolean; /** * The error message shown, if `invalid` is set to true. - * @default '' */ "errorText"?: string | string[]; /** @@ -6031,7 +5464,6 @@ declare namespace LocalJSX { "errorTextCount"?: number; /** * The textarea's help text. Alternatively, you can use the help-text slot. - * @default '' */ "helpText"?: string; /** @@ -6040,12 +5472,10 @@ declare namespace LocalJSX { "inputmode"?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'; /** * If this property is set to true and an error message is provided by `errorText`, the error message is displayed. - * @default false */ "invalid"?: boolean; /** * The label text. - * @default '' */ "label"?: string; /** @@ -6058,7 +5488,6 @@ declare namespace LocalJSX { "minlength"?: number; /** * The textarea's name attribute. - * @default '' */ "name"?: string; /** @@ -6083,37 +5512,30 @@ declare namespace LocalJSX { "placeholder"?: string; /** * Set to true for a readonly textarea. - * @default false */ "readonly"?: boolean; /** * Set to true to show an asterisk beneath the label. - * @default false */ "required"?: boolean; /** * Controls how the textarea can be resized. - * @default 'vertical' */ "resize"?: 'none' | 'vertical' | 'auto'; /** * The number of rows to display by default. - * @default 4 */ "rows"?: number; /** * The textarea's size. - * @default 'medium' */ "size"?: 'small' | 'medium' | 'large'; /** * The textarea's spellcheck attribute. - * @default false */ "spellcheck"?: boolean; /** * The textarea's value attribute. - * @default '' */ "value"?: string; } @@ -6124,22 +5546,18 @@ declare namespace LocalJSX { interface SixTile { /** * Flag, whether the tile is closeable. - * @default true */ "closeable"?: boolean; /** * Enables tile tooltip for tiles - * @default true */ "disableTooltip"?: boolean; /** * Set to true to disable the tile. - * @default false */ "disabled"?: boolean; /** * Flag, whether the tile should cast a shadow. - * @default false */ "elevated"?: boolean; /** @@ -6148,7 +5566,6 @@ declare namespace LocalJSX { "iconName"?: string; /** * The tile's label. - * @default '' */ "label"?: string; /** @@ -6161,7 +5578,6 @@ declare namespace LocalJSX { "onSix-tile-selected"?: (event: SixTileCustomEvent) => void; /** * The tile's size. - * @default 'medium' */ "size"?: 'small' | 'medium' | 'large'; } @@ -6172,12 +5588,10 @@ declare namespace LocalJSX { interface SixTimepicker { /** * Set to true to add a clear button when the input is populated. - * @default false */ "clearable"?: boolean; /** * Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event. If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click (and keep pressed) and once you release - * @default DEFAULT_DEBOUNCE_FAST */ "debounce"?: number; /** @@ -6186,12 +5600,10 @@ declare namespace LocalJSX { "defaultTime"?: string; /** * If `true` the component is disabled. - * @default false */ "disabled"?: boolean; /** * The input's error text. Alternatively, you can use the error-text slot. - * @default '' */ "errorText"?: string | string[]; /** @@ -6200,42 +5612,34 @@ declare namespace LocalJSX { "errorTextCount"?: number; /** * Define the time format. Valid formats are: HH:mm:ss hh:mm:ss:aa HH:mm:ss:ms hh:mm:ss:ms:aa HH:mm hh:mm:aa HH hh:aa mm ss ms where HH is the 24 hour format and hh is the 12 hour format Please notice that when using the 12-hour-clock (hh) you always need a period indicator (aa). So the time can be parsed as either am or pm - * @default 'HH:mm:ss' */ "format"?: TimeFormat; /** * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`. - * @default false */ "hoist"?: boolean; /** * Set the position of the icon - * @default 'left' */ "iconPosition"?: 'left' | 'right'; /** * Indicates whether the timepicker should be shown as an inline (always open) component - * @default false */ "inline"?: boolean; /** * Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed. - * @default DEFAULT_DEBOUNCE_INSANELY_FAST */ "interval"?: number; /** * If this property is set to true and an error message is provided by `errorText`, the error message is displayed. - * @default false */ "invalid"?: boolean; /** * The input's label. Alternatively, you can use the label slot. - * @default '' */ "label"?: string; /** * The input's name attribute. - * @default '' */ "name"?: string; /** @@ -6252,7 +5656,6 @@ declare namespace LocalJSX { "onSix-timepicker-clear"?: (event: SixTimepickerCustomEvent) => void; /** * Indicates whether the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. - * @default false */ "open"?: boolean; /** @@ -6265,32 +5668,26 @@ declare namespace LocalJSX { "placement"?: 'top' | 'bottom'; /** * If `true` the user can only select a time via the timepicker but not directly edit the input field. - * @default false */ "readonly"?: boolean; /** * Set to true to show an asterisk beneath the label. - * @default false */ "required"?: boolean; /** * Define the separator to be shown between the time unit pickers. Please be aware that this property will modify the displayed separator only. The separator for a timestring is always expected to be a colon (eg. '13:52:20') - * @default ':' */ "separator"?: string; /** * Timepicker size. - * @default 'medium' */ "size"?: 'small' | 'medium' | 'large'; /** * Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours). - * @default DEFAULT_DEBOUNCE_FAST */ "timeout"?: number; /** * The value of the timepicker provided as a string. The string mast match the provided format (or default format) - * @default '' */ "value"?: string; } @@ -6302,17 +5699,14 @@ declare namespace LocalJSX { interface SixTooltip { /** * The tooltip's content. Alternatively, you can use the content slot. - * @default '' */ "content"?: string; /** * Set to true to disable the tooltip, so it won't show when triggered. - * @default false */ "disabled"?: boolean; /** * The distance in pixels from which to offset the tooltip away from its target. - * @default 10 */ "distance"?: number; /** @@ -6333,12 +5727,10 @@ declare namespace LocalJSX { "onSix-tooltip-show"?: (event: SixTooltipCustomEvent) => void; /** * Indicates whether the tooltip is open. You can use this in lieu of the show/hide methods. - * @default false */ "open"?: boolean; /** * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside the viewport. - * @default 'top' */ "placement"?: | 'top' | 'top-start' @@ -6354,12 +5746,10 @@ declare namespace LocalJSX { | 'left-end'; /** * The distance in pixels from which to offset the tooltip along its target. - * @default 0 */ "skidding"?: number; /** * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple options can be passed by separating them with a space. When manual is used, the tooltip must be activated programmatically. - * @default 'hover focus' */ "trigger"?: string; } @@ -6367,8 +5757,8 @@ declare namespace LocalJSX { "six-alert": SixAlert; "six-avatar": SixAvatar; "six-badge": SixBadge; - "six-breadcrumb-item": SixBreadcrumbItem; "six-breadcrumbs": SixBreadcrumbs; + "six-breadcrumbs-item": SixBreadcrumbsItem; "six-button": SixButton; "six-card": SixCard; "six-checkbox": SixCheckbox; @@ -6448,8 +5838,8 @@ declare module "@stencil/core" { * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ "six-badge": LocalJSX.SixBadge & JSXBase.HTMLAttributes; - "six-breadcrumb-item": LocalJSX.SixBreadcrumbItem & JSXBase.HTMLAttributes; "six-breadcrumbs": LocalJSX.SixBreadcrumbs & JSXBase.HTMLAttributes; + "six-breadcrumbs-item": LocalJSX.SixBreadcrumbsItem & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable diff --git a/libraries/ui-library/src/components/six-breadcrumbs-item/index.html b/libraries/ui-library/src/components/six-breadcrumbs-item/index.html new file mode 100644 index 000000000..1a52581e6 --- /dev/null +++ b/libraries/ui-library/src/components/six-breadcrumbs-item/index.html @@ -0,0 +1,50 @@ + + + + + + + + + Breadcrumbs Item + + + +

Breadcrumbs Item

+
+
+

Using six-breadcrumbs-item as child elements

+ + + + + +
+
+

Data array

+

Passing six-breadcrumbs-item as a child (disabled/non-anchor) and an array of data

+ + + +
+
+ + + + + diff --git a/libraries/ui-library/src/components/six-breadcrumbs-item/readme.md b/libraries/ui-library/src/components/six-breadcrumbs-item/readme.md index de79f09ba..3599074c8 100644 --- a/libraries/ui-library/src/components/six-breadcrumbs-item/readme.md +++ b/libraries/ui-library/src/components/six-breadcrumbs-item/readme.md @@ -29,8 +29,8 @@ ### Graph ```mermaid graph TD; - six-breadcrumbs --> six-breadcrumb-item - style six-breadcrumb-item fill:#f9f,stroke:#333,stroke-width:4px + six-breadcrumbs --> six-breadcrumbs-item + style six-breadcrumbs-item fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- diff --git a/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumb-item.scss b/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumbs-item.scss similarity index 100% rename from libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumb-item.scss rename to libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumbs-item.scss diff --git a/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumb-item.tsx b/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumbs-item.tsx similarity index 85% rename from libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumb-item.tsx rename to libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumbs-item.tsx index e1472fa61..71bc309ac 100644 --- a/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumb-item.tsx +++ b/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumbs-item.tsx @@ -3,11 +3,11 @@ import { EmptyPayload } from '../../utils/types'; @Component({ - tag: 'six-breadcrumb-item', - styleUrl: 'six-breadcrumb-item.scss', + tag: 'six-breadcrumbs-item', + styleUrl: 'six-breadcrumbs-item.scss', shadow: true, }) -export class SixBreadcrumbItem { +export class SixBreadcrumbsItem { /** Name or label of the breadcrumb */ @Prop() name: string = ''; diff --git a/libraries/ui-library/src/components/six-breadcrumbs-item/test/six-breadcrumb-item.spec.tsx b/libraries/ui-library/src/components/six-breadcrumbs-item/test/six-breadcrumbs-item.spec.tsx similarity index 66% rename from libraries/ui-library/src/components/six-breadcrumbs-item/test/six-breadcrumb-item.spec.tsx rename to libraries/ui-library/src/components/six-breadcrumbs-item/test/six-breadcrumbs-item.spec.tsx index bc9d9a7b9..a79a08059 100644 --- a/libraries/ui-library/src/components/six-breadcrumbs-item/test/six-breadcrumb-item.spec.tsx +++ b/libraries/ui-library/src/components/six-breadcrumbs-item/test/six-breadcrumbs-item.spec.tsx @@ -1,11 +1,11 @@ import { newSpecPage } from '@stencil/core/testing'; -import { SixBreadcrumbItem } from '../six-breadcrumb-item'; +import { SixBreadcrumbsItem } from '../six-breadcrumbs-item'; -describe('six-breadcrumb-item', () => { +describe('six-breadcrumbs-item', () => { it('renders enabled item with ', async () => { const page = await newSpecPage({ - components: [SixBreadcrumbItem], - html: ``, + components: [SixBreadcrumbsItem], + html: ``, }); expect(page?.root?.shadowRoot?.innerHTML).toContain(' { it('renders disabled item without ', async () => { const page = await newSpecPage({ - components: [SixBreadcrumbItem], - html: ``, + components: [SixBreadcrumbsItem], + html: ``, }); expect(page?.root?.shadowRoot?.innerHTML).not.toContain(' { it('emits sixClick on click if not disabled', async () => { const page = await newSpecPage({ - components: [SixBreadcrumbItem], - html: ``, + components: [SixBreadcrumbsItem], + html: ``, }); const eventSpy = jest.fn(); diff --git a/libraries/ui-library/src/components/six-breadcrumbs/index.html b/libraries/ui-library/src/components/six-breadcrumbs/index.html index 067f7fdd2..34e59a340 100644 --- a/libraries/ui-library/src/components/six-breadcrumbs/index.html +++ b/libraries/ui-library/src/components/six-breadcrumbs/index.html @@ -32,18 +32,18 @@

Containers

Breadcrumb Item

-

Using six-breadcrumb-item as child elements

+

Using six-breadcrumbs-item as child elements

- - - + + +

Data array

-

Passing six-breadcrumb as a child (disabled/non-anchor) and an array of data

+

Passing six-breadcrumbs-item as a child (disabled/non-anchor) and an array of data

- +
diff --git a/libraries/ui-library/src/components/six-breadcrumbs/readme.md b/libraries/ui-library/src/components/six-breadcrumbs/readme.md index a122dafad..6ef015def 100644 --- a/libraries/ui-library/src/components/six-breadcrumbs/readme.md +++ b/libraries/ui-library/src/components/six-breadcrumbs/readme.md @@ -12,16 +12,23 @@ | `data` | -- | Data for the breadcrumbs | `SixBreadcrumbsData` | `[]` | +## Shadow Parts + +| Part | Description | +| -------- | ----------- | +| `"base"` | | + + ## Dependencies ### Depends on -- [six-breadcrumb-item](../six-breadcrumbs-item) +- [six-breadcrumbs-item](../six-breadcrumbs-item) ### Graph ```mermaid graph TD; - six-breadcrumbs --> six-breadcrumb-item + six-breadcrumbs --> six-breadcrumbs-item style six-breadcrumbs fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.scss b/libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.scss index 4cda12097..77eb7e26a 100644 --- a/libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.scss +++ b/libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.scss @@ -24,7 +24,7 @@ gap: $padding; padding: $padding; - ::slotted(a), ::slotted(div), six-breadcrumb-item { + ::slotted(a), ::slotted(div), six-breadcrumbs-item { &:after { content: var(--six-breadcrumbs-separator); color: var(--six-breadcrumbs-separator-color); @@ -34,7 +34,7 @@ ::slotted(:last-of-type):after, div:last-of-type:after, - six-breadcrumb-item:last-of-type:after { + six-breadcrumbs-item:last-of-type:after { content: none; padding-left: unset; } diff --git a/libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.tsx b/libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.tsx index b49818a1a..188c5e0c7 100644 --- a/libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.tsx +++ b/libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.tsx @@ -15,10 +15,10 @@ export class SixBreadcrumbs { render() { return ( -
+
{this.data && this.data.map(({ name, disabled, onSixClick }) => - , + , )}
) diff --git a/libraries/ui-library/src/components/six-breadcrumbs/test/six-breadcrumbs.spec.tsx b/libraries/ui-library/src/components/six-breadcrumbs/test/six-breadcrumbs.spec.tsx index 50d271b1e..dd4c25065 100644 --- a/libraries/ui-library/src/components/six-breadcrumbs/test/six-breadcrumbs.spec.tsx +++ b/libraries/ui-library/src/components/six-breadcrumbs/test/six-breadcrumbs.spec.tsx @@ -11,7 +11,7 @@ describe('six-breadcrumbs', () => { -
+
@@ -34,6 +34,6 @@ describe('six-breadcrumbs', () => { page.rootInstance.data = mockData; await page?.waitForChanges(); - expect(page?.root?.shadowRoot?.querySelectorAll('six-breadcrumb-item').length).toBe(2); + expect(page?.root?.shadowRoot?.querySelectorAll('six-breadcrumbs-item').length).toBe(2); }); }); diff --git a/libraries/ui-library/src/components/six-date/readme.md b/libraries/ui-library/src/components/six-date/readme.md index 309c59ee7..4b4ff94f8 100644 --- a/libraries/ui-library/src/components/six-date/readme.md +++ b/libraries/ui-library/src/components/six-date/readme.md @@ -11,27 +11,26 @@ A date picker component that allows users to select dates via a calendar popup o ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ----------------------- | -| `allowedDates` | -- | Callback to determine which dates in the picker should be selectable. | `(date: string) => boolean` | `() => true` | -| `clearable` | `clearable` | Set to true to add a clear button when the input is populated. | `boolean` | `false` | -| `dateFormat` | `date-format` | Defines the format pattern for displaying dates and how dates can be entered via keyboard. Defaults to "dd.MM.yyyy". Available patterns: - Year: "yyyy" (e.g., "2021") - Month: "MM" (e.g., "01" for January) or "M" (e.g., "1" for January) - Day: "dd" (e.g., "08" for the 8th) or "d" (e.g., "8" for the 8th) Examples: - "dd.MM.yyyy" -> "31.01.2024" - "yyyy-MM-dd" -> "2024-01-31" - "d.M.yyyy" -> "31.1.2024" | `string` | `'dd.MM.yyyy'` | -| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `six-change` event after each keystroke. | `number` | `DEFAULT_DEBOUNCE_FAST` | -| `disabled` | `disabled` | If `true` the component is disabled. | `boolean` | `false` | -| `errorText` | `error-text` | The error message shown, if `invalid` is set to true. | `string \| string[]` | `''` | -| `errorTextCount` | `error-text-count` | The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 | `number \| undefined` | `undefined` | -| `helpText` | `help-text` | The input's help text. Alternatively, you can use the help-text slot. | `string` | `''` | -| `invalid` | `invalid` | If this property is set to true and an error message is provided by `errorText`, the error message is displayed. | `boolean` | `false` | -| `label` | `label` | The label text. | `string` | `''` | -| `language` | `language` | The language used to render the weekdays and months. | `"de" \| "en" \| "es" \| "fr" \| "it"` | `'en'` | -| `max` | `max` | The maximum allowed selectable date in ISO format (yyyy-MM-dd). Dates after this value will be disabled in the date picker. Example: '2025-01-01' | `string \| undefined` | `undefined` | -| `min` | `min` | The minimum allowed selectable date in ISO format (yyyy-MM-dd). Dates before this value will be disabled in the date picker. Example: '2024-01-01' | `string \| undefined` | `undefined` | -| `name` | `name` | The input's name attribute. | `string` | `''` | -| `placeholder` | `placeholder` | The placeholder defines what text to be shown on the input element | `string \| undefined` | `undefined` | -| `readonly` | `readonly` | If `true` the user can only select a date via the component in the popup but not directly edit the input field. | `boolean` | `false` | -| `required` | `required` | Set to true to show an asterisk beneath the label. | `boolean` | `false` | -| `size` | `size` | The size of the date input field. | `"large" \| "medium" \| "small"` | `'medium'` | -| `value` | `value` | The value of the form field in ISO 8601 date format (yyyy-MM-dd). Example: '2024-01-01'. When an invalid date is provided, it will be replaced with an empty string (''), matching the behavior of native HTML . The displayed format can be customized using the dateFormat property, but the underlying value will always be stored in ISO format. | `string` | `''` | +| Property | Attribute | Description | Type | Default | +| ---------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | -------------- | +| `allowedDates` | -- | Callback to determine which dates in the picker should be selectable. | `(date: string) => boolean` | `() => true` | +| `clearable` | `clearable` | Set to true to add a clear button when the input is populated. | `boolean` | `false` | +| `dateFormat` | `date-format` | Defines the format pattern for displaying dates and how dates can be entered via keyboard. The parser accepts flexible input that doesn't strictly match the format pattern. Input with missing leading zeros or incomplete years will be automatically normalized. For example, with the pattern "dd.MM.yyyy": "1.1.2025" becomes "01.01.2025" and "1.1.225" becomes "01.01.0225". Defaults to "dd.MM.yyyy". Available patterns: - Year: "yyyy" (e.g., "2021") - Month: "MM" (e.g., "01" for January) or "M" (e.g., "1" for January) - Day: "dd" (e.g., "08" for the 8th) or "d" (e.g., "8" for the 8th) Examples: - "dd.MM.yyyy" -> "31.01.2024" - "yyyy-MM-dd" -> "2024-01-31" - "d.M.yyyy" -> "31.1.2024" | `string` | `'dd.MM.yyyy'` | +| `disabled` | `disabled` | If `true` the component is disabled. | `boolean` | `false` | +| `errorText` | `error-text` | The error message shown, if `invalid` is set to true. | `string \| string[]` | `''` | +| `errorTextCount` | `error-text-count` | The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 | `number \| undefined` | `undefined` | +| `helpText` | `help-text` | The input's help text. Alternatively, you can use the help-text slot. | `string` | `''` | +| `invalid` | `invalid` | If this property is set to true and an error message is provided by `errorText`, the error message is displayed. | `boolean` | `false` | +| `label` | `label` | The label text. | `string` | `''` | +| `language` | `language` | The language used to render the weekdays and months. | `"de" \| "en" \| "es" \| "fr" \| "it"` | `'en'` | +| `max` | `max` | The maximum allowed selectable date in ISO format (yyyy-MM-dd). Dates after this value will be disabled in the date picker. Example: '2025-01-01' | `string \| undefined` | `undefined` | +| `min` | `min` | The minimum allowed selectable date in ISO format (yyyy-MM-dd). Dates before this value will be disabled in the date picker. Example: '2024-01-01' | `string \| undefined` | `undefined` | +| `name` | `name` | The input's name attribute. | `string` | `''` | +| `placeholder` | `placeholder` | The placeholder defines what text to be shown on the input element | `string \| undefined` | `undefined` | +| `readonly` | `readonly` | If `true` the user can only select a date via the component in the popup but not directly edit the input field. | `boolean` | `false` | +| `required` | `required` | Set to true to show an asterisk beneath the label. | `boolean` | `false` | +| `size` | `size` | The size of the date input field. | `"large" \| "medium" \| "small"` | `'medium'` | +| `value` | `value` | The value of the form field in ISO 8601 date format (yyyy-MM-dd). Example: '2024-01-01'. When an invalid date is provided, it will be replaced with an empty string (''), matching the behavior of native HTML . The displayed format can be customized using the dateFormat property, but the underlying value will always be stored in ISO format. | `string` | `''` | ## Events From 7dbfe4b40f4cf624e724569a434483d199490bff Mon Sep 17 00:00:00 2001 From: fortesp Date: Wed, 18 Jun 2025 17:14:08 +0200 Subject: [PATCH 03/32] chore: prettier formatting --- .../six-breadcrumbs-item/index.html | 90 ++++++------ .../six-breadcrumbs-item.scss | 3 - .../six-breadcrumbs-item.tsx | 6 +- .../src/components/six-breadcrumbs/index.html | 128 +++++++++--------- .../six-breadcrumbs/six-breadcrumbs.scss | 15 +- .../six-breadcrumbs/six-breadcrumbs.tsx | 14 +- .../src/components/six-breadcrumbs/types.ts | 12 +- 7 files changed, 128 insertions(+), 140 deletions(-) diff --git a/libraries/ui-library/src/components/six-breadcrumbs-item/index.html b/libraries/ui-library/src/components/six-breadcrumbs-item/index.html index 1a52581e6..df3fe38d0 100644 --- a/libraries/ui-library/src/components/six-breadcrumbs-item/index.html +++ b/libraries/ui-library/src/components/six-breadcrumbs-item/index.html @@ -1,50 +1,48 @@ - - - - - - - Breadcrumbs Item - - + + + + + + + Breadcrumbs Item + + +

Breadcrumbs Item

+
+
+

Using six-breadcrumbs-item as child elements

+ + + + + +
+
+

Data array

+

Passing six-breadcrumbs-item as a child (disabled/non-anchor) and an array of data

+ + + +
+
-

Breadcrumbs Item

-
-
-

Using six-breadcrumbs-item as child elements

- - - - - -
-
-

Data array

-

Passing six-breadcrumbs-item as a child (disabled/non-anchor) and an array of data

- - - -
-
- - - - + + diff --git a/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumbs-item.scss b/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumbs-item.scss index f8ece552a..733b2d866 100644 --- a/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumbs-item.scss +++ b/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumbs-item.scss @@ -1,8 +1,6 @@ @import '../../../src/global/component'; - :host { - a { color: var(--six-breadcrumbs-link-color) !important; cursor: pointer; @@ -14,5 +12,4 @@ color: var(--six-breadcrumbs-separator-color); padding-left: var(--six-breadcrumbs-padding); } - } diff --git a/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumbs-item.tsx b/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumbs-item.tsx index 71bc309ac..13a5cbdf6 100644 --- a/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumbs-item.tsx +++ b/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumbs-item.tsx @@ -1,14 +1,12 @@ import { Component, Event, EventEmitter, h, Prop } from '@stencil/core'; import { EmptyPayload } from '../../utils/types'; - @Component({ tag: 'six-breadcrumbs-item', styleUrl: 'six-breadcrumbs-item.scss', shadow: true, }) export class SixBreadcrumbsItem { - /** Name or label of the breadcrumb */ @Prop() name: string = ''; @@ -22,10 +20,8 @@ export class SixBreadcrumbsItem { return ( - {!this.disabled ? ( this.sixClickEvent.emit()}>{this.name}) : this.name} + {!this.disabled ? this.sixClickEvent.emit()}>{this.name} : this.name} ); - } - } diff --git a/libraries/ui-library/src/components/six-breadcrumbs/index.html b/libraries/ui-library/src/components/six-breadcrumbs/index.html index 34e59a340..87de63a45 100644 --- a/libraries/ui-library/src/components/six-breadcrumbs/index.html +++ b/libraries/ui-library/src/components/six-breadcrumbs/index.html @@ -1,69 +1,67 @@ - - - - - - - Breadcrumbs - - + + + + + + + Breadcrumbs + + +

Breadcrumbs

+
+
+

Anchors

+

Using anchors as child elements

+ + One + Two + Three + +
+
+

Containers

+

Using div containers as child elements

+ +
One
+
Two
+
Three
+ +
+
+

Breadcrumb Item

+

Using six-breadcrumbs-item as child elements

+ + + + + +
+
+

Data array

+

Passing six-breadcrumbs-item as a child (disabled/non-anchor) and an array of data

+ + + +
+
-

Breadcrumbs

-
-
-

Anchors

-

Using anchors as child elements

- - One - Two - Three - -
-
-

Containers

-

Using div containers as child elements

- -
One
-
Two
-
Three
- -
-
-

Breadcrumb Item

-

Using six-breadcrumbs-item as child elements

- - - - - -
-
-

Data array

-

Passing six-breadcrumbs-item as a child (disabled/non-anchor) and an array of data

- - - -
-
- - - - + + diff --git a/libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.scss b/libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.scss index 77eb7e26a..788709bbd 100644 --- a/libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.scss +++ b/libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.scss @@ -2,7 +2,7 @@ :host { display: block; - --six-breadcrumbs-separator: "/"; + --six-breadcrumbs-separator: '/'; --six-breadcrumbs-background-color: var(--six-color-web-rock-200); --six-breadcrumbs-padding: var(--six-spacing-x-small); --six-breadcrumbs-color: pink; @@ -15,7 +15,8 @@ $padding: var(--six-breadcrumbs-padding); background-color: var(--six-breadcrumbs-background-color); - > div { /* Container */ + > div { + /* Container */ display: inline-flex; flex-wrap: wrap; @@ -24,7 +25,9 @@ gap: $padding; padding: $padding; - ::slotted(a), ::slotted(div), six-breadcrumbs-item { + ::slotted(a), + ::slotted(div), + six-breadcrumbs-item { &:after { content: var(--six-breadcrumbs-separator); color: var(--six-breadcrumbs-separator-color); @@ -39,7 +42,8 @@ padding-left: unset; } - a, ::slotted(a) { + a, + ::slotted(a) { color: var(--six-breadcrumbs-link-color) !important; cursor: pointer; text-decoration: none; @@ -48,8 +52,5 @@ text-decoration: underline; } } - } } - - diff --git a/libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.tsx b/libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.tsx index 188c5e0c7..9ee6002dc 100644 --- a/libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.tsx +++ b/libraries/ui-library/src/components/six-breadcrumbs/six-breadcrumbs.tsx @@ -1,14 +1,12 @@ import { Component, h, Prop } from '@stencil/core'; import { SixBreadcrumbsData } from './types'; - @Component({ tag: 'six-breadcrumbs', styleUrl: 'six-breadcrumbs.scss', shadow: true, }) export class SixBreadcrumbs { - /** Data for the breadcrumbs */ @Prop() data: SixBreadcrumbsData = []; @@ -17,12 +15,12 @@ export class SixBreadcrumbs {
- {this.data && this.data.map(({ name, disabled, onSixClick }) => - , - )} + {this.data && + this.data.map(({ name, disabled, onSixClick }) => ( + + ))}
- ) - ; + + ); } - } diff --git a/libraries/ui-library/src/components/six-breadcrumbs/types.ts b/libraries/ui-library/src/components/six-breadcrumbs/types.ts index fac9ea19c..8422f8c13 100644 --- a/libraries/ui-library/src/components/six-breadcrumbs/types.ts +++ b/libraries/ui-library/src/components/six-breadcrumbs/types.ts @@ -1,6 +1,6 @@ -export interface SixBreadcrumbsData extends Array<{ - name: string; - disabled?: boolean; - onSixClick?: () => void; -}> { -} +export interface SixBreadcrumbsData + extends Array<{ + name: string; + disabled?: boolean; + onSixClick?: () => void; + }> {} From 0a04346c16f9592ac6eae7422a6600e8608b4a23 Mon Sep 17 00:00:00 2001 From: fortesp Date: Thu, 19 Jun 2025 08:34:24 +0200 Subject: [PATCH 04/32] chore: more prettier formatting docs: readme.md update and others --- docs/components/six-breadcrumbs-item.md | 38 +++++++++++++++++++ docs/components/six-breadcrumbs.md | 37 ++++++++++++++++++ docs/examples/docs-demo-six-breadcrumbs-0.vue | 22 +++++++++++ docs/examples/docs-demo-six-breadcrumbs-1.vue | 22 +++++++++++ docs/examples/docs-demo-six-breadcrumbs-2.vue | 22 +++++++++++ docs/examples/docs-demo-six-breadcrumbs-3.vue | 20 ++++++++++ .../docs-demo-six-breadcrumbs-item-0.vue | 21 ++++++++++ .../docs-demo-six-breadcrumbs-item-1.vue | 20 ++++++++++ .../six-breadcrumbs-item/index.html | 2 +- .../src/components/six-breadcrumbs/index.html | 2 +- .../src/components/six-breadcrumbs/readme.md | 2 +- 11 files changed, 205 insertions(+), 3 deletions(-) create mode 100644 docs/components/six-breadcrumbs-item.md create mode 100644 docs/components/six-breadcrumbs.md create mode 100644 docs/examples/docs-demo-six-breadcrumbs-0.vue create mode 100644 docs/examples/docs-demo-six-breadcrumbs-1.vue create mode 100644 docs/examples/docs-demo-six-breadcrumbs-2.vue create mode 100644 docs/examples/docs-demo-six-breadcrumbs-3.vue create mode 100644 docs/examples/docs-demo-six-breadcrumbs-item-0.vue create mode 100644 docs/examples/docs-demo-six-breadcrumbs-item-1.vue diff --git a/docs/components/six-breadcrumbs-item.md b/docs/components/six-breadcrumbs-item.md new file mode 100644 index 000000000..23250b109 --- /dev/null +++ b/docs/components/six-breadcrumbs-item.md @@ -0,0 +1,38 @@ +# six-breadcrumb-item + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ------------------------------- | --------- | ------- | +| `disabled` | `disabled` | If the breadcrumb is disabled | `boolean` | `false` | +| `name` | `name` | Name or label of the breadcrumb | `string` | `''` | + + +## Events + +| Event | Description | Type | +| ---------- | ----------------- | ------------------------ | +| `sixClick` | Emitted on click. | `CustomEvent` | + + +## Dependencies + +### Used by + + - [six-breadcrumbs](six-breadcrumbs.html) + +### Graph +```mermaid +graph TD; + six-breadcrumbs --> six-breadcrumbs-item + style six-breadcrumbs-item fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +Copyright © 2021-present SIX-Group diff --git a/docs/components/six-breadcrumbs.md b/docs/components/six-breadcrumbs.md new file mode 100644 index 000000000..c96ae423c --- /dev/null +++ b/docs/components/six-breadcrumbs.md @@ -0,0 +1,37 @@ +# Breadcrumbs + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ------------------------ | -------------------- | ------- | +| `data` | `data` | Data for the breadcrumbs | `SixBreadcrumbsData` | `[]` | + + +## Shadow Parts + +| Part | Description | +| -------- | ----------- | +| `"base"` | | + + +## Dependencies + +### Depends on + +- [six-breadcrumbs-item](six-breadcrumbs-item.html) + +### Graph +```mermaid +graph TD; + six-breadcrumbs --> six-breadcrumbs-item + style six-breadcrumbs fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +Copyright © 2021-present SIX-Group diff --git a/docs/examples/docs-demo-six-breadcrumbs-0.vue b/docs/examples/docs-demo-six-breadcrumbs-0.vue new file mode 100644 index 000000000..f82defa67 --- /dev/null +++ b/docs/examples/docs-demo-six-breadcrumbs-0.vue @@ -0,0 +1,22 @@ + + + \ No newline at end of file diff --git a/docs/examples/docs-demo-six-breadcrumbs-1.vue b/docs/examples/docs-demo-six-breadcrumbs-1.vue new file mode 100644 index 000000000..f9b9ad143 --- /dev/null +++ b/docs/examples/docs-demo-six-breadcrumbs-1.vue @@ -0,0 +1,22 @@ + + + \ No newline at end of file diff --git a/docs/examples/docs-demo-six-breadcrumbs-2.vue b/docs/examples/docs-demo-six-breadcrumbs-2.vue new file mode 100644 index 000000000..dd7190e9d --- /dev/null +++ b/docs/examples/docs-demo-six-breadcrumbs-2.vue @@ -0,0 +1,22 @@ + + + \ No newline at end of file diff --git a/docs/examples/docs-demo-six-breadcrumbs-3.vue b/docs/examples/docs-demo-six-breadcrumbs-3.vue new file mode 100644 index 000000000..b5e07baad --- /dev/null +++ b/docs/examples/docs-demo-six-breadcrumbs-3.vue @@ -0,0 +1,20 @@ + + + \ No newline at end of file diff --git a/docs/examples/docs-demo-six-breadcrumbs-item-0.vue b/docs/examples/docs-demo-six-breadcrumbs-item-0.vue new file mode 100644 index 000000000..dca05eea2 --- /dev/null +++ b/docs/examples/docs-demo-six-breadcrumbs-item-0.vue @@ -0,0 +1,21 @@ + + + \ No newline at end of file diff --git a/docs/examples/docs-demo-six-breadcrumbs-item-1.vue b/docs/examples/docs-demo-six-breadcrumbs-item-1.vue new file mode 100644 index 000000000..3b4a1f905 --- /dev/null +++ b/docs/examples/docs-demo-six-breadcrumbs-item-1.vue @@ -0,0 +1,20 @@ + + + \ No newline at end of file diff --git a/libraries/ui-library/src/components/six-breadcrumbs-item/index.html b/libraries/ui-library/src/components/six-breadcrumbs-item/index.html index df3fe38d0..456acf8ae 100644 --- a/libraries/ui-library/src/components/six-breadcrumbs-item/index.html +++ b/libraries/ui-library/src/components/six-breadcrumbs-item/index.html @@ -1,4 +1,4 @@ - + diff --git a/libraries/ui-library/src/components/six-breadcrumbs/index.html b/libraries/ui-library/src/components/six-breadcrumbs/index.html index 87de63a45..1824d7dbd 100644 --- a/libraries/ui-library/src/components/six-breadcrumbs/index.html +++ b/libraries/ui-library/src/components/six-breadcrumbs/index.html @@ -1,4 +1,4 @@ - + diff --git a/libraries/ui-library/src/components/six-breadcrumbs/readme.md b/libraries/ui-library/src/components/six-breadcrumbs/readme.md index 6ef015def..7069caff8 100644 --- a/libraries/ui-library/src/components/six-breadcrumbs/readme.md +++ b/libraries/ui-library/src/components/six-breadcrumbs/readme.md @@ -9,7 +9,7 @@ | Property | Attribute | Description | Type | Default | | -------- | --------- | ------------------------ | -------------------- | ------- | -| `data` | -- | Data for the breadcrumbs | `SixBreadcrumbsData` | `[]` | +| `data` | `data` | Data for the breadcrumbs | `SixBreadcrumbsData` | `[]` | ## Shadow Parts From 8db2b47454f8d28a808b33b5dde7b4e0f186b153 Mon Sep 17 00:00:00 2001 From: fortesp Date: Thu, 19 Jun 2025 08:39:18 +0200 Subject: [PATCH 05/32] docs: update --- docs/components/component.tags.mts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components/component.tags.mts b/docs/components/component.tags.mts index 77f4db6b6..2b42ae3e6 100644 --- a/docs/components/component.tags.mts +++ b/docs/components/component.tags.mts @@ -1 +1 @@ -export const components = ["six-alert","six-avatar","six-badge","six-button","six-card","six-checkbox","six-date","six-datepicker","six-details","six-dialog","six-drawer","six-dropdown","six-error","six-error-page","six-file-list","six-file-list-item","six-file-upload","six-footer","six-group-label","six-header","six-header-dropdown-item","six-header-item","six-header-menu-button","six-icon","six-icon-button","six-input","six-item-picker","six-language-switcher","six-layout-grid","six-logo","six-main-container","six-menu","six-menu-divider","six-menu-item","six-menu-label","six-picto","six-progress-bar","six-progress-ring","six-radio","six-range","six-rating","six-root","six-search-field","six-select","six-sidebar","six-sidebar-item","six-sidebar-item-group","six-spinner","six-stage-indicator","six-switch","six-tab","six-tab-group","six-tab-panel","six-tag","six-textarea","six-tile","six-timepicker","six-tooltip"]; \ No newline at end of file +export const components = ["six-alert","six-avatar","six-badge","six-breadcrumbs","six-breadcrumbs-item","six-button","six-card","six-checkbox","six-date","six-datepicker","six-details","six-dialog","six-drawer","six-dropdown","six-error","six-error-page","six-file-list","six-file-list-item","six-file-upload","six-footer","six-group-label","six-header","six-header-dropdown-item","six-header-item","six-header-menu-button","six-icon","six-icon-button","six-input","six-item-picker","six-language-switcher","six-layout-grid","six-logo","six-main-container","six-menu","six-menu-divider","six-menu-item","six-menu-label","six-picto","six-progress-bar","six-progress-ring","six-radio","six-range","six-root","six-search-field","six-select","six-sidebar","six-sidebar-item","six-sidebar-item-group","six-spinner","six-stage-indicator","six-switch","six-tab","six-tab-group","six-tab-panel","six-tag","six-textarea","six-tile","six-timepicker","six-tooltip"]; \ No newline at end of file From 6e4c508214117e0ecbb78279afbacd747f3d6a55 Mon Sep 17 00:00:00 2001 From: fortesp Date: Thu, 19 Jun 2025 08:47:53 +0200 Subject: [PATCH 06/32] docs: readme.md update on multiple components --- .../src/components/six-date/readme.md | 2 +- .../src/components/six-datepicker/readme.md | 58 +++++++++---------- .../src/components/six-dropdown/readme.md | 4 +- .../src/components/six-error-page/readme.md | 14 ++--- .../src/components/six-item-picker/readme.md | 2 +- .../six-language-switcher/readme.md | 8 +-- .../src/components/six-menu/readme.md | 2 +- .../src/components/six-range/readme.md | 32 +++++----- .../src/components/six-select/readme.md | 2 +- 9 files changed, 62 insertions(+), 62 deletions(-) diff --git a/libraries/ui-library/src/components/six-date/readme.md b/libraries/ui-library/src/components/six-date/readme.md index 4b4ff94f8..238f18079 100644 --- a/libraries/ui-library/src/components/six-date/readme.md +++ b/libraries/ui-library/src/components/six-date/readme.md @@ -13,7 +13,7 @@ A date picker component that allows users to select dates via a calendar popup o | Property | Attribute | Description | Type | Default | | ---------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | -------------- | -| `allowedDates` | -- | Callback to determine which dates in the picker should be selectable. | `(date: string) => boolean` | `() => true` | +| `allowedDates` | `allowed-dates` | Callback to determine which dates in the picker should be selectable. | `(date: string) => boolean` | `() => true` | | `clearable` | `clearable` | Set to true to add a clear button when the input is populated. | `boolean` | `false` | | `dateFormat` | `date-format` | Defines the format pattern for displaying dates and how dates can be entered via keyboard. The parser accepts flexible input that doesn't strictly match the format pattern. Input with missing leading zeros or incomplete years will be automatically normalized. For example, with the pattern "dd.MM.yyyy": "1.1.2025" becomes "01.01.2025" and "1.1.225" becomes "01.01.0225". Defaults to "dd.MM.yyyy". Available patterns: - Year: "yyyy" (e.g., "2021") - Month: "MM" (e.g., "01" for January) or "M" (e.g., "1" for January) - Day: "dd" (e.g., "08" for the 8th) or "d" (e.g., "8" for the 8th) Examples: - "dd.MM.yyyy" -> "31.01.2024" - "yyyy-MM-dd" -> "2024-01-31" - "d.M.yyyy" -> "31.1.2024" | `string` | `'dd.MM.yyyy'` | | `disabled` | `disabled` | If `true` the component is disabled. | `boolean` | `false` | diff --git a/libraries/ui-library/src/components/six-datepicker/readme.md b/libraries/ui-library/src/components/six-datepicker/readme.md index 6be05148e..ef4671f2b 100644 --- a/libraries/ui-library/src/components/six-datepicker/readme.md +++ b/libraries/ui-library/src/components/six-datepicker/readme.md @@ -11,35 +11,35 @@ The six-datepicker component is deprecated. Please use the [six-date](./six-date ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -| `allowedDates` | -- | Callback to determine which date in the datepicker should be selectable. the callback function will get a datestring as an argument, e.g. '2021-07-04' Usage e.g.: const datepicker = document.getElementById('allowed-date-picker'); datepicker.allowedDates = datestring => parseInt(datestring.split('-')[2], 10) % 2 === 0; | `(date: Date) => boolean` | `() => true` | -| `clearable` | `clearable` | Set to true to add a clear button when the input is populated. | `boolean` | `false` | -| `closeOnSelect` | `close-on-select` | Closes the datepicker dropdown after selection | `boolean` | `this.type === 'date'` | -| `containingElement` | -- | The dropdown will close when the user interacts outside of this element (e.g. clicking). | `HTMLElement \| undefined` | `undefined` | -| `dateFormat` | `date-format` | Define the dateFormat. Valid formats are: 'dd.mm.yyyy' 'yyyy-mm-dd' 'dd-mm-yyyy' 'dd/mm/yyyy' 'yyyy/mm/dd' 'dd.mm.yy' 'yy-mm-dd' 'dd-mm-yy' 'dd/mm/yy' 'yy/mm/dd' | `SixDateFormats.DDMMYYYY_DASH \| SixDateFormats.DDMMYYYY_DASH_TIME \| SixDateFormats.DDMMYYYY_SLASH \| SixDateFormats.DDMMYYYY_SLASH_TIME \| SixDateFormats.DDMMYYY_DOT \| SixDateFormats.DDMMYYY_DOT_TIME \| SixDateFormats.DDMMYY_DASH \| SixDateFormats.DDMMYY_DASH_TIME \| SixDateFormats.DDMMYY_DOT \| SixDateFormats.DDMMYY_DOT_TIME \| SixDateFormats.DDMMYY_SLASH \| SixDateFormats.DDMMYY_SLASH_TIME \| SixDateFormats.YYMMDD_DASH \| SixDateFormats.YYMMDD_DASH_TIME \| SixDateFormats.YYMMDD_SLASH \| SixDateFormats.YYMMDD_SLASH_TIME \| SixDateFormats.YYYYMMDD_DASH \| SixDateFormats.YYYYMMDD_DASH_TIME \| SixDateFormats.YYYYMMDD_SLASH \| SixDateFormats.YYYYMMDD_SLASH_TIME` | `SixDateFormats.DDMMYYY_DOT` | -| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke. | `number` | `DEFAULT_DEBOUNCE_FAST` | -| `defaultDate` | `default-date` | The date to defines where the datepicker popup starts. The prop accepts ISO 8601 date strings (YYYY-MM-DD). | `string \| undefined` | `undefined` | -| `disabled` | `disabled` | If `true` the component is disabled. | `boolean` | `false` | -| `errorText` | `error-text` | The error message shown, if `invalid` is set to true. | `string \| string[]` | `''` | -| `errorTextCount` | `error-text-count` | The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 | `number \| undefined` | `undefined` | -| `hoist` | `hoist` | Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto\|scroll`. | `boolean` | `false` | -| `iconPosition` | `icon-position` | Set the position of the icon | `"left" \| "right"` | `'left'` | -| `inline` | `inline` | Indicates whether or not the calendar should be shown as an inline (always open) component | `boolean` | `false` | -| `invalid` | `invalid` | If this property is set to true and an error message is provided by `errorText`, the error message is displayed. | `boolean` | `false` | -| `label` | `label` | The label text. | `string` | `''` | -| `locale` | `locale` | The language used to render the weekdays and months. | `"de" \| "en" \| "es" \| "fr" \| "it"` | `'en'` | -| `max` | -- | The maximum datetime allowed. Value must be a date object | `Date \| undefined` | `undefined` | -| `min` | -- | The minimum datetime allowed. Value must be a date object | `Date \| undefined` | `undefined` | -| `name` | `name` | The input's name attribute. | `string` | `''` | -| `open` | `open` | Indicates whether or not the calendar dropdown is open on startup. You can use this in lieu of the show/hide methods. | `boolean` | `false` | -| `placeholder` | `placeholder` | The placeholder defines what text to be shown on the input element | `string \| undefined` | `undefined` | -| `placement` | `placement` | The enforced placement of the dropdown panel. | `"bottom" \| "top" \| undefined` | `undefined` | -| `readonly` | `readonly` | If `true` the user can only select a date via the component in the popup, but not directly edit the input field. | `boolean` | `false` | -| `required` | `required` | Set to true to show an asterisk beneath the label. | `boolean` | `false` | -| `size` | `size` | Datepicker size. | `"large" \| "medium" \| "small"` | `'medium'` | -| `type` | `type` | Set the type. | `"date" \| "date-time"` | `'date'` | -| `value` | -- | The value of the form field, which accepts a date object. | `Date \| undefined` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | +| `allowedDates` | `allowed-dates` | Callback to determine which date in the datepicker should be selectable. the callback function will get a datestring as an argument, e.g. '2021-07-04' Usage e.g.: const datepicker = document.getElementById('allowed-date-picker'); datepicker.allowedDates = datestring => parseInt(datestring.split('-')[2], 10) % 2 === 0; | `(date: Date) => boolean` | `() => true` | +| `clearable` | `clearable` | Set to true to add a clear button when the input is populated. | `boolean` | `false` | +| `closeOnSelect` | `close-on-select` | Closes the datepicker dropdown after selection | `boolean` | `this.type === 'date'` | +| `containingElement` | `containing-element` | The dropdown will close when the user interacts outside of this element (e.g. clicking). | `HTMLElement \| undefined` | `undefined` | +| `dateFormat` | `date-format` | Define the dateFormat. Valid formats are: 'dd.mm.yyyy' 'yyyy-mm-dd' 'dd-mm-yyyy' 'dd/mm/yyyy' 'yyyy/mm/dd' 'dd.mm.yy' 'yy-mm-dd' 'dd-mm-yy' 'dd/mm/yy' 'yy/mm/dd' | `SixDateFormats.DDMMYYYY_DASH \| SixDateFormats.DDMMYYYY_DASH_TIME \| SixDateFormats.DDMMYYYY_SLASH \| SixDateFormats.DDMMYYYY_SLASH_TIME \| SixDateFormats.DDMMYYY_DOT \| SixDateFormats.DDMMYYY_DOT_TIME \| SixDateFormats.DDMMYY_DASH \| SixDateFormats.DDMMYY_DASH_TIME \| SixDateFormats.DDMMYY_DOT \| SixDateFormats.DDMMYY_DOT_TIME \| SixDateFormats.DDMMYY_SLASH \| SixDateFormats.DDMMYY_SLASH_TIME \| SixDateFormats.YYMMDD_DASH \| SixDateFormats.YYMMDD_DASH_TIME \| SixDateFormats.YYMMDD_SLASH \| SixDateFormats.YYMMDD_SLASH_TIME \| SixDateFormats.YYYYMMDD_DASH \| SixDateFormats.YYYYMMDD_DASH_TIME \| SixDateFormats.YYYYMMDD_SLASH \| SixDateFormats.YYYYMMDD_SLASH_TIME` | `SixDateFormats.DDMMYYY_DOT` | +| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke. | `number` | `DEFAULT_DEBOUNCE_FAST` | +| `defaultDate` | `default-date` | The date to defines where the datepicker popup starts. The prop accepts ISO 8601 date strings (YYYY-MM-DD). | `string \| undefined` | `undefined` | +| `disabled` | `disabled` | If `true` the component is disabled. | `boolean` | `false` | +| `errorText` | `error-text` | The error message shown, if `invalid` is set to true. | `string \| string[]` | `''` | +| `errorTextCount` | `error-text-count` | The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 | `number \| undefined` | `undefined` | +| `hoist` | `hoist` | Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto\|scroll`. | `boolean` | `false` | +| `iconPosition` | `icon-position` | Set the position of the icon | `"left" \| "right"` | `'left'` | +| `inline` | `inline` | Indicates whether or not the calendar should be shown as an inline (always open) component | `boolean` | `false` | +| `invalid` | `invalid` | If this property is set to true and an error message is provided by `errorText`, the error message is displayed. | `boolean` | `false` | +| `label` | `label` | The label text. | `string` | `''` | +| `locale` | `locale` | The language used to render the weekdays and months. | `"de" \| "en" \| "es" \| "fr" \| "it"` | `'en'` | +| `max` | `max` | The maximum datetime allowed. Value must be a date object | `Date \| undefined` | `undefined` | +| `min` | `min` | The minimum datetime allowed. Value must be a date object | `Date \| undefined` | `undefined` | +| `name` | `name` | The input's name attribute. | `string` | `''` | +| `open` | `open` | Indicates whether or not the calendar dropdown is open on startup. You can use this in lieu of the show/hide methods. | `boolean` | `false` | +| `placeholder` | `placeholder` | The placeholder defines what text to be shown on the input element | `string \| undefined` | `undefined` | +| `placement` | `placement` | The enforced placement of the dropdown panel. | `"bottom" \| "top" \| undefined` | `undefined` | +| `readonly` | `readonly` | If `true` the user can only select a date via the component in the popup, but not directly edit the input field. | `boolean` | `false` | +| `required` | `required` | Set to true to show an asterisk beneath the label. | `boolean` | `false` | +| `size` | `size` | Datepicker size. | `"large" \| "medium" \| "small"` | `'medium'` | +| `type` | `type` | Set the type. | `"date" \| "date-time"` | `'date'` | +| `value` | `value` | The value of the form field, which accepts a date object. | `Date \| undefined` | `undefined` | ## Events diff --git a/libraries/ui-library/src/components/six-dropdown/readme.md b/libraries/ui-library/src/components/six-dropdown/readme.md index 93edbe155..8beed5995 100644 --- a/libraries/ui-library/src/components/six-dropdown/readme.md +++ b/libraries/ui-library/src/components/six-dropdown/readme.md @@ -12,7 +12,7 @@ | `asyncFilter` | `async-filter` | Set to true to allow async filtering. When you enter something in the search field the component will only emit an event but not filter any elements itself. You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself | `boolean` | `false` | | `autofocusFilter` | `autofocus-filter` | By default the search field will be focused when opening a dropdown with filtering enabled. | `boolean` | `true` | | `closeOnSelect` | `close-on-select` | Determines whether the dropdown should hide when a menu item is selected. | `boolean` | `true` | -| `containingElement` | -- | The dropdown will close when the user interacts outside of this element (e.g. clicking). | `HTMLElement \| undefined` | `undefined` | +| `containingElement` | `containing-element` | The dropdown will close when the user interacts outside of this element (e.g. clicking). | `HTMLElement \| undefined` | `undefined` | | `disableHideOnEnterAndSpace` | `disable-hide-on-enter-and-space` | The panel can be opend/closed by pressing the spacebar or the enter key. In some cases you might want to avoid this | `boolean` | `false` | | `distance` | `distance` | The distance in pixels from which to offset the panel away from its trigger. | `number` | `4` | | `filter` | `filter` | Set to true to allow auto filtering for entries in the dropdown. With this flag the dropdown will automatically filter itsel. If you need to coordinate the shown elements yourself, e.g. because you need to call an endpoint use asyncFilter instead | `boolean` | `false` | @@ -21,7 +21,7 @@ | `hoist` | `hoist` | Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto\|scroll`. | `boolean` | `false` | | `matchTriggerWidth` | `match-trigger-width` | Determines if the dropdown panel's width should match the width of the trigger element. If set to `true`, the panel will resize its width to align with the trigger's width. If `false` or omitted, the panel will maintain its default width. | `boolean` | `false` | | `open` | `open` | Indicates whether the dropdown is open. You can use this in lieu of the show/hide methods. | `boolean` | `false` | -| `options` | -- | Set the options to be shown in the dropdown (alternative to setting the elements via html) | `SixMenuItemData[]` | `[]` | +| `options` | `options` | Set the options to be shown in the dropdown (alternative to setting the elements via html) | `SixMenuItemData[]` | `[]` | | `placement` | `placement` | The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside the viewport. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom-start'` | | `skidding` | `skidding` | The distance in pixels from which to offset the panel along its trigger. | `number` | `0` | | `virtualScroll` | `virtual-scroll` | Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around) are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. | `boolean` | `false` | diff --git a/libraries/ui-library/src/components/six-error-page/readme.md b/libraries/ui-library/src/components/six-error-page/readme.md index 3ba64aba9..892e6ca57 100644 --- a/libraries/ui-library/src/components/six-error-page/readme.md +++ b/libraries/ui-library/src/components/six-error-page/readme.md @@ -7,13 +7,13 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------- | -------------- | ---------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| `customDescription` | -- | Defines a custom description. | `string[] \| undefined` | `undefined` | -| `customIcon` | `custom-icon` | Defines a custom icon. | `string \| undefined` | `undefined` | -| `customTitle` | `custom-title` | Defines a custom title. | `string \| undefined` | `undefined` | -| `errorCode` | `error-code` | Defines error Code and thus displays the proper error page. | `403 \| 404 \| 500 \| undefined` | `undefined` | -| `language` | `language` | Defines language and thus displays the proper error page in the selected language. | `"de" \| "en"` | `'en'` | +| Property | Attribute | Description | Type | Default | +| ------------------- | -------------------- | ---------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| `customDescription` | `custom-description` | Defines a custom description. | `string[] \| undefined` | `undefined` | +| `customIcon` | `custom-icon` | Defines a custom icon. | `string \| undefined` | `undefined` | +| `customTitle` | `custom-title` | Defines a custom title. | `string \| undefined` | `undefined` | +| `errorCode` | `error-code` | Defines error Code and thus displays the proper error page. | `403 \| 404 \| 500 \| undefined` | `undefined` | +| `language` | `language` | Defines language and thus displays the proper error page in the selected language. | `"de" \| "en"` | `'en'` | ## Shadow Parts diff --git a/libraries/ui-library/src/components/six-item-picker/readme.md b/libraries/ui-library/src/components/six-item-picker/readme.md index 23d372b62..b7401030c 100644 --- a/libraries/ui-library/src/components/six-item-picker/readme.md +++ b/libraries/ui-library/src/components/six-item-picker/readme.md @@ -11,7 +11,7 @@ | ------------------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | | `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event. If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click (and keep pressed) and once you release | `number` | `DEFAULT_DEBOUNCE_FAST` | | `interval` | `interval` | Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed. | `number` | `DEFAULT_DEBOUNCE_INSANELY_FAST` | -| `items` | -- | Defines a custom list of items you can iterate through | `string[] \| undefined` | `undefined` | +| `items` | `items` | Defines a custom list of items you can iterate through | `string[] \| undefined` | `undefined` | | `max` | `max` | The maximum value allowed to pick. | `number \| string \| undefined` | `undefined` | | `min` | `min` | The minimum value allowed to pick. | `number \| string \| undefined` | `undefined` | | `padded` | `padded` | Defines whether the items should be padded | `boolean` | `false` | diff --git a/libraries/ui-library/src/components/six-language-switcher/readme.md b/libraries/ui-library/src/components/six-language-switcher/readme.md index d629c4d59..b62ba59c0 100644 --- a/libraries/ui-library/src/components/six-language-switcher/readme.md +++ b/libraries/ui-library/src/components/six-language-switcher/readme.md @@ -7,10 +7,10 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------- | ---------- | ------------------------------------------------- | ---------------------------------------- | ------------------- | -| `languages` | -- | The languages which should be selectable options. | `SixLanguageSwitcherInput[] \| string[]` | `DEFAULT_LANGUAGES` | -| `selected` | `selected` | The language which should be shown as selected | `string \| undefined` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ----------- | ----------- | ------------------------------------------------- | ---------------------------------------- | ------------------- | +| `languages` | `languages` | The languages which should be selectable options. | `SixLanguageSwitcherInput[] \| string[]` | `DEFAULT_LANGUAGES` | +| `selected` | `selected` | The language which should be shown as selected | `string \| undefined` | `undefined` | ## Events diff --git a/libraries/ui-library/src/components/six-menu/readme.md b/libraries/ui-library/src/components/six-menu/readme.md index 7c441f54d..2676958e6 100644 --- a/libraries/ui-library/src/components/six-menu/readme.md +++ b/libraries/ui-library/src/components/six-menu/readme.md @@ -11,7 +11,7 @@ | ------------------------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | ----------- | | `disableKeyboardHandling` | `disable-keyboard-handling` | Internal: Disables handling of key presses. | `boolean` | `false` | | `itemSize` | `item-size` | Used for virtual scrolling Define how many items should be rendered in the DOM when using virtual scrolling | `number` | `10` | -| `items` | -- | Set the options to be shown in the dropdown | `SixMenuItemData[] \| null` | `null` | +| `items` | `items` | Set the options to be shown in the dropdown | `SixMenuItemData[] \| null` | `null` | | `itemsShown` | `items-shown` | Defines how many items should be shown. If the number of items is larger than this property a scrollbar will be shown | `number \| undefined` | `undefined` | | `removeBoxShadow` | `remove-box-shadow` | Set to true to remove the box-shadow | `boolean` | `false` | | `scrollingDebounce` | `scrolling-debounce` | Used for virtual scrolling Define the debounce for listening on scrolling changes in milliseconds. The lower the number the more sensitive the component reacts to scrolling changes. | `number` | `15` | diff --git a/libraries/ui-library/src/components/six-range/readme.md b/libraries/ui-library/src/components/six-range/readme.md index 41558a612..1f873ccff 100644 --- a/libraries/ui-library/src/components/six-range/readme.md +++ b/libraries/ui-library/src/components/six-range/readme.md @@ -7,22 +7,22 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------------------------------------- | -| `disabled` | `disabled` | Set to true to disable the input. | `boolean` | `false` | -| `errorText` | `error-text` | The error message shown, if `invalid` is set to true. | `string \| string[]` | `''` | -| `errorTextCount` | `error-text-count` | The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 | `number \| undefined` | `undefined` | -| `helpText` | `help-text` | The range's help text. Alternatively, you can use the help-text slot. | `string` | `''` | -| `invalid` | `invalid` | If this property is set to true and an error message is provided by `errorText`, the error message is displayed. | `boolean` | `false` | -| `label` | `label` | The label text. | `string` | `''` | -| `max` | `max` | The input's max attribute. | `number` | `100` | -| `min` | `min` | The input's min attribute. | `number` | `0` | -| `name` | `name` | The input's name attribute. | `string` | `''` | -| `required` | `required` | Set to true to show an asterisk beneath the label. | `boolean` | `false` | -| `step` | `step` | The input's step attribute. | `number` | `1` | -| `tooltip` | `tooltip` | The preferred placedment of the tooltip. | `"bottom" \| "none" \| "top"` | `'top'` | -| `tooltipFormatter` | -- | A function used to format the tooltip's value. | `(value: number) => string` | `(value: number) => value.toString()` | -| `value` | `value` | The input's value attribute. | `number` | `0` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ---------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------------------------------------- | +| `disabled` | `disabled` | Set to true to disable the input. | `boolean` | `false` | +| `errorText` | `error-text` | The error message shown, if `invalid` is set to true. | `string \| string[]` | `''` | +| `errorTextCount` | `error-text-count` | The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 | `number \| undefined` | `undefined` | +| `helpText` | `help-text` | The range's help text. Alternatively, you can use the help-text slot. | `string` | `''` | +| `invalid` | `invalid` | If this property is set to true and an error message is provided by `errorText`, the error message is displayed. | `boolean` | `false` | +| `label` | `label` | The label text. | `string` | `''` | +| `max` | `max` | The input's max attribute. | `number` | `100` | +| `min` | `min` | The input's min attribute. | `number` | `0` | +| `name` | `name` | The input's name attribute. | `string` | `''` | +| `required` | `required` | Set to true to show an asterisk beneath the label. | `boolean` | `false` | +| `step` | `step` | The input's step attribute. | `number` | `1` | +| `tooltip` | `tooltip` | The preferred placedment of the tooltip. | `"bottom" \| "none" \| "top"` | `'top'` | +| `tooltipFormatter` | `tooltip-formatter` | A function used to format the tooltip's value. | `(value: number) => string` | `(value: number) => value.toString()` | +| `value` | `value` | The input's value attribute. | `number` | `0` | ## Events diff --git a/libraries/ui-library/src/components/six-select/readme.md b/libraries/ui-library/src/components/six-select/readme.md index 9c93b457a..286879041 100644 --- a/libraries/ui-library/src/components/six-select/readme.md +++ b/libraries/ui-library/src/components/six-select/readme.md @@ -26,7 +26,7 @@ | `line` | `line` | Set to render as line | `boolean` | `false` | | `multiple` | `multiple` | Set to true to enable multiselect. | `boolean` | `false` | | `name` | `name` | The select's name. | `string` | `''` | -| `options` | -- | Set the options to be shown in the dropdown (alternative to setting the elements via html) | `SixMenuItemData[] \| null` | `null` | +| `options` | `options` | Set the options to be shown in the dropdown (alternative to setting the elements via html) | `SixMenuItemData[] \| null` | `null` | | `pill` | `pill` | Set to true to draw a pill-style select with rounded edges. | `boolean` | `false` | | `placeholder` | `placeholder` | The select's placeholder text. | `string` | `''` | | `required` | `required` | Set to true to show an asterisk beneath the label. | `boolean` | `false` | From faa28255ef83d91a798ed127934459e881a3e36d Mon Sep 17 00:00:00 2001 From: fortesp Date: Mon, 23 Jun 2025 10:10:22 +0200 Subject: [PATCH 07/32] chore: improved disabled comment --- .../components/six-breadcrumbs-item/six-breadcrumbs-item.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumbs-item.tsx b/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumbs-item.tsx index 13a5cbdf6..82128a820 100644 --- a/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumbs-item.tsx +++ b/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumbs-item.tsx @@ -10,7 +10,7 @@ export class SixBreadcrumbsItem { /** Name or label of the breadcrumb */ @Prop() name: string = ''; - /** If the breadcrumb is disabled */ + /** Set to true to disable the breadcrumb item. */ @Prop() disabled: boolean = false; /** Emitted on click. */ From 37b29f6df2560c10e2d0605ce4e69dfbf4bd1813 Mon Sep 17 00:00:00 2001 From: fortesp Date: Mon, 23 Jun 2025 10:14:17 +0200 Subject: [PATCH 08/32] chore: kebab case and comment --- .../components/six-breadcrumbs-item/six-breadcrumbs-item.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumbs-item.tsx b/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumbs-item.tsx index 82128a820..fe979cb6b 100644 --- a/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumbs-item.tsx +++ b/libraries/ui-library/src/components/six-breadcrumbs-item/six-breadcrumbs-item.tsx @@ -13,8 +13,8 @@ export class SixBreadcrumbsItem { /** Set to true to disable the breadcrumb item. */ @Prop() disabled: boolean = false; - /** Emitted on click. */ - @Event({ eventName: 'sixClick' }) sixClickEvent!: EventEmitter; + /** Emitted when the breadcrumb item is clicked. */ + @Event({ eventName: 'six-click' }) sixClickEvent!: EventEmitter; render() { return ( From 4fe11f2b68c91f00e3261258c3f28e23d358c1bc Mon Sep 17 00:00:00 2001 From: fortesp Date: Mon, 23 Jun 2025 16:40:38 +0200 Subject: [PATCH 09/32] fix: six-button.scss import not correct --- libraries/ui-library/src/components/six-button/six-button.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libraries/ui-library/src/components/six-button/six-button.scss b/libraries/ui-library/src/components/six-button/six-button.scss index bf8ba4aa9..0146d50f9 100644 --- a/libraries/ui-library/src/components/six-button/six-button.scss +++ b/libraries/ui-library/src/components/six-button/six-button.scss @@ -1,4 +1,4 @@ -@import 'src/global/component'; +@import '../../../src/global/component'; :host { display: inline-block; From 7045c155058d5f96bd9ec4468c9b230bf06bde75 Mon Sep 17 00:00:00 2001 From: fortesp Date: Tue, 24 Jun 2025 08:14:45 +0200 Subject: [PATCH 10/32] fix: changed entire way how its handled inspired by shoelace --- libraries/ui-library/src/components.d.ts | 656 +++++++++++++++++- .../six-breadcrumbs-item/index.html | 46 +- .../components/six-breadcrumbs-item/readme.md | 35 +- .../six-breadcrumbs-item.scss | 36 +- .../six-breadcrumbs-item.tsx | 46 +- .../test/six-breadcrumbs-item.spec.tsx | 35 +- .../src/components/six-breadcrumbs/index.html | 60 +- .../src/components/six-breadcrumbs/readme.md | 33 +- .../six-breadcrumbs/six-breadcrumbs.scss | 45 +- .../six-breadcrumbs/six-breadcrumbs.tsx | 50 +- .../test/six-breadcrumbs.spec.tsx | 48 +- .../src/components/six-breadcrumbs/types.ts | 6 - .../src/components/six-button/readme.md | 2 + 13 files changed, 854 insertions(+), 244 deletions(-) delete mode 100644 libraries/ui-library/src/components/six-breadcrumbs/types.ts diff --git a/libraries/ui-library/src/components.d.ts b/libraries/ui-library/src/components.d.ts index 63f4706df..263b5599c 100644 --- a/libraries/ui-library/src/components.d.ts +++ b/libraries/ui-library/src/components.d.ts @@ -7,7 +7,6 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { AlertType } from "./components/six-alert/six-alert"; import { EmptyPayload } from "./utils/types"; -import { SixBreadcrumbsData } from "./components/six-breadcrumbs/types"; import { Language } from "./utils/error-messages"; import { SixDateFormats } from "./components/six-datepicker/six-date-formats"; import { SixDatepickerSelectPayload } from "./components/six-datepicker/six-datepicker"; @@ -31,7 +30,6 @@ import { TimeFormat } from "./utils/time.util"; import { SixTimepickerChange } from "./components/six-timepicker/six-timepicker"; export { AlertType } from "./components/six-alert/six-alert"; export { EmptyPayload } from "./utils/types"; -export { SixBreadcrumbsData } from "./components/six-breadcrumbs/types"; export { Language } from "./utils/error-messages"; export { SixDateFormats } from "./components/six-datepicker/six-date-formats"; export { SixDatepickerSelectPayload } from "./components/six-datepicker/six-datepicker"; @@ -62,10 +60,12 @@ export namespace Components { interface SixAlert { /** * Set to true to make the alert closable. + * @default false */ "closable": boolean; /** * The length of time, in milliseconds, the alert will show before closing itself. If the user hovers over the toast alert, the timer will pause. On leaving the element with the mouse, the timer resets. + * @default Infinity */ "duration": number; /** @@ -74,6 +74,7 @@ export namespace Components { "hide": () => Promise; /** * Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. + * @default false */ "open": boolean; /** @@ -87,6 +88,7 @@ export namespace Components { "toast": (adjustPosition?: boolean) => Promise; /** * The type of alert. + * @default 'primary' */ "type": AlertType; } @@ -98,18 +100,22 @@ export namespace Components { interface SixAvatar { /** * Alternative text for the image. + * @default '' */ "alt": string; /** * The image source to use for the avatar. + * @default '' */ "image": string; /** * Initials to use as a fallback when no image is available (1-2 characters max recommended). + * @default '' */ "initials": string; /** * The shape of the avatar. + * @default 'circle' */ "shape": 'circle' | 'square' | 'rounded'; } @@ -121,32 +127,41 @@ export namespace Components { interface SixBadge { /** * Set to true to draw a pill-style badge with rounded edges. + * @default false */ "pill": boolean; /** * Set to true to make the badge pulsate to draw attention. + * @default false */ "pulse": boolean; /** * The badge's type. + * @default 'primary' */ "type": 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action'; } interface SixBreadcrumbs { - /** - * Data for the breadcrumbs - */ - "data": SixBreadcrumbsData; } interface SixBreadcrumbsItem { /** - * If the breadcrumb is disabled + * Set to true to disable the breadcrumb item. + * @default false */ "disabled": boolean; /** - * Name or label of the breadcrumb + * When set, the underlying button will be rendered as an `` with this `href` instead of a `