@trendyol/baklava 2.0.0-beta.24 → 2.0.0-beta.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import"./chunk-NZ3RGSR6.js";import n from"react";var v=new Set(["children","localName","ref","style","className"]),E=new WeakMap,x=(a,m,p,u,h)=>{let g=h==null?void 0:h[m];g!==void 0?p!==u&&((i,l,c)=>{let s=E.get(i);s===void 0&&E.set(i,s=new Map);let t=s.get(l);c!==void 0?t===void 0?(s.set(l,t={handleEvent:c}),i.addEventListener(l,t)):t.handleEvent=c:t!==void 0&&(s.delete(l),i.removeEventListener(l,t))})(a,g,p):a[m]=p},o=(a,m,p,u,h)=>{let g=a.Component,i=a.createElement,l=new Set(Object.keys(u!=null?u:{}));for(let t in p.prototype)t in HTMLElement.prototype||(v.has(t)?console.warn(`${m} 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 c extends g{constructor(){super(...arguments),this.o=null}t(e){if(this.o!==null)for(let d in this.i)x(this.o,d,this.props[d],e?e[d]:void 0,u)}componentDidMount(){this.t()}componentDidUpdate(e){this.t(e)}render(){let e=this.props._$Gl;this.h!==void 0&&this.u===e||(this.h=r=>{this.o===null&&(this.o=r),e!==null&&((b,f)=>{typeof b=="function"?b(f):b.current=f})(e,r),this.u=e});let d={ref:this.h};this.i={};for(let[r,b]of Object.entries(this.props))r!=="__forwardedRef"&&(l.has(r)?this.i[r]=b:d[r==="className"?"class":r]=b);return i(m,d)}}c.displayName=h!=null?h:p.name;let s=a.forwardRef((t,e)=>i(c,{...t,_$Gl:e},t==null?void 0:t.children));return s.displayName=c.displayName,s};var I=o(n,"bl-badge",customElements.get("bl-badge"),{}),R=o(n,"bl-button",customElements.get("bl-button"),{onClick:"bl-click"}),T=o(n,"bl-icon",customElements.get("bl-icon"),{onLoad:"bl-load",onError:"bl-error"}),k=o(n,"bl-input",customElements.get("bl-input"),{onChange:"bl-change",onInput:"bl-input"}),L=o(n,"bl-progress-indicator",customElements.get("bl-progress-indicator"),{}),M=o(n,"bl-tab-group",customElements.get("bl-tab-group"),{}),S=o(n,"bl-tooltip",customElements.get("bl-tooltip"),{onShow:"bl-tooltip-show",onHide:"bl-tooltip-hide"}),_=o(n,"bl-tab",customElements.get("bl-tab"),{onSelected:"bl-tab-selected"}),$=o(n,"bl-tab-panel",customElements.get("bl-tab-panel"),{});export{I as BlBadge,R as BlButton,T as BlIcon,k as BlInput,L as BlProgressIndicator,_ as BlTab,M as BlTabGroup,$ as BlTabPanel,S as BlTooltip};
1
+ import"./chunk-NZ3RGSR6.js";import n from"react";var f=new Set(["children","localName","ref","style","className"]),E=new WeakMap,v=(i,m,p,h,u)=>{let g=u==null?void 0:u[m];g!==void 0?p!==h&&((c,l,a)=>{let s=E.get(c);s===void 0&&E.set(c,s=new Map);let t=s.get(l);a!==void 0?t===void 0?(s.set(l,t={handleEvent:a}),c.addEventListener(l,t)):t.handleEvent=a:t!==void 0&&(s.delete(l),c.removeEventListener(l,t))})(i,g,p):i[m]=p},e=(i,m,p,h,u)=>{let g=i.Component,c=i.createElement,l=new Set(Object.keys(h!=null?h:{}));for(let t in p.prototype)t in HTMLElement.prototype||(f.has(t)?console.warn(`${m} 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 a extends g{constructor(){super(...arguments),this.o=null}t(o){if(this.o!==null)for(let b in this.i)v(this.o,b,this.props[b],o?o[b]:void 0,h)}componentDidMount(){this.t()}componentDidUpdate(o){this.t(o)}render(){let o=this.props._$Gl;this.h!==void 0&&this.u===o||(this.h=r=>{this.o===null&&(this.o=r),o!==null&&((d,x)=>{typeof d=="function"?d(x):d.current=x})(o,r),this.u=o});let b={ref:this.h};this.i={};for(let[r,d]of Object.entries(this.props))r!=="__forwardedRef"&&(l.has(r)?this.i[r]=d:b[r==="className"?"class":r]=d);return c(m,b)}}a.displayName=u!=null?u:p.name;let s=i.forwardRef((t,o)=>c(a,{...t,_$Gl:o},t==null?void 0:t.children));return s.displayName=a.displayName,s};var N=e(n,"bl-alert",customElements.get("bl-alert"),{onClose:"bl-close"}),I=e(n,"bl-badge",customElements.get("bl-badge"),{}),R=e(n,"bl-button",customElements.get("bl-button"),{onClick:"bl-click"}),T=e(n,"bl-checkbox",customElements.get("bl-checkbox"),{onChange:"bl-checkbox-change"}),L=e(n,"bl-icon",customElements.get("bl-icon"),{onLoad:"bl-load",onError:"bl-error"}),M=e(n,"bl-input",customElements.get("bl-input"),{onChange:"bl-change",onInput:"bl-input"}),S=e(n,"bl-progress-indicator",customElements.get("bl-progress-indicator"),{}),_=e(n,"bl-tab-group",customElements.get("bl-tab-group"),{}),$=e(n,"bl-tooltip",customElements.get("bl-tooltip"),{onShow:"bl-tooltip-show",onHide:"bl-tooltip-hide"}),G=e(n,"bl-tab",customElements.get("bl-tab"),{onSelected:"bl-tab-selected"}),j=e(n,"bl-tab-panel",customElements.get("bl-tab-panel"),{});export{N as BlAlert,I as BlBadge,R as BlButton,T as BlCheckbox,L as BlIcon,M as BlInput,S as BlProgressIndicator,G as BlTab,_ as BlTabGroup,j as BlTabPanel,$ 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 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 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' }\n);\n\nexport const BlProgressIndicator = createComponent(\n React,\n 'bl-progress-indicator',\n customElements.get('bl-progress-indicator'),\n {}\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 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", "BlBadge", "s", "React", "BlButton", "BlIcon", "BlInput", "BlProgressIndicator", "BlTabGroup", "BlTooltip", "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' }\n);\n\nexport const BlProgressIndicator = createComponent(\n React,\n 'bl-progress-indicator',\n customElements.get('bl-progress-indicator'),\n {}\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 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", "BlTabGroup", "BlTooltip", "BlTab", "BlTabPanel"]
7
7
  }
package/dist/baklava.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a as s}from"./chunk-CEIAWSNF.js";import{a as p}from"./chunk-DCSIJZKF.js";import{a as f}from"./chunk-5YWWSNRQ.js";import{a as u}from"./chunk-RLRHLKBD.js";import{a as r}from"./chunk-E6WXDMOY.js";import{a as e}from"./chunk-DT3I7BV7.js";import{a as l}from"./chunk-VX2FHEEO.js";import"./chunk-E2DT737L.js";import"./chunk-W53DEGK2.js";import{a as o,b as t,c as a}from"./chunk-SJW4HPSY.js";import"./chunk-72IJCTLJ.js";import"./chunk-23UFIOHV.js";import{a as d}from"./chunk-DJNJ4CN4.js";import"./chunk-S7TTXZFP.js";import"./chunk-NZ3RGSR6.js";export{r as BlBadge,e as BlButton,a as BlIcon,l as BlInput,d as BlProgressIndicator,f as BlTab,s as BlTabGroup,p as BlTabPanel,u as BlTooltip,t as getIconPath,o as setIconPath};
1
+ import{a as l}from"./chunk-CVDMDPXP.js";import{a as d}from"./chunk-DJNJ4CN4.js";import{a as s}from"./chunk-CEIAWSNF.js";import{a as f}from"./chunk-5YWWSNRQ.js";import{a as p}from"./chunk-DCSIJZKF.js";import{a as u}from"./chunk-RLRHLKBD.js";import{a as B}from"./chunk-AS43M6VT.js";import{a as r}from"./chunk-E6WXDMOY.js";import{a as e}from"./chunk-S7EEJXFV.js";import"./chunk-E2DT737L.js";import"./chunk-W53DEGK2.js";import{a as x}from"./chunk-YAJ5XHMW.js";import"./chunk-EWAVYEMK.js";import{a as o,b as t,c as a}from"./chunk-SJW4HPSY.js";import"./chunk-72IJCTLJ.js";import"./chunk-23UFIOHV.js";import"./chunk-S7TTXZFP.js";import"./chunk-NZ3RGSR6.js";export{B as BlAlert,r as BlBadge,e as BlButton,x as BlCheckbox,a as BlIcon,l as BlInput,d as BlProgressIndicator,f as BlTab,s as BlTabGroup,p as BlTabPanel,u as BlTooltip,t as getIconPath,o as setIconPath};
2
2
  //# sourceMappingURL=baklava.js.map
