@ngrdt/gov 0.0.78 → 0.0.80

package/index.d.ts

@@ -1,3 +1,6 @@
+import * as _ngrdt_loading from '@ngrdt/loading';
+import { RdtSpinnerComponent } from '@ngrdt/loading';
+import * as _ngrdt_gov from '@ngrdt/gov';
 import * as _ngrdt_button from '@ngrdt/button';
 import { RdtButtonBase } from '@ngrdt/button';
 import * as _ngrdt_forms from '@ngrdt/forms';
@@ -5,7 +8,7 @@ import { RdtCheckboxComponent, RdtDateComponent, RdtNumericInputComponent, RdtSe
 import * as _ngrdt_icon from '@ngrdt/icon';
 import { RdtIcon, RdtIconComponent } from '@ngrdt/icon';
 import * as _angular_core from '@angular/core';
-import { Injector, ElementRef, OnDestroy } from '@angular/core';
+import { Injector, ElementRef, InjectionToken, OnDestroy } from '@angular/core';
 import { RdtBooleanResult } from '@ngrdt/core';
 import { Nullable } from '@ngrdt/utils';
 import { GovFormInput } from '@gov-design-system-ce/angular';
@@ -65,6 +68,19 @@ declare class RdtGovIconComponent extends RdtIconComponent<string> {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<RdtGovIconComponent, "rdt-gov-icon", never, {}, {}, never, never, true, never>;
 }
 
+declare class RdtGovSpinnerComponent extends RdtSpinnerComponent {
+    readonly message: _angular_core.WritableSignal<string>;
+    readonly messageInput: _angular_core.InputSignal<string>;
+    readonly size: _angular_core.WritableSignal<"s" | "m" | "l">;
+    readonly sizeInput: _angular_core.InputSignal<"s" | "m" | "l">;
+    readonly mode: _angular_core.WritableSignal<"overlay" | "local">;
+    readonly modeInput: _angular_core.InputSignal<"overlay" | "local">;
+    readonly messagePositionInput: _angular_core.InputSignal<"left" | "right" | "below" | "above">;
+    readonly messagePosition: _angular_core.WritableSignal<"left" | "right" | "below" | "above">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdtGovSpinnerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RdtGovSpinnerComponent, "rdt-gov-spinner", never, { "messageInput": { "alias": "message"; "required": false; "isSignal": true; }; "sizeInput": { "alias": "size"; "required": false; "isSignal": true; }; "modeInput": { "alias": "mode"; "required": false; "isSignal": true; }; "messagePositionInput": { "alias": "messagePosition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 declare function provideNgrdtGov(options?: {}): (_angular_core.EnvironmentProviders | {
     provide: _angular_core.InjectionToken<_angular_core.Type<_ngrdt_icon.RdtIconBaseInt>>;
     useValue: typeof RdtGovIconComponent;
@@ -85,8 +101,36 @@ declare function provideNgrdtGov(options?: {}): (_angular_core.EnvironmentProvid
         "chevron-right": string;
         "sort-down": string;
         "sort-up": string;
-        funnel: string;
+        filter: string;
+        duration?: undefined;
+        positionVert?: undefined;
+        positionHoriz?: undefined;
+        successMsg?: undefined;
+        warningMsg?: undefined;
+        errorMsg?: undefined;
+    };
+} | {
+    provide: _angular_core.InjectionToken<_ngrdt_gov.RdtGovNotificationDefaultConfig>;
+    useValue: {
+        duration: number;
+        positionVert: string;
+        positionHoriz: string;
+        successMsg: string;
+        warningMsg: string;
+        errorMsg: string;
+        "arrow-right"?: undefined;
+        "arrow-down"?: undefined;
+        "chevron-double-left"?: undefined;
+        "chevron-double-right"?: undefined;
+        "chevron-left"?: undefined;
+        "chevron-right"?: undefined;
+        "sort-down"?: undefined;
+        "sort-up"?: undefined;
+        filter?: undefined;
     };
+} | {
+    provide: _angular_core.InjectionToken<_angular_core.Type<_ngrdt_loading.RdtSpinnerComponent>>;
+    useValue: typeof RdtGovSpinnerComponent;
 })[];
 
 interface RdtGovConfig {
@@ -127,6 +171,40 @@ declare class RdtGovDateComponent extends RdtDateComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<RdtGovDateComponent, "rdt-gov-date", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "outputMode": { "alias": "outputMode"; "required": false; "isSignal": true; }; "labelPositionInput": { "alias": "labelPosition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+interface RdtGovNotificationBase {
+    duration: number;
+    positionVert: 'top' | 'bottom';
+    positionHoriz: 'left' | 'center' | 'right';
+}
+interface RdtGovNotificationDefaultConfig extends RdtGovNotificationBase {
+    successMsg: string;
+    errorMsg: string;
+    warningMsg: string;
+}
+interface RdtGovNotificationCustomConfig extends RdtGovNotificationBase {
+    icon?: RdtIcon;
+    message: string;
+    color: 'success' | 'warning' | 'error' | 'primary' | 'neutral';
+    closeLabel?: string;
+    type: 'bold' | 'subtle';
+}
+declare class RdtGovNotificationService {
+    private overlay;
+    private injector;
+    private govDefaults;
+    show(cfg: RdtGovNotificationCustomConfig): void;
+    success(customMsg?: string): void;
+    warning(customMsg?: string): void;
+    error(customMsg?: string): void;
+    private openDefault;
+    private open;
+    private close;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdtGovNotificationService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<RdtGovNotificationService>;
+}
+
+declare const RDT_BASE_NOTIFICATION_PROVIDER: InjectionToken<RdtGovNotificationDefaultConfig>;
+
 declare class RdtGovNumberInputComponent extends RdtNumericInputComponent {
     private readonly renderer;
     protected readonly govInput: _angular_core.Signal<ElementRef<GovFormInput> | undefined>;
@@ -232,5 +310,5 @@ declare class RdtGovThemeService {
 
 declare function forceFocus(input: HTMLInputElement): void;
 
-export { DEFAULT_GOV_BUTTON_COLOR, DEFAULT_GOV_BUTTON_SIZE, DEFAULT_GOV_BUTTON_TYPE, RDT_DATE_MIN_YEAR, RdtGovButtonComponent, RdtGovCheckboxComponent, RdtGovDateComponent, RdtGovIconComponent, RdtGovNumberInputComponent, RdtGovSelectComponent, RdtGovSelectOfflineProviderDirective, RdtGovTextInputComponent, RdtGovThemeService, forceFocus, initRdtGov, provideNgrdtGov };
-export type { GovButtonType, GovColor, GovLabelPosition, GovMessageVariant, GovSize, RdtGovConfig };
+export { DEFAULT_GOV_BUTTON_COLOR, DEFAULT_GOV_BUTTON_SIZE, DEFAULT_GOV_BUTTON_TYPE, RDT_BASE_NOTIFICATION_PROVIDER, RDT_DATE_MIN_YEAR, RdtGovButtonComponent, RdtGovCheckboxComponent, RdtGovDateComponent, RdtGovIconComponent, RdtGovNotificationService, RdtGovNumberInputComponent, RdtGovSelectComponent, RdtGovSelectOfflineProviderDirective, RdtGovSpinnerComponent, RdtGovTextInputComponent, RdtGovThemeService, forceFocus, initRdtGov, provideNgrdtGov };
+export type { GovButtonType, GovColor, GovLabelPosition, GovMessageVariant, GovSize, RdtGovConfig, RdtGovNotificationCustomConfig, RdtGovNotificationDefaultConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngrdt/gov",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "peerDependencies": {
     "@angular/core": "^20.0.0",
     "@angular/forms": "^20.0.0",
@@ -9,13 +9,13 @@
     "@gov-design-system-ce/angular": "^1.3.1",
     "@gov-design-system-ce/components": "^4.2.0",
     "rxjs": "~7.8.0",
-    "@ngrdt/core": "^0.0.78",
-    "@ngrdt/forms": "^0.0.78",
-    "@ngrdt/icon": "^0.0.78",
-    "@ngrdt/utils": "^0.0.78",
+    "@ngrdt/core": "^0.0.80",
+    "@ngrdt/forms": "^0.0.80",
+    "@ngrdt/icon": "^0.0.80",
+    "@ngrdt/utils": "^0.0.80",
     "@angular/cdk": "^20.2.0",
-    "@ngrdt/button": "^0.0.78",
-    "@ngrdt/router": "^0.0.78"
+    "@ngrdt/button": "^0.0.80",
+    "@ngrdt/router": "^0.0.80"
   },
   "sideEffects": false,
   "exports": {

package/rdt-gov-menu.css

@@ -0,0 +1,88 @@
+:root {
+  --rdt-menu-background: var(--background-block-primary);
+  --rdt-menu-border-radius: 0 0 var(--corner-radius-m) var(--corner-radius-m);
+  --rdt-menu-bar-item-background: transparent;
+  --rdt-menu-bar-item-text-color: var(--text-primary-color);
+  --rdt-menu-bar-item-padding: var(--spacing-s) var(--spacing-m) !important;
+  --rdt-menu-bar-item-border-radius: var(
+    --outline-border-radius,
+    var(--corner-radius-xs-nudge)
+  );
+  --rdt-menu-bar-item-border: none;
+  --rdt-menu-bar-item-outline: none;
+  --rdt-menu-bar-item-margin: 0;
+  --rdt-menu-bar-item-font-size: var(--font-size-body-m);
+  --rdt-menu-bar-item-font-weight: 500;
+  --rdt-menu-item-font-size: var(--font-size-body-s);
+  --rdt-menu-item-padding: var(--spacing-xs) 0 var(--spacing-xs)
+    var(--spacing-xs);
+  --rdt-menu-bar-item-hover-background: var(--button-outlined-primary-hover);
+  --rdt-menu-bar-item-hover-text-color: var(--text-primary-color);
+  --rdt-menu-bar-item-hover-border: none;
+  --rdt-menu-bar-item-hover-outline: none;
+  --rdt-menu-bar-item-expanded-background: var(--button-outlined-primary-hover);
+  --rdt-menu-bar-item-expanded-text-color: var(--text-primary-color);
+  --rdt-menu-bar-item-expanded-border: none;
+  --rdt-menu-bar-item-expanded-outline: none;
+  --rdt-menu-bar-item-focus-background: transparent;
+  --rdt-menu-bar-item-focus-text-color: var(--text-primary-color);
+  --rdt-menu-bar-item-focus-border: none;
+  --rdt-menu-bar-item-focus-outline: var(--outline-width, 0.125rem) solid
+    var(--status-focus);
+  --rdt-menu-bar-item-route-active-background: var(
+    --button-outlined-primary-active
+  );
+  --rdt-menu-bar-item-route-active-text-color: var(--text-primary-color);
+  --rdt-menu-bar-item-route-active-border: none;
+  --rdt-menu-bar-item-route-active-outline: none;
+  --rdt-menu-bar-item-disabled-background: var(
+    --disabled-background,
+    var(--button-solid-disabled)
+  );
+  --rdt-menu-bar-item-disabled-text-color: var(
+    --disabled-color,
+    var(--text-disabled)
+  );
+  --rdt-menu-bar-item-disabled-border: none;
+  --rdt-menu-bar-item-disabled-outline: none;
+}
+:root ul {
+  justify-content: space-between;
+}
+:root ul li:before {
+  content: none;
+}
+:root .menu-item:hover {
+  text-decoration: underline;
+}
+:root ul.menu-item-container {
+  min-width: 280px;
+  padding: var(--spacing-s) var(--spacing-m) !important;
+}
+:root .menu-bar-item-content {
+  gap: var(--spacing-m);
+}
+
+@media only screen and (max-width: 767px) {
+  :root {
+    --rdt-menu-background: transparent;
+  }
+  :root .menu-bar-item {
+    flex-direction: column;
+  }
+  :root .menu-bar-item-container {
+    flex-direction: column;
+  }
+  :root .menu-bar-item-content {
+    width: 100%;
+    background-color: var(--background-block-primary);
+  }
+  :root rdt-menu-overlay {
+    height: 0px;
+    width: 100%;
+    position: unset;
+  }
+  :root rdt-menu-overlay.expanded {
+    height: unset;
+  }
+}

package/rdt-gov-table.css

@@ -0,0 +1,73 @@
+.action-btn {
+  background-color: transparent !important;
+  color: var(--text-primary-color);
+  font-size: var(--font-size-body-s);
+  line-height: 150%;
+  font-weight: 700;
+}
+
+select.action-btn {
+  background-color: var(--background-block-primary) !important;
+  border: 1px solid var(--border-subtle) !important;
+  color: var(--text-primary);
+}
+
+.action-btn:hover {
+  background-color: var(
+    --hover-background,
+    var(--button-outlined-primary-hover)
+  ) !important;
+}
+
+.action-btn.selected {
+  background-color: var(
+    --hover-background,
+    var(--button-outlined-primary-hover)
+  ) !important;
+  color: var(--text-primary-color) !important;
+}
+
+rdt-table {
+  table {
+    border-radius: var(--border-radius, var(--corner-radius-s));
+    border-spacing: 0px;
+    thead {
+      tr {
+        th {
+          padding: 0.25rem 0.5rem;
+          border-bottom: 1px solid var(--border-subtlest);
+          background-color: var(
+            --form-bg-color,
+            var(--background-block-primary)
+          );
+        }
+      }
+    }
+    tbody {
+      background-color: var(--form-bg-color, var(--background-block-primary));
+      border: 1px solid var(--border-subtle) !important;
+      tr {
+        td {
+          border-bottom: 1px solid var(--border-subtlest);
+        }
+      }
+      tr.row-selected {
+        td {
+          background-color: var(--background-primary-subtle) !important;
+        }
+      }
+      .rdt-select-column-cell {
+        border-right: 1px solid var(--border-subtlest);
+        background-color: var(
+          --form-bg-color,
+          var(--background-block-primary)
+        ) !important;
+        .rdt-select-column-cell-wrapper {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+}

package/styles.css

@@ -0,0 +1,7 @@
+@import '@gov-design-system-ce/styles/tokens.css';
+@import '@gov-design-system-ce/styles/styles.css';
+@import '@gov-design-system-ce/styles/layout.css';
+@import '@gov-design-system-ce/styles/components.css';
+
+@import '@ngrdt/gov/rdt-gov-menu.css';
+@import '@ngrdt/gov/rdt-gov-table.css';

package/lib/gov/ui/checkbox/rdt-gov-checkbox.component.scss

@@ -1,11 +0,0 @@
-gov-form-checkbox {
-  min-height: 0px !important;
-  padding: 0px !important;
-}
-.center {
-  display: flex;
-  align-items: center;
-}
-.spaced {
-  margin-right: var(--spacing-xs-nudge);
-}

package/lib/gov/ui/gov-shared-styles.scss

@@ -1,23 +0,0 @@
-.warning-color {
-  &-icon {
-    color: var(--icon-error) !important;
-  }
-  &-text {
-    color: var(--text-status-error) !important;
-  }
-  &-gov-label {
-    .gov-form-label__label {
-      color: var(--form-state-label-error, var(--text-status-error)) !important;
-    }
-  }
-}
-
-.s_label {
-  font-size: var(--font-size-body-s);
-  line-height: 150%;
-  font-weight: 400;
-}
-
-gov-form-message {
-  font-size: var(--font-size-body-s);
-}

package/lib/gov/ui/icon/rdt-gov-icon.component.scss

@@ -1,13 +0,0 @@
-:host {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.rdt-gov-icon {
-  width: 16px;
-  height: 16px;
-  font-size: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}

package/lib/gov/ui/select/rdt-gov-select.component.scss

@@ -1,288 +0,0 @@
-.rdt-option-selected {
-  background: var(
-    --gov-autocomplete-item-hover,
-    var(--color-neutral-600)
-  ) !important;
-  color: var(--color-primary-50) !important;
-}
-
-$icon-sizes: (
-  xs: 12px,
-  s: 14px,
-  m: 16px,
-  l: 18px,
-  xl: 20px,
-);
-
-.icon-warning {
-  width: var(--icon-size) !important;
-  height: var(--icon-size) !important;
-}
-
-@each $name, $size in $icon-sizes {
-  .icon-#{$name} {
-    --icon-size: #{$size};
-  }
-}
-
-rdt-gov-select {
-  display: inline-block;
-  width: 100%;
-  max-width: 100%;
-  .gov-form-select {
-    width: 100%;
-    &.has-clear .select {
-      padding-right: calc(1.5rem + var(--spacing-s)) !important;
-    }
-  }
-
-  .gov-form-input {
-    border: none !important;
-    background-color: transparent !important
-    ;
-  }
-
-  .select {
-    display: flex;
-
-    rdt-spinner {
-      position: absolute;
-      right: 0.5rem;
-      width: 1rem;
-      height: 1rem;
-    }
-  }
-
-  $select-sizes: (
-    xs: xs,
-    s: s,
-    m: m,
-    l: l,
-    xl: xl,
-  );
-
-  @each $key, $token in $select-sizes {
-    [size='#{$key}'].gov-form-select .select {
-      min-height: var(--height-component-#{$token});
-      font-size: var(--font-size-body-#{$token});
-      &:hover {
-        background-color: var(--button-outlined-primary-hover);
-      }
-    }
-  }
-
-  [size='xs'].gov-form-select .select {
-    padding: var(--spacing-multiline-vertical-padding-xs)
-      var(--spacing-xs-nudge);
-  }
-  [size='s'].gov-form-select .select {
-    padding: var(--spacing-multiline-vertical-padding-s) var(--spacing-s);
-  }
-  [size='m'].gov-form-select .select {
-    padding: var(--spacing-multiline-vertical-padding-m) var(--spacing-s-nudge);
-  }
-  [size='l'].gov-form-select .select {
-    padding: var(--spacing-multiline-vertical-padding-l) var(--spacing-m);
-  }
-  [size='xl'].gov-form-select .select {
-    padding: var(--spacing-multiline-vertical-padding-xl) var(--spacing-m-nudge);
-  }
-
-  .gov-form-select .select {
-    position: relative;
-    border: none;
-    width: 100%;
-    border-radius: var(--corner-radius-s);
-    background-color: var(--background-block-primary);
-    font-family: var(--font-family);
-    text-align: left;
-  }
-
-  [invalid='true'].gov-form-input {
-    .select {
-      border-color: var(--background-status-error);
-      color: var(--background-status-error);
-    }
-  }
-
-  .icon-arrow {
-    color: var(--text-primary);
-    position: absolute;
-    top: 50%;
-    display: flex;
-    justify-content: center;
-    transform: translateY(-50%);
-    pointer-events: none;
-    right: 0.75rem;
-    width: 0.75rem;
-    height: 0.75rem;
-  }
-
-  .icon-warning {
-    color: var(--icon-error);
-    position: absolute;
-    top: 50%;
-    display: flex;
-    justify-content: center;
-    transform: translateY(-50%);
-    pointer-events: none;
-    right: 1.85rem;
-    width: 0.75rem;
-    height: 0.75rem;
-  }
-
-  .scroll-content {
-    display: flex;
-    align-items: center;
-    color: var(--text-primary);
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .clear-button {
-    display: flex;
-    position: absolute;
-    right: 2rem;
-    top: 50%;
-    transform: translateY(-50%);
-
-    button {
-      padding: 0 !important;
-      min-height: auto !important;
-
-      --icon-size-xs: 1rem;
-    }
-
-    gov-icon[slot='left-icon'] {
-      left: 0 !important;
-      position: inherit !important;
-      top: 0 !important;
-      display: inline !important;
-      transform: none !important;
-    }
-  }
-
-  .element {
-    max-width: 100%;
-  }
-}
-
-.rdt-gov-select-container {
-  width: 100%;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  overflow: hidden;
-  border: 1px solid var(--color-neutral-600);
-  border-radius: 0px;
-  background-color: var(--background-block-primary);
-
-  ul {
-    padding-left: 0;
-    margin-top: 0;
-    margin-bottom: 0;
-    list-style: none;
-    max-height: 14.0625rem;
-    overflow-x: hidden;
-    overflow-y: auto;
-    overscroll-behavior: none;
-
-    .option {
-      font-family: var(--font-family);
-      color: var(--text-primary);
-      border: none;
-      display: flex;
-      align-items: center;
-      padding: 0.75rem 0.5rem;
-      width: 100%;
-      margin: 0;
-      background: none;
-      text-align: left;
-      gov-icon {
-        padding-right: var(--spacing-s);
-      }
-
-      gov-icon.invisible {
-        display: none;
-      }
-
-      &:hover {
-        color: var(--color-primary-50);
-        background: var(--color-neutral-600);
-      }
-    }
-  }
-
-  li {
-    margin-bottom: 0px;
-  }
-
-  .picked {
-    color: var(--icon-success);
-  }
-
-  .search-spinner {
-    --spinner-size: 1.2rem;
-    position: absolute;
-    right: 1rem;
-    top: 100%;
-    transform: translateY(calc(var(--spinner-size) / -2));
-
-    .sis-icon-32-fix {
-      height: var(--spinner-size);
-    }
-  }
-
-  .search-container {
-    width: 100%;
-    position: relative;
-
-    input {
-      font-family: var(--font-family);
-      border-radius: 0px;
-      border-top: 1px;
-      border-left: 1px;
-      border-right: 1px;
-      padding: 0.75rem 0.5rem;
-      width: 100%;
-      background-color: var(--background-block-primary);
-      color: var(--text-primary);
-
-      &:focus-visible {
-        outline: var(0.125rem) solid var(--status-focus);
-        outline-offset: 0;
-      }
-    }
-
-    &.loading input::-webkit-search-cancel-button {
-      position: relative;
-      right: 1rem;
-    }
-  }
-}
-
-$select-sizes: (
-  xs: xs,
-  s: s,
-  m: m,
-  l: l,
-  xl: xl,
-);
-
-@each $key, $token in $select-sizes {
-  [data-size='#{$key}'].rdt-gov-select-container ul li button {
-    font-size: var(--font-size-body-#{$token}) !important;
-    line-height: var(--height-line-#{$token});
-    padding: var(--spacing-multiline-vertical-padding-#{$token});
-  }
-  [data-size='#{$key}'].rdt-gov-select-container input {
-    font-size: var(--font-size-body-#{$token}) !important;
-    padding: var(--spacing-multiline-vertical-padding-#{$token});
-  }
-}
-
-.rdt-gov-select-overlay-panel-top .rdt-gov-select-container {
-  display: flex;
-  flex-direction: column-reverse;
-}