@getflip/swirl-components 0.425.0 → 0.426.1
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.json +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-button.cjs.entry.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-table.cjs.entry.js +1 -1
- package/dist/cjs/wc-datepicker.cjs.entry.js +160 -34
- package/dist/collection/components/swirl-button/swirl-button.css +6 -3
- package/dist/collection/components/swirl-table/swirl-table.css +11 -4
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-button2.js +1 -1
- package/dist/components/swirl-table.js +1 -1
- package/dist/components/wc-datepicker2.js +162 -34
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-button.entry.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-table.entry.js +1 -1
- package/dist/esm/wc-datepicker.entry.js +160 -34
- package/dist/swirl-components/{p-8c4c52c4.entry.js → p-54d0e3eb.entry.js} +1 -1
- package/dist/swirl-components/p-64c8be03.entry.js +1 -0
- package/dist/swirl-components/p-a001b2e3.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/package.json +2 -2
- package/dist/swirl-components/p-26d34e31.entry.js +0 -1
- package/dist/swirl-components/p-69df6086.entry.js +0 -1
|
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
|
|
|
2
2
|
import { c as classNames } from './index2.js';
|
|
3
3
|
import { D as DesktopMediaQuery } from './media-query.service.js';
|
|
4
4
|
|
|
5
|
-
const swirlButtonCss = ".sc-swirl-button-h{display:inline-block;max-width:100%;flex-shrink:0}.sc-swirl-button-h *.sc-swirl-button{box-sizing:border-box}.button.sc-swirl-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--swirl-button-border-top-left-radius);border-top-right-radius:var(--swirl-button-border-top-right-radius);border-bottom-right-radius:var(--swirl-button-border-bottom-right-radius);border-bottom-left-radius:var(--swirl-button-border-bottom-left-radius);color:var(--s-text-subdued);background-color:var(--swirl-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8);transition:box-shadow 0.3s}.button.sc-swirl-button:hover{background-color:var(--swirl-ghost-button-background-hovered);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.button.sc-swirl-button:active{background-color:var(--swirl-ghost-button-background-pressed)}.button--elevated.sc-swirl-button{box-shadow:var(--s-shadow-level-2)}.button.sc-swirl-button:disabled,.button.button--disabled.sc-swirl-button{color:var(--s-text-disabled);background-color:var(--swirl-ghost-button-background-disabled);cursor:default}.button.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-disabled)}.button.sc-swirl-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button.sc-swirl-button{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button--text-align-start.sc-swirl-button{justify-content:flex-start}.button--text-align-center.sc-swirl-button{justify-content:center}.button--text-align-end.sc-swirl-button{justify-content:flex-end}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-ghost.button--pressed.sc-swirl-button{color:var(--s-text-highlight)}.button--variant-ghost.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-flat.sc-swirl-button{color:var(--s-text-default);background-color:var(--swirl-flat-button-background-default);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.button--variant-flat.sc-swirl-button:hover{background-color:var(--swirl-flat-button-background-hovered)}.button--variant-flat.sc-swirl-button:active{background-color:var(--swirl-flat-button-background-pressed)}.button--variant-flat.sc-swirl-button:disabled,.button--variant-flat.button--disabled.sc-swirl-button{background-color:var(--swirl-flat-button-background-disabled)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-status);background-color:var(--s-action-critical-default)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-critical-hovered)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-critical-pressed)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-status)}.button--variant-flat.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-flat.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-flat.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button{color:var(--s-text-default);outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) * -1)}.button--variant-outline.sc-swirl-button:disabled,.button--variant-outline.button--disabled.sc-swirl-button{outline-color:var(--s-border-default)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical);outline-color:var(--s-border-critical)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)),.button--variant-outline.button--pressed.sc-swirl-button{color:var(--s-text-highlight);outline-color:var(--s-border-highlight)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button,.button--variant-outline.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-outline.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-outline.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.sc-swirl-button{padding:0;border-radius:0;color:var(--swirl-plain-button-text-color-default);background-color:transparent}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-hovered);background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-hovered)}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-pressed);background-color:transparent}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-pressed)}.button--variant-plain.sc-swirl-button:disabled,.button--variant-plain.button--disabled.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled);background-color:transparent}.button--variant-plain.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled)}.button--variant-plain.button--icon-only.sc-swirl-button{padding:0}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.button--intent-primary.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-swirl-button .button__icon.sc-swirl-button{margin-left:0;color:var(--swirl-plain-button-text-color-default)}.button--variant-plain.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-plain.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-on-image.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.6)}.button--variant-on-image.sc-swirl-button:hover{background:rgba(0, 0, 0, 0.5)}.button--variant-on-image.sc-swirl-button:active{background:rgba(0, 0, 0, 0.4)}.button--variant-on-image.sc-swirl-button:disabled,.button--variant-on-image.button--disabled.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.3)}.button--variant-on-image.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-on-image.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-on-image.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.sc-swirl-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default)}.button--variant-floating.sc-swirl-button:not(.button--elevated){box-shadow:var(--s-shadow-level-1)}.button--variant-floating.sc-swirl-button:hover{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-hovered)}.button--variant-floating.sc-swirl-button:active{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-pressed)}.button--variant-floating.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20);border-radius:1.5rem;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-floating.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-hovered)}.button--variant-floating.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-pressed)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-translucent.sc-swirl-button{color:var(--s-text-default);outline:var(--s-border-width-default) solid var(--s-border-translucent-outline);outline-offset:calc(var(--s-border-width-default) * -1);background:var(--s-translucent-medium-default);box-shadow:var(--s-shadow-level-2);-webkit-backdrop-filter:blur(var(--s-blur-s));backdrop-filter:blur(var(--s-blur-s))}.button--variant-translucent.sc-swirl-button:hover{background:var(--s-translucent-medium-hovered)}.button--variant-translucent.sc-swirl-button:active{background:var(--s-translucent-medium-pressed)}.button--variant-translucent.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-translucent.sc-swirl-button:disabled,.button--variant-translucent.button--disabled.sc-swirl-button{color:var(--s-text-subdued);background:var(--s-translucent-medium-default)}.button--variant-translucent.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-translucent.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-default)}.button--icon-position-end.sc-swirl-button .button__icon.sc-swirl-button{margin-right:calc(-1 * var(--s-space-4));margin-left:0;order:2}.button--pill.sc-swirl-button{border-radius:1.25rem}.button--pill.button--size-l.sc-swirl-button{border-radius:1.5rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.button--size-l.sc-swirl-button{border-radius:1.375rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.sc-swirl-button{border-radius:1.125rem}}.button--icon-only.sc-swirl-button{padding:var(--s-space-8)}.button--icon-only.button--pill.sc-swirl-button{border-top-left-radius:var(--swirl-icon-button-border-top-left-radius);border-top-right-radius:var(--swirl-icon-button-border-top-right-radius);border-bottom-right-radius:var(\n --swirl-icon-button-border-bottom-right-radius\n );border-bottom-left-radius:var(\n --swirl-icon-button-border-bottom-left-radius\n )}.button--icon-only.sc-swirl-button .button__icon.sc-swirl-button{margin-right:0;margin-left:0}.button--has-icon.sc-swirl-button .button__icon.sc-swirl-button{display:inline-flex}.button__tag.sc-swirl-button{padding-left:var(--s-space-8);order:3}.button__trailing-slot.sc-swirl-button{order:4}.button__icon.sc-swirl-button{display:none;width:1.5rem;height:1.5rem;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon.sc-swirl-button{width:1.25rem;height:1.25rem}}.button__label.sc-swirl-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}";
|
|
5
|
+
const swirlButtonCss = ".sc-swirl-button-h{display:inline-block;max-width:100%;flex-shrink:0}.sc-swirl-button-h *.sc-swirl-button{box-sizing:border-box}.button.sc-swirl-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--swirl-button-border-top-left-radius);border-top-right-radius:var(--swirl-button-border-top-right-radius);border-bottom-right-radius:var(--swirl-button-border-bottom-right-radius);border-bottom-left-radius:var(--swirl-button-border-bottom-left-radius);color:var(--s-text-subdued);background-color:var(--swirl-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8);transition:box-shadow 0.3s}.button.sc-swirl-button:hover{background-color:var(--swirl-ghost-button-background-hovered);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.button.sc-swirl-button:active{background-color:var(--swirl-ghost-button-background-pressed)}.button--elevated.sc-swirl-button{box-shadow:var(--s-shadow-level-2)}.button.sc-swirl-button:disabled,.button.button--disabled.sc-swirl-button{color:var(--s-text-disabled);cursor:default}.button.sc-swirl-button:disabled:where(:not(.button--variant-ghost)),.button.button--disabled.sc-swirl-button:where(:not(.button--variant-ghost)){background-color:var(--swirl-ghost-button-background-disabled)}.button.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-disabled)}.button.sc-swirl-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button.sc-swirl-button{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button--text-align-start.sc-swirl-button{justify-content:flex-start}.button--text-align-center.sc-swirl-button{justify-content:center}.button--text-align-end.sc-swirl-button{justify-content:flex-end}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-ghost.button--pressed.sc-swirl-button{color:var(--s-text-highlight)}.button--variant-ghost.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-flat.sc-swirl-button{color:var(--s-text-default);background-color:var(--swirl-flat-button-background-default);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.button--variant-flat.sc-swirl-button:hover{background-color:var(--swirl-flat-button-background-hovered)}.button--variant-flat.sc-swirl-button:active{background-color:var(--swirl-flat-button-background-pressed)}.button--variant-flat.sc-swirl-button:disabled,.button--variant-flat.button--disabled.sc-swirl-button{background-color:var(--swirl-flat-button-background-disabled)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-status);background-color:var(--s-action-critical-default)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-critical-hovered)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-critical-pressed)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-status)}.button--variant-flat.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-flat.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-flat.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button{color:var(--s-text-default);outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) * -1)}.button--variant-outline.sc-swirl-button:disabled,.button--variant-outline.button--disabled.sc-swirl-button{outline-color:var(--s-border-default)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical);outline-color:var(--s-border-critical)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)),.button--variant-outline.button--pressed.sc-swirl-button{color:var(--s-text-highlight);outline-color:var(--s-border-highlight)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button,.button--variant-outline.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-outline.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-outline.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.sc-swirl-button{padding:0;border-radius:0;color:var(--swirl-plain-button-text-color-default);background-color:transparent}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-hovered);background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-hovered)}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-pressed);background-color:transparent}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-pressed)}.button--variant-plain.sc-swirl-button:disabled,.button--variant-plain.button--disabled.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled);background-color:transparent}.button--variant-plain.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled)}.button--variant-plain.button--icon-only.sc-swirl-button{padding:0}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.button--intent-primary.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-swirl-button .button__icon.sc-swirl-button{margin-left:0;color:var(--swirl-plain-button-text-color-default)}.button--variant-plain.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-plain.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-on-image.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.6)}.button--variant-on-image.sc-swirl-button:hover{background:rgba(0, 0, 0, 0.5)}.button--variant-on-image.sc-swirl-button:active{background:rgba(0, 0, 0, 0.4)}.button--variant-on-image.sc-swirl-button:disabled,.button--variant-on-image.button--disabled.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.3)}.button--variant-on-image.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-on-image.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-on-image.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.sc-swirl-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default)}.button--variant-floating.sc-swirl-button:not(.button--elevated){box-shadow:var(--s-shadow-level-1)}.button--variant-floating.sc-swirl-button:hover{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-hovered)}.button--variant-floating.sc-swirl-button:active{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-pressed)}.button--variant-floating.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20);border-radius:1.5rem;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-floating.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-hovered)}.button--variant-floating.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-pressed)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-translucent.sc-swirl-button{color:var(--s-text-default);outline:var(--s-border-width-default) solid\n var(--s-border-translucent-outline);outline-offset:calc(var(--s-border-width-default) * -1);background:var(--s-translucent-medium-default);box-shadow:var(--s-shadow-level-2);-webkit-backdrop-filter:blur(var(--s-blur-s));backdrop-filter:blur(var(--s-blur-s))}.button--variant-translucent.sc-swirl-button:hover{background:var(--s-translucent-medium-hovered)}.button--variant-translucent.sc-swirl-button:active{background:var(--s-translucent-medium-pressed)}.button--variant-translucent.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-translucent.sc-swirl-button:disabled,.button--variant-translucent.button--disabled.sc-swirl-button{color:var(--s-text-subdued);background:var(--s-translucent-medium-default)}.button--variant-translucent.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-translucent.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-default)}.button--icon-position-end.sc-swirl-button .button__icon.sc-swirl-button{margin-right:calc(-1 * var(--s-space-4));margin-left:0;order:2}.button--pill.sc-swirl-button{border-radius:1.25rem}.button--pill.button--size-l.sc-swirl-button{border-radius:1.5rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.button--size-l.sc-swirl-button{border-radius:1.375rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.sc-swirl-button{border-radius:1.125rem}}.button--icon-only.sc-swirl-button{padding:var(--s-space-8)}.button--icon-only.button--pill.sc-swirl-button{border-top-left-radius:var(--swirl-icon-button-border-top-left-radius);border-top-right-radius:var(--swirl-icon-button-border-top-right-radius);border-bottom-right-radius:var(\n --swirl-icon-button-border-bottom-right-radius\n );border-bottom-left-radius:var(\n --swirl-icon-button-border-bottom-left-radius\n )}.button--icon-only.sc-swirl-button .button__icon.sc-swirl-button{margin-right:0;margin-left:0}.button--has-icon.sc-swirl-button .button__icon.sc-swirl-button{display:inline-flex}.button__tag.sc-swirl-button{padding-left:var(--s-space-8);order:3}.button__trailing-slot.sc-swirl-button{order:4}.button__icon.sc-swirl-button{display:none;width:1.5rem;height:1.5rem;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon.sc-swirl-button{width:1.25rem;height:1.25rem}}.button__label.sc-swirl-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}";
|
|
6
6
|
|
|
7
7
|
const SwirlButton = /*@__PURE__*/ proxyCustomElement(class SwirlButton extends HTMLElement {
|
|
8
8
|
constructor() {
|
|
@@ -89,7 +89,7 @@ function requireDist () {
|
|
|
89
89
|
var distExports = requireDist();
|
|
90
90
|
var debouncePromise = /*@__PURE__*/getDefaultExportFromCjs(distExports);
|
|
91
91
|
|
|
92
|
-
const swirlTableCss = ".sc-swirl-table-h{position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid\n var(--s-border-highlight)}.table--show-empty-state.sc-swirl-table .table__empty-row.sc-swirl-table{display:flex}.table__container.sc-swirl-table{position:relative;overflow:auto;width:100%}.table__container--scrolled.sc-swirl-table{--swirl-table-sticky-right-shadow:4px 0 16px -4px rgba
|
|
92
|
+
const swirlTableCss = ".sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(23, 23, 23, 0.2);position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}html.theme-dark.sc-swirl-table-h,html.theme-dark .sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(0, 0, 0, 0.2)}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid\n var(--s-border-highlight)}.table--show-empty-state.sc-swirl-table .table__empty-row.sc-swirl-table{display:flex}.table__container.sc-swirl-table{position:relative;overflow:auto;width:100%}.table__container--scrolled.sc-swirl-table{--swirl-table-sticky-right-shadow:4px 0 16px -4px var(--swirl-table-shadow-rgba),\n 2px 0 4px -2px var(--swirl-table-shadow-rgba)}.table__container--scrollable.sc-swirl-table:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px\n var(--swirl-table-shadow-rgba),\n 0px 1px 4px 0px var(--swirl-table-shadow-rgba)}.table__table.sc-swirl-table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header.sc-swirl-table-s>*,.table__header .sc-swirl-table-s>*{display:flex}.table__empty-row.sc-swirl-table{display:none}.table__empty-row-cell.sc-swirl-table{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default)}.table__empty-row-cell.sc-swirl-table>*.sc-swirl-table{flex-grow:1}";
|
|
93
93
|
|
|
94
94
|
const defaultDragDropInstructions = {
|
|
95
95
|
end: "Dropped. Final position in table: {position} of {rowCount}.",
|
|
@@ -104,7 +104,9 @@ function getWeekDays(firstDayOfWeek, locale) {
|
|
|
104
104
|
return [
|
|
105
105
|
Intl.DateTimeFormat(locale, {
|
|
106
106
|
weekday: 'short'
|
|
107
|
-
})
|
|
107
|
+
})
|
|
108
|
+
.format(date)
|
|
109
|
+
.slice(0, 3),
|
|
108
110
|
Intl.DateTimeFormat(locale, {
|
|
109
111
|
weekday: 'long'
|
|
110
112
|
}).format(date)
|
|
@@ -171,12 +173,96 @@ const WCDatepicker = /*@__PURE__*/ proxyCustomElement(class WCDatepicker extends
|
|
|
171
173
|
this.showTodayButton = false;
|
|
172
174
|
this.showYearStepper = false;
|
|
173
175
|
this.startDate = getISODateString(new Date());
|
|
176
|
+
this.maxSearchDays = 365;
|
|
177
|
+
this.goToRangeStartOnSelect = true;
|
|
174
178
|
this.init = () => {
|
|
175
179
|
this.currentDate = this.startDate
|
|
176
180
|
? removeTimezoneOffset(new Date(this.startDate))
|
|
177
181
|
: new Date();
|
|
178
182
|
this.updateWeekdays();
|
|
179
183
|
};
|
|
184
|
+
this.getAvailableDate = (date, direction) => {
|
|
185
|
+
let potentialDate;
|
|
186
|
+
let outOfRange = false;
|
|
187
|
+
switch (direction) {
|
|
188
|
+
case 'previousDay':
|
|
189
|
+
potentialDate = getPreviousDay(date);
|
|
190
|
+
break;
|
|
191
|
+
case 'nextDay':
|
|
192
|
+
potentialDate = getNextDay(date);
|
|
193
|
+
break;
|
|
194
|
+
case 'previousSameWeekDay':
|
|
195
|
+
potentialDate = subDays(date, 7);
|
|
196
|
+
break;
|
|
197
|
+
case 'nextSameWeekDay':
|
|
198
|
+
potentialDate = addDays(date, 7);
|
|
199
|
+
break;
|
|
200
|
+
case 'firstOfMonth':
|
|
201
|
+
potentialDate = getFirstOfMonth(date);
|
|
202
|
+
break;
|
|
203
|
+
case 'lastOfMonth':
|
|
204
|
+
potentialDate = getLastOfMonth(date);
|
|
205
|
+
break;
|
|
206
|
+
case 'previousMonth':
|
|
207
|
+
potentialDate = getPreviousMonth(date);
|
|
208
|
+
break;
|
|
209
|
+
case 'nextMonth':
|
|
210
|
+
potentialDate = getNextMonth(date);
|
|
211
|
+
break;
|
|
212
|
+
case 'previousYear':
|
|
213
|
+
potentialDate = getPreviousYear(date);
|
|
214
|
+
break;
|
|
215
|
+
case 'nextYear':
|
|
216
|
+
potentialDate = getNextYear(date);
|
|
217
|
+
break;
|
|
218
|
+
}
|
|
219
|
+
while (this.disableDate(potentialDate) && !outOfRange) {
|
|
220
|
+
switch (direction) {
|
|
221
|
+
case 'previousDay':
|
|
222
|
+
case 'lastOfMonth':
|
|
223
|
+
potentialDate = getPreviousDay(potentialDate);
|
|
224
|
+
break;
|
|
225
|
+
case 'nextDay':
|
|
226
|
+
case 'firstOfMonth':
|
|
227
|
+
case 'previousMonth':
|
|
228
|
+
case 'nextMonth':
|
|
229
|
+
case 'previousYear':
|
|
230
|
+
case 'nextYear':
|
|
231
|
+
potentialDate = getNextDay(potentialDate);
|
|
232
|
+
break;
|
|
233
|
+
case 'previousSameWeekDay':
|
|
234
|
+
potentialDate = subDays(potentialDate, 7);
|
|
235
|
+
break;
|
|
236
|
+
case 'nextSameWeekDay':
|
|
237
|
+
potentialDate = addDays(potentialDate, 7);
|
|
238
|
+
break;
|
|
239
|
+
}
|
|
240
|
+
switch (direction) {
|
|
241
|
+
case 'firstOfMonth':
|
|
242
|
+
case 'lastOfMonth':
|
|
243
|
+
case 'previousYear':
|
|
244
|
+
case 'nextYear':
|
|
245
|
+
outOfRange = potentialDate.getMonth() !== date.getMonth();
|
|
246
|
+
break;
|
|
247
|
+
case 'previousMonth':
|
|
248
|
+
outOfRange = potentialDate.getMonth() !== date.getMonth() - 1;
|
|
249
|
+
break;
|
|
250
|
+
case 'nextMonth':
|
|
251
|
+
outOfRange = potentialDate.getMonth() !== date.getMonth() + 1;
|
|
252
|
+
break;
|
|
253
|
+
default:
|
|
254
|
+
outOfRange = !isDateInRange(potentialDate, {
|
|
255
|
+
from: subDays(date, this.maxSearchDays),
|
|
256
|
+
to: addDays(date, this.maxSearchDays)
|
|
257
|
+
});
|
|
258
|
+
break;
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
if (outOfRange) {
|
|
262
|
+
return date;
|
|
263
|
+
}
|
|
264
|
+
return potentialDate;
|
|
265
|
+
};
|
|
180
266
|
this.nextMonth = () => {
|
|
181
267
|
this.updateCurrentDate(getNextMonth(this.currentDate));
|
|
182
268
|
};
|
|
@@ -210,9 +296,12 @@ const WCDatepicker = /*@__PURE__*/ proxyCustomElement(class WCDatepicker extends
|
|
|
210
296
|
};
|
|
211
297
|
this.onMonthSelect = (event) => {
|
|
212
298
|
const month = +event.target.value - 1;
|
|
213
|
-
const
|
|
214
|
-
|
|
215
|
-
|
|
299
|
+
const currentDay = this.currentDate.getDate();
|
|
300
|
+
const targetDate = new Date(this.currentDate.getFullYear(), month, 1);
|
|
301
|
+
const lastDayOfTargetMonth = getLastOfMonth(targetDate).getDate();
|
|
302
|
+
const clampedDay = Math.min(currentDay, lastDayOfTargetMonth);
|
|
303
|
+
const updatedDate = new Date(this.currentDate.getFullYear(), month, clampedDay);
|
|
304
|
+
this.updateCurrentDate(updatedDate);
|
|
216
305
|
};
|
|
217
306
|
this.onYearSelect = (event) => {
|
|
218
307
|
let year = +event.target.value;
|
|
@@ -229,9 +318,15 @@ const WCDatepicker = /*@__PURE__*/ proxyCustomElement(class WCDatepicker extends
|
|
|
229
318
|
year = 9999;
|
|
230
319
|
input.value = String(year);
|
|
231
320
|
}
|
|
232
|
-
const
|
|
233
|
-
|
|
234
|
-
|
|
321
|
+
const currentDay = this.currentDate.getDate();
|
|
322
|
+
const currentMonth = this.currentDate.getMonth();
|
|
323
|
+
const targetDate = new Date();
|
|
324
|
+
targetDate.setFullYear(year, currentMonth, 1);
|
|
325
|
+
const lastDayOfTargetMonth = getLastOfMonth(targetDate).getDate();
|
|
326
|
+
const clampedDay = Math.min(currentDay, lastDayOfTargetMonth);
|
|
327
|
+
const updatedDate = new Date();
|
|
328
|
+
updatedDate.setFullYear(year, currentMonth, clampedDay);
|
|
329
|
+
this.updateCurrentDate(updatedDate);
|
|
235
330
|
};
|
|
236
331
|
this.onKeyDown = (event) => {
|
|
237
332
|
if (this.disabled) {
|
|
@@ -239,45 +334,45 @@ const WCDatepicker = /*@__PURE__*/ proxyCustomElement(class WCDatepicker extends
|
|
|
239
334
|
}
|
|
240
335
|
if (event.code === 'ArrowLeft') {
|
|
241
336
|
event.preventDefault();
|
|
242
|
-
this.updateCurrentDate(
|
|
337
|
+
this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'previousDay'), true);
|
|
243
338
|
}
|
|
244
339
|
else if (event.code === 'ArrowRight') {
|
|
245
340
|
event.preventDefault();
|
|
246
|
-
this.updateCurrentDate(
|
|
341
|
+
this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'nextDay'), true);
|
|
247
342
|
}
|
|
248
343
|
else if (event.code === 'ArrowUp') {
|
|
249
344
|
event.preventDefault();
|
|
250
|
-
this.updateCurrentDate(
|
|
345
|
+
this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'previousSameWeekDay'), true);
|
|
251
346
|
}
|
|
252
347
|
else if (event.code === 'ArrowDown') {
|
|
253
348
|
event.preventDefault();
|
|
254
|
-
this.updateCurrentDate(
|
|
349
|
+
this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'nextSameWeekDay'), true);
|
|
255
350
|
}
|
|
256
351
|
else if (event.code === 'PageUp') {
|
|
257
352
|
event.preventDefault();
|
|
258
353
|
if (event.shiftKey) {
|
|
259
|
-
this.updateCurrentDate(
|
|
354
|
+
this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'previousYear'), true);
|
|
260
355
|
}
|
|
261
356
|
else {
|
|
262
|
-
this.updateCurrentDate(
|
|
357
|
+
this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'previousMonth'), true);
|
|
263
358
|
}
|
|
264
359
|
}
|
|
265
360
|
else if (event.code === 'PageDown') {
|
|
266
361
|
event.preventDefault();
|
|
267
362
|
if (event.shiftKey) {
|
|
268
|
-
this.updateCurrentDate(
|
|
363
|
+
this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'nextYear'), true);
|
|
269
364
|
}
|
|
270
365
|
else {
|
|
271
|
-
this.updateCurrentDate(
|
|
366
|
+
this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'nextMonth'), true);
|
|
272
367
|
}
|
|
273
368
|
}
|
|
274
369
|
else if (event.code === 'Home') {
|
|
275
370
|
event.preventDefault();
|
|
276
|
-
this.updateCurrentDate(
|
|
371
|
+
this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'firstOfMonth'), true);
|
|
277
372
|
}
|
|
278
373
|
else if (event.code === 'End') {
|
|
279
374
|
event.preventDefault();
|
|
280
|
-
this.updateCurrentDate(
|
|
375
|
+
this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'lastOfMonth'), true);
|
|
281
376
|
}
|
|
282
377
|
else if (event.code === 'Space' || event.code === 'Enter') {
|
|
283
378
|
event.preventDefault();
|
|
@@ -317,13 +412,17 @@ const WCDatepicker = /*@__PURE__*/ proxyCustomElement(class WCDatepicker extends
|
|
|
317
412
|
: new Date();
|
|
318
413
|
}
|
|
319
414
|
watchValue() {
|
|
320
|
-
if (Boolean(this.value)) {
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
this.
|
|
326
|
-
|
|
415
|
+
if (!Boolean(this.value)) {
|
|
416
|
+
return;
|
|
417
|
+
}
|
|
418
|
+
if (Array.isArray(this.value)) {
|
|
419
|
+
this.currentDate =
|
|
420
|
+
this.value.length > 1 && !this.goToRangeStartOnSelect
|
|
421
|
+
? this.value[1]
|
|
422
|
+
: this.value[0];
|
|
423
|
+
}
|
|
424
|
+
else if (this.value instanceof Date) {
|
|
425
|
+
this.currentDate = this.value;
|
|
327
426
|
}
|
|
328
427
|
}
|
|
329
428
|
componentDidRender() {
|
|
@@ -350,14 +449,36 @@ const WCDatepicker = /*@__PURE__*/ proxyCustomElement(class WCDatepicker extends
|
|
|
350
449
|
return calendarRows;
|
|
351
450
|
}
|
|
352
451
|
getTitle() {
|
|
353
|
-
if (!Boolean(this.
|
|
452
|
+
if (!Boolean(this.value)) {
|
|
354
453
|
return;
|
|
355
454
|
}
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
455
|
+
if (this.isRangeValue(this.value)) {
|
|
456
|
+
const startDate = Intl.DateTimeFormat(this.locale, {
|
|
457
|
+
day: 'numeric',
|
|
458
|
+
month: 'long',
|
|
459
|
+
year: 'numeric'
|
|
460
|
+
}).format(this.value[0]);
|
|
461
|
+
const endDate = this.value[1]
|
|
462
|
+
? Intl.DateTimeFormat(this.locale, {
|
|
463
|
+
day: 'numeric',
|
|
464
|
+
month: 'long',
|
|
465
|
+
year: 'numeric'
|
|
466
|
+
}).format(this.value[1])
|
|
467
|
+
: undefined;
|
|
468
|
+
if (Boolean(endDate)) {
|
|
469
|
+
return `${startDate} - ${endDate}`;
|
|
470
|
+
}
|
|
471
|
+
else {
|
|
472
|
+
return startDate;
|
|
473
|
+
}
|
|
474
|
+
}
|
|
475
|
+
else {
|
|
476
|
+
return Intl.DateTimeFormat(this.locale, {
|
|
477
|
+
day: 'numeric',
|
|
478
|
+
month: 'long',
|
|
479
|
+
year: 'numeric'
|
|
480
|
+
}).format(this.value);
|
|
481
|
+
}
|
|
361
482
|
}
|
|
362
483
|
focusDate(date) {
|
|
363
484
|
var _a;
|
|
@@ -373,7 +494,11 @@ const WCDatepicker = /*@__PURE__*/ proxyCustomElement(class WCDatepicker extends
|
|
|
373
494
|
const monthChanged = month !== this.currentDate.getMonth() ||
|
|
374
495
|
year !== this.currentDate.getFullYear();
|
|
375
496
|
if (monthChanged) {
|
|
376
|
-
this.changeMonth.emit({
|
|
497
|
+
this.changeMonth.emit({
|
|
498
|
+
month: getMonth(date),
|
|
499
|
+
year: getYear(date),
|
|
500
|
+
day: date.getDate()
|
|
501
|
+
});
|
|
377
502
|
if (moveFocus) {
|
|
378
503
|
this.moveFocusAfterMonthChanged = true;
|
|
379
504
|
}
|
|
@@ -418,7 +543,7 @@ const WCDatepicker = /*@__PURE__*/ proxyCustomElement(class WCDatepicker extends
|
|
|
418
543
|
return (h(Host, null, h("div", { "aria-disabled": String(this.disabled), "aria-label": this.labels.picker, class: {
|
|
419
544
|
[this.getClassName()]: true,
|
|
420
545
|
[`${this.getClassName()}--disabled`]: this.disabled
|
|
421
|
-
}, role: "group" }, h("div", { class: this.getClassName('header') }, h("span", { "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle()), this.showYearStepper && (h("button", { "aria-label": this.labels.previousYearButton, class: this.getClassName('previous-year-button'), disabled: this.disabled, innerHTML: this.previousYearButtonContent || undefined, onClick: this.previousYear, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "11 17 6 12 11 7" }), h("polyline", { points: "18 17 13 12 18 7" })))), this.showMonthStepper && (h("button", { "aria-label": this.labels.previousMonthButton, class: this.getClassName('previous-month-button'), disabled: this.disabled, innerHTML: this.previousMonthButtonContent || undefined, onClick: this.previousMonth, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "15 18 9 12 15 6" })))), h("span", { class: this.getClassName('current-month') }, h("select", { "aria-label": this.labels.monthSelect, class: this.getClassName('month-select'), disabled: this.disabled, name: "month", onChange: this.onMonthSelect }, getMonths(this.locale).map((month, index) => (h("option", { key: month, selected: this.currentDate.getMonth() === index, value: index + 1 }, month)))), h("input", { "aria-label": this.labels.yearSelect, class: this.getClassName('year-select'), disabled: this.disabled, max: 9999, maxLength: 4, min: 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && (h("button", { "aria-label": this.labels.nextMonthButton, class: this.getClassName('next-month-button'), disabled: this.disabled, innerHTML: this.nextMonthButtonContent || undefined, onClick: this.nextMonth, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "9 18 15 12 9 6" })))), this.showYearStepper && (h("button", { "aria-label": this.labels.nextYearButton, class: this.getClassName('next-year-button'), disabled: this.disabled, innerHTML: this.nextYearButtonContent || undefined, onClick: this.nextYear, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "13 17 18 12 13 7" }), h("polyline", { points: "6 17 11 12 6 7" }))))), h("div", { class: this.getClassName('body') }, h("table", { class: this.getClassName('calendar'), onKeyDown: this.onKeyDown, role: "grid" }, h("thead", { class: this.getClassName('calendar-header') }, h("tr", { class: this.getClassName('weekday-row') }, this.weekdays.map((weekday) => (h("th", { abbr: weekday[1], class: this.getClassName('weekday'), key: weekday[0], scope: "col" }, h("span", null, weekday[0])))))), h("tbody", null, this.getCalendarRows().map((calendarRow) => {
|
|
546
|
+
}, role: "group" }, h("div", { class: this.getClassName('header') }, h("span", { "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle()), this.showYearStepper && (h("button", { "aria-label": this.labels.previousYearButton, class: this.getClassName('previous-year-button'), disabled: this.disabled, innerHTML: this.previousYearButtonContent || undefined, onClick: this.previousYear, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "11 17 6 12 11 7" }), h("polyline", { points: "18 17 13 12 18 7" })))), this.showMonthStepper && (h("button", { "aria-label": this.labels.previousMonthButton, class: this.getClassName('previous-month-button'), disabled: this.disabled, innerHTML: this.previousMonthButtonContent || undefined, onClick: this.previousMonth, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "15 18 9 12 15 6" })))), h("span", { class: this.getClassName('current-month') }, h("select", { title: this.labels.monthSelect, "aria-label": this.labels.monthSelect, class: this.getClassName('month-select'), disabled: this.disabled, name: "month", onChange: this.onMonthSelect }, getMonths(this.locale).map((month, index) => (h("option", { key: month, selected: this.currentDate.getMonth() === index, value: index + 1 }, month)))), h("input", { title: this.labels.yearSelect, "aria-label": this.labels.yearSelect, class: this.getClassName('year-select'), disabled: this.disabled, max: 9999, maxLength: 4, min: 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && (h("button", { "aria-label": this.labels.nextMonthButton, class: this.getClassName('next-month-button'), disabled: this.disabled, innerHTML: this.nextMonthButtonContent || undefined, onClick: this.nextMonth, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "9 18 15 12 9 6" })))), this.showYearStepper && (h("button", { "aria-label": this.labels.nextYearButton, class: this.getClassName('next-year-button'), disabled: this.disabled, innerHTML: this.nextYearButtonContent || undefined, onClick: this.nextYear, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "13 17 18 12 13 7" }), h("polyline", { points: "6 17 11 12 6 7" }))))), h("div", { class: this.getClassName('body') }, h("table", { class: this.getClassName('calendar'), onKeyDown: this.onKeyDown, role: "grid" }, h("thead", { class: this.getClassName('calendar-header') }, h("tr", { class: this.getClassName('weekday-row') }, this.weekdays.map((weekday) => (h("th", { "aria-label": weekday[1], abbr: weekday[1], class: this.getClassName('weekday'), key: weekday[0], scope: "col" }, h("span", null, weekday[0])))))), h("tbody", null, this.getCalendarRows().map((calendarRow) => {
|
|
422
547
|
const rowKey = `row-${calendarRow[0].getMonth()}-${calendarRow[0].getDate()}`;
|
|
423
548
|
return (h("tr", { class: this.getClassName('calendar-row'), key: rowKey }, calendarRow.map((day) => {
|
|
424
549
|
var _a, _b, _c, _d, _e;
|
|
@@ -463,11 +588,12 @@ const WCDatepicker = /*@__PURE__*/ proxyCustomElement(class WCDatepicker extends
|
|
|
463
588
|
: isToday
|
|
464
589
|
? 'em'
|
|
465
590
|
: 'span';
|
|
466
|
-
return (h("td", { "aria-disabled": String(isDisabled), "aria-selected": isSelected ? 'true' : undefined, class: className, "data-date": getISODateString(day), key: cellKey, onClick: this.onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "gridcell", tabIndex: isSameDay(day, this.currentDate) && !this.disabled
|
|
591
|
+
return (h("td", { "aria-disabled": String(isDisabled), "aria-selected": isSelected ? 'true' : undefined, "aria-current": isToday ? 'date' : isSelected ? 'true' : undefined, class: className, "data-date": getISODateString(day), key: cellKey, onClick: this.onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "gridcell", tabIndex: isSameDay(day, this.currentDate) && !this.disabled
|
|
467
592
|
? 0
|
|
468
593
|
: -1 }, h(Tag, { "aria-hidden": "true" }, day.getDate()), h("span", { class: "visually-hidden" }, Intl.DateTimeFormat(this.locale, {
|
|
469
594
|
day: 'numeric',
|
|
470
|
-
month: 'long'
|
|
595
|
+
month: 'long',
|
|
596
|
+
year: 'numeric'
|
|
471
597
|
}).format(day))));
|
|
472
598
|
})));
|
|
473
599
|
})))), showFooter && (h("div", { class: this.getClassName('footer') }, this.showTodayButton && (h("button", { class: this.getClassName('today-button'), disabled: this.disabled, innerHTML: this.todayButtonContent || undefined, onClick: this.showToday, type: "button" }, this.labels.todayButton)), this.showClearButton && (h("button", { class: this.getClassName('clear-button'), disabled: this.disabled, innerHTML: this.clearButtonContent || undefined, onClick: this.clear, type: "button" }, this.labels.clearButton)))))));
|
|
@@ -501,6 +627,8 @@ const WCDatepicker = /*@__PURE__*/ proxyCustomElement(class WCDatepicker extends
|
|
|
501
627
|
"startDate": [1, "start-date"],
|
|
502
628
|
"todayButtonContent": [1, "today-button-content"],
|
|
503
629
|
"value": [1040],
|
|
630
|
+
"maxSearchDays": [2, "max-search-days"],
|
|
631
|
+
"goToRangeStartOnSelect": [4, "go-to-range-start-on-select"],
|
|
504
632
|
"currentDate": [32],
|
|
505
633
|
"hoveredDate": [32],
|
|
506
634
|
"weekdays": [32]
|