@trendyol/baklava 2.0.0-beta.22 → 2.0.0-beta.25
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/LICENSE +21 -0
- package/README.md +1 -1
- package/dist/baklava-react.js +1 -1
- package/dist/baklava-react.js.map +3 -3
- package/dist/baklava.js +1 -1
- package/dist/chunk-5YWWSNRQ.js +30 -0
- package/dist/chunk-5YWWSNRQ.js.map +7 -0
- package/dist/chunk-AS43M6VT.js +24 -0
- package/dist/chunk-AS43M6VT.js.map +7 -0
- package/dist/chunk-CEIAWSNF.js +11 -0
- package/dist/chunk-CEIAWSNF.js.map +7 -0
- package/dist/chunk-DCSIJZKF.js +2 -0
- package/dist/chunk-DCSIJZKF.js.map +7 -0
- package/dist/chunk-DJNJ4CN4.js +7 -0
- package/dist/chunk-DJNJ4CN4.js.map +7 -0
- package/dist/chunk-DT3I7BV7.js +18 -0
- package/dist/chunk-DT3I7BV7.js.map +7 -0
- package/dist/chunk-E2DT737L.js +7 -0
- package/dist/{chunk-SQ3STNEW.js.map → chunk-E2DT737L.js.map} +0 -0
- package/dist/chunk-E6WXDMOY.js +5 -0
- package/dist/chunk-E6WXDMOY.js.map +7 -0
- package/dist/{chunk-BVALTOFF.js → chunk-RLRHLKBD.js} +2 -48
- package/dist/{chunk-BVALTOFF.js.map → chunk-RLRHLKBD.js.map} +2 -2
- package/dist/chunk-S7TTXZFP.js +17 -0
- package/dist/{chunk-BEHH5JPC.js.map → chunk-S7TTXZFP.js.map} +2 -2
- package/dist/chunk-SJW4HPSY.js +7 -0
- package/dist/{chunk-DGRXEOW7.js.map → chunk-SJW4HPSY.js.map} +2 -2
- package/dist/chunk-VX2FHEEO.js +25 -0
- package/dist/chunk-VX2FHEEO.js.map +7 -0
- package/dist/{chunk-HLQIZBQW.js → chunk-W53DEGK2.js} +2 -2
- package/dist/{chunk-HLQIZBQW.js.map → chunk-W53DEGK2.js.map} +0 -0
- package/dist/components/alert/bl-alert.js +2 -0
- package/dist/components/alert/bl-alert.js.map +7 -0
- 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/dist/custom-elements.json +100 -1
- package/dist/themes/default.css +1 -1
- package/dist/themes/default.css.map +2 -2
- package/package.json +9 -24
- 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-BEHH5JPC.js +0 -17
- package/dist/chunk-DGRXEOW7.js +0 -21
- 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/dist/chunk-SQ3STNEW.js +0 -7
|
@@ -1,7 +0,0 @@
|
|
|
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 {\n display: inline-block;\n max-width: 100%;\n}\n\n.badge {\n --bg-color: var(--bl-badge-bg-color, var(--bl-color-accent-primary-background));\n --color: var(--bl-badge-color, var(--bl-color-primary));\n --font: var(--bl-font-title-4-medium);\n --padding-vertical: var(--bl-size-3xs);\n --padding-horizontal: var(--bl-size-3xs);\n --margin-icon: var(--bl-size-3xs);\n --icon-size: var(--bl-size-s);\n --height: var(--bl-size-xl);\n\n display: flex;\n gap: var(--margin-icon);\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n border: none;\n border-radius: var(--bl-size-4xs);\n margin: 0;\n padding: var(--padding-vertical) var(--padding-horizontal);\n background-color: var(--bg-color);\n color: var(--color, white);\n font: var(--font);\n font-kerning: none;\n height: var(--height);\n}\n\n:host([size='small']) .badge {\n --font: var(--bl-font-caption-small-text);\n --height: var(--bl-size-m);\n}\n\n:host([size='large']) .badge {\n --font: var(--bl-font-title-3-medium);\n --padding-vertical: var(--bl-size-2xs);\n --padding-horizontal: var(--bl-size-2xs);\n --height: var(--bl-size-2xl);\n --icon-size: var(--bl-size-m);\n}\n\n:host ::slotted(bl-icon) {\n font-size: var(--icon-size);\n}\n\n:host([size='small']) bl-icon {\n display: none;\n}\n`;\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,EAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqDfC,EAAQD,ECtCf,IAAqBE,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", "bl_badge_default", "BlBadge", "s", "bl_badge_default", "icon", "$", "__decorateClass", "e", "n"]
|
|
7
|
-
}
|
package/dist/chunk-RSHPTQX4.js
DELETED
|
@@ -1,148 +0,0 @@
|
|
|
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 {
|
|
2
|
-
display: var(--bl-button-display, inline-block);
|
|
3
|
-
max-width: 100%;
|
|
4
|
-
position: relative;
|
|
5
|
-
|
|
6
|
-
--bl-button-main-color: var(--bl-color-primary);
|
|
7
|
-
--bl-button-main-hover-color: var(--bl-color-primary-hover);
|
|
8
|
-
--bl-button-content-color: var(--bl-color-primary-background);
|
|
9
|
-
--bl-button-bg-color: var(--bl-button-main-color);
|
|
10
|
-
--bl-button-border-color: var(--bl-button-main-color);
|
|
11
|
-
--bl-button-padding-vertical: var(--bl-size-2xs);
|
|
12
|
-
--bl-button-padding-horizontal: var(--bl-size-m);
|
|
13
|
-
--bl-button-margin-icon: var(--bl-button-padding-vertical);
|
|
14
|
-
--bl-button-icon-size: var(--bl-size-m);
|
|
15
|
-
--bl-button-font: var(--bl-font-title-3-medium);
|
|
16
|
-
--bl-button-height: var(--bl-size-2xl);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.button {
|
|
20
|
-
display: flex;
|
|
21
|
-
gap: var(--bl-button-margin-icon);
|
|
22
|
-
justify-content: center;
|
|
23
|
-
align-items: center;
|
|
24
|
-
box-sizing: border-box;
|
|
25
|
-
width: 100%;
|
|
26
|
-
height: var(--bl-button-height);
|
|
27
|
-
border: solid 1px var(--bl-button-border-color);
|
|
28
|
-
border-radius: 6px;
|
|
29
|
-
text-decoration: none;
|
|
30
|
-
padding: var(--bl-button-padding-vertical) var(--bl-button-padding-horizontal);
|
|
31
|
-
cursor: pointer;
|
|
32
|
-
background-color: var(--bl-button-bg-color);
|
|
33
|
-
color: var(--bl-button-content-color);
|
|
34
|
-
font: var(--bl-button-font);
|
|
35
|
-
font-kerning: none;
|
|
36
|
-
user-select: none;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
:host(:hover) {
|
|
40
|
-
--bl-button-bg-color: var(--bl-button-main-hover-color);
|
|
41
|
-
--bl-button-border-color: var(--bl-button-main-hover-color);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.label {
|
|
45
|
-
white-space: nowrap;
|
|
46
|
-
overflow: hidden;
|
|
47
|
-
text-overflow: ellipsis;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
:host([size='small']) {
|
|
51
|
-
--bl-button-font: var(--bl-font-title-4-medium);
|
|
52
|
-
--bl-button-padding-vertical: var(--bl-size-3xs);
|
|
53
|
-
--bl-button-padding-horizontal: var(--bl-size-2xs);
|
|
54
|
-
--bl-button-icon-size: var(--bl-size-s);
|
|
55
|
-
--bl-button-height: var(--bl-size-xl);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
:host([size='large']) {
|
|
59
|
-
--bl-button-font: var(--bl-font-title-3-medium);
|
|
60
|
-
--bl-button-padding-vertical: var(--bl-size-xs);
|
|
61
|
-
--bl-button-padding-horizontal: var(--bl-size-xl);
|
|
62
|
-
--bl-button-margin-icon: var(--bl-size-2xs);
|
|
63
|
-
--bl-button-height: var(--bl-size-3xl);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.button:focus {
|
|
67
|
-
outline: none;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
:host ::slotted(bl-icon) {
|
|
71
|
-
font-size: var(--bl-button-icon-size);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.has-icon:not(.has-content) {
|
|
75
|
-
--bl-button-padding-horizontal: var(--bl-button-padding-vertical);
|
|
76
|
-
--bl-button-margin-icon: 0;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
:host([variant='secondary']) {
|
|
80
|
-
--bl-button-main-color: var(--bl-color-secondary);
|
|
81
|
-
--bl-button-main-hover-color: var(--bl-color-secondary-hover);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
:host([variant='success']) {
|
|
85
|
-
--bl-button-main-color: var(--bl-color-success);
|
|
86
|
-
--bl-button-main-hover-color: var(--bl-color-success-hover);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
:host([variant='danger']) {
|
|
90
|
-
--bl-button-main-color: var(--bl-color-danger);
|
|
91
|
-
--bl-button-main-hover-color: var(--bl-color-danger-hover);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
:host([disabled]) {
|
|
95
|
-
cursor: not-allowed;
|
|
96
|
-
|
|
97
|
-
--bl-button-main-color: var(--bl-color-tertiary);
|
|
98
|
-
--bl-button-main-hover-color: var(--bl-color-tertiary);
|
|
99
|
-
--bl-button-content-color: var(--bl-color-content-passive);
|
|
100
|
-
--bl-button-bg-color: var(--bl-button-main-color);
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
:host([disabled]) .button {
|
|
104
|
-
pointer-events: none;
|
|
105
|
-
text-decoration: none;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
:host([kind='text']) {
|
|
109
|
-
--bl-button-content-color: var(--bl-button-main-color);
|
|
110
|
-
--bl-button-border-color: transparent;
|
|
111
|
-
--bl-button-bg-color: transparent;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
:host([kind='text']) .button {
|
|
115
|
-
text-decoration: underline;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
:host([kind='outline']) {
|
|
119
|
-
--bl-button-bg-color: transparent;
|
|
120
|
-
--bl-button-content-color: var(--bl-button-main-color);
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
:host([kind='outline']:hover:not([disabled])) {
|
|
124
|
-
--bl-button-content-color: var(--bl-color-primary-background);
|
|
125
|
-
--bl-button-bg-color: var(--bl-button-main-hover-color);
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
:host([kind='text']:hover:not([disabled])) {
|
|
129
|
-
--bl-button-content-color: var(--bl-button-main-hover-color);
|
|
130
|
-
}
|
|
131
|
-
`,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
|
|
132
|
-
class=${i}
|
|
133
|
-
aria-disabled="${n(this.disabled)}"
|
|
134
|
-
aria-label="${n(this.label)}"
|
|
135
|
-
href=${n(this.href)}
|
|
136
|
-
target=${n(this.target)}
|
|
137
|
-
role="button"
|
|
138
|
-
>${l}</a
|
|
139
|
-
>`:a`<button
|
|
140
|
-
class=${i}
|
|
141
|
-
aria-disabled="${n(this.disabled)}"
|
|
142
|
-
aria-label="${n(this.label)}"
|
|
143
|
-
?disabled=${this.disabled}
|
|
144
|
-
@click="${this._handleClick}"
|
|
145
|
-
>
|
|
146
|
-
${l}
|
|
147
|
-
</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};
|
|
148
|
-
//# sourceMappingURL=chunk-RSHPTQX4.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
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 {\n display: var(--bl-button-display, inline-block);\n max-width: 100%;\n position: relative;\n\n --bl-button-main-color: var(--bl-color-primary);\n --bl-button-main-hover-color: var(--bl-color-primary-hover);\n --bl-button-content-color: var(--bl-color-primary-background);\n --bl-button-bg-color: var(--bl-button-main-color);\n --bl-button-border-color: var(--bl-button-main-color);\n --bl-button-padding-vertical: var(--bl-size-2xs);\n --bl-button-padding-horizontal: var(--bl-size-m);\n --bl-button-margin-icon: var(--bl-button-padding-vertical);\n --bl-button-icon-size: var(--bl-size-m);\n --bl-button-font: var(--bl-font-title-3-medium);\n --bl-button-height: var(--bl-size-2xl);\n}\n\n.button {\n display: flex;\n gap: var(--bl-button-margin-icon);\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n height: var(--bl-button-height);\n border: solid 1px var(--bl-button-border-color);\n border-radius: 6px;\n text-decoration: none;\n padding: var(--bl-button-padding-vertical) var(--bl-button-padding-horizontal);\n cursor: pointer;\n background-color: var(--bl-button-bg-color);\n color: var(--bl-button-content-color);\n font: var(--bl-button-font);\n font-kerning: none;\n user-select: none;\n}\n\n:host(:hover) {\n --bl-button-bg-color: var(--bl-button-main-hover-color);\n --bl-button-border-color: var(--bl-button-main-hover-color);\n}\n\n.label {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n:host([size='small']) {\n --bl-button-font: var(--bl-font-title-4-medium);\n --bl-button-padding-vertical: var(--bl-size-3xs);\n --bl-button-padding-horizontal: var(--bl-size-2xs);\n --bl-button-icon-size: var(--bl-size-s);\n --bl-button-height: var(--bl-size-xl);\n}\n\n:host([size='large']) {\n --bl-button-font: var(--bl-font-title-3-medium);\n --bl-button-padding-vertical: var(--bl-size-xs);\n --bl-button-padding-horizontal: var(--bl-size-xl);\n --bl-button-margin-icon: var(--bl-size-2xs);\n --bl-button-height: var(--bl-size-3xl);\n}\n\n.button:focus {\n outline: none;\n}\n\n:host ::slotted(bl-icon) {\n font-size: var(--bl-button-icon-size);\n}\n\n.has-icon:not(.has-content) {\n --bl-button-padding-horizontal: var(--bl-button-padding-vertical);\n --bl-button-margin-icon: 0;\n}\n\n:host([variant='secondary']) {\n --bl-button-main-color: var(--bl-color-secondary);\n --bl-button-main-hover-color: var(--bl-color-secondary-hover);\n}\n\n:host([variant='success']) {\n --bl-button-main-color: var(--bl-color-success);\n --bl-button-main-hover-color: var(--bl-color-success-hover);\n}\n\n:host([variant='danger']) {\n --bl-button-main-color: var(--bl-color-danger);\n --bl-button-main-hover-color: var(--bl-color-danger-hover);\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n\n --bl-button-main-color: var(--bl-color-tertiary);\n --bl-button-main-hover-color: var(--bl-color-tertiary);\n --bl-button-content-color: var(--bl-color-content-passive);\n --bl-button-bg-color: var(--bl-button-main-color);\n}\n\n:host([disabled]) .button {\n pointer-events: none;\n text-decoration: none;\n}\n\n:host([kind='text']) {\n --bl-button-content-color: var(--bl-button-main-color);\n --bl-button-border-color: transparent;\n --bl-button-bg-color: transparent;\n}\n\n:host([kind='text']) .button {\n text-decoration: underline;\n}\n\n:host([kind='outline']) {\n --bl-button-bg-color: transparent;\n --bl-button-content-color: var(--bl-button-main-color);\n}\n\n:host([kind='outline']:hover:not([disabled])) {\n --bl-button-content-color: var(--bl-color-primary-background);\n --bl-button-bg-color: var(--bl-button-main-hover-color);\n}\n\n:host([kind='text']:hover:not([disabled])) {\n --bl-button-content-color: var(--bl-button-main-hover-color);\n}\n`;\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": "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",
|
|
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
|
-
}
|