@folkehelseinstituttet/designsystem 0.34.0 → 0.36.0

package/fhi-icon-rotate-right.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/icons/fhi-icon-rotate-right.component.ts","declarations":[{"kind":"class","description":"## FhiIconRotateRight\n\nhttps://designsystem.fhi.no/?path=/docs/ikoner--docs","name":"FhiIconRotateRight","members":[{"kind":"field","name":"_size","type":{"text":"string"},"privacy":"private","readonly":true},{"kind":"field","name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","fieldName":"color"},{"name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-icon-rotate-right","customElement":true},{"kind":"variable","name":"FhiIconRotateRightSelector","type":{"text":"string"},"default":"\"fhi-icon-rotate-right\""}]}

package/fhi-icon-search.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/icons/fhi-icon-search.component.ts","declarations":[{"kind":"class","description":"## FhiIconSearch\n\nhttps://designsystem.fhi.no/?path=/docs/ikoner--docs","name":"FhiIconSearch","members":[{"kind":"field","name":"_size","type":{"text":"string"},"privacy":"private","readonly":true},{"kind":"field","name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","fieldName":"color"},{"name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-icon-search","customElement":true},{"kind":"variable","name":"FhiIconSearchSelector","type":{"text":"string"},"default":"\"fhi-icon-search\""}]}

package/fhi-icon-send.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/icons/fhi-icon-send.component.ts","declarations":[{"kind":"class","description":"## FhiIconSend\n\nhttps://designsystem.fhi.no/?path=/docs/ikoner--docs","name":"FhiIconSend","members":[{"kind":"field","name":"_size","type":{"text":"string"},"privacy":"private","readonly":true},{"kind":"field","name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","fieldName":"color"},{"name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-icon-send","customElement":true},{"kind":"variable","name":"FhiIconSendSelector","type":{"text":"string"},"default":"\"fhi-icon-send\""}]}

package/fhi-icon-share.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/icons/fhi-icon-share.component.ts","declarations":[{"kind":"class","description":"## FhiIconShare\n\nhttps://designsystem.fhi.no/?path=/docs/ikoner--docs","name":"FhiIconShare","members":[{"kind":"field","name":"_size","type":{"text":"string"},"privacy":"private","readonly":true},{"kind":"field","name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","fieldName":"color"},{"name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-icon-share","customElement":true},{"kind":"variable","name":"FhiIconShareSelector","type":{"text":"string"},"default":"\"fhi-icon-share\""}]}

package/fhi-icon-sheet.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/icons/fhi-icon-sheet.component.ts","declarations":[{"kind":"class","description":"## FhiIconSheet\n\nhttps://designsystem.fhi.no/?path=/docs/ikoner--docs","name":"FhiIconSheet","members":[{"kind":"field","name":"_size","type":{"text":"string"},"privacy":"private","readonly":true},{"kind":"field","name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","fieldName":"color"},{"name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-icon-sheet","customElement":true},{"kind":"variable","name":"FhiIconSheetSelector","type":{"text":"string"},"default":"\"fhi-icon-sheet\""}]}

package/fhi-icon-square-check-big.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/icons/fhi-icon-square-check-big.component.ts","declarations":[{"kind":"class","description":"## FhiIconSquareCheckBig\n\nhttps://designsystem.fhi.no/?path=/docs/ikoner--docs","name":"FhiIconSquareCheckBig","members":[{"kind":"field","name":"_size","type":{"text":"string"},"privacy":"private","readonly":true},{"kind":"field","name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","fieldName":"color"},{"name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-icon-square-check-big","customElement":true},{"kind":"variable","name":"FhiIconSquareCheckBigSelector","type":{"text":"string"},"default":"\"fhi-icon-square-check-big\""}]}

package/fhi-icon-square-check.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/icons/fhi-icon-square-check.component.ts","declarations":[{"kind":"class","description":"## FhiIconSquareCheck\n\nhttps://designsystem.fhi.no/?path=/docs/ikoner--docs","name":"FhiIconSquareCheck","members":[{"kind":"field","name":"_size","type":{"text":"string"},"privacy":"private","readonly":true},{"kind":"field","name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","fieldName":"color"},{"name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-icon-square-check","customElement":true},{"kind":"variable","name":"FhiIconSquareCheckSelector","type":{"text":"string"},"default":"\"fhi-icon-square-check\""}]}

package/fhi-icon-square-pen.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/icons/fhi-icon-square-pen.component.ts","declarations":[{"kind":"class","description":"## FhiIconSquarePen\n\nhttps://designsystem.fhi.no/?path=/docs/ikoner--docs","name":"FhiIconSquarePen","members":[{"kind":"field","name":"_size","type":{"text":"string"},"privacy":"private","readonly":true},{"kind":"field","name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","fieldName":"color"},{"name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-icon-square-pen","customElement":true},{"kind":"variable","name":"FhiIconSquarePenSelector","type":{"text":"string"},"default":"\"fhi-icon-square-pen\""}]}

package/fhi-icon-square-x.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/icons/fhi-icon-square-x.component.ts","declarations":[{"kind":"class","description":"## FhiIconSquareX\n\nhttps://designsystem.fhi.no/?path=/docs/ikoner--docs","name":"FhiIconSquareX","members":[{"kind":"field","name":"_size","type":{"text":"string"},"privacy":"private","readonly":true},{"kind":"field","name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","fieldName":"color"},{"name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-icon-square-x","customElement":true},{"kind":"variable","name":"FhiIconSquareXSelector","type":{"text":"string"},"default":"\"fhi-icon-square-x\""}]}

package/fhi-icon-square.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/icons/fhi-icon-square.component.ts","declarations":[{"kind":"class","description":"## FhiIconSquare\n\nhttps://designsystem.fhi.no/?path=/docs/ikoner--docs","name":"FhiIconSquare","members":[{"kind":"field","name":"_size","type":{"text":"string"},"privacy":"private","readonly":true},{"kind":"field","name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","fieldName":"color"},{"name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-icon-square","customElement":true},{"kind":"variable","name":"FhiIconSquareSelector","type":{"text":"string"},"default":"\"fhi-icon-square\""}]}

package/fhi-icon-trash.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/icons/fhi-icon-trash.component.ts","declarations":[{"kind":"class","description":"## FhiIconTrash\n\nhttps://designsystem.fhi.no/?path=/docs/ikoner--docs","name":"FhiIconTrash","members":[{"kind":"field","name":"_size","type":{"text":"string"},"privacy":"private","readonly":true},{"kind":"field","name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","fieldName":"color"},{"name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-icon-trash","customElement":true},{"kind":"variable","name":"FhiIconTrashSelector","type":{"text":"string"},"default":"\"fhi-icon-trash\""}]}

package/fhi-icon-triangle-alert.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/icons/fhi-icon-triangle-alert.component.ts","declarations":[{"kind":"class","description":"## FhiIconTriangleAlert\n\nhttps://designsystem.fhi.no/?path=/docs/ikoner--docs","name":"FhiIconTriangleAlert","members":[{"kind":"field","name":"_size","type":{"text":"string"},"privacy":"private","readonly":true},{"kind":"field","name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","fieldName":"color"},{"name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-icon-triangle-alert","customElement":true},{"kind":"variable","name":"FhiIconTriangleAlertSelector","type":{"text":"string"},"default":"\"fhi-icon-triangle-alert\""}]}

package/fhi-icon-upload.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/icons/fhi-icon-upload.component.ts","declarations":[{"kind":"class","description":"## FhiIconUpload\n\nhttps://designsystem.fhi.no/?path=/docs/ikoner--docs","name":"FhiIconUpload","members":[{"kind":"field","name":"_size","type":{"text":"string"},"privacy":"private","readonly":true},{"kind":"field","name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","fieldName":"color"},{"name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-icon-upload","customElement":true},{"kind":"variable","name":"FhiIconUploadSelector","type":{"text":"string"},"default":"\"fhi-icon-upload\""}]}

