@oslokommune/punkt-elements 12.17.2 → 12.18.1

package/src/components/icon/icon.ts

@@ -0,0 +1,99 @@
+import { PktElement } from '@/base-elements/element'
+import { html, PropertyValues } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
+
+// Allow global override of icon fetch
+window.pktFetch = window.pktFetch === undefined ? fetch : window.pktFetch
+window.pktIconPath = window.pktIconPath || 'https://punkt-cdn.oslo.kommune.no/latest/icons/'
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+const errorSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>'
+const dlStatus: { [key: string]: string } = {}
+
+const downloadIconOrGetFromCache = async (
+  name: string,
+  path: string | undefined,
+): Promise<string | null> => {
+  let i = 0
+  while (dlStatus[path + name + '.svg'] === 'fetching') {
+    i++
+    if (i > 50) break
+    await sleep(50)
+  }
+  if (localStorage.getItem(path + name + '.svg')) {
+    return Promise.resolve(localStorage.getItem(path + name + '.svg'))
+  } else if (typeof window.pktFetch === 'function') {
+    dlStatus[path + name + '.svg'] = 'fetching'
+    return Promise.resolve(
+      window
+        .pktFetch(path + name + '.svg')
+        .then((response) => {
+          if (!response.ok) {
+            // eslint-disable-next-line no-console
+            console.error('Missing icon: ' + path + name + '.svg')
+            return errorSvg
+          } else {
+            return response.text()
+          }
+        })
+        .then((text) => {
+          if (text !== errorSvg) {
+            localStorage.setItem(path + name + '.svg', text)
+          }
+          dlStatus[path + name + '.svg'] = 'fetched'
+          return text
+        }),
+    )
+  }
+  return Promise.resolve(errorSvg)
+}
+
+@customElement('pkt-icon')
+export class PktIcon extends PktElement {
+  @property({ type: String, reflect: false })
+  path: string | undefined = window.pktIconPath
+
+  @property({ type: String, reflect: true })
+  name: string = ''
+
+  @property({ type: SVGElement })
+  private icon: any = unsafeSVG(errorSvg)
+
+  @property({ type: Array, noAccessor: true })
+  private _updatedProps: string[] = []
+
+  connectedCallback(): void {
+    super.connectedCallback()
+    this.classList.add('pkt-icon')
+  }
+  async attributeChangedCallback(name: string, _old: string | null, value: string | null) {
+    super.attributeChangedCallback(name, _old, value)
+    if (name === 'name' || name === 'path') this.getIcon(this.name)
+  }
+
+  protected async updated(_changedProperties: PropertyValues) {
+    super.updated(_changedProperties)
+    if (_changedProperties.has('name') || _changedProperties.has('path')) {
+      this.getIcon(this.name)
+    }
+  }
+
+  protected async getIcon(name = '') {
+    if (this._updatedProps.length > 0) {
+      if (!this.path) this.path === window.pktIconPath
+      this.icon = unsafeSVG(
+        await downloadIconOrGetFromCache(this.name || '', this.path).then((res) => res),
+      ) as SVGElement
+      this._updatedProps = []
+    } else {
+      if (!this._updatedProps.includes(name)) {
+        this._updatedProps.push(name)
+      }
+    }
+  }
+
+  render() {
+    return html`${this.name && this.icon}`
+  }
+}

package/src/components/icon/index.ts

@@ -1,99 +1,4 @@
-import { PktElement } from '../element'
-import { html, PropertyValues } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
+import { PktIcon } from './icon'
 
