@oslokommune/punkt-elements 12.17.2 → 12.18.1

package/src/components/element/index.ts

@@ -1,353 +0,0 @@
-import { LitElement, PropertyValues } from 'lit'
-import { property, state } from 'lit/decorators.js'
-import { uuidish } from '@/utils/stringutils'
-import { renderReactNode } from '@/helpers/renderers'
-import strings from '../../translations/no.json'
-import inputwrapperspecs from 'componentSpecs/input-wrapper.json'
-import 'element-internals-polyfill'
-
-/**
- * Base class for all Punkt elements
- * @extends LitElement
- */
-export class PktElement extends LitElement {
-  [key: string]: any
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  @property({ type: Object }) strings: any = strings
-
-  /**
-   * Runs on mount, used to set up various values and whatever you need to run
-   */
-  connectedCallback() {
-    super.connectedCallback()
-  }
-  /**
-   * Make sure the component renders in light DOM instead of shadow DOM
-   */
-  createRenderRoot() {
-    return this
-  }
-
-  /**
-   * Add support for Hot Module Reloading in dev mode
-   */
-  hotReplacedCallback() {
-    this.requestUpdate()
-  }
-
-  /**
-   * Go through changed properties and find ReactNodes to render out
-   */
-  protected update(changedProperties: PropertyValues) {
-    changedProperties.forEach((_oldValue, propName) => {
-      if (
-        typeof propName === 'string' &&
-        this[propName] &&
-        typeof this[propName] === 'object' &&
-        this[propName].$$typeof
-      ) {
-        this[propName] = renderReactNode(this[propName])
-      }
-    })
-    super.update(changedProperties)
-  }
-
-  /**
-   * Add extra stuff here whenever we decide what should be added here…
-   */
-  constructor() {
-    super()
-  }
-}
-
-/**
- * Base class for all Punkt input elements
- * @extends PktElement
- */
-export class PktInputElement extends PktElement {
-  static get formAssociated() {
-    return true
-  }
-
-  @property({ type: String, reflect: true })
-  id: string = uuidish()
-
-  @property({ type: String, reflect: true })
-  name: string = ''
-
-  @property({ type: Boolean, reflect: true })
-  required: boolean = false
-
-  @property({ type: Boolean, reflect: true })
-  disabled: boolean = false
-
-  @property({ type: String, reflect: true })
-  placeholder: string = ''
-
-  @property({ type: Number, reflect: true })
-  min: string | number | null = null
-
-  @property({ type: Number, reflect: true })
-  max: string | number | null = null
-
-  @property({ type: Number, reflect: true })
-  minlength: number | null = 0
-
-  @property({ type: Number, reflect: true })
-  maxlength: number | null = 0
-
-  @property({ type: String, reflect: true })
-  pattern: string = ''
-
-  @property({ type: Boolean, reflect: true })
-  readonly: boolean = false
-
-  @property({ type: String })
-  ariaLabelledby: string | null = null
-
-  @property({ type: String })
-  ariaDescribedBy: string | null = null
-
-  // Properties for InputWrapper
-  @property({ type: String })
-  label: string | null = null
-
-  @property({ type: Boolean })
-  inline: boolean = false
-
-  @property({ type: Boolean })
-  optionalTag: boolean = false
-
-  @property({ type: String })
-  optionalText: string = strings.forms.labels.optional
-
-  @property({ type: Boolean })
-  requiredTag: boolean = false
-
-  @property({ type: String })
-  requiredText: string = strings.forms.labels.required
-
-  @property({ type: Boolean })
-  hasError: boolean = false
-
-  @property({ type: String })
-  errorMessage: string = ''
-
-  @property({ type: String })
-  helptext: string = ''
-
-  @property({ type: Boolean })
-  counter: boolean = false
-
-  @property({ type: Number })
-  counterMaxLength: number = 0
-
-  @property({ type: String })
-  helptextDropdown: string = ''
-
-  @property({ type: String })
-  helptextDropdownButton: string | null = inputwrapperspecs.props.helptextDropdownButton.default
-
-  @property({ type: Boolean, reflect: true })
-  fullwidth: boolean = false
-
-  @property({ type: Boolean })
-  useWrapper: boolean = true
-
-  @property({ type: String, attribute: 'data-testid' })
-  dataTestid: string = ''
-
-  @property({ type: Boolean })
-  skipForwardTestid: boolean = false
-
-  @state() touched: boolean = false
-
-  constructor() {
-    super()
-    this.internals = this.attachInternals()
-  }
-
-  protected manageValidity(input: HTMLInputElement) {
-    /**
-     * This is where we define all the various validations and set the validity state
-     */
-    if (this.required && !this.value) {
-      // If the input is required and the value is empty
-      this.internals.setValidity({ valueMissing: true }, strings.forms.messages.required, input)
-    } else if (input.validity.typeMismatch || input.validity.badInput) {
-      // If the input type is wrong
-      this.internals.setValidity({ typeMismatch: true }, strings.forms.messages.invalid, input)
-    } else if (input.validity.patternMismatch) {
-      // If the input pattern is wrong
-      this.internals.setValidity(
-        { patternMismatch: true },
-        strings.forms.messages.invalidPattern,
-        input,
-      )
-    } else if (
-      input.validity.tooShort ||
-      (this.minlength && this.minlength > 0 && this.value.length < this.minlength)
-    ) {
-      // If the input is too short or too few items selected
-      this.internals.setValidity({ tooShort: true }, strings.forms.messages.tooShort, input)
-    } else if (
-      input.validity.tooLong ||
-      (this.maxlength && this.maxlength > 0 && this.value.length > this.maxlength)
-    ) {
-      // If the input is too long or too many items selected
-      this.internals.setValidity({ tooLong: true }, strings.forms.messages.tooLong, input)
-    } else if (input.validity.rangeUnderflow) {
-      // If the input is too low or date is too early
-      this.internals.setValidity(
-        { rangeUnderflow: true },
-        strings.forms.messages.rangeUnderflow,
-        input,
-      )
-    } else if (input.validity.rangeOverflow) {
-      // If the input is too high or date is too late
-      this.internals.setValidity(
-        { rangeOverflow: true },
-        strings.forms.messages.rangeOverflow,
-        input,
-      )
-    } else if (input.validity.customError) {
-      // If a custom error is set
-      this.internals.setValidity({ customError: true }, input.validationMessage, input)
-    } else {
-      // If everything is fine
-      this.internals.setValidity({})
-    }
-  }
-
-  protected setFormValue(value: string | string[]): void {
-    if (this.internals) {
-      if (Array.isArray(value)) {
-        const form = new FormData()
-        value.forEach((v) => {
-          form.append(this.name, v)
-        })
-        this.internals.setFormValue(form)
-      } else {
-        this.internals.setFormValue(value)
-      }
-    }
-  }
-
-  protected valueChanged(value: string | string[] | null, _old: string | string[] | null): void {
-    if (_old !== this.value || _old !== this._value) {
-      if (typeof value === 'string') {
-        if ((this.multiple || this.range) && value.includes(',')) {
-          value = value.split(',')
-        }
-        this.value = value
-        this._value = Array.isArray(value) ? value : [value]
-      } else if (Array.isArray(value)) {
-        this.value = value
-        this._value = value
-      } else {
-        this.value = ''
-        this._value = []
-      }
-      if ((!this.value || this.value.length === 0) && _old && _old.length !== 0) {
-        this.clearInputValue()
-      } else if (this.value && this.value.toString() !== _old?.toString()) {
-        this.onChange(this.value)
-      }
-      this.updateComplete.then(() => this.requestUpdate())
-    }
-  }
-
-  // When input goes from content to no content
-  protected clearInputValue(): void {
-    const value = this.multiple || this.range ? [] : ''
-    this.value = value
-    this.internals.setFormValue(value)
-    this.dispatchEvent(new Event('change'))
-    this.dispatchEvent(
-      new CustomEvent('value-change', {
-        detail: value,
-        bubbles: true,
-        composed: true,
-      }),
-    )
-  }
-
-  // When user enters the input, we need to push that event out to the form
-  protected onFocus(): void {
-    this.dispatchEvent(new FocusEvent('focus'))
-  }
-
-  // And also when the user leaves the input...
-  protected onBlur(): void {
-    this.dispatchEvent(new FocusEvent('blur'))
-  }
-
-  // Trigger this when user types in the input
-  protected onInput(): void {
-    this.dispatchEvent(new InputEvent('input'))
-  }
-
-  // Trigger this when you want to set the value of the input out to the form
-  protected onChange(value: string | string[]): void {
-    if (!this.touched) {
-      this.touched = true
-      value && this.setFormValue(value)
-      return
-    }
-    if (typeof value !== 'string' && !Array.isArray(value)) {
-      return
-    }
-
-    if ((this.range || this.multiple) && !Array.isArray(value) && value.includes(',')) {
-      value = value.split(',')
-    }
-
-    if (!this.multiple && !this.range && Array.isArray(value)) {
-      value = value[0]
-    }
-
-    this.setFormValue(value)
-
-    this.manageValidity(this.inputRef.value)
-    if (this.inputRef2) {
-      this.manageValidity(this.inputRef2.value)
-    }
-
-    // Change events
-    this.dispatchEvent(new Event('change'))
-    this.dispatchEvent(
-      new CustomEvent('value-change', {
-        detail: value,
-        bubbles: true,
-        composed: true,
-      }),
-    )
-
-    this.internals.reportValidity()
-  }
-
-  protected updated(_changedProperties: PropertyValues): void {
-    if (_changedProperties.has('dataTestid') && this.dataTestid && this.inputRef.value) {
-      if (!this.skipForwardTestid) {
-        this.inputRef.value.dataset.testid = this.dataTestid
-        this.removeAttribute('data-testid')
-      } else if (!this.hasAttribute('data-testid')) {
-        this.setAttribute('data-testid', this.dataTestid)
-      }
-    }
-  }
-
-  protected firstUpdated(_changedProperties: PropertyValues): void {
-    super.firstUpdated(_changedProperties)
-
-    if (this.required) {
-      this.internals.ariaRequired = true
-    }
-    if (this.disabled) {
-      this.internals.ariaDisabled = true
-    }
-
-    this.internals.setFormValue(this.value)
-    this.inputRef.value && this.manageValidity(this.inputRef.value)
-  }
-}