@oslokommune/punkt-elements 16.7.1 → 16.7.4

package/src/components/breadcrumbs/breadcrumbs.ts

@@ -13,7 +13,6 @@ export interface IPktBreadcrumbs {
   breadcrumbs: IBreadcrumbItem[]
 }
 
-@customElement('pkt-breadcrumbs')
 export class PktBreadcrumbs extends PktElement implements IPktBreadcrumbs {
   @property({ type: Array }) breadcrumbs: IBreadcrumbItem[] = []
 
@@ -93,3 +92,9 @@ export class PktBreadcrumbs extends PktElement implements IPktBreadcrumbs {
 }
 
 export default PktBreadcrumbs
+
+try {
+  customElement('pkt-breadcrumbs')(PktBreadcrumbs)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-breadcrumbs>, men den er allerede definert')
+}

package/src/components/button/button.ts

@@ -55,7 +55,6 @@ export interface IPktButton {
   disabled?: Booleanish
   loadingAnimationPath?: string
 }
-@customElement('pkt-button')
 export class PktButton extends PktElementWithSlot<IPktButton> implements IPktButton {
 
   // Properties
@@ -183,3 +182,9 @@ export class PktButton extends PktElementWithSlot<IPktButton> implements IPktBut
 }
 
 export default PktButton
+
+try {
+  customElement('pkt-button')(PktButton)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-button>, men den er allerede definert')
+}

package/src/components/calendar/calendar.ts

@@ -54,7 +54,6 @@ type TDayViewData = {
   tabindex: string
 }
 
-@customElement('pkt-calendar')
 export class PktCalendar extends PktElement {
   // Selection properties
   @property({ converter: converters.csvToArray })
@@ -718,3 +717,9 @@ export class PktCalendar extends PktElement {
     )
   }
 }
+
+try {
+  customElement('pkt-calendar')(PktCalendar)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-calendar>, men den er allerede definert')
+}

package/src/components/card/card.ts

@@ -36,7 +36,6 @@ export interface IPktCard {
   tags?: (Omit<IPktTag, 'closeTag'> & { text: string })[]
 }
 
-@customElement('pkt-card')
 export class PktCard extends PktElementWithSlot implements IPktCard {
   // Properties
 
@@ -260,3 +259,9 @@ export class PktCard extends PktElementWithSlot implements IPktCard {
     `
   }
 }
+
+try {
+  customElement('pkt-card')(PktCard)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-card>, men den er allerede definert')
+}

package/src/components/checkbox/checkbox.ts

@@ -21,7 +21,6 @@ type Props = ElementProps<
   | 'requiredText'
 >
 
-@customElement('pkt-checkbox')
 export class PktCheckbox extends PktInputElement<Props> {
   inputRef: Ref<HTMLInputElement> = createRef()
 
@@ -202,3 +201,9 @@ export class PktCheckbox extends PktInputElement<Props> {
     }
   }
 }
+
+try {
+  customElement('pkt-checkbox')(PktCheckbox)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-checkbox>, men den er allerede definert')
+}

package/src/components/combobox/combobox.ts

@@ -62,7 +62,6 @@ declare global {
   }
 }
 
-@customElement('pkt-combobox')
 export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
   // Bound handler for body click — stored for cleanup in disconnectedCallback
   private handleBodyClick = (e: MouseEvent) => {
@@ -498,3 +497,9 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
 }
 
 export default PktCombobox
+
+try {
+  customElement('pkt-combobox')(PktCombobox)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-combobox>, men den er allerede definert')
+}

package/src/components/consent/consent.ts

@@ -58,7 +58,6 @@ export interface IPktConsent {
   triggerText?: string | null
 }
 
-@customElement('pkt-consent')
 export class PktConsent extends PktElement<IPktConsent> implements IPktConsent {
   private _cookieEventHandler?: (consent: any) => void
 
@@ -189,3 +188,9 @@ export class PktConsent extends PktElement<IPktConsent> implements IPktConsent {
     return html`<pkt-button @click=${this.openModal}>${this.triggerText}</pkt-button>`
   }
 }
+
+try {
+  customElement('pkt-consent')(PktConsent)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-consent>, men den er allerede definert')
+}

package/src/components/datepicker/date-tags.ts

@@ -22,7 +22,6 @@ export type TISODate = `${TYear}-${TMonth}-${TDay}`
  * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
  */
 
-@customElement('pkt-date-tags')
 export class PktDateTags extends PktElement {
   @property({ type: Array }) dates: TISODate[] = []
   @property({ type: String }) dateformat: string = 'dd.MM.yyyy' // se kommentar over
@@ -58,3 +57,9 @@ export class PktDateTags extends PktElement {
     `
   }
 }