-// Allow global override of icon fetch
-window.pktFetch = window.pktFetch === undefined ? fetch : window.pktFetch
-window.pktIconPath = window.pktIconPath || 'https://punkt-cdn.oslo.kommune.no/latest/icons/'
-
-const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
-const errorSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>'
-const dlStatus: { [key: string]: string } = {}
-
-const downloadIconOrGetFromCache = async (
-  name: string,
-  path: string | undefined,
-): Promise<string | null> => {
-  let i = 0
-  while (dlStatus[path + name + '.svg'] === 'fetching') {
-    i++
-    if (i > 50) break
-    await sleep(50)
-  }
-  if (localStorage.getItem(path + name + '.svg')) {
-    return Promise.resolve(localStorage.getItem(path + name + '.svg'))
-  } else if (typeof window.pktFetch === 'function') {
-    dlStatus[path + name + '.svg'] = 'fetching'
-    return Promise.resolve(
-      window
-        .pktFetch(path + name + '.svg')
-        .then((response) => {
-          if (!response.ok) {
-            // eslint-disable-next-line no-console
-            console.error('Missing icon: ' + path + name + '.svg')
-            return errorSvg
-          } else {
-            return response.text()
-          }
-        })
-        .then((text) => {
-          if (text !== errorSvg) {
-            localStorage.setItem(path + name + '.svg', text)
-          }
-          dlStatus[path + name + '.svg'] = 'fetched'
-          return text
-        }),
-    )
-  }
-  return Promise.resolve(errorSvg)
-}
-
-@customElement('pkt-icon')
-export class PktIcon extends PktElement {
-  @property({ type: String, reflect: false })
-  path: string | undefined = window.pktIconPath
-
-  @property({ type: String, reflect: true })
-  name: string = ''
-
-  @property({ type: SVGElement })
-  private icon: any = unsafeSVG(errorSvg)
-
-  @property({ type: Array, noAccessor: true })
-  private _updatedProps: string[] = []
-
-  connectedCallback(): void {
-    super.connectedCallback()
-    this.classList.add('pkt-icon')
-  }
-  async attributeChangedCallback(name: string, _old: string | null, value: string | null) {
-    super.attributeChangedCallback(name, _old, value)
-    if (name === 'name' || name === 'path') this.getIcon(this.name)
-  }
-
-  protected async updated(_changedProperties: PropertyValues) {
-    super.updated(_changedProperties)
-    if (_changedProperties.has('name') || _changedProperties.has('path')) {
-      this.getIcon(this.name)
-    }
-  }
-
-  protected async getIcon(name = '') {
-    if (this._updatedProps.length > 0) {
-      if (!this.path) this.path === window.pktIconPath
-      this.icon = unsafeSVG(
-        await downloadIconOrGetFromCache(this.name || '', this.path).then((res) => res),
-      ) as SVGElement
-      this._updatedProps = []
-    } else {
-      if (!this._updatedProps.includes(name)) {
-        this._updatedProps.push(name)
-      }
-    }
-  }
-
-  render() {
-    return html`${this.name && this.icon}`
-  }
-}
+export { PktIcon }
+export default PktIcon

package/src/components/index.ts

@@ -1,15 +1,29 @@
-export { PktAlert } from './alert'
-export { PktCalendar } from './calendar'
-export { PktCard } from './card'
-export { PktComponent } from './component-template'
-export { PktDatepicker } from './datepicker'
-export { PktHelptext } from './helptext'
-export { PktIcon } from './icon'
-export { PktInputWrapper } from './input-wrapper'
-export { PktLink } from './link'
-export { PktLinkCard } from './linkcard'
-export { PktMessagebox } from './messagebox'
-export { PktModal } from './modal'
-export { PktTag } from './tag'
-export { PktTextarea } from './textarea'
-export { PktTextinput } from './textinput'
+// Export components
+export { PktAlert } from '@/components/alert'
+export { PktCalendar } from '@/components/calendar'
+export { PktCard } from '@/components/card'
+export { PktComponent } from '../base-elements/component-template.js'
+export { PktDatepicker } from '@/components/datepicker/datepicker.js'
+export { PktHelptext } from '@/components/helptext'
+export { PktIcon } from '@/components/icon'
+export { PktInputWrapper } from '@/components/input-wrapper'
+export { PktLink } from '@/components/link'
+export { PktLinkCard } from '@/components/linkcard'
+export { PktMessagebox } from '@/components/messagebox'
+export { PktModal } from '@/components/modal'
+export { PktProgressbar } from '@/components/progressbar'
+export { PktTag } from '@/components/tag'
+export { PktTextarea } from '@/components/textarea'
+export { PktTextinput } from '@/components/textinput'
+
+// Export types
+export type {
+  IPktProgressbar,
+  TProgressbarRole,
+  TProgressbarSkin,
+  TProgressbarStatusPlacement,
+  TProgressbarStatusType,
+  TProgressbarTitlePosition,
+} from '@/components/progressbar'
+
+export type { TTagSkin, TTagType } from '@/components/tag'

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

@@ -1,4 +1,4 @@
-import { PktElement } from '../element'
+import { PktElement } from '@/base-elements/element'
 import { PktSlotController } from '../../controllers/pkt-slot-controller'
 import { ref, Ref, createRef } from 'lit/directives/ref.js'
 import { html, nothing } from 'lit'
@@ -7,8 +7,8 @@ import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property } from 'lit/decorators.js'
 import { uuidish } from '@/utils/stringutils'
 import specs from 'componentSpecs/input-wrapper.json'
