@demos-europe/demosplan-ui 0.4.21 → 0.4.22

package/storybook-static/assets/DpInput-HcmwQIdx.js

@@ -1,33 +0,0 @@
-import{j as e,M as d,C as i}from"./blocks-kyJuz3C5.js";import{useMDXComponents as o}from"./index-BbC7EF1e.js";import{D as r,a as l,L as h,I as a,W as c,b as p,c as u}from"./DpInput.stories-bIIwZ06I.js";import"./iframe-KFxwsBtW.js";import"./_commonjsHelpers-CE1G-McA.js";import"./DpInput-cN-WEvOL.js";import"./dayjs.min-C3DHb-Vr.js";import"./lengthHint-zGawKYxB.js";import"./translations-DDOZrg-p.js";import"./prefixClass-BBJiSKc2.js";import"./DpLabel-DFauD5I2.js";import"./DpContextualHelp-DnsCCoZB.js";import"./DpIcon-dOAQoUKG.js";import"./CleanHtml-CeG3Pc5D.js";import"./Tooltip-flnpMaRO.js";function s(t){const n={code:"code",h1:"h1",h2:"h2",li:"li",p:"p",strong:"strong",ul:"ul",...o(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(d,{of:r}),`
-`,e.jsx(n.h1,{id:"input",children:"Input"}),`
-`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"DpInput"})," component is used for rendering the following form input fields via its ",e.jsx(n.code,{children:"type"}),`prop:
-text, email, number, password, and tel.`]}),`
-`,e.jsx(n.h2,{id:"basic-text-input-field",children:"Basic text input field"}),`
-`,e.jsx(i,{of:l}),`
-`,e.jsx(n.h2,{id:"input-with-label-hint-and-tooltip",children:"Input with label, hint and tooltip"}),`
-`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"DpInput"})," uses ",e.jsx(n.code,{children:"DpLabel"})," to render a label for the input field."]}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:["The ",e.jsx(n.code,{children:"label"})," property is used to set the label text."]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"label.hint"})," adds the provided string between label and input field."]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"label.tooltip"}),` adds a contextual help icon that reveals additional information on the input field
-when the user hovers over it with their mouse. It should be used sparingly and only to reveal non-critical information,
-whereas critical information should be presented immediately.`]}),`
-`]}),`
-`,e.jsx(i,{of:h}),`
-`,e.jsx(n.h2,{id:"input-states-required-disabled-and-readonly",children:"Input states: Required, Disabled and Readonly"}),`
-`,e.jsx(n.p,{children:"This example demonstrates different input states:"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Required"}),": An asterisk is added to the label"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Disabled"}),": The input is grayed out and cannot be edited. It will not be submitted with the form."]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Readonly"}),": The input is grayed out and cannot be edited. It will be submitted with the form."]}),`
-`]}),`
-`,e.jsx(i,{of:a}),`
-`,e.jsx(n.h2,{id:"input-with-placeholder",children:"Input with placeholder"}),`
-`,e.jsx(n.p,{children:"A placeholder provides a hint to the user about what can be entered in the field."}),`
-`,e.jsx(i,{of:c}),`
-`,e.jsx(n.h2,{id:"input-with-length-constraints",children:"Input with length constraints"}),`
-`,e.jsxs(n.p,{children:["When ",e.jsx(n.code,{children:"minlength"})," or ",e.jsx(n.code,{children:"maxlength"})," are specified, automatic hints are displayed showing the current character count."]}),`
-`,e.jsx(i,{of:p}),`
-`,e.jsx(n.h2,{id:"input-with-icon",children:"Input with icon"}),`
-`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"hasIcon"})," prop adds space for an icon element to be positioned inside the input."]}),`
-`,e.jsx(i,{of:u})]})}function R(t={}){const{wrapper:n}={...o(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(s,{...t})}):s(t)}export{R as default};

package/storybook-static/assets/DpInput-cN-WEvOL.js

@@ -1,16 +0,0 @@
-import{y as g,z as r,c as v,e as b,f as q,a as V,m as x,G as d,s as w,n as s,o as f}from"./iframe-KFxwsBtW.js";import"./dayjs.min-C3DHb-Vr.js";import{m as o,a as m,e as D}from"./lengthHint-zGawKYxB.js";import{p as S}from"./prefixClass-BBJiSKc2.js";import z from"./DpLabel-DFauD5I2.js";const E=["id","name","data-counter","data-dp-validate-error","data-dp-validate-error-fieldname","data-dp-validate-if","data-dp-validate-should-equal","data-cy","aria-labelledby","maxlength","type","pattern","placeholder","disabled","readonly","required","autocomplete","size","value"],I=g({__name:"DpInput",props:{ariaLabelledby:{type:String,required:!1,default:null},autocomplete:{type:String,required:!1,default:""},dataCounter:{type:String,required:!1,default:""},dataCy:{type:String,required:!1,default:""},dataDpValidateError:{type:String,required:!1,default:""},dataDpValidateErrorFieldname:{type:String,required:!1,default:""},dataDpValidateIf:{type:String,required:!1,default:""},dataDpValidateShouldEqual:{type:String,required:!1,default:""},disabled:{type:Boolean,required:!1,default:null},hasIcon:{type:Boolean,required:!1,default:!1},id:{type:String,required:!0},label:{type:Object,required:!1,default:()=>({bold:!0,hide:!1,hint:"",text:"",tooltip:""})},maxlength:{type:[Number,String],required:!1,default:null},minlength:{type:[Number,String],required:!1,default:null},name:{type:String,required:!1,default:""},pattern:{type:String,required:!1,default:""},placeholder:{type:String,required:!1,default:""},preventDefaultOnEnter:{type:Boolean,required:!1,default:!0},readonly:{type:Boolean,required:!1,default:null},required:{type:Boolean,required:!1,default:null},rounded:{type:String,required:!1,default:"full",validator:e=>["full","left","right"].includes(e)},size:{type:Number,required:!1,default:null},type:{type:String,required:!1,default:"text"},value:{type:String,required:!1,default:""},width:{type:String,required:!1,default:"w-full"}},emits:["blur","enter","focus","input","update:modelValue"],setup(e,{emit:p}){const a=e,n=p,c=r(()=>{let t=[`px-1 py-0.5 max-w-full
-    text-base leading-4 bg-surface
-    outline-1 outline-offset-0 outline-transparent
-    focus-visible:outline-interactive focus-visible:border-interactive focus-visible:z-above-zero
-    required:shadow-none`];return a.rounded==="full"?t.push("rounded-input"):a.rounded==="left"?t.push("rounded-l-input"):a.rounded==="right"&&t.push("rounded-r-input"),a.size&&a.size>0||t.push("w-full"),a.readonly||a.disabled?t.push("bg-surface-light border-none cursor-default"):t.push("text-input bg-surface border border-input cursor-text"),a.hasIcon&&t.push("pr-4"),t.join(" ")}),h=r(()=>{let t=[i.value.length?"space-y-1":"space-y-0.5"];return a.width!=="auto"&&a.size&&a.size>0&&t.push(a.width),t}),i=r(()=>{const t=a.label.hint?[a.label.hint]:[];return a.maxlength&&!a.minlength?t.push(o(a.value.length,a.maxlength)):a.minlength&&!a.maxlength?t.push(m(a.value.length,a.minlength)):a.maxlength&&a.minlength&&(a.maxlength===a.minlength?t.push(D(a.value.length,a.maxlength)):(t.push(o(a.value.length,a.maxlength)),t.push(m(a.value.length,a.minlength)))),t}),y=t=>{a.preventDefaultOnEnter&&t.preventDefault(),n("enter")};return(t,l)=>(f(),v("div",{class:s(h.value)},[e.label.text!==""?(f(),b(d(z),x({key:0},{...e.label,for:e.id,hint:i.value,required:e.required},{text:e.label.text,class:"mb-0.5"}),null,16,["text"])):q("",!0),V("input",{id:e.id,name:e.name!==""?e.name:null,class:s(d(S)(c.value)),"data-counter":e.dataCounter!==""?e.dataCounter:null,"data-dp-validate-error":e.dataDpValidateError||null,"data-dp-validate-error-fieldname":e.dataDpValidateErrorFieldname||e.label.text||null,"data-dp-validate-if":e.dataDpValidateIf!==""?e.dataDpValidateIf:null,"data-dp-validate-should-equal":e.dataDpValidateShouldEqual!==""?e.dataDpValidateShouldEqual:null,"data-cy":e.dataCy!==""?e.dataCy:null,"aria-labelledby":e.ariaLabelledby,maxlength:e.maxlength!==""?e.maxlength:null,type:e.type,pattern:e.pattern!==""?e.pattern:null,placeholder:e.placeholder!==""?e.placeholder:null,disabled:e.disabled,readonly:e.readonly,required:e.required,autocomplete:e.autocomplete!==""?e.autocomplete:null,size:e.size&&e.size>0?e.size:null,value:e.value,onBlur:l[0]||(l[0]=u=>n("blur",u.target.value)),onFocus:l[1]||(l[1]=u=>n("focus")),onInput:l[2]||(l[2]=u=>{n("update:modelValue",u.target.value),n("input",u.target.value)}),onKeydown:w(y,["enter"])},null,42,E)],2))}});I.__docgenInfo={exportName:"default",displayName:"DpInput",description:"",tags:{},props:[{name:"ariaLabelledby",description:`Reference another element on the page to define an accessible name if there is no label or
-you want to override the label.`,type:{name:"string"},required:!1,defaultValue:{func:!1,value:"null"}},{name:"autocomplete",description:`Tell the browser if autocomplete is allowed or not. If enabled the browser is allowed
-to automatically complete the input. You can also provide a type of data which is expected.`,type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"dataCounter",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"dataCy",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"dataDpValidateError",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"dataDpValidateErrorFieldname",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"dataDpValidateIf",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"dataDpValidateShouldEqual",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"disabled",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"null"}},{name:"hasIcon",description:"Use: when input field used with Icon || Button, then input field has padding right.",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"id",type:{name:"string"},required:!0},{name:"label",type:{name:"object"},required:!1,defaultValue:{func:!1,value:`{
-  bold: true,
-  hide: false,
-  hint: '',
-  text: '',
-  tooltip: ''
-}`}},{name:"maxlength",description:"Limit the maximum allowed number of characters to the given amount.",type:{name:"number|string"},required:!1,defaultValue:{func:!1,value:"null"}},{name:"minlength",description:"Define the minimum number of characters that need to be given.",type:{name:"number|string"},required:!1,defaultValue:{func:!1,value:"null"}},{name:"name",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"pattern",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"placeholder",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"preventDefaultOnEnter",description:"Set to false to prevent default behavior onEnter.",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"true"}},{name:"readonly",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"null"}},{name:"required",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"null"}},{name:"rounded",description:"Prop to define the rounded corners of the input.",tags:{property:[{title:"property",type:{name:"String"},name:"rounded",description:"The rounded corners style."}],default:[{description:"'full'",title:"default"}],validator:[{description:"Ensures the value is one of 'full', 'left', or 'right'.",title:"validator"}]},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'full'"},values:["full","left","right"]},{name:"size",description:`When setting a number for the \`size\` prop, this is directly rendered
-as html attribute on the input element. Also, it is assumed that visual sizing
-based on that value shall be applied, that is why both container classes
-and element classes do not define any width styles when a size is set here.`,type:{name:"number"},required:!1,defaultValue:{func:!1,value:"null"}},{name:"type",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'text'"}},{name:"value",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"width",description:"Full width by default; set to 'auto' to have no width defined.",tags:{deprecated:[{description:"Apply width to the parent element of DpInput.",title:"deprecated"}]},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'w-full'"}}],events:[{name:"blur"},{name:"enter"},{name:"focus"},{name:"input"},{name:"update:modelValue"}],sourceFiles:["/home/florian/Dev/demosplan-ui/src/components/DpInput/DpInput.vue"]};export{I as _};

