@trendyol/baklava 3.3.0-beta.22 → 3.3.0-beta.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -1
- package/dist/baklava-react.d.ts +12 -0
- package/dist/baklava-react.d.ts.map +1 -1
- package/dist/baklava-react.js +1 -1
- package/dist/baklava-react.js.map +3 -3
- package/dist/baklava-vue.d.ts +1 -0
- package/dist/baklava.d.ts +1 -0
- package/dist/baklava.d.ts.map +1 -1
- package/dist/baklava.js +1 -1
- package/dist/{chunk-OAF3R4PW.js → chunk-2IJL7HNY.js} +2 -2
- package/dist/chunk-2IJL7HNY.js.map +7 -0
- package/dist/chunk-4BLKAURK.js +16 -0
- package/dist/chunk-4BLKAURK.js.map +7 -0
- package/dist/chunk-7VMGFJ5X.js +2 -0
- package/dist/chunk-7VMGFJ5X.js.map +7 -0
- package/dist/chunk-APLBTZ36.js +24 -0
- package/dist/chunk-APLBTZ36.js.map +7 -0
- package/dist/chunk-DE3A37FL.js +20 -0
- package/dist/chunk-DE3A37FL.js.map +7 -0
- package/dist/chunk-DIGACNOH.js +21 -0
- package/dist/chunk-DIGACNOH.js.map +7 -0
- package/dist/chunk-ERL6CBPO.js +31 -0
- package/dist/chunk-ERL6CBPO.js.map +7 -0
- package/dist/{chunk-5VEXMTA4.js → chunk-H4WETBHJ.js} +2 -2
- package/dist/chunk-H4WETBHJ.js.map +7 -0
- package/dist/chunk-HYBPEELZ.js +5 -0
- package/dist/chunk-HYBPEELZ.js.map +7 -0
- package/dist/chunk-HZV6GUII.js +26 -0
- package/dist/chunk-HZV6GUII.js.map +7 -0
- package/dist/chunk-IDRA37BX.js +59 -0
- package/dist/chunk-IDRA37BX.js.map +7 -0
- package/dist/chunk-KJUZJAHW.js +84 -0
- package/dist/chunk-KJUZJAHW.js.map +7 -0
- package/dist/chunk-LEAVDIGF.js +2 -0
- package/dist/chunk-LEAVDIGF.js.map +7 -0
- package/dist/chunk-MWFGDECP.js +35 -0
- package/dist/chunk-MWFGDECP.js.map +7 -0
- package/dist/chunk-MWG4TBH7.js +27 -0
- package/dist/chunk-MWG4TBH7.js.map +7 -0
- package/dist/chunk-NXVLNG4L.js +65 -0
- package/dist/chunk-NXVLNG4L.js.map +7 -0
- package/dist/chunk-OXHRXOBD.js +32 -0
- package/dist/chunk-OXHRXOBD.js.map +7 -0
- package/dist/{chunk-CAIHRZ24.js → chunk-Q5D7W6YP.js} +2 -2
- package/dist/chunk-Q7CEGCDI.js +50 -0
- package/dist/chunk-Q7CEGCDI.js.map +7 -0
- package/dist/{chunk-GMVJABPT.js → chunk-QDYWH7BU.js} +2 -2
- package/dist/chunk-QDYWH7BU.js.map +7 -0
- package/dist/chunk-RER7OLAQ.js +22 -0
- package/dist/chunk-RER7OLAQ.js.map +7 -0
- package/dist/chunk-SBCJY5IU.js +34 -0
- package/dist/{chunk-75V3FKJS.js.map → chunk-SBCJY5IU.js.map} +2 -2
- package/dist/chunk-STZJ3LBU.js +37 -0
- package/dist/{chunk-KBNVATXF.js.map → chunk-STZJ3LBU.js.map} +2 -2
- package/dist/{chunk-4BZSILLM.js → chunk-T5MEA7JO.js} +2 -2
- package/dist/chunk-T5MEA7JO.js.map +7 -0
- package/dist/chunk-TUUQIEDI.js +25 -0
- package/dist/chunk-TUUQIEDI.js.map +7 -0
- package/dist/{chunk-BNUJWONI.js → chunk-UOGCEUXK.js} +2 -2
- package/dist/chunk-UOGCEUXK.js.map +7 -0
- package/dist/chunk-WPESQSKX.js +31 -0
- package/dist/chunk-WPESQSKX.js.map +7 -0
- package/dist/chunk-X5XH4HTW.js +17 -0
- package/dist/chunk-X5XH4HTW.js.map +7 -0
- package/dist/{chunk-IGNJQVQF.js → chunk-ZE7GYACV.js} +2 -2
- package/dist/chunk-ZE7GYACV.js.map +7 -0
- package/dist/{chunk-N4GAO7FQ.js → chunk-ZJBBQHF3.js} +2 -2
- package/dist/chunk-ZLJF4SVG.js +4 -0
- package/dist/chunk-ZLJF4SVG.js.map +7 -0
- package/dist/components/accordion-group/accordion/bl-accordion.js +1 -1
- package/dist/components/accordion-group/bl-accordion-group.js +1 -1
- package/dist/components/alert/bl-alert.js +1 -1
- package/dist/components/badge/bl-badge.js +1 -1
- package/dist/components/button/bl-button.js +1 -1
- package/dist/components/calendar/bl-calendar.js +1 -1
- package/dist/components/checkbox-group/bl-checkbox-group.js +1 -1
- package/dist/components/checkbox-group/checkbox/bl-checkbox.js +1 -1
- package/dist/components/datepicker/bl-datepicker.js +1 -1
- package/dist/components/dialog/bl-dialog.js +1 -1
- package/dist/components/dialog/bl-dialog.stories.d.ts +1 -0
- package/dist/components/dialog/bl-dialog.stories.d.ts.map +1 -1
- package/dist/components/dialog/bl-dialog.stories.js +36 -6
- package/dist/components/dialog/bl-dialog.stories.js.map +3 -3
- package/dist/components/drawer/bl-drawer.js +1 -1
- package/dist/components/dropdown/bl-dropdown.js +1 -1
- package/dist/components/dropdown/group/bl-dropdown-group.js +1 -1
- package/dist/components/dropdown/item/bl-dropdown-item.js +1 -1
- package/dist/components/input/bl-input.js +1 -1
- package/dist/components/notification/bl-notification.js +1 -1
- package/dist/components/notification/bl-notification.stories.d.ts +1 -0
- package/dist/components/notification/bl-notification.stories.d.ts.map +1 -1
- package/dist/components/notification/bl-notification.stories.js +31 -15
- package/dist/components/notification/bl-notification.stories.js.map +3 -3
- package/dist/components/notification/card/bl-notification-card.js +1 -1
- package/dist/components/pagination/bl-pagination.js +1 -1
- package/dist/components/popover/bl-popover.js +1 -1
- package/dist/components/progress-indicator/bl-progress-indicator.js +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/dist/components/select/bl-select.js +1 -1
- package/dist/components/select/option/bl-select-option.js +1 -1
- package/dist/components/spinner/bl-spinner.js +1 -1
- package/dist/components/split-button/bl-split-button.js +1 -1
- package/dist/components/switch/bl-switch.js +1 -1
- package/dist/components/tab-group/bl-tab-group.js +1 -1
- package/dist/components/tab-group/tab/bl-tab.js +1 -1
- package/dist/components/table/table-cell/bl-table-cell.js +1 -1
- package/dist/components/table/table-header/bl-table-header.js +1 -1
- package/dist/components/table/table-header-cell/bl-table-header-cell.js +1 -1
- package/dist/components/table/table-row/bl-table-row.js +1 -1
- package/dist/components/tag/bl-tag.d.ts +52 -0
- package/dist/components/tag/bl-tag.d.ts.map +1 -0
- package/dist/components/tag/bl-tag.js +2 -0
- package/dist/components/tag/bl-tag.js.map +7 -0
- package/dist/components/tag/bl-tag.test.d.ts +2 -0
- package/dist/components/tag/bl-tag.test.d.ts.map +1 -0
- package/dist/components/textarea/bl-textarea.js +1 -1
- package/dist/components/tooltip/bl-tooltip.js +1 -1
- package/dist/custom-elements.json +112 -0
- package/package.json +1 -1
- package/dist/chunk-4BZSILLM.js.map +0 -7
- package/dist/chunk-4KQZCR3J.js +0 -84
- package/dist/chunk-4KQZCR3J.js.map +0 -7
- package/dist/chunk-4QFXDW3W.js +0 -31
- package/dist/chunk-4QFXDW3W.js.map +0 -7
- package/dist/chunk-5VEXMTA4.js.map +0 -7
- package/dist/chunk-73RGV4UX.js +0 -16
- package/dist/chunk-73RGV4UX.js.map +0 -7
- package/dist/chunk-757CMI4A.js +0 -78
- package/dist/chunk-757CMI4A.js.map +0 -7
- package/dist/chunk-75V3FKJS.js +0 -34
- package/dist/chunk-BNUJWONI.js.map +0 -7
- package/dist/chunk-FCEMOH4J.js +0 -27
- package/dist/chunk-FCEMOH4J.js.map +0 -7
- package/dist/chunk-FTQX7CEW.js +0 -35
- package/dist/chunk-FTQX7CEW.js.map +0 -7
- package/dist/chunk-FVBGMXMC.js +0 -17
- package/dist/chunk-FVBGMXMC.js.map +0 -7
- package/dist/chunk-GMVJABPT.js.map +0 -7
- package/dist/chunk-GXDVWGFU.js +0 -32
- package/dist/chunk-GXDVWGFU.js.map +0 -7
- package/dist/chunk-IGNJQVQF.js.map +0 -7
- package/dist/chunk-ILK55FB6.js +0 -65
- package/dist/chunk-ILK55FB6.js.map +0 -7
- package/dist/chunk-J45OQI7D.js +0 -20
- package/dist/chunk-J45OQI7D.js.map +0 -7
- package/dist/chunk-JAZGOWKA.js +0 -2
- package/dist/chunk-JAZGOWKA.js.map +0 -7
- package/dist/chunk-KBNVATXF.js +0 -37
- package/dist/chunk-NGJM4NWA.js +0 -4
- package/dist/chunk-NGJM4NWA.js.map +0 -7
- package/dist/chunk-OAF3R4PW.js.map +0 -7
- package/dist/chunk-QMVEWMEI.js +0 -20
- package/dist/chunk-QMVEWMEI.js.map +0 -7
- package/dist/chunk-QPODIOFV.js +0 -50
- package/dist/chunk-QPODIOFV.js.map +0 -7
- package/dist/chunk-T5EQ4OXS.js +0 -2
- package/dist/chunk-T5EQ4OXS.js.map +0 -7
- package/dist/chunk-UZJOCLOO.js +0 -21
- package/dist/chunk-UZJOCLOO.js.map +0 -7
- package/dist/chunk-VU6LRFZR.js +0 -26
- package/dist/chunk-VU6LRFZR.js.map +0 -7
- package/dist/chunk-WXWKIQAK.js +0 -22
- package/dist/chunk-WXWKIQAK.js.map +0 -7
- package/dist/chunk-X73CSBRO.js +0 -24
- package/dist/chunk-X73CSBRO.js.map +0 -7
- package/dist/chunk-YZRAUVUQ.js +0 -31
- package/dist/chunk-YZRAUVUQ.js.map +0 -7
- /package/dist/{chunk-CAIHRZ24.js.map → chunk-Q5D7W6YP.js.map} +0 -0
- /package/dist/{chunk-N4GAO7FQ.js.map → chunk-ZJBBQHF3.js.map} +0 -0
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/select/bl-select.css", "../src/components/select/bl-select.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;display:grid;gap:var(--bl-size-3xs);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--label-padding:var(--bl-size-3xs);--border-size:1px;--background-color:var(--bl-color-neutral-full);--border-color:var(--bl-color-neutral-lighter);--border-focus-color:var(--bl-color-primary-highlight);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--label-color:var(--bl-color-neutral-dark);--placeholder-color:var(--bl-color-neutral-light);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-neutral-lightest);--menu-height:250px;--popover-position:var(--bl-popover-position, fixed)}:host([multiple][view-select-all]) .select-wrapper{--menu-height:290px}:host([size=large]) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size=small]) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-font-size-s)}:host([disabled]) .select-wrapper{--placeholder-color:var(--bl-color-neutral-light)}.dirty.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-highlight);--label-color:var(--bl-color-danger)}.select-input{display:grid;align-items:center;justify-content:space-between;grid-template-columns:1fr max-content max-content;cursor:pointer;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--bl-font-title-3-regular);padding:0 calc(var(--padding-horizontal) - var(--label-padding) - var(--border-size));border-radius:var(--bl-border-radius-s);color:var(--text-color);background-color:var(--background-color);-webkit-user-select:none;user-select:none;margin:0;width:auto;min-width:100%}.label,.placeholder{color:var(--placeholder-color);padding-inline-start:var(--label-padding);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.select-wrapper.selected .placeholder,:host(:not([placeholder])) .placeholder,:host([label]:not([label-fixed])) .select-wrapper:not(.select-open) .placeholder{display:none}:host(:not([label])) .label,:host([label-fixed]) .label{display:none}.remove-all{display:none}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-font-size-m)}.dropdown-icon.open{display:none}.select-open .dropdown-icon.open{display:inline-block}.select-open .dropdown-icon.closed{display:none}.selected .dropdown-icon{--icon-color:var(--bl-color-neutral-darker)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-color-neutral-light)}.select-input:focus-visible,.select-open .select-input{border:solid 1px var(--border-focus-color);outline:0}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{padding:0;padding-inline-start:var(--label-padding);margin:0;list-style:none;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([disabled]) .select-input .selected-options{color:var(--bl-color-neutral-light)}.selected-options li{display:inline;font-size:var(--font-size);color:var(--text-color)}.selected-options li:not(:last-child)::after{content:\", \"}.select-input:not(.has-overflowed-options) .additional-selection-count{display:none}:host([disabled]) .additional-selection-count{color:var(--bl-color-neutral-light)}:host([disabled]) .selected-options li{color:var(--bl-color-neutral-light)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-4xs);margin-inline-start:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:var(--popover-position);border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-border-radius-s);padding:var(--menu-padding);outline:0;box-sizing:border-box;max-height:var(--menu-height);overflow-y:auto;display:none;flex-direction:column;z-index:var(--bl-index-popover);width:100%;top:var(--top);left:var(--left)}:host(:empty) .popover{display:none}.popover-no-result{display:flex;flex-direction:column;gap:var(--bl-size-2xs);align-items:center;justify-content:center;height:80px}.select-open .popover{display:flex;border:solid 1px var(--border-focus-color)}bl-icon{color:var(--icon-color)}label,legend{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;display:block;top:var(--padding-vertical);left:var(--padding-horizontal);inset-inline-end:calc(var(--bl-size-2xs) + var(--bl-size-m) + var(--bl-size-2xs));transition:.1s ease-in;pointer-events:none;opacity:0;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color)}legend{height:0;visibility:hidden;display:none}legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}:host(:not([placeholder])) .selected .label,:host([placeholder]) :where(.select-open,.selected) .label{display:none}:where(.select-open,.selected) label{top:0;transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);pointer-events:initial;right:var(--padding-horizontal);opacity:1}:host([label]) :where(.select-open,.selected) legend{max-width:100%;font:var(--bl-font-caption);display:block}:host([label-fixed]) label{position:static;padding:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color);opacity:1}:host([label-fixed]) legend{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.error-icon,.invalid-text{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}.dirty.invalid .hint,:host([help-text]) .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.select-all{position:sticky;top:0;padding:var(--bl-size-xs) 0;background:var(--background-color);z-index:1;font:var(--bl-font-title-3-regular);box-shadow:10px 0 0 var(--background-color),-10px 0 0 var(--background-color)}.select-all::after{position:absolute;content:\"\";width:100%;bottom:0;border-bottom:1px solid var(--bl-color-neutral-lighter)}.search-bar-input{font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--text-color);border:none;outline:0;background-color:transparent;width:100%;height:100%;padding:0;margin:0;box-sizing:border-box}.search-bar-input::placeholder{color:var(--placeholder-color)}.search-bar-input:focus-visible{outline:0}.search-spinner{padding-inline-end:var(--bl-font-size-2xs)}.action-divider{display:none}.select-wrapper .action-divider{display:block;height:1rem;width:1px;background-color:var(--bl-color-neutral-lighter)}.actions bl-icon{padding:4px}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from \"lit\";\nimport { customElement, property, query, queryAll, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { autoUpdate, computePosition, flip, MiddlewareState, offset, size } from \"@floating-ui/dom\";\nimport { localized, msg } from \"@lit/localize\";\nimport { FormControlMixin, requiredValidator } from \"@open-wc/form-control\";\nimport { FormValue } from \"@open-wc/form-helpers\";\nimport \"element-internals-polyfill\";\nimport { LangKey } from \"../../localization\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport { stringBooleanConverter } from \"../../utilities/string-boolean.converter\";\nimport \"../button/bl-button\";\nimport \"../checkbox-group/checkbox/bl-checkbox\";\nimport BlCheckbox from \"../checkbox-group/checkbox/bl-checkbox\";\nimport \"../icon/bl-icon\";\nimport style from \"../select/bl-select.css\";\nimport \"../select/option/bl-select-option\";\nimport type BlSelectOption from \"./option/bl-select-option\";\n\nexport interface ISelectOption<T = string> {\n value: T;\n text: string;\n selected: boolean;\n}\n\nexport type SelectSize = \"medium\" | \"large\" | \"small\";\n\nexport type CleanUpFunction = () => void;\n\n/**\n * @tag bl-select\n * @summary Baklava Select component\n *\n * @cssproperty [--bl-popover-position=fixed] Sets the positioning strategy of select popover. You can set it as `absolute` if you need to show popover relative to its trigger element.\n */\n@customElement(\"bl-select\")\n@localized()\nexport default class BlSelect<ValueType extends FormValue = string> extends FormControlMixin(\n LitElement\n) {\n static get styles(): CSSResultGroup {\n return [style];\n }\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n static formControlValidators = [requiredValidator];\n\n /**\n * Sets name of the select field\n */\n @property()\n name: string;\n\n private _value: ValueType | ValueType[] | null;\n\n private _initialValue: ValueType | ValueType[] | null;\n\n /**\n * Sets the value of the select\n */\n @property()\n get value(): ValueType | ValueType[] | null {\n return this._value;\n }\n\n set value(val: ValueType | ValueType[] | null) {\n this._value = val;\n\n if (Array.isArray(val)) {\n const formData = new FormData();\n\n val.forEach(option => formData.append(this.name, `${option}`));\n this.setValue(formData);\n } else {\n this.setValue(val);\n }\n\n this.setOptionsSelected();\n }\n\n shouldFormValueUpdate(): boolean {\n return this.value !== null && this.value !== \"\";\n }\n\n /* Declare reactive properties */\n /**\n * Sets the label value\n */\n @property({ reflect: true })\n label?: string;\n\n /**\n * Sets the placeholder value. If left blank, the label value (if specified) is set as placeholder.\n */\n @property({ reflect: true })\n placeholder?: string;\n\n /**\n * Sets the size value. Select component's height value will be changed accordingly\n */\n @property({ type: String, reflect: true })\n size: SelectSize = \"medium\";\n\n /**\n * When option is not selected, shows component in error state\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Shows the component in disabled state.\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Sets whether the selected option is clearable\n */\n @property({ type: Boolean, reflect: true })\n clearable = false;\n\n /**\n * Allows multiple options to be selected\n */\n @property({ type: Boolean, reflect: true })\n multiple = false;\n\n /**\n * Sets input to get keyboard focus automatically\n */\n @property({ type: Boolean, reflect: true })\n autofocus = false;\n\n /**\n * Makes label as fixed positioned\n */\n @property({ type: Boolean, attribute: \"label-fixed\", reflect: true })\n labelFixed = false;\n\n /**\n * Adds help text\n */\n @property({ type: String, attribute: \"help-text\", reflect: true })\n helpText?: string;\n\n /**\n * Set custom error message\n */\n @property({ type: String, attribute: \"invalid-text\", reflect: true })\n customInvalidText?: string;\n\n /**\n * Views select all option in multiple select\n */\n @property({ type: Boolean, attribute: \"view-select-all\", converter: stringBooleanConverter() })\n viewSelectAll = false;\n\n /**\n * Sets select all text in multiple select\n */\n @property({ type: String, attribute: \"select-all-text\" })\n selectAllText?: string;\n\n /**\n * Enable search functionality for the options within the list\n */\n @property({ type: Boolean, attribute: \"search-bar\", reflect: true })\n searchBar = false;\n\n /**\n * Search for text variations such as \"search,\" \"searching,\" \"search by country,\" and so on\n */\n @property({ type: String, attribute: \"search-bar-placeholder\", reflect: true })\n searchBarPlaceholder?: string;\n\n /**\n * Display a loading icon in place of the search icon.\n */\n @property({\n type: Boolean,\n attribute: \"search-bar-loading-state\",\n converter: stringBooleanConverter(),\n })\n searchBarLoadingState = false;\n\n /**\n * Text to display when no search results are found.\n */\n @property({ type: String, attribute: \"search-not-found-text\", reflect: true })\n searchNotFoundText?: string;\n\n /**\n * Text to display on the clear search button.\n */\n @property({ type: String, attribute: \"popover-clear-search-text\", reflect: true })\n popoverClearSearchText?: string;\n\n /* Declare internal reactive properties */\n @state()\n private _isPopoverOpen = false;\n\n @state()\n private _additionalSelectedOptionCount = 0;\n\n @state()\n private _searchText = \"\";\n\n @query(\".selected-options\")\n private selectedOptionsContainer!: HTMLElement;\n\n @queryAll(\".selected-options li\")\n private selectedOptionsItems!: NodeListOf<HTMLElement>;\n\n @query(\".popover\")\n private _popover: HTMLElement;\n\n @query(\".select-input\")\n private _selectInput: HTMLElement;\n\n /**\n * Fires when selection changes\n */\n @event(\"bl-select\") private _onBlSelect: EventDispatcher<\n ISelectOption<ValueType>[] | ISelectOption<ValueType>\n >;\n\n /**\n * Fires when search text changes\n */\n @event(\"bl-search\") private _onBlSearch: EventDispatcher<string>;\n\n private userLang =\n (document.querySelector(\"html\")?.getAttribute(\"lang\") as LangKey | null) || navigator.language;\n\n private _connectedOptions: BlSelectOption<ValueType>[] = [];\n\n private _cleanUpPopover: CleanUpFunction | null = null;\n\n private setOptionsSelected() {\n this._connectedOptions.forEach(\n option =>\n (option.selected =\n this.value === option.value ||\n (Array.isArray(this.value) && this.value.includes(option.value)))\n );\n\n this._selectedOptions = [...this.options.filter(option => option.selected)];\n }\n\n get options() {\n return this._connectedOptions;\n }\n\n get opened() {\n return this._isPopoverOpen;\n }\n\n get noResultFound() {\n return this._searchText !== \"\" && this._connectedOptions.every(option => option.hidden);\n }\n\n @state()\n private _selectedOptions: BlSelectOption<ValueType>[] = [];\n\n @state()\n private dirty = false;\n\n get selectedOptions(): BlSelectOption<ValueType>[] {\n return this._selectedOptions;\n }\n\n get additionalSelectedOptionCount() {\n return this._additionalSelectedOptionCount;\n }\n\n validityCallback(): string | void {\n if (this.customInvalidText) {\n return this.customInvalidText;\n }\n const select = document.createElement(\"select\");\n\n select.required = this.required;\n\n return select.validationMessage;\n }\n\n reportValidity() {\n this.dirty = true;\n return this.checkValidity();\n }\n\n resetFormControl(): void {\n this.value = this._initialValue;\n }\n\n @query(\".select-input\")\n validationTarget: HTMLElement;\n\n open() {\n if (this.searchBar) {\n setTimeout(() => {\n document.activeElement?.shadowRoot?.querySelector(\"input\")?.focus();\n }, 100);\n }\n\n this._isPopoverOpen = true;\n this._setupPopover();\n document.addEventListener(\"click\", this._interactOutsideHandler, true);\n document.addEventListener(\"focus\", this._interactOutsideHandler, true);\n }\n\n close() {\n this._handleSearchOptions({ target: { value: \"\" } } as InputEvent & {\n target: HTMLInputElement;\n });\n\n this._isPopoverOpen = false;\n this.focusedOptionIndex = -1;\n this._cleanUpPopover && this._cleanUpPopover();\n document.removeEventListener(\"click\", this._interactOutsideHandler, true);\n document.removeEventListener(\"focus\", this._interactOutsideHandler, true);\n }\n\n private _interactOutsideHandler = (event: MouseEvent | FocusEvent) => {\n const eventPath = event.composedPath() as HTMLElement[];\n\n if (!eventPath?.find(el => el.tagName === \"BL-SELECT\")?.contains(this)) {\n this.close();\n }\n };\n\n private _setupPopover() {\n this._cleanUpPopover = autoUpdate(this._selectInput, this._popover, () => {\n computePosition(this._selectInput, this._popover, {\n placement: \"bottom\",\n strategy: \"fixed\",\n middleware: [\n flip(),\n offset(8),\n size({\n apply(args: MiddlewareState) {\n Object.assign(args.elements.floating.style, {\n width: `${args.elements.reference.getBoundingClientRect().width}px`,\n });\n },\n }),\n ],\n }).then(({ x, y }) => {\n this._popover.style.setProperty(\"--left\", `${x}px`);\n this._popover.style.setProperty(\"--top\", `${y}px`);\n });\n });\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.form?.addEventListener(\"submit\", (e: SubmitEvent) => {\n if (!this.reportValidity()) {\n e.preventDefault();\n }\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this._cleanUpPopover && this._cleanUpPopover();\n }\n\n private inputTemplate() {\n const inputSelectedOptions = html`<ul class=\"selected-options\">\n ${this._selectedOptions.map(\n item => html`<li>${item.getAttribute(\"label\") || item.textContent}</li>`\n )}\n </ul>`;\n\n const isAllSelectedDisabled =\n this._selectedOptions.length > 0 && this._selectedOptions.every(option => option.disabled);\n const isRemoveButtonShown = !isAllSelectedDisabled && (this.clearable || this.multiple);\n const removeButton = isRemoveButtonShown\n ? html`<bl-button\n class=\"remove-all\"\n size=\"small\"\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"close\"\n @click=${this._onClickRemove}\n ></bl-button>`\n : \"\";\n\n const isSearchBarVisible = this.searchBar && this.opened;\n const hasSelectedOptions = this._selectedOptions.length > 0;\n\n const isDividerShown = isSearchBarVisible || (hasSelectedOptions && isRemoveButtonShown);\n\n const searchbarPlaceholderText =\n this.searchBarPlaceholder ?? msg(\"Search\", { desc: \"bl-select: search placeholder text\" });\n\n const searchMagIcon = html`<bl-icon\n class=\"search-mag-icon\"\n name=\"search\"\n style=\"color: var(--bl-color-primary);font-size: var(--bl-font-size-s)\"\n ></bl-icon>`;\n\n const searchSpinner = html`<bl-spinner class=\"search-spinner\"></bl-spinner>`;\n\n const actionDivider = isDividerShown ? html`<div class=\"action-divider\"></div>` : \"\";\n\n const search = html`<fieldset\n class=${classMap({\n \"select-input\": true,\n \"has-overflowed-options\": this._additionalSelectedOptionCount > 0,\n })}\n tabindex=\"${this.disabled ? \"-1\" : 0}\"\n .autofocus=${this.autofocus}\n role=\"button\"\n aria-haspopup=\"listbox\"\n aria-expanded=\"${this.opened}\"\n aria-labelledby=\"label\"\n @click=${this.open}\n >\n <legend><span>${this.label}</span></legend>\n\n ${this._selectedOptions.length > 0 && !this.opened\n ? inputSelectedOptions\n : html`\n <input\n class=\"search-bar-input\"\n placeholder=${this.opened || this.labelFixed\n ? searchbarPlaceholderText\n : this.label || searchbarPlaceholderText}\n @input=${this._handleSearchOptions}\n @keydown=${(e: KeyboardEvent) => {\n if (e.code === \"Space\") {\n e.stopPropagation();\n }\n }}\n .value=${this._searchText}\n />\n `}\n ${!this.opened\n ? html`<span class=\"additional-selection-count\"\n >+${this._additionalSelectedOptionCount}</span\n >`\n : \"\"}\n\n <div class=\"actions\">\n ${this.opened ? (this.searchBarLoadingState ? searchSpinner : searchMagIcon) : \"\"}\n ${!this.opened ? removeButton : \"\"} ${actionDivider}\n\n <div @click=${this._togglePopover}>\n <bl-icon class=\"dropdown-icon open\" name=\"arrow_up\"></bl-icon>\n\n <bl-icon class=\"dropdown-icon closed\" name=\"arrow_down\"></bl-icon>\n </div>\n </div>\n </fieldset>`;\n\n return this.searchBar\n ? search\n : html`<fieldset\n class=${classMap({\n \"select-input\": true,\n \"has-overflowed-options\": this._additionalSelectedOptionCount > 0,\n })}\n tabindex=\"${ifDefined(this.disabled ? undefined : 0)}\"\n ?autofocus=${this.autofocus}\n @click=${this._togglePopover}\n role=\"button\"\n aria-haspopup=\"listbox\"\n aria-expanded=\"${this.opened}\"\n aria-labelledby=\"label\"\n >\n <legend><span>${this.label}</span></legend>\n <span class=\"placeholder\">${this.placeholder}</span>\n <span class=\"label\">${this.label}</span>\n ${inputSelectedOptions}\n <span class=\"additional-selection-count\">+${this._additionalSelectedOptionCount}</span>\n <div class=\"actions\">\n ${removeButton} ${actionDivider}\n <bl-icon class=\"dropdown-icon open\" name=\"arrow_up\"></bl-icon>\n\n <bl-icon class=\"dropdown-icon closed\" name=\"arrow_down\"></bl-icon>\n </div>\n </fieldset>`;\n }\n\n selectAllTemplate() {\n if (!this.multiple || !this.viewSelectAll || this.noResultFound) {\n return null;\n }\n\n const isAllRenderedOptionsSelected = this._connectedOptions\n .filter(option => !option.hidden)\n .every(option => option.selected);\n\n const isAnySelected = this._selectedOptions.filter(option => !option.hidden).length > 0;\n const selectAllText =\n this.selectAllText ?? msg(\"Select All\", { desc: \"bl-select: select all text\" });\n\n return html`<bl-checkbox\n class=\"select-all\"\n .checked=\"${isAllRenderedOptionsSelected}\"\n .indeterminate=\"${isAnySelected && !isAllRenderedOptionsSelected}\"\n role=\"option\"\n aria-selected=\"${isAllRenderedOptionsSelected}\"\n @bl-checkbox-change=\"${this._handleSelectAll}\"\n >\n ${selectAllText}\n </bl-checkbox>`;\n }\n\n render(): TemplateResult {\n const invalidMessage = !this.checkValidity()\n ? html`<p id=\"errorMessage\" aria-live=\"polite\" class=\"invalid-text\">\n ${this.validationMessage}\n </p>`\n : \"\";\n\n const helpMessage = this.helpText ? html`<p class=\"help-text\">${this.helpText}</p>` : \"\";\n\n const label = this.label ? html`<label id=\"label\">${this.label}</label>` : \"\";\n\n const noDataText =\n this.searchNotFoundText ?? msg(\"No Data Found\", { desc: \"bl-select: search no data text\" });\n\n const clearSearchText =\n this.popoverClearSearchText ??\n msg(\"Clear Search\", { desc: \"bl-select: clear search button text\" });\n\n return html`<div\n class=${classMap({\n \"select-wrapper\": true,\n \"select-open\": this.opened,\n \"selected\": this._selectedOptions.length > 0,\n \"invalid\": !this.validity.valid,\n \"dirty\": this.dirty,\n })}\n @keydown=${this.handleKeydown}\n >\n ${label} ${this.inputTemplate()}\n <div\n class=\"popover\"\n tabindex=\"${ifDefined(this._isPopoverOpen ? undefined : \"-1\")}\"\n @bl-select-option=${this._handleSelectOptionEvent}\n role=\"listbox\"\n aria-multiselectable=\"${this.multiple}\"\n aria-labelledby=\"label\"\n >\n ${this.selectAllTemplate()}\n <slot></slot>\n ${this.searchBar && this.noResultFound\n ? html`<div name=\"popover-clear-search-text\" class=\"popover-no-result\">\n <span>${noDataText}</span>\n <bl-button\n variant=\"tertiary\"\n @click=${() => {\n this._handleSearchOptions({ target: { value: \"\" } } as InputEvent & {\n target: HTMLInputElement;\n });\n }}\n >${clearSearchText}</bl-button\n >\n </div>`\n : \"\"}\n </div>\n <div class=\"hint\">${invalidMessage} ${helpMessage}</div>\n </div> `;\n }\n\n private focusedOptionIndex = -1;\n private lastKeyPressedTime = 0;\n private typedCharacters = \"\";\n private keyPressThreshold = 500;\n\n private handleFocusOptionByKey(key: string) {\n const currentTime = Date.now();\n const elapsedTimeSinceLastKeyPress = currentTime - this.lastKeyPressedTime;\n\n if (elapsedTimeSinceLastKeyPress > this.keyPressThreshold) {\n this.typedCharacters = \"\";\n }\n\n this.lastKeyPressedTime = currentTime;\n this.typedCharacters += key.toLowerCase();\n\n const matchingOptionIndex = this.options.findIndex(option => {\n if (option.disabled) {\n return false;\n }\n const optionText = option.innerText.trim().toLowerCase();\n\n return optionText.startsWith(this.typedCharacters);\n });\n\n if (matchingOptionIndex !== -1) {\n this.focusedOptionIndex = matchingOptionIndex;\n this.options[matchingOptionIndex].focus();\n }\n }\n\n private handleKeydown(event: KeyboardEvent) {\n if (this.focusedOptionIndex === -1 && [\"Enter\", \"Space\"].includes(event.code)) {\n this._togglePopover();\n event.preventDefault();\n } else if (this._isPopoverOpen === false && [\"ArrowDown\", \"ArrowUp\"].includes(event.code)) {\n this.open();\n event.preventDefault();\n } else if (event.code === \"Escape\") {\n this.close();\n event.preventDefault();\n } else if (this._isPopoverOpen && [\"ArrowDown\", \"ArrowUp\"].includes(event.code)) {\n const activeOptions = this.options.filter(option => !option.disabled);\n\n event.code === \"ArrowDown\" && this.focusedOptionIndex++;\n event.code === \"ArrowUp\" && this.focusedOptionIndex--;\n\n // Don't exceed array indexes\n this.focusedOptionIndex = Math.max(\n 0,\n Math.min(this.focusedOptionIndex, activeOptions.length - 1)\n );\n\n activeOptions[this.focusedOptionIndex].focus();\n\n event.preventDefault();\n } else if (this._isPopoverOpen && !this.searchBar) {\n this.handleFocusOptionByKey(event.key);\n }\n }\n\n private _togglePopover() {\n this._isPopoverOpen ? this.close() : this.open();\n }\n\n private _handleSelectEvent() {\n const options = this._selectedOptions.map(\n option =>\n ({\n value: option.value,\n selected: option.selected,\n text: option.textContent,\n } as ISelectOption<ValueType>)\n );\n\n if (!this.multiple) this._onBlSelect(options[0]);\n else this._onBlSelect(options);\n }\n\n private _handleSearchEvent() {\n this._onBlSearch(this._searchText);\n }\n\n private _handleSearchOptions(e: InputEvent): void {\n if (!this.searchBar) return;\n\n this._searchText = (e.target as HTMLInputElement).value;\n\n this._handleSearchEvent();\n\n this._connectedOptions.forEach(option => {\n const searchText = this._searchText.toLowerCase();\n let optionText = \"\";\n\n if (option.textContent) {\n try {\n // Try locale-specific comparison first\n optionText = option.textContent.toLocaleLowerCase(this.userLang);\n } catch {\n // Fallback to basic toLowerCase if locale is not supported\n optionText = option.textContent.toLowerCase();\n }\n }\n\n const isVisible = optionText.includes(searchText);\n\n option.hidden = !isVisible;\n });\n\n this._selectedOptions = this.options.filter(option => option.selected);\n this._handleLastVisibleSearchedOption();\n this.requestUpdate();\n }\n\n private _handleLastVisibleSearchedOption() {\n const lastVisibleOption = [...this.options].reverse().find(option => !option.hidden);\n\n if (lastVisibleOption) {\n lastVisibleOption?.shadowRoot?.querySelector(\"div\")?.classList.add(\"no-border-bottom\");\n }\n\n this.options.map(option => {\n if (!option.hidden && option !== lastVisibleOption) {\n option.shadowRoot?.querySelector(\"div\")?.classList.remove(\"no-border-bottom\");\n }\n });\n }\n\n private _handleSingleSelect(optionItem: BlSelectOption<ValueType>) {\n this.value = optionItem.value;\n\n this._searchText = \"\";\n this._handleSelectEvent();\n this.close();\n }\n\n private _handleMultipleSelect() {\n this.value = this._connectedOptions\n .filter(option => option.selected)\n .map(option => option.value);\n\n this._handleSelectEvent();\n }\n\n private _handleSelectOptionEvent(e: CustomEvent) {\n const optionItem = e.target as BlSelectOption<ValueType>;\n\n this.dirty = true;\n\n if (this.multiple) {\n this._handleMultipleSelect();\n } else {\n this._handleSingleSelect(optionItem);\n }\n }\n\n private _handleSelectAll(e: CustomEvent) {\n const selectAllEl = this.shadowRoot?.querySelector(\".select-all\") as BlCheckbox;\n\n const checked = e.detail;\n const unselectedOptions = this._connectedOptions.filter(\n option => !option.selected && !option.hidden\n );\n const isAllUnselectedDisabled = unselectedOptions.every(option => option.disabled);\n\n // If all available options are selected, instead of checking, uncheck all options\n if (checked && isAllUnselectedDisabled) {\n setTimeout(() => {\n const checkbox = selectAllEl?.shadowRoot?.querySelector(\"input\");\n\n checkbox?.click();\n }, 0);\n return;\n }\n\n this._connectedOptions.forEach(option => {\n if (option.disabled || option.hidden) {\n return;\n }\n\n option.selected = checked;\n });\n\n this._handleMultipleSelect();\n }\n\n private _onClickRemove(e: MouseEvent) {\n e.stopPropagation();\n\n this._searchText = \"\";\n\n const selectedDisabledOptions = this._selectedOptions.filter(option => option.disabled);\n\n this._connectedOptions\n .filter(option => !option.disabled && option.selected)\n .forEach(option => {\n option.selected = false;\n });\n\n this.value = selectedDisabledOptions.length\n ? selectedDisabledOptions.map(option => option.value)\n : null;\n this._handleSelectEvent();\n }\n\n private _checkAdditionalItemCount() {\n if (!this.multiple || !this.selectedOptionsItems || this.selectedOptionsItems.length < 2) {\n this._additionalSelectedOptionCount = 0;\n return;\n }\n\n const firstNonVisibleItemIndex = [...this.selectedOptionsItems].findIndex(\n item => item.offsetLeft > this.selectedOptionsContainer.offsetWidth\n );\n\n if (firstNonVisibleItemIndex > -1) {\n this._additionalSelectedOptionCount =\n this.selectedOptionsItems.length - firstNonVisibleItemIndex;\n } else {\n this._additionalSelectedOptionCount = 0;\n }\n }\n\n protected firstUpdated(): void {\n if (this.value === undefined) {\n if (this.multiple) {\n this.value = [];\n } else {\n this.value = null;\n }\n }\n\n this._initialValue = this._value;\n }\n\n protected updated(_changedProperties: PropertyValues) {\n if (\n _changedProperties.has(\"multiple\") &&\n typeof _changedProperties.get(\"multiple\") === \"boolean\"\n ) {\n this.value = null;\n }\n\n if (_changedProperties.has(\"_selectedOptions\")) {\n this._checkAdditionalItemCount();\n }\n }\n\n /**\n * This method is used by `bl-select-option` component to register itself to bl-select.\n * @param option BlSelectOption reference to be registered\n */\n registerOption(option: BlSelectOption<ValueType>) {\n this._connectedOptions.push(option);\n\n if (option.selected) {\n if (this.multiple) {\n if (!Array.isArray(this.value)) {\n this.value = [];\n }\n this.value = [...this.value, option.value];\n } else {\n this.value = option.value;\n }\n }\n\n this.setOptionsSelected();\n this.requestUpdate();\n }\n\n /**\n * This method is used by `bl-select-option` component to unregister itself from bl-select.\n * @param option BlSelectOption reference to be unregistered\n */\n unregisterOption(option: BlSelectOption<ValueType>) {\n this._connectedOptions.splice(this._connectedOptions.indexOf(option), 1);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-select\": BlSelect;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["styles", "i", "bl_select_default", "_a", "BlSelect", "FormControlMixin", "s", "event", "eventPath", "el", "bl_select_default", "val", "formData", "option", "select", "_b", "_c", "autoUpdate", "computePosition", "flip", "offset", "size", "args", "x", "y", "e", "inputSelectedOptions", "item", "isRemoveButtonShown", "removeButton", "isSearchBarVisible", "hasSelectedOptions", "isDividerShown", "searchbarPlaceholderText", "msg", "searchMagIcon", "searchSpinner", "actionDivider", "search", "o", "l", "isAllRenderedOptionsSelected", "isAnySelected", "selectAllText", "invalidMessage", "helpMessage", "label", "noDataText", "clearSearchText", "key", "currentTime", "matchingOptionIndex", "activeOptions", "options", "searchText", "optionText", "isVisible", "lastVisibleOption", "optionItem", "selectAllEl", "checked", "isAllUnselectedDisabled", "checkbox", "selectedDisabledOptions", "firstNonVisibleItemIndex", "_changedProperties", "requiredValidator", "__decorateClass", "stringBooleanConverter", "t", "i", "localized"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import{a as u}from"./chunk-IPYZIIRV.js";import{a as b}from"./chunk-DINNT5P2.js";import{a as d}from"./chunk-GRL4DWKG.js";import{a as h,b as a}from"./chunk-5MOOXA2X.js";import{a as s,b as c,f as n}from"./chunk-4OT5AMS5.js";import{d as r}from"./chunk-IZ2LK5GK.js";var m=s`:host{display:inline-block;cursor:pointer;vertical-align:middle}span{display:inline-block}.switch{--track-height:var(--bl-size-xl);--track-width:var(--bl-size-4xl);--thumb-offset:var(--bl-size-4xs);--thumb-height:calc(var(--track-height) - calc(2 * var(--thumb-offset)));--thumb-width:var(--thumb-height);--animation-duration:var(--bl-switch-animation-duration, 300ms);--switch-color:var(--bl-switch-color-off, var(--bl-color-neutral-lighter));background-color:var(--switch-color);border-radius:var(--bl-border-radius-pill);height:var(--track-height);transition-property:background-color;transition-duration:var(--animation-duration);width:var(--track-width)}.switch::before{content:"";display:inline-block;background-color:#fff;border-radius:var(--bl-border-radius-circle);height:var(--thumb-height);inset-inline-start:var(--thumb-offset);position:relative;top:var(--thumb-offset);transition:transform;transition-duration:var(--animation-duration);width:var(--thumb-width)}label{display:flex;gap:var(--bl-size-2xs);color:var(--bl-color-neutral-darker);font:var(--bl-font-title-3);cursor:pointer;user-select:none;line-height:normal;align-items:center;margin-block:0}.label{overflow-wrap:anywhere}:host([disabled]) .label{color:var(--bl-color-neutral-light);border:1px solid var(--bl-color-neutral-lighter)}:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .label,:host(:hover) .label,:host([checked]) .label{color:var(--bl-color-primary)}:host([checked]) .switch{--switch-color:var(--bl-switch-color-on, var(--bl-switch-color, var(--bl-color-primary)))}:host([checked]) .switch::before{transform:translateX(calc(var(--track-width) - var(--thumb-width) - calc(2 * var(--thumb-offset))))}:host([checked][dir=rtl]) .switch::before{transform:translateX(calc(calc(2 * var(--thumb-offset)) - var(--track-width) + var(--thumb-width)))}:host([disabled]) .switch{opacity:.5;cursor:not-allowed}:host([disabled]){cursor:not-allowed}.switch:focus-visible{position:relative;outline:0}.switch:focus-visible::after{border:2px solid var(--switch-color);border-radius:var(--bl-border-radius-pill);content:"";position:absolute;inset:-3px}`,p=m;var v="bl-switch",t=class extends n{constructor(){super(...arguments);this.checked=!1;this.disabled=!1}static get styles(){return[p]}toggle(){this.disabled||(this.checked=!this.checked,this.onToggle(this.checked))}connectedCallback(){super.connectedCallback(),u(this)}handleKeyDown(e){(e.code==="Enter"||e.code==="Space")&&(this.toggle(),e.preventDefault())}render(){var o,l,i;let e=(i=(l=this.ariaLabel)!=null?l:(o=this.attributes.getNamedItem("aria-label"))==null?void 0:o.value)!=null?i:void 0;return c`
|
|
2
|
+
<label @click=${this.toggle}>
|
|
3
|
+
<slot class="label"></slot>
|
|
4
|
+
<span
|
|
5
|
+
class="switch"
|
|
6
|
+
role="switch"
|
|
7
|
+
aria-checked=${this.checked}
|
|
8
|
+
aria-readonly=${!!this.disabled}
|
|
9
|
+
@keydown=${this.handleKeyDown}
|
|
10
|
+
aria-label=${b(e)}
|
|
11
|
+
tabindex="0"
|
|
12
|
+
>
|
|
13
|
+
</span>
|
|
14
|
+
</label>
|
|
15
|
+
`}};r([a({type:Boolean,reflect:!0})],t.prototype,"checked",2),r([a({type:Boolean,reflect:!0})],t.prototype,"disabled",2),r([d("bl-switch-toggle")],t.prototype,"onToggle",2),t=r([h(v)],t);export{v as a,t as b};
|
|
16
|
+
//# sourceMappingURL=chunk-4BLKAURK.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/switch/bl-switch.css", "../src/components/switch/bl-switch.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;cursor:pointer;vertical-align:middle}span{display:inline-block}.switch{--track-height:var(--bl-size-xl);--track-width:var(--bl-size-4xl);--thumb-offset:var(--bl-size-4xs);--thumb-height:calc(var(--track-height) - calc(2 * var(--thumb-offset)));--thumb-width:var(--thumb-height);--animation-duration:var(--bl-switch-animation-duration, 300ms);--switch-color:var(--bl-switch-color-off, var(--bl-color-neutral-lighter));background-color:var(--switch-color);border-radius:var(--bl-border-radius-pill);height:var(--track-height);transition-property:background-color;transition-duration:var(--animation-duration);width:var(--track-width)}.switch::before{content:\"\";display:inline-block;background-color:#fff;border-radius:var(--bl-border-radius-circle);height:var(--thumb-height);inset-inline-start:var(--thumb-offset);position:relative;top:var(--thumb-offset);transition:transform;transition-duration:var(--animation-duration);width:var(--thumb-width)}label{display:flex;gap:var(--bl-size-2xs);color:var(--bl-color-neutral-darker);font:var(--bl-font-title-3);cursor:pointer;user-select:none;line-height:normal;align-items:center;margin-block:0}.label{overflow-wrap:anywhere}:host([disabled]) .label{color:var(--bl-color-neutral-light);border:1px solid var(--bl-color-neutral-lighter)}:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .label,:host(:hover) .label,:host([checked]) .label{color:var(--bl-color-primary)}:host([checked]) .switch{--switch-color:var(--bl-switch-color-on, var(--bl-switch-color, var(--bl-color-primary)))}:host([checked]) .switch::before{transform:translateX(calc(var(--track-width) - var(--thumb-width) - calc(2 * var(--thumb-offset))))}:host([checked][dir=rtl]) .switch::before{transform:translateX(calc(calc(2 * var(--thumb-offset)) - var(--track-width) + var(--thumb-width)))}:host([disabled]) .switch{opacity:.5;cursor:not-allowed}:host([disabled]){cursor:not-allowed}.switch:focus-visible{position:relative;outline:0}.switch:focus-visible::after{border:2px solid var(--switch-color);border-radius:var(--bl-border-radius-pill);content:\"\";position:absolute;inset:-3px}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { setDirectionProperty } from \"../../utilities/direction\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport style from \"./bl-switch.css\";\n\nexport const blSwitchTag = \"bl-switch\";\n\n/**\n * @tag bl-switch\n * @summary Baklava Switch component\n *\n * @cssproperty [--bl-switch-color-on=--bl-color-primary] Set the checked color\n * @cssproperty [--bl-switch-color-off=--bl-color-neutral-lighter] Set the unchecked color\n * @cssproperty [--bl-switch-animation-duration=300ms] Set the animation duration of switch toggle\n */\n@customElement(blSwitchTag)\nexport default class BlSwitch extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the checked state for switch\n */\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n /**\n * Sets the disabled state for switch\n */\n @property({ type: Boolean, reflect: true })\n disabled? = false;\n\n /**\n * Fires whenever user toggles the switch\n */\n @event(\"bl-switch-toggle\") private onToggle: EventDispatcher<boolean>;\n\n toggle() {\n if (this.disabled) return;\n\n this.checked = !this.checked;\n this.onToggle(this.checked);\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n\n setDirectionProperty(this);\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (event.code === \"Enter\" || event.code === \"Space\") {\n this.toggle();\n event.preventDefault();\n }\n }\n\n render(): TemplateResult {\n const ariaLabel =\n this.ariaLabel ?? this.attributes.getNamedItem(\"aria-label\")?.value ?? undefined;\n\n return html`\n <label @click=${this.toggle}>\n <slot class=\"label\"></slot>\n <span\n class=\"switch\"\n role=\"switch\"\n aria-checked=${this.checked}\n aria-readonly=${!!this.disabled}\n @keydown=${this.handleKeyDown}\n aria-label=${ifDefined(ariaLabel)}\n tabindex=\"0\"\n >\n </span>\n </label>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blSwitchTag]: BlSwitch;\n }\n}\n"],
|
|
5
|
+
"mappings": "qQACO,IAAMA,EAASC,6kEACfC,EAAQF,ECKR,IAAMG,EAAc,YAWNC,EAArB,cAAsCC,CAAW,CAAjD,kCASE,aAAU,GAMV,cAAY,GAdZ,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAmBA,QAAS,CACH,KAAK,WAET,KAAK,QAAU,CAAC,KAAK,QACrB,KAAK,SAAS,KAAK,OAAO,EAC5B,CAEA,mBAA0B,CACxB,MAAM,kBAAkB,EAExBC,EAAqB,IAAI,CAC3B,CAEQ,cAAcC,EAAsB,EACtCA,EAAM,OAAS,SAAWA,EAAM,OAAS,WAC3C,KAAK,OAAO,EACZA,EAAM,eAAe,EAEzB,CAEA,QAAyB,CA5D3B,IAAAC,EAAAC,EAAAC,EA6DI,IAAMC,GACJD,GAAAD,EAAA,KAAK,YAAL,KAAAA,GAAkBD,EAAA,KAAK,WAAW,aAAa,YAAY,IAAzC,YAAAA,EAA4C,QAA9D,KAAAE,EAAuE,OAEzE,OAAOE;AAAA,sBACW,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKF,KAAK;AAAA,0BACJ,CAAC,CAAC,KAAK;AAAA,qBACZ,KAAK;AAAA,uBACHC,EAAUF,CAAS;AAAA;AAAA;AAAA;AAAA;AAAA,KAMxC,CACF,EArDEG,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GARvBZ,EASnB,uBAMAW,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAdvBZ,EAenB,wBAKmCW,EAAA,CAAlCP,EAAM,kBAAkB,GApBNJ,EAoBgB,wBApBhBA,EAArBW,EAAA,CADCC,EAAcb,CAAW,GACLC",
|
|
6
|
+
"names": ["styles", "i", "bl_switch_default", "blSwitchTag", "BlSwitch", "s", "bl_switch_default", "setDirectionProperty", "event", "_a", "_b", "_c", "ariaLabel", "x", "l", "__decorateClass", "e"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a}from"./chunk-STMCW2R6.js";import{a as r,b as i}from"./chunk-5MOOXA2X.js";import{a as o,b as l,f as s}from"./chunk-4OT5AMS5.js";import{d as e}from"./chunk-IZ2LK5GK.js";var p=o`:host{display:table-header-group}:host([sticky]){position:sticky;top:0;inset-inline-start:0;inset-inline-end:0;z-index:3;transition:top 50ms;box-shadow:0 8px 16px 0 rgb(39 49 66 / 10%)}:host([sticky])::after{content:"";display:block;position:absolute;bottom:0;inset-inline-start:0;inset-inline-end:0;height:1px;background:var(--bl-color-neutral-lighter)}`,n=p;var b="bl-table-header",t=class extends s{constructor(){super(...arguments);this.sticky=!1}static get styles(){return[n]}connectedCallback(){super.connectedCallback(),this.closest(a)||console.warn("bl-table-header is designed to be used inside a bl-table",this)}render(){return l`<slot></slot> `}};e([i({type:Boolean,reflect:!0})],t.prototype,"sticky",2),t=e([r(b)],t);export{b as a,t as b};
|
|
2
|
+
//# sourceMappingURL=chunk-7VMGFJ5X.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/table/table-header/bl-table-header.css", "../src/components/table/table-header/bl-table-header.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:table-header-group}:host([sticky]){position:sticky;top:0;inset-inline-start:0;inset-inline-end:0;z-index:3;transition:top 50ms;box-shadow:0 8px 16px 0 rgb(39 49 66 / 10%)}:host([sticky])::after{content:\"\";display:block;position:absolute;bottom:0;inset-inline-start:0;inset-inline-end:0;height:1px;background:var(--bl-color-neutral-lighter)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport \"element-internals-polyfill\";\nimport { blTableTag } from \"../bl-table\";\nimport type BlTable from \"../bl-table\";\nimport style from \"../table-header/bl-table-header.css\";\n\nexport const blTableHeaderTag = \"bl-table-header\";\n\n/**\n * @tag bl-table-header\n * @summary Baklava Table component\n */\n@customElement(blTableHeaderTag)\nexport default class BlTableHeader extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n /**\n * Set table header as sticky\n */\n @property({ type: Boolean, reflect: true })\n sticky = false;\n\n connectedCallback(): void {\n super.connectedCallback();\n if (!this.closest<BlTable>(blTableTag)) {\n console.warn(\"bl-table-header is designed to be used inside a bl-table\", this);\n }\n }\n\n render(): TemplateResult {\n return html`<slot></slot> `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blTableHeaderTag]: BlTableHeader;\n }\n}\n"],
|
|
5
|
+
"mappings": "gLACO,IAAMA,EAASC,sWACfC,EAAQF,ECKR,IAAMG,EAAmB,kBAOXC,EAArB,cAA2C,CAAW,CAAtD,kCAQE,YAAS,GAPT,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAOA,mBAA0B,CACxB,MAAM,kBAAkB,EACnB,KAAK,QAAiBC,CAAU,GACnC,QAAQ,KAAK,2DAA4D,IAAI,CAEjF,CAEA,QAAyB,CACvB,OAAOC,iBACT,CACF,EAZEC,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAPvBL,EAQnB,sBARmBA,EAArBI,EAAA,CADCC,EAAcN,CAAgB,GACVC",
|
|
6
|
+
"names": ["styles", "i", "bl_table_header_default", "blTableHeaderTag", "BlTableHeader", "bl_table_header_default", "blTableTag", "x", "__decorateClass", "e"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import{a as d}from"./chunk-6LT7O7T2.js";import{a as m}from"./chunk-ECPWEUBG.js";import{a as u}from"./chunk-GRL4DWKG.js";import{a as l,b as o,e as i}from"./chunk-5MOOXA2X.js";import{a as s,b as r,f as n}from"./chunk-4OT5AMS5.js";import{d as e}from"./chunk-IZ2LK5GK.js";var p=s`:host{display:block}.accordion{--border:1px solid var(--bl-color-neutral-lighter);--default-radius:var(--bl-size-2xs);--radius-top-left:var(--bl-accordion-radius-top-left, var(--default-radius));--radius-top-right:var(--bl-accordion-radius-top-right, var(--default-radius));--radius-bottom-right:var(--bl-accordion-radius-bottom-right, var(--default-radius));--radius-bottom-left:var(--bl-accordion-radius-bottom-left, var(--default-radius));width:100%}.summary{list-style:none;user-select:none;cursor:pointer;font:var(--bl-font-title-3-medium);display:flex;align-items:center;justify-content:space-between;gap:var(--bl-size-2xs);padding:var(--bl-size-m);background:var(--bl-color-neutral-full);color:var(--bl-color-neutral-darker);border:var(--border);border-bottom:var(--bl-accordion-border-bottom,var(--border));border-radius:var(--radius-top-left) var(--radius-top-right) var(--radius-bottom-right) var(--radius-bottom-left);transition:background-color .2s}.summary::-webkit-details-marker{display:none}.summary.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__,.summary:hover{background:var(--bl-color-neutral-lightest)}.summary:focus-visible{outline:2px solid var(--bl-color-primary);outline-offset:-1px}.indicator{transition:transform .2s}.accordion[open] .indicator{transform:rotate(180deg)}.accordion[open] .summary{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.caption{flex:1}.accordion-content{padding:var(--bl-size-m);background:var(--bl-color-neutral-full);border:var(--border);border-top:0;border-bottom:var(--bl-accordion-border-bottom,var(--border));border-bottom-left-radius:var(--radius-bottom-left);border-bottom-right-radius:var(--radius-bottom-right);font:var(--bl-font-body-text-2-regular)}.disabled .summary{cursor:not-allowed;background:var(--bl-color-neutral-lightest);color:var(--bl-color-neutral-light)}.accordion:not([open]) .accordion-content{display:none}`,c=p;var t=class extends n{constructor(){super(...arguments);this.open=!1;this.disabled=!1;this.animationDuration=250;this._animationStatus=null}static get styles(){return[c]}_animate(a){this._animationStatus=a?0:1;let b=`${this.detailsEl.offsetHeight}px`,h=a?`${this.summaryEl.offsetHeight+this.contentEl.offsetHeight}px`:`${this.summaryEl.offsetHeight}px`;this._animation&&this._animation.cancel(),this._animation=this.detailsEl.animate({height:[b,h]},{duration:this.animationDuration,easing:"ease-out"}),this._animation.onfinish=()=>this._onAnimationFinish(a),this._animation.oncancel=()=>this._animationStatus=null}_onAnimationFinish(a){this.open=a,this._animation=null,this._animationStatus=null,this.detailsEl.style.height=this.detailsEl.style.overflow=""}expand(){this.detailsEl.style.overflow="hidden",this.detailsEl.style.height=`${this.detailsEl.offsetHeight}px`,this.open=!0,this._animate(!0)}collapse(){this._animate(!1)}_clickHandler(a){a.preventDefault(),!this.disabled&&(this._animationStatus===1||!this.open?this.expand():(this._animationStatus===0||this.open)&&this.collapse())}updated(a){if(a.has("open")){if(this.disabled&&this.open){this._onAnimationFinish(!1);return}this._onToggle(this.open)}}render(){let a=this.icon?r`<bl-icon class="icon" name=${this.icon===!0?"info":this.icon}></bl-icon>`:null;return r`<details
|
|
2
|
+
?open=${this.open}
|
|
3
|
+
class=${d({accordion:!0,disabled:this.disabled})}
|
|
4
|
+
>
|
|
5
|
+
<summary
|
|
6
|
+
class="summary"
|
|
7
|
+
@click="${this._clickHandler}"
|
|
8
|
+
aria-expanded=${this.open?"true":"false"}
|
|
9
|
+
aria-controls="content"
|
|
10
|
+
aria-disabled=${this.disabled?"true":"false"}
|
|
11
|
+
tabindex=${this.disabled?"-1":"0"}
|
|
12
|
+
>
|
|
13
|
+
${a}
|
|
14
|
+
<slot name="caption">
|
|
15
|
+
<span class="caption"> ${this.caption} </span>
|
|
16
|
+
</slot>
|
|
17
|
+
<bl-icon name="arrow_down" class="indicator"></bl-icon>
|
|
18
|
+
</summary>
|
|
19
|
+
|
|
20
|
+
<div class="accordion-content" role="region" aria-labelledby="header" id="content">
|
|
21
|
+
<slot></slot>
|
|
22
|
+
</div>
|
|
23
|
+
</details>`}};e([o({reflect:!0,type:Boolean})],t.prototype,"open",2),e([o({reflect:!0})],t.prototype,"caption",2),e([o({converter:m()})],t.prototype,"icon",2),e([o({reflect:!0,type:Boolean})],t.prototype,"disabled",2),e([u("bl-toggle")],t.prototype,"_onToggle",2),e([o({type:Number})],t.prototype,"animationDuration",2),e([i("details")],t.prototype,"detailsEl",2),e([i("summary")],t.prototype,"summaryEl",2),e([i(".accordion-content")],t.prototype,"contentEl",2),t=e([l("bl-accordion")],t);export{t as a};
|
|
24
|
+
//# sourceMappingURL=chunk-APLBTZ36.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/accordion-group/accordion/bl-accordion.css", "../src/components/accordion-group/accordion/bl-accordion.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:block}.accordion{--border:1px solid var(--bl-color-neutral-lighter);--default-radius:var(--bl-size-2xs);--radius-top-left:var(--bl-accordion-radius-top-left, var(--default-radius));--radius-top-right:var(--bl-accordion-radius-top-right, var(--default-radius));--radius-bottom-right:var(--bl-accordion-radius-bottom-right, var(--default-radius));--radius-bottom-left:var(--bl-accordion-radius-bottom-left, var(--default-radius));width:100%}.summary{list-style:none;user-select:none;cursor:pointer;font:var(--bl-font-title-3-medium);display:flex;align-items:center;justify-content:space-between;gap:var(--bl-size-2xs);padding:var(--bl-size-m);background:var(--bl-color-neutral-full);color:var(--bl-color-neutral-darker);border:var(--border);border-bottom:var(--bl-accordion-border-bottom,var(--border));border-radius:var(--radius-top-left) var(--radius-top-right) var(--radius-bottom-right) var(--radius-bottom-left);transition:background-color .2s}.summary::-webkit-details-marker{display:none}.summary.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__,.summary:hover{background:var(--bl-color-neutral-lightest)}.summary:focus-visible{outline:2px solid var(--bl-color-primary);outline-offset:-1px}.indicator{transition:transform .2s}.accordion[open] .indicator{transform:rotate(180deg)}.accordion[open] .summary{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.caption{flex:1}.accordion-content{padding:var(--bl-size-m);background:var(--bl-color-neutral-full);border:var(--border);border-top:0;border-bottom:var(--bl-accordion-border-bottom,var(--border));border-bottom-left-radius:var(--radius-bottom-left);border-bottom-right-radius:var(--radius-bottom-right);font:var(--bl-font-body-text-2-regular)}.disabled .summary{cursor:not-allowed;background:var(--bl-color-neutral-lightest);color:var(--bl-color-neutral-light)}.accordion:not([open]) .accordion-content{display:none}`;\nexport default styles;\n", "import { html, LitElement, PropertyValues, TemplateResult } from \"lit\";\nimport { customElement, property, query } from \"lit/decorators.js\";\nimport { CSSResultGroup } from \"lit/development\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { event, EventDispatcher } from \"../../../utilities/event\";\nimport { stringBooleanConverter } from \"../../../utilities/string-boolean.converter\";\nimport \"../../icon/bl-icon\";\nimport { BaklavaIcon } from \"../../icon/icon-list\";\nimport style from \"./bl-accordion.css\";\n\nenum AnimationStatus {\n EXPANDING,\n COLLAPSING,\n}\n\n@customElement(\"bl-accordion\")\nexport default class BlAccordion extends LitElement {\n /**\n * Whether the accordion is expanded\n */\n @property({ reflect: true, type: Boolean })\n open = false;\n\n /**\n * Sets accordion caption.\n */\n @property({ reflect: true })\n caption?: string;\n\n /**\n * Add icon to beginning of the title\n */\n @property({ converter: stringBooleanConverter() })\n icon?: boolean | BaklavaIcon;\n\n /**\n * Whether the accordion is disabled\n */\n @property({ reflect: true, type: Boolean })\n disabled = false;\n\n /**\n * Fires when accordion open state change.\n */\n @event(\"bl-toggle\") private _onToggle: EventDispatcher<boolean>;\n\n @property({ type: Number })\n animationDuration = 250;\n\n private _animation: Animation | null;\n private _animationStatus: AnimationStatus | null = null;\n\n @query(\"details\")\n detailsEl: HTMLDetailsElement;\n\n @query(\"summary\")\n summaryEl: HTMLElement;\n\n @query(\".accordion-content\")\n contentEl: HTMLElement;\n\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n _animate(isExpanding: boolean) {\n this._animationStatus = isExpanding ? AnimationStatus.EXPANDING : AnimationStatus.COLLAPSING;\n\n const startHeight = `${this.detailsEl.offsetHeight}px`;\n const endHeight = isExpanding\n ? `${this.summaryEl.offsetHeight + this.contentEl.offsetHeight}px`\n : `${this.summaryEl.offsetHeight}px`;\n\n if (this._animation) {\n this._animation.cancel();\n }\n\n this._animation = this.detailsEl.animate(\n {\n height: [startHeight, endHeight],\n },\n {\n duration: this.animationDuration,\n easing: \"ease-out\",\n }\n );\n\n this._animation.onfinish = () => this._onAnimationFinish(isExpanding);\n this._animation.oncancel = () => (this._animationStatus = null);\n }\n\n private _onAnimationFinish(open: boolean) {\n this.open = open;\n this._animation = null;\n this._animationStatus = null;\n this.detailsEl.style.height = this.detailsEl.style.overflow = \"\";\n }\n\n expand() {\n this.detailsEl.style.overflow = \"hidden\";\n this.detailsEl.style.height = `${this.detailsEl.offsetHeight}px`;\n this.open = true;\n this._animate(true);\n }\n\n collapse() {\n this._animate(false);\n }\n\n private _clickHandler(e: Event) {\n e.preventDefault();\n\n if (this.disabled) return;\n\n if (this._animationStatus === AnimationStatus.COLLAPSING || !this.open) {\n this.expand();\n } else if (this._animationStatus === AnimationStatus.EXPANDING || this.open) {\n this.collapse();\n }\n }\n\n protected updated(_changedProperties: PropertyValues) {\n if (_changedProperties.has(\"open\")) {\n if (this.disabled && this.open) {\n this._onAnimationFinish(false);\n return;\n }\n\n this._onToggle(this.open);\n }\n }\n\n render(): TemplateResult {\n const icon = this.icon\n ? html`<bl-icon class=\"icon\" name=${this.icon === true ? \"info\" : this.icon}></bl-icon>`\n : null;\n\n return html`<details\n ?open=${this.open}\n class=${classMap({\n accordion: true,\n disabled: this.disabled,\n })}\n >\n <summary\n class=\"summary\"\n @click=\"${this._clickHandler}\"\n aria-expanded=${this.open ? \"true\" : \"false\"}\n aria-controls=\"content\"\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n >\n ${icon}\n <slot name=\"caption\">\n <span class=\"caption\"> ${this.caption} </span>\n </slot>\n <bl-icon name=\"arrow_down\" class=\"indicator\"></bl-icon>\n </summary>\n\n <div class=\"accordion-content\" role=\"region\" aria-labelledby=\"header\" id=\"content\">\n <slot></slot>\n </div>\n </details>`;\n }\n}\n"],
|
|
5
|
+
"mappings": "4QACO,IAAMA,EAASC,s3DACfC,EAAQF,ECcf,IAAqBG,EAArB,cAAyCC,CAAW,CAApD,kCAKE,UAAO,GAkBP,cAAW,GAQX,uBAAoB,IAGpB,KAAQ,iBAA2C,KAWnD,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAEA,SAASC,EAAsB,CAC7B,KAAK,iBAAmBA,EAAc,EAA4B,EAElE,IAAMC,EAAc,GAAG,KAAK,UAAU,iBAChCC,EAAYF,EACd,GAAG,KAAK,UAAU,aAAe,KAAK,UAAU,iBAChD,GAAG,KAAK,UAAU,iBAElB,KAAK,YACP,KAAK,WAAW,OAAO,EAGzB,KAAK,WAAa,KAAK,UAAU,QAC/B,CACE,OAAQ,CAACC,EAAaC,CAAS,CACjC,EACA,CACE,SAAU,KAAK,kBACf,OAAQ,UACV,CACF,EAEA,KAAK,WAAW,SAAW,IAAM,KAAK,mBAAmBF,CAAW,EACpE,KAAK,WAAW,SAAW,IAAO,KAAK,iBAAmB,IAC5D,CAEQ,mBAAmBG,EAAe,CACxC,KAAK,KAAOA,EACZ,KAAK,WAAa,KAClB,KAAK,iBAAmB,KACxB,KAAK,UAAU,MAAM,OAAS,KAAK,UAAU,MAAM,SAAW,EAChE,CAEA,QAAS,CACP,KAAK,UAAU,MAAM,SAAW,SAChC,KAAK,UAAU,MAAM,OAAS,GAAG,KAAK,UAAU,iBAChD,KAAK,KAAO,GACZ,KAAK,SAAS,EAAI,CACpB,CAEA,UAAW,CACT,KAAK,SAAS,EAAK,CACrB,CAEQ,cAAcC,EAAU,CAC9BA,EAAE,eAAe,EAEb,MAAK,WAEL,KAAK,mBAAqB,GAA8B,CAAC,KAAK,KAChE,KAAK,OAAO,GACH,KAAK,mBAAqB,GAA6B,KAAK,OACrE,KAAK,SAAS,EAElB,CAEU,QAAQC,EAAoC,CACpD,GAAIA,EAAmB,IAAI,MAAM,EAAG,CAClC,GAAI,KAAK,UAAY,KAAK,KAAM,CAC9B,KAAK,mBAAmB,EAAK,EAC7B,OAGF,KAAK,UAAU,KAAK,IAAI,EAE5B,CAEA,QAAyB,CACvB,IAAMC,EAAO,KAAK,KACdC,+BAAkC,KAAK,OAAS,GAAO,OAAS,KAAK,kBACrE,KAEJ,OAAOA;AAAA,cACG,KAAK;AAAA,cACLC,EAAS,CACf,UAAW,GACX,SAAU,KAAK,QACjB,CAAC;AAAA;AAAA;AAAA;AAAA,kBAIW,KAAK;AAAA,wBACC,KAAK,KAAO,OAAS;AAAA;AAAA,wBAErB,KAAK,SAAW,OAAS;AAAA,mBAC9B,KAAK,SAAW,KAAO;AAAA;AAAA,UAEhCF;AAAA;AAAA,mCAEyB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAStC,CACF,EA/IEG,EAAA,CADCL,EAAS,CAAE,QAAS,GAAM,KAAM,OAAQ,CAAC,GAJvBP,EAKnB,oBAMAY,EAAA,CADCL,EAAS,CAAE,QAAS,EAAK,CAAC,GAVRP,EAWnB,uBAMAY,EAAA,CADCL,EAAS,CAAE,UAAWM,EAAuB,CAAE,CAAC,GAhB9Bb,EAiBnB,oBAMAY,EAAA,CADCL,EAAS,CAAE,QAAS,GAAM,KAAM,OAAQ,CAAC,GAtBvBP,EAuBnB,wBAK4BY,EAAA,CAA3BE,EAAM,WAAW,GA5BCd,EA4BS,yBAG5BY,EAAA,CADCL,EAAS,CAAE,KAAM,MAAO,CAAC,GA9BPP,EA+BnB,iCAMAY,EAAA,CADC,EAAM,SAAS,GApCGZ,EAqCnB,yBAGAY,EAAA,CADC,EAAM,SAAS,GAvCGZ,EAwCnB,yBAGAY,EAAA,CADC,EAAM,oBAAoB,GA1CRZ,EA2CnB,yBA3CmBA,EAArBY,EAAA,CADCL,EAAc,cAAc,GACRP",
|
|
6
|
+
"names": ["styles", "i", "bl_accordion_default", "BlAccordion", "s", "bl_accordion_default", "isExpanding", "startHeight", "endHeight", "open", "e", "_changedProperties", "icon", "x", "o", "__decorateClass", "stringBooleanConverter", "event"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import{a as p}from"./chunk-UOGCEUXK.js";import{a as d}from"./chunk-DINNT5P2.js";import{a}from"./chunk-GRL4DWKG.js";import{a as v,b as s,e as n}from"./chunk-5MOOXA2X.js";import{a as l,b as i,f as h}from"./chunk-4OT5AMS5.js";import{d as o}from"./chunk-IZ2LK5GK.js";var m=l`:host{display:contents}.trigger{display:var(--bl-tooltip-trigger-display,inline-flex);cursor:pointer}bl-popover{--bl-popover-background-color:var(--bl-color-info);--bl-popover-arrow-display:block;--bl-popover-border-size:0px;--bl-popover-max-width:424px}.content{color:var(--bl-color-neutral-full)}`,c=m;var t=class extends h{constructor(){super(...arguments);this.placement="top"}static get styles(){return[c]}update(e){if(e.has("target")){let r=e.get("target");r&&this._removeEvents(r),this._addEvents()}super.update(e)}_addEvents(){let e=p(this.target);e&&(e.addEventListener("focus",this.show,{capture:!0}),e.addEventListener("mouseenter",this.show),e.addEventListener("blur",this.hide,{capture:!0}),e.addEventListener("mouseleave",this.hide))}_removeEvents(e){let r=p(e);r&&(r.removeEventListener("focus",this.show,{capture:!0}),r.removeEventListener("mouseenter",this.show),r.removeEventListener("blur",this.hide,{capture:!0}),r.removeEventListener("mouseleave",this.hide))}connectedCallback(){super.connectedCallback(),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this._addEvents()}disconnectedCallback(){super.disconnectedCallback(),this._removeEvents(this.target)}show(){var e;this._popover.target=(e=this.target)!=null?e:this.trigger,this._popover.show(),this.onShow("")}hide(){this._popover.hide(),this.onHide("")}get visible(){return this._popover.visible}triggerTemplate(){return i`<slot
|
|
2
|
+
class="trigger"
|
|
3
|
+
name="tooltip-trigger"
|
|
4
|
+
aria-describedby="tooltip"
|
|
5
|
+
@focus=${{handleEvent:()=>this.show(),capture:!0}}
|
|
6
|
+
@blur=${{handleEvent:()=>this.hide(),capture:!0}}
|
|
7
|
+
@mouseenter=${()=>this.show()}
|
|
8
|
+
@mouseleave=${()=>this.hide()}
|
|
9
|
+
>
|
|
10
|
+
</slot>`}render(){var e;return i`
|
|
11
|
+
${this.target?"":this.triggerTemplate()}
|
|
12
|
+
<bl-popover
|
|
13
|
+
.target="${(e=this.target)!=null?e:this.trigger}"
|
|
14
|
+
placement="${d(this.placement)}"
|
|
15
|
+
@bl-popover-hide="${()=>this.onHide("")}"
|
|
16
|
+
>
|
|
17
|
+
<slot class="content" id="tooltip" role="tooltip"></slot>
|
|
18
|
+
</bl-popover>
|
|
19
|
+
`}};o([n(".trigger")],t.prototype,"trigger",2),o([n("bl-popover")],t.prototype,"_popover",2),o([s({type:String})],t.prototype,"placement",2),o([a("bl-tooltip-show")],t.prototype,"onShow",2),o([a("bl-tooltip-hide")],t.prototype,"onHide",2),o([s()],t.prototype,"target",2),t=o([v("bl-tooltip")],t);export{t as a};
|
|
20
|
+
//# sourceMappingURL=chunk-DE3A37FL.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/tooltip/bl-tooltip.css", "../src/components/tooltip/bl-tooltip.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:contents}.trigger{display:var(--bl-tooltip-trigger-display,inline-flex);cursor:pointer}bl-popover{--bl-popover-background-color:var(--bl-color-info);--bl-popover-arrow-display:block;--bl-popover-border-size:0px;--bl-popover-max-width:424px}.content{color:var(--bl-color-neutral-full)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from \"lit\";\nimport { customElement, property, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ReferenceElement } from \"@floating-ui/core\";\nimport { getTarget } from \"../../utilities/elements\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport \"../popover/bl-popover\";\nimport BlPopover, { Placement } from \"../popover/bl-popover\";\nimport style from \"./bl-tooltip.css\";\n\n/**\n * @tag bl-tooltip\n * @summary Baklava Tooltip component\n * @dependency bl-popover\n *\n * @cssproperty [--bl-tooltip-trigger-display=inline-flex] Set the display of the tooltip trigger.\n */\n@customElement(\"bl-tooltip\")\nexport default class BlTooltip extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n @query(\".trigger\") private trigger: ReferenceElement;\n @query(\"bl-popover\") private _popover: BlPopover;\n\n /**\n * Sets placement of the tooltip\n */\n @property({ type: String })\n placement: Placement = \"top\";\n\n /**\n * Fires when hovering over a trigger\n */\n @event(\"bl-tooltip-show\") private onShow: EventDispatcher<string>;\n\n /**\n * Fires when leaving over from trigger\n */\n @event(\"bl-tooltip-hide\") private onHide: EventDispatcher<string>;\n\n @property() target: string | Element;\n\n protected update(changedProperties: PropertyValues) {\n if (changedProperties.has(\"target\")) {\n const prev = changedProperties.get(\"target\");\n\n if (prev) {\n this._removeEvents(prev);\n }\n\n this._addEvents();\n }\n\n super.update(changedProperties);\n }\n\n private _addEvents() {\n const target = getTarget(this.target);\n\n if (target) {\n target.addEventListener(\"focus\", this.show, { capture: true });\n target.addEventListener(\"mouseenter\", this.show);\n target.addEventListener(\"blur\", this.hide, { capture: true });\n target.addEventListener(\"mouseleave\", this.hide);\n }\n }\n\n private _removeEvents(value: string | Element) {\n const target = getTarget(value);\n\n if (target) {\n target.removeEventListener(\"focus\", this.show, { capture: true });\n target.removeEventListener(\"mouseenter\", this.show);\n target.removeEventListener(\"blur\", this.hide, { capture: true });\n target.removeEventListener(\"mouseleave\", this.hide);\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this.show = this.show.bind(this);\n this.hide = this.hide.bind(this);\n\n this._addEvents();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this._removeEvents(this.target);\n }\n\n /**\n * Shows tooltip\n */\n show() {\n this._popover.target = this.target ?? this.trigger;\n this._popover.show();\n this.onShow(\"\");\n }\n\n /**\n * Hides tooltip\n */\n hide() {\n this._popover.hide();\n this.onHide(\"\");\n }\n\n /**\n * Gives the visibility status of the tooltip\n */\n get visible(): boolean {\n return this._popover.visible;\n }\n\n private triggerTemplate() {\n return html`<slot\n class=\"trigger\"\n name=\"tooltip-trigger\"\n aria-describedby=\"tooltip\"\n @focus=${{ handleEvent: () => this.show(), capture: true }}\n @blur=${{ handleEvent: () => this.hide(), capture: true }}\n @mouseenter=${() => this.show()}\n @mouseleave=${() => this.hide()}\n >\n </slot>`;\n }\n\n render(): TemplateResult {\n return html`\n ${this.target ? \"\" : this.triggerTemplate()}\n <bl-popover\n .target=\"${this.target ?? this.trigger}\"\n placement=\"${ifDefined(this.placement)}\"\n @bl-popover-hide=\"${() => this.onHide(\"\")}\"\n >\n <slot class=\"content\" id=\"tooltip\" role=\"tooltip\"></slot>\n </bl-popover>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-tooltip\": BlTooltip;\n }\n}\n"],
|
|
5
|
+
"mappings": "uQACO,IAAMA,EAASC,8SACfC,EAAQF,ECgBf,IAAqBG,EAArB,cAAuCC,CAAW,CAAlD,kCAYE,eAAuB,MAXvB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAuBU,OAAOC,EAAmC,CAClD,GAAIA,EAAkB,IAAI,QAAQ,EAAG,CACnC,IAAMC,EAAOD,EAAkB,IAAI,QAAQ,EAEvCC,GACF,KAAK,cAAcA,CAAI,EAGzB,KAAK,WAAW,EAGlB,MAAM,OAAOD,CAAiB,CAChC,CAEQ,YAAa,CACnB,IAAME,EAASC,EAAU,KAAK,MAAM,EAEhCD,IACFA,EAAO,iBAAiB,QAAS,KAAK,KAAM,CAAE,QAAS,EAAK,CAAC,EAC7DA,EAAO,iBAAiB,aAAc,KAAK,IAAI,EAC/CA,EAAO,iBAAiB,OAAQ,KAAK,KAAM,CAAE,QAAS,EAAK,CAAC,EAC5DA,EAAO,iBAAiB,aAAc,KAAK,IAAI,EAEnD,CAEQ,cAAcE,EAAyB,CAC7C,IAAMF,EAASC,EAAUC,CAAK,EAE1BF,IACFA,EAAO,oBAAoB,QAAS,KAAK,KAAM,CAAE,QAAS,EAAK,CAAC,EAChEA,EAAO,oBAAoB,aAAc,KAAK,IAAI,EAClDA,EAAO,oBAAoB,OAAQ,KAAK,KAAM,CAAE,QAAS,EAAK,CAAC,EAC/DA,EAAO,oBAAoB,aAAc,KAAK,IAAI,EAEtD,CAEA,mBAAoB,CAClB,MAAM,kBAAkB,EAExB,KAAK,KAAO,KAAK,KAAK,KAAK,IAAI,EAC/B,KAAK,KAAO,KAAK,KAAK,KAAK,IAAI,EAE/B,KAAK,WAAW,CAClB,CAEA,sBAAuB,CACrB,MAAM,qBAAqB,EAE3B,KAAK,cAAc,KAAK,MAAM,CAChC,CAKA,MAAO,CAlGT,IAAAG,EAmGI,KAAK,SAAS,QAASA,EAAA,KAAK,SAAL,KAAAA,EAAe,KAAK,QAC3C,KAAK,SAAS,KAAK,EACnB,KAAK,OAAO,EAAE,CAChB,CAKA,MAAO,CACL,KAAK,SAAS,KAAK,EACnB,KAAK,OAAO,EAAE,CAChB,CAKA,IAAI,SAAmB,CACrB,OAAO,KAAK,SAAS,OACvB,CAEQ,iBAAkB,CACxB,OAAOC;AAAA;AAAA;AAAA;AAAA,eAII,CAAE,YAAa,IAAM,KAAK,KAAK,EAAG,QAAS,EAAK;AAAA,cACjD,CAAE,YAAa,IAAM,KAAK,KAAK,EAAG,QAAS,EAAK;AAAA,oBAC1C,IAAM,KAAK,KAAK;AAAA,oBAChB,IAAM,KAAK,KAAK;AAAA;AAAA,YAGlC,CAEA,QAAyB,CApI3B,IAAAD,EAqII,OAAOC;AAAA,QACH,KAAK,OAAS,GAAK,KAAK,gBAAgB;AAAA;AAAA,oBAE7BD,EAAA,KAAK,SAAL,KAAAA,EAAe,KAAK;AAAA,qBAClBE,EAAU,KAAK,SAAS;AAAA,4BACjB,IAAM,KAAK,OAAO,EAAE;AAAA;AAAA;AAAA;AAAA,KAK9C,CACF,EAzH6BC,EAAA,CAA1BC,EAAM,UAAU,GALEZ,EAKQ,uBACEW,EAAA,CAA5BC,EAAM,YAAY,GANAZ,EAMU,wBAM7BW,EAAA,CADCE,EAAS,CAAE,KAAM,MAAO,CAAC,GAXPb,EAYnB,yBAKkCW,EAAA,CAAjCG,EAAM,iBAAiB,GAjBLd,EAiBe,sBAKAW,EAAA,CAAjCG,EAAM,iBAAiB,GAtBLd,EAsBe,sBAEtBW,EAAA,CAAXE,EAAS,GAxBSb,EAwBP,sBAxBOA,EAArBW,EAAA,CADCE,EAAc,YAAY,GACNb",
|
|
6
|
+
"names": ["styles", "i", "bl_tooltip_default", "BlTooltip", "s", "bl_tooltip_default", "changedProperties", "prev", "target", "getTarget", "value", "_a", "x", "l", "__decorateClass", "i", "e", "event"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import{a as d}from"./chunk-ECPWEUBG.js";import{a as s}from"./chunk-DINNT5P2.js";import{a}from"./chunk-GRL4DWKG.js";import{a as u,b as r}from"./chunk-5MOOXA2X.js";import{a as l,b as i,f as c}from"./chunk-4OT5AMS5.js";import{d as o}from"./chunk-IZ2LK5GK.js";var p=l`:host{display:block}.notification{position:relative;border-radius:var(--bl-border-radius-m);box-shadow:0 5px 30px 0 rgba(39 49 66 / 25%)}.duration{position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:0;height:var(--bl-size-2xs);width:100%}.duration>.remaining{position:absolute;height:100%;width:100%;border-radius:var(--bl-border-radius-s);border-top-left-radius:0;animation-name:to-zero;animation-duration:var(--duration, 7s);animation-timing-function:linear;animation-fill-mode:forwards;animation-play-state:running}.notification.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__ .duration>.remaining,.notification:hover .duration>.remaining{animation-play-state:paused}@keyframes to-zero{to{width:0}}.notification[variant=success] .duration>.remaining{background-color:var(--bl-color-success)}.notification[variant=warning] .duration>.remaining{background-color:var(--bl-color-warning)}.notification[variant=danger] .duration>.remaining{background-color:var(--bl-color-danger)}.notification[variant=info] .duration>.remaining{background-color:var(--bl-color-info)}`,m=p;var f=(e=>(e.DurationEnded="duration-ended",e.CloseButton="close-button",e))(f||{}),v={info:"info",success:"success",warning:"warning",error:"danger"},t=class extends c{constructor(){super(...arguments);this.caption="";this.variant="info";this.duration=7;this.permanent=!1;this.closed=!1}static get styles(){return[m]}firstUpdated(){this.setupDuration()}async setupDuration(){if(!this.permanent){if(this.duration<=0){this.close("duration-ended");return}setTimeout(()=>{var e,n;(n=(e=this.shadowRoot)==null?void 0:e.querySelector(".remaining"))==null||n.addEventListener("animationend",()=>{this.close("duration-ended")},{once:!0})},0)}}close(e){this.onRequestClose({source:e},{cancelable:!0}).defaultPrevented||(this.onClose({source:e}),this.closed=!0)}handleClose(e){let n=e.target;n.closed=!1,this.close("close-button")}renderProgress(){return this.permanent?null:i`
|
|
2
|
+
<div class="duration">
|
|
3
|
+
<div class="remaining" style="--duration: ${this.duration}s;"></div>
|
|
4
|
+
</div>
|
|
5
|
+
`}render(){let{icon:e=!0,variant:n="info"}=this;return i`
|
|
6
|
+
<bl-alert
|
|
7
|
+
class="notification"
|
|
8
|
+
caption="${s(this.caption)}"
|
|
9
|
+
icon=${e}
|
|
10
|
+
variant=${s(v[n])}
|
|
11
|
+
?closed=${this.closed}
|
|
12
|
+
?closable=${!0}
|
|
13
|
+
@bl-close=${this.handleClose}
|
|
14
|
+
>
|
|
15
|
+
<slot></slot>
|
|
16
|
+
${this.renderProgress()}
|
|
17
|
+
<slot name="primary-action" slot="action"></slot>
|
|
18
|
+
<slot name="secondary-action" slot="action-secondary"></slot>
|
|
19
|
+
</bl-alert>
|
|
20
|
+
`}};o([r({type:String})],t.prototype,"caption",2),o([r({converter:d()})],t.prototype,"icon",2),o([r({reflect:!0})],t.prototype,"variant",2),o([r({type:Number})],t.prototype,"duration",2),o([r({type:Boolean})],t.prototype,"permanent",2),o([r({type:Boolean})],t.prototype,"closed",2),o([a("bl-notification-card-request-close")],t.prototype,"onRequestClose",2),o([a("bl-notification-card-close")],t.prototype,"onClose",2),t=o([u("bl-notification-card")],t);export{f as a,t as b};
|
|
21
|
+
//# sourceMappingURL=chunk-DIGACNOH.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/notification/card/bl-notification-card.css", "../src/components/notification/card/bl-notification-card.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:block}.notification{position:relative;border-radius:var(--bl-border-radius-m);box-shadow:0 5px 30px 0 rgba(39 49 66 / 25%)}.duration{position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:0;height:var(--bl-size-2xs);width:100%}.duration>.remaining{position:absolute;height:100%;width:100%;border-radius:var(--bl-border-radius-s);border-top-left-radius:0;animation-name:to-zero;animation-duration:var(--duration, 7s);animation-timing-function:linear;animation-fill-mode:forwards;animation-play-state:running}.notification.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__ .duration>.remaining,.notification:hover .duration>.remaining{animation-play-state:paused}@keyframes to-zero{to{width:0}}.notification[variant=success] .duration>.remaining{background-color:var(--bl-color-success)}.notification[variant=warning] .duration>.remaining{background-color:var(--bl-color-warning)}.notification[variant=danger] .duration>.remaining{background-color:var(--bl-color-danger)}.notification[variant=info] .duration>.remaining{background-color:var(--bl-color-info)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { event, EventDispatcher } from \"../../../utilities/event\";\nimport { stringBooleanConverter } from \"../../../utilities/string-boolean.converter\";\nimport BlAlert, { AlertVariant } from \"../../alert/bl-alert\";\nimport { BaklavaIcon } from \"../../icon/icon-list\";\nimport style from \"./bl-notification-card.css\";\n\nexport enum CloseSource {\n DurationEnded = \"duration-ended\",\n CloseButton = \"close-button\",\n}\n\nexport type NotificationVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nconst NOTIFICATION_VARIANT_ALERT_MAP: Readonly<Record<NotificationVariant, AlertVariant>> = {\n info: \"info\",\n success: \"success\",\n warning: \"warning\",\n error: \"danger\",\n};\n\n/**\n * @tag bl-notification-card\n * @summary Baklava Notification Card component\n */\n\n@customElement(\"bl-notification-card\")\nexport default class BlNotificationCard extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets notification caption.\n * @attr caption\n * @type {string}\n * @default \"\"\n */\n @property({ type: String })\n caption = \"\";\n\n /**\n * Allows to customize notification icon.\n * True value will display default icon.\n * False value will hide icon.\n * String value will display icon with specified name.\n * @attr icon\n * @type {boolean | BaklavaIcon}\n * @default true\n */\n @property({ converter: stringBooleanConverter() })\n icon?: boolean | BaklavaIcon;\n\n /**\n * Sets notification variant.\n * @attr variant\n * @type {NotificationVariant}\n * @default \"info\"\n */\n @property({ reflect: true })\n variant: NotificationVariant = \"info\";\n\n /**\n * Sets notification display duration in minutes.\n * Has no effect if permanent is set to true.\n * @attr closed\n * @type {boolean}\n * @default false\n */\n @property({ type: Number })\n duration = 7;\n\n /**\n * Prevents notification from being closed automatically.\n * @attr closed\n * @type {boolean}\n * @default false\n */\n @property({ type: Boolean })\n permanent = false;\n\n /**\n * Indicates whether the notification is closed.\n */\n @property({ type: Boolean })\n closed = false;\n\n /**\n * Dispatches close request event.\n * The notification will not be closed automatically if the event is prevented.\n */\n @event(\"bl-notification-card-request-close\") private onRequestClose: EventDispatcher<{\n source: \"duration-ended\" | \"close-button\";\n }>;\n\n /**\n * Dispatches close event.\n * The notification will hidden after the event is dispatched and the closed property is set to true.\n */\n @event(\"bl-notification-card-close\") private onClose: EventDispatcher<{\n source: \"duration-ended\" | \"close-button\";\n }>;\n\n protected firstUpdated() {\n this.setupDuration();\n }\n\n /**\n * Sets up duration animation.\n * The notification will dispatch a closed event after the animation ends.\n */\n private async setupDuration() {\n if (this.permanent) {\n return;\n }\n\n if (this.duration <= 0) {\n this.close(CloseSource.DurationEnded);\n return;\n }\n\n setTimeout(() => {\n this.shadowRoot?.querySelector(\".remaining\")?.addEventListener(\n \"animationend\",\n () => {\n this.close(CloseSource.DurationEnded);\n },\n { once: true }\n );\n }, 0);\n }\n\n private close(source: CloseSource) {\n const requestCloseEvent = this.onRequestClose({ source }, { cancelable: true });\n\n if (requestCloseEvent.defaultPrevented) {\n return;\n }\n\n this.onClose({ source });\n this.closed = true;\n }\n\n private handleClose(e: CustomEvent<boolean>) {\n const target = e.target as BlAlert;\n\n target.closed = false;\n\n this.close(CloseSource.CloseButton);\n }\n\n private renderProgress() {\n if (this.permanent) {\n return null;\n }\n\n return html`\n <div class=\"duration\">\n <div class=\"remaining\" style=\"--duration: ${this.duration}s;\"></div>\n </div>\n `;\n }\n\n render(): TemplateResult {\n const { icon = true, variant = \"info\" } = this;\n\n return html`\n <bl-alert\n class=\"notification\"\n caption=\"${ifDefined(this.caption)}\"\n icon=${icon}\n variant=${ifDefined(NOTIFICATION_VARIANT_ALERT_MAP[variant])}\n ?closed=${this.closed}\n ?closable=${true}\n @bl-close=${this.handleClose}\n >\n <slot></slot>\n ${this.renderProgress()}\n <slot name=\"primary-action\" slot=\"action\"></slot>\n <slot name=\"secondary-action\" slot=\"action-secondary\"></slot>\n </bl-alert>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-notification-card\": BlNotificationCard;\n }\n}\n"],
|
|
5
|
+
"mappings": "gQACO,IAAMA,EAASC,qjCACfC,EAAQF,ECOR,IAAKG,OACVA,EAAA,cAAgB,iBAChBA,EAAA,YAAc,eAFJA,OAAA,IAONC,EAAsF,CAC1F,KAAM,OACN,QAAS,UACT,QAAS,UACT,MAAO,QACT,EAQqBC,EAArB,cAAgDC,CAAW,CAA3D,kCAYE,aAAU,GAqBV,aAA+B,OAU/B,cAAW,EASX,eAAY,GAMZ,YAAS,GAzDT,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAyEU,cAAe,CACvB,KAAK,cAAc,CACrB,CAMA,MAAc,eAAgB,CAC5B,GAAI,MAAK,UAIT,IAAI,KAAK,UAAY,EAAG,CACtB,KAAK,MAAM,gBAAyB,EACpC,OAGF,WAAW,IAAM,CA3HrB,IAAAC,EAAAC,GA4HMA,GAAAD,EAAA,KAAK,aAAL,YAAAA,EAAiB,cAAc,gBAA/B,MAAAC,EAA8C,iBAC5C,eACA,IAAM,CACJ,KAAK,MAAM,gBAAyB,CACtC,EACA,CAAE,KAAM,EAAK,EAEjB,EAAG,CAAC,EACN,CAEQ,MAAMC,EAAqB,CACP,KAAK,eAAe,CAAE,OAAAA,CAAO,EAAG,CAAE,WAAY,EAAK,CAAC,EAExD,mBAItB,KAAK,QAAQ,CAAE,OAAAA,CAAO,CAAC,EACvB,KAAK,OAAS,GAChB,CAEQ,YAAY,EAAyB,CAC3C,IAAMC,EAAS,EAAE,OAEjBA,EAAO,OAAS,GAEhB,KAAK,MAAM,cAAuB,CACpC,CAEQ,gBAAiB,CACvB,OAAI,KAAK,UACA,KAGFC;AAAA;AAAA,oDAEyC,KAAK;AAAA;AAAA,KAGvD,CAEA,QAAyB,CACvB,GAAM,CAAE,KAAAC,EAAO,GAAM,QAAAC,EAAU,MAAO,EAAI,KAE1C,OAAOF;AAAA;AAAA;AAAA,mBAGQG,EAAU,KAAK,OAAO;AAAA,eAC1BF;AAAA,kBACGE,EAAUX,EAA+BU,CAAO,CAAC;AAAA,kBACjD,KAAK;AAAA,oBACH;AAAA,oBACA,KAAK;AAAA;AAAA;AAAA,UAGf,KAAK,eAAe;AAAA;AAAA;AAAA;AAAA,KAK5B,CACF,EAhJEE,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAXPZ,EAYnB,uBAYAW,EAAA,CADCC,EAAS,CAAE,UAAWC,EAAuB,CAAE,CAAC,GAvB9Bb,EAwBnB,oBASAW,EAAA,CADCC,EAAS,CAAE,QAAS,EAAK,CAAC,GAhCRZ,EAiCnB,uBAUAW,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GA1CPZ,EA2CnB,wBASAW,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,CAAC,GAnDRZ,EAoDnB,yBAMAW,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,CAAC,GAzDRZ,EA0DnB,sBAMqDW,EAAA,CAApDG,EAAM,oCAAoC,GAhExBd,EAgEkC,8BAQRW,EAAA,CAA5CG,EAAM,4BAA4B,GAxEhBd,EAwE0B,uBAxE1BA,EAArBW,EAAA,CADCC,EAAc,sBAAsB,GAChBZ",
|
|
6
|
+
"names": ["styles", "i", "bl_notification_card_default", "CloseSource", "NOTIFICATION_VARIANT_ALERT_MAP", "BlNotificationCard", "s", "bl_notification_card_default", "_a", "_b", "source", "target", "x", "icon", "variant", "l", "__decorateClass", "e", "stringBooleanConverter", "event"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import{a as m}from"./chunk-ECPWEUBG.js";import{a as b}from"./chunk-DINNT5P2.js";import{a as v}from"./chunk-GRL4DWKG.js";import{a as u,b as e}from"./chunk-5MOOXA2X.js";import{a as d,b as n,f as p}from"./chunk-4OT5AMS5.js";import{d as a}from"./chunk-IZ2LK5GK.js";var y=d`:host{display:block}.alert{--padding:var(--bl-size-m);--main-color:var(--bl-color-info);--main-bg-color:var(--bl-color-info-contrast);position:relative;display:flex;align-items:flex-start;justify-content:space-between;background-color:var(--main-bg-color);color:var(--bl-color-neutral-darker);box-shadow:inset 0 0 0 1px var(--main-color);border-radius:var(--bl-border-radius-l);padding:calc(var(--padding)/ 2) var(--padding);padding-inline-end:calc(var(--padding)/ 2)}.description{font:var(--bl-font-body-text-2)}.wrapper{display:flex;flex-flow:column;flex-wrap:wrap;justify-content:space-between;flex:auto}.content{display:flex;margin-inline-end:var(--bl-size-2xs);flex:20 1 70%;padding:calc(var(--padding)/ 2) 0}.icon{padding:calc(var(--padding)/ 2) 0;margin-inline-end:var(--bl-size-2xs);color:var(--main-color)}.text-content{display:flex;flex-direction:column}.caption{color:var(--bl-color-neutral-darker);font:var(--bl-font-title-3-medium)}.actions{display:none;flex-wrap:wrap;gap:var(--bl-size-m);padding:calc(var(--padding)/ 2) 0}.close{--bl-color-neutral-lightest:transparent}.caption+.description{margin-top:var(--bl-size-2xs)}:host([closed]){display:none}:host([variant=success]) .alert{--main-color:var(--bl-color-success);--main-bg-color:var(--bl-color-success-contrast)}:host([variant=warning]) .alert{--main-color:var(--bl-color-warning);--main-bg-color:var(--bl-color-warning-contrast)}:host([variant=danger]) .alert{--main-color:var(--bl-color-danger);--main-bg-color:var(--bl-color-danger-contrast)}`,f=y;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){let r=i.target;r.assignedElements({flatten:!0}).forEach(o=>{var l,c;if(o.tagName!=="BL-BUTTON"){(l=o.parentNode)==null||l.removeChild(o);return}((c=this.shadowRoot)==null?void 0:c.querySelector(".actions")).style.display="flex";let g=r.name==="action-secondary"?"secondary":"primary",h={info:"neutral",warning:"neutral",success:"success",danger:"danger"};o.setAttribute("variant",g),o.setAttribute("kind",h[this.variant]),o.setAttribute("size","medium"),o.removeAttribute("icon")})}render(){let i=this.caption||this._hasAlertCaptionSlot?n`<span class="caption">
|
|
2
|
+
<slot name="caption"> ${this.caption} </slot>
|
|
3
|
+
</span>`:null,r=this._getIcon()?n`<bl-icon class="icon" name=${b(this._getIcon())}></bl-icon>`:null,s=this.closable?n`<bl-button
|
|
4
|
+
class="close"
|
|
5
|
+
label="close"
|
|
6
|
+
kind="neutral"
|
|
7
|
+
icon="close"
|
|
8
|
+
variant="tertiary"
|
|
9
|
+
@click=${this._closeHandler}
|
|
10
|
+
></bl-button>`:null,o=n`<span class="description">
|
|
11
|
+
<slot> ${this.description} </slot>
|
|
12
|
+
</span>`;return n`
|
|
13
|
+
<div class="alert">
|
|
14
|
+
${r}
|
|
15
|
+
<div class="wrapper">
|
|
16
|
+
<div class="content">
|
|
17
|
+
<div class="text-content">${i} ${o}</div>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="actions">
|
|
20
|
+
<slot class="action" name="action" @slotchange=${this._initAlertActionSlot}></slot>
|
|
21
|
+
<slot
|
|
22
|
+
class="action-secondary"
|
|
23
|
+
name="action-secondary"
|
|
24
|
+
@slotchange=${this._initAlertActionSlot}
|
|
25
|
+
></slot>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
${s}
|
|
29
|
+
</div>
|
|
30
|
+
`}};a([e({reflect:!0})],t.prototype,"variant",2),a([e()],t.prototype,"description",2),a([e({converter:m()})],t.prototype,"icon",2),a([e({type:Boolean,reflect:!0})],t.prototype,"closable",2),a([e()],t.prototype,"caption",2),a([e({type:Boolean,reflect:!0})],t.prototype,"closed",2),a([v("bl-close")],t.prototype,"onClose",2),t=a([u("bl-alert")],t);export{t as a};
|
|
31
|
+
//# sourceMappingURL=chunk-ERL6CBPO.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/alert/bl-alert.css", "../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-info);--main-bg-color:var(--bl-color-info-contrast);position:relative;display:flex;align-items:flex-start;justify-content:space-between;background-color:var(--main-bg-color);color:var(--bl-color-neutral-darker);box-shadow:inset 0 0 0 1px var(--main-color);border-radius:var(--bl-border-radius-l);padding:calc(var(--padding)/ 2) var(--padding);padding-inline-end:calc(var(--padding)/ 2)}.description{font:var(--bl-font-body-text-2)}.wrapper{display:flex;flex-flow:column;flex-wrap:wrap;justify-content:space-between;flex:auto}.content{display:flex;margin-inline-end:var(--bl-size-2xs);flex:20 1 70%;padding:calc(var(--padding)/ 2) 0}.icon{padding:calc(var(--padding)/ 2) 0;margin-inline-end:var(--bl-size-2xs);color:var(--main-color)}.text-content{display:flex;flex-direction:column}.caption{color:var(--bl-color-neutral-darker);font:var(--bl-font-title-3-medium)}.actions{display:none;flex-wrap:wrap;gap:var(--bl-size-m);padding:calc(var(--padding)/ 2) 0}.close{--bl-color-neutral-lightest:transparent}.caption+.description{margin-top:var(--bl-size-2xs)}:host([closed]){display:none}:host([variant=success]) .alert{--main-color:var(--bl-color-success);--main-bg-color:var(--bl-color-success-contrast)}:host([variant=warning]) .alert{--main-color:var(--bl-color-warning);--main-bg-color:var(--bl-color-warning-contrast)}:host([variant=danger]) .alert{--main-color:var(--bl-color-danger);--main-bg-color:var(--bl-color-danger-contrast)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport { stringBooleanConverter } from \"../../utilities/string-boolean.converter\";\nimport { ButtonVariant, ButtonKind, ButtonSize } from \"../button/bl-button\";\nimport \"../icon/bl-icon\";\nimport { BaklavaIcon } from \"../icon/icon-list\";\nimport style from \"./bl-alert.css\";\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 | BaklavaIcon;\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(): BaklavaIcon | 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 slotElement = event.target as HTMLSlotElement;\n const slotElements = slotElement.assignedElements({ flatten: true });\n\n slotElements.forEach(element => {\n if (element.tagName !== \"BL-BUTTON\") {\n element.parentNode?.removeChild(element);\n return;\n }\n\n (this.shadowRoot?.querySelector(\".actions\") as HTMLElement).style.display = \"flex\";\n\n const variant = slotElement.name === \"action-secondary\" ? \"secondary\" : \"primary\";\n const buttonTypes: Record<AlertVariant, string> = {\n info: \"neutral\",\n warning: \"neutral\",\n success: \"success\",\n danger: \"danger\",\n };\n\n element.setAttribute(\"variant\", variant as ButtonVariant);\n element.setAttribute(\"kind\", buttonTypes[this.variant] 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 closable = this.closable\n ? html`<bl-button\n class=\"close\"\n label=\"close\"\n kind=\"neutral\"\n icon=\"close\"\n variant=\"tertiary\"\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 ${icon}\n <div class=\"wrapper\">\n <div class=\"content\">\n <div class=\"text-content\">${caption} ${description}</div>\n </div>\n <div class=\"actions\">\n <slot class=\"action\" name=\"action\" @slotchange=${this._initAlertActionSlot}></slot>\n <slot\n class=\"action-secondary\"\n name=\"action-secondary\"\n @slotchange=${this._initAlertActionSlot}\n ></slot>\n </div>\n </div>\n ${closable}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-alert\": BlAlert;\n }\n}\n"],
|
|
5
|
+
"mappings": "qQACO,IAAMA,EAASC,g/CACfC,EAAQF,ECgBf,IAAqBG,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,QAAS,CACpB,IAAK,UACH,MAAO,aACT,IAAK,SACH,MAAO,aACT,QACE,OAAO,KAAK,OAChB,CACF,CAEQ,UAAoC,CAC1C,GAAK,KAAK,KACV,OAAI,KAAK,OAAS,GAAa,KAAK,iBAAiB,EAC9C,KAAK,IACd,CAEQ,qBAAqBC,EAAc,CACzC,IAAMC,EAAcD,EAAM,OACLC,EAAY,iBAAiB,CAAE,QAAS,EAAK,CAAC,EAEtD,QAAQC,GAAW,CA5GpC,IAAAC,EAAAC,EA6GM,GAAIF,EAAQ,UAAY,YAAa,EACnCC,EAAAD,EAAQ,aAAR,MAAAC,EAAoB,YAAYD,GAChC,SAGDE,EAAA,KAAK,aAAL,YAAAA,EAAiB,cAAc,aAA4B,MAAM,QAAU,OAE5E,IAAMC,EAAUJ,EAAY,OAAS,mBAAqB,YAAc,UAClEK,EAA4C,CAChD,KAAM,UACN,QAAS,UACT,QAAS,UACT,OAAQ,QACV,EAEAJ,EAAQ,aAAa,UAAWG,CAAwB,EACxDH,EAAQ,aAAa,OAAQI,EAAY,KAAK,OAAO,CAAe,EACpEJ,EAAQ,aAAa,OAAQ,QAAsB,EACnDA,EAAQ,gBAAgB,MAAM,CAChC,CAAC,CACH,CAEA,QAAyB,CACvB,IAAMK,EACJ,KAAK,SAAW,KAAK,qBACjBC;AAAA,oCAC0B,KAAK;AAAA,mBAE/B,KACAC,EAAO,KAAK,SAAS,EACvBD,+BAAkCE,EAAU,KAAK,SAAS,CAAC,eAC3D,KAEEC,EAAW,KAAK,SAClBH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAMW,KAAK;AAAA,uBAEhB,KACEI,EAAcJ;AAAA,eACT,KAAK;AAAA,aAGhB,OAAOA;AAAA;AAAA,UAEDC;AAAA;AAAA;AAAA,wCAG8BF,KAAWK;AAAA;AAAA;AAAA,6DAGU,KAAK;AAAA;AAAA;AAAA;AAAA,4BAItC,KAAK;AAAA;AAAA;AAAA;AAAA,UAIvBD;AAAA;AAAA,KAGR,CACF,EArJEE,EAAA,CADC,EAAS,CAAE,QAAS,EAAK,CAAC,GARRhB,EASnB,uBAMAgB,EAAA,CADC,EAAS,GAdShB,EAenB,2BAMAgB,EAAA,CADC,EAAS,CAAE,UAAWC,EAAuB,CAAE,CAAC,GApB9BjB,EAqBnB,oBAMAgB,EAAA,CADC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA1BvBhB,EA2BnB,wBAMAgB,EAAA,CADC,EAAS,GAhCShB,EAiCnB,uBAMAgB,EAAA,CADC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAtCvBhB,EAuCnB,sBAmB2BgB,EAAA,CAA1Bb,EAAM,UAAU,GA1DEH,EA0DQ,uBA1DRA,EAArBgB,EAAA,CADCE,EAAc,UAAU,GACJlB",
|
|
6
|
+
"names": ["styles", "i", "bl_alert_default", "BlAlert", "s", "bl_alert_default", "event", "slotElement", "element", "_a", "_b", "variant", "buttonTypes", "caption", "x", "icon", "l", "closable", "description", "__decorateClass", "stringBooleanConverter", "e"]
|
|
7
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as P}from"./chunk-IPYZIIRV.js";import{a as v,c as n}from"./chunk-HBPBDC7T.js";import{a as d}from"./chunk-DINNT5P2.js";import{a as b}from"./chunk-GRL4DWKG.js";import{a as h,b as i,c as m}from"./chunk-5MOOXA2X.js";import{a as c,b as s,f as g}from"./chunk-4OT5AMS5.js";import{d as a}from"./chunk-IZ2LK5GK.js";var x=c`.pagination{display:flex;flex-wrap:wrap;justify-content:center;max-width:max-content;gap:var(--bl-size-s)}.pagination *{margin:0;padding:0;box-sizing:border-box}.page-container{display:flex;align-items:center}:host([dir=
|
|
1
|
+
import{a as P}from"./chunk-IPYZIIRV.js";import{a as v,c as n}from"./chunk-HBPBDC7T.js";import{a as d}from"./chunk-DINNT5P2.js";import{a as b}from"./chunk-GRL4DWKG.js";import{a as h,b as i,c as m}from"./chunk-5MOOXA2X.js";import{a as c,b as s,f as g}from"./chunk-4OT5AMS5.js";import{d as a}from"./chunk-IZ2LK5GK.js";var x=c`.pagination{display:flex;flex-wrap:wrap;justify-content:center;max-width:max-content;gap:var(--bl-size-s)}.pagination *{margin:0;padding:0;box-sizing:border-box}.page-container{display:flex;align-items:center}:host([dir=rtl]) .page-container :is(bl-button.next,bl-button.previous){transform:rotate(180deg)}.page-list{display:flex;align-items:center;list-style:none;user-select:none;gap:var(--bl-size-3xs)}.dots{margin:0 var(--bl-size-2xs)}.dots::before{content:" \\B7 \\B7 \\B7";color:var(--bl-color-neutral-darker)}.pagination-helpers{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--bl-size-m);color:var(--bl-color-neutral-darker)}.jumper,.select{display:flex;align-items:center;gap:var(--bl-size-2xs)}label{font:var(--bl-font-title-3-medium);font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-m);letter-spacing:0;user-select:none}bl-input{width:62px}bl-select{width:auto}@media only screen and (max-width:768px){label{display:none}}`,f=x;var t=class extends g{constructor(){super(...arguments);this.currentPage=1;this.totalItems=0;this.itemsPerPage=10;this.hasJumper=!1;this.hasSelect=!1;this.itemsPerPageOptions=[{text:"10 Items",value:10},{text:"25 Items",value:25},{text:"50 Items",value:50},{text:"100 Items",value:100}];this.pages=[]}static get styles(){return[f]}connectedCallback(){super.connectedCallback(),setTimeout(()=>{window==null||window.addEventListener("resize",()=>this._paginate())}),P(this)}disconnectedCallback(){super.disconnectedCallback(),window==null||window.removeEventListener("resize",this._paginate)}updated(e){(e.has("currentPage")||e.has("itemsPerPage")||e.has("totalItems"))&&this._paginate()}_paginate(){this.pages=[];let e=Math.ceil(Math.abs(this.totalItems/this.itemsPerPage))||1;if(e<=8){this.pages=Array.from(Array(e),(r,l)=>l+1);return}this.pages.push(1),this.currentPage<5?this.pages.push(2,3,4,5,"..."):this.currentPage>=5&&this.currentPage<=e-4?this.pages.push("...",this.currentPage-1,this.currentPage,this.currentPage+1,"..."):this.pages.push("...",e-4,e-3,e-2,e-1),this.pages.push(e)}_changePage(e){let r=this.currentPage;this.currentPage=e,this.onChange({selectedPage:e,prevPage:r,itemsPerPage:this.itemsPerPage})}_pageBack(){this.currentPage!==1&&this._changePage(this.currentPage-1)}_pageForward(){this.currentPage!==this._getLastPage()&&this._changePage(this.currentPage+1)}_getLastPage(){return+this.pages[this.pages.length-1]}_inputHandler(e){e.stopPropagation();let r=+e.target.value,l=r>0?Math.min(this._getLastPage(),r):1;this._changePage(l)}_selectHandler(e){var r;this.itemsPerPage=+((r=e==null?void 0:e.detail)==null?void 0:r.value)||100,this._changePage(1)}_renderSinglePage(e){if(typeof e=="string")return s`<li class="dots"></li>`;let r=this.currentPage===e?"page":void 0;return s` <li>
|
|
2
2
|
<bl-button
|
|
3
3
|
@click="${()=>this._changePage(e)}"
|
|
4
4
|
variant=${this.currentPage===e?"primary":"tertiary"}
|
|
@@ -47,4 +47,4 @@ import{a as P}from"./chunk-IPYZIIRV.js";import{a as v,c as n}from"./chunk-HBPBDC
|
|
|
47
47
|
</div>`:null;return s` <nav class="pagination" aria-label="Pagination">
|
|
48
48
|
${(()=>{if(!(!this.hasSelect&&!this.hasJumper))return s` <div class="pagination-helpers">${l} ${y}</div> `})()} ${this.renderPages()}
|
|
49
49
|
</nav>`}};a([i({attribute:"current-page",type:Number,reflect:!0})],t.prototype,"currentPage",2),a([i({attribute:"total-items",type:Number})],t.prototype,"totalItems",2),a([i({attribute:"items-per-page",type:Number,reflect:!0})],t.prototype,"itemsPerPage",2),a([i({attribute:"has-jumper",type:Boolean})],t.prototype,"hasJumper",2),a([i({attribute:"jumper-label",type:String})],t.prototype,"jumperLabel",2),a([i({attribute:"has-select",type:Boolean})],t.prototype,"hasSelect",2),a([i({attribute:"select-label",type:String})],t.prototype,"selectLabel",2),a([i({type:Array,attribute:!1})],t.prototype,"itemsPerPageOptions",2),a([m()],t.prototype,"pages",2),a([b("bl-change")],t.prototype,"onChange",2),t=a([h("bl-pagination"),v()],t);export{t as a};
|
|
50
|
-
//# sourceMappingURL=chunk-
|
|
50
|
+
//# sourceMappingURL=chunk-H4WETBHJ.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/pagination/bl-pagination.css", "../src/components/pagination/bl-pagination.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.pagination{display:flex;flex-wrap:wrap;justify-content:center;max-width:max-content;gap:var(--bl-size-s)}.pagination *{margin:0;padding:0;box-sizing:border-box}.page-container{display:flex;align-items:center}:host([dir=rtl]) .page-container :is(bl-button.next,bl-button.previous){transform:rotate(180deg)}.page-list{display:flex;align-items:center;list-style:none;user-select:none;gap:var(--bl-size-3xs)}.dots{margin:0 var(--bl-size-2xs)}.dots::before{content:\" \\\\B7 \\\\B7 \\\\B7\";color:var(--bl-color-neutral-darker)}.pagination-helpers{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--bl-size-m);color:var(--bl-color-neutral-darker)}.jumper,.select{display:flex;align-items:center;gap:var(--bl-size-2xs)}label{font:var(--bl-font-title-3-medium);font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-m);letter-spacing:0;user-select:none}bl-input{width:62px}bl-select{width:auto}@media only screen and (max-width:768px){label{display:none}}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { localized, msg } from \"@lit/localize\";\nimport { setDirectionProperty } from \"../../utilities/direction\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport \"../button/bl-button\";\nimport \"../input/bl-input\";\nimport \"../select/bl-select\";\nimport style from \"./bl-pagination.css\";\n\n/**\n * @tag bl-pagination\n * @summary Baklava Pagination component\n */\n\n@customElement(\"bl-pagination\")\n@localized()\nexport default class BlPagination extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the current page\n */\n @property({ attribute: \"current-page\", type: Number, reflect: true })\n currentPage = 1;\n\n /**\n * Sets the total items to be paginated\n */\n @property({ attribute: \"total-items\", type: Number })\n totalItems = 0;\n\n /**\n * Sets the number of items per page\n */\n @property({ attribute: \"items-per-page\", type: Number, reflect: true })\n itemsPerPage = 10;\n\n /**\n * Adds jumper element if provided as true\n */\n @property({ attribute: \"has-jumper\", type: Boolean })\n hasJumper = false;\n\n /**\n * Sets the jumper label\n */\n @property({ attribute: \"jumper-label\", type: String })\n jumperLabel?: string;\n\n /**\n * Adds select element to choose the items per page\n */\n @property({ attribute: \"has-select\", type: Boolean })\n hasSelect = false;\n\n /**\n * Adds select element to choose the items per page\n */\n @property({ attribute: \"select-label\", type: String })\n selectLabel?: string;\n\n /**\n * Sets the items per page options of the select element\n * PROPERTY\n */\n @property({ type: Array, attribute: false })\n itemsPerPageOptions = [\n {\n text: \"10 Items\",\n value: 10,\n },\n {\n text: \"25 Items\",\n value: 25,\n },\n {\n text: \"50 Items\",\n value: 50,\n },\n {\n text: \"100 Items\",\n value: 100,\n },\n ];\n\n @state() private pages: Array<number | string> = [];\n\n /**\n * Fires when the current page changes\n */\n @event(\"bl-change\") private onChange: EventDispatcher<{\n selectedPage: number;\n prevPage: number;\n itemsPerPage: number;\n }>;\n\n connectedCallback() {\n super.connectedCallback();\n\n setTimeout(() => {\n window?.addEventListener(\"resize\", () => this._paginate());\n });\n\n setDirectionProperty(this);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n window?.removeEventListener(\"resize\", this._paginate);\n }\n\n updated(changedProperties: PropertyValues<this>) {\n if (\n changedProperties.has(\"currentPage\") ||\n changedProperties.has(\"itemsPerPage\") ||\n changedProperties.has(\"totalItems\")\n ) {\n this._paginate();\n }\n }\n\n private _paginate() {\n this.pages = [];\n const pageListLength = Math.ceil(Math.abs(this.totalItems / this.itemsPerPage)) || 1;\n\n if (pageListLength <= 8) {\n this.pages = Array.from(Array(pageListLength), (_, index) => index + 1);\n return;\n }\n\n this.pages.push(1);\n\n if (this.currentPage < 5) {\n this.pages.push(2, 3, 4, 5, \"...\");\n } else if (this.currentPage >= 5 && this.currentPage <= pageListLength - 4) {\n this.pages.push(\"...\", this.currentPage - 1, this.currentPage, this.currentPage + 1, \"...\");\n } else {\n this.pages.push(\n \"...\",\n pageListLength - 4,\n pageListLength - 3,\n pageListLength - 2,\n pageListLength - 1\n );\n }\n\n this.pages.push(pageListLength);\n }\n\n private _changePage(selectedPage: number): void {\n const prevPage = this.currentPage;\n\n this.currentPage = selectedPage;\n\n this.onChange({\n selectedPage,\n prevPage,\n itemsPerPage: this.itemsPerPage,\n });\n }\n\n private _pageBack(): void {\n if (this.currentPage === 1) return;\n this._changePage(this.currentPage - 1);\n }\n\n private _pageForward(): void {\n if (this.currentPage === this._getLastPage()) return;\n this._changePage(this.currentPage + 1);\n }\n\n private _getLastPage(): number {\n return +this.pages[this.pages.length - 1];\n }\n\n private _inputHandler(event: CustomEvent) {\n event.stopPropagation();\n const inputValue = +(event.target as HTMLInputElement).value;\n const newPage = inputValue > 0 ? Math.min(this._getLastPage(), inputValue) : 1;\n\n this._changePage(newPage);\n }\n\n private _selectHandler(event: CustomEvent) {\n this.itemsPerPage = +event?.detail?.value || 100;\n this._changePage(1);\n }\n\n private _renderSinglePage(page: number | string) {\n if (typeof page === \"string\") {\n return html`<li class=\"dots\"></li>`;\n }\n const ariaCurrent = this.currentPage === page ? \"page\" : undefined;\n\n return html` <li>\n <bl-button\n @click=\"${() => this._changePage(page)}\"\n variant=${this.currentPage === page ? \"primary\" : \"tertiary\"}\n kind=\"neutral\"\n label=\"Page ${page}\"\n aria-current=${ifDefined(ariaCurrent)}\n >\n ${page}\n </bl-button>\n </li>`;\n }\n\n private renderPages() {\n return html`\n <div class=\"page-container\">\n <bl-button\n @click=\"${this._pageBack}\"\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"arrow_left\"\n class=\"previous\"\n label=\"Previous\"\n ?disabled=${this.currentPage === 1}\n ></bl-button>\n <ul class=\"page-list\">\n ${window.innerWidth < 768\n ? html`${this._renderSinglePage(this.currentPage)}`\n : this.pages.map(page => html`${this._renderSinglePage(page)}`)}\n </ul>\n <bl-button\n @click=\"${this._pageForward}\"\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"arrow_right\"\n class=\"next\"\n label=\"Next\"\n ?disabled=${this.currentPage === this._getLastPage()}\n ></bl-button>\n </div>\n `;\n }\n\n render(): TemplateResult {\n const jumperText = this.jumperLabel ?? msg(\"Go to\", { desc: \"bl-pagination: jumper text\" });\n const selectText = this.selectLabel ?? msg(\"Show\", { desc: \"bl-pagination: listing text\" });\n\n const selectEl = this.hasSelect\n ? html`\n <div class=\"select\">\n <label>${selectText}</label>\n <bl-select @bl-select=\"${this._selectHandler}\" .value=${this.itemsPerPage} required>\n ${this.itemsPerPageOptions.map(option => {\n return html`<bl-select-option .value=${option.value}\n >${option.text}</bl-select-option\n >`;\n })}\n </bl-select>\n </div>\n `\n : null;\n\n const jumperEl = this.hasJumper\n ? html` <div class=\"jumper\">\n <label>${jumperText}</label>\n <bl-input .value=\"${this.currentPage}\" @bl-change=\"${this._inputHandler}\"></bl-input>\n </div>`\n : null;\n\n const getHelperElements = () => {\n if (!this.hasSelect && !this.hasJumper) return;\n return html` <div class=\"pagination-helpers\">${selectEl} ${jumperEl}</div> `;\n };\n\n return html` <nav class=\"pagination\" aria-label=\"Pagination\">\n ${getHelperElements()} ${this.renderPages()}\n </nav>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-pagination\": BlPagination;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["styles", "i", "bl_pagination_default", "BlPagination", "s", "bl_pagination_default", "setDirectionProperty", "changedProperties", "pageListLength", "_", "index", "selectedPage", "prevPage", "event", "inputValue", "newPage", "_a", "page", "x", "ariaCurrent", "l", "_b", "jumperText", "msg", "selectText", "selectEl", "option", "jumperEl", "__decorateClass", "e", "t", "localized"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import{a,b as s}from"./chunk-5MOOXA2X.js";import{a as r,b as e,f as l}from"./chunk-4OT5AMS5.js";import{d as o}from"./chunk-IZ2LK5GK.js";var p=r`:host{display:block;position:relative;width:100%}.dropdown-group{display:flex;flex-direction:column;gap:var(--bl-size-xs)}.caption{font:var(--bl-font-caption);font-size:var(--bl-font-size-xs);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-s);color:var(--bl-color-neutral-dark)}:host(:not(:first-child)) .dropdown-group{border-top:1px solid var(--bl-color-neutral-lighter);padding-top:var(--bl-size-xs)}:host(:not(:last-child)) .dropdown-group{border-bottom:1px solid var(--bl-color-neutral-lighter);padding-bottom:var(--bl-size-xs)}`,i=p;var d="bl-dropdown-group",t=class extends l{static get styles(){return[i]}render(){let n=this.caption?e`<span id="label" class="caption">${this.caption}</span>`:"";return e`<div class="dropdown-group" role="group" aria-labelledby="label">
|
|
2
|
+
${n}
|
|
3
|
+
<slot></slot>
|
|
4
|
+
</div>`}};o([s({type:String})],t.prototype,"caption",2),t=o([a(d)],t);export{d as a,t as b};
|
|
5
|
+
//# sourceMappingURL=chunk-HYBPEELZ.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/dropdown/group/bl-dropdown-group.css", "../src/components/dropdown/group/bl-dropdown-group.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:block;position:relative;width:100%}.dropdown-group{display:flex;flex-direction:column;gap:var(--bl-size-xs)}.caption{font:var(--bl-font-caption);font-size:var(--bl-font-size-xs);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-s);color:var(--bl-color-neutral-dark)}:host(:not(:first-child)) .dropdown-group{border-top:1px solid var(--bl-color-neutral-lighter);padding-top:var(--bl-size-xs)}:host(:not(:last-child)) .dropdown-group{border-bottom:1px solid var(--bl-color-neutral-lighter);padding-bottom:var(--bl-size-xs)}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport style from \"./bl-dropdown-group.css\";\n\nexport const blDropdownGroupTag = \"bl-dropdown-group\";\n\n/**\n * @tag bl-dropdown-group\n * @summary Baklava Dropdown Group component\n */\n@customElement(blDropdownGroupTag)\nexport default class BlDropdownGroup extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the caption.\n */\n @property({ type: String })\n caption?: string;\n\n render(): TemplateResult {\n const caption = this.caption\n ? html`<span id=\"label\" class=\"caption\">${this.caption}</span>`\n : \"\";\n\n return html`<div class=\"dropdown-group\" role=\"group\" aria-labelledby=\"label\">\n ${caption}\n <slot></slot>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blDropdownGroupTag]: BlDropdownGroup;\n }\n}\n"],
|
|
5
|
+
"mappings": "wIACO,IAAMA,EAASC,ijBACfC,EAAQF,ECER,IAAMG,EAAqB,oBAObC,EAArB,cAA6CC,CAAW,CACtD,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAQA,QAAyB,CACvB,IAAMC,EAAU,KAAK,QACjBC,qCAAwC,KAAK,iBAC7C,GAEJ,OAAOA;AAAA,QACHD;AAAA;AAAA,WAGN,CACF,EAZEE,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GARPN,EASnB,uBATmBA,EAArBK,EAAA,CADCC,EAAcP,CAAkB,GACZC",
|
|
6
|
+
"names": ["styles", "i", "bl_dropdown_group_default", "blDropdownGroupTag", "BlDropdownGroup", "s", "bl_dropdown_group_default", "caption", "x", "__decorateClass", "e"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import{a as f}from"./chunk-6LT7O7T2.js";import{a as n}from"./chunk-DINNT5P2.js";import{a as y}from"./chunk-GRL4DWKG.js";import{a as v,b as e,c as m,e as g}from"./chunk-5MOOXA2X.js";import{a as u,b as a,f as p}from"./chunk-4OT5AMS5.js";import{d as o}from"./chunk-IZ2LK5GK.js";var _=l=>{if(!(!l.noValidate&&!l.reportValidity())){let b=new SubmitEvent("submit",{bubbles:!0,cancelable:!0});l.dispatchEvent(b),b.defaultPrevented||l.submit()}};var z=u`:host{display:var(--bl-button-display,inline-block);max-width:100%;position:relative}.button{--main-color:var(--bl-color-primary);--main-hover-color:var(--bl-color-primary-highlight);--text-hover-color:var(--bl-color-neutral-lightest);--content-color:var(--bl-color-neutral-full);--bg-color:var(--main-color);--border-color:var(--main-color);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-m);--margin-icon:var(--padding-vertical);--icon-size:var(--bl-size-m);--font:var(--bl-font-title-3-medium);--height:var(--bl-size-2xl);display:flex;gap:var(--margin-icon);justify-content:var(--bl-button-justify,center);align-items:center;box-sizing:border-box;width:100%;height:var(--height);border:solid 1px var(--border-color);border-radius:var(--bl-border-radius-m);text-decoration:none;padding:var(--padding-vertical) var(--padding-horizontal);cursor:pointer;background-color:var(--bg-color);color:var(--content-color);font:var(--font);font-kerning:none;user-select:none}:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .button,:host(:hover) .button{--bg-color:var(--main-hover-color);--border-color:var(--main-hover-color)}.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([size=small]) .button{--font:var(--bl-font-title-4-medium);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-2xs);--icon-size:var(--bl-size-s);--height:var(--bl-size-xl)}:host([size=large]) .button{--font:var(--bl-font-title-3-medium);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-xl);--margin-icon:var(--bl-size-2xs);--height:var(--bl-size-3xl)}.button:focus{outline:0}.button:focus-visible{position:relative;outline:0}.button:focus-visible::after{border:2px solid var(--bl-button-focus-border-color,var(--main-color));border-radius:var(--bl-border-radius-l);content:"";position:absolute;inset:-4px}:host ::slotted(bl-icon){font-size:var(--icon-size)}:host([loading]) ::slotted(bl-icon){display:none}:host .has-icon:not(.has-content){--padding-horizontal:var(--padding-vertical);--margin-icon:0}:host([variant=secondary]) .button{--bg-color:transparent;--content-color:var(--main-color)}:host([variant=tertiary]) .button{--content-color:var(--main-color);--border-color:transparent;--bg-color:transparent}:host([kind=neutral]) .button{--main-color:var(--bl-color-neutral-darker);--main-hover-color:var(--bl-color-neutral-darkest)}:host([kind=success]) .button{--main-color:var(--bl-color-success);--main-hover-color:var(--bl-color-success-highlight)}:host([kind=danger]) .button{--main-color:var(--bl-color-danger);--main-hover-color:var(--bl-color-danger-highlight)}:host([disabled]){cursor:not-allowed}:host([loading]){cursor:wait}:host .button[aria-disabled=true]{--main-color:var(--bl-color-neutral-lightest);--main-hover-color:var(--bl-color-neutral-lightest);--content-color:var(--bl-color-neutral-lighter);--bg-color:var(--main-color);pointer-events:none;text-decoration:none}:host([variant=tertiary]) .button[aria-disabled=true]{--main-color:transparent}:host([variant=secondary].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .button[aria-disabled=false],:host([variant=secondary]:hover) .button[aria-disabled=false]{--content-color:var(--bl-color-neutral-full);--bg-color:var(--main-hover-color)}:host([variant=tertiary].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .button[aria-disabled=false],:host([variant=tertiary]:hover) .button[aria-disabled=false]{--content-color:var(--main-hover-color);--bg-color:var(--text-hover-color)}:host([dropdown]) .open{display:none}:host([dropdown]) .active .open{display:inline-block}:host([dropdown]) .active .close{display:none}:host .active.button{--bg-color:var(--main-hover-color);--border-color:var(--main-hover-color)}:host([variant=secondary]) .active.button{--content-color:var(--bl-color-neutral-full);--bg-color:var(--main-hover-color)}:host([variant=tertiary]) .active.button{--content-color:var(--main-color);--bg-color:var(--bl-color-neutral-lightest);--border-color:transparent}`,x=z;var t=class extends p{constructor(){super(...arguments);this.variant="primary";this.kind="default";this.size="medium";this.loading=!1;this.disabled=!1;this.target="_self";this.dropdown=!1;this.autofocus=!1;this.active=!1}static get styles(){return[x]}get _isActive(){return this.active}connectedCallback(){super.connectedCallback()}caretTemplate(){return a` <bl-icon class="open" name="arrow_up"></bl-icon>
|
|
2
|
+
<bl-icon class="close" name="arrow_down"></bl-icon>`}_handleClick(){if(this.type==="submit"){let r;this.form instanceof HTMLFormElement?r=this.form:typeof this.form=="string"?r=document.getElementById(this.form):r=this.closest("form"),r&&_(r)}this.onClick("Click event fired!")}focus(){this.button.focus()}get _hasIconSlot(){return this.querySelector(':scope > [slot="icon"]')!==null}get _hasDefaultSlot(){return[...this.childNodes].some(i=>{var c;let s=i.nodeType;return s===i.TEXT_NODE&&((c=i.textContent)==null?void 0:c.trim())!==""||s===i.ELEMENT_NODE&&!i.hasAttribute("slot")})}render(){let r=this.loading||this.disabled,i=this.loading&&this.loadingLabel?this.loadingLabel:a`<slot></slot>`,s=!!this.href,c=this.icon?a`<bl-icon name=${this.icon}></bl-icon>`:"",T=a`<bl-spinner
|
|
3
|
+
class="loading-spinner"
|
|
4
|
+
?disabled="${r}"
|
|
5
|
+
size="${this.size}"
|
|
6
|
+
></bl-spinner>`,d=a`<slot name="icon">${this.loading?T:c}</slot>
|
|
7
|
+
<span class="label">${i}</span>`,E=this.dropdown?this.caretTemplate():"",h=f({button:!0,"has-icon":this.icon||this._hasIconSlot,"has-content":this._hasDefaultSlot,active:!s&&this._isActive});return s?a`<a
|
|
8
|
+
class=${h}
|
|
9
|
+
?autofocus=${this.autofocus}
|
|
10
|
+
aria-disabled="${n(r)}"
|
|
11
|
+
aria-label="${n(this.label)}"
|
|
12
|
+
href=${n(this.href)}
|
|
13
|
+
target=${n(this.target)}
|
|
14
|
+
role="button"
|
|
15
|
+
>${d}
|
|
16
|
+
</a>`:a`<button
|
|
17
|
+
class=${h}
|
|
18
|
+
?autofocus=${this.autofocus}
|
|
19
|
+
aria-disabled="${n(r)}"
|
|
20
|
+
aria-label="${n(this.label)}"
|
|
21
|
+
?disabled=${r}
|
|
22
|
+
@click="${this._handleClick}"
|
|
23
|
+
>
|
|
24
|
+
${d} ${E}
|
|
25
|
+
</button>`}};o([e({type:String,reflect:!0})],t.prototype,"variant",2),o([e({type:String,reflect:!0})],t.prototype,"kind",2),o([e({type:String,reflect:!0})],t.prototype,"size",2),o([e({type:String})],t.prototype,"label",2),o([e({type:String,attribute:"loading-label"})],t.prototype,"loadingLabel",2),o([e({type:Boolean,reflect:!0})],t.prototype,"loading",2),o([e({type:Boolean,reflect:!0})],t.prototype,"disabled",2),o([e({type:String})],t.prototype,"href",2),o([e({type:String})],t.prototype,"icon",2),o([e({type:String})],t.prototype,"target",2),o([e({type:String})],t.prototype,"type",2),o([e({type:Boolean})],t.prototype,"dropdown",2),o([e({type:Boolean,reflect:!0})],t.prototype,"autofocus",2),o([e({type:String})],t.prototype,"form",2),o([m({})],t.prototype,"active",2),o([g(".button")],t.prototype,"button",2),o([y("bl-click")],t.prototype,"onClick",2),t=o([v("bl-button")],t);export{_ as a,t as b};
|
|
26
|
+
//# sourceMappingURL=chunk-HZV6GUII.js.map
|