@ionic/core 8.8.14-dev.11783706459.1d5a7aae → 8.8.14-dev.11783984044.10eaba06
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/components/ion-datetime-button.js +1 -1
- package/components/ion-datetime.js +1 -1
- package/components/ion-img.js +1 -1
- package/components/ion-picker-column-option.js +1 -1
- package/components/ion-picker-column.js +1 -1
- package/components/p-BjfgFSSR.js +4 -0
- package/components/p-BsPelv04.js +4 -0
- package/dist/cjs/ion-datetime-button.cjs.entry.js +10 -4
- package/dist/cjs/ion-datetime.cjs.entry.js +17 -11
- package/dist/cjs/ion-img.cjs.entry.js +3 -1
- package/dist/cjs/ion-picker-column-option.cjs.entry.js +9 -3
- package/dist/cjs/ion-picker-column.cjs.entry.js +10 -4
- package/dist/collection/components/datetime/datetime.ios.css +2 -42
- package/dist/collection/components/datetime/datetime.js +17 -10
- package/dist/collection/components/datetime/datetime.md.css +1 -42
- package/dist/collection/components/datetime-button/datetime-button.ios.css +0 -5
- package/dist/collection/components/datetime-button/datetime-button.js +10 -3
- package/dist/collection/components/datetime-button/datetime-button.md.css +0 -5
- package/dist/collection/components/img/img.js +6 -1
- package/dist/collection/components/picker-column/picker-column.css +0 -3
- package/dist/collection/components/picker-column/picker-column.js +11 -4
- package/dist/collection/components/picker-column-option/picker-column-option.js +10 -3
- package/dist/collection/components/picker-column-option/picker-column-option.md.css +1 -6
- package/dist/docs.json +34 -6
- package/dist/esm/ion-datetime-button.entry.js +10 -4
- package/dist/esm/ion-datetime.entry.js +17 -11
- package/dist/esm/ion-img.entry.js +4 -2
- package/dist/esm/ion-picker-column-option.entry.js +9 -3
- package/dist/esm/ion-picker-column.entry.js +10 -4
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-06c232a4.entry.js +4 -0
- package/dist/ionic/p-700795f6.entry.js +4 -0
- package/dist/ionic/p-c0fb8edd.entry.js +4 -0
- package/dist/ionic/p-c38b648e.entry.js +4 -0
- package/dist/ionic/p-f718fccb.entry.js +4 -0
- package/dist/types/components/img/img.d.ts +2 -0
- package/dist/types/components.d.ts +20 -0
- package/hydrate/index.js +51 -23
- package/hydrate/index.mjs +51 -23
- package/package.json +1 -1
- package/components/p-B7KXos3u.js +0 -4
- package/components/p-BimUi1zU.js +0 -4
- package/dist/ionic/p-17827b13.entry.js +0 -4
- package/dist/ionic/p-1ebe2739.entry.js +0 -4
- package/dist/ionic/p-50e1194a.entry.js +0 -4
- package/dist/ionic/p-8b3a64a5.entry.js +0 -4
- package/dist/ionic/p-93a7e5a1.entry.js +0 -4
|
@@ -750,9 +750,9 @@ const checkForPresentationFormatMismatch = (el, presentation, formatOptions) =>
|
|
|
750
750
|
}
|
|
751
751
|
};
|
|
752
752
|
|
|
753
|
-
const datetimeIosCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .datetime-action-buttons ion-button{--color:var(--ion-color-primary, #0054e9)}.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons ion-button{--background:transparent}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2)}:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .time-body-active{color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-primary, #0054e9)}:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}.calendar-month-year{min-width:0}.calendar-month-year-toggle{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}.calendar-month-year-toggle::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}.calendar-month-year-toggle.ion-focused::after{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0;-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host{--background:var(--ion-color-light, #f4f5f8);--background-rgb:var(--ion-color-light-rgb, 244, 245, 248);--title-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),:host(.datetime-presentation-date:not(.datetime-prefer-wheel)){min-height:350px}:host .datetime-header{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc));font-size:min(0.875rem, 22.4px)}:host .datetime-header .datetime-title{color:var(--title-color)}:host .datetime-header .datetime-selected-date{margin-top:10px}.calendar-month-year-toggle{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-height:44px;font-size:min(1rem, 25.6px);font-weight:600}.calendar-month-year-toggle.ion-focused::after{opacity:0.15}.calendar-month-year-toggle #toggle-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:10px}:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,:host .calendar-action-buttons ion-buttons ion-button{color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .calendar-action-buttons .calendar-month-year-toggle ion-icon,:host(.ion-color) .calendar-action-buttons ion-buttons ion-button{color:var(--ion-color-base)}:host .calendar-action-buttons ion-buttons{-ms-flex-align:stretch;align-items:stretch;height:100%}:host .calendar-action-buttons ion-buttons ion-button{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host .calendar-days-of-week{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3));font-size:min(0.75rem, 19.2px);font-weight:600;line-height:24px;text-transform:uppercase}@supports (border-radius: mod(1px, 1px)){.calendar-days-of-week .day-of-week{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}.calendar-day{border-radius:max(8px, mod(min(1rem, 24px), 24px) * 10)}}@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))){.calendar-days-of-week .day-of-week{width:auto;height:auto;overflow:initial}.calendar-day{border-radius:32px}}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;-ms-flex-align:center;align-items:center;height:calc(100% - 16px)}:host .calendar-day-wrapper{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;height:0;min-height:1rem}:host .calendar-day{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}.calendar-day.calendar-day-active{background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);font-size:min(1.375rem, 35.2px)}:host(.ion-color) .calendar-day.calendar-day-active{background:rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-day.calendar-day-today{color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-active,:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-primary, #0054e9);font-weight:600}:host(.ion-color) .calendar-day.calendar-day-active,:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-base)}:host .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-primary, #0054e9);color:var(--ion-color-primary-contrast, #fff)}:host(.ion-color) .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host .calendar-day.calendar-day-adjacent-day{color:var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3))}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:16px;font-size:min(1rem, 25.6px)}:host .datetime-time .time-header{font-weight:600}:host .datetime-buttons{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc))}:host .datetime-buttons ::slotted(ion-buttons),:host .datetime-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host .datetime-action-buttons{width:100%}`;
|
|
753
|
+
const datetimeIosCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons ion-button{--background:transparent}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}.calendar-month-year{min-width:0}.calendar-month-year-toggle{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}.calendar-month-year-toggle::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}.calendar-month-year-toggle.ion-focused::after{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0;-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host{--background:var(--ion-color-light, #f4f5f8);--background-rgb:var(--ion-color-light-rgb, 244, 245, 248);--title-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),:host(.datetime-presentation-date:not(.datetime-prefer-wheel)){min-height:350px}:host .datetime-header{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc));font-size:min(0.875rem, 22.4px)}:host .datetime-header .datetime-title{color:var(--title-color)}:host .datetime-header .datetime-selected-date{margin-top:10px}.calendar-month-year-toggle{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-height:44px;font-size:min(1rem, 25.6px);font-weight:600}.calendar-month-year-toggle.ion-focused::after{opacity:0.15}.calendar-month-year-toggle #toggle-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:10px}:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,:host .calendar-action-buttons ion-buttons ion-button{color:var(--ion-color-base)}:host .calendar-action-buttons ion-buttons{-ms-flex-align:stretch;align-items:stretch;height:100%}:host .calendar-action-buttons ion-buttons ion-button{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host .calendar-days-of-week{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3));font-size:min(0.75rem, 19.2px);font-weight:600;line-height:24px;text-transform:uppercase}@supports (border-radius: mod(1px, 1px)){.calendar-days-of-week .day-of-week{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}.calendar-day{border-radius:max(8px, mod(min(1rem, 24px), 24px) * 10)}}@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))){.calendar-days-of-week .day-of-week{width:auto;height:auto;overflow:initial}.calendar-day{border-radius:32px}}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;-ms-flex-align:center;align-items:center;height:calc(100% - 16px)}:host .calendar-day-wrapper{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;height:0;min-height:1rem}:host .calendar-day{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}.calendar-day.calendar-day-active{background:rgba(var(--ion-color-base-rgb), 0.2);font-size:min(1.375rem, 35.2px)}:host .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-active,:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-base);font-weight:600}:host .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host .calendar-day.calendar-day-adjacent-day{color:var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3))}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:16px;font-size:min(1rem, 25.6px)}:host .datetime-time .time-header{font-weight:600}:host .datetime-buttons{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc))}:host .datetime-buttons ::slotted(ion-buttons),:host .datetime-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host .datetime-action-buttons{width:100%}`;
|
|
754
754
|
|
|
755
|
-
const datetimeMdCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .datetime-action-buttons ion-button{--color:var(--ion-color-primary, #0054e9)}.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons ion-button{--background:transparent}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2)}:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .time-body-active{color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-primary, #0054e9)}:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}.calendar-month-year{min-width:0}.calendar-month-year-toggle{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}.calendar-month-year-toggle::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}.calendar-month-year-toggle.ion-focused::after{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0;-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host{--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));--title-color:var(--ion-color-primary-contrast, #fff)}:host(.ion-color){--title-color:var(--ion-color-contrast)}:host .datetime-header{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:20px;background:var(--ion-color-primary, #0054e9);color:var(--title-color)}:host(.ion-color) .datetime-header{background:var(--ion-color-base)}:host .datetime-header .datetime-title{font-size:0.75rem;text-transform:uppercase}:host .datetime-header .datetime-selected-date{margin-top:30px;font-size:2.125rem}:host .calendar-action-buttons ion-button{--color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}.calendar-month-year-toggle{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:12px;padding-bottom:12px;min-height:48px;background:transparent;color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959));z-index:1}.calendar-month-year-toggle.ion-focused::after{opacity:0.04}.calendar-month-year-toggle ion-ripple-effect{color:currentColor}@media (any-hover: hover){.calendar-month-year-toggle.ion-activatable:not(.ion-focused):hover::after{background:currentColor;opacity:0.04}}:host .calendar-days-of-week{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:0px;padding-bottom:0px;color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray));font-size:0.875rem;line-height:36px}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:4px;padding-bottom:4px;grid-template-rows:repeat(6, 1fr)}:host .calendar-day{width:42px;min-width:42px;height:42px;font-size:0.875rem}:host .calendar-day.calendar-day-today{border:1px solid var(--ion-color-primary, #0054e9);color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .calendar-day.calendar-day-today{border:1px solid var(--ion-color-base);color:var(--ion-color-base)}:host .calendar-day.calendar-day-active,:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-primary-contrast, #fff)}:host(.ion-color) .calendar-day.calendar-day-active,:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-contrast)}.calendar-day.calendar-day-active,.calendar-day.calendar-day-active:focus{border:1px solid var(--ion-color-primary, #0054e9);background:var(--ion-color-primary, #0054e9)}:host(.ion-color) .calendar-day.calendar-day-active,:host(.ion-color) .calendar-day.calendar-day-active:focus{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}:host .calendar-day.calendar-day-adjacent-day{color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray))}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:8px}:host .time-header{color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}:host(.datetime-presentation-month) .datetime-year,:host(.datetime-presentation-year) .datetime-year,:host(.datetime-presentation-month-year) .datetime-year{margin-top:20px;margin-bottom:20px}:host .datetime-buttons{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:10px;padding-bottom:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}`;
|
|
755
|
+
const datetimeMdCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons ion-button{--background:transparent}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}.calendar-month-year{min-width:0}.calendar-month-year-toggle{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}.calendar-month-year-toggle::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}.calendar-month-year-toggle.ion-focused::after{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0;-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host{--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));--title-color:var(--ion-color-contrast)}:host .datetime-header{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:20px;background:var(--ion-color-base);color:var(--title-color)}:host .datetime-header .datetime-title{font-size:0.75rem;text-transform:uppercase}:host .datetime-header .datetime-selected-date{margin-top:30px;font-size:2.125rem}:host .calendar-action-buttons ion-button{--color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}.calendar-month-year-toggle{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:12px;padding-bottom:12px;min-height:48px;background:transparent;color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959));z-index:1}.calendar-month-year-toggle.ion-focused::after{opacity:0.04}.calendar-month-year-toggle ion-ripple-effect{color:currentColor}@media (any-hover: hover){.calendar-month-year-toggle.ion-activatable:not(.ion-focused):hover::after{background:currentColor;opacity:0.04}}:host .calendar-days-of-week{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:0px;padding-bottom:0px;color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray));font-size:0.875rem;line-height:36px}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:4px;padding-bottom:4px;grid-template-rows:repeat(6, 1fr)}:host .calendar-day{width:42px;min-width:42px;height:42px;font-size:0.875rem}:host .calendar-day.calendar-day-today{border:1px solid var(--ion-color-base);color:var(--ion-color-base)}:host .calendar-day.calendar-day-active,:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-contrast)}.calendar-day.calendar-day-active,.calendar-day.calendar-day-active:focus{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}:host .calendar-day.calendar-day-adjacent-day{color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray))}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:8px}:host .time-header{color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}:host(.datetime-presentation-month) .datetime-year,:host(.datetime-presentation-year) .datetime-year,:host(.datetime-presentation-month-year) .datetime-year{margin-top:20px;margin-bottom:20px}:host .datetime-buttons{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:10px;padding-bottom:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}`;
|
|
756
756
|
|
|
757
757
|
const Datetime = class {
|
|
758
758
|
constructor(hostRef) {
|
|
@@ -784,6 +784,12 @@ const Datetime = class {
|
|
|
784
784
|
isAdjacentDay: false,
|
|
785
785
|
};
|
|
786
786
|
this.isTimePopoverOpen = false;
|
|
787
|
+
/**
|
|
788
|
+
* The color to use from your application's color palette.
|
|
789
|
+
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
|
790
|
+
* For more information on colors, see [theming](/docs/theming/basics).
|
|
791
|
+
*/
|
|
792
|
+
this.color = 'primary';
|
|
787
793
|
/**
|
|
788
794
|
* The name of the control, which is submitted with the form data.
|
|
789
795
|
*/
|
|
@@ -1959,7 +1965,7 @@ const Datetime = class {
|
|
|
1959
1965
|
this.setWorkingParts(Object.assign(Object.assign({}, workingParts), findPart));
|
|
1960
1966
|
this.setActiveParts(Object.assign(Object.assign({}, activePart), findPart));
|
|
1961
1967
|
ev.stopPropagation();
|
|
1962
|
-
} }, items.map((item) => (index.h("ion-picker-column-option", {
|
|
1968
|
+
} }, items.map((item) => (index.h("ion-picker-column-option", { part: item.value === todayString ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: item.value, disabled: item.disabled, value: item.value }, item.text)))));
|
|
1963
1969
|
}
|
|
1964
1970
|
renderIndividualDatePickerColumns(forcePresentation) {
|
|
1965
1971
|
const { workingParts, isDateEnabled } = this;
|
|
@@ -2032,7 +2038,7 @@ const Datetime = class {
|
|
|
2032
2038
|
this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { day: ev.detail.value }));
|
|
2033
2039
|
this.setActiveParts(Object.assign(Object.assign({}, activePart), { day: ev.detail.value }));
|
|
2034
2040
|
ev.stopPropagation();
|
|
2035
|
-
} }, days.map((day) => (index.h("ion-picker-column-option", {
|
|
2041
|
+
} }, days.map((day) => (index.h("ion-picker-column-option", { part: day.value === pickerColumnValue ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: day.value, disabled: day.disabled, value: day.value }, day.text)))));
|
|
2036
2042
|
}
|
|
2037
2043
|
renderMonthPickerColumn(months) {
|
|
2038
2044
|
if (months.length === 0) {
|
|
@@ -2047,7 +2053,7 @@ const Datetime = class {
|
|
|
2047
2053
|
this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value }));
|
|
2048
2054
|
}
|
|
2049
2055
|
ev.stopPropagation();
|
|
2050
|
-
} }, months.map((month) => (index.h("ion-picker-column-option", {
|
|
2056
|
+
} }, months.map((month) => (index.h("ion-picker-column-option", { part: month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: month.value, disabled: month.disabled, value: month.value }, month.text)))));
|
|
2051
2057
|
}
|
|
2052
2058
|
renderYearPickerColumn(years) {
|
|
2053
2059
|
if (years.length === 0) {
|
|
@@ -2062,7 +2068,7 @@ const Datetime = class {
|
|
|
2062
2068
|
this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value }));
|
|
2063
2069
|
}
|
|
2064
2070
|
ev.stopPropagation();
|
|
2065
|
-
} }, years.map((year) => (index.h("ion-picker-column-option", {
|
|
2071
|
+
} }, years.map((year) => (index.h("ion-picker-column-option", { part: year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: year.value, disabled: year.disabled, value: year.value }, year.text)))));
|
|
2066
2072
|
}
|
|
2067
2073
|
renderTimePickerColumns(forcePresentation) {
|
|
2068
2074
|
if (['date', 'month', 'month-year', 'year'].includes(forcePresentation)) {
|
|
@@ -2095,7 +2101,7 @@ const Datetime = class {
|
|
|
2095
2101
|
this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
|
|
2096
2102
|
this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { hour: ev.detail.value }));
|
|
2097
2103
|
ev.stopPropagation();
|
|
2098
|
-
} }, hoursData.map((hour) => (index.h("ion-picker-column-option", {
|
|
2104
|
+
} }, hoursData.map((hour) => (index.h("ion-picker-column-option", { part: hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: hour.value, disabled: hour.disabled, value: hour.value }, hour.text)))));
|
|
2099
2105
|
}
|
|
2100
2106
|
renderMinutePickerColumn(minutesData) {
|
|
2101
2107
|
const { disabled, workingParts } = this;
|
|
@@ -2106,7 +2112,7 @@ const Datetime = class {
|
|
|
2106
2112
|
this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
|
|
2107
2113
|
this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { minute: ev.detail.value }));
|
|
2108
2114
|
ev.stopPropagation();
|
|
2109
|
-
} }, minutesData.map((minute) => (index.h("ion-picker-column-option", {
|
|
2115
|
+
} }, minutesData.map((minute) => (index.h("ion-picker-column-option", { part: minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: minute.value, disabled: minute.disabled, value: minute.value }, minute.text)))));
|
|
2110
2116
|
}
|
|
2111
2117
|
renderDayPeriodPickerColumn(dayPeriodData) {
|
|
2112
2118
|
const { disabled, workingParts } = this;
|
|
@@ -2120,7 +2126,7 @@ const Datetime = class {
|
|
|
2120
2126
|
this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
|
|
2121
2127
|
this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { ampm: ev.detail.value, hour }));
|
|
2122
2128
|
ev.stopPropagation();
|
|
2123
|
-
} }, dayPeriodData.map((dayPeriod) => (index.h("ion-picker-column-option", {
|
|
2129
|
+
} }, dayPeriodData.map((dayPeriod) => (index.h("ion-picker-column-option", { part: dayPeriod.value === activePart.ampm ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: dayPeriod.value, disabled: dayPeriod.disabled, value: dayPeriod.value }, dayPeriod.text)))));
|
|
2124
2130
|
}
|
|
2125
2131
|
renderWheelView(forcePresentation) {
|
|
2126
2132
|
const { locale } = this;
|
|
@@ -2457,7 +2463,7 @@ const Datetime = class {
|
|
|
2457
2463
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
2458
2464
|
const hasWheelVariant = hasDatePresentation && preferWheel;
|
|
2459
2465
|
helpers.renderHiddenInput(true, el, name, format.formatValue(value), disabled);
|
|
2460
|
-
return (index.h(index.Host, { key: '
|
|
2466
|
+
return (index.h(index.Host, { key: '5e0b83cb88a87945eaae2f9402751819b75452ee', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
|
|
2461
2467
|
[mode]: true,
|
|
2462
2468
|
['datetime-readonly']: readonly,
|
|
2463
2469
|
['datetime-disabled']: disabled,
|
|
@@ -2467,7 +2473,7 @@ const Datetime = class {
|
|
|
2467
2473
|
[`datetime-size-${size}`]: true,
|
|
2468
2474
|
[`datetime-prefer-wheel`]: hasWheelVariant,
|
|
2469
2475
|
[`datetime-grid`]: isGridStyle,
|
|
2470
|
-
})) }, index.h("div", { key: '
|
|
2476
|
+
})) }, index.h("div", { key: '9f9ba72e9879525961b00abe342a7891492ca0ff', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
|
|
2471
2477
|
}
|
|
2472
2478
|
get el() { return index.getElement(this); }
|
|
2473
2479
|
static get watchers() { return {
|
|
@@ -30,6 +30,8 @@ const Img = class {
|
|
|
30
30
|
this.inheritedAttributes = helpers.inheritAttributes(this.el, ['draggable']);
|
|
31
31
|
}
|
|
32
32
|
componentDidLoad() {
|
|
33
|
+
index.printIonWarning('[ion-img] - This component is deprecated and will be removed in Ionic v10. ' +
|
|
34
|
+
'Use a native <img> with the loading="lazy" attribute instead.', this.el);
|
|
33
35
|
this.addIO();
|
|
34
36
|
}
|
|
35
37
|
disconnectedCallback() {
|
|
@@ -82,7 +84,7 @@ const Img = class {
|
|
|
82
84
|
render() {
|
|
83
85
|
const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
|
|
84
86
|
const { draggable } = inheritedAttributes;
|
|
85
|
-
return (index.h(index.Host, { key: '
|
|
87
|
+
return (index.h(index.Host, { key: '57bfb44d9850381fe7b6fcf0c9019b03f7ef86ec', class: ionicGlobal.getIonMode(this) }, index.h("img", { key: '888ec06a266fa2751fc0147ede6a567f4e2b29a6', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
|
|
86
88
|
}
|
|
87
89
|
get el() { return index.getElement(this); }
|
|
88
90
|
static get watchers() { return {
|
|
@@ -10,7 +10,7 @@ var ionicGlobal = require('./ionic-global-B-cA6LkY.js');
|
|
|
10
10
|
|
|
11
11
|
const pickerColumnOptionIosCss = () => `.picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}`;
|
|
12
12
|
|
|
13
|
-
const pickerColumnOptionMdCss = () => `.picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}:host(.option-active),:host([part~=active]){color:var(--ion-color-
|
|
13
|
+
const pickerColumnOptionMdCss = () => `.picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}:host(.option-active),:host([part~=active]){color:var(--ion-color-base)}`;
|
|
14
14
|
|
|
15
15
|
const PickerColumnOption = class {
|
|
16
16
|
constructor(hostRef) {
|
|
@@ -34,6 +34,12 @@ const PickerColumnOption = class {
|
|
|
34
34
|
* If `true`, the user cannot interact with the picker column option.
|
|
35
35
|
*/
|
|
36
36
|
this.disabled = false;
|
|
37
|
+
/**
|
|
38
|
+
* The color to use from your application's color palette.
|
|
39
|
+
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
|
40
|
+
* For more information on colors, see [theming](/docs/theming/basics).
|
|
41
|
+
*/
|
|
42
|
+
this.color = 'primary';
|
|
37
43
|
}
|
|
38
44
|
/**
|
|
39
45
|
* The aria-label of the option has changed after the
|
|
@@ -93,10 +99,10 @@ const PickerColumnOption = class {
|
|
|
93
99
|
render() {
|
|
94
100
|
const { color, disabled, ariaLabel } = this;
|
|
95
101
|
const mode = ionicGlobal.getIonMode(this);
|
|
96
|
-
return (index.h(index.Host, { key: '
|
|
102
|
+
return (index.h(index.Host, { key: 'c45a1c14a351bf57d7113671164852349be5aa8a', class: theme.createColorClasses(color, {
|
|
97
103
|
[mode]: true,
|
|
98
104
|
['option-disabled']: disabled,
|
|
99
|
-
}) }, index.h("div", { key: '
|
|
105
|
+
}) }, index.h("div", { key: '824930b658c6e3fb493ac4c6c2451d38c6bc4829', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, index.h("slot", { key: '019df4dcf46e629bdbebcd46ed3ab29669feab27' }))));
|
|
100
106
|
}
|
|
101
107
|
get el() { return index.getElement(this); }
|
|
102
108
|
static get watchers() { return {
|
|
@@ -11,7 +11,7 @@ var ionicGlobal = require('./ionic-global-B-cA6LkY.js');
|
|
|
11
11
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
12
12
|
require('./capacitor-DmA66EwP.js');
|
|
13
13
|
|
|
14
|
-
const pickerColumnCss = () => `:host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;max-width:100%;height:200px;font-size:22px;text-align:center}.assistive-focusable{left:0;right:0;top:0;bottom:0;position:absolute;z-index:1;pointer-events:none}.assistive-focusable:focus{outline:none}.picker-opts{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-width:26px;max-height:200px;outline:none;text-align:inherit;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none}.picker-item-empty{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.picker-opts::-webkit-scrollbar{display:none}::slotted(ion-picker-column-option){display:block;scroll-snap-align:center}.picker-item-empty,:host(:not([disabled])) ::slotted(ion-picker-column-option.option-disabled){scroll-snap-align:none}::slotted([slot=prefix]),::slotted([slot=suffix]){max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::slotted([slot=prefix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:end;justify-content:end}::slotted([slot=suffix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:start;justify-content:start}:host(.picker-column-disabled) .picker-opts{overflow-y:hidden}:host(.picker-column-disabled) ::slotted(ion-picker-column-option){cursor:default;opacity:0.4;pointer-events:none}@media (any-hover: hover){:host(:focus) .picker-opts{outline:none;background:rgba(var(--ion-color-
|
|
14
|
+
const pickerColumnCss = () => `:host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;max-width:100%;height:200px;font-size:22px;text-align:center}.assistive-focusable{left:0;right:0;top:0;bottom:0;position:absolute;z-index:1;pointer-events:none}.assistive-focusable:focus{outline:none}.picker-opts{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-width:26px;max-height:200px;outline:none;text-align:inherit;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none}.picker-item-empty{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.picker-opts::-webkit-scrollbar{display:none}::slotted(ion-picker-column-option){display:block;scroll-snap-align:center}.picker-item-empty,:host(:not([disabled])) ::slotted(ion-picker-column-option.option-disabled){scroll-snap-align:none}::slotted([slot=prefix]),::slotted([slot=suffix]){max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::slotted([slot=prefix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:end;justify-content:end}::slotted([slot=suffix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:start;justify-content:start}:host(.picker-column-disabled) .picker-opts{overflow-y:hidden}:host(.picker-column-disabled) ::slotted(ion-picker-column-option){cursor:default;opacity:0.4;pointer-events:none}@media (any-hover: hover){:host(:focus) .picker-opts{outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}`;
|
|
15
15
|
|
|
16
16
|
const PickerColumn = class {
|
|
17
17
|
constructor(hostRef) {
|
|
@@ -27,6 +27,12 @@ const PickerColumn = class {
|
|
|
27
27
|
* If `true`, the user cannot interact with the picker.
|
|
28
28
|
*/
|
|
29
29
|
this.disabled = false;
|
|
30
|
+
/**
|
|
31
|
+
* The color to use from your application's color palette.
|
|
32
|
+
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
|
33
|
+
* For more information on colors, see [theming](/docs/theming/basics).
|
|
34
|
+
*/
|
|
35
|
+
this.color = 'primary';
|
|
30
36
|
/**
|
|
31
37
|
* If `true`, tapping the picker will
|
|
32
38
|
* reveal a number input keyboard that lets
|
|
@@ -544,14 +550,14 @@ const PickerColumn = class {
|
|
|
544
550
|
render() {
|
|
545
551
|
const { color, disabled, isActive, numericInput } = this;
|
|
546
552
|
const mode = ionicGlobal.getIonMode(this);
|
|
547
|
-
return (index.h(index.Host, { key: '
|
|
553
|
+
return (index.h(index.Host, { key: '234c96a501d7ac413b9b0ea56b33017681e25b40', class: theme.createColorClasses(color, {
|
|
548
554
|
[mode]: true,
|
|
549
555
|
['picker-column-active']: isActive,
|
|
550
556
|
['picker-column-numeric-input']: numericInput,
|
|
551
557
|
['picker-column-disabled']: disabled,
|
|
552
|
-
}) }, index.h("slot", { key: '
|
|
558
|
+
}) }, index.h("slot", { key: '9dc15ea0601ddd2cb2e0a745e91e036a8bd96f8b', name: "prefix" }), index.h("div", { key: 'de4fe28ee4bc46b7c0420d6ab0df0e7809443da9', class: "picker-opts", ref: (el) => {
|
|
553
559
|
this.scrollEl = el;
|
|
554
|
-
}, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, index.h("div", { key: '
|
|
560
|
+
}, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, index.h("div", { key: '5297617462cc30e9444039ae032d8bdf718349af', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '55ea39ef867bcb1a11a912d52ecd20cb886c5fb3', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '3496730ce6182ebfd33e0ee4bafc130feb575a31', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("slot", { key: '44c3628aa957d60f799dc7019f72fe8b676c7843' }), index.h("div", { key: '5a1809f6c949678a67e0d4b5bfe93ea335c0161d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '98fd57f1c66dbaebc2db2dd5da142671b3159fd1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '85590708abddfa885994e549deac64866fec938f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), index.h("slot", { key: 'bb7e674f543696a80fcbfb1f68f2e975826898a6', name: "suffix" })));
|
|
555
561
|
}
|
|
556
562
|
get el() { return index.getElement(this); }
|
|
557
563
|
static get watchers() { return {
|
|
@@ -218,10 +218,6 @@
|
|
|
218
218
|
justify-content: space-between;
|
|
219
219
|
}
|
|
220
220
|
|
|
221
|
-
:host .datetime-action-buttons ion-button {
|
|
222
|
-
--color: var(--ion-color-primary, #0054e9);
|
|
223
|
-
}
|
|
224
|
-
|
|
225
221
|
/**
|
|
226
222
|
* The confirm and clear buttons are grouped in a
|
|
227
223
|
* container so that they appear on the end opposite
|
|
@@ -376,11 +372,6 @@
|
|
|
376
372
|
}
|
|
377
373
|
|
|
378
374
|
.calendar-day:not(.calendar-day-adjacent-day):focus {
|
|
379
|
-
background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
|
|
380
|
-
box-shadow: 0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
|
|
381
|
-
}
|
|
382
|
-
|
|
383
|
-
:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus {
|
|
384
375
|
background: rgba(var(--ion-color-base-rgb), 0.2);
|
|
385
376
|
box-shadow: 0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);
|
|
386
377
|
}
|
|
@@ -425,10 +416,6 @@
|
|
|
425
416
|
}
|
|
426
417
|
|
|
427
418
|
:host .time-body-active {
|
|
428
|
-
color: var(--ion-color-primary, #0054e9);
|
|
429
|
-
}
|
|
430
|
-
|
|
431
|
-
:host(.ion-color) .time-body-active {
|
|
432
419
|
color: var(--ion-color-base);
|
|
433
420
|
}
|
|
434
421
|
|
|
@@ -437,10 +424,6 @@
|
|
|
437
424
|
}
|
|
438
425
|
|
|
439
426
|
:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
|
|
440
|
-
color: var(--ion-color-primary, #0054e9);
|
|
441
|
-
}
|
|
442
|
-
|
|
443
|
-
:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
|
|
444
427
|
color: var(--ion-color-base);
|
|
445
428
|
}
|
|
446
429
|
|
|
@@ -620,11 +603,6 @@ ion-picker {
|
|
|
620
603
|
|
|
621
604
|
:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,
|
|
622
605
|
:host .calendar-action-buttons ion-buttons ion-button {
|
|
623
|
-
color: var(--ion-color-primary, #0054e9);
|
|
624
|
-
}
|
|
625
|
-
|
|
626
|
-
:host(.ion-color) .calendar-action-buttons .calendar-month-year-toggle ion-icon,
|
|
627
|
-
:host(.ion-color) .calendar-action-buttons ion-buttons ion-button {
|
|
628
606
|
color: var(--ion-color-base);
|
|
629
607
|
}
|
|
630
608
|
|
|
@@ -790,12 +768,8 @@ ion-picker {
|
|
|
790
768
|
}
|
|
791
769
|
|
|
792
770
|
.calendar-day.calendar-day-active {
|
|
793
|
-
background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
|
|
794
|
-
font-size: min(1.375rem, 35.2px);
|
|
795
|
-
}
|
|
796
|
-
|
|
797
|
-
:host(.ion-color) .calendar-day.calendar-day-active {
|
|
798
771
|
background: rgba(var(--ion-color-base-rgb), 0.2);
|
|
772
|
+
font-size: min(1.375rem, 35.2px);
|
|
799
773
|
}
|
|
800
774
|
|
|
801
775
|
/**
|
|
@@ -803,10 +777,6 @@ ion-picker {
|
|
|
803
777
|
* should have ion-color for text color.
|
|
804
778
|
*/
|
|
805
779
|
:host .calendar-day.calendar-day-today {
|
|
806
|
-
color: var(--ion-color-primary, #0054e9);
|
|
807
|
-
}
|
|
808
|
-
|
|
809
|
-
:host(.ion-color) .calendar-day.calendar-day-today {
|
|
810
780
|
color: var(--ion-color-base);
|
|
811
781
|
}
|
|
812
782
|
|
|
@@ -817,13 +787,8 @@ ion-picker {
|
|
|
817
787
|
*/
|
|
818
788
|
:host .calendar-day.calendar-day-active,
|
|
819
789
|
:host .calendar-day.calendar-day-adjacent-day.calendar-day-active {
|
|
820
|
-
color: var(--ion-color-primary, #0054e9);
|
|
821
|
-
font-weight: 600;
|
|
822
|
-
}
|
|
823
|
-
|
|
824
|
-
:host(.ion-color) .calendar-day.calendar-day-active,
|
|
825
|
-
:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active {
|
|
826
790
|
color: var(--ion-color-base);
|
|
791
|
+
font-weight: 600;
|
|
827
792
|
}
|
|
828
793
|
|
|
829
794
|
/**
|
|
@@ -832,11 +797,6 @@ ion-picker {
|
|
|
832
797
|
* with contrast text.
|
|
833
798
|
*/
|
|
834
799
|
:host .calendar-day.calendar-day-today.calendar-day-active {
|
|
835
|
-
background: var(--ion-color-primary, #0054e9);
|
|
836
|
-
color: var(--ion-color-primary-contrast, #fff);
|
|
837
|
-
}
|
|
838
|
-
|
|
839
|
-
:host(.ion-color) .calendar-day.calendar-day-today.calendar-day-active {
|
|
840
800
|
background: var(--ion-color-base);
|
|
841
801
|
color: var(--ion-color-contrast);
|
|
842
802
|
}
|
|
@@ -75,6 +75,12 @@ export class Datetime {
|
|
|
75
75
|
isAdjacentDay: false,
|
|
76
76
|
};
|
|
77
77
|
this.isTimePopoverOpen = false;
|
|
78
|
+
/**
|
|
79
|
+
* The color to use from your application's color palette.
|
|
80
|
+
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
|
81
|
+
* For more information on colors, see [theming](/docs/theming/basics).
|
|
82
|
+
*/
|
|
83
|
+
this.color = 'primary';
|
|
78
84
|
/**
|
|
79
85
|
* The name of the control, which is submitted with the form data.
|
|
80
86
|
*/
|
|
@@ -1250,7 +1256,7 @@ export class Datetime {
|
|
|
1250
1256
|
this.setWorkingParts(Object.assign(Object.assign({}, workingParts), findPart));
|
|
1251
1257
|
this.setActiveParts(Object.assign(Object.assign({}, activePart), findPart));
|
|
1252
1258
|
ev.stopPropagation();
|
|
1253
|
-
} }, items.map((item) => (h("ion-picker-column-option", {
|
|
1259
|
+
} }, items.map((item) => (h("ion-picker-column-option", { part: item.value === todayString ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: item.value, disabled: item.disabled, value: item.value }, item.text)))));
|
|
1254
1260
|
}
|
|
1255
1261
|
renderIndividualDatePickerColumns(forcePresentation) {
|
|
1256
1262
|
const { workingParts, isDateEnabled } = this;
|
|
@@ -1323,7 +1329,7 @@ export class Datetime {
|
|
|
1323
1329
|
this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { day: ev.detail.value }));
|
|
1324
1330
|
this.setActiveParts(Object.assign(Object.assign({}, activePart), { day: ev.detail.value }));
|
|
1325
1331
|
ev.stopPropagation();
|
|
1326
|
-
} }, days.map((day) => (h("ion-picker-column-option", {
|
|
1332
|
+
} }, days.map((day) => (h("ion-picker-column-option", { part: day.value === pickerColumnValue ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: day.value, disabled: day.disabled, value: day.value }, day.text)))));
|
|
1327
1333
|
}
|
|
1328
1334
|
renderMonthPickerColumn(months) {
|
|
1329
1335
|
if (months.length === 0) {
|
|
@@ -1338,7 +1344,7 @@ export class Datetime {
|
|
|
1338
1344
|
this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value }));
|
|
1339
1345
|
}
|
|
1340
1346
|
ev.stopPropagation();
|
|
1341
|
-
} }, months.map((month) => (h("ion-picker-column-option", {
|
|
1347
|
+
} }, months.map((month) => (h("ion-picker-column-option", { part: month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: month.value, disabled: month.disabled, value: month.value }, month.text)))));
|
|
1342
1348
|
}
|
|
1343
1349
|
renderYearPickerColumn(years) {
|
|
1344
1350
|
if (years.length === 0) {
|
|
@@ -1353,7 +1359,7 @@ export class Datetime {
|
|
|
1353
1359
|
this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value }));
|
|
1354
1360
|
}
|
|
1355
1361
|
ev.stopPropagation();
|
|
1356
|
-
} }, years.map((year) => (h("ion-picker-column-option", {
|
|
1362
|
+
} }, years.map((year) => (h("ion-picker-column-option", { part: year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: year.value, disabled: year.disabled, value: year.value }, year.text)))));
|
|
1357
1363
|
}
|
|
1358
1364
|
renderTimePickerColumns(forcePresentation) {
|
|
1359
1365
|
if (['date', 'month', 'month-year', 'year'].includes(forcePresentation)) {
|
|
@@ -1386,7 +1392,7 @@ export class Datetime {
|
|
|
1386
1392
|
this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
|
|
1387
1393
|
this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { hour: ev.detail.value }));
|
|
1388
1394
|
ev.stopPropagation();
|
|
1389
|
-
} }, hoursData.map((hour) => (h("ion-picker-column-option", {
|
|
1395
|
+
} }, hoursData.map((hour) => (h("ion-picker-column-option", { part: hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: hour.value, disabled: hour.disabled, value: hour.value }, hour.text)))));
|
|
1390
1396
|
}
|
|
1391
1397
|
renderMinutePickerColumn(minutesData) {
|
|
1392
1398
|
const { disabled, workingParts } = this;
|
|
@@ -1397,7 +1403,7 @@ export class Datetime {
|
|
|
1397
1403
|
this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
|
|
1398
1404
|
this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { minute: ev.detail.value }));
|
|
1399
1405
|
ev.stopPropagation();
|
|
1400
|
-
} }, minutesData.map((minute) => (h("ion-picker-column-option", {
|
|
1406
|
+
} }, minutesData.map((minute) => (h("ion-picker-column-option", { part: minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: minute.value, disabled: minute.disabled, value: minute.value }, minute.text)))));
|
|
1401
1407
|
}
|
|
1402
1408
|
renderDayPeriodPickerColumn(dayPeriodData) {
|
|
1403
1409
|
const { disabled, workingParts } = this;
|
|
@@ -1411,7 +1417,7 @@ export class Datetime {
|
|
|
1411
1417
|
this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
|
|
1412
1418
|
this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { ampm: ev.detail.value, hour }));
|
|
1413
1419
|
ev.stopPropagation();
|
|
1414
|
-
} }, dayPeriodData.map((dayPeriod) => (h("ion-picker-column-option", {
|
|
1420
|
+
} }, dayPeriodData.map((dayPeriod) => (h("ion-picker-column-option", { part: dayPeriod.value === activePart.ampm ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: dayPeriod.value, disabled: dayPeriod.disabled, value: dayPeriod.value }, dayPeriod.text)))));
|
|
1415
1421
|
}
|
|
1416
1422
|
renderWheelView(forcePresentation) {
|
|
1417
1423
|
const { locale } = this;
|
|
@@ -1748,7 +1754,7 @@ export class Datetime {
|
|
|
1748
1754
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
1749
1755
|
const hasWheelVariant = hasDatePresentation && preferWheel;
|
|
1750
1756
|
renderHiddenInput(true, el, name, formatValue(value), disabled);
|
|
1751
|
-
return (h(Host, { key: '
|
|
1757
|
+
return (h(Host, { key: '5e0b83cb88a87945eaae2f9402751819b75452ee', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
|
|
1752
1758
|
[mode]: true,
|
|
1753
1759
|
['datetime-readonly']: readonly,
|
|
1754
1760
|
['datetime-disabled']: disabled,
|
|
@@ -1758,7 +1764,7 @@ export class Datetime {
|
|
|
1758
1764
|
[`datetime-size-${size}`]: true,
|
|
1759
1765
|
[`datetime-prefer-wheel`]: hasWheelVariant,
|
|
1760
1766
|
[`datetime-grid`]: isGridStyle,
|
|
1761
|
-
})) }, h("div", { key: '
|
|
1767
|
+
})) }, h("div", { key: '9f9ba72e9879525961b00abe342a7891492ca0ff', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
|
|
1762
1768
|
}
|
|
1763
1769
|
static get is() { return "ion-datetime"; }
|
|
1764
1770
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1800,7 +1806,8 @@ export class Datetime {
|
|
|
1800
1806
|
"getter": false,
|
|
1801
1807
|
"setter": false,
|
|
1802
1808
|
"reflect": false,
|
|
1803
|
-
"attribute": "color"
|
|
1809
|
+
"attribute": "color",
|
|
1810
|
+
"defaultValue": "'primary'"
|
|
1804
1811
|
},
|
|
1805
1812
|
"name": {
|
|
1806
1813
|
"type": "string",
|
|
@@ -218,10 +218,6 @@
|
|
|
218
218
|
justify-content: space-between;
|
|
219
219
|
}
|
|
220
220
|
|
|
221
|
-
:host .datetime-action-buttons ion-button {
|
|
222
|
-
--color: var(--ion-color-primary, #0054e9);
|
|
223
|
-
}
|
|
224
|
-
|
|
225
221
|
/**
|
|
226
222
|
* The confirm and clear buttons are grouped in a
|
|
227
223
|
* container so that they appear on the end opposite
|
|
@@ -376,11 +372,6 @@
|
|
|
376
372
|
}
|
|
377
373
|
|
|
378
374
|
.calendar-day:not(.calendar-day-adjacent-day):focus {
|
|
379
|
-
background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
|
|
380
|
-
box-shadow: 0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
|
|
381
|
-
}
|
|
382
|
-
|
|
383
|
-
:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus {
|
|
384
375
|
background: rgba(var(--ion-color-base-rgb), 0.2);
|
|
385
376
|
box-shadow: 0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);
|
|
386
377
|
}
|
|
@@ -425,10 +416,6 @@
|
|
|
425
416
|
}
|
|
426
417
|
|
|
427
418
|
:host .time-body-active {
|
|
428
|
-
color: var(--ion-color-primary, #0054e9);
|
|
429
|
-
}
|
|
430
|
-
|
|
431
|
-
:host(.ion-color) .time-body-active {
|
|
432
419
|
color: var(--ion-color-base);
|
|
433
420
|
}
|
|
434
421
|
|
|
@@ -437,10 +424,6 @@
|
|
|
437
424
|
}
|
|
438
425
|
|
|
439
426
|
:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
|
|
440
|
-
color: var(--ion-color-primary, #0054e9);
|
|
441
|
-
}
|
|
442
|
-
|
|
443
|
-
:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
|
|
444
427
|
color: var(--ion-color-base);
|
|
445
428
|
}
|
|
446
429
|
|
|
@@ -565,10 +548,6 @@ ion-picker {
|
|
|
565
548
|
*/
|
|
566
549
|
:host {
|
|
567
550
|
--background: var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));
|
|
568
|
-
--title-color: var(--ion-color-primary-contrast, #fff);
|
|
569
|
-
}
|
|
570
|
-
|
|
571
|
-
:host(.ion-color) {
|
|
572
551
|
--title-color: var(--ion-color-contrast);
|
|
573
552
|
}
|
|
574
553
|
|
|
@@ -579,12 +558,8 @@ ion-picker {
|
|
|
579
558
|
padding-inline-end: 20px;
|
|
580
559
|
padding-top: 20px;
|
|
581
560
|
padding-bottom: 20px;
|
|
582
|
-
background: var(--ion-color-primary, #0054e9);
|
|
583
|
-
color: var(--title-color);
|
|
584
|
-
}
|
|
585
|
-
|
|
586
|
-
:host(.ion-color) .datetime-header {
|
|
587
561
|
background: var(--ion-color-base);
|
|
562
|
+
color: var(--title-color);
|
|
588
563
|
}
|
|
589
564
|
|
|
590
565
|
:host .datetime-header .datetime-title {
|
|
@@ -668,11 +643,6 @@ ion-picker {
|
|
|
668
643
|
* should have ion-color for text color.
|
|
669
644
|
*/
|
|
670
645
|
:host .calendar-day.calendar-day-today {
|
|
671
|
-
border: 1px solid var(--ion-color-primary, #0054e9);
|
|
672
|
-
color: var(--ion-color-primary, #0054e9);
|
|
673
|
-
}
|
|
674
|
-
|
|
675
|
-
:host(.ion-color) .calendar-day.calendar-day-today {
|
|
676
646
|
border: 1px solid var(--ion-color-base);
|
|
677
647
|
color: var(--ion-color-base);
|
|
678
648
|
}
|
|
@@ -684,22 +654,11 @@ ion-picker {
|
|
|
684
654
|
*/
|
|
685
655
|
:host .calendar-day.calendar-day-active,
|
|
686
656
|
:host .calendar-day.calendar-day-adjacent-day.calendar-day-active {
|
|
687
|
-
color: var(--ion-color-primary-contrast, #fff);
|
|
688
|
-
}
|
|
689
|
-
|
|
690
|
-
:host(.ion-color) .calendar-day.calendar-day-active,
|
|
691
|
-
:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active {
|
|
692
657
|
color: var(--ion-color-contrast);
|
|
693
658
|
}
|
|
694
659
|
|
|
695
660
|
.calendar-day.calendar-day-active,
|
|
696
661
|
.calendar-day.calendar-day-active:focus {
|
|
697
|
-
border: 1px solid var(--ion-color-primary, #0054e9);
|
|
698
|
-
background: var(--ion-color-primary, #0054e9);
|
|
699
|
-
}
|
|
700
|
-
|
|
701
|
-
:host(.ion-color) .calendar-day.calendar-day-active,
|
|
702
|
-
:host(.ion-color) .calendar-day.calendar-day-active:focus {
|
|
703
662
|
border: 1px solid var(--ion-color-base);
|
|
704
663
|
background: var(--ion-color-base);
|
|
705
664
|
}
|