package/storybook-static/assets/DpInput.stories-bIIwZ06I.js

@@ -1,131 +0,0 @@
-import{_ as o}from"./DpInput-cN-WEvOL.js";import{_ as p}from"./DpIcon-dOAQoUKG.js";const d={component:o,title:"Components/Input",tags:["autodocs","!dev"]},n={args:{id:"DefaultInput"}},r={args:{id:"LabelOptions",label:{hint:"This is a hint that explains what to enter in the input",text:"Contact person",tooltip:"This is a text adding some more information on the input field"},width:"u-1-of-2"},tags:["!autodocs","dev"]},e={render:()=>({components:{DpInput:o},template:`
-            <div class="space-y-4">
-                <DpInput
-                    id="InputStatesRequired"
-                    :label="{ text: 'Phone' }"
-                    pattern="^(\\+?)(-| |[0-9]|\\(|\\))*$"
-                    required
-                    type="tel"
-                    width="u-1-of-2"
-                />
-
-                <DpInput
-                    disabled
-                    id="InputStatesDisabled"
-                    :label="{ text: 'Email address (disabled)' }"
-                    type="email"
-                    value="yourEmail@example.com"
-                    width="u-1-of-2"
-                />
-
-                <DpInput
-                    id="InputStatesReadonly"
-                    :label="{ text: 'Username (readonly)' }"
-                    readonly
-                    value="username123"
-                    width="u-1-of-2"
-                />
-            </div>
-        `})},t={args:{id:"inputId-Placeholder",label:{text:"Search"},placeholder:"Type to search...",width:"u-1-of-3"}},a={args:{id:"inputId-Length",label:{text:"Username"},minlength:3,maxlength:20,value:"user",width:"u-1-of-3"}},s={args:{id:"inputId-WithIcon",label:{text:"Search with icon space"},placeholder:"Search...",hasIcon:!0,width:"u-1-of-3"},render:i=>({components:{DpIcon:p,DpInput:o},setup(){return{args:i}},template:`
-            <div class="relative">
-                <DpInput v-bind="args" />
-                <DpIcon icon="search" class="absolute right-2 bottom-1" />
-            </div>
-        `})};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
-  args: {
-    id: 'DefaultInput'
-  }
-}`,...n.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
-  args: {
-    id: 'LabelOptions',
-    label: {
-      hint: 'This is a hint that explains what to enter in the input',
-      text: 'Contact person',
-      tooltip: 'This is a text adding some more information on the input field'
-    },
-    width: 'u-1-of-2'
-  },
-  tags: ['!autodocs', 'dev']
-}`,...r.parameters?.docs?.source}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
-  render: () => ({
-    components: {
-      DpInput
-    },
-    template: \`
-            <div class="space-y-4">
-                <DpInput
-                    id="InputStatesRequired"
-                    :label="{ text: 'Phone' }"
-                    pattern="^(\\\\+?)(-| |[0-9]|\\\\(|\\\\))*$"
-                    required
-                    type="tel"
-                    width="u-1-of-2"
-                />
-
-                <DpInput
-                    disabled
-                    id="InputStatesDisabled"
-                    :label="{ text: 'Email address (disabled)' }"
-                    type="email"
-                    value="yourEmail@example.com"
-                    width="u-1-of-2"
-                />
-
-                <DpInput
-                    id="InputStatesReadonly"
-                    :label="{ text: 'Username (readonly)' }"
-                    readonly
-                    value="username123"
-                    width="u-1-of-2"
-                />
-            </div>
-        \`
-  })
-}`,...e.parameters?.docs?.source},description:{story:"Shows required and disabled inputs",...e.parameters?.docs?.description}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
-  args: {
-    id: 'inputId-Placeholder',
-    label: {
-      text: 'Search'
-    },
-    placeholder: 'Type to search...',
-    width: 'u-1-of-3'
-  }
-}`,...t.parameters?.docs?.source},description:{story:"Shows a placeholder when the input field is empty",...t.parameters?.docs?.description}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
-  args: {
-    id: 'inputId-Length',
-    label: {
-      text: 'Username'
-    },
-    minlength: 3,
-    maxlength: 20,
-    value: 'user',
-    width: 'u-1-of-3'
-  }
-}`,...a.parameters?.docs?.source},description:{story:"Demonstrates input with length constraints and automatic hint",...a.parameters?.docs?.description}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
-  args: {
-    id: 'inputId-WithIcon',
-    label: {
-      text: 'Search with icon space'
-    },
-    placeholder: 'Search...',
-    hasIcon: true,
-    width: 'u-1-of-3'
-  },
-  render: args => ({
-    components: {
-      DpIcon,
-      DpInput
-    },
-    setup() {
-      return {
-        args
-      };
-    },
-    template: \`
-            <div class="relative">
-                <DpInput v-bind="args" />
-                <DpIcon icon="search" class="absolute right-2 bottom-1" />
-            </div>
-        \`
-  })
-}`,...s.parameters?.docs?.source},description:{story:"Input with icon space (hasIcon prop)",...s.parameters?.docs?.description}}};const c=["Default","LabelOptions","InputStates","WithPlaceholder","WithLengthConstraints","WithIconSpace"],h=Object.freeze(Object.defineProperty({__proto__:null,Default:n,InputStates:e,LabelOptions:r,WithIconSpace:s,WithLengthConstraints:a,WithPlaceholder:t,__namedExportsOrder:c,default:d},Symbol.toStringTag,{value:"Module"}));export{h as D,e as I,r as L,t as W,n as a,a as b,s as c};

