@arkitektum/altinn-studio-custom-components 3.2.0 → 4.0.0

package/dist/main.css

@@ -0,0 +1,241 @@
+custom-divider {
+    hr {
+        background-color: var(--color-divider-default);
+        border: none;
+        height: 1px;
+        margin: 20px 0;
+        page-break-before: avoid;
+        &::before {
+            content: "";
+            display: block;
+            height: 50px;
+            margin-top: -50px;
+        }
+    }
+}
+
+custom-field {
+    font-family: var(--font-family-default);
+    font-size: var(--font-size-default);
+    font-weight: var(--font-weight-default);
+    color: var(--color-text-default);
+    line-height: var(--line-height-default);
+    & .field {
+        &.inline {
+            display: flex;
+            align-items: baseline;
+            flex-direction: row;
+            gap: 0.5rem;
+        }
+        & label {
+            font-weight: bold;
+            display: block;
+            page-break-after: avoid;
+            page-break-inside: avoid;
+            &::after {
+                content: "";
+                display: block;
+                height: 50px;
+                margin-bottom: -50px;
+            }
+        }
+        & span {
+            white-space: pre-line;
+            display: block;
+        }
+        &:not(.inline) {
+            & span {
+                &.has-title {
+                    page-break-before: avoid;
+                }
+            }
+        }
+    }
+}
+
+custom-header {
+    font-family: var(--font-family-default);
+    font-weight: var(--font-weight-default);
+    color: var(--color-text-default);
+    display: block;
+    page-break-after: avoid;
+    page-break-inside: avoid;
+    &::after {
+        content: "";
+        display: block;
+        height: 150px;
+        margin-bottom: -150px;
+    }
+    & h1,
+    & h2,
+    & h3,
+    & h4 {
+        page-break-after: avoid;
+        display: inline-block;
+        margin-block-start: 1em;
+        margin-block-end: 0;
+        line-height: 1.1em;
+    }
+    & h1 {
+        font-size: var(--font-size-h1);
+        font-weight: var(--font-weight-default);
+    }
+    & h2 {
+        font-size: var(--font-size-h2);
+        font-weight: var(--font-weight-default);
+    }
+    & h3 {
+        font-size: var(--font-size-h3);
+        font-weight: var(--font-weight-default);
+    }
+    & h4 {
+        font-size: var(--font-size-h4);
+        font-weight: var(--font-weight-default);
+    }
+}
+
+custom-list {
+    font-family: var(--font-family-default);
+    font-size: var(--font-size-default);
+    font-weight: var(--font-weight-default);
+    color: var(--color-text-default);
+    line-height: var(--line-height-default);
+    & .field {
+        & label {
+            font-weight: bold;
+            display: block;
+            page-break-after: avoid;
+            page-break-inside: avoid;
+            &::after {
+                content: "";
+                display: block;
+                height: 50px;
+                margin-bottom: -50px;
+            }
+        }
+    }
+    ul {
+        padding-inline-start: 1em;
+        margin-block: 0;
+        display: block;
+        &.has-title {
+            page-break-before: avoid;
+        }
+    }
+}
+
+custom-table {
+    font-family: var(--font-family-default);
+    font-size: var(--font-size-default);
+    font-weight: var(--font-weight-default);
+    color: var(--color-text-default);
+    line-height: var(--line-height-default);
+    & table {
+        border-spacing: 0;
+        border: 1px solid #e7e4e4;
+        border-radius: 6px;
+        overflow: hidden;
+        width: 100%;
+        margin: 0.75rem 0px;
+        & td,
+        & th {
+            padding: 8px 12px;
+        }
+        & thead {
+            & th {
+                text-align: left;
+                font-weight: 500;
+                background-color: var(--background-muted);
+                border-bottom: 1px solid #dddada;
+                line-height: var(--line-height-table-header);
+            }
+        }
+        & tbody {
+            & tr {
+                &:nth-child(even) {
+                    background-color: #fefcfc;
+                }
+            }
+            & tr:not(:last-of-type) {
+                & td {
+                    border-bottom: 1px solid #dddada;
+                }
+            }
+        }
+    }
+}
+
+custom-field-adresse {
+    display: block;
+    page-break-inside: avoid;
+}
+
+@font-face {
+    font-family: "Roboto Flex";
+    src: url(49c816770b639989d28b.woff2) format("woff2");
+}
+
+:root {
+    --font-family-default: "Roboto Flex", Arial, sans-serif;
+    --color-text-default: #1c1b1d;
+    --background-muted: #f7f4f4;
+    --color-divider-default: #cdcaca;
+    --font-size-default: 16px;
+    --font-size-h1: 42px;
+    --font-size-h2: 30px;
+    --font-size-h3: 23px;
+    --font-size-h4: 19px;
+    --font-weight-default: 400;
+    --line-height-default: 24px;
+    --line-height-table-header: 20px;
+}
+
+body {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+    background-color: #fff;
+    font-family: var(--font-family-default);
+    font-size: var(--font-size-default);
+    color: var(--color-text-default);
+    line-height: var(--line-height-default);
+    letter-spacing: normal;
+    & p,
+    & h1,
+    & h2,
+    & h3,
+    & h4,
+    & h5,
+    & h6 {
+        color: var(--color-text-default);
+        &[class^="fds-"] {
+            font-family: var(--font-family-default);
+        }
+    }
+}
+
+@media print {
+    html {
+        font-size: inherit !important;
+    }
+}
+
+@page {
+    size: A4 portrait;
+    margin-top: 1cm;
+    margin-left: 1.25cm;
+    margin-right: 1.25cm;
+}
+
+#pdfView {
+    & > div:first-of-type {
+        margin-bottom: -55px;
+        & h1 {
+            margin-top: -50px;
+        }
+        & img {
+            width: 85px;
+            height: auto;
+        }
+    }
+}
+