@@ -0,0 +1,24 @@
1
+ import{a as b}from"./chunk-E2DT737L.js";import{a as m}from"./chunk-W53DEGK2.js";import{a as u}from"./chunk-23UFIOHV.js";import{a as c,b as n,f as p,g as d,h as r}from"./chunk-S7TTXZFP.js";import{a as o}from"./chunk-NZ3RGSR6.js";var h=c`:host{display:block}.alert{--padding:var(--bl-size-m);--main-color:var(--bl-color-primary);--main-bg-color:var(--bl-color-accent-primary-background);position:relative;display:flex;align-items:flex-start;justify-content:space-between;background-color:var(--main-bg-color);color:var(--bl-color-content-primary);box-shadow:0 0 0 1px var(--main-color);border-radius:var(--bl-border-radius-s);padding:calc(var(--padding) / 2) var(--padding)}.description{font:var(--bl-font-title-3-regular)}.wrapper{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;flex:auto}.content{display:flex;align-items:center;padding:calc(var(--padding) / 2) 0;margin-right:var(--bl-size-2xs);flex:20 1 70%}.icon{margin-right:var(--bl-size-2xs);color:var(--main-color)}.text-content{display:flex;flex-direction:column}.caption{color:var(--main-color);font:var(--bl-font-title-3-medium);margin-bottom:var(--bl-size-4xs)}.action{display:flex;align-items:center;flex:1 1 0%}.caption+.description{font:var(--bl-font-caption-text)}.close-spaced{margin-top:calc(var(--padding) / 2)}:host([closed]){display:none}:host([variant='success']) .alert{--main-color:var(--bl-color-success);--main-bg-color:var(--bl-color-success-background)}:host([variant='warning']) .alert{--main-color:var(--bl-color-warning);--main-bg-color:var(--bl-color-warning-background)}:host([variant='danger']) .alert{--main-color:var(--bl-color-danger);--main-bg-color:var(--bl-color-danger-background)}`,f=h;var g=()=>({fromAttribute:a=>!a||a==="true"?!0:a==="false"?!1:a});var t=class extends p{constructor(){super(...arguments);this.variant="info";this.closable=!1;this.closed=!1}static get styles(){return[f]}open(){this.closed=!1}close(){this.closed=!0}get _hasAlertCaptionSlot(){return this.querySelector(':scope > [slot="caption"]')!==null}_closeHandler(){this.closed=!0,this.onClose(!0)}_predefinedIcons(){switch(this.variant){case"success":return"check_fill";case"danger":return"close_fill";default:return this.variant}}_getIcon(){if(!!this.icon)return this.icon===!0?this._predefinedIcons():this.icon}_initAlertActionSlot(i){i.target.assignedElements().forEach(e=>{var s;if(e.tagName!=="BL-BUTTON"){(s=e.parentNode)==null||s.removeChild(e);return}e.setAttribute("variant","secondary"),e.setAttribute("kind","text"),e.setAttribute("size","medium"),e.removeAttribute("icon")})}render(){let i=this.caption||this._hasAlertCaptionSlot?n`<span class="caption">
2
+ <slot name="caption"> ${this.caption} </slot>
3
+ </span>`:null,l=this._getIcon()?n`<bl-icon class="icon" name=${b(this._getIcon())}></bl-icon>`:null,e=m({close:!0,"close-spaced":!!i}),s=this.closable?n`<bl-button
4
+ class=${e}
5
+ label="close"
6
+ kind="text"
7
+ icon="close"
8
+ variant="secondary"
9
+ @click=${this._closeHandler}
10
+ ></bl-button>`:null,v=n`<span class="description">
11
+ <slot> ${this.description} </slot>
12
+ </span>`;return n`
13
+ <div class="alert">
14
+ <div class="wrapper">
15
+ <div class="content">
16
+ ${l}
17
+ <div class="text-content">${i} ${v}</div>
18
+ </div>
19
+ <slot class="action" name="action" @slotchange=${this._initAlertActionSlot}></slot>
20
+ </div>
21
+ ${s}
22
+ </div>
23
+ `}};o([r({reflect:!0})],t.prototype,"variant",2),o([r()],t.prototype,"description",2),o([r({converter:g()})],t.prototype,"icon",2),o([r({type:Boolean,reflect:!0})],t.prototype,"closable",2),o([r()],t.prototype,"caption",2),o([r({type:Boolean,reflect:!0})],t.prototype,"closed",2),o([u("bl-close")],t.prototype,"onClose",2),t=o([d("bl-alert")],t);export{t as a};
24
+ //# sourceMappingURL=chunk-AS43M6VT.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../src/components/alert/bl-alert.css", "../src/utilities/string-boolean.converter.ts", "../src/components/alert/bl-alert.ts"],
4
+ "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:block}.alert{--padding:var(--bl-size-m);--main-color:var(--bl-color-primary);--main-bg-color:var(--bl-color-accent-primary-background);position:relative;display:flex;align-items:flex-start;justify-content:space-between;background-color:var(--main-bg-color);color:var(--bl-color-content-primary);box-shadow:0 0 0 1px var(--main-color);border-radius:var(--bl-border-radius-s);padding:calc(var(--padding) / 2) var(--padding)}.description{font:var(--bl-font-title-3-regular)}.wrapper{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;flex:auto}.content{display:flex;align-items:center;padding:calc(var(--padding) / 2) 0;margin-right:var(--bl-size-2xs);flex:20 1 70%}.icon{margin-right:var(--bl-size-2xs);color:var(--main-color)}.text-content{display:flex;flex-direction:column}.caption{color:var(--main-color);font:var(--bl-font-title-3-medium);margin-bottom:var(--bl-size-4xs)}.action{display:flex;align-items:center;flex:1 1 0%}.caption+.description{font:var(--bl-font-caption-text)}.close-spaced{margin-top:calc(var(--padding) / 2)}:host([closed]){display:none}:host([variant='success']) .alert{--main-color:var(--bl-color-success);--main-bg-color:var(--bl-color-success-background)}:host([variant='warning']) .alert{--main-color:var(--bl-color-warning);--main-bg-color:var(--bl-color-warning-background)}:host([variant='danger']) .alert{--main-color:var(--bl-color-danger);--main-bg-color:var(--bl-color-danger-background)}`;\nexport default styles;\n", "import type { ComplexAttributeConverter } from 'lit';\n\nexport const stringBooleanConverter = (): ComplexAttributeConverter<string | boolean> => {\n return {\n fromAttribute: (value: string): string | boolean => {\n if (!value || value === 'true') return true;\n if (value === 'false') return false;\n return value;\n },\n };\n};\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport style from './bl-alert.css';\nimport '../icon/bl-icon';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { stringBooleanConverter } from '../../utilities/string-boolean.converter';\nimport { ButtonVariant, ButtonKind, ButtonSize } from '../button/bl-button';\nimport { classMap } from 'lit/directives/class-map.js';\n\nexport type AlertVariant = 'info' | 'warning' | 'success' | 'danger';\n\n/**\n * @tag bl-alert\n * @summary Baklava Alert component\n */\n\n@customElement('bl-alert')\nexport default class BlAlert extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets alert variant\n */\n @property({ reflect: true })\n variant: AlertVariant = 'info';\n\n /**\n * Sets alert description\n */\n @property()\n description?: 'string';\n\n /**\n * Allows to customize alert icon\n */\n @property({ converter: stringBooleanConverter() })\n icon?: boolean | string;\n\n /**\n * Displays a close button.\n */\n @property({ type: Boolean, reflect: true })\n closable = false;\n\n /**\n * Sets alert caption.\n */\n @property()\n caption?: string;\n\n /**\n * Sets alert components display state.\n */\n @property({ type: Boolean, reflect: true })\n closed = false;\n\n /**\n * Opens alert component.\n */\n public open() {\n this.closed = false;\n }\n\n /**\n * Closes alert component.\n */\n public close() {\n this.closed = true;\n }\n\n /**\n * Fires when close button clicked.\n */\n @event('bl-close') private onClose: EventDispatcher<boolean>;\n\n private get _hasAlertCaptionSlot() {\n return this.querySelector(':scope > [slot=\"caption\"]') !== null;\n }\n\n private _closeHandler() {\n this.closed = true;\n this.onClose(true);\n }\n\n private _predefinedIcons() {\n switch (this.variant) {\n case 'success':\n return 'check_fill';\n case 'danger':\n return 'close_fill';\n default:\n return this.variant;\n }\n }\n\n private _getIcon(): string | undefined {\n if (!this.icon) return;\n if (this.icon === true) return this._predefinedIcons();\n return this.icon;\n }\n\n private _initAlertActionSlot(event: Event) {\n const slotElements = (event.target as HTMLSlotElement).assignedElements();\n slotElements.forEach(element => {\n if (element.tagName !== 'BL-BUTTON') {\n element.parentNode?.removeChild(element);\n return;\n }\n element.setAttribute('variant', 'secondary' as ButtonVariant);\n element.setAttribute('kind', 'text' as ButtonKind);\n element.setAttribute('size', 'medium' as ButtonSize);\n element.removeAttribute('icon');\n });\n }\n\n render(): TemplateResult {\n const caption =\n this.caption || this._hasAlertCaptionSlot\n ? html`<span class=\"caption\">\n <slot name=\"caption\"> ${this.caption} </slot>\n </span>`\n : null;\n const icon = this._getIcon()\n ? html`<bl-icon class=\"icon\" name=${ifDefined(this._getIcon())}></bl-icon>`\n : null;\n\n const closeClasses = classMap({\n 'close': true,\n 'close-spaced': !!caption,\n });\n\n const closable = this.closable\n ? html`<bl-button\n class=${closeClasses}\n label=\"close\"\n kind=\"text\"\n icon=\"close\"\n variant=\"secondary\"\n @click=${this._closeHandler}\n ></bl-button>`\n : null;\n const description = html`<span class=\"description\">\n <slot> ${this.description} </slot>\n </span>`;\n\n return html`\n <div class=\"alert\">\n <div class=\"wrapper\">\n <div class=\"content\">\n ${icon}\n <div class=\"text-content\">${caption} ${description}</div>\n </div>\n <slot class=\"action\" name=\"action\" @slotchange=${this._initAlertActionSlot}></slot>\n </div>\n ${closable}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-alert': BlAlert;\n }\n}\n"],
5
+ "mappings": "oOACO,IAAMA,EAASC,47CACfC,EAAQF,ECAR,IAAMG,EAAyB,KAC7B,CACL,cAAgBC,GACV,CAACA,GAASA,IAAU,OAAe,GACnCA,IAAU,QAAgB,GACvBA,CAEX,GCSF,IAAqBC,EAArB,cAAqCC,CAAW,CAAhD,kCASE,aAAwB,OAkBxB,cAAW,GAYX,YAAS,GAtCT,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAyCO,MAAO,CACZ,KAAK,OAAS,EAChB,CAKO,OAAQ,CACb,KAAK,OAAS,EAChB,CAOA,IAAY,sBAAuB,CACjC,OAAO,KAAK,cAAc,2BAA2B,IAAM,IAC7D,CAEQ,eAAgB,CACtB,KAAK,OAAS,GACd,KAAK,QAAQ,EAAI,CACnB,CAEQ,kBAAmB,CACzB,OAAQ,KAAK,aACN,UACH,MAAO,iBACJ,SACH,MAAO,qBAEP,OAAO,KAAK,QAElB,CAEQ,UAA+B,CACrC,GAAI,EAAC,KAAK,KACV,OAAI,KAAK,OAAS,GAAa,KAAK,iBAAiB,EAC9C,KAAK,IACd,CAEQ,qBAAqBC,EAAc,CACnBA,EAAM,OAA2B,iBAAiB,EAC3D,QAAQC,GAAW,CA1GpC,IAAAC,EA2GM,GAAID,EAAQ,UAAY,YAAa,EACnCC,EAAAD,EAAQ,aAAR,MAAAC,EAAoB,YAAYD,GAChC,MACF,CACAA,EAAQ,aAAa,UAAW,WAA4B,EAC5DA,EAAQ,aAAa,OAAQ,MAAoB,EACjDA,EAAQ,aAAa,OAAQ,QAAsB,EACnDA,EAAQ,gBAAgB,MAAM,CAChC,CAAC,CACH,CAEA,QAAyB,CACvB,IAAME,EACJ,KAAK,SAAW,KAAK,qBACjBC;AAAA,oCAC0B,KAAK;AAAA,mBAE/B,KACAC,EAAO,KAAK,SAAS,EACvBD,+BAAkCE,EAAU,KAAK,SAAS,CAAC,eAC3D,KAEEC,EAAeC,EAAS,CAC5B,MAAS,GACT,eAAgB,CAAC,CAACL,CACpB,CAAC,EAEKM,EAAW,KAAK,SAClBL;AAAA,kBACUG;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKC,KAAK;AAAA,uBAEhB,KACEG,EAAcN;AAAA,eACT,KAAK;AAAA,aAGhB,OAAOA;AAAA;AAAA;AAAA;AAAA,cAIGC;AAAA,wCAC0BF,KAAWO;AAAA;AAAA,2DAEQ,KAAK;AAAA;AAAA,UAEtDD;AAAA;AAAA,KAGR,CACF,EAtIEE,EAAA,CADCC,EAAS,CAAE,QAAS,EAAK,CAAC,GARRf,EASnB,uBAMAc,EAAA,CADCC,EAAS,GAdSf,EAenB,2BAMAc,EAAA,CADCC,EAAS,CAAE,UAAWC,EAAuB,CAAE,CAAC,GApB9BhB,EAqBnB,oBAMAc,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA1BvBf,EA2BnB,wBAMAc,EAAA,CADCC,EAAS,GAhCSf,EAiCnB,uBAMAc,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAtCvBf,EAuCnB,sBAmB2Bc,EAAA,CAA1BX,EAAM,UAAU,GA1DEH,EA0DQ,uBA1DRA,EAArBc,EAAA,CADCG,EAAc,UAAU,GACJjB",
6
+ "names": ["styles", "r", "bl_alert_default", "stringBooleanConverter", "value", "BlAlert", "s", "bl_alert_default", "event", "element", "_a", "caption", "$", "icon", "l", "closeClasses", "o", "closable", "description", "__decorateClass", "e", "stringBooleanConverter", "n"]
7
+ }
@@ -0,0 +1,20 @@
1
+ import{a}from"./chunk-E2DT737L.js";import{a as b}from"./chunk-W53DEGK2.js";import{a as h}from"./chunk-EWAVYEMK.js";import{a as o}from"./chunk-23UFIOHV.js";import{a as n,b as l,f as s,g as d,h as r,i as p,j as c}from"./chunk-S7TTXZFP.js";import{a as i}from"./chunk-NZ3RGSR6.js";var x=n`:host{display:inline-block;width:200px;position:relative;--bl-input-padding-vertical:var(--bl-size-2xs);--bl-input-padding-horizontal:var(--bl-size-xs);--bl-input-border-color:var(--bl-color-border);--bl-input-icon-color:var(--bl-color-content-tertiary);--bl-input-text-color:var(--bl-color-content-primary);--bl-input-height:var(--bl-size-2xl)}input{outline:0;box-sizing:border-box;height:var(--bl-input-height);border:solid 1px var(--bl-input-border-color);width:100%;font:var(--bl-font-title-3-regular);padding:0 var(--bl-input-padding-horizontal);margin:0;border-radius:4px;color:var(--bl-input-text-color)}bl-icon{position:absolute;top:var(--bl-input-padding-vertical);right:var(--bl-input-padding-horizontal);font-size:var(--bl-size-m);z-index:1;color:var(--bl-input-icon-color)}input:focus{--bl-input-border-color:var(--bl-color-primary)}input:focus ~ bl-icon{--bl-input-icon-color:var(--bl-color-primary)}:host([label-fixed]) bl-icon{top:calc(var(--bl-input-padding-vertical) + var(--bl-size-m))}:host ::placeholder{color:var(--bl-color-content-tertiary)}:host([label]) ::placeholder{color:transparent;transition:color ease-out .4s}:host input:focus::placeholder,:host([label-fixed]) ::placeholder{color:var(--bl-color-content-tertiary)}input:disabled{background-color:var(--bl-color-primary-background);--bl-input-text-color:var(--bl-color-content-tertiary)}input.dirty:invalid{--bl-input-border-color:var(--bl-color-danger)}input.has-icon{padding-right:calc(var(--bl-size-xs) * 2 + var(--bl-size-m))}.error-icon,.invalid-text{display:none}label{position:absolute;top:var(--bl-input-padding-vertical);left:var(--bl-input-padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);color:var(--bl-color-content-tertiary);padding:0}:where(input:focus,input.has-value) ~ label{top:0;left:var(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-form-label);color:var(--bl-color-content-secondary);padding:0 var(--bl-size-3xs);background-color:var(--bl-color-primary-background);pointer-events:initial}:host([label-fixed]){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-form-label);color:var(--bl-color-content-secondary);padding:0}.dirty:invalid ~ label{color:var(--bl-color-danger)}.invalid-text,.help-text{font:var(--bl-font-title-4-regular);padding:var(--bl-size-3xs) var(--bl-input-padding-horizontal);margin:0}.invalid-text{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}.error-icon{color:var(--bl-color-danger)}.dirty:invalid ~ .invalid-text{display:block}.dirty:invalid ~ .help-text{display:none}.dirty:invalid ~ .error-icon{display:inline-block}.dirty:invalid ~ .custom-icon ~ .error-icon{display:none}.dirty:invalid ~ .custom-icon{--bl-input-icon-color:var(--bl-color-danger)}:host([size='large']){--bl-input-height:var(--bl-size-3xl);--bl-input-padding-vertical:var(--bl-size-xs);--bl-input-padding-horizontal:var(--bl-size-m)}`,v=x;var t=class extends s{constructor(){super(...arguments);this.type="text";this.value="";this.required=!1;this.size="medium";this.disabled=!1;this.labelFixed=!1;this._dirty=!1}static get styles(){return[v]}reportValidity(){this._dirty=!0,this.input.checkValidity()}get dirty(){return this._dirty}get hasValue(){var e;return((e=this.input)==null?void 0:e.value.length)>0}get _invalidText(){var e;return this.customInvalidText||((e=this.input)==null?void 0:e.validationMessage)}get _invalidState(){var e;return this.input&&!((e=this.input)!=null&&e.validity.valid)}inputHandler(){var e;this.validity=(e=this.input)==null?void 0:e.validity,this.value=this.input.value,this.onInput(this.input.value)}changeHandler(){this._dirty=!0,this.onChange(this.input.value)}firstUpdated(){var e;this.validity=(e=this.input)==null?void 0:e.validity,this._invalidState&&this.requestUpdate()}render(){let e=this._invalidState?l`<p class="invalid-text">${this._invalidText}</p>`:"",u=this.helpText?l`<p class="help-text">${this.helpText}</p>`:"",g=this.icon?l` <bl-icon class="custom-icon" name="${this.icon}"></bl-icon>`:"",m=this.label?l`<label>${this.label}</label>`:"",y={dirty:this.dirty,"has-icon":this.icon||this.dirty&&this._invalidState,"has-value":this.hasValue};return l`
2
+ <input
3
+ type=${this.type}
4
+ class=${b(y)}
5
+ .value=${h(this.value)}
6
+ placeholder="${a(this.placeholder)}"
7
+ minlength="${a(this.minlength)}"
8
+ maxlength="${a(this.maxlength)}"
9
+ min="${a(this.min)}"
10
+ max="${a(this.max)}"
11
+ ?required=${this.required}
12
+ ?disabled=${this.disabled}
13
+ @change=${this.changeHandler}
14
+ @input=${this.inputHandler}
15
+ />
16
+ ${m} ${g}
17
+ <bl-icon class="error-icon" name="alert"></bl-icon>
18
+ ${e} ${u}
19
+ `}};i([c("input")],t.prototype,"input",2),i([r({})],t.prototype,"type",2),i([r({})],t.prototype,"label",2),i([r({})],t.prototype,"placeholder",2),i([r()],t.prototype,"value",2),i([r({type:Boolean})],t.prototype,"required",2),i([r({type:Number})],t.prototype,"minlength",2),i([r({type:Number})],t.prototype,"maxlength",2),i([r({type:Number})],t.prototype,"min",2),i([r({type:Number})],t.prototype,"max",2),i([r({type:String})],t.prototype,"icon",2),i([r({type:String,reflect:!0})],t.prototype,"size",2),i([r({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([r({type:Boolean,attribute:"label-fixed"})],t.prototype,"labelFixed",2),i([r({type:String,attribute:"invalid-text"})],t.prototype,"customInvalidText",2),i([r({type:String,attribute:"help-text"})],t.prototype,"helpText",2),i([o("bl-change")],t.prototype,"onChange",2),i([o("bl-input")],t.prototype,"onInput",2),i([p()],t.prototype,"_dirty",2),t=i([d("bl-input")],t);export{t as a};
20
+ //# sourceMappingURL=chunk-CVDMDPXP.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../src/components/input/bl-input.css", "../src/components/input/bl-input.ts"],
4
+ "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;width:200px;position:relative;--bl-input-padding-vertical:var(--bl-size-2xs);--bl-input-padding-horizontal:var(--bl-size-xs);--bl-input-border-color:var(--bl-color-border);--bl-input-icon-color:var(--bl-color-content-tertiary);--bl-input-text-color:var(--bl-color-content-primary);--bl-input-height:var(--bl-size-2xl)}input{outline:0;box-sizing:border-box;height:var(--bl-input-height);border:solid 1px var(--bl-input-border-color);width:100%;font:var(--bl-font-title-3-regular);padding:0 var(--bl-input-padding-horizontal);margin:0;border-radius:4px;color:var(--bl-input-text-color)}bl-icon{position:absolute;top:var(--bl-input-padding-vertical);right:var(--bl-input-padding-horizontal);font-size:var(--bl-size-m);z-index:1;color:var(--bl-input-icon-color)}input:focus{--bl-input-border-color:var(--bl-color-primary)}input:focus ~ bl-icon{--bl-input-icon-color:var(--bl-color-primary)}:host([label-fixed]) bl-icon{top:calc(var(--bl-input-padding-vertical) + var(--bl-size-m))}:host ::placeholder{color:var(--bl-color-content-tertiary)}:host([label]) ::placeholder{color:transparent;transition:color ease-out .4s}:host input:focus::placeholder,:host([label-fixed]) ::placeholder{color:var(--bl-color-content-tertiary)}input:disabled{background-color:var(--bl-color-primary-background);--bl-input-text-color:var(--bl-color-content-tertiary)}input.dirty:invalid{--bl-input-border-color:var(--bl-color-danger)}input.has-icon{padding-right:calc(var(--bl-size-xs) * 2 + var(--bl-size-m))}.error-icon,.invalid-text{display:none}label{position:absolute;top:var(--bl-input-padding-vertical);left:var(--bl-input-padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);color:var(--bl-color-content-tertiary);padding:0}:where(input:focus,input.has-value) ~ label{top:0;left:var(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-form-label);color:var(--bl-color-content-secondary);padding:0 var(--bl-size-3xs);background-color:var(--bl-color-primary-background);pointer-events:initial}:host([label-fixed]){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-form-label);color:var(--bl-color-content-secondary);padding:0}.dirty:invalid ~ label{color:var(--bl-color-danger)}.invalid-text,.help-text{font:var(--bl-font-title-4-regular);padding:var(--bl-size-3xs) var(--bl-input-padding-horizontal);margin:0}.invalid-text{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}.error-icon{color:var(--bl-color-danger)}.dirty:invalid ~ .invalid-text{display:block}.dirty:invalid ~ .help-text{display:none}.dirty:invalid ~ .error-icon{display:inline-block}.dirty:invalid ~ .custom-icon ~ .error-icon{display:none}.dirty:invalid ~ .custom-icon{--bl-input-icon-color:var(--bl-color-danger)}:host([size='large']){--bl-input-height:var(--bl-size-3xl);--bl-input-padding-vertical:var(--bl-size-xs);--bl-input-padding-horizontal:var(--bl-size-m)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport '../icon/bl-icon';\n\nimport style from './bl-input.css';\n\nexport type InputSize = 'medium' | 'large';\n/**\n * @tag bl-input\n * @summary Baklava Input component\n */\n@customElement('bl-input')\nexport default class BlInput extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n @query('input') private input: HTMLInputElement;\n\n /**\n * Type of the input. It's used to set `type` attribute of native input inside. Only `text` and `number` is supported for now.\n */\n @property({})\n type: 'text' | 'number' = 'text';\n\n /**\n * Sets label of the input\n */\n @property({})\n label?: string;\n\n /**\n * Sets placeholder of the input\n */\n @property({})\n placeholder?: string;\n\n /**\n * Sets initial value of the input\n */\n @property()\n value = '';\n\n /**\n * Makes input a mandatory field\n */\n @property({ type: Boolean })\n required = false;\n\n /**\n * Sets minimum length of the input\n */\n @property({ type: Number })\n minlength?: number;\n\n /**\n * Sets maximum length of the input\n */\n @property({ type: Number })\n maxlength?: number;\n\n /**\n * Sets the smallest number can be entered to a `number` input\n */\n @property({ type: Number })\n min?: number;\n\n /**\n * Sets the biggest number can be entered to a `number` input\n */\n @property({ type: Number })\n max?: number;\n\n /**\n * Sets the custom icon name. `bl-icon` component is used to show an icon\n */\n @property({ type: String })\n icon?: string;\n\n /**\n * Sets input size.\n */\n @property({ type: String, reflect: true })\n size?: InputSize = 'medium';\n\n /**\n * Disables the input\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Makes label as fixed positioned\n */\n @property({ type: Boolean, attribute: 'label-fixed' })\n labelFixed = false;\n\n /**\n * Set custom error message\n */\n @property({ type: String, attribute: 'invalid-text' })\n customInvalidText?: string;\n\n /**\n * Adds help text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText?: string;\n\n /**\n * Fires when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.\n */\n @event('bl-change') private onChange: EventDispatcher<string>;\n\n /**\n * Fires when the value of an input element has been changed.\n */\n @event('bl-input') private onInput: EventDispatcher<string>;\n\n /**\n * Current validity state of input\n */\n validity: ValidityState;\n\n /**\n * Runs input validation\n */\n reportValidity() {\n this._dirty = true;\n this.input.checkValidity();\n }\n\n @state() private _dirty = false;\n\n private get dirty(): boolean {\n return this._dirty;\n }\n\n private get hasValue(): boolean {\n return this.input?.value.length > 0;\n }\n\n private get _invalidText() {\n return this.customInvalidText || this.input?.validationMessage;\n }\n\n private get _invalidState() {\n return this.input && !this.input?.validity.valid;\n }\n\n private inputHandler() {\n this.validity = this.input?.validity;\n this.value = this.input.value;\n this.onInput(this.input.value);\n }\n\n private changeHandler() {\n this._dirty = true;\n this.onChange(this.input.value);\n }\n\n firstUpdated() {\n this.validity = this.input?.validity;\n if (this._invalidState) {\n this.requestUpdate();\n }\n }\n\n render(): TemplateResult {\n const invalidMessage = this._invalidState\n ? html`<p class=\"invalid-text\">${this._invalidText}</p>`\n : ``;\n const helpMessage = this.helpText ? html`<p class=\"help-text\">${this.helpText}</p>` : ``;\n const icon = this.icon\n ? html` <bl-icon class=\"custom-icon\" name=\"${this.icon}\"></bl-icon>`\n : '';\n const label = this.label ? html`<label>${this.label}</label>` : '';\n\n const classes = {\n 'dirty': this.dirty,\n 'has-icon': this.icon || (this.dirty && this._invalidState),\n 'has-value': this.hasValue,\n };\n\n return html`\n <input\n type=${this.type}\n class=${classMap(classes)}\n .value=${live(this.value)}\n placeholder=\"${ifDefined(this.placeholder)}\"\n minlength=\"${ifDefined(this.minlength)}\"\n maxlength=\"${ifDefined(this.maxlength)}\"\n min=\"${ifDefined(this.min)}\"\n max=\"${ifDefined(this.max)}\"\n ?required=${this.required}\n ?disabled=${this.disabled}\n @change=${this.changeHandler}\n @input=${this.inputHandler}\n />\n ${label} ${icon}\n <bl-icon class=\"error-icon\" name=\"alert\"></bl-icon>\n ${invalidMessage} ${helpMessage}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-input': BlInput;\n }\n}\n"],
5
+ "mappings": "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",
6
+ "names": ["styles", "r", "bl_input_default", "BlInput", "bl_input_default", "_a", "invalidMessage", "$", "helpMessage", "icon", "label", "classes", "o", "l", "__decorateClass", "i", "e", "event", "t", "n"]
7
+ }
@@ -0,0 +1,7 @@
1
+ import{a as i,b as a,c as v}from"./chunk-72IJCTLJ.js";import{c as r,d as o,e as l}from"./chunk-S7TTXZFP.js";var{H:p}=l;var d=e=>e.strings===void 0;var A={},u=(e,t=A)=>e._$AH=t;var T=a(class extends v{constructor(e){if(super(e),e.type!==i.PROPERTY&&e.type!==i.ATTRIBUTE&&e.type!==i.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!d(e))throw Error("`live` bindings can only contain a single expression")}render(e){return e}update(e,[t]){if(t===r||t===o)return t;let s=e.element,n=e.name;if(e.type===i.PROPERTY){if(t===s[n])return r}else if(e.type===i.BOOLEAN_ATTRIBUTE){if(!!t===s.hasAttribute(n))return r}else if(e.type===i.ATTRIBUTE&&s.getAttribute(n)===t+"")return r;return u(e),t}});export{T as a};
2
+ /**
3
+ * @license
4
+ * Copyright 2020 Google LLC
5
+ * SPDX-License-Identifier: BSD-3-Clause
6
+ */
7
+ //# sourceMappingURL=chunk-EWAVYEMK.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../node_modules/lit-html/src/directive-helpers.ts", "../node_modules/lit-html/src/directives/live.ts", "../src/components/input/bl-input.css", "../src/components/input/bl-input.ts"],
4
- "sourcesContent": ["/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {_$LH, Part, DirectiveParent, TemplateResult} from './lit-html.js';\nimport {\n DirectiveResult,\n DirectiveClass,\n PartInfo,\n AttributePartInfo,\n} from './directive.js';\ntype Primitive = null | undefined | boolean | number | string | symbol | bigint;\n\nconst {_ChildPart: ChildPart} = _$LH;\n\ntype ChildPart = InstanceType<typeof ChildPart>;\n\nconst ENABLE_SHADYDOM_NOPATCH = true;\n\nconst wrap =\n ENABLE_SHADYDOM_NOPATCH &&\n window.ShadyDOM?.inUse &&\n window.ShadyDOM?.noPatch === true\n ? window.ShadyDOM!.wrap\n : (node: Node) => node;\n\n/**\n * Tests if a value is a primitive value.\n *\n * See https://tc39.github.io/ecma262/#sec-typeof-operator\n */\nexport const isPrimitive = (value: unknown): value is Primitive =>\n value === null || (typeof value != 'object' && typeof value != 'function');\n\nexport const TemplateResultType = {\n HTML: 1,\n SVG: 2,\n} as const;\n\nexport type TemplateResultType =\n typeof TemplateResultType[keyof typeof TemplateResultType];\n\n/**\n * Tests if a value is a TemplateResult.\n */\nexport const isTemplateResult = (\n value: unknown,\n type?: TemplateResultType\n): value is TemplateResult =>\n type === undefined\n ? // This property needs to remain unminified.\n (value as TemplateResult)?.['_$litType$'] !== undefined\n : (value as TemplateResult)?.['_$litType$'] === type;\n\n/**\n * Tests if a value is a DirectiveResult.\n */\nexport const isDirectiveResult = (value: unknown): value is DirectiveResult =>\n // This property needs to remain unminified.\n (value as DirectiveResult)?.['_$litDirective$'] !== undefined;\n\n/**\n * Retrieves the Directive class for a DirectiveResult\n */\nexport const getDirectiveClass = (value: unknown): DirectiveClass | undefined =>\n // This property needs to remain unminified.\n (value as DirectiveResult)?.['_$litDirective$'];\n\n/**\n * Tests whether a part has only a single-expression with no strings to\n * interpolate between.\n *\n * Only AttributePart and PropertyPart can have multiple expressions.\n * Multi-expression parts have a `strings` property and single-expression\n * parts do not.\n */\nexport const isSingleExpression = (part: PartInfo) =>\n (part as AttributePartInfo).strings === undefined;\n\nconst createMarker = () => document.createComment('');\n\n/**\n * Inserts a ChildPart into the given container ChildPart's DOM, either at the\n * end of the container ChildPart, or before the optional `refPart`.\n *\n * This does not add the part to the containerPart's committed value. That must\n * be done by callers.\n *\n * @param containerPart Part within which to add the new ChildPart\n * @param refPart Part before which to add the new ChildPart; when omitted the\n * part added to the end of the `containerPart`\n * @param part Part to insert, or undefined to create a new part\n */\nexport const insertPart = (\n containerPart: ChildPart,\n refPart?: ChildPart,\n part?: ChildPart\n): ChildPart => {\n const container = wrap(containerPart._$startNode).parentNode!;\n\n const refNode =\n refPart === undefined ? containerPart._$endNode : refPart._$startNode;\n\n if (part === undefined) {\n const startNode = wrap(container).insertBefore(createMarker(), refNode);\n const endNode = wrap(container).insertBefore(createMarker(), refNode);\n part = new ChildPart(\n startNode,\n endNode,\n containerPart,\n containerPart.options\n );\n } else {\n const endNode = wrap(part._$endNode!).nextSibling;\n const oldParent = part._$parent;\n const parentChanged = oldParent !== containerPart;\n if (parentChanged) {\n part._$reparentDisconnectables?.(containerPart);\n // Note that although `_$reparentDisconnectables` updates the part's\n // `_$parent` reference after unlinking from its current parent, that\n // method only exists if Disconnectables are present, so we need to\n // unconditionally set it here\n part._$parent = containerPart;\n // Since the _$isConnected getter is somewhat costly, only\n // read it once we know the subtree has directives that need\n // to be notified\n let newConnectionState;\n if (\n part._$notifyConnectionChanged !== undefined &&\n (newConnectionState = containerPart._$isConnected) !==\n oldParent!._$isConnected\n ) {\n part._$notifyConnectionChanged(newConnectionState);\n }\n }\n if (endNode !== refNode || parentChanged) {\n let start: Node | null = part._$startNode;\n while (start !== endNode) {\n const n: Node | null = wrap(start!).nextSibling;\n wrap(container).insertBefore(start!, refNode);\n start = n;\n }\n }\n }\n\n return part;\n};\n\n/**\n * Sets the value of a Part.\n *\n * Note that this should only be used to set/update the value of user-created\n * parts (i.e. those created using `insertPart`); it should not be used\n * by directives to set the value of the directive's container part. Directives\n * should return a value from `update`/`render` to update their part state.\n *\n * For directives that require setting their part value asynchronously, they\n * should extend `AsyncDirective` and call `this.setValue()`.\n *\n * @param part Part to set\n * @param value Value to set\n * @param index For `AttributePart`s, the index to set\n * @param directiveParent Used internally; should not be set by user\n */\nexport const setChildPartValue = <T extends ChildPart>(\n part: T,\n value: unknown,\n directiveParent: DirectiveParent = part\n): T => {\n part._$setValue(value, directiveParent);\n return part;\n};\n\n// A sentinal value that can never appear as a part value except when set by\n// live(). Used to force a dirty-check to fail and cause a re-render.\nconst RESET_VALUE = {};\n\n/**\n * Sets the committed value of a ChildPart directly without triggering the\n * commit stage of the part.\n *\n * This is useful in cases where a directive needs to update the part such\n * that the next update detects a value change or not. When value is omitted,\n * the next update will be guaranteed to be detected as a change.\n *\n * @param part\n * @param value\n */\nexport const setCommittedValue = (part: Part, value: unknown = RESET_VALUE) =>\n (part._$committedValue = value);\n\n/**\n * Returns the committed value of a ChildPart.\n *\n * The committed value is used for change detection and efficient updates of\n * the part. It can differ from the value set by the template or directive in\n * cases where the template value is transformed before being commited.\n *\n * - `TemplateResult`s are committed as a `TemplateInstance`\n * - Iterables are committed as `Array<ChildPart>`\n * - All other types are committed as the template value or value returned or\n * set by a directive.\n *\n * @param part\n */\nexport const getCommittedValue = (part: ChildPart) => part._$committedValue;\n\n/**\n * Removes a ChildPart from the DOM, including any of its content.\n *\n * @param part The Part to remove\n */\nexport const removePart = (part: ChildPart) => {\n part._$notifyConnectionChanged?.(false, true);\n let start: ChildNode | null = part._$startNode;\n const end: ChildNode | null = wrap(part._$endNode!).nextSibling;\n while (start !== end) {\n const n: ChildNode | null = wrap(start!).nextSibling;\n (wrap(start!) as ChildNode).remove();\n start = n;\n }\n};\n\nexport const clearPart = (part: ChildPart) => {\n part._$clear();\n};\n", "/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {AttributePart, noChange, nothing} from '../lit-html.js';\nimport {\n directive,\n Directive,\n DirectiveParameters,\n PartInfo,\n PartType,\n} from '../directive.js';\nimport {isSingleExpression, setCommittedValue} from '../directive-helpers.js';\n\nclass LiveDirective extends Directive {\n constructor(partInfo: PartInfo) {\n super(partInfo);\n if (\n !(\n partInfo.type === PartType.PROPERTY ||\n partInfo.type === PartType.ATTRIBUTE ||\n partInfo.type === PartType.BOOLEAN_ATTRIBUTE\n )\n ) {\n throw new Error(\n 'The `live` directive is not allowed on child or event bindings'\n );\n }\n if (!isSingleExpression(partInfo)) {\n throw new Error('`live` bindings can only contain a single expression');\n }\n }\n\n render(value: unknown) {\n return value;\n }\n\n override update(part: AttributePart, [value]: DirectiveParameters<this>) {\n if (value === noChange || value === nothing) {\n return value;\n }\n const element = part.element;\n const name = part.name;\n\n if (part.type === PartType.PROPERTY) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (value === (element as any)[name]) {\n return noChange;\n }\n } else if (part.type === PartType.BOOLEAN_ATTRIBUTE) {\n if (!!value === element.hasAttribute(name)) {\n return noChange;\n }\n } else if (part.type === PartType.ATTRIBUTE) {\n if (element.getAttribute(name) === String(value)) {\n return noChange;\n }\n }\n // Resets the part's value, causing its dirty-check to fail so that it\n // always sets the value.\n setCommittedValue(part);\n return value;\n }\n}\n\n/**\n * Checks binding values against live DOM values, instead of previously bound\n * values, when determining whether to update the value.\n *\n * This is useful for cases where the DOM value may change from outside of\n * lit-html, such as with a binding to an `<input>` element's `value` property,\n * a content editable elements text, or to a custom element that changes it's\n * own properties or attributes.\n *\n * In these cases if the DOM value changes, but the value set through lit-html\n * bindings hasn't, lit-html won't know to update the DOM value and will leave\n * it alone. If this is not what you want--if you want to overwrite the DOM\n * value with the bound value no matter what--use the `live()` directive:\n *\n * ```js\n * html`<input .value=${live(x)}>`\n * ```\n *\n * `live()` performs a strict equality check agains the live DOM value, and if\n * the new value is equal to the live value, does nothing. This means that\n * `live()` should not be used when the binding will cause a type conversion. If\n * you use `live()` with an attribute binding, make sure that only strings are\n * passed in, or the binding will update every render.\n */\nexport const live = directive(LiveDirective);\n\n/**\n * The type of the class that powers this directive. Necessary for naming the\n * directive's return type.\n */\nexport type {LiveDirective};\n", "import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;width:200px;position:relative;--bl-input-padding-vertical:var(--bl-size-2xs);--bl-input-padding-horizontal:var(--bl-size-xs);--bl-input-border-color:var(--bl-color-border);--bl-input-icon-color:var(--bl-color-content-tertiary);--bl-input-text-color:var(--bl-color-content-primary);--bl-input-height:var(--bl-size-2xl)}input{outline:0;box-sizing:border-box;height:var(--bl-input-height);border:solid 1px var(--bl-input-border-color);width:100%;font:var(--bl-font-title-3-regular);padding:0 var(--bl-input-padding-horizontal);margin:0;border-radius:4px;color:var(--bl-input-text-color)}bl-icon{position:absolute;top:var(--bl-input-padding-vertical);right:var(--bl-input-padding-horizontal);font-size:var(--bl-size-m);z-index:1;color:var(--bl-input-icon-color)}input:focus{--bl-input-border-color:var(--bl-color-primary)}:host([label-fixed]) bl-icon{top:calc(var(--bl-input-padding-vertical) + var(--bl-size-m))}input:focus ~ bl-icon{--bl-input-icon-color:var(--bl-color-primary)}:host ::placeholder{color:var(--bl-color-content-tertiary)}:host([label]) ::placeholder{color:transparent;transition:color ease-out .4s}:host input:focus::placeholder,:host([label-fixed]) ::placeholder{color:var(--bl-color-content-tertiary)}input:disabled{background-color:var(--bl-color-primary-background);--bl-input-text-color:var(--bl-color-content-tertiary)}input.dirty:invalid{--bl-input-border-color:var(--bl-color-danger)}input.has-icon{padding-right:calc(var(--bl-size-xs) * 2 + var(--bl-size-m))}.error-icon,.invalid-text{display:none}label{position:absolute;top:var(--bl-input-padding-vertical);left:var(--bl-input-padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);color:var(--bl-color-content-tertiary);padding:0}:where(input:focus,input.has-value) ~ label{top:0;left:var(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-form-label);color:var(--bl-color-content-secondary);padding:0 var(--bl-size-3xs);background-color:var(--bl-color-primary-background);pointer-events:initial}:host([label-fixed]){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-form-label);color:var(--bl-color-content-secondary);padding:0}.dirty:invalid ~ label{color:var(--bl-color-danger)}.invalid-text,.help-text{font:var(--bl-font-title-4-regular);padding:var(--bl-size-3xs) var(--bl-input-padding-horizontal);margin:0}.invalid-text{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}.error-icon{color:var(--bl-color-danger)}.dirty:invalid ~ .invalid-text{display:block}.dirty:invalid ~ .help-text{display:none}.dirty:invalid ~ .error-icon{display:inline-block}.dirty:invalid ~ .custom-icon ~ .error-icon{display:none}.dirty:invalid ~ .custom-icon{--bl-input-icon-color:var(--bl-color-danger)}:host([size='large']){--bl-input-height:var(--bl-size-3xl);--bl-input-padding-vertical:var(--bl-size-xs);--bl-input-padding-horizontal:var(--bl-size-m)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport '../icon/bl-icon';\n\nimport style from './bl-input.css';\n\nexport type InputSize = 'medium' | 'large';\n/**\n * @tag bl-input\n * @summary Baklava Input component\n */\n@customElement('bl-input')\nexport default class BlInput extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n @query('input') private input: HTMLInputElement;\n\n /**\n * Type of the input. It's used to set `type` attribute of native input inside. Only `text` and `number` is supported for now.\n */\n @property({})\n type: 'text' | 'number' = 'text';\n\n /**\n * Sets label of the input\n */\n @property({})\n label?: string;\n\n /**\n * Sets placeholder of the input\n */\n @property({})\n placeholder?: string;\n\n /**\n * Sets initial value of the input\n */\n @property()\n value = '';\n\n /**\n * Makes input a mandatory field\n */\n @property({ type: Boolean })\n required = false;\n\n /**\n * Sets minimum length of the input\n */\n @property({ type: Number })\n minlength?: number;\n\n /**\n * Sets maximum length of the input\n */\n @property({ type: Number })\n maxlength?: number;\n\n /**\n * Sets the smallest number can be entered to a `number` input\n */\n @property({ type: Number })\n min?: number;\n\n /**\n * Sets the biggest number can be entered to a `number` input\n */\n @property({ type: Number })\n max?: number;\n\n /**\n * Sets the custom icon name. `bl-icon` component is used to show an icon\n */\n @property({ type: String })\n icon?: string;\n\n /**\n * Sets input size.\n */\n @property({ type: String, reflect: true })\n size?: InputSize = 'medium';\n\n /**\n * Disables the input\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Makes label as fixed positioned\n */\n @property({ type: Boolean, attribute: 'label-fixed' })\n labelFixed = false;\n\n /**\n * Set custom error message\n */\n @property({ type: String, attribute: 'invalid-text' })\n customInvalidText?: string;\n\n /**\n * Adds help text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText?: string;\n\n /**\n * Fires when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.\n */\n @event('bl-change') private onChange: EventDispatcher<string>;\n\n /**\n * Fires when the value of an input element has been changed.\n */\n @event('bl-input') private onInput: EventDispatcher<string>;\n\n /**\n * Current validity state of input\n */\n validity: ValidityState;\n\n /**\n * Runs input validation\n */\n reportValidity() {\n this._dirty = true;\n this.input.checkValidity();\n }\n\n @state() private _dirty = false;\n\n private get dirty(): boolean {\n return this._dirty;\n }\n\n private get hasValue(): boolean {\n return this.input?.value.length > 0;\n }\n\n private get _invalidText() {\n return this.customInvalidText || this.input?.validationMessage;\n }\n\n private get _invalidState() {\n return this.input && !this.input?.validity.valid;\n }\n\n private inputHandler() {\n this.validity = this.input?.validity;\n this.value = this.input.value;\n this.onInput(this.input.value);\n }\n\n private changeHandler() {\n this._dirty = true;\n this.onChange(this.input.value);\n }\n\n firstUpdated() {\n this.validity = this.input?.validity;\n if (this._invalidState) {\n this.requestUpdate();\n }\n }\n\n render(): TemplateResult {\n const invalidMessage = this._invalidState\n ? html`<p class=\"invalid-text\">${this._invalidText}</p>`\n : ``;\n const helpMessage = this.helpText ? html`<p class=\"help-text\">${this.helpText}</p>` : ``;\n const icon = this.icon\n ? html` <bl-icon class=\"custom-icon\" name=\"${this.icon}\"></bl-icon>`\n : '';\n const label = this.label ? html`<label>${this.label}</label>` : '';\n\n const classes = {\n 'dirty': this.dirty,\n 'has-icon': this.icon || (this.dirty && this._invalidState),\n 'has-value': this.hasValue,\n };\n\n return html`\n <input\n type=${this.type}\n class=${classMap(classes)}\n .value=${live(this.value)}\n placeholder=\"${ifDefined(this.placeholder)}\"\n minlength=\"${ifDefined(this.minlength)}\"\n maxlength=\"${ifDefined(this.maxlength)}\"\n min=\"${ifDefined(this.min)}\"\n max=\"${ifDefined(this.max)}\"\n ?required=${this.required}\n ?disabled=${this.disabled}\n @change=${this.changeHandler}\n @input=${this.inputHandler}\n />\n ${label} ${icon}\n <bl-icon class=\"error-icon\" name=\"alert\"></bl-icon>\n ${invalidMessage} ${helpMessage}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-input': BlInput;\n }\n}\n"],
5
- "mappings": "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",
6
- "names": ["_ChildPart", "ChildPart", "_$LH", "isSingleExpression", "part", "strings", "RESET_VALUE", "setCommittedValue", "part", "value", "_$committedValue", "live", "directive", "Directive", "constructor", "partInfo", "super", "type", "PartType", "PROPERTY", "ATTRIBUTE", "BOOLEAN_ATTRIBUTE", "Error", "isSingleExpression", "render", "value", "update", "part", "noChange", "nothing", "element", "name", "hasAttribute", "getAttribute", "String", "setCommittedValue", "styles", "r", "bl_input_default", "BlInput", "s", "bl_input_default", "_a", "invalidMessage", "$", "helpMessage", "icon", "label", "classes", "o", "l", "__decorateClass", "i", "e", "event", "t", "n"]
3
+ "sources": ["../node_modules/lit-html/src/directive-helpers.ts", "../node_modules/lit-html/src/directives/live.ts"],
4
+ "sourcesContent": ["/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {_$LH, Part, DirectiveParent, TemplateResult} from './lit-html.js';\nimport {\n DirectiveResult,\n DirectiveClass,\n PartInfo,\n AttributePartInfo,\n} from './directive.js';\ntype Primitive = null | undefined | boolean | number | string | symbol | bigint;\n\nconst {_ChildPart: ChildPart} = _$LH;\n\ntype ChildPart = InstanceType<typeof ChildPart>;\n\nconst ENABLE_SHADYDOM_NOPATCH = true;\n\nconst wrap =\n ENABLE_SHADYDOM_NOPATCH &&\n window.ShadyDOM?.inUse &&\n window.ShadyDOM?.noPatch === true\n ? window.ShadyDOM!.wrap\n : (node: Node) => node;\n\n/**\n * Tests if a value is a primitive value.\n *\n * See https://tc39.github.io/ecma262/#sec-typeof-operator\n */\nexport const isPrimitive = (value: unknown): value is Primitive =>\n value === null || (typeof value != 'object' && typeof value != 'function');\n\nexport const TemplateResultType = {\n HTML: 1,\n SVG: 2,\n} as const;\n\nexport type TemplateResultType =\n typeof TemplateResultType[keyof typeof TemplateResultType];\n\n/**\n * Tests if a value is a TemplateResult.\n */\nexport const isTemplateResult = (\n value: unknown,\n type?: TemplateResultType\n): value is TemplateResult =>\n type === undefined\n ? // This property needs to remain unminified.\n (value as TemplateResult)?.['_$litType$'] !== undefined\n : (value as TemplateResult)?.['_$litType$'] === type;\n\n/**\n * Tests if a value is a DirectiveResult.\n */\nexport const isDirectiveResult = (value: unknown): value is DirectiveResult =>\n // This property needs to remain unminified.\n (value as DirectiveResult)?.['_$litDirective$'] !== undefined;\n\n/**\n * Retrieves the Directive class for a DirectiveResult\n */\nexport const getDirectiveClass = (value: unknown): DirectiveClass | undefined =>\n // This property needs to remain unminified.\n (value as DirectiveResult)?.['_$litDirective$'];\n\n/**\n * Tests whether a part has only a single-expression with no strings to\n * interpolate between.\n *\n * Only AttributePart and PropertyPart can have multiple expressions.\n * Multi-expression parts have a `strings` property and single-expression\n * parts do not.\n */\nexport const isSingleExpression = (part: PartInfo) =>\n (part as AttributePartInfo).strings === undefined;\n\nconst createMarker = () => document.createComment('');\n\n/**\n * Inserts a ChildPart into the given container ChildPart's DOM, either at the\n * end of the container ChildPart, or before the optional `refPart`.\n *\n * This does not add the part to the containerPart's committed value. That must\n * be done by callers.\n *\n * @param containerPart Part within which to add the new ChildPart\n * @param refPart Part before which to add the new ChildPart; when omitted the\n * part added to the end of the `containerPart`\n * @param part Part to insert, or undefined to create a new part\n */\nexport const insertPart = (\n containerPart: ChildPart,\n refPart?: ChildPart,\n part?: ChildPart\n): ChildPart => {\n const container = wrap(containerPart._$startNode).parentNode!;\n\n const refNode =\n refPart === undefined ? containerPart._$endNode : refPart._$startNode;\n\n if (part === undefined) {\n const startNode = wrap(container).insertBefore(createMarker(), refNode);\n const endNode = wrap(container).insertBefore(createMarker(), refNode);\n part = new ChildPart(\n startNode,\n endNode,\n containerPart,\n containerPart.options\n );\n } else {\n const endNode = wrap(part._$endNode!).nextSibling;\n const oldParent = part._$parent;\n const parentChanged = oldParent !== containerPart;\n if (parentChanged) {\n part._$reparentDisconnectables?.(containerPart);\n // Note that although `_$reparentDisconnectables` updates the part's\n // `_$parent` reference after unlinking from its current parent, that\n // method only exists if Disconnectables are present, so we need to\n // unconditionally set it here\n part._$parent = containerPart;\n // Since the _$isConnected getter is somewhat costly, only\n // read it once we know the subtree has directives that need\n // to be notified\n let newConnectionState;\n if (\n part._$notifyConnectionChanged !== undefined &&\n (newConnectionState = containerPart._$isConnected) !==\n oldParent!._$isConnected\n ) {\n part._$notifyConnectionChanged(newConnectionState);\n }\n }\n if (endNode !== refNode || parentChanged) {\n let start: Node | null = part._$startNode;\n while (start !== endNode) {\n const n: Node | null = wrap(start!).nextSibling;\n wrap(container).insertBefore(start!, refNode);\n start = n;\n }\n }\n }\n\n return part;\n};\n\n/**\n * Sets the value of a Part.\n *\n * Note that this should only be used to set/update the value of user-created\n * parts (i.e. those created using `insertPart`); it should not be used\n * by directives to set the value of the directive's container part. Directives\n * should return a value from `update`/`render` to update their part state.\n *\n * For directives that require setting their part value asynchronously, they\n * should extend `AsyncDirective` and call `this.setValue()`.\n *\n * @param part Part to set\n * @param value Value to set\n * @param index For `AttributePart`s, the index to set\n * @param directiveParent Used internally; should not be set by user\n */\nexport const setChildPartValue = <T extends ChildPart>(\n part: T,\n value: unknown,\n directiveParent: DirectiveParent = part\n): T => {\n part._$setValue(value, directiveParent);\n return part;\n};\n\n// A sentinal value that can never appear as a part value except when set by\n// live(). Used to force a dirty-check to fail and cause a re-render.\nconst RESET_VALUE = {};\n\n/**\n * Sets the committed value of a ChildPart directly without triggering the\n * commit stage of the part.\n *\n * This is useful in cases where a directive needs to update the part such\n * that the next update detects a value change or not. When value is omitted,\n * the next update will be guaranteed to be detected as a change.\n *\n * @param part\n * @param value\n */\nexport const setCommittedValue = (part: Part, value: unknown = RESET_VALUE) =>\n (part._$committedValue = value);\n\n/**\n * Returns the committed value of a ChildPart.\n *\n * The committed value is used for change detection and efficient updates of\n * the part. It can differ from the value set by the template or directive in\n * cases where the template value is transformed before being commited.\n *\n * - `TemplateResult`s are committed as a `TemplateInstance`\n * - Iterables are committed as `Array<ChildPart>`\n * - All other types are committed as the template value or value returned or\n * set by a directive.\n *\n * @param part\n */\nexport const getCommittedValue = (part: ChildPart) => part._$committedValue;\n\n/**\n * Removes a ChildPart from the DOM, including any of its content.\n *\n * @param part The Part to remove\n */\nexport const removePart = (part: ChildPart) => {\n part._$notifyConnectionChanged?.(false, true);\n let start: ChildNode | null = part._$startNode;\n const end: ChildNode | null = wrap(part._$endNode!).nextSibling;\n while (start !== end) {\n const n: ChildNode | null = wrap(start!).nextSibling;\n (wrap(start!) as ChildNode).remove();\n start = n;\n }\n};\n\nexport const clearPart = (part: ChildPart) => {\n part._$clear();\n};\n", "/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {AttributePart, noChange, nothing} from '../lit-html.js';\nimport {\n directive,\n Directive,\n DirectiveParameters,\n PartInfo,\n PartType,\n} from '../directive.js';\nimport {isSingleExpression, setCommittedValue} from '../directive-helpers.js';\n\nclass LiveDirective extends Directive {\n constructor(partInfo: PartInfo) {\n super(partInfo);\n if (\n !(\n partInfo.type === PartType.PROPERTY ||\n partInfo.type === PartType.ATTRIBUTE ||\n partInfo.type === PartType.BOOLEAN_ATTRIBUTE\n )\n ) {\n throw new Error(\n 'The `live` directive is not allowed on child or event bindings'\n );\n }\n if (!isSingleExpression(partInfo)) {\n throw new Error('`live` bindings can only contain a single expression');\n }\n }\n\n render(value: unknown) {\n return value;\n }\n\n override update(part: AttributePart, [value]: DirectiveParameters<this>) {\n if (value === noChange || value === nothing) {\n return value;\n }\n const element = part.element;\n const name = part.name;\n\n if (part.type === PartType.PROPERTY) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (value === (element as any)[name]) {\n return noChange;\n }\n } else if (part.type === PartType.BOOLEAN_ATTRIBUTE) {\n if (!!value === element.hasAttribute(name)) {\n return noChange;\n }\n } else if (part.type === PartType.ATTRIBUTE) {\n if (element.getAttribute(name) === String(value)) {\n return noChange;\n }\n }\n // Resets the part's value, causing its dirty-check to fail so that it\n // always sets the value.\n setCommittedValue(part);\n return value;\n }\n}\n\n/**\n * Checks binding values against live DOM values, instead of previously bound\n * values, when determining whether to update the value.\n *\n * This is useful for cases where the DOM value may change from outside of\n * lit-html, such as with a binding to an `<input>` element's `value` property,\n * a content editable elements text, or to a custom element that changes it's\n * own properties or attributes.\n *\n * In these cases if the DOM value changes, but the value set through lit-html\n * bindings hasn't, lit-html won't know to update the DOM value and will leave\n * it alone. If this is not what you want--if you want to overwrite the DOM\n * value with the bound value no matter what--use the `live()` directive:\n *\n * ```js\n * html`<input .value=${live(x)}>`\n * ```\n *\n * `live()` performs a strict equality check agains the live DOM value, and if\n * the new value is equal to the live value, does nothing. This means that\n * `live()` should not be used when the binding will cause a type conversion. If\n * you use `live()` with an attribute binding, make sure that only strings are\n * passed in, or the binding will update every render.\n */\nexport const live = directive(LiveDirective);\n\n/**\n * The type of the class that powers this directive. Necessary for naming the\n * directive's return type.\n */\nexport type {LiveDirective};\n"],
5
+ "mappings": "4GAeA,GAAA,CAAOA,EAAYC,CAAAA,EAAaC,EAAhC,IA+DaC,EAAsBC,GAChCA,EAA2BC,UADKD,OA/DnC,IAkKME,EAAc,CAAA,EAaPC,EAAoB,CAACC,EAAYC,EAAiBH,IAC5DE,EAAKE,KAAmBD,MCpGdE,EAAOC,EA3EpB,cAA4BC,CAAAA,CAC1BC,YAAYC,EAAAA,CAEV,GADAC,MAAMD,CAAAA,EAGFA,EAASE,OAASC,EAASC,UAC3BJ,EAASE,OAASC,EAASE,WAC3BL,EAASE,OAASC,EAASG,kBAG7B,MAAUC,MACR,gEAAA,EAGJ,GAAA,CAAKC,EAAmBR,CAAAA,EACtB,MAAUO,MAAM,sDAAA,CAAA,CAIpBE,OAAOC,EAAAA,CACL,OAAOA,CAAAA,CAGAC,OAAOC,EAAAA,CAAsBF,CAAAA,EAAAA,CACpC,GAAIA,IAAUG,GAAYH,IAAUI,EAClC,OAAOJ,EAET,IAAMK,EAAUH,EAAKG,QACfC,EAAOJ,EAAKI,KAElB,GAAIJ,EAAKV,OAASC,EAASC,UAEzB,GAAIM,IAAWK,EAAgBC,GAC7B,OAAOH,UAEAD,EAAKV,OAASC,EAASG,mBAChC,GAAA,CAAA,CAAMI,IAAUK,EAAQE,aAAaD,CAAAA,EACnC,OAAOH,UAEAD,EAAKV,OAASC,EAASE,WAC5BU,EAAQG,aAAaF,CAAAA,IAAiBN,EAAPS,GACjC,OAAON,EAMX,OADAO,EAAkBR,CAAAA,EACXF,CAAAA,CAAAA,CAAAA",
6
+ "names": ["_ChildPart", "ChildPart", "_$LH", "isSingleExpression", "part", "strings", "RESET_VALUE", "setCommittedValue", "part", "value", "_$committedValue", "live", "directive", "Directive", "constructor", "partInfo", "super", "type", "PartType", "PROPERTY", "ATTRIBUTE", "BOOLEAN_ATTRIBUTE", "Error", "isSingleExpression", "render", "value", "update", "part", "noChange", "nothing", "element", "name", "hasAttribute", "getAttribute", "String", "setCommittedValue"]
7
7
  }
@@ -0,0 +1,18 @@
1
+ import{a as n}from"./chunk-E2DT737L.js";import{a as h}from"./chunk-W53DEGK2.js";import{a as d}from"./chunk-23UFIOHV.js";import{a as s,b as i,f as c,g as u,h as r}from"./chunk-S7TTXZFP.js";import{a as o}from"./chunk-NZ3RGSR6.js";var p=s`:host{display:var(--bl-button-display,inline-block);max-width:100%;position:relative;--bl-button-main-color:var(--bl-color-primary);--bl-button-main-hover-color:var(--bl-color-primary-hover);--bl-button-text-hover-color:var(--bl-color-secondary-background);--bl-button-content-color:var(--bl-color-primary-background);--bl-button-bg-color:var(--bl-button-main-color);--bl-button-border-color:var(--bl-button-main-color);--bl-button-padding-vertical:var(--bl-size-2xs);--bl-button-padding-horizontal:var(--bl-size-m);--bl-button-margin-icon:var(--bl-button-padding-vertical);--bl-button-icon-size:var(--bl-size-m);--bl-button-font:var(--bl-font-title-3-medium);--bl-button-height:var(--bl-size-2xl)}.button{display:flex;gap:var(--bl-button-margin-icon);justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:var(--bl-button-height);border:solid 1px var(--bl-button-border-color);border-radius:6px;text-decoration:none;padding:var(--bl-button-padding-vertical) var(--bl-button-padding-horizontal);cursor:pointer;background-color:var(--bl-button-bg-color);color:var(--bl-button-content-color);font:var(--bl-button-font);font-kerning:none;user-select:none}:host(:hover),:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__){--bl-button-bg-color:var(--bl-button-main-hover-color);--bl-button-border-color:var(--bl-button-main-hover-color)}.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([size='small']){--bl-button-font:var(--bl-font-title-4-medium);--bl-button-padding-vertical:var(--bl-size-3xs);--bl-button-padding-horizontal:var(--bl-size-2xs);--bl-button-icon-size:var(--bl-size-s);--bl-button-height:var(--bl-size-xl)}:host([size='large']){--bl-button-font:var(--bl-font-title-3-medium);--bl-button-padding-vertical:var(--bl-size-xs);--bl-button-padding-horizontal:var(--bl-size-xl);--bl-button-margin-icon:var(--bl-size-2xs);--bl-button-height:var(--bl-size-3xl)}.button:focus{outline:0}:host ::slotted(bl-icon){font-size:var(--bl-button-icon-size)}.has-icon:not(.has-content){--bl-button-padding-horizontal:var(--bl-button-padding-vertical);--bl-button-margin-icon:0}:host([variant='secondary']){--bl-button-main-color:var(--bl-color-secondary);--bl-button-main-hover-color:var(--bl-color-secondary-hover)}:host([variant='success']){--bl-button-main-color:var(--bl-color-success);--bl-button-main-hover-color:var(--bl-color-success-hover)}:host([variant='danger']){--bl-button-main-color:var(--bl-color-danger);--bl-button-main-hover-color:var(--bl-color-danger-hover)}:host([disabled]){cursor:not-allowed;--bl-button-main-color:var(--bl-color-tertiary);--bl-button-main-hover-color:var(--bl-color-tertiary);--bl-button-content-color:var(--bl-color-content-passive);--bl-button-bg-color:var(--bl-button-main-color)}:host([disabled]) .button{pointer-events:none;text-decoration:none}:host([kind='text']){--bl-button-content-color:var(--bl-button-main-color);--bl-button-border-color:transparent;--bl-button-bg-color:transparent}:host([kind='outline']){--bl-button-bg-color:transparent;--bl-button-content-color:var(--bl-button-main-color)}:host([kind='outline']:hover:not([disabled])),:host([kind='outline'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])){--bl-button-content-color:var(--bl-color-primary-background);--bl-button-bg-color:var(--bl-button-main-hover-color)}:host([kind='text']:hover:not([disabled])),:host([kind='text'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])){--bl-button-content-color:var(--bl-button-main-hover-color);--bl-button-bg-color:var(--bl-button-text-hover-color)}`,v=p;var t=class extends c{constructor(){super(...arguments);this.variant="primary";this.kind="contained";this.size="medium";this.disabled=!1;this.target="_self"}static get styles(){return[v]}get _hasIconSlot(){return this.querySelector(':scope > [slot="icon"]')!==null}get _hasDefaultSlot(){return[...this.childNodes].some(e=>{var a;let l=e.nodeType;return l===e.TEXT_NODE&&((a=e.textContent)==null?void 0:a.trim())!==""||l===e.ELEMENT_NODE&&!e.hasAttribute("slot")})}render(){let b=!!this.href,e=this.icon?i`<bl-icon name=${this.icon}></bl-icon>`:"",l=i`<slot name="icon">${e}</slot> <span class="label"><slot></slot></span>`,a=h({button:!0,"has-icon":this.icon||this._hasIconSlot,"has-content":this._hasDefaultSlot});return b?i`<a
2
+ class=${a}
3
+ aria-disabled="${n(this.disabled)}"
4
+ aria-label="${n(this.label)}"
5
+ href=${n(this.href)}
6
+ target=${n(this.target)}
7
+ role="button"
8
+ >${l}</a
9
+ >`:i`<button
10
+ class=${a}
11
+ aria-disabled="${n(this.disabled)}"
12
+ aria-label="${n(this.label)}"
13
+ ?disabled=${this.disabled}
14
+ @click="${this._handleClick}"
15
+ >
16
+ ${l}
17
+ </button>`}_handleClick(){this.onClick("Click event fired!")}};o([r({type:String,reflect:!0})],t.prototype,"variant",2),o([r({type:String,reflect:!0})],t.prototype,"kind",2),o([r({type:String,reflect:!0})],t.prototype,"size",2),o([r({type:String})],t.prototype,"label",2),o([r({type:Boolean,reflect:!0})],t.prototype,"disabled",2),o([r({type:String})],t.prototype,"href",2),o([r({type:String})],t.prototype,"icon",2),o([r({type:String})],t.prototype,"target",2),o([d("bl-click")],t.prototype,"onClick",2),t=o([u("bl-button")],t);export{t as a};
18
+ //# sourceMappingURL=chunk-S7EEJXFV.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;--bl-button-main-color:var(--bl-color-primary);--bl-button-main-hover-color:var(--bl-color-primary-hover);--bl-button-text-hover-color:var(--bl-color-secondary-background);--bl-button-content-color:var(--bl-color-primary-background);--bl-button-bg-color:var(--bl-button-main-color);--bl-button-border-color:var(--bl-button-main-color);--bl-button-padding-vertical:var(--bl-size-2xs);--bl-button-padding-horizontal:var(--bl-size-m);--bl-button-margin-icon:var(--bl-button-padding-vertical);--bl-button-icon-size:var(--bl-size-m);--bl-button-font:var(--bl-font-title-3-medium);--bl-button-height:var(--bl-size-2xl)}.button{display:flex;gap:var(--bl-button-margin-icon);justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:var(--bl-button-height);border:solid 1px var(--bl-button-border-color);border-radius:6px;text-decoration:none;padding:var(--bl-button-padding-vertical) var(--bl-button-padding-horizontal);cursor:pointer;background-color:var(--bl-button-bg-color);color:var(--bl-button-content-color);font:var(--bl-button-font);font-kerning:none;user-select:none}:host(:hover),:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__){--bl-button-bg-color:var(--bl-button-main-hover-color);--bl-button-border-color:var(--bl-button-main-hover-color)}.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([size='small']){--bl-button-font:var(--bl-font-title-4-medium);--bl-button-padding-vertical:var(--bl-size-3xs);--bl-button-padding-horizontal:var(--bl-size-2xs);--bl-button-icon-size:var(--bl-size-s);--bl-button-height:var(--bl-size-xl)}:host([size='large']){--bl-button-font:var(--bl-font-title-3-medium);--bl-button-padding-vertical:var(--bl-size-xs);--bl-button-padding-horizontal:var(--bl-size-xl);--bl-button-margin-icon:var(--bl-size-2xs);--bl-button-height:var(--bl-size-3xl)}.button:focus{outline:0}:host ::slotted(bl-icon){font-size:var(--bl-button-icon-size)}.has-icon:not(.has-content){--bl-button-padding-horizontal:var(--bl-button-padding-vertical);--bl-button-margin-icon:0}:host([variant='secondary']){--bl-button-main-color:var(--bl-color-secondary);--bl-button-main-hover-color:var(--bl-color-secondary-hover)}:host([variant='success']){--bl-button-main-color:var(--bl-color-success);--bl-button-main-hover-color:var(--bl-color-success-hover)}:host([variant='danger']){--bl-button-main-color:var(--bl-color-danger);--bl-button-main-hover-color:var(--bl-color-danger-hover)}:host([disabled]){cursor:not-allowed;--bl-button-main-color:var(--bl-color-tertiary);--bl-button-main-hover-color:var(--bl-color-tertiary);--bl-button-content-color:var(--bl-color-content-passive);--bl-button-bg-color:var(--bl-button-main-color)}:host([disabled]) .button{pointer-events:none;text-decoration:none}:host([kind='text']){--bl-button-content-color:var(--bl-button-main-color);--bl-button-border-color:transparent;--bl-button-bg-color:transparent}:host([kind='outline']){--bl-button-bg-color:transparent;--bl-button-content-color:var(--bl-button-main-color)}:host([kind='outline']:hover:not([disabled])),:host([kind='outline'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])){--bl-button-content-color:var(--bl-color-primary-background);--bl-button-bg-color:var(--bl-button-main-hover-color)}:host([kind='text']:hover:not([disabled])),:host([kind='text'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])){--bl-button-content-color:var(--bl-button-main-hover-color);--bl-button-bg-color:var(--bl-button-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' | 'success' | 'danger';\nexport type ButtonKind = 'contained' | 'outline' | 'text';\nexport type ButtonSize = 'small' | 'medium' | 'large';\nexport type TargetType = '_blank' | '_parent' | '_self' | '_top';\n\n/**\n * @tag bl-button\n * @summary Baklava Button component\n *\n * @cssproperty --bl-button-display - Sets the display property of button. Default value is 'inline-block'.\n *\n */\n@customElement('bl-button')\nexport default class BlButton extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the button variant\n */\n @property({ type: String, reflect: true })\n variant: ButtonVariant = 'primary';\n\n /**\n * Sets the button kind\n */\n @property({ type: String, reflect: true })\n kind: ButtonKind = 'contained';\n\n /**\n * Sets the button size\n */\n @property({ type: String, reflect: true })\n size: ButtonSize = 'medium';\n\n /**\n * Sets the button label. Used for accessibility.\n */\n @property({ type: String })\n label: string;\n\n /**\n * Sets button as disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Set link url. If set, button will be rendered as anchor tag.\n */\n @property({ type: String })\n href?: string;\n\n /**\n * Sets the icon name. Shows icon with bl-icon component\n */\n @property({ type: String })\n icon?: string;\n\n /**\n * Sets the anchor target. Used when `href` is set.\n */\n @property({ type: String })\n target?: TargetType = '_self';\n\n /**\n * Fires when button clicked\n */\n @event('bl-click') private onClick: EventDispatcher<string>;\n\n get _hasIconSlot() {\n return this.querySelector(':scope > [slot=\"icon\"]') !== null;\n }\n\n get _hasDefaultSlot() {\n const childNodes = [...this.childNodes];\n return childNodes.some(node => {\n const nodeType = node.nodeType;\n // has only text node.\n if (nodeType === node.TEXT_NODE && node.textContent?.trim() !== '') {\n return true;\n }\n // has element node, it should not have slot attribute.\n if (nodeType === node.ELEMENT_NODE) {\n if (!(node as HTMLElement).hasAttribute('slot')) {\n return true;\n }\n }\n return false;\n });\n }\n\n render(): TemplateResult {\n const isAnchor = !!this.href;\n const icon = this.icon ? html`<bl-icon name=${this.icon}></bl-icon>` : '';\n const slots = html`<slot name=\"icon\">${icon}</slot> <span class=\"label\"><slot></slot></span>`;\n const classes = classMap({\n 'button': true,\n 'has-icon': this.icon || this._hasIconSlot,\n 'has-content': this._hasDefaultSlot,\n });\n\n return isAnchor\n ? html`<a\n class=${classes}\n aria-disabled=\"${ifDefined(this.disabled)}\"\n aria-label=\"${ifDefined(this.label)}\"\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n role=\"button\"\n >${slots}</a\n >`\n : html`<button\n class=${classes}\n aria-disabled=\"${ifDefined(this.disabled)}\"\n aria-label=\"${ifDefined(this.label)}\"\n ?disabled=${this.disabled}\n @click=\"${this._handleClick}\"\n >\n ${slots}\n </button>`;\n }\n\n private _handleClick() {\n this.onClick('Click event fired!');\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-button': BlButton;\n }\n}\n"],
5
+ "mappings": "oOACO,IAAMA,EAASC,u/GACfC,EAAQF,ECmBf,IAAqBG,EAArB,cAAsCC,CAAW,CAAjD,kCASE,aAAyB,UAMzB,UAAmB,YAMnB,UAAmB,SAYnB,cAAW,GAkBX,YAAsB,QAlDtB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAuDA,IAAI,cAAe,CACjB,OAAO,KAAK,cAAc,wBAAwB,IAAM,IAC1D,CAEA,IAAI,iBAAkB,CAEpB,MADmB,CAAC,GAAG,KAAK,UAAU,EACpB,KAAKC,GAAQ,CArFnC,IAAAC,EAsFM,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,EAzGEI,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,sBAK2Ba,EAAA,CAA1BE,EAAM,UAAU,GAxDEf,EAwDQ,uBAxDRA,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
+ }
@@ -0,0 +1,15 @@
1
+ import{a as d}from"./chunk-EWAVYEMK.js";import{a as n}from"./chunk-23UFIOHV.js";import{a as i,b as l,f as s,g as c,h as a}from"./chunk-S7TTXZFP.js";import{a as r}from"./chunk-NZ3RGSR6.js";var p=i`:host{display:inline-block;vertical-align:middle}label{display:flex;align-items:center;gap:var(--bl-size-2xs);color:var(--bl-color-secondary);font:var(--bl-font-title-3);cursor:pointer;user-select:none}input{appearance:none;position:absolute}.check-mark{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--bl-size-m);height:var(--bl-size-m);border:1px solid var(--bl-color-border);border-radius:var(--bl-border-radius-xs);color:var(--bl-color-primary-background);font-size:var(--bl-font-size-2xs)}:host([checked]) .label{color:var(--bl-color-primary)}:host(:is([checked],[indeterminate])) .check-mark{background-color:var(--bl-color-primary);border:0}:host([disabled]) .check-mark,:host([disabled]) .label{color:var(--bl-color-content-passive)}:host([disabled]) .check-mark{background-color:var(--bl-color-secondary-background)}`,h=p;var e=class extends s{constructor(){super(...arguments);this.checked=!1;this.disabled=!1;this.indeterminate=!1}static get styles(){return[h]}handleChange(t){let o=t.target;this.checked=o.checked,this.onChange(o.checked),this.indeterminate=!1}update(t){super.update(t),this.indeterminate&&this.checked&&(this.checked=!1,this.requestUpdate("checked",!0))}render(){let t="";return this.checked&&(t="check"),this.indeterminate&&(t="minus"),l`
2
+ <label>
3
+ <input
4
+ type="checkbox"
5
+ name="checkbox"
6
+ .checked=${d(this.checked)}
7
+ ?disabled=${this.disabled}
8
+ .indeterminate=${this.indeterminate}
9
+ @change=${this.handleChange}
10
+ />
11
+ <div class="check-mark">${t?l`<bl-icon name="${t}"></bl-icon>`:null}</div>
12
+ <span class="label"><slot></slot></span>
13
+ </label>
14
+ `}};r([a({type:Boolean,reflect:!0})],e.prototype,"checked",2),r([a({type:Boolean,reflect:!0})],e.prototype,"disabled",2),r([a({type:Boolean,reflect:!0})],e.prototype,"indeterminate",2),r([n("bl-checkbox-change")],e.prototype,"onChange",2),e=r([c("bl-checkbox")],e);export{e as a};
15
+ //# sourceMappingURL=chunk-YAJ5XHMW.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../src/components/checkbox/bl-checkbox.css", "../src/components/checkbox/bl-checkbox.ts"],
4
+ "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;vertical-align:middle}label{display:flex;align-items:center;gap:var(--bl-size-2xs);color:var(--bl-color-secondary);font:var(--bl-font-title-3);cursor:pointer;user-select:none}input{appearance:none;position:absolute}.check-mark{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--bl-size-m);height:var(--bl-size-m);border:1px solid var(--bl-color-border);border-radius:var(--bl-border-radius-xs);color:var(--bl-color-primary-background);font-size:var(--bl-font-size-2xs)}:host([checked]) .label{color:var(--bl-color-primary)}:host(:is([checked],[indeterminate])) .check-mark{background-color:var(--bl-color-primary);border:0}:host([disabled]) .check-mark,:host([disabled]) .label{color:var(--bl-color-content-passive)}:host([disabled]) .check-mark{background-color:var(--bl-color-secondary-background)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport '../icon/bl-icon';\nimport style from './bl-checkbox.css';\n\n/**\n * @tag bl-checkbox\n * @summary Baklava Checkbox component\n */\n@customElement('bl-checkbox')\nexport default class BlCheckbox extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the checked state for checkbox\n */\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n /**\n * Sets the disabled state for checkbox\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Sets the indeterminate state for checkbox\n */\n @property({ type: Boolean, reflect: true })\n indeterminate = false;\n\n /**\n * Fires whenever user change the value of the checkbox.\n */\n @event('bl-checkbox-change') private onChange: EventDispatcher<boolean>;\n\n handleChange(event: CustomEvent) {\n const target = event.target as HTMLInputElement;\n this.checked = target.checked;\n this.onChange(target.checked);\n this.indeterminate = false;\n }\n\n update(changedProperties: Map<string, unknown>) {\n super.update(changedProperties);\n if (this.indeterminate && this.checked) {\n this.checked = false;\n this.requestUpdate('checked', true);\n }\n }\n\n render(): TemplateResult {\n let icon = '';\n if (this.checked) icon = 'check';\n if (this.indeterminate) icon = 'minus';\n\n return html`\n <label>\n <input\n type=\"checkbox\"\n name=\"checkbox\"\n .checked=${live(this.checked)}\n ?disabled=${this.disabled}\n .indeterminate=${this.indeterminate}\n @change=${this.handleChange}\n />\n <div class=\"check-mark\">${icon ? html`<bl-icon name=\"${icon}\"></bl-icon>` : null}</div>\n <span class=\"label\"><slot></slot></span>\n </label>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-checkbox': BlCheckbox;\n }\n}\n"],
5
+ "mappings": "4LACO,IAAMA,EAASC,q2BACfC,EAAQF,ECUf,IAAqBG,EAArB,cAAwC,CAAW,CAAnD,kCASE,aAAU,GAMV,cAAW,GAMX,mBAAgB,GApBhB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAyBA,aAAaC,EAAoB,CAC/B,IAAMC,EAASD,EAAM,OACrB,KAAK,QAAUC,EAAO,QACtB,KAAK,SAASA,EAAO,OAAO,EAC5B,KAAK,cAAgB,EACvB,CAEA,OAAOC,EAAyC,CAC9C,MAAM,OAAOA,CAAiB,EAC1B,KAAK,eAAiB,KAAK,UAC7B,KAAK,QAAU,GACf,KAAK,cAAc,UAAW,EAAI,EAEtC,CAEA,QAAyB,CACvB,IAAIC,EAAO,GACX,OAAI,KAAK,UAASA,EAAO,SACrB,KAAK,gBAAeA,EAAO,SAExBC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKUC,EAAK,KAAK,OAAO;AAAA,sBAChB,KAAK;AAAA,2BACA,KAAK;AAAA,oBACZ,KAAK;AAAA;AAAA,kCAESF,EAAOC,mBAAsBD,gBAAqB;AAAA;AAAA;AAAA,KAIlF,CACF,EAtDEG,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GARvBT,EASnB,uBAMAQ,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAdvBT,EAenB,wBAMAQ,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GApBvBT,EAqBnB,6BAKqCQ,EAAA,CAApCN,EAAM,oBAAoB,GA1BRF,EA0BkB,wBA1BlBA,EAArBQ,EAAA,CADCE,EAAc,aAAa,GACPV",
6
+ "names": ["styles", "r", "bl_checkbox_default", "BlCheckbox", "bl_checkbox_default", "event", "target", "changedProperties", "icon", "$", "l", "__decorateClass", "e", "n"]
7
+ }
@@ -0,0 +1,2 @@
1
+ import{a}from"../../chunk-AS43M6VT.js";import"../../chunk-E2DT737L.js";import"../../chunk-W53DEGK2.js";import"../../chunk-SJW4HPSY.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-S7TTXZFP.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
2
+ //# sourceMappingURL=bl-alert.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-DT3I7BV7.js";import"../../chunk-E2DT737L.js";import"../../chunk-W53DEGK2.js";import"../../chunk-SJW4HPSY.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-S7TTXZFP.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
1
+ import{a}from"../../chunk-S7EEJXFV.js";import"../../chunk-E2DT737L.js";import"../../chunk-W53DEGK2.js";import"../../chunk-SJW4HPSY.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-S7TTXZFP.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-YAJ5XHMW.js";import"../../chunk-EWAVYEMK.js";import"../../chunk-SJW4HPSY.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-S7TTXZFP.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
2
+ //# sourceMappingURL=bl-checkbox.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-VX2FHEEO.js";import"../../chunk-E2DT737L.js";import"../../chunk-W53DEGK2.js";import"../../chunk-SJW4HPSY.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-S7TTXZFP.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
1
+ import{a}from"../../chunk-CVDMDPXP.js";import"../../chunk-E2DT737L.js";import"../../chunk-W53DEGK2.js";import"../../chunk-EWAVYEMK.js";import"../../chunk-SJW4HPSY.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-S7TTXZFP.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
2
2
  //# sourceMappingURL=bl-input.js.map
