@raintonic/formaui 0.2.0 → 0.3.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 +104 -7
- package/LICENSE +21 -0
- package/README.md +199 -145
- package/fesm2022/raintonic-formaui-cdk-drag-drop.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-cdk-form-field.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-cdk-overlay.mjs +0 -26
- package/fesm2022/raintonic-formaui-cdk-overlay.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-cdk-virtual-scroll.mjs +2 -2
- package/fesm2022/raintonic-formaui-cdk-virtual-scroll.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-accordion.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-accordion.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-alert.mjs +24 -5
- package/fesm2022/raintonic-formaui-components-alert.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-autocomplete.mjs +38 -9
- package/fesm2022/raintonic-formaui-components-autocomplete.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-avatar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-badge.mjs +45 -31
- package/fesm2022/raintonic-formaui-components-badge.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-big-menu.mjs +23 -5
- package/fesm2022/raintonic-formaui-components-big-menu.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-breadcrumb.mjs +24 -7
- package/fesm2022/raintonic-formaui-components-breadcrumb.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-button-group.mjs +6 -6
- package/fesm2022/raintonic-formaui-components-button-group.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-button.mjs +63 -17
- package/fesm2022/raintonic-formaui-components-button.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-card.mjs +8 -8
- package/fesm2022/raintonic-formaui-components-card.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-checkbox.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-checkbox.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-data-table.mjs +67 -9
- package/fesm2022/raintonic-formaui-components-data-table.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-date-picker.mjs +63 -16
- package/fesm2022/raintonic-formaui-components-date-picker.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-divider.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-divider.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-drawer.mjs +19 -4
- package/fesm2022/raintonic-formaui-components-drawer.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-empty-state.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-empty-state.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-file-upload.mjs +25 -5
- package/fesm2022/raintonic-formaui-components-file-upload.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-form-field.mjs +21 -6
- package/fesm2022/raintonic-formaui-components-form-field.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-icon.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-icon.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-input.mjs +1 -1
- package/fesm2022/raintonic-formaui-components-input.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-list.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-list.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-menu.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-menu.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-number-input.mjs +20 -5
- package/fesm2022/raintonic-formaui-components-number-input.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-paginator.mjs +27 -7
- package/fesm2022/raintonic-formaui-components-paginator.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-password-input.mjs +23 -5
- package/fesm2022/raintonic-formaui-components-password-input.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-popover.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-popover.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-progressbar.mjs +32 -7
- package/fesm2022/raintonic-formaui-components-progressbar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-radio.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-radio.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-select.mjs +41 -26
- package/fesm2022/raintonic-formaui-components-select.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-side-panel.mjs +19 -4
- package/fesm2022/raintonic-formaui-components-side-panel.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-sidebar.mjs +23 -5
- package/fesm2022/raintonic-formaui-components-sidebar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-skeleton.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-skeleton.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-slider.mjs +23 -5
- package/fesm2022/raintonic-formaui-components-slider.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-spinner.mjs +24 -7
- package/fesm2022/raintonic-formaui-components-spinner.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-stepper.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-stepper.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tab.mjs +10 -10
- package/fesm2022/raintonic-formaui-components-tab.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tag.mjs +21 -4
- package/fesm2022/raintonic-formaui-components-tag.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-time-picker.mjs +26 -7
- package/fesm2022/raintonic-formaui-components-time-picker.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-toggle.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-toggle.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-toolbar.mjs +41 -7
- package/fesm2022/raintonic-formaui-components-toolbar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tooltip.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-tooltip.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tree-select.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-tree-select.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tree-table.mjs +35 -6
- package/fesm2022/raintonic-formaui-components-tree-table.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tree.mjs +25 -7
- package/fesm2022/raintonic-formaui-components-tree.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-core.mjs +25 -1
- package/fesm2022/raintonic-formaui-core.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-services-dialog.mjs +37 -37
- package/fesm2022/raintonic-formaui-services-dialog.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-services-notification.mjs +2 -2
- package/fesm2022/raintonic-formaui-services-notification.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-services-theme.mjs +3 -3
- package/fesm2022/raintonic-formaui-services-theme.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-test-utils.mjs +21 -16
- package/fesm2022/raintonic-formaui-test-utils.mjs.map +1 -1
- package/fesm2022/raintonic-formaui.mjs +1 -1
- package/fesm2022/raintonic-formaui.mjs.map +1 -1
- package/llms-full.txt +36 -122
- package/llms.txt +4 -5
- package/package.json +1 -5
- package/styles/index.scss +5 -5
- package/styles/partials/_motion.scss +25 -0
- package/styles/partials/_theme.scss +6 -5
- package/styles/partials/components/_button.scss +361 -0
- package/styles/partials/components/_dialog.scss +180 -0
- package/styles/partials/components/_overlay.scss +87 -0
- package/styles/partials/themes/_dark.scss +14 -0
- package/styles/partials/themes/_light.scss +14 -0
- package/types/raintonic-formaui-cdk-overlay.d.ts +0 -1
- package/types/raintonic-formaui-cdk-overlay.d.ts.map +1 -1
- package/types/raintonic-formaui-components-alert.d.ts +11 -1
- package/types/raintonic-formaui-components-alert.d.ts.map +1 -1
- package/types/raintonic-formaui-components-autocomplete.d.ts +25 -7
- package/types/raintonic-formaui-components-autocomplete.d.ts.map +1 -1
- package/types/raintonic-formaui-components-badge.d.ts +20 -9
- package/types/raintonic-formaui-components-badge.d.ts.map +1 -1
- package/types/raintonic-formaui-components-big-menu.d.ts +12 -1
- package/types/raintonic-formaui-components-big-menu.d.ts.map +1 -1
- package/types/raintonic-formaui-components-breadcrumb.d.ts +11 -2
- package/types/raintonic-formaui-components-breadcrumb.d.ts.map +1 -1
- package/types/raintonic-formaui-components-button-group.d.ts +6 -6
- package/types/raintonic-formaui-components-button.d.ts +9 -7
- package/types/raintonic-formaui-components-button.d.ts.map +1 -1
- package/types/raintonic-formaui-components-card.d.ts +4 -4
- package/types/raintonic-formaui-components-checkbox.d.ts +1 -1
- package/types/raintonic-formaui-components-data-table.d.ts +56 -16
- package/types/raintonic-formaui-components-data-table.d.ts.map +1 -1
- package/types/raintonic-formaui-components-date-picker.d.ts +32 -4
- package/types/raintonic-formaui-components-date-picker.d.ts.map +1 -1
- package/types/raintonic-formaui-components-drawer.d.ts +10 -1
- package/types/raintonic-formaui-components-drawer.d.ts.map +1 -1
- package/types/raintonic-formaui-components-file-upload.d.ts +12 -1
- package/types/raintonic-formaui-components-file-upload.d.ts.map +1 -1
- package/types/raintonic-formaui-components-form-field.d.ts +12 -2
- package/types/raintonic-formaui-components-form-field.d.ts.map +1 -1
- package/types/raintonic-formaui-components-input.d.ts +1 -1
- package/types/raintonic-formaui-components-number-input.d.ts +11 -2
- package/types/raintonic-formaui-components-number-input.d.ts.map +1 -1
- package/types/raintonic-formaui-components-paginator.d.ts +13 -1
- package/types/raintonic-formaui-components-paginator.d.ts.map +1 -1
- package/types/raintonic-formaui-components-password-input.d.ts +12 -2
- package/types/raintonic-formaui-components-password-input.d.ts.map +1 -1
- package/types/raintonic-formaui-components-progressbar.d.ts +14 -1
- package/types/raintonic-formaui-components-progressbar.d.ts.map +1 -1
- package/types/raintonic-formaui-components-select.d.ts.map +1 -1
- package/types/raintonic-formaui-components-side-panel.d.ts +10 -1
- package/types/raintonic-formaui-components-side-panel.d.ts.map +1 -1
- package/types/raintonic-formaui-components-sidebar.d.ts +12 -1
- package/types/raintonic-formaui-components-sidebar.d.ts.map +1 -1
- package/types/raintonic-formaui-components-slider.d.ts +12 -1
- package/types/raintonic-formaui-components-slider.d.ts.map +1 -1
- package/types/raintonic-formaui-components-spinner.d.ts +12 -2
- package/types/raintonic-formaui-components-spinner.d.ts.map +1 -1
- package/types/raintonic-formaui-components-tag.d.ts +10 -1
- package/types/raintonic-formaui-components-tag.d.ts.map +1 -1
- package/types/raintonic-formaui-components-time-picker.d.ts +14 -2
- package/types/raintonic-formaui-components-time-picker.d.ts.map +1 -1
- package/types/raintonic-formaui-components-toggle.d.ts +1 -1
- package/types/raintonic-formaui-components-toolbar.d.ts +22 -4
- package/types/raintonic-formaui-components-toolbar.d.ts.map +1 -1
- package/types/raintonic-formaui-components-tree-table.d.ts +29 -4
- package/types/raintonic-formaui-components-tree-table.d.ts.map +1 -1
- package/types/raintonic-formaui-components-tree.d.ts +12 -1
- package/types/raintonic-formaui-components-tree.d.ts.map +1 -1
- package/types/raintonic-formaui-core.d.ts +19 -2
- package/types/raintonic-formaui-core.d.ts.map +1 -1
- package/types/raintonic-formaui-services-dialog.d.ts +1 -1
- package/types/raintonic-formaui-services-theme.d.ts +3 -3
- package/types/raintonic-formaui-test-utils.d.ts +15 -2
- package/types/raintonic-formaui-test-utils.d.ts.map +1 -1
- package/types/raintonic-formaui.d.ts +1 -1
- package/fesm2022/raintonic-formaui-components-dynamic-form.mjs +0 -266
- package/fesm2022/raintonic-formaui-components-dynamic-form.mjs.map +0 -1
- package/types/raintonic-formaui-components-dynamic-form.d.ts +0 -412
- package/types/raintonic-formaui-components-dynamic-form.d.ts.map +0 -1
|
@@ -18,9 +18,9 @@ import { input, inject, ElementRef, Renderer2, effect, ViewEncapsulation, Change
|
|
|
18
18
|
* ### Basic Button Group
|
|
19
19
|
* ```html
|
|
20
20
|
* <fui-button-group>
|
|
21
|
-
* <button fuiButton variant="
|
|
22
|
-
* <button fuiButton variant="
|
|
23
|
-
* <button fuiButton variant="
|
|
21
|
+
* <button fuiButton variant="secondary">Left</button>
|
|
22
|
+
* <button fuiButton variant="secondary">Center</button>
|
|
23
|
+
* <button fuiButton variant="secondary">Right</button>
|
|
24
24
|
* </fui-button-group>
|
|
25
25
|
* ```
|
|
26
26
|
*
|
|
@@ -34,9 +34,9 @@ import { input, inject, ElementRef, Renderer2, effect, ViewEncapsulation, Change
|
|
|
34
34
|
* imports: [FuiButtonGroupComponent, FuiButtonDirective],
|
|
35
35
|
* template: `
|
|
36
36
|
* <fui-button-group>
|
|
37
|
-
* <button fuiButton variant="
|
|
38
|
-
* <button fuiButton variant="
|
|
39
|
-
* <button fuiButton variant="
|
|
37
|
+
* <button fuiButton variant="secondary">Option 1</button>
|
|
38
|
+
* <button fuiButton variant="secondary">Option 2</button>
|
|
39
|
+
* <button fuiButton variant="secondary">Option 3</button>
|
|
40
40
|
* </fui-button-group>
|
|
41
41
|
* `
|
|
42
42
|
* })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"raintonic-formaui-components-button-group.mjs","sources":["../../../lib/components/button-group/button-group.component.ts","../../../lib/components/button-group/raintonic-formaui-components-button-group.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n AfterContentInit,\n ElementRef,\n Renderer2,\n inject,\n effect,\n input,\n} from '@angular/core';\n\n/**\n * # Button Group Component\n *\n * A container component that groups multiple buttons together, creating a unified\n * visual element with connected borders. Follows Carbon Design System patterns.\n *\n * ## Features\n * - Groups multiple buttons into a single visual unit\n * - Removes internal border-radius, keeping only the extremities rounded\n * - Surface-02 background with small padding\n * - Automatically handles button border-radius for first and last buttons\n *\n * ## Usage\n *\n * ### Basic Button Group\n * ```html\n * <fui-button-group>\n * <button fuiButton variant=\"
|
|
1
|
+
{"version":3,"file":"raintonic-formaui-components-button-group.mjs","sources":["../../../lib/components/button-group/button-group.component.ts","../../../lib/components/button-group/raintonic-formaui-components-button-group.ts"],"sourcesContent":["import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ViewEncapsulation,\r\n AfterContentInit,\r\n ElementRef,\r\n Renderer2,\r\n inject,\r\n effect,\r\n input,\r\n} from '@angular/core';\r\n\r\n/**\r\n * # Button Group Component\r\n *\r\n * A container component that groups multiple buttons together, creating a unified\r\n * visual element with connected borders. Follows Carbon Design System patterns.\r\n *\r\n * ## Features\r\n * - Groups multiple buttons into a single visual unit\r\n * - Removes internal border-radius, keeping only the extremities rounded\r\n * - Surface-02 background with small padding\r\n * - Automatically handles button border-radius for first and last buttons\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Button Group\r\n * ```html\r\n * <fui-button-group>\r\n * <button fuiButton variant=\"secondary\">Left</button>\r\n * <button fuiButton variant=\"secondary\">Center</button>\r\n * <button fuiButton variant=\"secondary\">Right</button>\r\n * </fui-button-group>\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * import { FuiButtonGroupComponent } from '@raintonic/formaui/components/button-group';\r\n * import { FuiButtonDirective } from '@raintonic/formaui/components/button';\r\n *\r\n * @Component({\r\n * standalone: true,\r\n * imports: [FuiButtonGroupComponent, FuiButtonDirective],\r\n * template: `\r\n * <fui-button-group>\r\n * <button fuiButton variant=\"secondary\">Option 1</button>\r\n * <button fuiButton variant=\"secondary\">Option 2</button>\r\n * <button fuiButton variant=\"secondary\">Option 3</button>\r\n * </fui-button-group>\r\n * `\r\n * })\r\n * export class MyComponent {}\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-button-group',\r\n standalone: true,\r\n template: `<ng-content></ng-content>`,\r\n styleUrls: ['./button-group.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-button-group',\r\n role: 'group',\r\n '[attr.aria-label]': 'ariaLabel()',\r\n },\r\n})\r\nexport class FuiButtonGroupComponent implements AfterContentInit {\r\n /**\r\n * Accessible label for the button group\r\n */\r\n readonly ariaLabel = input<string | undefined>(undefined);\r\n\r\n private readonly _elementRef = inject(ElementRef);\r\n private readonly _renderer = inject(Renderer2);\r\n\r\n constructor() {\r\n // Set up an effect to handle dynamic button changes\r\n effect(() => {\r\n this._updateButtonStyles();\r\n });\r\n }\r\n\r\n ngAfterContentInit(): void {\r\n this._updateButtonStyles();\r\n }\r\n\r\n private _updateButtonStyles(): void {\r\n const hostElement = this._elementRef.nativeElement as HTMLElement;\r\n const buttons = hostElement.querySelectorAll('[fuiButton]');\r\n\r\n buttons.forEach((button, index) => {\r\n // Remove all position classes first\r\n this._renderer.removeClass(button, 'fui-button-group__button--first');\r\n this._renderer.removeClass(button, 'fui-button-group__button--middle');\r\n this._renderer.removeClass(button, 'fui-button-group__button--last');\r\n this._renderer.removeClass(button, 'fui-button-group__button--only');\r\n\r\n // Add appropriate class based on position\r\n if (buttons.length === 1) {\r\n this._renderer.addClass(button, 'fui-button-group__button--only');\r\n } else if (index === 0) {\r\n this._renderer.addClass(button, 'fui-button-group__button--first');\r\n } else if (index === buttons.length - 1) {\r\n this._renderer.addClass(button, 'fui-button-group__button--last');\r\n } else {\r\n this._renderer.addClass(button, 'fui-button-group__button--middle');\r\n }\r\n });\r\n }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCG;MAcU,uBAAuB,CAAA;AAClC;;AAEG;AACM,IAAA,SAAS,GAAG,KAAK,CAAqB,SAAS,gFAAC;AAExC,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AAChC,IAAA,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;AAE9C,IAAA,WAAA,GAAA;;QAEE,MAAM,CAAC,MAAK;YACV,IAAI,CAAC,mBAAmB,EAAE;AAC5B,QAAA,CAAC,CAAC;IACJ;IAEA,kBAAkB,GAAA;QAChB,IAAI,CAAC,mBAAmB,EAAE;IAC5B;IAEQ,mBAAmB,GAAA;AACzB,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,aAA4B;QACjE,MAAM,OAAO,GAAG,WAAW,CAAC,gBAAgB,CAAC,aAAa,CAAC;QAE3D,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,KAAK,KAAI;;YAEhC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,iCAAiC,CAAC;YACrE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,kCAAkC,CAAC;YACtE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,gCAAgC,CAAC;YACpE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,gCAAgC,CAAC;;AAGpE,YAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;gBACxB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,gCAAgC,CAAC;YACnE;AAAO,iBAAA,IAAI,KAAK,KAAK,CAAC,EAAE;gBACtB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,iCAAiC,CAAC;YACpE;iBAAO,IAAI,KAAK,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;gBACvC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,gCAAgC,CAAC;YACnE;iBAAO;gBACL,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,kCAAkC,CAAC;YACrE;AACF,QAAA,CAAC,CAAC;IACJ;uGA1CW,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAvB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,6VAVxB,CAAA,yBAAA,CAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,yhBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAU1B,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAbnC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,UAAA,EAChB,IAAI,EAAA,QAAA,EACN,CAAA,yBAAA,CAA2B,EAAA,eAAA,EAEpB,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,kBAAkB;AACzB,wBAAA,IAAI,EAAE,OAAO;AACb,wBAAA,mBAAmB,EAAE,aAAa;AACnC,qBAAA,EAAA,MAAA,EAAA,CAAA,yhBAAA,CAAA,EAAA;;;ACjEH;;AAEG;;;;"}
|
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { input, booleanAttribute, computed, inject, ElementRef, Renderer2, effect, HostListener, Directive } from '@angular/core';
|
|
3
3
|
|
|
4
|
-
const FUI_BUTTON_VARIANTS = [
|
|
4
|
+
const FUI_BUTTON_VARIANTS = [
|
|
5
|
+
'primary',
|
|
6
|
+
'secondary',
|
|
7
|
+
'tertiary',
|
|
8
|
+
'tertiary-violet',
|
|
9
|
+
'link',
|
|
10
|
+
'destructive',
|
|
11
|
+
];
|
|
5
12
|
const FUI_BUTTON_SIZES = ['sm', 'md', 'lg', 'xl', '2xl'];
|
|
6
13
|
/**
|
|
7
14
|
* # Button Directive
|
|
@@ -10,8 +17,8 @@ const FUI_BUTTON_SIZES = ['sm', 'md', 'lg', 'xl', '2xl'];
|
|
|
10
17
|
* Follows Carbon Design System patterns with full accessibility support.
|
|
11
18
|
*
|
|
12
19
|
* ## Features
|
|
13
|
-
* - Multiple variants: primary, secondary,
|
|
14
|
-
* -
|
|
20
|
+
* - Multiple variants: primary, secondary, tertiary, tertiary-violet, link, destructive
|
|
21
|
+
* - Five sizes: sm, md, lg, xl, 2xl
|
|
15
22
|
* - Full accessibility support (ARIA attributes, keyboard navigation)
|
|
16
23
|
* - Loading and disabled states
|
|
17
24
|
* - Icon support with proper spacing
|
|
@@ -21,7 +28,7 @@ const FUI_BUTTON_SIZES = ['sm', 'md', 'lg', 'xl', '2xl'];
|
|
|
21
28
|
*
|
|
22
29
|
* ### Link Button
|
|
23
30
|
* ```html
|
|
24
|
-
* <a fuiButton href="/dashboard" variant="
|
|
31
|
+
* <a fuiButton href="/dashboard" variant="tertiary">Go to Dashboard</a>
|
|
25
32
|
* ```
|
|
26
33
|
*
|
|
27
34
|
* @example
|
|
@@ -104,6 +111,7 @@ class FuiButtonDirective {
|
|
|
104
111
|
}, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
|
|
105
112
|
_elementRef = inject(ElementRef);
|
|
106
113
|
_renderer = inject(Renderer2);
|
|
114
|
+
_leadingSlot = null;
|
|
107
115
|
// Element kind guards
|
|
108
116
|
get isButton() {
|
|
109
117
|
return this._elementRef.nativeElement.tagName.toLowerCase() === 'button';
|
|
@@ -115,19 +123,32 @@ class FuiButtonDirective {
|
|
|
115
123
|
// Manage loading spinner and anchor href disabled-state together
|
|
116
124
|
effect(() => {
|
|
117
125
|
if (this.loading()) {
|
|
118
|
-
this.
|
|
126
|
+
this._fillLeadingSlot();
|
|
119
127
|
}
|
|
120
128
|
else {
|
|
121
|
-
this.
|
|
129
|
+
this._clearLeadingSlot();
|
|
122
130
|
}
|
|
123
131
|
this._syncAnchorHrefDisabledState();
|
|
124
132
|
});
|
|
133
|
+
// Keep the native `type` attribute in sync with the `type` input signal.
|
|
134
|
+
// No-op for anchor elements (guarded by `this.isButton`).
|
|
135
|
+
effect(() => {
|
|
136
|
+
if (this.isButton) {
|
|
137
|
+
this._renderer.setAttribute(this._elementRef.nativeElement, 'type', this.type());
|
|
138
|
+
}
|
|
139
|
+
});
|
|
125
140
|
}
|
|
126
141
|
ngAfterViewInit() {
|
|
127
|
-
// Ensure explicit type for native buttons to prevent accidental form submit
|
|
128
142
|
const el = this._elementRef.nativeElement;
|
|
129
|
-
|
|
130
|
-
|
|
143
|
+
// Create the permanent leading slot (spinner target) as the first child.
|
|
144
|
+
const slot = this._renderer.createElement('span');
|
|
145
|
+
this._renderer.addClass(slot, 'fui-button__leading');
|
|
146
|
+
this._renderer.setAttribute(slot, 'aria-hidden', 'true');
|
|
147
|
+
this._renderer.insertBefore(el, slot, el.firstChild);
|
|
148
|
+
this._leadingSlot = slot;
|
|
149
|
+
// If loading was true before view init, fill the slot now.
|
|
150
|
+
if (this.loading()) {
|
|
151
|
+
this._fillLeadingSlot();
|
|
131
152
|
}
|
|
132
153
|
}
|
|
133
154
|
onClick(event) {
|
|
@@ -136,6 +157,7 @@ class FuiButtonDirective {
|
|
|
136
157
|
event.stopPropagation();
|
|
137
158
|
return;
|
|
138
159
|
}
|
|
160
|
+
this._spawnRipple(event);
|
|
139
161
|
}
|
|
140
162
|
onKeydown(event) {
|
|
141
163
|
if (this.disabled() || this.loading()) {
|
|
@@ -163,25 +185,49 @@ class FuiButtonDirective {
|
|
|
163
185
|
this._elementRef.nativeElement.click();
|
|
164
186
|
}
|
|
165
187
|
}
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
188
|
+
_fillLeadingSlot() {
|
|
189
|
+
if (!this._leadingSlot)
|
|
190
|
+
return;
|
|
191
|
+
// Idempotence guard
|
|
192
|
+
if (this._leadingSlot.querySelector('.fui-button__spinner'))
|
|
169
193
|
return;
|
|
170
194
|
const spinner = this._renderer.createElement('fui-icon');
|
|
171
195
|
this._renderer.addClass(spinner, 'fui-button__spinner');
|
|
172
196
|
this._renderer.setAttribute(spinner, 'aria-hidden', 'true');
|
|
173
|
-
// Add spinner icon
|
|
174
197
|
const spinnerIcon = this._renderer.createElement('span');
|
|
175
198
|
this._renderer.addClass(spinnerIcon, 'fui-button__spinner-icon');
|
|
176
199
|
this._renderer.appendChild(spinner, spinnerIcon);
|
|
177
|
-
this._renderer.appendChild(this.
|
|
200
|
+
this._renderer.appendChild(this._leadingSlot, spinner);
|
|
178
201
|
}
|
|
179
|
-
|
|
180
|
-
|
|
202
|
+
_clearLeadingSlot() {
|
|
203
|
+
if (!this._leadingSlot)
|
|
204
|
+
return;
|
|
205
|
+
const spinner = this._leadingSlot.querySelector('.fui-button__spinner');
|
|
181
206
|
if (spinner) {
|
|
182
|
-
this._renderer.removeChild(this.
|
|
207
|
+
this._renderer.removeChild(this._leadingSlot, spinner);
|
|
183
208
|
}
|
|
184
209
|
}
|
|
210
|
+
_spawnRipple(event) {
|
|
211
|
+
const host = this._elementRef.nativeElement;
|
|
212
|
+
const rect = host.getBoundingClientRect();
|
|
213
|
+
// Diameter covers the farthest corner from the click point
|
|
214
|
+
const size = Math.max(rect.width, rect.height) * 2;
|
|
215
|
+
// Fallback to center for keyboard-synthesized clicks (clientX/Y === 0)
|
|
216
|
+
const hasCoords = event.clientX !== 0 || event.clientY !== 0;
|
|
217
|
+
const x = (hasCoords ? event.clientX - rect.left : rect.width / 2) - size / 2;
|
|
218
|
+
const y = (hasCoords ? event.clientY - rect.top : rect.height / 2) - size / 2;
|
|
219
|
+
const ripple = this._renderer.createElement('span');
|
|
220
|
+
this._renderer.addClass(ripple, 'fui-button__ripple');
|
|
221
|
+
this._renderer.setAttribute(ripple, 'aria-hidden', 'true');
|
|
222
|
+
this._renderer.setStyle(ripple, 'width', `${size}px`);
|
|
223
|
+
this._renderer.setStyle(ripple, 'height', `${size}px`);
|
|
224
|
+
this._renderer.setStyle(ripple, 'left', `${x}px`);
|
|
225
|
+
this._renderer.setStyle(ripple, 'top', `${y}px`);
|
|
226
|
+
ripple.addEventListener('animationend', () => {
|
|
227
|
+
this._renderer.removeChild(host, ripple);
|
|
228
|
+
}, { once: true });
|
|
229
|
+
this._renderer.appendChild(host, ripple);
|
|
230
|
+
}
|
|
185
231
|
_syncAnchorHrefDisabledState() {
|
|
186
232
|
const el = this._elementRef.nativeElement;
|
|
187
233
|
if (!this.isAnchor)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"raintonic-formaui-components-button.mjs","sources":["../../../lib/components/button/button.directive.ts","../../../lib/components/button/raintonic-formaui-components-button.ts"],"sourcesContent":["import {\n Directive,\n ElementRef,\n Renderer2,\n input,\n computed,\n effect,\n HostListener,\n inject,\n Signal,\n AfterViewInit,\n booleanAttribute,\n} from '@angular/core';\n\n/**\n * Available button variants following Carbon Design System patterns\n */\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'danger' | 'link' | 'icon';\n\n/**\n * Available button sizes\n */\nexport type ButtonSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\nexport const FUI_BUTTON_VARIANTS = ['primary', 'secondary', 'ghost', 'outline', 'danger', 'link', 'icon'] as const;\nexport const FUI_BUTTON_SIZES = ['sm', 'md', 'lg', 'xl', '2xl'] as const;\n\nexport type ButtonType = 'button' | 'submit' | 'reset';\n\n/**\n * # Button Directive\n *\n * A versatile button directive that can be applied to both `<button>` and `<a>` elements.\n * Follows Carbon Design System patterns with full accessibility support.\n *\n * ## Features\n * - Multiple variants: primary, secondary,ghost, outline, danger, link\n * - Six sizes: sm, md, lg, xl, 2xl, field\n * - Full accessibility support (ARIA attributes, keyboard navigation)\n * - Loading and disabled states\n * - Icon support with proper spacing\n * - Full-width option\n * - Works with both button and anchor elements\n *\n *\n * ### Link Button\n * ```html\n * <a fuiButton href=\"/dashboard\" variant=\"ghost\">Go to Dashboard</a>\n * ```\n *\n * @example\n * ```typescript\n * import { FuiButtonDirective } from '@raintonic/formaui/components/button';\n *\n * @Component({\n * standalone: true,\n * imports: [FuiButtonDirective],\n * template: `\n * <button fuiButton variant=\"primary\" (click)=\"save()\">\n * Save Changes\n * </button>\n * `\n * })\n * export class MyComponent {\n * save() {\n * // Handle save action\n * }\n * }\n * ```\n */\n@Directive({\n selector: 'button[fuiButton], a[fuiButton]',\n standalone: true,\n host: {\n '[class]': 'computedClasses()',\n // Use attribute binding for boolean disabled; valid on <button>, ignored on <a>\n '[attr.disabled]': 'isButton && (disabled() || loading()) ? \"\" : null',\n // ARIA: present only when true\n '[attr.aria-disabled]': '(disabled() || loading()) ? \"true\" : null',\n '[attr.aria-busy]': 'loading() ? \"true\" : null',\n '[attr.aria-label]': 'ariaLabel()',\n '[attr.aria-live]': 'loading() ? \"polite\" : null',\n // For anchors, provide role and manage tabindex\n '[attr.role]': 'isAnchor ? \"button\" : null',\n '[attr.tabindex]': 'isAnchor && (disabled() || loading()) ? \"-1\" : null',\n // Optionally prevent interactions for anchors when disabled/loading\n '[style.pointer-events]': 'isAnchor && (disabled() || loading()) ? \"none\" : null',\n },\n})\nexport class FuiButtonDirective implements AfterViewInit {\n /**\n * Button variant that determines the color scheme\n * @default 'primary'\n */\n readonly variant = input<ButtonVariant, ButtonVariant | string>('primary', {\n transform: (v) => ((FUI_BUTTON_VARIANTS as readonly string[]).includes(v) ? (v as ButtonVariant) : 'primary'),\n });\n\n /**\n * Button size\n * @default 'md'\n */\n readonly size = input<ButtonSize, ButtonSize | string>('md', {\n transform: (v) => ((FUI_BUTTON_SIZES as readonly string[]).includes(v) ? (v as ButtonSize) : 'md'),\n });\n\n /**\n * Whether the button is disabled\n * @default false\n */\n readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\n\n /**\n * Whether the button should take full width of its container\n * @default false\n */\n readonly fullWidth = input<boolean, unknown>(false, { transform: booleanAttribute });\n\n /**\n * Whether the button is in loading state\n * @default false\n */\n readonly loading = input<boolean, unknown>(false, { transform: booleanAttribute });\n\n /**\n * Whether the button contains only an icon (for proper padding)\n * @default false\n */\n readonly iconOnly = input<boolean, unknown>(false, { transform: booleanAttribute });\n\n /**\n * Accessible label for icon-only buttons.\n * Required when `iconOnly` is true so screen readers can announce the button's purpose.\n */\n readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\n\n /**\n * Button type for native button elements\n * @default 'button'\n */\n readonly type = input<ButtonType>('button');\n\n // Computed properties\n readonly computedClasses: Signal<string> = computed(() => {\n const classes: string[] = ['fui-button', `fui-button--${this.variant()}`, `fui-button--${this.size()}`];\n\n if (this.disabled()) {\n classes.push('fui-button--disabled');\n }\n\n if (this.fullWidth()) {\n classes.push('fui-button--full-width');\n }\n\n if (this.loading()) {\n classes.push('fui-button--loading');\n }\n\n if (this.iconOnly()) {\n classes.push('fui-button--icon-only');\n }\n\n return classes.join(' ');\n });\n\n private readonly _elementRef: ElementRef<HTMLElement> = inject(ElementRef);\n private readonly _renderer: Renderer2 = inject(Renderer2);\n\n // Element kind guards\n get isButton(): boolean {\n return this._elementRef.nativeElement.tagName.toLowerCase() === 'button';\n }\n get isAnchor(): boolean {\n return this._elementRef.nativeElement.tagName.toLowerCase() === 'a';\n }\n\n constructor() {\n // Manage loading spinner and anchor href disabled-state together\n effect(() => {\n if (this.loading()) {\n this._addLoadingSpinner();\n } else {\n this._removeLoadingSpinner();\n }\n this._syncAnchorHrefDisabledState();\n });\n }\n\n ngAfterViewInit(): void {\n // Ensure explicit type for native buttons to prevent accidental form submit\n const el = this._elementRef.nativeElement;\n if (this.isButton) {\n this._renderer.setAttribute(el, 'type', this.type());\n }\n }\n\n @HostListener('click', ['$event'])\n onClick(event: Event): void {\n if (this.disabled() || this.loading()) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n }\n\n @HostListener('keydown', ['$event'])\n onKeydown(event: Event): void {\n if (this.disabled() || this.loading()) {\n event.preventDefault();\n return;\n }\n\n // Only synthesize activation for anchors\n if (this.isAnchor) {\n const ke = event as KeyboardEvent;\n if (ke.key === 'Enter') {\n event.preventDefault();\n this._elementRef.nativeElement.click();\n } else if (ke.key === ' ') {\n // prevent page scroll; activation handled on keyup\n event.preventDefault();\n }\n }\n }\n\n @HostListener('keyup', ['$event'])\n onKeyup(event: Event): void {\n if (this.disabled() || this.loading()) {\n return;\n }\n if (this.isAnchor && (event as KeyboardEvent).key === ' ') {\n this._elementRef.nativeElement.click();\n }\n }\n\n private _addLoadingSpinner(): void {\n // Prevent duplicate spinner nodes\n if (this._elementRef.nativeElement.querySelector('.fui-icon')) return;\n\n const spinner = this._renderer.createElement('fui-icon');\n this._renderer.addClass(spinner, 'fui-button__spinner');\n this._renderer.setAttribute(spinner, 'aria-hidden', 'true');\n\n // Add spinner icon\n const spinnerIcon = this._renderer.createElement('span');\n this._renderer.addClass(spinnerIcon, 'fui-button__spinner-icon');\n this._renderer.appendChild(spinner, spinnerIcon);\n\n this._renderer.appendChild(this._elementRef.nativeElement, spinner);\n }\n\n private _removeLoadingSpinner(): void {\n const spinner = this._elementRef.nativeElement.querySelector('.fui-button__spinner');\n if (spinner) {\n this._renderer.removeChild(this._elementRef.nativeElement, spinner);\n }\n }\n\n private _syncAnchorHrefDisabledState(): void {\n const el = this._elementRef.nativeElement as HTMLElement & { getAttribute(name: string): string | null };\n if (!this.isAnchor) return;\n const disabledLike = this.disabled() || this.loading();\n const stored = el.getAttribute('data-fuiStoredHref');\n const href = el.getAttribute('href');\n\n if (disabledLike && href) {\n this._renderer.setAttribute(el, 'data-fuiStoredHref', href);\n this._renderer.removeAttribute(el, 'href');\n } else if (!disabledLike && !href && stored) {\n this._renderer.setAttribute(el, 'href', stored);\n this._renderer.removeAttribute(el, 'data-fuiStoredHref');\n }\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"raintonic-formaui-components-button.mjs","sources":["../../../lib/components/button/button.directive.ts","../../../lib/components/button/raintonic-formaui-components-button.ts"],"sourcesContent":["import {\r\n Directive,\r\n ElementRef,\r\n Renderer2,\r\n input,\r\n computed,\r\n effect,\r\n HostListener,\r\n inject,\r\n Signal,\r\n AfterViewInit,\r\n booleanAttribute,\r\n} from '@angular/core';\r\n\r\n/**\r\n * Available button variants following Carbon Design System patterns\r\n */\r\nexport type ButtonVariant =\r\n | 'primary'\r\n | 'secondary'\r\n | 'tertiary'\r\n | 'tertiary-violet'\r\n | 'link'\r\n | 'destructive';\r\n\r\n/**\r\n * Available button sizes\r\n */\r\nexport type ButtonSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';\r\n\r\nexport const FUI_BUTTON_VARIANTS = [\r\n 'primary',\r\n 'secondary',\r\n 'tertiary',\r\n 'tertiary-violet',\r\n 'link',\r\n 'destructive',\r\n] as const;\r\nexport const FUI_BUTTON_SIZES = ['sm', 'md', 'lg', 'xl', '2xl'] as const;\r\n\r\nexport type ButtonType = 'button' | 'submit' | 'reset';\r\n\r\n/**\r\n * # Button Directive\r\n *\r\n * A versatile button directive that can be applied to both `<button>` and `<a>` elements.\r\n * Follows Carbon Design System patterns with full accessibility support.\r\n *\r\n * ## Features\r\n * - Multiple variants: primary, secondary, tertiary, tertiary-violet, link, destructive\r\n * - Five sizes: sm, md, lg, xl, 2xl\r\n * - Full accessibility support (ARIA attributes, keyboard navigation)\r\n * - Loading and disabled states\r\n * - Icon support with proper spacing\r\n * - Full-width option\r\n * - Works with both button and anchor elements\r\n *\r\n *\r\n * ### Link Button\r\n * ```html\r\n * <a fuiButton href=\"/dashboard\" variant=\"tertiary\">Go to Dashboard</a>\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * import { FuiButtonDirective } from '@raintonic/formaui/components/button';\r\n *\r\n * @Component({\r\n * standalone: true,\r\n * imports: [FuiButtonDirective],\r\n * template: `\r\n * <button fuiButton variant=\"primary\" (click)=\"save()\">\r\n * Save Changes\r\n * </button>\r\n * `\r\n * })\r\n * export class MyComponent {\r\n * save() {\r\n * // Handle save action\r\n * }\r\n * }\r\n * ```\r\n */\r\n@Directive({\r\n selector: 'button[fuiButton], a[fuiButton]',\r\n standalone: true,\r\n host: {\r\n '[class]': 'computedClasses()',\r\n // Use attribute binding for boolean disabled; valid on <button>, ignored on <a>\r\n '[attr.disabled]': 'isButton && (disabled() || loading()) ? \"\" : null',\r\n // ARIA: present only when true\r\n '[attr.aria-disabled]': '(disabled() || loading()) ? \"true\" : null',\r\n '[attr.aria-busy]': 'loading() ? \"true\" : null',\r\n '[attr.aria-label]': 'ariaLabel()',\r\n '[attr.aria-live]': 'loading() ? \"polite\" : null',\r\n // For anchors, provide role and manage tabindex\r\n '[attr.role]': 'isAnchor ? \"button\" : null',\r\n '[attr.tabindex]': 'isAnchor && (disabled() || loading()) ? \"-1\" : null',\r\n // Optionally prevent interactions for anchors when disabled/loading\r\n '[style.pointer-events]': 'isAnchor && (disabled() || loading()) ? \"none\" : null',\r\n },\r\n})\r\nexport class FuiButtonDirective implements AfterViewInit {\r\n /**\r\n * Button variant that determines the color scheme\r\n * @default 'primary'\r\n */\r\n readonly variant = input<ButtonVariant, ButtonVariant | string>('primary', {\r\n transform: (v) => ((FUI_BUTTON_VARIANTS as readonly string[]).includes(v) ? (v as ButtonVariant) : 'primary'),\r\n });\r\n\r\n /**\r\n * Button size\r\n * @default 'md'\r\n */\r\n readonly size = input<ButtonSize, ButtonSize | string>('md', {\r\n transform: (v) => ((FUI_BUTTON_SIZES as readonly string[]).includes(v) ? (v as ButtonSize) : 'md'),\r\n });\r\n\r\n /**\r\n * Whether the button is disabled\r\n * @default false\r\n */\r\n readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n\r\n /**\r\n * Whether the button should take full width of its container\r\n * @default false\r\n */\r\n readonly fullWidth = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n\r\n /**\r\n * Whether the button is in loading state\r\n * @default false\r\n */\r\n readonly loading = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n\r\n /**\r\n * Whether the button contains only an icon (for proper padding)\r\n * @default false\r\n */\r\n readonly iconOnly = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n\r\n /**\r\n * Accessible label for icon-only buttons.\r\n * Required when `iconOnly` is true so screen readers can announce the button's purpose.\r\n */\r\n readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\r\n\r\n /**\r\n * Button type for native button elements\r\n * @default 'button'\r\n */\r\n readonly type = input<ButtonType>('button');\r\n\r\n // Computed properties\r\n readonly computedClasses: Signal<string> = computed(() => {\r\n const classes: string[] = ['fui-button', `fui-button--${this.variant()}`, `fui-button--${this.size()}`];\r\n\r\n if (this.disabled()) {\r\n classes.push('fui-button--disabled');\r\n }\r\n\r\n if (this.fullWidth()) {\r\n classes.push('fui-button--full-width');\r\n }\r\n\r\n if (this.loading()) {\r\n classes.push('fui-button--loading');\r\n }\r\n\r\n if (this.iconOnly()) {\r\n classes.push('fui-button--icon-only');\r\n }\r\n\r\n return classes.join(' ');\r\n });\r\n\r\n private readonly _elementRef: ElementRef<HTMLElement> = inject(ElementRef);\r\n private readonly _renderer: Renderer2 = inject(Renderer2);\r\n private _leadingSlot: HTMLElement | null = null;\r\n\r\n // Element kind guards\r\n get isButton(): boolean {\r\n return this._elementRef.nativeElement.tagName.toLowerCase() === 'button';\r\n }\r\n get isAnchor(): boolean {\r\n return this._elementRef.nativeElement.tagName.toLowerCase() === 'a';\r\n }\r\n\r\n constructor() {\r\n // Manage loading spinner and anchor href disabled-state together\r\n effect(() => {\r\n if (this.loading()) {\r\n this._fillLeadingSlot();\r\n } else {\r\n this._clearLeadingSlot();\r\n }\r\n this._syncAnchorHrefDisabledState();\r\n });\r\n\r\n // Keep the native `type` attribute in sync with the `type` input signal.\r\n // No-op for anchor elements (guarded by `this.isButton`).\r\n effect(() => {\r\n if (this.isButton) {\r\n this._renderer.setAttribute(this._elementRef.nativeElement, 'type', this.type());\r\n }\r\n });\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n const el = this._elementRef.nativeElement;\r\n // Create the permanent leading slot (spinner target) as the first child.\r\n const slot = this._renderer.createElement('span');\r\n this._renderer.addClass(slot, 'fui-button__leading');\r\n this._renderer.setAttribute(slot, 'aria-hidden', 'true');\r\n this._renderer.insertBefore(el, slot, el.firstChild);\r\n this._leadingSlot = slot;\r\n // If loading was true before view init, fill the slot now.\r\n if (this.loading()) {\r\n this._fillLeadingSlot();\r\n }\r\n }\r\n\r\n @HostListener('click', ['$event'])\r\n onClick(event: Event): void {\r\n if (this.disabled() || this.loading()) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n return;\r\n }\r\n this._spawnRipple(event as MouseEvent);\r\n }\r\n\r\n @HostListener('keydown', ['$event'])\r\n onKeydown(event: Event): void {\r\n if (this.disabled() || this.loading()) {\r\n event.preventDefault();\r\n return;\r\n }\r\n\r\n // Only synthesize activation for anchors\r\n if (this.isAnchor) {\r\n const ke = event as KeyboardEvent;\r\n if (ke.key === 'Enter') {\r\n event.preventDefault();\r\n this._elementRef.nativeElement.click();\r\n } else if (ke.key === ' ') {\r\n // prevent page scroll; activation handled on keyup\r\n event.preventDefault();\r\n }\r\n }\r\n }\r\n\r\n @HostListener('keyup', ['$event'])\r\n onKeyup(event: Event): void {\r\n if (this.disabled() || this.loading()) {\r\n return;\r\n }\r\n if (this.isAnchor && (event as KeyboardEvent).key === ' ') {\r\n this._elementRef.nativeElement.click();\r\n }\r\n }\r\n\r\n private _fillLeadingSlot(): void {\r\n if (!this._leadingSlot) return;\r\n // Idempotence guard\r\n if (this._leadingSlot.querySelector('.fui-button__spinner')) return;\r\n\r\n const spinner = this._renderer.createElement('fui-icon');\r\n this._renderer.addClass(spinner, 'fui-button__spinner');\r\n this._renderer.setAttribute(spinner, 'aria-hidden', 'true');\r\n\r\n const spinnerIcon = this._renderer.createElement('span');\r\n this._renderer.addClass(spinnerIcon, 'fui-button__spinner-icon');\r\n this._renderer.appendChild(spinner, spinnerIcon);\r\n\r\n this._renderer.appendChild(this._leadingSlot, spinner);\r\n }\r\n\r\n private _clearLeadingSlot(): void {\r\n if (!this._leadingSlot) return;\r\n const spinner = this._leadingSlot.querySelector('.fui-button__spinner');\r\n if (spinner) {\r\n this._renderer.removeChild(this._leadingSlot, spinner);\r\n }\r\n }\r\n\r\n private _spawnRipple(event: MouseEvent): void {\r\n const host = this._elementRef.nativeElement;\r\n const rect = host.getBoundingClientRect();\r\n // Diameter covers the farthest corner from the click point\r\n const size = Math.max(rect.width, rect.height) * 2;\r\n // Fallback to center for keyboard-synthesized clicks (clientX/Y === 0)\r\n const hasCoords = event.clientX !== 0 || event.clientY !== 0;\r\n const x = (hasCoords ? event.clientX - rect.left : rect.width / 2) - size / 2;\r\n const y = (hasCoords ? event.clientY - rect.top : rect.height / 2) - size / 2;\r\n\r\n const ripple = this._renderer.createElement('span') as HTMLElement;\r\n this._renderer.addClass(ripple, 'fui-button__ripple');\r\n this._renderer.setAttribute(ripple, 'aria-hidden', 'true');\r\n this._renderer.setStyle(ripple, 'width', `${size}px`);\r\n this._renderer.setStyle(ripple, 'height', `${size}px`);\r\n this._renderer.setStyle(ripple, 'left', `${x}px`);\r\n this._renderer.setStyle(ripple, 'top', `${y}px`);\r\n\r\n ripple.addEventListener('animationend', () => {\r\n this._renderer.removeChild(host, ripple);\r\n }, { once: true });\r\n\r\n this._renderer.appendChild(host, ripple);\r\n }\r\n\r\n private _syncAnchorHrefDisabledState(): void {\r\n const el = this._elementRef.nativeElement as HTMLElement & { getAttribute(name: string): string | null };\r\n if (!this.isAnchor) return;\r\n const disabledLike = this.disabled() || this.loading();\r\n const stored = el.getAttribute('data-fuiStoredHref');\r\n const href = el.getAttribute('href');\r\n\r\n if (disabledLike && href) {\r\n this._renderer.setAttribute(el, 'data-fuiStoredHref', href);\r\n this._renderer.removeAttribute(el, 'href');\r\n } else if (!disabledLike && !href && stored) {\r\n this._renderer.setAttribute(el, 'href', stored);\r\n this._renderer.removeAttribute(el, 'data-fuiStoredHref');\r\n }\r\n }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@ import { input, Component, signal, computed, HostListener, ContentChild, ViewEnc
|
|
|
9
9
|
* ## Usage
|
|
10
10
|
* ```html
|
|
11
11
|
* <fui-card-header title="Card Title" subtitle="Optional subtitle">
|
|
12
|
-
* <button fuiButton variant="
|
|
12
|
+
* <button fuiButton variant="tertiary">
|
|
13
13
|
* <fui-icon name="dots-three"></fui-icon>
|
|
14
14
|
* </button>
|
|
15
15
|
* </fui-card-header>
|
|
@@ -29,13 +29,13 @@ class FuiCardHeaderComponent {
|
|
|
29
29
|
*/
|
|
30
30
|
subtitle = input(...(ngDevMode ? [undefined, { debugName: "subtitle" }] : /* istanbul ignore next */ []));
|
|
31
31
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
32
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiCardHeaderComponent, isStandalone: true, selector: "fui-card-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "fui-card-header" }, ngImport: i0, template: "@if (title()) {\r\n
|
|
32
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiCardHeaderComponent, isStandalone: true, selector: "fui-card-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "fui-card-header" }, ngImport: i0, template: "<div class=\"fui-flex fui-justify-between\">\r\n <div>\r\n @if (title()) {\r\n <div class=\"fui-card-header__title\" [attr.id]=\"hostId\">\r\n {{ title() }}\r\n </div>\r\n }\r\n @if (subtitle()) {\r\n <div class=\"fui-card-header__subtitle\">\r\n {{ subtitle() }}\r\n </div>\r\n }\r\n </div>\r\n<div class=\"fui-card-header__content\">\r\n <ng-content></ng-content>\r\n</div>\r\n</div>\r\n" });
|
|
33
33
|
}
|
|
34
34
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiCardHeaderComponent, decorators: [{
|
|
35
35
|
type: Component,
|
|
36
36
|
args: [{ selector: 'fui-card-header', standalone: true, imports: [], host: {
|
|
37
37
|
class: 'fui-card-header',
|
|
38
|
-
}, template: "@if (title()) {\r\n
|
|
38
|
+
}, template: "<div class=\"fui-flex fui-justify-between\">\r\n <div>\r\n @if (title()) {\r\n <div class=\"fui-card-header__title\" [attr.id]=\"hostId\">\r\n {{ title() }}\r\n </div>\r\n }\r\n @if (subtitle()) {\r\n <div class=\"fui-card-header__subtitle\">\r\n {{ subtitle() }}\r\n </div>\r\n }\r\n </div>\r\n<div class=\"fui-card-header__content\">\r\n <ng-content></ng-content>\r\n</div>\r\n</div>\r\n" }]
|
|
39
39
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }] } });
|
|
40
40
|
|
|
41
41
|
/**
|
|
@@ -54,7 +54,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
54
54
|
* ### Paddingless Actions
|
|
55
55
|
* ```html
|
|
56
56
|
* <fui-card-actions align="start" paddingless="true">
|
|
57
|
-
* <button fuiButton variant="
|
|
57
|
+
* <button fuiButton variant="tertiary">
|
|
58
58
|
* <fui-icon name="heart"></fui-icon>
|
|
59
59
|
* </button>
|
|
60
60
|
* </fui-card-actions>
|
|
@@ -113,7 +113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
113
113
|
* ```html
|
|
114
114
|
* <fui-card variant="outlined">
|
|
115
115
|
* <fui-card-header title="Card Title" subtitle="Optional subtitle">
|
|
116
|
-
* <button fuiButton variant="
|
|
116
|
+
* <button fuiButton variant="tertiary" size="sm" [iconOnly]="true">
|
|
117
117
|
* <fui-icon name="overflow-menu-vertical"></fui-icon>
|
|
118
118
|
* </button>
|
|
119
119
|
* </fui-card-header>
|
|
@@ -121,7 +121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
121
121
|
* <p>Main card content</p>
|
|
122
122
|
*
|
|
123
123
|
* <fui-card-actions align="end">
|
|
124
|
-
* <button fuiButton variant="secondary"
|
|
124
|
+
* <button fuiButton variant="secondary">Cancel</button>
|
|
125
125
|
* <button fuiButton variant="primary">Save</button>
|
|
126
126
|
* </fui-card-actions>
|
|
127
127
|
* </fui-card>
|
|
@@ -230,7 +230,7 @@ class FuiCardComponent {
|
|
|
230
230
|
return !!this.actionsCmp;
|
|
231
231
|
}
|
|
232
232
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
233
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiCardComponent, isStandalone: true, selector: "fui-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "class": "computedClasses()", "attr.role": "clickable() ? \"button\" : \"region\"", "attr.tabindex": "clickable() && !disabled() ? \"0\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-labelledby": "headerId" }, classAttribute: "fui-card" }, queries: [{ propertyName: "headerCmp", first: true, predicate: FuiCardHeaderComponent, descendants: true }, { propertyName: "actionsCmp", first: true, predicate: FuiCardActionsComponent, descendants: true }], ngImport: i0, template: "@if (hasHeader) {\r\n <div class=\"fui-card__header\">\r\n <ng-content select=\"fui-card-header, [rtCardHeader]\"></ng-content>\r\n </div>\r\n}\r\n\r\n<div class=\"fui-card__content\" [class.fui-card__content--no-padding]=\"padding() === 'none'\">\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n@if (hasActions) {\r\n <div class=\"fui-card__actions\">\r\n <ng-content select=\"fui-card-actions, [rtCardActions]\"></ng-content>\r\n </div>\r\n}\r\n", styles: [".fui-text-xs{font-size:var(--fui-font-size-01);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-text-xs);letter-spacing:.24px}.fui-text-sm{font-size:var(--fui-font-size-02);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-text-sm);letter-spacing:.56px}.fui-text-md{font-size:var(--fui-font-size-03);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-text-md)}.fui-text-lg{font-size:var(--fui-font-size-04);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-text-lg)}.fui-text-xl{font-size:var(--fui-font-size-05);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-text-xl)}.fui-display-xs{font-size:var(--fui-font-size-06);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-xs);letter-spacing:.48px}.fui-display-sm{font-size:var(--fui-font-size-07);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-sm)}.fui-display-md{font-size:var(--fui-font-size-08);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-md)}.fui-display-lg{font-size:var(--fui-font-size-09);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-lg)}.fui-display-xl{font-size:var(--fui-font-size-10);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-xl);letter-spacing:-1.2px}.fui-display-2xl{font-size:var(--fui-font-size-11);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-2xl);letter-spacing:-1.44px}.fui-code-01{font-family:var(--fui-font-family-mono);font-size:var(--fui-font-size-01);line-height:var(--fui-line-height-04)}.fui-code-02{font-family:var(--fui-font-family-mono);font-size:var(--fui-font-size-02);line-height:var(--fui-line-height-04)}.fui-font-light{font-weight:var(--fui-font-weight-light)}.fui-font-regular{font-weight:var(--fui-font-weight-regular)}.fui-font-medium{font-weight:var(--fui-font-weight-medium)}.fui-font-semibold{font-weight:var(--fui-font-weight-semibold)}.fui-font-bold{font-weight:var(--fui-font-weight-bold)}@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-card{--fui-card-bg: var(--fui-surface-00);--fui-card-border-color: var(--fui-border-color);--fui-card-header-padding: var(--fui-spacing-05) var(--fui-spacing-06);--fui-card-actions-gap: var(--fui-spacing-03);contain:layout style;display:flex;flex-direction:column;position:relative;border-radius:var(--fui-card-border-radius);background-color:var(--fui-card-bg);box-shadow:var(--fui-shadow-01);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:hidden;transition:box-shadow,transform,border-color var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-card--elevated{box-shadow:var(--fui-card-shadow);border:none}.fui-card--elevated.fui-card--hovered:not(.fui-card--disabled){box-shadow:var(--fui-card-shadow-hover)}.fui-card--outlined{border:1px solid var(--fui-border-color)}.fui-card--outlined.fui-card--hovered:not(.fui-card--disabled){border-color:var(--fui-border-color-strong)}.fui-card--flat{box-shadow:none;border:1px solid transparent}.fui-card--clickable{cursor:pointer;transition:transform var(--fui-duration-fast-02) var(--fui-ease-standard),box-shadow var(--fui-duration-fast-02) var(--fui-ease-standard)}.fui-card--clickable:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.fui-card--clickable:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px;transition:all var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-card--disabled{opacity:var(--fui-opacity-disabled);cursor:not-allowed}.fui-card--padding-none .fui-card__content{padding:0}.fui-card--padding-sm .fui-card__content{padding:var(--fui-spacing-04)}.fui-card--padding-md .fui-card__content{padding:var(--fui-spacing-05)}.fui-card--padding-lg .fui-card__content{padding:var(--fui-spacing-06)}.fui-card--padding-xl .fui-card__content{padding:var(--fui-spacing-07)}.fui-card__header{border-bottom:1px solid var(--fui-border-color);font-weight:var(--fui-font-weight-medium)}.fui-card__header:empty{display:none}.fui-card__content{flex:1;padding:var(--fui-card-padding)}.fui-card__content--no-padding{padding:0}.fui-card__content>:first-child{margin-top:0}.fui-card__content>:last-child{margin-bottom:0}.fui-card__actions{padding-bottom:0;display:flex;gap:var(--fui-spacing-03);align-items:center;justify-content:flex-end}.fui-card__actions:empty{display:none}.fui-card__actions--align-start{justify-content:flex-start}.fui-card__actions--align-center{justify-content:center}.fui-card__actions--align-end{justify-content:flex-end}.fui-card-header{padding:var(--fui-spacing-05) var(--fui-spacing-06);display:flex;flex-direction:column;gap:var(--fui-spacing-02)}.fui-card-header__title{color:var(--fui-text-primary);margin:0}.fui-card-header__subtitle{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);color:var(--fui-text-secondary);margin:0}.fui-card-header__content:empty{margin-top:0}.fui-card-actions{display:flex;gap:var(--fui-spacing-03);align-items:center}.fui-card-actions--align-start{justify-content:flex-start}.fui-card-actions--align-center{justify-content:center}.fui-card-actions--align-end{justify-content:flex-end}.fui-card-actions--paddingless{padding:0}.fui-card-actions .fui-button+.fui-button{margin-left:var(--fui-spacing-03)}@media(min-width:576px){.fui-card--padding-sm .fui-card__content{padding:var(--fui-spacing-02)}.fui-card--padding-md .fui-card__content{padding:var(--fui-spacing-04)}.fui-card--padding-lg .fui-card__content{padding:var(--fui-spacing-06)}.fui-card__actions{padding:0 var(--fui-spacing-04) var(--fui-spacing-04);gap:var(--fui-spacing-02);flex-wrap:wrap}}.fui-card--horizontal{flex-direction:row}.fui-card--horizontal .fui-card__content{flex:1}.fui-card--horizontal .fui-card__actions{flex-direction:column;padding:var(--fui-spacing-05)}.fui-card__image{width:100%;height:auto;border-radius:var(--fui-card-border-radius) var(--fui-card-border-radius) 0 0}.fui-card__image:only-child{border-radius:var(--fui-card-border-radius)}.fui-card__media{position:relative;overflow:hidden;border-radius:var(--fui-card-border-radius) var(--fui-card-border-radius) 0 0}.fui-card__media img,.fui-card__media video{width:100%;height:auto;display:block}.fui-card__media:last-child{border-radius:0 0 var(--fui-card-border-radius) var(--fui-card-border-radius)}.fui-card__media:only-child{border-radius:var(--fui-card-border-radius)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
233
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiCardComponent, isStandalone: true, selector: "fui-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "class": "computedClasses()", "attr.role": "clickable() ? \"button\" : \"region\"", "attr.tabindex": "clickable() && !disabled() ? \"0\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-labelledby": "headerId" }, classAttribute: "fui-card" }, queries: [{ propertyName: "headerCmp", first: true, predicate: FuiCardHeaderComponent, descendants: true }, { propertyName: "actionsCmp", first: true, predicate: FuiCardActionsComponent, descendants: true }], ngImport: i0, template: "@if (hasHeader) {\r\n <div class=\"fui-card__header\">\r\n <ng-content select=\"fui-card-header, [rtCardHeader]\"></ng-content>\r\n </div>\r\n}\r\n\r\n<div class=\"fui-card__content\" [class.fui-card__content--no-padding]=\"padding() === 'none'\">\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n@if (hasActions) {\r\n <div class=\"fui-card__actions\">\r\n <ng-content select=\"fui-card-actions, [rtCardActions]\"></ng-content>\r\n </div>\r\n}\r\n", styles: [".fui-text-xs{font-size:var(--fui-font-size-01);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-text-xs);letter-spacing:.24px}.fui-text-sm{font-size:var(--fui-font-size-02);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-text-sm);letter-spacing:.56px}.fui-text-md{font-size:var(--fui-font-size-03);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-text-md)}.fui-text-lg{font-size:var(--fui-font-size-04);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-text-lg)}.fui-text-xl{font-size:var(--fui-font-size-05);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-text-xl)}.fui-display-xs{font-size:var(--fui-font-size-06);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-xs);letter-spacing:.48px}.fui-display-sm{font-size:var(--fui-font-size-07);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-sm)}.fui-display-md{font-size:var(--fui-font-size-08);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-md)}.fui-display-lg{font-size:var(--fui-font-size-09);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-lg)}.fui-display-xl{font-size:var(--fui-font-size-10);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-xl);letter-spacing:-1.2px}.fui-display-2xl{font-size:var(--fui-font-size-11);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-2xl);letter-spacing:-1.44px}.fui-code-01{font-family:var(--fui-font-family-mono);font-size:var(--fui-font-size-01);line-height:var(--fui-line-height-04)}.fui-code-02{font-family:var(--fui-font-family-mono);font-size:var(--fui-font-size-02);line-height:var(--fui-line-height-04)}.fui-font-light{font-weight:var(--fui-font-weight-light)}.fui-font-regular{font-weight:var(--fui-font-weight-regular)}.fui-font-medium{font-weight:var(--fui-font-weight-medium)}.fui-font-semibold{font-weight:var(--fui-font-weight-semibold)}.fui-font-bold{font-weight:var(--fui-font-weight-bold)}@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-card{--fui-card-bg: var(--fui-surface-00);--fui-card-border-color: var(--fui-border-color);--fui-card-header-padding: var(--fui-spacing-05) var(--fui-spacing-06);--fui-card-actions-gap: var(--fui-spacing-03);contain:layout style;display:flex;flex-direction:column;position:relative;border-radius:var(--fui-card-border-radius);background-color:var(--fui-card-bg);box-shadow:var(--fui-shadow-01);backdrop-filter:blur(8px);overflow:hidden;transition:box-shadow,transform,border-color var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-card--elevated{box-shadow:var(--fui-card-shadow);border:none}.fui-card--elevated.fui-card--hovered:not(.fui-card--disabled){box-shadow:var(--fui-card-shadow-hover)}.fui-card--outlined{border:1px solid var(--fui-border-color)}.fui-card--outlined.fui-card--hovered:not(.fui-card--disabled){border-color:var(--fui-border-color-strong)}.fui-card--flat{box-shadow:none;border:1px solid transparent}.fui-card--clickable{cursor:pointer;transition:transform var(--fui-duration-fast-02) var(--fui-ease-standard),box-shadow var(--fui-duration-fast-02) var(--fui-ease-standard)}.fui-card--clickable:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.fui-card--clickable:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px;transition:all var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-card--disabled{opacity:var(--fui-opacity-disabled);cursor:not-allowed}.fui-card--padding-none .fui-card__content{padding:0}.fui-card--padding-sm .fui-card__content{padding:var(--fui-spacing-04)}.fui-card--padding-md .fui-card__content{padding:var(--fui-spacing-05)}.fui-card--padding-lg .fui-card__content{padding:var(--fui-spacing-06)}.fui-card--padding-xl .fui-card__content{padding:var(--fui-spacing-07)}.fui-card__header{border-bottom:1px solid var(--fui-border-color);font-weight:var(--fui-font-weight-medium)}.fui-card__header:empty{display:none}.fui-card__content{flex:1;padding:var(--fui-card-padding)}.fui-card__content--no-padding{padding:0}.fui-card__content>:first-child{margin-top:0}.fui-card__content>:last-child{margin-bottom:0}.fui-card__actions{padding-bottom:0;display:flex;gap:var(--fui-spacing-03);align-items:center;justify-content:flex-end}.fui-card__actions:empty{display:none}.fui-card__actions--align-start{justify-content:flex-start}.fui-card__actions--align-center{justify-content:center}.fui-card__actions--align-end{justify-content:flex-end}.fui-card-header{padding:var(--fui-spacing-05) var(--fui-spacing-06);display:flex;flex-direction:column;gap:var(--fui-spacing-02)}.fui-card-header__title{color:var(--fui-text-primary);margin:0}.fui-card-header__subtitle{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);color:var(--fui-text-secondary);margin:0}.fui-card-header__content:empty{margin-top:0}.fui-card-actions{display:flex;gap:var(--fui-spacing-03);align-items:center}.fui-card-actions--align-start{justify-content:flex-start}.fui-card-actions--align-center{justify-content:center}.fui-card-actions--align-end{justify-content:flex-end}.fui-card-actions--paddingless{padding:0}.fui-card-actions .fui-button+.fui-button{margin-left:var(--fui-spacing-03)}@media(min-width:576px){.fui-card--padding-sm .fui-card__content{padding:var(--fui-spacing-02)}.fui-card--padding-md .fui-card__content{padding:var(--fui-spacing-04)}.fui-card--padding-lg .fui-card__content{padding:var(--fui-spacing-06)}.fui-card__actions{padding:0 var(--fui-spacing-04) var(--fui-spacing-04);gap:var(--fui-spacing-02);flex-wrap:wrap}}.fui-card--horizontal{flex-direction:row}.fui-card--horizontal .fui-card__content{flex:1}.fui-card--horizontal .fui-card__actions{flex-direction:column;padding:var(--fui-spacing-05)}.fui-card__image{width:100%;height:auto;border-radius:var(--fui-card-border-radius) var(--fui-card-border-radius) 0 0}.fui-card__image:only-child{border-radius:var(--fui-card-border-radius)}.fui-card__media{position:relative;overflow:hidden;border-radius:var(--fui-card-border-radius) var(--fui-card-border-radius) 0 0}.fui-card__media img,.fui-card__media video{width:100%;height:auto;display:block}.fui-card__media:last-child{border-radius:0 0 var(--fui-card-border-radius) var(--fui-card-border-radius)}.fui-card__media:only-child{border-radius:var(--fui-card-border-radius)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
234
234
|
}
|
|
235
235
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiCardComponent, decorators: [{
|
|
236
236
|
type: Component,
|
|
@@ -241,7 +241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
241
241
|
'[attr.tabindex]': 'clickable() && !disabled() ? "0" : null',
|
|
242
242
|
'[attr.aria-disabled]': 'disabled() ? "true" : null',
|
|
243
243
|
'[attr.aria-labelledby]': 'headerId',
|
|
244
|
-
}, template: "@if (hasHeader) {\r\n <div class=\"fui-card__header\">\r\n <ng-content select=\"fui-card-header, [rtCardHeader]\"></ng-content>\r\n </div>\r\n}\r\n\r\n<div class=\"fui-card__content\" [class.fui-card__content--no-padding]=\"padding() === 'none'\">\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n@if (hasActions) {\r\n <div class=\"fui-card__actions\">\r\n <ng-content select=\"fui-card-actions, [rtCardActions]\"></ng-content>\r\n </div>\r\n}\r\n", styles: [".fui-text-xs{font-size:var(--fui-font-size-01);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-text-xs);letter-spacing:.24px}.fui-text-sm{font-size:var(--fui-font-size-02);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-text-sm);letter-spacing:.56px}.fui-text-md{font-size:var(--fui-font-size-03);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-text-md)}.fui-text-lg{font-size:var(--fui-font-size-04);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-text-lg)}.fui-text-xl{font-size:var(--fui-font-size-05);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-text-xl)}.fui-display-xs{font-size:var(--fui-font-size-06);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-xs);letter-spacing:.48px}.fui-display-sm{font-size:var(--fui-font-size-07);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-sm)}.fui-display-md{font-size:var(--fui-font-size-08);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-md)}.fui-display-lg{font-size:var(--fui-font-size-09);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-lg)}.fui-display-xl{font-size:var(--fui-font-size-10);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-xl);letter-spacing:-1.2px}.fui-display-2xl{font-size:var(--fui-font-size-11);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-2xl);letter-spacing:-1.44px}.fui-code-01{font-family:var(--fui-font-family-mono);font-size:var(--fui-font-size-01);line-height:var(--fui-line-height-04)}.fui-code-02{font-family:var(--fui-font-family-mono);font-size:var(--fui-font-size-02);line-height:var(--fui-line-height-04)}.fui-font-light{font-weight:var(--fui-font-weight-light)}.fui-font-regular{font-weight:var(--fui-font-weight-regular)}.fui-font-medium{font-weight:var(--fui-font-weight-medium)}.fui-font-semibold{font-weight:var(--fui-font-weight-semibold)}.fui-font-bold{font-weight:var(--fui-font-weight-bold)}@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-card{--fui-card-bg: var(--fui-surface-00);--fui-card-border-color: var(--fui-border-color);--fui-card-header-padding: var(--fui-spacing-05) var(--fui-spacing-06);--fui-card-actions-gap: var(--fui-spacing-03);contain:layout style;display:flex;flex-direction:column;position:relative;border-radius:var(--fui-card-border-radius);background-color:var(--fui-card-bg);box-shadow:var(--fui-shadow-01)
|
|
244
|
+
}, template: "@if (hasHeader) {\r\n <div class=\"fui-card__header\">\r\n <ng-content select=\"fui-card-header, [rtCardHeader]\"></ng-content>\r\n </div>\r\n}\r\n\r\n<div class=\"fui-card__content\" [class.fui-card__content--no-padding]=\"padding() === 'none'\">\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n@if (hasActions) {\r\n <div class=\"fui-card__actions\">\r\n <ng-content select=\"fui-card-actions, [rtCardActions]\"></ng-content>\r\n </div>\r\n}\r\n", styles: [".fui-text-xs{font-size:var(--fui-font-size-01);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-text-xs);letter-spacing:.24px}.fui-text-sm{font-size:var(--fui-font-size-02);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-text-sm);letter-spacing:.56px}.fui-text-md{font-size:var(--fui-font-size-03);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-text-md)}.fui-text-lg{font-size:var(--fui-font-size-04);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-text-lg)}.fui-text-xl{font-size:var(--fui-font-size-05);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-text-xl)}.fui-display-xs{font-size:var(--fui-font-size-06);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-xs);letter-spacing:.48px}.fui-display-sm{font-size:var(--fui-font-size-07);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-sm)}.fui-display-md{font-size:var(--fui-font-size-08);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-md)}.fui-display-lg{font-size:var(--fui-font-size-09);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-lg)}.fui-display-xl{font-size:var(--fui-font-size-10);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-xl);letter-spacing:-1.2px}.fui-display-2xl{font-size:var(--fui-font-size-11);font-style:normal;font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-display-2xl);letter-spacing:-1.44px}.fui-code-01{font-family:var(--fui-font-family-mono);font-size:var(--fui-font-size-01);line-height:var(--fui-line-height-04)}.fui-code-02{font-family:var(--fui-font-family-mono);font-size:var(--fui-font-size-02);line-height:var(--fui-line-height-04)}.fui-font-light{font-weight:var(--fui-font-weight-light)}.fui-font-regular{font-weight:var(--fui-font-weight-regular)}.fui-font-medium{font-weight:var(--fui-font-weight-medium)}.fui-font-semibold{font-weight:var(--fui-font-weight-semibold)}.fui-font-bold{font-weight:var(--fui-font-weight-bold)}@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-card{--fui-card-bg: var(--fui-surface-00);--fui-card-border-color: var(--fui-border-color);--fui-card-header-padding: var(--fui-spacing-05) var(--fui-spacing-06);--fui-card-actions-gap: var(--fui-spacing-03);contain:layout style;display:flex;flex-direction:column;position:relative;border-radius:var(--fui-card-border-radius);background-color:var(--fui-card-bg);box-shadow:var(--fui-shadow-01);backdrop-filter:blur(8px);overflow:hidden;transition:box-shadow,transform,border-color var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-card--elevated{box-shadow:var(--fui-card-shadow);border:none}.fui-card--elevated.fui-card--hovered:not(.fui-card--disabled){box-shadow:var(--fui-card-shadow-hover)}.fui-card--outlined{border:1px solid var(--fui-border-color)}.fui-card--outlined.fui-card--hovered:not(.fui-card--disabled){border-color:var(--fui-border-color-strong)}.fui-card--flat{box-shadow:none;border:1px solid transparent}.fui-card--clickable{cursor:pointer;transition:transform var(--fui-duration-fast-02) var(--fui-ease-standard),box-shadow var(--fui-duration-fast-02) var(--fui-ease-standard)}.fui-card--clickable:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.fui-card--clickable:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px;transition:all var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-card--disabled{opacity:var(--fui-opacity-disabled);cursor:not-allowed}.fui-card--padding-none .fui-card__content{padding:0}.fui-card--padding-sm .fui-card__content{padding:var(--fui-spacing-04)}.fui-card--padding-md .fui-card__content{padding:var(--fui-spacing-05)}.fui-card--padding-lg .fui-card__content{padding:var(--fui-spacing-06)}.fui-card--padding-xl .fui-card__content{padding:var(--fui-spacing-07)}.fui-card__header{border-bottom:1px solid var(--fui-border-color);font-weight:var(--fui-font-weight-medium)}.fui-card__header:empty{display:none}.fui-card__content{flex:1;padding:var(--fui-card-padding)}.fui-card__content--no-padding{padding:0}.fui-card__content>:first-child{margin-top:0}.fui-card__content>:last-child{margin-bottom:0}.fui-card__actions{padding-bottom:0;display:flex;gap:var(--fui-spacing-03);align-items:center;justify-content:flex-end}.fui-card__actions:empty{display:none}.fui-card__actions--align-start{justify-content:flex-start}.fui-card__actions--align-center{justify-content:center}.fui-card__actions--align-end{justify-content:flex-end}.fui-card-header{padding:var(--fui-spacing-05) var(--fui-spacing-06);display:flex;flex-direction:column;gap:var(--fui-spacing-02)}.fui-card-header__title{color:var(--fui-text-primary);margin:0}.fui-card-header__subtitle{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);color:var(--fui-text-secondary);margin:0}.fui-card-header__content:empty{margin-top:0}.fui-card-actions{display:flex;gap:var(--fui-spacing-03);align-items:center}.fui-card-actions--align-start{justify-content:flex-start}.fui-card-actions--align-center{justify-content:center}.fui-card-actions--align-end{justify-content:flex-end}.fui-card-actions--paddingless{padding:0}.fui-card-actions .fui-button+.fui-button{margin-left:var(--fui-spacing-03)}@media(min-width:576px){.fui-card--padding-sm .fui-card__content{padding:var(--fui-spacing-02)}.fui-card--padding-md .fui-card__content{padding:var(--fui-spacing-04)}.fui-card--padding-lg .fui-card__content{padding:var(--fui-spacing-06)}.fui-card__actions{padding:0 var(--fui-spacing-04) var(--fui-spacing-04);gap:var(--fui-spacing-02);flex-wrap:wrap}}.fui-card--horizontal{flex-direction:row}.fui-card--horizontal .fui-card__content{flex:1}.fui-card--horizontal .fui-card__actions{flex-direction:column;padding:var(--fui-spacing-05)}.fui-card__image{width:100%;height:auto;border-radius:var(--fui-card-border-radius) var(--fui-card-border-radius) 0 0}.fui-card__image:only-child{border-radius:var(--fui-card-border-radius)}.fui-card__media{position:relative;overflow:hidden;border-radius:var(--fui-card-border-radius) var(--fui-card-border-radius) 0 0}.fui-card__media img,.fui-card__media video{width:100%;height:auto;display:block}.fui-card__media:last-child{border-radius:0 0 var(--fui-card-border-radius) var(--fui-card-border-radius)}.fui-card__media:only-child{border-radius:var(--fui-card-border-radius)}\n"] }]
|
|
245
245
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], headerCmp: [{
|
|
246
246
|
type: ContentChild,
|
|
247
247
|
args: [FuiCardHeaderComponent]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"raintonic-formaui-components-card.mjs","sources":["../../../lib/components/card/card-header.component.ts","../../../lib/components/card/card-header.component.html","../../../lib/components/card/card-actions.component.ts","../../../lib/components/card/card-actions.component.html","../../../lib/components/card/card.component.ts","../../../lib/components/card/card.component.html","../../../lib/components/card/raintonic-formaui-components-card.ts"],"sourcesContent":["import { Component, input, InputSignal } from '@angular/core';\n\n/**\n * # FuiCardHeader Component\n *\n * Header section for cards with optional title, subtitle, and additional content.\n *\n * ## Usage\n * ```html\n * <fui-card-header title=\"Card Title\" subtitle=\"Optional subtitle\">\n * <button fuiButton variant=\"ghost\">\n * <fui-icon name=\"dots-three\"></fui-icon>\n * </button>\n * </fui-card-header>\n * ```\n */\n@Component({\n selector: 'fui-card-header',\n standalone: true,\n imports: [],\n templateUrl: './card-header.component.html',\n host: {\n class: 'fui-card-header',\n },\n})\nexport class FuiCardHeaderComponent {\n /**\n * Unique id for linking with aria-labelledby from the card\n */\n readonly hostId = `fui-card-header-${Math.random().toString(36).slice(2)}`;\n\n /**\n * Main title text for the card header\n */\n readonly title: InputSignal<string | undefined> = input<string>();\n\n /**\n * Optional subtitle text for the card header\n */\n readonly subtitle: InputSignal<string | undefined> = input<string>();\n}\n","@if (title()) {\r\n <div class=\"fui-card-header__title\" [attr.id]=\"hostId\">\r\n {{ title() }}\r\n </div>\r\n}\r\n@if (subtitle()) {\r\n <div class=\"fui-card-header__subtitle\">\r\n {{ subtitle() }}\r\n </div>\r\n}\r\n<div class=\"fui-card-header__content\">\r\n <ng-content></ng-content>\r\n</div>\r\n","import { Component, input, InputSignal } from '@angular/core';\n\n/**\n * # FuiCardActions Component\n *\n * Actions section for cards, typically containing buttons or other interactive elements.\n *\n * ## Usage\n * ```html\n * <fui-card-actions align=\"end\">\n * <button fuiButton variant=\"tertiary\">Cancel</button>\n * <button fuiButton variant=\"primary\" color=\"primary\">Save</button>\n * </fui-card-actions>\n * ```\n *\n * ### Paddingless Actions\n * ```html\n * <fui-card-actions align=\"start\" paddingless=\"true\">\n * <button fuiButton variant=\"ghost\">\n * <fui-icon name=\"heart\"></fui-icon>\n * </button>\n * </fui-card-actions>\n * ```\n */\n@Component({\n selector: 'fui-card-actions',\n standalone: true,\n templateUrl: './card-actions.component.html',\n host: {\n class: 'fui-card-actions',\n '[class.fui-card-actions--align-start]': 'align() === \"start\"',\n '[class.fui-card-actions--align-center]': 'align() === \"center\"',\n '[class.fui-card-actions--align-end]': 'align() === \"end\"',\n '[class.fui-card-actions--paddingless]': 'paddingless()',\n },\n})\nexport class FuiCardActionsComponent {\n /**\n * Alignment of actions within the container\n * @default 'end'\n */\n readonly align: InputSignal<'start' | 'center' | 'end'> = input<'start' | 'center' | 'end'>('end');\n\n /**\n * Whether to remove padding from the actions container\n * @default false\n */\n readonly paddingless: InputSignal<boolean> = input(false);\n}\n","<ng-content></ng-content>\r\n","import {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n computed,\n ContentChild,\n HostListener,\n input,\n InputSignal,\n Signal,\n signal,\n ViewEncapsulation,\n WritableSignal,\n} from '@angular/core';\n\nimport { FuiCardHeaderComponent } from './card-header.component';\nimport { FuiCardActionsComponent } from './card-actions.component';\n\n/**\n * Available card variants following Carbon Design System patterns\n */\nexport type FuiCardVariant = 'elevated' | 'outlined' | 'flat';\n\n/**\n * Available padding options for card content\n */\nexport type FuiCardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * # FuiCard Component\n *\n * A flexible container component following Carbon Design System patterns.\n * Provides a structured layout with optional header, content, and actions sections.\n *\n * ## Features\n * - Multiple variants: elevated, outlined, flat\n * - Configurable padding: none, sm, md, lg, xl\n * - Structured content areas: header, content, actions\n * - Clickable state support with hover animations\n * - Disabled state support\n * - Full accessibility support\n * - Smooth motion transitions\n *\n * ## Usage\n *\n * ### Basic Card\n * ```html\n * <fui-card>\n * <p>Card content goes here</p>\n * </fui-card>\n * ```\n *\n * ### Card with Header and Actions\n * ```html\n * <fui-card variant=\"outlined\">\n * <fui-card-header title=\"Card Title\" subtitle=\"Optional subtitle\">\n * <button fuiButton variant=\"ghost\" size=\"sm\" [iconOnly]=\"true\">\n * <fui-icon name=\"overflow-menu-vertical\"></fui-icon>\n * </button>\n * </fui-card-header>\n *\n * <p>Main card content</p>\n *\n * <fui-card-actions align=\"end\">\n * <button fuiButton variant=\"secondary\" kind=\"ghost\">Cancel</button>\n * <button fuiButton variant=\"primary\">Save</button>\n * </fui-card-actions>\n * </fui-card>\n * ```\n *\n * ### Clickable Card\n * ```html\n * <fui-card [clickable]=\"true\" (click)=\"handleCardClick()\">\n * <p>This entire card is clickable</p>\n * </fui-card>\n * ```\n *\n * @example\n * ```typescript\n * import { FuiCardComponent, FuiCardHeaderComponent, FuiCardActionsComponent } from '@raintonic/formaui/components/card';\n *\n * @Component({\n * standalone: true,\n * imports: [FuiCardComponent, FuiCardHeaderComponent, FuiCardActionsComponent],\n * template: `\n * <fui-card variant=\"elevated\" padding=\"lg\">\n * <fui-card-header title=\"User Profile\"></fui-card-header>\n * <div class=\"user-info\">\n * <p>User details here...</p>\n * </div>\n * <fui-card-actions>\n * <button fuiButton>Edit</button>\n * </fui-card-actions>\n * </fui-card>\n * `\n * })\n * export class UserCardComponent {}\n * ```\n */\n@Component({\n selector: 'fui-card',\n standalone: true,\n imports: [],\n templateUrl: './card.component.html',\n styleUrls: ['./card.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n class: 'fui-card',\n '[class]': 'computedClasses()',\n '[attr.role]': 'clickable() ? \"button\" : \"region\"',\n '[attr.tabindex]': 'clickable() && !disabled() ? \"0\" : null',\n '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\n '[attr.aria-labelledby]': 'headerId',\n },\n})\nexport class FuiCardComponent implements AfterContentInit {\n /**\n * Card variant that determines the visual style\n * @default 'outlined'\n */\n readonly variant: InputSignal<FuiCardVariant> = input<FuiCardVariant>('outlined');\n\n /**\n * Padding applied to card content\n * @default 'lg'\n */\n readonly padding: InputSignal<FuiCardPadding> = input<FuiCardPadding>('lg');\n\n /**\n * Whether the card is clickable (adds hover effects and cursor pointer)\n * @default false\n */\n readonly clickable: InputSignal<boolean> = input(false);\n\n /**\n * Whether the card is disabled\n * @default false\n */\n readonly disabled: InputSignal<boolean> = input(false);\n\n // Animation state\n readonly hovered: WritableSignal<boolean> = signal(false);\n readonly liftState: Signal<'idle' | 'lifted'> = computed(() =>\n this.clickable() && this.hovered() && !this.disabled() ? 'lifted' : 'idle',\n );\n\n // Projected content queries and ARIA label linkage\n @ContentChild(FuiCardHeaderComponent) headerCmp?: FuiCardHeaderComponent;\n @ContentChild(FuiCardActionsComponent) actionsCmp?: FuiCardActionsComponent;\n\n headerId = '';\n\n // Computed classes\n readonly computedClasses: Signal<string> = computed(() => {\n const classes: string[] = [`fui-card--${this.variant()}`, `fui-card--padding-${this.padding()}`];\n\n if (this.clickable()) {\n classes.push('fui-card--clickable');\n }\n\n if (this.disabled()) {\n classes.push('fui-card--disabled');\n }\n\n if (this.hovered()) {\n classes.push('fui-card--hovered');\n }\n\n return classes.join(' ');\n });\n\n @HostListener('mouseenter')\n onMouseEnter(): void {\n if (this.clickable() && !this.disabled()) {\n this.hovered.set(true);\n }\n }\n\n @HostListener('mouseleave')\n onMouseLeave(): void {\n this.hovered.set(false);\n }\n\n @HostListener('keydown', ['$event'])\n onKeyDown(event: KeyboardEvent): void {\n if (this.clickable() && !this.disabled() && (event.key === 'Enter' || event.key === ' ')) {\n event.preventDefault();\n (event.target as HTMLElement).click();\n }\n }\n\n @HostListener('click', ['$event'])\n onClick(event: MouseEvent): void {\n if (this.disabled()) {\n event.stopImmediatePropagation();\n event.preventDefault();\n }\n }\n\n ngAfterContentInit(): void {\n this.headerId = this.headerCmp ? this.headerCmp.hostId : '';\n }\n\n // Check if header content is projected\n get hasHeader(): boolean {\n return !!this.headerCmp;\n }\n\n // Check if actions content is projected\n get hasActions(): boolean {\n return !!this.actionsCmp;\n }\n}\n","@if (hasHeader) {\r\n <div class=\"fui-card__header\">\r\n <ng-content select=\"fui-card-header, [rtCardHeader]\"></ng-content>\r\n </div>\r\n}\r\n\r\n<div class=\"fui-card__content\" [class.fui-card__content--no-padding]=\"padding() === 'none'\">\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n@if (hasActions) {\r\n <div class=\"fui-card__actions\">\r\n <ng-content select=\"fui-card-actions, [rtCardActions]\"></ng-content>\r\n </div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"raintonic-formaui-components-card.mjs","sources":["../../../lib/components/card/card-header.component.ts","../../../lib/components/card/card-header.component.html","../../../lib/components/card/card-actions.component.ts","../../../lib/components/card/card-actions.component.html","../../../lib/components/card/card.component.ts","../../../lib/components/card/card.component.html","../../../lib/components/card/raintonic-formaui-components-card.ts"],"sourcesContent":["import { Component, input, InputSignal } from '@angular/core';\r\n\r\n/**\r\n * # FuiCardHeader Component\r\n *\r\n * Header section for cards with optional title, subtitle, and additional content.\r\n *\r\n * ## Usage\r\n * ```html\r\n * <fui-card-header title=\"Card Title\" subtitle=\"Optional subtitle\">\r\n * <button fuiButton variant=\"tertiary\">\r\n * <fui-icon name=\"dots-three\"></fui-icon>\r\n * </button>\r\n * </fui-card-header>\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-card-header',\r\n standalone: true,\r\n imports: [],\r\n templateUrl: './card-header.component.html',\r\n host: {\r\n class: 'fui-card-header',\r\n },\r\n})\r\nexport class FuiCardHeaderComponent {\r\n /**\r\n * Unique id for linking with aria-labelledby from the card\r\n */\r\n readonly hostId = `fui-card-header-${Math.random().toString(36).slice(2)}`;\r\n\r\n /**\r\n * Main title text for the card header\r\n */\r\n readonly title: InputSignal<string | undefined> = input<string>();\r\n\r\n /**\r\n * Optional subtitle text for the card header\r\n */\r\n readonly subtitle: InputSignal<string | undefined> = input<string>();\r\n}\r\n","<div class=\"fui-flex fui-justify-between\">\r\n <div>\r\n @if (title()) {\r\n <div class=\"fui-card-header__title\" [attr.id]=\"hostId\">\r\n {{ title() }}\r\n </div>\r\n }\r\n @if (subtitle()) {\r\n <div class=\"fui-card-header__subtitle\">\r\n {{ subtitle() }}\r\n </div>\r\n }\r\n </div>\r\n<div class=\"fui-card-header__content\">\r\n <ng-content></ng-content>\r\n</div>\r\n</div>\r\n","import { Component, input, InputSignal } from '@angular/core';\r\n\r\n/**\r\n * # FuiCardActions Component\r\n *\r\n * Actions section for cards, typically containing buttons or other interactive elements.\r\n *\r\n * ## Usage\r\n * ```html\r\n * <fui-card-actions align=\"end\">\r\n * <button fuiButton variant=\"tertiary\">Cancel</button>\r\n * <button fuiButton variant=\"primary\" color=\"primary\">Save</button>\r\n * </fui-card-actions>\r\n * ```\r\n *\r\n * ### Paddingless Actions\r\n * ```html\r\n * <fui-card-actions align=\"start\" paddingless=\"true\">\r\n * <button fuiButton variant=\"tertiary\">\r\n * <fui-icon name=\"heart\"></fui-icon>\r\n * </button>\r\n * </fui-card-actions>\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-card-actions',\r\n standalone: true,\r\n templateUrl: './card-actions.component.html',\r\n host: {\r\n class: 'fui-card-actions',\r\n '[class.fui-card-actions--align-start]': 'align() === \"start\"',\r\n '[class.fui-card-actions--align-center]': 'align() === \"center\"',\r\n '[class.fui-card-actions--align-end]': 'align() === \"end\"',\r\n '[class.fui-card-actions--paddingless]': 'paddingless()',\r\n },\r\n})\r\nexport class FuiCardActionsComponent {\r\n /**\r\n * Alignment of actions within the container\r\n * @default 'end'\r\n */\r\n readonly align: InputSignal<'start' | 'center' | 'end'> = input<'start' | 'center' | 'end'>('end');\r\n\r\n /**\r\n * Whether to remove padding from the actions container\r\n * @default false\r\n */\r\n readonly paddingless: InputSignal<boolean> = input(false);\r\n}\r\n","<ng-content></ng-content>\r\n","import {\r\n AfterContentInit,\r\n ChangeDetectionStrategy,\r\n Component,\r\n computed,\r\n ContentChild,\r\n HostListener,\r\n input,\r\n InputSignal,\r\n Signal,\r\n signal,\r\n ViewEncapsulation,\r\n WritableSignal,\r\n} from '@angular/core';\r\n\r\nimport { FuiCardHeaderComponent } from './card-header.component';\r\nimport { FuiCardActionsComponent } from './card-actions.component';\r\n\r\n/**\r\n * Available card variants following Carbon Design System patterns\r\n */\r\nexport type FuiCardVariant = 'elevated' | 'outlined' | 'flat';\r\n\r\n/**\r\n * Available padding options for card content\r\n */\r\nexport type FuiCardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';\r\n\r\n/**\r\n * # FuiCard Component\r\n *\r\n * A flexible container component following Carbon Design System patterns.\r\n * Provides a structured layout with optional header, content, and actions sections.\r\n *\r\n * ## Features\r\n * - Multiple variants: elevated, outlined, flat\r\n * - Configurable padding: none, sm, md, lg, xl\r\n * - Structured content areas: header, content, actions\r\n * - Clickable state support with hover animations\r\n * - Disabled state support\r\n * - Full accessibility support\r\n * - Smooth motion transitions\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Card\r\n * ```html\r\n * <fui-card>\r\n * <p>Card content goes here</p>\r\n * </fui-card>\r\n * ```\r\n *\r\n * ### Card with Header and Actions\r\n * ```html\r\n * <fui-card variant=\"outlined\">\r\n * <fui-card-header title=\"Card Title\" subtitle=\"Optional subtitle\">\r\n * <button fuiButton variant=\"tertiary\" size=\"sm\" [iconOnly]=\"true\">\r\n * <fui-icon name=\"overflow-menu-vertical\"></fui-icon>\r\n * </button>\r\n * </fui-card-header>\r\n *\r\n * <p>Main card content</p>\r\n *\r\n * <fui-card-actions align=\"end\">\r\n * <button fuiButton variant=\"secondary\">Cancel</button>\r\n * <button fuiButton variant=\"primary\">Save</button>\r\n * </fui-card-actions>\r\n * </fui-card>\r\n * ```\r\n *\r\n * ### Clickable Card\r\n * ```html\r\n * <fui-card [clickable]=\"true\" (click)=\"handleCardClick()\">\r\n * <p>This entire card is clickable</p>\r\n * </fui-card>\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * import { FuiCardComponent, FuiCardHeaderComponent, FuiCardActionsComponent } from '@raintonic/formaui/components/card';\r\n *\r\n * @Component({\r\n * standalone: true,\r\n * imports: [FuiCardComponent, FuiCardHeaderComponent, FuiCardActionsComponent],\r\n * template: `\r\n * <fui-card variant=\"elevated\" padding=\"lg\">\r\n * <fui-card-header title=\"User Profile\"></fui-card-header>\r\n * <div class=\"user-info\">\r\n * <p>User details here...</p>\r\n * </div>\r\n * <fui-card-actions>\r\n * <button fuiButton>Edit</button>\r\n * </fui-card-actions>\r\n * </fui-card>\r\n * `\r\n * })\r\n * export class UserCardComponent {}\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-card',\r\n standalone: true,\r\n imports: [],\r\n templateUrl: './card.component.html',\r\n styleUrls: ['./card.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-card',\r\n '[class]': 'computedClasses()',\r\n '[attr.role]': 'clickable() ? \"button\" : \"region\"',\r\n '[attr.tabindex]': 'clickable() && !disabled() ? \"0\" : null',\r\n '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\r\n '[attr.aria-labelledby]': 'headerId',\r\n },\r\n})\r\nexport class FuiCardComponent implements AfterContentInit {\r\n /**\r\n * Card variant that determines the visual style\r\n * @default 'outlined'\r\n */\r\n readonly variant: InputSignal<FuiCardVariant> = input<FuiCardVariant>('outlined');\r\n\r\n /**\r\n * Padding applied to card content\r\n * @default 'lg'\r\n */\r\n readonly padding: InputSignal<FuiCardPadding> = input<FuiCardPadding>('lg');\r\n\r\n /**\r\n * Whether the card is clickable (adds hover effects and cursor pointer)\r\n * @default false\r\n */\r\n readonly clickable: InputSignal<boolean> = input(false);\r\n\r\n /**\r\n * Whether the card is disabled\r\n * @default false\r\n */\r\n readonly disabled: InputSignal<boolean> = input(false);\r\n\r\n // Animation state\r\n readonly hovered: WritableSignal<boolean> = signal(false);\r\n readonly liftState: Signal<'idle' | 'lifted'> = computed(() =>\r\n this.clickable() && this.hovered() && !this.disabled() ? 'lifted' : 'idle',\r\n );\r\n\r\n // Projected content queries and ARIA label linkage\r\n @ContentChild(FuiCardHeaderComponent) headerCmp?: FuiCardHeaderComponent;\r\n @ContentChild(FuiCardActionsComponent) actionsCmp?: FuiCardActionsComponent;\r\n\r\n headerId = '';\r\n\r\n // Computed classes\r\n readonly computedClasses: Signal<string> = computed(() => {\r\n const classes: string[] = [`fui-card--${this.variant()}`, `fui-card--padding-${this.padding()}`];\r\n\r\n if (this.clickable()) {\r\n classes.push('fui-card--clickable');\r\n }\r\n\r\n if (this.disabled()) {\r\n classes.push('fui-card--disabled');\r\n }\r\n\r\n if (this.hovered()) {\r\n classes.push('fui-card--hovered');\r\n }\r\n\r\n return classes.join(' ');\r\n });\r\n\r\n @HostListener('mouseenter')\r\n onMouseEnter(): void {\r\n if (this.clickable() && !this.disabled()) {\r\n this.hovered.set(true);\r\n }\r\n }\r\n\r\n @HostListener('mouseleave')\r\n onMouseLeave(): void {\r\n this.hovered.set(false);\r\n }\r\n\r\n @HostListener('keydown', ['$event'])\r\n onKeyDown(event: KeyboardEvent): void {\r\n if (this.clickable() && !this.disabled() && (event.key === 'Enter' || event.key === ' ')) {\r\n event.preventDefault();\r\n (event.target as HTMLElement).click();\r\n }\r\n }\r\n\r\n @HostListener('click', ['$event'])\r\n onClick(event: MouseEvent): void {\r\n if (this.disabled()) {\r\n event.stopImmediatePropagation();\r\n event.preventDefault();\r\n }\r\n }\r\n\r\n ngAfterContentInit(): void {\r\n this.headerId = this.headerCmp ? this.headerCmp.hostId : '';\r\n }\r\n\r\n // Check if header content is projected\r\n get hasHeader(): boolean {\r\n return !!this.headerCmp;\r\n }\r\n\r\n // Check if actions content is projected\r\n get hasActions(): boolean {\r\n return !!this.actionsCmp;\r\n }\r\n}\r\n","@if (hasHeader) {\r\n <div class=\"fui-card__header\">\r\n <ng-content select=\"fui-card-header, [rtCardHeader]\"></ng-content>\r\n </div>\r\n}\r\n\r\n<div class=\"fui-card__content\" [class.fui-card__content--no-padding]=\"padding() === 'none'\">\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n@if (hasActions) {\r\n <div class=\"fui-card__actions\">\r\n <ng-content select=\"fui-card-actions, [rtCardActions]\"></ng-content>\r\n </div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|