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

package/src/components/popover/popover.ts

@@ -1,186 +0,0 @@
-/* eslint-disable @angular-eslint/no-input-rename */
-
-import {
-  booleanAttribute,
-  Component,
-  computed,
-  effect,
-  ElementRef,
-  input,
-  output,
-  signal,
-  viewChild,
-} from '@angular/core'
-import {
-  autoUpdate,
-  computePosition,
-  flip,
-  MiddlewareState,
-  offset,
-  Placement,
-  shift,
-} from '@floating-ui/dom'
-import { Color, SeverityColors } from '../colors'
-import { Size } from '../common-inputs'
-
-@Component({
-  selector: 'ksd-popover',
-
-  template: `
-    <div
-      #myPopover
-      popover="manual"
-      class="ds-popover"
-      data-testid="popover"
-      [id]="popoverId()"
-      [attr.data-size]="dataSize()"
-      [attr.data-color]="dataColor()"
-      [attr.data-variant]="variant()"
-    >
-      @if (controlledOpen()) {
-        <ng-content />
-      }
-    </div>
-  `,
-  imports: [],
-})
-export class Popover {
-  // use popoverId instead of id since id will be put on the angular element and not the popover-div
-  readonly popoverId = input.required<string>()
-  readonly placement = input<Placement>('top')
-  readonly autoPlacement = input(true, { transform: booleanAttribute })
-
-  // for controlled component
-  readonly open = input(undefined, { transform: booleanAttribute })
-  /*
-  the naming here is different from Designsystemet
-  since we need to use outputs for onOpen and onClose
-  */
-  readonly triggeredClose = output()
-  readonly triggeredOpen = output()
-
-  protected readonly internalOpen = signal(false)
-  protected readonly controlledOpen = computed(
-    () => this.open() ?? this.internalOpen(),
-  )
-
-  readonly variant = input<'tinted' | 'default'>('default')
-  readonly dataSize = input<Size>('md', { alias: 'data-size' })
-  readonly dataColor = input<Color | SeverityColors>('neutral', {
-    alias: 'data-color',
-  })
-
-  private popoverRef = viewChild<ElementRef>('myPopover')
-
-  // enable controlled component
-  controlledComponent = effect((onCleanup) => {
-    const popover = this.popoverRef()?.nativeElement
-    const handleClick = (event: MouseEvent) => {
-      const el = event.target as Element | null
-      const isTrigger = el?.closest?.(`[popovertarget="${this.popoverId()}"]`)
-      const isOutside = !isTrigger && !popover?.contains(el as Node)
-
-      if (isTrigger) {
-        event.preventDefault() // Prevent native Popover API
-        this.internalOpen.update((open) => !open)
-        this.triggeredOpen.emit()
-      }
-      if (isOutside) {
-        this.internalOpen.set(false)
-        this.triggeredClose.emit()
-      }
-    }
-
-    const handleKeydown = (event: KeyboardEvent) => {
-      if (event.key !== 'Escape' || !this.controlledOpen()) return
-      event.preventDefault() // Prevent closing fullscreen in Safari
-      this.internalOpen.set(false)
-      this.triggeredClose.emit()
-    }
-
-    popover?.togglePopover?.(this.controlledOpen())
-    document.addEventListener('click', handleClick, true) // Use capture to execute before React event API
-    document.addEventListener('keydown', handleKeydown)
-
-    onCleanup(() => {
-      document.removeEventListener('click', handleClick, true)
-      document.removeEventListener('keydown', handleKeydown)
-    })
-  }, {})
-
-  positionPopover = effect(() => {
-    const popover = this.popoverRef()?.nativeElement
-
-    const trigger = document.querySelector(
-      `[popovertarget="${this.popoverId()}"]`,
-    )
-    const placement = this.placement()
-
-    if (popover && trigger && this.controlledOpen()) {
-      autoUpdate(trigger, popover, () => {
-        computePosition(trigger, popover, {
-          placement,
-          strategy: 'fixed',
-          middleware: [
-            offset((data) => {
-              // get pseudo element arrow size
-              const styles = getComputedStyle(
-                data.elements.floating,
-                '::before',
-              )
-              return parseFloat(styles.height)
-            }),
-            ...(this.autoPlacement()
-              ? [flip({ fallbackAxisSideDirection: 'start' }), shift()]
-              : []),
-            this.arrowPseudoElement,
-          ],
-        }).then(({ x, y }) => {
-          popover.style.translate = `${x}px ${y}px`
-        })
-      })
-    }
-  }, {})
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  arrowPseudoElement: any = {
-    name: 'ArrowPseudoElement',
-    fn(data: MiddlewareState) {
-      const { elements, rects, placement } = data
-
-      let arrowX = `${Math.round(rects.reference.width / 2 + rects.reference.x - data.x)}px`
-      let arrowY = `${Math.round(rects.reference.height / 2 + rects.reference.y - data.y)}px`
-
-      if (rects.reference.width > rects.floating.width) {
-        arrowX = `${Math.round(rects.floating.width / 2)}px`
-      }
-
-      if (rects.reference.height > rects.floating.height) {
-        arrowY = `${Math.round(rects.floating.height / 2)}px`
-      }
-
-      switch (placement.split('-')[0]) {
-        case 'top':
-          arrowY = '100%'
-          break
-        case 'right':
-          arrowX = '0'
-          break
-        case 'bottom':
-          arrowY = '0'
-          break
-        case 'left':
-          arrowX = '100%'
-          break
-      }
-
-      elements.floating.setAttribute(
-        'data-placement',
-        placement.split('-')[0] as string,
-      ) // We only need top/left/right/bottom
-      elements.floating.style.setProperty('--ds-popover-arrow-x', arrowX)
-      elements.floating.style.setProperty('--ds-popover-arrow-y', arrowY)
-      return data
-    },
-  }
-}