@@ -1,2 +1,2 @@
1
- import{a}from"../../chunk-CEIAWSNF.js";import"../../chunk-DCSIJZKF.js";import"../../chunk-5YWWSNRQ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-S7TTXZFP.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
1
+ import{a}from"../../chunk-CEIAWSNF.js";import"../../chunk-5YWWSNRQ.js";import"../../chunk-DCSIJZKF.js";import"../../chunk-23UFIOHV.js";import"../../chunk-S7TTXZFP.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
2
2
  //# sourceMappingURL=bl-tab-group.js.map
@@ -2,6 +2,104 @@
2
2
  "schemaVersion": "1.0.0",
3
3
  "readme": "",
4
4
  "modules": [
5
+ {
6
+ "kind": "javascript-module",
7
+ "path": "src/components/alert/bl-alert.ts",
8
+ "declarations": [
9
+ {
10
+ "kind": "class",
11
+ "description": "",
12
+ "name": "BlAlert",
13
+ "events": [
14
+ {
15
+ "type": {
16
+ "text": "CustomEvent<boolean>"
17
+ },
18
+ "description": "Fires when close button clicked.",
19
+ "name": "bl-close"
20
+ }
21
+ ],
22
+ "attributes": [
23
+ {
24
+ "name": "variant",
25
+ "type": {
26
+ "text": "AlertVariant"
27
+ },
28
+ "default": "'info'",
29
+ "description": "Sets alert variant",
30
+ "fieldName": "variant"
31
+ },
32
+ {
33
+ "name": "description",
34
+ "type": {
35
+ "text": "'string' | undefined"
36
+ },
37
+ "description": "Sets alert description",
38
+ "fieldName": "description"
39
+ },
40
+ {
41
+ "name": "icon",
42
+ "type": {
43
+ "text": "boolean | string | undefined"
44
+ },
45
+ "description": "Allows to customize alert icon",
46
+ "fieldName": "icon"
47
+ },
48
+ {
49
+ "name": "closable",
50
+ "type": {
51
+ "text": "boolean"
52
+ },
53
+ "default": "false",
54
+ "description": "Displays a close button.",
55
+ "fieldName": "closable"
56
+ },
57
+ {
58
+ "name": "caption",
59
+ "type": {
60
+ "text": "string | undefined"
61
+ },
62
+ "description": "Sets alert caption.",
63
+ "fieldName": "caption"
64
+ },
65
+ {
66
+ "name": "closed",
67
+ "type": {
68
+ "text": "boolean"
69
+ },
70
+ "default": "false",
71
+ "description": "Sets alert components display state.",
72
+ "fieldName": "closed"
73
+ }
74
+ ],
75
+ "superclass": {
76
+ "name": "LitElement",
77
+ "package": "lit"
78
+ },
79
+ "tagName": "bl-alert",
80
+ "summary": "Baklava Alert component",
81
+ "customElement": true
82
+ }
83
+ ],
84
+ "exports": [
85
+ {
86
+ "kind": "js",
87
+ "name": "default",
88
+ "declaration": {
89
+ "name": "BlAlert",
90
+ "module": "src/components/alert/bl-alert.ts"
91
+ }
92
+ },
93
+ {
94
+ "kind": "custom-element-definition",
95
+ "name": "bl-alert",
96
+ "declaration": {
97
+ "name": "BlAlert",
98
+ "module": "src/components/alert/bl-alert.ts"
99
+ }
100
+ }
101
+ ]
102
+ },
5
103
  {
6
104
  "kind": "javascript-module",
7
105
  "path": "src/components/badge/bl-badge.ts",
@@ -189,6 +287,80 @@
189
287
  }
190
288
  ]