package/storybook-static/assets/DpLabel-CIRt98zd.js

@@ -1,30 +0,0 @@
-import{j as e,M as r,C as s}from"./blocks-kyJuz3C5.js";import{useMDXComponents as l}from"./index-BbC7EF1e.js";import{D as t,F as d}from"./DpLabel.stories-DOvT5FP0.js";import"./iframe-KFxwsBtW.js";import"./_commonjsHelpers-CE1G-McA.js";import"./DpLabel-DFauD5I2.js";import"./DpContextualHelp-DnsCCoZB.js";import"./translations-DDOZrg-p.js";import"./DpIcon-dOAQoUKG.js";import"./CleanHtml-CeG3Pc5D.js";import"./Tooltip-flnpMaRO.js";import"./dayjs.min-C3DHb-Vr.js";import"./prefixClass-BBJiSKc2.js";function o(i){const n={code:"code",h1:"h1",h2:"h2",li:"li",p:"p",ul:"ul",...l(),...i.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{of:t}),`
-`,e.jsx(n.h1,{id:"label",children:"Label"}),`
-`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"DpLabel"})," component is used to add a label to form controls."]}),`
-`,e.jsxs(n.p,{children:["It is included in the following ",e.jsx("strong",{children:e.jsx("i",{children:"demosplan-ui"})})," form components:"]}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsx(n.li,{children:"DpCheckbox"}),`
-`,e.jsx(n.li,{children:"DpInput"}),`
-`,e.jsx(n.li,{children:"DpRadio"}),`
-`,e.jsx(n.li,{children:"DpSelect"}),`
-`,e.jsx(n.li,{children:"DpDateTimePicker"}),`
-`,e.jsx(n.li,{children:"DpTextarea"}),`
-`,e.jsx(n.li,{children:"DpTimePicker"}),`
-`]}),`
-`,e.jsxs(n.p,{children:["If you want to use any of these components, you don't need to import ",e.jsx(n.code,{children:"DpLabel"})," separately."]}),`
-`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"DpLabel"})," is currently not included in the following ",e.jsx("strong",{children:e.jsx("i",{children:"demosplan-ui"})})," form components:"]}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsx(n.li,{children:"DpMultiselect"}),`
-`,e.jsx(n.li,{children:"DpTiptap"}),`
-`,e.jsx(n.li,{children:"DpDatepicker"}),`
-`,e.jsx(n.li,{children:"DpDateRangePicker"}),`
-`]}),`
-`,e.jsxs(n.p,{children:["If you want to use any of these components, you need to import ",e.jsx(n.code,{children:"DpLabel"})," separately."]}),`
-`,e.jsx(n.h2,{id:"props",children:"Props"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:["If a form control is ",e.jsx(n.code,{children:"required"}),", an asterisk will be added to the label."]}),`
-`,e.jsxs(n.li,{children:["The ",e.jsx(n.code,{children:"hint"})," property adds the provided string below the label."]}),`
-`,e.jsxs(n.li,{children:["The ",e.jsx(n.code,{children:"tooltip"}),` property adds a contextual help icon that reveals additional information on the form control when the user
-hovers over it with their mouse.`]}),`
-`]}),`
-`,e.jsx(s,{of:d})]})}function g(i={}){const{wrapper:n}={...l(),...i.components};return n?e.jsx(n,{...i,children:e.jsx(o,{...i})}):o(i)}export{g as default};

