@nxgt/material 2.12.0 → 2.14.0

package/dist/components/ui/overlays/drawer/vaul-drawer.css

@@ -0,0 +1,199 @@
+/*! vaul 1.1.2's stylesheet (MIT, Emil Kowalski), its rules. vaul injects it as a
+ * `<style>` at module load; the library build strips that call
+ * (build/strip-style-injection.ts, which pins the injected text) and ships
+ * it here instead, so a strict CSP needs no 'unsafe-inline'. `vaul/style.css`
+ * is not in vaul's `exports`, hence the copy: update it with vaul.
+ *
+ * Left out: `[data-vaul-handle-hitarea]: { … }` under `(pointer: fine)`, an
+ * invalid selector every browser drops.
+ *
+ * MIT License. Copyright (c) 2023 Emil Kowalski
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED. See vaul's LICENSE.md for the full text.
+ */
+[data-vaul-drawer] {
+	touch-action: none;
+	will-change: transform;
+	transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+	animation-duration: 0.5s;
+	animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="bottom"][data-state="open"] {
+	animation-name: slideFromBottom;
+}
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="bottom"][data-state="closed"] {
+	animation-name: slideToBottom;
+}
+
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="top"][data-state="open"] {
+	animation-name: slideFromTop;
+}
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="top"][data-state="closed"] {
+	animation-name: slideToTop;
+}
+
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="left"][data-state="open"] {
+	animation-name: slideFromLeft;
+}
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="left"][data-state="closed"] {
+	animation-name: slideToLeft;
+}
+
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="right"][data-state="open"] {
+	animation-name: slideFromRight;
+}
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="right"][data-state="closed"] {
+	animation-name: slideToRight;
+}
+
+[data-vaul-drawer][data-vaul-snap-points="true"][data-vaul-drawer-direction="bottom"] {
+	transform: translate3d(0, var(--initial-transform, 100%), 0);
+}
+
+[data-vaul-drawer][data-vaul-snap-points="true"][data-vaul-drawer-direction="top"] {
+	transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
+}
+
+[data-vaul-drawer][data-vaul-snap-points="true"][data-vaul-drawer-direction="left"] {
+	transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
+}
+
+[data-vaul-drawer][data-vaul-snap-points="true"][data-vaul-drawer-direction="right"] {
+	transform: translate3d(var(--initial-transform, 100%), 0, 0);
+}
+
+[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="top"] {
+	transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+
+[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="bottom"] {
+	transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+
+[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="left"] {
+	transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+
+[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="right"] {
+	transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+
+[data-vaul-overlay][data-vaul-snap-points="false"] {
+	animation-duration: 0.5s;
+	animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+}
+[data-vaul-overlay][data-vaul-snap-points="false"][data-state="open"] {
+	animation-name: fadeIn;
+}
+[data-vaul-overlay][data-state="closed"] {
+	animation-name: fadeOut;
+}
+
+[data-vaul-animate="false"] {
+	/* biome-ignore lint/complexity/noImportantStyles: vaul's own rule */
+	animation: none !important;
+}
+
+[data-vaul-overlay][data-vaul-snap-points="true"] {
+	opacity: 0;
+	transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-vaul-overlay][data-vaul-snap-points="true"] {
+	opacity: 1;
+}
+
+[data-vaul-drawer]:not([data-vaul-custom-container="true"])::after {
+	content: "";
+	position: absolute;
+	background: inherit;
+	background-color: inherit;
+}
+
+[data-vaul-drawer][data-vaul-drawer-direction="top"]::after {
+	top: initial;
+	bottom: 100%;
+	left: 0;
+	right: 0;
+	height: 200%;
+}
+
+[data-vaul-drawer][data-vaul-drawer-direction="bottom"]::after {
+	top: 100%;
+	bottom: initial;
+	left: 0;
+	right: 0;
+	height: 200%;
+}
+
+[data-vaul-drawer][data-vaul-drawer-direction="left"]::after {
+	left: initial;
+	right: 100%;
+	top: 0;
+	bottom: 0;
+	width: 200%;
+}
+
+[data-vaul-drawer][data-vaul-drawer-direction="right"]::after {
+	left: 100%;
+	right: initial;
+	top: 0;
+	bottom: 0;
+	width: 200%;
+}
+
+[data-vaul-overlay][data-vaul-snap-points="true"]:not(
+	[data-vaul-snap-points-overlay="true"]
+):not([data-state="closed"]) {
+	opacity: 0;
+}
+
+[data-vaul-overlay][data-vaul-snap-points-overlay="true"] {
+	opacity: 1;
+}
+
+[data-vaul-handle] {
+	display: block;
+	position: relative;
+	opacity: 0.7;
+	background: #e2e2e4;
+	margin-left: auto;
+	margin-right: auto;
+	height: 5px;
+	width: 32px;
+	border-radius: 1rem;
+	touch-action: pan-y;
+}
+
+[data-vaul-handle]:active,
+[data-vaul-handle]:hover {
+	opacity: 1;
+}
+
+[data-vaul-handle-hitarea] {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	width: max(100%, 2.75rem); /* 44px */
+	height: max(100%, 2.75rem); /* 44px */
+	touch-action: inherit;
+}
+
+@media (hover: hover) and (pointer: fine) {
+	[data-vaul-drawer] {
+		user-select: none;
+	}
+}

package/dist/components/ui/overlays/drawer/vaul-keyframes.css

@@ -0,0 +1,95 @@
+/*! vaul 1.1.2's stylesheet (MIT, Emil Kowalski), its keyframes. vaul injects it as a
+ * `<style>` at module load; the library build strips that call
+ * (build/strip-style-injection.ts, which pins the injected text) and ships
+ * it here instead, so a strict CSP needs no 'unsafe-inline'. `vaul/style.css`
+ * is not in vaul's `exports`, hence the copy: update it with vaul.
+ *
+ * MIT License. Copyright (c) 2023 Emil Kowalski
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED. See vaul's LICENSE.md for the full text.
+ */
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes fadeOut {
+	to {
+		opacity: 0;
+	}
+}
+
+@keyframes slideFromBottom {
+	from {
+		transform: translate3d(0, var(--initial-transform, 100%), 0);
+	}
+	to {
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes slideToBottom {
+	to {
+		transform: translate3d(0, var(--initial-transform, 100%), 0);
+	}
+}
+
+@keyframes slideFromTop {
+	from {
+		transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
+	}
+	to {
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes slideToTop {
+	to {
+		transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
+	}
+}
+
+@keyframes slideFromLeft {
+	from {
+		transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
+	}
+	to {
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes slideToLeft {
+	to {
+		transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
+	}
+}
+
+@keyframes slideFromRight {
+	from {
+		transform: translate3d(var(--initial-transform, 100%), 0, 0);
+	}
+	to {
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes slideToRight {
+	to {
+		transform: translate3d(var(--initial-transform, 100%), 0, 0);
+	}
+}