@trendyol/baklava 3.4.0-beta.19 → 3.4.0-beta.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/baklava.js +1 -1
- package/dist/{chunk-D7VPTSSK.js → chunk-GBJ4SP2Y.js} +2 -2
- package/dist/chunk-GBJ4SP2Y.js.map +7 -0
- package/dist/chunk-Z5ZIVLUH.js +37 -0
- package/dist/chunk-Z5ZIVLUH.js.map +7 -0
- package/dist/components/drawer/bl-drawer.js +1 -1
- package/dist/components/notification/bl-notification.stories.d.ts.map +1 -1
- package/dist/components/notification/bl-notification.stories.js +20 -8
- package/dist/components/notification/bl-notification.stories.js.map +2 -2
- package/dist/components/stepper/bl-stepper-item.js +1 -1
- package/dist/components/stepper/bl-stepper.js +1 -1
- package/dist/themes/dark.css +2 -0
- package/dist/themes/dark.css.map +7 -0
- package/dist/themes/default.css +1 -1
- package/dist/themes/default.css.map +2 -2
- package/package.json +2 -1
- package/dist/chunk-D7VPTSSK.js.map +0 -7
- package/dist/chunk-HCSEQTUP.js +0 -37
- package/dist/chunk-HCSEQTUP.js.map +0 -7
package/dist/baklava.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{b as J}from"./chunk-LZ6VDMPM.js";import{b as K}from"./chunk-JTNWYMYZ.js";import{b as F}from"./chunk-5QGKDF4O.js";import{b as z}from"./chunk-JN5BKKQZ.js";import{b as E}from"./chunk-DPKNQOJX.js";import{a as M}from"./chunk-Z2AZS34W.js";import{a as Q}from"./chunk-UF5VCR36.js";import{a as r}from"./chunk-IR2QY2VG.js";import{b as C}from"./chunk-7HEDOM2M.js";import{a as v}from"./chunk-BDTCJ2JC.js";import{a as N}from"./chunk-
|
|
1
|
+
import{b as J}from"./chunk-LZ6VDMPM.js";import{b as K}from"./chunk-JTNWYMYZ.js";import{b as F}from"./chunk-5QGKDF4O.js";import{b as z}from"./chunk-JN5BKKQZ.js";import{b as E}from"./chunk-DPKNQOJX.js";import{a as M}from"./chunk-Z2AZS34W.js";import{a as Q}from"./chunk-UF5VCR36.js";import{a as r}from"./chunk-IR2QY2VG.js";import{b as C}from"./chunk-7HEDOM2M.js";import{a as v}from"./chunk-BDTCJ2JC.js";import{a as N}from"./chunk-Z5ZIVLUH.js";import{b as y}from"./chunk-NW7MDZJB.js";import{a as j}from"./chunk-3MLXIDOD.js";import{a as O}from"./chunk-YH3MSMXL.js";import{a as L}from"./chunk-WZBUJ4ER.js";import{b as q}from"./chunk-FCOVZEHC.js";import{a as h}from"./chunk-7N7YHRPA.js";import{b as w}from"./chunk-23AVKNCC.js";import{a as k}from"./chunk-P4S537UY.js";import{a as R}from"./chunk-UK2ZEQBN.js";import{c as A,f as H}from"./chunk-FS3MTRC3.js";import{a as G}from"./chunk-KYLWO3YR.js";import{a as D}from"./chunk-5NSAJ3SX.js";import{a as T}from"./chunk-UV7BOOVA.js";import{a as b}from"./chunk-GBJ4SP2Y.js";import{b as I,d as S,f as g}from"./chunk-LIUATY6B.js";import{b as P}from"./chunk-FANRUDPK.js";import{a as f}from"./chunk-LCAPXVGE.js";import"./chunk-ECPWEUBG.js";import{a as p}from"./chunk-UGRBWOQE.js";import{b as x,e as s}from"./chunk-6XM52E7W.js";import{a as c}from"./chunk-C2UDBDKV.js";import{a as i}from"./chunk-BCRV6HG6.js";import{b as n}from"./chunk-RCHKJINV.js";import"./chunk-EZSEQHRH.js";import{a as B}from"./chunk-3IZAFXL6.js";import"./chunk-23PSWIUF.js";import{b as m}from"./chunk-IEFQ6PGY.js";import"./chunk-IPYZIIRV.js";import{b as u}from"./chunk-NM74WWXQ.js";import{b as d}from"./chunk-OYHUG47P.js";import"./chunk-WEEGH2F4.js";import"./chunk-EG7U7PM3.js";import"./chunk-AYJMIZZ3.js";import"./chunk-XDUIVR6I.js";import"./chunk-HZ6A5QFC.js";import"./chunk-6LT7O7T2.js";import"./chunk-DINNT5P2.js";import{a as o,b as t,c as a}from"./chunk-3OQA4BKQ.js";import"./chunk-GRL4DWKG.js";import"./chunk-3USCFSFQ.js";import"./chunk-7GK5LKBV.js";import"./chunk-HBPBDC7T.js";import{a as l}from"./chunk-HD7EU6S5.js";import"./chunk-5MOOXA2X.js";import{b as e}from"./chunk-4OT5AMS5.js";import"./chunk-BWWXE4SL.js";export{r as BlAccordion,l as BlAccordionGroup,f as BlAlert,p as BlBadge,u as BlButton,m as BlCalendar,x as BlCheckbox,s as BlCheckboxGroup,c as BlDatePicker,T as BlDialog,b as BlDrawer,g as BlDropdown,P as BlDropdownGroup,S as BlDropdownItem,a as BlIcon,B as BlInput,h as BlLink,w as BlNotification,C as BlNotificationCard,k as BlPagination,n as BlPopover,R as BlProgressIndicator,A as BlRadio,H as BlRadioGroup,G as BlSelect,D as BlSelectOption,d as BlSpinner,I as BlSplitButton,v as BlStepper,N as BlStepperItem,y as BlSwitch,O as BlTab,j as BlTabGroup,L as BlTabPanel,q as BlTable,z as BlTableBody,J as BlTableCell,E as BlTableHeader,K as BlTableHeaderCell,F as BlTableRow,M as BlTag,Q as BlTextarea,i as BlTooltip,t as getIconPath,e as litHtmlRenderer,o as setIconPath};
|
|
2
2
|
//# sourceMappingURL=baklava.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as o}from"./chunk-GRL4DWKG.js";import{a as p,b as n,c as m,e as b}from"./chunk-5MOOXA2X.js";import{a as c,b as r,f as h}from"./chunk-4OT5AMS5.js";import{d as i}from"./chunk-BWWXE4SL.js";var u=d=>{let l=d.match(/^(\d+(\.\d+)?)(.*)$/);if(!l)return null;let e=parseFloat(l[1]),a=l[3],s;switch(a){case"px":s=e;break;case"vw":s=e*window.innerWidth/100;break;case"%":s=e*window.innerWidth/100;break;default:s=null;break}return s};var
|
|
1
|
+
import{a as o}from"./chunk-GRL4DWKG.js";import{a as p,b as n,c as m,e as b}from"./chunk-5MOOXA2X.js";import{a as c,b as r,f as h}from"./chunk-4OT5AMS5.js";import{d as i}from"./chunk-BWWXE4SL.js";var u=d=>{let l=d.match(/^(\d+(\.\d+)?)(.*)$/);if(!l)return null;let e=parseFloat(l[1]),a=l[3],s;switch(a){case"px":s=e;break;case"vw":s=e*window.innerWidth/100;break;case"%":s=e*window.innerWidth/100;break;default:s=null;break}return s};var f=c`.drawer{box-sizing:border-box;position:fixed;display:flex;top:0;bottom:0;inset-inline-end:0;width:var(--bl-drawer-current-width,424px);padding:var(--bl-size-xl);padding-top:max(env(safe-area-inset-top),var(--bl-size-xl));padding-inline-end:max(env(safe-area-inset-right),var(--bl-size-xl));padding-bottom:max(env(safe-area-inset-bottom),var(--bl-size-xl));background:var(--bl-color-neutral-full);box-shadow:var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);transition:right var(--bl-drawer-animation-duration, .25s);z-index:var(--bl-index-sticky)}iframe{height:100%;width:100%;border:none}.container{display:flex;flex-direction:column;gap:var(--bl-size-xl);flex:1;width:100%}header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--bl-size-2xs)}header .header-buttons{display:flex;gap:var(--bl-size-xl);margin-inline-start:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);overflow:hidden;margin:0;padding:0}.content{flex:1;overflow-y:scroll}.iframe-content{flex:1}`,w=f;var t=class extends h{constructor(){super(...arguments);this.open=!1;this.width="424px";this.domExistence=!1}static get styles(){return[w]}connectedCallback(){super.connectedCallback(),window==null||window.addEventListener("bl-drawer-open",e=>{e.target!==this&&this.closeDrawer()}),this.resizeDrawerWidth(),window==null||window.addEventListener("resize",()=>this.resizeDrawerWidth()),window==null||window.addEventListener("load",()=>this.resizeDrawerWidth())}disconnectedCallback(){super.disconnectedCallback(),window==null||window.removeEventListener("resize",()=>this.resizeDrawerWidth()),window==null||window.addEventListener("load",()=>this.resizeDrawerWidth())}updated(e){e.has("open")&&this.toggleDialogHandler(),e.has("width")&&this.resizeDrawerWidth()}resizeDrawerWidth(){let e=u(this.width),a=!e||e<100?"424px":this.width;e&&((window==null?void 0:window.innerWidth)<e?this.style.setProperty("--bl-drawer-current-width","calc(100vw - 24px)"):this.style.setProperty("--bl-drawer-current-width",a))}toggleDialogHandler(){this.open?(this.domExistenceSchedule&&clearTimeout(this.domExistenceSchedule),this.domExistence=!0,window.setTimeout(()=>{this.embedUrl&&this._drawerIframe&&(this._drawerIframe.src=this.embedUrl)}),this.onOpen("")):(this.domExistenceSchedule=window.setTimeout(()=>{this.domExistence=!1},1e3),this.onClose(""))}closeDrawer(){this.open=!1}renderContent(){let e=this.embedUrl?r`<iframe id="drawer-iframe" src=${this.embedUrl}></iframe>`:r`<slot></slot>`;return r`<section class=${this.embedUrl?"iframe-content":"content"}>
|
|
2
2
|
${e}
|
|
3
3
|
</section>`}renderContainer(){let e=this.caption?r`<h2 id="drawer-caption">${this.caption}</h2>`:"",a=this.externalLink?r`<bl-button
|
|
4
4
|
icon="external_link"
|
|
@@ -24,4 +24,4 @@ import{a as o}from"./chunk-GRL4DWKG.js";import{a as p,b as n,c as m,e as b}from"
|
|
|
24
24
|
</header>
|
|
25
25
|
${this.renderContent()}
|
|
26
26
|
</div>`}render(){return this.domExistence?r`<div class="drawer">${this.renderContainer()}</div>`:r``}};i([n({type:Boolean,reflect:!0})],t.prototype,"open",2),i([n({type:String})],t.prototype,"caption",2),i([n({type:String,attribute:"embed-url"})],t.prototype,"embedUrl",2),i([n({type:String,attribute:"external-link"})],t.prototype,"externalLink",2),i([n({type:String,attribute:"width"})],t.prototype,"width",2),i([o("bl-drawer-open")],t.prototype,"onOpen",2),i([o("bl-drawer-close")],t.prototype,"onClose",2),i([b("#drawer-iframe")],t.prototype,"_drawerIframe",2),i([m()],t.prototype,"domExistence",2),t=i([p("bl-drawer")],t);export{t as a};
|
|
27
|
-
//# sourceMappingURL=chunk-
|
|
27
|
+
//# sourceMappingURL=chunk-GBJ4SP2Y.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/utilities/style-to-px.converter.ts", "../src/components/drawer/bl-drawer.css", "../src/components/drawer/bl-drawer.ts"],
|
|
4
|
+
"sourcesContent": ["export const styleToPixelConverter = (styleValue: string): number | null => {\n const match = styleValue.match(/^(\\d+(\\.\\d+)?)(.*)$/);\n\n if (!match) return null;\n\n const value = parseFloat(match[1]);\n const unit = match[3];\n\n let styleInPixel: number | null;\n\n switch (unit) {\n case \"px\":\n styleInPixel = value;\n break;\n case \"vw\":\n styleInPixel = (value * window.innerWidth) / 100;\n break;\n case \"%\":\n styleInPixel = (value * window.innerWidth) / 100;\n break;\n default:\n styleInPixel = null;\n break;\n }\n return styleInPixel;\n};\n", "import {css} from 'lit';\nexport const styles = css`.drawer{box-sizing:border-box;position:fixed;display:flex;top:0;bottom:0;inset-inline-end:0;width:var(--bl-drawer-current-width,424px);padding:var(--bl-size-xl);padding-top:max(env(safe-area-inset-top),var(--bl-size-xl));padding-inline-end:max(env(safe-area-inset-right),var(--bl-size-xl));padding-bottom:max(env(safe-area-inset-bottom),var(--bl-size-xl));background:var(--bl-color-neutral-full);box-shadow:var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);transition:right var(--bl-drawer-animation-duration, .25s);z-index:var(--bl-index-sticky)}iframe{height:100%;width:100%;border:none}.container{display:flex;flex-direction:column;gap:var(--bl-size-xl);flex:1;width:100%}header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--bl-size-2xs)}header .header-buttons{display:flex;gap:var(--bl-size-xl);margin-inline-start:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);overflow:hidden;margin:0;padding:0}.content{flex:1;overflow-y:scroll}.iframe-content{flex:1}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport { styleToPixelConverter } from \"../../utilities/style-to-px.converter\";\nimport \"../button/bl-button\";\nimport style from \"./bl-drawer.css\";\n\n/**\n * @tag bl-drawer\n * @summary Baklava Drawer component\n *\n * @cssproperty [--bl-drawer-animation-duration=250ms] Drawer slide in animation duration\n */\n\n@customElement(\"bl-drawer\")\nexport default class BlDrawer extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets drawer open-close status\n */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /**\n * Sets the drawer title\n */\n @property({ type: String })\n caption?: string;\n\n /**\n * Sets the drawer embed url for iframe\n */\n @property({ type: String, attribute: \"embed-url\" })\n embedUrl?: string;\n\n /**\n * Sets the drawer external link\n */\n @property({ type: String, attribute: \"external-link\" })\n externalLink?: string;\n\n /**\n * Sets the drawer width\n */\n @property({ type: String, attribute: \"width\" })\n width: string = \"424px\";\n\n /**\n * Fires when the drawer is opened\n */\n @event(\"bl-drawer-open\") private onOpen: EventDispatcher<string>;\n\n /**\n * Fires when the drawer is closed\n */\n @event(\"bl-drawer-close\") private onClose: EventDispatcher<string>;\n\n @query(\"#drawer-iframe\")\n _drawerIframe: HTMLIFrameElement;\n\n connectedCallback() {\n super.connectedCallback();\n window?.addEventListener(\"bl-drawer-open\", event => {\n if (event.target !== this) this.closeDrawer();\n });\n this.resizeDrawerWidth();\n\n window?.addEventListener(\"resize\", () => this.resizeDrawerWidth());\n window?.addEventListener(\"load\", () => this.resizeDrawerWidth());\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n window?.removeEventListener(\"resize\", () => this.resizeDrawerWidth());\n window?.addEventListener(\"load\", () => this.resizeDrawerWidth());\n }\n\n updated(changedProperties: PropertyValues<this>) {\n if (changedProperties.has(\"open\")) {\n this.toggleDialogHandler();\n }\n\n if (changedProperties.has(\"width\")) {\n this.resizeDrawerWidth();\n }\n }\n\n private domExistenceSchedule: number;\n\n private resizeDrawerWidth() {\n const drawerWidth = styleToPixelConverter(this.width);\n\n const newWidth = !drawerWidth || drawerWidth < 100 ? \"424px\" : this.width;\n\n if (drawerWidth) {\n if (window?.innerWidth < drawerWidth) {\n this.style.setProperty(\"--bl-drawer-current-width\", \"calc(100vw - 24px)\");\n } else {\n this.style.setProperty(\"--bl-drawer-current-width\", newWidth);\n }\n }\n }\n\n private toggleDialogHandler() {\n if (this.open) {\n if (this.domExistenceSchedule) {\n clearTimeout(this.domExistenceSchedule);\n }\n this.domExistence = true;\n window.setTimeout(() => {\n if (this.embedUrl && this._drawerIframe) {\n this._drawerIframe.src = this.embedUrl;\n }\n });\n // FIXME: Allow events without payload\n this.onOpen(\"\");\n } else {\n // Give some time for exit animation\n this.domExistenceSchedule = window.setTimeout(() => {\n this.domExistence = false;\n }, 1000);\n\n // FIXME: Allow events without payload\n this.onClose(\"\");\n }\n }\n\n @state() private domExistence = false;\n\n private closeDrawer() {\n this.open = false;\n }\n\n private renderContent() {\n const content = this.embedUrl\n ? html`<iframe id=\"drawer-iframe\" src=${this.embedUrl}></iframe>`\n : html`<slot></slot>`;\n\n return html`<section class=${this.embedUrl ? \"iframe-content\" : \"content\"}>\n ${content}\n </section>`;\n }\n\n private renderContainer() {\n const title = this.caption ? html`<h2 id=\"drawer-caption\">${this.caption}</h2>` : \"\";\n const external_button = this.externalLink\n ? html`<bl-button\n icon=\"external_link\"\n variant=\"tertiary\"\n kind=\"neutral\"\n size=\"small\"\n href=\"${this.externalLink}\"\n target=\"_blank\"\n ></bl-button>`\n : \"\";\n\n return html`<div class=\"container\">\n <header>\n ${title}\n <div class=\"header-buttons\">\n ${external_button}\n <bl-button\n @click=\"${this.closeDrawer}\"\n icon=\"close\"\n label=\"close\"\n size=\"small\"\n variant=\"tertiary\"\n kind=\"neutral\"\n ></bl-button>\n </div>\n </header>\n ${this.renderContent()}\n </div>`;\n }\n\n render(): TemplateResult {\n if (this.domExistence) {\n return html`<div class=\"drawer\">${this.renderContainer()}</div>`;\n } else {\n return html``;\n }\n }\n}\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-drawer\": BlDrawer;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["styleToPixelConverter", "styleValue", "match", "value", "unit", "styleInPixel", "styles", "i", "bl_drawer_default", "BlDrawer", "s", "bl_drawer_default", "event", "changedProperties", "drawerWidth", "styleToPixelConverter", "newWidth", "content", "x", "title", "external_button", "__decorateClass", "e", "i", "t"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import{a as v}from"./chunk-6LT7O7T2.js";import{a as u}from"./chunk-DINNT5P2.js";import{a as h}from"./chunk-GRL4DWKG.js";import{a as d,b as o,c}from"./chunk-5MOOXA2X.js";import{a as p,b as e,f as l}from"./chunk-4OT5AMS5.js";import{d as i}from"./chunk-BWWXE4SL.js";var b=p`:host{display:block;position:relative;flex:1}.stepper-item{--item-color:var(--bl-color-neutral-light);--item-background:var(--bl-color-neutral-full);--active-color:var(--bl-color-primary);--hover-color:var(--bl-color-primary-highlight);--success-color:var(--bl-color-success);--error-color:var(--bl-color-danger);--disabled-color:var(--bl-color-neutral-lighter);--text-color-active:var(--bl-color-primary);--text-color-default:var(--bl-color-neutral-light);--description-color-active:var(--bl-color-neutral-darker);--description-color-default:var(--bl-color-neutral-light);display:flex;align-items:flex-start;gap:0;position:relative;background-color:transparent;padding:0;transition:.2s;width:100%;height:100%}.stepper-item.direction-horizontal{flex-direction:column;align-items:center;text-align:center;min-width:0}.stepper-item.direction-vertical{flex-direction:row;align-items:flex-start;text-align:left;width:100%}.vertical-layout{display:flex;flex-direction:row;align-items:stretch;gap:0;width:100%;height:100%}.stepper-item.direction-horizontal .connector-wrap{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0;position:relative;width:100%;flex:1 1 auto;min-width:0}.stepper-item.direction-vertical .connector-wrap{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;position:relative;flex:0 0 auto;min-height:100%}.stepper-item.direction-vertical:last-child .connector-wrap{min-height:auto}.connector{background-color:var(--bl-color-neutral-lighter);transition:background-color .2s;flex-shrink:0}.connector.completed{background-color:var(--bl-color-neutral-dark)}.stepper-item.direction-horizontal .connector{height:2px;flex:1 1 auto;min-width:48px}.connector-placeholder{height:2px;flex:1 1 auto;min-width:48px;visibility:hidden}.stepper-item.direction-vertical .connector{width:2px;flex:1 1 auto;min-height:16px}.stepper-item.direction-vertical .connector-placeholder:first-child,.stepper-item.direction-vertical .connector:first-child{display:none}.stepper-indicator{display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;min-height:32px;border-radius:50%;background-color:var(--item-background);border:2px solid var(--item-color);color:var(--item-color);font-weight:var(--bl-font-weight-medium);font-size:var(--bl-font-size-m);line-height:1;transition:.2s;flex-shrink:0;position:relative;z-index:2}.stepper-content{display:flex;flex-direction:column;gap:var(--bl-size-3xs);min-width:0;flex-shrink:0;margin-top:var(--bl-size-2xs);width:100%;text-align:center}.stepper-item.direction-vertical .stepper-content{margin-top:0;margin-left:var(--bl-size-xs);text-align:left;flex:1;padding-bottom:var(--bl-size-xl,24px);gap:0}.stepper-item.direction-vertical.type-dot .stepper-indicator{margin-top:2px}.stepper-title{font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);color:var(--text-color-default);line-height:1.5}.stepper-description{font-size:var(--bl-font-size-s);font-weight:var(--bl-font-weight-regular);color:var(--description-color-default);line-height:1.5}.step-dot{width:12px;height:12px;border-radius:50%;background-color:currentcolor;transition:.2s}.step-number{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);line-height:1}.step-icon{width:18px;height:18px;color:currentcolor;display:flex;align-items:center;justify-content:center}.stepper-item.variant-active .stepper-title{color:var(--text-color-active)}.stepper-item.variant-active .stepper-description{color:var(--description-color-active)}.stepper-item.variant-hover .stepper-title{color:var(--text-color-active)}.stepper-item.variant-hover .stepper-description{color:var(--description-color-active)}.stepper-item.variant-success .stepper-title{color:var(--success-color)}.stepper-item.variant-error .stepper-title{color:var(--error-color)}.stepper-item.disabled .stepper-indicator{border-color:var(--disabled-color);background-color:var(--item-background);color:var(--disabled-color)}.stepper-item.disabled .stepper-description,.stepper-item.disabled .stepper-title{color:var(--text-color-default)}.stepper-item.clickable{cursor:pointer}.stepper-item.clickable.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__ .stepper-indicator,.stepper-item.clickable:hover .stepper-indicator{transform:scale(1.05)}.stepper-item.clickable:focus{outline:0}.stepper-item.clickable:focus-visible .stepper-indicator{outline:2px solid var(--bl-color-primary);outline-offset:2px}.stepper-item.type-dot .stepper-indicator{width:12px!important;height:12px!important;min-width:12px!important;min-height:12px!important;border:none!important;background-color:var(--item-color);padding:0!important;border-radius:50%}.stepper-item.type-dot .step-dot{display:none}.stepper-item.type-number .stepper-indicator{border:2px solid var(--item-color);background-color:var(--item-background);color:var(--item-color)}.stepper-item.type-icon .stepper-indicator{border:none;background-color:var(--item-color);color:var(--item-background)}.stepper-item.variant-default.type-dot .stepper-indicator{background-color:var(--item-color)}.stepper-item.variant-hover.type-dot .stepper-indicator{background-color:var(--hover-color)}.stepper-item.clickable.type-dot.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__ .stepper-indicator,.stepper-item.clickable.type-dot:hover .stepper-indicator{background-color:var(--hover-color)!important}.stepper-item.clickable.variant-success.type-dot.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__ .stepper-indicator,.stepper-item.clickable.variant-success.type-dot:hover .stepper-indicator{background-color:var(--success-color)!important}.stepper-item.clickable.variant-error.type-dot.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__ .stepper-indicator,.stepper-item.clickable.variant-error.type-dot:hover .stepper-indicator{background-color:var(--error-color)!important}.stepper-item.clickable.variant-active.type-dot.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__ .stepper-indicator,.stepper-item.clickable.variant-active.type-dot:hover .stepper-indicator{background-color:var(--active-color)!important}.stepper-item.variant-active.type-dot .stepper-indicator{background-color:var(--active-color)}.stepper-item.variant-success.type-dot .stepper-indicator{background-color:var(--success-color)}.stepper-item.variant-error.type-dot .stepper-indicator{background-color:var(--error-color)}.stepper-item.variant-default.type-number .stepper-indicator{border-color:var(--item-color);background-color:var(--item-background);color:var(--item-color)}.stepper-item.variant-hover.type-number .stepper-indicator{border-color:var(--active-color);background-color:var(--item-background);color:var(--active-color)}.stepper-item.variant-active.type-number .stepper-indicator{border-color:var(--active-color);background-color:var(--active-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-success.type-number .stepper-indicator{border-color:var(--success-color);background-color:var(--success-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-error.type-number .stepper-indicator{border-color:var(--error-color);background-color:var(--error-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-default.type-icon .stepper-indicator{background-color:var(--item-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-active.type-icon .stepper-indicator,.stepper-item.variant-hover.type-icon .stepper-indicator{background-color:var(--active-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-success.type-icon .stepper-indicator{background-color:var(--success-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-error.type-icon .stepper-indicator{background-color:var(--error-color);color:var(--bl-color-neutral-full)}:host([dir=rtl]) .stepper-item.direction-horizontal{text-align:center}:host([dir=rtl]) .stepper-item.direction-vertical{text-align:right}@media (max-width:768px){.stepper-item{padding:var(--bl-size-3xs)}.stepper-content{gap:var(--bl-size-4xs)}.stepper-title{font:var(--bl-font-body-text-3)}.stepper-description{font-size:var(--bl-font-size-s)}}`,m=b;var t=class extends l{constructor(){super(...arguments);this.id="";this.variant="default";this._internalVariant="default";this.disabled=!1;this.icon="check";this.title="";this.description="";this.showLeadingConnector=!1;this.showTrailingConnector=!0;this.stepperType="dot";this.direction="horizontal";this.stepUsage="clickable"}static get styles(){return[m]}static get shadowRootOptions(){return{...l.shadowRootOptions,delegatesFocus:!0}}willUpdate(r){super.willUpdate(r),r.has("variant")&&(this._internalVariant=this.variant)}get isClickable(){return!this.disabled&&this.variant!=="error"&&this.stepUsage==="clickable"}get stepNumber(){let r=this.parentElement;return r?Array.from(r.children).filter(a=>a.tagName.toLowerCase()==="bl-stepper-item").indexOf(this)+1:1}get shouldShowIcon(){return this.stepperType==="icon"?!0:this.stepperType==="number"?this.variant==="success"||this.variant==="error":!1}get iconName(){return this.stepperType==="icon"?this.icon:this.variant==="success"?"check":this.variant==="error"?"close":"check"}handleClick(r){this.isClickable&&(r.preventDefault(),r.stopPropagation(),this.onItemClick(this.id))}handleKeyDown(r){this.isClickable&&(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),this.onItemClick(this.id))}handleMouseEnter(){this.isClickable&&this.variant==="default"&&(this._internalVariant="hover",this.requestUpdate())}handleMouseLeave(){this._internalVariant==="hover"&&(this._internalVariant="default",this.requestUpdate())}render(){let r={"stepper-item":!0,[`variant-${this._internalVariant}`]:!0,[`type-${this.stepperType}`]:!0,[`direction-${this.direction}`]:!0,disabled:this.disabled,clickable:this.isClickable},n=e`
|
|
2
|
+
<div class="stepper-content">
|
|
3
|
+
${this.title?e`<div class="stepper-title">${this.title}</div>`:""}
|
|
4
|
+
${this.description?e`<div class="stepper-description">${this.description}</div>`:""}
|
|
5
|
+
</div>
|
|
6
|
+
`,a=this.variant==="success"||this.variant==="active"?"completed":"default",s=e`
|
|
7
|
+
<div class="connector-wrap">
|
|
8
|
+
${this.direction==="horizontal"?e`
|
|
9
|
+
${this.showLeadingConnector?e`<div class="connector connector-leading ${a}"></div>`:e`<div class="connector-placeholder"></div>`}
|
|
10
|
+
<div class="stepper-indicator">
|
|
11
|
+
${this.shouldShowIcon?e`<bl-icon name="${this.iconName}" class="step-icon"></bl-icon>`:this.stepperType==="number"?e`<span class="step-number">${this.stepNumber}</span>`:""}
|
|
12
|
+
</div>
|
|
13
|
+
${this.showTrailingConnector?e`<div class="connector connector-trailing ${a}"></div>`:e`<div class="connector-placeholder"></div>`}
|
|
14
|
+
`:e`
|
|
15
|
+
${this.showLeadingConnector?e`<div class="connector connector-leading ${a}"></div>`:""}
|
|
16
|
+
<div class="stepper-indicator">
|
|
17
|
+
${this.shouldShowIcon?e`<bl-icon name="${this.iconName}" class="step-icon"></bl-icon>`:this.stepperType==="number"?e`<span class="step-number">${this.stepNumber}</span>`:""}
|
|
18
|
+
</div>
|
|
19
|
+
${this.showTrailingConnector?e`<div class="connector connector-trailing ${a}"></div>`:""}
|
|
20
|
+
`}
|
|
21
|
+
</div>
|
|
22
|
+
`;return e`
|
|
23
|
+
<div
|
|
24
|
+
class="${v(r)}"
|
|
25
|
+
role="button"
|
|
26
|
+
tabindex="${this.isClickable?"0":"-1"}"
|
|
27
|
+
aria-label="${u(this.title||`Step ${this.stepNumber}`)}"
|
|
28
|
+
aria-disabled="${this.disabled}"
|
|
29
|
+
@click="${this.handleClick}"
|
|
30
|
+
@keydown="${this.handleKeyDown}"
|
|
31
|
+
@mouseenter="${this.handleMouseEnter}"
|
|
32
|
+
@mouseleave="${this.handleMouseLeave}"
|
|
33
|
+
>
|
|
34
|
+
${this.direction==="horizontal"?e` ${s} ${n} `:e` <div class="vertical-layout">${s} ${n}</div> `}
|
|
35
|
+
</div>
|
|
36
|
+
`}};i([o({type:String,reflect:!0})],t.prototype,"id",2),i([o({type:String,reflect:!0})],t.prototype,"variant",2),i([o({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([o({type:String})],t.prototype,"icon",2),i([o({type:String,reflect:!0})],t.prototype,"title",2),i([o({type:String,reflect:!0})],t.prototype,"description",2),i([c()],t.prototype,"showLeadingConnector",2),i([c()],t.prototype,"showTrailingConnector",2),i([c()],t.prototype,"stepperType",2),i([c()],t.prototype,"direction",2),i([c()],t.prototype,"stepUsage",2),i([h("bl-stepper-item-click")],t.prototype,"onItemClick",2),t=i([d("bl-stepper-item")],t);export{t as a};
|
|
37
|
+
//# sourceMappingURL=chunk-Z5ZIVLUH.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/stepper/bl-stepper-item.css", "../src/components/stepper/bl-stepper-item.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:block;position:relative;flex:1}.stepper-item{--item-color:var(--bl-color-neutral-light);--item-background:var(--bl-color-neutral-full);--active-color:var(--bl-color-primary);--hover-color:var(--bl-color-primary-highlight);--success-color:var(--bl-color-success);--error-color:var(--bl-color-danger);--disabled-color:var(--bl-color-neutral-lighter);--text-color-active:var(--bl-color-primary);--text-color-default:var(--bl-color-neutral-light);--description-color-active:var(--bl-color-neutral-darker);--description-color-default:var(--bl-color-neutral-light);display:flex;align-items:flex-start;gap:0;position:relative;background-color:transparent;padding:0;transition:.2s;width:100%;height:100%}.stepper-item.direction-horizontal{flex-direction:column;align-items:center;text-align:center;min-width:0}.stepper-item.direction-vertical{flex-direction:row;align-items:flex-start;text-align:left;width:100%}.vertical-layout{display:flex;flex-direction:row;align-items:stretch;gap:0;width:100%;height:100%}.stepper-item.direction-horizontal .connector-wrap{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0;position:relative;width:100%;flex:1 1 auto;min-width:0}.stepper-item.direction-vertical .connector-wrap{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;position:relative;flex:0 0 auto;min-height:100%}.stepper-item.direction-vertical:last-child .connector-wrap{min-height:auto}.connector{background-color:var(--bl-color-neutral-lighter);transition:background-color .2s;flex-shrink:0}.connector.completed{background-color:var(--bl-color-neutral-dark)}.stepper-item.direction-horizontal .connector{height:2px;flex:1 1 auto;min-width:48px}.connector-placeholder{height:2px;flex:1 1 auto;min-width:48px;visibility:hidden}.stepper-item.direction-vertical .connector{width:2px;flex:1 1 auto;min-height:16px}.stepper-item.direction-vertical .connector-placeholder:first-child,.stepper-item.direction-vertical .connector:first-child{display:none}.stepper-indicator{display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;min-height:32px;border-radius:50%;background-color:var(--item-background);border:2px solid var(--item-color);color:var(--item-color);font-weight:var(--bl-font-weight-medium);font-size:var(--bl-font-size-m);line-height:1;transition:.2s;flex-shrink:0;position:relative;z-index:2}.stepper-content{display:flex;flex-direction:column;gap:var(--bl-size-3xs);min-width:0;flex-shrink:0;margin-top:var(--bl-size-2xs);width:100%;text-align:center}.stepper-item.direction-vertical .stepper-content{margin-top:0;margin-left:var(--bl-size-xs);text-align:left;flex:1;padding-bottom:var(--bl-size-xl,24px);gap:0}.stepper-item.direction-vertical.type-dot .stepper-indicator{margin-top:2px}.stepper-title{font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);color:var(--text-color-default);line-height:1.5}.stepper-description{font-size:var(--bl-font-size-s);font-weight:var(--bl-font-weight-regular);color:var(--description-color-default);line-height:1.5}.step-dot{width:12px;height:12px;border-radius:50%;background-color:currentcolor;transition:.2s}.step-number{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);line-height:1}.step-icon{width:18px;height:18px;color:currentcolor;display:flex;align-items:center;justify-content:center}.stepper-item.variant-active .stepper-title{color:var(--text-color-active)}.stepper-item.variant-active .stepper-description{color:var(--description-color-active)}.stepper-item.variant-hover .stepper-title{color:var(--text-color-active)}.stepper-item.variant-hover .stepper-description{color:var(--description-color-active)}.stepper-item.variant-success .stepper-title{color:var(--success-color)}.stepper-item.variant-error .stepper-title{color:var(--error-color)}.stepper-item.disabled .stepper-indicator{border-color:var(--disabled-color);background-color:var(--item-background);color:var(--disabled-color)}.stepper-item.disabled .stepper-description,.stepper-item.disabled .stepper-title{color:var(--text-color-default)}.stepper-item.clickable{cursor:pointer}.stepper-item.clickable.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__ .stepper-indicator,.stepper-item.clickable:hover .stepper-indicator{transform:scale(1.05)}.stepper-item.clickable:focus{outline:0}.stepper-item.clickable:focus-visible .stepper-indicator{outline:2px solid var(--bl-color-primary);outline-offset:2px}.stepper-item.type-dot .stepper-indicator{width:12px!important;height:12px!important;min-width:12px!important;min-height:12px!important;border:none!important;background-color:var(--item-color);padding:0!important;border-radius:50%}.stepper-item.type-dot .step-dot{display:none}.stepper-item.type-number .stepper-indicator{border:2px solid var(--item-color);background-color:var(--item-background);color:var(--item-color)}.stepper-item.type-icon .stepper-indicator{border:none;background-color:var(--item-color);color:var(--item-background)}.stepper-item.variant-default.type-dot .stepper-indicator{background-color:var(--item-color)}.stepper-item.variant-hover.type-dot .stepper-indicator{background-color:var(--hover-color)}.stepper-item.clickable.type-dot.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__ .stepper-indicator,.stepper-item.clickable.type-dot:hover .stepper-indicator{background-color:var(--hover-color)!important}.stepper-item.clickable.variant-success.type-dot.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__ .stepper-indicator,.stepper-item.clickable.variant-success.type-dot:hover .stepper-indicator{background-color:var(--success-color)!important}.stepper-item.clickable.variant-error.type-dot.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__ .stepper-indicator,.stepper-item.clickable.variant-error.type-dot:hover .stepper-indicator{background-color:var(--error-color)!important}.stepper-item.clickable.variant-active.type-dot.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__ .stepper-indicator,.stepper-item.clickable.variant-active.type-dot:hover .stepper-indicator{background-color:var(--active-color)!important}.stepper-item.variant-active.type-dot .stepper-indicator{background-color:var(--active-color)}.stepper-item.variant-success.type-dot .stepper-indicator{background-color:var(--success-color)}.stepper-item.variant-error.type-dot .stepper-indicator{background-color:var(--error-color)}.stepper-item.variant-default.type-number .stepper-indicator{border-color:var(--item-color);background-color:var(--item-background);color:var(--item-color)}.stepper-item.variant-hover.type-number .stepper-indicator{border-color:var(--active-color);background-color:var(--item-background);color:var(--active-color)}.stepper-item.variant-active.type-number .stepper-indicator{border-color:var(--active-color);background-color:var(--active-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-success.type-number .stepper-indicator{border-color:var(--success-color);background-color:var(--success-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-error.type-number .stepper-indicator{border-color:var(--error-color);background-color:var(--error-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-default.type-icon .stepper-indicator{background-color:var(--item-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-active.type-icon .stepper-indicator,.stepper-item.variant-hover.type-icon .stepper-indicator{background-color:var(--active-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-success.type-icon .stepper-indicator{background-color:var(--success-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-error.type-icon .stepper-indicator{background-color:var(--error-color);color:var(--bl-color-neutral-full)}:host([dir=rtl]) .stepper-item.direction-horizontal{text-align:center}:host([dir=rtl]) .stepper-item.direction-vertical{text-align:right}@media (max-width:768px){.stepper-item{padding:var(--bl-size-3xs)}.stepper-content{gap:var(--bl-size-4xs)}.stepper-title{font:var(--bl-font-body-text-3)}.stepper-description{font-size:var(--bl-font-size-s)}}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport \"../icon/bl-icon\";\nimport { BaklavaIcon } from \"../icon/icon-list\";\nimport style from \"./bl-stepper-item.css\";\n\nexport type StepperItemVariant = \"default\" | \"active\" | \"success\" | \"error\";\ntype InternalStepperItemVariant = StepperItemVariant | \"hover\";\nexport type StepperType = \"dot\" | \"number\" | \"icon\";\nexport type StepperDirection = \"horizontal\" | \"vertical\";\n\n/**\n * @tag bl-stepper-item\n * @summary Baklava Stepper Item component for individual steps in a stepper\n *\n * @slot default - Step content (title and description)\n */\n\n@customElement(\"bl-stepper-item\")\nexport default class BlStepperItem extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * @internal\n */\n static get shadowRootOptions() {\n return { ...LitElement.shadowRootOptions, delegatesFocus: true };\n }\n\n /**\n * Defines stepper item's id\n */\n @property({ type: String, reflect: true })\n id: string = \"\";\n\n /**\n * Defines stepper item's status\n */\n @property({ type: String, reflect: true })\n variant: StepperItemVariant = \"default\";\n\n /**\n * Internal variant state that includes hover\n * @internal\n */\n private _internalVariant: InternalStepperItemVariant = \"default\";\n\n /**\n * Defines stepper item's interaction\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * If stepper type is icon, it should be rendered on stepper items\n */\n @property({ type: String })\n icon: BaklavaIcon = \"check\";\n\n /**\n * Defines stepper item's main title\n */\n @property({ type: String, reflect: true })\n title = \"\";\n\n /**\n * Defines stepper item's description\n */\n @property({ type: String, reflect: true })\n description = \"\";\n\n /**\n * Internal state to show leading connector (line before the step)\n * @internal\n */\n @state()\n showLeadingConnector = false;\n\n /**\n * Internal state to show trailing connector (line after the step)\n * @internal\n */\n @state()\n showTrailingConnector = true;\n\n /**\n * Internal state to track stepper type from parent\n * @internal\n */\n @state()\n stepperType: StepperType = \"dot\";\n\n /**\n * Internal state to track stepper direction from parent\n * @internal\n */\n @state()\n direction: StepperDirection = \"horizontal\";\n\n /**\n * Internal state to track stepper usage from parent\n * @internal\n */\n @state()\n stepUsage: \"clickable\" | \"non-clickable\" = \"clickable\";\n\n /**\n * Fires when stepper item is clicked\n */\n @event(\"bl-stepper-item-click\") private onItemClick: EventDispatcher<string>;\n\n willUpdate(changedProperties: Map<string | number | symbol, unknown>) {\n super.willUpdate(changedProperties);\n\n // Sync internal variant with public variant\n if (changedProperties.has(\"variant\")) {\n this._internalVariant = this.variant;\n }\n }\n\n private get isClickable(): boolean {\n return !this.disabled && this.variant !== \"error\" && this.stepUsage === \"clickable\";\n }\n\n /**\n * @internal\n */\n get stepNumber(): number {\n const parent = this.parentElement;\n\n if (!parent) return 1;\n\n const items = Array.from(parent.children).filter(\n child => child.tagName.toLowerCase() === \"bl-stepper-item\"\n );\n\n return items.indexOf(this) + 1;\n }\n\n /**\n * @internal\n */\n get shouldShowIcon(): boolean {\n if (this.stepperType === \"icon\") {\n return true;\n }\n if (this.stepperType === \"number\") {\n return this.variant === \"success\" || this.variant === \"error\";\n }\n return false;\n }\n\n /**\n * @internal\n */\n get iconName(): BaklavaIcon {\n if (this.stepperType === \"icon\") {\n return this.icon;\n }\n if (this.variant === \"success\") {\n return \"check\";\n }\n if (this.variant === \"error\") {\n return \"close\";\n }\n return \"check\";\n }\n\n private handleClick(event: Event) {\n if (!this.isClickable) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n this.onItemClick(this.id);\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (!this.isClickable) {\n return;\n }\n\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n this.onItemClick(this.id);\n }\n }\n\n private handleMouseEnter() {\n if (this.isClickable && this.variant === \"default\") {\n this._internalVariant = \"hover\";\n this.requestUpdate();\n }\n }\n\n private handleMouseLeave() {\n if (this._internalVariant === \"hover\") {\n this._internalVariant = \"default\";\n this.requestUpdate();\n }\n }\n\n render(): TemplateResult {\n const classes = {\n \"stepper-item\": true,\n [`variant-${this._internalVariant}`]: true,\n [`type-${this.stepperType}`]: true,\n [`direction-${this.direction}`]: true,\n disabled: this.disabled,\n clickable: this.isClickable,\n };\n\n const content = html`\n <div class=\"stepper-content\">\n ${this.title ? html`<div class=\"stepper-title\">${this.title}</div>` : \"\"}\n ${this.description ? html`<div class=\"stepper-description\">${this.description}</div>` : \"\"}\n </div>\n `;\n\n const connectorState =\n this.variant === \"success\" || this.variant === \"active\" ? \"completed\" : \"default\";\n\n const stepIndicator = html`\n <div class=\"connector-wrap\">\n ${this.direction === \"horizontal\"\n ? html`\n ${this.showLeadingConnector\n ? html`<div class=\"connector connector-leading ${connectorState}\"></div>`\n : html`<div class=\"connector-placeholder\"></div>`}\n <div class=\"stepper-indicator\">\n ${this.shouldShowIcon\n ? html`<bl-icon name=\"${this.iconName}\" class=\"step-icon\"></bl-icon>`\n : this.stepperType === \"number\"\n ? html`<span class=\"step-number\">${this.stepNumber}</span>`\n : \"\"}\n </div>\n ${this.showTrailingConnector\n ? html`<div class=\"connector connector-trailing ${connectorState}\"></div>`\n : html`<div class=\"connector-placeholder\"></div>`}\n `\n : html`\n ${this.showLeadingConnector\n ? html`<div class=\"connector connector-leading ${connectorState}\"></div>`\n : \"\"}\n <div class=\"stepper-indicator\">\n ${this.shouldShowIcon\n ? html`<bl-icon name=\"${this.iconName}\" class=\"step-icon\"></bl-icon>`\n : this.stepperType === \"number\"\n ? html`<span class=\"step-number\">${this.stepNumber}</span>`\n : \"\"}\n </div>\n ${this.showTrailingConnector\n ? html`<div class=\"connector connector-trailing ${connectorState}\"></div>`\n : \"\"}\n `}\n </div>\n `;\n\n return html`\n <div\n class=\"${classMap(classes)}\"\n role=\"button\"\n tabindex=\"${this.isClickable ? \"0\" : \"-1\"}\"\n aria-label=\"${ifDefined(this.title || `Step ${this.stepNumber}`)}\"\n aria-disabled=\"${this.disabled}\"\n @click=\"${this.handleClick}\"\n @keydown=\"${this.handleKeyDown}\"\n @mouseenter=\"${this.handleMouseEnter}\"\n @mouseleave=\"${this.handleMouseLeave}\"\n >\n ${this.direction === \"horizontal\"\n ? html` ${stepIndicator} ${content} `\n : html` <div class=\"vertical-layout\">${stepIndicator} ${content}</div> `}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-stepper-item\": BlStepperItem;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["styles", "i", "bl_stepper_item_default", "BlStepperItem", "s", "bl_stepper_item_default", "changedProperties", "parent", "child", "event", "classes", "content", "x", "connectorState", "stepIndicator", "o", "l", "__decorateClass", "e", "t"]
|
|
7
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a}from"../../chunk-
|
|
1
|
+
import{a}from"../../chunk-GBJ4SP2Y.js";import"../../chunk-NM74WWXQ.js";import"../../chunk-OYHUG47P.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-3OQA4BKQ.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-BWWXE4SL.js";export{a as default};
|
|
2
2
|
//# sourceMappingURL=bl-drawer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bl-notification.stories.d.ts","sourceRoot":"","sources":["../../../src/components/notification/bl-notification.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAI3D,OAAO,KAAK,EAAgB,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEzE,QAAA,MAAM,IAAI,EAAE,IAqEX,CAAC;AAEF,eAAe,IAAI,CAAC;AAYpB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,iBAAiB,CAAC;AAEtB,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"bl-notification.stories.d.ts","sourceRoot":"","sources":["../../../src/components/notification/bl-notification.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAI3D,OAAO,KAAK,EAAgB,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEzE,QAAA,MAAM,IAAI,EAAE,IAqEX,CAAC;AAEF,eAAe,IAAI,CAAC;AAYpB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,iBAAiB,CAAC;AAEtB,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AA8B/C,eAAO,MAAM,UAAU,EAAE,KAexB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA0B3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAwChC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAyBlC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA+BpC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAkDlC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAU9B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8F7B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAqIxB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{b as p}from"../../chunk-M4E4CVZ4.js";import{a as s}from"../../chunk-DINNT5P2.js";import{b as t}from"../../chunk-4OT5AMS5.js";import{e}from"../../chunk-BWWXE4SL.js";var
|
|
1
|
+
import{b as p}from"../../chunk-M4E4CVZ4.js";import{a as s}from"../../chunk-DINNT5P2.js";import{b as t}from"../../chunk-4OT5AMS5.js";import{e}from"../../chunk-BWWXE4SL.js";var N={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=N,c=i=>{let o=document.querySelector("bl-notification");return o==null?void 0:o.addNotification(i)},A=i=>JSON.stringify(i,null,6),r=i=>t`
|
|
2
2
|
<bl-notification
|
|
3
3
|
?no-animation=${i.noAnimation}
|
|
4
4
|
duration=${s(i.duration)}
|
|
@@ -8,6 +8,8 @@ import{b as p}from"../../chunk-M4E4CVZ4.js";import{a as s}from"../../chunk-DINNT
|
|
|
8
8
|
|
|
9
9
|
<script>
|
|
10
10
|
(function () {
|
|
11
|
+
window?.__applyStorybookTheme?.();
|
|
12
|
+
|
|
11
13
|
const notificationElement = document.querySelector("bl-notification");
|
|
12
14
|
const addButton = document.querySelector("bl-button#`,`");
|
|
13
15
|
|
|
@@ -16,12 +18,14 @@ import{b as p}from"../../chunk-M4E4CVZ4.js";import{a as s}from"../../chunk-DINNT
|
|
|
16
18
|
});
|
|
17
19
|
})();
|
|
18
20
|
<\/script>
|
|
19
|
-
`])),a,o,a,
|
|
21
|
+
`])),a,o,a,A(i))},w={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,E={render(i){return t(f||(f=e([`
|
|
20
22
|
`,`
|
|
21
23
|
<bl-button>Remove Notification</bl-button>
|
|
22
24
|
|
|
23
25
|
<script>
|
|
24
26
|
(function () {
|
|
27
|
+
window?.__applyStorybookTheme?.();
|
|
28
|
+
|
|
25
29
|
const notificationElement = document.querySelector("bl-notification");
|
|
26
30
|
const removeButton = document.querySelector("bl-button");
|
|
27
31
|
|
|
@@ -36,12 +40,14 @@ import{b as p}from"../../chunk-M4E4CVZ4.js";import{a as s}from"../../chunk-DINNT
|
|
|
36
40
|
});
|
|
37
41
|
})();
|
|
38
42
|
<\/script>
|
|
39
|
-
`])),r(i))}},m,
|
|
43
|
+
`])),r(i))}},m,g={render(i){return t(m||(m=e([`
|
|
40
44
|
`,`
|
|
41
45
|
<bl-button>Remove Notifications</bl-button>
|
|
42
46
|
|
|
43
47
|
<script>
|
|
44
48
|
(function () {
|
|
49
|
+
window?.__applyStorybookTheme?.();
|
|
50
|
+
|
|
45
51
|
const notificationElement = document.querySelector("bl-notification");
|
|
46
52
|
const removeButton = document.querySelector("bl-button");
|
|
47
53
|
|
|
@@ -70,10 +76,12 @@ import{b as p}from"../../chunk-M4E4CVZ4.js";import{a as s}from"../../chunk-DINNT
|
|
|
70
76
|
});
|
|
71
77
|
})();
|
|
72
78
|
<\/script>
|
|
73
|
-
`])),r(i))}},u
|
|
79
|
+
`])),r(i))}},u,h={render(i){return t(u||(u=e([`
|
|
74
80
|
`,`
|
|
75
81
|
<script>
|
|
76
82
|
(function () {
|
|
83
|
+
window?.__applyStorybookTheme?.();
|
|
84
|
+
|
|
77
85
|
const notificationElement = document.querySelector("bl-notification");
|
|
78
86
|
|
|
79
87
|
notificationElement.addNotification({
|
|
@@ -89,10 +97,12 @@ import{b as p}from"../../chunk-M4E4CVZ4.js";import{a as s}from"../../chunk-DINNT
|
|
|
89
97
|
});
|
|
90
98
|
})();
|
|
91
99
|
<\/script>
|
|
92
|
-
`])),r(i))}},y
|
|
100
|
+
`])),r(i))}},y,$={render(i){return t(y||(y=e([`
|
|
93
101
|
`,`
|
|
94
102
|
<script>
|
|
95
103
|
(function () {
|
|
104
|
+
window?.__applyStorybookTheme?.();
|
|
105
|
+
|
|
96
106
|
const notificationElement = document.querySelector("bl-notification");
|
|
97
107
|
|
|
98
108
|
notificationElement.addNotification({
|
|
@@ -114,10 +124,12 @@ import{b as p}from"../../chunk-M4E4CVZ4.js";import{a as s}from"../../chunk-DINNT
|
|
|
114
124
|
});
|
|
115
125
|
})();
|
|
116
126
|
<\/script>
|
|
117
|
-
`])),r(i))}},
|
|
127
|
+
`])),r(i))}},b,x={render(i){return t(b||(b=e([`
|
|
118
128
|
`,`
|
|
119
129
|
<script>
|
|
120
130
|
(function () {
|
|
131
|
+
window?.__applyStorybookTheme?.();
|
|
132
|
+
|
|
121
133
|
const notificationElement = document.querySelector("bl-notification");
|
|
122
134
|
|
|
123
135
|
const notification = notificationElement.addNotification({
|
|
@@ -145,7 +157,7 @@ import{b as p}from"../../chunk-M4E4CVZ4.js";import{a as s}from"../../chunk-DINNT
|
|
|
145
157
|
${n({caption:"Notification Caption",description:"Notification Variant: success",permanent:!0,variant:"success",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Success")}
|
|
146
158
|
${n({caption:"Notification Caption",description:"Notification Variant: warning",permanent:!0,variant:"warning",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Warning")}
|
|
147
159
|
${n({caption:"Notification Caption",description:"Notification Variant: error",permanent:!0,variant:"error",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Error")}
|
|
148
|
-
`},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(){}}})}},
|
|
160
|
+
`},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(){}}})}},T={render(i){return t`
|
|
149
161
|
<div class="rtl-container" dir="rtl" lang="ar">
|
|
150
162
|
${r(i)}
|
|
151
163
|
${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")}
|
|
@@ -161,5 +173,5 @@ import{b as p}from"../../chunk-M4E4CVZ4.js";import{a as s}from"../../chunk-DINNT
|
|
|
161
173
|
padding: 1rem;
|
|
162
174
|
}
|
|
163
175
|
</style>
|
|
164
|
-
`},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,
|
|
176
|
+
`},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,w as AddExample,P as PermanentExample,h as PrimaryActionExample,T as RTLExample,g as RemoveAwaitExample,E as RemoveExample,$ as SecondaryActionExample,q as VariantsExample,k as default};
|
|
165
177
|
//# sourceMappingURL=bl-notification.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/notification/bl-notification.stories.ts"],
|
|
4
|
-
"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"],
|
|
5
|
-
"mappings": "2KAMA,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,
|
|
4
|
+
"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 window?.__applyStorybookTheme?.();\n\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 window?.__applyStorybookTheme?.();\n\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 window?.__applyStorybookTheme?.();\n\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 window?.__applyStorybookTheme?.();\n\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 window?.__applyStorybookTheme?.();\n\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 window?.__applyStorybookTheme?.();\n\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"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"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a}from"../../chunk-
|
|
1
|
+
import{a}from"../../chunk-Z5ZIVLUH.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-3OQA4BKQ.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-BWWXE4SL.js";export{a as default};
|
|
2
2
|
//# sourceMappingURL=bl-stepper-item.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a}from"../../chunk-BDTCJ2JC.js";import"../../chunk-
|
|
1
|
+
import{a}from"../../chunk-BDTCJ2JC.js";import"../../chunk-Z5ZIVLUH.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-3OQA4BKQ.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-BWWXE4SL.js";export{a as default};
|
|
2
2
|
//# sourceMappingURL=bl-stepper.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
:root[data-theme=dark],.dark-theme{--bl-color-neutral-none: #f0f5ff;--bl-color-neutral-darkest: #f1f2f7;--bl-color-neutral-darker: #afbbca;--bl-color-neutral-dark: #95a1b5;--bl-color-neutral-light: #6e7787;--bl-color-neutral-lighter: #273142;--bl-color-neutral-lightest: #0f131a;--bl-color-neutral-full: #030713;--bl-color-primary: #fb882b;--bl-color-primary-highlight: #d46b00;--bl-color-primary-contrast: #1f1d18;--bl-color-success: #3ac96b;--bl-color-success-highlight: #00a84e;--bl-color-success-contrast: #1a1e1a;--bl-color-danger: #fb8179;--bl-color-danger-highlight: #d8625b;--bl-color-danger-contrast: #211b1a;--bl-color-warning: #e09b1a;--bl-color-warning-highlight: #ba7f00;--bl-color-warning-contrast: #1f1c18;--bl-color-info: #76aef5;--bl-color-info-highlight: #588ed4;--bl-color-info-contrast: #1a1d22;--bl-size-4xs: .125rem;--bl-size-3xs: .25rem;--bl-size-2xs: .5rem;--bl-size-xs: .75rem;--bl-size-s: .875rem;--bl-size-m: 1rem;--bl-size-l: 1.25rem;--bl-size-xl: 1.5rem;--bl-size-2xl: 2rem;--bl-size-3xl: 2.5rem;--bl-size-4xl: 3rem;--bl-size-5xl: 4rem;--bl-size-6xl: 5rem;--bl-index-deep: -1;--bl-index-base: 1;--bl-index-popover: 100;--bl-index-tooltip: 200;--bl-index-sticky: 300;--bl-index-overlay: 400;--bl-index-dialog: 500;--bl-index-notification: 600;--bl-font-family: "Rubik Variable", sans-serif;--bl-font-weight-light: 300;--bl-font-weight-regular: 400;--bl-font-weight-medium: 500;--bl-font-weight-semibold: 600;--bl-font-weight-bold: 700;--bl-font-size-2xs: .5rem;--bl-font-size-xs: .625rem;--bl-font-size-s: .75rem;--bl-font-size-m: .875rem;--bl-font-size-l: 1rem;--bl-font-size-xl: 1.25rem;--bl-font-size-2xl: 1.5rem;--bl-font-size-3xl: 1.75rem;--bl-font-size-4xl: 2rem;--bl-font-size-5xl: 3rem;--bl-font-size-6xl: 4rem;--bl-border-radius-xs: .125rem;--bl-border-radius-s: .25rem;--bl-border-radius-m: .375rem;--bl-border-radius-l: .5rem;--bl-border-radius-pill: 62.438rem;--bl-border-radius-circle: 50%;--bl-font-display-font-size: var(--bl-font-size-5xl);--bl-font-display-line-height: calc(var(--bl-font-display-font-size) + var(--bl-size-2xs));--bl-font-display-size: var(--bl-font-display-font-size) / var(--bl-font-display-line-height);--bl-font-display: var(--bl-font-display-size) var(--bl-font-family);--bl-font-display-light: var(--bl-font-weight-light) var(--bl-font-display);--bl-font-display-regular: var(--bl-font-weight-regular) var(--bl-font-display);--bl-font-display-medium: var(--bl-font-weight-medium) var(--bl-font-display);--bl-font-display-semibold: var(--bl-font-weight-semibold) var(--bl-font-display);--bl-font-display-bold: var(--bl-font-weight-bold) var(--bl-font-display);--bl-font-heading-1-font-size: var(--bl-font-size-4xl);--bl-font-heading-1-line-height: calc(var(--bl-font-heading-1-font-size) + var(--bl-size-3xs));--bl-font-heading-1-size: var(--bl-font-heading-1-font-size) / var(--bl-font-heading-1-line-height);--bl-font-heading-1: var(--bl-font-heading-1-size) var(--bl-font-family);--bl-font-heading-1-regular: var(--bl-font-weight-regular) var(--bl-font-heading-1);--bl-font-heading-1-medium: var(--bl-font-weight-medium) var(--bl-font-heading-1);--bl-font-heading-1-semibold: var(--bl-font-weight-semibold) var(--bl-font-heading-1);--bl-font-heading-1-bold: var(--bl-font-weight-bold) var(--bl-font-heading-1);--bl-font-heading-2-font-size: var(--bl-font-size-3xl);--bl-font-heading-2-line-height: calc(var(--bl-font-heading-2-font-size) + var(--bl-size-3xs));--bl-font-heading-2-size: var(--bl-font-heading-2-font-size) / var(--bl-font-heading-2-line-height);--bl-font-heading-2: var(--bl-font-heading-2-size) var(--bl-font-family);--bl-font-heading-2-regular: var(--bl-font-weight-regular) var(--bl-font-heading-2);--bl-font-heading-2-medium: var(--bl-font-weight-medium) var(--bl-font-heading-2);--bl-font-heading-2-semibold: var(--bl-font-weight-semibold) var(--bl-font-heading-2);--bl-font-heading-2-bold: var(--bl-font-weight-bold) var(--bl-font-heading-2);--bl-font-heading-3-font-size: var(--bl-font-size-2xl);--bl-font-heading-3-line-height: calc(var(--bl-font-heading-3-font-size) + var(--bl-size-3xs));--bl-font-heading-3-size: var(--bl-font-heading-3-font-size) / var(--bl-font-heading-3-line-height);--bl-font-heading-3: var(--bl-font-heading-3-size) var(--bl-font-family);--bl-font-heading-3-regular: var(--bl-font-weight-regular) var(--bl-font-heading-3);--bl-font-heading-3-medium: var(--bl-font-weight-medium) var(--bl-font-heading-3);--bl-font-heading-3-semibold: var(--bl-font-weight-semibold) var(--bl-font-heading-3);--bl-font-heading-3-bold: var(--bl-font-weight-bold) var(--bl-font-heading-3);--bl-font-title-1-font-size: var(--bl-font-size-xl);--bl-font-title-1-line-height: calc(var(--bl-font-title-1-font-size) + var(--bl-size-3xs));--bl-font-title-1-size: var(--bl-font-title-1-font-size) / var(--bl-font-title-1-line-height);--bl-font-title-1: var(--bl-font-title-1-size) var(--bl-font-family);--bl-font-title-1-regular: var(--bl-font-weight-regular) var(--bl-font-title-1);--bl-font-title-1-medium: var(--bl-font-weight-medium) var(--bl-font-title-1);--bl-font-title-1-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-1);--bl-font-title-1-bold: var(--bl-font-weight-bold) var(--bl-font-title-1);--bl-font-title-2-font-size: var(--bl-font-size-l);--bl-font-title-2-line-height: calc(var(--bl-font-title-2-font-size) + var(--bl-size-3xs));--bl-font-title-2-size: var(--bl-font-title-2-font-size) / var(--bl-font-title-2-line-height);--bl-font-title-2: var(--bl-font-title-2-size) var(--bl-font-family);--bl-font-title-2-regular: var(--bl-font-weight-regular) var(--bl-font-title-2);--bl-font-title-2-medium: var(--bl-font-weight-medium) var(--bl-font-title-2);--bl-font-title-2-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-2);--bl-font-title-2-bold: var(--bl-font-weight-bold) var(--bl-font-title-2);--bl-font-title-3-font-size: var(--bl-font-size-m);--bl-font-title-3-line-height: calc(var(--bl-font-title-3-font-size) + var(--bl-size-4xs));--bl-font-title-3-size: var(--bl-font-title-3-font-size) / var(--bl-font-title-3-line-height);--bl-font-title-3: var(--bl-font-title-3-size) var(--bl-font-family);--bl-font-title-3-regular: var(--bl-font-weight-regular) var(--bl-font-title-3);--bl-font-title-3-medium: var(--bl-font-weight-medium) var(--bl-font-title-3);--bl-font-title-3-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-3);--bl-font-title-3-bold: var(--bl-font-weight-bold) var(--bl-font-title-3);--bl-font-title-4-font-size: var(--bl-font-size-s);--bl-font-title-4-line-height: calc(var(--bl-font-title-4-font-size) + var(--bl-size-4xs));--bl-font-title-4-size: var(--bl-font-title-4-font-size) / var(--bl-font-title-4-line-height);--bl-font-title-4: var(--bl-font-title-4-size) var(--bl-font-family);--bl-font-title-4-regular: var(--bl-font-weight-regular) var(--bl-font-title-4);--bl-font-title-4-medium: var(--bl-font-weight-medium) var(--bl-font-title-4);--bl-font-title-4-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-4);--bl-font-title-4-bold: var(--bl-font-weight-bold) var(--bl-font-title-4);--bl-font-body-text-1-font-size: var(--bl-font-size-l);--bl-font-body-text-1-line-height: calc( var(--bl-font-body-text-1-font-size) + var(--bl-size-4xs) );--bl-font-body-text-1-size: var(--bl-font-body-text-1-font-size) / var(--bl-font-body-text-1-line-height);--bl-font-body-text-1: var(--bl-font-body-text-1-size) var(--bl-font-family);--bl-font-body-text-1-regular: var(--bl-font-weight-regular) var(--bl-font-body-text-1);--bl-font-body-text-1-medium: var(--bl-font-weight-medium) var(--bl-font-body-text-1);--bl-font-body-text-2-font-size: var(--bl-font-size-m);--bl-font-body-text-2-line-height: calc( var(--bl-font-body-text-2-font-size) + var(--bl-size-4xs) );--bl-font-body-text-2-size: var(--bl-font-body-text-2-font-size) / var(--bl-font-body-text-2-line-height);--bl-font-body-text-2: var(--bl-font-body-text-2-size) var(--bl-font-family);--bl-font-body-text-2-regular: var(--bl-font-weight-regular) var(--bl-font-body-text-2);--bl-font-body-text-2-medium: var(--bl-font-weight-medium) var(--bl-font-body-text-2);--bl-font-body-text-3-font-size: var(--bl-font-size-s);--bl-font-body-text-3-line-height: calc( var(--bl-font-body-text-3-font-size) + var(--bl-size-4xs) );--bl-font-body-text-3-size: var(--bl-font-body-text-3-font-size) / var(--bl-font-body-text-3-line-height);--bl-font-body-text-3: var(--bl-font-body-text-3-size) var(--bl-font-family);--bl-font-body-text-3-regular: var(--bl-font-weight-regular) var(--bl-font-body-text-3);--bl-font-body-text-3-medium: var(--bl-font-weight-medium) var(--bl-font-body-text-3);--bl-font-caption-font-size: var(--bl-font-size-xs);--bl-font-caption-line-height: calc(var(--bl-font-caption-font-size) + var(--bl-size-4xs));--bl-font-caption-size: var(--bl-font-caption-font-size) / var(--bl-font-caption-line-height);--bl-font-caption: var(--bl-font-weight-medium) var(--bl-font-caption-size) var(--bl-font-family)}:root[dir=rtl]{direction:rtl;--bl-text-x-direction: -1;--bl-font-family: "Cairo"}
|
|
2
|
+
/*# sourceMappingURL=dark.css.map */
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/themes/dark.css"],
|
|
4
|
+
"sourcesContent": ["/**\n * Baklava Design System - Dark Theme\n * This theme provides dark mode support for all Baklava components\n *\n * Usage:\n * Add data-theme=\"dark\" attribute to :root or any parent element:\n * <html data-theme=\"dark\">\n *\n * Or use the .dark-theme class:\n * <div class=\"dark-theme\">\n * <!-- dark mode components -->\n * </div>\n */\n\n:root[data-theme=\"dark\"],\n.dark-theme {\n /* Neutral Colors - Dark Mode */\n --bl-color-neutral-none: #f0f5ff;\n --bl-color-neutral-darkest: #f1f2f7;\n --bl-color-neutral-darker: #afbbca;\n --bl-color-neutral-dark: #95a1b5;\n --bl-color-neutral-light: #6e7787;\n --bl-color-neutral-lighter: #273142;\n --bl-color-neutral-lightest: #0f131a;\n --bl-color-neutral-full: #030713;\n\n /* Primary Color - Slightly adjusted for dark mode */\n --bl-color-primary: #fb882b;\n --bl-color-primary-highlight: #d46b00;\n --bl-color-primary-contrast: #1f1d18;\n\n /* Success Color - Adjusted for dark mode */\n --bl-color-success: #3ac96b;\n --bl-color-success-highlight: #00a84e;\n --bl-color-success-contrast: #1a1e1a;\n\n /* Danger Color - Adjusted for dark mode */\n --bl-color-danger: #fb8179;\n --bl-color-danger-highlight: #d8625b;\n --bl-color-danger-contrast: #211b1a;\n\n /* Warning Color - Adjusted for dark mode */\n --bl-color-warning: #e09b1a;\n --bl-color-warning-highlight: #ba7f00;\n --bl-color-warning-contrast: #1f1c18;\n\n /* Info Color - Adjusted for dark mode */\n --bl-color-info: #76aef5;\n --bl-color-info-highlight: #588ed4;\n --bl-color-info-contrast: #1a1d22;\n\n /* Size and Spacing */\n --bl-size-4xs: 0.125rem; /* 2px */\n --bl-size-3xs: 0.25rem; /* 4px */\n --bl-size-2xs: 0.5rem; /* 8px */\n --bl-size-xs: 0.75rem; /* 12px */\n --bl-size-s: 0.875rem; /* 14px */\n --bl-size-m: 1rem; /* 16px */\n --bl-size-l: 1.25rem; /* 20px */\n --bl-size-xl: 1.5rem; /* 24px */\n --bl-size-2xl: 2rem; /* 32px */\n --bl-size-3xl: 2.5rem; /* 40px */\n --bl-size-4xl: 3rem; /* 48px */\n --bl-size-5xl: 4rem; /* 64px */\n --bl-size-6xl: 5rem; /* 80px */\n\n /* Z-indexes */\n --bl-index-deep: -1;\n --bl-index-base: 1;\n --bl-index-popover: 100;\n --bl-index-tooltip: 200;\n --bl-index-sticky: 300;\n --bl-index-overlay: 400;\n --bl-index-dialog: 500;\n --bl-index-notification: 600;\n\n /* Typography */\n --bl-font-family: \"Rubik Variable\", sans-serif;\n\n /* Font weights */\n --bl-font-weight-light: 300;\n --bl-font-weight-regular: 400;\n --bl-font-weight-medium: 500;\n --bl-font-weight-semibold: 600;\n --bl-font-weight-bold: 700;\n\n /* Font sizes */\n --bl-font-size-2xs: 0.5rem; /* 8px */\n --bl-font-size-xs: 0.625rem; /* 10px */\n --bl-font-size-s: 0.75rem; /* 12px */\n --bl-font-size-m: 0.875rem; /* 14px */\n --bl-font-size-l: 1rem; /* 16px */\n --bl-font-size-xl: 1.25rem; /* 20px */\n --bl-font-size-2xl: 1.5rem; /* 24px */\n --bl-font-size-3xl: 1.75rem; /* 28px */\n --bl-font-size-4xl: 2rem; /* 32px */\n --bl-font-size-5xl: 3rem; /* 48px */\n --bl-font-size-6xl: 4rem; /* 64px */\n\n /* Border radius */\n --bl-border-radius-xs: 0.125rem; /* 2px */\n --bl-border-radius-s: 0.25rem; /* 4px */\n --bl-border-radius-m: 0.375rem; /* 6px */\n --bl-border-radius-l: 0.5rem; /* 8px */\n --bl-border-radius-pill: 62.438rem; /* 999px */\n --bl-border-radius-circle: 50%;\n\n /* Font Style: Display */\n --bl-font-display-font-size: var(--bl-font-size-5xl);\n --bl-font-display-line-height: calc(var(--bl-font-display-font-size) + var(--bl-size-2xs));\n --bl-font-display-size: var(--bl-font-display-font-size) / var(--bl-font-display-line-height);\n --bl-font-display: var(--bl-font-display-size) var(--bl-font-family);\n --bl-font-display-light: var(--bl-font-weight-light) var(--bl-font-display);\n --bl-font-display-regular: var(--bl-font-weight-regular) var(--bl-font-display);\n --bl-font-display-medium: var(--bl-font-weight-medium) var(--bl-font-display);\n --bl-font-display-semibold: var(--bl-font-weight-semibold) var(--bl-font-display);\n --bl-font-display-bold: var(--bl-font-weight-bold) var(--bl-font-display);\n\n /* Font Style: Heading 1 */\n --bl-font-heading-1-font-size: var(--bl-font-size-4xl);\n --bl-font-heading-1-line-height: calc(var(--bl-font-heading-1-font-size) + var(--bl-size-3xs));\n --bl-font-heading-1-size: var(--bl-font-heading-1-font-size) /\n var(--bl-font-heading-1-line-height);\n --bl-font-heading-1: var(--bl-font-heading-1-size) var(--bl-font-family);\n --bl-font-heading-1-regular: var(--bl-font-weight-regular) var(--bl-font-heading-1);\n --bl-font-heading-1-medium: var(--bl-font-weight-medium) var(--bl-font-heading-1);\n --bl-font-heading-1-semibold: var(--bl-font-weight-semibold) var(--bl-font-heading-1);\n --bl-font-heading-1-bold: var(--bl-font-weight-bold) var(--bl-font-heading-1);\n\n /* Font Style: Heading 2 */\n --bl-font-heading-2-font-size: var(--bl-font-size-3xl);\n --bl-font-heading-2-line-height: calc(var(--bl-font-heading-2-font-size) + var(--bl-size-3xs));\n --bl-font-heading-2-size: var(--bl-font-heading-2-font-size) /\n var(--bl-font-heading-2-line-height);\n --bl-font-heading-2: var(--bl-font-heading-2-size) var(--bl-font-family);\n --bl-font-heading-2-regular: var(--bl-font-weight-regular) var(--bl-font-heading-2);\n --bl-font-heading-2-medium: var(--bl-font-weight-medium) var(--bl-font-heading-2);\n --bl-font-heading-2-semibold: var(--bl-font-weight-semibold) var(--bl-font-heading-2);\n --bl-font-heading-2-bold: var(--bl-font-weight-bold) var(--bl-font-heading-2);\n\n /* Font Style: Heading 3 */\n --bl-font-heading-3-font-size: var(--bl-font-size-2xl);\n --bl-font-heading-3-line-height: calc(var(--bl-font-heading-3-font-size) + var(--bl-size-3xs));\n --bl-font-heading-3-size: var(--bl-font-heading-3-font-size) /\n var(--bl-font-heading-3-line-height);\n --bl-font-heading-3: var(--bl-font-heading-3-size) var(--bl-font-family);\n --bl-font-heading-3-regular: var(--bl-font-weight-regular) var(--bl-font-heading-3);\n --bl-font-heading-3-medium: var(--bl-font-weight-medium) var(--bl-font-heading-3);\n --bl-font-heading-3-semibold: var(--bl-font-weight-semibold) var(--bl-font-heading-3);\n --bl-font-heading-3-bold: var(--bl-font-weight-bold) var(--bl-font-heading-3);\n\n /* Font Style: Title 1 */\n --bl-font-title-1-font-size: var(--bl-font-size-xl);\n --bl-font-title-1-line-height: calc(var(--bl-font-title-1-font-size) + var(--bl-size-3xs));\n --bl-font-title-1-size: var(--bl-font-title-1-font-size) / var(--bl-font-title-1-line-height);\n --bl-font-title-1: var(--bl-font-title-1-size) var(--bl-font-family);\n --bl-font-title-1-regular: var(--bl-font-weight-regular) var(--bl-font-title-1);\n --bl-font-title-1-medium: var(--bl-font-weight-medium) var(--bl-font-title-1);\n --bl-font-title-1-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-1);\n --bl-font-title-1-bold: var(--bl-font-weight-bold) var(--bl-font-title-1);\n\n /* Font Style: Title 2 */\n --bl-font-title-2-font-size: var(--bl-font-size-l);\n --bl-font-title-2-line-height: calc(var(--bl-font-title-2-font-size) + var(--bl-size-3xs));\n --bl-font-title-2-size: var(--bl-font-title-2-font-size) / var(--bl-font-title-2-line-height);\n --bl-font-title-2: var(--bl-font-title-2-size) var(--bl-font-family);\n --bl-font-title-2-regular: var(--bl-font-weight-regular) var(--bl-font-title-2);\n --bl-font-title-2-medium: var(--bl-font-weight-medium) var(--bl-font-title-2);\n --bl-font-title-2-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-2);\n --bl-font-title-2-bold: var(--bl-font-weight-bold) var(--bl-font-title-2);\n\n /* Font Style: Title 3 */\n --bl-font-title-3-font-size: var(--bl-font-size-m);\n --bl-font-title-3-line-height: calc(var(--bl-font-title-3-font-size) + var(--bl-size-4xs));\n --bl-font-title-3-size: var(--bl-font-title-3-font-size) / var(--bl-font-title-3-line-height);\n --bl-font-title-3: var(--bl-font-title-3-size) var(--bl-font-family);\n --bl-font-title-3-regular: var(--bl-font-weight-regular) var(--bl-font-title-3);\n --bl-font-title-3-medium: var(--bl-font-weight-medium) var(--bl-font-title-3);\n --bl-font-title-3-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-3);\n --bl-font-title-3-bold: var(--bl-font-weight-bold) var(--bl-font-title-3);\n\n /* Font Style: Title 4 */\n --bl-font-title-4-font-size: var(--bl-font-size-s);\n --bl-font-title-4-line-height: calc(var(--bl-font-title-4-font-size) + var(--bl-size-4xs));\n --bl-font-title-4-size: var(--bl-font-title-4-font-size) / var(--bl-font-title-4-line-height);\n --bl-font-title-4: var(--bl-font-title-4-size) var(--bl-font-family);\n --bl-font-title-4-regular: var(--bl-font-weight-regular) var(--bl-font-title-4);\n --bl-font-title-4-medium: var(--bl-font-weight-medium) var(--bl-font-title-4);\n --bl-font-title-4-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-4);\n --bl-font-title-4-bold: var(--bl-font-weight-bold) var(--bl-font-title-4);\n\n /* Font Style: Body Text 1 */\n --bl-font-body-text-1-font-size: var(--bl-font-size-l);\n --bl-font-body-text-1-line-height: calc(\n var(--bl-font-body-text-1-font-size) + var(--bl-size-4xs)\n );\n --bl-font-body-text-1-size: var(--bl-font-body-text-1-font-size) /\n var(--bl-font-body-text-1-line-height);\n --bl-font-body-text-1: var(--bl-font-body-text-1-size) var(--bl-font-family);\n --bl-font-body-text-1-regular: var(--bl-font-weight-regular) var(--bl-font-body-text-1);\n --bl-font-body-text-1-medium: var(--bl-font-weight-medium) var(--bl-font-body-text-1);\n\n /* Font Style: Body Text 2 */\n --bl-font-body-text-2-font-size: var(--bl-font-size-m);\n --bl-font-body-text-2-line-height: calc(\n var(--bl-font-body-text-2-font-size) + var(--bl-size-4xs)\n );\n --bl-font-body-text-2-size: var(--bl-font-body-text-2-font-size) /\n var(--bl-font-body-text-2-line-height);\n --bl-font-body-text-2: var(--bl-font-body-text-2-size) var(--bl-font-family);\n --bl-font-body-text-2-regular: var(--bl-font-weight-regular) var(--bl-font-body-text-2);\n --bl-font-body-text-2-medium: var(--bl-font-weight-medium) var(--bl-font-body-text-2);\n\n /* Font Style: Body Text 3 */\n --bl-font-body-text-3-font-size: var(--bl-font-size-s);\n --bl-font-body-text-3-line-height: calc(\n var(--bl-font-body-text-3-font-size) + var(--bl-size-4xs)\n );\n --bl-font-body-text-3-size: var(--bl-font-body-text-3-font-size) /\n var(--bl-font-body-text-3-line-height);\n --bl-font-body-text-3: var(--bl-font-body-text-3-size) var(--bl-font-family);\n --bl-font-body-text-3-regular: var(--bl-font-weight-regular) var(--bl-font-body-text-3);\n --bl-font-body-text-3-medium: var(--bl-font-weight-medium) var(--bl-font-body-text-3);\n\n /* Font Style: Caption */\n --bl-font-caption-font-size: var(--bl-font-size-xs);\n --bl-font-caption-line-height: calc(var(--bl-font-caption-font-size) + var(--bl-size-4xs));\n --bl-font-caption-size: var(--bl-font-caption-font-size) / var(--bl-font-caption-line-height);\n --bl-font-caption: var(--bl-font-weight-medium) var(--bl-font-caption-size) var(--bl-font-family);\n}\n\n:root[dir=\"rtl\"] {\n /* Direction */\n direction: rtl;\n\n --bl-text-x-direction: -1;\n\n /* Typography */\n --bl-font-family: \"Cairo\";\n}\n"],
|
|
5
|
+
"mappings": "AAcA,mCAGE,iCACA,oCACA,mCACA,iCACA,kCACA,oCACA,qCACA,iCAGA,4BACA,sCACA,qCAGA,4BACA,sCACA,qCAGA,2BACA,qCACA,oCAGA,4BACA,sCACA,qCAGA,yBACA,mCACA,kCAGA,uBACA,sBACA,qBACA,qBACA,qBACA,kBACA,qBACA,qBACA,oBACA,sBACA,oBACA,oBACA,oBAGA,oBACA,mBACA,wBACA,wBACA,uBACA,wBACA,uBACA,6BAGA,+CAGA,4BACA,8BACA,6BACA,+BACA,2BAGA,0BACA,2BACA,yBACA,0BACA,uBACA,2BACA,2BACA,4BACA,yBACA,yBACA,yBAGA,+BACA,6BACA,8BACA,4BACA,mCACA,+BAGA,qDACA,2FACA,8FACA,qEACA,4EACA,gFACA,8EACA,kFACA,0EAGA,uDACA,+FACA,oGAEA,yEACA,oFACA,kFACA,sFACA,8EAGA,uDACA,+FACA,oGAEA,yEACA,oFACA,kFACA,sFACA,8EAGA,uDACA,+FACA,oGAEA,yEACA,oFACA,kFACA,sFACA,8EAGA,oDACA,2FACA,8FACA,qEACA,gFACA,8EACA,kFACA,0EAGA,mDACA,2FACA,8FACA,qEACA,gFACA,8EACA,kFACA,0EAGA,mDACA,2FACA,8FACA,qEACA,gFACA,8EACA,kFACA,0EAGA,mDACA,2FACA,8FACA,qEACA,gFACA,8EACA,kFACA,0EAGA,uDACA,qGAGA,0GAEA,6EACA,wFACA,sFAGA,uDACA,qGAGA,0GAEA,6EACA,wFACA,sFAGA,uDACA,qGAGA,0GAEA,6EACA,wFACA,sFAGA,oDACA,2FACA,8FACA,kGAGF,eAEE,cAEA,0BAGA",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/themes/default.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@font-face{font-family:Rubik Variable;font-style:normal;font-display:var(--fontsource-display, swap);font-weight:300 900;src:url(../assets/rubik-cyrillic-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Rubik Variable;font-style:normal;font-display:var(--fontsource-display, swap);font-weight:300 900;src:url(../assets/rubik-cyrillic-wght-normal.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Rubik Variable;font-style:normal;font-display:var(--fontsource-display, swap);font-weight:300 900;src:url(../assets/rubik-hebrew-wght-normal.woff2) format("woff2-variations");unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}@font-face{font-family:Rubik Variable;font-style:normal;font-display:var(--fontsource-display, swap);font-weight:300 900;src:url(../assets/rubik-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02AF,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Rubik Variable;font-style:normal;font-display:var(--fontsource-display, swap);font-weight:300 900;src:url(../assets/rubik-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--bl-text-x-direction: 1;--bl-color-primary: #f27a1a;--bl-color-primary-highlight: #ef6114;--bl-color-primary-contrast: #fef2e8;--bl-color-success: #0bc15c;--bl-color-success-highlight: #09a44e;--bl-color-success-contrast: #e7f9ef;--bl-color-danger: #ff5043;--bl-color-danger-highlight: #ff3028;--bl-color-danger-contrast: #ffeeec;--bl-color-warning: #ffb600;--bl-color-warning-highlight: #ff9800;--bl-color-warning-contrast: #fff8e6;--bl-color-info: #5794ff;--bl-color-info-highlight: #457eff;--bl-color-info-contrast: #eef4ff;--bl-color-neutral-none: #000;--bl-color-neutral-darkest: #0f131a;--bl-color-neutral-darker: #273142;--bl-color-neutral-dark: #6e7787;--bl-color-neutral-light: #95a1b5;--bl-color-neutral-lighter: #afbbca;--bl-color-neutral-lightest: #f1f2f7;--bl-color-neutral-full: #fff;--bl-size-4xs: .125rem;--bl-size-3xs: .25rem;--bl-size-2xs: .5rem;--bl-size-xs: .75rem;--bl-size-s: .875rem;--bl-size-m: 1rem;--bl-size-l: 1.25rem;--bl-size-xl: 1.5rem;--bl-size-2xl: 2rem;--bl-size-3xl: 2.5rem;--bl-size-4xl: 3rem;--bl-size-5xl: 4rem;--bl-size-6xl: 5rem;--bl-index-deep: -1;--bl-index-base: 1;--bl-index-popover: 100;--bl-index-tooltip: 200;--bl-index-sticky: 300;--bl-index-overlay: 400;--bl-index-dialog: 500;--bl-index-notification: 600;--bl-font-family: "Rubik Variable", sans-serif;--bl-font-weight-light: 300;--bl-font-weight-regular: 400;--bl-font-weight-medium: 500;--bl-font-weight-semibold: 600;--bl-font-weight-bold: 700;--bl-font-size-2xs: .5rem;--bl-font-size-xs: .625rem;--bl-font-size-s: .75rem;--bl-font-size-m: .875rem;--bl-font-size-l: 1rem;--bl-font-size-xl: 1.25rem;--bl-font-size-2xl: 1.5rem;--bl-font-size-3xl: 1.75rem;--bl-font-size-4xl: 2rem;--bl-font-size-5xl: 3rem;--bl-font-size-6xl: 4rem;--bl-border-radius-xs: .125rem;--bl-border-radius-s: .25rem;--bl-border-radius-m: .375rem;--bl-border-radius-l: .5rem;--bl-border-radius-pill: 62.438rem;--bl-border-radius-circle: 50%;--bl-font-display-font-size: var(--bl-font-size-5xl);--bl-font-display-line-height: calc(var(--bl-font-display-font-size) + var(--bl-size-2xs));--bl-font-display-size: var(--bl-font-display-font-size) / var(--bl-font-display-line-height);--bl-font-display: var(--bl-font-display-size) var(--bl-font-family);--bl-font-display-light: var(--bl-font-weight-light) var(--bl-font-display);--bl-font-display-regular: var(--bl-font-weight-regular) var(--bl-font-display);--bl-font-display-medium: var(--bl-font-weight-medium) var(--bl-font-display);--bl-font-display-semibold: var(--bl-font-weight-semibold) var(--bl-font-display);--bl-font-display-bold: var(--bl-font-weight-bold) var(--bl-font-display);--bl-font-heading-1-font-size: var(--bl-font-size-4xl);--bl-font-heading-1-line-height: calc(var(--bl-font-heading-1-font-size) + var(--bl-size-3xs));--bl-font-heading-1-size: var(--bl-font-heading-1-font-size) / var(--bl-font-heading-1-line-height);--bl-font-heading-1: var(--bl-font-heading-1-size) var(--bl-font-family);--bl-font-heading-1-regular: var(--bl-font-weight-regular) var(--bl-font-heading-1);--bl-font-heading-1-medium: var(--bl-font-weight-medium) var(--bl-font-heading-1);--bl-font-heading-1-semibold: var(--bl-font-weight-semibold) var(--bl-font-heading-1);--bl-font-heading-1-bold: var(--bl-font-weight-bold) var(--bl-font-heading-1);--bl-font-heading-2-font-size: var(--bl-font-size-3xl);--bl-font-heading-2-line-height: calc(var(--bl-font-heading-2-font-size) + var(--bl-size-3xs));--bl-font-heading-2-size: var(--bl-font-heading-2-font-size) / var(--bl-font-heading-2-line-height);--bl-font-heading-2: var(--bl-font-heading-2-size) var(--bl-font-family);--bl-font-heading-2-regular: var(--bl-font-weight-regular) var(--bl-font-heading-2);--bl-font-heading-2-medium: var(--bl-font-weight-medium) var(--bl-font-heading-2);--bl-font-heading-2-semibold: var(--bl-font-weight-semibold) var(--bl-font-heading-2);--bl-font-heading-2-bold: var(--bl-font-weight-bold) var(--bl-font-heading-2);--bl-font-heading-3-font-size: var(--bl-font-size-2xl);--bl-font-heading-3-line-height: calc(var(--bl-font-heading-3-font-size) + var(--bl-size-3xs));--bl-font-heading-3-size: var(--bl-font-heading-3-font-size) / var(--bl-font-heading-3-line-height);--bl-font-heading-3: var(--bl-font-heading-3-size) var(--bl-font-family);--bl-font-heading-3-regular: var(--bl-font-weight-regular) var(--bl-font-heading-3);--bl-font-heading-3-medium: var(--bl-font-weight-medium) var(--bl-font-heading-3);--bl-font-heading-3-semibold: var(--bl-font-weight-semibold) var(--bl-font-heading-3);--bl-font-heading-3-bold: var(--bl-font-weight-bold) var(--bl-font-heading-3);--bl-font-title-1-font-size: var(--bl-font-size-xl);--bl-font-title-1-line-height: calc(var(--bl-font-title-1-font-size) + var(--bl-size-3xs));--bl-font-title-1-size: var(--bl-font-title-1-font-size) / var(--bl-font-title-1-line-height);--bl-font-title-1: var(--bl-font-title-1-size) var(--bl-font-family);--bl-font-title-1-regular: var(--bl-font-weight-regular) var(--bl-font-title-1);--bl-font-title-1-medium: var(--bl-font-weight-medium) var(--bl-font-title-1);--bl-font-title-1-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-1);--bl-font-title-1-bold: var(--bl-font-weight-bold) var(--bl-font-title-1);--bl-font-title-2-font-size: var(--bl-font-size-l);--bl-font-title-2-line-height: calc(var(--bl-font-title-2-font-size) + var(--bl-size-3xs));--bl-font-title-2-size: var(--bl-font-title-2-font-size) / var(--bl-font-title-2-line-height);--bl-font-title-2: var(--bl-font-title-2-size) var(--bl-font-family);--bl-font-title-2-regular: var(--bl-font-weight-regular) var(--bl-font-title-2);--bl-font-title-2-medium: var(--bl-font-weight-medium) var(--bl-font-title-2);--bl-font-title-2-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-2);--bl-font-title-2-bold: var(--bl-font-weight-bold) var(--bl-font-title-2);--bl-font-title-3-font-size: var(--bl-font-size-m);--bl-font-title-3-line-height: calc(var(--bl-font-title-3-font-size) + var(--bl-size-4xs));--bl-font-title-3-size: var(--bl-font-title-3-font-size) / var(--bl-font-title-3-line-height);--bl-font-title-3: var(--bl-font-title-3-size) var(--bl-font-family);--bl-font-title-3-regular: var(--bl-font-weight-regular) var(--bl-font-title-3);--bl-font-title-3-medium: var(--bl-font-weight-medium) var(--bl-font-title-3);--bl-font-title-3-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-3);--bl-font-title-3-bold: var(--bl-font-weight-bold) var(--bl-font-title-3);--bl-font-title-4-font-size: var(--bl-font-size-s);--bl-font-title-4-line-height: calc(var(--bl-font-title-4-font-size) + var(--bl-size-4xs));--bl-font-title-4-size: var(--bl-font-title-4-font-size) / var(--bl-font-title-4-line-height);--bl-font-title-4: var(--bl-font-title-4-size) var(--bl-font-family);--bl-font-title-4-regular: var(--bl-font-weight-regular) var(--bl-font-title-4);--bl-font-title-4-medium: var(--bl-font-weight-medium) var(--bl-font-title-4);--bl-font-title-4-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-4);--bl-font-title-4-bold: var(--bl-font-weight-bold) var(--bl-font-title-4);--bl-font-body-text-1-font-size: var(--bl-font-size-l);--bl-font-body-text-1-line-height: calc( var(--bl-font-body-text-1-font-size) + var(--bl-size-4xs) );--bl-font-body-text-1-size: var(--bl-font-body-text-1-font-size) / var(--bl-font-body-text-1-line-height);--bl-font-body-text-1: var(--bl-font-body-text-1-size) var(--bl-font-family);--bl-font-body-text-1-regular: var(--bl-font-weight-regular) var(--bl-font-body-text-1);--bl-font-body-text-1-medium: var(--bl-font-weight-medium) var(--bl-font-body-text-1);--bl-font-body-text-2-font-size: var(--bl-font-size-m);--bl-font-body-text-2-line-height: calc( var(--bl-font-body-text-2-font-size) + var(--bl-size-4xs) );--bl-font-body-text-2-size: var(--bl-font-body-text-2-font-size) / var(--bl-font-body-text-2-line-height);--bl-font-body-text-2: var(--bl-font-body-text-2-size) var(--bl-font-family);--bl-font-body-text-2-regular: var(--bl-font-weight-regular) var(--bl-font-body-text-2);--bl-font-body-text-2-medium: var(--bl-font-weight-medium) var(--bl-font-body-text-2);--bl-font-body-text-3-font-size: var(--bl-font-size-s);--bl-font-body-text-3-line-height: calc( var(--bl-font-body-text-3-font-size) + var(--bl-size-4xs) );--bl-font-body-text-3-size: var(--bl-font-body-text-3-font-size) / var(--bl-font-body-text-3-line-height);--bl-font-body-text-3: var(--bl-font-body-text-3-size) var(--bl-font-family);--bl-font-body-text-3-regular: var(--bl-font-weight-regular) var(--bl-font-body-text-3);--bl-font-body-text-3-medium: var(--bl-font-weight-medium) var(--bl-font-body-text-3);--bl-font-caption-font-size: var(--bl-font-size-xs);--bl-font-caption-line-height: calc(var(--bl-font-caption-font-size) + var(--bl-size-4xs));--bl-font-caption-size: var(--bl-font-caption-font-size) / var(--bl-font-caption-line-height);--bl-font-caption: var(--bl-font-weight-medium) var(--bl-font-caption-size) var(--bl-font-family)}:root[dir=rtl]{direction:rtl;--bl-text-x-direction: -1;--bl-font-family: "Cairo"}
|
|
1
|
+
@font-face{font-family:Rubik Variable;font-style:normal;font-display:var(--fontsource-display, swap);font-weight:300 900;src:url(../assets/rubik-cyrillic-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Rubik Variable;font-style:normal;font-display:var(--fontsource-display, swap);font-weight:300 900;src:url(../assets/rubik-cyrillic-wght-normal.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Rubik Variable;font-style:normal;font-display:var(--fontsource-display, swap);font-weight:300 900;src:url(../assets/rubik-hebrew-wght-normal.woff2) format("woff2-variations");unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}@font-face{font-family:Rubik Variable;font-style:normal;font-display:var(--fontsource-display, swap);font-weight:300 900;src:url(../assets/rubik-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02AF,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Rubik Variable;font-style:normal;font-display:var(--fontsource-display, swap);font-weight:300 900;src:url(../assets/rubik-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root,:root[data-theme=light]{--bl-text-x-direction: 1;--bl-color-primary: #f27a1a;--bl-color-primary-highlight: #ef6114;--bl-color-primary-contrast: #fef2e8;--bl-color-success: #0bc15c;--bl-color-success-highlight: #09a44e;--bl-color-success-contrast: #e7f9ef;--bl-color-danger: #ff5043;--bl-color-danger-highlight: #ff3028;--bl-color-danger-contrast: #ffeeec;--bl-color-warning: #ffb600;--bl-color-warning-highlight: #ff9800;--bl-color-warning-contrast: #fff8e6;--bl-color-info: #5794ff;--bl-color-info-highlight: #457eff;--bl-color-info-contrast: #eef4ff;--bl-color-neutral-none: #000;--bl-color-neutral-darkest: #0f131a;--bl-color-neutral-darker: #273142;--bl-color-neutral-dark: #6e7787;--bl-color-neutral-light: #95a1b5;--bl-color-neutral-lighter: #afbbca;--bl-color-neutral-lightest: #f1f2f7;--bl-color-neutral-full: #fff;--bl-size-4xs: .125rem;--bl-size-3xs: .25rem;--bl-size-2xs: .5rem;--bl-size-xs: .75rem;--bl-size-s: .875rem;--bl-size-m: 1rem;--bl-size-l: 1.25rem;--bl-size-xl: 1.5rem;--bl-size-2xl: 2rem;--bl-size-3xl: 2.5rem;--bl-size-4xl: 3rem;--bl-size-5xl: 4rem;--bl-size-6xl: 5rem;--bl-index-deep: -1;--bl-index-base: 1;--bl-index-popover: 100;--bl-index-tooltip: 200;--bl-index-sticky: 300;--bl-index-overlay: 400;--bl-index-dialog: 500;--bl-index-notification: 600;--bl-font-family: "Rubik Variable", sans-serif;--bl-font-weight-light: 300;--bl-font-weight-regular: 400;--bl-font-weight-medium: 500;--bl-font-weight-semibold: 600;--bl-font-weight-bold: 700;--bl-font-size-2xs: .5rem;--bl-font-size-xs: .625rem;--bl-font-size-s: .75rem;--bl-font-size-m: .875rem;--bl-font-size-l: 1rem;--bl-font-size-xl: 1.25rem;--bl-font-size-2xl: 1.5rem;--bl-font-size-3xl: 1.75rem;--bl-font-size-4xl: 2rem;--bl-font-size-5xl: 3rem;--bl-font-size-6xl: 4rem;--bl-border-radius-xs: .125rem;--bl-border-radius-s: .25rem;--bl-border-radius-m: .375rem;--bl-border-radius-l: .5rem;--bl-border-radius-pill: 62.438rem;--bl-border-radius-circle: 50%;--bl-font-display-font-size: var(--bl-font-size-5xl);--bl-font-display-line-height: calc(var(--bl-font-display-font-size) + var(--bl-size-2xs));--bl-font-display-size: var(--bl-font-display-font-size) / var(--bl-font-display-line-height);--bl-font-display: var(--bl-font-display-size) var(--bl-font-family);--bl-font-display-light: var(--bl-font-weight-light) var(--bl-font-display);--bl-font-display-regular: var(--bl-font-weight-regular) var(--bl-font-display);--bl-font-display-medium: var(--bl-font-weight-medium) var(--bl-font-display);--bl-font-display-semibold: var(--bl-font-weight-semibold) var(--bl-font-display);--bl-font-display-bold: var(--bl-font-weight-bold) var(--bl-font-display);--bl-font-heading-1-font-size: var(--bl-font-size-4xl);--bl-font-heading-1-line-height: calc(var(--bl-font-heading-1-font-size) + var(--bl-size-3xs));--bl-font-heading-1-size: var(--bl-font-heading-1-font-size) / var(--bl-font-heading-1-line-height);--bl-font-heading-1: var(--bl-font-heading-1-size) var(--bl-font-family);--bl-font-heading-1-regular: var(--bl-font-weight-regular) var(--bl-font-heading-1);--bl-font-heading-1-medium: var(--bl-font-weight-medium) var(--bl-font-heading-1);--bl-font-heading-1-semibold: var(--bl-font-weight-semibold) var(--bl-font-heading-1);--bl-font-heading-1-bold: var(--bl-font-weight-bold) var(--bl-font-heading-1);--bl-font-heading-2-font-size: var(--bl-font-size-3xl);--bl-font-heading-2-line-height: calc(var(--bl-font-heading-2-font-size) + var(--bl-size-3xs));--bl-font-heading-2-size: var(--bl-font-heading-2-font-size) / var(--bl-font-heading-2-line-height);--bl-font-heading-2: var(--bl-font-heading-2-size) var(--bl-font-family);--bl-font-heading-2-regular: var(--bl-font-weight-regular) var(--bl-font-heading-2);--bl-font-heading-2-medium: var(--bl-font-weight-medium) var(--bl-font-heading-2);--bl-font-heading-2-semibold: var(--bl-font-weight-semibold) var(--bl-font-heading-2);--bl-font-heading-2-bold: var(--bl-font-weight-bold) var(--bl-font-heading-2);--bl-font-heading-3-font-size: var(--bl-font-size-2xl);--bl-font-heading-3-line-height: calc(var(--bl-font-heading-3-font-size) + var(--bl-size-3xs));--bl-font-heading-3-size: var(--bl-font-heading-3-font-size) / var(--bl-font-heading-3-line-height);--bl-font-heading-3: var(--bl-font-heading-3-size) var(--bl-font-family);--bl-font-heading-3-regular: var(--bl-font-weight-regular) var(--bl-font-heading-3);--bl-font-heading-3-medium: var(--bl-font-weight-medium) var(--bl-font-heading-3);--bl-font-heading-3-semibold: var(--bl-font-weight-semibold) var(--bl-font-heading-3);--bl-font-heading-3-bold: var(--bl-font-weight-bold) var(--bl-font-heading-3);--bl-font-title-1-font-size: var(--bl-font-size-xl);--bl-font-title-1-line-height: calc(var(--bl-font-title-1-font-size) + var(--bl-size-3xs));--bl-font-title-1-size: var(--bl-font-title-1-font-size) / var(--bl-font-title-1-line-height);--bl-font-title-1: var(--bl-font-title-1-size) var(--bl-font-family);--bl-font-title-1-regular: var(--bl-font-weight-regular) var(--bl-font-title-1);--bl-font-title-1-medium: var(--bl-font-weight-medium) var(--bl-font-title-1);--bl-font-title-1-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-1);--bl-font-title-1-bold: var(--bl-font-weight-bold) var(--bl-font-title-1);--bl-font-title-2-font-size: var(--bl-font-size-l);--bl-font-title-2-line-height: calc(var(--bl-font-title-2-font-size) + var(--bl-size-3xs));--bl-font-title-2-size: var(--bl-font-title-2-font-size) / var(--bl-font-title-2-line-height);--bl-font-title-2: var(--bl-font-title-2-size) var(--bl-font-family);--bl-font-title-2-regular: var(--bl-font-weight-regular) var(--bl-font-title-2);--bl-font-title-2-medium: var(--bl-font-weight-medium) var(--bl-font-title-2);--bl-font-title-2-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-2);--bl-font-title-2-bold: var(--bl-font-weight-bold) var(--bl-font-title-2);--bl-font-title-3-font-size: var(--bl-font-size-m);--bl-font-title-3-line-height: calc(var(--bl-font-title-3-font-size) + var(--bl-size-4xs));--bl-font-title-3-size: var(--bl-font-title-3-font-size) / var(--bl-font-title-3-line-height);--bl-font-title-3: var(--bl-font-title-3-size) var(--bl-font-family);--bl-font-title-3-regular: var(--bl-font-weight-regular) var(--bl-font-title-3);--bl-font-title-3-medium: var(--bl-font-weight-medium) var(--bl-font-title-3);--bl-font-title-3-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-3);--bl-font-title-3-bold: var(--bl-font-weight-bold) var(--bl-font-title-3);--bl-font-title-4-font-size: var(--bl-font-size-s);--bl-font-title-4-line-height: calc(var(--bl-font-title-4-font-size) + var(--bl-size-4xs));--bl-font-title-4-size: var(--bl-font-title-4-font-size) / var(--bl-font-title-4-line-height);--bl-font-title-4: var(--bl-font-title-4-size) var(--bl-font-family);--bl-font-title-4-regular: var(--bl-font-weight-regular) var(--bl-font-title-4);--bl-font-title-4-medium: var(--bl-font-weight-medium) var(--bl-font-title-4);--bl-font-title-4-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-4);--bl-font-title-4-bold: var(--bl-font-weight-bold) var(--bl-font-title-4);--bl-font-body-text-1-font-size: var(--bl-font-size-l);--bl-font-body-text-1-line-height: calc( var(--bl-font-body-text-1-font-size) + var(--bl-size-4xs) );--bl-font-body-text-1-size: var(--bl-font-body-text-1-font-size) / var(--bl-font-body-text-1-line-height);--bl-font-body-text-1: var(--bl-font-body-text-1-size) var(--bl-font-family);--bl-font-body-text-1-regular: var(--bl-font-weight-regular) var(--bl-font-body-text-1);--bl-font-body-text-1-medium: var(--bl-font-weight-medium) var(--bl-font-body-text-1);--bl-font-body-text-2-font-size: var(--bl-font-size-m);--bl-font-body-text-2-line-height: calc( var(--bl-font-body-text-2-font-size) + var(--bl-size-4xs) );--bl-font-body-text-2-size: var(--bl-font-body-text-2-font-size) / var(--bl-font-body-text-2-line-height);--bl-font-body-text-2: var(--bl-font-body-text-2-size) var(--bl-font-family);--bl-font-body-text-2-regular: var(--bl-font-weight-regular) var(--bl-font-body-text-2);--bl-font-body-text-2-medium: var(--bl-font-weight-medium) var(--bl-font-body-text-2);--bl-font-body-text-3-font-size: var(--bl-font-size-s);--bl-font-body-text-3-line-height: calc( var(--bl-font-body-text-3-font-size) + var(--bl-size-4xs) );--bl-font-body-text-3-size: var(--bl-font-body-text-3-font-size) / var(--bl-font-body-text-3-line-height);--bl-font-body-text-3: var(--bl-font-body-text-3-size) var(--bl-font-family);--bl-font-body-text-3-regular: var(--bl-font-weight-regular) var(--bl-font-body-text-3);--bl-font-body-text-3-medium: var(--bl-font-weight-medium) var(--bl-font-body-text-3);--bl-font-caption-font-size: var(--bl-font-size-xs);--bl-font-caption-line-height: calc(var(--bl-font-caption-font-size) + var(--bl-size-4xs));--bl-font-caption-size: var(--bl-font-caption-font-size) / var(--bl-font-caption-line-height);--bl-font-caption: var(--bl-font-weight-medium) var(--bl-font-caption-size) var(--bl-font-family)}:root[dir=rtl]{direction:rtl;--bl-text-x-direction: -1;--bl-font-family: "Cairo"}
|
|
2
2
|
/*# sourceMappingURL=default.css.map */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../node_modules/@fontsource-variable/rubik/index.css", "../../src/themes/default.css"],
|
|
4
|
-
"sourcesContent": ["/* rubik-cyrillic-ext-wght-normal */\n@font-face {\n font-family: 'Rubik Variable';\n font-style: normal;\n font-display: var(--fontsource-display, swap);\n font-weight: 300 900;\n src: url(./files/rubik-cyrillic-ext-wght-normal.woff2) format('woff2-variations');\n unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;\n}\n\n/* rubik-cyrillic-wght-normal */\n@font-face {\n font-family: 'Rubik Variable';\n font-style: normal;\n font-display: var(--fontsource-display, swap);\n font-weight: 300 900;\n src: url(./files/rubik-cyrillic-wght-normal.woff2) format('woff2-variations');\n unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;\n}\n\n/* rubik-hebrew-wght-normal */\n@font-face {\n font-family: 'Rubik Variable';\n font-style: normal;\n font-display: var(--fontsource-display, swap);\n font-weight: 300 900;\n src: url(./files/rubik-hebrew-wght-normal.woff2) format('woff2-variations');\n unicode-range: U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;\n}\n\n/* rubik-latin-ext-wght-normal */\n@font-face {\n font-family: 'Rubik Variable';\n font-style: normal;\n font-display: var(--fontsource-display, swap);\n font-weight: 300 900;\n src: url(./files/rubik-latin-ext-wght-normal.woff2) format('woff2-variations');\n unicode-range: U+0100-02AF,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;\n}\n\n/* rubik-latin-wght-normal */\n@font-face {\n font-family: 'Rubik Variable';\n font-style: normal;\n font-display: var(--fontsource-display, swap);\n font-weight: 300 900;\n src: url(./files/rubik-latin-wght-normal.woff2) format('woff2-variations');\n unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;\n}", "@import url(\"@fontsource-variable/rubik\");\n\n:root {\n /* Direction */\n --bl-text-x-direction: 1;\n\n /* Primary Color */\n --bl-color-primary: #f27a1a;\n --bl-color-primary-highlight: #ef6114;\n --bl-color-primary-contrast: #fef2e8;\n\n /* Success Color */\n --bl-color-success: #0bc15c;\n --bl-color-success-highlight: #09a44e;\n --bl-color-success-contrast: #e7f9ef;\n\n /* Danger Color */\n --bl-color-danger: #ff5043;\n --bl-color-danger-highlight: #ff3028;\n --bl-color-danger-contrast: #ffeeec;\n\n /* Warning Color */\n --bl-color-warning: #ffb600;\n --bl-color-warning-highlight: #ff9800;\n --bl-color-warning-contrast: #fff8e6;\n\n /* Info Color */\n --bl-color-info: #5794ff;\n --bl-color-info-highlight: #457eff;\n --bl-color-info-contrast: #eef4ff;\n\n /* Neutral Color */\n --bl-color-neutral-none: #000;\n --bl-color-neutral-darkest: #0f131a;\n --bl-color-neutral-darker: #273142;\n --bl-color-neutral-dark: #6e7787;\n --bl-color-neutral-light: #95a1b5;\n --bl-color-neutral-lighter: #afbbca;\n --bl-color-neutral-lightest: #f1f2f7;\n --bl-color-neutral-full: #fff;\n\n /* Size and Spacing */\n --bl-size-4xs: 0.125rem; /* 2px */\n --bl-size-3xs: 0.25rem; /* 4px */\n --bl-size-2xs: 0.5rem; /* 8px */\n --bl-size-xs: 0.75rem; /* 12px */\n --bl-size-s: 0.875rem; /* 14px */\n --bl-size-m: 1rem; /* 16px */\n --bl-size-l: 1.25rem; /* 20px */\n --bl-size-xl: 1.5rem; /* 24px */\n --bl-size-2xl: 2rem; /* 32px */\n --bl-size-3xl: 2.5rem; /* 40px */\n --bl-size-4xl: 3rem; /* 48px */\n --bl-size-5xl: 4rem; /* 64px */\n --bl-size-6xl: 5rem; /* 80px */\n\n /* Z-indexes */\n --bl-index-deep: -1;\n --bl-index-base: 1;\n --bl-index-popover: 100;\n --bl-index-tooltip: 200;\n --bl-index-sticky: 300;\n --bl-index-overlay: 400;\n --bl-index-dialog: 500;\n --bl-index-notification: 600;\n\n /* Typography */\n --bl-font-family: \"Rubik Variable\", sans-serif;\n\n /* Font weights */\n --bl-font-weight-light: 300;\n --bl-font-weight-regular: 400;\n --bl-font-weight-medium: 500;\n --bl-font-weight-semibold: 600;\n --bl-font-weight-bold: 700;\n\n /* Font sizes */\n --bl-font-size-2xs: 0.5rem; /* 8px */\n --bl-font-size-xs: 0.625rem; /* 10px */\n --bl-font-size-s: 0.75rem; /* 12px */\n --bl-font-size-m: 0.875rem; /* 14px */\n --bl-font-size-l: 1rem; /* 16px */\n --bl-font-size-xl: 1.25rem; /* 20px */\n --bl-font-size-2xl: 1.5rem; /* 24px */\n --bl-font-size-3xl: 1.75rem; /* 28px */\n --bl-font-size-4xl: 2rem; /* 32px */\n --bl-font-size-5xl: 3rem; /* 48px */\n --bl-font-size-6xl: 4rem; /* 64px */\n\n /* Border radius */\n --bl-border-radius-xs: 0.125rem; /* 2px */\n --bl-border-radius-s: 0.25rem; /* 4px */\n --bl-border-radius-m: 0.375rem; /* 6px */\n --bl-border-radius-l: 0.5rem; /* 8px */\n --bl-border-radius-pill: 62.438rem; /* 999px */\n --bl-border-radius-circle: 50%;\n\n /* Font Style: Display */\n --bl-font-display-font-size: var(--bl-font-size-5xl);\n --bl-font-display-line-height: calc(var(--bl-font-display-font-size) + var(--bl-size-2xs));\n --bl-font-display-size: var(--bl-font-display-font-size) / var(--bl-font-display-line-height);\n --bl-font-display: var(--bl-font-display-size) var(--bl-font-family);\n --bl-font-display-light: var(--bl-font-weight-light) var(--bl-font-display);\n --bl-font-display-regular: var(--bl-font-weight-regular) var(--bl-font-display);\n --bl-font-display-medium: var(--bl-font-weight-medium) var(--bl-font-display);\n --bl-font-display-semibold: var(--bl-font-weight-semibold) var(--bl-font-display);\n --bl-font-display-bold: var(--bl-font-weight-bold) var(--bl-font-display);\n\n /* Font Style: Heading 1 */\n --bl-font-heading-1-font-size: var(--bl-font-size-4xl);\n --bl-font-heading-1-line-height: calc(var(--bl-font-heading-1-font-size) + var(--bl-size-3xs));\n --bl-font-heading-1-size: var(--bl-font-heading-1-font-size) /\n var(--bl-font-heading-1-line-height);\n --bl-font-heading-1: var(--bl-font-heading-1-size) var(--bl-font-family);\n --bl-font-heading-1-regular: var(--bl-font-weight-regular) var(--bl-font-heading-1);\n --bl-font-heading-1-medium: var(--bl-font-weight-medium) var(--bl-font-heading-1);\n --bl-font-heading-1-semibold: var(--bl-font-weight-semibold) var(--bl-font-heading-1);\n --bl-font-heading-1-bold: var(--bl-font-weight-bold) var(--bl-font-heading-1);\n\n /* Font Style: Heading 2 */\n --bl-font-heading-2-font-size: var(--bl-font-size-3xl);\n --bl-font-heading-2-line-height: calc(var(--bl-font-heading-2-font-size) + var(--bl-size-3xs));\n --bl-font-heading-2-size: var(--bl-font-heading-2-font-size) /\n var(--bl-font-heading-2-line-height);\n --bl-font-heading-2: var(--bl-font-heading-2-size) var(--bl-font-family);\n --bl-font-heading-2-regular: var(--bl-font-weight-regular) var(--bl-font-heading-2);\n --bl-font-heading-2-medium: var(--bl-font-weight-medium) var(--bl-font-heading-2);\n --bl-font-heading-2-semibold: var(--bl-font-weight-semibold) var(--bl-font-heading-2);\n --bl-font-heading-2-bold: var(--bl-font-weight-bold) var(--bl-font-heading-2);\n\n /* Font Style: Heading 3 */\n --bl-font-heading-3-font-size: var(--bl-font-size-2xl);\n --bl-font-heading-3-line-height: calc(var(--bl-font-heading-3-font-size) + var(--bl-size-3xs));\n --bl-font-heading-3-size: var(--bl-font-heading-3-font-size) /\n var(--bl-font-heading-3-line-height);\n --bl-font-heading-3: var(--bl-font-heading-3-size) var(--bl-font-family);\n --bl-font-heading-3-regular: var(--bl-font-weight-regular) var(--bl-font-heading-3);\n --bl-font-heading-3-medium: var(--bl-font-weight-medium) var(--bl-font-heading-3);\n --bl-font-heading-3-semibold: var(--bl-font-weight-semibold) var(--bl-font-heading-3);\n --bl-font-heading-3-bold: var(--bl-font-weight-bold) var(--bl-font-heading-3);\n\n /* Font Style: Title 1 */\n --bl-font-title-1-font-size: var(--bl-font-size-xl);\n --bl-font-title-1-line-height: calc(var(--bl-font-title-1-font-size) + var(--bl-size-3xs));\n --bl-font-title-1-size: var(--bl-font-title-1-font-size) / var(--bl-font-title-1-line-height);\n --bl-font-title-1: var(--bl-font-title-1-size) var(--bl-font-family);\n --bl-font-title-1-regular: var(--bl-font-weight-regular) var(--bl-font-title-1);\n --bl-font-title-1-medium: var(--bl-font-weight-medium) var(--bl-font-title-1);\n --bl-font-title-1-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-1);\n --bl-font-title-1-bold: var(--bl-font-weight-bold) var(--bl-font-title-1);\n\n /* Font Style: Title 2 */\n --bl-font-title-2-font-size: var(--bl-font-size-l);\n --bl-font-title-2-line-height: calc(var(--bl-font-title-2-font-size) + var(--bl-size-3xs));\n --bl-font-title-2-size: var(--bl-font-title-2-font-size) / var(--bl-font-title-2-line-height);\n --bl-font-title-2: var(--bl-font-title-2-size) var(--bl-font-family);\n --bl-font-title-2-regular: var(--bl-font-weight-regular) var(--bl-font-title-2);\n --bl-font-title-2-medium: var(--bl-font-weight-medium) var(--bl-font-title-2);\n --bl-font-title-2-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-2);\n --bl-font-title-2-bold: var(--bl-font-weight-bold) var(--bl-font-title-2);\n\n /* Font Style: Title 3 */\n --bl-font-title-3-font-size: var(--bl-font-size-m);\n --bl-font-title-3-line-height: calc(var(--bl-font-title-3-font-size) + var(--bl-size-4xs));\n --bl-font-title-3-size: var(--bl-font-title-3-font-size) / var(--bl-font-title-3-line-height);\n --bl-font-title-3: var(--bl-font-title-3-size) var(--bl-font-family);\n --bl-font-title-3-regular: var(--bl-font-weight-regular) var(--bl-font-title-3);\n --bl-font-title-3-medium: var(--bl-font-weight-medium) var(--bl-font-title-3);\n --bl-font-title-3-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-3);\n --bl-font-title-3-bold: var(--bl-font-weight-bold) var(--bl-font-title-3);\n\n /* Font Style: Title 4 */\n --bl-font-title-4-font-size: var(--bl-font-size-s);\n --bl-font-title-4-line-height: calc(var(--bl-font-title-4-font-size) + var(--bl-size-4xs));\n --bl-font-title-4-size: var(--bl-font-title-4-font-size) / var(--bl-font-title-4-line-height);\n --bl-font-title-4: var(--bl-font-title-4-size) var(--bl-font-family);\n --bl-font-title-4-regular: var(--bl-font-weight-regular) var(--bl-font-title-4);\n --bl-font-title-4-medium: var(--bl-font-weight-medium) var(--bl-font-title-4);\n --bl-font-title-4-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-4);\n --bl-font-title-4-bold: var(--bl-font-weight-bold) var(--bl-font-title-4);\n\n /* Font Style: Body Text 1 */\n --bl-font-body-text-1-font-size: var(--bl-font-size-l);\n --bl-font-body-text-1-line-height: calc(\n var(--bl-font-body-text-1-font-size) + var(--bl-size-4xs)\n );\n --bl-font-body-text-1-size: var(--bl-font-body-text-1-font-size) /\n var(--bl-font-body-text-1-line-height);\n --bl-font-body-text-1: var(--bl-font-body-text-1-size) var(--bl-font-family);\n --bl-font-body-text-1-regular: var(--bl-font-weight-regular) var(--bl-font-body-text-1);\n --bl-font-body-text-1-medium: var(--bl-font-weight-medium) var(--bl-font-body-text-1);\n\n /* Font Style: Body Text 2 */\n --bl-font-body-text-2-font-size: var(--bl-font-size-m);\n --bl-font-body-text-2-line-height: calc(\n var(--bl-font-body-text-2-font-size) + var(--bl-size-4xs)\n );\n --bl-font-body-text-2-size: var(--bl-font-body-text-2-font-size) /\n var(--bl-font-body-text-2-line-height);\n --bl-font-body-text-2: var(--bl-font-body-text-2-size) var(--bl-font-family);\n --bl-font-body-text-2-regular: var(--bl-font-weight-regular) var(--bl-font-body-text-2);\n --bl-font-body-text-2-medium: var(--bl-font-weight-medium) var(--bl-font-body-text-2);\n\n /* Font Style: Body Text 3 */\n --bl-font-body-text-3-font-size: var(--bl-font-size-s);\n --bl-font-body-text-3-line-height: calc(\n var(--bl-font-body-text-3-font-size) + var(--bl-size-4xs)\n );\n --bl-font-body-text-3-size: var(--bl-font-body-text-3-font-size) /\n var(--bl-font-body-text-3-line-height);\n --bl-font-body-text-3: var(--bl-font-body-text-3-size) var(--bl-font-family);\n --bl-font-body-text-3-regular: var(--bl-font-weight-regular) var(--bl-font-body-text-3);\n --bl-font-body-text-3-medium: var(--bl-font-weight-medium) var(--bl-font-body-text-3);\n\n /* Font Style: Caption */\n --bl-font-caption-font-size: var(--bl-font-size-xs);\n --bl-font-caption-line-height: calc(var(--bl-font-caption-font-size) + var(--bl-size-4xs));\n --bl-font-caption-size: var(--bl-font-caption-font-size) / var(--bl-font-caption-line-height);\n --bl-font-caption: var(--bl-font-weight-medium) var(--bl-font-caption-size) var(--bl-font-family);\n}\n\n:root[dir=\"rtl\"] {\n /* Direction */\n direction: rtl;\n\n --bl-text-x-direction: -1;\n\n /* Typography */\n --bl-font-family: \"Cairo\";\n}\n"],
|
|
5
|
-
"mappings": "AACA,WACE,2BACA,kBACA,6CACA,oBACA,mFACA,iFAIF,WACE,2BACA,kBACA,6CACA,oBACA,+EACA,gEAIF,WACE,2BACA,kBACA,6CACA,oBACA,6EACA,gEAIF,WACE,2BACA,kBACA,6CACA,oBACA,gFACA,sJAIF,WACE,2BACA,kBACA,6CACA,oBACA,4EACA,2MC7CF,
|
|
4
|
+
"sourcesContent": ["/* rubik-cyrillic-ext-wght-normal */\n@font-face {\n font-family: 'Rubik Variable';\n font-style: normal;\n font-display: var(--fontsource-display, swap);\n font-weight: 300 900;\n src: url(./files/rubik-cyrillic-ext-wght-normal.woff2) format('woff2-variations');\n unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;\n}\n\n/* rubik-cyrillic-wght-normal */\n@font-face {\n font-family: 'Rubik Variable';\n font-style: normal;\n font-display: var(--fontsource-display, swap);\n font-weight: 300 900;\n src: url(./files/rubik-cyrillic-wght-normal.woff2) format('woff2-variations');\n unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;\n}\n\n/* rubik-hebrew-wght-normal */\n@font-face {\n font-family: 'Rubik Variable';\n font-style: normal;\n font-display: var(--fontsource-display, swap);\n font-weight: 300 900;\n src: url(./files/rubik-hebrew-wght-normal.woff2) format('woff2-variations');\n unicode-range: U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;\n}\n\n/* rubik-latin-ext-wght-normal */\n@font-face {\n font-family: 'Rubik Variable';\n font-style: normal;\n font-display: var(--fontsource-display, swap);\n font-weight: 300 900;\n src: url(./files/rubik-latin-ext-wght-normal.woff2) format('woff2-variations');\n unicode-range: U+0100-02AF,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;\n}\n\n/* rubik-latin-wght-normal */\n@font-face {\n font-family: 'Rubik Variable';\n font-style: normal;\n font-display: var(--fontsource-display, swap);\n font-weight: 300 900;\n src: url(./files/rubik-latin-wght-normal.woff2) format('woff2-variations');\n unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;\n}", "@import url(\"@fontsource-variable/rubik\");\n\n:root,\n:root[data-theme=\"light\"] {\n /* Direction */\n --bl-text-x-direction: 1;\n\n /* Primary Color */\n --bl-color-primary: #f27a1a;\n --bl-color-primary-highlight: #ef6114;\n --bl-color-primary-contrast: #fef2e8;\n\n /* Success Color */\n --bl-color-success: #0bc15c;\n --bl-color-success-highlight: #09a44e;\n --bl-color-success-contrast: #e7f9ef;\n\n /* Danger Color */\n --bl-color-danger: #ff5043;\n --bl-color-danger-highlight: #ff3028;\n --bl-color-danger-contrast: #ffeeec;\n\n /* Warning Color */\n --bl-color-warning: #ffb600;\n --bl-color-warning-highlight: #ff9800;\n --bl-color-warning-contrast: #fff8e6;\n\n /* Info Color */\n --bl-color-info: #5794ff;\n --bl-color-info-highlight: #457eff;\n --bl-color-info-contrast: #eef4ff;\n\n /* Neutral Color */\n --bl-color-neutral-none: #000;\n --bl-color-neutral-darkest: #0f131a;\n --bl-color-neutral-darker: #273142;\n --bl-color-neutral-dark: #6e7787;\n --bl-color-neutral-light: #95a1b5;\n --bl-color-neutral-lighter: #afbbca;\n --bl-color-neutral-lightest: #f1f2f7;\n --bl-color-neutral-full: #fff;\n\n /* Size and Spacing */\n --bl-size-4xs: 0.125rem; /* 2px */\n --bl-size-3xs: 0.25rem; /* 4px */\n --bl-size-2xs: 0.5rem; /* 8px */\n --bl-size-xs: 0.75rem; /* 12px */\n --bl-size-s: 0.875rem; /* 14px */\n --bl-size-m: 1rem; /* 16px */\n --bl-size-l: 1.25rem; /* 20px */\n --bl-size-xl: 1.5rem; /* 24px */\n --bl-size-2xl: 2rem; /* 32px */\n --bl-size-3xl: 2.5rem; /* 40px */\n --bl-size-4xl: 3rem; /* 48px */\n --bl-size-5xl: 4rem; /* 64px */\n --bl-size-6xl: 5rem; /* 80px */\n\n /* Z-indexes */\n --bl-index-deep: -1;\n --bl-index-base: 1;\n --bl-index-popover: 100;\n --bl-index-tooltip: 200;\n --bl-index-sticky: 300;\n --bl-index-overlay: 400;\n --bl-index-dialog: 500;\n --bl-index-notification: 600;\n\n /* Typography */\n --bl-font-family: \"Rubik Variable\", sans-serif;\n\n /* Font weights */\n --bl-font-weight-light: 300;\n --bl-font-weight-regular: 400;\n --bl-font-weight-medium: 500;\n --bl-font-weight-semibold: 600;\n --bl-font-weight-bold: 700;\n\n /* Font sizes */\n --bl-font-size-2xs: 0.5rem; /* 8px */\n --bl-font-size-xs: 0.625rem; /* 10px */\n --bl-font-size-s: 0.75rem; /* 12px */\n --bl-font-size-m: 0.875rem; /* 14px */\n --bl-font-size-l: 1rem; /* 16px */\n --bl-font-size-xl: 1.25rem; /* 20px */\n --bl-font-size-2xl: 1.5rem; /* 24px */\n --bl-font-size-3xl: 1.75rem; /* 28px */\n --bl-font-size-4xl: 2rem; /* 32px */\n --bl-font-size-5xl: 3rem; /* 48px */\n --bl-font-size-6xl: 4rem; /* 64px */\n\n /* Border radius */\n --bl-border-radius-xs: 0.125rem; /* 2px */\n --bl-border-radius-s: 0.25rem; /* 4px */\n --bl-border-radius-m: 0.375rem; /* 6px */\n --bl-border-radius-l: 0.5rem; /* 8px */\n --bl-border-radius-pill: 62.438rem; /* 999px */\n --bl-border-radius-circle: 50%;\n\n /* Font Style: Display */\n --bl-font-display-font-size: var(--bl-font-size-5xl);\n --bl-font-display-line-height: calc(var(--bl-font-display-font-size) + var(--bl-size-2xs));\n --bl-font-display-size: var(--bl-font-display-font-size) / var(--bl-font-display-line-height);\n --bl-font-display: var(--bl-font-display-size) var(--bl-font-family);\n --bl-font-display-light: var(--bl-font-weight-light) var(--bl-font-display);\n --bl-font-display-regular: var(--bl-font-weight-regular) var(--bl-font-display);\n --bl-font-display-medium: var(--bl-font-weight-medium) var(--bl-font-display);\n --bl-font-display-semibold: var(--bl-font-weight-semibold) var(--bl-font-display);\n --bl-font-display-bold: var(--bl-font-weight-bold) var(--bl-font-display);\n\n /* Font Style: Heading 1 */\n --bl-font-heading-1-font-size: var(--bl-font-size-4xl);\n --bl-font-heading-1-line-height: calc(var(--bl-font-heading-1-font-size) + var(--bl-size-3xs));\n --bl-font-heading-1-size: var(--bl-font-heading-1-font-size) /\n var(--bl-font-heading-1-line-height);\n --bl-font-heading-1: var(--bl-font-heading-1-size) var(--bl-font-family);\n --bl-font-heading-1-regular: var(--bl-font-weight-regular) var(--bl-font-heading-1);\n --bl-font-heading-1-medium: var(--bl-font-weight-medium) var(--bl-font-heading-1);\n --bl-font-heading-1-semibold: var(--bl-font-weight-semibold) var(--bl-font-heading-1);\n --bl-font-heading-1-bold: var(--bl-font-weight-bold) var(--bl-font-heading-1);\n\n /* Font Style: Heading 2 */\n --bl-font-heading-2-font-size: var(--bl-font-size-3xl);\n --bl-font-heading-2-line-height: calc(var(--bl-font-heading-2-font-size) + var(--bl-size-3xs));\n --bl-font-heading-2-size: var(--bl-font-heading-2-font-size) /\n var(--bl-font-heading-2-line-height);\n --bl-font-heading-2: var(--bl-font-heading-2-size) var(--bl-font-family);\n --bl-font-heading-2-regular: var(--bl-font-weight-regular) var(--bl-font-heading-2);\n --bl-font-heading-2-medium: var(--bl-font-weight-medium) var(--bl-font-heading-2);\n --bl-font-heading-2-semibold: var(--bl-font-weight-semibold) var(--bl-font-heading-2);\n --bl-font-heading-2-bold: var(--bl-font-weight-bold) var(--bl-font-heading-2);\n\n /* Font Style: Heading 3 */\n --bl-font-heading-3-font-size: var(--bl-font-size-2xl);\n --bl-font-heading-3-line-height: calc(var(--bl-font-heading-3-font-size) + var(--bl-size-3xs));\n --bl-font-heading-3-size: var(--bl-font-heading-3-font-size) /\n var(--bl-font-heading-3-line-height);\n --bl-font-heading-3: var(--bl-font-heading-3-size) var(--bl-font-family);\n --bl-font-heading-3-regular: var(--bl-font-weight-regular) var(--bl-font-heading-3);\n --bl-font-heading-3-medium: var(--bl-font-weight-medium) var(--bl-font-heading-3);\n --bl-font-heading-3-semibold: var(--bl-font-weight-semibold) var(--bl-font-heading-3);\n --bl-font-heading-3-bold: var(--bl-font-weight-bold) var(--bl-font-heading-3);\n\n /* Font Style: Title 1 */\n --bl-font-title-1-font-size: var(--bl-font-size-xl);\n --bl-font-title-1-line-height: calc(var(--bl-font-title-1-font-size) + var(--bl-size-3xs));\n --bl-font-title-1-size: var(--bl-font-title-1-font-size) / var(--bl-font-title-1-line-height);\n --bl-font-title-1: var(--bl-font-title-1-size) var(--bl-font-family);\n --bl-font-title-1-regular: var(--bl-font-weight-regular) var(--bl-font-title-1);\n --bl-font-title-1-medium: var(--bl-font-weight-medium) var(--bl-font-title-1);\n --bl-font-title-1-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-1);\n --bl-font-title-1-bold: var(--bl-font-weight-bold) var(--bl-font-title-1);\n\n /* Font Style: Title 2 */\n --bl-font-title-2-font-size: var(--bl-font-size-l);\n --bl-font-title-2-line-height: calc(var(--bl-font-title-2-font-size) + var(--bl-size-3xs));\n --bl-font-title-2-size: var(--bl-font-title-2-font-size) / var(--bl-font-title-2-line-height);\n --bl-font-title-2: var(--bl-font-title-2-size) var(--bl-font-family);\n --bl-font-title-2-regular: var(--bl-font-weight-regular) var(--bl-font-title-2);\n --bl-font-title-2-medium: var(--bl-font-weight-medium) var(--bl-font-title-2);\n --bl-font-title-2-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-2);\n --bl-font-title-2-bold: var(--bl-font-weight-bold) var(--bl-font-title-2);\n\n /* Font Style: Title 3 */\n --bl-font-title-3-font-size: var(--bl-font-size-m);\n --bl-font-title-3-line-height: calc(var(--bl-font-title-3-font-size) + var(--bl-size-4xs));\n --bl-font-title-3-size: var(--bl-font-title-3-font-size) / var(--bl-font-title-3-line-height);\n --bl-font-title-3: var(--bl-font-title-3-size) var(--bl-font-family);\n --bl-font-title-3-regular: var(--bl-font-weight-regular) var(--bl-font-title-3);\n --bl-font-title-3-medium: var(--bl-font-weight-medium) var(--bl-font-title-3);\n --bl-font-title-3-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-3);\n --bl-font-title-3-bold: var(--bl-font-weight-bold) var(--bl-font-title-3);\n\n /* Font Style: Title 4 */\n --bl-font-title-4-font-size: var(--bl-font-size-s);\n --bl-font-title-4-line-height: calc(var(--bl-font-title-4-font-size) + var(--bl-size-4xs));\n --bl-font-title-4-size: var(--bl-font-title-4-font-size) / var(--bl-font-title-4-line-height);\n --bl-font-title-4: var(--bl-font-title-4-size) var(--bl-font-family);\n --bl-font-title-4-regular: var(--bl-font-weight-regular) var(--bl-font-title-4);\n --bl-font-title-4-medium: var(--bl-font-weight-medium) var(--bl-font-title-4);\n --bl-font-title-4-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-4);\n --bl-font-title-4-bold: var(--bl-font-weight-bold) var(--bl-font-title-4);\n\n /* Font Style: Body Text 1 */\n --bl-font-body-text-1-font-size: var(--bl-font-size-l);\n --bl-font-body-text-1-line-height: calc(\n var(--bl-font-body-text-1-font-size) + var(--bl-size-4xs)\n );\n --bl-font-body-text-1-size: var(--bl-font-body-text-1-font-size) /\n var(--bl-font-body-text-1-line-height);\n --bl-font-body-text-1: var(--bl-font-body-text-1-size) var(--bl-font-family);\n --bl-font-body-text-1-regular: var(--bl-font-weight-regular) var(--bl-font-body-text-1);\n --bl-font-body-text-1-medium: var(--bl-font-weight-medium) var(--bl-font-body-text-1);\n\n /* Font Style: Body Text 2 */\n --bl-font-body-text-2-font-size: var(--bl-font-size-m);\n --bl-font-body-text-2-line-height: calc(\n var(--bl-font-body-text-2-font-size) + var(--bl-size-4xs)\n );\n --bl-font-body-text-2-size: var(--bl-font-body-text-2-font-size) /\n var(--bl-font-body-text-2-line-height);\n --bl-font-body-text-2: var(--bl-font-body-text-2-size) var(--bl-font-family);\n --bl-font-body-text-2-regular: var(--bl-font-weight-regular) var(--bl-font-body-text-2);\n --bl-font-body-text-2-medium: var(--bl-font-weight-medium) var(--bl-font-body-text-2);\n\n /* Font Style: Body Text 3 */\n --bl-font-body-text-3-font-size: var(--bl-font-size-s);\n --bl-font-body-text-3-line-height: calc(\n var(--bl-font-body-text-3-font-size) + var(--bl-size-4xs)\n );\n --bl-font-body-text-3-size: var(--bl-font-body-text-3-font-size) /\n var(--bl-font-body-text-3-line-height);\n --bl-font-body-text-3: var(--bl-font-body-text-3-size) var(--bl-font-family);\n --bl-font-body-text-3-regular: var(--bl-font-weight-regular) var(--bl-font-body-text-3);\n --bl-font-body-text-3-medium: var(--bl-font-weight-medium) var(--bl-font-body-text-3);\n\n /* Font Style: Caption */\n --bl-font-caption-font-size: var(--bl-font-size-xs);\n --bl-font-caption-line-height: calc(var(--bl-font-caption-font-size) + var(--bl-size-4xs));\n --bl-font-caption-size: var(--bl-font-caption-font-size) / var(--bl-font-caption-line-height);\n --bl-font-caption: var(--bl-font-weight-medium) var(--bl-font-caption-size) var(--bl-font-family);\n}\n\n:root[dir=\"rtl\"] {\n /* Direction */\n direction: rtl;\n\n --bl-text-x-direction: -1;\n\n /* Typography */\n --bl-font-family: \"Cairo\";\n}\n"],
|
|
5
|
+
"mappings": "AACA,WACE,2BACA,kBACA,6CACA,oBACA,mFACA,iFAIF,WACE,2BACA,kBACA,6CACA,oBACA,+EACA,gEAIF,WACE,2BACA,kBACA,6CACA,oBACA,6EACA,gEAIF,WACE,2BACA,kBACA,6CACA,oBACA,gFACA,sJAIF,WACE,2BACA,kBACA,6CACA,oBACA,4EACA,2MC7CF,8BAGE,yBAGA,4BACA,sCACA,qCAGA,4BACA,sCACA,qCAGA,2BACA,qCACA,oCAGA,4BACA,sCACA,qCAGA,yBACA,mCACA,kCAGA,8BACA,oCACA,mCACA,iCACA,kCACA,oCACA,qCACA,8BAGA,uBACA,sBACA,qBACA,qBACA,qBACA,kBACA,qBACA,qBACA,oBACA,sBACA,oBACA,oBACA,oBAGA,oBACA,mBACA,wBACA,wBACA,uBACA,wBACA,uBACA,6BAGA,+CAGA,4BACA,8BACA,6BACA,+BACA,2BAGA,0BACA,2BACA,yBACA,0BACA,uBACA,2BACA,2BACA,4BACA,yBACA,yBACA,yBAGA,+BACA,6BACA,8BACA,4BACA,mCACA,+BAGA,qDACA,2FACA,8FACA,qEACA,4EACA,gFACA,8EACA,kFACA,0EAGA,uDACA,+FACA,oGAEA,yEACA,oFACA,kFACA,sFACA,8EAGA,uDACA,+FACA,oGAEA,yEACA,oFACA,kFACA,sFACA,8EAGA,uDACA,+FACA,oGAEA,yEACA,oFACA,kFACA,sFACA,8EAGA,oDACA,2FACA,8FACA,qEACA,gFACA,8EACA,kFACA,0EAGA,mDACA,2FACA,8FACA,qEACA,gFACA,8EACA,kFACA,0EAGA,mDACA,2FACA,8FACA,qEACA,gFACA,8EACA,kFACA,0EAGA,mDACA,2FACA,8FACA,qEACA,gFACA,8EACA,kFACA,0EAGA,uDACA,qGAGA,0GAEA,6EACA,wFACA,sFAGA,uDACA,qGAGA,0GAEA,6EACA,wFACA,sFAGA,uDACA,qGAGA,0GAEA,6EACA,wFACA,sFAGA,oDACA,2FACA,8FACA,kGAGF,eAEE,cAEA,0BAGA",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trendyol/baklava",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "3.4.0-beta.
|
|
4
|
+
"version": "3.4.0-beta.20",
|
|
5
5
|
"description": "Trendyol Baklava Design System",
|
|
6
6
|
"main": "dist/baklava.js",
|
|
7
7
|
"module": "dist/baklava.js",
|
|
@@ -91,6 +91,7 @@
|
|
|
91
91
|
"@storybook/addon-mdx-gfm": "^7.4.3",
|
|
92
92
|
"@storybook/addon-viewport": "^7.4.3",
|
|
93
93
|
"@storybook/jest": "^0.2.2",
|
|
94
|
+
"@storybook/manager-api": "7.4.3",
|
|
94
95
|
"@storybook/testing-library": "^0.2.2",
|
|
95
96
|
"@storybook/web-components": "7.4.3",
|
|
96
97
|
"@storybook/web-components-vite": "^7.4.3",
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/utilities/style-to-px.converter.ts", "../src/components/drawer/bl-drawer.css", "../src/components/drawer/bl-drawer.ts"],
|
|
4
|
-
"sourcesContent": ["export const styleToPixelConverter = (styleValue: string): number | null => {\n const match = styleValue.match(/^(\\d+(\\.\\d+)?)(.*)$/);\n\n if (!match) return null;\n\n const value = parseFloat(match[1]);\n const unit = match[3];\n\n let styleInPixel: number | null;\n\n switch (unit) {\n case \"px\":\n styleInPixel = value;\n break;\n case \"vw\":\n styleInPixel = (value * window.innerWidth) / 100;\n break;\n case \"%\":\n styleInPixel = (value * window.innerWidth) / 100;\n break;\n default:\n styleInPixel = null;\n break;\n }\n return styleInPixel;\n};\n", "import {css} from 'lit';\nexport const styles = css`.drawer{box-sizing:border-box;position:fixed;display:flex;top:0;bottom:0;inset-inline-end:0;width:var(--bl-drawer-current-width,424px);padding:var(--bl-size-xl);padding-top:max(env(safe-area-inset-top),var(--bl-size-xl));padding-inline-end:max(env(safe-area-inset-right),var(--bl-size-xl));padding-bottom:max(env(safe-area-inset-bottom),var(--bl-size-xl));background:var(--bl-color-neutral-full);box-shadow:var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);transition:right var(--bl-drawer-animation-duration, .25s);z-index:var(--bl-index-sticky)}iframe{height:100%;width:100%;border:none}.container{display:flex;flex-direction:column;gap:var(--bl-size-xl);flex:1;width:100%}header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--bl-size-2xs);background-color:#fff}header .header-buttons{display:flex;gap:var(--bl-size-xl);margin-inline-start:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);overflow:hidden;margin:0;padding:0}.content{flex:1;overflow-y:scroll}.iframe-content{flex:1}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport { styleToPixelConverter } from \"../../utilities/style-to-px.converter\";\nimport \"../button/bl-button\";\nimport style from \"./bl-drawer.css\";\n\n/**\n * @tag bl-drawer\n * @summary Baklava Drawer component\n *\n * @cssproperty [--bl-drawer-animation-duration=250ms] Drawer slide in animation duration\n */\n\n@customElement(\"bl-drawer\")\nexport default class BlDrawer extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets drawer open-close status\n */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /**\n * Sets the drawer title\n */\n @property({ type: String })\n caption?: string;\n\n /**\n * Sets the drawer embed url for iframe\n */\n @property({ type: String, attribute: \"embed-url\" })\n embedUrl?: string;\n\n /**\n * Sets the drawer external link\n */\n @property({ type: String, attribute: \"external-link\" })\n externalLink?: string;\n\n /**\n * Sets the drawer width\n */\n @property({ type: String, attribute: \"width\" })\n width: string = \"424px\";\n\n /**\n * Fires when the drawer is opened\n */\n @event(\"bl-drawer-open\") private onOpen: EventDispatcher<string>;\n\n /**\n * Fires when the drawer is closed\n */\n @event(\"bl-drawer-close\") private onClose: EventDispatcher<string>;\n\n @query(\"#drawer-iframe\")\n _drawerIframe: HTMLIFrameElement;\n\n connectedCallback() {\n super.connectedCallback();\n window?.addEventListener(\"bl-drawer-open\", event => {\n if (event.target !== this) this.closeDrawer();\n });\n this.resizeDrawerWidth();\n\n window?.addEventListener(\"resize\", () => this.resizeDrawerWidth());\n window?.addEventListener(\"load\", () => this.resizeDrawerWidth());\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n window?.removeEventListener(\"resize\", () => this.resizeDrawerWidth());\n window?.addEventListener(\"load\", () => this.resizeDrawerWidth());\n }\n\n updated(changedProperties: PropertyValues<this>) {\n if (changedProperties.has(\"open\")) {\n this.toggleDialogHandler();\n }\n\n if (changedProperties.has(\"width\")) {\n this.resizeDrawerWidth();\n }\n }\n\n private domExistenceSchedule: number;\n\n private resizeDrawerWidth() {\n const drawerWidth = styleToPixelConverter(this.width);\n\n const newWidth = !drawerWidth || drawerWidth < 100 ? \"424px\" : this.width;\n\n if (drawerWidth) {\n if (window?.innerWidth < drawerWidth) {\n this.style.setProperty(\"--bl-drawer-current-width\", \"calc(100vw - 24px)\");\n } else {\n this.style.setProperty(\"--bl-drawer-current-width\", newWidth);\n }\n }\n }\n\n private toggleDialogHandler() {\n if (this.open) {\n if (this.domExistenceSchedule) {\n clearTimeout(this.domExistenceSchedule);\n }\n this.domExistence = true;\n window.setTimeout(() => {\n if (this.embedUrl && this._drawerIframe) {\n this._drawerIframe.src = this.embedUrl;\n }\n });\n // FIXME: Allow events without payload\n this.onOpen(\"\");\n } else {\n // Give some time for exit animation\n this.domExistenceSchedule = window.setTimeout(() => {\n this.domExistence = false;\n }, 1000);\n\n // FIXME: Allow events without payload\n this.onClose(\"\");\n }\n }\n\n @state() private domExistence = false;\n\n private closeDrawer() {\n this.open = false;\n }\n\n private renderContent() {\n const content = this.embedUrl\n ? html`<iframe id=\"drawer-iframe\" src=${this.embedUrl}></iframe>`\n : html`<slot></slot>`;\n\n return html`<section class=${this.embedUrl ? \"iframe-content\" : \"content\"}>\n ${content}\n </section>`;\n }\n\n private renderContainer() {\n const title = this.caption ? html`<h2 id=\"drawer-caption\">${this.caption}</h2>` : \"\";\n const external_button = this.externalLink\n ? html`<bl-button\n icon=\"external_link\"\n variant=\"tertiary\"\n kind=\"neutral\"\n size=\"small\"\n href=\"${this.externalLink}\"\n target=\"_blank\"\n ></bl-button>`\n : \"\";\n\n return html`<div class=\"container\">\n <header>\n ${title}\n <div class=\"header-buttons\">\n ${external_button}\n <bl-button\n @click=\"${this.closeDrawer}\"\n icon=\"close\"\n label=\"close\"\n size=\"small\"\n variant=\"tertiary\"\n kind=\"neutral\"\n ></bl-button>\n </div>\n </header>\n ${this.renderContent()}\n </div>`;\n }\n\n render(): TemplateResult {\n if (this.domExistence) {\n return html`<div class=\"drawer\">${this.renderContainer()}</div>`;\n } else {\n return html``;\n }\n }\n}\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-drawer\": BlDrawer;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["styleToPixelConverter", "styleValue", "match", "value", "unit", "styleInPixel", "styles", "i", "bl_drawer_default", "BlDrawer", "s", "bl_drawer_default", "event", "changedProperties", "drawerWidth", "styleToPixelConverter", "newWidth", "content", "x", "title", "external_button", "__decorateClass", "e", "i", "t"]
|
|
7
|
-
}
|
package/dist/chunk-HCSEQTUP.js
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import{a as v}from"./chunk-6LT7O7T2.js";import{a as u}from"./chunk-DINNT5P2.js";import{a as h}from"./chunk-GRL4DWKG.js";import{a as d,b as o,c}from"./chunk-5MOOXA2X.js";import{a as p,b as e,f as l}from"./chunk-4OT5AMS5.js";import{d as i}from"./chunk-BWWXE4SL.js";var b=p`:host{display:block;position:relative;flex:1}.stepper-item{--item-color:var(--bl-color-neutral-light);--item-background:var(--bl-color-neutral-full);--active-color:var(--bl-color-primary);--hover-color:var(--bl-color-primary-highlight);--success-color:var(--bl-color-success);--error-color:var(--bl-color-danger);--disabled-color:var(--bl-color-neutral-lighter);--text-color-active:var(--bl-color-primary);--text-color-default:var(--bl-color-neutral-light);--description-color-active:var(--bl-color-neutral-darker);--description-color-default:var(--bl-color-neutral-light);display:flex;align-items:flex-start;gap:0;position:relative;background-color:transparent;padding:0;transition:.2s;width:100%;height:100%}.stepper-item.direction-horizontal{flex-direction:column;align-items:center;text-align:center;min-width:0}.stepper-item.direction-vertical{flex-direction:row;align-items:flex-start;text-align:left;width:100%}.vertical-layout{display:flex;flex-direction:row;align-items:stretch;gap:0;width:100%;height:100%}.stepper-item.direction-horizontal .connector-wrap{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0;position:relative;width:100%;flex:1 1 auto;min-width:0}.stepper-item.direction-vertical .connector-wrap{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;position:relative;flex:0 0 auto;min-height:100%}.stepper-item.direction-vertical:last-child .connector-wrap{min-height:auto}.connector{background-color:#afbbca;transition:background-color .2s;flex-shrink:0}.connector.completed{background-color:#6e7787}.stepper-item.direction-horizontal .connector{height:2px;flex:1 1 auto;min-width:48px}.connector-placeholder{height:2px;flex:1 1 auto;min-width:48px;visibility:hidden}.stepper-item.direction-vertical .connector{width:2px;flex:1 1 auto;min-height:16px}.stepper-item.direction-vertical .connector-placeholder:first-child,.stepper-item.direction-vertical .connector:first-child{display:none}.stepper-indicator{display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;min-height:32px;border-radius:50%;background-color:var(--item-background);border:2px solid var(--item-color);color:var(--item-color);font-weight:var(--bl-font-weight-medium);font-size:var(--bl-font-size-m);line-height:1;transition:.2s;flex-shrink:0;position:relative;z-index:2}.stepper-content{display:flex;flex-direction:column;gap:var(--bl-size-3xs);min-width:0;flex-shrink:0;margin-top:var(--bl-size-2xs);width:100%;text-align:center}.stepper-item.direction-vertical .stepper-content{margin-top:0;margin-left:var(--bl-size-xs);text-align:left;flex:1;padding-bottom:var(--bl-size-xl,24px);gap:0}.stepper-item.direction-vertical.type-dot .stepper-indicator{margin-top:2px}.stepper-title{font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);color:var(--text-color-default);line-height:1.5}.stepper-description{font-size:var(--bl-font-size-s);font-weight:var(--bl-font-weight-regular);color:var(--description-color-default);line-height:1.5}.step-dot{width:12px;height:12px;border-radius:50%;background-color:currentcolor;transition:.2s}.step-number{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);line-height:1}.step-icon{width:18px;height:18px;color:currentcolor;display:flex;align-items:center;justify-content:center}.stepper-item.variant-active .stepper-title{color:var(--text-color-active)}.stepper-item.variant-active .stepper-description{color:var(--description-color-active)}.stepper-item.variant-hover .stepper-title{color:var(--text-color-active)}.stepper-item.variant-hover .stepper-description{color:var(--description-color-active)}.stepper-item.variant-success .stepper-title{color:var(--success-color)}.stepper-item.variant-error .stepper-title{color:var(--error-color)}.stepper-item.disabled .stepper-indicator{border-color:var(--disabled-color);background-color:var(--item-background);color:var(--disabled-color)}.stepper-item.disabled .stepper-description,.stepper-item.disabled .stepper-title{color:var(--text-color-default)}.stepper-item.clickable{cursor:pointer}.stepper-item.clickable.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__ .stepper-indicator,.stepper-item.clickable:hover .stepper-indicator{transform:scale(1.05)}.stepper-item.clickable:focus{outline:0}.stepper-item.clickable:focus-visible .stepper-indicator{outline:2px solid var(--bl-color-primary);outline-offset:2px}.stepper-item.type-dot .stepper-indicator{width:12px!important;height:12px!important;min-width:12px!important;min-height:12px!important;border:none!important;background-color:var(--item-color);padding:0!important;border-radius:50%}.stepper-item.type-dot .step-dot{display:none}.stepper-item.type-number .stepper-indicator{border:2px solid var(--item-color);background-color:var(--item-background);color:var(--item-color)}.stepper-item.type-icon .stepper-indicator{border:none;background-color:var(--item-color);color:var(--item-background)}.stepper-item.variant-default.type-dot .stepper-indicator{background-color:var(--item-color)}.stepper-item.variant-hover.type-dot .stepper-indicator{background-color:var(--hover-color)}.stepper-item.clickable.type-dot.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__ .stepper-indicator,.stepper-item.clickable.type-dot:hover .stepper-indicator{background-color:var(--hover-color)!important}.stepper-item.clickable.variant-success.type-dot.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__ .stepper-indicator,.stepper-item.clickable.variant-success.type-dot:hover .stepper-indicator{background-color:var(--success-color)!important}.stepper-item.clickable.variant-error.type-dot.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__ .stepper-indicator,.stepper-item.clickable.variant-error.type-dot:hover .stepper-indicator{background-color:var(--error-color)!important}.stepper-item.clickable.variant-active.type-dot.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__ .stepper-indicator,.stepper-item.clickable.variant-active.type-dot:hover .stepper-indicator{background-color:var(--active-color)!important}.stepper-item.variant-active.type-dot .stepper-indicator{background-color:var(--active-color)}.stepper-item.variant-success.type-dot .stepper-indicator{background-color:var(--success-color)}.stepper-item.variant-error.type-dot .stepper-indicator{background-color:var(--error-color)}.stepper-item.variant-default.type-number .stepper-indicator{border-color:var(--item-color);background-color:var(--item-background);color:var(--item-color)}.stepper-item.variant-hover.type-number .stepper-indicator{border-color:var(--active-color);background-color:var(--item-background);color:var(--active-color)}.stepper-item.variant-active.type-number .stepper-indicator{border-color:var(--active-color);background-color:var(--active-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-success.type-number .stepper-indicator{border-color:var(--success-color);background-color:var(--success-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-error.type-number .stepper-indicator{border-color:var(--error-color);background-color:var(--error-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-default.type-icon .stepper-indicator{background-color:var(--item-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-active.type-icon .stepper-indicator,.stepper-item.variant-hover.type-icon .stepper-indicator{background-color:var(--active-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-success.type-icon .stepper-indicator{background-color:var(--success-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-error.type-icon .stepper-indicator{background-color:var(--error-color);color:var(--bl-color-neutral-full)}:host([dir=rtl]) .stepper-item.direction-horizontal{text-align:center}:host([dir=rtl]) .stepper-item.direction-vertical{text-align:right}@media (max-width:768px){.stepper-item{padding:var(--bl-size-3xs)}.stepper-content{gap:var(--bl-size-4xs)}.stepper-title{font:var(--bl-font-body-text-3)}.stepper-description{font-size:var(--bl-font-size-s)}}`,m=b;var t=class extends l{constructor(){super(...arguments);this.id="";this.variant="default";this._internalVariant="default";this.disabled=!1;this.icon="check";this.title="";this.description="";this.showLeadingConnector=!1;this.showTrailingConnector=!0;this.stepperType="dot";this.direction="horizontal";this.stepUsage="clickable"}static get styles(){return[m]}static get shadowRootOptions(){return{...l.shadowRootOptions,delegatesFocus:!0}}willUpdate(r){super.willUpdate(r),r.has("variant")&&(this._internalVariant=this.variant)}get isClickable(){return!this.disabled&&this.variant!=="error"&&this.stepUsage==="clickable"}get stepNumber(){let r=this.parentElement;return r?Array.from(r.children).filter(a=>a.tagName.toLowerCase()==="bl-stepper-item").indexOf(this)+1:1}get shouldShowIcon(){return this.stepperType==="icon"?!0:this.stepperType==="number"?this.variant==="success"||this.variant==="error":!1}get iconName(){return this.stepperType==="icon"?this.icon:this.variant==="success"?"check":this.variant==="error"?"close":"check"}handleClick(r){this.isClickable&&(r.preventDefault(),r.stopPropagation(),this.onItemClick(this.id))}handleKeyDown(r){this.isClickable&&(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),this.onItemClick(this.id))}handleMouseEnter(){this.isClickable&&this.variant==="default"&&(this._internalVariant="hover",this.requestUpdate())}handleMouseLeave(){this._internalVariant==="hover"&&(this._internalVariant="default",this.requestUpdate())}render(){let r={"stepper-item":!0,[`variant-${this._internalVariant}`]:!0,[`type-${this.stepperType}`]:!0,[`direction-${this.direction}`]:!0,disabled:this.disabled,clickable:this.isClickable},n=e`
|
|
2
|
-
<div class="stepper-content">
|
|
3
|
-
${this.title?e`<div class="stepper-title">${this.title}</div>`:""}
|
|
4
|
-
${this.description?e`<div class="stepper-description">${this.description}</div>`:""}
|
|
5
|
-
</div>
|
|
6
|
-
`,a=this.variant==="success"||this.variant==="active"?"completed":"default",s=e`
|
|
7
|
-
<div class="connector-wrap">
|
|
8
|
-
${this.direction==="horizontal"?e`
|
|
9
|
-
${this.showLeadingConnector?e`<div class="connector connector-leading ${a}"></div>`:e`<div class="connector-placeholder"></div>`}
|
|
10
|
-
<div class="stepper-indicator">
|
|
11
|
-
${this.shouldShowIcon?e`<bl-icon name="${this.iconName}" class="step-icon"></bl-icon>`:this.stepperType==="number"?e`<span class="step-number">${this.stepNumber}</span>`:""}
|
|
12
|
-
</div>
|
|
13
|
-
${this.showTrailingConnector?e`<div class="connector connector-trailing ${a}"></div>`:e`<div class="connector-placeholder"></div>`}
|
|
14
|
-
`:e`
|
|
15
|
-
${this.showLeadingConnector?e`<div class="connector connector-leading ${a}"></div>`:""}
|
|
16
|
-
<div class="stepper-indicator">
|
|
17
|
-
${this.shouldShowIcon?e`<bl-icon name="${this.iconName}" class="step-icon"></bl-icon>`:this.stepperType==="number"?e`<span class="step-number">${this.stepNumber}</span>`:""}
|
|
18
|
-
</div>
|
|
19
|
-
${this.showTrailingConnector?e`<div class="connector connector-trailing ${a}"></div>`:""}
|
|
20
|
-
`}
|
|
21
|
-
</div>
|
|
22
|
-
`;return e`
|
|
23
|
-
<div
|
|
24
|
-
class="${v(r)}"
|
|
25
|
-
role="button"
|
|
26
|
-
tabindex="${this.isClickable?"0":"-1"}"
|
|
27
|
-
aria-label="${u(this.title||`Step ${this.stepNumber}`)}"
|
|
28
|
-
aria-disabled="${this.disabled}"
|
|
29
|
-
@click="${this.handleClick}"
|
|
30
|
-
@keydown="${this.handleKeyDown}"
|
|
31
|
-
@mouseenter="${this.handleMouseEnter}"
|
|
32
|
-
@mouseleave="${this.handleMouseLeave}"
|
|
33
|
-
>
|
|
34
|
-
${this.direction==="horizontal"?e` ${s} ${n} `:e` <div class="vertical-layout">${s} ${n}</div> `}
|
|
35
|
-
</div>
|
|
36
|
-
`}};i([o({type:String,reflect:!0})],t.prototype,"id",2),i([o({type:String,reflect:!0})],t.prototype,"variant",2),i([o({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([o({type:String})],t.prototype,"icon",2),i([o({type:String,reflect:!0})],t.prototype,"title",2),i([o({type:String,reflect:!0})],t.prototype,"description",2),i([c()],t.prototype,"showLeadingConnector",2),i([c()],t.prototype,"showTrailingConnector",2),i([c()],t.prototype,"stepperType",2),i([c()],t.prototype,"direction",2),i([c()],t.prototype,"stepUsage",2),i([h("bl-stepper-item-click")],t.prototype,"onItemClick",2),t=i([d("bl-stepper-item")],t);export{t as a};
|
|
37
|
-
//# sourceMappingURL=chunk-HCSEQTUP.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/components/stepper/bl-stepper-item.css", "../src/components/stepper/bl-stepper-item.ts"],
|
|
4
|
-
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:block;position:relative;flex:1}.stepper-item{--item-color:var(--bl-color-neutral-light);--item-background:var(--bl-color-neutral-full);--active-color:var(--bl-color-primary);--hover-color:var(--bl-color-primary-highlight);--success-color:var(--bl-color-success);--error-color:var(--bl-color-danger);--disabled-color:var(--bl-color-neutral-lighter);--text-color-active:var(--bl-color-primary);--text-color-default:var(--bl-color-neutral-light);--description-color-active:var(--bl-color-neutral-darker);--description-color-default:var(--bl-color-neutral-light);display:flex;align-items:flex-start;gap:0;position:relative;background-color:transparent;padding:0;transition:.2s;width:100%;height:100%}.stepper-item.direction-horizontal{flex-direction:column;align-items:center;text-align:center;min-width:0}.stepper-item.direction-vertical{flex-direction:row;align-items:flex-start;text-align:left;width:100%}.vertical-layout{display:flex;flex-direction:row;align-items:stretch;gap:0;width:100%;height:100%}.stepper-item.direction-horizontal .connector-wrap{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0;position:relative;width:100%;flex:1 1 auto;min-width:0}.stepper-item.direction-vertical .connector-wrap{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;position:relative;flex:0 0 auto;min-height:100%}.stepper-item.direction-vertical:last-child .connector-wrap{min-height:auto}.connector{background-color:#afbbca;transition:background-color .2s;flex-shrink:0}.connector.completed{background-color:#6e7787}.stepper-item.direction-horizontal .connector{height:2px;flex:1 1 auto;min-width:48px}.connector-placeholder{height:2px;flex:1 1 auto;min-width:48px;visibility:hidden}.stepper-item.direction-vertical .connector{width:2px;flex:1 1 auto;min-height:16px}.stepper-item.direction-vertical .connector-placeholder:first-child,.stepper-item.direction-vertical .connector:first-child{display:none}.stepper-indicator{display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;min-height:32px;border-radius:50%;background-color:var(--item-background);border:2px solid var(--item-color);color:var(--item-color);font-weight:var(--bl-font-weight-medium);font-size:var(--bl-font-size-m);line-height:1;transition:.2s;flex-shrink:0;position:relative;z-index:2}.stepper-content{display:flex;flex-direction:column;gap:var(--bl-size-3xs);min-width:0;flex-shrink:0;margin-top:var(--bl-size-2xs);width:100%;text-align:center}.stepper-item.direction-vertical .stepper-content{margin-top:0;margin-left:var(--bl-size-xs);text-align:left;flex:1;padding-bottom:var(--bl-size-xl,24px);gap:0}.stepper-item.direction-vertical.type-dot .stepper-indicator{margin-top:2px}.stepper-title{font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);color:var(--text-color-default);line-height:1.5}.stepper-description{font-size:var(--bl-font-size-s);font-weight:var(--bl-font-weight-regular);color:var(--description-color-default);line-height:1.5}.step-dot{width:12px;height:12px;border-radius:50%;background-color:currentcolor;transition:.2s}.step-number{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);line-height:1}.step-icon{width:18px;height:18px;color:currentcolor;display:flex;align-items:center;justify-content:center}.stepper-item.variant-active .stepper-title{color:var(--text-color-active)}.stepper-item.variant-active .stepper-description{color:var(--description-color-active)}.stepper-item.variant-hover .stepper-title{color:var(--text-color-active)}.stepper-item.variant-hover .stepper-description{color:var(--description-color-active)}.stepper-item.variant-success .stepper-title{color:var(--success-color)}.stepper-item.variant-error .stepper-title{color:var(--error-color)}.stepper-item.disabled .stepper-indicator{border-color:var(--disabled-color);background-color:var(--item-background);color:var(--disabled-color)}.stepper-item.disabled .stepper-description,.stepper-item.disabled .stepper-title{color:var(--text-color-default)}.stepper-item.clickable{cursor:pointer}.stepper-item.clickable.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__ .stepper-indicator,.stepper-item.clickable:hover .stepper-indicator{transform:scale(1.05)}.stepper-item.clickable:focus{outline:0}.stepper-item.clickable:focus-visible .stepper-indicator{outline:2px solid var(--bl-color-primary);outline-offset:2px}.stepper-item.type-dot .stepper-indicator{width:12px!important;height:12px!important;min-width:12px!important;min-height:12px!important;border:none!important;background-color:var(--item-color);padding:0!important;border-radius:50%}.stepper-item.type-dot .step-dot{display:none}.stepper-item.type-number .stepper-indicator{border:2px solid var(--item-color);background-color:var(--item-background);color:var(--item-color)}.stepper-item.type-icon .stepper-indicator{border:none;background-color:var(--item-color);color:var(--item-background)}.stepper-item.variant-default.type-dot .stepper-indicator{background-color:var(--item-color)}.stepper-item.variant-hover.type-dot .stepper-indicator{background-color:var(--hover-color)}.stepper-item.clickable.type-dot.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__ .stepper-indicator,.stepper-item.clickable.type-dot:hover .stepper-indicator{background-color:var(--hover-color)!important}.stepper-item.clickable.variant-success.type-dot.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__ .stepper-indicator,.stepper-item.clickable.variant-success.type-dot:hover .stepper-indicator{background-color:var(--success-color)!important}.stepper-item.clickable.variant-error.type-dot.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__ .stepper-indicator,.stepper-item.clickable.variant-error.type-dot:hover .stepper-indicator{background-color:var(--error-color)!important}.stepper-item.clickable.variant-active.type-dot.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__ .stepper-indicator,.stepper-item.clickable.variant-active.type-dot:hover .stepper-indicator{background-color:var(--active-color)!important}.stepper-item.variant-active.type-dot .stepper-indicator{background-color:var(--active-color)}.stepper-item.variant-success.type-dot .stepper-indicator{background-color:var(--success-color)}.stepper-item.variant-error.type-dot .stepper-indicator{background-color:var(--error-color)}.stepper-item.variant-default.type-number .stepper-indicator{border-color:var(--item-color);background-color:var(--item-background);color:var(--item-color)}.stepper-item.variant-hover.type-number .stepper-indicator{border-color:var(--active-color);background-color:var(--item-background);color:var(--active-color)}.stepper-item.variant-active.type-number .stepper-indicator{border-color:var(--active-color);background-color:var(--active-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-success.type-number .stepper-indicator{border-color:var(--success-color);background-color:var(--success-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-error.type-number .stepper-indicator{border-color:var(--error-color);background-color:var(--error-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-default.type-icon .stepper-indicator{background-color:var(--item-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-active.type-icon .stepper-indicator,.stepper-item.variant-hover.type-icon .stepper-indicator{background-color:var(--active-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-success.type-icon .stepper-indicator{background-color:var(--success-color);color:var(--bl-color-neutral-full)}.stepper-item.variant-error.type-icon .stepper-indicator{background-color:var(--error-color);color:var(--bl-color-neutral-full)}:host([dir=rtl]) .stepper-item.direction-horizontal{text-align:center}:host([dir=rtl]) .stepper-item.direction-vertical{text-align:right}@media (max-width:768px){.stepper-item{padding:var(--bl-size-3xs)}.stepper-content{gap:var(--bl-size-4xs)}.stepper-title{font:var(--bl-font-body-text-3)}.stepper-description{font-size:var(--bl-font-size-s)}}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport \"../icon/bl-icon\";\nimport { BaklavaIcon } from \"../icon/icon-list\";\nimport style from \"./bl-stepper-item.css\";\n\nexport type StepperItemVariant = \"default\" | \"active\" | \"success\" | \"error\";\ntype InternalStepperItemVariant = StepperItemVariant | \"hover\";\nexport type StepperType = \"dot\" | \"number\" | \"icon\";\nexport type StepperDirection = \"horizontal\" | \"vertical\";\n\n/**\n * @tag bl-stepper-item\n * @summary Baklava Stepper Item component for individual steps in a stepper\n *\n * @slot default - Step content (title and description)\n */\n\n@customElement(\"bl-stepper-item\")\nexport default class BlStepperItem extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * @internal\n */\n static get shadowRootOptions() {\n return { ...LitElement.shadowRootOptions, delegatesFocus: true };\n }\n\n /**\n * Defines stepper item's id\n */\n @property({ type: String, reflect: true })\n id: string = \"\";\n\n /**\n * Defines stepper item's status\n */\n @property({ type: String, reflect: true })\n variant: StepperItemVariant = \"default\";\n\n /**\n * Internal variant state that includes hover\n * @internal\n */\n private _internalVariant: InternalStepperItemVariant = \"default\";\n\n /**\n * Defines stepper item's interaction\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * If stepper type is icon, it should be rendered on stepper items\n */\n @property({ type: String })\n icon: BaklavaIcon = \"check\";\n\n /**\n * Defines stepper item's main title\n */\n @property({ type: String, reflect: true })\n title = \"\";\n\n /**\n * Defines stepper item's description\n */\n @property({ type: String, reflect: true })\n description = \"\";\n\n /**\n * Internal state to show leading connector (line before the step)\n * @internal\n */\n @state()\n showLeadingConnector = false;\n\n /**\n * Internal state to show trailing connector (line after the step)\n * @internal\n */\n @state()\n showTrailingConnector = true;\n\n /**\n * Internal state to track stepper type from parent\n * @internal\n */\n @state()\n stepperType: StepperType = \"dot\";\n\n /**\n * Internal state to track stepper direction from parent\n * @internal\n */\n @state()\n direction: StepperDirection = \"horizontal\";\n\n /**\n * Internal state to track stepper usage from parent\n * @internal\n */\n @state()\n stepUsage: \"clickable\" | \"non-clickable\" = \"clickable\";\n\n /**\n * Fires when stepper item is clicked\n */\n @event(\"bl-stepper-item-click\") private onItemClick: EventDispatcher<string>;\n\n willUpdate(changedProperties: Map<string | number | symbol, unknown>) {\n super.willUpdate(changedProperties);\n\n // Sync internal variant with public variant\n if (changedProperties.has(\"variant\")) {\n this._internalVariant = this.variant;\n }\n }\n\n private get isClickable(): boolean {\n return !this.disabled && this.variant !== \"error\" && this.stepUsage === \"clickable\";\n }\n\n /**\n * @internal\n */\n get stepNumber(): number {\n const parent = this.parentElement;\n\n if (!parent) return 1;\n\n const items = Array.from(parent.children).filter(\n child => child.tagName.toLowerCase() === \"bl-stepper-item\"\n );\n\n return items.indexOf(this) + 1;\n }\n\n /**\n * @internal\n */\n get shouldShowIcon(): boolean {\n if (this.stepperType === \"icon\") {\n return true;\n }\n if (this.stepperType === \"number\") {\n return this.variant === \"success\" || this.variant === \"error\";\n }\n return false;\n }\n\n /**\n * @internal\n */\n get iconName(): BaklavaIcon {\n if (this.stepperType === \"icon\") {\n return this.icon;\n }\n if (this.variant === \"success\") {\n return \"check\";\n }\n if (this.variant === \"error\") {\n return \"close\";\n }\n return \"check\";\n }\n\n private handleClick(event: Event) {\n if (!this.isClickable) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n this.onItemClick(this.id);\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (!this.isClickable) {\n return;\n }\n\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n this.onItemClick(this.id);\n }\n }\n\n private handleMouseEnter() {\n if (this.isClickable && this.variant === \"default\") {\n this._internalVariant = \"hover\";\n this.requestUpdate();\n }\n }\n\n private handleMouseLeave() {\n if (this._internalVariant === \"hover\") {\n this._internalVariant = \"default\";\n this.requestUpdate();\n }\n }\n\n render(): TemplateResult {\n const classes = {\n \"stepper-item\": true,\n [`variant-${this._internalVariant}`]: true,\n [`type-${this.stepperType}`]: true,\n [`direction-${this.direction}`]: true,\n disabled: this.disabled,\n clickable: this.isClickable,\n };\n\n const content = html`\n <div class=\"stepper-content\">\n ${this.title ? html`<div class=\"stepper-title\">${this.title}</div>` : \"\"}\n ${this.description ? html`<div class=\"stepper-description\">${this.description}</div>` : \"\"}\n </div>\n `;\n\n const connectorState =\n this.variant === \"success\" || this.variant === \"active\" ? \"completed\" : \"default\";\n\n const stepIndicator = html`\n <div class=\"connector-wrap\">\n ${this.direction === \"horizontal\"\n ? html`\n ${this.showLeadingConnector\n ? html`<div class=\"connector connector-leading ${connectorState}\"></div>`\n : html`<div class=\"connector-placeholder\"></div>`}\n <div class=\"stepper-indicator\">\n ${this.shouldShowIcon\n ? html`<bl-icon name=\"${this.iconName}\" class=\"step-icon\"></bl-icon>`\n : this.stepperType === \"number\"\n ? html`<span class=\"step-number\">${this.stepNumber}</span>`\n : \"\"}\n </div>\n ${this.showTrailingConnector\n ? html`<div class=\"connector connector-trailing ${connectorState}\"></div>`\n : html`<div class=\"connector-placeholder\"></div>`}\n `\n : html`\n ${this.showLeadingConnector\n ? html`<div class=\"connector connector-leading ${connectorState}\"></div>`\n : \"\"}\n <div class=\"stepper-indicator\">\n ${this.shouldShowIcon\n ? html`<bl-icon name=\"${this.iconName}\" class=\"step-icon\"></bl-icon>`\n : this.stepperType === \"number\"\n ? html`<span class=\"step-number\">${this.stepNumber}</span>`\n : \"\"}\n </div>\n ${this.showTrailingConnector\n ? html`<div class=\"connector connector-trailing ${connectorState}\"></div>`\n : \"\"}\n `}\n </div>\n `;\n\n return html`\n <div\n class=\"${classMap(classes)}\"\n role=\"button\"\n tabindex=\"${this.isClickable ? \"0\" : \"-1\"}\"\n aria-label=\"${ifDefined(this.title || `Step ${this.stepNumber}`)}\"\n aria-disabled=\"${this.disabled}\"\n @click=\"${this.handleClick}\"\n @keydown=\"${this.handleKeyDown}\"\n @mouseenter=\"${this.handleMouseEnter}\"\n @mouseleave=\"${this.handleMouseLeave}\"\n >\n ${this.direction === \"horizontal\"\n ? html` ${stepIndicator} ${content} `\n : html` <div class=\"vertical-layout\">${stepIndicator} ${content}</div> `}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-stepper-item\": BlStepperItem;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["styles", "i", "bl_stepper_item_default", "BlStepperItem", "s", "bl_stepper_item_default", "changedProperties", "parent", "child", "event", "classes", "content", "x", "connectorState", "stepIndicator", "o", "l", "__decorateClass", "e", "t"]
|
|
7
|
-
}
|