@moni-labs/moni-ui 0.4.1 → 0.4.2

package/dist/cdn/components/moni-time-picker.js

@@ -0,0 +1,496 @@
+import{a as e,d as t,i as n,m as r,o as i,r as a,s as o,t as s}from"../chunks/decorate-DxX3e27g.js";import{t as c}from"../chunks/query-SWT-tzvq.js";import"./moni-icon.js";import"./moni-button.js";var l=class extends n{constructor(...e){super(...e),this.value=`00:00`,this.use24Hour=!1,this.mode=`dial`,this.orientation=`auto`,this.hideModeToggle=!1,this.hideHeadline=!1,this.hourLabel=`Hora`,this.minuteLabel=`Minuto`,this.activeSelection=`hour`,this.period=`AM`,this.currentHour=0,this.currentMinute=0,this.isDragging=!1}willUpdate(e){(e.has(`value`)||e.has(`use24Hour`))&&this.parseValue()}parseValue(){let e=this.value.split(`:`),t=parseInt(e[0],10),n=parseInt(e[1],10);(isNaN(t)||t<0||t>23)&&(t=0),(isNaN(n)||n<0||n>59)&&(n=0),this.currentHour=t,this.currentMinute=n,this.use24Hour||(this.period=t>=12?`PM`:`AM`)}updateValue(){let e=this.currentHour,t=this.currentMinute;this.use24Hour||(this.period===`PM`?e<12&&(e+=12):e===12?e=0:e>12&&(e-=12));let n=String(e).padStart(2,`0`),r=String(t).padStart(2,`0`);this.value=`${n}:${r}`,this.dispatchEvent(new CustomEvent(`change`,{detail:{value:this.value},bubbles:!0,composed:!0}))}toggleMode(){this.mode=this.mode===`dial`?`input`:`dial`}setSelection(e){this.activeSelection=e}setPeriod(e){this.period=e,this.updateValue()}handleClockPointerDown(e){this.clockFaceEl&&(this.isDragging=!0,this.clockFaceEl.classList.add(`dragging`),this.clockFaceEl.setPointerCapture(e.pointerId),this.handleClockPointerMove(e))}handleClockPointerMove(e){if(!this.isDragging||!this.clockFaceEl)return;let t=this.clockFaceEl.getBoundingClientRect(),n=t.left+t.width/2,r=t.top+t.height/2,i=e.clientX-n,a=e.clientY-r,o=Math.sqrt(i*i+a*a),s=180/Math.PI*Math.atan2(a,i)+90;if(s<0&&(s+=360),this.activeSelection===`hour`){if(this.use24Hour){let e=o<t.width*.32,n=Math.round(s/30)%12;n===0&&(n=12),this.currentHour=e?n:n===12?0:n+12}else{let e=Math.round(s/30)%12;e===0&&(e=12),this.currentHour=e}}else{let e=Math.round(s/6)%60;this.currentMinute=e}this.updateValue()}handleClockPointerUp(){this.isDragging&&(this.isDragging=!1,this.clockFaceEl?.classList.remove(`dragging`),this.activeSelection===`hour`&&setTimeout(()=>{this.activeSelection=`minute`},300))}handleHourInputChange(e){let t=e.target,n=parseInt(t.value,10);isNaN(n)&&(n=0),this.use24Hour?(n<0&&(n=0),n>23&&(n=23),this.currentHour=n):(n<1&&(n=1),n>12&&(n=12),this.currentHour=n),this.updateValue()}handleMinuteInputChange(e){let t=e.target,n=parseInt(t.value,10);isNaN(n)&&(n=0),n<0&&(n=0),n>59&&(n=59),this.currentMinute=n,this.updateValue()}static{this.styles=[a,r`
+			:host {
+				--_display-size: 6rem;
+				display: inline-flex;
+				flex-direction: column;
+				background-color: transparent;
+				inline-size: min(20.5rem, 100%);
+				max-inline-size: 100%;
+				box-sizing: border-box;
+				container-type: inline-size;
+				color: var(--on-surface);
+				font-family: var(--font);
+				user-select: none;
+			}
+			:host([use-24-hour]) { --_display-size: 7.125rem; }
+
+			/* Forced orientations */
+			:host([orientation="vertical"]) {
+				inline-size: min(20.5rem, 100%);
+			}
+			:host([orientation="vertical"]) .main-content {
+				flex-direction: column;
+			}
+
+			:host([orientation="horizontal"]) {
+				inline-size: auto;
+			}
+			:host([orientation="horizontal"]) .main-content {
+				flex-direction: row;
+				align-items: center;
+				gap: 2rem;
+			}
+			:host([orientation="horizontal"]) .left-pane {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+			}
+
+			/* Main Content (Default vertical) */
+			.main-content {
+				display: flex;
+				flex-direction: column;
+				gap: 1rem;
+				min-inline-size: 0;
+			}
+			:host([mode='input']) .main-content {
+				margin-block: auto;
+				justify-content: center;
+				align-items: center;
+			}
+			.main-content > * { min-inline-size: 0; }
+			.clock-container { flex: none; }
+
+			/* Auto stays vertical because the component can live inside a narrow
+			   dialog even when the browser viewport itself is wide. Consumers that
+			   reserve enough inline space can opt into horizontal explicitly. */
+			@media (min-width: 48rem) {
+				:host([orientation='auto']),
+				:host(:not([orientation])) {
+					inline-size: min(40rem, 100%);
+				}
+				:host([orientation='auto']) .main-content,
+				:host(:not([orientation])) .main-content {
+					flex-direction: row;
+					align-items: center;
+					gap: 2rem;
+				}
+				:host([orientation='auto']) .left-pane,
+				:host(:not([orientation])) .left-pane {
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+				}
+			}
+
+			@keyframes fadeInScale {
+				from {
+					opacity: 0;
+					transform: scale(0.92);
+				}
+				to {
+					opacity: 1;
+					transform: scale(1);
+				}
+			}
+
+			.clock-container,
+			.time-display-container,
+			.input-labels,
+			.display-box {
+				animation: fadeInScale var(--speed3) var(--ease-standard) forwards;
+			}
+
+			.picker-header {
+				font-size: 0.75rem;
+				font-weight: 500;
+				margin-bottom: 1.25rem;
+				color: var(--on-surface-variant);
+				text-transform: uppercase;
+				letter-spacing: 0.1em;
+			}
+
+			/* Display Panel (Time box inputs/views) */
+			.time-display-container {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				margin-bottom: 1.5rem;
+				gap: 0.75rem;
+			}
+
+			.time-display {
+				display: grid;
+				grid-template-columns: var(--_display-size) 1.5rem var(--_display-size);
+				align-items: center;
+				justify-content: center;
+				flex: none;
+				background-color: transparent;
+			}
+
+			.display-box {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 100%;
+				height: 5rem;
+				border-radius: 0.5rem;
+				background-color: var(--surface-container-highest);
+				font-size: 3.5rem;
+				font-weight: 400;
+				color: var(--on-surface);
+				cursor: pointer;
+				transition: background-color var(--speed2);
+				border: 0.125rem solid transparent;
+				text-align: center;
+			}
+
+			:host([use-24-hour]) .display-box { width: 100%; }
+
+			.display-box:hover:not(.active) {
+				background-color: var(--active);
+			}
+
+			.display-box.active {
+				background-color: var(--primary-container);
+				color: var(--on-primary-container);
+				border-color: var(--primary);
+			}
+
+			.display-box input {
+				width: 100%;
+				height: 100%;
+				border: none;
+				background: transparent;
+				text-align: center;
+				font-size: inherit;
+				font-family: inherit;
+				color: inherit;
+				outline: none;
+				padding: 0;
+			}
+
+			/* Remove input spinners */
+			.display-box input::-webkit-outer-spin-button,
+			.display-box input::-webkit-inner-spin-button {
+				-webkit-appearance: none;
+				margin: 0;
+			}
+			.display-box input[type=number] {
+				-moz-appearance: textfield;
+			}
+
+			.separator {
+				font-size: 3rem;
+				font-weight: 400;
+				color: var(--on-surface);
+				width: 1.5rem;
+				text-align: center;
+				line-height: 5rem;
+			}
+
+			/* AM/PM Toggle */
+			.ampm-toggle {
+				display: flex;
+				flex-direction: column;
+				flex: 0 0 3.25rem;
+				border: 0.0625rem solid var(--outline);
+				border-radius: 0.5rem;
+				overflow: hidden;
+				height: 5rem;
+				width: 3.25rem;
+			}
+
+			.ampm-btn {
+				flex: 1;
+				background-color: transparent;
+				border: none;
+				font-size: 0.875rem;
+				font-weight: 500;
+				color: var(--on-surface-variant);
+				cursor: pointer;
+				transition: background-color var(--speed1), color var(--speed1);
+			}
+
+			.ampm-btn.active {
+				background-color: var(--tertiary-container);
+				color: var(--on-tertiary-container);
+			}
+
+			.ampm-btn:first-child {
+				border-bottom: 0.0625rem solid var(--outline);
+			}
+
+			/* Clock Face */
+			.clock-container {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				margin-block: 0.5rem 1.5rem;
+			}
+
+			.clock-face {
+				position: relative;
+				width: 16rem;
+				height: 16rem;
+				border-radius: 50%;
+				background-color: var(--surface-container-highest);
+				touch-action: none;
+				cursor: pointer;
+			}
+
+			@container (max-width: 18rem) {
+				:host { --_display-size: clamp(4.5rem, 35cqi, 6rem); }
+				:host([use-24-hour]) { --_display-size: clamp(4.75rem, 38cqi, 7.125rem); }
+				.time-display-container { gap: .375rem; margin-block-end: 1rem; }
+				.display-box { block-size: 4rem; font-size: 2.75rem; }
+				.separator { inline-size: 1rem; font-size: 2.25rem; line-height: 4rem; }
+				.clock-container { margin-block: .25rem 1rem; }
+			}
+
+			/* Center dot */
+			.clock-center {
+				position: absolute;
+				left: calc(50% - 0.25rem);
+				top: calc(50% - 0.25rem);
+				width: 0.5rem;
+				height: 0.5rem;
+				border-radius: 50%;
+				background-color: var(--primary);
+			}
+
+			/* Clock hand line */
+			.clock-hand {
+				position: absolute;
+				left: calc(50% - 0.0625rem);
+				bottom: 50%;
+				width: 0.125rem;
+				background-color: var(--primary);
+				transform-origin: bottom center;
+				z-index: 1;
+				pointer-events: none;
+				transition: transform var(--speed3) var(--ease-standard), height var(--speed3) var(--ease-standard);
+			}
+
+			/* Hand tip circle selection inside the hand */
+			.clock-hand-selector {
+				position: absolute;
+				top: 0;
+				left: 50%;
+				width: 3rem;
+				height: 3rem;
+				border-radius: 50%;
+				background-color: var(--primary);
+				opacity: 0.3;
+				transform: translate(-50%, -50%) scale(1);
+				z-index: 1;
+				pointer-events: none;
+				transition: transform var(--speed2) var(--ease-standard);
+			}
+
+			/* Disable transition during active drag but keep scale transform animation */
+			.clock-face.dragging .clock-hand,
+			.clock-face:active .clock-hand {
+				transition: none !important;
+			}
+
+			/* Selector handle expands/grows when pressed or dragging */
+			.clock-face.dragging .clock-hand-selector,
+			.clock-face:active .clock-hand-selector {
+				transform: translate(-50%, -50%) scale(1.2);
+			}
+
+			.clock-hand-dot {
+				position: absolute;
+				left: calc(50% - 0.25rem);
+				top: -2rem;
+				width: 0.5rem;
+				height: 0.5rem;
+				border-radius: 50%;
+				background-color: var(--on-primary);
+				z-index: 2;
+				pointer-events: none;
+			}
+
+			@keyframes numberEntrance {
+				from {
+					opacity: 0;
+					transform: translate(-50%, -50%) scale(0.85);
+				}
+				to {
+					opacity: 1;
+					transform: translate(-50%, -50%) scale(1);
+				}
+			}
+
+			/* Clock dial numbers */
+			.clock-number {
+				position: absolute;
+				width: 2.25rem;
+				height: 2.25rem;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 0.875rem;
+				font-weight: 500;
+				color: var(--on-surface);
+				border-radius: 50%;
+				transform: translate(-50%, -50%);
+				transition: background-color var(--speed2), color var(--speed2);
+				z-index: 2;
+				pointer-events: auto;
+				cursor: pointer;
+				animation: numberEntrance var(--speed3) var(--ease-standard) forwards;
+			}
+
+			.clock-number:hover {
+				background-color: var(--active);
+			}
+
+			.clock-number.selected {
+				background-color: var(--primary);
+				color: var(--on-primary);
+				font-weight: bold;
+			}
+
+			.clock-number.selected:hover {
+				background-color: var(--primary);
+			}
+
+			/* Manual Input Mode specific styling */
+			.input-labels {
+				display: grid;
+				grid-template-columns: var(--_display-size) 1.5rem var(--_display-size);
+				justify-content: center;
+				margin-top: -1rem;
+				margin-bottom: 1.5rem;
+				color: var(--on-surface-variant);
+				font-size: 0.75rem;
+				font-weight: 400;
+				padding: 0;
+				inline-size: 100%;
+			}
+
+			.input-labels > span {
+				text-align: center;
+			}
+			.input-labels > span:first-child { grid-column: 1; }
+			.input-labels > span:last-child { grid-column: 3; }
+			:host([mode='input']) .input-labels { margin-block-end: 0; }
+
+			/* Bottom bar */
+			.bottom-actions {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+			}
+
+			.mode-toggle-btn {
+				background: none;
+				border: none;
+				color: var(--primary);
+				cursor: pointer;
+				padding: 0.5rem;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: 50%;
+				transition: background-color var(--speed1);
+			}
+
+			.mode-toggle-btn:hover {
+				background-color: var(--active);
+			}
+
+			.action-buttons {
+				display: flex;
+				gap: 0.5rem;
+			}
+		`]}renderDialClockFace(){let e=this.activeSelection===`hour`,n=0,r=`6.25rem`;if(e){let e=this.currentHour;this.use24Hour?e>12||e===0?(n=(e===0?12:e>12?e-12:e)*30,r=`6.5rem`):(n=e*30,r=`4.5rem`):(e>12&&(e-=12),e===0&&(e=12),n=e*30)}else n=this.currentMinute*6;let i=[];if(e){if(this.use24Hour){for(let e=1;e<=12;e++){let t=e===12?0:e+12,n=(e*30-90)*(Math.PI/180),r=128+104*Math.cos(n),a=128+104*Math.sin(n);i.push({val:t,label:String(t===0?`00`:t),x:`${r/16}rem`,y:`${a/16}rem`,selected:this.currentHour===t})}for(let e=1;e<=12;e++){let t=(e*30-90)*(Math.PI/180),n=128+72*Math.cos(t),r=128+72*Math.sin(t);i.push({val:e,label:String(e),x:`${n/16}rem`,y:`${r/16}rem`,selected:this.currentHour===e})}}else for(let e=1;e<=12;e++){let t=(e*30-90)*(Math.PI/180),n=128+100*Math.cos(t),r=128+100*Math.sin(t),a=this.currentHour;a>12&&(a-=12),a===0&&(a=12),i.push({val:e,label:String(e),x:`${n/16}rem`,y:`${r/16}rem`,selected:a===e})}}else for(let e=0;e<12;e++){let t=e*5,n=(e*30-90)*(Math.PI/180),r=128+100*Math.cos(n),a=128+100*Math.sin(n);i.push({val:t,label:String(t).padStart(2,`0`),x:`${r/16}rem`,y:`${a/16}rem`,selected:this.currentMinute===t})}return t`
+			<div class="clock-container">
+				<div
+					class="clock-face"
+					@pointerdown=${this.handleClockPointerDown}
+					@pointermove=${this.handleClockPointerMove}
+					@pointerup=${this.handleClockPointerUp}
+					@pointercancel=${this.handleClockPointerUp}
+				>
+					<div class="clock-center"></div>
+					<div
+						class="clock-hand"
+						style="transform: rotate(${n}deg); height: ${r};"
+					>
+						<div class="clock-hand-selector"></div>
+						${e&&this.use24Hour&&this.currentHour<=12&&this.currentHour>0?t`<div class="clock-hand-dot"></div>`:``}
+					</div>
+					${i.map(e=>t`
+							<div
+								class="clock-number ${e.selected?`selected`:``}"
+								style="left: ${e.x}; top: ${e.y};"
+							>
+								${e.label}
+							</div>
+						`)}
+				</div>
+			</div>
+		`}render(){let e=this.use24Hour?String(this.currentHour).padStart(2,`0`):String(this.currentHour>12?this.currentHour-12:this.currentHour===0?12:this.currentHour).padStart(2,`0`),n=String(this.currentMinute).padStart(2,`0`);return t`
+			<div class="main-content">
+				<div class="left-pane">
+					${this.hideHeadline?``:t`<div class="picker-header">
+						${this.mode===`dial`?`Select time`:`Enter time`}
+					</div>`}
+
+					<div class="time-display-container">
+						<div class="time-display">
+							<div
+								class="display-box ${this.activeSelection===`hour`?`active`:``}"
+								@click=${()=>this.setSelection(`hour`)}
+							>
+								${this.mode===`input`?t`<input
+											type="number"
+											.value=${e}
+											@change=${this.handleHourInputChange}
+											min=${+!this.use24Hour}
+											max=${this.use24Hour?23:12}
+										/>`:e}
+							</div>
+							<div class="separator">:</div>
+							<div
+								class="display-box ${this.activeSelection===`minute`?`active`:``}"
+								@click=${()=>this.setSelection(`minute`)}
+							>
+								${this.mode===`input`?t`<input
+											type="number"
+											.value=${n}
+											@change=${this.handleMinuteInputChange}
+											min="0"
+											max="59"
+										/>`:n}
+							</div>
+						</div>
+
+						${this.use24Hour?``:t`
+									<div class="ampm-toggle">
+										<button
+											class="ampm-btn ${this.period===`AM`?`active`:``}"
+											@click=${()=>this.setPeriod(`AM`)}
+										>
+											AM
+										</button>
+										<button
+											class="ampm-btn ${this.period===`PM`?`active`:``}"
+											@click=${()=>this.setPeriod(`PM`)}
+										>
+											PM
+										</button>
+									</div>
+								`}
+					</div>
+
+					${this.mode===`input`?t`
+								<div class="input-labels">
+									<span>${this.hourLabel}</span>
+									<span>${this.minuteLabel}</span>
+								</div>
+							`:``}
+				</div>
+
+				${this.mode===`dial`?this.renderDialClockFace():``}
+			</div>
+
+			${this.hideModeToggle?``:t`<div class="bottom-actions">
+				<button class="mode-toggle-btn" @click=${this.toggleMode} aria-label="Toggle input mode">
+					<moni-icon name=${this.mode===`dial`?`keyboard`:`schedule`}></moni-icon>
+				</button>
+			</div>`}
+		`}};s([i({reflect:!0})],l.prototype,`value`,void 0),s([i({type:Boolean,reflect:!0,attribute:`use-24-hour`})],l.prototype,`use24Hour`,void 0),s([i({reflect:!0})],l.prototype,`mode`,void 0),s([i({reflect:!0})],l.prototype,`orientation`,void 0),s([i({type:Boolean,reflect:!0,attribute:`hide-mode-toggle`})],l.prototype,`hideModeToggle`,void 0),s([i({type:Boolean,reflect:!0,attribute:`hide-headline`})],l.prototype,`hideHeadline`,void 0),s([i({reflect:!0,attribute:`hour-label`})],l.prototype,`hourLabel`,void 0),s([i({reflect:!0,attribute:`minute-label`})],l.prototype,`minuteLabel`,void 0),s([e()],l.prototype,`activeSelection`,void 0),s([e()],l.prototype,`period`,void 0),s([e()],l.prototype,`currentHour`,void 0),s([e()],l.prototype,`currentMinute`,void 0),s([c(`.clock-face`)],l.prototype,`clockFaceEl`,void 0),l=s([o(`moni-time-picker`)],l);