package/dist/main.js

@@ -1 +1 @@
-(()=>{"use strict";class e{constructor(e){this.adresselinje1=e?.adresselinje1,this.adresselinje2=e?.adresselinje2,this.adresselinje3=e?.adresselinje3,this.postnr=e?.postnr,this.poststed=e?.poststed}}function t(e){for(let t in e)if(!!e?.[t]?.toString().length>0)return!0;return!1}function s(e,t){for(let s in t)e.style[s]=t[s]}async function n(e){let t=e.getAttribute("texts");return t?JSON.parse(t):(t=await(s=e,n="texts",new Promise(((e,t)=>{void 0===s[n]?Object.defineProperty(s,n,{set:t=>{Object.defineProperty(s,n,{value:t}),e(t)},configurable:!0,enumerable:!0}):e(s[n])}))),t);var s,n}function i(e,t){const s=document.createElement(e);return function(e,t){for(const s in t)e.setAttribute(s,t[s])}(s,{formdata:JSON.stringify({["object"==typeof t?.data?"data":"simpleBinding"]:t?.data}),text:t?.text?.toString()||"",size:t?.size?.toString()||"",hidetitle:t?.hideTitle?.toString()||"",hideifempty:t?.hideIfEmpty?.toString()||"",emptyfieldtext:t?.emptyFieldText?.toString()||"",styleoverride:JSON.stringify(t?.styleoverride)||"",grid:JSON.stringify(t?.grid)||"",texts:JSON.stringify(t?.texts)||""}),s}function l(e){const t=document.createElement("div"),n=document.createElement("div");return n.appendChild(e),t.appendChild(n),s(t,{padding:"0.75rem 0"}),t}function r(e,t){const n=document.createElement("label");n.classList.add("fds-label","fds-label--md"),s(n,{breakAfter:"avoid"});const i=document.createElement("span");return i.innerText=`${e}${t?":":""}`,n.appendChild(i),n}function a(e,t,n){n={returnHtml:!0,inline:!1,styleoverride:{},...n};const i=document.createElement("div");return i.classList.add("field"),e?.length&&i.appendChild(r(e,n.inline)),i.appendChild(function(e){const t=document.createElement("span");return t.classList.add("fds-paragraph","fds-paragraph--md"),t.innerHTML=e,s(t,{whiteSpace:"pre-line"}),t}(t)),s(i,{...n.styleoverride,display:"flex",alignItems:"baseline",flexDirection:n.inline?"row":"column",gap:n.inline?"0.5rem":"0"}),n.returnHtml?i.outerHTML:i}function d(e,t,s=!0){const n=document.createElement(t||"ul");return n.classList.add("fds-paragraph","fds-paragraph--md","fds-list","fds-list--md"),e.forEach((e=>{const t=document.createElement("li");t.innerHTML=e,n.appendChild(t)})),s?n.outerHTML:n}function o(e,t,n){const i=document.createElement("div");return i.classList.add("field"),e?.length&&i.appendChild(r(e)),i.appendChild(d(t,n,!1)),s(i,{display:"flex",flexDirection:"column"}),i.outerHTML}function c(e){return{data:function(e){const s=t(e?.simpleBinding)?e.simpleBinding:null,n=t(e?.data)?e.data:null;return s||n}(JSON.parse(e.getAttribute("formdata"))),text:e.getAttribute("text"),inline:"true"===e.getAttribute("inline"),hideTitle:"true"===e.getAttribute("hideTitle"),hideIfEmpty:"true"===e.getAttribute("hideIfEmpty"),emptyFieldText:e.getAttribute("emptyFieldText"),styleoverride:JSON.parse(e.getAttribute("styleoverride")||"{}")}}function u(e,t,s,n){s.forEach((s=>{void 0!==e[s]&&null!==e[s]||(null!=t?.[s]?console.warn(`Missing textResourceBindings.${s} for "${n}". Using fallback text: "${t[s]}"`):console.warn(`Missing textResourceBindings.${s} for "${n}".`))}))}function m(e){return e?.parentElement?.parentElement}customElements.define("custom-field-adresse",class extends HTMLElement{connectedCallback(){const{data:s,text:n,hideTitle:i,hideIfEmpty:l,emptyFieldText:r,inline:d,styleoverride:o}=c(this),u=m(this),f=new e(s);if(l&&!t(f)&&u)u.style.display="none";else{const e=!i&&n,t=function(e){const t=function(e){return[e.adresselinje1,e.adresselinje2,e.adresselinje3].filter((e=>e?.length)).join("\n")}(e),s=function(e){return[e.postnr,e.poststed].filter((e=>e?.length)).join(" ")}(e);return t?.length?`${t}\n${s}`:s}(f),s={inline:d,styleoverride:o};this.innerHTML=a(e,t?.length?t:r,s)}}});class f{constructor(e){this.navn=e?.navn,this.organisasjonsnummer=e?.organisasjonsnummer}}customElements.define("custom-field-part-navn",class extends HTMLElement{connectedCallback(){const{data:e,text:s,hideTitle:n,hideIfEmpty:i,emptyFieldText:l,inline:r,styleoverride:d}=c(this),o=m(this),u=new f(e);if(i&&!t(u)&&o)o.style.display="none";else{const e=!n&&s,t=function(e,t){let s=e?.navn||"";return t||(s+=e?.organisasjonsnummer?.length?`\nOrganisasjonsnummer: ${e.organisasjonsnummer}`:""),s}(u,"true"===this.getAttribute("hideOrgNr")),i={inline:r,styleoverride:d};this.innerHTML=a(e,t?.length?t:l,i)}}}),customElements.define("custom-field-boolean-text",class extends HTMLElement{async connectedCallback(){const{data:e,text:t,hideTitle:s,hideIfEmpty:i,inline:l,styleoverride:r}=c(this),d=m(this),o=await async function(e,t){const s=t.getAttribute("id"),i=await n(t),l={trueText:"Ja",falseText:"Nei",defaultText:""};return u(i,l,["trueText","falseText","defaultText"],s),!0===e||"true"===e?void 0!==i?.trueText&&null!==i.trueText?i.trueText:l.trueText:!1===e||"false"===e?void 0!==i?.falseText&&null!==i.falseText?i.falseText:l.falseText:i?.defaultText?i.defaultText:l.defaultText}(e,this);if(i&&!o?.length&&d)d.style.display="none";else{const e=!s&&t,n={inline:l,styleoverride:r};this.innerHTML=a(e,o,n)}}}),customElements.define("custom-field-data",class extends HTMLElement{connectedCallback(){const{data:e,text:t,hideTitle:s,hideIfEmpty:n,emptyFieldText:i,inline:l,styleoverride:r}=c(this),d=m(this);if(n&&!e&&d)d.style.display="none";else{const n=!s&&t,d=e||i,o={inline:l,styleoverride:r};this.innerHTML=a(n,d,o)}}});class h{constructor(e){this.saksaar=e?.saksaar,this.sakssekvensnummer=e?.sakssekvensnummer}}customElements.define("custom-field-kommunens-saksnummer",class extends HTMLElement{connectedCallback(){const{data:e,text:s,hideTitle:n,hideIfEmpty:i,emptyFieldText:l,inline:r,styleoverride:d}=c(this),o=m(this),u=new h(e);if(i&&!t(u)&&o)o.style.display="none";else{const e=!n&&s,t=function(e){return[e?.saksaar.toString(),e?.sakssekvensnummer.toString()].filter((e=>e?.length)).join("/")}(u),i={inline:r,styleoverride:d};this.innerHTML=a(e,t?.length?t:l,i)}}});class p{constructor(e){this.prosjektnavn=e?.prosjektnavn,this.prosjektnr=e?.prosjektnr}}customElements.define("custom-field-prosjekt",class extends HTMLElement{connectedCallback(){const{data:e,text:s,hideTitle:n,hideIfEmpty:i,emptyFieldText:l,inline:r,styleoverride:d}=c(this),o=m(this),u=new p(e);if(i&&!t(u)&&o)o.style.display="none";else{const e=!n&&s,t=function(e){const t=e?.prosjektnr?.length&&`(${e.prosjektnr})`;return[e?.prosjektnavn,t].filter((e=>e?.length)).join(" ")}(u),i=t?.length?t:l,o={inline:r,styleoverride:d};this.innerHTML=a(e,i,o)}}});class g{constructor(e){this.telefonnummer=e?.telefonnummer,this.mobilnummer=e?.mobilnummer}}customElements.define("custom-field-telefonnummer",class extends HTMLElement{connectedCallback(){const{data:e,text:s,hideTitle:n,hideIfEmpty:i,emptyFieldText:l,inline:r,styleoverride:d}=c(this),o=m(this),u=new g(e);if(i&&!t(u)&&o)o.style.display="none";else{const e=!n&&s,t=function(e){return[e.telefonnummer,e.mobilnummer].filter((e=>e?.length)).join("\n")}(u),i=t?.length?t:l,o={inline:r,styleoverride:d};this.innerHTML=a(e,i,o)}}});class y{constructor(e){this.erUtfallBesvaresSenere=e?.erUtfallBesvaresSenere,this.erUtfallBesvart=e?.erUtfallBesvart}}customElements.define("custom-field-utfall-svar-status",class extends HTMLElement{async connectedCallback(){const{data:e,text:t,hideTitle:s,hideIfEmpty:i,inline:l,styleoverride:r}=c(this),d=m(this),o=new y(e),f=await async function(e,t){const s=t.getAttribute("id"),i=await n(t),l={erUtfallBesvaresSenere:"Besvares senere",erUtfallBesvart:"Svar innsendt tidligere",status:"Besvares nå"};return u(i,l,["erUtfallBesvaresSenere","erUtfallBesvart","status"],s),e?.erUtfallBesvaresSenere?null!=i?.erUtfallBesvaresSenere?i.erUtfallBesvaresSenere:l.erUtfallBesvaresSenere:e?.erUtfallBesvart?null!=i?.erUtfallBesvart?i.erUtfallBesvart:l.erUtfallBesvart:i?.status?i.status:l.status}(o,this);if(i&&!f?.length&&d)d.style.display="none";else{const e=!s&&t,n={inline:l,styleoverride:r};this.innerHTML=a(e,f,n)}}});class v{constructor(e){this.kodebeskrivelse=e?.kodebeskrivelse}}class x{constructor(e){this.kodeverdi=e?.kodeverdi}}class T{constructor(e){this.kodebeskrivelse=e?.kodebeskrivelse}}class E{constructor(e){this.filnavn=e?.filnavn,this.vedleggstype=e?.vedleggstype&&new T(e.vedleggstype)}}class k{constructor(e){this.vedlegg=e?.vedlegg&&e.vedlegg.map((e=>new E(e)))}}class b{constructor(e){this.beskrivelse=e?.beskrivelse,this.erUtfallBesvaresSenere=e?.erUtfallBesvaresSenere,this.erUtfallBesvart=e?.erUtfallBesvart,this.kommentar=e?.kommentar,this.tema=e?.tema&&new v(e.tema),this.tittel=e?.tittel,this.utfallType=e?.utfallType&&new x(e.utfallType),this.vedleggsliste=e?.vedleggsliste&&new k(e.vedleggsliste)}}customElements.define("custom-grouplist-utfall-svar-type",class extends HTMLElement{async connectedCallback(){const{data:e}=c(this),s=m(this),l=await n(this),r=e.reduce(((e,t)=>{const s=t?.utfallType?.kodeverdi;return e[s]||(e[s]=[]),e[s].push(new b(t)),e}),{});if(!t(e)&&s)s.style.display="none";else for(const e of Object.keys(r)){const t=await i("custom-group-utfall-svar-type",{data:r[e],text:l[`${e?.toLowerCase()}.header`],texts:l});this.appendChild(t)}}}),customElements.define("custom-group-utfall-svar-type",class extends HTMLElement{async connectedCallback(){const{data:e,text:s}=c(this),n=JSON.parse(this.getAttribute("texts"));if(t(e)){const t=l(i("custom-header-text",{text:s,size:"h2"}));this.appendChild(t);const r=l(await i("custom-grouplist-utfall-svar",{data:e,texts:n}));this.appendChild(r)}}}),customElements.define("custom-grouplist-utfall-svar",class extends HTMLElement{connectedCallback(){const{data:e,hideIfEmpty:n}=c(this),l=m(this),r=JSON.parse(this.getAttribute("texts"));if(n&&!t(e)&&l)l.style.display="none";else{for(const t of e){const n=i("custom-group-utfall-svar",{data:t,hideIfEmpty:!0,texts:r});if(this.appendChild(n),t!==e[e.length-1]){const e=document.createElement("hr");s(e,{height:"2px",border:"none",backgroundColor:"#68707C",margin:"0"}),this.appendChild(e)}}s(this,{display:"flex",flexDirection:"column",gap:"1.5rem"})}}}),customElements.define("custom-group-utfall-svar",class extends HTMLElement{async connectedCallback(){const{data:e}=c(this),n=m(this),r=JSON.parse(this.getAttribute("texts"));if(!t(e)&&n)n.style.display="none";else{const t=document.createElement("div"),n=i("custom-header-text",{text:e?.tittel,size:"h3"});t.appendChild(n),t.appendChild(function(e){return l(i("custom-field-data",{data:e?.beskrivelse,hideIfEmpty:!0}))}(e)),t.appendChild(function(e,t){return l(i("custom-field-utfall-svar-status",{data:e,texts:t,text:t?.["status.title"]}))}(e,r)),t.appendChild(function(e,t){return l(i("custom-field-data",{data:e?.tema?.kodebeskrivelse,text:t?.["tema.kodebeskrivelse.title"],hideIfEmpty:!0}))}(e,r)),t.appendChild(function(e,t){return l(i("custom-field-data",{data:e?.kommentar,text:t?.["kommentar.title"],hideIfEmpty:!1,emptyFieldText:"-"}))}(e,r)),t.appendChild(function(e,t){return l(i("custom-list-vedlegg",{data:e?.vedleggsliste?.vedlegg,text:t?.["vedleggsliste.vedlegg.title"],hideIfEmpty:!0}))}(e,r)),this.appendChild(t),s(this,{display:"flex",flexFlow:"wrap",justifyContent:"start",alignItems:"flex-start"})}}}),customElements.define("custom-header-text",class extends HTMLElement{connectedCallback(){const{text:e,styleoverride:t}=c(this),n=this.getAttribute("size");this.innerHTML=function(e,t,n){const i=document.createElement(t||"h2");return i.classList.add("fds-heading",function(e){const t=[{size:"h2",className:"fds-heading--md"},{size:"h3",className:"fds-heading--sm"},{size:"h4",className:"fds-heading--xs"}].find((t=>t.size===e));return t?.className||"fds-heading--md"}(t)),i.innerHTML=e,s(i,n),i.outerHTML}(e,n,t),s(this,{display:"block",pageBreakAfter:"avoid",pageBreakInside:"avoid"})}}),customElements.define("custom-list-data",class extends HTMLElement{connectedCallback(){const{data:e,text:s,hideTitle:n,hideIfEmpty:i,emptyFieldText:l,styleoverride:r}=c(this),u=m(this),f=this.getAttribute("itemKey"),h=f?.length?function(e,t){return e.map((e=>e?.[t]))}(e,f):e,p=!n&&s;i&&!t(h)&&u?u.style.display="none":this.innerHTML=l?.length&&!h?.length?a(p,l,!0):p?.length?o(p,h):d(h)}}),customElements.define("custom-list-vedlegg",class extends HTMLElement{connectedCallback(){const{data:e,text:s,hideTitle:n,hideIfEmpty:i,emptyFieldText:l,styleoverride:r}=c(this),u=m(this),f=(h=e,h?.length&&h.map((e=>{const t=new E(e),s=function(e){return e?.vedleggstype?.kodebeskrivelse}(t),n=function(e){return e?.filnavn}(t);return s?.length&&n?.length?`${s} (${n})`:s?.length?s:n?.length?n:null})).filter((e=>e)));var h;const p=!n&&s;i&&!t(f)&&u?u.style.display="none":this.innerHTML=l?.length&&!f?.length?a(p,l,!0):p?.length?o(p,f):d(f)}})})();
+(()=>{"use strict";function e(e){if("string"==typeof e)return e.length>0;if("number"==typeof e)return!1===isNaN(e);for(let t in e)if(!!e?.[t]?.toString().length>0)return!0;return!1}function t(e,t){for(let n in t)e.style[n]=t[n]}async function n(e){let t=e.getAttribute("texts");return t?JSON.parse(t):(t=await(n=e,s="texts",new Promise(((e,t)=>{void 0===n[s]?Object.defineProperty(n,s,{set:t=>{Object.defineProperty(n,s,{value:t}),e(t)},configurable:!0,enumerable:!0}):e(n[s])}))),t);var n,s}function s(t,n){const s=document.createElement(t),i={isChildComponent:"true"};if(e(n?.data)){const e="object"==typeof n?.data?"data":"simpleBinding",t="number"==typeof n?.data?n.data.toString():n?.data;i.formdata=JSON.stringify({[e]:t})}return(n?.text||n?.texts?.title)&&(i.text=n?.text?.toString()||n?.texts?.title?.toString()||""),e(n?.size)&&(i.size=n?.size?.toString()||""),"true"===n?.hideTitle?.toString()&&(i.hidetitle="true"),"true"===n?.hideIfEmpty?.toString()&&(i.hideifempty="true"),"true"===n?.inline?.toString()&&(i.inline="true"),e(n?.emptyFieldText)&&(i.emptyfieldtext=n?.emptyFieldText.toString()||""),e(n?.styleoverride)&&(i.styleoverride=JSON.stringify(n?.styleoverride)||""),e(n?.grid)&&(i.grid=JSON.stringify(n?.grid)||""),e(n?.texts)&&(i.texts=JSON.stringify(n?.texts)||""),e(n?.tableColumns)&&(i.tablecolumns=JSON.stringify(n?.tableColumns)||""),function(e,t){for(const n in t)e.setAttribute(n,t[n])}(s,i),s}function i(e){const n=document.createElement("div"),s=document.createElement("div");return s.appendChild(e),n.appendChild(s),t(n,{padding:"0.75rem 0"}),n}function l(t){return{data:function(t){const n=e(t?.simpleBinding)?t.simpleBinding:null,s=e(t?.data)?t.data:null;return n||s}(JSON.parse(t.getAttribute("formdata"))),text:t.getAttribute("text"),inline:"true"===t.getAttribute("inline"),hideTitle:"true"===t.getAttribute("hideTitle"),size:t.getAttribute("size"),hideIfEmpty:"true"===t.getAttribute("hideIfEmpty"),emptyFieldText:t.getAttribute("emptyFieldText"),styleoverride:JSON.parse(t.getAttribute("styleoverride")||"{}"),isChildComponent:"true"===t.getAttribute("isChildComponent")}}function r(e,t,n,s){n.forEach((n=>{void 0!==e[n]&&null!==e[n]||(null!=t?.[n]?console.warn(`Missing textResourceBindings.${n} for "${s}". Using fallback text: "${t[n]}"`):console.warn(`Missing textResourceBindings.${n} for "${s}".`))}))}function a(e){return e?.parentElement?.parentElement}function o(e,t,n=!0){const s=document.createElement(t||"ul");return e.forEach((e=>{const t=document.createElement("li");t.innerHTML=e,s.appendChild(t)})),n?s.outerHTML:s}function d(e,n){const i=document.createElement("table"),l=document.createElement("thead"),r=document.createElement("tr");if(e?.tableHeaders?.length&&e?.tableRows?.length){e.tableHeaders.forEach((e=>{r.appendChild(function(e){const n=document.createElement("th");return n.textContent=e.text,t(n,e?.props?.styleOverride),n}(e))})),l.appendChild(r),i.appendChild(l);const n=document.createElement("tbody");e.tableRows.forEach((e=>{n.appendChild(function(e){const t=document.createElement("tr");return e.forEach((e=>{t.appendChild(function(e){const t=document.createElement("td");return t.innerHTML=s(e.tagName,{data:e.data,text:e.text,hideTitle:!0,emptyFieldText:e.emptyFieldText,styleoverride:e.styleoverride}).outerHTML,t}(e))})),t}(e))})),i.appendChild(n)}else if(n){const e=document.createElement("tr"),t=document.createElement("td");t.textContent=n,e.appendChild(t),i.appendChild(e)}return i}customElements.define("custom-divider",class extends HTMLElement{connectedCallback(){const{styleoverride:e}=l(this),n=document.createElement("hr");t(n,e),this.innerHTML="",this.appendChild(n)}}),customElements.define("custom-field",class extends HTMLElement{connectedCallback(){const{data:e,text:n,hideIfEmpty:s,inline:i,styleoverride:r}=l(this),o=a(this);if(s&&!e&&o)o.style.display="none";else{const s={inline:i,styleoverride:r};this.innerHTML=function(e,n,s){s={returnHtml:!0,inline:!1,styleoverride:{},...s};const i=document.createElement("div");i.classList.add("field"),e?.length&&i.appendChild(function(e,t){const n=document.createElement("label");return n.innerText=`${e}${t?":":""}`,n}(e,s.inline)),s?.inline&&i.classList.add("inline");const l=function(e){const t=document.createElement("span");return t.innerHTML=e,t}(n);return e?.length&&l.classList.add("has-title"),i.appendChild(l),t(i,{...s.styleoverride}),s.returnHtml?i.outerHTML:i}(n,e,s)}}}),customElements.define("custom-header",class extends HTMLElement{connectedCallback(){const{text:e,styleoverride:n,size:s}=l(this);this.innerHTML=function(e,t){const n=document.createElement(t||"h2");return n.innerHTML=e,n.outerHTML}(e,s),t(this,n)}}),customElements.define("custom-list",class extends HTMLElement{connectedCallback(){const{data:e,text:n,styleoverride:s}=l(this);this.innerHTML=n?.length?function(e,t,n){const s=document.createElement("div");s.classList.add("field"),e?.length&&s.appendChild(function(e){const t=document.createElement("label");return t.innerText=e,t}(e));const i=o(t,n,!1);return e?.length&&i.classList.add("has-title"),s.appendChild(i),s.outerHTML}(n,e):o(e),t(this,s)}}),customElements.define("custom-table",class extends HTMLElement{async connectedCallback(){const{data:e,text:n,hideIfEmpty:i,emptyFieldText:r,size:o,styleoverride:c}=l(this),u=a(this);if(i&&!e&&u)u.style.display="none";else{const i=function(e,t){if(e)return s("custom-header",{text:e,size:t})}(n,o),l=d(e,r);this.innerHTML="",i&&this.appendChild(i),this.appendChild(l),t(this,c)}}});class c{constructor(e){this.adresselinje1=e?.adresselinje1,this.adresselinje2=e?.adresselinje2,this.adresselinje3=e?.adresselinje3,this.postnr=e?.postnr,this.poststed=e?.poststed}}customElements.define("custom-field-adresse",class extends HTMLElement{connectedCallback(){const{data:t,text:n,hideTitle:i,hideIfEmpty:r,emptyFieldText:o,inline:d,styleoverride:u}=l(this),m=a(this),h=new c(t);if(r&&!e(h)&&m)m.style.display="none";else{const e=!i&&n,t=function(e){const t=function(e){return[e.adresselinje1,e.adresselinje2,e.adresselinje3].filter((e=>e?.length)).join("\n")}(e),n=function(e){return[e.postnr,e.poststed].filter((e=>e?.length)).join(" ")}(e);return t?.length?`${t}\n${n}`:n}(h);this.innerHTML=s("custom-field",{data:t?.length?t:o,text:e,inline:d,styleoverride:u}).outerHTML}}});class u{constructor(e){this.navn=e?.navn,this.organisasjonsnummer=e?.organisasjonsnummer}}customElements.define("custom-field-part-navn",class extends HTMLElement{connectedCallback(){const{data:t,text:n,hideTitle:i,hideIfEmpty:r,emptyFieldText:o,inline:d,styleoverride:c}=l(this),m=a(this),h=new u(t);if(r&&!e(h)&&m)m.style.display="none";else{const e=!i&&n,t=function(e,t){let n=e?.navn||"";return t||(n+=e?.organisasjonsnummer?.length?`\nOrganisasjonsnummer: ${e.organisasjonsnummer}`:""),n}(h,"true"===this.getAttribute("hideOrgNr"));this.innerHTML=s("custom-field",{data:t?.length?t:o,text:e,inline:d,styleoverride:c}).outerHTML}}}),customElements.define("custom-field-boolean-text",class extends HTMLElement{async connectedCallback(){const{data:e,text:t,hideTitle:i,hideIfEmpty:o,inline:d,styleoverride:c}=l(this),u=a(this),m=await async function(e,t){const s=t.getAttribute("id"),i=await n(t),l={trueText:"Ja",falseText:"Nei",defaultText:""};return r(i,l,["trueText","falseText","defaultText"],s),!0===e||"true"===e?void 0!==i?.trueText&&null!==i.trueText?i.trueText:l.trueText:!1===e||"false"===e?void 0!==i?.falseText&&null!==i.falseText?i.falseText:l.falseText:i?.defaultText?i.defaultText:l.defaultText}(e,this);if(o&&!m?.length&&u)u.style.display="none";else{const e=!i&&t;this.innerHTML=s("custom-field",{data:m,text:e,inline:d,styleoverride:c}).outerHTML}}}),customElements.define("custom-field-data",class extends HTMLElement{connectedCallback(){const{data:e,text:t,hideTitle:n,hideIfEmpty:i,emptyFieldText:r,inline:o,styleoverride:d}=l(this),c=a(this);if(i&&!e&&c)c.style.display="none";else{const l=!n&&t,a=e||r;this.innerHTML=s("custom-field",{data:a,text:l,hideTitle:n,hideIfEmpty:i,emptyFieldText:r,inline:o,styleoverride:d}).outerHTML}}});class m{constructor(e){this.saksaar=e?.saksaar,this.sakssekvensnummer=e?.sakssekvensnummer}}customElements.define("custom-field-kommunens-saksnummer",class extends HTMLElement{connectedCallback(){const{data:t,text:n,hideTitle:i,hideIfEmpty:r,emptyFieldText:o,inline:d,styleoverride:c}=l(this),u=a(this),h=new m(t);if(r&&!e(h)&&u)u.style.display="none";else{const e=!i&&n,t=function(e){return[e?.saksaar.toString(),e?.sakssekvensnummer.toString()].filter((e=>e?.length)).join("/")}(h);this.innerHTML=s("custom-field",{data:t?.length?t:o,text:e,inline:d,styleoverride:c}).outerHTML}}});class h{constructor(e){this.prosjektnavn=e?.prosjektnavn,this.prosjektnr=e?.prosjektnr}}customElements.define("custom-field-prosjekt",class extends HTMLElement{connectedCallback(){const{data:t,text:n,hideTitle:i,hideIfEmpty:r,emptyFieldText:o,inline:d,styleoverride:c}=l(this),u=a(this),m=new h(t);if(r&&!e(m)&&u)u.style.display="none";else{const e=!i&&n,t=function(e){const t=e?.prosjektnr?.length&&`(${e.prosjektnr})`;return[e?.prosjektnavn,t].filter((e=>e?.length)).join(" ")}(m),l=t?.length?t:o;this.innerHTML=s("custom-field",{data:l,text:e,inline:d,styleoverride:c}).outerHTML}}});class f{constructor(e){this.telefonnummer=e?.telefonnummer,this.mobilnummer=e?.mobilnummer}}customElements.define("custom-field-telefonnummer",class extends HTMLElement{connectedCallback(){const{data:t,text:n,hideTitle:i,hideIfEmpty:r,emptyFieldText:o,inline:d,styleoverride:c}=l(this),u=a(this),m=new f(t);if(r&&!e(m)&&u)u.style.display="none";else{const e=!i&&n,t=function(e){return[e.telefonnummer,e.mobilnummer].filter((e=>e?.length)).join("\n")}(m),l=t?.length?t:o;this.innerHTML=s("custom-field",{data:l,text:e,inline:d,styleoverride:c}).outerHTML}}});class p{constructor(e){this.erUtfallBesvaresSenere=e?.erUtfallBesvaresSenere,this.erUtfallBesvart=e?.erUtfallBesvart}}customElements.define("custom-field-utfall-svar-status",class extends HTMLElement{async connectedCallback(){const{data:e,text:t,hideTitle:i,hideIfEmpty:o,inline:d,styleoverride:c}=l(this),u=a(this),m=new p(e),h=await async function(e,t){const s=t.getAttribute("id"),i=await n(t),l={erUtfallBesvaresSenere:"Besvares senere",erUtfallBesvart:"Svar innsendt tidligere",status:"Besvares nå"};return r(i,l,["erUtfallBesvaresSenere","erUtfallBesvart","status"],s),e?.erUtfallBesvaresSenere?null!=i?.erUtfallBesvaresSenere?i.erUtfallBesvaresSenere:l.erUtfallBesvaresSenere:e?.erUtfallBesvart?null!=i?.erUtfallBesvart?i.erUtfallBesvart:l.erUtfallBesvart:i?.status?i.status:l.status}(m,this);if(o&&!h?.length&&u)u.style.display="none";else{const e=!i&&t;this.innerHTML=s("custom-field",{data:h,text:e,inline:d,styleoverride:c}).outerHTML}}});class y{constructor(e){this.kodebeskrivelse=e?.kodebeskrivelse}}class g{constructor(e){this.kodeverdi=e?.kodeverdi}}class x{constructor(e){this.kodebeskrivelse=e?.kodebeskrivelse}}class v{constructor(e){this.filnavn=e?.filnavn,this.vedleggstype=e?.vedleggstype&&new x(e.vedleggstype)}}class T{constructor(e){this.vedlegg=e?.vedlegg&&e.vedlegg.map((e=>new v(e)))}}class E{constructor(e){this.beskrivelse=e?.beskrivelse,this.erUtfallBesvaresSenere=e?.erUtfallBesvaresSenere,this.erUtfallBesvart=e?.erUtfallBesvart,this.kommentar=e?.kommentar,this.tema=e?.tema&&new y(e.tema),this.tittel=e?.tittel,this.utfallType=e?.utfallType&&new g(e.utfallType),this.vedleggsliste=e?.vedleggsliste&&new T(e.vedleggsliste)}}function b(e,t){return e.map((e=>({text:t[e.titleResourceKey],props:e.props})))}function L(e,t){return!Array.isArray(t)&&(t=[t]),t.map((t=>{const n=[];return e.forEach((e=>{const s=function(e,t){if(!t)return e;const n=t?.split(/\.|\[|\]/).filter(Boolean);for(let t=0;t<n.length;t++)e=e[n[t]];return e}(t,e.dataKey);n.push({...e.props,data:s,hideTitle:!0,tagName:e.tagName})})),n}))}customElements.define("custom-grouplist-utfall-svar-type",class extends HTMLElement{async connectedCallback(){const{data:t}=l(this),i=a(this),r=await n(this),o=t.reduce(((e,t)=>{const n=t?.utfallType?.kodeverdi;return e[n]||(e[n]=[]),e[n].push(new E(t)),e}),{});if(!e(t)&&i)i.style.display="none";else for(const e of Object.keys(o)){const t=await s("custom-group-utfall-svar-type",{data:o[e],text:r[`${e?.toLowerCase()}.header`],texts:r});this.appendChild(t)}}}),customElements.define("custom-group-utfall-svar-type",class extends HTMLElement{async connectedCallback(){const{data:t,text:n}=l(this),i=JSON.parse(this.getAttribute("texts"));if(e(t)){const e=s("custom-header-text",{text:n,size:"h2"});this.appendChild(e);const l=await s("custom-grouplist-utfall-svar",{data:t,texts:i});this.appendChild(l)}}}),customElements.define("custom-grouplist-utfall-svar",class extends HTMLElement{connectedCallback(){const{data:t,hideIfEmpty:n}=l(this),i=a(this),r=JSON.parse(this.getAttribute("texts"));if(n&&!e(t)&&i)i.style.display="none";else for(const e of t){const t=s("custom-group-utfall-svar",{data:e,hideIfEmpty:!0,texts:r});this.appendChild(t);const n=s("custom-divider");this.appendChild(n)}}}),customElements.define("custom-group-utfall-svar",class extends HTMLElement{async connectedCallback(){const{data:n}=l(this),r=a(this),o=JSON.parse(this.getAttribute("texts"));if(!e(n)&&r)r.style.display="none";else{const e=document.createElement("div"),l=s("custom-header-text",{text:n?.tittel,size:"h3"});e.appendChild(l),e.appendChild(function(e){return i(s("custom-field-data",{data:e?.beskrivelse,hideIfEmpty:!0}))}(n)),e.appendChild(function(e,t){return i(s("custom-field-utfall-svar-status",{data:e,texts:t,text:t?.["status.title"]}))}(n,o)),e.appendChild(function(e,t){return i(s("custom-field-data",{data:e?.tema?.kodebeskrivelse,text:t?.["tema.kodebeskrivelse.title"],hideIfEmpty:!0}))}(n,o)),e.appendChild(function(e,t){return i(s("custom-field-data",{data:e?.kommentar,text:t?.["kommentar.title"],hideIfEmpty:!1,emptyFieldText:"-"}))}(n,o)),e.appendChild(function(e,t){return i(s("custom-list-vedlegg",{data:e?.vedleggsliste?.vedlegg,text:t?.["vedleggsliste.vedlegg.title"],hideIfEmpty:!0}))}(n,o)),this.appendChild(e),t(this,{display:"flex",flexFlow:"wrap",justifyContent:"start",alignItems:"flex-start"})}}}),customElements.define("custom-header-text",class extends HTMLElement{connectedCallback(){const{text:e,styleoverride:n,size:i,isChildComponent:r}=l(this);r||t(a(this),{padding:"0 0.75rem"}),this.innerHTML=s("custom-header",{text:e,size:i,styleoverride:n}).outerHTML}}),customElements.define("custom-list-data",class extends HTMLElement{connectedCallback(){const{data:t,text:n,hideTitle:i,hideIfEmpty:r,emptyFieldText:o,styleoverride:d}=l(this),c=a(this),u=this.getAttribute("itemKey"),m=u?.length?function(e,t){return e.map((e=>e?.[t]))}(t,u):t,h=!i&&n;r&&!e(m)&&c?c.style.display="none":this.innerHTML=o?.length&&!m?.length?s("custom-field",{data:o,text:h,styleoverride:d}).outerHTML:s("custom-list",{data:m,text:h,styleoverride:d}).outerHTML}}),customElements.define("custom-list-vedlegg",class extends HTMLElement{connectedCallback(){const{data:t,text:n,hideTitle:i,hideIfEmpty:r,emptyFieldText:o,styleoverride:d}=l(this),c=a(this),u=(m=t,m?.length&&m.map((e=>{const t=new v(e),n=function(e){return e?.vedleggstype?.kodebeskrivelse}(t),s=function(e){return e?.filnavn}(t);return n?.length&&s?.length?`${n} (${s})`:n?.length?n:s?.length?s:null})).filter((e=>e)));var m;const h=!i&&n;r&&!e(u)&&c?c.style.display="none":this.innerHTML=o?.length&&!u?.length?s("custom-field",{data:o,text:h,styleoverride:d}).outerHTML:s("custom-list",{data:u,text:h,styleoverride:d}).outerHTML}}),customElements.define("custom-table-data",class extends HTMLElement{async connectedCallback(){const{data:e,text:t,hideTitle:i,hideIfEmpty:r,emptyFieldText:o,size:d,styleoverride:c}=l(this),u=a(this);if(r&&!e&&u)u.style.display="none";else{const l=await n(this),r=JSON.parse(this.getAttribute("tableColumns")),a=!i&&t;this.innerHTML=s("custom-table",{data:{tableHeaders:b(r,l),tableRows:L(r,e)},text:a,size:d,emptyFieldText:o,styleoverride:c}).outerHTML}}})})();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arkitektum/altinn-studio-custom-components",
-    "version": "3.2.0",
+    "version": "4.0.0",
     "description": "Custom components for Altinn Studio",
     "main": "dist/main.js",
     "module": "dist/main.js",
@@ -10,7 +10,8 @@
     ],
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
-        "build": "webpack --mode production"
+        "build": "webpack --mode production",
+        "start": "webpack serve --mode development"
     },
     "repository": {
         "type": "git",
@@ -22,7 +23,12 @@
     },
     "homepage": "https://github.com/Arkitektum/altinn-studio-custom-components#readme",
     "devDependencies": {
+        "css-loader": "^7.1.2",
+        "mini-css-extract-plugin": "^2.9.2",
+        "prettier": "3.4.2",
+        "style-loader": "^4.0.0",
         "webpack": "^5.97.1",
-        "webpack-cli": "^6.0.1"
+        "webpack-cli": "^6.0.1",
+        "webpack-dev-server": "^5.2.0"
     }
 }