mn-angular-lib 1.0.154 → 1.0.156
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/mn-angular-lib.mjs +577 -21
- package/fesm2022/mn-angular-lib.mjs.map +1 -1
- package/package.json +2 -1
- package/src/lib/features/mn-alert/mn-alert-outlet/mn-alert-outlet.css +38 -0
- package/src/lib/features/mn-keyboard/mn-keyboard.component.css +14 -0
- package/types/mn-angular-lib.d.ts +358 -9
package/package.json
CHANGED
|
@@ -51,6 +51,44 @@
|
|
|
51
51
|
overflow: hidden;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
+
/* Countdown bar: a hairline track pinned to the card's bottom edge whose fill drains over the
|
|
55
|
+
alert's lifetime, so the remaining time is visible rather than guessed. The bar runs the full
|
|
56
|
+
width and the card clips it (`overflow-hidden` on the card in the template), so its ends taper
|
|
57
|
+
along the card's rounded corners instead of cutting straight across them. The track's own
|
|
58
|
+
`overflow: hidden` is what clips the draining fill. */
|
|
59
|
+
|
|
60
|
+
.mn-alert-progress {
|
|
61
|
+
position: absolute;
|
|
62
|
+
left: 0;
|
|
63
|
+
right: 0;
|
|
64
|
+
bottom: 0;
|
|
65
|
+
height: 3px;
|
|
66
|
+
overflow: hidden;
|
|
67
|
+
background-color: color-mix(in srgb, currentColor 18%, transparent);
|
|
68
|
+
pointer-events: none;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.mn-alert-progress-bar {
|
|
72
|
+
display: block;
|
|
73
|
+
height: 100%;
|
|
74
|
+
background-color: currentColor;
|
|
75
|
+
opacity: 0.55;
|
|
76
|
+
transform-origin: left center;
|
|
77
|
+
/* Duration is bound per alert from the component; the rest of the timing lives here. */
|
|
78
|
+
animation-name: mn-alert-countdown;
|
|
79
|
+
animation-timing-function: linear;
|
|
80
|
+
animation-fill-mode: forwards;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@keyframes mn-alert-countdown {
|
|
84
|
+
from {
|
|
85
|
+
transform: scaleX(1);
|
|
86
|
+
}
|
|
87
|
+
to {
|
|
88
|
+
transform: scaleX(0);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
54
92
|
@media (prefers-reduced-motion: reduce) {
|
|
55
93
|
.mn-alert-item {
|
|
56
94
|
transition: none;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/* The keys are sized by Tailwind utilities in the template; this file exists for
|
|
2
|
+
the touch affordances that have no utility equivalent. */
|
|
3
|
+
:host {
|
|
4
|
+
display: block;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
/* A kiosk key is hit with a fingertip, often repeatedly and fast. Suppressing the
|
|
8
|
+
long-press selection and the tap highlight keeps a rapid entry from selecting
|
|
9
|
+
the caption text or flashing a native overlay on every press. */
|
|
10
|
+
.mn-keyboard-key {
|
|
11
|
+
-webkit-tap-highlight-color: transparent;
|
|
12
|
+
user-select: none;
|
|
13
|
+
touch-action: manipulation;
|
|
14
|
+
}
|