@trendyol/baklava 2.0.0-beta.68 → 2.0.0-beta.70

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.
@@ -1,4 +1,4 @@
1
1
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path fill-rule="evenodd" clip-rule="evenodd" d="M18 3.5C18.8284 3.5 19.5 4.17157 19.5 5V18.5911L21.3851 16.4966C21.9392 15.8808 22.8877 15.8309 23.5034 16.3851C24.1192 16.9392 24.1691 17.8877 23.6149 18.5034L19.1149 23.5034C18.8305 23.8195 18.4252 24 18 24C17.5748 24 17.1695 23.8195 16.8851 23.5034L12.3851 18.5034C11.8309 17.8877 11.8808 16.9392 12.4966 16.3851C13.1123 15.8309 14.0608 15.8808 14.6149 16.4966L16.5 18.5911V5C16.5 4.17157 17.1716 3.5 18 3.5Z" fill="currentColor"/>
3
- <path fill-rule="evenodd" clip-rule="evenodd" d="M6 20.5C5.17157 20.5 4.5 19.8284 4.5 19L4.5 5.40894L2.61494 7.50345C2.06075 8.11921 1.11232 8.16913 0.496552 7.61494C-0.119212 7.06075 -0.16913 6.11232 0.385059 5.49655L4.88506 0.496554C5.16952 0.180483 5.57477 5.61712e-07 6 5.24538e-07C6.42523 4.87363e-07 6.83048 0.180483 7.11494 0.496554L11.6149 5.49655C12.1691 6.11232 12.1192 7.06075 11.5034 7.61494C10.8877 8.16913 9.93925 8.11921 9.38506 7.50345L7.5 5.40894L7.5 19C7.5 19.8284 6.82843 20.5 6 20.5Z" fill="currentColor"/>
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7908 1.01475C12.3905 0.499955 11.6126 0.499873 11.2121 1.01458L6.25553 7.38598C5.74454 8.04282 6.21263 9.00001 7.04483 9L16.9558 8.99992C17.7879 8.99991 18.256 8.04293 17.7452 7.38606L12.7908 1.01475Z" fill="currentColor"/>
3
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M11.2123 22.9852C11.6127 23.4999 12.3907 23.4998 12.791 22.985L17.7452 16.6138C18.2559 15.957 17.7878 15 16.9557 15H7.04502C6.21282 15 5.74474 15.9572 6.25574 16.614L11.2123 22.9852Z" fill="currentColor"/>
4
4
  </svg>
package/dist/baklava.js CHANGED
@@ -1,2 +1,2 @@
1
- import{b as G}from"./chunk-K7ADOVTV.js";import{a as g}from"./chunk-SIGNZ5EB.js";import{a as I}from"./chunk-PL6NHIFG.js";import{a as b}from"./chunk-IDG5M2QP.js";import{a as h}from"./chunk-6IZKR4CY.js";import{a as w}from"./chunk-RQQTHSVK.js";import{b as P,d as T}from"./chunk-M623DR5J.js";import{b as D}from"./chunk-LPQ6QJUJ.js";import{a as B}from"./chunk-JHOV25H6.js";import{a as x}from"./chunk-RC4ECOUE.js";import"./chunk-NWSLTJ2S.js";import{a as n}from"./chunk-A25HQAVJ.js";import{c,f as i}from"./chunk-WFBCOT52.js";import{a as m}from"./chunk-Q7EIOEDW.js";import{a as s}from"./chunk-KWTSWXUL.js";import"./chunk-KWAF5LTC.js";import{a}from"./chunk-YJS4QEL4.js";import{a as r}from"./chunk-54XXQVFL.js";import{b as f,e as p}from"./chunk-6SKD6QNV.js";import"./chunk-KQBKSEYJ.js";import"./chunk-5VLVLBWY.js";import{a as d}from"./chunk-H37QVPNF.js";import{a as u}from"./chunk-PQ3WCOT4.js";import{a as l}from"./chunk-YJKHLINY.js";import"./chunk-ENFFFE4I.js";import"./chunk-2TVOKUHE.js";import{a as o,b as t,c as e}from"./chunk-YMAZFWEK.js";import"./chunk-72IJCTLJ.js";import"./chunk-23UFIOHV.js";import"./chunk-HG7OBTQS.js";import"./chunk-NZ3RGSR6.js";export{a as BlAlert,r as BlBadge,l as BlButton,f as BlCheckbox,p as BlCheckboxGroup,d as BlDialog,u as BlDrawer,T as BlDropdown,D as BlDropdownGroup,P as BlDropdownItem,e as BlIcon,x as BlInput,B as BlPagination,n as BlProgressIndicator,c as BlRadio,i as BlRadioGroup,m as BlSelect,s as BlSelectOption,G as BlSwitch,I as BlTab,g as BlTabGroup,b as BlTabPanel,h as BlTextarea,w as BlTooltip,t as getIconPath,o as setIconPath};
1
+ import{b as G}from"./chunk-K7ADOVTV.js";import{a as g}from"./chunk-SIGNZ5EB.js";import{a as I}from"./chunk-PL6NHIFG.js";import{a as b}from"./chunk-IDG5M2QP.js";import{a as h}from"./chunk-6IZKR4CY.js";import{a as w}from"./chunk-RQQTHSVK.js";import{b as P,d as T}from"./chunk-M623DR5J.js";import{b as D}from"./chunk-LPQ6QJUJ.js";import{a as B}from"./chunk-M7J33LWI.js";import{a as x}from"./chunk-XOH25C3Y.js";import"./chunk-NWSLTJ2S.js";import{a as n}from"./chunk-A25HQAVJ.js";import{c,f as i}from"./chunk-WFBCOT52.js";import{a as m}from"./chunk-Q7EIOEDW.js";import{a as s}from"./chunk-KWTSWXUL.js";import"./chunk-KWAF5LTC.js";import{a}from"./chunk-YJS4QEL4.js";import{a as r}from"./chunk-54XXQVFL.js";import{b as f,e as p}from"./chunk-6SKD6QNV.js";import"./chunk-KQBKSEYJ.js";import"./chunk-5VLVLBWY.js";import{a as d}from"./chunk-H37QVPNF.js";import{a as u}from"./chunk-PQ3WCOT4.js";import{b as l}from"./chunk-3TB2KKMW.js";import"./chunk-ENFFFE4I.js";import"./chunk-2TVOKUHE.js";import{a as o,b as t,c as e}from"./chunk-YMAZFWEK.js";import"./chunk-72IJCTLJ.js";import"./chunk-23UFIOHV.js";import"./chunk-HG7OBTQS.js";import"./chunk-NZ3RGSR6.js";export{a as BlAlert,r as BlBadge,l as BlButton,f as BlCheckbox,p as BlCheckboxGroup,d as BlDialog,u as BlDrawer,T as BlDropdown,D as BlDropdownGroup,P as BlDropdownItem,e as BlIcon,x as BlInput,B as BlPagination,n as BlProgressIndicator,c as BlRadio,i as BlRadioGroup,m as BlSelect,s as BlSelectOption,G as BlSwitch,I as BlTab,g as BlTabGroup,b as BlTabPanel,h as BlTextarea,w as BlTooltip,t as getIconPath,o as setIconPath};
2
2
  //# sourceMappingURL=baklava.js.map
@@ -0,0 +1,19 @@
1
+ import{a as g}from"./chunk-ENFFFE4I.js";import{a}from"./chunk-2TVOKUHE.js";import{a as f}from"./chunk-23UFIOHV.js";import{a as v,b as n,f as p,g as h,h as r,i as u,j as m}from"./chunk-HG7OBTQS.js";import{a as o}from"./chunk-NZ3RGSR6.js";var y=l=>{if(l.reportValidity()){let c=new Event("submit",{cancelable:!0});l.dispatchEvent(c),c.defaultPrevented||l.submit()}else return};var x=v`:host{display:var(--bl-button-display,inline-block);max-width:100%;position:relative}.button{--main-color:var(--bl-color-primary);--main-hover-color:var(--bl-color-primary-hover);--text-hover-color:var(--bl-color-secondary-background);--content-color:var(--bl-color-content-primary-contrast);--bg-color:var(--main-color);--border-color:var(--main-color);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-m);--margin-icon:var(--padding-vertical);--icon-size:var(--bl-size-m);--font:var(--bl-font-title-3-medium);--height:var(--bl-size-2xl);display:flex;gap:var(--margin-icon);justify-content:var(--bl-button-justify,center);align-items:center;box-sizing:border-box;width:100%;height:var(--height);border:solid 1px var(--border-color);border-radius:6px;text-decoration:none;padding:var(--padding-vertical) var(--padding-horizontal);cursor:pointer;background-color:var(--bg-color);color:var(--content-color);font:var(--font);font-kerning:none;user-select:none}:host(:hover) .button,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .button{--bg-color:var(--main-hover-color);--border-color:var(--main-hover-color)}.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([size='small']) .button{--font:var(--bl-font-title-4-medium);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-2xs);--icon-size:var(--bl-size-s);--height:var(--bl-size-xl)}:host([size='large']) .button{--font:var(--bl-font-title-3-medium);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-xl);--margin-icon:var(--bl-size-2xs);--height:var(--bl-size-3xl)}.button:focus{outline:0}.button:focus-visible{position:relative;outline:0}.button:focus-visible::after{border:2px solid var(--main-color);border-radius:var(--bl-border-radius-l);content:"";position:absolute;inset:-4px}:host ::slotted(bl-icon){font-size:var(--icon-size)}:host .has-icon:not(.has-content){--padding-horizontal:var(--padding-vertical);--margin-icon:0}:host([variant='secondary']) .button{--bg-color:transparent;--content-color:var(--main-color)}:host([variant='tertiary']) .button{--content-color:var(--main-color);--border-color:transparent;--bg-color:transparent}:host([kind='neutral']) .button{--main-color:var(--bl-color-secondary);--main-hover-color:var(--bl-color-secondary-hover)}:host([kind='success']) .button{--main-color:var(--bl-color-success);--main-hover-color:var(--bl-color-success-hover)}:host([kind='danger']) .button{--main-color:var(--bl-color-danger);--main-hover-color:var(--bl-color-danger-hover)}:host([disabled]){cursor:not-allowed}:host([disabled]) .button{--main-color:var(--bl-color-tertiary);--main-hover-color:var(--bl-color-tertiary);--content-color:var(--bl-color-content-passive);--bg-color:var(--main-color);pointer-events:none;text-decoration:none}:host([variant='tertiary'][disabled]) .button{--main-color:transparent}:host([variant='secondary']:hover:not([disabled])) .button,:host([variant='secondary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])) .button{--content-color:var(--bl-color-content-primary-contrast);--bg-color:var(--main-hover-color)}:host([variant='tertiary']:hover:not([disabled])) .button,:host([variant='tertiary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])) .button{--content-color:var(--main-hover-color);--bg-color:var(--text-hover-color)}:host([dropdown]) .open{display:none}:host([dropdown]) .active .open{display:inline-block}:host([dropdown]) .active .close{display:none}:host .active.button{--bg-color:var(--main-hover-color);--border-color:var(--main-hover-color)}:host([variant='secondary']) .active.button{--content-color:var(--bl-color-content-primary-contrast);--bg-color:var(--main-hover-color)}:host([variant='tertiary']) .active.button{--content-color:var(--main-color);--bg-color:var(--bl-color-tertiary);--border-color:transparent}`,_=x;var t=class extends p{constructor(){super(...arguments);this.variant="primary";this.kind="default";this.size="medium";this.disabled=!1;this.target="_self";this.dropdown=!1;this.active=!1}static get styles(){return[_]}get _isActive(){return this.active}connectedCallback(){super.connectedCallback(),this.form=this.closest("form")}caretTemplate(){return n` <bl-icon class="open" name="arrow_up"></bl-icon>
2
+ <bl-icon class="close" name="arrow_down"></bl-icon>`}_handleClick(){this.type==="submit"&&this.form&&y(this.form),this.onClick("Click event fired!")}focus(){this.button.focus()}get _hasIconSlot(){return this.querySelector(':scope > [slot="icon"]')!==null}get _hasDefaultSlot(){return[...this.childNodes].some(e=>{var s;let i=e.nodeType;return i===e.TEXT_NODE&&((s=e.textContent)==null?void 0:s.trim())!==""||i===e.ELEMENT_NODE&&!e.hasAttribute("slot")})}render(){let b=!!this.href,e=this.icon?n`<bl-icon name=${this.icon}></bl-icon>`:"",i=n`<slot name="icon">${e}</slot> <span class="label"><slot></slot></span>`,s=this.dropdown?this.caretTemplate():"",d=g({button:!0,"has-icon":this.icon||this._hasIconSlot,"has-content":this._hasDefaultSlot,active:!b&&this._isActive});return b?n`<a
3
+ class=${d}
4
+ aria-disabled="${a(this.disabled)}"
5
+ aria-label="${a(this.label)}"
6
+ href=${a(this.href)}
7
+ target=${a(this.target)}
8
+ role="button"
9
+ >${i}
10
+ </a>`:n`<button
11
+ class=${d}
12
+ aria-disabled="${a(this.disabled)}"
13
+ aria-label="${a(this.label)}"
14
+ ?disabled=${this.disabled}
15
+ @click="${this._handleClick}"
16
+ >
17
+ ${i} ${s}
18
+ </button>`}};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([r({type:String})],t.prototype,"type",2),o([r({type:Boolean})],t.prototype,"dropdown",2),o([u({})],t.prototype,"active",2),o([m(".button")],t.prototype,"button",2),o([f("bl-click")],t.prototype,"onClick",2),t=o([h("bl-button")],t);export{y as a,t as b};
19
+ //# sourceMappingURL=chunk-3TB2KKMW.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../node_modules/@open-wc/form-helpers/src/index.ts", "../src/components/button/bl-button.css", "../src/components/button/bl-button.ts"],
4
+ "sourcesContent": [null, "import {css} from 'lit';\nexport const styles = css`:host{display:var(--bl-button-display,inline-block);max-width:100%;position:relative}.button{--main-color:var(--bl-color-primary);--main-hover-color:var(--bl-color-primary-hover);--text-hover-color:var(--bl-color-secondary-background);--content-color:var(--bl-color-content-primary-contrast);--bg-color:var(--main-color);--border-color:var(--main-color);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-m);--margin-icon:var(--padding-vertical);--icon-size:var(--bl-size-m);--font:var(--bl-font-title-3-medium);--height:var(--bl-size-2xl);display:flex;gap:var(--margin-icon);justify-content:var(--bl-button-justify,center);align-items:center;box-sizing:border-box;width:100%;height:var(--height);border:solid 1px var(--border-color);border-radius:6px;text-decoration:none;padding:var(--padding-vertical) var(--padding-horizontal);cursor:pointer;background-color:var(--bg-color);color:var(--content-color);font:var(--font);font-kerning:none;user-select:none}:host(:hover) .button,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .button{--bg-color:var(--main-hover-color);--border-color:var(--main-hover-color)}.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([size='small']) .button{--font:var(--bl-font-title-4-medium);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-2xs);--icon-size:var(--bl-size-s);--height:var(--bl-size-xl)}:host([size='large']) .button{--font:var(--bl-font-title-3-medium);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-xl);--margin-icon:var(--bl-size-2xs);--height:var(--bl-size-3xl)}.button:focus{outline:0}.button:focus-visible{position:relative;outline:0}.button:focus-visible::after{border:2px solid var(--main-color);border-radius:var(--bl-border-radius-l);content:\"\";position:absolute;inset:-4px}:host ::slotted(bl-icon){font-size:var(--icon-size)}:host .has-icon:not(.has-content){--padding-horizontal:var(--padding-vertical);--margin-icon:0}:host([variant='secondary']) .button{--bg-color:transparent;--content-color:var(--main-color)}:host([variant='tertiary']) .button{--content-color:var(--main-color);--border-color:transparent;--bg-color:transparent}:host([kind='neutral']) .button{--main-color:var(--bl-color-secondary);--main-hover-color:var(--bl-color-secondary-hover)}:host([kind='success']) .button{--main-color:var(--bl-color-success);--main-hover-color:var(--bl-color-success-hover)}:host([kind='danger']) .button{--main-color:var(--bl-color-danger);--main-hover-color:var(--bl-color-danger-hover)}:host([disabled]){cursor:not-allowed}:host([disabled]) .button{--main-color:var(--bl-color-tertiary);--main-hover-color:var(--bl-color-tertiary);--content-color:var(--bl-color-content-passive);--bg-color:var(--main-color);pointer-events:none;text-decoration:none}:host([variant='tertiary'][disabled]) .button{--main-color:transparent}:host([variant='secondary']:hover:not([disabled])) .button,:host([variant='secondary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])) .button{--content-color:var(--bl-color-content-primary-contrast);--bg-color:var(--main-hover-color)}:host([variant='tertiary']:hover:not([disabled])) .button,:host([variant='tertiary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])) .button{--content-color:var(--main-hover-color);--bg-color:var(--text-hover-color)}:host([dropdown]) .open{display:none}:host([dropdown]) .active .open{display:inline-block}:host([dropdown]) .active .close{display:none}:host .active.button{--bg-color:var(--main-hover-color);--border-color:var(--main-hover-color)}:host([variant='secondary']) .active.button{--content-color:var(--bl-color-content-primary-contrast);--bg-color:var(--main-hover-color)}:host([variant='tertiary']) .active.button{--content-color:var(--main-color);--bg-color:var(--bl-color-tertiary);--border-color:transparent}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { submit } from '@open-wc/form-helpers';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport style from './bl-button.css';\nimport '../icon/bl-icon';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'tertiary';\nexport type ButtonKind = 'default' | 'neutral' | 'success' | 'danger';\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 * @cssproperty --bl-button-justify - Sets the justify-content property of button. Default value is 'center'.\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 = 'default';\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 * Sets the type of the button. Set `submit` to use button as the submitter of parent form.\n */\n @property({ type: String })\n type: 'submit' | null;\n\n /**\n * Sets button type to dropdown\n */\n @property({ type: Boolean })\n dropdown = false;\n\n /**\n * Active state\n */\n @state({})\n active = false;\n\n @query('.button')\n private button: HTMLAnchorElement | HTMLButtonElement;\n\n /**\n * Fires when button clicked\n */\n @event('bl-click') private onClick: EventDispatcher<string>;\n\n private get _isActive() {\n return this.active;\n }\n\n private form: HTMLFormElement | null;\n\n connectedCallback() {\n super.connectedCallback();\n this.form = this.closest('form');\n }\n\n private caretTemplate(): TemplateResult {\n return html` <bl-icon class=\"open\" name=\"arrow_up\"></bl-icon>\n <bl-icon class=\"close\" name=\"arrow_down\"></bl-icon>`;\n }\n\n private _handleClick() {\n if (this.type === 'submit' && this.form) {\n submit(this.form);\n }\n\n this.onClick('Click event fired!');\n }\n\n focus() {\n this.button.focus();\n }\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 caret = this.dropdown ? this.caretTemplate() : '';\n const classes = classMap({\n 'button': true,\n 'has-icon': this.icon || this._hasIconSlot,\n 'has-content': this._hasDefaultSlot,\n 'active': !isAnchor && this._isActive,\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}\n </a>`\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} ${caret}\n </button>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-button': BlButton;\n }\n}\n"],
5
+ "mappings": "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",
6
+ "names": ["submit", "form", "submitEvent", "styles", "r", "bl_button_default", "BlButton", "s", "bl_button_default", "$", "submit", "node", "_a", "nodeType", "isAnchor", "icon", "slots", "caret", "classes", "o", "l", "__decorateClass", "e", "t", "i", "event", "n"]
7
+ }
@@ -0,0 +1,52 @@
1
+ import{a as h}from"./chunk-2TVOKUHE.js";import{a as o}from"./chunk-23UFIOHV.js";import{a as u,b as r,f as p,g as c,h as i,i as g}from"./chunk-HG7OBTQS.js";import{a}from"./chunk-NZ3RGSR6.js";var b=u`.pagination{display:flex;flex-wrap:wrap;justify-content:center;max-width:max-content;gap:var(--bl-size-s)}.pagination *{margin:0;padding:0;box-sizing:border-box}.page-container{display:flex;align-items:center}.page-list{display:flex;align-items:center;list-style:none;user-select:none;gap:var(--bl-size-3xs)}.dots{margin:0 var(--bl-size-2xs)}.dots::before{content:' \\B7 \\B7 \\B7';color:var(--bl-color-content-primary)}.pagination-helpers{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--bl-size-m);color:var(--bl-color-content-primary)}.jumper,.select{display:flex;align-items:center;gap:var(--bl-size-2xs)}label{font:var(--bl-font-title-3-medium);font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-m);letter-spacing:0;user-select:none}bl-input{width:62px}bl-select{width:128px}@media only screen and (max-width:768px){label{display:none}}`,m=b;var t=class extends p{constructor(){super(...arguments);this.currentPage=1;this.totalItems=0;this.itemsPerPage=10;this.hasJumper=!1;this.jumperLabel="Go To";this.hasSelect=!1;this.selectLabel="Show";this.itemsPerPageOptions=[{text:"10 Items",value:10},{text:"25 Items",value:25},{text:"50 Items",value:50},{text:"100 Items",value:100}];this.pages=[]}static get styles(){return[m]}connectedCallback(){super.connectedCallback(),setTimeout(()=>{window==null||window.addEventListener("resize",()=>this._paginate())})}disconnectedCallback(){super.disconnectedCallback(),window==null||window.removeEventListener("resize",this._paginate)}updated(e){(e.has("currentPage")||e.has("itemsPerPage")||e.has("totalItems"))&&this._paginate(),(e.get("currentPage")||e.get("itemsPerPage"))&&this.onChange({selectedPage:this.currentPage,prevPage:e.get("currentPage"),itemsPerPage:this.itemsPerPage})}_paginate(){this.pages=[];let e=Math.ceil(Math.abs(this.totalItems/this.itemsPerPage))||1;if(e<=8){this.pages=Array.from(Array(e),(s,l)=>l+1);return}this.pages.push(1),this.currentPage<5?this.pages.push(2,3,4,5,"..."):this.currentPage>=5&&this.currentPage<=e-4?this.pages.push("...",this.currentPage-1,this.currentPage,this.currentPage+1,"..."):this.pages.push("...",e-4,e-3,e-2,e-1),this.pages.push(e)}_changePage(e){this.currentPage=e}_pageBack(){this.currentPage!==1&&this.currentPage--}_pageForward(){this.currentPage!==this._getLastPage()&&this.currentPage++}_getLastPage(){return+this.pages[this.pages.length-1]}_inputHandler(e){let s=+e.target.value,l=s>0?Math.min(this._getLastPage(),s):1;this._changePage(l)}_selectHandler(e){var s;this.itemsPerPage=+((s=e==null?void 0:e.detail[0])==null?void 0:s.value)||100,this.currentPage=1}_renderSinglePage(e){if(typeof e=="string")return r`<li class="dots"></li>`;let s=this.currentPage===e?"page":void 0;return r` <li>
2
+ <bl-button
3
+ @click="${()=>this._changePage(e)}"
4
+ variant=${this.currentPage===e?"primary":"tertiary"}
5
+ kind="neutral"
6
+ label="Page ${e}"
7
+ aria-current=${h(s)}
8
+ >
9
+ ${e}
10
+ </bl-button>
11
+ </li>`}renderPages(){return r`
12
+ <div class="page-container">
13
+ <bl-button
14
+ @click="${this._pageBack}"
15
+ variant="tertiary"
16
+ kind="neutral"
17
+ icon="arrow_left"
18
+ class="previous"
19
+ label="Previous"
20
+ ?disabled=${this.currentPage===1}
21
+ ></bl-button>
22
+ <ul class="page-list">
23
+ ${window.innerWidth<768?r`${this._renderSinglePage(this.currentPage)}`:this.pages.map(e=>r`${this._renderSinglePage(e)}`)}
24
+ </ul>
25
+ <bl-button
26
+ @click="${this._pageForward}"
27
+ variant="tertiary"
28
+ kind="neutral"
29
+ icon="arrow_right"
30
+ class="next"
31
+ label="Next"
32
+ ?disabled=${this.currentPage===this._getLastPage()}
33
+ ></bl-button>
34
+ </div>
35
+ `}render(){let e=this.hasSelect?r`
36
+ <div class="select">
37
+ <label>${this.selectLabel}</label>
38
+ <bl-select @bl-select="${this._selectHandler}">
39
+ ${this.itemsPerPageOptions.map(n=>r`<bl-select-option
40
+ value="${n.value}"
41
+ ?selected=${n.value===this.itemsPerPage}
42
+ >${n.text}</bl-select-option
43
+ >`)}
44
+ </bl-select>
45
+ </div>
46
+ `:null,s=this.hasJumper?r` <div class="jumper">
47
+ <label>${this.jumperLabel}</label>
48
+ <bl-input value="${this.currentPage}" @bl-change="${this._inputHandler}"></bl-input>
49
+ </div>`:null;return r` <nav class="pagination" aria-label="Pagination">
50
+ ${(()=>{if(!(!this.hasSelect&&!this.hasJumper))return r` <div class="pagination-helpers">${e} ${s}</div> `})()} ${this.renderPages()}
51
+ </nav>`}};a([i({attribute:"current-page",type:Number,reflect:!0})],t.prototype,"currentPage",2),a([i({attribute:"total-items",type:Number})],t.prototype,"totalItems",2),a([i({attribute:"items-per-page",type:Number,reflect:!0})],t.prototype,"itemsPerPage",2),a([i({attribute:"has-jumper",type:Boolean})],t.prototype,"hasJumper",2),a([i({attribute:"jumper-label",type:String})],t.prototype,"jumperLabel",2),a([i({attribute:"has-select",type:Boolean})],t.prototype,"hasSelect",2),a([i({attribute:"select-label",type:String})],t.prototype,"selectLabel",2),a([i({type:Array,attribute:!1})],t.prototype,"itemsPerPageOptions",2),a([g()],t.prototype,"pages",2),a([o("bl-change")],t.prototype,"onChange",2),t=a([c("bl-pagination")],t);export{t as a};
52
+ //# sourceMappingURL=chunk-M7J33LWI.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../src/components/pagination/bl-pagination.css", "../src/components/pagination/bl-pagination.ts"],
4
+ "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.pagination{display:flex;flex-wrap:wrap;justify-content:center;max-width:max-content;gap:var(--bl-size-s)}.pagination *{margin:0;padding:0;box-sizing:border-box}.page-container{display:flex;align-items:center}.page-list{display:flex;align-items:center;list-style:none;user-select:none;gap:var(--bl-size-3xs)}.dots{margin:0 var(--bl-size-2xs)}.dots::before{content:' \\\\B7 \\\\B7 \\\\B7';color:var(--bl-color-content-primary)}.pagination-helpers{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--bl-size-m);color:var(--bl-color-content-primary)}.jumper,.select{display:flex;align-items:center;gap:var(--bl-size-2xs)}label{font:var(--bl-font-title-3-medium);font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-m);letter-spacing:0;user-select:none}bl-input{width:62px}bl-select{width:128px}@media only screen and (max-width:768px){label{display:none}}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport '../button/bl-button';\nimport '../input/bl-input';\nimport '../select/bl-select';\n\nimport style from './bl-pagination.css';\n\n/**\n * @tag bl-pagination\n * @summary Baklava Pagination component\n */\n\n@customElement('bl-pagination')\nexport default class BlPagination extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the current page\n */\n @property({ attribute: 'current-page', type: Number, reflect: true })\n currentPage = 1;\n\n /**\n * Sets the total items to be paginated\n */\n @property({ attribute: 'total-items', type: Number })\n totalItems = 0;\n\n /**\n * Sets the number of items per page\n */\n @property({ attribute: 'items-per-page', type: Number, reflect: true })\n itemsPerPage = 10;\n\n /**\n * Adds jumper element if provided as true\n */\n @property({ attribute: 'has-jumper', type: Boolean })\n hasJumper = false;\n\n /**\n * Sets the jumper label\n */\n @property({ attribute: 'jumper-label', type: String })\n jumperLabel = 'Go To';\n\n /**\n * Adds select element to choose the items per page\n */\n @property({ attribute: 'has-select', type: Boolean })\n hasSelect = false;\n\n /**\n * Adds select element to choose the items per page\n */\n @property({ attribute: 'select-label', type: String })\n selectLabel = 'Show';\n\n /**\n * Sets the items per page options of the select element\n * PROPERTY\n */\n @property({ type: Array, attribute: false })\n itemsPerPageOptions = [\n {\n text: '10 Items',\n value: 10,\n },\n {\n text: '25 Items',\n value: 25,\n },\n {\n text: '50 Items',\n value: 50,\n },\n {\n text: '100 Items',\n value: 100,\n },\n ];\n\n @state() private pages: Array<number | string> = [];\n\n /**\n * Fires when the current page changes\n */\n @event('bl-change') private onChange: EventDispatcher<{\n selectedPage: number;\n prevPage: number;\n itemsPerPage: number;\n }>;\n\n connectedCallback() {\n super.connectedCallback();\n\n setTimeout(() => {\n window?.addEventListener('resize', () => this._paginate());\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n window?.removeEventListener('resize', this._paginate);\n }\n\n updated(changedProperties: PropertyValues<this>) {\n if (\n changedProperties.has('currentPage') ||\n changedProperties.has('itemsPerPage') ||\n changedProperties.has('totalItems')\n ) {\n this._paginate();\n }\n\n if (changedProperties.get('currentPage') || changedProperties.get('itemsPerPage')) {\n this.onChange({\n selectedPage: this.currentPage,\n prevPage: changedProperties.get('currentPage'),\n itemsPerPage: this.itemsPerPage,\n });\n }\n }\n\n private _paginate() {\n this.pages = [];\n const pageListLength = Math.ceil(Math.abs(this.totalItems / this.itemsPerPage)) || 1;\n\n if (pageListLength <= 8) {\n this.pages = Array.from(Array(pageListLength), (_, index) => index + 1);\n return;\n }\n\n this.pages.push(1);\n\n if (this.currentPage < 5) {\n this.pages.push(2, 3, 4, 5, '...');\n } else if (this.currentPage >= 5 && this.currentPage <= pageListLength - 4) {\n this.pages.push('...', this.currentPage - 1, this.currentPage, this.currentPage + 1, '...');\n } else {\n this.pages.push(\n '...',\n pageListLength - 4,\n pageListLength - 3,\n pageListLength - 2,\n pageListLength - 1\n );\n }\n\n this.pages.push(pageListLength);\n }\n\n private _changePage(page: number): void {\n this.currentPage = page;\n }\n\n private _pageBack(): void {\n if (this.currentPage === 1) return;\n this.currentPage--;\n }\n\n private _pageForward(): void {\n if (this.currentPage === this._getLastPage()) return;\n this.currentPage++;\n }\n\n private _getLastPage(): number {\n return +this.pages[this.pages.length - 1];\n }\n\n private _inputHandler(event: CustomEvent) {\n const inputValue = +(event.target as HTMLInputElement).value;\n const newPage = inputValue > 0 ? Math.min(this._getLastPage(), inputValue) : 1;\n this._changePage(newPage);\n }\n\n private _selectHandler(event: CustomEvent) {\n this.itemsPerPage = +event?.detail[0]?.value || 100;\n this.currentPage = 1;\n }\n\n private _renderSinglePage(page: number | string) {\n if (typeof page === 'string') {\n return html`<li class=\"dots\"></li>`;\n }\n const ariaCurrent = this.currentPage === page ? 'page' : undefined;\n return html` <li>\n <bl-button\n @click=\"${() => this._changePage(page)}\"\n variant=${this.currentPage === page ? 'primary' : 'tertiary'}\n kind=\"neutral\"\n label=\"Page ${page}\"\n aria-current=${ifDefined(ariaCurrent)}\n >\n ${page}\n </bl-button>\n </li>`;\n }\n\n private renderPages() {\n return html`\n <div class=\"page-container\">\n <bl-button\n @click=\"${this._pageBack}\"\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"arrow_left\"\n class=\"previous\"\n label=\"Previous\"\n ?disabled=${this.currentPage === 1}\n ></bl-button>\n <ul class=\"page-list\">\n ${window.innerWidth < 768\n ? html`${this._renderSinglePage(this.currentPage)}`\n : this.pages.map(page => html`${this._renderSinglePage(page)}`)}\n </ul>\n <bl-button\n @click=\"${this._pageForward}\"\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"arrow_right\"\n class=\"next\"\n label=\"Next\"\n ?disabled=${this.currentPage === this._getLastPage()}\n ></bl-button>\n </div>\n `;\n }\n\n render(): TemplateResult {\n const selectEl = this.hasSelect\n ? html`\n <div class=\"select\">\n <label>${this.selectLabel}</label>\n <bl-select @bl-select=\"${this._selectHandler}\">\n ${this.itemsPerPageOptions.map(option => {\n return html`<bl-select-option\n value=\"${option.value}\"\n ?selected=${option.value === this.itemsPerPage}\n >${option.text}</bl-select-option\n >`;\n })}\n </bl-select>\n </div>\n `\n : null;\n\n const jumperEl = this.hasJumper\n ? html` <div class=\"jumper\">\n <label>${this.jumperLabel}</label>\n <bl-input value=\"${this.currentPage}\" @bl-change=\"${this._inputHandler}\"></bl-input>\n </div>`\n : null;\n\n const getHelperElements = () => {\n if (!this.hasSelect && !this.hasJumper) return;\n return html` <div class=\"pagination-helpers\">${selectEl} ${jumperEl}</div> `;\n };\n\n return html` <nav class=\"pagination\" aria-label=\"Pagination\">\n ${getHelperElements()} ${this.renderPages()}\n </nav>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-pagination': BlPagination;\n }\n}\n"],
5
+ "mappings": "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",
6
+ "names": ["styles", "r", "bl_pagination_default", "BlPagination", "s", "bl_pagination_default", "changedProperties", "pageListLength", "_", "index", "page", "event", "inputValue", "newPage", "_a", "$", "ariaCurrent", "l", "selectEl", "option", "jumperEl", "__decorateClass", "e", "t", "n"]
7
+ }
@@ -0,0 +1,41 @@
1
+ import{a as m}from"./chunk-NWSLTJ2S.js";import{a as u}from"./chunk-KQBKSEYJ.js";import{a as g}from"./chunk-5VLVLBWY.js";import{a as b}from"./chunk-3TB2KKMW.js";import{a as d}from"./chunk-ENFFFE4I.js";import{a}from"./chunk-2TVOKUHE.js";import{a as s}from"./chunk-23UFIOHV.js";import{a as c,b as l,f as p,g as h,h as t,i as n,j as v}from"./chunk-HG7OBTQS.js";import{a as i}from"./chunk-NZ3RGSR6.js";var E=c`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-border);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--height:var(--bl-size-2xl);--input-font:var(--bl-font-body-text-2);--line-height:var(--bl-font-body-text-2-line-height);--icon-size:var(--line-height);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);display:flex;flex-direction:column;position:relative;gap:var(--bl-size-3xs)}.wrapper:focus-within{--border-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}.wrapper.dirty.invalid{--border-color:var(--bl-color-danger);--icon-color:var(--bl-color-danger)}:host([size='large']) .wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .wrapper{--height:var(--bl-size-xl);--input-font:var(--bl-font-body-text-3);--padding-vertical:var(--bl-size-3xs);--icon-size:var(--bl-font-body-text-3-line-height)}label{position:absolute;top:var(--padding-vertical);left:var(--padding-horizontal);right:var(--padding-horizontal);max-width:max-content;transition:all ease-in .2s;pointer-events:none;font:var(--input-font);color:var(--bl-color-content-tertiary);padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-wrapper{--border-size:1px;display:flex;box-sizing:border-box;gap:var(--padding-vertical);height:var(--height);border:solid var(--border-size) var(--border-color);padding:0 calc(var(--padding-horizontal) - var(--border-size));border-radius:4px}input{width:100%;align-self:stretch;outline:0;border:0;padding:0;font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent}.icon{display:flex;align-items:center;gap:8px;flex-basis:var(--icon-size);align-self:center;height:var(--icon-size)}bl-icon:not(.reveal-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button bl-icon{display:none}bl-icon[name='eye_on']{display:inline-block}.password-visible bl-icon[name='eye_on']{display:none}.password-visible bl-icon[name='eye_off']{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--bl-font-body-text-3);padding:0 var(--padding-horizontal)}.hint p{padding:0;margin:0}::placeholder{color:var(--bl-color-content-tertiary);-webkit-text-fill-color:var(--bl-color-content-tertiary)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out .4s}:host([label-fixed]) ::placeholder,:host .wrapper:focus-within ::placeholder{color:var(--bl-color-content-tertiary);-webkit-text-fill-color:var(--bl-color-content-tertiary)}:host([disabled]) .input-wrapper{cursor:not-allowed;background-color:var(--bl-color-secondary-background);--text-color:var(--bl-color-content-passive)}input:disabled{cursor:not-allowed}:where(.wrapper:focus-within,.wrapper.has-value) label{--label-padding:var(--bl-size-3xs);top:0;left:calc(var(--padding-horizontal) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0 var(--label-padding);background-color:var(--bl-color-primary-background);pointer-events:initial}:where(.has-icon:not(:focus-within),.has-icon:not(.has-value)) label{right:calc(var(--padding-horizontal) + var(--icon-size) + var(--padding-vertical))}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.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}`,y=E;var e=class extends g(p){constructor(){super(...arguments);this.type="text";this.value="";this.required=!1;this.size="medium";this.disabled=!1;this.labelFixed=!1;this.onKeydown=r=>{r.code==="Enter"&&this.form&&b(this.form)};this.onError=()=>{this.onInvalid(this.internals.validity)};this.dirty=!1;this.passwordVisible=!1;this.passwordInput=!1}static get styles(){return[y]}connectedCallback(){var r;super.connectedCallback(),this.addEventListener("keydown",this.onKeydown),this.addEventListener("invalid",this.onError),(r=this.internals.form)==null||r.addEventListener("submit",()=>{this.reportValidity()})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.onKeydown),this.removeEventListener("invalid",this.onError)}textVisiblityToggle(){this.passwordVisible=!this.passwordVisible}validityCallback(){var r;return this.customInvalidText||((r=this.validationTarget)==null?void 0:r.validationMessage)}reportValidity(){return this.dirty=!0,this.checkValidity()}valueChangedCallback(r){this.value=r}inputHandler(r){let o=r.target.value;this.setValue(o),this.onInput(o)}changeHandler(r){let o=r.target.value;this.dirty=!0,this.setValue(o),this.onChange(o)}firstUpdated(){this.passwordInput=this.type==="password",this.setValue(this.value)}render(){let r=this.checkValidity()?"":l`<p id="errorMessage" aria-live="polite" class="invalid-text">
2
+ ${this.validationMessage}
3
+ </p>`,o=this.helpText?l`<p id="helpText" class="help-text">${this.helpText}</p>`:"",f=this.icon?l`<bl-icon class="custom-icon" name="${this.icon}"></bl-icon>`:"",x=this.label?l`<label for="input">${this.label}</label>`:"",w=this.passwordInput?l`<bl-button
4
+ size="small"
5
+ kind="neutral"
6
+ variant="tertiary"
7
+ class="${d({"reveal-button":!0,"password-visible":this.passwordVisible})}"
8
+ aria-label="Toggle password reveal"
9
+ @bl-click="${this.textVisiblityToggle}"
10
+ >
11
+ <bl-icon class="reveal-icon" slot="icon" name="eye_on"></bl-icon>
12
+ <bl-icon class="reveal-icon" slot="icon" name="eye_off"></bl-icon>
13
+ </bl-button>`:"",z={wrapper:!0,dirty:this.dirty,invalid:!this.checkValidity(),"has-icon":this.passwordInput||this.icon||this.dirty&&!this.checkValidity(),"has-value":this.value!==null&&this.value!==""},k=this.passwordVisible?"text":"password",$=this.passwordInput?k:this.type;return l`<div class=${d(z)}>
14
+ ${x}
15
+ <div class="input-wrapper">
16
+ <input
17
+ id="input"
18
+ type=${$}
19
+ .value=${u(this.value)}
20
+ placeholder="${a(this.placeholder)}"
21
+ minlength="${a(this.minlength)}"
22
+ maxlength="${a(this.maxlength)}"
23
+ min="${a(this.min)}"
24
+ max="${a(this.max)}"
25
+ step="${a(this.step)}"
26
+ ?required=${this.required}
27
+ ?disabled=${this.disabled}
28
+ @change=${this.changeHandler}
29
+ @input=${this.inputHandler}
30
+ aria-invalid=${this.checkValidity()?"false":"true"}
31
+ aria-describedby=${a(this.helpText?"helpText":void 0)}
32
+ aria-errormessage=${a(this.checkValidity()?void 0:"errorMessage")}
33
+ />
34
+ <div class="icon">
35
+ ${w} ${f}
36
+ <bl-icon class="error-icon" name="alert"></bl-icon>
37
+ </div>
38
+ </div>
39
+ <div class="hint">${r} ${o}</div>
40
+ </div>`}};e.formControlValidators=m,i([v("input")],e.prototype,"validationTarget",2),i([t({})],e.prototype,"name",2),i([t({})],e.prototype,"type",2),i([t({reflect:!0})],e.prototype,"label",2),i([t({})],e.prototype,"placeholder",2),i([t()],e.prototype,"value",2),i([t({type:Boolean})],e.prototype,"required",2),i([t({type:Number})],e.prototype,"minlength",2),i([t({type:Number})],e.prototype,"maxlength",2),i([t({type:Number})],e.prototype,"min",2),i([t({type:Number})],e.prototype,"max",2),i([t({type:Number})],e.prototype,"step",2),i([t({type:String})],e.prototype,"icon",2),i([t({type:String,reflect:!0})],e.prototype,"size",2),i([t({type:Boolean,reflect:!0})],e.prototype,"disabled",2),i([t({type:Boolean,attribute:"label-fixed",reflect:!0})],e.prototype,"labelFixed",2),i([t({type:String,attribute:"invalid-text"})],e.prototype,"customInvalidText",2),i([t({type:String,attribute:"help-text",reflect:!0})],e.prototype,"helpText",2),i([s("bl-change")],e.prototype,"onChange",2),i([s("bl-input")],e.prototype,"onInput",2),i([s("bl-invalid")],e.prototype,"onInvalid",2),i([n()],e.prototype,"dirty",2),i([n()],e.prototype,"passwordVisible",2),i([n()],e.prototype,"passwordInput",2),e=i([h("bl-input")],e);export{e as a};
41
+ //# sourceMappingURL=chunk-XOH25C3Y.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}.wrapper{--border-color:var(--bl-color-border);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--height:var(--bl-size-2xl);--input-font:var(--bl-font-body-text-2);--line-height:var(--bl-font-body-text-2-line-height);--icon-size:var(--line-height);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);display:flex;flex-direction:column;position:relative;gap:var(--bl-size-3xs)}.wrapper:focus-within{--border-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}.wrapper.dirty.invalid{--border-color:var(--bl-color-danger);--icon-color:var(--bl-color-danger)}:host([size='large']) .wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .wrapper{--height:var(--bl-size-xl);--input-font:var(--bl-font-body-text-3);--padding-vertical:var(--bl-size-3xs);--icon-size:var(--bl-font-body-text-3-line-height)}label{position:absolute;top:var(--padding-vertical);left:var(--padding-horizontal);right:var(--padding-horizontal);max-width:max-content;transition:all ease-in .2s;pointer-events:none;font:var(--input-font);color:var(--bl-color-content-tertiary);padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-wrapper{--border-size:1px;display:flex;box-sizing:border-box;gap:var(--padding-vertical);height:var(--height);border:solid var(--border-size) var(--border-color);padding:0 calc(var(--padding-horizontal) - var(--border-size));border-radius:4px}input{width:100%;align-self:stretch;outline:0;border:0;padding:0;font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent}.icon{display:flex;align-items:center;gap:8px;flex-basis:var(--icon-size);align-self:center;height:var(--icon-size)}bl-icon:not(.reveal-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button bl-icon{display:none}bl-icon[name='eye_on']{display:inline-block}.password-visible bl-icon[name='eye_on']{display:none}.password-visible bl-icon[name='eye_off']{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--bl-font-body-text-3);padding:0 var(--padding-horizontal)}.hint p{padding:0;margin:0}::placeholder{color:var(--bl-color-content-tertiary);-webkit-text-fill-color:var(--bl-color-content-tertiary)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out .4s}:host([label-fixed]) ::placeholder,:host .wrapper:focus-within ::placeholder{color:var(--bl-color-content-tertiary);-webkit-text-fill-color:var(--bl-color-content-tertiary)}:host([disabled]) .input-wrapper{cursor:not-allowed;background-color:var(--bl-color-secondary-background);--text-color:var(--bl-color-content-passive)}input:disabled{cursor:not-allowed}:where(.wrapper:focus-within,.wrapper.has-value) label{--label-padding:var(--bl-size-3xs);top:0;left:calc(var(--padding-horizontal) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0 var(--label-padding);background-color:var(--bl-color-primary-background);pointer-events:initial}:where(.has-icon:not(:focus-within),.has-icon:not(.has-value)) label{right:calc(var(--padding-horizontal) + var(--icon-size) + var(--padding-vertical))}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.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}`;\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 { FormControlMixin } from '@open-wc/form-control';\nimport { submit } from '@open-wc/form-helpers';\nimport { live } from 'lit/directives/live.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport { innerInputValidators } from '../../utilities/form-control';\nimport 'element-internals-polyfill';\nimport '../icon/bl-icon';\nimport '../button/bl-button';\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 FormControlMixin(LitElement) {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n static formControlValidators = innerInputValidators;\n\n @query('input')\n validationTarget: HTMLInputElement;\n\n /**\n * Sets name of the input\n */\n @property({})\n name?: string;\n\n /**\n * Type of the input. It's used to set `type` attribute of native input inside. Only `text`, `number` and `password` is supported for now.\n */\n @property({})\n type: 'text' | 'password' | 'number' = 'text';\n\n /**\n * Sets label of the input\n */\n @property({ reflect: true })\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 = '';\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 increase and decrease step to a `number` input\n */\n @property({ type: Number })\n step?: 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', reflect: true })\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', reflect: true })\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 * Fires when the value of an input element has been changed.\n */\n @event('bl-invalid') private onInvalid: EventDispatcher<ValidityState>;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('keydown', this.onKeydown);\n this.addEventListener('invalid', this.onError);\n\n this.internals.form?.addEventListener('submit', () => {\n this.reportValidity();\n });\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this.onKeydown);\n this.removeEventListener('invalid', this.onError);\n }\n\n private onKeydown = (event: KeyboardEvent): void => {\n if (event.code === 'Enter' && this.form) {\n submit(this.form);\n }\n };\n\n private onError = (): void => {\n this.onInvalid(this.internals.validity);\n };\n\n @state() private dirty = false;\n\n @state() private passwordVisible = false;\n\n @state() private passwordInput = false;\n\n private textVisiblityToggle() {\n this.passwordVisible = !this.passwordVisible;\n }\n\n validityCallback(): string | void {\n return this.customInvalidText || this.validationTarget?.validationMessage;\n }\n\n reportValidity() {\n this.dirty = true;\n return this.checkValidity();\n }\n\n valueChangedCallback(value: string): void {\n this.value = value;\n }\n\n private inputHandler(event: Event) {\n const value = (event.target as HTMLInputElement).value;\n\n this.setValue(value);\n this.onInput(value);\n }\n\n private changeHandler(event: Event) {\n const value = (event.target as HTMLInputElement).value;\n\n this.dirty = true;\n this.setValue(value);\n this.onChange(value);\n }\n\n firstUpdated() {\n this.passwordInput = this.type === 'password';\n this.setValue(this.value);\n }\n\n render(): TemplateResult {\n const invalidMessage = !this.checkValidity()\n ? html`<p id=\"errorMessage\" aria-live=\"polite\" class=\"invalid-text\">\n ${this.validationMessage}\n </p>`\n : ``;\n const helpMessage = this.helpText\n ? html`<p id=\"helpText\" class=\"help-text\">${this.helpText}</p>`\n : ``;\n\n const icon = this.icon ? html`<bl-icon class=\"custom-icon\" name=\"${this.icon}\"></bl-icon>` : '';\n const label = this.label ? html`<label for=\"input\">${this.label}</label>` : '';\n\n const revealButton = this.passwordInput\n ? html`<bl-button\n size=\"small\"\n kind=\"neutral\"\n variant=\"tertiary\"\n class=\"${classMap({\n 'reveal-button': true,\n 'password-visible': this.passwordVisible,\n })}\"\n aria-label=\"Toggle password reveal\"\n @bl-click=\"${this.textVisiblityToggle}\"\n >\n <bl-icon class=\"reveal-icon\" slot=\"icon\" name=\"eye_on\"></bl-icon>\n <bl-icon class=\"reveal-icon\" slot=\"icon\" name=\"eye_off\"></bl-icon>\n </bl-button>`\n : '';\n\n const classes = {\n 'wrapper': true,\n 'dirty': this.dirty,\n 'invalid': !this.checkValidity(),\n 'has-icon': this.passwordInput || this.icon || (this.dirty && !this.checkValidity()),\n 'has-value': this.value !== null && this.value !== '',\n };\n\n const passwordType = this.passwordVisible ? 'text' : 'password';\n const inputType = this.passwordInput ? passwordType : this.type;\n\n return html`<div class=${classMap(classes)}>\n ${label}\n <div class=\"input-wrapper\">\n <input\n id=\"input\"\n type=${inputType}\n .value=${live(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 step=\"${ifDefined(this.step)}\"\n ?required=${this.required}\n ?disabled=${this.disabled}\n @change=${this.changeHandler}\n @input=${this.inputHandler}\n aria-invalid=${this.checkValidity() ? 'false' : 'true'}\n aria-describedby=${ifDefined(this.helpText ? 'helpText' : undefined)}\n aria-errormessage=${ifDefined(this.checkValidity() ? undefined : 'errorMessage')}\n />\n <div class=\"icon\">\n ${revealButton} ${icon}\n <bl-icon class=\"error-icon\" name=\"alert\"></bl-icon>\n </div>\n </div>\n <div class=\"hint\">${invalidMessage} ${helpMessage}</div>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-input': BlInput;\n }\n}\n"],
5
+ "mappings": "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",
6
+ "names": ["styles", "r", "bl_input_default", "BlInput", "FormControlMixin", "s", "event", "submit", "bl_input_default", "_a", "value", "invalidMessage", "$", "helpMessage", "icon", "label", "revealButton", "o", "classes", "passwordType", "inputType", "l", "innerInputValidators", "__decorateClass", "i", "e", "t", "n"]
7
+ }
@@ -64,6 +64,8 @@ export default class BlButton extends LitElement {
64
64
  */
65
65
  private onClick;
66
66
  private get _isActive();
67
+ private form;
68
+ connectedCallback(): void;
67
69
  private caretTemplate;
68
70
  private _handleClick;
69
71
  focus(): void;
@@ -1 +1 @@
1
- {"version":3,"file":"bl-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/bl-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAMvE,OAAO,iBAAiB,CAAC;AAEzB,oBAAY,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AACjE,oBAAY,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AACtE,oBAAY,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACtD,oBAAY,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEjE;;;;;;;GAOG;AAEH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,UAAU;IAC9C,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IAED;;OAEG;IAEH,OAAO,EAAE,aAAa,CAAa;IAEnC;;OAEG;IAEH,IAAI,EAAE,UAAU,CAAa;IAE7B;;OAEG;IAEH,IAAI,EAAE,UAAU,CAAY;IAE5B;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,MAAM,CAAC,EAAE,UAAU,CAAW;IAE9B;;OAEG;IAEH,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IAEtB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,MAAM,UAAS;IAGf,OAAO,CAAC,MAAM,CAAwC;IAEtD;;OAEG;IACgB,OAAO,CAAC,OAAO,CAA0B;IAE5D,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,YAAY;IAIpB,KAAK;IAIL,IAAI,YAAY,YAEf;IAED,IAAI,eAAe,YAgBlB;IAED,MAAM,IAAI,cAAc;CAgCzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
1
+ {"version":3,"file":"bl-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/bl-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAOvE,OAAO,iBAAiB,CAAC;AAEzB,oBAAY,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AACjE,oBAAY,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AACtE,oBAAY,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACtD,oBAAY,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEjE;;;;;;;GAOG;AAEH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,UAAU;IAC9C,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IAED;;OAEG;IAEH,OAAO,EAAE,aAAa,CAAa;IAEnC;;OAEG;IAEH,IAAI,EAAE,UAAU,CAAa;IAE7B;;OAEG;IAEH,IAAI,EAAE,UAAU,CAAY;IAE5B;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,MAAM,CAAC,EAAE,UAAU,CAAW;IAE9B;;OAEG;IAEH,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IAEtB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,MAAM,UAAS;IAGf,OAAO,CAAC,MAAM,CAAwC;IAEtD;;OAEG;IACgB,OAAO,CAAC,OAAO,CAA0B;IAE5D,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,CAAC,IAAI,CAAyB;IAErC,iBAAiB;IAKjB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,YAAY;IAQpB,KAAK;IAIL,IAAI,YAAY,YAEf;IAED,IAAI,eAAe,YAgBlB;IAED,MAAM,IAAI,cAAc;CAgCzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
@@ -1,2 +1,2 @@
1
- import{a}from"../../chunk-YJKHLINY.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-YMAZFWEK.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
1
+ import{b as a}from"../../chunk-3TB2KKMW.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-YMAZFWEK.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
2
2
  //# sourceMappingURL=bl-button.js.map
@@ -1,2 +1,2 @@
1
- import{a}from"../../chunk-H37QVPNF.js";import"../../chunk-YJKHLINY.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-YMAZFWEK.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
1
+ import{a}from"../../chunk-H37QVPNF.js";import"../../chunk-3TB2KKMW.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-YMAZFWEK.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
2
2
  //# sourceMappingURL=bl-dialog.js.map
@@ -1,2 +1,2 @@
1
- import{a}from"../../chunk-PQ3WCOT4.js";import"../../chunk-YJKHLINY.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-YMAZFWEK.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
1
+ import{a}from"../../chunk-PQ3WCOT4.js";import"../../chunk-3TB2KKMW.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-YMAZFWEK.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
2
2
  //# sourceMappingURL=bl-drawer.js.map
@@ -1,2 +1,2 @@
1
- import{c as a,d as b}from"../../chunk-M623DR5J.js";import"../../chunk-LPQ6QJUJ.js";import"../../chunk-KWAF5LTC.js";import"../../chunk-YJKHLINY.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-YMAZFWEK.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as blDropdownTag,b as default};
1
+ import{c as a,d as b}from"../../chunk-M623DR5J.js";import"../../chunk-LPQ6QJUJ.js";import"../../chunk-KWAF5LTC.js";import"../../chunk-3TB2KKMW.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-YMAZFWEK.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as blDropdownTag,b as default};
2
2
  //# sourceMappingURL=bl-dropdown.js.map
@@ -1,2 +1,2 @@
1
- import{a,b}from"../../../chunk-M623DR5J.js";import"../../../chunk-LPQ6QJUJ.js";import"../../../chunk-KWAF5LTC.js";import"../../../chunk-YJKHLINY.js";import"../../../chunk-ENFFFE4I.js";import"../../../chunk-2TVOKUHE.js";import"../../../chunk-YMAZFWEK.js";import"../../../chunk-72IJCTLJ.js";import"../../../chunk-23UFIOHV.js";import"../../../chunk-HG7OBTQS.js";import"../../../chunk-NZ3RGSR6.js";export{a as blDropdownItemTag,b as default};
1
+ import{a,b}from"../../../chunk-M623DR5J.js";import"../../../chunk-LPQ6QJUJ.js";import"../../../chunk-KWAF5LTC.js";import"../../../chunk-3TB2KKMW.js";import"../../../chunk-ENFFFE4I.js";import"../../../chunk-2TVOKUHE.js";import"../../../chunk-YMAZFWEK.js";import"../../../chunk-72IJCTLJ.js";import"../../../chunk-23UFIOHV.js";import"../../../chunk-HG7OBTQS.js";import"../../../chunk-NZ3RGSR6.js";export{a as blDropdownItemTag,b as default};
2
2
  //# sourceMappingURL=bl-dropdown-item.js.map
@@ -1,2 +1,2 @@
1
- import{a}from"../../chunk-RC4ECOUE.js";import"../../chunk-NWSLTJ2S.js";import"../../chunk-KQBKSEYJ.js";import"../../chunk-5VLVLBWY.js";import"../../chunk-YJKHLINY.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-YMAZFWEK.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
1
+ import{a}from"../../chunk-XOH25C3Y.js";import"../../chunk-NWSLTJ2S.js";import"../../chunk-KQBKSEYJ.js";import"../../chunk-5VLVLBWY.js";import"../../chunk-3TB2KKMW.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-YMAZFWEK.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
2
2
  //# sourceMappingURL=bl-input.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"bl-pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/bl-pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGvF,OAAO,qBAAqB,CAAC;AAC7B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,qBAAqB,CAAC;AAI7B;;;GAGG;AAGH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,UAAU;IAClD,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IAED;;OAEG;IAEH,WAAW,SAAK;IAEhB;;OAEG;IAEH,UAAU,SAAK;IAEf;;OAEG;IAEH,YAAY,SAAM;IAElB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,WAAW,SAAW;IAEtB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,WAAW,SAAU;IAErB;;;OAGG;IAEH,mBAAmB;;;QAiBjB;IAEO,OAAO,CAAC,KAAK,CAA8B;IAEpD;;OAEG;IACiB,OAAO,CAAC,QAAQ,CAIjC;IAEH,iBAAiB;IAQjB,oBAAoB;IAKpB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAkB/C,OAAO,CAAC,SAAS;IA4BjB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,WAAW;IA4BnB,MAAM,IAAI,cAAc;CAgCzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}
1
+ {"version":3,"file":"bl-pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/bl-pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvF,OAAO,qBAAqB,CAAC;AAC7B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,qBAAqB,CAAC;AAI7B;;;GAGG;AAGH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,UAAU;IAClD,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IAED;;OAEG;IAEH,WAAW,SAAK;IAEhB;;OAEG;IAEH,UAAU,SAAK;IAEf;;OAEG;IAEH,YAAY,SAAM;IAElB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,WAAW,SAAW;IAEtB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,WAAW,SAAU;IAErB;;;OAGG;IAEH,mBAAmB;;;QAiBjB;IAEO,OAAO,CAAC,KAAK,CAA8B;IAEpD;;OAEG;IACiB,OAAO,CAAC,QAAQ,CAIjC;IAEH,iBAAiB;IAQjB,oBAAoB;IAKpB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAkB/C,OAAO,CAAC,SAAS;IA4BjB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,iBAAiB;IAkBzB,OAAO,CAAC,WAAW;IA8BnB,MAAM,IAAI,cAAc;CAkCzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}
@@ -1,2 +1,2 @@
1
- import{a}from"../../chunk-JHOV25H6.js";import"../../chunk-RC4ECOUE.js";import"../../chunk-NWSLTJ2S.js";import"../../chunk-Q7EIOEDW.js";import"../../chunk-KWTSWXUL.js";import"../../chunk-KWAF5LTC.js";import"../../chunk-KQBKSEYJ.js";import"../../chunk-5VLVLBWY.js";import"../../chunk-YJKHLINY.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-YMAZFWEK.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
1
+ import{a}from"../../chunk-M7J33LWI.js";import"../../chunk-XOH25C3Y.js";import"../../chunk-NWSLTJ2S.js";import"../../chunk-Q7EIOEDW.js";import"../../chunk-KWTSWXUL.js";import"../../chunk-KWAF5LTC.js";import"../../chunk-KQBKSEYJ.js";import"../../chunk-5VLVLBWY.js";import"../../chunk-3TB2KKMW.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-YMAZFWEK.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
2
2
  //# sourceMappingURL=bl-pagination.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trendyol/baklava",
3
- "version": "2.0.0-beta.68",
3
+ "version": "2.0.0-beta.70",
4
4
  "description": "Trendyol Baklava Design System",
5
5
  "main": "dist/baklava.js",
6
6
  "module": "dist/baklava.js",
@@ -1,46 +0,0 @@
1
- import{a as o}from"./chunk-23UFIOHV.js";import{a as p,b as r,f as u,g as c,h as s,i as g}from"./chunk-HG7OBTQS.js";import{a}from"./chunk-NZ3RGSR6.js";var m=p`.pagination{display:flex;flex-wrap:wrap;justify-content:center;max-width:max-content;gap:var(--bl-size-s)}.pagination *{margin:0;padding:0;box-sizing:border-box}.page-container{display:flex;align-items:center}.page-list{display:flex;align-items:center;list-style:none;user-select:none}.dots{margin:0 var(--bl-size-2xs)}.dots::before{content:' \\B7 \\B7 \\B7';color:var(--bl-color-content-primary)}.pagination-helpers{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--bl-size-m);color:var(--bl-color-content-primary)}.jumper,.select{display:flex;align-items:center;gap:var(--bl-size-2xs)}label{font:var(--bl-font-title-3-medium);font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-m);letter-spacing:0;user-select:none}bl-input{width:62px}bl-select{width:128px}@media only screen and (max-width:768px){label{display:none}}`,h=m;var t=class extends u{constructor(){super(...arguments);this.currentPage=1;this.totalItems=0;this.itemsPerPage=10;this.hasJumper=!1;this.jumperLabel="Go To";this.hasSelect=!1;this.selectLabel="Show";this.itemsPerPageOptions=[{text:"10 Items",value:10},{text:"25 Items",value:25},{text:"50 Items",value:50},{text:"100 Items",value:100}];this.pages=[]}static get styles(){return[h]}connectedCallback(){super.connectedCallback(),setTimeout(()=>{window==null||window.addEventListener("resize",()=>this._paginate())})}disconnectedCallback(){super.disconnectedCallback(),window==null||window.removeEventListener("resize",this._paginate)}updated(e){(e.has("currentPage")||e.has("itemsPerPage")||e.has("totalItems"))&&this._paginate(),(e.get("currentPage")||e.get("itemsPerPage"))&&this.onChange({selectedPage:this.currentPage,prevPage:e.get("currentPage"),itemsPerPage:this.itemsPerPage})}_paginate(){this.pages=[];let e=Math.ceil(Math.abs(this.totalItems/this.itemsPerPage))||1;if(e<=8){this.pages=Array.from(Array(e),(i,l)=>l+1);return}this.pages.push(1),this.currentPage<5?this.pages.push(2,3,4,5,"..."):this.currentPage>=5&&this.currentPage<=e-4?this.pages.push("...",this.currentPage-1,this.currentPage,this.currentPage+1,"..."):this.pages.push("...",e-4,e-3,e-2,e-1),this.pages.push(e)}_changePage(e){this.currentPage=e}_pageBack(){this.currentPage!==1&&this.currentPage--}_pageForward(){this.currentPage!==this._getLastPage()&&this.currentPage++}_getLastPage(){return+this.pages[this.pages.length-1]}_inputHandler(e){let i=+e.target.value,l=i>0?Math.min(this._getLastPage(),i):1;this._changePage(l)}_selectHandler(e){var i;this.itemsPerPage=+((i=e==null?void 0:e.detail[0])==null?void 0:i.value)||100,this.currentPage=1}_renderSinglePage(e){return typeof e=="string"?r`<span class="dots"></span>`:r` <li>
2
- <bl-button
3
- @click="${()=>this._changePage(e)}"
4
- variant=${this.currentPage===e?"primary":"tertiary"}
5
- kind="neutral"
6
- >
7
- ${e}
8
- </bl-button>
9
- </li>`}renderPages(){return r`
10
- <div class="page-container">
11
- <bl-button
12
- @click="${this._pageBack}"
13
- variant="tertiary"
14
- kind="neutral"
15
- icon="arrow_left"
16
- class="previous"
17
- ?disabled=${this.currentPage===1}
18
- ></bl-button>
19
- <ul class="page-list">
20
- ${window.innerWidth<768?r`${this._renderSinglePage(this.currentPage)}`:this.pages.map(e=>r`${this._renderSinglePage(e)}`)}
21
- </ul>
22
- <bl-button
23
- @click="${this._pageForward}"
24
- variant="tertiary"
25
- kind="neutral"
26
- icon="arrow_right"
27
- class="next"
28
- ?disabled=${this.currentPage===this._getLastPage()}
29
- ></bl-button>
30
- </div>
31
- `}render(){let e=this.hasSelect?r`
32
- <div class="select">
33
- <label>${this.selectLabel}</label>
34
- <bl-select @bl-select="${this._selectHandler}">
35
- ${this.itemsPerPageOptions.map(n=>r`<bl-select-option
36
- value="${n.value}"
37
- ?selected=${n.value===this.itemsPerPage}
38
- >${n.text}</bl-select-option
39
- >`)}
40
- </bl-select>
41
- </div>
42
- `:null,i=this.hasJumper?r` <div class="jumper">
43
- <label>${this.jumperLabel}</label>
44
- <bl-input value="${this.currentPage}" @bl-change="${this._inputHandler}"></bl-input>
45
- </div>`:null;return r` <div class="pagination">${(()=>{if(!(!this.hasSelect&&!this.hasJumper))return r` <div class="pagination-helpers">${e} ${i}</div> `})()} ${this.renderPages()}</div>`}};a([s({attribute:"current-page",type:Number,reflect:!0})],t.prototype,"currentPage",2),a([s({attribute:"total-items",type:Number})],t.prototype,"totalItems",2),a([s({attribute:"items-per-page",type:Number,reflect:!0})],t.prototype,"itemsPerPage",2),a([s({attribute:"has-jumper",type:Boolean})],t.prototype,"hasJumper",2),a([s({attribute:"jumper-label",type:String})],t.prototype,"jumperLabel",2),a([s({attribute:"has-select",type:Boolean})],t.prototype,"hasSelect",2),a([s({attribute:"select-label",type:String})],t.prototype,"selectLabel",2),a([s({type:Array,attribute:!1})],t.prototype,"itemsPerPageOptions",2),a([g()],t.prototype,"pages",2),a([o("bl-change")],t.prototype,"onChange",2),t=a([c("bl-pagination")],t);export{t as a};
46
- //# sourceMappingURL=chunk-JHOV25H6.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../src/components/pagination/bl-pagination.css", "../src/components/pagination/bl-pagination.ts"],
4
- "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.pagination{display:flex;flex-wrap:wrap;justify-content:center;max-width:max-content;gap:var(--bl-size-s)}.pagination *{margin:0;padding:0;box-sizing:border-box}.page-container{display:flex;align-items:center}.page-list{display:flex;align-items:center;list-style:none;user-select:none}.dots{margin:0 var(--bl-size-2xs)}.dots::before{content:' \\\\B7 \\\\B7 \\\\B7';color:var(--bl-color-content-primary)}.pagination-helpers{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--bl-size-m);color:var(--bl-color-content-primary)}.jumper,.select{display:flex;align-items:center;gap:var(--bl-size-2xs)}label{font:var(--bl-font-title-3-medium);font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-m);letter-spacing:0;user-select:none}bl-input{width:62px}bl-select{width:128px}@media only screen and (max-width:768px){label{display:none}}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport '../button/bl-button';\nimport '../input/bl-input';\nimport '../select/bl-select';\n\nimport style from './bl-pagination.css';\n\n/**\n * @tag bl-pagination\n * @summary Baklava Pagination component\n */\n\n@customElement('bl-pagination')\nexport default class BlPagination extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the current page\n */\n @property({ attribute: 'current-page', type: Number, reflect: true })\n currentPage = 1;\n\n /**\n * Sets the total items to be paginated\n */\n @property({ attribute: 'total-items', type: Number })\n totalItems = 0;\n\n /**\n * Sets the number of items per page\n */\n @property({ attribute: 'items-per-page', type: Number, reflect: true })\n itemsPerPage = 10;\n\n /**\n * Adds jumper element if provided as true\n */\n @property({ attribute: 'has-jumper', type: Boolean })\n hasJumper = false;\n\n /**\n * Sets the jumper label\n */\n @property({ attribute: 'jumper-label', type: String })\n jumperLabel = 'Go To';\n\n /**\n * Adds select element to choose the items per page\n */\n @property({ attribute: 'has-select', type: Boolean })\n hasSelect = false;\n\n /**\n * Adds select element to choose the items per page\n */\n @property({ attribute: 'select-label', type: String })\n selectLabel = 'Show';\n\n /**\n * Sets the items per page options of the select element\n * PROPERTY\n */\n @property({ type: Array, attribute: false })\n itemsPerPageOptions = [\n {\n text: '10 Items',\n value: 10,\n },\n {\n text: '25 Items',\n value: 25,\n },\n {\n text: '50 Items',\n value: 50,\n },\n {\n text: '100 Items',\n value: 100,\n },\n ];\n\n @state() private pages: Array<number | string> = [];\n\n /**\n * Fires when the current page changes\n */\n @event('bl-change') private onChange: EventDispatcher<{\n selectedPage: number;\n prevPage: number;\n itemsPerPage: number;\n }>;\n\n connectedCallback() {\n super.connectedCallback();\n\n setTimeout(() => {\n window?.addEventListener('resize', () => this._paginate());\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n window?.removeEventListener('resize', this._paginate);\n }\n\n updated(changedProperties: PropertyValues<this>) {\n if (\n changedProperties.has('currentPage') ||\n changedProperties.has('itemsPerPage') ||\n changedProperties.has('totalItems')\n ) {\n this._paginate();\n }\n\n if (changedProperties.get('currentPage') || changedProperties.get('itemsPerPage')) {\n this.onChange({\n selectedPage: this.currentPage,\n prevPage: changedProperties.get('currentPage'),\n itemsPerPage: this.itemsPerPage,\n });\n }\n }\n\n private _paginate() {\n this.pages = [];\n const pageListLength = Math.ceil(Math.abs(this.totalItems / this.itemsPerPage)) || 1;\n\n if (pageListLength <= 8) {\n this.pages = Array.from(Array(pageListLength), (_, index) => index + 1);\n return;\n }\n\n this.pages.push(1);\n\n if (this.currentPage < 5) {\n this.pages.push(2, 3, 4, 5, '...');\n } else if (this.currentPage >= 5 && this.currentPage <= pageListLength - 4) {\n this.pages.push('...', this.currentPage - 1, this.currentPage, this.currentPage + 1, '...');\n } else {\n this.pages.push(\n '...',\n pageListLength - 4,\n pageListLength - 3,\n pageListLength - 2,\n pageListLength - 1\n );\n }\n\n this.pages.push(pageListLength);\n }\n\n private _changePage(page: number): void {\n this.currentPage = page;\n }\n\n private _pageBack(): void {\n if (this.currentPage === 1) return;\n this.currentPage--;\n }\n\n private _pageForward(): void {\n if (this.currentPage === this._getLastPage()) return;\n this.currentPage++;\n }\n\n private _getLastPage(): number {\n return +this.pages[this.pages.length - 1];\n }\n\n private _inputHandler(event: CustomEvent) {\n const inputValue = +(event.target as HTMLInputElement).value;\n const newPage = inputValue > 0 ? Math.min(this._getLastPage(), inputValue) : 1;\n this._changePage(newPage);\n }\n\n private _selectHandler(event: CustomEvent) {\n this.itemsPerPage = +event?.detail[0]?.value || 100;\n this.currentPage = 1;\n }\n\n private _renderSinglePage(page: number | string) {\n if (typeof page === 'string') {\n return html`<span class=\"dots\"></span>`;\n }\n return html` <li>\n <bl-button\n @click=\"${() => this._changePage(page)}\"\n variant=${this.currentPage === page ? 'primary' : 'tertiary'}\n kind=\"neutral\"\n >\n ${page}\n </bl-button>\n </li>`;\n }\n\n private renderPages() {\n return html`\n <div class=\"page-container\">\n <bl-button\n @click=\"${this._pageBack}\"\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"arrow_left\"\n class=\"previous\"\n ?disabled=${this.currentPage === 1}\n ></bl-button>\n <ul class=\"page-list\">\n ${window.innerWidth < 768\n ? html`${this._renderSinglePage(this.currentPage)}`\n : this.pages.map(page => html`${this._renderSinglePage(page)}`)}\n </ul>\n <bl-button\n @click=\"${this._pageForward}\"\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"arrow_right\"\n class=\"next\"\n ?disabled=${this.currentPage === this._getLastPage()}\n ></bl-button>\n </div>\n `;\n }\n\n render(): TemplateResult {\n const selectEl = this.hasSelect\n ? html`\n <div class=\"select\">\n <label>${this.selectLabel}</label>\n <bl-select @bl-select=\"${this._selectHandler}\">\n ${this.itemsPerPageOptions.map(option => {\n return html`<bl-select-option\n value=\"${option.value}\"\n ?selected=${option.value === this.itemsPerPage}\n >${option.text}</bl-select-option\n >`;\n })}\n </bl-select>\n </div>\n `\n : null;\n\n const jumperEl = this.hasJumper\n ? html` <div class=\"jumper\">\n <label>${this.jumperLabel}</label>\n <bl-input value=\"${this.currentPage}\" @bl-change=\"${this._inputHandler}\"></bl-input>\n </div>`\n : null;\n\n const getHelperElements = () => {\n if (!this.hasSelect && !this.hasJumper) return;\n return html` <div class=\"pagination-helpers\">${selectEl} ${jumperEl}</div> `;\n };\n\n return html` <div class=\"pagination\">${getHelperElements()} ${this.renderPages()}</div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-pagination': BlPagination;\n }\n}\n"],
5
- "mappings": "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",
6
- "names": ["styles", "r", "bl_pagination_default", "BlPagination", "s", "bl_pagination_default", "changedProperties", "pageListLength", "_", "index", "page", "event", "inputValue", "newPage", "_a", "$", "selectEl", "option", "jumperEl", "__decorateClass", "e", "t", "n"]
7
- }
@@ -1,41 +0,0 @@
1
- import{a as y}from"./chunk-NWSLTJ2S.js";import{a as m}from"./chunk-KQBKSEYJ.js";import{a as g}from"./chunk-5VLVLBWY.js";import{a as p}from"./chunk-ENFFFE4I.js";import{a}from"./chunk-2TVOKUHE.js";import{a as d}from"./chunk-23UFIOHV.js";import{a as h,b as n,f as v,g as b,h as i,i as s,j as u}from"./chunk-HG7OBTQS.js";import{a as t}from"./chunk-NZ3RGSR6.js";var f=l=>{if(l.reportValidity()){let c=new Event("submit",{cancelable:!0});l.dispatchEvent(c),c.defaultPrevented||l.submit()}else return};var T=h`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-border);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--height:var(--bl-size-2xl);--input-font:var(--bl-font-body-text-2);--line-height:var(--bl-font-body-text-2-line-height);--icon-size:var(--line-height);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);display:flex;flex-direction:column;position:relative;gap:var(--bl-size-3xs)}.wrapper:focus-within{--border-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}.wrapper.dirty.invalid{--border-color:var(--bl-color-danger);--icon-color:var(--bl-color-danger)}:host([size='large']) .wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .wrapper{--height:var(--bl-size-xl);--input-font:var(--bl-font-body-text-3);--padding-vertical:var(--bl-size-3xs);--icon-size:var(--bl-font-body-text-3-line-height)}label{position:absolute;top:var(--padding-vertical);left:var(--padding-horizontal);right:var(--padding-horizontal);max-width:max-content;transition:all ease-in .2s;pointer-events:none;font:var(--input-font);color:var(--bl-color-content-tertiary);padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-wrapper{--border-size:1px;display:flex;box-sizing:border-box;gap:var(--padding-vertical);height:var(--height);border:solid var(--border-size) var(--border-color);padding:0 calc(var(--padding-horizontal) - var(--border-size));border-radius:4px}input{width:100%;align-self:stretch;outline:0;border:0;padding:0;font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent}.icon{display:flex;align-items:center;gap:8px;flex-basis:var(--icon-size);align-self:center;height:var(--icon-size)}bl-icon:not(.reveal-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button bl-icon{display:none}bl-icon[name='eye_on']{display:inline-block}.password-visible bl-icon[name='eye_on']{display:none}.password-visible bl-icon[name='eye_off']{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--bl-font-body-text-3);padding:0 var(--padding-horizontal)}.hint p{padding:0;margin:0}::placeholder{color:var(--bl-color-content-tertiary);-webkit-text-fill-color:var(--bl-color-content-tertiary)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out .4s}:host([label-fixed]) ::placeholder,:host .wrapper:focus-within ::placeholder{color:var(--bl-color-content-tertiary);-webkit-text-fill-color:var(--bl-color-content-tertiary)}:host([disabled]) .input-wrapper{cursor:not-allowed;background-color:var(--bl-color-secondary-background);--text-color:var(--bl-color-content-passive)}input:disabled{cursor:not-allowed}:where(.wrapper:focus-within,.wrapper.has-value) label{--label-padding:var(--bl-size-3xs);top:0;left:calc(var(--padding-horizontal) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0 var(--label-padding);background-color:var(--bl-color-primary-background);pointer-events:initial}:where(.has-icon:not(:focus-within),.has-icon:not(.has-value)) label{right:calc(var(--padding-horizontal) + var(--icon-size) + var(--padding-vertical))}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.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}`,x=T;var e=class extends g(v){constructor(){super(...arguments);this.type="text";this.value="";this.required=!1;this.size="medium";this.disabled=!1;this.labelFixed=!1;this.onKeydown=r=>{r.code==="Enter"&&this.form&&f(this.form)};this.onError=()=>{this.onInvalid(this.internals.validity)};this.dirty=!1;this.passwordVisible=!1;this.passwordInput=!1}static get styles(){return[x]}connectedCallback(){var r;super.connectedCallback(),this.addEventListener("keydown",this.onKeydown),this.addEventListener("invalid",this.onError),(r=this.internals.form)==null||r.addEventListener("submit",()=>{this.reportValidity()})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.onKeydown),this.removeEventListener("invalid",this.onError)}textVisiblityToggle(){this.passwordVisible=!this.passwordVisible}validityCallback(){var r;return this.customInvalidText||((r=this.validationTarget)==null?void 0:r.validationMessage)}reportValidity(){return this.dirty=!0,this.checkValidity()}valueChangedCallback(r){this.value=r}inputHandler(r){let o=r.target.value;this.setValue(o),this.onInput(o)}changeHandler(r){let o=r.target.value;this.dirty=!0,this.setValue(o),this.onChange(o)}firstUpdated(){this.passwordInput=this.type==="password",this.setValue(this.value)}render(){let r=this.checkValidity()?"":n`<p id="errorMessage" aria-live="polite" class="invalid-text">
2
- ${this.validationMessage}
3
- </p>`,o=this.helpText?n`<p id="helpText" class="help-text">${this.helpText}</p>`:"",w=this.icon?n`<bl-icon class="custom-icon" name="${this.icon}"></bl-icon>`:"",z=this.label?n`<label for="input">${this.label}</label>`:"",k=this.passwordInput?n`<bl-button
4
- size="small"
5
- kind="neutral"
6
- variant="tertiary"
7
- class="${p({"reveal-button":!0,"password-visible":this.passwordVisible})}"
8
- aria-label="Toggle password reveal"
9
- @bl-click="${this.textVisiblityToggle}"
10
- >
11
- <bl-icon class="reveal-icon" slot="icon" name="eye_on"></bl-icon>
12
- <bl-icon class="reveal-icon" slot="icon" name="eye_off"></bl-icon>
13
- </bl-button>`:"",$={wrapper:!0,dirty:this.dirty,invalid:!this.checkValidity(),"has-icon":this.passwordInput||this.icon||this.dirty&&!this.checkValidity(),"has-value":this.value!==null&&this.value!==""},E=this.passwordVisible?"text":"password",V=this.passwordInput?E:this.type;return n`<div class=${p($)}>
14
- ${z}
15
- <div class="input-wrapper">
16
- <input
17
- id="input"
18
- type=${V}
19
- .value=${m(this.value)}
20
- placeholder="${a(this.placeholder)}"
21
- minlength="${a(this.minlength)}"
22
- maxlength="${a(this.maxlength)}"
23
- min="${a(this.min)}"
24
- max="${a(this.max)}"
25
- step="${a(this.step)}"
26
- ?required=${this.required}
27
- ?disabled=${this.disabled}
28
- @change=${this.changeHandler}
29
- @input=${this.inputHandler}
30
- aria-invalid=${this.checkValidity()?"false":"true"}
31
- aria-describedby=${a(this.helpText?"helpText":void 0)}
32
- aria-errormessage=${a(this.checkValidity()?void 0:"errorMessage")}
33
- />
34
- <div class="icon">
35
- ${k} ${w}
36
- <bl-icon class="error-icon" name="alert"></bl-icon>
37
- </div>
38
- </div>
39
- <div class="hint">${r} ${o}</div>
40
- </div>`}};e.formControlValidators=y,t([u("input")],e.prototype,"validationTarget",2),t([i({})],e.prototype,"name",2),t([i({})],e.prototype,"type",2),t([i({reflect:!0})],e.prototype,"label",2),t([i({})],e.prototype,"placeholder",2),t([i()],e.prototype,"value",2),t([i({type:Boolean})],e.prototype,"required",2),t([i({type:Number})],e.prototype,"minlength",2),t([i({type:Number})],e.prototype,"maxlength",2),t([i({type:Number})],e.prototype,"min",2),t([i({type:Number})],e.prototype,"max",2),t([i({type:Number})],e.prototype,"step",2),t([i({type:String})],e.prototype,"icon",2),t([i({type:String,reflect:!0})],e.prototype,"size",2),t([i({type:Boolean,reflect:!0})],e.prototype,"disabled",2),t([i({type:Boolean,attribute:"label-fixed",reflect:!0})],e.prototype,"labelFixed",2),t([i({type:String,attribute:"invalid-text"})],e.prototype,"customInvalidText",2),t([i({type:String,attribute:"help-text",reflect:!0})],e.prototype,"helpText",2),t([d("bl-change")],e.prototype,"onChange",2),t([d("bl-input")],e.prototype,"onInput",2),t([d("bl-invalid")],e.prototype,"onInvalid",2),t([s()],e.prototype,"dirty",2),t([s()],e.prototype,"passwordVisible",2),t([s()],e.prototype,"passwordInput",2),e=t([b("bl-input")],e);export{e as a};
41
- //# sourceMappingURL=chunk-RC4ECOUE.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../node_modules/@open-wc/form-helpers/src/index.ts", "../src/components/input/bl-input.css", "../src/components/input/bl-input.ts"],
4
- "sourcesContent": [null, "import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-border);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--height:var(--bl-size-2xl);--input-font:var(--bl-font-body-text-2);--line-height:var(--bl-font-body-text-2-line-height);--icon-size:var(--line-height);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);display:flex;flex-direction:column;position:relative;gap:var(--bl-size-3xs)}.wrapper:focus-within{--border-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}.wrapper.dirty.invalid{--border-color:var(--bl-color-danger);--icon-color:var(--bl-color-danger)}:host([size='large']) .wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .wrapper{--height:var(--bl-size-xl);--input-font:var(--bl-font-body-text-3);--padding-vertical:var(--bl-size-3xs);--icon-size:var(--bl-font-body-text-3-line-height)}label{position:absolute;top:var(--padding-vertical);left:var(--padding-horizontal);right:var(--padding-horizontal);max-width:max-content;transition:all ease-in .2s;pointer-events:none;font:var(--input-font);color:var(--bl-color-content-tertiary);padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-wrapper{--border-size:1px;display:flex;box-sizing:border-box;gap:var(--padding-vertical);height:var(--height);border:solid var(--border-size) var(--border-color);padding:0 calc(var(--padding-horizontal) - var(--border-size));border-radius:4px}input{width:100%;align-self:stretch;outline:0;border:0;padding:0;font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent}.icon{display:flex;align-items:center;gap:8px;flex-basis:var(--icon-size);align-self:center;height:var(--icon-size)}bl-icon:not(.reveal-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button bl-icon{display:none}bl-icon[name='eye_on']{display:inline-block}.password-visible bl-icon[name='eye_on']{display:none}.password-visible bl-icon[name='eye_off']{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--bl-font-body-text-3);padding:0 var(--padding-horizontal)}.hint p{padding:0;margin:0}::placeholder{color:var(--bl-color-content-tertiary);-webkit-text-fill-color:var(--bl-color-content-tertiary)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out .4s}:host([label-fixed]) ::placeholder,:host .wrapper:focus-within ::placeholder{color:var(--bl-color-content-tertiary);-webkit-text-fill-color:var(--bl-color-content-tertiary)}:host([disabled]) .input-wrapper{cursor:not-allowed;background-color:var(--bl-color-secondary-background);--text-color:var(--bl-color-content-passive)}input:disabled{cursor:not-allowed}:where(.wrapper:focus-within,.wrapper.has-value) label{--label-padding:var(--bl-size-3xs);top:0;left:calc(var(--padding-horizontal) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0 var(--label-padding);background-color:var(--bl-color-primary-background);pointer-events:initial}:where(.has-icon:not(:focus-within),.has-icon:not(.has-value)) label{right:calc(var(--padding-horizontal) + var(--icon-size) + var(--padding-vertical))}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.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}`;\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 { FormControlMixin } from '@open-wc/form-control';\nimport { submit } from '@open-wc/form-helpers';\nimport { live } from 'lit/directives/live.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport { innerInputValidators } from '../../utilities/form-control';\nimport 'element-internals-polyfill';\nimport '../icon/bl-icon';\nimport '../button/bl-button';\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 FormControlMixin(LitElement) {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n static formControlValidators = innerInputValidators;\n\n @query('input')\n validationTarget: HTMLInputElement;\n\n /**\n * Sets name of the input\n */\n @property({})\n name?: string;\n\n /**\n * Type of the input. It's used to set `type` attribute of native input inside. Only `text`, `number` and `password` is supported for now.\n */\n @property({})\n type: 'text' | 'password' | 'number' = 'text';\n\n /**\n * Sets label of the input\n */\n @property({ reflect: true })\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 = '';\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 increase and decrease step to a `number` input\n */\n @property({ type: Number })\n step?: 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', reflect: true })\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', reflect: true })\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 * Fires when the value of an input element has been changed.\n */\n @event('bl-invalid') private onInvalid: EventDispatcher<ValidityState>;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('keydown', this.onKeydown);\n this.addEventListener('invalid', this.onError);\n\n this.internals.form?.addEventListener('submit', () => {\n this.reportValidity();\n });\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this.onKeydown);\n this.removeEventListener('invalid', this.onError);\n }\n\n private onKeydown = (event: KeyboardEvent): void => {\n if (event.code === 'Enter' && this.form) {\n submit(this.form);\n }\n };\n\n private onError = (): void => {\n this.onInvalid(this.internals.validity);\n };\n\n @state() private dirty = false;\n\n @state() private passwordVisible = false;\n\n @state() private passwordInput = false;\n\n private textVisiblityToggle() {\n this.passwordVisible = !this.passwordVisible;\n }\n\n validityCallback(): string | void {\n return this.customInvalidText || this.validationTarget?.validationMessage;\n }\n\n reportValidity() {\n this.dirty = true;\n return this.checkValidity();\n }\n\n valueChangedCallback(value: string): void {\n this.value = value;\n }\n\n private inputHandler(event: Event) {\n const value = (event.target as HTMLInputElement).value;\n\n this.setValue(value);\n this.onInput(value);\n }\n\n private changeHandler(event: Event) {\n const value = (event.target as HTMLInputElement).value;\n\n this.dirty = true;\n this.setValue(value);\n this.onChange(value);\n }\n\n firstUpdated() {\n this.passwordInput = this.type === 'password';\n this.setValue(this.value);\n }\n\n render(): TemplateResult {\n const invalidMessage = !this.checkValidity()\n ? html`<p id=\"errorMessage\" aria-live=\"polite\" class=\"invalid-text\">\n ${this.validationMessage}\n </p>`\n : ``;\n const helpMessage = this.helpText\n ? html`<p id=\"helpText\" class=\"help-text\">${this.helpText}</p>`\n : ``;\n\n const icon = this.icon ? html`<bl-icon class=\"custom-icon\" name=\"${this.icon}\"></bl-icon>` : '';\n const label = this.label ? html`<label for=\"input\">${this.label}</label>` : '';\n\n const revealButton = this.passwordInput\n ? html`<bl-button\n size=\"small\"\n kind=\"neutral\"\n variant=\"tertiary\"\n class=\"${classMap({\n 'reveal-button': true,\n 'password-visible': this.passwordVisible,\n })}\"\n aria-label=\"Toggle password reveal\"\n @bl-click=\"${this.textVisiblityToggle}\"\n >\n <bl-icon class=\"reveal-icon\" slot=\"icon\" name=\"eye_on\"></bl-icon>\n <bl-icon class=\"reveal-icon\" slot=\"icon\" name=\"eye_off\"></bl-icon>\n </bl-button>`\n : '';\n\n const classes = {\n 'wrapper': true,\n 'dirty': this.dirty,\n 'invalid': !this.checkValidity(),\n 'has-icon': this.passwordInput || this.icon || (this.dirty && !this.checkValidity()),\n 'has-value': this.value !== null && this.value !== '',\n };\n\n const passwordType = this.passwordVisible ? 'text' : 'password';\n const inputType = this.passwordInput ? passwordType : this.type;\n\n return html`<div class=${classMap(classes)}>\n ${label}\n <div class=\"input-wrapper\">\n <input\n id=\"input\"\n type=${inputType}\n .value=${live(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 step=\"${ifDefined(this.step)}\"\n ?required=${this.required}\n ?disabled=${this.disabled}\n @change=${this.changeHandler}\n @input=${this.inputHandler}\n aria-invalid=${this.checkValidity() ? 'false' : 'true'}\n aria-describedby=${ifDefined(this.helpText ? 'helpText' : undefined)}\n aria-errormessage=${ifDefined(this.checkValidity() ? undefined : 'errorMessage')}\n />\n <div class=\"icon\">\n ${revealButton} ${icon}\n <bl-icon class=\"error-icon\" name=\"alert\"></bl-icon>\n </div>\n </div>\n <div class=\"hint\">${invalidMessage} ${helpMessage}</div>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-input': BlInput;\n }\n}\n"],
5
- "mappings": "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",
6
- "names": ["submit", "form", "submitEvent", "styles", "r", "bl_input_default", "BlInput", "FormControlMixin", "s", "event", "submit", "bl_input_default", "_a", "value", "invalidMessage", "$", "helpMessage", "icon", "label", "revealButton", "o", "classes", "passwordType", "inputType", "l", "innerInputValidators", "__decorateClass", "i", "e", "t", "n"]
7
- }
@@ -1,19 +0,0 @@
1
- import{a as m}from"./chunk-ENFFFE4I.js";import{a}from"./chunk-2TVOKUHE.js";import{a as u}from"./chunk-23UFIOHV.js";import{a as b,b as n,f as d,g as v,h as r,i as h,j as p}from"./chunk-HG7OBTQS.js";import{a as t}from"./chunk-NZ3RGSR6.js";var y=b`:host{display:var(--bl-button-display,inline-block);max-width:100%;position:relative}.button{--main-color:var(--bl-color-primary);--main-hover-color:var(--bl-color-primary-hover);--text-hover-color:var(--bl-color-secondary-background);--content-color:var(--bl-color-content-primary-contrast);--bg-color:var(--main-color);--border-color:var(--main-color);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-m);--margin-icon:var(--padding-vertical);--icon-size:var(--bl-size-m);--font:var(--bl-font-title-3-medium);--height:var(--bl-size-2xl);display:flex;gap:var(--margin-icon);justify-content:var(--bl-button-justify,center);align-items:center;box-sizing:border-box;width:100%;height:var(--height);border:solid 1px var(--border-color);border-radius:6px;text-decoration:none;padding:var(--padding-vertical) var(--padding-horizontal);cursor:pointer;background-color:var(--bg-color);color:var(--content-color);font:var(--font);font-kerning:none;user-select:none}:host(:hover) .button,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .button{--bg-color:var(--main-hover-color);--border-color:var(--main-hover-color)}.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([size='small']) .button{--font:var(--bl-font-title-4-medium);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-2xs);--icon-size:var(--bl-size-s);--height:var(--bl-size-xl)}:host([size='large']) .button{--font:var(--bl-font-title-3-medium);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-xl);--margin-icon:var(--bl-size-2xs);--height:var(--bl-size-3xl)}.button:focus{outline:0}.button:focus-visible{position:relative;outline:0}.button:focus-visible::after{border:2px solid var(--main-color);border-radius:var(--bl-border-radius-l);content:"";position:absolute;inset:-4px}:host ::slotted(bl-icon){font-size:var(--icon-size)}:host .has-icon:not(.has-content){--padding-horizontal:var(--padding-vertical);--margin-icon:0}:host([variant='secondary']) .button{--bg-color:transparent;--content-color:var(--main-color)}:host([variant='tertiary']) .button{--content-color:var(--main-color);--border-color:transparent;--bg-color:transparent}:host([kind='neutral']) .button{--main-color:var(--bl-color-secondary);--main-hover-color:var(--bl-color-secondary-hover)}:host([kind='success']) .button{--main-color:var(--bl-color-success);--main-hover-color:var(--bl-color-success-hover)}:host([kind='danger']) .button{--main-color:var(--bl-color-danger);--main-hover-color:var(--bl-color-danger-hover)}:host([disabled]){cursor:not-allowed}:host([disabled]) .button{--main-color:var(--bl-color-tertiary);--main-hover-color:var(--bl-color-tertiary);--content-color:var(--bl-color-content-passive);--bg-color:var(--main-color);pointer-events:none;text-decoration:none}:host([variant='tertiary'][disabled]) .button{--main-color:transparent}:host([variant='secondary']:hover:not([disabled])) .button,:host([variant='secondary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])) .button{--content-color:var(--bl-color-content-primary-contrast);--bg-color:var(--main-hover-color)}:host([variant='tertiary']:hover:not([disabled])) .button,:host([variant='tertiary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])) .button{--content-color:var(--main-hover-color);--bg-color:var(--text-hover-color)}:host([dropdown]) .open{display:none}:host([dropdown]) .active .open{display:inline-block}:host([dropdown]) .active .close{display:none}:host .active.button{--bg-color:var(--main-hover-color);--border-color:var(--main-hover-color)}:host([variant='secondary']) .active.button{--content-color:var(--bl-color-content-primary-contrast);--bg-color:var(--main-hover-color)}:host([variant='tertiary']) .active.button{--content-color:var(--main-color);--bg-color:var(--bl-color-tertiary);--border-color:transparent}`,g=y;var o=class extends d{constructor(){super(...arguments);this.variant="primary";this.kind="default";this.size="medium";this.disabled=!1;this.target="_self";this.dropdown=!1;this.active=!1}static get styles(){return[g]}get _isActive(){return this.active}caretTemplate(){return n` <bl-icon class="open" name="arrow_up"></bl-icon>
2
- <bl-icon class="close" name="arrow_down"></bl-icon>`}_handleClick(){this.onClick("Click event fired!")}focus(){this.button.focus()}get _hasIconSlot(){return this.querySelector(':scope > [slot="icon"]')!==null}get _hasDefaultSlot(){return[...this.childNodes].some(e=>{var l;let i=e.nodeType;return i===e.TEXT_NODE&&((l=e.textContent)==null?void 0:l.trim())!==""||i===e.ELEMENT_NODE&&!e.hasAttribute("slot")})}render(){let s=!!this.href,e=this.icon?n`<bl-icon name=${this.icon}></bl-icon>`:"",i=n`<slot name="icon">${e}</slot> <span class="label"><slot></slot></span>`,l=this.dropdown?this.caretTemplate():"",c=m({button:!0,"has-icon":this.icon||this._hasIconSlot,"has-content":this._hasDefaultSlot,active:!s&&this._isActive});return s?n`<a
3
- class=${c}
4
- aria-disabled="${a(this.disabled)}"
5
- aria-label="${a(this.label)}"
6
- href=${a(this.href)}
7
- target=${a(this.target)}
8
- role="button"
9
- >${i}
10
- </a>`:n`<button
11
- class=${c}
12
- aria-disabled="${a(this.disabled)}"
13
- aria-label="${a(this.label)}"
14
- ?disabled=${this.disabled}
15
- @click="${this._handleClick}"
16
- >
17
- ${i} ${l}
18
- </button>`}};t([r({type:String,reflect:!0})],o.prototype,"variant",2),t([r({type:String,reflect:!0})],o.prototype,"kind",2),t([r({type:String,reflect:!0})],o.prototype,"size",2),t([r({type:String})],o.prototype,"label",2),t([r({type:Boolean,reflect:!0})],o.prototype,"disabled",2),t([r({type:String})],o.prototype,"href",2),t([r({type:String})],o.prototype,"icon",2),t([r({type:String})],o.prototype,"target",2),t([r({type:String})],o.prototype,"type",2),t([r({type:Boolean})],o.prototype,"dropdown",2),t([h({})],o.prototype,"active",2),t([p(".button")],o.prototype,"button",2),t([u("bl-click")],o.prototype,"onClick",2),o=t([v("bl-button")],o);export{o as a};
19
- //# sourceMappingURL=chunk-YJKHLINY.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{display:var(--bl-button-display,inline-block);max-width:100%;position:relative}.button{--main-color:var(--bl-color-primary);--main-hover-color:var(--bl-color-primary-hover);--text-hover-color:var(--bl-color-secondary-background);--content-color:var(--bl-color-content-primary-contrast);--bg-color:var(--main-color);--border-color:var(--main-color);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-m);--margin-icon:var(--padding-vertical);--icon-size:var(--bl-size-m);--font:var(--bl-font-title-3-medium);--height:var(--bl-size-2xl);display:flex;gap:var(--margin-icon);justify-content:var(--bl-button-justify,center);align-items:center;box-sizing:border-box;width:100%;height:var(--height);border:solid 1px var(--border-color);border-radius:6px;text-decoration:none;padding:var(--padding-vertical) var(--padding-horizontal);cursor:pointer;background-color:var(--bg-color);color:var(--content-color);font:var(--font);font-kerning:none;user-select:none}:host(:hover) .button,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .button{--bg-color:var(--main-hover-color);--border-color:var(--main-hover-color)}.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([size='small']) .button{--font:var(--bl-font-title-4-medium);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-2xs);--icon-size:var(--bl-size-s);--height:var(--bl-size-xl)}:host([size='large']) .button{--font:var(--bl-font-title-3-medium);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-xl);--margin-icon:var(--bl-size-2xs);--height:var(--bl-size-3xl)}.button:focus{outline:0}.button:focus-visible{position:relative;outline:0}.button:focus-visible::after{border:2px solid var(--main-color);border-radius:var(--bl-border-radius-l);content:\"\";position:absolute;inset:-4px}:host ::slotted(bl-icon){font-size:var(--icon-size)}:host .has-icon:not(.has-content){--padding-horizontal:var(--padding-vertical);--margin-icon:0}:host([variant='secondary']) .button{--bg-color:transparent;--content-color:var(--main-color)}:host([variant='tertiary']) .button{--content-color:var(--main-color);--border-color:transparent;--bg-color:transparent}:host([kind='neutral']) .button{--main-color:var(--bl-color-secondary);--main-hover-color:var(--bl-color-secondary-hover)}:host([kind='success']) .button{--main-color:var(--bl-color-success);--main-hover-color:var(--bl-color-success-hover)}:host([kind='danger']) .button{--main-color:var(--bl-color-danger);--main-hover-color:var(--bl-color-danger-hover)}:host([disabled]){cursor:not-allowed}:host([disabled]) .button{--main-color:var(--bl-color-tertiary);--main-hover-color:var(--bl-color-tertiary);--content-color:var(--bl-color-content-passive);--bg-color:var(--main-color);pointer-events:none;text-decoration:none}:host([variant='tertiary'][disabled]) .button{--main-color:transparent}:host([variant='secondary']:hover:not([disabled])) .button,:host([variant='secondary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])) .button{--content-color:var(--bl-color-content-primary-contrast);--bg-color:var(--main-hover-color)}:host([variant='tertiary']:hover:not([disabled])) .button,:host([variant='tertiary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])) .button{--content-color:var(--main-hover-color);--bg-color:var(--text-hover-color)}:host([dropdown]) .open{display:none}:host([dropdown]) .active .open{display:inline-block}:host([dropdown]) .active .close{display:none}:host .active.button{--bg-color:var(--main-hover-color);--border-color:var(--main-hover-color)}:host([variant='secondary']) .active.button{--content-color:var(--bl-color-content-primary-contrast);--bg-color:var(--main-hover-color)}:host([variant='tertiary']) .active.button{--content-color:var(--main-color);--bg-color:var(--bl-color-tertiary);--border-color:transparent}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, state, query } 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' | 'tertiary';\nexport type ButtonKind = 'default' | 'neutral' | 'success' | 'danger';\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 * @cssproperty --bl-button-justify - Sets the justify-content property of button. Default value is 'center'.\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 = 'default';\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 * Sets the type of the button. Set `submit` to use button as the submitter of parent form.\n */\n @property({ type: String })\n type: 'submit' | null;\n\n /**\n * Sets button type to dropdown\n */\n @property({ type: Boolean })\n dropdown = false;\n\n /**\n * Active state\n */\n @state({})\n active = false;\n\n @query('.button')\n private button: HTMLAnchorElement | HTMLButtonElement;\n\n /**\n * Fires when button clicked\n */\n @event('bl-click') private onClick: EventDispatcher<string>;\n\n private get _isActive() {\n return this.active;\n }\n\n private caretTemplate(): TemplateResult {\n return html` <bl-icon class=\"open\" name=\"arrow_up\"></bl-icon>\n <bl-icon class=\"close\" name=\"arrow_down\"></bl-icon>`;\n }\n\n private _handleClick() {\n this.onClick('Click event fired!');\n }\n\n focus() {\n this.button.focus();\n }\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 caret = this.dropdown ? this.caretTemplate() : '';\n const classes = classMap({\n 'button': true,\n 'has-icon': this.icon || this._hasIconSlot,\n 'has-content': this._hasDefaultSlot,\n 'active': !isAnchor && this._isActive,\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}\n </a>`\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} ${caret}\n </button>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-button': BlButton;\n }\n}\n"],
5
- "mappings": "6OACO,IAAMA,EAASC,mxHACfC,EAAQF,ECoBf,IAAqBG,EAArB,cAAsCC,CAAW,CAAjD,kCASE,aAAyB,UAMzB,UAAmB,UAMnB,UAAmB,SAYnB,cAAW,GAkBX,YAAsB,QAYtB,cAAW,GAMX,YAAS,GApET,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CA4EA,IAAY,WAAY,CACtB,OAAO,KAAK,MACd,CAEQ,eAAgC,CACtC,OAAOC;AAAA,0DAET,CAEQ,cAAe,CACrB,KAAK,QAAQ,oBAAoB,CACnC,CAEA,OAAQ,CACN,KAAK,OAAO,MAAM,CACpB,CAEA,IAAI,cAAe,CACjB,OAAO,KAAK,cAAc,wBAAwB,IAAM,IAC1D,CAEA,IAAI,iBAAkB,CAEpB,MADmB,CAAC,GAAG,KAAK,UAAU,EACpB,KAAKC,GAAQ,CA5HnC,IAAAC,EA6HM,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,KAAOL,kBAAqB,KAAK,kBAAoB,GACjEM,EAAQN,sBAAyBK,oDACjCE,EAAQ,KAAK,SAAW,KAAK,cAAc,EAAI,GAC/CC,EAAUC,EAAS,CACvB,OAAU,GACV,WAAY,KAAK,MAAQ,KAAK,aAC9B,cAAe,KAAK,gBACpB,OAAU,CAACL,GAAY,KAAK,SAC9B,CAAC,EAED,OAAOA,EACHJ;AAAA,kBACUQ;AAAA,2BACSE,EAAU,KAAK,QAAQ;AAAA,wBAC1BA,EAAU,KAAK,KAAK;AAAA,iBAC3BA,EAAU,KAAK,IAAI;AAAA,mBACjBA,EAAU,KAAK,MAAM;AAAA;AAAA,aAE3BJ;AAAA,cAELN;AAAA,kBACUQ;AAAA,2BACSE,EAAU,KAAK,QAAQ;AAAA,wBAC1BA,EAAU,KAAK,KAAK;AAAA,sBACtB,KAAK;AAAA,oBACP,KAAK;AAAA;AAAA,YAEbJ,KAASC;AAAA,kBAEnB,CACF,EA7IEI,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GARtBf,EASnB,uBAMAc,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAdtBf,EAenB,oBAMAc,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GApBtBf,EAqBnB,oBAMAc,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GA1BPf,EA2BnB,qBAMAc,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAhCvBf,EAiCnB,wBAMAc,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAtCPf,EAuCnB,oBAMAc,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GA5CPf,EA6CnB,oBAMAc,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAlDPf,EAmDnB,sBAMAc,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAxDPf,EAyDnB,oBAMAc,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,CAAC,GA9DRf,EA+DnB,wBAMAc,EAAA,CADCE,EAAM,CAAC,CAAC,GApEUhB,EAqEnB,sBAGQc,EAAA,CADPG,EAAM,SAAS,GAvEGjB,EAwEX,sBAKmBc,EAAA,CAA1BI,EAAM,UAAU,GA7EElB,EA6EQ,uBA7ERA,EAArBc,EAAA,CADCK,EAAc,WAAW,GACLnB",
6
- "names": ["styles", "r", "bl_button_default", "BlButton", "s", "bl_button_default", "$", "node", "_a", "nodeType", "isAnchor", "icon", "slots", "caret", "classes", "o", "l", "__decorateClass", "e", "t", "i", "event", "n"]
7
- }