package/fhi-icon-user.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/icons/fhi-icon-user.component.ts","declarations":[{"kind":"class","description":"## FhiIconUser\n\nhttps://designsystem.fhi.no/?path=/docs/ikoner--docs","name":"FhiIconUser","members":[{"kind":"field","name":"_size","type":{"text":"string"},"privacy":"private","readonly":true},{"kind":"field","name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","fieldName":"color"},{"name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-icon-user","customElement":true},{"kind":"variable","name":"FhiIconUserSelector","type":{"text":"string"},"default":"\"fhi-icon-user\""}]}

package/fhi-icon-x.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/icons/fhi-icon-x.component.ts","declarations":[{"kind":"class","description":"## FhiIconX\n\nhttps://designsystem.fhi.no/?path=/docs/ikoner--docs","name":"FhiIconX","members":[{"kind":"field","name":"_size","type":{"text":"string"},"privacy":"private","readonly":true},{"kind":"field","name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"\"currentcolor\"","description":"Sets the color for the icon.\nShould preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)","fieldName":"color"},{"name":"size","type":{"text":"'xsmall' | 'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\nNumber values are treated as px.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-icon-x","customElement":true},{"kind":"variable","name":"FhiIconXSelector","type":{"text":"string"},"default":"\"fhi-icon-x\""}]}

package/fhi-label.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/typography/fhi-label/fhi-label.component.ts","declarations":[{"kind":"class","description":"## FHI Label\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-label--preview\n\nThe `<fhi-label>` component is used to display label text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML `<label>` element to ensure consistent styling across your application.","name":"FhiLabel","slots":[{"description":"The content of the fhi-label component. This should be pure text.","name":""}],"members":[{"kind":"field","name":"color","type":{"text":"string"},"description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-label color=\"var(--fhi-color-primary-text-default)\">\n   This text will be in the primary text color.\n </fhi-label>\n```","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","reflects":true,"attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-label color=\"var(--fhi-color-primary-text-default)\">\n   This text will be in the primary text color.\n </fhi-label>\n```","fieldName":"color"},{"name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-label","customElement":true},{"kind":"variable","name":"FhiLabelSelector","type":{"text":"string"},"default":"'fhi-label'"}]}

package/fhi-modal-dialog.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/fhi-modal-dialog/fhi-modal-dialog.component.ts","declarations":[{"kind":"class","description":"## FHI Modal Dialog\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-modal-dialog--docs\n\nThe `fhi-modal-dialog` component is used to display important information or prompt the user for input in a modal window.\nIt overlays the main content and usually requires user interaction before returning to the underlying page.","name":"FhiModalDialog","slots":[{"description":"The main content of the dialog. Typically contains text or form elements.","name":"body"},{"description":"The footer content of the dialog, typically containing action buttons.","name":"footer"}],"members":[{"kind":"field","name":"_bodyOverflowStyle","type":{"text":"string"},"privacy":"private","default":"''"},{"kind":"field","name":"_dialog","type":{"text":"HTMLDialogElement"},"privacy":"private"},{"kind":"method","name":"_dispatchCloseEvent","privacy":"private"},{"kind":"method","name":"_dispatchToggleEvent","privacy":"private"},{"kind":"method","name":"_focusDialog","privacy":"private"},{"kind":"field","name":"_footer","type":{"text":"HTMLElement"},"privacy":"private"},{"kind":"field","name":"_footerSlot","type":{"text":"HTMLSlotElement"},"privacy":"private"},{"kind":"method","name":"_handleCloseButtonClick","privacy":"private"},{"kind":"method","name":"_handleDialogContentMouseDown","privacy":"private"},{"kind":"method","name":"_handleDialogMouseUp","privacy":"private","parameters":[{"name":"event","type":{"text":"MouseEvent"}}]},{"kind":"method","name":"_handleFooterSlotChange","privacy":"private"},{"kind":"field","name":"_mouseDownInsideDialog","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"method","name":"_toggleFooter","privacy":"private"},{"kind":"field","name":"_triggerElement","type":{"text":"HTMLElement | null"},"privacy":"private","default":"null"},{"kind":"method","name":"close","privacy":"public","description":"Programmatically closes the dialog.\nYou can also close the dialog by instead setting the `open` property to `false`."},{"kind":"field","name":"closeButtonLabel","type":{"text":"string"},"default":"''","description":"Label for the close button.","attribute":"close-button-label"},{"kind":"method","name":"handleKeyPress","privacy":"private","parameters":[{"name":"event","type":{"text":"KeyboardEvent"}}]},{"kind":"field","name":"heading","type":{"text":"string"},"default":"''","description":"The heading text of the dialog. This is displayed at the top of the dialog.","attribute":"heading"},{"kind":"field","name":"open","type":{"text":"boolean"},"default":"false","description":"Decides whether the dialog is open or closed.\nBy setting this property to true, the dialog will be shown. Setting it to false will close the dialog.\n\nThis property is reflected as an attribute and will therefor also change if the user toggles the dialog or\nif you use the `show()` and `close()` methods.","reflects":true,"attribute":"open"},{"kind":"method","name":"show","privacy":"public","description":"Programmatically opens the dialog.\nYou can also open the dialog by instead setting the `open` property to `true`."},{"kind":"field","name":"size","type":{"text":"'small' | 'medium'"},"default":"'medium'","description":"`}","attribute":"size","reflects":true}],"events":[{"name":"close","type":{"text":"Event"},"description":"Standard DOM event with the type `close`\nThis event is fired whenever the dialog is closed."},{"name":"toggle","type":{"text":"Event"},"description":"Standard DOM event with the type `toggle`\nThis event is fired whenever the dialog is opened or closed."}],"attributes":[{"name":"close-button-label","type":{"text":"string"},"default":"''","description":"Label for the close button.","fieldName":"closeButtonLabel"},{"name":"heading","type":{"text":"string"},"default":"''","description":"The heading text of the dialog. This is displayed at the top of the dialog.","fieldName":"heading"},{"name":"open","type":{"text":"boolean"},"default":"false","description":"Decides whether the dialog is open or closed.\nBy setting this property to true, the dialog will be shown. Setting it to false will close the dialog.\n\nThis property is reflected as an attribute and will therefor also change if the user toggles the dialog or\nif you use the `show()` and `close()` methods.","fieldName":"open"},{"name":"size","type":{"text":"'small' | 'medium'"},"default":"'medium'","description":"`}","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-modal-dialog","customElement":true},{"kind":"variable","name":"FhiModalDialogSelector","type":{"text":"string"},"default":"'fhi-modal-dialog'"}]}

