@besaitech/ng-design-system 0.0.74 → 0.0.76

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

@@ -6265,6 +6265,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `, styles: [".animate-sds-bulk{animation:sds-bulk-in .16s ease-out}@keyframes sds-bulk-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-bulk{animation:none}}\n"] }]
         }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], countLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "countLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], clear: [{ type: i0.Output, args: ["clear"] }] } });
 
+/**
+ * The action bar at the foot of a form: Cancel, Save, and whatever commits the thing — projected as
+ * 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.
+ *
+ * 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.
+ *
+ * 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>
+ *   <sds-button sdsFormActionsStart variant="danger" (click)="remove()">Delete</sds-button>
+ *   <sds-button variant="ghost" routerLink="..">Cancel</sds-button>
+ *   <sds-button type="submit" variant="secondary" [loading]="saving()">Save</sds-button>
+ *   <sds-button [loading]="publishing()" (click)="saveAndPublish()">Save and publish</sds-button>
+ * </sds-form-actions>
+ */
+class SdsFormActions {
+    position = input('sticky', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    /**
+     * Accessible name of the group. English default; translate it in the consuming app — a screen
+     * reader reads it before the buttons, so an untranslated one is the odd word out.
+     */
+    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-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-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, 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: {
+                        class: 'block',
+                        '[class.sticky]': "position() === 'sticky'",
+                        '[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-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 }] }] } });
+
 /**
  * Template for one row's content inside `<sds-sortable-list>`.
  *
@@ -20667,5 +20734,5 @@ function provideSdsCharts(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_CHART_CONFIG, SDS_CHART_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SDS_THEME_STORAGE_KEY, SDS_UI_PREF_LANG_PARAM, SDS_UI_PREF_THEME_PARAM, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAddressAutocomplete, SdsAddressExtra, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsChip, SdsChipGroup, SdsDatePicker, SdsDateRangePicker, SdsEnvBanner, SdsFileDrop, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsRangeCalendar, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, appendUiPrefs, diffInDays, formatDateRange, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isSameRange, isSdsThemeMode, isoDay, pad2, provideSdsCharts, readUiPrefs, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsLastDays, sdsLastMonths, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth, stripUiPrefs };
+export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_CHART_CONFIG, SDS_CHART_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SDS_THEME_STORAGE_KEY, SDS_UI_PREF_LANG_PARAM, SDS_UI_PREF_THEME_PARAM, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAddressAutocomplete, SdsAddressExtra, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsChip, SdsChipGroup, SdsDatePicker, SdsDateRangePicker, SdsEnvBanner, SdsFileDrop, SdsFormActions, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsRangeCalendar, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, appendUiPrefs, diffInDays, formatDateRange, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isSameRange, isSdsThemeMode, isoDay, pad2, provideSdsCharts, readUiPrefs, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsLastDays, sdsLastMonths, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth, stripUiPrefs };
 //# sourceMappingURL=besaitech-ng-design-system.mjs.map