-import '../icon'
 import '../helptext'
+import '../icon/icon'
 
 @customElement('pkt-input-wrapper')
 export class PktInputWrapper extends PktElement {

package/src/components/link/index.ts

@@ -1,57 +1,4 @@
-import { PktElement } from '../element'
-import { PktSlotController } from '../../controllers/pkt-slot-controller'
-import { ref, Ref, createRef } from 'lit/directives/ref.js'
-import { html, nothing } from 'lit'
-import { classMap } from 'lit/directives/class-map.js'
-import { customElement, property } from 'lit/decorators.js'
-import specs from 'componentSpecs/link.json'
-import '../icon'
+import { PktLink } from './link'
 
-@customElement('pkt-link')
-export class PktLink extends PktElement {
-  defaultSlot: Ref<HTMLElement> = createRef()
-
-  constructor() {
-    super()
-    this.slotController = new PktSlotController(this, this.defaultSlot)
-  }
-
-  /**
-   * Element attributes
-   */
-  @property({ type: String, reflect: true }) href: string = specs.props.href.default
-  @property({ type: String, reflect: true }) iconName: string | undefined = undefined
-  @property({ type: String, reflect: true }) iconPosition: string | undefined = undefined
-  @property({ type: Boolean, reflect: true }) external: boolean = specs.props.external.default
-  @property({ type: String, reflect: true }) target: string | null = specs.props.target.default
-
-  render() {
-    const classes = {
-      'pkt-link': true,
-      'pkt-link--icon-left':
-        (!!this.iconName && this.iconPosition === 'left') ||
-        !!(this.iconName && !this.iconPosition),
-      'pkt-link--icon-right': !!this.iconName && this.iconPosition === 'right',
-      'pkt-link--external': this.external,
-    }
-    return html`<a
-      class=${classMap(classes)}
-      href=${this.href}
-      @click=${this.handleClick}
-      .target=${this.target}
-      .rel=${this.external ? 'noopener noreferrer' : nothing}
-      >${this.iconName
-        ? html`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>`
-        : ''} <span ${ref(this.defaultSlot)}>Link</span></a
-    >`
-  }
-
-  private handleClick() {
-    this.dispatchEvent(
-      new CustomEvent('click', {
-        detail: 'pkt-link-clicked',
-        bubbles: true,
-      }),
-    )
-  }
-}
+export { PktLink }
+export default PktLink

package/src/components/link/link.ts

@@ -0,0 +1,57 @@
+import { PktElement } from '@/base-elements/element'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { ref, Ref, createRef } from 'lit/directives/ref.js'
+import { html, nothing } from 'lit'
+import { classMap } from 'lit/directives/class-map.js'
+import { customElement, property } from 'lit/decorators.js'
+import specs from 'componentSpecs/link.json'
+import '@/components/icon'
+
+@customElement('pkt-link')
+export class PktLink extends PktElement {
+  defaultSlot: Ref<HTMLElement> = createRef()
+
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.defaultSlot)
+  }
+
+  /**
+   * Element attributes
+   */
+  @property({ type: String, reflect: true }) href: string = specs.props.href.default
+  @property({ type: String, reflect: true }) iconName: string | undefined = undefined
+  @property({ type: String, reflect: true }) iconPosition: string | undefined = undefined
+  @property({ type: Boolean, reflect: true }) external: boolean = specs.props.external.default
+  @property({ type: String, reflect: true }) target: string | null = specs.props.target.default
+
+  render() {
+    const classes = {
+      'pkt-link': true,
+      'pkt-link--icon-left':
+        (!!this.iconName && this.iconPosition === 'left') ||
+        !!(this.iconName && !this.iconPosition),
+      'pkt-link--icon-right': !!this.iconName && this.iconPosition === 'right',
+      'pkt-link--external': this.external,
+    }
+    return html`<a
+      class=${classMap(classes)}
+      href=${this.href}
+      @click=${this.handleClick}
+      .target=${this.target}
+      .rel=${this.external ? 'noopener noreferrer' : nothing}
+      >${this.iconName
+        ? html`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>`
+        : ''} <span ${ref(this.defaultSlot)}>Link</span></a
+    >`
+  }
+
+  private handleClick() {
+    this.dispatchEvent(
+      new CustomEvent('click', {
+        detail: 'pkt-link-clicked',
+        bubbles: true,
+      }),
+    )
+  }
+}

package/src/components/linkcard/index.ts

