@danske/sapphire-angular 1.31.0 → 2.1.0

package/lib/badge/src/badge.component.d.ts

@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "../../common/sapphire-view-encapsulation";
 type Color = 'positive' | 'negative' | 'warning' | 'informative' | 'passive' | 'aqua' | 'copper' | 'electro' | 'indigo' | 'lime' | 'pink' | 'violet' | 'gold' | 'beige' | 'orchid' | 'gray' | 'cobalt' | 'forestGreen' | 'teal' | 'orange';
 type Variant = 'primary' | 'secondary';
-type Size = 'small' | 'medium' | 'large';
+type Size = 'sm' | 'md' | 'lg';
 export declare class BadgeComponent {
     role: string;
     /**
@@ -11,7 +11,7 @@ export declare class BadgeComponent {
      */
     id: string;
     /**
-     * @default 'medium'
+     * @default 'md'
      */
     size?: Size;
     /**

package/lib/button/src/button-group.component.d.ts

@@ -23,17 +23,15 @@ export declare class ButtonGroupComponent {
      * @default "none"
      */
     stretch?: ButtonGroupStretchType;
-    get iconSpacing(): this['spacing'];
-    set iconSpacing(value: this['spacing']);
     /**
      * Spacing between the buttons
-     * @default normal
+     * @default md
      */
-    spacing: 'large' | 'normal' | 'dense' | 'extra-dense';
+    spacing: 'lg' | 'md' | 'sm' | 'xs';
     /**
      * @default "horizontal"
      */
     orientation?: 'vertical' | 'horizontal';
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonGroupComponent, "sp-button-group", never, { "align": "align"; "stretch": "stretch"; "iconSpacing": "iconSpacing"; "spacing": "spacing"; "orientation": "orientation"; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonGroupComponent, "sp-button-group", never, { "align": "align"; "stretch": "stretch"; "spacing": "spacing"; "orientation": "orientation"; }, {}, never, ["*"], false, never>;
 }

package/lib/button/src/button.component.d.ts

@@ -7,26 +7,19 @@ import * as i1 from "../../theme/src/theme-check.directive";
 import * as i2 from "../../common/sapphire-view-encapsulation";
 export declare class ButtonComponent implements AfterContentInit {
     elementRef: ElementRef<HTMLButtonElement>;
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'dangerSecondary' | 'dangerTertiary';
-    appearance?: 'fill' | 'ghost' | 'text';
-    /**
-     * Applies different styles for a better contrast with the secondary color background.
-     * @default 'primary'
-     * @deprecated This will be done automatically.
-     */
-    surface?: 'primary' | 'secondary';
-    size?: 'small' | 'medium' | 'large';
+    variant?: 'primary' | 'secondary' | 'secondary-ghost' | 'secondary-text' | 'tertiary' | 'tertiary-ghost' | 'tertiary-text' | 'danger' | 'danger-ghost' | 'danger-text';
+    size?: 'sm' | 'md' | 'lg';
     disabled: BooleanInput;
     iconAlign: 'left' | 'right';
     /**
      * The behavior of the button when used in an HTML form.
      */
     type: 'submit' | 'button' | 'reset';
-    private get derivedVariantAndStyleClass();
+    private get variantClass();
     buttonIcon?: ButtonIconDirective;
     icon?: IconComponent;
     constructor(elementRef: ElementRef<HTMLButtonElement>);
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "button[sp-button], a[sp-button]", never, { "variant": "variant"; "appearance": "appearance"; "surface": "surface"; "size": "size"; "disabled": "disabled"; "iconAlign": "iconAlign"; "type": "type"; }, {}, ["buttonIcon", "icon"], ["*", "[spButtonIcon]"], false, [{ directive: typeof i1.ThemeCheckDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.UseComponentStylesOnHost; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "button[sp-button], a[sp-button]", never, { "variant": "variant"; "size": "size"; "disabled": "disabled"; "iconAlign": "iconAlign"; "type": "type"; }, {}, ["buttonIcon", "icon"], ["*", "[spButtonIcon]"], false, [{ directive: typeof i1.ThemeCheckDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.UseComponentStylesOnHost; inputs: {}; outputs: {}; }]>;
 }

package/lib/button/src/icon-button.component.d.ts

@@ -5,17 +5,10 @@ import * as i0 from "@angular/core";
 import * as i1 from "../../common/sapphire-view-encapsulation";
 export declare class IconButtonComponent implements IconSizeProvider, AfterViewInit {
     private elementRef;
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'neutral';
-    appearance?: 'fill' | 'ghost';
-    /**
-     * Applies different styles for a better contrast with the secondary color background.
-     * @default 'primary'
-     * @deprecated This will be done automatically
-     */
-    surface?: 'primary' | 'secondary';
-    size?: 'extraSmall' | 'small' | 'medium' | 'large';
+    variant?: 'primary' | 'secondary' | 'secondary-ghost' | 'tertiary' | 'tertiary-ghost' | 'danger' | 'danger-ghost';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     disabled: BooleanInput;
-    private get derivedVariantAndStyleClass();
+    private get variantClass();
     /**
      * The behavior of the button when used in an HTML form.
      */
@@ -23,5 +16,5 @@ export declare class IconButtonComponent implements IconSizeProvider, AfterViewI
     constructor(elementRef: ElementRef<HTMLElement>);
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<IconButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IconButtonComponent, "button[sp-icon-button], a[sp-icon-button]", never, { "variant": "variant"; "appearance": "appearance"; "surface": "surface"; "size": "size"; "disabled": "disabled"; "type": "type"; }, {}, never, ["*"], false, [{ directive: typeof i1.UseComponentStylesOnHost; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IconButtonComponent, "button[sp-icon-button], a[sp-icon-button]", never, { "variant": "variant"; "size": "size"; "disabled": "disabled"; "type": "type"; }, {}, never, ["*"], false, [{ directive: typeof i1.UseComponentStylesOnHost; inputs: {}; outputs: {}; }]>;
 }

package/lib/button/src/toggle-button.component.d.ts

@@ -1,8 +1,8 @@
 import { AfterContentInit, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { BooleanInput } from '@angular/cdk/coercion';
-import { IconComponent } from '../../icon/public_api';
 import { ButtonIconDirective } from './button-icon.directive';
+import { IconComponent, IconSizeProvider } from '../../icon/public_api';
 import * as i0 from "@angular/core";
 import * as i1 from "../../common/sapphire-view-encapsulation";
 /**
@@ -10,8 +10,8 @@ import * as i1 from "../../common/sapphire-view-encapsulation";
  * toggled when the button is pressed, allowing user to switch between two
  * states or modes.
  */
-export declare class ToggleButtonComponent implements AfterContentInit, OnChanges, ControlValueAccessor {
-    size?: 'small' | 'medium' | 'large';
+export declare class ToggleButtonComponent implements AfterContentInit, OnChanges, ControlValueAccessor, IconSizeProvider {
+    size?: 'sm' | 'md' | 'lg';
     selected: BooleanInput;
     /**
      * Whether selected is controlled. If it's controlled via input binding,

package/lib/checkbox/src/checkbox-group.component.d.ts

@@ -19,6 +19,7 @@ export declare class CheckboxGroupComponent implements FieldControl {
     get required(): boolean;
     set required(value: BooleanInput);
     private _required;
+    get size(): 'lg' | 'md';
     constructor(_field: FieldComponent);
     isDisabled(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxGroupComponent, [{ optional: true; }]>;

package/lib/checkbox/src/checkbox.component.d.ts

@@ -51,7 +51,9 @@ export declare class CheckboxComponent extends _CheckboxMixinBase implements Aft
     readonly: BooleanInput;
     /** Name value will be applied to the input element if present */
     name: string | null;
-    size?: 'large' | 'medium';
+    get size(): 'lg' | 'md';
+    set size(value: 'lg' | 'md');
+    private _size?;
     /** Event emitted when the checkbox's `selected` value changes. */
     readonly change: EventEmitter<CheckboxChange>;
     /** The value attribute of the native input element */

package/lib/common/disabled.d.ts

@@ -5,5 +5,5 @@ export interface CanDisable {
 }
 type CanDisableConstructor = Constructor<CanDisable> & AbstractConstructor<CanDisable>;
 /** Mixin to augment a directive with a `disabled` property. */
-export declare function mixinDisabled<T extends AbstractConstructor<{}>>(base: T): CanDisableConstructor & T;
+export declare function mixinDisabled<T extends AbstractConstructor>(base: T): CanDisableConstructor & T;
 export {};

package/lib/core.module.d.ts

@@ -20,11 +20,11 @@ import * as i18 from "./listbox/src/listbox.module";
 import * as i19 from "./modal/src/modal.module";
 import * as i20 from "./skeleton/src/skeleton.module";
 import * as i21 from "./pagination/src/pagination.module";
-import * as i22 from "./contextual-help/src/contextual-help.module";
+import * as i22 from "./help-button/src/help-button.module";
 import * as i23 from "./surface/src/surface.module";
 import * as i24 from "./badge/src/badge.module";
 export declare class SapphireCoreModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SapphireCoreModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SapphireCoreModule, never, [typeof i1.CommonModule, typeof i2.SapphireThemeModule, typeof i3.SapphireButtonModule, typeof i4.SapphireCheckboxModule, typeof i5.SapphireIconModule, typeof i6.SapphireTypographyModule, typeof i7.SapphireMenuModule, typeof i8.SapphirePopoverModule, typeof i9.SapphireTextFieldModule, typeof i10.SapphireSelectModule, typeof i11.SapphireTableModule, typeof i12.SapphireLinkModule, typeof i13.SapphireSegmentedTabsModule, typeof i14.SapphireNotificationBadgeModule, typeof i15.SapphireSwitchModule, typeof i16.SapphireRadioModule, typeof i17.SapphireTooltipModule, typeof i18.SapphireListboxModule, typeof i19.SapphireModalModule, typeof i20.SapphireSkeletonModule, typeof i21.SapphirePaginationModule, typeof i22.SapphireContextualHelpModule, typeof i23.SapphireSurfaceModule, typeof i24.SapphireBadgeModule], [typeof i3.SapphireButtonModule, typeof i5.SapphireIconModule, typeof i6.SapphireTypographyModule, typeof i4.SapphireCheckboxModule, typeof i7.SapphireMenuModule, typeof i8.SapphirePopoverModule, typeof i9.SapphireTextFieldModule, typeof i11.SapphireTableModule, typeof i12.SapphireLinkModule, typeof i13.SapphireSegmentedTabsModule, typeof i2.SapphireThemeModule, typeof i10.SapphireSelectModule, typeof i14.SapphireNotificationBadgeModule, typeof i15.SapphireSwitchModule, typeof i16.SapphireRadioModule, typeof i17.SapphireTooltipModule, typeof i18.SapphireListboxModule, typeof i19.SapphireModalModule, typeof i20.SapphireSkeletonModule, typeof i21.SapphirePaginationModule, typeof i22.SapphireContextualHelpModule, typeof i23.SapphireSurfaceModule, typeof i24.SapphireBadgeModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SapphireCoreModule, never, [typeof i1.CommonModule, typeof i2.SapphireThemeModule, typeof i3.SapphireButtonModule, typeof i4.SapphireCheckboxModule, typeof i5.SapphireIconModule, typeof i6.SapphireTypographyModule, typeof i7.SapphireMenuModule, typeof i8.SapphirePopoverModule, typeof i9.SapphireTextFieldModule, typeof i10.SapphireSelectModule, typeof i11.SapphireTableModule, typeof i12.SapphireLinkModule, typeof i13.SapphireSegmentedTabsModule, typeof i14.SapphireNotificationBadgeModule, typeof i15.SapphireSwitchModule, typeof i16.SapphireRadioModule, typeof i17.SapphireTooltipModule, typeof i18.SapphireListboxModule, typeof i19.SapphireModalModule, typeof i20.SapphireSkeletonModule, typeof i21.SapphirePaginationModule, typeof i22.SapphireHelpButtonModule, typeof i23.SapphireSurfaceModule, typeof i24.SapphireBadgeModule], [typeof i3.SapphireButtonModule, typeof i5.SapphireIconModule, typeof i6.SapphireTypographyModule, typeof i4.SapphireCheckboxModule, typeof i7.SapphireMenuModule, typeof i8.SapphirePopoverModule, typeof i9.SapphireTextFieldModule, typeof i11.SapphireTableModule, typeof i12.SapphireLinkModule, typeof i13.SapphireSegmentedTabsModule, typeof i2.SapphireThemeModule, typeof i10.SapphireSelectModule, typeof i14.SapphireNotificationBadgeModule, typeof i15.SapphireSwitchModule, typeof i16.SapphireRadioModule, typeof i17.SapphireTooltipModule, typeof i18.SapphireListboxModule, typeof i19.SapphireModalModule, typeof i20.SapphireSkeletonModule, typeof i21.SapphirePaginationModule, typeof i22.SapphireHelpButtonModule, typeof i23.SapphireSurfaceModule, typeof i24.SapphireBadgeModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SapphireCoreModule>;
 }

package/lib/field/src/field.component.d.ts

@@ -16,7 +16,7 @@ import * as i1 from "../../common/sapphire-view-encapsulation";
  * In addition to the field control (sp-select, sp-radio-group, sp-text-field), the following
  * components can be used inside a field:
  * - sp-field-label: is used to provide the label text for the field.
- * - sp-contextual-help: is placed in the label area, next to the label text
+ * - sp-help-button: is placed in the label area, next to the label text
  * - sp-field-error: is used to provide an error message, which is placed below the field's
  * control.
  * - sp-field-note: is used to provide a note, which is placed below the field's control. Only
@@ -44,9 +44,9 @@ export declare class FieldComponent implements AfterContentInit, AfterViewChecke
      */
     labelPlacement?: 'side' | 'above';
     /**
-     * @default "large"
+     * @default "lg"
      */
-    size?: 'large' | 'medium';
+    size?: 'lg' | 'md';
     note?: FieldNoteDirective;
     error?: FieldErrorDirective;
     radioGroup?: RadioGroupComponent;
@@ -88,5 +88,5 @@ export declare class FieldComponent implements AfterContentInit, AfterViewChecke
     get labelNecessityIndicator(): LabelComponent['necessityIndicator'];
     _setSuffixPortal(portal: DomPortal<HTMLElement> | null): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FieldComponent, "sp-field", never, { "necessityIndicator": "necessityIndicator"; "labelPlacement": "labelPlacement"; "size": "size"; }, {}, ["note", "error", "radioGroup", "_fieldLabel", "requiredValidator", "controls"], ["sp-field-label", "sp-contextual-help", "*", "sp-field-error", "sp-field-note"], false, [{ directive: typeof i1.UseComponentStylesOnHost; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldComponent, "sp-field", never, { "necessityIndicator": "necessityIndicator"; "labelPlacement": "labelPlacement"; "size": "size"; }, {}, ["note", "error", "radioGroup", "_fieldLabel", "requiredValidator", "controls"], ["sp-field-label", "sp-help-button", "*", "sp-field-error", "sp-field-note"], false, [{ directive: typeof i1.UseComponentStylesOnHost; inputs: {}; outputs: {}; }]>;
 }

package/lib/help-button/public_api.d.ts

@@ -0,0 +1,2 @@
+export { SapphireHelpButtonModule } from './src/help-button.module';
+export { HelpButtonComponent, HelpButtonFooterDirective, HelpButtonHeaderDirective, HelpButtonContentDirective, } from './src/help-button.component';

package/lib/help-button/src/help-button.component.d.ts

@@ -0,0 +1,50 @@
+import { PopoverTriggerDirective } from '../../popover/src/popover-trigger.directive';
+import { Placement } from '../../common/placement';
+import * as i0 from "@angular/core";
+export declare class HelpButtonHeaderDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HelpButtonHeaderDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HelpButtonHeaderDirective, "sp-help-button-header", never, {}, {}, never, never, true, never>;
+}
+export declare class HelpButtonContentDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HelpButtonContentDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HelpButtonContentDirective, "sp-help-button-content", never, {}, {}, never, never, true, never>;
+}
+export declare class HelpButtonFooterDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HelpButtonFooterDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HelpButtonFooterDirective, "sp-help-button-footer", never, {}, {}, never, never, true, never>;
+}
+export declare class HelpButtonComponent {
+    /**
+     *
+     * The type of help button which determines the icon shown.
+     *
+     * Use "info" for brief, contextual supplemental information. The content
+     * inside should have an instructive tone.
+     *
+     * Use "help" variant to signal more in-depth guidance about a task or UI,
+     * this may include links or images or other helpful media. The content
+     * inside should have a helpful tone.
+     *
+     * @default 'info'
+     */
+    variant: 'info' | 'help';
+    /**
+     * Placement of popover relative to the icon that triggers it.
+     */
+    placement: Placement;
+    /**
+     * The label for the trigger of the help dialog.
+     * This will NOT be rendered on the screen, but it is required
+     * for accessibility reasons.
+     */
+    ariaLabel: string;
+    _trigger?: PopoverTriggerDirective;
+    _footer?: HelpButtonFooterDirective;
+    _header?: HelpButtonHeaderDirective;
+    isOpen(): boolean | undefined;
+    toggle(): void | undefined;
+    open(): void | undefined;
+    close(): void | undefined;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HelpButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HelpButtonComponent, "sp-help-button", never, { "variant": "variant"; "placement": "placement"; "ariaLabel": "aria-label"; }, {}, ["_footer", "_header"], ["sp-help-button-header", "sp-help-button-content", "sp-help-button-footer"], true, never>;
+}

package/lib/help-button/src/help-button.module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./help-button.component";
+export declare class SapphireHelpButtonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SapphireHelpButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SapphireHelpButtonModule, never, [typeof i1.HelpButtonComponent, typeof i1.HelpButtonHeaderDirective, typeof i1.HelpButtonContentDirective, typeof i1.HelpButtonFooterDirective], [typeof i1.HelpButtonComponent, typeof i1.HelpButtonHeaderDirective, typeof i1.HelpButtonContentDirective, typeof i1.HelpButtonFooterDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SapphireHelpButtonModule>;
+}

package/lib/icon/src/icon-size-provider.d.ts

@@ -3,7 +3,7 @@ import { InjectionToken } from '@angular/core';
  * Interface to implement for the value of {@link ICON_SIZE_PROVIDER}
  */
 export interface IconSizeProvider {
-    size?: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 }
 /**
  * Injection token to provide the default size of the icon based on where
@@ -17,7 +17,7 @@ export interface IconSizeProvider {
  * })
  * class MyComponent implements IconSizeProvider {
  *   @Input()
- *   size?: 'small' | 'medium';
+ *   size?: 'sm' | 'md';
  * }
  */
 export declare const ICON_SIZE_PROVIDER: InjectionToken<unknown>;

package/lib/icon/src/icon.component.d.ts

@@ -2,17 +2,20 @@ import { DoCheck, ElementRef } from '@angular/core';
 import * as icons from '@danske/sapphire-icons/js';
 import { IconSizeProvider } from './icon-size-provider';
 import * as i0 from "@angular/core";
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare class IconComponent implements DoCheck {
     private elementRef;
     private sizeProvider?;
+    private iconClass?;
     set name(value: undefined | keyof typeof icons | string);
     get name(): undefined | keyof typeof icons | string;
     private _name?;
-    size?: string;
-    private appliedSize?;
+    sizeInput?: IconSize;
+    get size(): IconSize;
     constructor(elementRef: ElementRef, sizeProvider?: IconSizeProvider | undefined);
     ngDoCheck(): void;
     private applySize;
     static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, [null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "sp-icon", never, { "name": "name"; "size": "size"; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "sp-icon", never, { "name": "name"; "sizeInput": "size"; }, {}, never, never, false, never>;
 }
+export {};

package/lib/label/src/label.component.d.ts

@@ -26,9 +26,9 @@ export declare class LabelComponent {
      */
     necessityIndicator?: 'required' | 'optional';
     /**
-     * @default "large"
+     * @default "lg"
      */
-    size?: 'large' | 'medium';
+    size?: 'lg' | 'md';
     /**
      * Emits when the label text is clicked.
      */
@@ -39,5 +39,5 @@ export declare class LabelComponent {
     getText(): string;
     private labelElementRef?;
     static ɵfac: i0.ɵɵFactoryDeclaration<LabelComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LabelComponent, "sp-label", never, { "id": "id"; "for": "for"; "disabled": "disabled"; "necessityIndicator": "necessityIndicator"; "size": "size"; }, { "labelClick": "labelClick"; }, never, ["*", "sp-contextual-help"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LabelComponent, "sp-label", never, { "id": "id"; "for": "for"; "disabled": "disabled"; "necessityIndicator": "necessityIndicator"; "size": "size"; }, { "labelClick": "labelClick"; }, never, ["*", "sp-help-button"], true, never>;
 }

package/lib/link/src/link.component.d.ts

@@ -3,7 +3,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "../../common/sapphire-view-encapsulation";
 export declare class LinkComponent {
     variant?: 'primary' | 'secondary';
-    size?: 'small' | 'medium' | 'large';
+    size?: 'sm' | 'md' | 'lg';
     disabled?: BooleanInput;
     tabindex?: string | null;
     tabIndex?: string | null;

package/lib/listbox/src/listbox-item.component.d.ts

@@ -14,7 +14,7 @@ export declare class ListboxItemComponent {
     selected?: boolean;
     focused?: boolean;
     option: OptionComponent;
-    size?: 'large' | 'medium' | 'small';
+    size?: 'lg' | 'md' | 'sm';
     constructor(pressedDirective: PressedDirective);
     static ɵfac: i0.ɵɵFactoryDeclaration<ListboxItemComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ListboxItemComponent, "li[sp-listbox-item]", never, { "selected": "selected"; "focused": "focused"; "option": "option"; "size": "size"; }, {}, never, never, false, [{ directive: typeof i1.UseComponentStyles; inputs: {}; outputs: {}; }, { directive: typeof i2.PressedDirective; inputs: {}; outputs: {}; }, { directive: typeof i3.FocusedDirective; inputs: { "spFocused": "focused"; }; outputs: {}; }]>;

package/lib/listbox/src/listbox.component.d.ts

@@ -37,7 +37,7 @@ export declare class ListboxComponent implements ControlValueAccessor, AfterView
     navigationWrapDisabled: BooleanInput;
     ariaLabel: string;
     ariaLabelledBy?: string;
-    size?: 'large' | 'medium' | 'small';
+    size?: 'lg' | 'md' | 'sm';
     id?: string;
     /**
      * Emits whenever an option is selected, regardless of if it's already selected.

package/lib/menu/src/menu.component.d.ts

@@ -4,7 +4,7 @@ import * as i2 from "../../theme/src/theme-check.directive";
 import * as i3 from "../../common/sapphire-view-encapsulation";
 /** @title Menu with Standalone Trigger. */
 export declare class MenuComponent {
-    size?: 'large' | 'medium' | 'small';
+    size?: 'lg' | 'md' | 'sm';
     static ɵfac: i0.ɵɵFactoryDeclaration<MenuComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MenuComponent, "sp-menu", never, { "size": "size"; }, {}, never, ["*"], false, [{ directive: typeof i1.CdkMenu; inputs: {}; outputs: { "closed": "closed"; }; }, { directive: typeof i2.ThemeCheckDirective; inputs: {}; outputs: {}; }, { directive: typeof i3.UseComponentStylesOnHost; inputs: {}; outputs: {}; }]>;
 }

package/lib/modal/public_api.d.ts

@@ -1,19 +1,15 @@
 export * from './src/modal.service';
 export * from './src/modal.module';
-export { ModalCloseButtonDirective } from './src/modal-close-button.directive';
+export * from './src/layout/modal-layout.component';
+export * from './src/layout/modal-header.component';
+export * from './src/layout/modal-footer.component';
+export * from './src/layout/modal-body.component';
+export * from './src/layout/modal-header.component';
+export * from './src/layout/modal-close-button.directive';
+export * from './src/layout/modal-back-button.directive';
 export * from './src/panel/panel.component';
-export * from './src/panel/inline-panel.component';
-export * from './src/panel/panel-header.component';
-export * from './src/panel/panel-content.component';
-export * from './src/panel/panel-footer.component';
 export * from './src/panel/panel-trigger.directive';
-export * from './src/panel/panel-close-button.directive';
-export * from './src/panel/panel-back-button.directive';
 export * from './src/dialog/dialog.component';
 export * from './src/dialog/confirmation-dialog.component';
 export * from './src/dialog/danger-dialog.component';
-export * from './src/dialog/dialog-footer.component';
-export * from './src/dialog/dialog-content.directive';
-export * from './src/dialog/dialog-header.component';
-export * from './src/dialog/dialog-close-button.directive';
 export * from './src/dialog/dialog-trigger.directive';

package/lib/modal/src/dialog/dialog.component.d.ts

@@ -1,7 +1,4 @@
 import { DialogRef } from '@angular/cdk/dialog';
-import { DialogFooterDirective } from './dialog-footer.component';
-import { DialogContentDirective } from './dialog-content.directive';
-import { DialogHeaderDirective } from './dialog-header.component';
 import { ModalBaseComponent } from '../modal-base.component';
 import * as i0 from "@angular/core";
 import * as i1 from "../../../common/sapphire-view-encapsulation";
@@ -14,20 +11,8 @@ export declare class DialogComponent extends ModalBaseComponent {
     /**
      * Dialog size, constraining the width of the dialog.
      */
-    size: 'extra-small' | 'small' | 'medium' | 'large';
-    /**
-     * Type of the dialog:
-     *  - 'passive': A dialog without footer with actions. Passive dialogs are
-     *     used to display information, that doesn't require any further action.
-     *  - 'active': A dialog with a footer that contains actions. Active dialogs
-     *     are used to display information based on which the user is supposed to
-     *     decide on an action
-     */
-    get type(): 'passive' | 'active';
-    footer?: DialogFooterDirective;
-    header?: DialogHeaderDirective;
-    content?: DialogContentDirective;
+    size: 'xs' | 'sm' | 'md' | 'lg';
     constructor(dialogRef: DialogRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<DialogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DialogComponent, "sp-dialog", never, { "size": "size"; }, {}, ["footer", "header", "content"], ["sp-dialog-header, [spDialogHeader]", "sp-dialog-content, [sp-dialog-content]", "sp-dialog-footer, [spDialogFooter]"], false, [{ directive: typeof i1.UseComponentStylesOnHost; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DialogComponent, "sp-dialog", never, { "size": "size"; }, {}, never, ["*"], false, [{ directive: typeof i1.UseComponentStylesOnHost; inputs: {}; outputs: {}; }]>;
 }

package/lib/modal/src/layout/modal-back-button.directive.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class ModalBackButtonDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModalBackButtonDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ModalBackButtonDirective, "[spModalBackButton]", never, {}, {}, never, never, false, never>;
+}

package/lib/modal/src/{panel/panel-content.component.d.ts → layout/modal-body.component.d.ts}

@@ -3,12 +3,12 @@ import { BooleanInput } from '@angular/cdk/coercion';
 import * as i0 from "@angular/core";
 import * as i1 from "../../../common/scroll-monitor.directive";
 import * as i2 from "../../../common/sapphire-view-encapsulation";
-export declare class PanelContentComponent {
+export declare class ModalBodyComponent {
     _scrollMonitor: ScrollMonitorDirective;
     get noPadding(): boolean;
     set noPadding(value: BooleanInput);
     private _noPadding;
     constructor(_scrollMonitor: ScrollMonitorDirective);
-    static ɵfac: i0.ɵɵFactoryDeclaration<PanelContentComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PanelContentComponent, "sp-panel-content", never, { "noPadding": "noPadding"; }, {}, never, ["*"], false, [{ directive: typeof i1.ScrollMonitorDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.UseComponentStyles; inputs: {}; outputs: {}; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModalBodyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModalBodyComponent, "sp-modal-body", never, { "noPadding": "noPadding"; }, {}, never, ["*"], false, [{ directive: typeof i1.ScrollMonitorDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.UseComponentStyles; inputs: {}; outputs: {}; }]>;
 }

package/lib/modal/src/{modal-close-button.directive.d.ts → layout/modal-close-button.directive.d.ts}

@@ -1,5 +1,5 @@
 import { DialogRef } from '@angular/cdk/dialog';
-import { TranslateService } from '../../common/translate.service';
+import { TranslateService } from '../../../common/translate.service';
 import * as i0 from "@angular/core";
 export declare class ModalCloseButtonDirective {
     private dialogRef;
@@ -7,5 +7,5 @@ export declare class ModalCloseButtonDirective {
     dismissLabel: string;
     close(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalCloseButtonDirective, [null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ModalCloseButtonDirective, never, never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ModalCloseButtonDirective, "button[spModalCloseButton]", never, {}, {}, never, never, false, never>;
 }

package/lib/modal/src/layout/modal-footer.component.d.ts

@@ -0,0 +1,21 @@
+import * as i0 from "@angular/core";
+import * as i1 from "../../../common/sapphire-view-encapsulation";
+/**
+ * Marks a piece of UI as modal footer (eg. dialog, panel). Use only for
+ * **custom** footer. For a standard modal footer with default padding,
+ * use {@link ModalFooterComponent sp-modal-footer} instead.
+ */
+export declare class ModalFooterDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModalFooterDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ModalFooterDirective, "[spModalFooter]", never, {}, {}, never, never, true, [{ directive: typeof i1.UseComponentStyles; inputs: {}; outputs: {}; }]>;
+}
+/**
+ * Standard modal footer component (eg. dialog, panel) with default
+ * padding. For a custom footer, use
+ * {@link ModalFooterDirective spModalFooter attribute directive}.
+ */
+export declare class ModalFooterComponent {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModalFooterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModalFooterComponent, "sp-modal-footer", never, {}, {}, never, ["*"], false, [{ directive: typeof ModalFooterDirective; inputs: {}; outputs: {}; }]>;
+}

package/lib/modal/src/layout/modal-header.component.d.ts

@@ -0,0 +1,29 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "../../../common/sapphire-view-encapsulation";
+/**
+ * Marks a piece of UI as modal header (eg. dialog, panel).
+ * Use only for **custom** header. For standard header (a heading,
+ * optional subheading and a close button),
+ * use {@link ModalHeaderComponent sp-modal-header} instead.
+ */
+export declare class ModalHeaderDirective {
+    id: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModalHeaderDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ModalHeaderDirective, "[spModalHeader]", never, { "id": "id"; }, {}, never, never, true, never>;
+}
+/**
+ * Standard modal header component (eg. dialog, panel), which consists
+ * of a heading (the content), optional subheading and a close button.
+ * For a custom header, use
+ * {@link ModalHeaderDirective spModalHeader attribute directive}.
+ */
+export declare class ModalHeaderComponent {
+    subheading?: string;
+    hideCloseButton?: BooleanInput;
+    closeEventEmitter: EventEmitter<any>;
+    close(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModalHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModalHeaderComponent, "sp-modal-header", never, { "subheading": "subheading"; "hideCloseButton": "hideCloseButton"; }, { "closeEventEmitter": "closeClicked"; }, never, ["[spModalBackButton]", "*"], false, [{ directive: typeof ModalHeaderDirective; inputs: { "id": "id"; }; outputs: {}; }, { directive: typeof i1.UseComponentStyles; inputs: {}; outputs: {}; }]>;
+}

package/lib/modal/src/layout/modal-layout.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+import * as i1 from "../../../common/sapphire-view-encapsulation";
+export declare class ModalLayoutComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModalLayoutComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModalLayoutComponent, "sp-modal-layout", never, {}, {}, never, ["sp-modal-header, [spModalHeader]", "sp-modal-body", "sp-modal-footer, [spModalFooter]"], false, [{ directive: typeof i1.UseComponentStylesOnHost; inputs: {}; outputs: {}; }]>;
+}

package/lib/modal/src/modal-base.component.d.ts

@@ -1,7 +1,8 @@
 import { DialogRef, DialogRole } from '@angular/cdk/dialog';
-import { AfterContentChecked, AfterContentInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { AfterContentChecked, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { ModalHeaderDirective } from './layout/modal-header.component';
 import * as i0 from "@angular/core";
-export declare abstract class ModalBaseComponent implements OnChanges, AfterContentInit, AfterContentChecked, OnDestroy {
+export declare abstract class ModalBaseComponent implements OnChanges, AfterContentChecked, OnDestroy {
     protected dialogRef: DialogRef;
     /**
      * Defines a string value that labels the current element.
@@ -20,15 +21,12 @@ export declare abstract class ModalBaseComponent implements OnChanges, AfterCont
      */
     role?: DialogRole;
     protected contentInitialized: boolean;
-    abstract header?: {
-        id: string;
-    };
+    protected header?: ModalHeaderDirective;
     constructor(dialogRef: DialogRef);
     ngOnChanges(changes: SimpleChanges): void;
-    ngAfterContentInit(): void;
     ngAfterContentChecked(): void;
     close(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalBaseComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ModalBaseComponent, "ng-component", never, { "ariaLabel": "aria-label"; "ariaLabelledBy": "aria-labelledby"; "ariaDescribedBy": "aria-describedby"; "role": "role"; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModalBaseComponent, "ng-component", never, { "ariaLabel": "aria-label"; "ariaLabelledBy": "aria-labelledby"; "ariaDescribedBy": "aria-describedby"; "role": "role"; }, {}, ["header"], never, false, never>;
 }