@besaitech/ng-design-system 0.0.75 → 0.0.76

package/fesm2022/besaitech-ng-design-system.mjs

@@ -6267,21 +6267,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
 /**
  * The action bar at the foot of a form: Cancel, Save, and whatever commits the thing — projected as
- * buttons, right-aligned, on a bordered strip that pins to the bottom of the scroll container so the
- * save button stays in reach on a long editor.
+ * buttons on a floating card that rides at the bottom of the scroll container, so the save button
+ * stays in reach on a long editor.
  *
  * Project a destructive or secondary action with `sdsFormActionsStart` and it is pushed to the left,
  * away from the confirming buttons, which is the point: Delete should not sit a few pixels from Save.
  *
- * Not {@link SdsBulkBar}, which is for a selection: that one hides itself at zero, says "N selected",
- * carries a clear-selection button and is announced as a toolbar. A form footer is none of those, and
- * dressing one up as the other costs a fake count and a screen reader that announces a save bar as
- * bulk actions. This is a plain labelled `role="group"` — not a toolbar, because the buttons belong in
- * the form's normal tab order and a toolbar role tells a screen-reader user to expect arrow keys.
+ * Deliberately the same chrome as {@link SdsBulkBar} — rounded card, full border, solid surface,
+ * `shadow-xl`, floating clear of the bottom edge rather than welded to it, same entrance. The two are
+ * the app's only bars that hover over scrolling content, and a form footer that looked like a
+ * different species from the bulk bar would read as a different kind of thing. What they are not is
+ * the same semantics: that one is a `role="toolbar"` for a selection, announcing "N selected" and
+ * hiding itself at zero. This is a plain labelled `role="group"`, because these buttons belong in the
+ * form's normal tab order and a toolbar role tells a screen-reader user to expect arrow keys.
  *
- * The bar spans its container and carries its own horizontal padding. To let it bleed past a padded
- * container's edge, put the matching negative margin on the host — the host is a block element:
- * `<sds-form-actions class="-mx-4 md:-mx-6">`.
+ * It floats, so do not bleed it past its container with negative margins the way a flush strip wants:
+ * the rounded corners and the shadow need the inset to read as a card.
  *
  * @example
  * <sds-form-actions>
@@ -6299,41 +6300,36 @@ class SdsFormActions {
      */
     ariaLabel = input('Form actions', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsFormActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: SdsFormActions, isStandalone: true, selector: "sds-form-actions", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sticky": "position() === 'sticky'", "class.bottom-0": "position() === 'sticky'", "class.z-20": "position() === 'sticky'" }, classAttribute: "block" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: SdsFormActions, isStandalone: true, selector: "sds-form-actions", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sticky": "position() === 'sticky'", "class.bottom-3": "position() === 'sticky'", "class.z-30": "position() === 'sticky'" }, classAttribute: "block" }, ngImport: i0, template: `
     <div
       role="group"
       [attr.aria-label]="ariaLabel()"
-      class="flex flex-wrap items-center justify-end gap-2 border-t border-border bg-surface/95 px-4 py-3 backdrop-blur md:px-6"
+      class="flex flex-wrap items-center justify-end gap-x-3 gap-y-2 rounded-card border border-border bg-surface px-3 py-2 shadow-xl animate-sds-form-actions"
     >
       <!-- Written without inner whitespace so :empty matches when nothing is projected here. -->
       <div class="mr-auto flex flex-wrap items-center gap-2 empty:hidden"><ng-content select="[sdsFormActionsStart]" /></div>
       <ng-content />
     </div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".animate-sds-form-actions{animation:sds-form-actions-in .16s ease-out}@keyframes sds-form-actions-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-form-actions{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsFormActions, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'sds-form-actions',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
+            args: [{ selector: 'sds-form-actions', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'block',
                         '[class.sticky]': "position() === 'sticky'",
-                        '[class.bottom-0]': "position() === 'sticky'",
-                        '[class.z-20]': "position() === 'sticky'",
-                    },
-                    template: `
+                        '[class.bottom-3]': "position() === 'sticky'",
+                        '[class.z-30]': "position() === 'sticky'",
+                    }, template: `
     <div
       role="group"
       [attr.aria-label]="ariaLabel()"
-      class="flex flex-wrap items-center justify-end gap-2 border-t border-border bg-surface/95 px-4 py-3 backdrop-blur md:px-6"
+      class="flex flex-wrap items-center justify-end gap-x-3 gap-y-2 rounded-card border border-border bg-surface px-3 py-2 shadow-xl animate-sds-form-actions"
     >
       <!-- Written without inner whitespace so :empty matches when nothing is projected here. -->
       <div class="mr-auto flex flex-wrap items-center gap-2 empty:hidden"><ng-content select="[sdsFormActionsStart]" /></div>
       <ng-content />
     </div>
-  `,
-                }]
+  `, styles: [".animate-sds-form-actions{animation:sds-form-actions-in .16s ease-out}@keyframes sds-form-actions-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-form-actions{animation:none}}\n"] }]
         }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /**