@trendyol/baklava 3.3.1 → 3.4.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/baklava.js +1 -1
- package/dist/{chunk-X5XH4HTW.js → chunk-IKYI4JCF.js} +5 -5
- package/dist/chunk-IKYI4JCF.js.map +7 -0
- package/dist/{chunk-GFBXJPT6.js → chunk-RQOF4US5.js} +7 -6
- package/dist/{chunk-GFBXJPT6.js.map → chunk-RQOF4US5.js.map} +2 -2
- package/dist/components/datepicker/bl-datepicker.d.ts.map +1 -1
- package/dist/components/datepicker/bl-datepicker.js +1 -1
- package/dist/components/radio-group/bl-radio-group.d.ts.map +1 -1
- package/dist/components/radio-group/bl-radio-group.js +1 -1
- package/dist/components/radio-group/radio/bl-radio.js +1 -1
- package/package.json +2 -2
- package/dist/chunk-X5XH4HTW.js.map +0 -7
package/dist/baklava.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{b as q}from"./chunk-EZJ3WW6Y.js";import{b as N}from"./chunk-GISZRI4I.js";import{b as z}from"./chunk-JC4VETUE.js";import{b as j}from"./chunk-5EAI6722.js";import{b as O}from"./chunk-Y2Q465TD.js";import{b as y}from"./chunk-J5YZ4HBV.js";import{b as v}from"./chunk-P5TOP3NH.js";import{a as F}from"./chunk-G4DOH6BQ.js";import{a as D}from"./chunk-STZJ3LBU.js";import{a as t}from"./chunk-APLBTZ36.js";import{a as T}from"./chunk-QDYWH7BU.js";import{c as b,f as P}from"./chunk-
|
|
1
|
+
import{b as q}from"./chunk-EZJ3WW6Y.js";import{b as N}from"./chunk-GISZRI4I.js";import{b as z}from"./chunk-JC4VETUE.js";import{b as j}from"./chunk-5EAI6722.js";import{b as O}from"./chunk-Y2Q465TD.js";import{b as y}from"./chunk-J5YZ4HBV.js";import{b as v}from"./chunk-P5TOP3NH.js";import{a as F}from"./chunk-G4DOH6BQ.js";import{a as D}from"./chunk-STZJ3LBU.js";import{a as t}from"./chunk-APLBTZ36.js";import{a as T}from"./chunk-QDYWH7BU.js";import{c as b,f as P}from"./chunk-IKYI4JCF.js";import{b as R}from"./chunk-4BLKAURK.js";import{a as C}from"./chunk-5TPDRTCU.js";import{a as g}from"./chunk-WPESQSKX.js";import{a as w}from"./chunk-QF4LGACD.js";import{a as s}from"./chunk-MWG4TBH7.js";import{b as G,d as k,f as A}from"./chunk-NXVLNG4L.js";import{b as S}from"./chunk-HYBPEELZ.js";import{b as H}from"./chunk-SBCJY5IU.js";import{a as c}from"./chunk-H4WETBHJ.js";import{a as i}from"./chunk-2IJL7HNY.js";import{a as n}from"./chunk-RER7OLAQ.js";import{b as u,e as x}from"./chunk-MWFGDECP.js";import{a as J}from"./chunk-RQOF4US5.js";import{a as h}from"./chunk-DE3A37FL.js";import{b as I}from"./chunk-UOGCEUXK.js";import"./chunk-EZSEQHRH.js";import{a as m}from"./chunk-WC5CTIZH.js";import"./chunk-23PSWIUF.js";import{b as E}from"./chunk-OTAAXK2L.js";import"./chunk-IPYZIIRV.js";import"./chunk-WEEGH2F4.js";import"./chunk-EG7U7PM3.js";import"./chunk-XDUIVR6I.js";import"./chunk-HZ6A5QFC.js";import"./chunk-AYJMIZZ3.js";import{a as B}from"./chunk-QKII4FCI.js";import{b as d}from"./chunk-4UO3W4WP.js";import{b as p}from"./chunk-ZE7GYACV.js";import"./chunk-6LT7O7T2.js";import"./chunk-HBPBDC7T.js";import{a as o}from"./chunk-ZLJF4SVG.js";import{a as l}from"./chunk-ERL6CBPO.js";import"./chunk-ECPWEUBG.js";import"./chunk-DINNT5P2.js";import{a as f}from"./chunk-T5MEA7JO.js";import{a as e,b as a,c as r}from"./chunk-BH64QNLE.js";import"./chunk-GRL4DWKG.js";import"./chunk-3USCFSFQ.js";import"./chunk-7GK5LKBV.js";import"./chunk-5MOOXA2X.js";import"./chunk-4OT5AMS5.js";import"./chunk-IZ2LK5GK.js";export{t as BlAccordion,o as BlAccordionGroup,l as BlAlert,f as BlBadge,d as BlButton,E as BlCalendar,u as BlCheckbox,x as BlCheckboxGroup,J as BlDatePicker,B as BlDialog,s as BlDrawer,A as BlDropdown,S as BlDropdownGroup,k as BlDropdownItem,r as BlIcon,m as BlInput,H as BlNotification,N as BlNotificationCard,c as BlPagination,I as BlPopover,T as BlProgressIndicator,b as BlRadio,P as BlRadioGroup,i as BlSelect,n as BlSelectOption,p as BlSpinner,G as BlSplitButton,R as BlSwitch,g as BlTab,C as BlTabGroup,w as BlTabPanel,v as BlTable,O as BlTableBody,z as BlTableCell,y as BlTableHeader,q as BlTableHeaderCell,j as BlTableRow,F as BlTag,D as BlTextarea,h as BlTooltip,a as getIconPath,e as setIconPath};
|
|
2
2
|
//# sourceMappingURL=baklava.js.map
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import{a as f}from"./chunk-XDUIVR6I.js";import{a as
|
|
1
|
+
import{a as f}from"./chunk-XDUIVR6I.js";import{a as m}from"./chunk-6LT7O7T2.js";import{a as o}from"./chunk-GRL4DWKG.js";import{a as c,b as i,c as u,e as v}from"./chunk-5MOOXA2X.js";import{a as s,b as n,f as d}from"./chunk-4OT5AMS5.js";import{d as t}from"./chunk-IZ2LK5GK.js";var y=s`:host{display:block}fieldset{border:none;padding:0}legend{font:var(--bl-font-title-3-medium);color:var(--bl-color-neutral-darker)}.options{display:flex;flex-flow:var(--bl-radio-direction,column) wrap;align-items:var(--bl-radio-group-cross-axis-item-alignment,normal);align-content:var(--bl-radio-group-cross-axis-content-alignment,normal);justify-content:var(--bl-radio-group-main-axis-content-alignment,normal);gap:var(--bl-size-m);margin-block:var(--bl-size-xs)}`,g=y;var h="bl-radio-group",b="bl-radio-change",r=class extends f(d){constructor(){super(...arguments);this.value="";this.required=!1;this.focusedOptionIndex=0}static get styles(){return[g]}get options(){return[...this.querySelectorAll(p)]}get availableOptions(){return this.options.filter(e=>!e.disabled)}updated(e){e.has("value")&&(this.setValue(this.value),this.onChange(this.value))}handleOptionChecked(e){let a=e.target;this.setValue(a.value),this.onChange(a.value)}handleKeyDown(e){if(["ArrowDown","ArrowRight"].includes(e.key))this.focusedOptionIndex++,this.focusedOptionIndex>=this.availableOptions.length&&(this.focusedOptionIndex=0),this.availableOptions[this.focusedOptionIndex].select();else if(["ArrowUp","ArrowLeft"].includes(e.key))this.focusedOptionIndex--,this.focusedOptionIndex<0&&(this.focusedOptionIndex=this.availableOptions.length-1),this.availableOptions[this.focusedOptionIndex].select();else if([" "].includes(e.key)){this.availableOptions[this.focusedOptionIndex].select();return}else return;this.availableOptions[this.focusedOptionIndex].focus(),e.preventDefault()}connectedCallback(){super.connectedCallback(),this.tabIndex=0,this.addEventListener("focus",this.handleFocus),this.addEventListener("keydown",this.handleKeyDown)}handleFocus(){this.availableOptions[this.focusedOptionIndex].focus()}render(){return n`<fieldset role="radiogroup" aria-labelledby="label" aria-required=${this.required}>
|
|
2
2
|
<legend id="label">${this.label}</legend>
|
|
3
3
|
<div class="options" @bl-checked=${this.handleOptionChecked}>
|
|
4
4
|
<slot></slot>
|
|
5
5
|
</div>
|
|
6
|
-
</fieldset>`}};t([
|
|
6
|
+
</fieldset>`}};t([i({type:String})],r.prototype,"label",2),t([i()],r.prototype,"value",2),t([i({type:Boolean,reflect:!0})],r.prototype,"required",2),t([o("bl-radio-change")],r.prototype,"onChange",2),r=t([c(h)],r);var O=s`:host{cursor:pointer;outline:0}.wrapper{--size:var(--bl-size-m);outline:0}#label{display:flex;font:var(--bl-font-title-3-regular);line-height:normal;align-items:var(--bl-radio-align-items,center);margin-block:0;color:var(--bl-color-neutral-darker);gap:var(--bl-size-2xs)}#label::before{content:"";display:inline-block;box-sizing:border-box;min-width:var(--size);min-height:var(--size);max-width:var(--size);max-height:var(--size);background-color:#fff;border-radius:var(--bl-border-radius-circle);border:solid 1px var(--bl-color-neutral-lighter)}.selected #label::before{border-width:var(--bl-size-3xs);border-color:var(--bl-color-primary)}.selected #label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) #label,:host(:hover) #label{color:var(--bl-color-primary)}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) .wrapper{--size:calc(var(--bl-size-m) - 2px)}:host([disabled]) #label{color:var(--bl-color-neutral-light)}:host([disabled]) #label::before{background-color:var(--bl-color-neutral-lightest);border-width:0;box-shadow:0 0 0 1px var(--bl-color-neutral-lighter)}:host([disabled]) .selected #label::before{background-color:var(--bl-color-neutral-light);border-color:var(--bl-color-neutral-lightest);border-width:calc(var(--bl-size-3xs) - 1px)}.wrapper:focus-visible #label::before{box-shadow:0 0 0 1px #fff,0 0 0 3px var(--bl-color-primary)}`,x=O;var p="bl-radio",W="bl-checked",l=class extends d{constructor(){super(...arguments);this.disabled=!1;this.selected=!1;this.handleFieldValueChange=e=>{let a=e.detail;this.selected=a===this.value}}static get styles(){return[x]}select(){this.selected=!0,this.onChecked(this.value)}get checked(){return this.selected}focus(){this.radioElement.tabIndex=0,this.radioElement.focus(),this.onFocus(this.value)}blur(){this.radioElement.tabIndex=-1,this.onBlur(this.value)}connectedCallback(){var e;super.connectedCallback(),this.field=this.closest(h),this.field||console.warn("bl-radio is designed to be used inside a bl-radio-group",this),(e=this.field)==null||e.addEventListener(b,this.handleFieldValueChange)}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.field)==null||e.removeEventListener(b,this.handleFieldValueChange)}render(){let e=m({wrapper:!0,selected:this.selected});return n`<div
|
|
7
7
|
class=${e}
|
|
8
8
|
role="radio"
|
|
9
9
|
aria-labelledby="label"
|
|
10
10
|
aria-disabled=${this.disabled}
|
|
11
|
-
aria-
|
|
11
|
+
aria-checked=${this.selected}
|
|
12
12
|
@blur=${this.blur}
|
|
13
13
|
@click=${this.select}
|
|
14
14
|
>
|
|
15
15
|
<p id="label"><slot></slot></p>
|
|
16
|
-
</div>`}};t([
|
|
17
|
-
//# sourceMappingURL=chunk-
|
|
16
|
+
</div>`}};t([i()],l.prototype,"name",2),t([i()],l.prototype,"value",2),t([i({type:Boolean,reflect:!0})],l.prototype,"disabled",2),t([u()],l.prototype,"selected",2),t([o("bl-checked")],l.prototype,"onChecked",2),t([o("bl-focus")],l.prototype,"onFocus",2),t([o("bl-blur")],l.prototype,"onBlur",2),t([v("[role=radio]")],l.prototype,"radioElement",2),l=t([c(p)],l);export{p as a,W as b,l as c,h as d,b as e,r as f};
|
|
17
|
+
//# sourceMappingURL=chunk-IKYI4JCF.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/radio-group/bl-radio-group.css", "../src/components/radio-group/bl-radio-group.ts", "../src/components/radio-group/radio/bl-radio.css", "../src/components/radio-group/radio/bl-radio.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:block}fieldset{border:none;padding:0}legend{font:var(--bl-font-title-3-medium);color:var(--bl-color-neutral-darker)}.options{display:flex;flex-flow:var(--bl-radio-direction,column) wrap;align-items:var(--bl-radio-group-cross-axis-item-alignment,normal);align-content:var(--bl-radio-group-cross-axis-content-alignment,normal);justify-content:var(--bl-radio-group-main-axis-content-alignment,normal);gap:var(--bl-size-m);margin-block:var(--bl-size-xs)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { FormControlMixin } from \"@open-wc/form-control\";\nimport \"element-internals-polyfill\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport style from \"./bl-radio-group.css\";\nimport BlRadio, { blRadioTag } from \"./radio/bl-radio\";\n\nexport const blRadioGroupTag = \"bl-radio-group\";\n\nexport const blChangeEventName = \"bl-radio-change\";\n\n/**\n * @tag bl-radio-group\n * @summary Baklava Button component\n *\n * @cssproperty [--bl-radio-direction=row] Can be used for showing radio options as columns instead of rows. Options are `row` or `column`\n * @cssproperty [--bl-radio-group-cross-axis-item-alignment=normal] Can be used for aligning radio items on cross axis. Acts same with align-item\n * @cssproperty [--bl-radio-group-cross-axis-content-alignment=normal] Can be used for aligning radio group content on cross axis. Acts same with align-content\n * @cssproperty [--bl-radio-group-main-axis-content-alignment=normal] Can be used for aligning radio group content on main axis. Acts same with justify-content\n */\n@customElement(blRadioGroupTag)\nexport default class BlRadioGroup extends FormControlMixin(LitElement) {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the radio group label\n */\n @property({ type: String })\n label: string;\n\n /**\n * Set and gets the actual value of the field\n */\n @property()\n value = \"\";\n\n /**\n * Sets option as required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n get options(): BlRadio[] {\n return [...this.querySelectorAll(blRadioTag)];\n }\n\n get availableOptions(): BlRadio[] {\n return this.options.filter(option => !option.disabled);\n }\n\n updated(changedProperties: Map<string, unknown>): void {\n if (changedProperties.has(\"value\")) {\n this.setValue(this.value);\n this.onChange(this.value);\n }\n }\n\n /**\n * Fires when radio group value changed\n */\n @event(\"bl-radio-change\") private onChange: EventDispatcher<string>;\n\n private focusedOptionIndex = 0;\n\n private handleOptionChecked(event: CustomEvent) {\n const checkedOption = event.target as BlRadio;\n\n this.setValue(checkedOption.value);\n this.onChange(checkedOption.value);\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n // Next option\n if ([\"ArrowDown\", \"ArrowRight\"].includes(event.key)) {\n this.focusedOptionIndex++;\n if (this.focusedOptionIndex >= this.availableOptions.length) {\n this.focusedOptionIndex = 0; // Wrap around to the first option\n }\n this.availableOptions[this.focusedOptionIndex].select();\n\n // Previous option\n } else if ([\"ArrowUp\", \"ArrowLeft\"].includes(event.key)) {\n this.focusedOptionIndex--;\n if (this.focusedOptionIndex < 0) {\n this.focusedOptionIndex = this.availableOptions.length - 1; // Wrap around to the last option\n }\n this.availableOptions[this.focusedOptionIndex].select();\n\n // Select option\n } else if ([\" \"].includes(event.key)) {\n this.availableOptions[this.focusedOptionIndex].select();\n return;\n } else {\n // Other keys are not our interest here\n return;\n }\n\n this.availableOptions[this.focusedOptionIndex].focus();\n\n event.preventDefault();\n }\n connectedCallback(): void {\n super.connectedCallback();\n\n this.tabIndex = 0;\n this.addEventListener(\"focus\", this.handleFocus);\n this.addEventListener(\"keydown\", this.handleKeyDown);\n }\n\n private handleFocus() {\n this.availableOptions[this.focusedOptionIndex].focus();\n }\n\n render(): TemplateResult {\n return html`<fieldset role=\"radiogroup\" aria-labelledby=\"label\" aria-required=${this.required}>\n <legend id=\"label\">${this.label}</legend>\n <div class=\"options\" @bl-checked=${this.handleOptionChecked}>\n <slot></slot>\n </div>\n </fieldset>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blRadioGroupTag]: BlRadioGroup;\n }\n interface HTMLElementEventMap {\n [blChangeEventName]: CustomEvent<string>;\n }\n}\n", "import {css} from 'lit';\nexport const styles = css`:host{cursor:pointer;outline:0}.wrapper{--size:var(--bl-size-m);outline:0}#label{display:flex;font:var(--bl-font-title-3-regular);line-height:normal;align-items:var(--bl-radio-align-items,center);margin-block:0;color:var(--bl-color-neutral-darker);gap:var(--bl-size-2xs)}#label::before{content:\"\";display:inline-block;box-sizing:border-box;min-width:var(--size);min-height:var(--size);max-width:var(--size);max-height:var(--size);background-color:#fff;border-radius:var(--bl-border-radius-circle);border:solid 1px var(--bl-color-neutral-lighter)}.selected #label::before{border-width:var(--bl-size-3xs);border-color:var(--bl-color-primary)}.selected #label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) #label,:host(:hover) #label{color:var(--bl-color-primary)}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) .wrapper{--size:calc(var(--bl-size-m) - 2px)}:host([disabled]) #label{color:var(--bl-color-neutral-light)}:host([disabled]) #label::before{background-color:var(--bl-color-neutral-lightest);border-width:0;box-shadow:0 0 0 1px var(--bl-color-neutral-lighter)}:host([disabled]) .selected #label::before{background-color:var(--bl-color-neutral-light);border-color:var(--bl-color-neutral-lightest);border-width:calc(var(--bl-size-3xs) - 1px)}.wrapper:focus-visible #label::before{box-shadow:0 0 0 1px #fff,0 0 0 3px var(--bl-color-primary)}`;\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 { event, EventDispatcher } from \"../../../utilities/event\";\nimport type BlRadioGroup from \"../bl-radio-group\";\nimport { blChangeEventName, blRadioGroupTag } from \"../bl-radio-group\";\nimport style from \"./bl-radio.css\";\n\nexport const blRadioTag = \"bl-radio\";\n\nexport const blCheckedEventName = \"bl-checked\";\n\n/**\n * @tag bl-radio\n * @summary Baklava Radio Option component\n *\n * @cssprop [--bl-radio-align-items=center] Align items of radio option\n */\n@customElement(blRadioTag)\nexport default class BlRadio extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n @property()\n name: string;\n\n @property()\n value: string;\n\n /**\n * Sets option as disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @state() private selected = false;\n\n /**\n * Fires when radio is checked\n */\n @event(\"bl-checked\") private onChecked: EventDispatcher<string>;\n\n /**\n * Fires when radio is blurred\n */\n @event(\"bl-focus\") private onFocus: EventDispatcher<string>;\n\n /**\n * Fires when radio is blurred\n */\n @event(\"bl-blur\") private onBlur: EventDispatcher<string>;\n\n /**\n * Sets this option selected\n */\n select() {\n this.selected = true;\n this.onChecked(this.value);\n }\n\n /**\n * Readonly property to determine if option is currently checked\n */\n get checked() {\n return this.selected;\n }\n\n @query(\"[role=radio]\") private radioElement: HTMLElement;\n\n /**\n * Focuses this option\n */\n focus() {\n this.radioElement.tabIndex = 0;\n this.radioElement.focus();\n this.onFocus(this.value);\n }\n\n /**\n * Blurs from this option\n */\n blur() {\n this.radioElement.tabIndex = -1;\n this.onBlur(this.value);\n }\n\n private handleFieldValueChange = (event: CustomEvent<string>) => {\n const newValue = event.detail;\n\n this.selected = newValue === this.value;\n };\n\n private field: BlRadioGroup | null;\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.field = this.closest<BlRadioGroup>(blRadioGroupTag);\n\n if (!this.field) {\n console.warn(\"bl-radio is designed to be used inside a bl-radio-group\", this);\n }\n\n this.field?.addEventListener(blChangeEventName, this.handleFieldValueChange);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.field?.removeEventListener(blChangeEventName, this.handleFieldValueChange);\n }\n\n render(): TemplateResult {\n const classes = classMap({\n wrapper: true,\n selected: this.selected,\n });\n\n return html`<div\n class=${classes}\n role=\"radio\"\n aria-labelledby=\"label\"\n aria-disabled=${this.disabled}\n aria-checked=${this.selected}\n @blur=${this.blur}\n @click=${this.select}\n >\n <p id=\"label\"><slot></slot></p>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blRadioTag]: BlRadio;\n }\n interface HTMLElementEventMap {\n [blCheckedEventName]: CustomEvent<string>;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["styles", "i", "bl_radio_group_default", "blRadioGroupTag", "blChangeEventName", "BlRadioGroup", "FormControlMixin", "s", "bl_radio_group_default", "blRadioTag", "option", "changedProperties", "event", "checkedOption", "x", "__decorateClass", "e", "styles", "i", "bl_radio_default", "blRadioTag", "blCheckedEventName", "BlRadio", "s", "event", "newValue", "bl_radio_default", "_a", "blRadioGroupTag", "blChangeEventName", "classes", "o", "x", "__decorateClass", "e", "t", "i"]
|
|
7
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as g}from"./chunk-OTAAXK2L.js";import{a as f}from"./chunk-GRL4DWKG.js";import{a as b,b as r,c,e as _}from"./chunk-5MOOXA2X.js";import{a as m,b as p}from"./chunk-4OT5AMS5.js";import{d as o}from"./chunk-IZ2LK5GK.js";var D=m`:host{width:314px;display:block}.datepicker-content{--bl-input-cursor:pointer;--icon-size:var(--line-height);--icon-color:var(--bl-color-neutral-light);width:100%;position:relative;display:grid}.datepicker-input{width:var(--bl-datepicker-input-width,auto);white-space:nowrap;text-overflow:ellipsis}.icon-container{display:flex;gap:var(--bl-size-3xs);align-items:center}.calendar-icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;margin-right:var(--label-padding);font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.action-divider{display:block;height:var(--bl-size-m);width:1px;background-color:var(--bl-color-neutral-lighter);margin-right:var(--bl-size-3xs)}bl-popover{--bl-popover-padding:0;--bl-popover-background-color:transparent}`,E=D;var i=class extends g{constructor(){super(...arguments);this.size="medium";this.labelFixed=!1;this.valueFormatter=null;this._inputValue="";this._floatingDateCount=0;this._fittingDateCount=0}static get styles(){return[E]}defaultInputValueFormatter(){var t,e,n,
|
|
1
|
+
import{a as g}from"./chunk-OTAAXK2L.js";import{a as f}from"./chunk-GRL4DWKG.js";import{a as b,b as r,c,e as _}from"./chunk-5MOOXA2X.js";import{a as m,b as p}from"./chunk-4OT5AMS5.js";import{d as o}from"./chunk-IZ2LK5GK.js";var D=m`:host{width:314px;display:block}.datepicker-content{--bl-input-cursor:pointer;--icon-size:var(--line-height);--icon-color:var(--bl-color-neutral-light);width:100%;position:relative;display:grid}.datepicker-input{width:var(--bl-datepicker-input-width,auto);white-space:nowrap;text-overflow:ellipsis}.icon-container{display:flex;gap:var(--bl-size-3xs);align-items:center}.calendar-icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;margin-right:var(--label-padding);font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.action-divider{display:block;height:var(--bl-size-m);width:1px;background-color:var(--bl-color-neutral-lighter);margin-right:var(--bl-size-3xs)}bl-popover{--bl-popover-padding:0;--bl-popover-background-color:transparent}`,E=D;var i=class extends g{constructor(){super(...arguments);this.size="medium";this.labelFixed=!1;this.valueFormatter=null;this._inputValue="";this._floatingDateCount=0;this._fittingDateCount=0}static get styles(){return[E]}defaultInputValueFormatter(){var t,e,l,n,a,s,d,h;if(this.type==="single")this._inputValue=this.formatDate((t=this._calendarEl)==null?void 0:t._dates[0]),this.closePopoverWithTimeout();else if(this.type==="multiple"){this.setFloatingDates();let u=(e=this._calendarEl)==null?void 0:e._dates.slice(0,this._fittingDateCount).map(v=>this.formatDate(v));this._inputValue=u.join(",")+(this._floatingDateCount>0?" ,...":"")}else this.type==="range"&&((l=this._calendarEl)!=null&&l._dates[0]&&(this._inputValue=this.formatDate((n=this._calendarEl)==null?void 0:n._dates[0])),(a=this._calendarEl)!=null&&a._dates[1]&&(this._inputValue=`${this._inputValue}-${this.formatDate((s=this._calendarEl)==null?void 0:s._dates[1])}`),(d=this._calendarEl)!=null&&d._dates[0]&&((h=this._calendarEl)!=null&&h._dates[1])&&this.closePopoverWithTimeout())}closePopoverWithTimeout(){setTimeout(()=>{this.closePopover(),this._inputEl.blur()},200)}setFloatingDates(){var n,a,s;let t=(n=this.shadowRoot)==null?void 0:n.getElementById("datepicker-input"),e=(a=this.shadowRoot)==null?void 0:a.getElementById("icon-container"),l=t.offsetWidth-e.offsetWidth;this._fittingDateCount=Math.floor(l/90),this._floatingDateCount=((s=this._calendarEl)==null?void 0:s._dates.length)-this._fittingDateCount}setDatePickerInput(){var t,e;(t=this._calendarEl)!=null&&t._dates.length?this.valueFormatter?this._inputValue=this.valueFormatter((e=this._calendarEl)==null?void 0:e._dates):this.defaultInputValueFormatter():this._inputValue=""}formatDate(t){return`${String(t==null?void 0:t.getDate()).padStart(2,"0")}/${String((t==null?void 0:t.getMonth())+1).padStart(2,"0")}/${t==null?void 0:t.getFullYear()}`}clearDatepicker(){this._calendarEl.handleClearSelectedDates(),this._inputValue="",this._floatingDateCount=0}openPopover(){this._popoverEl.target=this._inputEl,this._popoverEl.show()}closePopover(){this._popoverEl.hide()}_togglePopover(){this._popoverEl.visible?this.closePopover():this.openPopover()}formatAdditionalDates(t){let e=t.split(",");return e==null?void 0:e.reduce((l,n,a)=>(a>0&&a%3===0&&l.push(p`<br />`),l.push(p`<span>${n.trim()}${a<e.length-1?", ":""}</span>`),l),[])}async firstUpdated(){var t,e,l;this._onCalendarMouseDown=n=>{var a;n.preventDefault(),(a=this._inputEl)==null||a.focus()},this._onInputMouseDown=n=>{var a;n.preventDefault(),(a=this._inputEl)==null||a.focus()},(t=this._calendarEl)==null||t.addEventListener("mousedown",this._onCalendarMouseDown),(e=this._inputEl)==null||e.addEventListener("mousedown",this._onInputMouseDown),(l=this._calendarEl)!=null&&l._dates&&this.setDatePickerInput()}onCalendarChange(){var t;this.setDatePickerInput(),this._onBlDatepickerChange((t=this._calendarEl)==null?void 0:t._dates)}disconnectedCallback(){var t,e;super.disconnectedCallback(),(t=this._calendarEl)==null||t.removeEventListener("mousedown",this._onCalendarMouseDown),(e=this._inputEl)==null||e.removeEventListener("mousedown",this._onInputMouseDown)}render(){var s,d,h,u;let t=p`
|
|
2
2
|
<bl-popover target="datepicker-content" placement="bottom-start">
|
|
3
3
|
<bl-calendar
|
|
4
4
|
type=${this.type}
|
|
@@ -11,15 +11,16 @@ import{a as g}from"./chunk-OTAAXK2L.js";import{a as f}from"./chunk-GRL4DWKG.js";
|
|
|
11
11
|
@bl-calendar-change="${this.onCalendarChange}"
|
|
12
12
|
></bl-calendar>
|
|
13
13
|
</bl-popover>
|
|
14
|
-
`,e=(
|
|
14
|
+
`,e=(h=(d=(s=this._calendarEl)==null?void 0:s._dates)==null?void 0:d.slice(this._fittingDateCount).map(v=>this.formatDate(v)).join(","))!=null?h:"",l=this.formatAdditionalDates(e),n=this._floatingDateCount>0?p` <bl-tooltip>
|
|
15
15
|
<span slot="tooltip-trigger">+${this._floatingDateCount}</span>
|
|
16
|
-
<div>${
|
|
17
|
-
</bl-tooltip>`:"",a=((
|
|
16
|
+
<div>${l}</div>
|
|
17
|
+
</bl-tooltip>`:"",a=((u=this._calendarEl)==null?void 0:u._dates.length)>0?p` <bl-button
|
|
18
18
|
size="small"
|
|
19
19
|
variant="tertiary"
|
|
20
20
|
kind="neutral"
|
|
21
21
|
icon="close"
|
|
22
22
|
@click=${this.clearDatepicker}
|
|
23
|
+
?disabled=${this.disabled}
|
|
23
24
|
></bl-button>
|
|
24
25
|
<div class="action-divider"></div>`:"";return p`
|
|
25
26
|
<div class="datepicker-content" id="datepicker-content" tabindex="-1">
|
|
@@ -40,11 +41,11 @@ import{a as g}from"./chunk-OTAAXK2L.js";import{a as f}from"./chunk-GRL4DWKG.js";
|
|
|
40
41
|
readonly
|
|
41
42
|
>
|
|
42
43
|
<div slot="icon" class="icon-container" id="icon-container">
|
|
43
|
-
${
|
|
44
|
+
${n} ${a}
|
|
44
45
|
<bl-icon name="calendar" size="small" class="calendar-icon"></bl-icon>
|
|
45
46
|
</div>
|
|
46
47
|
</bl-input>
|
|
47
48
|
${t}
|
|
48
49
|
</div>
|
|
49
50
|
`}};o([r({type:String,attribute:"placeholder",reflect:!0})],i.prototype,"placeholder",2),o([r({type:String,reflect:!0})],i.prototype,"size",2),o([r({type:Boolean,attribute:"label-fixed",reflect:!0})],i.prototype,"labelFixed",2),o([r({type:String,attribute:"label",reflect:!0})],i.prototype,"label",2),o([r({type:Function,attribute:"value-formatter"})],i.prototype,"valueFormatter",2),o([r({type:Boolean})],i.prototype,"disabled",2),o([r({type:String,attribute:"help-text",reflect:!0})],i.prototype,"helpText",2),o([c()],i.prototype,"_inputValue",2),o([c()],i.prototype,"_floatingDateCount",2),o([c()],i.prototype,"_fittingDateCount",2),o([_("bl-calendar")],i.prototype,"_calendarEl",2),o([_("bl-popover")],i.prototype,"_popoverEl",2),o([_("bl-input")],i.prototype,"_inputEl",2),o([f("bl-datepicker-change")],i.prototype,"_onBlDatepickerChange",2),i=o([b("bl-datepicker")],i);export{i as a};
|
|
50
|
-
//# sourceMappingURL=chunk-
|
|
51
|
+
//# sourceMappingURL=chunk-RQOF4US5.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/components/datepicker/bl-datepicker.css", "../src/components/datepicker/bl-datepicker.ts"],
|
|
4
|
-
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{width:314px;display:block}.datepicker-content{--bl-input-cursor:pointer;--icon-size:var(--line-height);--icon-color:var(--bl-color-neutral-light);width:100%;position:relative;display:grid}.datepicker-input{width:var(--bl-datepicker-input-width,auto);white-space:nowrap;text-overflow:ellipsis}.icon-container{display:flex;gap:var(--bl-size-3xs);align-items:center}.calendar-icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;margin-right:var(--label-padding);font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.action-divider{display:block;height:var(--bl-size-m);width:1px;background-color:var(--bl-color-neutral-lighter);margin-right:var(--bl-size-3xs)}bl-popover{--bl-popover-padding:0;--bl-popover-background-color:transparent}`;\nexport default styles;\n", "import { CSSResultGroup, html, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { BlCalendar, BlPopover } from \"../../baklava\";\nimport DatepickerCalendarMixin from \"../../mixins/datepicker-calendar-mixin/datepicker-calendar-mixin\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport \"../calendar/bl-calendar\";\nimport { CALENDAR_TYPES } from \"../calendar/bl-calendar.constant\";\nimport \"../input/bl-input\";\nimport BlInput, { InputSize } from \"../input/bl-input\";\nimport \"../tooltip/bl-tooltip\";\nimport style from \"./bl-datepicker.css\";\n\n/**\n * @tag bl-datepicker\n * @summary Baklava DatePicker component\n *\n * @cssproperty [--bl-datepicker-input-width] - Sets the width of datepicker input\n **/\n@customElement(\"bl-datepicker\")\nexport default class BlDatepicker extends DatepickerCalendarMixin {\n /**\n * Defines the datepicker input placeholder\n */\n @property({ type: String, attribute: \"placeholder\", reflect: true })\n placeholder: string;\n /**\n * Sets input size.\n */\n @property({ type: String, reflect: true })\n size?: InputSize = \"medium\";\n\n /**\n * Makes datepicker input label as fixed positioned\n */\n @property({ type: Boolean, attribute: \"label-fixed\", reflect: true })\n labelFixed = false;\n /**\n * Defines the datepicker input label\n */\n @property({ type: String, attribute: \"label\", reflect: true })\n label: string;\n /**\n * Defines the custom formatter function\n */\n @property({ type: Function, attribute: \"value-formatter\" })\n valueFormatter: ((dates: Date[]) => string) | null = null;\n /**\n * Sets datepicker to disabled\n */\n @property({ type: Boolean })\n disabled: boolean;\n /**\n * Defines help text to datepicker input for users\n */\n @property({ type: String, attribute: \"help-text\", reflect: true })\n helpText: string;\n\n @state()\n _inputValue = \"\";\n\n @state()\n _floatingDateCount: number = 0;\n\n @state()\n _fittingDateCount: number = 0;\n\n @query(\"bl-calendar\")\n _calendarEl: BlCalendar;\n\n @query(\"bl-popover\")\n _popoverEl: BlPopover;\n\n @query(\"bl-input\")\n _inputEl!: BlInput;\n\n private _onCalendarMouseDown!: (event: MouseEvent) => void;\n private _onInputMouseDown!: (event: MouseEvent) => void;\n\n /**\n * Fires when date selection is changed\n */\n @event(\"bl-datepicker-change\") private _onBlDatepickerChange: EventDispatcher<Date[]>;\n\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n defaultInputValueFormatter() {\n if (this.type === CALENDAR_TYPES.SINGLE) {\n this._inputValue = this.formatDate(this._calendarEl?._dates[0]);\n this.closePopoverWithTimeout();\n } else if (this.type === CALENDAR_TYPES.MULTIPLE) {\n this.setFloatingDates();\n const values = this._calendarEl?._dates\n .slice(0, this._fittingDateCount)\n .map(date => this.formatDate(date));\n\n this._inputValue = values.join(\",\") + (this._floatingDateCount > 0 ? \" ,...\" : \"\");\n } else if (this.type === CALENDAR_TYPES.RANGE) {\n if (this._calendarEl?._dates[0])\n this._inputValue = this.formatDate(this._calendarEl?._dates[0]);\n if (this._calendarEl?._dates[1])\n this._inputValue = `${this._inputValue}-${this.formatDate(this._calendarEl?._dates[1])}`;\n if (this._calendarEl?._dates[0] && this._calendarEl?._dates[1])\n this.closePopoverWithTimeout();\n }\n }\n\n closePopoverWithTimeout() {\n setTimeout(() => {\n this.closePopover();\n this._inputEl.blur();\n }, 200);\n }\n\n setFloatingDates() {\n const datepickerInput = this.shadowRoot?.getElementById(\"datepicker-input\");\n const iconsContainer = this.shadowRoot?.getElementById(\"icon-container\");\n const datesTextTotalWidth = datepickerInput!.offsetWidth! - iconsContainer!.offsetWidth!;\n\n this._fittingDateCount = Math.floor(datesTextTotalWidth / 90);\n\n this._floatingDateCount = this._calendarEl?._dates.length - this._fittingDateCount;\n }\n\n setDatePickerInput() {\n if (!this._calendarEl?._dates.length) {\n this._inputValue = \"\";\n } else {\n if (this.valueFormatter) {\n this._inputValue = this.valueFormatter(this._calendarEl?._dates);\n } else {\n this.defaultInputValueFormatter();\n }\n }\n }\n\n formatDate(date: Date): string {\n return `${String(date?.getDate()).padStart(2, \"0\")}/${String(date?.getMonth() + 1).padStart(\n 2,\n \"0\"\n )}/${date?.getFullYear()}`;\n }\n\n clearDatepicker() {\n this._calendarEl.handleClearSelectedDates();\n this._inputValue = \"\";\n this._floatingDateCount = 0;\n }\n\n openPopover() {\n this._popoverEl.target = this._inputEl;\n this._popoverEl.show();\n }\n\n closePopover() {\n this._popoverEl.hide();\n }\n\n _togglePopover() {\n this._popoverEl.visible ? this.closePopover() : this.openPopover();\n }\n\n formatAdditionalDates(str: string): TemplateResult[] {\n const parts = str.split(\",\");\n\n return parts?.reduce<TemplateResult[]>((acc, part, index) => {\n if (index > 0 && index % 3 === 0) {\n acc.push(html`<br />`);\n }\n acc.push(html`<span>${part.trim()}${index < parts.length - 1 ? \", \" : \"\"}</span>`);\n return acc;\n }, []);\n }\n\n async firstUpdated() {\n this._onCalendarMouseDown = event => {\n event.preventDefault();\n this._inputEl?.focus();\n };\n\n this._onInputMouseDown = event => {\n event.preventDefault();\n this._inputEl?.focus();\n };\n\n this._calendarEl?.addEventListener(\"mousedown\", this._onCalendarMouseDown);\n this._inputEl?.addEventListener(\"mousedown\", this._onInputMouseDown);\n\n if (this._calendarEl?._dates) {\n this.setDatePickerInput();\n }\n }\n\n onCalendarChange() {\n this.setDatePickerInput();\n this._onBlDatepickerChange(this._calendarEl?._dates);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this._calendarEl?.removeEventListener(\"mousedown\", this._onCalendarMouseDown);\n this._inputEl?.removeEventListener(\"mousedown\", this._onInputMouseDown);\n }\n\n render() {\n const renderCalendar = html`\n <bl-popover target=\"datepicker-content\" placement=\"bottom-start\">\n <bl-calendar\n type=${this.type}\n .minDate=${this.minDate}\n .maxDate=${this.maxDate}\n .startOfWeek=${this.startOfWeek}\n .disabledDates=${this.disabledDates}\n .value=${this.value}\n .locale=${this.locale}\n @bl-calendar-change=\"${this.onCalendarChange}\"\n ></bl-calendar>\n </bl-popover>\n `;\n const additionalDates =\n this._calendarEl?._dates\n ?.slice(this._fittingDateCount)\n .map(date => {\n return this.formatDate(date);\n })\n .join(\",\") ?? \"\";\n\n const formattedAdditionalDates = this.formatAdditionalDates(additionalDates);\n\n const additionalDatesView =\n this._floatingDateCount > 0\n ? html` <bl-tooltip>\n <span slot=\"tooltip-trigger\">+${this._floatingDateCount}</span>\n <div>${formattedAdditionalDates}</div>\n </bl-tooltip>`\n : \"\";\n\n const clearDatepickerButton =\n this._calendarEl?._dates.length > 0\n ? html` <bl-button\n size=\"small\"\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"close\"\n @click=${this.clearDatepicker}\n ></bl-button>\n <div class=\"action-divider\"></div>`\n : \"\";\n\n return html`\n <div class=\"datepicker-content\" id=\"datepicker-content\" tabindex=\"-1\">\n <bl-input\n .value=\"${this._inputValue}\"\n .label=\"${this.label}\"\n placeholder=\"${this.placeholder}\"\n class=\"datepicker-input\"\n role=\"button\"\n id=\"datepicker-input\"\n aria-haspopup=\"listbox\"\n aria-labelledby=\"label\"\n @click=${this._togglePopover}\n help-text=${this.helpText}\n ?disabled=${this.disabled}\n .size=${this.size}\n .labelFixed=${this.labelFixed}\n readonly\n >\n <div slot=\"icon\" class=\"icon-container\" id=\"icon-container\">\n ${additionalDatesView} ${clearDatepickerButton}\n <bl-icon name=\"calendar\" size=\"small\" class=\"calendar-icon\"></bl-icon>\n </div>\n </bl-input>\n ${renderCalendar}\n </div>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{width:314px;display:block}.datepicker-content{--bl-input-cursor:pointer;--icon-size:var(--line-height);--icon-color:var(--bl-color-neutral-light);width:100%;position:relative;display:grid}.datepicker-input{width:var(--bl-datepicker-input-width,auto);white-space:nowrap;text-overflow:ellipsis}.icon-container{display:flex;gap:var(--bl-size-3xs);align-items:center}.calendar-icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;margin-right:var(--label-padding);font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.action-divider{display:block;height:var(--bl-size-m);width:1px;background-color:var(--bl-color-neutral-lighter);margin-right:var(--bl-size-3xs)}bl-popover{--bl-popover-padding:0;--bl-popover-background-color:transparent}`;\nexport default styles;\n", "import { CSSResultGroup, html, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { BlCalendar, BlPopover } from \"../../baklava\";\nimport DatepickerCalendarMixin from \"../../mixins/datepicker-calendar-mixin/datepicker-calendar-mixin\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport \"../calendar/bl-calendar\";\nimport { CALENDAR_TYPES } from \"../calendar/bl-calendar.constant\";\nimport \"../input/bl-input\";\nimport BlInput, { InputSize } from \"../input/bl-input\";\nimport \"../tooltip/bl-tooltip\";\nimport style from \"./bl-datepicker.css\";\n\n/**\n * @tag bl-datepicker\n * @summary Baklava DatePicker component\n *\n * @cssproperty [--bl-datepicker-input-width] - Sets the width of datepicker input\n **/\n@customElement(\"bl-datepicker\")\nexport default class BlDatepicker extends DatepickerCalendarMixin {\n /**\n * Defines the datepicker input placeholder\n */\n @property({ type: String, attribute: \"placeholder\", reflect: true })\n placeholder: string;\n /**\n * Sets input size.\n */\n @property({ type: String, reflect: true })\n size?: InputSize = \"medium\";\n\n /**\n * Makes datepicker input label as fixed positioned\n */\n @property({ type: Boolean, attribute: \"label-fixed\", reflect: true })\n labelFixed = false;\n /**\n * Defines the datepicker input label\n */\n @property({ type: String, attribute: \"label\", reflect: true })\n label: string;\n /**\n * Defines the custom formatter function\n */\n @property({ type: Function, attribute: \"value-formatter\" })\n valueFormatter: ((dates: Date[]) => string) | null = null;\n /**\n * Sets datepicker to disabled\n */\n @property({ type: Boolean })\n disabled: boolean;\n /**\n * Defines help text to datepicker input for users\n */\n @property({ type: String, attribute: \"help-text\", reflect: true })\n helpText: string;\n\n @state()\n _inputValue = \"\";\n\n @state()\n _floatingDateCount: number = 0;\n\n @state()\n _fittingDateCount: number = 0;\n\n @query(\"bl-calendar\")\n _calendarEl: BlCalendar;\n\n @query(\"bl-popover\")\n _popoverEl: BlPopover;\n\n @query(\"bl-input\")\n _inputEl!: BlInput;\n\n private _onCalendarMouseDown!: (event: MouseEvent) => void;\n private _onInputMouseDown!: (event: MouseEvent) => void;\n\n /**\n * Fires when date selection is changed\n */\n @event(\"bl-datepicker-change\") private _onBlDatepickerChange: EventDispatcher<Date[]>;\n\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n defaultInputValueFormatter() {\n if (this.type === CALENDAR_TYPES.SINGLE) {\n this._inputValue = this.formatDate(this._calendarEl?._dates[0]);\n this.closePopoverWithTimeout();\n } else if (this.type === CALENDAR_TYPES.MULTIPLE) {\n this.setFloatingDates();\n const values = this._calendarEl?._dates\n .slice(0, this._fittingDateCount)\n .map(date => this.formatDate(date));\n\n this._inputValue = values.join(\",\") + (this._floatingDateCount > 0 ? \" ,...\" : \"\");\n } else if (this.type === CALENDAR_TYPES.RANGE) {\n if (this._calendarEl?._dates[0])\n this._inputValue = this.formatDate(this._calendarEl?._dates[0]);\n if (this._calendarEl?._dates[1])\n this._inputValue = `${this._inputValue}-${this.formatDate(this._calendarEl?._dates[1])}`;\n if (this._calendarEl?._dates[0] && this._calendarEl?._dates[1])\n this.closePopoverWithTimeout();\n }\n }\n\n closePopoverWithTimeout() {\n setTimeout(() => {\n this.closePopover();\n this._inputEl.blur();\n }, 200);\n }\n\n setFloatingDates() {\n const datepickerInput = this.shadowRoot?.getElementById(\"datepicker-input\");\n const iconsContainer = this.shadowRoot?.getElementById(\"icon-container\");\n const datesTextTotalWidth = datepickerInput!.offsetWidth! - iconsContainer!.offsetWidth!;\n\n this._fittingDateCount = Math.floor(datesTextTotalWidth / 90);\n\n this._floatingDateCount = this._calendarEl?._dates.length - this._fittingDateCount;\n }\n\n setDatePickerInput() {\n if (!this._calendarEl?._dates.length) {\n this._inputValue = \"\";\n } else {\n if (this.valueFormatter) {\n this._inputValue = this.valueFormatter(this._calendarEl?._dates);\n } else {\n this.defaultInputValueFormatter();\n }\n }\n }\n\n formatDate(date: Date): string {\n return `${String(date?.getDate()).padStart(2, \"0\")}/${String(date?.getMonth() + 1).padStart(\n 2,\n \"0\"\n )}/${date?.getFullYear()}`;\n }\n\n clearDatepicker() {\n this._calendarEl.handleClearSelectedDates();\n this._inputValue = \"\";\n this._floatingDateCount = 0;\n }\n\n openPopover() {\n this._popoverEl.target = this._inputEl;\n this._popoverEl.show();\n }\n\n closePopover() {\n this._popoverEl.hide();\n }\n\n _togglePopover() {\n this._popoverEl.visible ? this.closePopover() : this.openPopover();\n }\n\n formatAdditionalDates(str: string): TemplateResult[] {\n const parts = str.split(\",\");\n\n return parts?.reduce<TemplateResult[]>((acc, part, index) => {\n if (index > 0 && index % 3 === 0) {\n acc.push(html`<br />`);\n }\n acc.push(html`<span>${part.trim()}${index < parts.length - 1 ? \", \" : \"\"}</span>`);\n return acc;\n }, []);\n }\n\n async firstUpdated() {\n this._onCalendarMouseDown = event => {\n event.preventDefault();\n this._inputEl?.focus();\n };\n\n this._onInputMouseDown = event => {\n event.preventDefault();\n this._inputEl?.focus();\n };\n\n this._calendarEl?.addEventListener(\"mousedown\", this._onCalendarMouseDown);\n this._inputEl?.addEventListener(\"mousedown\", this._onInputMouseDown);\n\n if (this._calendarEl?._dates) {\n this.setDatePickerInput();\n }\n }\n\n onCalendarChange() {\n this.setDatePickerInput();\n this._onBlDatepickerChange(this._calendarEl?._dates);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this._calendarEl?.removeEventListener(\"mousedown\", this._onCalendarMouseDown);\n this._inputEl?.removeEventListener(\"mousedown\", this._onInputMouseDown);\n }\n\n render() {\n const renderCalendar = html`\n <bl-popover target=\"datepicker-content\" placement=\"bottom-start\">\n <bl-calendar\n type=${this.type}\n .minDate=${this.minDate}\n .maxDate=${this.maxDate}\n .startOfWeek=${this.startOfWeek}\n .disabledDates=${this.disabledDates}\n .value=${this.value}\n .locale=${this.locale}\n @bl-calendar-change=\"${this.onCalendarChange}\"\n ></bl-calendar>\n </bl-popover>\n `;\n const additionalDates =\n this._calendarEl?._dates\n ?.slice(this._fittingDateCount)\n .map(date => {\n return this.formatDate(date);\n })\n .join(\",\") ?? \"\";\n\n const formattedAdditionalDates = this.formatAdditionalDates(additionalDates);\n\n const additionalDatesView =\n this._floatingDateCount > 0\n ? html` <bl-tooltip>\n <span slot=\"tooltip-trigger\">+${this._floatingDateCount}</span>\n <div>${formattedAdditionalDates}</div>\n </bl-tooltip>`\n : \"\";\n\n const clearDatepickerButton =\n this._calendarEl?._dates.length > 0\n ? html` <bl-button\n size=\"small\"\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"close\"\n @click=${this.clearDatepicker}\n ?disabled=${this.disabled}\n ></bl-button>\n <div class=\"action-divider\"></div>`\n : \"\";\n\n return html`\n <div class=\"datepicker-content\" id=\"datepicker-content\" tabindex=\"-1\">\n <bl-input\n .value=\"${this._inputValue}\"\n .label=\"${this.label}\"\n placeholder=\"${this.placeholder}\"\n class=\"datepicker-input\"\n role=\"button\"\n id=\"datepicker-input\"\n aria-haspopup=\"listbox\"\n aria-labelledby=\"label\"\n @click=${this._togglePopover}\n help-text=${this.helpText}\n ?disabled=${this.disabled}\n .size=${this.size}\n .labelFixed=${this.labelFixed}\n readonly\n >\n <div slot=\"icon\" class=\"icon-container\" id=\"icon-container\">\n ${additionalDatesView} ${clearDatepickerButton}\n <bl-icon name=\"calendar\" size=\"small\" class=\"calendar-icon\"></bl-icon>\n </div>\n </bl-input>\n ${renderCalendar}\n </div>\n `;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["styles", "i", "bl_datepicker_default", "BlDatepicker", "DatepickerCalendarMixin", "bl_datepicker_default", "_a", "_b", "_c", "_d", "_e", "_f", "_g", "_h", "values", "date", "datepickerInput", "iconsContainer", "datesTextTotalWidth", "str", "parts", "acc", "part", "index", "x", "event", "renderCalendar", "additionalDates", "formattedAdditionalDates", "additionalDatesView", "clearDatepickerButton", "__decorateClass", "e", "t", "i"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bl-datepicker.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/bl-datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3D,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,uBAAuB,MAAM,kEAAkE,CAAC;AAEvG,OAAO,yBAAyB,CAAC;AAEjC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,OAAO,EAAE,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,uBAAuB,CAAC;AAG/B;;;;;IAKI;AAEJ,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,uBAAuB;IAC/D;;OAEG;IAEH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IAEH,IAAI,CAAC,EAAE,SAAS,CAAY;IAE5B;;OAEG;IAEH,UAAU,UAAS;IACnB;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IAEH,cAAc,EAAE,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,GAAG,IAAI,CAAQ;IAC1D;;OAEG;IAEH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IAEH,QAAQ,EAAE,MAAM,CAAC;IAGjB,WAAW,SAAM;IAGjB,kBAAkB,EAAE,MAAM,CAAK;IAG/B,iBAAiB,EAAE,MAAM,CAAK;IAG9B,WAAW,EAAE,UAAU,CAAC;IAGxB,UAAU,EAAE,SAAS,CAAC;IAGtB,QAAQ,EAAG,OAAO,CAAC;IAEnB,OAAO,CAAC,oBAAoB,CAA+B;IAC3D,OAAO,CAAC,iBAAiB,CAA+B;IAExD;;OAEG;IAC4B,OAAO,CAAC,qBAAqB,CAA0B;IAEtF,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IAED,0BAA0B;IAqB1B,uBAAuB;IAOvB,gBAAgB;IAUhB,kBAAkB;IAYlB,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM;IAO9B,eAAe;IAMf,WAAW;IAKX,YAAY;IAIZ,cAAc;IAId,qBAAqB,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,EAAE;IAY9C,YAAY;IAmBlB,gBAAgB;IAKhB,oBAAoB;IAMpB,MAAM;
|
|
1
|
+
{"version":3,"file":"bl-datepicker.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/bl-datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3D,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,uBAAuB,MAAM,kEAAkE,CAAC;AAEvG,OAAO,yBAAyB,CAAC;AAEjC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,OAAO,EAAE,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,uBAAuB,CAAC;AAG/B;;;;;IAKI;AAEJ,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,uBAAuB;IAC/D;;OAEG;IAEH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IAEH,IAAI,CAAC,EAAE,SAAS,CAAY;IAE5B;;OAEG;IAEH,UAAU,UAAS;IACnB;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IAEH,cAAc,EAAE,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,GAAG,IAAI,CAAQ;IAC1D;;OAEG;IAEH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IAEH,QAAQ,EAAE,MAAM,CAAC;IAGjB,WAAW,SAAM;IAGjB,kBAAkB,EAAE,MAAM,CAAK;IAG/B,iBAAiB,EAAE,MAAM,CAAK;IAG9B,WAAW,EAAE,UAAU,CAAC;IAGxB,UAAU,EAAE,SAAS,CAAC;IAGtB,QAAQ,EAAG,OAAO,CAAC;IAEnB,OAAO,CAAC,oBAAoB,CAA+B;IAC3D,OAAO,CAAC,iBAAiB,CAA+B;IAExD;;OAEG;IAC4B,OAAO,CAAC,qBAAqB,CAA0B;IAEtF,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IAED,0BAA0B;IAqB1B,uBAAuB;IAOvB,gBAAgB;IAUhB,kBAAkB;IAYlB,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM;IAO9B,eAAe;IAMf,WAAW;IAKX,YAAY;IAIZ,cAAc;IAId,qBAAqB,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,EAAE;IAY9C,YAAY;IAmBlB,gBAAgB;IAKhB,oBAAoB;IAMpB,MAAM;CAyEP"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a}from"../../chunk-
|
|
1
|
+
import{a}from"../../chunk-RQOF4US5.js";import"../../chunk-DE3A37FL.js";import"../../chunk-UOGCEUXK.js";import"../../chunk-EZSEQHRH.js";import"../../chunk-WC5CTIZH.js";import"../../chunk-23PSWIUF.js";import"../../chunk-OTAAXK2L.js";import"../../chunk-IPYZIIRV.js";import"../../chunk-WEEGH2F4.js";import"../../chunk-EG7U7PM3.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-AYJMIZZ3.js";import"../../chunk-4UO3W4WP.js";import"../../chunk-ZE7GYACV.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-HBPBDC7T.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
|
|
2
2
|
//# sourceMappingURL=bl-datepicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bl-radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/bl-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGvE,OAAO,4BAA4B,CAAC;AAGpC,OAAO,OAAuB,MAAM,kBAAkB,CAAC;AAEvD,eAAO,MAAM,eAAe,mBAAmB,CAAC;AAEhD,eAAO,MAAM,iBAAiB,oBAAoB,CAAC;;AAEnD;;;;;;;;GAQG;AAEH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,iBAA4B;IACpE,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IAED;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,UAAS;IAEjB,IAAI,OAAO,IAAI,OAAO,EAAE,CAEvB;IAED,IAAI,gBAAgB,IAAI,OAAO,EAAE,CAEhC;IAED,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOtD;;OAEG;IACuB,OAAO,CAAC,QAAQ,CAA0B;IAEpE,OAAO,CAAC,kBAAkB,CAAK;IAE/B,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,aAAa;
|
|
1
|
+
{"version":3,"file":"bl-radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/bl-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGvE,OAAO,4BAA4B,CAAC;AAGpC,OAAO,OAAuB,MAAM,kBAAkB,CAAC;AAEvD,eAAO,MAAM,eAAe,mBAAmB,CAAC;AAEhD,eAAO,MAAM,iBAAiB,oBAAoB,CAAC;;AAEnD;;;;;;;;GAQG;AAEH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,iBAA4B;IACpE,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IAED;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,UAAS;IAEjB,IAAI,OAAO,IAAI,OAAO,EAAE,CAEvB;IAED,IAAI,gBAAgB,IAAI,OAAO,EAAE,CAEhC;IAED,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOtD;;OAEG;IACuB,OAAO,CAAC,QAAQ,CAA0B;IAEpE,OAAO,CAAC,kBAAkB,CAAK;IAE/B,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,aAAa;IA8BrB,iBAAiB,IAAI,IAAI;IAQzB,OAAO,CAAC,WAAW;IAInB,MAAM,IAAI,cAAc;CAQzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,CAAC,eAAe,CAAC,EAAE,YAAY,CAAC;KACjC;IACD,UAAU,mBAAmB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;KAC1C;CACF"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{d as a,e as b,f as c}from"../../chunk-
|
|
1
|
+
import{d as a,e as b,f as c}from"../../chunk-IKYI4JCF.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{b as blChangeEventName,a as blRadioGroupTag,c as default};
|
|
2
2
|
//# sourceMappingURL=bl-radio-group.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a,b,c}from"../../../chunk-
|
|
1
|
+
import{a,b,c}from"../../../chunk-IKYI4JCF.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{b as blCheckedEventName,a as blRadioTag,c as default};
|
|
2
2
|
//# sourceMappingURL=bl-radio.js.map
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trendyol/baklava",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "3.
|
|
4
|
+
"version": "3.4.0-beta.2",
|
|
5
5
|
"description": "Trendyol Baklava Design System",
|
|
6
6
|
"main": "dist/baklava.js",
|
|
7
7
|
"module": "dist/baklava.js",
|
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
"stylelint-config-standard": "^34.0.0",
|
|
141
141
|
"ts-lit-plugin": "^2.0.1",
|
|
142
142
|
"typescript": "5.3.3",
|
|
143
|
-
"wait-on": "^
|
|
143
|
+
"wait-on": "^8.0.2"
|
|
144
144
|
},
|
|
145
145
|
"peerDependencies": {
|
|
146
146
|
"@trendyol/baklava-icons": ">=1.0.0"
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/components/radio-group/bl-radio-group.css", "../src/components/radio-group/bl-radio-group.ts", "../src/components/radio-group/radio/bl-radio.css", "../src/components/radio-group/radio/bl-radio.ts"],
|
|
4
|
-
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:block}fieldset{border:none;padding:0}legend{font:var(--bl-font-title-3-medium);color:var(--bl-color-neutral-darker)}.options{display:flex;flex-flow:var(--bl-radio-direction,column) wrap;align-items:var(--bl-radio-group-cross-axis-item-alignment,normal);align-content:var(--bl-radio-group-cross-axis-content-alignment,normal);justify-content:var(--bl-radio-group-main-axis-content-alignment,normal);gap:var(--bl-size-m);margin-block:var(--bl-size-xs)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { FormControlMixin } from \"@open-wc/form-control\";\nimport \"element-internals-polyfill\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport style from \"./bl-radio-group.css\";\nimport BlRadio, { blRadioTag } from \"./radio/bl-radio\";\n\nexport const blRadioGroupTag = \"bl-radio-group\";\n\nexport const blChangeEventName = \"bl-radio-change\";\n\n/**\n * @tag bl-radio-group\n * @summary Baklava Button component\n *\n * @cssproperty [--bl-radio-direction=row] Can be used for showing radio options as columns instead of rows. Options are `row` or `column`\n * @cssproperty [--bl-radio-group-cross-axis-item-alignment=normal] Can be used for aligning radio items on cross axis. Acts same with align-item\n * @cssproperty [--bl-radio-group-cross-axis-content-alignment=normal] Can be used for aligning radio group content on cross axis. Acts same with align-content\n * @cssproperty [--bl-radio-group-main-axis-content-alignment=normal] Can be used for aligning radio group content on main axis. Acts same with justify-content\n */\n@customElement(blRadioGroupTag)\nexport default class BlRadioGroup extends FormControlMixin(LitElement) {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the radio group label\n */\n @property({ type: String })\n label: string;\n\n /**\n * Set and gets the actual value of the field\n */\n @property()\n value = \"\";\n\n /**\n * Sets option as required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n get options(): BlRadio[] {\n return [...this.querySelectorAll(blRadioTag)];\n }\n\n get availableOptions(): BlRadio[] {\n return this.options.filter(option => !option.disabled);\n }\n\n updated(changedProperties: Map<string, unknown>): void {\n if (changedProperties.has(\"value\")) {\n this.setValue(this.value);\n this.onChange(this.value);\n }\n }\n\n /**\n * Fires when radio group value changed\n */\n @event(\"bl-radio-change\") private onChange: EventDispatcher<string>;\n\n private focusedOptionIndex = 0;\n\n private handleOptionChecked(event: CustomEvent) {\n const checkedOption = event.target as BlRadio;\n\n this.setValue(checkedOption.value);\n this.onChange(checkedOption.value);\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n // Next option\n if ([\"ArrowDown\", \"ArrowRight\"].includes(event.key)) {\n this.focusedOptionIndex++;\n\n // Previous option\n } else if ([\"ArrowUp\", \"ArrowLeft\"].includes(event.key)) {\n this.focusedOptionIndex--;\n\n // Select option\n } else if ([\" \"].includes(event.key)) {\n this.availableOptions[this.focusedOptionIndex].select();\n return;\n } else {\n // Other keys are not our interest here\n return;\n }\n\n // Don't exceed array indexes\n this.focusedOptionIndex = Math.max(\n 0,\n Math.min(this.focusedOptionIndex, this.availableOptions.length - 1)\n );\n\n this.availableOptions[this.focusedOptionIndex].focus();\n\n event.preventDefault();\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.tabIndex = 0;\n this.addEventListener(\"focus\", this.handleFocus);\n this.addEventListener(\"keydown\", this.handleKeyDown);\n }\n\n private handleFocus() {\n this.availableOptions[this.focusedOptionIndex].focus();\n }\n\n render(): TemplateResult {\n return html`<fieldset role=\"radiogroup\" aria-labelledby=\"label\" aria-required=${this.required}>\n <legend id=\"label\">${this.label}</legend>\n <div class=\"options\" @bl-checked=${this.handleOptionChecked}>\n <slot></slot>\n </div>\n </fieldset>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blRadioGroupTag]: BlRadioGroup;\n }\n interface HTMLElementEventMap {\n [blChangeEventName]: CustomEvent<string>;\n }\n}\n", "import {css} from 'lit';\nexport const styles = css`:host{cursor:pointer;outline:0}.wrapper{--size:var(--bl-size-m);outline:0}#label{display:flex;font:var(--bl-font-title-3-regular);line-height:normal;align-items:var(--bl-radio-align-items,center);margin-block:0;color:var(--bl-color-neutral-darker);gap:var(--bl-size-2xs)}#label::before{content:\"\";display:inline-block;box-sizing:border-box;min-width:var(--size);min-height:var(--size);max-width:var(--size);max-height:var(--size);background-color:#fff;border-radius:var(--bl-border-radius-circle);border:solid 1px var(--bl-color-neutral-lighter)}.selected #label::before{border-width:var(--bl-size-3xs);border-color:var(--bl-color-primary)}.selected #label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) #label,:host(:hover) #label{color:var(--bl-color-primary)}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) .wrapper{--size:calc(var(--bl-size-m) - 2px)}:host([disabled]) #label{color:var(--bl-color-neutral-light)}:host([disabled]) #label::before{background-color:var(--bl-color-neutral-lightest);border-width:0;box-shadow:0 0 0 1px var(--bl-color-neutral-lighter)}:host([disabled]) .selected #label::before{background-color:var(--bl-color-neutral-light);border-color:var(--bl-color-neutral-lightest);border-width:calc(var(--bl-size-3xs) - 1px)}.wrapper:focus-visible #label::before{box-shadow:0 0 0 1px #fff,0 0 0 3px var(--bl-color-primary)}`;\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 { event, EventDispatcher } from \"../../../utilities/event\";\nimport type BlRadioGroup from \"../bl-radio-group\";\nimport { blChangeEventName, blRadioGroupTag } from \"../bl-radio-group\";\nimport style from \"./bl-radio.css\";\n\nexport const blRadioTag = \"bl-radio\";\n\nexport const blCheckedEventName = \"bl-checked\";\n\n/**\n * @tag bl-radio\n * @summary Baklava Radio Option component\n *\n * @cssprop [--bl-radio-align-items=center] Align items of radio option\n */\n@customElement(blRadioTag)\nexport default class BlRadio extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n @property()\n name: string;\n\n @property()\n value: string;\n\n /**\n * Sets option as disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @state() private selected = false;\n\n /**\n * Fires when radio is checked\n */\n @event(\"bl-checked\") private onChecked: EventDispatcher<string>;\n\n /**\n * Fires when radio is blurred\n */\n @event(\"bl-focus\") private onFocus: EventDispatcher<string>;\n\n /**\n * Fires when radio is blurred\n */\n @event(\"bl-blur\") private onBlur: EventDispatcher<string>;\n\n /**\n * Sets this option selected\n */\n select() {\n this.selected = true;\n this.onChecked(this.value);\n }\n\n /**\n * Readonly property to determine if option is currently checked\n */\n get checked() {\n return this.selected;\n }\n\n @query(\"[role=radio]\") private radioElement: HTMLElement;\n\n /**\n * Focuses this option\n */\n focus() {\n this.radioElement.tabIndex = 0;\n this.radioElement.focus();\n this.onFocus(this.value);\n }\n\n /**\n * Blurs from this option\n */\n blur() {\n this.radioElement.tabIndex = -1;\n this.onBlur(this.value);\n }\n\n private handleFieldValueChange = (event: CustomEvent<string>) => {\n const newValue = event.detail;\n\n this.selected = newValue === this.value;\n };\n\n private field: BlRadioGroup | null;\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.field = this.closest<BlRadioGroup>(blRadioGroupTag);\n\n if (!this.field) {\n console.warn(\"bl-radio is designed to be used inside a bl-radio-group\", this);\n }\n\n this.field?.addEventListener(blChangeEventName, this.handleFieldValueChange);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.field?.removeEventListener(blChangeEventName, this.handleFieldValueChange);\n }\n\n render(): TemplateResult {\n const classes = classMap({\n wrapper: true,\n selected: this.selected,\n });\n\n return html`<div\n class=${classes}\n role=\"radio\"\n aria-labelledby=\"label\"\n aria-disabled=${this.disabled}\n aria-readonly=${this.disabled}\n @blur=${this.blur}\n @click=${this.select}\n >\n <p id=\"label\"><slot></slot></p>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blRadioTag]: BlRadio;\n }\n interface HTMLElementEventMap {\n [blCheckedEventName]: CustomEvent<string>;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["styles", "i", "bl_radio_group_default", "blRadioGroupTag", "blChangeEventName", "BlRadioGroup", "FormControlMixin", "s", "bl_radio_group_default", "blRadioTag", "option", "changedProperties", "event", "checkedOption", "x", "__decorateClass", "e", "styles", "i", "bl_radio_default", "blRadioTag", "blCheckedEventName", "BlRadio", "s", "event", "newValue", "bl_radio_default", "_a", "blRadioGroupTag", "blChangeEventName", "classes", "o", "x", "__decorateClass", "e", "t", "i"]
|
|
7
|
-
}
|