@besaitech/ng-design-system 0.0.29 → 0.0.32
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/index.d.ts
CHANGED
|
@@ -93,7 +93,7 @@ type SdsIconSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
|
93
93
|
declare class SdsIcon {
|
|
94
94
|
private readonly sanitizer;
|
|
95
95
|
/** Icon identifier from the registry. */
|
|
96
|
-
readonly name: _angular_core.InputSignal<"
|
|
96
|
+
readonly name: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle">;
|
|
97
97
|
/** Square size: a pixel number, a numeric string, or a keyword (sm·md·lg·xl). */
|
|
98
98
|
readonly size: _angular_core.InputSignalWithTransform<number, string | number>;
|
|
99
99
|
/** Stroke width of the line icon. */
|
|
@@ -105,6 +105,7 @@ declare class SdsIcon {
|
|
|
105
105
|
|
|
106
106
|
type SdsButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'danger';
|
|
107
107
|
type SdsButtonSize = 'sm' | 'md' | 'lg';
|
|
108
|
+
type SdsButtonShape = 'control' | 'pill';
|
|
108
109
|
/**
|
|
109
110
|
* Brand button. Project an <sds-icon sdsIconLeading/> or <sds-icon sdsIconTrailing/>
|
|
110
111
|
* for icons, or set [iconOnly]="true" for a square icon button.
|
|
@@ -115,6 +116,13 @@ type SdsButtonSize = 'sm' | 'md' | 'lg';
|
|
|
115
116
|
declare class SdsButton {
|
|
116
117
|
readonly variant: _angular_core.InputSignal<SdsButtonVariant>;
|
|
117
118
|
readonly size: _angular_core.InputSignal<SdsButtonSize>;
|
|
119
|
+
/**
|
|
120
|
+
* `pill` fully rounds the button. It is the shape a consumer-facing surface tends to want for its
|
|
121
|
+
* primary action, and the same axis {@link SdsInput} exposes — a design system with pill inputs and
|
|
122
|
+
* no pill buttons would force any app that wants one back onto hand-rolled classes for its single
|
|
123
|
+
* most important control.
|
|
124
|
+
*/
|
|
125
|
+
readonly shape: _angular_core.InputSignal<SdsButtonShape>;
|
|
118
126
|
readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
|
|
119
127
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
120
128
|
readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -129,7 +137,7 @@ declare class SdsButton {
|
|
|
129
137
|
protected readonly hostClass: _angular_core.Signal<"flex w-full" | "inline-flex">;
|
|
130
138
|
protected readonly classes: _angular_core.Signal<string>;
|
|
131
139
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsButton, never>;
|
|
132
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsButton, "sds-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[sdsIconLeading]", "*", "[sdsIconTrailing]"], true, never>;
|
|
140
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsButton, "sds-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[sdsIconLeading]", "*", "[sdsIconTrailing]"], true, never>;
|
|
133
141
|
}
|
|
134
142
|
|
|
135
143
|
type SdsInputSize = 'sm' | 'md' | 'lg';
|
|
@@ -177,8 +185,8 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
177
185
|
* is its only name.
|
|
178
186
|
*/
|
|
179
187
|
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
180
|
-
readonly leadingIcon: _angular_core.InputSignal<"
|
|
181
|
-
readonly trailingIcon: _angular_core.InputSignal<"
|
|
188
|
+
readonly leadingIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
|
|
189
|
+
readonly trailingIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
|
|
182
190
|
/**
|
|
183
191
|
* A CLICKABLE trailing icon, for the affordances that belong to the field itself — password reveal
|
|
184
192
|
* above all. Distinct from {@link trailingIcon}, which is decorative and explicitly
|
|
@@ -188,7 +196,7 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
188
196
|
* Always pair it with {@link trailingActionLabel} — an icon-only button with no accessible name is
|
|
189
197
|
* unusable by a screen reader. For a toggle, also bind {@link trailingActionPressed}.
|
|
190
198
|
*/
|
|
191
|
-
readonly trailingAction: _angular_core.InputSignal<"
|
|
199
|
+
readonly trailingAction: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
|
|
192
200
|
/** Accessible name for {@link trailingAction}. Translate it in the consuming app. */
|
|
193
201
|
readonly trailingActionLabel: _angular_core.InputSignal<string>;
|
|
194
202
|
/** `aria-pressed` for a toggling action (e.g. show/hide password). Null renders no attribute. */
|
|
@@ -298,9 +306,9 @@ declare class SdsToggleSwitch implements ControlValueAccessor {
|
|
|
298
306
|
/** Value emitted/stored when the switch is off. */
|
|
299
307
|
readonly falseValue: _angular_core.InputSignal<unknown>;
|
|
300
308
|
/** Icon shown on the knob when checked. */
|
|
301
|
-
readonly onIcon: _angular_core.InputSignal<"
|
|
309
|
+
readonly onIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
|
|
302
310
|
/** Icon shown on the knob when unchecked. */
|
|
303
|
-
readonly offIcon: _angular_core.InputSignal<"
|
|
311
|
+
readonly offIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
|
|
304
312
|
readonly hint: _angular_core.InputSignal<string>;
|
|
305
313
|
readonly error: _angular_core.InputSignal<string>;
|
|
306
314
|
/**
|
|
@@ -1622,7 +1630,7 @@ declare class SdsNavGroup {
|
|
|
1622
1630
|
/** Turn the label into an expand/collapse control. */
|
|
1623
1631
|
readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1624
1632
|
/** Icon for a collapsible header, so it reads at the same weight as the items it sits among. */
|
|
1625
|
-
readonly icon: _angular_core.InputSignal<"
|
|
1633
|
+
readonly icon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
|
|
1626
1634
|
/**
|
|
1627
1635
|
* URL prefix owned by this group, e.g. `/payments`. While the active route starts with it the
|
|
1628
1636
|
* group counts as active and opens itself — unless the person has explicitly toggled it since.
|
|
@@ -1674,7 +1682,7 @@ declare class SdsNavGroup {
|
|
|
1674
1682
|
*/
|
|
1675
1683
|
declare class SdsNavItem {
|
|
1676
1684
|
protected readonly store: SidebarStore;
|
|
1677
|
-
readonly icon: _angular_core.InputSignal<"
|
|
1685
|
+
readonly icon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
|
|
1678
1686
|
readonly label: _angular_core.InputSignal<string>;
|
|
1679
1687
|
/** Router link target; when null, the item behaves as a button. */
|
|
1680
1688
|
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|
|
@@ -1689,4 +1697,4 @@ declare class SdsNavItem {
|
|
|
1689
1697
|
}
|
|
1690
1698
|
|
|
1691
1699
|
export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsPaginator, SdsPhoneInput, SdsSelect, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsToggleSwitch, SdsTopbar, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, isOutOfRange, isSameDay, isoDay, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
|
|
1692
|
-
export type { SdsAccordionActive, SdsAccordionValue, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsDatePickerSize, SdsIconName, SdsIconSize, SdsInputAppearance, SdsInputShape, SdsInputSize, SdsInputType, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsSelectSize, SdsSortOrder, SdsTabValue, SdsTableCellContext, SdsTableColumn, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSize, SdsTableSortEvent, SdsTextareaResize, SdsTextareaSize, SdsToggleSwitchSize, SdsTopbarAppearance };
|
|
1700
|
+
export type { SdsAccordionActive, SdsAccordionValue, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsDatePickerSize, SdsIconName, SdsIconSize, SdsInputAppearance, SdsInputShape, SdsInputSize, SdsInputType, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsSelectSize, SdsSortOrder, SdsTabValue, SdsTableCellContext, SdsTableColumn, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSize, SdsTableSortEvent, SdsTextareaResize, SdsTextareaSize, SdsToggleSwitchSize, SdsTopbarAppearance };
|
package/package.json
CHANGED
|
Binary file
|