package/src/components/radio/radio.mdx

@@ -1,117 +0,0 @@
-import {
-  Meta,
-  Canvas,
-  Controls,
-  Primary,
-  ArgTypes,
-} from '@storybook/addon-docs/blocks'
-import * as RadioStories from './radio.stories'
-
-<Meta of={RadioStories} />
-
-# Radio
-
-`Radio` er et alternativ brukeren kan velge. Bruk flere `Radio` for å vise en liste med alternativer. Brukerne kan bytte mellom alternativene, men kan kun velge ett.
-
-<Primary />
-<Controls />
-
-## Bruk
-
-Bruk [`Fieldset`](/docs/komponenter-fieldset--docs) for å visuelt gruppere flere alternativer.
-
-```tsx
-<fieldset ksd-fieldset>
-  <legend ksd-fieldset-legend>Er du over 18 år?</legend>
-
-  <ksd-field>
-    <input type="radio" ksd-input label="Ja" name="alternativ" />
-  </ksd-field>
-
-  <ksd-field>
-    <input type="radio" ksd-input label="Nei" name="alternativ" />
-  </ksd-field>
-</fieldset>
-```
-
-## Eksempler
-
-### Enkel radio
-
-`Radio` skal alltid ha en `label`. Når du bruker `label` fra en annen plass, husk å bruke `aria-label` eller `aria-labelledby`.
-
-<Canvas of={RadioStories.AriaLabel} />
-
-### Gruppering av flere alternativ
-
-Bruk `Fieldset` rundt, og `name` på `Radio`, for å gruppere.
-
-<Canvas of={RadioStories.Group} />
-
-### Feilmelding
-
-Bruk `error` på `Fieldset` for å vise feilmelding.
-
-Her må vi bruke `Fieldset`, fordi den aktiverer riktig stil og sørger for at innholdet har de riktige attributtene for tilgjengelighet.
-
-<Canvas of={RadioStories.WithError} />
-
-### Readonly
-
-Felter med `readonly`-attributtet er med i tabrekkefølgen. Brukerne kan kopiere innholdet men ikke redigere det. Informasjon blir med når skjemaet sendes inn.
-
-`readonly`-felter kan være forvirrende for noen brukere. Ikke alle vil skjønne hvorfor de ikke får til å endre innholdet i feltet. Vi anbefaler derfor å unngå `readonly` så langt det lar seg gjøre.
-
-<Canvas of={RadioStories.ReadOnly} />
-
-### Inline
-
-`Radio` skal som hovedregel _ikke_ plasseres på samme linje. Men, hvis du har kun to alternativer med korte tekster som "Ja" og "Nei", kan du vurdere om de bør plasseres ved siden av hverandre.
-
-<Canvas of={RadioStories.Inline} />
-
-## Retningslinjer
-
-Vi bruker `Radio` når vi skal gi brukerne mulighet til å velge kun ett alternativ. Skal de kunne velge flere, bruker du [`Checkbox`](/docs/komponenter-checkbox--docs).
-
-Vi bør ikke ha mer enn syv alternativer i en gruppe. Trenger vi å gi brukerne flere valg, bør vi heller bruke [`Suggestion`](/docs/komponenter-suggestion--docs) eller [`Select`](/docs/komponenter-select--docs). Hvis vi bare skal gi brukerne ett valg, kan en [`Switch`](/docs/komponenter-switch--docs) eller [`Checkbox`](/docs/komponenter-checkbox--docs) passe bedre.
-
-### Sortering
-
-Alternativene skal som hovedregel sorteres alfabetisk. Velger du å presentere de mest aktuelle alternativene først kan det bli vanskelig å finne ønsket alternativ. Du kan også risikere å påvirke svaret, noe som er uheldig.
-
-### Plassering
-
-`Radio` skal som hovedregel plasseres vertikalt, av hensyn til lesbarhet. Det er enklere for brukere å skanne listen når alternativene ligger under hverandre. For brukere som trenger å forstørre (zoome inn) nettsiden for å se godt nok, er en horisontal liste ekstra vanskelig. Hvis vi bare har to valg med korte ledetekster, kan vi vise dem ved siden av hverandre.
-
-I en [likert-skala (snl.no)](https://snl.no/Likert-skala) vil det også være naturlig å vise dem ved siden av hverandre. I en horisontal visning er det viktig at det kommer tydelig fram hvilken tekst som hører til hvilken boks.
-
-### Unngå forhåndsvalgt alternativ
-
-Tenk nøye over om du virkelig trenger å ha et forhåndsvalgt alternativ. Det kan ha motsatt effekt av det du ønsker, for eksempel at brukeren føler seg manipulert til å ta ett bestemt valg, eller ikke klarer å ta et bevisst valg selv.
-
-## Tekst i komponenten
-
-En gruppe med flere alternativer bør alltid ha en `legend` og eventuelt en `description` dersom hjelpetekst er nødvendig.
-
-Radioknapper skal alltid ha en `label`. Den skal være så kort som mulig og hvert alternativ bør være formulert på samme måte. Radio-komponenten kan også ha `description`. Da kommer den rett under `label`.
-
-## Tilgjengelighet
-
-Pass på at det er nok luft rundt hver alternativknapp, slik at den er lett å velge også på berøringsskjermer.
-
-Unngå å plassere alternativknapper ved siden av hverandre. Det gjør det vanskelig å lese. Det skaper også problemer for brukere som må forstørre (zoome) en nettside eller app for å se godt nok.
-
-### Deaktiverte tilstander
-
-Unngå deaktiverte tilstander om du kan. De har lav fargekontrast som er problematisk for noen brukere. `disabled` kan ikke møte kontrastkravene, for da kan brukeren tro at elementet er aktivt, prøve å trykke på det, og ikke skjønne hvorfor det ikke går. Nav har en god forklaring på [hvorfor deaktiverte tilstander er problematisk](https://aksel.nav.no/god-praksis/artikler/deaktiverte-tilstander) og hvilke alternativer som finnes.
-
-### Tastaturnavigasjon
-
-Merk at vi bruker piltastene til å velge alternativer i `Radio`-komponenten, ikke Tab-tasten.
-
-- <kbd data-icon>↑</kbd> eller <kbd data-icon>←</kbd> går til forrige valg
-- <kbd data-icon>↓</kbd> eller <kbd data-icon>→</kbd> går til neste valg
-- <kbd>Space</kbd> går til det første alternativet i en gruppe med radioknapper,
-  når gruppa ikke har et forhåndsvalgt alternativ.
-- <kbd>Tab</kbd> går til hele gruppa med alternativer.

package/src/components/radio/radio.stories.ts

@@ -1,226 +0,0 @@
-import {
-  argsToTemplate,
-  moduleMetadata,
-  type Meta,
-  type StoryObj,
-} from '@storybook/angular'
-import { CommonArgs } from '../../../.storybook/default-args'
-import { Field } from '../field/field'
-import { FieldDescription } from '../field/field-description'
-import { Fieldset } from '../fieldset/fieldset'
-import { FieldsetDescription } from '../fieldset/fieldset-description'
-import { FieldsetLegend } from '../fieldset/fieldset-legend'
-import { Input } from '../input/input'
-import { Label } from '../label/label'
-import { ValidationMessage } from '../validation-message'
-
-type RadioArgs = CommonArgs & {
-  readonly: boolean
-  disabled: boolean
-}
-
-const meta: Meta<Input> = {
-  component: Input,
-  title: 'Komponenter/Radio',
-  decorators: [
-    moduleMetadata({
-      imports: [
-        Label,
-        Field,
-        Input,
-        FieldDescription,
-        Fieldset,
-        FieldsetLegend,
-        FieldsetDescription,
-        ValidationMessage,
-      ],
-    }),
-  ],
-}
-export default meta
-type Story = StoryObj<RadioArgs>
-
-export const Preview: Story = {
-  args: {
-    readonly: false,
-    disabled: false,
-  },
-
-  render: (args) => ({
-    props: args,
-    template: `
-        <ksd-field>
-          <ksd-label>Label</ksd-label>
-          <input type="radio" ksd-input ${argsToTemplate(args)}  />
-          <p ksd-field-description>Description</p>
-        </ksd-field>
-    `,
-  }),
-}
-
-export const AriaLabel: Story = {
-  args: {
-    ...Preview.args,
-  },
-
-  render: (args) => ({
-    props: args,
-    template: `
-        <input ksd-input type="radio" ${argsToTemplate(args)} aria-label="Radio" />
-    `,
-  }),
-}
-
-export const Group: Story = {
-  args: {
-    ...Preview.args,
-  },
-
-  render: (args) => ({
-    props: args,
-    template: `
-        <fieldset ksd-fieldset>
-        <legend ksd-fieldset-legend>Hvilken iskremsmak er best ? </legend>
-          <p ksd-fieldset-description>Velg din favorittsmak blant alternativene.</p>
-          <ksd-field>
-            <ksd-label>Vanilje</ksd-label>
-            <input type="radio" name="icecream" ksd-input ${argsToTemplate(args)}  />
-          </ksd-field>
-          <ksd-field>
-            <ksd-label>Jordbær</ksd-label>
-            <input type="radio" name="icecream" ksd-input ${argsToTemplate(args)}  />
-          </ksd-field>
-          <ksd-field>
-            <ksd-label>Sjokolade</ksd-label>
-            <input type="radio" name="icecream" ksd-input ${argsToTemplate(args)}  />
-          </ksd-field>
-          <ksd-field>
-            <ksd-label>Jeg spiser ikke iskrem</ksd-label>
-            <input type="radio" name="icecream" ksd-input ${argsToTemplate(args)}  />
-          </ksd-field>
-        </fieldset>
-    `,
-  }),
-}
-
-export const WithError: Story = {
-  args: {
-    ...Preview.args,
-  },
-
-  render: (args) => ({
-    props: args,
-    template: `
-        <fieldset ksd-fieldset>
-        <legend ksd-fieldset-legend>Hvilken bydel bor du i?</legend>
-        <p ksd-fieldset-description>Bergen er delt inn i åtte bydeler</p>
-        <ksd-field>
-          <ksd-label>Arna</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Bergenhus</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Fana</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Fyllingsdalen</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Laksevåg</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Ytrebygda</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Årstad</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Åsane</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <p ksd-validation-message>Du må velge en bydel før du kan fortsette.</p>
-    `,
-  }),
-}
-
-export const ReadOnly: Story = {
-  args: {
-    ...Preview.args,
-    readonly: true,
-  },
-
-  render: (args) => ({
-    props: args,
-    template: `
-        <fieldset ksd-fieldset>
-        <legend ksd-fieldset-legend>Hvilken bydel bor du i?</legend>
-        <p ksd-fieldset-description>Bergen er delt inn i åtte bydeler</p>
-        <ksd-field>
-          <ksd-label>Arna</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Bergenhus</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Fana</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Fyllingsdalen</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Laksevåg</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Ytrebygda</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Årstad</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Åsane</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-    `,
-  }),
-}
-
-export const Inline: Story = {
-  args: {
-    ...Preview.args,
-  },
-
-  render: (args) => ({
-    props: args,
-    template: `
-        <fieldset ksd-fieldset>
-        <legend ksd-fieldset-legend>Kontaktes på e-post?</legend>
-        <p ksd-fieldset-description>Bekreft om du ønsker å bli kontaktet per e-post.</p>
-          <div style="display: flex; flex-wrap: wrap; gap: var(--ds-size-6)">
-          <ksd-field>
-            <ksd-label>Ja</ksd-label>
-            <input type="radio" name="my-inline" ksd-input ${argsToTemplate(args)}  />
-          </ksd-field>
-          <ksd-field>
-            <ksd-label>Nei</ksd-label>
-            <input type="radio" name="my-inline" ksd-input ${argsToTemplate(args)}  />
-          </ksd-field>
-        </div>
-        </fieldset>
-    `,
-  }),
-}

package/src/components/search/index.ts

@@ -1,4 +0,0 @@
-export { Search } from './search'
-export { SearchButton } from './search-button'
-export { SearchClear } from './search-clear'
-export { SearchInput } from './search-input'

package/src/components/search/search-button.ts

@@ -1,35 +0,0 @@
-import { Directive, input } from '@angular/core'
-
-/**
- * Search button
- *
- * Used within Search to provide a submit button.
- *
- * @param {('primary' | 'secondary')} [variant] - Specify which button variant to use
- * @param {string} [aria-label] - Aria label for the button
- *
- */
-@Directive({
-  // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: 'button[ksd-search-button]',
-  standalone: true,
-  host: {
-    class: 'ds-button',
-    type: 'submit',
-    '[attr.aria-label]': 'this.ariaLabel()',
-    '[attr.data-variant]': 'this.variant()',
-  },
-})
-export class SearchButton {
-  /**
-   * Specify which button variant to use
-   *
-   * @default 'primary'
-   */
-  readonly variant = input<'primary' | 'secondary'>('primary')
-
-  /**
-   * Aria label for the button
-   */
-  readonly ariaLabel = input('', { alias: 'aria-label' })
-}

package/src/components/search/search-clear.ts

@@ -1,57 +0,0 @@
-import { Directive, input, output } from '@angular/core'
-
-/**
- * Search clear button
- *
- * Used within Search to provide a clear button.
- *
- * @param {string} [aria-label] - Aria label for the button.
- *
- * @event clearInput - Emitted when the clear button is clicked.
- * Use this to notify controlled forms that the input should be cleared.
- *
- */
-@Directive({
-  // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: 'button[ksd-search-clear]',
-  standalone: true,
-  host: {
-    class: 'ds-button',
-    type: 'reset',
-    '[attr.data-variant]': "'tertiary'",
-    '[attr.aria-label]': 'this.ariaLabel()',
-    '(click)': 'handleClear($event)',
-  },
-})
-export class SearchClear {
-  /**
-   * Aria label for the button
-   * @default 'Tøm'
-   */
-  readonly ariaLabel = input('Tøm', { alias: 'aria-label' })
-
-  /**
-   * Output to notify controlled forms that input should be cleared
-   */
-  clearInput = output<void>()
-
-  handleClear(e: Event): void {
-    const target = e.target as HTMLButtonElement
-    let inputElement: HTMLElement | null | undefined = null
-
-    if (target instanceof HTMLElement) {
-      inputElement = target.closest('.ds-search')?.querySelector('input')
-    }
-
-    if (!inputElement) throw new Error('Input is missing')
-
-    if (!(inputElement instanceof HTMLInputElement)) {
-      throw new Error('Input is not an input element')
-    }
-
-    e.preventDefault()
-    inputElement.value = ''
-    this.clearInput.emit()
-    inputElement.focus()
-  }
-}

package/src/components/search/search-input.ts

@@ -1,18 +0,0 @@
-import { Directive } from '@angular/core'
-
-/**
- * Search input
- *
- * Used within Search to provide a search input.
- */
-@Directive({
-  // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: 'input[ksd-search-input]',
-  standalone: true,
-  host: {
-    class: 'ds-input',
-    type: 'search',
-    placeholder: '', // Need empty placeholder to enable show/hide for clear button
-  },
-})
-export class SearchInput {}