snice 4.8.0 → 4.9.0

package/dist/cdn/time-range-picker/snice-time-range-picker.js

@@ -0,0 +1,635 @@
+/*!
+ * snice v4.8.0
+ * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
+ * (c) 2024
+ * Released under the MIT License.
+ */
+if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.min.js must be loaded before snice-time-range-picker.min.js");}
+var SniceTimeRangePicker = (function (exports, snice) {
+  'use strict';
+
+  /******************************************************************************
+  Copyright (c) Microsoft Corporation.
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */
+  /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+  function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+  }
+  function __runInitializers(thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+  }
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+
+  var cssContent = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style paint;width:100%;--trp-bg:var(--snice-color-background, rgb(255 255 255));--trp-text:var(--snice-color-text, rgb(23 23 23));--trp-text-secondary:var(--snice-color-text-secondary, rgb(82 82 82));--trp-border:var(--snice-color-border, rgb(226 226 226));--trp-primary:var(--snice-color-primary, rgb(37 99 235));--trp-primary-hover:var(--snice-color-primary-hover, rgb(29 78 216));--trp-slot-hover:var(--snice-color-background-element, rgb(252 251 249));--trp-disabled-bg:var(--snice-color-background-element, rgb(252 251 249));--trp-disabled-text:var(--snice-color-text-tertiary, rgb(115 115 115));--trp-selected-bg:var(--snice-color-primary, rgb(37 99 235));--trp-selected-text:var(--snice-color-text-inverse, rgb(250 250 250))}:host([disabled]){opacity:.6;pointer-events:none}:host([readonly]) .slot:not(.slot--selected){cursor:default}.wrapper{border:1px solid var(--trp-border);border-radius:var(--snice-border-radius-lg,.5rem);overflow:hidden;background:var(--trp-bg)}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--snice-spacing-sm,.75rem) var(--snice-spacing-md,1rem);border-bottom:1px solid var(--trp-border);background:var(--trp-bg);min-height:2.5rem}.header-label{font-size:var(--snice-font-size-md, 1rem);font-weight:var(--snice-font-weight-medium,500);color:var(--trp-text)}.header-value{font-size:var(--snice-font-size-md, 1rem);color:var(--trp-primary);font-weight:var(--snice-font-weight-semibold,600)}.header-value--empty{color:var(--trp-text-secondary);font-weight:var(--snice-font-weight-medium,500);font-style:italic}.slots-container{max-height:25rem;overflow-y:auto;overscroll-behavior:contain}.slots-container::-webkit-scrollbar{width:6px}.slots-container::-webkit-scrollbar-track{background:0 0}.slots-container::-webkit-scrollbar-thumb{background:var(--trp-border);border-radius:3px}.slot{display:flex;align-items:center;padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-md,1rem);border-bottom:1px solid var(--trp-border);cursor:pointer;transition:background-color var(--snice-transition-fast, 150ms) ease;user-select:none;-webkit-user-select:none;position:relative;min-height:2.25rem}.slot:last-child{border-bottom:none}.slot:hover:not(.slot--disabled):not(.slot--selected){background:var(--trp-slot-hover)}.slot--selected{background:var(--trp-selected-bg);color:var(--trp-selected-text)}.slot--selected:hover{background:var(--trp-primary-hover)}.slot--disabled{background:var(--trp-disabled-bg);color:var(--trp-disabled-text);cursor:not-allowed;text-decoration:line-through;opacity:.65}.slot--dragging{background:color-mix(in srgb,var(--trp-selected-bg) 80%,transparent);color:var(--trp-selected-text)}.slot--range-start{border-top-left-radius:4px;border-top-right-radius:4px}.slot--range-end{border-bottom-left-radius:4px;border-bottom-right-radius:4px}.slot-time{font-size:var(--snice-font-size-md, 1rem);font-weight:var(--snice-font-weight-medium,500);min-width:5rem;font-variant-numeric:tabular-nums}.slot-separator{flex:1;height:1px;background:var(--trp-border);margin:0 var(--snice-spacing-sm,.75rem);opacity:.5}.slot--dragging .slot-separator,.slot--selected .slot-separator{background:var(--trp-selected-text);opacity:.3}.slot--hour-start{border-top:2px solid var(--trp-border)}.slot--hour-start.slot--dragging,.slot--hour-start.slot--selected{border-top-color:color-mix(in srgb,var(--trp-selected-text) 30%,transparent)}.slot:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline-offset:-2px;z-index:1}@media (max-width:480px){.slot{padding:var(--snice-spacing-2xs,.25rem) var(--snice-spacing-sm,.75rem);min-height:2rem}.slot-time{font-size:var(--snice-font-size-sm, .875rem);min-width:4rem}}";
+
+  let SniceTimeRangePicker = (() => {
+      let _classDecorators = [snice.element('snice-time-range-picker')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _granularity_decorators;
+      let _granularity_initializers = [];
+      let _granularity_extraInitializers = [];
+      let _startTime_decorators;
+      let _startTime_initializers = [];
+      let _startTime_extraInitializers = [];
+      let _endTime_decorators;
+      let _endTime_initializers = [];
+      let _endTime_extraInitializers = [];
+      let _value_decorators;
+      let _value_initializers = [];
+      let _value_extraInitializers = [];
+      let _disabledRanges_decorators;
+      let _disabledRanges_initializers = [];
+      let _disabledRanges_extraInitializers = [];
+      let _format_decorators;
+      let _format_initializers = [];
+      let _format_extraInitializers = [];
+      let _multiple_decorators;
+      let _multiple_initializers = [];
+      let _multiple_extraInitializers = [];
+      let _readonly_decorators;
+      let _readonly_initializers = [];
+      let _readonly_extraInitializers = [];
+      let _disabled_decorators;
+      let _disabled_initializers = [];
+      let _disabled_extraInitializers = [];
+      let _slotsContainer_decorators;
+      let _slotsContainer_initializers = [];
+      let _slotsContainer_extraInitializers = [];
+      let _componentStyles_decorators;
+      let _renderContent_decorators;
+      let _init_decorators;
+      let _cleanup_decorators;
+      let _handleValueChange_decorators;
+      let _handleDisabledRangesChange_decorators;
+      let _handleGranularityChange_decorators;
+      let _handleStartTimeChange_decorators;
+      let _handleEndTimeChange_decorators;
+      let _emitChange_decorators;
+      let _emitSelect_decorators;
+      let _emitComplete_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _granularity_decorators = [snice.property({ type: Number })];
+              _startTime_decorators = [snice.property({ attribute: 'start-time' })];
+              _endTime_decorators = [snice.property({ attribute: 'end-time' })];
+              _value_decorators = [snice.property()];
+              _disabledRanges_decorators = [snice.property({ attribute: 'disabled-ranges' })];
+              _format_decorators = [snice.property()];
+              _multiple_decorators = [snice.property({ type: Boolean })];
+              _readonly_decorators = [snice.property({ type: Boolean })];
+              _disabled_decorators = [snice.property({ type: Boolean })];
+              _slotsContainer_decorators = [snice.query('.slots-container')];
+              _componentStyles_decorators = [snice.styles()];
+              _renderContent_decorators = [snice.render()];
+              _init_decorators = [snice.ready()];
+              _cleanup_decorators = [snice.dispose()];
+              _handleValueChange_decorators = [snice.watch('value')];
+              _handleDisabledRangesChange_decorators = [snice.watch('disabled-ranges')];
+              _handleGranularityChange_decorators = [snice.watch('granularity')];
+              _handleStartTimeChange_decorators = [snice.watch('start-time')];
+              _handleEndTimeChange_decorators = [snice.watch('end-time')];
+              _emitChange_decorators = [snice.dispatch('time-range-change', { bubbles: true, composed: true })];
+              _emitSelect_decorators = [snice.dispatch('time-range-select', { bubbles: true, composed: true })];
+              _emitComplete_decorators = [snice.dispatch('time-range-complete', { bubbles: true, composed: true })];
+              __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _renderContent_decorators, { kind: "method", name: "renderContent", static: false, private: false, access: { has: obj => "renderContent" in obj, get: obj => obj.renderContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _cleanup_decorators, { kind: "method", name: "cleanup", static: false, private: false, access: { has: obj => "cleanup" in obj, get: obj => obj.cleanup }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleValueChange_decorators, { kind: "method", name: "handleValueChange", static: false, private: false, access: { has: obj => "handleValueChange" in obj, get: obj => obj.handleValueChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleDisabledRangesChange_decorators, { kind: "method", name: "handleDisabledRangesChange", static: false, private: false, access: { has: obj => "handleDisabledRangesChange" in obj, get: obj => obj.handleDisabledRangesChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleGranularityChange_decorators, { kind: "method", name: "handleGranularityChange", static: false, private: false, access: { has: obj => "handleGranularityChange" in obj, get: obj => obj.handleGranularityChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleStartTimeChange_decorators, { kind: "method", name: "handleStartTimeChange", static: false, private: false, access: { has: obj => "handleStartTimeChange" in obj, get: obj => obj.handleStartTimeChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleEndTimeChange_decorators, { kind: "method", name: "handleEndTimeChange", static: false, private: false, access: { has: obj => "handleEndTimeChange" in obj, get: obj => obj.handleEndTimeChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _emitChange_decorators, { kind: "method", name: "emitChange", static: false, private: false, access: { has: obj => "emitChange" in obj, get: obj => obj.emitChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _emitSelect_decorators, { kind: "method", name: "emitSelect", static: false, private: false, access: { has: obj => "emitSelect" in obj, get: obj => obj.emitSelect }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _emitComplete_decorators, { kind: "method", name: "emitComplete", static: false, private: false, access: { has: obj => "emitComplete" in obj, get: obj => obj.emitComplete }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _granularity_decorators, { kind: "field", name: "granularity", static: false, private: false, access: { has: obj => "granularity" in obj, get: obj => obj.granularity, set: (obj, value) => { obj.granularity = value; } }, metadata: _metadata }, _granularity_initializers, _granularity_extraInitializers);
+              __esDecorate(null, null, _startTime_decorators, { kind: "field", name: "startTime", static: false, private: false, access: { has: obj => "startTime" in obj, get: obj => obj.startTime, set: (obj, value) => { obj.startTime = value; } }, metadata: _metadata }, _startTime_initializers, _startTime_extraInitializers);
+              __esDecorate(null, null, _endTime_decorators, { kind: "field", name: "endTime", static: false, private: false, access: { has: obj => "endTime" in obj, get: obj => obj.endTime, set: (obj, value) => { obj.endTime = value; } }, metadata: _metadata }, _endTime_initializers, _endTime_extraInitializers);
+              __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+              __esDecorate(null, null, _disabledRanges_decorators, { kind: "field", name: "disabledRanges", static: false, private: false, access: { has: obj => "disabledRanges" in obj, get: obj => obj.disabledRanges, set: (obj, value) => { obj.disabledRanges = value; } }, metadata: _metadata }, _disabledRanges_initializers, _disabledRanges_extraInitializers);
+              __esDecorate(null, null, _format_decorators, { kind: "field", name: "format", static: false, private: false, access: { has: obj => "format" in obj, get: obj => obj.format, set: (obj, value) => { obj.format = value; } }, metadata: _metadata }, _format_initializers, _format_extraInitializers);
+              __esDecorate(null, null, _multiple_decorators, { kind: "field", name: "multiple", static: false, private: false, access: { has: obj => "multiple" in obj, get: obj => obj.multiple, set: (obj, value) => { obj.multiple = value; } }, metadata: _metadata }, _multiple_initializers, _multiple_extraInitializers);
+              __esDecorate(null, null, _readonly_decorators, { kind: "field", name: "readonly", static: false, private: false, access: { has: obj => "readonly" in obj, get: obj => obj.readonly, set: (obj, value) => { obj.readonly = value; } }, metadata: _metadata }, _readonly_initializers, _readonly_extraInitializers);
+              __esDecorate(null, null, _disabled_decorators, { kind: "field", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+              __esDecorate(null, null, _slotsContainer_decorators, { kind: "field", name: "slotsContainer", static: false, private: false, access: { has: obj => "slotsContainer" in obj, get: obj => obj.slotsContainer, set: (obj, value) => { obj.slotsContainer = value; } }, metadata: _metadata }, _slotsContainer_initializers, _slotsContainer_extraInitializers);
+              __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+              _classThis = _classDescriptor.value;
+              if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+              __runInitializers(_classThis, _classExtraInitializers);
+          }
+          constructor() {
+              super();
+              this.granularity = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _granularity_initializers, 15));
+              this.startTime = (__runInitializers(this, _granularity_extraInitializers), __runInitializers(this, _startTime_initializers, '00:00'));
+              this.endTime = (__runInitializers(this, _startTime_extraInitializers), __runInitializers(this, _endTime_initializers, '23:59'));
+              this.value = (__runInitializers(this, _endTime_extraInitializers), __runInitializers(this, _value_initializers, ''));
+              this.disabledRanges = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _disabledRanges_initializers, ''));
+              this.format = (__runInitializers(this, _disabledRanges_extraInitializers), __runInitializers(this, _format_initializers, '24h'));
+              this.multiple = (__runInitializers(this, _format_extraInitializers), __runInitializers(this, _multiple_initializers, false));
+              this.readonly = (__runInitializers(this, _multiple_extraInitializers), __runInitializers(this, _readonly_initializers, false));
+              this.disabled = (__runInitializers(this, _readonly_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+              this.slotsContainer = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _slotsContainer_initializers, void 0));
+              this.slots = (__runInitializers(this, _slotsContainer_extraInitializers), []);
+              this.selectedIndices = new Set();
+              this.disabledIndices = new Set();
+              this.isDragging = false;
+              this.dragStartIndex = -1;
+              this.dragEndIndex = -1;
+              this.boundHandleMouseMove = this.handleMouseMove.bind(this);
+              this.boundHandleMouseUp = this.handleMouseUp.bind(this);
+              this.boundHandleTouchMove = this.handleTouchMove.bind(this);
+              this.boundHandleTouchEnd = this.handleTouchEnd.bind(this);
+          }
+          componentStyles() {
+              return snice.css /*css*/ `${cssContent}`;
+          }
+          renderContent() {
+              this.buildSlots();
+              this.parseDisabledRanges();
+              this.parseValue();
+              const displayValue = this.getDisplayValue();
+              return snice.html `
+      <div class="wrapper">
+        <div class="header">
+          <span class="header-label">Time</span>
+          <span class="${displayValue ? 'header-value' : 'header-value header-value--empty'}">
+            ${displayValue || 'No selection'}
+          </span>
+        </div>
+        <div class="slots-container"
+          @mousedown=${(e) => this.handleMouseDown(e)}
+          @touchstart=${(e) => this.handleTouchStart(e)}>
+          ${this.slots.map((time, index) => {
+                const isSelected = this.selectedIndices.has(index);
+                const isDisabled = this.disabledIndices.has(index);
+                const isDragging = this.isDragging && this.isInDragRange(index) && !isDisabled;
+                const isHourStart = this.isHourBoundary(time);
+                const ranges = this.getSelectedRanges();
+                const isRangeStart = this.isRangeStart(index, ranges);
+                const isRangeEnd = this.isRangeEnd(index, ranges);
+                const classes = [
+                    'slot',
+                    isSelected ? 'slot--selected' : '',
+                    isDisabled ? 'slot--disabled' : '',
+                    isDragging ? 'slot--dragging' : '',
+                    isHourStart ? 'slot--hour-start' : '',
+                    isRangeStart ? 'slot--range-start' : '',
+                    isRangeEnd ? 'slot--range-end' : '',
+                ].filter(Boolean).join(' ');
+                return snice.html `
+              <div class="${classes}"
+                data-index="${index}"
+                data-time="${time}"
+                tabindex="${isDisabled ? '-1' : '0'}"
+                role="option"
+                aria-selected="${isSelected || isDragging ? 'true' : 'false'}"
+                aria-disabled="${isDisabled ? 'true' : 'false'}"
+                @keydown=${(e) => this.handleSlotKeydown(e, index)}>
+                <span class="slot-time">${this.formatTime(time)}</span>
+                <span class="slot-separator"></span>
+              </div>
+            `;
+            })}
+        </div>
+      </div>
+    `;
+          }
+          init() {
+              this.buildSlots();
+              this.parseDisabledRanges();
+              this.parseValue();
+          }
+          cleanup() {
+              document.removeEventListener('mousemove', this.boundHandleMouseMove);
+              document.removeEventListener('mouseup', this.boundHandleMouseUp);
+              document.removeEventListener('touchmove', this.boundHandleTouchMove);
+              document.removeEventListener('touchend', this.boundHandleTouchEnd);
+          }
+          // --- Slot generation ---
+          buildSlots() {
+              const slots = [];
+              const startMinutes = this.timeToMinutes(this.startTime);
+              const endMinutes = this.timeToMinutes(this.endTime);
+              const gran = this.granularity;
+              for (let m = startMinutes; m <= endMinutes; m += gran) {
+                  slots.push(this.minutesToTime(m));
+              }
+              this.slots = slots;
+          }
+          // --- Parsing ---
+          parseDisabledRanges() {
+              this.disabledIndices.clear();
+              if (!this.disabledRanges)
+                  return;
+              try {
+                  const ranges = JSON.parse(this.disabledRanges);
+                  for (const range of ranges) {
+                      const startIdx = this.getSlotIndex(range.start);
+                      const endIdx = this.getSlotIndex(range.end);
+                      if (startIdx >= 0 && endIdx >= 0) {
+                          for (let i = startIdx; i <= endIdx; i++) {
+                              this.disabledIndices.add(i);
+                          }
+                      }
+                  }
+              }
+              catch {
+                  // Invalid JSON - ignore
+              }
+          }
+          parseValue() {
+              this.selectedIndices.clear();
+              if (!this.value)
+                  return;
+              try {
+                  const ranges = JSON.parse(this.value);
+                  for (const range of ranges) {
+                      const startIdx = this.getSlotIndex(range.start);
+                      const endIdx = this.getSlotIndex(range.end);
+                      if (startIdx >= 0 && endIdx >= 0) {
+                          for (let i = startIdx; i <= endIdx; i++) {
+                              if (!this.disabledIndices.has(i)) {
+                                  this.selectedIndices.add(i);
+                              }
+                          }
+                      }
+                  }
+              }
+              catch {
+                  // Invalid JSON - ignore
+              }
+          }
+          // --- Time utilities ---
+          timeToMinutes(time) {
+              const [h, m] = time.split(':').map(Number);
+              return (h || 0) * 60 + (m || 0);
+          }
+          minutesToTime(minutes) {
+              const h = Math.floor(minutes / 60);
+              const m = minutes % 60;
+              return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
+          }
+          formatTime(time) {
+              if (this.format === '24h')
+                  return time;
+              const [h, m] = time.split(':').map(Number);
+              const period = h >= 12 ? 'PM' : 'AM';
+              const hour12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
+              return `${hour12}:${m.toString().padStart(2, '0')} ${period}`;
+          }
+          getSlotIndex(time) {
+              return this.slots.indexOf(time);
+          }
+          getSlotEndTime(index) {
+              const startMinutes = this.timeToMinutes(this.slots[index]);
+              return this.minutesToTime(startMinutes + this.granularity);
+          }
+          isHourBoundary(time) {
+              return time.endsWith(':00') && time !== this.slots[0];
+          }
+          // --- Range helpers ---
+          isRangeStart(index, ranges) {
+              for (const range of ranges) {
+                  const startIdx = this.getSlotIndex(range.start);
+                  if (startIdx === index)
+                      return true;
+              }
+              return false;
+          }
+          isRangeEnd(index, ranges) {
+              for (const range of ranges) {
+                  const endIdx = this.getSlotIndex(range.end);
+                  if (endIdx === index)
+                      return true;
+              }
+              return false;
+          }
+          isInDragRange(index) {
+              if (this.dragStartIndex < 0)
+                  return false;
+              const low = Math.min(this.dragStartIndex, this.dragEndIndex);
+              const high = Math.max(this.dragStartIndex, this.dragEndIndex);
+              return index >= low && index <= high;
+          }
+          // --- Mouse/touch handling ---
+          getSlotIndexFromEvent(e) {
+              const target = e.target.closest('[data-index]');
+              if (target) {
+                  return parseInt(target.getAttribute('data-index') || '-1', 10);
+              }
+              return -1;
+          }
+          getSlotIndexFromPoint(x, y) {
+              const el = this.shadowRoot?.elementFromPoint(x, y);
+              if (!el)
+                  return -1;
+              const slot = el.closest('[data-index]');
+              if (slot) {
+                  return parseInt(slot.getAttribute('data-index') || '-1', 10);
+              }
+              return -1;
+          }
+          handleMouseDown(e) {
+              if (this.disabled || this.readonly)
+                  return;
+              const index = this.getSlotIndexFromEvent(e);
+              if (index < 0 || this.disabledIndices.has(index))
+                  return;
+              e.preventDefault();
+              this.startDrag(index);
+              document.addEventListener('mousemove', this.boundHandleMouseMove);
+              document.addEventListener('mouseup', this.boundHandleMouseUp);
+          }
+          handleMouseMove(e) {
+              if (!this.isDragging)
+                  return;
+              const index = this.getSlotIndexFromPoint(e.clientX, e.clientY);
+              if (index >= 0) {
+                  this.updateDrag(index);
+              }
+          }
+          handleMouseUp(_e) {
+              document.removeEventListener('mousemove', this.boundHandleMouseMove);
+              document.removeEventListener('mouseup', this.boundHandleMouseUp);
+              if (this.isDragging) {
+                  this.endDrag();
+              }
+          }
+          handleTouchStart(e) {
+              if (this.disabled || this.readonly)
+                  return;
+              const touch = e.touches[0];
+              const index = this.getSlotIndexFromEvent(touch);
+              if (index < 0 || this.disabledIndices.has(index))
+                  return;
+              e.preventDefault();
+              this.startDrag(index);
+              document.addEventListener('touchmove', this.boundHandleTouchMove, { passive: false });
+              document.addEventListener('touchend', this.boundHandleTouchEnd);
+          }
+          handleTouchMove(e) {
+              if (!this.isDragging)
+                  return;
+              e.preventDefault();
+              const touch = e.touches[0];
+              const index = this.getSlotIndexFromPoint(touch.clientX, touch.clientY);
+              if (index >= 0) {
+                  this.updateDrag(index);
+              }
+          }
+          handleTouchEnd(_e) {
+              document.removeEventListener('touchmove', this.boundHandleTouchMove);
+              document.removeEventListener('touchend', this.boundHandleTouchEnd);
+              if (this.isDragging) {
+                  this.endDrag();
+              }
+          }
+          startDrag(index) {
+              this.isDragging = true;
+              this.dragStartIndex = index;
+              this.dragEndIndex = index;
+              this.emitSelect();
+              this.renderContent();
+          }
+          updateDrag(index) {
+              if (index !== this.dragEndIndex) {
+                  this.dragEndIndex = index;
+                  this.renderContent();
+              }
+          }
+          endDrag() {
+              const low = Math.min(this.dragStartIndex, this.dragEndIndex);
+              const high = Math.max(this.dragStartIndex, this.dragEndIndex);
+              // Collect new indices, skipping disabled
+              const newIndices = [];
+              for (let i = low; i <= high; i++) {
+                  if (!this.disabledIndices.has(i)) {
+                      newIndices.push(i);
+                  }
+              }
+              if (this.multiple) {
+                  // Toggle: if all in range are already selected, deselect; else select
+                  const allSelected = newIndices.every(i => this.selectedIndices.has(i));
+                  if (allSelected) {
+                      for (const i of newIndices) {
+                          this.selectedIndices.delete(i);
+                      }
+                  }
+                  else {
+                      for (const i of newIndices) {
+                          this.selectedIndices.add(i);
+                      }
+                  }
+              }
+              else {
+                  // Single range mode: replace selection
+                  this.selectedIndices.clear();
+                  for (const i of newIndices) {
+                      this.selectedIndices.add(i);
+                  }
+              }
+              const completedRange = {
+                  start: this.slots[low],
+                  end: this.slots[high],
+              };
+              this.isDragging = false;
+              this.dragStartIndex = -1;
+              this.dragEndIndex = -1;
+              this.syncValueFromSelection();
+              this.emitComplete(completedRange);
+              this.emitChange();
+              this.renderContent();
+          }
+          // --- Keyboard handling ---
+          handleSlotKeydown(e, index) {
+              if (this.disabled || this.readonly)
+                  return;
+              if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  if (this.disabledIndices.has(index))
+                      return;
+                  if (this.multiple) {
+                      if (this.selectedIndices.has(index)) {
+                          this.selectedIndices.delete(index);
+                      }
+                      else {
+                          this.selectedIndices.add(index);
+                      }
+                  }
+                  else {
+                      this.selectedIndices.clear();
+                      this.selectedIndices.add(index);
+                  }
+                  const range = { start: this.slots[index], end: this.slots[index] };
+                  this.syncValueFromSelection();
+                  this.emitComplete(range);
+                  this.emitChange();
+                  this.renderContent();
+              }
+              else if (e.key === 'ArrowDown') {
+                  e.preventDefault();
+                  this.focusSlot(index + 1);
+              }
+              else if (e.key === 'ArrowUp') {
+                  e.preventDefault();
+                  this.focusSlot(index - 1);
+              }
+              else if (e.key === 'Escape') {
+                  this.clearSelection();
+              }
+          }
+          focusSlot(index) {
+              if (index < 0 || index >= this.slots.length)
+                  return;
+              const slotEl = this.shadowRoot?.querySelector(`[data-index="${index}"]`);
+              slotEl?.focus();
+          }
+          // --- Value synchronization ---
+          syncValueFromSelection() {
+              const ranges = this.getSelectedRanges();
+              this.value = JSON.stringify(ranges);
+          }
+          getDisplayValue() {
+              const ranges = this.getSelectedRanges();
+              if (ranges.length === 0)
+                  return '';
+              return ranges.map(r => {
+                  const startDisplay = this.formatTime(r.start);
+                  const endTime = this.minutesToTime(this.timeToMinutes(r.end) + this.granularity);
+                  const endDisplay = this.formatTime(endTime);
+                  return `${startDisplay} - ${endDisplay}`;
+              }).join(', ');
+          }
+          // --- Public API ---
+          getSelectedRanges() {
+              const sorted = [...this.selectedIndices].sort((a, b) => a - b);
+              if (sorted.length === 0)
+                  return [];
+              const ranges = [];
+              let rangeStart = sorted[0];
+              let prev = sorted[0];
+              for (let i = 1; i < sorted.length; i++) {
+                  if (sorted[i] !== prev + 1) {
+                      ranges.push({
+                          start: this.slots[rangeStart],
+                          end: this.slots[prev],
+                      });
+                      rangeStart = sorted[i];
+                  }
+                  prev = sorted[i];
+              }
+              ranges.push({
+                  start: this.slots[rangeStart],
+                  end: this.slots[prev],
+              });
+              return ranges;
+          }
+          setSelectedRanges(ranges) {
+              this.value = JSON.stringify(ranges);
+              this.parseValue();
+              this.emitChange();
+              this.renderContent();
+          }
+          clearSelection() {
+              this.selectedIndices.clear();
+              this.value = '';
+              this.emitChange();
+              this.renderContent();
+          }
+          isSlotDisabled(time) {
+              const index = this.getSlotIndex(time);
+              return index >= 0 && this.disabledIndices.has(index);
+          }
+          // --- Watchers ---
+          handleValueChange() {
+              this.parseValue();
+          }
+          handleDisabledRangesChange() {
+              this.parseDisabledRanges();
+          }
+          handleGranularityChange() {
+              this.buildSlots();
+              this.parseDisabledRanges();
+              this.parseValue();
+          }
+          handleStartTimeChange() {
+              this.buildSlots();
+              this.parseDisabledRanges();
+              this.parseValue();
+          }
+          handleEndTimeChange() {
+              this.buildSlots();
+              this.parseDisabledRanges();
+              this.parseValue();
+          }
+          // --- Event dispatchers ---
+          emitChange() {
+              return { ranges: this.getSelectedRanges(), component: this };
+          }
+          emitSelect() {
+              return { start: this.slots[this.dragStartIndex], component: this };
+          }
+          emitComplete(range) {
+              return { range, ranges: this.getSelectedRanges(), component: this };
+          }
+      });
+      return _classThis;
+  })();
+
+  exports.SniceTimeRangePicker = SniceTimeRangePicker;
+
+  return exports;
+
+})({}, Snice);
+//# sourceMappingURL=snice-time-range-picker.js.map