@oslokommune/punkt-elements 12.17.2 → 12.18.1

package/src/components/alert/index.ts

@@ -1,113 +1,4 @@
-import { classMap } from 'lit/directives/class-map.js'
-import { customElement, property, state } from 'lit/decorators.js'
-import { html, nothing, PropertyValues } from 'lit'
-import { PktElement } from '../element'
-import { PktSlotController } from '@/controllers/pkt-slot-controller'
-import { ref, createRef, Ref } from 'lit/directives/ref.js'
-
-import specs from 'componentSpecs/alert.json'
-
-import '../icon'
-
-type AlertSkin = 'error' | 'success' | 'warning' | 'info'
-type AlertAriaLive = 'off' | 'polite' | 'assertive' | null
-export interface IPktAlert {
-  skin?: AlertSkin
-  closeAlert?: boolean
-  title?: string
-  date?: string
-  ariaLive?: AlertAriaLive
-  'aria-live'?: AlertAriaLive
-  compact?: boolean
-}
-@customElement('pkt-alert')
-export class PktAlert extends PktElement {
-  defaultSlot: Ref<HTMLElement> = createRef()
-
-  constructor() {
-    super()
-    this.slotController = new PktSlotController(this, this.defaultSlot)
-    this._isClosed = false
-  }
-
-  @property({ type: Boolean, reflect: false }) compact = specs.props.compact.default
-  @property({ type: String, reflect: true }) title: string = ''
-  @property({ type: String, reflect: true }) skin: AlertSkin = specs.props.skin.default as AlertSkin
-  @property({ type: String }) ariaLive: AlertAriaLive = specs.props.ariaLive
-    .default as AlertAriaLive
-  @property({ type: String, reflect: true }) 'aria-live': AlertAriaLive = null
-  @property({ type: Boolean, reflect: true }) closeAlert = specs.props.closeAlert.default
-  @property({ type: String, reflect: true }) date: string | null = null
-
-  @state() _isClosed: boolean = false
-
-  private close = (event: MouseEvent) => {
-    this._isClosed = true
-    this.dispatchEvent(
-      new CustomEvent('close', { detail: { origin: event }, bubbles: true, composed: true }),
-    )
-    // Historical support of old Vue implementations…
-    this.dispatchEvent(
-      new CustomEvent('on-close', { detail: { origin: event }, bubbles: true, composed: true }),
-    )
-  }
-
-  connectedCallback(): void {
-    super.connectedCallback()
-    this['aria-live'] = (this.getAttribute('aria-live') as AlertAriaLive) || this.ariaLive
-  }
-
-  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
-    if (name === 'ariaLive') {
-      this['aria-live'] = value as AlertAriaLive
-    }
-  }
-
-  protected updated(_changedProperties: PropertyValues): void {
-    super.updated(_changedProperties)
-    if (_changedProperties.has('ariaLive')) {
-      this['aria-live'] = this.ariaLive
-    }
-  }
-
-  render() {
-    const classes = {
-      'pkt-alert': true,
-      'pkt-alert--compact': this.compact,
-      [`pkt-alert--${this.skin}`]: this.skin,
-      'pkt-hide': this._isClosed,
-    }
-
-    return html`
-      <div class=${classMap(classes)}>
-        <pkt-icon
-          class="pkt-alert__icon"
-          name=${this.skin === 'info' ? 'alert-information' : `alert-${this.skin}`}
-        ></pkt-icon>
-
-        ${this.closeAlert
-          ? html`
-              <div class="pkt-alert__close">
-                <button
-                  type="button"
-                  class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
-                  tabindex="0"
-                  aria-label="close"
-                  @click=${this.close}
-                >
-                  <pkt-icon name="close" class="pkt-btn__icon" aria-hidden="true"></pkt-icon>
-                </button>
-              </div>
-            `
-          : nothing}
-        ${this.title ? html`<div class="pkt-alert__title">${this.title}</div>` : nothing}
-
-        <div class="pkt-alert__text" ${ref(this.defaultSlot)}></div>
-
-        ${this.date
-          ? html`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`
-          : nothing}
-      </div>
-    `
-  }
-}
+import { PktAlert } from './alert'
+import type { IPktAlert, TAlertSkin } from './alert'
+export { PktAlert, IPktAlert, TAlertSkin }
+export default PktAlert