@designcrowd/fe-shared-lib 1.8.7 → 1.8.9-edge-fallback-0

package/.storybook-static/assets/Modal.stories-B9faUP3R.js

@@ -0,0 +1,345 @@
+import{M as n}from"./Modal-DKAacz7P.js";import{B as Y}from"./Button-CkyYO9sU.js";import"./Icon-B_xzgi_Q.js";import"./iframe-ndUd-rmt.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./ButtonPrimary-LDY_rMmo.js";const D={title:"Components/Modal",component:n},t={render:e=>({components:{Modal:n},setup(){return{args:e}},template:`
+      <Modal v-bind="args" close-on-esc @close-modal="closeLoginModal">
+        Your component goes here
+      </Modal>
+    `,methods:{closeLoginModal(){this.visible=!1}}}),args:{visible:!0}},i={render:e=>({components:{Modal:n,Button:Y},setup(){return{args:e}},template:`
+      <div>
+        <Button size="medium" variant="primary" label="Click Me" @on-click="onButtonClick" />
+        <Modal v-bind="args" close-on-esc @close-modal="closeLoginModal" :disable-body-scroll-on-visible="true">
+        Your component goes here
+        </Modal>
+      </div>
+    `,methods:{closeLoginModal(){this.visible=!1},onButtonClick(){this.visible=!0}}}),args:{visible:!0}},d={render:e=>({components:{Modal:n},setup(){return{args:e}},template:`
+      <Modal v-bind="args" :simple="true" @close-modal="closeLoginModal">
+      <div class="tw-px-8">
+        <div>
+          <h2 class="tw-text-2xl tw-text-center tw-mb-4">Hello World</h2>
+        </div>
+      </div>
+      </Modal>
+    `,methods:{closeLoginModal(){this.visible=!1}}}),args:{visible:!0}},o={render:e=>({components:{Modal:n},setup(){return{args:e}},template:`
+      <Modal v-bind="args" :mandatory="true" @close-modal="closeLoginModal">
+      I'm a mandatory modal
+      </Modal>
+    `,methods:{closeLoginModal(){this.visible=!1}}}),args:{visible:!0}},s={render:e=>({components:{Modal:n},setup(){return{args:e}},template:`
+      <Modal v-bind="args" @close-modal="closeLoginModal">
+      <div>
+        <div>Heading</div>
+        <div style="height: 150px;">Contents 1</div>
+        <div style="height: 250px;">Contents 2</div>
+        <div style="height: 300px;">Contents 3</div>
+        <button>Save</button>
+      </div>
+      </Modal>
+    `,methods:{closeLoginModal(){this.visible=!1}}}),args:{visible:!0}},r={render:e=>({components:{Modal:n},setup(){return{args:e}},template:`
+      <Modal v-bind="args" @close-modal="closeLoginModal">
+      <template v-slot:header>
+        <div style="text-align: center; font-weight: 600; font-size: 20px;">
+          <span>Header</span>
+        </div>
+        <div>
+          <span>Sticky content here which does not overflow</span>
+        </div>
+      </template>
+      <div class="sm:tw-h-96">
+        <div style="height: 150px;">Over flowing Contents 1</div>
+        <div style="height: 200px;">Over flowing Contents 2</div>
+        <div style="height: 350px;">Over flowing Contents 3</div>
+        <div style="height: 350px;">Over flowing Contents 4</div>
+        <div style="height: 350px;">Over flowing Contents 5</div>
+        <button>Save</button>
+      </div>
+      <template v-slot:footer>
+        <div style="text-align: center; font-weight: 600; font-size: 20px;">
+          <span>Footer</span>
+        </div>
+      </template>
+      </Modal>
+    `,methods:{closeLoginModal(){this.visible=!1}}}),args:{visible:!0}},a={render:e=>({components:{Modal:n},setup(){return{args:e}},template:`
+      <Modal v-bind="args" @close-modal="closeLoginModal" fullScreenBreakpoint="sm">
+      <template v-slot:header>
+        <div style="text-align: center; font-weight: 600; font-size: 20px;">
+          <span>Try resizing browser</span>
+        </div>
+      </template>
+      <div class="sm:tw-h-96">
+        <div style="height: 150px;">Over flowing Contents 1</div>
+        <div style="height: 200px;">Over flowing Contents 2</div>
+        <div style="height: 350px;">Over flowing Contents 3</div>
+        <div style="height: 350px;">Over flowing Contents 4</div>
+        <div style="height: 350px;">Over flowing Contents 5</div>
+        <button>Save</button>
+      </div>
+      <template v-slot:footer>
+        <div style="text-align: center; font-weight: 600; font-size: 20px;">
+          <span>Footer</span>
+        </div>
+      </template>
+      </Modal>
+    `,methods:{closeLoginModal(){this.visible=!1}}}),args:{visible:!0}},l={render:e=>({components:{Modal:n},setup(){return{args:e}},template:`
+      <Modal mode="image" v-bind="args" @close-modal="closeLoginModal">
+      <img alt="modal-img" src="https://source.unsplash.com/random/1200x1200"/>
+      </Modal>
+    `,methods:{closeLoginModal(){this.visible=!1}}}),args:{visible:!0}};l.story={name:"Modal — Image"};t.story={name:"Modal"};o.story={name:"Modal — Mandatory"};s.story={name:"Modal — Overflow Height"};r.story={name:"Modal — Header and Footer"};a.story={name:"Modal — Fullscreen breakpoint"};var p,v,m;t.parameters={...t.parameters,docs:{...(p=t.parameters)==null?void 0:p.docs,source:{originalSource:`{
+  render: args => {
+    return {
+      components: {
+        Modal
+      },
+      setup() {
+        return {
+          args
+        };
+      },
+      template: \`
+      <Modal v-bind="args" close-on-esc @close-modal="closeLoginModal">
+        Your component goes here
+      </Modal>
+    \`,
+      methods: {
+        closeLoginModal() {
+          this.visible = false;
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...(m=(v=t.parameters)==null?void 0:v.docs)==null?void 0:m.source}}};var c,g,u;i.parameters={...i.parameters,docs:{...(c=i.parameters)==null?void 0:c.docs,source:{originalSource:`{
+  render: args => {
+    return {
+      components: {
+        Modal,
+        Button
+      },
+      setup() {
+        return {
+          args
+        };
+      },
+      template: \`
+      <div>
+        <Button size="medium" variant="primary" label="Click Me" @on-click="onButtonClick" />
+        <Modal v-bind="args" close-on-esc @close-modal="closeLoginModal" :disable-body-scroll-on-visible="true">
+        Your component goes here
+        </Modal>
+      </div>
+    \`,
+      methods: {
+        closeLoginModal() {
+          this.visible = false;
+        },
+        onButtonClick() {
+          this.visible = true;
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...(u=(g=i.parameters)==null?void 0:g.docs)==null?void 0:u.source}}};var h,M,b;d.parameters={...d.parameters,docs:{...(h=d.parameters)==null?void 0:h.docs,source:{originalSource:`{
+  render: args => {
+    return {
+      components: {
+        Modal
+      },
+      setup() {
+        return {
+          args
+        };
+      },
+      template: \`
+      <Modal v-bind="args" :simple="true" @close-modal="closeLoginModal">
+      <div class="tw-px-8">
+        <div>
+          <h2 class="tw-text-2xl tw-text-center tw-mb-4">Hello World</h2>
+        </div>
+      </div>
+      </Modal>
+    \`,
+      methods: {
+        closeLoginModal() {
+          this.visible = false;
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...(b=(M=d.parameters)==null?void 0:M.docs)==null?void 0:b.source}}};var f,y,x;o.parameters={...o.parameters,docs:{...(f=o.parameters)==null?void 0:f.docs,source:{originalSource:`{
+  render: args => {
+    return {
+      components: {
+        Modal
+      },
+      setup() {
+        return {
+          args
+        };
+      },
+      template: \`
+      <Modal v-bind="args" :mandatory="true" @close-modal="closeLoginModal">
+      I'm a mandatory modal
+      </Modal>
+    \`,
+      methods: {
+        closeLoginModal() {
+          this.visible = false;
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...(x=(y=o.parameters)==null?void 0:y.docs)==null?void 0:x.source}}};var w,C,L;s.parameters={...s.parameters,docs:{...(w=s.parameters)==null?void 0:w.docs,source:{originalSource:`{
+  render: args => {
+    return {
+      components: {
+        Modal
+      },
+      setup() {
+        return {
+          args
+        };
+      },
+      template: \`
+      <Modal v-bind="args" @close-modal="closeLoginModal">
+      <div>
+        <div>Heading</div>
+        <div style="height: 150px;">Contents 1</div>
+        <div style="height: 250px;">Contents 2</div>
+        <div style="height: 300px;">Contents 3</div>
+        <button>Save</button>
+      </div>
+      </Modal>
+    \`,
+      methods: {
+        closeLoginModal() {
+          this.visible = false;
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...(L=(C=s.parameters)==null?void 0:C.docs)==null?void 0:L.source}}};var S,O,k;r.parameters={...r.parameters,docs:{...(S=r.parameters)==null?void 0:S.docs,source:{originalSource:`{
+  render: args => {
+    return {
+      components: {
+        Modal
+      },
+      setup() {
+        return {
+          args
+        };
+      },
+      template: \`
+      <Modal v-bind="args" @close-modal="closeLoginModal">
+      <template v-slot:header>
+        <div style="text-align: center; font-weight: 600; font-size: 20px;">
+          <span>Header</span>
+        </div>
+        <div>
+          <span>Sticky content here which does not overflow</span>
+        </div>
+      </template>
+      <div class="sm:tw-h-96">
+        <div style="height: 150px;">Over flowing Contents 1</div>
+        <div style="height: 200px;">Over flowing Contents 2</div>
+        <div style="height: 350px;">Over flowing Contents 3</div>
+        <div style="height: 350px;">Over flowing Contents 4</div>
+        <div style="height: 350px;">Over flowing Contents 5</div>
+        <button>Save</button>
+      </div>
+      <template v-slot:footer>
+        <div style="text-align: center; font-weight: 600; font-size: 20px;">
+          <span>Footer</span>
+        </div>
+      </template>
+      </Modal>
+    \`,
+      methods: {
+        closeLoginModal() {
+          this.visible = false;
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...(k=(O=r.parameters)==null?void 0:O.docs)==null?void 0:k.source}}};var B,z,F;a.parameters={...a.parameters,docs:{...(B=a.parameters)==null?void 0:B.docs,source:{originalSource:`{
+  render: args => {
+    return {
+      components: {
+        Modal
+      },
+      setup() {
+        return {
+          args
+        };
+      },
+      template: \`
+      <Modal v-bind="args" @close-modal="closeLoginModal" fullScreenBreakpoint="sm">
+      <template v-slot:header>
+        <div style="text-align: center; font-weight: 600; font-size: 20px;">
+          <span>Try resizing browser</span>
+        </div>
+      </template>
+      <div class="sm:tw-h-96">
+        <div style="height: 150px;">Over flowing Contents 1</div>
+        <div style="height: 200px;">Over flowing Contents 2</div>
+        <div style="height: 350px;">Over flowing Contents 3</div>
+        <div style="height: 350px;">Over flowing Contents 4</div>
+        <div style="height: 350px;">Over flowing Contents 5</div>
+        <button>Save</button>
+      </div>
+      <template v-slot:footer>
+        <div style="text-align: center; font-weight: 600; font-size: 20px;">
+          <span>Footer</span>
+        </div>
+      </template>
+      </Modal>
+    \`,
+      methods: {
+        closeLoginModal() {
+          this.visible = false;
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...(F=(z=a.parameters)==null?void 0:z.docs)==null?void 0:F.source}}};var H,I,W;l.parameters={...l.parameters,docs:{...(H=l.parameters)==null?void 0:H.docs,source:{originalSource:`{
+  render: args => {
+    return {
+      components: {
+        Modal
+      },
+      setup() {
+        return {
+          args
+        };
+      },
+      template: \`
+      <Modal mode="image" v-bind="args" @close-modal="closeLoginModal">
+      <img alt="modal-img" src="https://source.unsplash.com/random/1200x1200"/>
+      </Modal>
+    \`,
+      methods: {
+        closeLoginModal() {
+          this.visible = false;
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...(W=(I=l.parameters)==null?void 0:I.docs)==null?void 0:W.source}}};const G=["Sample","OpenWithButton","Simple","MandatorySample","InnerOverflowSample","HeaderFooterSample","FullscreenBreakpointSample","Image"];export{a as FullscreenBreakpointSample,r as HeaderFooterSample,l as Image,s as InnerOverflowSample,o as MandatorySample,i as OpenWithButton,t as Sample,d as Simple,G as __namedExportsOrder,D as default};

package/.storybook-static/assets/Notice.stories-E5fzboZ_.js

@@ -0,0 +1,222 @@
+import{c as p,g as l,e as g,b as r,o as N,d as v}from"./iframe-ndUd-rmt.js";import{_ as y}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{B as o}from"./Button-CkyYO9sU.js";import"./ButtonPrimary-LDY_rMmo.js";import"./Icon-B_xzgi_Q.js";const f={props:{color:{type:String,required:!1,default:"primary"},direction:{type:String,required:!1,default:"top"},alignment:{type:String,required:!1,default:"left"},size:{type:String,required:!1,default:void 0},closable:{type:Boolean,required:!1,default:!1},isVisible:{type:Boolean,required:!1,default:void 0}}};function h(e,i,t,C,k,x){return N(),p("div",{class:r({"tw-relative tw-inline-flex tw-flex-col sm:tw-flex-row tw-w-full sm:tw-w-auto":!0,"tw-justify-center":t.alignment==="center","tw-justify-end":t.alignment==="right","tw-justify-start":t.alignment==="left"})},[l(e.$slots,"target"),g("div",{class:r({"sm:tw-absolute tw-static tw-w-full tw-z-10 tw-border tw-border-solid tw-border-grayscale-500 tw-rounded tw-bg-white tw-top-full tw-mt-4":!0,"sm:tw-top-auto sm:tw-mt-0":t.direction!=="bottom","sm:tw-bottom-full sm:tw-mb-4":t.direction==="top","sm:tw-left-full sm:tw-ml-4":t.direction==="right","sm:tw-right-full sm:tw-mr-4":t.direction==="left","tw-right-0":t.alignment==="right","tw-left-0":t.alignment==="left","sm:tw-w-64":t.size==="sm","sm:tw-w-72":t.size==="md","sm:tw-w-96":t.size==="lg","tw-hidden":!t.isVisible})},[l(e.$slots,"body")],2)],2)}const a=y(f,[["render",h]]);f.__docgenInfo={exportName:"default",displayName:"Notice",description:"",tags:{},props:[{name:"color",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'primary'"}},{name:"direction",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'top'"}},{name:"alignment",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'left'"}},{name:"size",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"closable",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"isVisible",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"undefined"}}],slots:[{name:"target"},{name:"body"}],sourceFiles:["/Users/kristianbonitz/Repos/fe-shared-lib/src/atoms/components/Notice/Notice.vue"]};const R={title:"Components/Notice",component:a},V=(e,i,t)=>({notice:{direction:e,isVisible:i},button:{label:"Click me",variant:"primary",size:"small-wide",onClick:t}}),B=v("StorybookNoticeBody",{components:{Button:o},template:`
+    <div class="tw-p-4">
+      <input type="text" class="tw-mb-2" />
+      <Button
+        label="Submit"
+        variant="primary"
+        size="small-wide"
+        :full-width="true"
+      />
+    </div>
+  `}),n=()=>({components:{Notice:a,Button:o,StorybookNoticeBodyComponent:B},data(){return{isTopNoticeVisible:!1,isRightNoticeVisible:!1,isBottomNoticeVisible:!1,isLeftNoticeVisible:!1,directions:["Top","Right","Bottom","Left"]}},computed:{onClickFunctions(){return{top:()=>{this.isTopNoticeVisible=!this.isTopNoticeVisible},right:()=>{this.isRightNoticeVisible=!this.isRightNoticeVisible},bottom:()=>{this.isBottomNoticeVisible=!this.isBottomNoticeVisible},left:()=>{this.isLeftNoticeVisible=!this.isLeftNoticeVisible}}},variants(){return this.directions.map(e=>{const i=e.toLowerCase();return V(i,this[`is${e}NoticeVisible`],this.onClickFunctions[i])})}},template:`
+      <div class="tw-flex tw-justify-center tw-mt-40">
+        <div class="tw-container tw-max-w-300">
+          <table class="tw-w-full">
+            <thead>
+            <tr>
+              <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Notice</th>
+              <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+            </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="(variant, index) in variants"
+                :key="index"
+                class="tw-bg-grayscale-200"
+              >
+                <td class="tw-p-4">
+                  <Notice
+                    :direction="variant.notice.direction"
+                    :is-visible="variant.notice.isVisible"
+                  >
+                    <template #target>
+                      <Button
+                        :label="variant.button.label"
+                        :variant="variant.button.variant"
+                        :size="variant.button.size"
+                        @on-click="variant.button.onClick"
+                      />
+                    </template>
+                    <template #body>
+                      <StorybookNoticeBodyComponent />
+                    </template>
+                  </Notice>
+                </td>
+                <td class="tw-p-4">
+                  <code
+                    class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900"
+                  >
+                    &lt;Notice direction="{{ variant.notice.direction }}" is-visible="{{ variant.notice.isVisible }}"&gt;
+
+                    &lt;template #target&gt;...&lt;/template&gt;
+
+                    &lt;template #body&gt;...&lt;/template&gt;
+                    &lt;/Notice&gt;
+                  </code>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    `}),s=()=>({components:{Notice:a,Button:o},data(){return{isNoticeVisible:!1}},template:`
+      <Notice
+        direction="bottom"
+        :is-visible="isNoticeVisible"
+        size="md"
+      >
+        <template #target>
+          <Button
+            :full-width="true"
+            label="Click me"
+            variant="primary"
+            size="small-wide"
+            @on-click="isNoticeVisible = !isNoticeVisible"
+          />
+        </template>
+        <template #body>
+          <div class="tw-p-4">
+            <input type="text" class="tw-mb-2 tw-w-full" />
+            <Button
+              label="Submit"
+              variant="primary"
+              size="small-wide"
+              :full-width="true"
+            />
+          </div>
+        </template>
+      </Notice>
+    `});var c,d,m;n.parameters={...n.parameters,docs:{...(c=n.parameters)==null?void 0:c.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Notice,
+      Button,
+      StorybookNoticeBodyComponent
+    },
+    data() {
+      return {
+        isTopNoticeVisible: false,
+        isRightNoticeVisible: false,
+        isBottomNoticeVisible: false,
+        isLeftNoticeVisible: false,
+        directions: ['Top', 'Right', 'Bottom', 'Left']
+      };
+    },
+    computed: {
+      onClickFunctions() {
+        return {
+          top: () => {
+            this.isTopNoticeVisible = !this.isTopNoticeVisible;
+          },
+          right: () => {
+            this.isRightNoticeVisible = !this.isRightNoticeVisible;
+          },
+          bottom: () => {
+            this.isBottomNoticeVisible = !this.isBottomNoticeVisible;
+          },
+          left: () => {
+            this.isLeftNoticeVisible = !this.isLeftNoticeVisible;
+          }
+        };
+      },
+      variants() {
+        return this.directions.map(direction => {
+          const directionLowerCase = direction.toLowerCase();
+          return generateNoticeVariant(directionLowerCase, this[\`is\${direction}NoticeVisible\`], this.onClickFunctions[directionLowerCase]);
+        });
+      }
+    },
+    template: \`
+      <div class="tw-flex tw-justify-center tw-mt-40">
+        <div class="tw-container tw-max-w-300">
+          <table class="tw-w-full">
+            <thead>
+            <tr>
+              <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Notice</th>
+              <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+            </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="(variant, index) in variants"
+                :key="index"
+                class="tw-bg-grayscale-200"
+              >
+                <td class="tw-p-4">
+                  <Notice
+                    :direction="variant.notice.direction"
+                    :is-visible="variant.notice.isVisible"
+                  >
+                    <template #target>
+                      <Button
+                        :label="variant.button.label"
+                        :variant="variant.button.variant"
+                        :size="variant.button.size"
+                        @on-click="variant.button.onClick"
+                      />
+                    </template>
+                    <template #body>
+                      <StorybookNoticeBodyComponent />
+                    </template>
+                  </Notice>
+                </td>
+                <td class="tw-p-4">
+                  <code
+                    class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900"
+                  >
+                    &lt;Notice direction="{{ variant.notice.direction }}" is-visible="{{ variant.notice.isVisible }}"&gt;
+
+                    &lt;template #target&gt;...&lt;/template&gt;
+
+                    &lt;template #body&gt;...&lt;/template&gt;
+                    &lt;/Notice&gt;
+                  </code>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    \`
+  };
+}`,...(m=(d=n.parameters)==null?void 0:d.docs)==null?void 0:m.source}}};var u,b,w;s.parameters={...s.parameters,docs:{...(u=s.parameters)==null?void 0:u.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Notice,
+      Button
+    },
+    data() {
+      return {
+        isNoticeVisible: false
+      };
+    },
+    template: \`
+      <Notice
+        direction="bottom"
+        :is-visible="isNoticeVisible"
+        size="md"
+      >
+        <template #target>
+          <Button
+            :full-width="true"
+            label="Click me"
+            variant="primary"
+            size="small-wide"
+            @on-click="isNoticeVisible = !isNoticeVisible"
+          />
+        </template>
+        <template #body>
+          <div class="tw-p-4">
+            <input type="text" class="tw-mb-2 tw-w-full" />
+            <Button
+              label="Submit"
+              variant="primary"
+              size="small-wide"
+              :full-width="true"
+            />
+          </div>
+        </template>
+      </Notice>
+    \`
+  };
+}`,...(w=(b=s.parameters)==null?void 0:b.docs)==null?void 0:w.source}}};const T=["Sample","Mobile"];export{s as Mobile,n as Sample,T as __namedExportsOrder,R as default};

package/.storybook-static/assets/NumberStepper-Blffv09R.css

@@ -0,0 +1 @@
+input[data-v-e5f3dd60]::-webkit-outer-spin-button,input[data-v-e5f3dd60]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.border-radius-none[data-v-e5f3dd60]{border-radius:0!important}

package/.storybook-static/assets/NumberStepper.stories-DxFzm0J9.js

@@ -0,0 +1,64 @@
+import{c,h as r,e as g,C as u,G as m,b as d,i as T,a as N,o as S}from"./iframe-ndUd-rmt.js";import{B as p}from"./Button-CkyYO9sU.js";import{_ as P}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./ButtonPrimary-LDY_rMmo.js";import"./Icon-B_xzgi_Q.js";const v={components:{Button:p},props:{id:{type:String,default:()=>"1"},modelValue:{type:Number,default:void 0},min:{type:Number,default:1},max:{type:Number,default:void 0},dataAttribute:{type:String,default:null},disabled:{type:Boolean,default:void 0},disableManualInput:{type:Boolean,default:void 0},size:{type:String,default:"medium"},inputClasses:{type:String,default:void 0},containerClass:{type:String,default:void 0},fullHeight:{type:Boolean,default:!1},timerToMinimum:{type:Number,default:!1}},setup(t){const e=`js-number-stepper-${t.id}`;return{numberStepperRef:e,[e]:T(null)}},data(){return{num:null,longPress:null,longPressDelayTimeout:null,longPressTimeout:null,longPressInterval:null,resetToMinTimer:null}},computed:{buttonStyle(){let t="";return this.size==="medium"&&(t="!tw-p-4"),t},buttonIconSize(){let t="xs";return this.size==="medium"&&(t="sm"),t},number:{get(){return parseInt(this.num,10)},set(t){this.num=t}}},watch:{modelValue(t){this.number=t}},created(){this.DELAY_BEFORE_LONG_PRESS_START=300,this.LONG_PRESS_DELAY=1e3,this.LONG_PRESS_INTERVAL_DELAY=100,this.LONG_PRESS_AMOUNT=5,this.FOCUSED_EVENT="focus",this.BLUR_EVENT="blur"},mounted(){this.number=this.modelValue,this.addDataAttribute()},beforeUnmount(){this.clearLongPressTimers(),this.clearResetToMinTimer()},methods:{addDataAttribute(){this.dataAttribute&&this.$refs[this.numberStepperRef].setAttribute(this.dataAttribute,"")},changeNumber(t,e){this.disabled||(t==="up"?this.increment(e):this.decrement(e))},increment(t){const e=typeof t=="number"?t:1;(!this.max||this.max&&this.number+e<=this.max)&&(this.number+=e),this.max&&this.number+e>this.max&&(this.number=this.max),this.$emit("update:modelValue",this.number),this.$emit("input",this.number)},decrement(t){const e=typeof t=="number"?t:1;this.number-e>=this.min?this.number-=e:this.number=this.min,this.$emit("update:modelValue",this.number),this.$emit("input",this.number)},onMouseWheel(t){this.disabled||(t.preventDefault(),t.deltaY<0?this.increment():this.decrement())},onMouseDown(t){if(!this.disabled){const e=this;let s=1;e.changeNumber(t),e.longPressDelayTimeout=setTimeout(()=>{e.longPressInterval=setInterval(()=>{e.changeNumber(t,s)},e.LONG_PRESS_INTERVAL_DELAY),e.longPressTimeout=setTimeout(()=>{s=e.LONG_PRESS_AMOUNT},e.LONG_PRESS_DELAY)},e.DELAY_BEFORE_LONG_PRESS_START)}},clearLongPressTimers(t){t&&t.preventDefault(),clearTimeout(this.longPressDelayTimeout),clearTimeout(this.longPressTimeout),clearInterval(this.longPressInterval),this.longPressDelayTimeout=null,this.longPressTimeout=null,this.longPressInterval=null,this.longPress=!1},onArrowDown(t){if(!this.disabled){const e=this;e.longPress?e.changeNumber(t,e.LONG_PRESS_AMOUNT):e.changeNumber(t),e.longPressTimeout||(e.longPressTimeout=setTimeout(()=>{e.longPress=!0},e.LONG_PRESS_DELAY))}},onInput(t){if(!this.disabled){const e=parseFloat(t.target.value);let s=0;e>this.max?s=this.max:Number.isNaN(e)?s=0:s=e,this.number=s,t.target.value=s,this.$emit("update:modelValue",this.number),this.$emit("input",this.number),this.startResetToMinTimer(t)}},checkLimit(t){let e=0;t.target.value===""||Number.isNaN(this.number)||this.number<=this.min?e=this.min:this.number>this.max?e=this.max:e=this.number,this.number=e,t.target.value=e,this.$emit("update:modelValue",this.number),this.$emit("input",this.number)},startResetToMinTimer(t){this.clearResetToMinTimer(),this.timerToMinimum&&(this.resetToMinTimer=setTimeout(()=>{this.checkLimit(t)},this.timerToMinimum))},clearResetToMinTimer(){this.resetToMinTimer&&(clearTimeout(this.resetToMinTimer),this.resetToMinTimer=null)}}},M=["value","disabled"];function V(t,e,s,w,L,n){const a=N("Button");return S(),c("div",{class:d(["tw-flex tw-items-stretch",s.containerClass])},[r(a,{variant:"flat",icon:"minus","icon-size":n.buttonIconSize,class:"tw-rounded-r-none",classes:n.buttonStyle,rounded:!1,"rounded-left":!0,"full-height":s.fullHeight,disabled:s.disabled,onMousedown:[e[0]||(e[0]=u(i=>n.onMouseDown("down"),["left"])),u(n.clearLongPressTimers,["right"]),u(n.clearLongPressTimers,["middle"])],onMouseup:n.clearLongPressTimers,onMouseleave:n.clearLongPressTimers,onTouchstart:e[1]||(e[1]=i=>n.onMouseDown("down")),onTouchend:e[2]||(e[2]=i=>n.clearLongPressTimers(i)),onTouchcancel:e[3]||(e[3]=i=>n.clearLongPressTimers(i))},null,8,["icon-size","classes","full-height","disabled","onMousedown","onMouseup","onMouseleave"]),g("input",{ref:w.numberStepperRef,class:d([s.inputClasses,"border-radius-none tw-w-full tw-text-center tw-border tw-border-solid tw-border-grayscale-500 tw-border-l-0 tw-border-r-0 tw-rounded-none"]),type:"text",value:n.number,pattern:"[0-9]",disabled:s.disabled||s.disableManualInput,onWheel:e[4]||(e[4]=(...i)=>n.onMouseWheel&&n.onMouseWheel(...i)),onInput:e[5]||(e[5]=u((...i)=>n.onInput&&n.onInput(...i),["stop"])),onKeyup:e[6]||(e[6]=(...i)=>n.clearLongPressTimers&&n.clearLongPressTimers(...i)),onKeydown:[e[7]||(e[7]=m(i=>n.onArrowDown("up"),["up"])),e[8]||(e[8]=m(i=>n.onArrowDown("down"),["down"]))],onFocus:e[9]||(e[9]=i=>t.$emit(t.FOCUSED_EVENT)),onBlur:e[10]||(e[10]=u((...i)=>n.checkLimit&&n.checkLimit(...i),["stop"]))},null,42,M),r(a,{variant:"flat",rounded:!1,"rounded-right":!0,"full-height":s.fullHeight,icon:"plus","icon-size":n.buttonIconSize,class:"tw-rounded-l-none",classes:n.buttonStyle,disabled:s.disabled,onMousedown:[e[11]||(e[11]=u(i=>n.onMouseDown("up"),["left"])),u(n.clearLongPressTimers,["right"]),u(n.clearLongPressTimers,["middle"])],onMouseup:n.clearLongPressTimers,onMouseleave:n.clearLongPressTimers,onTouchstart:e[12]||(e[12]=i=>n.onMouseDown("up")),onTouchend:e[13]||(e[13]=i=>n.clearLongPressTimers(i)),onTouchcancel:e[14]||(e[14]=i=>n.clearLongPressTimers(i))},null,8,["full-height","icon-size","classes","disabled","onMousedown","onMouseup","onMouseleave"])],2)}const h=P(v,[["render",V],["__scopeId","data-v-e5f3dd60"]]);v.__docgenInfo={exportName:"default",displayName:"NumberStepper",description:"",tags:{},props:[{name:"id",type:{name:"string"},defaultValue:{func:!0,value:"() => '1'"}},{name:"modelValue",type:{name:"number"},defaultValue:{func:!1,value:"undefined"}},{name:"min",type:{name:"number"},defaultValue:{func:!1,value:"1"}},{name:"max",type:{name:"number"},defaultValue:{func:!1,value:"undefined"}},{name:"dataAttribute",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"undefined"}},{name:"disableManualInput",type:{name:"boolean"},defaultValue:{func:!1,value:"undefined"}},{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"'medium'"}},{name:"inputClasses",type:{name:"string"},defaultValue:{func:!1,value:"undefined"}},{name:"containerClass",type:{name:"string"},defaultValue:{func:!1,value:"undefined"}},{name:"fullHeight",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"timerToMinimum",type:{name:"number"},defaultValue:{func:!1,value:"false"}}],events:[{name:"<undefined>"},{name:"update:modelValue",type:{names:["undefined"]}},{name:"input",type:{names:["undefined"]}}],sourceFiles:["/Users/kristianbonitz/Repos/fe-shared-lib/src/atoms/components/NumberStepper/NumberStepper.vue"]};const A={title:"Components/Number Stepper",component:h},y={components:{NumberStepper:h,Button:p},data(){return{numberValue:20}}},l=()=>({...y,template:`
+      <div>
+        <div>Full width min 12 max 128</div>
+        <NumberStepper v-model="numberValue" id="id1" :min="12" :max="128" :disabled="false" :timer-to-minimum="750" />
+        <div class="tw-mt-4 tw-w-64">
+          <div>Fixed container width</div>
+          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
+        </div>
+        <div class="tw-mt-4 tw-w-64">
+          <div>Disabled</div>
+          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="true" />
+        </div>
+        <div class="tw-mt-4 tw-w-64">
+          <div>Disable Manual Input but allow step down and up button</div>
+          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disableManualInput="true" />
+        </div>
+        <div class="tw-mt-4 tw-w-64">
+          <div>Normal size</div>
+          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
+        </div>
+        <div class="tw-mt-4 tw-w-64">
+          <div>Bigger size</div>
+          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
+        </div>
+        <div class="tw-h-8 tw-mt-4 tw-w-64">
+          <div> Outer size dependent</div>
+          <NumberStepper size="xs" :full-height="true" :input-classes="'tw-min-w-12'" v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
+        </div>
+      </div>
+    `});var o,b,f;l.parameters={...l.parameters,docs:{...(o=l.parameters)==null?void 0:o.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <div>
+        <div>Full width min 12 max 128</div>
+        <NumberStepper v-model="numberValue" id="id1" :min="12" :max="128" :disabled="false" :timer-to-minimum="750" />
+        <div class="tw-mt-4 tw-w-64">
+          <div>Fixed container width</div>
+          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
+        </div>
+        <div class="tw-mt-4 tw-w-64">
+          <div>Disabled</div>
+          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="true" />
+        </div>
+        <div class="tw-mt-4 tw-w-64">
+          <div>Disable Manual Input but allow step down and up button</div>
+          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disableManualInput="true" />
+        </div>
+        <div class="tw-mt-4 tw-w-64">
+          <div>Normal size</div>
+          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
+        </div>
+        <div class="tw-mt-4 tw-w-64">
+          <div>Bigger size</div>
+          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
+        </div>
+        <div class="tw-h-8 tw-mt-4 tw-w-64">
+          <div> Outer size dependent</div>
+          <NumberStepper size="xs" :full-height="true" :input-classes="'tw-min-w-12'" v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
+        </div>
+      </div>
+    \`
+  };
+}`,...(f=(b=l.parameters)==null?void 0:b.docs)==null?void 0:f.source}}};const z=["Primary"];export{l as Primary,z as __namedExportsOrder,A as default};

package/.storybook-static/assets/PaymentConfigList-BpUMV6cp.css

@@ -0,0 +1 @@
+.top-class{top:3rem}@media(min-width:640px){.status-alignment{flex-direction:row;align-items:center}}@media(max-width:640px){.status-alignment{flex-direction:column}}.stripe-acct{font-size:.7rem;opacity:.5}