package/storybook-static/assets/DpLabel-DFauD5I2.js

@@ -1 +0,0 @@
-import{y as g,z as u,c as l,a as p,f as i,g as m,e as v,G as a,n as s,F as x,i as k,o as t}from"./iframe-KFxwsBtW.js";import{_ as B}from"./DpContextualHelp-DnsCCoZB.js";import"./dayjs.min-C3DHb-Vr.js";import{p as o}from"./prefixClass-BBJiSKc2.js";import{C as c}from"./CleanHtml-CeG3Pc5D.js";import"./Tooltip-flnpMaRO.js";import"./translations-DDOZrg-p.js";import"./DpIcon-dOAQoUKG.js";import"./_commonjsHelpers-CE1G-McA.js";const C=["for"],V={key:0,"aria-hidden":"true"},_=g({__name:"DpLabel",props:{bold:{type:Boolean,required:!1,default:!0},for:{type:String,required:!0},hide:{type:Boolean,required:!1,default:!1},hint:{type:[String,Array],required:!1,default:()=>[]},text:{type:String,required:!0},tooltip:{type:String,required:!1,default:""},required:{type:Boolean,required:!1,default:!1}},setup(r){const e=r,y=u(()=>{let n=["flex flex-col"];return e.hide&&n.push("sr-only"),e.bold&&n.push("font-semibold"),n.map(d=>o(d))}),f=u(()=>e.hint?Array.isArray(e.hint)?e.hint:[e.hint]:[]),h=u(()=>e.for);return(n,d)=>(t(),l("label",{class:s(y.value),for:h.value},[p("span",null,[m(p("span",null,null,512),[[a(c),r.text]]),r.required?(t(),l("span",V,"*")):i("",!0),r.tooltip?(t(),v(a(B),{key:1,class:s(a(o)("ml-0.5")),text:r.tooltip},null,8,["class","text"])):i("",!0)]),f.value.length?(t(),l("span",{key:0,class:s(a(o)("block text-sm font-normal"))},[(t(!0),l(x,null,k(f.value,(q,b)=>m((t(),l("span",{key:b,class:s(a(o)("inline-block"))},null,2)),[[a(c),q]])),128))],2)):i("",!0)],10,C))}});_.__docgenInfo={exportName:"default",displayName:"DpLabel",description:"",tags:{},props:[{name:"bold",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"true"}},{name:"for",type:{name:"string"},required:!0},{name:"hide",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"hint",type:{name:"string | string[]"},required:!1,defaultValue:{func:!0,value:"() => []"}},{name:"text",type:{name:"string"},required:!0},{name:"tooltip",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"required",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}}],sourceFiles:["/home/florian/Dev/demosplan-ui/src/components/DpLabel/DpLabel.vue"]};export{_ as default};

package/storybook-static/assets/DpLabel.stories-DOvT5FP0.js

