@momentum-design/components 0.141.0 → 0.141.2
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/browser/index.js +16 -8
- package/dist/browser/index.js.map +2 -2
- package/dist/components/skeleton/skeleton.component.d.ts +2 -0
- package/dist/components/skeleton/skeleton.component.js +2 -0
- package/dist/components/skeleton/skeleton.styles.js +15 -7
- package/dist/components/timepicker/timepicker.component.js +1 -1
- package/dist/custom-elements.json +5 -1
- package/dist/react/skeleton/index.d.ts +2 -0
- package/dist/react/skeleton/index.js +2 -0
- package/package.json +1 -1
package/dist/browser/index.js
CHANGED
|
@@ -6306,9 +6306,11 @@
|
|
|
6306
6306
|
${this.renderHelperText()}
|
|
6307
6307
|
`}};vr.styles=[...ee.styles,...eE],h([u({type:String})],vr.prototype,"placeholder",2),h([u({type:String,reflect:!0})],vr.prototype,"placement",2),h([u({type:String,reflect:!0,attribute:"boundary"})],vr.prototype,"boundary",2),h([u({type:String,reflect:!0,attribute:"strategy"})],vr.prototype,"strategy",2),h([u({type:Number,reflect:!0,attribute:"popover-z-index"})],vr.prototype,"popoverZIndex",2),h([u({type:Boolean,reflect:!0,attribute:"disable-flip"})],vr.prototype,"disableFlip",2),h([u({type:String,reflect:!0,attribute:"backdrop-append-to"})],vr.prototype,"backdropAppendTo",2),h([Ht(`[id="${Lc}"]`)],vr.prototype,"visualCombobox",2),h([lt()],vr.prototype,"selectedOption",2),h([lt()],vr.prototype,"displayPopover",2);var Lm=vr;Lm.register(Qy);var EI=Lm;var Mm=class extends Q{connectedCallback(){super.connectedCallback(),this.role=et.LISTBOX}createRenderRoot(){return this}},Om=Mm;var Mc=$.constructTagName("selectlistbox");Om.register(Mc);var TI=Om;Ss.register(Lo);var xI=Ss;var rE=$.constructTagName("skeleton"),iE={BUTTON:"button",CIRCULAR:"circular",RECTANGULAR:"rectangular",ROUNDED:"rounded"},Rm={MOTION:!1,VARIANT:iE.RECTANGULAR};var AI=z`
|
|
6308
6308
|
:host {
|
|
6309
|
+
--mdc-skeleton-animation-delay: 0s;
|
|
6309
6310
|
--mdc-skeleton-background-color: var(--mds-color-theme-background-skeleton-normal);
|
|
6310
6311
|
--mdc-skeleton-height: 100%;
|
|
6311
6312
|
--mdc-skeleton-width: 100%;
|
|
6313
|
+
position: relative;
|
|
6312
6314
|
display: block;
|
|
6313
6315
|
overflow: hidden;
|
|
6314
6316
|
background-color: var(--mdc-skeleton-background-color);
|
|
@@ -6316,32 +6318,38 @@
|
|
|
6316
6318
|
width: var(--mdc-skeleton-width);
|
|
6317
6319
|
}
|
|
6318
6320
|
|
|
6319
|
-
:host([motion]) {
|
|
6321
|
+
:host([motion])::before {
|
|
6322
|
+
content: '';
|
|
6323
|
+
position: absolute;
|
|
6324
|
+
top: 0;
|
|
6325
|
+
left: 0;
|
|
6326
|
+
width: 200%;
|
|
6327
|
+
height: 100%;
|
|
6328
|
+
pointer-events: none;
|
|
6320
6329
|
background-image: linear-gradient(
|
|
6321
6330
|
90deg,
|
|
6322
6331
|
var(--mds-color-theme-background-skeleton-shimmer-0) 0%,
|
|
6323
6332
|
var(--mds-color-theme-background-skeleton-shimmer-1) 50%,
|
|
6324
6333
|
var(--mds-color-theme-background-skeleton-shimmer-2) 100%
|
|
6325
6334
|
);
|
|
6326
|
-
background-repeat: no-repeat;
|
|
6327
|
-
background-size: 200% 100%;
|
|
6328
6335
|
animation: skeleton-shimmer 2s linear infinite;
|
|
6336
|
+
animation-delay: var(--mdc-skeleton-animation-delay);
|
|
6329
6337
|
}
|
|
6330
6338
|
|
|
6331
6339
|
@media (prefers-reduced-motion: reduce) {
|
|
6332
|
-
:host([motion]) {
|
|
6340
|
+
:host([motion])::before {
|
|
6333
6341
|
animation: none;
|
|
6334
|
-
|
|
6342
|
+
transform: translateX(-25%);
|
|
6335
6343
|
}
|
|
6336
6344
|
}
|
|
6337
6345
|
|
|
6338
6346
|
@keyframes skeleton-shimmer {
|
|
6339
6347
|
0% {
|
|
6340
|
-
|
|
6348
|
+
transform: translateX(-100%);
|
|
6341
6349
|
}
|
|
6342
6350
|
|
|
6343
6351
|
100% {
|
|
6344
|
-
|
|
6352
|
+
transform: translateX(100%);
|
|
6345
6353
|
}
|
|
6346
6354
|
}
|
|
6347
6355
|
|
|
@@ -7404,7 +7412,7 @@
|
|
|
7404
7412
|
--mdc-timepicker-text-color: var(--mds-color-theme-text-primary-disabled);
|
|
7405
7413
|
color: var(--mds-color-theme-text-primary-disabled);
|
|
7406
7414
|
}
|
|
7407
|
-
`,TE=[UI,...xt(!0)];var Dt=class extends ve(oe(ee)){constructor(){super(...arguments);this.timeFormat=He.TIME_FORMAT;this.interval=He.INTERVAL;this.placement=Mt.BOTTOM_START;this.strategy=Et.STRATEGY;this.disableFlip=He.DISABLE_FLIP;this.localeHoursLabel="";this.localeMinutesLabel="";this.localePeriodLabel="";this.localeHoursPlaceholder="";this.localeMinutesPlaceholder="";this.localePeriodPlaceholder="";this.localeAmLabel="";this.localePmLabel="";this.localeShowTimePickerLabel="";this.localeTimeOptionsLabel="";this.localeSpinbuttonDescription="";this.displayPopover=!1;this.internalHours="";this.internalMinutes="";this.internalPeriod="AM";this.focusedOptionIndex=-1;this.pendingDigits=""}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{this.parseValueToInternal(),this.syncFormValue()}).catch(t=>{this.onerror&&this.onerror(t)})}disconnectedCallback(){super.disconnectedCallback(),this.pendingDigitTimeout&&clearTimeout(this.pendingDigitTimeout)}willUpdate(t){super.willUpdate(t),t.has("value")&&!this.displayPopover&&(this.parseValueToInternal(),this.syncFormValue()),(t.has("disabled")||t.has("softDisabled")||t.has("readonly"))&&(this.disabled||this.softDisabled||this.readonly)&&(this.displayPopover=!1)}updated(t){super.updated(t),t.has("displayPopover")&&this.displayPopover&&this.focusMenuItemOnOpen()}focusMenuItemOnOpen(){this.focusedOptionIndex=this.getMenuItemFocusIndex(),this.updateComplete.then(()=>{window.requestAnimationFrame(()=>{this.focusCurrentMenuItem()})}).catch(()=>{})}getMenuItemFocusIndex(){let t=this.getTimeOptions(),e=this.internalToValue(),i=t.findIndex(a=>a.value===e);return i>=0?i:0}focusCurrentMenuItem(){var a;let t=(a=this.shadowRoot)==null?void 0:a.querySelector(`#${Zm}`);if(!t)return;let i=t.querySelectorAll("mdc-option")[this.focusedOptionIndex];i&&(i.focus({preventScroll:!0}),i.scrollIntoView({block:"nearest"}))}formResetCallback(){this.value="",this.internalHours="",this.internalMinutes="",this.internalPeriod="AM",this.syncFormValue(),this.requestUpdate()}formStateRestoreCallback(t){this.value=t,this.parseValueToInternal()}parseValueToInternal(){if(!this.value){this.internalHours="",this.internalMinutes="",this.internalPeriod="AM";return}let t=this.value.match(/^(\d{1,2}):(\d{2})$/);if(!t)return;let e=parseInt(t[1],10),i=parseInt(t[2],10);e<0||e>23||i<0||i>59||(this.internalMinutes=String(i).padStart(2,"0"),this.timeFormat===Fo.TWELVE_HOUR?e===0?(this.internalPeriod="AM",this.internalHours="12"):e<12?(this.internalPeriod="AM",this.internalHours=String(e).padStart(2,"0")):e===12?(this.internalPeriod="PM",this.internalHours="12"):(this.internalPeriod="PM",this.internalHours=String(e-12).padStart(2,"0")):this.internalHours=String(e).padStart(2,"0"))}internalToValue(){if(!this.internalHours||!this.internalMinutes)return"";let t=parseInt(this.internalHours,10);return this.timeFormat===Fo.TWELVE_HOUR&&(this.internalPeriod==="AM"?t=t===12?0:t:t=t===12?12:t+12),`${String(t).padStart(2,"0")}:${this.internalMinutes}`}syncFormValue(){let t=this.internalToValue();this.internals.setFormValue(t||this.value)}commitValue(){let t=this.internalToValue();t&&t!==this.value&&(this.value=t,this.syncFormValue(),this.dispatchEvent(new CustomEvent("input",{detail:{value:this.value},composed:!0,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},composed:!0,bubbles:!0})))}getTimeOptions(){let t=[],e=Math.max(1,Math.min(this.interval,60));for(let i=0;i<24*60;i+=e){let a=Math.floor(i/60),d=i%60,f=`${String(a).padStart(2,"0")}:${String(d).padStart(2,"0")}`,v;if(this.timeFormat===Fo.TWELVE_HOUR){let U=a<12?this.localeAmLabel:this.localePmLabel,J=a%12;J===0&&(J=12);let j=String(d).padStart(2,"0");v=`${J}:${j} ${U}`}else v
|
|
7415
|
+
`,TE=[UI,...xt(!0)];var Dt=class extends ve(oe(ee)){constructor(){super(...arguments);this.timeFormat=He.TIME_FORMAT;this.interval=He.INTERVAL;this.placement=Mt.BOTTOM_START;this.strategy=Et.STRATEGY;this.disableFlip=He.DISABLE_FLIP;this.localeHoursLabel="";this.localeMinutesLabel="";this.localePeriodLabel="";this.localeHoursPlaceholder="";this.localeMinutesPlaceholder="";this.localePeriodPlaceholder="";this.localeAmLabel="";this.localePmLabel="";this.localeShowTimePickerLabel="";this.localeTimeOptionsLabel="";this.localeSpinbuttonDescription="";this.displayPopover=!1;this.internalHours="";this.internalMinutes="";this.internalPeriod="AM";this.focusedOptionIndex=-1;this.pendingDigits=""}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{this.parseValueToInternal(),this.syncFormValue()}).catch(t=>{this.onerror&&this.onerror(t)})}disconnectedCallback(){super.disconnectedCallback(),this.pendingDigitTimeout&&clearTimeout(this.pendingDigitTimeout)}willUpdate(t){super.willUpdate(t),t.has("value")&&!this.displayPopover&&(this.parseValueToInternal(),this.syncFormValue()),(t.has("disabled")||t.has("softDisabled")||t.has("readonly"))&&(this.disabled||this.softDisabled||this.readonly)&&(this.displayPopover=!1)}updated(t){super.updated(t),t.has("displayPopover")&&this.displayPopover&&this.focusMenuItemOnOpen()}focusMenuItemOnOpen(){this.focusedOptionIndex=this.getMenuItemFocusIndex(),this.updateComplete.then(()=>{window.requestAnimationFrame(()=>{this.focusCurrentMenuItem()})}).catch(()=>{})}getMenuItemFocusIndex(){let t=this.getTimeOptions(),e=this.internalToValue(),i=t.findIndex(a=>a.value===e);return i>=0?i:0}focusCurrentMenuItem(){var a;let t=(a=this.shadowRoot)==null?void 0:a.querySelector(`#${Zm}`);if(!t)return;let i=t.querySelectorAll("mdc-option")[this.focusedOptionIndex];i&&(i.focus({preventScroll:!0}),i.scrollIntoView({block:"nearest"}))}formResetCallback(){this.value="",this.internalHours="",this.internalMinutes="",this.internalPeriod="AM",this.syncFormValue(),this.requestUpdate()}formStateRestoreCallback(t){this.value=t,this.parseValueToInternal()}parseValueToInternal(){if(!this.value){this.internalHours="",this.internalMinutes="",this.internalPeriod="AM";return}let t=this.value.match(/^(\d{1,2}):(\d{2})$/);if(!t)return;let e=parseInt(t[1],10),i=parseInt(t[2],10);e<0||e>23||i<0||i>59||(this.internalMinutes=String(i).padStart(2,"0"),this.timeFormat===Fo.TWELVE_HOUR?e===0?(this.internalPeriod="AM",this.internalHours="12"):e<12?(this.internalPeriod="AM",this.internalHours=String(e).padStart(2,"0")):e===12?(this.internalPeriod="PM",this.internalHours="12"):(this.internalPeriod="PM",this.internalHours=String(e-12).padStart(2,"0")):this.internalHours=String(e).padStart(2,"0"))}internalToValue(){if(!this.internalHours||!this.internalMinutes)return"";let t=parseInt(this.internalHours,10);return this.timeFormat===Fo.TWELVE_HOUR&&(this.internalPeriod==="AM"?t=t===12?0:t:t=t===12?12:t+12),`${String(t).padStart(2,"0")}:${this.internalMinutes}`}syncFormValue(){let t=this.internalToValue();this.internals.setFormValue(t||this.value)}commitValue(){let t=this.internalToValue();t&&t!==this.value&&(this.value=t,this.syncFormValue(),this.dispatchEvent(new CustomEvent("input",{detail:{value:this.value},composed:!0,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},composed:!0,bubbles:!0})))}getTimeOptions(){let t=[],e=Math.max(1,Math.min(this.interval,60));for(let i=0;i<24*60;i+=e){let a=Math.floor(i/60),d=i%60,f=`${String(a).padStart(2,"0")}:${String(d).padStart(2,"0")}`,v;if(this.timeFormat===Fo.TWELVE_HOUR){let U=a<12?this.localeAmLabel:this.localePmLabel,J=a%12;J===0&&(J=12);let j=String(d).padStart(2,"0");v=`${J}:${j} ${U}`}else v=f;let S=!this.min||f>=this.min,R=!this.max||f<=this.max;S&&R&&t.push({label:v,value:f})}return t}handleOptionClick(t){var e;this.value=t,this.parseValueToInternal(),this.displayPopover=!1,this.syncFormValue(),this.dispatchEvent(new CustomEvent("input",{detail:{value:this.value},composed:!0,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},composed:!0,bubbles:!0})),(e=this.dropdownButton)==null||e.focus()}handleDropdownClick(t){this.disabled||this.softDisabled||this.readonly||(this.displayPopover=!this.displayPopover,t.stopPropagation())}handleBaseContainerClick(t){var i,a,d;if(this.disabled||this.softDisabled||this.readonly)return;let e=t.target;if(e.getAttribute("role")!=="spinbutton"){if(e.getAttribute("part")==="base-container"||e.getAttribute("part")==="spinbutton-group"){this.displayPopover=!this.displayPopover,(i=this.dropdownButton)==null||i.focus(),t.stopPropagation();return}(a=this.hoursInput)==null||a.focus(),(d=this.hoursInput)==null||d.select()}}handleBaseKeydown(t){var e;this.disabled||this.softDisabled||this.readonly||t.key===wt.ESCAPE&&this.displayPopover&&(this.displayPopover=!1,(e=this.dropdownButton)==null||e.focus(),t.preventDefault(),t.stopPropagation())}handleListboxKeydown(t){var a;let e=this.getTimeOptions(),i=e.length;if(i!==0)switch(t.key){case wt.ARROW_DOWN:{t.preventDefault(),t.stopPropagation(),this.focusedOptionIndex=(this.focusedOptionIndex+1)%i,this.focusCurrentMenuItem();break}case wt.ARROW_UP:{t.preventDefault(),t.stopPropagation(),this.focusedOptionIndex=(this.focusedOptionIndex-1+i)%i,this.focusCurrentMenuItem();break}case wt.ENTER:{t.preventDefault(),t.stopPropagation(),this.focusedOptionIndex>=0&&this.focusedOptionIndex<i&&this.handleOptionClick(e[this.focusedOptionIndex].value);break}case wt.ESCAPE:{t.preventDefault(),t.stopPropagation(),this.displayPopover=!1,(a=this.dropdownButton)==null||a.focus();break}default:break}}handleHoursKeydown(t){this.handleSpinbuttonKeydown(t,"hours")}handleMinutesKeydown(t){this.handleSpinbuttonKeydown(t,"minutes")}handlePeriodKeydown(t){var e,i;switch(t.key){case wt.ARROW_UP:case wt.ARROW_DOWN:t.preventDefault(),this.internalPeriod=this.internalPeriod==="AM"?"PM":"AM",this.commitValue(),this.requestUpdate();break;case wt.TAB:break;case wt.ARROW_LEFT:t.preventDefault(),(e=this.minutesInput)==null||e.focus(),(i=this.minutesInput)==null||i.select();break;default:{t.preventDefault();let a=this.localeAmLabel.charAt(0).toLowerCase(),d=this.localePmLabel.charAt(0).toLowerCase(),f=t.key.toLowerCase();f===a?(this.internalPeriod="AM",this.commitValue(),this.requestUpdate()):f===d&&(this.internalPeriod="PM",this.commitValue(),this.requestUpdate());break}}}handleSpinbuttonKeydown(t,e){var S,R,U,J,j,Z;let i=this.timeFormat===Fo.TWELVE_HOUR,a,d;e==="hours"?(a=i?He.MIN_HOUR_12:He.MIN_HOUR_24,d=i?He.MAX_HOUR_12:He.MAX_HOUR_24):(a=He.MIN_MINUTE,d=He.MAX_MINUTE);let f=e==="hours"?this.internalHours:this.internalMinutes,v=f?parseInt(f,10):a;switch(t.key){case wt.ARROW_UP:{t.preventDefault(),v=v>=d?a:v+1,this.setSpinbuttonValue(e,v),this.commitValue();break}case wt.ARROW_DOWN:{t.preventDefault(),v=v<=a?d:v-1,this.setSpinbuttonValue(e,v),this.commitValue();break}case wt.ARROW_RIGHT:{t.preventDefault(),e==="hours"?((S=this.minutesInput)==null||S.focus(),(R=this.minutesInput)==null||R.select()):i&&((U=this.periodInput)==null||U.focus(),(J=this.periodInput)==null||J.select());break}case wt.ARROW_LEFT:{t.preventDefault(),e==="minutes"&&((j=this.hoursInput)==null||j.focus(),(Z=this.hoursInput)==null||Z.select());break}case wt.TAB:break;default:{/^\d$/.test(t.key)?(t.preventDefault(),this.handleDigitInput(t.key,e,a,d)):t.preventDefault();break}}}handleDigitInput(t,e,i,a){if(this.pendingDigitTimeout&&clearTimeout(this.pendingDigitTimeout),this.pendingDigits+=t,this.pendingDigits.length>=2){let d=parseInt(this.pendingDigits,10);d>a&&(d=a),d<i&&(d=i),this.setSpinbuttonValue(e,d),this.pendingDigits="",this.commitValue(),this.advanceToNextField(e)}else{let d=parseInt(this.pendingDigits,10),f=Math.floor(a/10);if(d>f){let v=d;v>a&&(v=a),v<i&&(v=i),this.setSpinbuttonValue(e,v),this.pendingDigits="",this.commitValue(),this.advanceToNextField(e)}else this.setSpinbuttonValue(e,d),this.pendingDigitTimeout=setTimeout(()=>{let v=d;v<i&&(v=i),this.setSpinbuttonValue(e,v),this.pendingDigits="",this.commitValue(),this.advanceToNextField(e)},1e3)}}setSpinbuttonValue(t,e){let i=String(e).padStart(2,"0");t==="hours"?this.internalHours=i:this.internalMinutes=i,this.requestUpdate()}advanceToNextField(t){t==="hours"?this.updateComplete.then(()=>{var e,i;(e=this.minutesInput)==null||e.focus(),(i=this.minutesInput)==null||i.select()}).catch(()=>{}):this.timeFormat===Fo.TWELVE_HOUR&&this.updateComplete.then(()=>{var e,i;(e=this.periodInput)==null||e.focus(),(i=this.periodInput)==null||i.select()}).catch(()=>{})}handleSpinbuttonFocus(t){t.target.select(),this.pendingDigits="",this.pendingDigitTimeout&&clearTimeout(this.pendingDigitTimeout)}get displayPeriod(){return this.internalPeriod==="AM"?this.localeAmLabel:this.localePmLabel}get hoursPlaceholder(){return this.localeHoursPlaceholder}get minutesPlaceholder(){return this.localeMinutesPlaceholder}get periodPlaceholder(){return this.localePeriodPlaceholder}renderTimeOptions(){let t=this.getTimeOptions(),e=this.internalToValue();return t.map(i=>A`
|
|
7408
7416
|
<mdc-option
|
|
7409
7417
|
label="${this.optionLabelFormatter?this.optionLabelFormatter(i.label,i.value):i.label}"
|
|
7410
7418
|
?selected="${i.value===e}"
|