@trendyol/baklava 2.0.0-beta.19 → 2.0.0-beta.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/baklava.js +1 -1
  2. package/dist/{chunk-U6ZMWZI6.js → chunk-EKMTGBDD.js} +19 -19
  3. package/dist/chunk-EKMTGBDD.js.map +7 -0
  4. package/dist/components/button/bl-button.js +1 -1
  5. package/package.json +1 -1
  6. package/dist/chunk-U6ZMWZI6.js.map +0 -7
package/dist/baklava.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a as s}from"./chunk-4HMEMZY7.js";import{a as p}from"./chunk-5AGXQPQY.js";import{a as f}from"./chunk-LZXRWVZI.js";import{a as u}from"./chunk-7NRCA735.js";import{a as r}from"./chunk-FP5POXZC.js";import{a as e}from"./chunk-U6ZMWZI6.js";import{a as l}from"./chunk-675JRUTN.js";import"./chunk-SQ3STNEW.js";import"./chunk-HLQIZBQW.js";import{a as o,b as t,c as a}from"./chunk-DGRXEOW7.js";import"./chunk-72IJCTLJ.js";import"./chunk-23UFIOHV.js";import{a as d}from"./chunk-AMTKE3PJ.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};
1
+ import{a as s}from"./chunk-4HMEMZY7.js";import{a as p}from"./chunk-5AGXQPQY.js";import{a as f}from"./chunk-LZXRWVZI.js";import{a as u}from"./chunk-7NRCA735.js";import{a as r}from"./chunk-FP5POXZC.js";import{a as e}from"./chunk-EKMTGBDD.js";import{a as l}from"./chunk-675JRUTN.js";import"./chunk-SQ3STNEW.js";import"./chunk-HLQIZBQW.js";import{a as o,b as t,c as a}from"./chunk-DGRXEOW7.js";import"./chunk-72IJCTLJ.js";import"./chunk-23UFIOHV.js";import{a as d}from"./chunk-AMTKE3PJ.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
package/dist/{chunk-U6ZMWZI6.js → chunk-EKMTGBDD.js} RENAMED
@@ -1,11 +1,11 @@
1
- import{a as l}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 i,e as c,f as u,g as e}from"./chunk-BEHH5JPC.js";import{a as o}from"./chunk-NZ3RGSR6.js";var v=s`:host {
1
+ import{a as l}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 i,e as c,f as u,g as e}from"./chunk-BEHH5JPC.js";import{a as o}from"./chunk-NZ3RGSR6.js";var p=s`:host {
2
2
  display: var(--bl-button-display, inline-block);
3
3
  max-width: 100%;
4
4
  position: relative;
5
5
 
6
6
  --bl-button-main-color: var(--bl-color-primary);
7
7
  --bl-button-main-hover-color: var(--bl-color-primary-hover);
8
- --bl-button-content-color: #fff;
8
+ --bl-button-content-color: var(--bl-color-primary-background);
9
9
  --bl-button-bg-color: var(--bl-button-main-color);
10
10
  --bl-button-border-color: var(--bl-button-main-color);
11
11
  --bl-button-padding-vertical: var(--bl-size-2xs);
@@ -91,16 +91,6 @@ import{a as l}from"./chunk-SQ3STNEW.js";import{a as h}from"./chunk-HLQIZBQW.js";
91
91
  --bl-button-main-hover-color: var(--bl-color-danger-hover);
92
92
  }
93
93
 
94
- :host([text]) {
95
- --bl-button-content-color: var(--bl-button-main-color);
96
- --bl-button-border-color: transparent;
97
- --bl-button-bg-color: transparent;
98
- }
99
-
100
- :host([text]) .button {
101
- text-decoration: underline;
102
- }
103
-
104
94
  :host([disabled]) {
105
95
  cursor: not-allowed;
106
96
 
@@ -115,20 +105,30 @@ import{a as l}from"./chunk-SQ3STNEW.js";import{a as h}from"./chunk-HLQIZBQW.js";
115
105
  text-decoration: none;
116
106
  }
117
107
 