@@ -1,4 +1,4 @@
 import { PktLinkCard } from './linkcard'
 export { PktLinkCard } from './linkcard'
-export type { IPktLinkCard } from './linkcard'
+export type { IPktLinkCard, TLinkCardSkin } from './linkcard'
 export default PktLinkCard

package/src/components/linkcard/linkcard.ts

@@ -1,13 +1,12 @@
 import { html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
-import { PktElement } from '../element'
 import { ref } from 'lit/directives/ref.js'
 import { Ref, createRef } from 'lit/directives/ref.js'
-
-import '../icon'
+import { PktElement } from '@/base-elements/element'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import '@/components/icon'
 
-export type LinkCardSkin =
+export type TLinkCardSkin =
   | 'normal'
   | 'blue'
   | 'beige'
@@ -22,7 +21,7 @@ export interface IPktLinkCard {
   iconName?: string
   external?: boolean
   openInNewTab?: boolean
-  skin?: LinkCardSkin
+  skin?: TLinkCardSkin
 }
 
 @customElement('pkt-linkcard')
@@ -34,7 +33,7 @@ export class PktLinkCard extends PktElement implements IPktLinkCard {
   @property({ type: String, reflect: true }) iconName: string = ''
   @property({ type: Boolean, reflect: true }) external: boolean = false
   @property({ type: Boolean, reflect: true }) openInNewTab: boolean = false
-  @property({ type: String, reflect: true }) skin: LinkCardSkin = 'normal'
+  @property({ type: String, reflect: true }) skin: TLinkCardSkin = 'normal'
 
   constructor() {
     super()

package/src/components/messagebox/index.ts

@@ -1,69 +1,4 @@
-import { PktElement } from '../element'
-import { PktSlotController } from '../../controllers/pkt-slot-controller'
-import { ref } from 'lit/directives/ref.js'
-import { Ref, createRef } from 'lit/directives/ref.js'
-import { html, nothing } from 'lit'
-import { classMap } from 'lit/directives/class-map.js'
-import { customElement, property, state } from 'lit/decorators.js'
-import specs from 'componentSpecs/messagebox.json'
-
-import '../icon'
-
-type MessageboxSkin = 'beige' | 'blue' | 'red' | 'green'
-
-export interface IPktMessagebox {
-  skin?: MessageboxSkin
-  title?: string
-  compact?: boolean
-  closable?: boolean
-}
-
-@customElement('pkt-messagebox')
-export class PktMessagebox extends PktElement {
-  defaultSlot: Ref<HTMLElement> = createRef()
-
-  constructor() {
-    super()
-    this.slotController = new PktSlotController(this, this.defaultSlot)
-    this._isClosed = false
-  }
-
-  @property({ type: Boolean, reflect: true }) closable = specs.props.closable.default
-  @property({ type: Boolean, reflect: true }) compact = specs.props.compact.default
-  @property({ type: String, reflect: true }) title = ''
-  @property({ type: String, reflect: true }) skin = specs.props.skin.default as MessageboxSkin
-
-  @state() _isClosed: boolean = false
-
-  private close = (event: MouseEvent) => {
-    this._isClosed = true
-    this.dispatchEvent(new CustomEvent('close', { detail: { origin: event }, bubbles: true }))
-    // Historical support of old Vue implementations…
-    this.dispatchEvent(new CustomEvent('on-close', { detail: { origin: event }, bubbles: true }))
-  }
-
-  render() {
-    const classes = {
-      'pkt-messagebox': true,
-      'pkt-messagebox--compact': this.compact,
-      [`pkt-messagebox--${this.skin}`]: this.skin,
-      'pkt-messagebox--closable': this.closable,
-      'pkt-hide': this._isClosed,
-    }
-
-    return html`<div class=${classMap(classes)}>
-      ${this.closable
-        ? html`<div class="pkt-messagebox__close">
-            <button
-              @click=${this.close}
-              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
-            >
-              <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
-            </button>
-          </div>`
-        : nothing}
-      ${this.title ? html`<div class="pkt-messagebox__title">${this.title}</div>` : nothing}
-      <div class="pkt-messagebox__text" ${ref(this.defaultSlot)}></div>
-    </div>`
-  }
-}
+import { PktMessagebox } from './messagebox'
+export { PktMessagebox } from './messagebox'
+export type { IPktMessagebox, TMessageboxSkin } from './messagebox'
+export default PktMessagebox

package/src/components/messagebox/messagebox.ts

@@ -0,0 +1,69 @@
+import { PktElement } from '@/base-elements/element'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { ref } from 'lit/directives/ref.js'
+import { Ref, createRef } from 'lit/directives/ref.js'
+import { html, nothing } from 'lit'
+import { classMap } from 'lit/directives/class-map.js'
+import { customElement, property, state } from 'lit/decorators.js'
+import specs from 'componentSpecs/messagebox.json'
+
+import '@/components/icon'
+
+export type TMessageboxSkin = 'beige' | 'blue' | 'red' | 'green'
+
+export interface IPktMessagebox {
+  skin?: TMessageboxSkin
+  title?: string
+  compact?: boolean
+  closable?: boolean
+}
+
+@customElement('pkt-messagebox')
+export class PktMessagebox extends PktElement {
+  defaultSlot: Ref<HTMLElement> = createRef()
+
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.defaultSlot)
+    this._isClosed = false
+  }
+
+  @property({ type: Boolean, reflect: true }) closable = specs.props.closable.default
+  @property({ type: Boolean, reflect: true }) compact = specs.props.compact.default
+  @property({ type: String, reflect: true }) title = ''
+  @property({ type: String, reflect: true }) skin = specs.props.skin.default as TMessageboxSkin
+
+  @state() _isClosed: boolean = false
+
+  private close = (event: MouseEvent) => {
+    this._isClosed = true
+    this.dispatchEvent(new CustomEvent('close', { detail: { origin: event }, bubbles: true }))
+    // Historical support of old Vue implementations…
+    this.dispatchEvent(new CustomEvent('on-close', { detail: { origin: event }, bubbles: true }))
+  }
+
+  render() {
+    const classes = {
+      'pkt-messagebox': true,
+      'pkt-messagebox--compact': this.compact,
+      [`pkt-messagebox--${this.skin}`]: this.skin,
+      'pkt-messagebox--closable': this.closable,
+      'pkt-hide': this._isClosed,
+    }
+
+    return html`<div class=${classMap(classes)}>
+      ${this.closable
+        ? html`<div class="pkt-messagebox__close">
+            <button
+              @click=${this.close}
+              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
+            >
+              <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
+            </button>
+          </div>`
+        : nothing}
+      ${this.title ? html`<div class="pkt-messagebox__title">${this.title}</div>` : nothing}
+      <div class="pkt-messagebox__text" ${ref(this.defaultSlot)}></div>
+    </div>`
+  }
+}

package/src/components/modal/index.ts

@@ -1,4 +1,3 @@
 import { PktModal } from './modal'
 export { PktModal } from './modal'
-export type { ModalSize } from './modal'
 export default PktModal

package/src/components/modal/modal.ts

@@ -1,21 +1,20 @@
 import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property, state } from 'lit/decorators.js'
 import { html, nothing } from 'lit'
