@frame-ui-ng/components 0.3.0-beta.0 → 0.4.0-beta.0

package/styles/blueprint.css

@@ -657,3 +657,101 @@
 .frame-tooltip__content {
   --frame-blueprint-corner-inset: 0.125rem;
 }
+
+:root[data-frame-corner-handles='false']
+  :where(
+    [frAccordion],
+    [frAlert],
+    frame-alert,
+    [frAvatar],
+    frame-avatar,
+    [frBadge],
+    frame-badge,
+    [frBreadcrumb],
+    frame-breadcrumb,
+    [frCalendar],
+    frame-calendar,
+    [frCard],
+    frame-card,
+    [frCheckbox],
+    frame-checkbox,
+    [frCombobox],
+    [frCommand],
+    [frCommandInput],
+    [frCommandItem],
+    [frCommandList],
+    [frCommandGroup],
+    [frCommandFooter],
+    frame-command,
+    frame-command-input,
+    frame-command-item,
+    frame-command-list,
+    frame-command-group,
+    frame-command-footer,
+    [frInput],
+    frame-input,
+    [frInputGroup],
+    frame-input-group,
+    [frItem],
+    frame-item,
+    [frProgress],
+    frame-progress,
+    [frRadioGroup],
+    frame-radio-group,
+    [frSelect],
+    [frSeparator],
+    frame-separator,
+    [frSkeleton],
+    frame-skeleton,
+    [frSlider],
+    frame-slider,
+    [frSwitch],
+    frame-switch,
+    [frTable],
+    [frTableContainer],
+    [frTableVirtual],
+    frame-table,
+    frame-table-container,
+    frame-table-virtual,
+    [frTabsList],
+    frame-tabs-list,
+    [frToggle],
+    frame-toggle,
+    [frVirtualViewport],
+    frame-virtual-viewport,
+    [frVirtualList],
+    frame-virtual-list,
+    frame-input-otp,
+    .frame-button,
+    .frame-button-group,
+    [frButtonGroup],
+    frame-button-group,
+    .frame-combobox__panel,
+    .frame-date-picker__content,
+    .frame-dropdown-menu__content,
+    .frame-hover-card__content,
+    .frame-modal__panel,
+    .frame-navigation-menu__viewport,
+    .frame-popover__content,
+    .frame-sheet__panel,
+    .frame-toast,
+    .frame-tooltip__content
+  )::before {
+  content: none;
+}
+
+:root[data-frame-corner-handles='false']
+  :where(
+    [frTableContainer],
+    frame-table-container,
+    [frTableVirtual],
+    frame-table-virtual,
+    [frVirtualViewport],
+    frame-virtual-viewport,
+    [frVirtualList],
+    frame-virtual-list,
+    .frame-combobox__panel,
+    .frame-navigation-menu__viewport
+  ) {
+  background-image: none;
+}

package/styles/components.css

@@ -4,10 +4,10 @@
 @import '../../button/src/styles/button.css';
 @import '../../button-group/src/styles/button-group.css';
 @import '../../breadcrumb/src/styles/breadcrumb.css';
-@import '../../calendar/src/styles/calendar.css';
-@import '../../card/src/styles/card.css';
-@import '../../carousel/src/styles/carousel.css';
-@import '../../checkbox/src/styles/checkbox.css';
+@import '../../calendar/src/styles/calendar.css';
+@import '../../card/src/styles/card.css';
+@import '../../carousel/src/styles/carousel.css';
+@import '../../checkbox/src/styles/checkbox.css';
 @import '../../collapsible/src/styles/collapsible.css';
 @import '../../command/src/styles/command.css';
 @import '../../combobox/src/styles/combobox.css';

package/styles.css

@@ -6,10 +6,10 @@
 @import './button/src/styles/button.css';
 @import './button-group/src/styles/button-group.css';
 @import './breadcrumb/src/styles/breadcrumb.css';
-@import './calendar/src/styles/calendar.css';
-@import './card/src/styles/card.css';
-@import './carousel/src/styles/carousel.css';
-@import './checkbox/src/styles/checkbox.css';
+@import './calendar/src/styles/calendar.css';
+@import './card/src/styles/card.css';
+@import './carousel/src/styles/carousel.css';
+@import './checkbox/src/styles/checkbox.css';
 @import './collapsible/src/styles/collapsible.css';
 @import './command/src/styles/command.css';
 @import './combobox/src/styles/combobox.css';

