@trendyol/baklava 3.3.0-beta.23 → 3.3.0-beta.25

package/dist/components/notification/bl-notification.stories.js

@@ -1,9 +1,9 @@
-import{a as s}from"../../chunk-HSVSMABT.js";import{a as r}from"../../chunk-DINNT5P2.js";import{b as t}from"../../chunk-4OT5AMS5.js";import{e as n}from"../../chunk-IZ2LK5GK.js";var A={title:"Components/Notification",component:"bl-notification",parameters:{chromatic:{viewports:[1e3]}},decorators:[s],argTypes:{duration:{control:"number",description:"Duration in seconds",defaultValue:7},caption:{control:"text",description:"Caption of the notification"},description:{control:"text",description:"Description of the notification. Required."},icon:{control:"text",defaultValue:"true",description:"Icon of the notification. If provided with a string, it will be used as an icon name. If provided with a boolean, it will use the default icon or no icon."},variant:{options:["info","warning","success","error"],default:"info",control:{type:"select"},description:"Variant of the notification"},permanent:{control:"boolean",defaultValue:!1,description:"If true, the notification will not have duration and will be removed when the user clicks on the close button."},primaryAction:{control:"object",description:"Primary action of the notification. onClick and label properties are required."},secondaryAction:{control:"object",description:"Secondary action of the notification. onClick and label properties are required."}},args:{noAnimation:!1,duration:20,caption:"Notification Caption",description:"Notification Description",icon:"true",variant:"info",permanent:!1,primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}}},g=A,a=i=>{let o=document.querySelector("bl-notification");return o==null?void 0:o.addNotification(i)},b=i=>JSON.stringify(i,null,6),e=i=>t`
+import{a as p}from"../../chunk-HSVSMABT.js";import{a as s}from"../../chunk-DINNT5P2.js";import{b as t}from"../../chunk-4OT5AMS5.js";import{e}from"../../chunk-IZ2LK5GK.js";var A={title:"Components/Notification",component:"bl-notification",parameters:{chromatic:{viewports:[1e3]}},decorators:[p],argTypes:{duration:{control:"number",description:"Duration in seconds",defaultValue:7},caption:{control:"text",description:"Caption of the notification"},description:{control:"text",description:"Description of the notification. Required."},icon:{control:"text",defaultValue:"true",description:"Icon of the notification. If provided with a string, it will be used as an icon name. If provided with a boolean, it will use the default icon or no icon."},variant:{options:["info","warning","success","error"],default:"info",control:{type:"select"},description:"Variant of the notification"},permanent:{control:"boolean",defaultValue:!1,description:"If true, the notification will not have duration and will be removed when the user clicks on the close button."},primaryAction:{control:"object",description:"Primary action of the notification. onClick and label properties are required."},secondaryAction:{control:"object",description:"Secondary action of the notification. onClick and label properties are required."}},args:{noAnimation:!1,duration:20,caption:"Notification Caption",description:"Notification Description",icon:"true",variant:"info",permanent:!1,primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}}},k=A,c=i=>{let o=document.querySelector("bl-notification");return o==null?void 0:o.addNotification(i)},b=i=>JSON.stringify(i,null,6),r=i=>t`
   <bl-notification
     ?no-animation=${i.noAnimation}
-    duration=${r(i.duration)}
+    duration=${s(i.duration)}
   ></bl-notification>
-`,f,c=(i,o="Add Notification")=>{let l=o.toLowerCase().replace(/\s/g,"-");return t(f||(f=n([`
+`,d,n=(i,o="Add Notification")=>{let a=o.toLowerCase().replace(/\s/g,"-");return t(d||(d=e([`
     <bl-button id=`,">",`</bl-button>
 
     <script>
@@ -16,7 +16,7 @@ import{a as s}from"../../chunk-HSVSMABT.js";import{a as r}from"../../chunk-DINNT
         });
       })();
     <\/script>
-  `])),l,o,l,b(i))},S={render(i){return t`${e(i)} ${c(i)} `},args:{duration:60,primaryAction:void 0,secondaryAction:void 0},play:({args:i})=>{a(i),a({...i,variant:"success"}),a({...i,variant:"warning"}),a({...i,variant:"error"})}},d,k={render(i){return t(d||(d=n([`
+  `])),a,o,a,b(i))},E={render(i){return t`${r(i)} ${n(i)} `},args:{duration:60,primaryAction:void 0,secondaryAction:void 0},play:({args:i})=>{c(i),c({...i,variant:"success"}),c({...i,variant:"warning"}),c({...i,variant:"error"})}},f,g={render(i){return t(f||(f=e([`
       `,`
       <bl-button>Remove Notification</bl-button>
 
@@ -36,7 +36,7 @@ import{a as s}from"../../chunk-HSVSMABT.js";import{a as r}from"../../chunk-DINNT
           });
         })();
       <\/script>
-    `])),e(i))}},p,E={render(i){return t(p||(p=n([`
+    `])),r(i))}},m,w={render(i){return t(m||(m=e([`
       `,`
       <bl-button>Remove Notifications</bl-button>
 
@@ -70,7 +70,7 @@ import{a as s}from"../../chunk-HSVSMABT.js";import{a as r}from"../../chunk-DINNT
           });
         })();
       <\/script>
-    `])),e(i))}},m,h={render(i){return t(m||(m=n([`
+    `])),r(i))}},u,$={render(i){return t(u||(u=e([`
       `,`
       <script>
         (function () {
@@ -89,7 +89,7 @@ import{a as s}from"../../chunk-HSVSMABT.js";import{a as r}from"../../chunk-DINNT
           });
         })();
       <\/script>
-    `])),e(i))}},u,w={render(i){return t(u||(u=n([`
+    `])),r(i))}},y,h={render(i){return t(y||(y=e([`
       `,`
       <script>
         (function () {
@@ -114,7 +114,7 @@ import{a as s}from"../../chunk-HSVSMABT.js";import{a as r}from"../../chunk-DINNT
           });
         })();
       <\/script>
-    `])),e(i))}},y,$={render(i){return t(y||(y=n([`
+    `])),r(i))}},N,x={render(i){return t(N||(N=e([`
       `,`
       <script>
         (function () {
@@ -139,193 +139,27 @@ import{a as s}from"../../chunk-HSVSMABT.js";import{a as r}from"../../chunk-DINNT
           });
         })();
       <\/script>
