@oslokommune/punkt-elements 12.27.7 → 12.27.9

package/dist/index.d.ts

@@ -7,6 +7,13 @@ import { Ref } from 'lit/directives/ref.js';
 import { TemplateResult } from 'lit-html';
 import { TZDate } from '@date-fns/tz';
 
+/**
+ * We define all props as optional. Native HTML attributes are optional by default,
+ * but the TS definition require either null or value. This way we can support showing a value as optional
+ * and define a default value on the element itself
+ */
+declare type ElementProps<Element, PropKeys extends keyof Element> = Partial<Pick<Element, PropKeys>>;
+
 declare interface IPktLinkCard {
     title?: string;
     href?: string;
@@ -618,15 +625,15 @@ export declare class PktTextinput extends PktInputElement<Props_5> {
     render(): TemplateResult<1>;
 }
 
-declare type Props = Pick<PktElement, 'strings' | 'role'>;
+declare type Props = ElementProps<PktElement, 'strings' | 'role'>;
 
-declare type Props_2 = Pick<PktInputElement, 'defaultValue' | 'disabled' | 'readonly' | 'required' | 'max' | 'maxlength' | 'min' | 'minlength' | 'ariaDescribedBy' | 'ariaLabelledby' | 'name' | 'pattern' | 'placeholder' | 'id' | 'counter' | 'hasError' | 'inline' | 'optionalTag' | 'requiredTag' | 'skipForwardTestid' | 'useWrapper' | 'fullwidth' | 'counterMaxLength' | 'errorMessage' | 'helptext' | 'helptextDropdown' | 'helptextDropdownButton' | 'label' | 'optionalText' | 'requiredText' | 'dataTestid'>;
+declare type Props_2 = ElementProps<PktInputElement, 'defaultValue' | 'disabled' | 'readonly' | 'required' | 'max' | 'maxlength' | 'min' | 'minlength' | 'ariaDescribedBy' | 'ariaLabelledby' | 'name' | 'pattern' | 'placeholder' | 'id' | 'counter' | 'hasError' | 'inline' | 'optionalTag' | 'requiredTag' | 'skipForwardTestid' | 'useWrapper' | 'fullwidth' | 'counterMaxLength' | 'errorMessage' | 'helptext' | 'helptextDropdown' | 'helptextDropdownButton' | 'label' | 'optionalText' | 'requiredText' | 'dataTestid'>;
 
-declare type Props_3 = Pick<PktIcon, 'path' | 'name'>;
+declare type Props_3 = ElementProps<PktIcon, 'path' | 'name'>;
 
-declare type Props_4 = Pick<PktInputWrapper, 'forId' | 'label' | 'helptext' | 'helptextDropdown' | 'helptextDropdownButton' | 'counter' | 'counterCurrent' | 'counterMaxLength' | 'optionalTag' | 'optionalText' | 'requiredTag' | 'requiredText' | 'hasError' | 'errorMessage' | 'disabled' | 'inline' | 'ariaDescribedby' | 'hasFieldset' | 'useWrapper' | 'role'>;
+declare type Props_4 = ElementProps<PktInputWrapper, 'forId' | 'label' | 'helptext' | 'helptextDropdown' | 'helptextDropdownButton' | 'counter' | 'counterCurrent' | 'counterMaxLength' | 'optionalTag' | 'optionalText' | 'requiredTag' | 'requiredText' | 'hasError' | 'errorMessage' | 'disabled' | 'inline' | 'ariaDescribedby' | 'hasFieldset' | 'useWrapper' | 'role'>;
 
-declare type Props_5 = Pick<PktTextinput, 'value' | 'type' | 'size' | 'autocomplete' | 'iconNameRight' | 'prefix' | 'suffix' | 'omitSearchIcon'>;
+declare type Props_5 = ElementProps<PktTextinput, 'value' | 'type' | 'size' | 'autocomplete' | 'iconNameRight' | 'prefix' | 'suffix' | 'omitSearchIcon'>;
 
 declare type TAlertSkin = 'error' | 'success' | 'warning' | 'info';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.27.7",
+  "version": "12.27.9",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -57,5 +57,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "8462afda718ac2c8045708ae881430f12fabc8d8"
+  "gitHead": "bc51587318b0ccff1df2340b84d6c2f87c6bd7b8"
 }

package/src/components/icon/icon.ts

@@ -1,4 +1,5 @@
 import { PktElement } from '@/base-elements/element'
+import { ElementProps } from '@/types/typeUtils'
 import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon'
 import { html, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -50,7 +51,7 @@ const downloadIconOrGetFromCache = async (
   return Promise.resolve(errorSvg)
 }
 
-type Props = Pick<PktIcon, 'path' | 'name'>
+type Props = ElementProps<PktIcon, 'path' | 'name'>
 
 @customElement('pkt-icon')
 export class PktIcon extends PktElement<Props> {

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

@@ -5,12 +5,13 @@ import { html, nothing, PropertyValues } from 'lit'
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property, state } from 'lit/decorators.js'
+import { ElementProps } from '@/types/typeUtils'
 import { uuidish } from '@/utils/stringutils'
 import specs from 'componentSpecs/input-wrapper.json'
 import '@/components/helptext'
 import '@/components/icon'
 
-type Props = Pick<
+type Props = ElementProps<
   PktInputWrapper,
   | 'forId'
   | 'label'

package/src/components/textinput/textinput.ts

@@ -1,6 +1,7 @@
 import { html, nothing, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { Ref, createRef, ref } from 'lit/directives/ref.js'
+import { ElementProps } from '@/types/typeUtils'
 import { classMap } from 'lit/directives/class-map.js'
 import { PktInputElement } from '@/base-elements/input-element'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
@@ -8,7 +9,7 @@ import { PktSlotController } from '@/controllers/pkt-slot-controller'
 import '@/components/input-wrapper'
 import '@/components/icon'
 
-type Props = Pick<
+type Props = ElementProps<
   PktTextinput,
   | 'value'
   | 'type'