@@ -1,212 +0,0 @@
-import r from"./DpLabel-DFauD5I2.js";const l={component:r,title:"Components/Label",argTypes:{bold:{control:"boolean",description:"Whether the label text should be bold"},hide:{control:"boolean",description:"Hide the label visually, but keep it accessible for screen readers"},required:{control:"boolean",description:"Display an asterisk after the label text"},for:{control:"text",description:"The ID of the form control this label is associated with"},text:{control:"text",description:"The text content of the label"},hint:{control:"text",description:"Hint text displayed below the label"},tooltip:{control:"text",description:"Text displayed in a tooltip when hovering over the help icon"}}},e={args:{bold:!0,for:"default",hint:"",hide:!1,text:"Label Text",tooltip:"",required:!1},render:i=>({components:{DpLabel:r},setup(){return{args:i}},template:'<DpLabel v-bind="args" />'})},t={render:()=>({components:{DpLabel:r},template:`
-            <div class="space-y-6">
-                <!-- Basic label -->
-                <div>
-                    <h3 class="text-lg font-semibold mb-2">Basic Label</h3>
-                    <DpLabel
-                        for="basic"
-                        text="First name"
-                    />
-                    <input id="basic" type="text" class="border border-gray-300 p-1 rounded mt-1" />
-                </div>
-
-                <!-- Required label -->
-                <div>
-                    <h3 class="text-lg font-semibold mb-2">Required Label</h3>
-                    <DpLabel
-                        for="required"
-                        text="Email address"
-                        required
-                    />
-                    <input id="required" type="email" required class="border border-gray-300 p-1 rounded mt-1" />
-                </div>
-
-                <!-- Label with hint -->
-                <div>
-                    <h3 class="text-lg font-semibold mb-2">Label with Hint</h3>
-                    <DpLabel
-                        for="hint"
-                        text="Contact person"
-                        hint="Please enter the name of the primary contact person"
-                    />
-                    <input id="hint" type="text" class="border border-gray-300 p-1 rounded mt-1" />
-                </div>
-
-                <!-- Label with multiple hints -->
-                <div>
-                    <h3 class="text-lg font-semibold mb-2">Label with Multiple Hints</h3>
-                    <DpLabel
-                        for="multiHint"
-                        text="Username"
-                        :hint="['Must be 3-20 characters', 'Can only contain letters, numbers, and underscores']"
-                    />
-                    <input id="multiHint" type="text" class="border border-gray-300 p-1 rounded mt-1" />
-                </div>
-
-                <!-- Label with tooltip -->
-                <div>
-                    <h3 class="text-lg font-semibold mb-2">Label with Tooltip</h3>
-                    <DpLabel
-                        for="tooltip"
-                        text="Authorized users"
-                        tooltip="These users will have full access to the application"
-                    />
-                    <input id="tooltip" type="text" class="border border-gray-300 p-1 rounded mt-1" />
-                </div>
-
-                <!-- Non-bold label -->
-                <div>
-                    <h3 class="text-lg font-semibold mb-2">Non-bold Label</h3>
-                    <DpLabel
-                        for="nonbold"
-                        text="Optional field"
-                        :bold="false"
-                    />
-                    <input id="nonbold" type="text" class="border border-gray-300 p-1 rounded mt-1" />
-                </div>
-
-                <!-- Visually hidden label (for accessibility) -->
-                <div>
-                    <h3 class="text-lg font-semibold mb-2">Visually Hidden Label (screenreader-only)</h3>
-                    <DpLabel
-                        for="hidden"
-                        text="Search"
-                        hide
-                    />
-                    <input id="hidden" type="search" placeholder="Search..." class="border border-gray-300 p-1 rounded" />
-                </div>
-
-                <!-- Comprehensive example -->
-                <div>
-                    <h3 class="text-lg font-semibold mb-2">Comprehensive Example</h3>
-                    <DpLabel
-                        for="comprehensive"
-                        text="Document Title"
-                        required
-                        hint="Enter the official title of the document"
-                        tooltip="This will be displayed as the main heading in reports"
-                    />
-                    <input id="comprehensive" type="text" required class="border border-gray-300 p-1 rounded mt-1" />
-                </div>
-            </div>
-        `}),tags:["!dev"]};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
-  args: {
-    bold: true,
-    for: 'default',
-    hint: '',
-    hide: false,
-    text: 'Label Text',
-    tooltip: '',
-    required: false
-  },
-  render: args => ({
-    components: {
-      DpLabel
-    },
-    setup() {
-      return {
-        args
-      };
-    },
-    template: \`<DpLabel v-bind="args" />\`
-  })
-}`,...e.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
-  render: () => ({
-    components: {
-      DpLabel
-    },
-    template: \`
-            <div class="space-y-6">
-                <!-- Basic label -->
-                <div>
-                    <h3 class="text-lg font-semibold mb-2">Basic Label</h3>
-                    <DpLabel
-                        for="basic"
-                        text="First name"
-                    />
-                    <input id="basic" type="text" class="border border-gray-300 p-1 rounded mt-1" />
-                </div>
-
-                <!-- Required label -->
-                <div>
-                    <h3 class="text-lg font-semibold mb-2">Required Label</h3>
-                    <DpLabel
-                        for="required"
-                        text="Email address"
-                        required
-                    />
-                    <input id="required" type="email" required class="border border-gray-300 p-1 rounded mt-1" />
-                </div>
-
-                <!-- Label with hint -->
-                <div>
-                    <h3 class="text-lg font-semibold mb-2">Label with Hint</h3>
-                    <DpLabel
-                        for="hint"
-                        text="Contact person"
-                        hint="Please enter the name of the primary contact person"
-                    />
-                    <input id="hint" type="text" class="border border-gray-300 p-1 rounded mt-1" />
-                </div>
-
-                <!-- Label with multiple hints -->
-                <div>
-                    <h3 class="text-lg font-semibold mb-2">Label with Multiple Hints</h3>
-                    <DpLabel
-                        for="multiHint"
-                        text="Username"
-                        :hint="['Must be 3-20 characters', 'Can only contain letters, numbers, and underscores']"
-                    />
-                    <input id="multiHint" type="text" class="border border-gray-300 p-1 rounded mt-1" />
-                </div>
-
-                <!-- Label with tooltip -->
-                <div>
-                    <h3 class="text-lg font-semibold mb-2">Label with Tooltip</h3>
-                    <DpLabel
-                        for="tooltip"
-                        text="Authorized users"
-                        tooltip="These users will have full access to the application"
-                    />
-                    <input id="tooltip" type="text" class="border border-gray-300 p-1 rounded mt-1" />
-                </div>
-
-                <!-- Non-bold label -->
-                <div>
-                    <h3 class="text-lg font-semibold mb-2">Non-bold Label</h3>
-                    <DpLabel
-                        for="nonbold"
-                        text="Optional field"
-                        :bold="false"
-                    />
-                    <input id="nonbold" type="text" class="border border-gray-300 p-1 rounded mt-1" />
-                </div>
-
-                <!-- Visually hidden label (for accessibility) -->
-                <div>
-                    <h3 class="text-lg font-semibold mb-2">Visually Hidden Label (screenreader-only)</h3>
-                    <DpLabel
-                        for="hidden"
-                        text="Search"
-                        hide
-                    />
-                    <input id="hidden" type="search" placeholder="Search..." class="border border-gray-300 p-1 rounded" />
-                </div>
-
-                <!-- Comprehensive example -->
-                <div>
-                    <h3 class="text-lg font-semibold mb-2">Comprehensive Example</h3>
-                    <DpLabel
-                        for="comprehensive"
-                        text="Document Title"
-                        required
-                        hint="Enter the official title of the document"
-                        tooltip="This will be displayed as the main heading in reports"
-                    />
-                    <input id="comprehensive" type="text" required class="border border-gray-300 p-1 rounded mt-1" />
-                </div>
-            </div>
-        \`
-  }),
-  tags: ['!dev']
-}`,...t.parameters?.docs?.source}}};const o=["Default","FullExample"],d=Object.freeze(Object.defineProperty({__proto__:null,Default:e,FullExample:t,__namedExportsOrder:o,default:l},Symbol.toStringTag,{value:"Module"}));export{d as D,t as F};

package/storybook-static/assets/DpLoading-CPPK2VdG.js

@@ -1,20 +0,0 @@
-import{j as e,M as a,C as t}from"./blocks-kyJuz3C5.js";import{useMDXComponents as o}from"./index-BbC7EF1e.js";import{D as r,a as l,W as d,A as c}from"./DpLoading.stories-DbGxhEdp.js";import"./iframe-KFxwsBtW.js";import"./_commonjsHelpers-CE1G-McA.js";import"./DpLoading-rM7osZHK.js";import"./translations-DDOZrg-p.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";function s(i){const n={code:"code",h1:"h1",h2:"h2",li:"li",p:"p",ul:"ul",...o(),...i.components};return e.jsxs(e.Fragment,{children:[e.jsx(a,{of:r}),`
-`,e.jsx(n.h1,{id:"loading-indicator",children:"Loading Indicator"}),`
-`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"DpLoading"}),` component renders a spinning animation alongside explanatory text to indicate background activity.
-It's commonly used during data loading, form submissions, or any operation that requires the user to wait.`]}),`
-`,e.jsx(n.h2,{id:"basic-usage",children:"Basic Usage"}),`
-`,e.jsx(n.p,{children:'The default loading indicator displays a spinner with the text "Daten werden geladen..." (Data is loading...).'}),`
-`,e.jsx(t,{of:l}),`
-`,e.jsx(n.h2,{id:"without-label",children:"Without Label"}),`
-`,e.jsxs(n.p,{children:["In contexts with limited space, use the ",e.jsx(n.code,{children:"hideLabel"})," prop to show only the spinner."]}),`
-`,e.jsx(t,{of:d}),`
-`,e.jsx(n.h2,{id:"as-overlay",children:"As Overlay"}),`
-`,e.jsxs(n.p,{children:["To block interactions with content that is being refreshed, use the ",e.jsx(n.code,{children:"overlay"})," prop. This creates a full overlay that prevents clicks on underlying elements."]}),`
-`,e.jsx(t,{of:c}),`
-`,e.jsx(n.h2,{id:"best-practices",children:"Best Practices"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsx(n.li,{children:"Use the loading indicator for operations that take more than a second to complete"}),`
-`,e.jsx(n.li,{children:"For brief operations (less than a second), consider using a more subtle indicator or none at all"}),`
-`,e.jsx(n.li,{children:"When using as an overlay, ensure users understand why interaction is blocked"}),`
-`,e.jsx(n.li,{children:"Consider using the version without a label for small UI elements or repeated loading indicators"}),`
-`]})]})}function y(i={}){const{wrapper:n}={...o(),...i.components};return n?e.jsx(n,{...i,children:e.jsx(s,{...i})}):s(i)}export{y as default};