-    `])),e(i))},play:()=>{a({caption:"Notification Caption",description:"Notification Description",permanent:!0,primaryAction:{label:"Primary Action",onClick:i=>{i.remove()}},secondaryAction:{label:"Secondary Action",onClick:i=>{i.remove()}}})}},L={render(i){return t` ${e(i)} ${c(i)} `},args:{permanent:!0},play:({args:i})=>{a(i)}},P={render(i){return t`
-      ${e(i)}
-      ${c({caption:"Notification Caption",description:"Notification Variant: info",permanent:!0,variant:"info",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Info")}
-      ${c({caption:"Notification Caption",description:"Notification Variant: success",permanent:!0,variant:"success",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Success")}
-      ${c({caption:"Notification Caption",description:"Notification Variant: warning",permanent:!0,variant:"warning",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Warning")}
-      ${c({caption:"Notification Caption",description:"Notification Variant: error",permanent:!0,variant:"error",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Error")}
-    `},play:()=>{let i=["info","success","warning","error"];for(let o of i)a({caption:"Notification Caption",description:`Notification Variant: ${o}`,permanent:!0,variant:o,primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}})}},N,R={render(i){return t(N||(N=n([`
-      <div style="display: flex; flex-direction: column; gap: 32px;">
-        <!-- Interactive Controls -->
-        <div style="display: flex; gap: 16px; align-items: center;">
-          <bl-button id="add-notifications" variant="primary">Add Sample Notifications</bl-button>
-          <bl-button id="clear-notifications" variant="danger">Clear All</bl-button>
-        </div>
-
-        <!-- Demo Container -->
-        <div style="display: flex; gap: 32px;">
-          <!-- LTR Example -->
-          <div style="flex: 1; min-width: 400px;">
-            <bl-notification
-                id="ltr-notification"
-                ?no-animation=`,`
-                duration=`,`
-              ></bl-notification>
-          </div>
-
-          <!-- RTL Example -->
-          <div style="flex: 1; min-width: 400px;" dir="rtl">
-            <bl-notification
-                id="rtl-notification"
-                ?no-animation=`,`
-                duration=`,`
-              ></bl-notification>
-          </div>
-        </div>
-
-        <script>
-          (function() {
-            // Store active notifications for proper cleanup
-            let activeNotifications = {
-              ltr: [],
-              rtl: []
-            };
-
-            const ltrNotification = document.getElementById('ltr-notification');
-            const rtlNotification = document.getElementById('rtl-notification');
-            const addButton = document.getElementById('add-notifications');
-            const clearButton = document.getElementById('clear-notifications');
-
-            // Sample notifications data with different variants and configurations
-            const notificationExamples = [
-              {
-                variant: 'info',
-                caption: { en: 'Welcome Message', ar: '\u0631\u0633\u0627\u0644\u0629 \u062A\u0631\u062D\u064A\u0628' },
-                description: {
-                  en: 'Welcome to our application! We hope you enjoy your experience.',
-                  ar: '\u0645\u0631\u062D\u0628\u0627\u064B \u0628\u0643 \u0641\u064A \u062A\u0637\u0628\u064A\u0642\u0646\u0627! \u0646\u062A\u0645\u0646\u0649 \u0644\u0643 \u062A\u062C\u0631\u0628\u0629 \u0645\u0645\u062A\u0639\u0629.'
-                },
-                icon: 'info',
-                primaryAction: {
-                  label: { en: 'Get Started', ar: '\u0627\u0628\u062F\u0623 \u0627\u0644\u0622\u0646' },
-                  onClick: () => {}
-                }
-              },
-              {
-                variant: 'success',
-                caption: { en: 'Task Completed', ar: '\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0627\u0644\u0645\u0647\u0645\u0629' },
-                description: {
-                  en: 'Your task has been successfully completed.',
-                  ar: '\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0645\u0647\u0645\u062A\u0643 \u0628\u0646\u062C\u0627\u062D.'
-                },
-                icon: 'check_fill'
-              },
-              {
-                variant: 'warning',
-                caption: { en: 'Storage Alert', ar: '\u062A\u0646\u0628\u064A\u0647 \u0627\u0644\u062A\u062E\u0632\u064A\u0646' },
-                description: {
-                  en: 'You are running low on storage space.',
-                  ar: '\u0645\u0633\u0627\u062D\u0629 \u0627\u0644\u062A\u062E\u0632\u064A\u0646 \u0627\u0644\u062E\u0627\u0635\u0629 \u0628\u0643 \u0645\u0646\u062E\u0641\u0636\u0629.'
-                },
-                icon: 'warning',
-                primaryAction: {
-                  label: { en: 'Upgrade', ar: '\u062A\u0631\u0642\u064A\u0629' },
-                  onClick: () => {}
-                },
-                secondaryAction: {
-                  label: { en: 'Learn More', ar: '\u0627\u0639\u0631\u0641 \u0627\u0644\u0645\u0632\u064A\u062F' },
-                  onClick: () => {}
-                }
-              },
-              {
-                variant: 'error',
-                caption: { en: 'Connection Error', ar: '\u062E\u0637\u0623 \u0641\u064A \u0627\u0644\u0627\u062A\u0635\u0627\u0644' },
-                description: {
-                  en: 'Unable to connect to the server. Please try again.',
-                  ar: '\u062A\u0639\u0630\u0631 \u0627\u0644\u0627\u062A\u0635\u0627\u0644 \u0628\u0627\u0644\u062E\u0627\u062F\u0645. \u064A\u0631\u062C\u0649 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649.'
-                },
-                icon: 'close_fill',
-                primaryAction: {
-                  label: { en: 'Retry', ar: '\u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629' },
-                  onClick: () => {}
-                }
-              }
-            ];
-
-            // Function to clear all notifications
-            const clearAllNotifications = async () => {
-              // Clear LTR notifications
-              if (activeNotifications.ltr.length > 0) {
-                for (const notification of activeNotifications.ltr) {
-                  await notification.remove();
-                }
-                activeNotifications.ltr = [];
-              }
-
-              // Clear RTL notifications
-              if (activeNotifications.rtl.length > 0) {
-                for (const notification of activeNotifications.rtl) {
-                  await notification.remove();
-                }
-                activeNotifications.rtl = [];
-              }
-            };
-
-            // Function to create notifications
-            const createNotifications = (isRTL) => {
-              const targetElement = isRTL ? rtlNotification : ltrNotification;
-              const lang = isRTL ? 'ar' : 'en';
-              const notificationList = isRTL ? activeNotifications.rtl : activeNotifications.ltr;
-
-              notificationExamples.forEach((example, index) => {
-                setTimeout(() => {
-                  const notification = targetElement.addNotification({
-                    variant: example.variant,
-                    caption: example.caption[lang],
-                    description: example.description[lang],
-                    icon: example.icon,
-                    permanent: true,
-                    ...(example.primaryAction && {
-                      primaryAction: {
-                        label: example.primaryAction.label[lang],
-                        onClick: () => {
-                          example.primaryAction.onClick();
-                          notification.remove();
-                          const index = notificationList.indexOf(notification);
-                          if (index > -1) {
-                            notificationList.splice(index, 1);
-                          }
-                        }
-                      }
-                    }),
-                    ...(example.secondaryAction && {
-                      secondaryAction: {
-                        label: example.secondaryAction.label[lang],
-                        onClick: () => {
-                          example.secondaryAction.onClick();
-                          notification.remove();
-                          const index = notificationList.indexOf(notification);
-                          if (index > -1) {
-                            notificationList.splice(index, 1);
-                          }
-                        }
-                      }
-                    })
-                  });
-
-                  // Store the notification reference
-                  notificationList.push(notification);
-                }, index * 300); // Stagger the notifications
-              });
-            };
-
-            // Add button click handler
-            addButton.addEventListener('bl-click', () => {
-              clearAllNotifications().then(() => {
-                createNotifications(false); // LTR
-                createNotifications(true);  // RTL
-              });
-            });
-
-            // Clear button click handler
-            clearButton.addEventListener('bl-click', clearAllNotifications);
-
-            // Initial notifications
-            createNotifications(false);
-            createNotifications(true);
-          })();
-        <\/script>
+    `])),r(i))},play:()=>{c({caption:"Notification Caption",description:"Notification Description",permanent:!0,primaryAction:{label:"Primary Action",onClick:i=>{i.remove()}},secondaryAction:{label:"Secondary Action",onClick:i=>{i.remove()}}})}},P={render(i){return t` ${r(i)} ${n(i)} `},args:{permanent:!0},play:({args:i})=>{c(i)}},q={render(i){return t`
+      ${r(i)}
+      ${n({caption:"Notification Caption",description:"Notification Variant: info",permanent:!0,variant:"info",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Info")}
+      ${n({caption:"Notification Caption",description:"Notification Variant: success",permanent:!0,variant:"success",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Success")}
+      ${n({caption:"Notification Caption",description:"Notification Variant: warning",permanent:!0,variant:"warning",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Warning")}
+      ${n({caption:"Notification Caption",description:"Notification Variant: error",permanent:!0,variant:"error",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Error")}
+    `},play:()=>{let i=["info","success","warning","error"];for(let o of i)c({caption:"Notification Caption",description:`Notification Variant: ${o}`,permanent:!0,variant:o,primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}})}},D={render(i){return t`
+      <div class="rtl-container" dir="rtl" lang="ar">
+        ${r(i)}
+        ${n({caption:"\u0631\u0633\u0627\u0644\u0629 \u062A\u0631\u062D\u064A\u0628",description:"\u0645\u0631\u062D\u0628\u0627\u064B \u0628\u0643 \u0641\u064A \u062A\u0637\u0628\u064A\u0642\u0646\u0627! \u0646\u062A\u0645\u0646\u0649 \u0644\u0643 \u062A\u062C\u0631\u0628\u0629 \u0645\u0645\u062A\u0639\u0629.",duration:7,variant:"info",icon:!0,primaryAction:{label:"\u0627\u0628\u062F\u0623 \u0627\u0644\u0622\u0646",onClick(){}}},"Info")}
+        ${n({caption:"\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0627\u0644\u0645\u0647\u0645\u0629",description:"\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0645\u0647\u0645\u062A\u0643 \u0628\u0646\u062C\u0627\u062D.",duration:10,variant:"success",icon:!0},"Success")}
+        ${n({caption:"\u062A\u0646\u0628\u064A\u0647 \u0627\u0644\u062A\u062E\u0632\u064A\u0646",description:"\u0645\u0633\u0627\u062D\u0629 \u0627\u0644\u062A\u062E\u0632\u064A\u0646 \u0627\u0644\u062E\u0627\u0635\u0629 \u0628\u0643 \u0645\u0646\u062E\u0641\u0636\u0629.",duration:15,variant:"warning",icon:!0,primaryAction:{label:"\u062A\u0631\u0642\u064A\u0629",onClick(){}},secondaryAction:{label:"\u0627\u0639\u0631\u0641 \u0627\u0644\u0645\u0632\u064A\u062F",onClick(){}}},"Warning")}
+        ${n({caption:"\u062E\u0637\u0623 \u0641\u064A \u0627\u0644\u0627\u062A\u0635\u0627\u0644",description:"\u062A\u0639\u0630\u0631 \u0627\u0644\u0627\u062A\u0635\u0627\u0644 \u0628\u0627\u0644\u062E\u0627\u062F\u0645. \u064A\u0631\u062C\u0649 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649.",duration:20,variant:"error",icon:!0,primaryAction:{label:"\u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629",onClick(){}}},"Error")}
       </div>
-    `])),i.noAnimation,r(i.duration),i.noAnimation,r(i.duration))},args:{noAnimation:!0,duration:0}};export{$ as ActionsRemoveExample,S as AddExample,L as PermanentExample,h as PrimaryActionExample,R as RTLExample,E as RemoveAwaitExample,k as RemoveExample,w as SecondaryActionExample,P as VariantsExample,g as default};
+
+      <style>
+        .rtl-container {
+          width: 100%;
+          min-height: 100%;
+          padding: 1rem;
+        }
+      </style>
+    `},play:()=>{[{caption:"\u0631\u0633\u0627\u0644\u0629 \u062A\u0631\u062D\u064A\u0628",description:"\u0645\u0631\u062D\u0628\u0627\u064B \u0628\u0643 \u0641\u064A \u062A\u0637\u0628\u064A\u0642\u0646\u0627! \u0646\u062A\u0645\u0646\u0649 \u0644\u0643 \u062A\u062C\u0631\u0628\u0629 \u0645\u0645\u062A\u0639\u0629.",duration:7,variant:"info",icon:!0,primaryAction:{label:"\u0627\u0628\u062F\u0623 \u0627\u0644\u0622\u0646",onClick(){}}},{caption:"\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0627\u0644\u0645\u0647\u0645\u0629",description:"\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0645\u0647\u0645\u062A\u0643 \u0628\u0646\u062C\u0627\u062D.",duration:10,variant:"success",icon:!0},{caption:"\u062A\u0646\u0628\u064A\u0647 \u0627\u0644\u062A\u062E\u0632\u064A\u0646",description:"\u0645\u0633\u0627\u062D\u0629 \u0627\u0644\u062A\u062E\u0632\u064A\u0646 \u0627\u0644\u062E\u0627\u0635\u0629 \u0628\u0643 \u0645\u0646\u062E\u0641\u0636\u0629.",duration:15,variant:"warning",icon:!0,primaryAction:{label:"\u062A\u0631\u0642\u064A\u0629",onClick(){}},secondaryAction:{label:"\u0627\u0639\u0631\u0641 \u0627\u0644\u0645\u0632\u064A\u062F",onClick(){}}},{caption:"\u062E\u0637\u0623 \u0641\u064A \u0627\u0644\u0627\u062A\u0635\u0627\u0644",description:"\u062A\u0639\u0630\u0631 \u0627\u0644\u0627\u062A\u0635\u0627\u0644 \u0628\u0627\u0644\u062E\u0627\u062F\u0645. \u064A\u0631\u062C\u0649 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649.",duration:20,variant:"error",icon:!0,primaryAction:{label:"\u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629",onClick(){}}}].forEach((o,a)=>{setTimeout(()=>{let l=document.querySelector(".rtl-container bl-notification");l==null||l.addNotification(o)},a*300)})},args:{noAnimation:!0,duration:7}};export{x as ActionsRemoveExample,E as AddExample,P as PermanentExample,$ as PrimaryActionExample,D as RTLExample,w as RemoveAwaitExample,g as RemoveExample,h as SecondaryActionExample,q as VariantsExample,k as default};
 //# sourceMappingURL=bl-notification.stories.js.map

package/dist/components/notification/bl-notification.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/notification/bl-notification.stories.ts"],
-  "sourcesContent": ["import { Meta, StoryObj } from \"@storybook/web-components\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { fullscreenLayout } from \"../../utilities/chromatic-decorators\";\nimport type { Notification, NotificationProps } from \"./bl-notification\";\n\nconst meta: Meta = {\n  title: \"Components/Notification\",\n  component: \"bl-notification\",\n  parameters: {\n    chromatic: {\n      viewports: [1000],\n    },\n  },\n  decorators: [fullscreenLayout],\n  argTypes: {\n    // Notification Card Props\n    duration: {\n      control: \"number\",\n      description: \"Duration in seconds\",\n      defaultValue: 7,\n    },\n    caption: {\n      control: \"text\",\n      description: \"Caption of the notification\",\n    },\n    description: {\n      control: \"text\",\n      description: \"Description of the notification. Required.\",\n    },\n    icon: {\n      control: \"text\",\n      defaultValue: \"true\",\n      description:\n        \"Icon of the notification. If provided with a string, it will be used as an icon name. If provided with a boolean, it will use the default icon or no icon.\",\n    },\n    variant: {\n      options: [\"info\", \"warning\", \"success\", \"error\"],\n      default: \"info\",\n      control: { type: \"select\" },\n      description: \"Variant of the notification\",\n    },\n    permanent: {\n      control: \"boolean\",\n      defaultValue: false,\n      description:\n        \"If true, the notification will not have duration and will be removed when the user clicks on the close button.\",\n    },\n    primaryAction: {\n      control: \"object\",\n      description: \"Primary action of the notification. onClick and label properties are required.\",\n    },\n    secondaryAction: {\n      control: \"object\",\n      description:\n        \"Secondary action of the notification. onClick and label properties are required.\",\n    },\n  },\n  args: {\n    noAnimation: false,\n    duration: 20,\n    caption: \"Notification Caption\",\n    description: \"Notification Description\",\n    icon: \"true\",\n    variant: \"info\",\n    permanent: false,\n    primaryAction: {\n      label: \"Primary Action\",\n      onClick() {},\n    },\n    secondaryAction: {\n      label: \"Secondary Action\",\n      onClick() {},\n    },\n  },\n};\n\nexport default meta;\n\nconst addNotification = (options: NotificationProps) => {\n  const el = document.querySelector(\"bl-notification\");\n\n  return el?.addNotification(options);\n};\n\nconst stringifyArgs = (args: NotificationArgs | NotificationProps) => {\n  return JSON.stringify(args, null, 6);\n};\n\nexport type NotificationArgs = {\n  noAnimation: boolean;\n  duration: number;\n} & NotificationProps;\n\nexport type Story = StoryObj<NotificationArgs>;\n\nconst BasicTemplate = (args: NotificationArgs) => html`\n  <bl-notification\n    ?no-animation=${args.noAnimation}\n    duration=${ifDefined(args.duration)}\n  ></bl-notification>\n`;\n\nconst NotificationCreator = (args: NotificationProps, buttonLabel = \"Add Notification\") => {\n  const slug = buttonLabel.toLowerCase().replace(/\\s/g, \"-\");\n\n  return html`\n    <bl-button id=${slug}>${buttonLabel}</bl-button>\n\n    <script>\n      (function () {\n        const notificationElement = document.querySelector(\"bl-notification\");\n        const addButton = document.querySelector(\"bl-button#${slug}\");\n\n        addButton.addEventListener(\"bl-click\", () => {\n          notificationElement.addNotification(${stringifyArgs(args)});\n        });\n      })();\n    </script>\n  `;\n};\n\nexport const AddExample: Story = {\n  render(args: NotificationArgs) {\n    return html`${BasicTemplate(args)} ${NotificationCreator(args)} `;\n  },\n  args: {\n    duration: 60,\n    primaryAction: undefined,\n    secondaryAction: undefined,\n  },\n  play: ({ args }) => {\n    addNotification(args);\n    addNotification({ ...args, variant: \"success\" });\n    addNotification({ ...args, variant: \"warning\" });\n    addNotification({ ...args, variant: \"error\" });\n  },\n};\n\nexport const RemoveExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <bl-button>Remove Notification</bl-button>\n\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n          const removeButton = document.querySelector(\"bl-button\");\n\n          const notification = notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n          });\n\n          removeButton.addEventListener(\"bl-click\", () => {\n            notification.remove(); // notificationElement.removeNotification(notification.id);\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const RemoveAwaitExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <bl-button>Remove Notifications</bl-button>\n\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n          const removeButton = document.querySelector(\"bl-button\");\n\n          const firstNotification = notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n          });\n\n          const secondNotification = notificationElement.addNotification({\n            caption: \"Notification Caption Second\",\n            description: \"Notification Description Second\",\n            permanent: true,\n          });\n\n          const thirdNotification = notificationElement.addNotification({\n            caption: \"Notification Caption Third\",\n            description: \"Notification Description Third\",\n            permanent: true,\n          });\n\n          removeButton.addEventListener(\"bl-click\", async () => {\n            await secondNotification.remove();\n            await thirdNotification.remove();\n            await firstNotification.remove();\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const PrimaryActionExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n\n          notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n            primaryAction: {\n              label: \"Primary Action\",\n              onClick: () => {\n                window.alert(\"Primary Action Clicked\");\n              },\n            },\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const SecondaryActionExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n\n          notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n            primaryAction: {\n              label: \"Primary Action\",\n              onClick: () => {\n                window.alert(\"Primary Action Clicked\");\n              },\n            },\n            secondaryAction: {\n              label: \"Secondary Action\",\n              onClick: () => {\n                window.alert(\"Secondary Action Clicked\");\n              },\n            },\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const ActionsRemoveExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n\n          const notification = notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n            primaryAction: {\n              label: \"Primary Action\",\n              onClick: notification => {\n                notification.remove();\n              },\n            },\n            secondaryAction: {\n              label: \"Secondary Action\",\n              onClick: notification => {\n                notification.remove();\n              },\n            },\n          });\n        })();\n      </script>\n    `;\n  },\n  play: () => {\n    addNotification({\n      caption: \"Notification Caption\",\n      description: \"Notification Description\",\n      permanent: true,\n      primaryAction: {\n        label: \"Primary Action\",\n        onClick: (notification: Notification) => {\n          notification.remove();\n        },\n      },\n      secondaryAction: {\n        label: \"Secondary Action\",\n        onClick: (notification: Notification) => {\n          notification.remove();\n        },\n      },\n    });\n  },\n};\n\nexport const PermanentExample: Story = {\n  render(args: NotificationArgs) {\n    return html` ${BasicTemplate(args)} ${NotificationCreator(args)} `;\n  },\n  args: {\n    permanent: true,\n  },\n  play: ({ args }) => {\n    addNotification(args);\n  },\n};\n\nexport const VariantsExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: info\",\n          permanent: true,\n          variant: \"info\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Info\"\n      )}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: success\",\n          permanent: true,\n          variant: \"success\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Success\"\n      )}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: warning\",\n          permanent: true,\n          variant: \"warning\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Warning\"\n      )}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: error\",\n          permanent: true,\n          variant: \"error\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Error\"\n      )}\n    `;\n  },\n  play: () => {\n    const variants = [\"info\", \"success\", \"warning\", \"error\"] as const;\n\n    for (const variant of variants) {\n      addNotification({\n        caption: \"Notification Caption\",\n        description: `Notification Variant: ${variant}`,\n        permanent: true,\n        variant,\n        primaryAction: {\n          label: \"Primary Action\",\n          onClick() {},\n        },\n        secondaryAction: {\n          label: \"Secondary Action\",\n          onClick() {},\n        },\n      });\n    }\n  },\n};\n\nexport const RTLExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      <div style=\"display: flex; flex-direction: column; gap: 32px;\">\n        <!-- Interactive Controls -->\n        <div style=\"display: flex; gap: 16px; align-items: center;\">\n          <bl-button id=\"add-notifications\" variant=\"primary\">Add Sample Notifications</bl-button>\n          <bl-button id=\"clear-notifications\" variant=\"danger\">Clear All</bl-button>\n        </div>\n\n        <!-- Demo Container -->\n        <div style=\"display: flex; gap: 32px;\">\n          <!-- LTR Example -->\n          <div style=\"flex: 1; min-width: 400px;\">\n            <bl-notification\n                id=\"ltr-notification\"\n                ?no-animation=${args.noAnimation}\n                duration=${ifDefined(args.duration)}\n              ></bl-notification>\n          </div>\n\n          <!-- RTL Example -->\n          <div style=\"flex: 1; min-width: 400px;\" dir=\"rtl\">\n            <bl-notification\n                id=\"rtl-notification\"\n                ?no-animation=${args.noAnimation}\n                duration=${ifDefined(args.duration)}\n              ></bl-notification>\n          </div>\n        </div>\n\n        <script>\n          (function() {\n            // Store active notifications for proper cleanup\n            let activeNotifications = {\n              ltr: [],\n              rtl: []\n            };\n\n            const ltrNotification = document.getElementById('ltr-notification');\n            const rtlNotification = document.getElementById('rtl-notification');\n            const addButton = document.getElementById('add-notifications');\n            const clearButton = document.getElementById('clear-notifications');\n\n            // Sample notifications data with different variants and configurations\n            const notificationExamples = [\n              {\n                variant: 'info',\n                caption: { en: 'Welcome Message', ar: '\u0631\u0633\u0627\u0644\u0629 \u062A\u0631\u062D\u064A\u0628' },\n                description: {\n                  en: 'Welcome to our application! We hope you enjoy your experience.',\n                  ar: '\u0645\u0631\u062D\u0628\u0627\u064B \u0628\u0643 \u0641\u064A \u062A\u0637\u0628\u064A\u0642\u0646\u0627! \u0646\u062A\u0645\u0646\u0649 \u0644\u0643 \u062A\u062C\u0631\u0628\u0629 \u0645\u0645\u062A\u0639\u0629.'\n                },\n                icon: 'info',\n                primaryAction: {\n                  label: { en: 'Get Started', ar: '\u0627\u0628\u062F\u0623 \u0627\u0644\u0622\u0646' },\n                  onClick: () => {}\n                }\n              },\n              {\n                variant: 'success',\n                caption: { en: 'Task Completed', ar: '\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0627\u0644\u0645\u0647\u0645\u0629' },\n                description: {\n                  en: 'Your task has been successfully completed.',\n                  ar: '\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0645\u0647\u0645\u062A\u0643 \u0628\u0646\u062C\u0627\u062D.'\n                },\n                icon: 'check_fill'\n              },\n              {\n                variant: 'warning',\n                caption: { en: 'Storage Alert', ar: '\u062A\u0646\u0628\u064A\u0647 \u0627\u0644\u062A\u062E\u0632\u064A\u0646' },\n                description: {\n                  en: 'You are running low on storage space.',\n                  ar: '\u0645\u0633\u0627\u062D\u0629 \u0627\u0644\u062A\u062E\u0632\u064A\u0646 \u0627\u0644\u062E\u0627\u0635\u0629 \u0628\u0643 \u0645\u0646\u062E\u0641\u0636\u0629.'\n                },\n                icon: 'warning',\n                primaryAction: {\n                  label: { en: 'Upgrade', ar: '\u062A\u0631\u0642\u064A\u0629' },\n                  onClick: () => {}\n                },\n                secondaryAction: {\n                  label: { en: 'Learn More', ar: '\u0627\u0639\u0631\u0641 \u0627\u0644\u0645\u0632\u064A\u062F' },\n                  onClick: () => {}\n                }\n              },\n              {\n                variant: 'error',\n                caption: { en: 'Connection Error', ar: '\u062E\u0637\u0623 \u0641\u064A \u0627\u0644\u0627\u062A\u0635\u0627\u0644' },\n                description: {\n                  en: 'Unable to connect to the server. Please try again.',\n                  ar: '\u062A\u0639\u0630\u0631 \u0627\u0644\u0627\u062A\u0635\u0627\u0644 \u0628\u0627\u0644\u062E\u0627\u062F\u0645. \u064A\u0631\u062C\u0649 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649.'\n                },\n                icon: 'close_fill',\n                primaryAction: {\n                  label: { en: 'Retry', ar: '\u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629' },\n                  onClick: () => {}\n                }\n              }\n            ];\n\n            // Function to clear all notifications\n            const clearAllNotifications = async () => {\n              // Clear LTR notifications\n              if (activeNotifications.ltr.length > 0) {\n                for (const notification of activeNotifications.ltr) {\n                  await notification.remove();\n                }\n                activeNotifications.ltr = [];\n              }\n\n              // Clear RTL notifications\n              if (activeNotifications.rtl.length > 0) {\n                for (const notification of activeNotifications.rtl) {\n                  await notification.remove();\n                }\n                activeNotifications.rtl = [];\n              }\n            };\n\n            // Function to create notifications\n            const createNotifications = (isRTL) => {\n              const targetElement = isRTL ? rtlNotification : ltrNotification;\n              const lang = isRTL ? 'ar' : 'en';\n              const notificationList = isRTL ? activeNotifications.rtl : activeNotifications.ltr;\n\n              notificationExamples.forEach((example, index) => {\n                setTimeout(() => {\n                  const notification = targetElement.addNotification({\n                    variant: example.variant,\n                    caption: example.caption[lang],\n                    description: example.description[lang],\n                    icon: example.icon,\n                    permanent: true,\n                    ...(example.primaryAction && {\n                      primaryAction: {\n                        label: example.primaryAction.label[lang],\n                        onClick: () => {\n                          example.primaryAction.onClick();\n                          notification.remove();\n                          const index = notificationList.indexOf(notification);\n                          if (index > -1) {\n                            notificationList.splice(index, 1);\n                          }\n                        }\n                      }\n                    }),\n                    ...(example.secondaryAction && {\n                      secondaryAction: {\n                        label: example.secondaryAction.label[lang],\n                        onClick: () => {\n                          example.secondaryAction.onClick();\n                          notification.remove();\n                          const index = notificationList.indexOf(notification);\n                          if (index > -1) {\n                            notificationList.splice(index, 1);\n                          }\n                        }\n                      }\n                    })\n                  });\n\n                  // Store the notification reference\n                  notificationList.push(notification);\n                }, index * 300); // Stagger the notifications\n              });\n            };\n\n            // Add button click handler\n            addButton.addEventListener('bl-click', () => {\n              clearAllNotifications().then(() => {\n                createNotifications(false); // LTR\n                createNotifications(true);  // RTL\n              });\n            });\n\n            // Clear button click handler\n            clearButton.addEventListener('bl-click', clearAllNotifications);\n\n            // Initial notifications\n            createNotifications(false);\n            createNotifications(true);\n          })();\n        </script>\n      </div>\n    `;\n  },\n  args: {\n    noAnimation: true,\n    duration: 0,\n  },\n};\n"],
-  "mappings": "gLAMA,IAAMA,EAAa,CACjB,MAAO,0BACP,UAAW,kBACX,WAAY,CACV,UAAW,CACT,UAAW,CAAC,GAAI,CAClB,CACF,EACA,WAAY,CAACC,CAAgB,EAC7B,SAAU,CAER,SAAU,CACR,QAAS,SACT,YAAa,sBACb,aAAc,CAChB,EACA,QAAS,CACP,QAAS,OACT,YAAa,6BACf,EACA,YAAa,CACX,QAAS,OACT,YAAa,4CACf,EACA,KAAM,CACJ,QAAS,OACT,aAAc,OACd,YACE,4JACJ,EACA,QAAS,CACP,QAAS,CAAC,OAAQ,UAAW,UAAW,OAAO,EAC/C,QAAS,OACT,QAAS,CAAE,KAAM,QAAS,EAC1B,YAAa,6BACf,EACA,UAAW,CACT,QAAS,UACT,aAAc,GACd,YACE,gHACJ,EACA,cAAe,CACb,QAAS,SACT,YAAa,gFACf,EACA,gBAAiB,CACf,QAAS,SACT,YACE,kFACJ,CACF,EACA,KAAM,CACJ,YAAa,GACb,SAAU,GACV,QAAS,uBACT,YAAa,2BACb,KAAM,OACN,QAAS,OACT,UAAW,GACX,cAAe,CACb,MAAO,iBACP,SAAU,CAAC,CACb,EACA,gBAAiB,CACf,MAAO,mBACP,SAAU,CAAC,CACb,CACF,CACF,EAEOC,EAAQF,EAETG,EAAmBC,GAA+B,CACtD,IAAMC,EAAK,SAAS,cAAc,iBAAiB,EAEnD,OAAOA,GAAA,YAAAA,EAAI,gBAAgBD,EAC7B,EAEME,EAAiBC,GACd,KAAK,UAAUA,EAAM,KAAM,CAAC,EAU/BC,EAAiBD,GAA2BE;AAAA;AAAA,oBAE9BF,EAAK;AAAA,eACVG,EAAUH,EAAK,QAAQ;AAAA;AAAA,EAnGtCI,EAuGMC,EAAsB,CAACL,EAAyBM,EAAc,qBAAuB,CACzF,IAAMC,EAAOD,EAAY,YAAY,EAAE,QAAQ,MAAO,GAAG,EAEzD,OAAOJ,EAAAE,MAAII,EAAA;AAAA,oBACW,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA,8DAK2B;AAAA;AAAA;AAAA,gDAGC;AAAA;AAAA;AAAA;AAAA,OAR/CD,EAAQD,EAKkCC,EAGdR,EAAcC,CAAI,EAKlE,EAEaS,EAAoB,CAC/B,OAAOT,EAAwB,CAC7B,OAAOE,IAAOD,EAAcD,CAAI,KAAKK,EAAoBL,CAAI,IAC/D,EACA,KAAM,CACJ,SAAU,GACV,cAAe,OACf,gBAAiB,MACnB,EACA,KAAM,CAAC,CAAE,KAAAA,CAAK,IAAM,CAClBJ,EAAgBI,CAAI,EACpBJ,EAAgB,CAAE,GAAGI,EAAM,QAAS,SAAU,CAAC,EAC/CJ,EAAgB,CAAE,GAAGI,EAAM,QAAS,SAAU,CAAC,EAC/CJ,EAAgB,CAAE,GAAGI,EAAM,QAAS,OAAQ,CAAC,CAC/C,CACF,EAzIAU,EA2IaC,EAAuB,CAClC,OAAOX,EAAwB,CAC7B,OAAOE,EAAAQ,MAAIF,EAAA;AAAA,QACY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAnBP,EAAcD,CAAI,EAoBxB,CACF,EAnKAY,EAqKaC,EAA4B,CACvC,OAAOb,EAAwB,CAC7B,OAAOE,EAAAU,MAAIJ,EAAA;AAAA,QACY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAnBP,EAAcD,CAAI,EAkCxB,CACF,EA3MAc,EA6MaC,EAA8B,CACzC,OAAOf,EAAwB,CAC7B,OAAOE,EAAAY,MAAIN,EAAA;AAAA,QACY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAnBP,EAAcD,CAAI,EAmBxB,CACF,EApOAgB,EAsOaC,EAAgC,CAC3C,OAAOjB,EAAwB,CAC7B,OAAOE,EAAAc,MAAIR,EAAA;AAAA,QACY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAnBP,EAAcD,CAAI,EAyBxB,CACF,EAnQAkB,EAqQaC,EAA8B,CACzC,OAAOnB,EAAwB,CAC7B,OAAOE,EAAAgB,MAAIV,EAAA;AAAA,QACY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAnBP,EAAcD,CAAI,EAyBxB,EACA,KAAM,IAAM,CACVJ,EAAgB,CACd,QAAS,uBACT,YAAa,2BACb,UAAW,GACX,cAAe,CACb,MAAO,iBACP,QAAUwB,GAA+B,CACvCA,EAAa,OAAO,CACtB,CACF,EACA,gBAAiB,CACf,MAAO,mBACP,QAAUA,GAA+B,CACvCA,EAAa,OAAO,CACtB,CACF,CACF,CAAC,CACH,CACF,EAEaC,EAA0B,CACrC,OAAOrB,EAAwB,CAC7B,OAAOE,KAAQD,EAAcD,CAAI,KAAKK,EAAoBL,CAAI,IAChE,EACA,KAAM,CACJ,UAAW,EACb,EACA,KAAM,CAAC,CAAE,KAAAA,CAAK,IAAM,CAClBJ,EAAgBI,CAAI,CACtB,CACF,EAEasB,EAAyB,CACpC,OAAOtB,EAAwB,CAC7B,OAAOE;AAAA,QACHD,EAAcD,CAAI;AAAA,QAClBK,EACA,CACE,QAAS,uBACT,YAAa,6BACb,UAAW,GACX,QAAS,OACT,cAAe,CACb,MAAO,iBACP,SAAU,CAAC,CACb,EACA,gBAAiB,CACf,MAAO,mBACP,SAAU,CAAC,CACb,CACF,EACA,MACF;AAAA,QACEA,EACA,CACE,QAAS,uBACT,YAAa,gCACb,UAAW,GACX,QAAS,UACT,cAAe,CACb,MAAO,iBACP,SAAU,CAAC,CACb,EACA,gBAAiB,CACf,MAAO,mBACP,SAAU,CAAC,CACb,CACF,EACA,SACF;AAAA,QACEA,EACA,CACE,QAAS,uBACT,YAAa,gCACb,UAAW,GACX,QAAS,UACT,cAAe,CACb,MAAO,iBACP,SAAU,CAAC,CACb,EACA,gBAAiB,CACf,MAAO,mBACP,SAAU,CAAC,CACb,CACF,EACA,SACF;AAAA,QACEA,EACA,CACE,QAAS,uBACT,YAAa,8BACb,UAAW,GACX,QAAS,QACT,cAAe,CACb,MAAO,iBACP,SAAU,CAAC,CACb,EACA,gBAAiB,CACf,MAAO,mBACP,SAAU,CAAC,CACb,CACF,EACA,OACF;AAAA,KAEJ,EACA,KAAM,IAAM,CACV,IAAMkB,EAAW,CAAC,OAAQ,UAAW,UAAW,OAAO,EAEvD,QAAWC,KAAWD,EACpB3B,EAAgB,CACd,QAAS,uBACT,YAAa,yBAAyB4B,IACtC,UAAW,GACX,QAAAA,EACA,cAAe,CACb,MAAO,iBACP,SAAU,CAAC,CACb,EACA,gBAAiB,CACf,MAAO,mBACP,SAAU,CAAC,CACb,CACF,CAAC,CAEL,CACF,EAjaAC,EAmaaC,EAAoB,CAC/B,OAAO1B,EAAwB,CAC7B,OAAOE,EAAAuB,MAAIjB,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAciC;AAAA,2BACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAQH;AAAA,2BACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAVnBR,EAAK,YACVG,EAAUH,EAAK,QAAQ,EAQlBA,EAAK,YACVG,EAAUH,EAAK,QAAQ,EA+JhD,EACA,KAAM,CACJ,YAAa,GACb,SAAU,CACZ,CACF",
-  "names": ["meta", "fullscreenLayout", "bl_notification_stories_default", "addNotification", "options", "el", "stringifyArgs", "args", "BasicTemplate", "x", "l", "_a", "NotificationCreator", "buttonLabel", "slug", "__template", "AddExample", "_b", "RemoveExample", "_c", "RemoveAwaitExample", "_d", "PrimaryActionExample", "_e", "SecondaryActionExample", "_f", "ActionsRemoveExample", "notification", "PermanentExample", "VariantsExample", "variants", "variant", "_g", "RTLExample"]
+  "sourcesContent": ["import { Meta, StoryObj } from \"@storybook/web-components\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { fullscreenLayout } from \"../../utilities/chromatic-decorators\";\nimport type { Notification, NotificationProps } from \"./bl-notification\";\n\nconst meta: Meta = {\n  title: \"Components/Notification\",\n  component: \"bl-notification\",\n  parameters: {\n    chromatic: {\n      viewports: [1000],\n    },\n  },\n  decorators: [fullscreenLayout],\n  argTypes: {\n    // Notification Card Props\n    duration: {\n      control: \"number\",\n      description: \"Duration in seconds\",\n      defaultValue: 7,\n    },\n    caption: {\n      control: \"text\",\n      description: \"Caption of the notification\",\n    },\n    description: {\n      control: \"text\",\n      description: \"Description of the notification. Required.\",\n    },\n    icon: {\n      control: \"text\",\n      defaultValue: \"true\",\n      description:\n        \"Icon of the notification. If provided with a string, it will be used as an icon name. If provided with a boolean, it will use the default icon or no icon.\",\n    },\n    variant: {\n      options: [\"info\", \"warning\", \"success\", \"error\"],\n      default: \"info\",\n      control: { type: \"select\" },\n      description: \"Variant of the notification\",\n    },\n    permanent: {\n      control: \"boolean\",\n      defaultValue: false,\n      description:\n        \"If true, the notification will not have duration and will be removed when the user clicks on the close button.\",\n    },\n    primaryAction: {\n      control: \"object\",\n      description: \"Primary action of the notification. onClick and label properties are required.\",\n    },\n    secondaryAction: {\n      control: \"object\",\n      description:\n        \"Secondary action of the notification. onClick and label properties are required.\",\n    },\n  },\n  args: {\n    noAnimation: false,\n    duration: 20,\n    caption: \"Notification Caption\",\n    description: \"Notification Description\",\n    icon: \"true\",\n    variant: \"info\",\n    permanent: false,\n    primaryAction: {\n      label: \"Primary Action\",\n      onClick() {},\n    },\n    secondaryAction: {\n      label: \"Secondary Action\",\n      onClick() {},\n    },\n  },\n};\n\nexport default meta;\n\nconst addNotification = (options: NotificationProps) => {\n  const el = document.querySelector(\"bl-notification\");\n\n  return el?.addNotification(options);\n};\n\nconst stringifyArgs = (args: NotificationArgs | NotificationProps) => {\n  return JSON.stringify(args, null, 6);\n};\n\nexport type NotificationArgs = {\n  noAnimation: boolean;\n  duration: number;\n} & NotificationProps;\n\nexport type Story = StoryObj<NotificationArgs>;\n\nconst BasicTemplate = (args: NotificationArgs) => html`\n  <bl-notification\n    ?no-animation=${args.noAnimation}\n    duration=${ifDefined(args.duration)}\n  ></bl-notification>\n`;\n\nconst NotificationCreator = (args: NotificationProps, buttonLabel = \"Add Notification\") => {\n  const slug = buttonLabel.toLowerCase().replace(/\\s/g, \"-\");\n\n  return html`\n    <bl-button id=${slug}>${buttonLabel}</bl-button>\n\n    <script>\n      (function () {\n        const notificationElement = document.querySelector(\"bl-notification\");\n        const addButton = document.querySelector(\"bl-button#${slug}\");\n\n        addButton.addEventListener(\"bl-click\", () => {\n          notificationElement.addNotification(${stringifyArgs(args)});\n        });\n      })();\n    </script>\n  `;\n};\n\nexport const AddExample: Story = {\n  render(args: NotificationArgs) {\n    return html`${BasicTemplate(args)} ${NotificationCreator(args)} `;\n  },\n  args: {\n    duration: 60,\n    primaryAction: undefined,\n    secondaryAction: undefined,\n  },\n  play: ({ args }) => {\n    addNotification(args);\n    addNotification({ ...args, variant: \"success\" });\n    addNotification({ ...args, variant: \"warning\" });\n    addNotification({ ...args, variant: \"error\" });\n  },\n};\n\nexport const RemoveExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <bl-button>Remove Notification</bl-button>\n\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n          const removeButton = document.querySelector(\"bl-button\");\n\n          const notification = notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n          });\n\n          removeButton.addEventListener(\"bl-click\", () => {\n            notification.remove(); // notificationElement.removeNotification(notification.id);\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const RemoveAwaitExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <bl-button>Remove Notifications</bl-button>\n\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n          const removeButton = document.querySelector(\"bl-button\");\n\n          const firstNotification = notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n          });\n\n          const secondNotification = notificationElement.addNotification({\n            caption: \"Notification Caption Second\",\n            description: \"Notification Description Second\",\n            permanent: true,\n          });\n\n          const thirdNotification = notificationElement.addNotification({\n            caption: \"Notification Caption Third\",\n            description: \"Notification Description Third\",\n            permanent: true,\n          });\n\n          removeButton.addEventListener(\"bl-click\", async () => {\n            await secondNotification.remove();\n            await thirdNotification.remove();\n            await firstNotification.remove();\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const PrimaryActionExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n\n          notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n            primaryAction: {\n              label: \"Primary Action\",\n              onClick: () => {\n                window.alert(\"Primary Action Clicked\");\n              },\n            },\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const SecondaryActionExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n\n          notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n            primaryAction: {\n              label: \"Primary Action\",\n              onClick: () => {\n                window.alert(\"Primary Action Clicked\");\n              },\n            },\n            secondaryAction: {\n              label: \"Secondary Action\",\n              onClick: () => {\n                window.alert(\"Secondary Action Clicked\");\n              },\n            },\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const ActionsRemoveExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n\n          const notification = notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n            primaryAction: {\n              label: \"Primary Action\",\n              onClick: notification => {\n                notification.remove();\n              },\n            },\n            secondaryAction: {\n              label: \"Secondary Action\",\n              onClick: notification => {\n                notification.remove();\n              },\n            },\n          });\n        })();\n      </script>\n    `;\n  },\n  play: () => {\n    addNotification({\n      caption: \"Notification Caption\",\n      description: \"Notification Description\",\n      permanent: true,\n      primaryAction: {\n        label: \"Primary Action\",\n        onClick: (notification: Notification) => {\n          notification.remove();\n        },\n      },\n      secondaryAction: {\n        label: \"Secondary Action\",\n        onClick: (notification: Notification) => {\n          notification.remove();\n        },\n      },\n    });\n  },\n};\n\nexport const PermanentExample: Story = {\n  render(args: NotificationArgs) {\n    return html` ${BasicTemplate(args)} ${NotificationCreator(args)} `;\n  },\n  args: {\n    permanent: true,\n  },\n  play: ({ args }) => {\n    addNotification(args);\n  },\n};\n\nexport const VariantsExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: info\",\n          permanent: true,\n          variant: \"info\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Info\"\n      )}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: success\",\n          permanent: true,\n          variant: \"success\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Success\"\n      )}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: warning\",\n          permanent: true,\n          variant: \"warning\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Warning\"\n      )}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: error\",\n          permanent: true,\n          variant: \"error\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Error\"\n      )}\n    `;\n  },\n  play: () => {\n    const variants = [\"info\", \"success\", \"warning\", \"error\"] as const;\n\n    for (const variant of variants) {\n      addNotification({\n        caption: \"Notification Caption\",\n        description: `Notification Variant: ${variant}`,\n        permanent: true,\n        variant,\n        primaryAction: {\n          label: \"Primary Action\",\n          onClick() {},\n        },\n        secondaryAction: {\n          label: \"Secondary Action\",\n          onClick() {},\n        },\n      });\n    }\n  },\n};\n\nexport const RTLExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      <div class=\"rtl-container\" dir=\"rtl\" lang=\"ar\">\n        ${BasicTemplate(args)}\n        ${NotificationCreator(\n          {\n            caption: \"\u0631\u0633\u0627\u0644\u0629 \u062A\u0631\u062D\u064A\u0628\",\n            description: \"\u0645\u0631\u062D\u0628\u0627\u064B \u0628\u0643 \u0641\u064A \u062A\u0637\u0628\u064A\u0642\u0646\u0627! \u0646\u062A\u0645\u0646\u0649 \u0644\u0643 \u062A\u062C\u0631\u0628\u0629 \u0645\u0645\u062A\u0639\u0629.\",\n            duration: 7,\n            variant: \"info\" as const,\n            icon: true,\n            primaryAction: {\n              label: \"\u0627\u0628\u062F\u0623 \u0627\u0644\u0622\u0646\",\n              onClick() {},\n            },\n          },\n          \"Info\"\n        )}\n        ${NotificationCreator(\n          {\n            caption: \"\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0627\u0644\u0645\u0647\u0645\u0629\",\n            description: \"\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0645\u0647\u0645\u062A\u0643 \u0628\u0646\u062C\u0627\u062D.\",\n            duration: 10,\n            variant: \"success\" as const,\n            icon: true,\n          },\n          \"Success\"\n        )}\n        ${NotificationCreator(\n          {\n            caption: \"\u062A\u0646\u0628\u064A\u0647 \u0627\u0644\u062A\u062E\u0632\u064A\u0646\",\n            description: \"\u0645\u0633\u0627\u062D\u0629 \u0627\u0644\u062A\u062E\u0632\u064A\u0646 \u0627\u0644\u062E\u0627\u0635\u0629 \u0628\u0643 \u0645\u0646\u062E\u0641\u0636\u0629.\",\n            duration: 15,\n            variant: \"warning\" as const,\n            icon: true,\n            primaryAction: {\n              label: \"\u062A\u0631\u0642\u064A\u0629\",\n              onClick() {},\n            },\n            secondaryAction: {\n              label: \"\u0627\u0639\u0631\u0641 \u0627\u0644\u0645\u0632\u064A\u062F\",\n              onClick() {},\n            },\n          },\n          \"Warning\"\n        )}\n        ${NotificationCreator(\n          {\n            caption: \"\u062E\u0637\u0623 \u0641\u064A \u0627\u0644\u0627\u062A\u0635\u0627\u0644\",\n            description: \"\u062A\u0639\u0630\u0631 \u0627\u0644\u0627\u062A\u0635\u0627\u0644 \u0628\u0627\u0644\u062E\u0627\u062F\u0645. \u064A\u0631\u062C\u0649 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649.\",\n            duration: 20,\n            variant: \"error\" as const,\n            icon: true,\n            primaryAction: {\n              label: \"\u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629\",\n              onClick() {},\n            },\n          },\n          \"Error\"\n        )}\n      </div>\n\n      <style>\n        .rtl-container {\n          width: 100%;\n          min-height: 100%;\n          padding: 1rem;\n        }\n      </style>\n    `;\n  },\n  play: () => {\n    const rtlNotifications: NotificationProps[] = [\n      {\n        caption: \"\u0631\u0633\u0627\u0644\u0629 \u062A\u0631\u062D\u064A\u0628\",\n        description: \"\u0645\u0631\u062D\u0628\u0627\u064B \u0628\u0643 \u0641\u064A \u062A\u0637\u0628\u064A\u0642\u0646\u0627! \u0646\u062A\u0645\u0646\u0649 \u0644\u0643 \u062A\u062C\u0631\u0628\u0629 \u0645\u0645\u062A\u0639\u0629.\",\n        duration: 7,\n        variant: \"info\",\n        icon: true,\n        primaryAction: {\n          label: \"\u0627\u0628\u062F\u0623 \u0627\u0644\u0622\u0646\",\n          onClick() {},\n        },\n      },\n      {\n        caption: \"\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0627\u0644\u0645\u0647\u0645\u0629\",\n        description: \"\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0645\u0647\u0645\u062A\u0643 \u0628\u0646\u062C\u0627\u062D.\",\n        duration: 10,\n        variant: \"success\",\n        icon: true,\n      },\n      {\n        caption: \"\u062A\u0646\u0628\u064A\u0647 \u0627\u0644\u062A\u062E\u0632\u064A\u0646\",\n        description: \"\u0645\u0633\u0627\u062D\u0629 \u0627\u0644\u062A\u062E\u0632\u064A\u0646 \u0627\u0644\u062E\u0627\u0635\u0629 \u0628\u0643 \u0645\u0646\u062E\u0641\u0636\u0629.\",\n        duration: 15,\n        variant: \"warning\",\n        icon: true,\n        primaryAction: {\n          label: \"\u062A\u0631\u0642\u064A\u0629\",\n          onClick() {},\n        },\n        secondaryAction: {\n          label: \"\u0627\u0639\u0631\u0641 \u0627\u0644\u0645\u0632\u064A\u062F\",\n          onClick() {},\n        },\n      },\n      {\n        caption: \"\u062E\u0637\u0623 \u0641\u064A \u0627\u0644\u0627\u062A\u0635\u0627\u0644\",\n        description: \"\u062A\u0639\u0630\u0631 \u0627\u0644\u0627\u062A\u0635\u0627\u0644 \u0628\u0627\u0644\u062E\u0627\u062F\u0645. \u064A\u0631\u062C\u0649 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649.\",\n        duration: 20,\n        variant: \"error\",\n        icon: true,\n        primaryAction: {\n          label: \"\u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629\",\n          onClick() {},\n        },\n      },\n    ];\n\n    // Add RTL notifications\n    rtlNotifications.forEach((notification, index) => {\n      setTimeout(() => {\n        const rtlContainer = document.querySelector<HTMLElement & { addNotification: typeof addNotification }>(\".rtl-container bl-notification\");\n\n        rtlContainer?.addNotification(notification);\n      }, index * 300);\n    });\n  },\n  args: {\n    noAnimation: true,\n    duration: 7,\n  },\n};\n"],
+  "mappings": "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",
+  "names": ["meta", "fullscreenLayout", "bl_notification_stories_default", "addNotification", "options", "el", "stringifyArgs", "args", "BasicTemplate", "x", "l", "_a", "NotificationCreator", "buttonLabel", "slug", "__template", "AddExample", "_b", "RemoveExample", "_c", "RemoveAwaitExample", "_d", "PrimaryActionExample", "_e", "SecondaryActionExample", "_f", "ActionsRemoveExample", "notification", "PermanentExample", "VariantsExample", "variants", "variant", "RTLExample", "index", "rtlContainer"]
 }

package/dist/components/notification/card/bl-notification-card.js

@@ -1,2 +1,2 @@
-import{a,b}from"../../../chunk-UZJOCLOO.js";import"../../../chunk-ECPWEUBG.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as CloseSource,b as default};
+import{a,b}from"../../../chunk-DIGACNOH.js";import"../../../chunk-ECPWEUBG.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as CloseSource,b as default};
 //# sourceMappingURL=bl-notification-card.js.map

package/dist/components/pagination/bl-pagination.js

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-5VEXMTA4.js";import"../../chunk-OAF3R4PW.js";import"../../chunk-WXWKIQAK.js";import"../../chunk-FTQX7CEW.js";import"../../chunk-EZSEQHRH.js";import"../../chunk-757CMI4A.js";import"../../chunk-23PSWIUF.js";import"../../chunk-IPYZIIRV.js";import"../../chunk-EG7U7PM3.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-AYJMIZZ3.js";import"../../chunk-VU6LRFZR.js";import"../../chunk-IGNJQVQF.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-HBPBDC7T.js";import"../../chunk-ECPWEUBG.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../chunk-H4WETBHJ.js";import"../../chunk-2IJL7HNY.js";import"../../chunk-RER7OLAQ.js";import"../../chunk-MWFGDECP.js";import"../../chunk-EZSEQHRH.js";import"../../chunk-IDRA37BX.js";import"../../chunk-23PSWIUF.js";import"../../chunk-IPYZIIRV.js";import"../../chunk-EG7U7PM3.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-AYJMIZZ3.js";import"../../chunk-HZV6GUII.js";import"../../chunk-ZE7GYACV.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-HBPBDC7T.js";import"../../chunk-ECPWEUBG.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-pagination.js.map

package/dist/components/popover/bl-popover.js

@@ -1,2 +1,2 @@
-import{b as a}from"../../chunk-BNUJWONI.js";import"../../chunk-EZSEQHRH.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{b as a}from"../../chunk-UOGCEUXK.js";import"../../chunk-EZSEQHRH.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-popover.js.map

package/dist/components/progress-indicator/bl-progress-indicator.js

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-GMVJABPT.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../chunk-QDYWH7BU.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-progress-indicator.js.map

package/dist/components/radio-group/bl-radio-group.js

@@ -1,2 +1,2 @@
-import{d as a,e as b,f as c}from"../../chunk-FVBGMXMC.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{b as blChangeEventName,a as blRadioGroupTag,c as default};
+import{d as a,e as b,f as c}from"../../chunk-X5XH4HTW.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{b as blChangeEventName,a as blRadioGroupTag,c as default};
 //# sourceMappingURL=bl-radio-group.js.map

package/dist/components/radio-group/radio/bl-radio.js

@@ -1,2 +1,2 @@
-import{a,b,c}from"../../../chunk-FVBGMXMC.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{b as blCheckedEventName,a as blRadioTag,c as default};
+import{a,b,c}from"../../../chunk-X5XH4HTW.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{b as blCheckedEventName,a as blRadioTag,c as default};
 //# sourceMappingURL=bl-radio.js.map

package/dist/components/select/bl-select.js

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-OAF3R4PW.js";import"../../chunk-WXWKIQAK.js";import"../../chunk-FTQX7CEW.js";import"../../chunk-EZSEQHRH.js";import"../../chunk-EG7U7PM3.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-AYJMIZZ3.js";import"../../chunk-VU6LRFZR.js";import"../../chunk-IGNJQVQF.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-HBPBDC7T.js";import"../../chunk-ECPWEUBG.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../chunk-2IJL7HNY.js";import"../../chunk-RER7OLAQ.js";import"../../chunk-MWFGDECP.js";import"../../chunk-EZSEQHRH.js";import"../../chunk-EG7U7PM3.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-AYJMIZZ3.js";import"../../chunk-HZV6GUII.js";import"../../chunk-ZE7GYACV.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-HBPBDC7T.js";import"../../chunk-ECPWEUBG.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-select.js.map

package/dist/components/select/option/bl-select-option.js

@@ -1,2 +1,2 @@
-import{a}from"../../../chunk-WXWKIQAK.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../../chunk-RER7OLAQ.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-select-option.js.map

package/dist/components/spinner/bl-spinner.js

@@ -1,2 +1,2 @@
-import{a,b}from"../../chunk-IGNJQVQF.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as blSpinnerTag,b as default};
+import{a,b}from"../../chunk-ZE7GYACV.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as blSpinnerTag,b as default};
 //# sourceMappingURL=bl-spinner.js.map

package/dist/components/split-button/bl-split-button.js

@@ -1,2 +1,2 @@
-import{a,b}from"../../chunk-ILK55FB6.js";import"../../chunk-73RGV4UX.js";import"../../chunk-IPYZIIRV.js";import"../../chunk-VU6LRFZR.js";import"../../chunk-IGNJQVQF.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as blSplitButtonTag,b as default};
+import{a,b}from"../../chunk-NXVLNG4L.js";import"../../chunk-HYBPEELZ.js";import"../../chunk-IPYZIIRV.js";import"../../chunk-HZV6GUII.js";import"../../chunk-ZE7GYACV.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as blSplitButtonTag,b as default};
 //# sourceMappingURL=bl-split-button.js.map

package/dist/components/switch/bl-switch.js

@@ -1,2 +1,2 @@
-import{a,b}from"../../chunk-J45OQI7D.js";import"../../chunk-IPYZIIRV.js";import"../../chunk-DINNT5P2.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as blSwitchTag,b as default};
+import{a,b}from"../../chunk-4BLKAURK.js";import"../../chunk-IPYZIIRV.js";import"../../chunk-DINNT5P2.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as blSwitchTag,b as default};
 //# sourceMappingURL=bl-switch.js.map

package/dist/components/tab-group/bl-tab-group.js

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-5TPDRTCU.js";import"../../chunk-YZRAUVUQ.js";import"../../chunk-QF4LGACD.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../chunk-5TPDRTCU.js";import"../../chunk-WPESQSKX.js";import"../../chunk-QF4LGACD.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-tab-group.js.map

package/dist/components/tab-group/tab/bl-tab.js

@@ -1,2 +1,2 @@
-import{a}from"../../../chunk-YZRAUVUQ.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../../chunk-WPESQSKX.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-tab.js.map

package/dist/components/table/table-cell/bl-table-cell.js

@@ -1,2 +1,2 @@
-import{a,b}from"../../../chunk-N4GAO7FQ.js";import"../../../chunk-JAZGOWKA.js";import"../../../chunk-VJRVHJVZ.js";import"../../../chunk-T5EQ4OXS.js";import"../../../chunk-STMCW2R6.js";import"../../../chunk-FTQX7CEW.js";import"../../../chunk-EG7U7PM3.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-AYJMIZZ3.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-BH64QNLE.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as blTableCellTag,b as default};
+import{a,b}from"../../../chunk-ZJBBQHF3.js";import"../../../chunk-LEAVDIGF.js";import"../../../chunk-VJRVHJVZ.js";import"../../../chunk-7VMGFJ5X.js";import"../../../chunk-STMCW2R6.js";import"../../../chunk-MWFGDECP.js";import"../../../chunk-EG7U7PM3.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-AYJMIZZ3.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-BH64QNLE.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as blTableCellTag,b as default};
 //# sourceMappingURL=bl-table-cell.js.map

package/dist/components/table/table-header/bl-table-header.js

@@ -1,2 +1,2 @@
-import{a,b}from"../../../chunk-T5EQ4OXS.js";import"../../../chunk-STMCW2R6.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as blTableHeaderTag,b as default};
+import{a,b}from"../../../chunk-7VMGFJ5X.js";import"../../../chunk-STMCW2R6.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as blTableHeaderTag,b as default};
 //# sourceMappingURL=bl-table-header.js.map

package/dist/components/table/table-header-cell/bl-table-header-cell.js

@@ -1,2 +1,2 @@
-import{a,b}from"../../../chunk-CAIHRZ24.js";import"../../../chunk-JAZGOWKA.js";import"../../../chunk-VJRVHJVZ.js";import"../../../chunk-T5EQ4OXS.js";import"../../../chunk-STMCW2R6.js";import"../../../chunk-FTQX7CEW.js";import"../../../chunk-EG7U7PM3.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-AYJMIZZ3.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-BH64QNLE.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as blTableHeaderCellTag,b as default};
+import{a,b}from"../../../chunk-Q5D7W6YP.js";import"../../../chunk-LEAVDIGF.js";import"../../../chunk-VJRVHJVZ.js";import"../../../chunk-7VMGFJ5X.js";import"../../../chunk-STMCW2R6.js";import"../../../chunk-MWFGDECP.js";import"../../../chunk-EG7U7PM3.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-AYJMIZZ3.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-BH64QNLE.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as blTableHeaderCellTag,b as default};
 //# sourceMappingURL=bl-table-header-cell.js.map

package/dist/components/table/table-row/bl-table-row.js

@@ -1,2 +1,2 @@
-import{a,b}from"../../../chunk-JAZGOWKA.js";import"../../../chunk-VJRVHJVZ.js";import"../../../chunk-T5EQ4OXS.js";import"../../../chunk-STMCW2R6.js";import"../../../chunk-FTQX7CEW.js";import"../../../chunk-EG7U7PM3.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-AYJMIZZ3.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-BH64QNLE.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as blTableRowTag,b as default};
+import{a,b}from"../../../chunk-LEAVDIGF.js";import"../../../chunk-VJRVHJVZ.js";import"../../../chunk-7VMGFJ5X.js";import"../../../chunk-STMCW2R6.js";import"../../../chunk-MWFGDECP.js";import"../../../chunk-EG7U7PM3.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-AYJMIZZ3.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-BH64QNLE.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as blTableRowTag,b as default};
 //# sourceMappingURL=bl-table-row.js.map

package/dist/components/tag/bl-tag.d.ts

@@ -0,0 +1,52 @@
+import { CSSResultGroup, LitElement, TemplateResult } from "lit";
+import "../button/bl-button";
+import "../icon/bl-icon";
+import { BaklavaIcon } from "../icon/icon-list";
+export type TagSize = "small" | "medium" | "large";
+type TagVariant = "selectable" | "removable";
+/**
+ * @tag bl-tag
+ * @summary Baklava Tag component
+ */
+export default class BlTag extends LitElement {
+    static get styles(): CSSResultGroup;
+    /**
+     * Sets the tag size
+     */
+    size: TagSize;
+    /**
+     * Sets the tag variant
+     */
+    variant: TagVariant;
+    /**
+     * Sets the name of the icon
+     */
+    icon?: BaklavaIcon;
+    /**
+     * Sets the selected state of the tag
+     */
+    selected: boolean;
+    /**
+     *  Disables the tag
+     */
+    disabled: boolean;
+    /**
+     * Sets the value of the tag
+     */
+    value: string | null;
+    /**
+     * Dispatches when the tag is clicked
+     */
+    private _onBlTagClick;
+    private _handleClick;
+    private _removeButtonTemplate;
+    private _iconTemplate;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "bl-tag": BlTag;
+    }
+}
+export {};
+//# sourceMappingURL=bl-tag.d.ts.map