@resolve-components/theme 1.0.0 → 1.2.0

package/dialog/rc-dialog.scss

@@ -0,0 +1,114 @@
+// =============================================================================
+// rc-dialog  Resolve Components Dialog (Themed)
+// =============================================================================
+
+@use '../styles/theming/get-value' as *;
+@use '../styles/theming/install' as *;
+@use '../styles/theming/animation' as *;
+
+@include rc-install-component() {
+  // ── Backdrop ──────────────────────────────────────────────────────────────
+  .rc-dialog-backdrop {
+    background: rc-theme('dialog-overlay-backdrop-color');
+  }
+
+  // ── Dialog panel ──────────────────────────────────────────────────────────
+  .rc-dialog {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 20rem;
+    max-height: 85vh;
+    outline: none;
+    overflow: hidden;
+    background: rc-theme('dialog-background');
+    color: rc-theme('dialog-text-color');
+    border-radius: rc-theme('dialog-border-radius');
+    box-shadow: rc-theme('dialog-shadow');
+
+    @media (prefers-reduced-motion: no-preference) {
+      animation: rc-dialog-enter rc-theme('transition-duration-normal')
+        cubic-bezier(0, 0, 0.2, 1);
+    }
+  }
+
+  @keyframes rc-dialog-enter {
+    from {
+      opacity: 0;
+      transform: scale(0.96) translateY(-12px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  // ── Close button ──────────────────────────────────────────────────────────
+  .rc-dialog-close-btn {
+    position: absolute;
+    top: 0.875rem;
+    right: 0.875rem;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: rc-theme('radius-md');
+    cursor: pointer;
+    color: rc-theme('dialog-close-color');
+    @include rc-component-animation(background color);
+
+    &:hover {
+      background: rc-theme('dialog-close-hover-background');
+      color: rc-theme('dialog-close-hover-color');
+    }
+
+    &:focus-visible {
+      outline: rc-theme('focus-ring-width') solid rc-theme('focus-ring-color');
+      outline-offset: rc-theme('focus-ring-offset');
+    }
+  }
+
+  // ── Layout directives (applied in user content components) ───────────────
+
+  // [rcDialogTitle]
+  .rc-dialog-title {
+    display: block;
+    padding: rc-theme('dialog-header-padding');
+    // Extra right padding to avoid overlap with the close button
+    font-size: rc-theme('dialog-title-font-size');
+    font-weight: rc-theme('dialog-title-font-weight');
+    color: rc-theme('dialog-text-color');
+    margin: 0;
+    border-bottom: 1px solid rc-theme('dialog-border-color');
+    line-height: 1.4;
+  }
+
+  // [rcDialogContent]
+  .rc-dialog-content {
+    display: block;
+    padding: rc-theme('dialog-body-padding');
+    overflow-y: auto;
+    flex: 1 1 auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  // [rcDialogActions]
+  .rc-dialog-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: rc-theme('spacing-sm');
+    padding: rc-theme('dialog-actions-padding');
+    border-top: 1px solid rc-theme('dialog-border-color');
+    flex-shrink: 0;
+
+    &.rc-dialog-actions-start {
+      justify-content: flex-start;
+    }
+  }
+}

package/fesm2022/resolve-components-theme.mjs

@@ -483,7 +483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
  * ```
  *
  * @input variant  - Visual shape: `'filled'` | `'outline'` | `'ghost'`. Default: `'filled'`
- * @input status   - Semantic colour: `'primary'` | `'secondary'` | `'danger'` | `'info'` | `'success'` | `'warning'`. Default: `'primary'`
+ * @input status   - Semantic color: `'primary'` | `'secondary'` | `'danger'` | `'info'` | `'success'` | `'warning'`. Default: `'primary'`
  * @input size     - Button size: `'sm'` | `'md'` | `'lg'`. Default: `'md'`
  * @input disabled - Whether the element is disabled. Default: `false`
  * @input iconOnly - Renders as a square icon-only button. Default: `false`
@@ -491,10 +491,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
  *
  * Variants (shape):
  * - `filled`  Solid background — default
- * - `outline` Transparent with coloured border
+ * - `outline` Transparent with colored border
  * - `ghost`   Fully transparent, hover reveals background
  *
- * Status (colour):
+ * Status (color):
  * - `primary`   Blue  — main call-to-action
  * - `secondary` Gray  — secondary / neutral action
  * - `danger`    Red   — destructive / irreversible action
@@ -505,7 +505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 class RcButtonComponent {
     /** Visual shape of the button */
     variant = 'filled';
-    /** Semantic colour / importance */
+    /** Semantic color / importance */
     status = 'primary';
     /** Button size */
     size = 'md';
@@ -541,7 +541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                         '[class.rc-button-filled]': "variant === 'filled'",
                         '[class.rc-button-outline]': "variant === 'outline'",
                         '[class.rc-button-ghost]': "variant === 'ghost'",
-                        // status — colour
+                        // status — color
                         '[class.rc-button-primary]': "status === 'primary'",
                         '[class.rc-button-secondary]': "status === 'secondary'",
                         '[class.rc-button-danger]': "status === 'danger'",
@@ -587,7 +587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
  * ```
  */
 class RcBadgeComponent {
-    /** Colour status of the badge. */
+    /** Color status of the badge. */
     status = 'default';
     /** Badge size. */
     size = 'md';
@@ -679,7 +679,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
  * <rc-icon name="star"></rc-icon>
  * ```
  *
- * @example With status colour
+ * @example With status color
  * ```html
  * <rc-icon name="checkmark-circle" status="success"></rc-icon>
  * <rc-icon name="alert-circle" status="danger"></rc-icon>
@@ -704,15 +704,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
  * ```
  *
  * @input name   - Eva Icons icon name (e.g. `'star'`, `'home'`, `'checkmark'`)
- * @input status - Colour variant using semantic theme tokens. Default: `'basic'`
+ * @input status - Color variant using semantic theme tokens. Default: `'basic'`
  */
 class RcIconComponent {
     sanitizer;
     /** Eva Icons icon name */
     name;
     /**
-     * Colour status applied via theme CSS custom properties.
-     * `'basic'` inherits the surrounding text colour.
+     * Color status applied via theme CSS custom properties.
+     * `'basic'` inherits the surrounding text color.
      */
     status = 'basic';
     svgHtml = '';
@@ -785,8 +785,8 @@ class RcTabComponent {
     /** Optional Eva Icons icon name shown before the label */
     icon;
     /**
-     * Semantic status — colours the active tab indicator.
-     * `'basic'` uses the default primary colour.
+     * Semantic status — colors the active tab indicator.
+     * `'basic'` uses the default primary color.
      */
     status = 'basic';
     /** When true the tab header is non-interactive */
@@ -1014,14 +1014,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
  * </rc-alert>
  * ```
  *
- * @input status      - Semantic status colour. Default: `'info'`
+ * @input status      - Semantic status color. Default: `'info'`
  * @input variant     - Visual style. Default: `'subtle'`
  * @input title       - Optional bold heading above the message.
  * @input dismissible - Shows a close button. Default: `false`
  * @output dismissed  - Emits when the close button is clicked.
  */
 class RcAlertComponent {
-    /** Semantic status colour */
+    /** Semantic status color */
     status = 'info';
     /** Visual style variant */
     variant = 'subtle';
@@ -2645,7 +2645,7 @@ class RcTableDataSource extends DataSource {
  * <rc-chip [disabled]="true">Not available</rc-chip>
  * ```
  *
- * @input status    - Colour status. Default: `'default'`
+ * @input status    - Color status. Default: `'default'`
  * @input size      - Chip size. Default: `'md'`
  * @input icon      - Eva Icons icon name shown before the label.
  * @input closeable - Shows a close/remove button. Default: `false`
@@ -2655,7 +2655,7 @@ class RcTableDataSource extends DataSource {
  * @output closed    - Emits when the close button is clicked (and not disabled).
  */
 class RcChipComponent {
-    /** Colour status */
+    /** Color status */
     status = 'default';
     /** Chip size */
     size = 'md';
@@ -5386,7 +5386,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
  * </rc-navbar>
  * ```
  *
- * @example Primary colour + sticky
+ * @example Primary color + sticky
  * ```html
  * <rc-navbar color="primary" position="sticky">…</rc-navbar>
  * ```
@@ -5421,9 +5421,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
  */
 class RcNavbarComponent {
     /**
-     * Colour variant.
+     * Color variant.
      * - `'default'` — white / surface background (default)
-     * - `'primary'` — primary brand colour
+     * - `'primary'` — primary brand color
      */
     color = 'default';
     /**
@@ -7058,7 +7058,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
  * <rc-spinner status="danger" message="Saving failed — retrying…"></rc-spinner>
  * ```
  *
- * @example Status colours
+ * @example Status colors
  * ```html
  * <rc-spinner status="primary"></rc-spinner>
  * <rc-spinner status="info"></rc-spinner>
@@ -7069,7 +7069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
  * ```
  */
 class RcSpinnerComponent {
-    /** Colour status of the spinner circle. Default: `'primary'` */
+    /** Color status of the spinner circle. Default: `'primary'` */
     status = 'primary';
     /** Visual size of the spinner. Default: `'md'` */
     size = 'md';
@@ -7153,7 +7153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 class RcSpinnerDirective {
     /** When `true`, the spinner overlay is rendered inside the host element. */
     rcSpinner = false;
-    /** Colour status forwarded to the inner `rc-spinner`. Default: `'primary'` */
+    /** Color status forwarded to the inner `rc-spinner`. Default: `'primary'` */
     rcSpinnerStatus = 'primary';
     /** Size forwarded to the inner `rc-spinner`. Default: `'md'` */
     rcSpinnerSize = 'md';
@@ -7214,7 +7214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
  * <rc-progress-bar [value]="60"></rc-progress-bar>
  * ```
  *
- * @example Status colours
+ * @example Status colors
  * ```html
  * <rc-progress-bar [value]="80" status="success"></rc-progress-bar>
  * <rc-progress-bar [value]="20" status="danger"></rc-progress-bar>
@@ -7238,7 +7238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 class RcProgressBarComponent {
     /** Progress value from 0 to 100. Ignored when `indeterminate` is true. Default: `0` */
     value = 0;
-    /** Colour variant of the fill. Default: `'primary'` */
+    /** Color variant of the fill. Default: `'primary'` */
     status = 'primary';
     /** When true, shows an animated looping bar. Default: `false` */
     indeterminate = false;
@@ -8051,7 +8051,7 @@ const RC_MENU_CLOSE = new InjectionToken('RC_MENU_CLOSE');
 class RcMenuItemComponent {
     /** Eva icon name for the leading icon slot. */
     icon = '';
-    /** Renders the item with danger (red) text colouring. Default: `false` */
+    /** Renders the item with danger (red) text coloring. Default: `false` */
     danger = false;
     /** Prevents clicking. Default: `false` */
     disabled = false;
@@ -8374,7 +8374,7 @@ class RcInfiniteScrollComponent {
      * Default: `false` — the page scroll triggers loading.
      */
     scrollable = false;
-    /** Colour variant passed to the internal `<rc-spinner>`. Default: `'primary'` */
+    /** Color variant passed to the internal `<rc-spinner>`. Default: `'primary'` */
     spinnerStatus = 'primary';
     /** Optional message displayed beneath the spinner while loading. */
     loadingMessage = '';
@@ -8397,6 +8397,7 @@ class RcInfiniteScrollComponent {
     // ── Private state ─────────────────────────────────────────────────────────
     observer;
     isSentinelVisible = false;
+    pendingEmit = false;
     // ── Lifecycle ─────────────────────────────────────────────────────────────
     ngAfterViewInit() {
         this.zone.runOutsideAngular(() => {
@@ -8411,13 +8412,26 @@ class RcInfiniteScrollComponent {
         });
     }
     ngOnChanges(changes) {
-        // Re-fire when loading transitions false while sentinel is still in view
+        // Re-fire after a batch finishes loading, but defer until after the next
+        // paint so the IntersectionObserver has updated isSentinelVisible with
+        // the new scroll position. A pendingEmit guard prevents stacking.
         if (changes['loading'] &&
             !changes['loading'].firstChange &&
             !this.loading &&
-            this.isSentinelVisible &&
-            this.hasMore) {
-            this.loadMore.emit();
+            this.hasMore &&
+            !this.pendingEmit) {
+            this.pendingEmit = true;
+            this.zone.runOutsideAngular(() => {
+                // Double-rAF: first frame commits the layout, second reads intersection.
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        this.pendingEmit = false;
+                        if (this.isSentinelVisible && !this.loading && this.hasMore) {
+                            this.zone.run(() => this.loadMore.emit());
+                        }
+                    });
+                });
+            });
         }
     }
     ngOnDestroy() {