@1024pix/pix-ui 54.3.0 → 54.4.0
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.
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<div>
|
|
2
|
+
{{#if (has-block "label")}}
|
|
3
|
+
<PixLabel
|
|
4
|
+
@for={{this.id}}
|
|
5
|
+
@requiredLabel={{@requiredLabel}}
|
|
6
|
+
@subLabel={{@subLabel}}
|
|
7
|
+
@size={{@size}}
|
|
8
|
+
@screenReaderOnly={{@screenReaderOnly}}
|
|
9
|
+
>
|
|
10
|
+
{{yield to="label"}}
|
|
11
|
+
</PixLabel>
|
|
12
|
+
{{/if}}
|
|
13
|
+
<div>
|
|
14
|
+
<input
|
|
15
|
+
id={{this.id}}
|
|
16
|
+
class="pix-code"
|
|
17
|
+
style={{this.style}}
|
|
18
|
+
value={{@value}}
|
|
19
|
+
aria-required="{{if @requiredLabel true false}}"
|
|
20
|
+
required={{if @requiredLabel true false}}
|
|
21
|
+
maxlength={{this.length}}
|
|
22
|
+
minlength={{this.length}}
|
|
23
|
+
aria-describedby={{this.ariaDescribedBy}}
|
|
24
|
+
...attributes
|
|
25
|
+
/>
|
|
26
|
+
|
|
27
|
+
{{#if this.hasErrorMessage}}
|
|
28
|
+
<p id={{this.ariaDescribedBy}} class="pix-code__error-message">{{@errorMessage}}</p>
|
|
29
|
+
{{/if}}
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { warn } from '@ember/debug';
|
|
2
|
+
import { htmlSafe } from '@ember/template';
|
|
3
|
+
|
|
4
|
+
import PixInputBase from './pix-input-base';
|
|
5
|
+
|
|
6
|
+
export default class PixCode extends PixInputBase {
|
|
7
|
+
constructor() {
|
|
8
|
+
super(...arguments);
|
|
9
|
+
|
|
10
|
+
this.prefix = 'pix-code';
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
get length() {
|
|
14
|
+
warn('PixCode: @length is required.', !['', null, undefined].includes(this.args.length), {
|
|
15
|
+
id: 'pix-ui.code.length.required',
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
return this.args.length || 1;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
get style() {
|
|
22
|
+
return htmlSafe('--nb-characters:' + this.length);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
@use "pix-design-tokens/typography";
|
|
2
|
+
@use "component-state/form";
|
|
3
|
+
|
|
4
|
+
.pix-code {
|
|
5
|
+
@extend %pix-monospace;
|
|
6
|
+
@extend %pix-form-element-state;
|
|
7
|
+
|
|
8
|
+
$space-between-dashes: 0.6ch;
|
|
9
|
+
$total-width: calc(var(--nb-characters) * (1ch + $space-between-dashes));
|
|
10
|
+
|
|
11
|
+
display: inline-block;
|
|
12
|
+
box-sizing: content-box;
|
|
13
|
+
width: $total-width;
|
|
14
|
+
height: 3.125rem;
|
|
15
|
+
padding: 0 0.2ch 1px 0.5ch;
|
|
16
|
+
color: var(--pix-neutral-900);
|
|
17
|
+
font-size: 1.875rem;
|
|
18
|
+
letter-spacing: $space-between-dashes;
|
|
19
|
+
text-transform: uppercase;
|
|
20
|
+
background: repeating-linear-gradient(
|
|
21
|
+
90deg,
|
|
22
|
+
var(--pix-neutral-500) 0,
|
|
23
|
+
var(--pix-neutral-500) 1ch,
|
|
24
|
+
transparent 0,
|
|
25
|
+
transparent 1ch + $space-between-dashes
|
|
26
|
+
)
|
|
27
|
+
0 100% / calc($total-width - $space-between-dashes) 1px no-repeat;
|
|
28
|
+
background-position-x: 0.5ch;
|
|
29
|
+
background-position-y: 2.5ch;
|
|
30
|
+
border: solid 1px var(--pix-neutral-500);
|
|
31
|
+
border-radius: var(--pix-spacing-1x);
|
|
32
|
+
outline: none;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.pix-code__error-message {
|
|
36
|
+
@extend %pix-input-error-message;
|
|
37
|
+
}
|
package/addon/styles/addon.scss
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '@1024pix/pix-ui/components/pix-code';
|