package/tooltip/src/styles/tooltip.css

@@ -50,21 +50,21 @@
 
 .frame-tooltip__content[data-arrow][data-side='top']::after {
   inset-block-end: calc(var(--frame-tooltip-arrow-size) / -2);
-  inset-inline-start: calc(50% - var(--frame-tooltip-arrow-size) / 2);
+  inset-inline-start: var(--frame-tooltip-arrow-x, calc(50% - var(--frame-tooltip-arrow-size) / 2));
 }
 
 .frame-tooltip__content[data-arrow][data-side='bottom']::after {
   inset-block-start: calc(var(--frame-tooltip-arrow-size) / -2);
-  inset-inline-start: calc(50% - var(--frame-tooltip-arrow-size) / 2);
+  inset-inline-start: var(--frame-tooltip-arrow-x, calc(50% - var(--frame-tooltip-arrow-size) / 2));
 }
 
 .frame-tooltip__content[data-arrow][data-side='left']::after {
-  inset-block-start: calc(50% - var(--frame-tooltip-arrow-size) / 2);
+  inset-block-start: var(--frame-tooltip-arrow-y, calc(50% - var(--frame-tooltip-arrow-size) / 2));
   inset-inline-end: calc(var(--frame-tooltip-arrow-size) / -2);
 }
 
 .frame-tooltip__content[data-arrow][data-side='right']::after {
-  inset-block-start: calc(50% - var(--frame-tooltip-arrow-size) / 2);
+  inset-block-start: var(--frame-tooltip-arrow-y, calc(50% - var(--frame-tooltip-arrow-size) / 2));
   inset-inline-start: calc(var(--frame-tooltip-arrow-size) / -2);
 }
 

package/types/frame-ui-ng-components-combobox.d.ts

@@ -79,7 +79,7 @@ declare class FrCombobox extends FrControlValueAccessor<FrComboboxValue | FrComb
     private readonly itemsVersion;
     private readonly selectedLabels;
     private resizeObserver;
-    private origin?;
+    private readonly origin;
     readonly content: i0.Signal<FrComboboxContent | undefined>;
     readonly autoHighlight: i0.InputSignalWithTransform<boolean, unknown>;
     readonly debugVisible: i0.InputSignalWithTransform<boolean, unknown>;

package/types/frame-ui-ng-components-confirm-modal.d.ts

@@ -0,0 +1,48 @@
+import { FrModalConfig, FrModalRef } from '@frame-ui-ng/components/modal';
+import * as _angular_core from '@angular/core';
+
+type FrConfirmModalResult = 'cancel' | 'confirm';
+type FrConfirmModalData = {
+    cancelLabel: string;
+    confirmLabel: string;
+    description?: string;
+    title: string;
+};
+
+type FrConfirmModalConfig = Omit<FrModalConfig<FrConfirmModalData, FrConfirmModalResult, unknown>, 'data' | 'description' | 'footerActions' | 'inputs' | 'showCloseButton' | 'size' | 'title'> & {
+    cancelLabel?: string;
+    confirmLabel?: string;
+    description?: string;
+    title?: string;
+};
+declare class FrConfirmModalService {
+    private readonly modal;
+    open(config?: FrConfirmModalConfig): FrModalRef<unknown, FrConfirmModalResult>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FrConfirmModalService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<FrConfirmModalService>;
+}
+
+declare class FrConfirmModalTrigger {
+    private readonly confirmModal;
+    readonly config: _angular_core.InputSignal<string | FrConfirmModalConfig>;
+    readonly title: _angular_core.InputSignal<string | undefined>;
+    readonly description: _angular_core.InputSignal<string | undefined>;
+    readonly cancelLabel: _angular_core.InputSignal<string | undefined>;
+    readonly confirmLabel: _angular_core.InputSignal<string | undefined>;
+    readonly closed: _angular_core.OutputEmitterRef<FrConfirmModalResult | undefined>;
+    readonly cancelled: _angular_core.OutputEmitterRef<void>;
+    readonly confirmed: _angular_core.OutputEmitterRef<void>;
+    open(): void;
+    private resolvedConfig;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FrConfirmModalTrigger, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FrConfirmModalTrigger, "[frConfirmModal]", ["frConfirmModal"], { "config": { "alias": "frConfirmModal"; "required": false; "isSignal": true; }; "title": { "alias": "frConfirmModalTitle"; "required": false; "isSignal": true; }; "description": { "alias": "frConfirmModalDescription"; "required": false; "isSignal": true; }; "cancelLabel": { "alias": "frConfirmModalCancelLabel"; "required": false; "isSignal": true; }; "confirmLabel": { "alias": "frConfirmModalConfirmLabel"; "required": false; "isSignal": true; }; }, { "closed": "frConfirmModalClosed"; "cancelled": "frConfirmModalCancelled"; "confirmed": "frConfirmModalConfirmed"; }, never, never, true, never>;
+}
+
+declare class FrConfirmModalModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FrConfirmModalModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<FrConfirmModalModule, never, [typeof FrConfirmModalTrigger], [typeof FrConfirmModalTrigger]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<FrConfirmModalModule>;
+}
+
+export { FrConfirmModalModule, FrConfirmModalService, FrConfirmModalTrigger };
+export type { FrConfirmModalConfig, FrConfirmModalData, FrConfirmModalResult };

