@besaitech/ng-design-system 0.0.74 → 0.0.75

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

@@ -6265,6 +6265,77 @@ 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, 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.
+ *
+ * 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.
+ *
+ * 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">`.
+ *
+ * @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-0": "position() === 'sticky'", "class.z-20": "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"
+    >
+      <!-- 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 });
+}
+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-0]': "position() === 'sticky'",
+                        '[class.z-20]': "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"
+    >
+      <!-- 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>
+  `,
+                }]
+        }], 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 +20738,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