@ks-digital/designsystem-angular 0.0.1-alpha.23 → 0.0.1-alpha.25

package/src/components/details/details.ts

@@ -0,0 +1,69 @@
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ElementRef,
+  input,
+  output,
+  viewChild,
+} from '@angular/core'
+import '@u-elements/u-details'
+
+@Component({
+  selector: 'ksd-details',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <u-details
+      #detailsRef
+      class="ds-details"
+      [attr.data-variant]="variant()"
+      [attr.open]="(open() ?? defaultOpen()) || undefined"
+      [attr.data-color]="dataColor()"
+      [attr.data-size]="dataSize()"
+      (toggle)="onToggle($event)"
+    >
+      <u-summary>
+        <ng-content select="ksd-details-summary" />
+      </u-summary>
+      <div>
+        <ng-content select="ksd-details-content" />
+      </div>
+    </u-details>
+  `,
+  styles: `
+    /* Styles needed since Designsystemet styles doesnt expect an element wrapping .ds-details, which we have */
+    .ds-card > :host(:last-of-type) > .ds-details {
+      border-bottom: 0;
+    }
+
+    .ds-card > :host(:first-of-type) > .ds-details {
+      border-top: 0;
+    }
+
+    :host(:not(:first-of-type)) > .ds-details {
+      border-top: 0;
+      margin-top: 0;
+    }
+  `,
+})
+export class Details {
+  readonly dataSize = input<'sm' | 'md' | 'lg' | undefined>(undefined, {
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    alias: 'data-size',
+  })
+  readonly dataColor = input<string | undefined>(undefined, {
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    alias: 'data-color',
+  })
+  readonly variant = input<'tinted' | 'default'>('default')
+  readonly defaultOpen = input<boolean>(false)
+  readonly open = input<boolean | undefined>(undefined)
+  readonly toggled = output<Event>()
+  private detailsRef = viewChild<ElementRef<HTMLDetailsElement>>('detailsRef')
+
+  onToggle(event: Event) {
+    const details = this.detailsRef()?.nativeElement
+    if (details && details.open !== this.open()) {
+      this.toggled.emit(event)
+    }
+  }
+}

package/src/components/details/index.ts

@@ -0,0 +1,3 @@
+export { Details } from './details'
+export { DetailsContent } from './details-content'
+export { DetailsSummary } from './details-summary'

package/src/components/field/field-counter.ts

@@ -0,0 +1,56 @@
+import { Component, computed, effect, inject, input } from '@angular/core'
+import { ValidationMessage } from '../validation-message'
+import { FieldState } from './field-state'
+
+@Component({
+  selector: 'ksd-field-counter',
+  imports: [ValidationMessage],
+  template: `
+    <div data-field="description" class="ds-sr-only" aria-live="polite">
+      @if (hasExceededLimit()) {
+        {{ excessCount() }} tegn for mye
+      }
+    </div>
+    @if (hasExceededLimit()) {
+      <p ksd-validation-message>{{ excessCount() }} tegn for mye</p>
+    } @else {
+      <p data-field="validation">{{ remainder() }} tegn igjen</p>
+    }
+  `,
+
+  /**
+   * Apply custom styles here to get correct spacing because
+   * the rendered host element from Angular is getting in the way
+   */
+  styles: `
+    :host > * {
+      margin-top: var(--dsc-field-content-spacing);
+    }
+  `,
+})
+export class FieldCounter {
+  /**
+   * The maximum allowed characters.
+   *
+   **/
+  readonly limit = input.required<number>()
+
+  /**
+   * How many characters have been typed.
+   *
+   **/
+  readonly count = input.required<number>()
+  protected readonly remainder = computed(() => this.limit() - this.count())
+  protected readonly excessCount = computed(() => Math.abs(this.remainder()))
+  protected readonly hasExceededLimit = computed(
+    () => this.count() > this.limit(),
+  )
+
+  private fieldState = inject(FieldState)
+
+  constructor() {
+    effect(() => {
+      this.fieldState.hasExceededCounter.set(this.hasExceededLimit())
+    })
+  }
+}

package/src/components/field/field-description.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: '[ksd-field-description]',
+  host: {
+    'data-field': 'description',
+  },
+  template: `<ng-content />`,
+})
+export class FieldDescription {}

package/src/components/field/field-error.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core'
+import { ValidationMessage } from '../validation-message'
+
+@Component({
+  selector: '[ksd-error]',
+  template: `<ng-content />`,
+  hostDirectives: [
+    {
+      directive: ValidationMessage,
+    },
+  ],
+})
+export class FieldError {}

package/src/components/field/field-observer.ts

@@ -0,0 +1,121 @@
+/**
+ * Lifted from Designsystemet core repo.
+ * Takes care of binding ids, labels and aria-describedby attributes
+ *
+ * @param fieldElement - The field element to observe
+ * @returns A function to disconnect the observer
+ * */
+export function fieldObserver(fieldElement: HTMLElement | null) {
+  if (!fieldElement) return
+
+  const elements = new Map<Element, string | null>()
+  const typeCounter = new Map<string, number>() // Track count for each data-field type
+  const uuid = `:${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`
+  let input: Element | null = null
+  let describedby = ''
+
+  const process = (mutations: Partial<MutationRecord>[]) => {
+    const changed: Node[] = []
+    const removed: Node[] = []
+
+    // Merge MutationRecords
+    for (const mutation of mutations) {
+      if (mutation.attributeName) changed.push(mutation.target ?? fieldElement)
+      // @ts-expect-error - addedNodes is not typed
+      changed.push(...(mutation.addedNodes || []))
+      removed.push(...(mutation.removedNodes || []))
+    }
+
+    // Register elements
+    for (const el of changed) {
+      if (!isElement(el)) continue
+
+      if (isLabel(el)) elements.set(el, el.htmlFor)
+      else if (el.hasAttribute('data-field')) elements.set(el, el.id)
+      else if (isInputLike(el)) {
+        input = el
+        describedby = el.getAttribute('aria-describedby') || ''
+      }
+    }
+
+    // Reset removed elements
+    for (const el of removed) {
+      if (!isElement(el)) continue
+
+      if (input === el) input = null
+      if (elements.has(el)) {
+        setAttr(el, isLabel(el) ? 'for' : 'id', elements.get(el))
+        elements.delete(el)
+      }
+    }
+
+    // Connect elements
+    const describedbyIds = [describedby] // Keep original aria-describedby
+    const inputId = input?.id || uuid
+
+    // Reset type counters since we reprocess all elements
+    typeCounter.clear()
+
+    for (const [el, value] of elements) {
+      const descriptionType = el.getAttribute('data-field')
+      let id: string
+
+      if (descriptionType) {
+        // Increment type counter for this type
+        const count = (typeCounter.get(descriptionType) || 0) + 1
+        typeCounter.set(descriptionType, count)
+        id = `${inputId}:${descriptionType}:${count}`
+      } else {
+        id = inputId
+      }
+
+      if (!value) setAttr(el, isLabel(el) ? 'for' : 'id', id) // Ensure we have a value
+      if (descriptionType === 'validation')
+        describedbyIds.unshift(el.id) // Validations to the front
+      else if (descriptionType) describedbyIds.push(el.id) // Other descriptions to the back
+    }
+
+    setAttr(input, 'id', inputId)
+    setAttr(input, 'aria-describedby', describedbyIds.join(' ').trim())
+  }
+
+  const observer = createOptimizedMutationObserver(process)
+  observer.observe(fieldElement, {
+    attributeFilter: ['id', 'for', 'aria-describedby'],
+    attributes: true,
+    childList: true,
+    subtree: true,
+  })
+
+  process([{ addedNodes: fieldElement.querySelectorAll('*') }]) // Initial setup
+  observer.takeRecords() // Clear initial setup queue
+  return () => observer.disconnect()
+}
+
+// Utilities
+export const isElement = (node: Node) => node instanceof Element
+export const isLabel = (node: Node) => node instanceof HTMLLabelElement
+export const isInputLike = (node: unknown): node is HTMLInputElement =>
+  node instanceof HTMLElement &&
+  'validity' in node &&
+  !(node instanceof HTMLButtonElement) // Matches input, textarea, select and form accosiated custom elements
+
+const setAttr = (el: Element | null, name: string, value?: string | null) =>
+  value ? el?.setAttribute(name, value) : el?.removeAttribute(name)
+
+// Speed up MutationObserver by debouncing, clearing internal queue after changes and only running when page is visible
+function createOptimizedMutationObserver(callback: MutationCallback) {
+  const queue: MutationRecord[] = []
+  const observer = new MutationObserver((mutations) => {
+    if (!queue.length) requestAnimationFrame(process)
+    queue.push(...mutations)
+  })
+
+  const process = () => {
+    callback(queue, observer)
+    queue.length = 0 // Reset queue
+    observer.takeRecords() // Clear queue due to DOM changes in callback
+  }
+
+  return observer
+}

package/src/components/field/field-state.ts

@@ -0,0 +1,21 @@
+import { computed, Injectable, signal } from '@angular/core'
+
+@Injectable()
+export class FieldState {
+  /**
+   * Whether the field counter has exceeded its limit
+   */
+  hasExceededCounter = signal(false)
+
+  /**
+   * Whether the field has errors projected from the outside
+   */
+  hasProjectedErrors = signal(false)
+
+  /**
+   * Whether the field has any errors associated with it
+   */
+  hasError = computed(
+    () => this.hasExceededCounter() || this.hasProjectedErrors(),
+  )
+}

package/src/components/field/field.mdx

@@ -0,0 +1,40 @@
+import {
+  Meta,
+  Primary,
+  Canvas,
+  Controls,
+  Story,
+} from '@storybook/addon-docs/blocks'
+
+import * as FieldStories from './field.stories'
+
+<Meta of={FieldStories} />
+
+# Field
+
+`Field` er et hjelpemiddel for å automatisk koble sammen labels, input og feilmeldinger. Field kan brukes sammen med input, textarea og select.
+
+<Primary />
+<Controls />
+
+## Bruk
+
+```tsx
+import {
+  Field,
+  FieldError,
+  Label,
+  Input,
+} from '@ks-digital/designsystem-angular'
+;<ksd-field>
+  <ksd-label>Kort beskrivelse</ksd-label>
+  <input ksd-input type="text" />
+  <ksd-error>Feilmelding</ksd-error>
+</ksd-field>
+```
+
+## Feilmeldinger
+
+Bruk `<ksd-error>` for å sette en feilmelding. Du må selv kontrollere når disse skal vises eller skjules. Det er tillatt å vise flere fielmeldinger av gangen.
+
+<Canvas of={FieldStories.Error} />

package/src/components/field/field.spec.ts

@@ -0,0 +1,131 @@
+import { render, screen } from '@testing-library/angular'
+import userEvent from '@testing-library/user-event'
+import { Input } from '../input/input'
+import { Label } from '../label/label'
+import { Field } from './field'
+import { FieldDescription } from './field-description'
+
+test('should connect checkbox and label', async () => {
+  await render(
+    `
+    <ksd-field>
+        <ksd-label> Check me </ksd-label>
+        <input ksd-input type="checkbox" value="telefon"  />
+    </ksd-field>`,
+    { imports: [Field, Label, Input] },
+  )
+
+  const label = screen.getByText('Check me')
+  const checkbox = screen.getByRole('checkbox')
+
+  expect(label.getAttribute('for')).toBe(checkbox.getAttribute('id'))
+})
+
+describe('should connect checkbox and description', () => {
+  test('should connect checkbox and description', async () => {
+    await render(
+      `
+    <ksd-field>
+        <ksd-label> Check me </ksd-label>
+        <input ksd-input type="checkbox" value="telefon"  />
+        <p ksd-field-description>Description</p>
+    </ksd-field>`,
+      { imports: [Field, Label, Input, FieldDescription] },
+    )
+
+    const checkbox = screen.getByRole('checkbox')
+    const description = screen.getByText('Description')
+
+    expect(checkbox.getAttribute('aria-describedby')).toBe(
+      description.getAttribute('id'),
+    )
+  })
+
+  test('should not connect checkbox and description if description is not provided', async () => {
+    await render(
+      `
+    <ksd-field>
+        <ksd-label> Check me </ksd-label>
+        <input ksd-input type="checkbox" value="telefon"  />
+    </ksd-field>`,
+      { imports: [Field, Label, Input] },
+    )
+
+    const checkbox = screen.getByRole('checkbox')
+    expect(checkbox.getAttribute('aria-describedby')).toBeNull()
+  })
+
+  test('should keep existing aria-describedby', async () => {
+    await render(
+      `
+    <ksd-field>
+        <ksd-label> Check me </ksd-label>
+        <input ksd-input type="checkbox" value="telefon" aria-describedby="existing-id"  />
+    </ksd-field>`,
+      { imports: [Field, Label, Input] },
+    )
+
+    const checkbox = screen.getByRole('checkbox')
+    expect(checkbox.getAttribute('aria-describedby')).toBe('existing-id')
+  })
+
+  test('should pass through a user-supplied id', async () => {
+    await render(
+      `
+    <ksd-field>
+      <ksd-label> Check me </ksd-label>
+        <input ksd-input type="checkbox" value="telefon" id="test" />
+    </ksd-field>`,
+      { imports: [Field, Label, Input] },
+    )
+
+    const input = screen.getByRole('checkbox')
+
+    expect(input).toHaveAttribute('id', 'test')
+  })
+})
+
+describe('FieldCounter', () => {
+  test('should render counter with description and validation message connected to input', async () => {
+    await render(
+      `
+    <ksd-field>
+      <ksd-label> Check me </ksd-label>
+      <input ksd-input [counter]="5" type="text"  />
+    </ksd-field>`,
+      { imports: [Field, Label, Input] },
+    )
+
+    const counter = screen.getByText('5 tegn igjen')
+    const input = screen.getByRole('textbox')
+
+    expect(input.getAttribute('aria-describedby')).toContain(
+      counter.getAttribute('id'),
+    )
+  })
+
+  test('should show a validation message if the input is too long', async () => {
+    await render(
+      `
+    <ksd-field>
+      <ksd-label> Check me </ksd-label>
+      <input ksd-input [counter]="5" type="text"  />
+    </ksd-field>`,
+      { imports: [Field, Label, Input] },
+    )
+
+    const input = screen.getByRole('textbox')
+    const user = userEvent.setup()
+
+    await user.type(input, '123456')
+
+    const visibleMessage = screen.getByText('1 tegn for mye', { selector: 'p' })
+    expect(visibleMessage).toBeInTheDocument()
+
+    const screenReaderMessage = screen.getByText('1 tegn for mye', {
+      selector: 'div',
+    })
+    expect(screenReaderMessage).toBeInTheDocument()
+    expect(screenReaderMessage).toHaveAttribute('aria-live', 'polite')
+  })
+})

package/src/components/field/field.stories.ts

@@ -0,0 +1,98 @@
+import {
+  argsToTemplate,
+  moduleMetadata,
+  type Meta,
+  type StoryObj,
+} from '@storybook/angular'
+import { CommonArgs } from '../../../.storybook/default-args'
+import { Input } from '../input/input'
+import { Label } from '../label/label'
+import { Field } from './field'
+import { FieldDescription } from './field-description'
+import { FieldError } from './field-error'
+
+type FieldArgs = CommonArgs & {
+  readonly: boolean
+  disabled: boolean
+  counter: number
+}
+
+const meta: Meta<Field> = {
+  component: Field,
+  title: 'Komponenter/Field',
+  decorators: [
+    moduleMetadata({
+      imports: [Label, Field, Input, FieldError, FieldDescription],
+    }),
+  ],
+}
+export default meta
+type Story = StoryObj<FieldArgs>
+
+export const Preview: Story = {
+  args: {
+    readonly: false,
+    disabled: false,
+  },
+
+  render: (args) => ({
+    props: args,
+    template: `
+        <ksd-field>
+          <ksd-label>Etternavn</ksd-label>
+          <div ksd-field-description>Etternavn kan ikke inneholde mellomrom</div>
+          <input ksd-input type="text" ${argsToTemplate(args)} />
+        </ksd-field>
+    `,
+  }),
+}
+
+export const Rows: Story = {
+  args: {
+    ...Preview.args,
+  },
+
+  render: (args) => ({
+    props: args,
+    template: `
+        <ksd-field>
+          <ksd-label>Label</ksd-label>
+          <textarea ksd-input type="text" rows="4" ${argsToTemplate(args)}></textarea>
+        </ksd-field>
+    `,
+  }),
+}
+
+export const Counter: Story = {
+  args: {
+    ...Preview.args,
+    counter: 5,
+  },
+
+  render: (args) => ({
+    props: args,
+    template: `
+        <ksd-field>
+          <ksd-label>Label</ksd-label>
+          <input ksd-input [counter]="5" type="text" ${argsToTemplate(args)} />
+        </ksd-field>
+    `,
+  }),
+}
+
+export const Error: Story = {
+  args: {
+    ...Preview.args,
+  },
+
+  render: (args) => ({
+    props: args,
+    template: `
+        <ksd-field>
+          <ksd-label>Navn</ksd-label>
+          <input ksd-input type="text" ${argsToTemplate(args)} />
+          <p ksd-error>Feltet må fylles ut</p>
+        </ksd-field>
+    `,
+  }),
+}

package/src/components/field/field.ts

@@ -0,0 +1,70 @@
+import {
+  afterNextRender,
+  Component,
+  computed,
+  contentChild,
+  contentChildren,
+  effect,
+  ElementRef,
+  inject,
+  input,
+} from '@angular/core'
+import { CommonInputs } from '../common-inputs'
+import { Input } from '../input/input'
+import { Label } from '../label/label'
+import { ValidationMessage } from '../validation-message'
+import { FieldCounter } from './field-counter'
+import { fieldObserver } from './field-observer'
+import { FieldState } from './field-state'
+
+/**
+ * Use the Field component to connect inputs and labels
+ */
+@Component({
+  selector: 'ksd-field',
+  hostDirectives: [
+    {
+      directive: CommonInputs,
+      inputs: ['data-size', 'data-color'],
+    },
+  ],
+  host: {
+    class: 'ds-field',
+    '[attr.dataPosition]': 'position()',
+  },
+  template: `
+    <ng-content />
+    @if (hasCounter()) {
+      <ksd-field-counter [limit]="limit() ?? 0" [count]="count() ?? 0" />
+    }
+  `,
+  imports: [FieldCounter],
+  providers: [FieldState],
+})
+export class Field {
+  /**
+   * Position of toggle inputs (radio, checkbox, switch) in field
+   * @default start
+   */
+  position = input<'start' | 'end'>('start')
+
+  private readonly fieldState = inject(FieldState)
+  private readonly input = contentChild(Input)
+  private readonly label = contentChild(Label)
+  private readonly projectedErrors = contentChildren(ValidationMessage)
+
+  private readonly el = inject(ElementRef)
+  protected readonly count = computed(() => this.input()?.value().length)
+  protected readonly limit = computed(() => this.input()?.counter())
+  protected readonly hasCounter = computed(() => this.limit())
+
+  constructor() {
+    afterNextRender(() => {
+      fieldObserver(this.el.nativeElement)
+    })
+
+    effect(() => {
+      this.fieldState.hasProjectedErrors.set(this.projectedErrors().length > 0)
+    })
+  }
+}

package/src/components/field/index.ts

@@ -0,0 +1,3 @@
+export { Field } from './field'
+export { FieldDescription } from './field-description'
+export { FieldError } from './field-error'

package/src/components/fieldset/fieldset-description.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'p[ksd-fieldset-description]',
+  template: `<ng-content />`,
+  host: {},
+})
+export class FieldsetDescription {}

package/src/components/fieldset/fieldset-legend.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'legend[ksd-fieldset-legend]',
+  host: {
+    role: 'legend',
+    class: 'ds-label',
+  },
+  template: ` <ng-content /> `,
+})
+export class FieldsetLegend {}