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

package/src/components/details/controlled-details.ts

@@ -1,63 +0,0 @@
-import { Component, computed, signal } from '@angular/core'
-import { Button } from '../button'
-import { Details } from './details'
-import { DetailsContent } from './details-content'
-import { DetailsSummary } from './details-summary'
-
-@Component({
-  selector: 'fiks-controlled-details',
-  imports: [Details, DetailsContent, DetailsSummary, Button],
-  template: `
-    <button
-      ksd-button
-      variant="secondary"
-      style="margin-bottom: .5em;"
-      (click)="toggleOpen()"
-    >
-      {{ toggleOpenText() }}
-    </button>
-    <ksd-details [open]="open1()" (toggled)="open1.set(!open1())">
-      <ksd-details-summary>Enkeltpersonforetak</ksd-details-summary>
-      <ksd-details-content>
-        Skal du starte for deg selv? Enkeltpersonforetak er ofte den enkleste
-        måten å etablere bedrift på. Denne organisasjonsformen har både fordeler
-        og ulemper. Det gir deg stor grad av frihet, men kan også gi betydelig
-        risiko fordi du har personlig ansvar for økonomien.
-      </ksd-details-content>
-    </ksd-details>
-    <ksd-details [open]="open2()" (toggled)="open2.set(!open2())">
-      <ksd-details-summary>Aksjeselskap (AS)</ksd-details-summary>
-      <ksd-details-content>
-        Planlegger du å starte næringsvirksomhet alene eller sammen med andre?
-        Innebærer næringsvirksomheten en økonomisk risiko? Vil du ha rettigheter
-        som arbeidstaker og muligheten til at andre kan investere i selskapet
-        ditt? Da kan aksjeselskap være en hensiktsmessig organisasjonsform.
-      </ksd-details-content>
-    </ksd-details>
-    <ksd-details [open]="open3()" (toggled)="open3.set(!open3())">
-      <ksd-details-summary>Ansvarlig selskap (ANS/DA)</ksd-details-summary>
-      <ksd-details-content>
-        Skal dere starte opp egen virksomhet sammen? Samarbeider dere godt?
-        Krever virksomheten små investeringer og innebærer liten økonomisk
-        risiko? Da kan ansvarlig selskap være aktuelt.
-      </ksd-details-content>
-    </ksd-details>
-  `,
-})
-export class ControlledDetails {
-  open1 = signal(false)
-  open2 = signal(false)
-  open3 = signal(false)
-
-  isOpen = computed(() =>
-    [this.open1(), this.open2(), this.open3()].every(Boolean),
-  )
-  toggleOpenText = computed(() => (this.isOpen() ? 'Lukk alle' : 'Åpne alle'))
-
-  toggleOpen = () => {
-    const isOpen = this.isOpen()
-    this.open1.set(!isOpen)
-    this.open2.set(!isOpen)
-    this.open3.set(!isOpen)
-  }
-}

package/src/components/details/details-content.ts

@@ -1,7 +0,0 @@
-import { Component } from '@angular/core'
-
-@Component({
-  selector: 'ksd-details-content',
-  template: `<ng-content />`,
-})
-export class DetailsContent {}

package/src/components/details/details-summary.ts

@@ -1,7 +0,0 @@
-import { Component } from '@angular/core'
-
-@Component({
-  selector: 'ksd-details-summary',
-  template: `<ng-content />`,
-})
-export class DetailsSummary {}

package/src/components/details/details.mdx

