@ngrdt/gov 0.0.59 → 0.0.60

package/index.d.ts

@@ -1,10 +1,13 @@
+import * as _ngrdt_button from '@ngrdt/button';
+import { RdtButtonBase } from '@ngrdt/button';
+import * as _ngrdt_icon from '@ngrdt/icon';
+import { RdtIcon, RdtIconComponent } from '@ngrdt/icon';
 import * as _angular_core from '@angular/core';
-import { ElementRef, OnDestroy } from '@angular/core';
-import { GovFormInput } from '@gov-design-system-ce/angular';
+import { Injector, ElementRef, OnDestroy } from '@angular/core';
 import { RdtBooleanResult } from '@ngrdt/core';
-import { RdtNumericInputComponent, RdtSelectOfflineDatasourceProviderDirective, RdtBaseSelectCommonComponent, RdtTextInputComponent } from '@ngrdt/forms';
-import { RdtIcon } from '@ngrdt/icon';
 import { Nullable } from '@ngrdt/utils';
+import { RdtCheckboxComponent, RdtNumericInputComponent, RdtSelectOfflineDatasourceProviderDirective, RdtBaseSelectCommonComponent, RdtTextInputComponent } from '@ngrdt/forms';
+import { GovFormInput } from '@gov-design-system-ce/angular';
 
 type GovSize = 'xs' | 's' | 'm' | 'l' | 'xl';
 type GovColor = 'primary' | 'secondary' | 'neutral' | 'success' | 'warning' | 'error';
@@ -16,6 +19,66 @@ declare const DEFAULT_GOV_BUTTON_COLOR: GovColor;
 declare const DEFAULT_GOV_BUTTON_TYPE: GovButtonType;
 declare const DEFAULT_GOV_BUTTON_SIZE: GovSize;
 
