@allakando/allakando-web-ui/dist/storybook/assets/loading.stories-4d7f7ff4.js

Allakando's web component library

import"./DialogManager-abca015e.js";import{i}from"./StyleInjection-7d750a8d.js";const r=`# Loading

Allakando's design system loading states can be imported using loading.css.

After applying the stylesheets you will be able to set elements into a loading state as well as a disabled state by setting the aria-busy and aria-disabled attributes to true.

- aria-busy will create a spinner using the :before selector of an element. The size of the spinner will be relative to the font size of the parent, and the color will be determined from the same. 
- aria-disabled will gray out an entire element using the :after selector by placing a large container on top of the parent element. It will also disable all pointer-events for the element.
- If used together the spinner will be made position absolute and placed in the center of the parent element. Note that this will cause the parent element to be set to position relative which could cause issues in certain scenarios.`,l={title:"Style Injection/Loading",component:"Loading",tags:["autodocs"],parameters:{docs:{description:{component:r}}}},e=()=>(window.AllakandoWebUI={injectStyle:i},`
        <script>
            AllakandoWebUI.injectStyle({
                loading: true
            })
        <\/script>
        Aria Busy
        <br />
        <div style="min-height:300px;background-color:#323232;" aria-busy="true"></div>
        <br /><br />
        <ako-button><div aria-busy="true">A loading Button...</div></ako-button>
        <br /><br />
        Aria Disabled
        <br />
        <div style="min-height:300px;background-color:#323232;" aria-disabled="true"></div>
        <br /><br />
        <ako-button aria-disabled="true">A loading Button...</ako-button>
        <br /><br />
        Aria Busy and Aria Disabled
        <br />
        <div style="min-height:300px;background-color:#323232;" aria-busy="true" aria-disabled="true"></div>
        <br /><br />
        <ako-button aria-busy="true" aria-disabled="true">A loading Button...</ako-button>
    `);var t,a,n;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`() => {
  window.AllakandoWebUI = {
    injectStyle
  };
  return \`
        <script>
            AllakandoWebUI.injectStyle({
                loading: true
            })
        <\/script>
        Aria Busy
        <br />
        <div style="min-height:300px;background-color:#323232;" aria-busy="true"></div>
        <br /><br />
        <ako-button><div aria-busy="true">A loading Button...</div></ako-button>
        <br /><br />
        Aria Disabled
        <br />
        <div style="min-height:300px;background-color:#323232;" aria-disabled="true"></div>
        <br /><br />
        <ako-button aria-disabled="true">A loading Button...</ako-button>
        <br /><br />
        Aria Busy and Aria Disabled
        <br />
        <div style="min-height:300px;background-color:#323232;" aria-busy="true" aria-disabled="true"></div>
        <br /><br />
        <ako-button aria-busy="true" aria-disabled="true">A loading Button...</ako-button>
    \`;
}`,...(n=(a=e.parameters)==null?void 0:a.docs)==null?void 0:n.source}}};const d=["Template"];export{e as Template,d as __namedExportsOrder,l as default};