@trendyol/baklava 3.3.0-beta.23 → 3.3.0-beta.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/baklava-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-GFBXJPT6.js +50 -0
- package/dist/chunk-GFBXJPT6.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-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-OTAAXK2L.js +84 -0
- package/dist/chunk-OTAAXK2L.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-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.d.ts.map +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/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.map +1 -1
- package/dist/components/notification/bl-notification.stories.js +30 -196
- 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-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-CJDCQC7C.js +0 -50
- package/dist/chunk-CJDCQC7C.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-S6HEBXIR.js +0 -84
- package/dist/chunk-S6HEBXIR.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 @@
|
|
|
1
|
+
{"version":3,"file":"bl-tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/bl-tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhF,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACnD,KAAK,UAAU,GAAG,YAAY,GAAG,WAAW,CAAC;AAE7C;;;GAGG;AAEH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,UAAU;IAC3C,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IAED;;OAEG;IAEH,IAAI,EAAE,OAAO,CAAY;IAEzB;;OAEG;IAEH,OAAO,EAAE,UAAU,CAAgB;IAEnC;;OAEG;IAEH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE5B;;OAEG;IACoB,OAAO,CAAC,aAAa,CAGzC;IAEH,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,qBAAqB;IAiB7B,OAAO,CAAC,aAAa;IAKrB,MAAM,IAAI,cAAc;CAoBzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a}from"../../chunk-TUUQIEDI.js";import"../../chunk-HZV6GUII.js";import"../../chunk-ZE7GYACV.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
|
|
2
|
+
//# sourceMappingURL=bl-tag.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bl-tag.test.d.ts","sourceRoot":"","sources":["../../../src/components/tag/bl-tag.test.ts"],"names":[],"mappings":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a}from"../../chunk-
|
|
1
|
+
import{a}from"../../chunk-STZJ3LBU.js";import"../../chunk-23PSWIUF.js";import"../../chunk-EG7U7PM3.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-AYJMIZZ3.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
|
|
2
2
|
//# sourceMappingURL=bl-textarea.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a}from"../../chunk-
|
|
1
|
+
import{a}from"../../chunk-DE3A37FL.js";import"../../chunk-UOGCEUXK.js";import"../../chunk-EZSEQHRH.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
|
|
2
2
|
//# sourceMappingURL=bl-tooltip.js.map
|
|
@@ -3147,6 +3147,118 @@
|
|
|
3147
3147
|
}
|
|
3148
3148
|
]
|
|
3149
3149
|
},
|
|
3150
|
+
{
|
|
3151
|
+
"kind": "javascript-module",
|
|
3152
|
+
"path": "src/components/tag/bl-tag.ts",
|
|
3153
|
+
"declarations": [
|
|
3154
|
+
{
|
|
3155
|
+
"kind": "class",
|
|
3156
|
+
"description": "",
|
|
3157
|
+
"name": "BlTag",
|
|
3158
|
+
"events": [
|
|
3159
|
+
{
|
|
3160
|
+
"type": {
|
|
3161
|
+
"text": "CustomEvent<{\n value: string | null;\n selected: boolean;\n }>"
|
|
3162
|
+
},
|
|
3163
|
+
"description": "Dispatches when the tag is clicked",
|
|
3164
|
+
"name": "bl-tag-click"
|
|
3165
|
+
}
|
|
3166
|
+
],
|
|
3167
|
+
"attributes": [
|
|
3168
|
+
{
|
|
3169
|
+
"name": "size",
|
|
3170
|
+
"type": {
|
|
3171
|
+
"text": "TagSize"
|
|
3172
|
+
},
|
|
3173
|
+
"default": "\"medium\"",
|
|
3174
|
+
"description": "Sets the tag size",
|
|
3175
|
+
"fieldName": "size"
|
|
3176
|
+
},
|
|
3177
|
+
{
|
|
3178
|
+
"name": "variant",
|
|
3179
|
+
"type": {
|
|
3180
|
+
"text": "TagVariant"
|
|
3181
|
+
},
|
|
3182
|
+
"default": "\"selectable\"",
|
|
3183
|
+
"description": "Sets the tag variant",
|
|
3184
|
+
"fieldName": "variant"
|
|
3185
|
+
},
|
|
3186
|
+
{
|
|
3187
|
+
"name": "icon",
|
|
3188
|
+
"type": {
|
|
3189
|
+
"text": "BaklavaIcon | undefined"
|
|
3190
|
+
},
|
|
3191
|
+
"description": "Sets the name of the icon",
|
|
3192
|
+
"fieldName": "icon"
|
|
3193
|
+
},
|
|
3194
|
+
{
|
|
3195
|
+
"name": "selected",
|
|
3196
|
+
"type": {
|
|
3197
|
+
"text": "boolean"
|
|
3198
|
+
},
|
|
3199
|
+
"default": "false",
|
|
3200
|
+
"description": "Sets the selected state of the tag",
|
|
3201
|
+
"fieldName": "selected"
|
|
3202
|
+
},
|
|
3203
|
+
{
|
|
3204
|
+
"name": "disabled",
|
|
3205
|
+
"type": {
|
|
3206
|
+
"text": "boolean"
|
|
3207
|
+
},
|
|
3208
|
+
"default": "false",
|
|
3209
|
+
"description": "Disables the tag",
|
|
3210
|
+
"fieldName": "disabled"
|
|
3211
|
+
},
|
|
3212
|
+
{
|
|
3213
|
+
"name": "value",
|
|
3214
|
+
"type": {
|
|
3215
|
+
"text": "string | null"
|
|
3216
|
+
},
|
|
3217
|
+
"default": "null",
|
|
3218
|
+
"description": "Sets the value of the tag",
|
|
3219
|
+
"fieldName": "value"
|
|
3220
|
+
}
|
|
3221
|
+
],
|
|
3222
|
+
"superclass": {
|
|
3223
|
+
"name": "LitElement",
|
|
3224
|
+
"package": "lit"
|
|
3225
|
+
},
|
|
3226
|
+
"tagName": "bl-tag",
|
|
3227
|
+
"summary": [
|
|
3228
|
+
{
|
|
3229
|
+
"name": "Baklava",
|
|
3230
|
+
"description": "Tag component"
|
|
3231
|
+
}
|
|
3232
|
+
],
|
|
3233
|
+
"jsDoc": "/**\n * @tag bl-tag\n * @summary Baklava Tag component\n */",
|
|
3234
|
+
"tag": [
|
|
3235
|
+
{
|
|
3236
|
+
"name": "bl-tag",
|
|
3237
|
+
"description": ""
|
|
3238
|
+
}
|
|
3239
|
+
],
|
|
3240
|
+
"customElement": true
|
|
3241
|
+
}
|
|
3242
|
+
],
|
|
3243
|
+
"exports": [
|
|
3244
|
+
{
|
|
3245
|
+
"kind": "js",
|
|
3246
|
+
"name": "default",
|
|
3247
|
+
"declaration": {
|
|
3248
|
+
"name": "BlTag",
|
|
3249
|
+
"module": "src/components/tag/bl-tag.ts"
|
|
3250
|
+
}
|
|
3251
|
+
},
|
|
3252
|
+
{
|
|
3253
|
+
"kind": "custom-element-definition",
|
|
3254
|
+
"name": "bl-tag",
|
|
3255
|
+
"declaration": {
|
|
3256
|
+
"name": "BlTag",
|
|
3257
|
+
"module": "src/components/tag/bl-tag.ts"
|
|
3258
|
+
}
|
|
3259
|
+
}
|
|
3260
|
+
]
|
|
3261
|
+
},
|
|
3150
3262
|
{
|
|
3151
3263
|
"kind": "javascript-module",
|
|
3152
3264
|
"path": "src/components/textarea/bl-textarea.ts",
|
package/package.json
CHANGED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/components/badge/bl-badge.css", "../src/components/badge/bl-badge.ts"],
|
|
4
|
-
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;max-width:100%}.badge{--bg-color:var(--bl-badge-bg-color, var(--bl-color-primary-contrast));--color:var(--bl-badge-color, var(--bl-color-primary));--font:var(--bl-font-title-4-medium);--padding-vertical:var(--bl-size-4xs);--padding-horizontal:var(--bl-size-3xs);--margin-icon:var(--bl-size-3xs);--icon-size:var(--bl-size-s);--height:var(--bl-size-xl);display:flex;gap:var(--margin-icon);justify-content:center;align-items:center;box-sizing:border-box;width:100%;border:none;border-radius:var(--bl-size-4xs);margin:0;padding:var(--padding-vertical) var(--padding-horizontal);background-color:var(--bg-color);color:var(--color, white);font:var(--font);font-kerning:none;height:var(--height)}:host([size=\"small\"]) .badge{--font:var(--bl-font-caption);--height:var(--bl-size-m)}:host([size=\"large\"]) .badge{--font:var(--bl-font-title-3-medium);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-2xs);--height:var(--bl-size-2xl);--icon-size:var(--bl-size-m)}:host ::slotted(bl-icon){font-size:var(--icon-size)}:host([size=\"small\"]) bl-icon{display:none}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport \"../icon/bl-icon\";\nimport { BaklavaIcon } from \"../icon/icon-list\";\nimport style from \"./bl-badge.css\";\n\nexport type BadgeSize = \"small\" | \"medium\" | \"large\";\n\n/**\n * @tag bl-badge\n * @summary Baklava Badge component\n *\n * @cssproperty [--bl-badge-bg-color=--bl-color-primary-contrast] Sets the background color of badge\n * @cssproperty [--bl-badge-color=--bl-color-primary] Sets the color of badge\n */\n\n@customElement(\"bl-badge\")\nexport default class BlBadge extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the badge size\n */\n @property({ type: String, reflect: true })\n size: BadgeSize = \"medium\";\n\n /**\n * Sets the name of the icon\n */\n @property({ type: String })\n icon?: BaklavaIcon;\n\n render(): TemplateResult {\n const icon = this.icon ? html`<bl-icon name=${this.icon}></bl-icon>` : \"\";\n\n return html`<span class=\"badge\">\n <slot name=\"icon\">${icon}</slot>\n <slot></slot>\n </span>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-badge\": BlBadge;\n }\n}\n"],
|
|
5
|
-
"mappings": "6IACO,IAAMA,EAAS,6kCACfC,EAAQD,ECef,IAAqBE,EAArB,cAAqCC,CAAW,CAAhD,kCASE,UAAkB,SARlB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAcA,QAAyB,CACvB,IAAMC,EAAO,KAAK,KAAOC,kBAAqB,KAAK,kBAAoB,GAEvE,OAAOA;AAAA,0BACeD;AAAA;AAAA,YAGxB,CACF,EAhBEE,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GARtBN,EASnB,oBAMAK,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAdPN,EAenB,oBAfmBA,EAArBK,EAAA,CADCC,EAAc,UAAU,GACJN",
|
|
6
|
-
"names": ["styles", "bl_badge_default", "BlBadge", "s", "bl_badge_default", "icon", "x", "__decorateClass", "e"]
|
|
7
|
-
}
|
package/dist/chunk-4QFXDW3W.js
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
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-4QFXDW3W.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
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,6/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,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/components/pagination/bl-pagination.css", "../src/components/pagination/bl-pagination.ts"],
|
|
4
|
-
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.pagination{display:flex;flex-wrap:wrap;justify-content:center;max-width:max-content;gap:var(--bl-size-s)}.pagination *{margin:0;padding:0;box-sizing:border-box}.page-container{display:flex;align-items:center}: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
|
-
}
|
package/dist/chunk-73RGV4UX.js
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import{a as s,b as i}from"./chunk-5MOOXA2X.js";import{a as e,b as l,f as r}from"./chunk-4OT5AMS5.js";import{d as o}from"./chunk-IZ2LK5GK.js";var p=e`: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)}/*
|
|
2
|
-
:host(:not([caption])) ::slotted(:first-child) {
|
|
3
|
-
padding-block: var(--bl-size-xs) 0;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
:host(:not(:last-child)) ::slotted(:last-child) {
|
|
7
|
-
padding-block: 0 var(--bl-size-xs);
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
:host(:not(:first-child)) .caption {
|
|
11
|
-
padding-block: var(--bl-size-xs) 0;
|
|
12
|
-
} */`,a=p;var d="bl-dropdown-group",t=class extends r{static get styles(){return[a]}render(){let n=this.caption?l`<span id="label" class="caption">${this.caption}</span>`:"";return l`<div class="dropdown-group" role="group" aria-labelledby="label">
|
|
13
|
-
${n}
|
|
14
|
-
<slot></slot>
|
|
15
|
-
</div>`}};o([i({type:String})],t.prototype,"caption",2),t=o([s(d)],t);export{d as a,t as b};
|
|
16
|
-
//# sourceMappingURL=chunk-73RGV4UX.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
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)}/*\n:host(:not([caption])) ::slotted(:first-child) {\n padding-block: var(--bl-size-xs) 0;\n}\n\n:host(:not(:last-child)) ::slotted(:last-child) {\n padding-block: 0 var(--bl-size-xs);\n}\n\n:host(:not(:first-child)) .caption {\n padding-block: var(--bl-size-xs) 0;\n} */`;\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": "6IACO,IAAMA,EAASC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAYfC,EAAQF,ECTR,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
|
-
}
|
package/dist/chunk-757CMI4A.js
DELETED
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
import{a as x}from"./chunk-23PSWIUF.js";import{c as m}from"./chunk-EG7U7PM3.js";import{a as g}from"./chunk-XDUIVR6I.js";import{a as v}from"./chunk-VU6LRFZR.js";import{a as p}from"./chunk-6LT7O7T2.js";import{a as f,c as y}from"./chunk-HBPBDC7T.js";import{a as l}from"./chunk-DINNT5P2.js";import{a as n}from"./chunk-GRL4DWKG.js";import{a as u,b as i,c,e as b}from"./chunk-5MOOXA2X.js";import{a as h,b as r,f as d}from"./chunk-4OT5AMS5.js";import{d as t}from"./chunk-IZ2LK5GK.js";var M=h`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-neutral-lighter);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--height:var(--bl-size-2xl);--input-font:var(--bl-font-body-text-2);--line-height:var(--bl-font-body-text-2-line-height);--icon-size:var(--line-height);--icon-gap:var(--bl-size-xs);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);--autofill-bg-color:var(--bl-color-primary-contrast);--label-padding:var(--bl-size-3xs);--background-color:var(--bl-color-neutral-full);display:grid;position:relative;gap:var(--bl-size-3xs)}.wrapper:focus-within{--border-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}.wrapper.dirty.invalid{--border-color:var(--bl-color-danger);--icon-color:var(--bl-color-danger)}:host([size="large"]) .wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m);--icon-gap:var(--bl-size-m)}:host([size="small"]) .wrapper{--height:var(--bl-size-xl);--input-font:var(--bl-font-body-text-3);--padding-vertical:var(--bl-size-3xs);--icon-size:var(--bl-font-body-text-3-line-height);--icon-gap:var(--bl-size-2xs)}.input-wrapper{--border-size:1px;outline:none;display:flex;box-sizing:border-box;gap:var(--padding-vertical);height:var(--height);border:solid var(--border-size) var(--border-color);padding:0 calc(
|
|
2
|
-
var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding) -
|
|
3
|
-
var(--border-size)
|
|
4
|
-
) 0 calc(
|
|
5
|
-
var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding) -
|
|
6
|
-
var(--border-size)
|
|
7
|
-
);background-color:var(--background-color);border-radius:var(--bl-size-3xs);margin:0;width:0;min-width:100%}:host([disabled]) .wrapper{cursor:not-allowed;--background-color:var(--bl-color-neutral-lightest);--text-color:var(--bl-color-neutral-light)}.wrapper:has(input:autofill){--background-color:var(--autofill-bg-color)}.wrapper:has(input:-webkit-autofill){--background-color:var(--autofill-bg-color)}.input-wrapper legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;max-width:max-content;transition:all ease-in 0.1s;font:var(--input-font);top:var(--padding-vertical);inset-inline-start:var(--bl-input-padding-start, var(--padding-horizontal));inset-inline-end:var(--bl-input-padding-end, var(--padding-horizontal));pointer-events:none;color:var(--bl-color-neutral-light)}.has-icon label{inset-inline-end:calc(
|
|
8
|
-
var(--bl-input-padding-end, var(--padding-horizontal)) + var(--icon-size) +
|
|
9
|
-
var(--padding-vertical)
|
|
10
|
-
)}.input-wrapper legend{height:0;visibility:hidden;display:none}.input-wrapper legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}input{width:100%;align-self:stretch;outline:0;border:0;padding:0 0 0 var(--label-padding);font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent;cursor:var(--bl-input-cursor, unset)}input::-webkit-credentials-auto-fill-button{color:red}:where(.wrapper:focus-within, .wrapper.has-value) input{padding-inline-start:var(--label-padding)}input:disabled{cursor:not-allowed}input::-webkit-calendar-picker-indicator{display:none}input::-webkit-search-cancel-button{display:none}input::-moz-calendar-picker-indicator{display:none}input:autofill{background-color:var(--autofill-bg-color);/**
|
|
11
|
-
* Some browsers doesn't allow setting background-color
|
|
12
|
-
* https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
|
|
13
|
-
*/box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}input:-webkit-autofill{background-color:var(--autofill-bg-color);/**
|
|
14
|
-
* Some browsers doesn't allow setting background-color
|
|
15
|
-
* https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
|
|
16
|
-
*/box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}.icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;height:var(--icon-size);margin-inline-end:var(--label-padding)}.icon:has(.clear-icon){gap:var(--bl-size-3xs)}bl-icon:not(.reveal-icon, .clear-icon),::slotted(bl-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button bl-icon{display:none}bl-icon[name="eye_on"]{display:inline-block}.password-visible bl-icon[name="eye_on"]{display:none}.password-visible bl-icon[name="eye_off"]{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out 0.4s}:host([label-fixed]) ::placeholder,:host :focus-within ::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0}:host([label-fixed]) legend{display:none}:host(:not([label-fixed])) :focus-within label,:host(:not([label-fixed])) .has-value label{top:0;inset-inline-start:calc(
|
|
17
|
-
var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding)
|
|
18
|
-
);inset-inline-end:calc(
|
|
19
|
-
var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding)
|
|
20
|
-
);transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0 var(--label-padding);pointer-events:initial;z-index:var(--bl-index-base)}:host([label]:not([label-fixed])) :where(:focus-within, .has-value) legend{max-width:100%;font:var(--bl-font-caption);display:block}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.dirty.invalid .error-icon{display:inline-block}.split-divider{display:block;height:1rem;width:1px;background-color:var(--bl-color-neutral-lighter)}`,w=M;var H={date:"calendar","datetime-local":"calendar",month:"calendar",week:"calendar",time:"clock",search:"search"},e=class extends g(d){constructor(){super(...arguments);this.type="text";this.value="";this.required=!1;this.loading=!1;this.autocomplete="on";this.autofocus=!1;this.size="medium";this.disabled=!1;this.readonly=!1;this.labelFixed=!1;this.onKeydown=a=>{a.code==="Enter"&&this.form&&setTimeout(()=>{a.defaultPrevented||v(this.form)})};this.dirty=!1;this.passwordVisible=!1;this.inputId=Math.random().toString(36).substring(2)}static get styles(){return[w]}set customInvalidText(a){this._customInvalidText=a,this.setValue(this.value)}get customInvalidText(){return this._customInvalidText}connectedCallback(){var a;super.connectedCallback(),this.addEventListener("keydown",this.onKeydown),(a=this.form)==null||a.addEventListener("submit",()=>{this.reportValidity()})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.onKeydown)}textVisibilityToggle(){this.passwordVisible=!this.passwordVisible}async handleSearchClear(){this.value="",await this.clearCustomError(),this.validationTarget.focus()}showPicker(){"showPicker"in HTMLInputElement.prototype&&this.validationTarget.showPicker()}validityCallback(){var a;return this.onInvalid(this.internals.validity),this.customInvalidText||((a=this.validationTarget)==null?void 0:a.validationMessage)}setCustomValidity(a){this.validationTarget.setCustomValidity(a)}async forceCustomError(){await this.updateComplete,this.setCustomValidity(this.customInvalidText||y("An error occurred",{desc:"bl-input: default custom error message"})),this.setValue(this.value),this.reportValidity()}async clearCustomError(){await this.updateComplete,this.setCustomValidity(""),this.setValue(this.value),this.reportValidity()}reportValidity(){return this.dirty=!0,this.requestUpdate(),this.checkValidity()}inputHandler(a){let o=a.target.value;this.value=o,this.setValue(this.value),this.onInput(o)}changeHandler(a){let o=a.target.value;this.dirty=!0,this.value=o,this.setValue(this.value),this.onChange(o)}firstUpdated(){this.setValue(this.value),this.icon||(this.icon=H[this.type])}async updated(a){a.size>0&&(this.setValue(this.value),await this.validationComplete,this.requestUpdate()),a.has("error")&&this.error&&!this.dirty&&this.reportValidity()}get _hasIconSlot(){return this.querySelector(':scope > [slot="icon"]')!==null}render(){let a=this.checkValidity()?"":r`<p id="errorMessage" aria-live="polite" class="invalid-text">
|
|
21
|
-
${this.validationMessage}
|
|
22
|
-
</p>`,o=this.helpText?r`<p id="helpText" class="help-text">${this.helpText}</p>`:"",k=r`
|
|
23
|
-
<slot name="icon">
|
|
24
|
-
${this.loading&&this.type==="search"&&this.value!==""&&this.value!==null?r`<bl-spinner></bl-spinner>`:this.icon?r`<bl-icon name="${this.icon}"></bl-icon>`:r`<bl-icon class="error-icon" name="alert"></bl-icon>`}
|
|
25
|
-
</slot>
|
|
26
|
-
`,z=this.label?r`<label for=${this.inputId}>${this.label}</label>`:"",s=this.type==="password",T=s?r`<bl-button
|
|
27
|
-
size="small"
|
|
28
|
-
kind="neutral"
|
|
29
|
-
variant="tertiary"
|
|
30
|
-
class="${p({"reveal-button":!0,"password-visible":this.passwordVisible})}"
|
|
31
|
-
aria-label="Toggle password reveal"
|
|
32
|
-
@bl-click="${this.textVisibilityToggle}"
|
|
33
|
-
>
|
|
34
|
-
<bl-icon class="reveal-icon" slot="icon" name="eye_on"></bl-icon>
|
|
35
|
-
<bl-icon class="reveal-icon" slot="icon" name="eye_off"></bl-icon>
|
|
36
|
-
</bl-button>`:"",$=this.type==="search"&&this.value!==""&&this.value!==null?r`
|
|
37
|
-
<bl-button
|
|
38
|
-
size="small"
|
|
39
|
-
kind="neutral"
|
|
40
|
-
variant="tertiary"
|
|
41
|
-
aria-label="Clear search"
|
|
42
|
-
@bl-click=${this.handleSearchClear}
|
|
43
|
-
>
|
|
44
|
-
<bl-icon class="clear-icon" slot="icon" name="close"></bl-icon>
|
|
45
|
-
</bl-button>
|
|
46
|
-
<div class="split-divider"></div>
|
|
47
|
-
`:"",V=this.icon||this._hasIconSlot,S={wrapper:!0,dirty:this.dirty,invalid:!this.checkValidity(),"has-icon":s||V||this.dirty&&!this.checkValidity(),"has-value":this.value!==null&&this.value!==""},C=this.passwordVisible?"text":"password",E=s?C:this.type;return r`<div class=${p(S)}>
|
|
48
|
-
${z}
|
|
49
|
-
<fieldset class="input-wrapper">
|
|
50
|
-
<legend><span>${this.label}</span></legend>
|
|
51
|
-
<input
|
|
52
|
-
id=${this.inputId}
|
|
53
|
-
type=${E}
|
|
54
|
-
.value=${m(this.value)}
|
|
55
|
-
inputmode="${l(this.inputmode)}"
|
|
56
|
-
?autofocus=${this.autofocus}
|
|
57
|
-
.autocomplete="${this.autocomplete}"
|
|
58
|
-
placeholder="${l(this.placeholder)}"
|
|
59
|
-
minlength="${l(this.minlength)}"
|
|
60
|
-
maxlength="${l(this.maxlength)}"
|
|
61
|
-
min="${l(this.min)}"
|
|
62
|
-
max="${l(this.max)}"
|
|
63
|
-
pattern="${l(this.pattern)}"
|
|
64
|
-
step="${l(this.step)}"
|
|
65
|
-
?required=${this.required}
|
|
66
|
-
?disabled=${this.disabled}
|
|
67
|
-
?readonly=${this.readonly}
|
|
68
|
-
@change=${this.changeHandler}
|
|
69
|
-
@input=${this.inputHandler}
|
|
70
|
-
aria-invalid=${this.checkValidity()?"false":"true"}
|
|
71
|
-
aria-describedby=${l(this.helpText?"helpText":void 0)}
|
|
72
|
-
aria-errormessage=${l(this.checkValidity()?void 0:"errorMessage")}
|
|
73
|
-
/>
|
|
74
|
-
<div class="icon">${T} ${$} ${k}</div>
|
|
75
|
-
</fieldset>
|
|
76
|
-
<div class="hint">${a} ${o}</div>
|
|
77
|
-
</div>`}};e.shadowRootOptions={...d.shadowRootOptions,delegatesFocus:!0},e.formControlValidators=x,t([b("input")],e.prototype,"validationTarget",2),t([i({reflect:!0})],e.prototype,"name",2),t([i({reflect:!0})],e.prototype,"type",2),t([i({reflect:!0})],e.prototype,"label",2),t([i({reflect:!0})],e.prototype,"placeholder",2),t([i({reflect:!0})],e.prototype,"value",2),t([i({type:Boolean,reflect:!0})],e.prototype,"required",2),t([i({type:Number,reflect:!0})],e.prototype,"minlength",2),t([i({type:Number,reflect:!0})],e.prototype,"maxlength",2),t([i({reflect:!0})],e.prototype,"min",2),t([i({type:Boolean,reflect:!0})],e.prototype,"loading",2),t([i({reflect:!0})],e.prototype,"max",2),t([i({type:String,reflect:!0})],e.prototype,"pattern",2),t([i({type:Number,reflect:!0})],e.prototype,"step",2),t([i({type:String,reflect:!0})],e.prototype,"autocomplete",2),t([i({type:String,reflect:!0})],e.prototype,"inputmode",2),t([i({type:Boolean,reflect:!0})],e.prototype,"autofocus",2),t([i({type:String,reflect:!0})],e.prototype,"icon",2),t([i({type:String,reflect:!0})],e.prototype,"size",2),t([i({type:Boolean,reflect:!0})],e.prototype,"disabled",2),t([i({type:Boolean,reflect:!0})],e.prototype,"readonly",2),t([i({type:Boolean,attribute:"label-fixed",reflect:!0})],e.prototype,"labelFixed",2),t([i({type:String,attribute:"invalid-text",reflect:!0})],e.prototype,"customInvalidText",1),t([i({reflect:!0,type:String})],e.prototype,"error",2),t([i({type:String,attribute:"help-text",reflect:!0})],e.prototype,"helpText",2),t([n("bl-change")],e.prototype,"onChange",2),t([n("bl-input")],e.prototype,"onInput",2),t([n("bl-invalid")],e.prototype,"onInvalid",2),t([c()],e.prototype,"dirty",2),t([c()],e.prototype,"passwordVisible",2),e=t([u("bl-input"),f()],e);export{e as a};
|
|
78
|
-
//# sourceMappingURL=chunk-757CMI4A.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/components/input/bl-input.css", "../src/components/input/bl-input.ts"],
|
|
4
|
-
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-neutral-lighter);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--height:var(--bl-size-2xl);--input-font:var(--bl-font-body-text-2);--line-height:var(--bl-font-body-text-2-line-height);--icon-size:var(--line-height);--icon-gap:var(--bl-size-xs);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);--autofill-bg-color:var(--bl-color-primary-contrast);--label-padding:var(--bl-size-3xs);--background-color:var(--bl-color-neutral-full);display:grid;position:relative;gap:var(--bl-size-3xs)}.wrapper:focus-within{--border-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}.wrapper.dirty.invalid{--border-color:var(--bl-color-danger);--icon-color:var(--bl-color-danger)}:host([size=\"large\"]) .wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m);--icon-gap:var(--bl-size-m)}:host([size=\"small\"]) .wrapper{--height:var(--bl-size-xl);--input-font:var(--bl-font-body-text-3);--padding-vertical:var(--bl-size-3xs);--icon-size:var(--bl-font-body-text-3-line-height);--icon-gap:var(--bl-size-2xs)}.input-wrapper{--border-size:1px;outline:none;display:flex;box-sizing:border-box;gap:var(--padding-vertical);height:var(--height);border:solid var(--border-size) var(--border-color);padding:0 calc(\n var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding) -\n var(--border-size)\n ) 0 calc(\n var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding) -\n var(--border-size)\n );background-color:var(--background-color);border-radius:var(--bl-size-3xs);margin:0;width:0;min-width:100%}:host([disabled]) .wrapper{cursor:not-allowed;--background-color:var(--bl-color-neutral-lightest);--text-color:var(--bl-color-neutral-light)}.wrapper:has(input:autofill){--background-color:var(--autofill-bg-color)}.wrapper:has(input:-webkit-autofill){--background-color:var(--autofill-bg-color)}.input-wrapper legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;max-width:max-content;transition:all ease-in 0.1s;font:var(--input-font);top:var(--padding-vertical);inset-inline-start:var(--bl-input-padding-start, var(--padding-horizontal));inset-inline-end:var(--bl-input-padding-end, var(--padding-horizontal));pointer-events:none;color:var(--bl-color-neutral-light)}.has-icon label{inset-inline-end:calc(\n var(--bl-input-padding-end, var(--padding-horizontal)) + var(--icon-size) +\n var(--padding-vertical)\n )}.input-wrapper legend{height:0;visibility:hidden;display:none}.input-wrapper legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}input{width:100%;align-self:stretch;outline:0;border:0;padding:0 0 0 var(--label-padding);font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent;cursor:var(--bl-input-cursor, unset)}input::-webkit-credentials-auto-fill-button{color:red}:where(.wrapper:focus-within, .wrapper.has-value) input{padding-inline-start:var(--label-padding)}input:disabled{cursor:not-allowed}input::-webkit-calendar-picker-indicator{display:none}input::-webkit-search-cancel-button{display:none}input::-moz-calendar-picker-indicator{display:none}input:autofill{background-color:var(--autofill-bg-color);/**\n * Some browsers doesn't allow setting background-color\n * https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill\n */box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}input:-webkit-autofill{background-color:var(--autofill-bg-color);/**\n * Some browsers doesn't allow setting background-color\n * https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill\n */box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}.icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;height:var(--icon-size);margin-inline-end:var(--label-padding)}.icon:has(.clear-icon){gap:var(--bl-size-3xs)}bl-icon:not(.reveal-icon, .clear-icon),::slotted(bl-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button bl-icon{display:none}bl-icon[name=\"eye_on\"]{display:inline-block}.password-visible bl-icon[name=\"eye_on\"]{display:none}.password-visible bl-icon[name=\"eye_off\"]{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out 0.4s}:host([label-fixed]) ::placeholder,:host :focus-within ::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0}:host([label-fixed]) legend{display:none}:host(:not([label-fixed])) :focus-within label,:host(:not([label-fixed])) .has-value label{top:0;inset-inline-start:calc(\n var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding)\n );inset-inline-end:calc(\n var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding)\n );transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0 var(--label-padding);pointer-events:initial;z-index:var(--bl-index-base)}:host([label]:not([label-fixed])) :where(:focus-within, .has-value) legend{max-width:100%;font:var(--bl-font-caption);display:block}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.dirty.invalid .error-icon{display:inline-block}.split-divider{display:block;height:1rem;width:1px;background-color:var(--bl-color-neutral-lighter)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult, PropertyValues } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { localized, msg } from \"@lit/localize\";\nimport { FormControlMixin } from \"@open-wc/form-control\";\nimport { submit } from \"@open-wc/form-helpers\";\nimport \"element-internals-polyfill\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport { innerInputValidators } from \"../../utilities/form-control\";\nimport \"../button/bl-button\";\nimport \"../icon/bl-icon\";\nimport { BaklavaIcon } from \"../icon/icon-list\";\nimport style from \"./bl-input.css\";\n\nexport type InputType =\n | \"text\"\n | \"email\"\n | \"date\"\n | \"time\"\n | \"datetime-local\"\n | \"month\"\n | \"week\"\n | \"password\"\n | \"number\"\n | \"tel\"\n | \"url\"\n | \"search\";\n\nconst inputTypeIcons: Partial<Record<InputType, BaklavaIcon>> = {\n \"date\": \"calendar\",\n \"datetime-local\": \"calendar\",\n \"month\": \"calendar\",\n \"week\": \"calendar\",\n \"time\": \"clock\",\n \"search\": \"search\",\n};\n\nexport type InputSize = \"small\" | \"medium\" | \"large\";\n/**\n * @tag bl-input\n * @summary Baklava Input component\n *\n * @cssproperty [--bl-input-padding-start] Sets the padding start\n * @cssproperty [--bl-input-padding-end] Sets the padding end\n */\n@customElement(\"bl-input\")\n@localized()\nexport default class BlInput extends FormControlMixin(LitElement) {\n static get styles(): CSSResultGroup {\n return [style];\n }\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n static formControlValidators = innerInputValidators;\n\n @query(\"input\")\n validationTarget: HTMLInputElement;\n\n /**\n * Sets name of the input\n */\n @property({ reflect: true })\n name?: string;\n\n /**\n * Type of the input. It's used to set `type` attribute of native input inside.\n */\n @property({ reflect: true })\n type: InputType = \"text\";\n\n /**\n * Sets label of the input\n */\n @property({ reflect: true })\n label?: string;\n\n /**\n * Sets placeholder of the input\n */\n @property({ reflect: true })\n placeholder?: string;\n\n /**\n * Sets initial value of the input\n */\n @property({ reflect: true })\n value = \"\";\n\n /**\n * Makes input a mandatory field\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Sets minimum length of the input\n */\n @property({ type: Number, reflect: true })\n minlength?: number;\n\n /**\n * Sets maximum length of the input\n */\n @property({ type: Number, reflect: true })\n maxlength?: number;\n\n /**\n * Sets the minimum acceptable value for the input\n */\n @property({ reflect: true })\n min?: number | string;\n\n /**\n * Sets the loading value for the input\n */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /**\n * Sets the maximum acceptable value for the input\n */\n @property({ reflect: true })\n max?: number | string;\n\n /**\n * Sets a regex pattern form the input validation\n */\n @property({ type: String, reflect: true })\n pattern?: string;\n\n /**\n * Sets the increase and decrease step to a `number` input\n */\n @property({ type: Number, reflect: true })\n step?: number;\n\n /**\n * Hints browser to autocomplete this field.\n */\n @property({ type: String, reflect: true })\n autocomplete: HTMLInputElement[\"autocomplete\"] = \"on\";\n\n /**\n * Sets the input mode of the field for asking browser to show the desired keyboard.\n */\n @property({ type: String, reflect: true })\n inputmode: HTMLInputElement[\"inputMode\"];\n\n /**\n * Sets input to get keyboard focus automatically\n */\n @property({ type: Boolean, reflect: true })\n autofocus = false;\n\n /**\n * Sets the custom icon name. `bl-icon` component is used to show an icon\n */\n @property({ type: String, reflect: true })\n icon?: BaklavaIcon;\n\n /**\n * Sets input size.\n */\n @property({ type: String, reflect: true })\n size?: InputSize = \"medium\";\n\n /**\n * Disables the input\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Makes the input readonly.\n */\n @property({ type: Boolean, reflect: true })\n readonly = 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 * Overrides error message. This message will override default error messages\n * @deprecated use setCustomValidity instead\n */\n @property({ type: String, attribute: \"invalid-text\", reflect: true })\n set customInvalidText(value: string) {\n this._customInvalidText = value;\n this.setValue(this.value);\n }\n\n /**\n * @deprecated\n */\n get customInvalidText(): string {\n return this._customInvalidText;\n }\n\n @property({ reflect: true, type: String })\n error: string;\n\n private _customInvalidText: string;\n\n /**\n * Adds help text\n */\n @property({ type: String, attribute: \"help-text\", reflect: true })\n helpText?: string;\n\n /**\n * Fires when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.\n */\n @event(\"bl-change\") private onChange: EventDispatcher<string>;\n\n /**\n * Fires when the value of an input element has been changed.\n */\n @event(\"bl-input\") private onInput: EventDispatcher<string>;\n\n /**\n * Fires when the value of an input element has been changed.\n */\n @event(\"bl-invalid\") private onInvalid: EventDispatcher<ValidityState>;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\"keydown\", this.onKeydown);\n\n this.form?.addEventListener(\"submit\", () => {\n this.reportValidity();\n });\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener(\"keydown\", this.onKeydown);\n }\n\n private onKeydown = (event: KeyboardEvent): void => {\n if (event.code === \"Enter\" && this.form) {\n setTimeout(() => {\n if (!event.defaultPrevented) {\n submit(this.form);\n }\n });\n }\n };\n\n @state() private dirty = false;\n\n @state() private passwordVisible = false;\n\n private textVisibilityToggle() {\n this.passwordVisible = !this.passwordVisible;\n }\n\n private async handleSearchClear() {\n this.value = \"\";\n\n await this.clearCustomError();\n this.validationTarget.focus();\n }\n\n showPicker() {\n if (\"showPicker\" in HTMLInputElement.prototype) {\n this.validationTarget.showPicker();\n }\n }\n\n validityCallback(): string | void {\n this.onInvalid(this.internals.validity);\n return this.customInvalidText || this.validationTarget?.validationMessage;\n }\n\n /**\n * Sets a custom validity on the form element.\n * @param message\n */\n setCustomValidity(message: string) {\n this.validationTarget.setCustomValidity(message);\n }\n\n /**\n * Force to set input as in invalid state.\n * @deprecated use error attribute instead\n */\n async forceCustomError() {\n await this.updateComplete;\n this.setCustomValidity(\n this.customInvalidText ||\n msg(\"An error occurred\", { desc: \"bl-input: default custom error message\" })\n );\n this.setValue(this.value);\n this.reportValidity();\n }\n\n /**\n * Clear forced invalid state\n * @deprecated use error attribute instead\n */\n async clearCustomError() {\n await this.updateComplete;\n this.setCustomValidity(\"\");\n this.setValue(this.value);\n this.reportValidity();\n }\n\n reportValidity() {\n this.dirty = true;\n this.requestUpdate();\n return this.checkValidity();\n }\n\n private inputHandler(event: Event) {\n const value = (event.target as HTMLInputElement).value;\n\n this.value = value;\n this.setValue(this.value);\n this.onInput(value);\n }\n\n private changeHandler(event: Event) {\n const value = (event.target as HTMLInputElement).value;\n\n this.dirty = true;\n this.value = value;\n this.setValue(this.value);\n this.onChange(value);\n }\n\n firstUpdated() {\n this.setValue(this.value);\n if (!this.icon) this.icon = inputTypeIcons[this.type];\n }\n\n protected async updated(changedProperties: PropertyValues) {\n if (changedProperties.size > 0) {\n this.setValue(this.value);\n\n await this.validationComplete;\n\n this.requestUpdate();\n }\n\n if (changedProperties.has(\"error\") && this.error && !this.dirty) {\n this.reportValidity();\n }\n }\n\n private inputId = Math.random().toString(36).substring(2);\n\n private get _hasIconSlot() {\n return this.querySelector(':scope > [slot=\"icon\"]') !== null;\n }\n\n render(): TemplateResult {\n const invalidMessage = !this.checkValidity()\n ? html`<p id=\"errorMessage\" aria-live=\"polite\" class=\"invalid-text\">\n ${this.validationMessage}\n </p>`\n : \"\";\n const helpMessage = this.helpText\n ? html`<p id=\"helpText\" class=\"help-text\">${this.helpText}</p>`\n : \"\";\n\n const icon = html`\n <slot name=\"icon\">\n ${this.loading && this.type === \"search\" && this.value !== \"\" && this.value !== null\n ? html`<bl-spinner></bl-spinner>`\n : this.icon\n ? html`<bl-icon name=\"${this.icon}\"></bl-icon>`\n : html`<bl-icon class=\"error-icon\" name=\"alert\"></bl-icon>`}\n </slot>\n `;\n\n const label = this.label ? html`<label for=${this.inputId}>${this.label}</label>` : \"\";\n const passwordInput = this.type === \"password\";\n\n const revealButton = passwordInput\n ? html`<bl-button\n size=\"small\"\n kind=\"neutral\"\n variant=\"tertiary\"\n class=\"${classMap({\n \"reveal-button\": true,\n \"password-visible\": this.passwordVisible,\n })}\"\n aria-label=\"Toggle password reveal\"\n @bl-click=\"${this.textVisibilityToggle}\"\n >\n <bl-icon class=\"reveal-icon\" slot=\"icon\" name=\"eye_on\"></bl-icon>\n <bl-icon class=\"reveal-icon\" slot=\"icon\" name=\"eye_off\"></bl-icon>\n </bl-button>`\n : \"\";\n\n const clearSearchButton =\n this.type === \"search\" && this.value !== \"\" && this.value !== null\n ? html`\n <bl-button\n size=\"small\"\n kind=\"neutral\"\n variant=\"tertiary\"\n aria-label=\"Clear search\"\n @bl-click=${this.handleSearchClear}\n >\n <bl-icon class=\"clear-icon\" slot=\"icon\" name=\"close\"></bl-icon>\n </bl-button>\n <div class=\"split-divider\"></div>\n `\n : \"\";\n\n const hasCustomIcon = this.icon || this._hasIconSlot;\n const classes = {\n \"wrapper\": true,\n \"dirty\": this.dirty,\n \"invalid\": !this.checkValidity(),\n \"has-icon\": passwordInput || hasCustomIcon || (this.dirty && !this.checkValidity()),\n \"has-value\": this.value !== null && this.value !== \"\",\n };\n\n const passwordType = this.passwordVisible ? \"text\" : \"password\";\n const inputType = passwordInput ? passwordType : this.type;\n\n return html`<div class=${classMap(classes)}>\n ${label}\n <fieldset class=\"input-wrapper\">\n <legend><span>${this.label}</span></legend>\n <input\n id=${this.inputId}\n type=${inputType}\n .value=${live(this.value)}\n inputmode=\"${ifDefined(this.inputmode)}\"\n ?autofocus=${this.autofocus}\n .autocomplete=\"${this.autocomplete}\"\n placeholder=\"${ifDefined(this.placeholder)}\"\n minlength=\"${ifDefined(this.minlength)}\"\n maxlength=\"${ifDefined(this.maxlength)}\"\n min=\"${ifDefined(this.min)}\"\n max=\"${ifDefined(this.max)}\"\n pattern=\"${ifDefined(this.pattern)}\"\n step=\"${ifDefined(this.step)}\"\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @change=${this.changeHandler}\n @input=${this.inputHandler}\n aria-invalid=${this.checkValidity() ? \"false\" : \"true\"}\n aria-describedby=${ifDefined(this.helpText ? \"helpText\" : undefined)}\n aria-errormessage=${ifDefined(this.checkValidity() ? undefined : \"errorMessage\")}\n />\n <div class=\"icon\">${revealButton} ${clearSearchButton} ${icon}</div>\n </fieldset>\n <div class=\"hint\">${invalidMessage} ${helpMessage}</div>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-input\": BlInput;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["styles", "i", "bl_input_default", "inputTypeIcons", "BlInput", "FormControlMixin", "s", "event", "submit", "bl_input_default", "value", "_a", "message", "msg", "changedProperties", "invalidMessage", "x", "helpMessage", "icon", "label", "passwordInput", "revealButton", "o", "clearSearchButton", "hasCustomIcon", "classes", "passwordType", "inputType", "l", "innerInputValidators", "__decorateClass", "i", "e", "t", "localized"]
|
|
7
|
-
}
|
package/dist/chunk-75V3FKJS.js
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import{b as y,c as g,d as D,e as H,f as $}from"./chunk-AYJMIZZ3.js";import{a as Y}from"./chunk-DINNT5P2.js";import{a as N,b as L,c as R}from"./chunk-7GK5LKBV.js";import{a as k,b as A,c as M,d as S}from"./chunk-5MOOXA2X.js";import{a as P,b as w,c as z,f as C}from"./chunk-4OT5AMS5.js";import{d as v}from"./chunk-IZ2LK5GK.js";var I=(s,f,t)=>{let o=new Map;for(let n=f;n<=t;n++)o.set(s[n],n);return o},V=L(class extends R{constructor(s){if(super(s),s.type!==N.CHILD)throw Error("repeat() can only be used in text expressions")}ct(s,f,t){let o;t===void 0?t=f:f!==void 0&&(o=f);let n=[],i=[],a=0;for(let c of s)n[a]=o?o(c,a):a,i[a]=t(c,a),a++;return{values:i,keys:n}}render(s,f,t){return this.ct(s,f,t).values}update(s,[f,t,o]){var n;let i=H(s),{values:a,keys:c}=this.ct(f,t,o);if(!Array.isArray(i))return this.ut=c,a;let p=(n=this.ut)!==null&&n!==void 0?n:this.ut=[],m=[],b,x,e=0,l=i.length-1,r=0,d=a.length-1;for(;e<=l&&r<=d;)if(i[e]===null)e++;else if(i[l]===null)l--;else if(p[e]===c[r])m[r]=g(i[e],a[r]),e++,r++;else if(p[l]===c[d])m[d]=g(i[l],a[d]),l--,d--;else if(p[e]===c[d])m[d]=g(i[e],a[d]),y(s,m[d+1],i[e]),e++,d--;else if(p[l]===c[r])m[r]=g(i[l],a[r]),y(s,i[e],i[l]),l--,r++;else if(b===void 0&&(b=I(c,r,d),x=I(p,e,l)),b.has(p[e]))if(b.has(p[l])){let h=x.get(c[r]),T=h!==void 0?i[h]:null;if(T===null){let E=y(s,i[e]);g(E,a[r]),m[r]=E}else m[r]=g(T,a[r]),y(s,i[e],T),i[h]=null;r++}else $(i[l]),l--;else $(i[e]),e++;for(;r<=d;){let h=y(s,m[d+1]);g(h,a[r]),m[r++]=h}for(;e<=l;){let h=i[e++];h!==null&&$(h)}return this.ut=c,D(s,m),z}});var X=P`:host{--bl-notification-width:396px;--bl-notification-gap:var(--bl-size-2xs);--bl-notification-animation-duration:0.3s}.wrapper{--margin:var(--bl-size-xl);display:flex;flex-direction:column-reverse;position:fixed;top:0;inset-inline-end:0;max-width:var(--bl-notification-width);margin:var(--margin);width:calc(100% - var(--margin) * 2);z-index:var(--bl-index-notification)}@media screen and (max-width: 480px){.wrapper{flex-direction:column;max-width:100%}}.notification{will-change:transform height margin;animation:slide-in-right var(--bl-notification-animation-duration) ease;margin-bottom:var(--bl-notification-gap);touch-action:none}:host(:has([dir="rtl"])) .notification{animation:slide-in-left var(--bl-notification-animation-duration) ease}.notification[data-slide="top"]{animation:slide-in-top var(--bl-notification-animation-duration) ease}:host([no-animation]) .notification{animation:none}.notification.removing{animation:slide-out-right var(--bl-notification-animation-duration) ease forwards,size-to-zero var(--bl-notification-animation-duration) ease var(--bl-notification-animation-duration) forwards}.notification[data-slide="top"].removing{animation:slide-out-top var(--bl-notification-animation-duration) ease forwards,size-to-zero var(--bl-notification-animation-duration) ease var(--bl-notification-animation-duration) forwards}:host([no-animation]) .notification.removing{animation:size-to-zero 0}@media (prefers-reduced-motion){.notification.removing{animation:size-to-zero 0}.notification{animation:none}}@keyframes slide-in-right{from{transform:translateX(var(--travel-distance, 10px));height:0;opacity:0;margin:0}}@keyframes slide-in-left{from{transform:translateX(var(--travel-distance, -10px));height:0;opacity:0;margin:0}}@keyframes slide-out-right{to{transform:translateX(var(--travel-distance, 10px));opacity:0}}@keyframes slide-in-top{from{transform:translateY(var(--travel-distance, -10px));height:0;opacity:0;margin:0}}@keyframes slide-out-top{to{transform:translateY(var(--travel-distance, -10px));opacity:0}}@keyframes size-to-zero{to{height:0;margin:0}}`,B=X;var G=-50,u=class extends C{constructor(){super(...arguments);this.noAnimation=!1;this.duration=7;this.notifications=[];this.touchStartY=0}static get styles(){return[B]}get notificationList(){return this.notifications}get touchStart(){return{y:this.touchStartY}}get isMobile(){return window.matchMedia("(max-width: 480px)").matches}addNotification(t){let o=Math.random().toString(36).substr(2,9),n={...t,id:o,duration:t.duration||this.duration,remove:()=>this.removeNotification(o)},i=[...this.notifications,n];return this.notifications=i,n}async removeNotification(t){return new Promise(o=>{var i;let n=(i=this.shadowRoot)==null?void 0:i.getElementById(t);if(!n){o(!1);return}n.style.height=`${n.clientHeight}px`,n.addEventListener("animationend",({animationName:a})=>{a==="size-to-zero"&&(this.notifications=this.notifications.filter(c=>c.id!==t),o(!0))}),n.classList.add("removing")})}handleTouchStart(t){this.isMobile&&(t.stopPropagation(),this.touchStartY=t.touches[0].clientY)}handleTouchMove(t){if(!this.isMobile)return;t.stopPropagation();let o=t.currentTarget,n=t.touches[0].clientY,i=Math.min(n-this.touchStartY,0);o.style.transform=`translateY(${i}px)`}handleTouchEnd(t){if(!this.isMobile)return;t.stopPropagation();let o=t.currentTarget,i=t.changedTouches[0].clientY-this.touchStartY;i<G?(o.style.setProperty("--travel-distance",`${i-10}px`),this.removeNotification(o.id)):(o.style.transition="transform 0.3s ease",o.style.transform="translateY(0px)",o.addEventListener("transitionend",()=>{o.style.transition="",o.style.transform=""})),this.touchStartY=0}renderActionSlot(t,o){let n=t==="primary-action"?o.primaryAction:o.secondaryAction;return!n||!n.label?"":w`<bl-button slot="${t}" @bl-click=${()=>n.onClick(o)}>
|
|
2
|
-
${n.label}
|
|
3
|
-
</bl-button>`}render(){return w`
|
|
4
|
-
<div class="wrapper">
|
|
5
|
-
${V(this.notifications,t=>t.id,t=>{let{caption:o,description:n,icon:i=!0,variant:a="info",id:c,duration:p=this.duration,permanent:m}=t,b=this.renderActionSlot("primary-action",t),x=this.renderActionSlot("secondary-action",t);return w`
|
|
6
|
-
<bl-notification-card
|
|
7
|
-
id="${c}"
|
|
8
|
-
class="notification"
|
|
9
|
-
data-slide=${this.isMobile?"top":"right"}
|
|
10
|
-
duration=${p}
|
|
11
|
-
caption="${Y(o)}"
|
|
12
|
-
icon=${i}
|
|
13
|
-
variant=${Y(a)}
|
|
14
|
-
?permanent=${m}
|
|
15
|
-
@bl-notification-card-request-close=${e=>{e.preventDefault(),this.removeNotification(c)}}
|
|
16
|
-
@touchstart=${this.handleTouchStart}
|
|
17
|
-
@touchmove=${this.handleTouchMove}
|
|
18
|
-
@touchend=${this.handleTouchEnd}
|
|
19
|
-
>
|
|
20
|
-
${n} ${b} ${x}
|
|
21
|
-
</bl-notification-card>
|
|
22
|
-
`})}
|
|
23
|
-
</div>
|
|
24
|
-
`}};v([A({type:Boolean,attribute:"no-animation",reflect:!0})],u.prototype,"noAnimation",2),v([A({type:Number})],u.prototype,"duration",2),v([M()],u.prototype,"notifications",2),v([S({passive:!0})],u.prototype,"handleTouchStart",1),v([S({passive:!0})],u.prototype,"handleTouchMove",1),v([S({passive:!0})],u.prototype,"handleTouchEnd",1),u=v([k("bl-notification")],u);export{G as a,u as b};
|
|
25
|
-
/*! Bundled license information:
|
|
26
|
-
|
|
27
|
-
lit-html/directives/repeat.js:
|
|
28
|
-
(**
|
|
29
|
-
* @license
|
|
30
|
-
* Copyright 2017 Google LLC
|
|
31
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
32
|
-
*)
|
|
33
|
-
*/
|
|
34
|
-
//# sourceMappingURL=chunk-75V3FKJS.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/utilities/elements.ts", "../src/components/popover/bl-popover.css", "../src/components/popover/bl-popover.ts"],
|
|
4
|
-
"sourcesContent": ["export function getMiddleOfElement(element: Element) {\n const { x, y, width, height } = element.getBoundingClientRect();\n\n return {\n x: Math.floor(x + window.pageXOffset + width / 2),\n y: Math.floor(y + window.pageYOffset + height / 2),\n };\n}\n\nexport function getTarget(value: string | Element): Element | null {\n if (typeof value === \"string\") {\n return document.getElementById(value) as Element;\n } else if (value instanceof Element) {\n return value;\n }\n\n return null;\n}\n", "import {css} from 'lit';\nexport const styles = css`:host{display:contents}.popover{--arrow-display:var(--bl-popover-arrow-display, none);--background-color:var(--bl-popover-background-color, var(--bl-color-neutral-full));--border-color:var(--bl-popover-border-color, var(--bl-color-primary-highlight));--border-size:var(--bl-popover-border-size, 1px);--padding:var(--bl-popover-padding, var(--bl-size-m));--border-radius:var(--bl-popover-border-radius, var(--bl-size-3xs));--position:var(--bl-popover-position, fixed);--max-width:var(--bl-popover-max-width, 100vw);--max-viewport:calc(100vw - var(--bl-size-s));position:var(--position);box-sizing:border-box;border:var(--border-size) solid var(--border-color);padding:var(--padding);border-radius:var(--border-radius);z-index:var(--bl-index-popover);max-width:min(var(--max-viewport), var(--max-width));width:max-content;hyphens:auto;background-color:var(--background-color);font:var(--bl-font-title-3-regular);color:var(--bl-color-neutral-darker)}.popover:not(.visible){visibility:hidden}.arrow{--arrow-rotation:45deg;--size:var(--bl-size-2xs);--arrow-position:calc((var(--size) / -2) - var(--border-size));box-sizing:border-box;display:var(--arrow-display);position:absolute;background-color:var(--background-color);width:var(--size);height:var(--size);transform:rotate(var(--arrow-rotation));border:var(--border-size) solid var(--border-color);border-bottom:none;border-inline-end:none}.popover[data-placement*=\"bottom\"] .arrow{top:var(--arrow-position)}.popover[data-placement*=\"top\"] .arrow{--arrow-rotation:225deg;bottom:var(--arrow-position)}.popover[data-placement*=\"left\"] .arrow{--arrow-rotation:135deg;right:var(--arrow-position)}.popover[data-placement*=\"right\"] .arrow{--arrow-rotation:315deg;left:var(--arrow-position)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n inline,\n Middleware,\n MiddlewareState,\n offset,\n shift,\n size,\n} from \"@floating-ui/dom\";\nimport { getTarget } from \"../../utilities/elements\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport style from \"./bl-popover.css\";\n\nexport type Placement =\n | \"top-start\"\n | \"top\"\n | \"top-end\"\n | \"bottom-start\"\n | \"bottom\"\n | \"bottom-end\"\n | \"left-start\"\n | \"left\"\n | \"left-end\"\n | \"right-start\"\n | \"right\"\n | \"right-end\";\n\n/**\n * @tag bl-popover\n * @summary Baklava Popover component\n *\n * @cssproperty [--bl-popover-arrow-display=none] - Sets the display of popovers arrow. Set as `block` to make arrow visible.\n * @cssproperty [--bl-popover-background-color=--bl-color-neutral-full] - Sets the background color of popover.\n * @cssproperty [--bl-popover-border-color=--bl-color-primary-highlight] - Sets the border color of popover.\n * @cssproperty [--bl-popover-border-size=1px] - Sets the border size of popover. You can set it to `0px` to not have a border (if you use a custom background color). Always use with a length unit.\n * @cssproperty [--bl-popover-padding=--bl-size-m] - Sets the padding of popover.\n * @cssproperty [--bl-popbover-border-radius=--bl-size-3xs] - Sets the border radius of popover.\n * @cssproperty [--bl-popover-max-width=100vw] - Sets the maximum width of the popover (including border and padding).\n * @cssproperty [--bl-popover-position=fixed] - Sets the position of popover. You can set it to `absolute` if parent element is a fixed positioned element like drawer or dialog.\n */\n@customElement(\"bl-popover\")\nexport default class BlPopover extends LitElement {\n /**\n * Sets placement of the popover\n */\n @property({ type: String })\n placement: Placement = \"bottom\";\n /**\n * Sets size of popover same as trigger element\n */\n @property({ type: Boolean, attribute: \"fit-size\" })\n fitSize = false;\n /**\n * Sets the distance between popover and target/trigger element\n */\n @property({ type: Number })\n offset = 8;\n @query(\".popover\") private _popover: HTMLElement;\n @query(\".arrow\") private arrow: HTMLElement;\n /**\n * Fires when the popover is shown\n */\n @event(\"bl-popover-show\") private onBlPopoverShow: EventDispatcher<string>;\n /**\n * Fires when popover becomes hidden\n */\n @event(\"bl-popover-hide\") private onBlPopoverHide: EventDispatcher<string>;\n private popoverAutoUpdateCleanup: () => void;\n\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Target elements state\n */\n @state() _target: string | Element;\n\n /**\n * Sets the target element of the popover to align and trigger.\n * It can be a string id of the target element or can be a direct Element reference of it.\n */\n @property()\n get target(): string | Element {\n return this._target;\n }\n\n set target(value: string | Element) {\n const target = getTarget(value);\n\n if (!target) {\n console.warn(\n \"BlPopover target only accepts an Element instance or a string id of a DOM element.\"\n );\n return;\n }\n\n this._target = target;\n }\n\n /**\n * Visibility state\n */\n @state() private _visible = false;\n\n /**\n * Gives the visibility status of the popover\n */\n get visible(): boolean {\n return this._visible;\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._handlePopoverShowEvent = this._handlePopoverShowEvent.bind(this);\n this._handleKeydownEvent = this._handleKeydownEvent.bind(this);\n this._handleClickOutside = this._handleClickOutside.bind(this);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.popoverAutoUpdateCleanup && this.popoverAutoUpdateCleanup();\n }\n\n /**\n * Shows popover\n */\n show() {\n this._visible = true;\n\n this.setPopover();\n this.onBlPopoverShow(\"\");\n document.addEventListener(\"click\", this._handleClickOutside);\n document.addEventListener(\"keydown\", this._handleKeydownEvent);\n document.addEventListener(\"bl-popover-show\", this._handlePopoverShowEvent);\n }\n\n /**\n * Hides popover\n */\n hide() {\n this._visible = false;\n document.removeEventListener(\"click\", this._handleClickOutside);\n document.removeEventListener(\"keydown\", this._handleKeydownEvent);\n document.removeEventListener(\"bl-popover-show\", this._handlePopoverShowEvent);\n this.onBlPopoverHide(\"\", { bubbles: false });\n }\n\n render(): TemplateResult {\n const classes = classMap({\n popover: true,\n visible: this._visible,\n });\n\n return html` <div class=${classes}>\n <slot id=\"popover\" aria-live=${this._visible ? \"polite\" : \"off\"}></slot>\n <div class=\"arrow\" aria-hidden=\"true\"></div>\n </div>`;\n }\n\n private getMiddleware(): Middleware[] {\n const middlewareParams: Middleware[] = [];\n\n middlewareParams.push(offset(this.offset), inline(), flip(), shift({ padding: 4 }));\n\n if (this.fitSize) {\n middlewareParams.push(\n size({\n apply(args: MiddlewareState) {\n if (args.elements.floating && args.elements.reference) {\n Object.assign(args.elements.floating.style, {\n \"min-width\": `${args.elements.reference.getBoundingClientRect().width}px`,\n });\n }\n },\n })\n );\n }\n\n middlewareParams.push(arrow({ element: this.arrow, padding: 5 }));\n\n return middlewareParams;\n }\n\n private _handleClickOutside = (event: MouseEvent) => {\n const eventPath = event.composedPath() as HTMLElement[];\n\n if (!eventPath.includes(this._target as HTMLElement) && !eventPath.includes(this)) {\n this.hide();\n }\n };\n\n private setPopover() {\n if (this.target) {\n this.popoverAutoUpdateCleanup = autoUpdate(this.target as Element, this._popover, () => {\n computePosition(this.target as Element, this._popover, {\n placement: this.placement,\n strategy: \"fixed\",\n middleware: this.getMiddleware(),\n }).then(({ x, y, placement, middlewareData }) => {\n Object.assign(this._popover.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n this._popover.dataset.placement = placement;\n\n if (middlewareData.arrow) {\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n Object.assign(this.arrow.style, {\n left: arrowX != null ? `${arrowX}px` : \"\",\n top: arrowY != null ? `${arrowY}px` : \"\",\n });\n }\n });\n });\n }\n }\n\n private _handlePopoverShowEvent(event: Event) {\n if (event.target !== this) {\n const { parentElement } = event.target as HTMLElement;\n const isNestedPopover = this.contains(parentElement);\n\n if (!isNestedPopover && (event.target as HTMLElement).tagName === this.tagName) {\n this.hide();\n }\n }\n }\n\n private _handleKeydownEvent(event: KeyboardEvent) {\n if (event.key === \"Escape\" && this.visible) {\n event.preventDefault();\n this.hide();\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-popover\": BlPopover;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["getTarget", "value", "styles", "i", "bl_popover_default", "BlPopover", "s", "event", "eventPath", "bl_popover_default", "value", "target", "getTarget", "classes", "o", "x", "middlewareParams", "offset", "inline", "flip", "shift", "size", "args", "arrow", "autoUpdate", "computePosition", "y", "placement", "middlewareData", "arrowX", "arrowY", "parentElement", "__decorateClass", "e", "i", "t"]
|
|
7
|
-
}
|