@trendyol/baklava 2.0.0-beta.34 → 2.0.0-beta.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,3 +1,5 @@
1
+ ![image](https://user-images.githubusercontent.com/127687/194415334-0dc8fbf2-3e87-44ed-b23a-0cc9da767b11.png)
2
+
1
3
  # Baklava Design System
2
4
 
3
5
  [![npm package](https://img.shields.io/npm/v/@trendyol/baklava/beta.svg)](https://www.npmjs.com/package/@trendyol/baklava) [![jsDelivr hits (npm scoped)](https://img.shields.io/jsdelivr/npm/hm/@trendyol/baklava)](https://www.jsdelivr.com/package/npm/@trendyol/baklava) [![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)
@@ -1,4 +1,4 @@
1
- import"./chunk-NZ3RGSR6.js";import o from"react";var v=new Set(["children","localName","ref","style","className"]),E=new WeakMap,f=(a,d,p,u,h)=>{let g=h==null?void 0:h[d];g!==void 0?p!==u&&((r,n,i)=>{let s=E.get(r);s===void 0&&E.set(r,s=new Map);let t=s.get(n);i!==void 0?t===void 0?(s.set(n,t={handleEvent:i}),r.addEventListener(n,t)):t.handleEvent=i:t!==void 0&&(s.delete(n),r.removeEventListener(n,t))})(a,g,p):a[d]=p},e=(a,d,p,u,h)=>{let g=a.Component,r=a.createElement,n=new Set(Object.keys(u!=null?u:{}));for(let t in p.prototype)t in HTMLElement.prototype||(v.has(t)?console.warn(`${d} contains property ${t} which is a React reserved property. It will be used by React and not set on the element.`):n.add(t));class i extends g{constructor(){super(...arguments),this.o=null}t(l){if(this.o!==null)for(let b in this.i)f(this.o,b,this.props[b],l?l[b]:void 0,u)}componentDidMount(){this.t()}componentDidUpdate(l){this.t(l)}render(){let l=this.props._$Gl;this.h!==void 0&&this.u===l||(this.h=c=>{this.o===null&&(this.o=c),l!==null&&((m,x)=>{typeof m=="function"?m(x):m.current=x})(l,c),this.u=l});let b={ref:this.h};this.i={};for(let[c,m]of Object.entries(this.props))c!=="__forwardedRef"&&(n.has(c)?this.i[c]=m:b[c==="className"?"class":c]=m);return r(d,b)}}i.displayName=h!=null?h:p.name;let s=a.forwardRef((t,l)=>r(i,{...t,_$Gl:l},t==null?void 0:t.children));return s.displayName=i.displayName,s};var S=e(o,"bl-alert",customElements.get("bl-alert"),{onClose:"bl-close"}),I=e(o,"bl-badge",customElements.get("bl-badge"),{}),N=e(o,"bl-button",customElements.get("bl-button"),{onClick:"bl-click"}),R=e(o,"bl-checkbox",customElements.get("bl-checkbox"),{onChange:"bl-checkbox-change"}),T=e(o,"bl-icon",customElements.get("bl-icon"),{onLoad:"bl-load",onError:"bl-error"}),L=e(o,"bl-input",customElements.get("bl-input"),{onChange:"bl-change",onInput:"bl-input",onInvalid:"bl-invalid"}),M=e(o,"bl-progress-indicator",customElements.get("bl-progress-indicator"),{}),O=e(o,"bl-select",customElements.get("bl-select"),{onSelect:"bl-select"}),_=e(o,"bl-tab-group",customElements.get("bl-tab-group"),{}),$=e(o,"bl-tooltip",customElements.get("bl-tooltip"),{onShow:"bl-tooltip-show",onHide:"bl-tooltip-hide"}),G=e(o,"bl-select-option",customElements.get("bl-select-option"),{onOption:"bl-select-option"}),j=e(o,"bl-tab",customElements.get("bl-tab"),{onSelected:"bl-tab-selected"}),D=e(o,"bl-tab-panel",customElements.get("bl-tab-panel"),{});export{S as BlAlert,I as BlBadge,N as BlButton,R as BlCheckbox,T as BlIcon,L as BlInput,M as BlProgressIndicator,O as BlSelect,G as BlSelectOption,j as BlTab,_ as BlTabGroup,D as BlTabPanel,$ as BlTooltip};
1
+ import"./chunk-NZ3RGSR6.js";import o from"react";var v=new Set(["children","localName","ref","style","className"]),E=new WeakMap,f=(a,d,p,h,u)=>{let g=u==null?void 0:u[d];g!==void 0?p!==h&&((r,l,i)=>{let s=E.get(r);s===void 0&&E.set(r,s=new Map);let t=s.get(l);i!==void 0?t===void 0?(s.set(l,t={handleEvent:i}),r.addEventListener(l,t)):t.handleEvent=i:t!==void 0&&(s.delete(l),r.removeEventListener(l,t))})(a,g,p):a[d]=p},e=(a,d,p,h,u)=>{let g=a.Component,r=a.createElement,l=new Set(Object.keys(h!=null?h:{}));for(let t in p.prototype)t in HTMLElement.prototype||(v.has(t)?console.warn(`${d} contains property ${t} which is a React reserved property. It will be used by React and not set on the element.`):l.add(t));class i extends g{constructor(){super(...arguments),this.o=null}t(n){if(this.o!==null)for(let b in this.i)f(this.o,b,this.props[b],n?n[b]:void 0,h)}componentDidMount(){this.t()}componentDidUpdate(n){this.t(n)}render(){let n=this.props._$Gl;this.h!==void 0&&this.u===n||(this.h=c=>{this.o===null&&(this.o=c),n!==null&&((m,x)=>{typeof m=="function"?m(x):m.current=x})(n,c),this.u=n});let b={ref:this.h};this.i={};for(let[c,m]of Object.entries(this.props))c!=="__forwardedRef"&&(l.has(c)?this.i[c]=m:b[c==="className"?"class":c]=m);return r(d,b)}}i.displayName=u!=null?u:p.name;let s=a.forwardRef((t,n)=>r(i,{...t,_$Gl:n},t==null?void 0:t.children));return s.displayName=i.displayName,s};var S=e(o,"bl-alert",customElements.get("bl-alert"),{onClose:"bl-close"}),I=e(o,"bl-badge",customElements.get("bl-badge"),{}),N=e(o,"bl-button",customElements.get("bl-button"),{onClick:"bl-click"}),R=e(o,"bl-checkbox",customElements.get("bl-checkbox"),{onChange:"bl-checkbox-change"}),T=e(o,"bl-icon",customElements.get("bl-icon"),{onLoad:"bl-load",onError:"bl-error"}),L=e(o,"bl-input",customElements.get("bl-input"),{onChange:"bl-change",onInput:"bl-input",onInvalid:"bl-invalid"}),M=e(o,"bl-pagination",customElements.get("bl-pagination"),{onChange:"bl-change"}),O=e(o,"bl-progress-indicator",customElements.get("bl-progress-indicator"),{}),_=e(o,"bl-select",customElements.get("bl-select"),{onSelect:"bl-select"}),$=e(o,"bl-tab-group",customElements.get("bl-tab-group"),{}),G=e(o,"bl-tooltip",customElements.get("bl-tooltip"),{onShow:"bl-tooltip-show",onHide:"bl-tooltip-hide"}),P=e(o,"bl-select-option",customElements.get("bl-select-option"),{onOption:"bl-select-option"}),j=e(o,"bl-tab",customElements.get("bl-tab"),{onSelected:"bl-tab-selected"}),D=e(o,"bl-tab-panel",customElements.get("bl-tab-panel"),{});export{S as BlAlert,I as BlBadge,N as BlButton,R as BlCheckbox,T as BlIcon,L as BlInput,M as BlPagination,O as BlProgressIndicator,_ as BlSelect,P as BlSelectOption,j as BlTab,$ as BlTabGroup,D as BlTabPanel,G as BlTooltip};
2
2
  /**
3
3
  * @license
4
4
  * Copyright 2018 Google LLC
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/baklava-react.ts", "../node_modules/@lit-labs/react/src/create-component.ts"],
4
- "sourcesContent": ["/* eslint-disable @typescript-eslint/ban-ts-comment */\n// @ts-nocheck\nimport React from 'react';\nimport { createComponent } from '@lit-labs/react';\n\nexport const BlAlert = createComponent(\n React,\n 'bl-alert',\n customElements.get('bl-alert'),\n { onClose: 'bl-close' }\n);\n\nexport const BlBadge = createComponent(\n React,\n 'bl-badge',\n customElements.get('bl-badge'),\n {}\n);\n\nexport const BlButton = createComponent(\n React,\n 'bl-button',\n customElements.get('bl-button'),\n { onClick: 'bl-click' }\n);\n\nexport const BlCheckbox = createComponent(\n React,\n 'bl-checkbox',\n customElements.get('bl-checkbox'),\n { onChange: 'bl-checkbox-change' }\n);\n\nexport const BlIcon = createComponent(\n React,\n 'bl-icon',\n customElements.get('bl-icon'),\n { onLoad: 'bl-load', onError: 'bl-error' }\n);\n\nexport const BlInput = createComponent(\n React,\n 'bl-input',\n customElements.get('bl-input'),\n { onChange: 'bl-change', onInput: 'bl-input', onInvalid: 'bl-invalid' }\n);\n\nexport const BlProgressIndicator = createComponent(\n React,\n 'bl-progress-indicator',\n customElements.get('bl-progress-indicator'),\n {}\n);\n\nexport const BlSelect = createComponent(\n React,\n 'bl-select',\n customElements.get('bl-select'),\n { onSelect: 'bl-select' }\n);\n\nexport const BlTabGroup = createComponent(\n React,\n 'bl-tab-group',\n customElements.get('bl-tab-group'),\n {}\n);\n\nexport const BlTooltip = createComponent(\n React,\n 'bl-tooltip',\n customElements.get('bl-tooltip'),\n { onShow: 'bl-tooltip-show', onHide: 'bl-tooltip-hide' }\n);\n\nexport const BlSelectOption = createComponent(\n React,\n 'bl-select-option',\n customElements.get('bl-select-option'),\n { onOption: 'bl-select-option' }\n);\n\nexport const BlTab = createComponent(\n React,\n 'bl-tab',\n customElements.get('bl-tab'),\n { onSelected: 'bl-tab-selected' }\n);\n\nexport const BlTabPanel = createComponent(\n React,\n 'bl-tab-panel',\n customElements.get('bl-tab-panel'),\n {}\n);\n", "/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nconst reservedReactProperties = new Set([\n 'children',\n 'localName',\n 'ref',\n 'style',\n 'className',\n]);\n\nconst listenedEvents: WeakMap<\n Element,\n Map<string, EventListenerObject>\n> = new WeakMap();\n\n/**\n * Adds an event listener for the specified event to the given node. In the\n * React setup, there should only ever be one event listener. Thus, for\n * efficiency only one listener is added and the handler for that listener is\n * updated to point to the given listener function.\n */\nconst addOrUpdateEventListener = (\n node: Element,\n event: string,\n listener: (event?: Event) => void\n) => {\n let events = listenedEvents.get(node);\n if (events === undefined) {\n listenedEvents.set(node, (events = new Map()));\n }\n let handler = events.get(event);\n if (listener !== undefined) {\n // If necessary, add listener and track handler\n if (handler === undefined) {\n events.set(event, (handler = {handleEvent: listener}));\n node.addEventListener(event, handler);\n // Otherwise just update the listener with new value\n } else {\n handler.handleEvent = listener;\n }\n // Remove listener if one exists and value is undefined\n } else if (handler !== undefined) {\n events.delete(event);\n node.removeEventListener(event, handler);\n }\n};\n\n/**\n * Sets properties and events on custom elements. These properties and events\n * have been pre-filtered so we know they should apply to the custom element.\n */\nconst setProperty = <E extends Element>(\n node: E,\n name: string,\n value: unknown,\n old: unknown,\n events?: Events\n) => {\n const event = events?.[name];\n if (event !== undefined) {\n // Dirty check event value.\n if (value !== old) {\n addOrUpdateEventListener(node, event, value as (e?: Event) => void);\n }\n } else {\n // But don't dirty check properties; elements are assumed to do this.\n node[name as keyof E] = value as E[keyof E];\n }\n};\n\n// Set a React ref. Note, there are 2 kinds of refs and there's no built in\n// React API to set a ref.\nconst setRef = (ref: React.Ref<unknown>, value: Element | null) => {\n if (typeof ref === 'function') {\n (ref as (e: Element | null) => void)(value);\n } else {\n (ref as {current: Element | null}).current = value;\n }\n};\n\ntype Constructor<T> = {new (): T};\n\n/***\n * Typecast that curries an Event type through a string. The goal of the type\n * cast is to match a prop name to a typed event callback.\n */\nexport type EventName<T extends Event = Event> = string & {\n __event_type: T;\n};\n\ntype Events = Record<string, EventName | string>;\n\ntype EventProps<R extends Events> = {\n [K in keyof R]: R[K] extends EventName\n ? (e: R[K]['__event_type']) => void\n : (e: Event) => void;\n};\n\n/**\n * Creates a React component for a custom element. Properties are distinguished\n * from attributes automatically, and events can be configured so they are\n * added to the custom element as event listeners.\n *\n * @param React The React module, typically imported from the `react` npm\n * package.\n * @param tagName The custom element tag name registered via\n * `customElements.define`.\n * @param elementClass The custom element class registered via\n * `customElements.define`.\n * @param events An object listing events to which the component can listen. The\n * object keys are the event property names passed in via React props and the\n * object values are the names of the corresponding events generated by the\n * custom element. For example, given `{onactivate: 'activate'}` an event\n * function may be passed via the component's `onactivate` prop and will be\n * called when the custom element fires its `activate` event.\n * @param displayName A React component display name, used in debugging\n * messages. Default value is inferred from the name of custom element class\n * registered via `customElements.define`.\n */\nexport const createComponent = <I extends HTMLElement, E extends Events = {}>(\n React: typeof window.React,\n tagName: string,\n elementClass: Constructor<I>,\n events?: E,\n displayName?: string\n) => {\n const Component = React.Component;\n const createElement = React.createElement;\n\n // Props the user is allowed to use, includes standard attributes, children,\n // ref, as well as special event and element properties.\n type ReactProps = Omit<React.HTMLAttributes<I>, keyof E>;\n type ElementWithoutPropsOrEvents = Omit<I, keyof E | keyof ReactProps>;\n type UserProps = Partial<\n ReactProps & ElementWithoutPropsOrEvents & EventProps<E>\n >;\n\n // Props used by this component wrapper. This is the UserProps and the\n // special `__forwardedRef` property. Note, this ref is special because\n // it's both needed in this component to get access to the rendered element\n // and must fulfill any ref passed by the user.\n type ComponentProps = UserProps & {\n __forwardedRef?: React.Ref<unknown>;\n };\n\n // Set of properties/events which should be specially handled by the wrapper\n // and not handled directly by React.\n const elementClassProps = new Set(Object.keys(events ?? {}));\n for (const p in elementClass.prototype) {\n if (!(p in HTMLElement.prototype)) {\n if (reservedReactProperties.has(p)) {\n // Note, this effectively warns only for `ref` since the other\n // reserved props are on HTMLElement.prototype. To address this\n // would require crawling down the prototype, which doesn't feel worth\n // it since implementing these properties on an element is extremely\n // rare.\n console.warn(\n `${tagName} contains property ${p} which is a React ` +\n `reserved property. It will be used by React and not set on ` +\n `the element.`\n );\n } else {\n elementClassProps.add(p);\n }\n }\n }\n\n class ReactComponent extends Component<ComponentProps> {\n private _element: I | null = null;\n private _elementProps!: {[index: string]: unknown};\n private _userRef?: React.Ref<unknown>;\n private _ref?: React.RefCallback<I>;\n\n static displayName = displayName ?? elementClass.name;\n\n private _updateElement(oldProps?: ComponentProps) {\n if (this._element === null) {\n return;\n }\n // Set element properties to the values in `this.props`\n for (const prop in this._elementProps) {\n setProperty(\n this._element,\n prop,\n this.props[prop as keyof ComponentProps],\n oldProps ? oldProps[prop as keyof ComponentProps] : undefined,\n events\n );\n }\n // Note, the spirit of React might be to \"unset\" any old values that\n // are no longer included; however, there's no reasonable value to set\n // them to so we just leave the previous state as is.\n }\n\n /**\n * Updates element properties correctly setting properties\n * on mount.\n */\n override componentDidMount() {\n this._updateElement();\n }\n\n /**\n * Updates element properties correctly setting properties\n * on every update. Note, this does not include mount.\n */\n override componentDidUpdate(old: ComponentProps) {\n this._updateElement(old);\n }\n\n /**\n * Renders the custom element with a `ref` prop which allows this\n * component to reference the custom element.\n *\n * Standard attributes are passed to React and element properties and events\n * are updated in componentDidMount/componentDidUpdate.\n *\n */\n override render() {\n // Since refs only get fulfilled once, pass a new one if the user's\n // ref changed. This allows refs to be fulfilled as expected, going from\n // having a value to null.\n const userRef = this.props.__forwardedRef as React.Ref<unknown>;\n if (this._ref === undefined || this._userRef !== userRef) {\n this._ref = (value: I | null) => {\n if (this._element === null) {\n this._element = value;\n }\n if (userRef !== null) {\n setRef(userRef, value);\n }\n this._userRef = userRef;\n };\n }\n // Filters class properties out and passes the remaining\n // attributes to React. This allows attributes to use framework rules\n // for setting attributes and render correctly under SSR.\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const props: any = {ref: this._ref};\n // Note, save element props while iterating to avoid the need to\n // iterate again when setting properties.\n this._elementProps = {};\n for (const [k, v] of Object.entries(this.props)) {\n if (k === '__forwardedRef') continue;\n\n if (elementClassProps.has(k)) {\n this._elementProps[k] = v;\n } else {\n // React does *not* handle `className` for custom elements so\n // coerce it to `class` so it's handled correctly.\n props[k === 'className' ? 'class' : k] = v;\n }\n }\n return createElement(tagName, props);\n }\n }\n\n const ForwardedComponent = React.forwardRef(\n (props?: UserProps, ref?: React.Ref<unknown>) =>\n createElement(\n ReactComponent,\n {...props, __forwardedRef: ref} as ComponentProps,\n props?.children\n )\n );\n\n // To ease debugging in the React Developer Tools\n ForwardedComponent.displayName = ReactComponent.displayName;\n\n return ForwardedComponent;\n};\n"],
5
- "mappings": "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",
6
- "names": ["React", "reservedReactProperties", "Set", "listenedEvents", "WeakMap", "setProperty", "node", "name", "value", "old", "events", "event", "listener", "get", "set", "Map", "handler", "handleEvent", "addEventListener", "delete", "removeEventListener", "createComponent", "React", "tagName", "elementClass", "displayName", "Component", "createElement", "elementClassProps", "Object", "keys", "p", "prototype", "HTMLElement", "has", "console", "warn", "add", "ReactComponent", "constructor", "this", "_element", "_updateElement", "oldProps", "prop", "_elementProps", "props", "componentDidMount", "componentDidUpdate", "render", "userRef", "__forwardedRef", "_ref", "_userRef", "ref", "current", "k", "v", "entries", "ForwardedComponent", "forwardRef", "children", "BlAlert", "s", "React", "BlBadge", "BlButton", "BlCheckbox", "BlIcon", "BlInput", "BlProgressIndicator", "BlSelect", "BlTabGroup", "BlTooltip", "BlSelectOption", "BlTab", "BlTabPanel"]
4
+ "sourcesContent": ["/* eslint-disable @typescript-eslint/ban-ts-comment */\n// @ts-nocheck\nimport React from 'react';\nimport { createComponent } from '@lit-labs/react';\n\nexport const BlAlert = createComponent(\n React,\n 'bl-alert',\n customElements.get('bl-alert'),\n { onClose: 'bl-close' }\n);\n\nexport const BlBadge = createComponent(\n React,\n 'bl-badge',\n customElements.get('bl-badge'),\n {}\n);\n\nexport const BlButton = createComponent(\n React,\n 'bl-button',\n customElements.get('bl-button'),\n { onClick: 'bl-click' }\n);\n\nexport const BlCheckbox = createComponent(\n React,\n 'bl-checkbox',\n customElements.get('bl-checkbox'),\n { onChange: 'bl-checkbox-change' }\n);\n\nexport const BlIcon = createComponent(\n React,\n 'bl-icon',\n customElements.get('bl-icon'),\n { onLoad: 'bl-load', onError: 'bl-error' }\n);\n\nexport const BlInput = createComponent(\n React,\n 'bl-input',\n customElements.get('bl-input'),\n { onChange: 'bl-change', onInput: 'bl-input', onInvalid: 'bl-invalid' }\n);\n\nexport const BlPagination = createComponent(\n React,\n 'bl-pagination',\n customElements.get('bl-pagination'),\n { onChange: 'bl-change' }\n);\n\nexport const BlProgressIndicator = createComponent(\n React,\n 'bl-progress-indicator',\n customElements.get('bl-progress-indicator'),\n {}\n);\n\nexport const BlSelect = createComponent(\n React,\n 'bl-select',\n customElements.get('bl-select'),\n { onSelect: 'bl-select' }\n);\n\nexport const BlTabGroup = createComponent(\n React,\n 'bl-tab-group',\n customElements.get('bl-tab-group'),\n {}\n);\n\nexport const BlTooltip = createComponent(\n React,\n 'bl-tooltip',\n customElements.get('bl-tooltip'),\n { onShow: 'bl-tooltip-show', onHide: 'bl-tooltip-hide' }\n);\n\nexport const BlSelectOption = createComponent(\n React,\n 'bl-select-option',\n customElements.get('bl-select-option'),\n { onOption: 'bl-select-option' }\n);\n\nexport const BlTab = createComponent(\n React,\n 'bl-tab',\n customElements.get('bl-tab'),\n { onSelected: 'bl-tab-selected' }\n);\n\nexport const BlTabPanel = createComponent(\n React,\n 'bl-tab-panel',\n customElements.get('bl-tab-panel'),\n {}\n);\n", "/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nconst reservedReactProperties = new Set([\n 'children',\n 'localName',\n 'ref',\n 'style',\n 'className',\n]);\n\nconst listenedEvents: WeakMap<\n Element,\n Map<string, EventListenerObject>\n> = new WeakMap();\n\n/**\n * Adds an event listener for the specified event to the given node. In the\n * React setup, there should only ever be one event listener. Thus, for\n * efficiency only one listener is added and the handler for that listener is\n * updated to point to the given listener function.\n */\nconst addOrUpdateEventListener = (\n node: Element,\n event: string,\n listener: (event?: Event) => void\n) => {\n let events = listenedEvents.get(node);\n if (events === undefined) {\n listenedEvents.set(node, (events = new Map()));\n }\n let handler = events.get(event);\n if (listener !== undefined) {\n // If necessary, add listener and track handler\n if (handler === undefined) {\n events.set(event, (handler = {handleEvent: listener}));\n node.addEventListener(event, handler);\n // Otherwise just update the listener with new value\n } else {\n handler.handleEvent = listener;\n }\n // Remove listener if one exists and value is undefined\n } else if (handler !== undefined) {\n events.delete(event);\n node.removeEventListener(event, handler);\n }\n};\n\n/**\n * Sets properties and events on custom elements. These properties and events\n * have been pre-filtered so we know they should apply to the custom element.\n */\nconst setProperty = <E extends Element>(\n node: E,\n name: string,\n value: unknown,\n old: unknown,\n events?: Events\n) => {\n const event = events?.[name];\n if (event !== undefined) {\n // Dirty check event value.\n if (value !== old) {\n addOrUpdateEventListener(node, event, value as (e?: Event) => void);\n }\n } else {\n // But don't dirty check properties; elements are assumed to do this.\n node[name as keyof E] = value as E[keyof E];\n }\n};\n\n// Set a React ref. Note, there are 2 kinds of refs and there's no built in\n// React API to set a ref.\nconst setRef = (ref: React.Ref<unknown>, value: Element | null) => {\n if (typeof ref === 'function') {\n (ref as (e: Element | null) => void)(value);\n } else {\n (ref as {current: Element | null}).current = value;\n }\n};\n\ntype Constructor<T> = {new (): T};\n\n/***\n * Typecast that curries an Event type through a string. The goal of the type\n * cast is to match a prop name to a typed event callback.\n */\nexport type EventName<T extends Event = Event> = string & {\n __event_type: T;\n};\n\ntype Events = Record<string, EventName | string>;\n\ntype EventProps<R extends Events> = {\n [K in keyof R]: R[K] extends EventName\n ? (e: R[K]['__event_type']) => void\n : (e: Event) => void;\n};\n\n/**\n * Creates a React component for a custom element. Properties are distinguished\n * from attributes automatically, and events can be configured so they are\n * added to the custom element as event listeners.\n *\n * @param React The React module, typically imported from the `react` npm\n * package.\n * @param tagName The custom element tag name registered via\n * `customElements.define`.\n * @param elementClass The custom element class registered via\n * `customElements.define`.\n * @param events An object listing events to which the component can listen. The\n * object keys are the event property names passed in via React props and the\n * object values are the names of the corresponding events generated by the\n * custom element. For example, given `{onactivate: 'activate'}` an event\n * function may be passed via the component's `onactivate` prop and will be\n * called when the custom element fires its `activate` event.\n * @param displayName A React component display name, used in debugging\n * messages. Default value is inferred from the name of custom element class\n * registered via `customElements.define`.\n */\nexport const createComponent = <I extends HTMLElement, E extends Events = {}>(\n React: typeof window.React,\n tagName: string,\n elementClass: Constructor<I>,\n events?: E,\n displayName?: string\n) => {\n const Component = React.Component;\n const createElement = React.createElement;\n\n // Props the user is allowed to use, includes standard attributes, children,\n // ref, as well as special event and element properties.\n type ReactProps = Omit<React.HTMLAttributes<I>, keyof E>;\n type ElementWithoutPropsOrEvents = Omit<I, keyof E | keyof ReactProps>;\n type UserProps = Partial<\n ReactProps & ElementWithoutPropsOrEvents & EventProps<E>\n >;\n\n // Props used by this component wrapper. This is the UserProps and the\n // special `__forwardedRef` property. Note, this ref is special because\n // it's both needed in this component to get access to the rendered element\n // and must fulfill any ref passed by the user.\n type ComponentProps = UserProps & {\n __forwardedRef?: React.Ref<unknown>;\n };\n\n // Set of properties/events which should be specially handled by the wrapper\n // and not handled directly by React.\n const elementClassProps = new Set(Object.keys(events ?? {}));\n for (const p in elementClass.prototype) {\n if (!(p in HTMLElement.prototype)) {\n if (reservedReactProperties.has(p)) {\n // Note, this effectively warns only for `ref` since the other\n // reserved props are on HTMLElement.prototype. To address this\n // would require crawling down the prototype, which doesn't feel worth\n // it since implementing these properties on an element is extremely\n // rare.\n console.warn(\n `${tagName} contains property ${p} which is a React ` +\n `reserved property. It will be used by React and not set on ` +\n `the element.`\n );\n } else {\n elementClassProps.add(p);\n }\n }\n }\n\n class ReactComponent extends Component<ComponentProps> {\n private _element: I | null = null;\n private _elementProps!: {[index: string]: unknown};\n private _userRef?: React.Ref<unknown>;\n private _ref?: React.RefCallback<I>;\n\n static displayName = displayName ?? elementClass.name;\n\n private _updateElement(oldProps?: ComponentProps) {\n if (this._element === null) {\n return;\n }\n // Set element properties to the values in `this.props`\n for (const prop in this._elementProps) {\n setProperty(\n this._element,\n prop,\n this.props[prop as keyof ComponentProps],\n oldProps ? oldProps[prop as keyof ComponentProps] : undefined,\n events\n );\n }\n // Note, the spirit of React might be to \"unset\" any old values that\n // are no longer included; however, there's no reasonable value to set\n // them to so we just leave the previous state as is.\n }\n\n /**\n * Updates element properties correctly setting properties\n * on mount.\n */\n override componentDidMount() {\n this._updateElement();\n }\n\n /**\n * Updates element properties correctly setting properties\n * on every update. Note, this does not include mount.\n */\n override componentDidUpdate(old: ComponentProps) {\n this._updateElement(old);\n }\n\n /**\n * Renders the custom element with a `ref` prop which allows this\n * component to reference the custom element.\n *\n * Standard attributes are passed to React and element properties and events\n * are updated in componentDidMount/componentDidUpdate.\n *\n */\n override render() {\n // Since refs only get fulfilled once, pass a new one if the user's\n // ref changed. This allows refs to be fulfilled as expected, going from\n // having a value to null.\n const userRef = this.props.__forwardedRef as React.Ref<unknown>;\n if (this._ref === undefined || this._userRef !== userRef) {\n this._ref = (value: I | null) => {\n if (this._element === null) {\n this._element = value;\n }\n if (userRef !== null) {\n setRef(userRef, value);\n }\n this._userRef = userRef;\n };\n }\n // Filters class properties out and passes the remaining\n // attributes to React. This allows attributes to use framework rules\n // for setting attributes and render correctly under SSR.\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const props: any = {ref: this._ref};\n // Note, save element props while iterating to avoid the need to\n // iterate again when setting properties.\n this._elementProps = {};\n for (const [k, v] of Object.entries(this.props)) {\n if (k === '__forwardedRef') continue;\n\n if (elementClassProps.has(k)) {\n this._elementProps[k] = v;\n } else {\n // React does *not* handle `className` for custom elements so\n // coerce it to `class` so it's handled correctly.\n props[k === 'className' ? 'class' : k] = v;\n }\n }\n return createElement(tagName, props);\n }\n }\n\n const ForwardedComponent = React.forwardRef(\n (props?: UserProps, ref?: React.Ref<unknown>) =>\n createElement(\n ReactComponent,\n {...props, __forwardedRef: ref} as ComponentProps,\n props?.children\n )\n );\n\n // To ease debugging in the React Developer Tools\n ForwardedComponent.displayName = ReactComponent.displayName;\n\n return ForwardedComponent;\n};\n"],
5
+ "mappings": "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",
6
+ "names": ["React", "reservedReactProperties", "Set", "listenedEvents", "WeakMap", "setProperty", "node", "name", "value", "old", "events", "event", "listener", "get", "set", "Map", "handler", "handleEvent", "addEventListener", "delete", "removeEventListener", "createComponent", "React", "tagName", "elementClass", "displayName", "Component", "createElement", "elementClassProps", "Object", "keys", "p", "prototype", "HTMLElement", "has", "console", "warn", "add", "ReactComponent", "constructor", "this", "_element", "_updateElement", "oldProps", "prop", "_elementProps", "props", "componentDidMount", "componentDidUpdate", "render", "userRef", "__forwardedRef", "_ref", "_userRef", "ref", "current", "k", "v", "entries", "ForwardedComponent", "forwardRef", "children", "BlAlert", "s", "React", "BlBadge", "BlButton", "BlCheckbox", "BlIcon", "BlInput", "BlPagination", "BlProgressIndicator", "BlSelect", "BlTabGroup", "BlTooltip", "BlSelectOption", "BlTab", "BlTabPanel"]
7
7
  }
package/dist/baklava.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a as l}from"./chunk-YZQVPLSP.js";import{a as d}from"./chunk-OJVJFWT3.js";import{a as n}from"./chunk-7SDGSJ2P.js";import{a as m}from"./chunk-KWTSWXUL.js";import{a as s}from"./chunk-C5HFLPOK.js";import{a as f}from"./chunk-EX6STMCI.js";import{a as p}from"./chunk-IDG5M2QP.js";import{a as u}from"./chunk-6WS7INIM.js";import"./chunk-VNGNBBSS.js";import{a as B}from"./chunk-SI4AOUS5.js";import{a as r}from"./chunk-54XXQVFL.js";import{a}from"./chunk-SRQS24UV.js";import"./chunk-2TVOKUHE.js";import"./chunk-ENFFFE4I.js";import{a as x}from"./chunk-N6FF6F3Y.js";import"./chunk-KQBKSEYJ.js";import{a as t,b as o,c as e}from"./chunk-WXJKPVRA.js";import"./chunk-72IJCTLJ.js";import"./chunk-23UFIOHV.js";import"./chunk-HG7OBTQS.js";import"./chunk-NZ3RGSR6.js";export{B as BlAlert,r as BlBadge,a as BlButton,x as BlCheckbox,e as BlIcon,l as BlInput,d as BlProgressIndicator,n as BlSelect,m as BlSelectOption,f as BlTab,s as BlTabGroup,p as BlTabPanel,u as BlTooltip,o as getIconPath,t as setIconPath};
1
+ import{a as c}from"./chunk-BUIS2EQI.js";import{a as l}from"./chunk-YZQVPLSP.js";import{a as d}from"./chunk-OJVJFWT3.js";import{a as n}from"./chunk-GBFJ2WUI.js";import{a as m}from"./chunk-KWTSWXUL.js";import{a as s}from"./chunk-C5HFLPOK.js";import{a as p}from"./chunk-IDG5M2QP.js";import{a as f}from"./chunk-EX6STMCI.js";import{a as u}from"./chunk-6WS7INIM.js";import"./chunk-VNGNBBSS.js";import{a as B}from"./chunk-SI4AOUS5.js";import{a as r}from"./chunk-54XXQVFL.js";import{a}from"./chunk-KMWDOTWV.js";import"./chunk-2TVOKUHE.js";import"./chunk-ENFFFE4I.js";import{a as x}from"./chunk-N6FF6F3Y.js";import"./chunk-KQBKSEYJ.js";import{a as t,b as o,c as e}from"./chunk-WXJKPVRA.js";import"./chunk-72IJCTLJ.js";import"./chunk-23UFIOHV.js";import"./chunk-HG7OBTQS.js";import"./chunk-NZ3RGSR6.js";export{B as BlAlert,r as BlBadge,a as BlButton,x as BlCheckbox,e as BlIcon,l as BlInput,c as BlPagination,d as BlProgressIndicator,n as BlSelect,m as BlSelectOption,f as BlTab,s as BlTabGroup,p as BlTabPanel,u as BlTooltip,o as getIconPath,t as setIconPath};
2
2
  //# sourceMappingURL=baklava.js.map
@@ -0,0 +1,48 @@
1
+ import{a as h}from"./chunk-23UFIOHV.js";import{a as p,b as a,f as u,g,h as s,i as c}from"./chunk-HG7OBTQS.js";import{a as r}from"./chunk-NZ3RGSR6.js";var m=p`:host{width:max-content}.pagination{display:flex}.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-secondary)}.pagination-helpers{display:flex;align-items:center;margin-right:var(--bl-size-s);gap:var(--bl-size-m)}.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}`,o=m;var b=[{text:"100",value:100},{text:"250",value:250},{text:"500",value:500},{text:"1000",value:1e3}],t=class extends u{constructor(){super(...arguments);this.currentPage=1;this.totalItems=0;this.itemsPerPage=100;this.hasJumper=!1;this.jumperLabel="Go To";this.hasSelect=!1;this.selectLabel="Show";this.optionText="Items";this.pages=[]}static get styles(){return[o]}updated(e){(e.has("currentPage")||e.has("itemsPerPage")||e.has("totalItems"))&&(this._paginate(),this.onChange({selectedPage:this.currentPage,prevPage:e.get("currentPage")}))}_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"?a`<span class="dots"></span>`:a` <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 a`
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
+ ${this.pages.map(e=>a`${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?a`
32
+ <div class="select">
33
+ <label>${this.selectLabel}</label>
34
+ <bl-select @bl-select="${this._selectHandler}">
35
+ ${b.map(n=>a`<bl-select-option
36
+ value="${n.value}"
37
+ ?selected=${n.value===this.itemsPerPage}
38
+ >${n.text} ${this.optionText}</bl-select-option
39
+ >`)}
40
+ </bl-select>
41
+ </div>
42
+ `:null,i=this.hasJumper?a` <div class="jumper">
43
+ <label>${this.jumperLabel}</label>
44
+ <bl-input value="${this.currentPage}" @bl-change="${this._inputHandler}"></bl-input>
45
+ </div>`:null;return a` <div class="pagination">${(()=>{if(!(!this.hasSelect&&!this.hasJumper))return a`
46
+ <div class="pagination-helpers">${e} ${i}</div>
47
+ `})()} ${this.renderPages()}</div>`}};r([s({attribute:"current-page",type:Number,reflect:!0})],t.prototype,"currentPage",2),r([s({attribute:"total-items",type:Number})],t.prototype,"totalItems",2),r([s({attribute:"items-per-page",type:Number,reflect:!0})],t.prototype,"itemsPerPage",2),r([s({attribute:"has-jumper",type:Boolean})],t.prototype,"hasJumper",2),r([s({attribute:"jumper-label",type:String})],t.prototype,"jumperLabel",2),r([s({attribute:"has-select",type:Boolean})],t.prototype,"hasSelect",2),r([s({attribute:"select-label",type:String})],t.prototype,"selectLabel",2),r([s({attribute:"option-text",type:String})],t.prototype,"optionText",2),r([c()],t.prototype,"pages",2),r([h("bl-change")],t.prototype,"onChange",2),t=r([g("bl-pagination")],t);export{t as a};
48
+ //# sourceMappingURL=chunk-BUIS2EQI.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`:host{width:max-content}.pagination{display:flex}.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-secondary)}.pagination-helpers{display:flex;align-items:center;margin-right:var(--bl-size-s);gap:var(--bl-size-m)}.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}`;\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\nconst selectOptions = [\n {\n text: '100',\n value: 100,\n },\n {\n text: '250',\n value: 250,\n },\n {\n text: '500',\n value: 500,\n },\n {\n text: '1000',\n value: 1000,\n },\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 = 100;\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 option texts.\n */\n @property({ attribute: 'option-text', type: String })\n optionText = 'Items';\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<{ selectedPage: number; prevPage: number }>;\n\n updated(changedProperties: PropertyValues<this>) {\n if (changedProperties.has('currentPage') || changedProperties.has('itemsPerPage') || changedProperties.has('totalItems') ) {\n this._paginate();\n this.onChange({\n selectedPage: this.currentPage,\n prevPage: changedProperties.get('currentPage'),\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 ${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 ? html`\n <div class=\"select\">\n <label>${this.selectLabel}</label>\n <bl-select @bl-select=\"${this._selectHandler}\">\n ${selectOptions.map(option => {\n return html`<bl-select-option\n value=\"${option.value}\"\n ?selected=${option.value === this.itemsPerPage}\n >${option.text} ${this.optionText}</bl-select-option\n >`;\n })}\n </bl-select>\n </div>\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`\n <div class=\"pagination-helpers\">${selectEl} ${jumperEl}</div>\n `;\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", "selectOptions", "BlPagination", "s", "bl_pagination_default", "changedProperties", "pageListLength", "_", "index", "page", "event", "inputValue", "newPage", "_a", "$", "selectEl", "option", "jumperEl", "__decorateClass", "e", "t", "n"]
7
+ }
@@ -13,7 +13,7 @@ import{b as f,c as m,e as _,f as g,g as x}from"./chunk-VNGNBBSS.js";import{a as
13
13
  >
14
14
  ${p} ${e} ${t}
15
15
  <div class="actions">
16
- ${s}
16
+ ${this.multiple?s:null}
17
17
  <bl-icon
18
18
  class="dropdown-icon open"
19
19
  name="arrow_up"
@@ -32,4 +32,4 @@ import{b as f,c as m,e as _,f as g,g as x}from"./chunk-VNGNBBSS.js";import{a as
32
32
  >
33
33
  ${s} ${this.inputTemplate()} ${this.menuTemplate()} ${t} ${e}
34
34
  </div> `}get _showPlaceHolder(){return this.label&&!this.labelFixed?!this._selectedOptions.length&&this._isPopoverOpen:!this._selectedOptions.length}_onClickSelectInput(){this._isPopoverOpen?this.close():this.open()}_handleSelectEvent(){this._onBlSelect(this._selectedOptions)}_handleSingleSelect(e){let t=this._connectedOptions.find(s=>s.value!==e.value&&s.selected);t&&(t.selected=!1),this._selectedOptions=[e],this._handleSelectEvent(),this._isPopoverOpen=!1}_handleMultipleSelect(e){let{value:t}=e;e.selected?this._selectedOptions=[...this._selectedOptions,e]:this._selectedOptions=this._selectedOptions.filter(s=>s.value!==t),this._handleSelectEvent()}_handleSelectOptionEvent(e){let t=e.detail;this.multiple?this._handleMultipleSelect(t):this._handleSingleSelect(t)}_onClickRemove(e){e.stopPropagation(),this._connectedOptions.filter(t=>t.selected).forEach(t=>{t.selected=!1}),this._selectedOptions=[],this._handleSelectEvent()}_checkAdditionalItemCount(){if(!this.multiple)return;let e=0;for(let t of this._selectedOptionsItems)if(t.offsetLeft<this._selectedOptionsContainer.offsetWidth)e++;else break;this._additionalSelectedOptionCount=this._selectedOptionsItems.length-e}_checkRequired(){this.required&&(this._isInvalid=this._selectedOptions.length===0)}updated(e){e.has("_selectedOptions")&&e.get("_selectedOptions")instanceof Array?(this._checkRequired(),this._checkAdditionalItemCount()):e.has("multiple")&&typeof e.get("multiple")=="boolean"&&(this._connectedOptions.forEach(t=>{t.multiple=this.multiple,t.selected=!1}),this._selectedOptions=[])}registerOption(e){if(this._connectedOptions.push(e),e.selected){let t={value:e.value,text:e.textContent,selected:e.selected};this.multiple?this._selectedOptions=[...this._selectedOptions,t]:this._selectedOptions=[t],this.requestUpdate()}}unregisterOption(e){this._connectedOptions.splice(this._connectedOptions.indexOf(e),1),this._selectedOptions=this._selectedOptions.filter(t=>t.value!==e.value)}};l([n({})],o.prototype,"label",2),l([n({})],o.prototype,"placeholder",2),l([n({type:String,reflect:!0})],o.prototype,"size",2),l([n({type:Boolean})],o.prototype,"required",2),l([n({type:Boolean})],o.prototype,"disabled",2),l([n({type:Boolean})],o.prototype,"multiple",2),l([n({type:Boolean,attribute:"label-fixed"})],o.prototype,"labelFixed",2),l([n({type:String,attribute:"help-text"})],o.prototype,"helpText",2),l([n({type:String,attribute:"invalid-text"})],o.prototype,"customInvalidText",2),l([r()],o.prototype,"_isPopoverOpen",2),l([r()],o.prototype,"_selectedOptions",2),l([r()],o.prototype,"_additionalSelectedOptionCount",2),l([r()],o.prototype,"_isInvalid",2),l([a(".selected-options")],o.prototype,"_selectedOptionsContainer",2),l([h(".selected-options li")],o.prototype,"_selectedOptionsItems",2),l([a(".popover")],o.prototype,"_popover",2),l([a(".select-input")],o.prototype,"_selectInput",2),l([u("bl-select")],o.prototype,"_onBlSelect",2),o=l([v("bl-select")],o);export{o as a};
35
- //# sourceMappingURL=chunk-7SDGSJ2P.js.map
35
+ //# sourceMappingURL=chunk-GBFJ2WUI.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/components/select/bl-select.css", "../src/components/select/bl-select.ts"],
4
- "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--background-color:#fff;--border-color:var(--bl-color-border);--border-focus-color:var(--bl-color-primary-hover);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--label-color:var(--bl-color-content-secondary);--placeholder-color:var(--bl-color-content-tertiary);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-tertiary);--z-index:1;--menu-height:250px}:host([size='large']) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-font-size-s)}.placeholder{color:var(--placeholder-color)}:host([disabled]) .placeholder{--placeholder-color:var(--bl-color-content-passive)}.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-hover);--label-color:var(--bl-color-danger)}.select-input{display:flex;align-items:center;justify-content:space-between;cursor:pointer;outline:0;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--bl-font-title-3-regular);padding:0 var(--padding-horizontal);border-radius:var(--bl-border-radius-s);color:var(--text-color);user-select:none}.remove-all{display:none}.remove-all::after{content:'';position:absolute;left:1.5rem;bottom:4px;height:1rem;border-left:1px solid var(--bl-color-border)}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-font-size-m)}.dropdown-icon.open{display:none}.select-open .dropdown-icon.open{display:inline-block}.select-open .dropdown-icon.closed{display:none}.selected .dropdown-icon{--icon-color:var(--bl-color-secondary)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-color-content-passive)}.select-open .select-input{border:solid 1px var(--border-focus-color)}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{padding:0;margin:0;list-style:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.selected-options li{display:inline;font-size:var(--font-size);color:var(--text-color)}.selected-options li:not(:last-child)::after{content:', '}:host([disabled]) .selected-options li{color:var(--bl-color-content-passive)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-2xs);margin-left:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:fixed;border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-border-radius-s);padding:var(--menu-padding);outline:0;box-sizing:border-box;max-height:var(--menu-height);overflow-y:auto;display:none;flex-direction:column;z-index:var(--z-index);width:100%;top:var(--top);left:var(--left)}.select-open .popover{display:flex;border:solid 1px var(--border-focus-color)}bl-icon{color:var(--icon-color)}label{position:absolute;display:flex;align-items:center;top:var(--padding-vertical);left:var(--padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color);padding:0}:where(.select-open,.selected) label{top:0;left:var(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);padding:0 var(--bl-size-3xs);background-color:var(--bl-color-primary-background);pointer-events:initial}:host([label-fixed]) .select-wrapper{padding-top:var(--bl-size-m)}:host([label-fixed]) label{top:0;left:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color);padding:0}.help-text,.invalid-text{margin:var(--bl-size-3xs) 0 0 var(--bl-size-2xs);font:var(--bl-font-title-4-regular);padding:var(--bl-size-3xs) var(--bl-input-padding-horizontal)}.help-text{color:var(--bl-color-content-secondary)}.invalid-text{color:var(--bl-color-danger)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, PropertyValues } from 'lit';\nimport { customElement, property, state, query, queryAll } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { computePosition, flip, MiddlewareArguments, offset, size, autoUpdate } from '@floating-ui/dom';\nimport style from '../select/bl-select.css';\nimport '../icon/bl-icon';\nimport '../select/option/bl-select-option';\nimport type BlSelectOption from './option/bl-select-option';\nimport { event, EventDispatcher } from '../../utilities/event';\n\nexport interface ISelectOption {\n value: string;\n text: string;\n selected: boolean;\n}\n\nexport type SelectSize = 'medium' | 'large' | 'small';\n\nexport type CleanUpFunction = () => void;\n\n@customElement('bl-select')\nexport default class BlSelect extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /* Declare reactive properties */\n /**\n * Sets the label value\n */\n @property({})\n label?: string;\n\n /**\n * Sets the placeholder value. If left blank, the label value (if specified) is set as placeholder.\n */\n @property({})\n placeholder?: string;\n\n /**\n * Sets the size value. Select component's height value will be changed accordingly\n */\n @property({ type: String, reflect: true })\n size: SelectSize = 'medium';\n\n /**\n * When option is not selected, shows component in error state\n */\n @property({ type: Boolean })\n required = false;\n\n /**\n * Shows the component in disabled state.\n */\n @property({ type: Boolean })\n disabled = false;\n\n /**\n * Allows multiple options to be selected\n */\n @property({ type: Boolean })\n multiple = false;\n\n /**\n * Makes label as fixed positioned\n */\n @property({ type: Boolean, attribute: 'label-fixed' })\n labelFixed = false;\n\n /**\n * Adds help text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText?: string;\n\n /**\n * Set custom error message\n */\n @property({ type: String, attribute: 'invalid-text' })\n customInvalidText?: string;\n\n /* Declare internal reactive properties */\n @state()\n private _isPopoverOpen = false;\n\n @state()\n private _selectedOptions: ISelectOption[] = [];\n\n @state()\n private _additionalSelectedOptionCount = 0;\n\n @state()\n private _isInvalid = false;\n\n @query('.selected-options')\n private _selectedOptionsContainer!: HTMLElement;\n\n @queryAll('.selected-options li')\n private _selectedOptionsItems!: Array<HTMLElement>;\n\n @query('.popover')\n private _popover: HTMLElement;\n\n @query('.select-input')\n private _selectInput: HTMLElement;\n\n @event('bl-select') private _onBlSelect: EventDispatcher<ISelectOption[]>;\n\n private _connectedOptions: BlSelectOption[] = [];\n\n private _cleanUpPopover: CleanUpFunction | null = null;\n\n get options() {\n return this._connectedOptions;\n }\n\n get isPopoverOpen() {\n return this._isPopoverOpen;\n }\n\n get selectedOptions() {\n return this._selectedOptions;\n }\n\n get additionalSelectedOptionCount() {\n return this._additionalSelectedOptionCount;\n }\n\n get isInvalid() {\n return this._isInvalid;\n }\n\n open() {\n this._isPopoverOpen = true;\n this._setupPopover();\n document.addEventListener('click', this._clickOutsideHandler);\n }\n\n close() {\n this._isPopoverOpen = false;\n this._cleanUpPopover && this._cleanUpPopover();\n document.removeEventListener('click', this._clickOutsideHandler);\n }\n\n private _clickOutsideHandler = (event: MouseEvent) => {\n const eventPath = event.composedPath() as HTMLElement[];\n\n if (!eventPath?.find(el => el.tagName === 'BL-SELECT')?.contains(this)) {\n this.close();\n this._checkRequired();\n }\n };\n\n private _setupPopover() {\n this._cleanUpPopover = autoUpdate(this._selectInput, this._popover, () => {\n computePosition(this._selectInput, this._popover, {\n placement: 'bottom',\n strategy: 'fixed',\n middleware: [\n flip(),\n offset(8),\n size({\n apply(args: MiddlewareArguments) {\n Object.assign(args.elements.floating.style, {\n width: `${args.elements.reference.getBoundingClientRect().width}px`,\n });\n },\n }),\n ],\n }).then(({ x, y }) => {\n this._popover.style.setProperty('--left', `${x}px`);\n this._popover.style.setProperty('--top', `${y}px`);\n });\n });\n }\n\n connectedCallback() {\n super.connectedCallback();\n }\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this._cleanUpPopover && this._cleanUpPopover();\n }\n\n private inputTemplate() {\n const inputSelectedOptions = html`<ul class=\"selected-options\">\n ${this._selectedOptions.map(item => html`<li>${item.text}</li>`)}\n </ul>`;\n const _selectedItemCount = this._additionalSelectedOptionCount\n ? html`<span>+${this._additionalSelectedOptionCount}</span>`\n : null;\n const removeButton = html`<bl-button\n class=\"remove-all\"\n size=\"small\"\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"close\"\n @click=${this._onClickRemove}></bl-button>`;\n const placeholder = this._showPlaceHolder\n ? html`<span class=\"placeholder\">${this.placeholder}</span>`\n : '';\n\n return html`<div\n class=\"select-input\"\n ?disabled=${this.disabled}\n @click=${this._onClickSelectInput}\n >\n ${placeholder} ${inputSelectedOptions} ${_selectedItemCount}\n <div class=\"actions\">\n ${removeButton}\n <bl-icon\n class=\"dropdown-icon open\"\n name=\"arrow_up\"\n ></bl-icon>\n\n <bl-icon\n class=\"dropdown-icon closed\"\n name=\"arrow_down\"\n ></bl-icon>\n </div>\n </div>`;\n }\n\n private menuTemplate() {\n return html`<div class=\"popover\" @bl-select-option=${this._handleSelectOptionEvent}>\n <slot></slot>\n </div>`;\n }\n\n render() {\n const invalidMessage = this._isInvalid && this.customInvalidText\n ? html`<p class=\"invalid-text\">${this.customInvalidText}</p>` : ``;\n const helpMessage = this.helpText && !invalidMessage\n ? html`<p class=\"help-text\">${this.helpText}</p>` : ``;\n const label = this.label\n ? html`<label>${this.label}</label>` : '';\n\n return html`<div\n class=${classMap({\n 'select-wrapper': true,\n 'select-open': this._isPopoverOpen,\n 'selected': this._selectedOptions.length > 0,\n 'invalid': this._isInvalid,\n })}\n tabindex=\"-1\"\n >\n ${label} ${this.inputTemplate()} ${this.menuTemplate()} ${helpMessage} ${invalidMessage}\n </div> `;\n }\n\n private get _showPlaceHolder() {\n if (this.label && !this.labelFixed) {\n return !this._selectedOptions.length && this._isPopoverOpen;\n }\n return !this._selectedOptions.length;\n }\n\n private _onClickSelectInput() {\n this._isPopoverOpen ? this.close() : this.open();\n }\n\n private _handleSelectEvent() {\n this._onBlSelect(this._selectedOptions);\n }\n\n private _handleSingleSelect(optionItem: ISelectOption) {\n const oldItem = this._connectedOptions.find(option => option.value !== optionItem.value && option.selected);\n\n if (oldItem) {\n oldItem.selected = false;\n }\n\n this._selectedOptions = [optionItem];\n this._handleSelectEvent();\n this._isPopoverOpen = false;\n }\n\n private _handleMultipleSelect(optionItem: ISelectOption) {\n const { value } = optionItem;\n\n if (!optionItem.selected) {\n this._selectedOptions = this._selectedOptions.filter(item => item.value !== value);\n } else {\n this._selectedOptions = [...this._selectedOptions, optionItem];\n }\n\n this._handleSelectEvent();\n }\n\n private _handleSelectOptionEvent(e: CustomEvent) {\n const optionItem = e.detail as ISelectOption;\n\n if (this.multiple) {\n this._handleMultipleSelect(optionItem);\n } else {\n this._handleSingleSelect(optionItem);\n }\n }\n\n private _onClickRemove(e: MouseEvent) {\n e.stopPropagation();\n\n this._connectedOptions\n .filter(option => option.selected)\n .forEach(option => {\n option.selected = false;\n });\n\n this._selectedOptions = [];\n this._handleSelectEvent();\n }\n\n private _checkAdditionalItemCount() {\n if (!this.multiple) return;\n\n let visibleItems = 0;\n for(const value of this._selectedOptionsItems) {\n if (value.offsetLeft < this._selectedOptionsContainer.offsetWidth) {\n visibleItems++;\n } else {\n break;\n }\n }\n\n this._additionalSelectedOptionCount = this._selectedOptionsItems.length - visibleItems;\n }\n\n private _checkRequired() {\n if (this.required) {\n this._isInvalid = this._selectedOptions.length === 0;\n }\n }\n\n protected updated(_changedProperties: PropertyValues) {\n if (\n _changedProperties.has('_selectedOptions') &&\n _changedProperties.get('_selectedOptions') instanceof Array\n ) {\n this._checkRequired();\n this._checkAdditionalItemCount();\n } else if (\n _changedProperties.has('multiple') &&\n typeof _changedProperties.get('multiple') === 'boolean'\n ) {\n this._connectedOptions.forEach(option => {\n option.multiple = this.multiple;\n option.selected = false;\n });\n this._selectedOptions = [];\n }\n }\n\n /**\n * This method is used by `bl-select-option` component to register itself to bl-select.\n * @param option BlSelectOption reference to be registered\n */\n registerOption(option: BlSelectOption) {\n this._connectedOptions.push(option);\n\n if (option.selected) {\n const optionItem = {\n value: option.value,\n text: option.textContent,\n selected: option.selected,\n } as ISelectOption;\n\n if (this.multiple) {\n this._selectedOptions = [...this._selectedOptions, optionItem];\n } else {\n this._selectedOptions = [optionItem];\n }\n\n this.requestUpdate();\n }\n }\n\n /**\n * This method is used by `bl-select-option` component to unregister itself from bl-select.\n * @param option BlSelectOption reference to be unregistered\n */\n unregisterOption(option: BlSelectOption) {\n this._connectedOptions.splice(this._connectedOptions.indexOf(option), 1);\n this._selectedOptions = this._selectedOptions.filter(item => item.value !== option.value);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-select': BlSelect;\n }\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--background-color:#fff;--border-color:var(--bl-color-border);--border-focus-color:var(--bl-color-primary-hover);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--label-color:var(--bl-color-content-secondary);--placeholder-color:var(--bl-color-content-tertiary);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-tertiary);--z-index:1;--menu-height:250px}:host([size='large']) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-font-size-s)}.placeholder{color:var(--placeholder-color)}:host([disabled]) .placeholder{--placeholder-color:var(--bl-color-content-passive)}.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-hover);--label-color:var(--bl-color-danger)}.select-input{display:flex;align-items:center;justify-content:space-between;cursor:pointer;outline:0;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--bl-font-title-3-regular);padding:0 var(--padding-horizontal);border-radius:var(--bl-border-radius-s);color:var(--text-color);user-select:none}.remove-all{display:none}.remove-all::after{content:'';position:absolute;left:1.5rem;bottom:4px;height:1rem;border-left:1px solid var(--bl-color-border)}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-font-size-m)}.dropdown-icon.open{display:none}.select-open .dropdown-icon.open{display:inline-block}.select-open .dropdown-icon.closed{display:none}.selected .dropdown-icon{--icon-color:var(--bl-color-secondary)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-color-content-passive)}.select-open .select-input{border:solid 1px var(--border-focus-color)}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{padding:0;margin:0;list-style:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.selected-options li{display:inline;font-size:var(--font-size);color:var(--text-color)}.selected-options li:not(:last-child)::after{content:', '}:host([disabled]) .selected-options li{color:var(--bl-color-content-passive)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-2xs);margin-left:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:fixed;border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-border-radius-s);padding:var(--menu-padding);outline:0;box-sizing:border-box;max-height:var(--menu-height);overflow-y:auto;display:none;flex-direction:column;z-index:var(--z-index);width:100%;top:var(--top);left:var(--left)}.select-open .popover{display:flex;border:solid 1px var(--border-focus-color)}bl-icon{color:var(--icon-color)}label{position:absolute;display:flex;align-items:center;top:var(--padding-vertical);left:var(--padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color);padding:0}:where(.select-open,.selected) label{top:0;left:var(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);padding:0 var(--bl-size-3xs);background-color:var(--bl-color-primary-background);pointer-events:initial}:host([label-fixed]) .select-wrapper{padding-top:var(--bl-size-m)}:host([label-fixed]) label{top:0;left:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color);padding:0}.help-text,.invalid-text{margin:var(--bl-size-3xs) 0 0 var(--bl-size-2xs);font:var(--bl-font-title-4-regular);padding:var(--bl-size-3xs) var(--bl-input-padding-horizontal)}.help-text{color:var(--bl-color-content-secondary)}.invalid-text{color:var(--bl-color-danger)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, PropertyValues } from 'lit';\nimport { customElement, property, state, query, queryAll } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { computePosition, flip, MiddlewareArguments, offset, size, autoUpdate } from '@floating-ui/dom';\nimport style from '../select/bl-select.css';\nimport '../icon/bl-icon';\nimport '../select/option/bl-select-option';\nimport type BlSelectOption from './option/bl-select-option';\nimport { event, EventDispatcher } from '../../utilities/event';\n\nexport interface ISelectOption {\n value: string;\n text: string;\n selected: boolean;\n}\n\nexport type SelectSize = 'medium' | 'large' | 'small';\n\nexport type CleanUpFunction = () => void;\n\n@customElement('bl-select')\nexport default class BlSelect extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /* Declare reactive properties */\n /**\n * Sets the label value\n */\n @property({})\n label?: string;\n\n /**\n * Sets the placeholder value. If left blank, the label value (if specified) is set as placeholder.\n */\n @property({})\n placeholder?: string;\n\n /**\n * Sets the size value. Select component's height value will be changed accordingly\n */\n @property({ type: String, reflect: true })\n size: SelectSize = 'medium';\n\n /**\n * When option is not selected, shows component in error state\n */\n @property({ type: Boolean })\n required = false;\n\n /**\n * Shows the component in disabled state.\n */\n @property({ type: Boolean })\n disabled = false;\n\n /**\n * Allows multiple options to be selected\n */\n @property({ type: Boolean })\n multiple = false;\n\n /**\n * Makes label as fixed positioned\n */\n @property({ type: Boolean, attribute: 'label-fixed' })\n labelFixed = false;\n\n /**\n * Adds help text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText?: string;\n\n /**\n * Set custom error message\n */\n @property({ type: String, attribute: 'invalid-text' })\n customInvalidText?: string;\n\n /* Declare internal reactive properties */\n @state()\n private _isPopoverOpen = false;\n\n @state()\n private _selectedOptions: ISelectOption[] = [];\n\n @state()\n private _additionalSelectedOptionCount = 0;\n\n @state()\n private _isInvalid = false;\n\n @query('.selected-options')\n private _selectedOptionsContainer!: HTMLElement;\n\n @queryAll('.selected-options li')\n private _selectedOptionsItems!: Array<HTMLElement>;\n\n @query('.popover')\n private _popover: HTMLElement;\n\n @query('.select-input')\n private _selectInput: HTMLElement;\n\n @event('bl-select') private _onBlSelect: EventDispatcher<ISelectOption[]>;\n\n private _connectedOptions: BlSelectOption[] = [];\n\n private _cleanUpPopover: CleanUpFunction | null = null;\n\n get options() {\n return this._connectedOptions;\n }\n\n get isPopoverOpen() {\n return this._isPopoverOpen;\n }\n\n get selectedOptions() {\n return this._selectedOptions;\n }\n\n get additionalSelectedOptionCount() {\n return this._additionalSelectedOptionCount;\n }\n\n get isInvalid() {\n return this._isInvalid;\n }\n\n open() {\n this._isPopoverOpen = true;\n this._setupPopover();\n document.addEventListener('click', this._clickOutsideHandler);\n }\n\n close() {\n this._isPopoverOpen = false;\n this._cleanUpPopover && this._cleanUpPopover();\n document.removeEventListener('click', this._clickOutsideHandler);\n }\n\n private _clickOutsideHandler = (event: MouseEvent) => {\n const eventPath = event.composedPath() as HTMLElement[];\n\n if (!eventPath?.find(el => el.tagName === 'BL-SELECT')?.contains(this)) {\n this.close();\n this._checkRequired();\n }\n };\n\n private _setupPopover() {\n this._cleanUpPopover = autoUpdate(this._selectInput, this._popover, () => {\n computePosition(this._selectInput, this._popover, {\n placement: 'bottom',\n strategy: 'fixed',\n middleware: [\n flip(),\n offset(8),\n size({\n apply(args: MiddlewareArguments) {\n Object.assign(args.elements.floating.style, {\n width: `${args.elements.reference.getBoundingClientRect().width}px`,\n });\n },\n }),\n ],\n }).then(({ x, y }) => {\n this._popover.style.setProperty('--left', `${x}px`);\n this._popover.style.setProperty('--top', `${y}px`);\n });\n });\n }\n\n connectedCallback() {\n super.connectedCallback();\n }\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this._cleanUpPopover && this._cleanUpPopover();\n }\n\n private inputTemplate() {\n const inputSelectedOptions = html`<ul class=\"selected-options\">\n ${this._selectedOptions.map(item => html`<li>${item.text}</li>`)}\n </ul>`;\n const _selectedItemCount = this._additionalSelectedOptionCount\n ? html`<span>+${this._additionalSelectedOptionCount}</span>`\n : null;\n const removeButton = html`<bl-button\n class=\"remove-all\"\n size=\"small\"\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"close\"\n @click=${this._onClickRemove}></bl-button>`;\n const placeholder = this._showPlaceHolder\n ? html`<span class=\"placeholder\">${this.placeholder}</span>`\n : '';\n\n return html`<div\n class=\"select-input\"\n ?disabled=${this.disabled}\n @click=${this._onClickSelectInput}\n >\n ${placeholder} ${inputSelectedOptions} ${_selectedItemCount}\n <div class=\"actions\">\n ${this.multiple ? removeButton : null}\n <bl-icon\n class=\"dropdown-icon open\"\n name=\"arrow_up\"\n ></bl-icon>\n\n <bl-icon\n class=\"dropdown-icon closed\"\n name=\"arrow_down\"\n ></bl-icon>\n </div>\n </div>`;\n }\n\n private menuTemplate() {\n return html`<div class=\"popover\" @bl-select-option=${this._handleSelectOptionEvent}>\n <slot></slot>\n </div>`;\n }\n\n render() {\n const invalidMessage = this._isInvalid && this.customInvalidText\n ? html`<p class=\"invalid-text\">${this.customInvalidText}</p>` : ``;\n const helpMessage = this.helpText && !invalidMessage\n ? html`<p class=\"help-text\">${this.helpText}</p>` : ``;\n const label = this.label\n ? html`<label>${this.label}</label>` : '';\n\n return html`<div\n class=${classMap({\n 'select-wrapper': true,\n 'select-open': this._isPopoverOpen,\n 'selected': this._selectedOptions.length > 0,\n 'invalid': this._isInvalid,\n })}\n tabindex=\"-1\"\n >\n ${label} ${this.inputTemplate()} ${this.menuTemplate()} ${helpMessage} ${invalidMessage}\n </div> `;\n }\n\n private get _showPlaceHolder() {\n if (this.label && !this.labelFixed) {\n return !this._selectedOptions.length && this._isPopoverOpen;\n }\n return !this._selectedOptions.length;\n }\n\n private _onClickSelectInput() {\n this._isPopoverOpen ? this.close() : this.open();\n }\n\n private _handleSelectEvent() {\n this._onBlSelect(this._selectedOptions);\n }\n\n private _handleSingleSelect(optionItem: ISelectOption) {\n const oldItem = this._connectedOptions.find(option => option.value !== optionItem.value && option.selected);\n\n if (oldItem) {\n oldItem.selected = false;\n }\n\n this._selectedOptions = [optionItem];\n this._handleSelectEvent();\n this._isPopoverOpen = false;\n }\n\n private _handleMultipleSelect(optionItem: ISelectOption) {\n const { value } = optionItem;\n\n if (!optionItem.selected) {\n this._selectedOptions = this._selectedOptions.filter(item => item.value !== value);\n } else {\n this._selectedOptions = [...this._selectedOptions, optionItem];\n }\n\n this._handleSelectEvent();\n }\n\n private _handleSelectOptionEvent(e: CustomEvent) {\n const optionItem = e.detail as ISelectOption;\n\n if (this.multiple) {\n this._handleMultipleSelect(optionItem);\n } else {\n this._handleSingleSelect(optionItem);\n }\n }\n\n private _onClickRemove(e: MouseEvent) {\n e.stopPropagation();\n\n this._connectedOptions\n .filter(option => option.selected)\n .forEach(option => {\n option.selected = false;\n });\n\n this._selectedOptions = [];\n this._handleSelectEvent();\n }\n\n private _checkAdditionalItemCount() {\n if (!this.multiple) return;\n\n let visibleItems = 0;\n for(const value of this._selectedOptionsItems) {\n if (value.offsetLeft < this._selectedOptionsContainer.offsetWidth) {\n visibleItems++;\n } else {\n break;\n }\n }\n\n this._additionalSelectedOptionCount = this._selectedOptionsItems.length - visibleItems;\n }\n\n private _checkRequired() {\n if (this.required) {\n this._isInvalid = this._selectedOptions.length === 0;\n }\n }\n\n protected updated(_changedProperties: PropertyValues) {\n if (\n _changedProperties.has('_selectedOptions') &&\n _changedProperties.get('_selectedOptions') instanceof Array\n ) {\n this._checkRequired();\n this._checkAdditionalItemCount();\n } else if (\n _changedProperties.has('multiple') &&\n typeof _changedProperties.get('multiple') === 'boolean'\n ) {\n this._connectedOptions.forEach(option => {\n option.multiple = this.multiple;\n option.selected = false;\n });\n this._selectedOptions = [];\n }\n }\n\n /**\n * This method is used by `bl-select-option` component to register itself to bl-select.\n * @param option BlSelectOption reference to be registered\n */\n registerOption(option: BlSelectOption) {\n this._connectedOptions.push(option);\n\n if (option.selected) {\n const optionItem = {\n value: option.value,\n text: option.textContent,\n selected: option.selected,\n } as ISelectOption;\n\n if (this.multiple) {\n this._selectedOptions = [...this._selectedOptions, optionItem];\n } else {\n this._selectedOptions = [optionItem];\n }\n\n this.requestUpdate();\n }\n }\n\n /**\n * This method is used by `bl-select-option` component to unregister itself from bl-select.\n * @param option BlSelectOption reference to be unregistered\n */\n unregisterOption(option: BlSelectOption) {\n this._connectedOptions.splice(this._connectedOptions.indexOf(option), 1);\n this._selectedOptions = this._selectedOptions.filter(item => item.value !== option.value);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-select': BlSelect;\n }\n}\n"],
5
+ "mappings": "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",
6
6
  "names": ["styles", "r", "bl_select_default", "BlSelect", "s", "event", "_a", "eventPath", "el", "bl_select_default", "N", "z", "b", "T", "k", "args", "x", "y", "inputSelectedOptions", "$", "item", "_selectedItemCount", "removeButton", "placeholder", "invalidMessage", "helpMessage", "label", "o", "optionItem", "oldItem", "option", "value", "visibleItems", "_changedProperties", "__decorateClass", "e", "t", "i", "n"]
7
7
  }
