@moni-labs/moni-ui 0.4.1 → 0.4.2

package/dist/cdn/components/moni-button-segment.js

@@ -0,0 +1,272 @@
+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";import"./moni-icon.js";var s=class extends t{constructor(...e){super(...e),this.value=`on`,this.checked=!1,this.size=`small`,this.disabled=!1,this.position=`solo`,this.hideCheck=!1}static{this.styles=[i,n`
+			.label {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				font-family: inherit;
+				font-size: inherit;
+				font-weight: inherit;
+				color: inherit;
+				text-align: center;
+			}
+			:host {
+				display: inline-flex;
+				vertical-align: middle;
+				position: relative;
+				z-index: 1;
+			}
+
+			/* Collapsing margins on host */
+			:host(:not([position='first'])) {
+				margin-inline-start: var(--moni-button-segment-gap, -0.0625rem);
+			}
+
+			:host([disabled]) {
+				pointer-events: none;
+			}
+
+			.button {
+				--_segment-height: 3.5rem;
+				--_segment-padding: 1.5rem;
+				--_segment-gap: 0.5rem;
+				--_segment-icon: 1.5rem;
+				--_segment-square-radius: 1rem;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				box-sizing: border-box;
+				height: var(--_segment-height);
+				width: 100%;
+				padding: 0 var(--_segment-padding);
+				font-size: 1rem;
+				font-weight: 500;
+				font-family: inherit;
+				color: var(--on-surface);
+				background-color: transparent;
+				border: 0.0625rem solid var(--outline-variant, var(--outline, #79747e));
+				cursor: pointer;
+				user-select: none;
+				transition:
+					background-color var(--speed2),
+					color var(--speed2),
+					border-radius var(--speed2),
+					transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
+					box-shadow 250ms ease;
+				position: relative;
+				gap: var(--_segment-gap);
+			}
+
+			.button::after {
+				content: '';
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				min-width: 100%;
+				min-height: 3rem; /* 48px minimum touch target */
+				transform: translate(-50%, -50%);
+			}
+
+			/* Sizes */
+			.button.xsmall {
+				--_segment-height: 2rem;
+				--_segment-padding: 0.75rem;
+				--_segment-gap: 0.25rem;
+				--_segment-icon: 1.25rem;
+				--_segment-square-radius: 0.75rem;
+				min-width: 0;
+				font-size: 0.875rem;
+			}
+			.button.small {
+				--_segment-height: 2.5rem;
+				--_segment-padding: 1rem;
+				--_segment-gap: 0.5rem;
+				--_segment-icon: 1.25rem;
+				--_segment-square-radius: 0.75rem;
+				min-width: 0;
+			}
+			.button.large {
+				--_segment-height: 6rem;
+				--_segment-padding: 3rem;
+				--_segment-gap: 0.75rem;
+				--_segment-icon: 2rem;
+				--_segment-square-radius: 1.75rem;
+				font-size: 1.5rem;
+			}
+			.button.xlarge,
+			.button.extra {
+				--_segment-height: 8.5rem;
+				--_segment-padding: 4rem;
+				--_segment-gap: 1rem;
+				--_segment-icon: 2.5rem;
+				--_segment-square-radius: 1.75rem;
+				font-size: 2rem;
+			}
+
+			:host([disabled]) .button {
+				opacity: 0.38;
+				cursor: not-allowed;
+			}
+
+			/* Border Radius positioning */
+			:host([position='first']) .button {
+				border-radius: var(--moni-button-segment-radius-left, 1.25rem 0.5rem 0.5rem 1.25rem);
+			}
+			:host([position='first']) .button.xsmall {
+				border-radius: var(--moni-button-segment-radius-left, 0.875rem 0.25rem 0.25rem 0.875rem);
+			}
+			:host([position='first']) .button.small {
+				border-radius: var(--moni-button-segment-radius-left, 1rem 0.5rem 0.5rem 1rem);
+			}
+			:host([position='first']) .button.large {
+				border-radius: var(--moni-button-segment-radius-left, 1.5rem 1rem 1rem 1.5rem);
+			}
+			:host([position='first']) .button.xlarge,
+			:host([position='first']) .button.extra {
+				border-radius: var(--moni-button-segment-radius-left, 1.75rem 1.25rem 1.25rem 1.75rem);
+			}
+
+			:host([position='last']) .button {
+				border-radius: var(--moni-button-segment-radius-right, 0.5rem 1.25rem 1.25rem 0.5rem);
+			}
+			:host([position='last']) .button.xsmall {
+				border-radius: var(--moni-button-segment-radius-right, 0.25rem 0.875rem 0.875rem 0.25rem);
+			}
+			:host([position='last']) .button.small {
+				border-radius: var(--moni-button-segment-radius-right, 0.5rem 1rem 1rem 0.5rem);
+			}
+			:host([position='last']) .button.large {
+				border-radius: var(--moni-button-segment-radius-right, 1rem 1.5rem 1.5rem 1rem);
+			}
+			:host([position='last']) .button.xlarge,
+			:host([position='last']) .button.extra {
+				border-radius: var(--moni-button-segment-radius-right, 1.25rem 1.75rem 1.75rem 1.25rem);
+			}
+
+			:host([position='middle']) .button {
+				border-radius: var(--moni-button-segment-radius-middle, 0.5rem);
+			}
+			:host([position='middle']) .button.xsmall {
+				border-radius: var(--moni-button-segment-radius-middle, 0.25rem);
+			}
+			:host([position='middle']) .button.small {
+				border-radius: var(--moni-button-segment-radius-middle, 0.5rem);
+			}
+			:host([position='middle']) .button.large {
+				border-radius: var(--moni-button-segment-radius-middle, 1rem);
+			}
+			:host([position='middle']) .button.xlarge,
+			:host([position='middle']) .button.extra {
+				border-radius: var(--moni-button-segment-radius-middle, 1.25rem);
+			}
+
+			:host([position='solo']) .button {
+				border-radius: 1.25rem;
+			}
+			:host([position='solo']) .button.xsmall {
+				border-radius: 0.875rem;
+			}
+			:host([position='solo']) .button.small {
+				border-radius: 1rem;
+			}
+			:host([position='solo']) .button.large {
+				border-radius: 1.5rem;
+			}
+			:host([position='solo']) .button.xlarge,
+			:host([position='solo']) .button.extra {
+				border-radius: 1.75rem;
+			}
+
+			/* Hover and Active states */
+			:host(:hover:not([disabled])) {
+				z-index: 2;
+			}
+			:host(:hover:not([disabled])) .button {
+				transform: translateY(-0.0625rem);
+			}
+			:host(:hover:not([disabled]):not([checked])) .button {
+				background-color: var(--surface-container-high, rgba(0, 0, 0, 0.04));
+			}
+
+			:host(:active:not([disabled])) .button {
+				transform: translateY(0.0625rem) scale(0.97);
+			}
+
+			/* Checked state */
+			:host([checked]) {
+				z-index: 3;
+			}
+			:host([checked]) .button {
+				background-color: var(--secondary-container);
+				color: var(--on-secondary-container);
+			}
+
+			:host([checked]:hover:not([disabled])) {
+				z-index: 3;
+			}
+			:host([checked]:hover:not([disabled])) .button {
+				background-color: var(--secondary-container);
+				opacity: 0.92;
+			}
+
+			/* Checkmark Animation */
+			.checkmark {
+				--moni-icon-size: var(--_segment-icon);
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				font-size: var(--_segment-icon);
+				inline-size: 0;
+				block-size: var(--_segment-icon);
+				opacity: 0;
+				transform: scale(0);
+				margin-inline-end: calc(var(--_segment-gap) * -1); /* Cancels host gap when collapsed */
+				transition:
+					inline-size var(--speed2) var(--ease-standard),
+					margin-inline-end var(--speed2) var(--ease-standard),
+					opacity var(--speed2) var(--ease-standard),
+					transform var(--speed2) var(--ease-standard);
+				overflow: hidden;
+				color: inherit;
+				flex: none;
+			}
+
+			:host([checked]:not([hide-check])) .checkmark {
+				inline-size: var(--_segment-icon);
+				margin-inline-end: 0;
+				opacity: 1;
+				transform: scale(1);
+			}
+
+			/* Icon slot */
+			::slotted([slot='icon']) {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				font-size: var(--_segment-icon);
+				inline-size: var(--_segment-icon);
+				block-size: var(--_segment-icon);
+				color: inherit;
+				flex: none;
+			}
+
+			:host([position='first']) .button {
+				border-radius: 999px var(--_segment-square-radius) var(--_segment-square-radius) 999px;
+			}
+			:host([position='last']) .button {
+				border-radius: var(--_segment-square-radius) 999px 999px var(--_segment-square-radius);
+			}
+			:host([position='middle']) .button {
+				border-radius: var(--_segment-square-radius);
+			}
+			:host([position='solo']) .button {
+				border-radius: 999px;
+			}
+		`]}render(){return e`
+			<button class="button ${this.size}" type="button" ?disabled=${this.disabled}>
+				<span class="checkmark" part="checkmark">
+					<moni-icon name="check"></moni-icon>
+				</span>
+				<slot name="icon"></slot>
+				<span class="label" part="label"><slot></slot></span>
+			</button>
+		`}};o([r({reflect:!0})],s.prototype,`value`,void 0),o([r({type:Boolean,reflect:!0})],s.prototype,`checked`,void 0),o([r({reflect:!0})],s.prototype,`size`,void 0),o([r({type:Boolean,reflect:!0})],s.prototype,`disabled`,void 0),o([r({reflect:!0})],s.prototype,`position`,void 0),o([r({type:Boolean,reflect:!0,attribute:`hide-check`})],s.prototype,`hideCheck`,void 0),s=o([a(`moni-button-segment`)],s);