191
289
  },
290
+ {
291
+ "kind": "javascript-module",
292
+ "path": "src/components/checkbox/bl-checkbox.ts",
293
+ "declarations": [
294
+ {
295
+ "kind": "class",
296
+ "description": "",
297
+ "name": "BlCheckbox",
298
+ "events": [
299
+ {
300
+ "type": {
301
+ "text": "CustomEvent<boolean>"
302
+ },
303
+ "description": "Fires whenever user change the value of the checkbox.",
304
+ "name": "bl-checkbox-change"
305
+ }
306
+ ],
307
+ "attributes": [
308
+ {
309
+ "name": "checked",
310
+ "type": {
311
+ "text": "boolean"
312
+ },
313
+ "default": "false",
314
+ "description": "Sets the checked state for checkbox",
315
+ "fieldName": "checked"
316
+ },
317
+ {
318
+ "name": "disabled",
319
+ "type": {
320
+ "text": "boolean"
321
+ },
322
+ "default": "false",
323
+ "description": "Sets the disabled state for checkbox",
324
+ "fieldName": "disabled"
325
+ },
326
+ {
327
+ "name": "indeterminate",
328
+ "type": {
329
+ "text": "boolean"
330
+ },
331
+ "default": "false",
332
+ "description": "Sets the indeterminate state for checkbox",
333
+ "fieldName": "indeterminate"
334
+ }
335
+ ],
336
+ "superclass": {
337
+ "name": "LitElement",
338
+ "package": "lit"
339
+ },
340
+ "tagName": "bl-checkbox",
341
+ "summary": "Baklava Checkbox component",
342
+ "customElement": true
343
+ }
344
+ ],
345
+ "exports": [
346
+ {
347
+ "kind": "js",
348
+ "name": "default",
349
+ "declaration": {
350
+ "name": "BlCheckbox",
351
+ "module": "src/components/checkbox/bl-checkbox.ts"
352
+ }
353
+ },
354
+ {
355
+ "kind": "custom-element-definition",
356
+ "name": "bl-checkbox",
357
+ "declaration": {
358
+ "name": "BlCheckbox",
359
+ "module": "src/components/checkbox/bl-checkbox.ts"
360
+ }
361
+ }
362
+ ]
363
+ },
192
364
  {
193
365
  "kind": "javascript-module",
194
366
  "path": "src/components/icon/bl-icon.ts",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trendyol/baklava",
3
- "version": "2.0.0-beta.24",
3
+ "version": "2.0.0-beta.27",
4
4
  "description": "Trendyol Baklava Design System",
5
5
  "main": "dist/baklava.js",
6
6
  "module": "dist/baklava.js",
@@ -77,6 +77,7 @@
77
77
  "@storybook/addon-interactions": "^6.5.9",
78
78
  "@storybook/addon-links": "6.5.9",
79
79
  "@storybook/addon-storysource": "6.5.9",
80
+ "@storybook/addon-viewport": "^6.5.10",
80
81
  "@storybook/jest": "^0.0.10",
81
82
  "@storybook/storybook-deployer": "^2.8.11",
82
83
  "@storybook/testing-library": "^0.0.13",
@@ -1,18 +0,0 @@
1
- import{a as n}from"./chunk-E2DT737L.js";import{a as h}from"./chunk-W53DEGK2.js";import{a as d}from"./chunk-23UFIOHV.js";import{a as s,b as a,f as c,g as u,h as r}from"./chunk-S7TTXZFP.js";import{a as o}from"./chunk-NZ3RGSR6.js";var p=s`:host{display:var(--bl-button-display,inline-block);max-width:100%;position:relative;--bl-button-main-color:var(--bl-color-primary);--bl-button-main-hover-color:var(--bl-color-primary-hover);--bl-button-content-color:var(--bl-color-primary-background);--bl-button-bg-color:var(--bl-button-main-color);--bl-button-border-color:var(--bl-button-main-color);--bl-button-padding-vertical:var(--bl-size-2xs);--bl-button-padding-horizontal:var(--bl-size-m);--bl-button-margin-icon:var(--bl-button-padding-vertical);--bl-button-icon-size:var(--bl-size-m);--bl-button-font:var(--bl-font-title-3-medium);--bl-button-height:var(--bl-size-2xl)}.button{display:flex;gap:var(--bl-button-margin-icon);justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:var(--bl-button-height);border:solid 1px var(--bl-button-border-color);border-radius:6px;text-decoration:none;padding:var(--bl-button-padding-vertical) var(--bl-button-padding-horizontal);cursor:pointer;background-color:var(--bl-button-bg-color);color:var(--bl-button-content-color);font:var(--bl-button-font);font-kerning:none;user-select:none}:host(:hover),:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__){--bl-button-bg-color:var(--bl-button-main-hover-color);--bl-button-border-color:var(--bl-button-main-hover-color)}.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([size='small']){--bl-button-font:var(--bl-font-title-4-medium);--bl-button-padding-vertical:var(--bl-size-3xs);--bl-button-padding-horizontal:var(--bl-size-2xs);--bl-button-icon-size:var(--bl-size-s);--bl-button-height:var(--bl-size-xl)}:host([size='large']){--bl-button-font:var(--bl-font-title-3-medium);--bl-button-padding-vertical:var(--bl-size-xs);--bl-button-padding-horizontal:var(--bl-size-xl);--bl-button-margin-icon:var(--bl-size-2xs);--bl-button-height:var(--bl-size-3xl)}.button:focus{outline:0}:host ::slotted(bl-icon){font-size:var(--bl-button-icon-size)}.has-icon:not(.has-content){--bl-button-padding-horizontal:var(--bl-button-padding-vertical);--bl-button-margin-icon:0}:host([variant='secondary']){--bl-button-main-color:var(--bl-color-secondary);--bl-button-main-hover-color:var(--bl-color-secondary-hover)}:host([variant='success']){--bl-button-main-color:var(--bl-color-success);--bl-button-main-hover-color:var(--bl-color-success-hover)}:host([variant='danger']){--bl-button-main-color:var(--bl-color-danger);--bl-button-main-hover-color:var(--bl-color-danger-hover)}:host([disabled]){cursor:not-allowed;--bl-button-main-color:var(--bl-color-tertiary);--bl-button-main-hover-color:var(--bl-color-tertiary);--bl-button-content-color:var(--bl-color-content-passive);--bl-button-bg-color:var(--bl-button-main-color)}:host([disabled]) .button{pointer-events:none;text-decoration:none}:host([kind='text']){--bl-button-content-color:var(--bl-button-main-color);--bl-button-border-color:transparent;--bl-button-bg-color:transparent}:host([kind='text']) .button{text-decoration:underline}:host([kind='outline']){--bl-button-bg-color:transparent;--bl-button-content-color:var(--bl-button-main-color)}:host([kind='outline']:hover:not([disabled])),:host([kind='outline'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])){--bl-button-content-color:var(--bl-color-primary-background);--bl-button-bg-color:var(--bl-button-main-hover-color)}:host([kind='text']:hover:not([disabled])),:host([kind='text'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])){--bl-button-content-color:var(--bl-button-main-hover-color)}`,v=p;var t=class extends c{constructor(){super(...arguments);this.variant="primary";this.kind="contained";this.size="medium";this.disabled=!1;this.target="_self"}static get styles(){return[v]}get _hasIconSlot(){return this.querySelector(':scope > [slot="icon"]')!==null}get _hasDefaultSlot(){return[...this.childNodes].some(e=>{var i;let l=e.nodeType;return l===e.TEXT_NODE&&((i=e.textContent)==null?void 0:i.trim())!==""||l===e.ELEMENT_NODE&&!e.hasAttribute("slot")})}render(){let b=!!this.href,e=this.icon?a`<bl-icon name=${this.icon}></bl-icon>`:"",l=a`<slot name="icon">${e}</slot> <span class="label"><slot></slot></span>`,i=h({button:!0,"has-icon":this.icon||this._hasIconSlot,"has-content":this._hasDefaultSlot});return b?a`<a
2
- class=${i}
3
- aria-disabled="${n(this.disabled)}"
4
- aria-label="${n(this.label)}"
5
- href=${n(this.href)}
6
- target=${n(this.target)}
7
- role="button"
8
- >${l}</a
9
- >`:a`<button
10
- class=${i}
11
- aria-disabled="${n(this.disabled)}"
12
- aria-label="${n(this.label)}"
13
- ?disabled=${this.disabled}
14
- @click="${this._handleClick}"
15
- >
16
- ${l}
17
- </button>`}_handleClick(){this.onClick("Click event fired!")}};o([r({type:String,reflect:!0})],t.prototype,"variant",2),o([r({type:String,reflect:!0})],t.prototype,"kind",2),o([r({type:String,reflect:!0})],t.prototype,"size",2),o([r({type:String})],t.prototype,"label",2),o([r({type:Boolean,reflect:!0})],t.prototype,"disabled",2),o([r({type:String})],t.prototype,"href",2),o([r({type:String})],t.prototype,"icon",2),o([r({type:String})],t.prototype,"target",2),o([d("bl-click")],t.prototype,"onClick",2),t=o([u("bl-button")],t);export{t as a};
18
- //# sourceMappingURL=chunk-DT3I7BV7.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../src/components/button/bl-button.css", "../src/components/button/bl-button.ts"],
4
- "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:var(--bl-button-display,inline-block);max-width:100%;position:relative;--bl-button-main-color:var(--bl-color-primary);--bl-button-main-hover-color:var(--bl-color-primary-hover);--bl-button-content-color:var(--bl-color-primary-background);--bl-button-bg-color:var(--bl-button-main-color);--bl-button-border-color:var(--bl-button-main-color);--bl-button-padding-vertical:var(--bl-size-2xs);--bl-button-padding-horizontal:var(--bl-size-m);--bl-button-margin-icon:var(--bl-button-padding-vertical);--bl-button-icon-size:var(--bl-size-m);--bl-button-font:var(--bl-font-title-3-medium);--bl-button-height:var(--bl-size-2xl)}.button{display:flex;gap:var(--bl-button-margin-icon);justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:var(--bl-button-height);border:solid 1px var(--bl-button-border-color);border-radius:6px;text-decoration:none;padding:var(--bl-button-padding-vertical) var(--bl-button-padding-horizontal);cursor:pointer;background-color:var(--bl-button-bg-color);color:var(--bl-button-content-color);font:var(--bl-button-font);font-kerning:none;user-select:none}:host(:hover),:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__){--bl-button-bg-color:var(--bl-button-main-hover-color);--bl-button-border-color:var(--bl-button-main-hover-color)}.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([size='small']){--bl-button-font:var(--bl-font-title-4-medium);--bl-button-padding-vertical:var(--bl-size-3xs);--bl-button-padding-horizontal:var(--bl-size-2xs);--bl-button-icon-size:var(--bl-size-s);--bl-button-height:var(--bl-size-xl)}:host([size='large']){--bl-button-font:var(--bl-font-title-3-medium);--bl-button-padding-vertical:var(--bl-size-xs);--bl-button-padding-horizontal:var(--bl-size-xl);--bl-button-margin-icon:var(--bl-size-2xs);--bl-button-height:var(--bl-size-3xl)}.button:focus{outline:0}:host ::slotted(bl-icon){font-size:var(--bl-button-icon-size)}.has-icon:not(.has-content){--bl-button-padding-horizontal:var(--bl-button-padding-vertical);--bl-button-margin-icon:0}:host([variant='secondary']){--bl-button-main-color:var(--bl-color-secondary);--bl-button-main-hover-color:var(--bl-color-secondary-hover)}:host([variant='success']){--bl-button-main-color:var(--bl-color-success);--bl-button-main-hover-color:var(--bl-color-success-hover)}:host([variant='danger']){--bl-button-main-color:var(--bl-color-danger);--bl-button-main-hover-color:var(--bl-color-danger-hover)}:host([disabled]){cursor:not-allowed;--bl-button-main-color:var(--bl-color-tertiary);--bl-button-main-hover-color:var(--bl-color-tertiary);--bl-button-content-color:var(--bl-color-content-passive);--bl-button-bg-color:var(--bl-button-main-color)}:host([disabled]) .button{pointer-events:none;text-decoration:none}:host([kind='text']){--bl-button-content-color:var(--bl-button-main-color);--bl-button-border-color:transparent;--bl-button-bg-color:transparent}:host([kind='text']) .button{text-decoration:underline}:host([kind='outline']){--bl-button-bg-color:transparent;--bl-button-content-color:var(--bl-button-main-color)}:host([kind='outline']:hover:not([disabled])),:host([kind='outline'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])){--bl-button-content-color:var(--bl-color-primary-background);--bl-button-bg-color:var(--bl-button-main-hover-color)}:host([kind='text']:hover:not([disabled])),:host([kind='text'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])){--bl-button-content-color:var(--bl-button-main-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' | 'success' | 'danger';\nexport type ButtonKind = 'contained' | 'outline' | 'text';\nexport type ButtonSize = 'small' | 'medium' | 'large';\nexport type TargetType = '_blank' | '_parent' | '_self' | '_top';\n\n/**\n * @tag bl-button\n * @summary Baklava Button component\n *\n * @cssproperty --bl-button-display - Sets the display property of button. Default value is 'inline-block'.\n *\n */\n@customElement('bl-button')\nexport default class BlButton extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the button variant\n */\n @property({ type: String, reflect: true })\n variant: ButtonVariant = 'primary';\n\n /**\n * Sets the button kind\n */\n @property({ type: String, reflect: true })\n kind: ButtonKind = 'contained';\n\n /**\n * Sets the button size\n */\n @property({ type: String, reflect: true })\n size: ButtonSize = 'medium';\n\n /**\n * Sets the button label. Used for accessibility.\n */\n @property({ type: String })\n label: string;\n\n /**\n * Sets button as disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Set link url. If set, button will be rendered as anchor tag.\n */\n @property({ type: String })\n href?: string;\n\n /**\n * Sets the icon name. Shows icon with bl-icon component\n */\n @property({ type: String })\n icon?: string;\n\n /**\n * Sets the anchor target. Used when `href` is set.\n */\n @property({ type: String })\n target?: TargetType = '_self';\n\n /**\n * Fires when button clicked\n */\n @event('bl-click') private onClick: EventDispatcher<string>;\n\n get _hasIconSlot() {\n return this.querySelector(':scope > [slot=\"icon\"]') !== null;\n }\n\n get _hasDefaultSlot() {\n const childNodes = [...this.childNodes];\n return childNodes.some(node => {\n const nodeType = node.nodeType;\n // has only text node.\n if (nodeType === node.TEXT_NODE && node.textContent?.trim() !== '') {\n return true;\n }\n // has element node, it should not have slot attribute.\n if (nodeType === node.ELEMENT_NODE) {\n if (!(node as HTMLElement).hasAttribute('slot')) {\n return true;\n }\n }\n return false;\n });\n }\n\n render(): TemplateResult {\n const isAnchor = !!this.href;\n const icon = this.icon ? html`<bl-icon name=${this.icon}></bl-icon>` : '';\n const slots = html`<slot name=\"icon\">${icon}</slot> <span class=\"label\"><slot></slot></span>`;\n const classes = classMap({\n 'button': true,\n 'has-icon': this.icon || this._hasIconSlot,\n 'has-content': this._hasDefaultSlot,\n });\n\n return isAnchor\n ? html`<a\n class=${classes}\n aria-disabled=\"${ifDefined(this.disabled)}\"\n aria-label=\"${ifDefined(this.label)}\"\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n role=\"button\"\n >${slots}</a\n >`\n : html`<button\n class=${classes}\n aria-disabled=\"${ifDefined(this.disabled)}\"\n aria-label=\"${ifDefined(this.label)}\"\n ?disabled=${this.disabled}\n @click=\"${this._handleClick}\"\n >\n ${slots}\n </button>`;\n }\n\n private _handleClick() {\n this.onClick('Click event fired!');\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-button': BlButton;\n }\n}\n"],
5
- "mappings": "oOACO,IAAMA,EAASC,q7GACfC,EAAQF,ECmBf,IAAqBG,EAArB,cAAsCC,CAAW,CAAjD,kCASE,aAAyB,UAMzB,UAAmB,YAMnB,UAAmB,SAYnB,cAAW,GAkBX,YAAsB,QAlDtB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAuDA,IAAI,cAAe,CACjB,OAAO,KAAK,cAAc,wBAAwB,IAAM,IAC1D,CAEA,IAAI,iBAAkB,CAEpB,MADmB,CAAC,GAAG,KAAK,UAAU,EACpB,KAAKC,GAAQ,CArFnC,IAAAC,EAsFM,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,EAzGEI,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,sBAK2Ba,EAAA,CAA1BE,EAAM,UAAU,GAxDEf,EAwDQ,uBAxDRA,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,25 +0,0 @@
1
- import{a as s}from"./chunk-E2DT737L.js";import{a as $}from"./chunk-W53DEGK2.js";import{a as o,b as f,c as x}from"./chunk-72IJCTLJ.js";import{a as c}from"./chunk-23UFIOHV.js";import{a as v,b as n,c as p,d as b,e as u,f as h,g as m,h as l,i as g,j as y}from"./chunk-S7TTXZFP.js";import{a as e}from"./chunk-NZ3RGSR6.js";var{H:M}=u;var _=r=>r.strings===void 0;var P={},T=(r,a=P)=>r._$AH=a;var A=f(class extends x{constructor(r){if(super(r),r.type!==o.PROPERTY&&r.type!==o.ATTRIBUTE&&r.type!==o.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!_(r))throw Error("`live` bindings can only contain a single expression")}render(r){return r}update(r,[a]){if(a===p||a===b)return a;let i=r.element,d=r.name;if(r.type===o.PROPERTY){if(a===i[d])return p}else if(r.type===o.BOOLEAN_ATTRIBUTE){if(!!a===i.hasAttribute(d))return p}else if(r.type===o.ATTRIBUTE&&i.getAttribute(d)===a+"")return p;return T(r),a}});var C=v`:host{display:inline-block;width:200px;position:relative;--bl-input-padding-vertical:var(--bl-size-2xs);--bl-input-padding-horizontal:var(--bl-size-xs);--bl-input-border-color:var(--bl-color-border);--bl-input-icon-color:var(--bl-color-content-tertiary);--bl-input-text-color:var(--bl-color-content-primary);--bl-input-height:var(--bl-size-2xl)}input{outline:0;box-sizing:border-box;height:var(--bl-input-height);border:solid 1px var(--bl-input-border-color);width:100%;font:var(--bl-font-title-3-regular);padding:0 var(--bl-input-padding-horizontal);margin:0;border-radius:4px;color:var(--bl-input-text-color)}bl-icon{position:absolute;top:var(--bl-input-padding-vertical);right:var(--bl-input-padding-horizontal);font-size:var(--bl-size-m);z-index:1;color:var(--bl-input-icon-color)}input:focus{--bl-input-border-color:var(--bl-color-primary)}:host([label-fixed]) bl-icon{top:calc(var(--bl-input-padding-vertical) + var(--bl-size-m))}input:focus ~ bl-icon{--bl-input-icon-color:var(--bl-color-primary)}:host ::placeholder{color:var(--bl-color-content-tertiary)}:host([label]) ::placeholder{color:transparent;transition:color ease-out .4s}:host input:focus::placeholder,:host([label-fixed]) ::placeholder{color:var(--bl-color-content-tertiary)}input:disabled{background-color:var(--bl-color-primary-background);--bl-input-text-color:var(--bl-color-content-tertiary)}input.dirty:invalid{--bl-input-border-color:var(--bl-color-danger)}input.has-icon{padding-right:calc(var(--bl-size-xs) * 2 + var(--bl-size-m))}.error-icon,.invalid-text{display:none}label{position:absolute;top:var(--bl-input-padding-vertical);left:var(--bl-input-padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);color:var(--bl-color-content-tertiary);padding:0}:where(input:focus,input.has-value) ~ label{top:0;left:var(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-form-label);color:var(--bl-color-content-secondary);padding:0 var(--bl-size-3xs);background-color:var(--bl-color-primary-background);pointer-events:initial}:host([label-fixed]){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-form-label);color:var(--bl-color-content-secondary);padding:0}.dirty:invalid ~ label{color:var(--bl-color-danger)}.invalid-text,.help-text{font:var(--bl-font-title-4-regular);padding:var(--bl-size-3xs) var(--bl-input-padding-horizontal);margin:0}.invalid-text{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}.error-icon{color:var(--bl-color-danger)}.dirty:invalid ~ .invalid-text{display:block}.dirty:invalid ~ .help-text{display:none}.dirty:invalid ~ .error-icon{display:inline-block}.dirty:invalid ~ .custom-icon ~ .error-icon{display:none}.dirty:invalid ~ .custom-icon{--bl-input-icon-color:var(--bl-color-danger)}:host([size='large']){--bl-input-height:var(--bl-size-3xl);--bl-input-padding-vertical:var(--bl-size-xs);--bl-input-padding-horizontal:var(--bl-size-m)}`,z=C;var t=class extends h{constructor(){super(...arguments);this.type="text";this.value="";this.required=!1;this.size="medium";this.disabled=!1;this.labelFixed=!1;this._dirty=!1}static get styles(){return[z]}reportValidity(){this._dirty=!0,this.input.checkValidity()}get dirty(){return this._dirty}get hasValue(){var i;return((i=this.input)==null?void 0:i.value.length)>0}get _invalidText(){var i;return this.customInvalidText||((i=this.input)==null?void 0:i.validationMessage)}get _invalidState(){var i;return this.input&&!((i=this.input)!=null&&i.validity.valid)}inputHandler(){var i;this.validity=(i=this.input)==null?void 0:i.validity,this.value=this.input.value,this.onInput(this.input.value)}changeHandler(){this._dirty=!0,this.onChange(this.input.value)}firstUpdated(){var i;this.validity=(i=this.input)==null?void 0:i.validity,this._invalidState&&this.requestUpdate()}render(){let i=this._invalidState?n`<p class="invalid-text">${this._invalidText}</p>`:"",d=this.helpText?n`<p class="help-text">${this.helpText}</p>`:"",S=this.icon?n` <bl-icon class="custom-icon" name="${this.icon}"></bl-icon>`:"",E=this.label?n`<label>${this.label}</label>`:"",R={dirty:this.dirty,"has-icon":this.icon||this.dirty&&this._invalidState,"has-value":this.hasValue};return n`
2
- <input
3
- type=${this.type}
4
- class=${$(R)}
5
- .value=${A(this.value)}
6
- placeholder="${s(this.placeholder)}"
7
- minlength="${s(this.minlength)}"
8
- maxlength="${s(this.maxlength)}"
9
- min="${s(this.min)}"
10
- max="${s(this.max)}"
11
- ?required=${this.required}
12
- ?disabled=${this.disabled}
13
- @change=${this.changeHandler}
14
- @input=${this.inputHandler}
15
- />
16
- ${E} ${S}
17
- <bl-icon class="error-icon" name="alert"></bl-icon>
18
- ${i} ${d}
19
- `}};e([y("input")],t.prototype,"input",2),e([l({})],t.prototype,"type",2),e([l({})],t.prototype,"label",2),e([l({})],t.prototype,"placeholder",2),e([l()],t.prototype,"value",2),e([l({type:Boolean})],t.prototype,"required",2),e([l({type:Number})],t.prototype,"minlength",2),e([l({type:Number})],t.prototype,"maxlength",2),e([l({type:Number})],t.prototype,"min",2),e([l({type:Number})],t.prototype,"max",2),e([l({type:String})],t.prototype,"icon",2),e([l({type:String,reflect:!0})],t.prototype,"size",2),e([l({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([l({type:Boolean,attribute:"label-fixed"})],t.prototype,"labelFixed",2),e([l({type:String,attribute:"invalid-text"})],t.prototype,"customInvalidText",2),e([l({type:String,attribute:"help-text"})],t.prototype,"helpText",2),e([c("bl-change")],t.prototype,"onChange",2),e([c("bl-input")],t.prototype,"onInput",2),e([g()],t.prototype,"_dirty",2),t=e([m("bl-input")],t);export{t as a};
20
- /**
21
- * @license
22
- * Copyright 2020 Google LLC
23
- * SPDX-License-Identifier: BSD-3-Clause
24
- */
25
- //# sourceMappingURL=chunk-VX2FHEEO.js.map