@dodlhuat/basix 1.2.8 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # Basix 1.2.9
1
+ # Basix 1.3.0
2
2
 
3
3
  Basix is intended as a starter for the rapid development of a design. Each design element can be added individually to
4
4
  include only the data required. It is using plain javascript / typescript and therefore is not dependent on any plugin.
package/package.json CHANGED
@@ -1,16 +1,17 @@
1
1
  {
2
2
  "name": "@dodlhuat/basix",
3
- "version": "1.2.8",
3
+ "version": "1.3.0",
4
4
  "description": "Basix is intended as a starter for the rapid development of a design. Each design element can be added individually to include only the data required. It is using plain javascript / typescript and therefore is not dependent on any plugin.",
5
5
  "exports": {
6
6
  "./css/*": "./css/*",
7
- "./js/*": "./js/*"
7
+ "./js/*": "./js/*",
8
+ "./svg-icons/*": "./svg-icons/*"
8
9
  },
9
10
  "files": [
10
11
  "js/",
11
12
  "css/",
12
13
  "fonts/",
13
- "icons/"
14
+ "svg-icons/"
14
15
  ],
15
16
  "keywords": [
16
17
  "ui",
@@ -0,0 +1,284 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
2
+ <symbol id="add" viewBox="0 -960 960 960">
3
+ <path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/>
4
+ </symbol>
5
+ <symbol id="add_circle" viewBox="0 -960 960 960">
6
+ <path d="M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
7
+ </symbol>
8
+ <symbol id="add_photo_alternate" viewBox="0 -960 960 960">
9
+ <path d="M480-480ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h320v80H200v560h560v-320h80v320q0 33-23.5 56.5T760-120H200Zm40-160h480L570-480 450-320l-90-120-120 160Zm440-320v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z"/>
10
+ </symbol>
11
+ <symbol id="arrow_back" viewBox="0 -960 960 960">
12
+ <path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/>
13
+ </symbol>
14
+ <symbol id="arrow_circle_right" viewBox="0 -960 960 960">
15
+ <path d="m480-320 160-160-160-160-56 56 64 64H320v80h168l-64 64 56 56Zm0 240q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
16
+ </symbol>
17
+ <symbol id="arrow_downward" viewBox="0 -960 960 960">
18
+ <path d="M440-800v487L216-537l-56 57 320 320 320-320-56-57-224 224v-487h-80Z"/>
19
+ </symbol>
20
+ <symbol id="arrow_drop_down" viewBox="0 -960 960 960">
21
+ <path d="M480-360 280-560h400L480-360Z"/>
22
+ </symbol>
23
+ <symbol id="arrow_forward" viewBox="0 -960 960 960">
24
+ <path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/>
25
+ </symbol>
26
+ <symbol id="attachment" viewBox="0 -960 960 960">
27
+ <path d="M330-240q-104 0-177-73T80-490q0-104 73-177t177-73h370q75 0 127.5 52.5T880-560q0 75-52.5 127.5T700-380H350q-46 0-78-32t-32-78q0-46 32-78t78-32h370v80H350q-13 0-21.5 8.5T320-490q0 13 8.5 21.5T350-460h350q42-1 71-29.5t29-70.5q0-42-29-71t-71-29H330q-71-1-120.5 49T160-490q0 70 49.5 119T330-320h390v80H330Z"/>
28
+ </symbol>
29
+ <symbol id="autorenew" viewBox="0 -960 960 960">
30
+ <path d="M204-318q-22-38-33-78t-11-82q0-134 93-228t227-94h7l-64-64 56-56 160 160-160 160-56-56 64-64h-7q-100 0-170 70.5T240-478q0 26 6 51t18 49l-60 60ZM481-40 321-200l160-160 56 56-64 64h7q100 0 170-70.5T720-482q0-26-6-51t-18-49l60-60q22 38 33 78t11 82q0 134-93 228t-227 94h-7l64 64-56 56Z"/>
31
+ </symbol>
32
+ <symbol id="backspace" viewBox="0 -960 960 960">
33
+ <path d="m456-320 104-104 104 104 56-56-104-104 104-104-56-56-104 104-104-104-56 56 104 104-104 104 56 56Zm-96 160q-19 0-36-8.5T296-192L80-480l216-288q11-15 28-23.5t36-8.5h440q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H360ZM180-480l180 240h440v-480H360L180-480Zm400 0Z"/>
34
+ </symbol>
35
+ <symbol id="bedtime" viewBox="0 -960 960 960">
36
+ <path d="M484-80q-84 0-157.5-32t-128-86.5Q144-253 112-326.5T80-484q0-146 93-257.5T410-880q-18 99 11 193.5T521-521q71 71 165.5 100T880-410q-26 144-138 237T484-80Zm0-80q88 0 163-44t118-121q-86-8-163-43.5T464-465q-61-61-97-138t-43-163q-77 43-120.5 118.5T160-484q0 135 94.5 229.5T484-160Zm-20-305Z"/>
37
+ </symbol>
38
+ <symbol id="block" viewBox="0 -960 960 960">
39
+ <path d="M324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM480-160q54 0 104-17.5t92-50.5L228-676q-33 42-50.5 92T160-480q0 134 93 227t227 93Zm252-124q33-42 50.5-92T800-480q0-134-93-227t-227-93q-54 0-104 17.5T284-732l448 448ZM480-480Z"/>
40
+ </symbol>
41
+ <symbol id="calendar_month" viewBox="0 -960 960 960">
42
+ <path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-188.5-11.5Q280-423 280-440t11.5-28.5Q303-480 320-480t28.5 11.5Q360-457 360-440t-11.5 28.5Q337-400 320-400t-28.5-11.5ZM640-400q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-188.5-11.5Q280-263 280-280t11.5-28.5Q303-320 320-320t28.5 11.5Q360-297 360-280t-11.5 28.5Q337-240 320-240t-28.5-11.5ZM640-240q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"/>
43
+ </symbol>
44
+ <symbol id="cancel" viewBox="0 -960 960 960">
45
+ <path d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
46
+ </symbol>
47
+ <symbol id="check" viewBox="0 -960 960 960">
48
+ <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/>
49
+ </symbol>
50
+ <symbol id="check_circle" viewBox="0 -960 960 960">
51
+ <path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
52
+ </symbol>
53
+ <symbol id="chevron_left" viewBox="0 -960 960 960">
54
+ <path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/>
55
+ </symbol>
56
+ <symbol id="chevron_right" viewBox="0 -960 960 960">
57
+ <path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/>
58
+ </symbol>
59
+ <symbol id="clear_day" viewBox="0 -960 960 960">
60
+ <path d="M440-760v-160h80v160h-80Zm266 110-55-55 112-115 56 57-113 113Zm54 210v-80h160v80H760ZM440-40v-160h80v160h-80ZM254-652 140-763l57-56 113 113-56 54Zm508 512L651-255l54-54 114 110-57 59ZM40-440v-80h160v80H40Zm157 300-56-57 112-112 29 27 29 28-114 114Zm113-170q-70-70-70-170t70-170q70-70 170-70t170 70q70 70 70 170t-70 170q-70 70-170 70t-170-70Zm283-57q47-47 47-113t-47-113q-47-47-113-47t-113 47q-47 47-47 113t47 113q47 47 113 47t113-47ZM480-480Z"/>
61
+ </symbol>
62
+ <symbol id="clock_loader_10" viewBox="0 -960 960 960">
63
+ <path d="M324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM707-253q93-93 93-227 0-64-24-123t-69-104L480-480v-320q-134 0-227 93t-93 227q0 134 93 227t227 93q134 0 227-93Z"/>
64
+ </symbol>
65
+ <symbol id="clock_loader_20" viewBox="0 -960 960 960">
66
+ <path d="M324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM707-253q93-93 93-227H480v-320q-134 0-227 93t-93 227q0 134 93 227t227 93q134 0 227-93Z"/>
67
+ </symbol>
68
+ <symbol id="clock_loader_40" viewBox="0 -960 960 960">
69
+ <path d="M324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM480-160q64 0 123-24t104-69L480-480v-320q-134 0-227 93t-93 227q0 134 93 227t227 93Z"/>
70
+ </symbol>
71
+ <symbol id="clock_loader_60" viewBox="0 -960 960 960">
72
+ <path d="M324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM253-253l227-227v-320q-134 0-227 93t-93 227q0 64 24 123t69 104Z"/>
73
+ </symbol>
74
+ <symbol id="clock_loader_80" viewBox="0 -960 960 960">
75
+ <path d="M324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM160-480h320v-320q-134 0-227 93t-93 227Z"/>
76
+ </symbol>
77
+ <symbol id="clock_loader_90" viewBox="0 -960 960 960">
78
+ <path d="M324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM253-707l227 227v-320q-64 0-123 24t-104 69Z"/>
79
+ </symbol>
80
+ <symbol id="close" viewBox="0 -960 960 960">
81
+ <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/>
82
+ </symbol>
83
+ <symbol id="code" viewBox="0 -960 960 960">
84
+ <path d="M320-240 80-480l240-240 57 57-184 184 183 183-56 56Zm320 0-57-57 184-184-183-183 56-56 240 240-240 240Z"/>
85
+ </symbol>
86
+ <symbol id="create_new_folder" viewBox="0 -960 960 960">
87
+ <path d="M560-320h80v-80h80v-80h-80v-80h-80v80h-80v80h80v80ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"/>
88
+ </symbol>
89
+ <symbol id="delete" viewBox="0 -960 960 960">
90
+ <path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/>
91
+ </symbol>
92
+ <symbol id="delete_forever" viewBox="0 -960 960 960">
93
+ <path d="m376-300 104-104 104 104 56-56-104-104 104-104-56-56-104 104-104-104-56 56 104 104-104 104 56 56Zm-96 180q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520Zm-400 0v520-520Z"/>
94
+ </symbol>
95
+ <symbol id="do_not_disturb_on" viewBox="0 -960 960 960">
96
+ <path d="M280-440h400v-80H280v80ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
97
+ </symbol>
98
+ <symbol id="download" viewBox="0 -960 960 960">
99
+ <path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/>
100
+ </symbol>
101
+ <symbol id="drafts" viewBox="0 -960 960 960">
102
+ <path d="m480-920 362 216q18 11 28 30t10 40v434q0 33-23.5 56.5T800-120H160q-33 0-56.5-23.5T80-200v-434q0-21 10-40t28-30l362-216Zm0 466 312-186-312-186-312 186 312 186Zm0 94L160-552v352h640v-352L480-360Zm0 160h320-640 320Z"/>
103
+ </symbol>
104
+ <symbol id="drag_indicator" viewBox="0 -960 960 960">
105
+ <path d="M360-160q-33 0-56.5-23.5T280-240q0-33 23.5-56.5T360-320q33 0 56.5 23.5T440-240q0 33-23.5 56.5T360-160Zm240 0q-33 0-56.5-23.5T520-240q0-33 23.5-56.5T600-320q33 0 56.5 23.5T680-240q0 33-23.5 56.5T600-160ZM360-400q-33 0-56.5-23.5T280-480q0-33 23.5-56.5T360-560q33 0 56.5 23.5T440-480q0 33-23.5 56.5T360-400Zm240 0q-33 0-56.5-23.5T520-480q0-33 23.5-56.5T600-560q33 0 56.5 23.5T680-480q0 33-23.5 56.5T600-400ZM360-640q-33 0-56.5-23.5T280-720q0-33 23.5-56.5T360-800q33 0 56.5 23.5T440-720q0 33-23.5 56.5T360-640Zm240 0q-33 0-56.5-23.5T520-720q0-33 23.5-56.5T600-800q33 0 56.5 23.5T680-720q0 33-23.5 56.5T600-640Z"/>
106
+ </symbol>
107
+ <symbol id="edit" viewBox="0 -960 960 960">
108
+ <path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"/>
109
+ </symbol>
110
+ <symbol id="event" viewBox="0 -960 960 960">
111
+ <path d="M509-269q-29-29-29-71t29-71q29-29 71-29t71 29q29 29 29 71t-29 71q-29 29-71 29t-71-29ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z"/>
112
+ </symbol>
113
+ <symbol id="expand_circle_down" viewBox="0 -960 960 960">
114
+ <path d="m480-340 180-180-57-56-123 123-123-123-57 56 180 180Zm0 260q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
115
+ </symbol>
116
+ <symbol id="favorite" viewBox="0 -960 960 960">
117
+ <path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"/>
118
+ </symbol>
119
+ <symbol id="filter_alt" viewBox="0 -960 960 960">
120
+ <path d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/>
121
+ </symbol>
122
+ <symbol id="filter_list" viewBox="0 -960 960 960">
123
+ <path d="M400-240v-80h160v80H400ZM240-440v-80h480v80H240ZM120-640v-80h720v80H120Z"/>
124
+ </symbol>
125
+ <symbol id="format_align_center" viewBox="0 -960 960 960">
126
+ <path d="M120-120v-80h720v80H120Zm160-160v-80h400v80H280ZM120-440v-80h720v80H120Zm160-160v-80h400v80H280ZM120-760v-80h720v80H120Z"/>
127
+ </symbol>
128
+ <symbol id="format_align_left" viewBox="0 -960 960 960">
129
+ <path d="M120-120v-80h720v80H120Zm0-160v-80h480v80H120Zm0-160v-80h720v80H120Zm0-160v-80h480v80H120Zm0-160v-80h720v80H120Z"/>
130
+ </symbol>
131
+ <symbol id="format_align_right" viewBox="0 -960 960 960">
132
+ <path d="M120-760v-80h720v80H120Zm240 160v-80h480v80H360ZM120-440v-80h720v80H120Zm240 160v-80h480v80H360ZM120-120v-80h720v80H120Z"/>
133
+ </symbol>
134
+ <symbol id="format_bold" viewBox="0 -960 960 960">
135
+ <path d="M272-200v-560h221q65 0 120 40t55 111q0 51-23 78.5T602-491q25 11 55.5 41t30.5 90q0 89-65 124.5T501-200H272Zm121-112h104q48 0 58.5-24.5T566-372q0-11-10.5-35.5T494-432H393v120Zm0-228h93q33 0 48-17t15-38q0-24-17-39t-44-15h-95v109Z"/>
136
+ </symbol>
137
+ <symbol id="format_color_text" viewBox="0 -960 960 960">
138
+ <path d="M80 0v-160h800V0H80Zm140-280 210-560h100l210 560h-96l-50-144H368l-52 144h-96Zm176-224h168l-82-232h-4l-82 232Z"/>
139
+ </symbol>
140
+ <symbol id="format_italic" viewBox="0 -960 960 960">
141
+ <path d="M200-200v-100h160l120-360H320v-100h400v100H580L460-300h140v100H200Z"/>
142
+ </symbol>
143
+ <symbol id="format_list_bulleted" viewBox="0 -960 960 960">
144
+ <path d="M360-200v-80h480v80H360Zm0-240v-80h480v80H360Zm0-240v-80h480v80H360ZM200-160q-33 0-56.5-23.5T120-240q0-33 23.5-56.5T200-320q33 0 56.5 23.5T280-240q0 33-23.5 56.5T200-160Zm0-240q-33 0-56.5-23.5T120-480q0-33 23.5-56.5T200-560q33 0 56.5 23.5T280-480q0 33-23.5 56.5T200-400Zm-56.5-263.5Q120-687 120-720t23.5-56.5Q167-800 200-800t56.5 23.5Q280-753 280-720t-23.5 56.5Q233-640 200-640t-56.5-23.5Z"/>
145
+ </symbol>
146
+ <symbol id="format_list_numbered" viewBox="0 -960 960 960">
147
+ <path d="M120-80v-60h100v-30h-60v-60h60v-30H120v-60h120q17 0 28.5 11.5T280-280v40q0 17-11.5 28.5T240-200q17 0 28.5 11.5T280-160v40q0 17-11.5 28.5T240-80H120Zm0-280v-110q0-17 11.5-28.5T160-510h60v-30H120v-60h120q17 0 28.5 11.5T280-560v70q0 17-11.5 28.5T240-450h-60v30h100v60H120Zm60-280v-180h-60v-60h120v240h-60Zm180 440v-80h480v80H360Zm0-240v-80h480v80H360Zm0-240v-80h480v80H360Z"/>
148
+ </symbol>
149
+ <symbol id="format_size" viewBox="0 -960 960 960">
150
+ <path d="M560-160v-520H360v-120h520v120H680v520H560Zm-360 0v-320H80v-120h360v120H320v320H200Z"/>
151
+ </symbol>
152
+ <symbol id="format_strikethrough" viewBox="0 -960 960 960">
153
+ <path d="M80-400v-80h800v80H80Zm340-160v-120H200v-120h560v120H540v120H420Zm0 400v-160h120v160H420Z"/>
154
+ </symbol>
155
+ <symbol id="format_underlined" viewBox="0 -960 960 960">
156
+ <path d="M200-120v-80h560v80H200Zm123-223q-56-63-56-167v-330h103v336q0 56 28 91t82 35q54 0 82-35t28-91v-336h103v330q0 104-56 167t-157 63q-101 0-157-63Z"/>
157
+ </symbol>
158
+ <symbol id="fullscreen" viewBox="0 -960 960 960">
159
+ <path d="M120-120v-200h80v120h120v80H120Zm520 0v-80h120v-120h80v200H640ZM120-640v-200h200v80H200v120h-80Zm640 0v-120H640v-80h200v200h-80Z"/>
160
+ </symbol>
161
+ <symbol id="home" viewBox="0 -960 960 960">
162
+ <path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/>
163
+ </symbol>
164
+ <symbol id="image" viewBox="0 -960 960 960">
165
+ <path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/>
166
+ </symbol>
167
+ <symbol id="key" viewBox="0 -960 960 960">
168
+ <path d="M223.5-423.5Q200-447 200-480t23.5-56.5Q247-560 280-560t56.5 23.5Q360-513 360-480t-23.5 56.5Q313-400 280-400t-56.5-23.5ZM280-240q-100 0-170-70T40-480q0-100 70-170t170-70q67 0 121.5 33t86.5 87h352l120 120-180 180-80-60-80 60-85-60h-47q-32 54-86.5 87T280-240Zm0-80q56 0 98.5-34t56.5-86h125l58 41 82-61 71 55 75-75-40-40H435q-14-52-56.5-86T280-640q-66 0-113 47t-47 113q0 66 47 113t113 47Z"/>
169
+ </symbol>
170
+ <symbol id="library_add" viewBox="0 -960 960 960">
171
+ <path d="M520-400h80v-120h120v-80H600v-120h-80v120H400v80h120v120ZM320-240q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320Zm0-80h480v-480H320v480ZM160-80q-33 0-56.5-23.5T80-160v-560h80v560h560v80H160Zm160-720v480-480Z"/>
172
+ </symbol>
173
+ <symbol id="link" viewBox="0 -960 960 960">
174
+ <path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z"/>
175
+ </symbol>
176
+ <symbol id="list" viewBox="0 -960 960 960">
177
+ <path d="M280-600v-80h560v80H280Zm0 160v-80h560v80H280Zm0 160v-80h560v80H280ZM160-600q-17 0-28.5-11.5T120-640q0-17 11.5-28.5T160-680q17 0 28.5 11.5T200-640q0 17-11.5 28.5T160-600Zm0 160q-17 0-28.5-11.5T120-480q0-17 11.5-28.5T160-520q17 0 28.5 11.5T200-480q0 17-11.5 28.5T160-440Zm0 160q-17 0-28.5-11.5T120-320q0-17 11.5-28.5T160-360q17 0 28.5 11.5T200-320q0 17-11.5 28.5T160-280Z"/>
178
+ </symbol>
179
+ <symbol id="login" viewBox="0 -960 960 960">
180
+ <path d="M480-120v-80h280v-560H480v-80h280q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H480Zm-80-160-55-58 102-102H120v-80h327L345-622l55-58 200 200-200 200Z"/>
181
+ </symbol>
182
+ <symbol id="logout" viewBox="0 -960 960 960">
183
+ <path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h280v80H200Zm440-160-55-58 102-102H360v-80h327L585-622l55-58 200 200-200 200Z"/>
184
+ </symbol>
185
+ <symbol id="mail" viewBox="0 -960 960 960">
186
+ <path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/>
187
+ </symbol>
188
+ <symbol id="manage_search" viewBox="0 -960 960 960">
189
+ <path d="M80-200v-80h400v80H80Zm0-200v-80h200v80H80Zm0-200v-80h200v80H80Zm744 400L670-354q-24 17-52.5 25.5T560-320q-83 0-141.5-58.5T360-520q0-83 58.5-141.5T560-720q83 0 141.5 58.5T760-520q0 29-8.5 57.5T726-410l154 154-56 56ZM560-400q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Z"/>
190
+ </symbol>
191
+ <symbol id="menu" viewBox="0 -960 960 960">
192
+ <path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/>
193
+ </symbol>
194
+ <symbol id="menu_open" viewBox="0 -960 960 960">
195
+ <path d="M120-240v-80h520v80H120Zm664-40L584-480l200-200 56 56-144 144 144 144-56 56ZM120-440v-80h400v80H120Zm0-200v-80h520v80H120Z"/>
196
+ </symbol>
197
+ <symbol id="minimize" viewBox="0 -960 960 960">
198
+ <path d="M240-120v-80h480v80H240Z"/>
199
+ </symbol>
200
+ <symbol id="more_horiz" viewBox="0 -960 960 960">
201
+ <path d="M240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400Z"/>
202
+ </symbol>
203
+ <symbol id="more_vert" viewBox="0 -960 960 960">
204
+ <path d="M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z"/>
205
+ </symbol>
206
+ <symbol id="open_in_full" viewBox="0 -960 960 960">
207
+ <path d="M120-120v-320h80v184l504-504H520v-80h320v320h-80v-184L256-200h184v80H120Z"/>
208
+ </symbol>
209
+ <symbol id="person_edit" viewBox="0 -960 960 960">
210
+ <path d="M480-240Zm-320 80v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q37 0 73 4.5t72 14.5l-67 68q-20-3-39-5t-39-2q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32h240v80H160Zm400 40v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T903-340L683-120H560Zm300-263-37-37 37 37ZM620-180h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19ZM367-527q-47-47-47-113t47-113q47-47 113-47t113 47q47 47 47 113t-47 113q-47 47-113 47t-113-47Zm169.5-56.5Q560-607 560-640t-23.5-56.5Q513-720 480-720t-56.5 23.5Q400-673 400-640t23.5 56.5Q447-560 480-560t56.5-23.5ZM480-640Z"/>
211
+ </symbol>
212
+ <symbol id="person_search" viewBox="0 -960 960 960">
213
+ <path d="M440-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm0-80q33 0 56.5-23.5T520-640q0-33-23.5-56.5T440-720q-33 0-56.5 23.5T360-640q0 33 23.5 56.5T440-560ZM884-20 756-148q-21 12-45 20t-51 8q-75 0-127.5-52.5T480-300q0-75 52.5-127.5T660-480q75 0 127.5 52.5T840-300q0 27-8 51t-20 45L940-76l-56 56ZM731-229q29-29 29-71t-29-71q-29-29-71-29t-71 29q-29 29-29 71t29 71q29 29 71 29t71-29Zm-611 69v-111q0-34 17-63t47-44q51-26 115-44t142-18q-12 18-20.5 38.5T407-359q-60 5-107 20.5T221-306q-10 5-15.5 14.5T200-271v31h207q5 22 13.5 42t20.5 38H120Zm320-480Zm-33 400Z"/>
214
+ </symbol>
215
+ <symbol id="redo" viewBox="0 -960 960 960">
216
+ <path d="M396-200q-97 0-166.5-63T160-420q0-94 69.5-157T396-640h252L544-744l56-56 200 200-200 200-56-56 104-104H396q-63 0-109.5 40T240-420q0 60 46.5 100T396-280h284v80H396Z"/>
217
+ </symbol>
218
+ <symbol id="refresh" viewBox="0 -960 960 960">
219
+ <path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/>
220
+ </symbol>
221
+ <symbol id="remove" viewBox="0 -960 960 960">
222
+ <path d="M200-440v-80h560v80H200Z"/>
223
+ </symbol>
224
+ <symbol id="reply" viewBox="0 -960 960 960">
225
+ <path d="M760-200v-160q0-50-35-85t-85-35H273l144 144-57 56-240-240 240-240 57 56-144 144h367q83 0 141.5 58.5T840-360v160h-80Z"/>
226
+ </symbol>
227
+ <symbol id="schedule" viewBox="0 -960 960 960">
228
+ <path d="m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z"/>
229
+ </symbol>
230
+ <symbol id="search" viewBox="0 -960 960 960">
231
+ <path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
232
+ </symbol>
233
+ <symbol id="send" viewBox="0 -960 960 960">
234
+ <path d="M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z"/>
235
+ </symbol>
236
+ <symbol id="settings" viewBox="0 -960 960 960">
237
+ <path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/>
238
+ </symbol>
239
+ <symbol id="sort" viewBox="0 -960 960 960">
240
+ <path d="M120-240v-80h240v80H120Zm0-200v-80h480v80H120Zm0-200v-80h720v80H120Z"/>
241
+ </symbol>
242
+ <symbol id="stacks" viewBox="0 -960 960 960">
243
+ <path d="M480-400 40-640l440-240 440 240-440 240Zm0 160L63-467l84-46 333 182 333-182 84 46-417 227Zm0 160L63-307l84-46 333 182 333-182 84 46L480-80Zm0-411 273-149-273-149-273 149 273 149Zm0-149Z"/>
244
+ </symbol>
245
+ <symbol id="star" viewBox="0 -960 960 960">
246
+ <path d="m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143ZM233-120l65-281L80-590l288-25 112-265 112 265 288 25-218 189 65 281-247-149-247 149Zm247-350Z"/>
247
+ </symbol>
248
+ <symbol id="support" viewBox="0 -960 960 960">
249
+ <path d="M324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5Zm40-70.5 48-110q-42-15-72.5-46.5T292-412l-110 46q23 64 71 112t111 72Zm-72-366q17-42 47.5-73.5T412-668l-46-110q-64 24-112 72t-72 112l110 46Zm273 153q35-35 35-85t-35-85q-35-35-85-35t-85 35q-35 35-35 85t35 85q35 35 85 35t85-35Zm31 213q63-24 110.5-71.5T778-364l-110-48q-15 42-46 72.5T550-292l46 110Zm72-368 110-46q-24-63-71.5-110.5T596-778l-46 112q41 15 71 45.5t47 70.5Z"/>
250
+ </symbol>
251
+ <symbol id="sync_saved_locally" viewBox="0 -960 960 960">
252
+ <path d="m437-398 227-226-57-57-170 170-85-85-56 56 141 142ZM40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/>
253
+ </symbol>
254
+ <symbol id="table" viewBox="0 -960 960 960">
255
+ <path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm240-240H200v160h240v-160Zm80 0v160h240v-160H520Zm-80-80v-160H200v160h240Zm80 0h240v-160H520v160ZM200-680h560v-80H200v80Z"/>
256
+ </symbol>
257
+ <symbol id="tune" viewBox="0 -960 960 960">
258
+ <path d="M440-120v-240h80v80h320v80H520v80h-80Zm-320-80v-80h240v80H120Zm160-160v-80H120v-80h160v-80h80v240h-80Zm160-80v-80h400v80H440Zm160-160v-240h80v80h160v80H680v80h-80Zm-480-80v-80h400v80H120Z"/>
259
+ </symbol>
260
+ <symbol id="undo" viewBox="0 -960 960 960">
261
+ <path d="M280-200v-80h284q63 0 109.5-40T720-420q0-60-46.5-100T564-560H312l104 104-56 56-200-200 200-200 56 56-104 104h252q97 0 166.5 63T800-420q0 94-69.5 157T564-200H280Z"/>
262
+ </symbol>
263
+ <symbol id="upload" viewBox="0 -960 960 960">
264
+ <path d="M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/>
265
+ </symbol>
266
+ <symbol id="zoom_in" viewBox="0 -960 960 960">
267
+ <path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Zm-40-60v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z"/>
268
+ </symbol>
269
+ <symbol id="bolt" viewBox="0 -960 960 960">
270
+ <path d="M480-80 240-480h200L280-880h480L520-480h200L480-80Z"/>
271
+ </symbol>
272
+ <symbol id="accessibility" viewBox="0 -960 960 960">
273
+ <path d="M480-720q-33 0-56.5-23.5T400-800q0-33 23.5-56.5T480-880q33 0 56.5 23.5T560-800q0 33-23.5 56.5T480-720ZM360-80v-440q-60-5-121-15t-119-25l20-78q57 16 118.5 27T480-600q62 0 123.5-11T722-638l20 78q-58 15-119 25t-103 15v440h-80v-200h-80v200h-80Z"/>
274
+ </symbol>
275
+ <symbol id="chat_bubble" viewBox="0 -960 960 960">
276
+ <path d="M240-400h480v-80H240v80Zm0-120h480v-80H240v80Zm0-120h480v-80H240v80ZM880-80 720-240H160q-33 0-56.5-23.5T80-320v-480q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v720Z"/>
277
+ </symbol>
278
+ <symbol id="bar_chart" viewBox="0 -960 960 960">
279
+ <path d="M160-160v-440h160v440H160Zm240 0v-640h160v640H400Zm240 0v-280h160v280H640Z"/>
280
+ </symbol>
281
+ <symbol id="interests" viewBox="0 -960 960 960">
282
+ <path d="M620-520q-83 0-141.5-58.5T420-720q0-83 58.5-141.5T620-920q83 0 141.5 58.5T820-720q0 83-58.5 141.5T620-520ZM80-160v-300h200L440-160H80Zm140-80h120L209-360H160v120Zm344 80L330-500l57-57 234 234-57 57Zm180-38-28-28 68-68-68-68 28-28 96 96-96 96Z"/>
283
+ </symbol>
284
+ </svg>
@@ -1,224 +0,0 @@
1
- import { sanitizeHtml } from './utils.js';
2
-
3
- interface BottomSheetOptions {
4
- content: string;
5
- header?: string;
6
- footer?: string;
7
- closeable?: boolean;
8
- snapHeight?: 'auto' | 'half' | 'full';
9
- onClose?: () => void;
10
- }
11
-
12
- class BottomSheet {
13
- private readonly content: string;
14
- private readonly header?: string;
15
- private readonly footer?: string;
16
- private readonly closeable: boolean;
17
- private snapHeight: 'auto' | 'half' | 'full';
18
- private readonly onClose?: () => void;
19
-
20
- private wrapper: HTMLElement | null = null;
21
- private sheet: HTMLElement | null = null;
22
- private handle: HTMLElement | null = null;
23
- private body: HTMLElement | null = null;
24
-
25
- // Touch drag state
26
- private dragStartY = 0;
27
- private currentDragY = 0;
28
- private isDragging = false;
29
-
30
- constructor(options: BottomSheetOptions) {
31
- this.content = options.content;
32
- this.header = options.header;
33
- this.footer = options.footer;
34
- this.closeable = options.closeable ?? true;
35
- this.snapHeight = options.snapHeight ?? 'auto';
36
- this.onClose = options.onClose;
37
-
38
- this.hide = this.hide.bind(this);
39
- this.handleEscape = this.handleEscape.bind(this);
40
- this.handleBackdropClick = this.handleBackdropClick.bind(this);
41
- this.handleTouchStart = this.handleTouchStart.bind(this);
42
- this.handleTouchMove = this.handleTouchMove.bind(this);
43
- this.handleTouchEnd = this.handleTouchEnd.bind(this);
44
- }
45
-
46
- public show(): void {
47
- this.hide();
48
-
49
- const wrapper = document.createElement('div');
50
- wrapper.className = 'bottom-sheet-wrapper';
51
- wrapper.innerHTML = this.buildTemplate();
52
- document.body.append(wrapper);
53
-
54
- this.wrapper = wrapper;
55
- this.sheet = wrapper.querySelector('.bottom-sheet');
56
- this.handle = wrapper.querySelector('.bottom-sheet-handle');
57
- this.body = wrapper.querySelector('.bottom-sheet-body');
58
-
59
- if (this.closeable) {
60
- const backdrop = wrapper.querySelector('.bottom-sheet-backdrop');
61
- backdrop?.addEventListener('click', this.handleBackdropClick);
62
- document.addEventListener('keydown', this.handleEscape);
63
-
64
- const closeBtn = wrapper.querySelector('.close');
65
- closeBtn?.addEventListener('click', this.hide);
66
- }
67
-
68
- if (this.handle) {
69
- this.handle.addEventListener('touchstart', this.handleTouchStart, { passive: true });
70
- this.handle.addEventListener('touchmove', this.handleTouchMove, { passive: false });
71
- this.handle.addEventListener('touchend', this.handleTouchEnd);
72
- }
73
-
74
- if (this.body) {
75
- this.updateScrollMask();
76
- this.body.addEventListener('scroll', () => this.updateScrollMask());
77
- }
78
-
79
- document.body.style.overflow = 'hidden';
80
-
81
- requestAnimationFrame(() => {
82
- wrapper.classList.add('is-visible');
83
- });
84
- }
85
-
86
- public hide(): void {
87
- if (!this.wrapper) return;
88
-
89
- const backdrop = this.wrapper.querySelector('.bottom-sheet-backdrop');
90
- backdrop?.removeEventListener('click', this.handleBackdropClick);
91
- document.removeEventListener('keydown', this.handleEscape);
92
-
93
- if (this.handle) {
94
- this.handle.removeEventListener('touchstart', this.handleTouchStart);
95
- this.handle.removeEventListener('touchmove', this.handleTouchMove);
96
- this.handle.removeEventListener('touchend', this.handleTouchEnd);
97
- }
98
-
99
- document.body.style.overflow = '';
100
- this.wrapper.classList.remove('is-visible');
101
-
102
- const wrapper = this.wrapper;
103
- this.wrapper = null;
104
- this.sheet = null;
105
- this.handle = null;
106
- this.body = null;
107
-
108
- setTimeout(() => {
109
- wrapper.remove();
110
- this.onClose?.();
111
- }, 420);
112
- }
113
-
114
- public snapTo(height: 'auto' | 'half' | 'full'): void {
115
- if (!this.sheet) return;
116
-
117
- this.sheet.classList.remove(`snap-${this.snapHeight}`);
118
- this.snapHeight = height;
119
-
120
- if (height !== 'auto') {
121
- this.sheet.classList.add(`snap-${height}`);
122
- }
123
- }
124
-
125
- private handleEscape(e: KeyboardEvent): void {
126
- if (e.key === 'Escape') this.hide();
127
- }
128
-
129
- private handleBackdropClick(e: Event): void {
130
- if ((e.target as HTMLElement)?.classList.contains('bottom-sheet-backdrop')) {
131
- this.hide();
132
- }
133
- }
134
-
135
- private handleTouchStart(e: TouchEvent): void {
136
- this.dragStartY = e.touches[0].clientY;
137
- this.currentDragY = 0;
138
- this.isDragging = true;
139
-
140
- if (this.sheet) {
141
- this.sheet.style.transition = 'none';
142
- }
143
- }
144
-
145
- private handleTouchMove(e: TouchEvent): void {
146
- if (!this.isDragging || !this.sheet) return;
147
-
148
- const deltaY = e.touches[0].clientY - this.dragStartY;
149
-
150
- // Rubber-band resistance going upward
151
- if (deltaY < 0) {
152
- const resistance = Math.log(1 + Math.abs(deltaY)) * 4;
153
- this.currentDragY = -resistance;
154
- } else {
155
- this.currentDragY = deltaY;
156
- }
157
-
158
- const isDesktop = window.innerWidth >= 768;
159
- const translateX = isDesktop ? '-50%' : '0';
160
- this.sheet.style.transform = `translateX(${translateX}) translateY(${this.currentDragY}px)`;
161
- e.preventDefault();
162
- }
163
-
164
- private handleTouchEnd(): void {
165
- if (!this.isDragging || !this.sheet) return;
166
- this.isDragging = false;
167
-
168
- const threshold = this.sheet.offsetHeight * 0.3;
169
-
170
- if (this.currentDragY > threshold) {
171
- this.hide();
172
- } else {
173
- // Spring back
174
- this.sheet.style.transition = '';
175
- this.sheet.style.transform = '';
176
- }
177
- }
178
-
179
- private updateScrollMask(): void {
180
- if (!this.body) return;
181
- const canScroll = this.body.scrollHeight > this.body.clientHeight;
182
- const atBottom = this.body.scrollTop + this.body.clientHeight >= this.body.scrollHeight - 4;
183
- this.body.classList.toggle('is-scrollable', canScroll && !atBottom);
184
- }
185
-
186
- private buildTemplate(): string {
187
- const snapClass = this.snapHeight !== 'auto' ? ` snap-${this.snapHeight}` : '';
188
-
189
- const closeButton = this.closeable
190
- ? `<div class="icon icon-close close"></div>`
191
- : '';
192
-
193
- const headerHtml = this.header !== undefined
194
- ? `<div class="bottom-sheet-header has-divider">
195
- <span class="title">${sanitizeHtml(this.header)}</span>
196
- ${closeButton}
197
- </div>`
198
- : '';
199
-
200
- const footerHtml = this.footer !== undefined
201
- ? `<div class="bottom-sheet-footer">${sanitizeHtml(this.footer)}</div>`
202
- : '';
203
-
204
- return `
205
- <div class="bottom-sheet${snapClass}">
206
- <div class="bottom-sheet-handle" role="button" aria-label="Drag to dismiss"></div>
207
- ${headerHtml}
208
- <div class="bottom-sheet-body">${sanitizeHtml(this.content)}</div>
209
- ${footerHtml}
210
- </div>
211
- <div class="bottom-sheet-backdrop"></div>
212
- `;
213
- }
214
-
215
- public isVisible(): boolean {
216
- return this.wrapper !== null && document.body.contains(this.wrapper);
217
- }
218
-
219
- public destroy(): void {
220
- this.hide();
221
- }
222
- }
223
-
224
- export { BottomSheet, type BottomSheetOptions };