package/types/frame-ui-ng-components-input-otp.d.ts

@@ -12,7 +12,7 @@ type FrInputOtpController = {
     invalid: () => boolean;
 };
 declare class FrInputOtp extends FrControlValueAccessor<string> {
-    private readonly nativeInput?;
+    private readonly nativeInput;
     readonly maxLength: _angular_core.InputSignalWithTransform<number, unknown>;
     readonly pattern: _angular_core.InputSignal<FrInputOtpPattern>;
     readonly disabledInput: _angular_core.InputSignalWithTransform<boolean, unknown>;

package/types/frame-ui-ng-components-modal.d.ts

@@ -2,7 +2,7 @@ import * as _angular_core from '@angular/core';
 import { Type, TemplateRef, ViewContainerRef } from '@angular/core';
 import { Direction } from '@angular/cdk/bidi';
 import { ComponentType } from '@angular/cdk/portal';
-import { DialogConfig, DialogRef } from '@angular/cdk/dialog';
+import { DialogRef, DialogConfig } from '@angular/cdk/dialog';
 import { FrButtonAppearance } from '@frame-ui-ng/components/button';
 
 type FrModalFooterAction = {
@@ -35,13 +35,22 @@ declare class FrModalShell {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FrModalShell, "frame-modal-shell", never, {}, {}, never, never, true, never>;
 }
 
-type FrModalRef<Result = unknown, Component = unknown> = DialogRef<Result, Component>;
+declare abstract class FrModalRef<Component = unknown, Result = unknown> extends DialogRef<Result, Component> {
+}
+
 type FrModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 type FrModalConfig<Data = unknown, Result = unknown, Component = unknown> = DialogConfig<Data, DialogRef<Result, Component>> & {
+    /**
+     * @deprecated Use `data` or the second `open()` argument instead.
+     */
     bodyData?: unknown;
+    /**
+     * @deprecated Use `inputs` instead.
+     */
     bodyInputs?: Record<string, unknown>;
     description?: string;
     footerActions?: FrModalFooterAction[];
+    inputs?: Record<string, unknown>;
     scrollable?: boolean;
     showCloseButton?: boolean;
     size?: FrModalSize;
@@ -50,8 +59,9 @@ type FrModalConfig<Data = unknown, Result = unknown, Component = unknown> = Dial
 };
 declare class FrModalService {
     private readonly dialog;
-    open<Result = unknown, Data = unknown, Component = unknown>(content: ComponentType<Component>, config?: FrModalConfig<Data, Result, Component>): FrModalRef<Result, Component>;
-    open<Result = unknown, Data = unknown, Context = unknown>(content: TemplateRef<Context>, config?: FrModalConfig<Data, Result, Context>): FrModalRef<Result, Context>;
+    open<Result = unknown, Data = unknown, Component = unknown>(content: ComponentType<Component>, config?: FrModalConfig<Data, Result, Component>): FrModalRef<Component, Result>;
+    open<Result = unknown, Data = unknown, Component = unknown>(content: ComponentType<Component>, data: Data, config?: Omit<FrModalConfig<Data, Result, Component>, 'data'>): FrModalRef<Component, Result>;
+    open<Result = unknown, Data = unknown, Context = unknown>(content: TemplateRef<Context>, config?: FrModalConfig<Data, Result, Context>): FrModalRef<Context, Result>;
     closeAll(): void;
     private withDefaultClasses;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FrModalService, never>;
@@ -119,6 +129,7 @@ declare class FrModalDescription {
 }
 
 declare const FR_MODAL_DATA: _angular_core.InjectionToken<any>;
+declare const FR_MODAL_REF: typeof FrModalRef;
 
 declare class FrModalTrigger {
     private static readonly CUSTOM_PROPERTY_PREFIX;
@@ -129,7 +140,7 @@ declare class FrModalTrigger {
     private modalRef;
     readonly content: _angular_core.InputSignal<FrModalContent | TemplateRef<unknown> | null>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly opened: _angular_core.OutputEmitterRef<FrModalRef>;
+    readonly opened: _angular_core.OutputEmitterRef<FrModalRef<unknown, unknown>>;
     readonly closed: _angular_core.OutputEmitterRef<unknown>;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
     open(): void;
@@ -144,5 +155,5 @@ declare class FrModalModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<FrModalModule>;
 }
 
-export { FR_MODAL_DATA, FrModalBody, FrModalClose, FrModalContent, FrModalDescription, FrModalFooter, FrModalHeader, FrModalModule, FrModalPanel, FrModalService, FrModalShell, FrModalTitle, FrModalTrigger };
-export type { FrModalConfig, FrModalFooterAction, FrModalRef, FrModalShellOptions, FrModalSize };
+export { FR_MODAL_DATA, FR_MODAL_REF, FrModalBody, FrModalClose, FrModalContent, FrModalDescription, FrModalFooter, FrModalHeader, FrModalModule, FrModalPanel, FrModalRef, FrModalService, FrModalShell, FrModalTitle, FrModalTrigger };
+export type { FrModalConfig, FrModalFooterAction, FrModalShellOptions, FrModalSize };

package/types/frame-ui-ng-components-sheet.d.ts

@@ -15,9 +15,11 @@ declare class FrSheetClose {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FrSheetClose, "[frSheetClose]", never, { "result": { "alias": "frSheetClose"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 declare class FrSheetPanel {
+    private readonly dialogRef;
     readonly scrollable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly showCloseButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly side: _angular_core.InputSignalWithTransform<"top" | "right" | "bottom" | "left", unknown>;
+    close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FrSheetPanel, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FrSheetPanel, "[frSheetPanel], frame-sheet-panel", never, { "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/types/frame-ui-ng-components-sidebar.d.ts

@@ -47,8 +47,9 @@ declare class FrSidebar {
     readonly collapsible: i0.InputSignalWithTransform<"offcanvas" | "icon" | "none", unknown>;
     readonly minSize: i0.InputSignalWithTransform<number | null, unknown>;
     readonly maxSize: i0.InputSignalWithTransform<number | null, unknown>;
+    readonly resizable: i0.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrSidebar, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<FrSidebar, "[frSidebar], frame-sidebar", never, { "side": { "alias": "side"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FrSidebar, "[frSidebar], frame-sidebar", never, { "side": { "alias": "side"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 declare class FrSidebarTrigger {
     readonly provider: FrSidebarProvider | null;
@@ -73,7 +74,6 @@ declare class FrSidebarRail {
     startResize(event: PointerEvent): void;
     private resize;
     private flushResize;
-    private clampWidth;
     private captureResizeBounds;
     private measureContentMinSize;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrSidebarRail, never>;

package/types/frame-ui-ng-components-tooltip.d.ts

@@ -22,6 +22,9 @@ declare class FrTooltipDirective implements AfterViewInit {
     private openTimer;
     private overlayRef;
     private panelRef;
+    private arrowFrameId;
+    private currentSide;
+    private pendingArrowSide;
     private triggerElement;
     private wrapped;
     private wrapper;
@@ -41,6 +44,8 @@ declare class FrTooltipDirective implements AfterViewInit {
     private updatePanelInputs;
     private syncCustomPropertiesToOverlay;
     private copyCustomProperties;
+    private scheduleArrowPosition;
+    private syncArrowPosition;
     private listen;
     private cancelOpen;
     private cancelClose;

package/types/frame-ui-ng-components-utils.d.ts

@@ -0,0 +1,5 @@
+declare function clampNumber(value: number, min: number, max: number): number;
+declare function coerceNumber(value: unknown, fallback: number): number;
+declare function parseCssPixelValue(value: string, fallback: number): number;
+
+export { clampNumber, coerceNumber, parseCssPixelValue };