package/fhi-radio.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/fhi-radio/fhi-radio.component.ts","declarations":[{"kind":"class","description":"## FHI Radio\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-radio--docs\n\nThe `<fhi-radio>` component represents a single radio button.\nIt should be used within a group of options, allowing users to select one option from a set.","name":"FhiRadio","members":[{"kind":"method","name":"_dispatchChangeEvent","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_dispatchInputEvent","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_getRadioGroup","privacy":"private"},{"kind":"field","name":"_groupRoot","type":{"text":"Document | HTMLFormElement"},"privacy":"private","default":"document"},{"kind":"method","name":"_handleChange","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"_handleInput","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"_handleKeyDown","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"KeyboardEvent"}}]},{"kind":"field","name":"_input","type":{"text":"HTMLInputElement"},"privacy":"private"},{"kind":"field","name":"_internals","type":{"text":"ElementInternals"},"privacy":"private"},{"kind":"method","name":"_setFocusOnInput","privacy":"private"},{"kind":"method","name":"_SetTabbableRadios","privacy":"private"},{"kind":"method","name":"_updateFormValue","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"field","name":"checked","type":{"text":"boolean"},"default":"false","description":"Whether the radio button is checked or not.","attribute":"checked"},{"kind":"field","name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the radio. This changes its appearance and makes it non-interactive.","reflects":true,"attribute":"disabled"},{"kind":"field","name":"formAssociated","type":{"text":"boolean"},"static":true,"readonly":true,"default":"true"},{"kind":"method","name":"formResetCallback","privacy":"public","return":{"type":{"text":"void"}}},{"kind":"field","name":"label","type":{"text":"string"},"default":"undefined","description":"The text label assigned to and displayed next to the radio.\nYou should always provide a label.","attribute":"label"},{"kind":"field","name":"name","type":{"text":"string"},"default":"undefined","description":"The name of the radio. This is submitted with the form data as a `key` when the checkbox is checked.\nAll `<fhi-radio>` components with the same name belong to the same group.","reflects":true,"attribute":"name"},{"kind":"field","name":"status","type":{"text":"'error' | undefined"},"default":"undefined","description":"Sets the visual status of the radio. There is currently only one status available: `error`.\nThe `error` status is used to indicate that there is an issue with the radio, such as a required radio not being checked.","reflects":true,"attribute":"status"},{"kind":"method","name":"uncheckGroupMembers","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"field","name":"value","type":{"text":"string"},"default":"'on'","description":"The value of the radio. This is submitted with the form data as a `value` when the radio is checked.","attribute":"value"}],"events":[{"name":"change","type":{"text":"Event"},"description":"Standard DOM event with the type `change`.\nThis event is dispatched when the radio is checked or unchecked."},{"name":"input","type":{"text":"Event"},"description":"Standard DOM event with the type `input`.\nThis event is dispatched when the radio is checked or unchecked."}],"attributes":[{"name":"checked","type":{"text":"boolean"},"default":"false","description":"Whether the radio button is checked or not.","fieldName":"checked"},{"name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the radio. This changes its appearance and makes it non-interactive.","fieldName":"disabled"},{"name":"label","type":{"text":"string"},"default":"undefined","description":"The text label assigned to and displayed next to the radio.\nYou should always provide a label.","fieldName":"label"},{"name":"name","type":{"text":"string"},"default":"undefined","description":"The name of the radio. This is submitted with the form data as a `key` when the checkbox is checked.\nAll `<fhi-radio>` components with the same name belong to the same group.","fieldName":"name"},{"name":"status","type":{"text":"'error' | undefined"},"default":"undefined","description":"Sets the visual status of the radio. There is currently only one status available: `error`.\nThe `error` status is used to indicate that there is an issue with the radio, such as a required radio not being checked.","fieldName":"status"},{"name":"value","type":{"text":"string"},"default":"'on'","description":"The value of the radio. This is submitted with the form data as a `value` when the radio is checked.","fieldName":"value"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-radio","customElement":true},{"kind":"variable","name":"FhiRadioSelector","type":{"text":"string"},"default":"'fhi-radio'"}]}

package/fhi-tag.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/fhi-tag/fhi-tag.component.ts","declarations":[{"kind":"class","description":"## FHI Tag\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-tag--docs\n\nThe `<fhi-tag>` component is used to create non-interactive tags in accordance with the FHI Design System guidelines.","name":"FhiTag","slots":[{"description":"The content of the tag. This should be pure text with, or without, an icon.","name":""}],"members":[{"kind":"method","name":"_handleSlotChange","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"field","name":"color","type":{"text":"'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'"},"default":"'neutral'","description":"Sets the color of the tag.","reflects":true,"attribute":"color"}],"attributes":[{"name":"color","type":{"text":"'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'"},"default":"'neutral'","description":"Sets the color of the tag.","fieldName":"color"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-tag","customElement":true},{"kind":"variable","name":"FhiTagSelector","type":{"text":"string"},"default":"'fhi-tag'"}]}

package/fhi-text-input.js

@@ -1,29 +1,29 @@
-import { i as g, n as o, a as u, b as n, t as c } from "./property-DGdAXcEz.js";
+import { i as c, n as a, a as g, b as s, t as u } from "./property-DGdAXcEz.js";
 import { e as y } from "./query-NJDNu0-P.js";
 import { o as d } from "./if-defined-BW6N1yuF.js";