package/storybook-static/assets/DpLoading-rM7osZHK.js

@@ -1 +0,0 @@
-import{d}from"./translations-DDOZrg-p.js";import{c as n,a as o,f as s,t as i,F as c,w as f,n as p,o as l}from"./iframe-KFxwsBtW.js";import{_ as u}from"./_plugin-vue_export-helper-DlAUqK2U.js";const r={name:"DpLoading",props:{hideLabel:{required:!1,type:Boolean,default:!1},overlay:{type:Boolean,required:!1,default:!1}},data(){return{label:d.loadingData}}},m={key:0,class:"c-loading__inner flex items-center space-inline-xs"},_=["textContent"],g=["textContent"];function y(x,e,a,v,t,b){return l(),n("div",{class:p(["c-loading",{"c-loading--overlay":a.overlay,"flex items-center space-inline-xs":!a.overlay}]),onClick:e[0]||(e[0]=f(()=>{},["prevent"]))},[a.overlay?(l(),n("div",m,[e[1]||(e[1]=o("span",{class:"c-loading__spinner"},null,-1)),a.hideLabel?s("",!0):(l(),n("span",{key:0,class:"c-loading__text",textContent:i(t.label)},null,8,_))])):(l(),n(c,{key:1},[e[2]||(e[2]=o("span",{class:"c-loading__spinner"},null,-1)),a.hideLabel?s("",!0):(l(),n("span",{key:0,class:"c-loading__text",textContent:i(t.label)},null,8,g))],64))],2)}const C=u(r,[["render",y]]);r.__docgenInfo={displayName:"DpLoading",exportName:"default",description:"",tags:{},props:[{name:"hideLabel",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"overlay",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}}],sourceFiles:["/home/florian/Dev/demosplan-ui/src/components/DpLoading/DpLoading.vue"]};export{C as D};

