@breadstone/mosaik-elements-foundation 0.0.147 → 0.0.149
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Controls/Components/Buttons/Anchor/AnchorElement.d.ts +47 -21
- package/Controls/Components/Buttons/Anchor/AnchorElement.d.ts.map +1 -1
- package/Controls/Components/Buttons/Anchor/AnchorElement.js +47 -21
- package/Controls/Components/Buttons/Anchor/AnchorElement.js.map +1 -1
- package/Controls/Components/Buttons/Button/ButtonElement.d.ts +88 -48
- package/Controls/Components/Buttons/Button/ButtonElement.d.ts.map +1 -1
- package/Controls/Components/Buttons/Button/ButtonElement.js +88 -48
- package/Controls/Components/Buttons/Button/ButtonElement.js.map +1 -1
- package/Controls/Components/Buttons/CompoundButton/CompoundButtonElement.d.ts +74 -55
- package/Controls/Components/Buttons/CompoundButton/CompoundButtonElement.d.ts.map +1 -1
- package/Controls/Components/Buttons/CompoundButton/CompoundButtonElement.js +74 -55
- package/Controls/Components/Buttons/CompoundButton/CompoundButtonElement.js.map +1 -1
- package/Controls/Components/Buttons/FloatingActionButton/FloatingActionButtonElement.d.ts +67 -49
- package/Controls/Components/Buttons/FloatingActionButton/FloatingActionButtonElement.d.ts.map +1 -1
- package/Controls/Components/Buttons/FloatingActionButton/FloatingActionButtonElement.js +67 -49
- package/Controls/Components/Buttons/FloatingActionButton/FloatingActionButtonElement.js.map +1 -1
- package/Controls/Components/Buttons/ToggleButton/ToggleButtonElement.d.ts +75 -48
- package/Controls/Components/Buttons/ToggleButton/ToggleButtonElement.d.ts.map +1 -1
- package/Controls/Components/Buttons/ToggleButton/ToggleButtonElement.js +75 -48
- package/Controls/Components/Buttons/ToggleButton/ToggleButtonElement.js.map +1 -1
- package/Controls/Components/Buttons/ToggleButton/ToggleButtonGroupElement.d.ts +40 -2
- package/Controls/Components/Buttons/ToggleButton/ToggleButtonGroupElement.d.ts.map +1 -1
- package/Controls/Components/Buttons/ToggleButton/ToggleButtonGroupElement.js +40 -2
- package/Controls/Components/Buttons/ToggleButton/ToggleButtonGroupElement.js.map +1 -1
- package/Controls/Components/Cells/CellElement.d.ts +72 -39
- package/Controls/Components/Cells/CellElement.d.ts.map +1 -1
- package/Controls/Components/Cells/CellElement.js +72 -39
- package/Controls/Components/Cells/CellElement.js.map +1 -1
- package/Controls/Components/Cells/CellGroupElement.d.ts +76 -15
- package/Controls/Components/Cells/CellGroupElement.d.ts.map +1 -1
- package/Controls/Components/Cells/CellGroupElement.js +76 -15
- package/Controls/Components/Cells/CellGroupElement.js.map +1 -1
- package/Controls/Components/Charts/ChartElement.d.ts +83 -18
- package/Controls/Components/Charts/ChartElement.d.ts.map +1 -1
- package/Controls/Components/Charts/ChartElement.js +83 -18
- package/Controls/Components/Charts/ChartElement.js.map +1 -1
- package/Controls/Components/Effects/Ripple/RippleElement.d.ts +48 -9
- package/Controls/Components/Effects/Ripple/RippleElement.d.ts.map +1 -1
- package/Controls/Components/Effects/Ripple/RippleElement.js +48 -9
- package/Controls/Components/Effects/Ripple/RippleElement.js.map +1 -1
- package/Controls/Components/Forms/FormElement.d.ts +71 -12
- package/Controls/Components/Forms/FormElement.d.ts.map +1 -1
- package/Controls/Components/Forms/FormElement.js +71 -12
- package/Controls/Components/Forms/FormElement.js.map +1 -1
- package/Controls/Components/Grouping/Card/CardElement.d.ts +62 -57
- package/Controls/Components/Grouping/Card/CardElement.d.ts.map +1 -1
- package/Controls/Components/Grouping/Card/CardElement.js +62 -57
- package/Controls/Components/Grouping/Card/CardElement.js.map +1 -1
- package/Controls/Components/Grouping/Toolbar/ToolbarElement.d.ts +56 -45
- package/Controls/Components/Grouping/Toolbar/ToolbarElement.d.ts.map +1 -1
- package/Controls/Components/Grouping/Toolbar/ToolbarElement.js +56 -45
- package/Controls/Components/Grouping/Toolbar/ToolbarElement.js.map +1 -1
- package/Controls/Components/Inputs/AutoCompleteBox/AutoCompleteBoxElement.d.ts +38 -1
- package/Controls/Components/Inputs/AutoCompleteBox/AutoCompleteBoxElement.d.ts.map +1 -1
- package/Controls/Components/Inputs/AutoCompleteBox/AutoCompleteBoxElement.js +38 -1
- package/Controls/Components/Inputs/AutoCompleteBox/AutoCompleteBoxElement.js.map +1 -1
- package/Controls/Components/Inputs/Calendar/CalendarElement.d.ts +12 -0
- package/Controls/Components/Inputs/Calendar/CalendarElement.d.ts.map +1 -1
- package/Controls/Components/Inputs/Calendar/CalendarElement.js +48 -8
- package/Controls/Components/Inputs/Calendar/CalendarElement.js.map +1 -1
- package/Controls/Components/Inputs/Calendar/CalendarElementTemplate.d.ts.map +1 -1
- package/Controls/Components/Inputs/Calendar/CalendarElementTemplate.js +193 -104
- package/Controls/Components/Inputs/Calendar/CalendarElementTemplate.js.map +1 -1
- package/Controls/Components/Inputs/Calendar/CalendarItemElement.d.ts +36 -0
- package/Controls/Components/Inputs/Calendar/CalendarItemElement.d.ts.map +1 -1
- package/Controls/Components/Inputs/Calendar/CalendarItemElement.js +100 -0
- package/Controls/Components/Inputs/Calendar/CalendarItemElement.js.map +1 -1
- package/Controls/Components/Inputs/Calendar/ICalendarItemElementProps.d.ts +4 -0
- package/Controls/Components/Inputs/Calendar/ICalendarItemElementProps.d.ts.map +1 -1
- package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Cosmopolitan.d.ts.map +1 -1
- package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Cosmopolitan.js +43 -0
- package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Cosmopolitan.js.map +1 -1
- package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Joy.d.ts.map +1 -1
- package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Joy.js +43 -0
- package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Joy.js.map +1 -1
- package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Retro.d.ts.map +1 -1
- package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Retro.js +43 -0
- package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Retro.js.map +1 -1
- package/Controls/Components/Inputs/Calendar/Themes/CalendarHeaderElement.Cosmopolitan.js +2 -2
- package/Controls/Components/Inputs/Calendar/Themes/CalendarHeaderElement.Joy.js +2 -2
- package/Controls/Components/Inputs/Calendar/Themes/CalendarHeaderElement.Retro.js +2 -2
- package/Controls/Components/Inputs/Calendar/Themes/CalendarItemElement.Cosmopolitan.d.ts.map +1 -1
- package/Controls/Components/Inputs/Calendar/Themes/CalendarItemElement.Cosmopolitan.js +61 -0
- package/Controls/Components/Inputs/Calendar/Themes/CalendarItemElement.Cosmopolitan.js.map +1 -1
- package/Controls/Components/Inputs/Calendar/Themes/CalendarItemElement.Joy.d.ts.map +1 -1
- package/Controls/Components/Inputs/Calendar/Themes/CalendarItemElement.Joy.js +24 -0
- package/Controls/Components/Inputs/Calendar/Themes/CalendarItemElement.Joy.js.map +1 -1
- package/Controls/Components/Inputs/Calendar/Themes/CalendarItemElement.Retro.d.ts.map +1 -1
- package/Controls/Components/Inputs/Calendar/Themes/CalendarItemElement.Retro.js +65 -0
- package/Controls/Components/Inputs/Calendar/Themes/CalendarItemElement.Retro.js.map +1 -1
- package/Controls/Components/Inputs/Calendar/Themes/CalendarSubHeaderElement.Cosmopolitan.js +2 -2
- package/Controls/Components/Inputs/Calendar/Themes/CalendarSubHeaderElement.Joy.js +2 -2
- package/Controls/Components/Inputs/Calendar/Themes/CalendarSubHeaderElement.Retro.js +2 -2
- package/Controls/Components/Inputs/Calendar/Views/CalendarDaysViewElement.d.ts.map +1 -1
- package/Controls/Components/Inputs/Calendar/Views/CalendarDaysViewElement.js +26 -13
- package/Controls/Components/Inputs/Calendar/Views/CalendarDaysViewElement.js.map +1 -1
- package/Controls/Components/Inputs/Calendar/Views/CalendarDaysViewElementTemplate.d.ts.map +1 -1
- package/Controls/Components/Inputs/Calendar/Views/CalendarDaysViewElementTemplate.js +42 -2
- package/Controls/Components/Inputs/Calendar/Views/CalendarDaysViewElementTemplate.js.map +1 -1
- package/Controls/Components/Inputs/CheckBox/CheckBoxElement.d.ts +48 -0
- package/Controls/Components/Inputs/CheckBox/CheckBoxElement.d.ts.map +1 -1
- package/Controls/Components/Inputs/CheckBox/CheckBoxElement.js +48 -0
- package/Controls/Components/Inputs/CheckBox/CheckBoxElement.js.map +1 -1
- package/Controls/Components/Inputs/ChipBox/ChipBoxElement.d.ts +56 -12
- package/Controls/Components/Inputs/ChipBox/ChipBoxElement.d.ts.map +1 -1
- package/Controls/Components/Inputs/ChipBox/ChipBoxElement.js +57 -13
- package/Controls/Components/Inputs/ChipBox/ChipBoxElement.js.map +1 -1
- package/Controls/Components/Inputs/ColorBox/ColorBoxElement.d.ts +72 -6
- package/Controls/Components/Inputs/ColorBox/ColorBoxElement.d.ts.map +1 -1
- package/Controls/Components/Inputs/ColorBox/ColorBoxElement.js +72 -6
- package/Controls/Components/Inputs/ColorBox/ColorBoxElement.js.map +1 -1
- package/Controls/Components/Inputs/DateBox/DateBoxElement.d.ts +54 -8
- package/Controls/Components/Inputs/DateBox/DateBoxElement.d.ts.map +1 -1
- package/Controls/Components/Inputs/DateBox/DateBoxElement.js +54 -8
- package/Controls/Components/Inputs/DateBox/DateBoxElement.js.map +1 -1
- package/Controls/Components/Inputs/FileUpload/FileUploadElement.d.ts +49 -13
- package/Controls/Components/Inputs/FileUpload/FileUploadElement.d.ts.map +1 -1
- package/Controls/Components/Inputs/FileUpload/FileUploadElement.js +49 -13
- package/Controls/Components/Inputs/FileUpload/FileUploadElement.js.map +1 -1
- package/Controls/Components/Inputs/NumberBox/NumberBoxElement.d.ts +52 -8
- package/Controls/Components/Inputs/NumberBox/NumberBoxElement.d.ts.map +1 -1
- package/Controls/Components/Inputs/NumberBox/NumberBoxElement.js +52 -8
- package/Controls/Components/Inputs/NumberBox/NumberBoxElement.js.map +1 -1
- package/Controls/Components/Inputs/PasswordBox/PasswordBoxElement.d.ts +51 -6
- package/Controls/Components/Inputs/PasswordBox/PasswordBoxElement.d.ts.map +1 -1
- package/Controls/Components/Inputs/PasswordBox/PasswordBoxElement.js +51 -6
- package/Controls/Components/Inputs/PasswordBox/PasswordBoxElement.js.map +1 -1
- package/Controls/Components/Inputs/PinBox/PinBoxElement.d.ts +55 -6
- package/Controls/Components/Inputs/PinBox/PinBoxElement.d.ts.map +1 -1
- package/Controls/Components/Inputs/PinBox/PinBoxElement.js +55 -6
- package/Controls/Components/Inputs/PinBox/PinBoxElement.js.map +1 -1
- package/Controls/Components/Inputs/Radio/RadioElement.d.ts +28 -0
- package/Controls/Components/Inputs/Radio/RadioElement.d.ts.map +1 -1
- package/Controls/Components/Inputs/Radio/RadioElement.js +28 -0
- package/Controls/Components/Inputs/Radio/RadioElement.js.map +1 -1
- package/Controls/Components/Inputs/Rating/RatingElement.d.ts +47 -1
- package/Controls/Components/Inputs/Rating/RatingElement.d.ts.map +1 -1
- package/Controls/Components/Inputs/Rating/RatingElement.js +47 -1
- package/Controls/Components/Inputs/Rating/RatingElement.js.map +1 -1
- package/Controls/Components/Inputs/SearchBox/SearchBoxElement.d.ts +61 -15
- package/Controls/Components/Inputs/SearchBox/SearchBoxElement.d.ts.map +1 -1
- package/Controls/Components/Inputs/SearchBox/SearchBoxElement.js +61 -15
- package/Controls/Components/Inputs/SearchBox/SearchBoxElement.js.map +1 -1
- package/Controls/Components/Inputs/Select/SelectElement.d.ts +50 -26
- package/Controls/Components/Inputs/Select/SelectElement.d.ts.map +1 -1
- package/Controls/Components/Inputs/Select/SelectElement.js +51 -26
- package/Controls/Components/Inputs/Select/SelectElement.js.map +1 -1
- package/Controls/Components/Inputs/TextBox/TextBoxElement.d.ts +39 -9
- package/Controls/Components/Inputs/TextBox/TextBoxElement.d.ts.map +1 -1
- package/Controls/Components/Inputs/TextBox/TextBoxElement.js +39 -9
- package/Controls/Components/Inputs/TextBox/TextBoxElement.js.map +1 -1
- package/Controls/Components/Inputs/TimeBox/TimeBoxElement.d.ts +58 -7
- package/Controls/Components/Inputs/TimeBox/TimeBoxElement.d.ts.map +1 -1
- package/Controls/Components/Inputs/TimeBox/TimeBoxElement.js +58 -7
- package/Controls/Components/Inputs/TimeBox/TimeBoxElement.js.map +1 -1
- package/Controls/Components/Inputs/ToggleSwitch/ToggleSwitchElement.d.ts +51 -3
- package/Controls/Components/Inputs/ToggleSwitch/ToggleSwitchElement.d.ts.map +1 -1
- package/Controls/Components/Inputs/ToggleSwitch/ToggleSwitchElement.js +51 -3
- package/Controls/Components/Inputs/ToggleSwitch/ToggleSwitchElement.js.map +1 -1
- package/Controls/Components/Layouts/Absolute/AbsoluteElement.d.ts +27 -2
- package/Controls/Components/Layouts/Absolute/AbsoluteElement.d.ts.map +1 -1
- package/Controls/Components/Layouts/Absolute/AbsoluteElement.js +27 -2
- package/Controls/Components/Layouts/Absolute/AbsoluteElement.js.map +1 -1
- package/Controls/Components/Layouts/Dock/DockPanelElement.d.ts +26 -15
- package/Controls/Components/Layouts/Dock/DockPanelElement.d.ts.map +1 -1
- package/Controls/Components/Layouts/Dock/DockPanelElement.js +26 -15
- package/Controls/Components/Layouts/Dock/DockPanelElement.js.map +1 -1
- package/Controls/Components/Layouts/Grid/GridElement.d.ts +17 -1
- package/Controls/Components/Layouts/Grid/GridElement.d.ts.map +1 -1
- package/Controls/Components/Layouts/Grid/GridElement.js +17 -1
- package/Controls/Components/Layouts/Grid/GridElement.js.map +1 -1
- package/Controls/Components/Layouts/Masonry/MasonryElement.d.ts +34 -7
- package/Controls/Components/Layouts/Masonry/MasonryElement.d.ts.map +1 -1
- package/Controls/Components/Layouts/Masonry/MasonryElement.js +34 -7
- package/Controls/Components/Layouts/Masonry/MasonryElement.js.map +1 -1
- package/Controls/Components/Layouts/Page/PageElement.d.ts +43 -9
- package/Controls/Components/Layouts/Page/PageElement.d.ts.map +1 -1
- package/Controls/Components/Layouts/Page/PageElement.js +43 -9
- package/Controls/Components/Layouts/Page/PageElement.js.map +1 -1
- package/Controls/Components/Layouts/Split/SplitElement.d.ts +42 -11
- package/Controls/Components/Layouts/Split/SplitElement.d.ts.map +1 -1
- package/Controls/Components/Layouts/Split/SplitElement.js +42 -11
- package/Controls/Components/Layouts/Split/SplitElement.js.map +1 -1
- package/Controls/Components/Layouts/Stack/StackElement.d.ts +84 -10
- package/Controls/Components/Layouts/Stack/StackElement.d.ts.map +1 -1
- package/Controls/Components/Layouts/Stack/StackElement.js +84 -10
- package/Controls/Components/Layouts/Stack/StackElement.js.map +1 -1
- package/Controls/Components/Layouts/TileList/TileListElement.d.ts +42 -1
- package/Controls/Components/Layouts/TileList/TileListElement.d.ts.map +1 -1
- package/Controls/Components/Layouts/TileList/TileListElement.js +42 -1
- package/Controls/Components/Layouts/TileList/TileListElement.js.map +1 -1
- package/Controls/Components/Layouts/Virtualize/VirtualizeElement.d.ts +52 -1
- package/Controls/Components/Layouts/Virtualize/VirtualizeElement.d.ts.map +1 -1
- package/Controls/Components/Layouts/Virtualize/VirtualizeElement.js +52 -1
- package/Controls/Components/Layouts/Virtualize/VirtualizeElement.js.map +1 -1
- package/Controls/Components/Layouts/Wrap/WrapElement.d.ts +29 -9
- package/Controls/Components/Layouts/Wrap/WrapElement.d.ts.map +1 -1
- package/Controls/Components/Layouts/Wrap/WrapElement.js +29 -9
- package/Controls/Components/Layouts/Wrap/WrapElement.js.map +1 -1
- package/Controls/Components/Media/Avatar/AvatarElement.d.ts +44 -8
- package/Controls/Components/Media/Avatar/AvatarElement.d.ts.map +1 -1
- package/Controls/Components/Media/Avatar/AvatarElement.js +44 -8
- package/Controls/Components/Media/Avatar/AvatarElement.js.map +1 -1
- package/Controls/Components/Media/Badge/BadgeElement.d.ts +67 -1
- package/Controls/Components/Media/Badge/BadgeElement.d.ts.map +1 -1
- package/Controls/Components/Media/Badge/BadgeElement.js +71 -3
- package/Controls/Components/Media/Badge/BadgeElement.js.map +1 -1
- package/Controls/Components/Media/Icon/IconElement.d.ts +57 -2
- package/Controls/Components/Media/Icon/IconElement.d.ts.map +1 -1
- package/Controls/Components/Media/Icon/IconElement.js +57 -2
- package/Controls/Components/Media/Icon/IconElement.js.map +1 -1
- package/Controls/Components/Media/Image/ImageElement.d.ts +62 -12
- package/Controls/Components/Media/Image/ImageElement.d.ts.map +1 -1
- package/Controls/Components/Media/Image/ImageElement.js +62 -12
- package/Controls/Components/Media/Image/ImageElement.js.map +1 -1
- package/Controls/Components/Overlays/Dialog/DialogElement.d.ts +86 -7
- package/Controls/Components/Overlays/Dialog/DialogElement.d.ts.map +1 -1
- package/Controls/Components/Overlays/Dialog/DialogElement.js +86 -7
- package/Controls/Components/Overlays/Dialog/DialogElement.js.map +1 -1
- package/Controls/Components/Primitives/Backdrop/BackdropElement.d.ts +41 -1
- package/Controls/Components/Primitives/Backdrop/BackdropElement.d.ts.map +1 -1
- package/Controls/Components/Primitives/Backdrop/BackdropElement.js +41 -1
- package/Controls/Components/Primitives/Backdrop/BackdropElement.js.map +1 -1
- package/Controls/Components/Primitives/Divider/DividerElement.d.ts +41 -1
- package/Controls/Components/Primitives/Divider/DividerElement.d.ts.map +1 -1
- package/Controls/Components/Primitives/Divider/DividerElement.js +41 -1
- package/Controls/Components/Primitives/Divider/DividerElement.js.map +1 -1
- package/Controls/Components/Primitives/FocusRing/FocusRingElement.d.ts +18 -4
- package/Controls/Components/Primitives/FocusRing/FocusRingElement.d.ts.map +1 -1
- package/Controls/Components/Primitives/FocusRing/FocusRingElement.js +18 -4
- package/Controls/Components/Primitives/FocusRing/FocusRingElement.js.map +1 -1
- package/Controls/Components/Primitives/Skeleton/SkeletonElement.d.ts +28 -7
- package/Controls/Components/Primitives/Skeleton/SkeletonElement.d.ts.map +1 -1
- package/Controls/Components/Primitives/Skeleton/SkeletonElement.js +30 -8
- package/Controls/Components/Primitives/Skeleton/SkeletonElement.js.map +1 -1
- package/Controls/Components/Primitives/Spacer/SpacerElement.d.ts +36 -5
- package/Controls/Components/Primitives/Spacer/SpacerElement.d.ts.map +1 -1
- package/Controls/Components/Primitives/Spacer/SpacerElement.js +36 -5
- package/Controls/Components/Primitives/Spacer/SpacerElement.js.map +1 -1
- package/Controls/Components/Primitives/Text/TextElement.d.ts +87 -9
- package/Controls/Components/Primitives/Text/TextElement.d.ts.map +1 -1
- package/Controls/Components/Primitives/Text/TextElement.js +87 -9
- package/Controls/Components/Primitives/Text/TextElement.js.map +1 -1
- package/Controls/Components/Ranges/ProgressBar/ProgressBarElement.d.ts +64 -1
- package/Controls/Components/Ranges/ProgressBar/ProgressBarElement.d.ts.map +1 -1
- package/Controls/Components/Ranges/ProgressBar/ProgressBarElement.js +64 -1
- package/Controls/Components/Ranges/ProgressBar/ProgressBarElement.js.map +1 -1
- package/Controls/Components/Ranges/ProgressRing/ProgressRingElement.d.ts +88 -4
- package/Controls/Components/Ranges/ProgressRing/ProgressRingElement.d.ts.map +1 -1
- package/Controls/Components/Ranges/ProgressRing/ProgressRingElement.js +88 -4
- package/Controls/Components/Ranges/ProgressRing/ProgressRingElement.js.map +1 -1
- package/Controls/Components/Ranges/Slider/SliderElement.d.ts +70 -8
- package/Controls/Components/Ranges/Slider/SliderElement.d.ts.map +1 -1
- package/Controls/Components/Ranges/Slider/SliderElement.js +70 -8
- package/Controls/Components/Ranges/Slider/SliderElement.js.map +1 -1
- package/Controls/Components/Selectors/Carousel/CarouselElement.d.ts +65 -11
- package/Controls/Components/Selectors/Carousel/CarouselElement.d.ts.map +1 -1
- package/Controls/Components/Selectors/Carousel/CarouselElement.js +65 -11
- package/Controls/Components/Selectors/Carousel/CarouselElement.js.map +1 -1
- package/Controls/Components/Selectors/Carousel/CarouselItemElement.d.ts +51 -1
- package/Controls/Components/Selectors/Carousel/CarouselItemElement.d.ts.map +1 -1
- package/Controls/Components/Selectors/Carousel/CarouselItemElement.js +51 -1
- package/Controls/Components/Selectors/Carousel/CarouselItemElement.js.map +1 -1
- package/Controls/Components/Selectors/Combo/ComboElement.d.ts +81 -23
- package/Controls/Components/Selectors/Combo/ComboElement.d.ts.map +1 -1
- package/Controls/Components/Selectors/Combo/ComboElement.js +81 -23
- package/Controls/Components/Selectors/Combo/ComboElement.js.map +1 -1
- package/Controls/Components/Selectors/Combo/ComboItemElement.d.ts +58 -1
- package/Controls/Components/Selectors/Combo/ComboItemElement.d.ts.map +1 -1
- package/Controls/Components/Selectors/Combo/ComboItemElement.js +58 -1
- package/Controls/Components/Selectors/Combo/ComboItemElement.js.map +1 -1
- package/Controls/Components/Selectors/DataTable/DataTableElement.d.ts +81 -1
- package/Controls/Components/Selectors/DataTable/DataTableElement.d.ts.map +1 -1
- package/Controls/Components/Selectors/DataTable/DataTableElement.js +93 -4
- package/Controls/Components/Selectors/DataTable/DataTableElement.js.map +1 -1
- package/Controls/Components/Selectors/List/ListElement.d.ts +95 -5
- package/Controls/Components/Selectors/List/ListElement.d.ts.map +1 -1
- package/Controls/Components/Selectors/List/ListElement.js +95 -5
- package/Controls/Components/Selectors/List/ListElement.js.map +1 -1
- package/Controls/Components/Selectors/Menu/MenuElement.d.ts +61 -2
- package/Controls/Components/Selectors/Menu/MenuElement.d.ts.map +1 -1
- package/Controls/Components/Selectors/Menu/MenuElement.js +61 -2
- package/Controls/Components/Selectors/Menu/MenuElement.js.map +1 -1
- package/Controls/Components/Selectors/TabStrip/TabStripElement.d.ts +72 -1
- package/Controls/Components/Selectors/TabStrip/TabStripElement.d.ts.map +1 -1
- package/Controls/Components/Selectors/TabStrip/TabStripElement.js +72 -1
- package/Controls/Components/Selectors/TabStrip/TabStripElement.js.map +1 -1
- package/Controls/Components/Shell/AppElement.d.ts +90 -28
- package/Controls/Components/Shell/AppElement.d.ts.map +1 -1
- package/Controls/Components/Shell/AppElement.js +90 -28
- package/Controls/Components/Shell/AppElement.js.map +1 -1
- package/Controls/Components/States/Busy/BusyStateElement.d.ts +49 -24
- package/Controls/Components/States/Busy/BusyStateElement.d.ts.map +1 -1
- package/Controls/Components/States/Busy/BusyStateElement.js +49 -24
- package/Controls/Components/States/Busy/BusyStateElement.js.map +1 -1
- package/Controls/Components/States/Empty/EmptyStateElement.d.ts +59 -27
- package/Controls/Components/States/Empty/EmptyStateElement.d.ts.map +1 -1
- package/Controls/Components/States/Empty/EmptyStateElement.js +59 -27
- package/Controls/Components/States/Empty/EmptyStateElement.js.map +1 -1
- package/Controls/Components/States/Error/ErrorStateElement.d.ts +59 -23
- package/Controls/Components/States/Error/ErrorStateElement.d.ts.map +1 -1
- package/Controls/Components/States/Error/ErrorStateElement.js +59 -23
- package/Controls/Components/States/Error/ErrorStateElement.js.map +1 -1
- package/Controls/Components/States/Success/SuccessStateElement.d.ts +57 -22
- package/Controls/Components/States/Success/SuccessStateElement.d.ts.map +1 -1
- package/Controls/Components/States/Success/SuccessStateElement.js +57 -22
- package/Controls/Components/States/Success/SuccessStateElement.js.map +1 -1
- package/Routing/PathToRegexp.d.ts +1 -1
- package/custom-elements.json +3994 -861
- package/package.json +3 -3
|
@@ -24,9 +24,89 @@ import { TableRowElement } from '../Table/TableRowElement';
|
|
|
24
24
|
import { Themeable } from '../../../Behaviors/Themeable';
|
|
25
25
|
// #endregion
|
|
26
26
|
/**
|
|
27
|
-
*
|
|
27
|
+
* DataTable - A comprehensive data presentation component for displaying structured information in rows and columns.
|
|
28
28
|
*
|
|
29
|
+
* Provides advanced data table functionality including sorting, filtering, pagination, and selection
|
|
30
|
+
* capabilities. Designed for displaying large datasets with efficient rendering and user interaction
|
|
31
|
+
* features for data analysis and management tasks.
|
|
32
|
+
*
|
|
33
|
+
* @name DataTableElement
|
|
29
34
|
* @element mosaik-data-table
|
|
35
|
+
* @category Selectors
|
|
36
|
+
*
|
|
37
|
+
* @slot - Default content area for custom table content and additional elements
|
|
38
|
+
* @slot header - Table header area for titles, filters, and actions
|
|
39
|
+
* @slot footer - Table footer area for pagination, totals, and summary information
|
|
40
|
+
*
|
|
41
|
+
* @csspart table - Main table container element
|
|
42
|
+
* @csspart header - Table header section
|
|
43
|
+
* @csspart body - Table body containing data rows
|
|
44
|
+
* @csspart footer - Table footer section
|
|
45
|
+
* @csspart row - Individual table row
|
|
46
|
+
* @csspart cell - Individual table cell
|
|
47
|
+
* @csspart sort-button - Sortable column header buttons
|
|
48
|
+
* @csspart pagination - Pagination controls container
|
|
49
|
+
*
|
|
50
|
+
* @cssprop --data-table-border-color - Color for table borders and grid lines
|
|
51
|
+
* @cssprop --data-table-header-background - Background color for table headers
|
|
52
|
+
* @cssprop --data-table-row-background - Background color for table rows
|
|
53
|
+
* @cssprop --data-table-row-background-hover - Hover state background for rows
|
|
54
|
+
* @cssprop --data-table-row-background-selected - Selected row background color
|
|
55
|
+
* @cssprop --data-table-cell-padding - Internal padding for table cells
|
|
56
|
+
* @cssprop --data-table-header-font-weight - Font weight for header text
|
|
57
|
+
*
|
|
58
|
+
* @dependency TableElement - Base table structure and layout
|
|
59
|
+
* @dependency TableHeaderElement - For table header rows and column definitions
|
|
60
|
+
* @dependency TableRowElement - For data rows and content presentation
|
|
61
|
+
* @dependency TableCellElement - For individual data cells and content
|
|
62
|
+
*
|
|
63
|
+
* @example
|
|
64
|
+
* ```html
|
|
65
|
+
* <!-- Basic data table with auto-generated columns -->
|
|
66
|
+
* <mosaik-data-table
|
|
67
|
+
* items='[
|
|
68
|
+
* {"id": 1, "name": "John Doe", "email": "john@example.com", "role": "Admin"},
|
|
69
|
+
* {"id": 2, "name": "Jane Smith", "email": "jane@example.com", "role": "User"}
|
|
70
|
+
* ]'
|
|
71
|
+
* auto-generate-columns="true"
|
|
72
|
+
* sortable="true">
|
|
73
|
+
* </mosaik-data-table>
|
|
74
|
+
*
|
|
75
|
+
* <!-- Data table with custom column definitions -->
|
|
76
|
+
* <mosaik-data-table
|
|
77
|
+
* items="users"
|
|
78
|
+
* selectable="true"
|
|
79
|
+
* paginated="true"
|
|
80
|
+
* page-size="25">
|
|
81
|
+
* <div slot="header">
|
|
82
|
+
* <mosaik-text variant="headline">User Management</mosaik-text>
|
|
83
|
+
* <mosaik-button onclick="addUser()">Add User</mosaik-button>
|
|
84
|
+
* </div>
|
|
85
|
+
* </mosaik-data-table>
|
|
86
|
+
*
|
|
87
|
+
* <!-- Data table with filtering and actions -->
|
|
88
|
+
* <mosaik-data-table
|
|
89
|
+
* items="products"
|
|
90
|
+
* alternating="true"
|
|
91
|
+
* multi-select="true"
|
|
92
|
+
* searchable="true">
|
|
93
|
+
* <div slot="header">
|
|
94
|
+
* <mosaik-search-box placeholder="Search products..." onInput="filterProducts"></mosaik-search-box>
|
|
95
|
+
* <div class="table-actions">
|
|
96
|
+
* <mosaik-button appearance="soft">Export</mosaik-button>
|
|
97
|
+
* <mosaik-button appearance="primary">Bulk Edit</mosaik-button>
|
|
98
|
+
* </div>
|
|
99
|
+
* </div>
|
|
100
|
+
* <div slot="footer">
|
|
101
|
+
* <mosaik-text variant="caption">Showing 1-25 of 150 products</mosaik-text>
|
|
102
|
+
* </div>
|
|
103
|
+
* </mosaik-data-table>
|
|
104
|
+
*
|
|
105
|
+
* <!-- Data table with custom cell renderers -->
|
|
106
|
+
* <mosaik-data-table items="orders" expandable-rows="true">
|
|
107
|
+
* <!-- Custom column templates would be defined via column definitions -->
|
|
108
|
+
* </mosaik-data-table>
|
|
109
|
+
* ```
|
|
30
110
|
*
|
|
31
111
|
* @public
|
|
32
112
|
*/
|
|
@@ -184,12 +264,18 @@ let DataTableElement = class DataTableElement extends Themeable(Disableable(Item
|
|
|
184
264
|
}
|
|
185
265
|
};
|
|
186
266
|
__decorate([
|
|
187
|
-
Attribute({
|
|
267
|
+
Attribute({
|
|
268
|
+
type: Boolean,
|
|
269
|
+
useDefault: true
|
|
270
|
+
}),
|
|
188
271
|
__metadata("design:type", Boolean),
|
|
189
272
|
__metadata("design:paramtypes", [Boolean])
|
|
190
273
|
], DataTableElement.prototype, "alternating", null);
|
|
191
274
|
__decorate([
|
|
192
|
-
Attribute({
|
|
275
|
+
Attribute({
|
|
276
|
+
type: Boolean,
|
|
277
|
+
useDefault: true
|
|
278
|
+
}),
|
|
193
279
|
__metadata("design:type", Boolean),
|
|
194
280
|
__metadata("design:paramtypes", [Boolean])
|
|
195
281
|
], DataTableElement.prototype, "autoGenerateColumns", null);
|
|
@@ -199,7 +285,10 @@ __decorate([
|
|
|
199
285
|
__metadata("design:paramtypes", [Array])
|
|
200
286
|
], DataTableElement.prototype, "columnDefinitions", null);
|
|
201
287
|
__decorate([
|
|
202
|
-
Attribute({
|
|
288
|
+
Attribute({
|
|
289
|
+
type: Boolean,
|
|
290
|
+
useDefault: true
|
|
291
|
+
}),
|
|
203
292
|
__metadata("design:type", Boolean),
|
|
204
293
|
__metadata("design:paramtypes", [])
|
|
205
294
|
], DataTableElement.prototype, "sorted", null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/DataTable/DataTableElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAEjE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAE/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAGtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,EAAE,iCAAiC,EAAE,MAAM,wCAAwC,CAAC;AAC3F,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,aAAa;AAEb
|
|
1
|
+
{"version":3,"file":"DataTableElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/DataTable/DataTableElement.ts"],"names":[],"mappings":"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"}
|
|
@@ -5,14 +5,104 @@ import { ListItemElement } from './ListItemElement';
|
|
|
5
5
|
import { ListElementIntl } from './ListElementIntl';
|
|
6
6
|
declare const ListElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Filterable").IFilterableProps) & (abstract new () => SelectorElement<any>) & import("../../../Behaviors/Themeable").IThemeableCtor;
|
|
7
7
|
/**
|
|
8
|
-
* List - A container for displaying
|
|
8
|
+
* List - A versatile container component for displaying collections of interactive items in organized layouts.
|
|
9
9
|
*
|
|
10
|
+
* Presents ordered or unordered collections of related content items with support for selection,
|
|
11
|
+
* filtering, grouping, and navigation. Optimized for accessibility and keyboard interaction
|
|
12
|
+
* with flexible styling options for various content types.
|
|
13
|
+
*
|
|
14
|
+
* @name ListElement
|
|
10
15
|
* @element mosaik-list
|
|
11
|
-
* @category
|
|
16
|
+
* @category Selectors
|
|
17
|
+
*
|
|
18
|
+
* @slot - Default content area for list items and groups
|
|
19
|
+
* @slot filter - Filter controls and search functionality area
|
|
20
|
+
* @slot empty - Empty state content when no items are available
|
|
21
|
+
* @slot header - Header content above the list items
|
|
22
|
+
* @slot footer - Footer content below the list items
|
|
23
|
+
*
|
|
24
|
+
* @csspart container - Main list container element
|
|
25
|
+
* @csspart items - Container for all list items
|
|
26
|
+
* @csspart filter - Filter controls container
|
|
27
|
+
* @csspart empty-state - Empty state container
|
|
28
|
+
* @csspart scrollable - Scrollable content area
|
|
29
|
+
*
|
|
30
|
+
* @cssprop --list-padding - Internal padding for the list container
|
|
31
|
+
* @cssprop --list-item-spacing - Vertical spacing between list items
|
|
32
|
+
* @cssprop --list-background - Background color for the list
|
|
33
|
+
* @cssprop --list-border-radius - Border radius for list styling
|
|
34
|
+
* @cssprop --list-max-height - Maximum height before scrolling activates
|
|
35
|
+
* @cssprop --list-scrollbar-width - Width of the scrollbar
|
|
36
|
+
*
|
|
37
|
+
* @keyhandle ArrowUp - Navigates to the previous item
|
|
38
|
+
* @keyhandle ArrowDown - Navigates to the next item
|
|
39
|
+
* @keyhandle Home - Navigates to the first item
|
|
40
|
+
* @keyhandle End - Navigates to the last item
|
|
41
|
+
* @keyhandle Space - Toggles selection of the focused item
|
|
42
|
+
* @keyhandle Enter - Activates the focused item
|
|
43
|
+
*
|
|
44
|
+
* @dependency ListItemElement - For individual selectable items within the list
|
|
45
|
+
* @dependency ListItemGroupElement - For organizing items into logical groups
|
|
46
|
+
* @dependency TextBoxElement - For search and filter functionality
|
|
47
|
+
* @dependency SpacerElement - For layout spacing between groups
|
|
48
|
+
*
|
|
49
|
+
* @example
|
|
50
|
+
* ```html
|
|
51
|
+
* <!-- Simple navigation list -->
|
|
52
|
+
* <mosaik-list>
|
|
53
|
+
* <mosaik-list-item value="dashboard">
|
|
54
|
+
* <mosaik-icon slot="prefix" data="home"></mosaik-icon>
|
|
55
|
+
* Dashboard
|
|
56
|
+
* </mosaik-list-item>
|
|
57
|
+
* <mosaik-list-item value="analytics">
|
|
58
|
+
* <mosaik-icon slot="prefix" data="chart-bar"></mosaik-icon>
|
|
59
|
+
* Analytics
|
|
60
|
+
* </mosaik-list-item>
|
|
61
|
+
* <mosaik-list-item value="settings">
|
|
62
|
+
* <mosaik-icon slot="prefix" data="cog"></mosaik-icon>
|
|
63
|
+
* Settings
|
|
64
|
+
* </mosaik-list-item>
|
|
65
|
+
* </mosaik-list>
|
|
66
|
+
*
|
|
67
|
+
* <!-- Multi-select list with filtering -->
|
|
68
|
+
* <mosaik-list selection-mode="multiple" filterable="true">
|
|
69
|
+
* <mosaik-text-box slot="filter" placeholder="Search contacts..." />
|
|
70
|
+
* <mosaik-list-item-group label="Favorites">
|
|
71
|
+
* <mosaik-list-item value="john">
|
|
72
|
+
* <mosaik-avatar slot="prefix" src="john.jpg"></mosaik-avatar>
|
|
73
|
+
* John Smith
|
|
74
|
+
* <mosaik-text slot="suffix">john@example.com</mosaik-text>
|
|
75
|
+
* </mosaik-list-item>
|
|
76
|
+
* </mosaik-list-item-group>
|
|
77
|
+
* <mosaik-list-item-group label="Colleagues">
|
|
78
|
+
* <mosaik-list-item value="jane">Jane Doe</mosaik-list-item>
|
|
79
|
+
* <mosaik-list-item value="mike">Mike Johnson</mosaik-list-item>
|
|
80
|
+
* </mosaik-list-item-group>
|
|
81
|
+
* </mosaik-list>
|
|
82
|
+
*
|
|
83
|
+
* <!-- Action list with descriptions -->
|
|
84
|
+
* <mosaik-list>
|
|
85
|
+
* <mosaik-list-item value="export">
|
|
86
|
+
* <mosaik-icon slot="prefix" data="download"></mosaik-icon>
|
|
87
|
+
* Export Data
|
|
88
|
+
* <mosaik-text slot="suffix" variant="caption">Download your data as CSV</mosaik-text>
|
|
89
|
+
* </mosaik-list-item>
|
|
90
|
+
* <mosaik-list-item value="import">
|
|
91
|
+
* <mosaik-icon slot="prefix" data="upload"></mosaik-icon>
|
|
92
|
+
* Import Data
|
|
93
|
+
* <mosaik-text slot="suffix" variant="caption">Upload data from file</mosaik-text>
|
|
94
|
+
* </mosaik-list-item>
|
|
95
|
+
* </mosaik-list>
|
|
12
96
|
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
97
|
+
* <!-- List with empty state -->
|
|
98
|
+
* <mosaik-list>
|
|
99
|
+
* <mosaik-empty-state slot="empty">
|
|
100
|
+
* <mosaik-icon slot="icon" data="inbox"></mosaik-icon>
|
|
101
|
+
* <mosaik-text slot="header">No items found</mosaik-text>
|
|
102
|
+
* <mosaik-text slot="content">Add some items to get started</mosaik-text>
|
|
103
|
+
* </mosaik-empty-state>
|
|
104
|
+
* </mosaik-list>
|
|
105
|
+
* ```
|
|
16
106
|
*
|
|
17
107
|
* @public
|
|
18
108
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/List/ListElement.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAMpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;;AAMpD
|
|
1
|
+
{"version":3,"file":"ListElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/List/ListElement.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAMpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;;AAMpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqGG;AACH,qBAmBa,WACT,SAAQ,gBACR,YAAW,iBAAiB;IAI5B,OAAO,CAAC,QAAQ,CAAC,wBAAwB,CAAoC;IAC7E,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAkC;IAClE,OAAO,CAAC,cAAc,CAAgB;IACtC,OAAO,CAAC,MAAM,CAAgB;IAM9B;;OAEG;;IAgBH;;;;;;;;OAQG;IAGH,WAA2B,EAAE,IAAI,MAAM,CAEtC;IAED;;;;;OAKG;IACH,IACW,aAAa,IAAI,aAAa,CAExC;IAED,IAAW,aAAa,CAAC,KAAK,EAAE,aAAa,EAK5C;IAED;;;;;OAKG;IACH,IACW,KAAK,IAAI,MAAM,GAAG,IAAI,CAEhC;IAED,IAAW,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAKpC;IAED;;;;;OAKG;IACH,IAAoB,KAAK,IAAI,KAAK,CAAC,eAAe,CAAC,CAIlD;IAED;;;;;OAKG;IACH,IAAW,IAAI,IAAI,eAAe,CAEjC;IAMD;;;OAGG;cACgB,cAAc,IAAI,IAAI;IAuBzC;;OAEG;IAEH,SAAS,CAAC,8BAA8B,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,IAAI,CAAC,EAAE,aAAa,GAAG,IAAI;IAS1F;;OAEG;IAEH,SAAS,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI;IAItE;;OAEG;IAEH,SAAS,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI;IAmBlE;;OAEG;IACH,OAAO,CAAC,YAAY;CAcvB;AAED;;GAEG;AACH,yBAAiB,WAAW,CAAC;IACzB,KAAY,KAAK,GAAG,iBAAiB,CAAC;CACzC;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEX,UAAU,qBAAqB;QAE3B,aAAa,EAAE,WAAW,CAAC;KAC9B;CACJ"}
|
|
@@ -29,14 +29,104 @@ import { IntlController } from '../../../../Intl/IntlController';
|
|
|
29
29
|
import { SpacerElement } from '../../Primitives/Spacer/SpacerElement';
|
|
30
30
|
// #endregion
|
|
31
31
|
/**
|
|
32
|
-
* List - A container for displaying
|
|
32
|
+
* List - A versatile container component for displaying collections of interactive items in organized layouts.
|
|
33
33
|
*
|
|
34
|
+
* Presents ordered or unordered collections of related content items with support for selection,
|
|
35
|
+
* filtering, grouping, and navigation. Optimized for accessibility and keyboard interaction
|
|
36
|
+
* with flexible styling options for various content types.
|
|
37
|
+
*
|
|
38
|
+
* @name ListElement
|
|
34
39
|
* @element mosaik-list
|
|
35
|
-
* @category
|
|
40
|
+
* @category Selectors
|
|
41
|
+
*
|
|
42
|
+
* @slot - Default content area for list items and groups
|
|
43
|
+
* @slot filter - Filter controls and search functionality area
|
|
44
|
+
* @slot empty - Empty state content when no items are available
|
|
45
|
+
* @slot header - Header content above the list items
|
|
46
|
+
* @slot footer - Footer content below the list items
|
|
47
|
+
*
|
|
48
|
+
* @csspart container - Main list container element
|
|
49
|
+
* @csspart items - Container for all list items
|
|
50
|
+
* @csspart filter - Filter controls container
|
|
51
|
+
* @csspart empty-state - Empty state container
|
|
52
|
+
* @csspart scrollable - Scrollable content area
|
|
53
|
+
*
|
|
54
|
+
* @cssprop --list-padding - Internal padding for the list container
|
|
55
|
+
* @cssprop --list-item-spacing - Vertical spacing between list items
|
|
56
|
+
* @cssprop --list-background - Background color for the list
|
|
57
|
+
* @cssprop --list-border-radius - Border radius for list styling
|
|
58
|
+
* @cssprop --list-max-height - Maximum height before scrolling activates
|
|
59
|
+
* @cssprop --list-scrollbar-width - Width of the scrollbar
|
|
60
|
+
*
|
|
61
|
+
* @keyhandle ArrowUp - Navigates to the previous item
|
|
62
|
+
* @keyhandle ArrowDown - Navigates to the next item
|
|
63
|
+
* @keyhandle Home - Navigates to the first item
|
|
64
|
+
* @keyhandle End - Navigates to the last item
|
|
65
|
+
* @keyhandle Space - Toggles selection of the focused item
|
|
66
|
+
* @keyhandle Enter - Activates the focused item
|
|
67
|
+
*
|
|
68
|
+
* @dependency ListItemElement - For individual selectable items within the list
|
|
69
|
+
* @dependency ListItemGroupElement - For organizing items into logical groups
|
|
70
|
+
* @dependency TextBoxElement - For search and filter functionality
|
|
71
|
+
* @dependency SpacerElement - For layout spacing between groups
|
|
72
|
+
*
|
|
73
|
+
* @example
|
|
74
|
+
* ```html
|
|
75
|
+
* <!-- Simple navigation list -->
|
|
76
|
+
* <mosaik-list>
|
|
77
|
+
* <mosaik-list-item value="dashboard">
|
|
78
|
+
* <mosaik-icon slot="prefix" data="home"></mosaik-icon>
|
|
79
|
+
* Dashboard
|
|
80
|
+
* </mosaik-list-item>
|
|
81
|
+
* <mosaik-list-item value="analytics">
|
|
82
|
+
* <mosaik-icon slot="prefix" data="chart-bar"></mosaik-icon>
|
|
83
|
+
* Analytics
|
|
84
|
+
* </mosaik-list-item>
|
|
85
|
+
* <mosaik-list-item value="settings">
|
|
86
|
+
* <mosaik-icon slot="prefix" data="cog"></mosaik-icon>
|
|
87
|
+
* Settings
|
|
88
|
+
* </mosaik-list-item>
|
|
89
|
+
* </mosaik-list>
|
|
90
|
+
*
|
|
91
|
+
* <!-- Multi-select list with filtering -->
|
|
92
|
+
* <mosaik-list selection-mode="multiple" filterable="true">
|
|
93
|
+
* <mosaik-text-box slot="filter" placeholder="Search contacts..." />
|
|
94
|
+
* <mosaik-list-item-group label="Favorites">
|
|
95
|
+
* <mosaik-list-item value="john">
|
|
96
|
+
* <mosaik-avatar slot="prefix" src="john.jpg"></mosaik-avatar>
|
|
97
|
+
* John Smith
|
|
98
|
+
* <mosaik-text slot="suffix">john@example.com</mosaik-text>
|
|
99
|
+
* </mosaik-list-item>
|
|
100
|
+
* </mosaik-list-item-group>
|
|
101
|
+
* <mosaik-list-item-group label="Colleagues">
|
|
102
|
+
* <mosaik-list-item value="jane">Jane Doe</mosaik-list-item>
|
|
103
|
+
* <mosaik-list-item value="mike">Mike Johnson</mosaik-list-item>
|
|
104
|
+
* </mosaik-list-item-group>
|
|
105
|
+
* </mosaik-list>
|
|
106
|
+
*
|
|
107
|
+
* <!-- Action list with descriptions -->
|
|
108
|
+
* <mosaik-list>
|
|
109
|
+
* <mosaik-list-item value="export">
|
|
110
|
+
* <mosaik-icon slot="prefix" data="download"></mosaik-icon>
|
|
111
|
+
* Export Data
|
|
112
|
+
* <mosaik-text slot="suffix" variant="caption">Download your data as CSV</mosaik-text>
|
|
113
|
+
* </mosaik-list-item>
|
|
114
|
+
* <mosaik-list-item value="import">
|
|
115
|
+
* <mosaik-icon slot="prefix" data="upload"></mosaik-icon>
|
|
116
|
+
* Import Data
|
|
117
|
+
* <mosaik-text slot="suffix" variant="caption">Upload data from file</mosaik-text>
|
|
118
|
+
* </mosaik-list-item>
|
|
119
|
+
* </mosaik-list>
|
|
36
120
|
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
*
|
|
121
|
+
* <!-- List with empty state -->
|
|
122
|
+
* <mosaik-list>
|
|
123
|
+
* <mosaik-empty-state slot="empty">
|
|
124
|
+
* <mosaik-icon slot="icon" data="inbox"></mosaik-icon>
|
|
125
|
+
* <mosaik-text slot="header">No items found</mosaik-text>
|
|
126
|
+
* <mosaik-text slot="content">Add some items to get started</mosaik-text>
|
|
127
|
+
* </mosaik-empty-state>
|
|
128
|
+
* </mosaik-list>
|
|
129
|
+
* ```
|
|
40
130
|
*
|
|
41
131
|
* @public
|
|
42
132
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/List/ListElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,EAAE,EAAmC,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,oCAAoC,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAExE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAEtE,aAAa;AAEb
|
|
1
|
+
{"version":3,"file":"ListElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/List/ListElement.ts"],"names":[],"mappings":"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"}
|
|
@@ -3,11 +3,70 @@ import { CustomElement } from '../../Abstracts/CustomElement';
|
|
|
3
3
|
import type { IMenuElementProps } from './IMenuElementProps';
|
|
4
4
|
declare const MenuElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Insetable").IInsetableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
|
|
5
5
|
/**
|
|
6
|
-
* Menu - A list
|
|
6
|
+
* Menu - A vertical list container for presenting navigation options and actionable commands.
|
|
7
7
|
*
|
|
8
|
+
* Provides structured menu layouts with support for menu items, dividers, and hierarchical organization.
|
|
9
|
+
* Handles selection states, keyboard navigation, and accessibility features. Essential for context menus,
|
|
10
|
+
* navigation menus, and dropdown command lists.
|
|
11
|
+
*
|
|
12
|
+
* @name MenuElement
|
|
8
13
|
* @element mosaik-menu
|
|
14
|
+
* @category Selectors
|
|
15
|
+
*
|
|
16
|
+
* @csspart menu - The main menu container element
|
|
17
|
+
* @csspart menu-list - Container for menu items and content
|
|
18
|
+
*
|
|
19
|
+
* @cssprop --menu-background-color - Background color of the menu container
|
|
20
|
+
* @cssprop --menu-border-color - Border color around the menu
|
|
21
|
+
* @cssprop --menu-border-radius - Border radius for menu corners
|
|
22
|
+
* @cssprop --menu-padding - Internal padding of the menu
|
|
23
|
+
* @cssprop --menu-min-width - Minimum width constraint for the menu
|
|
24
|
+
* @cssprop --menu-max-height - Maximum height before scrolling
|
|
25
|
+
* @cssprop --menu-item-height - Standard height for menu items
|
|
26
|
+
* @cssprop --menu-divider-color - Color of menu section dividers
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* ```html
|
|
30
|
+
* <!-- Basic context menu -->
|
|
31
|
+
* <mosaik-menu>
|
|
32
|
+
* <mosaik-menu-item>Cut</mosaik-menu-item>
|
|
33
|
+
* <mosaik-menu-item>Copy</mosaik-menu-item>
|
|
34
|
+
* <mosaik-menu-item>Paste</mosaik-menu-item>
|
|
35
|
+
* <mosaik-divider></mosaik-divider>
|
|
36
|
+
* <mosaik-menu-item disabled>Delete</mosaik-menu-item>
|
|
37
|
+
* </mosaik-menu>
|
|
38
|
+
*
|
|
39
|
+
* <!-- Navigation menu with icons -->
|
|
40
|
+
* <mosaik-menu>
|
|
41
|
+
* <mosaik-menu-item selected>
|
|
42
|
+
* <mosaik-icon slot="prefix" data="home"></mosaik-icon>
|
|
43
|
+
* Home
|
|
44
|
+
* </mosaik-menu-item>
|
|
45
|
+
* <mosaik-menu-item>
|
|
46
|
+
* <mosaik-icon slot="prefix" data="user"></mosaik-icon>
|
|
47
|
+
* Profile
|
|
48
|
+
* </mosaik-menu-item>
|
|
49
|
+
* <mosaik-menu-item>
|
|
50
|
+
* <mosaik-icon slot="prefix" data="settings"></mosaik-icon>
|
|
51
|
+
* Settings
|
|
52
|
+
* </mosaik-menu-item>
|
|
53
|
+
* </mosaik-menu>
|
|
54
|
+
*
|
|
55
|
+
* <!-- Hierarchical menu with submenus -->
|
|
56
|
+
* <mosaik-menu>
|
|
57
|
+
* <mosaik-menu-item>File</mosaik-menu-item>
|
|
58
|
+
* <mosaik-menu-item>
|
|
59
|
+
* Edit
|
|
60
|
+
* <mosaik-menu slot="submenu">
|
|
61
|
+
* <mosaik-menu-item>Undo</mosaik-menu-item>
|
|
62
|
+
* <mosaik-menu-item>Redo</mosaik-menu-item>
|
|
63
|
+
* </mosaik-menu>
|
|
64
|
+
* </mosaik-menu-item>
|
|
65
|
+
* <mosaik-menu-item>View</mosaik-menu-item>
|
|
66
|
+
* </mosaik-menu>
|
|
67
|
+
* ```
|
|
9
68
|
*
|
|
10
|
-
* @fires activated -
|
|
69
|
+
* @fires activated - Emitted when a menu item is activated or selected
|
|
11
70
|
*
|
|
12
71
|
* @public
|
|
13
72
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Menu/MenuElement.ts"],"names":[],"mappings":"AAGA,OAAO,EAA2B,YAAY,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAInG,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;;AAS7D
|
|
1
|
+
{"version":3,"file":"MenuElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Menu/MenuElement.ts"],"names":[],"mappings":"AAGA,OAAO,EAA2B,YAAY,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAInG,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;;AAS7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBAUa,WACT,SAAQ,gBACR,YAAW,iBAAiB;IAI5B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAoC;IAM/D;;OAEG;;IAWH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;;;OAOG;IACH,IACW,SAAS,IAAI,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAExD;IAMD;;;OAGG;IACI,YAAY,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;CAYtC;AAED;;GAEG;AACH,yBAAiB,WAAW,CAAC;IACzB,KAAY,KAAK,GAAG,iBAAiB,CAAC;CACzC;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,aAAa,EAAE,WAAW,CAAC;KAC9B;IAED,UAAU,mBAAmB;QACzB,SAAS,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC;KACxC;CACJ"}
|
|
@@ -21,11 +21,70 @@ import { menuElementCosmopolitanStyle } from './Themes/MenuElement.Cosmopolitan'
|
|
|
21
21
|
import { Themeable } from '../../../Behaviors/Themeable';
|
|
22
22
|
// #endregion
|
|
23
23
|
/**
|
|
24
|
-
* Menu - A list
|
|
24
|
+
* Menu - A vertical list container for presenting navigation options and actionable commands.
|
|
25
25
|
*
|
|
26
|
+
* Provides structured menu layouts with support for menu items, dividers, and hierarchical organization.
|
|
27
|
+
* Handles selection states, keyboard navigation, and accessibility features. Essential for context menus,
|
|
28
|
+
* navigation menus, and dropdown command lists.
|
|
29
|
+
*
|
|
30
|
+
* @name MenuElement
|
|
26
31
|
* @element mosaik-menu
|
|
32
|
+
* @category Selectors
|
|
33
|
+
*
|
|
34
|
+
* @csspart menu - The main menu container element
|
|
35
|
+
* @csspart menu-list - Container for menu items and content
|
|
36
|
+
*
|
|
37
|
+
* @cssprop --menu-background-color - Background color of the menu container
|
|
38
|
+
* @cssprop --menu-border-color - Border color around the menu
|
|
39
|
+
* @cssprop --menu-border-radius - Border radius for menu corners
|
|
40
|
+
* @cssprop --menu-padding - Internal padding of the menu
|
|
41
|
+
* @cssprop --menu-min-width - Minimum width constraint for the menu
|
|
42
|
+
* @cssprop --menu-max-height - Maximum height before scrolling
|
|
43
|
+
* @cssprop --menu-item-height - Standard height for menu items
|
|
44
|
+
* @cssprop --menu-divider-color - Color of menu section dividers
|
|
45
|
+
*
|
|
46
|
+
* @example
|
|
47
|
+
* ```html
|
|
48
|
+
* <!-- Basic context menu -->
|
|
49
|
+
* <mosaik-menu>
|
|
50
|
+
* <mosaik-menu-item>Cut</mosaik-menu-item>
|
|
51
|
+
* <mosaik-menu-item>Copy</mosaik-menu-item>
|
|
52
|
+
* <mosaik-menu-item>Paste</mosaik-menu-item>
|
|
53
|
+
* <mosaik-divider></mosaik-divider>
|
|
54
|
+
* <mosaik-menu-item disabled>Delete</mosaik-menu-item>
|
|
55
|
+
* </mosaik-menu>
|
|
56
|
+
*
|
|
57
|
+
* <!-- Navigation menu with icons -->
|
|
58
|
+
* <mosaik-menu>
|
|
59
|
+
* <mosaik-menu-item selected>
|
|
60
|
+
* <mosaik-icon slot="prefix" data="home"></mosaik-icon>
|
|
61
|
+
* Home
|
|
62
|
+
* </mosaik-menu-item>
|
|
63
|
+
* <mosaik-menu-item>
|
|
64
|
+
* <mosaik-icon slot="prefix" data="user"></mosaik-icon>
|
|
65
|
+
* Profile
|
|
66
|
+
* </mosaik-menu-item>
|
|
67
|
+
* <mosaik-menu-item>
|
|
68
|
+
* <mosaik-icon slot="prefix" data="settings"></mosaik-icon>
|
|
69
|
+
* Settings
|
|
70
|
+
* </mosaik-menu-item>
|
|
71
|
+
* </mosaik-menu>
|
|
72
|
+
*
|
|
73
|
+
* <!-- Hierarchical menu with submenus -->
|
|
74
|
+
* <mosaik-menu>
|
|
75
|
+
* <mosaik-menu-item>File</mosaik-menu-item>
|
|
76
|
+
* <mosaik-menu-item>
|
|
77
|
+
* Edit
|
|
78
|
+
* <mosaik-menu slot="submenu">
|
|
79
|
+
* <mosaik-menu-item>Undo</mosaik-menu-item>
|
|
80
|
+
* <mosaik-menu-item>Redo</mosaik-menu-item>
|
|
81
|
+
* </mosaik-menu>
|
|
82
|
+
* </mosaik-menu-item>
|
|
83
|
+
* <mosaik-menu-item>View</mosaik-menu-item>
|
|
84
|
+
* </mosaik-menu>
|
|
85
|
+
* ```
|
|
27
86
|
*
|
|
28
|
-
* @fires activated -
|
|
87
|
+
* @fires activated - Emitted when a menu item is activated or selected
|
|
29
88
|
*
|
|
30
89
|
* @public
|
|
31
90
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Menu/MenuElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,IAAI,EAAE,MAAM,6CAA6C,CAAC;AACnE,OAAO,EAAE,uBAAuB,EAA+B,MAAM,6BAA6B,CAAC;AACnG,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,aAAa;AAEb
|
|
1
|
+
{"version":3,"file":"MenuElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Menu/MenuElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,IAAI,EAAE,MAAM,6CAA6C,CAAC;AACnE,OAAO,EAAE,uBAAuB,EAA+B,MAAM,6BAA6B,CAAC;AACnG,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AAWI,IAAM,WAAW,GAAjB,MAAM,WACT,SAAQ,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC;IAGxD,iBAAiB;IAEA,UAAU,CAAoC;IAE/D,aAAa;IAEb,eAAe;IAEf;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,UAAU,GAAG,IAAI,uBAAuB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IACrE,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;;OAOG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,aAAa,CAAC;IACzB,CAAC;IAED;;;;;;;OAOG;IACH,IACW,SAAS;QAChB,OAAO,IAAI,CAAC,UAAU,CAAC;IAC3B,CAAC;IAED,aAAa;IAEb,kBAAkB;IAElB;;;OAGG;IACI,YAAY,CAAC,CAAQ;QACxB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAyB,CAAC;QAE3C,IAAI,MAAM,CAAC,gBAAgB,EAAE,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACzC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;QACnC,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QAClC,CAAC;IACL,CAAC;CAIJ,CAAA;AAzBG;IAAC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;;;4CAGhC;AAhDQ,WAAW;IAVvB,SAAS,CAAC;QACP,QAAQ,EAAE,aAAa;QACvB,QAAQ,EAAE,mBAAmB;QAC7B,MAAM,EAAE;YACJ,GAAG,EAAE,mBAAmB;YACxB,KAAK,EAAE,qBAAqB;YAC5B,YAAY,EAAE,4BAA4B;SAC7C;QACD,OAAO,EAAE,EAAE;KACd,CAAC;;GACW,WAAW,CAsEvB"}
|
|
@@ -8,7 +8,78 @@ import { ITabStripElementProps } from './ITabStripElementProps';
|
|
|
8
8
|
import { TabStripItemElement } from './TabStripItemElement';
|
|
9
9
|
declare const TabStripElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
11
|
+
* TabStrip - A navigation container for organizing and switching between related content panels.
|
|
12
|
+
*
|
|
13
|
+
* Provides tab-based navigation with keyboard support, visual indicators, and flexible placement options.
|
|
14
|
+
* Manages tab selection states and coordinates with tab panel content. Essential for organizing
|
|
15
|
+
* complex interfaces with multiple related views or data sets.
|
|
16
|
+
*
|
|
17
|
+
* @name TabStripElement
|
|
18
|
+
* @element mosaik-tab-strip
|
|
19
|
+
* @category Selectors
|
|
20
|
+
*
|
|
21
|
+
* @csspart tab-strip - The main tab strip container
|
|
22
|
+
* @csspart tab-list - Container for the tab buttons
|
|
23
|
+
* @csspart indicator - Active tab indicator element
|
|
24
|
+
* @csspart overflow - Overflow controls for scrollable tabs
|
|
25
|
+
*
|
|
26
|
+
* @cssprop --tab-strip-background-color - Background color of the tab strip
|
|
27
|
+
* @cssprop --tab-strip-border-color - Border color for tab strip edges
|
|
28
|
+
* @cssprop --tab-strip-gap - Spacing between individual tabs
|
|
29
|
+
* @cssprop --tab-strip-padding - Internal padding of the tab strip
|
|
30
|
+
* @cssprop --tab-indicator-color - Color of the active tab indicator
|
|
31
|
+
* @cssprop --tab-indicator-height - Height of the tab indicator bar
|
|
32
|
+
* @cssprop --tab-selected-background - Background color of selected tabs
|
|
33
|
+
* @cssprop --tab-hover-background - Background color on tab hover
|
|
34
|
+
*
|
|
35
|
+
* @dependency InkBarElement - Provides the active tab indicator animation
|
|
36
|
+
*
|
|
37
|
+
* @example
|
|
38
|
+
* ```html
|
|
39
|
+
* <!-- Basic horizontal tab strip -->
|
|
40
|
+
* <mosaik-tab-strip>
|
|
41
|
+
* <mosaik-tab-strip-item selected>Overview</mosaik-tab-strip-item>
|
|
42
|
+
* <mosaik-tab-strip-item>Details</mosaik-tab-strip-item>
|
|
43
|
+
* <mosaik-tab-strip-item>Settings</mosaik-tab-strip-item>
|
|
44
|
+
* </mosaik-tab-strip>
|
|
45
|
+
*
|
|
46
|
+
* <!-- Tab strip with indicator -->
|
|
47
|
+
* <mosaik-tab-strip has-indicator placement="top">
|
|
48
|
+
* <mosaik-tab-strip-item>Dashboard</mosaik-tab-strip-item>
|
|
49
|
+
* <mosaik-tab-strip-item>Analytics</mosaik-tab-strip-item>
|
|
50
|
+
* <mosaik-tab-strip-item>Reports</mosaik-tab-strip-item>
|
|
51
|
+
* <mosaik-tab-strip-item disabled>Admin</mosaik-tab-strip-item>
|
|
52
|
+
* </mosaik-tab-strip>
|
|
53
|
+
*
|
|
54
|
+
* <!-- Vertical tab navigation -->
|
|
55
|
+
* <div class="app-layout">
|
|
56
|
+
* <mosaik-tab-strip placement="left" has-indicator>
|
|
57
|
+
* <mosaik-tab-strip-item selected>
|
|
58
|
+
* <mosaik-icon slot="icon" data="home"></mosaik-icon>
|
|
59
|
+
* Home
|
|
60
|
+
* </mosaik-tab-strip-item>
|
|
61
|
+
* <mosaik-tab-strip-item>
|
|
62
|
+
* <mosaik-icon slot="icon" data="user"></mosaik-icon>
|
|
63
|
+
* Profile
|
|
64
|
+
* </mosaik-tab-strip-item>
|
|
65
|
+
* <mosaik-tab-strip-item>
|
|
66
|
+
* <mosaik-icon slot="icon" data="settings"></mosaik-icon>
|
|
67
|
+
* Settings
|
|
68
|
+
* </mosaik-tab-strip-item>
|
|
69
|
+
* </mosaik-tab-strip>
|
|
70
|
+
* <div class="content-area">
|
|
71
|
+
* <!-- Tab panel content -->
|
|
72
|
+
* </div>
|
|
73
|
+
* </div>
|
|
74
|
+
*
|
|
75
|
+
* <!-- Scrollable tab strip for many tabs -->
|
|
76
|
+
* <mosaik-tab-strip variant="scrollable">
|
|
77
|
+
* <mosaik-tab-strip-item>Tab 1</mosaik-tab-strip-item>
|
|
78
|
+
* <mosaik-tab-strip-item>Tab 2</mosaik-tab-strip-item>
|
|
79
|
+
* <mosaik-tab-strip-item>Tab 3</mosaik-tab-strip-item>
|
|
80
|
+
* <!-- More tabs... -->
|
|
81
|
+
* </mosaik-tab-strip>
|
|
82
|
+
* ```
|
|
12
83
|
*
|
|
13
84
|
* @public
|
|
14
85
|
*/
|