@warp-ds/elements 2.2.0-next.26 → 2.2.0-next.28
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/dist/custom-elements.json +0 -18
- package/dist/packages/slider/index.js +155 -95
- package/dist/packages/slider/index.js.map +3 -3
- package/dist/packages/slider/slider-thumb.js +108 -66
- package/dist/packages/slider/slider-thumb.js.map +3 -3
- package/dist/packages/slider/slider.js +45 -27
- package/dist/packages/slider/slider.js.map +3 -3
- package/dist/packages/slider/slider.react.stories.js +2 -3
- package/dist/packages/slider/slider.stories.d.ts +1 -0
- package/dist/packages/slider/slider.stories.js +6 -12
- package/dist/packages/slider/styles/w-slider-thumb.styles.js +62 -27
- package/dist/packages/slider/styles/w-slider.styles.js +32 -16
- package/dist/packages/steps/index.js +7 -7
- package/dist/packages/steps/index.js.map +2 -2
- package/dist/packages/textfield/index.js +12 -3
- package/dist/packages/textfield/index.js.map +2 -2
- package/dist/packages/textfield/styles/w-textfield.styles.js +9 -0
- package/dist/web-types.json +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
|
|
2
2
|
import { html } from 'lit';
|
|
3
3
|
import '../affix/index.js';
|
|
4
|
+
import '../attention/index.js';
|
|
4
5
|
import '../textfield/index.js';
|
|
5
6
|
import './index.js';
|
|
6
7
|
const { events: sliderEvents, args: sliderArgs, argTypes: sliderArgTypes, } = getStorybookHelpers('w-slider');
|
|
@@ -92,21 +93,14 @@ export const SuffixKilometers = {
|
|
|
92
93
|
export const Marks = {
|
|
93
94
|
args: {
|
|
94
95
|
locale: 'nb',
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
markers: '25000',
|
|
96
|
+
step: '5',
|
|
97
|
+
markers: '5',
|
|
98
98
|
},
|
|
99
|
-
render({
|
|
99
|
+
render({ markers, step }) {
|
|
100
100
|
return html `
|
|
101
|
-
<w-slider label="
|
|
102
|
-
<w-slider-thumb
|
|
103
|
-
<w-slider-thumb slot="to" aria-label="To distance" name="to"></w-slider-thumb>
|
|
101
|
+
<w-slider label="Single" min="0" max="100" step="${step}" markers="${markers}">
|
|
102
|
+
<w-slider-thumb name="value"></w-slider-thumb>
|
|
104
103
|
</w-slider>
|
|
105
|
-
|
|
106
|
-
<script type="module">
|
|
107
|
-
const markersSlider = document.querySelector('w-slider[data-testid="markers"]');
|
|
108
|
-
markersSlider.formatter = window.getNumberFormatter('${locale}').format;
|
|
109
|
-
</script>
|
|
110
104
|
`;
|
|
111
105
|
},
|
|
112
106
|
};
|
|
@@ -17,6 +17,7 @@ export const wSliderThumbStyles = css `
|
|
|
17
17
|
background-color: transparent;
|
|
18
18
|
grid-area: slider;
|
|
19
19
|
height: 44px; /* touch target */
|
|
20
|
+
margin-left: 0;
|
|
20
21
|
pointer-events: none; /* let clicks pass through for range slider where we place two inputs over each other */
|
|
21
22
|
}
|
|
22
23
|
|
|
@@ -26,14 +27,6 @@ export const wSliderThumbStyles = css `
|
|
|
26
27
|
height: var(--w-slider-track-height);
|
|
27
28
|
}
|
|
28
29
|
|
|
29
|
-
.w-slider-thumb__range:hover::-webkit-slider-thumb {
|
|
30
|
-
background: var(--w-s-color-background-primary-hover);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.w-slider-thumb__range:hover::-moz-range-thumb {
|
|
34
|
-
background: var(--w-s-color-background-primary-hover);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
30
|
/*
|
|
38
31
|
Use anchor positioning to place the tooltip target in relation to the slider thumb.
|
|
39
32
|
We use a polyfill to bring support to older Safari, Firefox at time of writing.
|
|
@@ -42,11 +35,12 @@ export const wSliderThumbStyles = css `
|
|
|
42
35
|
anchor-name: --thumb;
|
|
43
36
|
|
|
44
37
|
appearance: none;
|
|
38
|
+
cursor: pointer;
|
|
45
39
|
background: var(--w-s-color-background-primary);
|
|
46
40
|
border-radius: 50%;
|
|
47
41
|
height: var(--w-slider-thumb-size);
|
|
48
42
|
margin-top: calc(-1 * calc(var(--w-slider-thumb-offset) - calc(var(--w-slider-track-height) / 2)));
|
|
49
|
-
pointer-events:
|
|
43
|
+
pointer-events: initial;
|
|
50
44
|
width: var(--w-slider-thumb-size);
|
|
51
45
|
z-index: 1;
|
|
52
46
|
}
|
|
@@ -55,6 +49,7 @@ export const wSliderThumbStyles = css `
|
|
|
55
49
|
anchor-name: --thumb;
|
|
56
50
|
|
|
57
51
|
appearance: none;
|
|
52
|
+
cursor: pointer;
|
|
58
53
|
background: var(--w-s-color-background-primary);
|
|
59
54
|
border-radius: 50%;
|
|
60
55
|
border-color: transparent;
|
|
@@ -63,32 +58,54 @@ export const wSliderThumbStyles = css `
|
|
|
63
58
|
pointer-events: initial;
|
|
64
59
|
width: var(--w-slider-thumb-size);
|
|
65
60
|
z-index: 1;
|
|
61
|
+
|
|
62
|
+
box-shadow: none;
|
|
66
63
|
}
|
|
67
64
|
|
|
68
|
-
.w-slider-
|
|
69
|
-
|
|
70
|
-
|
|
65
|
+
.w-slider-thumb__range:active::-webkit-slider-thumb,
|
|
66
|
+
.w-slider-thumb__range:hover::-webkit-slider-thumb {
|
|
67
|
+
background: var(--w-s-color-background-primary-hover);
|
|
68
|
+
box-shadow: var(--w-shadow-slider-handle-hover);
|
|
69
|
+
}
|
|
71
70
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
71
|
+
.w-slider-thumb__range:focus,
|
|
72
|
+
.w-slider-thumb__range:focus-visible {
|
|
73
|
+
outline: none;
|
|
74
|
+
}
|
|
75
75
|
|
|
76
|
-
|
|
77
|
-
border-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
76
|
+
.w-slider-thumb__range:focus-visible::-webkit-slider-thumb {
|
|
77
|
+
outline: 2px solid var(--w-s-color-border-focus);
|
|
78
|
+
outline-offset: var(--w-outline-offset, 1px);
|
|
79
|
+
box-shadow: none;
|
|
80
|
+
}
|
|
81
81
|
|
|
82
|
-
|
|
82
|
+
.w-slider-thumb__range:active::-moz-range-thumb,
|
|
83
|
+
.w-slider-thumb__range:hover::-moz-range-thumb {
|
|
84
|
+
background: var(--w-s-color-background-primary-hover);
|
|
85
|
+
box-shadow: var(--w-shadow-slider-handle-hover);
|
|
86
|
+
}
|
|
83
87
|
|
|
84
|
-
|
|
85
|
-
|
|
88
|
+
.w-slider-thumb__range:focus-visible::-moz-range-thumb {
|
|
89
|
+
outline: 2px solid var(--w-s-color-border-focus);
|
|
90
|
+
outline-offset: var(--w-outline-offset, 1px);
|
|
91
|
+
box-shadow: none;
|
|
86
92
|
}
|
|
87
93
|
|
|
88
|
-
.w-slider-thumb__tooltip
|
|
94
|
+
.w-slider-thumb__tooltip-target {
|
|
89
95
|
display: block;
|
|
96
|
+
pointer-events: none;
|
|
97
|
+
position: absolute;
|
|
98
|
+
border: 2px solid transparent;
|
|
99
|
+
border-radius: 20px;
|
|
100
|
+
width: 8px;
|
|
101
|
+
height: 8px;
|
|
102
|
+
position-anchor: --thumb;
|
|
103
|
+
position-area: center; /* Position the tooltip target right on the range thumb */
|
|
90
104
|
}
|
|
91
105
|
|
|
106
|
+
/* Uncomment this to debug the invisible anchor target */
|
|
107
|
+
/* .w-slider-thumb__tooltip-target { border-color: lime; } */
|
|
108
|
+
|
|
92
109
|
.w-slider-thumb__from-marker,
|
|
93
110
|
.w-slider-thumb__to-marker {
|
|
94
111
|
margin-inline: 2px; /* visual alignment with input border, slider thumb */
|
|
@@ -117,8 +134,21 @@ export const wSliderThumbStyles = css `
|
|
|
117
134
|
grid-column: 1 / 2; /* Range sliders should leave the gap empty. */
|
|
118
135
|
}
|
|
119
136
|
|
|
120
|
-
:host([name='from']) .w-slider-thumb__range
|
|
121
|
-
margin-left:
|
|
137
|
+
:host([name='from']) .w-slider-thumb__range {
|
|
138
|
+
margin-left: var(--w-slider-thumb-size);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
:host([name='to']) .w-slider-thumb__range {
|
|
142
|
+
margin-right: var(--w-slider-thumb-size);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
:host([name='from']) .w-slider-thumb__range::-webkit-slider-thumb,
|
|
146
|
+
:host([name='from']) .w-slider-thumb__tooltip-target {
|
|
147
|
+
transform: translateX(calc(-1 * var(--w-slider-thumb-size) - 1px));
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
:host([name='from']) .w-slider-thumb__range::-moz-range-thumb {
|
|
151
|
+
transform: translateX(calc(-1 * var(--w-slider-thumb-size) - 1px));
|
|
122
152
|
}
|
|
123
153
|
|
|
124
154
|
:host([name='to']) .w-slider-thumb__textfield {
|
|
@@ -126,7 +156,12 @@ export const wSliderThumbStyles = css `
|
|
|
126
156
|
grid-column: 3 / 4;
|
|
127
157
|
}
|
|
128
158
|
|
|
159
|
+
:host([name='to']) .w-slider-thumb__tooltip-target,
|
|
129
160
|
:host([name='to']) .w-slider-thumb__range::-webkit-slider-thumb {
|
|
130
|
-
|
|
161
|
+
transform: translateX(calc(var(--w-slider-thumb-size) - 1px));
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
:host([name='to']) .w-slider-thumb__range::-moz-range-thumb {
|
|
165
|
+
transform: translateX(calc(var(--w-slider-thumb-size) - 1px));
|
|
131
166
|
}
|
|
132
167
|
`;
|
|
@@ -27,10 +27,12 @@ export const wSliderStyles = css `
|
|
|
27
27
|
|
|
28
28
|
/* The --min value can be non-zero, f. ex. choosing a year from 1950 to 2025. Normalize the values so we start at 0 and run to max - min. */
|
|
29
29
|
--_value-range: calc(var(--max) - var(--min));
|
|
30
|
-
|
|
30
|
+
|
|
31
|
+
/** Round up to the nearest --step, which defaults to 1 (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range#step) */
|
|
32
|
+
--_from-in-range: round(up, max(calc(var(--from) - var(--min)), 0), var(--step, 1));
|
|
31
33
|
|
|
32
34
|
/* limit to maximum value in range so typing a value larger than max doesn't explode layouts */
|
|
33
|
-
--_to-in-range: min(calc(var(--to) - var(--min)), var(--_value-range));
|
|
35
|
+
--_to-in-range: round(up, min(calc(var(--to) - var(--min)), var(--_value-range)), var(--step, 1));
|
|
34
36
|
|
|
35
37
|
/* Position the starting point of the fill in the case of a non-zero --from value in a range slider.
|
|
36
38
|
* In other words, given a width of 100% how many percent should be left unfilled/blank
|
|
@@ -63,17 +65,36 @@ export const wSliderStyles = css `
|
|
|
63
65
|
grid-area: description;
|
|
64
66
|
}
|
|
65
67
|
|
|
66
|
-
.w-
|
|
68
|
+
.w-slider__range {
|
|
67
69
|
align-self: center;
|
|
68
70
|
background: var(--w-slider-track-background);
|
|
69
71
|
border-radius: 4px;
|
|
72
|
+
height: var(--w-slider-track-active-height);
|
|
70
73
|
position: absolute;
|
|
74
|
+
/* For range sliders to avoid overlapping the slider thumbs we transform them to
|
|
75
|
+
be visually to the left and right of their respective input[type="range"]. This
|
|
76
|
+
padding is here so the active-range element is the same width as the input fields. */
|
|
77
|
+
padding-inline-start: var(--active-range-inline-start-padding, 0);
|
|
78
|
+
padding-inline-end: var(--active-range-inline-end-padding, 0);
|
|
71
79
|
top: var(--_range-top);
|
|
72
80
|
left: 0;
|
|
73
81
|
right: 0;
|
|
74
82
|
grid-area: slider;
|
|
75
83
|
}
|
|
76
84
|
|
|
85
|
+
.w-slider__active-range {
|
|
86
|
+
box-sizing: content-box;
|
|
87
|
+
background: var(--w-slider-track-active-background);
|
|
88
|
+
height: var(--w-slider-track-active-height);
|
|
89
|
+
|
|
90
|
+
border-start-start-radius: var(--active-range-border-radius, 0);
|
|
91
|
+
border-end-start-radius: var(--active-range-border-radius, 0);
|
|
92
|
+
|
|
93
|
+
margin-left: calc(calc(var(--_blank-values-before) * 1%) - var(--active-range-inline-start-padding, 0px));
|
|
94
|
+
width: calc(calc(var(--_filled-values) * 1%) + var(--active-range-inline-end-padding, 0px));
|
|
95
|
+
z-index: 1;
|
|
96
|
+
}
|
|
97
|
+
|
|
77
98
|
.w-slider__markers {
|
|
78
99
|
--_marker-height: 7px;
|
|
79
100
|
--_marker-width: 1px;
|
|
@@ -83,9 +104,14 @@ export const wSliderStyles = css `
|
|
|
83
104
|
/* Creates a linear gradient with --_marker-width wide markers
|
|
84
105
|
followed by enough transparent that we can repeat the gradient
|
|
85
106
|
along the X axis and have markers visible where we want them. */
|
|
86
|
-
background: linear-gradient(
|
|
107
|
+
background: linear-gradient(
|
|
108
|
+
to right,
|
|
109
|
+
var(--w-slider-marker-color) var(--_marker-width),
|
|
110
|
+
rgba(0, 0, 0, 0) 1px calc(100% - 1px),
|
|
111
|
+
var(--w-slider-marker-color) 100%
|
|
112
|
+
) repeat-x;
|
|
87
113
|
--_step-width-as-percent: calc(var(--markers) / var(--_value-range) * 100);
|
|
88
|
-
background-size: calc(var(--_step-width-as-percent) * 1%
|
|
114
|
+
background-size: calc(var(--_step-width-as-percent) * 1%) var(--_marker-height);
|
|
89
115
|
|
|
90
116
|
background-position: bottom 0 left 8px right 8px;
|
|
91
117
|
position: absolute;
|
|
@@ -94,17 +120,7 @@ export const wSliderStyles = css `
|
|
|
94
120
|
right: 1px;
|
|
95
121
|
grid-area: slider;
|
|
96
122
|
height: var(--_marker-height);
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
.w-slider__active-range::before {
|
|
100
|
-
background: var(--w-slider-track-active-background);
|
|
101
|
-
border-radius: 4px;
|
|
102
|
-
content: '';
|
|
103
|
-
display: block;
|
|
104
|
-
height: var(--w-slider-track-active-height);
|
|
105
|
-
|
|
106
|
-
margin-left: calc(var(--_blank-values-before) * 1%);
|
|
107
|
-
width: calc(var(--_filled-values) * 1%);
|
|
123
|
+
margin-inline: var(--w-slider-thumb-offset);
|
|
108
124
|
}
|
|
109
125
|
|
|
110
126
|
slot::slotted(w-slider-thumb) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var fe=Object.create;var A=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var we=Object.getOwnPropertyNames;var xe=Object.getPrototypeOf,ke=Object.prototype.hasOwnProperty;var Q=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports);var ye=(r,e,o,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of we(e))!ke.call(r,a)&&a!==o&&A(r,a,{get:()=>e[a],enumerable:!(t=K(e,a))||t.enumerable});return r};var _e=(r,e,o)=>(o=r!=null?fe(xe(r)):{},ye(e||!r||!r.__esModule?A(o,"default",{value:r,enumerable:!0}):o,r));var k=(r,e,o,t)=>{for(var a=t>1?void 0:t?K(e,o):e,s=r.length-1,i;s>=0;s--)(i=r[s])&&(a=(t?i(e,o,a):i(a))||a);return t&&a&&A(e,o,a),a};var W=Q(f=>{"use strict";Object.defineProperty(f,"__esModule",{value:!0});f.errorMessages=f.ErrorType=void 0;var y;(function(r){r.MalformedUnicode="MALFORMED_UNICODE",r.MalformedHexadecimal="MALFORMED_HEXADECIMAL",r.CodePointLimit="CODE_POINT_LIMIT",r.OctalDeprecation="OCTAL_DEPRECATION",r.EndOfString="END_OF_STRING"})(y=f.ErrorType||(f.ErrorType={}));f.errorMessages=new Map([[y.MalformedUnicode,"malformed Unicode character escape sequence"],[y.MalformedHexadecimal,"malformed hexadecimal character escape sequence"],[y.CodePointLimit,"Unicode codepoint must not be greater than 0x10FFFF in escape sequence"],[y.OctalDeprecation,'"0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead'],[y.EndOfString,"malformed escape sequence at end of string"]])});var oe=Q(u=>{"use strict";Object.defineProperty(u,"__esModule",{value:!0});u.unraw=u.errorMessages=u.ErrorType=void 0;var d=W();Object.defineProperty(u,"ErrorType",{enumerable:!0,get:function(){return d.ErrorType}});Object.defineProperty(u,"errorMessages",{enumerable:!0,get:function(){return d.errorMessages}});function ze(r){return!r.match(/[^a-f0-9]/i)?parseInt(r,16):NaN}function M(r,e,o){let t=ze(r);if(Number.isNaN(t)||o!==void 0&&o!==r.length)throw new SyntaxError(d.errorMessages.get(e));return t}function Ce(r){let e=M(r,d.ErrorType.MalformedHexadecimal,2);return String.fromCharCode(e)}function ee(r,e){let o=M(r,d.ErrorType.MalformedUnicode,4);if(e!==void 0){let t=M(e,d.ErrorType.MalformedUnicode,4);return String.fromCharCode(o,t)}return String.fromCharCode(o)}function Me(r){return r.charAt(0)==="{"&&r.charAt(r.length-1)==="}"}function Le(r){if(!Me(r))throw new SyntaxError(d.errorMessages.get(d.ErrorType.MalformedUnicode));let e=r.slice(1,-1),o=M(e,d.ErrorType.MalformedUnicode);try{return String.fromCodePoint(o)}catch(t){throw t instanceof RangeError?new SyntaxError(d.errorMessages.get(d.ErrorType.CodePointLimit)):t}}function Ee(r,e=!1){if(e)throw new SyntaxError(d.errorMessages.get(d.ErrorType.OctalDeprecation));let o=parseInt(r,8);return String.fromCharCode(o)}var Se=new Map([["b","\b"],["f","\f"],["n",`
|
|
2
|
-
`],["r","\r"],["t"," "],["v","\v"],["0","\0"]]);function Oe(r){return Se.get(r)||r}var Ne=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function re(r,e=!1){return r.replace(Ne,function(o,t,a,s,i,n,l,p,g){if(t!==void 0)return"\\";if(a!==void 0)return Ce(a);if(s!==void 0)return Le(s);if(i!==void 0)return ee(i,n);if(l!==void 0)return ee(l);if(p==="0")return"\0";if(p!==void 0)return Ee(p,!e);if(g!==void 0)return Oe(g);throw new SyntaxError(d.errorMessages.get(d.ErrorType.EndOfString))})}u.unraw=re;u.default=re});var m=function(){for(var r=[],e=arguments.length;e--;)r[e]=arguments[e];return r.reduce(function(o,t){return o.concat(typeof t=="string"?t:Array.isArray(t)?m.apply(void 0,t):typeof t=="object"&&t?Object.keys(t).map(function(a){return t[a]?a:""}):"")},[]).join(" ")};var ie=_e(oe(),1);var h=r=>typeof r=="string",je=r=>typeof r=="function",te=new Map,ne="en";function F(r){return[...Array.isArray(r)?r:[r],ne]}function Y(r,e,o){let t=F(r);o||(o="default");let a;if(typeof o=="string")switch(a={day:"numeric",month:"short",year:"numeric"},o){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=o;return L(()=>E("date",t,o),()=>new Intl.DateTimeFormat(t,a)).format(h(e)?new Date(e):e)}function Ae(r,e,o){let t;if(o||(o="default"),typeof o=="string")switch(t={second:"numeric",minute:"numeric",hour:"numeric"},o){case"full":case"long":t.timeZoneName="short";break;case"short":delete t.second}else t=o;return Y(r,e,t)}function T(r,e,o){let t=F(r);return L(()=>E("number",t,o),()=>new Intl.NumberFormat(t,o)).format(e)}function ae(r,e,o,{offset:t=0,...a}){var n,l;let s=F(r),i=e?L(()=>E("plural-ordinal",s),()=>new Intl.PluralRules(s,{type:"ordinal"})):L(()=>E("plural-cardinal",s),()=>new Intl.PluralRules(s,{type:"cardinal"}));return(l=(n=a[o])!=null?n:a[i.select(o-t)])!=null?l:a.other}function L(r,e){let o=r(),t=te.get(o);return t||(t=e(),te.set(o,t)),t}function E(r,e,o){let t=e.join("-");return`${r}-${t}-${JSON.stringify(o)}`}var se=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,le="%__lingui_octothorpe__%",Te=(r,e,o={})=>{let t=e||r,a=i=>typeof i=="object"?i:o[i],s=(i,n)=>{let l=Object.keys(o).length?a("number"):void 0,p=T(t,i,l);return n.replace(new RegExp(le,"g"),p)};return{plural:(i,n)=>{let{offset:l=0}=n,p=ae(t,!1,i,n);return s(i-l,p)},selectordinal:(i,n)=>{let{offset:l=0}=n,p=ae(t,!0,i,n);return s(i-l,p)},select:Ie,number:(i,n)=>T(t,i,a(n)||{style:n}),date:(i,n)=>Y(t,i,a(n)||n),time:(i,n)=>Ae(t,i,a(n)||n)}},Ie=(r,e)=>{var o;return(o=e[r])!=null?o:e.other};function De(r,e,o){return(t={},a)=>{let s=Te(e,o,a),i=(l,p=!1)=>Array.isArray(l)?l.reduce((g,z)=>{if(z==="#"&&p)return g+le;if(h(z))return g+z;let[V,v,G]=z,N={};v==="plural"||v==="selectordinal"||v==="select"?Object.entries(G).forEach(([j,ve])=>{N[j]=i(ve,v==="plural"||v==="selectordinal")}):N=G;let C;if(v){let j=s[v];C=j(t[V],N)}else C=t[V];return C==null?g:g+C},""):l,n=i(r);return h(n)&&se.test(n)?(0,ie.unraw)(n):h(n)?n:n?String(n):""}}var Fe=Object.defineProperty,Ye=(r,e,o)=>e in r?Fe(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o
|
|
2
|
+
`],["r","\r"],["t"," "],["v","\v"],["0","\0"]]);function Oe(r){return Se.get(r)||r}var Ne=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function re(r,e=!1){return r.replace(Ne,function(o,t,a,s,i,n,l,p,g){if(t!==void 0)return"\\";if(a!==void 0)return Ce(a);if(s!==void 0)return Le(s);if(i!==void 0)return ee(i,n);if(l!==void 0)return ee(l);if(p==="0")return"\0";if(p!==void 0)return Ee(p,!e);if(g!==void 0)return Oe(g);throw new SyntaxError(d.errorMessages.get(d.ErrorType.EndOfString))})}u.unraw=re;u.default=re});var m=function(){for(var r=[],e=arguments.length;e--;)r[e]=arguments[e];return r.reduce(function(o,t){return o.concat(typeof t=="string"?t:Array.isArray(t)?m.apply(void 0,t):typeof t=="object"&&t?Object.keys(t).map(function(a){return t[a]?a:""}):"")},[]).join(" ")};var ie=_e(oe(),1);var h=r=>typeof r=="string",je=r=>typeof r=="function",te=new Map,ne="en";function F(r){return[...Array.isArray(r)?r:[r],ne]}function Y(r,e,o){let t=F(r);o||(o="default");let a;if(typeof o=="string")switch(a={day:"numeric",month:"short",year:"numeric"},o){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=o;return L(()=>E("date",t,o),()=>new Intl.DateTimeFormat(t,a)).format(h(e)?new Date(e):e)}function Ae(r,e,o){let t;if(o||(o="default"),typeof o=="string")switch(t={second:"numeric",minute:"numeric",hour:"numeric"},o){case"full":case"long":t.timeZoneName="short";break;case"short":delete t.second}else t=o;return Y(r,e,t)}function T(r,e,o){let t=F(r);return L(()=>E("number",t,o),()=>new Intl.NumberFormat(t,o)).format(e)}function ae(r,e,o,{offset:t=0,...a}){var n,l;let s=F(r),i=e?L(()=>E("plural-ordinal",s),()=>new Intl.PluralRules(s,{type:"ordinal"})):L(()=>E("plural-cardinal",s),()=>new Intl.PluralRules(s,{type:"cardinal"}));return(l=(n=a[o])!=null?n:a[i.select(o-t)])!=null?l:a.other}function L(r,e){let o=r(),t=te.get(o);return t||(t=e(),te.set(o,t)),t}function E(r,e,o){let t=e.join("-");return`${r}-${t}-${JSON.stringify(o)}`}var se=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,le="%__lingui_octothorpe__%",Te=(r,e,o={})=>{let t=e||r,a=i=>typeof i=="object"?i:o[i],s=(i,n)=>{let l=Object.keys(o).length?a("number"):void 0,p=T(t,i,l);return n.replace(new RegExp(le,"g"),p)};return{plural:(i,n)=>{let{offset:l=0}=n,p=ae(t,!1,i,n);return s(i-l,p)},selectordinal:(i,n)=>{let{offset:l=0}=n,p=ae(t,!0,i,n);return s(i-l,p)},select:Ie,number:(i,n)=>T(t,i,a(n)||{style:n}),date:(i,n)=>Y(t,i,a(n)||n),time:(i,n)=>Ae(t,i,a(n)||n)}},Ie=(r,e)=>{var o;return(o=e[r])!=null?o:e.other};function De(r,e,o){return(t={},a)=>{let s=Te(e,o,a),i=(l,p=!1)=>Array.isArray(l)?l.reduce((g,z)=>{if(z==="#"&&p)return g+le;if(h(z))return g+z;let[V,v,G]=z,N={};v==="plural"||v==="selectordinal"||v==="select"?Object.entries(G).forEach(([j,ve])=>{N[j]=i(ve,v==="plural"||v==="selectordinal")}):N=G;let C;if(v){let j=s[v];C=j(t[V],N)}else C=t[V];return C==null?g:g+C},""):l,n=i(r);return h(n)&&se.test(n)?(0,ie.unraw)(n):h(n)?n:n?String(n):""}}var Fe=Object.defineProperty,Ye=(r,e,o)=>e in r?Fe(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,$e=(r,e,o)=>(Ye(r,typeof e!="symbol"?e+"":e,o),o),I=class{constructor(){$e(this,"_events",{})}on(e,o){var a;var t;return(a=(t=this._events)[e])!=null||(t[e]=[]),this._events[e].push(o),()=>this.removeListener(e,o)}removeListener(e,o){let t=this._getListeners(e);if(!t)return;let a=t.indexOf(o);~a&&t.splice(a,1)}emit(e,...o){let t=this._getListeners(e);t&&t.map(a=>a.apply(this,o))}_getListeners(e){let o=this._events[e];return Array.isArray(o)?o:!1}},Pe=Object.defineProperty,He=(r,e,o)=>e in r?Pe(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,w=(r,e,o)=>(He(r,typeof e!="symbol"?e+"":e,o),o),D=class extends I{constructor(e){var o;super(),w(this,"_locale",""),w(this,"_locales"),w(this,"_localeData",{}),w(this,"_messages",{}),w(this,"_missing"),w(this,"_messageCompiler"),w(this,"t",this._.bind(this)),e.missing!=null&&(this._missing=e.missing),e.messages!=null&&this.load(e.messages),e.localeData!=null&&this.loadLocaleData(e.localeData),(typeof e.locale=="string"||e.locales)&&this.activate((o=e.locale)!=null?o:ne,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){var e;return(e=this._messages[this._locale])!=null?e:{}}get localeData(){var e;return(e=this._localeData[this._locale])!=null?e:{}}_loadLocaleData(e,o){let t=this._localeData[e];t?Object.assign(t,o):this._localeData[e]=o}setMessagesCompiler(e){return this._messageCompiler=e,this}loadLocaleData(e,o){typeof e=="string"?this._loadLocaleData(e,o):Object.keys(e).forEach(t=>this._loadLocaleData(t,e[t])),this.emit("change")}_load(e,o){let t=this._messages[e];t?Object.assign(t,o):this._messages[e]=o}load(e,o){typeof e=="string"&&typeof o=="object"?this._load(e,o):Object.entries(e).forEach(([t,a])=>this._load(t,a)),this.emit("change")}loadAndActivate({locale:e,locales:o,messages:t}){this._locale=e,this._locales=o||void 0,this._messages[this._locale]=t,this.emit("change")}activate(e,o){this._locale=e,this._locales=o,this.emit("change")}_(e,o,t){if(!this.locale)throw new Error("Lingui: Attempted to call a translation function without setting a locale.\nMake sure to call `i18n.activate(locale)` before using Lingui functions.\nThis issue may also occur due to a race condition in your initialization logic.");let a=t==null?void 0:t.message;e||(e=""),h(e)||(o=e.values||o,a=e.message,e=e.id);let s=this.messages[e],i=s===void 0,n=this._missing;if(n&&i)return je(n)?n(this._locale,e):n;i&&this.emit("missing",{id:e,locale:this._locale});let l=s||a||e;return h(l)&&(this._messageCompiler?l=this._messageCompiler(l):console.warn(`Uncompiled message detected! Message:
|
|
3
3
|
|
|
4
4
|
> ${l}
|
|
5
5
|
|
|
@@ -7,7 +7,7 @@ That means you use raw catalog or your catalog doesn't have a translation for th
|
|
|
7
7
|
ICU features such as interpolation and plurals will not work properly for that message.
|
|
8
8
|
|
|
9
9
|
Please compile your catalog first.
|
|
10
|
-
`)),h(l)&&se.test(l)?JSON.parse(`"${l}"`):h(l)?l:De(l,this._locale,this._locales)(o,t==null?void 0:t.formats)}date(e,o){return Y(this._locales||this._locale,e,o)}number(e,o){return T(this._locales||this._locale,e,o)}};function Re(r={}){return new D(r)}var b=Re();import{html as S,LitElement as he}from"lit";import{property as O,state as nr}from"lit/decorators.js";import{LitElement as Ue}from"lit";import{unsafeStatic as Xe,html as Be}from"lit/static-html.js";var Ze=JSON.parse('{"icon.title.check":["Sjekkmerke"]}'),Je=JSON.parse('{"icon.title.check":["Checkmark"]}'),qe=JSON.parse('{"icon.title.check":["Valintamerkki"]}'),Ve=JSON.parse('{"icon.title.check":["Flueben"]}'),Ge=JSON.parse('{"icon.title.check":["Bock"]}'),ce=["en","nb","fi","da","sv"],de="en",Ke=()=>{var r;let e;switch((r=process==null?void 0:process.env)==null?void 0:r.NMP_BRAND){case"FINN":e="nb";break;case"TORI":e="fi";break;case"BLOCKET":e="sv";break;case"DBA":e="da";break;default:e="en"}return e},pe=()=>{var r;let e=(r=document==null?void 0:document.location)==null?void 0:r.hostname;return e!=null&&e.includes("finn")?"nb":e.includes("tori")?"fi":e.includes("blocket")?"sv":e.includes("dba")?"da":de}
|
|
10
|
+
`)),h(l)&&se.test(l)?JSON.parse(`"${l}"`):h(l)?l:De(l,this._locale,this._locales)(o,t==null?void 0:t.formats)}date(e,o){return Y(this._locales||this._locale,e,o)}number(e,o){return T(this._locales||this._locale,e,o)}};function Re(r={}){return new D(r)}var b=Re();import{html as S,LitElement as he}from"lit";import{property as O,state as nr}from"lit/decorators.js";import{LitElement as Ue}from"lit";import{unsafeStatic as Xe,html as Be}from"lit/static-html.js";var Ze=JSON.parse('{"icon.title.check":["Sjekkmerke"]}'),Je=JSON.parse('{"icon.title.check":["Checkmark"]}'),qe=JSON.parse('{"icon.title.check":["Valintamerkki"]}'),Ve=JSON.parse('{"icon.title.check":["Flueben"]}'),Ge=JSON.parse('{"icon.title.check":["Bock"]}'),ce=["en","nb","fi","da","sv"],de="en",Ke=()=>{var r;let e;switch((r=process==null?void 0:process.env)==null?void 0:r.NMP_BRAND){case"FINN":e="nb";break;case"TORI":e="fi";break;case"BLOCKET":e="sv";break;case"DBA":e="da";break;default:e="en"}return e},pe=()=>{var r;let e=(r=document==null?void 0:document.location)==null?void 0:r.hostname;return e!=null&&e.includes("finn")?"nb":e.includes("tori")?"fi":e.includes("blocket")?"sv":e.includes("dba")?"da":de},$=r=>ce.find(e=>r===e||r.toLowerCase().includes(e))||pe();function Qe(){var r;if(typeof window=="undefined"){let e=Ke();return $(e)}try{let e=(r=document==null?void 0:document.documentElement)==null?void 0:r.lang,o=pe();return ce.includes(e)?$(e!=null?e:o):(console.warn("Unsupported locale set in html lang tag, falling back to detection by hostname"),$(o))}catch(e){return console.warn("could not detect locale, falling back to source locale",e),de}}var We=(r,e,o,t,a,s)=>r==="nb"?o:r==="fi"?t:r==="da"?a:r==="sv"?s:e,er=(r,e,o,t,a)=>{let s=Qe(),i=We(s,r,e,o,t,a);b.load(s,i),b.activate(s)};er(Je,Ze,qe,Ve,Ge);var rr=class extends Ue{render(){let r=b.t({message:"Checkmark",id:"icon.title.check",comment:"Title for check icon"});return Be`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-check-16-part">${Xe(`<title>${r}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.83 7.667 7.163 11l5.334-6"></path></svg>`}};customElements.get("w-icon-check-16")||customElements.define("w-icon-check-16",rr);var or=["en","nb","fi","da","sv"],ge="en",be=r=>or.find(e=>r===e||r.toLowerCase().includes(e))||ge;function tr(){if(typeof window=="undefined"){let r=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return be(r)}try{let r=document.documentElement.lang;return be(r)}catch(r){return console.warn("could not detect locale, falling back to source locale",r),ge}}var ar=(r,e,o,t,a,s)=>r==="nb"?o:r==="fi"?t:r==="da"?a:r==="sv"?s:e,P=(r,e,o,t,a)=>{let s=tr(),i=ar(s,r,e,o,t,a);b.load(s,i),b.activate(s)};import{css as ue}from"lit";var H=ue`
|
|
11
11
|
*,
|
|
12
12
|
:before,
|
|
13
13
|
:after {
|
|
@@ -2446,18 +2446,18 @@ Please compile your catalog first.
|
|
|
2446
2446
|
display: none
|
|
2447
2447
|
}
|
|
2448
2448
|
}
|
|
2449
|
-
`;var R=JSON.parse('{"steps.aria.emptyCircle":["Tom cirkel"],"steps.aria.active":["Trinindikator aktiv cirkel"],"steps.aria.completed":["Trinindikator fuldf\xF8rt cirkel"]}');var U=JSON.parse('{"steps.aria.emptyCircle":["Empty circle"],"steps.aria.active":["Step indicator active circle"],"steps.aria.completed":["Step indicator completed circle"]}');var X=JSON.parse('{"steps.aria.emptyCircle":["Tyhj\xE4 ympyr\xE4"],"steps.aria.active":["Vaiheilmaisin aktiivinen ympyr\xE4"],"steps.aria.completed":["Vaiheilmaisin valmis ympyr\xE4"]}');var B=JSON.parse('{"steps.aria.emptyCircle":["Tom sirkel"],"steps.aria.active":["Stegindikator aktiv sirkel"],"steps.aria.completed":["Stegindikator hel sirkel"]}');var Z=JSON.parse('{"steps.aria.emptyCircle":["Tom cirkel"],"steps.aria.active":["Stegindikator aktiv cirkel"],"steps.aria.completed":["Stegindikator full\xE4ndad cirkel"]}');import{css as ir}from"lit";var J=ir`*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.text-center{text-align:center}.text-right{text-align:right}.border-2{border-width:2px}.rounded-full{border-radius:9999px}.flex{display:flex}.grid{display:grid}.flex-1{flex:1}.gap-x-16{column-gap:1.6rem}.gap-y-16{row-gap:1.6rem}.row-span-2{grid-row:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.row-start-1{grid-row-start:1}.row-start-2{grid-row-start:2}.col-start-2{grid-column-start:2}.grid-flow-col{grid-auto-flow:column}.grid-rows-\\[20px_auto\\]{grid-template-rows:20px auto}.grid-rows-\\[auto_20px\\]{grid-template-rows:auto 20px}.grid-cols-\\[1fr_20px_1fr\\]{grid-template-columns:1fr 20px 1fr}.grid-cols-\\[1fr_20px\\]{grid-template-columns:1fr 20px}.grid-cols-\\[20px_1fr\\]{grid-template-columns:20px 1fr}.items-center{align-items:center}.justify-self-end{justify-self:end}.justify-self-center{justify-self:center}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled{background-color:var(--w-s-color-background-disabled)}.s-bg-primary{background-color:var(--w-s-color-background-primary)}.s-icon-inverted{color:var(--w-s-color-icon-inverted)}.s-border{border-color:var(--w-s-color-border)}.s-border-primary{border-color:var(--w-s-color-border-primary)}.h-2{height:.2rem}.h-20{height:2rem}.h-full{height:100%}.w-2{width:.2rem}.w-20{width:2rem}.w-full{width:100%}.last\\:mb-0:last-child{margin-bottom:0}.px-16{padding-left:1.6rem;padding-right:1.6rem}.pb-0{padding-bottom:0}.pb-32{padding-bottom:3.2rem}.invisible{visibility:hidden}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}`;var me={wrapper:"w-full",horizontal:"flex"},c={base:"group/step",vertical:"group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16",horizontal:"group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid
|
|
2450
|
-
<ul class=${o}>
|
|
2449
|
+
`;var R=JSON.parse('{"steps.aria.emptyCircle":["Tom cirkel"],"steps.aria.active":["Trinindikator aktiv cirkel"],"steps.aria.completed":["Trinindikator fuldf\xF8rt cirkel"]}');var U=JSON.parse('{"steps.aria.emptyCircle":["Empty circle"],"steps.aria.active":["Step indicator active circle"],"steps.aria.completed":["Step indicator completed circle"]}');var X=JSON.parse('{"steps.aria.emptyCircle":["Tyhj\xE4 ympyr\xE4"],"steps.aria.active":["Vaiheilmaisin aktiivinen ympyr\xE4"],"steps.aria.completed":["Vaiheilmaisin valmis ympyr\xE4"]}');var B=JSON.parse('{"steps.aria.emptyCircle":["Tom sirkel"],"steps.aria.active":["Stegindikator aktiv sirkel"],"steps.aria.completed":["Stegindikator hel sirkel"]}');var Z=JSON.parse('{"steps.aria.emptyCircle":["Tom cirkel"],"steps.aria.active":["Stegindikator aktiv cirkel"],"steps.aria.completed":["Stegindikator full\xE4ndad cirkel"]}');import{css as ir}from"lit";var J=ir`*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.text-center{text-align:center}.text-right{text-align:right}.border-2{border-width:2px}.rounded-full{border-radius:9999px}.flex{display:flex}.grid{display:grid}.flex-1{flex:1}.gap-x-16{column-gap:1.6rem}.gap-y-16{row-gap:1.6rem}.row-span-2{grid-row:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.row-start-1{grid-row-start:1}.row-start-2{grid-row-start:2}.col-start-2{grid-column-start:2}.grid-flow-col{grid-auto-flow:column}.grid-rows-\\[20px_auto\\]{grid-template-rows:20px auto}.grid-rows-\\[auto_20px\\]{grid-template-rows:auto 20px}.grid-cols-\\[1fr_20px_1fr\\]{grid-template-columns:1fr 20px 1fr}.grid-cols-\\[1fr_20px\\]{grid-template-columns:1fr 20px}.grid-cols-\\[20px_1fr\\]{grid-template-columns:20px 1fr}.items-center{align-items:center}.justify-self-end{justify-self:end}.justify-self-center{justify-self:center}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled{background-color:var(--w-s-color-background-disabled)}.s-bg-primary{background-color:var(--w-s-color-background-primary)}.s-icon-inverted{color:var(--w-s-color-icon-inverted)}.s-border{border-color:var(--w-s-color-border)}.s-border-primary{border-color:var(--w-s-color-border-primary)}.h-2{height:.2rem}.h-20{height:2rem}.h-full{height:100%}.w-2{width:.2rem}.w-20{width:2rem}.w-full{width:100%}.last\\:mb-0:last-child{margin-bottom:0}.px-16{padding-left:1.6rem;padding-right:1.6rem}.pb-0{padding-bottom:0}.pb-32{padding-bottom:3.2rem}.invisible{visibility:hidden}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}`;var me={wrapper:"w-full",horizontal:"flex"},c={base:"group/step",vertical:"group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16",horizontal:"group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid items-center",alignLeft:"grid-cols-[20px_1fr]",alignRight:"grid-cols-[1fr_20px] text-right",dot:"rounded-full border-2 h-20 w-20 transition-colors duration-300 s-icon-inverted",dotAlignRight:"col-start-2",dotHorizontal:"row-start-2 justify-self-end",dotActive:"s-border-primary s-bg-primary",dotIncomplete:"s-border s-bg",line:"transition-colors duration-300",lineVertical:"w-2 h-full justify-self-center",lineAlignRight:"col-start-2",lineHorizontal:"h-2 w-full row-start-2",lineIncomplete:"s-bg-disabled",lineComplete:"s-bg-primary",content:"last:mb-0",contentVertical:"row-span-2 pb-32",contentHorizontal:"col-span-3 px-16 row-start-1 text-center"},_=class extends he{constructor(){super();this.horizontal=!1;this.right=!1;P(U,B,X,R,Z)}updated(){this.updateStepsContext()}updateStepsContext(){let o=this.querySelectorAll("w-step");o.forEach((t,a)=>{t.setContext({horizontal:this.horizontal,right:this.right,isLast:a===o.length-1,isFirst:a===0})})}render(){let o=m([me.wrapper,this.horizontal&&me.horizontal]);return S`
|
|
2450
|
+
<ul class=${o} ${this.horizontal&&"style='display: grid; grid-auto-rows: 1fr;grid-template-columns: 1fr;'"}>
|
|
2451
2451
|
<slot></slot>
|
|
2452
2452
|
</ul>
|
|
2453
|
-
`}};_.styles=[H,J],k([O({type:Boolean,reflect:!0})],_.prototype,"horizontal",2),k([O({type:Boolean,reflect:!0})],_.prototype,"right",2);var q={completed:b._({id:"steps.aria.completed",message:"Step indicator completed circle",comment:"Completed circle"}),active:b._({id:"steps.aria.active",message:"Step indicator active circle",comment:"Active circle"}),default:b._({id:"steps.aria.emptyCircle",message:"Empty circle",comment:"Empty circle"})},x=class extends he{constructor(){super();this.active=!1;this.completed=!1;this._context={horizontal:!1,right:!1,isLast:!1,isFirst:!1}
|
|
2454
|
-
<li class
|
|
2453
|
+
`}};_.styles=[H,J],k([O({type:Boolean,reflect:!0})],_.prototype,"horizontal",2),k([O({type:Boolean,reflect:!0})],_.prototype,"right",2);var q={completed:b._({id:"steps.aria.completed",message:"Step indicator completed circle",comment:"Completed circle"}),active:b._({id:"steps.aria.active",message:"Step indicator active circle",comment:"Active circle"}),default:b._({id:"steps.aria.emptyCircle",message:"Empty circle",comment:"Empty circle"})},x=class extends he{constructor(){super();this.active=!1;this.completed=!1;this._context={horizontal:!1,right:!1,isLast:!1,isFirst:!1};P(U,B,X,R,Z)}setContext(o){this._context=o,this.requestUpdate()}getAriaLabel(){return this.completed?q.completed:this.active?q.active:q.default}render(){let o=!this._context.horizontal,t=!this._context.right,a=this._context.isFirst,s=this._context.isLast,i=m([c.base,o?c.vertical:c.horizontal,o?t?c.alignLeft:c.alignRight:""]),n=m([c.line,c.lineHorizontal,this.active||this.completed?c.lineComplete:c.lineIncomplete,a?"invisible":""]),l=m([c.dot,o?t?"":c.dotAlignRight:c.dotHorizontal,this.active||this.completed?c.dotActive:c.dotIncomplete]),p=m([c.line,o?c.lineVertical:c.lineHorizontal,o&&!t?c.lineAlignRight:"",this.completed?c.lineComplete:c.lineIncomplete,s?"invisible":""]),g=m([c.content,o?c.contentVertical:c.contentHorizontal,s?"pb-0":""]);return S`
|
|
2454
|
+
<li class="${i}" style=${this._context.horizontal&&"height: 100%;"}>
|
|
2455
2455
|
${o?"":S`<div class=${n}></div>`}
|
|
2456
2456
|
<div class=${l} role="img" aria-label=${this.getAriaLabel()} ${this.active?'aria-current="step"':""}>
|
|
2457
2457
|
${this.completed?S`<w-icon-check-16 data-testid="completed-icon"></w-icon-check-16>`:""}
|
|
2458
2458
|
</div>
|
|
2459
2459
|
<div class=${p}></div>
|
|
2460
|
-
<div class=${g}>
|
|
2460
|
+
<div class=${g} ${this._context.horizontal&&"style='height:100%;'"}>
|
|
2461
2461
|
<slot></slot>
|
|
2462
2462
|
</div>
|
|
2463
2463
|
</li>
|