package/storybook-static/assets/DpLoading.stories-DbGxhEdp.js

@@ -1,43 +0,0 @@
-import{D as a}from"./DpLoading-rM7osZHK.js";const r={component:a,title:"Components/Loading",argTypes:{hideLabel:{control:"boolean",description:"When true, only shows the spinning animation without any text"},overlay:{control:"boolean",description:"When true, renders as a full overlay that blocks interaction with content beneath it"}},tags:["autodocs","!dev"],parameters:{docs:{description:{component:"The `DpLoading` component indicates background activity with a spinning animation, optionally accompanied by text. It is commonly used during data loading or processing operations."}}}},e={args:{hideLabel:!1,overlay:!1},tags:["!autodocs","dev"]},t={args:{hideLabel:!0,overlay:!1}},n={args:{hideLabel:!1,overlay:!0},render:o=>({components:{DpLoading:a},setup(){return{args:o}},template:`
-            <div style="position: relative; min-height: 100px; padding: 20px; border: 1px solid #ccc; border-radius: 4px;">
-                <h3 style="margin: 0 0 10px 0;">Content beneath the overlay</h3>
-                <p>This content is still visible but cannot be interacted with while loading.</p>
-                <p>The overlay prevents clicks and other interactions until the loading completes.</p>
-                <DpLoading v-bind="args" />
-            </div>
-        `})};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
-  args: {
-    hideLabel: false,
-    overlay: false
-  },
-  tags: ['!autodocs', 'dev']
-}`,...e.parameters?.docs?.source},description:{story:'Default loading indicator with text that reads "Daten werden geladen..." (Data is loading...)',...e.parameters?.docs?.description}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
-  args: {
-    hideLabel: true,
-    overlay: false
-  }
-}`,...t.parameters?.docs?.source},description:{story:"Loading indicator without text, useful in contexts with limited space.",...t.parameters?.docs?.description}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
-  args: {
-    hideLabel: false,
-    overlay: true
-  },
-  render: args => ({
-    components: {
-      DpLoading
-    },
-    setup() {
-      return {
-        args
-      };
-    },
-    template: \`
-            <div style="position: relative; min-height: 100px; padding: 20px; border: 1px solid #ccc; border-radius: 4px;">
-                <h3 style="margin: 0 0 10px 0;">Content beneath the overlay</h3>
-                <p>This content is still visible but cannot be interacted with while loading.</p>
-                <p>The overlay prevents clicks and other interactions until the loading completes.</p>
-                <DpLoading v-bind="args" />
-            </div>
-        \`
-  })
-}`,...n.parameters?.docs?.source},description:{story:`Loading indicator as an overlay that blocks interaction with content beneath it.
-Use this when refreshing content and you want to prevent user interaction until loading completes.`,...n.parameters?.docs?.description}}};const i=["Default","WithoutLabel","AsOverlay"],d=Object.freeze(Object.defineProperty({__proto__:null,AsOverlay:n,Default:e,WithoutLabel:t,__namedExportsOrder:i,default:r},Symbol.toStringTag,{value:"Module"}));export{n as A,d as D,t as W,e as a};

package/storybook-static/assets/DpModal-CVn3FCXs.js

@@ -1,26 +0,0 @@
-import{j as e,M as r,C as s}from"./blocks-kyJuz3C5.js";import{useMDXComponents as i}from"./index-BbC7EF1e.js";import{D as a,a as c,C as l}from"./DpModal.stories-D85oaATj.js";import"./iframe-KFxwsBtW.js";import"./_commonjsHelpers-CE1G-McA.js";import"./DpModal-oGkhZvzT.js";import"./DpIcon-dOAQoUKG.js";import"./translations-DDOZrg-p.js";import"./prefixClassMixin-FjEzRm2G.js";import"./dayjs.min-C3DHb-Vr.js";import"./prefixClass-BBJiSKc2.js";import"./helpers-CdC6mcQu.js";import"./getScrollTop-CXy7CyEd.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./DpButton-BLywaapW.js";import"./CleanHtml-CeG3Pc5D.js";import"./Tooltip-flnpMaRO.js";function o(t){const n={code:"code",h1:"h1",h2:"h2",li:"li",p:"p",ul:"ul",...i(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{of:a}),`
-`,e.jsx(n.h1,{id:"modal",children:"Modal"}),`
-`,e.jsx(n.p,{children:"The Modal component creates a focused overlay that temporarily disables the main page content to direct the user's attention to critical information or actions. It's commonly used for confirmations, forms, warnings, and other interactions that require immediate user attention."}),`
-`,e.jsx(n.h2,{id:"basic-usage",children:"Basic Usage"}),`
-`,e.jsx(n.p,{children:"Click the button below to open a basic modal:"}),`
-`,e.jsx(s,{of:c}),`
-`,e.jsx(n.h2,{id:"customizing-appearance",children:"Customizing Appearance"}),`
-`,e.jsxs(n.p,{children:["You can customize the appearance of the modal using the ",e.jsx(n.code,{children:"contentClasses"}),", ",e.jsx(n.code,{children:"contentHeaderClasses"}),`,
-and `,e.jsx(n.code,{children:"contentBodyClasses"})," props:"]}),`
-`,e.jsx(s,{of:l}),`
-`,e.jsx(n.h2,{id:"accessibility",children:"Accessibility"}),`
-`,e.jsx(n.p,{children:"The modal component follows accessibility best practices:"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsx(n.li,{children:"Focus management: When a modal is opened, focus moves to the first focusable element inside. When closed, focus returns to the element that opened it."}),`
-`,e.jsx(n.li,{children:"Keyboard navigation: Users can navigate through focusable elements with Tab and close the modal with Escape."}),`
-`,e.jsx(n.li,{children:"Screen reader support: The modal has appropriate ARIA attributes for screen reader users."}),`
-`]}),`
-`,e.jsx(n.h2,{id:"best-practices",children:"Best Practices"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsx(n.li,{children:"Use modals sparingly - they interrupt the user's workflow"}),`
-`,e.jsx(n.li,{children:"Keep modal content concise and focused on a single task or piece of information"}),`
-`,e.jsx(n.li,{children:'Provide a clear way to dismiss the modal (e.g., "Close", "Cancel", or "Done" button)'}),`
-`,e.jsx(n.li,{children:"Make sure the modal title clearly describes its purpose"}),`
-`,e.jsx(n.li,{children:"For forms, show validation feedback within the modal itself"}),`
-`,e.jsx(n.li,{children:"Consider whether a non-modal alternative might be less disruptive"}),`
-`]})]})}function A(t={}){const{wrapper:n}={...i(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(o,{...t})}):o(t)}export{A as default};