@@ -1,4 +1,4 @@
1
- import{a}from"./chunk-2TVOKUHE.js";import{a as v}from"./chunk-ENFFFE4I.js";import{a as h}from"./chunk-23UFIOHV.js";import{a as c,b as l,f as d,g as b,h as t}from"./chunk-HG7OBTQS.js";import{a as r}from"./chunk-NZ3RGSR6.js";var m=c`: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-primary-background);--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: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}: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='secondary']:hover:not([disabled])) .button,:host([variant='secondary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])) .button{--content-color:var(--bl-color-primary-background);--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)}`,p=m;var o=class extends d{constructor(){super(...arguments);this.variant="primary";this.kind="default";this.size="medium";this.disabled=!1;this.target="_self"}static get styles(){return[p]}get _hasIconSlot(){return this.querySelector(':scope > [slot="icon"]')!==null}get _hasDefaultSlot(){return[...this.childNodes].some(e=>{var n;let i=e.nodeType;return i===e.TEXT_NODE&&((n=e.textContent)==null?void 0:n.trim())!==""||i===e.ELEMENT_NODE&&!e.hasAttribute("slot")})}render(){let s=!!this.href,e=this.icon?l`<bl-icon name=${this.icon}></bl-icon>`:"",i=l`<slot name="icon">${e}</slot> <span class="label"><slot></slot></span>`,n=v({button:!0,"has-icon":this.icon||this._hasIconSlot,"has-content":this._hasDefaultSlot});return s?l`<a
1
+ import{a}from"./chunk-2TVOKUHE.js";import{a as v}from"./chunk-ENFFFE4I.js";import{a as h}from"./chunk-23UFIOHV.js";import{a as c,b as l,f as d,g as b,h as r}from"./chunk-HG7OBTQS.js";import{a as t}from"./chunk-NZ3RGSR6.js";var m=c`: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-primary-background);--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: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}: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-primary-background);--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)}`,p=m;var o=class extends d{constructor(){super(...arguments);this.variant="primary";this.kind="default";this.size="medium";this.disabled=!1;this.target="_self"}static get styles(){return[p]}get _hasIconSlot(){return this.querySelector(':scope > [slot="icon"]')!==null}get _hasDefaultSlot(){return[...this.childNodes].some(e=>{var n;let i=e.nodeType;return i===e.TEXT_NODE&&((n=e.textContent)==null?void 0:n.trim())!==""||i===e.ELEMENT_NODE&&!e.hasAttribute("slot")})}render(){let s=!!this.href,e=this.icon?l`<bl-icon name=${this.icon}></bl-icon>`:"",i=l`<slot name="icon">${e}</slot> <span class="label"><slot></slot></span>`,n=v({button:!0,"has-icon":this.icon||this._hasIconSlot,"has-content":this._hasDefaultSlot});return s?l`<a
2
2
  class=${n}