@@ -1,89 +0,0 @@
-import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks'
-import * as DetailsStories from './details.stories'
-
-<Meta of={DetailsStories} />
-
-# Details
-
-Med `Details` kan du presentera mykje innhald på liten plass i ei eller fleire rader. Heile rada er klikkbar og let brukarar opna eller lukka visninga av innhaldet under.
-
-<Primary />
-<Controls />
-
-## Bruk
-
-```html
-/* Utan ramme */
-<ksd-details>
-  <ksd-details-summary>Vedlegg</ksd-details-summary>
-  <ksd-details-content>Vedlegg 1, vedlegg 2, vedlegg 3</ksd-details-content>
-</ksd-details>
-
-/* Med ramme */
-
-<article ksd-card>
-  <ksd-details>
-    <ksd-details-summary>Vedlegg</ksd-details-summary>
-    <ksd-details-content>Vedlegg 1, vedlegg 2, vedlegg 3</ksd-details-content>
-  </ksd-details>
-</article>
-```
-
-## Kodeeksempler
-
-### Med ramme
-
-`Details` kan visast med ramme ved å leggje den i eit `Card`.
-Dette kan passa i tilfelle der `Details` ikkje fyller heile sida, eller når det berre er ei rad.
-
-<Canvas of={DetailsStories.InCard} />
-
-### Med fargar
-
-`Details` kan visast i fargar frå temaet ditt.
-
-<Canvas of={DetailsStories.InCardWithColor} />
-
-#### Kontrollert
-
-`Details` held sjølv styr på om den er open eller lukka, men dette kan òg kontrollerast utanfrå.
-
-<Canvas of={DetailsStories.Controlled} />
-
-## Retningslinjer
-
-Ikkje bruk `Details` til å skjula innhald for å gjera sida "ryddigare". Når vi skjuler innhold er det fare for at brukerne ikke se innholdet i det hele tatt. Finn ut om du faktisk må skjula innhald og ver klar over kvifor du gjer det.
-
-**Passar til å**
-
-- samla innhald
-- gjera det frivillig å sjå innhald som er mindre viktig
-- visa tilleggsinformasjon som kan vera til hjelp for brukarane
-
-**Passar ikkje til å**
-
-- visa viktig innhald som alle bør sjå når dei kjem til sida
-- oppsummera feilmeldingar - bruk heller [`ErrorSummary`](/docs/komponenter-errorsummary--docs)
-
-### Unngå nøsta lister
-
-Ikkje legg ein `Details` inni ein annan, det vi kallar nøsta lister. Det kan bli forvirrande for brukaren å forstå kva som er opna og lukka, spesielt når fleire nivå kan opnast samtidig.
-
-## Tekst
-
-Sørg for at overskrifta gjev ei god skildring av kva innhaldet i `Details` er. Overskriftene kan ha stor tyding for om brukarane finn det dei treng, om innhaldet blir lese og om det kan reknast som tilgjengeleg for alle brukarar. «Vis meir» eller «Les meir her» er ikkje gode nok titlar. Har du ein `Details` med mange nedtrekk, kan du ha ei hovudoverskrift eller temaoverskrift over heile lista.
-
-Hold innholdet i `Details` kort for å sikre at det lett kan relateres til overskriften. Om innhaldet er for langt bør du fordela innhaldet i fleire `Details`. Ved veldig mykje innhald kan det vere betre å vurdere å lage eigne sider.
-
-## Tilgjengelegheit
-
-[`Chevron`](https://aksel.nav.no/ikoner/ChevronDown)-ikonet er plassert til venstre for teksten, av omsyn til brukarar med nedsett synsfelt. Dei ser berre ein liten del av skjermen om gongen, og skannar gjerne vertikalt nedover på venstre side. Difor bør funksjonelle element stå til venstre, der dei lettare blir oppdaga. Plasseringa av chevronen bør òg vere konsekvent for å unngå forveksling med andre element.
-
-Ikkje plasser andre interaktive element inn i `Details.Summary`, då heile rada skal vera klikkbar. Ikonet og teksten skal _ikkje_ lenka til ulike handlingar (til dømes at teksten går vidare til ei side, medan ikonet opnar lista). Brukarane ventar ikkje at ikon og tekst skal gje ulikt resultat når dei vel dei.
-
-<kbd>Space</kbd> eller <kbd>Enter</kbd> åpnar eller lukkar `Details`.
-
-## Kjende manglar
-
-I Firefox og Safari blir det ikkje spelt av animasjon når `Details` blir opna og lukka.
-Sjå [interpolate-size](https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size).

package/src/components/details/details.spec.ts

@@ -1,56 +0,0 @@
-import { Component } from '@angular/core'
-import { render, screen } from '@testing-library/angular'
-import userEvent from '@testing-library/user-event'
-import { Details } from './details'
-import { DetailsContent } from './details-content'
-import { DetailsSummary } from './details-summary'
-
-describe('Details', () => {
-  it('should have summary, content and be open when clicked', async () => {
-    @Component({
-      template: `
-        <ksd-details>
-          <ksd-details-summary>Details Summary Text</ksd-details-summary>
-          <ksd-details-content
-            >The fantastic details content text</ksd-details-content
-          >
-        </ksd-details>
-      `,
-      imports: [Details, DetailsContent, DetailsSummary],
-    })
-    class TestDetails {}
-
-    await render(TestDetails)
-
-    const user = userEvent.setup()
-    const detailsExpandButton = screen.getByRole('button')
-
-    await user.click(detailsExpandButton)
-
-    expect(screen.getByText('Details Summary Text'))
-    expect(screen.getByText('The fantastic details content text'))
-    expect(detailsExpandButton).toHaveAttribute('aria-expanded', 'true')
-  })
-
-  it('should render details with open state as controlled', async () => {
-    @Component({
-      template: `
-        <ksd-details [open]="true" (toggled)="noop()">
-          <ksd-details-summary>Details Summary Text</ksd-details-summary>
-          <ksd-details-content
-            >The fantastic details content text</ksd-details-content
-          >
-        </ksd-details>
-      `,
-      imports: [Details, DetailsContent, DetailsSummary],
-    })
-    class TestDetails {
-      noop = () => undefined
-    }
-
-    await render(TestDetails)
-
-    const detailsExpandButton = screen.getByRole('button')
-    expect(detailsExpandButton).toHaveAttribute('aria-expanded', 'true')
-  })
-})

package/src/components/details/details.stories.ts

@@ -1,129 +0,0 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'
-import { Card } from '../card/card'
-import { ControlledDetails } from './controlled-details'
-import { Details } from './details'
-import { DetailsContent } from './details-content'
-import { DetailsSummary } from './details-summary'
-
-const meta: Meta<Details> = {
-  component: Details,
-  title: 'Komponenter/Details',
-  parameters: {
-    layout: 'padded',
-  },
-  decorators: [
-    moduleMetadata({
-      imports: [
-        Card,
-        Details,
-        DetailsContent,
-        DetailsSummary,
-        ControlledDetails,
-      ],
-    }),
-  ],
-}
-export default meta
-type Story = StoryObj<Details>
-
-export const Preview: Story = {
-  args: {},
-  parameters: {
-    summaryText: 'Vedlegg',
-    contentText: 'Vedlegg 1, vedlegg 2, vedlegg 3',
-  },
-  render: (args, context) => ({
-    props: {
-      ...args,
-      summary: context.parameters['summaryText'],
-      content: context.parameters['contentText'],
-    },
-    template: `
-      <ksd-details data-testid="details">
-        <ksd-details-summary>Vedlegg</ksd-details-summary>
-        <ksd-details-content>Vedlegg 1, vedlegg 2, vedlegg 3</ksd-details-content>
-      </ksd-details>
-    `,
-  }),
-}
-
-export const WithoutCard: Story = {
-  render: () => ({
-    template: `
-      <ksd-details>
-        <ksd-details-summary>Vedlegg</ksd-details-summary>
-        <ksd-details-content>Vedlegg 1, vedlegg 2, vedlegg 3</ksd-details-content>
-      </ksd-details>
-    `,
-  }),
-}
-
-export const InCard: Story = {
-  render: () => ({
-    template: `
-      <article ksd-card>
-        <ksd-details>
-          <ksd-details-summary>Vedlegg</ksd-details-summary>
-          <ksd-details-content>Vedlegg 1, vedlegg 2, vedlegg 3</ksd-details-content>
-        </ksd-details>
-      </article>
-    `,
-  }),
-}
-
-export const InCardWithColor: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 1rem">
-        <article ksd-card>
-          <ksd-details data-color="accent">
-            <ksd-details-summary>Vedlegg</ksd-details-summary>
-            <ksd-details-content>Vedlegg 1, vedlegg 2, vedlegg 3</ksd-details-content>
-          </ksd-details>
-        </article>
-        <article ksd-card>
-          <ksd-details data-color="accent" variant="tinted">
-            <ksd-details-summary>Vedlegg</ksd-details-summary>
-            <ksd-details-content>Vedlegg 1, vedlegg 2, vedlegg 3</ksd-details-content>
-          </ksd-details>
-        </article>
-      </div>
-    `,
-  }),
-}
-
-export const WithDifferentSizes: Story = {
-  render: () => ({
-    template: `
-      <ksd-details data-size="sm">
-          <ksd-details-summary>Vedlegg</ksd-details-summary>
-          <ksd-details-content>Vedlegg 1, vedlegg 2, vedlegg 3</ksd-details-content>
-      </ksd-details>
-      <ksd-details data-size="md">
-          <ksd-details-summary>Vedlegg</ksd-details-summary>
-          <ksd-details-content>Vedlegg 1, vedlegg 2, vedlegg 3</ksd-details-content>
-      </ksd-details>
-      <ksd-details data-size="lg">
-          <ksd-details-summary>Vedlegg</ksd-details-summary>
-          <ksd-details-content>Vedlegg 1, vedlegg 2, vedlegg 3</ksd-details-content>
-      </ksd-details>
-    `,
-  }),
-}
-
-export const DefaultOpen: Story = {
-  render: () => ({
-    template: `
-      <ksd-details [defaultOpen]="true">
-        <ksd-details-summary>Vedlegg</ksd-details-summary>
-        <ksd-details-content>Vedlegg 1, vedlegg 2, vedlegg 3</ksd-details-content>
-      </ksd-details>
-    `,
-  }),
-}
-
-export const Controlled: StoryObj<ControlledDetails> = {
-  render: () => ({
-    template: `<fiks-controlled-details />`,
-  }),
-}

package/src/components/details/details.ts

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

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

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

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

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

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

@@ -1,121 +0,0 @@
-/**
- * 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

@@ -1,21 +0,0 @@
-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(),
-  )
-}