-import { PktElement } from '../element'
+import { PktElement } from '@/base-elements/element'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
 import { ref } from 'lit/directives/ref.js'
 import { Ref, createRef } from 'lit/directives/ref.js'
+import { TPktSize } from '@/types/size'
 import specs from 'componentSpecs/modal.json'
-import '../icon'
-
-export type ModalSize = 'small' | 'medium' | 'large'
+import '@/components/icon'
 
 export interface IPktModal {
   headingText?: string
   removePadding?: boolean
   hideCloseButton?: boolean
   closeOnBackdropClick?: boolean
-  size?: ModalSize
+  size?: TPktSize
 }
 
 @customElement('pkt-modal')
@@ -27,8 +26,7 @@ export class PktModal extends PktElement implements IPktModal {
     specs.props.hideCloseButton.default
   @property({ type: Boolean, reflect: true })
   closeOnBackdropClick?: boolean = specs.props.closeOnBackdropClick.default
-  @property({ type: String, reflect: true }) size?: ModalSize = specs.props.size
-    .default as ModalSize
+  @property({ type: String, reflect: true }) size?: TPktSize = specs.props.size.default as TPktSize
 
   defaultSlot: Ref<HTMLElement> = createRef()
   dialogRef: Ref<HTMLDialogElement> = createRef()

package/src/components/progressbar/index.ts

@@ -0,0 +1,12 @@
+import PktProgressbar from './progressbar'
+
+export { PktProgressbar } from './progressbar'
+export type {
+  IPktProgressbar,
+  TProgressbarRole,
+  TProgressbarSkin,
+  TProgressbarStatusPlacement,
+  TProgressbarStatusType,
+  TProgressbarTitlePosition,
+} from './progressbar'
+export default PktProgressbar