118
- :host([outline]) {
108
+ :host([text]) {
109
+ --bl-button-content-color: var(--bl-button-main-color);
110
+ --bl-button-border-color: transparent;
119
111
  --bl-button-bg-color: transparent;
120
112
  }
121
113
 
122
- :host([outline]:not(:hover):not([disabled])) {
114
+ :host([text]) .button {
115
+ text-decoration: underline;
116
+ }
117
+
118
+ :host([outline]) {
119
+ --bl-button-bg-color: transparent;
123
120
  --bl-button-content-color: var(--bl-button-main-color);
124
121
  }
125
122
 
126
- :host([text]:not([disabled])) .button:hover {
123
+ :host([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([text]:hover:not([disabled])) {
127
129
  --bl-button-content-color: var(--bl-button-main-hover-color);
128
- --bl-button-border-color: transparent;
129
- --bl-button-bg-color: transparent;
130
130
  }
131
- `,p=v;var t=class extends c{constructor(){super(...arguments);this.primary=!1;this.secondary=!1;this.success=!1;this.danger=!1;this.outline=!1;this.text=!1;this.size="medium";this.disabled=!1;this.target="_self"}static get styles(){return[p]}get _hasIconSlot(){return this.querySelector(':scope > [slot="icon"]')!==null}get _hasDefaultSlot(){return[...this.childNodes].some(r=>{var a;let n=r.nodeType;return n===r.TEXT_NODE&&((a=r.textContent)==null?void 0:a.trim())!==""||n===r.ELEMENT_NODE&&!r.hasAttribute("slot")})}render(){let b=!!this.href,r=this.icon?i`<bl-icon name=${this.icon}></bl-icon>`:"",n=i`<slot name="icon">${r}</slot> <span class="label"><slot></slot></span>`,a=h({button:!0,"has-icon":this.icon||this._hasIconSlot,"has-content":this._hasDefaultSlot});return b?i`<a
131
+ `,v=p;var t=class extends c{constructor(){super(...arguments);this.primary=!1;this.secondary=!1;this.success=!1;this.danger=!1;this.outline=!1;this.text=!1;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(r=>{var a;let n=r.nodeType;return n===r.TEXT_NODE&&((a=r.textContent)==null?void 0:a.trim())!==""||n===r.ELEMENT_NODE&&!r.hasAttribute("slot")})}render(){let b=!!this.href,r=this.icon?i`<bl-icon name=${this.icon}></bl-icon>`:"",n=i`<slot name="icon">${r}</slot> <span class="label"><slot></slot></span>`,a=h({button:!0,"has-icon":this.icon||this._hasIconSlot,"has-content":this._hasDefaultSlot});return b?i`<a
132
132
  class=${a}
133
133
  aria-disabled="${l(this.disabled)}"
134
134
  aria-label="${l(this.label)}"
@@ -145,4 +145,4 @@ import{a as l}from"./chunk-SQ3STNEW.js";import{a as h}from"./chunk-HLQIZBQW.js";
145
145
  >
146
146
  ${n}
147
147
  </button>`}_handleClick(){this.onClick("Click event fired!")}};o([e({type:Boolean,reflect:!0})],t.prototype,"primary",2),o([e({type:Boolean,reflect:!0})],t.prototype,"secondary",2),o([e({type:Boolean,reflect:!0})],t.prototype,"success",2),o([e({type:Boolean,reflect:!0})],t.prototype,"danger",2),o([e({type:Boolean,reflect:!0})],t.prototype,"outline",2),o([e({type:Boolean,reflect:!0})],t.prototype,"text",2),o([e({type:String,reflect:!0})],t.prototype,"size",2),o([e({type:String})],t.prototype,"label",2),o([e({type:Boolean,reflect:!0})],t.prototype,"disabled",2),o([e({type:String})],t.prototype,"href",2),o([e({type:String})],t.prototype,"icon",2),o([e({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-U6ZMWZI6.js.map
148
+ //# sourceMappingURL=chunk-EKMTGBDD.js.map
package/dist/chunk-EKMTGBDD.js.map ADDED
@@ -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 {\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([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([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([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([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([text]) .button {\n text-decoration: underline;\n}\n\n:host([outline]) {\n --bl-button-bg-color: transparent;\n --bl-button-content-color: var(--bl-button-main-color);\n}\n\n:host([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([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 ButtonSize = 'small' | 'medium' | 'large';\nexport type TargetType = '_blank' | '_parent' | '_self' | '_top';\n\n/**\n * @tag bl-button\n * @summary Baklava Button component\n *\n * @property {boolean} primary - Sets variant to primary\n * @property {boolean} secondary - Sets variant to secondary\n * @property {boolean} success - Sets variant to success\n * @property {boolean} danger - Sets variant to danger\n * @property {boolean} outline - Sets button version to outline\n * @property {boolean} text - Sets the button version to text\n * @property {boolean} disabled - Disables the button\n * @property {string} size - Sets the button size\n * @property {string} icon - Sets the name of the icon\n * @property {string} href - Sets link of the button\n * @property {string} target - Sets button target (should be defined with href)\n * @property {string} label - Sets the accessibility text for the button. Use it with icon-only buttons.\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 @property({ type: Boolean, reflect: true })\n primary = false;\n\n @property({ type: Boolean, reflect: true })\n secondary = false;\n\n @property({ type: Boolean, reflect: true })\n success = false;\n\n @property({ type: Boolean, reflect: true })\n danger = false;\n\n @property({ type: Boolean, reflect: true })\n outline = false;\n\n @property({ type: Boolean, reflect: true })\n text = false;\n\n @property({ type: String, reflect: true })\n size: ButtonSize = 'medium';\n\n @property({ type: String })\n label: string;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: String })\n href?: string;\n\n @property({ type: String })\n icon?: string;\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", "__decorateClass", "event", "n"]
7
+ }
package/dist/components/button/bl-button.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a}from"../../chunk-U6ZMWZI6.js";import"../../chunk-SQ3STNEW.js";import"../../chunk-HLQIZBQW.js";import"../../chunk-DGRXEOW7.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-BEHH5JPC.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
1
+ import{a}from"../../chunk-EKMTGBDD.js";import"../../chunk-SQ3STNEW.js";import"../../chunk-HLQIZBQW.js";import"../../chunk-DGRXEOW7.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-BEHH5JPC.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
2
2
  //# sourceMappingURL=bl-button.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trendyol/baklava",
3
- "version": "2.0.0-beta.19",
3
+ "version": "2.0.0-beta.20",
4
4
  "description": "Trendyol Baklava Design System",
5
5
  "main": "dist/baklava.js",
6
6
  "module": "dist/baklava.js",
package/dist/chunk-U6ZMWZI6.js.map DELETED
@@ -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: #fff;\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([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([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([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([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([text]) .button {\n text-decoration: underline;\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([outline]) {\n --bl-button-bg-color: transparent;\n}\n\n:host([outline]:not(:hover):not([disabled])) {\n --bl-button-content-color: var(--bl-button-main-color);\n}\n\n:host([text]:not([disabled])) .button:hover {\n --bl-button-content-color: var(--bl-button-main-hover-color);\n --bl-button-border-color: transparent;\n --bl-button-bg-color: transparent;\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 ButtonSize = 'small' | 'medium' | 'large';\nexport type TargetType = '_blank' | '_parent' | '_self' | '_top';\n\n/**\n * @tag bl-button\n * @summary Baklava Button component\n *\n * @property {boolean} primary - Sets variant to primary\n * @property {boolean} secondary - Sets variant to secondary\n * @property {boolean} success - Sets variant to success\n * @property {boolean} danger - Sets variant to danger\n * @property {boolean} outline - Sets button version to outline\n * @property {boolean} text - Sets the button version to text\n * @property {boolean} disabled - Disables the button\n * @property {string} size - Sets the button size\n * @property {string} icon - Sets the name of the icon\n * @property {string} href - Sets link of the button\n * @property {string} target - Sets button target (should be defined with href)\n * @property {string} label - Sets the accessibility text for the button. Use it with icon-only buttons.\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 @property({ type: Boolean, reflect: true })\n primary = false;\n\n @property({ type: Boolean, reflect: true })\n secondary = false;\n\n @property({ type: Boolean, reflect: true })\n success = false;\n\n @property({ type: Boolean, reflect: true })\n danger = false;\n\n @property({ type: Boolean, reflect: true })\n outline = false;\n\n @property({ type: Boolean, reflect: true })\n text = false;\n\n @property({ type: String, reflect: true })\n size: ButtonSize = 'medium';\n\n @property({ type: String })\n label: string;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: String })\n href?: string;\n\n @property({ type: String })\n icon?: string;\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", "__decorateClass", "event", "n"]
7
- }