-var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (e, a, p, l) => {
-  for (var i = l > 1 ? void 0 : l ? f(a, p) : a, h = e.length - 1, s; h >= 0; h--)
-    (s = e[h]) && (i = (l ? s(a, p, i) : s(i)) || i);
-  return l && i && v(a, p, i), i;
+var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (t, e, i, l) => {
+  for (var n = l > 1 ? void 0 : l ? f(e, i) : e, p = t.length - 1, h; p >= 0; p--)
+    (h = t[p]) && (n = (l ? h(e, i, n) : h(n)) || n);
+  return l && n && v(e, i, n), n;
 };
 const b = "fhi-text-input";
-let t = class extends u {
+let o = class extends g {
   constructor() {
     super(), this.label = void 0, this.message = void 0, this.helpText = void 0, this.placeholder = void 0, this.status = void 0, this.readonly = !1, this.disabled = !1, this._name = void 0, this._value = "", this._internals = this.attachInternals();
   }
   get name() {
     return this._name;
   }
-  set name(e) {
-    const a = this._name;
-    this._name = e, this.requestUpdate("name", a), this._internals.setFormValue(this._value);
+  set name(t) {
+    const e = this._name;
+    this._name = t, this.requestUpdate("name", e), this._internals.setFormValue(this._value);
   }
   get value() {
     return this._value;
   }
-  set value(e) {
-    const a = this._value;
-    this._value = e, this.requestUpdate("value", a), this._internals.setFormValue(this._value);
+  set value(t) {
+    const e = this._value;
+    this._value = t, this.requestUpdate("value", e), this._internals.setFormValue(this._value);
   }
   connectedCallback() {
     super.connectedCallback(), this._internals.setFormValue(this.value);
@@ -44,39 +44,63 @@ let t = class extends u {
       })
     );
   }
-  handleChange(e) {
-    e.stopPropagation(), this._dispatchChangeEvent();
+  handleChange(t) {
+    t.stopPropagation(), this._dispatchChangeEvent();
   }
-  handleInput(e) {
-    this.value = this._input.value, this._internals.setFormValue(this.value), e.stopPropagation(), this._dispatchInputEvent();
+  handleInput(t) {
+    this.value = this._input.value, this._internals.setFormValue(this.value), t.stopPropagation(), this._dispatchInputEvent();
   }
-  handleKeyDown(e) {
-    e.key === "Enter" && this._internals.form && this._internals.form.requestSubmit();
+  handleKeyDown(t) {
+    t.key === "Enter" && this._internals.form && this._internals.form.requestSubmit();
   }
   formResetCallback() {
     this.value = this.getAttribute("value") || "", this._internals.setFormValue(this.value);
   }
+  _handleStartSlotChange(t) {
+    const e = t.target.assignedNodes()[0];
+    if (e.nodeType === Node.ELEMENT_NODE && e.tagName.toLowerCase().startsWith("fhi-icon")) {
+      const i = e;
+      this._input.style.paddingLeft = "var(--fhi-spacing-500)", i.setAttribute("size", "1.5rem");
+    } else
+      console.error(
+        "Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons."
+      );
+  }
+  _handleEndSlotChange(t) {
+    const e = t.target.assignedNodes()[0];
+    if (e.nodeType === Node.ELEMENT_NODE && e.tagName.toLowerCase().startsWith("fhi-icon")) {
+      const i = e;
+      this._input.style.paddingRight = "var(--fhi-spacing-500)", i.setAttribute("size", "1.5rem");
+    } else
+      console.error(
+        "Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons."
+      );
+  }
   render() {
-    return n`
-      ${this.label && n`<label for="input-element">${this.label}</label>`}
-      ${this.helpText ? n`<p class="help-text">${this.helpText}</p>` : ""}
-      <input
-        id="input-element"
-        name=${d(this.name)}
-        placeholder=${d(this.placeholder)}
-        .value=${this.value}
-        ?readonly=${this.readonly}
-        ?disabled=${this.disabled}
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-        @keydown=${this.handleKeyDown}
-      />
-      ${this.message ? n`<p class="message">${this.message}</p>` : ""}
+    return s`
+      ${this.label && s`<label for="input-element">${this.label}</label>`}
+      ${this.helpText ? s`<p class="help-text">${this.helpText}</p>` : ""}
+      <div class="input-container">
+        <input
+          id="input-element"
+          name=${d(this.name)}
+          placeholder=${d(this.placeholder)}
+          .value=${this.value}
+          ?readonly=${this.readonly}
+          ?disabled=${this.disabled}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+          @keydown=${this.handleKeyDown}
+        />
+        <slot name="start" @slotchange=${this._handleStartSlotChange}> </slot>
+        <slot name="end" @slotchange=${this._handleEndSlotChange}> </slot>
+      </div>
+      ${this.message ? s`<p class="message">${this.message}</p>` : ""}
     `;
   }
 };
-t.formAssociated = !0;
-t.styles = g`
+o.formAssociated = !0;
+o.styles = c`
     :host {
       --typography-font-family: var(--fhi-font-family-default);
 
@@ -195,6 +219,7 @@ t.styles = g`
 
       input {
         box-sizing: border-box;
+        flex: 1 1 auto;
         height: var(--dimension-input-height);
         border: var(--dimension-input-border-width) solid
           var(--color-input-border);
@@ -222,6 +247,18 @@ t.styles = g`
         }
       }
 
+      slot[name='start'] {
+        color: var(--fhi-color-neutral-text-subtle);
+      }
+
+      input:not([disabled]):not([readonly]):hover ~ slot[name='start'] {
+        color: var(--fhi-color-accent-text-subtle);
+      }
+      input:not([disabled]):not([readonly]):active ~ slot[name='start'],
+      input:not([disabled]):not([readonly]):focus ~ slot[name='start'] {
+        color: var(--fhi-color-accent-text-default);
+      }
+
       .message {
         margin: var(--dimension-message-margin-top) 0 0 0;
         color: var(--color-message-text);
@@ -239,6 +276,34 @@ t.styles = g`
         letter-spacing: var(--typography-help-text-letter-spacing);
         margin: 0 0 var(--dimension-help-text-margin-bottom) 0;
       }
+
+      .input-container {
+        position: relative;
+        display: flex;
+      }
+
+      slot[name='start'] {
+        display: block;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-left: 8px;
+        height: fit-content;
+        pointer-events: none;
+      }
+
+      slot[name='end'] {
+        display: block;
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-right: 8px;
+        height: fit-content;
+        pointer-events: none;
+        color: var(--fhi-color-neutral-text-subtle);
+      }
     }
 
     :host([disabled]) {
@@ -281,43 +346,53 @@ t.styles = g`
       .help-text {
         color: var(--color-help-text-text-error);
       }
+      slot[name='start'] {
+        color: var(--fhi-color-danger-text-subtle);
+      }
+
+      input:hover ~ slot[name='start'] {
+        color: var(--fhi-color-danger-text-subtle);
+      }
+      input:focus ~ slot[name='start'] {
+        color: var(--fhi-color-danger-text-subtle);
+      }
     }
   `;
 r([
-  o({ type: String })
-], t.prototype, "label", 2);
+  a({ type: String })
+], o.prototype, "label", 2);
 r([
-  o({ type: String })
-], t.prototype, "message", 2);
+  a({ type: String })
+], o.prototype, "message", 2);
 r([
-  o({ type: String, attribute: "help-text" })
-], t.prototype, "helpText", 2);
+  a({ type: String, attribute: "help-text" })
+], o.prototype, "helpText", 2);
 r([
-  o({ type: String })
-], t.prototype, "placeholder", 2);
+  a({ type: String })
+], o.prototype, "placeholder", 2);
 r([
-  o({ type: String, reflect: !0 })
-], t.prototype, "status", 2);
+  a({ type: String, reflect: !0 })
+], o.prototype, "status", 2);
 r([
-  o({ type: Boolean, reflect: !0 })
-], t.prototype, "readonly", 2);
+  a({ type: Boolean, reflect: !0 })
+], o.prototype, "readonly", 2);
 r([
-  o({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled", 2);
+  a({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
 r([
   y("#input-element")
-], t.prototype, "_input", 2);
+], o.prototype, "_input", 2);
 r([
-  o({ type: String, reflect: !0 })
-], t.prototype, "name", 1);
+  a({ type: String, reflect: !0 })
+], o.prototype, "name", 1);
 r([
-  o({ type: String })
-], t.prototype, "value", 1);
-t = r([
-  c(b)
-], t);
+  a({ type: String })
+], o.prototype, "value", 1);
+o = r([
+  u(b)
+], o);
 export {
-  t as FhiTextInput,
+  o as FhiTextInput,
   b as FhiTextInputSelector
 };
 //# sourceMappingURL=fhi-text-input.js.map

