@randstad-uca/design-system 1.0.49 → 1.0.50
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/DatePicker.d.ts +2 -12
- package/dist/components/File.d.ts +4 -13
- package/dist/components/Form.d.ts +2 -15
- package/dist/components/FormGroup.d.ts +2 -8
- package/dist/components/Select.d.ts +6 -16
- package/dist/helpers/BaseControl.d.ts +22 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +542 -709
- package/dist/index.js.map +1 -1
- package/dist/package.json +1 -1
- package/dist/stories/DatePicker.stories.d.ts +12 -0
- package/dist/stories/Form.stories.d.ts +6 -2
- package/dist/stories/Select.stories.d.ts +12 -0
- package/dist/stories/UploadFile.stories.d.ts +12 -0
- package/dist/styles/error.d.ts +1 -0
- package/dist/styles/error.ts +23 -0
- package/dist/styles/mix.d.ts +1 -0
- package/dist/styles/mix.ts +51 -0
- package/dist/styles/tooltip.d.ts +1 -0
- package/dist/styles/tooltip.ts +56 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{LitElement as t,html as e,nothing as i,css as o,isServer as r}from"lit";import{classMap as n}from"lit/directives/class-map.js";function a(t,e,i,o){var r,n=arguments.length,a=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(a=(n<3?r(a):n>3?r(e,i,a):r(e,i))||a);return n>3&&a&&Object.defineProperty(e,i,a),a}function s(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)}"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
|
|
7
|
+
const d=t=>(e,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(t,e)})):customElements.define(t,e)},l=globalThis,c=l.ShadowRoot&&(void 0===l.ShadyCSS||l.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,h=Symbol(),p=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(e,
|
|
12
|
+
*/let u=class{constructor(t,e,i){if(this._$cssResult$=!0,i!==h)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(c&&void 0===t){const i=void 0!==e&&1===e.length;i&&(t=p.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),i&&p.set(e,t))}return t}toString(){return this.cssText}};const b=(t,e)=>{if(c)t.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const i of e){const e=document.createElement("style"),o=l.litNonce;void 0!==o&&e.setAttribute("nonce",o),e.textContent=i.cssText,t.appendChild(e)}},m=c?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new u("string"==typeof t?t:t+"",void 0,h))(e)})(t):t,{is:g,defineProperty:y,getOwnPropertyDescriptor:f,getOwnPropertyNames:v,getOwnPropertySymbols:x,getPrototypeOf:w}=Object,k=globalThis,$=k.trustedTypes,S=$?$.emptyScript:"",C=k.reactiveElementPolyfillSupport,E=(t,e)=>t,D={toAttribute(t,e){switch(e){case Boolean:t=t?S:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},O=(t,e)=>!g(t,e),M={attribute:!0,type:String,converter:D,reflect:!1,useDefault:!1,hasChanged:O};
|
|
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 F extends HTMLElement{static addInitializer(
|
|
17
|
+
*/Symbol.metadata??=Symbol("metadata"),k.litPropertyMetadata??=new WeakMap;class F extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=M){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const i=Symbol(),o=this.getPropertyDescriptor(t,i,e);void 0!==o&&y(this.prototype,t,o)}}static getPropertyDescriptor(t,e,i){const{get:o,set:r}=f(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:o,set(e){const n=o?.call(this);r?.call(this,e),this.requestUpdate(t,n,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??M}static _$Ei(){if(this.hasOwnProperty(E("elementProperties")))return;const t=w(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(E("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(E("properties"))){const t=this.properties,e=[...v(t),...x(t)];for(const i of e)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,i]of e)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const i=this._$Eu(t,e);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(m(t))}else void 0!==t&&e.push(m(t));return e}static _$Eu(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.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((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const i of e.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return b(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()))}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()))}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$ET(t,e){const i=this.constructor.elementProperties.get(t),o=this.constructor._$Eu(t,i);if(void 0!==o&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:D).toAttribute(e,i.type);this._$Em=t,null==r?this.removeAttribute(o):this.setAttribute(o,r),this._$Em=null}}_$AK(t,e){const i=this.constructor,o=i._$Eh.get(t);if(void 0!==o&&this._$Em!==o){const t=i.getPropertyOptions(o),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:D;this._$Em=o,this[o]=r.fromAttribute(e,t.type)??this._$Ej?.get(o)??null,this._$Em=null}}requestUpdate(t,e,i){if(void 0!==t){const o=this.constructor,r=this[t];if(i??=o.getPropertyOptions(t),!((i.hasChanged??O)(r,e)||i.useDefault&&i.reflect&&r===this._$Ej?.get(t)&&!this.hasAttribute(o._$Eu(t,i))))return;this.C(t,e,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:i,reflect:o,wrapped:r},n){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,n??e??this[t]),!0!==r||void 0!==n)||(this._$AL.has(t)||(this.hasUpdated||i||(e=void 0),this._$AL.set(t,e)),!0===o&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,i]of t){const{wrapped:t}=i,o=this[e];!0!==t||this._$AL.has(e)||void 0===o||this.C(e,void 0,i,o)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(e)):this._$EM()}catch(e){throw t=!1,this._$EM(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM()}updated(t){}firstUpdated(t){}}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 P={attribute:!0,type:String,converter:D,reflect:!1,hasChanged:O},j=(t=P,e,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&&((t=Object.create(t)).wrapped=!0),n.set(i.name,t),"accessor"===o){const{name:o}=i;return{set(i){const r=e.get.call(this);e.set.call(this,i),this.requestUpdate(o,r,t)},init(e){return void 0!==e&&this.C(o,void 0,t,e),e}}}if("setter"===o){const{name:o}=i;return function(i){const r=this[o];e.call(this,i),this.requestUpdate(o,r,t)}}throw Error("Unsupported decorator location: "+o)};function T(t){return(e,i)=>"object"==typeof i?j(t,e,i):((t,e,i)=>{const o=e.hasOwnProperty(i);return e.constructor.createProperty(i,t),o?Object.getOwnPropertyDescriptor(e,i):void 0})(t,e,i)}
|
|
24
24
|
/**
|
|
25
25
|
* @license
|
|
26
26
|
* Copyright 2017 Google LLC
|
|
27
27
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
28
|
-
*/function
|
|
28
|
+
*/function z(t){return T({...t,state:!0,attribute:!1})}
|
|
29
29
|
/**
|
|
30
30
|
* @license
|
|
31
31
|
* Copyright 2017 Google LLC
|
|
@@ -36,52 +36,91 @@ const j={attribute:!0,type:String,converter:O,reflect:!1,hasChanged:D},P=(e=j,t,
|
|
|
36
36
|
* Copyright 2017 Google LLC
|
|
37
37
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
38
38
|
*/
|
|
39
|
-
function
|
|
39
|
+
function A(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&"object"!=typeof e&&Object.defineProperty(t,e,i),i))(e,i,{get(){return(e=>e.renderRoot?.querySelector(t)??null)(this)}})}let L=class extends t{constructor(){super(...arguments),this.label="",this.placeholder="",this.labelColor="",this.value="",this.required=!1,this.optional=!1,this.disabled=!1,this.error=!1,this.errorMessage=null,this.helper=null,this.helperAlign="left"}renderLabelContainer(){return e`
|
|
40
|
+
${this.label?e`
|
|
41
|
+
<div class="label-container">
|
|
42
|
+
${this.renderLabel()}
|
|
43
|
+
|
|
44
|
+
${this.renderHelp()}
|
|
45
|
+
</div>
|
|
46
|
+
`:""}
|
|
47
|
+
`}renderLabel(){return e`
|
|
48
|
+
<label class="form-label">
|
|
49
|
+
${this.label}
|
|
50
|
+
${this.required?e`
|
|
51
|
+
<span class="required">*</span>`:this.optional?e` <span class="optional">opcional</span> `:i}
|
|
52
|
+
</label>
|
|
53
|
+
`}renderHelp(){return e`
|
|
54
|
+
${this.help?e`
|
|
55
|
+
<div class="tooltip-wrapper">
|
|
56
|
+
<randstad-icon name="info" size="20px"></randstad-icon>
|
|
57
|
+
|
|
58
|
+
<div class="tooltip">${this.help}</div>
|
|
59
|
+
</div>
|
|
60
|
+
`:this.helpLink?e`
|
|
61
|
+
<a class="tooltip-wrapper" href="${this.helpLink}">
|
|
62
|
+
<randstad-icon name="ayuda" size="20px"></randstad-icon>
|
|
63
|
+
|
|
64
|
+
${this.helpLinkTooltipMessage?e`<div class="tooltip">${this.helpLinkTooltipMessage}</div>`:i}
|
|
65
|
+
</a>
|
|
66
|
+
`:i}
|
|
67
|
+
`}renderError(){return e`
|
|
68
|
+
${this.errorMessage?e`<div class="error-message">${this.errorMessage}</div>`:i}
|
|
69
|
+
`}renderHelper(){const t=`text-align: ${this.helperAlign??"left"};`;return e`
|
|
70
|
+
${this.helper?e`
|
|
71
|
+
<p
|
|
72
|
+
class="helper-description"
|
|
73
|
+
style=${t}
|
|
74
|
+
>
|
|
75
|
+
${this.helper}
|
|
76
|
+
</p>
|
|
77
|
+
`:i}
|
|
78
|
+
`}};a([T({type:String}),s("design:type",Object)],L.prototype,"label",void 0),a([T({type:String}),s("design:type",Object)],L.prototype,"placeholder",void 0),a([T({type:String}),s("design:type",Object)],L.prototype,"labelColor",void 0),a([T(),s("design:type",Object)],L.prototype,"value",void 0),a([T({type:Boolean}),s("design:type",Object)],L.prototype,"required",void 0),a([T({type:Boolean}),s("design:type",Object)],L.prototype,"optional",void 0),a([T({type:Boolean}),s("design:type",Object)],L.prototype,"disabled",void 0),a([T({type:Boolean,reflect:!0}),s("design:type",Object)],L.prototype,"error",void 0),a([T({type:String}),s("design:type",Object)],L.prototype,"errorMessage",void 0),a([T({type:String}),s("design:type",Object)],L.prototype,"helper",void 0),a([T({type:String}),s("design:type",String)],L.prototype,"helperAlign",void 0),a([T({type:String}),s("design:type",String)],L.prototype,"help",void 0),a([T({type:String}),s("design:type",String)],L.prototype,"helpLink",void 0),a([T({type:String}),s("design:type",String)],L.prototype,"helpLinkTooltipMessage",void 0),L=a([d("base-control")],L);const I=o`
|
|
40
79
|
font-family: 'Graphik', sans-serif;
|
|
41
80
|
font-weight: 400;
|
|
42
81
|
font-size: 12px;
|
|
43
82
|
line-height: 15px;
|
|
44
83
|
letter-spacing: 0%;
|
|
45
|
-
`,
|
|
84
|
+
`,_=o`
|
|
46
85
|
font-family: 'Graphik', sans-serif;
|
|
47
86
|
font-weight: 400;
|
|
48
87
|
font-size: 14px;
|
|
49
88
|
line-height: 25px;
|
|
50
89
|
letter-spacing: 0%;
|
|
51
|
-
`,
|
|
90
|
+
`,N=o`
|
|
52
91
|
font-family: 'Graphik', sans-serif;
|
|
53
92
|
font-weight: 400;
|
|
54
93
|
font-size: 16px;
|
|
55
94
|
line-height: 25px;
|
|
56
95
|
letter-spacing: 0%;
|
|
57
|
-
`,
|
|
96
|
+
`,R=o`
|
|
58
97
|
font-family: 'Graphik', sans-serif;
|
|
59
98
|
font-weight: 400;
|
|
60
99
|
font-size: 18px;
|
|
61
100
|
line-height: 30px;
|
|
62
101
|
letter-spacing: 0%;
|
|
63
|
-
`,
|
|
102
|
+
`,B=o`
|
|
64
103
|
font-family: 'Graphik', sans-serif;
|
|
65
104
|
font-weight: 400;
|
|
66
105
|
font-size: 18px;
|
|
67
106
|
line-height: 30px;
|
|
68
107
|
letter-spacing: 0%;
|
|
69
108
|
vertical-align: middle;
|
|
70
|
-
`,
|
|
109
|
+
`,V=o`
|
|
71
110
|
font-family: 'Graphik', sans-serif;
|
|
72
111
|
font-weight: 400;
|
|
73
112
|
font-size: 20px;
|
|
74
113
|
line-height: 30px;
|
|
75
114
|
letter-spacing: -1%;
|
|
76
115
|
vertical-align: middle;
|
|
77
|
-
`,q=
|
|
116
|
+
`,q=o`
|
|
78
117
|
font-family: 'Graphik', sans-serif;
|
|
79
118
|
font-weight: 400;
|
|
80
119
|
font-size: 26px;
|
|
81
120
|
line-height: 30px;
|
|
82
121
|
letter-spacing: -1%;
|
|
83
122
|
vertical-align: middle;
|
|
84
|
-
`;let
|
|
123
|
+
`;let W=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=o`
|
|
85
124
|
:host {
|
|
86
125
|
display: flex;
|
|
87
126
|
flex-direction: column;
|
|
@@ -100,7 +139,7 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
100
139
|
}
|
|
101
140
|
|
|
102
141
|
.title {
|
|
103
|
-
${
|
|
142
|
+
${N}
|
|
104
143
|
color: var(--secondary-color);
|
|
105
144
|
}
|
|
106
145
|
|
|
@@ -145,11 +184,11 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
145
184
|
background-color: var(--primary-color-5);
|
|
146
185
|
}
|
|
147
186
|
}
|
|
148
|
-
`}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.handleResize)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.handleResize)}toggle(){this.isOpen=!this.isOpen}renderIcon(){return this.isOpen?
|
|
187
|
+
`}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.handleResize)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.handleResize)}toggle(){this.isOpen=!this.isOpen}renderIcon(){return this.isOpen?e`<randstad-icon name="arrow_up" size="24px" style="--icon-color: var(--primary-color);"></randstad-icon>`:e`<randstad-icon name="arrow_down" size="24px" style="--icon-color: var(--primary-color);"></randstad-icon>`}render(){return e`
|
|
149
188
|
<div class="header" @click=${this.toggle}>
|
|
150
189
|
<div class="title">${this.title}</div>
|
|
151
190
|
<div class="icon">
|
|
152
|
-
${this.isDesktop?
|
|
191
|
+
${this.isDesktop?e`
|
|
153
192
|
<div class="icon-wrapper">
|
|
154
193
|
${this.renderIcon()}
|
|
155
194
|
</div>
|
|
@@ -159,13 +198,13 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
159
198
|
<div class="content ${this.isOpen?"open":""}">
|
|
160
199
|
<slot></slot>
|
|
161
200
|
</div>
|
|
162
|
-
`}};a([
|
|
201
|
+
`}};a([T({type:String}),s("design:type",Object)],W.prototype,"title",void 0),a([z(),s("design:type",Object)],W.prototype,"isOpen",void 0),a([z(),s("design:type",Object)],W.prototype,"isDesktop",void 0),W=a([d("accordion-panel")],W);let Y=class extends t{static{this.styles=o`
|
|
163
202
|
:host {
|
|
164
203
|
display: flex;
|
|
165
204
|
flex-direction: column;
|
|
166
205
|
gap: 16px;
|
|
167
206
|
}
|
|
168
|
-
`}render(){return
|
|
207
|
+
`}render(){return e`<slot></slot>`}};Y=a([d("accordion-list")],Y);let U=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=o`
|
|
169
208
|
:host {
|
|
170
209
|
display: inline-block;
|
|
171
210
|
}
|
|
@@ -185,12 +224,12 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
185
224
|
}
|
|
186
225
|
|
|
187
226
|
.button-lg {
|
|
188
|
-
${
|
|
227
|
+
${R}
|
|
189
228
|
min-height: 62px;
|
|
190
229
|
}
|
|
191
230
|
|
|
192
231
|
.button-md {
|
|
193
|
-
${
|
|
232
|
+
${N}
|
|
194
233
|
min-height: 57px;
|
|
195
234
|
}
|
|
196
235
|
|
|
@@ -414,29 +453,29 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
414
453
|
cursor: default;
|
|
415
454
|
}
|
|
416
455
|
|
|
417
|
-
`}handleClick(
|
|
456
|
+
`}handleClick(t){if(!this.disabled)if("submit"===this.type){const t=this.closest("form");t&&t.requestSubmit()}else if("reset"===this.type){const t=this.closest("form");t&&t.reset()}else this.idevent&&this.dispatchEvent(new CustomEvent("randstad-button-click",{detail:this.idevent,composed:!0,bubbles:!0,cancelable:!1}))}render(){const t={button:!0,[this.variant]:!0,loader:this.loader,[`button-${this.size}`]:["button-primary","button-secondary","button-tertiary"].includes(this.variant)},i="button-tertiary"===this.variant?"var(--primary-color)":"white";return e`
|
|
418
457
|
<button
|
|
419
458
|
part="button"
|
|
420
459
|
type=${this.type}
|
|
421
|
-
class=${n(
|
|
460
|
+
class=${n(t)}
|
|
422
461
|
?disabled=${this.disabled}
|
|
423
462
|
?aria-busy=${this.loader}
|
|
424
463
|
@click=${this.handleClick}
|
|
425
464
|
>
|
|
426
|
-
${this.loader?
|
|
465
|
+
${this.loader?e`
|
|
427
466
|
<div class="loader">
|
|
428
|
-
<span class="dot" style="background-color: ${
|
|
429
|
-
<span class="dot" style="background-color: ${
|
|
430
|
-
<span class="dot" style="background-color: ${
|
|
467
|
+
<span class="dot" style="background-color: ${i};"></span>
|
|
468
|
+
<span class="dot" style="background-color: ${i};"></span>
|
|
469
|
+
<span class="dot" style="background-color: ${i};"></span>
|
|
431
470
|
</div>
|
|
432
|
-
`:
|
|
433
|
-
${this.iconSrc&&"button-round"===this.variant?
|
|
434
|
-
${this.iconName&&"button-round"!==this.variant&&"left"===this.iconPosition?
|
|
435
|
-
${this.label?
|
|
436
|
-
${this.iconName&&"button-round"!==this.variant&&"right"===this.iconPosition?
|
|
471
|
+
`:e`
|
|
472
|
+
${this.iconSrc&&"button-round"===this.variant?e`<img src=${this.iconSrc} alt="icon" class="button-icon" part="button-icon"/>`:""}
|
|
473
|
+
${this.iconName&&"button-round"!==this.variant&&"left"===this.iconPosition?e`<randstad-icon name=${this.iconName} size="24px"></randstad-icon>`:""}
|
|
474
|
+
${this.label?e`<span part="label">${this.label}</span>`:e`<slot></slot>`}
|
|
475
|
+
${this.iconName&&"button-round"!==this.variant&&"right"===this.iconPosition?e`<randstad-icon name=${this.iconName} size="24px"></randstad-icon>`:""}
|
|
437
476
|
`}
|
|
438
477
|
</button>
|
|
439
|
-
`}};a([
|
|
478
|
+
`}};a([T({type:String}),s("design:type",String)],U.prototype,"variant",void 0),a([T({type:String}),s("design:type",String)],U.prototype,"size",void 0),a([T({type:String}),s("design:type",Object)],U.prototype,"label",void 0),a([T({type:Boolean}),s("design:type",Object)],U.prototype,"loader",void 0),a([T({type:String,attribute:"icon-src"}),s("design:type",String)],U.prototype,"iconSrc",void 0),a([T({type:String}),s("design:type",String)],U.prototype,"iconPosition",void 0),a([T({type:Boolean,reflect:!0}),s("design:type",Boolean)],U.prototype,"disabled",void 0),a([T({type:String}),s("design:type",Object)],U.prototype,"iconName",void 0),a([T({type:String}),s("design:type",String)],U.prototype,"type",void 0),a([T({type:String}),s("design:type",Object)],U.prototype,"idevent",void 0),U=a([d("randstad-button")],U);let H=class extends t{constructor(){super(...arguments),this.img="",this.name="",this.title="",this.description="",this.buttonLabel="Contactanos",this.cardId=""}static{this.styles=o`
|
|
440
479
|
:host {
|
|
441
480
|
display: inline-block;
|
|
442
481
|
font-family: "Graphik", sans-serif;
|
|
@@ -495,7 +534,7 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
495
534
|
}
|
|
496
535
|
|
|
497
536
|
.title {
|
|
498
|
-
${
|
|
537
|
+
${R}
|
|
499
538
|
margin: 0;
|
|
500
539
|
}
|
|
501
540
|
|
|
@@ -515,7 +554,7 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
515
554
|
}
|
|
516
555
|
|
|
517
556
|
.description {
|
|
518
|
-
${
|
|
557
|
+
${_}
|
|
519
558
|
}
|
|
520
559
|
|
|
521
560
|
::part(button) {
|
|
@@ -532,7 +571,7 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
532
571
|
::part(button):active {
|
|
533
572
|
background-color: rgba(255, 255, 255, 0.2);
|
|
534
573
|
}
|
|
535
|
-
`}render(){return
|
|
574
|
+
`}render(){return e`
|
|
536
575
|
<div class="image-container" style="background-image: url(${this.img});">
|
|
537
576
|
<div class="overlay-gradient"></div>
|
|
538
577
|
<div class="overlay-hover"></div>
|
|
@@ -542,25 +581,25 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
542
581
|
</div>
|
|
543
582
|
<div class="details">
|
|
544
583
|
<p class="description">${this.description}</p>
|
|
545
|
-
${this.cardId?
|
|
584
|
+
${this.cardId?e`<randstad-button
|
|
546
585
|
variant="button-tertiary"
|
|
547
586
|
.label=${this.buttonLabel}
|
|
548
587
|
idevent=${this.cardId}
|
|
549
|
-
></randstad-button>`:
|
|
588
|
+
></randstad-button>`:e`<randstad-button
|
|
550
589
|
variant="button-tertiary"
|
|
551
590
|
.label=${this.buttonLabel}
|
|
552
591
|
></randstad-button>`}
|
|
553
592
|
</div>
|
|
554
593
|
</div>
|
|
555
594
|
</div>
|
|
556
|
-
`}};a([
|
|
595
|
+
`}};a([T({type:String}),s("design:type",Object)],H.prototype,"img",void 0),a([T({type:String}),s("design:type",Object)],H.prototype,"name",void 0),a([T({type:String}),s("design:type",Object)],H.prototype,"title",void 0),a([T({type:String}),s("design:type",Object)],H.prototype,"description",void 0),a([T({type:String}),s("design:type",Object)],H.prototype,"buttonLabel",void 0),a([T({type:String}),s("design:type",Object)],H.prototype,"cardId",void 0),H=a([d("carousel-card")],H);let G=class extends t{constructor(){super(...arguments),this.checked=!1,this.error=!1,this.disabled=!1}static{this.styles=o`
|
|
557
596
|
:host {
|
|
558
597
|
display: block;
|
|
559
598
|
max-width: 100%;
|
|
560
599
|
}
|
|
561
600
|
|
|
562
601
|
label {
|
|
563
|
-
${
|
|
602
|
+
${_}
|
|
564
603
|
display: flex;
|
|
565
604
|
align-items: center;
|
|
566
605
|
gap: 8px;
|
|
@@ -652,7 +691,7 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
652
691
|
cursor: default;
|
|
653
692
|
}
|
|
654
693
|
|
|
655
|
-
`}toggleCheck(
|
|
694
|
+
`}toggleCheck(t){this.checked=t.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 e`
|
|
656
695
|
<label class="${this.error?"error":""} ${this.disabled?"disabled":""}">
|
|
657
696
|
<input
|
|
658
697
|
type="checkbox"
|
|
@@ -668,12 +707,128 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
668
707
|
<slot></slot>
|
|
669
708
|
</span>
|
|
670
709
|
</label>
|
|
671
|
-
`}};a([
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
710
|
+
`}};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([d("randstad-checkbox")],G);const K=o`
|
|
711
|
+
.label-container {
|
|
712
|
+
display: flex;
|
|
713
|
+
align-items: center;
|
|
714
|
+
justify-content: space-between;
|
|
715
|
+
gap: 8px;
|
|
716
|
+
}
|
|
717
|
+
|
|
718
|
+
.tooltip-wrapper {
|
|
719
|
+
position: relative;
|
|
720
|
+
display: inline-flex;
|
|
721
|
+
align-items: center;
|
|
722
|
+
}
|
|
723
|
+
|
|
724
|
+
.tooltip {
|
|
725
|
+
position: absolute;
|
|
726
|
+
top: 160%;
|
|
727
|
+
right: 0;
|
|
728
|
+
|
|
729
|
+
background-color: var(--tooltip-background, #0F1941);
|
|
730
|
+
color: var(--tooltip-color, #fff);
|
|
731
|
+
|
|
732
|
+
padding: 8px 12px;
|
|
733
|
+
border-radius: 4px;
|
|
734
|
+
font-size: 14px;
|
|
735
|
+
line-height: 20px;
|
|
736
|
+
|
|
737
|
+
width: 250px;
|
|
738
|
+
max-width: 250px;
|
|
739
|
+
|
|
740
|
+
z-index: 10;
|
|
741
|
+
opacity: 0;
|
|
742
|
+
visibility: hidden;
|
|
743
|
+
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
|
|
744
|
+
}
|
|
745
|
+
|
|
746
|
+
.tooltip::after {
|
|
747
|
+
content: '';
|
|
748
|
+
position: absolute;
|
|
749
|
+
top: -6px;
|
|
750
|
+
right: 4px;
|
|
751
|
+
|
|
752
|
+
width: 0;
|
|
753
|
+
height: 0;
|
|
754
|
+
border-style: solid;
|
|
755
|
+
border-width: 0 6px 6px 6px;
|
|
756
|
+
border-color: transparent transparent var(--tooltip-background, #0F1941) transparent;
|
|
757
|
+
}
|
|
758
|
+
|
|
759
|
+
.tooltip-wrapper:hover .tooltip {
|
|
760
|
+
visibility: visible;
|
|
761
|
+
opacity: 1;
|
|
762
|
+
}
|
|
763
|
+
`,X=o`
|
|
764
|
+
:host {
|
|
765
|
+
display: block;
|
|
766
|
+
font-family: "Graphik", sans-serif;
|
|
767
|
+
color: var(--secondary-randstad-dark-blue, #0f1941);
|
|
768
|
+
width: 100%;
|
|
769
|
+
}
|
|
770
|
+
|
|
771
|
+
.form-label {
|
|
772
|
+
${N}
|
|
773
|
+
display: flex;
|
|
774
|
+
align-items: baseline;
|
|
775
|
+
flex-direction: row;
|
|
776
|
+
gap: 4px;
|
|
777
|
+
color: var(--label-color, var(--secondary-color-80));
|
|
778
|
+
}
|
|
779
|
+
|
|
780
|
+
.input-container {
|
|
781
|
+
position: relative;
|
|
782
|
+
width: 100%;
|
|
783
|
+
max-width: 100%;
|
|
784
|
+
}
|
|
785
|
+
|
|
786
|
+
input::placeholder {
|
|
787
|
+
${R}
|
|
788
|
+
color: var(--secondary-color-40);
|
|
789
|
+
}
|
|
790
|
+
|
|
791
|
+
.helper-description {
|
|
792
|
+
${N}
|
|
793
|
+
color: var(--secondary-color-40);
|
|
794
|
+
margin: 0;
|
|
795
|
+
}
|
|
796
|
+
|
|
797
|
+
.required {
|
|
798
|
+
color: var(--ui-negative);
|
|
799
|
+
}
|
|
800
|
+
|
|
801
|
+
.optional {
|
|
802
|
+
color: var(--secondary-color-60);
|
|
803
|
+
${I}
|
|
804
|
+
}
|
|
805
|
+
|
|
806
|
+
randstad-icon {
|
|
807
|
+
color: var(--primary-color);
|
|
808
|
+
}
|
|
809
|
+
`,Q=o`
|
|
810
|
+
:host([error]) .input-wrapper, .form.error .form-input {
|
|
811
|
+
border: 1px solid var(--ui-negative, red) !important;
|
|
812
|
+
}
|
|
813
|
+
|
|
814
|
+
:host([error]) .input-wrapper:hover, .form.error:hover .form-input:hover {
|
|
815
|
+
box-shadow: 0px 0px 0px 4px #e00f0f1a !important;
|
|
816
|
+
}
|
|
817
|
+
|
|
818
|
+
:host([error]) .input-wrapper.active, .form.error.active .form-input.active {
|
|
819
|
+
border: 1px solid var(--ui-negative, red) !important;
|
|
820
|
+
box-shadow: none !important;
|
|
821
|
+
}
|
|
822
|
+
|
|
823
|
+
.error-message {
|
|
824
|
+
${N}
|
|
825
|
+
color: var(--ui-negative, #E00F0F);
|
|
826
|
+
margin-top: 4px;
|
|
827
|
+
}
|
|
828
|
+
`;let J=class extends L{constructor(){super(...arguments),this.size="md",this.icon=null,this.typing=!1,this.type="text",this.isPasswordVisible=!1,this.cleanButton=!1}static{this.styles=o`
|
|
829
|
+
${X}
|
|
830
|
+
${Q}
|
|
831
|
+
${K}
|
|
677
832
|
|
|
678
833
|
.form {
|
|
679
834
|
display: flex;
|
|
@@ -682,31 +837,8 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
682
837
|
width: 100%;
|
|
683
838
|
}
|
|
684
839
|
|
|
685
|
-
.label-container {
|
|
686
|
-
display: flex;
|
|
687
|
-
align-items: center;
|
|
688
|
-
justify-content: space-between;
|
|
689
|
-
gap: 8px;
|
|
690
|
-
}
|
|
691
|
-
|
|
692
|
-
.form-label {
|
|
693
|
-
${_}
|
|
694
|
-
display: flex;
|
|
695
|
-
align-items: baseline;
|
|
696
|
-
flex-direction: row;
|
|
697
|
-
gap: 4px;
|
|
698
|
-
color: var(--label-color, var(--secondary-color-80));
|
|
699
|
-
}
|
|
700
|
-
|
|
701
|
-
.form-container {
|
|
702
|
-
position: relative;
|
|
703
|
-
display: flex;
|
|
704
|
-
align-items: center;
|
|
705
|
-
width: 100%;
|
|
706
|
-
}
|
|
707
|
-
|
|
708
840
|
.form-input {
|
|
709
|
-
${
|
|
841
|
+
${R}
|
|
710
842
|
padding: 16px;
|
|
711
843
|
border: 1px solid var(--secondary-color-10);
|
|
712
844
|
border-radius: 4px;
|
|
@@ -716,35 +848,11 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
716
848
|
color: var(--secondary-color);
|
|
717
849
|
}
|
|
718
850
|
|
|
719
|
-
.form.error .form-input {
|
|
720
|
-
background-color: var(--ui-negative-5);
|
|
721
|
-
border-color: var(--ui-negative);
|
|
722
|
-
}
|
|
723
|
-
|
|
724
|
-
/* Hover normal (sin error ni foco) */
|
|
725
|
-
.form:not(.error):not(:focus-within) .form-input:hover {
|
|
726
|
-
box-shadow: 0px 0px 0px 4px var(--form-hover-shadow);
|
|
727
|
-
}
|
|
728
|
-
|
|
729
|
-
/* Hover con error (sin foco) */
|
|
730
|
-
.form.error:not(:focus-within) .form-input:hover {
|
|
731
|
-
box-shadow: 0px 0px 0px 4px var(--ui-negative-pink-shadow);
|
|
732
|
-
}
|
|
733
|
-
|
|
734
|
-
.form-input:focus {
|
|
735
|
-
border: 2px solid var(--primary-color)
|
|
736
|
-
}
|
|
737
|
-
|
|
738
851
|
.form.disabled .form-input {
|
|
739
852
|
background-color: var(--secondary-color-10);
|
|
740
853
|
cursor: default;
|
|
741
854
|
}
|
|
742
855
|
|
|
743
|
-
input::placeholder {
|
|
744
|
-
${B}
|
|
745
|
-
color: var(--secondary-color-40);
|
|
746
|
-
}
|
|
747
|
-
|
|
748
856
|
.input-with-button {
|
|
749
857
|
display: flex;
|
|
750
858
|
align-items: center;
|
|
@@ -754,9 +862,9 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
754
862
|
.input-with-button input {
|
|
755
863
|
width: 100%;
|
|
756
864
|
}
|
|
757
|
-
|
|
865
|
+
|
|
758
866
|
.input-with-button input[type="password"]{
|
|
759
|
-
padding-right: 40px;
|
|
867
|
+
padding-right: 40px;
|
|
760
868
|
}
|
|
761
869
|
|
|
762
870
|
.input-with-button button {
|
|
@@ -782,7 +890,7 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
782
890
|
}
|
|
783
891
|
|
|
784
892
|
textarea {
|
|
785
|
-
${
|
|
893
|
+
${R}
|
|
786
894
|
resize: none;
|
|
787
895
|
}
|
|
788
896
|
|
|
@@ -795,21 +903,9 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
795
903
|
background-color: var(--secondary-color-10);
|
|
796
904
|
cursor: default;
|
|
797
905
|
}
|
|
798
|
-
|
|
799
|
-
.helper-description {
|
|
800
|
-
${_}
|
|
801
|
-
color: var(--secondary-color-40);
|
|
802
|
-
margin: 0px;
|
|
803
|
-
}
|
|
804
|
-
|
|
805
|
-
.error-message {
|
|
806
|
-
${_}
|
|
807
|
-
color: var(--ui-negative);
|
|
808
|
-
margin: 0px;
|
|
809
|
-
}
|
|
810
|
-
|
|
906
|
+
|
|
811
907
|
.link-text {
|
|
812
|
-
${
|
|
908
|
+
${N}
|
|
813
909
|
color: var(--primary-color);
|
|
814
910
|
cursor: pointer;
|
|
815
911
|
text-align: end;
|
|
@@ -825,10 +921,6 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
825
921
|
color: var(--secondary-color);
|
|
826
922
|
}
|
|
827
923
|
|
|
828
|
-
randstad-icon {
|
|
829
|
-
color: var(--primary-color);
|
|
830
|
-
}
|
|
831
|
-
|
|
832
924
|
.clean-button {
|
|
833
925
|
position: absolute;
|
|
834
926
|
right: 10px;
|
|
@@ -848,87 +940,20 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
848
940
|
width: 24px;
|
|
849
941
|
height: 24px;
|
|
850
942
|
}
|
|
851
|
-
|
|
852
|
-
// TOOLTIP, NO SE ESTÁ USANDO EN FORMS EN ESTE MOMENTO, PERO SE DEJA POR SI SE NECESITA
|
|
853
|
-
.tooltip-wrapper {
|
|
854
|
-
position: relative;
|
|
855
|
-
display: inline-flex;
|
|
856
|
-
align-items: center;
|
|
857
|
-
}
|
|
858
|
-
|
|
859
|
-
.tooltip {
|
|
860
|
-
visibility: hidden;
|
|
861
|
-
position: absolute;
|
|
862
|
-
top: auto;
|
|
863
|
-
right: 125%;
|
|
864
|
-
left: auto;
|
|
865
|
-
transform: none;
|
|
866
|
-
background-color: #333;
|
|
867
|
-
color: #fff;
|
|
868
|
-
padding: 8px 12px;
|
|
869
|
-
border-radius: 4px;
|
|
870
|
-
font-size: 14px;
|
|
871
|
-
line-height: 20px;
|
|
872
|
-
white-space: nowrap;
|
|
873
|
-
z-index: 10;
|
|
874
|
-
opacity: 0;
|
|
875
|
-
transition: opacity 0.2s ease;
|
|
876
|
-
}
|
|
877
|
-
|
|
878
|
-
.tooltip::after {
|
|
879
|
-
content: '';
|
|
880
|
-
position: absolute;
|
|
881
|
-
right: -6px;
|
|
882
|
-
bottom: 50%;
|
|
883
|
-
transform: translateY(50%);
|
|
884
|
-
width: 0;
|
|
885
|
-
height: 0;
|
|
886
|
-
border-style: solid;
|
|
887
|
-
border-width: 6px 0 6px 6px;
|
|
888
|
-
border-color: transparent transparent transparent #333;
|
|
889
|
-
}
|
|
890
|
-
|
|
891
|
-
.tooltip-wrapper:hover .tooltip {
|
|
892
|
-
visibility: visible;
|
|
893
|
-
opacity: 1;
|
|
894
|
-
}
|
|
895
|
-
|
|
896
|
-
.required {
|
|
897
|
-
color: var(--ui-negative);
|
|
898
|
-
}
|
|
899
|
-
|
|
900
|
-
.optional {
|
|
901
|
-
color: var(--secondary-color-60);
|
|
902
|
-
${I}
|
|
903
|
-
}
|
|
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`
|
|
943
|
+
`}togglePassword(t){this.isPasswordVisible=!this.isPasswordVisible;const e=t.currentTarget.parentElement?.querySelector("input");e&&(e.type=this.isPasswordVisible?"text":"password"),this.requestUpdate()}handleInput(t){const e=t.target.value;void 0!==this.maxLength&&"textarea"!==this.type?this.value=e.slice(0,this.maxLength):this.value=e,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(t){t.preventDefault(),this.linkRoute&&this.dispatchEvent(new CustomEvent("linkClicked",{detail:this.linkRoute,bubbles:!0,composed:!0}))}handleKeyDown(t){if("Enter"===t.key){const t=new Event("submit",{bubbles:!0,composed:!0,cancelable:!0}),e=this.closest("form");e&&e.dispatchEvent(t)}}render(){const t=this.cleanButton&&this.value&&"password"!==this.type&&"textarea"!==this.type,o="textarea"===this.type?`height: ${this.heightTextArea??"30px"}; max-height: ${this.maxHeightTextArea??"30px"}; overflow-y: auto;`:"",r=e`
|
|
905
944
|
${this.labelColor?`--label-color: ${this.labelColor};`:""}
|
|
906
|
-
|
|
945
|
+
`;return e`
|
|
907
946
|
<div
|
|
908
947
|
class="form ${this.error?"error":""} ${this.disabled?"disabled":""}"
|
|
909
948
|
style="${r}"
|
|
910
949
|
>
|
|
911
|
-
${this.
|
|
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}
|
|
950
|
+
${this.renderLabelContainer()}
|
|
926
951
|
|
|
927
952
|
<div class="form-container">
|
|
928
|
-
${"left"===this.icon?
|
|
953
|
+
${"left"===this.icon?e`<span class="icon left"></span>`:i}
|
|
929
954
|
|
|
930
955
|
<div class="input-with-button">
|
|
931
|
-
${"textarea"===this.type?
|
|
956
|
+
${"textarea"===this.type?e`
|
|
932
957
|
<textarea
|
|
933
958
|
class="form-input"
|
|
934
959
|
placeholder=${this.placeholder||""}
|
|
@@ -936,97 +961,80 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
936
961
|
?disabled=${this.disabled}
|
|
937
962
|
@input=${this.handleInput}
|
|
938
963
|
@keydown=${this.handleKeyDown}
|
|
939
|
-
maxlength=${this.maxLength??
|
|
940
|
-
style="${
|
|
964
|
+
maxlength=${this.maxLength??i}
|
|
965
|
+
style="${o}"
|
|
941
966
|
>
|
|
942
|
-
</textarea
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
967
|
+
</textarea>
|
|
968
|
+
`:e`
|
|
969
|
+
<input
|
|
970
|
+
class="form-input"
|
|
971
|
+
type=${"password"!==this.type||this.isPasswordVisible?"text":"password"}
|
|
972
|
+
placeholder=${this.placeholder||""}
|
|
973
|
+
.value=${this.value}
|
|
974
|
+
?disabled=${this.disabled}
|
|
975
|
+
@input=${this.handleInput}
|
|
976
|
+
@keydown=${this.handleKeyDown}
|
|
977
|
+
maxlength=${this.maxLength??i}
|
|
978
|
+
/>
|
|
953
979
|
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
980
|
+
${"password"===this.type?e`
|
|
981
|
+
<button
|
|
982
|
+
type="button"
|
|
983
|
+
class="toggle-password"
|
|
984
|
+
@click=${this.togglePassword}
|
|
985
|
+
>
|
|
986
|
+
${this.isPasswordVisible?e`
|
|
987
|
+
<randstad-icon
|
|
988
|
+
name="eye_crossed"
|
|
989
|
+
size="24px"
|
|
990
|
+
>
|
|
991
|
+
</randstad-icon>
|
|
992
|
+
`:e`
|
|
993
|
+
<randstad-icon
|
|
994
|
+
name="eye"
|
|
995
|
+
size="24px"
|
|
996
|
+
>
|
|
997
|
+
</randstad-icon>`}
|
|
998
|
+
</button>`:i}
|
|
999
|
+
|
|
1000
|
+
${t?e`
|
|
1001
|
+
<button
|
|
1002
|
+
type="button"
|
|
1003
|
+
class="clean-button"
|
|
1004
|
+
@click=${this.handleClear}
|
|
1005
|
+
>
|
|
1006
|
+
<randstad-icon
|
|
1007
|
+
name="close"
|
|
1008
|
+
size="24px"
|
|
1009
|
+
style="--icon-color: var(--primary-color);"
|
|
979
1010
|
>
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
style="--icon-color: var(--primary-color);"
|
|
984
|
-
>
|
|
985
|
-
</randstad-icon>
|
|
986
|
-
</button>`:o}
|
|
987
|
-
`}
|
|
1011
|
+
</randstad-icon>
|
|
1012
|
+
</button>`:i}
|
|
1013
|
+
`}
|
|
988
1014
|
</div>
|
|
989
1015
|
|
|
990
|
-
${"right"===this.icon?
|
|
1016
|
+
${"right"===this.icon?e`<span class="icon right"></span>`:i}
|
|
1017
|
+
|
|
1018
|
+
${this.renderError()}
|
|
991
1019
|
</div>
|
|
992
1020
|
|
|
993
|
-
${this.error?i`
|
|
994
|
-
<p class="error-message">
|
|
995
|
-
${this.errorMessage?this.errorMessage:i`<slot name="error-extended"></slot>`}
|
|
996
|
-
</p>`:o}
|
|
997
1021
|
|
|
998
|
-
${this.linkText&&this.linkRoute?
|
|
1022
|
+
${this.linkText&&this.linkRoute?e`
|
|
999
1023
|
<div style="text-align: end;">
|
|
1000
1024
|
<a class="link-text" @click=${this.handleLinkClick}>
|
|
1001
1025
|
${this.linkText}
|
|
1002
|
-
</a
|
|
1003
|
-
</div>`:
|
|
1026
|
+
</a>
|
|
1027
|
+
</div>`:i}
|
|
1004
1028
|
|
|
1005
|
-
${this.
|
|
1006
|
-
<p
|
|
1007
|
-
class="helper-description"
|
|
1008
|
-
style=${n}
|
|
1009
|
-
>
|
|
1010
|
-
${this.helper}
|
|
1011
|
-
</p>
|
|
1012
|
-
`:o}
|
|
1029
|
+
${this.renderHelper()}
|
|
1013
1030
|
</div>
|
|
1014
|
-
`}};a([
|
|
1031
|
+
`}};a([T({type:String}),s("design:type",String)],J.prototype,"size",void 0),a([T({type:String}),s("design:type",Object)],J.prototype,"icon",void 0),a([T({type:Boolean}),s("design:type",Boolean)],J.prototype,"typing",void 0),a([T({type:String}),s("design:type",String)],J.prototype,"type",void 0),a([T({type:String}),s("design:type",String)],J.prototype,"linkText",void 0),a([T({type:String}),s("design:type",String)],J.prototype,"linkRoute",void 0),a([T({type:Boolean,reflect:!0}),s("design:type",Object)],J.prototype,"isPasswordVisible",void 0),a([T({type:Boolean}),s("design:type",Boolean)],J.prototype,"cleanButton",void 0),a([T({type:Number}),s("design:type",Number)],J.prototype,"maxLength",void 0),a([T({type:String}),s("design:type",String)],J.prototype,"heightTextArea",void 0),a([T({type:String}),s("design:type",String)],J.prototype,"maxHeightTextArea",void 0),J=a([d("randstad-form")],J);let Z=class extends L{static{this.styles=o`
|
|
1032
|
+
${X}
|
|
1033
|
+
${Q}
|
|
1034
|
+
${K}
|
|
1035
|
+
|
|
1015
1036
|
:host {
|
|
1016
|
-
display: flex;
|
|
1017
|
-
flex-direction: column;
|
|
1018
|
-
font-family: 'Graphik', sans-serif;
|
|
1019
1037
|
gap: 8px;
|
|
1020
|
-
width: 100%;
|
|
1021
|
-
}
|
|
1022
|
-
|
|
1023
|
-
.form-label {
|
|
1024
|
-
${_}
|
|
1025
|
-
display: flex;
|
|
1026
|
-
align-items: baseline;
|
|
1027
|
-
flex-direction: row;
|
|
1028
|
-
gap: 4px;
|
|
1029
|
-
color: var(--label-color, var(--secondary-color-80));
|
|
1030
1038
|
}
|
|
1031
1039
|
|
|
1032
1040
|
.fields {
|
|
@@ -1034,38 +1042,17 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1034
1042
|
flex-direction: column;
|
|
1035
1043
|
gap: 16px; /* espaciado entre inputs */
|
|
1036
1044
|
}
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
${_}
|
|
1040
|
-
color: var(--secondary-color-40);
|
|
1041
|
-
}
|
|
1042
|
-
|
|
1043
|
-
.error {
|
|
1044
|
-
${_}
|
|
1045
|
-
color: var(--ui-negative);
|
|
1046
|
-
}
|
|
1047
|
-
|
|
1048
|
-
.required {
|
|
1049
|
-
color: var(--ui-negative);
|
|
1050
|
-
}
|
|
1051
|
-
|
|
1052
|
-
.optional {
|
|
1053
|
-
color: var(--secondary-color-60);
|
|
1054
|
-
${I}
|
|
1055
|
-
}
|
|
1056
|
-
`}render(){return i`
|
|
1057
|
-
<label class="form-label">
|
|
1058
|
-
${this.label}
|
|
1059
|
-
${this.required?i`
|
|
1060
|
-
<span class="required">*</span>`:this.optional?i`<span class="optional">opcional</span>`:o}
|
|
1061
|
-
</label>
|
|
1045
|
+
`}render(){return e`
|
|
1046
|
+
${this.renderLabel()}
|
|
1062
1047
|
|
|
1063
1048
|
<div class="fields">
|
|
1064
1049
|
<slot></slot>
|
|
1065
1050
|
</div>
|
|
1066
1051
|
|
|
1067
|
-
${this.
|
|
1068
|
-
|
|
1052
|
+
${this.renderError()}
|
|
1053
|
+
|
|
1054
|
+
${this.renderHelper()}
|
|
1055
|
+
`}};Z=a([d("randstad-form-group")],Z);class tt extends t{constructor(){super(...arguments),this.name="",this.size="24px"}static{this.styles=o`
|
|
1069
1056
|
:host {
|
|
1070
1057
|
display: inline-flex;
|
|
1071
1058
|
width: var(--icon-size, 24px);
|
|
@@ -1079,14 +1066,14 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1079
1066
|
height: var(--icon-size, 24px);
|
|
1080
1067
|
fill: var(--icon-color, currentColor);
|
|
1081
1068
|
}
|
|
1082
|
-
`}connectedCallback(){super.connectedCallback(),this.style.setProperty("--icon-size",this.size)}updated(
|
|
1069
|
+
`}connectedCallback(){super.connectedCallback(),this.style.setProperty("--icon-size",this.size)}updated(t){t.has("size")&&this.style.setProperty("--icon-size",this.size)}async loadIcon(){try{const t=await fetch(`/assets/icons/${this.name}.svg`);if(!t.ok)throw new Error("Icon not found");const e=await t.text(),i=new DOMParser,o=i.parseFromString(e,"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((t=>t.removeAttribute("fill"))),o.setAttribute("fill","currentColor"),"innerHTML"in this.renderRoot&&(this.renderRoot.innerHTML=""),this.renderRoot.appendChild(o)}catch(t){console.error(`❌ Error cargando icono ${this.name}:`,t),"innerHTML"in this.renderRoot&&(this.renderRoot.innerHTML="<span>⚠️</span>")}}render(){return this.loadIcon(),null}}a([T({type:String}),s("design:type",Object)],tt.prototype,"name",void 0),a([T({type:String}),s("design:type",Object)],tt.prototype,"size",void 0),customElements.define("randstad-icon",tt);let et=class extends t{constructor(){super(...arguments),this.type="informative",this.icon="info",this.message="Este es un mensaje.",this.open=!1}static{this.styles=o`
|
|
1083
1070
|
:host {
|
|
1084
1071
|
display: block;
|
|
1085
1072
|
font-family: 'Graphik', sans-serif;
|
|
1086
1073
|
}
|
|
1087
1074
|
|
|
1088
1075
|
.container {
|
|
1089
|
-
${
|
|
1076
|
+
${N}
|
|
1090
1077
|
display: flex;
|
|
1091
1078
|
align-items: flex-start;
|
|
1092
1079
|
gap: 8px;
|
|
@@ -1127,12 +1114,12 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1127
1114
|
background: var(--ui-informative-10);
|
|
1128
1115
|
--icon-color: var(--ui-informative);
|
|
1129
1116
|
}
|
|
1130
|
-
`}render(){return
|
|
1117
|
+
`}render(){return e`
|
|
1131
1118
|
<div class="container ${this.open?"":"hidden"} ${this.type}">
|
|
1132
1119
|
<randstad-icon class="icon" name="${this.icon}" size="24px" style="color: var(--icon-color);"></randstad-icon>
|
|
1133
1120
|
<span class="message">${this.message}</span>
|
|
1134
1121
|
</div>
|
|
1135
|
-
`}};a([
|
|
1122
|
+
`}};a([T({type:String}),s("design:type",String)],et.prototype,"type",void 0),a([T({type:String}),s("design:type",String)],et.prototype,"icon",void 0),a([T({type:String}),s("design:type",String)],et.prototype,"message",void 0),a([T({type:Boolean}),s("design:type",Boolean)],et.prototype,"open",void 0),et=a([d("randstad-notice")],et);let it=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=o`
|
|
1136
1123
|
:host {
|
|
1137
1124
|
font-family: 'Graphik', sans-serif;
|
|
1138
1125
|
display: none;
|
|
@@ -1244,7 +1231,7 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1244
1231
|
}
|
|
1245
1232
|
|
|
1246
1233
|
.modal-subtitle {
|
|
1247
|
-
${
|
|
1234
|
+
${N}
|
|
1248
1235
|
margin: 0;
|
|
1249
1236
|
color: var(--secondary-color-60);
|
|
1250
1237
|
}
|
|
@@ -1276,7 +1263,7 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1276
1263
|
gap: 16px;
|
|
1277
1264
|
border-top: 1px solid var(--secondary-color-20);
|
|
1278
1265
|
}
|
|
1279
|
-
`}closeModal(){this.dispatchEvent(new CustomEvent("modal-close"))}connectedCallback(){super.connectedCallback(),this.setScrollableMode(),window.addEventListener("resize",this.setScrollableMode)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.setScrollableMode)}getFooterClass(){return!this.isFooterCustom||this.showPrimaryButton||this.showSecondaryButton?this.showPrimaryButton&&this.showSecondaryButton?"two-buttons":"one-button":"footer-custom"}render(){return
|
|
1266
|
+
`}closeModal(){this.dispatchEvent(new CustomEvent("modal-close"))}connectedCallback(){super.connectedCallback(),this.setScrollableMode(),window.addEventListener("resize",this.setScrollableMode)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.setScrollableMode)}getFooterClass(){return!this.isFooterCustom||this.showPrimaryButton||this.showSecondaryButton?this.showPrimaryButton&&this.showSecondaryButton?"two-buttons":"one-button":"footer-custom"}render(){return e`
|
|
1280
1267
|
<div class="overlay" role="dialog" aria-modal="true">
|
|
1281
1268
|
<div class="modal" style="--modal-width: ${this.modalWidth};">
|
|
1282
1269
|
<div class="modal-header">
|
|
@@ -1284,7 +1271,7 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1284
1271
|
<div class="titles-container">
|
|
1285
1272
|
<div class="modal-title">${this.title}</div>
|
|
1286
1273
|
|
|
1287
|
-
${this.subtitle?
|
|
1274
|
+
${this.subtitle?e`<div class="modal-subtitle">${this.subtitle}</div>`:i}
|
|
1288
1275
|
</div>
|
|
1289
1276
|
|
|
1290
1277
|
<button class="modal-close" @click=${this.closeModal} aria-label="Cerrar modal">
|
|
@@ -1292,7 +1279,7 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1292
1279
|
</button>
|
|
1293
1280
|
</div>
|
|
1294
1281
|
|
|
1295
|
-
${this.showNotice?
|
|
1282
|
+
${this.showNotice?e`
|
|
1296
1283
|
<randstad-notice
|
|
1297
1284
|
.open=${!0}
|
|
1298
1285
|
.type=${this.noticeType}
|
|
@@ -1300,7 +1287,7 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1300
1287
|
.message=${this.noticeMessage}
|
|
1301
1288
|
>
|
|
1302
1289
|
</randstad-notice>
|
|
1303
|
-
`:
|
|
1290
|
+
`:i}
|
|
1304
1291
|
</div>
|
|
1305
1292
|
|
|
1306
1293
|
<div class="modal-body ${this.scrollable?"scrollable":""}">
|
|
@@ -1308,9 +1295,9 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1308
1295
|
</div>
|
|
1309
1296
|
|
|
1310
1297
|
<div class="modal-footer ${this.getFooterClass()}">
|
|
1311
|
-
${!this.isFooterCustom||this.showPrimaryButton||this.showSecondaryButton?
|
|
1298
|
+
${!this.isFooterCustom||this.showPrimaryButton||this.showSecondaryButton?i:e` <slot name="footer-custom"></slot> `}
|
|
1312
1299
|
|
|
1313
|
-
${this.showSecondaryButton?
|
|
1300
|
+
${this.showSecondaryButton?e`
|
|
1314
1301
|
<randstad-button
|
|
1315
1302
|
variant="button-secondary"
|
|
1316
1303
|
size="md"
|
|
@@ -1318,8 +1305,8 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1318
1305
|
label=${this.secondaryButtonLabel}
|
|
1319
1306
|
>
|
|
1320
1307
|
</randstad-button>
|
|
1321
|
-
`:
|
|
1322
|
-
${this.showPrimaryButton?
|
|
1308
|
+
`:i}
|
|
1309
|
+
${this.showPrimaryButton?e`
|
|
1323
1310
|
<randstad-button
|
|
1324
1311
|
variant="button-primary"
|
|
1325
1312
|
size="md"
|
|
@@ -1327,11 +1314,11 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1327
1314
|
label=${this.primaryButtonLabel}
|
|
1328
1315
|
>
|
|
1329
1316
|
</randstad-button>
|
|
1330
|
-
`:
|
|
1317
|
+
`:i}
|
|
1331
1318
|
</div>
|
|
1332
1319
|
</div>
|
|
1333
1320
|
</div>
|
|
1334
|
-
`}};a([
|
|
1321
|
+
`}};a([T({type:Boolean,reflect:!0}),s("design:type",Object)],it.prototype,"open",void 0),a([T({type:String}),s("design:type",Object)],it.prototype,"title",void 0),a([T({type:String}),s("design:type",String)],it.prototype,"subtitle",void 0),a([T({type:Boolean}),s("design:type",Object)],it.prototype,"showNotice",void 0),a([T({type:String}),s("design:type",String)],it.prototype,"noticeType",void 0),a([T({type:String}),s("design:type",Object)],it.prototype,"noticeMessage",void 0),a([T({type:String}),s("design:type",Object)],it.prototype,"noticeIcon",void 0),a([T({type:Boolean}),s("design:type",Object)],it.prototype,"showPrimaryButton",void 0),a([T({type:String}),s("design:type",Object)],it.prototype,"primaryButtonLabel",void 0),a([T({type:Boolean}),s("design:type",Object)],it.prototype,"showSecondaryButton",void 0),a([T({type:String}),s("design:type",Object)],it.prototype,"secondaryButtonLabel",void 0),a([T({type:Boolean}),s("design:type",Object)],it.prototype,"isFooterCustom",void 0),a([T({type:String}),s("design:type",Object)],it.prototype,"modalWidth",void 0),a([z(),s("design:type",Object)],it.prototype,"scrollable",void 0),it=a([d("custom-modal")],it);let ot=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=t=>{const e=t.composedPath(),i=this.renderRoot.querySelector(".popup");i&&!e.includes(i)&&(this.dispatchEvent(new CustomEvent("popup-close",{detail:null})),this.open=!1)}}static{this.styles=o`
|
|
1335
1322
|
:host {
|
|
1336
1323
|
display: none;
|
|
1337
1324
|
position: fixed;
|
|
@@ -1393,13 +1380,13 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1393
1380
|
}
|
|
1394
1381
|
|
|
1395
1382
|
.popup-title {
|
|
1396
|
-
${
|
|
1383
|
+
${V}
|
|
1397
1384
|
margin: 0;
|
|
1398
1385
|
color: var(--secondary-color-80);
|
|
1399
1386
|
}
|
|
1400
1387
|
|
|
1401
1388
|
.popup-description {
|
|
1402
|
-
${
|
|
1389
|
+
${N}
|
|
1403
1390
|
margin: 0;
|
|
1404
1391
|
color: var(--secondary-color-60);
|
|
1405
1392
|
}
|
|
@@ -1427,7 +1414,7 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1427
1414
|
}
|
|
1428
1415
|
|
|
1429
1416
|
.action-item {
|
|
1430
|
-
${
|
|
1417
|
+
${B};
|
|
1431
1418
|
display: flex;
|
|
1432
1419
|
align-items: center;
|
|
1433
1420
|
gap: 16px;
|
|
@@ -1452,18 +1439,18 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1452
1439
|
justify-content: center;
|
|
1453
1440
|
}
|
|
1454
1441
|
|
|
1455
|
-
`}firstUpdated(){if(this.open){const
|
|
1442
|
+
`}firstUpdated(){if(this.open){const t=this.renderRoot.querySelector("randstad-button");t&&t.focus()}this.addEventListener("click",this._onBackgroundClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this._onBackgroundClick)}closePopup(t){this.dispatchEvent(new CustomEvent("popup-close",{detail:t})),this.open=!1}render(){return e`
|
|
1456
1443
|
<div
|
|
1457
1444
|
class="popup"
|
|
1458
1445
|
role="dialog"
|
|
1459
1446
|
aria-modal="true"
|
|
1460
|
-
${"default"!==this.type?
|
|
1447
|
+
${"default"!==this.type?e`aria-labelledby="popup-title"`:i}
|
|
1461
1448
|
aria-describedby="popup-description"
|
|
1462
1449
|
>
|
|
1463
|
-
${"stacked"!==this.type&&this.icon?
|
|
1450
|
+
${"stacked"!==this.type&&this.icon?e`<img src="/assets/icons/${this.icon}" alt="" width="56" height="56" />`:i}
|
|
1464
1451
|
|
|
1465
1452
|
<div class="popup-content">
|
|
1466
|
-
${"default"===this.type?
|
|
1453
|
+
${"default"===this.type?e`
|
|
1467
1454
|
<div class="titles-container">
|
|
1468
1455
|
<p id="popup-description" class="popup-description">${this.description}</p>
|
|
1469
1456
|
</div>
|
|
@@ -1475,25 +1462,25 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1475
1462
|
label=${this.buttonText}
|
|
1476
1463
|
></randstad-button>
|
|
1477
1464
|
</div>
|
|
1478
|
-
`:"stacked"===this.type?
|
|
1465
|
+
`:"stacked"===this.type?e`
|
|
1479
1466
|
<div class="popup-actions">
|
|
1480
|
-
${this.stackedActions.map((e
|
|
1467
|
+
${this.stackedActions.map((t=>e`
|
|
1481
1468
|
<div
|
|
1482
1469
|
class="action-item"
|
|
1483
|
-
@click=${()=>this.closePopup(
|
|
1470
|
+
@click=${()=>this.closePopup(t.value)}
|
|
1484
1471
|
>
|
|
1485
1472
|
<div class="icon-circle">
|
|
1486
1473
|
<randstad-icon
|
|
1487
|
-
name=${
|
|
1474
|
+
name=${t.icon}
|
|
1488
1475
|
size="24px"
|
|
1489
1476
|
style="--icon-color: var(--primary-color);"
|
|
1490
1477
|
></randstad-icon>
|
|
1491
1478
|
</div>
|
|
1492
|
-
<span>${
|
|
1479
|
+
<span>${t.label}</span>
|
|
1493
1480
|
</div>
|
|
1494
1481
|
`))}
|
|
1495
1482
|
</div>
|
|
1496
|
-
`:
|
|
1483
|
+
`:e`
|
|
1497
1484
|
<div class="titles-container">
|
|
1498
1485
|
<h2 id="popup-title" class="popup-title">${this.title}</h2>
|
|
1499
1486
|
<p id="popup-description" class="popup-description">${this.description}</p>
|
|
@@ -1515,7 +1502,7 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1515
1502
|
`}
|
|
1516
1503
|
</div>
|
|
1517
1504
|
</div>
|
|
1518
|
-
`}};a([
|
|
1505
|
+
`}};a([T({type:Boolean,reflect:!0}),s("design:type",Object)],ot.prototype,"open",void 0),a([T({type:String}),s("design:type",String)],ot.prototype,"type",void 0),a([T({type:String}),s("design:type",Object)],ot.prototype,"icon",void 0),a([T({type:String}),s("design:type",Object)],ot.prototype,"title",void 0),a([T({type:String}),s("design:type",Object)],ot.prototype,"description",void 0),a([T({type:String}),s("design:type",Object)],ot.prototype,"width",void 0),a([T({type:String}),s("design:type",Object)],ot.prototype,"buttonText",void 0),a([T({type:String}),s("design:type",Object)],ot.prototype,"confirmText",void 0),a([T({type:String}),s("design:type",Object)],ot.prototype,"cancelText",void 0),a([T({type:Array}),s("design:type",Array)],ot.prototype,"stackedActions",void 0),ot=a([d("custom-popup")],ot);let rt=class extends t{constructor(){super(...arguments),this.value=0,this.max=5}static{this.styles=o`
|
|
1519
1506
|
:host {
|
|
1520
1507
|
display: inline-block;
|
|
1521
1508
|
width: 64px;
|
|
@@ -1544,7 +1531,7 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1544
1531
|
stroke: var(--primary-light-blue);
|
|
1545
1532
|
stroke-linecap: round;
|
|
1546
1533
|
}
|
|
1547
|
-
`}render(){const
|
|
1534
|
+
`}render(){const t=2*Math.PI*28,i=Math.max(this.max,1),o=t*(1-Math.min(this.value/i,1));return e`
|
|
1548
1535
|
<svg
|
|
1549
1536
|
viewBox="0 0 64 64"
|
|
1550
1537
|
role="img"
|
|
@@ -1567,7 +1554,7 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1567
1554
|
r="${28}"
|
|
1568
1555
|
stroke-width="${6}"
|
|
1569
1556
|
fill="none"
|
|
1570
|
-
stroke-dasharray="${
|
|
1557
|
+
stroke-dasharray="${t}"
|
|
1571
1558
|
stroke-dashoffset="${o}"
|
|
1572
1559
|
transform="rotate(-90 32 32)"
|
|
1573
1560
|
/>
|
|
@@ -1576,18 +1563,18 @@ function z(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
1576
1563
|
${this.value} de ${this.max}
|
|
1577
1564
|
</text>
|
|
1578
1565
|
</svg>
|
|
1579
|
-
`}};a([
|
|
1566
|
+
`}};a([T({type:Number}),s("design:type",Object)],rt.prototype,"value",void 0),a([T({type:Number}),s("design:type",Object)],rt.prototype,"max",void 0),rt=a([d("progress-circle")],rt);
|
|
1580
1567
|
/**
|
|
1581
1568
|
* @license
|
|
1582
1569
|
* Copyright 2023 Google LLC
|
|
1583
1570
|
* SPDX-License-Identifier: Apache-2.0
|
|
1584
1571
|
*/
|
|
1585
|
-
const
|
|
1572
|
+
const nt=Symbol("attachableController");let at;r||(at=new MutationObserver((t=>{for(const e of t)e.target[nt]?.hostConnected()})));class st{get htmlFor(){return this.host.getAttribute("for")}set htmlFor(t){null===t?this.host.removeAttribute("for"):this.host.setAttribute("for",t)}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(t){t?this.attach(t):this.detach()}constructor(t,e){this.host=t,this.onControlChange=e,this.currentControl=null,t.addController(this),t[nt]=this,at?.observe(t,{attributeFilter:["for"]})}attach(t){t!==this.currentControl&&(this.setCurrentControl(t),this.host.removeAttribute("for"))}detach(){this.setCurrentControl(null),this.host.setAttribute("for","")}hostConnected(){this.setCurrentControl(this.control)}hostDisconnected(){this.setCurrentControl(null)}setCurrentControl(t){this.onControlChange(this.currentControl,t),this.currentControl=t}}
|
|
1586
1573
|
/**
|
|
1587
1574
|
* @license
|
|
1588
1575
|
* Copyright 2021 Google LLC
|
|
1589
1576
|
* SPDX-License-Identifier: Apache-2.0
|
|
1590
|
-
*/const
|
|
1577
|
+
*/const dt=["focusin","focusout","pointerdown"];class lt extends t{constructor(){super(...arguments),this.visible=!1,this.inward=!1,this.attachableController=new st(this,this.onControlChange.bind(this))}get htmlFor(){return this.attachableController.htmlFor}set htmlFor(t){this.attachableController.htmlFor=t}get control(){return this.attachableController.control}set control(t){this.attachableController.control=t}attach(t){this.attachableController.attach(t)}detach(){this.attachableController.detach()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true")}handleEvent(t){if(!t[ct]){switch(t.type){default:return;case"focusin":this.visible=this.control?.matches(":focus-visible")??!1;break;case"focusout":case"pointerdown":this.visible=!1}t[ct]=!0}}onControlChange(t,e){if(!r)for(const i of dt)t?.removeEventListener(i,this),e?.addEventListener(i,this)}update(t){t.has("visible")&&this.dispatchEvent(new Event("visibility-changed")),super.update(t)}}a([T({type:Boolean,reflect:!0})],lt.prototype,"visible",void 0),a([T({type:Boolean,reflect:!0})],lt.prototype,"inward",void 0);const ct=Symbol("handledByFocusRing"),ht=o`: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}}
|
|
1591
1578
|
`
|
|
1592
1579
|
/**
|
|
1593
1580
|
* @license
|
|
@@ -1598,81 +1585,81 @@ const te=Symbol("attachableController");let ie;r||(ie=new MutationObserver((e=>{
|
|
|
1598
1585
|
* @license
|
|
1599
1586
|
* Copyright 2024 Google LLC
|
|
1600
1587
|
* SPDX-License-Identifier: Apache-2.0
|
|
1601
|
-
*/let
|
|
1588
|
+
*/let pt=class extends lt{};pt.styles=[ht],pt=a([d("md-focus-ring")],pt);
|
|
1602
1589
|
/**
|
|
1603
1590
|
* @license
|
|
1604
1591
|
* Copyright 2021 Google LLC
|
|
1605
1592
|
* SPDX-License-Identifier: Apache-2.0
|
|
1606
1593
|
*/
|
|
1607
|
-
const
|
|
1594
|
+
const ut="cubic-bezier(0.2, 0, 0, 1)";
|
|
1608
1595
|
/**
|
|
1609
1596
|
* @license
|
|
1610
1597
|
* Copyright 2022 Google LLC
|
|
1611
1598
|
* SPDX-License-Identifier: Apache-2.0
|
|
1612
|
-
*/var
|
|
1599
|
+
*/var bt;!function(t){t[t.INACTIVE=0]="INACTIVE",t[t.TOUCH_DELAY=1]="TOUCH_DELAY",t[t.HOLDING=2]="HOLDING",t[t.WAITING_FOR_CLICK=3]="WAITING_FOR_CLICK"}(bt||(bt={}));const mt=["click","contextmenu","pointercancel","pointerdown","pointerenter","pointerleave","pointerup"],gt=r?null:window.matchMedia("(forced-colors: active)");class yt extends t{constructor(){super(...arguments),this.disabled=!1,this.hovered=!1,this.pressed=!1,this.rippleSize="",this.rippleScale="",this.initialSize=0,this.state=bt.INACTIVE,this.checkBoundsAfterContextMenu=!1,this.attachableController=new st(this,this.onControlChange.bind(this))}get htmlFor(){return this.attachableController.htmlFor}set htmlFor(t){this.attachableController.htmlFor=t}get control(){return this.attachableController.control}set control(t){this.attachableController.control=t}attach(t){this.attachableController.attach(t)}detach(){this.attachableController.detach()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true")}render(){const t={hovered:this.hovered,pressed:this.pressed};return e`<div class="surface ${n(t)}"></div>`}update(t){t.has("disabled")&&this.disabled&&(this.hovered=!1,this.pressed=!1),super.update(t)}handlePointerenter(t){this.shouldReactToEvent(t)&&(this.hovered=!0)}handlePointerleave(t){this.shouldReactToEvent(t)&&(this.hovered=!1,this.state!==bt.INACTIVE&&this.endPressAnimation())}handlePointerup(t){if(this.shouldReactToEvent(t)){if(this.state!==bt.HOLDING)return this.state===bt.TOUCH_DELAY?(this.state=bt.WAITING_FOR_CLICK,void this.startPressAnimation(this.rippleStartEvent)):void 0;this.state=bt.WAITING_FOR_CLICK}}async handlePointerdown(t){if(this.shouldReactToEvent(t)){if(this.rippleStartEvent=t,!this.isTouch(t))return this.state=bt.WAITING_FOR_CLICK,void this.startPressAnimation(t);this.checkBoundsAfterContextMenu&&!this.inBounds(t)||(this.checkBoundsAfterContextMenu=!1,this.state=bt.TOUCH_DELAY,await new Promise((t=>{setTimeout(t,150)})),this.state===bt.TOUCH_DELAY&&(this.state=bt.HOLDING,this.startPressAnimation(t)))}}handleClick(){this.disabled||(this.state!==bt.WAITING_FOR_CLICK?this.state===bt.INACTIVE&&(this.startPressAnimation(),this.endPressAnimation()):this.endPressAnimation())}handlePointercancel(t){this.shouldReactToEvent(t)&&this.endPressAnimation()}handleContextmenu(){this.disabled||(this.checkBoundsAfterContextMenu=!0,this.endPressAnimation())}determineRippleSize(){const{height:t,width:e}=this.getBoundingClientRect(),i=Math.max(t,e),o=Math.max(.35*i,75),r=Math.floor(.2*i),n=Math.sqrt(e**2+t**2)+10;this.initialSize=r,this.rippleScale=""+(n+o)/r,this.rippleSize=`${r}px`}getNormalizedPointerEventCoords(t){const{scrollX:e,scrollY:i}=window,{left:o,top:r}=this.getBoundingClientRect(),n=e+o,a=i+r,{pageX:s,pageY:d}=t;return{x:s-n,y:d-a}}getTranslationCoordinates(t){const{height:e,width:i}=this.getBoundingClientRect(),o={x:(i-this.initialSize)/2,y:(e-this.initialSize)/2};let r;return r=t instanceof PointerEvent?this.getNormalizedPointerEventCoords(t):{x:i/2,y:e/2},r={x:r.x-this.initialSize/2,y:r.y-this.initialSize/2},{startPoint:r,endPoint:o}}startPressAnimation(t){if(!this.mdRoot)return;this.pressed=!0,this.growAnimation?.cancel(),this.determineRippleSize();const{startPoint:e,endPoint:i}=this.getTranslationCoordinates(t),o=`${e.x}px, ${e.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:ut,fill:"forwards"})}async endPressAnimation(){this.rippleStartEvent=void 0,this.state=bt.INACTIVE;const t=this.growAnimation;let e=1/0;"number"==typeof t?.currentTime?e=t.currentTime:t?.currentTime&&(e=t.currentTime.to("ms").value),e>=225?this.pressed=!1:(await new Promise((t=>{setTimeout(t,225-e)})),this.growAnimation===t&&(this.pressed=!1))}shouldReactToEvent(t){if(this.disabled||!t.isPrimary)return!1;if(this.rippleStartEvent&&this.rippleStartEvent.pointerId!==t.pointerId)return!1;if("pointerenter"===t.type||"pointerleave"===t.type)return!this.isTouch(t);const e=1===t.buttons;return this.isTouch(t)||e}inBounds({x:t,y:e}){const{top:i,left:o,bottom:r,right:n}=this.getBoundingClientRect();return t>=o&&t<=n&&e>=i&&e<=r}isTouch({pointerType:t}){return"touch"===t}async handleEvent(t){if(!gt?.matches)switch(t.type){case"click":this.handleClick();break;case"contextmenu":this.handleContextmenu();break;case"pointercancel":this.handlePointercancel(t);break;case"pointerdown":await this.handlePointerdown(t);break;case"pointerenter":this.handlePointerenter(t);break;case"pointerleave":this.handlePointerleave(t);break;case"pointerup":this.handlePointerup(t)}}onControlChange(t,e){if(!r)for(const i of mt)t?.removeEventListener(i,this),e?.addEventListener(i,this)}}a([T({type:Boolean,reflect:!0})],yt.prototype,"disabled",void 0),a([z()],yt.prototype,"hovered",void 0),a([z()],yt.prototype,"pressed",void 0),a([A(".surface")],yt.prototype,"mdRoot",void 0);
|
|
1613
1600
|
/**
|
|
1614
1601
|
* @license
|
|
1615
1602
|
* Copyright 2024 Google LLC
|
|
1616
1603
|
* SPDX-License-Identifier: Apache-2.0
|
|
1617
1604
|
*/
|
|
1618
|
-
const
|
|
1605
|
+
const ft=o`: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}
|
|
1619
1606
|
`
|
|
1620
1607
|
/**
|
|
1621
1608
|
* @license
|
|
1622
1609
|
* Copyright 2022 Google LLC
|
|
1623
1610
|
* SPDX-License-Identifier: Apache-2.0
|
|
1624
|
-
*/;let
|
|
1611
|
+
*/;let vt=class extends yt{};
|
|
1625
1612
|
/**
|
|
1626
1613
|
* @license
|
|
1627
1614
|
* Copyright 2021 Google LLC
|
|
1628
1615
|
* SPDX-License-Identifier: Apache-2.0
|
|
1629
1616
|
*/
|
|
1630
|
-
function
|
|
1617
|
+
function xt(t){return t.currentTarget===t.target&&(t.composedPath()[0]===t.target&&(!t.target.disabled&&!function(t){const e=wt;e&&(t.preventDefault(),t.stopImmediatePropagation());return async function(){wt=!0,await null,wt=!1}
|
|
1631
1618
|
/**
|
|
1632
1619
|
* @license
|
|
1633
1620
|
* Copyright 2023 Google LLC
|
|
1634
1621
|
* SPDX-License-Identifier: Apache-2.0
|
|
1635
|
-
*/(),
|
|
1622
|
+
*/(),e}(t)))}vt.styles=[ft],vt=a([d("md-ripple")],vt);let wt=!1;const kt=Symbol("internals"),$t=Symbol("privateInternals");
|
|
1636
1623
|
/**
|
|
1637
1624
|
* @license
|
|
1638
1625
|
* Copyright 2023 Google LLC
|
|
1639
1626
|
* SPDX-License-Identifier: Apache-2.0
|
|
1640
1627
|
*/
|
|
1641
|
-
const
|
|
1628
|
+
const St=Symbol("createValidator"),Ct=Symbol("getValidityAnchor"),Et=Symbol("privateValidator"),Dt=Symbol("privateSyncValidity"),Ot=Symbol("privateCustomValidationMessage");
|
|
1642
1629
|
/**
|
|
1643
1630
|
* @license
|
|
1644
1631
|
* Copyright 2023 Google LLC
|
|
1645
1632
|
* SPDX-License-Identifier: Apache-2.0
|
|
1646
1633
|
*/
|
|
1647
|
-
const
|
|
1634
|
+
const Mt=Symbol("isFocusable"),Ft=Symbol("privateIsFocusable"),Pt=Symbol("externalTabIndex"),jt=Symbol("isUpdatingTabIndex"),Tt=Symbol("updateTabIndex");
|
|
1648
1635
|
/**
|
|
1649
1636
|
* @license
|
|
1650
1637
|
* Copyright 2023 Google LLC
|
|
1651
1638
|
* SPDX-License-Identifier: Apache-2.0
|
|
1652
1639
|
*/
|
|
1653
|
-
const
|
|
1640
|
+
const zt=Symbol("getFormValue"),At=Symbol("getFormState");
|
|
1654
1641
|
/**
|
|
1655
1642
|
* @license
|
|
1656
1643
|
* Copyright 2023 Google LLC
|
|
1657
1644
|
* SPDX-License-Identifier: Apache-2.0
|
|
1658
1645
|
*/
|
|
1659
|
-
class
|
|
1646
|
+
class Lt{constructor(t){this.getCurrentState=t,this.currentValidity={validity:{},validationMessage:""}}getValidity(){const t=this.getCurrentState();if(!(!this.prevState||!this.equals(this.prevState,t)))return this.currentValidity;const{validity:e,validationMessage:i}=this.computeValidity(t);return this.prevState=this.copy(t),this.currentValidity={validationMessage:i,validity:{badInput:e.badInput,customError:e.customError,patternMismatch:e.patternMismatch,rangeOverflow:e.rangeOverflow,rangeUnderflow:e.rangeUnderflow,stepMismatch:e.stepMismatch,tooLong:e.tooLong,tooShort:e.tooShort,typeMismatch:e.typeMismatch,valueMissing:e.valueMissing}},this.currentValidity}}
|
|
1660
1647
|
/**
|
|
1661
1648
|
* @license
|
|
1662
1649
|
* Copyright 2023 Google LLC
|
|
1663
1650
|
* SPDX-License-Identifier: Apache-2.0
|
|
1664
|
-
*/class
|
|
1651
|
+
*/class It extends Lt{computeValidity(t){this.radioElement||(this.radioElement=document.createElement("input"),this.radioElement.type="radio",this.radioElement.name="group");let e=!1,i=!1;for(const{checked:o,required:r}of t)r&&(e=!0),o&&(i=!0);return this.radioElement.checked=i,this.radioElement.required=e,{validity:{valueMissing:e&&!i},validationMessage:this.radioElement.validationMessage}}equals(t,e){if(t.length!==e.length)return!1;for(let i=0;i<t.length;i++){const o=t[i],r=e[i];if(o.checked!==r.checked||o.required!==r.required)return!1}return!0}copy(t){return t.map((({checked:t,required:e})=>({checked:t,required:e})))}}
|
|
1665
1652
|
/**
|
|
1666
1653
|
* @license
|
|
1667
1654
|
* Copyright 2022 Google LLC
|
|
1668
1655
|
* SPDX-License-Identifier: Apache-2.0
|
|
1669
|
-
*/class
|
|
1656
|
+
*/class _t{get controls(){const t=this.host.getAttribute("name");return t&&this.root&&this.host.isConnected?Array.from(this.root.querySelectorAll(`[name="${t}"]`)):[this.host]}constructor(t){this.host=t,this.focused=!1,this.root=null,this.handleFocusIn=()=>{this.focused=!0,this.updateTabIndices()},this.handleFocusOut=()=>{this.focused=!1,this.updateTabIndices()},this.handleKeyDown=t=>{const e="ArrowDown"===t.key,i="ArrowUp"===t.key,o="ArrowLeft"===t.key,r="ArrowRight"===t.key;if(!(o||r||e||i))return;const n=this.controls;if(!n.length)return;t.preventDefault();const a="rtl"===getComputedStyle(this.host).direction?o||e:r||e,s=n.indexOf(this.host);let d=a?s+1:s-1;for(;d!==s;){d>=n.length?d=0:d<0&&(d=n.length-1);const t=n[d];if(!t.hasAttribute("disabled")){for(const e of n)e!==t&&(e.checked=!1,e.tabIndex=-1,e.blur());t.checked=!0,t.tabIndex=0,t.focus(),t.dispatchEvent(new Event("change",{bubbles:!0}));break}a?d++:d--}}}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 t of this.controls)t!==this.host&&(t.checked=!1)}updateTabIndices(){const t=this.controls,e=t.find((t=>t.checked));if(e||this.focused){const i=e||this.host;i.tabIndex=0;for(const e of t)e!==i&&(e.tabIndex=-1)}else for(const e of t)e.tabIndex=0}}
|
|
1670
1657
|
/**
|
|
1671
1658
|
* @license
|
|
1672
1659
|
* Copyright 2018 Google LLC
|
|
1673
1660
|
* SPDX-License-Identifier: Apache-2.0
|
|
1674
|
-
*/var
|
|
1675
|
-
<div class="container ${n(
|
|
1661
|
+
*/var Nt;const Rt=Symbol("checked");let Bt=0;const Vt=function(t){var e;class i extends t{constructor(){super(...arguments),this[e]=""}get validity(){return this[Dt](),this[kt].validity}get validationMessage(){return this[Dt](),this[kt].validationMessage}get willValidate(){return this[Dt](),this[kt].willValidate}checkValidity(){return this[Dt](),this[kt].checkValidity()}reportValidity(){return this[Dt](),this[kt].reportValidity()}setCustomValidity(t){this[Ot]=t,this[Dt]()}requestUpdate(t,e,i){super.requestUpdate(t,e,i),this[Dt]()}firstUpdated(t){super.firstUpdated(t),this[Dt]()}[(e=Ot,Dt)](){if(r)return;this[Et]||(this[Et]=this[St]());const{validity:t,validationMessage:e}=this[Et].getValidity(),i=!!this[Ot],o=this[Ot]||e;this[kt].setValidity({...t,customError:i},o,this[Ct]()??void 0)}[St](){throw new Error("Implement [createValidator]")}[Ct](){throw new Error("Implement [getValidityAnchor]")}}return i}(function(t){class e extends t{get form(){return this[kt].form}get labels(){return this[kt].labels}get name(){return this.getAttribute("name")??""}set name(t){this.setAttribute("name",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}attributeChangedCallback(t,e,i){if("name"!==t&&"disabled"!==t)super.attributeChangedCallback(t,e,i);else{const i="disabled"===t?null!==e:e;this.requestUpdate(t,i)}}requestUpdate(t,e,i){super.requestUpdate(t,e,i),this[kt].setFormValue(this[zt](),this[At]())}[zt](){throw new Error("Implement [getFormValue]")}[At](){return this[zt]()}formDisabledCallback(t){this.disabled=t}}return e.formAssociated=!0,a([T({noAccessor:!0})],e.prototype,"name",null),a([T({type:Boolean,noAccessor:!0})],e.prototype,"disabled",null),e}((qt=function(t){var e,i,o;class r extends t{constructor(){super(...arguments),this[e]=!0,this[i]=null,this[o]=!1}get[Mt](){return this[Ft]}set[Mt](t){this[Mt]!==t&&(this[Ft]=t,this[Tt]())}connectedCallback(){super.connectedCallback(),this[Tt]()}attributeChangedCallback(t,e,i){if("tabindex"===t){if(this.requestUpdate("tabIndex",Number(e??-1)),!this[jt])return this.hasAttribute("tabindex")?void(this[Pt]=this.tabIndex):(this[Pt]=null,void this[Tt]())}else super.attributeChangedCallback(t,e,i)}[(e=Ft,i=Pt,o=jt,Tt)](){const t=this[Mt]?0:-1,e=this[Pt]??t;this[jt]=!0,this.tabIndex=e,this[jt]=!1}}return a([T({noAccessor:!0})],r.prototype,"tabIndex",void 0),r}(t),class extends qt{get[kt](){return this[$t]||(this[$t]=this.attachInternals()),this[$t]}})));var qt;class Wt extends Vt{get checked(){return this[Rt]}set checked(t){const e=this.checked;e!==t&&(this[Rt]=t,this.requestUpdate("checked",e),this.selectionController.handleCheckedChange())}constructor(){super(),this.maskId="cutout"+ ++Bt,this[Nt]=!1,this.required=!1,this.value="on",this.selectionController=new _t(this),this.addController(this.selectionController),r||(this[kt].role="radio",this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.handleKeydown.bind(this)))}render(){const t={checked:this.checked};return e`
|
|
1662
|
+
<div class="container ${n(t)}" aria-hidden="true">
|
|
1676
1663
|
<md-ripple
|
|
1677
1664
|
part="ripple"
|
|
1678
1665
|
.control=${this}
|
|
@@ -1694,19 +1681,19 @@ class Pe{constructor(e){this.getCurrentState=e,this.currentValidity={validity:{}
|
|
|
1694
1681
|
|
|
1695
1682
|
<div class="touch-target"></div>
|
|
1696
1683
|
</div>
|
|
1697
|
-
`}updated(){this[
|
|
1684
|
+
`}updated(){this[kt].ariaChecked=String(this.checked)}async handleClick(t){this.disabled||(await 0,t.defaultPrevented||(xt(t)&&this.focus(),this.checked=!0,this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))))}async handleKeydown(t){await 0," "!==t.key||t.defaultPrevented||this.click()}[(Nt=Rt,zt)](){return this.checked?this.value:null}[At](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute("checked")}formStateRestoreCallback(t){this.checked="true"===t}[St](){return new It((()=>this.selectionController?this.selectionController.controls:[this]))}[Ct](){return this.container}}a([T({type:Boolean})],Wt.prototype,"checked",null),a([T({type:Boolean})],Wt.prototype,"required",void 0),a([T()],Wt.prototype,"value",void 0),a([A(".container")],Wt.prototype,"container",void 0);
|
|
1698
1685
|
/**
|
|
1699
1686
|
* @license
|
|
1700
1687
|
* Copyright 2024 Google LLC
|
|
1701
1688
|
* SPDX-License-Identifier: Apache-2.0
|
|
1702
1689
|
*/
|
|
1703
|
-
const
|
|
1690
|
+
const Yt=o`@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}}}
|
|
1704
1691
|
`
|
|
1705
1692
|
/**
|
|
1706
1693
|
* @license
|
|
1707
1694
|
* Copyright 2022 Google LLC
|
|
1708
1695
|
* SPDX-License-Identifier: Apache-2.0
|
|
1709
|
-
*/;let
|
|
1696
|
+
*/;let Ut=class extends Wt{};Ut.styles=[Yt],Ut=a([d("md-radio")],Ut);let Ht=class extends t{constructor(){super(...arguments),this.name="radio-group",this.checked=!1,this.disabled=!1,this.error=!1}static{this.styles=o`
|
|
1710
1697
|
:host {
|
|
1711
1698
|
font-family: "Graphik", sans-serif;
|
|
1712
1699
|
}
|
|
@@ -1755,30 +1742,24 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
1755
1742
|
background: var(--secondary-color-20);
|
|
1756
1743
|
border: 1px solid var(--secondary-color-20);
|
|
1757
1744
|
}
|
|
1758
|
-
`}render(){const
|
|
1745
|
+
`}render(){const t=[this.checked?"checked":"",this.error?"error":"",this.disabled?"disabled":""].join(" ");return e`
|
|
1759
1746
|
<label class="radio-container">
|
|
1760
1747
|
<md-radio
|
|
1761
1748
|
name=${this.name}
|
|
1762
|
-
class=${
|
|
1749
|
+
class=${t}
|
|
1763
1750
|
?checked=${this.checked}
|
|
1764
1751
|
?disabled=${this.disabled}
|
|
1765
1752
|
></md-radio>
|
|
1766
1753
|
<span>${this.checked?"On":"Off"} ${this.error?"Error":""}</span>
|
|
1767
1754
|
</label>
|
|
1768
|
-
`}};a([
|
|
1769
|
-
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
width: 100%;
|
|
1773
|
-
}
|
|
1774
|
-
|
|
1775
|
-
/* --- Error Styles --- */
|
|
1776
|
-
:host([error]) .input-wrapper {
|
|
1777
|
-
border: 1px solid var(--ui-negative, red) !important;
|
|
1778
|
-
}
|
|
1755
|
+
`}};a([T({type:String}),s("design:type",Object)],Ht.prototype,"name",void 0),a([T({type:Boolean}),s("design:type",Object)],Ht.prototype,"checked",void 0),a([T({type:Boolean}),s("design:type",Object)],Ht.prototype,"disabled",void 0),a([T({type:Boolean}),s("design:type",Object)],Ht.prototype,"error",void 0),Ht=a([d("custom-radio")],Ht);let Gt=class extends L{constructor(){super(...arguments),this.value="",this.defaultValue="",this.options=[],this.filterable=!0,this.isMobile=!1,this.highlightedIndex=-1,this._isCleared=!1,this.filteredOptions=[],this.filterValue="",this.isOpen=!1,this.mobileFilterValue="",this.debounceTimeout=null,this.updateResponsiveModeBound=this.updateResponsiveMode.bind(this)}static{this.styles=o`
|
|
1756
|
+
${X}
|
|
1757
|
+
${Q}
|
|
1758
|
+
${K}
|
|
1779
1759
|
|
|
1760
|
+
/* --- Own Error Styles --- */
|
|
1780
1761
|
:host([error]) .input-container:not(.open) .input-wrapper:hover {
|
|
1781
|
-
box-shadow: 0px 0px 0px 4px #E00F0F1A;
|
|
1762
|
+
box-shadow: 0px 0px 0px 4px #E00F0F1A !important;
|
|
1782
1763
|
}
|
|
1783
1764
|
|
|
1784
1765
|
:host([error]) .input-container.open:not(.mobile) .input-wrapper {
|
|
@@ -1794,13 +1775,12 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
1794
1775
|
border-radius: 0 0 4px 4px;
|
|
1795
1776
|
}
|
|
1796
1777
|
|
|
1797
|
-
|
|
1798
|
-
|
|
1799
|
-
color: var(--
|
|
1800
|
-
|
|
1778
|
+
/* Estilos para el estado disabled */
|
|
1779
|
+
input-wrapper.disabled, .input-wrapper.disabled .filter-input, .input-wrapper.disabled .filter-fake {
|
|
1780
|
+
background-color: var(--secondary-color-10);
|
|
1781
|
+
cursor: default;
|
|
1801
1782
|
}
|
|
1802
1783
|
|
|
1803
|
-
/* --- General & Helper Styles --- */
|
|
1804
1784
|
.select-container {
|
|
1805
1785
|
display: flex;
|
|
1806
1786
|
flex-direction: column;
|
|
@@ -1808,42 +1788,6 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
1808
1788
|
width: 100%;
|
|
1809
1789
|
}
|
|
1810
1790
|
|
|
1811
|
-
.label-container {
|
|
1812
|
-
display: flex;
|
|
1813
|
-
align-items: center;
|
|
1814
|
-
justify-content: space-between;
|
|
1815
|
-
gap: 8px;
|
|
1816
|
-
}
|
|
1817
|
-
|
|
1818
|
-
.form-label {
|
|
1819
|
-
${_}
|
|
1820
|
-
display: flex;
|
|
1821
|
-
align-items: baseline;
|
|
1822
|
-
flex-direction: row;
|
|
1823
|
-
gap: 4px;
|
|
1824
|
-
color: var(--label-color, var(--secondary-color-80));
|
|
1825
|
-
}
|
|
1826
|
-
|
|
1827
|
-
.helper-description {
|
|
1828
|
-
${_}
|
|
1829
|
-
color: var(--secondary-color-40);
|
|
1830
|
-
margin: 0;
|
|
1831
|
-
}
|
|
1832
|
-
|
|
1833
|
-
.required {
|
|
1834
|
-
color: var(--ui-negative);
|
|
1835
|
-
}
|
|
1836
|
-
|
|
1837
|
-
.optional {
|
|
1838
|
-
color: var(--secondary-color-60);
|
|
1839
|
-
${I}
|
|
1840
|
-
}
|
|
1841
|
-
|
|
1842
|
-
.input-container {
|
|
1843
|
-
position: relative;
|
|
1844
|
-
width: 100%;
|
|
1845
|
-
}
|
|
1846
|
-
|
|
1847
1791
|
.input-container.focused:not(.open):not(.mobile) .input-wrapper {
|
|
1848
1792
|
border: 1px solid var(--primary-color);
|
|
1849
1793
|
border-radius: 4px;
|
|
@@ -1903,7 +1847,7 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
1903
1847
|
}
|
|
1904
1848
|
|
|
1905
1849
|
.filter-input {
|
|
1906
|
-
${
|
|
1850
|
+
${R};
|
|
1907
1851
|
padding: 16px;
|
|
1908
1852
|
padding-right: 40px;
|
|
1909
1853
|
border: none;
|
|
@@ -1924,7 +1868,7 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
1924
1868
|
}
|
|
1925
1869
|
|
|
1926
1870
|
.filter-input::placeholder {
|
|
1927
|
-
${
|
|
1871
|
+
${R};
|
|
1928
1872
|
color: var(--secondary-color-40);
|
|
1929
1873
|
}
|
|
1930
1874
|
|
|
@@ -1969,7 +1913,7 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
1969
1913
|
}
|
|
1970
1914
|
|
|
1971
1915
|
.options-list li {
|
|
1972
|
-
${
|
|
1916
|
+
${R};
|
|
1973
1917
|
padding: 8px 16px 8px 16px;
|
|
1974
1918
|
cursor: pointer;
|
|
1975
1919
|
color: var(--secondary-color-80);
|
|
@@ -2040,7 +1984,7 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2040
1984
|
}
|
|
2041
1985
|
|
|
2042
1986
|
.filter-fake {
|
|
2043
|
-
${
|
|
1987
|
+
${R};
|
|
2044
1988
|
padding: 15px;
|
|
2045
1989
|
padding-right: 40px;
|
|
2046
1990
|
width: 100%;
|
|
@@ -2127,114 +2071,109 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2127
2071
|
margin-right: 8px;
|
|
2128
2072
|
flex-shrink: 0;
|
|
2129
2073
|
}
|
|
2130
|
-
`}update(
|
|
2074
|
+
`}update(t){if(t.has("options")&&(this.filteredOptions=[...this.options]),t.has("defaultValue")||t.has("options")||t.has("value")){if(this._isCleared)return void super.update(t);const e=this.value||this.defaultValue,i=this.options.find((t=>"string"==typeof t?t===e:t.value===e));i?(this.filterValue="string"==typeof i?i:i.label,this.value="string"==typeof i?i:i.value):(this.filterValue="",this.value="")}super.update(t)}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(t){this.isMobile&&(this.mobileFilterValue=""),this.disabled||(this.isOpen=!this.isOpen,this.requestUpdate())}handleInput(t){if(!this.filterable)return;this._isCleared=!1;const e=t.target.value,i=this.maxLength?e.slice(0,this.maxLength).toLowerCase():e.toLowerCase();this.filterValue=i,this.value="",this.filteredOptions=this.options.filter((t=>("string"==typeof t?t:t.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(t){this._isCleared=!1;const e=t.target.value,i=this.maxLength?e.slice(0,this.maxLength).toLowerCase():e.toLowerCase();this.mobileFilterValue=i,this.value="",this.filteredOptions=this.options.filter((t=>("string"==typeof t?t:t.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(t){this._isCleared=!1;const e="string"==typeof t?t:t.value;this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:e},bubbles:!0,composed:!0})),this.filterValue="string"==typeof t?t:t.label,this.value=e,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(t){const e=t.target;e instanceof Node&&(this.contains(e)||(this.isOpen=!1,this.requestUpdate()))}handleKeyDown(t){const{key:e}=t;if(!this.isOpen&&("Enter"===e||" "===e))return t.preventDefault(),void(this.isOpen=!0);if(this.isOpen)if("ArrowDown"===e)t.preventDefault(),this.highlightedIndex=Math.min(this.highlightedIndex+1,this.filteredOptions.length-1),this.requestUpdate();else if("ArrowUp"===e)t.preventDefault(),this.highlightedIndex=Math.max(this.highlightedIndex-1,0),this.requestUpdate();else if("Enter"===e){t.preventDefault();const e=this.filteredOptions[this.highlightedIndex];e&&this.handleSelect(e)}else"Escape"===e&&(t.preventDefault(),this.isOpen=!1)}renderSelectedIcon(){const t=this.options.find((t=>"string"==typeof t?t===this.value:t.value===this.value));return t&&"string"!=typeof t&&t.icon&&"string"==typeof t.icon?e`<span class="icon-selected" .innerHTML="${t.icon}"></span>`:i}renderOptionIcon(t){return t&&"string"==typeof t?e`<span class="icon-list" .innerHTML="${t}"></span>`:i}render(){const t=this.isMobile;return e`
|
|
2131
2075
|
<div class="select-container" style="${this.labelColor?` --label-color: ${this.labelColor}`:""}">
|
|
2132
|
-
${this.
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
2150
|
-
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
2154
|
-
>
|
|
2155
|
-
${this.renderSelectedIcon()}
|
|
2156
|
-
<span class="value-text">${this.filterValue||this.placeholder}</span>
|
|
2157
|
-
</div>
|
|
2158
|
-
`:i`
|
|
2159
|
-
${this.renderSelectedIcon()} <input
|
|
2160
|
-
class="filter-input"
|
|
2161
|
-
.value="${this.filterValue||""}"
|
|
2162
|
-
@click="${this.handleInputClick}"
|
|
2163
|
-
@keydown="${this.handleKeyDown}"
|
|
2164
|
-
@input=${this.handleInput}
|
|
2165
|
-
placeholder="${this.filterValue?"":this.placeholder}"
|
|
2166
|
-
?disabled="${this.disabled}"
|
|
2167
|
-
?readonly="${!this.filterable}"
|
|
2168
|
-
maxlength="${this.maxLength??""}"
|
|
2169
|
-
/>
|
|
2170
|
-
`}
|
|
2171
|
-
<button
|
|
2172
|
-
class="icon-button"
|
|
2173
|
-
@click="${this.handleIconClick}"
|
|
2174
|
-
?disabled="${this.disabled}"
|
|
2175
|
-
>
|
|
2176
|
-
${this.filterable&&this.filterValue?i`<randstad-icon name="close" size="24px" style="--icon-color: var(--primary-color);"></randstad-icon>`:this.isOpen&&this.filteredOptions.length>0?i`<randstad-icon name="arrow_up" size="24px" style="--icon-color: var(--primary-color);"></randstad-icon>`:i`<randstad-icon name="arrow_down" size="24px" style="--icon-color: var(--primary-color);"></randstad-icon>`}
|
|
2177
|
-
</button>
|
|
2178
|
-
</div>
|
|
2076
|
+
${this.renderLabelContainer()}
|
|
2077
|
+
|
|
2078
|
+
<div class="list-container">
|
|
2079
|
+
<div class="input-container ${this.isOpen?"focused":""} ${this.isOpen&&this.filteredOptions.length>0?"open":""} ${t?"mobile":""}">
|
|
2080
|
+
<div class="input-wrapper ${this.disabled?"disabled":""}">
|
|
2081
|
+
${t?e`
|
|
2082
|
+
<div
|
|
2083
|
+
class="filter-fake"
|
|
2084
|
+
@click="${this.handleInputClick}"
|
|
2085
|
+
@keydown="${this.handleKeyDown}"
|
|
2086
|
+
tabindex="0"
|
|
2087
|
+
role="combobox"
|
|
2088
|
+
aria-expanded="${this.isOpen}"
|
|
2089
|
+
aria-controls="options-list"
|
|
2090
|
+
aria-haspopup="listbox"
|
|
2091
|
+
aria-activedescendant=""
|
|
2092
|
+
>
|
|
2093
|
+
${this.renderSelectedIcon()}
|
|
2094
|
+
<span class="value-text">${this.filterValue||this.placeholder}</span>
|
|
2095
|
+
</div>
|
|
2096
|
+
`:e`
|
|
2097
|
+
${this.renderSelectedIcon()}
|
|
2179
2098
|
|
|
2180
|
-
${e&&this.isOpen?i`
|
|
2181
|
-
<div class="mobile-backdrop" @click="${()=>{this.isOpen=!1}}">
|
|
2182
|
-
<div class="mobile-modal" @click="${e=>e.stopPropagation()}">
|
|
2183
|
-
<div class="modal-input-container">
|
|
2184
2099
|
<input
|
|
2185
2100
|
class="filter-input"
|
|
2186
|
-
|
|
2187
|
-
|
|
2188
|
-
|
|
2101
|
+
.value="${this.filterValue||""}"
|
|
2102
|
+
@click="${this.handleInputClick}"
|
|
2103
|
+
@keydown="${this.handleKeyDown}"
|
|
2104
|
+
@input=${this.handleInput}
|
|
2105
|
+
placeholder="${this.filterValue?"":this.placeholder}"
|
|
2106
|
+
?disabled="${this.disabled}"
|
|
2107
|
+
?readonly="${!this.filterable}"
|
|
2108
|
+
maxlength="${this.maxLength??""}"
|
|
2189
2109
|
/>
|
|
2190
|
-
|
|
2191
|
-
|
|
2192
|
-
|
|
2193
|
-
|
|
2110
|
+
`}
|
|
2111
|
+
|
|
2112
|
+
<button
|
|
2113
|
+
class="icon-button"
|
|
2114
|
+
@click="${this.handleIconClick}"
|
|
2115
|
+
?disabled="${this.disabled}"
|
|
2116
|
+
>
|
|
2117
|
+
${this.filterable&&this.filterValue?e`<randstad-icon name="close" size="24px" style="--icon-color: var(--primary-color);"></randstad-icon>`:this.isOpen&&this.filteredOptions.length>0?e`<randstad-icon name="arrow_up" size="24px" style="--icon-color: var(--primary-color);"></randstad-icon>`:e`<randstad-icon name="arrow_down" size="24px" style="--icon-color: var(--primary-color);"></randstad-icon>`}
|
|
2118
|
+
</button>
|
|
2119
|
+
</div>
|
|
2120
|
+
|
|
2121
|
+
${!t&&this.isOpen&&this.filteredOptions.length>0?e`
|
|
2194
2122
|
<ul class="options-list">
|
|
2195
|
-
${this.filteredOptions.map(((
|
|
2123
|
+
${this.filteredOptions.map(((t,i)=>{const o="string"==typeof t?t:t.label,r="object"==typeof t&&t.disabled,n="object"==typeof t?t.icon:void 0;return e`
|
|
2196
2124
|
<li
|
|
2197
|
-
class="${r?"disabled":""} ${
|
|
2125
|
+
class="${r?"disabled":""} ${i===this.highlightedIndex?"highlighted":""}"
|
|
2198
2126
|
role="option"
|
|
2199
|
-
aria-selected="${
|
|
2200
|
-
@click="${()=>{r||this.handleSelect(
|
|
2127
|
+
aria-selected="${i===this.highlightedIndex}"
|
|
2128
|
+
@click="${()=>{r||this.handleSelect(t)}}"
|
|
2201
2129
|
>
|
|
2202
2130
|
${this.renderOptionIcon(n)}
|
|
2203
2131
|
${o}
|
|
2204
2132
|
</li>
|
|
2205
2133
|
`}))}
|
|
2206
2134
|
</ul>
|
|
2207
|
-
|
|
2208
|
-
|
|
2209
|
-
`:!e&&this.isOpen&&this.filteredOptions.length>0?i`
|
|
2210
|
-
<ul class="options-list">
|
|
2211
|
-
${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`
|
|
2212
|
-
<li
|
|
2213
|
-
class="${r?"disabled":""} ${t===this.highlightedIndex?"highlighted":""}"
|
|
2214
|
-
role="option"
|
|
2215
|
-
aria-selected="${t===this.highlightedIndex}"
|
|
2216
|
-
@click="${()=>{r||this.handleSelect(e)}}"
|
|
2217
|
-
>
|
|
2218
|
-
${this.renderOptionIcon(n)}
|
|
2219
|
-
${o}
|
|
2220
|
-
</li>
|
|
2221
|
-
`}))}
|
|
2222
|
-
</ul>
|
|
2223
|
-
`:""}
|
|
2224
|
-
</div>
|
|
2135
|
+
`:i}
|
|
2136
|
+
</div>
|
|
2225
2137
|
|
|
2226
|
-
|
|
2138
|
+
${this.renderError()}
|
|
2139
|
+
</div>
|
|
2227
2140
|
|
|
2228
|
-
${this.
|
|
2229
|
-
<p
|
|
2230
|
-
class="helper-description"
|
|
2231
|
-
style=${t}
|
|
2232
|
-
>
|
|
2233
|
-
${this.helper}
|
|
2234
|
-
</p>
|
|
2235
|
-
`:o}
|
|
2141
|
+
${this.renderHelper()}
|
|
2236
2142
|
</div>
|
|
2237
|
-
|
|
2143
|
+
|
|
2144
|
+
${t&&this.isOpen?e`
|
|
2145
|
+
<div class="mobile-backdrop" @click="${()=>{this.isOpen=!1}}">
|
|
2146
|
+
<div class="mobile-modal" @click="${t=>t.stopPropagation()}">
|
|
2147
|
+
<div class="modal-input-container">
|
|
2148
|
+
<input
|
|
2149
|
+
class="filter-input"
|
|
2150
|
+
.value="${this.mobileFilterValue||""}"
|
|
2151
|
+
@input=${t=>this.handleMobileInput(t)}
|
|
2152
|
+
placeholder="${this.placeholder}"
|
|
2153
|
+
maxlength="${this.maxLength??""}"
|
|
2154
|
+
/>
|
|
2155
|
+
<button class="modal-close-button" @click="${()=>{this.isOpen=!1}}">
|
|
2156
|
+
<randstad-icon name="close" size="20px"></randstad-icon>
|
|
2157
|
+
</button>
|
|
2158
|
+
</div>
|
|
2159
|
+
|
|
2160
|
+
<ul class="options-list">
|
|
2161
|
+
${this.filteredOptions.map(((t,i)=>{const o="string"==typeof t?t:t.label,r="object"==typeof t&&t.disabled,n="object"==typeof t?t.icon:void 0;return e`
|
|
2162
|
+
<li
|
|
2163
|
+
class="${r?"disabled":""} ${i===this.highlightedIndex?"highlighted":""}"
|
|
2164
|
+
role="option"
|
|
2165
|
+
aria-selected="${i===this.highlightedIndex}"
|
|
2166
|
+
@click="${()=>{r||this.handleSelect(t)}}"
|
|
2167
|
+
>
|
|
2168
|
+
${this.renderOptionIcon(n)}
|
|
2169
|
+
${o}
|
|
2170
|
+
</li>
|
|
2171
|
+
`}))}
|
|
2172
|
+
</ul>
|
|
2173
|
+
</div>
|
|
2174
|
+
</div>
|
|
2175
|
+
`:i}
|
|
2176
|
+
`}};a([T({type:Object}),s("design:type",Object)],Gt.prototype,"value",void 0),a([T({type:String,attribute:"default-value"}),s("design:type",Object)],Gt.prototype,"defaultValue",void 0),a([T({type:Array}),s("design:type",Array)],Gt.prototype,"options",void 0),a([T({type:Boolean}),s("design:type",Object)],Gt.prototype,"filterable",void 0),a([T({type:Number}),s("design:type",Number)],Gt.prototype,"maxLength",void 0),a([z(),s("design:type",Boolean)],Gt.prototype,"isMobile",void 0),a([z(),s("design:type",Object)],Gt.prototype,"highlightedIndex",void 0),a([z(),s("design:type",Boolean)],Gt.prototype,"_isCleared",void 0),a([z(),s("design:type",Array)],Gt.prototype,"filteredOptions",void 0),a([z(),s("design:type",Object)],Gt.prototype,"filterValue",void 0),a([z(),s("design:type",Object)],Gt.prototype,"isOpen",void 0),a([z(),s("design:type",Object)],Gt.prototype,"mobileFilterValue",void 0),Gt=a([d("filterable-select")],Gt);const Kt=new CSSStyleSheet;Kt.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 Xt extends t{static{this.styles=[Kt,o`
|
|
2238
2177
|
:host {
|
|
2239
2178
|
display: flex;
|
|
2240
2179
|
position: fixed;
|
|
@@ -2304,7 +2243,7 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2304
2243
|
}
|
|
2305
2244
|
|
|
2306
2245
|
.container {
|
|
2307
|
-
${
|
|
2246
|
+
${_};
|
|
2308
2247
|
display: flex;
|
|
2309
2248
|
align-items: center;
|
|
2310
2249
|
box-sizing: border-box;
|
|
@@ -2361,16 +2300,16 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2361
2300
|
.informative {
|
|
2362
2301
|
background-color: var(--ui-informative);
|
|
2363
2302
|
}
|
|
2364
|
-
`]}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
|
|
2303
|
+
`]}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 t=window.innerWidth<=940;this.classList.toggle("mobile",t)}render(){const t="error"===this.type||"warning"===this.type?"alert":"status";return e`
|
|
2365
2304
|
<div
|
|
2366
2305
|
class="container ${this.open?"":"hidden"} ${this.type}"
|
|
2367
|
-
role="${
|
|
2306
|
+
role="${t}"
|
|
2368
2307
|
aria-live="polite"
|
|
2369
2308
|
>
|
|
2370
2309
|
<randstad-icon name=${this.icon} size="24px" color="white"></randstad-icon>
|
|
2371
2310
|
<span class="message">${this.message}</span>
|
|
2372
2311
|
</div>
|
|
2373
|
-
`}}customElements.define("randstad-snackbar",
|
|
2312
|
+
`}}customElements.define("randstad-snackbar",Xt);let Qt=class extends t{constructor(){super(...arguments),this.totalSteps=4,this.currentStep=0}static{this.styles=o`
|
|
2374
2313
|
.stepper {
|
|
2375
2314
|
display: flex;
|
|
2376
2315
|
gap: 20px;
|
|
@@ -2457,20 +2396,20 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2457
2396
|
-webkit-font-smoothing: antialiased;
|
|
2458
2397
|
-moz-osx-font-smoothing: grayscale;
|
|
2459
2398
|
}
|
|
2460
|
-
`}render(){return
|
|
2399
|
+
`}render(){return e`
|
|
2461
2400
|
<div class="stepper">
|
|
2462
|
-
${Array.from({length:this.totalSteps},((
|
|
2401
|
+
${Array.from({length:this.totalSteps},((t,i)=>e`
|
|
2463
2402
|
<div
|
|
2464
|
-
class="step ${
|
|
2403
|
+
class="step ${i<this.currentStep?"completed":i===this.currentStep?"active":""}"
|
|
2465
2404
|
>
|
|
2466
|
-
${
|
|
2405
|
+
${i<this.currentStep?e`<randstad-icon name="tick-circle" size="16px"></randstad-icon>`:i===this.currentStep?e`
|
|
2467
2406
|
<span class="pulse-circle"></span>
|
|
2468
2407
|
<span class="inner-circle"></span>
|
|
2469
|
-
`:
|
|
2408
|
+
`:e`<span class="inner-circle"></span>`}
|
|
2470
2409
|
</div>
|
|
2471
2410
|
`))}
|
|
2472
2411
|
</div>
|
|
2473
|
-
`}};a([
|
|
2412
|
+
`}};a([T({type:Number}),s("design:type",Object)],Qt.prototype,"totalSteps",void 0),a([T({type:Number}),s("design:type",Object)],Qt.prototype,"currentStep",void 0),Qt=a([d("custom-stepper")],Qt);let Jt=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 t=this.renderRoot.querySelector(".tab-wrapper");if(!t)return;const{scrollLeft:e,scrollWidth:i,clientWidth:o}=t;this.showPrev=e>0,this.showNext=e+o<i-1}}static{this.styles=o`
|
|
2474
2413
|
:host {
|
|
2475
2414
|
display: block;
|
|
2476
2415
|
border-bottom: 1px solid #E7E8EC;
|
|
@@ -2483,7 +2422,7 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2483
2422
|
}
|
|
2484
2423
|
|
|
2485
2424
|
.tab {
|
|
2486
|
-
${
|
|
2425
|
+
${B};
|
|
2487
2426
|
display: flex;
|
|
2488
2427
|
gap: 8px;
|
|
2489
2428
|
flex-direction: row;
|
|
@@ -2581,35 +2520,35 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2581
2520
|
|
|
2582
2521
|
@media (max-width: 940px) {
|
|
2583
2522
|
.tab {
|
|
2584
|
-
${
|
|
2523
|
+
${N};
|
|
2585
2524
|
padding: 16px;
|
|
2586
2525
|
}
|
|
2587
2526
|
}
|
|
2588
|
-
`}firstUpdated(){this.handleScroll()}updated(
|
|
2527
|
+
`}firstUpdated(){this.handleScroll()}updated(t){t.has("selected")&&(this.internalSelected=this.selected)}selectTab(t){this.internalSelected=t;const e=this.tabs.find((e=>e.value===t));e&&this.dispatchEvent(new CustomEvent("tab-change",{detail:e,bubbles:!0,composed:!0}))}scrollTabsLeft(){const t=this.renderRoot.querySelector(".tab-wrapper");if(!t)return;const e=t.scrollLeft,i=Array.from(t.querySelectorAll(".tab"));for(let o=i.length-1;o>=0;o--){const r=i[o].offsetLeft;if(r<e+this.SCROLL_OFFSET-1){const e=r-this.SCROLL_OFFSET;t.scrollTo({left:e,behavior:"smooth"});break}}setTimeout((()=>this.handleScroll()),300)}scrollTabsRight(){const t=this.renderRoot.querySelector(".tab-wrapper");if(!t)return;const e=t.scrollLeft,i=Array.from(t.querySelectorAll(".tab"));for(const o of i)if(o.offsetLeft>e+this.SCROLL_OFFSET){const e=o.offsetLeft-this.SCROLL_OFFSET;t.scrollTo({left:e,behavior:"smooth"});break}setTimeout((()=>this.handleScroll()),300)}render(){return e`
|
|
2589
2528
|
<div class="scroll-container">
|
|
2590
|
-
${this.showPrev?
|
|
2529
|
+
${this.showPrev?e`
|
|
2591
2530
|
<button class="scroll-button prev" @click=${this.scrollTabsLeft}>
|
|
2592
2531
|
<randstad-icon name="arrow_left" size="36px"></randstad-icon>
|
|
2593
2532
|
</button>
|
|
2594
2533
|
`:null}
|
|
2595
2534
|
|
|
2596
2535
|
<div class="tab-wrapper" @scroll=${this.handleScroll}>
|
|
2597
|
-
${this.tabs.map((e
|
|
2598
|
-
<div class="tab ${this.internalSelected===
|
|
2599
|
-
@click=${()=>this.selectTab(
|
|
2600
|
-
<img src="/assets/icons/${
|
|
2601
|
-
<span>${
|
|
2536
|
+
${this.tabs.map((t=>e`
|
|
2537
|
+
<div class="tab ${this.internalSelected===t.value?"active":""}"
|
|
2538
|
+
@click=${()=>this.selectTab(t.value)}>
|
|
2539
|
+
<img src="/assets/icons/${t.icon}" alt="${t.label}" />
|
|
2540
|
+
<span>${t.label}</span>
|
|
2602
2541
|
</div>
|
|
2603
2542
|
`))}
|
|
2604
2543
|
</div>
|
|
2605
2544
|
|
|
2606
|
-
${this.showNext?
|
|
2545
|
+
${this.showNext?e`
|
|
2607
2546
|
<button class="scroll-button next" @click=${this.scrollTabsRight}>
|
|
2608
2547
|
<randstad-icon name="arrow_right" size="36px"></randstad-icon>
|
|
2609
2548
|
</button>
|
|
2610
2549
|
`:null}
|
|
2611
2550
|
</div>
|
|
2612
|
-
`}};a([
|
|
2551
|
+
`}};a([T({type:Array}),s("design:type",Array)],Jt.prototype,"tabs",void 0),a([T({type:String}),s("design:type",String)],Jt.prototype,"selected",void 0),a([z(),s("design:type",String)],Jt.prototype,"internalSelected",void 0),a([z(),s("design:type",Object)],Jt.prototype,"showPrev",void 0),a([z(),s("design:type",Object)],Jt.prototype,"showNext",void 0),Jt=a([d("tabs-bar")],Jt);let Zt=class extends t{constructor(){super(...arguments),this.files=[],this.disabled=!1,this.simulatedDelay=0,this.loading=!1,this.progress=0,this.isDragging=!1}static{this.styles=o`
|
|
2613
2552
|
:host {
|
|
2614
2553
|
font-family: 'Graphik', sans-serif;
|
|
2615
2554
|
}
|
|
@@ -2643,7 +2582,7 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2643
2582
|
}
|
|
2644
2583
|
|
|
2645
2584
|
.text-main {
|
|
2646
|
-
${
|
|
2585
|
+
${_};
|
|
2647
2586
|
text-align: center;
|
|
2648
2587
|
vertical-align: middle;
|
|
2649
2588
|
color: var(--secondary-color-80);
|
|
@@ -2704,7 +2643,7 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2704
2643
|
background-color: var(--primary-color);
|
|
2705
2644
|
transition: width 0.1s ease;
|
|
2706
2645
|
}
|
|
2707
|
-
`}async handleFiles(
|
|
2646
|
+
`}async handleFiles(t){if(this.loading||this.disabled)return;const e=Array.isArray(this.files)?this.files:[],i=Array.from(t||[]).slice(0,3-e.length),o=this.simulatedDelay??0;if(o<=0)return this.files=[...e,...i],void this.dispatchEvent(new CustomEvent("files-changed",{detail:this.files}));this.loading=!0,this.progress=0,await this.updateComplete;const r=Date.now(),n=setInterval((()=>{const t=Date.now()-r,a=Math.min(Math.round(t/o*100),100);this.progress=a,this.progress>=100&&(clearInterval(n),this.files=[...e,...i],this.loading=!1,this.progress=0,this.dispatchEvent(new CustomEvent("files-changed",{detail:this.files})))}),10)}onFileInputChange(t){const e=t.target;this.handleFiles(e.files)}onDrop(t){t.preventDefault(),this.disabled||(this.isDragging=!1,this.handleFiles(t.dataTransfer?.files||null))}onDragOver(t){t.preventDefault(),this.disabled||(this.isDragging=!0)}onDragLeave(t){t.preventDefault(),this.disabled||(this.isDragging=!1)}render(){return e`
|
|
2708
2647
|
<div class="container ${this.isDragging?"dragging":""}"
|
|
2709
2648
|
@drop="${this.onDrop}"
|
|
2710
2649
|
@dragover="${this.onDragOver}"
|
|
@@ -2725,20 +2664,20 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2725
2664
|
<div class="text-tertiary">.jpg, .jpeg, .png</div>
|
|
2726
2665
|
</div>
|
|
2727
2666
|
|
|
2728
|
-
${this.loading?
|
|
2667
|
+
${this.loading?e`
|
|
2729
2668
|
<div class="progress-bar-container">
|
|
2730
2669
|
<div class="progress-bar" role="progressbar" aria-label="Subiendo archivo…">
|
|
2731
2670
|
<div class="progress-bar-fill" style="width: ${this.progress}%;"></div>
|
|
2732
2671
|
</div>
|
|
2733
2672
|
</div>
|
|
2734
|
-
`:
|
|
2673
|
+
`:e`
|
|
2735
2674
|
<label class="button">
|
|
2736
2675
|
agregar archivo
|
|
2737
2676
|
<input type="file" accept=".jpg,.jpeg,.png" multiple @change="${this.onFileInputChange}" />
|
|
2738
2677
|
</label>
|
|
2739
2678
|
`}
|
|
2740
2679
|
</div>
|
|
2741
|
-
`}};a([A({type:Array}),s("design:type",Array)],Ke.prototype,"files",void 0),a([A({type:Boolean,reflect:!0}),s("design:type",Object)],Ke.prototype,"disabled",void 0),a([A({type:Number}),s("design:type",Object)],Ke.prototype,"simulatedDelay",void 0),a([T(),s("design:type",Object)],Ke.prototype,"loading",void 0),a([T(),s("design:type",Object)],Ke.prototype,"progress",void 0),a([T(),s("design:type",Object)],Ke.prototype,"isDragging",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 Tt(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 Tt(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"+At(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"+At(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 At(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 Tt(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`
|
|
2680
|
+
`}};a([T({type:Array}),s("design:type",Array)],Zt.prototype,"files",void 0),a([T({type:Boolean,reflect:!0}),s("design:type",Object)],Zt.prototype,"disabled",void 0),a([T({type:Number}),s("design:type",Object)],Zt.prototype,"simulatedDelay",void 0),a([z(),s("design:type",Object)],Zt.prototype,"loading",void 0),a([z(),s("design:type",Object)],Zt.prototype,"progress",void 0),a([z(),s("design:type",Object)],Zt.prototype,"isDragging",void 0),Zt=a([d("upload-image")],Zt);const te=6048e5,ee=Symbol.for("constructDateFrom");function ie(t,e){return"function"==typeof t?t(e):t&&"object"==typeof t&&ee in t?t[ee](e):t instanceof Date?new t.constructor(e):new Date(e)}function oe(t,e){return ie(e||t,t)}function re(t,e,i){const o=oe(t,i?.in);if(isNaN(e))return ie(t,NaN);if(!e)return o;const r=o.getDate(),n=ie(t,o.getTime());n.setMonth(o.getMonth()+e+1,0);return r>=n.getDate()?n:(o.setFullYear(n.getFullYear(),n.getMonth(),r),o)}let ne={};function ae(){return ne}function se(t,e){const i=ae(),o=e?.weekStartsOn??e?.locale?.options?.weekStartsOn??i.weekStartsOn??i.locale?.options?.weekStartsOn??0,r=oe(t,e?.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 de(t,e){return se(t,{...e,weekStartsOn:1})}function le(t,e){const i=oe(t,e?.in),o=i.getFullYear(),r=ie(i,0);r.setFullYear(o+1,0,4),r.setHours(0,0,0,0);const n=de(r),a=ie(i,0);a.setFullYear(o,0,4),a.setHours(0,0,0,0);const s=de(a);return i.getTime()>=n.getTime()?o+1:i.getTime()>=s.getTime()?o:o-1}function ce(t){const e=oe(t),i=new Date(Date.UTC(e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds(),e.getMilliseconds()));return i.setUTCFullYear(e.getFullYear()),+t-+i}function he(t,...e){const i=ie.bind(null,e.find((t=>"object"==typeof t)));return e.map(i)}function pe(t,e){const i=oe(t,e?.in);return i.setHours(0,0,0,0),i}function ue(t,e,i){return re(t,12*e,i)}function be(t){return!(!((e=t)instanceof Date||"object"==typeof e&&"[object Date]"===Object.prototype.toString.call(e))&&"number"!=typeof t||isNaN(+oe(t)));var e}function me(t,e){const i=oe(t,e?.in);return i.setDate(1),i.setHours(0,0,0,0),i}const ge={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 ye(t){return(e={})=>{const i=e.width?String(e.width):t.defaultWidth;return t.formats[i]||t.formats[t.defaultWidth]}}const fe={date:ye({formats:{full:"EEEE, MMMM do, y",long:"MMMM do, y",medium:"MMM d, y",short:"MM/dd/yyyy"},defaultWidth:"full"}),time:ye({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:ye({formats:{full:"{{date}} 'at' {{time}}",long:"{{date}} 'at' {{time}}",medium:"{{date}}, {{time}}",short:"{{date}}, {{time}}"},defaultWidth:"full"})},ve={lastWeek:"'last' eeee 'at' p",yesterday:"'yesterday at' p",today:"'today at' p",tomorrow:"'tomorrow at' p",nextWeek:"eeee 'at' p",other:"P"};function xe(t){return(e,i)=>{let o;if("formatting"===(i?.context?String(i.context):"standalone")&&t.formattingValues){const e=t.defaultFormattingWidth||t.defaultWidth,r=i?.width?String(i.width):e;o=t.formattingValues[r]||t.formattingValues[e]}else{const e=t.defaultWidth,r=i?.width?String(i.width):t.defaultWidth;o=t.values[r]||t.values[e]}return o[t.argumentCallback?t.argumentCallback(e):e]}}function we(t){return(e,i={})=>{const o=i.width,r=o&&t.matchPatterns[o]||t.matchPatterns[t.defaultMatchWidth],n=e.match(r);if(!n)return null;const a=n[0],s=o&&t.parsePatterns[o]||t.parsePatterns[t.defaultParseWidth],d=Array.isArray(s)?function(t,e){for(let i=0;i<t.length;i++)if(e(t[i]))return i;return}(s,(t=>t.test(a))):function(t,e){for(const i in t)if(Object.prototype.hasOwnProperty.call(t,i)&&e(t[i]))return i;return}(s,(t=>t.test(a)));let l;l=t.valueCallback?t.valueCallback(d):d,l=i.valueCallback?i.valueCallback(l):l;return{value:l,rest:e.slice(a.length)}}}var ke;const $e={code:"en-US",formatDistance:(t,e,i)=>{let o;const r=ge[t];return o="string"==typeof r?r:1===e?r.one:r.other.replace("{{count}}",e.toString()),i?.addSuffix?i.comparison&&i.comparison>0?"in "+o:o+" ago":o},formatLong:fe,formatRelative:(t,e,i,o)=>ve[t],localize:{ordinalNumber:(t,e)=>{const i=Number(t),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:xe({values:{narrow:["B","A"],abbreviated:["BC","AD"],wide:["Before Christ","Anno Domini"]},defaultWidth:"wide"}),quarter:xe({values:{narrow:["1","2","3","4"],abbreviated:["Q1","Q2","Q3","Q4"],wide:["1st quarter","2nd quarter","3rd quarter","4th quarter"]},defaultWidth:"wide",argumentCallback:t=>t-1}),month:xe({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:xe({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:xe({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:(ke={matchPattern:/^(\d+)(th|st|nd|rd)?/i,parsePattern:/\d+/i,valueCallback:t=>parseInt(t,10)},(t,e={})=>{const i=t.match(ke.matchPattern);if(!i)return null;const o=i[0],r=t.match(ke.parsePattern);if(!r)return null;let n=ke.valueCallback?ke.valueCallback(r[0]):r[0];return n=e.valueCallback?e.valueCallback(n):n,{value:n,rest:t.slice(o.length)}}),era:we({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:we({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:t=>t+1}),month:we({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:we({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:we({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 Se(t,e){const i=oe(t,e?.in),o=function(t,e){const[i,o]=he(0,t,e),r=pe(i),n=pe(o),a=+r-ce(r),s=+n-ce(n);return Math.round((a-s)/864e5)}(i,function(t,e){const i=oe(t,e?.in);return i.setFullYear(i.getFullYear(),0,1),i.setHours(0,0,0,0),i}(i));return o+1}function Ce(t,e){const i=oe(t,e?.in),o=+de(i)-+function(t,e){const i=le(t,e),o=ie(t,0);return o.setFullYear(i,0,4),o.setHours(0,0,0,0),de(o)}(i);return Math.round(o/te)+1}function Ee(t,e){const i=oe(t,e?.in),o=i.getFullYear(),r=ae(),n=e?.firstWeekContainsDate??e?.locale?.options?.firstWeekContainsDate??r.firstWeekContainsDate??r.locale?.options?.firstWeekContainsDate??1,a=ie(e?.in||t,0);a.setFullYear(o+1,0,n),a.setHours(0,0,0,0);const s=se(a,e),d=ie(e?.in||t,0);d.setFullYear(o,0,n),d.setHours(0,0,0,0);const l=se(d,e);return+i>=+s?o+1:+i>=+l?o:o-1}function De(t,e){const i=oe(t,e?.in),o=+se(i,e)-+function(t,e){const i=ae(),o=e?.firstWeekContainsDate??e?.locale?.options?.firstWeekContainsDate??i.firstWeekContainsDate??i.locale?.options?.firstWeekContainsDate??1,r=Ee(t,e),n=ie(e?.in||t,0);return n.setFullYear(r,0,o),n.setHours(0,0,0,0),se(n,e)}(i,e);return Math.round(o/te)+1}function Oe(t,e){return(t<0?"-":"")+Math.abs(t).toString().padStart(e,"0")}const Me={y(t,e){const i=t.getFullYear(),o=i>0?i:1-i;return Oe("yy"===e?o%100:o,e.length)},M(t,e){const i=t.getMonth();return"M"===e?String(i+1):Oe(i+1,2)},d:(t,e)=>Oe(t.getDate(),e.length),a(t,e){const i=t.getHours()/12>=1?"pm":"am";switch(e){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:(t,e)=>Oe(t.getHours()%12||12,e.length),H:(t,e)=>Oe(t.getHours(),e.length),m:(t,e)=>Oe(t.getMinutes(),e.length),s:(t,e)=>Oe(t.getSeconds(),e.length),S(t,e){const i=e.length,o=t.getMilliseconds();return Oe(Math.trunc(o*Math.pow(10,i-3)),e.length)}},Fe="midnight",Pe="noon",je="morning",Te="afternoon",ze="evening",Ae="night",Le={G:function(t,e,i){const o=t.getFullYear()>0?1:0;switch(e){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(t,e,i){if("yo"===e){const e=t.getFullYear(),o=e>0?e:1-e;return i.ordinalNumber(o,{unit:"year"})}return Me.y(t,e)},Y:function(t,e,i,o){const r=Ee(t,o),n=r>0?r:1-r;if("YY"===e){return Oe(n%100,2)}return"Yo"===e?i.ordinalNumber(n,{unit:"year"}):Oe(n,e.length)},R:function(t,e){return Oe(le(t),e.length)},u:function(t,e){return Oe(t.getFullYear(),e.length)},Q:function(t,e,i){const o=Math.ceil((t.getMonth()+1)/3);switch(e){case"Q":return String(o);case"QQ":return Oe(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(t,e,i){const o=Math.ceil((t.getMonth()+1)/3);switch(e){case"q":return String(o);case"qq":return Oe(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(t,e,i){const o=t.getMonth();switch(e){case"M":case"MM":return Me.M(t,e);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(t,e,i){const o=t.getMonth();switch(e){case"L":return String(o+1);case"LL":return Oe(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(t,e,i,o){const r=De(t,o);return"wo"===e?i.ordinalNumber(r,{unit:"week"}):Oe(r,e.length)},I:function(t,e,i){const o=Ce(t);return"Io"===e?i.ordinalNumber(o,{unit:"week"}):Oe(o,e.length)},d:function(t,e,i){return"do"===e?i.ordinalNumber(t.getDate(),{unit:"date"}):Me.d(t,e)},D:function(t,e,i){const o=Se(t);return"Do"===e?i.ordinalNumber(o,{unit:"dayOfYear"}):Oe(o,e.length)},E:function(t,e,i){const o=t.getDay();switch(e){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(t,e,i,o){const r=t.getDay(),n=(r-o.weekStartsOn+8)%7||7;switch(e){case"e":return String(n);case"ee":return Oe(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(t,e,i,o){const r=t.getDay(),n=(r-o.weekStartsOn+8)%7||7;switch(e){case"c":return String(n);case"cc":return Oe(n,e.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(t,e,i){const o=t.getDay(),r=0===o?7:o;switch(e){case"i":return String(r);case"ii":return Oe(r,e.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(t,e,i){const o=t.getHours()/12>=1?"pm":"am";switch(e){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(t,e,i){const o=t.getHours();let r;switch(r=12===o?Pe:0===o?Fe:o/12>=1?"pm":"am",e){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(t,e,i){const o=t.getHours();let r;switch(r=o>=17?ze:o>=12?Te:o>=4?je:Ae,e){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(t,e,i){if("ho"===e){let e=t.getHours()%12;return 0===e&&(e=12),i.ordinalNumber(e,{unit:"hour"})}return Me.h(t,e)},H:function(t,e,i){return"Ho"===e?i.ordinalNumber(t.getHours(),{unit:"hour"}):Me.H(t,e)},K:function(t,e,i){const o=t.getHours()%12;return"Ko"===e?i.ordinalNumber(o,{unit:"hour"}):Oe(o,e.length)},k:function(t,e,i){let o=t.getHours();return 0===o&&(o=24),"ko"===e?i.ordinalNumber(o,{unit:"hour"}):Oe(o,e.length)},m:function(t,e,i){return"mo"===e?i.ordinalNumber(t.getMinutes(),{unit:"minute"}):Me.m(t,e)},s:function(t,e,i){return"so"===e?i.ordinalNumber(t.getSeconds(),{unit:"second"}):Me.s(t,e)},S:function(t,e){return Me.S(t,e)},X:function(t,e,i){const o=t.getTimezoneOffset();if(0===o)return"Z";switch(e){case"X":return _e(o);case"XXXX":case"XX":return Ne(o);default:return Ne(o,":")}},x:function(t,e,i){const o=t.getTimezoneOffset();switch(e){case"x":return _e(o);case"xxxx":case"xx":return Ne(o);default:return Ne(o,":")}},O:function(t,e,i){const o=t.getTimezoneOffset();switch(e){case"O":case"OO":case"OOO":return"GMT"+Ie(o,":");default:return"GMT"+Ne(o,":")}},z:function(t,e,i){const o=t.getTimezoneOffset();switch(e){case"z":case"zz":case"zzz":return"GMT"+Ie(o,":");default:return"GMT"+Ne(o,":")}},t:function(t,e,i){return Oe(Math.trunc(+t/1e3),e.length)},T:function(t,e,i){return Oe(+t,e.length)}};function Ie(t,e=""){const i=t>0?"-":"+",o=Math.abs(t),r=Math.trunc(o/60),n=o%60;return 0===n?i+String(r):i+String(r)+e+Oe(n,2)}function _e(t,e){if(t%60==0){return(t>0?"-":"+")+Oe(Math.abs(t)/60,2)}return Ne(t,e)}function Ne(t,e=""){const i=t>0?"-":"+",o=Math.abs(t);return i+Oe(Math.trunc(o/60),2)+e+Oe(o%60,2)}const Re=(t,e)=>{switch(t){case"P":return e.date({width:"short"});case"PP":return e.date({width:"medium"});case"PPP":return e.date({width:"long"});default:return e.date({width:"full"})}},Be=(t,e)=>{switch(t){case"p":return e.time({width:"short"});case"pp":return e.time({width:"medium"});case"ppp":return e.time({width:"long"});default:return e.time({width:"full"})}},Ve={p:Be,P:(t,e)=>{const i=t.match(/(P+)(p+)?/)||[],o=i[1],r=i[2];if(!r)return Re(t,e);let n;switch(o){case"P":n=e.dateTime({width:"short"});break;case"PP":n=e.dateTime({width:"medium"});break;case"PPP":n=e.dateTime({width:"long"});break;default:n=e.dateTime({width:"full"})}return n.replace("{{date}}",Re(o,e)).replace("{{time}}",Be(r,e))}},qe=/^D+$/,We=/^Y+$/,Ye=["D","DD","YY","YYYY"];const Ue=/[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g,He=/P+p+|P+|p+|''|'(''|[^'])+('|$)|./g,Ge=/^'([^]*?)'?$/,Ke=/''/g,Xe=/[a-zA-Z]/;function Qe(t,e,i){const o=ae(),r=o.locale??$e,n=o.firstWeekContainsDate??o.locale?.options?.firstWeekContainsDate??1,a=o.weekStartsOn??o.locale?.options?.weekStartsOn??0,s=oe(t,i?.in);if(!be(s))throw new RangeError("Invalid time value");let d=e.match(He).map((t=>{const e=t[0];if("p"===e||"P"===e){return(0,Ve[e])(t,r.formatLong)}return t})).join("").match(Ue).map((t=>{if("''"===t)return{isToken:!1,value:"'"};const e=t[0];if("'"===e)return{isToken:!1,value:Je(t)};if(Le[e])return{isToken:!0,value:t};if(e.match(Xe))throw new RangeError("Format string contains an unescaped latin alphabet character `"+e+"`");return{isToken:!1,value:t}}));r.localize.preprocessor&&(d=r.localize.preprocessor(s,d));const l={firstWeekContainsDate:n,weekStartsOn:a,locale:r};return d.map((i=>{if(!i.isToken)return i.value;const o=i.value;(function(t){return We.test(t)}(o)||function(t){return qe.test(t)}(o))&&function(t,e,i){const o=function(t,e,i){const o="Y"===t[0]?"years":"days of the month";return`Use \`${t.toLowerCase()}\` instead of \`${t}\` (in \`${e}\`) for formatting ${o} to the input \`${i}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`}(t,e,i);if(console.warn(o),Ye.includes(t))throw new RangeError(o)}(o,e,String(t));return(0,Le[o[0]])(s,o,r.localize,l)})).join("")}function Je(t){const e=t.match(Ge);return e?e[1].replace(Ke,"'"):t}function Ze(t,e){return oe(t,e?.in).getDate()}function ti(t,e){const i=oe(t,e?.in),o=i.getFullYear(),r=i.getMonth(),n=ie(i,0);return n.setFullYear(o,r+1,0),n.setHours(0,0,0,0),n.getDate()}function ei(t,e){return+oe(t)>+oe(e)}function ii(t,e){return+oe(t)<+oe(e)}function oi(t,e,i){const[o,r]=he(0,t,e);return o.getFullYear()===r.getFullYear()&&o.getMonth()===r.getMonth()}function ri(t,e,i){const[o,r]=he(0,t,e);return o.getFullYear()===r.getFullYear()}function ni(t,e){return function(t,e){const[i,o]=he(0,t,e);return+pe(i)===+pe(o)}(ie(t,t),function(t){return ie(t,Date.now())}(t))}let ai=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=t=>{const e=this.getRootNode(),i=e?.host;!i||t.composedPath().includes(this)||t.composedPath().includes(i)||this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}}static{this.styles=o`
|
|
2742
2681
|
/* Estilos generales del contenedor del calendario (escritorio) */
|
|
2743
2682
|
.calendar-container {
|
|
2744
2683
|
position: absolute;
|
|
@@ -2803,7 +2742,7 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2803
2742
|
}
|
|
2804
2743
|
|
|
2805
2744
|
.month-year-button {
|
|
2806
|
-
${
|
|
2745
|
+
${_}
|
|
2807
2746
|
display: flex;
|
|
2808
2747
|
align-items: center;
|
|
2809
2748
|
justify-content: center;
|
|
@@ -2852,7 +2791,7 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2852
2791
|
|
|
2853
2792
|
/* Estilos para cada botón de día */
|
|
2854
2793
|
.day {
|
|
2855
|
-
${
|
|
2794
|
+
${N}
|
|
2856
2795
|
display: flex;
|
|
2857
2796
|
align-items: center;
|
|
2858
2797
|
justify-content: center;
|
|
@@ -2915,7 +2854,7 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2915
2854
|
/* Botones de año y mes en la grilla */
|
|
2916
2855
|
.year-button,
|
|
2917
2856
|
.month-button {
|
|
2918
|
-
${
|
|
2857
|
+
${N}
|
|
2919
2858
|
background: var(--secondary-white, #fff);
|
|
2920
2859
|
border: 1px solid transparent;
|
|
2921
2860
|
color: var(--secondary-randstad-dark-blue-80, #3c4257);
|
|
@@ -3069,7 +3008,7 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
3069
3008
|
}
|
|
3070
3009
|
|
|
3071
3010
|
.mobile-modal .day {
|
|
3072
|
-
${
|
|
3011
|
+
${R}
|
|
3073
3012
|
font-weight: 500;
|
|
3074
3013
|
display: flex;
|
|
3075
3014
|
align-items: center;
|
|
@@ -3152,13 +3091,13 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
3152
3091
|
color: var(--secondary-randstad-dark-blue-30, #b1b5c4);
|
|
3153
3092
|
}
|
|
3154
3093
|
/* */
|
|
3155
|
-
`}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
|
|
3094
|
+
`}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(t,e=null){this.viewDate=t,e&&(this.currentView=e),this.dispatchEvent(new CustomEvent("view-date-change",{detail:{date:this.viewDate}}))}handleNavClick(t){let e=this.viewDate;e="days"===this.currentView?re(this.viewDate,t):"months"===this.currentView?ue(this.viewDate,t):ue(this.viewDate,21*t),this._updateView(e)}handleYearSelect(t){const e=function(t,e,i){const o=oe(t,i?.in);return isNaN(+o)?ie(t,NaN):(o.setFullYear(e),o)}(this.viewDate,t);this._updateView(e,"months")}handleMonthSelect(t){const e=function(t,e,i){const o=oe(t,i?.in),r=o.getFullYear(),n=o.getDate(),a=ie(t,0);a.setFullYear(r,e,15),a.setHours(0,0,0,0);const s=ti(a);return o.setMonth(e,Math.min(n,s)),o}(this.viewDate,t);this._updateView(e,"days")}handleDayClick(t){this.selectedDate=t,this.dispatchEvent(new CustomEvent("date-selected",{detail:{date:t},bubbles:!0,composed:!0}))}getFullMonthNames(){return["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"]}getShortMonthNames(){return this.getFullMonthNames().map((t=>t.substring(0,3)))}getShortWeekdays(){return["lu","ma","mi","ju","vi","sa","do"]}renderHeader(){const t=this.getFullMonthNames();let i="",o=!1,r=!1;if("years"===this.currentView){const t=this.viewDate.getFullYear()-this.viewDate.getFullYear()%21,e=t+20;i=`${t} - ${e}`;o=t<=(this.minDate?this.minDate.getFullYear():-1/0),r=e>=(this.maxDate?this.maxDate.getFullYear():1/0)}else if("months"===this.currentView){i=`${this.viewDate.getFullYear()}`;const t=this.viewDate.getFullYear();o=t<=(this.minDate?this.minDate.getFullYear():-1/0),r=t>=(this.maxDate?this.maxDate.getFullYear():1/0)}else{i=`${t[this.viewDate.getMonth()]} ${this.viewDate.getFullYear()}`,this.minDate&&(o=oi(me(this.viewDate),me(this.minDate))||ii(this.viewDate,this.minDate)),this.maxDate&&(r=oi(me(this.viewDate),me(this.maxDate))||ei(this.viewDate,this.maxDate))}return e`
|
|
3156
3095
|
<div class="header">
|
|
3157
3096
|
<div class="header-left">
|
|
3158
3097
|
<button class="month-year-button" @click=${this.handleHeaderClick}>
|
|
3159
|
-
<span>${
|
|
3098
|
+
<span>${i}</span>
|
|
3160
3099
|
|
|
3161
|
-
${"days"===this.currentView?
|
|
3100
|
+
${"days"===this.currentView?e`<randstad-icon name="arrow_drop_down" class="select-icon"></randstad-icon>`:e`<randstad-icon name="arrow_drop_up" class="select-icon"></randstad-icon>`}
|
|
3162
3101
|
</button>
|
|
3163
3102
|
</div>
|
|
3164
3103
|
|
|
@@ -3172,78 +3111,75 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
3172
3111
|
</button>
|
|
3173
3112
|
</div>
|
|
3174
3113
|
</div>
|
|
3175
|
-
`}renderYearsView(){const
|
|
3114
|
+
`}renderYearsView(){const t=this.viewDate.getFullYear()-this.viewDate.getFullYear()%21,i=Array.from({length:21},((e,i)=>t+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 e`
|
|
3176
3115
|
<div class="year-grid">
|
|
3177
|
-
${
|
|
3116
|
+
${i.map((t=>e`
|
|
3178
3117
|
<button
|
|
3179
|
-
class="${"year-button "+(
|
|
3180
|
-
@click=${()=>this.handleYearSelect(
|
|
3181
|
-
?disabled=${
|
|
3118
|
+
class="${"year-button "+(t===o?"selected":t===r?"current":"")}"
|
|
3119
|
+
@click=${()=>this.handleYearSelect(t)}
|
|
3120
|
+
?disabled=${t<n||t>a}
|
|
3182
3121
|
>
|
|
3183
|
-
${
|
|
3122
|
+
${t}
|
|
3184
3123
|
</button>
|
|
3185
3124
|
`))}
|
|
3186
3125
|
</div>
|
|
3187
|
-
`}renderMonthsView(){const
|
|
3126
|
+
`}renderMonthsView(){const t=this.getShortMonthNames(),i=this.selectedDate?.getMonth(),o=(new Date).getMonth(),r=this.viewDate.getFullYear();return e`
|
|
3188
3127
|
<div class="month-grid">
|
|
3189
|
-
${
|
|
3128
|
+
${t.map(((t,n)=>{const a=n===o,s=n===i&&this.selectedDate&&ri(this.viewDate,this.selectedDate),d=n===i&&this.selectedDate&&!ri(this.viewDate,this.selectedDate);let l=!1;this.minDate&&r===this.minDate.getFullYear()&&(l=n<this.minDate.getMonth()),this.maxDate&&r===this.maxDate.getFullYear()&&(l=l||n>this.maxDate.getMonth());return e`
|
|
3190
3129
|
<button
|
|
3191
|
-
class="${"month-button "+(s?"selected":
|
|
3192
|
-
?disabled=${
|
|
3130
|
+
class="${"month-button "+(s?"selected":d?"secondary-selected":a?"current":"")}"
|
|
3131
|
+
?disabled=${l}
|
|
3193
3132
|
@click=${()=>this.handleMonthSelect(n)}
|
|
3194
3133
|
>
|
|
3195
|
-
${
|
|
3134
|
+
${t}
|
|
3196
3135
|
</button>
|
|
3197
3136
|
`}))}
|
|
3198
3137
|
</div>
|
|
3199
|
-
`}renderDayView(){const
|
|
3138
|
+
`}renderDayView(){const t=ti(this.viewDate),i=me(this.viewDate),o=oe(i,r?.in).getDay();var r;const n=Array.from({length:0===o?6:o-1},(()=>null)),a=Array.from({length:t},((t,e)=>function(t,e,i){const o=oe(t,i?.in);return o.setDate(e),o}(i,e+1))),s=this.getShortWeekdays();return e`
|
|
3200
3139
|
<div class="weekdays">
|
|
3201
|
-
${s.map((e
|
|
3140
|
+
${s.map((t=>e`<div>${t}</div>`))}
|
|
3202
3141
|
</div>
|
|
3203
3142
|
|
|
3204
3143
|
<div class="days-grid">
|
|
3205
|
-
${n.map((()=>
|
|
3206
|
-
${a.map((
|
|
3144
|
+
${n.map((()=>e`<div></div>`))}
|
|
3145
|
+
${a.map((t=>{const i=pe(t),o=this.selectedDate?pe(this.selectedDate):null,r=this.minDate&&ii(i,pe(this.minDate))||this.maxDate&&ei(i,pe(this.maxDate)),n=ni(i),a=o&&Ze(i)===Ze(o),s=a&&o&&oi(i,o)&&ri(i,o);return e`
|
|
3207
3146
|
<button
|
|
3208
3147
|
class="${`day ${n?"today":""} ${s?"selected":a&&!s?"secondary-selected":""}`}"
|
|
3209
3148
|
?disabled=${r}
|
|
3210
|
-
@click=${()=>this.handleDayClick(
|
|
3149
|
+
@click=${()=>this.handleDayClick(t)}
|
|
3211
3150
|
>
|
|
3212
|
-
${
|
|
3151
|
+
${Qe(t,"d")}
|
|
3213
3152
|
</button>
|
|
3214
3153
|
`}))}
|
|
3215
3154
|
</div>
|
|
3216
|
-
`}render(){let
|
|
3155
|
+
`}render(){let t;t="days"===this.currentView?this.renderDayView():"months"===this.currentView?this.renderMonthsView():this.renderYearsView();const i=e`${this.renderHeader()} <div class="weekdays-separator"></div> ${t}`;return this.isMobile?e`
|
|
3217
3156
|
<div
|
|
3218
3157
|
class="mobile-backdrop"
|
|
3219
3158
|
@click=${()=>this.dispatchEvent(new CustomEvent("close"))}
|
|
3220
3159
|
>
|
|
3221
|
-
<div class="mobile-modal" @click=${
|
|
3222
|
-
${
|
|
3160
|
+
<div class="mobile-modal" @click=${t=>t.stopPropagation()}>
|
|
3161
|
+
${i}
|
|
3223
3162
|
</div>
|
|
3224
3163
|
</div>
|
|
3225
|
-
`:
|
|
3164
|
+
`:e`
|
|
3226
3165
|
<div class="calendar-container" style="width: ${this.calendarWidth}px;">
|
|
3227
|
-
${
|
|
3166
|
+
${i}
|
|
3228
3167
|
</div>
|
|
3229
|
-
`}};a([
|
|
3230
|
-
|
|
3231
|
-
|
|
3232
|
-
|
|
3233
|
-
font-family: "Graphik", sans-serif;
|
|
3234
|
-
color: var(--secondary-randstad-dark-blue, #0f1941);
|
|
3235
|
-
}
|
|
3168
|
+
`}};a([T({type:Object}),s("design:type",Object)],ai.prototype,"selectedDate",void 0),a([T({type:Object}),s("design:type",Date)],ai.prototype,"viewDate",void 0),a([T({type:Boolean}),s("design:type",Object)],ai.prototype,"isMobile",void 0),a([T({type:Number}),s("design:type",Number)],ai.prototype,"calendarWidth",void 0),a([T({type:Object}),s("design:type",Object)],ai.prototype,"minDate",void 0),a([T({type:Object}),s("design:type",Object)],ai.prototype,"maxDate",void 0),a([z(),s("design:type",String)],ai.prototype,"currentView",void 0),ai=a([d("calendar-overlay")],ai);let si=class extends L{constructor(){super(...arguments),this.isRenderClearButton=!0,this.isOpen=!1,this.selectedDate=null,this.viewDate=new Date,this.isMobile=!1,this.calendarWidth=0,this.updateResponsiveModeBound=this.updateResponsiveMode.bind(this),this.handleClickOutside=t=>{t.composedPath().includes(this)||(this.isOpen=!1,this.error&&this.closeOverlay(""))}}static{this.styles=o`
|
|
3169
|
+
${X}
|
|
3170
|
+
${Q}
|
|
3171
|
+
${K}
|
|
3236
3172
|
|
|
3237
3173
|
/* Si se proporciona una propiedad width (ej. width="600px"), se usa ese valor. */
|
|
3238
3174
|
:host([width]) {
|
|
3239
3175
|
width: var(--datepicker-width);
|
|
3240
3176
|
}
|
|
3241
3177
|
|
|
3242
|
-
|
|
3243
|
-
|
|
3244
|
-
|
|
3245
|
-
|
|
3246
|
-
|
|
3178
|
+
.datepicker-container {
|
|
3179
|
+
display: flex;
|
|
3180
|
+
flex-direction: column;
|
|
3181
|
+
gap: 8px;
|
|
3182
|
+
width: 100%;
|
|
3247
3183
|
}
|
|
3248
3184
|
|
|
3249
3185
|
/* Estilos para evitar el desbordamiento en móviles */
|
|
@@ -3252,40 +3188,10 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
3252
3188
|
box-sizing: border-box;
|
|
3253
3189
|
}
|
|
3254
3190
|
|
|
3255
|
-
/*
|
|
3256
|
-
.
|
|
3257
|
-
|
|
3258
|
-
|
|
3259
|
-
gap: 4px;
|
|
3260
|
-
margin-bottom: 4px;
|
|
3261
|
-
}
|
|
3262
|
-
|
|
3263
|
-
.form-label {
|
|
3264
|
-
${B}
|
|
3265
|
-
color: var(--secondary-randstad-dark-blue-80, #404767);
|
|
3266
|
-
display: block;
|
|
3267
|
-
}
|
|
3268
|
-
|
|
3269
|
-
/* Estilos para los textos de ayuda y error */
|
|
3270
|
-
.required {
|
|
3271
|
-
color: var(--ui-negative);
|
|
3272
|
-
}
|
|
3273
|
-
|
|
3274
|
-
.optional {
|
|
3275
|
-
color: var(--secondary-color-60);
|
|
3276
|
-
${I}
|
|
3277
|
-
}
|
|
3278
|
-
|
|
3279
|
-
.helper-description {
|
|
3280
|
-
${_}
|
|
3281
|
-
color: var(--secondary-color-40);
|
|
3282
|
-
margin: 0;
|
|
3283
|
-
}
|
|
3284
|
-
|
|
3285
|
-
.error-message {
|
|
3286
|
-
${_}
|
|
3287
|
-
color: var(--ui-negative, #E00F0F);
|
|
3288
|
-
margin-top: 4px;
|
|
3191
|
+
/* Estilos para el estado disabled */
|
|
3192
|
+
.input-wrapper.disabled, .input-wrapper.disabled .date-input {
|
|
3193
|
+
background-color: var(--secondary-color-10);
|
|
3194
|
+
cursor: default;
|
|
3289
3195
|
}
|
|
3290
3196
|
|
|
3291
3197
|
/* Estilos del campo de entrada y sus estados */
|
|
@@ -3315,7 +3221,7 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
3315
3221
|
}
|
|
3316
3222
|
|
|
3317
3223
|
.date-input {
|
|
3318
|
-
${
|
|
3224
|
+
${R}
|
|
3319
3225
|
flex-grow: 1;
|
|
3320
3226
|
border: none;
|
|
3321
3227
|
outline: none;
|
|
@@ -3353,31 +3259,12 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
3353
3259
|
.calendar-button randstad-icon {
|
|
3354
3260
|
font-size: 18px;
|
|
3355
3261
|
}
|
|
3262
|
+
`}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(t){t.has("value")&&this._syncValue(this.value),(t.has("isOpen")||t.has("value"))&&this.setInitialWidth(),super.updated(t)}setInitialWidth(){this.inputContainer&&(this.calendarWidth=this.inputContainer.getBoundingClientRect().width)}updateResponsiveMode(){this.isMobile=window.innerWidth<=940,this.setInitialWidth()}handleInput(t){const e=t.target;this._parseAndValidateDate(e.value,!0)}handleCalendarButtonClick(t){this.disabled||(t.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(t){const e=t.detail.date;e&&(this.selectedDate=e,this.viewDate=e,this.closeOverlay(Qe(e,"dd-MM-yyyy")))}handleViewDateChange(t){this.viewDate=t.detail.date}closeOverlay(t){this.value=t,this.isOpen=!1,this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:t}}))}_syncValue(t){if(""===t)return void(this.error||(this.selectedDate=null,this.errorMessage=null));const e=this._parseDate(t);e&&this._isWithinBounds(e)?(this.selectedDate=e,this.viewDate=e,this.error=!1,this.errorMessage=null,this.value=Qe(e,"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(t,e){if(this.disabled)return;if(""===t)return this.selectedDate=null,this.error=!1,this.errorMessage=null,void(e&&this.closeOverlay(""));const i=this._parseDate(t);if(i)if(this._isWithinBounds(i))this.selectedDate=i,this.viewDate=i,this.error=!1,this.errorMessage=null,e&&this.closeOverlay(Qe(i,"dd-MM-yyyy"));else{this.error=!0;const t=this._getValidDateRange();this.errorMessage=`La fecha debe estar entre ${t?.minDate?Qe(t.minDate,"dd-MM-yyyy"):"el inicio de los tiempos"} y ${t?.maxDate?Qe(t.maxDate,"dd-MM-yyyy"):"el fin de los tiempos"}.`,e&&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'.",e&&this.closeOverlay(""),console.error("Formato de fecha no válido.")}_parseDate(t){const e=t.split("-").map(Number);if(3===e.length){const[i,o,r]=e;if(i&&o&&r&&o>=1&&o<=12&&r>1e3){const e=new Date(r,o-1,i,12);if(be(e)&&Qe(e,"dd-MM-yyyy")===t)return e}}const i=t.split("-").map(Number);if(3===i.length){const[t,e,o]=i;if(t&&e&&o&&e>=1&&e<=12&&t>1e3){const i=new Date(t,e-1,o,12);if(be(i))return i}}return null}_parseDateString(t){if(!t)return null;const e=t.split("-").map(Number);if(3===e.length&&!isNaN(e[0])&&!isNaN(e[1])&&!isNaN(e[2])){return new Date(e[0],e[1]-1,e[2],12)}return null}_getValidDateRange(){const t=this._parseDateString(this.minDate),e=this._parseDateString(this.maxDate);return t||e?t&&e&&ei(t,e)?null:{minDate:t,maxDate:e}:{minDate:null,maxDate:null}}_isWithinBounds(t){const e=this._getValidDateRange();return!e||(!e.minDate||!ii(t,e.minDate))&&(!e.maxDate||!ei(t,e.maxDate))}render(){const t=n({"input-wrapper":!0,active:this.isOpen,error:this.error,disabled:this.disabled}),o=`width: ${this.width||"100%"};`,r=this._getValidDateRange();return e`
|
|
3263
|
+
<div class="datepicker-container" style="${this.labelColor?` --label-color: ${this.labelColor}`:""} ${o}">
|
|
3264
|
+
${this.renderLabelContainer()}
|
|
3356
3265
|
|
|
3357
|
-
|
|
3358
|
-
|
|
3359
|
-
border: 1px solid var(--ui-negative, red) !important;
|
|
3360
|
-
}
|
|
3361
|
-
|
|
3362
|
-
:host([error]) .input-wrapper:hover {
|
|
3363
|
-
box-shadow: 0px 0px 0px 4px #e00f0f1a !important;
|
|
3364
|
-
}
|
|
3365
|
-
|
|
3366
|
-
:host([error]) .input-wrapper.active {
|
|
3367
|
-
border: 1px solid var(--ui-negative, red) !important;
|
|
3368
|
-
box-shadow: none !important;
|
|
3369
|
-
}
|
|
3370
|
-
/* */
|
|
3371
|
-
`}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`
|
|
3372
|
-
<div class="input-container" style="${t}">
|
|
3373
|
-
<div class="label-container">
|
|
3374
|
-
<label class="form-label">
|
|
3375
|
-
${this.label}
|
|
3376
|
-
${this.required?i`<span class="required">*</span>`:this.optional?i`<span class="optional">opcional</span>`:o}
|
|
3377
|
-
</label>
|
|
3378
|
-
</div>
|
|
3379
|
-
|
|
3380
|
-
<div class="${e}" style="width: 100%">
|
|
3266
|
+
<div class="input-container">
|
|
3267
|
+
<div class="${t}" style="width: 100%">
|
|
3381
3268
|
<input
|
|
3382
3269
|
type="text"
|
|
3383
3270
|
class="date-input"
|
|
@@ -3387,14 +3274,14 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
3387
3274
|
@input=${this.handleInput}
|
|
3388
3275
|
/>
|
|
3389
3276
|
|
|
3390
|
-
${this.isRenderClearButton&&this.selectedDate&&!this.disabled?
|
|
3391
|
-
|
|
3392
|
-
|
|
3393
|
-
|
|
3394
|
-
|
|
3395
|
-
|
|
3396
|
-
|
|
3397
|
-
|
|
3277
|
+
${this.isRenderClearButton&&this.selectedDate&&!this.disabled?e`
|
|
3278
|
+
<button
|
|
3279
|
+
class="icon-button clear-button"
|
|
3280
|
+
@click=${this.handleClearDate}
|
|
3281
|
+
>
|
|
3282
|
+
<randstad-icon name="close"></randstad-icon>
|
|
3283
|
+
</button>
|
|
3284
|
+
`:i}
|
|
3398
3285
|
|
|
3399
3286
|
<button
|
|
3400
3287
|
class="icon-button calendar-button"
|
|
@@ -3404,39 +3291,30 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
3404
3291
|
</button>
|
|
3405
3292
|
</div>
|
|
3406
3293
|
|
|
3407
|
-
${this.isOpen?
|
|
3294
|
+
${this.isOpen?e`
|
|
3408
3295
|
<calendar-overlay
|
|
3409
3296
|
.isMobile=${this.isMobile}
|
|
3410
3297
|
.selectedDate=${this.selectedDate}
|
|
3411
3298
|
.viewDate=${this.viewDate}
|
|
3412
3299
|
.calendarWidth=${this.calendarWidth}
|
|
3413
|
-
.minDate=${
|
|
3414
|
-
.maxDate=${
|
|
3300
|
+
.minDate=${r?.minDate}
|
|
3301
|
+
.maxDate=${r?.maxDate}
|
|
3415
3302
|
@close=${()=>this.isOpen=!1}
|
|
3416
3303
|
@view-date-change=${this.handleViewDateChange}
|
|
3417
3304
|
@date-selected=${this.handleDateSelect}
|
|
3418
3305
|
>
|
|
3419
3306
|
</calendar-overlay>
|
|
3420
|
-
`:
|
|
3421
|
-
|
|
3422
|
-
${this.
|
|
3307
|
+
`:i}
|
|
3308
|
+
|
|
3309
|
+
${this.renderError()}
|
|
3310
|
+
</div>
|
|
3423
3311
|
|
|
3424
|
-
|
|
3425
|
-
<p
|
|
3426
|
-
class="helper-description"
|
|
3427
|
-
style=${r}
|
|
3428
|
-
>
|
|
3429
|
-
${this.helper}
|
|
3430
|
-
</p>
|
|
3431
|
-
`:o}
|
|
3312
|
+
${this.renderHelper()}
|
|
3432
3313
|
</div>
|
|
3433
|
-
`}};a([
|
|
3434
|
-
|
|
3435
|
-
|
|
3436
|
-
|
|
3437
|
-
font-family: 'Graphik', sans-serif;
|
|
3438
|
-
color: var(--secondary-randstad-dark-blue, #0f1941);
|
|
3439
|
-
}
|
|
3314
|
+
`}};a([T({type:String}),s("design:type",String)],si.prototype,"width",void 0),a([T({type:Boolean}),s("design:type",Object)],si.prototype,"isRenderClearButton",void 0),a([T({type:String}),s("design:type",String)],si.prototype,"minDate",void 0),a([T({type:String}),s("design:type",String)],si.prototype,"maxDate",void 0),a([z(),s("design:type",Object)],si.prototype,"isOpen",void 0),a([z(),s("design:type",Object)],si.prototype,"selectedDate",void 0),a([z(),s("design:type",Date)],si.prototype,"viewDate",void 0),a([z(),s("design:type",Object)],si.prototype,"isMobile",void 0),a([z(),s("design:type",Number)],si.prototype,"calendarWidth",void 0),a([A(".input-container"),s("design:type",HTMLDivElement)],si.prototype,"inputContainer",void 0),si=a([d("datepicker-component")],si);const di={"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 li=class extends L{constructor(){super(...arguments),this.files=[],this.maxFiles=1,this.acceptedFileTypes=[],this.maxFileSize=5242880,this.buttonText="Agregar archivo"}static{this.styles=o`
|
|
3315
|
+
${X}
|
|
3316
|
+
${Q}
|
|
3317
|
+
${K}
|
|
3440
3318
|
|
|
3441
3319
|
:host([width]) {
|
|
3442
3320
|
width: var(--upload-file-width);
|
|
@@ -3446,27 +3324,7 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
3446
3324
|
.file-container {
|
|
3447
3325
|
display: flex;
|
|
3448
3326
|
flex-direction: column;
|
|
3449
|
-
gap:
|
|
3450
|
-
}
|
|
3451
|
-
|
|
3452
|
-
.required {
|
|
3453
|
-
color: var(--ui-negative);
|
|
3454
|
-
}
|
|
3455
|
-
|
|
3456
|
-
.optional {
|
|
3457
|
-
color: var(--secondary-color-60);
|
|
3458
|
-
${I}
|
|
3459
|
-
}
|
|
3460
|
-
|
|
3461
|
-
.label-container {
|
|
3462
|
-
display: flex;
|
|
3463
|
-
align-items: baseline;
|
|
3464
|
-
gap: 4px;
|
|
3465
|
-
}
|
|
3466
|
-
|
|
3467
|
-
.form-label {
|
|
3468
|
-
${_};
|
|
3469
|
-
color: var(--label-color, var(--secondary-color-80, #404767));
|
|
3327
|
+
gap: 8px;
|
|
3470
3328
|
}
|
|
3471
3329
|
|
|
3472
3330
|
input[type="file"] {
|
|
@@ -3495,7 +3353,7 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
3495
3353
|
}
|
|
3496
3354
|
|
|
3497
3355
|
.file-name {
|
|
3498
|
-
${
|
|
3356
|
+
${N};
|
|
3499
3357
|
text-align: right;
|
|
3500
3358
|
color: var(--secondary-color-40);
|
|
3501
3359
|
vertical-align: middle;
|
|
@@ -3509,67 +3367,42 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
3509
3367
|
.remove-file-button {
|
|
3510
3368
|
--primary-color: var(--ui-negative, #E00F0F);
|
|
3511
3369
|
}
|
|
3512
|
-
|
|
3513
|
-
.helper-description {
|
|
3514
|
-
${_};
|
|
3515
|
-
color: var(--secondary-color-40);
|
|
3516
|
-
margin: 0;
|
|
3517
|
-
}
|
|
3518
|
-
|
|
3519
|
-
.error-message {
|
|
3520
|
-
${_};
|
|
3521
|
-
color: var(--ui-negative, #E00F0F);
|
|
3522
|
-
margin-top: -8px;
|
|
3523
|
-
}
|
|
3524
|
-
`}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`
|
|
3370
|
+
`}updated(t){super.updated(t),this.applyWidth()}applyWidth(){this.width&&this.style.setProperty("--upload-file-width",this.width)}getReadableFileTypes(){const t=this.acceptedFileTypes.map((t=>di[t]||t));if(t.length<=1)return t.join("");const e=t.pop();return`${t.join(", ")} y ${e}`}validateFiles(t){const e=this.maxFileSize/1024/1024;for(const i of t){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 ${e}MB.`,!1}return!0}handleFiles(t){if(this.error=!1,this.errorMessage=null,!t||this.disabled)return;const e=Number.isFinite(this.maxFiles)&&this.maxFiles>0?this.maxFiles:1,i=Array.from(t),o=e-this.files.length;if(o<=0)return this.error=!0,void(this.errorMessage=`Se ha alcanzado el número máximo de archivos (${e}).`);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(t){const e=t.target;this.handleFiles(e.files),this.fileInput&&(this.fileInput.value="")}removeFile(t){this.files=this.files.filter(((e,i)=>i!==t)),this.dispatchEvent(new CustomEvent("files-changed",{detail:this.files})),0===this.files.length&&(this.error=!1,this.errorMessage=null)}render(){const t=this.files.length>=this.maxFiles,o=this.disabled||t;return e`
|
|
3525
3371
|
<div class="file-container" style="${this.labelColor?`--label-color: ${this.labelColor};`:""}">
|
|
3526
|
-
${this.
|
|
3527
|
-
<div class="label-container">
|
|
3528
|
-
<label class="form-label">
|
|
3529
|
-
${this.label}
|
|
3530
|
-
${this.required?i`<span class="required">*</span>`:this.optional?i`<span class="optional">opcional</span>`:o}
|
|
3531
|
-
</label>
|
|
3532
|
-
</div>
|
|
3533
|
-
`:""}
|
|
3372
|
+
${this.renderLabelContainer()}
|
|
3534
3373
|
|
|
3535
3374
|
<randstad-button
|
|
3536
3375
|
.label=${this.buttonText}
|
|
3537
3376
|
.variant=${"button-primary"}
|
|
3538
|
-
?disabled=${
|
|
3539
|
-
@click=${()=>this.fileInput?.click()}
|
|
3377
|
+
?disabled=${o}
|
|
3378
|
+
@click=${()=>this.fileInput?.click()}
|
|
3379
|
+
>
|
|
3540
3380
|
</randstad-button>
|
|
3541
3381
|
|
|
3542
3382
|
<input
|
|
3543
3383
|
type="file"
|
|
3544
3384
|
accept=${this.acceptedFileTypes.join(",")}
|
|
3545
3385
|
?multiple=${this.maxFiles>1}
|
|
3546
|
-
?disabled=${
|
|
3386
|
+
?disabled=${o}
|
|
3547
3387
|
@change="${this.onFileInputChange}"
|
|
3548
3388
|
/>
|
|
3549
3389
|
|
|
3550
|
-
${this.
|
|
3390
|
+
${this.renderError()}
|
|
3551
3391
|
|
|
3552
|
-
${this.
|
|
3553
|
-
<p
|
|
3554
|
-
class="helper-description"
|
|
3555
|
-
style=${r}
|
|
3556
|
-
>
|
|
3557
|
-
${this.helper}
|
|
3558
|
-
</p>
|
|
3559
|
-
`:o}
|
|
3392
|
+
${this.renderHelper()}
|
|
3560
3393
|
|
|
3561
|
-
${this.files.length>0?
|
|
3394
|
+
${this.files.length>0?e`
|
|
3562
3395
|
<div class="file-list-container">
|
|
3563
3396
|
<div class="file-list">
|
|
3564
|
-
${this.files.map(((
|
|
3397
|
+
${this.files.map(((t,i)=>e`
|
|
3565
3398
|
<div class="file-item">
|
|
3566
|
-
<span class="file-name">${
|
|
3399
|
+
<span class="file-name">${t.name}</span>
|
|
3567
3400
|
|
|
3568
3401
|
<randstad-button
|
|
3569
3402
|
class="remove-file-button"
|
|
3570
3403
|
.variant=${"button-icon"}
|
|
3571
3404
|
.iconName=${"trash"}
|
|
3572
|
-
@click=${()=>this.removeFile(
|
|
3405
|
+
@click=${()=>this.removeFile(i)}
|
|
3573
3406
|
?disabled=${this.disabled}
|
|
3574
3407
|
>
|
|
3575
3408
|
</randstad-button>
|
|
@@ -3577,7 +3410,7 @@ const Re=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
3577
3410
|
`))}
|
|
3578
3411
|
</div>
|
|
3579
3412
|
</div>
|
|
3580
|
-
`:
|
|
3413
|
+
`:i}
|
|
3581
3414
|
</div>
|
|
3582
|
-
`}};a([
|
|
3415
|
+
`}};a([T({type:String}),s("design:type",String)],li.prototype,"width",void 0),a([T({type:Array}),s("design:type",Array)],li.prototype,"files",void 0),a([T({type:Number}),s("design:type",Object)],li.prototype,"maxFiles",void 0),a([T({type:Array}),s("design:type",Array)],li.prototype,"acceptedFileTypes",void 0),a([T({type:Number}),s("design:type",Object)],li.prototype,"maxFileSize",void 0),a([T({type:String}),s("design:type",Object)],li.prototype,"buttonText",void 0),a([A('input[type="file"]'),s("design:type",HTMLInputElement)],li.prototype,"fileInput",void 0),li=a([d("upload-file")],li);export{Y as AccordionList,W as AccordionPanel,L as BaseControl,ai as CalendarOverlay,H as CarouselCard,G as Checkbox,it as CustomModal,ot as CustomPopup,Ht as CustomRadio,Qt as CustomStepper,si as DatePickerComponent,Gt as FilterableSelect,Z as FormGroup,tt as IconComponent,rt as ProgressCircle,U as RandstadButton,J as RandstadForm,et as RandstadNotice,Jt as TabsBar,li as UploadFile,Zt as UploadImage};
|
|
3583
3416
|
//# sourceMappingURL=index.js.map
|