bootstrap-time 0.1.7-beta → 0.1.8-beta

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.
Files changed (8) hide show
  1. package/README.md +13 -5
  2. package/dist/css/bootstrap-time.css +3 -26
  3. package/dist/css/bootstrap-time.min.css +1 -1
  4. package/dist/js/bootstrap-time.js +3 -32
  5. package/dist/js/bootstrap-time.min.js +1 -1
  6. package/package.json +2 -3
  7. package/src/js/bootstrap-time.js +3 -32
  8. package/src/scss/bootstrap-time.scss +3 -30
package/README.md CHANGED
@@ -18,7 +18,7 @@ dist/ generated, do not edit
18
18
  examples/ HTML that points at dist
19
19
  ```
20
20
 
21
- `npm run build` compiles `src` into `dist`. Bootstrap 6 is required. The time field uses [form adornments](https://getbootstrap.com/docs/6.0/forms/form-adorn/), which Bootstrap 5.3 does not have. Bootstrap 5.3 can only place an addon beside the input with `input-group`, not inside it. The clock icon comes from bootstrap-icons.
21
+ `npm run build` compiles `src` into `dist`. Bootstrap 5.3.8 or later 5.3 is required. The browser supplies the time field icon. Focus opens the clock and blur closes it.
22
22
 
23
23
  ## Usage
24
24
 
@@ -31,10 +31,9 @@ npm install bootstrap-time
31
31
  Or load the published files from jsDelivr:
32
32
 
33
33
  ```html
