@rarui/components 1.20.0 → 1.21.0
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/CHANGELOG.md +9 -0
- package/custom-elements.json +89 -1
- package/dist/index.d.ts +206 -2
- package/dist/index.js +229 -146
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
`@rarui/components` components is a component library built with [Lit](https://lit.dev/).
|
|
4
4
|
|
|
5
|
+
## 2025-09-01 `1.21.0`
|
|
6
|
+
|
|
7
|
+
#### 🎉 New features
|
|
8
|
+
|
|
9
|
+
- Added comprehensive Storybook documentation for `Accordion` sub-components with individual stories. ([#131](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/131) by [@junior](https://git.rarolabs.com.br/junior))
|
|
10
|
+
- Enhanced `AccordionHeader` component with individual disable functionality and improved state management. ([#131](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/131) by [@junior](https://git.rarolabs.com.br/junior))
|
|
11
|
+
- Improved `AccordionItem` component with individual disable support and better event handling. ([#131](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/131) by [@junior](https://git.rarolabs.com.br/junior))
|
|
12
|
+
- Added `AccordionBody` Storybook stories demonstrating different padding options and content types. ([#131](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/131) by [@junior](https://git.rarolabs.com.br/junior))
|
|
13
|
+
|
|
5
14
|
## 2025-08-29 `1.20.0`
|
|
6
15
|
|
|
7
16
|
#### 🎉 New features
|
package/custom-elements.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.
|
|
2
|
+
"version": "1.20.0",
|
|
3
3
|
"tags": [
|
|
4
4
|
{
|
|
5
5
|
"name": "rarui-avatar",
|
|
@@ -7841,6 +7841,94 @@
|
|
|
7841
7841
|
}
|
|
7842
7842
|
]
|
|
7843
7843
|
},
|
|
7844
|
+
{
|
|
7845
|
+
"name": "rarui-accordion",
|
|
7846
|
+
"description": "## Rarui Accordion\n---\nThe Accordion component displays a list of expandable sections that users can toggle open or closed.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/accordion) for more details.",
|
|
7847
|
+
"attributes": [
|
|
7848
|
+
{
|
|
7849
|
+
"name": "disabled",
|
|
7850
|
+
"default": false,
|
|
7851
|
+
"description": "Disables the accordion, disallowing user interaction.",
|
|
7852
|
+
"type": "boolean"
|
|
7853
|
+
},
|
|
7854
|
+
{
|
|
7855
|
+
"name": "selected-default",
|
|
7856
|
+
"default": "",
|
|
7857
|
+
"description": "Informs which accordion item is open by default.",
|
|
7858
|
+
"type": "string"
|
|
7859
|
+
}
|
|
7860
|
+
]
|
|
7861
|
+
},
|
|
7862
|
+
{
|
|
7863
|
+
"name": "rarui-accordion-body",
|
|
7864
|
+
"description": "## Rarui Accordion Body\n---\nContent area that is shown/hidden when accordion item is toggled.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/accordion) for more details.",
|
|
7865
|
+
"attributes": [
|
|
7866
|
+
{
|
|
7867
|
+
"name": "padding",
|
|
7868
|
+
"default": "base",
|
|
7869
|
+
"description": "Padding properties are used to generate space around the content area of an Accordion.Body..\n\n- base\n- none",
|
|
7870
|
+
"type": "string",
|
|
7871
|
+
"values": [
|
|
7872
|
+
{
|
|
7873
|
+
"name": "base",
|
|
7874
|
+
"description": "(default)"
|
|
7875
|
+
},
|
|
7876
|
+
{
|
|
7877
|
+
"name": "none"
|
|
7878
|
+
}
|
|
7879
|
+
]
|
|
7880
|
+
}
|
|
7881
|
+
]
|
|
7882
|
+
},
|
|
7883
|
+
{
|
|
7884
|
+
"name": "rarui-accordion-header",
|
|
7885
|
+
"description": "## Rarui Accordion Header\n---\nClickable header section that toggles the accordion item visibility.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/accordion) for more details.",
|
|
7886
|
+
"attributes": [
|
|
7887
|
+
{
|
|
7888
|
+
"name": "title",
|
|
7889
|
+
"description": "The title to display in the accordion header.",
|
|
7890
|
+
"type": "string"
|
|
7891
|
+
},
|
|
7892
|
+
{
|
|
7893
|
+
"name": "size",
|
|
7894
|
+
"description": "- large\n- medium\n- small",
|
|
7895
|
+
"type": "string",
|
|
7896
|
+
"values": [
|
|
7897
|
+
{
|
|
7898
|
+
"name": "large"
|
|
7899
|
+
},
|
|
7900
|
+
{
|
|
7901
|
+
"name": "medium"
|
|
7902
|
+
},
|
|
7903
|
+
{
|
|
7904
|
+
"name": "small"
|
|
7905
|
+
}
|
|
7906
|
+
]
|
|
7907
|
+
},
|
|
7908
|
+
{
|
|
7909
|
+
"name": "subtitle",
|
|
7910
|
+
"description": "The subtitle to display in the accordion header.",
|
|
7911
|
+
"type": "string"
|
|
7912
|
+
},
|
|
7913
|
+
{
|
|
7914
|
+
"name": "no-icon-toggle",
|
|
7915
|
+
"default": false,
|
|
7916
|
+
"description": "Removes the arrow icon that shows if the accordion item is open or not which makes it possible to create a custom indicator.",
|
|
7917
|
+
"type": "boolean"
|
|
7918
|
+
}
|
|
7919
|
+
]
|
|
7920
|
+
},
|
|
7921
|
+
{
|
|
7922
|
+
"name": "rarui-accordion-item",
|
|
7923
|
+
"description": "## Rarui Accordion Item\n---\nContainer for accordion header and body content.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/accordion) for more details.",
|
|
7924
|
+
"attributes": [
|
|
7925
|
+
{
|
|
7926
|
+
"name": "index",
|
|
7927
|
+
"description": "Unique indicator to identify accordion items\n\n(Required)",
|
|
7928
|
+
"type": "string"
|
|
7929
|
+
}
|
|
7930
|
+
]
|
|
7931
|
+
},
|
|
7844
7932
|
{
|
|
7845
7933
|
"name": "rarui-banner",
|
|
7846
7934
|
"description": "## Rarui Banner\n---\nBanner messages are displayed to the user at the top of the window/screen.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/banner) for more details.",
|
package/dist/index.d.ts
CHANGED
|
@@ -17466,6 +17466,54 @@ declare const styles: {
|
|
|
17466
17466
|
|
|
17467
17467
|
type TooltipVariants = NonNullable<RecipeVariants<typeof styles.tooltip>>;
|
|
17468
17468
|
|
|
17469
|
+
declare const accordionStyles: {
|
|
17470
|
+
item: RuntimeFn<{
|
|
17471
|
+
selected: {
|
|
17472
|
+
true: {
|
|
17473
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17474
|
+
borderBottomColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17475
|
+
":hover": {
|
|
17476
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17477
|
+
};
|
|
17478
|
+
":active": {
|
|
17479
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17480
|
+
};
|
|
17481
|
+
":disabled": {
|
|
17482
|
+
borderBottomColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17483
|
+
backgroundColor: "transparent";
|
|
17484
|
+
};
|
|
17485
|
+
};
|
|
17486
|
+
};
|
|
17487
|
+
size: {
|
|
17488
|
+
large: {
|
|
17489
|
+
padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})`;
|
|
17490
|
+
};
|
|
17491
|
+
medium: {
|
|
17492
|
+
padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})`;
|
|
17493
|
+
};
|
|
17494
|
+
small: {
|
|
17495
|
+
padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})`;
|
|
17496
|
+
};
|
|
17497
|
+
};
|
|
17498
|
+
}>;
|
|
17499
|
+
body: RuntimeFn<{
|
|
17500
|
+
/**
|
|
17501
|
+
* Padding properties are used to generate space around the content area of an Accordion.Body..
|
|
17502
|
+
* @default base
|
|
17503
|
+
*/
|
|
17504
|
+
padding: {
|
|
17505
|
+
base: {
|
|
17506
|
+
padding: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17507
|
+
};
|
|
17508
|
+
none: {
|
|
17509
|
+
padding: number;
|
|
17510
|
+
};
|
|
17511
|
+
};
|
|
17512
|
+
}>;
|
|
17513
|
+
};
|
|
17514
|
+
|
|
17515
|
+
type AccordionVariants = Omit<NonNullable<RecipeVariants<typeof accordionStyles.item>>, "selected"> & NonNullable<RecipeVariants<typeof accordionStyles.body>>;
|
|
17516
|
+
|
|
17469
17517
|
declare const breadcrumbStyles: {
|
|
17470
17518
|
breadcrumb: string;
|
|
17471
17519
|
item: RuntimeFn<{
|
|
@@ -18016,6 +18064,48 @@ interface ToggleTyping {
|
|
|
18016
18064
|
}
|
|
18017
18065
|
type ToggleProps = ToggleTyping & ToggleVariants;
|
|
18018
18066
|
|
|
18067
|
+
interface AccordionProps {
|
|
18068
|
+
/**
|
|
18069
|
+
* Informs which accordion item is open by default, this value must be the same as informed in the index of each item
|
|
18070
|
+
*/
|
|
18071
|
+
selectedDefault?: string;
|
|
18072
|
+
/**
|
|
18073
|
+
* Disables the accordion, disallowing user interaction.
|
|
18074
|
+
* @default false
|
|
18075
|
+
*/
|
|
18076
|
+
disabled?: boolean;
|
|
18077
|
+
}
|
|
18078
|
+
|
|
18079
|
+
type AccordionBodyProps = Pick<AccordionVariants, "padding">;
|
|
18080
|
+
|
|
18081
|
+
interface AccordionHeaderTyping {
|
|
18082
|
+
/**
|
|
18083
|
+
* The title to display in the accordion header.
|
|
18084
|
+
*/
|
|
18085
|
+
title?: string;
|
|
18086
|
+
/**
|
|
18087
|
+
* The subtitle to display in the accordion header.
|
|
18088
|
+
*/
|
|
18089
|
+
subtitle?: string;
|
|
18090
|
+
/**
|
|
18091
|
+
* Removes the arrow icon that shows if the accordion item is open or not which makes it possible to create a custom indicator.
|
|
18092
|
+
* @default false
|
|
18093
|
+
*/
|
|
18094
|
+
noIconToggle?: boolean;
|
|
18095
|
+
}
|
|
18096
|
+
type AccordionHeaderProps = AccordionHeaderTyping & Pick<AccordionVariants, "size">;
|
|
18097
|
+
|
|
18098
|
+
interface AccordionItemProps {
|
|
18099
|
+
/**
|
|
18100
|
+
* Unique indicator to identify accordion items
|
|
18101
|
+
*/
|
|
18102
|
+
index: string;
|
|
18103
|
+
/**
|
|
18104
|
+
* This is an attribute used to identify a DOM node for testing purposes.
|
|
18105
|
+
*/
|
|
18106
|
+
testId?: string;
|
|
18107
|
+
}
|
|
18108
|
+
|
|
18019
18109
|
interface BannerTyping {
|
|
18020
18110
|
/**
|
|
18021
18111
|
* A function to be called when the user closes the banner. This function is typically used to handle the closing action.
|
|
@@ -18200,7 +18290,7 @@ declare class RaruiDivider extends LitElement {
|
|
|
18200
18290
|
render(): TemplateResult<1>;
|
|
18201
18291
|
}
|
|
18202
18292
|
|
|
18203
|
-
type IconName = "
|
|
18293
|
+
type IconName = "add-circle-filled" | "add-circle-outlined" | "alarm-filled" | "alarm-outlined" | "alternate-email" | "archive-all-filled" | "archive-all-outlined" | "archive-filled" | "archive-in-filled" | "archive-in-outlined" | "archive-outlined" | "arrow-alt-down" | "arrow-alt-left" | "arrow-alt-right" | "arrow-alt-up" | "arrow-circle-down-filled" | "arrow-circle-down-outlined" | "arrow-circle-up-filled" | "arrow-circle-up-outlined" | "arrow-circled-down-circle-outlined" | "arrow-circled-down-filled" | "arrow-circled-up-circle-outlined" | "arrow-direction-down-up" | "arrow-direction-left-right" | "arrow-direction-right-left" | "arrow-direction-up-down" | "arrow-directions" | "arrow-down" | "arrow-down-left" | "arrow-down-right" | "arrow-first-page" | "arrow-last-page" | "arrow-left" | "arrow-line-down" | "arrow-line-left" | "arrow-line-long-down" | "arrow-line-long-left" | "arrow-line-long-right" | "arrow-line-long-up" | "arrow-line-right" | "arrow-line-up" | "arrow-right" | "arrow-subdirectory-left" | "arrow-subdirectory-right" | "arrow-trending-down" | "arrow-trending-up" | "arrow-up" | "arrow-up-left" | "arrow-up-right" | "attachment" | "backspace" | "backspace-outlined" | "barley" | "barley-off" | "bolt-circle-filled" | "bolt-circle-outlined" | "bookmark-filled" | "bookmark-outlined" | "calendar-date-range-filled" | "calendar-date-range-outlined" | "calendar-event-filled" | "calendar-event-outlined" | "calendar-filled" | "calendar-outlined" | "camera-filled" | "camera-outlined" | "camera-shutter-filled" | "camera-shutter-outlined" | "cancel-circle-filled" | "cancel-circle-outlined" | "car-filled" | "car-outlined" | "chart-bars-filled" | "chart-bars-outlined" | "chat-bubble-filled" | "chat-bubble-outlined" | "chat-message-filled" | "chat-message-outlined" | "check" | "check-circle-filled" | "check-circle-outlined" | "check-small" | "chevron-big-down" | "chevron-big-left" | "chevron-big-right" | "chevron-big-up" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "clock-filled" | "clock-outlined" | "close" | "cloud-filled" | "cloud-outlined" | "contact-support-filled" | "contact-support-outlined" | "content-copy-filled" | "content-copy-outlined" | "content-paste-filled" | "content-paste-outlined" | "conversation-filled" | "conversation-outlined" | "copyright-filled" | "copyright-outlined" | "credit-card-filled" | "credit-card-outlined" | "danger-filled" | "danger-outlined" | "dashboard-filled" | "dashboard-outlined" | "document-filled" | "document-outlined" | "document-text-filled" | "document-text-outlined" | "download-filled" | "download-outlined" | "eco-filled" | "eco-outlined" | "edit-filled" | "edit-outlined" | "euro-symbol" | "exit-fullscreen" | "eye-filled" | "eye-off-filled" | "eye-off-outlined" | "eye-outlined" | "facebook-filled" | "facebook-outlined" | "file-copy-filled" | "file-copy-outlined" | "filter-alt-filled" | "filter-alt-outlined" | "filter-list" | "fingerprint" | "flag-filled" | "flag-outlined" | "flag-tour-filled" | "flag-tour-outlined" | "flower-filled" | "flower-outlined" | "folder-filled" | "folder-list-filled" | "folder-list-outlined" | "folder-open" | "folder-outlined" | "fruit-apple-filled" | "fruit-apple-outlined" | "fullscreen-filled" | "fullscreen-outlined" | "google" | "google-play" | "headphones-filled" | "headphones-outlined" | "heart-filled" | "heart-outlined" | "help-filled" | "help-outlined" | "history" | "home-filled" | "home-outlined" | "image-filled" | "image-outlined" | "info-circle-filled" | "info-circle-outlined" | "instagram" | "instagram-outlined" | "label-filled" | "label-important-filled" | "label-important-outlined" | "label-outlined" | "language" | "lightbulb-filled" | "lightbulb-outlined" | "link" | "linkedin-filled" | "linkedin-outlined" | "loader" | "loading" | "lock-filled" | "lock-open-filled" | "lock-open-outlined" | "lock-outlined" | "login" | "logout" | "mail-filled" | "mail-open-filled" | "mail-open-outlined" | "mail-outlined" | "menu" | "menu-large" | "microphone-filled" | "microphone-outlined" | "minus" | "money-filled" | "money-outlined" | "mood-bad" | "mood-bad-outlined" | "mood-filled" | "mood-outlined" | "more-horiz" | "more-vert" | "music-note-filled" | "music-note-outlined" | "notification-filled" | "notification-outlined" | "open-in-new" | "package" | "package-outlined" | "pause-filled" | "pause-outlined" | "pets-filled" | "pets-outlined" | "phone-call-filled" | "phone-call-outlined" | "phone-filled" | "phone-outlined" | "pin-filled" | "pin-outlined" | "play-arrow-filled" | "play-arrow-outlined" | "play-circle-filled" | "play-circle-outlined" | "plus" | "power-settings-new" | "printer-filled" | "printer-outlined" | "push-pin-filled" | "push-pin-outlined" | "receipt-filled" | "receipt-outlined" | "recycle" | "redeem" | "redo" | "refresh" | "refresh-alt" | "remove" | "remove-circle-filled" | "remove-circle-outlined" | "repeat" | "reply" | "save-alt" | "screen-outlined" | "search" | "send-filled" | "send-outlined" | "sentiment-dissatisfied-filled" | "sentiment-dissatisfied-outlined" | "sentiment-neutral-filled" | "sentiment-neutral-outlined" | "sentiment-satisfied-filled" | "sentiment-satisfied-outlined" | "sentiment-very-dissatisfied-filled" | "sentiment-very-dissatisfied-outlined" | "sentiment-very-satisfied-filled" | "sentiment-very-satisfied-outlined" | "settings-filled" | "settings-outlined" | "share-filled" | "share-outlined" | "shopping-bag-filled" | "shopping-bag-outlined" | "shopping-cart-add" | "shopping-cart-filled" | "shopping-cart-outlined" | "sprout" | "sprout-outline-outlined" | "star-filled" | "star-outlined" | "stay-primary-portrait" | "storefront" | "tag-filled" | "tag-outlined" | "textsms-filled" | "textsms-outlined" | "thumb-down-filled" | "thumb-down-outlined" | "thumb-up-filled" | "thumb-up-outlined" | "tiktok" | "toc" | "trash-filled" | "trash-outlined" | "truck-filled" | "truck-outlined" | "tune" | "twitter" | "undo" | "upload-filled" | "upload-outlined" | "user-circle-filled" | "user-circle-outlined" | "user-filled" | "user-outlined" | "user-square-filled" | "user-square-outlined" | "users-filled" | "users-outlined" | "view-grid-filled" | "view-grid-outlined" | "view-list-filled" | "view-list-outlined" | "warning-bubble-filled" | "warning-bubble-outlined" | "warning-filled" | "warning-outlined" | "whatsapp-filled" | "whatsapp-outlined" | "work-filled" | "work-outlined" | "wysiwyg-filled" | "youtube-filled" | "youtube-outlined" | "zoom-in" | "zoom-out";
|
|
18204
18294
|
|
|
18205
18295
|
declare global {
|
|
18206
18296
|
interface HTMLElementTagNameMap {
|
|
@@ -18867,7 +18957,7 @@ interface BreadcrumbProperties {
|
|
|
18867
18957
|
* Útil para gerenciar a exibição de listas longas de breadcrumb.
|
|
18868
18958
|
* @default 10
|
|
18869
18959
|
*/
|
|
18870
|
-
|
|
18960
|
+
"items-after-truncate"?: number;
|
|
18871
18961
|
}
|
|
18872
18962
|
|
|
18873
18963
|
declare class RaruiBreadcrumb extends LitElement {
|
|
@@ -19088,6 +19178,120 @@ declare class RaruiSideNavigationItem extends LitElement {
|
|
|
19088
19178
|
render(): TemplateResult<1>;
|
|
19089
19179
|
}
|
|
19090
19180
|
|
|
19181
|
+
declare global {
|
|
19182
|
+
interface HTMLElementTagNameMap {
|
|
19183
|
+
"rarui-accordion": RaruiAccordion;
|
|
19184
|
+
}
|
|
19185
|
+
}
|
|
19186
|
+
/**
|
|
19187
|
+
* ## Rarui Accordion
|
|
19188
|
+
* ---
|
|
19189
|
+
* The Accordion component displays a list of expandable sections that users can toggle open or closed.
|
|
19190
|
+
*
|
|
19191
|
+
* See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/accordion) for more details.
|
|
19192
|
+
*/
|
|
19193
|
+
type AccordionProperties = Pick<AccordionProps, "disabled"> & {
|
|
19194
|
+
/**
|
|
19195
|
+
* Informs which accordion item is open by default.
|
|
19196
|
+
* @default ""
|
|
19197
|
+
*/
|
|
19198
|
+
"selected-default"?: string;
|
|
19199
|
+
};
|
|
19200
|
+
|
|
19201
|
+
declare class RaruiAccordion extends LitElement {
|
|
19202
|
+
sprinkleAttrs: Record<string, string>;
|
|
19203
|
+
selectedDefault?: AccordionProperties["selected-default"];
|
|
19204
|
+
disabled?: AccordionProperties["disabled"];
|
|
19205
|
+
private selected;
|
|
19206
|
+
static styles: CSSResult;
|
|
19207
|
+
connectedCallback(): void;
|
|
19208
|
+
disconnectedCallback(): void;
|
|
19209
|
+
private handleItemToggle;
|
|
19210
|
+
private updateItemsState;
|
|
19211
|
+
firstUpdated(): void;
|
|
19212
|
+
updated(changedProperties: Map<string, any>): void;
|
|
19213
|
+
render(): TemplateResult<1>;
|
|
19214
|
+
}
|
|
19215
|
+
|
|
19216
|
+
declare global {
|
|
19217
|
+
interface HTMLElementTagNameMap {
|
|
19218
|
+
"rarui-accordion-item": RaruiAccordionItem;
|
|
19219
|
+
}
|
|
19220
|
+
}
|
|
19221
|
+
/**
|
|
19222
|
+
* ## Rarui Accordion Item
|
|
19223
|
+
* ---
|
|
19224
|
+
* Container for accordion header and body content.
|
|
19225
|
+
*
|
|
19226
|
+
* See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/accordion) for more details.
|
|
19227
|
+
*/
|
|
19228
|
+
type AccordionItemProperties = Pick<AccordionItemProps, "index">;
|
|
19229
|
+
|
|
19230
|
+
declare class RaruiAccordionItem extends LitElement {
|
|
19231
|
+
index: AccordionItemProperties["index"];
|
|
19232
|
+
selected: boolean;
|
|
19233
|
+
disabled: boolean;
|
|
19234
|
+
connectedCallback(): void;
|
|
19235
|
+
disconnectedCallback(): void;
|
|
19236
|
+
private handleHeaderClick;
|
|
19237
|
+
render(): TemplateResult<1>;
|
|
19238
|
+
}
|
|
19239
|
+
|
|
19240
|
+
declare global {
|
|
19241
|
+
interface HTMLElementTagNameMap {
|
|
19242
|
+
"rarui-accordion-header": RaruiAccordionHeader;
|
|
19243
|
+
}
|
|
19244
|
+
}
|
|
19245
|
+
/**
|
|
19246
|
+
* ## Rarui Accordion Header
|
|
19247
|
+
* ---
|
|
19248
|
+
* Clickable header section that toggles the accordion item visibility.
|
|
19249
|
+
*
|
|
19250
|
+
* See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/accordion) for more details.
|
|
19251
|
+
*/
|
|
19252
|
+
type AccordionHeaderProperties = Pick<AccordionHeaderProps, "size" | "subtitle" | "title"> & {
|
|
19253
|
+
/**
|
|
19254
|
+
* Removes the arrow icon that shows if the accordion item is open or not which makes it possible to create a custom indicator.
|
|
19255
|
+
* @default false
|
|
19256
|
+
*/
|
|
19257
|
+
"no-icon-toggle"?: boolean;
|
|
19258
|
+
};
|
|
19259
|
+
|
|
19260
|
+
declare class RaruiAccordionHeader extends LitElement {
|
|
19261
|
+
title: NonNullable<AccordionHeaderProperties["title"]>;
|
|
19262
|
+
subtitle: AccordionHeaderProperties["subtitle"];
|
|
19263
|
+
size: AccordionHeaderProperties["size"];
|
|
19264
|
+
noIconToggle: AccordionHeaderProperties["no-icon-toggle"];
|
|
19265
|
+
disabled: boolean;
|
|
19266
|
+
selected: boolean;
|
|
19267
|
+
static styles: CSSResult;
|
|
19268
|
+
private handleClick;
|
|
19269
|
+
private getTitleSize;
|
|
19270
|
+
private getSubtitleSize;
|
|
19271
|
+
render(): TemplateResult<1>;
|
|
19272
|
+
}
|
|
19273
|
+
|
|
19274
|
+
declare global {
|
|
19275
|
+
interface HTMLElementTagNameMap {
|
|
19276
|
+
"rarui-accordion-body": RaruiAccordionBody;
|
|
19277
|
+
}
|
|
19278
|
+
}
|
|
19279
|
+
/**
|
|
19280
|
+
* ## Rarui Accordion Body
|
|
19281
|
+
* ---
|
|
19282
|
+
* Content area that is shown/hidden when accordion item is toggled.
|
|
19283
|
+
*
|
|
19284
|
+
* See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/accordion) for more details.
|
|
19285
|
+
*/
|
|
19286
|
+
type AccordionBodyProperties = Partial<AccordionBodyProps>;
|
|
19287
|
+
|
|
19288
|
+
declare class RaruiAccordionBody extends LitElement {
|
|
19289
|
+
padding: AccordionBodyProperties["padding"];
|
|
19290
|
+
selected: boolean;
|
|
19291
|
+
static styles: CSSResult;
|
|
19292
|
+
render(): TemplateResult<1>;
|
|
19293
|
+
}
|
|
19294
|
+
|
|
19091
19295
|
declare global {
|
|
19092
19296
|
interface HTMLElementTagNameMap {
|
|
19093
19297
|
"rarui-banner": RaruiBanner;
|