@sebgroup/green-angular 6.0.4 → 6.1.0-rc.20250730100346703

package/src/v-angular/radio/index.ts

@@ -0,0 +1,2 @@
+export * from './radio.component'
+export * from './radio.module'

package/src/v-angular/radio/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

package/src/v-angular/radio/radio.component.html

@@ -0,0 +1,84 @@
+<!-- LOCKED INPUT -->
+<div *ngIf="locked && state">
+  <div
+    [id]="id + '-radio'"
+    class="nggv-field--locked"
+    [attr.name]="name"
+    [attr.value]="value"
+  >
+    {{ label }}
+    <ng-template
+      *ngTemplateOutlet="labelContentTpl ?? null; context: { $implicit: value }"
+    ></ng-template>
+  </div>
+</div>
+
+<!-- INPUT WRAPPER -->
+<ng-container *ngIf="!locked">
+  <div>
+    <!-- RADIO BUTTON FIELD -->
+    <label [attr.for]="id + '-radio'" class="form-control">
+      <input
+        #input
+        type="radio"
+        [attr.id]="id + '-radio'"
+        [attr.name]="name"
+        [attr.value]="value"
+        [attr.required]="required || null"
+        [disabled]="disabled"
+        [autofocus]="autofocus"
+        [attr.aria-label]="description"
+        [checked]="state"
+        (click)="$event.stopPropagation()"
+        (change)="onInputChange($event)"
+        (focus)="onFocus($event)"
+        (blur)="onBlur($event)"
+      />
+
+      <!-- LABEL -->
+      {{ label }}
+      <ng-template
+        *ngTemplateOutlet="
+          labelContentTpl ?? null;
+          context: { $implicit: value }
+        "
+      ></ng-template>
+      <i></i>
+    </label>
+  </div>
+
+  <!-- ERRORS -->
+  <ng-container *transloco="let t; read: scope">
+    <div
+      class="form-info form-info--error"
+      [attr.for]="id + '-radio'"
+      *ngIf="invalid && (error || ngControl?.invalid)"
+    >
+      <span class="error-icon">
+        <gds-icon-triangle-exclamation
+          width="16"
+          height="16"
+          [solid]="true"
+          *nggCoreElement
+        ></gds-icon-triangle-exclamation>
+      </span>
+      <span
+        *ngIf="error; else errorsRef"
+        [attr.data-thook]="thook + '-errorlabel'"
+      >
+        {{ error }}
+      </span>
+      <ng-template #errorsRef>
+        <span
+          *ngIf="firstError as error"
+          [attr.data-thook]="thook + '-errorlabel'"
+        >
+          {{ t('error.field' + error?.code, error?.params) }}
+        </span>
+      </ng-template>
+    </div>
+  </ng-container>
+
+  <!-- CHILDREN -->
+  <ng-content></ng-content>
+</ng-container>

package/src/v-angular/radio/radio.component.scss