34
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css">
35
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.2/font/bootstrap-icons.min.css">
36
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-time@0.1.7-beta/dist/css/bootstrap-time.min.css">
37
- <script src="https://cdn.jsdelivr.net/npm/bootstrap-time@0.1.7-beta/dist/js/bootstrap-time.min.js"></script>
34
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
35
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-time@0.1.8-beta/dist/css/bootstrap-time.min.css">
36
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap-time@0.1.8-beta/dist/js/bootstrap-time.min.js"></script>
38
37
  ```
39
38
 
40
39
  Local builds use the same paths under `dist/`:
@@ -55,6 +54,15 @@ Minute selection follows the input `step`, including when `step` changes: `60` a
55
54
 
56
55
  ## Changelog
57
56
 
57
+ ### 0.1.8-beta
58
+
59
+ - Requires Bootstrap 5.3.8 instead of Bootstrap 6.
60
+ - Removed the adorn button. The browser time icon stays, and focus and blur still open and close the clock.
61
+
62
+ ### 0.2.0
63
+
64
+ - Stable release. Attach the clock to any field with class `bs-time`.
65
+
58
66
  ### 0.1.7-beta
59
67
 
60
68
  - Attach the clock to any field with class `bs-time`.
package/dist/css/bootstrap-time.css CHANGED
@@ -1,29 +1,6 @@
1
1
  .clock-picker {
2
2
  position: relative;
3
3
  }
4
- .clock-picker input[type=time]::-webkit-calendar-picker-indicator {
5
- display: none;
6
- appearance: none;
7
- }
8
-
9
- .clock-toggle {
10
- pointer-events: auto;
11
- width: 2.25rem;
12
- height: 2.25rem;
13
- margin: -0.25rem;
14
- border: 0;
15
- border-radius: 50%;
16
- background: transparent;
17
- color: var(--bs-form-adorn-icon-color, var(--bs-secondary-color));
18
- }
19
- .clock-toggle .bi {
20
- font-size: 1rem;
21
- line-height: 1;
22
- }
23
- .clock-toggle:hover, .clock-toggle:focus-visible {
24
- background-color: var(--bs-bg-3);
25
- color: var(--bs-body-color);
26
- }
27
4
 
28
5
  .clock-widget {
29
6
  position: absolute;
@@ -33,8 +10,8 @@
33
10
  width: 20rem;
34
11
  margin-top: 0.25rem;
35
12
  padding: 0.25rem 0.5rem 1rem;
36
- background-color: var(--bs-secondary-bg-subtle);
37
- color: var(--bs-secondary-fg);
13
+ background-color: var(--bs-secondary-bg);
14
+ color: var(--bs-body-color);
38
15
  }
39
16
 
40
17
  .clock-arrows {
@@ -62,7 +39,7 @@
62
39
  fill: currentColor;
63
40
  }
64
41
  .btn.clock-arrow:hover, .btn.clock-arrow:focus-visible {
65
- background-color: var(--bs-bg-3);
42
+ background-color: var(--bs-tertiary-bg);
66
43
  color: var(--bs-body-color);
67
44
  }
68
45
  .btn.clock-arrow:disabled, .btn.clock-arrow:disabled:hover {
package/dist/css/bootstrap-time.min.css CHANGED
@@ -1 +1 @@
1
- .clock-picker{position:relative}.clock-picker input[type=time]::-webkit-calendar-picker-indicator{display:none;appearance:none}.clock-toggle{pointer-events:auto;width:2.25rem;height:2.25rem;margin:-0.25rem;border:0;border-radius:50%;background:rgba(0,0,0,0);color:var(--bs-form-adorn-icon-color, var(--bs-secondary-color))}.clock-toggle .bi{font-size:1rem;line-height:1}.clock-toggle:hover,.clock-toggle:focus-visible{background-color:var(--bs-bg-3);color:var(--bs-body-color)}.clock-widget{position:absolute;top:100%;left:0;z-index:5;width:20rem;margin-top:.25rem;padding:.25rem .5rem 1rem;background-color:var(--bs-secondary-bg-subtle);color:var(--bs-secondary-fg)}.clock-arrows{display:flex;justify-content:flex-end;gap:.25rem}.btn.clock-arrow{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;min-height:0;padding:0;border-radius:50%;background-color:rgba(0,0,0,0);color:var(--bs-body-color);text-decoration:none}.btn.clock-arrow svg{width:1.5rem;height:1.5rem;fill:currentColor}.btn.clock-arrow:hover,.btn.clock-arrow:focus-visible{background-color:var(--bs-bg-3);color:var(--bs-body-color)}.btn.clock-arrow:disabled,.btn.clock-arrow:disabled:hover{background-color:rgba(0,0,0,0);color:var(--bs-secondary-color);opacity:.45}.clock{width:16rem;height:16rem;border-radius:50%;touch-action:none;cursor:pointer}.clock-hand{position:absolute;left:50%;bottom:50%;width:2px;height:var(--hand);transform-origin:center bottom;transform:translateX(-50%) rotate(var(--angle));transition:transform .3s ease,height .3s ease;border-radius:1px;pointer-events:none}.clock-knob{position:absolute;left:50%;top:0;width:2.25rem;height:2.25rem;border-radius:50%;transform:translate(-50%, -50%)}.clock-number{position:absolute;left:50%;top:50%;z-index:1;width:2.25rem;height:2.25rem;margin:-1.125rem;border:0;border-radius:50%;background:rgba(0,0,0,0);color:inherit;transform:rotate(var(--angle)) translateY(calc(var(--radius) * -1)) rotate(calc(var(--angle) * -1))}.clock-number[aria-pressed=true]{color:var(--bs-white, #fff)}.clock-number:disabled{opacity:.35;cursor:default}
1
+ .clock-picker{position:relative}.clock-widget{position:absolute;top:100%;left:0;z-index:5;width:20rem;margin-top:.25rem;padding:.25rem .5rem 1rem;background-color:var(--bs-secondary-bg);color:var(--bs-body-color)}.clock-arrows{display:flex;justify-content:flex-end;gap:.25rem}.btn.clock-arrow{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;min-height:0;padding:0;border-radius:50%;background-color:rgba(0,0,0,0);color:var(--bs-body-color);text-decoration:none}.btn.clock-arrow svg{width:1.5rem;height:1.5rem;fill:currentColor}.btn.clock-arrow:hover,.btn.clock-arrow:focus-visible{background-color:var(--bs-tertiary-bg);color:var(--bs-body-color)}.btn.clock-arrow:disabled,.btn.clock-arrow:disabled:hover{background-color:rgba(0,0,0,0);color:var(--bs-secondary-color);opacity:.45}.clock{width:16rem;height:16rem;border-radius:50%;touch-action:none;cursor:pointer}.clock-hand{position:absolute;left:50%;bottom:50%;width:2px;height:var(--hand);transform-origin:center bottom;transform:translateX(-50%) rotate(var(--angle));transition:transform .3s ease,height .3s ease;border-radius:1px;pointer-events:none}.clock-knob{position:absolute;left:50%;top:0;width:2.25rem;height:2.25rem;border-radius:50%;transform:translate(-50%, -50%)}.clock-number{position:absolute;left:50%;top:50%;z-index:1;width:2.25rem;height:2.25rem;margin:-1.125rem;border:0;border-radius:50%;background:rgba(0,0,0,0);color:inherit;transform:rotate(var(--angle)) translateY(calc(var(--radius) * -1)) rotate(calc(var(--angle) * -1))}.clock-number[aria-pressed=true]{color:var(--bs-white, #fff)}.clock-number:disabled{opacity:.35;cursor:default}
package/dist/js/bootstrap-time.js CHANGED
@@ -27,38 +27,17 @@
27
27
  picker.append(host);
28
28
  }
29
29
 
30
- var adorn = field.closest(".form-adorn");
31
- if (!adorn && field.classList.contains("form-control")) {
32
- adorn = document.createElement("div");
33
- adorn.className = "form-control form-adorn form-adorn-end";
34
- field.parentNode.insertBefore(adorn, field);
35
- adorn.append(field);
36
- field.classList.remove("form-control");
37
- field.classList.add("form-ghost");
38
- }
39
-
40
- var toggle = picker.querySelector(".clock-toggle");
41
- if (!toggle && adorn) {
42
- toggle = document.createElement("button");
43
- toggle.type = "button";
44
- toggle.className = "form-adorn-icon clock-toggle";
45
- toggle.setAttribute("aria-label", "Klok");
46
- toggle.setAttribute("aria-pressed", "false");
47
- toggle.innerHTML = '<i class="bi bi-clock" aria-hidden="true"></i>';
48
- adorn.insertBefore(toggle, adorn.firstChild);
49
- }
50
-
51
30
  var widget = picker.querySelector(".clock-widget");
52
31
  if (!widget) {
53
32
  widget = document.createElement("div");
54
- widget.className = "clock-widget card theme-secondary theme-subtle";
33
+ widget.className = "clock-widget card bg-body-secondary";
55
34
  widget.hidden = true;
56
35
  widget.innerHTML =
57
36
  '<div class="clock-arrows">' +
58
37
  '<button class="btn btn-link clock-arrow clock-hour" type="button" aria-label="Uren">' + svg(LEFT) + "</button>" +
59
38
  '<button class="btn btn-link clock-arrow clock-minute" type="button" aria-label="Minuten">' + svg(RIGHT) + "</button>" +
60
39
  "</div>" +
61
- '<div class="clock position-relative mx-auto theme-inverse theme-subtle" role="group" aria-label="Kies een uur"></div>';
40
+ '<div class="clock position-relative mx-auto bg-body-tertiary" role="group" aria-label="Kies een uur"></div>';
62
41
  picker.append(widget);
63
42
  }
64
43
 
@@ -181,17 +160,10 @@
181
160
 
182
161
  function showWidget() {
183
162
  widget.hidden = false;
184
- if (toggle) toggle.setAttribute("aria-pressed", "true");
185
163
  }
186
164
 
187
165
  function hideWidget() {
188
166
  widget.hidden = true;
189
- if (toggle) toggle.setAttribute("aria-pressed", "false");
190
- }
191
-
192
- function toggleWidget() {
193
- if (widget.hidden) showWidget();
194
- else hideWidget();
195
167
  }
196
168
 
197
169
  function valueFromPoint(event) {
@@ -225,8 +197,8 @@
225
197
  minuteArrow.addEventListener("click", function () {
226
198
  showMode("minute");
227
199
  });
228
- if (toggle) toggle.addEventListener("click", toggleWidget);
229
200
  field.addEventListener("focus", showWidget);
201
+ field.addEventListener("blur", hideWidget);
230
202
  field.addEventListener("input", function () {
231
203
  if (!field.value) return;
232
204
  var parts = field.value.split(":");
@@ -241,7 +213,6 @@
241
213
  });
242
214
  picker.addEventListener("mousedown", function (event) {
243
215
  if (event.target === field) return;
244
- if (toggle && toggle.contains(event.target)) return;
245
216
  event.preventDefault();
246
217
  });
247
218
  document.addEventListener("mousedown", function (event) {
package/dist/js/bootstrap-time.min.js CHANGED
@@ -1 +1 @@
1
- !function(){"use strict";var e="4.6rem",t="6.4rem";function n(e){return'<svg viewBox="0 0 24 24" aria-hidden="true"><path d="'+e+'"></path></svg>'}function r(r){if("ready"!==r.dataset.bsTime){r.dataset.bsTime="ready";var o=r.closest(".form-control")||r,a=o.closest(".clock-picker");a||((a=document.createElement("div")).className="clock-picker",o.parentNode.insertBefore(a,o),a.append(o));var i=r.closest(".form-adorn");!i&&r.classList.contains("form-control")&&((i=document.createElement("div")).className="form-control form-adorn form-adorn-end",r.parentNode.insertBefore(i,r),i.append(r),r.classList.remove("form-control"),r.classList.add("form-ghost"));var c=a.querySelector(".clock-toggle");!c&&i&&((c=document.createElement("button")).type="button",c.className="form-adorn-icon clock-toggle",c.setAttribute("aria-label","Klok"),c.setAttribute("aria-pressed","false"),c.innerHTML='<i class="bi bi-clock" aria-hidden="true"></i>',i.insertBefore(c,i.firstChild));var u=a.querySelector(".clock-widget");u||((u=document.createElement("div")).className="clock-widget card theme-secondary theme-subtle",u.hidden=!0,u.innerHTML='<div class="clock-arrows"><button class="btn btn-link clock-arrow clock-hour" type="button" aria-label="Uren">'+n("M15.41 16.59 10.83 12l4.58-4.59L14 6l-6 6 6 6z")+'</button><button class="btn btn-link clock-arrow clock-minute" type="button" aria-label="Minuten">'+n("M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z")+'</button></div><div class="clock position-relative mx-auto theme-inverse theme-subtle" role="group" aria-label="Kies een uur"></div>',a.append(u));var s=u.querySelector(".clock"),l=u.querySelector(".clock-hour"),d=u.querySelector(".clock-minute");if(s&&l&&d){var m=new Date,f=r.value?r.value.split(":"):[m.getHours(),m.getMinutes()],b=Number(f[0])||0,p=M(Number(f[1])||0),v="hour",h=150,g=document.createElement("div"),k=document.createElement("span");g.className="clock-hand bg-primary",k.className="clock-knob bg-primary",k.setAttribute("aria-hidden","true"),g.append(k),s.append(g),s.addEventListener("click",function(e){if(!e.target.closest(".clock-number")){var t=function(e){var t=s.getBoundingClientRect(),n=e.clientX-(t.left+t.width/2),r=e.clientY-(t.top+t.height/2),o=(180*Math.atan2(n,-r)/Math.PI+360)%360;if("minute"===v)return M(Math.round(o/6)%60);var a=Math.round(o/30)%12;return Math.hypot(n,r)<.32*t.width?0===a?0:a+12:0===a?12:a}(e);"minute"===v?p=t:(b=t,v="minute"),S(),w(),q()}}),l.addEventListener("click",function(){A("hour")}),d.addEventListener("click",function(){A("minute")}),c&&c.addEventListener("click",function(){u.hidden?P():B()}),r.addEventListener("focus",P),r.addEventListener("input",function(){if(r.value){var e=r.value.split(":"),t=Number(e[0]),n=Number(e[1]);n!==p?v="minute":t!==b&&(v="hour"),b=t,p=n,w(),q()}}),a.addEventListener("mousedown",function(e){e.target!==r&&(c&&c.contains(e.target)||e.preventDefault())}),document.addEventListener("mousedown",function(e){a.contains(e.target)||B()});var y=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"step");y&&y.set&&Object.defineProperty(r,"step",{configurable:!0,get:function(){return y.get.call(r)},set:function(e){y.set.call(r,e),O()}}),new MutationObserver(O).observe(r,{attributes:!0,attributeFilter:["step"]}),w(),r.value||(r.value=E(b)+":"+E(p)),q(),B()}}function E(e){return String(e).padStart(2,"0")}function L(){var e=Number(r.getAttribute("step")||r.step);return(!e||e<60)&&(e=60),Math.max(1,Math.round(e/60))}function M(e){var t=L();return(Math.round(e/t)*t%60+60)%60}function N(){h+=((("hour"===v?b%12*30:6*p)-h)%360+540)%360-180,g.style.setProperty("--angle",h+"deg"),g.style.setProperty("--hand","hour"===v&&(0===b||b>12)?e:t)}function w(){l.disabled="hour"===v,d.disabled="minute"===v}function S(){r.value=E(b)+":"+E(p)}function A(e){v!==e&&(v=e,w(),q())}function q(){s.querySelectorAll(".clock-number").forEach(function(e){e.remove()}),s.setAttribute("aria-label","hour"===v?"Kies een uur":"Kies de minuten");var n="hour"===v?[12,1,2,3,4,5,6,7,8,9,10,11,0,13,14,15,16,17,18,19,20,21,22,23]:[0,5,10,15,20,25,30,35,40,45,50,55],r="hour"===v?b:p;N(),n.forEach(function(n,o){var a=document.createElement("button"),i="hour"===v&&o>=12,c=30*("hour"===v?o%12:o),u="minute"===v&&!function(e){return e%L()===0}(n);a.type="button",a.className="clock-number",a.textContent=0===n?"00":String(n),a.dataset.value=String(n),a.disabled=u,a.setAttribute("aria-pressed",u||n!==r?"false":"true"),a.style.setProperty("--angle",c+"deg"),a.style.setProperty("--radius",i?e:t),a.addEventListener("click",function(){a.disabled||("hour"===v?(b=n,v="minute"):p=n,S(),w(),q())}),s.append(a)})}function P(){u.hidden=!1,c&&c.setAttribute("aria-pressed","true")}function B(){u.hidden=!0,c&&c.setAttribute("aria-pressed","false")}function O(){p=M(p),r.value=E(b)+":"+E(p),q()}}function o(){document.querySelectorAll(".bs-time").forEach(r)}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",o):o()}();
1
+ !function(){"use strict";var e="4.6rem",t="6.4rem";function n(e){return'<svg viewBox="0 0 24 24" aria-hidden="true"><path d="'+e+'"></path></svg>'}function r(r){if("ready"!==r.dataset.bsTime){r.dataset.bsTime="ready";var a=r.closest(".form-control")||r,o=a.closest(".clock-picker");o||((o=document.createElement("div")).className="clock-picker",a.parentNode.insertBefore(o,a),o.append(a));var u=o.querySelector(".clock-widget");u||((u=document.createElement("div")).className="clock-widget card bg-body-secondary",u.hidden=!0,u.innerHTML='<div class="clock-arrows"><button class="btn btn-link clock-arrow clock-hour" type="button" aria-label="Uren">'+n("M15.41 16.59 10.83 12l4.58-4.59L14 6l-6 6 6 6z")+'</button><button class="btn btn-link clock-arrow clock-minute" type="button" aria-label="Minuten">'+n("M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z")+'</button></div><div class="clock position-relative mx-auto bg-body-tertiary" role="group" aria-label="Kies een uur"></div>',o.append(u));var i=u.querySelector(".clock"),c=u.querySelector(".clock-hour"),l=u.querySelector(".clock-minute");if(i&&c&&l){var d=new Date,s=r.value?r.value.split(":"):[d.getHours(),d.getMinutes()],m=Number(s[0])||0,b=E(Number(s[1])||0),v="hour",p=150,f=document.createElement("div"),h=document.createElement("span");f.className="clock-hand bg-primary",h.className="clock-knob bg-primary",h.setAttribute("aria-hidden","true"),f.append(h),i.append(f),i.addEventListener("click",function(e){if(!e.target.closest(".clock-number")){var t=function(e){var t=i.getBoundingClientRect(),n=e.clientX-(t.left+t.width/2),r=e.clientY-(t.top+t.height/2),a=(180*Math.atan2(n,-r)/Math.PI+360)%360;if("minute"===v)return E(Math.round(a/6)%60);var o=Math.round(a/30)%12;return Math.hypot(n,r)<.32*t.width?0===o?0:o+12:0===o?12:o}(e);"minute"===v?b=t:(m=t,v="minute"),w(),L(),S()}}),c.addEventListener("click",function(){N("hour")}),l.addEventListener("click",function(){N("minute")}),r.addEventListener("focus",function(){u.hidden=!1}),r.addEventListener("blur",P),r.addEventListener("input",function(){if(r.value){var e=r.value.split(":"),t=Number(e[0]),n=Number(e[1]);n!==b?v="minute":t!==m&&(v="hour"),m=t,b=n,L(),S()}}),o.addEventListener("mousedown",function(e){e.target!==r&&e.preventDefault()}),document.addEventListener("mousedown",function(e){o.contains(e.target)||P()});var g=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"step");g&&g.set&&Object.defineProperty(r,"step",{configurable:!0,get:function(){return g.get.call(r)},set:function(e){g.set.call(r,e),q()}}),new MutationObserver(q).observe(r,{attributes:!0,attributeFilter:["step"]}),L(),r.value||(r.value=y(m)+":"+y(b)),S(),P()}}function y(e){return String(e).padStart(2,"0")}function k(){var e=Number(r.getAttribute("step")||r.step);return(!e||e<60)&&(e=60),Math.max(1,Math.round(e/60))}function E(e){var t=k();return(Math.round(e/t)*t%60+60)%60}function M(){p+=((("hour"===v?m%12*30:6*b)-p)%360+540)%360-180,f.style.setProperty("--angle",p+"deg"),f.style.setProperty("--hand","hour"===v&&(0===m||m>12)?e:t)}function L(){c.disabled="hour"===v,l.disabled="minute"===v}function w(){r.value=y(m)+":"+y(b)}function N(e){v!==e&&(v=e,L(),S())}function S(){i.querySelectorAll(".clock-number").forEach(function(e){e.remove()}),i.setAttribute("aria-label","hour"===v?"Kies een uur":"Kies de minuten");var n="hour"===v?[12,1,2,3,4,5,6,7,8,9,10,11,0,13,14,15,16,17,18,19,20,21,22,23]:[0,5,10,15,20,25,30,35,40,45,50,55],r="hour"===v?m:b;M(),n.forEach(function(n,a){var o=document.createElement("button"),u="hour"===v&&a>=12,c=30*("hour"===v?a%12:a),l="minute"===v&&!function(e){return e%k()===0}(n);o.type="button",o.className="clock-number",o.textContent=0===n?"00":String(n),o.dataset.value=String(n),o.disabled=l,o.setAttribute("aria-pressed",l||n!==r?"false":"true"),o.style.setProperty("--angle",c+"deg"),o.style.setProperty("--radius",u?e:t),o.addEventListener("click",function(){o.disabled||("hour"===v?(m=n,v="minute"):b=n,w(),L(),S())}),i.append(o)})}function P(){u.hidden=!0}function q(){b=E(b),r.value=y(m)+":"+y(b),S()}}function a(){document.querySelectorAll(".bs-time").forEach(r)}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",a):a()}();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bootstrap-time",
3
- "version": "0.1.7-beta",
3
+ "version": "0.1.8-beta",
4
4
  "description": "Time picker based on Bootstrap.",
5
5
  "author": "M. de Ridder",
6
6
  "license": "MIT",
@@ -60,7 +60,6 @@
60
60
  "terser": "^5.44.0"
61
61
  },
62
62
  "dependencies": {
63
- "bootstrap": ">=6.0.0-alpha.1 <7",
64
- "bootstrap-icons": "^1.13.2"
63
+ "bootstrap": ">=5.3.8 <6"
65
64
  }
66
65
  }
package/src/js/bootstrap-time.js CHANGED
@@ -27,38 +27,17 @@
27
27
  picker.append(host);
28
28
  }
29
29
 
30
- var adorn = field.closest(".form-adorn");
31
- if (!adorn && field.classList.contains("form-control")) {
32
- adorn = document.createElement("div");
33
- adorn.className = "form-control form-adorn form-adorn-end";
34
- field.parentNode.insertBefore(adorn, field);
35
- adorn.append(field);
36
- field.classList.remove("form-control");
37
- field.classList.add("form-ghost");
38
- }
39
-
40
- var toggle = picker.querySelector(".clock-toggle");
41
- if (!toggle && adorn) {
42
- toggle = document.createElement("button");
43
- toggle.type = "button";
44
- toggle.className = "form-adorn-icon clock-toggle";
45
- toggle.setAttribute("aria-label", "Klok");
46
- toggle.setAttribute("aria-pressed", "false");
47
- toggle.innerHTML = '<i class="bi bi-clock" aria-hidden="true"></i>';
48
- adorn.insertBefore(toggle, adorn.firstChild);
49
- }
50
-
51
30
  var widget = picker.querySelector(".clock-widget");
52
31
  if (!widget) {
53
32
  widget = document.createElement("div");
54
- widget.className = "clock-widget card theme-secondary theme-subtle";
33
+ widget.className = "clock-widget card bg-body-secondary";
55
34
  widget.hidden = true;
56
35
  widget.innerHTML =
57
36
  '<div class="clock-arrows">' +
58
37
  '<button class="btn btn-link clock-arrow clock-hour" type="button" aria-label="Uren">' + svg(LEFT) + "</button>" +
59
38
  '<button class="btn btn-link clock-arrow clock-minute" type="button" aria-label="Minuten">' + svg(RIGHT) + "</button>" +
60
39
  "</div>" +
61
- '<div class="clock position-relative mx-auto theme-inverse theme-subtle" role="group" aria-label="Kies een uur"></div>';
40
+ '<div class="clock position-relative mx-auto bg-body-tertiary" role="group" aria-label="Kies een uur"></div>';
62
41
  picker.append(widget);
63
42
  }
64
43
 
@@ -181,17 +160,10 @@
181
160
 
182
161
  function showWidget() {
183
162
  widget.hidden = false;
184
- if (toggle) toggle.setAttribute("aria-pressed", "true");
185
163
  }
186
164
 
187
165
  function hideWidget() {
188
166
  widget.hidden = true;
189
- if (toggle) toggle.setAttribute("aria-pressed", "false");
190
- }
191
-
192
- function toggleWidget() {
193
- if (widget.hidden) showWidget();
194
- else hideWidget();
195
167
  }
196
168
 
197
169
  function valueFromPoint(event) {
@@ -225,8 +197,8 @@
225
197
  minuteArrow.addEventListener("click", function () {
226
198
  showMode("minute");
227
199
  });
228
- if (toggle) toggle.addEventListener("click", toggleWidget);
229
200
  field.addEventListener("focus", showWidget);
201
+ field.addEventListener("blur", hideWidget);
230
202
  field.addEventListener("input", function () {
231
203
  if (!field.value) return;
232
204
  var parts = field.value.split(":");
@@ -241,7 +213,6 @@
241
213
  });
242
214
  picker.addEventListener("mousedown", function (event) {
243
215
  if (event.target === field) return;
244
- if (toggle && toggle.contains(event.target)) return;
245
216
  event.preventDefault();
246
217
  });
247
218
  document.addEventListener("mousedown", function (event) {
package/src/scss/bootstrap-time.scss CHANGED
@@ -4,33 +4,6 @@
4
4
 
5
5
  .clock-picker {
6
6
  position: relative;
7
-
8
- input[type="time"]::-webkit-calendar-picker-indicator {
9
- display: none;
10
- appearance: none;
11
- }
12
- }
13
-
14
- .clock-toggle {
15
- pointer-events: auto;
16
- width: 2.25rem;
17
- height: 2.25rem;
18
- margin: -0.25rem;
19
- border: 0;
20
- border-radius: 50%;
21
- background: transparent;
22
- color: var(--bs-form-adorn-icon-color, var(--bs-secondary-color));
23
-
24
- .bi {
25
- font-size: 1rem;
26
- line-height: 1;
27
- }
28
-
29
- &:hover,
30
- &:focus-visible {
31
- background-color: var(--bs-bg-3);
32
- color: var(--bs-body-color);
33
- }
34
7
  }
35
8
 
36
9
  .clock-widget {
@@ -41,8 +14,8 @@
41
14
  width: 20rem;
42
15
  margin-top: 0.25rem;
43
16
  padding: 0.25rem 0.5rem 1rem;
44
- background-color: var(--bs-secondary-bg-subtle);
45
- color: var(--bs-secondary-fg);
17
+ background-color: var(--bs-secondary-bg);
18
+ color: var(--bs-body-color);
46
19
  }
47
20
 
48
21
  .clock-arrows {
@@ -72,7 +45,7 @@
72
45
 
73
46
  &:hover,
74
47
  &:focus-visible {
75
- background-color: var(--bs-bg-3);
48
+ background-color: var(--bs-tertiary-bg);
76
49
  color: var(--bs-body-color);
77
50
  }
78
51