@trendyol/baklava 2.0.0-beta.11 → 2.0.0-beta.12

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 (8) hide show
  1. package/README.md +1 -1
  2. package/dist/baklava.js +1 -1
  3. package/dist/{chunk-4HNYTGGI.js → chunk-T7GSZTD6.js} +16 -13
  4. package/dist/chunk-T7GSZTD6.js.map +7 -0
  5. package/dist/components/button/bl-button.js +1 -1
  6. package/dist/custom-elements.json +6 -6
  7. package/package.json +3 -3
  8. package/dist/chunk-4HNYTGGI.js.map +0 -7
package/README.md CHANGED
@@ -19,4 +19,4 @@ Preferred way of using Baklava is using it via CDN. Just import library JS and C
19
19
 
20
20
  This way library will be served from a very high performant CDN and all of the Baklava web components will be ready to use inside your web project.
21
21
 
22
- Please check our [Storybook Documentation](https://next--6267ebb4dd54f5004a65f14a.chromatic.com/) for detailed information about design system, components and contribution guideline.
22
+ Please check our [Storybook Documentation](https://trendyol.github.io/baklava/) for detailed information about design system, components and contribution guideline.
package/dist/baklava.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a as f}from"./chunk-HNGCDZW6.js";import{a}from"./chunk-4HNYTGGI.js";import{a as r}from"./chunk-KXC4PRYS.js";import"./chunk-EOV5UNUT.js";import{m as t,n as o,o as e}from"./chunk-DGA6AHIJ.js";import"./chunk-NZ3RGSR6.js";export{f as BlBadge,a as BlButton,e as BlIcon,r as BlInput,o as getIconPath,t as setIconPath};
1
+ import{a as f}from"./chunk-HNGCDZW6.js";import{a}from"./chunk-T7GSZTD6.js";import{a as r}from"./chunk-KXC4PRYS.js";import"./chunk-EOV5UNUT.js";import{m as t,n as o,o as e}from"./chunk-DGA6AHIJ.js";import"./chunk-NZ3RGSR6.js";export{f as BlBadge,a as BlButton,e as BlIcon,r as BlInput,o as getIconPath,t as setIconPath};
2
2
  //# sourceMappingURL=baklava.js.map
package/dist/{chunk-4HNYTGGI.js → chunk-T7GSZTD6.js} RENAMED
@@ -1,4 +1,4 @@
1
- import{a as d,b as l}from"./chunk-EOV5UNUT.js";import{a as s,b as a,e as c,f as u,g as e}from"./chunk-DGA6AHIJ.js";import{a as o}from"./chunk-NZ3RGSR6.js";var h=s`:host {
1
+ import{a as d,b as l}from"./chunk-EOV5UNUT.js";import{a as s,b as a,e as c,f as u,g as e}from"./chunk-DGA6AHIJ.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;
@@ -13,6 +13,7 @@ import{a as d,b as l}from"./chunk-EOV5UNUT.js";import{a as s,b as a,e as c,f as
13
13
  --bl-button-margin-icon: var(--bl-button-padding-vertical);
14
14
  --bl-button-icon-size: var(--bl-size-m);
15
15
  --bl-button-font: var(--bl-font-title-3-medium);
16
+ --bl-button-height: var(--bl-size-2xl);
16
17
  }
17
18
 
18
19
  .button {
@@ -22,10 +23,9 @@ import{a as d,b as l}from"./chunk-EOV5UNUT.js";import{a as s,b as a,e as c,f as
22
23
  align-items: center;
23
24
  box-sizing: border-box;
24
25
  width: 100%;
25
- border: none;
26
+ height: var(--bl-button-height);
27
+ border: solid 1px var(--bl-button-border-color);
26
28
  border-radius: 6px;
27
- margin: 0;
28
- box-shadow: inset 0 0 0 1px var(--bl-button-border-color);
29
29
  text-decoration: none;
30
30
  padding: var(--bl-button-padding-vertical) var(--bl-button-padding-horizontal);
31
31
  cursor: pointer;
@@ -52,13 +52,15 @@ import{a as d,b as l}from"./chunk-EOV5UNUT.js";import{a as s,b as a,e as c,f as
52
52
  --bl-button-padding-vertical: var(--bl-size-3xs);
53
53
  --bl-button-padding-horizontal: var(--bl-size-2xs);
54
54
  --bl-button-icon-size: var(--bl-size-s);
55
+ --bl-button-height: var(--bl-size-xl);
55
56
  }
56
57
 
57
58
  :host([size='large']) {
58
59
  --bl-button-font: var(--bl-font-title-3-medium);
59
60
  --bl-button-padding-vertical: var(--bl-size-xs);
60
- --bl-button-padding-horizontal: var(--bl-size-l);
61
+ --bl-button-padding-horizontal: var(--bl-size-xl);
61
62
  --bl-button-margin-icon: var(--bl-size-2xs);
63
+ --bl-button-height: var(--bl-size-3xl);
62
64
  }
63
65
 
64
66
  .button:focus {
@@ -89,13 +91,13 @@ import{a as d,b as l}from"./chunk-EOV5UNUT.js";import{a as s,b as a,e as c,f as
89
91
  --bl-button-main-hover-color: var(--bl-color-danger-hover);
90
92
  }
91
93
 
92
- :host([plain]) {
94
+ :host([text]) {
93
95
  --bl-button-content-color: var(--bl-button-main-color);
94
96
  --bl-button-border-color: transparent;
95
97
  --bl-button-bg-color: transparent;
96
98
  }
97
99
 
98
- :host([plain]) .button {
100
+ :host([text]) .button {
99
101
  text-decoration: underline;
100
102
  }
101
103
 
@@ -105,6 +107,7 @@ import{a as d,b as l}from"./chunk-EOV5UNUT.js";import{a as s,b as a,e as c,f as
105
107
  --bl-button-main-color: var(--bl-color-tertiary);
106
108
  --bl-button-main-hover-color: var(--bl-color-tertiary);
107
109
  --bl-button-content-color: var(--bl-color-content-passive);
110
+ --bl-button-bg-color: var(--bl-button-main-color);
108
111
  }
109
112
 
110
113
  :host([disabled]) .button {
@@ -120,13 +123,13 @@ import{a as d,b as l}from"./chunk-EOV5UNUT.js";import{a as s,b as a,e as c,f as
120
123
  --bl-button-content-color: var(--bl-button-main-color);
121
124
  }
122
125
 
123
- :host([plain]:not([disabled])) .button:hover {
126
+ :host([text]:not([disabled])) .button:hover {
124
127
  --bl-button-content-color: var(--bl-button-main-hover-color);
125
128
  --bl-button-border-color: transparent;
126
129
  --bl-button-bg-color: transparent;
127
130
  }
128
- `,p=h;var t=class extends c{constructor(){super(...arguments);this.primary=!1;this.secondary=!1;this.success=!1;this.danger=!1;this.outline=!1;this.plain=!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=>{let n=r.nodeType;return n===r.TEXT_NODE&&r.textContent?.trim()!==""||n===r.ELEMENT_NODE&&!r.hasAttribute("slot")})}render(){let i=!!this.href,r=this.icon?a`<bl-icon name=${this.icon}></bl-icon>`:"",n=a`<slot name="icon">${r}</slot> <span class="label"><slot></slot></span>`,b=d({button:!0,"has-icon":this.icon||this._hasIconSlot,"has-content":this._hasDefaultSlot});return i?a`<a
129
- class=${b}
131
+ `,h=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[h]}get _hasIconSlot(){return this.querySelector(':scope > [slot="icon"]')!==null}get _hasDefaultSlot(){return[...this.childNodes].some(r=>{let n=r.nodeType;return n===r.TEXT_NODE&&r.textContent?.trim()!==""||n===r.ELEMENT_NODE&&!r.hasAttribute("slot")})}render(){let b=!!this.href,r=this.icon?a`<bl-icon name=${this.icon}></bl-icon>`:"",n=a`<slot name="icon">${r}</slot> <span class="label"><slot></slot></span>`,i=d({button:!0,"has-icon":this.icon||this._hasIconSlot,"has-content":this._hasDefaultSlot});return b?a`<a
132
+ class=${i}
130
133
  aria-disabled="${l(this.disabled)}"
131
134
  aria-label="${l(this.label)}"
132
135
  href=${l(this.href)}
@@ -134,12 +137,12 @@ import{a as d,b as l}from"./chunk-EOV5UNUT.js";import{a as s,b as a,e as c,f as
134
137
  role="button"
135
138
  >${n}</a
136
139
  >`:a`<button
137
- class=${b}
140
+ class=${i}
138
141
  aria-disabled="${l(this.disabled)}"
139
142
  aria-label="${l(this.label)}"
140
143
  ?disabled=${this.disabled}
141
144
  @click="${this._handleClick}"
142
145
  >
143
146
  ${n}
144
- </button>`}_handleClick(){this.event("bl-click","Click event fired!")}event(i,r){this.dispatchEvent(new CustomEvent(i,{detail:r,bubbles:!0,composed:!0}))}};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,"plain",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),t=o([u("bl-button")],t);export{t as a};
145
- //# sourceMappingURL=chunk-4HNYTGGI.js.map
147
+ </button>`}_handleClick(){this.event("bl-click","Click event fired!")}event(b,r){this.dispatchEvent(new CustomEvent(b,{detail:r,bubbles:!0,composed:!0}))}};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),t=o([u("bl-button")],t);export{t as a};
148
+ //# sourceMappingURL=chunk-T7GSZTD6.js.map
package/dist/chunk-T7GSZTD6.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: #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.button: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 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 * @event {CustomEvent} bl-click\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 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 ? true : false;\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.event('bl-click', 'Click event fired!');\n }\n\n private event(name: string, detail: string) {\n this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-button': BlButton;\n }\n}\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
package/dist/components/button/bl-button.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a}from"../../chunk-4HNYTGGI.js";import"../../chunk-EOV5UNUT.js";import"../../chunk-DGA6AHIJ.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
1
+ import{a}from"../../chunk-T7GSZTD6.js";import"../../chunk-EOV5UNUT.js";import"../../chunk-DGA6AHIJ.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
2
2
  //# sourceMappingURL=bl-button.js.map
package/dist/custom-elements.json CHANGED
@@ -161,13 +161,13 @@
161
161
  },
162
162
  {
163
163
  "kind": "field",
164
- "name": "plain",
164
+ "name": "text",
165
165
  "type": {
166
166
  "text": "boolean"
167
167
  },
168
168
  "default": "false",
169
- "description": "Sets the button plain text style",
170
- "attribute": "plain",
169
+ "description": "Sets the button version to text",
170
+ "attribute": "text",
171
171
  "reflects": true
172
172
  },
173
173
  {
@@ -299,13 +299,13 @@
299
299
  "fieldName": "outline"
300
300
  },
301
301
  {
302
- "name": "plain",
302
+ "name": "text",
303
303
  "type": {
304
304
  "text": "boolean"
305
305
  },
306
306
  "default": "false",
307
- "description": "Sets the button plain text style",
308
- "fieldName": "plain"
307
+ "description": "Sets the button version to text",
308
+ "fieldName": "text"
309
309
  },
310
310
  {
311
311
  "name": "size",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trendyol/baklava",
3
- "version": "2.0.0-beta.11",
3
+ "version": "2.0.0-beta.12",
4
4
  "description": "Trendyol Baklava Design System",
5
5
  "main": "dist/baklava.js",
6
6
  "module": "dist/baklava.js",
@@ -20,10 +20,10 @@
20
20
  "prepare": "husky install",
21
21
  "start": "npm run storybook:dev",
22
22
  "analyze": "cem analyze",
23
- "chromatic": "npx chromatic",
24
23
  "commit": "commit",
25
24
  "build": "node scripts/build.js && npm run analyze",
26
25
  "build-storybook": "NODE_ENV=production build-storybook -o storybook-static",
26
+ "deploy-storybook": "storybook-to-ghpages --ci --source-branch=next --host-token-env-variable=GITHUB_TOKEN",
27
27
  "serve": "node scripts/build.js --serve",
28
28
  "storybook:dev": "start-storybook -p 1994",
29
29
  "lint": "npm-run-all -s lint:*",
@@ -71,6 +71,7 @@
71
71
  "@storybook/addon-essentials": "6.5.5",
72
72
  "@storybook/addon-links": "6.5.5",
73
73
  "@storybook/addon-storysource": "6.5.5",
74
+ "@storybook/storybook-deployer": "^2.8.11",
74
75
  "@storybook/web-components": "6.5.5",
75
76
  "@typescript-eslint/eslint-plugin": "^5.18.0",
76
77
  "@typescript-eslint/parser": "^5.18.0",
@@ -81,7 +82,6 @@
81
82
  "@web/test-runner-playwright": "^0.8.6",
82
83
  "@web/test-runner-puppeteer": "^0.10.5",
83
84
  "@webcomponents/webcomponentsjs": "^2.5.0",
84
- "chromatic": "^6.5.4",
85
85
  "del": "^6.1.0",
86
86
  "esbuild": "^0.14.39",
87
87
  "esbuild-plugin-lit-css": "^2.0.0",
package/dist/chunk-4HNYTGGI.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}\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 border: none;\n border-radius: 6px;\n margin: 0;\n box-shadow: inset 0 0 0 1px var(--bl-button-border-color);\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.button: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}\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-l);\n --bl-button-margin-icon: var(--bl-size-2xs);\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([plain]) {\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([plain]) .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}\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([plain]: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 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} disabled - Disables the button\n * @property {boolean} plain - Sets the button plain text style\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 * @event {CustomEvent} bl-click\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 plain = 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 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 ? true : false;\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.event('bl-click', 'Click event fired!');\n }\n\n private event(name: string, detail: string) {\n this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-button': BlButton;\n }\n}\n"],
5
- "mappings": "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",
6
- "names": []
7
- }