+
+try {
+  customElement('pkt-date-tags')(PktDateTags)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-date-tags>, men den er allerede definert')
+}

package/src/components/datepicker/datepicker-multiple.ts

@@ -9,7 +9,6 @@ import { IDatepickerStrings, defaultSingleStrings } from './datepicker-types'
 import { isIOS } from 'shared-utils/device-utils'
 import '@/components/icon'
 
-@customElement('pkt-datepicker-multiple')
 export class PktDatepickerMultiple extends PktDatepickerBase {
   @property({ type: Array })
   value: string[] = []
@@ -94,3 +93,9 @@ export class PktDatepickerMultiple extends PktDatepickerBase {
     `
   }
 }
+
+try {
+  customElement('pkt-datepicker-multiple')(PktDatepickerMultiple)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-datepicker-multiple>, men den er allerede definert')
+}

package/src/components/datepicker/datepicker-popup.ts

@@ -8,7 +8,6 @@ import { formatISODate, newDate } from 'shared-utils/date-utils'
 import { PktCalendar } from '../calendar/calendar'
 import { calendarUtils } from './datepicker-utils'
 
-@customElement('pkt-datepicker-popup')
 export class PktDatepickerPopup extends PktElement {
   @property({ type: Boolean, reflect: true }) open = false
   @property({ type: Boolean }) multiple = false
@@ -178,3 +177,9 @@ export class PktDatepickerPopup extends PktElement {
     `
   }
 }
+
+try {
+  customElement('pkt-datepicker-popup')(PktDatepickerPopup)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-datepicker-popup>, men den er allerede definert')
+}

package/src/components/datepicker/datepicker-range.ts

@@ -9,7 +9,6 @@ import { IDatepickerStrings, defaultRangeStrings } from './datepicker-types'
 import { isIOS } from 'shared-utils/device-utils'
 import '@/components/icon'
 
-@customElement('pkt-datepicker-range')
 export class PktDatepickerRange extends PktDatepickerBase {
   @property({ type: Array })
   value: string[] = []
@@ -164,3 +163,9 @@ export class PktDatepickerRange extends PktDatepickerBase {
     `
   }
 }
+
+try {
+  customElement('pkt-datepicker-range')(PktDatepickerRange)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-datepicker-range>, men den er allerede definert')
+}

package/src/components/datepicker/datepicker-single.ts

@@ -8,7 +8,6 @@ import { keyboardUtils, formUtils } from './datepicker-utils'
 import { IDatepickerStrings, defaultSingleStrings } from './datepicker-types'
 import { isIOS } from 'shared-utils/device-utils'
 
-@customElement('pkt-datepicker-single')
 export class PktDatepickerSingle extends PktDatepickerBase {
   @property({ type: String })
   value: string = ''
@@ -89,3 +88,9 @@ export class PktDatepickerSingle extends PktDatepickerBase {
     `
   }
 }
+
+try {
+  customElement('pkt-datepicker-single')(PktDatepickerSingle)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-datepicker-single>, men den er allerede definert')
+}

package/src/components/datepicker/datepicker-utils.test.ts

@@ -11,6 +11,12 @@ import {
 } from './datepicker-utils'
 import { createRef } from 'lit/directives/ref.js'
 