@@ -0,0 +1,86 @@
+@use '../../../../chlorophyll/scss/components/form/radio/mixins' as mixins;
+@use '../../../../chlorophyll/scss/components/form/common/mixins' as common;
+
+:host {
+  --gds-ref-pallet-base200: hsl(0, 0%, 91%);
+  --gds-ref-pallet-base500: hsl(0, 0%, 68%);
+  --gds-ref-pallet-base600: hsl(0, 0%, 53%);
+  --gds-comp-checkbox-container-height: 1rem;
+  --gds-comp-checkbox-container-width: 1rem;
+  --gds-comp-checkbox-container-color: var(#fff);
+  --gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base200);
+  --gds-comp-checkbox-border-color: #333;
+  --gds-comp-checkbox-border-radius: 2px;
+  --gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);
+  --gds-comp-checkbox-container-color-selected: #333;
+  --gds-comp-checkbox-border-color-selected: var(#fff);
+  --gds-comp-checkbox-border-color-focus: var(--gds-sys-color-blue-dark-2);
+  --gds-comp-radio-container-height: 1rem;
+  --gds-comp-radio-container-width: 1rem;
+  --gds-comp-radio-border-radius: 50%;
+  --gds-comp-radio-ring-width: 0.1875rem;
+  --gds-comp-radio-container-background-disabled: var(--gds-ref-pallet-base200);
+  --gds-comp-radio-border: #333;
+  --gds-comp-radio-border-checked: #333;
+  --gds-comp-radio-border-hover: var(--gds-ref-pallet-base600);
+  --gds-comp-radio-border-checked-hover: var(--gds-ref-pallet-base600);
+  --gds-comp-radio-border-disabled: var(--gds-ref-pallet-base500);
+  --gds-comp-radio-ring: var(#fff);
+  --gds-comp-radio-ring-checked: var(#fff);
+  --gds-comp-radio-ring-hover: var(#fff);
+  --gds-comp-radio-ring-checked-hover: var(#fff);
+  --gds-comp-radio-ring-disabled: var(#fff);
+  --gds-comp-radio-dot: transparent;
+  --gds-comp-radio-dot-checked: #333;
+  --gds-comp-radio-dot-hover: var(--gds-ref-pallet-base600);
+  --gds-comp-radio-dot-checked-hover: var(--gds-ref-pallet-base600);
+  --gds-comp-radio-dot-disabled: var(--gds-ref-pallet-base600);
+
+  .nggv-field--locked {
+    display: inline-block;
+    border-radius: 0.25em;
+    position: relative;
+    min-height: 2em;
+    padding: 0.5em 0.75em 0.5em 0em;
+  }
+
+  .form-control {
+    @include common.add-form-control();
+  }
+
+  @include mixins.add-radio();
+
+  &.small {
+    .form-control {
+      padding: 0.25rem;
+    }
+
+    .form-control input[type='radio'] ~ i {
+      margin-right: 0.5rem;
+    }
+  }
+
+  .form-info {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    width: 100%;
+  }
+
+  .form-info {
+    font-weight: 500;
+    padding-left: 1rem;
+    margin-top: -0.25rem;
+  }
+
+  .form-info--error {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5em;
+    color: #9f000a;
+
+    .error-icon {
+      margin-top: 0.128rem;
+      align-items: center;
+    }
+  }
+}

package/src/v-angular/radio/radio.component.spec.ts

@@ -0,0 +1,55 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'
+import {
+  FormControl,
+  FormsModule,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { TranslocoTestingModule } from '@jsverse/transloco'
+
+import { NggvI18nTestModule } from '@sebgroup/green-angular/src/v-angular/i18n'
+import en from '../i18n/i18n.json'
+
+import '../core/core.globals'
+
+import { NggvRadioComponent } from './radio.component'
+
+describe('[NggvCore]', () => {
+  // ----------------------------------------------------------------------------
+  // RadioComponent - constructor()
+  // ----------------------------------------------------------------------------
+  describe('RadioComponent - constructor()', () => {
+    let component: NggvRadioComponent
+    let fixture: ComponentFixture<NggvRadioComponent>
+
+    beforeEach(waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [NggvRadioComponent],
+        providers: [{ provide: NgControl, useValue: new FormControl() }],
+        imports: [
+          FormsModule,
+          ReactiveFormsModule,
+          NggvI18nTestModule,
+          TranslocoTestingModule.forRoot({
+            langs: { en },
+            translocoConfig: {
+              availableLangs: ['en'],
+              defaultLang: 'en',
+            },
+            preloadLangs: true,
+          }),
+        ],
+      }).compileComponents()
+    }))
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(NggvRadioComponent)
+      component = fixture.componentInstance
+      fixture.detectChanges()
+    })
+
+    it('should create', () => {
+      expect(component).toBeTruthy()
+    })
+  })
+})

package/src/v-angular/radio/radio.component.ts

