@oslokommune/punkt-elements/dist/modal-C_LxgxzC.cjs

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),n=require(`./element-with-slot-CWoTGA1B.cjs`);require(`./icon-Dr8sfT2X.cjs`);const r=require(`./ref-BaJ0mBT_.cjs`);var i={name:`pkt-modal`,react:`PktModal`,"css-class":`pkt-modal`,isElement:!0,isPureReact:!0,events:{"background-click":{description:`Event som trigges når bakgrunnen trykkes på`},close:{description:`Event som trigges når meldingsboksen lukkes`}},props:{open:{name:`Åpen`,description:`Deklarativ styring av modalens åpen/lukket-tilstand. Kan brukes i stedet for showModal()/close()-metodene.`,type:`boolean`,category:`tech`,default:!1},headingText:{name:`Heading text`,description:`Heading tekst på modalen`,type:`string`,category:`contents`},hideCloseButton:{name:`Gjem 'Lukk'-knapp`,description:`Gjemmer lukkeknappen. Dersom denne er satt til true, vil ikke lukkeknappen vises, og dermed er det viktig at man tilbyr en annen måte som f.eks. en knapp for å lukke modalen på.`,type:`boolean`,category:`ui`,default:!1},closeOnBackdropClick:{name:`Lukk modalen når bakgrunnen trykkes på`,description:`Lukk modalen når bakgrunnen trykkes på`,type:`boolean`,category:`tech`,default:!1},closeButtonSkin:{name:`Stil på lukkeknappen`,description:`Stil på lukkeknappen`,type:[`blue`,`yellow-filled`],category:`ui`,default:`blue`},size:{name:`Størrelse`,description:`Størrelsen på modalen`,type:[`small`,`medium`,`large`,`fit-content`],category:`ui`,default:`medium`},variant:{name:`Variant`,description:`Standard dialog eller skuff`,type:[`dialog`,`drawer`],category:`ui`,default:`dialog`},drawerPosition:{name:`Skuffposisjon`,description:`Posisjonen til skuffen`,type:[`left`,`right`],category:`ui`,default:`right`},transparentBackdrop:{name:`Gjennomsiktig bakgrunn`,description:`Bakgrunnen er gjennomsiktig`,type:`boolean`,category:`ui`,default:!1},removePadding:{name:`Fjern padding`,description:`Fjerner paddingen rundt innholdet i modalen`,type:`boolean`,category:`ui`,default:!1}},slots:{default:{description:`Innholdet i meldingen. Her tilbyr vi støtteklasser for å style 1-3 knapper i modalen.`}}},a=class extends n.t{constructor(){super(),this.open=!1,this.headingText=``,this.removePadding=!1,this.hideCloseButton=i.props.hideCloseButton.default,this.closeOnBackdropClick=i.props.closeOnBackdropClick.default,this.closeButtonSkin=`blue`,this.size=i.props.size.default,this.variant=`dialog`,this.drawerPosition=`right`,this.transparentBackdrop=!1,this.dialogRef=r.t(),this._isOpen=!1,this.close=(e,t=!1)=>{if(!this._isOpen)return;this._isOpen=!1,this.open=!1,document.body.classList.remove(`pkt-modal--open`);let n=document.activeElement;n&&!this.isElementInViewport(n)&&n.scrollIntoView({behavior:`smooth`,block:`nearest`}),this.dispatchEvent(new CustomEvent(`close`,{detail:{origin:e},bubbles:!0,composed:!0})),t||this.dialogRef.value?.close(),this.requestUpdate()},this.showModal=(e=null)=>{this._isOpen=!0,this.open=!0,this.dialogRef.value?.showModal(),document.body.classList.add(`pkt-modal--open`),this.dispatchEvent(new CustomEvent(`showModal`,{detail:{origin:e},bubbles:!0,composed:!0})),this.requestUpdate()},this._isOpen=!1}async connectedCallback(){super.connectedCallback(),document.addEventListener(`keydown`,this.handleKeyDown.bind(this)),document.addEventListener(`click`,this.handleBackdropClick.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`keydown`,this.handleKeyDown),document.removeEventListener(`click`,this.handleBackdropClick)}updated(e){super.updated(e),e.has(`open`)&&(this.open&&!this._isOpen?this.showModal():!this.open&&this._isOpen&&this.close(new Event(`close`),!1))}async firstUpdated(e){super.firstUpdated(e),this.dialogRef.value&&!window.HTMLDialogElement&&!this.dialogRef.value.showModal&&(`document`in window&&`createElement`in document&&(await Promise.resolve().then(()=>require(`./dialog-polyfill.esm-BnAQvMQO.cjs`)).then(e=>e.default)).registerDialog(this.dialogRef.value),this.dialogRef.value.addEventListener(`close`,()=>{this.close(new Event(`close`),!0)}))}handleKeyDown(e){e.key===`Escape`&&this.close(e)}handleBackdropClick(e){this.closeOnBackdropClick&&e.target===this.dialogRef?.value&&this.close(e)}isElementInViewport(e){let t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}render(){let i={"pkt-modal":!0,"pkt-modal--removePadding":this.removePadding??!1,"pkt-modal--noHeadingText":this.headingText===``||this.headingText===void 0,"pkt-modal--noShadow":this.closeButtonSkin===`yellow-filled`,"pkt-modal--transparentBackdrop":this.transparentBackdrop??!1,[`pkt-modal--${this.size}`]:this.size!==void 0,[`pkt-modal__${this.variant}`]:this.variant!==void 0,[`pkt-modal__drawer--${this.drawerPosition}`]:this.variant===`drawer`},a={"pkt-modal__headingText":!0,"pkt-txt-24":!0},o={"pkt-modal__content":!0,"pkt-txt-18-light":!0},s=this.closeButtonSkin===`blue`,c={"pkt-modal__closeButton":!0,[`pkt-modal__closeButton--${this.closeButtonSkin}`]:!0};return e.d`
      <dialog
        class=${t.t(i)}
        ${r.n(this.dialogRef)}
        aria-labelledby=${this.headingText?`pkt-modal__headingText`:e.l}
        aria-describedby="pkt-modal__content"
        @close=${e=>this.close(e,!0)}
      >
        <div class="pkt-modal__wrapper">
          ${this.headingText||!this.hideCloseButton?e.d`<div class="pkt-modal__header">
                <div class="pkt-modal__header-background"></div>
                ${this.headingText?e.d`<h1 id="pkt-modal__headingText" class=${t.t(a)}>
                      ${this.headingText}
                    </h1>`:e.d`<div class="pkt-modal__headingText"></div>`}
                ${this.hideCloseButton?e.d`<div class="pkt-modal__noCloseButton"></div>`:e.d`<div class="${t.t(c)}">
                      <pkt-button
                        @click=${e=>this.close(e)}
                        aria-label="close"
                        iconname="close"
                        variant="icon-only"
                        size="medium"
                        skin=${s?`tertiary`:`primary`}
                      >
                        Lukk
                      </pkt-button>
                    </div>`}
              </div>`:e.l}
          <div class="pkt-modal__container">
            <div id="pkt-modal__content" class=${t.t(o)}>
              ${n.n(this)}
            </div>
          </div>
        </div>
      </dialog>
    `}};e.r([e.s({type:Boolean,reflect:!0})],a.prototype,`open`,void 0),e.r([e.s({type:String})],a.prototype,`headingText`,void 0),e.r([e.s({type:Boolean})],a.prototype,`removePadding`,void 0),e.r([e.s({type:Boolean})],a.prototype,`hideCloseButton`,void 0),e.r([e.s({type:Boolean})],a.prototype,`closeOnBackdropClick`,void 0),e.r([e.s({type:String})],a.prototype,`closeButtonSkin`,void 0),e.r([e.s({type:String})],a.prototype,`size`,void 0),e.r([e.s({type:String})],a.prototype,`variant`,void 0),e.r([e.s({type:String})],a.prototype,`drawerPosition`,void 0),e.r([e.s({type:Boolean})],a.prototype,`transparentBackdrop`,void 0),e.r([e.o()],a.prototype,`_isOpen`,void 0);try{e.c(`pkt-modal`)(a)}catch{console.warn(`Forsøker å definere <pkt-modal>, men den er allerede definert`)}var o=a;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});