package/fhi-text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-text-input.js","sources":["../../src/components/fhi-text-input/fhi-text-input.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiTextInputSelector = 'fhi-text-input';\n\n/**\n * ## FHI Text Input\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-text-input--docs}\n *\n * The `<fhi-text-input>` component is used to collect user input in forms.\n * It provides a labeled input field with optional placeholder text, status indication, and a message area for additional information or validation feedback.\n *\n * @tag fhi-text-input\n * @element fhi-text-input\n */\n@customElement(FhiTextInputSelector)\nexport class FhiTextInput extends LitElement {\n  static readonly formAssociated = true;\n\n  /**\n   * The text that labels the input field.\n   * An input field should always have a label to ensure accessibility.\n   * @type {string}\n   */\n  @property({ type: String }) label?: string = undefined;\n\n  /**\n   * The message shown beneath the input field.\n   * This is often used to provide additional information or feedback to the user.\n   * @type {string}\n   */\n  @property({ type: String }) message?: string = undefined;\n\n  /**\n   * The message shown above the input field.\n   * This is often used to provide additional information to the user.\n   * @type {string}\n   */\n  @property({ type: String, attribute: 'help-text' }) helpText?: string =\n    undefined;\n\n  /**\n   * Sets the placeholder text for the input field.\n   * This text is displayed when the input field is empty, providing a hint to the user about the expected input.\n   * @type {string}\n   */\n  @property({ type: String }) placeholder?: string = undefined;\n\n  /**\n   * Sets the visual status of the input. There is currently only one status available: `error`.\n   *\n   * The `error` status is used to indicate that there is an issue with the input, such as invalid or missing data.\n   * @reflect\n   * @type {'error'}\n   */\n  @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n  /**\n   * Sets the input to read-only. A read-only field cannot be modified by the user but may be submitted with the form.\n   * @reflect\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true }) readonly? = false;\n\n  /**\n   * Disables the input.  This changes its appearance and makes it non-interactive.\n   * @reflect\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true }) disabled? = false;\n\n  @query('#input-element')\n  private _input!: HTMLInputElement;\n\n  private _name?: string = undefined;\n\n  /**\n   * The name of the input. This is submitted with the form data as a `key`.\n   *\n   * This attribute conforms with the standard HTML `name` attribute for input fields.\n   * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name}\n   *\n   * @reflect\n   * @type {string}\n   */\n  @property({ type: String, reflect: true })\n  get name(): string | undefined {\n    return this._name;\n  }\n  set name(newName: string) {\n    const oldName = this._name;\n    this._name = newName;\n    this.requestUpdate('name', oldName);\n    this._internals.setFormValue(this._value);\n  }\n\n  private _value: string = '';\n\n  /**\n   * The default value of the input field.\n   *\n   * You can fetch the current value of the text input by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n   *\n   * This attribute conforms with the standard HTML `value` attribute for input fields.\n   * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value}\n   *\n   * @type {string}\n   */\n  @property({ type: String })\n  get value(): string {\n    return this._value;\n  }\n\n  set value(newValue: string) {\n    const oldValue = this._value;\n    this._value = newValue;\n    this.requestUpdate('value', oldValue);\n    this._internals.setFormValue(this._value);\n  }\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  public connectedCallback(): void {\n    super.connectedCallback();\n    this._internals.setFormValue(this.value);\n  }\n\n  private _dispatchChangeEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `change`.\n     * This event is dispatched when the value of the input changes.\n     */\n    this.dispatchEvent(\n      new Event('change', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _dispatchInputEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `input`.\n     * This event is dispatched when the value of the input changes.\n     */\n    this.dispatchEvent(\n      new Event('input', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private handleChange(event: Event): void {\n    event.stopPropagation();\n    this._dispatchChangeEvent();\n  }\n\n  private handleInput(event: Event): void {\n    this.value = this._input.value;\n    this._internals.setFormValue(this.value);\n\n    event.stopPropagation();\n    this._dispatchInputEvent();\n  }\n\n  private handleKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'Enter' && this._internals.form) {\n      this._internals.form!.requestSubmit();\n    }\n  }\n\n  public formResetCallback(): void {\n    this.value = this.getAttribute('value') || '';\n    this._internals.setFormValue(this.value);\n  }\n\n  render() {\n    return html`\n      ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\n      ${this.helpText ? html`<p class=\"help-text\">${this.helpText}</p>` : ''}\n      <input\n        id=\"input-element\"\n        name=${ifDefined(this.name)}\n        placeholder=${ifDefined(this.placeholder)}\n        .value=${this.value}\n        ?readonly=${this.readonly}\n        ?disabled=${this.disabled}\n        @change=${this.handleChange}\n        @input=${this.handleInput}\n        @keydown=${this.handleKeyDown}\n      />\n      ${this.message ? html`<p class=\"message\">${this.message}</p>` : ''}\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --typography-font-family: var(--fhi-font-family-default);\n\n      --opacity-disabled: var(--fhi-opacity-disabled);\n\n      /* label */\n      --color-label-text: var(--fhi-color-neutral-text-default);\n      --color-label-text-error: var(--fhi-color-danger-text-default);\n\n      --typography-label-font-weight: var(\n        --fhi-typography-label-small-font-weight\n      );\n      --typography-label-font-size: var(--fhi-typography-label-small-font-size);\n      --typography-label-line-height: var(\n        --fhi-typography-label-small-line-height\n      );\n      --typography-label-letter-spacing: var(\n        --fhi-typography-label-small-letter-spacing\n      );\n      --dimension-label-margin-bottom: var(--fhi-spacing-050);\n\n      /* input */\n      --color-input-placeholder: var(--fhi-color-neutral-base-default);\n      --color-input-text: var(--fhi-color-neutral-text-default);\n      --color-input-text-error: var(--fhi-color-danger-text-default);\n      --color-input-background: var(--fhi-color-neutral-background-default);\n      --color-input-background-active: var(\n        --fhi-color-accent-background-default\n      );\n      --color-input-background-hover: var(--fhi-color-accent-background-subtle);\n      --color-input-background-error: var(\n        --fhi-color-danger-background-default\n      );\n      --color-input-border: var(--fhi-color-neutral-border-default);\n      --color-input-border-hover: var(--fhi-color-accent-border-default);\n      --color-input-border-active: var(--fhi-color-accent-border-strong);\n      --color-input-border-error: var(--fhi-color-danger-border-strong);\n      --color-input-border-disabled: var(--fhi-color-neutral-border-default);\n\n      --typography-input-font-weight: var(\n        --fhi-typography-body-medium-font-weight\n      );\n      --typography-input-font-size: var(--fhi-typography-body-medium-font-size);\n      --typography-input-line-height: var(\n        --fhi-typography-body-medium-line-height\n      );\n      --typography-input-letter-spacing: var(\n        --fhi-typography-body-medium-letter-spacing\n      );\n\n      --dimension-input-border-width: var(--fhi-dimension-border-width);\n\n      --dimension-input-height: var(--fhi-spacing-500);\n      --dimension-input-border-radius: var(--fhi-border-radius-050);\n      --dimension-input-padding-left: var(--fhi-spacing-150);\n      --dimension-input-padding-right: var(--fhi-spacing-150);\n\n      --motion-input-transition: all var(--fhi-motion-ease-default)\n        var(--fhi-motion-duration-quick);\n\n      /* message */\n      --color-message-text: var(--fhi-color-neutral-text-default);\n      --color-message-text-error: var(--fhi-color-danger-text-subtle);\n\n      --typography-message-font-weight: var(\n        --fhi-typography-body-small-font-weight\n      );\n      --typography-message-font-size: var(\n        --fhi-typography-body-small-font-size\n      );\n      --typography-message-line-height: var(\n        --fhi-typography-body-small-line-height\n      );\n      --typography-message-letter-spacing: var(\n        --fhi-typography-body-small-letter-spacing\n      );\n\n      --dimension-message-margin-top: var(--fhi-spacing-050);\n\n      /* help-text */\n      --color-help-text-text: var(--fhi-color-neutral-text-subtle);\n      --color-help-text-text-error: var(--fhi-color-danger-text-default);\n      --typography-help-text-font-weight: var(\n        --fhi-typography-body-small-font-weight\n      );\n      --typography-help-text-font-size: var(\n        --fhi-typography-body-small-font-size\n      );\n      --typography-help-text-line-height: var(\n        --fhi-typography-body-small-line-height\n      );\n      --typography-help-text-letter-spacing: var(\n        --fhi-typography-body-small-letter-spacing\n      );\n      --dimension-help-text-margin-bottom: var(--fhi-spacing-050);\n    }\n\n    :host {\n      display: flex;\n      flex-direction: column;\n      font-family: var(--typography-font-family);\n      -webkit-font-smoothing: antialiased;\n\n      label {\n        font-weight: var(--typography-label-font-weight);\n        font-size: var(--typography-label-font-size);\n        line-height: var(--typography-label-line-height);\n        letter-spacing: var(--typography-label-letter-spacing);\n        color: var(--color-label-text);\n        margin: 0 0 var(--dimension-label-margin-bottom) 0;\n      }\n\n      label:has(+ p) {\n        margin: 0 0 0 0;\n      }\n\n      input {\n        box-sizing: border-box;\n        height: var(--dimension-input-height);\n        border: var(--dimension-input-border-width) solid\n          var(--color-input-border);\n        border-radius: var(--dimension-input-border-radius);\n        padding: 0 var(--dimension-input-padding-right) 0\n          var(--dimension-input-padding-left);\n        color: var(--color-input-text);\n        background-color: var(--color-input-background);\n        font-family: var(--typography-font-family);\n        font-weight: var(--typography-input-font-weight);\n        font-size: var(--typography-input-font-size);\n        line-height: var(--typography-input-line-height);\n        letter-spacing: var(--typography-input-letter-spacing);\n        transition: var(--motion-input-transition);\n        &:hover {\n          border-color: var(--color-input-border-hover);\n          background-color: var(--color-input-background-hover);\n        }\n        &:focus {\n          border-color: var(--color-input-border-active);\n          background-color: var(--color-input-background-active);\n        }\n        &::placeholder {\n          color: var(--color-input-placeholder);\n        }\n      }\n\n      .message {\n        margin: var(--dimension-message-margin-top) 0 0 0;\n        color: var(--color-message-text);\n        font-weight: var(--typography-message-font-weight);\n        font-size: var(--typography-message-font-size);\n        line-height: var(--typography-message-line-height);\n        letter-spacing: var(--typography-message-letter-spacing);\n      }\n\n      .help-text {\n        color: var(--color-help-text-text);\n        font-weight: var(--typography-help-text-font-weight);\n        font-size: var(--typography-help-text-font-size);\n        line-height: var(--typography-help-text-line-height);\n        letter-spacing: var(--typography-help-text-letter-spacing);\n        margin: 0 0 var(--dimension-help-text-margin-bottom) 0;\n      }\n    }\n\n    :host([disabled]) {\n      opacity: var(--opacity-disabled);\n      cursor: not-allowed;\n      label,\n      input {\n        cursor: not-allowed;\n      }\n      input {\n        &:hover {\n          border-color: var(--color-input-border);\n          background-color: var(--color-input-background);\n        }\n      }\n    }\n\n    :host([readonly]:not([disabled])) {\n      input {\n        border: unset;\n        border-radius: unset;\n        background-color: unset;\n        border-left: var(--dimension-input-border-width) solid\n          var(--color-input-border);\n      }\n    }\n\n    :host([status='error']:not([disabled]):not([readonly])) {\n      label {\n        color: var(--color-label-text-error);\n      }\n      input {\n        border-color: var(--color-input-border-error);\n        background-color: var(--color-input-background-error);\n        color: var(--color-input-text-error);\n      }\n      .message {\n        color: var(--color-message-text-error);\n      }\n      .help-text {\n        color: var(--color-help-text-text-error);\n      }\n    }\n  `;\n}\n"],"names":["FhiTextInputSelector","FhiTextInput","LitElement","newName","oldName","newValue","oldValue","event","html","ifDefined","css","__decorateClass","property","query","customElement"],"mappings":"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"}
+{"version":3,"file":"fhi-text-input.js","sources":["../../src/components/fhi-text-input/fhi-text-input.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiTextInputSelector = 'fhi-text-input';\n\n/**\n * ## FHI Text Input\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-text-input--docs}\n *\n * The `<fhi-text-input>` component is used to collect user input in forms.\n * It provides a labeled input field with optional placeholder text, status indication, and a message area for additional information or validation feedback.\n *\n * @tag fhi-text-input\n * @element fhi-text-input\n */\n@customElement(FhiTextInputSelector)\nexport class FhiTextInput extends LitElement {\n  static readonly formAssociated = true;\n\n  /**\n   * The text that labels the input field.\n   * An input field should always have a label to ensure accessibility.\n   * @type {string}\n   */\n  @property({ type: String }) label?: string = undefined;\n\n  /**\n   * The message shown beneath the input field.\n   * This is often used to provide additional information or feedback to the user.\n   * @type {string}\n   */\n  @property({ type: String }) message?: string = undefined;\n\n  /**\n   * The message shown above the input field.\n   * This is often used to provide additional information to the user.\n   * @type {string}\n   */\n  @property({ type: String, attribute: 'help-text' }) helpText?: string =\n    undefined;\n\n  /**\n   * Sets the placeholder text for the input field.\n   * This text is displayed when the input field is empty, providing a hint to the user about the expected input.\n   * @type {string}\n   */\n  @property({ type: String }) placeholder?: string = undefined;\n\n  /**\n   * Sets the visual status of the input. There is currently only one status available: `error`.\n   *\n   * The `error` status is used to indicate that there is an issue with the input, such as invalid or missing data.\n   * @reflect\n   * @type {'error'}\n   */\n  @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n  /**\n   * Sets the input to read-only. A read-only field cannot be modified by the user but may be submitted with the form.\n   * @reflect\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true }) readonly? = false;\n\n  /**\n   * Disables the input.  This changes its appearance and makes it non-interactive.\n   * @reflect\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true }) disabled? = false;\n\n  @query('#input-element')\n  private _input!: HTMLInputElement;\n\n  private _name?: string = undefined;\n\n  /**\n   * The name of the input. This is submitted with the form data as a `key`.\n   *\n   * This attribute conforms with the standard HTML `name` attribute for input fields.\n   * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name}\n   *\n   * @reflect\n   * @type {string}\n   */\n  @property({ type: String, reflect: true })\n  get name(): string | undefined {\n    return this._name;\n  }\n  set name(newName: string) {\n    const oldName = this._name;\n    this._name = newName;\n    this.requestUpdate('name', oldName);\n    this._internals.setFormValue(this._value);\n  }\n\n  private _value: string = '';\n\n  /**\n   * The default value of the input field.\n   *\n   * You can fetch the current value of the text input by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n   *\n   * This attribute conforms with the standard HTML `value` attribute for input fields.\n   * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value}\n   *\n   * @type {string}\n   */\n  @property({ type: String })\n  get value(): string {\n    return this._value;\n  }\n\n  set value(newValue: string) {\n    const oldValue = this._value;\n    this._value = newValue;\n    this.requestUpdate('value', oldValue);\n    this._internals.setFormValue(this._value);\n  }\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  public connectedCallback(): void {\n    super.connectedCallback();\n    this._internals.setFormValue(this.value);\n  }\n\n  private _dispatchChangeEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `change`.\n     * This event is dispatched when the value of the input changes.\n     */\n    this.dispatchEvent(\n      new Event('change', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _dispatchInputEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `input`.\n     * This event is dispatched when the value of the input changes.\n     */\n    this.dispatchEvent(\n      new Event('input', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private handleChange(event: Event): void {\n    event.stopPropagation();\n    this._dispatchChangeEvent();\n  }\n\n  private handleInput(event: Event): void {\n    this.value = this._input.value;\n    this._internals.setFormValue(this.value);\n\n    event.stopPropagation();\n    this._dispatchInputEvent();\n  }\n\n  private handleKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'Enter' && this._internals.form) {\n      this._internals.form!.requestSubmit();\n    }\n  }\n\n  public formResetCallback(): void {\n    this.value = this.getAttribute('value') || '';\n    this._internals.setFormValue(this.value);\n  }\n\n  private _handleStartSlotChange(event: Event): void {\n    const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];\n    if (\n      iconNode.nodeType === Node.ELEMENT_NODE &&\n      (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n    ) {\n      const icon = iconNode as HTMLElement;\n      this._input.style.paddingLeft = 'var(--fhi-spacing-500)';\n      icon.setAttribute('size', '1.5rem');\n    } else {\n      console.error(\n        'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',\n      );\n    }\n  }\n\n  private _handleEndSlotChange(event: Event): void {\n    const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];\n\n    if (\n      iconNode.nodeType === Node.ELEMENT_NODE &&\n      (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n    ) {\n      const icon = iconNode as HTMLElement;\n      this._input.style.paddingRight = 'var(--fhi-spacing-500)';\n      icon.setAttribute('size', '1.5rem');\n    } else {\n      console.error(\n        'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',\n      );\n    }\n  }\n\n  render() {\n    return html`\n      ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\n      ${this.helpText ? html`<p class=\"help-text\">${this.helpText}</p>` : ''}\n      <div class=\"input-container\">\n        <input\n          id=\"input-element\"\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          .value=${this.value}\n          ?readonly=${this.readonly}\n          ?disabled=${this.disabled}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          @keydown=${this.handleKeyDown}\n        />\n        <slot name=\"start\" @slotchange=${this._handleStartSlotChange}> </slot>\n        <slot name=\"end\" @slotchange=${this._handleEndSlotChange}> </slot>\n      </div>\n      ${this.message ? html`<p class=\"message\">${this.message}</p>` : ''}\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --typography-font-family: var(--fhi-font-family-default);\n\n      --opacity-disabled: var(--fhi-opacity-disabled);\n\n      /* label */\n      --color-label-text: var(--fhi-color-neutral-text-default);\n      --color-label-text-error: var(--fhi-color-danger-text-default);\n\n      --typography-label-font-weight: var(\n        --fhi-typography-label-small-font-weight\n      );\n      --typography-label-font-size: var(--fhi-typography-label-small-font-size);\n      --typography-label-line-height: var(\n        --fhi-typography-label-small-line-height\n      );\n      --typography-label-letter-spacing: var(\n        --fhi-typography-label-small-letter-spacing\n      );\n      --dimension-label-margin-bottom: var(--fhi-spacing-050);\n\n      /* input */\n      --color-input-placeholder: var(--fhi-color-neutral-base-default);\n      --color-input-text: var(--fhi-color-neutral-text-default);\n      --color-input-text-error: var(--fhi-color-danger-text-default);\n      --color-input-background: var(--fhi-color-neutral-background-default);\n      --color-input-background-active: var(\n        --fhi-color-accent-background-default\n      );\n      --color-input-background-hover: var(--fhi-color-accent-background-subtle);\n      --color-input-background-error: var(\n        --fhi-color-danger-background-default\n      );\n      --color-input-border: var(--fhi-color-neutral-border-default);\n      --color-input-border-hover: var(--fhi-color-accent-border-default);\n      --color-input-border-active: var(--fhi-color-accent-border-strong);\n      --color-input-border-error: var(--fhi-color-danger-border-strong);\n      --color-input-border-disabled: var(--fhi-color-neutral-border-default);\n\n      --typography-input-font-weight: var(\n        --fhi-typography-body-medium-font-weight\n      );\n      --typography-input-font-size: var(--fhi-typography-body-medium-font-size);\n      --typography-input-line-height: var(\n        --fhi-typography-body-medium-line-height\n      );\n      --typography-input-letter-spacing: var(\n        --fhi-typography-body-medium-letter-spacing\n      );\n\n      --dimension-input-border-width: var(--fhi-dimension-border-width);\n\n      --dimension-input-height: var(--fhi-spacing-500);\n      --dimension-input-border-radius: var(--fhi-border-radius-050);\n      --dimension-input-padding-left: var(--fhi-spacing-150);\n      --dimension-input-padding-right: var(--fhi-spacing-150);\n\n      --motion-input-transition: all var(--fhi-motion-ease-default)\n        var(--fhi-motion-duration-quick);\n\n      /* message */\n      --color-message-text: var(--fhi-color-neutral-text-default);\n      --color-message-text-error: var(--fhi-color-danger-text-subtle);\n\n      --typography-message-font-weight: var(\n        --fhi-typography-body-small-font-weight\n      );\n      --typography-message-font-size: var(\n        --fhi-typography-body-small-font-size\n      );\n      --typography-message-line-height: var(\n        --fhi-typography-body-small-line-height\n      );\n      --typography-message-letter-spacing: var(\n        --fhi-typography-body-small-letter-spacing\n      );\n\n      --dimension-message-margin-top: var(--fhi-spacing-050);\n\n      /* help-text */\n      --color-help-text-text: var(--fhi-color-neutral-text-subtle);\n      --color-help-text-text-error: var(--fhi-color-danger-text-default);\n      --typography-help-text-font-weight: var(\n        --fhi-typography-body-small-font-weight\n      );\n      --typography-help-text-font-size: var(\n        --fhi-typography-body-small-font-size\n      );\n      --typography-help-text-line-height: var(\n        --fhi-typography-body-small-line-height\n      );\n      --typography-help-text-letter-spacing: var(\n        --fhi-typography-body-small-letter-spacing\n      );\n      --dimension-help-text-margin-bottom: var(--fhi-spacing-050);\n    }\n\n    :host {\n      display: flex;\n      flex-direction: column;\n      font-family: var(--typography-font-family);\n      -webkit-font-smoothing: antialiased;\n\n      label {\n        font-weight: var(--typography-label-font-weight);\n        font-size: var(--typography-label-font-size);\n        line-height: var(--typography-label-line-height);\n        letter-spacing: var(--typography-label-letter-spacing);\n        color: var(--color-label-text);\n        margin: 0 0 var(--dimension-label-margin-bottom) 0;\n      }\n\n      label:has(+ p) {\n        margin: 0 0 0 0;\n      }\n\n      input {\n        box-sizing: border-box;\n        flex: 1 1 auto;\n        height: var(--dimension-input-height);\n        border: var(--dimension-input-border-width) solid\n          var(--color-input-border);\n        border-radius: var(--dimension-input-border-radius);\n        padding: 0 var(--dimension-input-padding-right) 0\n          var(--dimension-input-padding-left);\n        color: var(--color-input-text);\n        background-color: var(--color-input-background);\n        font-family: var(--typography-font-family);\n        font-weight: var(--typography-input-font-weight);\n        font-size: var(--typography-input-font-size);\n        line-height: var(--typography-input-line-height);\n        letter-spacing: var(--typography-input-letter-spacing);\n        transition: var(--motion-input-transition);\n        &:hover {\n          border-color: var(--color-input-border-hover);\n          background-color: var(--color-input-background-hover);\n        }\n        &:focus {\n          border-color: var(--color-input-border-active);\n          background-color: var(--color-input-background-active);\n        }\n        &::placeholder {\n          color: var(--color-input-placeholder);\n        }\n      }\n\n      slot[name='start'] {\n        color: var(--fhi-color-neutral-text-subtle);\n      }\n\n      input:not([disabled]):not([readonly]):hover ~ slot[name='start'] {\n        color: var(--fhi-color-accent-text-subtle);\n      }\n      input:not([disabled]):not([readonly]):active ~ slot[name='start'],\n      input:not([disabled]):not([readonly]):focus ~ slot[name='start'] {\n        color: var(--fhi-color-accent-text-default);\n      }\n\n      .message {\n        margin: var(--dimension-message-margin-top) 0 0 0;\n        color: var(--color-message-text);\n        font-weight: var(--typography-message-font-weight);\n        font-size: var(--typography-message-font-size);\n        line-height: var(--typography-message-line-height);\n        letter-spacing: var(--typography-message-letter-spacing);\n      }\n\n      .help-text {\n        color: var(--color-help-text-text);\n        font-weight: var(--typography-help-text-font-weight);\n        font-size: var(--typography-help-text-font-size);\n        line-height: var(--typography-help-text-line-height);\n        letter-spacing: var(--typography-help-text-letter-spacing);\n        margin: 0 0 var(--dimension-help-text-margin-bottom) 0;\n      }\n\n      .input-container {\n        position: relative;\n        display: flex;\n      }\n\n      slot[name='start'] {\n        display: block;\n        position: absolute;\n        left: 0;\n        top: 50%;\n        transform: translateY(-50%);\n        margin-left: 8px;\n        height: fit-content;\n        pointer-events: none;\n      }\n\n      slot[name='end'] {\n        display: block;\n        position: absolute;\n        right: 0;\n        top: 50%;\n        transform: translateY(-50%);\n        margin-right: 8px;\n        height: fit-content;\n        pointer-events: none;\n        color: var(--fhi-color-neutral-text-subtle);\n      }\n    }\n\n    :host([disabled]) {\n      opacity: var(--opacity-disabled);\n      cursor: not-allowed;\n      label,\n      input {\n        cursor: not-allowed;\n      }\n      input {\n        &:hover {\n          border-color: var(--color-input-border);\n          background-color: var(--color-input-background);\n        }\n      }\n    }\n\n    :host([readonly]:not([disabled])) {\n      input {\n        border: unset;\n        border-radius: unset;\n        background-color: unset;\n        border-left: var(--dimension-input-border-width) solid\n          var(--color-input-border);\n      }\n    }\n\n    :host([status='error']:not([disabled]):not([readonly])) {\n      label {\n        color: var(--color-label-text-error);\n      }\n      input {\n        border-color: var(--color-input-border-error);\n        background-color: var(--color-input-background-error);\n        color: var(--color-input-text-error);\n      }\n      .message {\n        color: var(--color-message-text-error);\n      }\n      .help-text {\n        color: var(--color-help-text-text-error);\n      }\n      slot[name='start'] {\n        color: var(--fhi-color-danger-text-subtle);\n      }\n\n      input:hover ~ slot[name='start'] {\n        color: var(--fhi-color-danger-text-subtle);\n      }\n      input:focus ~ slot[name='start'] {\n        color: var(--fhi-color-danger-text-subtle);\n      }\n    }\n  `;\n}\n"],"names":["FhiTextInputSelector","FhiTextInput","LitElement","newName","oldName","newValue","oldValue","event","iconNode","icon","html","ifDefined","css","__decorateClass","property","query","customElement"],"mappings":"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AAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAtNYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GARfb,EAQiB,WAAA,SAAA,CAAA;AAOAY,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAffb,EAeiB,WAAA,WAAA,CAAA;AAOwBY,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GAtBvCb,EAsByC,WAAA,YAAA,CAAA;AAQxBY,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9Bfb,EA8BiB,WAAA,eAAA,CAAA;AASeY,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAvC9Bb,EAuCgC,WAAA,UAAA,CAAA;AAOCY,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA9C/Bb,EA8CiC,WAAA,YAAA,CAAA;AAOAY,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArD/Bb,EAqDiC,WAAA,YAAA,CAAA;AAGpCY,EAAA;AAAA,EADPE,EAAM,gBAAgB;AAAA,GAvDZd,EAwDH,WAAA,UAAA,CAAA;AAcJY,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GArE9Bb,EAsEP,WAAA,QAAA,CAAA;AAuBAY,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5Ffb,EA6FP,WAAA,SAAA,CAAA;AA7FOA,IAANY,EAAA;AAAA,EADNG,EAAchB,CAAoB;AAAA,GACtBC,CAAA;"}

package/fhi-text-input.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/fhi-text-input/fhi-text-input.component.ts","declarations":[{"kind":"class","description":"## FHI Text Input\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-text-input--docs\n\nThe `<fhi-text-input>` component is used to collect user input in forms.\nIt provides a labeled input field with optional placeholder text, status indication, and a message area for additional information or validation feedback.","name":"FhiTextInput","members":[{"kind":"method","name":"_dispatchChangeEvent","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_dispatchInputEvent","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_handleEndSlotChange","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"_handleStartSlotChange","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"field","name":"_input","type":{"text":"HTMLInputElement"},"privacy":"private"},{"kind":"field","name":"_internals","type":{"text":"ElementInternals"},"privacy":"private"},{"kind":"field","name":"_name","type":{"text":"string | undefined"},"privacy":"private","default":"undefined"},{"kind":"field","name":"_value","type":{"text":"string"},"privacy":"private","default":"''"},{"kind":"field","name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the input.  This changes its appearance and makes it non-interactive.","reflects":true,"attribute":"disabled"},{"kind":"field","name":"formAssociated","type":{"text":"boolean"},"static":true,"readonly":true,"default":"true"},{"kind":"method","name":"formResetCallback","privacy":"public","return":{"type":{"text":"void"}}},{"kind":"method","name":"handleChange","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"handleInput","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"handleKeyDown","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"KeyboardEvent"}}]},{"kind":"field","name":"helpText","type":{"text":"string"},"default":"undefined","description":"The message shown above the input field.\nThis is often used to provide additional information to the user.","attribute":"help-text"},{"kind":"field","name":"label","type":{"text":"string"},"default":"undefined","description":"The text that labels the input field.\nAn input field should always have a label to ensure accessibility.","attribute":"label"},{"kind":"field","name":"message","type":{"text":"string"},"default":"undefined","description":"The message shown beneath the input field.\nThis is often used to provide additional information or feedback to the user.","attribute":"message"},{"kind":"field","name":"name","type":{"text":"string"},"description":"The name of the input. This is submitted with the form data as a `key`.\n\nThis attribute conforms with the standard HTML `name` attribute for input fields.\nSee: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name","reflects":true,"attribute":"name"},{"kind":"field","name":"placeholder","type":{"text":"string"},"default":"undefined","description":"Sets the placeholder text for the input field.\nThis text is displayed when the input field is empty, providing a hint to the user about the expected input.","attribute":"placeholder"},{"kind":"field","name":"readonly","type":{"text":"boolean"},"default":"false","description":"Sets the input to read-only. A read-only field cannot be modified by the user but may be submitted with the form.","reflects":true,"attribute":"readonly"},{"kind":"field","name":"status","type":{"text":"'error'"},"default":"undefined","description":"Sets the visual status of the input. There is currently only one status available: `error`.\n\nThe `error` status is used to indicate that there is an issue with the input, such as invalid or missing data.","reflects":true,"attribute":"status"},{"kind":"field","name":"value","type":{"text":"string"},"description":"The default value of the input field.\n\nYou can fetch the current value of the text input by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n\nThis attribute conforms with the standard HTML `value` attribute for input fields.\nSee: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value","attribute":"value"}],"events":[{"name":"change","type":{"text":"Event"},"description":"Standard DOM event with the type `change`.\nThis event is dispatched when the value of the input changes."},{"name":"input","type":{"text":"Event"},"description":"Standard DOM event with the type `input`.\nThis event is dispatched when the value of the input changes."}],"attributes":[{"name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the input.  This changes its appearance and makes it non-interactive.","fieldName":"disabled"},{"name":"help-text","type":{"text":"string"},"default":"undefined","description":"The message shown above the input field.\nThis is often used to provide additional information to the user.","fieldName":"helpText"},{"name":"label","type":{"text":"string"},"default":"undefined","description":"The text that labels the input field.\nAn input field should always have a label to ensure accessibility.","fieldName":"label"},{"name":"message","type":{"text":"string"},"default":"undefined","description":"The message shown beneath the input field.\nThis is often used to provide additional information or feedback to the user.","fieldName":"message"},{"name":"name","type":{"text":"string"},"description":"The name of the input. This is submitted with the form data as a `key`.\n\nThis attribute conforms with the standard HTML `name` attribute for input fields.\nSee: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name","fieldName":"name"},{"name":"placeholder","type":{"text":"string"},"default":"undefined","description":"Sets the placeholder text for the input field.\nThis text is displayed when the input field is empty, providing a hint to the user about the expected input.","fieldName":"placeholder"},{"name":"readonly","type":{"text":"boolean"},"default":"false","description":"Sets the input to read-only. A read-only field cannot be modified by the user but may be submitted with the form.","fieldName":"readonly"},{"name":"status","type":{"text":"'error'"},"default":"undefined","description":"Sets the visual status of the input. There is currently only one status available: `error`.\n\nThe `error` status is used to indicate that there is an issue with the input, such as invalid or missing data.","fieldName":"status"},{"name":"value","type":{"text":"string"},"description":"The default value of the input field.\n\nYou can fetch the current value of the text input by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n\nThis attribute conforms with the standard HTML `value` attribute for input fields.\nSee: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value","fieldName":"value"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-text-input","customElement":true},{"kind":"variable","name":"FhiTextInputSelector","type":{"text":"string"},"default":"'fhi-text-input'"}]}