@randstad-uca/design-system 1.0.45 → 1.0.48
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/components/Button.d.ts +1 -1
- package/dist/components/DatePicker.d.ts +51 -13
- package/dist/components/File.d.ts +58 -0
- package/dist/components/Form.d.ts +3 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +1074 -167
- package/dist/index.js.map +1 -1
- package/dist/package.json +1 -1
- package/dist/stories/DatePicker.stories.d.ts +14 -0
- package/dist/stories/Form.stories.d.ts +7 -3
- package/dist/stories/UploadFile.stories.d.ts +83 -0
- package/dist/styles/forms.css +106 -107
- package/dist/utils/file-format.d.ts +3 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
import{css as
|
|
1
|
+
import{css as e,LitElement as t,html as i,nothing as o,isServer as r}from"lit";import{classMap as n}from"lit/directives/class-map.js";function a(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a}function s(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}"function"==typeof SuppressedError&&SuppressedError;
|
|
2
2
|
/**
|
|
3
3
|
* @license
|
|
4
4
|
* Copyright 2017 Google LLC
|
|
5
5
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
6
6
|
*/
|
|
7
|
-
const l=
|
|
7
|
+
const l=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)})):customElements.define(e,t)},d=globalThis,c=d.ShadowRoot&&(void 0===d.ShadyCSS||d.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,p=Symbol(),h=new WeakMap;
|
|
8
8
|
/**
|
|
9
9
|
* @license
|
|
10
10
|
* Copyright 2019 Google LLC
|
|
11
11
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
12
|
-
*/let u=class{constructor(t,
|
|
12
|
+
*/let u=class{constructor(e,t,i){if(this._$cssResult$=!0,i!==p)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const t=this.t;if(c&&void 0===e){const i=void 0!==t&&1===t.length;i&&(e=h.get(t)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),i&&h.set(t,e))}return e}toString(){return this.cssText}};const b=(e,t)=>{if(c)e.adoptedStyleSheets=t.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const i of t){const t=document.createElement("style"),o=d.litNonce;void 0!==o&&t.setAttribute("nonce",o),t.textContent=i.cssText,e.appendChild(t)}},g=c?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return(e=>new u("string"==typeof e?e:e+"",void 0,p))(t)})(e):e,{is:m,defineProperty:y,getOwnPropertyDescriptor:f,getOwnPropertyNames:v,getOwnPropertySymbols:x,getPrototypeOf:w}=Object,k=globalThis,$=k.trustedTypes,S=$?$.emptyScript:"",C=k.reactiveElementPolyfillSupport,E=(e,t)=>e,O={toAttribute(e,t){switch(t){case Boolean:e=e?S:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let i=e;switch(t){case Boolean:i=null!==e;break;case Number:i=null===e?null:Number(e);break;case Object:case Array:try{i=JSON.parse(e)}catch(e){i=null}}return i}},D=(e,t)=>!m(e,t),M={attribute:!0,type:String,converter:O,reflect:!1,useDefault:!1,hasChanged:D};
|
|
13
13
|
/**
|
|
14
14
|
* @license
|
|
15
15
|
* Copyright 2017 Google LLC
|
|
16
16
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
17
|
-
*/Symbol.metadata??=Symbol("metadata"),k.litPropertyMetadata??=new WeakMap;class
|
|
17
|
+
*/Symbol.metadata??=Symbol("metadata"),k.litPropertyMetadata??=new WeakMap;class F extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=M){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){const i=Symbol(),o=this.getPropertyDescriptor(e,i,t);void 0!==o&&y(this.prototype,e,o)}}static getPropertyDescriptor(e,t,i){const{get:o,set:r}=f(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:o,set(t){const n=o?.call(this);r?.call(this,t),this.requestUpdate(e,n,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??M}static _$Ei(){if(this.hasOwnProperty(E("elementProperties")))return;const e=w(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(E("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(E("properties"))){const e=this.properties,t=[...v(e),...x(e)];for(const i of t)this.createProperty(i,e[i])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,i]of t)this.elementProperties.set(e,i)}this._$Eh=new Map;for(const[e,t]of this.elementProperties){const i=this._$Eu(e,t);void 0!==i&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const i=new Set(e.flat(1/0).reverse());for(const e of i)t.unshift(g(e))}else void 0!==e&&t.push(g(e));return t}static _$Eu(e,t){const i=t.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof e?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((e=>e(this)))}addController(e){(this._$EO??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const i of t.keys())this.hasOwnProperty(i)&&(e.set(i,this[i]),delete this[i]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return b(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((e=>e.hostConnected?.()))}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach((e=>e.hostDisconnected?.()))}attributeChangedCallback(e,t,i){this._$AK(e,i)}_$ET(e,t){const i=this.constructor.elementProperties.get(e),o=this.constructor._$Eu(e,i);if(void 0!==o&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:O).toAttribute(t,i.type);this._$Em=e,null==r?this.removeAttribute(o):this.setAttribute(o,r),this._$Em=null}}_$AK(e,t){const i=this.constructor,o=i._$Eh.get(e);if(void 0!==o&&this._$Em!==o){const e=i.getPropertyOptions(o),r="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:O;this._$Em=o,this[o]=r.fromAttribute(t,e.type)??this._$Ej?.get(o)??null,this._$Em=null}}requestUpdate(e,t,i){if(void 0!==e){const o=this.constructor,r=this[e];if(i??=o.getPropertyOptions(e),!((i.hasChanged??D)(r,t)||i.useDefault&&i.reflect&&r===this._$Ej?.get(e)&&!this.hasAttribute(o._$Eu(e,i))))return;this.C(e,t,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(e,t,{useDefault:i,reflect:o,wrapped:r},n){i&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,n??t??this[e]),!0!==r||void 0!==n)||(this._$AL.has(e)||(this.hasUpdated||i||(t=void 0),this._$AL.set(e,t)),!0===o&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,i]of e){const{wrapped:e}=i,o=this[t];!0!==e||this._$AL.has(t)||void 0===o||this.C(t,void 0,i,o)}}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach((e=>e.hostUpdate?.())),this.update(t)):this._$EM()}catch(t){throw e=!1,this._$EM(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach((e=>e.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach((e=>this._$ET(e,this[e]))),this._$EM()}updated(e){}firstUpdated(e){}}F.elementStyles=[],F.shadowRootOptions={mode:"open"},F[E("elementProperties")]=new Map,F[E("finalized")]=new Map,C?.({ReactiveElement:F}),(k.reactiveElementVersions??=[]).push("2.1.0");
|
|
18
18
|
/**
|
|
19
19
|
* @license
|
|
20
20
|
* Copyright 2017 Google LLC
|
|
21
21
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
22
22
|
*/
|
|
23
|
-
const
|
|
23
|
+
const j={attribute:!0,type:String,converter:O,reflect:!1,hasChanged:D},P=(e=j,t,i)=>{const{kind:o,metadata:r}=i;let n=globalThis.litPropertyMetadata.get(r);if(void 0===n&&globalThis.litPropertyMetadata.set(r,n=new Map),"setter"===o&&((e=Object.create(e)).wrapped=!0),n.set(i.name,e),"accessor"===o){const{name:o}=i;return{set(i){const r=t.get.call(this);t.set.call(this,i),this.requestUpdate(o,r,e)},init(t){return void 0!==t&&this.C(o,void 0,e,t),t}}}if("setter"===o){const{name:o}=i;return function(i){const r=this[o];t.call(this,i),this.requestUpdate(o,r,e)}}throw Error("Unsupported decorator location: "+o)};function T(e){return(t,i)=>"object"==typeof i?P(e,t,i):((e,t,i)=>{const o=t.hasOwnProperty(i);return t.constructor.createProperty(i,e),o?Object.getOwnPropertyDescriptor(t,i):void 0})(e,t,i)}
|
|
24
24
|
/**
|
|
25
25
|
* @license
|
|
26
26
|
* Copyright 2017 Google LLC
|
|
27
27
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
28
|
-
*/function
|
|
28
|
+
*/function A(e){return T({...e,state:!0,attribute:!1})}
|
|
29
29
|
/**
|
|
30
30
|
* @license
|
|
31
31
|
* Copyright 2017 Google LLC
|
|
@@ -36,52 +36,52 @@ const P={attribute:!0,type:String,converter:O,reflect:!1,hasChanged:j},I=(t=P,e,
|
|
|
36
36
|
* Copyright 2017 Google LLC
|
|
37
37
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
38
38
|
*/
|
|
39
|
-
function
|
|
39
|
+
function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,i),i))(t,i,{get(){return(t=>t.renderRoot?.querySelector(e)??null)(this)}})}const I=e`
|
|
40
40
|
font-family: 'Graphik', sans-serif;
|
|
41
41
|
font-weight: 400;
|
|
42
42
|
font-size: 12px;
|
|
43
43
|
line-height: 15px;
|
|
44
44
|
letter-spacing: 0%;
|
|
45
|
-
`,
|
|
45
|
+
`,L=e`
|
|
46
46
|
font-family: 'Graphik', sans-serif;
|
|
47
47
|
font-weight: 400;
|
|
48
48
|
font-size: 14px;
|
|
49
49
|
line-height: 25px;
|
|
50
50
|
letter-spacing: 0%;
|
|
51
|
-
`,
|
|
51
|
+
`,_=e`
|
|
52
52
|
font-family: 'Graphik', sans-serif;
|
|
53
53
|
font-weight: 400;
|
|
54
54
|
font-size: 16px;
|
|
55
55
|
line-height: 25px;
|
|
56
56
|
letter-spacing: 0%;
|
|
57
|
-
`,B=
|
|
57
|
+
`,B=e`
|
|
58
58
|
font-family: 'Graphik', sans-serif;
|
|
59
59
|
font-weight: 400;
|
|
60
60
|
font-size: 18px;
|
|
61
61
|
line-height: 30px;
|
|
62
62
|
letter-spacing: 0%;
|
|
63
|
-
`,
|
|
63
|
+
`,N=e`
|
|
64
64
|
font-family: 'Graphik', sans-serif;
|
|
65
65
|
font-weight: 400;
|
|
66
66
|
font-size: 18px;
|
|
67
67
|
line-height: 30px;
|
|
68
68
|
letter-spacing: 0%;
|
|
69
69
|
vertical-align: middle;
|
|
70
|
-
`,
|
|
70
|
+
`,R=e`
|
|
71
71
|
font-family: 'Graphik', sans-serif;
|
|
72
72
|
font-weight: 400;
|
|
73
73
|
font-size: 20px;
|
|
74
74
|
line-height: 30px;
|
|
75
75
|
letter-spacing: -1%;
|
|
76
76
|
vertical-align: middle;
|
|
77
|
-
`,q=
|
|
77
|
+
`,q=e`
|
|
78
78
|
font-family: 'Graphik', sans-serif;
|
|
79
79
|
font-weight: 400;
|
|
80
80
|
font-size: 26px;
|
|
81
81
|
line-height: 30px;
|
|
82
82
|
letter-spacing: -1%;
|
|
83
83
|
vertical-align: middle;
|
|
84
|
-
`;let V=class extends
|
|
84
|
+
`;let V=class extends t{constructor(){super(...arguments),this.title="",this.isOpen=!1,this.isDesktop=window.innerWidth>940,this.handleResize=()=>{this.isDesktop=window.innerWidth>940}}static{this.styles=e`
|
|
85
85
|
:host {
|
|
86
86
|
display: flex;
|
|
87
87
|
flex-direction: column;
|
|
@@ -100,7 +100,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
.title {
|
|
103
|
-
${
|
|
103
|
+
${_}
|
|
104
104
|
color: var(--secondary-color);
|
|
105
105
|
}
|
|
106
106
|
|
|
@@ -159,13 +159,13 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
159
159
|
<div class="content ${this.isOpen?"open":""}">
|
|
160
160
|
<slot></slot>
|
|
161
161
|
</div>
|
|
162
|
-
`}};
|
|
162
|
+
`}};a([T({type:String}),s("design:type",Object)],V.prototype,"title",void 0),a([A(),s("design:type",Object)],V.prototype,"isOpen",void 0),a([A(),s("design:type",Object)],V.prototype,"isDesktop",void 0),V=a([l("accordion-panel")],V);let W=class extends t{static{this.styles=e`
|
|
163
163
|
:host {
|
|
164
164
|
display: flex;
|
|
165
165
|
flex-direction: column;
|
|
166
166
|
gap: 16px;
|
|
167
167
|
}
|
|
168
|
-
`}render(){return i`<slot></slot>`}};
|
|
168
|
+
`}render(){return i`<slot></slot>`}};W=a([l("accordion-list")],W);let Y=class extends t{constructor(){super(...arguments),this.variant="button-primary",this.size="md",this.label="",this.loader=!1,this.iconPosition="left",this.disabled=!1,this.iconName=null,this.type="button",this.idevent=""}static{this.styles=e`
|
|
169
169
|
:host {
|
|
170
170
|
display: inline-block;
|
|
171
171
|
}
|
|
@@ -190,7 +190,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
190
190
|
}
|
|
191
191
|
|
|
192
192
|
.button-md {
|
|
193
|
-
${
|
|
193
|
+
${_}
|
|
194
194
|
min-height: 57px;
|
|
195
195
|
}
|
|
196
196
|
|
|
@@ -305,6 +305,32 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
305
305
|
height: 24px;
|
|
306
306
|
}
|
|
307
307
|
|
|
308
|
+
/* Button Icon */
|
|
309
|
+
.button-icon {
|
|
310
|
+
background: none;
|
|
311
|
+
border: none;
|
|
312
|
+
color: var(--primary-color);
|
|
313
|
+
padding: 4px;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.button-icon:not([disabled]):hover {
|
|
317
|
+
background: var(--primary-color-5);
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.button-icon:not([disabled]):active {
|
|
321
|
+
background-color: var(--primary-color-10);
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.button-icon:not([disabled]):focus-visible {
|
|
325
|
+
outline: 2px solid var(--primary-color);
|
|
326
|
+
outline-offset: 2px;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.button-icon[disabled] {
|
|
330
|
+
color: var(--secondary-color-60);
|
|
331
|
+
cursor: default;
|
|
332
|
+
}
|
|
333
|
+
|
|
308
334
|
/* Loader */
|
|
309
335
|
.loader {
|
|
310
336
|
display: flex;
|
|
@@ -388,20 +414,20 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
388
414
|
cursor: default;
|
|
389
415
|
}
|
|
390
416
|
|
|
391
|
-
`}handleClick(
|
|
417
|
+
`}handleClick(e){if(!this.disabled)if("submit"===this.type){const e=this.closest("form");e&&e.requestSubmit()}else if("reset"===this.type){const e=this.closest("form");e&&e.reset()}else this.idevent&&this.dispatchEvent(new CustomEvent("randstad-button-click",{detail:this.idevent,composed:!0,bubbles:!0,cancelable:!1}))}render(){const e={button:!0,[this.variant]:!0,loader:this.loader,[`button-${this.size}`]:["button-primary","button-secondary","button-tertiary"].includes(this.variant)},t="button-tertiary"===this.variant?"var(--primary-color)":"white";return i`
|
|
392
418
|
<button
|
|
393
419
|
part="button"
|
|
394
420
|
type=${this.type}
|
|
395
|
-
class=${
|
|
421
|
+
class=${n(e)}
|
|
396
422
|
?disabled=${this.disabled}
|
|
397
423
|
?aria-busy=${this.loader}
|
|
398
424
|
@click=${this.handleClick}
|
|
399
425
|
>
|
|
400
426
|
${this.loader?i`
|
|
401
427
|
<div class="loader">
|
|
402
|
-
<span class="dot" style="background-color: ${
|
|
403
|
-
<span class="dot" style="background-color: ${
|
|
404
|
-
<span class="dot" style="background-color: ${
|
|
428
|
+
<span class="dot" style="background-color: ${t};"></span>
|
|
429
|
+
<span class="dot" style="background-color: ${t};"></span>
|
|
430
|
+
<span class="dot" style="background-color: ${t};"></span>
|
|
405
431
|
</div>
|
|
406
432
|
`:i`
|
|
407
433
|
${this.iconSrc&&"button-round"===this.variant?i`<img src=${this.iconSrc} alt="icon" class="button-icon" part="button-icon"/>`:""}
|
|
@@ -410,7 +436,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
410
436
|
${this.iconName&&"button-round"!==this.variant&&"right"===this.iconPosition?i`<randstad-icon name=${this.iconName} size="24px"></randstad-icon>`:""}
|
|
411
437
|
`}
|
|
412
438
|
</button>
|
|
413
|
-
`}};
|
|
439
|
+
`}};a([T({type:String}),s("design:type",String)],Y.prototype,"variant",void 0),a([T({type:String}),s("design:type",String)],Y.prototype,"size",void 0),a([T({type:String}),s("design:type",Object)],Y.prototype,"label",void 0),a([T({type:Boolean}),s("design:type",Object)],Y.prototype,"loader",void 0),a([T({type:String,attribute:"icon-src"}),s("design:type",String)],Y.prototype,"iconSrc",void 0),a([T({type:String}),s("design:type",String)],Y.prototype,"iconPosition",void 0),a([T({type:Boolean,reflect:!0}),s("design:type",Boolean)],Y.prototype,"disabled",void 0),a([T({type:String}),s("design:type",Object)],Y.prototype,"iconName",void 0),a([T({type:String}),s("design:type",String)],Y.prototype,"type",void 0),a([T({type:String}),s("design:type",Object)],Y.prototype,"idevent",void 0),Y=a([l("randstad-button")],Y);let U=class extends t{constructor(){super(...arguments),this.img="",this.name="",this.title="",this.description="",this.buttonLabel="Contactanos",this.cardId=""}static{this.styles=e`
|
|
414
440
|
:host {
|
|
415
441
|
display: inline-block;
|
|
416
442
|
font-family: "Graphik", sans-serif;
|
|
@@ -489,7 +515,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
489
515
|
}
|
|
490
516
|
|
|
491
517
|
.description {
|
|
492
|
-
${
|
|
518
|
+
${L}
|
|
493
519
|
}
|
|
494
520
|
|
|
495
521
|
::part(button) {
|
|
@@ -527,14 +553,14 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
527
553
|
</div>
|
|
528
554
|
</div>
|
|
529
555
|
</div>
|
|
530
|
-
`}};
|
|
556
|
+
`}};a([T({type:String}),s("design:type",Object)],U.prototype,"img",void 0),a([T({type:String}),s("design:type",Object)],U.prototype,"name",void 0),a([T({type:String}),s("design:type",Object)],U.prototype,"title",void 0),a([T({type:String}),s("design:type",Object)],U.prototype,"description",void 0),a([T({type:String}),s("design:type",Object)],U.prototype,"buttonLabel",void 0),a([T({type:String}),s("design:type",Object)],U.prototype,"cardId",void 0),U=a([l("carousel-card")],U);let G=class extends t{constructor(){super(...arguments),this.checked=!1,this.error=!1,this.disabled=!1}static{this.styles=e`
|
|
531
557
|
:host {
|
|
532
558
|
display: block;
|
|
533
559
|
max-width: 100%;
|
|
534
560
|
}
|
|
535
561
|
|
|
536
562
|
label {
|
|
537
|
-
${
|
|
563
|
+
${L}
|
|
538
564
|
display: flex;
|
|
539
565
|
align-items: center;
|
|
540
566
|
gap: 8px;
|
|
@@ -626,7 +652,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
626
652
|
cursor: default;
|
|
627
653
|
}
|
|
628
654
|
|
|
629
|
-
`}toggleCheck(
|
|
655
|
+
`}toggleCheck(e){this.checked=e.target.checked,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("click",{bubbles:!0,composed:!0}))}render(){return i`
|
|
630
656
|
<label class="${this.error?"error":""} ${this.disabled?"disabled":""}">
|
|
631
657
|
<input
|
|
632
658
|
type="checkbox"
|
|
@@ -642,7 +668,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
642
668
|
<slot></slot>
|
|
643
669
|
</span>
|
|
644
670
|
</label>
|
|
645
|
-
`}};
|
|
671
|
+
`}};a([T({type:Boolean,reflect:!0}),s("design:type",Object)],G.prototype,"checked",void 0),a([T({type:Boolean}),s("design:type",Object)],G.prototype,"error",void 0),a([T({type:Boolean}),s("design:type",Object)],G.prototype,"disabled",void 0),G=a([l("randstad-checkbox")],G);let H=class extends t{constructor(){super(...arguments),this.value="",this.size="md",this.icon=null,this.helper=null,this.error=!1,this.errorMessage="",this.disabled=!1,this.typing=!1,this.type="text",this.isPasswordVisible=!1,this.cleanButton=!1,this.required=!1,this.optional=!1,this.helperAlign="left"}static{this.styles=e`
|
|
646
672
|
:host {
|
|
647
673
|
display: block;
|
|
648
674
|
font-family: 'Graphik', sans-serif;
|
|
@@ -664,7 +690,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
664
690
|
}
|
|
665
691
|
|
|
666
692
|
.form-label {
|
|
667
|
-
${
|
|
693
|
+
${_}
|
|
668
694
|
display: flex;
|
|
669
695
|
align-items: baseline;
|
|
670
696
|
flex-direction: row;
|
|
@@ -727,10 +753,10 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
727
753
|
|
|
728
754
|
.input-with-button input {
|
|
729
755
|
width: 100%;
|
|
730
|
-
|
|
756
|
+
}
|
|
731
757
|
|
|
732
758
|
.input-with-button input[type="password"]{
|
|
733
|
-
|
|
759
|
+
padding-right: 40px;
|
|
734
760
|
}
|
|
735
761
|
|
|
736
762
|
.input-with-button button {
|
|
@@ -761,7 +787,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
761
787
|
}
|
|
762
788
|
|
|
763
789
|
textarea.form-input {
|
|
764
|
-
min-height:
|
|
790
|
+
min-height: 30px;
|
|
765
791
|
width: 100%;
|
|
766
792
|
}
|
|
767
793
|
|
|
@@ -771,19 +797,19 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
771
797
|
}
|
|
772
798
|
|
|
773
799
|
.helper-description {
|
|
774
|
-
${
|
|
800
|
+
${_}
|
|
775
801
|
color: var(--secondary-color-40);
|
|
776
802
|
margin: 0px;
|
|
777
803
|
}
|
|
778
804
|
|
|
779
805
|
.error-message {
|
|
780
|
-
${
|
|
806
|
+
${_}
|
|
781
807
|
color: var(--ui-negative);
|
|
782
808
|
margin: 0px;
|
|
783
809
|
}
|
|
784
810
|
|
|
785
811
|
.link-text {
|
|
786
|
-
${
|
|
812
|
+
${_}
|
|
787
813
|
color: var(--primary-color);
|
|
788
814
|
cursor: pointer;
|
|
789
815
|
text-align: end;
|
|
@@ -873,44 +899,47 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
873
899
|
|
|
874
900
|
.optional {
|
|
875
901
|
color: var(--secondary-color-60);
|
|
876
|
-
${
|
|
902
|
+
${I}
|
|
877
903
|
}
|
|
878
|
-
`}togglePassword(
|
|
904
|
+
`}togglePassword(e){this.isPasswordVisible=!this.isPasswordVisible;const t=e.currentTarget.parentElement?.querySelector("input");t&&(t.type=this.isPasswordVisible?"text":"password"),this.requestUpdate()}handleInput(e){const t=e.target.value;void 0!==this.maxLength&&"textarea"!==this.type?this.value=t.slice(0,this.maxLength):this.value=t,this.dispatchEvent(new CustomEvent("valueChanged",{detail:this.value})),this.dispatchEvent(new Event("input",{bubbles:!0})),this.requestUpdate()}handleClear(){this.value="",this.dispatchEvent(new CustomEvent("valueChanged",{detail:this.value})),this.dispatchEvent(new Event("input",{bubbles:!0})),this.requestUpdate()}handleLinkClick(e){e.preventDefault(),this.linkRoute&&this.dispatchEvent(new CustomEvent("linkClicked",{detail:this.linkRoute,bubbles:!0,composed:!0}))}handleKeyDown(e){if("Enter"===e.key){const e=new Event("submit",{bubbles:!0,composed:!0,cancelable:!0}),t=this.closest("form");t&&t.dispatchEvent(e)}}render(){const e=this.cleanButton&&this.value&&"password"!==this.type&&"textarea"!==this.type,t="textarea"===this.type?`height: ${this.heightTextArea??"30px"}; max-height: ${this.maxHeightTextArea??"30px"}; overflow-y: auto;`:"",r=i`
|
|
905
|
+
${this.labelColor?`--label-color: ${this.labelColor};`:""}
|
|
906
|
+
`,n=`text-align: ${this.helperAlign??"left"};`;return i`
|
|
879
907
|
<div
|
|
880
908
|
class="form ${this.error?"error":""} ${this.disabled?"disabled":""}"
|
|
881
|
-
style
|
|
909
|
+
style="${r}"
|
|
882
910
|
>
|
|
883
911
|
${this.label?i`
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
`:o}
|
|
912
|
+
<div class="label-container">
|
|
913
|
+
<label class="form-label">
|
|
914
|
+
${this.label}
|
|
915
|
+
${this.required?i`<span class="required">*</span>`:this.optional?i`<span class="optional">opcional</span>`:o}
|
|
916
|
+
</label>
|
|
917
|
+
|
|
918
|
+
${this.helpLink?i`
|
|
919
|
+
<a class="tooltip-wrapper" href="${this.helpLink}">
|
|
920
|
+
<randstad-icon name="ayuda" size="20px">
|
|
921
|
+
</randstad-icon>
|
|
922
|
+
</a>
|
|
923
|
+
`:o}
|
|
924
|
+
</div>
|
|
925
|
+
`:o}
|
|
899
926
|
|
|
900
927
|
<div class="form-container">
|
|
901
928
|
${"left"===this.icon?i`<span class="icon left"></span>`:o}
|
|
902
929
|
|
|
903
930
|
<div class="input-with-button">
|
|
904
|
-
${"textarea"===this.type?i`
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
931
|
+
${"textarea"===this.type?i`
|
|
932
|
+
<textarea
|
|
933
|
+
class="form-input"
|
|
934
|
+
placeholder=${this.placeholder||""}
|
|
935
|
+
.value=${this.value}
|
|
936
|
+
?disabled=${this.disabled}
|
|
937
|
+
@input=${this.handleInput}
|
|
938
|
+
@keydown=${this.handleKeyDown}
|
|
939
|
+
maxlength=${this.maxLength??o}
|
|
940
|
+
style="${t}"
|
|
941
|
+
>
|
|
942
|
+
</textarea>`:i`
|
|
914
943
|
<input
|
|
915
944
|
class="form-input"
|
|
916
945
|
type=${"password"!==this.type||this.isPasswordVisible?"text":"password"}
|
|
@@ -922,31 +951,67 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
922
951
|
maxlength=${this.maxLength??o}
|
|
923
952
|
/>
|
|
924
953
|
|
|
925
|
-
${"password"===this.type?i
|
|
926
|
-
|
|
954
|
+
${"password"===this.type?i`
|
|
955
|
+
<button
|
|
956
|
+
type="button"
|
|
957
|
+
class="toggle-password"
|
|
958
|
+
@click=${this.togglePassword}
|
|
959
|
+
>
|
|
960
|
+
${this.isPasswordVisible?i`
|
|
961
|
+
<randstad-icon
|
|
962
|
+
name="eye_crossed"
|
|
963
|
+
size="24px"
|
|
964
|
+
>
|
|
965
|
+
</randstad-icon>
|
|
966
|
+
`:i`
|
|
967
|
+
<randstad-icon
|
|
968
|
+
name="eye"
|
|
969
|
+
size="24px"
|
|
970
|
+
>
|
|
971
|
+
</randstad-icon>`}
|
|
927
972
|
</button>`:o}
|
|
928
973
|
|
|
929
|
-
${
|
|
930
|
-
|
|
974
|
+
${e?i`
|
|
975
|
+
<button
|
|
976
|
+
type="button"
|
|
977
|
+
class="clean-button"
|
|
978
|
+
@click=${this.handleClear}
|
|
979
|
+
>
|
|
980
|
+
<randstad-icon
|
|
981
|
+
name="close"
|
|
982
|
+
size="24px"
|
|
983
|
+
style="--icon-color: var(--primary-color);"
|
|
984
|
+
>
|
|
985
|
+
</randstad-icon>
|
|
931
986
|
</button>`:o}
|
|
932
|
-
|
|
987
|
+
`}
|
|
933
988
|
</div>
|
|
934
989
|
|
|
935
990
|
${"right"===this.icon?i`<span class="icon right"></span>`:o}
|
|
936
991
|
</div>
|
|
937
992
|
|
|
938
|
-
${this.error?i`
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
993
|
+
${this.error?i`
|
|
994
|
+
<p class="error-message">
|
|
995
|
+
${this.errorMessage?this.errorMessage:i`<slot name="error-extended"></slot>`}
|
|
996
|
+
</p>`:o}
|
|
942
997
|
|
|
943
|
-
${this.linkText&&this.linkRoute?i
|
|
944
|
-
|
|
998
|
+
${this.linkText&&this.linkRoute?i`
|
|
999
|
+
<div style="text-align: end;">
|
|
1000
|
+
<a class="link-text" @click=${this.handleLinkClick}>
|
|
1001
|
+
${this.linkText}
|
|
1002
|
+
</a
|
|
945
1003
|
</div>`:o}
|
|
946
1004
|
|
|
947
|
-
${this.helper?i
|
|
1005
|
+
${this.helper?i`
|
|
1006
|
+
<p
|
|
1007
|
+
class="helper-description"
|
|
1008
|
+
style=${n}
|
|
1009
|
+
>
|
|
1010
|
+
${this.helper}
|
|
1011
|
+
</p>
|
|
1012
|
+
`:o}
|
|
948
1013
|
</div>
|
|
949
|
-
`}};
|
|
1014
|
+
`}};a([T({type:String}),s("design:type",String)],H.prototype,"placeholder",void 0),a([T({type:String}),s("design:type",String)],H.prototype,"label",void 0),a([T({type:String}),s("design:type",String)],H.prototype,"labelColor",void 0),a([T({type:String}),s("design:type",String)],H.prototype,"value",void 0),a([T({type:String}),s("design:type",String)],H.prototype,"size",void 0),a([T({type:String}),s("design:type",Object)],H.prototype,"icon",void 0),a([T({type:String}),s("design:type",Object)],H.prototype,"helper",void 0),a([T({type:Boolean}),s("design:type",Boolean)],H.prototype,"error",void 0),a([T({type:String}),s("design:type",String)],H.prototype,"errorMessage",void 0),a([T({type:Boolean}),s("design:type",Boolean)],H.prototype,"disabled",void 0),a([T({type:Boolean}),s("design:type",Boolean)],H.prototype,"typing",void 0),a([T({type:String}),s("design:type",String)],H.prototype,"type",void 0),a([T({type:String}),s("design:type",String)],H.prototype,"tooltipMessage",void 0),a([T({type:String}),s("design:type",String)],H.prototype,"linkText",void 0),a([T({type:String}),s("design:type",String)],H.prototype,"linkRoute",void 0),a([T({type:Boolean,reflect:!0}),s("design:type",Object)],H.prototype,"isPasswordVisible",void 0),a([T({type:Boolean}),s("design:type",Boolean)],H.prototype,"cleanButton",void 0),a([T({type:Number}),s("design:type",Number)],H.prototype,"maxLength",void 0),a([T({type:Boolean}),s("design:type",Object)],H.prototype,"required",void 0),a([T({type:Boolean}),s("design:type",Object)],H.prototype,"optional",void 0),a([T({type:String}),s("design:type",String)],H.prototype,"helpLink",void 0),a([T({type:String}),s("design:type",String)],H.prototype,"heightTextArea",void 0),a([T({type:String}),s("design:type",String)],H.prototype,"maxHeightTextArea",void 0),a([T({type:String}),s("design:type",String)],H.prototype,"helperAlign",void 0),H=a([l("randstad-form")],H);let K=class extends t{constructor(){super(...arguments),this.label="",this.error=!1,this.errorMessage="",this.required=!1,this.optional=!1}static{this.styles=e`
|
|
950
1015
|
:host {
|
|
951
1016
|
display: flex;
|
|
952
1017
|
flex-direction: column;
|
|
@@ -956,7 +1021,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
956
1021
|
}
|
|
957
1022
|
|
|
958
1023
|
.form-label {
|
|
959
|
-
${
|
|
1024
|
+
${_}
|
|
960
1025
|
display: flex;
|
|
961
1026
|
align-items: baseline;
|
|
962
1027
|
flex-direction: row;
|
|
@@ -971,12 +1036,12 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
971
1036
|
}
|
|
972
1037
|
|
|
973
1038
|
.helper {
|
|
974
|
-
${
|
|
1039
|
+
${_}
|
|
975
1040
|
color: var(--secondary-color-40);
|
|
976
1041
|
}
|
|
977
1042
|
|
|
978
1043
|
.error {
|
|
979
|
-
${
|
|
1044
|
+
${_}
|
|
980
1045
|
color: var(--ui-negative);
|
|
981
1046
|
}
|
|
982
1047
|
|
|
@@ -986,12 +1051,13 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
986
1051
|
|
|
987
1052
|
.optional {
|
|
988
1053
|
color: var(--secondary-color-60);
|
|
989
|
-
${
|
|
1054
|
+
${I}
|
|
990
1055
|
}
|
|
991
1056
|
`}render(){return i`
|
|
992
1057
|
<label class="form-label">
|
|
993
1058
|
${this.label}
|
|
994
|
-
${this.required?i
|
|
1059
|
+
${this.required?i`
|
|
1060
|
+
<span class="required">*</span>`:this.optional?i`<span class="optional">opcional</span>`:o}
|
|
995
1061
|
</label>
|
|
996
1062
|
|
|
997
1063
|
<div class="fields">
|
|
@@ -999,7 +1065,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
999
1065
|
</div>
|
|
1000
1066
|
|
|
1001
1067
|
${this.error?i`<span class="error">${this.errorMessage}</span>`:this.helper?i`<span class="helper">${this.helper}</span>`:null}
|
|
1002
|
-
`}};
|
|
1068
|
+
`}};a([T({type:String}),s("design:type",Object)],K.prototype,"label",void 0),a([T({type:String}),s("design:type",String)],K.prototype,"helper",void 0),a([T({type:Boolean}),s("design:type",Object)],K.prototype,"error",void 0),a([T({type:String}),s("design:type",Object)],K.prototype,"errorMessage",void 0),a([T({type:Boolean}),s("design:type",Object)],K.prototype,"required",void 0),a([T({type:Boolean}),s("design:type",Object)],K.prototype,"optional",void 0),K=a([l("randstad-form-group")],K);class X extends t{constructor(){super(...arguments),this.name="",this.size="24px"}static{this.styles=e`
|
|
1003
1069
|
:host {
|
|
1004
1070
|
display: inline-flex;
|
|
1005
1071
|
width: var(--icon-size, 24px);
|
|
@@ -1013,14 +1079,14 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1013
1079
|
height: var(--icon-size, 24px);
|
|
1014
1080
|
fill: var(--icon-color, currentColor);
|
|
1015
1081
|
}
|
|
1016
|
-
`}connectedCallback(){super.connectedCallback(),this.style.setProperty("--icon-size",this.size)}updated(
|
|
1082
|
+
`}connectedCallback(){super.connectedCallback(),this.style.setProperty("--icon-size",this.size)}updated(e){e.has("size")&&this.style.setProperty("--icon-size",this.size)}async loadIcon(){try{const e=await fetch(`/assets/icons/${this.name}.svg`);if(!e.ok)throw new Error("Icon not found");const t=await e.text(),i=new DOMParser,o=i.parseFromString(t,"image/svg+xml").querySelector("svg");if(!o)throw new Error("No se encontró un elemento SVG válido");o.removeAttribute("fill"),o.setAttribute("width",this.size),o.setAttribute("height",this.size),o.querySelectorAll("[fill]").forEach((e=>e.removeAttribute("fill"))),o.setAttribute("fill","currentColor"),"innerHTML"in this.renderRoot&&(this.renderRoot.innerHTML=""),this.renderRoot.appendChild(o)}catch(e){console.error(`❌ Error cargando icono ${this.name}:`,e),"innerHTML"in this.renderRoot&&(this.renderRoot.innerHTML="<span>⚠️</span>")}}render(){return this.loadIcon(),null}}a([T({type:String}),s("design:type",Object)],X.prototype,"name",void 0),a([T({type:String}),s("design:type",Object)],X.prototype,"size",void 0),customElements.define("randstad-icon",X);let Q=class extends t{constructor(){super(...arguments),this.type="informative",this.icon="info",this.message="Este es un mensaje.",this.open=!1}static{this.styles=e`
|
|
1017
1083
|
:host {
|
|
1018
1084
|
display: block;
|
|
1019
1085
|
font-family: 'Graphik', sans-serif;
|
|
1020
1086
|
}
|
|
1021
1087
|
|
|
1022
1088
|
.container {
|
|
1023
|
-
${
|
|
1089
|
+
${_}
|
|
1024
1090
|
display: flex;
|
|
1025
1091
|
align-items: flex-start;
|
|
1026
1092
|
gap: 8px;
|
|
@@ -1066,7 +1132,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1066
1132
|
<randstad-icon class="icon" name="${this.icon}" size="24px" style="color: var(--icon-color);"></randstad-icon>
|
|
1067
1133
|
<span class="message">${this.message}</span>
|
|
1068
1134
|
</div>
|
|
1069
|
-
`}};
|
|
1135
|
+
`}};a([T({type:String}),s("design:type",String)],Q.prototype,"type",void 0),a([T({type:String}),s("design:type",String)],Q.prototype,"icon",void 0),a([T({type:String}),s("design:type",String)],Q.prototype,"message",void 0),a([T({type:Boolean}),s("design:type",Boolean)],Q.prototype,"open",void 0),Q=a([l("randstad-notice")],Q);let J=class extends t{constructor(){super(...arguments),this.open=!1,this.title="Título del modal",this.showNotice=!1,this.noticeType="informative",this.noticeMessage="",this.noticeIcon="info",this.showPrimaryButton=!1,this.primaryButtonLabel="Aceptar",this.showSecondaryButton=!1,this.secondaryButtonLabel="Cancelar",this.isFooterCustom=!1,this.modalWidth="500px",this.scrollable=!1,this.setScrollableMode=()=>{this.scrollable=window.innerWidth>940}}static{this.styles=e`
|
|
1070
1136
|
:host {
|
|
1071
1137
|
font-family: 'Graphik', sans-serif;
|
|
1072
1138
|
display: none;
|
|
@@ -1178,7 +1244,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1178
1244
|
}
|
|
1179
1245
|
|
|
1180
1246
|
.modal-subtitle {
|
|
1181
|
-
${
|
|
1247
|
+
${_}
|
|
1182
1248
|
margin: 0;
|
|
1183
1249
|
color: var(--secondary-color-60);
|
|
1184
1250
|
}
|
|
@@ -1265,7 +1331,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1265
1331
|
</div>
|
|
1266
1332
|
</div>
|
|
1267
1333
|
</div>
|
|
1268
|
-
`}};
|
|
1334
|
+
`}};a([T({type:Boolean,reflect:!0}),s("design:type",Object)],J.prototype,"open",void 0),a([T({type:String}),s("design:type",Object)],J.prototype,"title",void 0),a([T({type:String}),s("design:type",String)],J.prototype,"subtitle",void 0),a([T({type:Boolean}),s("design:type",Object)],J.prototype,"showNotice",void 0),a([T({type:String}),s("design:type",String)],J.prototype,"noticeType",void 0),a([T({type:String}),s("design:type",Object)],J.prototype,"noticeMessage",void 0),a([T({type:String}),s("design:type",Object)],J.prototype,"noticeIcon",void 0),a([T({type:Boolean}),s("design:type",Object)],J.prototype,"showPrimaryButton",void 0),a([T({type:String}),s("design:type",Object)],J.prototype,"primaryButtonLabel",void 0),a([T({type:Boolean}),s("design:type",Object)],J.prototype,"showSecondaryButton",void 0),a([T({type:String}),s("design:type",Object)],J.prototype,"secondaryButtonLabel",void 0),a([T({type:Boolean}),s("design:type",Object)],J.prototype,"isFooterCustom",void 0),a([T({type:String}),s("design:type",Object)],J.prototype,"modalWidth",void 0),a([A(),s("design:type",Object)],J.prototype,"scrollable",void 0),J=a([l("custom-modal")],J);let Z=class extends t{constructor(){super(...arguments),this.open=!1,this.type="default",this.icon="warning",this.title="Título del Popup",this.description="Descripción del popup",this.width="400px",this.buttonText="Aceptar",this.confirmText="Sí",this.cancelText="No",this.stackedActions=[],this._onBackgroundClick=e=>{const t=e.composedPath(),i=this.renderRoot.querySelector(".popup");i&&!t.includes(i)&&(this.dispatchEvent(new CustomEvent("popup-close",{detail:null})),this.open=!1)}}static{this.styles=e`
|
|
1269
1335
|
:host {
|
|
1270
1336
|
display: none;
|
|
1271
1337
|
position: fixed;
|
|
@@ -1327,13 +1393,13 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1327
1393
|
}
|
|
1328
1394
|
|
|
1329
1395
|
.popup-title {
|
|
1330
|
-
${
|
|
1396
|
+
${R}
|
|
1331
1397
|
margin: 0;
|
|
1332
1398
|
color: var(--secondary-color-80);
|
|
1333
1399
|
}
|
|
1334
1400
|
|
|
1335
1401
|
.popup-description {
|
|
1336
|
-
${
|
|
1402
|
+
${_}
|
|
1337
1403
|
margin: 0;
|
|
1338
1404
|
color: var(--secondary-color-60);
|
|
1339
1405
|
}
|
|
@@ -1361,7 +1427,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1361
1427
|
}
|
|
1362
1428
|
|
|
1363
1429
|
.action-item {
|
|
1364
|
-
${
|
|
1430
|
+
${N};
|
|
1365
1431
|
display: flex;
|
|
1366
1432
|
align-items: center;
|
|
1367
1433
|
gap: 16px;
|
|
@@ -1386,7 +1452,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1386
1452
|
justify-content: center;
|
|
1387
1453
|
}
|
|
1388
1454
|
|
|
1389
|
-
`}firstUpdated(){if(this.open){const
|
|
1455
|
+
`}firstUpdated(){if(this.open){const e=this.renderRoot.querySelector("randstad-button");e&&e.focus()}this.addEventListener("click",this._onBackgroundClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this._onBackgroundClick)}closePopup(e){this.dispatchEvent(new CustomEvent("popup-close",{detail:e})),this.open=!1}render(){return i`
|
|
1390
1456
|
<div
|
|
1391
1457
|
class="popup"
|
|
1392
1458
|
role="dialog"
|
|
@@ -1411,19 +1477,19 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1411
1477
|
</div>
|
|
1412
1478
|
`:"stacked"===this.type?i`
|
|
1413
1479
|
<div class="popup-actions">
|
|
1414
|
-
${this.stackedActions.map((
|
|
1480
|
+
${this.stackedActions.map((e=>i`
|
|
1415
1481
|
<div
|
|
1416
1482
|
class="action-item"
|
|
1417
|
-
@click=${()=>this.closePopup(
|
|
1483
|
+
@click=${()=>this.closePopup(e.value)}
|
|
1418
1484
|
>
|
|
1419
1485
|
<div class="icon-circle">
|
|
1420
1486
|
<randstad-icon
|
|
1421
|
-
name=${
|
|
1487
|
+
name=${e.icon}
|
|
1422
1488
|
size="24px"
|
|
1423
1489
|
style="--icon-color: var(--primary-color);"
|
|
1424
1490
|
></randstad-icon>
|
|
1425
1491
|
</div>
|
|
1426
|
-
<span>${
|
|
1492
|
+
<span>${e.label}</span>
|
|
1427
1493
|
</div>
|
|
1428
1494
|
`))}
|
|
1429
1495
|
</div>
|
|
@@ -1449,7 +1515,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1449
1515
|
`}
|
|
1450
1516
|
</div>
|
|
1451
1517
|
</div>
|
|
1452
|
-
`}};
|
|
1518
|
+
`}};a([T({type:Boolean,reflect:!0}),s("design:type",Object)],Z.prototype,"open",void 0),a([T({type:String}),s("design:type",String)],Z.prototype,"type",void 0),a([T({type:String}),s("design:type",Object)],Z.prototype,"icon",void 0),a([T({type:String}),s("design:type",Object)],Z.prototype,"title",void 0),a([T({type:String}),s("design:type",Object)],Z.prototype,"description",void 0),a([T({type:String}),s("design:type",Object)],Z.prototype,"width",void 0),a([T({type:String}),s("design:type",Object)],Z.prototype,"buttonText",void 0),a([T({type:String}),s("design:type",Object)],Z.prototype,"confirmText",void 0),a([T({type:String}),s("design:type",Object)],Z.prototype,"cancelText",void 0),a([T({type:Array}),s("design:type",Array)],Z.prototype,"stackedActions",void 0),Z=a([l("custom-popup")],Z);let ee=class extends t{constructor(){super(...arguments),this.value=0,this.max=5}static{this.styles=e`
|
|
1453
1519
|
:host {
|
|
1454
1520
|
display: inline-block;
|
|
1455
1521
|
width: 64px;
|
|
@@ -1462,7 +1528,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1462
1528
|
}
|
|
1463
1529
|
|
|
1464
1530
|
.circle-text {
|
|
1465
|
-
${
|
|
1531
|
+
${I};
|
|
1466
1532
|
text-align: center;
|
|
1467
1533
|
vertical-align: middle;
|
|
1468
1534
|
fill: var(--randstad-dark-blue-40);
|
|
@@ -1478,7 +1544,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1478
1544
|
stroke: var(--primary-light-blue);
|
|
1479
1545
|
stroke-linecap: round;
|
|
1480
1546
|
}
|
|
1481
|
-
`}render(){const
|
|
1547
|
+
`}render(){const e=2*Math.PI*28,t=Math.max(this.max,1),o=e*(1-Math.min(this.value/t,1));return i`
|
|
1482
1548
|
<svg
|
|
1483
1549
|
viewBox="0 0 64 64"
|
|
1484
1550
|
role="img"
|
|
@@ -1501,7 +1567,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1501
1567
|
r="${28}"
|
|
1502
1568
|
stroke-width="${6}"
|
|
1503
1569
|
fill="none"
|
|
1504
|
-
stroke-dasharray="${
|
|
1570
|
+
stroke-dasharray="${e}"
|
|
1505
1571
|
stroke-dashoffset="${o}"
|
|
1506
1572
|
transform="rotate(-90 32 32)"
|
|
1507
1573
|
/>
|
|
@@ -1510,18 +1576,18 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1510
1576
|
${this.value} de ${this.max}
|
|
1511
1577
|
</text>
|
|
1512
1578
|
</svg>
|
|
1513
|
-
`}};
|
|
1579
|
+
`}};a([T({type:Number}),s("design:type",Object)],ee.prototype,"value",void 0),a([T({type:Number}),s("design:type",Object)],ee.prototype,"max",void 0),ee=a([l("progress-circle")],ee);
|
|
1514
1580
|
/**
|
|
1515
1581
|
* @license
|
|
1516
1582
|
* Copyright 2023 Google LLC
|
|
1517
1583
|
* SPDX-License-Identifier: Apache-2.0
|
|
1518
1584
|
*/
|
|
1519
|
-
const
|
|
1585
|
+
const te=Symbol("attachableController");let ie;r||(ie=new MutationObserver((e=>{for(const t of e)t.target[te]?.hostConnected()})));class oe{get htmlFor(){return this.host.getAttribute("for")}set htmlFor(e){null===e?this.host.removeAttribute("for"):this.host.setAttribute("for",e)}get control(){return this.host.hasAttribute("for")?this.htmlFor&&this.host.isConnected?this.host.getRootNode().querySelector(`#${this.htmlFor}`):null:this.currentControl||this.host.parentElement}set control(e){e?this.attach(e):this.detach()}constructor(e,t){this.host=e,this.onControlChange=t,this.currentControl=null,e.addController(this),e[te]=this,ie?.observe(e,{attributeFilter:["for"]})}attach(e){e!==this.currentControl&&(this.setCurrentControl(e),this.host.removeAttribute("for"))}detach(){this.setCurrentControl(null),this.host.setAttribute("for","")}hostConnected(){this.setCurrentControl(this.control)}hostDisconnected(){this.setCurrentControl(null)}setCurrentControl(e){this.onControlChange(this.currentControl,e),this.currentControl=e}}
|
|
1520
1586
|
/**
|
|
1521
1587
|
* @license
|
|
1522
1588
|
* Copyright 2021 Google LLC
|
|
1523
1589
|
* SPDX-License-Identifier: Apache-2.0
|
|
1524
|
-
*/const
|
|
1590
|
+
*/const re=["focusin","focusout","pointerdown"];class ne extends t{constructor(){super(...arguments),this.visible=!1,this.inward=!1,this.attachableController=new oe(this,this.onControlChange.bind(this))}get htmlFor(){return this.attachableController.htmlFor}set htmlFor(e){this.attachableController.htmlFor=e}get control(){return this.attachableController.control}set control(e){this.attachableController.control=e}attach(e){this.attachableController.attach(e)}detach(){this.attachableController.detach()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true")}handleEvent(e){if(!e[ae]){switch(e.type){default:return;case"focusin":this.visible=this.control?.matches(":focus-visible")??!1;break;case"focusout":case"pointerdown":this.visible=!1}e[ae]=!0}}onControlChange(e,t){if(!r)for(const i of re)e?.removeEventListener(i,this),t?.addEventListener(i,this)}update(e){e.has("visible")&&this.dispatchEvent(new Event("visibility-changed")),super.update(e)}}a([T({type:Boolean,reflect:!0})],ne.prototype,"visible",void 0),a([T({type:Boolean,reflect:!0})],ne.prototype,"inward",void 0);const ae=Symbol("handledByFocusRing"),se=e`:host{animation-delay:0s,calc(var(--md-focus-ring-duration, 600ms)*.25);animation-duration:calc(var(--md-focus-ring-duration, 600ms)*.25),calc(var(--md-focus-ring-duration, 600ms)*.75);animation-timing-function:cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box;color:var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));display:none;pointer-events:none;position:absolute}:host([visible]){display:flex}:host(:not([inward])){animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));inset:calc(-1*var(--md-focus-ring-outward-offset, 2px));outline:var(--md-focus-ring-width, 3px) solid currentColor}:host([inward]){animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border:var(--md-focus-ring-width, 3px) solid currentColor;inset:var(--md-focus-ring-inward-offset, 0px)}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes outward-shrink{from{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-shrink{from{border-width:var(--md-focus-ring-active-width, 8px)}}@media(prefers-reduced-motion){:host{animation:none}}
|
|
1525
1591
|
`
|
|
1526
1592
|
/**
|
|
1527
1593
|
* @license
|
|
@@ -1532,81 +1598,81 @@ const et=Symbol("attachableController");let it;r||(it=new MutationObserver((t=>{
|
|
|
1532
1598
|
* @license
|
|
1533
1599
|
* Copyright 2024 Google LLC
|
|
1534
1600
|
* SPDX-License-Identifier: Apache-2.0
|
|
1535
|
-
*/let
|
|
1601
|
+
*/let le=class extends ne{};le.styles=[se],le=a([l("md-focus-ring")],le);
|
|
1536
1602
|
/**
|
|
1537
1603
|
* @license
|
|
1538
1604
|
* Copyright 2021 Google LLC
|
|
1539
1605
|
* SPDX-License-Identifier: Apache-2.0
|
|
1540
1606
|
*/
|
|
1541
|
-
const
|
|
1607
|
+
const de="cubic-bezier(0.2, 0, 0, 1)";
|
|
1542
1608
|
/**
|
|
1543
1609
|
* @license
|
|
1544
1610
|
* Copyright 2022 Google LLC
|
|
1545
1611
|
* SPDX-License-Identifier: Apache-2.0
|
|
1546
|
-
*/var
|
|
1612
|
+
*/var ce;!function(e){e[e.INACTIVE=0]="INACTIVE",e[e.TOUCH_DELAY=1]="TOUCH_DELAY",e[e.HOLDING=2]="HOLDING",e[e.WAITING_FOR_CLICK=3]="WAITING_FOR_CLICK"}(ce||(ce={}));const pe=["click","contextmenu","pointercancel","pointerdown","pointerenter","pointerleave","pointerup"],he=r?null:window.matchMedia("(forced-colors: active)");class ue extends t{constructor(){super(...arguments),this.disabled=!1,this.hovered=!1,this.pressed=!1,this.rippleSize="",this.rippleScale="",this.initialSize=0,this.state=ce.INACTIVE,this.checkBoundsAfterContextMenu=!1,this.attachableController=new oe(this,this.onControlChange.bind(this))}get htmlFor(){return this.attachableController.htmlFor}set htmlFor(e){this.attachableController.htmlFor=e}get control(){return this.attachableController.control}set control(e){this.attachableController.control=e}attach(e){this.attachableController.attach(e)}detach(){this.attachableController.detach()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true")}render(){const e={hovered:this.hovered,pressed:this.pressed};return i`<div class="surface ${n(e)}"></div>`}update(e){e.has("disabled")&&this.disabled&&(this.hovered=!1,this.pressed=!1),super.update(e)}handlePointerenter(e){this.shouldReactToEvent(e)&&(this.hovered=!0)}handlePointerleave(e){this.shouldReactToEvent(e)&&(this.hovered=!1,this.state!==ce.INACTIVE&&this.endPressAnimation())}handlePointerup(e){if(this.shouldReactToEvent(e)){if(this.state!==ce.HOLDING)return this.state===ce.TOUCH_DELAY?(this.state=ce.WAITING_FOR_CLICK,void this.startPressAnimation(this.rippleStartEvent)):void 0;this.state=ce.WAITING_FOR_CLICK}}async handlePointerdown(e){if(this.shouldReactToEvent(e)){if(this.rippleStartEvent=e,!this.isTouch(e))return this.state=ce.WAITING_FOR_CLICK,void this.startPressAnimation(e);this.checkBoundsAfterContextMenu&&!this.inBounds(e)||(this.checkBoundsAfterContextMenu=!1,this.state=ce.TOUCH_DELAY,await new Promise((e=>{setTimeout(e,150)})),this.state===ce.TOUCH_DELAY&&(this.state=ce.HOLDING,this.startPressAnimation(e)))}}handleClick(){this.disabled||(this.state!==ce.WAITING_FOR_CLICK?this.state===ce.INACTIVE&&(this.startPressAnimation(),this.endPressAnimation()):this.endPressAnimation())}handlePointercancel(e){this.shouldReactToEvent(e)&&this.endPressAnimation()}handleContextmenu(){this.disabled||(this.checkBoundsAfterContextMenu=!0,this.endPressAnimation())}determineRippleSize(){const{height:e,width:t}=this.getBoundingClientRect(),i=Math.max(e,t),o=Math.max(.35*i,75),r=Math.floor(.2*i),n=Math.sqrt(t**2+e**2)+10;this.initialSize=r,this.rippleScale=""+(n+o)/r,this.rippleSize=`${r}px`}getNormalizedPointerEventCoords(e){const{scrollX:t,scrollY:i}=window,{left:o,top:r}=this.getBoundingClientRect(),n=t+o,a=i+r,{pageX:s,pageY:l}=e;return{x:s-n,y:l-a}}getTranslationCoordinates(e){const{height:t,width:i}=this.getBoundingClientRect(),o={x:(i-this.initialSize)/2,y:(t-this.initialSize)/2};let r;return r=e instanceof PointerEvent?this.getNormalizedPointerEventCoords(e):{x:i/2,y:t/2},r={x:r.x-this.initialSize/2,y:r.y-this.initialSize/2},{startPoint:r,endPoint:o}}startPressAnimation(e){if(!this.mdRoot)return;this.pressed=!0,this.growAnimation?.cancel(),this.determineRippleSize();const{startPoint:t,endPoint:i}=this.getTranslationCoordinates(e),o=`${t.x}px, ${t.y}px`,r=`${i.x}px, ${i.y}px`;this.growAnimation=this.mdRoot.animate({top:[0,0],left:[0,0],height:[this.rippleSize,this.rippleSize],width:[this.rippleSize,this.rippleSize],transform:[`translate(${o}) scale(1)`,`translate(${r}) scale(${this.rippleScale})`]},{pseudoElement:"::after",duration:450,easing:de,fill:"forwards"})}async endPressAnimation(){this.rippleStartEvent=void 0,this.state=ce.INACTIVE;const e=this.growAnimation;let t=1/0;"number"==typeof e?.currentTime?t=e.currentTime:e?.currentTime&&(t=e.currentTime.to("ms").value),t>=225?this.pressed=!1:(await new Promise((e=>{setTimeout(e,225-t)})),this.growAnimation===e&&(this.pressed=!1))}shouldReactToEvent(e){if(this.disabled||!e.isPrimary)return!1;if(this.rippleStartEvent&&this.rippleStartEvent.pointerId!==e.pointerId)return!1;if("pointerenter"===e.type||"pointerleave"===e.type)return!this.isTouch(e);const t=1===e.buttons;return this.isTouch(e)||t}inBounds({x:e,y:t}){const{top:i,left:o,bottom:r,right:n}=this.getBoundingClientRect();return e>=o&&e<=n&&t>=i&&t<=r}isTouch({pointerType:e}){return"touch"===e}async handleEvent(e){if(!he?.matches)switch(e.type){case"click":this.handleClick();break;case"contextmenu":this.handleContextmenu();break;case"pointercancel":this.handlePointercancel(e);break;case"pointerdown":await this.handlePointerdown(e);break;case"pointerenter":this.handlePointerenter(e);break;case"pointerleave":this.handlePointerleave(e);break;case"pointerup":this.handlePointerup(e)}}onControlChange(e,t){if(!r)for(const i of pe)e?.removeEventListener(i,this),t?.addEventListener(i,this)}}a([T({type:Boolean,reflect:!0})],ue.prototype,"disabled",void 0),a([A()],ue.prototype,"hovered",void 0),a([A()],ue.prototype,"pressed",void 0),a([z(".surface")],ue.prototype,"mdRoot",void 0);
|
|
1547
1613
|
/**
|
|
1548
1614
|
* @license
|
|
1549
1615
|
* Copyright 2024 Google LLC
|
|
1550
1616
|
* SPDX-License-Identifier: Apache-2.0
|
|
1551
1617
|
*/
|
|
1552
|
-
const
|
|
1618
|
+
const be=e`:host{display:flex;margin:auto;pointer-events:none}:host([disabled]){display:none}@media(forced-colors: active){:host{display:none}}:host,.surface{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.surface{-webkit-tap-highlight-color:rgba(0,0,0,0)}.surface::before,.surface::after{content:"";opacity:0;position:absolute}.surface::before{background-color:var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));inset:0;transition:opacity 15ms linear,background-color 15ms linear}.surface::after{background:radial-gradient(closest-side, var(--md-ripple-pressed-color, var(--md-sys-color-on-surface, #1d1b20)) max(100% - 70px, 65%), transparent 100%);transform-origin:center center;transition:opacity 375ms linear}.hovered::before{background-color:var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-ripple-hover-opacity, 0.08)}.pressed::after{opacity:var(--md-ripple-pressed-opacity, 0.12);transition-duration:105ms}
|
|
1553
1619
|
`
|
|
1554
1620
|
/**
|
|
1555
1621
|
* @license
|
|
1556
1622
|
* Copyright 2022 Google LLC
|
|
1557
1623
|
* SPDX-License-Identifier: Apache-2.0
|
|
1558
|
-
*/;let
|
|
1624
|
+
*/;let ge=class extends ue{};
|
|
1559
1625
|
/**
|
|
1560
1626
|
* @license
|
|
1561
1627
|
* Copyright 2021 Google LLC
|
|
1562
1628
|
* SPDX-License-Identifier: Apache-2.0
|
|
1563
1629
|
*/
|
|
1564
|
-
function
|
|
1630
|
+
function me(e){return e.currentTarget===e.target&&(e.composedPath()[0]===e.target&&(!e.target.disabled&&!function(e){const t=ye;t&&(e.preventDefault(),e.stopImmediatePropagation());return async function(){ye=!0,await null,ye=!1}
|
|
1565
1631
|
/**
|
|
1566
1632
|
* @license
|
|
1567
1633
|
* Copyright 2023 Google LLC
|
|
1568
1634
|
* SPDX-License-Identifier: Apache-2.0
|
|
1569
|
-
*/(),
|
|
1635
|
+
*/(),t}(e)))}ge.styles=[be],ge=a([l("md-ripple")],ge);let ye=!1;const fe=Symbol("internals"),ve=Symbol("privateInternals");
|
|
1570
1636
|
/**
|
|
1571
1637
|
* @license
|
|
1572
1638
|
* Copyright 2023 Google LLC
|
|
1573
1639
|
* SPDX-License-Identifier: Apache-2.0
|
|
1574
1640
|
*/
|
|
1575
|
-
const
|
|
1641
|
+
const xe=Symbol("createValidator"),we=Symbol("getValidityAnchor"),ke=Symbol("privateValidator"),$e=Symbol("privateSyncValidity"),Se=Symbol("privateCustomValidationMessage");
|
|
1576
1642
|
/**
|
|
1577
1643
|
* @license
|
|
1578
1644
|
* Copyright 2023 Google LLC
|
|
1579
1645
|
* SPDX-License-Identifier: Apache-2.0
|
|
1580
1646
|
*/
|
|
1581
|
-
const
|
|
1647
|
+
const Ce=Symbol("isFocusable"),Ee=Symbol("privateIsFocusable"),Oe=Symbol("externalTabIndex"),De=Symbol("isUpdatingTabIndex"),Me=Symbol("updateTabIndex");
|
|
1582
1648
|
/**
|
|
1583
1649
|
* @license
|
|
1584
1650
|
* Copyright 2023 Google LLC
|
|
1585
1651
|
* SPDX-License-Identifier: Apache-2.0
|
|
1586
1652
|
*/
|
|
1587
|
-
const
|
|
1653
|
+
const Fe=Symbol("getFormValue"),je=Symbol("getFormState");
|
|
1588
1654
|
/**
|
|
1589
1655
|
* @license
|
|
1590
1656
|
* Copyright 2023 Google LLC
|
|
1591
1657
|
* SPDX-License-Identifier: Apache-2.0
|
|
1592
1658
|
*/
|
|
1593
|
-
class
|
|
1659
|
+
class Pe{constructor(e){this.getCurrentState=e,this.currentValidity={validity:{},validationMessage:""}}getValidity(){const e=this.getCurrentState();if(!(!this.prevState||!this.equals(this.prevState,e)))return this.currentValidity;const{validity:t,validationMessage:i}=this.computeValidity(e);return this.prevState=this.copy(e),this.currentValidity={validationMessage:i,validity:{badInput:t.badInput,customError:t.customError,patternMismatch:t.patternMismatch,rangeOverflow:t.rangeOverflow,rangeUnderflow:t.rangeUnderflow,stepMismatch:t.stepMismatch,tooLong:t.tooLong,tooShort:t.tooShort,typeMismatch:t.typeMismatch,valueMissing:t.valueMissing}},this.currentValidity}}
|
|
1594
1660
|
/**
|
|
1595
1661
|
* @license
|
|
1596
1662
|
* Copyright 2023 Google LLC
|
|
1597
1663
|
* SPDX-License-Identifier: Apache-2.0
|
|
1598
|
-
*/class
|
|
1664
|
+
*/class Te extends Pe{computeValidity(e){this.radioElement||(this.radioElement=document.createElement("input"),this.radioElement.type="radio",this.radioElement.name="group");let t=!1,i=!1;for(const{checked:o,required:r}of e)r&&(t=!0),o&&(i=!0);return this.radioElement.checked=i,this.radioElement.required=t,{validity:{valueMissing:t&&!i},validationMessage:this.radioElement.validationMessage}}equals(e,t){if(e.length!==t.length)return!1;for(let i=0;i<e.length;i++){const o=e[i],r=t[i];if(o.checked!==r.checked||o.required!==r.required)return!1}return!0}copy(e){return e.map((({checked:e,required:t})=>({checked:e,required:t})))}}
|
|
1599
1665
|
/**
|
|
1600
1666
|
* @license
|
|
1601
1667
|
* Copyright 2022 Google LLC
|
|
1602
1668
|
* SPDX-License-Identifier: Apache-2.0
|
|
1603
|
-
*/class
|
|
1669
|
+
*/class Ae{get controls(){const e=this.host.getAttribute("name");return e&&this.root&&this.host.isConnected?Array.from(this.root.querySelectorAll(`[name="${e}"]`)):[this.host]}constructor(e){this.host=e,this.focused=!1,this.root=null,this.handleFocusIn=()=>{this.focused=!0,this.updateTabIndices()},this.handleFocusOut=()=>{this.focused=!1,this.updateTabIndices()},this.handleKeyDown=e=>{const t="ArrowDown"===e.key,i="ArrowUp"===e.key,o="ArrowLeft"===e.key,r="ArrowRight"===e.key;if(!(o||r||t||i))return;const n=this.controls;if(!n.length)return;e.preventDefault();const a="rtl"===getComputedStyle(this.host).direction?o||t:r||t,s=n.indexOf(this.host);let l=a?s+1:s-1;for(;l!==s;){l>=n.length?l=0:l<0&&(l=n.length-1);const e=n[l];if(!e.hasAttribute("disabled")){for(const t of n)t!==e&&(t.checked=!1,t.tabIndex=-1,t.blur());e.checked=!0,e.tabIndex=0,e.focus(),e.dispatchEvent(new Event("change",{bubbles:!0}));break}a?l++:l--}}}hostConnected(){this.root=this.host.getRootNode(),this.host.addEventListener("keydown",this.handleKeyDown),this.host.addEventListener("focusin",this.handleFocusIn),this.host.addEventListener("focusout",this.handleFocusOut),this.host.checked&&this.uncheckSiblings(),this.updateTabIndices()}hostDisconnected(){this.host.removeEventListener("keydown",this.handleKeyDown),this.host.removeEventListener("focusin",this.handleFocusIn),this.host.removeEventListener("focusout",this.handleFocusOut),this.updateTabIndices(),this.root=null}handleCheckedChange(){this.host.checked&&(this.uncheckSiblings(),this.updateTabIndices())}uncheckSiblings(){for(const e of this.controls)e!==this.host&&(e.checked=!1)}updateTabIndices(){const e=this.controls,t=e.find((e=>e.checked));if(t||this.focused){const i=t||this.host;i.tabIndex=0;for(const t of e)t!==i&&(t.tabIndex=-1)}else for(const t of e)t.tabIndex=0}}
|
|
1604
1670
|
/**
|
|
1605
1671
|
* @license
|
|
1606
1672
|
* Copyright 2018 Google LLC
|
|
1607
1673
|
* SPDX-License-Identifier: Apache-2.0
|
|
1608
|
-
*/var
|
|
1609
|
-
<div class="container ${
|
|
1674
|
+
*/var ze;const Ie=Symbol("checked");let Le=0;const _e=function(e){var t;class i extends e{constructor(){super(...arguments),this[t]=""}get validity(){return this[$e](),this[fe].validity}get validationMessage(){return this[$e](),this[fe].validationMessage}get willValidate(){return this[$e](),this[fe].willValidate}checkValidity(){return this[$e](),this[fe].checkValidity()}reportValidity(){return this[$e](),this[fe].reportValidity()}setCustomValidity(e){this[Se]=e,this[$e]()}requestUpdate(e,t,i){super.requestUpdate(e,t,i),this[$e]()}firstUpdated(e){super.firstUpdated(e),this[$e]()}[(t=Se,$e)](){if(r)return;this[ke]||(this[ke]=this[xe]());const{validity:e,validationMessage:t}=this[ke].getValidity(),i=!!this[Se],o=this[Se]||t;this[fe].setValidity({...e,customError:i},o,this[we]()??void 0)}[xe](){throw new Error("Implement [createValidator]")}[we](){throw new Error("Implement [getValidityAnchor]")}}return i}(function(e){class t extends e{get form(){return this[fe].form}get labels(){return this[fe].labels}get name(){return this.getAttribute("name")??""}set name(e){this.setAttribute("name",e)}get disabled(){return this.hasAttribute("disabled")}set disabled(e){this.toggleAttribute("disabled",e)}attributeChangedCallback(e,t,i){if("name"!==e&&"disabled"!==e)super.attributeChangedCallback(e,t,i);else{const i="disabled"===e?null!==t:t;this.requestUpdate(e,i)}}requestUpdate(e,t,i){super.requestUpdate(e,t,i),this[fe].setFormValue(this[Fe](),this[je]())}[Fe](){throw new Error("Implement [getFormValue]")}[je](){return this[Fe]()}formDisabledCallback(e){this.disabled=e}}return t.formAssociated=!0,a([T({noAccessor:!0})],t.prototype,"name",null),a([T({type:Boolean,noAccessor:!0})],t.prototype,"disabled",null),t}((Be=function(e){var t,i,o;class r extends e{constructor(){super(...arguments),this[t]=!0,this[i]=null,this[o]=!1}get[Ce](){return this[Ee]}set[Ce](e){this[Ce]!==e&&(this[Ee]=e,this[Me]())}connectedCallback(){super.connectedCallback(),this[Me]()}attributeChangedCallback(e,t,i){if("tabindex"===e){if(this.requestUpdate("tabIndex",Number(t??-1)),!this[De])return this.hasAttribute("tabindex")?void(this[Oe]=this.tabIndex):(this[Oe]=null,void this[Me]())}else super.attributeChangedCallback(e,t,i)}[(t=Ee,i=Oe,o=De,Me)](){const e=this[Ce]?0:-1,t=this[Oe]??e;this[De]=!0,this.tabIndex=t,this[De]=!1}}return a([T({noAccessor:!0})],r.prototype,"tabIndex",void 0),r}(t),class extends Be{get[fe](){return this[ve]||(this[ve]=this.attachInternals()),this[ve]}})));var Be;class Ne extends _e{get checked(){return this[Ie]}set checked(e){const t=this.checked;t!==e&&(this[Ie]=e,this.requestUpdate("checked",t),this.selectionController.handleCheckedChange())}constructor(){super(),this.maskId="cutout"+ ++Le,this[ze]=!1,this.required=!1,this.value="on",this.selectionController=new Ae(this),this.addController(this.selectionController),r||(this[fe].role="radio",this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.handleKeydown.bind(this)))}render(){const e={checked:this.checked};return i`
|
|
1675
|
+
<div class="container ${n(e)}" aria-hidden="true">
|
|
1610
1676
|
<md-ripple
|
|
1611
1677
|
part="ripple"
|
|
1612
1678
|
.control=${this}
|
|
@@ -1628,19 +1694,19 @@ class It{constructor(t){this.getCurrentState=t,this.currentValidity={validity:{}
|
|
|
1628
1694
|
|
|
1629
1695
|
<div class="touch-target"></div>
|
|
1630
1696
|
</div>
|
|
1631
|
-
`}updated(){this[
|
|
1697
|
+
`}updated(){this[fe].ariaChecked=String(this.checked)}async handleClick(e){this.disabled||(await 0,e.defaultPrevented||(me(e)&&this.focus(),this.checked=!0,this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))))}async handleKeydown(e){await 0," "!==e.key||e.defaultPrevented||this.click()}[(ze=Ie,Fe)](){return this.checked?this.value:null}[je](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute("checked")}formStateRestoreCallback(e){this.checked="true"===e}[xe](){return new Te((()=>this.selectionController?this.selectionController.controls:[this]))}[we](){return this.container}}a([T({type:Boolean})],Ne.prototype,"checked",null),a([T({type:Boolean})],Ne.prototype,"required",void 0),a([T()],Ne.prototype,"value",void 0),a([z(".container")],Ne.prototype,"container",void 0);
|
|
1632
1698
|
/**
|
|
1633
1699
|
* @license
|
|
1634
1700
|
* Copyright 2024 Google LLC
|
|
1635
1701
|
* SPDX-License-Identifier: Apache-2.0
|
|
1636
1702
|
*/
|
|
1637
|
-
const
|
|
1703
|
+
const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20px);outline:none;position:relative;vertical-align:top;width:var(--md-radio-icon-size, 20px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;--md-ripple-hover-color: var(--md-radio-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-radio-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-radio-pressed-state-layer-opacity, 0.12)}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-radio-icon-size, 20px))/2)}.container{display:flex;height:100%;place-content:center;place-items:center;width:100%}md-focus-ring{height:44px;inset:unset;width:44px}.checked{--md-ripple-hover-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12)}.touch-target{height:48px;position:absolute;width:48px}:host([touch-target=none]) .touch-target{display:none}md-ripple{border-radius:50%;height:var(--md-radio-state-layer-size, 40px);inset:unset;width:var(--md-radio-state-layer-size, 40px)}.icon{fill:var(--md-radio-icon-color, var(--md-sys-color-on-surface-variant, #49454f));inset:0;position:absolute}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}.checked .icon{fill:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}.checked .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--md-radio-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:focus-within) .icon{fill:var(--md-radio-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:active) .icon{fill:var(--md-radio-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host([disabled]) .icon{fill:var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-unselected-icon-opacity, 0.38)}:host(:hover) .checked .icon{fill:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:focus-within) .checked .icon{fill:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:active) .checked .icon{fill:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host([disabled]) .checked .icon{fill:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}}@layer hcm{@media(forced-colors: active){.icon{fill:CanvasText}:host([disabled]) .icon{fill:GrayText;opacity:1}}}
|
|
1638
1704
|
`
|
|
1639
1705
|
/**
|
|
1640
1706
|
* @license
|
|
1641
1707
|
* Copyright 2022 Google LLC
|
|
1642
1708
|
* SPDX-License-Identifier: Apache-2.0
|
|
1643
|
-
*/;let
|
|
1709
|
+
*/;let qe=class extends Ne{};qe.styles=[Re],qe=a([l("md-radio")],qe);let Ve=class extends t{constructor(){super(...arguments),this.name="radio-group",this.checked=!1,this.disabled=!1,this.error=!1}static{this.styles=e`
|
|
1644
1710
|
:host {
|
|
1645
1711
|
font-family: "Graphik", sans-serif;
|
|
1646
1712
|
}
|
|
@@ -1689,17 +1755,17 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
1689
1755
|
background: var(--secondary-color-20);
|
|
1690
1756
|
border: 1px solid var(--secondary-color-20);
|
|
1691
1757
|
}
|
|
1692
|
-
`}render(){const
|
|
1758
|
+
`}render(){const e=[this.checked?"checked":"",this.error?"error":"",this.disabled?"disabled":""].join(" ");return i`
|
|
1693
1759
|
<label class="radio-container">
|
|
1694
1760
|
<md-radio
|
|
1695
1761
|
name=${this.name}
|
|
1696
|
-
class=${
|
|
1762
|
+
class=${e}
|
|
1697
1763
|
?checked=${this.checked}
|
|
1698
1764
|
?disabled=${this.disabled}
|
|
1699
1765
|
></md-radio>
|
|
1700
1766
|
<span>${this.checked?"On":"Off"} ${this.error?"Error":""}</span>
|
|
1701
1767
|
</label>
|
|
1702
|
-
`}};
|
|
1768
|
+
`}};a([T({type:String}),s("design:type",Object)],Ve.prototype,"name",void 0),a([T({type:Boolean}),s("design:type",Object)],Ve.prototype,"checked",void 0),a([T({type:Boolean}),s("design:type",Object)],Ve.prototype,"disabled",void 0),a([T({type:Boolean}),s("design:type",Object)],Ve.prototype,"error",void 0),Ve=a([l("custom-radio")],Ve);let We=class extends t{constructor(){super(...arguments),this.options=[],this.placeholder="Filtrar opciones...",this.defaultValue="",this.disabled=!1,this.value="",this.label="",this.labelColor="",this.filterable=!0,this.error=!1,this.required=!1,this.optional=!1,this.isMobile=!1,this.filteredOptions=[],this.filterValue="",this.isOpen=!1,this.mobileFilterValue="",this.highlightedIndex=-1,this._isCleared=!1,this.debounceTimeout=null,this.updateResponsiveModeBound=this.updateResponsiveMode.bind(this)}static{this.styles=e`
|
|
1703
1769
|
:host {
|
|
1704
1770
|
display: block;
|
|
1705
1771
|
font-family: 'Graphik', sans-serif;
|
|
@@ -1742,7 +1808,7 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
1742
1808
|
}
|
|
1743
1809
|
|
|
1744
1810
|
.form-label {
|
|
1745
|
-
${
|
|
1811
|
+
${_}
|
|
1746
1812
|
display: flex;
|
|
1747
1813
|
align-items: baseline;
|
|
1748
1814
|
flex-direction: row;
|
|
@@ -1998,7 +2064,7 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
1998
2064
|
|
|
1999
2065
|
.optional {
|
|
2000
2066
|
color: var(--secondary-color-60);
|
|
2001
|
-
${
|
|
2067
|
+
${I}
|
|
2002
2068
|
}
|
|
2003
2069
|
|
|
2004
2070
|
/* Estilos por defecto del icon para mobile */
|
|
@@ -2047,7 +2113,7 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2047
2113
|
margin-right: 8px;
|
|
2048
2114
|
flex-shrink: 0;
|
|
2049
2115
|
}
|
|
2050
|
-
`}update(
|
|
2116
|
+
`}update(e){if(e.has("options")&&(this.filteredOptions=[...this.options]),e.has("defaultValue")||e.has("options")||e.has("value")){if(this._isCleared)return void super.update(e);const t=this.value||this.defaultValue,i=this.options.find((e=>"string"==typeof e?e===t:e.value===t));i?(this.filterValue="string"==typeof i?i:i.label,this.value="string"==typeof i?i:i.value):(this.filterValue="",this.value="")}super.update(e)}connectedCallback(){super.connectedCallback(),this.updateResponsiveMode(),window.addEventListener("resize",this.updateResponsiveModeBound),document.addEventListener("click",this.handleClickOutside.bind(this))}disconnectedCallback(){window.removeEventListener("resize",this.updateResponsiveModeBound),document.removeEventListener("click",this.handleClickOutside.bind(this)),super.disconnectedCallback()}updateResponsiveMode(){this.isMobile=window.innerWidth<=940}handleInputClick(e){this.isMobile&&(this.mobileFilterValue=""),this.disabled||(this.isOpen=!this.isOpen,this.requestUpdate())}handleInput(e){if(!this.filterable)return;this._isCleared=!1;const t=e.target.value,i=this.maxLength?t.slice(0,this.maxLength).toLowerCase():t.toLowerCase();this.filterValue=i,this.value="",this.filteredOptions=this.options.filter((e=>("string"==typeof e?e:e.label).toLowerCase().includes(this.filterValue.toLowerCase()))),this.isOpen=!0,this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=window.setTimeout((()=>{this.filterValue.length>2&&this.dispatchEvent(new CustomEvent("filter-location",{detail:{value:this.filterValue},bubbles:!0,composed:!0}))}),300),this.requestUpdate()}handleMobileInput(e){this._isCleared=!1;const t=e.target.value,i=this.maxLength?t.slice(0,this.maxLength).toLowerCase():t.toLowerCase();this.mobileFilterValue=i,this.value="",this.filteredOptions=this.options.filter((e=>("string"==typeof e?e:e.label).toLowerCase().includes(i))),this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=window.setTimeout((()=>{i.length>2&&this.dispatchEvent(new CustomEvent("filter-location",{detail:{value:i},bubbles:!0,composed:!0}))}),300)}handleSelect(e){this._isCleared=!1;const t="string"==typeof e?e:e.value;this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:t},bubbles:!0,composed:!0})),this.filterValue="string"==typeof e?e:e.label,this.value=t,this.isOpen=!1,this.requestUpdate()}handleIconClick(){this.disabled||(this.filterable&&this.filterValue?(this._isCleared=!0,this.filterValue="",this.value="",this.filteredOptions=[...this.options],this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:""},bubbles:!0,composed:!0})),this.isOpen=!1):this.isOpen=!this.isOpen,this.requestUpdate())}handleClickOutside(e){const t=e.target;t instanceof Node&&(this.contains(t)||(this.isOpen=!1,this.requestUpdate()))}handleKeyDown(e){const{key:t}=e;if(!this.isOpen&&("Enter"===t||" "===t))return e.preventDefault(),void(this.isOpen=!0);if(this.isOpen)if("ArrowDown"===t)e.preventDefault(),this.highlightedIndex=Math.min(this.highlightedIndex+1,this.filteredOptions.length-1),this.requestUpdate();else if("ArrowUp"===t)e.preventDefault(),this.highlightedIndex=Math.max(this.highlightedIndex-1,0),this.requestUpdate();else if("Enter"===t){e.preventDefault();const t=this.filteredOptions[this.highlightedIndex];t&&this.handleSelect(t)}else"Escape"===t&&(e.preventDefault(),this.isOpen=!1)}renderSelectedIcon(){const e=this.options.find((e=>"string"==typeof e?e===this.value:e.value===this.value));return e&&"string"!=typeof e&&e.icon&&"string"==typeof e.icon?i`<span class="icon-selected" .innerHTML="${e.icon}"></span>`:o}renderOptionIcon(e){return e&&"string"==typeof e?i`<span class="icon-list" .innerHTML="${e}"></span>`:o}render(){const e=this.isMobile;return i`
|
|
2051
2117
|
<div class="select-container" style="${this.labelColor?` --label-color: ${this.labelColor}`:""}">
|
|
2052
2118
|
${this.label?i`
|
|
2053
2119
|
<div class="label-container">
|
|
@@ -2058,10 +2124,10 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2058
2124
|
</div>
|
|
2059
2125
|
`:""}
|
|
2060
2126
|
|
|
2061
|
-
<div class="input-container ${this.isOpen?"focused":""} ${this.isOpen&&this.filteredOptions.length>0?"open":""} ${
|
|
2127
|
+
<div class="input-container ${this.isOpen?"focused":""} ${this.isOpen&&this.filteredOptions.length>0?"open":""} ${e?"mobile":""}">
|
|
2062
2128
|
|
|
2063
2129
|
<div class="input-wrapper">
|
|
2064
|
-
${
|
|
2130
|
+
${e?i`
|
|
2065
2131
|
<div
|
|
2066
2132
|
class="filter-fake"
|
|
2067
2133
|
@click="${this.handleInputClick}"
|
|
@@ -2098,14 +2164,14 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2098
2164
|
</button>
|
|
2099
2165
|
</div>
|
|
2100
2166
|
|
|
2101
|
-
${
|
|
2167
|
+
${e&&this.isOpen?i`
|
|
2102
2168
|
<div class="mobile-backdrop" @click="${()=>{this.isOpen=!1}}">
|
|
2103
|
-
<div class="mobile-modal" @click="${
|
|
2169
|
+
<div class="mobile-modal" @click="${e=>e.stopPropagation()}">
|
|
2104
2170
|
<div class="modal-input-container">
|
|
2105
2171
|
<input
|
|
2106
2172
|
class="filter-input"
|
|
2107
2173
|
.value="${this.mobileFilterValue||""}"
|
|
2108
|
-
@input=${
|
|
2174
|
+
@input=${e=>this.handleMobileInput(e)}
|
|
2109
2175
|
placeholder="${this.placeholder}" maxlength="${this.maxLength??""}"
|
|
2110
2176
|
/>
|
|
2111
2177
|
<button class="modal-close-button" @click="${()=>{this.isOpen=!1}}">
|
|
@@ -2113,30 +2179,30 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2113
2179
|
</button>
|
|
2114
2180
|
</div>
|
|
2115
2181
|
<ul class="options-list">
|
|
2116
|
-
${this.filteredOptions.map(((t
|
|
2182
|
+
${this.filteredOptions.map(((e,t)=>{const o="string"==typeof e?e:e.label,r="object"==typeof e&&e.disabled,n="object"==typeof e?e.icon:void 0;return i`
|
|
2117
2183
|
<li
|
|
2118
|
-
class="${r?"disabled":""} ${
|
|
2184
|
+
class="${r?"disabled":""} ${t===this.highlightedIndex?"highlighted":""}"
|
|
2119
2185
|
role="option"
|
|
2120
|
-
aria-selected="${
|
|
2121
|
-
@click="${()=>{r||this.handleSelect(
|
|
2186
|
+
aria-selected="${t===this.highlightedIndex}"
|
|
2187
|
+
@click="${()=>{r||this.handleSelect(e)}}"
|
|
2122
2188
|
>
|
|
2123
|
-
${this.renderOptionIcon(
|
|
2189
|
+
${this.renderOptionIcon(n)}
|
|
2124
2190
|
${o}
|
|
2125
2191
|
</li>
|
|
2126
2192
|
`}))}
|
|
2127
2193
|
</ul>
|
|
2128
2194
|
</div>
|
|
2129
2195
|
</div>
|
|
2130
|
-
`:!
|
|
2196
|
+
`:!e&&this.isOpen&&this.filteredOptions.length>0?i`
|
|
2131
2197
|
<ul class="options-list">
|
|
2132
|
-
${this.filteredOptions.map(((t
|
|
2198
|
+
${this.filteredOptions.map(((e,t)=>{const o="string"==typeof e?e:e.label,r="object"==typeof e&&e.disabled,n="object"==typeof e?e.icon:void 0;return i`
|
|
2133
2199
|
<li
|
|
2134
|
-
class="${r?"disabled":""} ${
|
|
2200
|
+
class="${r?"disabled":""} ${t===this.highlightedIndex?"highlighted":""}"
|
|
2135
2201
|
role="option"
|
|
2136
|
-
aria-selected="${
|
|
2137
|
-
@click="${()=>{r||this.handleSelect(
|
|
2202
|
+
aria-selected="${t===this.highlightedIndex}"
|
|
2203
|
+
@click="${()=>{r||this.handleSelect(e)}}"
|
|
2138
2204
|
>
|
|
2139
|
-
${this.renderOptionIcon(
|
|
2205
|
+
${this.renderOptionIcon(n)}
|
|
2140
2206
|
${o}
|
|
2141
2207
|
</li>
|
|
2142
2208
|
`}))}
|
|
@@ -2144,7 +2210,7 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2144
2210
|
`:""}
|
|
2145
2211
|
</div>
|
|
2146
2212
|
</div>
|
|
2147
|
-
`}};
|
|
2213
|
+
`}};a([T({type:Array}),s("design:type",Array)],We.prototype,"options",void 0),a([T({type:String}),s("design:type",Object)],We.prototype,"placeholder",void 0),a([T({type:String,attribute:"default-value"}),s("design:type",Object)],We.prototype,"defaultValue",void 0),a([T({type:Boolean}),s("design:type",Object)],We.prototype,"disabled",void 0),a([T({type:Object}),s("design:type",Object)],We.prototype,"value",void 0),a([T({type:String}),s("design:type",Object)],We.prototype,"label",void 0),a([T({type:String}),s("design:type",Object)],We.prototype,"labelColor",void 0),a([T({type:Boolean}),s("design:type",Object)],We.prototype,"filterable",void 0),a([T({type:Number}),s("design:type",Number)],We.prototype,"maxLength",void 0),a([T({type:Boolean,reflect:!0}),s("design:type",Boolean)],We.prototype,"error",void 0),a([T({type:Boolean}),s("design:type",Object)],We.prototype,"required",void 0),a([T({type:Boolean}),s("design:type",Object)],We.prototype,"optional",void 0),a([A(),s("design:type",Boolean)],We.prototype,"isMobile",void 0),a([A(),s("design:type",Array)],We.prototype,"filteredOptions",void 0),a([A(),s("design:type",Object)],We.prototype,"filterValue",void 0),a([A(),s("design:type",Object)],We.prototype,"isOpen",void 0),a([A(),s("design:type",Object)],We.prototype,"mobileFilterValue",void 0),a([A(),s("design:type",Object)],We.prototype,"highlightedIndex",void 0),a([A(),s("design:type",Boolean)],We.prototype,"_isCleared",void 0),We=a([l("filterable-select")],We);const Ye=new CSSStyleSheet;Ye.replaceSync("\n @font-face {\n font-family: 'Graphik';\n src: url('/src/assets/font/Graphik-Regular.woff2') format('woff2'),\n url('/src/assets/font/Graphik-Regular.woff') format('woff'),\n url('/src/assets/font/Graphik-Regular.eot') format('embedded-opentype');\n font-weight: normal;\n font-style: normal;\n }\n\n .body-s {\n font-weight: 400;\n font-size: 14px;\n line-height: 100%;\n letter-spacing: 0%;\n color: green;\n }\n\n .body-l {\n font-family: Graphik;\n font-size: 18px;\n font-style: normal;\n font-weight: 400;\n line-height: 30px;\n }\n");class Ue extends t{static{this.styles=[Ye,e`
|
|
2148
2214
|
:host {
|
|
2149
2215
|
display: flex;
|
|
2150
2216
|
position: fixed;
|
|
@@ -2214,7 +2280,7 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2214
2280
|
}
|
|
2215
2281
|
|
|
2216
2282
|
.container {
|
|
2217
|
-
${
|
|
2283
|
+
${L};
|
|
2218
2284
|
display: flex;
|
|
2219
2285
|
align-items: center;
|
|
2220
2286
|
box-sizing: border-box;
|
|
@@ -2271,16 +2337,16 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2271
2337
|
.informative {
|
|
2272
2338
|
background-color: var(--ui-informative);
|
|
2273
2339
|
}
|
|
2274
|
-
`]}static get properties(){return{type:{type:String},icon:{type:String},message:{type:String},open:{type:Boolean},position:{type:String,reflect:!0}}}constructor(){super(),this.type="informative",this.icon="info",this.message="Este es un mensaje.",this.open=!1,this.position="bottom-center",this.isMobile=!1,this.updateResponsiveStyles=this.updateResponsiveStyles.bind(this)}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.updateResponsiveStyles),this.updateResponsiveStyles()}disconnectedCallback(){window.removeEventListener("resize",this.updateResponsiveStyles),super.disconnectedCallback()}updateResponsiveStyles(){const
|
|
2340
|
+
`]}static get properties(){return{type:{type:String},icon:{type:String},message:{type:String},open:{type:Boolean},position:{type:String,reflect:!0}}}constructor(){super(),this.type="informative",this.icon="info",this.message="Este es un mensaje.",this.open=!1,this.position="bottom-center",this.isMobile=!1,this.updateResponsiveStyles=this.updateResponsiveStyles.bind(this)}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.updateResponsiveStyles),this.updateResponsiveStyles()}disconnectedCallback(){window.removeEventListener("resize",this.updateResponsiveStyles),super.disconnectedCallback()}updateResponsiveStyles(){const e=window.innerWidth<=940;this.classList.toggle("mobile",e)}render(){const e="error"===this.type||"warning"===this.type?"alert":"status";return i`
|
|
2275
2341
|
<div
|
|
2276
2342
|
class="container ${this.open?"":"hidden"} ${this.type}"
|
|
2277
|
-
role="${
|
|
2343
|
+
role="${e}"
|
|
2278
2344
|
aria-live="polite"
|
|
2279
2345
|
>
|
|
2280
2346
|
<randstad-icon name=${this.icon} size="24px" color="white"></randstad-icon>
|
|
2281
2347
|
<span class="message">${this.message}</span>
|
|
2282
2348
|
</div>
|
|
2283
|
-
`}}customElements.define("randstad-snackbar",
|
|
2349
|
+
`}}customElements.define("randstad-snackbar",Ue);let Ge=class extends t{constructor(){super(...arguments),this.totalSteps=4,this.currentStep=0}static{this.styles=e`
|
|
2284
2350
|
.stepper {
|
|
2285
2351
|
display: flex;
|
|
2286
2352
|
gap: 20px;
|
|
@@ -2369,18 +2435,18 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2369
2435
|
}
|
|
2370
2436
|
`}render(){return i`
|
|
2371
2437
|
<div class="stepper">
|
|
2372
|
-
${Array.from({length:this.totalSteps},((t
|
|
2438
|
+
${Array.from({length:this.totalSteps},((e,t)=>i`
|
|
2373
2439
|
<div
|
|
2374
|
-
class="step ${
|
|
2440
|
+
class="step ${t<this.currentStep?"completed":t===this.currentStep?"active":""}"
|
|
2375
2441
|
>
|
|
2376
|
-
${
|
|
2442
|
+
${t<this.currentStep?i`<randstad-icon name="tick-circle" size="16px"></randstad-icon>`:t===this.currentStep?i`
|
|
2377
2443
|
<span class="pulse-circle"></span>
|
|
2378
2444
|
<span class="inner-circle"></span>
|
|
2379
2445
|
`:i`<span class="inner-circle"></span>`}
|
|
2380
2446
|
</div>
|
|
2381
2447
|
`))}
|
|
2382
2448
|
</div>
|
|
2383
|
-
`}};
|
|
2449
|
+
`}};a([T({type:Number}),s("design:type",Object)],Ge.prototype,"totalSteps",void 0),a([T({type:Number}),s("design:type",Object)],Ge.prototype,"currentStep",void 0),Ge=a([l("custom-stepper")],Ge);let He=class extends t{constructor(){super(...arguments),this.tabs=[],this.selected="",this.internalSelected="",this.showPrev=!1,this.showNext=!1,this.SCROLL_OFFSET=56,this.handleScroll=()=>{const e=this.renderRoot.querySelector(".tab-wrapper");if(!e)return;const{scrollLeft:t,scrollWidth:i,clientWidth:o}=e;this.showPrev=t>0,this.showNext=t+o<i-1}}static{this.styles=e`
|
|
2384
2450
|
:host {
|
|
2385
2451
|
display: block;
|
|
2386
2452
|
border-bottom: 1px solid #E7E8EC;
|
|
@@ -2393,7 +2459,7 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2393
2459
|
}
|
|
2394
2460
|
|
|
2395
2461
|
.tab {
|
|
2396
|
-
${
|
|
2462
|
+
${N};
|
|
2397
2463
|
display: flex;
|
|
2398
2464
|
gap: 8px;
|
|
2399
2465
|
flex-direction: row;
|
|
@@ -2491,11 +2557,11 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2491
2557
|
|
|
2492
2558
|
@media (max-width: 940px) {
|
|
2493
2559
|
.tab {
|
|
2494
|
-
${
|
|
2560
|
+
${_};
|
|
2495
2561
|
padding: 16px;
|
|
2496
2562
|
}
|
|
2497
2563
|
}
|
|
2498
|
-
`}firstUpdated(){this.handleScroll()}updated(
|
|
2564
|
+
`}firstUpdated(){this.handleScroll()}updated(e){e.has("selected")&&(this.internalSelected=this.selected)}selectTab(e){this.internalSelected=e;const t=this.tabs.find((t=>t.value===e));t&&this.dispatchEvent(new CustomEvent("tab-change",{detail:t,bubbles:!0,composed:!0}))}scrollTabsLeft(){const e=this.renderRoot.querySelector(".tab-wrapper");if(!e)return;const t=e.scrollLeft,i=Array.from(e.querySelectorAll(".tab"));for(let o=i.length-1;o>=0;o--){const r=i[o].offsetLeft;if(r<t+this.SCROLL_OFFSET-1){const t=r-this.SCROLL_OFFSET;e.scrollTo({left:t,behavior:"smooth"});break}}setTimeout((()=>this.handleScroll()),300)}scrollTabsRight(){const e=this.renderRoot.querySelector(".tab-wrapper");if(!e)return;const t=e.scrollLeft,i=Array.from(e.querySelectorAll(".tab"));for(const o of i)if(o.offsetLeft>t+this.SCROLL_OFFSET){const t=o.offsetLeft-this.SCROLL_OFFSET;e.scrollTo({left:t,behavior:"smooth"});break}setTimeout((()=>this.handleScroll()),300)}render(){return i`
|
|
2499
2565
|
<div class="scroll-container">
|
|
2500
2566
|
${this.showPrev?i`
|
|
2501
2567
|
<button class="scroll-button prev" @click=${this.scrollTabsLeft}>
|
|
@@ -2504,11 +2570,11 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2504
2570
|
`:null}
|
|
2505
2571
|
|
|
2506
2572
|
<div class="tab-wrapper" @scroll=${this.handleScroll}>
|
|
2507
|
-
${this.tabs.map((
|
|
2508
|
-
<div class="tab ${this.internalSelected===
|
|
2509
|
-
@click=${()=>this.selectTab(
|
|
2510
|
-
<img src="/assets/icons/${
|
|
2511
|
-
<span>${
|
|
2573
|
+
${this.tabs.map((e=>i`
|
|
2574
|
+
<div class="tab ${this.internalSelected===e.value?"active":""}"
|
|
2575
|
+
@click=${()=>this.selectTab(e.value)}>
|
|
2576
|
+
<img src="/assets/icons/${e.icon}" alt="${e.label}" />
|
|
2577
|
+
<span>${e.label}</span>
|
|
2512
2578
|
</div>
|
|
2513
2579
|
`))}
|
|
2514
2580
|
</div>
|
|
@@ -2519,7 +2585,7 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2519
2585
|
</button>
|
|
2520
2586
|
`:null}
|
|
2521
2587
|
</div>
|
|
2522
|
-
`}};
|
|
2588
|
+
`}};a([T({type:Array}),s("design:type",Array)],He.prototype,"tabs",void 0),a([T({type:String}),s("design:type",String)],He.prototype,"selected",void 0),a([A(),s("design:type",String)],He.prototype,"internalSelected",void 0),a([A(),s("design:type",Object)],He.prototype,"showPrev",void 0),a([A(),s("design:type",Object)],He.prototype,"showNext",void 0),He=a([l("tabs-bar")],He);let Ke=class extends t{constructor(){super(...arguments),this.files=[],this.loading=!1,this.progress=0,this.isDragging=!1,this.disabled=!1}static{this.styles=e`
|
|
2523
2589
|
|
|
2524
2590
|
:host {
|
|
2525
2591
|
font-family: 'Graphik', sans-serif;
|
|
@@ -2554,28 +2620,28 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2554
2620
|
}
|
|
2555
2621
|
|
|
2556
2622
|
.text-main {
|
|
2557
|
-
${
|
|
2623
|
+
${L};
|
|
2558
2624
|
text-align: center;
|
|
2559
2625
|
vertical-align: middle;
|
|
2560
2626
|
color: var(--secondary-color-80);
|
|
2561
2627
|
}
|
|
2562
2628
|
|
|
2563
2629
|
.text-secondary {
|
|
2564
|
-
${
|
|
2630
|
+
${I};
|
|
2565
2631
|
text-align: center;
|
|
2566
2632
|
vertical-align: middle;
|
|
2567
2633
|
color: var(--secondary-color-60);
|
|
2568
2634
|
}
|
|
2569
2635
|
|
|
2570
2636
|
.text-tertiary {
|
|
2571
|
-
${
|
|
2637
|
+
${I};
|
|
2572
2638
|
text-align: center;
|
|
2573
2639
|
vertical-align: middle;
|
|
2574
2640
|
color: var(--secondary-color-40);
|
|
2575
2641
|
}
|
|
2576
2642
|
|
|
2577
2643
|
.button {
|
|
2578
|
-
${
|
|
2644
|
+
${I};
|
|
2579
2645
|
background-color: var(--primary-color);
|
|
2580
2646
|
border: none;
|
|
2581
2647
|
padding: 4px 16px;
|
|
@@ -2615,7 +2681,7 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2615
2681
|
background-color: var(--primary-color);
|
|
2616
2682
|
transition: width 0.1s ease;
|
|
2617
2683
|
}
|
|
2618
|
-
`}handleFiles(
|
|
2684
|
+
`}handleFiles(e){if(!e||this.loading)return;const t=Array.from(e).slice(0,3-this.files.length);this.loading=!0,this.progress=0;const i=setInterval((()=>{this.progress+=5,this.progress>=100&&(clearInterval(i),this.files=[...this.files,...t],this.loading=!1,this.progress=0,this.dispatchEvent(new CustomEvent("files-changed",{detail:this.files})))}),100)}onFileInputChange(e){const t=e.target;this.handleFiles(t.files)}onDrop(e){e.preventDefault(),this.disabled||(this.isDragging=!1,this.handleFiles(e.dataTransfer?.files||null))}onDragOver(e){e.preventDefault(),this.disabled||(this.isDragging=!0)}onDragLeave(e){e.preventDefault(),this.disabled||(this.isDragging=!1)}render(){return i`
|
|
2619
2685
|
<div class="container ${this.isDragging?"dragging":""}"
|
|
2620
2686
|
@drop="${this.onDrop}"
|
|
2621
2687
|
@dragover="${this.onDragOver}"
|
|
@@ -2643,5 +2709,846 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2643
2709
|
</label>
|
|
2644
2710
|
`}
|
|
2645
2711
|
</div>
|
|
2646
|
-
`}};n([T({type:Array}),a("design:type",Array)],Yt.prototype,"files",void 0),n([L(),a("design:type",Object)],Yt.prototype,"loading",void 0),n([L(),a("design:type",Object)],Yt.prototype,"progress",void 0),n([L(),a("design:type",Object)],Yt.prototype,"isDragging",void 0),n([T({type:Boolean,reflect:!0}),a("design:type",Object)],Yt.prototype,"disabled",void 0),Yt=n([l("upload-image")],Yt);export{N as AccordionList,V as AccordionPanel,H as CarouselCard,K as Checkbox,Q as CustomModal,Z as CustomPopup,Vt as CustomRadio,Kt as CustomStepper,Nt as FilterableSelect,Y as FormGroup,X as IconComponent,tt as ProgressCircle,G as RandstadButton,W as RandstadForm,J as RandstadNotice,Wt as TabsBar,Yt as UploadImage};
|
|
2712
|
+
`}};a([T({type:Array}),s("design:type",Array)],Ke.prototype,"files",void 0),a([A(),s("design:type",Object)],Ke.prototype,"loading",void 0),a([A(),s("design:type",Object)],Ke.prototype,"progress",void 0),a([A(),s("design:type",Object)],Ke.prototype,"isDragging",void 0),a([T({type:Boolean,reflect:!0}),s("design:type",Object)],Ke.prototype,"disabled",void 0),Ke=a([l("upload-image")],Ke);const Xe=6048e5,Qe=Symbol.for("constructDateFrom");function Je(e,t){return"function"==typeof e?e(t):e&&"object"==typeof e&&Qe in e?e[Qe](t):e instanceof Date?new e.constructor(t):new Date(t)}function Ze(e,t){return Je(t||e,e)}function et(e,t,i){const o=Ze(e,i?.in);if(isNaN(t))return Je(e,NaN);if(!t)return o;const r=o.getDate(),n=Je(e,o.getTime());n.setMonth(o.getMonth()+t+1,0);return r>=n.getDate()?n:(o.setFullYear(n.getFullYear(),n.getMonth(),r),o)}let tt={};function it(){return tt}function ot(e,t){const i=it(),o=t?.weekStartsOn??t?.locale?.options?.weekStartsOn??i.weekStartsOn??i.locale?.options?.weekStartsOn??0,r=Ze(e,t?.in),n=r.getDay(),a=(n<o?7:0)+n-o;return r.setDate(r.getDate()-a),r.setHours(0,0,0,0),r}function rt(e,t){return ot(e,{...t,weekStartsOn:1})}function nt(e,t){const i=Ze(e,t?.in),o=i.getFullYear(),r=Je(i,0);r.setFullYear(o+1,0,4),r.setHours(0,0,0,0);const n=rt(r),a=Je(i,0);a.setFullYear(o,0,4),a.setHours(0,0,0,0);const s=rt(a);return i.getTime()>=n.getTime()?o+1:i.getTime()>=s.getTime()?o:o-1}function at(e){const t=Ze(e),i=new Date(Date.UTC(t.getFullYear(),t.getMonth(),t.getDate(),t.getHours(),t.getMinutes(),t.getSeconds(),t.getMilliseconds()));return i.setUTCFullYear(t.getFullYear()),+e-+i}function st(e,...t){const i=Je.bind(null,t.find((e=>"object"==typeof e)));return t.map(i)}function lt(e,t){const i=Ze(e,t?.in);return i.setHours(0,0,0,0),i}function dt(e,t,i){return et(e,12*t,i)}function ct(e){return!(!((t=e)instanceof Date||"object"==typeof t&&"[object Date]"===Object.prototype.toString.call(t))&&"number"!=typeof e||isNaN(+Ze(e)));var t}function pt(e,t){const i=Ze(e,t?.in);return i.setDate(1),i.setHours(0,0,0,0),i}const ht={lessThanXSeconds:{one:"less than a second",other:"less than {{count}} seconds"},xSeconds:{one:"1 second",other:"{{count}} seconds"},halfAMinute:"half a minute",lessThanXMinutes:{one:"less than a minute",other:"less than {{count}} minutes"},xMinutes:{one:"1 minute",other:"{{count}} minutes"},aboutXHours:{one:"about 1 hour",other:"about {{count}} hours"},xHours:{one:"1 hour",other:"{{count}} hours"},xDays:{one:"1 day",other:"{{count}} days"},aboutXWeeks:{one:"about 1 week",other:"about {{count}} weeks"},xWeeks:{one:"1 week",other:"{{count}} weeks"},aboutXMonths:{one:"about 1 month",other:"about {{count}} months"},xMonths:{one:"1 month",other:"{{count}} months"},aboutXYears:{one:"about 1 year",other:"about {{count}} years"},xYears:{one:"1 year",other:"{{count}} years"},overXYears:{one:"over 1 year",other:"over {{count}} years"},almostXYears:{one:"almost 1 year",other:"almost {{count}} years"}};function ut(e){return(t={})=>{const i=t.width?String(t.width):e.defaultWidth;return e.formats[i]||e.formats[e.defaultWidth]}}const bt={date:ut({formats:{full:"EEEE, MMMM do, y",long:"MMMM do, y",medium:"MMM d, y",short:"MM/dd/yyyy"},defaultWidth:"full"}),time:ut({formats:{full:"h:mm:ss a zzzz",long:"h:mm:ss a z",medium:"h:mm:ss a",short:"h:mm a"},defaultWidth:"full"}),dateTime:ut({formats:{full:"{{date}} 'at' {{time}}",long:"{{date}} 'at' {{time}}",medium:"{{date}}, {{time}}",short:"{{date}}, {{time}}"},defaultWidth:"full"})},gt={lastWeek:"'last' eeee 'at' p",yesterday:"'yesterday at' p",today:"'today at' p",tomorrow:"'tomorrow at' p",nextWeek:"eeee 'at' p",other:"P"};function mt(e){return(t,i)=>{let o;if("formatting"===(i?.context?String(i.context):"standalone")&&e.formattingValues){const t=e.defaultFormattingWidth||e.defaultWidth,r=i?.width?String(i.width):t;o=e.formattingValues[r]||e.formattingValues[t]}else{const t=e.defaultWidth,r=i?.width?String(i.width):e.defaultWidth;o=e.values[r]||e.values[t]}return o[e.argumentCallback?e.argumentCallback(t):t]}}function yt(e){return(t,i={})=>{const o=i.width,r=o&&e.matchPatterns[o]||e.matchPatterns[e.defaultMatchWidth],n=t.match(r);if(!n)return null;const a=n[0],s=o&&e.parsePatterns[o]||e.parsePatterns[e.defaultParseWidth],l=Array.isArray(s)?function(e,t){for(let i=0;i<e.length;i++)if(t(e[i]))return i;return}(s,(e=>e.test(a))):function(e,t){for(const i in e)if(Object.prototype.hasOwnProperty.call(e,i)&&t(e[i]))return i;return}(s,(e=>e.test(a)));let d;d=e.valueCallback?e.valueCallback(l):l,d=i.valueCallback?i.valueCallback(d):d;return{value:d,rest:t.slice(a.length)}}}var ft;const vt={code:"en-US",formatDistance:(e,t,i)=>{let o;const r=ht[e];return o="string"==typeof r?r:1===t?r.one:r.other.replace("{{count}}",t.toString()),i?.addSuffix?i.comparison&&i.comparison>0?"in "+o:o+" ago":o},formatLong:bt,formatRelative:(e,t,i,o)=>gt[e],localize:{ordinalNumber:(e,t)=>{const i=Number(e),o=i%100;if(o>20||o<10)switch(o%10){case 1:return i+"st";case 2:return i+"nd";case 3:return i+"rd"}return i+"th"},era:mt({values:{narrow:["B","A"],abbreviated:["BC","AD"],wide:["Before Christ","Anno Domini"]},defaultWidth:"wide"}),quarter:mt({values:{narrow:["1","2","3","4"],abbreviated:["Q1","Q2","Q3","Q4"],wide:["1st quarter","2nd quarter","3rd quarter","4th quarter"]},defaultWidth:"wide",argumentCallback:e=>e-1}),month:mt({values:{narrow:["J","F","M","A","M","J","J","A","S","O","N","D"],abbreviated:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],wide:["January","February","March","April","May","June","July","August","September","October","November","December"]},defaultWidth:"wide"}),day:mt({values:{narrow:["S","M","T","W","T","F","S"],short:["Su","Mo","Tu","We","Th","Fr","Sa"],abbreviated:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],wide:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},defaultWidth:"wide"}),dayPeriod:mt({values:{narrow:{am:"a",pm:"p",midnight:"mi",noon:"n",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"},abbreviated:{am:"AM",pm:"PM",midnight:"midnight",noon:"noon",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"},wide:{am:"a.m.",pm:"p.m.",midnight:"midnight",noon:"noon",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"}},defaultWidth:"wide",formattingValues:{narrow:{am:"a",pm:"p",midnight:"mi",noon:"n",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"},abbreviated:{am:"AM",pm:"PM",midnight:"midnight",noon:"noon",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"},wide:{am:"a.m.",pm:"p.m.",midnight:"midnight",noon:"noon",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"}},defaultFormattingWidth:"wide"})},match:{ordinalNumber:(ft={matchPattern:/^(\d+)(th|st|nd|rd)?/i,parsePattern:/\d+/i,valueCallback:e=>parseInt(e,10)},(e,t={})=>{const i=e.match(ft.matchPattern);if(!i)return null;const o=i[0],r=e.match(ft.parsePattern);if(!r)return null;let n=ft.valueCallback?ft.valueCallback(r[0]):r[0];return n=t.valueCallback?t.valueCallback(n):n,{value:n,rest:e.slice(o.length)}}),era:yt({matchPatterns:{narrow:/^(b|a)/i,abbreviated:/^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,wide:/^(before christ|before common era|anno domini|common era)/i},defaultMatchWidth:"wide",parsePatterns:{any:[/^b/i,/^(a|c)/i]},defaultParseWidth:"any"}),quarter:yt({matchPatterns:{narrow:/^[1234]/i,abbreviated:/^q[1234]/i,wide:/^[1234](th|st|nd|rd)? quarter/i},defaultMatchWidth:"wide",parsePatterns:{any:[/1/i,/2/i,/3/i,/4/i]},defaultParseWidth:"any",valueCallback:e=>e+1}),month:yt({matchPatterns:{narrow:/^[jfmasond]/i,abbreviated:/^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,wide:/^(january|february|march|april|may|june|july|august|september|october|november|december)/i},defaultMatchWidth:"wide",parsePatterns:{narrow:[/^j/i,/^f/i,/^m/i,/^a/i,/^m/i,/^j/i,/^j/i,/^a/i,/^s/i,/^o/i,/^n/i,/^d/i],any:[/^ja/i,/^f/i,/^mar/i,/^ap/i,/^may/i,/^jun/i,/^jul/i,/^au/i,/^s/i,/^o/i,/^n/i,/^d/i]},defaultParseWidth:"any"}),day:yt({matchPatterns:{narrow:/^[smtwf]/i,short:/^(su|mo|tu|we|th|fr|sa)/i,abbreviated:/^(sun|mon|tue|wed|thu|fri|sat)/i,wide:/^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i},defaultMatchWidth:"wide",parsePatterns:{narrow:[/^s/i,/^m/i,/^t/i,/^w/i,/^t/i,/^f/i,/^s/i],any:[/^su/i,/^m/i,/^tu/i,/^w/i,/^th/i,/^f/i,/^sa/i]},defaultParseWidth:"any"}),dayPeriod:yt({matchPatterns:{narrow:/^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,any:/^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i},defaultMatchWidth:"any",parsePatterns:{any:{am:/^a/i,pm:/^p/i,midnight:/^mi/i,noon:/^no/i,morning:/morning/i,afternoon:/afternoon/i,evening:/evening/i,night:/night/i}},defaultParseWidth:"any"})},options:{weekStartsOn:0,firstWeekContainsDate:1}};function xt(e,t){const i=Ze(e,t?.in),o=function(e,t){const[i,o]=st(0,e,t),r=lt(i),n=lt(o),a=+r-at(r),s=+n-at(n);return Math.round((a-s)/864e5)}(i,function(e,t){const i=Ze(e,t?.in);return i.setFullYear(i.getFullYear(),0,1),i.setHours(0,0,0,0),i}(i));return o+1}function wt(e,t){const i=Ze(e,t?.in),o=+rt(i)-+function(e,t){const i=nt(e,t),o=Je(e,0);return o.setFullYear(i,0,4),o.setHours(0,0,0,0),rt(o)}(i);return Math.round(o/Xe)+1}function kt(e,t){const i=Ze(e,t?.in),o=i.getFullYear(),r=it(),n=t?.firstWeekContainsDate??t?.locale?.options?.firstWeekContainsDate??r.firstWeekContainsDate??r.locale?.options?.firstWeekContainsDate??1,a=Je(t?.in||e,0);a.setFullYear(o+1,0,n),a.setHours(0,0,0,0);const s=ot(a,t),l=Je(t?.in||e,0);l.setFullYear(o,0,n),l.setHours(0,0,0,0);const d=ot(l,t);return+i>=+s?o+1:+i>=+d?o:o-1}function $t(e,t){const i=Ze(e,t?.in),o=+ot(i,t)-+function(e,t){const i=it(),o=t?.firstWeekContainsDate??t?.locale?.options?.firstWeekContainsDate??i.firstWeekContainsDate??i.locale?.options?.firstWeekContainsDate??1,r=kt(e,t),n=Je(t?.in||e,0);return n.setFullYear(r,0,o),n.setHours(0,0,0,0),ot(n,t)}(i,t);return Math.round(o/Xe)+1}function St(e,t){return(e<0?"-":"")+Math.abs(e).toString().padStart(t,"0")}const Ct={y(e,t){const i=e.getFullYear(),o=i>0?i:1-i;return St("yy"===t?o%100:o,t.length)},M(e,t){const i=e.getMonth();return"M"===t?String(i+1):St(i+1,2)},d:(e,t)=>St(e.getDate(),t.length),a(e,t){const i=e.getHours()/12>=1?"pm":"am";switch(t){case"a":case"aa":return i.toUpperCase();case"aaa":return i;case"aaaaa":return i[0];default:return"am"===i?"a.m.":"p.m."}},h:(e,t)=>St(e.getHours()%12||12,t.length),H:(e,t)=>St(e.getHours(),t.length),m:(e,t)=>St(e.getMinutes(),t.length),s:(e,t)=>St(e.getSeconds(),t.length),S(e,t){const i=t.length,o=e.getMilliseconds();return St(Math.trunc(o*Math.pow(10,i-3)),t.length)}},Et="midnight",Ot="noon",Dt="morning",Mt="afternoon",Ft="evening",jt="night",Pt={G:function(e,t,i){const o=e.getFullYear()>0?1:0;switch(t){case"G":case"GG":case"GGG":return i.era(o,{width:"abbreviated"});case"GGGGG":return i.era(o,{width:"narrow"});default:return i.era(o,{width:"wide"})}},y:function(e,t,i){if("yo"===t){const t=e.getFullYear(),o=t>0?t:1-t;return i.ordinalNumber(o,{unit:"year"})}return Ct.y(e,t)},Y:function(e,t,i,o){const r=kt(e,o),n=r>0?r:1-r;if("YY"===t){return St(n%100,2)}return"Yo"===t?i.ordinalNumber(n,{unit:"year"}):St(n,t.length)},R:function(e,t){return St(nt(e),t.length)},u:function(e,t){return St(e.getFullYear(),t.length)},Q:function(e,t,i){const o=Math.ceil((e.getMonth()+1)/3);switch(t){case"Q":return String(o);case"QQ":return St(o,2);case"Qo":return i.ordinalNumber(o,{unit:"quarter"});case"QQQ":return i.quarter(o,{width:"abbreviated",context:"formatting"});case"QQQQQ":return i.quarter(o,{width:"narrow",context:"formatting"});default:return i.quarter(o,{width:"wide",context:"formatting"})}},q:function(e,t,i){const o=Math.ceil((e.getMonth()+1)/3);switch(t){case"q":return String(o);case"qq":return St(o,2);case"qo":return i.ordinalNumber(o,{unit:"quarter"});case"qqq":return i.quarter(o,{width:"abbreviated",context:"standalone"});case"qqqqq":return i.quarter(o,{width:"narrow",context:"standalone"});default:return i.quarter(o,{width:"wide",context:"standalone"})}},M:function(e,t,i){const o=e.getMonth();switch(t){case"M":case"MM":return Ct.M(e,t);case"Mo":return i.ordinalNumber(o+1,{unit:"month"});case"MMM":return i.month(o,{width:"abbreviated",context:"formatting"});case"MMMMM":return i.month(o,{width:"narrow",context:"formatting"});default:return i.month(o,{width:"wide",context:"formatting"})}},L:function(e,t,i){const o=e.getMonth();switch(t){case"L":return String(o+1);case"LL":return St(o+1,2);case"Lo":return i.ordinalNumber(o+1,{unit:"month"});case"LLL":return i.month(o,{width:"abbreviated",context:"standalone"});case"LLLLL":return i.month(o,{width:"narrow",context:"standalone"});default:return i.month(o,{width:"wide",context:"standalone"})}},w:function(e,t,i,o){const r=$t(e,o);return"wo"===t?i.ordinalNumber(r,{unit:"week"}):St(r,t.length)},I:function(e,t,i){const o=wt(e);return"Io"===t?i.ordinalNumber(o,{unit:"week"}):St(o,t.length)},d:function(e,t,i){return"do"===t?i.ordinalNumber(e.getDate(),{unit:"date"}):Ct.d(e,t)},D:function(e,t,i){const o=xt(e);return"Do"===t?i.ordinalNumber(o,{unit:"dayOfYear"}):St(o,t.length)},E:function(e,t,i){const o=e.getDay();switch(t){case"E":case"EE":case"EEE":return i.day(o,{width:"abbreviated",context:"formatting"});case"EEEEE":return i.day(o,{width:"narrow",context:"formatting"});case"EEEEEE":return i.day(o,{width:"short",context:"formatting"});default:return i.day(o,{width:"wide",context:"formatting"})}},e:function(e,t,i,o){const r=e.getDay(),n=(r-o.weekStartsOn+8)%7||7;switch(t){case"e":return String(n);case"ee":return St(n,2);case"eo":return i.ordinalNumber(n,{unit:"day"});case"eee":return i.day(r,{width:"abbreviated",context:"formatting"});case"eeeee":return i.day(r,{width:"narrow",context:"formatting"});case"eeeeee":return i.day(r,{width:"short",context:"formatting"});default:return i.day(r,{width:"wide",context:"formatting"})}},c:function(e,t,i,o){const r=e.getDay(),n=(r-o.weekStartsOn+8)%7||7;switch(t){case"c":return String(n);case"cc":return St(n,t.length);case"co":return i.ordinalNumber(n,{unit:"day"});case"ccc":return i.day(r,{width:"abbreviated",context:"standalone"});case"ccccc":return i.day(r,{width:"narrow",context:"standalone"});case"cccccc":return i.day(r,{width:"short",context:"standalone"});default:return i.day(r,{width:"wide",context:"standalone"})}},i:function(e,t,i){const o=e.getDay(),r=0===o?7:o;switch(t){case"i":return String(r);case"ii":return St(r,t.length);case"io":return i.ordinalNumber(r,{unit:"day"});case"iii":return i.day(o,{width:"abbreviated",context:"formatting"});case"iiiii":return i.day(o,{width:"narrow",context:"formatting"});case"iiiiii":return i.day(o,{width:"short",context:"formatting"});default:return i.day(o,{width:"wide",context:"formatting"})}},a:function(e,t,i){const o=e.getHours()/12>=1?"pm":"am";switch(t){case"a":case"aa":return i.dayPeriod(o,{width:"abbreviated",context:"formatting"});case"aaa":return i.dayPeriod(o,{width:"abbreviated",context:"formatting"}).toLowerCase();case"aaaaa":return i.dayPeriod(o,{width:"narrow",context:"formatting"});default:return i.dayPeriod(o,{width:"wide",context:"formatting"})}},b:function(e,t,i){const o=e.getHours();let r;switch(r=12===o?Ot:0===o?Et:o/12>=1?"pm":"am",t){case"b":case"bb":return i.dayPeriod(r,{width:"abbreviated",context:"formatting"});case"bbb":return i.dayPeriod(r,{width:"abbreviated",context:"formatting"}).toLowerCase();case"bbbbb":return i.dayPeriod(r,{width:"narrow",context:"formatting"});default:return i.dayPeriod(r,{width:"wide",context:"formatting"})}},B:function(e,t,i){const o=e.getHours();let r;switch(r=o>=17?Ft:o>=12?Mt:o>=4?Dt:jt,t){case"B":case"BB":case"BBB":return i.dayPeriod(r,{width:"abbreviated",context:"formatting"});case"BBBBB":return i.dayPeriod(r,{width:"narrow",context:"formatting"});default:return i.dayPeriod(r,{width:"wide",context:"formatting"})}},h:function(e,t,i){if("ho"===t){let t=e.getHours()%12;return 0===t&&(t=12),i.ordinalNumber(t,{unit:"hour"})}return Ct.h(e,t)},H:function(e,t,i){return"Ho"===t?i.ordinalNumber(e.getHours(),{unit:"hour"}):Ct.H(e,t)},K:function(e,t,i){const o=e.getHours()%12;return"Ko"===t?i.ordinalNumber(o,{unit:"hour"}):St(o,t.length)},k:function(e,t,i){let o=e.getHours();return 0===o&&(o=24),"ko"===t?i.ordinalNumber(o,{unit:"hour"}):St(o,t.length)},m:function(e,t,i){return"mo"===t?i.ordinalNumber(e.getMinutes(),{unit:"minute"}):Ct.m(e,t)},s:function(e,t,i){return"so"===t?i.ordinalNumber(e.getSeconds(),{unit:"second"}):Ct.s(e,t)},S:function(e,t){return Ct.S(e,t)},X:function(e,t,i){const o=e.getTimezoneOffset();if(0===o)return"Z";switch(t){case"X":return At(o);case"XXXX":case"XX":return zt(o);default:return zt(o,":")}},x:function(e,t,i){const o=e.getTimezoneOffset();switch(t){case"x":return At(o);case"xxxx":case"xx":return zt(o);default:return zt(o,":")}},O:function(e,t,i){const o=e.getTimezoneOffset();switch(t){case"O":case"OO":case"OOO":return"GMT"+Tt(o,":");default:return"GMT"+zt(o,":")}},z:function(e,t,i){const o=e.getTimezoneOffset();switch(t){case"z":case"zz":case"zzz":return"GMT"+Tt(o,":");default:return"GMT"+zt(o,":")}},t:function(e,t,i){return St(Math.trunc(+e/1e3),t.length)},T:function(e,t,i){return St(+e,t.length)}};function Tt(e,t=""){const i=e>0?"-":"+",o=Math.abs(e),r=Math.trunc(o/60),n=o%60;return 0===n?i+String(r):i+String(r)+t+St(n,2)}function At(e,t){if(e%60==0){return(e>0?"-":"+")+St(Math.abs(e)/60,2)}return zt(e,t)}function zt(e,t=""){const i=e>0?"-":"+",o=Math.abs(e);return i+St(Math.trunc(o/60),2)+t+St(o%60,2)}const It=(e,t)=>{switch(e){case"P":return t.date({width:"short"});case"PP":return t.date({width:"medium"});case"PPP":return t.date({width:"long"});default:return t.date({width:"full"})}},Lt=(e,t)=>{switch(e){case"p":return t.time({width:"short"});case"pp":return t.time({width:"medium"});case"ppp":return t.time({width:"long"});default:return t.time({width:"full"})}},_t={p:Lt,P:(e,t)=>{const i=e.match(/(P+)(p+)?/)||[],o=i[1],r=i[2];if(!r)return It(e,t);let n;switch(o){case"P":n=t.dateTime({width:"short"});break;case"PP":n=t.dateTime({width:"medium"});break;case"PPP":n=t.dateTime({width:"long"});break;default:n=t.dateTime({width:"full"})}return n.replace("{{date}}",It(o,t)).replace("{{time}}",Lt(r,t))}},Bt=/^D+$/,Nt=/^Y+$/,Rt=["D","DD","YY","YYYY"];const qt=/[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g,Vt=/P+p+|P+|p+|''|'(''|[^'])+('|$)|./g,Wt=/^'([^]*?)'?$/,Yt=/''/g,Ut=/[a-zA-Z]/;function Gt(e,t,i){const o=it(),r=o.locale??vt,n=o.firstWeekContainsDate??o.locale?.options?.firstWeekContainsDate??1,a=o.weekStartsOn??o.locale?.options?.weekStartsOn??0,s=Ze(e,i?.in);if(!ct(s))throw new RangeError("Invalid time value");let l=t.match(Vt).map((e=>{const t=e[0];if("p"===t||"P"===t){return(0,_t[t])(e,r.formatLong)}return e})).join("").match(qt).map((e=>{if("''"===e)return{isToken:!1,value:"'"};const t=e[0];if("'"===t)return{isToken:!1,value:Ht(e)};if(Pt[t])return{isToken:!0,value:e};if(t.match(Ut))throw new RangeError("Format string contains an unescaped latin alphabet character `"+t+"`");return{isToken:!1,value:e}}));r.localize.preprocessor&&(l=r.localize.preprocessor(s,l));const d={firstWeekContainsDate:n,weekStartsOn:a,locale:r};return l.map((i=>{if(!i.isToken)return i.value;const o=i.value;(function(e){return Nt.test(e)}(o)||function(e){return Bt.test(e)}(o))&&function(e,t,i){const o=function(e,t,i){const o="Y"===e[0]?"years":"days of the month";return`Use \`${e.toLowerCase()}\` instead of \`${e}\` (in \`${t}\`) for formatting ${o} to the input \`${i}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`}(e,t,i);if(console.warn(o),Rt.includes(e))throw new RangeError(o)}(o,t,String(e));return(0,Pt[o[0]])(s,o,r.localize,d)})).join("")}function Ht(e){const t=e.match(Wt);return t?t[1].replace(Yt,"'"):e}function Kt(e,t){return Ze(e,t?.in).getDate()}function Xt(e,t){const i=Ze(e,t?.in),o=i.getFullYear(),r=i.getMonth(),n=Je(i,0);return n.setFullYear(o,r+1,0),n.setHours(0,0,0,0),n.getDate()}function Qt(e,t){return+Ze(e)>+Ze(t)}function Jt(e,t){return+Ze(e)<+Ze(t)}function Zt(e,t,i){const[o,r]=st(0,e,t);return o.getFullYear()===r.getFullYear()&&o.getMonth()===r.getMonth()}function ei(e,t,i){const[o,r]=st(0,e,t);return o.getFullYear()===r.getFullYear()}function ti(e,t){return function(e,t){const[i,o]=st(0,e,t);return+lt(i)===+lt(o)}(Je(e,e),function(e){return Je(e,Date.now())}(e))}let ii=class extends t{constructor(){super(...arguments),this.selectedDate=null,this.viewDate=new Date,this.isMobile=!1,this.calendarWidth=0,this.minDate=null,this.maxDate=null,this.currentView="days",this.handleOutsideClick=e=>{const t=this.getRootNode(),i=t?.host;!i||e.composedPath().includes(this)||e.composedPath().includes(i)||this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}}static{this.styles=e`
|
|
2713
|
+
/* Estilos generales del contenedor del calendario (escritorio) */
|
|
2714
|
+
.calendar-container {
|
|
2715
|
+
position: absolute;
|
|
2716
|
+
top: 100%;
|
|
2717
|
+
left: 0;
|
|
2718
|
+
z-index: 10;
|
|
2719
|
+
border: var(--border-weight-default, 1px) solid var(--secondary-randstad-dark-blue-10, #e7e8ec);
|
|
2720
|
+
background: var(--secondary-white, #fff);
|
|
2721
|
+
border-radius: 4px;
|
|
2722
|
+
margin-top: 8px;
|
|
2723
|
+
padding: 16px;
|
|
2724
|
+
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
|
|
2725
|
+
font-family: Graphik;
|
|
2726
|
+
display: flex;
|
|
2727
|
+
flex-direction: column;
|
|
2728
|
+
box-sizing: border-box;
|
|
2729
|
+
min-width: 360px;
|
|
2730
|
+
}
|
|
2731
|
+
|
|
2732
|
+
/* El header no tiene margin-bottom */
|
|
2733
|
+
.header {
|
|
2734
|
+
margin-bottom: 0;
|
|
2735
|
+
}
|
|
2736
|
+
|
|
2737
|
+
/* El separador no tiene margin-top para no dejar espacio con el header */
|
|
2738
|
+
.weekdays-separator {
|
|
2739
|
+
width: 100%;
|
|
2740
|
+
height: 1px;
|
|
2741
|
+
background-color: var(--secondary-randstad-dark-blue-10, #e7e8ec);
|
|
2742
|
+
margin-top: 0;
|
|
2743
|
+
margin-bottom: 16px;
|
|
2744
|
+
}
|
|
2745
|
+
|
|
2746
|
+
/* Estilos del encabezado de navegación (botones y título) */
|
|
2747
|
+
.header {
|
|
2748
|
+
display: flex;
|
|
2749
|
+
justify-content: space-between;
|
|
2750
|
+
align-items: center;
|
|
2751
|
+
}
|
|
2752
|
+
|
|
2753
|
+
/* Estilos generales para los botones de navegación */
|
|
2754
|
+
.nav-button {
|
|
2755
|
+
background: none;
|
|
2756
|
+
border: none;
|
|
2757
|
+
cursor: pointer;
|
|
2758
|
+
padding: 8px;
|
|
2759
|
+
color: var(--primary-randstad-blue-70, #2175d9);
|
|
2760
|
+
border-radius: 50%;
|
|
2761
|
+
transition: background-color 0.2s;
|
|
2762
|
+
gap: 8px;
|
|
2763
|
+
}
|
|
2764
|
+
|
|
2765
|
+
.nav-button:hover {
|
|
2766
|
+
background-color: var(--secondary-randstad-light-blue-10, #e8f1fb);
|
|
2767
|
+
}
|
|
2768
|
+
|
|
2769
|
+
.header-left,
|
|
2770
|
+
.header-right {
|
|
2771
|
+
display: flex;
|
|
2772
|
+
align-items: center;
|
|
2773
|
+
gap: 4px;
|
|
2774
|
+
}
|
|
2775
|
+
|
|
2776
|
+
.month-year-button {
|
|
2777
|
+
${L}
|
|
2778
|
+
display: flex;
|
|
2779
|
+
align-items: center;
|
|
2780
|
+
justify-content: center;
|
|
2781
|
+
gap: 8px;
|
|
2782
|
+
background: none;
|
|
2783
|
+
border: none;
|
|
2784
|
+
cursor: pointer;
|
|
2785
|
+
transition: background-color 0.2s;
|
|
2786
|
+
color: var(--secondary-randstad-dark-blue-80, #3c4257);
|
|
2787
|
+
border-radius: 16px;
|
|
2788
|
+
width: auto;
|
|
2789
|
+
height: 41px;
|
|
2790
|
+
padding: 8px;
|
|
2791
|
+
}
|
|
2792
|
+
|
|
2793
|
+
.month-year-button:hover {
|
|
2794
|
+
background-color: var(--secondary-randstad-light-blue-10, #e8f1fb);
|
|
2795
|
+
}
|
|
2796
|
+
|
|
2797
|
+
.month-year-button randstad-icon {
|
|
2798
|
+
color: var(--primary-randstad-blue-70, #2175d9);
|
|
2799
|
+
}
|
|
2800
|
+
|
|
2801
|
+
/* Contenedor de los nombres de los días de la semana */
|
|
2802
|
+
.weekdays {
|
|
2803
|
+
display: grid;
|
|
2804
|
+
place-items: center;
|
|
2805
|
+
grid-template-columns: repeat(7, 1fr);
|
|
2806
|
+
text-align: center;
|
|
2807
|
+
color: var(--secondary-randstad-dark-blue-60, #6c7387);
|
|
2808
|
+
opacity: 1;
|
|
2809
|
+
margin-bottom: 8px; /* Gap de 8px entre nombres y días */
|
|
2810
|
+
font-size: 16px;
|
|
2811
|
+
font-style: normal;
|
|
2812
|
+
font-weight: 500;
|
|
2813
|
+
margin-top: 0;
|
|
2814
|
+
}
|
|
2815
|
+
|
|
2816
|
+
/* Cuadrícula para los días del mes */
|
|
2817
|
+
.days-grid {
|
|
2818
|
+
display: grid;
|
|
2819
|
+
place-items: center;
|
|
2820
|
+
grid-template-columns: repeat(7, 1fr);
|
|
2821
|
+
gap: 8px;
|
|
2822
|
+
}
|
|
2823
|
+
|
|
2824
|
+
/* Estilos para cada botón de día */
|
|
2825
|
+
.day {
|
|
2826
|
+
${_}
|
|
2827
|
+
display: flex;
|
|
2828
|
+
align-items: center;
|
|
2829
|
+
justify-content: center;
|
|
2830
|
+
width: 40px;
|
|
2831
|
+
height: 40px;
|
|
2832
|
+
border-radius: 50%;
|
|
2833
|
+
cursor: pointer;
|
|
2834
|
+
background-color: transparent;
|
|
2835
|
+
border: none;
|
|
2836
|
+
color: var(--secondary-randstad-dark-blue-80, #3c4257);
|
|
2837
|
+
padding: 0;
|
|
2838
|
+
position: relative;
|
|
2839
|
+
}
|
|
2840
|
+
|
|
2841
|
+
.day:hover {
|
|
2842
|
+
background-color: var(--secondary-randstad-light-blue-10, #e8f1fb);
|
|
2843
|
+
}
|
|
2844
|
+
|
|
2845
|
+
/* Estilos para el día, mes y año de hoy */
|
|
2846
|
+
.day.today {
|
|
2847
|
+
color: var(--primary-randstad-blue-70, #2175d9);
|
|
2848
|
+
font-weight: 500;
|
|
2849
|
+
}
|
|
2850
|
+
|
|
2851
|
+
.day.today::after {
|
|
2852
|
+
content: '';
|
|
2853
|
+
position: absolute;
|
|
2854
|
+
bottom: 0;
|
|
2855
|
+
left: 0;
|
|
2856
|
+
right: 0;
|
|
2857
|
+
width: 100%;
|
|
2858
|
+
height: 2px;
|
|
2859
|
+
background-color: var(--primary-randstad-blue-70, #2175d9);
|
|
2860
|
+
border-radius: 2px;
|
|
2861
|
+
}
|
|
2862
|
+
|
|
2863
|
+
/* Estilos para el día seleccionado */
|
|
2864
|
+
.day.selected {
|
|
2865
|
+
background-color: var(--primary-randstad-blue-70, #2175d9);
|
|
2866
|
+
color: var(--secondary-white, #fff);
|
|
2867
|
+
font-weight: 500;
|
|
2868
|
+
}
|
|
2869
|
+
|
|
2870
|
+
/* Estilos para el día seleccionado cuando se muestra en un mes o año diferente */
|
|
2871
|
+
.day.secondary-selected {
|
|
2872
|
+
background-color: var(--secondary-randstad-dark-blue-10, #e7e8ec);
|
|
2873
|
+
color: var(--secondary-randstad-dark-blue-80, #3c4257);
|
|
2874
|
+
font-weight: 500;
|
|
2875
|
+
border: 1px solid var(--secondary-randstad-dark-blue-10, #e7e8ec);
|
|
2876
|
+
}
|
|
2877
|
+
|
|
2878
|
+
/* Grillas para selección de año y mes */
|
|
2879
|
+
.year-grid,
|
|
2880
|
+
.month-grid {
|
|
2881
|
+
display: grid;
|
|
2882
|
+
grid-template-columns: repeat(3, 1fr);
|
|
2883
|
+
gap: 8px;
|
|
2884
|
+
}
|
|
2885
|
+
|
|
2886
|
+
/* Botones de año y mes en la grilla */
|
|
2887
|
+
.year-button,
|
|
2888
|
+
.month-button {
|
|
2889
|
+
${_}
|
|
2890
|
+
background: var(--secondary-white, #fff);
|
|
2891
|
+
border: 1px solid transparent;
|
|
2892
|
+
color: var(--secondary-randstad-dark-blue-80, #3c4257);
|
|
2893
|
+
cursor: pointer;
|
|
2894
|
+
transition: background-color 0.2s, border-color 0.2s;
|
|
2895
|
+
border-radius: 9999px;
|
|
2896
|
+
padding: 4px 16px;
|
|
2897
|
+
text-align: center;
|
|
2898
|
+
display: flex;
|
|
2899
|
+
justify-content: center;
|
|
2900
|
+
align-items: center;
|
|
2901
|
+
height: 38px;
|
|
2902
|
+
}
|
|
2903
|
+
|
|
2904
|
+
.year-button:hover,
|
|
2905
|
+
.month-button:hover {
|
|
2906
|
+
background-color: var(--secondary-randstad-light-blue-10, #e8f1fb);
|
|
2907
|
+
}
|
|
2908
|
+
|
|
2909
|
+
/* Estilos para el año o mes seleccionado */
|
|
2910
|
+
.year-button.selected,
|
|
2911
|
+
.month-button.selected {
|
|
2912
|
+
background-color: var(--primary-randstad-blue-70, #2175d9);
|
|
2913
|
+
color: var(--secondary-white, #fff);
|
|
2914
|
+
border: 1px solid var(--primary-randstad-blue-70, #2175d9);
|
|
2915
|
+
}
|
|
2916
|
+
|
|
2917
|
+
/* Estilos para el mes seleccionado en otro año (estilo secundario) */
|
|
2918
|
+
.month-button.secondary-selected {
|
|
2919
|
+
background-color: var(--secondary-randstad-dark-blue-10, #e7e8ec);
|
|
2920
|
+
color: var(--secondary-randstad-dark-blue-80, #3c4257);
|
|
2921
|
+
font-weight: 500;
|
|
2922
|
+
border: 1px solid var(--secondary-randstad-dark-blue-10, #e7e8ec);
|
|
2923
|
+
}
|
|
2924
|
+
|
|
2925
|
+
/* Estilos para el año y mes current */
|
|
2926
|
+
.year-button.current,
|
|
2927
|
+
.month-button.current {
|
|
2928
|
+
position: relative;
|
|
2929
|
+
}
|
|
2930
|
+
|
|
2931
|
+
.year-button.current::after,
|
|
2932
|
+
.month-button.current::after {
|
|
2933
|
+
content: '';
|
|
2934
|
+
position: absolute;
|
|
2935
|
+
bottom: 0;
|
|
2936
|
+
width: 100%;
|
|
2937
|
+
height: 2px;
|
|
2938
|
+
border-radius: 2px;
|
|
2939
|
+
background-color: var(--primary-randstad-blue-70, #2175d9);
|
|
2940
|
+
}
|
|
2941
|
+
|
|
2942
|
+
/* Estilos para el botón de navegación deshabilitado */
|
|
2943
|
+
.nav-button[disabled] {
|
|
2944
|
+
color: var(--secondary-randstad-dark-blue-30, #b1b5c4);
|
|
2945
|
+
pointer-events: none;
|
|
2946
|
+
}
|
|
2947
|
+
|
|
2948
|
+
.nav-button[disabled]:hover {
|
|
2949
|
+
background-color: transparent;
|
|
2950
|
+
}
|
|
2951
|
+
|
|
2952
|
+
/* Estilos para el botón de día deshabilitado */
|
|
2953
|
+
.day[disabled] {
|
|
2954
|
+
color: var(--secondary-randstad-dark-blue-30, #b1b5c4);
|
|
2955
|
+
pointer-events: none;
|
|
2956
|
+
background-color: transparent;
|
|
2957
|
+
}
|
|
2958
|
+
|
|
2959
|
+
.day[disabled]:hover {
|
|
2960
|
+
background-color: transparent;
|
|
2961
|
+
}
|
|
2962
|
+
|
|
2963
|
+
/* Estilos para los botones de año y mes deshabilitados */
|
|
2964
|
+
.year-button[disabled],
|
|
2965
|
+
.month-button[disabled] {
|
|
2966
|
+
color: var(--secondary-randstad-dark-blue-30, #b1b5c4);
|
|
2967
|
+
pointer-events: none;
|
|
2968
|
+
background-color: transparent;
|
|
2969
|
+
}
|
|
2970
|
+
|
|
2971
|
+
.year-button[disabled]:hover,
|
|
2972
|
+
.month-button[disabled]:hover {
|
|
2973
|
+
background-color: transparent;
|
|
2974
|
+
}
|
|
2975
|
+
|
|
2976
|
+
/* --- Estilos para móvil --- */
|
|
2977
|
+
.mobile-backdrop {
|
|
2978
|
+
position: fixed;
|
|
2979
|
+
inset: 0;
|
|
2980
|
+
background-color: rgba(0, 0, 0, 0.4);
|
|
2981
|
+
z-index: 999;
|
|
2982
|
+
font-family: Graphik;
|
|
2983
|
+
}
|
|
2984
|
+
|
|
2985
|
+
.mobile-modal {
|
|
2986
|
+
position: fixed;
|
|
2987
|
+
bottom: 0;
|
|
2988
|
+
left: 0;
|
|
2989
|
+
right: 0;
|
|
2990
|
+
background-color: white;
|
|
2991
|
+
z-index: 1000;
|
|
2992
|
+
border-radius: 12px 12px 0 0;
|
|
2993
|
+
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.15);
|
|
2994
|
+
display: flex;
|
|
2995
|
+
flex-direction: column;
|
|
2996
|
+
padding: 24px 16px;
|
|
2997
|
+
animation: slideUp 0.5s ease-out;
|
|
2998
|
+
max-height: 80vh;
|
|
2999
|
+
overflow-y: auto;
|
|
3000
|
+
font-family: Graphik;
|
|
3001
|
+
}
|
|
3002
|
+
|
|
3003
|
+
@keyframes slideUp {
|
|
3004
|
+
from {
|
|
3005
|
+
transform: translateY(100%);
|
|
3006
|
+
}
|
|
3007
|
+
to {
|
|
3008
|
+
transform: translateY(0);
|
|
3009
|
+
}
|
|
3010
|
+
}
|
|
3011
|
+
|
|
3012
|
+
.mobile-modal .header {
|
|
3013
|
+
margin-bottom: 0;
|
|
3014
|
+
position: sticky;
|
|
3015
|
+
top: 0;
|
|
3016
|
+
background: white;
|
|
3017
|
+
z-index: 10;
|
|
3018
|
+
}
|
|
3019
|
+
|
|
3020
|
+
.mobile-modal .weekdays-separator {
|
|
3021
|
+
margin: 0;
|
|
3022
|
+
}
|
|
3023
|
+
|
|
3024
|
+
.mobile-modal .weekdays {
|
|
3025
|
+
place-items: center;
|
|
3026
|
+
margin-top: 16px;
|
|
3027
|
+
margin-bottom: 8px;
|
|
3028
|
+
}
|
|
3029
|
+
|
|
3030
|
+
.mobile-modal .days-grid {
|
|
3031
|
+
gap: 8px;
|
|
3032
|
+
grid-template-columns: repeat(7, 1fr);
|
|
3033
|
+
place-items: center;
|
|
3034
|
+
}
|
|
3035
|
+
|
|
3036
|
+
.mobile-modal .month-grid,
|
|
3037
|
+
.mobile-modal .year-grid {
|
|
3038
|
+
gap: 16px;
|
|
3039
|
+
margin-top: 16px;
|
|
3040
|
+
}
|
|
3041
|
+
|
|
3042
|
+
.mobile-modal .day {
|
|
3043
|
+
${B}
|
|
3044
|
+
font-weight: 500;
|
|
3045
|
+
display: flex;
|
|
3046
|
+
align-items: center;
|
|
3047
|
+
justify-content: center;
|
|
3048
|
+
width: 40px;
|
|
3049
|
+
height: 40px;
|
|
3050
|
+
border-radius: 50%;
|
|
3051
|
+
cursor: pointer;
|
|
3052
|
+
background-color: transparent;
|
|
3053
|
+
border: none;
|
|
3054
|
+
color: var(--secondary-randstad-dark-blue-80, #3c4257);
|
|
3055
|
+
position: relative;
|
|
3056
|
+
}
|
|
3057
|
+
|
|
3058
|
+
.mobile-modal .day.selected {
|
|
3059
|
+
background-color: var(--primary-randstad-blue-70, #2175d9);
|
|
3060
|
+
color: var(--secondary-white, #fff);
|
|
3061
|
+
font-weight: 500;
|
|
3062
|
+
border-radius: 50%;
|
|
3063
|
+
}
|
|
3064
|
+
|
|
3065
|
+
.mobile-modal .day.today {
|
|
3066
|
+
color: var(--primary-randstad-blue-70, #2175d9);
|
|
3067
|
+
font-weight: 500;
|
|
3068
|
+
}
|
|
3069
|
+
|
|
3070
|
+
.mobile-modal .day.today::after {
|
|
3071
|
+
content: '';
|
|
3072
|
+
position: absolute;
|
|
3073
|
+
bottom: 0;
|
|
3074
|
+
width: 40px;
|
|
3075
|
+
left: 50%;
|
|
3076
|
+
transform: translateX(-50%);
|
|
3077
|
+
height: 2px;
|
|
3078
|
+
background-color: var(--primary-randstad-blue-70, #2175d9);
|
|
3079
|
+
border-radius: 2px;
|
|
3080
|
+
}
|
|
3081
|
+
|
|
3082
|
+
.mobile-modal .year-grid,
|
|
3083
|
+
.mobile-modal .month-grid {
|
|
3084
|
+
grid-template-columns: repeat(3, 1fr);
|
|
3085
|
+
gap: 8px;
|
|
3086
|
+
}
|
|
3087
|
+
|
|
3088
|
+
.mobile-modal .year-button,
|
|
3089
|
+
.mobile-modal .month-button {
|
|
3090
|
+
width: 100%;
|
|
3091
|
+
height: 48px;
|
|
3092
|
+
border-radius: 9999px;
|
|
3093
|
+
flex: 1 1 33.3333%;
|
|
3094
|
+
padding: 0;
|
|
3095
|
+
}
|
|
3096
|
+
|
|
3097
|
+
.mobile-modal .day.secondary-selected,
|
|
3098
|
+
.mobile-modal .month-button.secondary-selected {
|
|
3099
|
+
background-color: var(--secondary-randstad-dark-blue-10, #e7e8ec);
|
|
3100
|
+
color: var(--secondary-randstad-dark-blue-80, #3c4257);
|
|
3101
|
+
font-weight: 500;
|
|
3102
|
+
border: 1px solid var(--secondary-randstad-dark-blue-10, #e7e8ec);
|
|
3103
|
+
}
|
|
3104
|
+
|
|
3105
|
+
/* Estilos para elementos deshabilitados dentro del modal de móviles. */
|
|
3106
|
+
.mobile-modal .day[disabled],
|
|
3107
|
+
.mobile-modal .month-button[disabled],
|
|
3108
|
+
.mobile-modal .year-button[disabled] {
|
|
3109
|
+
color: var(--secondary-randstad-dark-blue-30, #b1b5c4);
|
|
3110
|
+
pointer-events: none;
|
|
3111
|
+
background-color: transparent;
|
|
3112
|
+
}
|
|
3113
|
+
|
|
3114
|
+
.mobile-modal .nav-button[disabled] {
|
|
3115
|
+
color: var(--secondary-randstad-dark-blue-30, #b1b5c4);
|
|
3116
|
+
pointer-events: none;
|
|
3117
|
+
background-color: transparent;
|
|
3118
|
+
}
|
|
3119
|
+
|
|
3120
|
+
/* Evitamos que el estilo 'today' o 'current' se aplique si el elemento está deshabilitado */
|
|
3121
|
+
.mobile-modal .day.today[disabled]::after,
|
|
3122
|
+
.mobile-modal .nav-button[disabled] randstad-icon {
|
|
3123
|
+
color: var(--secondary-randstad-dark-blue-30, #b1b5c4);
|
|
3124
|
+
}
|
|
3125
|
+
/* */
|
|
3126
|
+
`}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleOutsideClick)}handleHeaderClick(){"days"===this.currentView?this.currentView="years":this.currentView="days"}_updateView(e,t=null){this.viewDate=e,t&&(this.currentView=t),this.dispatchEvent(new CustomEvent("view-date-change",{detail:{date:this.viewDate}}))}handleNavClick(e){let t=this.viewDate;t="days"===this.currentView?et(this.viewDate,e):"months"===this.currentView?dt(this.viewDate,e):dt(this.viewDate,21*e),this._updateView(t)}handleYearSelect(e){const t=function(e,t,i){const o=Ze(e,i?.in);return isNaN(+o)?Je(e,NaN):(o.setFullYear(t),o)}(this.viewDate,e);this._updateView(t,"months")}handleMonthSelect(e){const t=function(e,t,i){const o=Ze(e,i?.in),r=o.getFullYear(),n=o.getDate(),a=Je(e,0);a.setFullYear(r,t,15),a.setHours(0,0,0,0);const s=Xt(a);return o.setMonth(t,Math.min(n,s)),o}(this.viewDate,e);this._updateView(t,"days")}handleDayClick(e){this.selectedDate=e,this.dispatchEvent(new CustomEvent("date-selected",{detail:{date:e},bubbles:!0,composed:!0}))}getFullMonthNames(){return["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"]}getShortMonthNames(){return this.getFullMonthNames().map((e=>e.substring(0,3)))}getShortWeekdays(){return["lu","ma","mi","ju","vi","sa","do"]}renderHeader(){const e=this.getFullMonthNames();let t="",o=!1,r=!1;if("years"===this.currentView){const e=this.viewDate.getFullYear()-this.viewDate.getFullYear()%21,i=e+20;t=`${e} - ${i}`;o=e<=(this.minDate?this.minDate.getFullYear():-1/0),r=i>=(this.maxDate?this.maxDate.getFullYear():1/0)}else if("months"===this.currentView){t=`${this.viewDate.getFullYear()}`;const e=this.viewDate.getFullYear();o=e<=(this.minDate?this.minDate.getFullYear():-1/0),r=e>=(this.maxDate?this.maxDate.getFullYear():1/0)}else{t=`${e[this.viewDate.getMonth()]} ${this.viewDate.getFullYear()}`,this.minDate&&(o=Zt(pt(this.viewDate),pt(this.minDate))||Jt(this.viewDate,this.minDate)),this.maxDate&&(r=Zt(pt(this.viewDate),pt(this.maxDate))||Qt(this.viewDate,this.maxDate))}return i`
|
|
3127
|
+
<div class="header">
|
|
3128
|
+
<div class="header-left">
|
|
3129
|
+
<button class="month-year-button" @click=${this.handleHeaderClick}>
|
|
3130
|
+
<span>${t}</span>
|
|
3131
|
+
|
|
3132
|
+
${"days"===this.currentView?i`<randstad-icon name="arrow_drop_down" class="select-icon"></randstad-icon>`:i`<randstad-icon name="arrow_drop_up" class="select-icon"></randstad-icon>`}
|
|
3133
|
+
</button>
|
|
3134
|
+
</div>
|
|
3135
|
+
|
|
3136
|
+
<div class="header-right">
|
|
3137
|
+
<button class="nav-button" @click=${()=>this.handleNavClick(-1)} ?disabled=${o}>
|
|
3138
|
+
<randstad-icon name="arrow_left"></randstad-icon>
|
|
3139
|
+
</button>
|
|
3140
|
+
|
|
3141
|
+
<button class="nav-button" @click=${()=>this.handleNavClick(1)} ?disabled=${r}>
|
|
3142
|
+
<randstad-icon name="arrow_right"></randstad-icon>
|
|
3143
|
+
</button>
|
|
3144
|
+
</div>
|
|
3145
|
+
</div>
|
|
3146
|
+
`}renderYearsView(){const e=this.viewDate.getFullYear()-this.viewDate.getFullYear()%21,t=Array.from({length:21},((t,i)=>e+i)),o=this.selectedDate?this.selectedDate.getFullYear():null,r=(new Date).getFullYear(),n=this.minDate?this.minDate.getFullYear():-1/0,a=this.maxDate?this.maxDate.getFullYear():1/0;return i`
|
|
3147
|
+
<div class="year-grid">
|
|
3148
|
+
${t.map((e=>i`
|
|
3149
|
+
<button
|
|
3150
|
+
class="${"year-button "+(e===o?"selected":e===r?"current":"")}"
|
|
3151
|
+
@click=${()=>this.handleYearSelect(e)}
|
|
3152
|
+
?disabled=${e<n||e>a}
|
|
3153
|
+
>
|
|
3154
|
+
${e}
|
|
3155
|
+
</button>
|
|
3156
|
+
`))}
|
|
3157
|
+
</div>
|
|
3158
|
+
`}renderMonthsView(){const e=this.getShortMonthNames(),t=this.selectedDate?.getMonth(),o=(new Date).getMonth(),r=this.viewDate.getFullYear();return i`
|
|
3159
|
+
<div class="month-grid">
|
|
3160
|
+
${e.map(((e,n)=>{const a=n===o,s=n===t&&this.selectedDate&&ei(this.viewDate,this.selectedDate),l=n===t&&this.selectedDate&&!ei(this.viewDate,this.selectedDate);let d=!1;this.minDate&&r===this.minDate.getFullYear()&&(d=n<this.minDate.getMonth()),this.maxDate&&r===this.maxDate.getFullYear()&&(d=d||n>this.maxDate.getMonth());return i`
|
|
3161
|
+
<button
|
|
3162
|
+
class="${"month-button "+(s?"selected":l?"secondary-selected":a?"current":"")}"
|
|
3163
|
+
?disabled=${d}
|
|
3164
|
+
@click=${()=>this.handleMonthSelect(n)}
|
|
3165
|
+
>
|
|
3166
|
+
${e}
|
|
3167
|
+
</button>
|
|
3168
|
+
`}))}
|
|
3169
|
+
</div>
|
|
3170
|
+
`}renderDayView(){const e=Xt(this.viewDate),t=pt(this.viewDate),o=Ze(t,r?.in).getDay();var r;const n=Array.from({length:0===o?6:o-1},(()=>null)),a=Array.from({length:e},((e,i)=>function(e,t,i){const o=Ze(e,i?.in);return o.setDate(t),o}(t,i+1))),s=this.getShortWeekdays();return i`
|
|
3171
|
+
<div class="weekdays">
|
|
3172
|
+
${s.map((e=>i`<div>${e}</div>`))}
|
|
3173
|
+
</div>
|
|
3174
|
+
|
|
3175
|
+
<div class="days-grid">
|
|
3176
|
+
${n.map((()=>i`<div></div>`))}
|
|
3177
|
+
${a.map((e=>{const t=lt(e),o=this.selectedDate?lt(this.selectedDate):null,r=this.minDate&&Jt(t,lt(this.minDate))||this.maxDate&&Qt(t,lt(this.maxDate)),n=ti(t),a=o&&Kt(t)===Kt(o),s=a&&o&&Zt(t,o)&&ei(t,o);return i`
|
|
3178
|
+
<button
|
|
3179
|
+
class="${`day ${n?"today":""} ${s?"selected":a&&!s?"secondary-selected":""}`}"
|
|
3180
|
+
?disabled=${r}
|
|
3181
|
+
@click=${()=>this.handleDayClick(e)}
|
|
3182
|
+
>
|
|
3183
|
+
${Gt(e,"d")}
|
|
3184
|
+
</button>
|
|
3185
|
+
`}))}
|
|
3186
|
+
</div>
|
|
3187
|
+
`}render(){let e;e="days"===this.currentView?this.renderDayView():"months"===this.currentView?this.renderMonthsView():this.renderYearsView();const t=i`${this.renderHeader()} <div class="weekdays-separator"></div> ${e}`;return this.isMobile?i`
|
|
3188
|
+
<div
|
|
3189
|
+
class="mobile-backdrop"
|
|
3190
|
+
@click=${()=>this.dispatchEvent(new CustomEvent("close"))}
|
|
3191
|
+
>
|
|
3192
|
+
<div class="mobile-modal" @click=${e=>e.stopPropagation()}>
|
|
3193
|
+
${t}
|
|
3194
|
+
</div>
|
|
3195
|
+
</div>
|
|
3196
|
+
`:i`
|
|
3197
|
+
<div class="calendar-container" style="width: ${this.calendarWidth}px;">
|
|
3198
|
+
${t}
|
|
3199
|
+
</div>
|
|
3200
|
+
`}};a([T({type:Object}),s("design:type",Object)],ii.prototype,"selectedDate",void 0),a([T({type:Object}),s("design:type",Date)],ii.prototype,"viewDate",void 0),a([T({type:Boolean}),s("design:type",Object)],ii.prototype,"isMobile",void 0),a([T({type:Number}),s("design:type",Number)],ii.prototype,"calendarWidth",void 0),a([T({type:Object}),s("design:type",Object)],ii.prototype,"minDate",void 0),a([T({type:Object}),s("design:type",Object)],ii.prototype,"maxDate",void 0),a([A(),s("design:type",String)],ii.prototype,"currentView",void 0),ii=a([l("calendar-overlay")],ii);let oi=class extends t{constructor(){super(...arguments),this.label="",this.placeholder="Selecciona una fecha",this.value="",this.required=!1,this.disabled=!1,this.isRenderClearButton=!0,this.error=!1,this.errorMessage=null,this.optional=!1,this.helper=null,this.helperAlign="left",this.isOpen=!1,this.selectedDate=null,this.viewDate=new Date,this.isMobile=!1,this.calendarWidth=0,this.updateResponsiveModeBound=this.updateResponsiveMode.bind(this),this.handleClickOutside=e=>{e.composedPath().includes(this)||(this.isOpen=!1,this.error&&this.closeOverlay(""))}}static{this.styles=e`
|
|
3201
|
+
/* Contenedor principal y tipografía base */
|
|
3202
|
+
:host {
|
|
3203
|
+
display: block;
|
|
3204
|
+
font-family: "Graphik", sans-serif;
|
|
3205
|
+
color: var(--secondary-randstad-dark-blue, #0f1941);
|
|
3206
|
+
}
|
|
3207
|
+
|
|
3208
|
+
/* Si se proporciona una propiedad width (ej. width="600px"), se usa ese valor. */
|
|
3209
|
+
:host([width]) {
|
|
3210
|
+
width: var(--datepicker-width);
|
|
3211
|
+
}
|
|
3212
|
+
|
|
3213
|
+
/* Contenedor principal para el input */
|
|
3214
|
+
.input-container {
|
|
3215
|
+
position: relative;
|
|
3216
|
+
/* El contenedor siempre toma el 100% del ancho del host */
|
|
3217
|
+
max-width: 100%;
|
|
3218
|
+
}
|
|
3219
|
+
|
|
3220
|
+
/* Estilos para evitar el desbordamiento en móviles */
|
|
3221
|
+
calendar-overlay {
|
|
3222
|
+
max-width: 100vw;
|
|
3223
|
+
box-sizing: border-box;
|
|
3224
|
+
}
|
|
3225
|
+
|
|
3226
|
+
/* Contenedores del label y helper */
|
|
3227
|
+
.label-container {
|
|
3228
|
+
display: flex;
|
|
3229
|
+
align-items: baseline;
|
|
3230
|
+
gap: 4px;
|
|
3231
|
+
margin-bottom: 4px;
|
|
3232
|
+
}
|
|
3233
|
+
|
|
3234
|
+
.form-label {
|
|
3235
|
+
${B}
|
|
3236
|
+
color: var(--secondary-randstad-dark-blue-80, #404767);
|
|
3237
|
+
display: block;
|
|
3238
|
+
}
|
|
3239
|
+
|
|
3240
|
+
/* Estilos para los textos de ayuda y error */
|
|
3241
|
+
.required {
|
|
3242
|
+
color: var(--ui-negative);
|
|
3243
|
+
}
|
|
3244
|
+
|
|
3245
|
+
.optional {
|
|
3246
|
+
color: var(--secondary-color-60);
|
|
3247
|
+
${I}
|
|
3248
|
+
}
|
|
3249
|
+
|
|
3250
|
+
.helper-description {
|
|
3251
|
+
${B};
|
|
3252
|
+
color: var(--secondary-color-40);
|
|
3253
|
+
margin: 0;
|
|
3254
|
+
}
|
|
3255
|
+
|
|
3256
|
+
.error-message {
|
|
3257
|
+
${B};
|
|
3258
|
+
color: var(--ui-negative, #E00F0F);
|
|
3259
|
+
margin-top: 4px;
|
|
3260
|
+
}
|
|
3261
|
+
|
|
3262
|
+
/* Estilos del campo de entrada y sus estados */
|
|
3263
|
+
.input-wrapper {
|
|
3264
|
+
display: flex;
|
|
3265
|
+
align-items: center;
|
|
3266
|
+
border: 1px solid var(--md-sys-color-outline, #e0e0e0);
|
|
3267
|
+
border-radius: 4px;
|
|
3268
|
+
padding: 0 16px;
|
|
3269
|
+
transition: border-color 0.2s;
|
|
3270
|
+
background: white;
|
|
3271
|
+
box-sizing: border-box;
|
|
3272
|
+
min-width: 360px;
|
|
3273
|
+
}
|
|
3274
|
+
|
|
3275
|
+
.input-wrapper:hover {
|
|
3276
|
+
box-shadow: 0px 0px 0px 4px #0f19411a;
|
|
3277
|
+
}
|
|
3278
|
+
|
|
3279
|
+
.input-wrapper.active:hover {
|
|
3280
|
+
box-shadow: 0px 0px 0px 4px #0f19411a;
|
|
3281
|
+
}
|
|
3282
|
+
|
|
3283
|
+
.input-wrapper.active {
|
|
3284
|
+
border: 1px solid var(--primary-color);
|
|
3285
|
+
box-shadow: none;
|
|
3286
|
+
}
|
|
3287
|
+
|
|
3288
|
+
.date-input {
|
|
3289
|
+
${B}
|
|
3290
|
+
flex-grow: 1;
|
|
3291
|
+
border: none;
|
|
3292
|
+
outline: none;
|
|
3293
|
+
padding: 16px 0;
|
|
3294
|
+
cursor: text;
|
|
3295
|
+
background: white;
|
|
3296
|
+
color: #49454f;
|
|
3297
|
+
}
|
|
3298
|
+
|
|
3299
|
+
.icon-button {
|
|
3300
|
+
background: none;
|
|
3301
|
+
border: none;
|
|
3302
|
+
cursor: pointer;
|
|
3303
|
+
display: flex;
|
|
3304
|
+
align-items: center;
|
|
3305
|
+
justify-content: center;
|
|
3306
|
+
padding: 0;
|
|
3307
|
+
}
|
|
3308
|
+
|
|
3309
|
+
.clear-button {
|
|
3310
|
+
margin-right: 18px;
|
|
3311
|
+
color: #49454f;
|
|
3312
|
+
opacity: 0.6;
|
|
3313
|
+
}
|
|
3314
|
+
|
|
3315
|
+
.clear-button randstad-icon {
|
|
3316
|
+
width: 18px;
|
|
3317
|
+
height: 18px;
|
|
3318
|
+
}
|
|
3319
|
+
|
|
3320
|
+
.calendar-button {
|
|
3321
|
+
color: #2175d9;
|
|
3322
|
+
}
|
|
3323
|
+
|
|
3324
|
+
.calendar-button randstad-icon {
|
|
3325
|
+
font-size: 18px;
|
|
3326
|
+
}
|
|
3327
|
+
|
|
3328
|
+
/* --- Error Styles --- */
|
|
3329
|
+
:host([error]) .input-wrapper {
|
|
3330
|
+
border: 1px solid var(--ui-negative, red) !important;
|
|
3331
|
+
}
|
|
3332
|
+
|
|
3333
|
+
:host([error]) .input-wrapper:hover {
|
|
3334
|
+
box-shadow: 0px 0px 0px 4px #e00f0f1a !important;
|
|
3335
|
+
}
|
|
3336
|
+
|
|
3337
|
+
:host([error]) .input-wrapper.active {
|
|
3338
|
+
border: 1px solid var(--ui-negative, red) !important;
|
|
3339
|
+
box-shadow: none !important;
|
|
3340
|
+
}
|
|
3341
|
+
/* */
|
|
3342
|
+
`}connectedCallback(){super.connectedCallback(),this.updateResponsiveMode(),window.addEventListener("resize",this.updateResponsiveModeBound),document.addEventListener("click",this.handleClickOutside)}disconnectedCallback(){window.removeEventListener("resize",this.updateResponsiveModeBound),document.removeEventListener("click",this.handleClickOutside),super.disconnectedCallback()}firstUpdated(){this.setInitialWidth()}updated(e){e.has("value")&&this._syncValue(this.value),(e.has("isOpen")||e.has("value"))&&this.setInitialWidth(),super.updated(e)}setInitialWidth(){this.inputContainer&&(this.calendarWidth=this.inputContainer.getBoundingClientRect().width)}updateResponsiveMode(){this.isMobile=window.innerWidth<=940,this.setInitialWidth()}handleInput(e){const t=e.target;this._parseAndValidateDate(t.value,!0)}handleCalendarButtonClick(e){this.disabled||(e.stopPropagation(),this.isOpen=!this.isOpen,this.selectedDate?this.viewDate=this.selectedDate:this.viewDate=new Date,this.requestUpdate())}handleClearDate(){this.selectedDate=null,this.error=!1,this.errorMessage=null,this.closeOverlay("")}handleDateSelect(e){const t=e.detail.date;t&&(this.selectedDate=t,this.viewDate=t,this.closeOverlay(Gt(t,"dd-MM-yyyy")))}handleViewDateChange(e){this.viewDate=e.detail.date}closeOverlay(e){this.value=e,this.isOpen=!1,this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:e}}))}_syncValue(e){if(""===e)return void(this.error||(this.selectedDate=null,this.errorMessage=null));const t=this._parseDate(e);t&&this._isWithinBounds(t)?(this.selectedDate=t,this.viewDate=t,this.error=!1,this.errorMessage=null,this.value=Gt(t,"dd-MM-yyyy")):(this.selectedDate=null,this.error=!0,this.errorMessage="Formato de fecha no válido o fuera de rango. Se esperaba 'dd-MM-yyyy'.")}_parseAndValidateDate(e,t){if(this.disabled)return;if(""===e)return this.selectedDate=null,this.error=!1,this.errorMessage=null,void(t&&this.closeOverlay(""));const i=this._parseDate(e);if(i)if(this._isWithinBounds(i))this.selectedDate=i,this.viewDate=i,this.error=!1,this.errorMessage=null,t&&this.closeOverlay(Gt(i,"dd-MM-yyyy"));else{this.error=!0;const e=this._getValidDateRange();this.errorMessage=`La fecha debe estar entre ${e?.minDate?Gt(e.minDate,"dd-MM-yyyy"):"el inicio de los tiempos"} y ${e?.maxDate?Gt(e.maxDate,"dd-MM-yyyy"):"el fin de los tiempos"}.`,t&&this.closeOverlay(""),console.error("La fecha está fuera del rango permitido.")}else this.error=!0,this.errorMessage="Formato de fecha no válido. Se esperaba 'dd-MM-yyyy' o 'yyyy-MM-dd'.",t&&this.closeOverlay(""),console.error("Formato de fecha no válido.")}_parseDate(e){const t=e.split("-").map(Number);if(3===t.length){const[i,o,r]=t;if(i&&o&&r&&o>=1&&o<=12&&r>1e3){const t=new Date(r,o-1,i,12);if(ct(t)&&Gt(t,"dd-MM-yyyy")===e)return t}}const i=e.split("-").map(Number);if(3===i.length){const[e,t,o]=i;if(e&&t&&o&&t>=1&&t<=12&&e>1e3){const i=new Date(e,t-1,o,12);if(ct(i))return i}}return null}_parseDateString(e){if(!e)return null;const t=e.split("-").map(Number);if(3===t.length&&!isNaN(t[0])&&!isNaN(t[1])&&!isNaN(t[2])){return new Date(t[0],t[1]-1,t[2],12)}return null}_getValidDateRange(){const e=this._parseDateString(this.minDate),t=this._parseDateString(this.maxDate);return e||t?e&&t&&Qt(e,t)?null:{minDate:e,maxDate:t}:{minDate:null,maxDate:null}}_isWithinBounds(e){const t=this._getValidDateRange();return!t||(!t.minDate||!Jt(e,t.minDate))&&(!t.maxDate||!Qt(e,t.maxDate))}render(){const e=n({"input-wrapper":!0,active:this.isOpen,error:this.error,disabled:this.disabled}),t=`width: ${this.width||"100%"};`,r=`text-align: ${this.helperAlign??"left"};`,a=this._getValidDateRange();return i`
|
|
3343
|
+
<div class="input-container" style="${t}">
|
|
3344
|
+
<div class="label-container">
|
|
3345
|
+
<label class="form-label">
|
|
3346
|
+
${this.label}
|
|
3347
|
+
${this.required?i`<span class="required">*</span>`:this.optional?i`<span class="optional">opcional</span>`:o}
|
|
3348
|
+
</label>
|
|
3349
|
+
</div>
|
|
3350
|
+
|
|
3351
|
+
<div class="${e}" style="width: 100%">
|
|
3352
|
+
<input
|
|
3353
|
+
type="text"
|
|
3354
|
+
class="date-input"
|
|
3355
|
+
.value="${this.value}"
|
|
3356
|
+
placeholder="${this.placeholder}"
|
|
3357
|
+
?disabled=${this.disabled}
|
|
3358
|
+
@input=${this.handleInput}
|
|
3359
|
+
/>
|
|
3360
|
+
|
|
3361
|
+
${this.isRenderClearButton&&this.selectedDate&&!this.disabled?i`
|
|
3362
|
+
<button
|
|
3363
|
+
class="icon-button clear-button"
|
|
3364
|
+
@click=${this.handleClearDate}
|
|
3365
|
+
>
|
|
3366
|
+
<randstad-icon name="close"></randstad-icon>
|
|
3367
|
+
</button>
|
|
3368
|
+
`:o}
|
|
3369
|
+
|
|
3370
|
+
<button
|
|
3371
|
+
class="icon-button calendar-button"
|
|
3372
|
+
@click=${this.handleCalendarButtonClick}
|
|
3373
|
+
>
|
|
3374
|
+
<randstad-icon name="calendar"></randstad-icon>
|
|
3375
|
+
</button>
|
|
3376
|
+
</div>
|
|
3377
|
+
|
|
3378
|
+
${this.helper?i`
|
|
3379
|
+
<p
|
|
3380
|
+
class="helper-description"
|
|
3381
|
+
style=${r}
|
|
3382
|
+
>
|
|
3383
|
+
${this.helper}
|
|
3384
|
+
</p>
|
|
3385
|
+
`:o}
|
|
3386
|
+
|
|
3387
|
+
${this.errorMessage?i`<div class="error-message">${this.errorMessage}</div>`:o}
|
|
3388
|
+
|
|
3389
|
+
${this.isOpen?i`
|
|
3390
|
+
<calendar-overlay
|
|
3391
|
+
.isMobile=${this.isMobile}
|
|
3392
|
+
.selectedDate=${this.selectedDate}
|
|
3393
|
+
.viewDate=${this.viewDate}
|
|
3394
|
+
.calendarWidth=${this.calendarWidth}
|
|
3395
|
+
.minDate=${a?.minDate}
|
|
3396
|
+
.maxDate=${a?.maxDate}
|
|
3397
|
+
@close=${()=>this.isOpen=!1}
|
|
3398
|
+
@view-date-change=${this.handleViewDateChange}
|
|
3399
|
+
@date-selected=${this.handleDateSelect}
|
|
3400
|
+
>
|
|
3401
|
+
</calendar-overlay>
|
|
3402
|
+
`:o}
|
|
3403
|
+
</div>
|
|
3404
|
+
`}};a([T({type:String}),s("design:type",Object)],oi.prototype,"label",void 0),a([T({type:String}),s("design:type",Object)],oi.prototype,"placeholder",void 0),a([T({type:String}),s("design:type",Object)],oi.prototype,"value",void 0),a([T({type:Boolean}),s("design:type",Object)],oi.prototype,"required",void 0),a([T({type:Boolean}),s("design:type",Object)],oi.prototype,"disabled",void 0),a([T({type:String}),s("design:type",String)],oi.prototype,"width",void 0),a([T({type:Boolean}),s("design:type",Object)],oi.prototype,"isRenderClearButton",void 0),a([T({type:String}),s("design:type",String)],oi.prototype,"minDate",void 0),a([T({type:String}),s("design:type",String)],oi.prototype,"maxDate",void 0),a([T({type:Boolean,reflect:!0}),s("design:type",Object)],oi.prototype,"error",void 0),a([T({type:String}),s("design:type",Object)],oi.prototype,"errorMessage",void 0),a([T({type:Boolean}),s("design:type",Object)],oi.prototype,"optional",void 0),a([T({type:String}),s("design:type",Object)],oi.prototype,"helper",void 0),a([T({type:String}),s("design:type",String)],oi.prototype,"helperAlign",void 0),a([A(),s("design:type",Object)],oi.prototype,"isOpen",void 0),a([A(),s("design:type",Object)],oi.prototype,"selectedDate",void 0),a([A(),s("design:type",Date)],oi.prototype,"viewDate",void 0),a([A(),s("design:type",Object)],oi.prototype,"isMobile",void 0),a([A(),s("design:type",Number)],oi.prototype,"calendarWidth",void 0),a([z(".input-container"),s("design:type",HTMLDivElement)],oi.prototype,"inputContainer",void 0),oi=a([l("datepicker-component")],oi);const ri={"application/pdf":"PDF","application/msword":"Word (.doc)","application/vnd.openxmlformats-officedocument.wordprocessingml.document":"Word (.docx)","image/jpeg":"JPEG","image/png":"PNG","text/plain":"Texto (.txt)"};let ni=class extends t{constructor(){super(...arguments),this.files=[],this.maxFiles=1,this.acceptedFileTypes=[],this.maxFileSize=5242880,this.disabled=!1,this.label="",this.labelColor="",this.buttonText="Agregar archivo",this.helper=null,this.helperAlign="left",this.error=!1,this.errorMessage=null,this.required=!1,this.optional=!1}static{this.styles=e`
|
|
3405
|
+
:host {
|
|
3406
|
+
display: block;
|
|
3407
|
+
width: 100%;
|
|
3408
|
+
font-family: 'Graphik', sans-serif;
|
|
3409
|
+
color: var(--secondary-randstad-dark-blue, #0f1941);
|
|
3410
|
+
}
|
|
3411
|
+
|
|
3412
|
+
:host([width]) {
|
|
3413
|
+
width: var(--upload-file-width);
|
|
3414
|
+
}
|
|
3415
|
+
|
|
3416
|
+
/* Contenedor principal para organizar los elementos */
|
|
3417
|
+
.file-container {
|
|
3418
|
+
display: flex;
|
|
3419
|
+
flex-direction: column;
|
|
3420
|
+
gap: 16px;
|
|
3421
|
+
}
|
|
3422
|
+
|
|
3423
|
+
.required {
|
|
3424
|
+
color: var(--ui-negative);
|
|
3425
|
+
}
|
|
3426
|
+
|
|
3427
|
+
.optional {
|
|
3428
|
+
color: var(--secondary-color-60);
|
|
3429
|
+
${I}
|
|
3430
|
+
}
|
|
3431
|
+
|
|
3432
|
+
.label-container {
|
|
3433
|
+
display: flex;
|
|
3434
|
+
align-items: baseline;
|
|
3435
|
+
gap: 4px;
|
|
3436
|
+
}
|
|
3437
|
+
|
|
3438
|
+
.form-label {
|
|
3439
|
+
${_};
|
|
3440
|
+
color: var(--label-color, var(--secondary-color-80, #404767));
|
|
3441
|
+
}
|
|
3442
|
+
|
|
3443
|
+
input[type="file"] {
|
|
3444
|
+
display: none;
|
|
3445
|
+
}
|
|
3446
|
+
|
|
3447
|
+
.file-list-container {
|
|
3448
|
+
width: 100%;
|
|
3449
|
+
display: flex;
|
|
3450
|
+
justify-content: flex-end;
|
|
3451
|
+
}
|
|
3452
|
+
|
|
3453
|
+
.file-list {
|
|
3454
|
+
display: flex;
|
|
3455
|
+
flex-direction: column;
|
|
3456
|
+
align-items: flex-end;
|
|
3457
|
+
gap: 8px;
|
|
3458
|
+
}
|
|
3459
|
+
|
|
3460
|
+
.file-item {
|
|
3461
|
+
display: flex;
|
|
3462
|
+
align-items: center;
|
|
3463
|
+
gap: 8px;
|
|
3464
|
+
color: var(--secondary-color-80, #404767);
|
|
3465
|
+
max-width: 100%;
|
|
3466
|
+
}
|
|
3467
|
+
|
|
3468
|
+
.file-name {
|
|
3469
|
+
${_};
|
|
3470
|
+
text-align: right;
|
|
3471
|
+
color: var(--secondary-color-40);
|
|
3472
|
+
vertical-align: middle;
|
|
3473
|
+
leading-trim: NONE;
|
|
3474
|
+
white-space: nowrap;
|
|
3475
|
+
overflow: hidden;
|
|
3476
|
+
text-overflow: ellipsis;
|
|
3477
|
+
max-width: 250px;
|
|
3478
|
+
}
|
|
3479
|
+
|
|
3480
|
+
.remove-file-button {
|
|
3481
|
+
--primary-color: var(--ui-negative, #E00F0F);
|
|
3482
|
+
}
|
|
3483
|
+
|
|
3484
|
+
.helper-description {
|
|
3485
|
+
${_};
|
|
3486
|
+
color: var(--secondary-color-40);
|
|
3487
|
+
margin: 0;
|
|
3488
|
+
}
|
|
3489
|
+
|
|
3490
|
+
.error-message {
|
|
3491
|
+
${_};
|
|
3492
|
+
color: var(--ui-negative, #E00F0F);
|
|
3493
|
+
margin-top: -8px;
|
|
3494
|
+
}
|
|
3495
|
+
`}updated(e){super.updated(e),this.applyWidth()}applyWidth(){this.width&&this.style.setProperty("--upload-file-width",this.width)}getReadableFileTypes(){const e=this.acceptedFileTypes.map((e=>ri[e]||e));if(e.length<=1)return e.join("");const t=e.pop();return`${e.join(", ")} y ${t}`}validateFiles(e){const t=this.maxFileSize/1024/1024;for(const i of e){if(this.acceptedFileTypes.length>0&&!this.acceptedFileTypes.includes(i.type))return this.errorMessage=`Formato de archivo no válido. Se aceptan: ${this.getReadableFileTypes()}.`,!1;if(i.size>this.maxFileSize)return this.errorMessage=`El archivo es demasiado grande. El tamaño máximo es de ${t}MB.`,!1}return!0}handleFiles(e){if(this.error=!1,this.errorMessage=null,!e||this.disabled)return;const t=Number.isFinite(this.maxFiles)&&this.maxFiles>0?this.maxFiles:1,i=Array.from(e),o=t-this.files.length;if(o<=0)return this.error=!0,void(this.errorMessage=`Se ha alcanzado el número máximo de archivos (${t}).`);const r=i.slice(0,o);this.validateFiles(r)?(this.files=[...this.files,...r],this.dispatchEvent(new CustomEvent("files-changed",{detail:this.files}))):this.error=!0}onFileInputChange(e){const t=e.target;this.handleFiles(t.files),this.fileInput&&(this.fileInput.value="")}removeFile(e){this.files=this.files.filter(((t,i)=>i!==e)),this.dispatchEvent(new CustomEvent("files-changed",{detail:this.files})),0===this.files.length&&(this.error=!1,this.errorMessage=null)}render(){const e=this.files.length>=this.maxFiles,t=this.disabled||e,r=`text-align: ${this.helperAlign??"left"};`;return i`
|
|
3496
|
+
<div class="file-container" style="${this.labelColor?`--label-color: ${this.labelColor};`:""}">
|
|
3497
|
+
${this.label?i`
|
|
3498
|
+
<div class="label-container">
|
|
3499
|
+
<label class="form-label">
|
|
3500
|
+
${this.label}
|
|
3501
|
+
${this.required?i`<span class="required">*</span>`:this.optional?i`<span class="optional">opcional</span>`:o}
|
|
3502
|
+
</label>
|
|
3503
|
+
</div>
|
|
3504
|
+
`:""}
|
|
3505
|
+
|
|
3506
|
+
<randstad-button
|
|
3507
|
+
.label=${this.buttonText}
|
|
3508
|
+
.variant=${"button-primary"}
|
|
3509
|
+
?disabled=${t}
|
|
3510
|
+
@click=${()=>this.fileInput?.click()}>
|
|
3511
|
+
</randstad-button>
|
|
3512
|
+
|
|
3513
|
+
<input
|
|
3514
|
+
type="file"
|
|
3515
|
+
accept=${this.acceptedFileTypes.join(",")}
|
|
3516
|
+
?multiple=${this.maxFiles>1}
|
|
3517
|
+
?disabled=${t}
|
|
3518
|
+
@change="${this.onFileInputChange}"
|
|
3519
|
+
/>
|
|
3520
|
+
|
|
3521
|
+
${this.helper?i`
|
|
3522
|
+
<p
|
|
3523
|
+
class="helper-description"
|
|
3524
|
+
style=${r}
|
|
3525
|
+
>
|
|
3526
|
+
${this.helper}
|
|
3527
|
+
</p>
|
|
3528
|
+
`:o}
|
|
3529
|
+
|
|
3530
|
+
${this.errorMessage?i`<div class="error-message">${this.errorMessage}</div>`:o}
|
|
3531
|
+
|
|
3532
|
+
${this.files.length>0?i`
|
|
3533
|
+
<div class="file-list-container">
|
|
3534
|
+
<div class="file-list">
|
|
3535
|
+
${this.files.map(((e,t)=>i`
|
|
3536
|
+
<div class="file-item">
|
|
3537
|
+
<span class="file-name">${e.name}</span>
|
|
3538
|
+
|
|
3539
|
+
<randstad-button
|
|
3540
|
+
class="remove-file-button"
|
|
3541
|
+
.variant=${"button-icon"}
|
|
3542
|
+
.iconName=${"trash"}
|
|
3543
|
+
@click=${()=>this.removeFile(t)}
|
|
3544
|
+
?disabled=${this.disabled}
|
|
3545
|
+
>
|
|
3546
|
+
</randstad-button>
|
|
3547
|
+
</div>
|
|
3548
|
+
`))}
|
|
3549
|
+
</div>
|
|
3550
|
+
</div>
|
|
3551
|
+
`:o}
|
|
3552
|
+
</div>
|
|
3553
|
+
`}};a([T({type:Array}),s("design:type",Array)],ni.prototype,"files",void 0),a([T({type:Number}),s("design:type",Object)],ni.prototype,"maxFiles",void 0),a([T({type:Array}),s("design:type",Array)],ni.prototype,"acceptedFileTypes",void 0),a([T({type:Number}),s("design:type",Object)],ni.prototype,"maxFileSize",void 0),a([T({type:Boolean,reflect:!0}),s("design:type",Object)],ni.prototype,"disabled",void 0),a([T({type:String}),s("design:type",String)],ni.prototype,"width",void 0),a([T({type:String}),s("design:type",Object)],ni.prototype,"label",void 0),a([T({type:String}),s("design:type",Object)],ni.prototype,"labelColor",void 0),a([T({type:String}),s("design:type",Object)],ni.prototype,"buttonText",void 0),a([T({type:String}),s("design:type",Object)],ni.prototype,"helper",void 0),a([T({type:String}),s("design:type",String)],ni.prototype,"helperAlign",void 0),a([T({type:Boolean,reflect:!0}),s("design:type",Object)],ni.prototype,"error",void 0),a([T({type:String}),s("design:type",Object)],ni.prototype,"errorMessage",void 0),a([T({type:Boolean}),s("design:type",Object)],ni.prototype,"required",void 0),a([T({type:Boolean}),s("design:type",Object)],ni.prototype,"optional",void 0),a([z('input[type="file"]'),s("design:type",HTMLInputElement)],ni.prototype,"fileInput",void 0),ni=a([l("upload-file")],ni);export{W as AccordionList,V as AccordionPanel,ii as CalendarOverlay,U as CarouselCard,G as Checkbox,J as CustomModal,Z as CustomPopup,Ve as CustomRadio,Ge as CustomStepper,oi as DatePickerComponent,We as FilterableSelect,K as FormGroup,X as IconComponent,ee as ProgressCircle,Y as RandstadButton,H as RandstadForm,Q as RandstadNotice,He as TabsBar,ni as UploadFile,Ke as UploadImage};
|
|
2647
3554
|
//# sourceMappingURL=index.js.map
|