+declare class RdtGovButtonComponent extends RdtButtonBase<RdtIcon> {
+    protected readonly injector: Injector;
+    readonly focusElement: _angular_core.WritableSignal<HTMLElement | null>;
+    readonly ariaElement: _angular_core.WritableSignal<HTMLElement | null>;
+    readonly anchorElement: _angular_core.WritableSignal<HTMLElement | null>;
+    readonly appearanceInput: _angular_core.InputSignal<GovButtonType>;
+    readonly appearance: _angular_core.WritableSignal<GovButtonType>;
+    readonly colorInput: _angular_core.InputSignal<GovColor>;
+    readonly color: _angular_core.WritableSignal<GovColor>;
+    readonly size: _angular_core.InputSignal<GovSize>;
+    readonly iconStartInput: _angular_core.InputSignal<Nullable<RdtIcon>>;
+    readonly expandedInput: _angular_core.InputSignal<boolean>;
+    readonly expanded: _angular_core.WritableSignal<boolean>;
+    readonly iconStart: _angular_core.WritableSignal<Nullable<RdtIcon>>;
+    private readonly govButton;
+    private readonly buttonEffect;
+    constructor();
+    focus(): void;
+    canFocus(): RdtBooleanResult;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdtGovButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RdtGovButtonComponent, "rdt-gov-button", never, { "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "colorInput": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "iconStartInput": { "alias": "iconStart"; "required": false; "isSignal": true; }; "expandedInput": { "alias": "expanded"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class RdtGovIconComponent extends RdtIconComponent<string> {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdtGovIconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RdtGovIconComponent, "rdt-gov-icon", never, {}, {}, never, never, true, never>;
+}
+
+declare function provideNgrdtGov(options?: {}): (_angular_core.EnvironmentProviders | {
+    provide: _angular_core.InjectionToken<_angular_core.Type<_ngrdt_icon.RdtIconBaseInt>>;
+    useValue: typeof RdtGovIconComponent;
+} | {
+    provide: _angular_core.InjectionToken<_angular_core.Type<_ngrdt_button.RdtButtonBaseInt<string>>>;
+    useValue: typeof RdtGovButtonComponent;
+} | {
+    provide: _angular_core.InjectionToken<Record<RdtIcon, string>>;
+    useValue: {
+        "chevron-right": string;
+        "chevron-down": string;
+    };
+})[];
+
+interface RdtGovConfig {
+    iconsPath?: string;
+    [key: string]: any;
+}
+declare function initRdtGov(config?: RdtGovConfig): void;
+
+declare class RdtGovCheckboxComponent extends RdtCheckboxComponent {
+    readonly labelPosition: _angular_core.WritableSignal<GovLabelPosition>;
+    readonly labelPositionInput: _angular_core.InputSignal<GovLabelPosition>;
+    readonly size: _angular_core.WritableSignal<"xs" | "s" | "m" | "l" | "xl">;
+    readonly sizeInput: _angular_core.InputSignal<"xs" | "s" | "m" | "l" | "xl">;
+    onInput(event: Event): void;
+    focus(): void;
+    canFocus(): RdtBooleanResult;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdtGovCheckboxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RdtGovCheckboxComponent, "rdt-gov-checkbox", never, { "labelPositionInput": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "sizeInput": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 declare class RdtGovNumberInputComponent extends RdtNumericInputComponent {
     private readonly renderer;
     protected readonly govInput: _angular_core.Signal<ElementRef<GovFormInput> | undefined>;
@@ -104,5 +167,5 @@ declare class RdtGovTextInputComponent extends RdtTextInputComponent {
 
 declare function forceFocus(input: HTMLInputElement): void;
 
-export { DEFAULT_GOV_BUTTON_COLOR, DEFAULT_GOV_BUTTON_SIZE, DEFAULT_GOV_BUTTON_TYPE, RdtGovNumberInputComponent, RdtGovSelectComponent, RdtGovSelectOfflineProviderDirective, RdtGovTextInputComponent, forceFocus };
-export type { GovButtonType, GovColor, GovLabelPosition, GovMessageVariant, GovSize };
+export { DEFAULT_GOV_BUTTON_COLOR, DEFAULT_GOV_BUTTON_SIZE, DEFAULT_GOV_BUTTON_TYPE, RdtGovButtonComponent, RdtGovCheckboxComponent, RdtGovIconComponent, RdtGovNumberInputComponent, RdtGovSelectComponent, RdtGovSelectOfflineProviderDirective, RdtGovTextInputComponent, forceFocus, initRdtGov, provideNgrdtGov };
+export type { GovButtonType, GovColor, GovLabelPosition, GovMessageVariant, GovSize, RdtGovConfig };

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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,23 @@
+.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

@@ -0,0 +1,13 @@
+: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

@@ -0,0 +1,261 @@
+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;
+}

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@ngrdt/gov",
-  "version": "0.0.59",
+  "version": "0.0.60",
   "peerDependencies": {
     "@angular/core": "^20.0.0",
     "@angular/forms": "^20.0.0",
     "@gov-design-system-ce/angular": "^1.3.1",
     "rxjs": "~7.8.0",
-    "@ngrdt/core": "^0.0.59",
-    "@ngrdt/forms": "^0.0.59",
-    "@ngrdt/icon": "^0.0.59",
-    "@ngrdt/utils": "^0.0.59",
+    "@ngrdt/core": "^0.0.60",
+    "@ngrdt/forms": "^0.0.60",
+    "@ngrdt/icon": "^0.0.60",
+    "@ngrdt/utils": "^0.0.60",
     "@angular/cdk": "^20.2.0"
   },
   "sideEffects": false,

package/styles.scss

@@ -0,0 +1,6 @@
+@use '@gov-design-system-ce/styles/lib/tokens' as *;
+@use '@gov-design-system-ce/styles/lib/styles' as *;
+@use '@gov-design-system-ce/styles/lib/layout' as *;
+@use '@gov-design-system-ce/styles/lib/components' as *;
+// OUR CUSTOMIZATION
+@use '../src/lib/gov/ui/menu/rdt-gov-menu' as *;