@ajuarezso/sui-design-system 0.2.1 → 0.2.2
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/package.json
CHANGED
|
@@ -904,7 +904,7 @@ declare class SuiAlert {
|
|
|
904
904
|
* `small` (12/16) en los compactos (small/xsmall). Mapea el tipo del action al
|
|
905
905
|
* tamaño del alert.
|
|
906
906
|
*/
|
|
907
|
-
readonly actionLinkSize: _angular_core.Signal<"
|
|
907
|
+
readonly actionLinkSize: _angular_core.Signal<"medium" | "small">;
|
|
908
908
|
/**
|
|
909
909
|
* Tamaño del `sui-compact-button` del cierre, mapeado del size del alert para
|
|
910
910
|
* conservar el footprint del icono: xsmall (icon 16) → compact `medium`;
|
|
@@ -1306,7 +1306,7 @@ type SuiBrandLogoSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
|
1306
1306
|
* ariaLabel="Síguenos en GitHub" />
|
|
1307
1307
|
*/
|
|
1308
1308
|
declare class SuiBrandLogo {
|
|
1309
|
-
readonly company: _angular_core.InputSignal<"
|
|
1309
|
+
readonly company: _angular_core.InputSignal<"adobe" | "amazon" | "apple" | "bitcoin" | "discord" | "dropbox" | "facebook" | "figma" | "framer" | "github" | "google" | "instagram" | "linkedin" | "microsoft" | "netflix" | "notion" | "paypal" | "pinterest" | "slack" | "spotify" | "stripe" | "telegram" | "twitch" | "webflow" | "whatsapp" | "wise" | "x-twitter" | "youtube">;
|
|
1310
1310
|
readonly variant: _angular_core.InputSignal<SuiBrandLogoStyle>;
|
|
1311
1311
|
readonly size: _angular_core.InputSignal<SuiBrandLogoSize>;
|
|
1312
1312
|
readonly href: _angular_core.InputSignal<string | null>;
|
|
@@ -1527,7 +1527,7 @@ declare class SuiButtonGroupItem {
|
|
|
1527
1527
|
/** aria-label para icon-only buttons */
|
|
1528
1528
|
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1529
1529
|
/** Estado del data-attribute para CSS scoping */
|
|
1530
|
-
readonly state: _angular_core.Signal<"
|
|
1530
|
+
readonly state: _angular_core.Signal<"default" | "active" | "disabled">;
|
|
1531
1531
|
/** True cuando solo tiene icon (left o right) sin label */
|
|
1532
1532
|
readonly onlyIcon: _angular_core.Signal<boolean>;
|
|
1533
1533
|
/**
|
|
@@ -1898,7 +1898,7 @@ declare class SuiCheckboxCard implements ControlValueAccessor {
|
|
|
1898
1898
|
/** RemixIcon name (sin prefijo "ri-") para type='left-icon'. */
|
|
1899
1899
|
readonly icon: _angular_core.InputSignal<string | null>;
|
|
1900
1900
|
/** Emoji del catálogo SUI_EMOJI_MAP — alternativa a icon para type='left-icon'. */
|
|
1901
|
-
readonly emoji: _angular_core.InputSignal<"
|
|
1901
|
+
readonly emoji: _angular_core.InputSignal<"warning" | "label" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "package" | "receipt" | "money-bag" | "money-with-wings" | "shopping-cart" | "shopping-bags" | "card-index-dividers" | "bell" | "bell-with-slash" | "pushpin" | "mobile-phone" | "gear" | "locked" | "unlocked" | "wrench" | "hammer" | "magnifying-glass-tilted-left" | "spiral-calendar" | "bar-chart" | "delivery-truck" | "motorcycle" | "rocket" | "house" | "office-building" | "shop" | "dollar-banknote" | "glowing-star" | "kick-scooter" | "check-mark" | "check-mark-button" | "cross-mark" | "no-entry" | "sparkles" | "party-popper" | "waving-hand" | "thumbs-up" | "clapping-hands" | "handshake" | "busts-in-silhouette" | "pizza" | "hamburger" | "taco" | "birthday-cake" | null>;
|
|
1902
1902
|
/** URL directa al emoji para type='left-icon'. Precedencia: icon > emoji > iconSrc. */
|
|
1903
1903
|
readonly iconSrc: _angular_core.InputSignal<string | null>;
|
|
1904
1904
|
/** URL de imagen para type='avatar'. Si falla, fallback a iniciales del label. */
|
|
@@ -2235,7 +2235,7 @@ declare class SuiColorDot {
|
|
|
2235
2235
|
* - `selected` → dot 12×12 + ring 2px.
|
|
2236
2236
|
* - `disabled` → dot gris pálido, sin pointer events.
|
|
2237
2237
|
*/
|
|
2238
|
-
readonly state: _angular_core.InputSignal<"
|
|
2238
|
+
readonly state: _angular_core.InputSignal<"default" | "disabled" | "hover" | "selected">;
|
|
2239
2239
|
/** aria-label override. */
|
|
2240
2240
|
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
2241
2241
|
readonly clicked: _angular_core.OutputEmitterRef<void>;
|
|
@@ -3172,7 +3172,7 @@ declare class SuiContentCard {
|
|
|
3172
3172
|
/** Logo de empresa para type=company (mini-avatar bottom-right del sui-avatar). */
|
|
3173
3173
|
readonly companyLogoSrc: _angular_core.InputSignal<string | null>;
|
|
3174
3174
|
/** Marca para type=brand / card-provider. */
|
|
3175
|
-
readonly brand: _angular_core.InputSignal<"
|
|
3175
|
+
readonly brand: _angular_core.InputSignal<"adobe" | "amazon" | "apple" | "bitcoin" | "discord" | "dropbox" | "facebook" | "figma" | "framer" | "github" | "google" | "instagram" | "linkedin" | "microsoft" | "netflix" | "notion" | "paypal" | "pinterest" | "slack" | "spotify" | "stripe" | "telegram" | "twitch" | "webflow" | "whatsapp" | "wise" | "x-twitter" | "youtube" | null>;
|
|
3176
3176
|
/** Mostrar el botón X de dismiss. Default true. */
|
|
3177
3177
|
readonly dismissible: _angular_core.InputSignal<boolean>;
|
|
3178
3178
|
/** aria-label del botón X. */
|
|
@@ -4446,7 +4446,7 @@ type SuiEmojiName = keyof typeof SUI_EMOJI_MAP;
|
|
|
4446
4446
|
type SuiEmojiSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
4447
4447
|
declare class SuiEmoji {
|
|
4448
4448
|
/** Nombre del emoji del catálogo. Si se proveé `src`, este se ignora. */
|
|
4449
|
-
readonly name: _angular_core.InputSignal<"
|
|
4449
|
+
readonly name: _angular_core.InputSignal<"warning" | "label" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "package" | "receipt" | "money-bag" | "money-with-wings" | "shopping-cart" | "shopping-bags" | "card-index-dividers" | "bell" | "bell-with-slash" | "pushpin" | "mobile-phone" | "gear" | "locked" | "unlocked" | "wrench" | "hammer" | "magnifying-glass-tilted-left" | "spiral-calendar" | "bar-chart" | "delivery-truck" | "motorcycle" | "rocket" | "house" | "office-building" | "shop" | "dollar-banknote" | "glowing-star" | "kick-scooter" | "check-mark" | "check-mark-button" | "cross-mark" | "no-entry" | "sparkles" | "party-popper" | "waving-hand" | "thumbs-up" | "clapping-hands" | "handshake" | "busts-in-silhouette" | "pizza" | "hamburger" | "taco" | "birthday-cake" | null>;
|
|
4450
4450
|
/** URL directa al emoji (override del catálogo). Útil para usar emojis fuera del map. */
|
|
4451
4451
|
readonly src: _angular_core.InputSignal<string | null>;
|
|
4452
4452
|
/** Tamaño del emoji. */
|
|
@@ -4927,13 +4927,13 @@ declare class SuiFileUpload {
|
|
|
4927
4927
|
protected readonly inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
|
|
4928
4928
|
protected readonly dragging: _angular_core.WritableSignal<boolean>;
|
|
4929
4929
|
protected readonly internalError: _angular_core.WritableSignal<string | null>;
|
|
4930
|
-
protected readonly state: _angular_core.Signal<"
|
|
4930
|
+
protected readonly state: _angular_core.Signal<"default" | "error" | "disabled" | "dragover">;
|
|
4931
4931
|
protected readonly resolvedTitle: _angular_core.Signal<string>;
|
|
4932
4932
|
protected readonly resolvedSubtitle: _angular_core.Signal<string>;
|
|
4933
4933
|
protected readonly resolvedErrorMessage: _angular_core.Signal<string | null>;
|
|
4934
4934
|
/** Icon size px. Figma verified = 24 (medium). small/large/xlarge escalan +4
|
|
4935
4935
|
* (small 20 → medium 24 → large 28 → xlarge 32) — extensión de proyecto. */
|
|
4936
|
-
protected readonly iconSize: _angular_core.Signal<
|
|
4936
|
+
protected readonly iconSize: _angular_core.Signal<20 | 24 | 32 | 28>;
|
|
4937
4937
|
onClick(): void;
|
|
4938
4938
|
/** Browse File button — abre el picker. stopPropagation evita doble-open
|
|
4939
4939
|
* (el host también es clickeable). */
|
|
@@ -5155,7 +5155,7 @@ declare class SuiFilterPanelFooter {
|
|
|
5155
5155
|
readonly clearDisabled: _angular_core.InputSignal<boolean>;
|
|
5156
5156
|
readonly applyDisabled: _angular_core.InputSignal<boolean>;
|
|
5157
5157
|
/** Tamaño de los botones. Default 'small' (Figma: p-8px/radius-8 = size small). */
|
|
5158
|
-
readonly size: _angular_core.InputSignal<"
|
|
5158
|
+
readonly size: _angular_core.InputSignal<"medium" | "small">;
|
|
5159
5159
|
readonly clear: _angular_core.OutputEmitterRef<void>;
|
|
5160
5160
|
readonly apply: _angular_core.OutputEmitterRef<void>;
|
|
5161
5161
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiFilterPanelFooter, never>;
|
|
@@ -5591,7 +5591,7 @@ declare class SuiImageUpload {
|
|
|
5591
5591
|
* (matchea el escalado del contenedor 32→40 en SCSS). */
|
|
5592
5592
|
protected readonly iconSize: _angular_core.Signal<20 | 16>;
|
|
5593
5593
|
protected readonly hasSrc: _angular_core.Signal<boolean>;
|
|
5594
|
-
protected readonly state: _angular_core.Signal<"
|
|
5594
|
+
protected readonly state: _angular_core.Signal<"filled" | "disabled" | "dragover" | "empty">;
|
|
5595
5595
|
protected readonly resolvedTitle: _angular_core.Signal<string>;
|
|
5596
5596
|
protected readonly resolvedSubtitle: _angular_core.Signal<string>;
|
|
5597
5597
|
onHostClick(): void;
|
|
@@ -6979,7 +6979,7 @@ declare class SuiNotification {
|
|
|
6979
6979
|
readonly dismissible: _angular_core.InputSignal<boolean>;
|
|
6980
6980
|
readonly unread: _angular_core.InputSignal<boolean>;
|
|
6981
6981
|
/** Item body type. 'basic' keeps the legacy/alert layout (no body slot). */
|
|
6982
|
-
readonly type: _angular_core.InputSignal<"
|
|
6982
|
+
readonly type: _angular_core.InputSignal<"file" | "button" | "basic" | "message">;
|
|
6983
6983
|
/** When true, item paints the Figma hover bg + reveals the more-2-line button. */
|
|
6984
6984
|
readonly showMore: _angular_core.InputSignal<boolean>;
|
|
6985
6985
|
/** Forces the hover affordance visible (e.g. keyboard-focused row). */
|
|
@@ -7631,7 +7631,7 @@ declare class SuiRadioCard implements ControlValueAccessor {
|
|
|
7631
7631
|
readonly size: _angular_core.InputSignal<SuiRadioSize>;
|
|
7632
7632
|
/** Lado en px del radio según size: medium 20 · large 24 · xlarge 28. Los
|
|
7633
7633
|
* insets internos (bg/box) son % → escalan solos. */
|
|
7634
|
-
readonly radioPx: _angular_core.Signal<
|
|
7634
|
+
readonly radioPx: _angular_core.Signal<20 | 24 | 28>;
|
|
7635
7635
|
/** Valor del radio (requerido para uso en grupo). */
|
|
7636
7636
|
readonly value: _angular_core.InputSignal<string>;
|
|
7637
7637
|
/** Título principal del card (label de la fila Title). */
|
|
@@ -7650,7 +7650,7 @@ declare class SuiRadioCard implements ControlValueAccessor {
|
|
|
7650
7650
|
* Emoji del catálogo SUI_EMOJI_MAP — alternativa a icon para type='left-icon'.
|
|
7651
7651
|
* Si ambos están, icon tiene precedencia.
|
|
7652
7652
|
*/
|
|
7653
|
-
readonly emoji: _angular_core.InputSignal<"
|
|
7653
|
+
readonly emoji: _angular_core.InputSignal<"warning" | "label" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "package" | "receipt" | "money-bag" | "money-with-wings" | "shopping-cart" | "shopping-bags" | "card-index-dividers" | "bell" | "bell-with-slash" | "pushpin" | "mobile-phone" | "gear" | "locked" | "unlocked" | "wrench" | "hammer" | "magnifying-glass-tilted-left" | "spiral-calendar" | "bar-chart" | "delivery-truck" | "motorcycle" | "rocket" | "house" | "office-building" | "shop" | "dollar-banknote" | "glowing-star" | "kick-scooter" | "check-mark" | "check-mark-button" | "cross-mark" | "no-entry" | "sparkles" | "party-popper" | "waving-hand" | "thumbs-up" | "clapping-hands" | "handshake" | "busts-in-silhouette" | "pizza" | "hamburger" | "taco" | "birthday-cake" | null>;
|
|
7654
7654
|
/**
|
|
7655
7655
|
* URL directa al emoji para type='left-icon'. Útil cuando el consumer ya tiene
|
|
7656
7656
|
* la URL (ej. FLUENT_EMOJI map del proyecto) y no quiere registrar el emoji
|
|
@@ -8691,7 +8691,7 @@ declare class SuiStatusBadge {
|
|
|
8691
8691
|
*/
|
|
8692
8692
|
readonly withDot: _angular_core.InputSignal<boolean>;
|
|
8693
8693
|
/** Icono Remix mapeado al status. Solo se usa cuando withDot=false. */
|
|
8694
|
-
readonly iconName: _angular_core.Signal<"
|
|
8694
|
+
readonly iconName: _angular_core.Signal<"checkbox-circle-fill" | "alert-fill" | "error-warning-fill" | "information-fill" | "forbid-fill">;
|
|
8695
8695
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiStatusBadge, never>;
|
|
8696
8696
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiStatusBadge, "sui-status-badge", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "withDot": { "alias": "withDot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
8697
8697
|
}
|
|
@@ -8993,7 +8993,7 @@ declare class SuiSwitchCard implements ControlValueAccessor {
|
|
|
8993
8993
|
* `<sui-icon>` proyectado vía `[sui-switch-card-leading]` y se renderiza
|
|
8994
8994
|
* con las MISMAS dimensiones (20×20 dentro del círculo de 40px).
|
|
8995
8995
|
*/
|
|
8996
|
-
readonly emoji: _angular_core.InputSignal<"
|
|
8996
|
+
readonly emoji: _angular_core.InputSignal<"warning" | "label" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "package" | "receipt" | "money-bag" | "money-with-wings" | "shopping-cart" | "shopping-bags" | "card-index-dividers" | "bell" | "bell-with-slash" | "pushpin" | "mobile-phone" | "gear" | "locked" | "unlocked" | "wrench" | "hammer" | "magnifying-glass-tilted-left" | "spiral-calendar" | "bar-chart" | "delivery-truck" | "motorcycle" | "rocket" | "house" | "office-building" | "shop" | "dollar-banknote" | "glowing-star" | "kick-scooter" | "check-mark" | "check-mark-button" | "cross-mark" | "no-entry" | "sparkles" | "party-popper" | "waving-hand" | "thumbs-up" | "clapping-hands" | "handshake" | "busts-in-silhouette" | "pizza" | "hamburger" | "taco" | "birthday-cake" | null>;
|
|
8997
8997
|
/**
|
|
8998
8998
|
* URL de imagen para type='avatar' — se renderiza con sui-avatar size=lg
|
|
8999
8999
|
* (40×40 redonda). Si la imagen falla, fallback automático a iniciales del
|
|
@@ -10306,7 +10306,7 @@ declare class SuiTimePicker implements ControlValueAccessor {
|
|
|
10306
10306
|
readonly error: _angular_core.InputSignal<boolean>;
|
|
10307
10307
|
readonly placeholder: _angular_core.InputSignal<string>;
|
|
10308
10308
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
10309
|
-
readonly size: _angular_core.InputSignal<"
|
|
10309
|
+
readonly size: _angular_core.InputSignal<"medium" | "small">;
|
|
10310
10310
|
/** Formato de display: '12h' (AM/PM) o '24h'. */
|
|
10311
10311
|
readonly format: _angular_core.InputSignal<SuiTimeFormat>;
|
|
10312
10312
|
/** Incremento de minutos de la lista (1, 5, 15, ...). Default 5. */
|