package/storybook-static/assets/DpModal-oGkhZvzT.js

@@ -1 +0,0 @@
-import{_ as E}from"./DpIcon-dOAQoUKG.js";import{d as v}from"./translations-DDOZrg-p.js";import{p as C}from"./prefixClassMixin-FjEzRm2G.js";import"./helpers-CdC6mcQu.js";import{c as r,b as f,j as c,T as m,n,d as x,o as d,f as u,a as p,w as h,r as y}from"./iframe-KFxwsBtW.js";import{_ as k}from"./_plugin-vue_export-helper-DlAUqK2U.js";const b={name:"DpModal",components:{DpIcon:E},mixins:[C],props:{ariaLabel:{required:!1,type:String,default:""},contentBodyClasses:{required:!1,type:String,default:""},contentClasses:{required:!1,type:String,default:""},contentHeaderClasses:{required:!1,type:String,default:""},modalId:{required:!1,type:String,default:""}},data(){return{isOpenModal:!1,lastFocusedElement:"",focusableElements:[],title:v.window.close}},computed:{hasHeader(){return typeof this.$slots.header<"u"}},methods:{getFocusableElements(){const e=Array.from(this.$el.querySelectorAll('a, button:not([disabled]), input, textarea, select, details, [tabindex]:not([tabindex="-1"])'));e.length<=0?this.focusableElements=[]:this.focusableElements=[...e].filter(s=>this.isElementVisible(s))},isElementVisible(e){const s=e.offsetParent!==null,t=window.getComputedStyle(e),a=t.display!=="none"&&t.opacity!=="0";return s&&a},toggleByEvent(e){typeof e>"u"||this.modalId===e&&this.toggle()},toggle(){this.isOpenModal=this.isOpenModal===!1,this.$emit("modal:toggled",this.isOpenModal),this.isOpenModal===!0?(this.lastFocusedElement=document.activeElement,this.$nextTick(()=>{this.getFocusableElements(),this.focusableElements.length>0&&this.focusableElements[0].focus({preventScroll:!0})})):(this.preventScroll(!1),this.lastFocusedElement.focus())},preventScroll(e){const s=document.querySelector("html"),t=document.querySelector("body");e?(s.style.overflow="hidden",t.style.overflowY="scroll"):(s.style.overflow=null,t.style.overflowY=null)},checkKeyEvent(e){if(e.key==="Escape")this.toggle();else if(e.key==="Tab"){e.preventDefault();const s=this.focusableElements.findIndex(a=>a===e.target),t=this.focusableElements.length-1;if(!(this.focusableElements.length<2))if(e.shiftKey===!1&&e.target===this.focusableElements[t])this.focusableElements[0].focus();else if(e.shiftKey===!0&&e.target===this.focusableElements[0])this.focusableElements[t].focus();else{const a=e.shiftKey?s-1:s+1;this.focusableElements[a].focus()}}}},updated(){this.$nextTick(()=>this.getFocusableElements())}},M=["aria-label"],S=["aria-label","title"];function _(e,s,t,a,o,l){const g=x("dp-icon");return d(),r("div",{class:n(e.prefixClass("o-modal")),onKeydown:s[3]||(s[3]=(...i)=>l.checkKeyEvent&&l.checkKeyEvent(...i))},[f(m,{name:"content",appear:"",onEnter:l.preventScroll},{default:c(()=>[o.isOpenModal?(d(),r("aside",{key:0,"aria-label":t.ariaLabel,class:n(e.prefixClass("o-modal__content "+t.contentClasses)),role:"dialog"},[p("button",{class:n(e.prefixClass("btn--blank o-link--default absolute u-right-0")),"aria-label":o.title,title:o.title,onClick:s[0]||(s[0]=h(i=>l.toggle(),["prevent","stop"]))},[f(g,{icon:"close",size:"large"})],10,S),p("div",{class:n(e.prefixClass("o-modal__body "+t.contentBodyClasses))},[l.hasHeader?(d(),r("h2",{key:0,class:n(e.prefixClass("font-size-h1 border--bottom u-pb-0_25 "+t.contentHeaderClasses))},[y(e.$slots,"header")],2)):u("",!0),y(e.$slots,"default")],2)],10,M)):u("",!0)]),_:3},8,["onEnter"]),f(m,{name:"backdrop",appear:"",onAfterLeave:s[2]||(s[2]=i=>l.preventScroll(!1))},{default:c(()=>[o.isOpenModal?(d(),r("div",{key:0,class:n(e.prefixClass("o-modal__backdrop")),onClick:s[1]||(s[1]=h(i=>l.toggle(),["prevent","stop"]))},null,2)):u("",!0)]),_:1})],34)}const I=k(b,[["render",_]]);b.__docgenInfo={exportName:"default",displayName:"DpModal",description:"",tags:{},props:[{name:"ariaLabel",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"contentBodyClasses",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"contentClasses",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"contentHeaderClasses",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"modalId",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}}],events:[{name:"modal:toggled",type:{names:["undefined"]}}],slots:[{name:"header"},{name:"default"}],sourceFiles:["/home/florian/Dev/demosplan-ui/src/components/DpModal/DpModal.vue","/home/florian/Dev/demosplan-ui/src/mixins/prefixClassMixin/prefixClassMixin.js"]};export{I as D};