@trendyol/baklava 2.0.0-beta.22 → 2.0.0-beta.23
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/README.md +1 -1
- package/dist/baklava.js +1 -1
- package/dist/chunk-7M2LGOCX.js +7 -0
- package/dist/chunk-7M2LGOCX.js.map +7 -0
- package/dist/{chunk-DGRXEOW7.js → chunk-BBQNBSAJ.js} +2 -16
- package/dist/{chunk-DGRXEOW7.js.map → chunk-BBQNBSAJ.js.map} +2 -2
- package/dist/chunk-HEJ42DNS.js +18 -0
- package/dist/chunk-HEJ42DNS.js.map +7 -0
- package/dist/chunk-LVWH2KEY.js +30 -0
- package/dist/chunk-LVWH2KEY.js.map +7 -0
- package/dist/chunk-O4DFKSRZ.js +2 -0
- package/dist/chunk-O4DFKSRZ.js.map +7 -0
- package/dist/chunk-O5S6ERZ7.js +11 -0
- package/dist/chunk-O5S6ERZ7.js.map +7 -0
- package/dist/chunk-W4OOR3LR.js +20 -0
- package/dist/chunk-W4OOR3LR.js.map +7 -0
- package/dist/chunk-WATPLV54.js +5 -0
- package/dist/chunk-WATPLV54.js.map +7 -0
- package/dist/{chunk-BVALTOFF.js → chunk-ZHDVBZMU.js} +2 -48
- package/dist/{chunk-BVALTOFF.js.map → chunk-ZHDVBZMU.js.map} +2 -2
- package/dist/components/badge/bl-badge.js +1 -1
- package/dist/components/button/bl-button.js +1 -1
- package/dist/components/icon/bl-icon.js +1 -1
- package/dist/components/input/bl-input.js +1 -1
- package/dist/components/progress-indicator/bl-progress-indicator.js +1 -1
- package/dist/components/tab-group/bl-tab-group.js +1 -1
- package/dist/components/tab-group/tab/bl-tab.js +1 -1
- package/dist/components/tab-group/tab-panel/bl-tab-panel.js +1 -1
- package/dist/components/tooltip/bl-tooltip.js +1 -1
- package/package.json +1 -1
- package/dist/chunk-4HMEMZY7.js +0 -29
- package/dist/chunk-4HMEMZY7.js.map +0 -7
- package/dist/chunk-5AGXQPQY.js +0 -14
- package/dist/chunk-5AGXQPQY.js.map +0 -7
- package/dist/chunk-675JRUTN.js +0 -185
- package/dist/chunk-675JRUTN.js.map +0 -7
- package/dist/chunk-AMTKE3PJ.js +0 -43
- package/dist/chunk-AMTKE3PJ.js.map +0 -7
- package/dist/chunk-DP5CC6SR.js +0 -185
- package/dist/chunk-DP5CC6SR.js.map +0 -7
- package/dist/chunk-FP5POXZC.js +0 -57
- package/dist/chunk-FP5POXZC.js.map +0 -7
- package/dist/chunk-RSHPTQX4.js +0 -148
- package/dist/chunk-RSHPTQX4.js.map +0 -7
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Baklava Design System
|
|
2
2
|
|
|
3
|
-
  [](https://github.com/semantic-release/semantic-release)
|
|
3
|
+
[](https://www.npmjs.com/package/@trendyol/baklava) [](https://www.jsdelivr.com/package/npm/@trendyol/baklava) [](https://github.com/semantic-release/semantic-release)
|
|
4
4
|
|
|
5
5
|
> This is a work-in-progress version. If you want to work on previous version (Grace) please check `main` branch.
|
|
6
6
|
|
package/dist/baklava.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as s}from"./chunk-
|
|
1
|
+
import{a as s}from"./chunk-O5S6ERZ7.js";import{a as p}from"./chunk-O4DFKSRZ.js";import{a as f}from"./chunk-LVWH2KEY.js";import{a as u}from"./chunk-ZHDVBZMU.js";import{a as r}from"./chunk-WATPLV54.js";import{a as e}from"./chunk-HEJ42DNS.js";import{a as l}from"./chunk-W4OOR3LR.js";import"./chunk-SQ3STNEW.js";import"./chunk-HLQIZBQW.js";import{a as o,b as t,c as a}from"./chunk-BBQNBSAJ.js";import"./chunk-72IJCTLJ.js";import"./chunk-23UFIOHV.js";import{a as d}from"./chunk-7M2LGOCX.js";import"./chunk-BEHH5JPC.js";import"./chunk-NZ3RGSR6.js";export{r as BlBadge,e as BlButton,a as BlIcon,l as BlInput,d as BlProgressIndicator,f as BlTab,s as BlTabGroup,p as BlTabPanel,u as BlTooltip,t as getIconPath,o as setIconPath};
|
|
2
2
|
//# sourceMappingURL=baklava.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import{a as i,b as l,e as o,f as u,g as a,h as s,i as p}from"./chunk-BEHH5JPC.js";import{a as r}from"./chunk-NZ3RGSR6.js";var v=i`.progress-indicator{--max:100;--value:0;--value-color:var(--bl-color-success);--height:var(--bl-size-2xs);--radius:var(--bl-size-3xs);position:relative;background-color:var(--bl-color-secondary-background);height:var(--height);border-radius:var(--radius);width:100%}.progress-indicator::before{content:'';position:absolute;height:100%;width:calc(100% / var(--max) * var(--value));background-color:var(--value-color);border-radius:var(--radius)}:host([size='small']) .progress-indicator{--height:var(--bl-size-3xs);--radius:var(--bl-size-4xs)}:host([size='large']) .progress-indicator{--height:var(--bl-size-xs);--radius:6px}:host([failed]) .progress-indicator{--value-color:var(--bl-color-danger)}`,m=v;var e=class extends o{constructor(){super(...arguments);this.size="medium";this.failed=!1;this._max=100;this._value=0}static get styles(){return m}get max(){return this._max}set max(t){this._max=t,this.updateCssVariable()}get value(){return this._value}set value(t){this._value=t,this.updateCssVariable()}async updateCssVariable(){await this.updateComplete,this.wrapper.style.setProperty("--value",`${this.value}`),this.wrapper.style.setProperty("--max",`${this.max}`)}render(){return l`<div
|
|
2
|
+
class="progress-indicator"
|
|
3
|
+
role="progressbar"
|
|
4
|
+
aria-valuemax="${this._max}"
|
|
5
|
+
aria-valuenow="${this._value}"
|
|
6
|
+
></div>`}};r([p(".progress-indicator")],e.prototype,"wrapper",2),r([a({type:String})],e.prototype,"size",2),r([a({type:Boolean})],e.prototype,"failed",2),r([a({type:Number})],e.prototype,"max",1),r([a({type:Number})],e.prototype,"value",1),r([s()],e.prototype,"_max",2),r([s()],e.prototype,"_value",2),e=r([u("bl-progress-indicator")],e);export{e as a};
|
|
7
|
+
//# sourceMappingURL=chunk-7M2LGOCX.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/progress-indicator/bl-progress-indicator.css", "../src/components/progress-indicator/bl-progress-indicator.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.progress-indicator{--max:100;--value:0;--value-color:var(--bl-color-success);--height:var(--bl-size-2xs);--radius:var(--bl-size-3xs);position:relative;background-color:var(--bl-color-secondary-background);height:var(--height);border-radius:var(--radius);width:100%}.progress-indicator::before{content:'';position:absolute;height:100%;width:calc(100% / var(--max) * var(--value));background-color:var(--value-color);border-radius:var(--radius)}:host([size='small']) .progress-indicator{--height:var(--bl-size-3xs);--radius:var(--bl-size-4xs)}:host([size='large']) .progress-indicator{--height:var(--bl-size-xs);--radius:6px}:host([failed]) .progress-indicator{--value-color:var(--bl-color-danger)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport style from './bl-progress-indicator.css';\n\nexport type ProgressIndicatorSize = 'small' | 'medium' | 'large';\n\n/**\n * @tag bl-progress-indicator\n * @summary Baklava Progress Indicator component\n *\n * @property {max} [max=100]\n * @property {number} [value=0]\n */\n\n@customElement('bl-progress-indicator')\nexport default class BlProgressIndicator extends LitElement {\n static get styles(): CSSResultGroup {\n return style;\n }\n\n @query('.progress-indicator') private wrapper: HTMLElement;\n\n /**\n * Sets the size\n */\n @property({ type: String })\n size: ProgressIndicatorSize = 'medium';\n\n /**\n * Sets the status\n */\n @property({ type: Boolean })\n failed = false;\n\n /**\n * Sets the max\n */\n @property({ type: Number })\n get max() {\n return this._max;\n }\n set max(max: number) {\n this._max = max;\n this.updateCssVariable();\n }\n\n /**\n * Sets the value\n */\n @property({ type: Number })\n get value() {\n return this._value;\n }\n set value(value: number) {\n this._value = value;\n this.updateCssVariable();\n }\n\n @state() private _max = 100;\n @state() private _value = 0;\n\n async updateCssVariable() {\n await this.updateComplete;\n this.wrapper.style.setProperty('--value', `${this.value}`);\n this.wrapper.style.setProperty('--max', `${this.max}`);\n }\n\n render(): TemplateResult {\n return html`<div\n class=\"progress-indicator\"\n role=\"progressbar\"\n aria-valuemax=\"${this._max}\"\n aria-valuenow=\"${this._value}\"\n ></div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-progress-indicator': BlProgressIndicator;\n }\n}\n"],
|
|
5
|
+
"mappings": "0HACO,IAAMA,EAASC,6rBACfC,EAAQF,ECaf,IAAqBG,EAArB,cAAiDC,CAAW,CAA5D,kCAWE,UAA8B,SAM9B,YAAS,GA0BA,KAAQ,KAAO,IACf,KAAQ,OAAS,EA3C1B,WAAW,QAAyB,CAClC,OAAOC,CACT,CAoBA,IAAI,KAAM,CACR,OAAO,KAAK,IACd,CACA,IAAI,IAAIC,EAAa,CACnB,KAAK,KAAOA,EACZ,KAAK,kBAAkB,CACzB,CAMA,IAAI,OAAQ,CACV,OAAO,KAAK,MACd,CACA,IAAI,MAAMC,EAAe,CACvB,KAAK,OAASA,EACd,KAAK,kBAAkB,CACzB,CAKA,MAAM,mBAAoB,CACxB,MAAM,KAAK,eACX,KAAK,QAAQ,MAAM,YAAY,UAAW,GAAG,KAAK,OAAO,EACzD,KAAK,QAAQ,MAAM,YAAY,QAAS,GAAG,KAAK,KAAK,CACvD,CAEA,QAAyB,CACvB,OAAOC;AAAA;AAAA;AAAA,uBAGY,KAAK;AAAA,uBACL,KAAK;AAAA,YAE1B,CACF,EAvDwCC,EAAA,CAArCC,EAAM,qBAAqB,GALTP,EAKmB,uBAMtCM,EAAA,CADCE,EAAS,CAAE,KAAM,MAAO,CAAC,GAVPR,EAWnB,oBAMAM,EAAA,CADCE,EAAS,CAAE,KAAM,OAAQ,CAAC,GAhBRR,EAiBnB,sBAMIM,EAAA,CADHE,EAAS,CAAE,KAAM,MAAO,CAAC,GAtBPR,EAuBf,mBAYAM,EAAA,CADHE,EAAS,CAAE,KAAM,MAAO,CAAC,GAlCPR,EAmCf,qBAQaM,EAAA,CAAhBG,EAAM,GA3CYT,EA2CF,oBACAM,EAAA,CAAhBG,EAAM,GA5CYT,EA4CF,sBA5CEA,EAArBM,EAAA,CADCI,EAAc,uBAAuB,GACjBV",
|
|
6
|
+
"names": ["styles", "r", "bl_progress_indicator_default", "BlProgressIndicator", "s", "bl_progress_indicator_default", "max", "value", "$", "__decorateClass", "i", "e", "t", "n"]
|
|
7
|
+
}
|
|
@@ -1,21 +1,7 @@
|
|
|
1
|
-
import{a as w,b as m,c as E}from"./chunk-72IJCTLJ.js";import{a as p}from"./chunk-23UFIOHV.js";import{a as f,b as u,c as g,d as l,e as v,f as y,g as T,h as x}from"./chunk-BEHH5JPC.js";import{a as r}from"./chunk-NZ3RGSR6.js";var s=class extends E{constructor(t){if(super(t),this.it=l,t.type!==w.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===l||t==null)return this.ft=void 0,this.it=t;if(t===g)return t;if(typeof t!="string")throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this.ft;this.it=t;let i=[t];return i.raw=i,this.ft={_$litType$:this.constructor.resultType,strings:i,values:[]}}};s.directiveName="unsafeHTML",s.resultType=1;var G=m(s);var n=class extends s{};n.directiveName="unsafeSVG",n.resultType=2;var L=m(n);var P="./assets";function M(a){P=a}function $(){return P}var N=import.meta.url;N&&M(N.split("/").slice(0,-1).concat("assets").join("/"));var D=f`:host {
|
|
2
|
-
display: inline-block;
|
|
3
|
-
position: relative;
|
|
4
|
-
width: 1em;
|
|
5
|
-
height: 1em;
|
|
6
|
-
min-width: 1em;
|
|
7
|
-
min-height: 1em;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
:host div,
|
|
11
|
-
:host svg {
|
|
12
|
-
width: 100%;
|
|
13
|
-
height: 100%;
|
|
14
|
-
}
|
|
15
|
-
`,b=D;var d=new Map,e=class extends v{static get styles(){return[b]}get name(){return this._iconName}set name(i){i!==this._iconName&&(this._iconName=i,this.load())}async load(){let c=`${$()}/${this.name}.svg`;d.has(c)||d.set(c,fetch(c));try{let o=await d.get(c),h=await(o==null?void 0:o.clone());h!=null&&h.ok?(this.svg=await h.text(),this.onLoad(`${this.name} icon loaded`),this.requestUpdate()):this.onError(`${this.name} icon failed to load`)}catch(o){this.onError(`${this.name} icon failed to load [${o}]`)}}render(){return u`<div aria-hidden="true">${L(this.svg)}</div>`}};r([T()],e.prototype,"name",1),r([p("bl-load")],e.prototype,"onLoad",2),r([p("bl-error")],e.prototype,"onError",2),r([x()],e.prototype,"svg",2),e=r([y("bl-icon")],e);export{M as a,$ as b,e as c};
|
|
1
|
+
import{a as w,b as m,c as E}from"./chunk-72IJCTLJ.js";import{a as p}from"./chunk-23UFIOHV.js";import{a as f,b as u,c as g,d as l,e as v,f as y,g as T,h as x}from"./chunk-BEHH5JPC.js";import{a as r}from"./chunk-NZ3RGSR6.js";var s=class extends E{constructor(t){if(super(t),this.it=l,t.type!==w.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===l||t==null)return this.ft=void 0,this.it=t;if(t===g)return t;if(typeof t!="string")throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this.ft;this.it=t;let i=[t];return i.raw=i,this.ft={_$litType$:this.constructor.resultType,strings:i,values:[]}}};s.directiveName="unsafeHTML",s.resultType=1;var G=m(s);var n=class extends s{};n.directiveName="unsafeSVG",n.resultType=2;var L=m(n);var P="./assets";function M(a){P=a}function $(){return P}var N=import.meta.url;N&&M(N.split("/").slice(0,-1).concat("assets").join("/"));var D=f`:host{display:inline-block;position:relative;width:1em;height:1em;min-width:1em;min-height:1em}:host div,:host svg{width:100%;height:100%}`,b=D;var d=new Map,e=class extends v{static get styles(){return[b]}get name(){return this._iconName}set name(i){i!==this._iconName&&(this._iconName=i,this.load())}async load(){let c=`${$()}/${this.name}.svg`;d.has(c)||d.set(c,fetch(c));try{let o=await d.get(c),h=await(o==null?void 0:o.clone());h!=null&&h.ok?(this.svg=await h.text(),this.onLoad(`${this.name} icon loaded`),this.requestUpdate()):this.onError(`${this.name} icon failed to load`)}catch(o){this.onError(`${this.name} icon failed to load [${o}]`)}}render(){return u`<div aria-hidden="true">${L(this.svg)}</div>`}};r([T()],e.prototype,"name",1),r([p("bl-load")],e.prototype,"onLoad",2),r([p("bl-error")],e.prototype,"onError",2),r([x()],e.prototype,"svg",2),e=r([y("bl-icon")],e);export{M as a,$ as b,e as c};
|
|
16
2
|
/**
|
|
17
3
|
* @license
|
|
18
4
|
* Copyright 2017 Google LLC
|
|
19
5
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
20
6
|
*/
|
|
21
|
-
//# sourceMappingURL=chunk-
|
|
7
|
+
//# sourceMappingURL=chunk-BBQNBSAJ.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../node_modules/lit-html/src/directives/unsafe-html.ts", "../node_modules/lit-html/src/directives/unsafe-svg.ts", "../src/utilities/asset-paths.ts", "../src/components/icon/bl-icon.css", "../src/components/icon/bl-icon.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {nothing, TemplateResult, noChange} from '../lit-html.js';\nimport {directive, Directive, PartInfo, PartType} from '../directive.js';\n\nconst HTML_RESULT = 1;\n\nexport class UnsafeHTMLDirective extends Directive {\n static directiveName = 'unsafeHTML';\n static resultType = HTML_RESULT;\n\n private _value: unknown = nothing;\n private _templateResult?: TemplateResult;\n\n constructor(partInfo: PartInfo) {\n super(partInfo);\n if (partInfo.type !== PartType.CHILD) {\n throw new Error(\n `${\n (this.constructor as typeof UnsafeHTMLDirective).directiveName\n }() can only be used in child bindings`\n );\n }\n }\n\n render(value: string | typeof nothing | typeof noChange | undefined | null) {\n if (value === nothing || value == null) {\n this._templateResult = undefined;\n return (this._value = value);\n }\n if (value === noChange) {\n return value;\n }\n if (typeof value != 'string') {\n throw new Error(\n `${\n (this.constructor as typeof UnsafeHTMLDirective).directiveName\n }() called with a non-string value`\n );\n }\n if (value === this._value) {\n return this._templateResult;\n }\n this._value = value;\n const strings = [value] as unknown as TemplateStringsArray;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (strings as any).raw = strings;\n // WARNING: impersonating a TemplateResult like this is extremely\n // dangerous. Third-party directives should not do this.\n return (this._templateResult = {\n // Cast to a known set of integers that satisfy ResultType so that we\n // don't have to export ResultType and possibly encourage this pattern.\n // This property needs to remain unminified.\n ['_$litType$']: (this.constructor as typeof UnsafeHTMLDirective)\n .resultType as 1 | 2,\n strings,\n values: [],\n });\n }\n}\n\n/**\n * Renders the result as HTML, rather than text.\n *\n * The values `undefined`, `null`, and `nothing`, will all result in no content\n * (empty string) being rendered.\n *\n * Note, this is unsafe to use with any user-provided input that hasn't been\n * sanitized or escaped, as it may lead to cross-site-scripting\n * vulnerabilities.\n */\nexport const unsafeHTML = directive(UnsafeHTMLDirective);\n", "/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {directive} from '../directive.js';\nimport {UnsafeHTMLDirective} from './unsafe-html.js';\n\nconst SVG_RESULT = 2;\n\nclass UnsafeSVGDirective extends UnsafeHTMLDirective {\n static override directiveName = 'unsafeSVG';\n static override resultType = SVG_RESULT;\n}\n\n/**\n * Renders the result as SVG, rather than text.\n *\n * The values `undefined`, `null`, and `nothing`, will all result in no content\n * (empty string) being rendered.\n *\n * Note, this is unsafe to use with any user-provided input that hasn't been\n * sanitized or escaped, as it may lead to cross-site-scripting\n * vulnerabilities.\n */\nexport const unsafeSVG = directive(UnsafeSVGDirective);\n\n/**\n * The type of the class that powers this directive. Necessary for naming the\n * directive's return type.\n */\nexport type {UnsafeSVGDirective};\n", "let iconPath = './assets';\n\nexport function setIconPath(path: string) {\n iconPath = path;\n}\n\nexport function getIconPath() {\n return iconPath;\n}\n\nconst modulePath = import.meta.url;\n\nif (modulePath) {\n setIconPath(modulePath.split('/').slice(0, -1).concat('assets').join('/'));\n}\n", "import {css} from 'lit';\nexport const styles = css`:host
|
|
5
|
-
"mappings": "mOAWaA,gBAA4BC,CAAAA,CAOvCC,YAAYC,EAAAA,CAEV,GADAC,MAAMD,CAAAA,EAJAE,KAAAA,GAAkBC,EAKpBH,EAASI,OAASC,EAASC,MAC7B,MAAUC,MAELL,KAAKH,YAA2CS,cADnD,uCAAA,CAAA,CAONC,OAAOC,EAAAA,CACL,GAAIA,IAAUP,GAAWO,GAAS,KAEhC,OADAR,KAAKS,GAAAA,OACGT,KAAKU,GAASF,EAExB,GAAIA,IAAUG,EACZ,OAAOH,EAET,GAAoB,OAATA,GAAS,SAClB,MAAUH,MAELL,KAAKH,YAA2CS,cADnD,mCAAA,EAKJ,GAAIE,IAAUR,KAAKU,GACjB,OAAOV,KAAKS,GAEdT,KAAKU,GAASF,EACd,IAAMI,EAAU,CAACJ,CAAAA,EAKjB,OAHCI,EAAgBC,IAAMD,EAGfZ,KAAKS,GAAkB,CAI7BK,WAAiBd,KAAKH,YACnBkB,WACHH,QAAAA,EACAI,OAAQ,CAAA,CAAA,CAAA,CAAA,EAhDLrB,EAAAA,cAAgB,aAChBA,EAAAA,WAJW,EAAA,IAkEPsB,EAAaC,EAAUvB,CAAAA,EChEpC,IAAMwB,EAAN,cAAiCC,CAAAA,CAAAA,EACfD,EAAAA,cAAgB,YAChBA,EAAAA,WAJC,EAAA,IAiBNE,EAAYC,EAAUH,CAAAA,EC1BnC,IAAII,EAAW,WAER,SAASC,EAAYC,EAAc,CACxCF,EAAWE,CACb,CAEO,SAASC,GAAc,CAC5B,OAAOH,CACT,CAEA,IAAMI,EAAa,YAAY,IAE3BA,GACFH,EAAYG,EAAW,MAAM,GAAG,EAAE,MAAM,EAAG,EAAE,EAAE,OAAO,QAAQ,EAAE,KAAK,GAAG,CAAC,ECZpE,IAAMC,EAASC
|
|
4
|
+
"sourcesContent": ["/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {nothing, TemplateResult, noChange} from '../lit-html.js';\nimport {directive, Directive, PartInfo, PartType} from '../directive.js';\n\nconst HTML_RESULT = 1;\n\nexport class UnsafeHTMLDirective extends Directive {\n static directiveName = 'unsafeHTML';\n static resultType = HTML_RESULT;\n\n private _value: unknown = nothing;\n private _templateResult?: TemplateResult;\n\n constructor(partInfo: PartInfo) {\n super(partInfo);\n if (partInfo.type !== PartType.CHILD) {\n throw new Error(\n `${\n (this.constructor as typeof UnsafeHTMLDirective).directiveName\n }() can only be used in child bindings`\n );\n }\n }\n\n render(value: string | typeof nothing | typeof noChange | undefined | null) {\n if (value === nothing || value == null) {\n this._templateResult = undefined;\n return (this._value = value);\n }\n if (value === noChange) {\n return value;\n }\n if (typeof value != 'string') {\n throw new Error(\n `${\n (this.constructor as typeof UnsafeHTMLDirective).directiveName\n }() called with a non-string value`\n );\n }\n if (value === this._value) {\n return this._templateResult;\n }\n this._value = value;\n const strings = [value] as unknown as TemplateStringsArray;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (strings as any).raw = strings;\n // WARNING: impersonating a TemplateResult like this is extremely\n // dangerous. Third-party directives should not do this.\n return (this._templateResult = {\n // Cast to a known set of integers that satisfy ResultType so that we\n // don't have to export ResultType and possibly encourage this pattern.\n // This property needs to remain unminified.\n ['_$litType$']: (this.constructor as typeof UnsafeHTMLDirective)\n .resultType as 1 | 2,\n strings,\n values: [],\n });\n }\n}\n\n/**\n * Renders the result as HTML, rather than text.\n *\n * The values `undefined`, `null`, and `nothing`, will all result in no content\n * (empty string) being rendered.\n *\n * Note, this is unsafe to use with any user-provided input that hasn't been\n * sanitized or escaped, as it may lead to cross-site-scripting\n * vulnerabilities.\n */\nexport const unsafeHTML = directive(UnsafeHTMLDirective);\n", "/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {directive} from '../directive.js';\nimport {UnsafeHTMLDirective} from './unsafe-html.js';\n\nconst SVG_RESULT = 2;\n\nclass UnsafeSVGDirective extends UnsafeHTMLDirective {\n static override directiveName = 'unsafeSVG';\n static override resultType = SVG_RESULT;\n}\n\n/**\n * Renders the result as SVG, rather than text.\n *\n * The values `undefined`, `null`, and `nothing`, will all result in no content\n * (empty string) being rendered.\n *\n * Note, this is unsafe to use with any user-provided input that hasn't been\n * sanitized or escaped, as it may lead to cross-site-scripting\n * vulnerabilities.\n */\nexport const unsafeSVG = directive(UnsafeSVGDirective);\n\n/**\n * The type of the class that powers this directive. Necessary for naming the\n * directive's return type.\n */\nexport type {UnsafeSVGDirective};\n", "let iconPath = './assets';\n\nexport function setIconPath(path: string) {\n iconPath = path;\n}\n\nexport function getIconPath() {\n return iconPath;\n}\n\nconst modulePath = import.meta.url;\n\nif (modulePath) {\n setIconPath(modulePath.split('/').slice(0, -1).concat('assets').join('/'));\n}\n", "import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;position:relative;width:1em;height:1em;min-width:1em;min-height:1em}:host div,:host svg{width:100%;height:100%}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { getIconPath } from '../../utilities/asset-paths';\nimport { event, EventDispatcher } from '../../utilities/event';\n\nimport style from './bl-icon.css';\n\nconst requestMap = new Map<string, Promise<Response>>();\n\n/**\n * @tag bl-icon\n * @summary Baklava Icon component\n *\n * @cssproperty font-size - Setting size of icon. Default is current font size in DOM place\n * @cssproperty color - Setting color of icon. Default is `currentColor`\n */\n@customElement('bl-icon')\nexport default class BlIcon extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n private _iconName: string;\n\n /**\n * Name of the icon to show\n */\n @property()\n get name(): string {\n return this._iconName;\n }\n\n set name(value: string) {\n if (value !== this._iconName) {\n this._iconName = value;\n this.load();\n }\n }\n\n /**\n * Fires when SVG icon loaded\n */\n @event('bl-load') private onLoad: EventDispatcher<string>;\n\n /**\n * Fires when SVG icon failed to load\n */\n @event('bl-error') private onError: EventDispatcher<string>;\n\n @state() private svg: string;\n\n async load() {\n const iconPath = getIconPath();\n const fileUrl = `${iconPath}/${this.name}.svg`;\n\n if (!requestMap.has(fileUrl)) {\n requestMap.set(fileUrl, fetch(fileUrl));\n }\n\n try {\n const iconRequest = await requestMap.get(fileUrl);\n const res = await iconRequest?.clone();\n\n if (res?.ok) {\n this.svg = await res.text();\n this.onLoad(`${this.name} icon loaded`);\n this.requestUpdate();\n } else {\n this.onError(`${this.name} icon failed to load`);\n }\n } catch (error) {\n this.onError(`${this.name} icon failed to load [${error}]`);\n }\n }\n\n render(): TemplateResult {\n return html`<div aria-hidden=\"true\">${unsafeSVG(this.svg)}</div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-icon': BlIcon;\n }\n}\n"],
|
|
5
|
+
"mappings": "mOAWaA,gBAA4BC,CAAAA,CAOvCC,YAAYC,EAAAA,CAEV,GADAC,MAAMD,CAAAA,EAJAE,KAAAA,GAAkBC,EAKpBH,EAASI,OAASC,EAASC,MAC7B,MAAUC,MAELL,KAAKH,YAA2CS,cADnD,uCAAA,CAAA,CAONC,OAAOC,EAAAA,CACL,GAAIA,IAAUP,GAAWO,GAAS,KAEhC,OADAR,KAAKS,GAAAA,OACGT,KAAKU,GAASF,EAExB,GAAIA,IAAUG,EACZ,OAAOH,EAET,GAAoB,OAATA,GAAS,SAClB,MAAUH,MAELL,KAAKH,YAA2CS,cADnD,mCAAA,EAKJ,GAAIE,IAAUR,KAAKU,GACjB,OAAOV,KAAKS,GAEdT,KAAKU,GAASF,EACd,IAAMI,EAAU,CAACJ,CAAAA,EAKjB,OAHCI,EAAgBC,IAAMD,EAGfZ,KAAKS,GAAkB,CAI7BK,WAAiBd,KAAKH,YACnBkB,WACHH,QAAAA,EACAI,OAAQ,CAAA,CAAA,CAAA,CAAA,EAhDLrB,EAAAA,cAAgB,aAChBA,EAAAA,WAJW,EAAA,IAkEPsB,EAAaC,EAAUvB,CAAAA,EChEpC,IAAMwB,EAAN,cAAiCC,CAAAA,CAAAA,EACfD,EAAAA,cAAgB,YAChBA,EAAAA,WAJC,EAAA,IAiBNE,EAAYC,EAAUH,CAAAA,EC1BnC,IAAII,EAAW,WAER,SAASC,EAAYC,EAAc,CACxCF,EAAWE,CACb,CAEO,SAASC,GAAc,CAC5B,OAAOH,CACT,CAEA,IAAMI,EAAa,YAAY,IAE3BA,GACFH,EAAYG,EAAW,MAAM,GAAG,EAAE,MAAM,EAAG,EAAE,EAAE,OAAO,QAAQ,EAAE,KAAK,GAAG,CAAC,ECZpE,IAAMC,EAASC,8IACfC,EAAQF,ECMf,IAAMG,EAAa,IAAI,IAUFC,EAArB,cAAoCC,CAAW,CAC7C,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAQA,IAAI,MAAe,CACjB,OAAO,KAAK,SACd,CAEA,IAAI,KAAKC,EAAe,CAClBA,IAAU,KAAK,YACjB,KAAK,UAAYA,EACjB,KAAK,KAAK,EAEd,CAcA,MAAM,MAAO,CAEX,IAAMC,EAAU,GADCC,EAAY,KACE,KAAK,WAE/BN,EAAW,IAAIK,CAAO,GACzBL,EAAW,IAAIK,EAAS,MAAMA,CAAO,CAAC,EAGxC,GAAI,CACF,IAAME,EAAc,MAAMP,EAAW,IAAIK,CAAO,EAC1CG,EAAM,MAAMD,GAAA,YAAAA,EAAa,SAE3BC,GAAA,MAAAA,EAAK,IACP,KAAK,IAAM,MAAMA,EAAI,KAAK,EAC1B,KAAK,OAAO,GAAG,KAAK,kBAAkB,EACtC,KAAK,cAAc,GAEnB,KAAK,QAAQ,GAAG,KAAK,0BAA0B,CAEnD,OAASC,EAAP,CACA,KAAK,QAAQ,GAAG,KAAK,6BAA6BA,IAAQ,CAC5D,CACF,CAEA,QAAyB,CACvB,OAAOC,4BAA+BC,EAAU,KAAK,GAAG,SAC1D,CACF,EAlDMC,EAAA,CADHC,EAAS,GAVSZ,EAWf,oBAcsBW,EAAA,CAAzBE,EAAM,SAAS,GAzBGb,EAyBO,sBAKCW,EAAA,CAA1BE,EAAM,UAAU,GA9BEb,EA8BQ,uBAEVW,EAAA,CAAhBG,EAAM,GAhCYd,EAgCF,mBAhCEA,EAArBW,EAAA,CADCI,EAAc,SAAS,GACHf",
|
|
6
6
|
"names": ["UnsafeHTMLDirective", "Directive", "constructor", "partInfo", "super", "this", "nothing", "type", "PartType", "CHILD", "Error", "directiveName", "render", "value", "_templateResult", "_value", "noChange", "strings", "raw", "_$litType$", "resultType", "values", "unsafeHTML", "directive", "UnsafeSVGDirective", "UnsafeHTMLDirective", "unsafeSVG", "directive", "iconPath", "setIconPath", "path", "getIconPath", "modulePath", "styles", "r", "bl_icon_default", "requestMap", "BlIcon", "s", "bl_icon_default", "value", "fileUrl", "getIconPath", "iconRequest", "res", "error", "$", "o", "__decorateClass", "e", "event", "t", "n"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import{a as n}from"./chunk-SQ3STNEW.js";import{a as h}from"./chunk-HLQIZBQW.js";import{a as d}from"./chunk-23UFIOHV.js";import{a as s,b as a,e as c,f as u,g as r}from"./chunk-BEHH5JPC.js";import{a as o}from"./chunk-NZ3RGSR6.js";var p=s`:host{display:var(--bl-button-display,inline-block);max-width:100%;position:relative;--bl-button-main-color:var(--bl-color-primary);--bl-button-main-hover-color:var(--bl-color-primary-hover);--bl-button-content-color:var(--bl-color-primary-background);--bl-button-bg-color:var(--bl-button-main-color);--bl-button-border-color:var(--bl-button-main-color);--bl-button-padding-vertical:var(--bl-size-2xs);--bl-button-padding-horizontal:var(--bl-size-m);--bl-button-margin-icon:var(--bl-button-padding-vertical);--bl-button-icon-size:var(--bl-size-m);--bl-button-font:var(--bl-font-title-3-medium);--bl-button-height:var(--bl-size-2xl)}.button{display:flex;gap:var(--bl-button-margin-icon);justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:var(--bl-button-height);border:solid 1px var(--bl-button-border-color);border-radius:6px;text-decoration:none;padding:var(--bl-button-padding-vertical) var(--bl-button-padding-horizontal);cursor:pointer;background-color:var(--bl-button-bg-color);color:var(--bl-button-content-color);font:var(--bl-button-font);font-kerning:none;user-select:none}:host(:hover){--bl-button-bg-color:var(--bl-button-main-hover-color);--bl-button-border-color:var(--bl-button-main-hover-color)}.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([size='small']){--bl-button-font:var(--bl-font-title-4-medium);--bl-button-padding-vertical:var(--bl-size-3xs);--bl-button-padding-horizontal:var(--bl-size-2xs);--bl-button-icon-size:var(--bl-size-s);--bl-button-height:var(--bl-size-xl)}:host([size='large']){--bl-button-font:var(--bl-font-title-3-medium);--bl-button-padding-vertical:var(--bl-size-xs);--bl-button-padding-horizontal:var(--bl-size-xl);--bl-button-margin-icon:var(--bl-size-2xs);--bl-button-height:var(--bl-size-3xl)}.button:focus{outline:0}:host ::slotted(bl-icon){font-size:var(--bl-button-icon-size)}.has-icon:not(.has-content){--bl-button-padding-horizontal:var(--bl-button-padding-vertical);--bl-button-margin-icon:0}:host([variant='secondary']){--bl-button-main-color:var(--bl-color-secondary);--bl-button-main-hover-color:var(--bl-color-secondary-hover)}:host([variant='success']){--bl-button-main-color:var(--bl-color-success);--bl-button-main-hover-color:var(--bl-color-success-hover)}:host([variant='danger']){--bl-button-main-color:var(--bl-color-danger);--bl-button-main-hover-color:var(--bl-color-danger-hover)}:host([disabled]){cursor:not-allowed;--bl-button-main-color:var(--bl-color-tertiary);--bl-button-main-hover-color:var(--bl-color-tertiary);--bl-button-content-color:var(--bl-color-content-passive);--bl-button-bg-color:var(--bl-button-main-color)}:host([disabled]) .button{pointer-events:none;text-decoration:none}:host([kind='text']){--bl-button-content-color:var(--bl-button-main-color);--bl-button-border-color:transparent;--bl-button-bg-color:transparent}:host([kind='text']) .button{text-decoration:underline}:host([kind='outline']){--bl-button-bg-color:transparent;--bl-button-content-color:var(--bl-button-main-color)}:host([kind='outline']:hover:not([disabled])){--bl-button-content-color:var(--bl-color-primary-background);--bl-button-bg-color:var(--bl-button-main-hover-color)}:host([kind='text']:hover:not([disabled])){--bl-button-content-color:var(--bl-button-main-hover-color)}`,v=p;var t=class extends c{constructor(){super(...arguments);this.variant="primary";this.kind="contained";this.size="medium";this.disabled=!1;this.target="_self"}static get styles(){return[v]}get _hasIconSlot(){return this.querySelector(':scope > [slot="icon"]')!==null}get _hasDefaultSlot(){return[...this.childNodes].some(e=>{var i;let l=e.nodeType;return l===e.TEXT_NODE&&((i=e.textContent)==null?void 0:i.trim())!==""||l===e.ELEMENT_NODE&&!e.hasAttribute("slot")})}render(){let b=!!this.href,e=this.icon?a`<bl-icon name=${this.icon}></bl-icon>`:"",l=a`<slot name="icon">${e}</slot> <span class="label"><slot></slot></span>`,i=h({button:!0,"has-icon":this.icon||this._hasIconSlot,"has-content":this._hasDefaultSlot});return b?a`<a
|
|
2
|
+
class=${i}
|
|
3
|
+
aria-disabled="${n(this.disabled)}"
|
|
4
|
+
aria-label="${n(this.label)}"
|
|
5
|
+
href=${n(this.href)}
|
|
6
|
+
target=${n(this.target)}
|
|
7
|
+
role="button"
|
|
8
|
+
>${l}</a
|
|
9
|
+
>`:a`<button
|
|
10
|
+
class=${i}
|
|
11
|
+
aria-disabled="${n(this.disabled)}"
|
|
12
|
+
aria-label="${n(this.label)}"
|
|
13
|
+
?disabled=${this.disabled}
|
|
14
|
+
@click="${this._handleClick}"
|
|
15
|
+
>
|
|
16
|
+
${l}
|
|
17
|
+
</button>`}_handleClick(){this.onClick("Click event fired!")}};o([r({type:String,reflect:!0})],t.prototype,"variant",2),o([r({type:String,reflect:!0})],t.prototype,"kind",2),o([r({type:String,reflect:!0})],t.prototype,"size",2),o([r({type:String})],t.prototype,"label",2),o([r({type:Boolean,reflect:!0})],t.prototype,"disabled",2),o([r({type:String})],t.prototype,"href",2),o([r({type:String})],t.prototype,"icon",2),o([r({type:String})],t.prototype,"target",2),o([d("bl-click")],t.prototype,"onClick",2),t=o([u("bl-button")],t);export{t as a};
|
|
18
|
+
//# sourceMappingURL=chunk-HEJ42DNS.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/button/bl-button.css", "../src/components/button/bl-button.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:var(--bl-button-display,inline-block);max-width:100%;position:relative;--bl-button-main-color:var(--bl-color-primary);--bl-button-main-hover-color:var(--bl-color-primary-hover);--bl-button-content-color:var(--bl-color-primary-background);--bl-button-bg-color:var(--bl-button-main-color);--bl-button-border-color:var(--bl-button-main-color);--bl-button-padding-vertical:var(--bl-size-2xs);--bl-button-padding-horizontal:var(--bl-size-m);--bl-button-margin-icon:var(--bl-button-padding-vertical);--bl-button-icon-size:var(--bl-size-m);--bl-button-font:var(--bl-font-title-3-medium);--bl-button-height:var(--bl-size-2xl)}.button{display:flex;gap:var(--bl-button-margin-icon);justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:var(--bl-button-height);border:solid 1px var(--bl-button-border-color);border-radius:6px;text-decoration:none;padding:var(--bl-button-padding-vertical) var(--bl-button-padding-horizontal);cursor:pointer;background-color:var(--bl-button-bg-color);color:var(--bl-button-content-color);font:var(--bl-button-font);font-kerning:none;user-select:none}:host(:hover){--bl-button-bg-color:var(--bl-button-main-hover-color);--bl-button-border-color:var(--bl-button-main-hover-color)}.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([size='small']){--bl-button-font:var(--bl-font-title-4-medium);--bl-button-padding-vertical:var(--bl-size-3xs);--bl-button-padding-horizontal:var(--bl-size-2xs);--bl-button-icon-size:var(--bl-size-s);--bl-button-height:var(--bl-size-xl)}:host([size='large']){--bl-button-font:var(--bl-font-title-3-medium);--bl-button-padding-vertical:var(--bl-size-xs);--bl-button-padding-horizontal:var(--bl-size-xl);--bl-button-margin-icon:var(--bl-size-2xs);--bl-button-height:var(--bl-size-3xl)}.button:focus{outline:0}:host ::slotted(bl-icon){font-size:var(--bl-button-icon-size)}.has-icon:not(.has-content){--bl-button-padding-horizontal:var(--bl-button-padding-vertical);--bl-button-margin-icon:0}:host([variant='secondary']){--bl-button-main-color:var(--bl-color-secondary);--bl-button-main-hover-color:var(--bl-color-secondary-hover)}:host([variant='success']){--bl-button-main-color:var(--bl-color-success);--bl-button-main-hover-color:var(--bl-color-success-hover)}:host([variant='danger']){--bl-button-main-color:var(--bl-color-danger);--bl-button-main-hover-color:var(--bl-color-danger-hover)}:host([disabled]){cursor:not-allowed;--bl-button-main-color:var(--bl-color-tertiary);--bl-button-main-hover-color:var(--bl-color-tertiary);--bl-button-content-color:var(--bl-color-content-passive);--bl-button-bg-color:var(--bl-button-main-color)}:host([disabled]) .button{pointer-events:none;text-decoration:none}:host([kind='text']){--bl-button-content-color:var(--bl-button-main-color);--bl-button-border-color:transparent;--bl-button-bg-color:transparent}:host([kind='text']) .button{text-decoration:underline}:host([kind='outline']){--bl-button-bg-color:transparent;--bl-button-content-color:var(--bl-button-main-color)}:host([kind='outline']:hover:not([disabled])){--bl-button-content-color:var(--bl-color-primary-background);--bl-button-bg-color:var(--bl-button-main-hover-color)}:host([kind='text']:hover:not([disabled])){--bl-button-content-color:var(--bl-button-main-hover-color)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } 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 style from './bl-button.css';\nimport '../icon/bl-icon';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'success' | 'danger';\nexport type ButtonKind = 'contained' | 'outline' | 'text';\nexport type ButtonSize = 'small' | 'medium' | 'large';\nexport type TargetType = '_blank' | '_parent' | '_self' | '_top';\n\n/**\n * @tag bl-button\n * @summary Baklava Button component\n *\n * @cssproperty --bl-button-display - Sets the display property of button. Default value is 'inline-block'.\n *\n */\n@customElement('bl-button')\nexport default class BlButton extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the button variant\n */\n @property({ type: String, reflect: true })\n variant: ButtonVariant = 'primary';\n\n /**\n * Sets the button kind\n */\n @property({ type: String, reflect: true })\n kind: ButtonKind = 'contained';\n\n /**\n * Sets the button size\n */\n @property({ type: String, reflect: true })\n size: ButtonSize = 'medium';\n\n /**\n * Sets the button label. Used for accessibility.\n */\n @property({ type: String })\n label: string;\n\n /**\n * Sets button as disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Set link url. If set, button will be rendered as anchor tag.\n */\n @property({ type: String })\n href?: string;\n\n /**\n * Sets the icon name. Shows icon with bl-icon component\n */\n @property({ type: String })\n icon?: string;\n\n /**\n * Sets the anchor target. Used when `href` is set.\n */\n @property({ type: String })\n target?: TargetType = '_self';\n\n /**\n * Fires when button clicked\n */\n @event('bl-click') private onClick: EventDispatcher<string>;\n\n get _hasIconSlot() {\n return this.querySelector(':scope > [slot=\"icon\"]') !== null;\n }\n\n get _hasDefaultSlot() {\n const childNodes = [...this.childNodes];\n return childNodes.some(node => {\n const nodeType = node.nodeType;\n // has only text node.\n if (nodeType === node.TEXT_NODE && node.textContent?.trim() !== '') {\n return true;\n }\n // has element node, it should not have slot attribute.\n if (nodeType === node.ELEMENT_NODE) {\n if (!(node as HTMLElement).hasAttribute('slot')) {\n return true;\n }\n }\n return false;\n });\n }\n\n render(): TemplateResult {\n const isAnchor = !!this.href;\n const icon = this.icon ? html`<bl-icon name=${this.icon}></bl-icon>` : '';\n const slots = html`<slot name=\"icon\">${icon}</slot> <span class=\"label\"><slot></slot></span>`;\n const classes = classMap({\n 'button': true,\n 'has-icon': this.icon || this._hasIconSlot,\n 'has-content': this._hasDefaultSlot,\n });\n\n return isAnchor\n ? html`<a\n class=${classes}\n aria-disabled=\"${ifDefined(this.disabled)}\"\n aria-label=\"${ifDefined(this.label)}\"\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n role=\"button\"\n >${slots}</a\n >`\n : html`<button\n class=${classes}\n aria-disabled=\"${ifDefined(this.disabled)}\"\n aria-label=\"${ifDefined(this.label)}\"\n ?disabled=${this.disabled}\n @click=\"${this._handleClick}\"\n >\n ${slots}\n </button>`;\n }\n\n private _handleClick() {\n this.onClick('Click event fired!');\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-button': BlButton;\n }\n}\n"],
|
|
5
|
+
"mappings": "oOACO,IAAMA,EAASC,+tGACfC,EAAQF,ECmBf,IAAqBG,EAArB,cAAsCC,CAAW,CAAjD,kCASE,aAAyB,UAMzB,UAAmB,YAMnB,UAAmB,SAYnB,cAAW,GAkBX,YAAsB,QAlDtB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAuDA,IAAI,cAAe,CACjB,OAAO,KAAK,cAAc,wBAAwB,IAAM,IAC1D,CAEA,IAAI,iBAAkB,CAEpB,MADmB,CAAC,GAAG,KAAK,UAAU,EACpB,KAAKC,GAAQ,CArFnC,IAAAC,EAsFM,IAAMC,EAAWF,EAAK,SAMtB,OAJIE,IAAaF,EAAK,aAAaC,EAAAD,EAAK,cAAL,YAAAC,EAAkB,UAAW,IAI5DC,IAAaF,EAAK,cAChB,CAAEA,EAAqB,aAAa,MAAM,CAKlD,CAAC,CACH,CAEA,QAAyB,CACvB,IAAMG,EAAW,CAAC,CAAC,KAAK,KAClBC,EAAO,KAAK,KAAOC,kBAAqB,KAAK,kBAAoB,GACjEC,EAAQD,sBAAyBD,oDACjCG,EAAUC,EAAS,CACvB,OAAU,GACV,WAAY,KAAK,MAAQ,KAAK,aAC9B,cAAe,KAAK,eACtB,CAAC,EAED,OAAOL,EACHE;AAAA,kBACUE;AAAA,2BACSE,EAAU,KAAK,QAAQ;AAAA,wBAC1BA,EAAU,KAAK,KAAK;AAAA,iBAC3BA,EAAU,KAAK,IAAI;AAAA,mBACjBA,EAAU,KAAK,MAAM;AAAA;AAAA,aAE3BH;AAAA,WAELD;AAAA,kBACUE;AAAA,2BACSE,EAAU,KAAK,QAAQ;AAAA,wBAC1BA,EAAU,KAAK,KAAK;AAAA,sBACtB,KAAK;AAAA,oBACP,KAAK;AAAA;AAAA,YAEbH;AAAA,kBAEV,CAEQ,cAAe,CACrB,KAAK,QAAQ,oBAAoB,CACnC,CACF,EAzGEI,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GARtBd,EASnB,uBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAdtBd,EAenB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GApBtBd,EAqBnB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GA1BPd,EA2BnB,qBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAhCvBd,EAiCnB,wBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAtCPd,EAuCnB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GA5CPd,EA6CnB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAlDPd,EAmDnB,sBAK2Ba,EAAA,CAA1BE,EAAM,UAAU,GAxDEf,EAwDQ,uBAxDRA,EAArBa,EAAA,CADCG,EAAc,WAAW,GACLhB",
|
|
6
|
+
"names": ["styles", "r", "bl_button_default", "BlButton", "s", "bl_button_default", "node", "_a", "nodeType", "isAnchor", "icon", "$", "slots", "classes", "o", "l", "__decorateClass", "e", "event", "n"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import{a as s}from"./chunk-23UFIOHV.js";import{a as l,b as r,e as a,f as n,g as o}from"./chunk-BEHH5JPC.js";import{a as e}from"./chunk-NZ3RGSR6.js";var v=l`:host{position:relative;display:flex;align-items:center;background-color:var(--bl-color-primary-background)}.container{--title-padding-vertical:var(--bl-size-m);--title-padding-horizontal:var(--bl-size-xl);--title-color:var(--bl-color-secondary);--caption-color:var(--bl-color-secondary);--icon-color:var(--bl-color-secondary);--border-bottom-width:var(--bl-size-4xs);--border-left-space:var(--bl-size-xl);--font-title:var(--bl-font-title-3-medium);--font-caption:var(--bl-font-title-4-regular);--tab-right-padding:var(--bl-size-xl);--help-container-width:var(--bl-size-2xl);--tab-height:calc(var(--bl-size-3xl) + var(--bl-size-s));display:flex;border:0;cursor:pointer;background-color:initial;width:max-content;height:var(--tab-height);padding:0 var(--tab-right-padding)}.container::after{position:absolute;content:'';right:0;top:var(--bl-size-m);height:calc(100% - var(--bl-size-2xl));border-right:1px solid var(--bl-color-tertiary-hover)}:host(:last-of-type) .container::after{border-right:0}:host .container::before{content:'';position:absolute;opacity:0;bottom:calc(-1 * var(--bl-size-4xs));left:var(--border-left-space);width:calc(100% - var(--bl-size-4xl));border-bottom:var(--border-bottom-width) solid var(--bl-color-primary)}:host([selected]:not([disabled])) .container::before{opacity:1}:host(:hover) .container,:host([selected]) .container{--title-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}:host([disabled]) .container{cursor:not-allowed;--title-color:var(--bl-color-content-passive);--caption-color:var(--bl-color-content-passive);--icon-color:var(--bl-color-content-passive)}:host(:hover) :where(.title,.icon){transition:color 120ms ease-out}:host([selected]) .border-bottom{display:inline-block}:host([disabled]) .container:hover{cursor:not-allowed}:host([help-text]) button{padding-right:0}.tab-button{width:max-content}.help-container{display:flex;justify-content:center;align-items:center;width:var(--help-container-width);height:100%;font-size:var(--bl-font-size-m);pointer-events:visible;padding-right:var(--tab-right-padding)}bl-tooltip{--bl-tooltip-position:fixed}.title{display:flex;align-items:center;justify-content:center;font:var(--font-title);color:var(--title-color);line-height:var(--bl-size-m);white-space:nowrap}.title-container{display:flex;align-items:center;justify-content:center;flex-direction:column;margin:auto}.badge-container{padding-left:var(--bl-size-3xs);display:flex;margin-bottom:1px}.caption{font:var(--font-caption);line-height:var(--bl-size-xs);color:var(--caption-color);text-align:center;margin-top:var(--bl-size-4xs)}.icon{display:flex;color:var(--icon-color);font-size:var(--bl-font-size-l);margin-right:var(--bl-size-3xs);margin-bottom:1px}:host([notify]) .title::after{content:'';height:var(--bl-size-2xs);width:var(--bl-size-2xs);border-radius:var(--bl-size-3xs);margin-left:var(--bl-size-3xs);background-color:var(--bl-color-danger);margin-bottom:1px}`,c=v;var t=class extends a{constructor(){super(...arguments);this.icon="";this.notify=!1;this.badge="";this.selected=!1;this.disabled=!1}static get styles(){return[c]}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{var i;this.tabGroup=this.closest("bl-tab-group"),(i=this.tabGroup)==null||i.registerTab(this)})}disconnectedCallback(){var i;super.disconnectedCallback(),(i=this.tabGroup)==null||i.unregisterTab(this)}select(){this._onSelect(this.name)}render(){let i=r` <slot></slot>`,b=this.helpText?r` <div class="help-container">
|
|
2
|
+
<bl-tooltip>
|
|
3
|
+
<bl-button
|
|
4
|
+
slot="tooltip-trigger"
|
|
5
|
+
icon="info"
|
|
6
|
+
variant="secondary"
|
|
7
|
+
kind="text"
|
|
8
|
+
label="${this.helpText}"
|
|
9
|
+
></bl-button>
|
|
10
|
+
${this.helpText}
|
|
11
|
+
</bl-tooltip>
|
|
12
|
+
</div>`:null,p=this.icon?r` <div class="icon">
|
|
13
|
+
<bl-icon name="${this.icon}"></bl-icon>
|
|
14
|
+
</div>`:null,d=this.badge?r` <div class="badge-container">
|
|
15
|
+
<bl-badge size="small">${this.badge}</bl-badge>
|
|
16
|
+
</div>`:null,h=this.caption?r` <div class="caption">${this.caption}</div>`:null;return r`
|
|
17
|
+
<button
|
|
18
|
+
?disabled="${this.disabled}"
|
|
19
|
+
role="tab"
|
|
20
|
+
class="container"
|
|
21
|
+
@click="${()=>this.select()}"
|
|
22
|
+
>
|
|
23
|
+
<div class="title-container">
|
|
24
|
+
<div class="title">${p} ${i} ${d}</div>
|
|
25
|
+
${h}
|
|
26
|
+
</div>
|
|
27
|
+
${b}
|
|
28
|
+
</button>
|
|
29
|
+
`}};e([o({type:String})],t.prototype,"caption",2),e([o({type:String,reflect:!0})],t.prototype,"name",2),e([o({type:String,attribute:"help-text",reflect:!0})],t.prototype,"helpText",2),e([o({type:String})],t.prototype,"icon",2),e([o({type:Boolean,reflect:!0})],t.prototype,"notify",2),e([o({type:String})],t.prototype,"badge",2),e([o({type:Boolean,reflect:!0})],t.prototype,"selected",2),e([o({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([s("bl-tab-selected")],t.prototype,"_onSelect",2),t=e([n("bl-tab")],t);export{t as a};
|
|
30
|
+
//# sourceMappingURL=chunk-LVWH2KEY.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/tab-group/tab/bl-tab.css", "../src/components/tab-group/tab/bl-tab.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{position:relative;display:flex;align-items:center;background-color:var(--bl-color-primary-background)}.container{--title-padding-vertical:var(--bl-size-m);--title-padding-horizontal:var(--bl-size-xl);--title-color:var(--bl-color-secondary);--caption-color:var(--bl-color-secondary);--icon-color:var(--bl-color-secondary);--border-bottom-width:var(--bl-size-4xs);--border-left-space:var(--bl-size-xl);--font-title:var(--bl-font-title-3-medium);--font-caption:var(--bl-font-title-4-regular);--tab-right-padding:var(--bl-size-xl);--help-container-width:var(--bl-size-2xl);--tab-height:calc(var(--bl-size-3xl) + var(--bl-size-s));display:flex;border:0;cursor:pointer;background-color:initial;width:max-content;height:var(--tab-height);padding:0 var(--tab-right-padding)}.container::after{position:absolute;content:'';right:0;top:var(--bl-size-m);height:calc(100% - var(--bl-size-2xl));border-right:1px solid var(--bl-color-tertiary-hover)}:host(:last-of-type) .container::after{border-right:0}:host .container::before{content:'';position:absolute;opacity:0;bottom:calc(-1 * var(--bl-size-4xs));left:var(--border-left-space);width:calc(100% - var(--bl-size-4xl));border-bottom:var(--border-bottom-width) solid var(--bl-color-primary)}:host([selected]:not([disabled])) .container::before{opacity:1}:host(:hover) .container,:host([selected]) .container{--title-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}:host([disabled]) .container{cursor:not-allowed;--title-color:var(--bl-color-content-passive);--caption-color:var(--bl-color-content-passive);--icon-color:var(--bl-color-content-passive)}:host(:hover) :where(.title,.icon){transition:color 120ms ease-out}:host([selected]) .border-bottom{display:inline-block}:host([disabled]) .container:hover{cursor:not-allowed}:host([help-text]) button{padding-right:0}.tab-button{width:max-content}.help-container{display:flex;justify-content:center;align-items:center;width:var(--help-container-width);height:100%;font-size:var(--bl-font-size-m);pointer-events:visible;padding-right:var(--tab-right-padding)}bl-tooltip{--bl-tooltip-position:fixed}.title{display:flex;align-items:center;justify-content:center;font:var(--font-title);color:var(--title-color);line-height:var(--bl-size-m);white-space:nowrap}.title-container{display:flex;align-items:center;justify-content:center;flex-direction:column;margin:auto}.badge-container{padding-left:var(--bl-size-3xs);display:flex;margin-bottom:1px}.caption{font:var(--font-caption);line-height:var(--bl-size-xs);color:var(--caption-color);text-align:center;margin-top:var(--bl-size-4xs)}.icon{display:flex;color:var(--icon-color);font-size:var(--bl-font-size-l);margin-right:var(--bl-size-3xs);margin-bottom:1px}:host([notify]) .title::after{content:'';height:var(--bl-size-2xs);width:var(--bl-size-2xs);border-radius:var(--bl-size-3xs);margin-left:var(--bl-size-3xs);background-color:var(--bl-color-danger);margin-bottom:1px}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../../utilities/event';\n\nimport style from './bl-tab.css';\nimport type BlTabGroup from '../bl-tab-group';\n\n/**\n * @tag bl-tab\n * @summary Baklava Tab component\n */\n@customElement('bl-tab')\nexport default class BlTab extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n private tabGroup: BlTabGroup | null;\n\n connectedCallback() {\n super.connectedCallback();\n\n this.updateComplete.then(() => {\n this.tabGroup = this.closest<BlTabGroup>('bl-tab-group');\n // FIXME: We need to warn if parent is not tab-group\n this.tabGroup?.registerTab(this);\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.tabGroup?.unregisterTab(this);\n }\n\n /**\n * Sets the caption of tab\n */\n @property({ type: String })\n caption: string;\n\n /**\n * Name of the tab that should match `tab-panel`'s `tab` attribute\n */\n @property({ type: String, reflect: true })\n name: string;\n\n /**\n * Set tooltip text. Should be set to display information icon.\n */\n @property({ type: String, attribute: 'help-text', reflect: true })\n helpText: string;\n\n /**\n * Name of the icon which display on the left side of the tab.\n */\n @property({ type: String })\n icon = '';\n\n /**\n * Shows notification dot.\n */\n @property({ type: Boolean, reflect: true })\n notify = false;\n\n /**\n * Sets the content of the badge.\n */\n @property({ type: String })\n badge = '';\n\n /**\n * Set `tab` as selected.\n */\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /**\n * Set `tab` as disabled.\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Fires when tab is selected.\n */\n @event('bl-tab-selected') private _onSelect: EventDispatcher<string>;\n\n /**\n * Set tab selected.\n */\n select() {\n this._onSelect(this.name);\n }\n\n render(): TemplateResult {\n const title = html` <slot></slot>`;\n\n const helpTooltip = this.helpText\n ? html` <div class=\"help-container\">\n <bl-tooltip>\n <bl-button\n slot=\"tooltip-trigger\"\n icon=\"info\"\n variant=\"secondary\"\n kind=\"text\"\n label=\"${this.helpText}\"\n ></bl-button>\n ${this.helpText}\n </bl-tooltip>\n </div>`\n : null;\n\n const icon = this.icon\n ? html` <div class=\"icon\">\n <bl-icon name=\"${this.icon}\"></bl-icon>\n </div>`\n : null;\n\n const badge = this.badge\n ? html` <div class=\"badge-container\">\n <bl-badge size=\"small\">${this.badge}</bl-badge>\n </div>`\n : null;\n\n const caption = this.caption ? html` <div class=\"caption\">${this.caption}</div>` : null;\n\n return html`\n <button\n ?disabled=\"${this.disabled}\"\n role=\"tab\"\n class=\"container\"\n @click=\"${() => this.select()}\"\n >\n <div class=\"title-container\">\n <div class=\"title\">${icon} ${title} ${badge}</div>\n ${caption}\n </div>\n ${helpTooltip}\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-tab': BlTab;\n }\n}\n"],
|
|
5
|
+
"mappings": "oJACO,IAAMA,EAASC,y3FACfC,EAAQF,ECUf,IAAqBG,EAArB,cAAmCC,CAAW,CAA9C,kCA4CE,UAAO,GAMP,YAAS,GAMT,WAAQ,GAMR,cAAW,GAMX,cAAW,GAnEX,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAIA,mBAAoB,CAClB,MAAM,kBAAkB,EAExB,KAAK,eAAe,KAAK,IAAM,CAtBnC,IAAAC,EAuBM,KAAK,SAAW,KAAK,QAAoB,cAAc,GAEvDA,EAAA,KAAK,WAAL,MAAAA,EAAe,YAAY,KAC7B,CAAC,CACH,CAEA,sBAAuB,CA7BzB,IAAAA,EA8BI,MAAM,qBAAqB,GAC3BA,EAAA,KAAK,WAAL,MAAAA,EAAe,cAAc,KAC/B,CA0DA,QAAS,CACP,KAAK,UAAU,KAAK,IAAI,CAC1B,CAEA,QAAyB,CACvB,IAAMC,EAAQC,kBAERC,EAAc,KAAK,SACrBD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAOe,KAAK;AAAA;AAAA,cAEd,KAAK;AAAA;AAAA,gBAGX,KAEEE,EAAO,KAAK,KACdF;AAAA,2BACmB,KAAK;AAAA,gBAExB,KAEEG,EAAQ,KAAK,MACfH;AAAA,mCAC2B,KAAK;AAAA,gBAEhC,KAEEI,EAAU,KAAK,QAAUJ,0BAA6B,KAAK,gBAAkB,KAEnF,OAAOA;AAAA;AAAA,qBAEU,KAAK;AAAA;AAAA;AAAA,kBAGR,IAAM,KAAK,OAAO;AAAA;AAAA;AAAA,+BAGLE,KAAQH,KAASI;AAAA,YACpCC;AAAA;AAAA,UAEFH;AAAA;AAAA,KAGR,CACF,EAvGEI,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAzBPX,EA0BnB,uBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GA/BtBX,EAgCnB,oBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,UAAW,YAAa,QAAS,EAAK,CAAC,GArC9CX,EAsCnB,wBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GA3CPX,EA4CnB,oBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAjDvBX,EAkDnB,sBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAvDPX,EAwDnB,qBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA7DvBX,EA8DnB,wBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAnEvBX,EAoEnB,wBAKkCU,EAAA,CAAjCE,EAAM,iBAAiB,GAzELZ,EAyEe,yBAzEfA,EAArBU,EAAA,CADC,EAAc,QAAQ,GACFV",
|
|
6
|
+
"names": ["styles", "r", "bl_tab_default", "BlTab", "s", "bl_tab_default", "_a", "title", "$", "helpTooltip", "icon", "badge", "caption", "__decorateClass", "e", "event"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as o,b as s,e as a,f as p,g as l}from"./chunk-BEHH5JPC.js";import{a as r}from"./chunk-NZ3RGSR6.js";var u=o`:host{display:none;border-radius:0 0 6px 6px}:host([visible]){display:block;padding:var(--bl-size-xl);background-color:var(--bl-color-primary-background)}`,i=u;var t=class extends a{constructor(){super(...arguments);this.visible=!1}static get styles(){return[i]}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{var e;this.tabGroup=this.closest("bl-tab-group"),(e=this.tabGroup)==null||e.registerTabPanel(this)})}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.tabGroup)==null||e.unregisterTabPanel(this)}render(){return s`<slot></slot>`}};r([l({type:String,reflect:!0})],t.prototype,"tab",2),r([l({type:Boolean,reflect:!0})],t.prototype,"visible",2),t=r([p("bl-tab-panel")],t);export{t as a};
|
|
2
|
+
//# sourceMappingURL=chunk-O4DFKSRZ.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/tab-group/tab-panel/bl-tab-panel.css", "../src/components/tab-group/tab-panel/bl-tab-panel.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:none;border-radius:0 0 6px 6px}:host([visible]){display:block;padding:var(--bl-size-xl);background-color:var(--bl-color-primary-background)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport styles from './bl-tab-panel.css';\nimport type BlTabGroup from '../bl-tab-group';\n\n/**\n * @tag bl-tab-panel\n * @summary Baklava Tab panel component\n */\n@customElement('bl-tab-panel')\nexport default class BlTabPanel extends LitElement {\n static get styles(): CSSResultGroup {\n return [styles];\n }\n\n private tabGroup: BlTabGroup | null;\n\n connectedCallback() {\n super.connectedCallback();\n\n this.updateComplete.then(() => {\n this.tabGroup = this.closest('bl-tab-group');\n // FIXME: We need to warn if parent is not tab-group\n this.tabGroup?.registerTabPanel(this);\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.tabGroup?.unregisterTabPanel(this);\n }\n\n /**\n * Name of the linked tab.\n */\n @property({ type: String, reflect: true })\n tab: string;\n\n /**\n * This attribute set by `tab-group` to make panel visible or hidden.\n */\n @property({ type: Boolean, reflect: true })\n visible = false;\n\n render(): TemplateResult {\n return html`<slot></slot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-tab-panel': BlTabPanel;\n }\n}\n"],
|
|
5
|
+
"mappings": "4GACO,IAAMA,EAASC,8JACfC,EAAQF,ECQf,IAAqBG,EAArB,cAAwCC,CAAW,CAAnD,kCAgCE,aAAU,GA/BV,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAM,CAChB,CAIA,mBAAoB,CAClB,MAAM,kBAAkB,EAExB,KAAK,eAAe,KAAK,IAAM,CApBnC,IAAAC,EAqBM,KAAK,SAAW,KAAK,QAAQ,cAAc,GAE3CA,EAAA,KAAK,WAAL,MAAAA,EAAe,iBAAiB,KAClC,CAAC,CACH,CAEA,sBAAuB,CA3BzB,IAAAA,EA4BI,MAAM,qBAAqB,GAC3BA,EAAA,KAAK,WAAL,MAAAA,EAAe,mBAAmB,KACpC,CAcA,QAAyB,CACvB,OAAOC,gBACT,CACF,EAXEC,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAzBtBN,EA0BnB,mBAMAK,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA/BvBN,EAgCnB,uBAhCmBA,EAArBK,EAAA,CADCE,EAAc,cAAc,GACRP",
|
|
6
|
+
"names": ["styles", "r", "bl_tab_panel_default", "BlTabPanel", "s", "bl_tab_panel_default", "_a", "$", "__decorateClass", "e", "n"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import{a as i,b as r,e as n,f as c}from"./chunk-BEHH5JPC.js";import{a as l}from"./chunk-NZ3RGSR6.js";var o=i`.tabs{background-color:var(--bl-color-primary-background);border-bottom:var(--bl-size-4xs) solid var(--bl-color-secondary-background);display:flex;flex-direction:row}.tabs-list{overflow-x:scroll;border-radius:6px 6px 0 0}.panels{border-radius:0 0 6px 6px}`,d=o;var s=class extends n{constructor(){super(...arguments);this._connectedTabs=[];this._connectedPanels=[]}static get styles(){return[d]}get tabs(){return this._connectedTabs}get panels(){return this._connectedPanels}registerTab(e){let t=this._connectedTabs.filter(a=>!a.disabled).length===0&&!e.disabled;this._connectedTabs.push(e),(!e.disabled&&e.selected||t)&&(this.selectedTabName=e.name)}unregisterTab(e){var t;this._connectedTabs.splice(this._connectedTabs.indexOf(e),1),e.selected&&((t=this._connectedTabs.find(a=>!a.disabled))==null||t.select())}registerTabPanel(e){e.visible=e.tab===this.selectedTabName,this._connectedPanels.push(e)}unregisterTabPanel(e){this._connectedTabs.splice(this._connectedPanels.indexOf(e),1)}get selectedTabName(){return this._selectedTabName}set selectedTabName(e){this._selectedTabName=e,this._connectedTabs.forEach(t=>{t.selected=e===t.name}),this._connectedPanels.forEach(t=>{t.visible=t.tab===this._selectedTabName})}_handleTabSelected(e){this.selectedTabName=e.detail}render(){return r` <div class="container" @bl-tab-selected="${this._handleTabSelected}">
|
|
2
|
+
<div role="tablist" class="tabs-list">
|
|
3
|
+
<div class="tabs">
|
|
4
|
+
<slot name="tabs"></slot>
|
|
5
|
+
</div>
|
|
6
|
+
</div>
|
|
7
|
+
<div role="tabpanel" class="panels">
|
|
8
|
+
<slot></slot>
|
|
9
|
+
</div>
|
|
10
|
+
</div>`}};s=l([c("bl-tab-group")],s);export{s as a};
|
|
11
|
+
//# sourceMappingURL=chunk-O5S6ERZ7.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/tab-group/bl-tab-group.css", "../src/components/tab-group/bl-tab-group.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.tabs{background-color:var(--bl-color-primary-background);border-bottom:var(--bl-size-4xs) solid var(--bl-color-secondary-background);display:flex;flex-direction:row}.tabs-list{overflow-x:scroll;border-radius:6px 6px 0 0}.panels{border-radius:0 0 6px 6px}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport style from './bl-tab-group.css';\nimport './tab-panel/bl-tab-panel';\nimport './tab/bl-tab';\nimport type BlTabPanel from './tab-panel/bl-tab-panel';\nimport type BlTab from './tab/bl-tab';\n\n/**\n * @tag bl-tab-group\n * @summary Baklava Tab group component\n */\n@customElement('bl-tab-group')\nexport default class BlTabGroup extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n private _connectedTabs: BlTab[] = [];\n private _connectedPanels: BlTabPanel[] = [];\n\n get tabs() {\n return this._connectedTabs;\n }\n\n get panels() {\n return this._connectedPanels;\n }\n\n /**\n * This method is used by `tab` component to register them self to the tab group.\n * @param tab BlTab reference to be registered\n */\n registerTab(tab: BlTab) {\n const isFirstAndNotDisabled =\n this._connectedTabs.filter(t => !t.disabled).length === 0 && !tab.disabled;\n this._connectedTabs.push(tab);\n if ((!tab.disabled && tab.selected) || isFirstAndNotDisabled) {\n this.selectedTabName = tab.name;\n }\n }\n\n /**\n * This method is used by `tab` component to unregister them self to the tab group.\n * @param tab BlTab reference to be unregistered\n */\n unregisterTab(tab: BlTab) {\n this._connectedTabs.splice(this._connectedTabs.indexOf(tab), 1);\n if (tab.selected) {\n this._connectedTabs.find(t => !t.disabled)?.select();\n }\n }\n\n /**\n * This method is used by `tab-panel` component to register them self to the tab group.\n * @param panel BlTabPanel reference to be registered\n */\n registerTabPanel(panel: BlTabPanel) {\n panel.visible = panel.tab === this.selectedTabName;\n this._connectedPanels.push(panel);\n }\n\n /**\n * This method is used by `tab-panel` component to unregister them self to the tab group.\n * @param panel BlTabPanel reference to be unregistered\n */\n unregisterTabPanel(panel: BlTabPanel) {\n this._connectedTabs.splice(this._connectedPanels.indexOf(panel), 1);\n }\n\n private _selectedTabName: string;\n\n get selectedTabName() {\n return this._selectedTabName;\n }\n\n set selectedTabName(name: string) {\n this._selectedTabName = name;\n this._connectedTabs.forEach(t => {\n t.selected = name === t.name;\n });\n this._connectedPanels.forEach(p => {\n p.visible = p.tab === this._selectedTabName;\n });\n }\n\n private _handleTabSelected(e: CustomEvent) {\n this.selectedTabName = e.detail;\n }\n\n render(): TemplateResult {\n return html` <div class=\"container\" @bl-tab-selected=\"${this._handleTabSelected}\">\n <div role=\"tablist\" class=\"tabs-list\">\n <div class=\"tabs\">\n <slot name=\"tabs\"></slot>\n </div>\n </div>\n <div role=\"tabpanel\" class=\"panels\">\n <slot></slot>\n </div>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-tab-group': BlTabGroup;\n }\n}\n"],
|
|
5
|
+
"mappings": "qGACO,IAAMA,EAASC,mQACfC,EAAQF,ECWf,IAAqBG,EAArB,cAAwCC,CAAW,CAAnD,kCAKE,KAAQ,eAA0B,CAAC,EACnC,KAAQ,iBAAiC,CAAC,EAL1C,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAKA,IAAI,MAAO,CACT,OAAO,KAAK,cACd,CAEA,IAAI,QAAS,CACX,OAAO,KAAK,gBACd,CAMA,YAAYC,EAAY,CACtB,IAAMC,EACJ,KAAK,eAAe,OAAOC,GAAK,CAACA,EAAE,QAAQ,EAAE,SAAW,GAAK,CAACF,EAAI,SACpE,KAAK,eAAe,KAAKA,CAAG,GACvB,CAACA,EAAI,UAAYA,EAAI,UAAaC,KACrC,KAAK,gBAAkBD,EAAI,KAE/B,CAMA,cAAcA,EAAY,CA9C5B,IAAAG,EA+CI,KAAK,eAAe,OAAO,KAAK,eAAe,QAAQH,CAAG,EAAG,CAAC,EAC1DA,EAAI,YACNG,EAAA,KAAK,eAAe,KAAKD,GAAK,CAACA,EAAE,QAAQ,IAAzC,MAAAC,EAA4C,SAEhD,CAMA,iBAAiBC,EAAmB,CAClCA,EAAM,QAAUA,EAAM,MAAQ,KAAK,gBACnC,KAAK,iBAAiB,KAAKA,CAAK,CAClC,CAMA,mBAAmBA,EAAmB,CACpC,KAAK,eAAe,OAAO,KAAK,iBAAiB,QAAQA,CAAK,EAAG,CAAC,CACpE,CAIA,IAAI,iBAAkB,CACpB,OAAO,KAAK,gBACd,CAEA,IAAI,gBAAgBC,EAAc,CAChC,KAAK,iBAAmBA,EACxB,KAAK,eAAe,QAAQ,GAAK,CAC/B,EAAE,SAAWA,IAAS,EAAE,IAC1B,CAAC,EACD,KAAK,iBAAiB,QAAQC,GAAK,CACjCA,EAAE,QAAUA,EAAE,MAAQ,KAAK,gBAC7B,CAAC,CACH,CAEQ,mBAAmB,EAAgB,CACzC,KAAK,gBAAkB,EAAE,MAC3B,CAEA,QAAyB,CACvB,OAAOC,8CAAiD,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAU/D,CACF,EAzFqBV,EAArBW,EAAA,CADCC,EAAc,cAAc,GACRZ",
|
|
6
|
+
"names": ["styles", "r", "bl_tab_group_default", "BlTabGroup", "s", "bl_tab_group_default", "tab", "isFirstAndNotDisabled", "t", "_a", "panel", "name", "p", "$", "__decorateClass", "n"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import{a as l}from"./chunk-SQ3STNEW.js";import{a as b}from"./chunk-HLQIZBQW.js";import{a as o}from"./chunk-23UFIOHV.js";import{a as n,b as a,e as s,f as d,g as r,h as p,i as c}from"./chunk-BEHH5JPC.js";import{a as i}from"./chunk-NZ3RGSR6.js";var m=n`:host{display:inline-block;width:200px;position:relative;--bl-input-padding-vertical:var(--bl-size-2xs);--bl-input-padding-horizontal:var(--bl-size-xs);--bl-input-border-color:var(--bl-color-border);--bl-input-icon-color:var(--bl-color-content-tertiary);--bl-input-text-color:var(--bl-color-content-primary);--bl-input-height:var(--bl-size-2xl)}input{outline:0;box-sizing:border-box;height:var(--bl-input-height);border:solid 1px var(--bl-input-border-color);width:100%;font:var(--bl-font-title-3-regular);padding:0 var(--bl-input-padding-horizontal);margin:0;border-radius:4px;color:var(--bl-input-text-color)}bl-icon{position:absolute;top:var(--bl-input-padding-vertical);right:var(--bl-input-padding-horizontal);font-size:var(--bl-size-m);z-index:1;color:var(--bl-input-icon-color)}input:focus{--bl-input-border-color:var(--bl-color-primary)}input:focus ~ bl-icon{--bl-input-icon-color:var(--bl-color-primary)}:host([label-fixed]) bl-icon{top:calc(var(--bl-input-padding-vertical) + var(--bl-size-m))}:host ::placeholder{color:var(--bl-color-content-tertiary)}:host([label]) ::placeholder{color:transparent;transition:color ease-out .4s}:host input:focus::placeholder,:host([label-fixed]) ::placeholder{color:var(--bl-color-content-tertiary)}input:disabled{background-color:var(--bl-color-primary-background);--bl-input-text-color:var(--bl-color-content-tertiary)}input.dirty:invalid{--bl-input-border-color:var(--bl-color-danger)}input.has-icon{padding-right:calc(var(--bl-size-xs) * 2 + var(--bl-size-m))}.error-icon,.invalid-text{display:none}label{position:absolute;top:var(--bl-input-padding-vertical);left:var(--bl-input-padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);color:var(--bl-color-content-tertiary);padding:0}:where(input:focus,input.has-value) ~ label{top:0;left:var(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-form-label);color:var(--bl-color-content-secondary);padding:0 var(--bl-size-3xs);background-color:var(--bl-color-primary-background);pointer-events:initial}:host([label-fixed]){padding-top:var(--bl-size-m)}:host([label-fixed]) label{top:0;left:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-form-label);color:var(--bl-color-content-secondary);padding:0}.dirty:invalid ~ label{color:var(--bl-color-danger)}.invalid-text,.help-text{font:var(--bl-font-title-4-regular);padding:var(--bl-size-3xs) var(--bl-input-padding-horizontal);margin:0}.invalid-text{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}.error-icon{color:var(--bl-color-danger)}.dirty:invalid ~ .invalid-text{display:block}.dirty:invalid ~ .help-text{display:none}.dirty:invalid ~ .error-icon{display:inline-block}.dirty:invalid ~ .custom-icon ~ .error-icon{display:none}.dirty:invalid ~ .custom-icon{--bl-input-icon-color:var(--bl-color-danger)}:host([size='large']){--bl-input-height:var(--bl-size-3xl);--bl-input-padding-vertical:var(--bl-size-xs);--bl-input-padding-horizontal:var(--bl-size-m)}`,h=m;var t=class extends s{constructor(){super(...arguments);this.type="text";this.required=!1;this.size="medium";this.disabled=!1;this.labelFixed=!1;this._dirty=!1}static get styles(){return[h]}reportValidity(){this._dirty=!0,this.input.checkValidity()}get dirty(){return this._dirty}get hasValue(){var e;return((e=this.input)==null?void 0:e.value.length)>0}get _invalidText(){var e;return this.customInvalidText||((e=this.input)==null?void 0:e.validationMessage)}get _invalidState(){var e;return this.input&&!((e=this.input)!=null&&e.validity.valid)}inputHandler(){var e;this.validity=(e=this.input)==null?void 0:e.validity,this.value=this.input.value,this.onInput(this.input.value)}changeHandler(){this._dirty=!0,this.onChange(this.input.value)}firstUpdated(){var e;this.validity=(e=this.input)==null?void 0:e.validity,this._invalidState&&this.requestUpdate()}render(){let e=this._invalidState?a`<p class="invalid-text">${this._invalidText}</p>`:"",v=this.helpText?a`<p class="help-text">${this.helpText}</p>`:"",u=this.icon?a` <bl-icon class="custom-icon" name="${this.icon}"></bl-icon>`:"",g=this.label?a`<label>${this.label}</label>`:"";return a`
|
|
2
|
+
<input
|
|
3
|
+
type=${this.type}
|
|
4
|
+
class=${b({dirty:this.dirty,"has-icon":this.icon||this.dirty&&this._invalidState,"has-value":this.hasValue})}
|
|
5
|
+
value=${l(this.value)}
|
|
6
|
+
placeholder="${l(this.placeholder)}"
|
|
7
|
+
minlength="${l(this.minlength)}"
|
|
8
|
+
maxlength="${l(this.maxlength)}"
|
|
9
|
+
min="${l(this.min)}"
|
|
10
|
+
max="${l(this.max)}"
|
|
11
|
+
?required=${this.required}
|
|
12
|
+
?disabled=${this.disabled}
|
|
13
|
+
@change=${this.changeHandler}
|
|
14
|
+
@input=${this.inputHandler}
|
|
15
|
+
/>
|
|
16
|
+
${g} ${u}
|
|
17
|
+
<bl-icon class="error-icon" name="alert"></bl-icon>
|
|
18
|
+
${e} ${v}
|
|
19
|
+
`}};i([c("input")],t.prototype,"input",2),i([r({})],t.prototype,"type",2),i([r({})],t.prototype,"label",2),i([r({})],t.prototype,"placeholder",2),i([r({})],t.prototype,"value",2),i([r({type:Boolean})],t.prototype,"required",2),i([r({type:Number})],t.prototype,"minlength",2),i([r({type:Number})],t.prototype,"maxlength",2),i([r({type:Number})],t.prototype,"min",2),i([r({type:Number})],t.prototype,"max",2),i([r({type:String})],t.prototype,"icon",2),i([r({type:String,reflect:!0})],t.prototype,"size",2),i([r({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([r({type:Boolean,attribute:"label-fixed"})],t.prototype,"labelFixed",2),i([r({type:String,attribute:"invalid-text"})],t.prototype,"customInvalidText",2),i([r({type:String,attribute:"help-text"})],t.prototype,"helpText",2),i([o("bl-change")],t.prototype,"onChange",2),i([o("bl-input")],t.prototype,"onInput",2),i([p()],t.prototype,"_dirty",2),t=i([d("bl-input")],t);export{t as a};
|
|
20
|
+
//# sourceMappingURL=chunk-W4OOR3LR.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/input/bl-input.css", "../src/components/input/bl-input.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;width:200px;position:relative;--bl-input-padding-vertical:var(--bl-size-2xs);--bl-input-padding-horizontal:var(--bl-size-xs);--bl-input-border-color:var(--bl-color-border);--bl-input-icon-color:var(--bl-color-content-tertiary);--bl-input-text-color:var(--bl-color-content-primary);--bl-input-height:var(--bl-size-2xl)}input{outline:0;box-sizing:border-box;height:var(--bl-input-height);border:solid 1px var(--bl-input-border-color);width:100%;font:var(--bl-font-title-3-regular);padding:0 var(--bl-input-padding-horizontal);margin:0;border-radius:4px;color:var(--bl-input-text-color)}bl-icon{position:absolute;top:var(--bl-input-padding-vertical);right:var(--bl-input-padding-horizontal);font-size:var(--bl-size-m);z-index:1;color:var(--bl-input-icon-color)}input:focus{--bl-input-border-color:var(--bl-color-primary)}input:focus ~ bl-icon{--bl-input-icon-color:var(--bl-color-primary)}:host([label-fixed]) bl-icon{top:calc(var(--bl-input-padding-vertical) + var(--bl-size-m))}:host ::placeholder{color:var(--bl-color-content-tertiary)}:host([label]) ::placeholder{color:transparent;transition:color ease-out .4s}:host input:focus::placeholder,:host([label-fixed]) ::placeholder{color:var(--bl-color-content-tertiary)}input:disabled{background-color:var(--bl-color-primary-background);--bl-input-text-color:var(--bl-color-content-tertiary)}input.dirty:invalid{--bl-input-border-color:var(--bl-color-danger)}input.has-icon{padding-right:calc(var(--bl-size-xs) * 2 + var(--bl-size-m))}.error-icon,.invalid-text{display:none}label{position:absolute;top:var(--bl-input-padding-vertical);left:var(--bl-input-padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);color:var(--bl-color-content-tertiary);padding:0}:where(input:focus,input.has-value) ~ label{top:0;left:var(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-form-label);color:var(--bl-color-content-secondary);padding:0 var(--bl-size-3xs);background-color:var(--bl-color-primary-background);pointer-events:initial}:host([label-fixed]){padding-top:var(--bl-size-m)}:host([label-fixed]) label{top:0;left:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-form-label);color:var(--bl-color-content-secondary);padding:0}.dirty:invalid ~ label{color:var(--bl-color-danger)}.invalid-text,.help-text{font:var(--bl-font-title-4-regular);padding:var(--bl-size-3xs) var(--bl-input-padding-horizontal);margin:0}.invalid-text{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}.error-icon{color:var(--bl-color-danger)}.dirty:invalid ~ .invalid-text{display:block}.dirty:invalid ~ .help-text{display:none}.dirty:invalid ~ .error-icon{display:inline-block}.dirty:invalid ~ .custom-icon ~ .error-icon{display:none}.dirty:invalid ~ .custom-icon{--bl-input-icon-color:var(--bl-color-danger)}:host([size='large']){--bl-input-height:var(--bl-size-3xl);--bl-input-padding-vertical:var(--bl-size-xs);--bl-input-padding-horizontal:var(--bl-size-m)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query, 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';\n\nimport style from './bl-input.css';\n\nexport type InputSize = 'medium' | 'large';\n/**\n * @tag bl-input\n * @summary Baklava Input component\n */\n@customElement('bl-input')\nexport default class BlInput extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n @query('input') private input: HTMLInputElement;\n\n /**\n * Type of the input. It's used to set `type` attribute of native input inside. Only `text` and `number` is supported for now.\n */\n @property({})\n type: 'text' | 'number' = 'text';\n\n /**\n * Sets label of the input\n */\n @property({})\n label?: string;\n\n /**\n * Sets placeholder of the input\n */\n @property({})\n placeholder?: string;\n\n /**\n * Sets initial value of the input\n */\n @property({})\n value?: string;\n\n /**\n * Makes input a mandatory field\n */\n @property({ type: Boolean })\n required = false;\n\n /**\n * Sets minimum length of the input\n */\n @property({ type: Number })\n minlength?: number;\n\n /**\n * Sets maximum length of the input\n */\n @property({ type: Number })\n maxlength?: number;\n\n /**\n * Sets the smallest number can be entered to a `number` input\n */\n @property({ type: Number })\n min?: number;\n\n /**\n * Sets the biggest number can be entered to a `number` input\n */\n @property({ type: Number })\n max?: number;\n\n /**\n * Sets the custom icon name. `bl-icon` component is used to show an icon\n */\n @property({ type: String })\n icon?: string;\n\n /**\n * Sets input size.\n */\n @property({ type: String, reflect: true })\n size?: InputSize = 'medium';\n\n /**\n * Disables the input\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Makes label as fixed positioned\n */\n @property({ type: Boolean, attribute: 'label-fixed' })\n labelFixed = false;\n\n /**\n * Set custom error message\n */\n @property({ type: String, attribute: 'invalid-text' })\n customInvalidText?: string;\n\n /**\n * Adds help text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText?: string;\n\n /**\n * Fires when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.\n */\n @event('bl-change') private onChange: EventDispatcher<string>;\n\n /**\n * Fires when the value of an input element has been changed.\n */\n @event('bl-input') private onInput: EventDispatcher<string>;\n\n /**\n * Current validity state of input\n */\n validity: ValidityState;\n\n /**\n * Runs input validation\n */\n reportValidity() {\n this._dirty = true;\n this.input.checkValidity();\n }\n\n @state() private _dirty = false;\n\n private get dirty(): boolean {\n return this._dirty;\n }\n\n private get hasValue(): boolean {\n return this.input?.value.length > 0;\n }\n\n private get _invalidText() {\n return this.customInvalidText || this.input?.validationMessage;\n }\n\n private get _invalidState() {\n return this.input && !this.input?.validity.valid;\n }\n\n private inputHandler() {\n this.validity = this.input?.validity;\n this.value = this.input.value;\n this.onInput(this.input.value);\n }\n\n private changeHandler() {\n this._dirty = true;\n this.onChange(this.input.value);\n }\n\n firstUpdated() {\n this.validity = this.input?.validity;\n if (this._invalidState) {\n this.requestUpdate();\n }\n }\n\n render(): TemplateResult {\n const invalidMessage = this._invalidState\n ? html`<p class=\"invalid-text\">${this._invalidText}</p>`\n : ``;\n const helpMessage = this.helpText ? html`<p class=\"help-text\">${this.helpText}</p>` : ``;\n const icon = this.icon\n ? html` <bl-icon class=\"custom-icon\" name=\"${this.icon}\"></bl-icon>`\n : '';\n const label = this.label ? html`<label>${this.label}</label>` : '';\n\n return html`\n <input\n type=${this.type}\n class=${classMap({\n 'dirty': this.dirty,\n 'has-icon': this.icon || (this.dirty && this._invalidState),\n 'has-value': this.hasValue,\n })}\n value=${ifDefined(this.value)}\n placeholder=\"${ifDefined(this.placeholder)}\"\n minlength=\"${ifDefined(this.minlength)}\"\n maxlength=\"${ifDefined(this.maxlength)}\"\n min=\"${ifDefined(this.min)}\"\n max=\"${ifDefined(this.max)}\"\n ?required=${this.required}\n ?disabled=${this.disabled}\n @change=${this.changeHandler}\n @input=${this.inputHandler}\n />\n ${label} ${icon}\n <bl-icon class=\"error-icon\" name=\"alert\"></bl-icon>\n ${invalidMessage} ${helpMessage}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-input': BlInput;\n }\n}\n"],
|
|
5
|
+
"mappings": "kPACO,IAAMA,EAASC,k9FACfC,EAAQF,ECaf,IAAqBG,EAArB,cAAqC,CAAW,CAAhD,kCAWE,UAA0B,OAwB1B,cAAW,GAoCX,UAAmB,SAMnB,cAAW,GAMX,gBAAa,GAqCJ,KAAQ,OAAS,GAvH1B,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAgHA,gBAAiB,CACf,KAAK,OAAS,GACd,KAAK,MAAM,cAAc,CAC3B,CAIA,IAAY,OAAiB,CAC3B,OAAO,KAAK,MACd,CAEA,IAAY,UAAoB,CA7IlC,IAAAC,EA8II,QAAOA,EAAA,KAAK,QAAL,YAAAA,EAAY,MAAM,QAAS,CACpC,CAEA,IAAY,cAAe,CAjJ7B,IAAAA,EAkJI,OAAO,KAAK,qBAAqBA,EAAA,KAAK,QAAL,YAAAA,EAAY,kBAC/C,CAEA,IAAY,eAAgB,CArJ9B,IAAAA,EAsJI,OAAO,KAAK,OAAS,GAACA,EAAA,KAAK,QAAL,MAAAA,EAAY,SAAS,MAC7C,CAEQ,cAAe,CAzJzB,IAAAA,EA0JI,KAAK,UAAWA,EAAA,KAAK,QAAL,YAAAA,EAAY,SAC5B,KAAK,MAAQ,KAAK,MAAM,MACxB,KAAK,QAAQ,KAAK,MAAM,KAAK,CAC/B,CAEQ,eAAgB,CACtB,KAAK,OAAS,GACd,KAAK,SAAS,KAAK,MAAM,KAAK,CAChC,CAEA,cAAe,CApKjB,IAAAA,EAqKI,KAAK,UAAWA,EAAA,KAAK,QAAL,YAAAA,EAAY,SACxB,KAAK,eACP,KAAK,cAAc,CAEvB,CAEA,QAAyB,CACvB,IAAMC,EAAiB,KAAK,cACxBC,4BAA+B,KAAK,mBACpC,GACEC,EAAc,KAAK,SAAWD,yBAA4B,KAAK,eAAiB,GAChFE,EAAO,KAAK,KACdF,wCAA2C,KAAK,mBAChD,GACEG,EAAQ,KAAK,MAAQH,WAAc,KAAK,gBAAkB,GAEhE,OAAOA;AAAA;AAAA,eAEI,KAAK;AAAA,gBACJI,EAAS,CACf,MAAS,KAAK,MACd,WAAY,KAAK,MAAS,KAAK,OAAS,KAAK,cAC7C,YAAa,KAAK,QACpB,CAAC;AAAA,gBACO,EAAU,KAAK,KAAK;AAAA,uBACb,EAAU,KAAK,WAAW;AAAA,qBAC5B,EAAU,KAAK,SAAS;AAAA,qBACxB,EAAU,KAAK,SAAS;AAAA,eAC9B,EAAU,KAAK,GAAG;AAAA,eAClB,EAAU,KAAK,GAAG;AAAA,oBACb,KAAK;AAAA,oBACL,KAAK;AAAA,kBACP,KAAK;AAAA,iBACN,KAAK;AAAA;AAAA,QAEdD,KAASD;AAAA;AAAA,QAETH,KAAkBE;AAAA,KAExB,CACF,EAzL0BI,EAAA,CAAvBC,EAAM,OAAO,GALKV,EAKK,qBAMxBS,EAAA,CADCE,EAAS,CAAC,CAAC,GAVOX,EAWnB,oBAMAS,EAAA,CADCE,EAAS,CAAC,CAAC,GAhBOX,EAiBnB,qBAMAS,EAAA,CADCE,EAAS,CAAC,CAAC,GAtBOX,EAuBnB,2BAMAS,EAAA,CADCE,EAAS,CAAC,CAAC,GA5BOX,EA6BnB,qBAMAS,EAAA,CADCE,EAAS,CAAE,KAAM,OAAQ,CAAC,GAlCRX,EAmCnB,wBAMAS,EAAA,CADCE,EAAS,CAAE,KAAM,MAAO,CAAC,GAxCPX,EAyCnB,yBAMAS,EAAA,CADCE,EAAS,CAAE,KAAM,MAAO,CAAC,GA9CPX,EA+CnB,yBAMAS,EAAA,CADCE,EAAS,CAAE,KAAM,MAAO,CAAC,GApDPX,EAqDnB,mBAMAS,EAAA,CADCE,EAAS,CAAE,KAAM,MAAO,CAAC,GA1DPX,EA2DnB,mBAMAS,EAAA,CADCE,EAAS,CAAE,KAAM,MAAO,CAAC,GAhEPX,EAiEnB,oBAMAS,EAAA,CADCE,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAtEtBX,EAuEnB,oBAMAS,EAAA,CADCE,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA5EvBX,EA6EnB,wBAMAS,EAAA,CADCE,EAAS,CAAE,KAAM,QAAS,UAAW,aAAc,CAAC,GAlFlCX,EAmFnB,0BAMAS,EAAA,CADCE,EAAS,CAAE,KAAM,OAAQ,UAAW,cAAe,CAAC,GAxFlCX,EAyFnB,iCAMAS,EAAA,CADCE,EAAS,CAAE,KAAM,OAAQ,UAAW,WAAY,CAAC,GA9F/BX,EA+FnB,wBAK4BS,EAAA,CAA3BG,EAAM,WAAW,GApGCZ,EAoGS,wBAKDS,EAAA,CAA1BG,EAAM,UAAU,GAzGEZ,EAyGQ,uBAeVS,EAAA,CAAhBI,EAAM,GAxHYb,EAwHF,sBAxHEA,EAArBS,EAAA,CADCK,EAAc,UAAU,GACJd",
|
|
6
|
+
"names": ["styles", "r", "bl_input_default", "BlInput", "bl_input_default", "_a", "invalidMessage", "$", "helpMessage", "icon", "label", "o", "__decorateClass", "i", "e", "event", "t", "n"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import{a as o,b as i,e as a,f as l,g as r}from"./chunk-BEHH5JPC.js";import{a as t}from"./chunk-NZ3RGSR6.js";var c=o`:host{display:inline-block;max-width:100%}.badge{--bg-color:var(--bl-badge-bg-color,var(--bl-color-accent-primary-background));--color:var(--bl-badge-color,var(--bl-color-primary));--font:var(--bl-font-title-4-medium);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-3xs);--margin-icon:var(--bl-size-3xs);--icon-size:var(--bl-size-s);--height:var(--bl-size-xl);display:flex;gap:var(--margin-icon);justify-content:center;align-items:center;box-sizing:border-box;width:100%;border:0;border-radius:var(--bl-size-4xs);margin:0;padding:var(--padding-vertical) var(--padding-horizontal);background-color:var(--bg-color);color:var(--color,white);font:var(--font);font-kerning:none;height:var(--height)}:host([size='small']) .badge{--font:var(--bl-font-caption-small-text);--height:var(--bl-size-m)}:host([size='large']) .badge{--font:var(--bl-font-title-3-medium);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-2xs);--height:var(--bl-size-2xl);--icon-size:var(--bl-size-m)}:host ::slotted(bl-icon){font-size:var(--icon-size)}:host([size='small']) bl-icon{display:none}`,n=c;var e=class extends a{constructor(){super(...arguments);this.size="medium"}static get styles(){return[n]}render(){let s=this.icon?i`<bl-icon name=${this.icon}></bl-icon>`:"";return i`<span class="badge">
|
|
2
|
+
<slot name="icon">${s}</slot>
|
|
3
|
+
<slot></slot>
|
|
4
|
+
</span>`}};t([r({type:String,reflect:!0})],e.prototype,"size",2),t([r({type:String})],e.prototype,"icon",2),e=t([l("bl-badge")],e);export{e as a};
|
|
5
|
+
//# sourceMappingURL=chunk-WATPLV54.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/badge/bl-badge.css", "../src/components/badge/bl-badge.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;max-width:100%}.badge{--bg-color:var(--bl-badge-bg-color,var(--bl-color-accent-primary-background));--color:var(--bl-badge-color,var(--bl-color-primary));--font:var(--bl-font-title-4-medium);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-3xs);--margin-icon:var(--bl-size-3xs);--icon-size:var(--bl-size-s);--height:var(--bl-size-xl);display:flex;gap:var(--margin-icon);justify-content:center;align-items:center;box-sizing:border-box;width:100%;border:0;border-radius:var(--bl-size-4xs);margin:0;padding:var(--padding-vertical) var(--padding-horizontal);background-color:var(--bg-color);color:var(--color,white);font:var(--font);font-kerning:none;height:var(--height)}:host([size='small']) .badge{--font:var(--bl-font-caption-small-text);--height:var(--bl-size-m)}:host([size='large']) .badge{--font:var(--bl-font-title-3-medium);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-2xs);--height:var(--bl-size-2xl);--icon-size:var(--bl-size-m)}:host ::slotted(bl-icon){font-size:var(--icon-size)}:host([size='small']) bl-icon{display:none}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport style from './bl-badge.css';\nimport '../icon/bl-icon';\n\nexport type BadgeSize = 'small' | 'medium' | 'large';\n\n/**\n * @tag bl-badge\n * @summary Baklava Badge component\n *\n * @cssproperty --bl-badge-bg-color - Sets the background color of badge. Default value is `--bl-color-accent-primary-background`\n * @cssproperty --bl-badge-color - Sets the color of badge. Default value is `--bl-color-primary`\n */\n\n@customElement('bl-badge')\nexport default class BlBadge extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the badge size\n */\n @property({ type: String, reflect: true })\n size: BadgeSize = 'medium';\n\n /**\n * Sets the name of the icon\n */\n @property({ type: String })\n icon?: string;\n\n render(): TemplateResult {\n const icon = this.icon ? html`<bl-icon name=${this.icon}></bl-icon>` : '';\n\n return html`<span class=\"badge\">\n <slot name=\"icon\">${icon}</slot>\n <slot></slot>\n </span>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-badge': BlBadge;\n }\n}\n"],
|
|
5
|
+
"mappings": "4GACO,IAAMA,EAASC,2lCACfC,EAAQF,ECcf,IAAqBG,EAArB,cAAqCC,CAAW,CAAhD,kCASE,UAAkB,SARlB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAcA,QAAyB,CACvB,IAAMC,EAAO,KAAK,KAAOC,kBAAqB,KAAK,kBAAoB,GAEvE,OAAOA;AAAA,0BACeD;AAAA;AAAA,YAGxB,CACF,EAhBEE,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GARtBN,EASnB,oBAMAK,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAdPN,EAenB,oBAfmBA,EAArBK,EAAA,CADCE,EAAc,UAAU,GACJP",
|
|
6
|
+
"names": ["styles", "r", "bl_badge_default", "BlBadge", "s", "bl_badge_default", "icon", "$", "__decorateClass", "e", "n"]
|
|
7
|
+
}
|
|
@@ -1,50 +1,4 @@
|
|
|
1
|
-
import{a as ut}from"./chunk-HLQIZBQW.js";import{a as U}from"./chunk-23UFIOHV.js";import{a as it,b as lt,e as st,f as at,g as ct,h as ft,i as X}from"./chunk-BEHH5JPC.js";import{a as L}from"./chunk-NZ3RGSR6.js";function M(t){return t.split("-")[0]}function j(t){return t.split("-")[1]}function V(t){return["top","bottom"].includes(M(t))?"x":"y"}function K(t){return t==="y"?"height":"width"}function dt(t,e,o){let{reference:r,floating:l}=t,i=r.x+r.width/2-l.width/2,s=r.y+r.height/2-l.height/2,n=V(e),a=K(n),u=r[a]/2-l[a]/2,f=n==="x",c;switch(M(e)){case"top":c={x:i,y:r.y-l.height};break;case"bottom":c={x:i,y:r.y+r.height};break;case"right":c={x:r.x+r.width,y:s};break;case"left":c={x:r.x-l.width,y:s};break;default:c={x:r.x,y:r.y}}switch(j(e)){case"start":c[n]-=u*(o&&f?-1:1);break;case"end":c[n]+=u*(o&&f?-1:1)}return c}var ht=async(t,e,o)=>{let{placement:r="bottom",strategy:l="absolute",middleware:i=[],platform:s}=o,n=await(s.isRTL==null?void 0:s.isRTL(e)),a=await s.getElementRects({reference:t,floating:e,strategy:l}),{x:u,y:f}=dt(a,r,n),c=r,p={},d=0;for(let h=0;h<i.length;h++){let{name:m,fn:g}=i[h],{x:w,y:x,data:b,reset:y}=await g({x:u,y:f,initialPlacement:r,placement:c,strategy:l,middlewareData:p,rects:a,platform:s,elements:{reference:t,floating:e}});u=w!=null?w:u,f=x!=null?x:f,p={...p,[m]:{...p[m],...b}},y&&d<=50&&(d++,typeof y=="object"&&(y.placement&&(c=y.placement),y.rects&&(a=y.rects===!0?await s.getElementRects({reference:t,floating:e,strategy:l}):y.rects),{x:u,y:f}=dt(a,c,n)),h=-1)}return{x:u,y:f,placement:c,strategy:l,middlewareData:p}};function mt(t){return typeof t!="number"?function(e){return{top:0,right:0,bottom:0,left:0,...e}}(t):{top:t,right:t,bottom:t,left:t}}function z(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}async function Q(t,e){var o;e===void 0&&(e={});let{x:r,y:l,platform:i,rects:s,elements:n,strategy:a}=t,{boundary:u="clippingAncestors",rootBoundary:f="viewport",elementContext:c="floating",altBoundary:p=!1,padding:d=0}=e,h=mt(d),m=n[p?c==="floating"?"reference":"floating":c],g=z(await i.getClippingRect({element:(o=await(i.isElement==null?void 0:i.isElement(m)))==null||o?m:m.contextElement||await(i.getDocumentElement==null?void 0:i.getDocumentElement(n.floating)),boundary:u,rootBoundary:f,strategy:a})),w=z(i.convertOffsetParentRelativeRectToViewportRelativeRect?await i.convertOffsetParentRelativeRectToViewportRelativeRect({rect:c==="floating"?{...s.floating,x:r,y:l}:s.reference,offsetParent:await(i.getOffsetParent==null?void 0:i.getOffsetParent(n.floating)),strategy:a}):s[c]);return{top:g.top-w.top+h.top,bottom:w.bottom-g.bottom+h.bottom,left:g.left-w.left+h.left,right:w.right-g.right+h.right}}var Ot=Math.min,St=Math.max;function J(t,e,o){return St(t,Ot(e,o))}var Z=t=>({name:"arrow",options:t,async fn(e){let{element:o,padding:r=0}=t!=null?t:{},{x:l,y:i,placement:s,rects:n,platform:a}=e;if(o==null)return{};let u=mt(r),f={x:l,y:i},c=V(s),p=j(s),d=K(c),h=await a.getDimensions(o),m=c==="y"?"top":"left",g=c==="y"?"bottom":"right",w=n.reference[d]+n.reference[c]-f[c]-n.floating[d],x=f[c]-n.reference[c],b=await(a.getOffsetParent==null?void 0:a.getOffsetParent(o)),y=b?c==="y"?b.clientHeight||0:b.clientWidth||0:0;y===0&&(y=n.floating[d]);let F=w/2-x/2,D=u[m],k=y-h[d]-u[g],v=y/2-h[d]/2+F,P=J(D,v,k),O=(p==="start"?u[m]:u[g])>0&&v!==P&&n.reference[d]<=n.floating[d];return{[c]:f[c]-(O?v<D?D-v:k-v:0),data:{[c]:P,centerOffset:v-P}}}}),kt={left:"right",right:"left",bottom:"top",top:"bottom"};function Y(t){return t.replace(/left|right|bottom|top/g,e=>kt[e])}function Wt(t,e,o){o===void 0&&(o=!1);let r=j(t),l=V(t),i=K(l),s=l==="x"?r===(o?"end":"start")?"right":"left":r==="start"?"bottom":"top";return e.reference[i]>e.floating[i]&&(s=Y(s)),{main:s,cross:Y(s)}}var zt={start:"end",end:"start"};function pt(t){return t.replace(/start|end/g,e=>zt[e])}var Mt=["top","right","bottom","left"],Yt=Mt.reduce((t,e)=>t.concat(e,e+"-start",e+"-end"),[]);var B=function(t){return t===void 0&&(t={}),{name:"flip",options:t,async fn(e){var o;let{placement:r,middlewareData:l,rects:i,initialPlacement:s,platform:n,elements:a}=e,{mainAxis:u=!0,crossAxis:f=!0,fallbackPlacements:c,fallbackStrategy:p="bestFit",flipAlignment:d=!0,...h}=t,m=M(r),g=c||(m===s||!d?[Y(s)]:function(v){let P=Y(v);return[pt(v),P,pt(P)]}(s)),w=[s,...g],x=await Q(e,h),b=[],y=((o=l.flip)==null?void 0:o.overflows)||[];if(u&&b.push(x[m]),f){let{main:v,cross:P}=Wt(r,i,await(n.isRTL==null?void 0:n.isRTL(a.floating)));b.push(x[v],x[P])}if(y=[...y,{placement:r,overflows:b}],!b.every(v=>v<=0)){var F,D;let v=((F=(D=l.flip)==null?void 0:D.index)!=null?F:0)+1,P=w[v];if(P)return{data:{index:v,overflows:y},reset:{placement:P}};let O="bottom";switch(p){case"bestFit":{var k;let rt=(k=y.map(_=>[_,_.overflows.filter(W=>W>0).reduce((W,Dt)=>W+Dt,0)]).sort((_,W)=>_[1]-W[1])[0])==null?void 0:k[0].placement;rt&&(O=rt);break}case"initialPlacement":O=s}if(r!==O)return{reset:{placement:O}}}return{}}}};var tt=function(t){return t===void 0&&(t=0),{name:"offset",options:t,async fn(e){let{x:o,y:r}=e,l=await async function(i,s){let{placement:n,platform:a,elements:u}=i,f=await(a.isRTL==null?void 0:a.isRTL(u.floating)),c=M(n),p=j(n),d=V(n)==="x",h=["left","top"].includes(c)?-1:1,m=f&&d?-1:1,g=typeof s=="function"?s(i):s,{mainAxis:w,crossAxis:x,alignmentAxis:b}=typeof g=="number"?{mainAxis:g,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...g};return p&&typeof b=="number"&&(x=p==="end"?-1*b:b),d?{x:x*m,y:w*h}:{x:w*h,y:x*m}}(e,t);return{x:o+l.x,y:r+l.y,data:l}}}};function Vt(t){return t==="x"?"y":"x"}var et=function(t){return t===void 0&&(t={}),{name:"shift",options:t,async fn(e){let{x:o,y:r,placement:l}=e,{mainAxis:i=!0,crossAxis:s=!1,limiter:n={fn:g=>{let{x:w,y:x}=g;return{x:w,y:x}}},...a}=t,u={x:o,y:r},f=await Q(e,a),c=V(M(l)),p=Vt(c),d=u[c],h=u[p];if(i){let g=c==="y"?"bottom":"right";d=J(d+f[c==="y"?"top":"left"],d,d-f[g])}if(s){let g=p==="y"?"bottom":"right";h=J(h+f[p==="y"?"top":"left"],h,h-f[g])}let m=n.fn({...e,[c]:d,[p]:h});return{...m,data:{x:m.x-o,y:m.y-r}}}}};function bt(t){return t&&t.document&&t.location&&t.alert&&t.setInterval}function E(t){if(t==null)return window;if(!bt(t)){let e=t.ownerDocument;return e&&e.defaultView||window}return t}function $(t){return E(t).getComputedStyle(t)}function T(t){return bt(t)?"":t?(t.nodeName||"").toLowerCase():""}function Rt(){let t=navigator.userAgentData;return t!=null&&t.brands?t.brands.map(e=>e.brand+"/"+e.version).join(" "):navigator.userAgent}function A(t){return t instanceof E(t).HTMLElement}function S(t){return t instanceof E(t).Element}function ot(t){return typeof ShadowRoot>"u"?!1:t instanceof E(t).ShadowRoot||t instanceof ShadowRoot}function G(t){let{overflow:e,overflowX:o,overflowY:r}=$(t);return/auto|scroll|overlay|hidden/.test(e+r+o)}function Nt(t){return["table","td","th"].includes(T(t))}function gt(t){let e=/firefox/i.test(Rt()),o=$(t);return o.transform!=="none"||o.perspective!=="none"||o.contain==="paint"||["transform","perspective"].includes(o.willChange)||e&&o.willChange==="filter"||e&&!!o.filter&&o.filter!=="none"}function Pt(){return!/^((?!chrome|android).)*safari/i.test(Rt())}var yt=Math.min,N=Math.max,q=Math.round;function C(t,e,o){var r,l,i,s;e===void 0&&(e=!1),o===void 0&&(o=!1);let n=t.getBoundingClientRect(),a=1,u=1;e&&A(t)&&(a=t.offsetWidth>0&&q(n.width)/t.offsetWidth||1,u=t.offsetHeight>0&&q(n.height)/t.offsetHeight||1);let f=S(t)?E(t):window,c=!Pt()&&o,p=(n.left+(c&&(r=(l=f.visualViewport)==null?void 0:l.offsetLeft)!=null?r:0))/a,d=(n.top+(c&&(i=(s=f.visualViewport)==null?void 0:s.offsetTop)!=null?i:0))/u,h=n.width/a,m=n.height/u;return{width:h,height:m,top:d,right:p+h,bottom:d+m,left:p,x:p,y:d}}function H(t){return(e=t,(e instanceof E(e).Node?t.ownerDocument:t.document)||window.document).documentElement;var e}function I(t){return S(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function At(t){return C(H(t)).left+I(t).scrollLeft}function $t(t,e,o){let r=A(e),l=H(e),i=C(t,r&&function(a){let u=C(a);return q(u.width)!==a.offsetWidth||q(u.height)!==a.offsetHeight}(e),o==="fixed"),s={scrollLeft:0,scrollTop:0},n={x:0,y:0};if(r||!r&&o!=="fixed")if((T(e)!=="body"||G(l))&&(s=I(e)),A(e)){let a=C(e,!0);n.x=a.x+e.clientLeft,n.y=a.y+e.clientTop}else l&&(n.x=At(l));return{x:i.left+s.scrollLeft-n.x,y:i.top+s.scrollTop-n.y,width:i.width,height:i.height}}function Lt(t){return T(t)==="html"?t:t.assignedSlot||t.parentNode||(ot(t)?t.host:null)||H(t)}function wt(t){return A(t)&&getComputedStyle(t).position!=="fixed"?t.offsetParent:null}function nt(t){let e=E(t),o=wt(t);for(;o&&Nt(o)&&getComputedStyle(o).position==="static";)o=wt(o);return o&&(T(o)==="html"||T(o)==="body"&&getComputedStyle(o).position==="static"&&!gt(o))?e:o||function(r){let l=Lt(r);for(ot(l)&&(l=l.host);A(l)&&!["html","body"].includes(T(l));){if(gt(l))return l;l=l.parentNode}return null}(t)||e}function vt(t){if(A(t))return{width:t.offsetWidth,height:t.offsetHeight};let e=C(t);return{width:e.width,height:e.height}}function Tt(t){let e=Lt(t);return["html","body","#document"].includes(T(e))?t.ownerDocument.body:A(e)&&G(e)?e:Tt(e)}function Et(t,e){var o;e===void 0&&(e=[]);let r=Tt(t),l=r===((o=t.ownerDocument)==null?void 0:o.body),i=E(r),s=l?[i].concat(i.visualViewport||[],G(r)?r:[]):r,n=e.concat(s);return l?n:n.concat(Et(s))}function xt(t,e,o){return e==="viewport"?z(function(r,l){let i=E(r),s=H(r),n=i.visualViewport,a=s.clientWidth,u=s.clientHeight,f=0,c=0;if(n){a=n.width,u=n.height;let p=Pt();(p||!p&&l==="fixed")&&(f=n.offsetLeft,c=n.offsetTop)}return{width:a,height:u,x:f,y:c}}(t,o)):S(e)?function(r,l){let i=C(r,!1,l==="fixed"),s=i.top+r.clientTop,n=i.left+r.clientLeft;return{top:s,left:n,x:n,y:s,right:n+r.clientWidth,bottom:s+r.clientHeight,width:r.clientWidth,height:r.clientHeight}}(e,o):z(function(r){var l;let i=H(r),s=I(r),n=(l=r.ownerDocument)==null?void 0:l.body,a=N(i.scrollWidth,i.clientWidth,n?n.scrollWidth:0,n?n.clientWidth:0),u=N(i.scrollHeight,i.clientHeight,n?n.scrollHeight:0,n?n.clientHeight:0),f=-s.scrollLeft+At(r),c=-s.scrollTop;return $(n||i).direction==="rtl"&&(f+=N(i.clientWidth,n?n.clientWidth:0)-a),{width:a,height:u,x:f,y:c}}(H(t)))}function Ft(t){let e=Et(t),o=["absolute","fixed"].includes($(t).position)&&A(t)?nt(t):t;return S(o)?e.filter(r=>S(r)&&function(l,i){let s=i.getRootNode==null?void 0:i.getRootNode();if(l.contains(i))return!0;if(s&&ot(s)){let n=i;do{if(n&&l===n)return!0;n=n.parentNode||n.host}while(n)}return!1}(r,o)&&T(r)!=="body"):[]}var _t={getClippingRect:function(t){let{element:e,boundary:o,rootBoundary:r,strategy:l}=t,i=[...o==="clippingAncestors"?Ft(e):[].concat(o),r],s=i[0],n=i.reduce((a,u)=>{let f=xt(e,u,l);return a.top=N(f.top,a.top),a.right=yt(f.right,a.right),a.bottom=yt(f.bottom,a.bottom),a.left=N(f.left,a.left),a},xt(e,s,l));return{width:n.right-n.left,height:n.bottom-n.top,x:n.left,y:n.top}},convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{rect:e,offsetParent:o,strategy:r}=t,l=A(o),i=H(o);if(o===i)return e;let s={scrollLeft:0,scrollTop:0},n={x:0,y:0};if((l||!l&&r!=="fixed")&&((T(o)!=="body"||G(i))&&(s=I(o)),A(o))){let a=C(o,!0);n.x=a.x+o.clientLeft,n.y=a.y+o.clientTop}return{...e,x:e.x-s.scrollLeft+n.x,y:e.y-s.scrollTop+n.y}},isElement:S,getDimensions:vt,getOffsetParent:nt,getDocumentElement:H,getElementRects:t=>{let{reference:e,floating:o,strategy:r}=t;return{reference:$t(e,nt(o),r),floating:{...vt(o),x:0,y:0}}},getClientRects:t=>Array.from(t.getClientRects()),isRTL:t=>$(t).direction==="rtl"};var Ht=(t,e,o)=>ht(t,e,{platform:_t,...o});var Xt=it`.trigger {
|
|
2
|
-
display: inline-block;
|
|
3
|
-
cursor: pointer;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.tooltip {
|
|
7
|
-
--left: 0;
|
|
8
|
-
--top: 0;
|
|
9
|
-
--visibility: hidden;
|
|
10
|
-
|
|
11
|
-
position: fixed;
|
|
12
|
-
box-sizing: border-box;
|
|
13
|
-
border: none;
|
|
14
|
-
background-color: var(--bl-color-secondary);
|
|
15
|
-
color: var(--bl-color-primary-background);
|
|
16
|
-
border-radius: var(--bl-size-3xs);
|
|
17
|
-
pointer-events: none;
|
|
18
|
-
font: var(--bl-font-title-3-regular);
|
|
19
|
-
padding: var(--bl-size-m);
|
|
20
|
-
left: var(--left);
|
|
21
|
-
top: var(--top);
|
|
22
|
-
visibility: var(--visibility);
|
|
23
|
-
z-index: 999;
|
|
24
|
-
max-width: 424px;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.arrow {
|
|
28
|
-
--arrow-top: 0;
|
|
29
|
-
--arrow-bottom: 0;
|
|
30
|
-
--arrow-right: 0;
|
|
31
|
-
--arrow-left: 0;
|
|
32
|
-
|
|
33
|
-
position: absolute;
|
|
34
|
-
background-color: var(--bl-color-secondary);
|
|
35
|
-
width: var(--bl-size-2xs);
|
|
36
|
-
height: var(--bl-size-2xs);
|
|
37
|
-
transform: rotate(45deg);
|
|
38
|
-
top: var(--arrow-top);
|
|
39
|
-
bottom: var(--arrow-bottom);
|
|
40
|
-
right: var(--arrow-right);
|
|
41
|
-
left: var(--arrow-left);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.visible {
|
|
45
|
-
--visibility: visible;
|
|
46
|
-
}
|
|
47
|
-
`,Ct=Xt;var R=class extends st{constructor(){super(...arguments);this.placement="top";this._visible=!1}static get styles(){return[Ct]}setTooltip(){Ht(this.trigger,this.tooltip,{placement:this.placement,strategy:"fixed",middleware:[tt(8),et({padding:5}),B(),Z({element:this.arrow,padding:5})]}).then(({x:o,y:r,placement:l,middlewareData:i})=>{var c,p,d,h;let s=((c=i.arrow)==null?void 0:c.x)!=null?`${(p=i.arrow)==null?void 0:p.x}px`:" ",n=((d=i.arrow)==null?void 0:d.y)!=null?`${(h=i.arrow)==null?void 0:h.y}px`:" ",a={top:"bottom",right:"left",bottom:"top",left:"right"},u=l.split("-")[0],f=a[u];this.tooltip.style.setProperty("--left",`${o}px`),this.tooltip.style.setProperty("--top",`${r}px`),this.arrow.style.setProperty("--arrow-left",s),this.arrow.style.setProperty("--arrow-top",n),this.arrow.style.setProperty("--arrow-bottom","0"),this.arrow.style.setProperty("--arrow-right","0"),this.arrow.style.setProperty(`--arrow-${f}`,"-4px")})}show(){this._visible=!0,this.setTooltip(),this.onShow("Show event fired!")}hide(){this._visible=!1,this.onHide("Hide event fired!")}render(){let o=ut({tooltip:!0,visible:this._visible});return lt` <slot
|
|
1
|
+
import{a as ut}from"./chunk-HLQIZBQW.js";import{a as U}from"./chunk-23UFIOHV.js";import{a as it,b as lt,e as st,f as at,g as ct,h as ft,i as X}from"./chunk-BEHH5JPC.js";import{a as L}from"./chunk-NZ3RGSR6.js";function M(t){return t.split("-")[0]}function j(t){return t.split("-")[1]}function V(t){return["top","bottom"].includes(M(t))?"x":"y"}function K(t){return t==="y"?"height":"width"}function dt(t,e,o){let{reference:r,floating:l}=t,i=r.x+r.width/2-l.width/2,s=r.y+r.height/2-l.height/2,n=V(e),a=K(n),u=r[a]/2-l[a]/2,f=n==="x",c;switch(M(e)){case"top":c={x:i,y:r.y-l.height};break;case"bottom":c={x:i,y:r.y+r.height};break;case"right":c={x:r.x+r.width,y:s};break;case"left":c={x:r.x-l.width,y:s};break;default:c={x:r.x,y:r.y}}switch(j(e)){case"start":c[n]-=u*(o&&f?-1:1);break;case"end":c[n]+=u*(o&&f?-1:1)}return c}var ht=async(t,e,o)=>{let{placement:r="bottom",strategy:l="absolute",middleware:i=[],platform:s}=o,n=await(s.isRTL==null?void 0:s.isRTL(e)),a=await s.getElementRects({reference:t,floating:e,strategy:l}),{x:u,y:f}=dt(a,r,n),c=r,p={},d=0;for(let h=0;h<i.length;h++){let{name:m,fn:g}=i[h],{x:w,y:x,data:b,reset:y}=await g({x:u,y:f,initialPlacement:r,placement:c,strategy:l,middlewareData:p,rects:a,platform:s,elements:{reference:t,floating:e}});u=w!=null?w:u,f=x!=null?x:f,p={...p,[m]:{...p[m],...b}},y&&d<=50&&(d++,typeof y=="object"&&(y.placement&&(c=y.placement),y.rects&&(a=y.rects===!0?await s.getElementRects({reference:t,floating:e,strategy:l}):y.rects),{x:u,y:f}=dt(a,c,n)),h=-1)}return{x:u,y:f,placement:c,strategy:l,middlewareData:p}};function mt(t){return typeof t!="number"?function(e){return{top:0,right:0,bottom:0,left:0,...e}}(t):{top:t,right:t,bottom:t,left:t}}function z(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}async function Q(t,e){var o;e===void 0&&(e={});let{x:r,y:l,platform:i,rects:s,elements:n,strategy:a}=t,{boundary:u="clippingAncestors",rootBoundary:f="viewport",elementContext:c="floating",altBoundary:p=!1,padding:d=0}=e,h=mt(d),m=n[p?c==="floating"?"reference":"floating":c],g=z(await i.getClippingRect({element:(o=await(i.isElement==null?void 0:i.isElement(m)))==null||o?m:m.contextElement||await(i.getDocumentElement==null?void 0:i.getDocumentElement(n.floating)),boundary:u,rootBoundary:f,strategy:a})),w=z(i.convertOffsetParentRelativeRectToViewportRelativeRect?await i.convertOffsetParentRelativeRectToViewportRelativeRect({rect:c==="floating"?{...s.floating,x:r,y:l}:s.reference,offsetParent:await(i.getOffsetParent==null?void 0:i.getOffsetParent(n.floating)),strategy:a}):s[c]);return{top:g.top-w.top+h.top,bottom:w.bottom-g.bottom+h.bottom,left:g.left-w.left+h.left,right:w.right-g.right+h.right}}var Ot=Math.min,St=Math.max;function J(t,e,o){return St(t,Ot(e,o))}var Z=t=>({name:"arrow",options:t,async fn(e){let{element:o,padding:r=0}=t!=null?t:{},{x:l,y:i,placement:s,rects:n,platform:a}=e;if(o==null)return{};let u=mt(r),f={x:l,y:i},c=V(s),p=j(s),d=K(c),h=await a.getDimensions(o),m=c==="y"?"top":"left",g=c==="y"?"bottom":"right",w=n.reference[d]+n.reference[c]-f[c]-n.floating[d],x=f[c]-n.reference[c],b=await(a.getOffsetParent==null?void 0:a.getOffsetParent(o)),y=b?c==="y"?b.clientHeight||0:b.clientWidth||0:0;y===0&&(y=n.floating[d]);let F=w/2-x/2,D=u[m],k=y-h[d]-u[g],v=y/2-h[d]/2+F,P=J(D,v,k),O=(p==="start"?u[m]:u[g])>0&&v!==P&&n.reference[d]<=n.floating[d];return{[c]:f[c]-(O?v<D?D-v:k-v:0),data:{[c]:P,centerOffset:v-P}}}}),kt={left:"right",right:"left",bottom:"top",top:"bottom"};function Y(t){return t.replace(/left|right|bottom|top/g,e=>kt[e])}function Wt(t,e,o){o===void 0&&(o=!1);let r=j(t),l=V(t),i=K(l),s=l==="x"?r===(o?"end":"start")?"right":"left":r==="start"?"bottom":"top";return e.reference[i]>e.floating[i]&&(s=Y(s)),{main:s,cross:Y(s)}}var zt={start:"end",end:"start"};function pt(t){return t.replace(/start|end/g,e=>zt[e])}var Mt=["top","right","bottom","left"],Yt=Mt.reduce((t,e)=>t.concat(e,e+"-start",e+"-end"),[]);var B=function(t){return t===void 0&&(t={}),{name:"flip",options:t,async fn(e){var o;let{placement:r,middlewareData:l,rects:i,initialPlacement:s,platform:n,elements:a}=e,{mainAxis:u=!0,crossAxis:f=!0,fallbackPlacements:c,fallbackStrategy:p="bestFit",flipAlignment:d=!0,...h}=t,m=M(r),g=c||(m===s||!d?[Y(s)]:function(v){let P=Y(v);return[pt(v),P,pt(P)]}(s)),w=[s,...g],x=await Q(e,h),b=[],y=((o=l.flip)==null?void 0:o.overflows)||[];if(u&&b.push(x[m]),f){let{main:v,cross:P}=Wt(r,i,await(n.isRTL==null?void 0:n.isRTL(a.floating)));b.push(x[v],x[P])}if(y=[...y,{placement:r,overflows:b}],!b.every(v=>v<=0)){var F,D;let v=((F=(D=l.flip)==null?void 0:D.index)!=null?F:0)+1,P=w[v];if(P)return{data:{index:v,overflows:y},reset:{placement:P}};let O="bottom";switch(p){case"bestFit":{var k;let rt=(k=y.map(_=>[_,_.overflows.filter(W=>W>0).reduce((W,Dt)=>W+Dt,0)]).sort((_,W)=>_[1]-W[1])[0])==null?void 0:k[0].placement;rt&&(O=rt);break}case"initialPlacement":O=s}if(r!==O)return{reset:{placement:O}}}return{}}}};var tt=function(t){return t===void 0&&(t=0),{name:"offset",options:t,async fn(e){let{x:o,y:r}=e,l=await async function(i,s){let{placement:n,platform:a,elements:u}=i,f=await(a.isRTL==null?void 0:a.isRTL(u.floating)),c=M(n),p=j(n),d=V(n)==="x",h=["left","top"].includes(c)?-1:1,m=f&&d?-1:1,g=typeof s=="function"?s(i):s,{mainAxis:w,crossAxis:x,alignmentAxis:b}=typeof g=="number"?{mainAxis:g,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...g};return p&&typeof b=="number"&&(x=p==="end"?-1*b:b),d?{x:x*m,y:w*h}:{x:w*h,y:x*m}}(e,t);return{x:o+l.x,y:r+l.y,data:l}}}};function Vt(t){return t==="x"?"y":"x"}var et=function(t){return t===void 0&&(t={}),{name:"shift",options:t,async fn(e){let{x:o,y:r,placement:l}=e,{mainAxis:i=!0,crossAxis:s=!1,limiter:n={fn:g=>{let{x:w,y:x}=g;return{x:w,y:x}}},...a}=t,u={x:o,y:r},f=await Q(e,a),c=V(M(l)),p=Vt(c),d=u[c],h=u[p];if(i){let g=c==="y"?"bottom":"right";d=J(d+f[c==="y"?"top":"left"],d,d-f[g])}if(s){let g=p==="y"?"bottom":"right";h=J(h+f[p==="y"?"top":"left"],h,h-f[g])}let m=n.fn({...e,[c]:d,[p]:h});return{...m,data:{x:m.x-o,y:m.y-r}}}}};function bt(t){return t&&t.document&&t.location&&t.alert&&t.setInterval}function E(t){if(t==null)return window;if(!bt(t)){let e=t.ownerDocument;return e&&e.defaultView||window}return t}function $(t){return E(t).getComputedStyle(t)}function T(t){return bt(t)?"":t?(t.nodeName||"").toLowerCase():""}function Rt(){let t=navigator.userAgentData;return t!=null&&t.brands?t.brands.map(e=>e.brand+"/"+e.version).join(" "):navigator.userAgent}function A(t){return t instanceof E(t).HTMLElement}function S(t){return t instanceof E(t).Element}function ot(t){return typeof ShadowRoot>"u"?!1:t instanceof E(t).ShadowRoot||t instanceof ShadowRoot}function G(t){let{overflow:e,overflowX:o,overflowY:r}=$(t);return/auto|scroll|overlay|hidden/.test(e+r+o)}function Nt(t){return["table","td","th"].includes(T(t))}function gt(t){let e=/firefox/i.test(Rt()),o=$(t);return o.transform!=="none"||o.perspective!=="none"||o.contain==="paint"||["transform","perspective"].includes(o.willChange)||e&&o.willChange==="filter"||e&&!!o.filter&&o.filter!=="none"}function Pt(){return!/^((?!chrome|android).)*safari/i.test(Rt())}var yt=Math.min,N=Math.max,q=Math.round;function C(t,e,o){var r,l,i,s;e===void 0&&(e=!1),o===void 0&&(o=!1);let n=t.getBoundingClientRect(),a=1,u=1;e&&A(t)&&(a=t.offsetWidth>0&&q(n.width)/t.offsetWidth||1,u=t.offsetHeight>0&&q(n.height)/t.offsetHeight||1);let f=S(t)?E(t):window,c=!Pt()&&o,p=(n.left+(c&&(r=(l=f.visualViewport)==null?void 0:l.offsetLeft)!=null?r:0))/a,d=(n.top+(c&&(i=(s=f.visualViewport)==null?void 0:s.offsetTop)!=null?i:0))/u,h=n.width/a,m=n.height/u;return{width:h,height:m,top:d,right:p+h,bottom:d+m,left:p,x:p,y:d}}function H(t){return(e=t,(e instanceof E(e).Node?t.ownerDocument:t.document)||window.document).documentElement;var e}function I(t){return S(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function At(t){return C(H(t)).left+I(t).scrollLeft}function $t(t,e,o){let r=A(e),l=H(e),i=C(t,r&&function(a){let u=C(a);return q(u.width)!==a.offsetWidth||q(u.height)!==a.offsetHeight}(e),o==="fixed"),s={scrollLeft:0,scrollTop:0},n={x:0,y:0};if(r||!r&&o!=="fixed")if((T(e)!=="body"||G(l))&&(s=I(e)),A(e)){let a=C(e,!0);n.x=a.x+e.clientLeft,n.y=a.y+e.clientTop}else l&&(n.x=At(l));return{x:i.left+s.scrollLeft-n.x,y:i.top+s.scrollTop-n.y,width:i.width,height:i.height}}function Lt(t){return T(t)==="html"?t:t.assignedSlot||t.parentNode||(ot(t)?t.host:null)||H(t)}function wt(t){return A(t)&&getComputedStyle(t).position!=="fixed"?t.offsetParent:null}function nt(t){let e=E(t),o=wt(t);for(;o&&Nt(o)&&getComputedStyle(o).position==="static";)o=wt(o);return o&&(T(o)==="html"||T(o)==="body"&&getComputedStyle(o).position==="static"&&!gt(o))?e:o||function(r){let l=Lt(r);for(ot(l)&&(l=l.host);A(l)&&!["html","body"].includes(T(l));){if(gt(l))return l;l=l.parentNode}return null}(t)||e}function vt(t){if(A(t))return{width:t.offsetWidth,height:t.offsetHeight};let e=C(t);return{width:e.width,height:e.height}}function Tt(t){let e=Lt(t);return["html","body","#document"].includes(T(e))?t.ownerDocument.body:A(e)&&G(e)?e:Tt(e)}function Et(t,e){var o;e===void 0&&(e=[]);let r=Tt(t),l=r===((o=t.ownerDocument)==null?void 0:o.body),i=E(r),s=l?[i].concat(i.visualViewport||[],G(r)?r:[]):r,n=e.concat(s);return l?n:n.concat(Et(s))}function xt(t,e,o){return e==="viewport"?z(function(r,l){let i=E(r),s=H(r),n=i.visualViewport,a=s.clientWidth,u=s.clientHeight,f=0,c=0;if(n){a=n.width,u=n.height;let p=Pt();(p||!p&&l==="fixed")&&(f=n.offsetLeft,c=n.offsetTop)}return{width:a,height:u,x:f,y:c}}(t,o)):S(e)?function(r,l){let i=C(r,!1,l==="fixed"),s=i.top+r.clientTop,n=i.left+r.clientLeft;return{top:s,left:n,x:n,y:s,right:n+r.clientWidth,bottom:s+r.clientHeight,width:r.clientWidth,height:r.clientHeight}}(e,o):z(function(r){var l;let i=H(r),s=I(r),n=(l=r.ownerDocument)==null?void 0:l.body,a=N(i.scrollWidth,i.clientWidth,n?n.scrollWidth:0,n?n.clientWidth:0),u=N(i.scrollHeight,i.clientHeight,n?n.scrollHeight:0,n?n.clientHeight:0),f=-s.scrollLeft+At(r),c=-s.scrollTop;return $(n||i).direction==="rtl"&&(f+=N(i.clientWidth,n?n.clientWidth:0)-a),{width:a,height:u,x:f,y:c}}(H(t)))}function Ft(t){let e=Et(t),o=["absolute","fixed"].includes($(t).position)&&A(t)?nt(t):t;return S(o)?e.filter(r=>S(r)&&function(l,i){let s=i.getRootNode==null?void 0:i.getRootNode();if(l.contains(i))return!0;if(s&&ot(s)){let n=i;do{if(n&&l===n)return!0;n=n.parentNode||n.host}while(n)}return!1}(r,o)&&T(r)!=="body"):[]}var _t={getClippingRect:function(t){let{element:e,boundary:o,rootBoundary:r,strategy:l}=t,i=[...o==="clippingAncestors"?Ft(e):[].concat(o),r],s=i[0],n=i.reduce((a,u)=>{let f=xt(e,u,l);return a.top=N(f.top,a.top),a.right=yt(f.right,a.right),a.bottom=yt(f.bottom,a.bottom),a.left=N(f.left,a.left),a},xt(e,s,l));return{width:n.right-n.left,height:n.bottom-n.top,x:n.left,y:n.top}},convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{rect:e,offsetParent:o,strategy:r}=t,l=A(o),i=H(o);if(o===i)return e;let s={scrollLeft:0,scrollTop:0},n={x:0,y:0};if((l||!l&&r!=="fixed")&&((T(o)!=="body"||G(i))&&(s=I(o)),A(o))){let a=C(o,!0);n.x=a.x+o.clientLeft,n.y=a.y+o.clientTop}return{...e,x:e.x-s.scrollLeft+n.x,y:e.y-s.scrollTop+n.y}},isElement:S,getDimensions:vt,getOffsetParent:nt,getDocumentElement:H,getElementRects:t=>{let{reference:e,floating:o,strategy:r}=t;return{reference:$t(e,nt(o),r),floating:{...vt(o),x:0,y:0}}},getClientRects:t=>Array.from(t.getClientRects()),isRTL:t=>$(t).direction==="rtl"};var Ht=(t,e,o)=>ht(t,e,{platform:_t,...o});var Xt=it`.trigger{display:inline-block;cursor:pointer}.tooltip{--left:0;--top:0;--visibility:hidden;position:fixed;box-sizing:border-box;border:0;background-color:var(--bl-color-secondary);color:var(--bl-color-primary-background);border-radius:var(--bl-size-3xs);pointer-events:none;font:var(--bl-font-title-3-regular);padding:var(--bl-size-m);left:var(--left);top:var(--top);visibility:var(--visibility);z-index:999;max-width:424px}.arrow{--arrow-top:0;--arrow-bottom:0;--arrow-right:0;--arrow-left:0;position:absolute;background-color:var(--bl-color-secondary);width:var(--bl-size-2xs);height:var(--bl-size-2xs);transform:rotate(45deg);top:var(--arrow-top);bottom:var(--arrow-bottom);right:var(--arrow-right);left:var(--arrow-left)}.visible{--visibility:visible}`,Ct=Xt;var R=class extends st{constructor(){super(...arguments);this.placement="top";this._visible=!1}static get styles(){return[Ct]}setTooltip(){Ht(this.trigger,this.tooltip,{placement:this.placement,strategy:"fixed",middleware:[tt(8),et({padding:5}),B(),Z({element:this.arrow,padding:5})]}).then(({x:o,y:r,placement:l,middlewareData:i})=>{var c,p,d,h;let s=((c=i.arrow)==null?void 0:c.x)!=null?`${(p=i.arrow)==null?void 0:p.x}px`:" ",n=((d=i.arrow)==null?void 0:d.y)!=null?`${(h=i.arrow)==null?void 0:h.y}px`:" ",a={top:"bottom",right:"left",bottom:"top",left:"right"},u=l.split("-")[0],f=a[u];this.tooltip.style.setProperty("--left",`${o}px`),this.tooltip.style.setProperty("--top",`${r}px`),this.arrow.style.setProperty("--arrow-left",s),this.arrow.style.setProperty("--arrow-top",n),this.arrow.style.setProperty("--arrow-bottom","0"),this.arrow.style.setProperty("--arrow-right","0"),this.arrow.style.setProperty(`--arrow-${f}`,"-4px")})}show(){this._visible=!0,this.setTooltip(),this.onShow("Show event fired!")}hide(){this._visible=!1,this.onHide("Hide event fired!")}render(){let o=ut({tooltip:!0,visible:this._visible});return lt` <slot
|
|
48
2
|
class="trigger"
|
|
49
3
|
name="tooltip-trigger"
|
|
50
4
|
@mouseover="${this.show}"
|
|
@@ -55,4 +9,4 @@ import{a as ut}from"./chunk-HLQIZBQW.js";import{a as U}from"./chunk-23UFIOHV.js"
|
|
|
55
9
|
<slot></slot>
|
|
56
10
|
<div class="arrow"></div>
|
|
57
11
|
</div>`}};L([X(".tooltip")],R.prototype,"tooltip",2),L([X(".trigger")],R.prototype,"trigger",2),L([X(".arrow")],R.prototype,"arrow",2),L([ct({type:String})],R.prototype,"placement",2),L([ft()],R.prototype,"_visible",2),L([U("bl-tooltip-show")],R.prototype,"onShow",2),L([U("bl-tooltip-hide")],R.prototype,"onHide",2),R=L([at("bl-tooltip")],R);export{R as a};
|
|
58
|
-
//# sourceMappingURL=chunk-
|
|
12
|
+
//# sourceMappingURL=chunk-ZHDVBZMU.js.map
|