import{g as h,x as l}from"./iframe-CMPv_g6-.js";import{o as m}from"./style-map-968Ye5qo.js";import"./preload-helper-PPVm8Dsz.js";const{events:y,args:w,argTypes:a}=h("btu-widget"),$={title:"Components/Widget",component:"btu-widget",tags:["autodocs"],parameters:{docs:{subtitle:"btu-widget",description:{component:`
<h3>When to use:</h3>
<ul>
  <li>To display content in a structured widget layout</li>
  <li>When you need separate header, body, and footer regions</li>
  <li>For component composition that requires semantic HTML authoring</li>
</ul>
<h3>Use Cases in the CMS:</h3>
<ul>
  <li>Dashboard Widgets</li>
  <li>Dashboard Quick Start</li>
  <li>Content Edit History Panel</li>
  <li>Global search filters</li>
</ul>
        `}},actions:{handles:y},controls:{expanded:!0}},args:{...w,heading:"Widget Title",collapsible:!0},argTypes:{...a,"--header-background":{table:{disable:!0}},"--widget-background":{table:{disable:!0}},"--widget-border":{table:{disable:!0}},isFullscreen:{table:{disable:!0}},heading:{...a.heading,control:{type:"text"},description:"Heading text displayed in the header."},collapsible:{...a.collapsible,control:{type:"boolean"},description:"Whether the widget can be collapsed/expanded. Adds chevron toggle button."},collapsed:{...a.collapsed,control:{type:"boolean"},description:"Whether the widget is currently collapsed (body and footer hidden)."},fullscreenable:{...a.fullscreenable,control:{type:"boolean"},description:"Whether the widget can enter fullscreen mode. Adds fullscreen toggle button."},customWidgetBackground:{name:"--widget-background",control:{type:"color"},description:"Widget background color (default: #ffffff)",table:{category:"css properties"}},customWidgetBorder:{name:"--widget-border",control:{type:"text"},description:'Widget border (e.g., "2px solid #ccc", default: "1px solid #e0e0e0")',table:{category:"css properties"}},customHeaderBackground:{name:"--header-background",control:{type:"color"},description:"Header background color (default: transparent)",table:{category:"css properties"}}},render:e=>{const t={};return e.customWidgetBackground&&(t["--widget-background"]=e.customWidgetBackground),e.customWidgetBorder&&(t["--widget-border"]=e.customWidgetBorder),e.customHeaderBackground&&(t["--header-background"]=e.customHeaderBackground),l`
      <btu-widget
        .heading=${e.heading??""}
        ?collapsible=${e.collapsible}
        ?collapsed=${e.collapsed}
        ?fullscreenable=${e.fullscreenable}
        style=${m(t)}
      >
        <button
          class="btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs"
          slot="controls"
        >
          <btu-icon symbol="ellipsis"></btu-icon>
        </button>
        <div>This is the main body content of the widget.</div>
      </btu-widget>
    `}},i={args:{fullscreenable:!0}},d={render:e=>l`
    <btu-widget
      .heading=${e.heading??"Widget with Controls"}
      ?collapsible=${e.collapsible??!0}
      ?collapsed=${e.collapsed}
      ?fullscreenable=${e.fullscreenable}
    >
      <div class="action-bar flex justify-between" slot="footer">
        <button class="btu-button btu-button-error">Delete</button>
        <button class="btu-button btu-button-success">Save</button>
      </div>
      <div>Body content with heading and an action bar in the footer.</div>
    </btu-widget>
  `,parameters:{docs:{description:{story:"Widget demonstrating how easy it is to add an action bar component to the footer of a widget."}}}},c={render:e=>l`
    <btu-widget
      .heading=${e.heading??"Fully Themed Widget"}
      ?collapsible=${e.collapsible}
      ?collapsed=${e.collapsed}
      ?fullscreenable=${e.fullscreenable}
      style="--widget-background: oklch(var(--btu-theme-purple-100)); --widget-border: 1px solid oklch(var(--btu-theme-purple-800)); --header-background: oklch(var(--btu-theme-purple-300));"
    >
      <button class="btu-button btu-button-purple" slot="controls">Action</button>
      <div>
        <p>Customized!</p>
      </div>
      <div slot="footer">
        <small>Footer content (hidden when collapsed)</small>
      </div>
    </btu-widget>
  `,parameters:{docs:{description:{story:"Widget with complete theming using all available CSS variables. Demonstrates full control over widget and header appearance."}}}},u={args:{collapsible:!0,collapsed:!0},render:e=>l`
    <btu-widget
      .heading=${e.heading??"Initially Collapsed"}
      ?collapsible=${e.collapsible??!0}
      ?collapsed=${e.collapsed??!0}
      ?fullscreenable=${e.fullscreenable}
    >
      <div style="padding: 1rem;">
        <p>This widget starts in a collapsed state.</p>
        <p>Click the chevron to expand and see this content.</p>
      </div>
    </btu-widget>
  `,parameters:{docs:{description:{story:"Widget that starts in a collapsed state."}}}},b={render:e=>{const t=["pencil","gear","trash","star","heart","bell"];let p=0;const g=n=>{const o=document.createElement("btu-icon");o.setAttribute("symbol",t[p%t.length]),o.setAttribute("slot","controls"),p++,n.appendChild(o);const r=document.createElement("p");r.textContent="This paragraph was added dynamically and automatically redistributed to the body!",r.style.color="#16a34a",r.style.fontWeight="600",n.appendChild(r);const s=document.createElement("button");s.className="btu-button btu-button-purple",s.textContent="Button",s.setAttribute("slot","footer"),n.appendChild(s)};return l`
      <div style="display: flex; flex-direction: column; gap: 1rem;">
        <button
          class="btu-button btu-button-primary"
          @click="${n=>{const o=n.target.parentElement?.querySelector("btu-widget");o&&g(o)}}"
        >
          Add Dynamic Content
        </button>
        <btu-widget
          .heading=${e.heading??"Dynamic Content Demo"}
          ?collapsible=${e.collapsible??!0}
          ?collapsed=${e.collapsed}
          ?fullscreenable=${e.fullscreenable}
        >
          <button class="btu-button btu-button-primary" slot="controls">Initial Button</button>
          <div style="padding: 1rem;">
            <p>Click the "Add Dynamic Content" button above to demonstrate:</p>
            <ul>
              <li>MutationObserver detects new child elements</li>
              <li>New <code>slot="controls"</code> icon is redistributed to header actions</li>
              <li>New paragraph (no slot) is redistributed to body</li>
              <li>New <code>slot="footer"</code> button is redistributed to footer</li>
            </ul>
          </div>
        </btu-widget>
      </div>
    `},parameters:{docs:{description:{story:"Demonstrates the Manager Pattern's MutationObserver: Content added dynamically is automatically redistributed to the correct containers based on slot attributes."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
  args: {
    fullscreenable: true
  }
}`,...i.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
  render: args => html\`
    <btu-widget
      .heading=\${args.heading ?? 'Widget with Controls'}
      ?collapsible=\${args.collapsible ?? true}
      ?collapsed=\${args.collapsed}
      ?fullscreenable=\${args.fullscreenable}
    >
      <div class="action-bar flex justify-between" slot="footer">
        <button class="btu-button btu-button-error">Delete</button>
        <button class="btu-button btu-button-success">Save</button>
      </div>
      <div>Body content with heading and an action bar in the footer.</div>
    </btu-widget>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Widget demonstrating how easy it is to add an action bar component to the footer of a widget.'
      }
    }
  }
}`,...d.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
  render: args => html\`
    <btu-widget
      .heading=\${args.heading ?? 'Fully Themed Widget'}
      ?collapsible=\${args.collapsible}
      ?collapsed=\${args.collapsed}
      ?fullscreenable=\${args.fullscreenable}
      style="--widget-background: oklch(var(--btu-theme-purple-100)); --widget-border: 1px solid oklch(var(--btu-theme-purple-800)); --header-background: oklch(var(--btu-theme-purple-300));"
    >
      <button class="btu-button btu-button-purple" slot="controls">Action</button>
      <div>
        <p>Customized!</p>
      </div>
      <div slot="footer">
        <small>Footer content (hidden when collapsed)</small>
      </div>
    </btu-widget>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Widget with complete theming using all available CSS variables. Demonstrates full control over widget and header appearance.'
      }
    }
  }
}`,...c.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
  args: {
    collapsible: true,
    collapsed: true
  },
  render: args => html\`
    <btu-widget
      .heading=\${args.heading ?? 'Initially Collapsed'}
      ?collapsible=\${args.collapsible ?? true}
      ?collapsed=\${args.collapsed ?? true}
      ?fullscreenable=\${args.fullscreenable}
    >
      <div style="padding: 1rem;">
        <p>This widget starts in a collapsed state.</p>
        <p>Click the chevron to expand and see this content.</p>
      </div>
    </btu-widget>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Widget that starts in a collapsed state.'
      }
    }
  }
}`,...u.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
  render: args => {
    const icons = ['pencil', 'gear', 'trash', 'star', 'heart', 'bell'];
    let iconIndex = 0;
    const addContent = (widgetEl: HTMLElement) => {
      const icon = document.createElement('btu-icon');
      icon.setAttribute('symbol', icons[iconIndex % icons.length]);
      icon.setAttribute('slot', 'controls');
      iconIndex++;
      widgetEl.appendChild(icon);
      const newParagraph = document.createElement('p');
      newParagraph.textContent = 'This paragraph was added dynamically and automatically redistributed to the body!';
      newParagraph.style.color = '#16a34a';
      newParagraph.style.fontWeight = '600';
      widgetEl.appendChild(newParagraph);
      const newButton = document.createElement('button');
      newButton.className = 'btu-button btu-button-purple';
      newButton.textContent = 'Button';
      newButton.setAttribute('slot', 'footer');
      widgetEl.appendChild(newButton);
    };
    return html\`
      <div style="display: flex; flex-direction: column; gap: 1rem;">
        <button
          class="btu-button btu-button-primary"
          @click="\${(e: Event) => {
      const widget = (e.target as HTMLElement).parentElement?.querySelector('btu-widget');
      if (widget) addContent(widget);
    }}"
        >
          Add Dynamic Content
        </button>
        <btu-widget
          .heading=\${args.heading ?? 'Dynamic Content Demo'}
          ?collapsible=\${args.collapsible ?? true}
          ?collapsed=\${args.collapsed}
          ?fullscreenable=\${args.fullscreenable}
        >
          <button class="btu-button btu-button-primary" slot="controls">Initial Button</button>
          <div style="padding: 1rem;">
            <p>Click the "Add Dynamic Content" button above to demonstrate:</p>
            <ul>
              <li>MutationObserver detects new child elements</li>
              <li>New <code>slot="controls"</code> icon is redistributed to header actions</li>
              <li>New paragraph (no slot) is redistributed to body</li>
              <li>New <code>slot="footer"</code> button is redistributed to footer</li>
            </ul>
          </div>
        </btu-widget>
      </div>
    \`;
  },
  parameters: {
    docs: {
      description: {
        story: "Demonstrates the Manager Pattern's MutationObserver: Content added dynamically is automatically redistributed to the correct containers based on slot attributes."
      }
    }
  }
}`,...b.parameters?.docs?.source}}};const k=["Default","WithFooter","CustomizedWithCSSVariables","CollapsedByDefault","DynamicContentRedistribution"];export{u as CollapsedByDefault,c as CustomizedWithCSSVariables,i as Default,b as DynamicContentRedistribution,d as WithFooter,k as __namedExportsOrder,$ as default};