@@ -0,0 +1,149 @@
+import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js'
+
+import {
+  ChangeDetectorRef,
+  Component,
+  HostBinding,
+  Inject,
+  Injectable,
+  Input,
+  OnDestroy,
+  OnInit,
+  Optional,
+  Self,
+} from '@angular/core'
+import { NgControl } from '@angular/forms'
+import { TRANSLOCO_SCOPE, TranslocoScope } from '@jsverse/transloco'
+
+import { NggvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor'
+
+/** @internal Internal class used to uncheck radio buttons with the matching name. */
+@Injectable()
+export class NggvRadioControlRegistry {
+  private _radios: any[] = []
+
+  add(control: NgControl, radio: NggvRadioComponent) {
+    this._radios.push([control, radio])
+  }
+
+  remove(radio: NggvRadioComponent) {
+    for (let i = this._radios.length - 1; i >= 0; --i) {
+      if (this._radios[i][1] === radio) {
+        this._radios.splice(i, 1)
+        return
+      }
+    }
+  }
+
+  select(radio: NggvRadioComponent) {
+    this._radios.forEach((controlPair) => {
+      if (this._isSameGroup(controlPair, radio) && controlPair[1] !== radio) {
+        controlPair[1].writeValue(radio.value)
+      }
+    })
+  }
+
+  private _isSameGroup(
+    controlPair: [NgControl, NggvRadioComponent],
+    radio: NggvRadioComponent,
+  ) {
+    if (!controlPair[0].control) return false
+    return (
+      //@ts-expect-error internal properties not exposed
+      controlPair[0]._parent === radio.ngControl._parent &&
+      controlPair[1].name === radio.name
+    )
+  }
+}
+
+/**
+ * Use radio buttons when users must select one option in a list with exclusive options out of a set of two or more options.
+ * https://designlibrary.sebgroup.com/components/component-radiobutton
+ */
+@Component({
+  selector: 'nggv-radio',
+  templateUrl: './radio.component.html',
+  styleUrls: ['./radio.component.scss'],
+  providers: [NggvRadioControlRegistry],
+})
+export class NggvRadioComponent
+  extends NggvBaseControlValueAccessorComponent
+  implements OnInit, OnDestroy
+{
+  /**
+   * Special property used for selecting DOM elements during automated UI testing.
+   */
+  @HostBinding('attr.data-thook') @Input() thook: string | null | undefined =
+    'radio'
+  /**
+   * Sets class on host element based on size input for styling
+   */
+  @HostBinding('class') @Input() size: 'small' | 'large' = 'large'
+  /**
+   * Syncs a FormControl in an existing FormGroup to a form control element by name.
+   */
+  @Input() formControlName?: string
+  /**
+   * Creates a new RadioComponent
+   * @param ngControl optional FormControl provided when component is used in a form, through dependency injection.
+   * @param registry internal registry used to uncheck radio buttons with the matching name, through dependency injection.
+   * @param cdr change detection reference for rendering purposes.
+   */
+  constructor(
+    @Self() @Optional() public ngControl: NgControl,
+    @Optional()
+    @Inject(TRANSLOCO_SCOPE)
+    protected translocoScope: TranslocoScope,
+    protected registry: NggvRadioControlRegistry,
+    protected cdr: ChangeDetectorRef,
+  ) {
+    super(ngControl, translocoScope, cdr)
+  }
+
+  ngOnInit() {
+    super.ngOnInit()
+    this._checkName()
+    this.registry.add(this.ngControl, this)
+  }
+
+  ngOnDestroy() {
+    this.registry.remove(this)
+  }
+
+  /** @internal */
+  onInputChange(event: Event) {
+    event.stopPropagation()
+    if (this.disabled) return
+    this.onChange(this.state)
+  }
+
+  /** Writes a new value of true or false based on if argument matches this components value property. */
+  writeValue(value: any): void {
+    // Phantom null value on first load https://github.com/angular/angular/pull/38140
+    super.writeValue(value === this.value)
+  }
+
+  /** Registers a callback function that is called when the child input element's value changes. */
+  registerOnChange(fn: (value: any) => any) {
+    // Override default to update registry
+    this.onChange = () => {
+      fn(this.value)
+      this.registry.select(this)
+    }
+  }
+
+  /** Checks that the name properties match and updates name property if only formControlName is given. */
+  private _checkName(): void {
+    if (
+      this.name &&
+      this.formControlName &&
+      this.name !== this.formControlName
+    ) {
+      throw new Error(`
+      If you define both a name and a formControlName attribute on your radio button, their values
+      must match. Ex: <input type="radio" formControlName="food" name="food">
+    `)
+    }
+    if (!this.name && this.formControlName) this.name = this.formControlName
+  }
+}

package/src/v-angular/radio/radio.module.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common'
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'
+
+import { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared'
+import { NggvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n'
+import { NggvRadioComponent } from './radio.component'
+
+@NgModule({
+  declarations: [NggvRadioComponent],
+  imports: [CommonModule, NggvI18nModule, NggCoreWrapperModule],
+  exports: [NggvRadioComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NggvRadioModule {}

package/src/v-angular/radio/radio.stories.ts

@@ -0,0 +1,175 @@
+/* eslint-disable no-console */
+import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js'
+
+import { CommonModule } from '@angular/common'
+import { CUSTOM_ELEMENTS_SCHEMA, importProvidersFrom } from '@angular/core'
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms'
+import {
+  applicationConfig,
+  Meta,
+  moduleMetadata,
+  StoryFn,
+} from '@storybook/angular'
+
+import { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared'
+import { NggvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n'
+import { NggvRadioComponent } from './radio.component'
+
+interface StoryInputListener {
+  selected: string
+  action: (event: Event) => void
+}
+
+const meta: Meta<NggvRadioComponent> = {
+  title: 'V-Angular/Radio',
+  component: NggvRadioComponent,
+  decorators: [
+    applicationConfig({
+      providers: [importProvidersFrom(NggvI18nModule)],
+    }),
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NggvI18nModule,
+        NggCoreWrapperModule,
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }),
+  ],
+  argTypes: {
+    size: {
+      options: ['large', 'small'],
+      control: {
+        type: 'select',
+        labels: {
+          large: 'Large',
+          small: 'Small',
+        },
+      },
+    },
+  },
+}
+
+export default meta
+
+const Template: StoryFn<NggvRadioComponent & StoryInputListener> = (
+  args: any,
+) => ({
+  template: /*html*/ `
+    <nggv-radio
+      [label]="label"
+      [name]="name"
+      [value]="name + '1'"
+      [error]="error"
+      [invalid]="invalid"
+      [size]="size"
+      [ngModel]="selected"
+      (ngModelChange)="action($event)">
+    </nggv-radio>
+    <nggv-radio
+      [label]="label"
+      [name]="name"
+      [error]="error"
+      [invalid]="invalid"
+      [size]="size"
+      [value]="name + '2'"
+      [ngModel]="selected"
+      (ngModelChange)="action($event)">
+    </nggv-radio>
+    <nggv-radio
+      [label]="label"
+      [name]="name"
+      [error]="error"
+      [invalid]="invalid"
+      [size]="size"
+      [value]="name + '3'"
+      [ngModel]="selected"
+      (ngModelChange)="action($event)">
+    </nggv-radio>
+  `,
+  props: {
+    ...args,
+  },
+})
+
+const TemplateWithFormControl: StoryFn<NggvRadioComponent & any> = (
+  args: NggvRadioComponent & any,
+) => {
+  const ctrl = new FormControl(args.selected)
+  ctrl.valueChanges.subscribe(console.log)
+  const toggleDisableField = () => {
+    if (ctrl.disabled) return ctrl.enable()
+    ctrl.disable()
+  }
+  return {
+    template: /*html*/ `
+    <label class="gds-field-label" style="margin-bottom: 0.25em">Field that displays disabled as locked</label>
+    <nggv-radio
+      [name]="name"
+      [value]="name + '1'"
+      [formControl]="formControl"
+      [locked]="locked"
+      [error]="error"
+      [invalid]="invalid"
+      [size]="size"
+      [displayDisabledAsLocked]="displayDisabledAsLocked">
+      <ng-template #labelTpl>{{label}} 1</ng-template>
+    </nggv-radio>
+    <nggv-radio
+      [name]="name"
+      [value]="name + '2'"
+      [formControl]="formControl"
+      [locked]="locked"
+      [error]="error"
+      [invalid]="invalid"
+      [size]="size"
+      [displayDisabledAsLocked]="displayDisabledAsLocked">
+      <ng-template #labelTpl>{{label}} 2</ng-template>
+    </nggv-radio>
+    <nggv-radio
+      [name]="name"
+      [value]="name + '3'"
+      [formControl]="formControl"
+      [locked]="locked"
+      [error]="error"
+      [invalid]="invalid"
+      [size]="size"
+      [displayDisabledAsLocked]="displayDisabledAsLocked">
+      <ng-template #labelTpl>{{label}} 3</ng-template>
+    </nggv-radio>
+    <div style="margin-top: 1rem">
+      <button type="button" class="gds-button" (click)="disableFn()">Toggle disable control</button>
+    </div>
+  `,
+    props: {
+      ...args,
+      formControl: ctrl,
+      disableFn: toggleDisableField,
+    },
+  }
+}
+
+export const Primary = Template.bind({})
+Primary.args = {
+  label: 'Radio label',
+  name: 'radio',
+  selected: 'radio2',
+  error: '',
+  invalid: false,
+  size: 'large',
+}
+
+export const WithLockedInput = TemplateWithFormControl.bind({})
+WithLockedInput.args = {
+  ...Primary.args,
+  locked: false,
+}
+
+export const WithDisplayDisabledAsLocked = TemplateWithFormControl.bind({})
+WithDisplayDisabledAsLocked.args = {
+  ...Primary.args,
+  locked: false,
+  displayDisabledAsLocked: true,
+}

package/src/v-angular/slug/index.ts

@@ -0,0 +1,2 @@
+export * from './slug.pipe'
+export * from './slug.module'

package/src/v-angular/slug/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

package/src/v-angular/slug/slug.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+
+import { SlugPipe } from './slug.pipe'
+
+@NgModule({
+  declarations: [SlugPipe],
+  imports: [CommonModule],
+  exports: [SlugPipe],
+})
+export class NggvSlugPipeModule {}

package/src/v-angular/slug/slug.pipe.spec.ts

@@ -0,0 +1,13 @@
+import { SlugPipe } from './slug.pipe'
+
+describe('[NggvCore]', () => {
+  // ----------------------------------------------------------------------------
+  // SlugPipe - constructor()
+  // ----------------------------------------------------------------------------
+  describe('SlugPipe - constructor()', () => {
+    it('create an instance', () => {
+      const pipe = new SlugPipe()
+      expect(pipe).toBeTruthy()
+    })
+  })
+})

package/src/v-angular/slug/slug.pipe.ts

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+/** Pipe used to transform text with special characters into a simple kebab-case id. */
+@Pipe({
+  name: 'slug',
+})
+export class SlugPipe implements PipeTransform {
+  /**
+   * Function for executing the transformation to kebab-case id.
+   * @param value the text with special characters which to transform.
+   */
+  transform(value?: string): unknown {
+    if (!value) {
+      return value
+    }
+    return value
+      .toLowerCase()
+      .replace(/[^\w ]+/g, '')
+      .replace(/ +/g, '-')
+  }
+}

package/src/v-angular/slug/slug.stories.ts

@@ -0,0 +1,45 @@
+import { CommonModule } from '@angular/common'
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular'
+
+import { SlugPipe } from './slug.pipe'
+
+interface PipeInput {
+  rawValue: string
+}
+
+export default {
+  title: 'V-Angular/Slug',
+  decorators: [
+    moduleMetadata({
+      declarations: [SlugPipe],
+      imports: [CommonModule],
+    }),
+  ],
+  argTypes: {
+    rawValue: {
+      control: 'text',
+    },
+  },
+} as Meta
+
+const Template: StoryFn<PipeInput> = (args: PipeInput) => ({
+  template: `
+    <label class="gds-field-label">Transformed value:</label>
+    <div class="pipe-result">
+      {{ rawValue | slug }}
+    </div>`,
+  styles: [
+    `.pipe-result {
+    border: 1px solid silver;
+    border-radius: 0.25em;
+    padding: 1em;
+    min-height: 1.6rem;
+  }`,
+  ],
+  props: args,
+})
+
+export const Primary = Template.bind({})
+Primary.args = {
+  rawValue: 'Hej hOpSan!',
+}

package/src/v-angular/table/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Public API Surface of table
+ */
+
+export * from './table.component'
+export * from './table.directive'
+export * from './tr-thook.pipe'
+export * from './table.models'
+export * from './table.module'