@melodicdev/components 1.5.9 → 1.5.11

package/lib/components/forms/time-picker/time-picker.styles.js

@@ -122,32 +122,24 @@ export const timePickerStyles = () => css `
 		margin-left: var(--ml-space-0-5);
 	}
 
-	/* Trigger button */
+	/* Trigger wrapper */
 	.ml-time-picker__trigger {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-time-picker-gap);
 		width: 100%;
-		padding: var(--ml-time-picker-padding);
 		border: var(--ml-time-picker-border-width) solid var(--ml-time-picker-border-color);
 		border-radius: var(--ml-time-picker-border-radius);
 		background-color: var(--ml-time-picker-bg);
-		color: var(--ml-time-picker-color);
-		cursor: pointer;
-		font-family: var(--ml-time-picker-font-family);
-		font-size: var(--ml-time-picker-font-size);
-		text-align: left;
 		transition:
 			border-color var(--ml-time-picker-transition-duration) var(--ml-time-picker-transition-easing),
 			box-shadow var(--ml-time-picker-transition-duration) var(--ml-time-picker-transition-easing);
 	}
 
-	.ml-time-picker__trigger:hover:not(:disabled) {
+	.ml-time-picker__trigger:hover:not(:has(:disabled)) {
 		border-color: var(--ml-time-picker-hover-border-color);
 	}
 
-	.ml-time-picker__trigger:focus-visible {
-		outline: none;
+	.ml-time-picker__trigger:focus-within {
 		border-color: var(--ml-time-picker-focus-border-color);
 		box-shadow: var(--ml-time-picker-focus-shadow);
 	}
@@ -161,7 +153,7 @@ export const timePickerStyles = () => css `
 		border-color: var(--ml-time-picker-error-border-color);
 	}
 
-	.ml-time-picker--error .ml-time-picker__trigger:focus-visible,
+	.ml-time-picker--error .ml-time-picker__trigger:focus-within,
 	.ml-time-picker--error.ml-time-picker--open .ml-time-picker__trigger {
 		box-shadow: var(--ml-time-picker-error-focus-shadow);
 	}
@@ -172,39 +164,73 @@ export const timePickerStyles = () => css `
 		background-color: var(--ml-time-picker-disabled-bg);
 	}
 
+	/* Time input */
+	.ml-time-picker__input {
+		flex: 1;
+		min-width: 0;
+		border: none;
+		outline: none;
+		background: transparent;
+		color: var(--ml-time-picker-color);
+		font-family: var(--ml-time-picker-font-family);
+		font-size: var(--ml-time-picker-font-size);
+		padding: var(--ml-time-picker-padding);
+	}
+
+	/* Hide native time picker indicator across browsers */
+	.ml-time-picker__input::-webkit-calendar-picker-indicator {
+		display: none;
+		-webkit-appearance: none;
+	}
+
+	.ml-time-picker__input::-webkit-date-and-time-value {
+		text-align: left;
+	}
+
+	.ml-time-picker__input:disabled {
+		cursor: not-allowed;
+	}
+
 	/* Sizes */
-	.ml-time-picker--sm .ml-time-picker__trigger {
+	.ml-time-picker--sm .ml-time-picker__input {
 		padding: var(--ml-space-2) var(--ml-space-3);
 		font-size: var(--ml-text-sm);
 	}
 
-	.ml-time-picker--md .ml-time-picker__trigger {
+	.ml-time-picker--md .ml-time-picker__input {
 		padding: var(--ml-space-2-5) var(--ml-space-3-5);
 		font-size: var(--ml-text-sm);
 	}
 
-	.ml-time-picker--lg .ml-time-picker__trigger {
+	.ml-time-picker--lg .ml-time-picker__input {
 		padding: var(--ml-space-3) var(--ml-space-3-5);
 		font-size: var(--ml-text-base);
 	}
 
-	/* Icon */
-	.ml-time-picker__icon {
-		flex-shrink: 0;
+	/* Clock button */
+	.ml-time-picker__clock-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		padding: 0 var(--ml-space-3) 0 0;
 		color: var(--ml-time-picker-icon-color);
+		transition: color var(--ml-time-picker-transition-duration) var(--ml-time-picker-transition-easing);
 	}
 
-	/* Value */
-	.ml-time-picker__value {
-		flex: 1;
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
+	.ml-time-picker__clock-btn:hover:not(:disabled) {
+		color: var(--ml-time-picker-color);
+	}
+
+	.ml-time-picker__clock-btn:disabled {
+		cursor: not-allowed;
 	}
 
-	.ml-time-picker__value--placeholder {
-		color: var(--ml-time-picker-placeholder-color);
+	/* Icon */
+	.ml-time-picker__icon {
+		flex-shrink: 0;
 	}
 
 	/* Popover */

package/lib/components/forms/time-picker/time-picker.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/time-picker/time-picker.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,mBAAmB,6CA6HxD"}
+{"version":3,"file":"time-picker.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/time-picker/time-picker.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,mBAAmB,6CAwIxD"}

package/lib/components/forms/time-picker/time-picker.template.js

@@ -15,23 +15,34 @@ export function timePickerTemplate(c) {
 				</label>
 			`)}
 
-			<button
-				type="button"
-				class="ml-time-picker__trigger"
-				?disabled=${c.disabled}
-				aria-haspopup="dialog"
-				aria-expanded=${c.isOpen ? 'true' : 'false'}
-				@click=${c.togglePopover}
-				@keydown=${c.handleKeyDown}
-			>
-				<ml-icon icon="clock" size="sm" class="ml-time-picker__icon"></ml-icon>
-				<span class=${classMap({
-        'ml-time-picker__value': true,
-        'ml-time-picker__value--placeholder': !c.value
-    })}>
-					${c.value ? c.displayValue : c.placeholder}
-				</span>
-			</button>
+			<div class="ml-time-picker__trigger">
+				<input
+					type="time"
+					class="ml-time-picker__input"
+					.value=${c.value}
+					min=${c.min}
+					max=${c.max}
+					step=${c.showSeconds ? '1' : '60'}
+					placeholder=${c.placeholder}
+					?disabled=${c.disabled}
+					?required=${c.required}
+					aria-haspopup="dialog"
+					aria-expanded=${c.isOpen ? 'true' : 'false'}
+					@change=${c.handleTimeInput}
+					@click=${c.handleInputClick}
+					@keydown=${c.handleKeyDown}
+				/>
+				<button
+					type="button"
+					class="ml-time-picker__clock-btn"
+					?disabled=${c.disabled}
+					aria-label="Open time picker"
+					tabindex="-1"
+					@click=${c.togglePopover}
+				>
+					<ml-icon icon="clock" size="sm" class="ml-time-picker__icon"></ml-icon>
+				</button>
+			</div>
 
 			<div class="ml-time-picker__popover" popover="auto">
 				<div class="ml-time-picker__spinner-group">

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@melodicdev/components",
-	"version": "1.5.9",
+	"version": "1.5.11",
 	"description": "Themeable UI component library built on the Melodic Framework",
 	"license": "MIT",
 	"author": "Melodic Development",