@melodicdev/components 1.0.21 → 1.1.0

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

@@ -0,0 +1,123 @@
+import { html, classMap, when } from '@melodicdev/core';
+export function timePickerTemplate(c) {
+    return html `
+		<div class=${classMap({
+        'ml-time-picker': true,
+        [`ml-time-picker--${c.size}`]: true,
+        'ml-time-picker--error': !!c.error,
+        'ml-time-picker--disabled': c.disabled,
+        'ml-time-picker--open': c.isOpen
+    })}>
+			${when(!!c.label, () => html `
+				<label class="ml-time-picker__label">
+					${c.label}
+					${when(c.required, () => html `<span class="ml-time-picker__required">*</span>`)}
+				</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__popover" popover="auto">
+				<div class="ml-time-picker__spinner-group">
+					<!-- Hour spinner -->
+					<div class="ml-time-picker__spinner">
+						<button type="button" class="ml-time-picker__spin-btn" aria-label="Increment hour" @click=${c.incrementHour}>
+							<ml-icon icon="caret-up" size="sm"></ml-icon>
+						</button>
+						<input
+							type="text"
+							inputmode="numeric"
+							class="ml-time-picker__spin-input"
+							.value=${c.displayHour}
+							aria-label="Hour"
+							@input=${c.handleHourInput}
+							@focus=${c.handleInputFocus}
+							@blur=${c.handleHourBlur}
+							@keydown=${c.handleSpinnerKeyDown}
+						/>
+						<button type="button" class="ml-time-picker__spin-btn" aria-label="Decrement hour" @click=${c.decrementHour}>
+							<ml-icon icon="caret-down" size="sm"></ml-icon>
+						</button>
+					</div>
+
+					<span class="ml-time-picker__separator">:</span>
+
+					<!-- Minute spinner -->
+					<div class="ml-time-picker__spinner">
+						<button type="button" class="ml-time-picker__spin-btn" aria-label="Increment minute" @click=${c.incrementMinute}>
+							<ml-icon icon="caret-up" size="sm"></ml-icon>
+						</button>
+						<input
+							type="text"
+							inputmode="numeric"
+							class="ml-time-picker__spin-input"
+							.value=${c.displayMinute}
+							aria-label="Minute"
+							@input=${c.handleMinuteInput}
+							@focus=${c.handleInputFocus}
+							@blur=${c.handleMinuteBlur}
+							@keydown=${c.handleSpinnerKeyDown}
+						/>
+						<button type="button" class="ml-time-picker__spin-btn" aria-label="Decrement minute" @click=${c.decrementMinute}>
+							<ml-icon icon="caret-down" size="sm"></ml-icon>
+						</button>
+					</div>
+
+					${when(c.showSeconds, () => html `
+						<span class="ml-time-picker__separator">:</span>
+						<div class="ml-time-picker__spinner">
+							<button type="button" class="ml-time-picker__spin-btn" aria-label="Increment second" @click=${c.incrementSecond}>
+								<ml-icon icon="caret-up" size="sm"></ml-icon>
+							</button>
+							<input
+								type="text"
+								inputmode="numeric"
+								class="ml-time-picker__spin-input"
+								.value=${c.displaySecond}
+								aria-label="Second"
+								@input=${c.handleSecondInput}
+								@focus=${c.handleInputFocus}
+								@blur=${c.handleSecondBlur}
+								@keydown=${c.handleSpinnerKeyDown}
+							/>
+							<button type="button" class="ml-time-picker__spin-btn" aria-label="Decrement second" @click=${c.decrementSecond}>
+								<ml-icon icon="caret-down" size="sm"></ml-icon>
+							</button>
+						</div>
+					`)}
+
+					${when(c.use12Hour, () => html `
+						<div class="ml-time-picker__period">
+							<button type="button" class="ml-time-picker__period-btn" @click=${c.togglePeriod}>
+								${c.editPeriod}
+							</button>
+						</div>
+					`)}
+				</div>
+
+				<div class="ml-time-picker__footer">
+					<button type="button" class="ml-time-picker__now-btn" @click=${c.handleNowClick}>Now</button>
+					<button type="button" class="ml-time-picker__confirm-btn" @click=${c.confirmSelection}>OK</button>
+				</div>
+			</div>
+
+			${when(!!c.error, () => html `<span class="ml-time-picker__error">${c.error}</span>`, () => html `${when(!!c.hint, () => html `<span class="ml-time-picker__hint">${c.hint}</span>`)}`)}
+		</div>
+	`;
+}

package/lib/components/foundation/card/card.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation/card/card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,iDAqEtB,CAAC"}
+{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation/card/card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,iDAsEtB,CAAC"}

package/lib/components/foundation/card/card.styles.js

@@ -8,6 +8,7 @@ export const cardStyles = () => css `
 		background-color: var(--ml-color-surface);
 		border-radius: var(--ml-radius-lg);
 		overflow: hidden;
+		height: 100%;
 	}
 
 	.ml-card--default {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@melodicdev/components",
-	"version": "1.0.21",
+	"version": "1.1.0",
 	"description": "Themeable UI component library built on the Melodic Framework",
 	"license": "MIT",
 	"author": "Melodic Development",
@@ -117,6 +117,14 @@
 			"types": "./lib/components/forms/date-picker/index.d.ts",
 			"default": "./lib/components/forms/date-picker/index.js"
 		},
+		"./time-picker": {
+			"types": "./lib/components/forms/time-picker/index.d.ts",
+			"default": "./lib/components/forms/time-picker/index.js"
+		},
+		"./date-time-picker": {
+			"types": "./lib/components/forms/date-time-picker/index.d.ts",
+			"default": "./lib/components/forms/date-time-picker/index.js"
+		},
 		"./dialog": {
 			"types": "./lib/components/overlays/dialog/index.d.ts",
 			"default": "./lib/components/overlays/dialog/index.js"