3
3
  aria-disabled="${a(this.disabled)}"
4
4
  aria-label="${a(this.label)}"
@@ -14,5 +14,5 @@ import{a}from"./chunk-2TVOKUHE.js";import{a as v}from"./chunk-ENFFFE4I.js";impor
14
14
  @click="${this._handleClick}"
15
15
  >
16
16
  ${i}
17
- </button>`}_handleClick(){this.onClick("Click event fired!")}};r([t({type:String,reflect:!0})],o.prototype,"variant",2),r([t({type:String,reflect:!0})],o.prototype,"kind",2),r([t({type:String,reflect:!0})],o.prototype,"size",2),r([t({type:String})],o.prototype,"label",2),r([t({type:Boolean,reflect:!0})],o.prototype,"disabled",2),r([t({type:String})],o.prototype,"href",2),r([t({type:String})],o.prototype,"icon",2),r([t({type:String})],o.prototype,"target",2),r([t({type:String})],o.prototype,"type",2),r([h("bl-click")],o.prototype,"onClick",2),o=r([b("bl-button")],o);export{o as a};
18
- //# sourceMappingURL=chunk-SRQS24UV.js.map
17
+ </button>`}_handleClick(){this.onClick("Click event fired!")}};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([h("bl-click")],o.prototype,"onClick",2),o=t([b("bl-button")],o);export{o as a};
18
+ //# sourceMappingURL=chunk-KMWDOTWV.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../src/components/button/bl-button.css", "../src/components/button/bl-button.ts"],
4
+ "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:var(--bl-button-display,inline-block);max-width:100%;position:relative}.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-primary-background);--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: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}: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-primary-background);--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)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport style from './bl-button.css';\nimport '../icon/bl-icon';\n\nexport type ButtonVariant = 'primary' | 'secondary' | '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 *\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 * Fires when button clicked\n */\n @event('bl-click') private onClick: EventDispatcher<string>;\n\n get _hasIconSlot() {\n return this.querySelector(':scope > [slot=\"icon\"]') !== null;\n }\n\n get _hasDefaultSlot() {\n const childNodes = [...this.childNodes];\n return childNodes.some(node => {\n const nodeType = node.nodeType;\n // has only text node.\n if (nodeType === node.TEXT_NODE && node.textContent?.trim() !== '') {\n return true;\n }\n // has element node, it should not have slot attribute.\n if (nodeType === node.ELEMENT_NODE) {\n if (!(node as HTMLElement).hasAttribute('slot')) {\n return true;\n }\n }\n return false;\n });\n }\n\n render(): TemplateResult {\n const isAnchor = !!this.href;\n const icon = this.icon ? html`<bl-icon name=${this.icon}></bl-icon>` : '';\n const slots = html`<slot name=\"icon\">${icon}</slot> <span class=\"label\"><slot></slot></span>`;\n const classes = classMap({\n 'button': true,\n 'has-icon': this.icon || this._hasIconSlot,\n 'has-content': this._hasDefaultSlot,\n });\n\n return isAnchor\n ? html`<a\n class=${classes}\n aria-disabled=\"${ifDefined(this.disabled)}\"\n aria-label=\"${ifDefined(this.label)}\"\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n role=\"button\"\n >${slots}</a\n >`\n : html`<button\n class=${classes}\n aria-disabled=\"${ifDefined(this.disabled)}\"\n aria-label=\"${ifDefined(this.label)}\"\n ?disabled=${this.disabled}\n @click=\"${this._handleClick}\"\n >\n ${slots}\n </button>`;\n }\n\n private _handleClick() {\n this.onClick('Click event fired!');\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-button': BlButton;\n }\n}\n"],
5
+ "mappings": "+NACO,IAAMA,EAASC,ijGACfC,EAAQF,ECmBf,IAAqBG,EAArB,cAAsCC,CAAW,CAAjD,kCASE,aAAyB,UAMzB,UAAmB,UAMnB,UAAmB,SAYnB,cAAW,GAkBX,YAAsB,QAlDtB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CA6DA,IAAI,cAAe,CACjB,OAAO,KAAK,cAAc,wBAAwB,IAAM,IAC1D,CAEA,IAAI,iBAAkB,CAEpB,MADmB,CAAC,GAAG,KAAK,UAAU,EACpB,KAAKC,GAAQ,CA3FnC,IAAAC,EA4FM,IAAMC,EAAWF,EAAK,SAMtB,OAJIE,IAAaF,EAAK,aAAaC,EAAAD,EAAK,cAAL,YAAAC,EAAkB,UAAW,IAI5DC,IAAaF,EAAK,cAChB,CAAEA,EAAqB,aAAa,MAAM,CAKlD,CAAC,CACH,CAEA,QAAyB,CACvB,IAAMG,EAAW,CAAC,CAAC,KAAK,KAClBC,EAAO,KAAK,KAAOC,kBAAqB,KAAK,kBAAoB,GACjEC,EAAQD,sBAAyBD,oDACjCG,EAAUC,EAAS,CACvB,OAAU,GACV,WAAY,KAAK,MAAQ,KAAK,aAC9B,cAAe,KAAK,eACtB,CAAC,EAED,OAAOL,EACHE;AAAA,kBACUE;AAAA,2BACSE,EAAU,KAAK,QAAQ;AAAA,wBAC1BA,EAAU,KAAK,KAAK;AAAA,iBAC3BA,EAAU,KAAK,IAAI;AAAA,mBACjBA,EAAU,KAAK,MAAM;AAAA;AAAA,aAE3BH;AAAA,WAELD;AAAA,kBACUE;AAAA,2BACSE,EAAU,KAAK,QAAQ;AAAA,wBAC1BA,EAAU,KAAK,KAAK;AAAA,sBACtB,KAAK;AAAA,oBACP,KAAK;AAAA;AAAA,YAEbH;AAAA,kBAEV,CAEQ,cAAe,CACrB,KAAK,QAAQ,oBAAoB,CACnC,CACF,EA/GEI,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GARtBd,EASnB,uBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAdtBd,EAenB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GApBtBd,EAqBnB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GA1BPd,EA2BnB,qBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAhCvBd,EAiCnB,wBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAtCPd,EAuCnB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GA5CPd,EA6CnB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAlDPd,EAmDnB,sBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAxDPd,EAyDnB,oBAK2Ba,EAAA,CAA1BE,EAAM,UAAU,GA9DEf,EA8DQ,uBA9DRA,EAArBa,EAAA,CADCG,EAAc,WAAW,GACLhB",
6
+ "names": ["styles", "r", "bl_button_default", "BlButton", "s", "bl_button_default", "node", "_a", "nodeType", "isAnchor", "icon", "$", "slots", "classes", "o", "l", "__decorateClass", "e", "event", "n"]
7
+ }
@@ -1,2 +1,2 @@
1
- import{a}from"../../chunk-SRQS24UV.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-WXJKPVRA.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-KMWDOTWV.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-WXJKPVRA.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
@@ -0,0 +1,2 @@
1
+ import{a}from"../../chunk-BUIS2EQI.js";import"../../chunk-YZQVPLSP.js";import"../../chunk-GBFJ2WUI.js";import"../../chunk-KWTSWXUL.js";import"../../chunk-VNGNBBSS.js";import"../../chunk-KMWDOTWV.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-KQBKSEYJ.js";import"../../chunk-WXJKPVRA.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
2
+ //# sourceMappingURL=bl-pagination.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": [],
4
+ "sourcesContent": [],
5
+ "mappings": "",
6
+ "names": []
7
+ }
@@ -1,2 +1,2 @@
1
- import{a}from"../../chunk-7SDGSJ2P.js";import"../../chunk-KWTSWXUL.js";import"../../chunk-VNGNBBSS.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-WXJKPVRA.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-GBFJ2WUI.js";import"../../chunk-KWTSWXUL.js";import"../../chunk-VNGNBBSS.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-WXJKPVRA.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-select.js.map
@@ -1,2 +1,2 @@
1
- import{a}from"../../chunk-C5HFLPOK.js";import"../../chunk-EX6STMCI.js";import"../../chunk-IDG5M2QP.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
1
+ import{a}from"../../chunk-C5HFLPOK.js";import"../../chunk-IDG5M2QP.js";import"../../chunk-EX6STMCI.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
2
2
  //# sourceMappingURL=bl-tab-group.js.map