package/dist/cdn/components/moni-toolbar.js

@@ -0,0 +1,71 @@
+import{d as e,i as t,m as n,o as r,r as i,s as a,t as o}from"../chunks/decorate-DxX3e27g.js";var s=class extends t{constructor(...e){super(...e),this.type=`standard`,this.scrolled=!1,this.title=``}static{this.styles=[i,n`
+			:host {
+				display: block;
+				position: relative;
+				z-index: var(--z-index-toolbar, 1000);
+			}
+
+			.container {
+				display: flex;
+				align-items: center;
+				gap: 1rem;
+				block-size: 4rem;
+				padding-inline: 0.25rem;
+				padding-block: 0.5rem;
+				background-color: var(--surface-container);
+				color: var(--on-surface);
+				font-family: var(--font);
+				transition: box-shadow var(--speed2), background-color var(--speed2);
+			}
+
+			:host([type='standard']) .container {
+				box-shadow: var(--shadow1);
+			}
+
+			:host([type='floating']) .container {
+				margin: 0.25rem;
+				border-radius: 0.5rem;
+				box-shadow: var(--shadow2);
+			}
+
+			:host([type='standard'][scroll]) .container {
+				box-shadow: var(--shadow3);
+			}
+
+			.leading,
+			.trailing {
+				display: inline-flex;
+				align-items: center;
+				gap: 0.25rem;
+				flex: none;
+			}
+
+			.title {
+				flex: auto;
+				font-size: 1.375rem;
+				line-height: 1.75rem;
+				font-weight: 400;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				padding-inline-start: 0.75rem;
+			}
+
+			::slotted([slot='action-button']) {
+				position: absolute;
+				inset-block-end: -1.75rem;
+				inset-inline-end: 1rem;
+				z-index: 1;
+			}
+		`]}render(){return e`
+			<header class="container" part="container">
+				<span class="leading" part="leading"><slot name="leading"></slot></span>
+				<span class="title" part="title">
+					${this.title||e`<slot></slot>`}
+				</span>
+				<span class="trailing" part="trailing">
+					<slot name="trailing"></slot>
+				</span>
+			</header>
+			<slot name="action-button"></slot>
+		`}};o([r({reflect:!0})],s.prototype,`type`,void 0),o([r({type:Boolean,reflect:!0,attribute:`scroll`})],s.prototype,`scrolled`,void 0),o([r({reflect:!0})],s.prototype,`title`,void 0),s=o([a(`moni-toolbar`)],s);