https://dialog.vik.kommune.no/user-profile-settings.component-f01f59a0.js

1import{r as e,x as i,E as a,i as s,_ as t,t as r}from"./custom-element-f942355b.js";import{n}from"./property-98bc03ee.js";import{d,U as l,b as o,r as p}from"./http.service-da101c73.js";import{s as c}from"./shared-styles-32c8a7b9.js";import{s as h,a as g}from"./settings-locale-7738b1d9.js";import"./localized-decorator-954945dd.js";import"./main-5f540a2f.js";class m{static{this.getClaims=async e=>{const i=sessionStorage.getItem("accessToken_dialogue-front");if(!i)throw new Error("No access token available for user profile settings");return d.getWithBearerToken(`idp-claims/${encodeURIComponent(e)}`,i)}}static{this.saveMapping=async e=>{const i=sessionStorage.getItem("accessToken_dialogue-front");if(!i)throw new Error("No access token available for user profile settings");await d.postWithBearerToken("idp-claims/mappings",e,i)}}}const f=[{alias:"UserID",label:"Bruker-ID",fullWidth:!0},{alias:"FirstName",label:"Fornavn",fullWidth:!1},{alias:"LastName",label:"Etternavn",fullWidth:!1},{alias:"Address",label:"Adresse",fullWidth:!0},{alias:"PostalCode",label:"Postnummer",fullWidth:!1},{alias:"Telephone",label:"Telefon",fullWidth:!1},{alias:"Email",label:"E-postadresse",fullWidth:!0}];let u=class extends e{constructor(){super(...arguments),this.providerName="",this.baseUrl="",this.locale="nb-NO",this.claims=[],this.mappings={},this.isLoading=!1,this.draggedClaim=null,this.dragReorderSource=null,this.dragOverAlias=null,this.dragOverIndex=null,this.hasSetBaseUrl=!1,this.isEditMode=!1,this.pendingMappings={},this.isSaving=!1,this._hostDragOver=e=>{e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="copy")}}ensureBaseUrlIsSet(){this.baseUrl&&""!==this.baseUrl.trim()?(l.setBaseUrl(this.baseUrl),this.hasSetBaseUrl=!0):console.error('Base URL must be set to load settings component. Please add the attribute "base-url" with a valid URL.')}async updated(e){e.has("locale")&&(h(this.locale),this.requestUpdate()),e.has("hasSetBaseUrl")&&this.hasSetBaseUrl&&await this.loadClaims(),e.has("baseUrl")&&this.ensureBaseUrlIsSet(),e.has("providerName")&&this.hasSetBaseUrl&&this.providerName&&await this.loadClaims()}async loadClaims(){this.isLoading=!0;try{const e=await m.getClaims(this.providerName);this.claims=e.claims.filter(((i,a)=>e.claims.findIndex((e=>e.name===i.name))===a));const i={},a=e.claims.filter((e=>e.alias)).sort(((e,i)=>(e.order??1)-(i.order??1)));for(const e of a)i[e.alias]||(i[e.alias]=[]),i[e.alias].push(e.name);this.mappings=i}catch(e){console.error("Failed to load claims:",e)}finally{this.isLoading=!1}}_buildGhostImage(e,i,a){const s=document.createElement("div");s.textContent=e,s.setAttribute("aria-hidden","true"),s.style.cssText=["position:fixed","top:-200px","left:-200px","padding:0.5rem 1rem","background:#1f3f65","color:#ffffff","border-radius:6px","font-family:monospace","font-size:0.9rem","font-weight:600","box-shadow:0 4px 16px rgba(0,0,0,0.45)","white-space:nowrap","pointer-events:none","z-index:99999"].join(";"),a.dataTransfer&&(a.dataTransfer.effectAllowed=i),this.addEventListener("dragover",this._hostDragOver),document.body.appendChild(s),a.dataTransfer?.setDragImage(s,s.offsetWidth/2,20),setTimeout((()=>s.remove()),0)}handleDragStart(e,i){this.draggedClaim=i,this.dragReorderSource=null,this._buildGhostImage(i,"copy",e)}handleFieldChipDragStart(e,i,a){const s=this.isEditMode?this.pendingMappings:this.mappings,t=s[i]?.[a]??"";this.dragReorderSource={alias:i,index:a},this.draggedClaim=null,this._buildGhostImage(t,"move",e)}handleDragEnd(){this.removeEventListener("dragover",this._hostDragOver),this.draggedClaim=null,this.dragReorderSource=null,this.dragOverAlias=null,this.dragOverIndex=null}handleDropZoneDragOver(e,i){e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect=this.draggedClaim?"copy":"move"),this.dragOverAlias=i;const a=this.isEditMode?this.pendingMappings:this.mappings;this.dragOverIndex=(a[i]??[]).length}handleChipDragOver(e,i,a){e.preventDefault(),e.stopPropagation(),e.dataTransfer&&(e.dataTransfer.dropEffect=this.draggedClaim?"copy":"move");const s=e.currentTarget.getBoundingClientRect(),t=e.clientX<s.left+s.width/2?a:a+1;this.dragOverAlias=i,this.dragOverIndex=t}handleDragLeave(e){const i=e.currentTarget;try{i.contains(e.relatedTarget)||(this.dragOverAlias=null,this.dragOverIndex=null)}catch{this.dragOverAlias=null,this.dragOverIndex=null}}handleDrop(e,i){e.preventDefault();const a=this.dragOverIndex;if(this.dragOverAlias=null,this.dragOverIndex=null,this.isEditMode){if(this.draggedClaim){const e=this.draggedClaim;return this.draggedClaim=null,void this._insertClaimFromPanel(i,e,a)}this.dragReorderSource&&this._applyReorderDrop(i,a)}}handleChipDrop(e,i,a){if(e.preventDefault(),e.stopPropagation(),this.dragOverAlias=null,this.dragOverIndex=null,!this.isEditMode)return;const s=e.currentTarget.getBoundingClientRect(),t=e.clientX<s.left+s.width/2?a:a+1;if(this.draggedClaim){const e=this.draggedClaim;return this.draggedClaim=null,void this._insertClaimFromPanel(i,e,t)}this.dragReorderSource&&this._applyReorderDrop(i,t)}_insertClaimFromPanel(e,i,a){if((this.pendingMappings[e]??[]).includes(i))return;const s={...this.pendingMappings},t=[...s[e]??[]];null!==a&&a<=t.length?t.splice(a,0,i):t.push(i),s[e]=t,this.pendingMappings=s}_applyReorderDrop(e,i){const a=this.dragReorderSource;if(!a)return;this.dragReorderSource=null;const s={...this.pendingMappings},t=[...s[a.alias]??[]],r=t[a.index];if(r){if(a.alias===e){const n=[...t];n.splice(a.index,1);const d=null!==i?Math.max(0,Math.min(i>a.index?i-1:i,n.length)):n.length;n.splice(d,0,r),s[e]=n}else{t.splice(a.index,1),0===t.length?delete s[a.alias]:s[a.alias]=t;const n=[...s[e]??[]];n.includes(r)||(null!==i&&i<=n.length?n.splice(i,0,r):n.push(r),s[e]=n)}this.pendingMappings=s}}handleDeleteMapping(e,i){if(!this.isEditMode)return;const a={...this.pendingMappings},s=[...a[e]??[]];s.splice(i,1),0===s.length?delete a[e]:a[e]=s,this.pendingMappings=a}enterEditMode(){const e={};for(const[i,a]of Object.entries(this.mappings))e[i]=[...a];this.pendingMappings=e,this.isEditMode=!0}cancelEdit(){this.isEditMode=!1,this.pendingMappings={}}async handleSave(){this.isSaving=!0;try{await m.saveMapping(this.buildDto());const e={};

1for(const[i,a]of Object.entries(this.pendingMappings))e[i]=[...a];this.mappings=e,this.isEditMode=!1,this.pendingMappings={}}catch(e){console.error("Failed to save mapping:",e);const i=new o;i.text=g("Kunne ikke lagre tilordningene. Prøv igjen."),i.isError=!0,i.duration=5e3,document.body.appendChild(i)}finally{this.isSaving=!1}}buildDto(){const e=this.isEditMode?this.pendingMappings:this.mappings,i=[];for(const[a,s]of Object.entries(e))s.forEach(((e,s)=>{i.push({name:e,alias:a,order:s+1})}));const a=new Set(i.map((e=>e.name))),s=this.claims.filter((e=>!a.has(e.name))).map((e=>({name:e.name,alias:"",order:1})));return{providerName:this.providerName,authority:"",claims:[...i,...s]}}renderClaimChip(e){const s=this.isEditMode?this.pendingMappings:this.mappings,t=Object.entries(s).filter((([,i])=>i.includes(e.name))).map((([e])=>e)),r=t.length>0,n=this.draggedClaim===e.name;return i`<div class="claim-chip ${r?"claim-chip--mapped":""} ${n?"claim-chip--dragging":""} ${this.isEditMode?"":"claim-chip--readonly"}" draggable="${this.isEditMode}" @dragstart="${this.isEditMode?i=>this.handleDragStart(i,e.name):null}" @dragend="${this.isEditMode?()=>this.handleDragEnd():null}" title="${r?`${g("Tilordnet")}: ${t.join(", ")}`:""}"><span class="claim-chip__icon">⠿</span> <span class="claim-chip__name">${e.name}</span> ${r?i`<span class="claim-chip__mapped-indicator" title="${g("Tilordnet")}">${t.length>1?t.length:"✓"}</span>`:a}</div>`}renderPersonField(e){const s=(this.isEditMode?this.pendingMappings:this.mappings)[e.alias]??[],t=this.dragOverAlias===e.alias,r=this.isEditMode&&JSON.stringify(this.pendingMappings[e.alias]??[])!==JSON.stringify(this.mappings[e.alias]??[]);return i`<div class="person-field ${e.fullWidth?"person-field--full":""} ${t?"person-field--drop-target":""} ${r?"person-field--pending":""}"><div class="person-field__header"><label class="person-field__label">${g(e.label)}</label> ${r?i`<span class="pending-badge">${g("Ikke lagret")}</span>`:a}</div><div class="person-field__drop-zone" @dragover="${this.isEditMode?i=>this.handleDropZoneDragOver(i,e.alias):null}" @dragleave="${this.isEditMode?e=>this.handleDragLeave(e):null}" @drop="${this.isEditMode?i=>this.handleDrop(i,e.alias):null}">${s.length>0?i`<div class="field-chips-list">${s.map(((s,t)=>{const r=this.dragReorderSource?.alias===e.alias&&this.dragReorderSource?.index===t,n=this.dragOverAlias===e.alias&&this.dragOverIndex===t;return i`<div class="field-chip ${r?"field-chip--dragging":""} ${n?"field-chip--insert-before":""}" draggable="${this.isEditMode}" @dragstart="${this.isEditMode?i=>this.handleFieldChipDragStart(i,e.alias,t):null}" @dragend="${this.isEditMode?()=>this.handleDragEnd():null}" @dragover="${this.isEditMode?i=>this.handleChipDragOver(i,e.alias,t):null}" @drop="${this.isEditMode?i=>this.handleChipDrop(i,e.alias,t):null}">${this.isEditMode?i`<span class="field-chip__drag-handle" title="${g("Dra for å sortere")}">⠿</span>`:a} <span class="field-chip__name">${s}</span> ${this.isEditMode?i`<button class="field-chip__delete" type="button" title="${g("Fjern tilordning")}" @click="${()=>this.handleDeleteMapping(e.alias,t)}">✕</button>`:a}</div>`}))} ${this.isEditMode?i`<div class="field-chips-append-zone ${this.dragOverAlias===e.alias&&this.dragOverIndex===s.length?"field-chips-append-zone--active":""}" @dragover="${i=>{i.preventDefault(),i.stopPropagation(),i.dataTransfer&&(i.dataTransfer.dropEffect=this.draggedClaim?"copy":"move"),this.dragOverAlias=e.alias,this.dragOverIndex=s.length}}" @drop="${i=>{if(i.preventDefault(),i.stopPropagation(),this.dragOverAlias=null,this.dragOverIndex=null,this.draggedClaim){const i=this.draggedClaim;this.draggedClaim=null,this._insertClaimFromPanel(e.alias,i,null)}else this.dragReorderSource&&this._applyReorderDrop(e.alias,null)}}"></div>`:a}</div>`:i`<div class="person-field__placeholder">${g("Dra et claim hit...")}</div>`}</div></div>`}render(){if(this.isLoading)return i`<div class="loading">${g("Laster claims...")}</div>`;const e=[];let s=0;for(;s<f.length;){const i=f[s];if(i.fullWidth)e.push([i]),s++;else{const a=f[s+1];a&&!a.fullWidth?(e.push([i,a]),s+=2):(e.push([i]),s++)}}const t=f.filter((e=>JSON.stringify(this.pendingMappings[e.alias]??[])!==JSON.stringify(this.mappings[e.alias]??[]))).length;return i`<div class="container ${this.draggedClaim||this.dragReorderSource?"container--dragging":""} ${this.isEditMode?"container--edit":""}"><div class="claims-panel"><h3 class="panel-title">${g("Claims")}</h3><p class="panel-subtitle">${g("Dra et claim til et felt i personmodulen")}</p><div class="claims-list">${0===this.claims.length?i`<p class="empty-message">${g("Ingen claims funnet for denne tilbyderen.")}</p>`:this.claims.map((e=>this.renderClaimChip(e)))}</div></div><div class="person-panel"><h3 class="panel-title">${g("Personmodul")}</h3><p class="panel-subtitle">${g("Slipp et claim på ønsket felt")}</p><div class="person-module">${e.map((e=>i`<div class="person-row">${e.map((e=>this.renderPersonField(e)))}</div>`))}</div><div class="action-bar">${this.isEditMode?i`${t>0?i`<span class="pending-count">${t} ${g("Ulagrede endringer")}</span>`:a} <button class="btn btn--secondary" @click="${()=>this.cancelEdit()}" ?disabled="${this.isSaving}">${g("Avbryt")}</button> <button class="btn btn--primary" @click="${()=>this.handleSave()}" ?disabled="${this.isSaving}">${this.isSaving?g("Lagrer..."):g("Lagre")}</button>`:i`<button class="btn btn--primary" @click="${()=>this.enterEditMode()}">${g("Rediger")}</button>`}</div></div></div>`}static{this.styles=[...c,s`:host{display:block;font-family:sans-serif;

1color:#1a1a1a}.loading{padding:2rem;color:#555}.container{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:1.5rem;max-width:1100px}.panel-title{font-size:1rem;font-weight:600;margin:0 0 .25rem 0}.panel-subtitle{font-size:.8rem;color:#666;margin:0 0 1rem 0}.claims-list{display:flex;flex-direction:column;gap:.5rem}.claim-chip{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#f0f4f8;border:1.5px solid #d0d9e3;border-radius:6px;cursor:grab;user-select:none;transition:background .15s,border-color .15s,opacity .15s;font-size:.875rem}.claim-chip:hover{background:#e2eaf2;border-color:#a0b4c8}.claim-chip--mapped{border-color:#3d8b3d;background:#f0faf0}.claim-chip--dragging{opacity:.45;cursor:grabbing}.claim-chip__icon{color:#888;font-size:1rem;line-height:1}.claim-chip__name{flex:1;font-family:monospace}.claim-chip__mapped-indicator{color:#3d8b3d;font-weight:700;font-size:.75rem}.empty-message{color:#888;font-size:.875rem;font-style:italic}.person-module{display:flex;flex-direction:column;gap:1rem}.person-row{display:flex;gap:1rem}.person-field{flex:1;display:flex;flex-direction:column;gap:.25rem}.person-field--full{flex-basis:100%}.person-field__label{font-size:.875rem;font-weight:500;color:#333}.person-field__drop-zone{position:relative;box-sizing:border-box;border-radius:6px;min-height:2.6rem;padding:.4rem;border:2px dashed #596e82;background:#f4f7fa;transition:border .12s,background .12s}.person-field--drop-target .person-field__drop-zone{border-style:solid;border-color:#0a2d55;background:#ddeaf7}.person-field__placeholder{width:100%;box-sizing:border-box;min-height:2.4rem;padding:.4rem .5rem;font-size:.875rem;color:#5c5c5c;font-style:italic;display:flex;align-items:center}.field-chip{display:flex;align-items:center;gap:.4rem;padding:.4rem .6rem;background:#e0edff;border:1.5px solid #7aaae8;border-radius:5px;font-size:.875rem;font-family:monospace;cursor:default}.field-chip[draggable=true]{cursor:grab}.field-chip--dragging{opacity:.45}.field-chip__drag-handle{color:#888;font-size:1rem;line-height:1;cursor:grab;flex-shrink:0}.field-chip__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1a3a6b}.field-chip__delete{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;padding:0;border:none;background:0 0;cursor:pointer;color:#5577a0;font-size:.75rem;line-height:1;border-radius:3px;transition:background .1s,color .1s}.field-chip__delete:hover{background:#c8d9f0;color:#1a3a6b}.field-chips-list{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.35rem}.field-chip--insert-before{border-left:3px solid #1f3f65;padding-left:calc(.6rem - 1px)}.field-chips-append-zone{flex:1;min-width:2rem;min-height:2rem;align-self:stretch;border-radius:4px;transition:background .1s}.field-chips-append-zone--active{background:#ddeaf7;outline:2px dashed #1f3f65;outline-offset:-2px}.action-bar{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;margin-top:2rem}.btn{padding:.45rem 1.1rem;border-radius:5px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;transition:background .15s,color .15s,opacity .15s}.btn:disabled{opacity:.55;cursor:not-allowed}.btn--primary{background:#1f3f65;color:#fff}.btn--primary:hover:not(:disabled){background:#0a2d55}.btn--secondary{background:#e8eef5;color:#1f3f65;border:1px solid #c0cfe0}.btn--secondary:hover:not(:disabled){background:#d0dcea}.pending-count{font-size:.8rem;color:#8a5800;background:#fff3cd;border:1px solid #e6c200;border-radius:4px;padding:.2rem .6rem}.claim-chip--readonly{cursor:default;pointer-events:none}.person-field--pending{border-left:3px solid #e67e00;padding-left:.5rem;margin-left:-.5rem}.person-field__header{display:flex;align-items:center;gap:.5rem}.pending-badge{font-size:.7rem;color:#7a4400;background:#fff3cd;border:1px solid #e6c200;border-radius:3px;padding:.1rem .4rem;white-space:nowrap}`]}};t([n({type:String,attribute:"provider-name"})],u.prototype,"providerName",void 0),t([n({type:String,attribute:"base-url"})],u.prototype,"baseUrl",void 0),t([n({type:String})],u.prototype,"locale",void 0),t([p()],u.prototype,"claims",void 0),t([p()],u.prototype,"mappings",void 0),t([p()],u.prototype,"isLoading",void 0),t([p()],u.prototype,"draggedClaim",void 0),t([p()],u.prototype,"dragReorderSource",void 0),t([p()],u.prototype,"dragOverAlias",void 0),t([p()],u.prototype,"dragOverIndex",void 0),t([p()],u.prototype,"hasSetBaseUrl",void 0),t([p()],u.prototype,"isEditMode",void 0),t([p()],u.prototype,"pendingMappings",void 0),t([p()],u.prototype,"isSaving",void 0),u=t([r("ia-user-profile-settings")],u);export{u as UserProfileSettings};