@@ -634,6 +634,124 @@
634
634
  }
635
635
  ]
636
636
  },
637
+ {
638
+ "kind": "javascript-module",
639
+ "path": "src/components/pagination/bl-pagination.ts",
640
+ "declarations": [
641
+ {
642
+ "kind": "class",
643
+ "description": "",
644
+ "name": "BlPagination",
645
+ "events": [
646
+ {
647
+ "type": {
648
+ "text": "CustomEvent<EventDispatcher<{ selectedPage: number; prevPage: number }>>"
649
+ },
650
+ "description": "Fires when the current page changes",
651
+ "name": "bl-change"
652
+ }
653
+ ],
654
+ "attributes": [
655
+ {
656
+ "name": "current-page",
657
+ "type": {
658
+ "text": "number"
659
+ },
660
+ "default": "1",
661
+ "description": "Sets the current page",
662
+ "fieldName": "currentPage"
663
+ },
664
+ {
665
+ "name": "total-items",
666
+ "type": {
667
+ "text": "number"
668
+ },
669
+ "default": "0",
670
+ "description": "Sets the total items to be paginated",
671
+ "fieldName": "totalItems"
672
+ },
673
+ {
674
+ "name": "items-per-page",
675
+ "type": {
676
+ "text": "number"
677
+ },
678
+ "default": "100",
679
+ "description": "Sets the number of items per page",
680
+ "fieldName": "itemsPerPage"
681
+ },
682
+ {
683
+ "name": "has-jumper",
684
+ "type": {
685
+ "text": "boolean"
686
+ },
687
+ "default": "false",
688
+ "description": "Adds jumper element if provided as true",
689
+ "fieldName": "hasJumper"
690
+ },
691
+ {
692
+ "name": "jumper-label",
693
+ "type": {
694
+ "text": "string"
695
+ },
696
+ "default": "'Go To'",
697
+ "description": "Sets the jumper label",
698
+ "fieldName": "jumperLabel"
699
+ },
700
+ {
701
+ "name": "has-select",
702
+ "type": {
703
+ "text": "boolean"
704
+ },
705
+ "default": "false",
706
+ "description": "Adds select element to choose the items per page",
707
+ "fieldName": "hasSelect"
708
+ },
709
+ {
710
+ "name": "select-label",
711
+ "type": {
712
+ "text": "string"
713
+ },
714
+ "default": "'Show'",
715
+ "description": "Adds select element to choose the items per page",
716
+ "fieldName": "selectLabel"
717
+ },
718
+ {
719
+ "name": "option-text",
720
+ "type": {
721
+ "text": "string"
722
+ },
723
+ "default": "'Items'",
724
+ "description": "Sets the option texts.",
725
+ "fieldName": "optionText"
726
+ }
727
+ ],
728
+ "superclass": {
729
+ "name": "LitElement",
730
+ "package": "lit"
731
+ },
732
+ "tagName": "bl-pagination",
733
+ "customElement": true
734
+ }
735
+ ],
736
+ "exports": [
737
+ {
738
+ "kind": "js",
739
+ "name": "default",
740
+ "declaration": {
741
+ "name": "BlPagination",
742
+ "module": "src/components/pagination/bl-pagination.ts"
743
+ }
744
+ },
745
+ {
746
+ "kind": "custom-element-definition",
747
+ "name": "bl-pagination",
748
+ "declaration": {
749
+ "name": "BlPagination",
750
+ "module": "src/components/pagination/bl-pagination.ts"
751
+ }
752
+ }
753
+ ]
754
+ },
637
755
  {
638
756
  "kind": "javascript-module",
639
757
  "path": "src/components/progress-indicator/bl-progress-indicator.ts",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trendyol/baklava",
3
- "version": "2.0.0-beta.34",
3
+ "version": "2.0.0-beta.36",
4
4
  "description": "Trendyol Baklava Design System",
5
5
  "main": "dist/baklava.js",
6
6
  "module": "dist/baklava.js",
@@ -90,6 +90,7 @@
90
90
  "@typescript-eslint/eslint-plugin": "^5.18.0",
91
91
  "@typescript-eslint/parser": "^5.18.0",
92
92
  "@web/dev-server-esbuild": "0.2.16",
93
+ "@web/dev-server-import-maps": "^0.0.7",
93
94
  "@web/dev-server-rollup": "^0.3.17",
94
95
  "@web/test-runner": "^0.13.15",
95
96
  "@web/test-runner-playwright": "^0.8.6",
@@ -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-primary-background);--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: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}: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='secondary']:hover:not([disabled])) .button,:host([variant='secondary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])) .button{--content-color:var(--bl-color-primary-background);--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)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport style from './bl-button.css';\nimport '../icon/bl-icon';\n\nexport type ButtonVariant = 'primary' | 'secondary' | '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 *\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 * Fires when button clicked\n */\n @event('bl-click') private onClick: EventDispatcher<string>;\n\n get _hasIconSlot() {\n return this.querySelector(':scope > [slot=\"icon\"]') !== null;\n }\n\n get _hasDefaultSlot() {\n const childNodes = [...this.childNodes];\n return childNodes.some(node => {\n const nodeType = node.nodeType;\n // has only text node.\n if (nodeType === node.TEXT_NODE && node.textContent?.trim() !== '') {\n return true;\n }\n // has element node, it should not have slot attribute.\n if (nodeType === node.ELEMENT_NODE) {\n if (!(node as HTMLElement).hasAttribute('slot')) {\n return true;\n }\n }\n return false;\n });\n }\n\n render(): TemplateResult {\n const isAnchor = !!this.href;\n const icon = this.icon ? html`<bl-icon name=${this.icon}></bl-icon>` : '';\n const slots = html`<slot name=\"icon\">${icon}</slot> <span class=\"label\"><slot></slot></span>`;\n const classes = classMap({\n 'button': true,\n 'has-icon': this.icon || this._hasIconSlot,\n 'has-content': this._hasDefaultSlot,\n });\n\n return isAnchor\n ? html`<a\n class=${classes}\n aria-disabled=\"${ifDefined(this.disabled)}\"\n aria-label=\"${ifDefined(this.label)}\"\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n role=\"button\"\n >${slots}</a\n >`\n : html`<button\n class=${classes}\n aria-disabled=\"${ifDefined(this.disabled)}\"\n aria-label=\"${ifDefined(this.label)}\"\n ?disabled=${this.disabled}\n @click=\"${this._handleClick}\"\n >\n ${slots}\n </button>`;\n }\n\n private _handleClick() {\n this.onClick('Click event fired!');\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-button': BlButton;\n }\n}\n"],
5
- "mappings": "+NACO,IAAMA,EAASC,0+FACfC,EAAQF,ECmBf,IAAqBG,EAArB,cAAsCC,CAAW,CAAjD,kCASE,aAAyB,UAMzB,UAAmB,UAMnB,UAAmB,SAYnB,cAAW,GAkBX,YAAsB,QAlDtB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CA6DA,IAAI,cAAe,CACjB,OAAO,KAAK,cAAc,wBAAwB,IAAM,IAC1D,CAEA,IAAI,iBAAkB,CAEpB,MADmB,CAAC,GAAG,KAAK,UAAU,EACpB,KAAKC,GAAQ,CA3FnC,IAAAC,EA4FM,IAAMC,EAAWF,EAAK,SAMtB,OAJIE,IAAaF,EAAK,aAAaC,EAAAD,EAAK,cAAL,YAAAC,EAAkB,UAAW,IAI5DC,IAAaF,EAAK,cAChB,CAAEA,EAAqB,aAAa,MAAM,CAKlD,CAAC,CACH,CAEA,QAAyB,CACvB,IAAMG,EAAW,CAAC,CAAC,KAAK,KAClBC,EAAO,KAAK,KAAOC,kBAAqB,KAAK,kBAAoB,GACjEC,EAAQD,sBAAyBD,oDACjCG,EAAUC,EAAS,CACvB,OAAU,GACV,WAAY,KAAK,MAAQ,KAAK,aAC9B,cAAe,KAAK,eACtB,CAAC,EAED,OAAOL,EACHE;AAAA,kBACUE;AAAA,2BACSE,EAAU,KAAK,QAAQ;AAAA,wBAC1BA,EAAU,KAAK,KAAK;AAAA,iBAC3BA,EAAU,KAAK,IAAI;AAAA,mBACjBA,EAAU,KAAK,MAAM;AAAA;AAAA,aAE3BH;AAAA,WAELD;AAAA,kBACUE;AAAA,2BACSE,EAAU,KAAK,QAAQ;AAAA,wBAC1BA,EAAU,KAAK,KAAK;AAAA,sBACtB,KAAK;AAAA,oBACP,KAAK;AAAA;AAAA,YAEbH;AAAA,kBAEV,CAEQ,cAAe,CACrB,KAAK,QAAQ,oBAAoB,CACnC,CACF,EA/GEI,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GARtBd,EASnB,uBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAdtBd,EAenB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GApBtBd,EAqBnB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GA1BPd,EA2BnB,qBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAhCvBd,EAiCnB,wBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAtCPd,EAuCnB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GA5CPd,EA6CnB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAlDPd,EAmDnB,sBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAxDPd,EAyDnB,oBAK2Ba,EAAA,CAA1BE,EAAM,UAAU,GA9DEf,EA8DQ,uBA9DRA,EAArBa,EAAA,CADCG,EAAc,WAAW,GACLhB",
6
- "names": ["styles", "r", "bl_button_default", "BlButton", "s", "bl_button_default", "node", "_a", "nodeType", "isAnchor", "icon", "$", "slots", "classes", "o", "l", "__decorateClass", "e", "event", "n"]
7
- }