@arkitektum/altinn-studio-custom-components 1.5.1 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -29
- package/dist/main.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,64 +1,67 @@
|
|
|
1
1
|
# altinn-studio-custom-components
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Denne pakken inneholder [Altinn 3 custom komponenter](https://docs.altinn.studio/nb/altinn-studio/reference/ux/components/custom/). Les mer om [web components for Altinn 3](https://github.com/Altinn/altinn-studio/issues/8681).
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Her finner du gjenbrukbare komponenter som kan vise f.eks. et adresseobjekt eller et parts navn på en standard måte slik som Direktoratet for Byggkvalitet ønsker i Fellestjenester BYGG-plattformen.
|
|
6
|
+
|
|
7
|
+
## Komponenter
|
|
8
|
+
|
|
9
|
+
### Tekstfelt
|
|
10
|
+
|
|
11
|
+
- [Data](src/components/custom-field-data/) - viser et datafelt med label
|
|
12
|
+
- [Boolean text](src/components/custom-field-boolean-text/) - viser et boolsk med gitte tekster for true/false verdier
|
|
13
|
+
- [Adresse](src/components/custom-field-adresse/) - viser et komplett adresseobjekt
|
|
14
|
+
- [Part-navn](src/components/custom-field-part-navn/) - viser parts navn med evt organisasjonsnummer
|
|
15
|
+
- [Kommunens saksnummer](src/components/custom-field-kommunens-saksnummer/) - viser et kommunalt saksnummer sammensatt av saksår og sekvensnummer.
|
|
16
|
+
- [Prosjekt](src/components/custom-field-prosjekt/) - viser prosjektnummer sammensatt av nummer og navn
|
|
17
|
+
- [Telefonnummer](src/components/custom-field-telefonnummer/) - viser alle telefonnummer som er angitt på et parts-objekt
|
|
18
|
+
- [Utfallbesvarelse](src/components/custom-field-utfall-svar-status/) - viser status basert på Utfallsvar-objektet
|
|
19
|
+
|
|
20
|
+
### Lister
|
|
21
|
+
|
|
22
|
+
- [Data](src/components/custom-list-data/) - viser en liste med verdier
|
|
23
|
+
- [Vedlegg](src/components/custom-list-vedlegg/) - viser en liste med vedlegg fra datamodellen
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
### Hvordan ta i bruk altinn-studio-custom-components i en Altinn 3 App
|
|
27
|
+
|
|
28
|
+
Installer libman cli som et globalt verktøy (kun nødvendig 1 gang pr maskin)
|
|
6
29
|
|
|
7
30
|
```dotnet tool install -g Microsoft.Web.LibraryManager.Cli```
|
|
8
31
|
|
|
9
|
-
|
|
32
|
+
Initialiser __libman.json__ og bruk unpkg.com som default kilde
|
|
10
33
|
|
|
11
34
|
```bash
|
|
12
35
|
C:\dev\src\dibk\ig-v3\App> libman init
|
|
13
36
|
DefaultProvider [cdnjs]: unpkg
|
|
14
37
|
```
|
|
15
38
|
|
|
16
|
-
|
|
39
|
+
Installer pakken til __wwwroot/components__
|
|
17
40
|
|
|
18
41
|
```bash
|
|
19
|
-
C:\dev\src\dibk\ig-v3\App> libman install @arkitektum/altinn-studio-custom-components@1.1
|
|
42
|
+
C:\dev\src\dibk\ig-v3\App> libman install @arkitektum/altinn-studio-custom-components@1.5.1 -d wwwroot/components
|
|
20
43
|
|
|
21
44
|
wwwroot/components/dist/main.js written to disk
|
|
22
45
|
wwwroot/components/package.json written to disk
|
|
23
46
|
wwwroot/components/README.md written to disk
|
|
24
|
-
Installed library "@arkitektum/altinn-studio-custom-components@1.1
|
|
47
|
+
Installed library "@arkitektum/altinn-studio-custom-components@1.5.1" to "wwwroot/components"
|
|
25
48
|
```
|
|
26
49
|
|
|
27
|
-
|
|
50
|
+
Legg til libman i byggeprosessen i dotnet-prosjektet
|
|
28
51
|
|
|
29
52
|
```bash
|
|
30
53
|
C:\dev\src\dibk\ig-v3\App> dotnet add package Microsoft.Web.LibraryManager.Build
|
|
31
54
|
```
|
|
32
55
|
|
|
33
|
-
|
|
56
|
+
Kjør bygging på vanlig måte
|
|
34
57
|
|
|
35
58
|
```bash
|
|
36
59
|
C:\dev\src\dibk\ig-v3\App> dotnet build
|
|
37
60
|
```
|
|
38
61
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
Legg til script-taggen i head.
|
|
62
|
+
Legg til referanse i __views/Home/index.cshtml__. Legg til script-taggen i head.
|
|
42
63
|
|
|
43
64
|
```html
|
|
44
65
|
<!-- Custom components -->
|
|
45
66
|
<script type="module" src="/dibk/ig-v3/components/dist/main.js"></script>
|
|
46
67
|
```
|
|
47
|
-
|
|
48
|
-
## Komponenter
|
|
49
|
-
|
|
50
|
-
### Tekstfelt
|
|
51
|
-
|
|
52
|
-
- [Data](src/components/custom-field-data/)
|
|
53
|
-
- [Boolean text](src/components/custom-field-boolean-text/)
|
|
54
|
-
- [Adresse](src/components/custom-field-adresse/)
|
|
55
|
-
- [Ansvarlig søker](src/components/custom-field-ansvarlig-soeker/)
|
|
56
|
-
- [Kommunens saksnummer](src/components/custom-field-kommunens-saksnummer/)
|
|
57
|
-
- [Prosjekt](src/components/custom-field-prosjekt/)
|
|
58
|
-
- [Telefonnummer](src/components/custom-field-telefonnummer/)
|
|
59
|
-
- [Utfallbesvarelse](src/components/custom-field-utfall-svar-status/)
|
|
60
|
-
|
|
61
|
-
### Lister
|
|
62
|
-
|
|
63
|
-
- [Data](src/components/custom-list-data/)
|
|
64
|
-
- [Vedlegg](src/components/custom-list-vedlegg/)
|
package/dist/main.js
CHANGED
|
@@ -1 +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)return!!e?.[t]?.toString().length>0;return!1}function n(e,t){for(let n in t)e.style[n]=t[n]}function s(e){const t=document.createElement("label");t.classList.add("fds-label","fds-label--md");const
|
|
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)return!!e?.[t]?.toString().length>0;return!1}function n(e,t){for(let n in t)e.style[n]=t[n]}function s(e){const t=document.createElement("label");t.classList.add("fds-label","fds-label--md"),n(t,{breakAfter:"avoid"});const s=document.createElement("span");return s.innerHTML=e,t.appendChild(s),t}function l(e,t,l=!0,i){const r=document.createElement("div");return r.classList.add("field"),e?.length&&r.appendChild(s(e)),r.appendChild(function(e){const t=document.createElement("span");return t.classList.add("fds-paragraph","fds-paragraph--md"),t.innerHTML=e,n(t,{whiteSpace:"pre-line"}),t}(t)),n(r,{...i,display:"flex",flexDirection:"column"}),l?r.outerHTML:r}function i(e,t,n=!0){const s=document.createElement(t||"ul");return s.classList.add("fds-paragraph","fds-paragraph--md","fds-list","fds-list--md"),e.forEach((e=>{const t=document.createElement("li");t.innerHTML=e,s.appendChild(t)})),n?s.outerHTML:s}function r(e,t,l){const r=document.createElement("div");return r.classList.add("field"),e?.length&&r.appendChild(s(e)),r.appendChild(i(t,l,!1)),n(r,{display:"flex",flexDirection:"column"}),r.outerHTML}function a(e){return{data:function(e){const n=t(e?.simpleBinding)?e.simpleBinding:null,s=t(e?.data)?e.data:null;return n||s}(JSON.parse(e.getAttribute("formdata"))),text:e.getAttribute("text"),hideTitle:"true"===e.getAttribute("hideTitle"),hideIfEmpty:"true"===e.getAttribute("hideIfEmpty"),emptyFieldText:e.getAttribute("emptyFieldText"),styleoverride:JSON.parse(e.getAttribute("styleoverride"))}}function o(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 d(e,t){return new Promise(((n,s)=>{void 0===e[t]?Object.defineProperty(e,t,{set:s=>{Object.defineProperty(e,t,{value:s}),n(s)},configurable:!0,enumerable:!0}):n(e[t])}))}function c(e){return e?.parentElement?.parentElement}customElements.define("custom-field-adresse",class extends HTMLElement{connectedCallback(){const{data:n,text:s,hideTitle:i,hideIfEmpty:r,emptyFieldText:o,styleoverride:d}=a(this),u=c(this),m=new e(n),f=!i&&s;if(r&&!t(m)&&u)u.style.display="none";else{const e=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}(m);this.innerHTML=l(f,e?.length?e:o,!0,d)}}});class u{constructor(e){this.navn=e?.navn,this.organisasjonsnummer=e?.organisasjonsnummer}}customElements.define("custom-field-part-navn",class extends HTMLElement{connectedCallback(){const{data:e,text:n,hideTitle:s,hideIfEmpty:i,emptyFieldText:r,styleoverride:o}=a(this),d=c(this),m="true"===this.getAttribute("hideOrgNr"),f=new u(e);if(i&&!t(f)&&d)d.style.display="none";else{const e=!s&&n,t=function(e,t){let n=e?.navn||"";return t||(n+=e?.organisasjonsnummer?.length?`\nOrganisasjonsnummer: ${e.organisasjonsnummer}`:""),n}(f,m);this.innerHTML=l(e,t?.length?t:r,!0,o)}}}),customElements.define("custom-field-boolean-text",class extends HTMLElement{async connectedCallback(){const{data:e,text:t,hideTitle:n,hideIfEmpty:s,styleoverride:i}=a(this),r=c(this),u=!n&&t,m=await async function(e,t){const n=t.getAttribute("id"),s=await d(t,"texts"),l={trueText:"Ja",falseText:"Nei",defaultText:""};return o(s,l,["trueText","falseText","defaultText"],n),!0===e||"true"===e?void 0!==s?.trueText&&null!==s.trueText?s.trueText:l.trueText:!1===e||"false"===e?void 0!==s?.falseText&&null!==s.falseText?s.falseText:l.falseText:s?.defaultText?s.defaultText:l.defaultText}(e,this);s&&!m?.length&&r?r.style.display="none":this.innerHTML=l(u,m,!0,i)}}),customElements.define("custom-field-data",class extends HTMLElement{connectedCallback(){const{data:e,text:t,hideTitle:n,hideIfEmpty:s,emptyFieldText:i,styleoverride:r}=a(this),o=c(this);if(s&&!e&&o)o.style.display="none";else{const s=!n&&t,a=e||i;this.innerHTML=l(s,a,!0,r)}}});class m{constructor(e){this.saksaar=e?.saksaar,this.sakssekvensnummer=e?.sakssekvensnummer}}customElements.define("custom-field-kommunens-saksnummer",class extends HTMLElement{connectedCallback(){const{data:e,text:n,hideTitle:s,hideIfEmpty:i,emptyFieldText:r,styleoverride:o}=a(this),d=c(this),u=new m(e);if(i&&!t(u)&&d)d.style.display="none";else{const e=!s&&n,t=function(e){return[e?.saksaar.toString(),e?.sakssekvensnummer.toString()].filter((e=>e?.length)).join("/")}(u);this.innerHTML=l(e,t?.length?t:r)}}});class f{constructor(e){this.prosjektnavn=e?.prosjektnavn,this.prosjektnr=e?.prosjektnr}}customElements.define("custom-field-prosjekt",class extends HTMLElement{connectedCallback(){const{data:e,text:n,hideTitle:s,hideIfEmpty:i,emptyFieldText:r,styleoverride:o}=a(this),d=c(this),u=new f(e);if(i&&!t(u)&&d)d.style.display="none";else{const e=!s&&n,t=function(e){const t=e?.prosjektnr?.length&&`(${e.prosjektnr})`;return[e?.prosjektnavn,t].filter((e=>e?.length)).join(" ")}(u),i=t?.length?t:r;this.innerHTML=l(e,i,!0,o)}}});class h{constructor(e){this.telefonnummer=e?.telefonnummer,this.mobilnummer=e?.mobilnummer}}customElements.define("custom-field-telefonnummer",class extends HTMLElement{connectedCallback(){const{data:e,text:n,hideTitle:s,hideIfEmpty:i,emptyFieldText:r,styleoverride:o}=a(this),d=c(this),u=new h(e);if(i&&!t(u)&&d)d.style.display="none";else{const e=!s&&n,t=function(e){return[e.telefonnummer,e.mobilnummer].filter((e=>e?.length)).join("\n")}(u),i=t?.length?t:r;this.innerHTML=l(e,i,!0,o)}}});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:n,hideIfEmpty:s,styleoverride:i}=a(this),r=c(this),u=new p(e),m=!n&&t,f=await async function(e,t){const n=t.getAttribute("id"),s=await d(t,"texts"),l={erUtfallBesvaresSenere:"Besvares senere",erUtfallBesvart:"Svar innsendt tidligere",status:"Besvares nå"};return o(s,l,["erUtfallBesvaresSenere","erUtfallBesvart","status"],n),e?.erUtfallBesvaresSenere?null!=s?.erUtfallBesvaresSenere?s.erUtfallBesvaresSenere:l.erUtfallBesvaresSenere:e?.erUtfallBesvart?null!=s?.erUtfallBesvart?s.erUtfallBesvart:l.erUtfallBesvart:s?.status?s.status:l.status}(u,this);s&&!f?.length&&r?r.style.display="none":this.innerHTML=l(m,f,!0,i)}}),customElements.define("custom-list-data",class extends HTMLElement{connectedCallback(){const{data:e,text:n,hideTitle:s,hideIfEmpty:o,emptyFieldText:d,styleoverride:u}=a(this),m=c(this),f=this.getAttribute("itemKey"),h=f?.length?function(e,t){return e.map((e=>e?.[t]))}(e,f):e,p=!s&&n;o&&!t(h)&&m?m.style.display="none":this.innerHTML=d?.length&&!h?.length?l(p,d,!0,u):p?.length?r(p,h):i(h)}});class g{constructor(e){this.kodebeskrivelse=e?.kodebeskrivelse}}class y{constructor(e){this.filnavn=e?.filnavn,this.vedleggstype=e?.vedleggstype&&new g(e.vedleggstype)}}customElements.define("custom-list-vedlegg",class extends HTMLElement{connectedCallback(){const{data:e,text:n,hideTitle:s,hideIfEmpty:o,emptyFieldText:d,styleoverride:u}=a(this),m=c(this),f=(h=e,h?.length&&h.map((e=>{const t=new y(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 h;const p=!s&&n;o&&!t(f)&&m?m.style.display="none":this.innerHTML=d?.length&&!f?.length?l(p,d,!0,u):p?.length?r(p,f):i(f)}})})();
|