+const mockIsIOS = vi.hoisted(() => vi.fn(() => false))
+
+vi.mock('shared-utils/device-utils', () => ({
+  isIOS: mockIsIOS,
+}))
+
 describe('datepicker-utils', () => {
   describe('valueUtils', () => {
     describe('validateRangeOrder', () => {
@@ -71,18 +77,15 @@ describe('datepicker-utils', () => {
   describe('inputTypeUtils', () => {
     describe('getInputType', () => {
       it('should return "text" for iOS devices', () => {
-        // Mock isIOS to return true
-        vi.mock('shared-utils/device-utils', () => ({
-          isIOS: () => true,
-        }))
-        // Note: This test is limited by how vitest handles module mocking
-        // In a real scenario, you'd need proper mocking setup
+        mockIsIOS.mockReturnValue(true)
+        const type = inputTypeUtils.getInputType()
+        expect(type).toBe('text')
       })
 
       it('should return "date" for non-iOS devices', () => {
-        // The function returns based on isIOS() which is mocked elsewhere
+        mockIsIOS.mockReturnValue(false)
         const type = inputTypeUtils.getInputType()
-        expect(['text', 'date']).toContain(type)
+        expect(type).toBe('date')
       })
     })
   })
@@ -223,7 +226,9 @@ describe('datepicker-utils', () => {
       it('should return early if refs are not available', () => {
         const popupRef = createRef()
         const inputRef = createRef()
-        expect(() => calendarUtils.handleCalendarPosition(popupRef as any, inputRef as any)).not.toThrow()
+        expect(() =>
+          calendarUtils.handleCalendarPosition(popupRef as any, inputRef as any),
+        ).not.toThrow()
       })
 
       it('should position calendar below input by default', () => {
@@ -629,13 +634,7 @@ describe('datepicker-utils', () => {
         const blurInput = vi.fn()
         const event = { key: 'Enter', preventDefault: vi.fn() } as any
 
-        keyboardUtils.handleInputKeydown(
-          event,
-          toggleCalendar,
-          undefined,
-          undefined,
-          blurInput,
-        )
+        keyboardUtils.handleInputKeydown(event, toggleCalendar, undefined, undefined, blurInput)
         expect(event.preventDefault).toHaveBeenCalled()
         expect(blurInput).toHaveBeenCalled()
       })
@@ -662,13 +661,7 @@ describe('datepicker-utils', () => {
         const blurInput = vi.fn()
         const event = { key: ',', preventDefault: vi.fn() } as any
 
-        keyboardUtils.handleInputKeydown(
-          event,
-          toggleCalendar,
-          undefined,
-          undefined,
-          blurInput,
-        )
+        keyboardUtils.handleInputKeydown(event, toggleCalendar, undefined, undefined, blurInput)
         expect(event.preventDefault).toHaveBeenCalled()
         expect(blurInput).toHaveBeenCalled()
       })

package/src/components/datepicker/datepicker.ts

@@ -51,7 +51,6 @@ type Props = ElementProps<
   | 'timezone'
 >
 
-@customElement('pkt-datepicker')
 export class PktDatepicker extends PktInputElement<Props> {
   /**
    * Element attributes and properties
@@ -609,3 +608,9 @@ export class PktDatepicker extends PktInputElement<Props> {
     )
   }
 }
+
+try {
+  customElement('pkt-datepicker')(PktDatepicker)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-datepicker>, men den er allerede definert')
+}

package/src/components/header/header-service.ts

@@ -27,7 +27,6 @@ import './header-user-menu'
 
 const CDN_LOGO_PATH = 'https://punkt-cdn.oslo.kommune.no/latest/logos/'
 
-@customElement('pkt-header-service')
 export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements IPktHeader {
   @property({ type: String, attribute: 'service-name' }) serviceName?: string
   @property({ type: String, attribute: 'service-link' }) serviceLink?: string
@@ -756,3 +755,9 @@ declare global {
     'pkt-header-service': PktHeaderService
   }
 }
+
+try {
+  customElement('pkt-header-service')(PktHeaderService)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-header-service>, men den er allerede definert')
+}

package/src/components/header/header-user-menu.ts

@@ -24,7 +24,6 @@ export interface IPktHeaderUserMenu {
   logoutOnClick?: Booleanish
 }
 
-@customElement('pkt-header-user-menu')
 export class PktHeaderUserMenu
   extends PktElement<IPktHeaderUserMenu>
   implements IPktHeaderUserMenu
@@ -213,3 +212,9 @@ declare global {
     'pkt-header-user-menu': PktHeaderUserMenu
   }
 }
+
+try {
+  customElement('pkt-header-user-menu')(PktHeaderUserMenu)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-header-user-menu>, men den er allerede definert')
+}

package/src/components/header/header.ts

@@ -31,7 +31,6 @@ import './header-service'
  *
  * TODO: Add `type` prop to switch between `service` and `global` header types
  */
-@customElement('pkt-header')
 export class PktHeader extends PktElementWithSlot<IPktHeader> implements IPktHeader {
   @property({ type: String, attribute: 'service-name' }) serviceName?: string
   @property({ type: String, attribute: 'service-link' }) serviceLink?: string
@@ -140,3 +139,9 @@ declare global {
     'pkt-header': PktHeader
   }
 }
+
+try {
+  customElement('pkt-header')(PktHeader)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-header>, men den er allerede definert')
+}

package/src/components/heading/heading.ts

@@ -15,7 +15,6 @@ export interface IPktHeading {
   align?: 'start' | 'center' | 'end'
 }
 
-@customElement('pkt-heading')
 export class PktHeading extends PktShadowElement<IPktHeading> implements IPktHeading {
   @property({ type: String, reflect: true }) size: TPktHeadingSize | undefined = undefined
   @property({ type: Number, reflect: true }) level: TPktHeadingLevel = 2
@@ -151,3 +150,9 @@ export class PktHeading extends PktShadowElement<IPktHeading> implements IPktHea
     return html`<slot></slot>`
   }
 }
+
+try {
+  customElement('pkt-heading')(PktHeading)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-heading>, men den er allerede definert')
+}

package/src/components/helptext/helptext.ts

@@ -8,7 +8,6 @@ import specs from 'componentSpecs/input-wrapper.json'
 import '@/components/icon'
 import { slotContent } from '@/directives/slot-content'
 
-@customElement('pkt-helptext')
 export class PktHelptext extends PktElementWithSlot {
   @property({ type: String, reflect: true })
   forId: string = uuidish()
@@ -84,3 +83,9 @@ export class PktHelptext extends PktElementWithSlot {
     return html`${helptextElement()}`
   }
 }
+
+try {
+  customElement('pkt-helptext')(PktHelptext)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-helptext>, men den er allerede definert')
+}

package/src/components/icon/icon.ts

@@ -75,7 +75,6 @@ const downloadIconOrGetFromCache = async (
 
 type Props = ElementProps<PktIcon, 'path' | 'name'>
 
-@customElement('pkt-icon')
 export class PktIcon extends PktElement<Props> {
   @property({ type: String, reflect: false })
   path: string | undefined = typeof window !== 'undefined' ? window.pktIconPath : defaultPath
@@ -133,3 +132,9 @@ declare global {
     'pkt-icon': PktIcon
   }
 }
+
+try {
+  customElement('pkt-icon')(PktIcon)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-icon>, men den er allerede definert')
+}

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

@@ -40,7 +40,6 @@ type Props = ElementProps<
   | 'role'
 >
 
-@customElement('pkt-input-wrapper')
 export class PktInputWrapper extends PktElementWithSlot<Props> {
   /**
    * Element attributes
@@ -222,3 +221,9 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
     )
   }
 }
+
+try {
+  customElement('pkt-input-wrapper')(PktInputWrapper)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-input-wrapper>, men den er allerede definert')
+}

package/src/components/link/link.ts

@@ -6,7 +6,6 @@ import { customElement, property } from 'lit/decorators.js'
 import specs from 'componentSpecs/link.json'
 import '@/components/icon'
 
-@customElement('pkt-link')
 export class PktLink extends PktElementWithSlot {
   /**
    * Element attributes
@@ -37,3 +36,9 @@ export class PktLink extends PktElementWithSlot {
     >`
   }
 }
+
+try {
+  customElement('pkt-link')(PktLink)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-link>, men den er allerede definert')
+}

package/src/components/linkcard/linkcard.ts

@@ -24,7 +24,6 @@ export interface IPktLinkCard {
   skin?: TLinkCardSkin
 }
 
-@customElement('pkt-linkcard')
 export class PktLinkCard extends PktElementWithSlot implements IPktLinkCard {
   @property({ type: String, reflect: true }) title: string = ''
   @property({ type: String, reflect: true }) href: string = '#'
@@ -57,3 +56,9 @@ export class PktLinkCard extends PktElementWithSlot implements IPktLinkCard {
     `
   }
 }
+
+try {
+  customElement('pkt-linkcard')(PktLinkCard)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-linkcard>, men den er allerede definert')
+}

package/src/components/listbox/listbox.ts

@@ -44,7 +44,6 @@ export interface IPktListbox {
   userMessage: string | null
 }
 
-@customElement('pkt-listbox')
 export class PktListbox extends PktElement implements IPktListbox {
   @property({ type: String }) id: string = uuidish()
   @property({ type: String }) label: string | null = null
@@ -463,3 +462,9 @@ export class PktListbox extends PktElement implements IPktListbox {
     }
   }
 }
+
+try {
+  customElement('pkt-listbox')(PktListbox)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-listbox>, men den er allerede definert')
+}

package/src/components/loader/loader.ts

@@ -47,7 +47,6 @@ export interface IPktLoader {
   loadingAnimationPath?: string
 }
 
-@customElement('pkt-loader')
 export class PktLoader extends PktElementWithSlot implements IPktLoader {
   @property({ type: Number }) delay: number = 0
   @property({ type: Boolean }) inline: boolean = false
@@ -129,3 +128,9 @@ export class PktLoader extends PktElementWithSlot implements IPktLoader {
 }
 
 export default PktLoader
+
+try {
+  customElement('pkt-loader')(PktLoader)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-loader>, men den er allerede definert')
+}

package/src/components/messagebox/messagebox.ts

@@ -18,7 +18,6 @@ export interface IPktMessagebox {
   closable?: boolean
 }
 
-@customElement('pkt-messagebox')
 export class PktMessagebox extends PktElementWithSlot implements IPktMessagebox {
   constructor() {
     super()
@@ -80,3 +79,9 @@ export class PktMessagebox extends PktElementWithSlot implements IPktMessagebox
     this.dispatchEvent(new CustomEvent('on-close', { detail: { origin: event }, bubbles: true }))
   }
 }
+
+try {
+  customElement('pkt-messagebox')(PktMessagebox)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-messagebox>, men den er allerede definert')
+}

package/src/components/modal/modal.ts

@@ -22,7 +22,6 @@ export interface IPktModal {
   transparentBackdrop?: boolean
 }
 
-@customElement('pkt-modal')
 export class PktModal extends PktElementWithSlot implements IPktModal {
   // Public properties
   @property({ type: Boolean, reflect: true }) open?: boolean = false
@@ -211,3 +210,9 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
     `
   }
 }
+
+try {
+  customElement('pkt-modal')(PktModal)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-modal>, men den er allerede definert')
+}

package/src/components/progressbar/progressbar.ts

@@ -35,7 +35,6 @@ export interface IPktProgressbar {
   valueMin?: number
 }
 
-@customElement('pkt-progressbar')
 export class PktProgressbar extends PktElement implements IPktProgressbar {
   constructor() {
     super()
@@ -194,3 +193,9 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
 }
 
 export default PktProgressbar
+
+try {
+  customElement('pkt-progressbar')(PktProgressbar)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-progressbar>, men den er allerede definert')
+}

package/src/components/radiobutton/radiobutton.ts

@@ -18,7 +18,6 @@ type Props = ElementProps<
   | 'requiredText'
 >
 
-@customElement('pkt-radiobutton')
 export class PktRadioButton extends PktInputElement<Props> {
   inputRef: Ref<HTMLInputElement> = createRef()
 
@@ -129,3 +128,9 @@ export class PktRadioButton extends PktInputElement<Props> {
     }
   }
 }
+
+try {
+  customElement('pkt-radiobutton')(PktRadioButton)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-radiobutton>, men den er allerede definert')
+}

package/src/components/select/select.ts

@@ -38,7 +38,6 @@ declare global {
   }
 }
 
-@customElement('pkt-select')
 export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> implements IPktSelect {
   inputRef: Ref<HTMLSelectElement> = createRef()
 
@@ -260,3 +259,9 @@ export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> impleme
     return value
   }
 }
+
+try {
+  customElement('pkt-select')(PktSelect)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-select>, men den er allerede definert')
+}

package/src/components/tabs/tabitem.ts

@@ -19,7 +19,6 @@ export interface IPktTabItem {
   index?: number
 }
 
-@customElement('pkt-tab-item')
 export class PktTabItem extends PktElementWithSlot<IPktTabItem> implements IPktTabItem {
   @property({ type: Boolean, reflect: true }) active: boolean = false
   @property({ type: String, reflect: true }) href: string = ''
@@ -112,3 +111,9 @@ export class PktTabItem extends PktElementWithSlot<IPktTabItem> implements IPktT
 }
 
 export default PktTabItem
+
+try {
+  customElement('pkt-tab-item')(PktTabItem)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-tab-item>, men den er allerede definert')
+}

package/src/components/tabs/tabs.ts

@@ -10,7 +10,6 @@ export interface IPktTabs {
   disableArrowNav?: boolean
 }
 
-@customElement('pkt-tabs')
 export class PktTabs extends PktElementWithSlot<IPktTabs> implements IPktTabs {
   @property({ type: Boolean, reflect: true, attribute: 'arrow-nav' }) arrowNav: boolean = true
   @property({ type: Boolean, reflect: true, attribute: 'disable-arrow-nav' })
@@ -92,3 +91,9 @@ export class PktTabs extends PktElementWithSlot<IPktTabs> implements IPktTabs {
 }
 
 export default PktTabs
+
+try {
+  customElement('pkt-tabs')(PktTabs)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-tabs>, men den er allerede definert')
+}

package/src/components/tag/tag.ts

@@ -33,7 +33,6 @@ export interface IPktTag {
   ariaLabel?: IAriaAttributes['aria-label'] | null
 }
 
-@customElement('pkt-tag')
 export class PktTag extends PktElementWithSlot<IPktTag> implements IPktTag {
   constructor() {
     super()
@@ -142,3 +141,9 @@ export class PktTag extends PktElementWithSlot<IPktTag> implements IPktTag {
     }
   }
 }
+
+try {
+  customElement('pkt-tag')(PktTag)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-tag>, men den er allerede definert')
+}